diff --git a/eslint.config.mjs b/eslint.config.mjs
index 82d6ff4..29407a0 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -11,15 +11,15 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
     {
-        ignores: ["src/components/ui/**/*"]
+        ignores: ["src/components/ui/**/*"],
     },
     ...compat.extends("next/core-web-vitals", "next/typescript"),
     {
         rules: {
             "no-unused-vars": "error",
-            "@typescript-eslint/no-unused-vars": "error"
-        }
-    }
+            "@typescript-eslint/no-unused-vars": "error",
+        },
+    },
 ];
 
 export default eslintConfig;
diff --git a/public/profile_fallback.png b/public/profile_fallback.png
new file mode 100644
index 0000000..e125c32
Binary files /dev/null and b/public/profile_fallback.png differ
diff --git a/src/app/(authenticated)/profile/page.tsx b/src/app/(authenticated)/profile/page.tsx
index 89dace3..c61afe1 100644
--- a/src/app/(authenticated)/profile/page.tsx
+++ b/src/app/(authenticated)/profile/page.tsx
@@ -1,10 +1,25 @@
+import DangerZone from "@/components/application/profile/danger-zone";
+import ProfileDetails from "@/components/application/profile/details";
 import React from "react";
 
 const Profile = () => {
     return (
-        <div className="flex h-full w-full flex-1 flex-col gap-2 rounded-tl-2xl bg-background p-5">
-            Profile
-        </div>
+        <section className="flex h-full w-full flex-1 flex-col gap-2 rounded-tl-2xl bg-background p-5 overflow-auto">
+            <p className="scroll-m-20 text-2xl font-semibold tracking-tight">
+                User Profile
+            </p>
+
+            <div className="mt-20 flex justify-center items-center">
+                <ProfileDetails />
+            </div>
+
+            <div className="mt-10">
+                <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight text-red-500 mb-2">
+                    Danger Zone
+                </h3>
+                <DangerZone />
+            </div>
+        </section>
     );
 };
 
diff --git a/src/app/(unauthenticated)/reset-password/page.tsx b/src/app/(unauthenticated)/reset-password/page.tsx
new file mode 100644
index 0000000..21c7734
--- /dev/null
+++ b/src/app/(unauthenticated)/reset-password/page.tsx
@@ -0,0 +1,28 @@
+"use client";
+import ResetPasswordForm from "@/components/application/authentication/reset-password-form";
+import React from "react";
+import Image from "next/image";
+
+const ResetPassword = () => {
+    return (
+        <section className="w-full lg:grid grid-cols-2 place-items-center">
+            <div className="lg:hidden absolute top-1/12 lg:top-1/3 left-0 w-full h-[250px] bg-gradient-to-b lg:bg-gradient-to-l from-pink-500/40 via-purple-500/40 to-blue-500/40 blur-[120px]"></div>
+            <section className="w-[90%] lg:w-[60%]">
+                <ResetPasswordForm />
+            </section>
+
+            <section className="hidden relative w-full lg:flex justify-center items-center">
+                <div className="absolute top-1/5 lg:top-1/3 left-0 w-full h-[250px] bg-gradient-to-b lg:bg-gradient-to-l from-pink-500/40 via-purple-500/40 to-blue-500/40 blur-[120px]"></div>
+                <Image
+                    src={"/pixel_hero.gif"}
+                    alt="hero img"
+                    width={470}
+                    height={470}
+                    className="rounded-4xl shadow-2xl border border-black"
+                />
+            </section>
+        </section>
+    );
+};
+
+export default ResetPassword;
diff --git a/src/app/actions/revalidate-user.action.ts b/src/app/actions/revalidate-user.action.ts
new file mode 100644
index 0000000..cc51d98
--- /dev/null
+++ b/src/app/actions/revalidate-user.action.ts
@@ -0,0 +1,12 @@
+"use server";
+
+import { auth, reverificationError } from "@clerk/nextjs/server";
+
+export const reverifyUser = async () => {
+    const { has } = await auth.protect();
+    const shouldUserRevalidate = !has({ reverification: "strict" });
+    if (shouldUserRevalidate) {
+        return reverificationError("strict");
+    }
+    return { success: true };
+};
diff --git a/src/components/application/authentication/authentication-form.tsx b/src/components/application/authentication/authentication-form.tsx
index 8286573..828a07d 100644
--- a/src/components/application/authentication/authentication-form.tsx
+++ b/src/components/application/authentication/authentication-form.tsx
@@ -383,10 +383,13 @@ const AuthenticationForm: React.FC<TAuthForm> = ({ type }) => {
                     )}
                 </section>
 
