diff --git a/astro.config.mjs b/astro.config.mjs
index 9ffed89..7f32698 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,6 +1,7 @@
 import react from "@astrojs/react";
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
+import icon from "astro-icon";
 import { defineConfig } from "astro/config";
 import remarkMath from "remark-math";
 
@@ -14,5 +15,12 @@ export default defineConfig({
     },
     remarkPlugins: [remarkMath],
   },
-  integrations: [tailwind(), sitemap(), react()],
+  integrations: [
+    tailwind(),
+    sitemap(),
+    react(),
+    icon({
+      iconDir: "src/assets/icons",
+    }),
+  ],
 });
diff --git a/package.json b/package.json
index 43dffda..c87ec78 100644
--- a/package.json
+++ b/package.json
@@ -25,10 +25,10 @@
     "@fontsource/inter": "^5.0.20",
     "@fontsource/outfit": "^5.0.14",
     "astro": "^3.6.5",
+    "astro-icon": "^1.1.1",
     "astro-seo": "^0.8.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.292.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "remark-math": "^6.0.0",
diff --git a/src/assets/icons/email.svg b/src/assets/icons/email.svg
new file mode 100644
index 0000000..a643ebf
--- /dev/null
+++ b/src/assets/icons/email.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
+  <path fill="currentColor"
+    d="m20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2" />
+</svg>
diff --git a/src/assets/icons/github.svg b/src/assets/icons/github.svg
new file mode 100644
index 0000000..3fb309a
--- /dev/null
+++ b/src/assets/icons/github.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
+  <path fill="currentColor"
+    d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" />
+</svg>
diff --git a/src/assets/icons/linkedin.svg b/src/assets/icons/linkedin.svg
new file mode 100644
index 0000000..de3a7f1
--- /dev/null
+++ b/src/assets/icons/linkedin.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
+  <path fill="currentColor"
+    d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z" />
+</svg>
diff --git a/src/assets/icons/moon.svg b/src/assets/icons/moon.svg
new file mode 100644
index 0000000..2b350da
--- /dev/null
+++ b/src/assets/icons/moon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
+  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+    stroke-width="2" d="M12 3a6 6 0 0 0 9 9a9 9 0 1 1-9-9" />
+</svg>
diff --git a/src/assets/icons/sun.svg b/src/assets/icons/sun.svg
new file mode 100644
index 0000000..0507ca1
--- /dev/null
+++ b/src/assets/icons/sun.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
+  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+    stroke-width="2">
+    <circle cx="12" cy="12" r="4" />
+    <path
+      d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+  </g>
+</svg>
diff --git a/src/components/general/Footer.astro b/src/components/general/Footer.astro
index 07c53bc..887c322 100644
--- a/src/components/general/Footer.astro
+++ b/src/components/general/Footer.astro
@@ -1,9 +1,9 @@
 ---
-import { info } from "@/data/info";
 import { buttonVariants } from "@/components/ui/button";
-import { Github, Linkedin, Mail } from "lucide-react";
+import { info } from "@/data/info";
+import { Icon } from "astro-icon/components";
 
-const iconSize = 20;
+const iconSize = 25;
 ---
 
 <footer
@@ -20,7 +20,7 @@ const iconSize = 20;
       href={info.socialMedia.github}
       class={buttonVariants({ variant: "ghost", size: "icon-sm" })}
       target="_blank"
-      ><Github size={iconSize} aria-label="GitHub Icon" />
+      ><Icon name="github" size={iconSize} aria-label="GitHub Icon" />
     </a>
     <a
       aria-label="LinkedIn"
@@ -28,15 +28,15 @@ const iconSize = 20;
       class={buttonVariants({ variant: "ghost", size: "icon-sm" })}
       target="_blank"
     >
-      <Linkedin size={iconSize} aria-label="LinkedIn Icon" />
+      <Icon name="linkedin" size={iconSize} aria-label="LinkedIn Icon" />
     </a>
     <a
-      aria-label="Email"
+      aria-label="E-Mail"
       href={`mailto:${info.socialMedia.email}`}
       class={buttonVariants({ variant: "ghost", size: "icon-sm" })}
       target="_blank"
     >
-      <Mail size={iconSize} aria-label="Email Icon" />
+      <Icon name="email" size={iconSize} aria-label="Email Icon" />
     </a>
   </div>
 </footer>
diff --git a/src/components/general/Navbar.astro b/src/components/general/Navbar.astro
index 5e43351..ed9284f 100644
--- a/src/components/general/Navbar.astro
+++ b/src/components/general/Navbar.astro
@@ -1,8 +1,10 @@
 ---
