diff --git a/docs/.vitepress/theme/components/legacy/NavigationCards.vue b/docs/.vitepress/theme/components/legacy/NavigationCards.vue
index 3f77037fb01..2086a5a5e51 100644
--- a/docs/.vitepress/theme/components/legacy/NavigationCards.vue
+++ b/docs/.vitepress/theme/components/legacy/NavigationCards.vue
@@ -12,9 +12,9 @@ const props = defineProps({
 })
 
 // Reactive data
-const cardcolor = ref("#cfdaf1")
-const avatarcolor = ref("#9db7e1")
-const iconcolor = ref("rgb(72 84 104)")
+const cardcolor = ref("#f1eef0ff")
+const avatarcolor = ref("#e0dce0")
+const iconcolor = ref("#004c7b")
 </script>
 
 <template>
@@ -94,16 +94,13 @@ a.v-card {
 }
 
 .navigation-card {
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s;
+  border-radius: 20px !important;
+  transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .navigation-card:hover {
-  transform: translateY(-2px);
-  box-shadow:
-    0 4px 8px rgba(0, 0, 0, 0.12),
-    0 2px 4px rgba(0, 0, 0, 0.08) !important;
+  transform: translateY(-5px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
 }
 
 .icon-avatar {
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 1e3f6b8e378..4855b4eb0ca 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -510,3 +510,57 @@ h3 {
 a {
   text-decoration: none !important;
 }
+
+/*
+ * Shared Page Layout Styles
+ * Used by: govern-science, do-science, administer-science pages
+ * -------------------------------------------------------------------------- */
+
+.page-container {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.page-header h1 {
+  font-size: 2.2rem;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: #000;
+}
+
+.lead-text {
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: #333;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.page-content {
+  margin-bottom: 40px;
+  line-height: 1.8;
+}
+
+.page-content p {
+  margin-bottom: 20px;
+  font-size: 1rem;
+}
+
+.page-icon {
+  text-align: center;
+  margin: 40px 0;
+}
+
+.page-icon img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 200px;
+  height: auto;
+}
diff --git a/docs/administer-science/index.md b/docs/administer-science/index.md
index 65ac37c4682..63b8b32a02c 100644
--- a/docs/administer-science/index.md
+++ b/docs/administer-science/index.md
@@ -39,15 +39,24 @@ buttons:
       href: '/administer-science/faq/'
       icon: "mdi-help-circle"
 ---
+<div class="page-container">
+  <div class="page-header">
+    <h1>Administer science in HUNT Cloud</h1>
+    <p class="lead-text">Welcome to our documentation for individuals that administer science in HUNT Cloud.</p>
+  </div>
 
-# Administer science in HUNT Cloud
+  <div class="page-icon">
+      <img src="../images/hunt-cloud_key_250.png" alt="Illustration of decorative hand-made golden key with purple gem stones." />
+    </div>
 
-**Welcome to our documentation for individuals that administer science in HUNT Cloud.**
+  <div class="page-content">
+      <p>This section is aimed at those that administer science in HUNT Cloud. See our <a href="/">main documentation page</a> for other sections.</p>
+    </div>
 
-This section is aimed at those that administer science in HUNT Cloud. See our [main documentation](/) page for other sections.
+  <div class="page-content">
+      <p>See our <a href="/administer-science/scientific-access/">scientific access</a> section for guidance on how new scientific centers and research groups can enable HUNT Cloud resources for their scientists..</p>
+    </div>
 
-See our [scientific access](/administer-science/scientific-access/) section for guidance on how new scientific centers and research groups can enable HUNT Cloud resources for their scientists.
+  <NavigationCards :buttons="$frontmatter.buttons" />
+</div>
 
-!["Illustration of decorative hand-made golden key with purple gem stones."](../images/hunt-cloud_key_250.png)
-
-<NavigationCards :buttons="$frontmatter.buttons" />
diff --git a/docs/do-science/index.md b/docs/do-science/index.md
index ac453735ba4..4dc12003f29 100644
--- a/docs/do-science/index.md
+++ b/docs/do-science/index.md
@@ -41,21 +41,26 @@ buttons:
     icon: "mdi-bug"
 ---
 
-# Do science in HUNT Cloud
+<div class="page-container">
+  <div class="page-header">
+    <h1>Do science in HUNT Cloud</h1>
+    <p class="lead-text">Welcome to our official user documentation for scientists in HUNT Cloud.</p>
+  </div>
 
-**Welcome to our official user documentation for scientists in HUNT Cloud.**
+  <div class="page-icon">
+    <img src="../images/hunt-cloud_bottle_250.png" alt="Illustration of laboratory glass bottle with yellow shimmery substance." />
+  </div>
 
-This section is for active lab users. It contains practical information on how to do science in HUNT Cloud.
+  <div class="page-content">
+    <p>This section is for active lab users. It contains practical information on how to do science in HUNT Cloud.</p>
+  </div>
 
-!["Illustration of laboratory glass bottle with yellow shimmery substance."](../images/hunt-cloud_bottle_250.png)
+  <div class="page-content">
+    <p>See our <a href="/">main documentation page</a> for other sections.</p>
+  </div>
 
 <NavigationCards :buttons="$frontmatter.buttons" />
-
-<br/>
-
-<!-- !["Illustration of laboratory glass bottle with yellow shimmery substance."](../images/hunt-cloud_bottle_250.png) -->
-
-See our [main documentation page](/) for other sections.
+</div>
 
 <!-- ::: tip Next Tingweek #13 (2024-10)
 
diff --git a/docs/govern-science/index.md b/docs/govern-science/index.md
index a5e7db81e8b..9f2db086609 100644
--- a/docs/govern-science/index.md
+++ b/docs/govern-science/index.md
@@ -36,14 +36,24 @@ buttons:
     icon: "mdi-help-circle"
 ---
 
-# Govern science in HUNT Cloud
+<div class="page-container">
+  <div class="page-header">
+    <h1>Govern science in HUNT Cloud</h1>
+    <p class="lead-text">Welcome to our documentation for representatives that govern science in HUNT Cloud.</p>
+  </div>
 
-**Welcome to our documentation for representatives that govern science in HUNT Cloud.**
+  <div class="page-icon">
+    <img src="../images/hunt-cloud_compass_250.png" alt="Illustration of sundial compass in brass." />
+  </div>
 
-This section is aimed at representatives for data controllers and service centers. See our [main documentation page](/) for other sections.
+  <div class="page-content">
+    <p>This section is aimed at representatives for data controllers and service centers. See our <a href="/">main documentation page</a> for other sections.</p>
+  </div>
 
-See our [organizational access](/govern-science/organizational-access/) section for guidance on how new organizations can enable HUNT Cloud resources for their scientific centers and research groups.
+  <div class="page-content">
+    <p>See our <a href="/govern-science/organizational-access/">organizational access</a> section for guidance on how new organizations can enable HUNT Cloud resources for their scientific centers and research groups.</p>
+  </div>
 
-!["Illustration of sundial compass in brass."](../images/hunt-cloud_compass_250.png)
+  <NavigationCards :buttons="$frontmatter.buttons" />
+</div>
 
-<NavigationCards :buttons="$frontmatter.buttons" />