diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..3e1aee11
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,28 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "client: chrome",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "server: nuxt",
+            "outputCapture": "std",
+            "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
+            "args": ["dev"]
+        }
+    ],
+    "compounds": [
+        {
+            "name": "fullstack: nuxt",
+            "configurations": ["server: nuxt", "client: chrome"]
+        }
+    ]
+}
diff --git a/components/AdminPanelDesktopSidebar.vue b/components/AdminPanelDesktopSidebar.vue
new file mode 100644
index 00000000..60ed2368
--- /dev/null
+++ b/components/AdminPanelDesktopSidebar.vue
@@ -0,0 +1,70 @@
+<template>
+    <div class="lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
+        <div
+            class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4"
+        >
+            <nav class="mt-5 flex flex-1 flex-col">
+                <ul role="list" class="flex flex-1 flex-col gap-y-7">
+                    <li
+                        v-for="(item, index) in adminStore.panelItems"
+                        :key="index"
+                    >
+                        <ul role="list" class="-mx-2 space-y-1">
+                            <li>
+                                <button
+                                    @click="
+                                        adminStore.setSelectedComponent(
+                                            item.component
+                                        )
+                                    "
+                                    :class="
+                                        adminStore.selectedComponent ==
+                                        item.component
+                                            ? 'bg-indigo-700 text-white'
+                                            : 'text-indigo-200'
+                                    "
+                                    class="w-full group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+                                >
+                                    {{ item.displayText }}
+                                </button>
+                            </li>
+                        </ul>
+                    </li>
+
+                    <li class="mt-auto">
+                        <button
+                            class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white"
+                        >
+                            <svg
+                                class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke-width="1.5"
+                                stroke="currentColor"
+                                aria-hidden="true"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+                                />
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                                />
+                            </svg>
+                            Settings
+                        </button>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useAdminPanelStore } from "../stores/adminPanelStore";
+
+const adminStore = useAdminPanelStore();
+</script>
diff --git a/components/AdminPanelFacilities.vue b/components/AdminPanelFacilities.vue
new file mode 100644
index 00000000..a7b6f656
--- /dev/null
+++ b/components/AdminPanelFacilities.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>Facilities</div>
+</template>
diff --git a/components/AdminPanelHealthcareProfessionals.vue b/components/AdminPanelHealthcareProfessionals.vue
new file mode 100644
index 00000000..f20b1828
--- /dev/null
+++ b/components/AdminPanelHealthcareProfessionals.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>Healthcare Professionals</div>
+</template>
diff --git a/components/AdminPanelSubmissions.vue b/components/AdminPanelSubmissions.vue
new file mode 100644
index 00000000..6ebfe073
--- /dev/null
+++ b/components/AdminPanelSubmissions.vue
@@ -0,0 +1,137 @@
+<template>
+    <div class="mx-8">
+        <h1>Submissions</h1>
+        <div class="flex flex-row mt-8">
+            <section>
+                <h2>Original submission</h2>
+                <div>
+                    <span>ID:</span>
+                    <span> some ID</span>
+                </div>
+                <div>
+                    <span>Created date:</span>
+                    <span> some date</span>
+                </div>
+                <div>
+                    <span>Google maps URL:</span>
+                    <span> some URL</span>
+                </div>
+                <div>
+                    <span>Healthcare professional name:</span>
+                    <span> some name</span>
+                </div>
+                <div>
+                    <span>Is Approved:</span>
+                    <span> False</span>
+                </div>
+                <div>
+                    <span>Is Rejected:</span>
+                    <span> False</span>
+                </div>
+                <div>
+                    <span>Is Under Review:</span>
+                    <span> True</span>
+                </div>
+                <div>
+                    <span>Notes:</span>
+                    <span> some notes</span>
+                </div>
+                <div>
+                    <span>Spoken languages:</span>
+                    <span> some language 1 , some language 2</span>
+                </div>
+                <div>
+                    <span>Updated date:</span>
+                    <span> some date</span>
+                </div>
+            </section>
+            <div class="mx-8">
+                <section>
+                    <h2>Facility Input</h2>
+                    <div class="flex flex-col">
+                        <div>
+                            <span>ID:</span>
+                            <span> some ID</span>
+                        </div>
+                        <label>facility name en</label>
+                        <input type="text" />
+                        <label>address line 1 en</label>
+                        <input type="text" />
+                        <label>address line 2 en</label>
+                        <input type="text" />
+                        <label>city en</label>
+                        <input type="text" />
+                        <label>prefecture en</label>
+                        <input type="text" />
+                        <label>facility name ja</label>
+                        <input type="text" />
+                        <label>address line 1 ja</label>
+                        <input type="text" />
+                        <label>address line 1 ja</label>
+                        <input type="text" />
+                        <label>city ja</label>
+                        <input type="text" />
+                        <label>prefecture ja</label>
+                        <input type="text" />
+                        <label>postal code</label>
+                        <input type="text" />
+                        <label>email address</label>
+                        <input type="text" />
+                        <label>phone number</label>
+                        <input type="text" />
+                        <label>google maps url</label>
+                        <input type="text" />
+                        <label>website url</label>
+                        <input type="text" />
+                        <label>map latitude</label>
+                        <input type="text" />
+                        <label>map longitude</label>
+                        <input type="text" />
+                        <label>healthcare professional Ids</label>
+                        <input type="text" disabled />
+                        <label>created date</label>
+                        <input type="text" disabled />
+                        <label>updated date</label>
+                        <input type="text" disabled />
+                        <button>Save Facility</button>
+                    </div>
+                </section>
+                <section class="mt-8">
+                    <h2>Healthcare Professional Input</h2>
+                    <div>
+                        <span>ID:</span>
+                        <span> some ID</span>
+                    </div>
+                    <div class="flex flex-col">
+                        <!-- change to select -->
+                        <label>accepted insurance</label>
+                        <input type="text" />
+                        <label>degrees</label>
+                        <input type="text" />
+                        <label>created date</label>
+                        <input type="text" disabled />
+                        <label>facility ids</label>
+                        <input type="text" />
+                        <!-- add locale btn -->
+                        <label>first name</label>
+                        <input type="text" />
+                        <label>last name</label>
+                        <input type="text" />
+                        <label>locale</label>
+                        <input type="text" />
+                        <label>specialties</label>
+                        <input type="text" />
+                        <!-- change to select -->
+                        <label>spoken languages</label>
+                        <input type="text" />
+                        <label>created date</label>
+                        <input type="text" disabled />
+                        <label>updated date</label>
+                        <input type="text" disabled />
+                        <button>Save Healthcare Professional</button>
+                    </div>
+                </section>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/package.json b/package.json
index 20a8bb98..90e870c7 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "dependencies": {
         "@apollo/client": "^3.8.8",
         "@pinia/nuxt": "^0.5.1",
+        "@tailwindcss/forms": "^0.5.7",
         "@vue/apollo-composable": "^4.0.0-beta.12",
         "graphql": "^16.8.1",
         "pinia": "^2.1.7",
diff --git a/pages/adminpanel.vue b/pages/adminpanel.vue
new file mode 100644
index 00000000..651f9918
--- /dev/null
+++ b/pages/adminpanel.vue
@@ -0,0 +1,22 @@
+import AdminPanelDesktopSidebar from
+'~/components/AdminPanelDesktopSidebar.vue';
+<template>
+    <div>
+        <AdminPanelDesktopSidebar />
+        <AdminPanelSubmissions
+            v-show="adminStore.selectedComponent == 'submissions'"
+        />
+        <AdminPanelFacilities
+            v-show="adminStore.selectedComponent == 'facilities'"
+        />
+        <AdminPanelHealthcareProfessionals
+            v-show="adminStore.selectedComponent == 'healthcareProfessionals'"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useAdminPanelStore } from "../stores/adminPanelStore";
+
+const adminStore = useAdminPanelStore();
+</script>
diff --git a/stores/adminPanelStore.ts b/stores/adminPanelStore.ts
new file mode 100644
index 00000000..cf33bf81
--- /dev/null
+++ b/stores/adminPanelStore.ts
@@ -0,0 +1,30 @@
+import { defineStore } from "pinia"
+import { Ref, ref, watch } from 'vue'
+
+export const useAdminPanelStore = defineStore('adminPanelStore', () => {
+    let selectedComponent = ref('submissions')
+    const panelOpen = ref(false)
+    const panelItems = {
+        "submissions": { "displayText": "Submissions", "component": "submissions" },
+        "facilities": { "displayText": "Facilities", "component": "facilities" },
+        "healthcareProfessionals": { "displayText": "Healthcare Professionals", "component": "healthcareProfessionals" },
+    }
+
+
+    function setSelectedComponent(component: string) {
+        selectedComponent.value = component
+    }
+
+    function togglePanel() {
+        console.log("menu= ", panelOpen.value)
+        panelOpen.value = !panelOpen.value
+    }
+
+    return {
+        panelItems,
+        panelOpen,
+        selectedComponent,
+        setSelectedComponent,
+        togglePanel
+    }
+})
diff --git a/tailwind.config.js b/tailwind.config.js
index 629f228f..fa07aa75 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -46,5 +46,5 @@ module.exports = {
             zinc: colors.zinc
         }
     },
-    plugins: []
+    plugins: [require('@tailwindcss/forms')]
 }