diff --git a/assets/css/app.css b/assets/css/app.css
index 71a77f0..2c921a9 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -2,3 +2,13 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+  @apply bg-gray-300;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-gray-500;
+  border-radius: 4px;
+}
diff --git a/guides/screenshots/error-dashboard.png b/guides/screenshots/error-dashboard.png
index 98040f3..0e3ab6c 100644
Binary files a/guides/screenshots/error-dashboard.png and b/guides/screenshots/error-dashboard.png differ
diff --git a/guides/screenshots/error-detail.png b/guides/screenshots/error-detail.png
index b54eba7..5f82f8b 100644
Binary files a/guides/screenshots/error-detail.png and b/guides/screenshots/error-detail.png differ
diff --git a/lib/error_tracker/web/components/core_components.ex b/lib/error_tracker/web/components/core_components.ex
index 4f7e004..99af7a6 100644
--- a/lib/error_tracker/web/components/core_components.ex
+++ b/lib/error_tracker/web/components/core_components.ex
@@ -20,8 +20,8 @@ defmodule ErrorTracker.Web.CoreComponents do
     ~H"""
     <.link
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-600 hover:bg-zinc-400 py-[11.5px] px-3",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "phx-submit-loading:opacity-75 py-[11.5px]",
+        "text-sm font-semibold text-sky-500 hover:text-white/80",
         @class
       ]}
       {@rest}
@@ -36,8 +36,8 @@ defmodule ErrorTracker.Web.CoreComponents do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-600 hover:bg-zinc-400 py-2 px-3",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "phx-submit-loading:opacity-75 rounded-lg bg-sky-500 hover:bg-sky-700 py-2 px-4",
+        "text-sm text-white active:text-white/80",
         @class
       ]}
       {@rest}
@@ -65,8 +65,8 @@ defmodule ErrorTracker.Web.CoreComponents do
       case assigns.color do
         :blue -> "bg-blue-900 text-blue-300"
         :gray -> "bg-gray-700 text-gray-300"
-        :red -> "bg-red-900 text-red-300"
-        :green -> "bg-green-900 text-green-300"
+        :red -> "bg-red-400/10 text-red-300 ring-red-400/20"
+        :green -> "bg-emerald-400/10 text-emerald-300 ring-emerald-400/20"
         :yellow -> "bg-yellow-900 text-yellow-300"
         :indigo -> "bg-indigo-900 text-indigo-300"
         :purple -> "bg-purple-900 text-purple-300"
@@ -76,7 +76,10 @@ defmodule ErrorTracker.Web.CoreComponents do
     assigns = Map.put(assigns, :color_class, color_class)
 
     ~H"""
-    <span class={["text-sm font-medium me-2 px-2.5 py-1.5 rounded", @color_class]} {@rest}>
+    <span
+      class={["text-sm font-medium me-2 py-1 px-2 rounded-lg ring-1 ring-inset", @color_class]}
+      {@rest}
+    >
       <%= render_slot(@inner_block) %>
     </span>
     """
@@ -92,14 +95,14 @@ defmodule ErrorTracker.Web.CoreComponents do
     <div class="mt-10 w-full flex">
       <button
         :if={@page > 1}
-        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 hover:text-white"
+        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400  bg-gray-900 border border-gray-400 rounded-lg hover:bg-gray-800 hover:text-white"
         phx-click={@event_previous}
       >
         Previous page
       </button>
       <button
         :if={@page < @total_pages}
-        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 hover:text-white"
+        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400 bg-gray-900 border border-gray-400 rounded-lg hover:bg-gray-800 hover:text-white"
         phx-click={@event_next}
       >
         Next page
@@ -117,7 +120,10 @@ defmodule ErrorTracker.Web.CoreComponents do
   def section(assigns) do
     ~H"""
     <div>
-      <h2 :if={assigns[:title]} class={["text-sm font-bold mb-2 uppercase", @title_class]}>
+      <h2
+        :if={assigns[:title]}
+        class={["text-sm font-semibold mb-2 uppercase text-gray-400", @title_class]}
+      >
         <%= @title %>
       </h2>
       <%= render_slot(@inner_block) %>
