diff --git a/api/.env.development b/api/.env.development
deleted file mode 100644
index 50c5a3f6..00000000
--- a/api/.env.development
+++ /dev/null
@@ -1,2 +0,0 @@
-# Prisma environment variables
-DATABASE_URL="file:./db.sqlite"
diff --git a/api/src/app.ts b/api/src/app.ts
index f763f521..85492154 100644
--- a/api/src/app.ts
+++ b/api/src/app.ts
@@ -9,7 +9,12 @@ export const createApp = (): Express => {
   logger.debug('Creating app');
   const app = express();
 
-  app.get('/', expressPlayground({ endpoint: '/api/graphql' }));
+  app.get('/', expressPlayground({
+    endpoint: '/api/graphql',
+    settings: {
+      'editor.theme': 'light',
+    },
+  }));
 
   return app;
 };
diff --git a/frontend/app.vue b/frontend/app.vue
index 2b1be090..fa29d274 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -1,5 +1,14 @@
 <template>
-  <div>
-    <NuxtPage />
+  <div class="h-screen flex flex-col">
+    <LayoutTheHeader class="flex-shrink-0 h-14" />
+    <div class="flex-grow">
+      <NuxtPage />
+    </div>
   </div>
 </template>
+
+<style>
+html, body {
+  @apply bg-neutral-50;
+}
+</style>
diff --git a/frontend/assets/logo.png b/frontend/assets/logo.png
new file mode 100644
index 00000000..56150f28
Binary files /dev/null and b/frontend/assets/logo.png differ
diff --git a/frontend/components/base/MenuItem.vue b/frontend/components/base/MenuItem.vue
new file mode 100644
index 00000000..38a05d85
--- /dev/null
+++ b/frontend/components/base/MenuItem.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="h-full">
+    <div
+      class="h-full flex items-center gap-1 p-2 hover:text-primary transition duration-300"
+      :class="{'text-primary': id === activeId }"
+    >
+      <NIcon v-if="icon" size="22">
+        <Component :is="icon" />
+      </NIcon>
+      <div class="whitespace-nowrap hidden md:block">
+        {{ label }}
+      </div>
+    </div>
+    <div class="h-1 w-full -translate-y-1" :class="{'bg-primary': id === activeId }" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ id: string | number, label: string, icon?: Component, activeId?: string }>()
+</script>
diff --git a/frontend/components/layout/TheHeader.vue b/frontend/components/layout/TheHeader.vue
new file mode 100644
index 00000000..14165cb3
--- /dev/null
+++ b/frontend/components/layout/TheHeader.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="flex items-center justify-between bg-secondary px-1">
+    <div class="flex-1 flex h-full">
+      <nuxt-link to="/" class="LogoLink flex h-full items-center gap-2 py-1">
+        <img src="~/assets/logo.png" class="h-full flex-shrink-0">
+        <h2 class="text-primary opacity-0 transition duration-300 whitespace-nowrap hidden md:block">
+          Switchboard API
+        </h2>
+      </nuxt-link>
+    </div>
+    <LayoutTheMenu class="flex-shrink-0" />
+    <div class="flex-1 flex h-full justify-end items-center pr-1">
+      <a :href="repository.url" target="_blank" class="hover:text-primary transition duration-300">
+        <NIcon size="30">
+          <LogoGithub />
+        </NIcon>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { LogoGithub } from '@vicons/ionicons5'
+import { repository } from '~/package.json'
+</script>
+
+<style scoped>
+.LogoLink:hover h2 {
+  @apply opacity-100 !important;
+}
+</style>
diff --git a/frontend/components/layout/TheMenu.vue b/frontend/components/layout/TheMenu.vue
new file mode 100644
index 00000000..6a81194b
--- /dev/null
+++ b/frontend/components/layout/TheMenu.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="h-full flex gap-3">
+    <template v-for="link of links" :key="link.to">
+      <nuxt-link :to="link.id" class="h-full">
+        <BaseMenuItem v-bind="link" :active-id="$route.path" />
+      </nuxt-link>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  DocumentText24Regular,
+  VideoPerson24Filled,
+  Play24Regular
+} from '@vicons/fluent'
+
+const links = [
+  {
+    id: '/',
+    icon: DocumentText24Regular,
+    label: 'Documentation'
+  },
+  {
+    id: '/user',
+    icon: VideoPerson24Filled,
+    label: 'API Token Generation'
+  },
+  {
+    id: '/graphql-playground',
+    icon: Play24Regular,
+    label: 'GraphQL Playground',
+    disabled: true
+  }
+]
+</script>
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 7bbdde42..125abff2 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -1,10 +1,40 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  app: {
+    head: {
+      title: 'Switchboard API',
+      meta: [
+        { name: 'viewport', content: 'width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0' }
+      ]
+    }
+  },
   modules: [
     '@nuxtjs/tailwindcss',
     '@huntersofbook/naive-ui-nuxt'
   ],
   typescript: {
     shim: false
+  },
+  tailwindcss: {
+    config: {
+      theme: {
+        extend: {
+          colors: {
+            primary: '#e88339',
+            secondary: '#fae6d8'
+          }
+        }
+      },
+      content: []
+    }
+  },
+  naiveUI: {
+    themeOverrides: {
+      common: {
+        primaryColor: '#e88339',
+        primaryColorHover: '#fae6d8',
+        primaryColorPressed: '#fae6d8'
+      }
+    }
   }
 })
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f4c52142..f0263b93 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,15 +1,21 @@
 {
-  "name": "frontend",
+  "name": "powerhouse-switchboard-frontend",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
+      "name": "powerhouse-switchboard-frontend",
+      "version": "0.0.1",
       "hasInstallScript": true,
+      "license": "AGPL-3",
       "devDependencies": {
         "@huntersofbook/naive-ui-nuxt": "^0.7.1",
         "@nuxtjs/eslint-config-typescript": "^12.0.0",
         "@nuxtjs/tailwindcss": "^6.4.0",
         "@types/node": "^18.11.18",
+        "@vicons/fluent": "^0.12.0",
+        "@vicons/ionicons5": "^0.12.0",
         "eslint": "^8.33.0",
         "nuxt": "^3.2.3",
         "typescript": "^4.9.5",
@@ -2360,6 +2366,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@vicons/fluent": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@vicons/fluent/-/fluent-0.12.0.tgz",
+      "integrity": "sha512-ATCiqPuiJ6RI5GBlD3BIpZ9Xw4MsCA4RpI5oR6MCti4quS4mX1Gp6N74FCzw7lgOj+80rV4HMKhZTVInwimpVQ==",
+      "dev": true
+    },
+    "node_modules/@vicons/ionicons5": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@vicons/ionicons5/-/ionicons5-0.12.0.tgz",
+      "integrity": "sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==",
+      "dev": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.1.0.tgz",
@@ -14185,6 +14203,18 @@
         }
       }
     },