+import { Button } from "@/components/ui/button";
 import { info } from "@/data/info";
 import { createLogo } from "@/utils/logo";
-import { Moon } from "lucide-react";
-import { Button } from "../ui/button";
+import { Icon } from "astro-icon/components";
+
+const iconSize = 25;
 ---
 
 <header class="container mb-16 flex h-20 items-center justify-between space-x-4 md:h-28" aria-label="Header">
@@ -17,53 +19,59 @@ import { Button } from "../ui/button";
       href="/projects">Projekte</a
     >
     <Button id="theme-button" variant="ghost" size="icon-sm" aria-label="Theme Switch">
-      <Moon size={20} aria-label="Theme Switch Icon" />
+      <Icon id="icon-dark" class="hidden" name="sun" size={25} aria-label="Theme Switch Icon" />
+      <Icon id="icon-light" name="moon" size={25} aria-label="Theme Switch Icon" />
     </Button>
   </nav>
 </header>
 
 <script is:inline>
-  const moon = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon" aria-label="Theme Switch Icon"><path d="M12 3a6.364 6.364 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg>`;
-  const sun = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun" aria-label="Theme Switch Icon"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>`;
-
-  const themeButton = document.getElementById("theme-button");
-  let isDark;
-
-  const theme = (() => {
-    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
-      return localStorage.getItem("theme");
-    }
-    if (matchMedia("(prefers-color-scheme: dark)").matches) {
-      return "dark";
-    }
-    return "light";
-  })();
+  document.addEventListener("DOMContentLoaded", () => {
+    const themeButton = document.getElementById("theme-button");
+    const iconDark = document.getElementById("icon-dark");
+    const iconLight = document.getElementById("icon-light");
+    let isDark;
 
-  // Change the class of the html element to contain the theme
-  if (theme === "light") {
-    document.documentElement.setAttribute("class", "light");
-    themeButton.innerHTML = moon;
-    isDark = true;
-  } else {
-    document.documentElement.setAttribute("class", "dark");
-    themeButton.innerHTML = sun;
-    isDark = false;
-  }
-  localStorage.setItem("theme", theme);
+    const theme = (() => {
+      if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+        return localStorage.getItem("theme");
+      }
+      if (document.documentElement.classList.contains("dark")) {
+        return "dark";
+      }
+      return "light";
+    })();
 
-  const darkModeHandler = () => {
-    if (isDark) {
-      document.documentElement.setAttribute("class", "dark");
-      localStorage.theme = "dark";
+    // Change the class of the html element to contain the theme
+    if (theme === "light") {
+      document.documentElement.setAttribute("class", "light");
+      iconDark.classList.add("hidden");
+      iconLight.classList.remove("hidden");
       isDark = false;
-      themeButton.innerHTML = sun;
     } else {
-      document.documentElement.setAttribute("class", "light");
-      localStorage.theme = "light";
+      document.documentElement.setAttribute("class", "dark");
+      iconDark.classList.remove("hidden");
+      iconLight.classList.add("hidden");
       isDark = true;
-      themeButton.innerHTML = moon;
     }
-  };
+    localStorage.setItem("theme", theme);
+
+    const darkModeHandler = () => {
+      if (isDark) {
+        document.documentElement.setAttribute("class", "light");
+        localStorage.theme = "light";
+        isDark = false;
+        iconDark.classList.add("hidden");
+        iconLight.classList.remove("hidden");
+      } else {
+        document.documentElement.setAttribute("class", "dark");
+        localStorage.theme = "dark";
+        isDark = true;
+        iconDark.classList.remove("hidden");
+        iconLight.classList.add("hidden");
+      }
+    };
 
-  themeButton.addEventListener("click", darkModeHandler);
+    themeButton.addEventListener("click", darkModeHandler);
+  });
 </script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f0eb6af..597312f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -70,6 +70,24 @@ const {
         ],
       }}
     />
+    <script is:inline>
+      const getThemePreference = () => {
+        if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+          return localStorage.getItem("theme");
+        }
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      };
+      const isDark = getThemePreference() === "dark";
+      document.documentElement.classList[isDark ? "add" : "remove"]("dark");
+
+      if (typeof localStorage !== "undefined") {
+        const observer = new MutationObserver(() => {
+          const isDark = document.documentElement.classList.contains("dark");
+          localStorage.setItem("theme", isDark ? "dark" : "light");
+        });
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+      }
+    </script>
   </head><body>
     <Navbar />
     <main class={`container space-y-16 md:space-y-20 lg:space-y-24`} aria-label={label}>