diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index c3165e7e..83a9988b 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -139,19 +139,35 @@ const config = {
                 label: 'Getting Started',
                 to: '/docs/intro',
               },
+              {
+                label: 'Task Management',
+                to: '/docs/td',
+              },
+              {
+                label: 'Git Workflow',
+                to: '/docs/git-plugin',
+              },
             ],
           },
           {
-            title: 'More',
+            title: 'Community',
             items: [
               {
                 label: 'GitHub',
                 href: 'https://github.com/marcus/sidecar',
               },
+              {
+                label: 'Issues',
+                href: 'https://github.com/marcus/sidecar/issues',
+              },
+              {
+                label: 'Releases',
+                href: 'https://github.com/marcus/sidecar/releases',
+              },
             ],
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} Sidecar. Built with Docusaurus.`,
+        copyright: `Copyright © ${new Date().getFullYear()} Sidecar.`,
       },
       prism: {
         theme: prismThemes.github,
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 620bdf84..c88a1f56 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -1043,3 +1043,179 @@ a:hover {
   margin: 24px auto 0;
   max-width: 60ch;
 }
+
+/* ---------- Workflow Section ---------- */
+
+.sc-workflow {
+  background: rgba(23, 26, 31, 0.3);
+  padding: 60px 0;
+  border-bottom: 1px solid var(--sc-border);
+}
+
+.sc-workflowGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 32px;
+}
+
+.sc-workflowStep {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 16px;
+  position: relative;
+  transition: transform 250ms ease;
+  cursor: default;
+}
+
+.sc-workflowStep:hover {
+  transform: translateY(-4px);
+}
+
+.sc-workflowIconBox {
+  width: 64px;
+  height: 64px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.sc-workflowIconBox::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
+  opacity: 0;
+  transition: opacity 300ms ease;
+}
+
+.sc-workflowStep:hover .sc-workflowIconBox {
+  transform: scale(1.1) rotate(2deg);
+  box-shadow: 0 12px 24px rgba(0,0,0,0.3);
+}
+
+.sc-workflowStep:hover .sc-workflowIconBox::after {
+  opacity: 1;
+}
+
+.sc-workflowIcon {
+  font-size: 28px;
+  transition: transform 300ms ease;
+}
+
+.sc-workflowStep:hover .sc-workflowIcon {
+  transform: scale(1.1);
+}
+
+.sc-workflowTitle {
+  font-size: 18px;
+  margin: 0 0 8px;
+  color: var(--ifm-font-color-base);
+  font-weight: 600;
+}
+
+.sc-workflowDesc {
+  font-size: 14px;
+  color: rgba(232, 232, 227, 0.6);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* Green Variant (Plan) */
+.sc-step-green .sc-workflowIconBox {
+  background: linear-gradient(135deg, rgba(166, 226, 46, 0.1), rgba(166, 226, 46, 0.05));
+  border: 1px solid rgba(166, 226, 46, 0.2);
+  color: #a6e22e;
+}
+.sc-step-green:hover .sc-workflowIconBox {
+  border-color: rgba(166, 226, 46, 0.5);
+  box-shadow: 0 0 20px rgba(166, 226, 46, 0.2);
+}
+
+/* Blue Variant (Act) */
+.sc-step-blue .sc-workflowIconBox {
+  background: linear-gradient(135deg, rgba(102, 217, 239, 0.1), rgba(102, 217, 239, 0.05));
+  border: 1px solid rgba(102, 217, 239, 0.2);
+  color: #66d9ef;
+}
+.sc-step-blue:hover .sc-workflowIconBox {
+  border-color: rgba(102, 217, 239, 0.5);
+  box-shadow: 0 0 20px rgba(102, 217, 239, 0.2);
+}
+
+/* Purple Variant (Monitor) */
+.sc-step-purple .sc-workflowIconBox {
+  background: linear-gradient(135deg, rgba(174, 129, 255, 0.1), rgba(174, 129, 255, 0.05));
+  border: 1px solid rgba(174, 129, 255, 0.2);
+  color: #ae81ff;
+}
+.sc-step-purple:hover .sc-workflowIconBox {
+  border-color: rgba(174, 129, 255, 0.5);
+  box-shadow: 0 0 20px rgba(174, 129, 255, 0.2);
+}
+
+/* Pink Variant (Review) */
+.sc-step-pink .sc-workflowIconBox {
+  background: linear-gradient(135deg, rgba(249, 38, 114, 0.1), rgba(249, 38, 114, 0.05));
+  border: 1px solid rgba(249, 38, 114, 0.2);
+  color: #f92672;
+}
+.sc-step-pink:hover .sc-workflowIconBox {
+  border-color: rgba(249, 38, 114, 0.5);
+  box-shadow: 0 0 20px rgba(249, 38, 114, 0.2);
+}
+
+/* Arrows between steps (desktop only) */
+@media (min-width: 996px) {
+  .sc-workflowStep:not(:last-child)::after {
+    content: "→";
+    position: absolute;
+    right: -24px;
+    top: 32px;
+    transform: translateY(-50%);
+    color: rgba(255, 255, 255, 0.1);
+    font-size: 24px;
+    font-family: var(--ifm-font-family-monospace);
+  }
+}
+
+/* ---------- Footer ---------- */
+
+.footer {
+  --ifm-footer-background-color: #0f1114;
+  --ifm-footer-color: rgba(232, 232, 227, 0.6);
+  --ifm-footer-link-color: rgba(232, 232, 227, 0.6);
+  --ifm-footer-title-color: rgba(232, 232, 227, 0.9);
+}
+
+.footer__title {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 14px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  margin-bottom: 12px;
+}
+
+.footer__link-item {
+  font-size: 13px;
+  line-height: 1.6;
+  transition: color 150ms ease;
+}
+
+.footer__link-item:hover {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.footer__copyright {
+  font-size: 12px;
+  color: rgba(232, 232, 227, 0.4);
+  margin-top: 24px;
+  font-family: var(--ifm-font-family-monospace);
+}
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 2aed4d37..05c7e200 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -642,6 +642,68 @@ function FeatureListItem({ icon, title, description, color }) {
   );
 }
 
+function WorkflowSection() {
+  return (
+    <section className="sc-workflow">
+      <div className="container">
+        <h2 className="sc-showcaseTitle" style={{ textAlign: 'center', marginBottom: '48px' }}>The Workflow</h2>
+        
+        <div className="sc-workflowGrid">
+          
+          <div className="sc-workflowStep sc-step-green">
+            <div className="sc-workflowIconBox">
+              <i className="icon-list sc-workflowIcon" />
+            </div>
+            <div>
+              <h3 className="sc-workflowTitle">1. Plan</h3>
+              <p className="sc-workflowDesc">
+                Create tasks in Sidecar to give agents clear objectives and context.
+              </p>
+            </div>
+          </div>
+
+          <div className="sc-workflowStep sc-step-blue">
+            <div className="sc-workflowIconBox">
+              <i className="icon-terminal sc-workflowIcon" />
+            </div>
+            <div>
+              <h3 className="sc-workflowTitle">2. Act</h3>
+              <p className="sc-workflowDesc">
+                Your agent (Claude, Cursor, etc.) reads the task and writes code.
+              </p>
+            </div>
+          </div>
+
+          <div className="sc-workflowStep sc-step-purple">
+            <div className="sc-workflowIconBox">
+              <i className="icon-eye sc-workflowIcon" />
+            </div>
+            <div>
+              <h3 className="sc-workflowTitle">3. Monitor</h3>
+              <p className="sc-workflowDesc">
+                Watch the agent's progress, diffs, and logs in Sidecar's TUI.
+              </p>
+            </div>
+          </div>
+
+          <div className="sc-workflowStep sc-step-pink">
+            <div className="sc-workflowIconBox">
+              <i className="icon-check sc-workflowIcon" />
+            </div>
+            <div>
+              <h3 className="sc-workflowTitle">4. Review</h3>
+              <p className="sc-workflowDesc">
+                Verify the changes, commit, and mark the task as done.
+              </p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}
+
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
   const [activeTab, setActiveTab] = useState('td');
@@ -777,6 +839,8 @@ export default function Home() {
           </div>
         </section>
 
+        <WorkflowSection />
+
         {/* Component Showcase Sections */}
         <section className="sc-showcase">
           <div className="container">