diff --git a/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte b/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte
index 318bec58..e5cc3743 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte
@@ -6,8 +6,14 @@ import type { HTMLAttributes } from "svelte/elements";
 interface IHeroProps extends HTMLAttributes<HTMLElement> {
 	title?: string;
 	titleClasses?: string;
+	iconColor?: string;
 }
-const { title, titleClasses, ...restProps }: IHeroProps = $props();
+const {
+	title,
+	titleClasses,
+	iconColor = "black",
+	...restProps
+}: IHeroProps = $props();
 const baseClasses = "w-full relative flex justify-center h-14 items-center";
 </script>
     
@@ -15,7 +21,7 @@ const baseClasses = "w-full relative flex justify-center h-14 items-center";
     <Button.Icon 
         icon={ArrowLeft01Icon}
         iconSize="md"
-        iconColor={"black"}
+        {iconColor}
         class="absolute left-2"
         onclick={() => window.history.back()}
     />
diff --git a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
index 69d07112..44c60354 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -39,9 +40,11 @@ $effect(() => {
 	state.progressWidth =
 		usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
+
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"}  rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"}  rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class={cn(baseClasses, restProps.class)}>
     <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
         <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
         <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
@@ -55,7 +58,7 @@ $effect(() => {
                     <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
                     </div>
             {:else if variant === 'ePassport'}
-                <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+                <p class="bg-white text-black flex items-center leading-0 justify-center rounded-full h-7 px-5 text-xs font-medium">HIGH SECURITY</p>
                 <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
                 
             {:else if variant === 'eVault'}
@@ -64,9 +67,9 @@ $effect(() => {
         </div>
         <div>
             {#if variant === "eName"}        
-                <p class="text-gray font-light">Your eName</p>
+                <p class="text-gray font-normal">Your eName</p>
                 <div class="flex items-center justify-between w-full">
-                    <p class="text-white w-[60%] font-medium">@{userId}</p>
+                    <p class="text-white w-full font-medium">@{userId}</p>
                 </div>
             {:else if variant === "ePassport"}
                 <div class="flex gap-2 flex-col">
@@ -92,7 +95,4 @@ $effect(() => {
             {/if}
         </div>
     </div>
-</div>
-
-    
-    
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte
index 88f8a776..74d512ba 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte
@@ -5,7 +5,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	variant?: "solid" | "soft" | "danger" | "danger-soft" | "white";
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";
 	size?: "sm" | "md";
@@ -15,6 +15,7 @@ const {
 	variant = "solid",
 	isLoading,
 	callback,
+	onclick,
 	blockingClick,
 	type = "button",
 	size = "md",
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
index 4e6be406..f998d065 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
@@ -6,7 +6,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	icon: IconSvgElement;
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	onclick?: () => void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";
diff --git a/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte b/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
index 0af52cf9..12ccc1df 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
@@ -53,17 +53,6 @@ $effect(() => {
 
 	return () => pane.destroy();
 });
-
-$effect(() => {
-	if (isPaneOpen) {
-		pane.present({ animate: true });
-	} else {
-		pane.destroy({ animate: true });
-	}
-	drawerElem.addEventListener("click_outside", () => {
-		handleClickOutside();
-	});
-});
 </script>
 
 <div
@@ -74,7 +63,7 @@ $effect(() => {
     })}
     onswipe={() => handleSwipe?.(isPaneOpen)}
     bind:this={drawerElem}
-    use:clickOutside
+    use:clickOutside={handleClickOutside}
     class={cn(restProps.class)}
 >
     <div class="px-6">
diff --git a/infrastructure/eid-wallet/src/lib/utils/clickOutside.ts b/infrastructure/eid-wallet/src/lib/utils/clickOutside.ts
index 5c5369fe..f62a3b43 100644
--- a/infrastructure/eid-wallet/src/lib/utils/clickOutside.ts
+++ b/infrastructure/eid-wallet/src/lib/utils/clickOutside.ts
@@ -1,12 +1,13 @@
 /** Dispatch event on click outside of node */
-export const clickOutside = (node: HTMLElement) => {
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
 	const handleClick = (event: Event) => {
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		if (node && !node.contains(event.target) && !event.defaultPrevented) {
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
-			node.dispatchEvent(new CustomEvent("click_outside", node));
+		if (
+			node &&
+			!node.contains(event.target as Node) &&
+			!event.defaultPrevented
+		) {
+			callback(); // Call the provided callback
+			node.dispatchEvent(new CustomEvent("click_outside"));
 		}
 	};
 
diff --git a/infrastructure/eid-wallet/src/routes/(app)/+layout.svelte b/infrastructure/eid-wallet/src/routes/(app)/+layout.svelte
new file mode 100644
index 00000000..b7c77c23
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/+layout.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import { page } from "$app/state";
+import type { Snippet } from "svelte";
+import type { LayoutData } from "./$types";
+
+let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+let currentRoute = $derived(page.url.pathname.split("/").pop() || "home");
+</script>
+
+<!-- Dev only: remove this when deploying to production -->
+{#if currentRoute === "scan-qr"}
+<div class="fixed -z-10 bg-black w-screen h-screen top-0">
+    <img src="/images/dummyScan.png" class="opacity-40 w-screen h-screen object-cover" alt="dummy scan">
+</div>
+{/if}
+
+<div class="p-6 mb-16">
+    {@render children()}
+</div>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/routes/(app)/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/+page.svelte
new file mode 100644
index 00000000..572f85c7
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/+page.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+import { Hero, IdentityCard } from "$lib/fragments";
+import { Drawer } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import { QrCodeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01 - 01 - 1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+let shareQRdrawerOpen = $state(false);
+
+function shareQR() {
+	alert("QR Code shared!");
+	shareQRdrawerOpen = false;
+}
+</script>
+
+    
+<Hero
+    title="Good morning!"
+    subtitle="Don't forget to drink water."
+    showSettings
+/>
+
+{#snippet Section(title: string, children: Snippet)}
+    <section class="mt-8">
+    <h4 class="mb-2">{title}</h4>
+        {@render children()}
+    </section>
+{/snippet}
+
+{#snippet eName()}
+    <IdentityCard
+    variant="eName"
+    userId="caa0f630-2413-5aceaa2c-4628ce93e497"
+    viewBtn={() => alert("View button clicked!")}
+    shareBtn={() => shareQRdrawerOpen = true}
+    />
+{/snippet}
+{#snippet ePassport()}
+    <IdentityCard
+    variant="ePassport"
+    viewBtn={() => goto("/ePassport")}
+    userData={dummyData}
+    />
+{/snippet}
+{#snippet eVault()}
+    <IdentityCard
+    variant="eVault"
+    usedStorage={15}
+    totalStorage={100}
+    />
+{/snippet}
+
+{@render Section("eName", eName)}
+{@render Section("ePassport", ePassport)}
+{@render Section("eVault", eVault)}
+
+<Drawer
+    title="Scan QR Code"
+    bind:isPaneOpen={shareQRdrawerOpen}
+    isCancelRequired={true}
+    class="flex flex-col gap-4 items-center justify-center"
+>
+    <div class="flex justify-center relative items-center overflow-hidden h-full bg-gray rounded-3xl p-8">
+        <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute top-4"></div>
+        <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute bottom-4"></div>
+        <img class="z-10" src="/images/dummyQR.png" alt="QR Code" />
+    </div>
+
+    <h4 class="text-center">Share your eName</h4>
+    <p class="text-black-700 text-center">Anyone scanning this can see your eName</p>
+    <div class="flex justify-center items-center mt-4">
+        <Button.Action
+            variant="solid"
+            callback={shareQR}
+            class="w-full"
+        >
+            Share
+        </Button.Action>
+    </div>
+</Drawer>
+
+<Button.Nav href="/scan-qr">
+    <Button.Action
+        variant="solid"
+        onclick={() => alert("Action button clicked!")}
+        class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+    >
+        <HugeiconsIcon
+            size={32}
+            strokeWidth={2}
+            className="mr-2"
+            icon={QrCodeIcon}
+        />
+        Scan to Login
+    </Button.Action>
+</Button.Nav>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/routes/(app)/ePassport/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/ePassport/+page.svelte
new file mode 100644
index 00000000..4ada3866
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/ePassport/+page.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+import { AppNav, IdentityCard } from "$lib/fragments";
+import * as Button from "$lib/ui/Button";
+import { Share05Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01-01-1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+const secondDummyData = {
+	"Birth Name": "John Doe",
+	"Place of birth": "New York, USA",
+	Nationality: "American",
+	"ID submitted": "American Passport",
+	"Expiry date": "19-12-2027",
+};
+
+function shareEPassport() {
+	alert("EPassport Code shared!");
+}
+</script>
+
+<AppNav title="ePassport" class="mb-8" />
+
+<div>
+    <IdentityCard
+        variant="ePassport"
+        userData={dummyData}
+        class="shadow-lg"
+    />
+    <div class="p-6 pt-12 bg-gray w-full rounded-2xl -mt-8 flex flex-col gap-2">
+        {#each Object.entries(secondDummyData) as [fieldName, value] }    
+            <div class="flex justify-between">
+                <p class="text-black-700 font-normal">{fieldName}</p>
+                <p class="text-black-500 font-medium">{value}</p>
+            </div>
+        {/each}
+    </div>
+</div>
+
+<Button.Action
+    variant="solid"
+    callback={shareEPassport}
+    class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+>
+    <HugeiconsIcon
+        size={32}
+        strokeWidth={2}
+        className="mr-2"
+        icon={Share05Icon}
+    />
+    Share ePassport
+</Button.Action>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte
new file mode 100644
index 00000000..d521efa5
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+import AppNav from "$lib/fragments/AppNav/AppNav.svelte";
+import { Drawer } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import {
+	FlashlightIcon,
+	Image02Icon,
+	QrCodeIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { SVGAttributes } from "svelte/elements";
+
+const pathProps: SVGAttributes<SVGPathElement> = {
+	stroke: "white",
+	"stroke-width": 7,
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+};
+
+let codeScannedDrawerOpen = $state(false);
+let loggedInDrawerOpen = $state(false);
+let flashlightOn = $state(false);
+</script>
+
+<AppNav title="Scan QR Code" titleClasses="text-white" iconColor="white" />
+
+<svg class="mx-auto mt-48" width="204" height="215" viewBox="0 0 204 215" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M46 4H15C8.92487 4 4 8.92487 4 15V46" {...pathProps}/>
+    <path d="M158 4H189C195.075 4 200 8.92487 200 15V46" {...pathProps}/>
+    <path d="M46 211H15C8.92487 211 4 206.075 4 200V169" {...pathProps}/>
+    <path d="M158 211H189C195.075 211 200 206.075 200 200V169" {...pathProps}/>
+</svg>
+
+<h4 class="text-white font-semibold text-center mt-20">Point the camera at the code</h4>
+    
+<div class="fixed bottom-12 left-1/2 -translate-x-1/2 z-10 flex gap-8 justify-center items-center">
+    <Button.Icon
+        icon={Image02Icon}
+        bgColor="white"
+        bgSize="md"
+    />
+    <Button.Icon
+        icon={QrCodeIcon}
+        bgColor="white"
+        bgSize="lg"
+        iconSize="lg"
+        callback={() => { codeScannedDrawerOpen = true; }}
+    />
+    <Button.Icon
+    icon={FlashlightIcon}
+        aria-label="Toggle flashlight"
+        bgSize="md"  
+        iconSize={32}        
+        bgColor={flashlightOn ? "white" : "secondary"}   
+        iconColor="black"    
+        onclick={() => (flashlightOn = !flashlightOn)}
+    />
+</div>
+
+<!-- code scanned drawer -->
+<Drawer
+    title="Scan QR Code"
+    bind:isPaneOpen={codeScannedDrawerOpen}
+    isCancelRequired={true}
+    class="flex flex-col gap-4 items-center justify-center"
+>
+    <div class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]">
+        <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
+        <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"></div>
+        <HugeiconsIcon 
+            size={40}
+            className="z-10"
+            icon={QrCodeIcon}
+            strokeWidth={1.5}
+            color="var(--color-primary)"
+        />
+    </div>
+
+    <h4>Code scanned!</h4>
+    <p class="text-black-700">You're trying to access the following site</p>
+
+    <div class="bg-gray rounded-2xl w-full p-4 mt-4">
+        <h4 class="text-base text-black-700">Website URL</h4>
+        <p class="text-black-700 font-normal underline">https://www.aave.inc/login</p>
+    </div>
+    <div class="flex justify-center gap-3 items-center mt-4">
+        <Button.Action
+            variant="danger-soft"
+            class="w-full"
+            callback={() => { codeScannedDrawerOpen = false; }}
+        >
+            Decline
+        </Button.Action>
+        <Button.Action
+            variant="solid"
+            class="w-full"
+            callback={() => {
+                codeScannedDrawerOpen = false
+                loggedInDrawerOpen = true
+            }}
+        >
+            Confirm
+        </Button.Action>
+    </div>
+</Drawer>
+
+<!-- logged in drawer -->
+<Drawer
+    title="Scan QR Code"
+    bind:isPaneOpen={loggedInDrawerOpen}
+    isCancelRequired={true}
+    class="flex flex-col gap-4 items-center justify-center"
+>
+    <div class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]">
+        <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
+        <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"></div>
+        <HugeiconsIcon 
+            size={40}
+            className="z-10"
+            icon={QrCodeIcon}
+            strokeWidth={1.5}
+            color="var(--color-primary)"
+        />
+    </div>
+
+    <h4>You're logged in!</h4>
+    <p class="text-black-700">You're now connected to this service'</p>
+
+    <div class="flex justify-center items-center mt-4">
+        <Button.Action
+            variant="solid"
+            class="w-full"
+            callback={() => { loggedInDrawerOpen = false; }}
+        >
+            Close
+        </Button.Action>
+    </div>
+</Drawer>
+
diff --git a/infrastructure/eid-wallet/src/routes/+page.svelte b/infrastructure/eid-wallet/src/routes/+page.svelte
deleted file mode 100644
index 467b9a43..00000000
--- a/infrastructure/eid-wallet/src/routes/+page.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-import { goto } from "$app/navigation";
-import ButtonAction from "$lib/ui/Button/ButtonAction.svelte";
-</script>
-
-<ButtonAction callback={async() => await(goto("/onboarding"))}>Onboarding Flow</ButtonAction>
-<ButtonAction callback={async() => await(goto("/register"))}>Create PIN</ButtonAction>
-<ButtonAction callback={async() => await(goto("/settings"))}>Settings</ButtonAction>
diff --git a/infrastructure/eid-wallet/static/images/dummyQR.png b/infrastructure/eid-wallet/static/images/dummyQR.png
new file mode 100644
index 00000000..5d993ffc
Binary files /dev/null and b/infrastructure/eid-wallet/static/images/dummyQR.png differ
diff --git a/infrastructure/eid-wallet/static/images/dummyScan.png b/infrastructure/eid-wallet/static/images/dummyScan.png
new file mode 100644
index 00000000..d001deef
Binary files /dev/null and b/infrastructure/eid-wallet/static/images/dummyScan.png differ