diff --git a/lib/decentralised_book_index_web/components/core_components.ex b/lib/decentralised_book_index_web/components/core_components.ex
index 67d03a6..4340aa1 100644
--- a/lib/decentralised_book_index_web/components/core_components.ex
+++ b/lib/decentralised_book_index_web/components/core_components.ex
@@ -536,11 +536,11 @@ defmodule DecentralisedBookIndexWeb.CoreComponents do
       end
 
     ~H"""
-    <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
-      <table class="w-[40rem] mt-11 sm:w-full">
-        <thead class="text-sm text-left leading-6 text-zinc-500">
+    <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0 ">
+      <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400  bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
           <tr>
-            <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal">{col[:label]}</th>
+            <th :for={col <- @col} class="p-4 font-normal">{col[:label]}</th>
             <th :if={@action != []} class="relative p-0 pb-4">
               <span class="sr-only">{gettext("Actions")}</span>
             </th>
@@ -549,9 +549,9 @@ defmodule DecentralisedBookIndexWeb.CoreComponents do
         <tbody
           id={@id}
           phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
-          class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"
+          class="relative divide-y divide-zinc-100 border-zinc-200 text-sm leading-6 text-zinc-700"
         >
-          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
+          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class=" bg-white shadow-md dark:bg-gray-800 border-b dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-700">
             <td
               :for={{col, i} <- Enum.with_index(@col)}
               phx-click={@row_click && @row_click.(row)}
@@ -559,17 +559,17 @@ defmodule DecentralisedBookIndexWeb.CoreComponents do
             >
               <div class="block py-4 pr-6">
                 <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
-                <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
+                <span class={["p-4 relative font-sm text-gray-500 dark:text-gray-400", i == 0 && "p-4 medium text-gray-900 whitespace-nowrap dark:text-white"]}>
                   {render_slot(col, @row_item.(row))}
                 </span>
               </div>
             </td>
             <td :if={@action != []} class="relative w-14 p-0">
-              <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
+              <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium px-2">
                 <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
                 <span
                   :for={action <- @action}
-                  class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
+                  class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700 dark:text-white dark:hover:text-white/90"
                 >
                   {render_slot(action, @row_item.(row))}
                 </span>