diff --git a/src/Index.tsx b/src/Index.tsx
index f167db3..03a8b5d 100644
--- a/src/Index.tsx
+++ b/src/Index.tsx
@@ -1,5 +1,9 @@
 import { useState, useEffect } from "react";
 import { Routes, Route, useNavigate } from "react-router-dom";
+import VeryLowSignal from "./assets/very_low_signal.png";
+import LowSignal from "./assets/low_signal.png";
+import MediumSignal from "./assets/medium_signal.png";
+import HighSignal from "./assets/high_signal.png";
 import Dashboard from "./pages/Dashboard";
 import Devices from "./pages/DeviceList";
 import Extend from "./pages/ExtendWirelessNetwork";
@@ -31,8 +35,17 @@ function Index() {
     "10.0.0.6",
     "10.0.0.7",
   ]);
+  const wifiNames = [
+    "Home Wifi",
+    "Neighbors Wifi",
+    "Grandmas Wifi",
+    "McDonalds Wifi",
+    "Starbucks Wifi",
+    "Hotel Wifi",
+  ];
+  const wifiSignals = [4, 3, 1, 2, 1, 2];
+  const wifiSignalImages = [VeryLowSignal, LowSignal, MediumSignal, HighSignal];
 
-  const [routerName, setRouterName] = useState("Example Router");
   const [twoGExtendedName, setTwoGExtendedName] = useState(
     "Example 2.4GHz Network",
   );
@@ -46,6 +59,8 @@ function Index() {
 
   const [selectedModeButton, setSelectedModeButton] = useState(0);
 
+  const [routerName, setRouterName] = useState("");
+
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -57,6 +72,12 @@ function Index() {
     setDevicesOnline(deviceNames.length);
   }, [loginState, navigate, setLoggedUser, deviceNames]);
 
+  useEffect(() => {
+    if (!wifiNames[connected]) return setRouterName("Not Connnected");
+
+    setRouterName(wifiNames[connected]);
+  }, [connected]);
+
   return (
     <>
       <Navbar LoggedUser={loggedUser} />
@@ -65,10 +86,13 @@ function Index() {
           path="/"
           element={
             <Dashboard
-              RouterName={routerName}
-              TwoGExtendedName={twoGExtendedName}
-              FiveGExtendedName={fiveGExtendedName}
-              DevicesOnline={devicesOnline}
+              routerName={routerName}
+              twoGExtendedName={twoGExtendedName}
+              fiveGExtendedName={fiveGExtendedName}
+              devicesOnline={devicesOnline}
+              wifiSignals={wifiSignals}
+              wifiSignalImages={wifiSignalImages}
+              connected={connected}
             />
           }
         />
@@ -93,6 +117,9 @@ function Index() {
               setExtendedMode={setExtenderMode}
               connected={connected}
               setConnected={setConnected}
+              wifiNames={wifiNames}
+              wifiSignals={wifiSignals}
+              wifiSignalImages={wifiSignalImages}
             />
           }
         />
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index f97eac1..98ad866 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -1,55 +1,70 @@
-import { Link } from 'react-router-dom'
-import '../styles/Dashboard.css'
-import Globe from '../assets/globe.png'
-import Arrow from '../assets/arrow.png'
-import Router from '../assets/router.png'
-import Signal from '../assets/signal.png'
-import VeryLowSignal from '../assets/very_low_signal.png'
-import LowSignal from '../assets/low_signal.png'
-import MediumSignal from '../assets/medium_signal.png'
-import HighSignal from '../assets/high_signal.png'
-import Extender from '../assets/extender.png'
-import Device from '../assets/device.png'
-import Gear from '../assets/gear.png'
+import { Link } from "react-router-dom";
+import "../styles/Dashboard.css";
+import Globe from "../assets/globe.png";
+import Arrow from "../assets/arrow.png";
+import Router from "../assets/router.png";
+import Signal from "../assets/signal.png";
+import HighSignal from "../assets/high_signal.png";
+import Extender from "../assets/extender.png";
+import Device from "../assets/device.png";
+import Gear from "../assets/gear.png";
 
 interface Props {
-  RouterName: string;
-  TwoGExtendedName: string;
-  FiveGExtendedName: string;
-  DevicesOnline: number;
+  routerName: string;
+  twoGExtendedName: string;
+  fiveGExtendedName: string;
+  devicesOnline: number;
+  connected: number;
+  wifiSignals: number[];
+  wifiSignalImages: string[];
 }
 
-function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnline }: Props) {
+function Dashboard({
+  routerName,
+  twoGExtendedName,
+  fiveGExtendedName,
+  devicesOnline,
+  connected,
+  wifiSignals,
+  wifiSignalImages,
+}: Props) {
   return (
     <>
       <header id="dashboardHeader">
         <ul className="dashboardList">
           <li>
-            <img src={ Globe } className="listIcons" />
+            <img src={Globe} className="listIcons" />
             <h2>Internet</h2>
           </li>
           <li>
-            <img src={ Arrow } className="arrow" />
+            <img src={Arrow} className="arrow" />
           </li>
           <li>
-            <img src={ Router } className="listIcons" />
+            <img src={Router} className="listIcons" />
             <h2>Router</h2>
-            <p>{ RouterName }</p>
+            <p>{routerName}</p>
           </li>
           <li>
-            <img src= { MediumSignal } className="signal" />
+            <img
+              src={
+                connected === -1
+                  ? Signal
+                  : wifiSignalImages[wifiSignals[connected] - 1]
+              }
+              className="signal"
+            />
           </li>
           <li>
-            <img src= { Extender } className="listIcons" />
+            <img src={Extender} className="listIcons" />
             <h2>Extender</h2>
-            <p>{ TwoGExtendedName }</p>
-            <p>{ FiveGExtendedName }</p>
+            <p>{twoGExtendedName}</p>
+            <p>{fiveGExtendedName}</p>
           </li>
           <li>
-            <img src= { HighSignal } className="signal" />
+            <img src={HighSignal} className="signal" />
           </li>
           <li>
-            <img src={ Device } className="listIcons" />
+            <img src={Device} className="listIcons" />
             <h2>Devices</h2>
           </li>
         </ul>
@@ -58,28 +73,28 @@ function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnl
         <ul className="dashboardList">
           <Link to="/devices">
             <li>
-              <img src={ Device } />
+              <img src={Device} />
               <h2>Device List</h2>
-              <p>{ DevicesOnline } Devices Online</p>
+              <p>{devicesOnline} Devices Online</p>
             </li>
           </Link>
           <Link to="/extend">
             <li>
-              <img src={ Globe } />
+              <img src={Globe} />
               <h2>Extend Network</h2>
               <p>Amplify Network</p>
             </li>
           </Link>
           <Link to="/wireless">
             <li>
-              <img src={ Signal } />
+              <img src={Signal} />
               <h2>Wireless Settings</h2>
               <p>Set Extender Network Up</p>
             </li>
           </Link>
           <Link to="/settings">
             <li>
-              <img src={ Gear } />
+              <img src={Gear} />
               <h2>System Settings</h2>
               <p>Change Extender Settings</p>
             </li>
@@ -87,7 +102,7 @@ function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnl
         </ul>
       </nav>
     </>
-  )
+  );
 }
 
