diff --git a/app/(main)/(routes)/servers/[serverId]/page.tsx b/app/(main)/(routes)/servers/[serverId]/page.tsx
new file mode 100644
index 0000000..6f2c090
--- /dev/null
+++ b/app/(main)/(routes)/servers/[serverId]/page.tsx
@@ -0,0 +1,8 @@
+const ServerIdPage = () => {
+    return (
+        <div>
+            Server ID Page
+        </div>
+    );
+}
+export default ServerIdPage;
\ No newline at end of file
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
new file mode 100644
index 0000000..f0a5f77
--- /dev/null
+++ b/app/(main)/layout.tsx
@@ -0,0 +1,20 @@
+import { NavigationSidebar } from "@/components/navigation/navigation-sidebar";
+
+const MainLayout = async ({
+    children
+}: {
+    children: React.ReactNode;
+}) => {
+    return (
+        <div className="h-full">
+            <div className="hidden md:flex h-full w-[72px] z-30 flex-col fixed inset-y-0">
+                <NavigationSidebar/>
+            </div>
+            <main className="md:pl-[72px] h-full">
+                {children}
+            </main>
+        </div>
+    );
+}
+
+export default MainLayout;
\ No newline at end of file
diff --git a/components/navigation/navigation-action.tsx b/components/navigation/navigation-action.tsx
new file mode 100644
index 0000000..49075f8
--- /dev/null
+++ b/components/navigation/navigation-action.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { Plus } from "lucide-react"
+
+import { ActionTooltip } from "@/components/action-tooltip"
+
+export const NavigationAction = () => {
+    return (
+        <div>
+            <ActionTooltip
+                side="right"
+                align="center"
+                label="Add a server"
+            >
+                <button
+                    className="group flex items-center"
+                >
+                    <div className="flex mx-3 h-[48px] w-[48px] rounded-[24px] group-hover:rounded-[16px] transition-all overflow-hidding items-center justify-center bg-background dark:bg-neutral-700 group-hover:bg-emerald-500">
+                        <Plus
+                            className="group-hover:text-white transition text-emerald-500"
+                            size={25}
+                        />
+                    </div>
+                </button>
+            </ActionTooltip>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/navigation/navigation-item.tsx b/components/navigation/navigation-item.tsx
new file mode 100644
index 0000000..50e2965
--- /dev/null
+++ b/components/navigation/navigation-item.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import Image from "next/image"
+import { useParams, useRouter } from "next/navigation"
+
+import { cn } from "@/lib/utils"
+import { ActionTooltip } from "@/components/action-tooltip"
+
+interface NavigationItemProps {
+    id: string;
+    imageUrl: string;
+    name: string;
+};
+
+export const NavigationItem = ({
+    id,
+    imageUrl,
+    name
+}: NavigationItemProps) => {
+    const params = useParams();
+    const router = useRouter();
+    
+    const onClick = () => {
+        router.push(`/servers/${id}`);
+    }
+    return (
+        <ActionTooltip 
+            side="right"
+            align="center"
+            label={name}
+        >
+            <button
+                onClick={onClick}
+                className="group relative flex items-center"
+            >
+                <div className={cn(
+                    "absolute left-0 bg-primary rounded-r-full transition-all w-[4px]",
+                    params?.serverId === id && "group-hover:h-[20px]",
+                    params?.serverId === id ? "h-[36px]" : "h-[8px]"
+                )}/>
+                <div className={cn(
+                    "relative group flex mx-3 h-[48px] w-[48px] rounded-[24px] group-hover:rounded-[16px] transition-all overflow-hidden",
+                    params?.serverId === id && "bg-primary/10 text-primary rounded-[16px]"
+                )}>
+                    <Image
+                        fill
+                        src={imageUrl}   
+                        alt="Channel"                     
+                    />
+                </div>
+            </button>
+        </ActionTooltip>
+    )
+}
diff --git a/components/navigation/navigation-sidebar.tsx b/components/navigation/navigation-sidebar.tsx
new file mode 100644
index 0000000..f2bee6d
--- /dev/null
+++ b/components/navigation/navigation-sidebar.tsx
@@ -0,0 +1,62 @@
+import { redirect } from "next/navigation";
+
+import { ModeToggle } from "@/components/mode-toggle";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { currentProfile } from "@/lib/current-profile";
+import { db } from "@/lib/db";
+
+import { NavigationAction } from "./navigation-action";
+import { NavigationItem } from "./navigation-item";
+import { UserButton } from "@clerk/nextjs";
+
+
+export const NavigationSidebar = async () => {
+    const profile = await currentProfile();
+
+    if (!profile) {
+        return redirect("/");
+    }
+
+    const servers = await db.server.findMany({
+        where: {
+            members: {
+                some: {
+                    profileId: profile.id,
+                },
+            },
+        },
+    })
+
+    return (
+        <div className="space-y-4 flex flex-col items-center h-full text-primary w-full dark:bg-[#1E1F22] py-3"
+        >
+            <NavigationAction/>
+            <Separator
+                className="h-[2px] bg-zinc-300 dark:bg-zinc-700 rounded-md w-10 mx-auto"
+            />
+            <ScrollArea className="flex-1 w-full">
+                {servers.map((server) => (
+                    <div key={server.id} className="mb-4">   
+                    <NavigationItem
+                        id={server.id}
+                        name={server.name}
+                        imageUrl={server.imageUrl}
+                    />
+                    </div>
+                ))}
+            </ScrollArea>
+            <div className="pb-3 mt-auto flex items-center flex-col gap-y-4">
+                <ModeToggle/>
+                <UserButton 
+                    afterSignOutUrl="/"
+                    appearance={{
+                        elements: {
+                            avatarBox: "h-[48px] w-[48px]"
+                        }
+                    }}
+                />
+            </div>
+        </div>
+    )
+}
\ No newline at end of file