diff --git a/src/components/ToggleSwitch/ToggleSwitch.js b/src/components/ToggleSwitch/ToggleSwitch.js
index 72a46eb94d..afe3bf6541 100644
--- a/src/components/ToggleSwitch/ToggleSwitch.js
+++ b/src/components/ToggleSwitch/ToggleSwitch.js
@@ -3,7 +3,7 @@ import emoji from "react-easy-emoji";
 import StyleContext from "../../contexts/StyleContext";
 import "./ToggleSwitch.scss";
 
-const ToggleSwitch = () => {
+const ToggleSwitch = ({handleMenuItemClick}) => {
   const {isDark} = useContext(StyleContext);
   const [isChecked, setChecked] = useState(isDark);
   const styleContext = useContext(StyleContext);
@@ -16,6 +16,7 @@ const ToggleSwitch = () => {
         onChange={() => {
           styleContext.changeTheme();
           setChecked(!isChecked);
+          handleMenuItemClick();
         }}
       />
       <span className="slider round">
diff --git a/src/components/header/Header.js b/src/components/header/Header.js
index 6218f1950c..c25c5ea1e4 100644
--- a/src/components/header/Header.js
+++ b/src/components/header/Header.js
@@ -1,4 +1,4 @@
-import React, {useContext} from "react";
+import React, {useContext, useRef} from "react";
 import Headroom from "react-headroom";
 import "./Header.scss";
 import ToggleSwitch from "../ToggleSwitch/ToggleSwitch";
@@ -24,6 +24,14 @@ function Header() {
   const viewTalks = talkSection.display;
   const viewResume = resumeSection.display;
 
+  const menuCheckboxRef = useRef(null);
+
+  const handleMenuItemClick = () => {
+    if (menuCheckboxRef.current) {
+      menuCheckboxRef.current.checked = false;
+    }
+  };
+
   return (
     <Headroom>
       <header className={isDark ? "dark-menu header" : "header"}>
@@ -32,7 +40,12 @@ function Header() {
           <span className="logo-name">{greeting.username}</span>
           <span className="grey-color">/&gt;</span>
         </a>
-        <input className="menu-btn" type="checkbox" id="menu-btn" />
+        <input
+          className="menu-btn"
+          type="checkbox"
+          id="menu-btn"
+          ref={menuCheckboxRef}
+        />
         <label
           className="menu-icon"
           htmlFor="menu-btn"
@@ -82,7 +95,7 @@ function Header() {
           <li>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <a>
-              <ToggleSwitch />
+              <ToggleSwitch handleMenuItemClick={handleMenuItemClick} />
             </a>
           </li>
         </ul>