diff --git a/backend/alembic/versions/a2c5d3f7e1b4_add_resume_url_to_users.py b/backend/alembic/versions/a2c5d3f7e1b4_add_resume_url_to_users.py
new file mode 100644
index 00000000..fd8619bd
--- /dev/null
+++ b/backend/alembic/versions/a2c5d3f7e1b4_add_resume_url_to_users.py
@@ -0,0 +1,28 @@
+"""Add resume_url to users
+
+Revision ID: a2c5d3f7e1b4
+Revises: f533805006ed
+Create Date: 2026-07-05 00:00:00.000000
+
+"""
+
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+# revision identifiers, used by Alembic.
+revision: str = "a2c5d3f7e1b4"
+down_revision: Union[str, Sequence[str], None] = "f533805006ed"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    op.add_column(
+        "users", sa.Column("resume_url", sa.String(length=500), nullable=True)
+    )
+
+
+def downgrade() -> None:
+    op.drop_column("users", "resume_url")
diff --git a/backend/app/__pycache__/__init__.cpython-312.pyc b/backend/app/__pycache__/__init__.cpython-312.pyc
deleted file mode 100644
index 66e390eb..00000000
Binary files a/backend/app/__pycache__/__init__.cpython-312.pyc and /dev/null differ
diff --git a/backend/app/__pycache__/__init__.cpython-313.pyc b/backend/app/__pycache__/__init__.cpython-313.pyc
deleted file mode 100644
index 629cc0c2..00000000
Binary files a/backend/app/__pycache__/__init__.cpython-313.pyc and /dev/null differ
diff --git a/backend/app/__pycache__/main.cpython-313.pyc b/backend/app/__pycache__/main.cpython-313.pyc
deleted file mode 100644
index 783d7326..00000000
Binary files a/backend/app/__pycache__/main.cpython-313.pyc and /dev/null differ
diff --git a/backend/app/core/__pycache__/__init__.cpython-312.pyc b/backend/app/core/__pycache__/__init__.cpython-312.pyc
deleted file mode 100644
index e0b1f44f..00000000
Binary files a/backend/app/core/__pycache__/__init__.cpython-312.pyc and /dev/null differ
diff --git a/backend/app/core/__pycache__/__init__.cpython-313.pyc b/backend/app/core/__pycache__/__init__.cpython-313.pyc
deleted file mode 100644
index b6a23e95..00000000
Binary files a/backend/app/core/__pycache__/__init__.cpython-313.pyc and /dev/null differ
diff --git a/backend/app/core/__pycache__/config.cpython-312.pyc b/backend/app/core/__pycache__/config.cpython-312.pyc
deleted file mode 100644
index dd81e831..00000000
Binary files a/backend/app/core/__pycache__/config.cpython-312.pyc and /dev/null differ
diff --git a/backend/app/core/__pycache__/config.cpython-313.pyc b/backend/app/core/__pycache__/config.cpython-313.pyc
deleted file mode 100644
index 4db18e32..00000000
Binary files a/backend/app/core/__pycache__/config.cpython-313.pyc and /dev/null differ
diff --git a/backend/app/core/__pycache__/logging.cpython-312.pyc b/backend/app/core/__pycache__/logging.cpython-312.pyc
deleted file mode 100644
index cd6c69f7..00000000
Binary files a/backend/app/core/__pycache__/logging.cpython-312.pyc and /dev/null differ
diff --git a/backend/app/core/__pycache__/logging.cpython-313.pyc b/backend/app/core/__pycache__/logging.cpython-313.pyc
deleted file mode 100644
index 564c55fb..00000000
Binary files a/backend/app/core/__pycache__/logging.cpython-313.pyc and /dev/null differ
diff --git a/backend/app/core/__pycache__/security.cpython-312.pyc b/backend/app/core/__pycache__/security.cpython-312.pyc
deleted file mode 100644
index c8f18e90..00000000
Binary files a/backend/app/core/__pycache__/security.cpython-312.pyc and /dev/null differ
diff --git a/backend/app/core/__pycache__/security.cpython-313.pyc b/backend/app/core/__pycache__/security.cpython-313.pyc
deleted file mode 100644
index d00998a6..00000000
Binary files a/backend/app/core/__pycache__/security.cpython-313.pyc and /dev/null differ
diff --git a/backend/app/core/config.py b/backend/app/core/config.py
index 09b8d451..5b2efa32 100644
--- a/backend/app/core/config.py
+++ b/backend/app/core/config.py
@@ -95,8 +95,10 @@ class Settings(BaseSettings):
     # ==========================================================
 
     MAX_UPLOAD_SIZE_MB: int = 10
+    RESUME_MAX_SIZE_MB: int = 5
 
     ALLOWED_IMAGE_TYPES: str = "image/png," "image/jpeg," "image/webp"
+    UPLOAD_DIR: str = "uploads"
 
     # ==========================================================
     # AI
diff --git a/backend/app/main.py b/backend/app/main.py
index 7142b3a2..62fc7d77 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -3,6 +3,7 @@
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse
+from fastapi.staticfiles import StaticFiles
 
 from app.core.config import settings
 from app.middleware.request_id import RequestIDMiddleware
@@ -83,6 +84,12 @@ async def lifespan(app: FastAPI):
     ],
 )
 
+# ------------------------------------------------------------------
+# Static Files
+# ------------------------------------------------------------------
+
+app.mount("/uploads", StaticFiles(directory="uploads"), name="uploads")
+
 # ------------------------------------------------------------------
 # Health Check
 # ------------------------------------------------------------------
diff --git a/backend/app/middleware/__pycache__/__init__.cpython-313.pyc b/backend/app/middleware/__pycache__/__init__.cpython-313.pyc
deleted file mode 100644
index b0991e32..00000000
Binary files a/backend/app/middleware/__pycache__/__init__.cpython-313.pyc and /dev/null differ
diff --git a/backend/app/middleware/__pycache__/rate_limit.cpython-313.pyc b/backend/app/middleware/__pycache__/rate_limit.cpython-313.pyc
deleted file mode 100644
index 011ce478..00000000
Binary files a/backend/app/middleware/__pycache__/rate_limit.cpython-313.pyc and /dev/null differ
diff --git a/backend/app/middleware/__pycache__/request_id.cpython-313.pyc b/backend/app/middleware/__pycache__/request_id.cpython-313.pyc
deleted file mode 100644
index d423ad51..00000000
Binary files a/backend/app/middleware/__pycache__/request_id.cpython-313.pyc and /dev/null differ
diff --git a/backend/app/middleware/__pycache__/security_headers.cpython-313.pyc b/backend/app/middleware/__pycache__/security_headers.cpython-313.pyc
deleted file mode 100644
index 00031d6e..00000000
Binary files a/backend/app/middleware/__pycache__/security_headers.cpython-313.pyc and /dev/null differ
diff --git a/backend/app/models/user.py b/backend/app/models/user.py
index 1835199a..84f3b2c3 100644
--- a/backend/app/models/user.py
+++ b/backend/app/models/user.py
@@ -107,6 +107,11 @@ class User(Base):
         nullable=True,
     )
 
+    resume_url: Mapped[str | None] = mapped_column(
+        String(500),
+        nullable=True,
+    )
+
     portfolio_url: Mapped[str | None] = mapped_column(
         String(255),
         nullable=True,
diff --git a/backend/app/routers/users.py b/backend/app/routers/users.py
index bf074c01..69fa520f 100644
--- a/backend/app/routers/users.py
+++ b/backend/app/routers/users.py
@@ -2,7 +2,16 @@
 
 import uuid
 
-from fastapi import APIRouter, Depends, HTTPException, Query, status
+from fastapi import (
+    APIRouter,
+    Depends,
+    File,
+    HTTPException,
+    Query,
+    Request,
+    UploadFile,
+    status,
+)
 from sqlalchemy.orm import Session
 
 from app.database.session import get_db
@@ -15,6 +24,7 @@
 )
 from app.services.auth_service import AuthService
 from app.services.user_service import UserService
