diff --git a/home/webapp/src/components/NavBar.jsx b/home/webapp/src/components/NavBar.jsx
index b29fb588..25b7e481 100644
--- a/home/webapp/src/components/NavBar.jsx
+++ b/home/webapp/src/components/NavBar.jsx
@@ -10,9 +10,11 @@ const navIcons = {
   settings: SettingsIcon,
 };
 
-const NavBar = ({ onPageChange, checkConnection, checkBatteryLevel }) => {
+const wifiPages = ['community', 'classroom'];
+
+const NavBar = ({ onPageChange, checkBatteryLevel }) => {
   const [activePage, setActivePage] = useState('home');
-  const [isConnected, setIsConnected] = useState(true);
+  const [isConnected, setIsConnected] = useState(navigator.onLine);
   const [currentTime, setCurrentTime] = useState("");
   const [batteryLevel, setBatteryLevel] = useState(0.8); // Default battery level
   const theme = useTheme()
@@ -25,12 +27,6 @@ const NavBar = ({ onPageChange, checkConnection, checkBatteryLevel }) => {
     });
   };
   
-  // Function to update the connection status
-  const updateConnectionStatus = async () => {
-    const status = await checkConnection();
-    setIsConnected(status);
-  };
-
   // Function to update the battery level
   const updateBatteryLevel = async () => {
     const level = await checkBatteryLevel();
@@ -46,15 +42,21 @@ const NavBar = ({ onPageChange, checkConnection, checkBatteryLevel }) => {
   // Use useEffect to set up intervals for updating connection status, time, and battery level
   useEffect(() => {
     // Update connection status every minute
-    const connectionIntervalId = setInterval(updateConnectionStatus, 60000);
-    // Update time every second
+
+    window.ononline = function() {
+      setIsConnected(true);
+    }
+
+    window.onoffline = function() {
+      setIsConnected(false)
+  }
+
     const timeIntervalId = setInterval(updateTime, 1000);
     // Update battery level every 5 minutes
     const batteryLevelIntervalId = setInterval(updateBatteryLevel, 300000);
 
     // Clean up intervals when the component unmounts
     return () => {
-      clearInterval(connectionIntervalId);
       clearInterval(timeIntervalId);
       clearInterval(batteryLevelIntervalId);
     };
@@ -75,12 +77,15 @@ const NavBar = ({ onPageChange, checkConnection, checkBatteryLevel }) => {
       <NavButtonsContainer>
         {Object.keys(navIcons).map((page) => {
           const Icon = navIcons[page];
+          const pageSelectable = !wifiPages.includes(page) || wifiPages.includes(page) && isConnected
           return (
             <NavButton
               key={page}
               active={activePage === page}
               onClick={() => handleButtonClick(page)}
-              tabIndex={0}
+              tabIndex={pageSelectable ? 0 : -1}
+              disabled={pageSelectable}
+              className={pageSelectable ? "" : 'disabled_nav'}
             >
               <Icon color={activePage === page ? theme.colors.textActive : theme.colors.text}/>
             </NavButton>
@@ -92,6 +97,7 @@ const NavBar = ({ onPageChange, checkConnection, checkBatteryLevel }) => {
         {<DynamicBatteryIcon level={batteryLevel} theme={theme}/>}
         {/* Conditionally render WiFiIcon or NoSignalIcon based on isConnected */}
         {isConnected ? <WiFiIcon color={theme.colors.text}/> : <NoSignalIcon color={theme.colors.text}/>}
+
         <TimeContainer>
           {currentTime}
         </TimeContainer>
diff --git a/home/webapp/src/components/Settings/NetworkSettingsPage.jsx b/home/webapp/src/components/Settings/NetworkSettingsPage.jsx
index 84fd3322..640b77b3 100644
--- a/home/webapp/src/components/Settings/NetworkSettingsPage.jsx
+++ b/home/webapp/src/components/Settings/NetworkSettingsPage.jsx
@@ -3,7 +3,7 @@ import * as Styled from "../styles/Settings.styled";
 
 export default function NetworkSettingsPage() {
   const [connectedNetwork, setConnectedNetwork] = useState(null);
-  const [wifiNetworks, setWifiNetworks] = useState(["Network1", "Network2"]);
+  const [wifiNetworks, setWifiNetworks] = useState(["Network1", "Network2", "n3", "n4", "n5", "n6", "n7", "n8"]);
 
   const fetchNetworks = async () => {
     try {
@@ -103,8 +103,8 @@ export default function NetworkSettingsPage() {
             (<span>✗ Not Connected</span>)}
         </Styled.ConnectedNetwork>
 
-        <Styled.DisconnectButton onClick={handleDisconnectButtonClick} tabIndex="0">Disconnect</Styled.DisconnectButton>
-        <Styled.RefreshButton onClick={handleRefreshButtonClick} tabIndex="0">↻</Styled.RefreshButton>
+        <Styled.DisconnectButton onClick={handleDisconnectButtonClick} tabIndex={0}>Disconnect</Styled.DisconnectButton>
+        <Styled.RefreshButton onClick={handleRefreshButtonClick} tabIndex={0}>↻</Styled.RefreshButton>
       </Styled.NetworkActionBar>
 
       {renderWifiContent()}
diff --git a/home/webapp/src/components/styles/NavBar.styled.jsx b/home/webapp/src/components/styles/NavBar.styled.jsx
index 88d18a25..0b26ad65 100644
--- a/home/webapp/src/components/styles/NavBar.styled.jsx
+++ b/home/webapp/src/components/styles/NavBar.styled.jsx
@@ -41,6 +41,10 @@ export const NavButton = styled.div`
     outline: 3px solid ${({ theme }) => theme.colors.text};
     outline-offset: -3px;
   }
+
+  &.disabled_nav {
+    opacity: 0.1
+  }
 `;
 
 export const StatusIconsContainer = styled.div`
diff --git a/home/webapp/src/components/styles/Settings.styled.jsx b/home/webapp/src/components/styles/Settings.styled.jsx
index f94047d8..62b26486 100644
--- a/home/webapp/src/components/styles/Settings.styled.jsx
+++ b/home/webapp/src/components/styles/Settings.styled.jsx
@@ -87,6 +87,8 @@ export const NetworksList = styled.div`
   flex-direction: column;
   align-items: center;
 
+  max-height: 180px;
+
   &::-webkit-scrollbar {
     display: none;
   }