diff --git a/favicon.ico b/favicon.ico
deleted file mode 100644
index 50a2189..0000000
Binary files a/favicon.ico and /dev/null differ
diff --git a/favicon.png b/favicon.png
new file mode 100644
index 0000000..bb39adf
Binary files /dev/null and b/favicon.png differ
diff --git a/images/image.png b/images/image.png
new file mode 100644
index 0000000..863e0a6
Binary files /dev/null and b/images/image.png differ
diff --git a/images/lock-solid.png b/images/lock-solid.png
new file mode 100644
index 0000000..9fb8df2
Binary files /dev/null and b/images/lock-solid.png differ
diff --git a/index.html b/index.html
index 201ae71..6fe7146 100644
--- a/index.html
+++ b/index.html
@@ -14,9 +14,9 @@
     <meta name="language" content="German">
 
     <!-- Favicon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="favicon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon.png">
     <link rel="manifest" href="/site.webmanifest">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
@@ -28,7 +28,7 @@
         <nav class="bg-white border-gray-200 py-2.5 dark:bg-gray-900">
             <div class="flex flex-wrap items-center justify-between max-w-screen-xl px-4 mx-auto">
                 <a href="#" class="flex items-center">
-                    <img src="./images/logo.svg" class="h-6 mr-3 sm:h-9" alt="EasyGate Logo" /> <!-- TODO -->
+                    <img src="./images/lock-solid.png" class="h-6 mr-3 sm:h-9" alt="EasyGate Logo" /> <!-- TODO -->
                     <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">EasyGate</span>
                 </a>
                 <div class="flex items-center lg:order-2">
@@ -76,7 +76,7 @@
                 <p class="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">Ihre zentrale Lösung für Smart Lock-Integration, Effizienz, Sicherheit und nahtloses Schlüsselmanagement.</p>
             </div>
             <div class="hidden lg:mt-0 lg:col-span-5 lg:flex">
-                <img src="./images/hero.png" alt="hero image">
+                <img src="./images/image.png" alt="hero image">
             </div>                
         </div>
     </section>
@@ -378,7 +378,7 @@
             <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
             <div class="text-center">
                 <a href="#" class="flex items-center justify-center mb-5 text-2xl font-semibold text-gray-900 dark:text-white">
-                    <img src="./images/logo.svg" class="h-6 mr-3 sm:h-9" alt="Landwind Logo" />
+                    <img src="./images/lock-solid.png" class="h-6 mr-3 sm:h-9" alt="Landwind Logo" />
                     Landwind    
                 </a>
                 <span class="block text-sm text-center text-gray-500 dark:text-gray-400">© 2021-2022 Landwind™. All Rights Reserved. Built with <a href="https://flowbite.com" class="text-purple-600 hover:underline dark:text-purple-500">Flowbite</a> and <a href="https://tailwindcss.com" class="text-purple-600 hover:underline dark:text-purple-500">Tailwind CSS</a>.
