diff --git a/about.html b/about.html
index da80c2d..312c3eb 100644
--- a/about.html
+++ b/about.html
@@ -14,13 +14,13 @@
 
   <div class="app-shell">
     <aside class="sidebar" id="aboutSidebar">
-      <div class="user-chip">
+      <a href="profile.html" class="user-chip user-chip-link">
         <div class="avatar">TC</div>
         <div>
           <div class="name">Team Name</div>
           <div class="mini">Student account</div>
         </div>
-      </div>
+      </a>
 
       <nav class="menu">
         <a href="dashboard.html">Home</a>
diff --git a/ai.html b/ai.html
index 8d5fc1f..e6f1e30 100644
--- a/ai.html
+++ b/ai.html
@@ -14,13 +14,13 @@
 
   <div class="app-shell">
     <aside class="sidebar" id="aiSidebar">
-      <div class="user-chip">
+      <a href="profile.html" class="user-chip user-chip-link">
         <div class="avatar">TC</div>
         <div>
           <div class="name">Team Name</div>
           <div class="mini">Student account</div>
         </div>
-      </div>
+      </a>
 
       <nav class="menu">
         <a href="dashboard.html">Home</a>
diff --git a/css/style.css b/css/style.css
index dca9770..81f1b8b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -255,6 +255,15 @@ input:focus, textarea:focus, select:focus {
   color: var(--muted);
 }
 
