diff --git a/bun.lockb b/bun.lockb
index 04c5af9..9926790 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index b1b10ce..d712b1a 100755
--- a/package.json
+++ b/package.json
@@ -32,24 +32,24 @@
     "build": "astro build --config ./source/astro.js"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.3",
-    "@astrojs/node": "^8.3.2",
+    "@astrojs/mdx": "^3.1.5",
+    "@astrojs/node": "^8.3.3",
     "@astrojs/vue": "^4.5.0",
-    "@iconoir/vue": "^7.8.0",
+    "@iconoir/vue": "^7.9.0",
     "@minpluto/zorn": "^0.4.5",
     "@nurodev/astro-bun": "^1.1.5",
-    "@openpanel/sdk": "^0.0.9-beta",
-    "@supabase/supabase-js": "^2.45.1",
+    "@openpanel/sdk": "^1.0.0",
+    "@supabase/supabase-js": "^2.45.3",
     "@xexiu/astro-modal": "^0.5.9",
-    "astro": "^4.13.3",
+    "astro": "^4.15.4",
     "astro-analytics": "^2.7.0",
     "astro-i18next": "^1.0.0-beta.21",
     "astro-tooltips": "^0.6.2",
     "astro-useragent": "^4.0.2",
     "rss-to-json": "^2.1.1",
-    "undici": "^6.19.7"
+    "undici": "^6.19.8"
   },
   "devDependencies": {
-    "sass": "^1.77.8"
+    "sass": "^1.78.0"
   }
 }
\ No newline at end of file
diff --git a/source/src/components/category/CategoryCard.astro b/source/src/components/category/CategoryCard.astro
new file mode 100644
index 0000000..8d6970f
--- /dev/null
+++ b/source/src/components/category/CategoryCard.astro
@@ -0,0 +1,79 @@
+---
+const {
+    Link,
+    Name,
+    Platform,
+    Thumbnail,
+    Ratio = "16:9" // "16:9" or "9:16"
+} = Astro.props
+---
+
+
+<a href={Link} style={"background-image: url('" + Thumbnail + "')"} class="goin-card">
+    { 
+        ()=> {
+          if (Platform === "YouTube") {
+            return <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
+          } else if (Platform === "Twitch") {
+            return <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"/></svg></span>
+          }
+        }
+    }
+    <div class="goin-card-content">
+        <p>{Name}</p>
+    </div>
+</a>
+
+<style lang="scss">
+.goin-card {
+    text-decoration: none;
+    border-radius: 10px;
+    background-size: cover !important;
+    background-position: center !important;
+    position: relative;
+    span {
+        svg {
+            fill: white;
+            width: 30px;
+            position: absolute;
+            z-index: 1;
+            margin: 18px;
+        }
+    }
+    .goin-card-content {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        height: 100%;
+        place-content: center;
+        border-radius: 10px;
+        backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
+        p {
+            font-size: 18px;
+            font-weight: bold;
+            position: absolute;
+            left: 0px;
+            bottom: 0px;
+            margin: 12px;
+        }
+    }
+}
+</style>
+
+{ 
+    ()=> {
+      if (Ratio === "16:9") {
+        return <style is:inline>
+            .goin-card {
+                height: 170px !important
+            }
+        </style>
+      } else if (Ratio === "9:16") {
+        return <style is:inline>
+            .goin-card {
+                height: 328px !important
+            }
+        </style>
+      }
+    }
+}
\ No newline at end of file
diff --git a/source/src/pages/index.astro b/source/src/pages/index.astro
index b743c35..498d021 100755
--- a/source/src/pages/index.astro
+++ b/source/src/pages/index.astro
@@ -13,6 +13,7 @@ import { FireFlame, Frame, Gamepad, GraphUp, Movie, MusicDoubleNote } from "@ico
 // Components
 import Trending from "@components/category/trending.astro";
 import Chip from "@components/Chip.astro";
+import CategoryCard from "@components/category/CategoryCard.astro";
 
 // Fetch
 const TrendingFetch = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending'
