diff --git a/index.html b/index.html
index 1cf8008..d1fe1fa 100644
--- a/index.html
+++ b/index.html
@@ -2,11 +2,14 @@
 <html lang="hu">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
     <title>Telefonkönyv</title>
   </head>
-  <body class="bg-gray-50 text-gray-900">
-    <div id="app"></div>
+  <body class="flex flex-col overflow-x-hidden w-full">
+    <div id="app" class="flex flex-col w-full h-screen"></div>
+    <div class="felx flex-row bg-neutral-600 text-white">
+      <div class="flex w-fit justify-self-center">© Zombori Péter - 2025</div>
+    </div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index f404939..30e2556 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,31 +1,77 @@
 <template>
-  <main class="min-h-screen p-6">
-    <h1 class="text-3xl font-bold mb-4">Telefonkönyv – Frontend</h1>
-
-    <section class="space-y-3">
-      <div class="p-4 rounded-2xl border bg-white shadow-sm">
-        <div class="text-sm opacity-70 mb-2">
-          API prefix: <code>{{ apiBase }}</code>
-        </div>
-
-        <button
-          class="px-4 py-2 rounded-xl border shadow hover:bg-gray-100"
-          @click="checkHealth"
-        >
-          / (health) hívása
-        </button>
-
-        <button
-          class="ml-2 px-4 py-2 rounded-xl border shadow hover:bg-gray-100"
-          @click="authTest"
-        >
-          /auth (admin,admin) hívása
-        </button>
-
-        <pre class="mt-3 p-3 bg-gray-100 rounded-xl text-sm overflow-auto">{{ out }}</pre>
+  <!-- Login oldal rész -->
+  <div v-if="pageStatus=='logout'" class="flex flex-col w-full h-full">
+    <div class="flex flex-row-reverse font-serif p-2">
+      <div class="flex">API Status: 
+        
+        <svg v-if="loginCheck" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="flex size-6 ml-2 fill-green-500">
+            <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
+        </svg>
+  
+        <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="flex size-6 ml-2 fill-red-500">
+          <path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
+        </svg>
+  
+  
       </div>
-    </section>
-  </main>
+      <div class="flex mr-5">API Info: {{ apiBase }} </div>
+    </div>
+    <div class="flex w-full h-full justify-center items-center">
+      
+      <div class="flex flex-col w-1/4 h-max bg-stone-300 p-4 rounded-xl">
+        <div class="flex flex-row font-serif text-2xl">{{loginErrorMsg}}</div>
+        <hr class="flex border-2 border-black mb-5">
+        <input v-model="userLoginName" type="text" class="flex p-2 mb-1 font-serif" placeholder="Felhasználónév">
+        <input v-model="userLoginPw" type="password" class="flex p-2 font-serif" :class="{hidden: isLoading}" placeholder="Jelszó">
+        <div class="flex flex-row-reverse w-full h-max" >
+          <input @click="loginUser" type="submit" value="Login" class="flex bg-neutral-500 text-white mt-5 px-3 py-1 rounded-xl w-min"></input>
+        </div>
+      </div>
+  
+    </div>
+  </div>
+  <!-- Dashboard oldal nézet -->
+  <div v-else-if="pageStatus=='contacts'" class="flex flex-row w-full h-full bg-red-300">
+    <!-- Menü -->
+    <div class="flex flex-col w-1/6 h-full bg-neutral-400 py-10 px-3 space-y-3">
+      
+      <!-- Menü Item -->
+       <div class="flex flex-row h-fit w-full border-dashed border-2 border-neutral-300 p-1 rounded-lg justify-between">
+          <div class="flex h-min w-fit ">Telefonkönyv</div>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex size-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75v-4.5m0 4.5h4.5m-4.5 0 6-6m-3 18c-8.284 0-15-6.716-15-15V4.5A2.25 2.25 0 0 1 4.5 2.25h1.372c.516 0 .966.351 1.091.852l1.106 4.423c.11.44-.054.902-.417 1.173l-1.293.97a1.062 1.062 0 0 0-.38 1.21 12.035 12.035 0 0 0 7.143 7.143c.441.162.928-.004 1.21-.38l.97-1.293a1.125 1.125 0 0 1 1.173-.417l4.423 1.106c.5.125.852.575.852 1.091V19.5a2.25 2.25 0 0 1-2.25 2.25h-2.25Z" />
+          </svg>
+       </div>
+
+       <!-- Menü Item -->
+       <div class="flex flex-row h-fit w-full border-dashed border-2 border-neutral-300 p-1 rounded-lg justify-between">
+          <div class="flex h-min w-fit ">Admin</div>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex size-6">
+           <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" />
+          </svg>
+       </div>
+
+       <!-- Menü Item -->
+       <div class="flex flex-row h-fit w-full border-dashed border-2 border-neutral-300 p-1 rounded-lg justify-between">
+          <div class="flex h-min w-fit ">Kijelentkezés</div>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex size-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
+          </svg>
+       </div>
+
+
+    </div>
+    <!-- Oldal -->
+    <div class="flex flex-col w-full h-full bg-neutral-200">
+      <div class="flex px-20 pt-10 pb-5  font-[tahoma] text-5xl "> {{ menuSel }} </div>
+      <hr class="flex border-2 border-black ml-20 mb-6">
+
+      <!-- Contents -->
+      <div class="flex flex-col bg-neutral-50 mx-20 py-5 px-2 h-full">
+        asd
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -33,20 +79,64 @@ import { ref } from 'vue'
 
 const apiBase = `${import.meta.env.VITE_BACKEND_API_HOST}:${import.meta.env.VITE_BACKEND_API_PORT}`
 const out = ref('')
+const pageStatus = ref("logout")
+const loginCheck = ref(false)
+const loginErrorMsg = ref("Bejelentkezés...")
+const userLoginName = ref("")
+const userLoginPw = ref("")
+const userName = ref("")
+const userPassw = ref("")
+const userAdmin = ref(false)
+const isLoading = ref(false)
+const menuSel = ref("Telefonkönyv")    // Telefonkönyv, Admin, Kijelentkezés
+
+
 
 async function checkHealth() {
   out.value = 'Hívás...'
   const res = await fetch(`${apiBase}/`)
-  out.value = JSON.stringify(await res.json(), null, 2)
+  out.value = await res.json()
+  console.log(out.value)
 }
 
-async function authTest() {
+async function authUser(u, p) {
   out.value = 'Hívás...'
   const res = await fetch(`${apiBase}/auth`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ authUname: 'admin', authPw: 'admin' })
+    body: JSON.stringify({ authUname: u, authPw: p })
   })
-  out.value = JSON.stringify(await res.json(), null, 2)
+  out.value = await res.json()
+  console.log(out.value)
+  
+  if (out.value.ok == true) {
+    pageStatus.value = "contacts"
+    userAdmin.value = out.value.admin
+  } else {
+    loginErrorMsg.value = "Hiba..."
+  }
+
 }
+
+async function loginUser() {
+  isLoading.value = true
+  console.log(`Authenticateing user ${userLoginName.value}`)
+  authUser(userLoginName.value, userLoginPw.value)
+  isLoading.value = false
+}
+
+// async IIFE
+(async () => {
+  out.value = ""
+  await checkHealth()
+  if (out.value.status == "ok") {
+    loginCheck.value = true
+    console.log("[API] ok")
+  }
+  else {
+    loginCheck.value = false
+    console.log("[API] not ok") 
+  }
+
+})();
 </script>
