diff --git a/apps/ui/src/components/Plan.tsx b/apps/ui/src/components/Plan.tsx
new file mode 100644
index 0000000..a4d0d86
--- /dev/null
+++ b/apps/ui/src/components/Plan.tsx
@@ -0,0 +1,44 @@
+import clsx from 'clsx'
+import React, { useState } from 'react'
+
+interface Step {
+  title: string
+  completed: boolean
+}
+
+const Plan: React.FC = () => {
+  const [steps] = useState<Step[]>([])
+
+  return (
+    <div className="flex flex-col gap-y-2 p-2 md:p-4 lg:p-6">
+      <h2 className="text-2xl font-semibold dark:text-zinc-100">Plan</h2>
+
+      {steps.length === 0 && (
+        <p className="text-gray-500 dark:text-zinc-500">
+          No plan of action ready yet.
+        </p>
+      )}
+
+      {steps.map((step, idx) => (
+        <div className="flex items-center gap-x-2" key={idx}>
+          <input
+            type="checkbox"
+            className="form-checkbox rounded text-indigo-500 focus:ring-0 focus:border-none"
+            checked={step.completed}
+            readOnly
+          />
+
+          <span
+            className={clsx('font-chat leading-loose dark:text-zinc-100', {
+              'line-through': step.completed
+            })}
+          >
+            {step.title}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default Plan
diff --git a/apps/ui/src/components/Widgets.tsx b/apps/ui/src/components/Widgets.tsx
index 4ed7f83..f487a08 100644
--- a/apps/ui/src/components/Widgets.tsx
+++ b/apps/ui/src/components/Widgets.tsx
@@ -3,6 +3,31 @@ import { Tab } from '@headlessui/react'
 import Shell from './Shell'
 import Editor from './Editor'
 import WebBrowser from './WebBrowser'
+import Plan from './Plan'
+
+interface Tab {
+  name: string
+  component: React.FC
+}
+
+const tabs: Tab[] = [
+  {
+    name: 'Shell',
+    component: Shell
+  },
+  {
+    name: 'Browser',
+    component: WebBrowser
+  },
+  {
+    name: 'Editor',
+    component: Editor
+  },
+  {
+    name: 'Planner',
+    component: Plan
+  }
+]
 
 const Widgets: React.FC = () => {
   return (
@@ -10,39 +35,32 @@ const Widgets: React.FC = () => {
       <div className="flex flex-col flex-1 p-1.5 md:p-2.5 lg:p-6 pt-0 md:pt-0 lg:pt-0">
         <Tab.Group>
           <Tab.List className="flex px-4 gap-x-2 md:gap-x-4 lg:gap-x-8">
-            <Tab className="py-1 md:py-2 lg:py-3 focus:outline-none">
-              <span className="font-medium text-sm text-zinc-700 dark:text-zinc-400 ui-selected:text-zinc-900 ui-selected:font-semibold dark:ui-selected:text-zinc-200">
-                Shell
-              </span>
-            </Tab>
-            <Tab className="py-1 md:py-2 lg:py-3 focus:outline-none">
-              <span className="font-medium text-sm text-zinc-700 dark:text-zinc-400 ui-selected:text-zinc-900 ui-selected:font-semibold dark:ui-selected:text-zinc-200">
-                Browser
-              </span>
-            </Tab>
-            <Tab className="py-1 md:py-2 lg:py-3 focus:outline-none">
-              <span className="font-medium text-sm text-zinc-700 dark:text-zinc-400 ui-selected:text-zinc-900 ui-selected:font-semibold dark:ui-selected:text-zinc-200">
-                Editor
-              </span>
-            </Tab>
-            <Tab className="py-1 md:py-2 lg:py-3 focus:outline-none">
-              <span className="font-medium text-sm text-zinc-700 dark:text-zinc-400 ui-selected:text-zinc-900 ui-selected:font-semibold dark:ui-selected:text-zinc-200">
-                Planner
-              </span>
-            </Tab>
+            {tabs.map(tab => (
+              <Tab
+                key={tab.name}
+                className="py-1 md:py-2 lg:py-3 focus:outline-none"
+              >
+                {({ selected }) => (
+                  <span className="flex items-center gap-x-1.5 font-medium text-sm text-zinc-700 dark:text-zinc-400 ui-selected:text-zinc-900 ui-selected:font-semibold dark:ui-selected:text-zinc-200">
+                    {selected && (
+                      <svg className="h-1.5 w-1.5 fill-indigo-500">
+                        <circle cx="3" cy="3" r="3" />
+                      </svg>
+                    )}
+
+                    {tab.name}
+                  </span>
+                )}
+              </Tab>
+            ))}
           </Tab.List>
 
           <Tab.Panels className="border p-1 flex-1 rounded-lg border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-900">
-            <Tab.Panel className="h-full">
-              <Shell />
-            </Tab.Panel>
-            <Tab.Panel className="h-full">
-              <WebBrowser />
-            </Tab.Panel>
-            <Tab.Panel className="h-full">
-              <Editor />
-            </Tab.Panel>
-            <Tab.Panel className="h-full"></Tab.Panel>
+            {tabs.map(tab => (
+              <Tab.Panel className="h-full" key={tab.name}>
+                <tab.component />
+              </Tab.Panel>
+            ))}
           </Tab.Panels>
         </Tab.Group>
       </div>