diff --git a/webapp/src/components/AboutView.vue b/webapp/src/components/AboutView.vue
index 2d03659..85254b2 100644
--- a/webapp/src/components/AboutView.vue
+++ b/webapp/src/components/AboutView.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="bg-light p-5 rounded">
-    <h1>About</h1>
+  <div class="container" role="main">
+    <div class="page-header">
+      <h1>About</h1>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/webapp/src/components/HomeView.vue b/webapp/src/components/HomeView.vue
index c4a8821..61c1951 100644
--- a/webapp/src/components/HomeView.vue
+++ b/webapp/src/components/HomeView.vue
@@ -1,5 +1,17 @@
 <template>
-  <div class="bg-light p-5 rounded">
-    <h1>Home</h1>
+  <div class="container" role="main">
+    <div class="page-header">
+      <h1>Home</h1>
+    </div>
+    <div class="bg-light p-5 rounded">
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+
+export default {
+  components: {
+  },
+};
+</script>
\ No newline at end of file
diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue
index 5914291..a827cc1 100644
--- a/webapp/src/components/NavBar.vue
+++ b/webapp/src/components/NavBar.vue
@@ -15,8 +15,27 @@
       </button>
       <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
         <div class="navbar-nav">
-          <router-link class="nav-link" to="/">Home</router-link>
-          <router-link class="nav-link" to="/about">About</router-link>
+          <li class="nav-item">
+            <router-link class="nav-link" to="/">Home</router-link>
+          </li>
+          <li class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle"
+              href="#"
+              id="navbarScrollingDropdown"
+              role="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              Info
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
+              <li><router-link class="dropdown-item" to="/info/network">Network</router-link></li>
+            </ul>
+          </li>
+          <li class="nav-item">
+            <router-link class="nav-link" to="/about">About</router-link>
+          </li>
         </div>
       </div>
     </div>