diff --git a/lib/error_tracker/web/components/layouts/navbar.ex b/lib/error_tracker/web/components/layouts/navbar.ex
index b5ee233..4fec30d 100644
--- a/lib/error_tracker/web/components/layouts/navbar.ex
+++ b/lib/error_tracker/web/components/layouts/navbar.ex
@@ -4,7 +4,7 @@ defmodule ErrorTracker.Web.Layouts.Navbar do
 
   def render(assigns) do
     ~H"""
-    <nav class="border-gray-200 bg-gray-800" phx-click-away={JS.hide(to: "#navbar-main")}>
+    <nav class="border-gray-400 bg-gray-900">
       <div class="container flex flex-wrap items-center justify-between mx-auto p-4">
         <.link
           href={dashboard_path(@socket)}
@@ -14,7 +14,7 @@ defmodule ErrorTracker.Web.Layouts.Navbar do
         </.link>
         <button
           type="button"
-          class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded -lg md:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-600 focus:ring-gray-500"
+          class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded -lg md:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-700 focus:ring-gray-500"
           aria-controls="navbar-main"
           aria-expanded="false"
           phx-click={JS.toggle(to: "#navbar-main")}
@@ -37,8 +37,24 @@ defmodule ErrorTracker.Web.Layouts.Navbar do
           </svg>
         </button>
         <div class="hidden w-full md:block md:w-auto" id="navbar-main">
-          <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-600 rounded-lg bg-gray-700 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-gray-800">
-            <.navbar_item to="https://github.com" target="_blank">GitHub</.navbar_item>
+          <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-400 bg-gray-900 rounded-lg md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-gray-800">
+            <.navbar_item to="https://github.com" target="_blank">
+              <svg
+                width="18"
+                height="18"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+                version="1.1"
+                class="inline-block mr-1 align-text-top"
+              >
+                <path
+                  fill="currentColor"
+                  d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"
+                >
+                </path>
+              </svg>
+              GitHub
+            </.navbar_item>
           </ul>
         </div>
       </div>
@@ -56,7 +72,7 @@ defmodule ErrorTracker.Web.Layouts.Navbar do
     <li>
       <a
         href={@to}
-        class="block py-2 px-3 text-gray-900 rounded text-white hover:text-white hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-blue-500 md:p-0"
+        class="whitespace-nowrap flex-0 block py-2 px-3 rounded-lg text-white hover:text-white hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-sky-500"
         {@rest}
       >
         <%= render_slot(@inner_block) %>
diff --git a/lib/error_tracker/web/components/layouts/root.html.heex b/lib/error_tracker/web/components/layouts/root.html.heex
index 439fc12..f2c2139 100644
--- a/lib/error_tracker/web/components/layouts/root.html.heex
+++ b/lib/error_tracker/web/components/layouts/root.html.heex
@@ -18,7 +18,7 @@
     </script>
   </head>
 
-  <body class="bg-gray-700 text-white">
+  <body class="bg-gray-800 text-white">
     <%= @inner_content %>
   </body>
 </html>
diff --git a/lib/error_tracker/web/live/dashboard.html.heex b/lib/error_tracker/web/live/dashboard.html.heex
index 45cd65d..6d6cbb3 100644
--- a/lib/error_tracker/web/live/dashboard.html.heex
+++ b/lib/error_tracker/web/live/dashboard.html.heex
@@ -9,6 +9,7 @@
     value={@search_form[:reason].value}
     type="text"
     placeholder="Error"
+    class="border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
     phx-debounce
   />
   <input
@@ -16,6 +17,7 @@
     value={@search_form[:source_line].value}
     type="text"
     placeholder="Source line"
+    class="border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
     phx-debounce
   />
   <input
@@ -23,9 +25,13 @@
     value={@search_form[:source_function].value}
     type="text"
     placeholder="Source function"
+    class="border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
     phx-debounce
   />
-  <select name={@search_form[:status].name}>
+  <select
+    name={@search_form[:status].name}
+    class="border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+  >
     <option value="" selected={@search_form[:status].value == ""}>All</option>
     <option value="unresolved" selected={@search_form[:status].value == "unresolved"}>
       Unresolved
@@ -36,9 +42,9 @@
   </select>
 </.form>
 
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-  <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 table-fixed">
-    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-600 dark:text-gray-400">
+<div class="relative overflow-x-auto shadow-md sm:rounded-lg ring-1 ring-gray-900">
+  <table class="w-full text-sm text-left rtl:text-right text-gray-400 table-fixed">
+    <thead class="text-xs uppercase bg-gray-900">
       <tr>
         <th scope="col" class="px-4 pr-2 py-3 w-128">Error</th>
         <th scope="col" class="px-4 py-3 w-72">Occurrences</th>
@@ -52,20 +58,23 @@
           No errors to show 🎉
         </td>
       </tr>
-      <tr :for={error <- @errors} class="border-b bg-gray-800 border-gray-700">
-        <th
-          scope="row"
-          class="px-4 py-4 font-medium text-white whitespace-nowrap text-ellipsis overflow-hidden"
-        >
-          <.link navigate={error_path(@socket, error)}>
-            (<%= sanitize_module(error.kind) %>) <%= error.reason %>
+      <tr
+        :for={error <- @errors}
+        class="border-b bg-gray-400/10 border-y border-gray-900 hover:bg-gray-800/60 last-of-type:border-b-0"
+      >
+        <td scope="row" class="px-4 py-4 font-medium text-white relative">
+          <.link navigate={error_path(@socket, error)} class="absolute inset-1">
+            <span class="sr-only">(<%= sanitize_module(error.kind) %>) <%= error.reason %></span>
           </.link>
+          <p class="whitespace-nowrap text-ellipsis w-full overflow-hidden">
+            (<%= sanitize_module(error.kind) %>) <%= error.reason %>
+          </p>
           <p class="font-normal text-gray-400">
             <%= sanitize_module(error.source_function) %>
             <br />
             <%= error.source_line %>
           </p>
-        </th>
+        </td>
         <td class="px-4 py-4">
           <p>Last: <%= format_datetime(error.last_occurrence_at) %></p>
           <p>Total: <%= @occurrences[error.id] %></p>
diff --git a/lib/error_tracker/web/live/show.html.heex b/lib/error_tracker/web/live/show.html.heex
index ebf974b..795b7fb 100644
--- a/lib/error_tracker/web/live/show.html.heex
+++ b/lib/error_tracker/web/live/show.html.heex
@@ -1,12 +1,12 @@
 <div class="my-6">
-  <.button type="link" href={dashboard_path(@socket)}>Back to the dashboard</.button>
+  <.button type="link" href={dashboard_path(@socket)}>« Back to the dashboard</.button>
 </div>
 
 <div id="header">
-  <p class="text-sm uppercase font-semibold text-gray-300">
+  <p class="text-sm uppercase font-semibold text-gray-400">
     Error #<%= @error.id %> @ <%= format_datetime(@occurrence.inserted_at) %>
   </p>
-  <h1 class="my-1 text-2xl font-bold whitespace-nowrap text-ellipsis overflow-hidden">
+  <h1 class="my-1 text-2xl w-full font-semibold whitespace-nowrap text-ellipsis overflow-hidden">
     (<%= sanitize_module(@error.kind) %>) <%= @error.reason
     |> String.replace("\n", " ")
     |> String.trim() %>
@@ -14,25 +14,25 @@
 </div>
 
 <div class="grid grid-cols-1 md:grid-cols-4 md:space-x-3 mt-6 gap-2">
-  <div class="px-3 md:col-span-3 md:border-r-2 md:border-gray-500 space-y-8">
+  <div class="md:col-span-3 md:border-r md:border-gray-600 space-y-8 pr-5">
     <.section title="Full message">
-      <pre class="overflow-auto p-4 bg-gray-600"><%= @occurrence.reason %></pre>
+      <pre class="overflow-auto p-4 rounded-lg bg-gray-300/10 border border-gray-900"><%= @occurrence.reason %></pre>
     </.section>
 
     <.section title="Source">
-      <pre class="overflow-auto text-sm p-4 bg-gray-600">
+      <pre class="overflow-auto text-sm p-4 rounded-lg bg-gray-300/10 border border-gray-900">
         <%= sanitize_module(@error.source_function) %>
         <%= @error.source_line %></pre>
     </.section>
 
     <.section title="Stacktrace">
-      <div class="p-4 bg-gray-600">
+      <div class="p-4 bg-gray-300/10 border border-gray-900 rounded-lg">
         <div class="w-full mb-4">
           <label class="flex justify-end">
             <input
               type="checkbox"
               id="show-app-frames"
-              class="ml-2 mr-2 mb-1 mt-1 inline-block"
+              class="ml-2 mr-2 mb-1 mt-1 inline-block text-sky-600 rounded focus:ring-sky-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600"
               phx-click={JS.toggle(to: "#stacktrace tr:not([data-app=#{@app}])")}
             />
             <span class="text-md inline-block">
@@ -58,14 +58,17 @@
     </.section>
 
     <.section title="Context">
-      <pre class="overflow-auto text-sm p-4 bg-gray-600"><%= Jason.encode!(@occurrence.context, pretty: true) %></pre>
+      <pre class="overflow-auto text-sm p-4 rounded-lg bg-gray-300/10 border border-gray-900"><%= Jason.encode!(@occurrence.context, pretty: true) %></pre>
     </.section>
   </div>
 
   <div class="px-3 md:pl-0 space-y-8">
     <.section title={"Occurrence (#{@total_occurrences} total)"}>
       <form phx-change="occurrence_navigation">
-        <select name="occurrence_id" class="text-black w-full">
+        <select
+          name="occurrence_id"
+          class="w-full border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+        >
           <option
             :for={occurrence <- @occurrences}
             value={occurrence.id}
diff --git a/mix.exs b/mix.exs
index 86a0906..7212c26 100644
--- a/mix.exs
+++ b/mix.exs
@@ -45,7 +45,11 @@ defmodule ErrorTracker.MixProject do
       links: %{
         "GitHub" => "https://github.com/elixir-error-tracker/error-tracker"
       },
-      maintainers: ["Óscar de Arriba González", "Cristian Álvarez Belaustegui"],
+      maintainers: [
+        "Óscar de Arriba González",
+        "Cristian Álvarez Belaustegui",
+        "Víctor Ortiz Heredia"
+      ],
       files: ~w(lib priv/static LICENSE mix.exs README.md .formatter.exs)
     ]
   end
@@ -100,7 +104,7 @@ defmodule ErrorTracker.MixProject do
       dev: "run --no-halt dev.exs",
       "assets.install": ["bun.install", "cmd _build/bun install --cwd assets/"],
       "assets.watch": ["tailwind default --watch"],
-      "assets.build": ["bun default --minify", "tailwind default --minify"]
+      "assets.build": ["bun default", "tailwind default"]
     ]
   end
 end
diff --git a/priv/static/app.css b/priv/static/app.css
index 22235f8..5aeab4b 100644
--- a/priv/static/app.css
+++ b/priv/static/app.css
@@ -766,10 +766,18 @@ select {
   border-width: 0;
 }
 
+.absolute {
+  position: absolute;
+}
+
 .relative {
   position: relative;
 }
 
+.inset-1 {
+  inset: 0.25rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -809,6 +817,10 @@ select {
   margin-left: 0.5rem;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -971,13 +983,18 @@ select {
   border-width: 1px;
 }
 
+.border-y {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
 
-.border-gray-200 {
+.border-gray-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
 
 .border-gray-600 {
@@ -985,9 +1002,9 @@ select {
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
 
-.border-gray-700 {
+.border-gray-900 {
   --tw-border-opacity: 1;
-  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+  border-color: rgb(17 24 39 / var(--tw-border-opacity));
 }
 
 .bg-blue-900 {
@@ -995,14 +1012,16 @@ select {
   background-color: rgb(30 58 138 / var(--tw-bg-opacity));
 }
 
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+.bg-emerald-400\/10 {
+  background-color: rgb(52 211 153 / 0.1);
 }
 
-.bg-gray-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+.bg-gray-300\/10 {
+  background-color: rgb(209 213 219 / 0.1);
+}
+
+.bg-gray-400\/10 {
+  background-color: rgb(156 163 175 / 0.1);
 }
 
 .bg-gray-700 {
@@ -1015,9 +1034,9 @@ select {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.bg-green-900 {
+.bg-gray-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(20 83 45 / var(--tw-bg-opacity));
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
 .bg-indigo-900 {
@@ -1035,25 +1054,28 @@ select {
   background-color: rgb(88 28 135 / var(--tw-bg-opacity));
 }
 
-.bg-red-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
+.bg-red-400\/10 {
+  background-color: rgb(248 113 113 / 0.1);
 }
 
-.bg-yellow-900 {
+.bg-sky-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(113 63 18 / var(--tw-bg-opacity));
+  background-color: rgb(14 165 233 / var(--tw-bg-opacity));
 }
 
-.bg-zinc-600 {
+.bg-yellow-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(82 82 91 / var(--tw-bg-opacity));
+  background-color: rgb(113 63 18 / var(--tw-bg-opacity));
 }
 
 .p-2 {
   padding: 0.5rem;
 }
 
+.p-2\.5 {
+  padding: 0.625rem;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1063,11 +1085,6 @@ select {
   padding-right: 0.5rem;
 }
 
-.px-2\.5 {
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-}
-
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1083,11 +1100,6 @@ select {
   padding-bottom: 0.25rem;
 }
 
-.py-1\.5 {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1117,6 +1129,10 @@ select {
   padding-right: 0.5rem;
 }
 
+.pr-5 {
+  padding-right: 1.25rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1129,6 +1145,10 @@ select {
   vertical-align: top;
 }
 
+.align-text-top {
+  vertical-align: text-top;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1149,10 +1169,6 @@ select {
   line-height: 1rem;
 }
 
-.font-bold {
-  font-weight: 700;
-}
-
 .font-extralight {
   font-weight: 200;
 }
@@ -1173,10 +1189,6 @@ select {
   text-transform: uppercase;
 }
 
-.leading-6 {
-  line-height: 1.5rem;
-}
-
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1187,6 +1199,11 @@ select {
   color: rgb(147 197 253 / var(--tw-text-opacity));
 }
 
+.text-emerald-300 {
+  --tw-text-opacity: 1;
+  color: rgb(110 231 183 / var(--tw-text-opacity));
+}
+
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -1197,26 +1214,6 @@ select {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-.text-gray-700 {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
-.text-green-300 {
-  --tw-text-opacity: 1;
-  color: rgb(134 239 172 / var(--tw-text-opacity));
-}
-
 .text-indigo-300 {
   --tw-text-opacity: 1;
   color: rgb(165 180 252 / var(--tw-text-opacity));
@@ -1237,6 +1234,16 @@ select {
   color: rgb(252 165 165 / var(--tw-text-opacity));
 }
 
+.text-sky-500 {
+  --tw-text-opacity: 1;
+  color: rgb(14 165 233 / var(--tw-text-opacity));
+}
+
+.text-sky-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1247,19 +1254,68 @@ select {
   color: rgb(253 224 71 / var(--tw-text-opacity));
 }
 
+.placeholder-gray-400::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-gray-400::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
+
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-inset {
+  --tw-ring-inset: inset;
+}
+
+.ring-emerald-400\/20 {
+  --tw-ring-color: rgb(52 211 153 / 0.2);
+}
+
+.ring-gray-900 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
+}
+
+.ring-red-400\/20 {
+  --tw-ring-color: rgb(248 113 113 / 0.2);
+}
+
+.ring-offset-gray-800 {
+  --tw-ring-offset-color: #1f2937;
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.hover\:bg-gray-600:hover {
+::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
+::-webkit-scrollbar-thumb {
   --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+  border-radius: 4px;
+}
+
+.last-of-type\:border-b-0:last-of-type {
+  border-bottom-width: 0px;
 }
 
 .hover\:bg-gray-700:hover {
@@ -1267,9 +1323,18 @@ select {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-zinc-400:hover {
+.hover\:bg-gray-800:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(161 161 170 / var(--tw-bg-opacity));
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-800\/60:hover {
+  background-color: rgb(31 41 55 / 0.6);
+}
+
+.hover\:bg-sky-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 105 161 / var(--tw-bg-opacity));
 }
 
 .hover\:text-white:hover {
@@ -1277,6 +1342,15 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:text-white\/80:hover {
+  color: rgb(255 255 255 / 0.8);
+}
+
+.focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1288,11 +1362,21 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-gray-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-sky-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(2 132 199 / var(--tw-ring-opacity));
+}
+
 .active\:text-white\/80:active {
   color: rgb(255 255 255 / 0.8);
 }
@@ -1356,13 +1440,13 @@ select {
     border-width: 0px;
   }
 
-  .md\:border-r-2 {
-    border-right-width: 2px;
+  .md\:border-r {
+    border-right-width: 1px;
   }
 
-  .md\:border-gray-500 {
+  .md\:border-gray-600 {
     --tw-border-opacity: 1;
-    border-color: rgb(107 114 128 / var(--tw-border-opacity));
+    border-color: rgb(75 85 99 / var(--tw-border-opacity));
   }
 
   .md\:bg-gray-800 {
@@ -1382,9 +1466,9 @@ select {
     background-color: transparent;
   }
 
-  .md\:hover\:text-blue-500:hover {
+  .md\:hover\:text-sky-500:hover {
     --tw-text-opacity: 1;
-    color: rgb(59 130 246 / var(--tw-text-opacity));
+    color: rgb(14 165 233 / var(--tw-text-opacity));
   }
 }
 
@@ -1395,16 +1479,3 @@ select {
 .rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
   text-align: right;
 }
-
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-gray-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-  }
-
-  .dark\:text-gray-400 {
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175 / var(--tw-text-opacity));
-  }
-}
-