diff --git a/src/assets/icons/save.svg b/src/assets/icons/save.svg
new file mode 100644
index 0000000..c63233f
--- /dev/null
+++ b/src/assets/icons/save.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 3c-.53043 0-1.03914.21071-1.41421.58579C3.21071 3.96086 3 4.46957 3 5v14c0 .5304.21071 1.0391.58579 1.4142C3.96086 20.7893 4.46957 21 5 21h14c.5304 0 1.0391-.2107 1.4142-.5858S21 19.5304 21 19V5.5L18.5 3H17v6c0 .26522-.1054.51957-.2929.70711C16.5196 9.89464 16.2652 10 16 10H8c-.26522 0-.51957-.10536-.70711-.29289C7.10536 9.51957 7 9.26522 7 9V3H5Zm7 1v5h3V4h-3Zm-5 8h10c.2652 0 .5196.1054.7071.2929S18 12.7348 18 13v6H6v-6c0-.2652.10536-.5196.29289-.7071C6.48043 12.1054 6.73478 12 7 12Z" fill="#fff"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/upload.svg b/src/assets/icons/upload.svg
new file mode 100644
index 0000000..79cafb5
--- /dev/null
+++ b/src/assets/icons/upload.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 20c-.55 0-1.021-.196-1.413-.588C4.195 19.02 3.99934 18.5493 4 18v-3h2v3h12v-3h2v3c0 .55-.196 1.021-.588 1.413-.392.392-.8627.5877-1.412.587H6Zm5-4V7.85l-2.6 2.6L7 9l5-5 5 5-1.4 1.45-2.6-2.6V16h-2Z" fill="#fff"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/OnboardWarning.tsx b/src/components/OnboardWarning.tsx
index a8b45ed..1137278 100644
--- a/src/components/OnboardWarning.tsx
+++ b/src/components/OnboardWarning.tsx
@@ -1,7 +1,10 @@
 import { Show, createSignal, onMount } from "solid-js";
-import { Button, ButtonLink, SmallHeader, VStack } from "./layout";
+import { Button, ButtonLink, SmallHeader } from "./layout";
 import { useMegaStore } from "~/state/megaStore";
 import { showToast } from "./Toaster";