-export default Dashboard
+export default Dashboard;
diff --git a/src/pages/ExtendWirelessNetwork.tsx b/src/pages/ExtendWirelessNetwork.tsx
index 501d895..ad3e52b 100644
--- a/src/pages/ExtendWirelessNetwork.tsx
+++ b/src/pages/ExtendWirelessNetwork.tsx
@@ -1,8 +1,4 @@
 import { Dispatch, SetStateAction } from "react";
-import VeryLowSignal from "../assets/very_low_signal.png";
-import LowSignal from "../assets/low_signal.png";
-import MediumSignal from "../assets/medium_signal.png";
-import HighSignal from "../assets/high_signal.png";
 import "../styles/ExtendWirelessNetwork.css";
 
 interface Props {
@@ -12,6 +8,9 @@ interface Props {
   setExtendedMode: Dispatch<SetStateAction<boolean>>;
   connected: number;
   setConnected: Dispatch<SetStateAction<number>>;
+  wifiNames: string[];
+  wifiSignals: number[];
+  wifiSignalImages: string[];
 }
 
 function ExtendWirelessNetwork({
@@ -21,18 +20,11 @@ function ExtendWirelessNetwork({
   setExtendedMode,
   connected,
   setConnected,
+  wifiNames,
+  wifiSignals,
+  wifiSignalImages,
 }: Props) {
   const buttons = ["AP Mode", "Extend Mode"];
-  const wifiNames = [
-    "Wifi 1",
-    "Wifi 2",
-    "Wifi 3",
-    "Wifi 4",
-    "Wifi 5",
-    "Wifi 6",
-  ];
-  const wifiSignals = [4, 3, 1, 2, 1, 2];
-  const wifiSignalImages = [VeryLowSignal, LowSignal, MediumSignal, HighSignal];
 
   return (
     <div id="extendNetwork">
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 72b1f3b..5df3466 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,9 +1,9 @@
-import { Dispatch, SetStateAction, useState } from 'react';
-import { useNavigate, Link } from 'react-router-dom';
-import '../styles/Login.css'
+import { Dispatch, SetStateAction, useState } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import "../styles/Login.css";
 
-const usernames = ['root'];
-const passwords = ['123'];
+const usernames = ["root"];
+const passwords = ["123"];
 
 interface Props {
   setLogin: Dispatch<SetStateAction<boolean>>;
@@ -16,21 +16,26 @@ function Login({ setLogin, setUser }: Props) {
   const [usernameError, setUsernameError] = useState(false);
   const [passwordError, setPasswordError] = useState(false);
 
-  setUser('Not Logged In');
+  setUser("Not Logged In");
+  setLogin(false);
 
   const handleLogin = (e: React.FormEvent) => {
     e.preventDefault();
 
-    const userElement = document.getElementById('username') as HTMLInputElement | null;
-    const passwordElement = document.getElementById('password') as HTMLInputElement | null;
+    const userElement = document.getElementById(
+      "username",
+    ) as HTMLInputElement | null;
+    const passwordElement = document.getElementById(
+      "password",
+    ) as HTMLInputElement | null;
 
-    if(!userElement || !passwordElement) return;
+    if (!userElement || !passwordElement) return;
 
     const user = userElement?.value;
     const password = passwordElement?.value;
 
     for (let i = 0; i < usernames.length; i++) {
-      if(user === usernames[i] && password === passwords[i]) {
+      if (user === usernames[i] && password === passwords[i]) {
         setLogin(true);
         setUser(user);
         return navigate("/");
@@ -42,29 +47,29 @@ function Login({ setLogin, setUser }: Props) {
   };
 
   return (
-  <div className="center">
-    <div id="login">
-      <h1>Welcome back!</h1>
-      <p>Enter your username and password.</p>
-      <form>
-        <h2>Username</h2>
-        <input type="text" id="username" />
+    <div className="center">
+      <div id="login">
+        <h1>Welcome back!</h1>
+        <p>Enter your username and password.</p>
+        <form>
+          <h2>Username</h2>
+          <input type="text" id="username" />
 
-        { passwordError &&
-        <p id="noinput">Wrong username.</p> }
+          {passwordError && <p id="noinput">Wrong username.</p>}
 
-        <h2>Password</h2>
-        <input type="password" id="password" />
+          <h2>Password</h2>
+          <input type="password" id="password" />
 
-        { usernameError &&
-        <p id="noinput">Wrong password.</p> }
+          {usernameError && <p id="noinput">Wrong password.</p>}
 
-        <p>Forgot password? <Link to="/reset">Reset it</Link></p>
-        <button onClick={handleLogin}>Login</button>
-      </form>
+          <p>
+            Forgot password? <Link to="/reset">Reset it</Link>
+          </p>
+          <button onClick={handleLogin}>Login</button>
+        </form>
+      </div>
     </div>
-  </div>
-  )
+  );
 }
 
 export default Login;
diff --git a/src/styles/Dashboard.css b/src/styles/Dashboard.css
index ed3c37d..9d5a32d 100644
--- a/src/styles/Dashboard.css
+++ b/src/styles/Dashboard.css
@@ -1,71 +1,71 @@
 #dashboardHeader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  max-width: 100%;
-  height: fit-content;
-  background-color: var(--bg-color-alt);
-  margin-top: 20px;
-  border-radius: 20px;
-  padding: 90px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    height: fit-content;
+    background-color: var(--bg-color-alt);
+    margin-top: 20px;
+    border-radius: 20px;
+    padding: 90px 20px;
 }
 
 .dashboardList {
-  display: flex;
-  align-items: center;
-  gap: 20px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
 
-  li {
-    display: inherit;
-    flex-direction: column;
-    text-align: center;
-    list-style: none;
-  
-    img {
-      user-select: none;
-      pointer-events: none;
+    li {
+        display: inherit;
+        flex-direction: column;
+        text-align: center;
+        list-style: none;
+
+        img {
+            user-select: none;
+            pointer-events: none;
+        }
+
+        .listIcons {
+            max-height: 160px;
+            width: auto;
+        }
+        .arrow {
+            max-height: 60px;
+        }
+        .signal {
+            max-height: 90px;
+        }
     }
-  
-    .listIcons {
-      max-height: 160px;
-    }
-    .arrow {
-      max-height: 60px;
-    }
-    .signal {
-      max-height: 90px;
-    }
-  }
 }
 
 #lowerNav {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-
-  ul {
-    justify-content: space-around;
-    max-width: fit-content;
-  }
-  li{
+    margin-top: 20px;
     display: flex;
-    padding: 40px;
-    background-color: var(--bg-color-alt);
     justify-content: center;
-    align-items: center;
-    border-radius: 20px;
-    width: 300px;
-    height: 350px;
-    transition: 0.3s background-color;
-    cursor: pointer;
-  }
-  img {
-    margin: 10px;
-    max-height: 160px;
-    aspect-ratio: 1/1;
-    width: fit-content;
-  }
-  li:hover {
-    background-color: #0069ff;
-  }
-}
\ No newline at end of file
+
+    ul {
+        justify-content: space-around;
+        max-width: fit-content;
+    }
+    li {
+        display: flex;
+        padding: 40px;
+        background-color: var(--bg-color-alt);
+        justify-content: center;
+        align-items: center;
+        border-radius: 20px;
+        width: 300px;
+        height: 350px;
+        transition: 0.3s background-color;
+        cursor: pointer;
+    }
+    img {
+        margin: 10px;
+        max-height: 160px;
+        width: fit-content;
+    }
+    li:hover {
+        background-color: #0069ff;
+    }
+}