diff --git a/apps/web/app/account/[id]/page.tsx b/apps/web/app/account/[id]/page.tsx
new file mode 100644
index 00000000..1bcaca4b
--- /dev/null
+++ b/apps/web/app/account/[id]/page.tsx
@@ -0,0 +1,4 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params)
+    return <div>From /: {params.id}</div>
+}
\ No newline at end of file
diff --git a/apps/web/app/account/[id]/privatekey/page.tsx b/apps/web/app/account/[id]/privatekey/page.tsx
new file mode 100644
index 00000000..dcad1b3c
--- /dev/null
+++ b/apps/web/app/account/[id]/privatekey/page.tsx
@@ -0,0 +1,5 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params);
+    //TODO: FETCH THE TXN DATA FOR THIS FOR THIS ACCOUNT
+    return <div>From Private key: {params.id}</div>
+}
\ No newline at end of file
diff --git a/apps/web/app/account/[id]/remove/page.tsx b/apps/web/app/account/[id]/remove/page.tsx
new file mode 100644
index 00000000..920d1625
--- /dev/null
+++ b/apps/web/app/account/[id]/remove/page.tsx
@@ -0,0 +1,5 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params);
+    //TODO: FETCH THE TXN DATA FOR THIS FOR THIS ACCOUNT
+    return <div>From remove account: {params.id}</div>
+}
\ No newline at end of file
diff --git a/apps/web/app/account/[id]/secretPhrase/page.tsx b/apps/web/app/account/[id]/secretPhrase/page.tsx
new file mode 100644
index 00000000..5ad51847
--- /dev/null
+++ b/apps/web/app/account/[id]/secretPhrase/page.tsx
@@ -0,0 +1,5 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params);
+    //TODO: FETCH THE TXN DATA FOR THIS FOR THIS ACCOUNT
+    return <div>From secret phrase: {params.id}</div>
+}
\ No newline at end of file
diff --git a/apps/web/app/account/[id]/statements/page.tsx b/apps/web/app/account/[id]/statements/page.tsx
new file mode 100644
index 00000000..2512fc71
--- /dev/null
+++ b/apps/web/app/account/[id]/statements/page.tsx
@@ -0,0 +1,5 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params);
+    //TODO: FETCH THE TXN DATA FOR THIS FOR THIS ACCOUNT
+    return <div>From statements: {params.id}</div>
+}
\ No newline at end of file
diff --git a/apps/web/app/account/[id]/update/page.tsx b/apps/web/app/account/[id]/update/page.tsx
new file mode 100644
index 00000000..02d80fe1
--- /dev/null
+++ b/apps/web/app/account/[id]/update/page.tsx
@@ -0,0 +1,4 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params)
+    return <div>My Post: {params.id}</div>
+}
\ No newline at end of file
diff --git a/apps/web/app/account/components/accountLayout.tsx b/apps/web/app/account/components/accountLayout.tsx
index b7d40ae9..e2eed74e 100644
--- a/apps/web/app/account/components/accountLayout.tsx
+++ b/apps/web/app/account/components/accountLayout.tsx
@@ -8,13 +8,14 @@ import {
     ResizablePanelGroup,
 } from "@/components/ui/resizable";
 import { cn } from "@/lib/utils";
