diff --git a/infrastructure/eid-wallet/src/app.css b/infrastructure/eid-wallet/src/app.css
index af1e2ef3..5333d875 100644
--- a/infrastructure/eid-wallet/src/app.css
+++ b/infrastructure/eid-wallet/src/app.css
@@ -11,27 +11,27 @@
 @layer base {
 	/* Typography */
 	h1 {
-		@apply text-[90px] text-black font-semibold;
+		@apply text-[90px]/[1.5] text-black font-semibold;
 	}
 
 	h2 {
-		@apply text-6xl text-black font-semibold;
+		@apply text-6xl/[1.5] text-black font-semibold;
 	}
 
 	h3 {
-		@apply text-3xl text-black font-semibold;
+		@apply text-3xl/[1.5] text-black font-semibold;
 	}
 
 	h4 {
-		@apply text-xl text-black font-semibold;
+		@apply text-xl/[1.5] text-black font-semibold;
 	}
 
 	p {
-		@apply text-base text-black font-normal;
+		@apply text-base/[1.5] text-black font-normal;
 	}
 
 	.small {
-		@apply text-xs text-black font-normal;
+		@apply text-xs/[1.5] text-black font-normal;
 	}
 }
 
@@ -71,4 +71,8 @@
 
 body {
 	font-family: "Archivo", sans-serif;
+	padding-top: env(safe-area-inset-top);
+	padding-bottom: env(safe-area-inset-bottom);
+	padding-left: env(safe-area-inset-left);
+	padding-right: env(safe-area-inset-right);
 }
diff --git a/infrastructure/eid-wallet/src/app.html b/infrastructure/eid-wallet/src/app.html
index 92e7e333..33600a68 100644
--- a/infrastructure/eid-wallet/src/app.html
+++ b/infrastructure/eid-wallet/src/app.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preload" href="/fonts/Archivo-VariableFont_wdth,wght.ttf" as="font" type="truetype" crossorigin="anonymous">
     <title>Tauri + SvelteKit + Typescript App</title>
     %sveltekit.head%
   </head>
