diff --git a/resources/views/components/champions/grid_info.blade.php b/resources/views/components/champions/grid_info.blade.php
index 26239e0..3ed6628 100644
--- a/resources/views/components/champions/grid_info.blade.php
+++ b/resources/views/components/champions/grid_info.blade.php
@@ -115,19 +115,20 @@
                     <div id="skinsElement" class="overflow-x-scroll mt-2.5">
                         <div class="grid grid-flow-col grid-rows-2 w-max gap-4 mb-2.5">
                             @foreach($champion->skins as $key => $skin)
-                                <div class="flex flex-col ">
+                                <div class="group flex flex-col ">
                                     <a href="/skin/{{$skin->slug}}">
                                         <img
                                             src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=450&output=webp&q=70"
                                             alt="{{$champion->name}} {{$skin->name}} Splash Art"
                                             @if($key < 6) loading="eager" @else loading="lazy" @endif
-                                            class="inline-block h-36 object-cover rounded-2xl shadow-md border border-3 border-white/10
+                                            class=" inline-block h-36 object-cover rounded-2xl shadow-md border border-3 border-white/10
                                 hover:shadow-orange-500/20 transition-all duration-700 mr-2.5">
                                     </a>
                                     <div>
 
                                         <p class="align-bottom text-center text-neutral-100 text-sm mt-1.5 items-center">
-                                            <a href="/skin/{{$skin->slug}}" class="hover:text-orange-400">
+                                            <a href="/skin/{{$skin->slug}}"
+                                               class="hover:text-orange-400 group-hover:text-orange-400">
                                                 {{$skin->skin_name}}
                                                 <x-iconsax-bul-arrow-right class="inline-block w-5"/>
                                             </a>
diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
new file mode 100644
index 0000000..34e3b37
--- /dev/null
+++ b/resources/views/components/footer.blade.php
@@ -0,0 +1,38 @@
+<footer class="p-4  md:p-8 lg:p-10 bg-stone-800">
+    <div class="mx-auto max-w-screen-xl text-center">
+        <a href="/" class="flex justify-center items-center text-2xl font-semibold text-gray-100">
+            <x-logo class="w-auto mr-2 h-9" alt="Heimerdinger.lol Logo"/>
+            Heimerdinger.LoL
+        </a>
+        <p class="my-4 text-sm text-gray-500 dark:text-gray-400">Heimerdinger.LoL was created under <a
+                href="https://www.riotgames.com/" target="_blank">Riot Games</a>' "<a
+                href="https://www.riotgames.com/en/legal"
+                class="underline decoration-orange-500/50 hover:decoration-orange-500 transition-all duration-700 hover:decoration-1"
+                target="_blank">Legal
+                Jibber
+                Jabber</a>" policy
+            using assets owned by <a
+                href="https://www.riotgames.com/" target="_blank">Riot Games</a>. <a
+                href="https://www.riotgames.com/" target="_blank">Riot Games</a> does not endorse or sponsor
+            this project.</p>
+        <ul class="flex flex-wrap justify-center items-center mb-6 text-neutral-300 ">
+            <li>
+                <a href="#"
+                   class="mr-4 hover:underline md:mr-6 decoration-orange-500 decoration-1">Contact</a>
+            </li>
+            <li>
+                <a href="#"
+                   class="mr-4 hover:underline md:mr-6 decoration-orange-500 decoration-1">Privacy</a>
+            </li>
+            <li>
+                <a href="#"
+                   class="mr-4 hover:underline md:mr-6 decoration-orange-500 decoration-1">Terms</a>
+            </li>
+
+        </ul>
+        <span
+            class="text-sm text-gray-500 sm:text-center dark:text-gray-400 items-center flex flex-row justify-center whitespace-pre">© {{date('Y')}} <a
+                href="/" class=" hover:underline">Heimerdinger.LoL</a> • Made with <x-iconsax-bul-heart-circle
+                class="inline-block w-5 self-center relative text-red-400"/></span>
+    </div>
+</footer>
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index a7ae695..5da05c5 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,4 +1,4 @@
-<nav class="bg-white drop-shadow-md border-stone-200 dark:bg-stone-800">
+<nav class="drop-shadow-md border-stone-200 bg-stone-800">
     <div class="flex flex-wrap items-center justify-between max-w-screen-xl p-4 mx-auto">
         <a href="/" class="flex items-center transition-transform hover:scale-105">
             <x-logo class="w-auto mr-2 transition-transform h-9 hover:scale-125" alt="Heimerdinger Logo"/>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 596f2b8..fb75906 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -51,7 +51,6 @@
     <x-home.upcoming_skins :upcomingSkins="$upcomingSkins"/>
 @endif
 <x-home.recent_skins :latestSkins="$latestSkins"/>
-
+<x-footer/>
 </body>
-
 </html>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
deleted file mode 100644
index 88ba892..0000000
--- a/resources/views/welcome.blade.php
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
-    <link rel="manifest" href="/icons/site.webmanifest">
-    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#e6855e">
-    <link rel="shortcut icon" href="/icons/favicon.ico">
-    <meta name="msapplication-TileColor" content="#ff7c47">
-    <meta name="msapplication-config" content="/icons/browserconfig.xml">
-    <meta name="theme-color" content="#ff7c47">
-
-    <title>Heimerdinger.LoL</title>
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/fontawesome.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/light.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/brands.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/solid.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/regular.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/duotone.min.css" rel="stylesheet">
-    @vite('resources/css/app.css')
-    @vite('resources/js/app.js')
-</head>
-
-<body class="antialiased bg-stone-800 dark">
-    <x-navbar />
-    <x-features />
-</body>
-
-</html>
diff --git a/tailwind.config.js b/tailwind.config.js
index 2a06ff0..e8f4e50 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,5 +26,10 @@ module.exports = {
     corePlugins: {
         aspectRatio: false,
     },
+    variants: {
+        extend: {
+            textColor: ['group-hover'],
+        }
+    },
     plugins: [require("flowbite/plugin"), require("@tailwindcss/aspect-ratio"), require('tailwind-capitalize-first-letter'),],
 };