diff --git a/app/views/static_pages/index.html.erb b/app/views/static_pages/index.html.erb
index 7396081..5cfd2e3 100644
--- a/app/views/static_pages/index.html.erb
+++ b/app/views/static_pages/index.html.erb
@@ -24,30 +24,31 @@
   <% else %>
     <h1 class="font-bold mt-1 mb-1 text-5xl text-center">Track How Much You <span class="text-primary">Code</span></h1>
     <div class="flex flex-col w-full max-w-[50vw] mx-auto mb-22">
-      <%= link_to hca_auth_path, class: "inline-flex items-center justify-center px-6 py-3 rounded text-white font-bold cursor-pointer border-none w-full my-2 bg-primary" do %>
-        <span class="hidden md:flex">Sign in with Hack Club</span>
+      <%= link_to hca_auth_path, class: "inline-flex items-center justify-center px-6 py-3 rounded text-white font-bold cursor-pointer border-none w-full mt-4 bg-primary" do %>
+        <img src="/images/icon-rounded.png" class="h-6 w-6 mr-2">
+        <span>Sign in with your Hack Club account</span>
       <% end %>
 
-      <p class="text-center text-gray-400 text-sm">
-        <%= link_to slack_auth_path, class: "text-gray-400 hover:text-primary underline" do %>
-          Sign in with Slack instead
-        <% end %>
-      </p>
-
       <div class="flex items-center my-4">
-        <div class="flex-1 border-t border-gray-600"></div>
+        <div class="flex-1 border-t border-darkless"></div>
         <span class="px-4 text-gray-400 text-sm">or</span>
-        <div class="flex-1 border-t border-gray-600"></div>
+        <div class="flex-1 border-t border-darkless"></div>
       </div>
 
-      <%= form_tag email_auth_path, class: "relative", data: { turbo: false } do %>
-        <div class="relative">
-          <%= email_field_tag :email, nil, placeholder: "Enter your email to get a sign in link", required: true, class: "w-full px-3 py-3 pr-12 border border-gray-600 rounded text-base bg-gray-800 text-white" %>
-          <button type="submit" class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 p-1 bg-blue-600 hover:bg-blue-700 rounded cursor-pointer border-none flex items-center justify-center transition-colors">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M13.3 20.275q-.3-.3-.3-.7t.3-.7L16.175 16H7q-.825 0-1.412-.587T5 14V5q0-.425.288-.712T6 4t.713.288T7 5v9h9.175l-2.9-2.9q-.3-.3-.288-.7t.288-.7q.3-.3.7-.312t.7.287L19.3 14.3q.15.15.212.325t.063.375t-.063.375t-.212.325l-4.575 4.575q-.3.3-.712.3t-.713-.3" /></svg>
-          </button>
-        </div>
-      <% end %>
+      <div class="flex gap-2">
+        <%= form_tag email_auth_path, class: "relative flex-1", data: { turbo: false } do %>
+          <div class="relative">
+            <%= email_field_tag :email, nil, placeholder: "Enter your email to get a sign in link", required: true, class: "w-full px-3 py-3 pr-12 border border-darkless bg-dark hover:bg-gray-600 placeholder-gray-300 rounded focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" %>
+            <button type="submit" class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 p-1 bg-blue-600 hover:bg-blue-700 rounded cursor-pointer border-none flex items-center justify-center transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M13.3 20.275q-.3-.3-.3-.7t.3-.7L16.175 16H7q-.825 0-1.412-.587T5 14V5q0-.425.288-.712T6 4t.713.288T7 5v9h9.175l-2.9-2.9q-.3-.3-.288-.7t.288-.7q.3-.3.7-.312t.7.287L19.3 14.3q.15.15.212.325t.063.375t-.063.375t-.212.325l-4.575 4.575q-.3.3-.712.3t-.713-.3" /></svg>
+            </button>
+          </div>
+        <% end %>
+        <%= link_to slack_auth_path, class: "flex items-center justify-center px-4 py-3 rounded text-white cursor-pointer border border-darkless bg-dark hover:bg-gray-600 transition-colors w-1/4 gap-2" do %>
+            <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6"><path fill="currentColor" d="M6 15a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2h2zm1 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2a2 2 0 0 1-2-2zm2-8a2 2 0 0 1-2-2a2 2 0 0 1 2-2a2 2 0 0 1 2 2v2zm0 1a2 2 0 0 1 2 2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2a2 2 0 0 1 2-2zm8 2a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2h-2zm-1 0a2 2 0 0 1-2 2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2a2 2 0 0 1 2 2zm-2 8a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2v-2zm0-1a2 2 0 0 1-2-2a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2a2 2 0 0 1-2 2z"/></svg></span>
+            <span class="hidden xl:inline">Slack Sign In</span>
+        <% end %>
+      </div>
     </div>
     <% if params[:sign_in_email] %>
       <div class="text-green-500 mt-4 text-center max-w-[50vw] mx-auto">