-                <section className="my-4">
+                <section className="my-4 flex flex-col gap-2 justify-center items-center">
                     <Link href={redirectLink} className="text-blue-400">
                         {footerText}
                     </Link>
+                    {type === 'login' && <Link href={'/reset-password'} className="text-blue-200">
+                        Forgot Password?
+                    </Link>}
                 </section>
             </CardFooter>
         </Card>
diff --git a/src/components/application/authentication/reset-password-form.tsx b/src/components/application/authentication/reset-password-form.tsx
new file mode 100644
index 0000000..f070830
--- /dev/null
+++ b/src/components/application/authentication/reset-password-form.tsx
@@ -0,0 +1,259 @@
+"use client";
+import {
+    Card,
+    CardContent,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import React, { useEffect, useState } from "react";
+import Logo from "../logo";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Eye, EyeClosed, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { useAuth, useSignIn } from "@clerk/nextjs";
+import {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSlot,
+} from "@/components/ui/input-otp";
+import { useRouter } from "next/navigation";
+import { showError, showSuccess, showWarning } from "@/lib/sonner";
+
+const ResetPasswordForm = () => {
+    // states
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('')
+    const [code, setCode] = useState('')
+    const [successfulCreation, setSuccessfulCreation] = useState(false)
+    const [secondFactor, setSecondFactor] = useState(false)
+    const [error, setError] = useState('')
+    const [showPassword, setShowPassword] = useState(false)
+    const [cooldown, setCooldown] = useState(60);
+    const [loaders, setLoaders] = useState({
+        createLoader: false,
+        resetLoader: false
+    })
+
+
+    // hooks
+    const router = useRouter()
+    const { isSignedIn } = useAuth()
+    const { isLoaded, signIn, setActive } = useSignIn()
+
+    useEffect(() => {
+        if (isSignedIn) {
+            router.push('/')
+        }
+    }, [isSignedIn, router])
+
+    useEffect(() => {
+        if (cooldown <= 0) {
+            return;
+        }
+        const timer = setInterval(() => {
+            setCooldown((prev) => prev - 1);
+        }, 1000);
+
+        return () => clearInterval(timer);
+    }, [cooldown]);
+
+
+    if (!isLoaded) {
+        return null
+    }
+
+    async function create(e: React.FormEvent) {
+        e.preventDefault()
+        if (!email) {
+            showWarning("Email is required")
+            return;
+        }
+        setLoaders((prev) => ({ ...prev, createLoader: true }))
+        await signIn
+            ?.create({
+                strategy: 'reset_password_email_code',
+                identifier: email,
+            })
+            .then(() => {
+                setSuccessfulCreation(true)
+                showSuccess("Code sent to your E-mail")
+                setError('')
+            })
+            .catch((err) => {
+                console.error('error', err.errors[0].longMessage)
+                setError(err.errors[0].longMessage)
+                showError(err.errors[0].longMessage)
+            }).finally(() => setLoaders((prev) => ({ ...prev, createLoader: false })))
+    }
+
+    // Reset the user's password.
+    // Upon successful reset, the user will be
+    // signed in and redirected to the home page
+    async function reset(e: React.FormEvent) {
+        e.preventDefault()
+        setLoaders((prev) => ({ ...prev, resetLoader: true }))
+        await signIn
+            ?.attemptFirstFactor({
+                strategy: 'reset_password_email_code',
+                code,
+                password,
+            })
+            .then((result) => {
+                // Check if 2FA is required
+                if (result.status === 'needs_second_factor') {
+                    setSecondFactor(true)
+                    setError('')
+                } else if (result.status === 'complete') {
+                    // Set the active session to
+                    // the newly created session (user is now signed in)
+                    setActive({
+                        session: result.createdSessionId,
+                        navigate: async ({ session }) => {
+                            if (session?.currentTask) {
+                                // Check for tasks and navigate to custom UI to help users resolve them
+                                // See https://clerk.com/docs/custom-flows/overview#session-tasks
+                                console.log(session?.currentTask)
+                                return
+                            }
+
+                            router.push('/workplace')
+                        },
+                    })
+                    showSuccess("Password reset success. Go to Dashboard!")
+                    setError('')
+                } else {
+                    console.log(result)
+                }
+            })
+            .catch((err) => {
+                console.error('error', err.errors[0].longMessage)
+                setError(err.errors[0].longMessage)
+                showError(err.errors[0].longMessage)
+            }).finally(() => setLoaders((prev) => ({ ...prev, resetLoader: false })))
+    }
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex flex-col lg:flex-row text-center justify-center items-center gap-3 text-2xl text-wrap">
+                    <span>Reset your password</span>
+                    <span>
+                        <Logo textClasses="text-2xl" hideLogo />
+                    </span>
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                <form onSubmit={!successfulCreation ? create : reset}>
+                    {!successfulCreation && (
+                        <div className="flex flex-col justify-center items-center gap-6">
+                            <div className="w-full space-y-2">
+                                <Label htmlFor="email">Provide your email address</Label>
+                                <Input
+                                    type="email"
+                                    placeholder="e.g john@doe.com"
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                />
+                            </div>
+
+                            <Button className="cursor-pointer" disabled={loaders.createLoader}>{loaders.createLoader ? <Loader2 className="animate-spin" /> : "Send password reset code"}</Button>
+                            {error && <p>{error}</p>}
+                        </div>
+                    )}
+
+                    {successfulCreation && (
+                        <div className="flex flex-col justify-center items-center gap-6">
+                            <div className="relative w-full space-y-2">
+                                <Label htmlFor="password">Enter your new password</Label>
+                                <Input
+                                    placeholder="ssshhhhh....."
+                                    type={showPassword ? "text" : "password"}
+                                    value={password}
+                                    onChange={(e) => {
+                                        e.preventDefault()
+                                        setPassword(e.target.value)
+                                    }}
+                                    required
+                                />
+                                <button
+                                    onClick={(e) => {
+                                        e.preventDefault()
+                                        setShowPassword(prev => !prev)
+                                    }}
+                                    className="absolute right-2 top-1/2 "
+                                >
+                                    {showPassword ? (
+                                        <Eye
+                                            className="cursor-pointer"
+                                            color="gray"
+                                            size={20}
+                                        />
+                                    ) : (
+                                        <EyeClosed
+                                            className="cursor-pointer"
+                                            color="gray"
+                                            size={20}
+                                        />
+                                    )}
+                                </button>
+                            </div>
+
+                            <div className="w-full space-y-2">
+                                <Label htmlFor="code">Enter the password reset code that was sent to your email</Label>
+                                <InputOTP
+                                    maxLength={6}
+                                    value={code}
+                                    onChange={setCode}
+                                >
+                                    <InputOTPGroup>
+                                        <InputOTPSlot index={0} />
+                                        <InputOTPSlot index={1} />
+                                        <InputOTPSlot index={2} />
+                                        <InputOTPSlot index={3} />
+                                        <InputOTPSlot index={4} />
+                                        <InputOTPSlot index={5} />
+                                    </InputOTPGroup>
+                                </InputOTP>
+                            </div>
+                            <Button className="w-full cursor-pointer" disabled={loaders.resetLoader}>{loaders.resetLoader ? <Loader2 className="animate-spin" /> : "Reset"}</Button>
+                            <Button
+                                variant={"outline"}
+                                className="mx-auto cursor-pointer"
+                                disabled={cooldown > 0 || loaders.resetLoader}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    create(e);
+                                    setCooldown(60);
+                                }}
+                            >
+                                {cooldown > 0 ? (
+                                    `Resend verification code in ${cooldown}`
+                                ) : loaders.resetLoader ? (
+                                    <Loader2 className="animate-spin" />
+                                ) : (
+                                    "Resend verification code"
+                                )}
+                            </Button>
+                            {error && <p>{error}</p>}
+                        </div>
+                    )}
+
+                    {secondFactor && <p>2FA is required, but this UI does not handle that</p>}
+                </form>
+            </CardContent>
+
+            <CardFooter className="flex flex-col gap-2 justify-center items-center">
+                <section className="my-4">
+                    <Link href="/login" className="text-blue-400">
+                        Back to login
+                    </Link>
+                </section>
+            </CardFooter>
+        </Card>
+    );
+};
+
+export default ResetPasswordForm;
diff --git a/src/components/application/profile/danger-zone.tsx b/src/components/application/profile/danger-zone.tsx
new file mode 100644
index 0000000..6ab8ae1
--- /dev/null
+++ b/src/components/application/profile/danger-zone.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import ChangePassword from "./danger-zone/change-password";
+import DeleteAccount from "./danger-zone/delete-account";
+
+const DangerZone = () => {
+    return (
+        <section className="w-full bg-red-950/60 rounded-lg flex flex-col justify-center items-center divide-y-2">
+            <div className="w-full flex flex-col lg:flex-row justify-between items-center p-5">
+                <div>
+                    <h2 className="scroll-m-20 text-xl font-semibold tracking-tight first:mt-0">
+                        Update Password
+                    </h2>
+                    <p className="leading-7 [&:not(:first-child)]:mt-0 text-sm">
+                        Change your old password with a new one.
+                    </p>
+                </div>
+                <ChangePassword />
+            </div>
+
+            <div className="w-full flex flex-col lg:flex-row justify-between items-center p-5">
+                <div>
+                    <h2 className="scroll-m-20 text-xl font-semibold tracking-tight first:mt-0">
+                        Delete Account
+                    </h2>
+                    <p className="leading-7 [&:not(:first-child)]:mt-0 text-sm">
+                        Permanently delete your account from flag0ut.
+                    </p>
+                </div>
+                <DeleteAccount />
+            </div>
+        </section>
+    );
+};
+
+export default DangerZone;
diff --git a/src/components/application/profile/danger-zone/change-password.tsx b/src/components/application/profile/danger-zone/change-password.tsx
new file mode 100644
index 0000000..735ffd7
--- /dev/null
+++ b/src/components/application/profile/danger-zone/change-password.tsx
@@ -0,0 +1,195 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { showError, showSuccess } from "@/lib/sonner";
+import { useUser } from "@clerk/nextjs";
+import { useReverification } from "@clerk/nextjs";
+import { reverifyUser } from "@/app/actions/revalidate-user.action";
+import { Eye, EyeClosed, Loader2 } from "lucide-react";
+import { useState } from "react";
+
+const ChangePassword = () => {
+    const [passwords, setPasswords] = useState({
+        // oldPassword: "",
+        newPassword: "",
+    });
+    const [showPassword, setShowPassword] = useState({
+        // showOldPass: false,
+        showNewPass: false,
+    });
+    const [loader, setLoader] = useState(false);
+
+    const { isLoaded, user } = useUser();
+
+    // This is still in public BETA fallback
+    const performAction = useReverification(reverifyUser);
+
+    if (!isLoaded) {
+        return <Loader2 className="animate-spin" />;
+    }
+
+    const handleChangePassword = async () => {
+        setLoader(true);
+        try {
+            const res = await performAction();
+            if (!res.success) {
+                showError("Verification Failed!");
+                return;
+            }
+
+            await user?.updatePassword({
+                newPassword: passwords.newPassword,
+                // currentPassword: passwords.oldPassword,
+                signOutOfOtherSessions: false,
+            });
+            showSuccess("Password updated");
+        } catch (error) {
+            if (error instanceof Error) {
+                showError(error.message as string);
+            }
+        } finally {
+            setLoader(false);
+        }
+    };
+
+    return (
+        <Dialog>
+            <form>
+                <DialogTrigger asChild>
+                    <Button className="min-w-44 cursor-pointer ml-auto lg:ml-0 lg:mt-0">
+                        {user?.passwordEnabled
+                            ? "Change Password"
+                            : "Add Password"}
+                    </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[425px]">
+                    <DialogHeader>
+                        <DialogTitle>
+                            {user?.passwordEnabled ? "Update" : "Add"} your
+                            password
+                        </DialogTitle>
+                        <DialogDescription>
+                            {user?.passwordEnabled
+                                ? "Change your password to a new one."
+                                : "Add a password to your account"}
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="grid gap-4">
+                        {/* <div className="grid gap-3 relative">
+                            <Label htmlFor="old--password">Old Password</Label>
+                            <Input
+                                id="old--password"
+                                value={passwords.oldPassword}
+                                onChange={(e) =>
+                                    setPasswords((prev) => ({
+                                        ...prev,
+                                        oldPassword: e.target.value,
+                                    }))
+                                }
+                                type={
+                                    showPassword.showOldPass
+                                        ? "text"
+                                        : "password"
+                                }
+                            />
+                            <button
+                                onClick={() =>
+                                    setShowPassword((prev) => ({
+                                        ...prev,
+                                        showOldPass: !prev.showOldPass,
+                                    }))
+                                }
+                                className="absolute right-2 top-[55%]"
+                            >
+                                {showPassword.showOldPass ? (
+                                    <Eye
+                                        className="cursor-pointer"
+                                        color="gray"
+                                        size={20}
+                                    />
+                                ) : (
+                                    <EyeClosed
+                                        className="cursor-pointer"
+                                        color="gray"
+                                        size={20}
+                                    />
+                                )}
+                            </button>
+                        </div> */}
+                        <div className="grid gap-3 relative">
+                            <Label htmlFor="new--password">New Password</Label>
+                            <Input
+                                id="new--password"
+                                value={passwords.newPassword}
+                                onChange={(e) =>
+                                    setPasswords((prev) => ({
+                                        ...prev,
+                                        newPassword: e.target.value,
+                                    }))
+                                }
+                                type={
+                                    showPassword.showNewPass
+                                        ? "text"
+                                        : "password"
+                                }
+                            />
+                            <button
+                                onClick={() =>
+                                    setShowPassword((prev) => ({
+                                        ...prev,
+                                        showNewPass: !prev.showNewPass,
+                                    }))
+                                }
+                                className="absolute right-2 top-[55%]"
+                            >
+                                {showPassword.showNewPass ? (
+                                    <Eye
+                                        className="cursor-pointer"
+                                        color="gray"
+                                        size={20}
+                                    />
+                                ) : (
+                                    <EyeClosed
+                                        className="cursor-pointer"
+                                        color="gray"
+                                        size={20}
+                                    />
+                                )}
+                            </button>
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <DialogClose asChild>
+                            <Button variant="outline">Cancel</Button>
+                        </DialogClose>
+                        <Button
+                            type="submit"
+                            onClick={handleChangePassword}
+                            className="cursor-pointer"
+                            disabled={loader}
+                        >
+                            {loader ? (
+                                <Loader2 className="animate-spin" />
+                            ) : (
+                                "Save changes"
+                            )}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </form>
+        </Dialog>
+    );
+};
+
+export default ChangePassword;
diff --git a/src/components/application/profile/danger-zone/delete-account.tsx b/src/components/application/profile/danger-zone/delete-account.tsx
new file mode 100644
index 0000000..676f545
--- /dev/null
+++ b/src/components/application/profile/danger-zone/delete-account.tsx
@@ -0,0 +1,102 @@
+"use client";
+import { reverifyUser } from "@/app/actions/revalidate-user.action";
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+import { showError, showSuccess } from "@/lib/sonner";
+import { useReverification, useUser } from "@clerk/nextjs";
+import { Loader2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+const DeleteAccount = () => {
+    const [loading, setLoading] = useState(false);
+
+    const { isLoaded, user } = useUser();
+    const router = useRouter();
+    const performAction = useReverification(reverifyUser);
+
+    if (!isLoaded) {
+        return <Loader2 className="animate-spin" />;
+    }
+
+    const handleAccountDelete = async () => {
+        setLoading(true);
+        try {
+            const res = await performAction();
+            if (!res.success) {
+                showError("Verification Failed!");
+                return;
+            }
+            await user?.delete();
+            showSuccess("Account Deleted");
+            router.replace("/");
+        } catch (error) {
+            if (error instanceof Error) {
+                showError(error.message);
+            }
+        } finally {
+            setLoading(false);
+        }
+    };
+    return (
+        <Dialog>
+            <form>
+                <DialogTrigger asChild>
+                    <Button
+                        variant={"destructive"}
+                        className="min-w-44 cursor-pointer ml-auto lg:ml-0 mt-4 lg:mt-0"
+                    >
+                        Delete Account
+                    </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[425px]">
+                    <DialogHeader>
+                        <DialogTitle>Delete your account</DialogTitle>
+                        <DialogDescription>
+                            Are you absolutely sure? All data will be lost.
+                        </DialogDescription>
+                    </DialogHeader>
+                    {/* <div className="grid gap-4">
+                        <div className="grid gap-3">
+                            <Label htmlFor="name-1">Name</Label>
+                            <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
+                        </div>
+                        <div className="grid gap-3">
+                            <Label htmlFor="username-1">Username</Label>
+                            <Input id="username-1" name="username" defaultValue="@peduarte" />
+                        </div>
+                    </div> */}
+                    <DialogFooter>
+                        <DialogClose asChild>
+                            <Button variant="outline">Cancel</Button>
+                        </DialogClose>
+                        <Button
+                            type="submit"
+                            variant={"destructive"}
+                            className="cursor-pointer"
+                            disabled={loading}
+                            onClick={handleAccountDelete}
+                        >
+                            {loading ? (
+                                <Loader2 className="animate-spin" />
+                            ) : (
+                                "Delete account"
+                            )}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </form>
+        </Dialog>
+    );
+};
+
+export default DeleteAccount;
diff --git a/src/components/application/profile/details.tsx b/src/components/application/profile/details.tsx
new file mode 100644
index 0000000..7bff4fb
--- /dev/null
+++ b/src/components/application/profile/details.tsx
@@ -0,0 +1,37 @@
+import { currentUser } from "@clerk/nextjs/server";
+import Image from "next/image";
+import React from "react";
+import Metrics from "./metrics";
+
+const ProfileDetails = async () => {
+    const user = await currentUser();
+
+    return (
+        <section className="w-full bg-primary-foreground flex flex-col justify-center items-center gap-4 relative rounded-lg">
+            <div className="absolute -top-15 left-1/2 -translate-x-1/2 bg-background p-4 rounded-full">
+                <Image
+                    src={user?.imageUrl ?? "/profile_fallback.png"}
+                    alt={`${user?.firstName}'s profile picture`}
+                    width={120}
+                    height={120}
+                    className="rounded-full"
+                />
+            </div>
+
+            <div className="mt-25">
+                <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-center">
+                    {user?.fullName}
+                </h2>
+                <blockquote className="mt-2 border-l-2 pl-6 italic">
+                    {user?.primaryEmailAddress?.emailAddress}
+                </blockquote>
+            </div>
+
+            <div className="w-full p-5">
+                <Metrics />
+            </div>
+        </section>
+    );
+};
+
+export default ProfileDetails;
diff --git a/src/components/application/profile/metrics.tsx b/src/components/application/profile/metrics.tsx
new file mode 100644
index 0000000..0294491
--- /dev/null
+++ b/src/components/application/profile/metrics.tsx
@@ -0,0 +1,38 @@
+"use client";
+import { useGetMetrics } from "@/lib/tanstack/hooks/metrics";
+import { ChartBarIncreasing, Loader2 } from "lucide-react";
+import React from "react";
+import MetricCard from "../workplace/metric-cards";
+import EmptyState from "../emtpy-state";
+
+const Metrics = () => {
+    const { data: metrics, isLoading: metricsLoading } = useGetMetrics();
+
+    return (
+        <div className="w-full hidden lg:flex flex-col lg:flex-row justify-between items-center gap-2">
+            {metricsLoading ? (
+                <Loader2 className="animate-spin" />
+            ) : metrics ? (
+                Object.entries(metrics.data).map(([key, data]) => (
+                    <MetricCard
+                        key={key}
+                        // name={"Name"}
+                        name={key
+                            .replace(/([A-Z])/g, " $1")
+                            .replace(/^./, (str) => str.toUpperCase())}
+                        value={data.value}
+                        growth={data.change}
+                    />
+                ))
+            ) : (
+                <EmptyState
+                    icon={<ChartBarIncreasing />}
+                    title="No metrics yet"
+                    description="Not enough data to generate metrics"
+                />
+            )}
+        </div>
+    );
+};
+
+export default Metrics;
diff --git a/src/middleware.ts b/src/middleware.ts
index aa3cdf6..d194419 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -4,6 +4,7 @@ import { NextRequest, NextResponse } from "next/server";
 const isPublicRoute = createRouteMatcher([
     "/login(.*)",
     "/register(.*)",
+    "/reset-password(.*)",
     "/",
     "/oauth-callback(.*)",
     "/api/v1/flags/evaluate",