diff --git a/bun.lockb b/bun.lockb
index 2f631d96..0ff79246 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/web/app/components/sidebar/partials/link-collection.tsx b/web/app/components/sidebar/partials/link-collection.tsx
index 6cbd591a..06c4b432 100644
--- a/web/app/components/sidebar/partials/link-collection.tsx
+++ b/web/app/components/sidebar/partials/link-collection.tsx
@@ -10,11 +10,13 @@ export const LinkCollection: React.FC = () => {
       topicsWantToLearn: [],
       topicsLearning: [],
       topicsLearned: [],
+      tasks: [],
     },
   })
 
   const linkCount = me?.root.personalLinks?.length || 0
   const pageCount = me?.root.personalPages?.length || 0
+  const taskCount = me?.root.tasks?.length || 0
 
   const topicCount =
     (me?.root.topicsWantToLearn?.length || 0) +
@@ -26,6 +28,12 @@ export const LinkCollection: React.FC = () => {
       <NavItem to="/links" title="Links" icon="Link" count={linkCount} />
       <NavItem to="/topics" title="Topics" icon="Hash" count={topicCount} />
       <NavItem to="/pages" title="Pages" icon="Layers" count={pageCount} />
+      <NavItem
+        to="/tasks"
+        title="Tasks"
+        icon="BookOpenCheck"
+        count={taskCount}
+      />
     </div>
   )
 }
