diff --git a/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.stories.ts b/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.stories.ts
new file mode 100644
index 00000000..60d4a38f
--- /dev/null
+++ b/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.stories.ts
@@ -0,0 +1,21 @@
+import type { ComponentProps } from "svelte";
+import AppNav from "./AppNav.svelte";
+
+export default {
+	title: "Fragments/AppNav",
+	component: AppNav,
+	tags: ["autodocs"],
+	render: (args: {
+		Component: AppNav;
+		props: ComponentProps<typeof AppNav>;
+	}) => ({
+		Component: AppNav,
+		props: args,
+	}),
+};
+
+export const Basic = {
+	args: {
+		title: "Settings",
+	},
+};
diff --git a/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte b/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte
new file mode 100644
index 00000000..318bec58
--- /dev/null
+++ b/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
+import { ArrowLeft01Icon, Settings02Icon } from "@hugeicons/core-free-icons";
+import type { HTMLAttributes } from "svelte/elements";
+interface IHeroProps extends HTMLAttributes<HTMLElement> {
+	title?: string;
+	titleClasses?: string;
+}
+const { title, titleClasses, ...restProps }: IHeroProps = $props();
+const baseClasses = "w-full relative flex justify-center h-14 items-center";
+</script>
+    
+<nav {...restProps} class={cn(baseClasses, restProps.class)}>
+    <Button.Icon 
+        icon={ArrowLeft01Icon}
+        iconSize="md"
+        iconColor={"black"}
+        class="absolute left-2"
+        onclick={() => window.history.back()}
+    />
+    <h4 class={cn(titleClasses)}>
+        {title}
+    </h4>
+</nav>
+
+<!-- 
+@component
+@name AppNav
+@description A component that displays the title of the current page and a back button.
+@props
+- title: string - The main title to display.
+- titleClasses: string - Additional classes to apply to the title element.
+@usage
+```svelte
+<AppNav title="My Title" />
+ -->
\ 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 eb0811f2..69d07112 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
@@ -59,7 +59,7 @@ $effect(() => {
                 <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
                 
             {:else if variant === 'eVault'}
-                <div class="text-black-300 text-3xl mb-3">{state.progressWidth} Used</div>
+                <h3 class="text-black-300 text-3xl font-semibold mb-3">{state.progressWidth} Used</h3>
             {/if}
         </div>
         <div>
@@ -83,7 +83,7 @@ $effect(() => {
             <div>
                 <div class="flex justify-between mb-1 ">
                     <p class="z-[1]">{usedStorage}GB Used</p>
-                    <p class="z-[1]">{totalStorage}GB Used</p>
+                    <p class="z-[1]">{totalStorage}GB total storage</p>
                 </div>
                 <div class="relative w-full h-3 rounded-full overflow-hidden bg-primary-400">
                     <div class="h-full bg-secondary rounded-full" style={`width: calc(${state.progressWidth})`}></div>
diff --git a/infrastructure/eid-wallet/src/lib/fragments/index.ts b/infrastructure/eid-wallet/src/lib/fragments/index.ts
index fa153456..482770ac 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/index.ts
+++ b/infrastructure/eid-wallet/src/lib/fragments/index.ts
@@ -1,3 +1,4 @@
 export { default as Hero } from "./Hero/Hero.svelte";
 export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
 export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";
+export { default as AppNav } from "./AppNav/AppNav.svelte";
diff --git a/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte b/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte
index 5b63fac9..f75e7fac 100644
--- a/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte
@@ -144,8 +144,9 @@ const cBase =
 
 <style>
   .sm {
-    scale: 0.8;
+    scale: 0.7;
     transform-origin: 0 0;
+    justify-content: flex-start;
   }
 
   .singular-input .mask {
diff --git a/infrastructure/eid-wallet/src/lib/ui/Selector/Selector.svelte b/infrastructure/eid-wallet/src/lib/ui/Selector/Selector.svelte
index d7bc1318..02a98bff 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Selector/Selector.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Selector/Selector.svelte
@@ -30,7 +30,7 @@ let {
     {...restProps}
     for={id}
     class={cn(
-        ["flex w-full justify-between items-center py-4", restProps.class].join(
+        ["flex w-full justify-between items-center ps-[5vw] py-6", restProps.class].join(
             " "
         )
     )}
@@ -46,9 +46,13 @@ let {
                 bind:group={selected}
             />
             {#if icon}
-                <div>{@render icon?.(id)}</div>
+            <div class="">
+              {@render icon?.(id)}
+            </div>
             {/if}
-            {@render children?.()}
+            <p>
+              {@render children?.()}
+            </p>
         </div>
     </div>
     {#if selected === value}
diff --git a/infrastructure/eid-wallet/src/lib/ui/index.ts b/infrastructure/eid-wallet/src/lib/ui/index.ts
index d723c43a..723d3a80 100644
--- a/infrastructure/eid-wallet/src/lib/ui/index.ts
+++ b/infrastructure/eid-wallet/src/lib/ui/index.ts
@@ -1,3 +1,4 @@
 export { default as Drawer } from "./Drawer/Drawer.svelte";
 export { default as InputPin } from "./InputPin/InputPin.svelte";
 export { default as ButtonAction } from "./Button/ButtonAction.svelte";
+export { default as Selector } from "./Selector/Selector.svelte";
diff --git a/infrastructure/eid-wallet/src/routes/(app)/settings/+layout.svelte b/infrastructure/eid-wallet/src/routes/(app)/settings/+layout.svelte
new file mode 100644
index 00000000..364a0709
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/settings/+layout.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+import { AppNav } from "$lib/fragments";
+import { runtime } from "$lib/global/runtime.svelte";
+
+const { children } = $props();
+</script>
+
+<main class="h-[100vh] px-[5vw] pb-[4.5vh]">
+    <AppNav title={runtime.header.title ?? ""}/>
+    {@render children?.()}
+</main>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
new file mode 100644
index 00000000..7d3a9d9f
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+import { SettingsNavigationBtn } from "$lib/fragments";
+import { runtime } from "$lib/global/runtime.svelte";
+import {
+	Key01Icon,
+	LanguageSquareIcon,
+	Link02Icon,
+	PinCodeIcon,
+	Shield01Icon,
+} from "@hugeicons/core-free-icons";
+
+$effect(() => {
+	runtime.header.title = "Settings";
+});
+</script>
+
+<main>
+    <!-- header part -->
+    <SettingsNavigationBtn icon={LanguageSquareIcon} label="Language" href="/settings/language"/>
+    <SettingsNavigationBtn icon={Link02Icon} label="History" href="/settings/history"/>
+    <SettingsNavigationBtn icon={PinCodeIcon} label="Pin" href="/settings/pin"/>
+    <SettingsNavigationBtn icon={Key01Icon} label="Keys" href="/settings/keys"/>
+    <SettingsNavigationBtn icon={Shield01Icon} label="Privacy" href="/settings/privacy"/>
+</main>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/routes/(app)/settings/history/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/settings/history/+page.svelte
new file mode 100644
index 00000000..bfa2a99e
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/settings/history/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+import { runtime } from "$lib/global/runtime.svelte";
+
+$effect(() => {
+	runtime.header.title = "History";
+});
+</script>
+
+<main>
+</main>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/routes/(app)/settings/language/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/settings/language/+page.svelte
new file mode 100644
index 00000000..1c64d656
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/settings/language/+page.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+import { runtime } from "$lib/global/runtime.svelte";
+import { Selector } from "$lib/ui";
+
+let languages: { name: string; country: string }[] = [
+	{ name: "English", country: "gb" },
+	{ name: "Spanish", country: "es" },
+	{ name: "German", country: "de" },
+	{ name: "French", country: "fr" },
+];
+let selected = $state("");
+
+$effect(() => {
+	runtime.header.title = "Language";
+});
+</script>
+
+
+
+<main>
+    {#each languages as lang, i}
+    <Selector id={`option-${i}`} name={lang.name} bind:selected value={lang.name}>
+        {lang.name}
+        {#snippet icon()}
+        <div
+            class={`rounded-full fi fis fi-${lang.country} scale-150 mr-12 outline-8 outline-gray`}
+        ></div>
+        {/snippet}
+    </Selector>
+    {/each}
+</main>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/routes/(app)/settings/pin/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/settings/pin/+page.svelte
new file mode 100644
index 00000000..71fa9508
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/settings/pin/+page.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+import { runtime } from "$lib/global/runtime.svelte";
+import { ButtonAction, Drawer, InputPin } from "$lib/ui";
+import { CircleLock01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+let currentPin = $state("");
+let newPin = $state("");
+let repeatPin = $state("");
+let isError = $state(false);
+let showDrawer = $state(false);
+
+const handleClose = async () => {
+	// close functionality goes here.
+	showDrawer = false;
+};
+
+const handleChangePIN = async () => {
+	if (repeatPin.length === 4 && newPin !== repeatPin) isError = true;
+	if (!isError) showDrawer = true;
+};
+
+$effect(() => {
+	runtime.header.title = "Change PIN";
+	if (repeatPin.length === 4 && newPin === repeatPin) isError = false;
+});
+</script>
+
+<main class="h-[calc(100vh-14vh)] flex flex-col justify-between pt-[3vh]">
+    <section>
+        <div>
+            <p class="mb-[1vh]">Enter you current PIN</p>
+            <InputPin bind:pin={currentPin} variant="sm"/>
+        </div>
+        <div>
+            <p class="mb-[1vh]">Enter your new PIN</p>
+            <InputPin bind:pin={newPin} {isError} variant="sm"/>
+        </div>
+        <div>
+            <p class="mb-[1vh]">Confirm new PIN</p>
+            <InputPin bind:pin={repeatPin} {isError} variant="sm"/>
+        </div>
+        <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
+    </section>
+    <ButtonAction class="w-full" callback={handleChangePIN}>Change PIN</ButtonAction>
+</main>
+
+<Drawer bind:isPaneOpen={showDrawer} isCancelRequired={true}>
+        <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
+            <span class="relative z-[1]">
+                <HugeiconsIcon icon={CircleLock01Icon} color="var(--color-primary)"/>
+            </span>
+            <img class="absolute top-0 start-0" src="/images/Line.svg" alt="line">
+            <img class="absolute top-0 start-0" src="/images/Line2.svg" alt="line">
+        </div>
+        <h4>Pin code changed!</h4>
+        <p class="text-black-700 mt-[0.5vh] mb-[2.3vh]">Your PIN has been changed.</p>
+        <ButtonAction class="w-full" callback={handleClose}>Close</ButtonAction>
+</Drawer>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/routes/(app)/settings/privacy/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/settings/privacy/+page.svelte
new file mode 100644
index 00000000..452ecfec
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/settings/privacy/+page.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+import { runtime } from "$lib/global/runtime.svelte";
+
+$effect(() => {
+	runtime.header.title = "Privacy";
+});
+</script>
+
+<main>
+    <h4>Last modified 19th March 2025</h4>
+    <p class="text-black-700">Welcome to eID Wallet! Your privacy is important to us. This Privacy Policy explains how we collect, use, disclose, and protect your personal information when you use our mobile application.</p>
+    <br>
+    <h4>1. Information We Collect</h4>
+    <p class="text-black-700">We collect the following types of information to provide and improve our services:</p>
+    <ol type="a">
+        <li><strong>Personal Identification Data</strong>
+          <ul>
+            <li>Full name, date of birth, government-issued ID details</li>
+            <li>Phone number, email address (if used for recovery)</li>
+          </ul>
+        </li>
+        <li><strong>Biometric Data (Optional)</strong>
+          <ul>
+            <li>Fingerprint, facial recognition (only stored on your device for authentication purposes)</li>
+          </ul>
+        </li>
+        <li><strong>Device & Usage Information</strong>
+          <ul>
+            <li>Device type, operating system, and app usage data</li>
+            <li>IP address and session activity</li>
+          </ul>
+        </li>
+    </ol>        
+</main>
\ No newline at end of file
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 a4d30cc3..7761b328 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte
@@ -9,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= {{
@@ -21,11 +24,8 @@ const handleFinish = async () => {};
 		}}/>
     </section>
     <section class="mt-[4vh] mb-[9vh]">
-        <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"
-        />
+        <h4>Your eVault</h4>
+        <p class="text-black-700">We’ve also created your eVault—secure cloud storage for your personal data. W3DS platforms access it directly, keeping you in control.</p>
         <IdentityCard variant= "eVault"
 		usedStorage= {15}
 		totalStorage= {80}/>
diff --git a/infrastructure/eid-wallet/src/routes/+page.svelte b/infrastructure/eid-wallet/src/routes/+page.svelte
index b782f660..467b9a43 100644
--- a/infrastructure/eid-wallet/src/routes/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/+page.svelte
@@ -5,3 +5,4 @@ import ButtonAction from "$lib/ui/Button/ButtonAction.svelte";
 
 <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/w3id/package.json b/infrastructure/w3id/package.json
index 5d1709ee..8c415e51 100644
--- a/infrastructure/w3id/package.json
+++ b/infrastructure/w3id/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "test": "vitest",
     "dev": "tsc --watch",
-    "check-format": "prettier --check \"src/**/*.ts\"",
+    "check-format": "npx @biomejs/biome format ./src",
     "format": "npx @biomejs/biome format --write ./src",
     "lint": "npx @biomejs/biome lint --write ./src",
     "check": "npx @biomejs/biome check --write ./src",
diff --git a/infrastructure/w3id/src/logs/storage/storage-spec.ts b/infrastructure/w3id/src/logs/storage/storage-spec.ts
new file mode 100644
index 00000000..ab66f9d7
--- /dev/null
+++ b/infrastructure/w3id/src/logs/storage/storage-spec.ts
@@ -0,0 +1,44 @@
+/**
+ * SPECIFICATION
+ *
+ * Baseline Storage Specification, used for storing and managing logs
+ */
+
+export declare class StorageSpec<T, K> {
+	/**
+	 * Build a new storage driver
+	 *
+	 * @param {...any[]} props
+	 * @returns Promise<StorageSpec>
+	 */
+
+	// biome-ignore lint: lint/suspicious/noExplicitAny
+	public static build<T, K>(...props: any[]): Promise<StorageSpec<T, K>>;
+
+	/**
+	 * Create a new entry in the storage
+	 *
+	 * @param body
+	 * @returns Promise<K>
+	 */
+
+	public create(body: T): Promise<K>;
+
+	/**
+	 * Find one entry in the storage using partial of K
+	 *
+	 * @param {Partial<K>} options
+	 * @returns Promise<K>
+	 */
+
+	public findOne(options: Partial<K>): Promise<K>;
+
+	/**
+	 * Find many entities in the storage using partial of K
+	 *
+	 * @param {Partial<K>} options
+	 * @returns Promise<K[]>
+	 */
+
+	public findMany(options: Partial<K>): Promise<K[]>;
+}
diff --git a/infrastructure/w3id/src/logs/store.ts b/infrastructure/w3id/src/logs/store.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/infrastructure/w3id/src/utils/uuid.ts b/infrastructure/w3id/src/utils/uuid.ts
index f3c663f3..1ffc1ae1 100644
--- a/infrastructure/w3id/src/utils/uuid.ts
+++ b/infrastructure/w3id/src/utils/uuid.ts
@@ -10,8 +10,8 @@ import { v4 as uuidv4, v5 as uuidv5 } from "uuid";
  */
 
 export function generateUuid(
-  entropy: string,
-  namespace: string = uuidv4(),
+	entropy: string,
+	namespace: string = uuidv4(),
 ): string {
-  return uuidv5(entropy, namespace);
+	return uuidv5(entropy, namespace);
 }