diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..a8686e2
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,221 @@
+'use client';
+
+import { useApp } from './AppProvider';
+import { useState } from 'react';
+
+export default function Sidebar() {
+  const {
+    view, setView, selectedProject, setSelectedProject,
+    sidebarOpen, setSidebarOpen, showNewProjectModal, setShowNewProjectModal,
+    showNewTaskModal, setShowNewTaskModal, projects, setProjects, refreshTasks, refreshProjects,
+  } = useApp();
+
+  const [projectName, setProjectName] = useState('');
+  const [projectDescription, setProjectDescription] = useState('');
+  const [projectColor, setProjectColor] = useState('#3b82f6');
+  const [creatingProject, setCreatingProject] = useState(false);
+
+  const views: { key: typeof view; label: string; icon: string }[] = [
+    { key: 'list', label: 'List View', icon: '☰' },
+    { key: 'kanban', label: 'Kanban Board', icon: '▦' },
+    { key: 'calendar', label: 'Calendar', icon: '📅' },
+  ];
+
+  const handleNewProject = async () => {
+    if (!projectName.trim()) return;
+    try {
+      await fetch('/api/projects', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: projectName.trim(),
+          description: projectDescription.trim(),
+          color: projectColor,
+        }),
+      });
+      setProjectName('');
+      setProjectDescription('');
+      setProjectColor('#3b82f6');
+      setCreatingProject(false);
+      refreshProjects();
+    } catch (error) {
+      console.error('Failed to create project:', error);
+    }
+  };
+
+  const handleDeleteProject = async (id: string) => {
+    if (!confirm('Delete this project and all its tasks?')) return;
+    try {
+      await fetch(`/api/projects/${id}`, { method: 'DELETE' });
+      if (selectedProject === id) setSelectedProject(null);
+      refreshProjects();
+      refreshTasks();
+    } catch (error) {
+      console.error('Failed to delete project:', error);
+    }
+  };
+
+  return (
+    <div className={`flex flex-col h-full bg-sidebar text-white transition-all duration-300 ${sidebarOpen ? 'w-64' : 'w-16'}`}>
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-white/10">
+        {sidebarOpen && (
+          <div className="flex items-center gap-2">
+            <span className="text-xl font-bold">VixTix</span>
+          </div>
+        )}
+        <button
+          onClick={() => setSidebarOpen(!sidebarOpen)}
+          className="p-1.5 rounded-lg hover:bg-sidebar-hover transition-colors"
+        >
+          <span className="text-lg">{sidebarOpen ? '◀' : '▶'}</span>
+        </button>
+      </div>
+
+      {/* New Task Button */}
+      <div className="p-3">
+        <button
+          onClick={() => setShowNewTaskModal(true)}
+          className="w-full flex items-center justify-center gap-2 bg-accent hover:bg-accent-hover text-white py-2.5 px-4 rounded-lg transition-colors font-medium"
+        >
+          <span className="text-lg">+</span>
+          {sidebarOpen && <span>New Task</span>}
+        </button>
+      </div>
+
+      {/* Views */}
+      {sidebarOpen && (
+        <div className="px-3 mb-4">
+          <p className="text-xs text-gray-400 uppercase tracking-wider mb-2 px-2">Views</p>
+          <div className="space-y-1">
+            {views.map((v) => (
+              <button
+                key={v.key}
+                onClick={() => setView(v.key)}
+                className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm ${
+                  view === v.key
+                    ? 'bg-sidebar-active text-white'
+                    : 'text-gray-300 hover:bg-sidebar-hover hover:text-white'
+                }`}
+              >
+                <span className="text-base">{v.icon}</span>
+                {v.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Projects */}
+      <div className="flex-1 overflow-y-auto px-3">
+        {sidebarOpen && (
+          <div className="flex items-center justify-between mb-2 px-2">
+            <p className="text-xs text-gray-400 uppercase tracking-wider">Projects</p>
+            <button
+              onClick={() => setCreatingProject(!creatingProject)}
+              className="text-gray-400 hover:text-white transition-colors"
+              title="New Project"
+            >
+              +
+            </button>
+          </div>
+        )}
+
+        {/* New project form */}
+        {creatingProject && sidebarOpen && (
+          <div className="mb-3 p-3 bg-sidebar-hover rounded-lg animate-slide-in">
+            <input
+              type="text"
+              value={projectName}
+              onChange={(e) => setProjectName(e.target.value)}
+              placeholder="Project name"
+              className="w-full bg-transparent border border-white/20 rounded px-2 py-1.5 text-sm text-white placeholder-gray-500 mb-2 focus:outline-none focus:border-accent"
+              autoFocus
+            />
+            <input
+              type="text"
+              value={projectDescription}
+              onChange={(e) => setProjectDescription(e.target.value)}
+              placeholder="Description (optional)"
+              className="w-full bg-transparent border border-white/20 rounded px-2 py-1.5 text-sm text-white placeholder-gray-500 mb-2 focus:outline-none focus:border-accent"
+            />
+            <div className="flex items-center gap-2 mb-2">
+              <span className="text-xs text-gray-400">Color:</span>
+              <input
+                type="color"
+                value={projectColor}
+                onChange={(e) => setProjectColor(e.target.value)}
+                className="w-8 h-8 rounded cursor-pointer border-0 bg-transparent"
+              />
+            </div>
+            <div className="flex gap-2">
+              <button
+                onClick={handleNewProject}
+                className="flex-1 bg-accent hover:bg-accent-hover text-white py-1.5 rounded text-sm transition-colors"
+              >
+                Create
+              </button>
+              <button
+                onClick={() => { setCreatingProject(false); setProjectName(''); }}
+                className="flex-1 bg-gray-600 hover:bg-gray-500 text-white py-1.5 rounded text-sm transition-colors"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Project list */}
+        <div className="space-y-0.5">
+          {/* All Projects option */}
+          <button
+            onClick={() => setSelectedProject(null)}
+            className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm ${
+              !selectedProject
+                ? 'bg-sidebar-active text-white'
+                : 'text-gray-300 hover:bg-sidebar-hover hover:text-white'
+            }`}
+          >
+            <span className="text-base">📋</span>
+            {sidebarOpen && <span className="truncate">All Projects</span>}
+          </button>
+
+          {projects.map((project) => (
+            <div
+              key={project.id}
+              className={`group flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm ${
+                selectedProject === project.id
+                  ? 'bg-sidebar-active text-white'
+                  : 'text-gray-300 hover:bg-sidebar-hover hover:text-white'
+              }`}
+            >
+              <span
+                className="w-3 h-3 rounded-full flex-shrink-0"
+                style={{ backgroundColor: project.color }}
+              />
+              {sidebarOpen && (
+                <>
+                  <span className="truncate flex-1 text-left">{project.name}</span>
+                  <button
+                    onClick={(e) => { e.stopPropagation(); handleDeleteProject(project.id); }}
+                    className="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-red-400 transition-all"
+                    title="Delete project"
+                  >
+                    ✕
+                  </button>
+                </>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Footer */}
+      {sidebarOpen && (
+        <div className="p-3 border-t border-white/10 text-xs text-gray-500 text-center">
+          VixTix v1.0
+        </div>
+      )}
+    </div>
+  );
+}