diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 5eadc2b..df324c4 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -2,7 +2,7 @@ import { Routes } from '@angular/router';
 import { Login } from './components/login/login';
 import { Signup } from './components/signup/signup';
 import { authGuard } from './guards/auth-guard';
-import { CreateWorkspacePlaceholder } from './components/workspace/create-workspace-placeholder';
+import { CreateWorkspace } from './components/workspace/create-workspace';
 
 export const routes: Routes = [
   { path: 'login', component: Login },
@@ -14,7 +14,7 @@ export const routes: Routes = [
   },
   {
     path: 'workspace/create',
-    component: CreateWorkspacePlaceholder,
+    component: CreateWorkspace,
     canActivate: [authGuard]
   },
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
diff --git a/src/app/components/workspace/create-workspace-placeholder.ts b/src/app/components/workspace/create-workspace-placeholder.ts
deleted file mode 100644
index e785b87..0000000
--- a/src/app/components/workspace/create-workspace-placeholder.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
-
-@Component({
-    selector: 'app-create-workspace-placeholder',
-    standalone: true,
-    imports: [RouterLink],
-    template: `
-    <div style="padding: 20px;">
-      <h2>Create Workspace</h2>
-      <p>This feature is being implemented in Issue #4.</p>
-      <a routerLink="/dashboard">Back to Dashboard</a>
-    </div>
-  `
-})
-export class CreateWorkspacePlaceholder { }
diff --git a/src/app/components/workspace/create-workspace.css b/src/app/components/workspace/create-workspace.css
new file mode 100644
index 0000000..e8cdb50
--- /dev/null
+++ b/src/app/components/workspace/create-workspace.css
@@ -0,0 +1,66 @@
+.create-workspace-container {
+  max-width: 480px;
+  margin: 40px auto;
+  padding: 24px;
+  border: 1px solid #d8dee4;
+  border-radius: 8px;
+  background: #fff;
+}
+
+h2 {
+  margin-top: 0;
+  margin-bottom: 8px;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: #57606a;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+label {
+  font-weight: 600;
+}
+
+input {
+  padding: 10px 12px;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 10px;
+}
+
+button {
+  padding: 10px 14px;
+  border: none;
+  border-radius: 6px;
+  background: #1f6feb;
+  color: #fff;
+  cursor: pointer;
+}
+
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+a {
+  color: #0969da;
+  text-decoration: none;
+}
+
+.error {
+  margin-top: 16px;
+  color: #cf222e;
+}
diff --git a/src/app/components/workspace/create-workspace.html b/src/app/components/workspace/create-workspace.html
new file mode 100644
index 0000000..a02bd2e
--- /dev/null
+++ b/src/app/components/workspace/create-workspace.html
@@ -0,0 +1,26 @@
+<div class="create-workspace-container">
+  <h2>Create Workspace</h2>
+  <p>Set up a workspace to organize your decisions.</p>
+
+  <form (ngSubmit)="onSubmit()" #workspaceForm="ngForm" novalidate>
+    <label for="workspace-name">Workspace Name</label>
+    <input
+      id="workspace-name"
+      name="workspaceName"
+      type="text"
+      required
+      [(ngModel)]="name"
+      [disabled]="isSubmitting"
+      placeholder="e.g. Product Team"
+    />
+
+    <div class="actions">
+      <button type="submit" [disabled]="isSubmitting || !workspaceForm.form.valid">
+        {{ isSubmitting ? 'Creating...' : 'Create Workspace' }}
+      </button>
+      <a routerLink="/dashboard">Cancel</a>
+    </div>
+  </form>
+
+  <p *ngIf="error" class="error">{{ error }}</p>
+</div>
diff --git a/src/app/components/workspace/create-workspace.ts b/src/app/components/workspace/create-workspace.ts
new file mode 100644
index 0000000..1fd002e
--- /dev/null
+++ b/src/app/components/workspace/create-workspace.ts
@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { WorkspaceService } from '../../services/workspace';
+
+@Component({
+  selector: 'app-create-workspace',
+  standalone: true,
+  imports: [CommonModule, FormsModule, RouterLink],
+  templateUrl: './create-workspace.html',
+  styleUrl: './create-workspace.css'
+})
+export class CreateWorkspace {
+  name = '';
+  error = '';
+  isSubmitting = false;
+
+  private workspaceService = inject(WorkspaceService);
+  private router = inject(Router);
+
+  onSubmit() {
+    const trimmedName = this.name.trim();
+    if (!trimmedName) {
+      this.error = 'Workspace name is required.';
+      return;
+    }
+
+    this.isSubmitting = true;
+    this.error = '';
+
+    this.workspaceService.createWorkspace(trimmedName).subscribe({
+      next: () => this.router.navigate(['/dashboard']),
+      error: () => {
+        this.error = 'Unable to create workspace. Please try again.';
+        this.isSubmitting = false;
+      }
+    });
+  }
+}