diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
new file mode 100644
index 0000000..1f50d2a
--- /dev/null
+++ b/src/components/navigation.tsx
@@ -0,0 +1,61 @@
+import {
+  GoHome,
+  GoHomeFill,
+  GoCheckCircle,
+  GoCheckCircleFill,
+} from "react-icons/go";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { SettingsIcon, UsersIcon } from "lucide-react";
+
+const routes = [
+  {
+    label: "Home",
+    href: "",
+    icon: GoHome,
+    activeIcon: GoHomeFill,
+  },
+  {
+    label: "My Tasks",
+    href: "/tasks",
+    icon: GoCheckCircle,
+    activeIcon: GoCheckCircleFill,
+  },
+  {
+    label: "Settings",
+    href: "/settings",
+    icon: SettingsIcon,
+    activeIcon: SettingsIcon,
+  },
+  {
+    label: "Members",
+    href: "/members",
+    icon: UsersIcon,
+    activeIcon: UsersIcon,
+  },
+];
+
+export const Navigation = () => {
+  return (
+    <ul className="flex flex-col">
+      {routes.map((item) => {
+        const isActive = false;
+        const Icon = isActive ? item.activeIcon : item.icon;
+
+        return (
+          <Link key={item.href} href={item.href}>
+            <div
+              className={cn(
+                "flex items-center gap-2.5 p-2.5 rounded-md font-medium hover:text-primary transition",
+                isActive && "shadow-sm hover:opacity-100 text-primary"
+              )}
+            >
+              <Icon className="size-5" />
+              {item.label}
+            </div>
+          </Link>
+        );
+      })}
+    </ul>
+  );
+};