diff --git a/source/_includes/components/favicon.jinja b/source/_includes/components/favicon.jinja
new file mode 100644
index 0000000..60ed23e
--- /dev/null
+++ b/source/_includes/components/favicon.jinja
@@ -0,0 +1,9 @@
+<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
+<link rel="manifest" href="/images/favicon/site.webmanifest">
+<link rel="mask-icon" href="/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
+<link rel="shortcut icon" href="/images/favicon/favicon.ico">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
+<meta name="theme-color" content="#ffffff">
\ No newline at end of file
diff --git a/source/_includes/components/footer.jinja b/source/_includes/components/footer.jinja
index 14ed376..bca33c1 100644
--- a/source/_includes/components/footer.jinja
+++ b/source/_includes/components/footer.jinja
@@ -1,3 +1,5 @@
-<footer>
-  <p>Catalyst Voice © 2025</p>
+<footer class="footer">
+  <div class="footer-content">
+    <p class="copyright">© 2024 Project Catalyst. All rights reserved.</p>
+  </div>
 </footer>
\ No newline at end of file
diff --git a/source/_includes/components/header.jinja b/source/_includes/components/header.jinja
new file mode 100644
index 0000000..dc79baf
--- /dev/null
+++ b/source/_includes/components/header.jinja
@@ -0,0 +1,8 @@
+<!-- Main header -->
+<nav class="top-nav" id="mainNav">
+    <div class="nav-content">
+        <div class="logo">
+            <img src="/images/branding/logo.png" alt="Project Catalyst Logo" class="logo-image">
+        </div>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/source/images/branding/logo.png b/source/images/branding/logo.png
new file mode 100644
index 0000000..c601c67
Binary files /dev/null and b/source/images/branding/logo.png differ
diff --git a/source/index.jinja b/source/index.jinja
index d118f7f..ec9f9d2 100644
--- a/source/index.jinja
+++ b/source/index.jinja
@@ -6,40 +6,22 @@ title: Catalyst Voices Updates
 
 <head>
   <meta charset="utf-8">
+
   <title>{{ title }}</title>
+
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Latest updates and news from Catalyst Voices">
 
-  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
-  <link rel="manifest" href="/images/favicon/site.webmanifest">
-  <link rel="mask-icon" href="/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
-  <link rel="shortcut icon" href="/images/favicon/favicon.ico">
-  <meta name="msapplication-TileColor" content="#da532c">
-  <meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
-  <meta name="theme-color" content="#ffffff">
+  {{ components.favicon() }}
 
-  <link rel="stylesheet" href="/styles/styles.css">
+  <link rel="stylesheet" href="/styles/theme.css">
+  <link rel="stylesheet" href="/styles/header.css">
   <link rel="stylesheet" href="/styles/home.css">
+  <link rel="stylesheet" href="/styles/footer.css">
 </head>
 
 <body>
-  <!-- Main header -->
-  <nav class="top-nav" id="mainNav">
-    <div class="nav-content">
-      <div class="logo">
-        <img src="/images/logo.svg" alt="Project Catalyst Logo" class="logo-image">
-      </div>
-    </div>
-  </nav>
-
-  <!-- Sticky header (shows on scroll) -->
-  <nav class="sticky-nav" id="stickyNav">
-    <div class="nav-content">
-      <h1 class="sticky-title">Catalyst Voices: What's <span class="accent">New</span></h1>
-    </div>
-  </nav>
+  {{ components.header() }}
 
   <!-- Hero section -->
   <header class="hero-section" id="heroSection">
@@ -109,34 +91,7 @@ title: Catalyst Voices Updates
     </div>
   </div>
 
