diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
new file mode 100644
index 0000000..8297701
--- /dev/null
+++ b/app/Http/Controllers/HomeController.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\ChampionSkin;
+
+class HomeController extends Controller
+{
+    public function index()
+    {
+        $skins = ChampionSkin::orderBy('release_date', 'desc')->get();
+
+        return view('home', [
+            'skins' => $skins,
+        ]);
+    }
+}
diff --git a/app/View/Components/home/recent_skins.php b/app/View/Components/home/recent_skins.php
new file mode 100644
index 0000000..4b146a3
--- /dev/null
+++ b/app/View/Components/home/recent_skins.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components\home;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class recent_skins extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        public array $skins;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.home.recent_skins');
+    }
+}
diff --git a/resources/views/components/features.blade.php b/resources/views/components/home/features.blade.php
similarity index 100%
rename from resources/views/components/features.blade.php
rename to resources/views/components/home/features.blade.php
diff --git a/resources/views/components/home/recent_skins.blade.php b/resources/views/components/home/recent_skins.blade.php
new file mode 100644
index 0000000..525a335
--- /dev/null
+++ b/resources/views/components/home/recent_skins.blade.php
@@ -0,0 +1,53 @@
+<section class="text-white bg-stone-900">
+    <div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-12 sm:px-6 lg:py-16 lg:px-8">
+        <div class="max-w-lg mx-auto text-center">
+            <h2
+                class="text-3xl font-bold text-transparent uppercase sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
+                Recent Skins</h2>
+
+            <p class="mt-4 text-stone-300">
+                Check out the 9 most recent skins released in League of Legends. <br>
+                <span class="text-sm text-stone-400">Data is updated roughly every 12 hours.</span>
+            </p>
+        </div>
+        <div class="grid grid-cols-1 gap-4 mt-8 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3">
+            @foreach ($skins as $skin)
+                @if ($loop->index < 9)
+                    <div
+                        class="p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10">
+                        <div class="flex flex-col">
+                            <div class="flex flex-col items-center justify-center">
+                                <img loading="lazy" class="border-2 border-orange-400/40 rounded-xl"
+                                    src="{{ $skin->getSkinImageAttribute() }}" alt="{{ $skin->skin_name }} Splash Art">
+                                <div class="flex flex-col items-center justify-center">
+                                    <h2 class="mt-4 text-xl font-bold text-white">{{ $skin->skin_name }}</h2>
+                                    <h3 class=" text-stone-200">Released
+                                        {{ \Carbon\Carbon::parse($skin->release_date)->diffForHumans([
+                                            'parts' => 2,
+                                            'join' => true,
+                                        ]) }}
+                                    </h3>
+                                    <p class="mt-1 text-sm text-stone-300">
+                                        @if ($skin->rp_price == '99999')
+                                            Not Available for RP
+                                        @else
+                                            {{ $skin->rp_price }} RP
+                                        @endif
+
+                                    </p>
+                                    <p class="mt-1 text-sm italic text-stone-300">
+                                        @if ($skin->loot_eligible)
+                                            Can be obtained from loot
+                                        @endif
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endif
+            @endforeach
+
+        </div>
+
+    </div>
+</section>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
new file mode 100644
index 0000000..5d8f1f3
--- /dev/null
+++ b/resources/views/home.blade.php
@@ -0,0 +1,37 @@
+<!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-home.features />
+    <x-home.recent_skins :skins="$skins" />
+
+</body>
+
+</html>
diff --git a/routes/web.php b/routes/web.php
index d259f33..c7f8b87 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
+use App\Http\Controllers\HomeController;
 
 /*
 |--------------------------------------------------------------------------
@@ -13,6 +14,4 @@ use Illuminate\Support\Facades\Route;
 |
 */
 
-Route::get('/', function () {
-    return view('welcome');
-});
+Route::get('/', [HomeController::class, 'index']);