diff --git a/webapp/src/components/NetworkInfoView.vue b/webapp/src/components/NetworkInfoView.vue
new file mode 100644
index 0000000..d2165c0
--- /dev/null
+++ b/webapp/src/components/NetworkInfoView.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="container" role="main">
+    <div class="page-header">
+      <h1>Network Info</h1>
+    </div>
+    <div class="bg-light p-5 rounded">
+      <WifiStationInfo />
+      <WifiApInfo />
+      <InterfaceStationInfo />
+      <InterfaceApInfo />
+    </div>
+  </div>
+</template>
+
+<script>
+import WifiStationInfo from "./partials/WifiStationInfo.vue";
+import WifiApInfo from "./partials/WifiApInfo.vue"
+import InterfaceStationInfo from "./partials/InterfaceStationInfo.vue"
+import InterfaceApInfo from "./partials/InterfaceApInfo.vue"
+
+export default {
+  components: {
+    WifiStationInfo,
+    WifiApInfo,
+    InterfaceStationInfo,
+    InterfaceApInfo,
+  },
+};
+</script>
\ No newline at end of file
diff --git a/webapp/src/components/partials/InterfaceApInfo.vue b/webapp/src/components/partials/InterfaceApInfo.vue
new file mode 100644
index 0000000..96fe21f
--- /dev/null
+++ b/webapp/src/components/partials/InterfaceApInfo.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="card">
+    <div class="card-header text-white bg-primary">
+      Network Interface (Access Point)
+    </div>
+    <div class="card-body">
+      <div class="table-responsive">
+        <table id="wifi_sta" class="table table-hover table-condensed">
+          <tbody id="wifi_sta-data">
+            <tr>
+              <th>IP Address</th>
+              <td>{{ networkDataList.ap_ip }}</td>
+            </tr>
+            <tr>
+              <th>MAC Address</th>
+              <td>{{ networkDataList.ap_mac }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      networkDataList: [],
+    };
+  },
+  created() {
+    this.getNetworkInfo();
+  },
+  methods: {
+    getNetworkInfo() {
+      fetch("/api/network/status")
+        .then((response) => response.json())
+        .then((data) => (this.networkDataList = data));
+    },
+    getRSSIasQuality(rssi) {
+      var quality = 0;
+
+      if (rssi <= -100) {
+        quality = 0;
+      } else if (rssi >= -50) {
+        quality = 100;
+      } else {
+        quality = 2 * (rssi + 100);
+      }
+
+      return quality;
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/partials/InterfaceStationInfo.vue b/webapp/src/components/partials/InterfaceStationInfo.vue
new file mode 100644
index 0000000..09398d0
--- /dev/null
+++ b/webapp/src/components/partials/InterfaceStationInfo.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="card">
+    <div class="card-header text-white bg-primary">
+      Network Interface (Station)
+    </div>
+    <div class="card-body">
+      <div class="table-responsive">
+        <table id="wifi_sta" class="table table-hover table-condensed">
+          <tbody id="wifi_sta-data">
+            <tr>
+              <th>IP Address</th>
+              <td>{{ networkDataList.sta_ip }}</td>
+            </tr>
+            <tr>
+              <th>Netmask</th>
+              <td>{{ networkDataList.sta_netmask }}</td>
+            </tr>
+            <tr>
+              <th>Default Gateway</th>
+              <td>{{ networkDataList.sta_gateway }}</td>
+            </tr>
+            <tr>
+              <th>DNS 1</th>
+              <td>{{ networkDataList.sta_dns1 }}</td>
+            </tr>
+            <tr>
+              <th>DNS 2</th>
+              <td>{{ networkDataList.sta_dns2 }}</td>
+            </tr>
+            <tr>
+              <th>MAC Address</th>
+              <td>{{ networkDataList.sta_mac }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      networkDataList: [],
+    };
+  },
+  created() {
+    this.getNetworkInfo();
+  },
+  methods: {
+    getNetworkInfo() {
+      fetch("/api/network/status")
+        .then((response) => response.json())
+        .then((data) => (this.networkDataList = data));
+    },
+    getRSSIasQuality(rssi) {
+      var quality = 0;
+
+      if (rssi <= -100) {
+        quality = 0;
+      } else if (rssi >= -50) {
+        quality = 100;
+      } else {
+        quality = 2 * (rssi + 100);
+      }
+
+      return quality;
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/partials/WifiApInfo.vue b/webapp/src/components/partials/WifiApInfo.vue
new file mode 100644
index 0000000..b6d4490
--- /dev/null
+++ b/webapp/src/components/partials/WifiApInfo.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="card">
+    <div class="card-header text-white bg-primary">
+      WiFi Information (Access Point)
+    </div>
+    <div class="card-body">
+      <div class="table-responsive">
+        <table id="wifi_sta" class="table table-hover table-condensed">
+          <tbody id="wifi_sta-data">
+            <tr>
+              <th>Status</th>
+              <td
+                class="badge"
+                :class="{
+                  'bg-danger': !networkDataList.ap_status,
+                  'bg-success': networkDataList.ap_status,
+                }"
+              >
+                <span v-if="networkDataList.ap_status">enabled</span>
+                <span v-else>disabled</span>
+              </td>
+            </tr>
+            <tr>
+              <th>SSID</th>
+              <td>{{ networkDataList.ap_ssid }}</td>
+            </tr>
+            <tr>
+              <th># Stations</th>
+              <td>{{ networkDataList.ap_stationnum }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      networkDataList: [],
+    };
+  },
+  created() {
+    this.getNetworkInfo();
+  },
+  methods: {
+    getNetworkInfo() {
+      fetch("/api/network/status")
+        .then((response) => response.json())
+        .then((data) => (this.networkDataList = data));
+    },
+    getRSSIasQuality(rssi) {
+      var quality = 0;
+
+      if (rssi <= -100) {
+        quality = 0;
+      } else if (rssi >= -50) {
+        quality = 100;
+      } else {
+        quality = 2 * (rssi + 100);
+      }
+
+      return quality;
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/partials/WifiStationInfo.vue b/webapp/src/components/partials/WifiStationInfo.vue
new file mode 100644
index 0000000..5c6c507
--- /dev/null
+++ b/webapp/src/components/partials/WifiStationInfo.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="card">
+    <div class="card-header text-white bg-primary">
+      WiFi Information (Station)
+    </div>
+    <div class="card-body">
+      <div class="table-responsive">
+        <table id="wifi_sta" class="table table-hover table-condensed">
+          <tbody id="wifi_sta-data">
+            <tr>
+              <th>Status</th>
+              <td
+                class="badge"
+                :class="{
+                  'bg-danger': !networkDataList.sta_status,
+                  'bg-success': networkDataList.sta_status,
+                }"
+              >
+                <span v-if="networkDataList.sta_status">enabled</span>
+                <span v-else>disabled</span>
+              </td>
+            </tr>
+            <tr>
+              <th>SSID</th>
+              <td>{{ networkDataList.sta_ssid }}</td>
+            </tr>
+            <tr>
+              <th>Quality</th>
+              <td>{{ this.getRSSIasQuality(networkDataList.sta_rssi) }} %</td>
+            </tr>
+            <tr>
+              <th>RSSI</th>
+              <td>{{ networkDataList.sta_rssi }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      networkDataList: [],
+    };
+  },
+  created() {
+    this.getNetworkInfo();
+  },
+  methods: {
+    getNetworkInfo() {
+      fetch("/api/network/status")
+        .then((response) => response.json())
+        .then((data) => (this.networkDataList = data));
+    },
+    getRSSIasQuality(rssi) {
+      var quality = 0;
+
+      if (rssi <= -100) {
+        quality = 0;
+      } else if (rssi >= -50) {
+        quality = 100;
+      } else {
+        quality = 2 * (rssi + 100);
+      }
+
+      return quality;
+    },
+  },
+};
+</script>
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index 95daf14..5e7b6b1 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -1,6 +1,7 @@
 import { createWebHistory, createRouter } from 'vue-router';
 import HomeView from '@/components/HomeView'
 import AboutView from '@/components/AboutView'
+import NetworkInfoView from '@/components/NetworkInfoView'
 
 const routes = [
     {
@@ -12,6 +13,11 @@ const routes = [
         path: '/about',
         name: 'About',
         component: AboutView
+    },
+    {
+        path: '/info/network',
+        name: 'Network',
+        component: NetworkInfoView
     }
 ];
 
diff --git a/webapp/vue.config.js b/webapp/vue.config.js
index 35190d0..b534aef 100644
--- a/webapp/vue.config.js
+++ b/webapp/vue.config.js
@@ -21,5 +21,8 @@ module.exports = defineConfig({
         minRatio: 0.8,
       }
     }
+  },
+  devServer: {
+    proxy: 'http://172.217.28.1/'
   }
 })