diff --git a/components/DarkModeToggle.tsx b/components/DarkModeToggle.tsx
index 16ea1e8f8..d45169780 100644
--- a/components/DarkModeToggle.tsx
+++ b/components/DarkModeToggle.tsx
@@ -2,39 +2,100 @@ import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 import React from 'react';
 
-export default function DarkModeToggle() {
-  const { theme, setTheme } = useTheme();
-  const [isDarkMode, setIsDarkMode] = useState(theme === 'dark');
-  const [isClickable, setIsClickable] = useState(true);
-  const [img, setImg] = useState('/icons/moon.svg');
-
-  const toggleDarkMode = () => {
-    if (!isClickable) return;
-
-    setIsClickable(false);
-    const newTheme = isDarkMode ? 'light' : 'dark';
-    setTheme(newTheme);
-    setIsDarkMode(!isDarkMode);
+function ListItem({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+}) {
+  return (
+    <div
+      onClick={onClick}
+      className='p-2 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer rounded-md transition duration-150 flex row gap-2 w-full text-sm'
+    >
+      {children}
+    </div>
+  );
+}
 
-    setTimeout(() => {
-      setIsClickable(true);
-    }, 500);
-  };
+export default function DarkModeToggle() {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const [isDarkMode, setIsDarkMode] = useState(false);
 
   useEffect(() => {
-    if (!theme) setTheme('light');
+    setIsDarkMode(resolvedTheme === 'dark');
+  }, [resolvedTheme]);
 
-    const img = theme === 'dark' ? '/icons/sun.svg' : '/icons/moon.svg';
-    setImg(img);
-  }, [theme, setTheme]);
+  const [showSelect, setShowSelect] = useState(false);
+  const [activeThemeIcon, setActiveThemeIcon] = useState('');
+  useEffect(() => {
+    switch (theme) {
+      case 'system':
+        return setActiveThemeIcon('/icons/theme-switch.svg');
+      case 'light':
+        return setActiveThemeIcon('/icons/sun.svg');
+      case 'dark':
+        return setActiveThemeIcon('/icons/moon.svg');
+    }
+  }, [theme, resolvedTheme]);
 
   return (
-    <button
-      onClick={toggleDarkMode}
-      className='dark-mode-toggle rounded-md dark:hover:bg-gray-700 p-1.5 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition duration-150'
-      disabled={!isClickable}
-    >
-      <img src={img} alt='Dark Mode' width={25} height={25} />
-    </button>
+    <div className='relative w-10 h-10 dark-mode-toggle-container'>
+      <button
+        onClick={() => setShowSelect(!showSelect)}
+        className='dark-mode-toggle rounded-md dark:hover:bg-gray-700 p-1.5 hover:bg-gray-100 transition duration-150 '
+      >
+        <img
+          src={activeThemeIcon}
+          alt='Dark Mode'
+          width={25}
+          height={25}
+          style={{
+            // Invert the icon color based on the theme, theme of the light mode is dark
+            filter: isDarkMode ? 'invert(1)' : 'invert(0)',
+          }}
+        />
+      </button>
+      <div
+        className='absolute right-0 p-2 bg-white dark:bg-gray-800 rounded-lg border dark:border-gray-700 z-10 w-max'
+        style={{ display: showSelect ? 'block' : 'none' }}
+        onMouseLeave={() => {
+          setShowSelect(false);
+        }}
+        tabIndex={0}
+      >
+        <ListItem onClick={() => setTheme('system')}>
+          <img
+            src={'/icons/theme-switch.svg'}
+            alt='System theme'
+            width={18}
+            height={18}
+            style={{ filter: isDarkMode ? 'invert(1)' : 'invert(0)' }}
+          />
+          System
+        </ListItem>
+        <ListItem onClick={() => setTheme('light')}>
+          <img
+            src={'/icons/sun.svg'}
+            alt='System theme'
+            width={18}
+            height={18}
+            style={{ filter: isDarkMode ? 'invert(1)' : 'invert(0)' }}
+          />
+          Light
+        </ListItem>
+        <ListItem onClick={() => setTheme('dark')}>
+          <img
+            src={'/icons/moon.svg'}
+            alt='System theme'
+            width={18}
+            height={18}
+            style={{ filter: isDarkMode ? 'invert(1)' : 'invert(0)' }}
+          />
+          Dark
+        </ListItem>
+      </div>
+    </div>
   );
 }