@@ -75,7 +76,7 @@
           ['Emacs', 'emacs'], ['Jupyter', 'jupyter'], ['OnShape', 'onshape']
         ] %>
         <% popular_editors.each do |name, slug| %>
-          <a href="<%= doc_path("editors/#{slug}") %>" class="bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center block hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20">
+          <a href="<%= doc_path("editors/#{slug}") %>" class="bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center block hover:-translate-y-0.5 hover:shadow-lg hover:shadow-blue-500/20">
             <img src="/images/editor-icons/<%= slug %>-128.png" alt="<%= name %>" class="w-12 h-12 mx-auto mb-2">
             <div class="text-sm text-white"><%= name %></div>
           </a>
@@ -96,10 +97,10 @@
       <% end %>
       <div class="overflow-x-auto -mx-4 px-4 pb-4 no-scrollbar">
         <div class="grid grid-cols-4 gap-4 mt-4 text-center h-30 min-w-[800px] select-none cursor-pointer">
-          <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20"><span class="text-green font-bold text-4xl">100%</span><br>free</p>
-          <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20">works<br><span class="text-green font-bold text-4xl">offline</span></p>
-          <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20"><span class="text-green font-bold text-4xl">real time</span><br>stats</p>
-          <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20">rise to the<br><span class="text-green font-bold text-4xl">top #1</span></p>
+          <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:-translate-y-0.5 hover:shadow-lg hover:shadow-blue-500/20"><span class="text-green font-bold text-4xl">100%</span><br>free</p>
+          <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:-translate-y-0.5 hover:shadow-lg hover:shadow-blue-500/20">works<br><span class="text-green font-bold text-4xl">offline</span></p>
+          <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:-translate-y-0.5 hover:shadow-lg hover:shadow-blue-500/20"><span class="text-green font-bold text-4xl">real time</span><br>stats</p>
+          <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:-translate-y-0.5 hover:shadow-lg hover:shadow-blue-500/20">rise to the<br><span class="text-green font-bold text-4xl">top #1</span></p>
         </div>
       </div>
     </div>
@@ -128,8 +129,8 @@
           </div>
         </div>
       </div>
-      <div class="flex flex-col md:flex-row bg-gradient-to-r from-[#EFCCCC] to-[#D35648] mt-4 mb-4 rounded-lg">
-        <div class="w-full md:w-1/3 translate-y-[-20px]">
+      <div class="flex flex-col md:flex-row bg-linear-to-r from-[#EFCCCC] to-[#D35648] mt-4 mb-4 rounded-lg">
+        <div class="w-full md:w-1/3 -translate-y-5">
           <img src="/images/athena.png" class="w-[400px]">
         </div>
         <div class="w-full md:w-2/3 p-8 pl-4 pr-4">
@@ -149,7 +150,7 @@
         <%= link_to "Let's setup Hackatime! Click me :D", my_wakatime_setup_path, class: "inline-block w-auto text-3xl font-bold px-8 py-4 bg-primary text-white rounded shadow-md hover:shadow-lg hover:-translate-y-1 transition-all duration-300 animate-pulse" %>
         <div class="flex items-center mt-4 flex-nowrap">
           <% if @ssp_users_recent&.any? %>
-            <div class="flex m-0 ml-0 flex-shrink-0">
+            <div class="flex m-0 ml-0 shrink-0">
               <% @ssp_users_recent.each_with_index do |user, index| %>
                 <div class="relative cursor-pointer transition-transform duration-200 hover:-translate-y-1 hover:z-10 group <%= index > 0 ? '-ml-4' : '' %>">
                   <div class="absolute -top-9 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-2 py-1 rounded text-xs whitespace-nowrap opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-20">
