diff --git a/frontend/src/components/nav-menu.vue b/frontend/src/components/nav-menu.vue
index 06a14653..e3e44cc0 100644
--- a/frontend/src/components/nav-menu.vue
+++ b/frontend/src/components/nav-menu.vue
@@ -64,6 +64,7 @@ const today = new Date().toLocaleDateString('en-US', {
 
 const toggleSidebar = (event) => {
   event.stopPropagation()
+  store.setIsOpenCard(false)
   isSidebarActive.value = !isSidebarActive.value
   if (isSidebarActive.value) {
     window.addEventListener('click', closeSidebar)
@@ -187,7 +188,7 @@ onUnmounted(() => {
         border-style: solid;
         border-image: $border-gradient;
         border-image-slice: 1;
-         svg {
+        svg {
           color: #dadada;
         }
       }
diff --git a/frontend/src/components/task-card.vue b/frontend/src/components/task-card.vue
index 28633279..6be42f23 100644
--- a/frontend/src/components/task-card.vue
+++ b/frontend/src/components/task-card.vue
@@ -1,76 +1,6 @@
-<template>
-  <div v-if="store.isopencard" class="task-card" ref="taskCard">
-    <div class="task-actions">
-      <!-- delete icon -->
-      <font-awesome-icon
-        icon="fa-regular fa-trash-can"
-        class="trash"
-        @click="deleteTask(store.selectedTask)"
-      />
-      <font-awesome-icon
-        icon="fa-regular fa-check-square"
-        class="checkbox"
-        @click="updateTaskDoneStatus(store.selectedTask)"
-        :class="{ done: store.selectedTask.done }"
-      />
-      <font-awesome-icon
-        icon="fa-solid fa-repeat"
-        class="repeat"
-        @click="openRepeatCard(store.selectedTask)"
-      />
-    </div>
-    <!-- title -->
-    <div class="task-title">
-      <input
-        class="task-title"
-        v-model="store.selectedTask.title"
-        @input="updateTaskTitle"
-        @keyup.enter="saveTaskAndClose"
-        placeholder="Title"
-      />
-      <font-awesome-icon icon="fa-solid fa-pencil" />
-    </div>
-    <div class="task-date">
-      <VDatePicker
-        v-model="store.selectedTask.date"
-        @update:modelValue="handleDateSelection"
-        is-dark
-        class="date-picker"
-        color="indigo"
-        :popover="false"
-      >
-        <template #default="{ togglePopover }">
-          <div>
-            <button class="date-btn" @click="() => togglePopover()">
-              <span
-                ><font-awesome-icon icon="fa-solid fa-calendar-days" />{{
-                  store.selectedTask.date
-                }}</span
-              >
-            </button>
-          </div>
-        </template>
-      </VDatePicker>
-      <VueDatePicker
-        v-model="store.timepic"
-        class="time-picker"
-        dark
-        time-picker
-        @update:modelValue="handleTimeSelection"
-      />
-    </div>
-    <input
-      class="task-desc"
-      v-model="store.selectedTask.description"
-      @input="updateTaskDescription"
-      @keyup.enter="saveTaskAndClose"
-      placeholder="Description"
-    />
-  </div>
-</template>
-
 <script setup>
 import axios from 'axios'
+import taskRepeat from './task-repeat.vue'
 import { useStore } from '@/stores'
 const props = defineProps(['fetchData', 'task'])
 const store = useStore()
@@ -91,6 +21,19 @@ const deleteTask = async (task) => {
   }
   props.fetchData()
 }
+const handleClickOutside = (event) => {
+  if (store.isRepeatOpen && !event.target.closest('.task-repeat')) {
+    store.setIsRepeatOpen(false)
+    document.removeEventListener('click', handleClickOutside)
+  }
+}
+const openRepeatCard = () => {
+  setTimeout(() => {
+    store.setIsRepeatOpen(true)
+  }, 0)
+  document.addEventListener('click', handleClickOutside)
+}
+
 const updateTaskDoneStatus = async (task) => {
   try {
     task.done = !task.done
@@ -119,6 +62,8 @@ const closeTaskCard = () => {
     title: '',
     date: null,
     time: null,
+    repeatParameters: null,
+    repeatId: null,
     description: '',
     done: false
   })
@@ -148,6 +93,7 @@ const updateTaskDescription = (event) => {
 
 const saveTaskAndClose = async () => {
   try {
+    console.log(store.selectedTask)
     if (store.selectedTask.title.trim() === '') {
       // If title is empty, do nothing
       closeTaskCard()
@@ -179,7 +125,6 @@ const saveTaskAndClose = async () => {
         localStorage.setItem('nextTaskId', nextTaskId)
       }
     }
-
     closeTaskCard()
   } catch (error) {
     // Handle errors
@@ -189,6 +134,85 @@ const saveTaskAndClose = async () => {
 }
 props.fetchData()
 </script>
+
+<template>
+  <div v-if="store.isopencard" class="task-card" ref="taskCard">
+    <div class="task-actions">
+      <!-- delete icon -->
+      <font-awesome-icon
+        title="Delete Task"
+        icon="fa-regular fa-trash-can"
+        class="trash"
+        @click="deleteTask(store.selectedTask)"
+      />
+      <!-- done icon -->
+      <font-awesome-icon
+        title="Mark As Done"
+        icon="fa-regular fa-check-square"
+        class="checkbox"
+        @click="updateTaskDoneStatus(store.selectedTask)"
+        :class="{ done: store.selectedTask.done }"
+      />
+      <!-- repeat icon -->
+      <font-awesome-icon
+        title="Repeat Task"
+        icon="fa-solid fa-repeat"
+        class="repeat"
+        @click="openRepeatCard()"
+      />
+    </div>
+    <!-- title -->
+    <div class="task-title">
+      <input
+        class="task-title"
+        v-model="store.selectedTask.title"
+        @input="updateTaskTitle"
+        @keyup.enter="saveTaskAndClose"
+        placeholder="Title"
+      />
+      <font-awesome-icon icon="fa-solid fa-pencil" />
+    </div>
+    <div class="task-date">
+      <VDatePicker
+        v-model="store.selectedTask.date"
+        @update:modelValue="handleDateSelection"
+        is-dark
+        class="date-picker"
+        color="indigo"
+        :popover="false"
+      >
+        <template #default="{ togglePopover }">
+          <div>
+            <button class="date-btn" @click="() => togglePopover()">
+              <span
+                ><font-awesome-icon icon="fa-solid fa-calendar-days" />{{
+                  store.selectedTask.date
+                }}</span
+              >
+            </button>
+          </div>
+        </template>
+      </VDatePicker>
+      <VueDatePicker
+        v-model="store.timepic"
+        class="time-picker"
+        dark
+        time-picker
+        @update:modelValue="handleTimeSelection"
+      />
+    </div>
+    <input
+      class="task-desc"
+      v-model="store.selectedTask.description"
+      @input="updateTaskDescription"
+      @keyup.enter="saveTaskAndClose"
+      placeholder="Description"
+    />
+
+    <taskRepeat v-if="store.isRepeatOpen"></taskRepeat>
+  </div>
+</template>
+
 <style lang="scss">
 @import './../styles.scss';
 .tasks {
diff --git a/frontend/src/components/task-repeat.vue b/frontend/src/components/task-repeat.vue
new file mode 100644
index 00000000..1d338a14
--- /dev/null
+++ b/frontend/src/components/task-repeat.vue
@@ -0,0 +1,317 @@
+<script setup>
+import { ref } from 'vue'
+import { useStore } from '@/stores'
+const store = useStore()
+
+const everyNumber = ref(1)
+const everyUnit = ref('days')
+const selectedDays = ref([])
+const repeatEnd = ref('never')
+const occurrences = ref(30)
+const endDate = ref(
+  new Date(new Date(store.selectedTask.date).setMonth(new Date().getMonth() + 1))
+    .toISOString()
+    .split('T')[0]
+)
+const repeatNot = ref(false)
+
+const validateInput = () => {
+  if (everyNumber.value < 1) {
+    everyNumber.value = 1
+  }
+  if (occurrences.value < 1) {
+    occurrences.value = 1
+  }
+}
+
+const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+
+const toggleDay = (day) => {
+  const index = selectedDays.value.indexOf(day)
+  if (index === -1) {
+    selectedDays.value.push(day)
+  } else {
+    selectedDays.value.splice(index, 1)
+  }
+}
+
+const toggleRepeatNot = () => {
+  repeatNot.value = !repeatNot.value
+}
+
+const save = () => {
+  try {
+    if (!repeatNot.value) {
+      store.setSelectedTask({
+        ...store.selectedTask,
+        repeatParameters: {
+          everyNumber: everyNumber.value,
+          everyUnit: everyUnit.value,
+          selectedDays: everyUnit.value == 'weeks' ? selectedDays.value : [],
+          repeatEnd: repeatEnd.value,
+          occurrences: repeatEnd.value == 'after' ? occurrences.value : null,
+          endDate: repeatEnd.value == 'on' ? endDate.value : null
+        },
+        repeatId: store.selectedTask.id
+      })
+    }
+  } catch (error) {
+    console.error(error)
+  }
+
+  store.setIsRepeatOpen(false)
+}
+const cancel = () => {
+  store.setIsRepeatOpen(false)
+}
+</script>
+
+<template>
+  <div class="task-repeat">
+    <div class="title">Repeat</div>
+    <div :class="repeatNot ? 'customization not-repeating' : 'customization'">
+      <div class="repeat-every">
+        <span>Every</span>
+        <input
+          type="number"
+          min="1"
+          step="1"
+          v-model.number="everyNumber"
+          @blur="validateInput"
+          :disabled="repeatNot"
+        />
+        <select name="" v-model="everyUnit" :disabled="repeatNot">
+          <option value="days">days</option>
+          <option value="weeks">weeks</option>
+          <option value="months">months</option>
+          <option value="years">years</option>
+        </select>
+      </div>
+      <div v-if="everyUnit === 'weeks' && !repeatNot" class="repeat-on">
+        <span>On</span>
+        <button
+          v-for="(day, index) in weekDays"
+          :key="index"
+          :class="{ active: selectedDays.includes(day) }"
+          @click="toggleDay(day)"
+          class="week-days"
+        >
+          {{ day }}
+        </button>
+      </div>
+      <div class="repeat-ends">
+        <span>Ends</span>
+        <label class="ends-option">
+          <input
+            type="radio"
+            name="repeat-ends"
+            value="never"
+            v-model="repeatEnd"
+            :disabled="repeatNot"
+            @change="handleRepeatEndChange"
+            checked
+          />
+          Never
+        </label>
+        <label class="ends-option">
+          <input
+            type="radio"
+            name="repeat-ends"
+            value="after"
+            v-model="repeatEnd"
+            :disabled="repeatNot"
+            @change="handleRepeatEndChange"
+          />
+          After
+          <input
+            type="number"
+            v-model="occurrences"
+            @change="handleRepeatEndChange"
+            min="1"
+            @blur="validateInput"
+            style="width: 50px; margin-left: 5px"
+            :disabled="repeatEnd !== 'after' || repeatNot"
+          />
+          times
+        </label>
+        <label class="ends-option">
+          <input
+            type="radio"
+            name="repeat-ends"
+            value="on"
+            v-model="repeatEnd"
+            :disabled="repeatNot"
+            @change="handleRepeatEndChange"
+          />
+          On
+          <input
+            type="date"
+            v-model="endDate"
+            @change="handleRepeatEndChange"
+            style="margin-left: 5px"
+            :disabled="repeatEnd !== 'on' || repeatNot"
+          />
+        </label>
+      </div>
+      <div class="repeat-not">
+        <button @click="toggleRepeatNot" :class="{ active: repeatNot }">
+          {{ repeatNot ? 'Repeat' : "Don't Repeat" }}
+        </button>
+      </div>
+    </div>
+    <div class="buttons">
+      <button @click="cancel()">cancel</button>
+      <button @click="save()">save</button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import './../styles.scss';
+
+.task-repeat {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  width: 90%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #111;
+  border: 1px solid #88888813;
+  border-radius: 8px;
+  padding: 25px 20px;
+  .title {
+    font-weight: bold;
+  }
+  .customization {
+    padding: 15px 0;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    flex: 1;
+    input,
+    select {
+      color: white;
+      width: 60px;
+      background: #111;
+      border: 1px solid #ffffff2d;
+      padding: 5px 8px;
+      border-radius: 4px;
+      &:focus {
+        background: #222;
+        border: 1px solid #222;
+      }
+    }
+    input:disabled {
+      background-color: #111;
+      color: #222;
+      border: 1px solid #222;
+    }
+    .repeat-every {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      select {
+        width: 85px;
+      }
+    }
+    .repeat-on {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      span {
+        padding-right: 10px;
+      }
+      .week-days {
+        font-size: 13px;
+        line-height: 0;
+        background: #111;
+        color: white;
+        border: 1px solid #ffffff2d;
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &:hover {
+          color: #2dff61;
+          background: #79ff9a18;
+          border: 1px solid #79ff9a18;
+        }
+      }
+      .active {
+        color: #2dff61;
+        background: #79ff9a18;
+        border: 1px solid #79ff9a18;
+      }
+    }
+    .repeat-ends {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      input {
+        width: fit-content;
+      }
+      .ends-option {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      input[type='date']::-webkit-calendar-picker-indicator {
+        filter: invert(1);
+      }
+      input[type='date'] {
+        color-scheme: dark;
+      }
+    }
+    .repeat-not {
+      button {
+        padding: 5px 8px;
+        cursor: pointer;
+        background: #222;
+        border: 1px solid #222;
+        border-radius: 4px;
+        color: white;
+        &:hover {
+          background: #161616;
+          border: 1px solid #222;
+        }
+      }
+      .active {
+        background: #161616;
+        border: 1px solid #222;
+      }
+    }
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: end;
+    gap: 10px;
+    button {
+      color: white;
+      width: 60px;
+      background: #111;
+      border: 1px solid #ffffff2d;
+      padding: 6px 8px;
+      border-radius: 4px;
+      &:hover {
+        background: #333;
+        cursor: pointer;
+      }
+      &:nth-of-type(2) {
+        color: #2dff61;
+        background: #79ff9a18;
+        border: 1px solid #79ff9a18;
+        &:hover {
+          background: #79ff9b36;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/stores/index.js b/frontend/src/stores/index.js
index e0daa9d5..d55b9413 100644
--- a/frontend/src/stores/index.js
+++ b/frontend/src/stores/index.js
@@ -12,12 +12,15 @@ export const useStore = defineStore('storeId', {
       join: null
     },
     isopencard: false,
+    isRepeatOpen: false,
     selectedTask: {
       id: null,
       title: '',
       date: null,
       time: '00:00',
       description: '',
+      repeatParameters: null,
+      repeatId: null, 
       done: false,
       user: null
     },
@@ -30,6 +33,9 @@ export const useStore = defineStore('storeId', {
     setIsOpenCard(value) {
       this.isopencard = value
     },
+    setIsRepeatOpen(value) {
+      this.isRepeatOpen = value
+    },
     setSelectedTask(task) {
       this.selectedTask = task
     },
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 43c56936..846b44a5 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -49,3 +49,58 @@ body {
   --dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);
   --dp-range-between-border-color: var(--dp-hover-color, #fff);
 }
+
+input,
+textarea,
+select {
+  background-color: #333;
+  color: #fff;
+  border: 1px solid #444;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: #777;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: #555;
+}
+
+select option {
+  background-color: #333;
+  color: #fff;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: #333;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #444;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+select:hover option:hover {
+  background-color: #555;
+}
diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue
index feed3afd..6a09d2e5 100644
--- a/frontend/src/views/CalendarView.vue
+++ b/frontend/src/views/CalendarView.vue
@@ -109,7 +109,6 @@ const getTasksForDate = (date) => {
     .sort((a, b) => (a.done === b.done ? 0 : a.done ? 1 : -1))
 }
 
-
 const handleResize = () => {
   isWideScreen.value = window.innerWidth >= 1075 || window.innerWidth <= 600
 }
@@ -169,6 +168,8 @@ const closeTaskCard = () => {
     title: '',
     date: null,
     time: null,
+    repeatParameters: null,
+    repeatId: null,
     description: '',
     done: false
   })
@@ -176,7 +177,7 @@ const closeTaskCard = () => {
     hours: 0,
     minutes: 0
   }
-  window.removeEventListener('click', closeTaskCard)
+  document.removeEventListener('click', openTaskCard)
 }
 
 const saveTaskAndClose = async () => {
@@ -222,8 +223,13 @@ const saveTaskAndClose = async () => {
 }
 
 const openTaskCard = (event, task, day) => {
-  if (event.target.closest('.task-card')) {
+  if (
+    event.target.closest('.task-card') ||
+    event.target.closest('.task-repeat') ||
+    store.isRepeatOpen
+  ) {
     // Clicked inside the task card, don't trigger opening or closing
+
     return
   }
   if (event.target.classList.contains('checkbox')) {
@@ -232,21 +238,30 @@ const openTaskCard = (event, task, day) => {
   if (!task && !store.isopencard) {
     // create new task
 
-    store.setSelectedTask({
-      id: null,
-      title: '',
-      date: day.date,
-      time: null,
-      description: '',
-      done: false,
-      user: localStorage.getItem('userId') || null
-    })
-    store.setIsOpenCard(true)
+    setTimeout(() => {
+      store.setIsOpenCard(true)
+      store.setSelectedTask({
+        id: null,
+        title: '',
+        date: day.date,
+        time: null,
+        description: '',
+        repeatParameters: null,
+        repeatId: null,
+        done: false,
+        user: localStorage.getItem('userId') || null
+      })
+    }, 0)
+
+    document.addEventListener('click', openTaskCard)
   } else if (!task && store.isopencard) {
     saveTaskAndClose()
   } else if (task && !store.isopencard) {
     //update existing task
-    store.setIsOpenCard(true)
+
+    setTimeout(() => {
+      store.setIsOpenCard(true)
+    }, 0)
     store.setSelectedTask({ ...task })
     if (store.selectedTask.time) {
       store.timepic = {
@@ -254,16 +269,12 @@ const openTaskCard = (event, task, day) => {
         minutes: store.selectedTask.time.split(':')[1]
       }
     }
+
+    document.addEventListener('click', openTaskCard)
   } else {
     saveTaskAndClose()
   }
-  if (!store.isopencard) {
-    window.addEventListener('click', closeTaskCard)
-  } else {
-    window.removeEventListener('click', closeTaskCard)
-  }
 }
-
 window.addEventListener('resize', handleResize)
 handleResize()
 fetchData()