diff --git a/app/components/DS/dialog.html.erb b/app/components/DS/dialog.html.erb
index ac4cd07f..ca8f86b7 100644
--- a/app/components/DS/dialog.html.erb
+++ b/app/components/DS/dialog.html.erb
@@ -1,7 +1,7 @@
 <%= wrapper_element do %>
   <%= tag.dialog class: "w-full h-full bg-transparent theme-dark:backdrop:bg-alpha-black-900 backdrop:bg-overlay #{drawer? ? "lg:p-3" : "lg:p-1"}", **merged_opts do %>
     <%= tag.div class: dialog_outer_classes do %>
-      <%= tag.div class: dialog_inner_classes, data: { dialog_target: "content" } do %>
+      <%= tag.div class: dialog_inner_classes, data: { DS__dialog_target: "content" } do %>
         <div class="grow overflow-y-auto py-4 space-y-4 flex flex-col">
           <% if header? %>
             <%= header %>
diff --git a/app/components/DS/dialog.rb b/app/components/DS/dialog.rb
index c2da56c6..3385003c 100644
--- a/app/components/DS/dialog.rb
+++ b/app/components/DS/dialog.rb
@@ -3,7 +3,7 @@ class DS::Dialog < DesignSystemComponent
     content_tag(:header, class: "px-4 flex flex-col gap-2", **opts) do
       title_div = content_tag(:div, class: "flex items-center justify-between gap-2") do
         title = content_tag(:h2, title, class: class_names("font-medium text-primary", drawer? ? "text-lg" : "")) if title
-        close_icon = render DS::Button.new(variant: "icon", class: "ml-auto", icon: "x", tabindex: "-1", data: { action: "dialog#close" }) unless hide_close_icon
+        close_icon = render DS::Button.new(variant: "icon", class: "ml-auto", icon: "x", tabindex: "-1", data: { action: "DS--dialog#close" }) unless hide_close_icon
         safe_join([ title, close_icon ].compact)
       end
 
@@ -19,7 +19,7 @@ class DS::Dialog < DesignSystemComponent
 
   renders_many :actions, ->(cancel_action: false, **button_opts) do
     merged_opts = if cancel_action
-      button_opts.merge(type: "button", data: { action: "modal#close" })
+      button_opts.merge(type: "button", data: { action: "DS--dialog#close" })
     else
       button_opts
     end
@@ -99,11 +99,11 @@ class DS::Dialog < DesignSystemComponent
     merged_opts = opts.dup
     data = merged_opts.delete(:data) || {}
 
-    data[:controller] = [ "dialog", "hotkey", data[:controller] ].compact.join(" ")
-    data[:dialog_auto_open_value] = auto_open
-    data[:dialog_reload_on_close_value] = reload_on_close
-    data[:action] = [ "mousedown->dialog#clickOutside", data[:action] ].compact.join(" ")
-    data[:hotkey] = "esc:dialog#close"
+    data[:controller] = [ "DS--dialog", "hotkey", data[:controller] ].compact.join(" ")
+    data[:DS__dialog_auto_open_value] = auto_open
+    data[:DS__dialog_reload_on_close_value] = reload_on_close
+    data[:action] = [ "mousedown->DS--dialog#clickOutside", data[:action] ].compact.join(" ")
+    data[:hotkey] = "esc:DS--dialog#close"
     merged_opts[:data] = data
 
     merged_opts
diff --git a/app/components/DS/menu.html.erb b/app/components/DS/menu.html.erb
index 47efe226..d4f0ea8d 100644
--- a/app/components/DS/menu.html.erb
+++ b/app/components/DS/menu.html.erb
@@ -1,17 +1,17 @@
-<%= tag.div data: { controller: "menu", menu_placement_value: placement, menu_offset_value: offset, testid: testid } do %>
+<%= tag.div data: { controller: "DS--menu", DS__menu_placement_value: placement, DS__menu_offset_value: offset, testid: testid } do %>
   <% if variant == :icon %>
-    <%= render DS::Button.new(variant: "icon", icon: icon_vertical ? "more-vertical" : "more-horizontal", data: { menu_target: "button" }) %>
+    <%= render DS::Button.new(variant: "icon", icon: icon_vertical ? "more-vertical" : "more-horizontal", data: { DS__menu_target: "button" }) %>
   <% elsif variant == :button %>
     <%= button %>
   <% elsif variant == :avatar %>
-    <button data-menu-target="button">
+    <button data-DS--menu-target="button">
       <div class="w-9 h-9 cursor-pointer">
         <%= render "settings/user_avatar", avatar_url: avatar_url, initials: initials %>
       </div>
     </button>
   <% end %>
 
-  <div data-menu-target="content" class="px-2 lg:px-0 max-w-full hidden z-50">
+  <div data-DS--menu-target="content" class="px-2 lg:px-0 max-w-full hidden z-50">
     <div class="mx-auto min-w-[200px] shadow-border-xs bg-container rounded-lg">
       <%= header %>
 
diff --git a/app/components/DS/tabs.html.erb b/app/components/DS/tabs.html.erb
index bfceddad..78ca02dd 100644
--- a/app/components/DS/tabs.html.erb
+++ b/app/components/DS/tabs.html.erb
@@ -1,10 +1,10 @@
 <%= tag.div data: {
-  controller: "tabs",
+  controller: "DS--tabs",
   testid: testid,
-  tabs_session_key_value: session_key,
-  tabs_url_param_key_value: url_param_key,
-  tabs_nav_btn_active_class: active_btn_classes,
-  tabs_nav_btn_inactive_class: inactive_btn_classes
+  DS__tabs_session_key_value: session_key,
+  DS__tabs_url_param_key_value: url_param_key,
+  DS__tabs_nav_btn_active_class: active_btn_classes,
+  DS__tabs_nav_btn_inactive_class: inactive_btn_classes
 } do %>
   <% if unstyled? %>
     <%= content %>
diff --git a/app/components/DS/tabs.rb b/app/components/DS/tabs.rb
index bcae1ea7..a2c0ff95 100644
--- a/app/components/DS/tabs.rb
+++ b/app/components/DS/tabs.rb
@@ -13,7 +13,7 @@ class DS::Tabs < DesignSystemComponent
     content_tag(
       :div,
       class: ("hidden" unless tab_id == active_tab),
-      data: { id: tab_id, tabs_target: "panel" },
+      data: { id: tab_id, DS__tabs_target: "panel" },
       &block
     )
   end
diff --git a/app/components/DS/tabs/nav.rb b/app/components/DS/tabs/nav.rb
index 5aa43c1b..8e795588 100644
--- a/app/components/DS/tabs/nav.rb
+++ b/app/components/DS/tabs/nav.rb
@@ -12,7 +12,7 @@ class DS::Tabs::Nav < DesignSystemComponent
       :button, label, id: id,
       type: "button",
       class: class_names(btn_classes, id == active_tab ? active_btn_classes : inactive_btn_classes, classes),
-      data: { id: id, action: "tabs#show", tabs_target: "navBtn" },
+      data: { id: id, action: "DS--tabs#show", DS__tabs_target: "navBtn" },
       &block
     )
   end