+import save from "~/assets/icons/save.svg"
+import close from "~/assets/icons/close.svg";
+import restore from "~/assets/icons/upload.svg";
 
 export function OnboardWarning() {
     const [state, actions] = useMegaStore();
@@ -18,30 +21,44 @@ export function OnboardWarning() {
     return (
         <>
             {/* TODO: show this once we have a restore flow */}
-            <Show when={!state.dismissed_restore_prompt && false}>
-                <div class='rounded-xl p-4 flex flex-col gap-2 bg-neutral-950 overflow-x-hidden'>
-                    <SmallHeader>Welcome!</SmallHeader>
-                    <VStack>
-                        <p class="text-2xl font-light">
-                            Do you want to restore an existing Mutiny Wallet?
-                        </p>
-                        <div class="w-full flex gap-2">
-                            <Button intent="green" onClick={() => { showToast({ title: "Unimplemented", description: "We don't do that yet" }) }}>Restore</Button>
-                            <Button onClick={actions.dismissRestorePrompt}>Nope</Button>
+            <Show when={false}>
+                <div class="grid grid-cols-[auto_minmax(0,_1fr)_auto] rounded-xl p-4 gap-4 bg-neutral-950/50">
+                    <div class="self-center">
+                        <img src={restore} alt="backup" class="w-8 h-8" />
+                    </div>
+                    <div class='flex items-center gap-4'>
+                        <div class="flex flex-col">
+                            <SmallHeader>Welcome!</SmallHeader>
+                            <p class="text-base font-light">
+                                If you've used Mutiny before you can restore from a backup. Otherwise you can skip this and enjoy your new wallet!
+                            </p>
                         </div>
-                    </VStack>
+                        <Button intent="green" layout="xs" onClick={() => { showToast({ title: "Unimplemented", description: "We don't do that yet" }) }}>Restore</Button>
+
+                    </div>
+                    <button tabindex="-1" onClick={() => { actions.dismissRestorePrompt() }} class="self-center hover:bg-white/10 rounded-lg active:bg-m-blue w-8">
+                        <img src={close} alt="Close" />
+                    </button>
                 </div>
             </Show>
             <Show when={!state.has_backed_up && hasMoney() && !dismissedBackup()}>
-                <div class='rounded-xl p-4 flex flex-col gap-2 bg-neutral-950 overflow-x-hidden'>
-                    <SmallHeader>Secure your funds</SmallHeader>
-                    <p class="text-2xl font-light">
-                        You have money stored in this browser. Let's make sure you have a backup.
-                    </p>
-                    <div class="w-full flex gap-2">
-                        <ButtonLink intent="blue" href="/backup">Backup</ButtonLink>
-                        <Button onClick={() => { setDismissedBackup(true) }}>Nope</Button>
+                <div class="grid grid-cols-[auto_minmax(0,_1fr)_auto] rounded-xl p-4 gap-4 bg-neutral-950/50">
+                    <div class="self-center">
+                        <img src={save} alt="backup" class="w-8 h-8" />
                     </div>
+                    <div class='flex items-center gap-4'>
+                        <div class="flex flex-col">
+                            <SmallHeader>Secure your funds</SmallHeader>
+                            <p class="text-base font-light">
+                                You have money stored in this browser. Let's make sure you have a backup.
+                            </p>
+                        </div>
+                        <ButtonLink intent="blue" layout="xs" href="/backup">Backup</ButtonLink>
+
+                    </div>
+                    <button tabindex="-1" onClick={() => { setDismissedBackup(true) }} class="self-center hover:bg-white/10 rounded-lg active:bg-m-blue w-8">
+                        <img src={close} alt="Close" />
+                    </button>
                 </div>
             </Show>
         </>
diff --git a/src/components/layout/Button.tsx b/src/components/layout/Button.tsx
index 32744c5..3bbc2cb 100644
--- a/src/components/layout/Button.tsx
+++ b/src/components/layout/Button.tsx
@@ -4,7 +4,7 @@ import { Dynamic } from "solid-js/web";
 import { A } from "solid-start";
 import { LoadingSpinner } from ".";
 
-const button = cva("p-3 rounded-xl text-xl font-semibold disabled:opacity-50 disabled:grayscale transition", {
+const button = cva("p-3 rounded-xl  font-semibold disabled:opacity-50 disabled:grayscale transition", {
     variants: {
         // TODO: button hover has to work different than buttonlinks (like disabled state)
         intent: {
@@ -16,10 +16,10 @@ const button = cva("p-3 rounded-xl text-xl font-semibold disabled:opacity-50 dis
             green: "bg-m-green text-white shadow-inner-button hover:bg-m-green-dark text-shadow-button",
         },
         layout: {
-            flex: "flex-1",
-            pad: "px-8",
+            flex: "flex-1 text-xl",
+            pad: "px-8 text-xl",
             small: "px-4 py-2 w-auto text-lg",
-            xs: "px-2 py-1 w-auto rounded-lg font-normal text-base"
+            xs: "px-4 py-2 w-auto rounded-lg text-base"
         },
     },
     defaultVariants: {
diff --git a/src/routes/Storybook.tsx b/src/routes/Storybook.tsx
index 9a6ce43..f33f0e9 100644
--- a/src/routes/Storybook.tsx
+++ b/src/routes/Storybook.tsx
@@ -1,6 +1,7 @@
 import { ActivityItem } from "~/components/ActivityItem";
 import { AmountCard } from "~/components/AmountCard";
 import NavBar from "~/components/NavBar";
+import { OnboardWarning } from "~/components/OnboardWarning";
 import { ShareCard } from "~/components/ShareCard";
 import { Card, DefaultMain, LargeHeader, SafeArea, VStack } from "~/components/layout";
 
@@ -10,14 +11,15 @@ export default function Admin() {
         <SafeArea>
             <DefaultMain>
                 <LargeHeader>Storybook</LargeHeader>
+                <OnboardWarning />
                 <VStack>
                     <AmountCard amountSats={"100000"} fee={"69"} />
                     <ShareCard text={SAMPLE} />
                     <Card title="Activity">
-                        <ActivityItem kind="lightning" name="benthecarman" amount={100000} date={1683664966} />
-                        <ActivityItem kind="onchain" name="tony" amount={42000000} positive date={1683664966} />
-                        <ActivityItem kind="onchain" name="a fake name that is too long" amount={42000000} date={1683664966} />
-                        <ActivityItem kind="onchain" name="a fake name that is too long" amount={42000000} date={1683664966} />
+                        <ActivityItem kind="lightning" labels={["benthecarman"]} amount={100000} date={1683664966} />
+                        <ActivityItem kind="onchain" labels={["tony"]} amount={42000000} positive date={1683664966} />
+                        <ActivityItem kind="onchain" labels={["a fake name thati is too long"]} amount={42000000} date={1683664966} />
+                        <ActivityItem kind="onchain" labels={["a fake name thati is too long"]} amount={42000000} date={1683664966} />
                     </Card>
                 </VStack>
             </DefaultMain>