diff --git a/frontend/src/components/header-komponens.vue b/frontend/src/components/header-komponens.vue
index 0f80ceb47a326bf9036345dfda0f346a23f150fd..c49303575862a6ba01407e5f98d4ddd792283783 100644
--- a/frontend/src/components/header-komponens.vue
+++ b/frontend/src/components/header-komponens.vue
@@ -14,28 +14,15 @@ defineProps({
 <template>
   <div class="greetings">
     <img alt="NoteStore logo" class="logo" src="../assets/book-shelf.svg" width="100" height="100" />
-    <h1 class="title">NoteStore</h1>
+    <h1 class="title">TechnoCool NoteStore</h1>
     <div class="login">
       <h3 v-if="(fullName)" class="subtitle">Üdvözöllek, {{ fullName }}!</h3>
-      <button @click="$emit('toggle-login-form')">{{ isLoggedIn ? 'Kijelentkezés' : 'Bejelentkezés' }}</button>
+      <button class="grow" @click="$emit('toggle-login-form')">{{ isLoggedIn ? 'Kijelentkezés' : 'Bejelentkezés' }}</button>
     </div>
   </div>
 </template>
 
 <style scoped>
-.login button {
-  padding: 10px 20px;
-  background-color: lightseagreen;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  font-size: 1rem;
-  cursor: pointer;
-}
-
-.login button:hover {
-  background-color: darkcyan;
-}
 
 .login {
   position: fixed;
@@ -43,7 +30,8 @@ defineProps({
 }
 
 .title {
-  color: lightseagreen;
+  color: var(--lightest);
+  text-shadow: 0 0 10px var(--light);
 }
 
 .title:after{
@@ -80,22 +68,18 @@ h3 {
   }
 
   .greetings {
-    display: flex;
+    display: grid;
     padding: 1em;
-    place-items: center flex-start;
-    flex-wrap: wrap;
-  }
-
-  .space {
-    width: 40%;
+    grid-template-columns: 1fr 4fr 2fr;
+    align-items: center;
   }
 
   .logo {
     margin: 0 2rem 0 0;
   }
-}
 
-.subtitle {
-  margin-bottom: 16px;
+  .subtitle {
+    color: var(--lightest);
+  }
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/loginform-komponens.vue b/frontend/src/components/loginform-komponens.vue
index 859be1908ad481f52b5001ebfad0f872a059c2e3..adfd64207bc1c87fe312a7158fa38ce2cf83741f 100644
--- a/frontend/src/components/loginform-komponens.vue
+++ b/frontend/src/components/loginform-komponens.vue
@@ -31,24 +31,32 @@ function submitForm() {
 </script>
 
 <template>
-  <div>
+  <div class="window">
     <h2>Jelentkezz be!</h2>
-      <form @submit.prevent="submitForm">
-        <div>
-          <label for="username">Felhasználónév:</label>
-          <input type="text" id="username" v-model="credentials.username" required>
-        </div>
-        <div>
-          <label for="password">Jelszó:</label>
-          <input type="password" id="password" v-model="credentials.password" required>
-        </div>
-        <button type="submit">Bejelentkezés</button>
-      </form>
-      <h4 v-if="isFailed">Hiba, próbáld újra!</h4>
+    <form @submit.prevent="submitForm">
+      <div>
+        <label for="username">Felhasználónév:</label>
+        <input type="text" id="username" v-model="credentials.username" required>
+      </div>
+      <div>
+        <label for="password">Jelszó:</label>
+        <input type="password" id="password" v-model="credentials.password" required>
+      </div>
+      <button type="submit">Bejelentkezés</button>
+    </form>
+    <h4 v-if="isFailed">Hiba, próbáld újra!</h4>
   </div>
 </template>
 
 <style scoped>
+
+.window {
+  border: 1px solid var(--lightest);
+  box-shadow: 0 0 6px var(--light);
+  padding: 20px 50px 20px 50px;
+  width: fit-content;
+}
+
 h4 {
   margin-top: 20px;
   color: red;
@@ -57,7 +65,7 @@ h4 {
 button {
   margin-top: 20px;
   padding: 10px 20px;
-  background-color: lightseagreen;
+  background-color: var(--light);
   color: white;
   border: none;
   border-radius: 5px;
@@ -65,17 +73,22 @@ button {
   cursor: pointer;
 }
 
+button:hover {
+  background-color: var(--dark);
+  color: var(--lightest)
+}
+
 input[type="text"],
 input[type="password"] {
   padding: 8px;
-  border: 1px solid lightgray;
+  border: 1px solid var(--lighttext);
   border-radius: 5px;
   font-size: 1rem;
 }
 
 label {
   display: block;
-  margin-bottom: 5px;
+  margin: 8px 0 8px 0;
   font-size: 1rem;
 }