diff --git a/components/Layout.tsx b/components/Layout.tsx
index fb13a6a65..8c019d55e 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -164,26 +164,29 @@ const MainNavigation = () => {
   const section = useContext(SectionContext);
   const showMobileNav = useStore((s: any) => s.overlayNavigation === 'docs');
 
-  const { theme } = useTheme();
+  const { resolvedTheme, theme } = useTheme();
   const [icon, setIcon] = useState('');
   const [menu, setMenu] = useState('bg-black');
   const [closeMenu, setCLoseMenu] = useState('url("/icons/cancel.svg")');
 
   useEffect(() => {
     const icon = theme === 'dark' ? 'herobtn' : '';
-    const menu = theme === 'dark' ? 'bg-white' : 'bg-black';
-    const dataTheme = theme === 'dark' ? 'dark' : 'light';
+    const menu = resolvedTheme === 'dark' ? 'bg-white' : 'bg-black';
+    const dataTheme = resolvedTheme === 'dark' ? 'dark' : 'light';
     const closeMenu =
-      theme === 'dark'
+      resolvedTheme === 'dark'
         ? 'url("/icons/cancel-dark.svg")'
         : 'url("/icons/cancel.svg")';
     document.documentElement.setAttribute('data-theme', dataTheme);
-    document.documentElement.setAttribute('class', 'keygrad keyshadow');
+    document.documentElement.setAttribute(
+      'class',
+      `keygrad keyshadow ${dataTheme}`,
+    );
 
     setIcon(icon);
     setMenu(menu);
     setCLoseMenu(closeMenu);
-  }, [theme]);
+  }, [theme, resolvedTheme]);
 
   return (
     <div className='flex justify-end md:mr-8 w-full '>
@@ -402,16 +405,16 @@ const Footer = () => (
 );
 
 const Logo = () => {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   const [imageSrc, setImageSrc] = useState('/img/logos/logo-blue.svg'); // Default to match the server-side render
 
   useEffect(() => {
     const src =
-      theme === 'dark'
+      resolvedTheme === 'dark'
         ? '/img/logos/logo-white.svg'
         : '/img/logos/logo-blue.svg';
     setImageSrc(src);
-  }, [theme]);
+  }, [resolvedTheme]);
 
   return (
     <div>
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index cfec6dc8a..0ba798716 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -281,7 +281,7 @@ export const DocsNav = ({
   const rotateR = active.getReference ? 'rotate(180deg)' : 'rotate(0)';
   const rotateSpec = active.getSpecification ? 'rotate(180deg)' : 'rotate(0)';
 
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   const [learn_icon, setLearn_icon] = useState('');
   const [reference_icon, setReference_icon] = useState('');
@@ -289,7 +289,7 @@ export const DocsNav = ({
   const [overview_icon, setOverview_icon] = useState('');
 
   useEffect(() => {
-    if (theme === 'dark') {
+    if (resolvedTheme === 'dark') {
       setOverview_icon('/icons/eye-dark.svg');
       setLearn_icon('/icons/compass-dark.svg');
       setReference_icon('/icons/book-dark.svg');
@@ -300,7 +300,7 @@ export const DocsNav = ({
       setReference_icon('/icons/book.svg');
       setSpec_icon('/icons/clipboard.svg');
     }
-  }, [theme]);
+  }, [resolvedTheme]);
 
   return (
     <div id='sidebar' className='lg:mt-8 w-4/5 mx-auto lg:ml-4'>
diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index 799faf962..2e0da6ab3 100644
--- a/pages/index.page.tsx
+++ b/pages/index.page.tsx
@@ -194,7 +194,7 @@ export function AlgoliaSearch() {
 const Home = (props: any) => {
   const blogPosts = props.blogPosts;
   const timeToRead = Math.ceil(readingTime(blogPosts[0].content).minutes);
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   const [asyncapi_logo, setAsyncapi_logo] = useState('');
   const [vpsserver_logo, setVPSserver_logo] = useState('');
@@ -207,7 +207,7 @@ const Home = (props: any) => {
   const [slack_logo, setSlack_logo] = useState('');
 
   useEffect(() => {
-    if (theme === 'dark') {
+    if (resolvedTheme === 'dark') {
       setAsyncapi_logo('/img/logos/dark-mode/asyncapi_white.svg');
       setAirbnb_logo('/img/logos/dark-mode/airbnb_white.png');
       setPostman_logo('/img/logos/usedby/postman-white.png');
@@ -228,7 +228,7 @@ const Home = (props: any) => {
       setVPSserver_logo('/img/logos/sponsors/vps-server-logo.svg');
       setItflashcards_logo('/img/logos/sponsors/it_flashcards.svg');
     }
-  }, [theme]);
+  }, [resolvedTheme]);
   return (
     <div>
       <div className='flex flex-col items-center'>
diff --git a/public/icons/sun.svg b/public/icons/sun.svg
index 4646ec110..ccaf206b0 100644
--- a/public/icons/sun.svg
+++ b/public/icons/sun.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#ffffff" d="M122 40V16a6 6 0 0 1 12 0v24a6 6 0 0 1-12 0m68 88a62 62 0 1 1-62-62a62.07 62.07 0 0 1 62 62m-12 0a50 50 0 1 0-50 50a50.06 50.06 0 0 0 50-50M59.76 68.24a6 6 0 1 0 8.48-8.48l-16-16a6 6 0 0 0-8.48 8.48Zm0 119.52l-16 16a6 6 0 1 0 8.48 8.48l16-16a6 6 0 1 0-8.48-8.48M192 70a6 6 0 0 0 4.24-1.76l16-16a6 6 0 0 0-8.48-8.48l-16 16A6 6 0 0 0 192 70m4.24 117.76a6 6 0 0 0-8.48 8.48l16 16a6 6 0 0 0 8.48-8.48ZM46 128a6 6 0 0 0-6-6H16a6 6 0 0 0 0 12h24a6 6 0 0 0 6-6m82 82a6 6 0 0 0-6 6v24a6 6 0 0 0 12 0v-24a6 6 0 0 0-6-6m112-88h-24a6 6 0 0 0 0 12h24a6 6 0 0 0 0-12"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" style="filter:invert(1);" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#ffffff" d="M122 40V16a6 6 0 0 1 12 0v24a6 6 0 0 1-12 0m68 88a62 62 0 1 1-62-62a62.07 62.07 0 0 1 62 62m-12 0a50 50 0 1 0-50 50a50.06 50.06 0 0 0 50-50M59.76 68.24a6 6 0 1 0 8.48-8.48l-16-16a6 6 0 0 0-8.48 8.48Zm0 119.52l-16 16a6 6 0 1 0 8.48 8.48l16-16a6 6 0 1 0-8.48-8.48M192 70a6 6 0 0 0 4.24-1.76l16-16a6 6 0 0 0-8.48-8.48l-16 16A6 6 0 0 0 192 70m4.24 117.76a6 6 0 0 0-8.48 8.48l16 16a6 6 0 0 0 8.48-8.48ZM46 128a6 6 0 0 0-6-6H16a6 6 0 0 0 0 12h24a6 6 0 0 0 6-6m82 82a6 6 0 0 0-6 6v24a6 6 0 0 0 12 0v-24a6 6 0 0 0-6-6m112-88h-24a6 6 0 0 0 0 12h24a6 6 0 0 0 0-12"/></svg>
\ No newline at end of file
diff --git a/public/icons/theme-switch.svg b/public/icons/theme-switch.svg
new file mode 100644
index 000000000..28fec99e4
--- /dev/null
+++ b/public/icons/theme-switch.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 22c5.5228475 0 10-4.4771525 10-10s-4.4771525-10-10-10-10 4.4771525-10 10 4.4771525 10 10 10zm0-1.5v-17c4.6944204 0 8.5 3.80557963 8.5 8.5 0 4.6944204-3.8055796 8.5-8.5 8.5z" fill="#212121"/></svg>
\ No newline at end of file