diff --git a/app/Http/Controllers/SummonerIconController.php b/app/Http/Controllers/SummonerIconController.php
index eb87087..9b5637b 100644
--- a/app/Http/Controllers/SummonerIconController.php
+++ b/app/Http/Controllers/SummonerIconController.php
@@ -39,7 +39,9 @@ class SummonerIconController extends Controller
 
     public function show(SummonerIcon $summonerIcon)
     {
-        return $summonerIcon;
+        $icon = $summonerIcon;
+
+        return view('icons.show', compact('icon'));
     }
 
     public function update(Request $request, SummonerIcon $summonerIcon)
diff --git a/app/Models/SummonerIcon.php b/app/Models/SummonerIcon.php
index 1229f4b..9ef0731 100644
--- a/app/Models/SummonerIcon.php
+++ b/app/Models/SummonerIcon.php
@@ -40,4 +40,9 @@ class SummonerIcon extends Model
         $sqids = new Sqids(minLength: 5);
         return $sqids->encode([$this->icon_id]);
     }
+
+    public function getRouteKeyName(): string
+    {
+        return 'slug';
+    }
 }
diff --git a/app/View/Components/Icons/View_grid.php b/app/View/Components/Icons/View_grid.php
new file mode 100644
index 0000000..08dc7aa
--- /dev/null
+++ b/app/View/Components/Icons/View_grid.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\View\Components\Icons;
+
+use App\Models\SummonerIcon;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class View_grid extends Component
+{
+    public function __construct(public SummonerIcon $icon)
+    {
+    }
+
+    public function render(): View
+    {
+        return view('components.icons.view_grid');
+    }
+}
diff --git a/resources/views/components/icons/view_grid.blade.php b/resources/views/components/icons/view_grid.blade.php
new file mode 100644
index 0000000..b27087d
--- /dev/null
+++ b/resources/views/components/icons/view_grid.blade.php
@@ -0,0 +1,88 @@
+<section class="max-w-screen-xl mx-auto mt-12">
+    <p class="sr-only">Heimerdinger Presents:</p>
+    <h3
+        class="text-sm font-bold text-center text-transparent uppercase sm:text-md
+        bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
+        ICON DETAILS</h3>
+    <h1
+        class="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">
+        {{$icon->title}}</h1>
+    <h2
+        class="text-sm md:text-lg font-bold text-center text-transparent uppercase
+        bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
+        Released in: {{$icon->release_year}}</h2>
+
+    <div class="container mx-auto p-4 flex items-center justify-center mt-3">
+        <div class="w-screen grid grid-cols-1 md:grid-cols-2 gap-8">
+
+            <div
+                class="items-center align-middle flex flex-col rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80">
+                <h4 class="text-center text-2xl font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mb-3">
+                    The {{$icon->title}}</h4>
+                <img
+                    src="//wsrv.nl/?url={{ $icon->image }}&w=400&output=webp&q=100&il"
+                    alt="{{$icon->title}} Icon"
+                    class="transition-transform duration-700 rounded-2xl bg-clip-border border-2 border-orange-400/40
+                    shadow-md shadow-orange-400/20"/>
+                <a href="{{$icon->image}}" target="_blank"
+                   class="text-center text-neutral-100 text-sm font-medium px-4 py-2">
+                    View in HD
+                </a>
+            </div>
+
+            <div class="rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80">
+                <h4 class="text-center text-lg font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mx-2">
+                    {{$icon->title}} Details
+                </h4>
+                <div class="flex flex-col justify-between h-max">
+                    <ul class="mx-5 flex-1  h-max">
+                        <li class="text-neutral-100 hyphens-auto text-base leading-loose items-center" lang="en">
+                            <span class="font-bold">Icon ID:</span>
+                            <span class="font-mono font-semibold">{{$icon->icon_id}}</span>
+                        </li>
+                        <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
+                            <span class="font-bold">Icon Name:</span> {{$icon->title}}
+                        </li>
+                        <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
+                            <span class="font-bold">Release Year:</span> {{$icon->release_year}}
+                        </li>
+                        <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
+                            <span class="font-bold">Legacy<span class="font-extralight">*</span>:</span> {{$icon->legacy ? 'Yes' : 'No'}}
+                        </li>
+                        <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
+                            <span class="font-bold">Esports Icon:</span> {{$icon->esports_team || $icon->esports_region || $icon->esports_event ? 'Yes' : 'No'}}
+                        </li>
+                        @if($icon->esports_team || $icon->esports_region || $icon->esports_event)
+                            @if($icon->esports_team)
+                                <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
+                                    <span class="font-bold">Esports Team:</span> {{$icon->esports_team}}
+                                </li>
+                            @endif
+                            @if($icon->esports_region)
+                                <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
+                                    <span class="font-bold">Esports Region:</span> {{$icon->esports_region}}
+                                </li>
+                            @endif
+                            @if($icon->esports_event)
+                                <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
+                                    <span class="font-bold">Esports Event:</span> {{$icon->esports_event}}
+                                </li>
+                            @endif
+                        @endif
+                        <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
+                            <span class="font-bold">Description:</span> {{$icon->description}}
+                        </li>
+                        <li class="text-neutral-100 hyphens-auto font-light text-sm leading-loose items-center mt-8" lang="en">
+                            <span class="font-bold">* Legacy Icons:</span> Legacy Icons don't act the same as legacy skins.
+                            It seems like some icons that are marked as legacy are still obtainable or the other way around
+                            where some icons that are not marked as legacy are not obtainable anymore.
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</section>
+1
diff --git a/resources/views/icons/show.blade.php b/resources/views/icons/show.blade.php
new file mode 100644
index 0000000..970129a
--- /dev/null
+++ b/resources/views/icons/show.blade.php
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- 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>{{$icon->title}} • Heimerdinger.LoL</title>
+    <meta name="description"
+          content="Heimerdinger.LoL: {{$icon->title}} details showing all the information about the icon released in {{$icon->release_year}}. {{substr($icon->description, 0, 64)}}...">
+
+    <!-- OpenGraph -->
+    <meta property="og:site_name" content="Heimerdinger.LoL">
+    <meta property="og:title" content="{{$icon->title}} • Heimerdinger.LoL">
+    <meta property="og:description"
+          content="Heimerdinger.LoL: {{$icon->title}} details showing all the information about the icon released in {{$icon->release_year}}. {{substr($icon->description, 0, 64)}}...">
+    <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="{{$icon->title}} • Heimerdinger.LoL">
+    <meta property="twitter:description"
+          content="Heimerdinger.LoL: {{$icon->title}} details showing all the information about the icon released in {{$icon->release_year}}. {{substr($icon->description, 0, 64)}}...">
+    <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">
+<x-navbar/>
+<x-icons.view_grid :icon="$icon"/>
+<x-footer/>
+</body>
+
+</html>
diff --git a/routes/web.php b/routes/web.php
index cd21219..d341088 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -36,6 +36,10 @@ Route::get('/icons', [
     SummonerIconController::class,
     'index'
 ])->name('assets.icons.index');
+Route::get('/icon/{summonerIcon}', [
+    SummonerIconController::class,
+    'show'
+])->name('assets.icons.show');
 
 // Emotes
 Route::get('/emotes', [