diff --git a/src/assets/globe.png b/src/assets/globe.png
new file mode 100644
index 0000000..052ba1e
Binary files /dev/null and b/src/assets/globe.png differ
diff --git a/src/assets/wifi.svg b/src/assets/wifi.svg
new file mode 100644
index 0000000..5d72b33
--- /dev/null
+++ b/src/assets/wifi.svg
@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="wifi.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showguides="true">
+    <sodipodi:guide
+       position="60,60"
+       orientation="0,1"
+       id="guide22"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,134,229)" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g25"
+       transform="translate(4.4218967e-7,-8.967447)">
+      <path
+         style="fill:none;stroke:#ffffff;stroke-width:8.79773;stroke-dasharray:none;stroke-dashoffset:0;paint-order:normal"
+         id="path22"
+         sodipodi:type="arc"
+         sodipodi:cx="60"
+         sodipodi:cy="-96.012047"
+         sodipodi:rx="28.037905"
+         sodipodi:ry="28.037905"
+         sodipodi:start="0.52359878"
+         sodipodi:end="2.6179939"
+         sodipodi:arc-type="arc"
+         d="M 84.281538,-81.993094 A 28.037905,28.037905 0 0 1 60,-67.974142 28.037905,28.037905 0 0 1 35.718462,-81.993095"
+         sodipodi:open="true"
+         transform="scale(1,-1)" />
+      <circle
+         style="fill:#f9f9f9;stroke-width:1.099;stroke-dasharray:none"
+         id="path4"
+         cy="93.541939"
+         cx="60"
+         r="11.505052" />
+      <path
+         style="fill:none;stroke:#ffffff;stroke-width:8.79773;stroke-dasharray:none;stroke-dashoffset:0;paint-order:normal"
+         id="path22-2"
+         sodipodi:type="arc"
+         sodipodi:cx="60"
+         sodipodi:cy="-95.726982"
+         sodipodi:rx="46.214443"
+         sodipodi:ry="46.214443"
+         sodipodi:start="0.52359878"
+         sodipodi:end="2.6179939"
+         sodipodi:arc-type="arc"
+         d="M 100.02288,-72.61976 A 46.214443,46.214443 0 0 1 60,-49.512539 46.214443,46.214443 0 0 1 19.977118,-72.619761"
+         sodipodi:open="true"
+         transform="scale(1,-1)" />
+      <path
+         style="fill:none;stroke:#ffffff;stroke-width:8.79773;stroke-dasharray:none;stroke-dashoffset:0;paint-order:normal"
+         id="path22-2-7"
+         sodipodi:type="arc"
+         sodipodi:cx="60"
+         sodipodi:cy="-93.624603"
+         sodipodi:rx="62.573677"
+         sodipodi:ry="62.573677"
+         sodipodi:start="0.52359878"
+         sodipodi:end="2.6179939"
+         sodipodi:arc-type="arc"
+         d="M 114.19039,-62.337765 A 62.573677,62.573677 0 0 1 60,-31.050926 62.573677,62.573677 0 0 1 5.8096054,-62.337766"
+         sodipodi:open="true"
+         transform="scale(1,-1)" />
+    </g>
+  </g>
+</svg>
diff --git a/src/pages/BasicDashboard.vue b/src/pages/BasicDashboard.vue
index 51d7b55..e4dc7ff 100644
--- a/src/pages/BasicDashboard.vue
+++ b/src/pages/BasicDashboard.vue
@@ -39,7 +39,9 @@
         </RouterLink>
       </ul>
     </div>
-    <RouterView id="basicComponents"/>
+    <div id="basicComponents">
+      <RouterView/>
+    </div>
   </div>
 </template>
 
diff --git a/src/pages/basicDashboard/Overview.vue b/src/pages/basicDashboard/Overview.vue
index e3aa96c..40d650c 100644
--- a/src/pages/basicDashboard/Overview.vue
+++ b/src/pages/basicDashboard/Overview.vue
@@ -1,6 +1,75 @@
 <template>
-  <div>
+  <div id="overviewComponent">
     <h2 class="title">Overview</h2>
