diff --git a/resources/css/app.css b/resources/css/app.css
index e249b2d..dba4479 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -42,3 +42,7 @@
         display: none;
     }
 }
+
+.shadow-footer {
+    box-shadow: 0 50vh 0 50vh #292524;
+}
diff --git a/resources/views/assets/index.blade.php b/resources/views/assets/index.blade.php
index b3ef226..acc9256 100644
--- a/resources/views/assets/index.blade.php
+++ b/resources/views/assets/index.blade.php
@@ -1,83 +1,36 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+@extends('layouts.app')
 
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+@section('title', 'Heimerdinger.LoL • Assets')
+@section('description', 'Explore game assets on Heimerdinger.LoL. Find detailed information on all icons and emotes
+ available in League of Legends!')
 
-    <!-- Favicon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
-    <link rel="manifest" href="/img/icons/site.webmanifest">
-    <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#e6855e">
-    <link rel="shortcut icon" href="/img/icons/favicon.ico">
-    <meta name="msapplication-TileColor" content="#ff7c47">
-    <meta name="msapplication-config" content="/img/icons/browserconfig.xml">
-    <meta name="theme-color" content="#ff7c47">
-
-    <title>Heimerdinger.LoL • Assets</title>
-    <meta name="description"
-          content="Explore game assets on Heimerdinger.LoL. Find detailed information on all icons and emotes available in League of Legends!">
-
-    <!-- OpenGraph -->
-    <meta property="og:site_name" content="Heimerdinger.LoL">
-    <meta property="og:title" content="Heimerdinger.LoL • Assets">
-    <meta property="og:description"
-          content="Explore game assets on Heimerdinger.LoL. Find detailed information on all icons and emotes available in League of Legends!">
-    <meta property="og:locale" content="en">
-    <meta property="og:type" content="website">
-    <meta property="og:image" content="{{asset('img/og_image.png')}}">
-
-    <!-- Twitter -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta property="twitter:domain" content="heimerdinger.lol">
-    <meta property="twitter:title" content="Heimerdinger.LoL • Assets">
-    <meta property="twitter:description"
-          content="Explore game assets on Heimerdinger.LoL. Find detailed information on all icons and emotes available in League of Legends!">
-    <meta property="twitter:image" content="{{asset('img/og_image.png')}}">
-
-    <link rel="preconnect" href="https://rsms.me/">
-    <link rel="preload" href="https://rsms.me/inter/inter.css" as="style">
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" media="print" onload="this.media='all'">
-
-    @vite(['resources/css/app.css', 'resources/js/app.js'])
-</head>
-
-<body class="antialiased bg-stone-900 dark scroll-smooth flex flex-col min-h-screen">
-<x-navbar/>
-<h1
-    class="mt-7 text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
+@section('content')
+    <h1
+        class="mt-7 text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
         bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
-    Assets</h1>
-<h2
-    class="text-lg font-bold text-center text-transparent uppercase
+        Assets</h1>
+    <h2
+        class="text-lg font-bold text-center text-transparent uppercase
         bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text ">
-    LoL Icons & Emotes</h2>
+        LoL Icons & Emotes</h2>
 
-
-<div class="container mx-auto p-4 flex items-center justify-center mt-3 flex-grow">
-    <div class="text-center items-center justify-center align-middle">
-        <img class="items-center mx-auto" src="{{asset('img/heimerdinger-emote.webp')}}" alt="Heimerdinger Emote">
-        <p class="text-gray-100">Tired of endless browsing to find that one icon or emote you love?</p>
-        <p class="text-gray-100 ">We got you covered! Search through <span
-                class="underline decoration-orange-500/50 font-medium">all</span>
-            icons &
-            emotes with ease. </p>
-        <p class="mb-6 text-gray-100">Automatically updated and sorted by release date.</p>
-        <p class="text-gray-200 mb-3">Click on the asset category you'd like to view below to get started!</p>
-        <div class="flex justify-center space-x-4">
-            <a href="{{route('assets.icons.index')}}"
-               class="bg-orange-500 text-white font-bold py-2 px-4 rounded hover:bg-orange-600">Icons</a>
-            <a href="{{route('assets.emotes.index')}}"
-               class="bg-orange-500 text-white font-bold py-2 px-4 rounded hover:bg-orange-600">Emotes</a>
+    <div class="container mx-auto p-4 flex items-center justify-center mt-3 flex-grow">
+        <div class="text-center items-center justify-center align-middle">
+            <img class="items-center mx-auto" src="{{asset('img/heimerdinger-emote.webp')}}"
+                 alt="Heimerdinger Emote">
+            <p class="text-gray-100">Tired of endless browsing to find that one icon or emote you love?</p>
+            <p class="text-gray-100 ">We got you covered! Search through <span
+                    class="underline decoration-orange-500/50 font-medium">all</span>
+                icons &
+                emotes with ease. </p>
+            <p class="mb-6 text-gray-100">Automatically updated and sorted by release date.</p>
+            <p class="text-gray-200 mb-3">Click on the asset category you'd like to view below to get started!</p>
+            <div class="flex justify-center space-x-4">
+                <a href="{{route('assets.icons.index')}}"
+                   class="bg-orange-500 text-white font-bold py-2 px-4 rounded hover:bg-orange-600">Icons</a>
+                <a href="{{route('assets.emotes.index')}}"
+                   class="bg-orange-500 text-white font-bold py-2 px-4 rounded hover:bg-orange-600">Emotes</a>
+            </div>
         </div>
     </div>
-</div>
-
-
-<x-footer/>
-
-</body>
-
-</html>
+@endsection
diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
index 7fe4ee3..32c37eb 100644
--- a/resources/views/components/footer.blade.php
+++ b/resources/views/components/footer.blade.php
@@ -1,4 +1,4 @@
-<footer class="p-4 mt-7 md:p-8 lg:p-10 bg-stone-800">
+<footer class="p-4 mt-7 md:p-8 lg:p-10 bg-stone-800 shadow-footer">
     <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"/>
