diff --git a/astro.config.mjs b/astro.config.mjs
index 002886c..1168d9a 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,17 +1,36 @@
+import rehypePrettyCode from "rehype-pretty-code";
 import { defineConfig } from "astro/config";
 import partytown from "@astrojs/partytown";
 import tailwind from "@astrojs/tailwind";
 import sitemap from "@astrojs/sitemap";
 import compress from "astro-compress";
+import remarkToc from "remark-toc";
 import mdx from "@astrojs/mdx";
 
+const options = {
+  theme: "one-dark-pro",
+  onVisitLine(node) {
+    // Prevent lines from collapsing in `display: grid` mode, and allow empty lines to be copy/pasted
+    if (node.children.length === 0) {
+      node.children = [{ type: "text", value: " " }];
+    }
+  },
+  onVisitHighlightedLine(node) {
+    node.properties.className.push("highlighted");
+  },
+  onVisitHighlightedWord(node) {
+    node.properties.className = ["word"];
+  },
+};
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://nir.galons.io",
   integrations: [sitemap(), tailwind({ config: { applyBaseStyles: false } }), partytown(), mdx(), compress()],
   markdown: {
-    shikiConfig: {
-      theme: "dracula-soft",
-    },
+    rehypePlugins: [[rehypePrettyCode, options]],
+    syntaxHighlight: false,
+    remarkPlugins: [remarkToc],
+    extendDefaultPlugins: true, // Preserve Astro's default plugins: GitHub-flavored Markdown and Smartypants
   },
 });
diff --git a/package-lock.json b/package-lock.json
index cc068b4..b75b8c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,8 @@
         "algoliasearch": "^4.14.2",
         "astro": "^1.2.6",
         "astro-compress": "^1.0.12",
+        "rehype-pretty-code": "^0.4.0",
+        "remark-toc": "^8.0.1",
         "tailwindcss": "^3.1.8"
       },
       "devDependencies": {
@@ -1318,6 +1320,16 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/@types/extend": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/extend/-/extend-3.0.1.tgz",
+      "integrity": "sha512-R1g/VyKFFI2HLC1QGAeTtCBWCo6n75l41OnsVYNbmKG+kempOESaodf6BeJyUM3Q0rKa/NQcTHbB2+66lNnxLw=="
+    },
+    "node_modules/@types/github-slugger": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@types/github-slugger/-/github-slugger-1.3.0.tgz",
+      "integrity": "sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g=="
+    },
     "node_modules/@types/hast": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
@@ -5309,6 +5321,52 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-toc": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-toc/-/mdast-util-toc-6.1.0.tgz",
+      "integrity": "sha512-0PuqZELXZl4ms1sF7Lqigrqik4Ll3UhbI+jdTrfw7pZ9QPawgl7LD4GQ8MkU7bT/EwiVqChNTbifa2jLLKo76A==",
+      "dependencies": {
+        "@types/extend": "^3.0.0",
+        "@types/github-slugger": "^1.0.0",
+        "@types/mdast": "^3.0.0",
+        "extend": "^3.0.0",
+        "github-slugger": "^1.0.0",
+        "mdast-util-to-string": "^3.1.0",
+        "unist-util-is": "^5.0.0",
+        "unist-util-visit": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-toc/node_modules/unist-util-visit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-3.1.0.tgz",
+      "integrity": "sha512-Szoh+R/Ll68QWAyQyZZpQzZQm2UPbxibDvaY8Xc9SUtYgPsDzx5AWSk++UUt2hJuow8mvwR+rG+LQLw+KsuAKA==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0",
+        "unist-util-visit-parents": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-toc/node_modules/unist-util-visit-parents": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-4.1.1.tgz",
+      "integrity": "sha512-1xAFJXAKpnnJl8G7K5KgU7FY55y3GcLIXqkzUj5QF/QVP7biUm0K0O2oqVkYsdjzJKifYeWn9+o6piAK2hGSHw==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.28",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
@@ -6456,6 +6514,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/parse-numeric-range": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
+      "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ=="
+    },
     "node_modules/parse-passwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
@@ -7078,6 +7141,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/rehype-pretty-code": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.4.0.tgz",
+      "integrity": "sha512-Bp91nfo4blpgCXlvGP1hsG+kRFfjqBVU09o1RFcnNA62u+iIzJiJRGzpfBj4FaItq7CEQL5ASGB7vLxN5xCvyA==",
+      "dependencies": {
+        "parse-numeric-range": "^1.3.0"
+      },
+      "engines": {
+        "node": "^12.16.0 || >=13.2.0"
+      },
+      "peerDependencies": {
+        "shiki": "*"
+      }
+    },
     "node_modules/rehype-raw": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-6.1.1.tgz",
@@ -7230,6 +7307,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-toc": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/remark-toc/-/remark-toc-8.0.1.tgz",
+      "integrity": "sha512-7he2VOm/cy13zilnOTZcyAoyoolV26ULlon6XyCFU+vG54Z/LWJnwphj/xKIDLOt66QmJUgTyUvLVHi2aAElyg==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-toc": "^6.0.0",
+        "unified": "^10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -10412,6 +10503,16 @@
         "@types/estree": "*"
       }
     },
