diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
new file mode 100644
index 0000000..b28927e
--- /dev/null
+++ b/src/components/AppHeader/AppHeader.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <a href="#main-content">Skip to main content</a>
+    <header>
+      <b-navbar toggleable="lg" type="dark" variant="primary">
+        <div>
+          <router-link to="/">{{ orgName }} System Management</router-link>
+        </div>
+        <div>
+          <span>{{ serverName }}</span>
+          <span>{{ ipAddress }}</span>
+        </div>
+        <div>
+          <b-button variant="link">
+            <Renew20 />
+            Refresh Data
+          </b-button>
+          <b-button variant="link">
+            <user-avatar-20 />
+            User Avatar
+          </b-button>
+        </div>
+      </b-navbar>
+    </header>
+  </div>
+</template>
+
+<script>
+import UserAvatar20 from "@carbon/icons-vue/es/user--avatar/20";
+import Renew20 from "@carbon/icons-vue/es/renew/20";
+export default {
+  name: "AppHeader",
+  components: { Renew20, UserAvatar20 },
+  data() {
+    return {
+      orgName: "OpenBMC",
+      serverName: "Server Name",
+      ipAddress: "127.0.0.0"
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/AppHeader/index.js b/src/components/AppHeader/index.js
new file mode 100644
index 0000000..b8f3ab3
--- /dev/null
+++ b/src/components/AppHeader/index.js
@@ -0,0 +1,2 @@
+import AppHeader from "./AppHeader";
+export default AppHeader;
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
new file mode 100644
index 0000000..e5a1eee
--- /dev/null
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -0,0 +1,31 @@
+<template>
+  <nav>
+    <ul>
+      <li><router-link to="/">Overview</router-link></li>
+      <li>
+        <router-link to="/access-control/local-user-management"
+          >Local User Management</router-link
+        >
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+// import Analytics16 from "@carbon/icons-vue/es/analytics/16";
+// import DataCheck16 from "@carbon/icons-vue/es/data--check/16";
+// import SettingsAdjust16 from "@carbon/icons-vue/es/settings--adjust/16";
+// import Settings16 from "@carbon/icons-vue/es/settings/16";
+// import Password16 from "@carbon/icons-vue/es/password/16";
+
+export default {
+  name: "AppNavigation"
+  // components: {
+  //   Analytics16,
+  //   DataCheck16,
+  //   SettingsAdjust16,
+  //   Settings16,
+  //   Password16
+  // }
+};
+</script>
diff --git a/src/components/AppNavigation/index.js b/src/components/AppNavigation/index.js
new file mode 100644
index 0000000..8046f70
--- /dev/null
+++ b/src/components/AppNavigation/index.js
@@ -0,0 +1,2 @@
+import AppNavigation from "./AppNavigation";
+export default AppNavigation;
diff --git a/src/components/AppOverview/AppOverview.vue b/src/components/AppOverview/AppOverview.vue
new file mode 100644
index 0000000..055c911
--- /dev/null
+++ b/src/components/AppOverview/AppOverview.vue
@@ -0,0 +1,12 @@
+<template>
+  <h1>Overview</h1>
+</template>
+
+<script>
+export default {
+  name: "AppOverview",
+  data() {
+    return {};
+  }
+};
+</script>
diff --git a/src/components/AppOverview/index.js b/src/components/AppOverview/index.js
new file mode 100644
index 0000000..3f1a43b
--- /dev/null
+++ b/src/components/AppOverview/index.js
@@ -0,0 +1,2 @@
+import AppOverview from "./AppOverview";
+export default AppOverview;