diff --git a/package.json b/package.json
index 72ebaa3..06c3b20 100644
--- a/package.json
+++ b/package.json
@@ -28,5 +28,9 @@
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.2"
 	},
-	"type": "module"
-}
\ No newline at end of file
+	"type": "module",
+	"dependencies": {
+		"@svelteuidev/composables": "0.6.5",
+		"@svelteuidev/core": "0.6.5"
+	}
+}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
new file mode 100644
index 0000000..d3798f0
--- /dev/null
+++ b/src/routes/__layout.svelte
@@ -0,0 +1,93 @@
+<script context="module">
+	export const prerender = true;
+</script>
+
+<script lang="ts">
+	import { Button, Switch, Container, createStyles, SvelteUIProvider } from '@svelteuidev/core';
+	import type { SvelteUIProviderProps } from '@svelteuidev/core';
+
+	const config: SvelteUIProviderProps['config'] = {
+		light: { bg: 'White', color: 'Black' },
+		dark: { bg: '#373737', color: '#C1C2C5' }
+	};
+
+	const MENU_ITEMS = [
+		{ label: 'Blog', href: '/blog' },
+		{ label: 'Projects', href: '/projects' }
+	];
+	// current y coordinate of the scroll bar
+	let y: number;
+	let isDark = false;
+	function toggleTheme() {
+		isDark = !isDark;
+	}
+
+	const useStyles = createStyles((theme) => {
+		return {
+			root: {
+				display: 'flex',
+				justifyContent: 'space-between',
+				alignItems: 'center',
+				position: 'sticky',
+				top: 0,
+				padding: theme.space[4],
+				'&.scrolled': {
+					[`${theme.dark} &`]: {
+						// using of SvelteUI utilities
+						// bc === backgroundColor
+						bc: theme.colors['dark500'].value
+					},
+					bc: theme.colors['gray700'].value,
+					color: 'rgb(223 223 223);',
+					boxShadow: theme.shadows.lg
+				}
+			},
+			list: {
+				listStyle: 'none',
+				display: 'flex',
+				marginBlock: '0px',
+				gap: theme.space[2]
+			},
+			menuItem: {
+				fontWeight: theme.fontWeights.bold
+			}
+		};
+	});
+	$: ({ classes, getStyles, cx } = useStyles());
+</script>
+
+<svelte:window bind:scrollY={y} />
+
+<SvelteUIProvider
+	{config}
+	themeObserver={isDark ? 'dark' : 'light'}
+	withNormalizeCSS
+	withGlobalStyles
+	ssr
+>
+	<div class={cx(getStyles(), { scrolled: y > 0 })}>
+		<h1>Alex' Website</h1>
+		<nav>
+			<ul class={classes.list}>
+				{#each MENU_ITEMS as menuItem}
+					<li>
+						<Button variant="subtle" color="cyan" radius="xl" uppercase ripple>
+							<a class={classes.menuItem} href={menuItem.href}>{menuItem.label}</a>
+						</Button>
+					</li>
+				{/each}
+			</ul>
+		</nav>
+		<Switch offLabel="Dark" size="lg" color="yellow" on:change={toggleTheme} />
+	</div>
+	<Container>
+		<slot />
+	</Container>
+</SvelteUIProvider>
+
+<style>
+	a {
+		text-decoration: none;
+		color: inherit;
+	}
+</style>
diff --git a/src/routes/blog/index.svelte b/src/routes/blog/index.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 5982b0a..76d8e65 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,2 +1,123 @@
+<script context="module">
+	export const prerender = true;
+</script>
+
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+dolore magna aliqua. Facilisis magna etiam tempor orci eu lobortis. Posuere lorem ipsum dolor sit amet
+consectetur adipiscing elit. Suspendisse potenti nullam ac tortor vitae purus. Cum sociis natoque penatibus
+et magnis. Adipiscing vitae proin sagittis nisl rhoncus. Accumsan lacus vel facilisis volutpat est velit.
+Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Nibh mauris cursus mattis molestie.
+Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ipsum suspendisse ultrices
+gravida dictum fusce ut. Tellus cras adipiscing enim eu. Commodo viverra maecenas accumsan lacus vel
+facilisis volutpat est. Quis vel eros donec ac odio tempor. Orci ac auctor augue mauris augue neque.
+Rhoncus mattis rhoncus urna neque viverra justo nec. Ultricies mi eget mauris pharetra et ultrices neque
+ornare aenean. Consectetur adipiscing elit ut aliquam purus sit. Eu volutpat odio facilisis mauris. Scelerisque
+eu ultrices vitae auctor. Massa tincidunt nunc pulvinar sapien et. Commodo odio aenean sed adipiscing
+diam. Purus faucibus ornare suspendisse sed nisi. Pretium viverra suspendisse potenti nullam ac tortor.
+Curabitur vitae nunc sed velit dignissim sodales. Mattis pellentesque id nibh tortor id. Scelerisque
+felis imperdiet proin fermentum leo. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi.
+Sit amet facilisis magna etiam tempor orci. Amet purus gravida quis blandit. Tempus egestas sed sed risus
+pretium. Diam vulputate ut pharetra sit amet. Mauris augue neque gravida in fermentum. Non odio euismod
+lacinia at quis risus. Sem fringilla ut morbi tincidunt augue interdum velit. Amet massa vitae tortor
+condimentum lacinia quis vel eros donec. Hac habitasse platea dictumst quisque sagittis purus. Magna
+ac placerat vestibulum lectus mauris ultrices eros in. Diam vel quam elementum pulvinar. Viverra aliquet
+eget sit amet tellus cras. Quis eleifend quam adipiscing vitae proin sagittis nisl. Sem et tortor consequat
+id porta. Odio morbi quis commodo odio. Eu augue ut lectus arcu bibendum at varius. Morbi tristique senectus
+et netus. Non tellus orci ac auctor augue. Luctus venenatis lectus magna fringilla urna. Velit dignissim
+sodales ut eu sem integer vitae. Sagittis purus sit amet volutpat consequat mauris nunc. Arcu non odio
+euismod lacinia at quis. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper.
+Diam ut venenatis tellus in metus. Pulvinar pellentesque habitant morbi tristique senectus et. Vel orci
+porta non pulvinar neque laoreet suspendisse. Tempus iaculis urna id volutpat lacus laoreet. Amet venenatis
+urna cursus eget nunc scelerisque viverra mauris in. Hac habitasse platea dictumst vestibulum rhoncus
+est pellentesque elit ullamcorper. Facilisis gravida neque convallis a. Urna duis convallis convallis
+tellus id interdum. Eu augue ut lectus arcu bibendum at varius. Ac turpis egestas maecenas pharetra convallis
+posuere morbi.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ut labore et dolore magna aliqua. Facilisis magna etiam tempor orci eu lobortis. Posuere lorem ipsum
+dolor sit amet consectetur adipiscing elit. Suspendisse potenti nullam ac tortor vitae purus. Cum sociis
+natoque penatibus et magnis. Adipiscing vitae proin sagittis nisl rhoncus. Accumsan lacus vel facilisis
+volutpat est velit. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Nibh mauris cursus
+mattis molestie. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ipsum suspendisse
+ultrices gravida dictum fusce ut. Tellus cras adipiscing enim eu. Commodo viverra maecenas accumsan lacus
+vel facilisis volutpat est. Quis vel eros donec ac odio tempor. Orci ac auctor augue mauris augue neque.
+Rhoncus mattis rhoncus urna neque viverra justo nec. Ultricies mi eget mauris pharetra et ultrices neque
+ornare aenean. Consectetur adipiscing elit ut aliquam purus sit. Eu volutpat odio facilisis mauris. Scelerisque
+eu ultrices vitae auctor. Massa tincidunt nunc pulvinar sapien et. Commodo odio aenean sed adipiscing
+diam. Purus faucibus ornare suspendisse sed nisi. Pretium viverra suspendisse potenti nullam ac tortor.
+Curabitur vitae nunc sed velit dignissim sodales. Mattis pellentesque id nibh tortor id. Scelerisque
+felis imperdiet proin fermentum leo. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi.
+Sit amet facilisis magna etiam tempor orci. Amet purus gravida quis blandit. Tempus egestas sed sed risus
+pretium. Diam vulputate ut pharetra sit amet. Mauris augue neque gravida in fermentum. Non odio euismod
+lacinia at quis risus. Sem fringilla ut morbi tincidunt augue interdum velit. Amet massa vitae tortor
+condimentum lacinia quis vel eros donec. Hac habitasse platea dictumst quisque sagittis purus. Magna
+ac placerat vestibulum lectus mauris ultrices eros in. Diam vel quam elementum pulvinar. Viverra aliquet
+eget sit amet tellus cras. Quis eleifend quam adipiscing vitae proin sagittis nisl. Sem et tortor consequat
+id porta. Odio morbi quis commodo odio. Eu augue ut lectus arcu bibendum at varius. Morbi tristique senectus
+et netus. Non tellus orci ac auctor augue. Luctus venenatis lectus magna fringilla urna. Velit dignissim
+sodales ut eu sem integer vitae. Sagittis purus sit amet volutpat consequat mauris nunc. Arcu non odio
+euismod lacinia at quis. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper.
+Diam ut venenatis tellus in metus. Pulvinar pellentesque habitant morbi tristique senectus et. Vel orci
+porta non pulvinar neque laoreet suspendisse. Tempus iaculis urna id volutpat lacus laoreet. Amet venenatis
+urna cursus eget nunc scelerisque viverra mauris in. Hac habitasse platea dictumst vestibulum rhoncus
+est pellentesque elit ullamcorper. Facilisis gravida neque convallis a. Urna duis convallis convallis
+tellus id interdum. Eu augue ut lectus arcu bibendum at varius. Ac turpis egestas maecenas pharetra convallis
+posuere morbi.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ut labore et dolore magna aliqua. Facilisis magna etiam tempor orci eu lobortis. Posuere lorem ipsum
+dolor sit amet consectetur adipiscing elit. Suspendisse potenti nullam ac tortor vitae purus. Cum sociis
+natoque penatibus et magnis. Adipiscing vitae proin sagittis nisl rhoncus. Accumsan lacus vel facilisis
+volutpat est velit. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Nibh mauris cursus
+mattis molestie. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ipsum suspendisse
+ultrices gravida dictum fusce ut. Tellus cras adipiscing enim eu. Commodo viverra maecenas accumsan lacus
+vel facilisis volutpat est. Quis vel eros donec ac odio tempor. Orci ac auctor augue mauris augue neque.
+Rhoncus mattis rhoncus urna neque viverra justo nec. Ultricies mi eget mauris pharetra et ultrices neque
+ornare aenean. Consectetur adipiscing elit ut aliquam purus sit. Eu volutpat odio facilisis mauris. Scelerisque
+eu ultrices vitae auctor. Massa tincidunt nunc pulvinar sapien et. Commodo odio aenean sed adipiscing
+diam. Purus faucibus ornare suspendisse sed nisi. Pretium viverra suspendisse potenti nullam ac tortor.
+Curabitur vitae nunc sed velit dignissim sodales. Mattis pellentesque id nibh tortor id. Scelerisque
+felis imperdiet proin fermentum leo. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi.
+Sit amet facilisis magna etiam tempor orci. Amet purus gravida quis blandit. Tempus egestas sed sed risus
+pretium. Diam vulputate ut pharetra sit amet. Mauris augue neque gravida in fermentum. Non odio euismod
+lacinia at quis risus. Sem fringilla ut morbi tincidunt augue interdum velit. Amet massa vitae tortor
+condimentum lacinia quis vel eros donec. Hac habitasse platea dictumst quisque sagittis purus. Magna
+ac placerat vestibulum lectus mauris ultrices eros in. Diam vel quam elementum pulvinar. Viverra aliquet
+eget sit amet tellus cras. Quis eleifend quam adipiscing vitae proin sagittis nisl. Sem et tortor consequat
+id porta. Odio morbi quis commodo odio. Eu augue ut lectus arcu bibendum at varius. Morbi tristique senectus
+et netus. Non tellus orci ac auctor augue. Luctus venenatis lectus magna fringilla urna. Velit dignissim
+sodales ut eu sem integer vitae. Sagittis purus sit amet volutpat consequat mauris nunc. Arcu non odio
+euismod lacinia at quis. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper.
+Diam ut venenatis tellus in metus. Pulvinar pellentesque habitant morbi tristique senectus et. Vel orci
+porta non pulvinar neque laoreet suspendisse. Tempus iaculis urna id volutpat lacus laoreet. Amet venenatis
+urna cursus eget nunc scelerisque viverra mauris in. Hac habitasse platea dictumst vestibulum rhoncus
+est pellentesque elit ullamcorper. Facilisis gravida neque convallis a. Urna duis convallis convallis
+tellus id interdum. Eu augue ut lectus arcu bibendum at varius. Ac turpis egestas maecenas pharetra convallis
+posuere morbi.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ut labore et dolore magna aliqua. Facilisis magna etiam tempor orci eu lobortis. Posuere lorem ipsum
+dolor sit amet consectetur adipiscing elit. Suspendisse potenti nullam ac tortor vitae purus. Cum sociis
+natoque penatibus et magnis. Adipiscing vitae proin sagittis nisl rhoncus. Accumsan lacus vel facilisis
+volutpat est velit. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Nibh mauris cursus
+mattis molestie. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ipsum suspendisse
+ultrices gravida dictum fusce ut. Tellus cras adipiscing enim eu. Commodo viverra maecenas accumsan lacus
+vel facilisis volutpat est. Quis vel eros donec ac odio tempor. Orci ac auctor augue mauris augue neque.
+Rhoncus mattis rhoncus urna neque viverra justo nec. Ultricies mi eget mauris pharetra et ultrices neque
+ornare aenean. Consectetur adipiscing elit ut aliquam purus sit. Eu volutpat odio facilisis mauris. Scelerisque
+eu ultrices vitae auctor. Massa tincidunt nunc pulvinar sapien et. Commodo odio aenean sed adipiscing
+diam. Purus faucibus ornare suspendisse sed nisi. Pretium viverra suspendisse potenti nullam ac tortor.
+Curabitur vitae nunc sed velit dignissim sodales. Mattis pellentesque id nibh tortor id. Scelerisque
+felis imperdiet proin fermentum leo. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi.
+Sit amet facilisis magna etiam tempor orci. Amet purus gravida quis blandit. Tempus egestas sed sed risus
+pretium. Diam vulputate ut pharetra sit amet. Mauris augue neque gravida in fermentum. Non odio euismod
+lacinia at quis risus. Sem fringilla ut morbi tincidunt augue interdum velit. Amet massa vitae tortor
+condimentum lacinia quis vel eros donec. Hac habitasse platea dictumst quisque sagittis purus. Magna
+ac placerat vestibulum lectus mauris ultrices eros in. Diam vel quam elementum pulvinar. Viverra aliquet
+eget sit amet tellus cras. Quis eleifend quam adipiscing vitae proin sagittis nisl. Sem et tortor consequat
+id porta. Odio morbi quis commodo odio. Eu augue ut lectus arcu bibendum at varius. Morbi tristique senectus
+et netus. Non tellus orci ac auctor augue. Luctus venenatis lectus magna fringilla urna. Velit dignissim
+sodales ut eu sem integer vitae. Sagittis purus sit amet volutpat consequat mauris nunc. Arcu non odio
+euismod lacinia at quis. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper.
+Diam ut venenatis tellus in metus. Pulvinar pellentesque habitant morbi tristique senectus et. Vel orci
+porta non pulvinar neque laoreet suspendisse. Tempus iaculis urna id volutpat lacus laoreet. Amet venenatis
+urna cursus eget nunc scelerisque viverra mauris in. Hac habitasse platea dictumst vestibulum rhoncus
+est pellentesque elit ullamcorper. Facilisis gravida neque convallis a. Urna duis convallis convallis
+tellus id interdum. Eu augue ut lectus arcu bibendum at varius. Ac turpis egestas maecenas pharetra convallis
+posuere morbi.
diff --git a/src/routes/projects/index.svelte b/src/routes/projects/index.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/yarn.lock b/yarn.lock
index b830770..b03a060 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -98,6 +98,11 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@stitches/core@1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@stitches/core/-/core-1.2.8.tgz#dce3b8fdc764fbc6dbea30c83b73bfb52cf96173"
+  integrity sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==
+
 "@sveltejs/adapter-auto@next":
   version "1.0.0-next.50"
   resolved "https://registry.yarnpkg.com/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.50.tgz#b072dd95210d1e6a0cef54106a3efc138a147362"
@@ -155,6 +160,18 @@
     magic-string "^0.26.2"
     svelte-hmr "^0.14.12"
 
+"@svelteuidev/composables@0.6.5":
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/@svelteuidev/composables/-/composables-0.6.5.tgz#993f1cc2c888137c2ba8c48d68fe64c58b32ceee"
+  integrity sha512-aFhNLGkf4067nK7522LIEUbzfKDHJUxFjNX4JMOPkPyuv7iNyMeWvMAqZgqvyUKZ+EKi1qMZJUFevIB4IsQzEw==
+
+"@svelteuidev/core@0.6.5":
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/@svelteuidev/core/-/core-0.6.5.tgz#1503251b71b6748c4ebf8d6c18cb945e3938b6e6"
+  integrity sha512-H3PnmYmfYaQEowQsE3J2UULlStcIrAaiht2eO1QDNrZ7H2PIXKkBBZdpdoNYrGZg0AP/t5ovU/+q4lOOCTNVWA==
+  dependencies:
+    "@stitches/core" "1.2.8"
+
 "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"