+    "@types/extend": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/extend/-/extend-3.0.1.tgz",
+      "integrity": "sha512-R1g/VyKFFI2HLC1QGAeTtCBWCo6n75l41OnsVYNbmKG+kempOESaodf6BeJyUM3Q0rKa/NQcTHbB2+66lNnxLw=="
+    },
+    "@types/github-slugger": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@types/github-slugger/-/github-slugger-1.3.0.tgz",
+      "integrity": "sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g=="
+    },
     "@types/hast": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
@@ -13200,6 +13301,42 @@
       "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz",
       "integrity": "sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA=="
     },
+    "mdast-util-toc": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-toc/-/mdast-util-toc-6.1.0.tgz",
+      "integrity": "sha512-0PuqZELXZl4ms1sF7Lqigrqik4Ll3UhbI+jdTrfw7pZ9QPawgl7LD4GQ8MkU7bT/EwiVqChNTbifa2jLLKo76A==",
+      "requires": {
+        "@types/extend": "^3.0.0",
+        "@types/github-slugger": "^1.0.0",
+        "@types/mdast": "^3.0.0",
+        "extend": "^3.0.0",
+        "github-slugger": "^1.0.0",
+        "mdast-util-to-string": "^3.1.0",
+        "unist-util-is": "^5.0.0",
+        "unist-util-visit": "^3.0.0"
+      },
+      "dependencies": {
+        "unist-util-visit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-3.1.0.tgz",
+          "integrity": "sha512-Szoh+R/Ll68QWAyQyZZpQzZQm2UPbxibDvaY8Xc9SUtYgPsDzx5AWSk++UUt2hJuow8mvwR+rG+LQLw+KsuAKA==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^5.0.0",
+            "unist-util-visit-parents": "^4.0.0"
+          }
+        },
+        "unist-util-visit-parents": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-4.1.1.tgz",
+          "integrity": "sha512-1xAFJXAKpnnJl8G7K5KgU7FY55y3GcLIXqkzUj5QF/QVP7biUm0K0O2oqVkYsdjzJKifYeWn9+o6piAK2hGSHw==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^5.0.0"
+          }
+        }
+      }
+    },
     "mdn-data": {
       "version": "2.0.28",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
@@ -13917,6 +14054,11 @@
         "unist-util-visit-children": "^1.0.0"
       }
     },
+    "parse-numeric-range": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
+      "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ=="
+    },
     "parse-passwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
@@ -14336,6 +14478,14 @@
         "unified": "^10.0.0"
       }
     },
+    "rehype-pretty-code": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.4.0.tgz",
+      "integrity": "sha512-Bp91nfo4blpgCXlvGP1hsG+kRFfjqBVU09o1RFcnNA62u+iIzJiJRGzpfBj4FaItq7CEQL5ASGB7vLxN5xCvyA==",
+      "requires": {
+        "parse-numeric-range": "^1.3.0"
+      }
+    },
     "rehype-raw": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-6.1.1.tgz",
@@ -14446,6 +14596,16 @@
         "unified": "^10.0.0"
       }
     },
+    "remark-toc": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/remark-toc/-/remark-toc-8.0.1.tgz",
+      "integrity": "sha512-7he2VOm/cy13zilnOTZcyAoyoolV26ULlon6XyCFU+vG54Z/LWJnwphj/xKIDLOt66QmJUgTyUvLVHi2aAElyg==",
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-toc": "^6.0.0",
+        "unified": "^10.0.0"
+      }
+    },
     "require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
diff --git a/package.json b/package.json
index d29e8e2..732ee11 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,8 @@
     "algoliasearch": "^4.14.2",
     "astro": "^1.2.6",
     "astro-compress": "^1.0.12",
