diff --git a/web/components/ui/Sidebar.vue b/web/components/ui/Sidebar.vue
new file mode 100644
index 0000000..63763b4
--- /dev/null
+++ b/web/components/ui/Sidebar.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { CalendarDate } from '@internationalized/date';
+import Title1 from './Title1.vue';
+import { UCard } from '#components';
+
+const selectedDate = shallowRef(new CalendarDate(2024, 6, 29));
+
+defineProps<{
+	todos: string[]
+}>()
+
+</script>
+
+<template>
+	<UCard class="w-64 h-full">
+		<template #header>
+			<Title1>Calendar</Title1>
+			<UCalendar v-model="selectedDate" />
+		</template>
+		<template #default>
+			<Title1>Todos</Title1>
+			<div class="flex gap-2 flex-col">
+				<UCard v-for="todo in todos">{{ todo }}</UCard>
+			</div>
+		</template>
+	</UCard>
+</template>
+
+<style scoped></style>
diff --git a/web/components/ui/Title1.vue b/web/components/ui/Title1.vue
new file mode 100644
index 0000000..122ba6b
--- /dev/null
+++ b/web/components/ui/Title1.vue
@@ -0,0 +1,11 @@
+<template>
+	<h1 class="text-xl font-bold">
+		<slot />
+	</h1>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped></style>
diff --git a/web/pages/index.vue b/web/pages/index.vue
index 84991c4..6328873 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { UButton } from '#components';
+import Sidebar from '~/components/ui/Sidebar.vue';
+
+const todos = ["Staistics", "Computer Graphics", "Webdev"]
 
 
 </script>
 
 <template>
-	<div>
-		<UButton>Click me</UButton>
+	<div class="h-screen w-screen p-4">
+		<Sidebar :todos="todos" />
 	</div>
 </template>