diff --git a/.dockerignore b/.dockerignore
index 8e3d0e1a7..bfc11840b 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,5 +1,28 @@
+# Python virtualenvs (note: "venv*" does NOT match ".venv" — list both)
 venv*
 env*
+.venv/
+.env/
+
+# local secrets / generated config
 oeplatform/securitysettings.py
 
+# node deps (installed inside the image / named volume)
 node_modules/
+
+# VCS + large runtime data that is bind-mounted, never needed at build time
+.git/
+.gitignore
+ontologies/
+media/
+static/
+data/
+
+# editor / OS / build noise
+.vscode/
+.idea/
+__pycache__/
+*.pyc
+*.bak
+*.bak-*
+podman/
diff --git a/base/static/css/base-style.css b/base/static/css/base-style.css
index 55880f4c0..44691f9ed 100644
--- a/base/static/css/base-style.css
+++ b/base/static/css/base-style.css
@@ -35,6 +35,12 @@ body {
   background-image: unset;
 }
 
+@media screen and (max-width: 991.98px) {
+  .navbar-toggler + .navbar-brand {
+    margin-left: 2rem;
+  }
+}
+
 .site-header {
   text-align: center;
   width: 100%;
diff --git a/base/static/css/index-style.css b/base/static/css/index-style.css
index 21a19ea49..a96c575c2 100644
--- a/base/static/css/index-style.css
+++ b/base/static/css/index-style.css
@@ -7,200 +7,870 @@
   align-items: center;
 }
 