diff --git a/infrastructure/eid-wallet/src/lib/fragments/Header/Header.stories.ts b/infrastructure/eid-wallet/src/lib/fragments/Header/Header.stories.ts
deleted file mode 100644
index f41b19a6..00000000
--- a/infrastructure/eid-wallet/src/lib/fragments/Header/Header.stories.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import Header from "./Header.svelte";
-
-export default {
-	title: "Fragments/Header",
-	component: Header,
-	tags: ["autodocs"],
-	render: (args: {
-		title: string;
-		isBackRequired: boolean;
-		isUserLoggedIn: boolean;
-	}) => ({
-		Component: Header,
-		props: args,
-	}),
-};
-
-export const Primary = {
-	args: {
-		title: "Create PIN",
-		isBackRequired: false,
-		isUserLoggedIn: false,
-	},
-};
-
-export const Secondary = {
-	args: {
-		title: "Create PIN",
-		isBackRequired: true,
-		isUserLoggedIn: false,
-	},
-};
-
-export const Tertiary = {
-	args: {
-		title: "Create PIN",
-		isBackRequired: true,
-		isUserLoggedIn: true,
-	},
-};
diff --git a/infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte b/infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte
deleted file mode 100644
index 0ae91a53..00000000
--- a/infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-import { cn } from "$lib/utils";
-import { ArrowLeft01Icon, UserCircleIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import type { HTMLAttributes } from "svelte/elements";
-
-interface IHeaderProps extends HTMLAttributes<HTMLElement> {
-	title: string;
-	isUserLoggedIn?: boolean;
-	isBackRequired?: boolean;
-	handleProfile?: () => void;
-}
-
-let {
-	title = "Create PIN",
-	isUserLoggedIn = true,
-	isBackRequired = true,
-	handleProfile = undefined,
-	...restProps
-}: IHeaderProps = $props();
-const cBase = "w-full h-[9vh] flex justify-between items-center";
-</script>
-
-<header {...restProps} class={cn(cBase, restProps.class)}>
-    {#if isBackRequired}
-        <button class="flex justify-start" onclick={() => window.history.back()}>
-            <HugeiconsIcon size="5.5vw"  color="var(--color-black-700)" icon={ArrowLeft01Icon} />
-        </button>
-    {:else}
-        <!-- svelte-ignore element_invalid_self_closing_tag -->
-        <span aria-hidden="true"/>
-    {/if}
-    <h3 class="text-center">{title}</h3>
-    {#if isUserLoggedIn}
-        <button class="flex justify-end" onclick={handleProfile}>
-            <HugeiconsIcon size="8.1vw" color="var(--color-black-700)" icon={UserCircleIcon} />
-        </button>
-    {:else}
-        <!-- svelte-ignore element_invalid_self_closing_tag -->
-        <span aria-hidden="true"/>
-    {/if}
-</header>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.stories.ts b/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.stories.ts
new file mode 100644
index 00000000..6978b3f9
--- /dev/null
+++ b/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.stories.ts
@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import Hero from "./Hero.svelte";
+
+export default {
+	title: "Fragments/Hero",
+	component: Hero,
+	tags: ["autodocs"],
+	render: (args: {
+		Component: Hero;
+		props: ComponentProps<typeof Hero>;
+	}) => ({
+		Component: Hero,
+		props: args,
+	}),
+};
+
+export const Basic = {
+	args: {
+		title: "Create PIN",
+		subtitle: "Create a PIN to protect your wallet",
+	},
+};
+
+export const WithSettings = {
+	args: {
+		title: "Good morning!",
+		subtitle: "Don't forget to drink water.",
+		titleClasses: "-mb-2",
+		showSettings: true,
+	},
+};
diff --git a/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.svelte b/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.svelte
new file mode 100644
index 00000000..439f64ff
--- /dev/null
+++ b/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import { Settings02Icon } from "@hugeicons/core-free-icons";
+import type { HTMLAttributes } from "svelte/elements";
+import * as Button from "$lib/ui/Button";
+
+interface IHeroProps extends HTMLAttributes<HTMLElement> {
+	title?: string;
+	subtitle?: string;
+	showSettings?: boolean;
+	titleClasses?: string;
+}
+
+const {
+	title,
+	subtitle,
+	showSettings = false,
+	titleClasses,
+	children,
+	...restProps
+}: IHeroProps = $props();
+
+const baseClasses = "w-full flex justify-between items-center";
+</script>
+
+<header {...restProps} class={cn(baseClasses, restProps.class)}>
+    <div class="flex flex-col items-start">
+            <h3 class={cn(titleClasses)}>
+                {@render children?.()}
+                {title}
+            </h3>
+        {#if subtitle}
+            <p class="text-black-700 mt-2">{subtitle}</p>
+        {/if}
+    </div>
+    {#if showSettings}
+        <Button.Nav href="/settings">
+            <Button.Icon
+                icon={Settings02Icon}
+                iconSize="lg"
+            />
+        </Button.Nav>
+    {:else}
+        <span aria-hidden="true"></span>
+    {/if}
+</header>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
index 823c307a..eb0811f2 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -20,7 +21,7 @@ interface IIdentityCard extends HTMLAttributes<HTMLElement> {
 	usedStorage?: number;
 }
 
-let {
+const {
 	variant = "eName",
 	userId,
 	viewBtn,
@@ -40,7 +41,7 @@ $effect(() => {
 });
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"}  rounded-xl w-full min-h-[150px] text-white overflow-hidden">
+<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 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>
@@ -48,22 +49,17 @@ $effect(() => {
     <div class="p-5 flex flex-col gap-2">
         <div class="flex justify-between">
             {#if variant === 'eName'}  
-                <HugeiconsIcon size={30} strokeWidth={2} color="var(--color-secondary)" icon={CheckmarkBadge02Icon} />
-                <div class="flex gap-3 items-center"> 
-                    <button class="flex justify-start" onclick={shareBtn}>
-                        <HugeiconsIcon size={30} strokeWidth={2} color="white" icon={Upload03Icon} />
-                    </button>
-                    <button class="flex justify-start" onclick={viewBtn}>
-                        <HugeiconsIcon size={30} strokeWidth={2} color="white" icon={ViewIcon} />
-                    </button>
-                </div>
+                <HugeiconsIcon size={30} strokeWidth={2} className="text-secondary" icon={CheckmarkBadge02Icon} />
+                <div class="flex gap-3 items-center">  
+                    <Button.Icon icon={Upload03Icon} iconColor={"white"} strokeWidth={2} onclick={shareBtn} />
+                    <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
+                    </div>
             {:else if variant === 'ePassport'}
-                <p class="bg-white flex items-center rounded-4xl px-5 py-2 small font-semibold">HIGH SECURITY</p>
-                <button class="flex justify-start" onclick={viewBtn}>
-                    <HugeiconsIcon size={30} strokeWidth={2} color="white" icon={ViewIcon} />
-                </button>
+                <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+                <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
+                
             {:else if variant === 'eVault'}
-            <h3 class="text-black-300 font-semibold mb-3">{state.progressWidth} Used</h3>
+                <div class="text-black-300 text-3xl mb-3">{state.progressWidth} Used</div>
             {/if}
         </div>
         <div>
@@ -98,4 +94,5 @@ $effect(() => {
     </div>
 </div>
 
-
+    
+    
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte b/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte
new file mode 100644
index 00000000..d344a848
--- /dev/null
+++ b/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+import { cubicOut } from "svelte/easing";
+import { fade, scale } from "svelte/transition";
+</script>
+
+<div  out:fade={{duration: 150}} class="z-50 absolute w-screen h-screen overflow-hidden" >
+    <div  class="relative w-screen h-screen bg-primary overflow-hidden">
+
+        <img in:scale={{start: 0.8, duration: 500, easing: cubicOut, opacity: 1 }} class="absolute w-full bottom-[-80px] start-0" src="/images/Shape1.svg" alt="illustration">
+        <img in:scale={{start: 0.8, duration: 500, easing: cubicOut, opacity: 1 }} class="absolute w-full top-[50px] end-[100px]" src="/images/Shape2.svg" alt="illustration">
+        <div in:scale={{start: 0.9, duration: 500, easing: cubicOut, opacity: 1 }}  class="absolute w-full top-[42%] start-[50%] translate-x-[-50%] translate-y-[-42%]">
+            <h1 in:fade={{duration: 500}} class="text-center text-white text-[44px]">eAgency</h1>
+            <p in:fade={{duration: 500}} class="text-center text-white">Your self-sovereign digital entity</p>
+        </div>
+        <img in:fade={{duration: 500}} class="absolute bottom-[116px] start-[50%] translate-x-[-50%]" src="/images/W3DSLogoWhite.svg" alt="logo">
+    </div>
+</div>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/fragments/index.ts b/infrastructure/eid-wallet/src/lib/fragments/index.ts
index 21e9aaf3..fa153456 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/index.ts
+++ b/infrastructure/eid-wallet/src/lib/fragments/index.ts
@@ -1,3 +1,3 @@
-export { default as Header } from "./Header/Header.svelte";
+export { default as Hero } from "./Hero/Hero.svelte";
 export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
 export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts
index d43d0d56..9cdec274 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts
@@ -1,4 +1,4 @@
-import { FlashlightIcon } from "@hugeicons/core-free-icons";
+import { FlashlightIcon, ViewIcon } from "@hugeicons/core-free-icons";
 import type { ComponentProps } from "svelte";
 import ButtonIcon from "./ButtonIcon.svelte";
 
@@ -6,10 +6,7 @@ export default {
 	title: "UI/ButtonIcon",
 	component: ButtonIcon,
 	tags: ["autodocs"],
-	render: (args: {
-		Component: ButtonIcon<{ icon: typeof FlashlightIcon }>;
-		props: ComponentProps<typeof ButtonIcon>;
-	}) => ({
+	render: (args: ComponentProps<typeof ButtonIcon>) => ({
 		Component: ButtonIcon,
 		props: args,
 	}),
@@ -19,10 +16,26 @@ export const Default = {
 	render: () => ({
 		Component: ButtonIcon,
 		props: {
-			variant: "white",
 			ariaLabel: "Default button",
-			size: "md",
+			bgSize: "md", // Predefined size
+			iconSize: "md",
+			icon: ViewIcon,
+			bgColor: "black",
+			iconColor: "white",
+		},
+	}),
+};
+
+export const CustomSize = {
+	render: () => ({
+		Component: ButtonIcon,
+		props: {
+			ariaLabel: "Custom sized button",
+			bgSize: "w-[120px] h-[120px]", // Custom Tailwind size
+			iconSize: 56, // Custom pixel size
 			icon: FlashlightIcon,
+			bgColor: "bg-danger",
+			iconColor: "white",
 		},
 	}),
 };
@@ -31,24 +44,32 @@ export const Loading = {
 	render: () => ({
 		Component: ButtonIcon,
 		props: {
-			variant: "white",
 			ariaLabel: "Loading button",
-			size: "md",
+			bgSize: "md",
+			iconSize: "md",
 			icon: FlashlightIcon,
 			isLoading: true,
+			bgColor: "black",
+			iconColor: "white",
 		},
 	}),
 };
 
-export const Active = {
+export const WithCallback = {
 	render: () => ({
 		Component: ButtonIcon,
 		props: {
-			variant: "white",
-			ariaLabel: "Active button",
-			size: "md",
+			ariaLabel: "Button with async callback",
+			bgSize: "md",
+			iconSize: "md",
 			icon: FlashlightIcon,
-			isActive: true,
+			callback: async () => {
+				await new Promise((resolve) => setTimeout(resolve, 2000));
+				console.log("Action completed!");
+			},
+			blockingClick: true,
+			bgColor: "primary",
+			iconColor: "white",
 		},
 	}),
 };
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
index 0fd927da..4e6be406 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
@@ -1,32 +1,49 @@
-<script lang="ts" generics="T">
+<script lang="ts">
 import { cn } from "$lib/utils";
 import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
 
 interface IButtonProps extends HTMLButtonAttributes {
-	variant?: "white" | "clear-on-light" | "clear-on-dark";
+	icon: IconSvgElement;
 	isLoading?: boolean;
 	callback?: () => Promise<void>;
 	onclick?: () => void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";
-	size?: "sm" | "md" | "lg";
-	iconSize?: "sm" | "md" | "lg" | number;
-	icon: IconSvgElement;
-	isActive?: boolean;
+	bgSize?: "sm" | "md" | "lg" | number | string;
+	bgColor?:
+		| "black"
+		| "white"
+		| "gray"
+		| "primary"
+		| "secondary"
+		| "danger"
+		| string;
+	iconSize?: "sm" | "md" | "lg" | number | string;
+	iconColor?:
+		| "black"
+		| "white"
+		| "gray"
+		| "primary"
+		| "secondary"
+		| "danger"
+		| string;
+	strokeWidth?: number;
 }
 
 const {
-	variant = "white",
+	icon,
 	isLoading,
 	callback,
 	onclick,
 	blockingClick,
 	type = "button",
-	size = "md",
-	icon,
-	iconSize = undefined,
-	isActive = false,
+	bgSize,
+	bgColor = "transparent",
+	iconSize = "md",
+	iconColor = "black",
+	strokeWidth = 1.5,
+	children = undefined,
 	...restProps
 }: IButtonProps = $props();
 
@@ -46,119 +63,122 @@ const handleClick = async () => {
 	}
 };
 
-const variantClasses = {
-	white: { background: "bg-white", text: "text-black" },
-	"clear-on-light": { background: "transparent", text: "text-black" },
-	"clear-on-dark": { background: "transparent", text: "text-white" },
-};
-
-const disabledClasses = {
-	white: { background: "bg-white", text: "text-black-500" },
-	"clear-on-light": { background: "bg-transparent", text: "text-black-500" },
-	"clear-on-dark": { background: "bg-transparent", text: "text-black-500" },
-};
-
-const isActiveClasses = {
-	white: { background: "bg-secondary-500", text: "text-black" },
-	"clear-on-light": { background: "bg-secondary-500", text: "text-black" },
-	"clear-on-dark": { background: "bg-secondary-500", text: "text-black" },
-};
-
 const sizeVariant = {
 	sm: "h-8 w-8",
 	md: "h-[54px] w-[54px]",
 	lg: "h-[108px] w-[108px]",
-};
+} as const;
 
 const iconSizeVariant = {
 	sm: 24,
-	md: 24,
+	md: 30,
 	lg: 36,
-};
+} as const;
+
+const backgroundColor: Record<string, string> = {
+	black: "bg-black",
+	white: "bg-white",
+	gray: "bg-gray",
+	primary: "bg-primary",
+	secondary: "bg-secondary",
+	danger: "bg-danger",
+} as const;
+
+const textColor: Record<string, string> = {
+	black: "text-black",
+	white: "text-white",
+	gray: "text-gray",
+	primary: "text-primary",
+	secondary: "text-secondary",
+	danger: "text-danger",
+} as const;
 
 const resolvedIconSize =
-	typeof iconSize === "number" ? iconSize : iconSizeVariant[iconSize ?? size];
+	iconSize === undefined
+		? iconSizeVariant.md
+		: typeof iconSize === "number"
+			? iconSize
+			: iconSize in iconSizeVariant
+				? iconSizeVariant[iconSize as keyof typeof iconSizeVariant]
+				: iconSize;
+
+const resolvedBgSize =
+	bgSize === undefined
+		? "" // if bgSize is empty, there is no background
+		: typeof bgSize === "number"
+			? `h-${bgSize} w-${bgSize}`
+			: bgSize in sizeVariant
+				? sizeVariant[bgSize as keyof typeof sizeVariant]
+				: bgSize;
 
 const classes = $derived({
 	common: cn(
-		"cursor-pointer w-min flex items-center justify-center rounded-full font-semibold duration-100",
-		sizeVariant[size],
+		"cursor-pointer flex items-center justify-center rounded-full font-semibold duration-100",
 	),
-	background: disabled
-		? disabledClasses[variant].background
-		: isActive
-			? isActiveClasses[variant].background
-			: variantClasses[variant].background,
-	text: disabled
-		? disabledClasses[variant].text
-		: isActive
-			? isActiveClasses[variant].text
-			: variantClasses[variant].text,
-	disabled: "cursor-not-allowed",
+	bgSize: resolvedBgSize,
+	background: bgColor in backgroundColor ? backgroundColor[bgColor] : bgColor,
+	iconColor: iconColor in textColor ? textColor[iconColor] : iconColor,
+	disabled: "cursor-not-allowed opacity-50",
+	iconSize: resolvedIconSize,
 });
 </script>
 
 <button
-  {...restProps}
-  class={cn(
-    [
-      classes.common,
-      classes.background,
-      classes.text,
-      disabled && classes.disabled,
-      restProps.class,
-    ].join(' ')
-  )}
-  {disabled}
-  onclick={callback ? handleClick : onclick}
-  {type}
+	{...restProps}
+	class={cn([classes.common, classes.bgSize, classes.iconColor, classes.background, disabled && classes.disabled, restProps.class].join(' '))}
+	{disabled}
+	onclick={callback ? handleClick : onclick}
+	{type}
 >
-  {#if isLoading || isSubmitting}
-    <div
-      class="loading loading-spinner absolute loading-lg {variantClasses[
-        variant
-      ].text}"
-    ></div>
-  {:else}
-    <HugeiconsIcon {icon} size={resolvedIconSize} />
-  {/if}
+	{#if isLoading || isSubmitting}
+	<div class="loading loading-spinner absolute loading-lg {cn(classes.iconColor)}"></div>
+	{:else}
+	<HugeiconsIcon {icon} size={classes.iconSize} {strokeWidth} color={classes.iconColor} />
+	{/if}
 </button>
 
 <!-- 
     @component
     export default ButtonIcon
     @description
-    ButtonIcon component is a button with an icon.
-    
+    ButtonIcon is a customizable icon button component supporting both predefined and custom styles for size and colors.
+
     @props
-    - variant: 'white' | 'clear-on-light' | 'clear-on-dark' .
-    - isLoading: boolean 
-    - callback: () => Promise<void> 
-    - onclick: () => void 
-    - blockingClick: boolean - Prevents multiple clicks
-    - type: 'button' | 'submit' | 'reset' 
-    - size: 'sm' | 'md' | 'lg' 
-    - iconSize: 'sm' | 'md' | 'lg' | number 
-    - icon: IconSvgElement - Needs icon from Hugeicon library
-    - isActive: boolean 
-
-   
+    - icon: IconSvgElement - An icon from the Hugeicons library.
+    - isLoading: boolean - Displays a loading spinner when true.
+    - callback: () => Promise<void> - Async function executed on click.
+    - onclick: () => void - Regular click handler.
+    - blockingClick: boolean - Prevents multiple clicks while an async action is in progress.
+    - type: 'button' | 'submit' | 'reset' - Defines the button type.
+    - bgSize: 'sm' | 'md' | 'lg' | number | string - Predefined size, numeric pixel value, or a Tailwind class.
+    - iconSize: 'sm' | 'md' | 'lg' | number | string - Predefined size, numeric pixel value, or a Tailwind class.
+    - bgColor: 'black' | 'white' | 'gray' | 'primary' | 'secondary' | 'danger' | string - Predefined color or any Tailwind background class.
+    - iconColor: 'black' | 'white' | 'gray' | 'primary' | 'secondary' | 'danger' | string - Predefined color or any Tailwind text class.
+    - strokeWidth: number - Defines the stroke width of the icon.
+
     @usage
     ```html
     <script lang="ts">
-      import * as Button from '$lib/ui/Button'
-      import { FlashlightIcon } from '@hugeicons/core-free-icons'
+      import * as Button from '$lib/ui/Button';
+      import { FlashlightIcon, Upload03Icon } from '@hugeicons/core-free-icons';
+
+	  function shareBtn() {
+	  	console.log('Share button clicked');		
+	}				
       
-      let flashlightOn = $state(false)
+      let flashlightOn = $state(false);
     </script>
 
     <Button.Icon
-      variant="white"
-      aria-label="Open pane"
-      size="md"
+      aria-label="Toggle flashlight"
+      bgSize="w-12 h-12"  // Custom Tailwind class for background size
+      iconSize={32}        // Numeric pixel size
+      bgColor="primary"    // Predefined or Tailwind color class
+      iconColor="white"    // Predefined or Tailwind text color
       icon={FlashlightIcon}
       onclick={() => (flashlightOn = !flashlightOn)}
-      isActive={flashlightOn}
-    ></Button.Icon>
+    />
+
+	<Button.Icon icon={Upload03Icon} iconColor={"white"} strokeWidth={2} onclick={shareBtn} />
     ```
-     -->
+-->
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte b/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
index e804ff30..0af52cf9 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { clickOutside, cn } from "$lib/utils";
 import { CupertinoPane } from "cupertino-pane";
-import { type Snippet } from "svelte";
+import type { Snippet } from "svelte";
 import { swipe } from "svelte-gestures";
 import type { HTMLAttributes } from "svelte/elements";
 
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte
index a77df0ea..d2416031 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Hero } from "$lib/fragments";
 import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
 import { ButtonAction } from "$lib/ui";
 
@@ -8,8 +9,11 @@ const handleFinish = async () => {};
 
 <main class="h-[max-content] pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
     <section>
-        <h3 class="mb-[0.5vh]">Your ePassport and eVault are ready</h3>
-        <p class="text-black-700 mb-[3vh]">Log into any W3DS platform without passwords. It’s tied to this phone; if lost, you’ll need to revoke and reissue it on a new device.</p>
+        <Hero
+            title="Your ePassport and eVault are ready"
+            subtitle="Log into any W3DS platform without passwords. It’s tied to this phone; if lost, you’ll need to revoke and reissue it on a new device."
+            class="mb-2"
+        />
         <IdentityCard variant= "ePassport"
 		viewBtn= {() => alert("View")}
 		userData= {{
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
index 1edd0c8c..cc751e7d 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer } from "$lib/ui";
 
 let isPaneOpen = $state(false);
@@ -20,10 +21,15 @@ const handleNext = async () => {
         <img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
     </article>
     <section class="mb-[9.3vh]">
-        <h2 class="text-[42px]/[1] font-medium mb-[1vh]">Your <br>
+        <Hero
+            subtitle="Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
+            class="mb-4"
+            titleClasses="text-[42px]/[1.1] font-medium"
+        >
+            Your <br>
             Digital Identity,
-            Secured</h2>
-        <p class="text-black-700">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
+            Secured
+        </Hero>
     </section>
     <section>
         <p class="max-w-[300px] mx-[auto] text-center small text-black-500">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
index 0e4612ef..86b6ad6e 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer, InputPin } from "$lib/ui";
 import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -55,8 +56,13 @@ $effect(() => {
 {#if firstStep}
     <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
         <section>
-            <h3 class="mb-[1vh]">Create a pin</h3>
-            <p class="text-black-700 mb-[14vh]">Enter a 4-digit PIN code</p>
+            <Hero
+            title="Create a pin"
+            subtitle="Enter a 4-digit PIN code"
+            class="mb-[14vh]"
+        />
+        <!-- <h3 class="mb-[1vh]">Create a pin</h3>
+            <p class="text-black-700 mb-[14vh]">Enter a 4-digit PIN code</p> -->
             <InputPin bind:pin/>
         </section>
         <ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
@@ -64,8 +70,11 @@ $effect(() => {
 {:else}
     <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
         <section>
-            <h3 class="mb-[1vh]">Re-enter your pin</h3>
-            <p class="text-black-700 mb-[14vh]">Confirm by entering pin again</p>
+            <Hero
+            title="Re-enter your pin"
+                subtitle="Confirm by entering pin again"
+            class="mb-[14vh]"
+        />
             <InputPin bind:pin={repeatPin} {isError}/>
             <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
         </section>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte
index 8f82fc7d..15741f2a 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
-import { IdentityCard } from "$lib/fragments";
+import { Hero, IdentityCard } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 
 const handleNext = async () => {
@@ -10,10 +10,12 @@ const handleNext = async () => {
 
 <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
     <section>
-        <h3 class="mb-[0.5vh]">Here’s your eName</h3>
-        <p class="text-black-700  mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
-        
-        <IdentityCard variant="eName" userId="acbsdjk-14n14k43-12412" shareBtn={() => null}  viewBtn={() => null}/>
+        <Hero
+            title="Here’s your eName"
+            subtitle="This identifier is permanently yours, and it stays with you for your whole life."
+            class="mb-4"
+        />
+        <IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412" shareBtn={() => null}  viewBtn={() => null}/>
     </section>
     <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
 </main>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte
index cf549586..db0b2d3f 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import Hero from "$lib/fragments/Hero/Hero.svelte";
 import { ButtonAction } from "$lib/ui";
 </script>
 
 <main class="h-screen pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
     <section>
-        <h3 class="mb-[1vh]">Verify your account</h3>
-        <p class="text-black-700 mb-[6vh]">Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process</p>
-        <div class="flex justify-center">
-            <img src="images/Passport.svg" alt="passport">
-        </div>
+        <Hero
+            title="Verify your account"
+            subtitle="Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process"
+        />
+        <img class="mx-auto mt-20" src="images/Passport.svg" alt="passport">
     </section>
     <ButtonAction class="w-full" callback={async() => goto("/verify/id")}>I'm ready</ButtonAction>
 </main>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/routes/+layout.svelte b/infrastructure/eid-wallet/src/routes/+layout.svelte
index 5d30d127..2ebf7008 100644
--- a/infrastructure/eid-wallet/src/routes/+layout.svelte
+++ b/infrastructure/eid-wallet/src/routes/+layout.svelte
@@ -1,26 +1,32 @@
 <script lang="ts">
+import SplashScreen from "$lib/fragments/SplashScreen/SplashScreen.svelte";
+import { onMount } from "svelte";
 import "../app.css";
+
 const { children } = $props();
 
-let showSplashScreen = $state(true);
+let showSplashScreen = $state(false);
+
+// replace with actual data loading logic
+async function loadData() {
+	await new Promise((resolve) => setTimeout(resolve, 1500));
+}
+
+async function ensureMinimumDelay() {
+	await new Promise((resolve) => setTimeout(resolve, 500));
+}
 
-$effect(() => {
-	setTimeout(() => {
-		showSplashScreen = false;
-	}, 500);
+onMount(async () => {
+	showSplashScreen = true; // Can't set up the original state to true or animation won't start
+
+	await Promise.all([loadData(), ensureMinimumDelay()]);
+
+	showSplashScreen = false;
 });
 </script>
-
+    
 {#if showSplashScreen}
-    <div class="relative w-full h-screen bg-primary">
-        <img class="absolute w-full bottom-[-80px] start-0" src="/images/Shape1.svg" alt="illustration">
-        <img class="absolute w-full top-[50px] end-[100px]" src="/images/Shape2.svg" alt="illustration">
-        <div class="absolute w-full top-[42%] start-[50%] translate-x-[-50%] translate-y-[-42%]">
-            <h1 class="text-center text-white text-[44px]">eAgency</h1>
-            <p class="text-center text-white">Your self-sovereign digital entity</p>
-        </div>
-        <img class="absolute bottom-[116px] start-[50%] translate-x-[-50%]" src="/images/W3DSLogoWhite.svg" alt="logo">
-    </div>
+    <SplashScreen />
 {:else}
     {@render children?.()}
-{/if}
\ No newline at end of file
+{/if}