diff --git a/src/components/settings/RecurrentyCreateUpdate.vue b/src/components/settings/RecurrentyCreateUpdate.vue
index 54a08cd..9f44d9a 100644
--- a/src/components/settings/RecurrentyCreateUpdate.vue
+++ b/src/components/settings/RecurrentyCreateUpdate.vue
@@ -24,7 +24,7 @@ const mode = computed(() => {
 const recurrentCategory = ref<Category>({})
 const recurrentName = ref<string>()
 const recurrentAmount = ref<number>(0)
-const recurrentDate = ref<number>(Math.floor(Math.random() * 31))
+const recurrentDate = ref<number>(Math.floor(Math.random() * 31) + 1)
 
 
 const fetchData = async () => {
@@ -110,26 +110,29 @@ onMounted(async () => {
     <span class="text-center">Maybe you want to <router-link to="/categories" class="!text-blue-700">create a new category</router-link> first?</span>
   </div>
   <div v-else class="flex flex-col w-full justify-items-start gap-7">
-    <div v-if="isCategorySelectorOpened" class="!absolute !top-0 !left-0 !h-full !w-full !z-50 !px-4  !overflow-y-auto"
-         style="background: var(--primary-color)">
-      <div class="card">
-        <div v-for="key in categories.keys()" :key="categories[key].id"
-             @click="recurrentCategory = categories[key]; isCategorySelectorOpened = false"
-             class="flex flex-col  w-full gap-0 pl-5  items-start justify-items-center font-bold ">
-          <div class="flex-row  w-full items-center justify-between">
-            <div class="flex-row items-center gap-2">
-              <span class="text-3xl">{{ categories[key].icon }} </span>
-              <div class="flex-col justify-between">
-                <div class="flex-row"> {{ categories[key].name }}</div>
-                <div class="flex flex-row text-sm">{{ categories[key].description }}</div>
+    <!-- Fixed modal container -->
+    <div v-if="isCategorySelectorOpened" class="fixed inset-0 z-50 flex items-start justify-center p-4 overflow-y-auto" style="background-color: var(--primary-color)">
+      <div class="w-full max-w-md">
+        <div class="card justify-items-start justify-start">
+          <div v-for="(cat, idx) in categories" :key="cat.id"
+               @click="recurrentCategory = cat; isCategorySelectorOpened = false"
+               class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold cursor-pointer hover:bg-gray-50 transition-colors">
+            <div class="flex-row w-full items-center justify-between py-3">
+              <div class="flex-row items-center gap-2">
+                <span class="text-3xl">{{ cat.icon }} </span>
+                <div class="flex-col justify-between">
+                  <div class="flex-row"> {{ cat.name }}</div>
+                  <div class="flex flex-row text-sm text-gray-600">{{ cat.description }}</div>
+                </div>
               </div>
+              <i class="pi pi-angle-right !font-extralight"/>
             </div>
-            <i class="pi pi-angle-right  !font-extralight"/>
+            <Divider v-if="idx + 1 !== categories.length" class="!m-0"/>
           </div>
-          <Divider v-if="key+1 !== categories.length" class="!m-0 !py-3"/>
         </div>
       </div>
     </div>
+
     <div class="flex flex-col w-full  ">
       <div class="flex-col w-full">
 
@@ -153,7 +156,7 @@ onMounted(async () => {
     </div>
     <div class="flex flex-col w-full justify-items-start">
       <label class="!font-semibold  text-gray-600 pl-2">Recurrent category</label>
-      <div class="card !justify-start !items-start !p-4 !pl-5 " @click="isCategorySelectorOpened = true">
+      <div class="card !justify-start !items-start !p-4 !pl-5 cursor-pointer" @click="isCategorySelectorOpened = true">
         <div class="flex-row w-full gap-2 items-center justify-between">
           <div class="flex-row gap-2 items-center">
             <span class="!text-3xl ">{{ recurrentCategory.icon }}</span>
@@ -176,7 +179,7 @@ onMounted(async () => {
       <label class="!font-semibold  text-gray-600 !pl-2">Recurrent date</label>
       <div class="card !justify-start !items-start !pl-2">
         <div class="!grid !grid-cols-7 gap-2">
-          <div v-for="i in 31" class="!w-12 !h-12 !items-center !justify-items-center !justify-center rounded-full "
+          <div v-for="i in 31" class="!w-12 !h-12 !items-center !justify-items-center !justify-center rounded-full cursor-pointer flex"
                :class="recurrentDate == i ? 'bg-green-200' : 'bg-gray-100'"
                @click="recurrentDate=i">
             {{ i }}