diff --git a/astro.config.mjs b/astro.config.mjs
index 1e5509c6..925d5262 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,15 +1,22 @@
 import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
-
+import remarkSectionize from 'remark-sectionize';
 import expressiveCode from 'astro-expressive-code';
 
 /** @type {import('astro-expressive-code').AstroExpressiveCodeOptions} */
 const astroExpressiveCodeOptions = {
-  themes: ['material-theme-ocean'],
+  themes: ['material-theme-ocean', 'material-theme-palenight'],
 };
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), expressiveCode(astroExpressiveCodeOptions)],
+  markdown: {
+    remarkPlugins: [remarkSectionize],
+  },
+  integrations: [
+    tailwind({
+      applyBaseStyles: false,
+    }),
+    expressiveCode(astroExpressiveCodeOptions),
+  ],
 });
-
diff --git a/package-lock.json b/package-lock.json
index e101e61d..3a023331 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "@astrojs/tailwind": "^5.0.3",
         "astro": "^4.0.6",
-        "astro-expressive-code": "^0.30.1"
+        "astro-expressive-code": "^0.30.1",
+        "remark-sectionize": "^2.0.0"
       },
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.10",
@@ -5617,6 +5618,59 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-sectionize": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/remark-sectionize/-/remark-sectionize-2.0.0.tgz",
+      "integrity": "sha512-B+sCNNQroXybxX5Gwu9xbkjFIgK6vHMwbgPM/CEzQTP2ODxUiBsQRBjoSC6XR+yPOkgHvXV83HWCNA8IZuvJKg==",
+      "dependencies": {
+        "unist-util-find-after": "^4.0.1",
+        "unist-util-visit": "^4.1.2"
+      }
+    },
+    "node_modules/remark-sectionize/node_modules/@types/unist": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
+      "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+    },
+    "node_modules/remark-sectionize/node_modules/unist-util-is": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
+      "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-sectionize/node_modules/unist-util-visit": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz",
+      "integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0",
+        "unist-util-visit-parents": "^5.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-sectionize/node_modules/unist-util-visit-parents": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
+      "integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-smartypants": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/remark-smartypants/-/remark-smartypants-2.0.0.tgz",
@@ -6771,6 +6825,36 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-find-after": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.1.tgz",
+      "integrity": "sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-find-after/node_modules/@types/unist": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
+      "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+    },
+    "node_modules/unist-util-find-after/node_modules/unist-util-is": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
+      "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-is": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
diff --git a/package.json b/package.json
index 00819702..d079bfa5 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "@astrojs/tailwind": "^5.0.3",
     "astro": "^4.0.6",
-    "astro-expressive-code": "^0.30.1"
+    "astro-expressive-code": "^0.30.1",
+    "remark-sectionize": "^2.0.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
diff --git a/src/components/BlogIndex.astro b/src/components/BlogIndex.astro
index ddd5feac..11435aee 100644
--- a/src/components/BlogIndex.astro
+++ b/src/components/BlogIndex.astro
@@ -1,24 +1,25 @@
 ---
 const allPosts = await Astro.glob('../pages/posts/*.md');
-const { styles = '' } = Astro.props;
+const { class: className } = Astro.props;
 let displayPosts = Astro.props.postCount
   ? allPosts.slice(-Astro.props.postCount)
   : allPosts;
 ---
 
-<ul class={`list-none pl-0 ${styles}`}>
+<ul class={`list-none pl-0 ${className}`}>
   {
     displayPosts.map((post) => (
-      <li class="flex flex-row-reverse justify-between border-b-[0.5px] border-slate-300/25 p-2.5">
+      <li class="flex flex-row-reverse justify-between border-b-[0.5px] dark:border-slate-400/20 p-2.5">
         <div>
           <a
             href={post.url}
-            class="text-xl font-[600] text-sky-300/80 decoration-1 decoration-sky-300/55 underline-offset-[5px] hover:underline">
+            class="text-xl font-[600] text-slate-700 dark:text-sky-300/80 decoration-1 dark:decoration-sky-300/55 underline-offset-[5px] hover:underline">
             {post.frontmatter.title}
           </a>
         </div>
-        <div class="text-slate-200/60">{post.frontmatter.pubDate}</div>
+        <div class="text-slate-600/75 dark:text-slate-200/60">{post.frontmatter.pubDate}</div>
       </li>
     ))
   }
 </ul>