diff --git a/web/app/components/sidebar/partials/link-section.tsx b/web/app/components/sidebar/partials/link-section.tsx
index 0443f6ff..ee1be385 100644
--- a/web/app/components/sidebar/partials/link-section.tsx
+++ b/web/app/components/sidebar/partials/link-section.tsx
@@ -14,7 +14,7 @@ export const LinkSection: React.FC = () => {
   const linkCount = me.root.personalLinks?.length || 0
 
   return (
-    <div className="flex flex-col gap-px py-2">
+    <div className="flex flex-col gap-px">
       <LinkSectionHeader linkCount={linkCount} />
       <LinkList personalLinks={me.root.personalLinks} />
     </div>
diff --git a/web/app/components/sidebar/partials/task-section.tsx b/web/app/components/sidebar/partials/task-section.tsx
index 74be7614..81e01c7d 100644
--- a/web/app/components/sidebar/partials/task-section.tsx
+++ b/web/app/components/sidebar/partials/task-section.tsx
@@ -59,9 +59,13 @@ export const TaskSection: React.FC = () => {
   }
 
   return (
-    <div className="group/tasks flex flex-col gap-px py-2">
-      <TaskSectionHeader title="Tasks" count={taskCount} />
+    <div className="group/tasks flex flex-col gap-px">
       <TaskSectionHeader
+        title="Tasks"
+        iconName="BookOpenCheck"
+        count={taskCount}
+      />
+      {/* <TaskSectionHeader
         title="Today"
         iconName="BookOpenCheck"
         filter="today"
@@ -72,7 +76,7 @@ export const TaskSection: React.FC = () => {
         iconName="History"
         filter="upcoming"
         count={upcomingTasks.length}
-      />
+      /> */}
     </div>
   )
 }
@@ -86,25 +90,24 @@ interface TaskSectionHeaderProps {
 
 const TaskSectionHeader: React.FC<TaskSectionHeaderProps> = ({
   title,
-  filter,
   count,
   iconName,
 }) => (
   <Link
     to="/tasks"
     className={cn(
-      "flex min-h-[30px] flex-1 items-center justify-start gap-px rounded-md px-2 py-1 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0",
+      "flex min-h-[30px] flex-1 items-center justify-between gap-px rounded-md px-2 py-1 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0",
     )}
-    search={{ filter }}
     activeProps={{
       className: "bg-accent text-accent-foreground",
     }}
   >
-    {iconName && <LaIcon className="size-13 shrink-0 pr-2" name={iconName} />}
-
-    <p className="text-sm">
-      {title}
-      {count > 0 && <span className="ml-1 text-muted-foreground">{count}</span>}
-    </p>
+    <div className="flex items-center">
+      {iconName && (
+        <LaIcon className="size-13 shrink-0 pr-2 opacity-50" name={iconName} />
+      )}
+      <p className="text-sm">{title}</p>
+    </div>
+    {count > 0 && <span className="text-muted-foreground">{count}</span>}
   </Link>
 )
diff --git a/web/app/components/sidebar/sidebar.tsx b/web/app/components/sidebar/sidebar.tsx
index a520ddb1..b829eac4 100644
--- a/web/app/components/sidebar/sidebar.tsx
+++ b/web/app/components/sidebar/sidebar.tsx
@@ -129,12 +129,11 @@ const SidebarContent: React.FC = React.memo(() => {
       <div>
         <LogoAndSearch />
       </div>
-      <div className="relative mb-0.5 mt-1.5 flex grow flex-col overflow-y-auto rounded-md px-3 outline-none">
+      <div className="relative mt-1.5 flex grow flex-col overflow-y-auto rounded-md px-3 outline-none">
         <div className="h-2 shrink-0" />
         {me._type === "Account" && <LinkCollection />}
-        {/* {me._type === "Account" && <LinkSection />} */}
         {me._type === "Account" && <JournalSection />}
-        {me._type === "Account" && <TaskSection />}
+        {/* {me._type === "Account" && <TaskSection />} */}
         {me._type === "Account" && <PageSection />}
       </div>
 
diff --git a/web/app/routes/_layout/_pages/_protected/tasks/index.tsx b/web/app/routes/_layout/_pages/_protected/tasks/index.tsx
index 1b05b1fc..2f102b72 100644
--- a/web/app/routes/_layout/_pages/_protected/tasks/index.tsx
+++ b/web/app/routes/_layout/_pages/_protected/tasks/index.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router"
+import { createFileRoute, Link } from "@tanstack/react-router"
 import { useAccount } from "@/lib/providers/jazz-provider"
 import { LaIcon } from "@/components/custom/la-icon"
 import { isToday, isFuture } from "date-fns"
@@ -8,12 +8,59 @@ import { TaskForm } from "./-form"
 import { TaskList } from "./-list"
 import { Task } from "~/lib/schema/task"
 import { z } from "zod"
+import { cn } from "~/lib/utils"
 // import { getFeatureFlag } from "~/actions"
 
 const taskSearchSchema = z.object({
   filter: z.enum(["today", "upcoming"]).optional(),
 })
 
+const TaskTabs: React.FC<{ filter?: string }> = ({ filter }) => {
+  return (
+    <div className="mb-4 flex items-center justify-center gap-2">
+      <Link
+        to="/tasks"
+        className={cn(
+          "flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors",
+          filter === undefined
+            ? "bg-accent text-accent-foreground"
+            : "text-muted-foreground hover:bg-accent/50",
+        )}
+      >
+        <LaIcon name="ListTodo" className="size-4" />
+        All Tasks
+      </Link>
+      <Link
+        to="/tasks"
+        search={{ filter: "today" }}
+        className={cn(
+          "flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors",
+          filter === "today"
+            ? "bg-accent text-accent-foreground"
+            : "text-muted-foreground hover:bg-accent/50",
+        )}
+      >
+        <LaIcon name="BookOpenCheck" className="size-4" />
+        Today
+      </Link>
+
+      <Link
+        to="/tasks"
+        search={{ filter: "upcoming" }}
+        className={cn(
+          "flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors",
+          filter === "upcoming"
+            ? "bg-accent text-accent-foreground"
+            : "text-muted-foreground hover:bg-accent/50",
+        )}
+      >
+        <LaIcon name="History" className="size-4" />
+        Upcoming
+      </Link>
+    </div>
+  )
+}
+
 export const Route = createFileRoute("/_layout/_pages/_protected/tasks/")({
   // beforeLoad: async ({ context }) => {
   //   if (!context.user.id) {
@@ -66,7 +113,8 @@ function TaskComponent() {
 
   return (
     <div className="flex flex-col space-y-4 p-4">
-      <div className="flex flex-row items-center gap-1">
+      <TaskTabs filter={filter} />
+      {/* <div className="flex flex-row items-center gap-1">
         <LaIcon
           name={
             filter === "today"
@@ -84,7 +132,7 @@ function TaskComponent() {
               ? "Upcoming Tasks"
               : "All Tasks"}
         </h1>
-      </div>
+      </div> */}
       <TaskForm />
       <TaskList
         tasks={