diff --git a/src/app/features/approver/approver.stories.tsx b/src/app/features/approver/approver.stories.tsx
index 97994b7b474..7ae20e03dd2 100644
--- a/src/app/features/approver/approver.stories.tsx
+++ b/src/app/features/approver/approver.stories.tsx
@@ -13,7 +13,6 @@ const meta: Meta<typeof Approver> = {
   component: Approver,
   tags: ['autodocs'],
   title: 'Feature/Approver',
-
   render: ({ children, ...args }) => (
     <Flex maxW="390px" h="680px" border="1px solid lightgrey" overflowY="auto">
       <Approver {...args}>{children}</Approver>
@@ -25,78 +24,105 @@ export default meta;
 
 type Story = StoryObj<typeof Approver>;
 
-export const ExampleOne: Story = {
-  args: {
-    children: (
-      <>
-        <Approver.Header title="Some prompt that breaks two lines" requester="gamma.io" />
-        <Approver.Status status="pending"></Approver.Status>
+function DemoApproverContent() {
+  return (
+    <>
+      {' '}
+      <Approver.Section>
+        <Approver.Subheader>
+          Subheader with icon <ZapIcon variant="small" />
+        </Approver.Subheader>
+        <Pressable>
+          <ItemLayout
+            img={<Circle size="40px" backgroundColor="ink.border-default" />}
+            titleLeft={<Box width="180px" height="14px" backgroundColor="ink.border-default" />}
+            titleRight={<Box width="50px" height="14px" backgroundColor="ink.border-default" />}
+            captionLeft={<Box width="70px" height="12px" backgroundColor="ink.border-default" />}
+            captionRight={<Box width="40px" height="12px" backgroundColor="ink.border-default" />}
+          />
+        </Pressable>
+        <Approver.Subheader mt="space.05">Subheader 2</Approver.Subheader>
+        <Flag
+          img={<Circle size="40px" backgroundColor="ink.border-default" />}
+          align="top"
+          mb="space.03"
+        >
+          <Box width="90%" height="16px" backgroundColor="ink.border-default" />
+          <Box width="75%" height="12px" backgroundColor="ink.border-default" mt="space.02" />
+        </Flag>
+      </Approver.Section>
+      <Approver.Section>
+        <Approver.Subheader>Example rich content with avatar</Approver.Subheader>
+        <ItemLayout
+          titleLeft="Michelly token"
+          titleRight="100 MICA"
+          captionLeft="SIP-10"
+          captionRight="$894,891"
+          img={<Circle size="40px" backgroundColor="ink.border-default" />}
+        />
+      </Approver.Section>
+      <Approver.Advanced>
         <Approver.Section>
-          <Approver.Subheader>
-            Subheader with icon <ZapIcon variant="small" />
-          </Approver.Subheader>
-          <Pressable>
+          <Approver.Subheader>In the advanced section</Approver.Subheader>
+          <Pressable onClick={() => {}} mt="space.03" mb="space.03">
             <ItemLayout
+              titleLeft="Pressable"
+              titleRight="Mr. Clicky"
+              captionLeft="Interactive item"
+              captionRight="Click me"
               img={<Circle size="40px" backgroundColor="ink.border-default" />}
-              titleLeft={<Box width="180px" height="14px" backgroundColor="ink.border-default" />}
-              titleRight={<Box width="50px" height="14px" backgroundColor="ink.border-default" />}
-              captionLeft={<Box width="70px" height="12px" backgroundColor="ink.border-default" />}
-              captionRight={<Box width="40px" height="12px" backgroundColor="ink.border-default" />}
             />
           </Pressable>
-          <Approver.Subheader mt="space.05">Subheader 2</Approver.Subheader>
-          <Flag
-            img={<Circle size="40px" backgroundColor="ink.border-default" />}
-            align="top"
-            mb="space.03"
-          >
-            <Box width="90%" height="16px" backgroundColor="ink.border-default" />
-            <Box width="75%" height="12px" backgroundColor="ink.border-default" mt="space.02" />
+        </Approver.Section>
+        <Approver.Section>
+          <Approver.Subheader>Inputs & Outputs</Approver.Subheader>
+          <Flag align="top" img={<Circle size="40px" backgroundColor="ink.border-default" />}>
+            <Box width="100%" height="20px" backgroundColor="ink.border-default" />
           </Flag>
         </Approver.Section>
         <Approver.Section>
-          <Approver.Subheader>Example rich content with avatar</Approver.Subheader>
-          <ItemLayout
-            titleLeft="Michelly token"
-            titleRight="100 MICA"
-            captionLeft="SIP-10"
-            captionRight="$894,891"
-            img={<Circle size="40px" backgroundColor="ink.border-default" />}
-          />
+          <Approver.Subheader>Transaction raw data</Approver.Subheader>
+          <Flag align="top" img={<Circle size="40px" backgroundColor="ink.border-default" />}>
+            <Box width="100%" height="20px" backgroundColor="ink.border-default" />
+          </Flag>
+        </Approver.Section>
+        <Approver.Section>
+          <Approver.Subheader>Additional info</Approver.Subheader>
+          <Flag align="top" img={<Circle size="40px" backgroundColor="ink.border-default" />}>
+            <Box width="100%" height="20px" backgroundColor="ink.border-default" />
+          </Flag>
         </Approver.Section>
-        <Approver.Advanced>
-          <Approver.Section>
-            <Approver.Subheader>In the advanced section</Approver.Subheader>
-            <Pressable onClick={() => {}} mt="space.03" mb="space.03">
-              <ItemLayout
-                titleLeft="Pressable"
-                titleRight="Mr. Clicky"
-                captionLeft="Interactive item"
-                captionRight="Click me"
-                img={<Circle size="40px" backgroundColor="ink.border-default" />}
-              />
-            </Pressable>
-          </Approver.Section>
-          <Approver.Section>
-            <Approver.Subheader>Inputs & Outputs</Approver.Subheader>
-            <Flag align="top" img={<Circle size="40px" backgroundColor="ink.border-default" />}>
-              <Box width="100%" height="20px" backgroundColor="ink.border-default" />
-            </Flag>
-          </Approver.Section>
-          <Approver.Section>
-            <Approver.Subheader>Transaction raw data</Approver.Subheader>
-            <Flag align="top" img={<Circle size="40px" backgroundColor="ink.border-default" />}>
-              <Box width="100%" height="20px" backgroundColor="ink.border-default" />
-            </Flag>
-          </Approver.Section>
-          <Approver.Section>
-            <Approver.Subheader>Additional info</Approver.Subheader>
-            <Flag align="top" img={<Circle size="40px" backgroundColor="ink.border-default" />}>
-              <Box width="100%" height="20px" backgroundColor="ink.border-default" />
-            </Flag>
-          </Approver.Section>
-        </Approver.Advanced>
+      </Approver.Advanced>
+    </>
+  );
+}
 
+export const Pending: Story = {
+  args: {
+    children: (
+      <>
+        <Approver.Header title="Some prompt that breaks two lines" requester="gamma.io" />
+        <Approver.Status status="pending"></Approver.Status>
+        <DemoApproverContent />
+        <Approver.Actions
+          actions={
+            <>
+              <Button variant="outline">Cancel</Button>
+              <Button>Approve</Button>
+            </>
+          }
+        />
+      </>
+    ),
+  },
+};
+export const Completed: Story = {
+  args: {
+    children: (
+      <>
+        <Approver.Header title="Completed" requester="alexlab.co" />
+        <Approver.Status status="completed"></Approver.Status>
+        <DemoApproverContent />
         <Approver.Actions
           actions={
             <>
@@ -116,7 +142,7 @@ export const ActionsAlignToBottom: Story = {
       <>
         <Approver.Header
           title="Action align to bottom of page"
-          requester="even when there's no content to push it there"
+          requester="…… even when there's no content to push it there"
         />
 
         <Approver.Actions
diff --git a/src/app/features/approver/components/approver-status.tsx b/src/app/features/approver/components/approver-status.tsx
index e03338713e2..179564c96ce 100644
--- a/src/app/features/approver/components/approver-status.tsx
+++ b/src/app/features/approver/components/approver-status.tsx
@@ -32,13 +32,12 @@ export function ApproverStatus({ status }: ApproverStatusProps) {
     <styled.div pos="relative">
       <StatusIndicatorLine status={status} />
       <styled.div
-        mt="4px"
         textStyle="label.03"
         background="ink.background-primary"
         px="space.05"
         py="space.03"
       >
-        <BulletSeparator spacing="space.01">
+        <BulletSeparator spacing="space.02">
           <styled.span>{capitalize(status)}</styled.span>
           <styled.span>{toLocalizedDateFormat(dayjs())}</styled.span>
         </BulletSeparator>
diff --git a/src/app/ui/animations/loading-striped-gradient.tsx b/src/app/ui/animations/loading-striped-gradient.tsx
index 6177eeb51cc..8db6adb24ad 100644
--- a/src/app/ui/animations/loading-striped-gradient.tsx
+++ b/src/app/ui/animations/loading-striped-gradient.tsx
@@ -3,14 +3,14 @@ import { css } from 'leather-styles/css';
 export const loadingStripedGradient = css({
   pos: 'relative',
   overflow: 'hidden',
-  content: '""',
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  backgroundImage:
-    'repeating-linear-gradient(45deg, #F07D12, #F07D12 16px, #FFB977 16px, #FFB977 32px)',
-  animation: 'barberpole 30s linear infinite',
-  backgroundSize: '193% 100%',
+  _before: {
+    content: '""',
+    position: 'absolute',
+    width: '500px',
+    height: '500px',
+    backgroundImage:
+      'repeating-linear-gradient(45deg, #F07D12, #F07D12 16px, #FFB977 16px, #FFB977 32px)',
+    animation: 'barberpole 40s linear infinite',
+    backgroundSize: '193% 100%',
+  },
 });