diff --git a/client/src/App.js b/client/src/App.js
index 8604577..fa530f7 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -14,6 +14,7 @@ function App() {
   const [foods, setFoods] = useState([]);
   const pages = ["landing", "welcome", "topics", "foods", "council"];
   const [currentView, setCurrentView] = useState(pages[0]);
+  const [isOverlayActive, setIsOverlayActive] = useState(true);
   const [backgroundImageURL, setBackgroundImageURL] = useState(
     "/images/backgrounds/zoomed-out.jpg"
   );
@@ -26,8 +27,6 @@ function App() {
     width: "100vw",
   };
 
-  const isActiveOverlay = currentView !== "council";
-
   useEffect(() => {
     if (currentView === pages[0]) {
       setBackgroundImageURL("/images/backgrounds/zoomed-out.jpeg");
@@ -53,30 +52,34 @@ function App() {
 
     // Set new view
 
+    if (pages[nextIndex] == "council") {
+      toggleOverlay();
+    }
+
     setCurrentView(pages[nextIndex]);
   }
 
   // Placeholder for goBack function implementation
   function goBack() {}
 
-  function showOverlay(page) {
-    console.log(page);
+  function toggleOverlay() {
+    setIsOverlayActive(!isOverlayActive);
   }
 
   return (
     <div className="App" style={backgroundStyle}>
-      <Overlay isActive={isActiveOverlay}>
-        {currentView === pages[0] ? (
+      <Overlay isActive={isOverlayActive && currentView !== "council"}>
+        {currentView === "landing" ? (
           <Landing onContinueForward={continueForward} />
-        ) : currentView === pages[1] ? (
+        ) : currentView === "welcome" ? (
           <Welcome humanName={humanName} onContinueForward={continueForward} />
-        ) : currentView === pages[2] ? (
+        ) : currentView === "topics" ? (
           <Topics onContinueForward={continueForward} />
-        ) : currentView === pages[3] ? (
+        ) : currentView === "foods" ? (
           <Foods topic={topic} onContinueForward={continueForward} />
         ) : (
           <div>
-            <Navbar topic={topic} onShowOverlay={showOverlay} />
+            <Navbar topic={topic} onToggleOverlay={toggleOverlay} />
             <Council options={{ humanName, topic, foods }} />
           </div>
         )}
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index fee1a2e..996454a 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { capitalizeFirstLetter } from "../utils";
 
-function Navbar({ topic, onShowOverlay }) {
+function Navbar({ topic, onToggleOverlay }) {
   const navbarStyle = {
     paddingTop: "10px",
     display: "flex",
@@ -40,7 +40,7 @@ function Navbar({ topic, onShowOverlay }) {
           <a
             className="link"
             href="#"
-            onClick={() => onShowOverlay("about")}
+            onClick={() => onToggleOverlay("about")}
             style={linkItemStyle}
           >
             ABOUT
@@ -50,7 +50,7 @@ function Navbar({ topic, onShowOverlay }) {
           <a
             className="link"
             href="#"
-            onClick={() => onShowOverlay("settings")}
+            onClick={() => onToggleOverlay("settings")}
             style={linkItemStyle}
           >
             SETTINGS
@@ -60,7 +60,7 @@ function Navbar({ topic, onShowOverlay }) {
           <a
             className="link"
             href="#"
-            onClick={() => onShowOverlay("contact")}
+            onClick={() => onToggleOverlay("contact")}
             style={linkItemStyle}
           >
             CONTACT
@@ -70,7 +70,7 @@ function Navbar({ topic, onShowOverlay }) {
           <a
             className="link"
             href="#"
-            onClick={() => onShowOverlay("share")}
+            onClick={() => onToggleOverlay("share")}
             style={linkItemStyle}
           >
             SHARE