diff --git a/bun.lockb b/bun.lockb
index 3a105f3..380f21d 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index e94aa5c..7974efe 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@astrojs/node": "^8.3.3",
-    "astro": "^4.14.2"
+    "astro": "^4.14.3"
   },
   "devDependencies": {
     "sass-embedded": "^1.77.8"
diff --git a/src/components/Category.astro b/src/components/Category.astro
new file mode 100644
index 0000000..53930a6
--- /dev/null
+++ b/src/components/Category.astro
@@ -0,0 +1,81 @@
+---
+// Properties
+const {
+    Name,
+    CategoryType
+} = Astro.props
+
+// Components
+import Video from '@components/Video.astro'
+
+// Fetching
+const Videos = await fetch('https://yt.sudovanilla.org/api/v1/trending?type=' + CategoryType)
+.then((response) => response.json())
+.catch((error) => {})
+
+if (Videos === undefined) {var Failed = true}
+else {var Failed = false}
+
+---
+
+<div class="category">
+    <div class="category-start">
+        <h2>{Name}</h2>
+        <a href="#">See More</a>
+    </div>
+    <div class="category-end">
+        {Failed ?
+            <p>Failed to load.</p>
+            :
+            Videos.map((data) =>
+                <Video
+                    ID={data.videoId}
+                    Title={data.title}
+                    Creator={data.author}
+                    Views={data.viewCount}
+                    UploadDate={data.published}
+                    Length={data.lengthSeconds}
+                />
+            )
+        }
+    </div>
+</div>
+
+<style lang="scss" is:global>
+.category {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    .category-start {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .category-end {
+        display: flex;
+        box-sizing: border-box;
+        white-space: nowrap;
+        position: relative;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        align-items: center;
+        gap: 24px;
+        padding-bottom: 24px;
+        .video-item {
+            min-width: 300px !important;
+            p#vi-title {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+    .category-end::-webkit-scrollbar {
+        background: transparent;
+        height: 6px;
+    }
+    .category-end::-webkit-scrollbar-thumb {
+        background: white;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/CategorySkeleton.astro b/src/components/CategorySkeleton.astro
new file mode 100644
index 0000000..38a0e0b
--- /dev/null
+++ b/src/components/CategorySkeleton.astro
@@ -0,0 +1,174 @@
+<div class="category">
+    <div class="category-start">
+        <div class="loading-skel"></div>
+        <div class="loading-skel"></div>
+    </div>
+    <div class="category-end">
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+        <div class="loading-skel-video"></div>
+    </div>
+</div>
+
+<style lang="scss">
+@keyframes wave-lines {
+  0% {
+    background-position: -468px 0;
+  }
+  100% {
+    background-position: 468px 0;
+  }
+}
+@keyframes wave-squares {
+  0% {
+    background-position: -468px 0;
+  }
+  100% {
+    background-position: 468px 0;
+  }
+}
+
+.loading-skel {
+    height: 32px;
+    background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
+    background-size: 800px 100px;
+    animation: wave-lines 1s infinite ease-out;
+    border-radius: 12px;
+    padding: 12px;
+    max-width: 100px;
+    min-width: 100px;
+    width: 100%;
+    margin-bottom: 20px;
+    display: flex;
+}
+
+.loading-skel-avatar {
+    background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
+    background-size: 800px 100px;
+    animation: wave-lines 1s infinite ease-out;
+    border-radius: 3rem;
+    margin-bottom: 20px;
+    display: flex;
+    aspect-ratio: 1;
+    width: 137.7px;
+    height: 65px;
+}
+
+.loading-skel-video {
+    height: 232px;
+    margin-bottom: 6px;
+    background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
+    background-size: 800px 100px;
+    animation: wave-lines 2s infinite ease-out;
+    border-radius: 12px;
+    min-width: 400px;
+}
+
+.channel {
+    .channel-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0px 24px;
+        .channel-header-start {
+            display: flex;
+            align-items: center;
+            gap: 24px;
+            img {
+                width: 64px;
+                height: 64px;
+                border-radius: 3rem;
+            }
+        }
+        .channel-header-end {
+            button {
+                color: black;
+                background: white;
+                border: none;
+                border-radius: 3rem;
+                padding: 8px 16px;
+                font-size: 16px;
+                font-weight: bold;
+            }
+        }
+    }
+    .tabs {
+        display: flex;
+        gap: 12px;
+        margin: 16px 0px;
+        padding: 0px 24px;
+        a {
+            color: white;
+            text-decoration: none;
+            background: #373737;
+            padding: 12px 24px;
+            border-radius: 6px;
+        }
+    }
+}
+
+.video-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-gap: 25px;
+    max-width: 100%;
+    margin: auto;
+    padding: 0px 24px;
+}
+</style>
+
+<style lang="scss" is:global>
+.category {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    .category-start {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .category-end {
+        display: flex;
+        box-sizing: border-box;
+        white-space: nowrap;
+        position: relative;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        align-items: center;
+        gap: 24px;
+        padding-bottom: 24px;
+        .video-item {
+            min-width: 300px !important;
+            p#vi-title {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+    .category-end::-webkit-scrollbar {
+        background: transparent;
+        height: 6px;
+    }
+    .category-end::-webkit-scrollbar-thumb {
+        background: transparent;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ChannelCardSkeleton.astro b/src/components/ChannelCardSkeleton.astro
index 742c27e..c685277 100644
--- a/src/components/ChannelCardSkeleton.astro
+++ b/src/components/ChannelCardSkeleton.astro
@@ -43,7 +43,7 @@ const Channel = await fetch("https://yt.sudovanilla.org/api/v1/channels/UCY1kMZp
     </div>
 </div>
 
-<style lang="scss">
+<style lang="scss" is:global is:inline>
 @keyframes wave-lines {
   0% {
     background-position: -468px 0;
diff --git a/src/pages/categories.astro b/src/pages/categories.astro
new file mode 100644
index 0000000..0795b3e
--- /dev/null
+++ b/src/pages/categories.astro
@@ -0,0 +1,21 @@
+---
+import Base from '@layouts/Default.astro'
+import Video from '@components/Video.astro'
+import Category from '@components/Category.astro'
+import CategorySkeleton from '@components/CategorySkeleton.astro'
+---
+
+<Base Title="Server Island">
+    <Category Name="Trending" CategoryType="" server:defer>
+        <CategorySkeleton slot='fallback'/>
+    </Category>
+    <Category Name="Movies" CategoryType="movies" server:defer>
+        <CategorySkeleton slot='fallback'/>
+    </Category>
+    <Category Name="Music" CategoryType="music" server:defer>
+        <CategorySkeleton slot='fallback'/>
+    </Category>
+    <Category Name="Gaming" CategoryType="gaming" server:defer>
+        <CategorySkeleton slot='fallback'/>
+    </Category>
+</Base>
\ No newline at end of file