+    "@vicons/fluent": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@vicons/fluent/-/fluent-0.12.0.tgz",
+      "integrity": "sha512-ATCiqPuiJ6RI5GBlD3BIpZ9Xw4MsCA4RpI5oR6MCti4quS4mX1Gp6N74FCzw7lgOj+80rV4HMKhZTVInwimpVQ==",
+      "dev": true
+    },
+    "@vicons/ionicons5": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@vicons/ionicons5/-/ionicons5-0.12.0.tgz",
+      "integrity": "sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==",
+      "dev": true
+    },
     "@vitejs/plugin-vue": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 14debfb4..f8f1a08f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,6 +4,10 @@
   "license": "AGPL-3",
   "type": "module",
   "main": ".output/server/index.mjs",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/makerdao-ses/switchboard-boilerplate"
+  },
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -16,9 +20,11 @@
   },
   "devDependencies": {
     "@huntersofbook/naive-ui-nuxt": "^0.7.1",
-    "@nuxtjs/tailwindcss": "^6.4.0",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@nuxtjs/tailwindcss": "^6.4.0",
     "@types/node": "^18.11.18",
+    "@vicons/fluent": "^0.12.0",
+    "@vicons/ionicons5": "^0.12.0",
     "eslint": "^8.33.0",
     "nuxt": "^3.2.3",
     "typescript": "^4.9.5",
diff --git a/frontend/pages/graphql-playground.vue b/frontend/pages/graphql-playground.vue
new file mode 100644
index 00000000..7bf74b17
--- /dev/null
+++ b/frontend/pages/graphql-playground.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="h-full">
+    <iframe src="/api" class="w-full h-full" />
+  </div>
+</template>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index f15ec09d..ebf7352f 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,10 +1,15 @@
 <template>
-  <div class="flex h-screen items-center justify-center">
-    <div class="text-center pb-12">
-      <h1 class="text-xl font-semibold">
+  <div class="flex flex-col h-full px-5 md:px-10">
+    <div class="flex-shrink-0 text-center py-10 md:py-16">
+      <h1 class="text-3xl md:text-6xl font-bold">
         Switchboard API
       </h1>
-      <a href="/api/" class="underline hover:no-underline text-sky-600">API playground</a>
+      <div class="text-sm md:text-base">
+        Open-source API over MakerDA0 models
+      </div>
+    </div>
+    <div class="flex-grow flex items-center justify-center">
+      <div class="w-full h-full bg-white max-w-screen-2xl" />
     </div>
   </div>
 </template>
diff --git a/frontend/pages/user/index.vue b/frontend/pages/user/index.vue
new file mode 100644
index 00000000..ed5b6d75
--- /dev/null
+++ b/frontend/pages/user/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="h-full p-5 md:p-10">
+    <div class="h-full flex items-center justify-center">
+      <div class="w-full h-full bg-white max-w-screen-2xl" />
+    </div>
+  </div>
+</template>