diff --git a/app/assets/stylesheets/avo.base.css b/app/assets/stylesheets/avo.base.css
index 67fa61f8d..5e852c75c 100644
--- a/app/assets/stylesheets/avo.base.css
+++ b/app/assets/stylesheets/avo.base.css
@@ -92,3 +92,11 @@ trix-editor {
 dialog#turbo-confirm {
   @apply bg-transparent;
 }
+
+/* TODO: make content like tailwindcss */
+.floating-row-controls {
+  &:before {
+    content: "";
+    @apply absolute z-10 inset-auto left-0 top-0 mt-0 -translate-x-full w-3 h-full bg-gradient-to-l from-white to-transparent group-hover:from-gray-50;
+  }
+}
diff --git a/app/components/avo/index/table_row_component.html.erb b/app/components/avo/index/table_row_component.html.erb
index 48b77e14e..f21daabba 100644
--- a/app/components/avo/index/table_row_component.html.erb
+++ b/app/components/avo/index/table_row_component.html.erb
@@ -1,6 +1,6 @@
 <%# hover:z-[21] removed from tr class to solve flickering actions component on row controls and z-20 changed to z-21%>
 <%= content_tag :tr,
-  class: class_names("bg-white hover:bg-gray-50 hover:shadow-row z-21 border-b", {"cursor-pointer": click_row_to_view_record}),
+  class: class_names("group bg-white hover:bg-gray-50 z-21 border-b", {"cursor-pointer": click_row_to_view_record}),
   data: {
     component_name: self.class.to_s.underscore,
     resource_name: @resource.class.to_s,
@@ -42,8 +42,8 @@
     <% end %>
   <% end %>
   <% if Avo.configuration.resource_controls_on_the_right? %>
-    <td class="text-right whitespace-nowrap px-3" data-control="resource-controls">
-      <div class="flex items-center justify-end flex-grow-0 h-full">
+    <td class="sticky group-hover:bg-gray-50 bg-white inset-auto right-0 text-right whitespace-nowrap px-3 floating-row-controls floating-controls:pl-1" data-control="resource-controls">
+      <div class=" flex items-center justify-end flex-grow-0 h-full">
         <%= render resource_controls_component %>
       </div>
     </td>
diff --git a/app/views/layouts/avo/application.html.erb b/app/views/layouts/avo/application.html.erb
index 5bc8a06c9..2376d153a 100644
--- a/app/views/layouts/avo/application.html.erb
+++ b/app/views/layouts/avo/application.html.erb
@@ -26,7 +26,7 @@
     <%= render partial: "avo/partials/head" %>
     <%= content_for :head %>
   </head>
-  <body class="bg-application os-mac">
+  <body class="bg-application os-mac floating-controls">
     <div class="relative flex flex-1 w-full min-h-full" data-controller="sidebar" data-sidebar-open-value="<%= @sidebar_open %>">
       <div class="flex-1 flex flex-col max-w-full">
         <%= render partial: "avo/partials/navbar" %>
diff --git a/lib/avo/configuration.rb b/lib/avo/configuration.rb
index c578c896c..8a2e21388 100644
--- a/lib/avo/configuration.rb
+++ b/lib/avo/configuration.rb
@@ -2,6 +2,8 @@ module Avo
   class Configuration
     include ResourceConfiguration
 
+    #TODO: add a configuration switch that adds the necesarry classes
+
     attr_writer :app_name
     attr_writer :branding
     attr_writer :root_path
diff --git a/tailwind.preset.js b/tailwind.preset.js
index 217aa275d..e6386b2b7 100644
--- a/tailwind.preset.js
+++ b/tailwind.preset.js
@@ -162,6 +162,7 @@ module.exports = {
       addVariant('index-grid-view', '.index-grid-view & ')
       addVariant('index-table-view', '.index-table-view & ')
       addVariant('kanban-dragging', '.kanban-dragging & ')
+      addVariant('floating-controls', '.floating-controls & ')
     }),
   ],
 }
