diff --git a/test/astro.config.mjs b/test/astro.config.mjs
index 882e651..cc271c8 100644
--- a/test/astro.config.mjs
+++ b/test/astro.config.mjs
@@ -1,4 +1,7 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from 'astro/config'
+import vue from '@astrojs/vue'
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+    integrations: [vue()]
+});
diff --git a/test/bun.lockb b/test/bun.lockb
new file mode 100755
index 0000000..d005279
Binary files /dev/null and b/test/bun.lockb differ
diff --git a/test/package.json b/test/package.json
index 29870af..c4f7bb8 100644
--- a/test/package.json
+++ b/test/package.json
@@ -10,8 +10,13 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.14.2",
     "@astrojs/check": "^0.9.2",
-    "typescript": "^5.5.4"
+    "@astrojs/vue": "^4.5.0",
+    "@iconoir/vue": "^7.8.0",
+    "astro": "^4.14.2",
+    "astro-tooltips": "^0.6.2",
+    "sass-embedded": "^1.77.8",
+    "typescript": "^5.5.4",
+    "vue": "^3.4.38"
   }
-}
\ No newline at end of file
+}
diff --git a/test/src/pages/index.astro b/test/src/pages/index.astro
index 2d14107..d8359be 100644
--- a/test/src/pages/index.astro
+++ b/test/src/pages/index.astro
@@ -1,16 +1,90 @@
 ---
+// Components
+import Dialog from '../../../src/Dialog.astro'
+import Sidebar from '../../../src/Sidebar.astro'
+
+// Icons
+import {
+    InputSearch,
+    ProfileCircle,
+    Group,
+    Circle,
+    GitFork,
+    GraphUp,
+    Movie,
+    MusicDoubleNote,
+    Gamepad,
+    AppleImac2021Side,
+    EmojiTalkingHappy,
+    PlanetAlt,
+    Settings,
+    MediaVideoList
+} from '@iconoir/vue'
+---
 
----
 
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Astro</h1>
-	</body>
-</html>
+<Dialog
+	Name="dialog-id-thingie"
+	Title="Flurry Dialog"
+	Description="It's a dialog, what else did you expect?"
+	CloseButton="CloseExamepleDialog()"
+	Actions
+>
+	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+	<slot slot="actions">
+		<button onclick="CloseExamepleDialog()" class="fl-secondary-btn">Secondary</button>
+		<a>Primary</a>
+	</slot>
+</Dialog>
+
+<Sidebar
+	ShowHeader
+	LogoPath="https://ark.sudovanilla.org/avatars/984c733421da0eca64a9ec4f55305f739d748f0f50e5a91890a3372c544aa119?size=200"
+	ShowVersion
+	FooterLinks
+>
+	<slot slot="header-items">
+		<a href="#"><InputSearch/></a>
+		<a href="#"><ProfileCircle/></a>
+	</slot>
+	<slot slot="top-items">
+		<a href="#"><PlanetAlt/> Home</a>
+		<a href="#"><MediaVideoList/> Feed</a>
+		<h2>Categories</h2>
+		<a href="#"><GraphUp/> Trending</a>
+		<a href="#"><Movie/> Trailers</a>
+		<a href="#"><MusicDoubleNote/> Music</a>
+		<a href="#"><Gamepad/> Gaming</a>
+		<h2>Channel Discovery</h2>
+		<a href="#"><EmojiTalkingHappy/> Comedy</a>
+		<a href="#"><Gamepad/> Gaming</a>
+		<a href="#"><AppleImac2021Side/> Tech</a>
+		<h2>Project Demo</h2>
+		<a href="#" onclick="OpenExampleDialog()">Open Dialog</a>
+	</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>
+	</slot>
+</Sidebar>
+
+<style>
+body {
+	background: black;
+	color: white;
+	font-family: Arial, Helvetica, sans-serif;
+}
+</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'
+}
+</script>
\ No newline at end of file
