diff --git a/.storybook/main.ts b/.storybook/main.ts
index a7f2a69..7d83757 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,10 +1,10 @@
-import { join, dirname } from 'node:path';
+import { dirname, join, resolve } from 'node:path';
 
 import type { StorybookConfig } from '@storybook/sveltekit';
 import { mergeConfig } from 'vite';
 
 const config: StorybookConfig = {
-	stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	stories: ['../stories/**/*.mdx', '../stories/**/*.stories.ts'],
 	addons: [
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
@@ -21,12 +21,19 @@ const config: StorybookConfig = {
 		autodocs: 'tag'
 	},
 	async viteFinal(config) {
+		const allowFiles = config.server?.fs?.allow || [];
+		const storyFiles = resolve('stories');
+
 		return mergeConfig(config, {
+			alias: {
+				...config.alias,
+				$lib: resolve('..', 'src', 'lib')
+			},
 			server: {
 				...config.server,
 				fs: {
 					...config.server?.fs,
-					allow: [].concat(config.server?.fs?.allow || []).concat('stories')
+					allow: [...allowFiles, storyFiles]
 				}
 			}
 		});
diff --git a/stories/atoms/Avatar.stories.ts b/stories/atoms/Avatar.stories.ts
new file mode 100644
index 0000000..358b5da
--- /dev/null
+++ b/stories/atoms/Avatar.stories.ts
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Avatar from '$lib/components/atoms/Avatar.svelte';
+
+const meta = {
+	title: 'Atoms/Avatar',
+	component: Avatar,
+	tags: ['autodocs'],
+	argTypes: {
+		avatar: { control: 'text' },
+		displayName: { control: 'text' }
+	}
+} satisfies Meta<Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {
+	args: {
+		displayName: 'Jane Doe'
+	}
+};