diff --git a/_includes/header.qmd b/_includes/header.qmd
new file mode 100644
index 000000000..70e87d5b2
--- /dev/null
+++ b/_includes/header.qmd
@@ -0,0 +1,39 @@
+```{=html}
+<div class="line-graph">
+  <div class="upper-content">
+    <div class="responsive-heading">Turing.jl</div>
+  </div>
+  <div>
+    <svg viewBox="0 0 2300 498" xmlns="http://www.w3.org/2000/svg">
+      <path class="line line1"
+        d="M0 487 C1155.53 487 1320.502 502.995 1391.761 461.5C1453.584 425.5 1467.657 399 1509.375 344.5C1551.093 290 1586.276 213 1645.586 213C1704.895 213 1776.77 350.5 1806.425 389C1875.39 478.535 1871.263 486.5 2300 487"/>
+      <path class="line line2"
+        d="M0 486.5 C223.96 486.5 883.72 484.016 977.94 484.016C1163.36 484.016 1183.85 461.682 1249.81 287.031C1283.73 197.222 1311.724 96 1349.948 96C1388.171 96 1418.291 219.36 1447.552 292.5C1536.356 514.469 1548.077 486 1734.55 486C1921.023 486 2087.346 485.5 2300 485.5"/>
+      <path class="line line3"
+        d="M0 487 C108.32 487 672.77 486.499 783.26 486.499C893.75 486.499 943.04 486.499 1051.36 486.499C1135.3 486.499 1218.74 489.327 1241.95 469.982C1293.57 426.95 1311.015 327.407 1328.845 262.111C1356 162.661 1377.725 8 1409.818 8C1441.911 8 1472.715 193.386 1490.888 262.111C1509.06 330.837 1526.835 423.687 1568.803 460.973C1600.671 489.286 1631.508 486.499 1722.851 486.499C1816.509 486.499 1890.44 486.499 1991.446 486.499C2092.453 486.499 2198.993 486.499 2300 486.499"/>
+    </svg>
+  </div>
+</div>
+```
+
+```{=html}
+<span class="display-6 d-block text-center py-5 display-md-5 display-lg-4">
+    Bayesian inference with probabilistic programming
+</span>
+<div class="d-flex flex-column align-items-center gap-0 pb-5">
+  <div class="d-flex flex-row flex-wrap panel-wrapper gap-2">
+    <a href="https://turinglang.org/docs/tutorials/docs-00-getting-started/" class="button--fill btn">
+      Tutorials
+    </a>
+    <a href="https://julialang.slack.com/archives/CCYDC34A0" class="button btn">
+      Slack
+    </a>
+    <a href="https://discourse.julialang.org/c/domain/probprog/48" class="button btn">
+      Discourse
+    </a>
+    <a href="https://github.com/TuringLang" class="button btn">
+      GitHub
+    </a>
+  </div>
+</div>
+```
\ No newline at end of file
diff --git a/_includes/news.qmd b/_includes/news.qmd
new file mode 100644
index 000000000..6a556ecc9
--- /dev/null
+++ b/_includes/news.qmd
@@ -0,0 +1,256 @@
+---
+listing:
+- id: news
+  contents:
+    - "news/posts/*/index.qmd"
+  max-items: 10
+  sort: date desc
+  type: grid
+  grid-columns: 3
+  categories: false
+  sort-ui: false
+  filter-ui: false
+  fields: [title, description, date, reading-time, author]
+  image-height: "200"
+---
+
+### News
+
+::: {#news}
+
+:::
+
+[See all news &rarr;](news/)
+
+
+```{=html}
+<style>
+  /* hide default Quarto grid once JS enhancement is active */
+  #listing-news.enhanced-carousel .list.grid.quarto-listing-cols-3 {
+    display: none !important;
+  }
+
+  #carousel-container {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+  }
+  #carousel-container:focus {
+    outline: 2px solid #007acc;
+    outline-offset: 4px;
+  }
+
+  #carousel-track {
+    display: flex;
+    align-items: flex-start;
+    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
+    will-change: transform;
+  }
+
+  /* each slide sizing & height animation */
+  #carousel-track > .g-col-1 {
+    flex: 0 0 33.3333%; /* Default for desktop (3 columns) */
+    padding: 1rem;
+    box-sizing: border-box;
+    display: block !important;
+    transition: height 0.3s ease;
+  }
+
+  /* Tablet/iPad size: 2 columns */
+  @media (max-width: 1024px) and (min-width: 769px) {
+    #carousel-track > .g-col-1 {
+      flex: 0 0 50%; /* 2 columns */
+    }
+  }
+
+  /* Single-column on smaller mobile */
+  @media (max-width: 768px) {
+    #carousel-track > .g-col-1 {
+      flex: 0 0 100%; /* 1 column */
+    }
+  }
+
+  /* remove default card styling */
+  #carousel-track > .g-col-1 .card {
+    background: none;
+    box-shadow: none;
+    border: none;
+  }
+
+  /* trim default listing padding */
+  .quarto-listing {
+    padding-bottom: 0 !important;
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const listing = document.getElementById('listing-news');
+    if (!listing) return;
+
+    const originalItems = Array.from(
+      listing.querySelectorAll('.list.grid.quarto-listing-cols-3 > .g-col-1')
+    );
+    const N_original = originalItems.length;
+
+  originalItems.forEach(item => {
+    const card = item.querySelector('.card');
+    if (card) {
+      card.classList.add('news-item');
+    }
+  });
+
+    // Helper to get items per view (cached on first call, recalculated on resize)
+    function getItemsPerView() {
+      const width = window.innerWidth;
+      if (width <= 768) { // Mobile
+        return 1;
+      } else if (width > 768 && width <= 1024) { // Tablet/iPad
+        return 2;
+      } else { // Desktop
+        return 3;
+      }
+    }
+
+    // If there are too few items to scroll, just display them statically.
+    // This check now uses the initial itemsPerView.
+    if (N_original <= getItemsPerView()) {
+      listing.classList.remove('enhanced-carousel');
+      return;
+    }
+
+    // Add enhanced-carousel class only if the carousel is actually being initialized
+    listing.classList.add('enhanced-carousel');
+
+    let carouselContainer = document.getElementById('carousel-container');
+    let carouselTrack = document.getElementById('carousel-track');
+
+    // Initialize carousel elements if they don't exist (first load or after a full re-init on resize)
+    if (!carouselContainer) {
+      carouselContainer = document.createElement('div');
+      carouselContainer.id = 'carousel-container';
+      carouselContainer.setAttribute('role', 'region');
+      carouselContainer.setAttribute('aria-live', 'polite');
+      carouselContainer.setAttribute('tabindex', '0');
+
+      carouselTrack = document.createElement('div');
+      carouselTrack.id = 'carousel-track';
+      carouselContainer.appendChild(carouselTrack);
+      listing.parentNode.insertBefore(carouselContainer, listing.nextSibling);
+    } else {
+        // Clear existing children from track if re-initializing on resize
+        while(carouselTrack.firstChild) {
+            carouselTrack.removeChild(carouselTrack.firstChild);
+        }
+    }
+
+    let itemsPerView = getItemsPerView(); // Initial calculation
+    const numClones = Math.max(itemsPerView, 1);
+
+    const clonedItems = [];
+    for (let i = 0; i < numClones; i++) {
+        const clone = originalItems[i % N_original].cloneNode(true);
+        clone.setAttribute('aria-hidden', 'true');
+        clonedItems.push(clone);
+    }
+
+    originalItems.forEach(i => {
+        carouselTrack.appendChild(i);
+        i.setAttribute('aria-hidden', 'false');
+    });
+    clonedItems.forEach(i => carouselTrack.appendChild(i));
+
+    const allItems = [...originalItems, ...clonedItems];
+
+    let currentIndex = 0;
+    let shiftPercent = 100 / itemsPerView;
+    const displayDuration = 2000;
+    const transitionDuration = 700;
+
+    function recalcHeight() {
+      for (let i = currentIndex; i < Math.min(currentIndex + itemsPerView, allItems.length); i++) {
+          allItems[i].style.height = 'auto';
+      }
+
+      const vis = allItems.slice(currentIndex, currentIndex + itemsPerView);
+      const h = vis.length > 0 ? Math.max(...vis.map(i => i.offsetHeight)) : 0;
+      vis.forEach(i => i.style.height = h + 'px');
+      carouselContainer.style.height = h + 'px';
+    }
+
+    function updateSlide(idx, instant = false) {
+      if (instant) {
+        carouselTrack.style.transition = 'none';
+      } else {
+        carouselTrack.style.transition = `transform ${transitionDuration / 1000}s cubic-bezier(0.25, 1, 0.5, 1)`;
+      }
+
+      carouselTrack.style.transform = `translateX(-${idx * shiftPercent}%)`;
+      recalcHeight();
+
+      allItems.forEach((item, i) => {
+          if (i >= currentIndex && i < currentIndex + itemsPerView) {
+              item.setAttribute('aria-hidden', 'false');
+          } else {
+              item.setAttribute('aria-hidden', 'true');
+          }
+      });
+
+      if (!instant && idx >= N_original) {
+        setTimeout(() => {
+          currentIndex = 0;
+          updateSlide(currentIndex, true);
+        }, transitionDuration);
+      }
+    }
+
+    function nextSlide() {
+      currentIndex++;
+      updateSlide(currentIndex);
+    }
+
+    recalcHeight();
+    updateSlide(0);
+
+    // auto-play with pause on hover/focus/visibility
+    let intervalId = setInterval(nextSlide, displayDuration);
+    ['mouseenter','focusin'].forEach(e =>
+      carouselContainer.addEventListener(e, () => clearInterval(intervalId))
+    );
+    ['mouseleave','focusout'].forEach(e =>
+      carouselContainer.addEventListener(e, () => {
+        clearInterval(intervalId);
+        intervalId = setInterval(nextSlide, displayDuration);
+      })
+    );
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden) clearInterval(intervalId);
+      else {
+        clearInterval(intervalId);
+        intervalId = setInterval(nextSlide, displayDuration);
+      }
+    });
+
+    let resizeTimeout = null;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        const newItemsPerView = getItemsPerView();
+
+        if (newItemsPerView !== itemsPerView || N_original <= newItemsPerView) {
+            clearInterval(intervalId);
+            carouselContainer.remove();
+            document.dispatchEvent(new Event('DOMContentLoaded'));
+            return;
+        }
+
+        itemsPerView = newItemsPerView;
+        shiftPercent = 100 / itemsPerView;
+        currentIndex = Math.min(currentIndex, N_original - 1);
+        recalcHeight();
+        updateSlide(currentIndex, true);
+      }, 150);
+    });
+  });
+</script>
+```
\ No newline at end of file
diff --git a/_quarto.yml b/_quarto.yml
index 16db4adaa..681a3acfa 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -1,7 +1,7 @@
 project:
   type: website
   preview:
-    # Change port if it's busy in your system or just remove this line so that It will automatically use any free port
+    # Change port if it's busy in your system or just comment below line so that It will automatically use any free port
     port: 4200
     browser: true
 
@@ -16,9 +16,7 @@ website:
     type: overlay
   navbar:
     logo: "assets/images/turing-logo.svg"
-    logo-href: https://turinglang.org/
-    background: "#073c44"
-    foreground: "#ffffff"
+    # logo-href: https://turinglang.org/ -- Keep this commented so clicking on logo in dev mode doesn't redirect to the site
     left:
       - text: Get Started
         href: https://turinglang.org/docs/getting-started/
@@ -39,18 +37,10 @@ website:
         href: https://github.com/TuringLang
   
   page-footer:
-    background: "#073c44"
+    #background: "#073c44"
     left: |
-      Turing is created by <a href="http://mlg.eng.cam.ac.uk/hong/" target="_blank">Hong Ge</a>, and lovingly maintained by the <a href="https://github.com/TuringLang/Turing.jl/graphs/contributors" target="_blank">core team</a> of volunteers. <br>
-      The contents of this website are © 2018–2025 under the terms of the <a href="https://github.com/TuringLang/Turing.jl/blob/main/LICENCE" target="_blank">MIT License</a>. 
-
-    right:
-      - icon: twitter
-        href: https://x.com/TuringLang
-        aria-label: Turing Twitter
-      - icon: github
-        href: https://github.com/TuringLang/Turing.jl
-        aria-label: Turing GitHub
+      Turing is created by <a href="http://mlg.eng.cam.ac.uk/hong/" target="_blank">Hong Ge</a>, and maintained by the <a href="/team" target="_blank">core team of developers</a>. <br>
+      © 2025 under the terms of the <a href="https://github.com/TuringLang/Turing.jl/blob/master/LICENCE" target="_blank">MIT License</a>.
 
   back-to-top-navigation: true
   repo-url: https://github.com/TuringLang/turinglang.github.io/
@@ -64,6 +54,7 @@ format:
       light: cosmo
       dark: [cosmo, theming/theme-dark.scss]
     css: theming/styles.css
+    highlight-style: github
     toc: true
     smooth-scroll: true
     code-overflow: wrap
diff --git a/index.qmd b/index.qmd
index d2bf8a679..9e183742d 100644
--- a/index.qmd
+++ b/index.qmd
@@ -1,55 +1,171 @@
 ---
-# pagetitle: "Turing"
 toc: false
-page-layout: custom
+page-layout: full
 section-divs: false
 hide-description: true
 description: |
   Turing.jl is a probabilistic programming language and Bayesian modelling framework for the Julia programming language.
 ---
 
-::: {.hero-banner}
-::: {.grid}
-::: {.g-col-1}
+{{< include _includes/header.qmd >}}
+
+::::: {.d-flex .flex-row .flex-wrap .panel-wrapper .gap-4 .section-end-space}
+
+::: {.panel}
+##### Expressive {.panel-title .pb-1}
+Turing models are easy to write and communicate — their syntax closely resembles mathematical notation.
 :::
-::: {.g-col-8}
 
-# Turing.jl: Bayesian inference with probabilistic programming. 
+::: {.panel}
+##### General-purpose {.panel-title .pb-1}
+Turing supports models with discrete parameters and stochastic control flow.
+:::
 
-### Intuitive
-Turing models are easy to write and communicate — syntax is close to mathematical notations. 
+::: {.panel}
+##### Composable {.panel-title .pb-1}
+Turing is written entirely in Julia, and is interoperable with its powerful ecosystem.
+:::
 
-### General-purpose
-Turing supports models with discrete parameters and stochastic control flow. 
+:::::
 
-### Modular and composable 
-Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem. 
 
+::::: {.d-flex .flex-row .flex-wrap .panel-wrapper .gap-3 .pb-2}
 
-::: {.hero-buttons style="position: relative; display: flex; justify-content: center;"}
-[Get Started]({{< meta get-started >}}){.btn-action-primary .btn-action .btn .btn-lg role="button" style="background-color: #073c44; color: white"}
-:::
+::: {.example-text style="text-align:right;padding:0.5rem;"}
 
-::: {.g-col-3}
-:::
-:::
-:::
+<div class="fs-4 fw-bold pb-1">Hello, World in Turing</div>
+
+Some text about how easy it is to [get going](https://turinglang.org/docs/tutorials/00-introduction/).
 
 :::
 
-::: {style="position: relative; display: flex; justify-content: center;"}
-::: {.grid}
-::: {.g-col-1}
+::: {.example-code}
+```julia
+@model function coinflip(; N::Int)
+    # Prior belief about the probability of heads
+    p ~ Beta(1, 1)
+
+    # Heads or tails of a coin are drawn from `N`
+    # Bernoulli distributions with success rate `p`
+    y ~ filldist(Bernoulli(p), N)
+
+end;
+```
 :::
-::: {.g-col-8}
-## Community Resources
 
-The Turing.jl [discourse forum](https://discourse.julialang.org/c/domain/probprog) provides support and discussion for all user levels.
-The [Turing.jl documentation]({{< meta get-started >}}) and [official tutorials]({{< meta tutorials-intro >}}) help users learn and use Turing.jl!
-There's also a [tutorial in Bayesian Statistics using Julia and Turing.jl](https://storopoli.io/Bayesian-Julia).
+:::::
+
+::::: {.d-flex .flex-row-reverse .flex-wrap .panel-wrapper .gap-3 .pt-2 .section-end-space}
+
+::: {.example-text style="padding:0.5rem;"}
+
+<div class="fs-4 fw-bold pb-1">Goodbye, World in Turing</div>
+
+Some text about how easy it is to interface with external packages like AbstractGPs. Learn more about modelling [Gaussian Processes](https://turinglang.org/docs/tutorials/15-gaussian-processes/) with Turing.jl.
 
 :::
-::: {.g-col-3}
+
+::: {.example-code}
+```julia
+@model function putting_model(d, n; jitter=1e-4)
+    v ~ Gamma(2, 1)
+    l ~ Gamma(4, 1)
+    f = GP(v * with_lengthscale(SEKernel(), l))
+    f_latent ~ f(d, jitter)
+    binomials = Binomial.(n, logistic.(f_latent))
+    y ~ product_distribution(binomials)
+    return (fx=f(d, jitter), f_latent=f_latent, y=y)
+end
+```
 :::
+
+:::::
+
+{{< include _includes/news.qmd >}}
+
+```{=html}
+<h3 class="pb-3 section-start-space">
+  Learn more
+</h3>
+<div class="list grid quarto-listing-cols-3">
+  <a class="pseudolisting" href="/library">
+    <div class="card-title h5">
+      Ecosystem
+    </div>
+    <p class="quarto-grid-item">
+      Learn about all the packages that are part of the TuringLang organization.
+    </p>
+  </a>
+  <a class="pseudolisting" href="https://turinglang.org/docs/tutorials/docs-00-getting-started/">
+    <div class="card-title h5">
+      Documentation
+    </div>
+    <p class="quarto-grid-item">
+      Familiarize yourself with the mechanics of Turing.jl.
+    </p>
+  </a>
+  <a class="pseudolisting" href="https://turinglang.org/docs/tutorials/00-introduction/">
+    <div class="card-title h5">
+      Official tutorials
+    </div>
+    <p class="quarto-grid-item">
+      Learn to tackle specific modelling problems with Turing.jl.
+    </p>
+  </a>
+</div>
+```
+
+::: {.section-start-space}
+
+### Algorithms
+
+Placeholder text introducing this section on algorithms.
+
+| Column 1 | Column 2 | Column 3 | Column 4 |
+|----------|----------|----------|----------|
+|  Entry A |  Entry D |  Entry G |  Entry J |
+|  Entry B |  Entry E |  Entry H |  Entry K |
+|  Entry C |  Entry F |  Entry I |  Entry L |
+
+: Supported MCMC and other learning algorithms {.striped .borderless}
+
 :::
+
+::: {.section-start-space}
+
+### Bayesian Workflow
+
+Placeholder text introducing the Bayesian Workflow diagram from the ACM special issue submission.
+
+```{=html}
+<div style="text-align:center;">
+<img src="https://i0.wp.com/www.honeybeesuite.com/wp-content/uploads/2019/09/Multiple-teeth-HBS.jpg?w=400&ssl=1" style="margin:0.5rem 0;border-radius:10pt">
+<p>An example of the Beeysian workflow.</p>
+</div>
+```
+
 :::
+
+```{=html}
+<div class="d-flex flex-row panel-wrapper gap-3 section-start-space">
+<div class="flex-grow-1">
+<h3>Talks</h3>
+  <p>Placeholder for intro text on list of talks which are available online</p>
+  <ul>
+    <li>Talk 1
+    <li>Talk 2
+    <li>Talk 3
+  </ul>
+</div>
+<div class="flex-grow-1">
+  <h3>Other resources</h3>
+  <p>This list contains a few other written resources for learning Turing. If you have written something and would like to share it with the community, please <a href="https://github.com/TuringLang/docs/issues/new">get in touch</a>!</p>
+  <ul>
+    <li><a href="https://github.com/StatisticalRethinkingJulia/SR2TuringPluto.jl">Statistical Rethinking</a>
+    <li><a href="https://storopoli.github.io/Turing-Workshop/">Jose Storopoli's Turing workshop (outdated in parts)</a>
+    <li><a href="https://storopoli.github.io/Bayesian-Julia/">Jose Storopoli's blog on Turing and Bayesian Statistics</a>
+    <li>Placeholder for more...
+  </ul>
+</div>
+</div>
+```
\ No newline at end of file
diff --git a/news/index.qmd b/news/index.qmd
index 3b1d47dc4..5bce7790a 100644
--- a/news/index.qmd
+++ b/news/index.qmd
@@ -10,7 +10,7 @@ listing:
   categories: true
   feed: true
 page-layout: full
-title-block-banner: "#EDF3F9"
+title-block-banner: true
 title-block-banner-color: "black"
 search: false
 ---
\ No newline at end of file
diff --git a/team/team.css b/team/team.css
index 5bb698fd1..7c3637e40 100644
--- a/team/team.css
+++ b/team/team.css
@@ -6,7 +6,7 @@ a {
 .team-member {
   display: flex;
   align-items: center;
-  background-color: #f8f9fa;
+  background-color: #e9ecef; /*gray-200, same as $color-mute-bg */
   border-radius: 0.5rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin-bottom: 2rem;
diff --git a/theming/styles.css b/theming/styles.css
index 446151cda..3d7966d14 100644
--- a/theming/styles.css
+++ b/theming/styles.css
@@ -1,45 +1,290 @@
-/* css styles */
-/* .cell-output {
-    background-color: #f1f3f5;
-} */
-
-/* .cell-output img {
-    max-width: 100%;
-    height: auto;
-} */
-
-/* .cell-output-display pre {
-    word-break: break-wor !important;
-    white-space: pre-wrap !important;
-}
- */
-
 .navbar a:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .cell-output {
-    border: 1px dashed;
+  border: 1px dashed;
 }
 
 .cell-output-stdout code {
-    word-break: break-wor !important;
-    white-space: pre-wrap !important;
+  word-break: break-word !important;
+  white-space: pre-wrap !important;
 }
 
-
 .cell-output-display svg {
-    height: fit-content;
-    width: fit-content;
+  height: fit-content;
+  width: fit-content;
 }
 
 .cell-output-display img {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
 }
 
 .nav-footer-center {
-    display: flex;
+  display: flex;
+  justify-content: center;
+}
+
+.line-graph {
+  width: 100%;
+  padding-top: 5%;
+  position: relative;
+}
+
+svg {
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.line {
+  fill: none;
+  stroke-width: 7;
+  stroke-dasharray: 3900;
+  stroke-dashoffset: 3900;
+  animation: draw 6s forwards ease-in-out;
+  stroke-opacity: 1;
+}
+
+.line1 {
+  stroke: #b352cc;
+  animation-delay: 0s;
+}
+
+.line2 {
+  stroke: #cc3333;
+  animation-delay: 0.5s;
+}
+
+.line3 {
+  stroke: #218921;
+  animation-delay: 1s;
+}
+
+.upper-content {
+  width: 88%;
+  text-align: end;
+  padding-top: 7%;
+  padding-right: 45%;
+  position: absolute;
+  z-index: 5;
+  opacity: 0;
+  animation: fadeInText 1s forwards ease-in-out;
+  animation-delay: 0.5s;
+}
+
+@keyframes fadeInText {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.upper-content>h1 {
+  font-size: 5rem;
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+}
+
+.upper-content>p {
+  font-size: 25px;
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+  margin-top: 5%;
+}
+
+@media screen and (max-width: 992px) {
+  .upper-content>h1 {
+    font-size: 3.5rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .upper-content {
+    width: 100%;
+    padding-top: 0%;
+    padding-right: 0%;
+    text-align: center;
+  }
+}
+
+.content-panel {
+  padding: 1.5rem;
+}
+
+.section-end-space {
+  padding-bottom: 6rem;
+}
+
+.section-start-space {
+  padding-top: 6rem;
+}
+
+.responsive-heading {
+  font-size: clamp(2rem, 6vw, 6rem);
+}
+
+.panel-wrapper {
+  justify-content: space-between;
+}
+
+.example-code {
+  flex: 0 1 45%;
+}
+
+.example-text {
+  flex: 0 1 53%;
+}
+
+@media screen and (max-width: 992px) {
+  .panel-wrapper {
     justify-content: center;
+  }
+
+  .example-code,
+  .example-text {
+    flex: 0 1 100%;
+  }
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.button,
+.button--fill {
+  display: inline-block;
+  padding: 10px 24px;
+  border-radius: 50px;
+  font-weight: 600;
+  text-align: center;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  text-decoration: none;
+  border-style: solid;
+  border-width: 2px;
+}
+
+.button:hover,
+.button--fill:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  text-decoration: none;
+}
+
+.panel {
+  border-radius: 12px;
+  padding: 2rem;
+  min-height: 150px;
+  min-width: 300px;
+  max-width: 31%;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  border-top: 4px solid;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
+}
+
+.panel:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+}
+
+.panel-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
+.panel--nopad {
+  padding: 0rem;
+}
+
+.card,
+.pseudolisting {
+  border-radius: 0.5rem;
+  padding: 1rem;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.card .card-title,
+.pseudolisting .h5 {
+  font-weight: 700;
+}
+
+.pseudolisting {
+  display: block;
+  text-decoration: none;
 }
+
+.pseudolisting:hover {
+  text-decoration: none;
+}
+
+.button {
+  background-color: #ffffff;
+  border-color: #e9ecef;
+  color: #495057;
+}
+
+.button--fill {
+  background-color: #4DB6AC;
+  border-color: transparent;
+  color: #ffffff;
+}
+
+.button--fill:hover {
+  background-color: #26A69A;
+}
+
+.panel {
+  background-color: #ffffff;
+  border-top-color: #4DB6AC;
+}
+
+.panel-title {
+  color: #212529;
+}
+
+.panel,
+.panel p {
+  color: #6c757d;
+  font-size: 17px;
+  font-weight: 400;
+}
+
+.card,
+.pseudolisting,
+#carousel-container .quarto-grid-item.card.news-item {
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  color: #212529;
+}
+
+.card:hover,
+.pseudolisting:hover,
+#carousel-container .quarto-grid-item.card.news-item:hover {
+  background-color: #e9ecef;
+  border-color: #dee2e6;
+}
+
+.card .card-title {
+  color: #212529;
+}
+
+.card .card-text {
+  color: #6c757d;
+}
+
+.sourceCode,
+code {
+  color: #212529;
+  border-radius: 0.5rem;
+}
\ No newline at end of file
diff --git a/theming/theme-dark.scss b/theming/theme-dark.scss
index 9c4361b91..62d60cbf1 100644
--- a/theming/theme-dark.scss
+++ b/theming/theme-dark.scss
@@ -4,76 +4,45 @@
 
 $theme: "cosmo" !default;
 
-// Manually-added colors
+// --- Consolidated Variables ---
 
-$background-nav: #192222;
-$background-body: #131818;
-$foreground: #1bb3ac;
-$foreground-dark: #073c44;
-$links:#2aa198;
+// Base colors for the entire site
+$background-nav: #22272e;
+$background-body: #1c2128; // Using the darker background from new theme
+$foreground: #ffffff;
+$links: #34b8bf;
 $links-hover: #31dce6;
-$code-background-color: #172424;
-$li: #bcbcbc;
-
-// Quarto default colors
-
-$white:    #ffffff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #868e96 !default;
-$gray-700: #495057 !default;
-$gray-800: #373a3c !default;
-$gray-900: #212529 !default;
-$black:    #000000 !default;
-
-$indigo:  #6610f2 !default;
-$purple:  #613d7c !default;
-$pink:    #e83e8c !default;
-$red:     #ff0039 !default;
-$orange:  #f0ad4e !default;
-$yellow:  #ff7518 !default;
-$green:   #3fb618 !default;
-$teal:    #20c997 !default;
-$cyan:    #9954bb !default;
-
-$primary:       $links-hover !default;
-$secondary:     $gray-800 !default;
-$success:       $green !default;
-$info:          $cyan !default;
-$warning:       $yellow !default;
-$danger:        $red !default;
-$light:         $gray-100 !default;
-$dark:          $gray-800 !default;
-
-$min-contrast-ratio:   2.6 !default;
-
-// Options
 
+// Text colors
+$text-muted: #bcbcbc;
+$li-color: #bcbcbc;
+
+// Landing Page specific colors
+$lp-cyan: #39d3d7;
+$lp-teal: #4DB6AC;
+
+// Component & Code block colors
+$code-block-bg: #22272e;
+$panel-bg: #22272e;
+$btn-border-color: #444c56;
+
+// Bootstrap color overrides
+$white: #ffffff !default;
+$gray-800: #22272e;
+$gray-900: #1c2128;
+$red: #ff0039 !default;
+$green: #3fb618 !default;
+
+$primary: $links-hover !default;
+$secondary: $gray-800 !default;
+$success: $green !default;
+$danger: $red !default;
+
+// Global settings
+$min-contrast-ratio: 2.6 !default;
 $enable-rounded: false !default;
-
-// Fonts
-
-// stylelint-disable-next-line value-keyword-case
-$font-family-sans-serif:    "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$headings-font-weight:      400 !default;
-
-// Tables
-
-$table-color:               initial !default;
-
-// Alerts
-
-$alert-border-width:            0 !default;
-
-// Progress bars
-
-$progress-height:               .5rem !default;
-
-
-// Custom tweaks for Quarto-Cosmo 
+$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$headings-font-weight: 400 !default;
 
 $navbar-bg: $background-nav;
 $navbar-fg: $foreground;
@@ -82,66 +51,92 @@ $footer-fg: $foreground;
 $body-color: $white;
 $body-bg: $background-body;
 
-a {
-    color: $links !important;
-}
 
-a:hover {
-    color: $links-hover !important;
-}
+/*-- scss:rules --*/
 
-code, p code, li code {
-    background-color: $code-background-color !important;
-    color: $links;
+// --- Global Styles ---
+p {
+    color: $text-muted !important;
 }
 
 li {
-    color: $li !important;
+    color: $li-color !important;
 }
 
-.menu-text:hover {   
-    color: $links-hover !important;
-}
+a {
+    color: $links;
 
-.quarto-title-banner {
-    background-color: $foreground-dark !important;
+    &:hover {
+        color: $links-hover !important;
+    }
 }
 
-.title {
-    color: $white !important;
+// Landing Page Buttons
+.button {
+    background-color: transparent !important;
+    border-color: $btn-border-color !important;
+    color: $body-color !important;
+
+    &:hover {
+        background-color: lighten($gray-800, 5%) !important;
+        border-color: $lp-cyan !important;
+    }
 }
 
-.listing-description a {
-    color: $li !important;
+.button--fill {
+    background-color: $lp-teal !important;
+    border-color: transparent !important;
+    color: #ffffff !important;
+
+    &:hover {
+        background-color: darken($lp-teal, 5%) !important;
+        box-shadow: 0 4px 15px rgba($lp-teal, 0.2) !important;
+    }
 }
 
-p {
-    color: $li !important;
+// Landing Page Panels
+.panel {
+    background-color: $panel-bg !important;
+    border-top-color: $lp-teal !important;
+    border-left: 1px solid $btn-border-color !important;
+    border-right: 1px solid $btn-border-color !important;
+    border-bottom: 1px solid $btn-border-color !important;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important;
+    color: $text-muted !important;
+
+    .panel-title {
+        color: $body-color !important;
+    }
 }
 
+// Misc Quarto and site-specific rules
+.quarto-title-banner {
+    background-color: $background-nav !important;
+}
 
-.team-member, .input-group-text {
-    background-color: $background-nav !important;   
+.title {
+    color: $white !important;
 }
 
-.level4, .listing-category {
-    color: $foreground !important;
+.team-member,
+.input-group-text {
+    background-color: $background-nav !important;
 }
 
-::selection {
-    color: $links-hover;
-    background: $background-nav;
+.level4,
+.listing-category {
+    color: $foreground !important;
 }
 
-.tooltip {
-    --bs-tooltip-color: $black !important;
-    --bs-tooltip-bg: $white !important;
+.badge.deprecated {
+    color: $white !important;
+    background-color: $red !important;
 }
 
 // table background & text
 .packages-table {
-    background-color: $background-body !important;
-    color: $li !important;
+    color: $text-muted !important;
+    background-color: $background-nav !important;
 }
 
 // cell borders
@@ -152,7 +147,7 @@ p {
 
 // header row
 .packages-table thead {
-    background-color: $gray-900 !important;
+    background-color: $background-nav !important;
 }
 
 // zebra stripes
@@ -169,4 +164,60 @@ p {
 .badge.deprecated {
     color: $white !important;
     background-color: $red !important;
-}
\ No newline at end of file
+}
+
+code {
+    background-color: $code-block-bg !important;
+    color: $li-color !important;
+}
+
+.card {
+    background-color: #f8f9fa !important;
+}
+
+// --- Mixins ---
+@mixin raw-card {
+    border-radius: $border-radius-sm;
+    padding: 1rem;
+    --bs-card-spacer-x: 0rem !important;
+    --bs-card-spacer-y: 0rem !important;
+    color: $body-color !important;
+    background-color: $code-block-bg !important;
+    border: solid $code-block-bg 1px !important;
+    transition: background-color 0.3s ease, border-color 0.3s ease !important;
+}
+
+@mixin card($hover-border) {
+    @include raw-card;
+
+    .card-title {
+        color: $body-color !important;
+        font-weight: 700;
+    }
+
+    &:hover {
+        background-color: lighten($code-block-bg, 5%) !important;
+        border-color: $hover-border !important;
+    }
+}
+
+// Card and Pseudolisting styles
+.card {
+    @include card($lp-cyan);
+
+    .card-text {
+        color: $text-muted;
+    }
+}
+
+.pseudolisting {
+    @extend .card;
+
+    &:hover {
+        text-decoration: none;
+    }
+}
+
+.aa-DetachedOverlay li.aa-Item[aria-selected=true] .search-item * {
+    color: white !important;
+}