+from app.utils.uploads import save_resume_upload, validate_resume_upload
 
 router = APIRouter(
     prefix="/users",
@@ -123,6 +133,33 @@ def update_me(
     )
 
 
+@router.post(
+    "/me/resume",
+    response_model=UserResponse,
+)
+async def upload_resume(
+    request: Request,
+    file: UploadFile = File(...),
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db),
+):
+    if not file.filename:
+        raise HTTPException(status_code=400, detail="No file provided")
+
+    contents = await file.read()
+    try:
+        validate_resume_upload(file.filename, file.content_type, len(contents))
+    except ValueError as exc:
+        raise HTTPException(status_code=400, detail=str(exc)) from exc
+
+    resume_url = save_resume_upload(contents, file.filename, current_user.id)
+    current_user.resume_url = str(request.base_url).rstrip("/") + resume_url
+    db.commit()
+    db.refresh(current_user)
+
+    return current_user
+
+
 @router.delete(
     "/me",
     status_code=status.HTTP_204_NO_CONTENT,
diff --git a/backend/app/schemas/user.py b/backend/app/schemas/user.py
index bed6b94f..193f99e4 100644
--- a/backend/app/schemas/user.py
+++ b/backend/app/schemas/user.py
@@ -37,6 +37,7 @@ class UserBase(BaseModel):
     timezone: Optional[str] = None
 
     website: Optional[HttpUrl] = None
+    resume_url: Optional[str] = None
     portfolio_url: Optional[HttpUrl] = None
     github_url: Optional[HttpUrl] = None
     linkedin_url: Optional[HttpUrl] = None
@@ -77,6 +78,7 @@ class UserUpdate(BaseModel):
     timezone: Optional[str] = None
 
     website: Optional[HttpUrl] = None
+    resume_url: Optional[str] = None
     portfolio_url: Optional[HttpUrl] = None
     github_url: Optional[HttpUrl] = None
     linkedin_url: Optional[HttpUrl] = None
diff --git a/backend/app/utils/__pycache__/__init__.cpython-313.pyc b/backend/app/utils/__pycache__/__init__.cpython-313.pyc
deleted file mode 100644
index f5fb5820..00000000
Binary files a/backend/app/utils/__pycache__/__init__.cpython-313.pyc and /dev/null differ
diff --git a/backend/app/utils/__pycache__/uploads.cpython-313.pyc b/backend/app/utils/__pycache__/uploads.cpython-313.pyc
new file mode 100644
index 00000000..1b52ab2f
Binary files /dev/null and b/backend/app/utils/__pycache__/uploads.cpython-313.pyc differ
diff --git a/backend/app/utils/uploads.py b/backend/app/utils/uploads.py
new file mode 100644
index 00000000..34b06cbe
--- /dev/null
+++ b/backend/app/utils/uploads.py
@@ -0,0 +1,37 @@
+from __future__ import annotations
+
+import uuid
+from pathlib import Path
+from typing import Final
+
+from app.core.config import settings
+
+ALLOWED_RESUME_MIME_TYPES: Final[set[str]] = {"application/pdf"}
+MAX_RESUME_SIZE_BYTES: Final[int] = settings.RESUME_MAX_SIZE_MB * 1024 * 1024
+
+
+def validate_resume_upload(
+    filename: str | None, content_type: str | None, size_bytes: int
+) -> None:
+    if not filename or not filename.lower().endswith(".pdf"):
+        raise ValueError("Please upload a PDF file.")
+
+    normalized_content_type = (content_type or "").lower()
+    if normalized_content_type not in ALLOWED_RESUME_MIME_TYPES:
+        raise ValueError("Please upload a PDF file.")
+
+    if size_bytes > MAX_RESUME_SIZE_BYTES:
+        raise ValueError(
+            f"Resume file must be smaller than {settings.RESUME_MAX_SIZE_MB}MB."
+        )
+
+
+def save_resume_upload(contents: bytes, filename: str, user_id: uuid.UUID | str) -> str:
+    upload_dir = Path(settings.UPLOAD_DIR) / "resumes"
+    upload_dir.mkdir(parents=True, exist_ok=True)
+
+    safe_name = f"{user_id}-{uuid.uuid4().hex}.pdf"
+    destination = upload_dir / safe_name
+    destination.write_bytes(contents)
+
+    return f"/uploads/resumes/{safe_name}"
diff --git a/backend/tests/__pycache__/test_resume_upload.cpython-313-pytest-9.1.1.pyc b/backend/tests/__pycache__/test_resume_upload.cpython-313-pytest-9.1.1.pyc
new file mode 100644
index 00000000..855baf64
Binary files /dev/null and b/backend/tests/__pycache__/test_resume_upload.cpython-313-pytest-9.1.1.pyc differ
diff --git a/backend/tests/test_resume_upload.py b/backend/tests/test_resume_upload.py
new file mode 100644
index 00000000..87ff6d29
--- /dev/null
+++ b/backend/tests/test_resume_upload.py
@@ -0,0 +1,17 @@
+import pytest
+
+from app.utils.uploads import validate_resume_upload
+
+
+def test_rejects_non_pdf_files():
+    with pytest.raises(ValueError, match="PDF"):
+        validate_resume_upload("resume.docx", "application/msword", 1024)
+
+
+def test_rejects_oversized_files():
+    with pytest.raises(ValueError, match="5MB"):
+        validate_resume_upload("resume.pdf", "application/pdf", 6 * 1024 * 1024)
+
+
+def test_accepts_valid_pdf():
+    validate_resume_upload("resume.pdf", "application/pdf", 1024)
diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index 0cc18d2e..2955eae6 100644
--- a/frontend/bun.lockb
+++ b/frontend/bun.lockb
@@ -392,7 +392,7 @@
 
     "@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.1.0", "", { "os": "none", "cpu": "arm64" }, "sha512-4+fexHayrLCWpriPh4c6dNvL4an34DEZCG7zOM/FD5QNF6h8DT+bDXzyB/kfC8lDJbaFb7jKShtnjDQFXVQEjg=="],
 
-    "@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.1.0", "", { "dependencies": { "@emnapi/core": "1.10.0", "@emnapi/runtime": "1.10.0", "@napi-rs/wasm-runtime": "^1.1.4" }, "cpu": "none" }, "sha512-SbL++MNmOw6QamrwIGDMSSfM4ceTzFr+RjbOExJSLLBinScU4WI5OdA413h1qwPw2yH7lVF1+H4svQ+6mSXKTQ=="],
+    "@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.1.0", "", { "dependencies": { "@emnapi/core": "1.11.2", "@emnapi/runtime": "1.11.2", "@napi-rs/wasm-runtime": "^1.1.4" }, "cpu": "none" }, "sha512-SbL++MNmOw6QamrwIGDMSSfM4ceTzFr+RjbOExJSLLBinScU4WI5OdA413h1qwPw2yH7lVF1+H4svQ+6mSXKTQ=="],
 
     "@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.1.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-+xTE6XC7wBgk0VKRXGG+QAnyW5S9b8vfsFpiMjf0waQTmSQSU8onsH/beyZ8X4aXVveJnotiy7VDjLOaW8bTrg=="],
 
@@ -1318,7 +1318,7 @@
 
     "vite/rolldown/@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.0.3", "", { "os": "none", "cpu": "arm64" }, "sha512-OXXS3RKJgX2uLwM+gYyuH5omcH8fL1LJs96pZGgtetVCahON57+d4SJHzTgZiOjxgGkSnpXpOsWuPDGAKAigEg=="],
 
-    "vite/rolldown/@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.0.3", "", { "dependencies": { "@emnapi/core": "1.10.0", "@emnapi/runtime": "1.10.0", "@napi-rs/wasm-runtime": "^1.1.4" }, "cpu": "none" }, "sha512-JTtb8BWFynicNSoPrehsCzBtOKjZ6jhMiPFEmOiuXg1Fl8dn2KHQob+GuPSGR0dryQa1PQJbzjF3dqO/whhjLg=="],
+    "vite/rolldown/@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.0.3", "", { "dependencies": { "@emnapi/core": "1.11.2", "@emnapi/runtime": "1.11.2", "@napi-rs/wasm-runtime": "^1.1.4" }, "cpu": "none" }, "sha512-JTtb8BWFynicNSoPrehsCzBtOKjZ6jhMiPFEmOiuXg1Fl8dn2KHQob+GuPSGR0dryQa1PQJbzjF3dqO/whhjLg=="],
 
     "vite/rolldown/@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.0.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-gEdFFEN70A/jxb2svrWsN3aDL7OUtmvlOy+6fa2jxG8K0wQ1ZbdeLGnidov6Yu5/733dI5ySfzFlQ/cb0bSz1g=="],
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7bdbe075..28d154f0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2425,8 +2425,8 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "1.11.1",
-        "@emnapi/runtime": "1.11.1",
+        "@emnapi/core": "1.11.2",
+        "@emnapi/runtime": "1.11.2",
         "@napi-rs/wasm-runtime": "^1.1.6"
       },
       "engines": {
@@ -7711,18 +7711,6 @@
         }
       }
     },