-import { Archive, ArchiveX, Inbox, Send, Trash2, File, Wallet } from "lucide-react";
-import { LinksProps, Sidenav } from "./sidebar";
+
+import { LinksProps, Sidenav } from "@/app/account/components/sidebar";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Separator } from "@/components/ui/separator";
 import { AccountSwitcher } from "@/app/account/components/account-switcher";
 import { AccountType } from "@paybox/common";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { commonNavLinks, getNavLinks } from "./navLinks";
 
 interface AccountLayoutProps {
     defaultLayout: number[] | undefined;
@@ -24,50 +25,7 @@ interface AccountLayoutProps {
     accounts: AccountType[]
 }
 
-const sidenavLinks = [
-    {
-        title: "Inbox",
-        label: "128",
-        icon: Inbox,
-        variant: "default",
-        link: "/account/create",
-    },
-    {
-        title: "Drafts",
-        label: "9",
-        icon: File,
-        variant: "ghost",
-        link: "/account/create",
-    },
-    {
-        title: "Sent",
-        label: "",
-        icon: Send,
-        variant: "ghost",
-        link: "/account/create",
-    },
-    {
-        title: "Junk",
-        label: "23",
-        icon: ArchiveX,
-        variant: "ghost",
-        link: "/account/create",
-    },
-    {
-        title: "Trash",
-        label: "",
-        icon: Trash2,
-        variant: "ghost",
-        link: "/account/create",
-    },
-    {
-        title: "Archive",
-        label: "",
-        icon: Archive,
-        variant: "ghost",
-        link: "/account/create",
-    },
-]
+
 
 export function AccountLayout({
     defaultLayout = [100, 480],
@@ -83,7 +41,9 @@ export function AccountLayout({
         accounts[0].id
     );
 
+    const path = usePathname()
     const router = useRouter();
+    const [selectedTab, setSelectedTab] = React.useState<string>(path.split('/')[path.split('/').length - 1]);
 
     useEffect(() => {
         const checkScreenWidth = () => {
@@ -100,8 +60,20 @@ export function AccountLayout({
     }, []);
 
     useEffect(() => {
-        router.push(`/account?id=${selectedAccount}`);
-    }, [selectedAccount]);
+        setSelectedTab(path.split("/")[3] || "dashboard")
+        router.push(`/account/${selectedAccount}/${path.split("/")[3] || ""}`)
+    }, [selectedAccount])
+
+    useEffect(() => {
+        if (path.split("/").length === 2) {
+            setSelectedTab(path.split("/")[2] || "");
+            router.push(path)
+        }
+        if (path.split("/").length === 3) {
+            setSelectedTab(path.split("/")[3] || "dashboard");
+            router.push(path)
+        }
+    }, [path]);
 
     return (
         <TooltipProvider delayDuration={0}>
@@ -127,8 +99,8 @@ export function AccountLayout({
                     defaultSize={defaultLayout[0]}
                     collapsedSize={navCollapsedSize}
                     collapsible={true}
-                    minSize={isMobile ? 0 : 14}
-                    maxSize={isMobile ? 14 : 20}
+                    minSize={isMobile ? 0 : 18}
+                    maxSize={isMobile ? 18 : 25}
                     onCollapse={() => {
                         setIsCollapsed(true);
                         document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(
@@ -161,12 +133,16 @@ export function AccountLayout({
                     <Separator />
                     <Sidenav
                         isCollapsed={isCollapsed}
-                        links={sidenavLinks as LinksProps[]}
+                        links={getNavLinks(selectedAccount) as LinksProps[]}
+                        selectedTab={selectedTab}
+                        setSelectedTab={setSelectedTab}
                     />
                     <Separator />
                     <Sidenav
                         isCollapsed={isCollapsed}
-                        links={sidenavLinks as LinksProps[]}
+                        links={commonNavLinks as LinksProps[]}
+                        selectedTab={selectedTab}
+                        setSelectedTab={setSelectedTab}
                     />
                 </ResizablePanel>
                 <ResizableHandle withHandle />
diff --git a/apps/web/app/account/components/navLinks.tsx b/apps/web/app/account/components/navLinks.tsx
new file mode 100644
index 00000000..3fc50a22
--- /dev/null
+++ b/apps/web/app/account/components/navLinks.tsx
@@ -0,0 +1,107 @@
+
+import {
+    Archive,
+    ArchiveX,
+    Inbox,
+    Send,
+    Trash2,
+    File,
+    Wallet,
+    LayoutDashboard,
+    Lock,
+    VenetianMask,
+    Bitcoin,
+    PencilLine,
+    FilePlus,
+    FilePlus2Icon,
+    GanttChart
+} from "lucide-react";
+
+export const commonNavLinks = [
+    {
+        id: "",
+        title: "Manage Accounts",
+        label: "",
+        icon: GanttChart,
+        variant: "ghost",
+        link: "/account",
+    },
+    {
+        id: "create",
+        title: "Create Account",
+        label: "128",
+        icon: FilePlus2Icon,
+        variant: "ghost",
+        link: "/account/create",
+    },
+    {
+        id: "importSecretPhrase",
+        title: "Import Secret Recovery",
+        label: "9",
+        icon: FilePlus,
+        variant: "ghost",
+        link: "/account/importSecretPhrase",
+    },
+    {
+        id: "importPrivate",
+        title: "Import From Private-Key",
+        label: "",
+        icon: Lock,
+        variant: "ghost",
+        link: "importPrivate",
+    },
+
+]
+
+export const getNavLinks = (id: string) => {
+    return [
+        {
+            id: "dashboard",
+            title: "Dashboard",
+            label: "128",
+            icon: LayoutDashboard,
+            variant: "ghost",
+            link: `/account/${id}/#`,
+        },
+        {
+            id: "statements",
+            title: "Statements",
+            label: "9",
+            icon: Bitcoin,
+            variant: "ghost",
+            link: `/account/${id}/statements`,
+        },
+        {
+            id: "privatekey",
+            title: "Private-Key",
+            label: "",
+            icon: Lock,
+            variant: "ghost",
+            link: `/account/${id}/privatekey`,
+        },
+        {
+            id: "secretPhrase",
+            title: "Secret",
+            label: "23",
+            icon: VenetianMask,
+            variant: "ghost",
+            link: `/account/${id}/secretPhrase`,
+        },
+        {
+            id: "update",
+            title: "Update",
+            label: "",
+            icon: PencilLine,
+            variant: "ghost",
+            link: `/account/${id}/update`,
+        },
+        {
+            id: "remove",
+            title: "Remove",
+            label: "",
+            icon: Trash2,
+            variant: "ghost",
+            link: `/account/${id}/remove`,
+        },
+    ]
+}
\ No newline at end of file
diff --git a/apps/web/app/account/components/sidebar.tsx b/apps/web/app/account/components/sidebar.tsx
index e71e4635..b4262532 100644
--- a/apps/web/app/account/components/sidebar.tsx
+++ b/apps/web/app/account/components/sidebar.tsx
@@ -10,8 +10,12 @@ import {
     TooltipContent,
     TooltipTrigger,
 } from "@/components/ui/tooltip"
+import React, { use } from "react"
+import { usePathname, useSearchParams, useParams } from 'next/navigation'
+
 
 export interface LinksProps {
+    id: string
     title: string
     label?: string
     icon: LucideIcon
@@ -22,9 +26,11 @@ export interface LinksProps {
 interface NavProps {
     isCollapsed: boolean
     links: LinksProps[]
+    selectedTab: string
+    setSelectedTab: (tab: string) => void
 }
 
-export function Sidenav({ links, isCollapsed }: NavProps) {
+export function Sidenav({ links, isCollapsed, selectedTab, setSelectedTab }: NavProps) {
     return (
         <div
             data-collapsed={isCollapsed}
@@ -36,11 +42,12 @@ export function Sidenav({ links, isCollapsed }: NavProps) {
                         <Tooltip key={index} delayDuration={0}>
                             <TooltipTrigger asChild>
                                 <Link
-                                    href={link.link}
+                                    href={`${link.link}`}
+                                    onClick={() => setSelectedTab(link.id)}
                                     className={cn(
                                         buttonVariants({ variant: link.variant, size: "icon" }),
                                         "h-10 w-10",
-                                        link.variant === "default" &&
+                                        link.id === selectedTab &&
                                         "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white "
                                     )}
                                 >
@@ -61,9 +68,10 @@ export function Sidenav({ links, isCollapsed }: NavProps) {
                         <Link
                             key={index}
                             href={link.link}
+                            onClick={() => setSelectedTab(link.id)}
                             className={cn(
                                 buttonVariants({ variant: link.variant, size: "sm" }),
-                                link.variant === "default" &&
+                                link.id === selectedTab &&
                                 "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white",
                                 "justify-start",
                                 "h-10 flex gap-x-2"
diff --git a/apps/web/app/account/importPrivate/page.tsx b/apps/web/app/account/importPrivate/page.tsx
new file mode 100644
index 00000000..9e8f64f1
--- /dev/null
+++ b/apps/web/app/account/importPrivate/page.tsx
@@ -0,0 +1,4 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params)
+    return <div>From import Private: {params.id}</div>
+}
\ No newline at end of file
diff --git a/apps/web/app/account/importSecretPhrase/page.tsx b/apps/web/app/account/importSecretPhrase/page.tsx
new file mode 100644
index 00000000..fd457967
--- /dev/null
+++ b/apps/web/app/account/importSecretPhrase/page.tsx
@@ -0,0 +1,4 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params)
+    return <div>From Import Secret: {params.id}</div>
+}
\ No newline at end of file
diff --git a/apps/web/app/account/layout.tsx b/apps/web/app/account/layout.tsx
index e844aa20..433bb715 100644
--- a/apps/web/app/account/layout.tsx
+++ b/apps/web/app/account/layout.tsx
@@ -37,7 +37,9 @@ const getAccounts = async (jwt: string): Promise<AccountType[] | null> => {
   }
 }
 
-export default async function AccountMainLayout({ children }: AccountLayoutProps) {
+export default async function AccountMainLayout({
+  children,
+}: AccountLayoutProps) {
   const layout = cookies().get("react-resizable-panels:layout");
   const defaultLayout = layout ? JSON.parse(layout.value) : undefined;
 
@@ -48,7 +50,6 @@ export default async function AccountMainLayout({ children }: AccountLayoutProps
 
   //@ts-ignore
   const accounts = await getAccounts(session.user.jwt);
- 
 
   return (
     <>
diff --git a/apps/web/app/account/page.tsx b/apps/web/app/account/page.tsx
index 60daa615..02d80fe1 100644
--- a/apps/web/app/account/page.tsx
+++ b/apps/web/app/account/page.tsx
@@ -1,49 +1,4 @@
-import { Separator } from "@/components/ui/separator";
-import { getServerSession } from "next-auth";
-import { redirect } from "next/navigation";
-import { authOptions } from "@/app/api/auth/[...nextauth]/util";
-import { AccountType, BACKEND_URL, ClientWithJwt, responseStatus } from "@paybox/common";
-
-const getAccounts = async (jwt: string): Promise<AccountType[] | null> => {
-    try {
-        const { status, accounts }: { status: responseStatus, accounts: AccountType[] } = await fetch(`${BACKEND_URL}/account/all`, {
-            method: "get",
-            headers: {
-                "Content-type": "application/json",
-                authorization: `Bearer ${jwt}`,
-            },
-            cache: "no-cache"
-        }).then(res => res.json());
-        if (status == responseStatus.Error) {
-            return null
-        }
-        return accounts
-    } catch (error) {
-        console.log(error);
-        return null
-    }
-}
-
-export default async function AccountPage() {
-    const session = await getServerSession(authOptions);
-    if (!session || !session.user || !session.user?.email) {
-        redirect("/signup");
-    }
-
-    //@ts-ignore
-    const accounts = await getAccounts(session.user.jwt);
-    return (
-        <div className="space-y-6">
-            <div>
-                <h3 className="text-lg font-medium">Profile</h3>
-                <p className="text-sm text-muted-foreground">
-                    This is how others will see you on the site. Fuck ou
-                </p>
-            </div>
-            {/* {accounts &&
-             <AccountNav accounts={accounts}/>    
-            } */}
-            <Separator />
-        </div>
-    );
-}
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params)
+    return <div>My Post: {params.id}</div>
+}
\ No newline at end of file
diff --git a/apps/web/app/signup/components/otp.tsx b/apps/web/app/signup/components/otp.tsx
index 56ac7b6e..39bab03f 100644
--- a/apps/web/app/signup/components/otp.tsx
+++ b/apps/web/app/signup/components/otp.tsx
@@ -41,13 +41,13 @@ export function OTPForm() {
     const onSubmit = async (data: z.infer<typeof OtpValid>) => {
         toast.promise(
             fetch(`${BACKEND_URL}/client/valid?otp=${data.otp}`, {
-            method: "PATCH",
-            headers: {
-                "Content-Type": "application/json",
-                //@ts-ignore
-                "Authorization": `Bearer ${session.data?.user?.jwt}`
-            },
-        }).then((res) => res.json()), {
+                method: "PATCH",
+                headers: {
+                    "Content-Type": "application/json",
+                    //@ts-ignore
+                    "Authorization": `Bearer ${session.data?.user?.jwt}`
+                },
+            }).then((res) => res.json()), {
             loading: "Validating OTP",
             success: async ({ status, msg, valid, walletId, account }) => {
                 // TODO: Add the walletId to the session
@@ -58,7 +58,7 @@ export function OTPForm() {
                 }
                 return msg;
             },
-            error: ({status, msg}) => {
+            error: ({ status, msg }) => {
                 return msg;
             }
         });
@@ -74,6 +74,7 @@ export function OTPForm() {
                         <FormItem>
                             <FormControl>
                                 <InputOTP
+                                    autoFocus={true}
                                     maxLength={6}
                                     render={({ slots }) => (
                                         <InputOTPGroup className="gap-2">