diff --git a/output.css b/output.css
index 1a00db7..01872cf 100644
--- a/output.css
+++ b/output.css
@@ -1081,14 +1081,6 @@ input:checked + .toggle-bg {
   margin-bottom: 1.5rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -1101,6 +1093,10 @@ input:checked + .toggle-bg {
   margin-top: 1.5rem;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .mb-3 {
   margin-bottom: 0.75rem;
 }
@@ -1109,6 +1105,10 @@ input:checked + .toggle-bg {
   margin-bottom: 1.25rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .mt-5 {
   margin-top: 1.25rem;
 }
@@ -1153,10 +1153,6 @@ input:checked + .toggle-bg {
   height: 1.5rem;
 }
 
-.h-4 {
-  height: 1rem;
-}
-
 .h-9 {
   height: 2.25rem;
 }
@@ -1177,6 +1173,10 @@ input:checked + .toggle-bg {
   height: 3rem;
 }
 
+.h-4 {
+  height: 1rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1185,10 +1185,6 @@ input:checked + .toggle-bg {
   width: 1.5rem;
 }
 
-.w-4 {
-  width: 1rem;
-}
-
 .w-5 {
   width: 1.25rem;
 }
@@ -1205,6 +1201,10 @@ input:checked + .toggle-bg {
   width: 50%;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
 .max-w-screen-xl {
   max-width: 1280px;
 }
@@ -1237,8 +1237,8 @@ input:checked + .toggle-bg {
   flex-shrink: 1;
 }
 
-.shrink-0 {
-  flex-shrink: 0;
+.grow {
+  flex-grow: 1;
 }
 
 .-translate-x-full {
@@ -1281,10 +1281,6 @@ input:checked + .toggle-bg {
   resize: both;
 }
 
-.list-disc {
-  list-style-type: disc;
-}
-
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1341,12 +1337,6 @@ input:checked + .toggle-bg {
   gap: 2rem;
 }
 
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
-
 .space-y-12 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1365,6 +1355,12 @@ input:checked + .toggle-bg {
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .space-y-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1552,24 +1548,14 @@ input:checked + .toggle-bg {
   padding-right: 1rem;
 }
 
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
 
-.py-5 {
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
 }
 
 .py-6 {
@@ -1582,6 +1568,11 @@ input:checked + .toggle-bg {
   padding-right: 0.5rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1610,10 +1601,6 @@ input:checked + .toggle-bg {
   padding-right: 0.75rem;
 }
 
-.pl-5 {
-  padding-left: 1.25rem;
-}
-
 .pt-2 {
   padding-top: 0.5rem;
 }
@@ -1852,11 +1839,6 @@ input:checked + .toggle-bg {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.hover\:text-blue-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(26 86 219 / var(--tw-text-opacity));
-}
-
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1882,10 +1864,6 @@ input:checked + .toggle-bg {
           text-decoration-line: underline;
 }
 
-.focus\:z-10:focus {
-  z-index: 10;
-}
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1918,11 +1896,6 @@ input:checked + .toggle-bg {
   --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-gray-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-purple-200:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(220 215 254 / var(--tw-ring-opacity));
@@ -2090,11 +2063,6 @@ input:checked + .toggle-bg {
   --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
 }
 
-.dark .dark\:focus\:ring-gray-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
-}
-
 .dark .dark\:focus\:ring-purple-900:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(74 29 150 / var(--tw-ring-opacity));
@@ -2114,18 +2082,10 @@ input:checked + .toggle-bg {
     display: inline-block;
   }
 
-  .sm\:flex {
-    display: flex;
-  }
-
   .sm\:h-9 {
     height: 2.25rem;
   }
 
-  .sm\:w-auto {
-    width: auto;
-  }
-
   .sm\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -2138,18 +2098,6 @@ input:checked + .toggle-bg {
     gap: 1.5rem;
   }
 
-  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(0px * var(--tw-space-y-reverse));
-  }
-
-  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(1rem * var(--tw-space-x-reverse));
-    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   .sm\:text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;
@@ -2387,20 +2335,11 @@ input:checked + .toggle-bg {
     padding-bottom: 4rem;
   }
 
-  .lg\:pb-24 {
-    padding-bottom: 6rem;
-  }
-
   .lg\:text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
 
-  .lg\:text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-
   .lg\:text-purple-700 {
     --tw-text-opacity: 1;
     color: rgb(108 43 217 / var(--tw-text-opacity));
diff --git a/tailwind.config.js b/tailwind.config.js
index a97ee3e..ece8716 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,19 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8", "800": "#1e40af", "900": "#1e3a8a" }
+        maincol: {
+          50: 'oklch(74.746% 0.14552 294.81)',
+          100: 'oklch(69.968% 0.17443 293.46)',
+          200: 'oklch(60.861% 0.22942 290)',
+          300: 'oklch(53.31% 0.27191 284.48)',
+          400: 'oklch(48.41% 0.29592 276.8)',
+          500: 'oklch(43.228% 0.2715 275.08)',
+          600: 'oklch(37.476% 0.23377 275.94)',
+          700: 'oklch(31.291% 0.19366 276.95)',
+          800: 'oklch(24.793% 0.15139 278.74)',
+          900: 'oklch(15.192% 0.08843 285.58)',
+          950: 'oklch(9.8542% 0.05352 296.92)',
+        }
       }
     },
   },