-  <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      const mainNav = document.getElementById('mainNav');
-      const stickyNav = document.getElementById('stickyNav');
-      const heroSection = document.getElementById('heroSection');
-      let lastScrollTop = 0;
-
-      window.addEventListener('scroll', function () {
-        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        const heroBottom = heroSection.offsetTop + heroSection.offsetHeight;
-
-        if (scrollTop >= heroBottom) {
-          mainNav.classList.add('nav-hidden');
-          stickyNav.classList.add('nav-visible');
-        } else {
-          mainNav.classList.remove('nav-hidden');
-          stickyNav.classList.remove('nav-visible');
-        }
-
-        if (scrollTop > lastScrollTop && scrollTop > heroBottom) {
-          stickyNav.classList.add('nav-up');
-        } else {
-          stickyNav.classList.remove('nav-up');
-        }
-        lastScrollTop = scrollTop;
-      });
-    });
-  </script>
+  {{ components.footer() }}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/source/styles/footer.sass b/source/styles/footer.sass
new file mode 100644
index 0000000..39250c3
--- /dev/null
+++ b/source/styles/footer.sass
@@ -0,0 +1,21 @@
+@use 'theme' as *;
+@use "sass:map";
+
+.footer {
+  width: 100%;
+  padding: 1rem 0;
+  border-top: 1px solid #EAECF0;
+  margin-top: auto;
+  color:white
+
+}
+
+.footer-content {
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.copyright {
+  @include typography("body");
+  color: get-color("text-light");
+}
\ No newline at end of file
diff --git a/source/styles/header.sass b/source/styles/header.sass
new file mode 100644
index 0000000..66bfbd8
--- /dev/null
+++ b/source/styles/header.sass
@@ -0,0 +1,33 @@
+@import 'theme';
+
+// Top Navigation
+.top-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: rgba(white, 0.9);
+  backdrop-filter: blur(8px);
+  padding: map-get($spacing, sm) 0;
+}
+
+.nav-content {
+  align-content: start;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 map-get($spacing, lg);
+  display: flex;
+  justify-content: start;
+  align-items: left;
+}
+
+.logo {
+  display: flex;
+  align-items: left;
+
+  img {
+    height: 40px;
+    width: auto;
+  }
+}
\ No newline at end of file
diff --git a/source/styles/home.sass b/source/styles/home.sass
index d2b1c17..af87134 100644
--- a/source/styles/home.sass
+++ b/source/styles/home.sass
@@ -1,322 +1,184 @@
-// Variables
-$colors: (primary-blue: #1976E5,
-  timeline-blue: #1444EF,
-  text-dark: #1B2559,
-  text-light: #64748B,
-  tag-bg: #F4F7FE,
-  white: #FFFFFF,
-  purple: #8247FF);
+@use 'theme' as *;
+@use "sass:map";
+
+// Site content container
+.site-content {
+  position: relative;
+  z-index: 1;
+}
 
 // Base styles
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  color: map-get($colors, text-dark);
-  line-height: 1.5;
-}
-
-// Top Navigation
-.top-nav {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(8px);
-  z-index: 100;
-  padding: 1rem 0;
-}
-
-.nav-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: map-get($colors, text-dark);
-  text-decoration: none;
-}
-
-.logo-image {
-  height: 32px;
-  width: auto;
-}
-
-.search-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0.5rem;
-  color: map-get($colors, text-dark);
-
-  &:hover {
-    color: map-get($colors, primary-blue);
-  }
+  background: $background-gradient;
+  min-height: 100vh;
+  background-attachment: fixed;
 }
 
 // Hero Section
 .hero-section {
-  background: linear-gradient(135deg, #F7F3FF 0%, #FFFFFF 100%);
-  padding-top: calc(8rem + 64px);
+  margin-top: 250px;
   text-align: center;
 }
 
 .hero-title {
-  font-size: 3.5rem;
-  font-weight: 700;
-  color: map-get($colors, text-dark);
-  margin-bottom: 1rem;
+  @include typography("hero");
+  color: get-color("text-dark");
+  margin-bottom: get-spacing("sm");
 
   .accent {
-    color: map-get($colors, purple);
+    color: get-color("hero-purple");
   }
 }
 
 .hero-subtitle {
-  font-size: 1.125rem;
-  color: map-get($colors, text-light);
-  max-width: 600px;
+  @include typography("body");
+  color: get-color("text-light");
   margin: 0 auto;
 }
 
-// Wrapper
+// Main Content Layout
 .wrapper {
-  max-width: 1200px;
+  display: flex;
+  width: 100%;
   margin: 0 auto;
-  padding: 2rem 1rem;
+  padding: get-spacing("lg") 0;
+  margin-top: 100px;
+  justify-content: center;
 }
 
-// Post List
 .post-list {
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
-  gap: 3rem;
-  max-width: 1000px;
-  margin: 0 auto;
-  position: relative;
+  gap: get-spacing("xl");
 }
 
-// Post Layout
 .post {
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  gap: 2rem;
-  padding: 0 1rem;
+  display: flex;
   position: relative;
 
-  @media (max-width: 768px) {
-    grid-template-columns: 1fr;
-    gap: 1rem;
+  &:first-child .post-meta::before {
+    top: 10px;
+  }
+
+  &:last-child .post-meta::before {
+    bottom: 0;
   }
 }
 
-// Post Meta (Left Column)
 .post-meta {
+  width: get-layout("meta-width");
+  flex-shrink: 0;
+  padding-right: get-spacing("xl");
   position: relative;
-  padding-left: 1.5rem;
 
-  // Timeline connector
   &::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
-    bottom: -3rem; // Extends to the next post
+    bottom: -4rem;
     width: 2px;
-    background-color: map-get($colors, timeline-blue);
+    background-color: get-color("timeline-blue");
     opacity: 0.1;
   }
 
-  // Date dot
   .date {
     position: relative;
     display: inline-block;
-    color: map-get($colors, timeline-blue);
-    font-size: 0.875rem;
-    margin-bottom: 0.75rem;
-    font-weight: 500;
-    padding-left: 1rem;
+    color: black;
+    @include typography("label");
+    padding-left: get-spacing("md");
 
     &::before {
       content: '';
       position: absolute;
-      left: -1.5rem;
+      left: 0;
       top: 50%;
       transform: translateY(-50%);
       width: 4px;
       height: 16px;
-      background-color: map-get($colors, timeline-blue);
+      background-color: get-color("timeline-blue");
       border-radius: 2px;
     }
   }
 
   .title {
-    font-size: 1.75rem;
-    font-weight: 600;
-    line-height: 1.3;
-    margin: 0.5rem 0 1rem;
-    color: map-get($colors, text-dark);
+    @include typography("title");
+    color:  get-color("footer-txt");
+    margin-left: get-spacing("md");
   }
 }
 
-// Platform Tags
-.platform-tags {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.platform-tag {
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  background: map-get($colors, tag-bg);
-  border-radius: 100px; // Pill shape
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: map-get($colors, text-dark);
-}
-
-// Post Content (Right Column)
 .post-content {
+  flex-grow: 1;
+  max-width: get-layout("content-width");
+
   .post-media {
-    margin-bottom: 1.5rem;
-    border-radius: 1rem;
+    margin-bottom: get-spacing("lg");
+    border-radius: 8px;
     overflow: hidden;
-    background: map-get($colors, text-dark);
 
     img,
     video {
       width: 100%;
+      height: auto;
       display: block;
     }
 
     &.video-container {
+      position: relative;
       aspect-ratio: 16/9;
-
-      video {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
     }
   }
 
   .description {
-    color: map-get($colors, text-dark);
-    font-size: 1rem;
-    line-height: 1.6;
-    margin-bottom: 1.5rem;
+    @include typography("body");
+    color: get-color("text-light");
+    margin-bottom: get-spacing("lg");
   }
 }
 
 // Read More Button
 .read-more {
   display: inline-block;
-  padding: 0.75rem 1.5rem;
-  background-color: map-get($colors, primary-blue);
-  color: map-get($colors, white);
+  padding: get-spacing("xs") get-spacing("md");
+  background-color: get-color("primary-blue");
+  color: white;
+  justify-content: center;
+  align-items: center;
   text-decoration: none;
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: background-color 0.2s ease;
+  text-align: center;
+  border-radius: 40px;
+  @include typography("label");
+  transition: background-color 0.3s ease;
 
   &:hover {
-    background-color: darken(map-get($colors, primary-blue), 5%);
+    background-color: darken(get-color("primary-blue"), 5%);
+    color: white;
   }
 }
 
-// Hide timeline for last post
-.post:last-child {
-  .post-meta::before {
-    bottom: 0;
-  }
-}
-
-// Responsive Adjustments
-@media (max-width: 768px) {
-  .hero-title {
-    font-size: 2.5rem;
-  }
-
-  .hero-subtitle {
-    font-size: 1rem;
+// Responsive adjustments
+@media (max-width: 1024px) {
+  .wrapper {
+    padding: 0 get-spacing("md");
   }
 
   .post {
-    padding: 0;
+    flex-direction: column;
   }
 
   .post-meta {
-    padding-left: 1rem;
-  }
-
-  .platform-tag {
-    font-size: 0.75rem;
-    padding: 0.375rem 0.75rem;
+    width: 100%;
+    padding-right: 0;
+    padding-left: get-spacing("md");
+    margin-bottom: get-spacing("md");
   }
-}
 
-// Navigation Base Styles
-.top-nav,
-.sticky-nav {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(8px);
-  z-index: 100;
-  padding: 1rem 0;
-  transition: transform 0.3s ease-in-out;
-}
-
-// Main Navigation
-.top-nav {
-  transform: translateY(0);
-
-  &.nav-hidden {
-    transform: translateY(-100%);
-  }
-}
-
-// Sticky Navigation
-.sticky-nav {
-  background: rgba(255, 255, 255, 0.95);
-  transform: translateY(-100%);
-
-  &.nav-visible {
-    transform: translateY(0);
-  }
-
-  &.nav-up {
-    transform: translateY(-100%);
-  }
-
-  .nav-content {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 1.5rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .sticky-title {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin: 0;
-
-    .accent {
-      color: map-get($colors, purple);
-    }
+  .hero-title {
+    @include typography("title");
   }
 }
\ No newline at end of file
diff --git a/source/styles/styles.sass b/source/styles/styles.sass
deleted file mode 100644
index a622131..0000000
--- a/source/styles/styles.sass
+++ /dev/null
@@ -1,32 +0,0 @@
-html, body {
-  margin: 0;
-  padding: 0;
-}
-
-main {
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-
-  padding: 48px;
-
-  line-height: 1.4em;
-
-  li {
-    margin-bottom: 1em;
-  }
-}
-
-footer {
-  width: 100%;
-  padding-top: 48px;
-  padding-bottom: 48px;
-
-  background: YELLOW;
-
-  color: BLACK;
-  font-size: 14px;
-  font-family: sans-serif;
-  text-align: center;
-  text-transform: uppercase;
-}
\ No newline at end of file
diff --git a/source/styles/theme.sass b/source/styles/theme.sass
new file mode 100644
index 0000000..c9b1dd9
--- /dev/null
+++ b/source/styles/theme.sass
@@ -0,0 +1,129 @@
+@use "sass:map";
+
+// Colors
+$colors: (
+  primary-blue: #113CD3,
+  timeline-blue: #1444EF,
+  text-dark: #1B2559,
+  text-light: #64748B,
+  tag-bg: #F4F7FE,
+  hero-purple: #935CD6,
+  footer-txt: #212A3D
+);
+
+// Font Families
+$font-families: (
+  primary: ('Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif),
+  titles: ('Poppins', sans-serif),
+  accent: ('Roboto', sans-serif)
+);
+
+// Font Sizes
+$font-sizes: (
+  xs: 0.875rem,    // 14px
+  sm: 1rem,        // 16px
+  base: 1.125rem,  // 18px
+  lg: 1.5rem,      // 24px
+  xl: 2.5rem,      // 40px
+  '2xl': 3.5rem    // 56px
+);
+
+// Font Weights
+$font-weights: (
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+);
+
+// Layout
+$layout: (
+  max-width: 1200px,
+  content-width: 720px,
+  meta-width: 280px
+);
+
+// Spacing
+$spacing: (
+  xs: 0.5rem,    // 8px
+  sm: 1rem,      // 16px
+  md: 1.5rem,    // 24px
+  lg: 2rem,      // 32px
+  xl: 4rem       // 64px
+);
+
+// Effects
+$background-gradient: linear-gradient(
+  135deg,
+  rgba(247, 237, 255, 1) 0%,
+  rgba(255, 255, 255, 1) 60%,
+  rgba(237, 240, 255, 1) 100%
+);
+
+// Typography Styles
+$typography-styles: (
+  hero: (
+    font-family: map.get($font-families, "primary"),
+    font-size: 64px,
+    line-height: 64px,
+    font-weight: 700,
+    letter-spacing: -0.02em
+  ),
+  title: (
+    font-family: map.get($font-families, "titles"),
+    font-size: 22px,
+    line-height: 28px,
+    font-weight: 700,
+    letter-spacing: 0.03em
+  ),
+  body: (
+    font-family: map.get($font-families, "primary"),
+    font-size: 16px,
+    line-height: 24px,
+    font-weight: 500,
+    letter-spacing: 0.005em
+  ),
+  label: (
+    font-family: map.get($font-families, "primary"),
+    font-size: 14px,
+    line-height: 20px,
+    font-weight: 500,
+    letter-spacing: 0.1px
+  )
+);
+
+// Functions
+@function get-color($key) {
+  @return map.get($colors, $key);
+}
+
+@function get-font-family($key) {
+  @return map.get($font-families, $key);
+}
+
+@function get-font-size($key) {
+  @return map.get($font-sizes, $key);
+}
+
+@function get-spacing($key) {
+  @return map.get($spacing, $key);
+}
+
+@function get-layout($key) {
+  @return map.get($layout, $key);
+}
+
+// Typography Mixin
+@mixin typography($style) {
+  $settings: map.get($typography-styles, $style);
+  font-family: map.get($settings, "font-family");
+  font-size: map.get($settings, "font-size");
+  font-weight: map.get($settings, "font-weight");
+  line-height: map.get($settings, "line-height");
+  letter-spacing: map.get($settings, "letter-spacing");
+}
+
+Base styles
+body {
+  font-family: map.get($font-families, "primary");
+}
\ No newline at end of file