+ 
\ No newline at end of file
diff --git a/src/components/Card.astro b/src/components/Card.astro
index 2a52240d..23ed5996 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -11,12 +11,17 @@ let { variant, displayHr } = Astro.props;
 ---
 
 <div
-  class={`prose prose-invert max-w-3xl rounded-lg p-6 prose-h2:font-semibold prose-h2:opacity-60 ${
+  class={`prose prose-slate dark:prose-invert max-w-3xl rounded-lg p-6 prose-h2:font-semibold prose-h2:opacity-80 dark:prose-h2:opacity-60 ${
     variant === 'borderless' ? '' : 'border border-slate-200 border-opacity-20'
   }`}>
   <h1 class="mb-2">{Astro.props.title}</h1>
   <h2 class="mt-0">{Astro.props.subtitle}</h2>
-  {displayHr && <hr class="mb-8 border-sky-400/70" />}
+  {displayHr && <hr class="mb-8 border-sky-500" />}
   <h3 class="mb-1">{Astro.props.heading}</h3>
   <slot name="content" />
 </div>
+<style>
+  html.light {
+    @apply prose-headings:text-slate-700;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index bfcef576..3bd545f3 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -4,9 +4,9 @@ const name = "Bassim Shahidy";
 ---
 
 <div
-  class="footer-container mt-24 flex w-3/4 justify-center border-t-2 border-slate-600 border-opacity-70">
+  class="footer-container mt-24 flex w-3/4 justify-center border-t-2 dark:border-slate-600 border-opacity-70">
   <footer
-    class="mb-6 mt-8 flex items-center gap-4 text-sm text-slate-50 text-opacity-60">
+    class="mb-6 mt-8 flex items-center gap-4 text-sm dark:text-slate-50 text-opacity-60">
     <p>© {new Date().getFullYear()} {name}. All rights reserved.</p>
     <Social platform="github" username="avgvstvs96" />
   </footer>
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index e4363c44..37db6c0e 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -1,10 +1,11 @@
 ---
 import Button from './subComponents/Button.astro';
 import DropdownMenu from './subComponents/DropdownMenu.astro';
+import ThemeToggle from './subComponents/ThemeToggle.astro';
 ---
 
 <div
-  class="navbar-container sticky top-0 z-10 mb-8 w-full bg-slate-900 py-2 pl-4 pr-2 sm:w-5/6 sm:rounded-b-lg">
+  class="navbar-container sticky top-0 z-10 mb-8 w-full bg-slate-900 py-2 pl-4 pr-2">
   <div class="button-container flex items-center justify-between gap-6">
     <a href="/">
       <img
@@ -29,6 +30,7 @@ import DropdownMenu from './subComponents/DropdownMenu.astro';
           { name: 'Old Flask Site', url: '/flaskSite' },
         ]}
       />
+      <ThemeToggle />
     </div>
   </div>
 </div>
diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
index 50faec64..99a1ecb0 100644
--- a/src/components/TableOfContents.astro
+++ b/src/components/TableOfContents.astro
@@ -24,15 +24,43 @@ function buildToc(headings: string[]) {
 ---
 
 <nav
-  class="toc prose prose-invert sticky top-28 mt-28 w-[240px] text-[0.8em] leading-normal prose-a:text-slate-300/70 sm:pl-2 md:pl-4 xl:pl-6">
+  class="toc prose sticky top-28 mt-28 w-[240px] text-[0.8em] leading-normal dark:prose-invert prose-a:text-slate-500 sm:pl-2 md:pl-4 xl:pl-6 dark:prose-a:text-slate-300/70">
   <ul class="grid list-none">
     {
       toc.map((heading) => (
         <TableOfContentsHeading
-          className="toc-item my-[0.15rem]"
+          class="toc-item my-[0.15rem]"
           heading={heading}
         />
       ))
     }
   </ul>
 </nav>
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const heading = entry.target.querySelector('h2, h3, h4, h5');
+          if (!heading) return;
+          const id = heading.getAttribute('id');
+          const tocLink = document.querySelector(`.toc a[href="#${id}"]`);
+          if (!tocLink) return;
+
+          if (entry.intersectionRatio > 0) {
+            tocLink.classList.add('active');
+          } else {
+            tocLink.classList.remove('active');
+          }
+        });
+      },
+      {
+        rootMargin: '-10% 0px -5% 0px',
+      }
+    );
+
+    document.querySelectorAll('article section').forEach((section) => {
+      observer.observe(section);
+    });
+  });
+</script>
diff --git a/src/components/TableOfContentsHeading.astro b/src/components/TableOfContentsHeading.astro
index bca149dd..5bae3146 100644
--- a/src/components/TableOfContentsHeading.astro
+++ b/src/components/TableOfContentsHeading.astro
@@ -1,5 +1,5 @@
 ---
-const { className, heading } = Astro.props;
+const { class: className, heading } = Astro.props;
 ---
 
 <li class={className}>
@@ -18,15 +18,15 @@ const { className, heading } = Astro.props;
 </li>
 
 <style>
-  .active {
-    @apply text-sky-300/70;
+  li:has(.active) > a {
+    @apply text-sky-400 hover:text-sky-300;
   }
 
-  li:has(.active) > a {
+  :root:is(.dark) li:has(.active) > a {
     @apply text-sky-300/70 hover:text-sky-300/90;
   }
 
-  :hover > a {
-    @apply text-slate-300/90;
+  a:hover {
+    @apply text-slate-400 dark:text-slate-300/90;
   }
 </style>
diff --git a/src/components/designProject1/MinimalNavBar.astro b/src/components/designProject1/MinimalNavBar.astro
index cc25d629..77687c4d 100644
--- a/src/components/designProject1/MinimalNavBar.astro
+++ b/src/components/designProject1/MinimalNavBar.astro
@@ -5,6 +5,6 @@ import Button from '../subComponents/Button.astro';
 <header
   class="minimal-navbar-container flex min-w-full flex-row-reverse border-b border-slate-400 border-opacity-40 text-slate-200">
   <div class="button-container mx-6 my-4 flex pl-4">
-    <Button name="Home" link="/" styles="font-semibold text-opacity-100" />
+    <Button name="Home" link="/" class="font-semibold text-opacity-100" />
   </div>
 </header>
diff --git a/src/components/subComponents/Button.astro b/src/components/subComponents/Button.astro
index da2ac9a4..f03067b5 100644
--- a/src/components/subComponents/Button.astro
+++ b/src/components/subComponents/Button.astro
@@ -4,16 +4,16 @@ interface Props {
   link?: string;
   id?: string;
   showCaret?: boolean;
-  styles?: string;
+  class?: string;
 }
 
-const { name, link, id, showCaret = false, styles = '' } = Astro.props;
+const { name, link, id, showCaret = false, class: className } = Astro.props;
 ---
 
 <a
   href={link}
   id={id}
-  class=`mx-2 flex rounded-lg px-3 py-2 font-normal text-slate-200 hover:bg-slate-800 text-opacity-70 hover:text-opacity-100 transition-color duration-200 max-w-max ${styles}`>
+  class=`mx-2 flex rounded-lg px-3 py-2 font-normal text-slate-200 hover:bg-slate-800 text-opacity-70 hover:text-opacity-100 transition-color duration-200 max-w-max ${className}`>
   <button class="flex">
     {name}
     {
diff --git a/src/components/subComponents/ThemeToggle.astro b/src/components/subComponents/ThemeToggle.astro
new file mode 100644
index 00000000..43cff14e
--- /dev/null
+++ b/src/components/subComponents/ThemeToggle.astro
@@ -0,0 +1,57 @@
+---
+
+---
+
+<button id="themeToggle" class="mr-4">
+  <svg width="26px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      class="sun"
+      fill-rule="evenodd"
+      d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
+    ></path>
+    <path
+      class="moon"
+      fill-rule="evenodd"
+      d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
+    ></path>
+  </svg>
+</button>
+
+<style>
+  #themeToggle {
+    border: 0;
+    background: none;
+  }
+  .sun {
+    fill: rgb(250, 250, 250, 0.7);
+  }
+  .moon {
+    fill: transparent;
+  }
+
+  :global(.dark) .sun {
+    fill: transparent;
+  }
+  :global(.dark) .moon {
+    fill: rgb(250, 250, 250, 0.7);
+  }
+</style>
+
+<script is:inline>
+    const theme = localStorage.getItem('theme') || 'dark';
+    const element = document.documentElement;
+  
+    element.className = theme;
+    element.setAttribute('data-theme', theme === 'dark' ? 'material-theme-ocean' : 'material-theme-palenight');
+  
+    const handleToggleClick = () => {
+      const newTheme = element.className === 'dark' ? 'light' : 'dark';
+  
+      element.className = newTheme;
+      element.setAttribute('data-theme', newTheme === 'dark' ? 'material-theme-ocean' : 'material-theme-palenight');
+  
+      localStorage.setItem('theme', newTheme);
+    };
+  
+    document.getElementById('themeToggle').addEventListener('click', handleToggleClick);
+  </script>
\ No newline at end of file
diff --git a/src/layouts/MDLayout.astro b/src/layouts/MDLayout.astro
index 22899f21..83508f2b 100644
--- a/src/layouts/MDLayout.astro
+++ b/src/layouts/MDLayout.astro
@@ -38,14 +38,15 @@ import '/src/styles/global.css';
   <div class="flex justify-center">
     <div class="xl:w-[240px]"></div>
     <article
-      class="prose prose-invert max-w-xs
+      class="prose max-w-xs dark:prose-invert
       prose-h1:pt-2 prose-a:transition-colors prose-a:duration-100 hover:prose-a:text-sky-300
-      prose-code:rounded-md prose-code:bg-gray-800/75 prose-code:p-1 prose-code:font-normal prose-code:text-sky-400
-      prose-hr:border-sky-400 prose-hr:border-opacity-60
-      sm:max-w-sm md:max-w-lg lg:max-w-2xl xl:max-w-3xl">
+      prose-code:mx-0.5 prose-code:rounded-md prose-code:bg-gray-200 prose-code:px-1.5 prose-code:py-1 prose-code:font-normal prose-code:text-sky-600
+      prose-hr:border-sky-500 sm:max-w-sm
+      md:max-w-lg lg:max-w-2xl xl:max-w-3xl
+      dark:prose-code:bg-gray-800/75 dark:prose-code:text-sky-400 dark:prose-hr:border-sky-400 dark:prose-hr:border-opacity-60">
       <div class="mb-1 flex justify-start">
         <span
-          class="written-by max-w-fit rounded-md bg-sky-700 bg-opacity-25 px-2 py-1 text-sm text-sky-400 text-opacity-95">
+          class="written-by max-w-fit rounded-md bg-sky-300/25 px-2 py-1 text-sm text-sky-500 dark:bg-sky-700/25 dark:text-sky-400">
           Written by {frontmatter.author} on {frontmatter.pubDate}
         </span>
       </div>
@@ -59,10 +60,16 @@ import '/src/styles/global.css';
     </div>
   </div>
   <Footer />
-
   <style>
     html {
+      @apply bg-white;
+    }
+
+    html.dark {
       @apply bg-slate-950;
+    }
+
+    html {
       min-height: 100dvh;
       scroll-padding-top: 4rem;
     }
@@ -73,33 +80,5 @@ import '/src/styles/global.css';
     }
   </style>
 
-  <script>
-    window.addEventListener('DOMContentLoaded', () => {
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            const id = entry.target.getAttribute('id');
-            const tocLink = document.querySelector(`.toc a[href="#${id}"]`);
-
-            if (entry.isIntersecting) {
-              tocLink.classList.add('active');
-            } else {
-              tocLink.classList.remove('active');
-            }
-          });
-        },
-        {
-          rootMargin: '0px',
-          threshold: 0.1,
-        }
-      );
-
-      // Target all headings that should be observed
-      document.querySelectorAll('article h2, article h3').forEach((heading) => {
-        observer.observe(heading);
-      });
-    });
-  </script>
-
 
 </html>
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 1c18c875..49da58fb 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -35,10 +35,15 @@ import NavBar from '../components/NavBar.astro';
   </head>
   <NavBar />
   <slot />
-
   <style>
-    html {
+    :root {
+      @apply bg-white;
+    }
+
+    :root.dark {
       @apply bg-slate-950;
+    }
+    html {
       min-height: 100dvh;
     }
     body {
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 9ac06c9b..d5600798 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -6,8 +6,8 @@ import MainLayout from '../layouts/MainLayout.astro';
 <MainLayout>
   <div class="container flex flex-col items-center">
     <div class="w-fit">
-      <h1 class="text-4xl font-extrabold text-slate-100 mb-4">Blog Posts</h1>
-      <BlogIndex styles="w-[860px]" />
+      <h1 class="text-4xl font-extrabold dark:text-slate-100 mb-4 text-slate-700">Blog Posts</h1>
+      <BlogIndex class="w-[860px]" />
     </div>
   </div>
 </MainLayout>
diff --git a/src/pages/flaskSite.astro b/src/pages/flaskSite.astro
index 9418a29e..929af090 100644
--- a/src/pages/flaskSite.astro
+++ b/src/pages/flaskSite.astro
@@ -92,11 +92,17 @@ import '/src/styles/global.css';
   <body class="radial_background min-h-screen w-full">
     <div class="rotating-gradient-border h-1.5"></div>
     <div class="mr-4 mt-6 flex flex-row-reverse">
-      <Button name="Home" link="/" styles="bg-slate-800/70 border border-slate-500/70 hover:border-slate-500"/>
+      <Button
+        name="Home"
+        link="/"
+        class="border border-slate-500/30 bg-slate-900/70 hover:border-slate-500/50"
+      />
     </div>
     <div class="mx-auto max-w-5xl px-4 py-8 text-left font-mono text-white">
       <div class="rotating-gradient-border rounded-lg p-1">
-        <div id="content" class="content rounded-md bg-mycustom-100 p-12">
+        <div
+          id="content"
+          class="content prose prose-invert max-w-none rounded-md bg-mycustom-100 p-12">
           <h1 data-value="BASSIM SHAHIDY" class="mb-4 text-4xl font-bold">
             BASSIM SHAHIDY
           </h1>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ed0f680e..c32e2091 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -13,7 +13,7 @@ import BlogIndex from '../components/BlogIndex.astro';
       <Card
       title="Bassim Shahidy"
       subtitle="IT Specialist at the New York City BAR Association"
-      variant="borderless">
+      variant="bordered">
       <p slot="content">
         Based in NY, I'm an IT Professional with a wealth of experience in hardware, software management, network operations, cybersecurity, and audio-visual systems. Currently, my focus is on advancing my skillset in software engineering and web development, utilizing the latest programming technologies to enhance user experiences and system performance.
       </p>
@@ -21,9 +21,8 @@ import BlogIndex from '../components/BlogIndex.astro';
         In addition, I'm exploring AI and machine learning, seeking to understand and apply these technologies in practical scenarios. My technical repertoire also includes 3D printing—where I skillfully build and maintain printers for precision parts—and drone building, where I apply my electronics and software knowledge to create and pilot high-performance drones.
       </p>
     </Card>
-    <div class="p-6">
-      <hr class="border-sky-400/70" />
-      <div class="prose prose-invert mt-8 mb-3">
+    <div class="p-6 border-card mt-8">
+      <div class="prose dark:prose-invert mb-3">
         <h1 class="">Latest Posts</h1>
       </div>
       <BlogIndex postCount="3"/>
@@ -32,3 +31,8 @@ import BlogIndex from '../components/BlogIndex.astro';
   </body>
   <Footer />
 </MainLayout>
+<style>
+  html.light {
+    @apply prose-headings:text-slate-700;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/posts/blog1.md b/src/pages/posts/blog1.md
index f7c14cf2..68df156d 100644
--- a/src/pages/posts/blog1.md
+++ b/src/pages/posts/blog1.md
@@ -17,7 +17,7 @@ Astro enables the use of page layouts, the two main ways I've used layouts so fa
 
 ### Main Layout for Astro pages
 
-```jsx title="layouts/MainLayout.astro"
+```astro title="layouts/MainLayout.astro"
 ---
 const { title } = Astro.props;
 ---
@@ -38,14 +38,14 @@ const { title } = Astro.props;
 `const { title } = Astro.props;` Set's the title to a prop, this prop is set when `MainLayout` is called in a file. Other props can also be accessed through `Astro.props` such as `{ description }` or `{ author }`.
 
 
-```jsx title="pages/index.astro"
+```astro title="pages/index.astro"
 <MainLayout title="Bassim Shahidy">
 </MainLayout>
 ```
 
 ### Markdown Layout
 
-```jsx title="layouts/MDLayout.astro"
+```astro title="layouts/MDLayout.astro"
 ---
 const { frontmatter } = Astro.props;
 import NavBar from '../components/NavBar.astro';
@@ -76,15 +76,17 @@ A layout can be imported in both markdown and Astro files but each uses a differ
 
 ### In MD files layouts are imported at the top in frontmatter
 
-```jsx title="pages/posts/blog1.md"
+```astro title="pages/posts/blog1.md"
 ---
 layout: "../../layouts/MDLayout.astro"
 ---
 ```
 ### In Astro files layouts are imported like any other component.
 
-```jsx title="pages/index.astro"
+```astro title="pages/index.astro"
+---
 import MainLayout from '../layouts/MainLayout.astro';
+---
 ```
 
 ---
@@ -92,7 +94,7 @@ import MainLayout from '../layouts/MainLayout.astro';
 ## Nav Bar Component
 I created a Nav bar component for my site, in it I import [Button](#button-component) and [DropdownMenu](#dropdown-menu-component) components in addition to two logos, one for mobile and one for desktop. 
 
-```jsx title="components/NavBar.astro"
+```astro title="components/NavBar.astro"
 ---
 import Button from './subComponents/Button.astro';
 import DropdownMenu from './subComponents/DropdownMenu.astro';
@@ -132,7 +134,7 @@ import DropdownMenu from './subComponents/DropdownMenu.astro';
 ### Button Component
 I created a button component with variable styling including the ability to add a caret icon when the button is being used to trigger a dropdown menu. The button component accepts several props including `name`, `link`, `id`, `showCaret`, and `styles` which are used to customize the button component when it's called.
 
-```jsx title="components/subComponents/Button.astro"
+```astro title="components/subComponents/Button.astro"
 ---
 interface Props {
   name: string;
@@ -188,7 +190,7 @@ const { name, link, id, showCaret = false, styles = '' } = Astro.props;
 ### Dropdown Menu Component
 The DropdownMenu component uses the Button component to open a dropdown menu with links to project pages on my website.
 
-```jsx title="components/subComponents/DropdownMenu.astro"
+```astro title="components/subComponents/DropdownMenu.astro"
 ---
 interface Link {
   name: string;
@@ -242,7 +244,7 @@ import Button from './Button.astro';
 
 ## Card Component
 
-```jsx title="components/Card.astro"
+```astro title="components/Card.astro"
 <div class="max-w-3xl prose prose-invert">
     <h1 class="mb-2">{Astro.props.title}</h1>
     <h2 class="mt-0">{Astro.props.subtitle}</h2>
@@ -254,12 +256,12 @@ import Button from './Button.astro';
 
 In a new file called `Card.astro` I created a `<Card />` component to further modularize my code. This component accepts a `title` and `subtitle` as props, and uses the `slot` to feature any type or amount of HTML elements when the component is called, each being passed as props to the <Card /> component.
 
-```jsx frame="terminal"
+```astro frame="terminal"
 <slot name="content"></slot>
 ```
 
 `name="content"` is then used to identify all elements to be rendered within the main `<slot>` element.
-```jsx title="pages/index.astro" {4-5}
+```astro title="pages/index.astro" {4-5}
 <Card
     title="Bassim Shahidy"
     subtitle="IT Technician at the New York City BAR Association">
@@ -274,7 +276,7 @@ In a new file called `Card.astro` I created a `<Card />` component to further mo
 
 This `<Card />` component can be imported and used in any other Astro files with the ability to pass a customized title, subtitle, and content for each instance.
 
-```jsx title="pages/index.astro" {2-4, 12}
+```astro title="pages/index.astro" {2-4, 12}
 <Card
     title="Bassim Shahidy"
     subtitle="IT Technician at the New York City BAR Association">
@@ -318,7 +320,7 @@ Prose is the main utility class used to style markdown. There are a wide range o
 
 Changing the code syntax highlighting theme in Astro is easy, I just needed to add a shikiConfig object to the astro.config.mjs file and set the desired theme.
 
-```jsx title="astro.config.mjs" {6-7}
+```js title="astro.config.mjs" {6-7}
 import { defineConfig } from 'astro/config';
 import tailwind from "@astrojs/tailwind";
 
@@ -334,7 +336,7 @@ export default defineConfig({
 
 ---
 ## Creating a footer with the current year and a link to GitHub
-```jsx title="components/Footer.astro"
+```astro title="components/Footer.astro"
 ---
 import Social from "./subComponents/Social.astro";
 ---
@@ -348,7 +350,7 @@ import Social from "./subComponents/Social.astro";
 
 ### Adding icons as props to Astro components
 Within the Footer component, I created a subcomponent called Social.astro. It takes in a icon prop which accesses icons by name from the public folder.
-```jsx title="components/subComponents/Social.astro"
+```astro title="components/subComponents/Social.astro"
 ---
 const { platform, username } = Astro.props;
 ---
@@ -360,11 +362,11 @@ const { platform, username } = Astro.props;
 
 Astro utilizes JavaScript's template literals `(` `)` to embed variable values within strings.
 Variables within template literals are then denoted by the `${}` syntax. This allows dynamic composition of strings URLs, paths, or text based on `Astro.props` values.
-```jsx frame="terminal" 
+```astro frame="terminal" 
 <a href={`https://www.${platform}.com/${username}`}>
 ```
 Here, `platform` and `username` are variables passed as props which are used to create a URL string dynamically.
-```jsx frame="terminal" 
+```astro frame="terminal" 
 <img src={`/${platform}.svg`} alt={`${platform} icon`}>
 ```
 The `platform` variable is also passed as a prop to the `src` and `alt` attributes because the icon itself should be named with the platform name. There should be no need for more than one icon per platform, changes in icon color can be done with CSS.
diff --git a/src/pages/posts/blog2.md b/src/pages/posts/blog2.md
index cbafd13f..7cc0b0ac 100644
--- a/src/pages/posts/blog2.md
+++ b/src/pages/posts/blog2.md
@@ -1,20 +1,82 @@
 ---
-title: Introduction to Astro
-description: Introduction to Astro, a new front-end framework for building fast, optimized websites and applications.
+title: "Astro: The Next-Gen Front-End Framework"
+description: "Astro is a revolutionary front-end framework that is transforming the way developers build fast, optimized websites and applications. It's not just a tool, but a paradigm shift, offering a unique blend of performance optimization, developer-friendly features, and support for popular JavaScript frameworks."
 pubDate: "December 12, 2023"
 author: "Bassim Shahidy"
 tags:
 layout: "../../layouts/MDLayout.astro"
 ---
 
-Astro is a front-end framework for building fast, optimized websites and applications. It allows developers to write components using their favorite JavaScript framework, or no framework at all, and renders these components as static HTML and CSS. 
+## Astro Unveiled
+
+Astro is a fresh and innovative front-end framework that empowers developers to build lightning-fast, highly optimized websites and applications. Its unique proposition lies in its ability to deliver a zero-JavaScript experience to end-users, while still providing developers the flexibility to write and structure their code using JavaScript. This ingenious approach results in quicker load times, superior performance, and an enhanced user experience.
+
+Astro comes with out-of-the-box support for a plethora of popular JavaScript frameworks, including React, Vue, Svelte, and Preact. This means developers can leverage their existing skills and knowledge, while still reaping the performance benefits that Astro offers.
+
+### Getting Started with Astro
+
+Getting started with Astro is as simple as installing it via npm and creating a new project using the `create-astro` command. From there, developers can dive right into building their Astro-powered website or application.
+
+Astro is a breath of fresh air in the front-end development landscape, and it's definitely a must-try for any developer keen on performance optimization and modern development practices.
+
+## Astro Under the Hood
+
+Astro is a static site generator at its core, utilizing a component-based architecture to render static HTML and CSS. It supports a variety of popular JavaScript frameworks, providing developers the flexibility to choose their preferred framework or even opt for no framework at all.
 
 Astro's unique selling point is its ability to deliver a zero-JavaScript experience to the user, while still allowing developers to write and organize their code using JavaScript. This results in faster load times, better performance, and a better user experience overall.
 
-Astro supports a variety of popular JavaScript frameworks out of the box, including React, Vue, Svelte, and Preact. This means that developers can leverage their existing knowledge and skills while still benefiting from Astro's performance optimizations.
+### Astro's Rendering Techniques
+
+Astro supports a variety of rendering methods, including static HTML and CSS, server-side rendering, and client-side rendering. This flexibility allows developers to choose the best method for their project based on its specific requirements and constraints.
+
+## The Astro Toolkit
+
+Astro offers a number of developer-friendly features, including a modern build pipeline, a component-based architecture, and a flexible templating system. These features make it easy for developers to build fast, optimized websites and applications.
+
+### Modern Build Pipeline
+
+Astro uses a modern build pipeline that leverages the latest technologies and tools. This allows developers to write components using their favorite JavaScript framework, or no framework at all, and renders these components as static HTML and CSS.
+
+### Component-based Architecture
+
+Astro uses a component-based architecture that allows developers to write components using their favorite JavaScript framework, or no framework at all, and renders these components as static HTML and CSS.
+
+### Flexible Templating System
+
+Astro uses a flexible templating system that allows developers to write components using their favorite JavaScript framework, or no framework at all, and renders these components as static HTML and CSS.
+
+## The Astro Edge
+
+Astro offers a number of benefits for developers, including faster load times, better performance, and a better user experience overall. These benefits make it easy for developers to build fast, optimized websites and applications.
+
+### Faster Load Times
+
+Astro offers faster load times than other front-end frameworks. This is because it delivers a zero-JavaScript experience to the user, while still allowing developers to write and organize their code using JavaScript.
+
+### Better Performance
+
+Astro offers better performance than other front-end frameworks. This is because it delivers a zero-JavaScript experience to the user, while still allowing developers to write and organize their code using JavaScript.
+
+### Better User Experience
+
+Astro offers a better user experience than other front-end frameworks. This is because it delivers a zero-JavaScript experience to the user, while still allowing developers to write and organize their code using JavaScript.
+
+## Astro in Action
+
+Astro can be used for a variety of use cases, including static websites, blogs, and web applications. This makes it easy for developers to build fast, optimized websites and applications.
+
+### Static Websites
+
+Astro can be used to build static websites. This is because it delivers a zero-JavaScript experience to the user, while still allowing developers to write and organize their code using JavaScript.
+
+### Blogs
+
+Astro can be used to build blogs. This is because it delivers a zero-JavaScript experience to the user, while still allowing developers to write and organize their code using JavaScript.
+
+### Web Applications
 
-In addition to its performance benefits, Astro also offers a number of developer-friendly features. These include a modern build pipeline, a component-based architecture, and a flexible templating system. 
+Astro can be used to build web applications. This is because it delivers a zero-JavaScript experience to the user, while still allowing developers to write and organize their code using JavaScript.
 
-To get started with Astro, developers can install it via npm and create a new project using the `create-astro` command. From there, they can start building their Astro-powered website or application right away.
+## Conclusion
 
-Astro is an exciting new tool in the front-end development landscape, and it's definitely worth checking out for any developer interested in performance optimization and modern development practices.
+Astro is a new front-end framework for building fast, optimized websites and applications. It allows developers to write components using their favorite JavaScript framework, or no framework at all, and renders these components as static HTML and CSS. With its unique approach to JavaScript and its focus on performance, Astro is a tool that every modern developer should consider adding to their toolkit.
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 43d2028a..24f99275 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,3 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .border-card {
+    @apply border border-slate-200 border-opacity-20 rounded-lg;
+  }
+}
+
 :root {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   /* scrollbar-color: hsla(0, 0%, 60%, 0.2) transparent;
@@ -23,4 +33,4 @@
 
 ::-webkit-scrollbar-thumb:active {
   background-color: hsla(0, 0%, 60%, 0.3);
-}
\ No newline at end of file
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index baaad138..372b9b71 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	darkMode: 'class',
 	theme: {
 		extend: {
 			colors: {