diff --git a/src/Analysim.Web/ClientApp/package-lock.json b/src/Analysim.Web/ClientApp/package-lock.json
index 361c055d..e82d36b6 100644
--- a/src/Analysim.Web/ClientApp/package-lock.json
+++ b/src/Analysim.Web/ClientApp/package-lock.json
@@ -15757,13 +15757,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.1.tgz",
       "integrity": "sha512-f1G1WGDXEU/RN1TWAxBPQgQudtLnLQPyiWdtypkPC+mVYNKFKH/HYXSxH4MVNqwF8M0eDsoiU7HumJHCg/L/jg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@csstools/selector-specificity": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.1.tgz",
       "integrity": "sha512-aG20vknL4/YjQF9BSV7ts4EWm/yrjagAN7OWBNmlbEOUiu0llj4OGrFoOKK3g2vey4/p2omKCoHrWtPxSwV3HA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@discoveryjs/json-ext": {
       "version": "0.5.7",
@@ -15932,7 +15934,8 @@
       "version": "14.0.3",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-14.0.3.tgz",
       "integrity": "sha512-PwvgCeY7mbijazovpA0ggeo81A3yzwOb8AfVD3yfGT15Z2qnEVyL+05Tj6ttRTngceF3gsERamFcB6lRKdcjdw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -16834,7 +16837,8 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -17234,7 +17238,8 @@
     "bootstrap": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ=="
+      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "requires": {}
     },
     "bootstrap-icons": {
       "version": "1.11.3",
@@ -17921,7 +17926,8 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
       "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "css-select": {
       "version": "4.3.0",
@@ -19682,7 +19688,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -20487,7 +20494,8 @@
         "ws": {
           "version": "7.5.9",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
+          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "requires": {}
         }
       }
     },
@@ -20711,7 +20719,8 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.7.0.tgz",
       "integrity": "sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "karma-source-map-support": {
       "version": "1.4.0",
@@ -21108,7 +21117,8 @@
     "marked-highlight": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/marked-highlight/-/marked-highlight-2.1.3.tgz",