+    <ul>
+      <li>
+        <svg version="1.1" viewBox="0 -4 115.92 120" xmlns="http://www.w3.org/2000/svg">
+          <g transform="translate(-2.1685 -3.7025)">
+            <g fill="none" stroke="#fff">
+              <ellipse transform="matrix(1.1232 0 0 1.1232 -7.2654 -7.4582)" cx="60" cy="59.554" rx="47.684" ry="45.701" stroke-width="7.833"/>
+              <ellipse transform="rotate(90)" cx="58.967" cy="-60.126" rx="51.358" ry="28.519" stroke-width="7.198"/>
+              <ellipse cx="60.126" cy="28.382" rx="36.141" ry="18.7" stroke-width="7.2368"/>
+              <ellipse cx="60.126" cy="90.237" rx="36.119" ry="18.927" stroke-width="7.2342"/>
+            </g>
+            <rect x="56.527" y="8.3201" width="7.198" height="102.86" ry="0" fill="#fff" stroke-width="0"/>
+          </g>
+        </svg>
+        <h3>Internet</h3>
+        <span style="background-color: var(--good-indicator);">Online: LAN4</span>
+      </li>
+      <li>
+        <svg version="1.1" viewBox="0 -20 116 120" xmlns="http://www.w3.org/2000/svg">
+          <g transform="translate(-2.0001 -17.685)">
+            <circle cx="60" cy="84.574" r="11.505" fill="#f9f9f9" stroke-width="1.099"/>
+            <g fill="none" stroke="#fff" stroke-width="8.7977">
+              <path transform="scale(1,-1)" d="m84.282-73.026a28.038 28.038 0 0 1-24.282 14.019 28.038 28.038 0 0 1-24.282-14.019" style="paint-order:normal"/>
+              <path transform="scale(1,-1)" d="m100.02-63.652a46.214 46.214 0 0 1-40.023 23.107 46.214 46.214 0 0 1-40.023-23.107" style="paint-order:normal"/>
+              <path transform="scale(1,-1)" d="m114.19-53.37a62.574 62.574 0 0 1-54.19 31.287 62.574 62.574 0 0 1-54.19-31.287" style="paint-order:normal"/>
+            </g>
+          </g>
+        </svg>
+        <h3>Wifi</h3>
+        <span style="background-color: var(--warning-indicator);">
+          5Ghz: On | 2.4Ghz: Off
+        </span>
+      </li>
+      <li>
+        <svg version="1.1" viewBox="0 -14 105.42 120" xmlns="http://www.w3.org/2000/svg">
+          <g transform="translate(-7.2896 -15.784)">
+            <g transform="matrix(1.4408 0 0 1.4116 -26.451 -12.591)">
+            <rect x="26.334" y="23.019" width="67.332" height="42.58" ry="4.3365" fill="none" stroke="#fff" stroke-width="5.834"/>
+            <g fill="#fff" stroke-width="0">
+              <rect x="57.113" y="65.717" width="5.7745" height="14.83" ry="0"/>
+              <rect x="58.961" y="67.719" width="1.5653" height="3.0535"/>
+              <rect x="41.291" y="78.287" width="37.419" height="5.8942" ry="2.5257"/>
+            </g>
+            </g>
+          </g>
+        </svg>
+        <h3>
+          Devices
+        </h3>
+        <span>Online: 0</span>
+      </li>
+      <li>
+        <h3>
+          File Sharing
+        </h3>
+        <span style="background-color: var(--bad-indicator);">Offline</span>
+      </li>
+      <li>
+        <h3>
+          QoS
+        </h3>
+        <span style="background-color: var(--good-indicator);">Online</span>
+      </li>
+      <li>
+        <h3>
+          Guest Network
+        </h3>
+        <span style="background-color: var(--bad-indicator);">Offline</span>
+      </li>
+    </ul>
   </div>
 </template>
 
diff --git a/src/styles/basicDashboard.css b/src/styles/basicDashboard.css
index 08f8f27..34959a9 100644
--- a/src/styles/basicDashboard.css
+++ b/src/styles/basicDashboard.css
@@ -14,6 +14,7 @@
   min-height: 100%;
   padding: var(--alt-padding);
   border-radius: var(--border-radius);
+  flex-shrink: 0;
 
   h2 {
     text-align: center;
@@ -53,4 +54,49 @@
   padding: var(--alt-padding);
   border-radius: var(--border-radius);
   background-color: var(--dark-bg-alt-color);
+}
+
+#overviewComponent {
+  ul {
+    margin: 20px auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    list-style: none;
+    justify-content: center;
+    max-width: 730px;
+
+    li {
+      display: inherit;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--dark-bg-alt-2-color);
+      height: 200px;
+      padding: var(--alt-padding);
+      width: 230px;
+      border-radius: 20px;
+      cursor: pointer;
+      transition: 0.3s background-color;
+    }
+    li:hover {
+      background-color: var(--dark-alt-highlight-color);
+    }
+    img {
+      width: 80px;
+    }
+    svg {
+      height: 100px;
+      padding: 5px;
+      box-sizing: content-box;
+    }
+    span {
+      width: 100%;
+      height: 30px;
+      background-color: var(--neutral-indicator);
+      border-radius: var(--alt-border-radius);
+      text-align: center;
+      line-height: 30px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
index 6dc2034..64ddbf9 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -7,11 +7,16 @@
   --padding: 20px;
   --alt-padding: 10px;
   --border-radius: 20px;
+  --alt-border-radius: 5px;
   --dark-bg-color: #161616;
   --dark-bg-alt-color: #0f0f0f;
   --dark-bg-alt-2-color: #000;
   --dark-highlight-color: #0084ff;
   --dark-alt-highlight-color: #006bcf;
+  --neutral-indicator: #808080;
+  --good-indicator: #44c71c;
+  --warning-indicator: #b6b614;  
+  --bad-indicator: #ad1c1c;
 }
 
 * {