diff --git a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
index 624727ab..e9081a00 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
@@ -1,47 +1,47 @@
 <script lang="ts">
-    import * as Button from "$lib/ui/Button";
-    import { cn } from "$lib/utils";
-    import {
-        CheckmarkBadge02Icon,
-        Upload03Icon,
-        ViewIcon,
-    } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import type { HTMLAttributes } from "svelte/elements";
+import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
+import {
+    CheckmarkBadge02Icon,
+    Upload03Icon,
+    ViewIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { HTMLAttributes } from "svelte/elements";
 
-    interface userData {
-        [fieldName: string]: string;
-    }
-    interface IIdentityCard extends HTMLAttributes<HTMLElement> {
-        variant?: "eName" | "ePassport" | "eVault";
-        userId?: string;
-        viewBtn?: () => void;
-        shareBtn?: () => void;
-        userData?: userData;
-        totalStorage?: number;
-        usedStorage?: number;
-    }
+interface userData {
+    [fieldName: string]: string;
+}
+interface IIdentityCard extends HTMLAttributes<HTMLElement> {
+    variant?: "eName" | "ePassport" | "eVault";
+    userId?: string;
+    viewBtn?: () => void;
+    shareBtn?: () => void;
+    userData?: userData;
+    totalStorage?: number;
+    usedStorage?: number;
+}
 
-    const {
-        variant = "eName",
-        userId,
-        viewBtn,
-        shareBtn,
-        userData,
-        totalStorage = 0,
-        usedStorage = 0,
-        ...restProps
-    }: IIdentityCard = $props();
-    const state = $state({
-        progressWidth: "0%",
-    });
+const {
+    variant = "eName",
+    userId,
+    viewBtn,
+    shareBtn,
+    userData,
+    totalStorage = 0,
+    usedStorage = 0,
+    ...restProps
+}: IIdentityCard = $props();
+const state = $state({
+    progressWidth: "0%",
+});
 
-    $effect(() => {
-        state.progressWidth =
-            usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
-    });
+$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`;
+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={cn(baseClasses, restProps.class)}>
diff --git a/infrastructure/eid-wallet/src/routes/(app)/ePassport/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/ePassport/+page.svelte
index 5d8748ad..9cda9e00 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/ePassport/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/ePassport/+page.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
-    import { AppNav, IdentityCard } from "$lib/fragments";
-    import type { GlobalState } from "$lib/global";
-    import * as Button from "$lib/ui/Button";
-    import { Share05Icon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import { getContext, onMount } from "svelte";
+import { AppNav, IdentityCard } from "$lib/fragments";
+import type { GlobalState } from "$lib/global";
+import * as Button from "$lib/ui/Button";
+import { Share05Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import { getContext, onMount } from "svelte";
 
-    const globalState = getContext<() => GlobalState>("globalState")();
+const globalState = getContext<() => GlobalState>("globalState")();
 
-    function shareEPassport() {
-        alert("EPassport Code shared!");
-    }
+function shareEPassport() {
+    alert("EPassport Code shared!");
+}
 
-    let userData: Record<string, unknown>;
-    let docData: Record<string, unknown> = {};
+let userData: Record<string, unknown>;
+let docData: Record<string, unknown> = {};
 
-    onMount(async () => {
-        userData = await globalState.userController.user;
-        docData = await globalState.userController.document;
-        console.log(userData);
-    });
+onMount(async () => {
+    userData = await globalState.userController.user;
+    docData = await globalState.userController.document;
+    console.log(userData);
+});
 </script>
 
 <AppNav title="ePassport" class="mb-8" />
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte
index c1cc5372..ad61917a 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte
@@ -1,39 +1,39 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
-    import { Hero, IdentityCard } from "$lib/fragments";
-    import type { GlobalState } from "$lib/global";
-    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 { getContext, onMount, type Snippet } from "svelte";
+import { goto } from "$app/navigation";
+import { Hero, IdentityCard } from "$lib/fragments";
+import type { GlobalState } from "$lib/global";
+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 { getContext, onMount, type Snippet } from "svelte";
 
-    let userData: Record<string, unknown> = $state();
-    let greeting = $state();
-    let ename = $state();
+let userData: Record<string, unknown> = $state();
+let greeting = $state();
+let ename = $state();
 
-    let shareQRdrawerOpen = $state(false);
+let shareQRdrawerOpen = $state(false);
 
-    function shareQR() {
-        alert("QR Code shared!");
-        shareQRdrawerOpen = false;
-    }
+function shareQR() {
+    alert("QR Code shared!");
+    shareQRdrawerOpen = false;
+}
 
-    const globalState = getContext<() => GlobalState>("globalState")();
+const globalState = getContext<() => GlobalState>("globalState")();
 
-    onMount(async () => {
-        userData = await globalState.userController.user;
-        const vaultData = await globalState.vaultController.vault;
-        ename = vaultData.ename;
+onMount(async () => {
+    userData = await globalState.userController.user;
+    const vaultData = await globalState.vaultController.vault;
+    ename = vaultData.ename;
 
-        const currentHour = new Date().getHours();
-        greeting =
-            currentHour > 17
-                ? "Good Evening"
-                : currentHour > 12
-                  ? "Good Afternoon"
-                  : "Good Morning";
-    });
+    const currentHour = new Date().getHours();
+    greeting =
+        currentHour > 17
+            ? "Good Evening"
+            : currentHour > 12
+              ? "Good Afternoon"
+              : "Good Morning";
+});
 </script>
 
 <Hero
diff --git a/infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte
index a5b4373c..16b9fb2b 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte
@@ -1,97 +1,97 @@
 <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 {
-        Format,
-        type PermissionState,
-        type Scanned,
-        cancel,
-        checkPermissions,
-        requestPermissions,
-        scan,
-    } from "@tauri-apps/plugin-barcode-scanner";
-    import { onDestroy, onMount } from "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);
-
-    let scannedData: Scanned | undefined = $state(undefined);
-
-    let scanning = false;
-    let loading = false;
-
-    let permissions_nullable: PermissionState | null;
-
-    async function startScan() {
-        let permissions = await checkPermissions()
-            .then((permissions) => {
-                return permissions;
+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 {
+    Format,
+    type PermissionState,
+    type Scanned,
+    cancel,
+    checkPermissions,
+    requestPermissions,
+    scan,
+} from "@tauri-apps/plugin-barcode-scanner";
+import { onDestroy, onMount } from "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);
+
+let scannedData: Scanned | undefined = $state(undefined);
+
+let scanning = false;
+let loading = false;
+
+let permissions_nullable: PermissionState | null;
+
+async function startScan() {
+    let permissions = await checkPermissions()
+        .then((permissions) => {
+            return permissions;
+        })
+        .catch(() => {
+            return null; // possibly return "denied"? or does that imply that the check has been successful, but was actively denied?
+        });
+
+    // TODO: handle receiving "prompt-with-rationale" (issue: https://github.com/tauri-apps/plugins-workspace/issues/979)
+    if (permissions === "prompt") {
+        permissions = await requestPermissions(); // handle in more detail?
+    }
+
+    permissions_nullable = permissions;
+
+    if (permissions === "granted") {
+        // Scanning parameters
+        const formats = [Format.QRCode];
+        const windowed = true;
+
+        if (scanning) return;
+        scanning = true;
+        scan({ formats, windowed })
+            .then((res) => {
+                console.log("Scan result:", res);
+                scannedData = res;
+                codeScannedDrawerOpen = true;
             })
-            .catch(() => {
-                return null; // possibly return "denied"? or does that imply that the check has been successful, but was actively denied?
+            .catch((error) => {
+                // TODO: display error to user
+                console.error("Scan error:", error);
+            })
+            .finally(() => {
+                scanning = false;
             });
-
-        // TODO: handle receiving "prompt-with-rationale" (issue: https://github.com/tauri-apps/plugins-workspace/issues/979)
-        if (permissions === "prompt") {
-            permissions = await requestPermissions(); // handle in more detail?
-        }
-
-        permissions_nullable = permissions;
-
-        if (permissions === "granted") {
-            // Scanning parameters
-            const formats = [Format.QRCode];
-            const windowed = true;
-
-            if (scanning) return;
-            scanning = true;
-            scan({ formats, windowed })
-                .then((res) => {
-                    console.log("Scan result:", res);
-                    scannedData = res;
-                    codeScannedDrawerOpen = true;
-                })
-                .catch((error) => {
-                    // TODO: display error to user
-                    console.error("Scan error:", error);
-                })
-                .finally(() => {
-                    scanning = false;
-                });
-        }
-
-        console.error("Permission denied or not granted");
-        // TODO: consider handling GUI for permission denied
     }
 
-    async function cancelScan() {
-        await cancel();
-        scanning = false;
-    }
+    console.error("Permission denied or not granted");
+    // TODO: consider handling GUI for permission denied
+}
+
+async function cancelScan() {
+    await cancel();
+    scanning = false;
+}
 
-    onMount(async () => {
-        startScan();
-    });
+onMount(async () => {
+    startScan();
+});
 
-    onDestroy(async () => {
-        await cancelScan();
-    });
+onDestroy(async () => {
+    await cancelScan();
+});
 </script>
 
 <AppNav title="Scan QR Code" titleClasses="text-white" iconColor="white" />
diff --git a/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
index a172a593..719199c2 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
@@ -1,29 +1,29 @@
 <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";
-    import { ButtonAction } from "$lib/ui";
-    import { getContext } from "svelte";
-    import type { GlobalState } from "$lib/global";
-    import { goto } from "$app/navigation";
+import { SettingsNavigationBtn } from "$lib/fragments";
+import { runtime } from "$lib/global/runtime.svelte";
+import {
+    Key01Icon,
+    LanguageSquareIcon,
+    Link02Icon,
+    PinCodeIcon,
+    Shield01Icon,
+} from "@hugeicons/core-free-icons";
+import { ButtonAction } from "$lib/ui";
+import { getContext } from "svelte";
+import type { GlobalState } from "$lib/global";
+import { goto } from "$app/navigation";
 
-    const globalState = getContext<() => GlobalState>("globalState")();
+const globalState = getContext<() => GlobalState>("globalState")();
 
-    function nukeWallet() {
-        globalState.userController.user = null;
-        globalState.securityController.clearPin();
-        goto("/onboarding");
-    }
+function nukeWallet() {
+    globalState.userController.user = null;
+    globalState.securityController.clearPin();
+    goto("/onboarding");
+}
 
-    $effect(() => {
-        runtime.header.title = "Settings";
-    });
+$effect(() => {
+    runtime.header.title = "Settings";
+});
 </script>
 
 <main>
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 8a2d1bb9..9e4e0b2a 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte
@@ -1,22 +1,21 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
-    import { Hero } from "$lib/fragments";
-    import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
-    import type { GlobalState } from "$lib/global";
-    import { ButtonAction } from "$lib/ui";
-    import { getContext, onMount } from "svelte";
+import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
+import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
+import type { GlobalState } from "$lib/global";
+import { ButtonAction } from "$lib/ui";
+import { getContext, onMount } from "svelte";
 
-    let userData = $state();
-    let globalState: GlobalState =
-        getContext<() => GlobalState>("globalState")();
+let userData = $state();
+let globalState: GlobalState = getContext<() => GlobalState>("globalState")();
 
-    const handleFinish = async () => {
-        await goto("/main");
-    };
+const handleFinish = async () => {
+    await goto("/main");
+};
 
-    onMount(async () => {
-        userData = await globalState.userController.user;
-    });
+onMount(async () => {
+    userData = await globalState.userController.user;
+});
 </script>
 
 <main
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte
index ecd9ed1d..0221db0d 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
-    import { Hero, IdentityCard } from "$lib/fragments";
-    import type { GlobalState } from "$lib/global";
-    import { ButtonAction } from "$lib/ui";
-    import axios from "axios";
-    import { getContext, onMount } from "svelte";
+import { goto } from "$app/navigation";
+import { Hero, IdentityCard } from "$lib/fragments";
+import type { GlobalState } from "$lib/global";
+import { ButtonAction } from "$lib/ui";
+import axios from "axios";
+import { getContext, onMount } from "svelte";
 
-    let globalState = getContext<() => GlobalState>("globalState")();
-    let ename = $state();
+let globalState = getContext<() => GlobalState>("globalState")();
+let ename = $state();
 
-    const handleNext = async () => {
-        await goto("/e-passport");
-    };
+const handleNext = async () => {
+    await goto("/e-passport");
+};
 
-    onMount(async () => {
-        const vault = await globalState.vaultController.vault;
-        ename = vault.ename;
-    });
+onMount(async () => {
+    const vault = await globalState.vaultController.vault;
+    ename = vault.ename;
+});
 </script>
 
 <main
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte
index 43649956..7327f714 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte
@@ -1,123 +1,113 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
-    import { Hero } from "$lib/fragments";
-    import { GlobalState } from "$lib/global";
-    import { ButtonAction } from "$lib/ui";
-    import { getContext, onMount } from "svelte";
-    import { capitalize } from "$lib/utils";
-    import Drawer from "$lib/ui/Drawer/Drawer.svelte";
-    import axios from "axios";
-    import { v4 as uuidv4 } from "uuid";
-    import {
-        PUBLIC_PROVISIONER_URL,
-        PUBLIC_REGISTRY_URL,
-    } from "$env/static/public";
-    import {
-        DocFront,
-        verificaitonId,
-        verifStep,
-        status,
-        reason,
-    } from "./store";
-    import Passport from "./steps/passport.svelte";
-    import Selfie from "./steps/selfie.svelte";
-    import { load } from "@tauri-apps/plugin-store";
-    import { Shadow } from "svelte-loading-spinners";
+import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
+import { GlobalState } from "$lib/global";
+import { ButtonAction } from "$lib/ui";
+import { getContext, onMount } from "svelte";
+import { capitalize } from "$lib/utils";
+import Drawer from "$lib/ui/Drawer/Drawer.svelte";
+import axios from "axios";
+import { v4 as uuidv4 } from "uuid";
+import {
+    PUBLIC_PROVISIONER_URL,
+    PUBLIC_REGISTRY_URL,
+} from "$env/static/public";
+import { DocFront, verificaitonId, verifStep, status, reason } from "./store";
+import Passport from "./steps/passport.svelte";
+import Selfie from "./steps/selfie.svelte";
+import { load } from "@tauri-apps/plugin-store";
+import { Shadow } from "svelte-loading-spinners";
 
-    let globalState: GlobalState | undefined = $state(undefined);
-    let showVeriffModal = $state(false);
-    let person: Record<string, unknown>;
-    let document: Record<string, unknown>;
-    let loading = $state(false);
+let globalState: GlobalState | undefined = $state(undefined);
+let showVeriffModal = $state(false);
+let person: Record<string, unknown>;
+let document: Record<string, unknown>;
+let loading = $state(false);
 
-    async function handleVerification() {
-        const { data } = await axios.post(
-            new URL("/verification", PUBLIC_PROVISIONER_URL).toString(),
-        );
-        verificaitonId.set(data.id);
-        showVeriffModal = true;
-        watchEventStream(data.id);
-    }
+async function handleVerification() {
+    const { data } = await axios.post(
+        new URL("/verification", PUBLIC_PROVISIONER_URL).toString(),
+    );
+    verificaitonId.set(data.id);
+    showVeriffModal = true;
+    watchEventStream(data.id);
+}
 
-    function watchEventStream(id: string) {
-        const sseUrl = new URL(
-            `/verification/sessions/${id}`,
-            PUBLIC_PROVISIONER_URL,
-        ).toString();
-        const eventSource = new EventSource(sseUrl);
+function watchEventStream(id: string) {
+    const sseUrl = new URL(
+        `/verification/sessions/${id}`,
+        PUBLIC_PROVISIONER_URL,
+    ).toString();
+    const eventSource = new EventSource(sseUrl);
 
-        eventSource.onopen = function (e) {
-            console.log("Successfully connected.");
-        };
+    eventSource.onopen = function (e) {
+        console.log("Successfully connected.");
+    };
 
-        eventSource.onmessage = function (e) {
-            const data = JSON.parse(e.data);
-            if (!data.status) console.log(data);
-            console.log("STATUS", data);
-            status.set(data.status);
-            reason.set(data.reason);
-            person = data.person;
-            document = data.document;
-            if (data.status === "resubmission_requested") {
-                DocFront.set(null);
-                Selfie.set(null);
-            }
-            verifStep.set(2);
-        };
-    }
+    eventSource.onmessage = function (e) {
+        const data = JSON.parse(e.data);
+        if (!data.status) console.log(data);
+        console.log("STATUS", data);
+        status.set(data.status);
+        reason.set(data.reason);
+        person = data.person;
+        document = data.document;
+        if (data.status === "resubmission_requested") {
+            DocFront.set(null);
+            Selfie.set(null);
+        }
+        verifStep.set(2);
+    };
+}
 
-    let handleContinue: () => Promise<void>;
+let handleContinue: () => Promise<void>;
 
-    onMount(() => {
-        globalState = getContext<() => GlobalState>("globalState")();
-        // handle verification logic + sec user data in the store
+onMount(() => {
+    globalState = getContext<() => GlobalState>("globalState")();
+    // handle verification logic + sec user data in the store
 
-        handleContinue = async () => {
-            if ($status !== "approved") return verifStep.set(0);
-            if (!globalState) throw new Error("Global state is not defined");
+    handleContinue = async () => {
+        if ($status !== "approved") return verifStep.set(0);
+        if (!globalState) throw new Error("Global state is not defined");
 
-            loading = true;
-            globalState.userController.user = {
-                name: capitalize(
-                    person.firstName.value + " " + person.lastName.value,
-                ),
-                "Date of Birth": new Date(
-                    person.dateOfBirth.value,
-                ).toDateString(),
-                "ID submitted": "Passport - " + person.nationality.value,
-                "Passport Number": document.number.value,
-            };
-            globalState.userController.document = {
-                "Valid From": new Date(document.validFrom.value).toDateString(),
-                "Valid Until": new Date(
-                    document.validUntil.value,
-                ).toDateString(),
-                "Verified On": new Date().toDateString(),
-            };
-            const {
-                data: { token: registryEntropy },
-            } = await axios.get(
-                new URL("/entropy", PUBLIC_REGISTRY_URL).toString(),
-            );
-            const { data } = await axios.post(
-                new URL("/provision", PUBLIC_PROVISIONER_URL).toString(),
-                {
-                    registryEntropy,
-                    namespace: uuidv4(),
-                    verificationId: $verificaitonId,
-                },
-            );
-            if (data.success === true) {
-                globalState.vaultController.vault = {
-                    uri: data.uri,
-                    ename: data.w3id,
-                };
-            }
-            setTimeout(() => {
-                goto("/register");
-            }, 10_000);
+        loading = true;
+        globalState.userController.user = {
+            name: capitalize(
+                person.firstName.value + " " + person.lastName.value,
+            ),
+            "Date of Birth": new Date(person.dateOfBirth.value).toDateString(),
+            "ID submitted": "Passport - " + person.nationality.value,
+            "Passport Number": document.number.value,
+        };
+        globalState.userController.document = {
+            "Valid From": new Date(document.validFrom.value).toDateString(),
+            "Valid Until": new Date(document.validUntil.value).toDateString(),
+            "Verified On": new Date().toDateString(),
         };
-    });
+        const {
+            data: { token: registryEntropy },
+        } = await axios.get(
+            new URL("/entropy", PUBLIC_REGISTRY_URL).toString(),
+        );
+        const { data } = await axios.post(
+            new URL("/provision", PUBLIC_PROVISIONER_URL).toString(),
+            {
+                registryEntropy,
+                namespace: uuidv4(),
+                verificationId: $verificaitonId,
+            },
+        );
+        if (data.success === true) {
+            globalState.vaultController.vault = {
+                uri: data.uri,
+                ename: data.w3id,
+            };
+        }
+        setTimeout(() => {
+            goto("/register");
+        }, 10_000);
+    };
+});
 </script>
 
 <main
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/verify/steps/passport.svelte b/infrastructure/eid-wallet/src/routes/(auth)/verify/steps/passport.svelte
index 559110ac..c31d933f 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/verify/steps/passport.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/verify/steps/passport.svelte
@@ -1,85 +1,85 @@
 <script lang="ts">
-    import { ButtonAction } from "$lib/ui";
-    import { writable } from "svelte/store";
-    import {
-        permissionGranted,
-        verifStep,
-        DocFront,
-        verificaitonId,
-    } from "../store";
-    import { onMount } from "svelte";
-    import axios from "axios";
-    import { PUBLIC_PROVISIONER_URL } from "$env/static/public";
+import { ButtonAction } from "$lib/ui";
+import { writable } from "svelte/store";
+import {
+    permissionGranted,
+    verifStep,
+    DocFront,
+    verificaitonId,
+} from "../store";
+import { onMount } from "svelte";
+import axios from "axios";
+import { PUBLIC_PROVISIONER_URL } from "$env/static/public";
 
-    let error: string;
+let error: string;
 
-    onMount(async () => {
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({
-                video: true,
-            });
-            permissionGranted.set(true);
-            stream.getTracks().forEach((track) => track.stop());
-        } catch (err) {
-            permissionGranted.set(false);
-            console.error("Camera permission denied", err);
-            error =
-                "Camera permission denied. Please allow camera access and try again.";
-        }
-    });
+onMount(async () => {
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+            video: true,
+        });
+        permissionGranted.set(true);
+        stream.getTracks().forEach((track) => track.stop());
+    } catch (err) {
+        permissionGranted.set(false);
+        console.error("Camera permission denied", err);
+        error =
+            "Camera permission denied. Please allow camera access and try again.";
+    }
+});
 
-    let video: HTMLVideoElement;
-    let canvas1: HTMLCanvasElement;
-    let canvas2: HTMLCanvasElement;
-    let image = 1;
-    let image1Captured = writable(false);
-    let loading = false;
-    async function requestCameraPermission() {
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({
-                video: { facingMode: "environment" },
-            });
-            video.srcObject = stream;
-            video.play();
-            permissionGranted.set(true);
-        } catch (err) {
-            permissionGranted.set(false);
-            console.error("Camera permission denied", err);
-        }
+let video: HTMLVideoElement;
+let canvas1: HTMLCanvasElement;
+let canvas2: HTMLCanvasElement;
+let image = 1;
+let image1Captured = writable(false);
+let loading = false;
+async function requestCameraPermission() {
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+            video: { facingMode: "environment" },
+        });
+        video.srcObject = stream;
+        video.play();
+        permissionGranted.set(true);
+    } catch (err) {
+        permissionGranted.set(false);
+        console.error("Camera permission denied", err);
     }
-    async function captureImage() {
-        if (image === 1) {
-            console.log("huh?");
-            const context1 = canvas1.getContext("2d");
-            if (context1) {
-                context1.drawImage(video, 0, 0, 1920, 1080);
-                canvas1.width = video.videoWidth;
-                canvas1.height = video.videoHeight;
-                context1.drawImage(video, 0, 0, canvas1.width, canvas1.height);
-                const dataUrl = canvas1.toDataURL("image/png");
-                DocFront.set(dataUrl);
-                loading = true;
-                await axios.post(
-                    new URL(
-                        `/verification/${$verificaitonId}/media`,
-                        PUBLIC_PROVISIONER_URL,
-                    ).toString(),
-                    {
-                        img: dataUrl,
-                        type: "document-front",
-                    },
-                );
-                console.log("here???");
-                loading = false;
-                image1Captured.set(true);
-                verifStep.set(1);
-            }
+}
+async function captureImage() {
+    if (image === 1) {
+        console.log("huh?");
+        const context1 = canvas1.getContext("2d");
+        if (context1) {
+            context1.drawImage(video, 0, 0, 1920, 1080);
+            canvas1.width = video.videoWidth;
+            canvas1.height = video.videoHeight;
+            context1.drawImage(video, 0, 0, canvas1.width, canvas1.height);
+            const dataUrl = canvas1.toDataURL("image/png");
+            DocFront.set(dataUrl);
+            loading = true;
+            await axios.post(
+                new URL(
+                    `/verification/${$verificaitonId}/media`,
+                    PUBLIC_PROVISIONER_URL,
+                ).toString(),
+                {
+                    img: dataUrl,
+                    type: "document-front",
+                },
+            );
+            console.log("here???");
+            loading = false;
+            image1Captured.set(true);
+            verifStep.set(1);
         }
     }
+}
 
-    onMount(() => {
-        requestCameraPermission();
-    });
+onMount(() => {
+    requestCameraPermission();
+});
 </script>
 
 <div>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/verify/steps/selfie.svelte b/infrastructure/eid-wallet/src/routes/(auth)/verify/steps/selfie.svelte
index eed8fd72..4b6b765d 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/verify/steps/selfie.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/verify/steps/selfie.svelte
@@ -1,72 +1,67 @@
 <script lang="ts">
-    import { writable } from "svelte/store";
-    import { ButtonAction } from "$lib/ui";
-    import {
-        Selfie,
-        permissionGranted,
-        verifStep,
-        verificaitonId,
-    } from "../store";
-    import { onMount } from "svelte";
-    import { Shadow } from "svelte-loading-spinners";
-    import axios from "axios";
-    import { PUBLIC_PROVISIONER_URL } from "$env/static/public";
+import { writable } from "svelte/store";
+import { ButtonAction } from "$lib/ui";
+import { Selfie, permissionGranted, verifStep, verificaitonId } from "../store";
+import { onMount } from "svelte";
+import { Shadow } from "svelte-loading-spinners";
+import axios from "axios";
+import { PUBLIC_PROVISIONER_URL } from "$env/static/public";
 
-    let video: HTMLVideoElement;
-    let canvas: HTMLCanvasElement;
-    let image = 1;
-    let imageCaptured = writable(false);
-    let load = false;
+let video: HTMLVideoElement;
+let canvas: HTMLCanvasElement;
+let image = 1;
+let imageCaptured = writable(false);
+let load = false;
 
-    onMount(() => {
-        async function requestCameraPermission() {
-            try {
-                const stream = await navigator.mediaDevices.getUserMedia({
-                    video: { facingMode: "user" },
-                });
-                video.srcObject = stream;
-                video.play();
-                permissionGranted.set(true);
-            } catch (err) {
-                permissionGranted.set(false);
-                console.error("Camera permission denied", err);
-            }
+onMount(() => {
+    async function requestCameraPermission() {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: { facingMode: "user" },
+            });
+            video.srcObject = stream;
+            video.play();
+            permissionGranted.set(true);
+        } catch (err) {
+            permissionGranted.set(false);
+            console.error("Camera permission denied", err);
         }
-        requestCameraPermission();
-    });
+    }
+    requestCameraPermission();
+});
 
-    async function captureImage() {
-        if (image === 1) {
-            const context = canvas.getContext("2d");
-            if (context) {
-                context.drawImage(video, 0, 0, 1920, 1080);
-                canvas.width = video.videoWidth;
-                canvas.height = video.videoHeight;
-                context.drawImage(video, 0, 0, canvas.width, canvas.height);
-                const dataUrl = canvas.toDataURL("image/png");
-                Selfie.set(dataUrl);
-                load = true;
-                await axios.post(
-                    new URL(
-                        `/verification/${$verificaitonId}/media`,
-                        PUBLIC_PROVISIONER_URL,
-                    ).toString(),
-                    {
-                        img: dataUrl,
-                        type: "face",
-                    },
-                );
-                await axios.patch(
-                    new URL(
-                        `/verification/${$verificaitonId}`,
-                        PUBLIC_PROVISIONER_URL,
-                    ).toString(),
-                );
-            }
-        } else if (image === 2 && $imageCaptured) {
-            verifStep.update((n) => n + 1);
+async function captureImage() {
+    if (image === 1) {
+        const context = canvas.getContext("2d");
+        if (context) {
+            context.drawImage(video, 0, 0, 1920, 1080);
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+            const dataUrl = canvas.toDataURL("image/png");
+            Selfie.set(dataUrl);
+            load = true;
+            await axios.post(
+                new URL(
+                    `/verification/${$verificaitonId}/media`,
+                    PUBLIC_PROVISIONER_URL,
+                ).toString(),
+                {
+                    img: dataUrl,
+                    type: "face",
+                },
+            );
+            await axios.patch(
+                new URL(
+                    `/verification/${$verificaitonId}`,
+                    PUBLIC_PROVISIONER_URL,
+                ).toString(),
+            );
         }
+    } else if (image === 2 && $imageCaptured) {
+        verifStep.update((n) => n + 1);
     }
+}
 </script>
 
 <div class="flex flex-col gap-5">
diff --git a/infrastructure/eid-wallet/src/routes/+layout.svelte b/infrastructure/eid-wallet/src/routes/+layout.svelte
index 0444fe77..0806cb78 100644
--- a/infrastructure/eid-wallet/src/routes/+layout.svelte
+++ b/infrastructure/eid-wallet/src/routes/+layout.svelte
@@ -1,102 +1,102 @@
 <script lang="ts">
-    import SplashScreen from "$lib/fragments/SplashScreen/SplashScreen.svelte";
-    import { onMount, setContext } from "svelte";
-    import "../app.css";
-    import { onNavigate } from "$app/navigation";
-    import { GlobalState } from "$lib/global/state";
-
-    import { runtime } from "$lib/global/runtime.svelte";
-    import { type Status, checkStatus } from "@tauri-apps/plugin-biometric";
-
-    const { children } = $props();
-
-    let globalState: GlobalState | undefined = $state(undefined);
-
-    let showSplashScreen = $state(false);
-    let previousRoute = null;
-    let navigationStack: string[] = [];
-
-    setContext("globalState", () => globalState);
-
-    // replace with actual data loading logic
-    async function loadData() {
-        await new Promise((resolve) => setTimeout(resolve, 1500));
+import SplashScreen from "$lib/fragments/SplashScreen/SplashScreen.svelte";
+import { onMount, setContext } from "svelte";
+import "../app.css";
+import { onNavigate } from "$app/navigation";
+import { GlobalState } from "$lib/global/state";
+
+import { runtime } from "$lib/global/runtime.svelte";
+import { type Status, checkStatus } from "@tauri-apps/plugin-biometric";
+
+const { children } = $props();
+
+let globalState: GlobalState | undefined = $state(undefined);
+
+let showSplashScreen = $state(false);
+let previousRoute = null;
+let navigationStack: string[] = [];
+
+setContext("globalState", () => globalState);
+
+// 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));
+}
+
+onMount(async () => {
+    let status: Status | undefined = undefined;
+    try {
+        status = await checkStatus();
+    } catch (error) {
+        status = {
+            biometryType: 0,
+            isAvailable: false,
+        };
     }
-
-    async function ensureMinimumDelay() {
-        await new Promise((resolve) => setTimeout(resolve, 500));
+    runtime.biometry = status.biometryType;
+    try {
+        globalState = await GlobalState.create();
+    } catch (error) {
+        console.error("Failed to initialize global state:", error);
+        // Consider adding fallback behavior or user notification
     }
 
-    onMount(async () => {
-        let status: Status | undefined = undefined;
-        try {
-            status = await checkStatus();
-        } catch (error) {
-            status = {
-                biometryType: 0,
-                isAvailable: false,
-            };
-        }
-        runtime.biometry = status.biometryType;
-        try {
-            globalState = await GlobalState.create();
-        } catch (error) {
-            console.error("Failed to initialize global state:", error);
-            // Consider adding fallback behavior or user notification
-        }
-
-        showSplashScreen = true; // Can't set up the original state to true or animation won't start
-        navigationStack.push(window.location.pathname);
-
-        await Promise.all([loadData(), ensureMinimumDelay()]);
-
-        showSplashScreen = false;
-    });
+    showSplashScreen = true; // Can't set up the original state to true or animation won't start
+    navigationStack.push(window.location.pathname);
+
+    await Promise.all([loadData(), ensureMinimumDelay()]);
 
-    const safeAreaTop = $derived.by(
-        () =>
-            Number.parseFloat(
-                getComputedStyle(document.documentElement).getPropertyValue(
-                    "--safe-top",
-                ),
-            ) || 0,
-    );
+    showSplashScreen = false;
+});
 
-    $effect(() => console.log("top", safeAreaTop));
+const safeAreaTop = $derived.by(
+    () =>
+        Number.parseFloat(
+            getComputedStyle(document.documentElement).getPropertyValue(
+                "--safe-top",
+            ),
+        ) || 0,
+);
 
-    onNavigate((navigation) => {
-        if (!document.startViewTransition) return;
+$effect(() => console.log("top", safeAreaTop));
 
-        const from = navigation.from?.url.pathname;
-        const to = navigation.to?.url.pathname;
+onNavigate((navigation) => {
+    if (!document.startViewTransition) return;
 
-        if (!from || !to || from === to) return;
+    const from = navigation.from?.url.pathname;
+    const to = navigation.to?.url.pathname;
 
-        let direction: "left" | "right" = "right";
+    if (!from || !to || from === to) return;
 
-        const fromIndex = navigationStack.lastIndexOf(from);
-        const toIndex = navigationStack.lastIndexOf(to);
+    let direction: "left" | "right" = "right";
 
-        if (toIndex !== -1 && toIndex < fromIndex) {
-            // Backward navigation
-            direction = "left";
-            navigationStack = navigationStack.slice(0, toIndex + 1);
-        } else {
-            // Forward navigation (or new path)
-            direction = "right";
-            navigationStack.push(to);
-        }
+    const fromIndex = navigationStack.lastIndexOf(from);
+    const toIndex = navigationStack.lastIndexOf(to);
+
+    if (toIndex !== -1 && toIndex < fromIndex) {
+        // Backward navigation
+        direction = "left";
+        navigationStack = navigationStack.slice(0, toIndex + 1);
+    } else {
+        // Forward navigation (or new path)
+        direction = "right";
+        navigationStack.push(to);
+    }
 
-        document.documentElement.setAttribute("data-transition", direction);
-        previousRoute = to;
+    document.documentElement.setAttribute("data-transition", direction);
+    previousRoute = to;
 
-        return new Promise((resolve) => {
-            document.startViewTransition(async () => {
-                resolve();
-                await navigation.complete;
-            });
+    return new Promise((resolve) => {
+        document.startViewTransition(async () => {
+            resolve();
+            await navigation.complete;
         });
     });
+});
 </script>
 
 {#if showSplashScreen}
diff --git a/platforms/metagram/src/lib/dummyData.ts b/platforms/metagram/src/lib/dummyData.ts
index 7c8580b9..03b5e705 100644
--- a/platforms/metagram/src/lib/dummyData.ts
+++ b/platforms/metagram/src/lib/dummyData.ts
@@ -1,24 +1,22 @@
 import type { CommentType } from './types';
-
 export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
-	id: i + 1,
+	id: (i + 1).toString(),
 	avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+	userId: (i + 1).toString(),
 	username: `user${i + 1}`,
-	imgUri: [
+	imgUris: [
 		'https://picsum.photos/800',
 		'https://picsum.photos/600',
 		'https://picsum.photos/800',
 		'https://picsum.photos/600'
 	],
-	postAlt: 'Sample',
-	text: `This is post number ${i + 1}. Loving how these shots came out! 📸`,
+	caption: `This is post number ${i + 1}. Loving how these shots came out! :camera_with_flash:`,
 	time: `${i + 1} hours ago`,
 	count: {
 		likes: Math.floor(Math.random() * 500),
 		comments: Math.floor(Math.random() * 200)
 	}
 }));
-
 export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
 	userImgSrc: 'https://picsum.photos/800',
 	name: `user${i + 1}`,
diff --git a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
index 6175ec8b..98104c23 100644
--- a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
+++ b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
@@ -2,7 +2,7 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { Home, CommentsTwo, Search, Camera } from '$lib/icons';
 	import { goto } from '$app/navigation';
-	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
+	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
 	import { page } from '$app/state';
 
 	interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
@@ -27,7 +27,11 @@
 		const direction = toIndex > fromIndex ? 'right' : 'left';
 		document.documentElement.setAttribute('data-transition', direction);
 		previousTab = newTab;
-		goto(`/${newTab}`);
+		if (newTab === 'profile') {
+			goto(`/profile/${ownerId}`);
+		} else {
+			goto(`/${newTab}`);
+		}
 	};
 
 	$effect(() => {
diff --git a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
index 798561f3..597e9f58 100644
--- a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
+++ b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
@@ -15,6 +15,7 @@ export const Primary = {
 	args: {
 		variant: 'primary',
 		heading: 'metagram',
+		isCallBackNeeded: true,
 		callback: () => alert('clicked')
 	}
 };
@@ -37,6 +38,7 @@ export const SecondaryWithMenu = {
 	args: {
 		variant: 'secondary',
 		heading: 'Account',
+		isCallBackNeeded: true,
 		callback: () => alert('menu clicked')
 	}
 };
@@ -44,6 +46,7 @@ export const SecondaryWithMenu = {
 export const Tertiary = {
 	args: {
 		variant: 'tertiary',
+		isCallBackNeeded: true,
 		callback: () => alert('clicked')
 	}
 };
diff --git a/platforms/metagram/src/lib/fragments/Header/Header.svelte b/platforms/metagram/src/lib/fragments/Header/Header.svelte
index 2694cb43..b6e1781c 100644
--- a/platforms/metagram/src/lib/fragments/Header/Header.svelte
+++ b/platforms/metagram/src/lib/fragments/Header/Header.svelte
@@ -13,11 +13,13 @@
 	interface IHeaderProps extends HTMLAttributes<HTMLElement> {
 		variant: 'primary' | 'secondary' | 'tertiary';
 		heading?: string;
+		isCallBackNeeded?: boolean;
 		callback?: () => void;
 		options?: { name: string; handler: () => void }[];
 	}
 
-	const { variant, callback, heading, options, ...restProps }: IHeaderProps = $props();
+	const { variant, isCallBackNeeded, callback, heading, options, ...restProps }: IHeaderProps =
+		$props();
 
 	const variantClasses = {
 		primary: {
@@ -47,7 +49,7 @@
 
 	const classes = $derived({
 		common: cn(
-			'w-full flex items-center justify-between my-4 pb-6 border-b-[1px] md:border-0 border-grey'
+			'flex items-center justify-between my-4 w-full pb-2 border-b-[1px] md:border-0 border-grey'
 		),
 		text: variantClasses[variant].text,
 		background: variantClasses[variant].background
@@ -81,7 +83,7 @@
 			</h1>
 		{/if}
 	</span>
-	{#if callback}
+	{#if isCallBackNeeded}
 		<button
 			class={cn(['cursor-pointer rounded-full p-2 hover:bg-gray-100', classes.background])}
 			onclick={callback}
diff --git a/platforms/metagram/src/lib/fragments/Post/Post.svelte b/platforms/metagram/src/lib/fragments/Post/Post.svelte
index 2e034deb..2bc53ee1 100644
--- a/platforms/metagram/src/lib/fragments/Post/Post.svelte
+++ b/platforms/metagram/src/lib/fragments/Post/Post.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { Avatar } from '$lib/ui';
 	import { cn } from '$lib/utils';
 	import {
@@ -15,9 +16,9 @@
 	interface IPostProps extends HTMLAttributes<HTMLElement> {
 		avatar: string;
 		username: string;
+		userId: string;
 		imgUris: string[];
-		postAlt?: string;
-		text: string;
+		caption: string;
 		count: {
 			likes: number;
 			comments: number;
@@ -33,9 +34,9 @@
 	const {
 		avatar,
 		username,
+		userId,
 		imgUris,
-		text,
-		postAlt,
+		caption,
 		count,
 		callback,
 		time,
@@ -66,11 +67,15 @@
 
 <article {...restProps} class={cn(['flex w-full flex-col gap-4', restProps.class])}>
 	<div class="flex w-full items-center justify-between">
-		<div class="flex items-center justify-between gap-2">
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="flex items-center justify-between gap-2"
+			onclick={() => goto(`/profile/${userId}`)}
+		>
 			<Avatar src={avatar} alt={username} size="sm"></Avatar>
 			<h2>{username}</h2>
 		</div>
-
 		<button onclick={callback.menu} class="cursor-pointer rounded-full p-2 hover:bg-gray-100">
 			<HugeiconsIcon icon={MoreVerticalIcon} size={24} color="var(--color-black-500)" />
 		</button>
@@ -93,7 +98,7 @@
 				<div class="aspect-[4/5] h-full w-full snap-center md:aspect-[16/9]">
 					<img
 						src={img}
-						alt={postAlt ?? text}
+						alt={'post by ' + username}
 						class=" h-full w-full rounded-4xl object-cover"
 					/>
 				</div>
@@ -123,7 +128,7 @@
 			</button>
 		{/if}
 	</div>
-	<p class="text-black/80">{text}</p>
+	<p class="text-black/80">{caption}</p>
 	<p class="text-black/60">{time}</p>
 	<div class="flex w-full items-center justify-between">
 		<div class="flex gap-4">
diff --git a/platforms/metagram/src/lib/fragments/Profile/Profile.svelte b/platforms/metagram/src/lib/fragments/Profile/Profile.svelte
new file mode 100644
index 00000000..f1d48220
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/Profile/Profile.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import type { PostData, userProfile } from '$lib/types';
+	import { Button } from '$lib/ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IProfileProps extends HTMLAttributes<HTMLElement> {
+		variant: 'user' | 'other';
+		profileData: userProfile;
+		handleEdit?: () => Promise<void>;
+		handleFollow?: () => Promise<void>;
+		handleMessage?: () => Promise<void>;
+		handleSinglePost?: (post: PostData) => void;
+	}
+
+	const {
+		variant = 'user',
+		profileData,
+		handleEdit,
+		handleFollow,
+		handleMessage,
+		handleSinglePost,
+		...restProps
+	}: IProfileProps = $props();
+</script>
+
+<div {...restProps} class="flex h-screen w-full flex-col items-center gap-4">
+	<div class="flex flex-col items-center gap-4 p-4">
+		<img class="size-28 rounded-full" src={profileData.avatar} alt="" />
+		<div class="flex flex-col items-center gap-2">
+			<p class="font-semibold">{profileData.userId}</p>
+			<p class="text-black-600">{profileData.username}</p>
+		</div>
+		<div class="text-black-600 flex gap-4">
+			<p><span class="font-semibold text-black">{profileData.followers}</span> followers</p>
+			<p><span class="font-semibold text-black">{profileData.following}</span> following</p>
+			<p><span class="font-semibold text-black">{profileData.totalPosts}</span> posts</p>
+		</div>
+		<div class="text-black-600 text-center text-sm md:px-12">
+			{profileData.userBio}
+		</div>
+		<div class="flex w-full gap-3">
+			{#if variant === 'user'}
+				<div class="flex w-full justify-around">
+					<Button size="sm" class="w-full md:w-[50%]" callback={handleEdit}>
+						Edit Profile
+					</Button>
+				</div>
+				<div class="w-full md:hidden">
+					<Button size="sm" callback={() => goto(`/settings`)}>Settings</Button>
+				</div>
+			{:else if variant === 'other'}
+				<div class="flex w-full justify-around">
+					<Button size="sm" class="w-full md:w-[50%]" callback={handleFollow}>
+						Follow
+					</Button>
+				</div>
+				<div class="w-full md:hidden">
+					<Button size="sm" callback={handleMessage}>Message</Button>
+				</div>
+			{/if}
+		</div>
+	</div>
+	<div class="grid grid-cols-3 gap-[2px] pb-16">
+		{#each profileData.posts as post}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				onclick={() => {
+					handleSinglePost && handleSinglePost(post);
+				}}
+			>
+				<img
+					class="aspect-square w-48 rounded-md object-cover md:max-w-56"
+					src={post.imgUris[0]}
+					alt="user post"
+				/>
+			</div>
+		{/each}
+	</div>
+</div>
diff --git a/platforms/metagram/src/lib/fragments/SideBar/SideBar.svelte b/platforms/metagram/src/lib/fragments/SideBar/SideBar.svelte
index 9cd304c5..06d1f612 100644
--- a/platforms/metagram/src/lib/fragments/SideBar/SideBar.svelte
+++ b/platforms/metagram/src/lib/fragments/SideBar/SideBar.svelte
@@ -5,6 +5,7 @@
 	import { page } from '$app/state';
 	import Button from '$lib/ui/Button/Button.svelte';
 	import { cn } from '$lib/utils';
+	import { ownerId } from '$lib/store/store.svelte';
 
 	interface ISideBarProps extends HTMLAttributes<HTMLElement> {
 		activeTab?: string;
@@ -148,7 +149,7 @@
 			aria-current={activeTab === 'profile' ? 'page' : undefined}
 			onclick={() => {
 				activeTab = 'profile';
-				goto('/profile');
+				goto(`/profile/${ownerId.value}`);
 			}}
 		>
 			<span
diff --git a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts
index 01f0eba1..34e024a1 100644
--- a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts
+++ b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.stories.ts
@@ -1,51 +1,51 @@
-import type { ComponentProps } from "svelte";
-import UploadedPostView from "./UploadedPostView.svelte";
+import type { ComponentProps } from 'svelte';
+import UploadedPostView from './UploadedPostView.svelte';
 
 export default {
-    title: "UI/UploadedPostView",
-    component: UploadedPostView,
-    tags: ["autodocs"],
-    render: (args: {
-        Component: UploadedPostView;
-        props: ComponentProps<typeof UploadedPostView>;
-    }) => ({
-        Component: UploadedPostView,
-        props: args,
-    }),
+	title: 'UI/UploadedPostView',
+	component: UploadedPostView,
+	tags: ['autodocs'],
+	render: (args: {
+		Component: UploadedPostView;
+		props: ComponentProps<typeof UploadedPostView>;
+	}) => ({
+		Component: UploadedPostView,
+		props: args
+	})
 };
 
 let images = [
-    {
-        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        alt: "Sample Image 1",
-    },
-    {
-        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        alt: "Sample Image 1",
-    },
-    {
-        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        alt: "Sample Image 1",
-    },
-    {
-        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        alt: "Sample Image 1",
-    },
-    {
-        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        alt: "Sample Image 1",
-    },
-    {
-        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        alt: "Sample Image 1",
-    },
+	{
+		url: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		alt: 'Sample Image 1'
+	},
+	{
+		url: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		alt: 'Sample Image 1'
+	},
+	{
+		url: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		alt: 'Sample Image 1'
+	},
+	{
+		url: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		alt: 'Sample Image 1'
+	},
+	{
+		url: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		alt: 'Sample Image 1'
+	},
+	{
+		url: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		alt: 'Sample Image 1'
+	}
 ];
 
 export const Primary = {
-    args: {
-        images: images,
-        callback: (i: number) => {
-            images = images.filter((_, index) => index !== i);
-        },
-    },
+	args: {
+		images: images,
+		callback: (i: number) => {
+			images = images.filter((_, index) => index !== i);
+		}
+	}
 };
diff --git a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
index d8ac5856..ad98b2dc 100644
--- a/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
+++ b/platforms/metagram/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
@@ -27,13 +27,13 @@
 <article
 	{...restProps}
 	class={cn(
-		['max-w-screen flex flex-row items-center gap-4 scroll-auto', restProps.class].join(' ')
+		['flex max-w-screen flex-row items-center gap-4 scroll-auto', restProps.class].join(' ')
 	)}
 >
 	{#each images as image, i}
 		<div class={cn(['group relative shrink-0'])}>
 			<Cross
-				class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
+				class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
 				onclick={() => callback(i)}
 			/>
 			<img
diff --git a/platforms/metagram/src/lib/fragments/UserRequest/UserRequest.svelte b/platforms/metagram/src/lib/fragments/UserRequest/UserRequest.svelte
index c1dc30b4..7e67fd6b 100644
--- a/platforms/metagram/src/lib/fragments/UserRequest/UserRequest.svelte
+++ b/platforms/metagram/src/lib/fragments/UserRequest/UserRequest.svelte
@@ -15,15 +15,20 @@
 		$props();
 </script>
 
-<article {...restProps} class={cn(['flex justify-between items-center', restProps.class].join(' '))}>
-    <div class="me-4.5 flex items-start">
-        <Avatar size="sm" src={userImgSrc} />
-        <div class="ms-2">
-            <h3 class="font-semibold text-black">{userName}</h3>
-            <p class="text-black-600">{description}</p>
-        </div>
-    </div>
-	<Button class="max-w-[100px]" variant="secondary" size="sm" callback={handleFollow}>Follow</Button>
+<article
+	{...restProps}
+	class={cn(['flex items-center justify-between', restProps.class].join(' '))}
+>
+	<div class="me-4.5 flex items-start">
+		<Avatar size="sm" src={userImgSrc} />
+		<div class="ms-2">
+			<h3 class="font-semibold text-black">{userName}</h3>
+			<p class="text-black-600">{description}</p>
+		</div>
+	</div>
+	<Button class="max-w-[100px]" variant="secondary" size="sm" callback={handleFollow}
+		>Follow</Button
+	>
 </article>
 
 <!--
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
index 80188c95..abe4ed0e 100644
--- a/platforms/metagram/src/lib/fragments/index.ts
+++ b/platforms/metagram/src/lib/fragments/index.ts
@@ -1,18 +1,19 @@
-export { default as Header } from "./Header/Header.svelte";
-export { default as BottomNav } from "./BottomNav/BottomNav.svelte";
-export { default as SettingsNavigationButton } from "./SettingsNavigationButton/SettingsNavigationButton.svelte";
-export { default as MessageInput } from "./MessageInput/MessageInput.svelte";
-export { default as InputFile } from "./InputFile/InputFile.svelte";
-export { default as Drawer } from "./Drawer/Drawer.svelte";
-export { default as Message } from "./Message/Message.svelte";
-export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte";
-export { default as Modal } from "./Modal/Modal.svelte";
-export { default as SideBar } from "./SideBar/SideBar.svelte";
-export { default as RightAside } from "./RightAside/RightAside.svelte";
-export { default as SettingsToggleButton } from "./SettingsToggleButton/SettingsToggleButton.svelte";
-export { default as Post } from "./Post/Post.svelte";
-export { default as ChatMessage } from "./ChatMessage/ChatMessage.svelte";
-export { default as Comment } from "./Comment/Comment.svelte";
-export { default as SettingsDeleteButton } from "./SettingsDeleteButton/SettingsDeleteButton.svelte";
-export { default as UserRequest } from "./UserRequest/UserRequest.svelte";
-export { default as UploadedPostView } from "./UploadedPostView/UploadedPostView.svelte";
+export { default as Profile } from './Profile/Profile.svelte';
+export { default as Header } from './Header/Header.svelte';
+export { default as BottomNav } from './BottomNav/BottomNav.svelte';
+export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
+export { default as MessageInput } from './MessageInput/MessageInput.svelte';
+export { default as InputFile } from './InputFile/InputFile.svelte';
+export { default as Drawer } from './Drawer/Drawer.svelte';
+export { default as Message } from './Message/Message.svelte';
+export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte';
+export { default as Modal } from './Modal/Modal.svelte';
+export { default as SideBar } from './SideBar/SideBar.svelte';
+export { default as RightAside } from './RightAside/RightAside.svelte';
+export { default as SettingsToggleButton } from './SettingsToggleButton/SettingsToggleButton.svelte';
+export { default as Post } from './Post/Post.svelte';
+export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
+export { default as Comment } from './Comment/Comment.svelte';
+export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';
+export { default as UserRequest } from './UserRequest/UserRequest.svelte';
+export { default as UploadedPostView } from './UploadedPostView/UploadedPostView.svelte';
diff --git a/platforms/metagram/src/lib/icons/index.ts b/platforms/metagram/src/lib/icons/index.ts
index 4a7b71c4..4e216554 100644
--- a/platforms/metagram/src/lib/icons/index.ts
+++ b/platforms/metagram/src/lib/icons/index.ts
@@ -1,12 +1,12 @@
-export { default as Icons } from "./Icons.svelte";
-export { default as Like } from "./Like.svelte";
-export { default as Refresh } from "./Refresh.svelte";
-export { default as CommentIcon } from "./CommentIcon.svelte";
-export { default as VerticalDots } from "./VerticalDots.svelte";
-export { default as Home } from "./Home.svelte";
-export { default as Flash } from "./Flash.svelte";
-export { default as CommentsTwo } from "./CommentsTwo.svelte";
-export { default as Search } from "./Search.svelte";
-export { default as Camera } from "./Camera.svelte";
-export { default as Settings } from "./Settings.svelte";
-export { default as Cross } from "./Cross.svelte";
+export { default as Icons } from './Icons.svelte';
+export { default as Like } from './Like.svelte';
+export { default as Refresh } from './Refresh.svelte';
+export { default as CommentIcon } from './CommentIcon.svelte';
+export { default as VerticalDots } from './VerticalDots.svelte';
+export { default as Home } from './Home.svelte';
+export { default as Flash } from './Flash.svelte';
+export { default as CommentsTwo } from './CommentsTwo.svelte';
+export { default as Search } from './Search.svelte';
+export { default as Camera } from './Camera.svelte';
+export { default as Settings } from './Settings.svelte';
+export { default as Cross } from './Cross.svelte';
diff --git a/platforms/metagram/src/lib/store/store.svelte.ts b/platforms/metagram/src/lib/store/store.svelte.ts
index 30a8779a..19da1822 100644
--- a/platforms/metagram/src/lib/store/store.svelte.ts
+++ b/platforms/metagram/src/lib/store/store.svelte.ts
@@ -1,3 +1,5 @@
+import type { PostData } from '$lib/types';
+
 export const isNavigatingThroughNav = $state({
 	value: false
 });
@@ -5,3 +7,11 @@ export const isNavigatingThroughNav = $state({
 export const showComments = $state({
 	value: false
 });
+
+export const ownerId = $state({
+	value: '1'
+});
+
+export const selectedPost: { value: PostData | null } = $state({
+	value: null
+});
diff --git a/platforms/metagram/src/lib/types.ts b/platforms/metagram/src/lib/types.ts
index b289f7d2..32a07988 100644
--- a/platforms/metagram/src/lib/types.ts
+++ b/platforms/metagram/src/lib/types.ts
@@ -1,4 +1,4 @@
-import { type SVGAttributes } from 'svelte/elements';
+import type { SVGAttributes } from 'svelte/elements';
 
 export interface ISvgProps extends SVGAttributes<SVGElement> {
 	size?: number | string;
@@ -18,15 +18,26 @@ export type CommentType = {
 };
 
 export type PostData = {
-	id: number;
+	id: string;
 	avatar: string;
+	userId: string;
 	username: string;
-	imgUri: string[];
-	postAlt: string;
-	text: string;
+	imgUris: string[];
+	caption: string;
 	time: string;
 	count: {
 		likes: number;
 		comments: number;
 	};
 };
+
+export type userProfile = {
+	userId: string;
+	username: string;
+	avatar: string;
+	totalPosts: number;
+	followers: number;
+	following: number;
+	userBio: string;
+	posts: PostData[];
+};
diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index d5e9044b..f52afedb 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { comments } from '$lib/dummyData';
 	import { BottomNav, Header, Comment, MessageInput, SideBar } from '$lib/fragments';
 	import UserRequest from '$lib/fragments/UserRequest/UserRequest.svelte';
-	import { Settings } from '$lib/icons';
 	import { showComments } from '$lib/store/store.svelte';
 	import type { CommentType } from '$lib/types';
+	import { ArrowLeft01Icon, ArrowLeft02Icon } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
 	let { children } = $props();
 
 	let route = $derived(page.url.pathname);
@@ -15,7 +15,7 @@
 	let commentInput: HTMLInputElement | undefined = $state();
 	let _comments = $state(comments);
 	let activeReplyToId: string | null = $state(null);
-	let chatFriendId = $state();
+	let idFromParams = $state();
 
 	const handleSend = async () => {
 		const newComment = {
@@ -29,7 +29,6 @@
 			time: 'Just now',
 			replies: []
 		};
-
 		if (activeReplyToId) {
 			// Find the parent comment by id and push reply
 			const addReplyToComment = (commentsArray: CommentType[]) => {
@@ -53,7 +52,7 @@
 	};
 
 	$effect(() => {
-		chatFriendId = page.params.id;
+		idFromParams = page.params.id;
 
 		if (route.includes('home')) {
 			heading = 'Feed';
@@ -61,7 +60,7 @@
 			heading = 'Search';
 		} else if (route.includes('post')) {
 			heading = 'Post';
-		} else if (route === `/messages/${chatFriendId}`) {
+		} else if (route === `/messages/${idFromParams}`) {
 			heading = 'User Name';
 		} else if (route.includes('messages')) {
 			heading = 'Messages';
@@ -74,31 +73,33 @@
 </script>
 
 <main
-	class={`block h-[100dvh] ${route !== '/home' && route !== '/messages' ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
+	class={`block h-[100dvh] ${route !== '/home' && route !== '/messages' && route !== '/profile' && route !== '/settings' && !route.includes('/profile') ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
 >
 	<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
-	<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 pb-8 md:px-8 md:pt-8">
-		<div class="flex items-center justify-between">
+	<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 pb-16 md:px-8 md:pt-8">
+		{#if route === '/profile/post'}
+			<button
+				class="my-4 cursor-pointer rounded-full bg-white/60 p-2 hover:bg-gray-100"
+				onclick={() => window.history.back()}
+			>
+				<HugeiconsIcon icon={ArrowLeft02Icon} size={24} color="var(--color-black)" />
+			</button>
+		{:else}
 			<Header
-				variant={route === `/messages/${chatFriendId}` ? 'secondary' : 'primary'}
+				variant={route === `/messages/${idFromParams}`
+					? 'secondary'
+					: route.includes('profile')
+						? 'tertiary'
+						: 'primary'}
 				{heading}
+				isCallBackNeeded={route.includes('profile')}
+				callback={() => alert('Ads')}
 				options={[
 					{ name: 'Report', handler: () => alert('report') },
 					{ name: 'Clear chat', handler: () => alert('clear') }
 				]}
 			/>
-			{#if route === '/profile'}
-				<div class="mb-6 flex md:hidden">
-					<button
-						type="button"
-						class="flex items-center gap-2"
-						onclick={() => goto(`/settings`)}
-					>
-						<Settings size="24px" color="var(--color-brand-burnt-orange)" />
-					</button>
-				</div>
-			{/if}
-		</div>
+		{/if}
 		{@render children()}
 	</section>
 	{#if route === '/home' || route === '/messages'}
@@ -148,7 +149,7 @@
 		</aside>
 	{/if}
 
-	{#if route !== `/messages/${chatFriendId}`}
+	{#if route !== `/messages/${idFromParams}`}
 		<BottomNav class="btm-nav" profileSrc="https://picsum.photos/200" />
 	{/if}
 </main>
diff --git a/platforms/metagram/src/routes/(protected)/discover/+page.svelte b/platforms/metagram/src/routes/(protected)/discover/+page.svelte
index 46ac728b..86c385a0 100644
--- a/platforms/metagram/src/routes/(protected)/discover/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/discover/+page.svelte
@@ -7,18 +7,18 @@
 
 <section>
 	<Input type="text" bind:value={searchValue} placeholder="Search user, post and more." />
-    {#if searchValue}
-    <ul class="pb-4 mt-6">
-        {#each { length: 5 } as _}
-            <li class="mb-4">
-                <UserRequest
-                    userImgSrc="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
-                    userName="luffythethird"
-                    description="I’ve always wished life came at me fast. Funny how that wish never came through"
-                    handleFollow={async () => alert('Adsad')}
-                />
-            </li>
-        {/each}
-    </ul>
-    {/if}
+	{#if searchValue}
+		<ul class="mt-6 pb-4">
+			{#each { length: 5 } as _}
+				<li class="mb-4">
+					<UserRequest
+						userImgSrc="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
+						userName="luffythethird"
+						description="I’ve always wished life came at me fast. Funny how that wish never came through"
+						handleFollow={async () => alert('Adsad')}
+					/>
+				</li>
+			{/each}
+		</ul>
+	{/if}
 </section>
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index dea6637e..0a94f524 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -89,9 +89,9 @@
 			<Post
 				avatar={post.avatar}
 				username={post.username}
-				imgUris={post.imgUri}
-				postAlt={post.postAlt}
-				text={post.text}
+				userId={post.userId}
+				caption={post.caption}
+				imgUris={post.imgUris}
 				time={post.time}
 				count={post.count}
 				callback={{
diff --git a/platforms/metagram/src/routes/(protected)/profile/+page.svelte b/platforms/metagram/src/routes/(protected)/profile/+page.svelte
deleted file mode 100644
index 0fbba997..00000000
--- a/platforms/metagram/src/routes/(protected)/profile/+page.svelte
+++ /dev/null
@@ -1,2 +0,0 @@
-<script lang="ts">
-</script>
diff --git a/platforms/metagram/src/routes/(protected)/profile/[id]/+page.svelte b/platforms/metagram/src/routes/(protected)/profile/[id]/+page.svelte
new file mode 100644
index 00000000..3fb77a7e
--- /dev/null
+++ b/platforms/metagram/src/routes/(protected)/profile/[id]/+page.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { Profile } from '$lib/fragments';
+	import { ownerId, selectedPost } from '$lib/store/store.svelte';
+	import type { userProfile, PostData } from '$lib/types';
+
+	let profileId = $derived(page.params.id);
+
+	const profile: userProfile = $state({
+		userId: page.params.id,
+		username: 'Ananya Rana',
+		avatar: 'https://picsum.photos/200/300',
+		totalPosts: 1,
+		followers: 300,
+		following: 150,
+		userBio:
+			'Friendly nerd who likes to not meet people as much as possible. Leave the earth for me yall.',
+		posts: [
+			{
+				id: '1',
+				avatar: 'https://picsum.photos/200/300',
+				userId: 'asdf',
+				username: '_.ananyayaya._',
+				imgUris: [
+					'https://picsum.photos/800',
+					'https://picsum.photos/600',
+					'https://picsum.photos/800',
+					'https://picsum.photos/600'
+				],
+				caption: 'Loved this one!',
+				time: '2h ago',
+				count: { likes: 200, comments: 45 }
+			},
+			{
+				id: '2',
+				avatar: 'https://picsum.photos/200/300',
+				userId: 'asdf',
+				username: '_.ananyayaya._',
+				imgUris: ['https://picsum.photos/id/1012/200/200'],
+				caption: 'Loved this one!',
+				time: '2h ago',
+				count: { likes: 200, comments: 45 }
+			},
+			{
+				id: '3',
+				avatar: 'https://picsum.photos/200/300',
+				userId: 'asdf',
+				username: '_.ananyayaya._',
+				imgUris: ['https://picsum.photos/id/1013/200/200'],
+				caption: 'Loved this one!',
+				time: '2h ago',
+				count: { likes: 200, comments: 45 }
+			}
+		]
+	});
+
+	function handlePostClick(post: PostData) {
+		selectedPost.value = post;
+		goto('/profile/post');
+	}
+</script>
+
+<section class="pb-8">
+	<Profile
+		variant={ownerId.value === profileId ? 'user' : 'other'}
+		profileData={profile}
+		handleSinglePost={(post) => handlePostClick(post)}
+		handleFollow={async () => alert('followed')}
+		handleMessage={async () => goto('/messages')}
+	/>
+</section>
diff --git a/platforms/metagram/src/routes/(protected)/profile/post/+page.svelte b/platforms/metagram/src/routes/(protected)/profile/post/+page.svelte
new file mode 100644
index 00000000..61e6a336
--- /dev/null
+++ b/platforms/metagram/src/routes/(protected)/profile/post/+page.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Post } from '$lib/fragments';
+	import { selectedPost } from '$lib/store/store.svelte';
+
+	let post = $state(selectedPost.value);
+</script>
+
+<section>
+	{#if post}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<Post
+			avatar={post.avatar}
+			username={post.username}
+			userId={post.userId}
+			imgUris={post.imgUris}
+			caption={post.caption}
+			time={post.time}
+			count={post.count}
+			callback={{
+				like: () => alert('like'),
+				comment: () => {
+					if (window.matchMedia('(max-width: 768px)').matches) {
+						alert('Show comment drawer');
+					} else {
+						alert('Show comment modal');
+					}
+				},
+				menu: () => alert('menu')
+			}}
+		/>
+	{/if}
+</section>
diff --git a/platforms/metagram/src/routes/(protected)/settings/+page.svelte b/platforms/metagram/src/routes/(protected)/settings/+page.svelte
index e1d8bfd3..70433ebb 100644
--- a/platforms/metagram/src/routes/(protected)/settings/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/settings/+page.svelte
@@ -42,10 +42,6 @@
 			{/snippet}
 		</SettingsNavigationButton>
 	</div>
-</div>
-<hr class="text-grey" />
-<div class="flex flex-col gap-3">
-	<h3 class="text-brand-burnt-orange text-base font-semibold">System</h3>
 	<div class="{route === `/settings/data-and-storage` ? 'bg-grey' : ''} rounded-xl p-2">
 		<SettingsNavigationButton onclick={() => goto(`/settings/data-and-storage`)}>
 			{#snippet leadingIcon()}
@@ -60,6 +56,7 @@
 			{/snippet}
 		</SettingsNavigationButton>
 	</div>
+	<hr class="text-grey" />
 	<div class="{route === `/settings/logout` ? 'bg-grey' : ''} rounded-xl p-2">
 		<SettingsNavigationButton onclick={() => goto(`/settings/logout`)}>
 			{#snippet leadingIcon()}
diff --git a/platforms/metagram/src/routes/+layout.svelte b/platforms/metagram/src/routes/+layout.svelte
index 9adad7b8..d2583c88 100644
--- a/platforms/metagram/src/routes/+layout.svelte
+++ b/platforms/metagram/src/routes/+layout.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { onNavigate } from '$app/navigation';
-	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
+	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
 	import { onMount } from 'svelte';
 	import '../app.css';
+	import { page } from '$app/state';
 
 	let { children } = $props();
 
@@ -34,20 +35,25 @@
 			});
 		});
 	});
-	
+
 	onMount(() => {
+		ownerId.value = '1';
 		setTimeout(() => {
 			showSplashScreen = false;
-		}, 2500)
-	})
+		}, 2500);
+	});
 </script>
 
 {#if showSplashScreen}
-<main class="h-[100dvh] w-full grid items-center justify-center">
-	<img src="/images/Logo.svg" alt="logo">
-</main>
+	<main class="grid h-[100dvh] w-full items-center justify-center">
+		<img src="/images/Logo.svg" alt="logo" />
+	</main>
 {:else}
-<main class="h-[100dvh] overflow-hidden px-4 md:px-0">
-	{@render children()}
-</main>
-{/if}
\ No newline at end of file
+	<main
+		class="h-[100dvh] overflow-hidden {page.url.pathname.includes('/profile')
+			? 'px-0'
+			: 'px-4'}  md:px-0"
+	>
+		{@render children()}
+	</main>
+{/if}