diff --git a/src/Analysim.Web/ClientApp/src/app/footer/footer.component.html b/src/Analysim.Web/ClientApp/src/app/footer/footer.component.html
index e70ca460..603d9fe6 100644
--- a/src/Analysim.Web/ClientApp/src/app/footer/footer.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/footer/footer.component.html
@@ -1,81 +1,31 @@
 <!-- Footer Start -->
-<footer class="bg-shell pt-3">
-  <!-- Footer Links Start-->
-  <div class="container-fluid text-right text-md-left footer-inner">
-    <!-- Grid row Start-->
-    <div class="row justify-content-center footer-link-row">
-      <div class="col-md-10">
-        <div class="row justify-content-center">
-          <!-- Grid column Start-->
-          <div class="col-md-4 mb-md-0 mb-3">
-            <div class="footer-about" id="about">
-              About
-            </div>
-            <!-- Links Start-->
-            <ul class="list-unstyled">
-              <li>
-                <a class="footer-link nav-interactive text-white" [routerLink]='["/contactus"]'>Contact Us</a>
-              </li>
-              <li>
-                <a class="footer-link nav-interactive text-white" [routerLink]='["/aboutus"]'>Learn More</a>
-              </li>
-            </ul> <!-- Links End-->
-          </div>
-          <div class="col-md-4 mb-md-0 mb-3 footer-connect">
-            <div class="footer-header">
-              Connect
-            </div>
-            <!-- Links Start-->
-            <ul class="list-unstyled footer-icons">
-              <li>
-                <a
-                  class="footer-icon nav-interactive text-white"
-                  [routerLink]="['/aboutus']"
-                >
-                  <img src="../../assets/img/icon-facebook.png" alt="Facebook" />
-                </a>
-              </li>
-              <li>
-                <a
-                  class="footer-icon nav-interactive text-white"
-                  [routerLink]="['/aboutus']"
-                >
-                  <img
-                    src="../../assets/img/icon-linkedin.png"
-                    alt="LinkedIn"
-                  />
-                </a>
-              </li>
-              <li>
-                <a
-                  class="footer-icon nav-interactive text-white"
-                  [routerLink]="['/aboutus']"
-                >
-                  <img src="../../assets/img/icon-twitter.png" alt="Twitter" />
-                </a>
-              </li>
-            </ul> <!-- Links End-->
-          </div>
-          <div class="col-md-4 mb-md-0 footer-empty">
-          </div>
-        <!-- Grid column -->
-        </div>
-      </div>
-      
-    </div> <!-- Grid row End-->
-    <div class="row justify-content-center footer-logo-row">
-      <div class="col-md-10 mb-md-0 mb-3">
-        <div class="footer-logo">
-          Powered by &copy; 2023 AnalySim
-        </div>
-        <!-- Links Start-->
+<footer class="bg-shell app-footer">
+  <div class="container-fluid footer-inner">
+    <div class="footer-bar">
+      <!-- Left: links -->
+      <nav class="footer-left" aria-label="Footer links">
+        <a class="footer-link nav-interactive" [routerLink]="['/contactus']">Contact</a>
+        <a class="footer-link nav-interactive" [routerLink]="['/aboutus']">About</a>
+      </nav>
+
+      <!-- Center: copyright -->
+      <div class="footer-center">
+        Powered by &copy; {{ currentYear }} AnalySim
       </div>
+
+      <!-- Right: connect -->
+      <nav class="footer-right" aria-label="Footer social links">
+        <a class="footer-icon" [routerLink]="['/aboutus']">
+          <img src="../../assets/img/icon-facebook.png" alt="Facebook" />
+        </a>
+        <a class="footer-icon" [routerLink]="['/aboutus']">
+          <img src="../../assets/img/icon-linkedin.png" alt="LinkedIn" />
+        </a>
+        <a class="footer-icon" [routerLink]="['/aboutus']">
+          <img src="../../assets/img/icon-twitter.png" alt="Twitter" />
+        </a>
+      </nav>
     </div>
   </div>
-  <!-- Footer Links End-->
-
-  <!-- Copyright Start -->
-  <div class="footer-copyright p-2"></div>
-  <!-- Copyright End-->
 </footer>