@@ -162,7 +163,7 @@
               <% if @ssp_users_size && @ssp_users_size > 5 %>
                 <div class="relative cursor-pointer transition-transform duration-200 hover:-translate-y-1 hover:z-10 group -ml-4" title="See all <%= @ssp_users_size %> users">
                   <div class="w-10 h-10 rounded-full border-2 border-primary bg-primary text-white font-bold text-sm flex items-center justify-center shadow-sm">+<%= @ssp_users_size - 5 %></div>
-                  <div class="absolute left-[-20px] top-11 bg-gray-800 rounded-lg shadow-xl p-4 w-80 z-50 max-h-96 overflow-y-auto opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
+                  <div class="absolute -left-5 top-11 bg-gray-800 rounded-lg shadow-xl p-4 w-80 z-50 max-h-96 overflow-y-auto opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                     <h4 class="mt-0 mb-2 text-base text-gray-200 border-b border-gray-600 pb-2">All users who set up Hackatime</h4>
                     <div class="flex flex-col gap-2">
                       <% @ssp_users_recent.each do |user| %>
diff --git a/app/views/static_pages/minimal_login.html.erb b/app/views/static_pages/minimal_login.html.erb
index c2b81bc..ec1dd69 100644
--- a/app/views/static_pages/minimal_login.html.erb
+++ b/app/views/static_pages/minimal_login.html.erb
@@ -3,24 +3,24 @@
 <div class="fixed inset-0 flex items-center justify-center bg-darker">
   <div class="w-full max-w-md px-6 py-8">
     <header class="text-center mb-8">
-      <h1 class="font-bold text-3xl text-white">Log in to Hackatime</h1>
+      <h1 class="font-bold text-3xl text-white">Welcome to Hackatime</h1>
     </header>
 
-    <%= link_to slack_auth_path(continue: @continue_param), class: "inline-flex items-center justify-center w-full px-6 py-3 rounded text-white font-bold bg-primary hover:bg-red-600 transition-colors" do %>
-      <img src="/images/slack.png" class="h-5 w-5 mr-2 bg-white rounded p-0.5">
-      <span>Sign in with Hack Club Slack</span>
+    <%= link_to hca_auth_path(continue: @continue_param), class: "inline-flex items-center justify-center w-full px-6 py-3 rounded text-white font-bold bg-primary hover:bg-red-600 transition-colors" do %>
+      <img src="/images/icon-rounded.png" class="h-6 w-6 mr-2">
+      <span>Sign in with your Hack Club account</span>
     <% end %>
 
     <div class="flex items-center my-4">
-      <div class="flex-1 border-t border-gray-600"></div>
+      <div class="flex-1 border-t border-darkless"></div>
       <span class="px-4 text-gray-400 text-sm">or</span>
-      <div class="flex-1 border-t border-gray-600"></div>
+      <div class="flex-1 border-t border-darkless"></div>
     </div>
 
     <%= form_tag email_auth_path, class: "relative", data: { turbo: false } do %>
       <%= hidden_field_tag :continue, @continue_param if @continue_param %>
       <div class="relative">
-        <%= email_field_tag :email, params[:email], placeholder: "Enter your email", required: true, class: "w-full px-3 py-3 pr-12 border border-gray-600 rounded text-base bg-gray-800 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" %>
+        <%= email_field_tag :email, params[:email], placeholder: "Enter your email", required: true, class: "w-full px-3 py-3 pr-12 border border-darkless bg-dark hover:bg-gray-600 placeholder-gray-300 rounded focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" %>
         <button type="submit" class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 p-1 bg-blue-600 hover:bg-blue-700 rounded cursor-pointer border-none flex items-center justify-center transition-colors">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5"><path fill="currentColor" d="M13.3 20.275q-.3-.3-.3-.7t.3-.7L16.175 16H7q-.825 0-1.412-.587T5 14V5q0-.425.288-.712T6 4t.713.288T7 5v9h9.175l-2.9-2.9q-.3-.3-.288-.7t.288-.7q.3-.3.7-.312t.7.287L19.3 14.3q.15.15.212.325t.063.375t-.063.375t-.212.325l-4.575 4.575q-.3.3-.712.3t-.713-.3" /></svg>
         </button>
diff --git a/public/images/icon-rounded.png b/public/images/icon-rounded.png
new file mode 100644
index 0000000..a7bc5e2
Binary files /dev/null and b/public/images/icon-rounded.png differ