diff --git a/src/app/blog/[slug]/page.jsx b/src/app/blog/[slug]/page.jsx
index 545c272..1d667ba 100644
--- a/src/app/blog/[slug]/page.jsx
+++ b/src/app/blog/[slug]/page.jsx
@@ -10,14 +10,13 @@ export async function generateStaticParams() {
 export default async function BlogPage({ params }) {
   const blog = await getBlogBySlug(params.slug);
   return (
-    <main className="prose mx-auto">
+    <section className="prose mx-auto">
       <article>
         <h1>{blog.frontmatter.title}</h1>
         <p>{blog.frontmatter.author}</p>
-        <p>{blog.frontmatter.publishDate}</p>
-        <article>{blog.content}</article>
+        <p>{blog.frontmatter.date}</p>
+        <div>{blog.content}</div>
       </article>
-    </main>
+    </section>
   );
 }
-
diff --git a/src/app/blog/page.jsx b/src/app/blog/page.jsx
index 47154b0..c36a5fa 100644
--- a/src/app/blog/page.jsx
+++ b/src/app/blog/page.jsx
@@ -6,16 +6,27 @@ export default async function BlogsPage() {
   const blogs = await Promise.all(slugs.map(({ slug }) => getBlogBySlug(slug)));
 
   return (
-    <main>
+    <section className="py-9">
       {blogs.map((blog) => (
-        <article key={blog.slug} className="grid grid-cols-4 text-3xl">
-          <h1>{blog.frontmatter.title}</h1>
-          <p>{blog.frontmatter.author}</p>
-          <p>{blog.frontmatter.publishDate}</p>
-          <Link href={`/blog/${blog.slug}`}>Read More</Link>
+        <article key={blog.slug} className="flex flex-col py-3">
+          <Link href={`/blog/${blog.slug}`}>
+            <div className="flex flex-col items-center pb-3 mb-3">
+              <h1 className="text-2xl font-bold mb-1">{blog.frontmatter.title}</h1>
+              <span className="text-light-yellow-1 dark:text-dark-yellow-1">{blog.frontmatter.description}</span>
+              <div className="text-lg text-gray-500">
+                {blog.frontmatter.tags && blog.frontmatter.tags.length > 0 && (
+                  <>
+                    <span className="mr-2 text-light-blue-1 dark:text-dark-blue-1">{blog.frontmatter.date}</span>
+                    {blog.frontmatter.tags.map((tag, index) => (
+                      <span key={index} className="mr-2 text-light-orange-1 dark:text-dark-orange-1">#{tag}</span>
+                    ))}
+                  </>
+                )}
+              </div>
+            </div>
+          </Link>
         </article>
       ))}
-    </main>
+    </section>
   );
 }
-
diff --git a/src/app/blog/posts/corebooting-my-thinkpad.mdx b/src/app/blog/posts/corebooting-my-thinkpad.mdx
new file mode 100644
index 0000000..fd17e6a
--- /dev/null
+++ b/src/app/blog/posts/corebooting-my-thinkpad.mdx
@@ -0,0 +1,66 @@
+---
+title: "I corebooted my T440p, here's how I did it."
+author: "Timothy Pidashev"
+date: "2024/06/05"
+description: "This is a sample MDX file."
+tags: ["coreboot", "t440p", "dgpu"]
+---
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+*Italic Text*
+
+_Italic Text_
+
+**Bold Text**
+
+__Bold Text__
+
+* Bullet List
+  * Item 1
+  * Item 2
+    * Subitem 1
+    * Subitem 2
+
+1. Numbered List
+   1. Item 1
+   2. Item 2
+      - Subitem 1
+      - Subitem 2
+
+[Link Text](https://example.com)
+
+![Image Alt Text](https://example.com/image.jpg)
+
+> Blockquote
+>
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+`Inline Code`
+
+| Table Header 1 | Table Header 2 |
+|----------------|----------------|
+| Table Row 1    | Table Row 1    |
+| Table Row 2    | Table Row 2    |
+
+<sup>Superscript Text</sup>
+
+<sub>Subscript Text</sub>
+
+<mark>Highlighted Text</mark>
+
+<ins>Underlined Text</ins>
+
+<del>Strikethrough Text</del>
+
+<abbr title="Abbreviation">Abbreviation</abbr>
diff --git a/src/app/blog/posts/my-perfect-dev-environment.mdx b/src/app/blog/posts/my-perfect-dev-environment.mdx
new file mode 100644
index 0000000..82e3077
--- /dev/null
+++ b/src/app/blog/posts/my-perfect-dev-environment.mdx
@@ -0,0 +1,9 @@
+---
+title: "My perfect development environment."
+author: "Timothy Pidashev"
+date: "2024/06/07"
+description: "This is another sample mdx file."
+tags: ["dwl", "wayland", "gruvbox"]
+---
+
+# FDSLKJFLKSFJL
diff --git a/src/app/blog/posts/ssg.mdx b/src/app/blog/posts/ssg.mdx
deleted file mode 100644
index 8276fcb..0000000
--- a/src/app/blog/posts/ssg.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: 'When to Use Static Generation v.s. Server-side Rendering'
-author: "Timothy Pidashev"
-date: '2020-01-02'
----
-
-We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.
-
-You can use Static Generation for many types of pages, including:
-
-- Marketing pages
-- Blog posts
-- E-commerce product listings
-- Help and documentation
-
-```jsx
-import React, { useState } from 'react';
-
-function Counter() {
-  const [count, setCount] = useState(0);
-
-  const increment = () => {
-    setCount(count + 1);
-  };
-
-  const decrement = () => {
-    setCount(count - 1);
-  };
-
-  return (
-    <div>
-      <h1>Count: {count}</h1>
-      <button onClick={increment}>Increment</button>
-      <button onClick={decrement}>Decrement</button>
-    </div>
-  );
-}
-
-export default Counter;
-```
-You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.
-
-On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.
-
-In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.
-
-```jsx
-  const [count, setCount] = useState(0);
-
-  const increment = () => {
-    setCount(count + 1);
-  };
-
-  const decrement = () => {
-    setCount(count - 1);
-  };
-
-  return (
-    <div>
-      <h1>Count: {count}</h1>
-      <button onClick={increment}>Increment</button>
-      <button onClick={decrement}>Decrement</button>
-    </div>
-  );
-}
-
-export default Counter;
-```
-You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.
-
-On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.
-
-In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.
-
diff --git a/src/components/footer/content.jsx b/src/components/footer/content.jsx
index d207ccf..68dc8aa 100644
--- a/src/components/footer/content.jsx
+++ b/src/components/footer/content.jsx
@@ -2,13 +2,15 @@
 
 import Link from "next/link";
 import { motion } from "framer-motion";
+import ThemeToggle from "@/components/ui/theme-toggle";
 
 const Items = [
-  { id: 0, href: "https://add-later", label: "Contact", color: "green" },
-  { id: 1, href: "https://github.com/timmypidashev", label: "Github", color: "yellow" },
-  { id: 3, href: "https://linkedin.com/in/timothy-pidashev-9055922a7", label: "Linkedin", color: "blue" },
-  { id: 4, href: "https://instagram.com/timmypidashev", label: "Instagram", color: "purple" },
-  { id: 5, href: "https://github.com/timmypidashev/web", label: "Source", color: "aqua" },
+  { id: 0, href: "https://add-later", label: "Contact", color: "green", component: false },
+  { id: 1, href: "https://github.com/timmypidashev", label: "Github", color: "yellow", component: false },
+  { id: 3, href: "https://linkedin.com/in/timothy-pidashev-9055922a7", label: "Linkedin", color: "blue", component: false },
+  { id: 4, href: "https://instagram.com/timmypidashev", label: "Instagram", color: "purple", component: false },
+  { id: 5, href: "https://github.com/timmypidashev/web", label: "Source", color: "aqua", component: false },
+  { id: 6, color: "foreground", component: true },
 ];
 
 const ItemColors = {
@@ -49,7 +51,11 @@ function Content() {
               inline-block
               ${ItemColors[item.color]} dark:${ItemColors[item.color]}
           `}>
-            <Link href={item.href} target="_blank" rel="noopener noreferrer">{item.label}</Link>
+            {item.component ? (
+              <ThemeToggle />
+            ) : (
+              <Link href={item.href} target="_blank" rel="noopener noreferrer">{item.label}</Link>
+            )}
           </motion.div>
         ))}
       </div>
diff --git a/src/components/footer/index.jsx b/src/components/footer/index.jsx
index 3ef6220..e925e31 100644
--- a/src/components/footer/index.jsx
+++ b/src/components/footer/index.jsx
@@ -1,4 +1,3 @@
-import Container from "@/components/ui/container";
 import Content from "@/components/footer/content";
 
 function Footer() {
diff --git a/src/components/ui/container.jsx b/src/components/ui/container.jsx
index 51067e2..b552239 100644
--- a/src/components/ui/container.jsx
+++ b/src/components/ui/container.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const Container = ({ children }) => {
   return ( 
-    <div className="mx-auto w-full max-w-3xl">
+    <div className="mx-auto w-full max-w-5xl">
       {children}
     </div>
    );
diff --git a/src/lib/mdx.js b/src/lib/mdx.js
index 3d4796c..2318c63 100644
--- a/src/lib/mdx.js
+++ b/src/lib/mdx.js
@@ -19,8 +19,6 @@ export async function getBlogBySlug(slug) {
       },
     },
   });
-  console.log("Frontmatter:", frontmatter); // Debug log
-  console.log("Content:", content); // Debug log
   return { frontmatter, content, slug };
 }
 
diff --git a/src/style/mdxTheme.js b/src/style/mdxTheme.js
new file mode 100644
index 0000000..dd1365e
--- /dev/null
+++ b/src/style/mdxTheme.js
@@ -0,0 +1,98 @@
+// theme.js
+
+// Define the light theme colors
+const lightColors = {
+  text: '#000000',
+  background: '#ffffff',
+  foreground: '#ebdbb2',
+  red: {
+    1: '#cc241d',
+    2: '#fb4934',
+  },
+  orange: {
+    1: '#d65d0e',
+    2: '#fe8019',
+  },
+  green: {
+    1: '#98971a',
+    2: '#b8bb26',
+  },
+  yellow: {
+    1: '#d79921',
+    2: '#fabd2f',
+  },
+  blue: {
+    1: '#458588',
+    2: '#83a598',
+  },
+  purple: {
+    1: '#b16286',
+    2: '#d3869b',
+  },
+  aqua: {
+    1: '#689d6a',
+    2: '#8ec07c',
+  },
+};
+
+// Define the dark theme colors
+const darkColors = {
+  text: '#ebdbb2',
+  background: '#000000',
+  foreground: '#ebdbb2',
+  red: {
+    1: '#cc241d',
+    2: '#fb4934',
+  },
+  orange: {
+    1: '#d65d0e',
+    2: '#fe8019',
+  },
+  green: {
+    1: '#98971a',
+    2: '#b8bb26',
+  },
+  yellow: {
+    1: '#d79921',
+    2: '#fabd2f',
+  },
+  blue: {
+    1: '#458588',
+    2: '#83a598',
+  },
+  purple: {
+    1: '#b16286',
+    2: '#d3869b',
+  },
+  aqua: {
+    1: '#689d6a',
+    2: '#8ec07c',
+  },
+};
+
+// Define the common styles for both light and dark themes
+const commonStyles = {
+  fonts: {
+    body: "ComicCode",
+    heading: "ComicCode",
+  },
+  fontWeights: {
+    heading: 700,
+  },
+  // Add other common styles as needed
+};
+
+// Combine the light and dark themes
+const theme = {
+  light: {
+    colors: lightColors,
+    ...commonStyles,
+  },
+  dark: {
+    colors: darkColors,
+    ...commonStyles,
+  },
+};
+
+export default theme;
+