-<!-- Footer End -->
+<!-- Footer End -->
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/footer/footer.component.scss b/src/Analysim.Web/ClientApp/src/app/footer/footer.component.scss
index 3ce08a04..bada3c86 100644
--- a/src/Analysim.Web/ClientApp/src/app/footer/footer.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/footer/footer.component.scss
@@ -1,93 +1,55 @@
 @import "src/assets/styles/abstracts/mixins";
 
-/* Footer component styling */
-.footer-inner {
-  color: var(--text-on-dark);
-
-  /* Inherit footer text color */
-  * {
-    color: inherit;
-  }
+.footer-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+
+  /* reduce “tall footer” feeling */
+  padding: var(--space-3);
+  min-height: 48px;
 }
 
-/* Footer link/content rows */
-.footer-link-row {
-  padding: var(--space-3) 0;
-
-  /* Section titles and about text */
-  .footer-about,
-  .footer-header {
-    margin-bottom: var(--space-3);
-    font-size: var(--fs-16);
-    font-weight: 700;
-    width: fit-content;
-  }
-
-  ul {
-    margin-bottom: 0;
-  }
-
-  li {
-    margin-bottom: var(--space-2);
-  }
-
-  .footer-link {
-    line-height: 1.2;
-  }
-
-  .footer-about {
-    text-align: left;
-  }
-
-  /* Social/icon list */
-  .footer-icons {
-    display: flex;
-    gap: var(--space-2);
-    padding-left: 0;
-  }
-
-  .footer-icon {
-    padding: 0;
-  }
+.footer-left,
+.footer-right {
+  display: flex;
+  align-items: center;
+  font-size: medium;
+}
 
-  /* Keep partner/social logos square */
-  .footer-connect img {
-    @include media-square(32px);
-  }
+.footer-right{
+  gap: var(--space-2)
 }
 
-/* Bottom logo/copyright row */
-.footer-logo-row {
-  .col-md-10 {
-    display: flex;
-    border-top: var(--border-w-1) var(--border-style) var(--hr-on-dark);
-    padding-top: var(--space-3);
+.footer-left {
+  flex-wrap: wrap;
+  gap: var(--space-3)
+}
 
-    .footer-logo {
-      text-align: center;
-      width: 100%;
-      line-height: 1.2;
-      font-size: var(--fs-14);
-      opacity: 0.9;
-    }
-  }
+.footer-center {
+  text-align: center;
+  line-height: 1.2;
+  font-size: var(--fs-14);
+  opacity: 0.9;
+  white-space: nowrap;
+  flex: 1;
+  font-size: medium;
 }
 
-/* Dark shell theme adjustments */
-.bg-shell {
-  --footer-text-soft: rgba(255, 255, 255, 0.85);
+.footer-right img {
+  @include media-square(32px);
+}
 
-  .footer-link,
-  .footer-icon,
-  .footer-about,
-  .footer-header,
-  .footer-logo {
-    color: var(--footer-text-soft);
+/* Mobile */
+@media (max-width: 575.98px) {
+  .footer-bar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2);
   }
 
-  .footer-link:hover,
-  .footer-icon:hover,
-  .nav-interactive:hover {
-    color: var(--text-on-dark);
+  .footer-center {
+    white-space: normal;
   }
-}
+}
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/footer/footer.component.ts b/src/Analysim.Web/ClientApp/src/app/footer/footer.component.ts
index c7a7ec50..60fb7c9f 100644
--- a/src/Analysim.Web/ClientApp/src/app/footer/footer.component.ts
+++ b/src/Analysim.Web/ClientApp/src/app/footer/footer.component.ts
@@ -7,6 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FooterComponent implements OnInit {
 
+  currentYear = new Date().getFullYear();
+
   constructor() { }
 
   ngOnInit(): void {
diff --git a/src/Analysim.Web/ClientApp/src/app/home/home.component.html b/src/Analysim.Web/ClientApp/src/app/home/home.component.html
index c3c7bffd..f91f4e87 100644
--- a/src/Analysim.Web/ClientApp/src/app/home/home.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/home/home.component.html
@@ -1,5 +1,5 @@
 <!-- Header -->
-<header class="header pt-3 mb-2">
+<header class="header pt-3 mb-2 hero-fade hero-fade--right">
   <!-- Container Start -->
   <div class="container-fluid">
     <!-- Row Start -->
@@ -57,7 +57,7 @@ <h3>Browse our projects</h3>
   </div> <!-- Row Services End -->
 
   <!-- Row Organization Start -->
-  <div class="row py-5 my-3 justify-content-center surface-blue">
+  <div class="row py-4 justify-content-center surface-blue surface-fade surface-fade--right">
     <div class="col-md-6">
       <!-- Organizaiton Description -->
       <div class="row justify-content-center">
@@ -109,7 +109,7 @@ <h3>Google Colab</h3>
   </div>
 
   <!-- Row Organization Start -->
-  <div class="row py-5 my-3 justify-content-center surface-blue">
+  <div class="row py-4 justify-content-center surface-blue surface-fade surface-fade--left">
     <div class="col-md-6">
       <!-- Organizaiton Description -->
       <div class="row justify-content-center">
@@ -227,7 +227,7 @@ <h2 class="card-title">Easily share parameter search datasets</h2>
   </div> <!-- Row Dataset Description End -->
 
  <!-- Row Organization Start -->
- <div class="row py-3 my-3 justify-content-center surface-blue">
+ <div class="row py-4 justify-content-center surface-blue surface-fade surface-fade--right">
   <div class="col-md-6">
     <!-- Organizaiton Description -->
     <div class="row justify-content-center">
@@ -246,61 +246,43 @@ <h2 class="text-center">Sponsors</h2>        <!-- <p class="text-center">Organiz
 
 
   <!-- Row Dataset Description1 Start -->
-  <div class="row justify-content-center py-4 my-4 home-sponser">
+  <div class="row justify-content-center py-4 my-4 home-sponsor">
     <div class="col-md-10">
-      <div class="row justify-content-center">
-        <div class="col-xl-5 col-lg-12 sponser-column">
-          <div class="row">
-            <h3 class="hero-sponser">
-              <img src="../../assets/img/icon-gsoc.png"> 
-              <a href="https://summerofcode.withgoogle.com/" target="_blank">Google Summer of Code</a>
-            </h3>
-            </div>
-        </div>
-        <div class="col-xl-2 col-lg-0 sponser-column">
-        </div>
-        <div class="col-xl-5 col-lg-12 sponser-column">
-          <div class="row">
-          <h3 class="hero-sponser">
-            <img src="../../assets/img/icon-incf.png"> 
-            <a href="https://www.incf.org/" target="_blank">International Neuroinformatics Coordinating Facility</a>
-          </h3>
+      <div class="sponsor-grid">
+        <a class="sponsor-card" href="https://summerofcode.withgoogle.com/" target="_blank" rel="noopener">
+          <div class="sponsor-content">
+            <img class="sponsor-card__logo" src="../../assets/img/GSoC-icon.png" alt="Google Summer of Code logo" />
+            <div class="sponsor-card__name">Google Summer of Code</div>
           </div>
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-xl-5 col-lg-12 sponser-column">
-          <div class="row">
-            <h3 class="hero-sponser">
-              <img src="../../assets/img/access.png"> 
-              <a href="https://access-ci.org/" target="_blank">Access</a>
-            </h3>
-            </div>
-        </div>
-        <div class="col-xl-2 col-lg-0 sponser-column">
-        </div>
-        <div class="col-xl-5 col-lg-12 sponser-column">
-          <div class="row">
-          <h3 class="hero-sponser">
-            <img src="../../assets/img/jetstream2-logo.svg"> 
-            <a href="https://jetstream-cloud.org/" target="_blank">Jetstream2</a>
-          </h3>
+        </a>
+
+        <a class="sponsor-card" href="https://www.incf.org/" target="_blank" rel="noopener">
+          <div class="sponsor-content">
+            <img class="sponsor-card__logo" src="../../assets/img/incf-icon.png" alt="INCF logo" />
+            <div class="sponsor-card__name">International Neuroinformatics Coordinating Facility</div>
           </div>
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-xl-5 col-lg-12 sponser-column">
-          <div class="row">
-          <h3 class="hero-sponser">
-            <img src="../../assets/img/nsf-logo.png"> 
-            <a href="https://www.nsf.gov/" target="_blank">National Science Foundation</a>
-          </h3>
+        </a>
+
+        <a class="sponsor-card" href="https://access-ci.org/" target="_blank" rel="noopener">
+          <div class="sponsor-content">
+            <img class="sponsor-card__logo" src="../../assets/img/access.png" alt="Access logo" />
+            <div class="sponsor-card__name">Access</div>
           </div>
-        </div>
-        <div class="col-xl-2 col-lg-0 sponser-column">
-        </div>
-        <div class="col-xl-5 col-lg-12 sponser-column">
-        </div>
+        </a>
+
+        <a class="sponsor-card" href="https://jetstream-cloud.org/" target="_blank" rel="noopener">
+          <div class="sponsor-content">
+            <img class="sponsor-card__logo" src="../../assets/img/jetstream2-logo.svg" alt="Jetstream2 logo" />
+            <div class="sponsor-card__name">Jetstream2</div>
+          </div>
+        </a>
+
+        <a class="sponsor-card" href="https://www.nsf.gov/" target="_blank" rel="noopener">
+          <div class="sponsor-content">
+            <img class="sponsor-card__logo" src="../../assets/img/nsf-logo.png" alt="National Science Foundation logo" />
+            <div class="sponsor-card__name">National Science Foundation</div>
+          </div>
+        </a>
       </div>
     </div>
   </div> <!-- Row Dataset Description End -->
diff --git a/src/Analysim.Web/ClientApp/src/app/home/home.component.scss b/src/Analysim.Web/ClientApp/src/app/home/home.component.scss
index 2382a775..1e9e0ca2 100644
--- a/src/Analysim.Web/ClientApp/src/app/home/home.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/home/home.component.scss
@@ -73,48 +73,73 @@
   }
 }
 
-.home-sponser {
-  > .col-md-10 > .row {
-    margin-bottom: var(--space-4);
+.sponsor-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: var(--space-4);
+
+  @media (max-width: 1199.98px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  > .col-md-10 > .row:last-child {
-    margin-bottom: 0;
+  @media (max-width: 991.98px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .sponser-column {
-    align-self: center;
+  @media (max-width: 575.98px) {
+    grid-template-columns: 1fr;
+  }
+}
 
-    > .row {
-      margin-left: 0;
-      margin-right: 0;
-    }
+.sponsor-card {
+  @include card-stack;
 
-    @media (max-width: 991.98px) {
-      padding-top: var(--space-2);
-      padding-bottom: var(--space-2);
-    }
+  width: 100%;
+  min-height: 220px;
 
-    .hero-sponser {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      padding: var(--space-2) var(--space-3);
-      margin: 0;
-
-      img {
-        @include media-square(44px);
-      }
-
-      a {
-        text-decoration: none;
-        color: inherit;
-        line-height: 1.2;
-      }
-
-      a:hover {
-        text-decoration: underline;
-      }
-    }
+  text-decoration: none;
+  color: var(--text-on-light);
+
+  /* --- Border --- */
+  border: var(--border-w-1) var(--border-style) var(--border-color);
+  border-radius: 6px;
+
+  /* --- Shadow --- */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+
+  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
   }
+
+  &:focus-visible {
+    outline: var(--border-w-2) solid var(--link-color);
+    outline-offset: 2px;
+  }
+}
+
+.sponsor-card__logo {
+  width: 100%;
+  height: 200px;
+  object-fit: contain;
+  display: block;
 }
+
+.sponsor-card__name {
+  font-size: 0.95rem;
+  line-height: 1.2;
+  font-weight: 600;
+  max-width: 32ch;
+}
+
+.sponsor-content {
+  margin: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/navbar/navbar.component.html b/src/Analysim.Web/ClientApp/src/app/navbar/navbar.component.html
index 23a58def..2e460445 100644
--- a/src/Analysim.Web/ClientApp/src/app/navbar/navbar.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/navbar/navbar.component.html
@@ -6,7 +6,9 @@
     <span class="navbar-toggler-icon "></span>
   </button> <!-- Nav Toggle End -->
   <!-- Nav Brand -->
-  <a class="navbar-brand" (click)="navigateHome()">AnalySim</a>
+  <a class="navbar-brand" (click)="navigateHome()">
+    <img src="../../assets/img/AnalySim-Logo-Full-Dark.png" alt="AnalySim" />
+  </a>
 
   <!-- Nav Collapse Start-->
   <div class="collapse navbar-collapse">
diff --git a/src/Analysim.Web/ClientApp/src/app/navbar/navbar.component.scss b/src/Analysim.Web/ClientApp/src/app/navbar/navbar.component.scss
index f27eef79..eba23d14 100644
--- a/src/Analysim.Web/ClientApp/src/app/navbar/navbar.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/navbar/navbar.component.scss
@@ -4,6 +4,14 @@
   cursor: pointer;
   display: inline-flex;
   align-items: center;
+
+  img {
+    height: 32px;
+    width: auto;
+    max-height: 100%;
+    object-fit: contain;
+    display: block;
+  }
 }
 
 /* Remove default active borders */
diff --git a/src/Analysim.Web/ClientApp/src/assets/img/AnalySim-Logo-Full-Dark.png b/src/Analysim.Web/ClientApp/src/assets/img/AnalySim-Logo-Full-Dark.png
new file mode 100644
index 00000000..d34d3eb5
Binary files /dev/null and b/src/Analysim.Web/ClientApp/src/assets/img/AnalySim-Logo-Full-Dark.png differ
diff --git a/src/Analysim.Web/ClientApp/src/assets/img/GSoC-icon.png b/src/Analysim.Web/ClientApp/src/assets/img/GSoC-icon.png
new file mode 100644
index 00000000..bb7f8458
Binary files /dev/null and b/src/Analysim.Web/ClientApp/src/assets/img/GSoC-icon.png differ
diff --git a/src/Analysim.Web/ClientApp/src/assets/img/incf-icon.png b/src/Analysim.Web/ClientApp/src/assets/img/incf-icon.png
new file mode 100644
index 00000000..c67e4920
Binary files /dev/null and b/src/Analysim.Web/ClientApp/src/assets/img/incf-icon.png differ
diff --git a/src/Analysim.Web/ClientApp/src/assets/styles/abstracts/_tokens.scss b/src/Analysim.Web/ClientApp/src/assets/styles/abstracts/_tokens.scss
index b1ff9dd5..1286ca9e 100644
--- a/src/Analysim.Web/ClientApp/src/assets/styles/abstracts/_tokens.scss
+++ b/src/Analysim.Web/ClientApp/src/assets/styles/abstracts/_tokens.scss
@@ -48,7 +48,8 @@
   --radius-1: 4px;
 
   /* Typography */
-  --font-sans: Roboto, "Helvetica Neue", sans-serif;
+  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI",
+             Roboto, "Helvetica Neue", Arial, sans-serif;
   --fs-12: 12px;
   --fs-14: 14px;
   --fs-16: 16px;
diff --git a/src/Analysim.Web/ClientApp/src/assets/styles/base/_typography.scss b/src/Analysim.Web/ClientApp/src/assets/styles/base/_typography.scss
index 4d4dc50c..8c0ca605 100644
--- a/src/Analysim.Web/ClientApp/src/assets/styles/base/_typography.scss
+++ b/src/Analysim.Web/ClientApp/src/assets/styles/base/_typography.scss
@@ -8,10 +8,12 @@ body {
   font-family: var(--font-sans);
   background: var(--surface-0);
   color: var(--text-on-light);
+  font-weight: 450;
+  letter-spacing: 0.01em;
 }
 
 /* Larger lead text style */
 .text-lead {
   font-size: 1.25rem;
-  font-weight: 400;
+  font-weight: 500;
 }
diff --git a/src/Analysim.Web/ClientApp/src/assets/styles/utilities/_foundation.scss b/src/Analysim.Web/ClientApp/src/assets/styles/utilities/_foundation.scss
index b5293e79..26628815 100644
--- a/src/Analysim.Web/ClientApp/src/assets/styles/utilities/_foundation.scss
+++ b/src/Analysim.Web/ClientApp/src/assets/styles/utilities/_foundation.scss
@@ -39,7 +39,7 @@
 /* Typography */
 .text-lead {
   font-size: 1.25rem;
-  font-weight: 400;
+  font-weight: 500;
 }
 
 /* Links */
diff --git a/src/Analysim.Web/ClientApp/src/index.html b/src/Analysim.Web/ClientApp/src/index.html
index fe768e66..c946af3f 100644
--- a/src/Analysim.Web/ClientApp/src/index.html
+++ b/src/Analysim.Web/ClientApp/src/index.html
@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="https://unpkg.com/@observablehq/notebook-inspector@1/dist/notebook-inspector-style.css">
 </head>