diff --git a/web/components/ui/MainContent.vue b/web/components/ui/MainContent.vue
index 5e778c7..203d8fd 100644
--- a/web/components/ui/MainContent.vue
+++ b/web/components/ui/MainContent.vue
@@ -28,7 +28,7 @@ function deleteItem(event: Event) {
 </script>
 
 <template>
-	<UCard class="flex grow" :ui="{ body: 'w-full h-full' }">
+	<UCard class="md:flex grow hidden" :ui="{ body: 'w-full h-full' }">
 		<Calendar @create="(event) => emits('createEvent', event)" @edit-task="(task) => emits('edit-task', task)"
 			@edit="(event) => emits('edit-event', event)" @delete="deleteItem" v-model:events="events"
 			v-model:date="date" , v-model:dragged-task="draggedTask" v-model:tasks="tasks">
diff --git a/web/components/ui/Sidebar.vue b/web/components/ui/Sidebar.vue
index 1a0a932..ac759b6 100644
--- a/web/components/ui/Sidebar.vue
+++ b/web/components/ui/Sidebar.vue
@@ -148,7 +148,7 @@ function dismissSchedule() {
 </script>
 
 <template>
-	<UCard class="flex w-64 h-full" :ui="{ body: 'w-full' }">
+	<UCard class="flex md:w-64 w-full h-full" :ui="{ body: 'w-full' }">
 		<UiTaskFormModal v-model:open="showTaskCreateModal" :input="taskFormModalInput" action="create"
 			@submnitted="addTask" />
 		<UiTaskFormModal v-model:open="showTaskEditModal" :input="taskFormModalInput" action="edit"
@@ -163,7 +163,7 @@ function dismissSchedule() {
 		</UModal>
 
 		<div class="flex flex-col h-full w-full gap-5" @dragenter="dismissSchedule">
-			<header class="flex flex-col gap-2">
+			<header class="flex-col gap-2 md:flex hidden">
 				<Title1>Calendar</Title1>
 				<UCalendar v-model="selectedDate" />
 			</header>
@@ -224,6 +224,3 @@ function dismissSchedule() {
 	</UCard>
 </template>
 <style scoped></style>
-<style scoped></style>
-<style scoped></style>
-<style scoped></style>
diff --git a/web/components/ui/calendar/Calendar.vue b/web/components/ui/calendar/Calendar.vue
index 7adfc4d..6e81acc 100644
--- a/web/components/ui/calendar/Calendar.vue
+++ b/web/components/ui/calendar/Calendar.vue
@@ -256,7 +256,8 @@ function rawEdit(event: Event) {
 			<CalendarCollumn v-for="day in days" :seperators="seperators" :day="day.date" :events="day.events"
 				:task-dragging-active="taskDraggingActive" :date="date" v-model:draggedEvent="draggedEvent"
 				@quick-create="openCreateModal" @edit="openEditModal" @delete="openDeleteModal" @moved="moveEvent"
-				@edit-task="(task) => emits('edit-task', task)" @raw-edit="(event) => rawEdit(event)" v-model:dragged-task="draggedTask" />
+				@edit-task="(task) => emits('edit-task', task)" @raw-edit="(event) => rawEdit(event)"
+				v-model:dragged-task="draggedTask" />
 		</div>
 
 	</div>