diff --git a/src/resources/views/components/footer.blade.php b/src/resources/views/components/footer.blade.php
new file mode 100644
index 0000000..afeb606
--- /dev/null
+++ b/src/resources/views/components/footer.blade.php
@@ -0,0 +1,7 @@
+<div id="footer-part" class="fixed bottom-0 z-50 flex justify-center w-full font-semibold text-black align-middle bg-teal-400 footer">
+    <div>
+        <!--<div class="inline-block mx-auto align-middle justify-items-center">
+            Powered by <a href="https://www.igdb.com" class="unterline hover:text-white">IGDB API</a>
+        </div>-->
+    </div>
+</div>
diff --git a/src/resources/views/components/header.blade.php b/src/resources/views/components/header.blade.php
new file mode 100644
index 0000000..eba522e
--- /dev/null
+++ b/src/resources/views/components/header.blade.php
@@ -0,0 +1,55 @@
+<nav class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-teal-400">
+    <div class="px-3 py-3 lg:px-5 lg:pl-3">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center justify-start">
+            <a href="/" class="flex ml-2 md:mr-24">
+                <!--<svg class="w-10 h-10 fill-current" viewBox="0 -6 96 96" xmlns="http://www.w3.org/2000/svg"><g data-name="Group 9" transform="translate(-434 -708)" stroke="#2d4d68" stroke-linejoin="round" stroke-width="4"><path data-name="Path 51" d="M449 730v19a15 15 0 0 0 9 13.744V780a10 10 0 0 0 10 10h28a10 10 0 0 0 10-10v-17.256A15 15 0 0 0 515 749v-19Z" fill="#ffeecd"/><path data-name="Path 52" d="M459 764h-1v16a10 10 0 0 0 10 10h1v-16a10 10 0 0 0-10-10Z" fill="#c17a61"/><path data-name="Path 53" d="M505 764h1v16a10 10 0 0 1-10 10h-1v-16a10 10 0 0 1 10-10Z" fill="#c17a61"/><circle data-name="Ellipse 12" cx="11" cy="11" r="11" transform="translate(482 731)" fill="#fff" stroke-linecap="round"/><circle data-name="Ellipse 13" cx="11" cy="11" r="11" transform="translate(460 731)" fill="#fff" stroke-linecap="round"/><path data-name="Path 66" d="M523 710h-19v2a9.973 9.973 0 0 1-4.016 8H500h-.018a9.942 9.942 0 0 1-5.64 1.983l-.015.017h-24.654l-.015-.017a9.942 9.942 0 0 1-5.64-1.983H464h.016a9.973 9.973 0 0 1-4.016-8v-2h-19a5 5 0 0 0 0 10h6a5 5 0 0 0 0 10h11.222a26.6 26.6 0 0 0 3.278 0 15.5 15.5 0 0 1 15.5 15.5c0 .506-.028 1.006-.076 1.5H477v13.7a5 5 0 0 0 10 0V747h.076a15.498 15.498 0 0 1-.076-1.5 15.5 15.5 0 0 1 15.5-15.5 26.6 26.6 0 0 0 3.278 0H517a5 5 0 0 0 0-10h6a5 5 0 0 0 0-10Z" fill="#9b8772"/><rect data-name="Rectangle 64" width="10" height="21" rx="5" transform="translate(477 744)" fill="#fbb141"/></g></svg>
+                -->
+                <span class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">Karten</span>
+            </a>
+            </div>
+            <div class="flex items-center">
+                <div class="flex items-center ml-3">
+                    @auth
+                        <div>
+                            <button type="button" class="flex text-sm bg-teal-400 rounded-full hover:bg-teal-500 focus:ring-4 focus:ring-gray-300 dark:focus:ring-teal-600" aria-expanded="false" data-dropdown-toggle="dropdown-user">
+                                <span class="sr-only">Open user menu</span>
+                                <!--<img class="w-8 h-8 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="user photo">-->
+                                <div class="w-8 h-8 pt-2 text-white bg-teal-400 rounded-full hover:bg-teal-500 fa-solid fa-user"></div>
+                            </button>
+                        </div>
+                        <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600" id="dropdown-user">
+                            <div class="px-4 py-3" role="none">
+                                <p class="text-sm text-gray-900 dark:text-white" role="none">
+
+                                </p>
+                                <p class="font-medium text-gray-900 truncate text-md dark:text-gray-300" role="none">
+                                    {{auth()->user()->username}}
+                                </p>
+                            </div>
+
+                            <form method="POST" action="{{ route('logout') }}">
+                                @csrf
+                                <ul class="py-1" role="none">
+                                    <li>
+                                        <a href="/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Dashboard</a>
+                                    </li>
+                                    <li>
+                                        <a href="{{route("profile.edit")}}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Settings</a>
+                                    </li>
+                                    <li>
+                                        <button type="submit" class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Sign out</button>
+                                    </li>
+                                </ul>
+                            </form>
+                        </div>
+                    @else
+                        <a href="{{route("login")}}" class="flex ml-2 md:mr-24">
+                            <span class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">Login</span>
+                        </a>
+                    @endauth
+                </div>
+            </div>
+        </div>
+    </div>
+</nav>
diff --git a/src/resources/views/components/layout.blade.php b/src/resources/views/components/layout.blade.php
new file mode 100644
index 0000000..1312588
--- /dev/null
+++ b/src/resources/views/components/layout.blade.php
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang=eng>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet" />
+        {{ $scripts }}
+        <title>Rauru Game Explorer</title>
+        <livewire:styles>
+
+        @vite('resources/js/app.js')
+
+    </head>
+
+    <body>
+        <div id="app">
+            <x-header></x-header>
+            {{$content}}
+            <x-footer></x-footer>
+        </div>
+        <livewire:scripts>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
+
+    </body>
+</html>