diff --git a/src/components/Reminders/AddEditReminder.jsx b/src/components/Reminders/AddEditReminder.jsx
index 0bd31dc..892009a 100644
--- a/src/components/Reminders/AddEditReminder.jsx
+++ b/src/components/Reminders/AddEditReminder.jsx
@@ -142,7 +142,7 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Reminder Type</label>
-                <select value={reminder.category} name='category' className='bg-[#fafafa] border-light-purple rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
+                <select value={reminder.category} name='category' className='bg-[#fafafa] border-light-purple rounded-full pl-4 dark:bg-[#11131F] dark:text-[#7B818D] text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
                   <option className='' value="">Select category</option>
                   {category.length > 0 &&
                   <>
@@ -163,7 +163,7 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Mode</label>
-                <select value={reminder.mode} name='mode' className='bg-[#fafafa] rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
+                <select value={reminder.mode} name='mode' className='bg-[#fafafa] rounded-full pl-4 dark:bg-[#11131F] dark:text-[#7B818D] text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
                 <option className='' value="">Select mode</option>
                   {category.length > 0 &&
                   <>
@@ -199,6 +199,7 @@ export default function AddEditReminder({ className }) {
                 clearIcon={startDate ? null : 'x'}
                 value={startDate}
                 onChange={(date) => setStartDate(date)}
+                calendarIcon={<CalendarIcon />}
               />
               </div>
               <div className="field w-full">
@@ -213,6 +214,7 @@ export default function AddEditReminder({ className }) {
                 range="range"
                 value={endDate}
                 onChange={(date) => setEndDate(date)}
+                calendarIcon={<CalendarIcon />}
               />
               </div>
             </div>
@@ -227,7 +229,7 @@ export default function AddEditReminder({ className }) {
                     value={reminder.notes}
                     placeholder="Provide a detailed description of your item."
                     rows="7"
-                    className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
+                    className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none resize-none"
                     onChange={onReminderInputChange}
                     maxLength={250}
                   />
@@ -275,4 +277,9 @@ export default function AddEditReminder({ className }) {
       </Layout>
     </>
   )
-}
\ No newline at end of file
+}
+
+const CalendarIcon = () => (<><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 dark:text-[#374151]">
+<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
+</svg>
+</>)
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 0d00ab7..e3dbeb4 100755
--- a/src/index.css
+++ b/src/index.css
@@ -23,6 +23,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 * {
   min-height: 0;
   min-width: 0;
@@ -657,7 +658,7 @@ TODO: Responsive ===========================
   .children-element {
     left: 0;
     top: 0;
-    webkit-transform: none;
+    -webkit-transform: none;
     transform: none;
   }
 }
@@ -685,11 +686,24 @@ TODO: Responsive ===========================
   border-radius: 7px !important;
 }
 
+.dark .react-calendar{
+  background: #11131F;
+  color: #7B818D;
+  border: 1px solid #25284F;  
+}
+.dark .react-calendar__navigation button:enabled:hover, 
+.dark .react-calendar__navigation button:enabled:focus,
+.dark .react-calendar__tile:disabled,
+.dark .react-calendar__navigation button:disabled{background: #1D1F2F;}
+
 .react-calendar__navigation{
   margin-top: 2px;
   margin-inline: 2px;
 }
 
+.react-calendar__tile--active{color: #fff; font-weight: bold; background-color: #006edc;}
+.dark .react-calendar__tile--active{color: #fff;}
+
 .react-calendar__navigation button:enabled:hover,
 .react-calendar__navigation button:enabled:focus{
   @apply rounded-full transition duration-500
@@ -713,13 +727,19 @@ TODO: Responsive ===========================
   transition: all 500ms;
 }
 
+.dark .react-calendar__tile{background: #11131F;}
+
 .reminder-select select{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat #fafafa;
   background-position: calc(100% - 0.75rem) center !important;
-  box-shadow: 0 0 0.5em 0 rgba(194, 194, 194, 0.2); 
+  border: 0.5px solid #E3E4FE; 
+}
+
+.dark .reminder-select select {
+  border: 0.5px solid #25284F; 
 }
 
 .reminder-select select::-ms-expand {
@@ -740,17 +760,21 @@ TODO: Responsive ===========================
 
 /* Date Picker */
 .react-date-picker__wrapper{
-  border: 0;
-  box-shadow: 0 0 0.5em 0 rgb(194 194 194 / 20%);
+  border: 0.5px solid #E3E4FE;
   padding: 1.25rem;
   background: #fafafa;
   border-radius: 9999px;
 }
 
+.dark .react-date-picker__wrapper {border: 0.5px solid #25284F;}
+
 .dark .react-date-picker__wrapper{
-  background: #1a3544;
+  background: #11131F;
+  color: #7B818D;
 }
 
+.dark .react-date-picker__button svg{stroke: #7B818D;}
+
 .react-date-picker__calendar .react-calendar{
   min-height: 18.4rem;
 }
@@ -759,6 +783,9 @@ TODO: Responsive ===========================
   height: 40px !important;
 }
 
-.react-date-picker__inputGroup__input{
+.react-date-picker__inputGroup__input,
+.react-date-picker__inputGroup__divider, 
+.react-date-picker__inputGroup__leadingZero{
   cursor: pointer;
+  color: #374151;
 }
\ No newline at end of file