diff --git a/src/components/Reminders/ReminderTable.jsx b/src/components/Reminders/ReminderTable.jsx
index 4259624..aa2aaaf 100755
--- a/src/components/Reminders/ReminderTable.jsx
+++ b/src/components/Reminders/ReminderTable.jsx
@@ -98,8 +98,9 @@ export default function ReminderTable({ className }) {
                     selectedCategory == "All category" ? (
                       userReminders[0].reminders.map((reminder, index) => (
                       <>
-                        <tr key={index} className="bg-white dark:bg-dark-white border border-red-500 dark:border-[#5356fb29]  hover:bg-gray-50">
-                            <td className=" py-4">
+                        {/* <tr key={index} className="bg-white dark:bg-dark-white border border-light-purple dark:border-[#5356fb29]  hover:bg-gray-50"> */}
+                        <tr key={index} className="even:bg-slate-100 odd:bg-gray-50 dark:bg-dark-white dark:odd:bg-black hover:bg-light-purple transition-all duration-500">
+                            <td className="py-4 px-2 rounded-l-full">
                               <div className="flex space-x-2 items-center">
                                 <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                                   <img
@@ -112,9 +113,9 @@ export default function ReminderTable({ className }) {
                                   <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                                   {reminder.description.substring(0, 30)+ ' ...'}
                                   </h1>
-                                  <span className="text-sm text-thin-light-gray">
+                                  <span className="text-sm text-thin-light-gray dark:text-white"> 
                                   
-                                    Added <span className="text-purple">
+                                    Added <span className="text-purple dark:text-white">
                                       {/* {new Date(reminder.added).toLocaleString().replace(/-/g, '/')} */}
                                       {reminder.added.split(' ')[0]}
                                       </span>
@@ -144,11 +145,11 @@ export default function ReminderTable({ className }) {
                               {reminder.reminder}
                               </span>
                             </td>
-                            <td className="text-right py-4 px-2">
+                            <td className="text-right py-4 px-2 rounded-r-full">
                             <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white btn-gradient px-2.5 py-1.5 rounded-full">Edit</Link>
                             </td>
                         </tr>
-                        <tr class="spacer"></tr>
+                        {/* <tr class="spacer"></tr> */}
                       </>
                       ))
                     )
@@ -157,8 +158,9 @@ export default function ReminderTable({ className }) {
                       if(reminder.category == selectedCategory){
                         return (
                           <>
-                          <tr key={index} className="bg-white dark:bg-dark-white border border-red-500 dark:border-[#5356fb29]  hover:bg-gray-50">
-                            <td className=" py-4">
+                          {/* <tr key={index} className="bg-white dark:bg-dark-white border border-light-purple dark:border-[#5356fb29]  hover:bg-gray-50"> */}
+                          <tr key={index} className="even:bg-slate-100 odd:bg-gray-50 dark:bg-dark-white dark:odd:bg-black hover:bg-light-purple transition-all duration-500">
+                            <td className="py-4 px-2 rounded-l-full">
                               <div className="flex space-x-2 items-center">
                                 <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                                 <img
@@ -171,9 +173,9 @@ export default function ReminderTable({ className }) {
                                   <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                                   {reminder.description.substring(0, 30)+ ' ...'}
                                   </h1>
-                                  <span className="text-sm text-thin-light-gray">
+                                  <span className="text-sm text-thin-light-gray dark:text-white">
                                   
-                                    Added <span className="text-purple">
+                                    Added <span className="text-purple dark:text-white">
                                     {new Date(reminder.added).toLocaleString().replace(/-/g, '/')}
                                       </span>
                                   </span>
@@ -200,7 +202,7 @@ export default function ReminderTable({ className }) {
                               {reminder.reminder}
                               </span>
                             </td>
-                            <td className="text-right py-4 px-2">
+                            <td className="text-right py-4 px-2 rounded-r-full">
                               {/* <button
                                 type="button"
                                 className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
@@ -210,7 +212,7 @@ export default function ReminderTable({ className }) {
                               <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white btn-gradient px-2.5 py-1.5 rounded-full">Edit</Link>
                             </td>
                           </tr>
-                          <tr class="spacer"></tr>
+                          {/* <tr class="spacer"></tr> */}
                           </>
                         )
                       }