diff --git a/README.md b/README.md
index b1f2ab0..5fca094 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,2 @@
-# Flurry
+# Polestar
 A component library built for MinPluto.
\ No newline at end of file
diff --git a/package.json b/package.json
index 5394502..c6afb1c 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
 {
-  "name": "@minpluto/flurry",
+  "name": "@minpluto/polestar",
   "author": "SudoVanilla <korbs@sudovanilla.org>",
   "type": "module",
-  "version": "0.0.11",
+  "version": "0.0.5",
   "license": "AGPL-3.0-only",
   "bugs": {
-    "url": "https://ark.sudovanilla.org/MinPluto/Flurry/issues",
+    "url": "https://ark.sudovanilla.org/MinPluto/Polestar/issues",
     "email": "support@minpluto.org"
   },
   "funding": [
diff --git a/src/Comment.astro b/src/Comment.astro
new file mode 100644
index 0000000..de40c01
--- /dev/null
+++ b/src/Comment.astro
@@ -0,0 +1,39 @@
+---
+// Properties
+const {
+    Avatar,
+    Username,
+    Link
+} = Astro.props
+
+// Components
+import { Image } from 'astro:assets';
+---
+
+<div class="fl-comment">
+    <Image src={Avatar} alt={Username + "'s avatar"} inferSize={true} format="webp"/>
+    <div>
+        <a style="margin-top: 12px;" href={Link}>{Username}</a>
+        <slot/>
+    </div>
+</div>
+
+<style lang="scss">
+    .fl-comment {
+        display: flex;
+        gap: 12px;
+        img {
+            width: 42px;
+            height: 42px;
+            border-radius: 3rem;
+        }
+        div {
+            display: grid;
+            gap: 12px;
+            * {margin: 0px}
+        }
+        a {
+            color: white;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/Creator.astro b/src/Creator.astro
new file mode 100644
index 0000000..e92a09e
--- /dev/null
+++ b/src/Creator.astro
@@ -0,0 +1,34 @@
+---
+// Properties
+const {
+    Avatar,
+    Name,
+    Link,
+    FollowerCount
+} = Astro.props
+
+// Components
+import { Image } from "astro:assets";
+
+---
+
+<a href={Link} class="fl-sidebar-creator">
+    <Image src={Avatar} alt={Name + "'s Avatar"} inferSize={true} format="webp"/>
+    <p>{Name}</p>
+</a>
+
+<style lang="scss">
+.fl-sidebar-creator {
+    display: flex;
+    align-items: center;
+    img {
+        width: 32px;
+        height: 32px;
+        border-radius: 3rem;
+        margin: -4px 0px;
+    }
+    p {
+        margin: 0px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/Sidebar.astro b/src/Sidebar.astro
index d710b48..24f93e2 100644
--- a/src/Sidebar.astro
+++ b/src/Sidebar.astro
@@ -11,13 +11,15 @@ import { Image } from "astro:assets";
         {
             ShowHeader ? (
                 <div class="fl-sidebar-header">
-                    <Image
-                        src={LogoPath}
-                        alt="Logo"
-                        inferSize={true}
-                        format="webp"
-                    />
-                    <div>
+                    <a class="fl-sidebar-header-logo" href="/">
+                        <Image
+                            src={LogoPath}
+                            alt="Logo"
+                            inferSize={true}
+                            format="webp"
+                        />
+                    </a>
+                    <div class="fl-sidebar-header-items">
                         <slot name="header-items" />
                     </div>
                 </div>
@@ -58,6 +60,7 @@ import { Image } from "astro:assets";
         flex-direction: column;
         justify-content: space-between;
         padding: 0px 12px;
+        overflow: auto;
         .fl-sidebar-items {
             display: grid;
             gap: 6px;
@@ -83,13 +86,15 @@ import { Image } from "astro:assets";
                 align-items: center;
                 gap: 12px;
                 border-radius: 6px;
-                padding: 6px 12px;
+                padding: 10px 12px;
                 cursor: pointer;
                 font-size: 14px;
-                border: 1px transparent solid;
+                min-height: 24px;
                 &:hover {
                     background: #3c3c3c;
-                    border: 1px #5c5c5c solid;
+                }
+                svg {
+                    width: 18px;
                 }
             }
         }
@@ -104,7 +109,7 @@ import { Image } from "astro:assets";
                     height: 64px;
                     pointer-events: none;
                 }
-                a {
+                .fl-sidebar-header-items a {
                     color: white;
                     text-decoration: none;
                     border-radius: 6px;
diff --git a/src/VideoItem.astro b/src/VideoItem.astro
index 1ed229e..6a7240f 100644
--- a/src/VideoItem.astro
+++ b/src/VideoItem.astro
@@ -15,17 +15,58 @@ const {
 import { Image } from 'astro:assets';
 ---
 
-<a href={"/watch?=" + VideoId} class="fl-vi">
+<a href={"/watch?v=" + VideoId} class="fl-vi">
     <div class="fl-vi-thumbnail">
-        <Image src={Thumbnail} alt={'Thumbnail'} loading="lazy" format="webp"/>
-        <p>{Platform}</p>
+        <Image src={Thumbnail} alt={'Thumbnail'} inferSize={true} loading="lazy" format="webp"/>
+        <!-- <p>{Platform}</p> -->
         <p>{Length}</p>
     </div>
     <div class="fl-vi-content">
-        <Image src={CreatorId} alt={'Creator Avatar'} loading="lazy" format="webp"/>
+        <Image src={'https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj'} alt={'Creator Avatar'} inferSize={true} loading="lazy" format="webp"/>
         <div>
             <p><strong>{Title}</strong></p>
             <p>{Date} - {Views}</p>
         </div>
     </div>
-</a>
\ No newline at end of file
+</a>
+
+<style lang="scss">
+.fl-vi {
+    color: white;
+    text-decoration: none;
+    .fl-vi-thumbnail {
+        position: relative;
+        img {
+            width: 100%;
+            height: 100%;
+            border-radius: 6px;
+        }
+        p {
+            position: absolute;
+            bottom: 0px;
+            right: 12px;
+            background: rgba(0,0,0,0.8);
+            border-radius: 3rem;
+            padding: 6px 12px;
+            font-size: 14px;
+        }
+    }
+    .fl-vi-content {
+        display: flex;
+        gap: 12px;
+        * {margin: 0px;}
+        img {
+            width: 32px;
+            height: 32px;
+            border-radius: 3rem;
+        }
+        strong {
+            max-width: 340px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            display: block;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/test/astro.config.mjs b/test/astro.config.mjs
index cc271c8..c12a900 100644
--- a/test/astro.config.mjs
+++ b/test/astro.config.mjs
@@ -1,7 +1,15 @@
 import { defineConfig } from 'astro/config'
 import vue from '@astrojs/vue'
+import node from '@astrojs/node'
 
 // https://astro.build/config
 export default defineConfig({
-    integrations: [vue()]
+    integrations: [vue()],
+    output: 'server',
+    adapter: node({
+      mode: 'standalone',
+    }),
+    experimental: {
+        serverIslands: true
+    }
 });
diff --git a/test/bun.lockb b/test/bun.lockb
index d005279..f985d5f 100755
Binary files a/test/bun.lockb and b/test/bun.lockb differ
diff --git a/test/package.json b/test/package.json
index c4f7bb8..4c6b776 100644
--- a/test/package.json
+++ b/test/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.2",
+    "@astrojs/node": "^8.3.3",
     "@astrojs/vue": "^4.5.0",
     "@iconoir/vue": "^7.8.0",
     "astro": "^4.14.2",
diff --git a/test/src/pages/index.astro b/test/src/pages/index.astro
index d8359be..4b544ba 100644
--- a/test/src/pages/index.astro
+++ b/test/src/pages/index.astro
@@ -1,7 +1,10 @@
 ---
 // Components
+import Comment from '../../../src/Comment.astro'
+import Creator from '../../../src/Creator.astro'
 import Dialog from '../../../src/Dialog.astro'
 import Sidebar from '../../../src/Sidebar.astro'
+import Video from '../../../src/VideoItem.astro'
 
 // Icons
 import {
@@ -18,7 +21,9 @@ import {
     EmojiTalkingHappy,
     PlanetAlt,
     Settings,
-    MediaVideoList
+    MediaVideoList,
+LogOut,
+OpenInBrowser
 } from '@iconoir/vue'
 ---
 
@@ -60,31 +65,121 @@ import {
 		<a href="#"><Gamepad/> Gaming</a>
 		<a href="#"><AppleImac2021Side/> Tech</a>
 		<h2>Project Demo</h2>
-		<a href="#" onclick="OpenExampleDialog()">Open Dialog</a>
+		<a href="#" onclick="OpenExampleDialog()"><OpenInBrowser/> Open Dialog</a>
+		<h2>Creators</h2>
+		<Creator
+			Avatar="https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj"
+			Name="The Linux Experiment"
+			Link="#"
+			FollowerCount="300K"
+			server:defer
+		>
+			<div style="display: flex; align-items: center; gap: 12px; padding: 0px 12px;" slot="fallback">
+				<div class="fl-sk-circle"></div>
+				<div class="fl-sk-text"></div>
+			</div>
+		</Creator>
+	</slot>
+	<slot slot="bottom-items">
+
 	</slot>
-	<slot slot="bottom-items"><a href="#"><Settings/> Settings</a></slot>
 	<slot slot="footer-items">
-		<a href="#"><Group/></a>
-		<a href="#"><Circle/></a>
-		<a href="#"><GitFork/></a>
+		<a href="#"><LogOut/></a>
+		<a href="#"><Settings/></a>
 	</slot>
 </Sidebar>
 
+<div class="content">
+	<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 12px;">
+		<Video
+			VideoId="PuGeR075MkE"
+			CreatorId="UC5UAwBUum7CPN5buc-_N1Fw"
+			Title="Immutable Linux, without the hassle? Vanilla OS 2 Orchid"
+			Thumbnail="https://ipx.sudovanilla.org/https://inv.tux.pizza/vi/PuGeR075MkE/mqdefault.jpg"
+			Date="2 weeks ago"
+			Views="71K"
+			Length="16:10"
+			Platform="YouTube"
+		/>
+		<Video
+			VideoId="urC7PKlM3Qo"
+			CreatorId="UC5UAwBUum7CPN5buc-_N1Fw"
+			Title="Nvidia pilfers Youtube for AI, GNOME HDR, Immutable Manjaro: Linux & Open Source News"
+			Thumbnail="https://ipx.sudovanilla.org/https://inv.tux.pizza/vi/urC7PKlM3Qo/mqdefault.jpg"
+			Date="1 weeks ago"
+			Views="43K"
+			Length="19:57"
+			Platform="YouTube"
+		/>
+		<Video
+			VideoId="YFr5E2C5ex8"
+			CreatorId="UC5UAwBUum7CPN5buc-_N1Fw"
+			Title="COSMIC Desktop ALPHA: a unique & important project for Linux!"
+			Thumbnail="https://ipx.sudovanilla.org/https://inv.tux.pizza/vi/YFr5E2C5ex8/mqdefault.jpg"
+			Date="2 weeks ago"
+			Views="101K"
+			Length="31:18"
+			Platform="YouTube"
+		/>
+	</div>
+
+	<br/>
+	<br/>
+	<br/>
+
+	<Comment
+		Avatar="https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj"
+		Username="The Linux Experiment"
+		Link="#"
+	>
+	Lorem ipsum odor amet, consectetuer adipiscing elit. Aliquet dapibus ridiculus purus dui id fusce interdum nibh. Nullam ut eu ridiculus consequat potenti. Cursus ornare cras orci penatibus dis leo et. At suscipit volutpat tincidunt elit suscipit egestas fames fusce finibus. Quisque interdum duis pharetra lobortis facilisi. Nullam ut montes, ullamcorper platea nam convallis. Eleifend lacus congue erat, amet ac montes. Netus ex velit non cursus lacinia magnis.
+
+Phasellus eget consequat penatibus magnis at. Augue neque placerat pellentesque finibus rhoncus integer. Molestie class ac dapibus malesuada interdum natoque posuere. Odio commodo interdum et luctus suspendisse habitant feugiat. Magna luctus pharetra tristique mattis quisque ex consectetur viverra. Consequat conubia viverra vitae penatibus venenatis fusce facilisis, nisl tincidunt.
+	</Comment>
+</div>
+
 <style>
 body {
 	background: black;
 	color: white;
 	font-family: Arial, Helvetica, sans-serif;
 }
+.content {
+	margin-left: 300px;
+}
 </style>
 
+<style is:global>
+    .fl-sk-circle {
+        height: 32px;
+        width: 32px;
+    	background-image: linear-gradient(90deg, #323232 0px, #4c4c4c 40px, #323232 80px);
+		background-size: 400px;
+		animation: load 1s linear infinite;
+        border-radius: 3rem;
+    }
+    .fl-sk-text {
+        height: 16px;
+    	background-image: linear-gradient(90deg, #323232 0px, #4c4c4c 40px, #323232 80px);
+		background-size: 400px;
+		animation: load 1s linear infinite;
+        border-radius: 3rem;
+        width: 120px;
+    }
+	@keyframes load {
+		0% { background-position-x: -100px; }
+		100% { background-position-x: -100%; }
+	}
+</style>
+
+
 <script is:inline>
 	function OpenExampleDialog() {
 		document.querySelector('#dialog-id-thingie').style.display = 'inherit'
 		document.querySelector('#dialog-id-thingie-backdrop').style.display = 'inherit'
 	}
-function CloseExamepleDialog() {
-    document.querySelector('#dialog-id-thingie').style.display = 'none'
-    document.querySelector('#dialog-id-thingie-backdrop').style.display = 'none'
-}
+	function CloseExamepleDialog() {
+		document.querySelector('#dialog-id-thingie').style.display = 'none'
+		document.querySelector('#dialog-id-thingie-backdrop').style.display = 'none'
+	}
 </script>
\ No newline at end of file