+.user-chip-link {
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.user-chip-link:hover {
+  background: var(--menu-hover);
+}
+
 .menu {
   display: grid;
   gap: 6px;
@@ -1198,6 +1207,218 @@ input:focus, textarea:focus, select:focus {
   font-weight: 500;
 }
 
+/* ---------- PROFILE PAGE ---------- */
+.profile-hero {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  margin-bottom: 8px;
+  box-shadow: var(--shadow);
+}
+
+.profile-header {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.profile-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: var(--primary);
+  color: #fff;
+  display: grid;
+  place-items: center;
+  font-weight: 800;
+  font-size: 1.75rem;
+}
+
+.profile-info h1 {
+  margin: 0 0 6px;
+  font-size: 1.75rem;
+  font-weight: 800;
+}
+
+.profile-role {
+  margin: 0;
+  color: var(--primary);
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.profile-meta {
+  margin: 8px 0 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.profile-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.profile-stat-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  box-shadow: var(--shadow);
+}
+
+.profile-stat-icon {
+  font-size: 2rem;
+}
+
+.profile-stat-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.profile-stat-value {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--primary);
+}
+
+.profile-stat-label {
+  font-size: 0.85rem;
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.profile-activity-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+}
+
+.profile-activity-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+  box-shadow: var(--shadow);
+}
+
+.profile-activity-card h3 {
+  margin: 0 0 16px;
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+.activity-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.activity-list li {
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 0.95rem;
+}
+
+.activity-list li:last-child {
+  border-bottom: none;
+}
+
+.activity-done {
+  color: var(--success);
+  margin-right: 8px;
+}
+
+.activity-next {
+  color: var(--primary);
+  margin-right: 8px;
+}
+
+.activity-pending {
+  color: var(--muted);
+  margin-right: 8px;
+}
+
+.quiz-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.quiz-summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.quiz-summary-row:last-child {
+  border-bottom: none;
+}
+
+.quiz-summary-row span {
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.quiz-summary-row strong {
+  color: var(--primary);
+}
+
+.profile-info-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+  box-shadow: var(--shadow);
+}
+
+.profile-info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.profile-info-row:last-child {
+  border-bottom: none;
+}
+
+.profile-info-label {
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.profile-info-value {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.profile-actions {
+  margin-top: 32px;
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 768px) {
+  .profile-stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .profile-activity-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* ---------- RESPONSIVE UPDATES ---------- */
 @media (max-width: 1024px) {
   .resource-grid,
diff --git a/dashboard.html b/dashboard.html
index 535228b..dd4ff82 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -14,13 +14,13 @@
 
   <div class="app-shell">
     <aside class="sidebar" id="dashboardSidebar">
-      <div class="user-chip">
+      <a href="profile.html" class="user-chip user-chip-link">
         <div class="avatar">TC</div>
         <div>
           <div class="name">Team Name</div>
           <div class="mini">Student account</div>
         </div>
-      </div>
+      </a>
 
       <nav class="menu">
         <a href="dashboard.html" class="active">Home</a>
diff --git a/js/app.js b/js/app.js
index 42a5b84..60d535d 100644
--- a/js/app.js
+++ b/js/app.js
@@ -51,3 +51,6 @@ toggleSidebar("menuToggleResources", "resourcesSidebar");
 
 // About
 toggleSidebar("menuToggleAbout", "aboutSidebar");
+
+// Profile
+toggleSidebar("menuToggleProfile", "profileSidebar");
diff --git a/lesson.html b/lesson.html
index 30e14a3..03ce5b3 100644
--- a/lesson.html
+++ b/lesson.html
@@ -14,13 +14,13 @@
 
   <div class="lesson-shell">
     <aside class="sidebar" id="lessonSidebar">
-      <div class="user-chip">
+      <a href="profile.html" class="user-chip user-chip-link">
         <div class="avatar">TC</div>
         <div>
           <div class="name">Team Name</div>
           <div class="mini">Learning panel</div>
         </div>
-      </div>
+      </a>
 
       <nav class="menu">
         <a href="dashboard.html">Home</a>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..44c0771
--- /dev/null
+++ b/package.json
@@ -0,0 +1 @@
+{"name":"coderv","version":"1.0.0","description":"A web-based programming learning platform","scripts":{"start":"serve","serve":"serve","dev":"serve"},"devDependencies":{"serve":"^14.2.4"}}
diff --git a/profile.html b/profile.html
new file mode 100644
index 0000000..12f9fd5
--- /dev/null
+++ b/profile.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>CoderV | Profile</title>
+  <script>
+    document.documentElement.setAttribute('data-theme',
+      localStorage.getItem('coderv-theme') ||
+      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+    );
+  </script>
+  <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+  <div class="mobile-top">
+    <strong>CoderV Profile</strong>
+    <button class="hamburger" id="menuToggleProfile">Menu</button>
+  </div>
+
+  <div class="app-shell">
+    <aside class="sidebar" id="profileSidebar">
+      <a href="profile.html" class="user-chip user-chip-link">
+        <div class="avatar">TC</div>
+        <div>
+          <div class="name">Team Name</div>
+          <div class="mini">Student account</div>
+        </div>
+      </a>
+
+      <nav class="menu">
+        <a href="dashboard.html">Home</a>
+        <a href="lesson.html">Learning</a>
+        <a href="quiz.html">Extra Quiz</a>
+        <a href="ai.html">Ask AI</a>
+      </nav>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div class="topbar-inner">
+          <nav class="tabs">
+            <a href="dashboard.html">How to use</a>
+            <a href="resources.html">Resources</a>
+            <a href="about.html">About</a>
+          </nav>
+          <div class="topbar-actions">
+            <button class="theme-toggle" id="themeToggle" type="button" aria-label="Switch to dark theme">
+              <svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+              <svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
+              <span class="theme-toggle-text">Dark</span>
+            </button>
+            <a class="logout-link" href="index.html">Log out</a>
+          </div>
+        </div>
+      </header>
+
+      <section class="content">
+        <article class="profile-hero">
+          <div class="profile-header">
+            <div class="profile-avatar">TC</div>
+            <div class="profile-info">
+              <h1>Team Name</h1>
+              <p class="profile-role">Student account</p>
+              <p class="profile-meta">Member since Jan 2025</p>
+            </div>
+          </div>
+        </article>
+
+        <h2 class="section-title">Learning Stats</h2>
+        <div class="profile-stats-grid">
+          <div class="profile-stat-card">
+            <div class="profile-stat-icon">📚</div>
+            <div class="profile-stat-content">
+              <span class="profile-stat-value">2 / 6</span>
+              <span class="profile-stat-label">Lessons completed</span>
+            </div>
+          </div>
+          <div class="profile-stat-card">
+            <div class="profile-stat-icon">📊</div>
+            <div class="profile-stat-content">
+              <span class="profile-stat-value">33%</span>
+              <span class="profile-stat-label">Course progress</span>
+            </div>
+          </div>
+          <div class="profile-stat-card">
+            <div class="profile-stat-icon">✅</div>
+            <div class="profile-stat-content">
+              <span class="profile-stat-value">12</span>
+              <span class="profile-stat-label">Quizzes available</span>
+            </div>
+          </div>
+          <div class="profile-stat-card">
+            <div class="profile-stat-icon">🔥</div>
+            <div class="profile-stat-content">
+              <span class="profile-stat-value">5</span>
+              <span class="profile-stat-label">Day streak</span>
+            </div>
+          </div>
+        </div>
+
+        <h2 class="section-title">Activity Overview</h2>
+        <div class="profile-activity-grid">
+          <article class="profile-activity-card">
+            <h3>Recent lessons</h3>
+            <ul class="activity-list">
+              <li><span class="activity-done">✓</span> Lesson 1: Introduction</li>
+              <li><span class="activity-done">✓</span> Lesson 2: Variables</li>
+              <li><span class="activity-next">→</span> Lesson 3: Ratios</li>
+              <li><span class="activity-pending">○</span> Lesson 4: Percentages</li>
+              <li><span class="activity-pending">○</span> Lesson 5: Data basics</li>
+            </ul>
+          </article>
+          <article class="profile-activity-card">
+            <h3>Quiz performance</h3>
+            <div class="quiz-summary">
+              <div class="quiz-summary-row">
+                <span>Completed</span>
+                <strong>3</strong>
+              </div>
+              <div class="quiz-summary-row">
+                <span>Average score</span>
+                <strong>78%</strong>
+              </div>
+              <div class="quiz-summary-row">
+                <span>Best score</span>
+                <strong>92%</strong>
+              </div>
+            </div>
+          </article>
+        </div>
+
+        <h2 class="section-title">Account Information</h2>
+        <article class="profile-info-card">
+          <div class="profile-info-row">
+            <span class="profile-info-label">Display name</span>
+            <span class="profile-info-value">Team Name</span>
+          </div>
+          <div class="profile-info-row">
+            <span class="profile-info-label">Account type</span>
+            <span class="profile-info-value">Student</span>
+          </div>
+          <div class="profile-info-row">
+            <span class="profile-info-label">AI questions asked</span>
+            <span class="profile-info-value">24</span>
+          </div>
+          <div class="profile-info-row">
+            <span class="profile-info-label">Total study time</span>
+            <span class="profile-info-value">~12 hours</span>
+          </div>
+        </article>
+
+        <div class="profile-actions">
+          <a href="dashboard.html" class="btn btn-primary">Back to Dashboard</a>
+          <a href="lesson.html" class="btn btn-ghost">Continue Learning</a>
+        </div>
+      </section>
+    </main>
+  </div>
+
+  <script src="js/app.js"></script>
+</body>
+</html>
diff --git a/quiz.html b/quiz.html
index 0e52f57..0def208 100644
--- a/quiz.html
+++ b/quiz.html
@@ -14,13 +14,13 @@
 
   <div class="app-shell">
     <aside class="sidebar" id="quizSidebar">
-      <div class="user-chip">
+      <a href="profile.html" class="user-chip user-chip-link">
         <div class="avatar">TC</div>
         <div>
           <div class="name">Team Name</div>
           <div class="mini">Student account</div>
         </div>
-      </div>
+      </a>
 
       <nav class="menu">
         <a href="dashboard.html">Home</a>
diff --git a/resources.html b/resources.html
index 83f966a..e808875 100644
--- a/resources.html
+++ b/resources.html
@@ -14,13 +14,13 @@
 
   <div class="app-shell">
     <aside class="sidebar" id="resourcesSidebar">
-      <div class="user-chip">
+      <a href="profile.html" class="user-chip user-chip-link">
         <div class="avatar">TC</div>
         <div>
           <div class="name">Team Name</div>
           <div class="mini">Student account</div>
         </div>
-      </div>
+      </a>
 
       <nav class="menu">
         <a href="dashboard.html">Home</a>