-.index-padding {
-  margin-top: 2em;
+.index-home .btn-close {
+  -webkit-user-select: none;
+  user-select: none;
 }
 
-.index-group {
-  height: 100%;
+.index-animate-in {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .index-animate-in {
+    opacity: 0;
+    transform: translateY(20px);
+    transition:
+      opacity 250ms ease-out,
+      transform 250ms ease-out;
+  }
+
+  .index-animate-in.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  /* stagger cards within a row by 80ms each; nth-child is scoped per grid */
+  .index-features-grid > .index-feature-card:nth-child(2) {
+    transition-delay: 80ms;
+  }
+
+  .index-features-grid > .index-feature-card:nth-child(3) {
+    transition-delay: 160ms;
+  }
+
+  .index-features-grid > .index-feature-card:nth-child(4) {
+    transition-delay: 240ms;
+  }
+
+  .index-capabilities-list > .index-capability-card:nth-child(2) {
+    transition-delay: 80ms;
+  }
+
+  .index-capabilities-list > .index-capability-card:nth-child(3) {
+    transition-delay: 160ms;
+  }
+
+  .index-capabilities-list > .index-capability-card:nth-child(4) {
+    transition-delay: 240ms;
+  }
+
+  /* sits beside .index-academy-intro in the same row, so it staggers after it */
+  .index-academy-quickstart.index-animate-in {
+    transition-delay: 80ms;
+  }
+}
+
+.index-hero {
+  background-color: var(--bs-primary);
+  padding: 96px 24px;
   display: flex;
-  flex-flow: column;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-around;
 }
 
-.index-tutorial {
-  padding: 2em 1em;
+.index-hero-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  max-width: 1248px;
 }
 
-.index-tutorial span {
-  line-height: 1.5em;
+.index-hero-badge {
+  padding: 8px 0;
+  border-bottom: 2px solid var(--white);
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.14px;
+  color: var(--white);
 }
 
-.index-tutorial a {
-  margin-top: 1em;
-  background-image: none;
-  border: 1px solid black;
+.index-hero-title {
+  margin: 0;
+  font-size: 60px;
+  font-weight: 600;
+  line-height: 1.1;
+  letter-spacing: -1.2px;
+  color: var(--white);
+}
+
+.index-hero-subtitle {
+  margin: 0;
+  max-width: 591px;
+  font-size: 20px;
+  font-weight: 300;
+  line-height: 1.4;
+  letter-spacing: 0.2px;
+  color: var(--white);
 }
 
-.index-home h3 {
+.index-hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px 0;
+}
+
+.index-hero-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 46px;
+  padding: 0 24px;
+  border-radius: 4px;
+  font-size: 16px;
   font-weight: 600;
-  font-size: 32px;
+  letter-spacing: 0.25px;
+  text-decoration: none;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.index-hero-btn-light {
+  background-color: #f6f9fb;
   color: var(--primaryColor2);
+  border: none;
 }
 
-.index-home span.subheader {
-  font-size: 24px;
-  color: var(--grey1);
+.index-hero-btn-light:hover {
+  background-color: var(--white);
+  color: var(--primaryColor2);
 }
 
-.index-home h4 {
-  font-weight: 600;
-  color: var(--primaryColor4);
+.index-hero-btn-outline {
+  background-color: transparent;
+  color: var(--white);
+  border: 2px solid var(--white);
+}
+
+.index-hero-btn-outline:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: var(--white);
+}
+
+@media screen and (max-width: 800px) {
+  .index-hero {
+    padding: 48px 24px;
+  }
+
+  .index-hero-title {
+    font-size: 36px;
+  }
+
+  .index-hero-subtitle {
+    font-size: 16px;
+  }
 }
 
-.index-tile {
-  transform: scale(0.8);
-  margin: -1.8em;
-  margin-bottom: 1em;
-  max-width: 350px;
+.index-features {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0.5em;
+  gap: 64px;
+  padding: 96px 24px;
+  width: 100%;
 }
 
-.inner-index-tile {
-  padding-left: 5px;
+.index-features-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  max-width: 1248px;
+}
+
+.index-features-title {
+  margin: 0;
+  font-size: 36px;
+  font-weight: 700;
+  letter-spacing: 0.72px;
+  color: #294456;
+}
+
+.index-features-subtitle {
+  margin: 0;
+  max-width: 800px;
+  font-size: 20px;
+  line-height: 1.4;
+  letter-spacing: 0.2px;
+  color: #4d748f;
+}
+
+.index-features-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  width: 100%;
+  max-width: 1248px;
+}
+
+.index-features-grid-quad {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+@media screen and (max-width: 1024px) {
+  .index-features-grid-quad {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .index-features-grid-quad {
+    grid-template-columns: 1fr;
+  }
+}
+
+.index-feature-card {
+  display: flex;
+  flex: 1 0 240px;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 24px;
+  min-height: 300px;
+  padding: 24px;
+  border: 1px solid #e9f0f5;
+  border-radius: 4px;
+  background-color: var(--white);
+  box-shadow: 0 2px 1px rgba(41, 114, 166, 0.1);
+  text-align: left;
+}
+
+.index-feature-card-body {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  justify-content: space-around;
+  gap: 24px;
 }
 
-.index-tile .btn{
-  /* button on bottom of box */
-  margin-top: auto;
+.index-feature-icon {
+  width: 56px;
+  height: 56px;
+  filter: drop-shadow(0px 8px 10px rgba(41, 114, 166, 0.1));
 }
 
+.index-feature-card-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+  color: #294456;
+}
 
-.index-tile img {
-  align-self: center;
-  height: 60px;
-  width: 60px;
-  padding-top: 15px;
-  padding-left: 15px;
+.index-feature-card-description {
+  margin: 0;
+  font-size: 16px;
+  line-height: 24px;
+  color: #294456;
 }
 
-.index-tile a {
-  color: var(--white);
+.index-feature-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 0.32px;
+  line-height: 24px;
+  color: var(--bs-primary);
+  text-decoration: none;
   background-image: none;
   border: none;
+  padding: 0;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.index-feature-link-arrow {
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.index-feature-link:hover .index-feature-link-arrow,
+.index-feature-link:focus-visible .index-feature-link-arrow {
+  transform: translateX(4px);
+}
+
+@media screen and (max-width: 800px) {
+  .index-features {
+    padding: 48px 24px;
+  }
 
+  .index-features-title {
+    font-size: 28px;
+  }
+
+  .index-feature-card {
+    flex: 1 0 100%;
+  }
+}
+
+.index-capabilities {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 64px;
+  padding: 96px 24px;
   width: 100%;
+  background-color: #f6fbff;
 }
 
-.index-tile-color-1 a {
-  background-color: var(--primaryColor1);
+.index-capabilities-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  max-width: 1248px;
 }
 
-.index-tile-color-2 a {
-  background-color: var(--primaryColor2);
+.index-capabilities-title {
+  margin: 0;
+  font-size: 36px;
+  font-weight: 700;
+  letter-spacing: 0.72px;
+  color: #294456;
+}
+
+.index-capabilities-subtitle {
+  margin: 0;
+  max-width: 800px;
+  font-size: 20px;
+  line-height: 1.4;
+  letter-spacing: 0.2px;
+  color: #4d748f;
+}
+
+.index-capabilities-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  max-width: 1248px;
 }
 
-.index-tile-color-3 a {
-  background-color: var(--primaryColor3);
+.index-capability-card {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  width: 100%;
+  padding: 32px;
+  border: 1px solid #f6f9fb;
+  border-radius: 4px;
+  background-color: var(--white);
+  box-shadow: 0 2px 1px rgba(41, 114, 166, 0.1);
+  text-align: left;
 }
 
-.index-tile-color-4 a {
-  background-color: var(--primaryColor4);
+.index-capability-card-header {
+  display: flex;
+  gap: 24px;
+  align-items: flex-start;
+  width: 100%;
 }
 
-.index-tile-color-5 a {
-  background-color: var(--primaryColor5);
+.index-capability-card-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.index-tile-colored {
-  background-color: white;
-  border: 2px groove var(--primaryColor1);
-  border-radius: 5px;
+.index-capability-card-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 24px;
+  color: #294456;
 }
 
-.index-tile-bordered a {
-  border: 1px solid var(--primaryColor4);
-  color: var(--primaryColor4);
+.index-capability-card-description {
+  margin: 0;
+  font-size: 16px;
+  line-height: 24px;
+  color: #4d748f;
 }
 
-.index-about-container-background {
-  background-color: var(--secondaryColor1);
+.index-capability-divider {
   width: 100%;
+  margin: 0;
+  border: none;
+  border-top: 1px solid #e9f0f5;
 }
 
-.index-about-container {
-  padding: 2em 1em;
+.index-capability-columns {
+  display: flex;
+  gap: 48px;
   width: 100%;
+}
 
-  display: grid;
+.index-capability-column {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
 
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 48px;
-  max-width: 800px;
-  margin: auto;
+.index-capability-column-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  color: #294456;
+}
 
+.index-feature-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.index-feature-list li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.index-feature-list span {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.index-capability-check {
+  flex-shrink: 0;
+}
+
+.index-capability-feature-list span {
+  color: #294456;
+}
+
+.index-capability-resource-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.index-resource-link {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  padding: 8px 16px;
+  border: 1px solid #d7e2ea;
+  border-radius: 4px;
   font-size: 14px;
+  font-weight: 700;
+  line-height: 24px;
+  color: var(--bs-primary);
+  text-decoration: none;
+  background-image: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.index-resource-link:hover .index-feature-link-arrow,
+.index-resource-link:focus-visible .index-feature-link-arrow {
+  transform: translateX(4px);
+}
+
+@media screen and (max-width: 800px) {
+  .index-capabilities {
+    padding: 48px 24px;
+  }
+
+  .index-capabilities-title {
+    font-size: 28px;
+  }
+
+  .index-capability-card {
+    padding: 24px;
+  }
+
+  .index-capability-columns {
+    flex-direction: column;
+    gap: 24px;
+  }
+}
+
+.index-academy {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 96px 24px;
+  background-color: var(--bs-primary);
+}
+
+.index-academy-inner {
+  display: flex;
+  gap: 64px;
+  align-items: flex-start;
+  width: 100%;
+  max-width: 1248px;
+}
+
+.index-academy-intro {
+  display: flex;
+  flex: 1 1 0;
+  gap: 32px;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.index-academy-icon {
+  flex-shrink: 0;
+  width: 106px;
+  height: 106px;
+}
+
+.index-academy-content {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: 32px;
+  align-items: flex-start;
+  min-width: 0;
+  text-align: left;
+}
+
+.index-academy-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.index-academy-title {
+  margin: 0;
+  font-size: 36px;
+  font-weight: 700;
+  letter-spacing: 0.72px;
+  color: var(--white);
+}
+
+.index-academy-subtitle {
+  margin: 0;
+  font-size: 20px;
+  line-height: 1.4;
+  letter-spacing: 0.2px;
+  color: #e7f1f9;
+}
 
-  color: var(--primaryColor3);
+.index-academy-feature-list {
+  width: 100%;
 }
 
-.index-about-column img {
-  height: 32px;
+.index-academy-feature-list span {
+  color: var(--white);
 }
 
-.index-about-column {
-  transform: scale(0.8);
+.index-academy-quickstart {
   display: flex;
+  flex: 0 0 384px;
   flex-direction: column;
-  min-height: 150px;
+  gap: 32px;
+  padding: 32px;
+  border: 1px solid #f6f9fb;
+  border-radius: 4px;
+  background-color: var(--white);
+  box-shadow: 0 4px 2px rgba(41, 114, 166, 0.25);
+  text-align: left;
+}
 
+.index-academy-quickstart-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: 0.48px;
+  color: #294456;
+}
 
+.index-academy-quickstart-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
 
+.index-academy-quickstart-item {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid #d7e2ea;
+  border-radius: 4px;
 }
 
-.index-about-column .btn{
-  /* button on bottom of box */
-  margin-top: auto;
+.index-academy-quickstart-icon {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
 }
 
+.index-academy-quickstart-item-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  color: #294456;
+}
 
+.index-academy-quickstart-item-description {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.4;
+  color: #4d748f;
+}
 
-.index-about-column a {
+@media screen and (max-width: 1024px) {
+  .index-academy-quickstart {
+    flex-basis: 320px;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .index-academy {
+    padding: 48px 24px;
+  }
+
+  .index-academy-inner {
+    flex-direction: column;
+  }
+
+  .index-academy-intro {
+    flex-direction: column;
+  }
+
+  .index-academy-title {
+    font-size: 28px;
+  }
+
+  .index-academy-quickstart {
+    flex: 1 1 auto;
+    width: 100%;
+  }
+}
+
+.index-navbar .container-fluid {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.index-navbar .nav-link {
+  position: relative;
   color: var(--white);
-  background-color: var(--primaryColor3);
-  background-image: none;
-  border: none;
+  font-size: 0.875rem;
+  -webkit-user-select: none;
+  user-select: none;
+}
 
-  padding: 4px 12px;
+.index-navbar .navbar-toggler {
+  -webkit-user-select: none;
+  user-select: none;
 }
 
-.index-tile-container {
-  display: grid;
-  grid-template-columns: repeat(5, auto);
-  grid-gap: 2em;
-  padding: 2em 0;
+/* dropdown-toggle items already use ::after for Bootstrap's caret,
+   so the underline uses ::before there instead to avoid clobbering it */
+.index-navbar .nav-link:not(.dropdown-toggle)::after,
+.index-navbar .nav-link.dropdown-toggle::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0%;
+  height: 2px;
+  background-color: var(--white);
+  transition: width 0.2s ease;
+}
+
+.index-navbar .nav-link:not(.dropdown-toggle):hover::after,
+.index-navbar .nav-link.dropdown-toggle:hover::before {
+  width: 100%;
+}
+
+/* replace Bootstrap's border-triangle caret with a chevron, same size */
+.index-navbar .dropdown-toggle::after {
+  display: inline-block;
+  width: 0.45em;
+  height: 0.45em;
+  margin-left: 0.35em;
+  vertical-align: 0.1em;
+  content: "";
+  border: 0;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(45deg);
+}
+
+.index-navbar .dropdown-menu {
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  border: 1px solid #e9f0f5;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(41, 114, 166, 0.15);
+  font-size: 0.875rem;
+}
+
+.index-navbar .dropdown-item {
+  padding: 0.625rem 0.75rem;
+  border-radius: 4px;
+  color: #294456;
+}
+
+.index-navbar .dropdown-item:hover,
+.index-navbar .dropdown-item:focus {
+  background-color: #eaf3fa;
+  color: #1f567d;
+}
+
+.index-navbar .dropdown-item.active,
+.index-navbar .dropdown-item:active {
+  background-color: var(--bs-primary);
+  color: var(--white);
+}
 
-  justify-items: center;
+.index-navbar .dropdown-menu.show {
+  animation: index-dropdown-fade 0.15s ease;
 }
 
-/*
-.index-tile .hovertext {
-    visibility: hidden;
-    width: auto;
-    height: auto;
-    background-color: var(--secondaryColor1);
-    color: var(--primaryColor2);
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    z-index: 1;
+@keyframes index-dropdown-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
   }
+}
+
+.index-footer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 96px 24px;
+  background-color: var(--bs-primary);
+}
+
+.index-footer-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 96px;
+  width: 100%;
+  max-width: 1248px;
+}
+
+.index-footer-top {
+  display: flex;
+  align-items: flex-start;
+  gap: 48px;
+  width: 100%;
+  text-align: left;
+}
+
+.index-footer-brand {
+  display: flex;
+  flex: 0 0 293px;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.index-footer-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.index-footer-brand-name {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+  color: var(--white);
+}
+
+.index-footer-tagline {
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+  color: #e7f1f9;
+}
+
+.index-footer-columns {
+  display: flex;
+  flex: 1 0 0;
+  gap: 48px;
+}
 
-  .index-tile:hover .hovertext {
-    visibility: visible;
-  } */
+.index-footer-column {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+
+.index-footer-column-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--white);
+}
+
+.index-footer-link-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.index-footer-link-list a {
+  font-size: 14px;
+  color: #e7f1f9;
+  text-decoration: none;
+  background-image: none;
+}
+
+.index-footer-link-list a:hover {
+  color: var(--white);
+  text-decoration: underline;
+}
+
+.index-footer-copyright {
+  margin: 0;
+  font-size: 14px;
+  text-align: center;
+  color: #e7f1f9;
+}
 
 @media screen and (max-width: 800px) {
-  .index-tile-container {
-    grid-template-columns: repeat(2, auto);
-    grid-template-rows: repeat(2, auto);
+  .index-footer {
+    padding: 48px 24px;
+  }
+
+  .index-footer-inner {
+    gap: 48px;
+  }
+
+  .index-footer-top {
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  .index-footer-brand {
+    flex: 1 1 auto;
+  }
+
+  .index-footer-columns {
+    flex-direction: column;
+    gap: 24px;
   }
 }
diff --git a/base/static/img/welcome/i_courses.svg b/base/static/img/welcome/i_courses.svg
new file mode 100644
index 000000000..d0039b732
--- /dev/null
+++ b/base/static/img/welcome/i_courses.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2750_50)">
+<ellipse cx="12.1244" cy="17.9235" rx="9.09316" ry="5.30434" fill="#142B3D"/>
+<path d="M12.1242 1L0 8.32505L12.1242 15.6501L24.2484 8.32505L12.1242 1Z" fill="#C7E0F0"/>
+</g>
+<defs>
+<clipPath id="clip0_2750_50">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/base/static/img/welcome/i_hex_blue_academy.svg b/base/static/img/welcome/i_hex_blue_academy.svg
new file mode 100644
index 000000000..6cc870033
--- /dev/null
+++ b/base/static/img/welcome/i_hex_blue_academy.svg
@@ -0,0 +1,11 @@
+<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M49 2.3094C51.4752 0.880338 54.5248 0.880339 57 2.3094L94.8993 24.1906C97.3746 25.6197 98.8993 28.2607 98.8993 31.1188V74.8812C98.8993 77.7393 97.3746 80.3803 94.8993 81.8094L57 103.691C54.5248 105.12 51.4752 105.12 49 103.691L11.1007 81.8094C8.62544 80.3803 7.10065 77.7393 7.10065 74.8812V31.1188C7.10065 28.2607 8.62545 25.6197 11.1007 24.1906L49 2.3094Z" fill="url(#paint0_linear_2757_310)"/>
+<ellipse cx="53.7283" cy="65.2374" rx="18.4656" ry="10.7716" fill="#378DC0"/>
+<path d="M53.7277 30.8708L29.1069 45.7459L53.7277 60.621L78.3485 45.7459L53.7277 30.8708Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_2757_310" x1="8.48" y1="75.79" x2="97.52" y2="29.68" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1C5177"/>
+<stop offset="1" stop-color="#54A7E2"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/base/static/img/welcome/i_hex_blue_api.svg b/base/static/img/welcome/i_hex_blue_api.svg
new file mode 100644
index 000000000..c1a66d894
--- /dev/null
+++ b/base/static/img/welcome/i_hex_blue_api.svg
@@ -0,0 +1,15 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 2.3094C26.4752 0.880338 29.5248 0.880339 32 2.3094L48.2487 11.6906C50.7239 13.1197 52.2487 15.7607 52.2487 18.6188V37.3812C52.2487 40.2393 50.7239 42.8803 48.2487 44.3094L32 53.6906C29.5248 55.1197 26.4752 55.1197 24 53.6906L7.75129 44.3094C5.27608 42.8803 3.75129 40.2393 3.75129 37.3812V18.6188C3.75129 15.7607 5.27608 13.1197 7.75129 11.6906L24 2.3094Z" fill="url(#paint0_linear_2757_311)"/>
+<path d="M28.5 24.5V36H27.5V24.5H28.5Z" fill="#142B3D"/>
+<path d="M34.8714 18.4953C34.8714 18.4829 34.8718 18.4705 34.8718 18.4581C34.8718 15.4437 32.4282 13 29.4137 13C27.5982 13 25.99 13.8867 24.9978 15.2504C24.5545 15.0395 24.0586 14.9211 23.535 14.9211C21.6518 14.9211 20.1251 16.4477 20.1251 18.331C20.1251 18.4823 20.136 18.6309 20.155 18.777C18.885 19.347 18 20.6217 18 22.1039C18 24.1175 19.6323 25.7497 21.6458 25.7497H34.3542C36.3677 25.7497 38 24.1174 38 22.1039C38 20.2661 36.6398 18.7465 34.8714 18.4953Z" fill="#C7E0F0"/>
+<circle cx="28" cy="37" r="2" fill="#C7E0F0"/>
+<path d="M39.5 30.5V36.5H38.5V31.5H17.5V36.5H16.5V30.5H39.5Z" fill="#142B3D"/>
+<circle cx="17" cy="37" r="2" fill="#C7E0F0"/>
+<circle cx="39" cy="37" r="2" fill="#C7E0F0"/>
+<defs>
+<linearGradient id="paint0_linear_2757_311" x1="4.48" y1="40.04" x2="51.52" y2="15.68" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1F4D6D"/>
+<stop offset="1" stop-color="#378DC0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/base/static/img/welcome/i_hex_blue_database.svg b/base/static/img/welcome/i_hex_blue_database.svg
new file mode 100644
index 000000000..33eef6da8
--- /dev/null
+++ b/base/static/img/welcome/i_hex_blue_database.svg
@@ -0,0 +1,12 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 2.3094C26.4752 0.880338 29.5248 0.880339 32 2.3094L48.2487 11.6906C50.7239 13.1197 52.2487 15.7607 52.2487 18.6188V37.3812C52.2487 40.2393 50.7239 42.8803 48.2487 44.3094L32 53.6906C29.5248 55.1197 26.4752 55.1197 24 53.6906L7.75129 44.3094C5.27608 42.8803 3.75129 40.2393 3.75129 37.3812V18.6188C3.75129 15.7607 5.27608 13.1197 7.75129 11.6906L24 2.3094Z" fill="url(#paint0_linear_2757_254)"/>
+<ellipse cx="28.4906" cy="34.6683" rx="11.0644" ry="4.61015" fill="#C7E0F0"/>
+<ellipse cx="28.4906" cy="28.2142" rx="11.0644" ry="4.61015" fill="#142B3D"/>
+<ellipse cx="28.4906" cy="21.7599" rx="11.0644" ry="4.61015" fill="#C7E0F0"/>
+<defs>
+<linearGradient id="paint0_linear_2757_254" x1="4.48" y1="40.04" x2="51.52" y2="15.68" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1F4D6D"/>
+<stop offset="1" stop-color="#378DC0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/base/static/img/welcome/i_hex_blue_docs.svg b/base/static/img/welcome/i_hex_blue_docs.svg
new file mode 100644
index 000000000..709f3fbb5
--- /dev/null
+++ b/base/static/img/welcome/i_hex_blue_docs.svg
@@ -0,0 +1,11 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 2.3094C26.4752 0.880338 29.5248 0.880339 32 2.3094L48.2487 11.6906C50.7239 13.1197 52.2487 15.7607 52.2487 18.6188V37.3812C52.2487 40.2393 50.7239 42.8803 48.2487 44.3094L32 53.6906C29.5248 55.1197 26.4752 55.1197 24 53.6906L7.75129 44.3094C5.27608 42.8803 3.75129 40.2393 3.75129 37.3812V18.6188C3.75129 15.7607 5.27608 13.1197 7.75129 11.6906L24 2.3094Z" fill="url(#paint0_linear_2763_336)"/>
+<path d="M19 17H32V24H39V39H19V17Z" fill="#C7E0F0"/>
+<path d="M32 24V17L39 24H32Z" fill="#142B3D"/>
+<defs>
+<linearGradient id="paint0_linear_2763_336" x1="4.48" y1="40.04" x2="51.52" y2="15.68" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1F4D6D"/>
+<stop offset="1" stop-color="#378DC0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/base/static/img/welcome/i_hex_blue_factsheets.svg b/base/static/img/welcome/i_hex_blue_factsheets.svg
new file mode 100644
index 000000000..733220657
--- /dev/null
+++ b/base/static/img/welcome/i_hex_blue_factsheets.svg
@@ -0,0 +1,21 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 2.3094C26.4752 0.880338 29.5248 0.880339 32 2.3094L48.2487 11.6906C50.7239 13.1197 52.2487 15.7607 52.2487 18.6188V37.3812C52.2487 40.2393 50.7239 42.8803 48.2487 44.3094L32 53.6906C29.5248 55.1197 26.4752 55.1197 24 53.6906L7.75129 44.3094C5.27608 42.8803 3.75129 40.2393 3.75129 37.3812V18.6188C3.75129 15.7607 5.27608 13.1197 7.75129 11.6906L24 2.3094Z" fill="url(#paint0_linear_2757_268)"/>
+<rect x="16" y="22" width="5" height="6" fill="#C7E0F0"/>
+<rect x="16" y="16" width="6.56251" height="6" fill="#C7E0F0"/>
+<rect x="21" y="20.125" width="5" height="7.875" fill="#C7E0F0"/>
+<path d="M22.5625 20.125V16L26 20.125H22.5625Z" fill="#142B3D"/>
+<rect x="30" y="22" width="5" height="6" fill="#C7E0F0"/>
+<rect x="30" y="16" width="6.56251" height="6" fill="#C7E0F0"/>
+<rect x="35" y="20.125" width="5" height="7.875" fill="#C7E0F0"/>
+<path d="M36.5625 20.125V16L40 20.125H36.5625Z" fill="#142B3D"/>
+<rect x="23" y="37" width="5" height="6" fill="#C7E0F0"/>
+<rect x="23" y="31" width="6.56251" height="6" fill="#C7E0F0"/>
+<rect x="28" y="35.125" width="5" height="7.875" fill="#C7E0F0"/>
+<path d="M29.5625 35.125V31L33 35.125H29.5625Z" fill="#142B3D"/>
+<defs>
+<linearGradient id="paint0_linear_2757_268" x1="4.48" y1="40.04" x2="51.52" y2="15.68" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1F4D6D"/>
+<stop offset="1" stop-color="#378DC0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/base/static/img/welcome/i_hex_blue_ontology.svg b/base/static/img/welcome/i_hex_blue_ontology.svg
new file mode 100644
index 000000000..79907578e
--- /dev/null
+++ b/base/static/img/welcome/i_hex_blue_ontology.svg
@@ -0,0 +1,15 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 2.3094C26.4752 0.880338 29.5248 0.880339 32 2.3094L48.2487 11.6906C50.7239 13.1197 52.2487 15.7607 52.2487 18.6188V37.3812C52.2487 40.2393 50.7239 42.8803 48.2487 44.3094L32 53.6906C29.5248 55.1197 26.4752 55.1197 24 53.6906L7.75129 44.3094C5.27608 42.8803 3.75129 40.2393 3.75129 37.3812V18.6188C3.75129 15.7607 5.27608 13.1197 7.75129 11.6906L24 2.3094Z" fill="url(#paint0_linear_2757_285)"/>
+<circle cx="17" cy="25" r="4" fill="#C7E0F0"/>
+<circle cx="28" cy="16" r="4" fill="#C7E0F0"/>
+<circle cx="39" cy="25" r="4" fill="#C7E0F0"/>
+<circle cx="21" cy="39" r="4" fill="#C7E0F0"/>
+<circle cx="35" cy="39" r="4" fill="#C7E0F0"/>
+<rect x="27.9497" y="22" width="9.82844" height="9.82844" transform="rotate(45 27.9497 22)" fill="#142B3D"/>
+<defs>
+<linearGradient id="paint0_linear_2757_285" x1="4.48" y1="40.04" x2="51.52" y2="15.68" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1F4D6D"/>
+<stop offset="1" stop-color="#378DC0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/base/static/img/welcome/i_hex_blue_repo.svg b/base/static/img/welcome/i_hex_blue_repo.svg
new file mode 100644
index 000000000..f6fe310a5
--- /dev/null
+++ b/base/static/img/welcome/i_hex_blue_repo.svg
@@ -0,0 +1,17 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 2.3094C26.4752 0.880338 29.5248 0.880339 32 2.3094L48.2487 11.6906C50.7239 13.1197 52.2487 15.7607 52.2487 18.6188V37.3812C52.2487 40.2393 50.7239 42.8803 48.2487 44.3094L32 53.6906C29.5248 55.1197 26.4752 55.1197 24 53.6906L7.75129 44.3094C5.27608 42.8803 3.75129 40.2393 3.75129 37.3812V18.6188C3.75129 15.7607 5.27608 13.1197 7.75129 11.6906L24 2.3094Z" fill="url(#paint0_linear_2757_319)"/>
+<rect x="20" y="17" width="16" height="10" fill="#C7E0F0"/>
+<rect x="15" y="33" width="9" height="6" fill="#C7E0F0"/>
+<path d="M20 15V17H27L24.5938 15H20Z" fill="#C7E0F0"/>
+<path d="M15 32V33H20L18.2812 32H15Z" fill="#C7E0F0"/>
+<path d="M32 32V33H37L35.2812 32H32Z" fill="#C7E0F0"/>
+<path d="M28.5 27V36H27.5V27H28.5Z" fill="#142B3D"/>
+<path d="M32.5 36V37H24V36H32.5Z" fill="#142B3D"/>
+<rect x="32" y="33" width="9" height="6" fill="#C7E0F0"/>
+<defs>
+<linearGradient id="paint0_linear_2757_319" x1="4.48" y1="40.04" x2="51.52" y2="15.68" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1F4D6D"/>
+<stop offset="1" stop-color="#378DC0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/base/static/img/welcome/i_hex_blue_scenario_bundles.svg b/base/static/img/welcome/i_hex_blue_scenario_bundles.svg
new file mode 100644
index 000000000..7c594a89b
--- /dev/null
+++ b/base/static/img/welcome/i_hex_blue_scenario_bundles.svg
@@ -0,0 +1,14 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 2.3094C26.4752 0.880338 29.5248 0.880339 32 2.3094L48.2487 11.6906C50.7239 13.1197 52.2487 15.7607 52.2487 18.6188V37.3812C52.2487 40.2393 50.7239 42.8803 48.2487 44.3094L32 53.6906C29.5248 55.1197 26.4752 55.1197 24 53.6906L7.75129 44.3094C5.27608 42.8803 3.75129 40.2393 3.75129 37.3812V18.6188C3.75129 15.7607 5.27608 13.1197 7.75129 11.6906L24 2.3094Z" fill="url(#paint0_linear_2757_260)"/>
+<rect width="8.2778" height="8.2778" transform="matrix(0.710441 0.703757 -0.710441 0.703757 23.1665 17.1881)" fill="#C7E0F0"/>
+<rect width="8.2778" height="8.2778" transform="matrix(0.710441 0.703757 -0.710441 0.703757 33.332 27.7152)" fill="#C7E0F0"/>
+<rect x="17.2861" y="30.9191" width="8.31683" height="8.23859" fill="#C7E0F0"/>
+<rect x="31.1475" y="17.1881" width="8.31683" height="8.23859" fill="#C7E0F0"/>
+<ellipse cx="28.3752" cy="28.1729" rx="4.15842" ry="4.1193" fill="#142B3D"/>
+<defs>
+<linearGradient id="paint0_linear_2757_260" x1="4.48" y1="40.04" x2="51.52" y2="15.68" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1F4D6D"/>
+<stop offset="1" stop-color="#378DC0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/base/static/img/welcome/i_hex_light_analysis.svg b/base/static/img/welcome/i_hex_light_analysis.svg
new file mode 100644
index 000000000..c79487359
--- /dev/null
+++ b/base/static/img/welcome/i_hex_light_analysis.svg
@@ -0,0 +1,10 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 2.3094C26.4752 0.880338 29.5248 0.880339 32 2.3094L48.2487 11.6906C50.7239 13.1197 52.2487 15.7607 52.2487 18.6188V37.3812C52.2487 40.2393 50.7239 42.8803 48.2487 44.3094L32 53.6906C29.5248 55.1197 26.4752 55.1197 24 53.6906L7.75129 44.3094C5.27608 42.8803 3.75129 40.2393 3.75129 37.3812V18.6188C3.75129 15.7607 5.27608 13.1197 7.75129 11.6906L24 2.3094Z" fill="url(#paint0_linear_2757_294)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.2501 26.5001C33.2501 27.3865 33.0755 28.2643 32.7363 29.0832C32.3971 29.9021 31.8999 30.6463 31.2731 31.2731C30.6463 31.8999 29.9021 32.3971 29.0832 32.7363C28.2643 33.0755 27.3865 33.2501 26.5001 33.2501C25.6137 33.2501 24.7359 33.0755 23.917 32.7363C23.098 32.3971 22.3539 31.8999 21.7271 31.2731C21.1003 30.6463 20.6031 29.9021 20.2639 29.0832C19.9247 28.2643 19.7501 27.3865 19.7501 26.5001C19.7501 24.7099 20.4612 22.993 21.7271 21.7271C22.993 20.4612 24.7099 19.7501 26.5001 19.7501C28.2903 19.7501 30.0072 20.4612 31.2731 21.7271C32.5389 22.993 33.2501 24.7099 33.2501 26.5001ZM32.0201 33.6101C30.2117 35.0141 27.9361 35.676 25.6568 35.4613C23.3774 35.2466 21.2656 34.1712 19.7512 32.4542C18.2368 30.7372 17.4337 28.5075 17.5054 26.2192C17.5771 23.9309 18.5181 21.7559 20.137 20.137C21.7559 18.5181 23.9309 17.5771 26.2192 17.5054C28.5075 17.4337 30.7372 18.2368 32.4542 19.7512C34.1712 21.2656 35.2466 23.3774 35.4613 25.6568C35.676 27.9361 35.0141 30.2117 33.6101 32.0201L37.7951 36.2051C37.9056 36.3081 37.9943 36.4323 38.0558 36.5703C38.1172 36.7083 38.1503 36.8573 38.153 37.0083C38.1556 37.1594 38.1279 37.3094 38.0713 37.4495C38.0147 37.5896 37.9305 37.7168 37.8236 37.8236C37.7168 37.9305 37.5896 38.0147 37.4495 38.0713C37.3094 38.1279 37.1594 38.1556 37.0083 38.153C36.8573 38.1503 36.7083 38.1172 36.5703 38.0558C36.4323 37.9943 36.3081 37.9056 36.2051 37.7951L32.0201 33.6101Z" fill="#142B3D"/>
+<defs>
+<linearGradient id="paint0_linear_2757_294" x1="4.48" y1="40.04" x2="51.52" y2="15.68" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C7E2F8"/>
+<stop offset="1" stop-color="#F6FBFF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/base/static/img/welcome/i_hex_light_workflow.svg b/base/static/img/welcome/i_hex_light_workflow.svg
new file mode 100644
index 000000000..fca2cccd1
--- /dev/null
+++ b/base/static/img/welcome/i_hex_light_workflow.svg
@@ -0,0 +1,14 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 2.3094C26.4752 0.880338 29.5248 0.880339 32 2.3094L48.2487 11.6906C50.7239 13.1197 52.2487 15.7607 52.2487 18.6188V37.3812C52.2487 40.2393 50.7239 42.8803 48.2487 44.3094L32 53.6906C29.5248 55.1197 26.4752 55.1197 24 53.6906L7.75129 44.3094C5.27608 42.8803 3.75129 40.2393 3.75129 37.3812V18.6188C3.75129 15.7607 5.27608 13.1197 7.75129 11.6906L24 2.3094Z" fill="url(#paint0_linear_2757_298)"/>
+<rect x="22" y="15" width="12" height="6" fill="#142B3D"/>
+<rect x="22" y="25" width="12" height="6" fill="#142B3D"/>
+<rect x="22" y="35" width="12" height="6" fill="#142B3D"/>
+<path d="M41.5 23C41.5 21.6711 40.6603 20.6439 39.4775 19.875C38.2974 19.1079 36.8648 18.6623 35.9121 18.4922L36.0879 17.5078C37.1352 17.6948 38.7026 18.1782 40.0225 19.0361C41.3395 19.8922 42.5 21.1862 42.5 23C42.5 24.8138 41.3395 26.1078 40.0225 26.9639C38.7026 27.8218 37.1352 28.3052 36.0879 28.4922L35.9121 27.5078C36.8648 27.3377 38.2974 26.8921 39.4775 26.125C40.6603 25.3561 41.5 24.3289 41.5 23Z" fill="#2972A6"/>
+<path d="M14.5 33C14.5 34.3289 15.3397 35.3561 16.5225 36.125C17.7026 36.8921 19.1352 37.3377 20.0879 37.5078L19.9121 38.4922C18.8648 38.3052 17.2974 37.8218 15.9775 36.9639C14.6605 36.1078 13.5 34.8138 13.5 33C13.5 31.1862 14.6605 29.8922 15.9775 29.0361C17.2974 28.1782 18.8648 27.6948 19.9121 27.5078L20.0879 28.4922C19.1352 28.6623 17.7026 29.1079 16.5225 29.875C15.3397 30.6439 14.5 31.6711 14.5 33Z" fill="#2972A6"/>
+<defs>
+<linearGradient id="paint0_linear_2757_298" x1="4.48" y1="40.04" x2="51.52" y2="15.68" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C7E2F8"/>
+<stop offset="1" stop-color="#F6FBFF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/base/static/img/welcome/i_questions.svg b/base/static/img/welcome/i_questions.svg
new file mode 100644
index 000000000..048f7c697
--- /dev/null
+++ b/base/static/img/welcome/i_questions.svg
@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2750_84)">
+<path d="M13.2879 24.173L8.31407 20.3642L12.4762 17.9612L13.2879 24.173Z" fill="#C7E0F0"/>
+<path d="M22.3655 18.8612L16.9882 14.7435L21.488 12.1456L22.3655 18.8612Z" fill="#142B3D"/>
+<circle cx="7.5" cy="14.5" r="7.5" fill="#C7E0F0"/>
+<circle cx="16" cy="8" r="8" fill="#142B3D"/>
+</g>
+<defs>
+<clipPath id="clip0_2750_84">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/base/static/img/welcome/i_tutorials.svg b/base/static/img/welcome/i_tutorials.svg
new file mode 100644
index 000000000..788af5529
--- /dev/null
+++ b/base/static/img/welcome/i_tutorials.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="20" height="20" fill="#C7E0F0"/>
+<path d="M17 12.5L7.25 18.1292L7.25 6.87083L17 12.5Z" fill="#142B3D"/>
+</svg>
diff --git a/base/templates/base/_header.html b/base/templates/base/_header.html
index 448c4093f..ee1f7d4cf 100644
--- a/base/templates/base/_header.html
+++ b/base/templates/base/_header.html
@@ -11,7 +11,7 @@
 <a class="navbar-brand" href="{% url 'base:home' %}">
   <img width="45"
        height="45"
-       alt="logo"
+       alt="Open Energy Platform home"
        src="{% static 'OpenEnergyFamily_Logo_OpenEnergyPlatform_untitled_white.svg' %}" />
 </a>
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
@@ -135,7 +135,8 @@
          data-bs-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false">About</a>
-      <div class="dropdown-menu" aria-labelledby="navbarDropdownAbout">
+      <div class="dropdown-menu dropdown-menu-end"
+           aria-labelledby="navbarDropdownAbout">
         <a class="dropdown-item" href="{% url 'base:about' %}">Overview</a>
         <a class="dropdown-item" href="{% url 'base:oefamily-sc' %}">Open Energy Family Steering Committee</a>
         <a class="dropdown-item"
diff --git a/base/templates/base/base.html b/base/templates/base/base.html
index 6a6015306..16f15e82f 100644
--- a/base/templates/base/base.html
+++ b/base/templates/base/base.html
@@ -34,13 +34,14 @@
     {% endblock after-head %}
   </head>
   <body class="d-flex flex-column h-100">
+    <a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>
     {% block header %}
       <nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
         <div class="container-fluid">{% include 'base/_header.html' %}</div>
       </nav>
     {% endblock header %}
     {% block main %}
-      <main class="main">
+      <main class="main" id="main-content">
         {% block site-header %}
         {% endblock site-header %}
         <div class="content">
diff --git a/base/templates/base/index-arrow.html b/base/templates/base/index-arrow.html
new file mode 100644
index 000000000..66d781344
--- /dev/null
+++ b/base/templates/base/index-arrow.html
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="16"
+     height="16"
+     fill="currentColor"
+     class="bi bi-arrow-right index-feature-link-arrow"
+     viewBox="0 0 16 16"
+     aria-hidden="true"
+     focusable="false">
+  <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" />
+</svg>
diff --git a/base/templates/base/index-checkmark.html b/base/templates/base/index-checkmark.html
new file mode 100644
index 000000000..31ad162e9
--- /dev/null
+++ b/base/templates/base/index-checkmark.html
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="24"
+     height="24"
+     viewBox="0 0 24 24"
+     fill="none"
+     class="index-capability-check"
+     aria-hidden="true"
+     focusable="false">
+  <path d="M12 2L20.39 7V17L12 22L3.61 17V7L12 2Z" fill="#e3eef7" />
+  <path d="M8.5 12.4L10.8 14.7L15.7 9.5" stroke="#2972a6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/base/templates/base/index.html b/base/templates/base/index.html
index 2bb7a6f3b..bd65737b7 100644
--- a/base/templates/base/index.html
+++ b/base/templates/base/index.html
@@ -2,6 +2,7 @@
 {% load django_bootstrap5 %}
 {% load static %}
 {% load compress %}
+{% block title %}&ndash; Open and FAIR Energy Data Platform{% endblock %}
 {% block after-head %}
   {% compress css %}
     <link rel="stylesheet"
@@ -9,141 +10,102 @@
           href="{% static 'css/index-style.css' %}" />
   {% endcompress %}
 {% endblock %}
-{% block main %}
-  <div class="index-home">
-    <div class="index-group">
-      <div class="index-padding">
-        {% include 'base/messages.html' %}
-        <h3>Open Energy Platform</h3>
-        <span class="subheader">Make your energy system modelling process transparent!</span>
-        <div class="index-tile-container">
-          <div class="index-tile index-tile-colored index-tile-color-1">
-            <img src="{% static 'img/welcome/OpenEnergyFamily_Logo_OpenEnergyDatabase_icon.svg' %}"
-                 alt="OEDB" />
-            {% comment %}
-              <a role="button" class="btn btn-primary" href="{% url 'dataedit:topic-list' %}">Database</a>
-            {% endcomment %}
-            <div class="inner-index-tile">
-              <div class="panel-description">
-                <h2>Database</h2>
-                <p class="alternative">
-                  Are you interested in data? Visualize the database to explore
-                  it. All contributors publish datasets under an open license,
-                  so you can securely download and work with it. Are you
-                  interested in sharing your own data? This is the place to
-                  upload it.
-                </p>
-              </div>
-            </div>
-            <a role="button"
-               class="btn btn-primary pull-right"
-               style="font-size: 16px"
-               href="{% url 'dataedit:topic-list' %}">Database</a>
+{% block header %}
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary index-navbar">
+    <div class="container-fluid">{% include 'base/_header.html' %}</div>
+  </nav>
+{% endblock header %}
+{% block footer %}
+  <footer class="index-footer">
+    <div class="index-footer-inner">
+      <div class="index-footer-top">
+        <div class="index-footer-brand">
+          <div class="index-footer-logo">
+            <img src="{% static 'OpenEnergyFamily_Logo_OpenEnergyPlatform_untitled_white.svg' %}"
+                 width="32"
+                 height="32"
+                 alt="" />
+            <p class="index-footer-brand-name">Open Energy Platform</p>
           </div>
-          <div class="index-tile index-tile-colored index-tile-color-2">
-            <!-- <img src="{% static 'img/welcome/OpenEnergyFamily_Logo_Factsheets_icon.svg' %}"
-      alt="Factsheets"> -->
-            <img src="{% static 'img/welcome/bundles.png' %}" alt="Scenario Bundle" />
-            <div class="inner-index-tile">
-              <div class="panel-description">
-                <h2>Scenario Bundles</h2>
-                <p class="alternative">
-                  Do you want to learn more about scenarios, the models used to
-                  project them and the actual data? Then, this is the right
-                  place for you. If you contributed data to the OEP this is the
-                  place where you can provide more context by creating your own
-                  scenario bundle.
-                </p>
-              </div>
-            </div>
-            <a role="button"
-               class="btn btn-primary"
-               style="font-size: 16px"
-               href="{% url 'factsheet:factsheets_index' %}">Scenario Bundles</a>
+          <p class="index-footer-tagline">
+            Collaborative platform for open energy data, scenarios, and
+            research tools.
+          </p>
+        </div>
+        <div class="index-footer-columns">
+          <div class="index-footer-column">
+            <h3 class="index-footer-column-title">Features</h3>
+            <ul class="index-footer-link-list">
+              <li><a href="{% url 'dataedit:topic-list' %}">Database</a></li>
+              <li><a href="{% url 'modelview:modellist' 'model' %}">Factsheets</a></li>
+              <li><a href="{% url 'factsheet:factsheets_index' %}">Scenarios</a></li>
+              <li><a href="{% url 'ontology:index' %}">Ontology</a></li>
+            </ul>
           </div>
-          {#    <div class="index-tile index-tile-colored index-tile-color-3">#}
-          {#    <img src="{% static 'img/welcome/bundles.png' %}" alt="">#}
-          {#    <a role="button" class="btn btn-primary" href="{{ EXTERNAL_URLS.github_openenergyplatform_oeplatform_issues_568 }}">Bundles</a>#}
-          {#    </div>#}
-          <div class="index-tile index-tile-colored index-tile-color-3">
-            <img src="{% static 'img/welcome/OpenEnergyFamily_Logo_OpenEnergyOntology_icon.svg' %}"
-                 alt="OEO" />
-            {% comment %}
-              <a role="button" class="btn btn-primary" href="{% url 'ontology:index' %}">Ontology</a>
-            {% endcomment %}
-            <div class="inner-index-tile">
-              <div class="panel-description">
-                <h2>Ontology</h2>
-                <p class="alternative">
-                  Ontology referes to a collection of domain specific
-                  terminology and their relationships. Come here to learn more
-                  about the Open Energy Ontology (OEO), which helps with data
-                  annotation and management.
-                </p>
-              </div>
-            </div>
-            <a role="button"
-               class="btn btn-primary"
-               style="font-size: 16px"
-               href="{% url 'ontology:index' %}">Ontology</a>
+          <div class="index-footer-column">
+            <h3 class="index-footer-column-title">Resources</h3>
+            <ul class="index-footer-link-list">
+              <li><a href="{{ EXTERNAL_URLS.tutorials_index }}">Academy</a></li>
+              <li><a href="{{ EXTERNAL_URLS.readthedocs }}">API Docs</a></li>
+              <li><a href="{{ EXTERNAL_URLS.github_openenergyplatform_oeplatform }}">GitHub</a></li>
+              <li><a href="{{ EXTERNAL_URLS.tutorials_wizard }}">Tutorial</a></li>
+            </ul>
           </div>
-          <div class="index-tile index-tile-colored index-tile-color-4">
-            <img src="{% static 'img/welcome/OpenEnergyFamily_Logo_Tutorials_icon.svg' %}"
-                 alt="Academy" />
-            <div class="inner-index-tile">
-              <div class="panel-description">
-                <h2>Academy</h2>
-                <p class="alternative">
-                  The Open Energy Academy (OEA) provides courses as well as
-                  dedicated tutorials covering important topics around the Open
-                  Energy Family (OEF) tools and the Open Energy Platform (OEP).
-                  You will also find short answers to urgent questions.
-                </p>
-              </div>
-            </div>
-            <a role="button"
-               class="btn btn-primary"
-               style="font-size: 16px"
-               href="{{ EXTERNAL_URLS.tutorials_index }}">Academy</a>
+          <div class="index-footer-column">
+            <h3 class="index-footer-column-title">Platform</h3>
+            <ul class="index-footer-link-list">
+              <li><a href="{% url 'base:about' %}">About OEP</a></li>
+              <li><a href="{% url 'base:contact' %}">Contact</a></li>
+              <li><a href="{% url 'base:legal-privacy-policy' %}">Privacy</a></li>
+              <li><a href="{% url 'base:legal-tou' %}">Terms</a></li>
+            </ul>
           </div>
         </div>
       </div>
+      <p class="index-footer-copyright">© {% now "Y" %} Open Energy Platform. All rights reserved.</p>
     </div>
-    <div class="index-about-container-background">
-      <div class="index-about-container">
-        <div class="index-about-column">
-          <img src="{% static 'img/welcome/about-process-modelling.svg' %}" alt="" />
-          <b>API</b>
-          <span class="alternative">
-            Learn how to download and publish open data on the OEP using the
-            API.
-          </span>
-          <a role="button"
-             class="btn btn-primary btn-sm"
-             href="{{ EXTERNAL_URLS.tutorials_api1 }}">Learn more</a>
-        </div>
-        <div class="index-about-column">
-          <img src="{% static 'img/welcome/about-openscience.svg' %}" alt="" />
-          <b>Open Science</b>
-          <span class="alternative">
-            Good scientific practice needs open licenses for software, data and
-            content.
-          </span>
-          <a role="button"
-             class="btn btn-primary btn-sm"
-             href="{{ EXTERNAL_URLS.tutorials_licenses }}">Learn more</a>
-        </div>
-        <div class="index-about-column">
-          <img src="{% static 'img/welcome/about-community.svg' %}" alt="" />
-          <b>Open Energy Community</b>
-          <span class="alternative">
-            Collaborate and contribute to the development on GitHub.
-          </span>
-          <a role="button"
-             class="btn btn-primary btn-sm"
-             href="{{ EXTERNAL_URLSgithub_openenergyplatform }}">Learn more</a>
-        </div>
-      </div>
-    </div>
-  </div>
+  </footer>
+{% endblock footer %}
+{% block main %}
+  <main id="main-content" class="index-home">
+    {% include 'base/messages.html' %}
+    {% include 'homepage/hero.html' %}
+    {% include 'homepage/features.html' %}
+    {% include 'homepage/capabilities.html' %}
+    {% include 'homepage/academy.html' %}
+    {% include 'homepage/resources.html' %}
+  </main>
+{% endblock %}
+{% block after-body-bottom-js %}
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      var targets = document.querySelectorAll('.index-animate-in');
+      var prefersReducedMotion = window.matchMedia(
+        '(prefers-reduced-motion: reduce)'
+      ).matches;
+
+      if (prefersReducedMotion || !('IntersectionObserver' in window)) {
+        targets.forEach(function (el) {
+          el.classList.add('is-visible');
+        });
+        return;
+      }
+
+      var observer = new IntersectionObserver(
+        function (entries) {
+          entries.forEach(function (entry) {
+            if (entry.isIntersecting) {
+              entry.target.classList.add('is-visible');
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.1 }
+      );
+
+      targets.forEach(function (el) {
+        observer.observe(el);
+      });
+    });
+  </script>
 {% endblock %}
diff --git a/base/templates/base/messages.html b/base/templates/base/messages.html
index c98220c1b..3c49f3a54 100644
--- a/base/templates/base/messages.html
+++ b/base/templates/base/messages.html
@@ -9,7 +9,10 @@
       <div class="alert alert-{{ message.tags }} alert-dismissible fade show"
            role="alert">
         {{ message }}
-        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+        <button type="button"
+                class="btn-close"
+                data-bs-dismiss="alert"
+                aria-label="Close"></button>
       </div>
     {% endfor %}
   {% endif %}
diff --git a/base/templates/homepage/academy.html b/base/templates/homepage/academy.html
new file mode 100644
index 000000000..941dbd151
--- /dev/null
+++ b/base/templates/homepage/academy.html
@@ -0,0 +1,80 @@
+{% load static %}
+<div class="index-academy">
+  <div class="index-academy-inner">
+    <div class="index-academy-intro index-animate-in">
+      <img class="index-academy-icon"
+           src="{% static 'img/welcome/i_hex_blue_academy.svg' %}"
+           alt="" />
+      <div class="index-academy-content">
+        <div class="index-academy-heading">
+          <h2 class="index-academy-title">Academy &amp; Learning Resources</h2>
+          <p class="index-academy-subtitle">
+            Master the platform with comprehensive tutorials, workshops,
+            and educational materials designed for all skill levels.
+          </p>
+        </div>
+        <ul class="index-feature-list index-academy-feature-list">
+          <li>
+            {% include 'base/index-checkmark.html' %}
+            <span>Hands-on tutorials and guided learning</span>
+          </li>
+          <li>
+            {% include 'base/index-checkmark.html' %}
+            <span>Research data management concepts</span>
+          </li>
+          <li>
+            {% include 'base/index-checkmark.html' %}
+            <span>Best practices for FAIR research data</span>
+          </li>
+          <li>
+            {% include 'base/index-checkmark.html' %}
+            <span>Quick guidance for common questions</span>
+          </li>
+        </ul>
+        <a class="index-hero-btn index-hero-btn-light"
+           href="{{ EXTERNAL_URLS.tutorials_index }}">
+          Visit Academy
+          {% include 'base/index-arrow.html' %}
+        </a>
+      </div>
+    </div>
+    <div class="index-academy-quickstart index-animate-in">
+      <h3 class="index-academy-quickstart-title">Quick Start Options</h3>
+      <div class="index-academy-quickstart-list">
+        <div class="index-academy-quickstart-item">
+          <img class="index-academy-quickstart-icon"
+               src="{% static 'img/welcome/i_courses.svg' %}"
+               alt="" />
+          <div>
+            <p class="index-academy-quickstart-item-title">Courses</p>
+            <p class="index-academy-quickstart-item-description">
+              Structured learning paths and guided introductions
+            </p>
+          </div>
+        </div>
+        <div class="index-academy-quickstart-item">
+          <img class="index-academy-quickstart-icon"
+               src="{% static 'img/welcome/i_tutorials.svg' %}"
+               alt="" />
+          <div>
+            <p class="index-academy-quickstart-item-title">Tutorials</p>
+            <p class="index-academy-quickstart-item-description">
+              Step-by-step guides for specific tasks
+            </p>
+          </div>
+        </div>
+        <div class="index-academy-quickstart-item">
+          <img class="index-academy-quickstart-icon"
+               src="{% static 'img/welcome/i_questions.svg' %}"
+               alt="" />
+          <div>
+            <p class="index-academy-quickstart-item-title">Questions &amp; Guidance</p>
+            <p class="index-academy-quickstart-item-description">
+              Quick answers to common questions
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/base/templates/homepage/capabilities.html b/base/templates/homepage/capabilities.html
new file mode 100644
index 000000000..ddd276c5c
--- /dev/null
+++ b/base/templates/homepage/capabilities.html
@@ -0,0 +1,230 @@
+{% load static %}
+<div class="index-capabilities">
+  <div class="index-capabilities-header index-animate-in">
+    <h2 class="index-capabilities-title">Platform Capabilities</h2>
+    <p class="index-capabilities-subtitle">
+      Dive deeper into each section to discover the full range of tools
+      and resources available
+    </p>
+  </div>
+  <div class="index-capabilities-list">
+    <div class="index-capability-card index-animate-in">
+      <div class="index-capability-card-header">
+        <img class="index-feature-icon"
+             src="{% static 'img/welcome/i_hex_blue_database.svg' %}"
+             alt="" />
+        <div class="index-capability-card-heading">
+          <h3 class="index-capability-card-title">Database &amp; Metadata</h3>
+          <p class="index-capability-card-description">
+            Comprehensive energy data repository with advanced search and
+            metadata management
+          </p>
+        </div>
+      </div>
+      <hr class="index-capability-divider" />
+      <div class="index-capability-columns">
+        <div class="index-capability-column">
+          <h4 class="index-capability-column-title">Core Features:</h4>
+          <ul class="index-feature-list index-capability-feature-list">
+            <li>
+              {% include 'base/index-checkmark.html' %}
+              <span>Upload and publish datasets via the OEP interface or API</span>
+            </li>
+            <li>
+              {% include 'base/index-checkmark.html' %}
+              <span>Comprehensive and standardized metadata management</span>
+            </li>
+            <li>
+              {% include 'base/index-checkmark.html' %}
+              <span>Data quality assessment and validation tools</span>
+            </li>
+            <li>
+              {% include 'base/index-checkmark.html' %}
+              <span>Collaborative data contribution workflows</span>
+            </li>
+          </ul>
+        </div>
+        <div class="index-capability-column">
+          <h4 class="index-capability-column-title">Additional Resources:</h4>
+          <div class="index-capability-resource-list">
+            <a class="index-resource-link"
+               href="{{ EXTERNAL_URLS.tutorials_api_upload }}">
+              {% include 'base/index-arrow.html' %}
+              <span>Data Upload Guidelines</span>
+            </a>
+            <a class="index-resource-link"
+               href="{{ EXTERNAL_URLS.tutorials_oemetadata }}">
+              {% include 'base/index-arrow.html' %}
+              <span>Metadata Schema Documentation</span>
+            </a>
+            <a class="index-resource-link" href="{{ EXTERNAL_URLS.readthedocs }}">
+              {% include 'base/index-arrow.html' %}
+              <span>API Reference</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="index-capability-card index-animate-in">
+      <div class="index-capability-card-header">
+        <img class="index-feature-icon"
+             src="{% static 'img/welcome/i_hex_blue_scenario_bundles.svg' %}"
+             alt="" />
+        <div class="index-capability-card-heading">
+          <h3 class="index-capability-card-title">Scenario Bundles</h3>
+          <p class="index-capability-card-description">
+            Comprehensive scenario packages for energy system modeling and
+            analysis
+          </p>
+        </div>
+      </div>
+      <hr class="index-capability-divider" />
+      <div class="index-capability-columns">
+        <div class="index-capability-column">
+          <h4 class="index-capability-column-title">Core Features:</h4>
+          <ul class="index-feature-list index-capability-feature-list">
+            <li>
+              {% include 'base/index-checkmark.html' %}
+              <span>Transparent, linked scenario bundles across data, models, and tools</span>
+            </li>
+            <li>
+              {% include 'base/index-checkmark.html' %}
+              <span>Scenario comparison and analysis tools</span>
+            </li>
+            <li>
+              {% include 'base/index-checkmark.html' %}
+              <span>Customizable parameter sets and assumptions</span>
+            </li>
+            <li>
+              {% include 'base/index-checkmark.html' %}
+              <span>Integration with modeling frameworks</span>
+            </li>
+          </ul>
+        </div>
+        <div class="index-capability-column">
+          <h4 class="index-capability-column-title">Additional Resources:</h4>
+          <div class="index-capability-resource-list">
+            <a class="index-resource-link"
+               href="{{ EXTERNAL_URLS.tutorials_wizard }}">
+              {% include 'base/index-arrow.html' %}
+              <span>Scenario Creation Guide</span>
+            </a>
+            <a class="index-resource-link"
+               href="{{ EXTERNAL_URLS.tutorials_index }}">
+              {% include 'base/index-arrow.html' %}
+              <span>Comparison Tool Tutorial</span>
+            </a>
+            <a class="index-resource-link"
+               href="{{ EXTERNAL_URLS.tutorials_index }}">
+              {% include 'base/index-arrow.html' %}
+              <span>Model Integration Examples</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="index-capability-card index-animate-in">
+      <div class="index-capability-card-header">
+        <img class="index-feature-icon"
+             src="{% static 'img/welcome/i_hex_blue_factsheets.svg' %}"
+             alt="" />
+        <div class="index-capability-card-heading">
+          <h3 class="index-capability-card-title">Factsheets</h3>
+          <p class="index-capability-card-description">
+            Comprehensive documentation and analysis of energy
+            technologies and topics
+          </p>
+        </div>
+      </div>
+      <hr class="index-capability-divider" />
+      <div class="index-capability-columns">
+        <div class="index-capability-column">
+          <h4 class="index-capability-column-title">Core Features:</h4>
+          <ul class="index-feature-list index-capability-feature-list">
+            <li>
+              {% include 'base/index-checkmark.html' %}
+              <span>Structured documentation for energy system models and frameworks</span>
+            </li>
+            <li>
+              {% include 'base/index-checkmark.html' %}
+              <span>Collaborative editing</span>
+            </li>
+          </ul>
+        </div>
+        <div class="index-capability-column">
+          <h4 class="index-capability-column-title">Additional Resources:</h4>
+          <div class="index-capability-resource-list">
+            <a class="index-resource-link"
+               href="{{ EXTERNAL_URLS.tutorials_index }}">
+              {% include 'base/index-arrow.html' %}
+              <span>Factsheet Templates</span>
+            </a>
+            <a class="index-resource-link"
+               href="{{ EXTERNAL_URLS.github_openenergyplatform_oeplatform_develop_contributing }}">
+              {% include 'base/index-arrow.html' %}
+              <span>Contribution Guidelines</span>
+            </a>
+            <a class="index-resource-link" href="{{ EXTERNAL_URLS.tutorials_faq }}">
+              {% include 'base/index-arrow.html' %}
+              <span>Review Process Documentation</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="index-capability-card index-animate-in">
+      <div class="index-capability-card-header">
+        <img class="index-feature-icon"
+             src="{% static 'img/welcome/i_hex_blue_ontology.svg' %}"
+             alt="" />
+        <div class="index-capability-card-heading">
+          <h3 class="index-capability-card-title">Ontology</h3>
+          <p class="index-capability-card-description">
+            Advanced analytical tools and specialized platform
+            capabilities
+          </p>
+        </div>
+      </div>
+      <hr class="index-capability-divider" />
+      <div class="index-capability-columns">
+        <div class="index-capability-column">
+          <h4 class="index-capability-column-title">Core Features:</h4>
+          <ul class="index-feature-list index-capability-feature-list">
+            <li>
+              {% include 'base/index-checkmark.html' %}
+              <span>Community-developed domain ontology for energy system analysis</span>
+            </li>
+            <li>
+              {% include 'base/index-checkmark.html' %}
+              <span>Interactive exploration of ontology classes and relationships</span>
+            </li>
+            <li>
+              {% include 'base/index-checkmark.html' %}
+              <span>Linked data access and semantic querying via SPARQL</span>
+            </li>
+          </ul>
+        </div>
+        <div class="index-capability-column">
+          <h4 class="index-capability-column-title">Additional Resources:</h4>
+          <div class="index-capability-resource-list">
+            <a class="index-resource-link"
+               href="{{ EXTERNAL_URLS.github_openenergyplatform_ontology }}">
+              {% include 'base/index-arrow.html' %}
+              <span>Tool Documentation</span>
+            </a>
+            <a class="index-resource-link"
+               href="{{ EXTERNAL_URLS.openenergyplatform_github_academy_courses_05_ontology }}">
+              {% include 'base/index-arrow.html' %}
+              <span>Video Tutorials</span>
+            </a>
+            <a class="index-resource-link"
+               href="{{ EXTERNAL_URLS.github_openenergyplatform_ontology_wiki_welcome__how_to_participate }}">
+              {% include 'base/index-arrow.html' %}
+              <span>Best Practice Guide</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/base/templates/homepage/features.html b/base/templates/homepage/features.html
new file mode 100644
index 000000000..c90bc9f21
--- /dev/null
+++ b/base/templates/homepage/features.html
@@ -0,0 +1,78 @@
+{% load static %}
+<div class="index-features">
+  <div class="index-features-header index-animate-in">
+    <h2 class="index-features-title">Core Platform Features</h2>
+    <p class="index-features-subtitle">
+      Access energy system datasets, scenario descriptions &amp; context,
+      and shared standards for annotating transparent and reusable
+      research data
+    </p>
+  </div>
+  <div class="index-features-grid index-features-grid-quad">
+    <div class="index-feature-card index-animate-in">
+      <div class="index-feature-card-body">
+        <img class="index-feature-icon"
+             src="{% static 'img/welcome/i_hex_blue_database.svg' %}"
+             alt="" />
+        <h3 class="index-feature-card-title">Database &amp; Metadata</h3>
+        <p class="index-feature-card-description">
+          Comprehensive energy datasets with rich metadata and advanced
+          search capabilities.
+        </p>
+      </div>
+      <a class="index-feature-link" href="{% url 'dataedit:topic-list' %}">
+        <span>Explore Database</span>
+        {% include 'base/index-arrow.html' %}
+      </a>
+    </div>
+    <div class="index-feature-card index-animate-in">
+      <div class="index-feature-card-body">
+        <img class="index-feature-icon"
+             src="{% static 'img/welcome/i_hex_blue_scenario_bundles.svg' %}"
+             alt="" />
+        <h3 class="index-feature-card-title">Scenario Bundles</h3>
+        <p class="index-feature-card-description">
+          Combining datasets, scenario context, and studies for
+          transparent energy modelling
+        </p>
+      </div>
+      <a class="index-feature-link"
+         href="{% url 'factsheet:factsheets_index' %}">
+        <span>View Scenarios</span>
+        {% include 'base/index-arrow.html' %}
+      </a>
+    </div>
+    <div class="index-feature-card index-animate-in">
+      <div class="index-feature-card-body">
+        <img class="index-feature-icon"
+             src="{% static 'img/welcome/i_hex_blue_factsheets.svg' %}"
+             alt="" />
+        <h3 class="index-feature-card-title">Factsheets</h3>
+        <p class="index-feature-card-description">
+          Insights into model and framework characteristics
+        </p>
+      </div>
+      <a class="index-feature-link"
+         href="{% url 'modelview:modellist' 'model' %}">
+        <span>Browse Factsheets</span>
+        {% include 'base/index-arrow.html' %}
+      </a>
+    </div>
+    <div class="index-feature-card index-animate-in">
+      <div class="index-feature-card-body">
+        <img class="index-feature-icon"
+             src="{% static 'img/welcome/i_hex_blue_ontology.svg' %}"
+             alt="" />
+        <h3 class="index-feature-card-title">Ontology</h3>
+        <p class="index-feature-card-description">
+          Relevant terms and their relationships for annotating energy
+          systems modelling
+        </p>
+      </div>
+      <a class="index-feature-link" href="{% url 'ontology:index' %}">
+        <span>Explore Ontology</span>
+        {% include 'base/index-arrow.html' %}
+      </a>
+    </div>
+  </div>
+</div>
diff --git a/base/templates/homepage/hero.html b/base/templates/homepage/hero.html
new file mode 100644
index 000000000..42b9ae15a
--- /dev/null
+++ b/base/templates/homepage/hero.html
@@ -0,0 +1,32 @@
+<div class="index-hero">
+  <div class="index-hero-inner">
+    <div class="index-hero-badge">Open Energy Platform</div>
+    <h1 class="index-hero-title">
+      Open and FAIR Data
+      <br />
+      for the Energy Systems Community
+    </h1>
+    <p class="index-hero-subtitle">
+      Discover, analyze and participate - with our integrated suite of
+      tools targeted at an open research data life cycle
+    </p>
+    <div class="index-hero-actions">
+      <a class="index-hero-btn index-hero-btn-light"
+         href="{% url 'dataedit:topic-list' %}">
+        Explore Platform
+        <svg xmlns="http://www.w3.org/2000/svg"
+             width="16"
+             height="16"
+             fill="currentColor"
+             class="bi bi-arrow-right"
+             viewBox="0 0 16 16"
+             aria-hidden="true"
+             focusable="false">
+          <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" />
+        </svg>
+      </a>
+      <a class="index-hero-btn index-hero-btn-outline"
+         href="{{ EXTERNAL_URLS.mkdocs }}">View Documentation</a>
+    </div>
+  </div>
+</div>
diff --git a/base/templates/homepage/resources.html b/base/templates/homepage/resources.html
new file mode 100644
index 000000000..fc49e965c
--- /dev/null
+++ b/base/templates/homepage/resources.html
@@ -0,0 +1,61 @@
+{% load static %}
+<div class="index-features">
+  <div class="index-features-header index-animate-in">
+    <h2 class="index-features-title">Developer Resources</h2>
+    <p class="index-features-subtitle">
+      Access our comprehensive API, contribute to open source
+      development, and integrate OEP into your workflows
+    </p>
+  </div>
+  <div class="index-features-grid">
+    <div class="index-feature-card index-animate-in">
+      <div class="index-feature-card-body">
+        <img class="index-feature-icon"
+             src="{% static 'img/welcome/i_hex_blue_api.svg' %}"
+             alt="" />
+        <h3 class="index-feature-card-title">API Access</h3>
+        <p class="index-feature-card-description">
+          Programmatic access to all platform data and functionality
+          with comprehensive documentation
+        </p>
+      </div>
+      <a class="index-feature-link" href="{{ EXTERNAL_URLS.readthedocs }}">
+        <span>API Documentation</span>
+        {% include 'base/index-arrow.html' %}
+      </a>
+    </div>
+    <div class="index-feature-card index-animate-in">
+      <div class="index-feature-card-body">
+        <img class="index-feature-icon"
+             src="{% static 'img/welcome/i_hex_blue_repo.svg' %}"
+             alt="" />
+        <h3 class="index-feature-card-title">Code Repository</h3>
+        <p class="index-feature-card-description">
+          Open source platform code, contribute to development and
+          access implementation examples
+        </p>
+      </div>
+      <a class="index-feature-link"
+         href="{{ EXTERNAL_URLS.github_openenergyplatform_oeplatform }}">
+        <span>View on GitHub</span>
+        {% include 'base/index-arrow.html' %}
+      </a>
+    </div>
+    <div class="index-feature-card index-animate-in">
+      <div class="index-feature-card-body">
+        <img class="index-feature-icon"
+             src="{% static 'img/welcome/i_hex_blue_docs.svg' %}"
+             alt="" />
+        <h3 class="index-feature-card-title">Documentation</h3>
+        <p class="index-feature-card-description">
+          Comprehensive technical documentation, guides, and best
+          practices for all platform features
+        </p>
+      </div>
+      <a class="index-feature-link" href="{{ EXTERNAL_URLS.mkdocs }}">
+        <span>Read Documentation</span>
+        {% include 'base/index-arrow.html' %}
+      </a>
+    </div>
+  </div>
+</div>
diff --git a/docker/docker-entrypoint.dev.sh b/docker/docker-entrypoint.dev.sh
index 87c1e9d18..9020b8ddd 100755
--- a/docker/docker-entrypoint.dev.sh
+++ b/docker/docker-entrypoint.dev.sh
@@ -4,6 +4,16 @@ set -euo pipefail
 # give Postgres a moment
 sleep 5
 
+# ----------------------------------------------------------------
+# Ownership target for bind-mounted dirs.
+# We reference the *numeric* uid:gid of the current process rather than
+# the `appuser:appgroup` names: on macOS the host GID (e.g. 20) already
+# exists in the base image, so no group literally named `appgroup` is
+# created and `chown appuser:appgroup` fails with "invalid group".
+# The container also runs as this (non-root) user via compose's `user:`,
+# so any chown is at most a no-op — guard each call with `|| true`.
+OWNER="$(id -u):$(id -g)"
+
 # ----------------------------------------------------------------
 # Bootstrap permissions on bind-mounted dirs so appuser can write
 # ----------------------------------------------------------------
@@ -13,8 +23,8 @@ for d in ontologies media/oeo_ext static; do
   # ensure the directory exists
   mkdir -p "$TARGET"
 
-  # make appuser own it
-  chown -R appuser:appgroup "$TARGET"
+  # make appuser own it (no-op when already owned; non-root can't chown)
+  chown -R "$OWNER" "$TARGET" || true
 
   # owner & group: read/write + conditional-exec (dirs executable,
   # files only if already marked) ; others: read + conditional-exec
@@ -35,7 +45,7 @@ if [ ! -d "$ONT_DIR/oeo" ]; then
   unzip -q /tmp/ont.zip -d "$ONT_DIR"
   rm /tmp/ont.zip
 
-  chown -R appuser:appgroup "$ONT_DIR"
+  chown -R "$OWNER" "$ONT_DIR" || true
   chmod -R u+rwX,g+rwX,o+rX "$ONT_DIR"
 fi
 
@@ -47,7 +57,7 @@ if [ ! -f "${MEDIA_DIR}/oeo_ext.owl" ]; then
      "$MEDIA_DIR/oeo_ext.owl"
 
   # fix perms on the new file
-  chown appuser:appgroup "$MEDIA_DIR/oeo_ext.owl"
+  chown "$OWNER" "$MEDIA_DIR/oeo_ext.owl" || true
   chmod u+rw,g+rw,o+rX "$MEDIA_DIR"
 fi
 
@@ -59,7 +69,7 @@ SEC_DEF=/home/appuser/app/oeplatform/securitysettings.py.default
 if [ ! -f "$SEC" ]; then
   echo "Copying default securitysettings…"
   cp "$SEC_DEF" "$SEC"
-  chown appuser:appgroup "$SEC"
+  chown "$OWNER" "$SEC" || true
   chmod u+rw,g+rw,o+rX "$SEC"
 fi
 
diff --git a/factsheet/oekg/connection.py b/factsheet/oekg/connection.py
index 2f2d42dfa..bd28ee269 100644
--- a/factsheet/oekg/connection.py
+++ b/factsheet/oekg/connection.py
@@ -7,7 +7,6 @@
 SPDX-License-Identifier: AGPL-3.0-or-later
 """  # noqa: 501
 
-import os
 from pathlib import Path
 
 from owlready2 import get_ontology
@@ -23,13 +22,10 @@
     RDF_DATABASES,
     USE_DOCKER,
 )
+from ontology.utils import get_ontology_version
 
-versions = os.listdir(
-    Path(ONTOLOGY_ROOT, OPEN_ENERGY_ONTOLOGY_NAME)
-)  # TODO bad - windows dev will get path error
-
-version = max((d for d in versions), key=lambda d: [int(x) for x in d.split(".")])
 onto_base_path = Path(ONTOLOGY_ROOT, OPEN_ENERGY_ONTOLOGY_NAME)
+version = get_ontology_version(onto_base_path)
 path = onto_base_path / version  # TODO bad - windows dev will get path error
 file = "oeo-full.owl"  # TODO- set in settings
 
diff --git a/ontology/utils.py b/ontology/utils.py
index 0589ffe18..9a599fd77 100644
--- a/ontology/utils.py
+++ b/ontology/utils.py
@@ -24,11 +24,16 @@ def get_ontology_version(path, version=None):
     if not path.exists():
         raise Http404
 
-    versions = os.listdir(path)
+    # Only consider real version directories (e.g. "2.0.0"). This filters out
+    # entries like macOS' ".DS_Store" that would otherwise break the int()
+    # parse below (".DS_Store".split(".") -> ['', 'DS_Store'] -> int('')).
+    versions = [
+        d
+        for d in os.listdir(path)
+        if (Path(path) / d).is_dir() and all(part.isdigit() for part in d.split("."))
+    ]
     if not version:
-        version = max(
-            (d for d in versions), key=lambda d: [int(x) for x in d.split(".")]
-        )
+        version = max(versions, key=lambda d: [int(x) for x in d.split(".")])
 
     return version
 
diff --git a/ontology/views.py b/ontology/views.py
index c61c3440c..68cb41b60 100644
--- a/ontology/views.py
+++ b/ontology/views.py
@@ -60,15 +60,8 @@ def get_OEO_COMMON_DATA() -> dict:
 class OntologyAboutView(View):
     def get(self, request, ontology="oeo", version=None):
         onto_base_path = Path(ONTOLOGY_ROOT, ontology)
-
-        if not onto_base_path.exists():
-            raise Http404
-        versions = os.listdir(onto_base_path)
+        version = get_ontology_version(onto_base_path, version)
         logger.info(f"Loaded oeo version {version}")
-        if not version:
-            version = max(
-                (d for d in versions), key=lambda d: [int(x) for x in d.split(".")]
-            )
         return render(
             request,
             "ontology/about.html",
@@ -185,10 +178,7 @@ def get(
         if not extension:
             extension = "owl"
         if not version:
-            version = max(
-                (d for d in os.listdir(onto_base_path)),
-                key=lambda d: [int(x) for x in d.split(".")],
-            )
+            version = get_ontology_version(onto_base_path, version)
         if imports:
             file_path = onto_base_path / version / "imports" / f"{file}.{extension}"
         elif glossary:
diff --git a/versions/changelogs/current.md b/versions/changelogs/current.md
index 9f9f27062..29b23d08d 100644
--- a/versions/changelogs/current.md
+++ b/versions/changelogs/current.md
@@ -11,6 +11,9 @@ SPDX-License-Identifier: CC0-1.0
 
 ## Changes
 
+- Updated the homepage with new content and styling
+  [(#2352)](https://github.com/OpenEnergyPlatform/oeplatform/pull/2352)
+
 ## Features
 
 ## Bugs