diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/atoms/Input.svelte b/src/lib/components/atoms/Input.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/molecules/SearchBar.svelte b/src/lib/components/molecules/SearchBar.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/organisms/Footer.svelte b/src/lib/components/organisms/Footer.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/organisms/NavBar.svelte b/src/lib/components/organisms/NavBar.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/templates/Page.svelte b/src/lib/components/templates/Page.svelte
new file mode 100644
index 0000000..d0fb668
--- /dev/null
+++ b/src/lib/components/templates/Page.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import NavBar from '$components/organisms/NavBar.svelte';
+	import Footer from '$components/organisms/Footer.svelte';
+
+	type Props = { children: Snippet };
+	let { children }: Props = $props();
+</script>
+
+<main>
+	<NavBar />
+	{@render children()}
+	<Footer />
+</main>
diff --git a/svelte.config.js b/svelte.config.js
index bd33365..4ccb702 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -4,7 +4,14 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	preprocess: vitePreprocess(),
-	kit: { adapter: adapter() }
+	kit: {
+		adapter: adapter(),
+		alias: {
+			$components: './src/lib/components',
+			$api: './src/lib/api',
+			$lib: './src/lib'
+		}
+	}
 };
 
 export default config;