+    "rehype-pretty-code": "^0.4.0",
+    "remark-toc": "^8.0.1",
     "tailwindcss": "^3.1.8"
   },
   "devDependencies": {
diff --git a/public/posts/2022/github-email/contributions-heat-map.webp b/public/posts/2022/github-email/contributions-heat-map.webp
deleted file mode 100644
index 3885801..0000000
Binary files a/public/posts/2022/github-email/contributions-heat-map.webp and /dev/null differ
diff --git a/public/posts/2022/github-email/github-contributions-graph.webp b/public/posts/2022/github-email/github-contributions-graph.webp
new file mode 100644
index 0000000..e2b886f
Binary files /dev/null and b/public/posts/2022/github-email/github-contributions-graph.webp differ
diff --git a/public/posts/2022/github-email/github-private-email.webp b/public/posts/2022/github-email/github-private-email.webp
new file mode 100644
index 0000000..a2b39b0
Binary files /dev/null and b/public/posts/2022/github-email/github-private-email.webp differ
diff --git a/public/posts/2022/github-email/google-email.webp b/public/posts/2022/github-email/google-email.webp
new file mode 100644
index 0000000..25e7493
Binary files /dev/null and b/public/posts/2022/github-email/google-email.webp differ
diff --git a/public/terminal-dots.svg b/public/terminal-dots.svg
new file mode 100644
index 0000000..5eef600
--- /dev/null
+++ b/public/terminal-dots.svg
@@ -0,0 +1,5 @@
+<svg width="70px" height="18px" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="10" cy="9" r="8" fill="#ed6b60" stroke="#ce5347" />
+  <circle cx="35" cy="9" r="8" fill="#f5be4f" stroke="#d6a243" />
+  <circle cx="60" cy="9" r="8" fill="#62c554" stroke="#58a942" />
+</svg>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 96a6914..aa8a39e 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,18 +1,44 @@
-<div class="flex w-full items-center justify-between p-4">
-  <a href="/">
-    <span class="sr-only">Nir Galon</span>
-    <i class="h-10 w-10 fa-solid fa-user-astronaut"></i>
-  </a>
-  <div class="ml-10 space-x-8 lg:block">
-    <a href="/blog" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300">Blog</a>
+<div class="flex flex-col md:flex-row justify-between md:items-center p-4">
+  <div class="flex justify-between items-center">
+    <a href="/">
+      <span class="sr-only">Nir Galon</span>
+      <i class="h-10 w-10 fa-solid fa-user-astronaut"></i>
+    </a>
+    <span id="openMenu" onclick="toggleMenu()" class="md:hidden"><i class="fa-regular fa-bars w-8 h-8"></i></span>
+    <span id="closeMenu" onclick="toggleMenu()" class="hidden md:hidden"><i class="fa-regular fa-xmark w-8 h-8"></i></span>
+  </div>
+  <div
+    id="menu"
+    class="text-center space-y-4 py-2 md:py-0 mt-2 md:mt-2 md:space-y-0 md:ml-10 md:space-x-8 hidden md:block border-t-2 md:border-t-0 border-zinc-800"
+  >
+    <div class="md:hidden">
+      <div class="relative mt-1 rounded-md shadow-sm">
+        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+          <i class="fa-regular fa-magnifying-glass"></i>
+        </div>
+        <input
+          type="text"
+          name="search"
+          id="search"
+          class="w-full rounded-md pl-10 py-2 px-4 bg-zinc-200 dark:bg-zinc-700 border-transparent focus:border-zinc-50 focus:dark:border-zinc-800 focus:ring-zinc-50 focus:dark:ring-zinc-800"
+          placeholder="Search titles or content"
+        />
+      </div>
+    </div>
+
+    <a href="/blog" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300 block md:inline-block">Blog</a>
 
-    <a href="/categories" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300">Categories</a>
+    <a href="/categories" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300 block md:inline-block"
+      >Categories</a
+    >
 
-    <a href="/about" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300">About</a>
+    <a href="/about" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300 block md:inline-block">About</a>
 
-    <a href="/contact" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300">Contact</a>
+    <a href="/contact" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300 block md:inline-block"
+      >Contact</a
+    >
 
-    <button id="theme-button" onclick="handleClick()" aria-label="change theme color"></button>
+    <button id="theme-button" onclick="handleClick()" aria-label="change theme color" class="block md:inline-block mx-auto"></button>
   </div>
 
   <script is:inline>
@@ -33,5 +59,22 @@
         document.getElementById("theme-button").innerHTML = "<i class='fa-solid fa-sun'></<i>";
       }
     };