-    "node_modules/nitro/node_modules/lru-cache": {
-      "version": "11.5.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
-      "integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": "20 || >=22"
-      }
-    },
     "node_modules/nitro/node_modules/unstorage": {
       "version": "2.0.0-alpha.7",
       "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-2.0.0-alpha.7.tgz",
diff --git a/frontend/src/components/profile/BioCard.tsx b/frontend/src/components/profile/BioCard.tsx
new file mode 100644
index 00000000..64443864
--- /dev/null
+++ b/frontend/src/components/profile/BioCard.tsx
@@ -0,0 +1,128 @@
+import { Card } from "@/components/shared/primitives";
+import { MapPin, Clock3, Sparkles } from "lucide-react";
+
+export interface BioCardProps {
+  headline?: string | null;
+  bio?: string | null;
+  location?: string | null;
+  timezone?: string | null;
+  editable?: boolean;
+  formValues?: {
+    headline: string;
+    bio: string;
+    location: string;
+    timezone: string;
+  };
+  errors?: Record<string, string>;
+  onFieldChange?: (field: "headline" | "bio" | "location" | "timezone", value: string) => void;
+}
+
+export function BioCard({ headline, bio, location, timezone, editable = false, formValues, errors, onFieldChange }: BioCardProps) {
+  const hasContent = [headline, bio, location, timezone].some((value) => Boolean(value));
+  const bioLength = (editable ? formValues?.bio : bio ?? "").length;
+
+  if (editable) {
+    return (
+      <Card className="p-5">
+        <div className="flex items-center gap-2">
+          <div className="rounded-full bg-primary/10 p-2 text-primary">
+            <Sparkles size={16} />
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold text-foreground">About</h2>
+            <p className="text-xs text-muted-foreground">Update your profile summary</p>
+          </div>
+        </div>
+
+        <div className="mt-4 space-y-4">
+          <label className="block text-sm">
+            <span className="mb-1 block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Headline</span>
+            <input
+              value={formValues?.headline ?? ""}
+              onChange={(event) => onFieldChange?.("headline", event.target.value)}
+              maxLength={150}
+              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-0 focus:border-primary"
+              placeholder="A short professional headline"
+            />
+            {errors?.headline ? <p className="mt-1 text-xs text-red-500">{errors.headline}</p> : null}
+          </label>
+
+          <label className="block text-sm">
+            <span className="mb-1 block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Bio</span>
+            <textarea
+              value={formValues?.bio ?? ""}
+              onChange={(event) => onFieldChange?.("bio", event.target.value)}
+              maxLength={1000}
+              rows={5}
+              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-0 focus:border-primary"
+              placeholder="Tell people about your work and interests"
+            />
+            <div className="mt-1 flex items-center justify-between text-xs text-muted-foreground">
+              <span>{errors?.bio ? <span className="text-red-500">{errors.bio}</span> : "Keep it concise and professional."}</span>
+              <span className={bioLength > 1000 ? "text-red-500" : ""}>{bioLength}/1000</span>
+            </div>
+          </label>
+
+          <div className="grid gap-3 sm:grid-cols-2">
+            <label className="block text-sm">
+              <span className="mb-1 block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Location</span>
+              <input
+                value={formValues?.location ?? ""}
+                onChange={(event) => onFieldChange?.("location", event.target.value)}
+                className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-0 focus:border-primary"
+                placeholder="City, Country"
+              />
+            </label>
+            <label className="block text-sm">
+              <span className="mb-1 block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Timezone</span>
+              <input
+                value={formValues?.timezone ?? ""}
+                onChange={(event) => onFieldChange?.("timezone", event.target.value)}
+                className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-0 focus:border-primary"
+                placeholder="e.g. PST"
+              />
+            </label>
+          </div>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="p-5">
+      <div className="flex items-center gap-2">
+        <div className="rounded-full bg-primary/10 p-2 text-primary">
+          <Sparkles size={16} />
+        </div>
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">About</h2>
+          <p className="text-xs text-muted-foreground">Profile summary</p>
+        </div>
+      </div>
+
+      {!hasContent ? (
+        <p className="mt-4 text-sm text-muted-foreground">No profile details added yet.</p>
+      ) : (
+        <div className="mt-4 space-y-3">
+          {headline ? <p className="text-sm font-semibold text-foreground">{headline}</p> : null}
+          {bio ? <p className="text-sm leading-6 text-muted-foreground">{bio}</p> : null}
+
+          <div className="flex flex-wrap gap-2">
+            {location ? (
+              <span className="inline-flex items-center gap-1 rounded-full border border-border bg-background px-2.5 py-1 text-xs text-muted-foreground">
+                <MapPin size={12} /> {location}
+              </span>
+            ) : null}
+            {timezone ? (
+              <span className="inline-flex items-center gap-1 rounded-full border border-border bg-background px-2.5 py-1 text-xs text-muted-foreground">
+                <Clock3 size={12} /> {timezone}
+              </span>
+            ) : null}
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export default BioCard;
diff --git a/frontend/src/components/profile/EducationCard.tsx b/frontend/src/components/profile/EducationCard.tsx
new file mode 100644
index 00000000..e81f1d7d
--- /dev/null
+++ b/frontend/src/components/profile/EducationCard.tsx
@@ -0,0 +1,44 @@
+import { Card } from "@/components/shared/primitives";
+import { GraduationCap } from "lucide-react";
+
+export interface EducationEntry {
+  school: string;
+  degree?: string | null;
+  years?: string | null;
+}
+
+export interface EducationCardProps {
+  education?: EducationEntry[];
+}
+
+export function EducationCard({ education = [] }: EducationCardProps) {
+  return (
+    <Card className="p-5">
+      <div className="flex items-center gap-2">
+        <div className="rounded-full bg-primary/10 p-2 text-primary">
+          <GraduationCap size={16} />
+        </div>
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">Education</h2>
+          <p className="text-xs text-muted-foreground">Academic background</p>
+        </div>
+      </div>
+
+      {education.length === 0 ? (
+        <p className="mt-4 text-sm text-muted-foreground">No education added yet.</p>
+      ) : (
+        <div className="mt-4 space-y-3">
+          {education.map((entry) => (
+            <div key={`${entry.school}-${entry.years ?? "unknown"}`} className="rounded-lg border border-border/70 bg-background/70 p-3">
+              <p className="text-sm font-semibold text-foreground">{entry.school}</p>
+              {entry.degree ? <p className="mt-1 text-sm text-muted-foreground">{entry.degree}</p> : null}
+              {entry.years ? <p className="mt-1 text-xs text-muted-foreground">{entry.years}</p> : null}
+            </div>
+          ))}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export default EducationCard;
diff --git a/frontend/src/components/profile/ExperienceCard.tsx b/frontend/src/components/profile/ExperienceCard.tsx
new file mode 100644
index 00000000..c857960c
--- /dev/null
+++ b/frontend/src/components/profile/ExperienceCard.tsx
@@ -0,0 +1,120 @@
+import { Card } from "@/components/shared/primitives";
+import { BriefcaseBusiness, BadgeCheck } from "lucide-react";
+
+export interface ExperienceEntry {
+  title?: string | null;
+  company?: string | null;
+  experienceLevel?: string | null;
+  period?: string | null;
+  description?: string | null;
+}
+
+export interface ExperienceCardProps {
+  role?: string | null;
+  company?: string | null;
+  experienceLevel?: string | null;
+  entries?: ExperienceEntry[];
+  editable?: boolean;
+  formValues?: {
+    role: string;
+    company: string;
+    experienceLevel: string;
+  };
+  errors?: Record<string, string>;
+  onFieldChange?: (field: "role" | "company" | "experienceLevel", value: string) => void;
+}
+
+export function ExperienceCard({ role, company, experienceLevel, entries, editable = false, formValues, errors, onFieldChange }: ExperienceCardProps) {
+  const fallbackEntries = role || company || experienceLevel
+    ? [{ title: role, company, experienceLevel }]
+    : [];
+  const experienceEntries = (entries?.filter((entry) => Boolean(entry.title || entry.company || entry.experienceLevel)) ?? []).length
+    ? entries?.filter((entry) => Boolean(entry.title || entry.company || entry.experienceLevel)) ?? []
+    : fallbackEntries;
+
+  if (editable) {
+    return (
+      <Card className="p-5">
+        <div className="flex items-center gap-2">
+          <div className="rounded-full bg-primary/10 p-2 text-primary">
+            <BriefcaseBusiness size={16} />
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold text-foreground">Experience</h2>
+            <p className="text-xs text-muted-foreground">Share your current role and background</p>
+          </div>
+        </div>
+
+        <div className="mt-4 space-y-4">
+          <label className="block text-sm">
+            <span className="mb-1 block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Role</span>
+            <input
+              value={formValues?.role ?? ""}
+              onChange={(event) => onFieldChange?.("role", event.target.value)}
+              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-0 focus:border-primary"
+              placeholder="Senior Product Engineer"
+            />
+          </label>
+          <label className="block text-sm">
+            <span className="mb-1 block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Company</span>
+            <input
+              value={formValues?.company ?? ""}
+              onChange={(event) => onFieldChange?.("company", event.target.value)}
+              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-0 focus:border-primary"
+              placeholder="Northstar Labs"
+            />
+          </label>
+          <label className="block text-sm">
+            <span className="mb-1 block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Experience Level</span>
+            <input
+              value={formValues?.experienceLevel ?? ""}
+              onChange={(event) => onFieldChange?.("experienceLevel", event.target.value)}
+              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-0 focus:border-primary"
+              placeholder="Senior / Lead"
+            />
+            {errors?.experienceLevel ? <p className="mt-1 text-xs text-red-500">{errors.experienceLevel}</p> : null}
+          </label>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="p-5">
+      <div className="flex items-center gap-2">
+        <div className="rounded-full bg-primary/10 p-2 text-primary">
+          <BriefcaseBusiness size={16} />
+        </div>
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">Experience</h2>
+          <p className="text-xs text-muted-foreground">Current role and background</p>
+        </div>
+      </div>
+
+      {experienceEntries.length === 0 ? (
+        <p className="mt-4 text-sm text-muted-foreground">No experience added yet.</p>
+      ) : (
+        <div className="mt-4 space-y-4">
+          {experienceEntries.map((entry, index) => (
+            <div key={`${entry.title ?? "role"}-${index}`} className="relative pl-5">
+              <span className="absolute left-0 top-1.5 h-2.5 w-2.5 rounded-full bg-primary" />
+              <div className="border-l border-border/70 pl-4">
+                <p className="text-sm font-semibold text-foreground">{entry.title ?? role ?? "Current role"}</p>
+                <p className="mt-1 text-sm text-muted-foreground">{entry.company ?? company ?? "Independent"}</p>
+                {entry.experienceLevel || experienceLevel ? (
+                  <div className="mt-2 inline-flex items-center gap-1 rounded-full border border-border bg-background px-2.5 py-1 text-xs text-muted-foreground">
+                    <BadgeCheck size={12} /> {entry.experienceLevel ?? experienceLevel}
+                  </div>
+                ) : null}
+                {entry.period ? <p className="mt-2 text-xs text-muted-foreground">{entry.period}</p> : null}
+                {entry.description ? <p className="mt-2 text-sm leading-6 text-muted-foreground">{entry.description}</p> : null}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export default ExperienceCard;
diff --git a/frontend/src/components/profile/ResumeUploadCard.tsx b/frontend/src/components/profile/ResumeUploadCard.tsx
new file mode 100644
index 00000000..c0b7f72c
--- /dev/null
+++ b/frontend/src/components/profile/ResumeUploadCard.tsx
@@ -0,0 +1,169 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Card } from "@/components/shared/primitives";
+import { FileText, Upload, XCircle } from "lucide-react";
+import { uploadCurrentUserResume } from "@/services/profile";
+
+const MAX_FILE_SIZE_BYTES = 5 * 1024 * 1024;
+
+export interface ResumeUploadCardProps {
+  resumeUrl?: string | null;
+  editable?: boolean;
+}
+
+export function ResumeUploadCard({ resumeUrl, editable = false }: ResumeUploadCardProps) {
+  const [currentResumeUrl, setCurrentResumeUrl] = useState<string | null>(resumeUrl ?? null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    setCurrentResumeUrl(resumeUrl ?? null);
+  }, [resumeUrl]);
+
+  const handleFileSelection = async (file: File | null) => {
+    if (!file) return;
+
+    if (file.type !== "application/pdf" && !file.name.toLowerCase().endsWith(".pdf")) {
+      setError("Please upload a PDF file.");
+      return;
+    }
+
+    if (file.size > MAX_FILE_SIZE_BYTES) {
+      setError("Resume file must be smaller than 5MB.");
+      return;
+    }
+
+    setError(null);
+    setIsUploading(true);
+
+    try {
+      const uploadedUrl = await uploadCurrentUserResume(file);
+      setCurrentResumeUrl(uploadedUrl.resume_url ?? uploadedUrl.resumeUrl ?? null);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unable to upload resume right now.";
+      setError(message);
+    } finally {
+      setIsUploading(false);
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+    }
+  };
+
+  const dropState = useMemo(() => {
+    if (!editable) {
+      return "View uploaded résumé";
+    }
+
+    if (isUploading) {
+      return "Uploading...";
+    }
+
+    return currentResumeUrl ? "Replace resume" : "Upload resume";
+  }, [currentResumeUrl, editable, isUploading]);
+
+  const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setIsDragging(false);
+    await handleFileSelection(event.dataTransfer.files?.[0] ?? null);
+  };
+
+  return (
+    <Card className="p-5">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <div className="rounded-full bg-primary/10 p-2 text-primary">
+            <FileText size={16} />
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold text-foreground">Resume</h2>
+            <p className="text-xs text-muted-foreground">PDF uploads only · max 5MB</p>
+          </div>
+        </div>
+        {editable ? (
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            className="rounded-md border border-border bg-background px-3 py-2 text-[13px] font-semibold text-foreground hover:bg-muted"
+          >
+            {currentResumeUrl ? "Replace" : "Upload"}
+          </button>
+        ) : null}
+      </div>
+
+      <input
+        ref={inputRef}
+        type="file"
+        accept="application/pdf"
+        className="hidden"
+        onChange={(event) => handleFileSelection(event.target.files?.[0] ?? null)}
+      />
+
+      <div
+        className={`mt-4 rounded-lg border border-dashed p-4 transition-colors ${isDragging ? "border-primary bg-primary/5" : "border-border bg-muted/30"}`}
+        onDragOver={(event) => {
+          event.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={handleDrop}
+      >
+        {currentResumeUrl ? (
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <p className="text-sm font-medium text-foreground">Resume ready to share</p>
+              <p className="text-xs text-muted-foreground">Your latest PDF is attached to this profile.</p>
+            </div>
+            <div className="flex flex-wrap items-center gap-2">
+              <a
+                href={currentResumeUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center rounded-md bg-primary px-3 py-2 text-[13px] font-semibold text-primary-foreground hover:opacity-90"
+              >
+                View Resume
+              </a>
+              {editable ? (
+                <button
+                  type="button"
+                  onClick={() => inputRef.current?.click()}
+                  className="rounded-md border border-border bg-background px-3 py-2 text-[13px] font-semibold text-foreground hover:bg-muted"
+                >
+                  Replace
+                </button>
+              ) : null}
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Upload size={16} />
+              <span>{dropState}</span>
+            </div>
+            <p className="text-sm text-muted-foreground">No resume uploaded</p>
+            {editable ? (
+              <button
+                type="button"
+                onClick={() => inputRef.current?.click()}
+                className="w-fit rounded-md border border-border bg-background px-3 py-2 text-[13px] font-semibold text-foreground hover:bg-muted"
+              >
+                Choose PDF
+              </button>
+            ) : null}
+          </div>
+        )}
+      </div>
+
+      {isUploading ? <p className="mt-3 text-sm text-muted-foreground">Uploading your resume…</p> : null}
+      {error ? (
+        <div className="mt-3 flex items-start gap-2 rounded-md border border-red-200 bg-red-50 p-2 text-sm text-red-600">
+          <XCircle size={16} className="mt-0.5 shrink-0" />
+          <span>{error}</span>
+        </div>
+      ) : null}
+    </Card>
+  );
+}
+
+export default ResumeUploadCard;
diff --git a/frontend/src/components/profile/SkillsCard.tsx b/frontend/src/components/profile/SkillsCard.tsx
new file mode 100644
index 00000000..cb0c67fe
--- /dev/null
+++ b/frontend/src/components/profile/SkillsCard.tsx
@@ -0,0 +1,146 @@
+import { Card, TagChip } from "@/components/shared/primitives";
+import { Sparkles, Plus, Trash2 } from "lucide-react";
+import type { ProfileSkill } from "@/mocks/seed";
+
+export interface SkillsCardProps {
+  skills: ProfileSkill[];
+  editable?: boolean;
+  formValues?: ProfileSkill[];
+  skillErrors?: Record<string, string>;
+  onSkillChange?: (index: number, field: "name" | "level" | "category" | "yearsOfExperience", value: string | number) => void;
+  onAddSkill?: () => void;
+  onRemoveSkill?: (index: number) => void;
+}
+
+const levelOrder = ["Beginner", "Intermediate", "Advanced", "Expert"] as const;
+
+function normalizeLevel(level?: string): (typeof levelOrder)[number] {
+  const normalized = level?.toLowerCase();
+  const match = levelOrder.find((candidate) => candidate.toLowerCase() === normalized);
+  return match ?? "Intermediate";
+}
+
+export function SkillsCard({ skills, editable = false, formValues = [], skillErrors = {}, onSkillChange, onAddSkill, onRemoveSkill }: SkillsCardProps) {
+  const groupedSkills = levelOrder
+    .map((level) => ({
+      level,
+      items: skills.filter((skill) => normalizeLevel(skill.level) === level),
+    }))
+    .filter((group) => group.items.length > 0);
+
+  if (editable) {
+    return (
+      <Card className="p-5">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <div className="rounded-full bg-primary/10 p-2 text-primary">
+              <Sparkles size={16} />
+            </div>
+            <div>
+              <h2 className="text-sm font-semibold text-foreground">Skills</h2>
+              <p className="text-xs text-muted-foreground">Add and organize your skills</p>
+            </div>
+          </div>
+          <button type="button" onClick={onAddSkill} className="inline-flex items-center gap-1 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium text-foreground hover:bg-muted">
+            <Plus size={12} /> Add
+          </button>
+        </div>
+
+        <div className="mt-4 space-y-3">
+          {formValues.length === 0 ? <p className="text-sm text-muted-foreground">No skills added yet.</p> : null}
+          {formValues.map((skill, index) => (
+            <div key={`${skill.name}-${index}`} className="rounded-lg border border-border/70 bg-background/60 p-3">
+              <div className="grid gap-3 md:grid-cols-[1.5fr_1fr_1fr_auto]">
+                <label className="text-sm">
+                  <span className="mb-1 block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Skill</span>
+                  <input
+                    value={skill.name}
+                    onChange={(event) => onSkillChange?.(index, "name", event.target.value)}
+                    className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-0 focus:border-primary"
+                    placeholder="e.g. React"
+                  />
+                </label>
+                <label className="text-sm">
+                  <span className="mb-1 block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Level</span>
+                  <select
+                    value={skill.level ?? "Intermediate"}
+                    onChange={(event) => onSkillChange?.(index, "level", event.target.value)}
+                    className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-0 focus:border-primary"
+                  >
+                    {levelOrder.map((level) => (
+                      <option key={level} value={level}>
+                        {level}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <label className="text-sm">
+                  <span className="mb-1 block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Years</span>
+                  <input
+                    type="number"
+                    min="0"
+                    value={skill.yearsOfExperience ?? 0}
+                    onChange={(event) => onSkillChange?.(index, "yearsOfExperience", Number(event.target.value))}
+                    className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-0 focus:border-primary"
+                  />
+                </label>
+                <button type="button" onClick={() => onRemoveSkill?.(index)} className="self-end rounded-md border border-border bg-background p-2 text-muted-foreground hover:bg-muted">
+                  <Trash2 size={14} />
+                </button>
+              </div>
+              <label className="mt-3 block text-sm">
+                <span className="mb-1 block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Category</span>
+                <input
+                  value={skill.category ?? "general"}
+                  onChange={(event) => onSkillChange?.(index, "category", event.target.value)}
+                  className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-0 focus:border-primary"
+                  placeholder="frontend, backend, devops"
+                />
+              </label>
+              {skillErrors?.[`${index}`] ? <p className="mt-2 text-xs text-red-500">{skillErrors[`${index}`]}</p> : null}
+            </div>
+          ))}
+          {skillErrors?.skills ? <p className="text-xs text-red-500">{skillErrors.skills}</p> : null}
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="p-5">
+      <div className="flex items-center gap-2">
+        <div className="rounded-full bg-primary/10 p-2 text-primary">
+          <Sparkles size={16} />
+        </div>
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">Skills</h2>
+          <p className="text-xs text-muted-foreground">Grouped by experience level</p>
+        </div>
+      </div>
+
+      {groupedSkills.length === 0 ? (
+        <p className="mt-4 text-sm text-muted-foreground">No skills added yet.</p>
+      ) : (
+        <div className="mt-4 space-y-4">
+          {groupedSkills.map((group) => (
+            <div key={group.level}>
+              <p className="mb-2 text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
+                {group.level}
+              </p>
+              <div className="flex flex-wrap gap-2">
+                {group.items.map((skill) => (
+                  <TagChip key={`${group.level}-${skill.name}`} className="rounded-full px-2.5 py-1 text-[12px] text-foreground">
+                    {skill.name}
+                    {typeof skill.yearsOfExperience === "number" ? ` · ${skill.yearsOfExperience}y` : ""}
+                  </TagChip>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export default SkillsCard;
diff --git a/frontend/src/components/profile/SocialLinksCard.tsx b/frontend/src/components/profile/SocialLinksCard.tsx
new file mode 100644
index 00000000..b0439766
--- /dev/null
+++ b/frontend/src/components/profile/SocialLinksCard.tsx
@@ -0,0 +1,107 @@
+import { Card } from "@/components/shared/primitives";
+import { Github, Linkedin, ExternalLink } from "lucide-react";
+import type { ElementType } from "react";
+
+export interface SocialLinksCardProps {
+  githubUrl?: string | null;
+  linkedinUrl?: string | null;
+  portfolioUrl?: string | null;
+  website?: string | null;
+  editable?: boolean;
+  formValues?: {
+    githubUrl: string;
+    linkedinUrl: string;
+    portfolioUrl: string;
+    website: string;
+  };
+  errors?: Record<string, string>;
+  onFieldChange?: (field: "website" | "portfolioUrl" | "githubUrl" | "linkedinUrl", value: string) => void;
+}
+
+interface LinkItem {
+  label: string;
+  url?: string | null;
+  icon: ElementType;
+}
+
+export function SocialLinksCard({ githubUrl, linkedinUrl, portfolioUrl, website, editable = false, formValues, errors, onFieldChange }: SocialLinksCardProps) {
+  const links: LinkItem[] = [
+    { label: "GitHub", url: githubUrl, icon: Github },
+    { label: "LinkedIn", url: linkedinUrl, icon: Linkedin },
+    { label: "Portfolio", url: portfolioUrl ?? website, icon: ExternalLink },
+  ].filter((link) => Boolean(link.url));
+
+  if (editable) {
+    return (
+      <Card className="p-5">
+        <div className="flex items-center gap-2">
+          <div className="rounded-full bg-primary/10 p-2 text-primary">
+            <ExternalLink size={16} />
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold text-foreground">Social links</h2>
+            <p className="text-xs text-muted-foreground">Add links people can use to reach you</p>
+          </div>
+        </div>
+
+        <div className="mt-4 space-y-3">
+          {[
+            { key: "website", label: "Website", value: formValues?.website ?? "" },
+            { key: "portfolioUrl", label: "Portfolio", value: formValues?.portfolioUrl ?? "" },
+            { key: "githubUrl", label: "GitHub", value: formValues?.githubUrl ?? "" },
+            { key: "linkedinUrl", label: "LinkedIn", value: formValues?.linkedinUrl ?? "" },
+          ].map((field) => (
+            <label key={field.key} className="block text-sm">
+              <span className="mb-1 block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">{field.label}</span>
+              <input
+                value={field.value}
+                onChange={(event) => onFieldChange?.(field.key as "website" | "portfolioUrl" | "githubUrl" | "linkedinUrl", event.target.value)}
+                className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-0 focus:border-primary"
+                placeholder="https://example.com"
+              />
+              {errors?.[field.key] ? <p className="mt-1 text-xs text-red-500">{errors[field.key]}</p> : null}
+            </label>
+          ))}
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="p-5">
+      <div className="flex items-center gap-2">
+        <div className="rounded-full bg-primary/10 p-2 text-primary">
+          <ExternalLink size={16} />
+        </div>
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">Social links</h2>
+          <p className="text-xs text-muted-foreground">Find me online</p>
+        </div>
+      </div>
+
+      {links.length === 0 ? (
+        <p className="mt-4 text-sm text-muted-foreground">No links added yet.</p>
+      ) : (
+        <div className="mt-4 flex flex-wrap gap-2">
+          {links.map((link) => {
+            const Icon = link.icon;
+            return (
+              <a
+                key={link.label}
+                href={link.url ?? "#"}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-2 rounded-full border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:border-primary/40 hover:text-primary"
+              >
+                <Icon size={14} />
+                {link.label}
+              </a>
+            );
+          })}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export default SocialLinksCard;
diff --git a/frontend/src/components/profile/TechStackCard.tsx b/frontend/src/components/profile/TechStackCard.tsx
new file mode 100644
index 00000000..e0405325
--- /dev/null
+++ b/frontend/src/components/profile/TechStackCard.tsx
@@ -0,0 +1,77 @@
+import { Card, TagChip } from "@/components/shared/primitives";
+import { Cpu } from "lucide-react";
+import type { ProfileSkill } from "@/mocks/seed";
+
+export interface TechStackCardProps {
+  skills?: ProfileSkill[];
+  techStack?: string[];
+  editable?: boolean;
+  formValues?: string[];
+  error?: string;
+  onTechStackChange?: (value: string) => void;
+}
+
+export function TechStackCard({ skills = [], techStack, editable = false, formValues = [], error, onTechStackChange }: TechStackCardProps) {
+  const resolvedStack = (techStack?.filter(Boolean) ?? []).length
+    ? techStack?.filter(Boolean) ?? []
+    : skills.filter((skill) => Boolean(skill.category)).map((skill) => skill.name);
+
+  const fallbackStack = resolvedStack.length === 0 ? skills.map((skill) => skill.name) : [];
+  const stackItems = resolvedStack.length > 0 ? resolvedStack : fallbackStack;
+
+  if (editable) {
+    return (
+      <Card className="p-5">
+        <div className="flex items-center gap-2">
+          <div className="rounded-full bg-primary/10 p-2 text-primary">
+            <Cpu size={16} />
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold text-foreground">Tech stack</h2>
+            <p className="text-xs text-muted-foreground">List the tools you work with</p>
+          </div>
+        </div>
+
+        <label className="mt-4 block text-sm">
+          <span className="mb-1 block text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Technologies</span>
+          <textarea
+            value={formValues.join(", ")}
+            onChange={(event) => onTechStackChange?.(event.target.value)}
+            rows={4}
+            className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none ring-0 focus:border-primary"
+            placeholder="React, Next.js, Tailwind CSS"
+          />
+          {error ? <p className="mt-1 text-xs text-red-500">{error}</p> : null}
+        </label>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="p-5">
+      <div className="flex items-center gap-2">
+        <div className="rounded-full bg-primary/10 p-2 text-primary">
+          <Cpu size={16} />
+        </div>
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">Tech stack</h2>
+          <p className="text-xs text-muted-foreground">Core tools and technologies</p>
+        </div>
+      </div>
+
+      {stackItems.length === 0 ? (
+        <p className="mt-4 text-sm text-muted-foreground">No technologies added yet.</p>
+      ) : (
+        <div className="mt-4 flex flex-wrap gap-2">
+          {stackItems.map((item) => (
+            <TagChip key={item} className="rounded-full px-2.5 py-1 text-[12px] text-foreground">
+              {item}
+            </TagChip>
+          ))}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export default TechStackCard;
diff --git a/frontend/src/components/profile/index.ts b/frontend/src/components/profile/index.ts
new file mode 100644
index 00000000..cfd0978c
--- /dev/null
+++ b/frontend/src/components/profile/index.ts
@@ -0,0 +1,7 @@
+export { BioCard, type BioCardProps } from "./BioCard";
+export { SkillsCard, type SkillsCardProps } from "./SkillsCard";
+export { TechStackCard, type TechStackCardProps } from "./TechStackCard";
+export { ExperienceCard, type ExperienceCardProps, type ExperienceEntry } from "./ExperienceCard";
+export { EducationCard, type EducationCardProps, type EducationEntry } from "./EducationCard";
+export { SocialLinksCard, type SocialLinksCardProps } from "./SocialLinksCard";
+export { ResumeUploadCard, type ResumeUploadCardProps } from "./ResumeUploadCard";
diff --git a/frontend/src/lib/validation/profile.ts b/frontend/src/lib/validation/profile.ts
new file mode 100644
index 00000000..491389e2
--- /dev/null
+++ b/frontend/src/lib/validation/profile.ts
@@ -0,0 +1,95 @@
+export interface ProfileValidationErrors {
+  [key: string]: string;
+}
+
+export function isValidUrl(value?: string | null): boolean {
+  if (!value) return true;
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+export function isValidHeadlineLength(value?: string | null): boolean {
+  return (value ?? "").trim().length <= 150;
+}
+
+export function isValidBioLength(value?: string | null): boolean {
+  return (value ?? "").length <= 1000;
+}
+
+export function validateProfileUrls(values: {
+  website?: string | null;
+  portfolioUrl?: string | null;
+  githubUrl?: string | null;
+  linkedinUrl?: string | null;
+}): ProfileValidationErrors {
+  const errors: ProfileValidationErrors = {};
+
+  if (values.website && !isValidUrl(values.website)) {
+    errors.website = "Please enter a valid URL.";
+  }
+  if (values.portfolioUrl && !isValidUrl(values.portfolioUrl)) {
+    errors.portfolioUrl = "Please enter a valid URL.";
+  }
+  if (values.githubUrl && !isValidUrl(values.githubUrl)) {
+    errors.githubUrl = "Please enter a valid URL.";
+  }
+  if (values.linkedinUrl && !isValidUrl(values.linkedinUrl)) {
+    errors.linkedinUrl = "Please enter a valid URL.";
+  }
+
+  return errors;
+}
+
+export function validateHeadline(value?: string | null): string | undefined {
+  if (!isValidHeadlineLength(value)) {
+    return "Headline cannot exceed 150 characters.";
+  }
+  return undefined;
+}
+
+export function validateBio(value?: string | null): string | undefined {
+  if (!isValidBioLength(value)) {
+    return "Bio cannot exceed 1000 characters.";
+  }
+  return undefined;
+}
+
+export function validateSkillEntry(name: string, level: string, existingSkills: Array<{ name: string }>, currentName?: string): string | undefined {
+  const normalizedName = name.trim().toLowerCase();
+  const hasDuplicate = existingSkills.some((skill) => skill.name.trim().toLowerCase() === normalizedName && skill.name.trim().toLowerCase() !== (currentName ?? "").trim().toLowerCase());
+
+  if (!name.trim()) {
+    return "Skill name is required.";
+  }
+  if (!level) {
+    return "Please select a skill level.";
+  }
+  if (hasDuplicate) {
+    return "Skill already exists in your list.";
+  }
+  return undefined;
+}
+
+export function validateSkillList(skills: Array<{ name: string }>): string | undefined {
+  if (skills.length === 0) {
+    return undefined;
+  }
+
+  const seen = new Set<string>();
+  for (const skill of skills) {
+    const normalized = skill.name.trim().toLowerCase();
+    if (!normalized) {
+      return "Each skill needs a name.";
+    }
+    if (seen.has(normalized)) {
+      return "Duplicate skill entries are not allowed.";
+    }
+    seen.add(normalized);
+  }
+
+  return undefined;
+}
diff --git a/frontend/src/mocks/seed.ts b/frontend/src/mocks/seed.ts
index 26882a3d..5ddca4b0 100644
--- a/frontend/src/mocks/seed.ts
+++ b/frontend/src/mocks/seed.ts
@@ -4,6 +4,17 @@
 export type ID = string;
 
 export interface Skill { name: string; }
+export interface ProfileSkill {
+  name: string;
+  level?: string;
+  category?: string;
+  yearsOfExperience?: number;
+}
+export interface EducationEntry {
+  school: string;
+  degree?: string | null;
+  years?: string | null;
+}
 export interface Builder {
   id: ID;
   name: string;
@@ -16,6 +27,19 @@ export interface Builder {
   skills: string[];
   online: boolean;
   bio: string;
+  headline?: string;
+  location?: string;
+  timezone?: string;
+  website?: string;
+  resumeUrl?: string;
+  portfolioUrl?: string;
+  githubUrl?: string;
+  linkedinUrl?: string;
+  experienceLevel?: string;
+  company?: string;
+  profileSkills?: ProfileSkill[];
+  techStack?: string[];
+  education?: EducationEntry[];
 }
 export interface Project {
   id: ID;
@@ -110,7 +134,14 @@ const AV = (seed: string) =>
   `https://api.dicebear.com/9.x/notionists-neutral/svg?seed=${encodeURIComponent(seed)}&backgroundColor=b6e3f4,c0aede,d1d4f9,ffd5dc,ffdfbf`;
 
 export const builders: Builder[] = [
-  { id: "b1", name: "Priya Sharma", handle: "priya_dev", role: "Frontend Developer", avatar: AV("Priya"), country: "India", yearsExp: 3, matchScore: 92, skills: ["React", "Next.js", "TypeScript"], online: true, bio: "Loves accessible UIs and design systems." },
+  { id: "b1", name: "Priya Sharma", handle: "priya_dev", role: "Frontend Developer", avatar: AV("Priya"), country: "India", yearsExp: 3, matchScore: 92, skills: ["React", "Next.js", "TypeScript"], online: true, bio: "Loves accessible UIs and design systems.", headline: "Designing polished, accessible product experiences", location: "Bengaluru, India", timezone: "IST (UTC+5:30)", website: "https://priya.dev", portfolioUrl: "https://priya.dev/portfolio", githubUrl: "https://github.com/priya", linkedinUrl: "https://linkedin.com/in/priya", experienceLevel: "Senior", company: "Northstar Labs", profileSkills: [
+    { name: "React", level: "Advanced", category: "frontend", yearsOfExperience: 4 },
+    { name: "Next.js", level: "Advanced", category: "frontend", yearsOfExperience: 3 },
+    { name: "TypeScript", level: "Expert", category: "frontend", yearsOfExperience: 5 },
+    { name: "Tailwind CSS", level: "Advanced", category: "frontend", yearsOfExperience: 3 },
+    { name: "Node.js", level: "Intermediate", category: "backend", yearsOfExperience: 2 },
+    { name: "Docker", level: "Intermediate", category: "devops", yearsOfExperience: 2 },
+  ], techStack: ["React", "Next.js", "TypeScript", "Tailwind CSS", "Figma"], education: [{ school: "IIIT Bangalore", degree: "B.Tech in Computer Science", years: "2018–2022" }] },
   { id: "b2", name: "Rahul Verma", handle: "rahul_v", role: "Full Stack Developer", avatar: AV("Rahul"), country: "India", yearsExp: 4, matchScore: 89, skills: ["Node.js", "MongoDB", "Express"], online: true, bio: "Builds end-to-end features fast." },
   { id: "b3", name: "Ankit Singh", handle: "ankit_be", role: "Backend Developer", avatar: AV("Ankit"), country: "India", yearsExp: 2, matchScore: 87, skills: ["Python", "FastAPI", "PostgreSQL"], online: false, bio: "APIs, queues and Postgres tuning." },
   { id: "b4", name: "Sneha Iyer", handle: "sneha_ux", role: "UI/UX Designer", avatar: AV("Sneha"), country: "India", yearsExp: 3, matchScore: 94, skills: ["Figma", "Adobe XD"], online: true, bio: "Product design for early-stage teams." },
diff --git a/frontend/src/routes/_app.profile.$username.tsx b/frontend/src/routes/_app.profile.$username.tsx
index 25b0bb0c..7047e70c 100644
--- a/frontend/src/routes/_app.profile.$username.tsx
+++ b/frontend/src/routes/_app.profile.$username.tsx
@@ -1,7 +1,12 @@
 import { createFileRoute, notFound } from "@tanstack/react-router";
-import { Card, TagChip, Avatar } from "@/components/shared/primitives";
-import { builders, currentUser, projects } from "@/mocks/seed";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Card, Avatar } from "@/components/shared/primitives";
+import { BioCard, SkillsCard, TechStackCard, ExperienceCard, EducationCard, SocialLinksCard, ResumeUploadCard } from "@/components/profile";
+import { builders, currentUser, projects, type Builder, type ProfileSkill } from "@/mocks/seed";
 import { MapPin, Calendar, Link as LinkIcon } from "lucide-react";
+import { validateBio, validateHeadline, validateProfileUrls, validateSkillEntry, validateSkillList } from "@/lib/validation/profile";
+import { updateCurrentUserProfile, type ProfilePayload } from "@/services/profile";
 
 export const Route = createFileRoute("/_app/profile/$username")({
   head: ({ params }) => ({
@@ -13,45 +18,349 @@ export const Route = createFileRoute("/_app/profile/$username")({
   component: ProfilePage,
 });
 
+type ProfileFormValues = {
+  headline: string;
+  bio: string;
+  location: string;
+  timezone: string;
+  website: string;
+  resumeUrl: string;
+  portfolioUrl: string;
+  githubUrl: string;
+  linkedinUrl: string;
+  role: string;
+  experienceLevel: string;
+  company: string;
+  profileSkills: ProfileSkill[];
+  techStack: string[];
+};
+
+function mapBuilderToFormValues(builder: Builder): ProfileFormValues {
+  return {
+    headline: builder.headline ?? "",
+    bio: builder.bio ?? "",
+    location: builder.location ?? "",
+    timezone: builder.timezone ?? "",
+    website: builder.website ?? "",
+    resumeUrl: builder.resumeUrl ?? "",
+    portfolioUrl: builder.portfolioUrl ?? "",
+    githubUrl: builder.githubUrl ?? "",
+    linkedinUrl: builder.linkedinUrl ?? "",
+    role: builder.role ?? "",
+    experienceLevel: builder.experienceLevel ?? "",
+    company: builder.company ?? "",
+    profileSkills:
+      builder.profileSkills?.length
+        ? builder.profileSkills.map((skill) => ({ ...skill, level: skill.level ?? "Intermediate", yearsOfExperience: skill.yearsOfExperience ?? 0 }))
+        : builder.skills.map((skill) => ({ name: skill, level: "Intermediate", category: "general" })),
+    techStack: builder.techStack ?? [],
+  };
+}
+
+function buildUpdatedBuilder(builder: Builder, values: ProfileFormValues): Builder {
+  return {
+    ...builder,
+    headline: values.headline || undefined,
+    bio: values.bio || undefined,
+    location: values.location || undefined,
+    timezone: values.timezone || undefined,
+    website: values.website || undefined,
+    resumeUrl: values.resumeUrl || undefined,
+    portfolioUrl: values.portfolioUrl || undefined,
+    githubUrl: values.githubUrl || undefined,
+    linkedinUrl: values.linkedinUrl || undefined,
+    role: values.role || undefined,
+    experienceLevel: values.experienceLevel || undefined,
+    company: values.company || undefined,
+    profileSkills: values.profileSkills.map((skill) => ({
+      name: skill.name,
+      level: skill.level || "Intermediate",
+      category: skill.category || "general",
+      yearsOfExperience: skill.yearsOfExperience ?? 0,
+    })),
+    techStack: values.techStack.filter(Boolean),
+    skills: values.profileSkills.map((skill) => skill.name),
+  };
+}
+
 function ProfilePage() {
   const { username } = Route.useParams();
   const me = username === currentUser.handle;
-  const b = me
-    ? { ...builders[0], name: currentUser.name, handle: currentUser.handle, avatar: currentUser.avatar, bio: "Product engineer. Ships fast, sleeps sometimes.", role: "Full Stack Developer" }
-    : builders.find((x) => x.handle === username);
-  if (!b) throw notFound();
+  const initialProfile = useMemo<Builder | null>(() => {
+    if (me) {
+      return {
+        ...builders[0],
+        id: currentUser.id,
+        name: currentUser.name,
+        handle: currentUser.handle,
+        avatar: currentUser.avatar,
+        bio: "Product engineer. Ships fast, sleeps sometimes.",
+        role: "Full Stack Developer",
+        headline: "Building dependable product experiences across the stack",
+        location: "Bengaluru, India",
+        timezone: "IST (UTC+5:30)",
+        website: "https://devlink.io",
+        resumeUrl: "",
+        portfolioUrl: "https://devlink.io/portfolio",
+        githubUrl: "https://github.com/devlink",
+        linkedinUrl: "https://linkedin.com/company/devlink",
+        experienceLevel: "Senior",
+        company: "DevLink",
+        profileSkills: [
+          { name: "React", level: "Advanced", category: "frontend", yearsOfExperience: 4 },
+          { name: "Next.js", level: "Advanced", category: "frontend", yearsOfExperience: 3 },
+          { name: "TypeScript", level: "Expert", category: "frontend", yearsOfExperience: 5 },
+          { name: "Node.js", level: "Intermediate", category: "backend", yearsOfExperience: 2 },
+          { name: "Docker", level: "Intermediate", category: "devops", yearsOfExperience: 2 },
+        ],
+        techStack: ["React", "Next.js", "TypeScript", "Node.js", "Docker"],
+        education: [{ school: "IIT Delhi", degree: "B.Tech in Computer Science", years: "2017–2021" }],
+      };
+    }
+    return builders.find((x) => x.handle === username) ?? null;
+  }, [me, username]);
+
+  const [profile, setProfile] = useState<Builder | null>(initialProfile);
+  const [isEditing, setIsEditing] = useState(false);
+  const [formValues, setFormValues] = useState<ProfileFormValues>(() => mapBuilderToFormValues(initialProfile ?? builders[0]));
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    setProfile(initialProfile);
+    setFormValues(mapBuilderToFormValues(initialProfile ?? builders[0]));
+  }, [initialProfile]);
+
+  if (!profile) throw notFound();
+
+  const isOwnProfile = currentUser.id === profile.id || username === currentUser.handle;
+
+  const handleFieldChange = (field: keyof Pick<ProfileFormValues, "headline" | "bio" | "location" | "timezone" | "website" | "portfolioUrl" | "githubUrl" | "linkedinUrl" | "role" | "experienceLevel" | "company">, value: string) => {
+    setFormValues((prev) => ({ ...prev, [field]: value }));
+    setFormErrors((prev) => ({ ...prev, [field]: "" }));
+  };
+
+  const handleSkillChange = (index: number, field: "name" | "level" | "category" | "yearsOfExperience", value: string | number) => {
+    setFormValues((prev) => ({
+      ...prev,
+      profileSkills: prev.profileSkills.map((skill, skillIndex) => (skillIndex === index ? { ...skill, [field]: value } : skill)),
+    }));
+    setFormErrors((prev) => ({ ...prev, [`skill-${index}`]: "" }));
+  };
+
+  const handleAddSkill = () => {
+    setFormValues((prev) => ({
+      ...prev,
+      profileSkills: [...prev.profileSkills, { name: "", level: "Intermediate", category: "general", yearsOfExperience: 0 }],
+    }));
+  };
+
+  const handleRemoveSkill = (index: number) => {
+    setFormValues((prev) => ({
+      ...prev,
+      profileSkills: prev.profileSkills.filter((_, skillIndex) => skillIndex !== index),
+    }));
+  };
+
+  const handleTechStackChange = (value: string) => {
+    setFormValues((prev) => ({
+      ...prev,
+      techStack: value
+        .split(",")
+        .map((item) => item.trim())
+        .filter(Boolean),
+    }));
+  };
+
+  const startEditing = () => {
+    setIsEditing(true);
+    setFormErrors({});
+  };
+
+  const cancelEditing = () => {
+    setIsEditing(false);
+    setFormValues(mapBuilderToFormValues(profile));
+    setFormErrors({});
+  };
+
+  const validateForm = () => {
+    const nextErrors: Record<string, string> = {};
+    const headlineError = validateHeadline(formValues.headline);
+    const bioError = validateBio(formValues.bio);
+    const urlErrors = validateProfileUrls({
+      website: formValues.website,
+      portfolioUrl: formValues.portfolioUrl,
+      githubUrl: formValues.githubUrl,
+      linkedinUrl: formValues.linkedinUrl,
+    });
+
+    if (headlineError) nextErrors.headline = headlineError;
+    if (bioError) nextErrors.bio = bioError;
+    Object.assign(nextErrors, urlErrors);
+
+    const skillListError = validateSkillList(formValues.profileSkills);
+    if (skillListError) nextErrors.skills = skillListError;
+
+    formValues.profileSkills.forEach((skill, index) => {
+      const skillError = validateSkillEntry(skill.name, skill.level ?? "", formValues.profileSkills.filter((_, skillIndex) => skillIndex !== index), skill.name);
+      if (skillError) nextErrors[`skill-${index}`] = skillError;
+    });
+
+    setFormErrors(nextErrors);
+    return Object.keys(nextErrors).length === 0;
+  };
+
+  const handleSave = async () => {
+    if (!validateForm()) {
+      toast.error("Please fix the highlighted fields before saving.");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const payload: ProfilePayload = {
+        headline: formValues.headline || null,
+        bio: formValues.bio || null,
+        location: formValues.location || null,
+        timezone: formValues.timezone || null,
+        website: formValues.website || null,
+        portfolio_url: formValues.portfolioUrl || null,
+        github_url: formValues.githubUrl || null,
+        linkedin_url: formValues.linkedinUrl || null,
+        role: formValues.role || null,
+        experience_level: formValues.experienceLevel || null,
+        company: formValues.company || null,
+      };
+
+      await updateCurrentUserProfile(payload);
+      const updatedProfile = buildUpdatedBuilder(profile, formValues);
+      setProfile(updatedProfile);
+      setIsEditing(false);
+      setFormErrors({});
+      toast.success("Profile updated successfully.");
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unable to update profile right now.";
+      setFormErrors((prev) => ({ ...prev, form: message }));
+      toast.error(message);
+    } finally {
+      setIsSaving(false);
+    }
+  };
 
   return (
     <div className="space-y-4">
       <Card className="p-6">
-        <div className="flex flex-wrap items-start gap-5">
-          <Avatar src={b.avatar} alt={b.name} size={96} online={b.online} />
-          <div className="min-w-0 flex-1">
-            <h1 className="text-[22px] font-bold text-foreground">{b.name}</h1>
-            <p className="text-[13px] text-muted-foreground">@{b.handle} · {b.role}</p>
-            <p className="mt-2 text-[13px] text-foreground">{b.bio}</p>
-            <div className="mt-3 flex flex-wrap items-center gap-3 text-[12px] text-muted-foreground">
-              <span className="inline-flex items-center gap-1"><MapPin size={12} /> {b.country}</span>
-              <span className="inline-flex items-center gap-1"><Calendar size={12} /> Joined 2024</span>
-              <span className="inline-flex items-center gap-1"><LinkIcon size={12} /> devlink.io/{b.handle}</span>
+        <div className="flex flex-wrap items-start justify-between gap-5">
+          <div className="flex flex-wrap items-start gap-5">
+            <Avatar src={profile.avatar} alt={profile.name} size={96} online={profile.online} />
+            <div className="min-w-0 flex-1">
+              <h1 className="text-[22px] font-bold text-foreground">{profile.name}</h1>
+              <p className="text-[13px] text-muted-foreground">@{profile.handle} · {profile.role}</p>
+              <p className="mt-2 text-[13px] text-foreground">{profile.bio}</p>
+              <div className="mt-3 flex flex-wrap items-center gap-3 text-[12px] text-muted-foreground">
+                <span className="inline-flex items-center gap-1"><MapPin size={12} /> {profile.country}</span>
+                <span className="inline-flex items-center gap-1"><Calendar size={12} /> Joined 2024</span>
+                <span className="inline-flex items-center gap-1"><LinkIcon size={12} /> devlink.io/{profile.handle}</span>
+              </div>
             </div>
           </div>
-          {!me && (
-            <button className="rounded-md bg-primary px-3 py-2 text-[13px] font-semibold text-primary-foreground hover:opacity-90">
-              Follow
-            </button>
-          )}
+
+          <div className="flex items-center gap-2">
+            {!me && (
+              <button className="rounded-md bg-primary px-3 py-2 text-[13px] font-semibold text-primary-foreground hover:opacity-90">
+                Follow
+              </button>
+            )}
+            {isOwnProfile && (
+              isEditing ? (
+                <>
+                  <button
+                    type="button"
+                    onClick={cancelEditing}
+                    className="rounded-md border border-border bg-background px-3 py-2 text-[13px] font-semibold text-foreground hover:bg-muted"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleSave}
+                    disabled={isSaving}
+                    className="rounded-md bg-primary px-3 py-2 text-[13px] font-semibold text-primary-foreground hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-70"
+                  >
+                    {isSaving ? "Saving..." : "Save"}
+                  </button>
+                </>
+              ) : (
+                <button
+                  type="button"
+                  onClick={startEditing}
+                  className="rounded-md border border-border bg-background px-3 py-2 text-[13px] font-semibold text-foreground hover:bg-muted"
+                >
+                  Edit Profile
+                </button>
+              )
+            )}
+          </div>
         </div>
       </Card>
 
-      <div className="grid gap-4 lg:grid-cols-3">
-        <Card className="p-4">
-          <p className="text-[13px] font-semibold text-foreground">Skills</p>
-          <div className="mt-3 flex flex-wrap gap-1">
-            {b.skills.map((s) => <TagChip key={s}>{s}</TagChip>)}
-          </div>
-        </Card>
-        <Card className="p-4 lg:col-span-2">
+      {formErrors.form ? <p className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-600">{formErrors.form}</p> : null}
+
+      <div className="grid gap-4 xl:grid-cols-3">
+        <BioCard
+          headline={isEditing ? undefined : profile.headline}
+          bio={isEditing ? undefined : profile.bio}
+          location={isEditing ? undefined : profile.location}
+          timezone={isEditing ? undefined : profile.timezone}
+          editable={isEditing}
+          formValues={formValues}
+          errors={formErrors}
+          onFieldChange={handleFieldChange}
+        />
+        <ExperienceCard
+          role={isEditing ? undefined : profile.role}
+          company={isEditing ? undefined : profile.company}
+          experienceLevel={isEditing ? undefined : profile.experienceLevel}
+          editable={isEditing}
+          formValues={{ role: formValues.role, company: formValues.company, experienceLevel: formValues.experienceLevel }}
+          errors={formErrors}
+          onFieldChange={handleFieldChange}
+        />
+        <SkillsCard
+          skills={isEditing ? [] : profile.profileSkills ?? []}
+          editable={isEditing}
+          formValues={formValues.profileSkills}
+          skillErrors={Object.entries(formErrors).filter(([key]) => key.startsWith("skill-") || key === "skills").map(([, message]) => message)}
+          onSkillChange={handleSkillChange}
+          onAddSkill={handleAddSkill}
+          onRemoveSkill={handleRemoveSkill}
+        />
+        <TechStackCard
+          skills={isEditing ? [] : profile.profileSkills ?? []}
+          techStack={isEditing ? undefined : profile.techStack}
+          editable={isEditing}
+          formValues={formValues.techStack}
+          error={formErrors.techStack}
+          onTechStackChange={handleTechStackChange}
+        />
+        <SocialLinksCard
+          githubUrl={isEditing ? undefined : profile.githubUrl}
+          linkedinUrl={isEditing ? undefined : profile.linkedinUrl}
+          portfolioUrl={isEditing ? undefined : profile.portfolioUrl}
+          website={isEditing ? undefined : profile.website}
+          editable={isEditing}
+          formValues={{
+            githubUrl: formValues.githubUrl,
+            linkedinUrl: formValues.linkedinUrl,
+            portfolioUrl: formValues.portfolioUrl,
+            website: formValues.website,
+          }}
+          errors={formErrors}
+          onFieldChange={handleFieldChange}
+        />
+        <ResumeUploadCard resumeUrl={profile.resumeUrl} editable={isOwnProfile && isEditing} />
+        <EducationCard education={profile.education ?? []} />
+        <Card className="p-4 xl:col-span-3">
           <p className="text-[13px] font-semibold text-foreground">Projects</p>
           <ul className="mt-3 divide-y divide-border">
             {projects.slice(0, 4).map((p) => (
diff --git a/frontend/src/services/profile.ts b/frontend/src/services/profile.ts
new file mode 100644
index 00000000..955ce96c
--- /dev/null
+++ b/frontend/src/services/profile.ts
@@ -0,0 +1,100 @@
+const API_BASE_URL = import.meta.env.VITE_API_URL ?? "http://localhost:8000/api";
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(`${API_BASE_URL}${path}`, {
+    headers: {
+      "Content-Type": "application/json",
+      ...(init?.headers ?? {}),
+    },
+    ...init,
+  });
+
+  if (!response.ok) {
+    const message = await response.text();
+    throw new Error(message || "Request failed");
+  }
+
+  if (response.status === 204) {
+    return undefined as T;
+  }
+
+  return response.json() as Promise<T>;
+}
+
+export interface ResumeUploadResponse {
+  resume_url?: string | null;
+  resumeUrl?: string | null;
+}
+
+export interface ProfilePayload {
+  headline?: string | null;
+  bio?: string | null;
+  location?: string | null;
+  timezone?: string | null;
+  website?: string | null;
+  portfolio_url?: string | null;
+  github_url?: string | null;
+  linkedin_url?: string | null;
+  role?: string | null;
+  experience_level?: string | null;
+  company?: string | null;
+}
+
+export interface ProfileSkillPayload {
+  name: string;
+  level?: string;
+  category?: string;
+  years_of_experience?: number;
+}
+
+export async function getCurrentUserProfile() {
+  return request<unknown>("/users/me");
+}
+
+export async function updateCurrentUserProfile(payload: ProfilePayload) {
+  return request<unknown>("/users/me", {
+    method: "PUT",
+    body: JSON.stringify(payload),
+  });
+}
+
+export async function uploadCurrentUserResume(file: File) {
+  const formData = new FormData();
+  formData.append("file", file);
+
+  const response = await fetch(`${API_BASE_URL}/users/me/resume`, {
+    method: "POST",
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const message = await response.text();
+    throw new Error(message || "Unable to upload resume right now.");
+  }
+
+  return response.json() as Promise<ResumeUploadResponse>;
+}
+
+export async function listSkills() {
+  return request<unknown[]>("/skills");
+}
+
+export async function createUserSkill(payload: ProfileSkillPayload) {
+  return request<unknown>("/user_skills", {
+    method: "POST",
+    body: JSON.stringify(payload),
+  });
+}
+
+export async function updateUserSkill(skillId: string, payload: ProfileSkillPayload) {
+  return request<unknown>(`/user_skills/${skillId}`, {
+    method: "PUT",
+    body: JSON.stringify(payload),
+  });
+}
+
+export async function deleteUserSkill(skillId: string) {
+  return request<unknown>(`/user_skills/${skillId}`, {
+    method: "DELETE",
+  });
+}