diff --git a/app/Models/Champion.php b/app/Models/Champion.php
index 71b0741..9fcc98c 100644
--- a/app/Models/Champion.php
+++ b/app/Models/Champion.php
@@ -5,6 +5,7 @@ namespace App\Models;
 use Cviebrock\EloquentSluggable\Sluggable;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 
 class Champion extends Model
 {
@@ -40,52 +41,52 @@ class Champion extends Model
         ];
     }
 
-    public function skins()
+    public function skins(): HasMany
     {
         return $this->hasMany(ChampionSkin::class);
     }
 
-    public function getChampionImageAttribute()
+    public function getChampionImageAttribute(): string
     {
         return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/splash-art';
     }
 
-    public function getChampionImageLoadingAttribute()
+    public function getChampionImageLoadingAttribute(): string
     {
         return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/portrait';
     }
 
-    public function getChampionImageTileAttribute()
+    public function getChampionImageTileAttribute(): string
     {
         return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/tile';
     }
 
-    public function getChampionSquareImageAttribute()
+    public function getChampionSquareImageAttribute(): string
     {
         return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/square';
     }
 
-    public function getChampionAbilityIconQAttribute()
+    public function getChampionAbilityIconQAttribute(): string
     {
         return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/ability-icon/q';
     }
 
-    public function getChampionAbilityIconWAttribute()
+    public function getChampionAbilityIconWAttribute(): string
     {
         return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/ability-icon/w';
     }
 
-    public function getChampionAbilityIconEAttribute()
+    public function getChampionAbilityIconEAttribute(): string
     {
         return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/ability-icon/e';
     }
 
-    public function getChampionAbilityIconRAttribute()
+    public function getChampionAbilityIconRAttribute(): string
     {
         return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/ability-icon/r';
     }
 
-    public function getChampionAbilityIconPAttribute()
+    public function getChampionAbilityIconPAttribute(): string
     {
         return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/ability-icon/p';
     }
diff --git a/app/Models/ChampionRoles.php b/app/Models/ChampionRoles.php
index 7f39b18..cc63dab 100644
--- a/app/Models/ChampionRoles.php
+++ b/app/Models/ChampionRoles.php
@@ -24,7 +24,7 @@ class ChampionRoles extends Model
         return $this->belongsTo(Champion::class);
     }
 
-    public function getRolesAttribute($value)
+    public function getRolesAttribute($value): array
     {
         $value = json_decode($value);
 
diff --git a/app/Models/ChampionSkin.php b/app/Models/ChampionSkin.php
index db334a0..7f324d5 100644
--- a/app/Models/ChampionSkin.php
+++ b/app/Models/ChampionSkin.php
@@ -5,6 +5,8 @@ namespace App\Models;
 use Cviebrock\EloquentSluggable\Sluggable;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 
 class ChampionSkin extends Model
 {
@@ -47,28 +49,33 @@ class ChampionSkin extends Model
         ];
     }
 
-    public function champion()
+    public function champion(): BelongsTo
     {
         return $this->belongsTo(Champion::class);
     }
 
-    public function chromas()
+    public function chromas(): HasMany
     {
         return $this->hasMany(SkinChroma::class, 'full_skin_id', 'full_skin_id');
     }
 
-    public function getSkinImageAttribute()
+    public function getSkinImageAttribute(bool $pbe = false): string
     {
+        if ($pbe) {
+            return 'https://raw.communitydragon.org/pbe/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/' . $this->champion_id . '/' . $this->full_skin_id . '.jpg';
+        }
         return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/splash-art/centered/skin/' . $this->skin_id;
     }
 
-    public function getSkinImageLoadingAttribute()
+    public function getSkinImageLoadingAttribute(): string
     {
         return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/portrait/skin/' . $this->skin_id;
     }
 
-    public function getSkinImageTileAttribute()
+    public function getSkinImageTileAttribute(): string
     {
         return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/tile/skin/' . $this->skin_id;
     }
+
+
 }
diff --git a/app/Models/SkinChroma.php b/app/Models/SkinChroma.php
index 25f1290..df24186 100644
--- a/app/Models/SkinChroma.php
+++ b/app/Models/SkinChroma.php
@@ -5,6 +5,7 @@ namespace App\Models;
 use Cviebrock\EloquentSluggable\Sluggable;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 
 class SkinChroma extends Model
 {
@@ -25,7 +26,6 @@ class SkinChroma extends Model
 
     public function sluggable(): array
     {
-        // chroma name + skin name
         return [
             'slug' => [
                 'source' => ['chroma_name', 'skin_name'],
@@ -33,7 +33,7 @@ class SkinChroma extends Model
         ];
     }
 
-    public function skin()
+    public function skin(): BelongsTo
     {
         return $this->belongsTo(Skin::class);
     }
diff --git a/app/View/Components/home/Upcoming_skins.php b/app/View/Components/home/Upcoming_skins.php
new file mode 100644
index 0000000..7b18b1e
--- /dev/null
+++ b/app/View/Components/home/Upcoming_skins.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\View\Components\Home;
+
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Upcoming_skins extends Component
+{
+    public function __construct(public array $skins)
+    {
+    }
+
+    public function render(): View
+    {
+        return view('components.home.upcoming_skins');
+    }
+}
diff --git a/resources/views/components/home/upcoming_skins.blade.php b/resources/views/components/home/upcoming_skins.blade.php
new file mode 100644
index 0000000..359a71d
--- /dev/null
+++ b/resources/views/components/home/upcoming_skins.blade.php
@@ -0,0 +1,53 @@
+@php use Carbon\Carbon; @endphp
+<?php
+/** @var App\Models\ChampionSkin $skin */ ?>
+
+<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">
+                Upcoming Skins</h2>
+
+            <p class="mt-4 text-stone-300">
+                Check out upcoming skins 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($skin->availability == "Upcoming")
+                    <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(true) }}"
+                                     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>
+                                    <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
index 5d8f1f3..97ab7e4 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -28,9 +28,10 @@
 </head>
 
 <body class="antialiased bg-stone-800 dark">
-    <x-navbar />
-    <x-home.features />
-    <x-home.recent_skins :skins="$skins" />
+<x-navbar/>
+<x-home.features/>
+<x-home.upcoming_skins :skins="$skins"/>
+<x-home.recent_skins :skins="$skins"/>
 
 </body>