+
+    const toggleMenu = () => {
+      const menuElement = document.getElementById("menu");
+      const openMenu = document.getElementById("openMenu");
+      const closeMenu = document.getElementById("closeMenu");
+      if (menuElement.classList.contains("hidden")) {
+        menuElement.classList.remove("hidden");
+
+        openMenu.classList.add("hidden");
+        closeMenu.classList.remove("hidden");
+      } else {
+        menuElement.classList.add("hidden");
+
+        openMenu.classList.remove("hidden");
+        closeMenu.classList.add("hidden");
+      }
+    };
   </script>
 </div>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 680337d..0085499 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -14,6 +14,7 @@ export interface Props {
 
 const {
   content: { title, pubDate, author, authorLink, category, featuredImage },
+  headings,
 } = Astro.props;
 
 const WORDS_PER_MINUTE = 200;
@@ -69,13 +70,13 @@ const readTime = Math.ceil(numberOfWords / WORDS_PER_MINUTE);
     </div>
 
     <div class="flex">
-      <div class="w-3/4">
+      <div class="w-3/4 content">
         <img src={featuredImage} class="object-cover my-2 w-full max-h-96" />
         <div class="content mb-8">
           <slot />
         </div>
 
-        <script
+        <!-- <script
           is:inline
           src="https://giscus.app/client.js"
           data-repo="nirgn975/portfolio"
@@ -92,16 +93,18 @@ const readTime = Math.ceil(numberOfWords / WORDS_PER_MINUTE);
           data-loading="lazy"
           crossorigin="anonymous"
           async
-        ></script>
+        ></script> -->
       </div>
 
       <div class="w-1/4 sticky top-0 h-fit mt-2 ml-4 pl-4 border-l-4 border-zinc-300 dark:border-zinc-700">
         <p class="text-lg font-semibold mb-2">CONTENTS</p>
-        <p>1. Request a Quota</p>
-        <p>2. Create the VM</p>
-        <p>3. Install CUDA and Hashcat</p>
-        <p>4. Let's get down to business</p>
-        <p>5. Summary</p>
+        {
+          headings.map((header: Record<"depth" | "slug" | "text", string>) => (
+            <a href={`#${header.slug}`} class="block my-1 hover:text-sky-500" style={`padding-left: ${(Number(header.depth) - 2) * 1.25}rem`}>
+              {header.text}
+            </a>
+          ))
+        }
       </div>
     </div>
   </article>
@@ -109,57 +112,84 @@ const readTime = Math.ceil(numberOfWords / WORDS_PER_MINUTE);
 
 <style is:global>
   .content img {
-    margin: 0.5rem auto;
+    @apply m-2 mx-auto;
   }
 
   .content p {
-    margin: 0.5rem 0;
+    @apply my-2;
   }
 
   .content h2 {
-    font-size: 1.5rem;
-    margin-top: 1.2rem;
-    margin-bottom: 0.6rem;
-    font-weight: bolder;
+    @apply text-2xl mt-5 mb-3 font-bold;
   }
 
-  .content p > code {
-    color: #e74c3c;
-    background: #f5f5f5;
-    padding: 0 0.4rem;
+  .content h3 {
+    @apply text-xl mt-3 mb-2 font-bold;
   }
 
-  .dark .content p > code {
-    color: #e5bf78;
-    background: #272c34;
-    padding: 0 0.4rem;
+  .content :not(pre) > code {
+    @apply bg-[#f5f5f5] text-[#e74c3c] px-2;
+  }
+
+  .dark .content :not(pre) > code {
+    @apply bg-[#272c34] text-[#e5bf78] px-2;
   }
 
   .content a {
-    color: #0ea5e9;
+    @apply text-[#0ea5e9];
   }
 
   .content a:hover {
-    color: #38bdf8;
+    @apply text-[#38bdf8];
+  }
+
+  code {
+    counter-reset: line;
+    /* counter-reset: line 100; */
   }
 
-  .content pre {
-    padding: 0.75rem;
-    margin: 0.75rem 0;
+  code[data-line-numbers] > .line::before {
+    content: counter(line);
+    counter-increment: line;
+    @apply inline-block text-right w-4 mr-5 text-zinc-600;
   }
 
-  code {
-    counter-reset: step;
-    counter-increment: step 0;
-  }
-
-  code .line::before {
-    content: counter(step);
-    counter-increment: step;
-    width: 1rem;
-    margin-right: 1.5rem;
-    display: inline-block;
-    text-align: right;
-    color: rgba(115, 138, 148, 0.4);
+  /* code[data-line-numbers] > .line:first-of-type::before {
+    counter-set: line 100;
+  } */
+
+  code[data-line-numbers][data-language="bash"] > .line::before {
+    content: "$";
+  }
+
+  div[data-rehype-pretty-code-title] {
+    @apply h-10 rounded-t-md pl-4 text-zinc-800 dark:text-zinc-300 flex items-center font-semibold bg-[#c8c8ff0d];
+  }
+
+  div[data-rehype-pretty-code-title]::before {
+    content: url("/terminal-dots.svg");
+    @apply mr-8 pt-2;
+  }
+
+  div[data-rehype-pretty-code-fragment] pre {
+    @apply relative rounded-b-md m-0 bg-[#c8c8ff0d];
+  }
+
+  div[data-rehype-pretty-code-fragment] .line {
+    @apply pl-2;
+  }
+
+  div[data-rehype-pretty-code-fragment] code {
+    @apply flex flex-col overflow-x-scroll pb-2;
+  }
+
+  div[data-rehype-pretty-code-fragment] .highlighted {
+    @apply bg-[#c8c8ff1a] border-l-[#60a5fa];
+  }
+
+  pre[data-language]:after {
+    /* @apply absolute right-3 bottom-2 text-zinc-600; */
+    @apply absolute right-3 -top-8 text-zinc-600;
+    content: attr(data-language);
   }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 372f66f..0b5fe5a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -78,6 +78,7 @@ const { title } = Astro.props as Props;
   html {
     font-family: "Helvetica Neue", sans-serif !important;
     @apply h-full;
+    @apply scroll-smooth;
   }
   body {
     @apply h-full;
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 3d3a7b6..131ac4c 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -425,7 +425,7 @@ repos = repos.sort((a, b) => Number(b.stars) - Number(a.stars));
       <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         {
           repos.map((repo) => (
-            <div class="flex flex-col bg-zinc-200 dark:bg-zinc-700 rounded-sm">
+            <div class="flex flex-col bg-zinc-200 dark:bg-zinc-700 rounded-md">
               <a href={repo.url} target="_blank" class="p-4">
                 <h3 class="text-lg font-medium">{repo.name}</h3>
               </a>
diff --git a/src/pages/blog/2022/design-system.md b/src/pages/blog/2022/design-system.md
index 061b438..a07d054 100644
--- a/src/pages/blog/2022/design-system.md
+++ b/src/pages/blog/2022/design-system.md
@@ -29,8 +29,8 @@ But first, what is a "Design System"? It's a little different if you ask a desig
 
 The first thing we need to do is actually create a regular [Vue.js](https://vuejs.org) project
 
-```bash
-$ npm init vue@latest
+```bash showLineNumbers title=" "
+npm init vue@latest
 ```
 
 You'll be presented with prompts for a number of optional features, choose whatever you want, it's not importent for the rest of the tutorial. But, if you want to see my choices - they're in the screenshot below.
@@ -43,14 +43,14 @@ After we have an empty vue.js project (I called mine `daisy` because Daisy the D
 
 The next setp is to install [Storybook](https://storybook.js.org). The current version is 6.x, but I choose to install the beta (7.x) version because it's close enough to release and there are a lot of changes that integrate well with our setup (like vite and typescript support out of the box).
 
-```bash
-$ npx sb@next init --builder=vite
+```bash showLineNumbers title=" "
+npx sb@next init --builder=vite
 ```
 
 And once the Storybook CLI done running and doing it's thing, we can run it and see our storybook default components and documentation in action
 
-```bash
-$ npm run storybook
+```bash showLineNumbers title=" "
+npm run storybook
 ```
 
 ![Storybook](/posts/2022/design-system/storybook.webp "Storybook")
@@ -59,14 +59,14 @@ $ npm run storybook
 
 The last thing we need to do is to add [Tailwind CSS](https://tailwindcss.com) support to our Vue.js components and as well as our Storybook UI. Adding it to the vuejs project is really easy
 
-```bash
-$ npm install -D tailwindcss postcss autoprefixer
-$ npx tailwindcss init -p
+```bash showLineNumbers title=" "
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
 ```
 
 And all you have left to do is to edit your `content` section (in `tailwind.config.js` file) to include the vuejs files
 
-```js
+```js showLineNumbers title="tailwind.js" {3}
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{vue,js,ts,jsx,tsx}"],
@@ -79,7 +79,7 @@ module.exports = {
 
 Lastly, include the Tailwind directives to our CSS by creating a new `style.css` file inside the `src` directory and add to it the @tailwind directives:
 
-```css
+```css showLineNumbers title="style.css"
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -91,13 +91,13 @@ Now if you'll lunch your Vue.js app (`npm run dev`) Tailwind class will work, bu
 
 To fix this we'll use a [Storybook addon](https://storybook.js.org/addons/@storybook/addon-postcss) to run the PostCSS preprocessor against our stories
 
-```bash
-$ npm install -D @storybook/addon-postcss
+```bash showLineNumbers title=" "
+npm install -D @storybook/addon-postcss
 ```
 
-then add it to the `.storybook/main.js` file
+then add it
 
-```js
+```js showLineNumbers title=".storybook/main.js" {8-15}
 const path = require("path");
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
@@ -121,9 +121,9 @@ module.exports = {
 };
 ```
 
-and also import the `style.css` file in `.storybook/preview.js`
+and also import the `style.css` file
 
-```js
+```js showLineNumbers title=".storybook/preview.js" {1}
 import "../src/style.css";
 
 export const parameters = {
@@ -145,14 +145,14 @@ Building our first component is just like building a regular Vue.js component, e
 
 I'll call my component `Foo` and create a directory with that name in the `components` directory (I'll actually call it `DyFoo` because [ESlint require component names to always be multi-word](https://eslint.vuejs.org/rules/multi-word-component-names.html), and `D` is the first letter of our Design System name, and `Y` is the last), and I'll also create a `.vue` and a `.stories.js` files with the same component name.
 
-```bash
-$ touch src/components/DyFoo/DyFoo.vue
-$ touch src/components/DyFoo/DyFoo.stories.js
+```bash showLineNumbers title=" "
+touch src/components/DyFoo/DyFoo.vue
+touch src/components/DyFoo/DyFoo.stories.js
 ```
 
 My `DyFoo.vue` component will be fairly easy, it'll take `variant` prop with `primary` or `secondary` options and give the text `foo` some color based on them.
 
-```vue
+```vue showLineNumbers title="DyFoo.vue"
 <script setup lang="ts">
 defineProps({
   variant: {
@@ -170,9 +170,9 @@ defineProps({
 </template>
 ```
 
-Now let's create couple of stories to demo those 2 options for the `DyFoo` component (inside `DyFoo.stories.js`)
+Now let's create couple of stories to demo those 2 options for the `DyFoo` component
 
-```js
+```js showLineNumbers title="DyFoo.stories.js"
 import DyFoo from "./DyFoo.vue";
 
 export default {
@@ -206,7 +206,7 @@ Secondary.args = {
 };
 ```
 
-And if you'll fire Storybook now, you'll see your `Foo` component, and you can play with the color of the text by selecting the different options
+If you'll fire Storybook now, you'll see your `Foo` component and you can play with the color of the text by selecting the different options
 
 ![DyFoo component in Storybook](/posts/2022/design-system/DyFoo.webp "DyFoo component in Storybook")
 
@@ -216,9 +216,9 @@ And if you'll fire Storybook now, you'll see your `Foo` component, and you can p
 
 Now that we have a Vue.js project with Storybook and our first component (`DyFoo`), we want to distribute it. So the first thing we need to do is to tell [Vite](https://vitejs.dev) to build a **component library** and not a **project**. And we can do so by set it up to [library mode](https://vitejs.dev/guide/build.html#library-mode).
 
-To package the vite project as a library we need to change some configuration settings in the `vite.config.ts` file
+To package the vite project as a library we need to change some configuration settings
 
-```ts
+```ts showLineNumbers title="vite.config.ts" {1,10-28}
 import { resolve } from "path";
 import { fileURLToPath, URL } from "node:url";
 
@@ -255,9 +255,9 @@ export default defineConfig({
 });
 ```
 
-The next thing is to edit the `package.json` file and tell it where our main entry file to the package (`main.ts` in our case), so add those sections right after the `"script"`
+The next thing is to set the main entry file to the package (`main.ts` in our case), so add those sections right after the `"script"`
 
-```json
+```json title="package.json"
 "files": [
   "dist"
 ],
@@ -273,9 +273,9 @@ The next thing is to edit the `package.json` file and tell it where our main ent
 },
 ```
 
-And last but not least is to export our `DyFoo` component in our entry file (`main.ts`)
+And last but not least is to export our `DyFoo` component in our entry file
 
-```ts
+```ts showLineNumbers title="main.ts"
 export { default as DyFoo } from "./components/DyFoo/DyFoo.vue";
 ```
 
@@ -283,15 +283,15 @@ export { default as DyFoo } from "./components/DyFoo/DyFoo.vue";
 
 You can now run a build (`npm run build`) and see that a `dist` directory is created, with it there are our `style.css` file and 2 new files `daisy.cjs.js` and `daisy.es.js`. Basically that's it, we're all good. But if you want to add typing for Typescript support you'll want to add couple more things.
 
-First, edit the `build-only` npm script (in `package.json` file) to emit types declarations with `vue-tsc --emitDeclarationOnly`, like this
+First, edit the `build-only` npm script to emit types declarations with `vue-tsc --emitDeclarationOnly`, like this
 
-```json
+```json title="package.json"
 "build-only": "vite build && vue-tsc --emitDeclarationOnly",
 ```
 
-and then add `compilerOptions` and the files to `include` in the `tsconfig.json` file (right after the `references` array)
+and then add `compilerOptions` and the files to `include` (right after the `references` array)
 
-```json
+```json title="tsconfig.json"
 "compilerOptions": {
   "lib": ["ESNext", "DOM"],
   "skipLibCheck": true,
@@ -310,8 +310,8 @@ Now that you can build your vite library locally on your machine, it's time to b
 
 So let's create a GitHub action workflow
 
-```bash
-$ touch .github/workflows/cd.yaml
+```bash showLineNumbers title=" "
+touch .github/workflows/cd.yaml
 ```
 
 And put there 3 steps:
@@ -320,7 +320,7 @@ And put there 3 steps:
 2. Publish a release to GitHub (using [semantic-release](https://github.com/semantic-release/semantic-release)).
 3. Publish the packge to GitHub registry.
 
-```yaml
+```yaml showLineNumbers title=".github/workflows/cd.yaml"
 name: Continuous Deployment
 
 on:
@@ -390,9 +390,9 @@ jobs:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 ```
 
-We also need to change a few things in our `package.json` file. First the `"name"` should start with your organization name (or username). Second, you should add a `repository` section
+We also need to change a few things in our `package.json`. First the `"name"` should start with your organization name (or username). Second, you should add a `repository` section
 
-```json
+```json title="package.json"
 "repository": {
   "type": "git",
   "url": "git://github.com/nirgn975/daisy.git"
@@ -419,9 +419,9 @@ If it's your first time on [Chromatic](https://www.chromatic.com), go to **"proj
 
 ![Chromatic API Key](/posts/2022/design-system/chromatic-key.webp "Chromatic API Key")
 
-We can use that `token` to push our Storybook directly to Chromatic (with Chromatic npm package), but it's more convenient to just use [their GitHub action step](https://github.com/chromaui/action) and add it to our workflow, so at the end of the `.github/workflows/cd.yaml` file add
+We can use that `token` to push our Storybook directly to Chromatic (with Chromatic npm package), but it's more convenient to just use [their GitHub action step](https://github.com/chromaui/action) and add it to our workflow at the end of the file
 
-```yaml
+```yaml title=".github/workflows/cd.yaml"
 deploy_chromatic:
   needs: [publish-release]
   name: Deploy Design System to Chromatic
diff --git a/src/pages/blog/2022/github-email.md b/src/pages/blog/2022/github-email.md
index 572b843..08c7cd7 100644
--- a/src/pages/blog/2022/github-email.md
+++ b/src/pages/blog/2022/github-email.md
@@ -1,8 +1,8 @@
 ---
 layout: "../../../layouts/BlogPost.astro"
 title: "Change your email in GitHub"
-pubDate: 2022-08-01T09:00:00+03:00
-draft: true
+pubDate: 2022-10-01T09:00:00+03:00
+draft: false
 author: "Nir Galon"
 authorLink: "/about"
 
@@ -12,20 +12,59 @@ category: "tutorials"
 hiddenFromHomePage: false
 hiddenFromSearch: false
 
-featuredImage: "/posts/2022/raspberry-pi/raspberry-pi-hero.webp"
+featuredImage: "/posts/2022/github-email/google-email.webp"
 ---
 
-When you change your email on GitHub you loss all your commits that were made with the old email - they no longer been counted in your `contributions heat map`.
+Once in a lifetime a man changes his email address. Maybe you didn't changed your email even once, I completely understand you, but I did. And let me tell you - it's not an easy process!
 
-![contributions heat map](/posts/2022/github-email/contributions-heat-map.webp "contributions heat map")
+## 1. Why did I do it?
 
+I have a private domain and I used it with Gmail to have a private email address. But Google don't give you the option to setup a private domain because they'll lose a lot of small business that uses [Google workspace](https://workspace.google.com). So I setup a "small business" with the domain and paid Google a few dollars every month.
+
+But then I got married and setup my wife her own custom email address and add a few more dollars to Google every month. And after couple of years, my first child was born, and I thought to myself - when I'll setup their email in the future I'll also had to pay for their user every month. And I started to realise that in a few years I'll set myself up to pay Google hundreds of dollars every year for an email address (I also pay a yearly fee for the domain).
+
+But it's 2022 - an email address is basicly free noewdays. It doesn't make sense to me. And then Apple announced iOS 15, and one of the featres was "Custom Email Domain with iCloud Mail"! And I already subscribed to iCloud+, and uses iPhone and Mac, so it was a no brainer!
+
+&nbsp;
+
+## 2. Apple
+
+I was a Mac and iPhone user and I used Google services, but iOS 15 and iOS 16 changed this. Apple catched up to most (if not all) the major features in Mail, Calendar, and Drive (they have a few more in Photos, and they're already better in Reminders IMO). But they even did a few more steps ahead with [Hide my Email](https://support.apple.com/en-om/guide/icloud/mm9d9012c9e8/icloud) and [Private Relay](https://support.apple.com/en-us/HT212614). So it was time to move all of my life (Mail, Calendar, Drive, and Photos) to Apple, and to make this procees a little easier for me I started with a fresh email address (so I'll not lose the old account for a little longer).
+
+The first thing I did is to go over my [1Password](https://1password.com) login list and enter to all the services and change their email address (or delete the account if I didn't actually use the service, so it was actually a good time to clean things. You'll be surprised to how many services you're register over the years).
+
+&nbsp;
+
+## 3. GitHub
+
+Everything was going according to plan, but little did I know that when you change your email on GitHub you loss all your commits that were made with the old email - they no longer been counted in your contributions heat map!
+
+![GitHub Contributions Graph](/posts/2022/github-email/github-contributions-graph.webp "GitHub Contributions Graph")
+
+So I wrote a command line script to change the commits author email. But before we continue I do have to warn you about a few things
+
+1. **This action changes some of the history commit's fields. Be very careful to how you run it and on which repositories**.
+2. Note that you'll need to have full access to the `main` branch to run this script.
+3. Be aware that the commits that do change will change their sha, so if you have tags that links to that sha's - they'll no longer link to the right commit (you can change the tag sha by create it again, and you can set the same date when you create it).
+
+```bash showLineNumbers title=" "
+git filter-branch -f --commit-filter 'if [ "$GIT_AUTHOR_EMAIL" = "<OLD_EMAIL_ADDRESS>" ]; then GIT_AUTHOR_EMAIL="<NEW_EMAIL_ADDRESS>"; git commit-tree "$@"; fi' HEAD
 ```
-git filter-branch -f --tag-name-filter --commit-filter '
-if [ "$GIT_AUTHOR_EMAIL" = "nir@galon.io" ];
-then
-  GIT_AUTHOR_EMAIL="nir@galons.io";
-  git commit-tree "$@";
-else
-  git commit-tree "$@";
-fi' HEAD
-```
+
+All you have to do is to replace `<OLD_EMAIL_ADDRESS>` and `<NEW_EMAIL_ADDRESS>` with your old email address and new email address respectively, and run this bash command in everyone of the repositories you want to change your email address in (and then `git push --force origin main` to change the commints history in GitHub and not just on your local git).
+
+&nbsp;
+
+## 4. GitHub private email addresses
+
+There is one thing I'll recommand GitHub users do to not relay on their email address in their commits, and that's using [GitHub private email address](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-email-preferences/setting-your-commit-email-address) (it'll also keep your email private from GitHub emails to others and from people who search your repos commit history to find you email address).
+
+So, GitHub have a feature called _"Keep my email address private"_ where they let you use a noreply email address from GitHub as your commit email address. To use your noreply email address for commits you push from the command line, use that email address when you set your commit email address in Git. To use your noreply address for web-based Git operations just set your commit email address on GitHub and choose _"Keep my email address private"_ in the settings (screenshot below).
+
+![GitHub Private Email Settings](/posts/2022/github-email/github-private-email.webp "GitHub Private Email Settings")
+
+&nbsp;
+
+## 5. Summary
+
+So I would recommand everybody to use GitHub _"Keep my email address private"_ feature, and if you want to change your old commits email to your new `noreply` email address from GitHub - use the bash command I created (don't forget to replace `<OLD_EMAIL_ADDRESS>` and `<NEW_EMAIL_ADDRESS>`).
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 7452f93..13346c2 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -18,7 +18,7 @@ import Layout from "../layouts/Layout.astro";
             name="first-name"
             id="first-name"
             autocomplete="given-name"
-            class="w-full rounded-sm py-2 px-4 bg-zinc-200 dark:bg-zinc-700 border-transparent focus:border-zinc-50 focus:dark:border-zinc-800 focus:ring-zinc-50 focus:dark:ring-zinc-800"
+            class="w-full rounded-md py-2 px-4 bg-zinc-200 dark:bg-zinc-700 border-transparent focus:border-zinc-50 focus:dark:border-zinc-800 focus:ring-zinc-50 focus:dark:ring-zinc-800"
           />
         </div>
       </div>
@@ -30,7 +30,7 @@ import Layout from "../layouts/Layout.astro";
             name="last-name"
             id="last-name"
             autocomplete="family-name"
-            class="w-full rounded-sm py-2 px-4 bg-zinc-200 dark:bg-zinc-700 border-transparent focus:border-zinc-50 focus:dark:border-zinc-800 focus:ring-zinc-50 focus:dark:ring-zinc-800"
+            class="w-full rounded-md py-2 px-4 bg-zinc-200 dark:bg-zinc-700 border-transparent focus:border-zinc-50 focus:dark:border-zinc-800 focus:ring-zinc-50 focus:dark:ring-zinc-800"
           />
         </div>
       </div>
@@ -43,7 +43,7 @@ import Layout from "../layouts/Layout.astro";
             name="email"
             type="email"
             autocomplete="email"
-            class="w-full rounded-sm py-2 px-4 bg-zinc-200 dark:bg-zinc-700 border-transparent focus:border-zinc-50 focus:dark:border-zinc-800 focus:ring-zinc-50 focus:dark:ring-zinc-800"
+            class="w-full rounded-md py-2 px-4 bg-zinc-200 dark:bg-zinc-700 border-transparent focus:border-zinc-50 focus:dark:border-zinc-800 focus:ring-zinc-50 focus:dark:ring-zinc-800"
           />
         </div>
       </div>
@@ -55,7 +55,7 @@ import Layout from "../layouts/Layout.astro";
             id="message"
             name="message"
             rows="4"
-            class="w-full rounded-sm py-2 px-4 bg-zinc-200 dark:bg-zinc-700 border-transparent focus:border-zinc-50 focus:dark:border-zinc-800 focus:ring-zinc-50 focus:dark:ring-zinc-800"
+            class="w-full rounded-md py-2 px-4 bg-zinc-200 dark:bg-zinc-700 border-transparent focus:border-zinc-50 focus:dark:border-zinc-800 focus:ring-zinc-50 focus:dark:ring-zinc-800"
           ></textarea>
         </div>
       </div>
@@ -63,7 +63,7 @@ import Layout from "../layouts/Layout.astro";
       <div class="sm:col-span-2">
         <button
           type="submit"
-          class="inline-flex w-full items-center justify-center rounded-sm border-transparent bg-sky-500 hover:bg-sky-400 px-6 py-3 font-medium text-zinc-700"
+          class="inline-flex w-full items-center justify-center rounded-md border-transparent bg-sky-500 hover:bg-sky-400 px-6 py-3 font-medium text-zinc-700"
         >
           Let's talk
         </button>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ed9dda5..3907d5b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -20,7 +20,7 @@ const posts = (await Astro.glob("./**/*.{md,mdx}"))
     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
       {
         posts.map((post) => (
-          <div class="flex flex-col bg-zinc-200 dark:bg-zinc-700 rounded-sm">
+          <div class="flex flex-col bg-zinc-200 dark:bg-zinc-700 rounded-md">
             <a href={post.url} class="flex-1" aria-label="Title goes to post">
               <h3 class="p-2 text-xl">{post.frontmatter.title}</h3>
             </a>
@@ -73,7 +73,7 @@ const posts = (await Astro.glob("./**/*.{md,mdx}"))
 
     <div class="flex">
       <div class="flex flex-col md:flex-row">
-        <img src="about/talks/pipenv-the-future-of-python-dependency-management.webp" alt="Talk Thumbnail" class="my-2" />
+        <img src="about/talks/pipenv-the-future-of-python-dependency-management.webp" alt="Talk Thumbnail" class="my-2 w-full md:w-1/3 h-full" />
         <div class="p-4">
           <h3 class="text-2xl">Pipenv: The future of Python dependency management</h3>
           <p class="pt-2">