diff --git a/packages/gui/src/routes/packages/[slug]/+page.svelte b/packages/gui/src/routes/packages/[slug]/+page.svelte
index fbf2ee6..8c174e7 100644
--- a/packages/gui/src/routes/packages/[slug]/+page.svelte
+++ b/packages/gui/src/routes/packages/[slug]/+page.svelte
@@ -9,7 +9,7 @@
 	/** @type {import('./$types').PageData} */
 	export let data;
 
-	import { packages as packagesStore, initializePackages } from '$libs/stores';
+	import { packages as packagesStore } from '$libs/stores';
 
 	import type { Package } from '@tea/ui/types';
 
diff --git a/packages/ui/src/Button/Button.stories.ts b/packages/ui/src/Button/Button.stories.ts
index edbb27e..f0fe056 100644
--- a/packages/ui/src/Button/Button.stories.ts
+++ b/packages/ui/src/Button/Button.stories.ts
@@ -1,4 +1,4 @@
-import Button from './Button.svelte';
+import Button from './ButtonView.svelte';
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
 export default {
@@ -7,26 +7,12 @@ export default {
 	tags: ['docsPage'],
 	render: (args) => ({
 		Component: Button,
-		props: args,
-		on: {
-			click: args.onClick
-		}
+		props: args
 	}),
 	argTypes: {
-		backgroundColor: { control: 'color' },
-		label: { control: 'text' },
-		onClick: { action: 'onClick' },
-		primary: { control: 'boolean' },
-		size: {
-			control: { type: 'select' },
-			options: ['small', 'medium', 'large']
-		}
+		onClick: () => console.log('does nothing')
 	}
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
-export const Primary = {
-	args: {
-		primary: true
-	}
-};
+export const Primary = {};
diff --git a/packages/ui/src/Button/Button.svelte b/packages/ui/src/Button/Button.svelte
index 45096da..05c40b8 100644
--- a/packages/ui/src/Button/Button.svelte
+++ b/packages/ui/src/Button/Button.svelte
@@ -1,10 +1,10 @@
 <script type="ts">
-	let clazz: string = '';
+	let clazz: string;
 	export { clazz as class };
 
-	export let size: 'large' | 'medium' | 'small' = 'medium';
+	// export let size: 'large' | 'medium' | 'small' = 'medium';
 
-	export let onClick: () => void;
+	export let onClick: undefined | (() => void) = undefined;
 </script>
 
 <button
diff --git a/packages/ui/src/Button/ButtonView.svelte b/packages/ui/src/Button/ButtonView.svelte
new file mode 100644
index 0000000..1efe3c4
--- /dev/null
+++ b/packages/ui/src/Button/ButtonView.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+</script>
+
+<Button>Click Me</Button>
diff --git a/packages/ui/src/PackageCard/PackageCard.stories.ts b/packages/ui/src/PackageCard/PackageCard.stories.ts
index c67c9f4..e6519c0 100644
--- a/packages/ui/src/PackageCard/PackageCard.stories.ts
+++ b/packages/ui/src/PackageCard/PackageCard.stories.ts
@@ -23,7 +23,7 @@ export default {
 	tags: ['docsPage'],
 	render: ({ pkg, link }: { pkg: Package; link: string }) => ({
 		Component: PackageCard,
-		props: { pkg }
+		props: { pkg, link }
 	}),
 	argTypes: {
 		pkg: {
diff --git a/packages/ui/src/StarRating/StarRating.svelte b/packages/ui/src/StarRating/StarRating.svelte
index dffb069..552a0eb 100644
--- a/packages/ui/src/StarRating/StarRating.svelte
+++ b/packages/ui/src/StarRating/StarRating.svelte
@@ -1,8 +1,8 @@
 <script type="ts">
 	import '../app.css';
 
-	export let rating: number = 0;
-	export let maxRating: number = 5;
+	export let rating = 0;
+	export let maxRating = 5;
 
 	let stars: string[] = [];
 	for (let i = 1; i <= maxRating; i++) {