diff --git a/web/app.vue b/web/app.vue
index 537a040..1945e6f 100644
--- a/web/app.vue
+++ b/web/app.vue
@@ -2,6 +2,7 @@
 import { UApp } from '#components';
 </script>
 
+
 <template>
 	<UApp>
 		<NuxtPage />
diff --git a/web/components/ui/ListItem.vue b/web/components/ui/ListItem.vue
new file mode 100644
index 0000000..b16cc92
--- /dev/null
+++ b/web/components/ui/ListItem.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+	<UCard class="[&>*]:p-3">
+		<slot />
+	</UCard>
+</template>
+
+<style scoped></style>
diff --git a/web/components/ui/Sidebar.vue b/web/components/ui/Sidebar.vue
index 63763b4..e1528c8 100644
--- a/web/components/ui/Sidebar.vue
+++ b/web/components/ui/Sidebar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { CalendarDate } from '@internationalized/date';
+import ListItem from './ListItem.vue';
 import Title1 from './Title1.vue';
-import { UCard } from '#components';
 
 const selectedDate = shallowRef(new CalendarDate(2024, 6, 29));
 
@@ -13,15 +13,18 @@ defineProps<{
 
 <template>
 	<UCard class="w-64 h-full">
-		<template #header>
+		<template #header class="flex flex-col gap-2">
 			<Title1>Calendar</Title1>
 			<UCalendar v-model="selectedDate" />
 		</template>
-		<template #default>
+		<template #default class="flex-col gap-2">
 			<Title1>Todos</Title1>
 			<div class="flex gap-2 flex-col">
-				<UCard v-for="todo in todos">{{ todo }}</UCard>
+				<ListItem v-for="todo in todos">{{ todo }}</ListItem>
 			</div>
+			<UButton class="flex w-full justify-center ga">
+				+
+			</UButton>
 		</template>
 	</UCard>
 </template>