diff --git a/software/src/App.vue b/software/src/App.vue
index 52c2e3f..49c6038 100644
--- a/software/src/App.vue
+++ b/software/src/App.vue
@@ -48,7 +48,13 @@ requestAllCategories()
 
     <v-main>
       <!-- Here changes the router the content -->
-      <router-view></router-view>
+      <v-container>
+        <v-row>
+          <v-col>
+            <router-view></router-view>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-main>
   </v-app>
 </template>
diff --git a/software/src/data/enums/languageEnum.ts b/software/src/data/enums/languageEnum.ts
new file mode 100644
index 0000000..b173d8a
--- /dev/null
+++ b/software/src/data/enums/languageEnum.ts
@@ -0,0 +1,4 @@
+export enum LanguageEnum {
+  GERMAN = "Deutsch",
+  ENGLISH = "English"
+}
\ No newline at end of file
diff --git a/software/src/data/stores/userStore.ts b/software/src/data/stores/userStore.ts
index 0af3932..db0d279 100644
--- a/software/src/data/stores/userStore.ts
+++ b/software/src/data/stores/userStore.ts
@@ -1,9 +1,11 @@
 import { defineStore } from "pinia";
 import { useLocalStorage } from "@vueuse/core";
 import { ThemeEnum } from "../enums/themeEnums";
+import { LanguageEnum } from "../enums/languageEnum";
 
 export const useUserStore = defineStore('user', {
   state: () => ({
-    theme: useLocalStorage<ThemeEnum>("hackmycart/userStore/theme", ThemeEnum.DARKRED)
+    theme: useLocalStorage<ThemeEnum>("hackmycart/userStore/theme", ThemeEnum.DARKRED),
+    language: useLocalStorage<LanguageEnum>("hackmycart/userStore/language", LanguageEnum.GERMAN)
   })
 })
\ No newline at end of file
diff --git a/software/src/pages/loginPage/index.vue b/software/src/pages/loginPage/index.vue
new file mode 100644
index 0000000..a1e8862
--- /dev/null
+++ b/software/src/pages/loginPage/index.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import LoginForm from './loginForm.vue';
+
+</script>
+
+<template>
+  <v-container max-width="600">
+    <v-row>
+      <v-col>
+        <login-form />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
\ No newline at end of file
diff --git a/software/src/pages/loginPage/loginForm.vue b/software/src/pages/loginPage/loginForm.vue
new file mode 100644
index 0000000..34736fd
--- /dev/null
+++ b/software/src/pages/loginPage/loginForm.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <v-card title="Login" prepend-icon="mdi-login" elevation="8">
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-text-field label="Username" prepend-icon="mdi-account" clearable />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-text-field label="Passwort" prepend-icon="mdi-key" type="password" clearable />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <!-- todo -->
+          <v-btn prepend-icon="mdi-send" color="primary" block>Login</v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-card-text class="text-center">
+      <a
+        class="text-secondary text-decoration-none"
+        href="#"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+      <!-- todo -->
+        Nicht keinen Account? Jetzt anmelden! <v-icon icon="mdi-chevron-right"></v-icon>
+      </a>
+    </v-card-text>
+  </v-card>
+</template>
\ No newline at end of file
diff --git a/software/src/pages/preferencesPage/index.vue b/software/src/pages/preferencesPage/index.vue
index 2da9e77..d57e4b8 100644
--- a/software/src/pages/preferencesPage/index.vue
+++ b/software/src/pages/preferencesPage/index.vue
@@ -9,26 +9,19 @@ const banner: Ref<BannerModel> = ref(new BannerModel())
 </script>
 
 <template>
-  <v-container>
+  <v-container max-width="800">
+    <alert-banner v-model:alert-banner="banner" />
+
     <v-row>
       <v-col>
-        <v-container max-width="800">
-          <alert-banner v-model:alert-banner="banner" />
+        <page-setup />
+      </v-col>
+    </v-row>
 
-          <v-row>
-            <v-col>
-              <page-setup />
-            </v-col>
-          </v-row>
-
-          <v-row>
-            <v-col>
-              <system-setup v-model:alert-banner="banner" />
-            </v-col>
-          </v-row>
-        </v-container>
+    <v-row>
+      <v-col>
+        <system-setup v-model:alert-banner="banner" />
       </v-col>
     </v-row>
   </v-container>
-  
 </template>
\ No newline at end of file
diff --git a/software/src/pages/preferencesPage/pageSetup.vue b/software/src/pages/preferencesPage/pageSetup.vue
index 08ebc21..4e4926c 100644
--- a/software/src/pages/preferencesPage/pageSetup.vue
+++ b/software/src/pages/preferencesPage/pageSetup.vue
@@ -2,24 +2,36 @@
 import { ThemeEnum } from '@/data/enums/themeEnums';
 import { useTheme } from 'vuetify/lib/framework.mjs';
 import { useUserStore } from '@/data/stores/userStore';
+import { LanguageEnum } from '@/data/enums/languageEnum';
 
 const userStore = useUserStore()
 const theme = useTheme()
 const themeEnums = Object.values(ThemeEnum)
+const languages = Object.values(LanguageEnum)
 
 function changeTheme() {
   theme.global.name.value = userStore.theme
 }
+
+function changeLanguage() {
+  // todo
+}
 </script>
 
 <template>
-  <v-card title="Page Setup" prepend-icon="mdi-view-dashboard">
+  <v-card title="Page Setup" prepend-icon="mdi-view-dashboard" elevation="8">
     <v-container>
       <v-row>
         <v-col>
           <v-select v-model="userStore.theme" :items="themeEnums" label="Selected theme" @update:model-value="changeTheme" />
         </v-col>
       </v-row>
+
+      <v-row>
+        <v-col>
+          <v-select v-model="userStore.language" :items="languages" label="Sprache" @update:model-value="changeLanguage" />
+        </v-col>
+      </v-row>
     </v-container>
   </v-card>
 </template>
\ No newline at end of file
diff --git a/software/src/pages/preferencesPage/systemSetup.vue b/software/src/pages/preferencesPage/systemSetup.vue
index 32899b5..cc0b20d 100644
--- a/software/src/pages/preferencesPage/systemSetup.vue
+++ b/software/src/pages/preferencesPage/systemSetup.vue
@@ -20,7 +20,7 @@ function resetSettings() {
 </script>
 
 <template>
-  <v-card title="System Setup" prepend-icon="mdi-engine">
+  <v-card title="System Setup" prepend-icon="mdi-engine" elevation="8">
     <v-container>
       <v-row>
         <v-col class="d-flex justify-center align-center">
diff --git a/software/src/router/routes.ts b/software/src/router/routes.ts
index 05f2feb..34cbf7d 100644
--- a/software/src/router/routes.ts
+++ b/software/src/router/routes.ts
@@ -2,12 +2,14 @@ import AccountPage from "@/pages/AccountPage.vue";
 import OrdersPage from "@/pages/OrdersPage.vue";
 import PreferencesPage from "@/pages/preferencesPage/index.vue";
 import ProductsPage from "@/pages/ProductsPage.vue";
+import LoginPage from "@/pages/loginPage/index.vue"
 
 const routes = [
   { path: '/', component: ProductsPage },
   { path: '/account', component: AccountPage },
   { path: '/orders', component: OrdersPage },
   { path: '/preferences', component: PreferencesPage },
+  { path: '/login', component: LoginPage },
 ]
 
 export default routes
\ No newline at end of file