@@ -46,51 +47,67 @@ const TwitchDiscoverData = await TwitchDiscoverFetch.json()
     <br/>
     <div class="category-select-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;">
         {TrendingSplit.map((data) =>
-            <a href={'/discover?category=trending&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
-                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
-                <div class="goin-card-content">
-                    <GraphUp viewBox="0 0 10 24"/>
-                    <p>{t("SIDEBAR.CATEGORY_LIST.POPULAR")}</p>
-                </div>
-            </a>
+            <CategoryCard
+                Link={'/discover?category=trending&?platform=youtube'}
+                Name={t("SIDEBAR.CATEGORY_LIST.POPULAR")}
+                Platform="YouTube"
+                Thumbnail={DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg'}
+                Ratio="16:9"
+                server:defer
+            >
+                <div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
+            </CategoryCard>
         )}
         {MoviesSplit.map((data) =>
-            <a href={'/discover?category=movies&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
-                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
-                <div class="goin-card-content">
-                    <Movie viewBox="0 0 10 24"/>
-                    <p>{t("SIDEBAR.CATEGORY_LIST.TRAILERS")}</p>
-                </div>
-            </a>
+            <CategoryCard
+                Link={'/discover?category=movies&?platform=youtube'}
+                Name={t("SIDEBAR.CATEGORY_LIST.TRAILERS")}
+                Platform="YouTube"
+                Thumbnail={DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg'}
+                Ratio="16:9"
+                server:defer
+            >
+                <div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
+            </CategoryCard>
         )}
         {MusicSplit.map((data) =>
-            <a href={'/discover?category=music&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
-                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
-                <div class="goin-card-content">
-                    <MusicDoubleNote viewBox="0 0 10 24"/>
-                    <p>{t("SIDEBAR.CATEGORY_LIST.MUSIC")}</p>
-                </div>
-            </a>
+            <CategoryCard
+                Link={'/discover?category=music&?platform=youtube'}
+                Name={t("SIDEBAR.CATEGORY_LIST.MUSIC")}
+                Platform="YouTube"
+                Thumbnail={DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg'}
+                Ratio="16:9"
+                server:defer
+            >
+                <div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
+            </CategoryCard>
         )}
         {GamingSplit.map((data) =>
-            <a href={'/discover?category=gaming&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
-                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
-                <div class="goin-card-content">
-                    <Gamepad viewBox="0 0 10 24"/>
-                    <p>{t("SIDEBAR.CATEGORY_LIST.GAMES")}</p>
-                </div>
-            </a>
+            <CategoryCard
+                Link={'/discover?category=gaming&?platform=youtube'}
+                Name={t("SIDEBAR.CATEGORY_LIST.GAMES")}
+                Platform="YouTube"
+                Thumbnail={DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg'}
+                Ratio="16:9"
+                server:defer
+            >
+                <div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
+            </CategoryCard>
         )}
     </div>
     <br/>
     <div id="twitch" class="category-select-grid">
         {TwitchDiscoverData.data.map((data) =>
-            <a href={'/discover?category=' + data.name + '&?platform=twitch'} style={'background: url("' + data.image + '")'} class="goin-card">
-                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"/></svg></span>
-                <div class="goin-card-content">
-                    <p>{data.displayName}</p>
-                </div>
-            </a>
+            <CategoryCard
+                Link={'/discover?category=' + data.name + '&?platform=twitch'}
+                Name={data.displayName}
+                Platform="Twitch"
+                Thumbnail={DEFAULT_IMAGE_PROXY + '/' + data.image}
+                Ratio="9:16"
+                server:defer
+            >
+                <div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
+            </CategoryCard>
         )}
     </div>
     <br/>
@@ -99,6 +116,18 @@ const TwitchDiscoverData = await TwitchDiscoverFetch.json()
 
 <style is:inline>.sidebar-top-end a[href="/"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
 <style is:global lang="scss">
+@keyframes load {
+    0% { background-position-x: -100px; }
+    100% { background-position-x: -100%; }
+}
+.fl-sk-video {
+    height: 183px;
+    width: 100%;
+    background-image: linear-gradient(90deg, #323232 0px, #4c4c4c 40px, #323232 80px);
+    background-size: 600px;
+    animation: load 2s linear infinite;
+    border-radius: 6px;
+}
 img[src="/images/backgrounds/1.webp"] {
     position: fixed;
     bottom: 0px;
@@ -118,57 +147,6 @@ img[src="/images/backgrounds/1.webp"] {
     text-align: center;
     padding-top: 10%;
 }
-
-.goin-card {
-    height: 170px;
-    text-decoration: none;
-    border-radius: 10px;
-    background-size: cover !important;
-    background-position: center !important;
-    position: relative;
-    span {
-        svg {
-            fill: white;
-            width: 30px;
-            position: absolute;
-            z-index: 1;
-            margin: 18px;
-        }
-    }
-}
-
-.chip {
-    position: absolute;
-    z-index: 1;
-    left: 12px;
-}
-
-.goin-card-content {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    height: 100%;
-    place-content: center;
-    border-radius: 10px;
-    backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
-}
-.goin-card-content p {
-    font-size: 18px;
-    font-weight: bold;
-    position: absolute;
-    left: 0px;
-    bottom: 0px;
-    margin: 12px;
-}
-.goin-card-content svg {
-    display: none;
-}
-.goin-card img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 10px;
-}
 .category-select-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -177,9 +155,4 @@ img[src="/images/backgrounds/1.webp"] {
     margin: auto;
     padding: 0px 24px;
 }
-.category-select-grid#twitch {
-    a {
-        height: 328px;
-    }
-}
 </style>
\ No newline at end of file