-      "integrity": "sha512-t35JWm2u8HanOJ+gSJBAYQ0Jgr3vy+gl7ORAXN8bSEQFHl5FYXH0A7YXVMrfhmKaSuBSy6LidXECn3U9Qv/dHA=="
+      "integrity": "sha512-t35JWm2u8HanOJ+gSJBAYQ0Jgr3vy+gl7ORAXN8bSEQFHl5FYXH0A7YXVMrfhmKaSuBSy6LidXECn3U9Qv/dHA==",
+      "requires": {}
     },
     "media-typer": {
       "version": "0.3.0",
@@ -22270,13 +22280,15 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
       "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-gap-properties": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.3.tgz",
       "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-image-set-function": {
       "version": "4.0.6",
@@ -22302,7 +22314,8 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
       "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-lab-function": {
       "version": "4.2.0",
@@ -22329,19 +22342,22 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
       "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-media-minmax": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
       "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-extract-imports": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
       "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.5",
@@ -22392,13 +22408,15 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.3.tgz",
       "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-page-break": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
       "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-place": {
       "version": "7.0.4",
@@ -22475,7 +22493,8 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
       "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-selector-not": {
       "version": "5.0.0",
@@ -23036,7 +23055,8 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -23588,7 +23608,8 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz",
       "integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "stylus": {
       "version": "0.57.0",
@@ -23748,7 +23769,8 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -24168,7 +24190,8 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -24268,7 +24291,8 @@
           "version": "8.8.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
           "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -24409,7 +24433,8 @@
       "version": "8.2.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
       "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "xml-name-validator": {
       "version": "3.0.0",
diff --git a/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-following/dashboard-following.component.scss b/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-following/dashboard-following.component.scss
index 19d0c4ec..bd447b93 100644
--- a/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-following/dashboard-following.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-following/dashboard-following.component.scss
@@ -1,7 +1,134 @@
 .card-header {
   background-color: var(--background-color-tertiary);
+  border-bottom: 1px solid var(--border-color);
+  padding: var(--space-3) var(--space-4);
+  font-weight: 600;
+  font-size: var(--fs-16);
+  color: var(--c-text-0);
 }
 
-.nav-item:hover {
+.nav-item {
   cursor: pointer;
-}
\ No newline at end of file
+
+  .nav-link {
+    color: var(--c-text-500);
+    border: none;
+    border-bottom: 2px solid transparent;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--fs-14);
+    font-weight: 500;
+    transition: var(--motion-fast);
+
+    &:hover {
+      color: var(--c-text-0);
+      border-bottom-color: var(--c-accent-600);
+    }
+
+    &.active {
+      color: var(--c-accent-600);
+      border-bottom-color: var(--c-accent-600);
+      background: transparent;
+    }
+  }
+}
+
+.nav-tabs-content {
+  padding: var(--space-2) 0;
+
+  .list-unstyled {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      padding: var(--space-2) 0;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      }
+
+      a {
+        color: var(--c-link);
+        text-decoration: none;
+        transition: var(--motion-fast);
+        display: flex;
+        align-items: center;
+        padding: var(--space-2) var(--space-2);
+        border-radius: var(--radius-1);
+        margin: calc(var(--space-2) * -1);
+        font-size: var(--fs-14);
+
+        i {
+          margin-right: var(--space-2);
+          width: 14px;
+          text-align: center;
+        }
+
+        &:hover {
+          color: var(--c-link-hover);
+          background: rgba(37, 109, 133, 0.05);
+        }
+      }
+
+      .d-flex {
+        justify-content: center;
+        padding: var(--space-4) 0;
+
+        .spinner-border {
+          width: 2rem;
+          height: 2rem;
+          border-color: var(--c-accent-600);
+          border-right-color: transparent;
+        }
+
+        p {
+          color: var(--c-text-500);
+          font-size: var(--fs-14);
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+/* Input styling */
+.form {
+  .input-group {
+    margin-bottom: 0;
+
+    .form-control {
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-1);
+      padding: var(--space-2) var(--space-3);
+      font-size: var(--fs-14);
+      transition: var(--motion-fast);
+
+      &:focus {
+        border-color: var(--c-accent-600);
+        box-shadow: 0 0 0 3px rgba(37, 109, 133, 0.1);
+      }
+
+      &::placeholder {
+        color: var(--c-text-500);
+      }
+    }
+
+    .input-group-append {
+      margin-left: -1px;
+
+      .input-group-text {
+        border: 1px solid var(--border-color);
+        background: white;
+        color: var(--c-text-500);
+        cursor: pointer;
+        transition: var(--motion-fast);
+        padding: var(--space-2) var(--space-3);
+        border-left: none;
+
+        &:hover {
+          color: var(--c-accent-600);
+        }
+      }
+    }
+  }
+}
diff --git a/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-quickstart/dashboard-quickstart.component.scss b/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-quickstart/dashboard-quickstart.component.scss
index 33e51056..a613a3c0 100644
--- a/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-quickstart/dashboard-quickstart.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-quickstart/dashboard-quickstart.component.scss
@@ -1,13 +1,122 @@
 .card-header {
   background-color: var(--background-color-tertiary);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .btn-sm {
-  background-color: var(--button-background-color);
-  color: var(--primary-color);
-  border:none;
+  background-color: var(--c-accent-600);
+  color: white;
+  border: none;
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-1);
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--motion-fast);
+  white-space: nowrap;
+
+  &:hover {
+    background-color: var(--c-brand-800);
+  }
 }
 
-.nav-item:hover {
+.nav-item {
   cursor: pointer;
-}
\ No newline at end of file
+
+  &:hover .nav-link {
+    border-bottom-color: var(--c-accent-600);
+  }
+}
+
+.nav-tabs-content {
+  padding: var(--space-2) 0;
+
+  .list-unstyled {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      padding: var(--space-2) 0;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      }
+
+      a {
+        color: var(--c-link);
+        text-decoration: none;
+        transition: var(--motion-fast);
+        display: flex;
+        align-items: center;
+        padding: var(--space-2) var(--space-2);
+        border-radius: var(--radius-1);
+        margin: calc(var(--space-2) * -1);
+
+        i {
+          margin-right: var(--space-2);
+          width: 14px;
+          text-align: center;
+        }
+
+        &:hover {
+          color: var(--c-link-hover);
+          background: rgba(37, 109, 133, 0.05);
+        }
+      }
+
+      .d-flex {
+        justify-content: center;
+        padding: var(--space-4) 0;
+
+        .spinner-border {
+          width: 2rem;
+          height: 2rem;
+          border-color: var(--c-accent-600);
+          border-right-color: transparent;
+        }
+
+        p {
+          color: var(--c-text-500);
+        }
+      }
+    }
+  }
+}
+
+/* Input styling */
+.form {
+  .input-group {
+    margin-bottom: 0;
+
+    .form-control {
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-1);
+      padding: var(--space-2) var(--space-3);
+      font-size: var(--fs-14);
+      transition: var(--motion-fast);
+
+      &:focus {
+        border-color: var(--c-accent-600);
+        box-shadow: 0 0 0 3px rgba(37, 109, 133, 0.1);
+      }
+    }
+
+    .input-group-append {
+      margin-left: -1px;
+
+      .input-group-text {
+        border: 1px solid var(--border-color);
+        background: white;
+        color: var(--c-text-500);
+        cursor: pointer;
+        transition: var(--motion-fast);
+        padding: var(--space-2) var(--space-3);
+        border-left: none;
+
+        &:hover {
+          color: var(--c-accent-600);
+        }
+      }
+    }
+  }
+}
diff --git a/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-social/dashboard-social.component.scss b/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-social/dashboard-social.component.scss
index 19d0c4ec..4eaa7329 100644
--- a/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-social/dashboard-social.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-social/dashboard-social.component.scss
@@ -1,7 +1,66 @@
-.card-header {
-  background-color: var(--background-color-tertiary);
+.card {
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: all var(--motion-fast);
+  background: white;
+  height: 100%;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(37, 109, 133, 0.12);
+    border-color: var(--c-accent-600);
+  }
+
+  .card-header {
+    background-color: var(--background-color-tertiary);
+    border-bottom: 1px solid var(--border-color);
+    padding: var(--space-3) var(--space-4);
+    font-weight: 600;
+    font-size: var(--fs-16);
+    color: var(--c-text-0);
+  }
+
+  .list-group {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border: none;
+
+    .list-group-item {
+      border: none;
+      padding: 0;
+      background: transparent;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      }
+
+      &.d-flex {
+        justify-content: center;
+        padding: var(--space-4);
+
+        p {
+          color: var(--c-text-500);
+          font-size: var(--fs-14);
+          margin: 0;
+        }
+      }
+    }
+
+    .list-group-flush {
+      margin: 0;
+
+      .list-group-item {
+        padding: var(--space-3) var(--space-4);
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
 }
 
 .nav-item:hover {
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard.component.html b/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard.component.html
index df8e1baa..954b1314 100644
--- a/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard.component.html
@@ -1,29 +1,24 @@
 <!-- Container Start -->
-<div class="container-fluid my-5" *ngIf="(currentUser$ | async) as currentUser">
+<div class="container-fluid dashboard-container" *ngIf="(currentUser$ | async) as currentUser">
     <!-- Row Start -->
-    <div class="row justify-content-center">
-        <div class="col-md-10">
+    <div class="row">
+        <!-- Sidebar Column Start -->
+        <div class="col-md-4">
             <div class="row">
-                <!-- Profile Description Column Start -->
-                <div class="col-md-4">
-                    <div class="row mb-3">
-                        <div class="col-md-12">
-                            <app-dashboard-quickstart [currentUser]="currentUser"></app-dashboard-quickstart>
-                        </div>        
-                    </div>
-                    <div class="row">
-                        <div class="col-md-12">
-                            <app-dashboard-following [currentUser]="currentUser"></app-dashboard-following>
-                        </div>
-                    </div>
-                </div> <!-- Profile Description Column End -->
-                <!-- Profile Follow List Column Start -->
-                <div class="col-md-8">
-                        <app-dashboard-social></app-dashboard-social>  
-                </div> <!-- Profile Follow List Column End -->
+                <div class="col-md-12">
+                    <app-dashboard-quickstart [currentUser]="currentUser"></app-dashboard-quickstart>
+                </div>
             </div>
-        </div>
-        
-    </div> <!-- Row End -->
+            <div class="row mt-4">
+                <div class="col-md-12">
+                    <app-dashboard-following [currentUser]="currentUser"></app-dashboard-following>
+                </div>
+            </div>
+        </div> <!-- Sidebar Column End -->
+        <!-- Main Content Column Start -->
+        <div class="col-md-8">
+                <app-dashboard-social></app-dashboard-social>
+        </div> <!-- Main Content Column End -->
+    </div>
 </div> <!-- Container End -->
     
diff --git a/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard.component.scss b/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard.component.scss
index e69de29b..591dd25b 100644
--- a/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard.component.scss
@@ -0,0 +1,335 @@
+::ng-deep .dashboard-container {
+  padding: var(--space-5);
+  background: linear-gradient(135deg, rgba(37, 109, 133, 0.03) 0%, rgba(2, 43, 91, 0.02) 100%);
+  min-height: calc(100vh - 200px);
+
+  .row {
+    row-gap: var(--space-4);
+  }
+
+  .col-md-4,
+  .col-md-8 {
+    padding-left: var(--space-3);
+    padding-right: var(--space-3);
+  }
+
+  /* Card styling */
+  .card {
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    transition: all var(--motion-fast);
+    background: white;
+    overflow: hidden;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(37, 109, 133, 0.12);
+      border-color: var(--c-accent-600);
+    }
+
+    .card-header {
+      background-color: var(--background-color-tertiary);
+      border-bottom: 1px solid var(--border-color);
+      padding: var(--space-4);
+      font-weight: 600;
+      font-size: var(--fs-16);
+      color: var(--c-text-0);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      span {
+        margin: 0;
+      }
+    }
+
+    .card-body {
+      padding: var(--space-4);
+
+      .card-block {
+        margin-bottom: var(--space-4);
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .form {
+        .input-group {
+          margin-bottom: var(--space-2);
+
+          .form-control {
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-1);
+            padding: var(--space-2) var(--space-3);
+            font-size: var(--fs-14);
+            transition: var(--motion-fast);
+
+            &:focus {
+              border-color: var(--c-accent-600);
+              box-shadow: 0 0 0 3px rgba(37, 109, 133, 0.1);
+            }
+
+            &::placeholder {
+              color: var(--c-text-500);
+            }
+          }
+
+          .input-group-append {
+            .input-group-text {
+              border: 1px solid var(--border-color);
+              background: white;
+              color: var(--c-text-500);
+              cursor: pointer;
+              transition: var(--motion-fast);
+
+              &:hover {
+                color: var(--c-accent-600);
+              }
+            }
+          }
+        }
+      }
+
+      /* Nav tabs styling */
+      .nav-tabs {
+        border-bottom: 2px solid var(--border-color);
+        gap: var(--space-2);
+        margin-bottom: var(--space-3);
+
+        .nav-item {
+          .nav-link {
+            color: var(--c-text-500);
+            border: none;
+            border-bottom: 2px solid transparent;
+            padding: var(--space-2) var(--space-3);
+            font-size: var(--fs-14);
+            font-weight: 500;
+            transition: var(--motion-fast);
+            cursor: pointer;
+
+            &:hover {
+              color: var(--c-text-0);
+              border-bottom-color: var(--c-accent-600);
+            }
+
+            &.active {
+              color: var(--c-accent-600);
+              border-bottom-color: var(--c-accent-600);
+              background: transparent;
+            }
+
+            &.disabled {
+              color: var(--c-text-500);
+              opacity: 0.5;
+              cursor: not-allowed;
+            }
+          }
+        }
+      }
+
+      /* List styling */
+      .nav-tabs-content {
+        padding: var(--space-2) 0;
+
+        .list-unstyled {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+
+          li {
+            padding: var(--space-2) 0;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+
+            &:last-child {
+              border-bottom: none;
+            }
+
+            a {
+              display: flex;
+              align-items: center;
+              color: var(--c-link);
+              text-decoration: none;
+              font-size: var(--fs-14);
+              transition: var(--motion-fast);
+              padding: var(--space-2);
+              border-radius: var(--radius-1);
+              margin: calc(var(--space-2) * -1);
+
+              i {
+                margin-right: var(--space-2);
+                width: 16px;
+                text-align: center;
+              }
+
+              &:hover {
+                color: var(--c-link-hover);
+                background: rgba(37, 109, 133, 0.05);
+
+              }
+            }
+
+            .d-flex {
+              justify-content: center;
+              padding: var(--space-4) 0;
+
+              .spinner-border {
+                width: 2rem;
+                height: 2rem;
+                border-color: var(--c-accent-600);
+                border-right-color: transparent;
+              }
+
+              p {
+                color: var(--c-text-500);
+                font-size: var(--fs-14);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /* Button styling */
+  .btn-sm {
+    background-color: var(--c-accent-600);
+    color: white;
+    border: none;
+    padding: var(--space-1) var(--space-3);
+    border-radius: var(--radius-1);
+    font-size: var(--fs-14);
+    font-weight: 500;
+    cursor: pointer;
+    transition: var(--motion-fast);
+
+    &:hover {
+      background-color: var(--c-brand-800);
+      box-shadow: 0 2px 8px rgba(37, 109, 133, 0.2);
+    }
+
+    &:active {
+      transform: translateY(1px);
+    }
+  }
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  ::ng-deep .dashboard-container {
+    padding: var(--space-4);
+
+    .col-md-4,
+    .col-md-8 {
+      padding-left: var(--space-2);
+      padding-right: var(--space-2);
+    }
+
+    .container-fluid {
+      padding: 0;
+    }
+
+    .row {
+      margin-left: calc(var(--space-2) * -1);
+      margin-right: calc(var(--space-2) * -1);
+    }
+
+    .card {
+      .card-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-2);
+
+        span {
+          width: 100%;
+        }
+
+        .btn-sm {
+          width: 100%;
+        }
+      }
+
+      .card-body {
+        padding: var(--space-3);
+
+        .form {
+          .input-group {
+            .input-group-append {
+              margin-left: -1px;
+
+              .input-group-text {
+                border-left: none;
+              }
+            }
+          }
+        }
+
+        .nav-tabs {
+          gap: 0;
+
+          .nav-item {
+            flex: 1;
+
+            .nav-link {
+              padding: var(--space-2) var(--space-1);
+              text-align: center;
+              border-bottom: 2px solid var(--border-color);
+              border-radius: 0;
+
+              &.active {
+                border-bottom-color: var(--c-accent-600);
+              }
+            }
+          }
+        }
+
+        .nav-tabs-content {
+          .list-unstyled {
+            li {
+              padding: var(--space-1) 0;
+
+              a {
+                padding: var(--space-1);
+                margin: 0;
+                font-size: var(--fs-13);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  ::ng-deep .dashboard-container {
+    padding: var(--space-3);
+
+    .col-md-4,
+    .col-md-8 {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .card {
+      .card-body {
+        padding: var(--space-2);
+
+        .card-block {
+          margin-bottom: var(--space-2);
+        }
+
+        .nav-tabs {
+          margin-bottom: var(--space-2);
+
+          .nav-item {
+            .nav-link {
+              padding: var(--space-1) var(--space-2);
+              font-size: var(--fs-13);
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.html
index b0fa151f..5cdf7e3f 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.html
@@ -1,107 +1,127 @@
-<div class="card data-table-card">
-  <p-table #table
-           [value]="loadedData"
-           [(selection)]="selectedData"
-           [tableStyle]="{'min-width': '100%'}"
-           [resizableColumns]="true"
-           styleClass="p-datatable-gridlines"
-           [scrollable]="true"
-           scrollHeight="100%"
-           [rows]="50"
-           [paginator]="true"
-           [loading]="loading"
-           [rowsPerPageOptions]="[10, 25, 50]"
-           [showCurrentPageReport]="true"
-           currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-           [filterDelay]="0"
-           [globalFilterFields]="selectedColumns"
-           [columns]="selectedColumns"
-           [reorderableColumns]="true"
-           (onSort)="resetSelectedData($event)"
-           (onFilter)="resetSelectedData($event)">
+<div class="csv-container">
+  <div class="data-table-card">
+    <p-table #table
+             [value]="loadedData"
+             [(selection)]="selectedData"
+             [tableStyle]="{'min-width': '100%'}"
+             [resizableColumns]="true"
+             styleClass="p-datatable-gridlines csv-datatable"
+             [scrollable]="true"
+             scrollHeight="100%"
+             [rows]="50"
+             [paginator]="true"
+             [loading]="loading"
+             [rowsPerPageOptions]="[10, 25, 50]"
+             [showCurrentPageReport]="true"
+             currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+             [filterDelay]="0"
+             [globalFilterFields]="selectedColumns"
+             [columns]="selectedColumns"
+             [reorderableColumns]="true"
+             (onSort)="resetSelectedData($event)"
+             (onFilter)="resetSelectedData($event)">
 
-    <ng-template pTemplate="caption">
-      <div class="table-header">
-        <!-- Clear -->
-        <button type="button"
-                class="btn btn-outline-primary"
-                (click)="clear(table)">
-          <i class="pi pi-filter-slash" aria-hidden="true"></i>
-          <span>Clear</span>
-        </button>
+      <ng-template pTemplate="caption">
+        <div class="table-controls">
+          <div class="table-header">
+            <div class="header-filters">
+              <!-- Clear -->
+              <button type="button"
+                      class="btn btn-sm btn-outline-secondary"
+                      (click)="clear(table)"
+                      title="Clear filters">
+                <i class="pi pi-filter-slash" aria-hidden="true"></i>
+                <span>Clear Filters</span>
+              </button>
 
-        <!-- Search -->
-        <span class="p-input-icon-left table-search">
-          <i class="pi pi-search"></i>
-          <input #searchFilter
-                 pInputText
-                 type="text"
-                 placeholder="Global Search"
-                 (input)="applyFilterGlobal($event, 'contains')" />
-        </span>
-      </div>
+              <!-- Search -->
+              <span class="p-input-icon-left table-search">
+                <i class="pi pi-search"></i>
+                <input #searchFilter
+                       pInputText
+                       type="text"
+                       placeholder="Search all columns..."
+                       (input)="applyFilterGlobal($event, 'contains')"
+                       class="search-input" />
+              </span>
+            </div>
 
-      <div class="table-tools">
-        <p-multiSelect [options]="cols"
-                       [(ngModel)]="selectedColumns"
-                       selectedItemsLabel="{0} columns selected"
-                       [style]="{'min-width': '200px'}"
-                       placeholder="Choose Columns">
-          <ng-template let-item pTemplate="selectedItem">{{item}}</ng-template>
-          <ng-template let-item pTemplate="item">{{item}}</ng-template>
-        </p-multiSelect>
+            <div class="header-actions">
+              <p-multiSelect [options]="cols"
+                             [(ngModel)]="selectedColumns"
+                             selectedItemsLabel="{0} columns selected"
+                             [style]="{'min-width': '200px'}"
+                             placeholder="Select Columns"
+                             [showToggleAll]="true"
+                             class="column-selector">
+                <ng-template let-item pTemplate="selectedItem">{{item}}</ng-template>
+                <ng-template let-item pTemplate="item">{{item}}</ng-template>
+              </p-multiSelect>
 
-        <button type="button"
-                class="btn btn-primary"
-                (click)="toggleModalVisualizeData()">
-          Visualize Data
-        </button>
-      </div>
-    </ng-template>
+              <button type="button"
+                      class="btn btn-primary"
+                      (click)="toggleModalVisualizeData()"
+                      title="Visualize selected data">
+                <i class="pi pi-chart-bar mr-2" aria-hidden="true"></i>
+                Visualize
+              </button>
+            </div>
+          </div>
+        </div>
+      </ng-template>
 
-    <ng-template pTemplate="header" let-columns>
-      <tr>
-        <th style="width: 4rem" pResizableColumn>
-          <p-checkbox [(ngModel)]="checked"
-                      [binary]="true"
-                      (onChange)="onCheckboxClick($event)">
-          </p-checkbox>
-        </th>
+      <ng-template pTemplate="header" let-columns>
+        <tr>
+          <th style="width: 3rem" class="checkbox-col" pResizableColumn>
+            <p-checkbox [(ngModel)]="checked"
+                        [binary]="true"
+                        (onChange)="onCheckboxClick($event)">
+            </p-checkbox>
+          </th>
 
-        <th *ngFor="let column of columns"
-            [pSortableColumn]="column"
-            pResizableColumn
-            pReorderableColumn>
-          <div class="flex justify-content-between align-items-center">
-            {{column}}
-            <p-sortIcon field="{{column}}"></p-sortIcon>
-            <p-columnFilter [type]="columnDataTypes[column]"
-                            [field]="column"
-                            display="menu"
-                            class="ml-auto">
-            </p-columnFilter>
-          </div>
-        </th>
-      </tr>
-    </ng-template>
+          <th *ngFor="let column of columns"
+              [pSortableColumn]="column"
+              pResizableColumn
+              pReorderableColumn
+              class="data-header">
+            <div class="header-content">
+              <span class="column-name">{{column}}</span>
+              <div class="header-icons">
+                <p-sortIcon field="{{column}}"></p-sortIcon>
+                <p-columnFilter [type]="columnDataTypes[column]"
+                                [field]="column"
+                                display="menu"
+                                class="ml-auto">
+                </p-columnFilter>
+              </div>
+            </div>
+          </th>
+        </tr>
+      </ng-template>
 
-    <ng-template pTemplate="body" let-item let-columns="columns">
-      <tr>
-        <td>
-          <p-tableCheckbox [value]="item"></p-tableCheckbox>
-        </td>
-        <td *ngFor="let col of columns">{{ item[col] }}</td>
-      </tr>
-    </ng-template>
+      <ng-template pTemplate="body" let-item let-columns="columns">
+        <tr>
+          <td class="checkbox-col">
+            <p-tableCheckbox [value]="item"></p-tableCheckbox>
+          </td>
+          <td *ngFor="let col of columns" class="data-cell">
+            <span class="cell-content">{{ item[col] }}</span>
+          </td>
+        </tr>
+      </ng-template>
 
-  </p-table>
+    </p-table>
 
-  <div class="export-row">
-    <button type="button"
-            class="btn btn-primary"
-            (click)="seeSelectedData()">
-      Export Data
-    </button>
+    <div class="table-footer">
+      <button type="button"
+              class="btn btn-success"
+              (click)="seeSelectedData()"
+              [disabled]="!selectedData || selectedData.length === 0"
+              title="Export selected rows to CSV">
+        <i class="pi pi-download mr-2" aria-hidden="true"></i>
+        Export Data
+      </button>
+    </div>
   </div>
 </div>
 
@@ -111,4 +131,4 @@
                       [data]="(!selectedData || selectedData.length===0) ? tableData : selectedData"
                       [columnDataTypes]="columnDataTypes">
   </app-visualize-data>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.scss
index 7976b6e5..106534f8 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.scss
@@ -3,63 +3,355 @@
   height: 100%;
 }
 
+.csv-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: var(--space-3);
+  background: white;
+}
+
 .data-table-card {
   height: 100%;
   display: flex;
   flex-direction: column;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* Table controls */
+.table-controls {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border-color);
+  background: var(--background-color-tertiary);
 }
 
-/* Caption rows */
 .table-header {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-2);
-  margin-bottom: var(--space-3);
+  flex-direction: column;
+  gap: var(--space-3);
+
+  .header-filters {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
 }
 
-.table-tools {
-  display: flex;
+/* Button styling */
+.btn {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--fs-14);
+  font-weight: 500;
+  border-radius: var(--radius-1);
+  transition: var(--motion-fast);
+  border: 1px solid transparent;
+  cursor: pointer;
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--space-2);
+  gap: var(--space-1);
+
+  &:disabled {
+    opacity: var(--opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  &:not(:disabled):hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  &:not(:disabled):active {
+    transform: translateY(0);
+  }
+}
+
+.btn-primary {
+  background-color: var(--c-accent-600);
+  color: white;
+  border-color: var(--c-accent-600);
+
+  &:not(:disabled):hover {
+    background-color: var(--c-brand-800);
+    border-color: var(--c-brand-800);
+  }
 }
 
-/* Make the search input behave */
+.btn-outline-secondary {
+  background-color: white;
+  color: var(--c-text-500);
+  border-color: var(--border-color);
+
+  &:not(:disabled):hover {
+    background-color: var(--background-color-tertiary);
+    border-color: var(--c-accent-600);
+    color: var(--c-accent-600);
+  }
+}
+
+.btn-success {
+  background-color: var(--c-success-600);
+  color: white;
+  border-color: var(--c-success-600);
+
+  &:not(:disabled):hover {
+    background-color: darken(#28a745, 10%);
+    border-color: darken(#28a745, 10%);
+  }
+}
+
+.btn-sm {
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--fs-13);
+}
+
+/* Search input styling */
 .table-search {
-  width: min(380px, 100%);
+  position: relative;
+  flex: 1;
+  min-width: 200px;
+  max-width: 100%;
+
+  i {
+    left: var(--space-3);
+  }
+
+  .search-input {
+    width: 100%;
+    padding-left: var(--space-4);
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-1);
+    font-size: var(--fs-14);
+    transition: var(--motion-fast);
+
+    &:focus {
+      border-color: var(--c-accent-600);
+      box-shadow: 0 0 0 3px rgba(37, 109, 133, 0.1);
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--c-text-500);
+    }
+  }
 }
 
-.table-search input {
-  width: 100%;
+/* Column selector styling */
+.column-selector {
+  min-width: 180px;
+
+  ::ng-deep {
+    .p-multiselect {
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-1);
+      padding: var(--space-2) var(--space-3);
+
+      &:hover {
+        border-color: var(--c-accent-600);
+      }
+
+      &.p-focus {
+        border-color: var(--c-accent-600);
+        box-shadow: 0 0 0 3px rgba(37, 109, 133, 0.1);
+      }
+    }
+  }
 }
 
-/* Icon spacing inside our Bootstrap button */
-.table-header .btn i {
-  margin-right: var(--space-1);
+/* PrimeNG Table overrides */
+::ng-deep {
+  .csv-datatable {
+    border: none;
+
+    .p-datatable-thead > tr > th {
+      background-color: var(--background-color-tertiary);
+      border-color: var(--border-color);
+      padding: var(--space-3);
+      font-weight: 600;
+      font-size: var(--fs-14);
+      color: var(--c-text-0);
+    }
+
+    .p-datatable-tbody > tr {
+      border-color: var(--border-color);
+
+      > td {
+        padding: var(--space-2) var(--space-3);
+        border-color: var(--border-color);
+        font-size: var(--fs-14);
+      }
+
+      &:hover {
+        background-color: rgba(37, 109, 133, 0.03);
+      }
+    }
+
+    .p-datatable-thead > tr > th {
+      &.checkbox-col {
+        width: 3rem;
+        text-align: center;
+      }
+
+      &.data-header {
+        .header-content {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: var(--space-2);
+
+          .column-name {
+            flex: 1;
+            word-break: break-word;
+          }
+
+          .header-icons {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1);
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+
+    .p-datatable-tbody > tr > td {
+      &.checkbox-col {
+        width: 3rem;
+        text-align: center;
+      }
+
+      &.data-cell {
+        .cell-content {
+          word-break: break-word;
+          max-width: 200px;
+        }
+      }
+    }
+
+    /* Paginator styling */
+    .p-paginator {
+      border-top: 1px solid var(--border-color);
+      background-color: var(--background-color-tertiary);
+      padding: var(--space-3);
+
+      .p-paginator-current {
+        font-size: var(--fs-14);
+      }
+    }
+
+    /* Filter styling */
+    .p-column-filter {
+      display: flex;
+      align-items: center;
+
+      .p-column-filter-menu-icon {
+        color: var(--c-text-500);
+      }
+
+      &:hover {
+        .p-column-filter-menu-icon {
+          color: var(--c-accent-600);
+        }
+      }
+    }
+  }
 }
 
-/* Footer export row */
-.export-row {
+/* Table footer */
+.table-footer {
   width: 100%;
   display: flex;
   justify-content: center;
-  padding: var(--space-3);
+  padding: var(--space-4);
+  border-top: 1px solid var(--border-color);
+  background-color: #fafafa;
+  gap: var(--space-2);
 }
 
-/* Responsive stacking */
+/* Mobile responsiveness */
 @media (max-width: 768px) {
-  .table-header,
-  .table-tools {
-    flex-direction: column;
-    align-items: stretch;
+  .csv-container {
+    padding: var(--space-2);
   }
 
-  .table-search {
-    width: 100%;
+  .table-controls {
+    padding: var(--space-3);
   }
 
-  .table-tools .btn {
-    width: 100%;
+  .table-header {
+    gap: var(--space-2);
+
+    .header-filters {
+      flex-direction: column;
+
+      .btn,
+      .table-search {
+        width: 100%;
+      }
+
+      .table-search {
+        max-width: 100%;
+        min-width: auto;
+      }
+    }
+
+    .header-actions {
+      flex-direction: column;
+
+      .column-selector,
+      .btn {
+        width: 100%;
+      }
+    }
+  }
+
+  ::ng-deep {
+    .csv-datatable {
+      font-size: var(--fs-13);
+
+      .p-datatable-thead > tr > th {
+        padding: var(--space-2);
+      }
+
+      .p-datatable-tbody > tr > td {
+        padding: var(--space-2);
+
+        &.data-cell {
+          .cell-content {
+            max-width: 100px;
+          }
+        }
+      }
+
+      .p-paginator {
+        padding: var(--space-2);
+        flex-wrap: wrap;
+
+        .p-paginator-current {
+          font-size: var(--fs-13);
+        }
+      }
+    }
+  }
+
+  .table-footer {
+    padding: var(--space-3);
+
+    .btn {
+      width: 100%;
+    }
   }
 }
+
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.html
index 37c8da48..6b8e2f6c 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.html
@@ -131,6 +131,29 @@
     </div>
   </div>
   <!-- File Explorer Content Start -->
+  <div class="file-explorer-card__search-section">
+    <div class="file-explorer-card__search-wrapper">
+      <i class="pi pi-search file-explorer-card__search-icon" aria-hidden="true"></i>
+      <input
+        type="text"
+        class="file-explorer-card__search-input"
+        placeholder="Search files and folders..."
+        [(ngModel)]="searchTerm"
+        aria-label="Search files"
+      />
+      <button
+        *ngIf="searchTerm"
+        class="file-explorer-card__search-clear"
+        type="button"
+        (click)="clearSearch()"
+        title="Clear search"
+        aria-label="Clear search"
+      >
+        <i class="pi pi-times" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+
   <ul class="list-group file-explorer-card__list">
     <li
       class="list-group-item file-explorer-card__empty"
@@ -138,8 +161,14 @@
     >
       No File Found
     </li>
+    <li
+      class="list-group-item file-explorer-card__empty"
+      *ngIf="project.blobFiles.length > 0 && filteredBlobFileItemList.length == 0"
+    >
+      No files match your search
+    </li>
     <app-project-file-explorer-item
-      *ngFor="let blobFileItem of blobFileItemList"
+      *ngFor="let blobFileItem of filteredBlobFileItemList"
       [blobFileItem]="blobFileItem"
       [isSelected]="blobFileItem.order == selectedItem"
       [currentDirectory]="currentDirectory"
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.scss
index 48b9bf2c..ce6e2f9a 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.scss
@@ -31,6 +31,97 @@
   border-right: 0;
 }
 
+/* Search Section Styling */
+.file-explorer-card__search-section {
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--border-w-1) var(--border-style) var(--border-color);
+  background: var(--background-color-tertiary);
+}
+
+.file-explorer-card__search-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.file-explorer-card__search-icon {
+  position: absolute;
+  left: var(--space-3);
+  color: var(--c-text-500);
+  pointer-events: none;
+  font-size: 16px;
+}
+
+.file-explorer-card__search-input {
+  width: 100%;
+  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
+  border: var(--border-w-1) var(--border-style) var(--border-color);
+  border-radius: var(--radius-1);
+  font-size: var(--fs-14);
+  font-family: inherit;
+  color: var(--c-text-0);
+  background-color: white;
+  transition: var(--motion-fast);
+
+  &::placeholder {
+    color: var(--c-text-500);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--c-accent-600);
+    box-shadow: 0 0 0 3px rgba(37, 109, 133, 0.1);
+  }
+
+  &:hover:not(:focus) {
+    border-color: var(--c-accent-600);
+  }
+}
+
+.file-explorer-card__search-clear {
+  position: absolute;
+  right: var(--space-3);
+  background: none;
+  border: none;
+  color: var(--c-text-500);
+  cursor: pointer;
+  padding: var(--space-1);
+  border-radius: var(--radius-1);
+  transition: var(--motion-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+
+  &:hover {
+    color: var(--c-text-0);
+    background: rgba(37, 109, 133, 0.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+@media (max-width: 576px) {
+  .file-explorer-card__search-section {
+    padding: var(--space-2) var(--space-3);
+  }
+
+  .file-explorer-card__search-input {
+    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
+    font-size: var(--fs-13);
+  }
+
+  .file-explorer-card__search-icon,
+  .file-explorer-card__search-clear {
+    left: var(--space-2);
+    right: var(--space-2);
+    font-size: 14px;
+  }
+}
+
 /* Footer */
 .file-explorer-card__footer {
   background: var(--surface-0);
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.ts b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.ts
index 737ab9d2..0fb13638 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.ts
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.ts
@@ -55,6 +55,9 @@ export class ProjectFileExplorerComponent implements OnInit {
   csvFile: any;
   folders: string = "";
 
+  // Search/Filter property
+  searchTerm: string = "";
+
   async ngOnInit() {
     this.dataBrowserURL = 'https://observablehq.com/embed/@sfsu/untitled?cell=*&dataset=';
     const raw = this.extractDirectory(this.router.url);
@@ -109,6 +112,35 @@ export class ProjectFileExplorerComponent implements OnInit {
     return rebuilt;
   }
 
+  /**
+   * Getter for filtered file list based on search term
+   * Filters files and folders by name (case-insensitive)
+   * Always shows the ".." navigation item
+   */
+  get filteredBlobFileItemList(): BlobFileItem[] {
+    if (!this.searchTerm.trim()) {
+      return this.blobFileItemList;
+    }
+
+    const searchLower = this.searchTerm.toLowerCase();
+
+    return this.blobFileItemList.filter(item => {
+      // Always show navigation items (..)
+      if (item.type === "none") {
+        return true;
+      }
+
+      // Filter by name (case-insensitive)
+      return item.name.toLowerCase().includes(searchLower);
+    });
+  }
+
+  /**
+   * Clear the search term
+   */
+  clearSearch() {
+    this.searchTerm = "";
+  }
 
   public fileEvent($event) {
     for (let file of $event.target.files) {
@@ -325,6 +357,9 @@ export class ProjectFileExplorerComponent implements OnInit {
     // Reset Item List
     this.blobFileItemList = []
 
+    // Reset search when changing directories
+    this.searchTerm = "";
+
     // Set Current Directory
     this.currentDirectory = directory;
 
@@ -343,7 +378,7 @@ export class ProjectFileExplorerComponent implements OnInit {
         // Input Directory Num
         var currentDirectoryNum = directory.split("/").length - 1;
 
-        // Check If File 
+        // Check If File
         this.project.blobFiles.forEach(file => {
 
           // Get Full Path Of File
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.scss
index 99978e08..41eecb51 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.scss
@@ -143,40 +143,58 @@
 
   .project-detail-row {
     margin-bottom: 1rem;
+    display: flex;
+    gap: var(--space-4);
+    flex-wrap: wrap;
+
     .project-description {
-      width: 70%;
+      flex: 1;
+      min-width: 0;
 
       .project-authors-list {
         display: flex;
         list-style: none;
         padding: 0px;
         margin: 0px;
+        flex-wrap: wrap;
+        gap: var(--space-2);
 
         .project-author {
           display: flex;
           cursor: pointer;
-          margin-right: 10px;
+          align-items: center;
+          transition: var(--motion-fast);
 
           &:hover {
             .project-author-name {
               color: var(--link-hover-color);
               text-decoration: underline;
             }
+            .project-author-thumbnail {
+              transform: scale(1.1);
+            }
           }
 
           .project-author-thumbnail {
-            width: 25px;
-            height: 25px;
-            border: 1px solid black;
-            border-radius: 40px;
-            margin-right: 5px;
-            margin-bottom: 10px;
+            width: 32px;
+            height: 32px;
+            border: 2px solid var(--border-color);
+            border-radius: 50%;
+            margin-right: var(--space-2);
+            transition: transform var(--motion-fast);
+            object-fit: cover;
+          }
+
+          .project-author-name {
+            transition: color var(--motion-fast);
+            font-size: var(--fs-14);
+            font-weight: 500;
           }
         }
       }
 
       .project-tag li {
-        padding: 10px 0px;
+        padding: var(--space-2) 0px;
 
         span:first-child {
           margin-left: 0px !important;
@@ -185,43 +203,76 @@
     }
 
     .project-statistics-group {
-      width: 30%;
-      padding-left: 5%;
+      flex: 0 0 auto;
+      min-width: 280px;
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
 
       .project-statistics {
         display: flex;
         align-items: center;
-        margin-bottom: 5px;
+        gap: var(--space-2);
+        padding: var(--space-2);
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-1);
+        background: white;
+        transition: var(--motion-fast);
+
+        &:hover {
+          border-color: var(--c-accent-600);
+          box-shadow: 0 2px 8px rgba(37, 109, 133, 0.1);
+        }
 
         .project-statistics-header {
           color: var(--link-on-light);
           cursor: pointer;
+          font-weight: 600;
+          font-size: var(--fs-14);
+          white-space: nowrap;
         }
 
         .project-statistics-divider {
-          border-top: 1px solid lightgray;
+          border-top: 1px solid var(--border-color);
           flex-grow: 1;
-          padding: 0px 5px;
-          box-sizing: border-box;
-          margin: 2px 10px 0px 10px;
+          margin: 0px var(--space-1);
         }
 
         .project-statistics-pill {
-          padding: 1px 5px;
+          padding: var(--space-1) var(--space-2);
           border: 1px solid var(--border-color);
           border-radius: 20px;
-          margin-right: 10px;
-          font-size: 12px;
-          color: var(--link-on-light);
+          font-size: var(--fs-12);
+          color: var(--c-text-500);
+          white-space: nowrap;
         }
 
         .project-statistics-current {
           color: var(--color-success);
+          font-weight: 600;
+          min-width: 30px;
+          text-align: center;
         }
       }
     }
   }
 
+  /* Mobile responsiveness for project detail */
+  @media (max-width: 768px) {
+    .project-detail-row {
+      flex-direction: column;
+
+      .project-description {
+        width: 100%;
+      }
+
+      .project-statistics-group {
+        min-width: auto;
+        width: 100%;
+      }
+    }
+  }
+
   .project-content-row {
     .project-content-header {
       display: flex;
@@ -293,15 +344,37 @@
   .project-view-option-row {
     border-top: 1px solid rgba(0,0,0,.125);
     align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    padding: 0px !important;
 
     .project-view-toggle {
+      display: flex;
+      gap: 0px;
+      border-right: 1px solid rgba(0,0,0,.125);
+      flex-wrap: wrap;
+
       & > input {
-        padding: 10px 20px;
+        padding: var(--space-3) var(--space-4);
         background: transparent;
         border: none;
+        font-size: var(--fs-14);
+        font-weight: 500;
+        color: var(--c-text-500);
+        cursor: pointer;
+        transition: var(--motion-fast);
+        border-bottom: 2px solid transparent;
+
+        &:hover {
+          color: var(--c-text-0);
+          background: rgba(37, 109, 133, 0.05);
+        }
 
         &.active {
-          background-color: var(--background-color-tertiary);
+          color: var(--c-accent-600);
+          background-color: transparent;
+          border-bottom-color: var(--c-accent-600);
         }
       }
     }
@@ -312,8 +385,7 @@
       display: flex;
       align-items: center;
       gap: var(--space-2);
-      margin-top: 2px;
-      margin-bottom: 2px;
+      flex-wrap: wrap;
 
       .project-view-extra-interaction {
         display: flex;
@@ -323,21 +395,23 @@
 
       /* === More / Less pill === */
       .more-block {
-        margin-right: 20px;
         display: inline-flex;
         align-items: center;
         justify-content: flex-end;
-
-        height: 38px;
+        height: 40px;
         box-sizing: border-box;
-
         border: var(--border-w-1) var(--border-style) var(--border-color);
         border-radius: var(--nav-link-radius);
-
         padding-left: var(--space-2);
         padding-right: var(--space-2);
-
         white-space: nowrap;
+        background: white;
+        transition: var(--motion-fast);
+
+        &:hover {
+          border-color: var(--c-accent-600);
+          box-shadow: 0 2px 8px rgba(37, 109, 133, 0.1);
+        }
       }
 
       /* The actions expand LEFT from the right edge */
@@ -345,13 +419,11 @@
         display: inline-flex;
         align-items: center;
         gap: var(--space-2);
-
         max-width: 0;
         opacity: 0;
         transform: translateX(8px);
         overflow: hidden;
         pointer-events: none;
-
         transition:
           max-width 240ms ease,
           opacity 180ms ease,
@@ -365,24 +437,22 @@
         pointer-events: auto;
       }
 
-      /* Links inside “More” */
+      /* Links inside "More" */
       .more-link {
         display: inline-flex;
         align-items: center;
         height: 100%;
-
-        padding: 0 var(--space-1);
+        padding: 0 var(--space-2);
         border-radius: var(--nav-link-radius);
-
         color: var(--link-on-light);
         cursor: pointer;
         text-decoration: none;
-
+        font-size: var(--fs-14);
         transition: var(--motion-nav);
 
         &:hover {
           color: var(--link-hover-color);
-          text-decoration: underline;
+          background: rgba(37, 109, 133, 0.08);
         }
       }
 
@@ -390,24 +460,19 @@
         display: inline-flex;
         align-items: center;
         justify-content: flex-end;
-
         height: 100%;
         padding: 0;
-
         border: none;
         background: transparent;
-
         color: var(--link-on-light);
         cursor: pointer;
-        
         min-width: 74px;
         text-align: right;
-
+        font-size: var(--fs-14);
         transition: color var(--motion-fast);
 
         &:hover {
           color: var(--link-hover-color);
-          text-decoration: underline;
         }
       }
 
@@ -425,6 +490,45 @@
     }
   }
 
+  /* Mobile responsiveness for tabs and buttons */
+  @media (max-width: 768px) {
+    .project-view-option-row {
+      flex-direction: column;
+      align-items: stretch;
+
+      .project-view-toggle {
+        border-right: none;
+        border-bottom: 1px solid rgba(0,0,0,.125);
+        margin-bottom: var(--space-2);
+
+        & > input {
+          flex: 1;
+          padding: var(--space-2) var(--space-3);
+          border-right: 1px solid rgba(0,0,0,.125);
+
+          &:last-child {
+            border-right: none;
+          }
+        }
+      }
+
+      .project-view-interaction {
+        margin-left: 0;
+        justify-content: stretch;
+
+        .btn {
+          flex: 1;
+          min-width: 100%;
+        }
+
+        .more-block {
+          width: 100%;
+          justify-content: space-between;
+        }
+      }
+    }
+  }
+
   .project-view-row {
     padding: 0px;
 
diff --git a/src/Analysim.Web/ClientApp/src/assets/jupyter/index.html b/src/Analysim.Web/ClientApp/src/assets/jupyter/index.html
index 3e3cde58..e489bd54 100644
--- a/src/Analysim.Web/ClientApp/src/assets/jupyter/index.html
+++ b/src/Analysim.Web/ClientApp/src/assets/jupyter/index.html
@@ -30,17 +30,6 @@
         await import(
           '../config-utils.js?_=dba8133'
         );
-
-        const originalConsoleLog = console.info;
-        console.log("copying files through dotnet run succeeded");
-        console.info = function (...args) {
-          originalConsoleLog.apply(console, args);
-          if (args[0] && typeof args[0] === 'string' && args[0].includes('Pyodide contents will be synced with Jupyter Contents')) {
-            // Send a message to the parent window
-            console.log('Analysim: Sending jupyterlite-loaded message to window');
-            window.parent.postMessage('jupyterlite-load', '*');
-          }
-        };
       }.call(this));
     </script>
     <style>
diff --git a/src/Analysim.Web/ClientApp/src/assets/styles/base/_bootstrap-overrides.scss b/src/Analysim.Web/ClientApp/src/assets/styles/base/_bootstrap-overrides.scss
index 9763e8fb..4faed92d 100644
--- a/src/Analysim.Web/ClientApp/src/assets/styles/base/_bootstrap-overrides.scss
+++ b/src/Analysim.Web/ClientApp/src/assets/styles/base/_bootstrap-overrides.scss
@@ -1,14 +1,22 @@
-/* 
+/*
   Bootstrap normalization layer.
   Centralizes overrides for Bootstrap components so they follow
-  the app’s design tokens and visual system instead of default Bootstrap styles. 
+  the app's design tokens and visual system instead of default Bootstrap styles.
 */
 
-/* Base button */
+/* === Base button === */
 .btn {
   border-radius: var(--button-border-radius) !important;
-  padding: var(--button-padding) !important;
-  transition: var(--motion-nav);
+  padding: var(--space-2) var(--space-3) !important;
+  transition: var(--motion-fast) !important;
+  font-weight: 500;
+  font-size: var(--fs-14);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  cursor: pointer;
+  border: var(--border-w-1) solid transparent !important;
+  white-space: nowrap;
 
   /* Disabled state */
   &:disabled,
@@ -16,30 +24,60 @@
     cursor: not-allowed;
     opacity: var(--opacity-disabled);
   }
+
+  /* Hover effect - subtle lift */
+  &:not(:disabled):not(.disabled):hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Active state */
+  &:not(:disabled):not(.disabled):active {
+    transform: translateY(0);
+  }
+
+  /* Focus state */
+  &:focus {
+    outline: none;
+  }
+
+  /* Icon spacing */
+  i {
+    &:first-child {
+      margin-right: var(--space-1);
+    }
+
+    &:last-child {
+      margin-left: var(--space-1);
+    }
+  }
 }
 
-/* Primary button */
+/* === Primary button === */
 .btn-primary {
   background-color: var(--button-background-color) !important;
   border: var(--button-border-width) var(--button-border-style)
     var(--button-border-color) !important;
   color: var(--button-font-color) !important;
+  box-shadow: 0 1px 3px rgba(37, 109, 133, 0.2);
 }
 
 .btn-primary:hover:not(:disabled):not(.disabled),
 .btn-primary:focus:not(:disabled):not(.disabled) {
-  background-color: var(--button-background-color-hov) !important;
+  background-color: var(--c-brand-800) !important;
   border: var(--button-border-width) var(--button-border-style)
     var(--button-border-color-hov) !important;
-  color: var(--button-font-color-hov) !important;
+  color: var(--button-font-color) !important;
+  box-shadow: 0 4px 12px rgba(37, 109, 133, 0.3);
 }
 
-/* Secondary button */
+/* === Secondary button === */
 .btn-secondary {
   background-color: var(--button-background-color-secondary) !important;
   border: var(--button-border-width) var(--button-border-style)
     var(--button-border-color-secondary) !important;
   color: var(--button-font-color-secondary) !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .btn-secondary:hover:not(:disabled):not(.disabled),
@@ -48,11 +86,12 @@
   border: var(--button-border-width) var(--button-border-style)
     var(--button-border-color-secondary-hov) !important;
   color: var(--button-font-color-secondary-hov) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-/* Outline primary button (secondary actions) */
+/* === Outline primary button (secondary actions) === */
 .btn-outline-primary {
-  background: transparent !important;
+  background: white !important;
   border: var(--button-border-width) var(--button-border-style)
     var(--button-border-color) !important;
   color: var(--button-border-color) !important;
@@ -60,25 +99,194 @@
 
 .btn-outline-primary:hover:not(:disabled):not(.disabled),
 .btn-outline-primary:focus:not(:disabled):not(.disabled) {
-  background: var(--button-background-color) !important;
+  background: var(--background-color-tertiary) !important;
   border: var(--button-border-width) var(--button-border-style)
     var(--button-border-color) !important;
-  color: var(--button-font-color) !important;
+  color: var(--c-accent-600) !important;
+  box-shadow: 0 2px 8px rgba(37, 109, 133, 0.1);
+}
+
+/* === Success button === */
+.btn-success {
+  background-color: var(--c-success-600) !important;
+  border: var(--button-border-width) var(--button-border-style)
+    var(--c-success-600) !important;
+  color: white !important;
+  box-shadow: 0 1px 3px rgba(40, 167, 69, 0.2);
 }
 
-/* Quiet danger button */
+.btn-success:hover:not(:disabled):not(.disabled),
+.btn-success:focus:not(:disabled):not(.disabled) {
+  background-color: #228f47 !important;
+  border: var(--button-border-width) var(--button-border-style)
+    #228f47 !important;
+  color: white !important;
+  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
+}
+
+/* === Danger button === */
 .btn-danger {
-  background: transparent !important;
+  background: white !important;
   border: var(--button-border-width) var(--button-border-style)
-    var(--color-danger) !important;
-  color: var(--color-danger) !important;
+    var(--c-danger-600) !important;
+  color: var(--c-danger-600) !important;
 }
 
-/* Hover = full danger */
 .btn-danger:hover:not(:disabled):not(.disabled),
 .btn-danger:focus:not(:disabled):not(.disabled) {
-  background: var(--color-danger) !important;
+  background: var(--c-danger-600) !important;
   border: var(--button-border-width) var(--button-border-style)
-    var(--color-danger) !important;
+    var(--c-danger-600) !important;
   color: var(--c-text-inverse) !important;
+  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
+}
+
+/* === Warning button === */
+.btn-warning {
+  background-color: #ffc107 !important;
+  border: var(--button-border-width) var(--button-border-style)
+    #ffc107 !important;
+  color: #212529 !important;
+  box-shadow: 0 1px 3px rgba(255, 193, 7, 0.2);
+}
+
+.btn-warning:hover:not(:disabled):not(.disabled),
+.btn-warning:focus:not(:disabled):not(.disabled) {
+  background-color: #e0a800 !important;
+  border: var(--button-border-width) var(--button-border-style)
+    #e0a800 !important;
+  color: #212529 !important;
+  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
+}
+
+/* === Info button === */
+.btn-info {
+  background-color: #17a2b8 !important;
+  border: var(--button-border-width) var(--button-border-style)
+    #17a2b8 !important;
+  color: white !important;
+  box-shadow: 0 1px 3px rgba(23, 162, 184, 0.2);
+}
+
+.btn-info:hover:not(:disabled):not(.disabled),
+.btn-info:focus:not(:disabled):not(.disabled) {
+  background-color: #138496 !important;
+  border: var(--button-border-width) var(--button-border-style)
+    #138496 !important;
+  color: white !important;
+  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
+}
+
+/* === Small button === */
+.btn-sm {
+  padding: var(--space-1) var(--space-2) !important;
+  font-size: var(--fs-13);
+}
+
+/* === Large button === */
+.btn-lg {
+  padding: var(--space-3) var(--space-4) !important;
+  font-size: var(--fs-16);
+}
+
+/* === Button block === */
+.btn-block {
+  width: 100%;
+}
+
+/* === Link styling === */
+a {
+  color: var(--c-link);
+  text-decoration: none;
+  transition: var(--motion-fast);
+
+  &:hover {
+    color: var(--c-link-hover);
+    text-decoration: underline;
+  }
+
+  &:active {
+    color: var(--c-brand-800);
+  }
+}
+
+/* === Badge styling === */
+.badge {
+  padding: var(--space-1) var(--space-2);
+  border-radius: 12px;
+  font-size: var(--fs-13);
+  font-weight: 500;
+
+  &.badge-primary {
+    background-color: var(--c-accent-600);
+    color: white;
+  }
+
+  &.badge-success {
+    background-color: var(--c-success-600);
+    color: white;
+  }
+
+  &.badge-danger {
+    background-color: var(--c-danger-600);
+    color: white;
+  }
+
+  &.badge-warning {
+    background-color: #ffc107;
+    color: #212529;
+  }
+
+  &.badge-info {
+    background-color: #17a2b8;
+    color: white;
+  }
+
+  &.badge-light {
+    background-color: #f8f9fa;
+    color: #212529;
+  }
+
+  &.badge-dark {
+    background-color: #343a40;
+    color: white;
+  }
+}
+
+/* === Alert styling === */
+.alert {
+  border: 1px solid;
+  border-radius: var(--radius-1);
+  padding: var(--space-3) var(--space-4);
+  margin-bottom: var(--space-3);
+
+  &.alert-primary {
+    background-color: rgba(37, 109, 133, 0.1);
+    border-color: var(--c-accent-600);
+    color: var(--c-accent-600);
+  }
+
+  &.alert-success {
+    background-color: rgba(40, 167, 69, 0.1);
+    border-color: var(--c-success-600);
+    color: var(--c-success-600);
+  }
+
+  &.alert-danger {
+    background-color: rgba(220, 53, 69, 0.1);
+    border-color: var(--c-danger-600);
+    color: var(--c-danger-600);
+  }
+
+  &.alert-warning {
+    background-color: rgba(255, 193, 7, 0.1);
+    border-color: #ffc107;
+    color: #856404;
+  }
+
+  &.alert-info {
+    background-color: rgba(23, 162, 184, 0.1);
+    border-color: #17a2b8;
+    color: #0c5460;
+  }
 }
diff --git a/src/Analysim.Web/ClientApp/src/assets/styles/base/_form.scss b/src/Analysim.Web/ClientApp/src/assets/styles/base/_form.scss
index d7c41c34..44ac55cb 100644
--- a/src/Analysim.Web/ClientApp/src/assets/styles/base/_form.scss
+++ b/src/Analysim.Web/ClientApp/src/assets/styles/base/_form.scss
@@ -1,14 +1,145 @@
-/* 
+/*
   Form helpers.
   Central place for shared form styling and states so inputs
-  behave consistently across the app (validation, feedback, etc.). 
+  behave consistently across the app (validation, feedback, etc.).
 */
 
-/* Validation states */
+/* === Input base styling === */
+.form-control {
+  border: var(--border-w-1) solid var(--border-color);
+  border-radius: var(--radius-1);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--fs-14);
+  font-family: inherit;
+  color: var(--c-text-0);
+  background-color: white;
+  transition: var(--motion-fast);
+
+  &:focus {
+    border-color: var(--c-accent-600);
+    box-shadow: 0 0 0 3px rgba(37, 109, 133, 0.1);
+    outline: none;
+  }
+
+  &::placeholder {
+    color: var(--c-text-500);
+  }
+
+  &:disabled {
+    background-color: #f5f5f5;
+    color: var(--c-text-500);
+    cursor: not-allowed;
+  }
+
+  &:read-only {
+    background-color: var(--background-color-tertiary);
+    cursor: default;
+  }
+}
+
+/* === Form groups === */
+.form-group {
+  margin-bottom: var(--space-4);
+
+  label {
+    display: block;
+    margin-bottom: var(--space-1);
+    font-weight: 500;
+    font-size: var(--fs-14);
+    color: var(--c-text-0);
+
+    .required {
+      color: var(--c-danger-600);
+      margin-left: 2px;
+    }
+  }
+
+  &.has-error {
+    .form-control {
+      border-color: var(--c-danger-600);
+
+      &:focus {
+        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
+      }
+    }
+
+    .form-error {
+      display: block;
+      margin-top: var(--space-1);
+      color: var(--c-danger-600);
+      font-size: var(--fs-13);
+    }
+  }
+
+  &.has-success {
+    .form-control {
+      border-color: var(--c-success-600);
+
+      &:focus {
+        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
+      }
+    }
+
+    .form-success {
+      display: block;
+      margin-top: var(--space-1);
+      color: var(--c-success-600);
+      font-size: var(--fs-13);
+    }
+  }
+}
+
+/* === Form text === */
+.form-text {
+  display: block;
+  margin-top: var(--space-1);
+  font-size: var(--fs-13);
+  color: var(--c-text-500);
+}
+
+/* === Validation feedback === */
+.invalid-feedback,
+.valid-feedback {
+  display: block;
+  margin-top: var(--space-1);
+  font-size: var(--fs-13);
+}
+
+.invalid-feedback {
+  color: var(--c-danger-600);
+}
+
+.valid-feedback {
+  color: var(--c-success-600);
+}
+
+.was-validated {
+  .form-control {
+    &.is-invalid {
+      border-color: var(--c-danger-600);
+
+      &:focus {
+        border-color: var(--c-danger-600);
+        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
+      }
+    }
+
+    &.is-valid {
+      border-color: var(--c-success-600);
+
+      &:focus {
+        border-color: var(--c-success-600);
+        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
+      }
+    }
+  }
+}
+
+/* === Legacy validation states === */
 .invalid {
-  border-color: var(--color-danger);
+  border-color: var(--c-danger-600);
 }
 
 .valid {
-  border-color: var(--color-success);
+  border-color: var(--c-success-600);
 }