From 7364d75bd6d32719cf0f7e80cbd49265c9fbc9eb Mon Sep 17 00:00:00 2001
From: Michael Malyuk <michael.malyuk@icloud.com>
Date: Sat, 14 Jun 2025 16:42:13 -0700
Subject: [PATCH 01/12] implementation of custom hotkeys, most of the code is
 around customization

Signed-off-by: Michael Malyuk <michael.malyuk@icloud.com>
---
 label_studio/templates/base.html              |  66 ++-
 label_studio/users/api.py                     |  22 +-
 label_studio/users/functions.py               |   1 +
 .../migrations/0011_user_custom_hotkeys.py    |  18 +
 label_studio/users/models.py                  |   3 +-
 label_studio/users/serializers.py             |  66 ++-
 label_studio/users/urls.py                    |   3 +
 label_studio/users/views.py                   |   2 +-
 .../src/components/Menubar/Menubar.jsx        |  13 +-
 .../src/components/Menubar/Menubar.scss       |  17 +
 .../pages/AccountSettings/AccountSettings.tsx | 100 ++--
 .../AccountSettings/sections/Hotkeys.jsx      | 525 ++++++++++++++++++
 .../AccountSettings/sections/Hotkeys.scss     | 263 +++++++++
 .../AccountSettings/sections/Hotkeys/Help.jsx | 251 +++++++++
 .../sections/Hotkeys/Import.jsx               |  92 +++
 .../AccountSettings/sections/Hotkeys/Item.jsx | 143 +++++
 .../AccountSettings/sections/Hotkeys/Key.jsx  |   8 +
 .../sections/Hotkeys/Section.jsx              | 112 ++++
 .../sections/Hotkeys/defaults.js              | 133 +++++
 .../AccountSettings/sections/PersonalInfo.tsx |   1 +
 .../pages/AccountSettings/sections/index.tsx  |   7 +
 .../SidePanels/Components/LockButton.tsx      |   4 +-
 .../SidePanels/DetailsPanel/RegionItem.tsx    |   2 +-
 .../editor/src/components/Toolbar/Tool.jsx    |  25 +-
 .../editor/src/components/Toolbar/Toolbar.jsx |   2 +-
 web/libs/editor/src/core/Hotkey.ts            |  42 +-
 web/libs/editor/src/core/settings/keymap.json |  97 +++-
 .../src/stores/Annotation/Annotation.js       |   6 +
 web/libs/editor/src/stores/AppStore.js        |  13 +
 web/libs/editor/src/tools/Brush.jsx           |   6 +-
 web/libs/editor/src/tools/Ellipse.js          |   2 +-
 web/libs/editor/src/tools/Erase.jsx           |   6 +-
 web/libs/editor/src/tools/KeyPoint.js         |   2 +-
 web/libs/editor/src/tools/MagicWand.jsx       |   4 +-
 web/libs/editor/src/tools/Polygon.js          |   2 +-
 web/libs/editor/src/tools/Rect.js             |   6 +-
 web/libs/editor/src/tools/Rotate.jsx          |   4 +-
 web/libs/editor/src/tools/Selection.js        |   2 +-
 web/libs/editor/src/tools/Zoom.jsx            |  10 +-
 web/libs/ui/src/assets/icons/hotkeys.svg      |   3 +
 web/libs/ui/src/assets/icons/index.ts         |   1 +
 41 files changed, 1998 insertions(+), 87 deletions(-)
 create mode 100644 label_studio/users/migrations/0011_user_custom_hotkeys.py
 create mode 100644 web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.jsx
 create mode 100644 web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.scss
 create mode 100644 web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx
 create mode 100644 web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Import.jsx
 create mode 100644 web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Item.jsx
 create mode 100644 web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Key.jsx
 create mode 100644 web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Section.jsx
 create mode 100644 web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/defaults.js
 create mode 100644 web/libs/ui/src/assets/icons/hotkeys.svg

diff --git a/label_studio/templates/base.html b/label_studio/templates/base.html
index 4f9cc5769ad0..d2bf1f800ad3 100644
--- a/label_studio/templates/base.html
+++ b/label_studio/templates/base.html
@@ -98,26 +98,88 @@
 </template>
 
 <script id="app-settings" nonce="{{request.csp_nonce}}">
+
+  var __customHotkeys = {{ user.custom_hotkeys|json_dumps_ensure_ascii|safe }};
+
+  // Filter custom hotkeys for editor-specific ones
+  var editorCustomHotkeys = {};
+  const prefixRegex = /^(annotation|timeseries|audio|regions|video|image_gallery|tools):(.*)/;
+
+  for (var key in __customHotkeys) {
+      const match = key.match(prefixRegex);
+      if (match) {
+          const [, prefix, shortKey] = match;
+          
+          // Get the current value
+          const value = __customHotkeys[key];
+          
+          // Check if value has active property set to false
+          if (value && value.active === false) {
+              // Create a copy of the value with key set to null
+              const modifiedValue = {...value, key: null};
+              editorCustomHotkeys[shortKey] = modifiedValue;
+          } else {
+              // Use the original value
+              editorCustomHotkeys[shortKey] = value;
+          }
+      }
+  }
+
+  function lookupHotkey (lookup) {
+      // Check if custom hotkeys exist and the lookup is in there
+      if (window.APP_SETTINGS?.user.customHotkeys && lookup in window.APP_SETTINGS.user.customHotkeys) {
+          const hotkeyValue = window.APP_SETTINGS.user.customHotkeys[lookup];
+          
+          // If active is explicitly false, return a copy with key set to null
+          if (hotkeyValue && hotkeyValue.active === false) {
+              return {...hotkeyValue, key: null};
+          }
+          
+          // Otherwise return the original value
+          return hotkeyValue;
+      } 
+      // Fallback to default hotkeys if available
+      else if (window.DEFAULT_HOTKEYS && lookup in window.DEFAULT_HOTKEYS) {
+          return window.DEFAULT_HOTKEYS[lookup];
+      } 
+      // No hotkey found
+      else {
+          return null;
+      }
+  }
+
+  // Parse the default editor keymap
+  var defaultEditorKeymap = JSON.parse({{ settings.EDITOR_KEYMAP|safe }});
+  
+  // Merge the default keymap with custom editor hotkeys
+  var mergedEditorKeymap = Object.assign({}, defaultEditorKeymap, editorCustomHotkeys);
+  
   window.APP_SETTINGS = Object.assign({
+    
     user: {
       id: {{ user.pk }},
       username: "{{user.username}}",
       firstName: "{{user.first_name}}",
       lastName: "{{user.last_name}}",
       initials: "{{user.get_initials}}",
-      email: "{{user.email}}",
+	email: "{{user.email}}",
+	customHotkeys: __customHotkeys,
+	
       allow_newsletters: {% if user.allow_newsletters is None %}null{% else %}{{user.allow_newsletters|yesno:"true,false"}}{% endif %},
       {% if user.avatar %}
       avatar: "{{user.avatar_url|safe}}",
       {% endif %}
     },
+
+      lookupHotkey: lookupHotkey,
+      
     debug: {{settings.DEBUG|yesno:"true,false"}},
     hostname: "{{settings.HOSTNAME}}",
     version: {{ versions|json_dumps_ensure_ascii|safe }},
     sentry_dsn: {% if settings.FRONTEND_SENTRY_DSN %}"{{ settings.FRONTEND_SENTRY_DSN }}"{% else %}null{% endif %},
     sentry_rate: "{{ settings.FRONTEND_SENTRY_RATE }}",
     sentry_environment: "{{ settings.FRONTEND_SENTRY_ENVIRONMENT }}",
-    editor_keymap: JSON.parse({{ settings.EDITOR_KEYMAP|safe }}),
+    editor_keymap: mergedEditorKeymap,
     feature_flags: {{ feature_flags|json_dumps_ensure_ascii|safe }},
     feature_flags_default_value: {{ settings.FEATURE_FLAGS_DEFAULT_VALUE|json_dumps_ensure_ascii|safe }},
     server_id: {{ request.server_id|json_dumps_ensure_ascii|safe }},
diff --git a/label_studio/users/api.py b/label_studio/users/api.py
index 7520ebadf0b0..95982ace79bd 100644
--- a/label_studio/users/api.py
+++ b/label_studio/users/api.py
@@ -14,9 +14,11 @@
 from rest_framework.permissions import IsAuthenticated
 from rest_framework.response import Response
 from rest_framework.views import APIView
+from rest_framework import status
 from users.functions import check_avatar
 from users.models import User
-from users.serializers import UserSerializer, UserSerializerUpdate
+from users.serializers import UserSerializer, UserSerializerUpdate, HotkeysSerializer
+
 
 logger = logging.getLogger(__name__)
 
@@ -294,3 +296,21 @@ def get_object(self):
 
     def get(self, request, *args, **kwargs):
         return super(UserWhoAmIAPI, self).get(request, *args, **kwargs)
+
+
+class UserHotkeysAPI(APIView):
+    permission_classes = [IsAuthenticated]
+
+    def post(self, request):
+        """Update the current user's hotkeys"""
+        serializer = HotkeysSerializer(data=request.data)
+        
+        if serializer.is_valid():
+            # Update the user's profile
+            user = request.user
+            user.custom_hotkeys = serializer.validated_data['custom_hotkeys']
+            user.save()
+            
+            return Response({'custom_hotkeys': user.custom_hotkeys})
+        else:
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
diff --git a/label_studio/users/functions.py b/label_studio/users/functions.py
index 0a36f3dc0079..371d4b39c8ad 100644
--- a/label_studio/users/functions.py
+++ b/label_studio/users/functions.py
@@ -96,3 +96,4 @@ def proceed_registration(request, user_form, organization_form, next_page):
 def login(request, *args, **kwargs):
     request.session['last_login'] = time()
     return auth.login(request, *args, **kwargs)
+
diff --git a/label_studio/users/migrations/0011_user_custom_hotkeys.py b/label_studio/users/migrations/0011_user_custom_hotkeys.py
new file mode 100644
index 000000000000..17f0821f2127
--- /dev/null
+++ b/label_studio/users/migrations/0011_user_custom_hotkeys.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.1.9 on 2025-06-03 23:29
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("users", "0010_userproducttour"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="user",
+            name="custom_hotkeys",
+            field=models.JSONField(blank=True, default=dict, null=True),
+        ),
+    ]
diff --git a/label_studio/users/models.py b/label_studio/users/models.py
index 97fa37b41b88..119cb743e640 100644
--- a/label_studio/users/models.py
+++ b/label_studio/users/models.py
@@ -90,7 +90,8 @@ class User(UserMixin, AbstractBaseUser, PermissionsMixin, UserLastActivityMixin)
     last_name = models.CharField(_('last name'), max_length=256, blank=True)
     phone = models.CharField(_('phone'), max_length=256, blank=True)
     avatar = models.ImageField(upload_to=hash_upload, blank=True)
-
+    custom_hotkeys = models.JSONField(default=dict, blank=True, null=True)
+    
     is_staff = models.BooleanField(
         _('staff status'), default=False, help_text=_('Designates whether the user can log into this admin site.')
     )
diff --git a/label_studio/users/serializers.py b/label_studio/users/serializers.py
index 5062a123fc2c..223550426882 100644
--- a/label_studio/users/serializers.py
+++ b/label_studio/users/serializers.py
@@ -94,6 +94,7 @@ class Meta:
             'username',
             'email',
             'last_activity',
+            'custom_hotkeys',
             'avatar',
             'initials',
             'phone',
@@ -103,7 +104,7 @@ class Meta:
             'date_joined',
         )
 
-
+        
 class BaseUserSerializerUpdate(BaseUserSerializer):
     class Meta(BaseUserSerializer.Meta):
         read_only_fields = ('email',)
@@ -115,5 +116,68 @@ class Meta:
         fields = ('id', 'first_name', 'last_name', 'email', 'avatar')
 
 
+class HotkeysSerializer(serializers.Serializer):
+    custom_hotkeys = serializers.DictField(required=True)
+
+    def validate_custom_hotkeys(self, custom_hotkeys):
+        """
+        Validates the hotkey format.
+        Expected format: {"section:action": {"key": "key_combination", "active": boolean}}
+        The "active" field is optional and defaults to true.
+        """
+        if not isinstance(custom_hotkeys, dict):
+            raise serializers.ValidationError("custom_hotkeys must be a dictionary")
+    
+        section_hotkeys = {}  # Keep track of hotkeys by section
+    
+        for action_key, hotkey_data in custom_hotkeys.items():
+            # Validate action key format (section:action)
+            if not isinstance(action_key, str) or not action_key:
+                raise serializers.ValidationError(f"Action key '{action_key}' must be a non-empty string")
+        
+            # Check if the action key follows the section:action format
+            if ':' not in action_key:
+                raise serializers.ValidationError(f"Action key '{action_key}' must be in 'section:action' format")
+        
+            section, action = action_key.split(':', 1)
+        
+            # Validate hotkey data format
+            if not isinstance(hotkey_data, dict):
+                raise serializers.ValidationError(f"Hotkey data for '{action_key}' must be a dictionary")
+        
+            # Check for key in hotkey data
+            if 'key' not in hotkey_data:
+                raise serializers.ValidationError(f"Missing 'key' in hotkey data for '{action_key}'")
+            
+            key_combo = hotkey_data['key']
+        
+            # Get active status, default to True if not specified
+            active = hotkey_data.get('active', True)
+        
+            # Validate key combination
+            if not isinstance(key_combo, str) or not key_combo:
+                raise serializers.ValidationError(f"Key combination for '{action_key}' must be a non-empty string")
+        
+            # Validate active flag if provided
+            if 'active' in hotkey_data and not isinstance(active, bool):
+                raise serializers.ValidationError(f"Active flag for '{action_key}' must be a boolean")
+        
+            # Check for duplicate hotkeys within the same section
+            if section not in section_hotkeys:
+                section_hotkeys[section] = []
+            
+            # Only check for duplicates if the hotkey is active
+            if active:
+                if key_combo in section_hotkeys[section]:
+                    raise serializers.ValidationError(
+                        f"Duplicate hotkey '{key_combo}' in section '{section}'. "
+                        f"Each section must have unique hotkeys."
+                    )
+                
+                section_hotkeys[section].append(key_combo)
+            
+        return custom_hotkeys
+
+        
 UserSerializer = load_func(settings.USER_SERIALIZER)
 UserSerializerUpdate = load_func(settings.USER_SERIALIZER_UPDATE)
diff --git a/label_studio/users/urls.py b/label_studio/users/urls.py
index 34325eedc0eb..cb91a38df8a8 100644
--- a/label_studio/users/urls.py
+++ b/label_studio/users/urls.py
@@ -19,6 +19,7 @@
     path('user/login/', views.user_login, name='user-login'),
     path('user/signup/', views.user_signup, name='user-signup'),
     path('user/account/', views.user_account, name='user-account'),
+    path('user/account/<sub_path>', views.user_account, name='user-account-anything'),
     re_path(r'^logout/?$', views.logout, name='logout'),
     # Token
     path('api/current-user/reset-token/', api.UserResetTokenAPI.as_view(), name='current-user-reset-token'),
@@ -26,6 +27,8 @@
     path('api/current-user/whoami', api.UserWhoAmIAPI.as_view(), name='current-user-whoami'),
     # Product tours
     path('api/current-user/product-tour', product_tours_api.ProductTourAPI.as_view(), name='product-tour'),
+
+    path('api/current-user/hotkeys', api.UserHotkeysAPI.as_view(), name='current-user-hotkeys'),
 ]
 
 # When CLOUD_FILE_STORAGE_ENABLED is set, avatars are uploaded to cloud storage with a different URL pattern.
diff --git a/label_studio/users/views.py b/label_studio/users/views.py
index 408391dc3914..141fff9fc2e1 100644
--- a/label_studio/users/views.py
+++ b/label_studio/users/views.py
@@ -142,7 +142,7 @@ def user_login(request):
 
 
 @login_required
-def user_account(request):
+def user_account(request, sub_path=None):
     user = request.user
 
     if user.active_organization is None and 'organization_pk' not in request.session:
diff --git a/web/apps/labelstudio/src/components/Menubar/Menubar.jsx b/web/apps/labelstudio/src/components/Menubar/Menubar.jsx
index 3c195215953a..d3639d0bbd42 100644
--- a/web/apps/labelstudio/src/components/Menubar/Menubar.jsx
+++ b/web/apps/labelstudio/src/components/Menubar/Menubar.jsx
@@ -4,6 +4,7 @@ import {
   IconBook,
   IconFolder,
   IconHome,
+  IconHotkeys,
   IconPersonInCircle,
   IconPin,
   IconTerminal,
@@ -31,6 +32,7 @@ import { FF_HOMEPAGE } from "../../utils/feature-flags";
 import { pages } from "@humansignal/app-common";
 import { isFF } from "../../utils/feature-flags";
 import { ff } from "@humansignal/core";
+import { openHotkeyHelp } from "@humansignal/app-common/pages/AccountSettings/sections/Hotkeys/Help";
 
 export const MenubarContext = createContext();
 
@@ -144,14 +146,19 @@ export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSid
 
           <div className={menubarContext}>
             <LeftContextMenu className={contextItem.mod({ left: true })} />
-
             <RightContextMenu className={contextItem.mod({ right: true })} />
           </div>
 
           <div className={menubarClass.elem("spacer").toString()} />
-
+          
           {ff.isActive(ff.FF_THEME_TOGGLE) && <ThemeToggle />}
 
+          <div className={menubarClass.elem("hotkeys")}>
+            <div className={menubarClass.elem("hotkeys-button")}>
+              <a href="#" onClick={() => { openHotkeyHelp() }}><IconHotkeys /></a>
+            </div>
+          </div>
+          
           <Dropdown.Trigger
             ref={useMenuRef}
             align="right"
@@ -161,7 +168,7 @@ export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSid
                   icon={<IconSettings />}
                   label="Account &amp; Settings"
                   href={pages.AccountSettingsPage.path}
-                />
+                />                
                 {/* <Menu.Item label="Dark Mode"/> */}
                 <Menu.Item icon={<IconDoor />} label="Log Out" href={absoluteURL("/logout")} data-external />
                 {showNewsletterDot && (
diff --git a/web/apps/labelstudio/src/components/Menubar/Menubar.scss b/web/apps/labelstudio/src/components/Menubar/Menubar.scss
index 58e4b5ece8fb..57399069ff8b 100644
--- a/web/apps/labelstudio/src/components/Menubar/Menubar.scss
+++ b/web/apps/labelstudio/src/components/Menubar/Menubar.scss
@@ -41,6 +41,23 @@
     }
   }
 
+  &__hotkeys {
+      display: flex;
+      padding: 0 0 0 1.125rem;
+      align-items: center;
+  }
+
+  &__hotkeys-button {
+      padding: 0.5rem 0.5rem;
+      border-radius: 4px;
+      transition: background-color 0.2s ease;
+      
+      &:hover {
+          background-color: var(--color-primary-emphasis-subtle);
+      }
+  }
+
+  
   &__trigger {
     display: flex;
     padding: 0 20px;
diff --git a/web/libs/app-common/src/pages/AccountSettings/AccountSettings.tsx b/web/libs/app-common/src/pages/AccountSettings/AccountSettings.tsx
index 19d04c337280..c071aae87256 100644
--- a/web/libs/app-common/src/pages/AccountSettings/AccountSettings.tsx
+++ b/web/libs/app-common/src/pages/AccountSettings/AccountSettings.tsx
@@ -1,6 +1,7 @@
+
 import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@humansignal/ui/lib/card-new/card";
-import { useMemo } from "react";
-import { Redirect } from "react-router-dom";
+import { useMemo, isValidElement } from "react";
+import { Redirect, Route, Switch, useHistory, useParams, useRouteMatch } from "react-router-dom";
 import styles from "./AccountSettings.module.scss";
 import { accountSettingsSections } from "./sections";
 import clsx from "clsx";
@@ -13,11 +14,57 @@ import { settingsAtom } from "./atoms";
  */
 import { SidebarMenu } from "apps/labelstudio/src/components/SidebarMenu/SidebarMenu";
 
-const AccountSettingsPage = () => {
+const AccountSettingsSection = () => {
+  const { sectionId } = useParams();
   const settings = useAtomValue(settingsAtom);
   const contentClassName = clsx(styles.accountSettings__content, {
     [styles.accountSettingsPadding]: window.APP_SETTINGS.billing !== undefined,
   });
+  
+  const resolvedSections = useMemo(() => {
+    return settings.data ? accountSettingsSections(settings.data) : [];
+  }, [settings.data]);
+
+  const currentSection = useMemo(() => 
+    resolvedSections.find(section => section.id === sectionId),
+    [resolvedSections, sectionId]
+  );
+
+  if (!currentSection && resolvedSections.length > 0) {
+    return <Redirect to={`${AccountSettingsPage.path}/${resolvedSections[0].id}`} />;
+  }
+
+  return currentSection ? (
+    currentSection.raw ? (
+	<currentSection.component />
+    ) : (
+	<div className={contentClassName}>
+	<Card key={currentSection.id}>
+        <CardHeader>
+        <CardTitle>{currentSection.title}</CardTitle>
+        {currentSection.description && (
+            <CardDescription>
+            {isValidElement(currentSection.description) 
+             ? currentSection.description 
+             : <currentSection.description />}
+          </CardDescription>
+        )}
+      </CardHeader>
+        <CardContent>
+        <currentSection.component />
+        </CardContent>
+	</Card>
+	</div>
+    )
+  ) : null;
+};
+
+const AccountSettingsPage = () => {
+  const settings = useAtomValue(settingsAtom);
+  const history = useHistory();
+  const match = useRouteMatch();
+  const { sectionId } = useParams();
+  
   const resolvedSections = useMemo(() => {
     return settings.data ? accountSettingsSections(settings.data) : [];
   }, [settings.data]);
@@ -27,33 +74,24 @@ const AccountSettingsPage = () => {
       resolvedSections.map(({ title, id }) => ({
         title,
         path: () => {
-          if (!window?.location) return;
-          window.location.hash = `#${id}`;
+          history.push(`${AccountSettingsPage.path}/${id}`);
         },
+        active: sectionId === id,
       })),
-    [accountSettingsSections, settings.data],
+    [resolvedSections, sectionId, history],
   );
 
   return (
     <div className={styles.accountSettings}>
       <SidebarMenu menuItems={menuItems} path={AccountSettingsPage.path}>
-        <div className={contentClassName}>
-          {resolvedSections?.map(({ title, component: Section, description: Description, id }) => (
-            <Card key={id}>
-              <CardHeader>
-                <CardTitle>{title}</CardTitle>
-                {Description && (
-                  <CardDescription>
-                    <Description />
-                  </CardDescription>
-                )}
-              </CardHeader>
-              <CardContent>
-                <Section />
-              </CardContent>
-            </Card>
-          ))}
-        </div>
+        <Switch>
+          <Route path={`${match.path}/:sectionId`} component={AccountSettingsSection} />
+          <Route exact path={match.path}>
+            {resolvedSections.length > 0 && (
+              <Redirect to={`${match.path}/${resolvedSections[0].id}`} />
+            )}
+          </Route>
+        </Switch>
       </SidebarMenu>
     </div>
   );
@@ -61,19 +99,17 @@ const AccountSettingsPage = () => {
 
 AccountSettingsPage.title = "My Account";
 AccountSettingsPage.path = "/user/account";
-AccountSettingsPage.exact = true;
+AccountSettingsPage.exact = false;
 AccountSettingsPage.routes = () => [
   {
     title: () => "My Account",
-    exact: true,
-    component: () => {
-      return <Redirect to={AccountSettingsPage.path} />;
-    },
-    // pages: {
-    //   DataManagerPage,
-    //   SettingsPage,
-    // },
+    path: "/account",
+    component: () => <Redirect to={AccountSettingsPage.path} />,
   },
+  {
+    path: `${AccountSettingsPage.path}/:sectionId?`,
+    component: AccountSettingsPage,
+  }
 ];
 
 export { AccountSettingsPage };
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.jsx
new file mode 100644
index 000000000000..e6cb9983c078
--- /dev/null
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.jsx
@@ -0,0 +1,525 @@
+import { useEffect, useState } from "react";
+import { ToastType, useToast } from "@humansignal/ui";
+
+// Shadcn UI components
+import { Button } from "@humansignal/ui";
+import { Card, CardContent, CardHeader } from "@humansignal/shad/components/ui/card";
+import { Badge } from "@humansignal/shad/components/ui/badge";
+import { Skeleton } from "@humansignal/shad/components/ui/skeleton";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@humansignal/shad/components/ui/dialog";
+
+import { Dropdown } from "apps/labelstudio/src/components/Dropdown/Dropdown";
+import { Menu } from "apps/labelstudio/src/components/Menu/Menu";
+import { useAPI } from "apps/labelstudio/src/providers/ApiProvider";
+
+import { HotkeySection } from "./Hotkeys/Section";
+import { ImportDialog } from "./Hotkeys/Import";
+import { DEFAULT_HOTKEYS, HOTKEY_SECTIONS } from "./Hotkeys/defaults";
+
+window.DEFAULT_HOTKEYS = DEFAULT_HOTKEYS;
+
+export const HotkeysManager = () => {
+  const toast = useToast();
+  const [hotkeys, setHotkeys] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [editingHotkeyId, setEditingHotkeyId] = useState(null);
+  const [globalEnabled, setGlobalEnabled] = useState(true);
+  const [dirtyState, setDirtyState] = useState({});
+  const [importDialogOpen, setImportDialogOpen] = useState(false);
+  const [duplicateConfirmDialog, setDuplicateConfirmDialog] = useState({
+    open: false,
+    hotkeyId: null,
+    newKey: null,
+    conflictingHotkeys: []
+  });
+
+  const api = useAPI();
+
+  // Function to identify which hotkeys were modified from defaults
+  const getModifiedHotkeys = (currentHotkeys) => {
+    // Create a map of default hotkeys for quick comparison
+    const defaultMap = {};
+    DEFAULT_HOTKEYS.forEach(hotkey => {
+      defaultMap[`${hotkey.section}:${hotkey.element}`] = {
+        key: hotkey.key,
+        active: hotkey.active
+      };
+    });
+    
+    // Find modified hotkeys
+    return currentHotkeys.filter(hotkey => {
+      const keyId = `${hotkey.section}:${hotkey.element}`;
+      const defaultValue = defaultMap[keyId];
+      
+      // If no default exists or key/active state differs, it's modified
+      return !defaultValue || 
+             defaultValue.key !== hotkey.key || 
+             defaultValue.active !== hotkey.active;
+    });
+  };
+
+  // Check if a hotkey conflicts with others globally
+  const getGlobalDuplicates = (hotkeyId, newKey) => {
+    return hotkeys.filter(h => 
+      h.id !== hotkeyId && 
+      h.key === newKey
+    );
+  };
+
+  // Save hotkeys to API function
+  const saveHotkeysToAPI = async () => {
+    // Get all modified hotkeys, not just from one section
+    const modifiedHotkeys = getModifiedHotkeys(hotkeys);
+    
+    // If nothing was modified, return success without API call
+    if (modifiedHotkeys.length === 0) {
+      return { ok: true, data: { message: "No changes to save" } };
+    }
+    
+    // Convert our array format to the API's expected JSON object format
+    const customHotkeys = {};
+    
+    // Process all modified hotkeys
+    modifiedHotkeys.forEach(hotkey => {
+      const keyId = `${hotkey.section}:${hotkey.element}`;
+      customHotkeys[keyId] = {
+        key: hotkey.key,
+        active: hotkey.active
+      };
+    });
+    
+    try {
+      // Call the API to save all modified hotkeys
+      const response = await api.callApi('hotkeys', { 
+        body: {
+          custom_hotkeys: customHotkeys
+        }
+      });
+      
+      return {
+        ok: true,
+        error: response.error,
+        data: response
+      };
+    } catch (error) {
+      console.error("Error saving hotkeys:", error);
+      return {
+        ok: false,
+        error: error.message
+      };
+    }
+  };
+
+  function updateHotkeysWithCustomSettings(defaultHotkeys, customHotkeys) {
+    return defaultHotkeys.map(hotkey => {
+      // Create the lookup key format used in the API response (section:element)
+      const lookupKey = `${hotkey.section}:${hotkey.element}`;
+      
+      // Check if there's a custom setting for this hotkey
+      if (customHotkeys[lookupKey]) {
+        // Create a new object with the default properties and override with custom ones
+        return {
+          ...hotkey,
+          ...customHotkeys[lookupKey]
+        };
+      }
+      
+      // If no custom setting exists, return the default hotkey unchanged
+      return hotkey;
+    });
+  }
+  
+  // Load hotkeys on component mount
+  useEffect(() => {
+    const loadHotkeys = () => {
+      const updatedHotkeys = updateHotkeysWithCustomSettings(
+        DEFAULT_HOTKEYS, 
+        window.APP_SETTINGS.user.customHotkeys
+      );
+      
+      setIsLoading(true);
+      setHotkeys(updatedHotkeys);
+      setIsLoading(false);
+    };
+
+    loadHotkeys();
+  }, []);
+
+  // Handle enabling/disabling all hotkeys
+  const handleToggleAllHotkeys = async () => {
+    const newState = !globalEnabled;
+    
+    try {
+      setIsLoading(true);
+      
+      // Update local state first
+      const updatedHotkeys = hotkeys.map(hotkey => ({ ...hotkey, active: newState }));
+      setHotkeys(updatedHotkeys);
+      setGlobalEnabled(newState);
+      
+      // Mark all sections as having changes
+      const newDirtyState = {};
+      HOTKEY_SECTIONS.forEach(section => {
+        newDirtyState[section.id] = true;
+      });
+      setDirtyState(newDirtyState);
+      
+      toast.show({ 
+        message: `All hotkeys ${newState ? 'enabled' : 'disabled'}`, 
+        type: ToastType.success 
+      });
+    } catch (error) {
+      toast.show({ message: "Error updating hotkeys", type: ToastType.error });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Handle toggling a single hotkey
+  const handleToggleHotkey = (hotkeyId) => {
+    // Update the hotkey
+    const updatedHotkeys = hotkeys.map(hotkey => {
+      if (hotkey.id === hotkeyId) {
+        return { ...hotkey, active: !hotkey.active };
+      }
+      return hotkey;
+    });
+    
+    setHotkeys(updatedHotkeys);
+    
+    // Mark the section as having changes
+    const hotkey = hotkeys.find(h => h.id === hotkeyId);
+    if (hotkey) {
+      setDirtyState({
+        ...dirtyState,
+        [hotkey.section]: true
+      });
+    }
+    
+    // Update global enabled state
+    const allEnabled = updatedHotkeys.every(hotkey => hotkey.active);
+    setGlobalEnabled(allEnabled);
+  };
+
+  // Handle resetting all hotkeys to defaults
+  const handleResetToDefaults = () => {
+    const confirmMessage = hasUnsavedChanges 
+      ? "Are you sure you want to reset all hotkeys to their default values? This will discard all unsaved changes and cannot be undone."
+      : "Are you sure you want to reset all hotkeys to their default values? This cannot be undone.";
+      
+    if (!confirm(confirmMessage)) {
+      return;
+    }
+    
+    setHotkeys([...DEFAULT_HOTKEYS]);
+    setGlobalEnabled(true);
+    setDirtyState({});
+    
+    toast.show({ 
+      message: "All hotkeys have been reset to defaults", 
+      type: ToastType.success 
+    });
+  };
+
+  // Check if any section has unsaved changes
+  const hasUnsavedChanges = Object.keys(dirtyState).length > 0;
+
+  // Helper function to get section title by ID
+  const getSectionTitle = (sectionId) => {
+    const section = HOTKEY_SECTIONS.find(s => s.id === sectionId);
+    return section ? section.title : sectionId;
+  };
+
+  // Handle saving an edited hotkey
+  const handleSaveHotkey = (hotkeyId, newKey) => {
+    // Find the hotkey to update
+    const hotkey = hotkeys.find(h => h.id === hotkeyId);
+    if (!hotkey) return;
+    
+    // Check for global duplicates
+    const conflictingHotkeys = getGlobalDuplicates(hotkeyId, newKey);
+    
+    if (conflictingHotkeys.length > 0) {
+      // Show confirmation dialog for duplicates
+      setDuplicateConfirmDialog({
+        open: true,
+        hotkeyId,
+        newKey,
+        conflictingHotkeys
+      });
+      return;
+    }
+    
+    // No conflicts, proceed with the update
+    updateHotkeyKey(hotkeyId, newKey);
+  };
+
+  // Function to actually update the hotkey key
+  const updateHotkeyKey = (hotkeyId, newKey) => {
+    // Find the hotkey to update
+    const hotkey = hotkeys.find(h => h.id === hotkeyId);
+    if (!hotkey) return;
+    
+    // Update the hotkey
+    const updatedHotkeys = hotkeys.map(h => {
+      if (h.id === hotkeyId) {
+        return { ...h, key: newKey };
+      }
+      return h;
+    });
+    
+    setHotkeys(updatedHotkeys);
+    
+    // Mark the section as having changes
+    setDirtyState({
+      ...dirtyState,
+      [hotkey.section]: true
+    });
+    
+    // Exit edit mode
+    setEditingHotkeyId(null);
+  };
+
+  // Handle confirming duplicate hotkey
+  const handleConfirmDuplicate = () => {
+    const { hotkeyId, newKey } = duplicateConfirmDialog;
+    
+    // Close the dialog
+    setDuplicateConfirmDialog({
+      open: false,
+      hotkeyId: null,
+      newKey: null,
+      conflictingHotkeys: []
+    });
+    
+    // Proceed with the update
+    updateHotkeyKey(hotkeyId, newKey);
+  };
+
+  // Handle canceling duplicate confirmation
+  const handleCancelDuplicate = () => {
+    setDuplicateConfirmDialog({
+      open: false,
+      hotkeyId: null,
+      newKey: null,
+      conflictingHotkeys: []
+    });
+  };
+
+  // Handle canceling edit mode
+  const handleCancelEdit = () => {
+    setEditingHotkeyId(null);
+  };
+
+  // Handle saving a section's hotkeys
+  const handleSaveSection = async (sectionId) => {
+    setIsLoading(true);
+    
+    try {
+      // Save ALL modified hotkeys, not just this section
+      const result = await saveHotkeysToAPI();
+
+      if (result.ok) {
+        // Clear the dirty state for this section
+        const newDirtyState = { ...dirtyState };
+        delete newDirtyState[sectionId];
+        setDirtyState(newDirtyState);
+        
+        toast.show({ 
+          message: `${HOTKEY_SECTIONS.find(s => s.id === sectionId)?.title} shortcuts saved`, 
+          type: ToastType.success 
+        });
+      } else {
+        toast.show({ 
+          message: `Failed to save shortcuts: ${result.error || "Unknown error"}`, 
+          type: ToastType.error 
+        });
+      }
+    } catch (error) {
+      toast.show({ 
+        message: `Error saving shortcuts: ${error.message}`, 
+        type: ToastType.error 
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Handle exporting hotkeys
+  const handleExportHotkeys = () => {
+    // Create a JSON string of the hotkeys
+    const hotkeyJson = JSON.stringify(hotkeys, null, 2);
+    
+    // Create a blob with the JSON
+    const blob = new Blob([hotkeyJson], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    
+    // Create a temporary link and click it to download the file
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'hotkeys-export.json';
+    document.body.appendChild(link);
+    link.click();
+    
+    // Clean up
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+    
+    toast.show({ message: "Hotkeys exported successfully", type: ToastType.success });
+  };
+  
+  // Handle importing hotkeys
+  const handleImportHotkeys = async (importedHotkeys) => {
+    try {
+      setIsLoading(true);
+      
+      // Update local state
+      setHotkeys(importedHotkeys);
+      
+      // Check if any hotkey is disabled to determine global state
+      const allEnabled = importedHotkeys.every(hotkey => hotkey.active);
+      setGlobalEnabled(allEnabled);
+      
+      // Save all modified hotkeys to API
+      const result = await saveHotkeysToAPI();
+      
+      if (!result.ok) {
+        throw new Error(result.error || "Failed to save imported hotkeys");
+      }
+      
+      // Reset dirty state
+      setDirtyState({});
+      
+      toast.show({ message: "Hotkeys imported successfully", type: ToastType.success });
+    } catch (error) {
+      toast.show({ message: "Error importing hotkeys: " + error.message, type: ToastType.error });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Group hotkeys by section
+  const getHotkeysBySection = (sectionId) => {
+    return hotkeys.filter(hotkey => hotkey.section === sectionId);
+  };
+
+  return (
+    <div id="hotkeys-manager" style={{ maxWidth: "660px" }}>
+      <div className="space-y-6">
+        <div className="flex justify-between items-start">
+          <div>
+            <h2 className="text-3xl font-bold tracking-tight mb-2">
+              Keyboard Hotkeys
+            </h2>
+            <p className="text-muted-foreground">
+              Click on any hotkey to edit it. Click "Cancel" to exit editing.
+            </p>
+          </div>
+          <div className="flex gap-3">
+            <Dropdown.Trigger
+              align="right"
+              content={
+                <Menu>
+                  <Menu.Item label="Export Hotkeys" onClick={handleExportHotkeys} />
+                  <Menu.Item label="Import Hotkeys" onClick={() => setImportDialogOpen(true)} />
+                  <Menu.Divider />
+                  <Menu.Item label="Reset to Defaults" onClick={handleResetToDefaults} />                
+                </Menu>
+              }
+            >
+              <Button variant="secondary">Actions</Button>
+            </Dropdown.Trigger>
+          </div>
+        </div>
+        
+        {isLoading && hotkeys.length === 0 ? (
+          <div className="space-y-3">
+            {HOTKEY_SECTIONS.map(section => (
+              <Card key={section.id}>
+                <CardHeader className="pb-2">
+                  <Skeleton className="h-6 w-[250px]" />
+                  <Skeleton className="h-4 w-[300px]" />
+                </CardHeader>
+                <CardContent>
+                  {[1, 2, 3].map(i => (
+                    <div key={i} className="py-3 border-b border-border last:border-0">
+                      <Skeleton className="h-5 w-[180px] mb-2" />
+                      <Skeleton className="h-4 w-[250px]" />
+                    </div>
+                  ))}
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {HOTKEY_SECTIONS.map(section => (
+              <HotkeySection
+                key={section.id}
+                section={section}
+                hotkeys={getHotkeysBySection(section.id)}
+                editingHotkeyId={editingHotkeyId}
+                onSaveHotkey={handleSaveHotkey}
+                onCancelEdit={handleCancelEdit}
+                onToggleHotkey={handleToggleHotkey}
+                onSaveSection={handleSaveSection}
+                hasChanges={dirtyState[section.id]}
+                onEditHotkey={setEditingHotkeyId}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+      
+      {/* Import Dialog */}
+      <ImportDialog 
+        open={importDialogOpen} 
+        onOpenChange={setImportDialogOpen}
+        onImport={handleImportHotkeys} 
+      />
+
+      {/* Duplicate Confirmation Dialog */}
+      <Dialog open={duplicateConfirmDialog.open} onOpenChange={handleCancelDuplicate}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Duplicate Hotkey Detected</DialogTitle>
+            <DialogDescription>
+              The hotkey combination "<strong>{duplicateConfirmDialog.newKey}</strong>" is already being used by:
+            </DialogDescription>
+          </DialogHeader>
+          
+          <div className="py-4 max-h-60 overflow-y-auto">
+            <div className="space-y-3">
+              {duplicateConfirmDialog.conflictingHotkeys.map((conflictHotkey) => (
+                <div key={conflictHotkey.id} className="flex items-center justify-between p-3 bg-muted rounded-md">
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium truncate">{conflictHotkey.label}</div>
+                    <div className="text-sm text-muted-foreground">
+                      {getSectionTitle(conflictHotkey.section)}
+                    </div>
+                  </div>
+                  <Badge variant="secondary" className="ml-2 shrink-0">
+                    {conflictHotkey.key}
+                  </Badge>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <DialogDescription className="text-amber-600 bg-amber-50 p-3 rounded-md border border-amber-200">
+            ⚠️ Having duplicate hotkeys may cause conflicts and unexpected behavior. Are you sure you want to proceed?
+          </DialogDescription>
+          
+          <DialogFooter>
+            <Button variant="neutral" onClick={handleCancelDuplicate}>
+              Cancel
+            </Button>
+            <Button onClick={handleConfirmDuplicate}>
+              Allow Duplicate
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.scss b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.scss
new file mode 100644
index 000000000000..dda6f98d817c
--- /dev/null
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.scss
@@ -0,0 +1,263 @@
+// Section styling
+.sectionHeader {
+  margin-bottom: 1.5rem;
+  align-items: center;
+}
+
+.sectionTitle {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.globalControls {
+  display: flex;
+  gap: 1rem;
+}
+
+// Loading state
+.loadingContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  color: var(--ls-text-secondary);
+}
+
+.loadingSpinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  border-top-color: var(--ls-primary-color);
+  animation: spin 1s ease-in-out infinite;
+  margin-bottom: 1rem;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+// Hotkey sections
+.hotkeySections {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.hotkeySection {
+  background-color: var(--ls-background-color);
+  border-radius: 8px;
+  border: 1px solid var(--ls-border-color);
+  overflow: hidden;
+}
+
+.hotkeySectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  background-color: var(--ls-background-color-alt);
+  border-bottom: 1px solid var(--ls-border-color);
+}
+
+.hotkeySectionTitle {
+  margin: 0 0 0.25rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--ls-text-color);
+}
+
+.hotkeySectionDescription {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--ls-text-secondary);
+}
+
+.hotkeyList {
+  padding: 1rem 1.5rem;
+}
+
+.emptyHotkeyList {
+  padding: 2rem 0;
+  text-align: center;
+  color: var(--ls-text-secondary);
+  font-style: italic;
+}
+
+// Hotkey item styling
+.hotkeyItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--ls-border-color-15);
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.hotkeyItemDisabled {
+  opacity: 0.6;
+}
+
+.hotkeyDetails {
+  flex: 1;
+  margin-right: 1rem;
+}
+
+.hotkeyLabel {
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.hotkeyDescription {
+  font-size: 0.875rem;
+  color: var(--ls-text-secondary);
+}
+
+.hotkeyControls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.hotkeyKey {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  
+  &:hover {
+    .keyboardKey {
+      background-color: var(--ls-primary-color-15);
+      border-color: var(--ls-primary-color);
+    }
+  }
+}
+
+.hotkeyRemove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: none;
+  background-color: var(--ls-danger-color-15);
+  color: var(--ls-danger-color);
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background-color: var(--ls-danger-color);
+    color: white;
+  }
+}
+
+// Editing mode styling
+.hotkeyItemEditing {
+  display: flex;
+  flex-direction: column;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--ls-border-color-15);
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  .hotkeyLabel {
+    margin-bottom: 0.75rem;
+  }
+}
+
+.hotkeyEditControls {
+  display: flex;
+  gap: 1rem;
+}
+
+.keyRecordingBox {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--ls-border-color);
+  border-radius: 4px;
+  background-color: var(--ls-background-color);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    border-color: var(--ls-primary-color);
+  }
+  
+  &:focus {
+    outline: none;
+    border-color: var(--ls-primary-color);
+    box-shadow: 0 0 0 2px var(--ls-primary-color-15);
+  }
+}
+
+.recording {
+  background-color: var(--ls-primary-color-15);
+  border-color: var(--ls-primary-color);
+  box-shadow: 0 0 0 2px var(--ls-primary-color-15);
+  
+  .recordingPrompt {
+    color: var(--ls-primary-color);
+    font-weight: 500;
+    animation: pulse 1.5s infinite;
+  }
+}
+
+@keyframes pulse {
+  0% { opacity: 0.6; }
+  50% { opacity: 1; }
+  100% { opacity: 0.6; }
+}
+
+.placeholderText {
+  color: var(--ls-text-secondary);
+}
+
+.editActions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+// Keyboard key styling
+.keyboardKey {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 6px;
+  border-radius: 4px;
+  background-color: var(--ls-background-color-alt);
+  border: 1px solid var(--ls-border-color);
+  box-shadow: 0 2px 0 var(--ls-border-color);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--ls-text-color);
+  transition: all 0.2s ease;
+}
+
+.keySeparator {
+  margin: 0 4px;
+  color: var(--ls-text-secondary);
+}
+
+.keyCombo {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx
new file mode 100644
index 000000000000..dd3f16a2af99
--- /dev/null
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx
@@ -0,0 +1,251 @@
+
+import { useCallback, useEffect, useState, useRef } from "react";
+import React from "react";
+import ReactDOM from "react-dom";
+import clsx from "clsx";
+import { ToastType, useToast } from "@humansignal/ui";
+import { API } from "apps/labelstudio/src/providers/ApiProvider";
+import { atomWithMutation } from "jotai-tanstack-query";
+import { useAtomValue } from "jotai";
+
+// Shadcn UI components
+import { Button } from "@humansignal/ui";
+import { Label, Input, Toggle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@humansignal/ui";
+
+import { Switch } from "@humansignal/shad/components/ui/switch";
+import { Separator } from "@humansignal/shad/components/ui/separator";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@humansignal/shad/components/ui/card";
+import { Badge } from "@humansignal/shad/components/ui/badge";
+import { Skeleton } from "@humansignal/shad/components/ui/skeleton";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@humansignal/shad/components/ui/dialog";
+import { Alert, AlertDescription, AlertTitle } from "@humansignal/shad/components/ui/alert";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@humansignal/shad/components/ui/dropdown-menu";
+
+import { KeyboardKey } from "./Key";
+import { HotkeyItem } from "./Item";
+import { HotkeySection } from "./Section";
+import { DEFAULT_HOTKEYS, HOTKEY_SECTIONS } from "./defaults";
+
+
+// Define a regex mapping from URL patterns to section IDs
+const URL_TO_SECTION_MAPPING = [
+  { regex: /\/projects\/\d+\/data\/?\?.*task=\d+/i, section: ["annotation", "regions"] },
+  { regex: /\/projects\/\d+\/data\/?$/i, section: "data_manager" },
+  
+];
+
+export const openHotkeyHelp = (sectionOrUrl) => {
+  let sectionsToShow = [];
+  
+  // If sectionOrUrl is provided
+  if (sectionOrUrl) {
+    // Check if it's a URL
+    if (sectionOrUrl.startsWith('http') || sectionOrUrl.startsWith('/')) {
+      // Apply regex mapping to identify sections
+      for (const mapping of URL_TO_SECTION_MAPPING) {
+        if (mapping.regex.test(sectionOrUrl)) {
+          // If the mapping.section is an array, extend sectionsToShow with it
+          if (Array.isArray(mapping.section)) {
+            sectionsToShow = [...sectionsToShow, ...mapping.section];
+          } else {
+            sectionsToShow.push(mapping.section);
+          }
+        }
+      }
+    } else {
+      // It's a section name or an array of section names
+      sectionsToShow = Array.isArray(sectionOrUrl) ? sectionOrUrl : [sectionOrUrl];
+    }
+  } else {
+    // If nothing is provided, use current URL
+    const currentUrl = window.location.pathname;
+    for (const mapping of URL_TO_SECTION_MAPPING) {
+      if (mapping.regex.test(currentUrl)) {
+        // If the mapping.section is an array, extend sectionsToShow with it
+        if (Array.isArray(mapping.section)) {
+          sectionsToShow = [...sectionsToShow, ...mapping.section];
+        } else {
+          sectionsToShow.push(mapping.section);
+        }
+      }
+    }
+  }
+
+  // Remove duplicates
+  sectionsToShow = [...new Set(sectionsToShow)];
+
+  // If no sections identified, show all sections
+  if (sectionsToShow.length === 0) {
+    sectionsToShow = HOTKEY_SECTIONS.map(section => section.id);
+  }
+
+  // Create modal root with high z-index
+  const modalRoot = document.createElement('div');
+  modalRoot.style.position = 'fixed';
+  modalRoot.style.top = '0';
+  modalRoot.style.left = '0';
+  modalRoot.style.width = '100%';
+  modalRoot.style.height = '100%';
+  modalRoot.style.zIndex = '9999';
+  modalRoot.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+  modalRoot.style.display = 'flex';
+  modalRoot.style.alignItems = 'center';
+  modalRoot.style.justifyContent = 'center';
+  document.body.appendChild(modalRoot);
+
+  // Create a function to remove the modal
+  const closeModal = () => {
+    ReactDOM.unmountComponentAtNode(modalRoot);
+    document.body.removeChild(modalRoot);
+  };
+
+  // The HotkeyHelpModal component
+  const HotkeyHelpModal = () => {
+    const [open, setOpen] = React.useState(true);
+
+    const handleClose = () => {
+      setOpen(false);
+      setTimeout(closeModal, 300); // Give time for animation to complete
+    };
+
+    // Click outside to close
+    const handleBackdropClick = (e) => {
+      if (e.target === e.currentTarget) {
+        handleClose();
+      }
+    };
+
+    return (
+      <div onClick={handleBackdropClick} className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-3xl max-h-[80vh] overflow-hidden w-full mx-4">
+          {/* Header */}
+          <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex justify-between items-center">
+              <h2 className="text-lg font-semibold">Available Keyboard Shortcuts</h2>
+              <button
+                onClick={handleClose}
+                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xl leading-none"
+              >
+                ×
+              </button>
+            </div>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+              Keyboard shortcuts for this page.&nbsp;
+              <a 
+                href="/user/account/hotkeys" 
+                onClick={() => { handleClose(); return true; }}
+                className="text-blue-600 hover:underline"
+              >
+                Customize
+              </a>
+            </p>
+          </div>
+          
+          {/* Content */}
+          <div className="px-6 py-4 overflow-y-auto max-h-[60vh]">
+            <div className="space-y-4">
+              {sectionsToShow.map(sectionId => {
+                const section = HOTKEY_SECTIONS.find(s => s.id === sectionId);
+                if (!section) return null;
+
+                const sectionHotkeys = DEFAULT_HOTKEYS.filter(h => h.section === sectionId);
+                if (sectionHotkeys.length === 0) return null;
+
+                // Group hotkeys by subgroup
+                const groupedHotkeys = sectionHotkeys.reduce((groups, hotkey) => {
+                  const subgroup = hotkey.subgroup || 'default';
+                  if (!groups[subgroup]) {
+                    groups[subgroup] = [];
+                  }
+                  groups[subgroup].push(hotkey);
+                  return groups;
+                }, {});
+
+                // Get sorted subgroups (with 'default' always first)
+                const subgroups = Object.keys(groupedHotkeys).sort((a, b) => {
+                  if (a === 'default') return -1;
+                  if (b === 'default') return 1;
+                  return a.localeCompare(b);
+                });
+
+                return (
+                  <div key={sectionId} className="border border-gray-200 dark:border-gray-700 rounded-lg">
+                    <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+                      <h3 className="font-medium">{section.title}</h3>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">{section.description}</p>
+                    </div>
+                    <div className="p-4">
+                      <div className="space-y-2">
+                        {subgroups.map((subgroup, index) => (
+                          <div key={subgroup} className={clsx(
+                            subgroup !== 'default' && "mt-4 pt-2 border rounded-md border-gray-200 dark:border-gray-700 p-3"
+                          )}>
+                            {subgroup !== 'default' && (
+                              <div className="mb-3">
+                                <div className="text-sm font-medium mb-1 capitalize">
+                                  {HOTKEY_SUBGROUPS[subgroup]?.title || subgroup}
+                                </div>
+                                {HOTKEY_SUBGROUPS[subgroup]?.description && (
+                                  <div className="text-xs text-gray-500 dark:text-gray-400">
+                                    {HOTKEY_SUBGROUPS[subgroup].description}
+                                  </div>
+                                )}
+                              </div>
+                            )}
+                            {groupedHotkeys[subgroup].map(hotkey => (
+                              <div
+                                key={`${section.id}-${hotkey.element}`}
+                                className="flex items-center justify-between py-2"
+                              >
+                                <div>
+                                  <div className="font-medium">{hotkey.label}</div>
+                                  {hotkey.description && (
+                                    <div className="text-sm text-gray-600 dark:text-gray-400">{hotkey.description}</div>
+                                  )}
+                                </div>
+                                <KeyboardKey>{hotkey.key}</KeyboardKey>
+                              </div>
+                            ))}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
+            <div className="flex justify-end">
+              <Button
+                onClick={() => {
+                  window.location.href = "/user/account/hotkeys";
+                  handleClose();
+                }}
+                variant="neutral"
+              >
+                Customize Hotkeys
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // Render the modal
+  ReactDOM.render(<HotkeyHelpModal />, modalRoot);
+
+  // Handle ESC key
+  const handleEsc = (event) => {
+    if (event.key === "Escape") {
+      closeModal();
+      document.removeEventListener("keydown", handleEsc);
+    }
+  };
+  document.addEventListener("keydown", handleEsc);
+
+  return null;
+};
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Import.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Import.jsx
new file mode 100644
index 000000000000..6d24d65b227f
--- /dev/null
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Import.jsx
@@ -0,0 +1,92 @@
+
+import { useCallback, useEffect, useState, useRef } from "react";
+import React from "react";
+import ReactDOM from "react-dom";
+import clsx from "clsx";
+import { ToastType, useToast } from "@humansignal/ui";
+import { API } from "apps/labelstudio/src/providers/ApiProvider";
+import { atomWithMutation } from "jotai-tanstack-query";
+import { useAtomValue } from "jotai";
+
+// Shadcn UI components
+import { Button } from "@humansignal/ui";
+import { Label, Input, Toggle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@humansignal/ui";
+
+import { Switch } from "@humansignal/shad/components/ui/switch";
+import { Separator } from "@humansignal/shad/components/ui/separator";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@humansignal/shad/components/ui/card";
+import { Badge } from "@humansignal/shad/components/ui/badge";
+import { Skeleton } from "@humansignal/shad/components/ui/skeleton";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@humansignal/shad/components/ui/dialog";
+import { Alert, AlertDescription, AlertTitle } from "@humansignal/shad/components/ui/alert";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@humansignal/shad/components/ui/dropdown-menu";
+
+// ImportDialog component for importing hotkeys
+export const ImportDialog = ({ open, onOpenChange, onImport }) => {
+  const [importText, setImportText] = useState("");
+  const [error, setError] = useState("");
+  
+  const handleImport = () => {
+    try {
+      // Parse the import text
+      const hotkeys = JSON.parse(importText);
+      
+      // Validate the imported data
+      if (!Array.isArray(hotkeys)) {
+        throw new Error("Invalid format: expected an array of hotkeys");
+      }
+      
+      // Check if each hotkey has the required fields
+      hotkeys.forEach(hotkey => {
+        if (!hotkey.id || !hotkey.section || !hotkey.element || !hotkey.label || !hotkey.key) {
+          throw new Error("Invalid hotkey format: missing required fields");
+        }
+      });
+      
+      // Call the import function
+      onImport(hotkeys);
+      onOpenChange(false);
+      setImportText("");
+      setError("");
+      
+    } catch (err) {
+      setError("Invalid JSON format: " + err.message);
+    }
+  };
+  
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[525px]">
+        <DialogHeader>
+          <DialogTitle>Import Hotkeys</DialogTitle>
+          <DialogDescription>
+            Paste your exported hotkeys JSON below. This will replace your current hotkeys.
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="grid gap-4 py-4">
+          <Label htmlFor="import-json">Hotkeys JSON</Label>
+          <textarea
+            id="import-json"
+            className="flex min-h-[150px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            placeholder='[{"id": 1, "section": "annotation-actions", ...}]'
+            value={importText}
+            onChange={(e) => setImportText(e.target.value)}
+          />
+          
+          {error && (
+            <Alert variant="destructive">
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+        </div>
+        
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>Cancel</Button>
+          <Button onClick={handleImport} disabled={!importText}>Import Hotkeys</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Item.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Item.jsx
new file mode 100644
index 000000000000..c6f65d190500
--- /dev/null
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Item.jsx
@@ -0,0 +1,143 @@
+
+import { useCallback, useEffect, useState, useRef } from "react";
+import React from "react";
+import ReactDOM from "react-dom";
+import clsx from "clsx";
+import { ToastType, useToast } from "@humansignal/ui";
+import { API } from "apps/labelstudio/src/providers/ApiProvider";
+import { atomWithMutation } from "jotai-tanstack-query";
+import { useAtomValue } from "jotai";
+
+// Shadcn UI components
+import { Button } from "@humansignal/ui";
+import { Label, Input, Toggle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@humansignal/ui";
+
+import { Switch } from "@humansignal/shad/components/ui/switch";
+import { Separator } from "@humansignal/shad/components/ui/separator";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@humansignal/shad/components/ui/card";
+import { Badge } from "@humansignal/shad/components/ui/badge";
+import { Skeleton } from "@humansignal/shad/components/ui/skeleton";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@humansignal/shad/components/ui/dialog";
+import { Alert, AlertDescription, AlertTitle } from "@humansignal/shad/components/ui/alert";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@humansignal/shad/components/ui/dropdown-menu";
+
+import { useAPI } from "apps/labelstudio/src/providers/ApiProvider";
+import { KeyboardKey } from "./Key";
+
+import { IconEdit } from "@humansignal/icons";
+
+export const HotkeyItem = ({ hotkey, onEdit, isEditing, onSave, onCancel, onToggle }) => {
+  const [editedKey, setEditedKey] = useState(hotkey.key);
+  const [keyRecordingMode, setKeyRecordingMode] = useState(false);
+  const [error, setError] = useState("");
+  const keyRecordingRef = useRef(null);
+  
+  // Handle key press in the key input field
+  const handleKeyPress = (e) => {
+    if (!keyRecordingMode) return;
+    
+    e.preventDefault();
+    
+    const { key, ctrlKey, shiftKey, altKey, metaKey } = e.nativeEvent;
+    
+    // Skip if it's just a modifier key
+    if (['Control', 'Shift', 'Alt', 'Meta'].includes(key)) return;
+    
+    let keyCombo = [];
+    if (ctrlKey) keyCombo.push('ctrl');
+    if (shiftKey) keyCombo.push('shift');
+    if (altKey) keyCombo.push('alt');
+    if (metaKey) keyCombo.push('meta');
+    
+    keyCombo.push(key.toLowerCase());
+    
+    setEditedKey(keyCombo.join('+'));
+    setError("");
+    setKeyRecordingMode(false);
+  };
+  
+  // Start recording key combination
+  const startRecordingKeys = () => {
+    setKeyRecordingMode(true);
+    setEditedKey("");
+    setError("");
+    if (keyRecordingRef.current) {
+      keyRecordingRef.current.focus();
+    }
+  };
+  
+  // Handle save button click
+  const handleSave = () => {
+    onSave(hotkey.id, editedKey);
+  };
+  
+  // If in editing mode, render edit form
+  if (isEditing) {
+    return (
+      <div className="py-3 space-y-3 border-b border-border last:border-0">
+        <div className="font-medium">{hotkey.label}</div>
+        <div className="flex gap-3">
+          <div 
+            ref={keyRecordingRef}
+            className={clsx(
+              "flex-1 flex items-center justify-center min-h-[40px] px-4 py-2 border rounded-md cursor-pointer transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+              keyRecordingMode ? "bg-primary/10 border-primary" : "border-input bg-background",
+              error ? "border-destructive" : ""
+            )}
+            onClick={startRecordingKeys}
+            onKeyDown={handleKeyPress}
+            tabIndex="0"
+          >
+            {keyRecordingMode ? (
+              <span className="text-primary font-medium animate-pulse">Press keys now...</span>
+            ) : editedKey ? (
+              <KeyboardKey>{editedKey}</KeyboardKey>
+            ) : (
+              <span className="text-muted-foreground">Click to set shortcut</span>
+            )}
+          </div>
+          <div className="flex flex-col gap-2">
+            <Button variant="default" size="sm" onClick={handleSave} disabled={!editedKey || !!error}>
+              Apply
+            </Button>
+            <Button variant="neutral" size="sm" onClick={() => onCancel(hotkey.id)}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+        {error && (
+          <div className="text-sm text-destructive mt-1">{error}</div>
+        )}
+      </div>
+    );
+  }
+  
+  // Otherwise render normal view with new layout: toggle, description, hotkey
+  return (
+    <div className={clsx(
+      "flex items-center py-3 border-b border-border/10 last:border-0",
+      !hotkey.active && "opacity-60"
+    )}>
+      <div className="flex-none mr-4">
+        <Switch 
+          checked={hotkey.active}
+          onCheckedChange={() => onToggle(hotkey.id)}
+          aria-label={`${hotkey.active ? 'Disable' : 'Enable'} ${hotkey.label}`}
+        />
+      </div>
+      <div className="flex-1 mr-4">
+        <div className="font-medium">{hotkey.label}</div>
+        <div className="text-sm text-muted-foreground">{hotkey.description}</div>
+      </div>
+      <div 
+        className="flex items-center gap-2 cursor-pointer hover:opacity-80" 
+        onClick={() => onEdit(hotkey.id)}
+      >
+        <KeyboardKey>{hotkey.key}</KeyboardKey>
+        {/* <div className="px-0.5 py-0.5 bg-muted text-muted-foreground rounded"> */}
+        {/*   <IconEdit className="text-xs" /> */}
+        {/* </div> */}
+      </div>
+    </div>
+  );
+};
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Key.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Key.jsx
new file mode 100644
index 000000000000..d9bd76565952
--- /dev/null
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Key.jsx
@@ -0,0 +1,8 @@
+
+export const KeyboardKey = ({ children }) => {
+  return (
+    <kbd className="inline-flex items-center justify-center rounded border border-input bg-muted px-3 py-1.5 text-xs font-semibold text-muted-foreground">
+      {children}      
+    </kbd>
+  );
+};
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Section.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Section.jsx
new file mode 100644
index 000000000000..0e8b38f46513
--- /dev/null
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Section.jsx
@@ -0,0 +1,112 @@
+
+import { useCallback, useEffect, useState, useRef } from "react";
+import React from "react";
+import ReactDOM from "react-dom";
+import clsx from "clsx";
+import { ToastType, useToast } from "@humansignal/ui";
+import { API } from "apps/labelstudio/src/providers/ApiProvider";
+import { atomWithMutation } from "jotai-tanstack-query";
+import { useAtomValue } from "jotai";
+
+// Shadcn UI components
+import { Button } from "@humansignal/ui";
+import { Label, Input, Toggle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@humansignal/ui";
+
+import { Switch } from "@humansignal/shad/components/ui/switch";
+import { Separator } from "@humansignal/shad/components/ui/separator";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@humansignal/shad/components/ui/card";
+import { Badge } from "@humansignal/shad/components/ui/badge";
+import { Skeleton } from "@humansignal/shad/components/ui/skeleton";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@humansignal/shad/components/ui/dialog";
+import { Alert, AlertDescription, AlertTitle } from "@humansignal/shad/components/ui/alert";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@humansignal/shad/components/ui/dropdown-menu";
+
+import { HotkeyItem } from "./Item";
+
+
+export const HotkeySection = ({ 
+  section, 
+  hotkeys, 
+  editingHotkeyId, 
+  onEditHotkey, 
+  onSaveHotkey, 
+  onCancelEdit, 
+  onSaveSection, 
+  onToggleHotkey,
+  hasChanges 
+}) => {
+  // Group hotkeys by subgroup
+  const groupedHotkeys = hotkeys.reduce((groups, hotkey) => {
+    const subgroup = hotkey.subgroup || 'default';
+    if (!groups[subgroup]) {
+      groups[subgroup] = [];
+    }
+    groups[subgroup].push(hotkey);
+    return groups;
+  }, {});
+
+  // Get sorted subgroups (with 'default' always first)
+  const subgroups = Object.keys(groupedHotkeys).sort((a, b) => {
+    if (a === 'default') return -1;
+    if (b === 'default') return 1;
+    return a.localeCompare(b);
+  });
+
+  return (
+    <Card className="mb-6">
+      <CardHeader className="pb-2">
+        <CardTitle>{section.title}</CardTitle>
+        <CardDescription>{section.description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div>
+          {subgroups.map((subgroup, index) => (
+            <div key={subgroup} className={clsx(
+              subgroup !== 'default' && "mt-4 pt-2 border rounded-md border-border p-3"
+            )}>
+              {subgroup !== 'default' && (
+                <div className="mb-3">
+                  <div className="text-sm font-medium mb-1 capitalize">
+                    {HOTKEY_SUBGROUPS[subgroup]?.title || subgroup}
+                  </div>
+                  {HOTKEY_SUBGROUPS[subgroup]?.description && (
+                    <div className="text-xs text-muted-foreground">
+                      {HOTKEY_SUBGROUPS[subgroup].description}
+                    </div>
+                  )}
+                </div>
+              )}
+              {groupedHotkeys[subgroup].map(hotkey => (
+                <HotkeyItem 
+                  key={hotkey.id}
+                  hotkey={hotkey}
+                  onEdit={onEditHotkey}
+                  onToggle={onToggleHotkey}
+                  isEditing={editingHotkeyId === hotkey.id}
+                  onSave={onSaveHotkey}
+                  onCancel={onCancelEdit}
+                />
+              ))}
+            </div>
+          ))}
+          
+          {hotkeys.length === 0 && (
+            <div className="py-8 text-center text-muted-foreground italic">
+              No hotkeys in this section
+            </div>
+          )}
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-end">
+        <Button 
+          variant="default" 
+          
+          onClick={() => onSaveSection(section.id)}
+          disabled={!hasChanges}
+        >
+          Save
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/defaults.js b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/defaults.js
new file mode 100644
index 000000000000..49c686bb7895
--- /dev/null
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/defaults.js
@@ -0,0 +1,133 @@
+export const DEFAULT_HOTKEYS = [
+  // Annotation Controls
+  { id: 100, section: "annotation", element: "annotation:submit", label: "Submit Annotation", key: "ctrl+enter", mac: "command+enter", description: "Submit the current annotation", active: true },
+  { id: 200, section: "annotation", element: "annotation:skip", label: "Skip Task", key: "ctrl+space", mac: "alt+enter", description: "Skip the current task", active: true },
+  { id: 300, section: "annotation", element: "annotation:undo", label: "Undo", key: "ctrl+z", mac: "command+z", description: "Undo last action", active: true },
+  { id: 400, section: "annotation", element: "annotation:redo", label: "Redo", key: "ctrl+shift+z", mac: "command+shift+z", description: "Redo previously undone action", active: true },
+  
+  // Data Manager
+  { id: 500, section: "data_manager", element: "dm.focus-previous", label: "Focus Previous Task", key: "shift+up", description: "Move focus to the previous task", active: true },
+  { id: 600, section: "data_manager", element: "dm.focus-next", label: "Focus Next Task", key: "shift+down", description: "Move focus to the next task", active: true },
+  { id: 700, section: "data_manager", element: "dm.close-labeling", label: "Focus Closed Task", key: "shift+left", description: "Focus on the closed task column", active: true },
+  { id: 800, section: "data_manager", element: "dm.open-labeling", label: "Focus Open Task", key: "shift+right", description: "Focus on the open task column", active: true },
+  { id: 900, section: "data_manager", element: "dm.toggle-bulk-sidebar-minimization", label: "Toggle Bulk Sidebar", key: "shift+.", description: "Minimize or expand bulk actions sidebar", active: true },
+  
+  // Region Management
+  { id: 1000, section: "regions", element: "region:next", label: "Next Region", key: "tab", description: "Go to the next region in the list", active: true },
+  { id: 1001, section: "regions", element: "region:prev", label: "Previous Region", key: "shift+tab", description: "Go to the previous region in the list", active: true },
+  { id: 1100, section: "regions", element: "region:delete-all", label: "Delete All Regions", key: "ctrl+backspace", mac: "command+backspace", description: "Remove all regions", active: true },
+  { id: 1200, section: "regions", element: "region:focus", label: "Focus First Region", key: "enter", mac: "enter", description: "Move focus to the first focusable region", active: true },
+  { id: 1300, section: "regions", element: "region:relation", label: "Create Region Relation", key: "alt+r", mac: "alt+r", description: "Create a relation between selected regions", active: true },
+  { id: 1400, section: "regions", element: "region:visibility", label: "Toggle Region Visibility", key: "alt+h", mac: "alt+h", description: "Show or hide the selected region", active: true },
+  { id: 1500, section: "regions", element: "region:visibility-all", label: "Toggle All Region Visibility", key: "ctrl+h", mac: "ctrl+h", description: "Show or hide all regions", active: true },
+  { id: 1600, section: "regions", element: "region:lock", label: "Lock Region", key: "alt+l", mac: "alt+l", description: "Lock or unlock the selected region", active: true },
+  { id: 1700, section: "regions", element: "region:meta", label: "Edit Region Metadata", key: "alt+m", mac: "alt+m", description: "Edit metadata for selected region", active: true },
+  { id: 1800, section: "regions", element: "region:unselect", label: "Unselect Region", key: "u", mac: "u", description: "Deselect the currently selected region", active: true },
+  { id: 1900, section: "regions", element: "region:exit", label: "Exit Region Mode", key: "escape", mac: "escape", description: "Exit relation mode and unselect region", active: true },
+  { id: 2000, section: "regions", element: "region:delete", label: "Delete Selected Region", key: "backspace", mac: "backspace", description: "Delete currently selected region", active: true },
+  { id: 2100, section: "regions", element: "region:cycle", label: "Cycle Regions", key: "alt+.", mac: "alt+.", description: "Cycle through all regions", active: true },
+  { id: 2200, section: "regions", element: "region:duplicate", label: "Duplicate Region", key: "ctrl+d", mac: "command+d", description: "Create a copy of the selected region", active: true },
+  { id: 2300, section: "regions", element: "segment:delete", label: "Delete Segment", key: "delete", mac: "delete", description: "Delete selected segment", active: true },
+  
+  // Editor - Audio Controls
+  { id: 2400, section: "audio", element: "audio:back", label: "Rewind 1 Second", key: "ctrl+b", mac: "command+b", description: "Rewind the audio by 1 second", active: true },
+  { id: 2500, section: "audio", element: "audio:playpause", label: "Play / Pause Audio", key: "ctrl+p", mac: "command+p", description: "Toggle audio playback", active: true },
+  { id: 2600, section: "audio", element: "audio:step-backward", label: "Step Back", key: "alt+a", mac: "alt+a", description: "Step back one frame", active: true },
+  { id: 2700, section: "audio", element: "audio:step-forward", label: "Step Forward", key: "alt+d", mac: "alt+d", description: "Step forward one frame", active: true },
+
+  // Editor - Video Controls
+  { id: 2800, section: "video", element: "media:playpause", label: "Play / Pause Video", key: "ctrl+alt+space", mac: "control+space", description: "Toggle video playback", active: true },
+  { id: 2900, section: "video", element: "media:step-backward", label: "Step Back", key: "alt+left", mac: "alt+left", description: "Step one frame backward", active: true },
+  { id: 3000, section: "video", element: "media:step-forward", label: "Step Forward", key: "alt+right", mac: "alt+right", description: "Step one frame forward", active: true },
+  { id: 3100, section: "video", element: "video:keyframe-backward", label: "Previous Keyframe", key: "ctrl+alt+left", mac: "ctrl+alt+left", description: "Jump to previous keyframe", active: true },
+  { id: 3200, section: "video", element: "video:keyframe-forward", label: "Next Keyframe", key: "ctrl+alt+right", mac: "ctrl+alt+right", description: "Jump to next keyframe", active: true },
+  { id: 3300, section: "video", element: "video:backward", label: "Seek Backward", key: "alt+left", mac: "alt+left", description: "Seek video backward", active: true },
+  { id: 3400, section: "video", element: "video:rewind", label: "First Frame", key: "shift+ctrl+alt+left", mac: "shift+ctrl+alt+left", description: "Jump to first frame", active: true },
+  { id: 3500, section: "video", element: "video:forward", label: "Seek Forward", key: "shift+alt+right", mac: "shift+alt+right", description: "Seek video forward", active: true },
+  { id: 3600, section: "video", element: "video:fastforward", label: "Last Frame", key: "shift+ctrl+alt+right", mac: "shift+ctrl+alt+right", description: "Jump to last frame", active: true },
+  { id: 3700, section: "video", element: "video:hop-backward", label: "Hop Backward", key: "shift+alt+left", mac: "shift+alt+left", description: "Hop backward quickly", active: true },
+  { id: 3800, section: "video", element: "video:hop-forward", label: "Hop Forward", key: "shift+alt+right", mac: "shift+alt+right", description: "Hop forward quickly", active: true },
+
+  // Editor - Time Series Controls
+  { id: 3900, section: "timeseries", element: "ts:grow-left", label: "Extend Left", key: "left", mac: "left", description: "Extend the region to the left", active: true },
+  { id: 4000, section: "timeseries", element: "ts:grow-right", label: "Extend Right", key: "right", mac: "right", description: "Extend the region to the right", active: true },
+  { id: 4100, section: "timeseries", element: "ts:shrink-left", label: "Shrink Left", key: "alt+left", mac: "alt+left", description: "Shrink the region from the left", active: true },
+  { id: 4200, section: "timeseries", element: "ts:shrink-right", label: "Shrink Right", key: "alt+right", mac: "alt+right", description: "Shrink the region from the right", active: true },
+  { id: 4300, section: "timeseries", element: "ts:grow-left-large", label: "Extend Left (Large)", key: "shift+left", mac: "shift+left", description: "Extend region left significantly", active: true },
+  { id: 4400, section: "timeseries", element: "ts:grow-right-large", label: "Extend Right (Large)", key: "shift+right", mac: "shift+right", description: "Extend region right significantly", active: true },
+  { id: 4500, section: "timeseries", element: "ts:shrink-left-large", label: "Shrink Left (Large)", key: "shift+alt+left", mac: "shift+alt+left", description: "Shrink region from left significantly", active: true },
+  { id: 4600, section: "timeseries", element: "ts:shrink-right-large", label: "Shrink Right (Large)", key: "shift+alt+right", mac: "shift+alt+right", description: "Shrink region from right significantly", active: true },
+
+  // Image Gallery Controls
+  { id: 4700, section: "image_gallery", element: "image:prev", label: "Previous Image", key: "ctrl+left", mac: "command+left", description: "View previous image", active: true },
+  { id: 4800, section: "image_gallery", element: "image:next", label: "Next Image", key: "ctrl+right", mac: "command+right", description: "View next image", active: true },
+
+  { id: 5000, section: "tools", element: "tool:zoom-in", label: "Zoom In", key: "ctrl+plus", description: "Zoom in on the image", active: true },
+  { id: 5100, section: "tools", element: "tool:pan-image", label: "Pan Image", key: "H", description: "Pan around the image", active: true },
+  { id: 5200, section: "tools", element: "tool:zoom-to-fit", label: "Zoom to Fit", key: "shift+1", description: "Zoom to fit the full image in view", active: true },
+  { id: 5300, section: "tools", element: "tool:zoom-to-actual", label: "Zoom to 100%", key: "shift+2", description: "Zoom to actual image size (100%)", active: true },
+  { id: 5400, section: "tools", element: "tool:zoom-out", label: "Zoom Out", key: "ctrl+minus", description: "Zoom out of the image", active: true },
+  { id: 5401, section: "tools", element: "tool:move", label: "Move Tool", key: "V", description: "Select the move tool to reposition annotations", active: true },
+  { id: 5402, section: "tools", element: "tool:brush", label: "Brush Tool", key: "B", description: "Select the brush tool", active: true },
+
+  { id: 5500, section: "tools", element: "tool:ellipse", label: "Ellipse Tool", key: "O", description: "Select the ellipse tool", active: true },
+  { id: 5600, section: "tools", element: "tool:eraser", label: "Eraser Tool", key: "E", description: "Select the eraser tool", active: true },
+  { id: 5700, section: "tools", element: "tool:auto-detect", label: "Auto Detect", key: "M", description: "Use the auto-detect tool to automatically suggest regions", active: true },
+  { id: 5900, section: "tools", element: "tool:key-point", label: "Key Point Tool", key: "K", description: "Select the key point annotation tool", active: true },
+  { id: 6000, section: "tools", element: "tool:magic-wand", label: "Magic Wand", key: "W", description: "Select the magic wand tool for smart region selection", active: true },
+  { id: 6100, section: "tools", element: "tool:polygon", label: "Polygon Tool", key: "P", description: "Select the polygon annotation tool", active: true },
+  { id: 6200, section: "tools", element: "tool:rect", label: "Rectangle Tool", key: "R", description: "Select the rectangle annotation tool", active: true },
+  { id: 6201, section: "tools", element: "tool:rect-3point", label: "3-Point Rectangle", key: "shift+R", description: "Draw a rotated rectangle using 3-point selection", active: true },
+  
+  { id: 6300, section: "tools", element: "tool:rotate-left", label: "Rotate Left", key: "alt+left", description: "Rotate the image 90° to the left", active: true },
+  { id: 6400, section: "tools", element: "tool:rotate-right", label: "Rotate Right", key: "alt+right", description: "Rotate the image 90° to the right", active: true },
+  { id: 6700, section: "tools", element: "tool:decrease-tool", label: "Decrease Tool Size", key: "[", description: "Decrease tool size", active: true },
+  { id: 6800, section: "tools", element: "tool:increase-tool", label: "Increase Tool Size", key: "]", description: "Increase tool size", active: true }
+];
+
+export const HOTKEY_SECTIONS = [
+    {
+    id: "annotation",
+    title: "Annotation Actions",
+    description: "Shortcuts for common annotation tasks like submit, skip, undo and redo"
+  },
+
+    {
+    id: "data_manager",
+    title: "Data Manager",
+    description: "Shortcuts for navigating and managing tasks in Project's Data Manager"
+    },
+
+    {
+    id: "regions",
+    title: "Region Management",
+    description: "Shortcuts for creating, selecting and manipulating annotation regions"
+  },
+
+  {
+    id: "tools",
+    title: "Tools",
+    description: "Shortcuts for controlling tools panel when labeling images"
+  },
+  
+  {
+    id: "audio",
+    title: "Audio Controls",
+    description: "Shortcuts for controlling audio playback and navigation"
+  },
+  {
+    id: "video",
+    title: "Video Controls", 
+    description: "Shortcuts for controlling video playback and navigation"
+  },
+  {
+    id: "timeseries",
+    title: "Time Series Controls",
+    description: "Shortcuts for manipulating time series data regions"
+  },
+  {
+    id: "image_gallery",
+    title: "Image Gallery Navigation",
+    description: "Shortcuts for navigating between images in multi-image tasks"
+  },
+]
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/PersonalInfo.tsx b/web/libs/app-common/src/pages/AccountSettings/sections/PersonalInfo.tsx
index 244f94865bf2..14949ae52eed 100644
--- a/web/libs/app-common/src/pages/AccountSettings/sections/PersonalInfo.tsx
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/PersonalInfo.tsx
@@ -165,3 +165,4 @@ export const PersonalInfo = () => {
     </div>
   );
 };
+
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/index.tsx b/web/libs/app-common/src/pages/AccountSettings/sections/index.tsx
index 653ee016d620..a04247726497 100644
--- a/web/libs/app-common/src/pages/AccountSettings/sections/index.tsx
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/index.tsx
@@ -2,6 +2,7 @@ import { PersonalInfo } from "./PersonalInfo";
 import { EmailPreferences } from "./EmailPreferences";
 import { PersonalAccessToken, PersonalAccessTokenDescription } from "./PersonalAccessToken";
 import { MembershipInfo } from "./MembershipInfo";
+import { HotkeysManager } from "./Hotkeys";
 import type React from "react";
 import { PersonalJWTToken } from "./PersonalJWTToken";
 import type { AuthTokenSettings } from "../types";
@@ -21,6 +22,12 @@ export const accountSettingsSections = (settings: AuthTokenSettings): SectionTyp
       id: "personal-info",
       component: PersonalInfo,
     },
+    {
+      title: "Hotkeys",
+      id: "hotkeys",
+      component: HotkeysManager,
+      raw: true
+    },
     {
       title: "Email Preferences",
       id: "email-preferences",
diff --git a/web/libs/editor/src/components/SidePanels/Components/LockButton.tsx b/web/libs/editor/src/components/SidePanels/Components/LockButton.tsx
index 988d2cfcc23c..bf7a9ad34931 100644
--- a/web/libs/editor/src/components/SidePanels/Components/LockButton.tsx
+++ b/web/libs/editor/src/components/SidePanels/Components/LockButton.tsx
@@ -14,7 +14,7 @@ export const LockButton: FC<{
   look?: ButtonProps["look"];
   style?: ButtonProps["style"];
   onClick: () => void;
-}> = observer(({ item, annotation, hovered, locked, hotkey, look, style, onClick }) => {
+}> = observer(({ item, annotation, hovered, locked, hotkey, displayedHotkey, look, style, onClick }) => {
   if (!item) return null;
   const isLocked = locked || item.isReadOnly() || annotation.isReadOnly();
   const isRegionReadonly = item.isReadOnly() && !locked;
@@ -26,7 +26,7 @@ export const LockButton: FC<{
     };
 
     return (
-      <RegionControlButton disabled={isRegionReadonly} onClick={onClick} hotkey={hotkey} look={look} style={styles}>
+	<RegionControlButton disabled={isRegionReadonly} onClick={onClick} displayedHotkey={displayedHotkey} hotkey={hotkey} look={look} style={styles}>
         {isLocked ? <IconLockLocked /> : <IconLockUnlocked />}
       </RegionControlButton>
     );
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionItem.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionItem.tsx
index c22e85bf8066..f8a2c32583d7 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionItem.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionItem.tsx
@@ -137,7 +137,7 @@ const RegionAction: FC<any> = observer(({ region, annotation, editMode, onEditMo
           hovered={true}
           locked={region?.locked}
           onClick={() => region.setLocked(!region.locked)}
-          hotkey="region:lock"
+          displayedHotkey="region:lock"
           look="alt"
           style={{ width: 36, height: 32 }}
         />
diff --git a/web/libs/editor/src/components/Toolbar/Tool.jsx b/web/libs/editor/src/components/Toolbar/Tool.jsx
index 2173521ab3dd..2b95afbdccb8 100644
--- a/web/libs/editor/src/components/Toolbar/Tool.jsx
+++ b/web/libs/editor/src/components/Toolbar/Tool.jsx
@@ -26,16 +26,17 @@ export const Tool = ({
   label,
   shortcut,
   onClick,
-}) => {
+}) => {  
   let currentShortcut = shortcut;
   const dynamic = tool?.dynamic ?? false;
   const { expanded, alignment } = useContext(ToolbarContext);
   const [hovered, setHovered] = useState(false);
 
   const shortcutView = useMemo(() => {
-    if (!isDefined(shortcut)) return null;
-
-    const combos = shortcut.split(",").map((s) => s.trim());
+    const sc = hotkeys.lookupKey(shortcut);
+    if (!isDefined(sc)) return null;
+    
+    const combos = sc.split(",").map((s) => s.trim());
 
     return (
       <Elem name="shortcut">
@@ -60,15 +61,16 @@ export const Tool = ({
 
   useEffect(() => {
     const removeShortcut = () => {
-      if (currentShortcut && hotkeys.hasKey(currentShortcut)) {
-        hotkeys.removeKey(currentShortcut);
+      if (currentShortcut && hotkeys.hasKeyByName(currentShortcut)) {
+        hotkeys.removeNamed(currentShortcut);
       }
     };
 
     removeShortcut();
     currentShortcut = shortcut;
-    if (shortcut && !hotkeys.hasKey(shortcut)) {
-      hotkeys.addKey(
+
+    if (shortcut && !hotkeys.hasKeyByName(shortcut)) {
+      hotkeys.addNamed(
         shortcut,
         () => {
           if (!tool?.disabled && !tool?.annotation?.isDrawing) {
@@ -77,8 +79,7 @@ export const Tool = ({
             }
             onClick?.();
           }
-        },
-        label,
+        }
       );
     }
 
@@ -90,13 +91,13 @@ export const Tool = ({
   useEffect(() => {
     const removeShortcuts = () => {
       Object.keys(extraShortcuts).forEach((key) => {
-        if (hotkeys.hasKey(key)) hotkeys.removeKey(key);
+        if (hotkeys.hasKeyByName(key)) hotkeys.removeNamed(key);
       });
     };
 
     const addShortcuts = () => {
       Object.entries(extraShortcuts).forEach(([key, [label, fn]]) => {
-        if (!hotkeys.hasKey(key)) hotkeys.overwriteKey(key, fn, label);
+        if (!hotkeys.hasKeyByName(key)) hotkeys.overwriteNamed(key, fn, label);
       });
     };
 
diff --git a/web/libs/editor/src/components/Toolbar/Toolbar.jsx b/web/libs/editor/src/components/Toolbar/Toolbar.jsx
index 7e848e3bed94..3844de094203 100644
--- a/web/libs/editor/src/components/Toolbar/Toolbar.jsx
+++ b/web/libs/editor/src/components/Toolbar/Toolbar.jsx
@@ -88,7 +88,7 @@ const SmartTools = observer(({ tools }) => {
           label="Auto-Detect"
           active={hasSelected}
           icon={selected.iconClass}
-          shortcut="M"
+          shortcut="tool:auto-detect"
           extra={
             tools.length > 1 ? (
               <Elem name="smart">
diff --git a/web/libs/editor/src/core/Hotkey.ts b/web/libs/editor/src/core/Hotkey.ts
index 8fde130c1edb..d1417b143bd6 100644
--- a/web/libs/editor/src/core/Hotkey.ts
+++ b/web/libs/editor/src/core/Hotkey.ts
@@ -24,12 +24,12 @@ if (!isFF(FF_MULTI_OBJECT_HOTKEYS)) {
 }
 
 // Validate keymap integrity
-const allowedKeympaKeys = ["key", "mac", "description", "modifier", "modifierDescription"];
+const allowedKeymapKeys = ["key", "mac", "description", "modifier", "modifierDescription", "active"];
 
 const validateKeymap = (keymap: Keymap) => {
   Object.entries(keymap).forEach(([name, settings]) => {
     Object.keys(settings).forEach((key) => {
-      if (!allowedKeympaKeys.includes(key)) {
+      if (!allowedKeymapKeys.includes(key)) {
         throw new Error(`Unknown keymap property ${key} for key ${name}`);
       }
     });
@@ -199,7 +199,7 @@ export const Hotkey = (namespace = "global", description = "Hotkeys") => {
     /**
      * Add key
      */
-    addKey(key: string, func: keymaster.KeyHandler, desc?: string, scope: string = DEFAULT_SCOPE) {
+      addKey(key: string, func: keymaster.KeyHandler, desc?: string, scope: string = DEFAULT_SCOPE) {
       if (!isDefined(key)) return;
 
       if (_hotkeys_map[key]) {
@@ -224,9 +224,9 @@ export const Hotkey = (namespace = "global", description = "Hotkeys") => {
 
             func(...args);
           };
-
+	    
           addKeyHandlerRef(scope, keyName, handler);
-          keymaster(keyName, scope, handler);
+            keymaster(keyName, scope, handler);
         });
     },
 
@@ -273,8 +273,8 @@ export const Hotkey = (namespace = "global", description = "Hotkeys") => {
      */
     addNamed(name: string, func: keymaster.KeyHandler, scope?: string) {
       const hotkey = Hotkey.keymap[name];
-
-      if (isDefined(hotkey)) {
+	if (isDefined(hotkey)) {
+	    
         const shortcut = isMacOS() ? (hotkey.mac ?? hotkey.key) : hotkey.key;
 
         this.addKey(shortcut, func, hotkey.description, scope);
@@ -282,11 +282,22 @@ export const Hotkey = (namespace = "global", description = "Hotkeys") => {
         if (hotkey.modifier) {
           this.addKey(`${hotkey.modifier}+${shortcut}`, func, hotkey.modifierDescription, scope);
         }
+
+	    // if (name == "tool:move")
+	    // 	debugger;
       } else {
         throw new Error(`Unknown named hotkey ${hotkey}`);
       }
     },
 
+
+      lookupKey(name: string) {
+	  const hotkey = Hotkey.keymap[name];
+	  if (isDefined(hotkey)) {
+	      return isMacOS() ? (hotkey.mac ?? hotkey.key) : hotkey.key;
+	  }
+      },
+      
     /**
      * Removed named hotkey
      */
@@ -336,6 +347,23 @@ export const Hotkey = (namespace = "global", description = "Hotkeys") => {
       return isDefined(_hotkeys_map[keyName]);
     },
 
+      hasKeyByName(name: string) {
+	  if (! isDefined(name)) return;
+
+	  const hotkey = Hotkey.keymap[name];
+	  const shortcut = isMacOS() ? (hotkey.mac ?? hotkey.key) : hotkey.key;
+	  
+	  return this.hasKey(shortcut);
+      },
+      
+    hasName(name: string) {
+	if (! isDefined(name)) return;
+
+	const keyName = name.toLowerCase();
+
+	return isDefined(keyName in Hotkey.keymap);
+    },
+      
     getKeys() {
       return Object.keys(_hotkeys_map);
     },
diff --git a/web/libs/editor/src/core/settings/keymap.json b/web/libs/editor/src/core/settings/keymap.json
index 416f7fddb3ab..fce6e96d585c 100644
--- a/web/libs/editor/src/core/settings/keymap.json
+++ b/web/libs/editor/src/core/settings/keymap.json
@@ -192,5 +192,100 @@
     "key": "ctrl+right",
     "mac": "command+right",
     "description": "Next Image"
-  }
+  },
+
+    "tool:zoom-in": {
+	"key": "ctrl+plus",
+	"description": "Zoom in on the image"
+    },
+
+    "tool:pan-image": {
+	"key": "H",
+	"description": "Pan around the image"
+    },
+
+    "tool:zoom-to-fit": {
+	"key": "shift+1",
+	"description": "Zoom to fit the full image in view"
+    },
+
+    "tool:zoom-to-actual": {
+	"key": "shift+2",
+	"description": "Zoom to actual image size (100%)"
+    },
+
+    "tool:zoom-out": {
+	"key": "ctrl+minus",
+	"description": "Zoom out of the image"
+    },
+
+    "tool:ellipse": {
+	"key": "O",
+	"description": "Select the ellipse tool"
+    },
+
+    "tool:eraser": {
+	"key": "E",
+	"description": "Select the eraser tool"
+    },
+
+    "tool:auto-detect": {
+	"key": "M",
+	"description": "Use the auto-detect tool to automatically suggest regions"
+    },
+
+    "tool:rect-3point": {
+	"key": "shift+R",
+	"description": "Draw a rotated rectangle using 3-point selection"
+    },
+    
+    "tool:key-point": {
+	"key": "K",
+	"description": "Select the key point annotation tool"
+    },
+
+    "tool:magic-wand": {
+	"key": "W",
+	"description": "Select the magic wand tool for smart region selection"
+    },
+
+    "tool:polygon": {
+	"key": "P",
+	"description": "Select the polygon annotation tool"
+    },
+
+    "tool:rect": {
+	"key": "R",
+	"description": "Select the rectangle annotation tool"
+    },
+
+    "tool:rotate-left": {
+	"key": "alt+left",
+	"description": "Rotate the image 90° to the left"
+    },
+
+    "tool:rotate-right": {
+	"key": "alt+right",
+	"description": "Rotate the image 90° to the right"
+    },
+
+    "tool:move": {
+	"key": "V",
+	"description": "Select the move tool to reposition annotations"
+    },
+    
+    "tool:brush": {
+	"key": "B",
+	"description": "Select the brush tool"
+    },
+
+    "tool:decrease-tool": {
+	"key": "[",
+	"description": "Decrease tool size"
+    },
+
+    "tool:increase-tool": {
+	"key": "]",
+	"description": "Increase tool size"
+    }
 }
diff --git a/web/libs/editor/src/stores/Annotation/Annotation.js b/web/libs/editor/src/stores/Annotation/Annotation.js
index 5de54ce74966..4ccbb4454081 100644
--- a/web/libs/editor/src/stores/Annotation/Annotation.js
+++ b/web/libs/editor/src/stores/Annotation/Annotation.js
@@ -489,6 +489,12 @@ const _Annotation = types
       self.regionStore.clearSelection();
     },
 
+    lockSelectedRegions() {
+      self.selectedRegions.forEach((region) => {
+        region.setLocked(!region.locked);
+      });
+    },
+    
     hideSelectedRegions() {
       self.selectedRegions.forEach((region) => {
         region.toggleHidden();
diff --git a/web/libs/editor/src/stores/AppStore.js b/web/libs/editor/src/stores/AppStore.js
index e0adf9be1e46..cccfc2682542 100644
--- a/web/libs/editor/src/stores/AppStore.js
+++ b/web/libs/editor/src/stores/AppStore.js
@@ -439,6 +439,19 @@ export default types
         }
       });
 
+      hotkeys.addNamed("region:lock", () => {
+        const c = self.annotationStore.selected;
+
+        if (c && !c.isLinkingMode) {
+	  c.lockSelectedRegions();
+        }
+      });
+
+      hotkeys.addNamed("region:next", () => {
+	const c = self.annotationStore.selected;
+	
+      });
+      
       hotkeys.addNamed("region:visibility-all", () => {
         const { selected } = self.annotationStore;
         selected.regionStore.toggleVisibility();
diff --git a/web/libs/editor/src/tools/Brush.jsx b/web/libs/editor/src/tools/Brush.jsx
index 48e1a87228b1..005d908d15a4 100644
--- a/web/libs/editor/src/tools/Brush.jsx
+++ b/web/libs/editor/src/tools/Brush.jsx
@@ -51,7 +51,7 @@ const _Tool = types
   .model("BrushTool", {
     strokeWidth: types.optional(types.number, 15),
     group: "segmentation",
-    shortcut: "B",
+    shortcut: "tool:brush",
     smart: true,
     unselectRegionOnToolChange: false,
   })
@@ -90,13 +90,13 @@ const _Tool = types
     },
     get extraShortcuts() {
       return {
-        "[": [
+        "tool:decrease-tool": [
           "Decrease size",
           () => {
             self.setStroke(clamp(self.strokeWidth - 5, MIN_SIZE, MAX_SIZE));
           },
         ],
-        "]": [
+        "tool:increase-tool": [
           "Increase size",
           () => {
             self.setStroke(clamp(self.strokeWidth + 5, MIN_SIZE, MAX_SIZE));
diff --git a/web/libs/editor/src/tools/Ellipse.js b/web/libs/editor/src/tools/Ellipse.js
index 30eeb8370cbd..a1f47b8d0f90 100644
--- a/web/libs/editor/src/tools/Ellipse.js
+++ b/web/libs/editor/src/tools/Ellipse.js
@@ -8,7 +8,7 @@ import { NodeViews } from "../components/Node/Node";
 const _Tool = types
   .model("EllipseTool", {
     group: "segmentation",
-    shortcut: "O",
+    shortcut: "tool:ellipse",
   })
   .views((self) => {
     const Super = {
diff --git a/web/libs/editor/src/tools/Erase.jsx b/web/libs/editor/src/tools/Erase.jsx
index 1cb9ce2737f6..a83fc567abe4 100644
--- a/web/libs/editor/src/tools/Erase.jsx
+++ b/web/libs/editor/src/tools/Erase.jsx
@@ -32,7 +32,7 @@ const ToolView = observer(({ item }) => {
     <Tool
       label="Eraser"
       ariaLabel="eraser"
-      shortcut="E"
+      shortcut="tool:eraser"
       active={item.selected}
       extraShortcuts={item.extraShortcuts}
       tool={item}
@@ -84,13 +84,13 @@ const _Tool = types
     },
     get extraShortcuts() {
       return {
-        "[": [
+        "tool:decrease-tool": [
           "Decrease size",
           () => {
             self.setStroke(clamp(self.strokeWidth - 5, MIN_SIZE, MAX_SIZE));
           },
         ],
-        "]": [
+        "tool:increase-tool": [
           "Increase size",
           () => {
             self.setStroke(clamp(self.strokeWidth + 5, MIN_SIZE, MAX_SIZE));
diff --git a/web/libs/editor/src/tools/KeyPoint.js b/web/libs/editor/src/tools/KeyPoint.js
index 4d5938c1c48f..3c9590e0e752 100644
--- a/web/libs/editor/src/tools/KeyPoint.js
+++ b/web/libs/editor/src/tools/KeyPoint.js
@@ -10,7 +10,7 @@ const _Tool = types
   .model("KeyPointTool", {
     default: types.optional(types.boolean, true),
     group: "segmentation",
-    shortcut: "K",
+    shortcut: "tool:key-point",
     smart: true,
   })
   .views(() => ({
diff --git a/web/libs/editor/src/tools/MagicWand.jsx b/web/libs/editor/src/tools/MagicWand.jsx
index 7ce5b7250a03..dca92a8488f8 100644
--- a/web/libs/editor/src/tools/MagicWand.jsx
+++ b/web/libs/editor/src/tools/MagicWand.jsx
@@ -70,7 +70,7 @@ const ToolView = observer(({ item }) => {
     <Tool
       label="Magic Wand"
       ariaLabel="magicwand"
-      shortcut="W"
+      shortcut="tool:magic-wand"
       active={item.selected}
       icon={item.iconClass}
       tool={item}
@@ -86,7 +86,7 @@ const ToolView = observer(({ item }) => {
 const _Tool = types
   .model("MagicWandTool", {
     group: "segmentation",
-    shortcut: "W",
+    shortcut: "tool:magic-wand",
     smart: true,
     unselectRegionOnToolChange: false,
   })
diff --git a/web/libs/editor/src/tools/Polygon.js b/web/libs/editor/src/tools/Polygon.js
index 34f48289e60c..27a1fe79420d 100644
--- a/web/libs/editor/src/tools/Polygon.js
+++ b/web/libs/editor/src/tools/Polygon.js
@@ -9,7 +9,7 @@ import { observe } from "mobx";
 const _Tool = types
   .model("PolygonTool", {
     group: "segmentation",
-    shortcut: "P",
+    shortcut: "tool:polygon",
   })
   .views((self) => {
     const Super = {
diff --git a/web/libs/editor/src/tools/Rect.js b/web/libs/editor/src/tools/Rect.js
index fe3313e86558..89cbf3d21804 100644
--- a/web/libs/editor/src/tools/Rect.js
+++ b/web/libs/editor/src/tools/Rect.js
@@ -11,7 +11,7 @@ const _BaseNPointTool = types
   .model("BaseNTool", {
     group: "segmentation",
     smart: true,
-    shortcut: "R",
+    shortcut: "tool:rect",
   })
   .views((self) => {
     const Super = {
@@ -74,7 +74,7 @@ const _BaseNPointTool = types
 
 const _Tool = types
   .model("RectangleTool", {
-    shortcut: "R",
+    shortcut: "tool:rect",
   })
   .views((self) => ({
     get viewTooltip() {
@@ -87,7 +87,7 @@ const _Tool = types
 
 const _Tool3Point = types
   .model("Rectangle3PointTool", {
-    shortcut: "shift+R",
+    shortcut: "tool:rect-3point",
   })
   .views((self) => ({
     get viewTooltip() {
diff --git a/web/libs/editor/src/tools/Rotate.jsx b/web/libs/editor/src/tools/Rotate.jsx
index df44ff882da5..eedec4d3cab5 100644
--- a/web/libs/editor/src/tools/Rotate.jsx
+++ b/web/libs/editor/src/tools/Rotate.jsx
@@ -14,7 +14,7 @@ const ToolView = observer(({ item }) => {
         icon={<IconRotateLeftTool />}
         ariaLabel="rotate-left"
         label="Rotate Left"
-        shortcut="alt+left"
+        shortcut="tool:rotate-left"
         onClick={() => {
           item.rotate(-90);
         }}
@@ -24,7 +24,7 @@ const ToolView = observer(({ item }) => {
         icon={<IconRotateRightTool />}
         ariaLabel="rotate-right"
         label="Rotate Right"
-        shortcut="alt+right"
+        shortcut="tool:rotate-right"
         onClick={() => {
           item.rotate(90);
         }}
diff --git a/web/libs/editor/src/tools/Selection.js b/web/libs/editor/src/tools/Selection.js
index a49da4cb2210..89c96558401c 100644
--- a/web/libs/editor/src/tools/Selection.js
+++ b/web/libs/editor/src/tools/Selection.js
@@ -26,7 +26,7 @@ const ToolView = observer(({ item }) => {
 
 const _Tool = types
   .model("SelectionTool", {
-    shortcut: "V",
+    shortcut: "tool:move",
     group: "control",
   })
   .views((self) => {
diff --git a/web/libs/editor/src/tools/Zoom.jsx b/web/libs/editor/src/tools/Zoom.jsx
index 2f937b5f8f67..dd8226df12eb 100644
--- a/web/libs/editor/src/tools/Zoom.jsx
+++ b/web/libs/editor/src/tools/Zoom.jsx
@@ -16,7 +16,7 @@ const ToolView = observer(({ item }) => {
         icon={<IconHandTool />}
         ariaLabel="pan"
         label="Pan Image"
-        shortcut="H"
+        shortcut="tool:pan-image"
         onClick={() => {
           const sel = item.selected;
 
@@ -27,7 +27,7 @@ const ToolView = observer(({ item }) => {
         icon={<IconZoomIn />}
         ariaLabel="zoom-in"
         label="Zoom In"
-        shortcut="ctrl+plus"
+        shortcut="tool:zoom-in"
         onClick={() => {
           item.handleZoom(1);
         }}
@@ -37,14 +37,14 @@ const ToolView = observer(({ item }) => {
         items={[
           {
             label: "Zoom to fit",
-            shortcut: "shift+1",
+            shortcut: "tool:zoom-to-fit",
             onClick: () => {
               item.sizeToFit();
             },
           },
           {
             label: "Zoom to actual size",
-            shortcut: "shift+2",
+            shortcut: "tool:zoom-to-actual",
             onClick: () => {
               item.sizeToOriginal();
             },
@@ -55,7 +55,7 @@ const ToolView = observer(({ item }) => {
         icon={<IconZoomOut />}
         ariaLabel="zoom-out"
         label="Zoom Out"
-        shortcut="ctrl+minus"
+        shortcut="tool:zoom-out"
         onClick={() => {
           item.handleZoom(-1);
         }}
diff --git a/web/libs/ui/src/assets/icons/hotkeys.svg b/web/libs/ui/src/assets/icons/hotkeys.svg
new file mode 100644
index 000000000000..57f917322f71
--- /dev/null
+++ b/web/libs/ui/src/assets/icons/hotkeys.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 5H15V3H17M17 8H15V6H17M14 5H12V3H14M14 8H12V6H14M14 12H6V10H14M5 5H3V3H5M5 8H3V6H5M6 6H8V8H6M6 3H8V5H6M9 6H11V8H9M9 3H11V5H9M18 0H2C0.89 0 0 0.89 0 2V12C0 12.5304 0.210714 13.0391 0.585786 13.4142C0.960859 13.7893 1.46957 14 2 14H18C18.5304 14 19.0391 13.7893 19.4142 13.4142C19.7893 13.0391 20 12.5304 20 12V2C20 0.89 19.1 0 18 0Z" fill="#898098"/>
+</svg>
diff --git a/web/libs/ui/src/assets/icons/index.ts b/web/libs/ui/src/assets/icons/index.ts
index 1eb8c83888c7..b03c920aaa30 100644
--- a/web/libs/ui/src/assets/icons/index.ts
+++ b/web/libs/ui/src/assets/icons/index.ts
@@ -131,6 +131,7 @@ export { ReactComponent as IconHandTool } from "./hand-tool.svg";
 export { ReactComponent as IconHelp } from "./help.svg";
 export { ReactComponent as IconHistoryRewind } from "./history-rewind.svg";
 export { ReactComponent as IconHome } from "./home.svg";
+export { ReactComponent as IconHotkeys } from "./hotkeys.svg";
 export { ReactComponent as IconHumanSignal } from "./humansignal.svg";
 export { ReactComponent as IconInfo } from "./info.svg";
 export { ReactComponent as IconInfoConfig } from "./info-config.svg";

From 1ebf49ee42e49aa2e8144a0a757949fec889167f Mon Sep 17 00:00:00 2001
From: Michael Malyuk <michael.malyuk@icloud.com>
Date: Sun, 15 Jun 2025 17:13:15 -0700
Subject: [PATCH 02/12] cleaning up the code

Signed-off-by: Michael Malyuk <michael.malyuk@icloud.com>
---
 label_studio/templates/base.html              |   6 +-
 label_studio/users/serializers.py             |   2 +-
 web/apps/labelstudio/src/config/ApiConfig.js  |   1 +
 .../AccountSettings/sections/Hotkeys.jsx      | 118 ++++-
 .../AccountSettings/sections/Hotkeys/Help.jsx | 415 ++++++++++--------
 .../sections/Hotkeys/Import.jsx               | 146 ++++--
 .../AccountSettings/sections/Hotkeys/Item.jsx | 107 +++--
 .../sections/Hotkeys/Section.jsx              | 115 +++--
 .../sections/Hotkeys/defaults.js              | 100 +++--
 web/libs/datamanager/src/sdk/keymap.ts        |  22 +-
 web/libs/editor/src/core/settings/keymap.json | 394 +++++++++--------
 web/libs/ui/src/shad/components/ui/card.tsx   |   2 +-
 12 files changed, 841 insertions(+), 587 deletions(-)

diff --git a/label_studio/templates/base.html b/label_studio/templates/base.html
index d2bf1f800ad3..363c5448a596 100644
--- a/label_studio/templates/base.html
+++ b/label_studio/templates/base.html
@@ -127,7 +127,7 @@
 
   function lookupHotkey (lookup) {
       // Check if custom hotkeys exist and the lookup is in there
-      if (window.APP_SETTINGS?.user.customHotkeys && lookup in window.APP_SETTINGS.user.customHotkeys) {
+      if (window.APP_SETTINGS?.user?.customHotkeys && lookup in window.APP_SETTINGS.user.customHotkeys) {
           const hotkeyValue = window.APP_SETTINGS.user.customHotkeys[lookup];
           
           // If active is explicitly false, return a copy with key set to null
@@ -170,9 +170,7 @@
       avatar: "{{user.avatar_url|safe}}",
       {% endif %}
     },
-
-      lookupHotkey: lookupHotkey,
-      
+    lookupHotkey: lookupHotkey,
     debug: {{settings.DEBUG|yesno:"true,false"}},
     hostname: "{{settings.HOSTNAME}}",
     version: {{ versions|json_dumps_ensure_ascii|safe }},
diff --git a/label_studio/users/serializers.py b/label_studio/users/serializers.py
index 223550426882..8826440fc261 100644
--- a/label_studio/users/serializers.py
+++ b/label_studio/users/serializers.py
@@ -118,7 +118,7 @@ class Meta:
 
 class HotkeysSerializer(serializers.Serializer):
     custom_hotkeys = serializers.DictField(required=True)
-
+    
     def validate_custom_hotkeys(self, custom_hotkeys):
         """
         Validates the hotkey format.
diff --git a/web/apps/labelstudio/src/config/ApiConfig.js b/web/apps/labelstudio/src/config/ApiConfig.js
index 610832a8360c..4dbb48175153 100644
--- a/web/apps/labelstudio/src/config/ApiConfig.js
+++ b/web/apps/labelstudio/src/config/ApiConfig.js
@@ -7,6 +7,7 @@ export const API_CONFIG = {
     updateUserAvatar: "POST:/users/:pk/avatar",
     deleteUserAvatar: "DELETE:/users/:pk/avatar",
     me: "/current-user/whoami",
+    hotkeys: "POST:/current-user/hotkeys",
 
     // Organization
     memberships: "/organizations/:pk/memberships",
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.jsx
index e6cb9983c078..faa7e2110450 100644
--- a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.jsx
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.jsx
@@ -3,7 +3,7 @@ import { ToastType, useToast } from "@humansignal/ui";
 
 // Shadcn UI components
 import { Button } from "@humansignal/ui";
-import { Card, CardContent, CardHeader } from "@humansignal/shad/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@humansignal/shad/components/ui/card";
 import { Badge } from "@humansignal/shad/components/ui/badge";
 import { Skeleton } from "@humansignal/shad/components/ui/skeleton";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@humansignal/shad/components/ui/dialog";
@@ -26,6 +26,7 @@ export const HotkeysManager = () => {
   const [globalEnabled, setGlobalEnabled] = useState(true);
   const [dirtyState, setDirtyState] = useState({});
   const [importDialogOpen, setImportDialogOpen] = useState(false);
+  const [autoTranslatePlatforms, setAutoTranslatePlatforms] = useState(true);
   const [duplicateConfirmDialog, setDuplicateConfirmDialog] = useState({
     open: false,
     hotkeyId: null,
@@ -71,8 +72,12 @@ export const HotkeysManager = () => {
     // Get all modified hotkeys, not just from one section
     const modifiedHotkeys = getModifiedHotkeys(hotkeys);
     
+    // Check if settings changed from defaults
+    const defaultAutoTranslate = true; // Default value
+    const settingsChanged = autoTranslatePlatforms !== defaultAutoTranslate;
+    
     // If nothing was modified, return success without API call
-    if (modifiedHotkeys.length === 0) {
+    if (modifiedHotkeys.length === 0 && !settingsChanged) {
       return { ok: true, data: { message: "No changes to save" } };
     }
     
@@ -88,12 +93,22 @@ export const HotkeysManager = () => {
       };
     });
     
+    // Prepare request body
+    const requestBody = {
+      custom_hotkeys: customHotkeys
+    };
+    
+    // Only include settings if they changed from defaults
+    if (settingsChanged) {
+      requestBody.hotkey_settings = {
+        autoTranslatePlatforms: autoTranslatePlatforms
+      };
+    }
+    
     try {
-      // Call the API to save all modified hotkeys
+      // Call the API to save all modified hotkeys and settings
       const response = await api.callApi('hotkeys', { 
-        body: {
-          custom_hotkeys: customHotkeys
-        }
+        body: requestBody
       });
       
       return {
@@ -137,6 +152,10 @@ export const HotkeysManager = () => {
         window.APP_SETTINGS.user.customHotkeys
       );
       
+      // Load the platform translation setting
+      const platformSetting = window.APP_SETTINGS.user.hotkeySettings?.autoTranslatePlatforms;
+      setAutoTranslatePlatforms(platformSetting !== undefined ? platformSetting : true);
+      
       setIsLoading(true);
       setHotkeys(updatedHotkeys);
       setIsLoading(false);
@@ -201,11 +220,29 @@ export const HotkeysManager = () => {
     setGlobalEnabled(allEnabled);
   };
 
+  // Handle platform translation toggle
+  const handleTogglePlatformTranslation = async () => {
+    const newState = !autoTranslatePlatforms;
+    setAutoTranslatePlatforms(newState);
+    
+    // Mark as having changes
+    setDirtyState({
+      ...dirtyState,
+      settings: true
+    });
+    
+    toast.show({ 
+      message: `Platform translation ${newState ? 'enabled' : 'disabled'}`, 
+      type: ToastType.success 
+    });
+  };
+
   // Handle resetting all hotkeys to defaults
   const handleResetToDefaults = () => {
-    const confirmMessage = hasUnsavedChanges 
-      ? "Are you sure you want to reset all hotkeys to their default values? This will discard all unsaved changes and cannot be undone."
-      : "Are you sure you want to reset all hotkeys to their default values? This cannot be undone.";
+    const hasChanges = hasUnsavedChanges || dirtyState.settings;
+    const confirmMessage = hasChanges 
+      ? "Are you sure you want to reset all hotkeys and settings to their default values? This will discard all unsaved changes and cannot be undone."
+      : "Are you sure you want to reset all hotkeys and settings to their default values? This cannot be undone.";
       
     if (!confirm(confirmMessage)) {
       return;
@@ -213,16 +250,17 @@ export const HotkeysManager = () => {
     
     setHotkeys([...DEFAULT_HOTKEYS]);
     setGlobalEnabled(true);
+    setAutoTranslatePlatforms(true);
     setDirtyState({});
     
     toast.show({ 
-      message: "All hotkeys have been reset to defaults", 
+      message: "All hotkeys and settings have been reset to defaults", 
       type: ToastType.success 
     });
   };
 
   // Check if any section has unsaved changes
-  const hasUnsavedChanges = Object.keys(dirtyState).length > 0;
+  const hasUnsavedChanges = Object.keys(dirtyState).some(key => key !== 'settings');
 
   // Helper function to get section title by ID
   const getSectionTitle = (sectionId) => {
@@ -316,7 +354,7 @@ export const HotkeysManager = () => {
     setIsLoading(true);
     
     try {
-      // Save ALL modified hotkeys, not just this section
+      // Save ALL modified hotkeys and settings, not just this section
       const result = await saveHotkeysToAPI();
 
       if (result.ok) {
@@ -325,19 +363,22 @@ export const HotkeysManager = () => {
         delete newDirtyState[sectionId];
         setDirtyState(newDirtyState);
         
+        const sectionName = sectionId === 'settings' ? 'Settings' : 
+                           HOTKEY_SECTIONS.find(s => s.id === sectionId)?.title;
+        
         toast.show({ 
-          message: `${HOTKEY_SECTIONS.find(s => s.id === sectionId)?.title} shortcuts saved`, 
+          message: `${sectionName} saved`, 
           type: ToastType.success 
         });
       } else {
         toast.show({ 
-          message: `Failed to save shortcuts: ${result.error || "Unknown error"}`, 
+          message: `Failed to save: ${result.error || "Unknown error"}`, 
           type: ToastType.error 
         });
       }
     } catch (error) {
       toast.show({ 
-        message: `Error saving shortcuts: ${error.message}`, 
+        message: `Error saving: ${error.message}`, 
         type: ToastType.error 
       });
     } finally {
@@ -347,11 +388,21 @@ export const HotkeysManager = () => {
 
   // Handle exporting hotkeys
   const handleExportHotkeys = () => {
-    // Create a JSON string of the hotkeys
-    const hotkeyJson = JSON.stringify(hotkeys, null, 2);
+    // Create export data including settings
+    const exportData = {
+      hotkeys: hotkeys,
+      settings: {
+        autoTranslatePlatforms: autoTranslatePlatforms
+      },
+      exportedAt: new Date().toISOString(),
+      version: "1.0"
+    };
+    
+    // Create a JSON string of the export data
+    const exportJson = JSON.stringify(exportData, null, 2);
     
     // Create a blob with the JSON
-    const blob = new Blob([hotkeyJson], { type: 'application/json' });
+    const blob = new Blob([exportJson], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     
     // Create a temporary link and click it to download the file
@@ -369,18 +420,27 @@ export const HotkeysManager = () => {
   };
   
   // Handle importing hotkeys
-  const handleImportHotkeys = async (importedHotkeys) => {
+  const handleImportHotkeys = async (importedData) => {
     try {
       setIsLoading(true);
       
+      // Handle both old format (just hotkeys array) and new format (with settings)
+      const importedHotkeys = Array.isArray(importedData) ? importedData : importedData.hotkeys;
+      const importedSettings = importedData.settings || {};
+      
       // Update local state
       setHotkeys(importedHotkeys);
       
+      // Update settings if provided
+      if (importedSettings.autoTranslatePlatforms !== undefined) {
+        setAutoTranslatePlatforms(importedSettings.autoTranslatePlatforms);
+      }
+      
       // Check if any hotkey is disabled to determine global state
       const allEnabled = importedHotkeys.every(hotkey => hotkey.active);
       setGlobalEnabled(allEnabled);
       
-      // Save all modified hotkeys to API
+      // Save all imported data to API
       const result = await saveHotkeysToAPI();
       
       if (!result.ok) {
@@ -412,7 +472,7 @@ export const HotkeysManager = () => {
               Keyboard Hotkeys
             </h2>
             <p className="text-muted-foreground">
-              Click on any hotkey to edit it. Click "Cancel" to exit editing.
+              Customize your keyboard shortcuts to speed up your workflow. Click on any hotkey below to assign a new key combination that works best for you.
             </p>
           </div>
           <div className="flex gap-3">
@@ -434,6 +494,19 @@ export const HotkeysManager = () => {
         
         {isLoading && hotkeys.length === 0 ? (
           <div className="space-y-3">
+            {/* Platform settings skeleton */}
+            <Card>
+              <CardHeader className="pb-2">
+                <Skeleton className="h-6 w-[250px]" />
+                <Skeleton className="h-4 w-[300px]" />
+              </CardHeader>
+              <CardContent>
+                <Skeleton className="h-5 w-[180px] mb-2" />
+                <Skeleton className="h-4 w-[250px]" />
+              </CardContent>
+            </Card>
+            
+            {/* Hotkey sections skeleton */}
             {HOTKEY_SECTIONS.map(section => (
               <Card key={section.id}>
                 <CardHeader className="pb-2">
@@ -452,7 +525,8 @@ export const HotkeysManager = () => {
             ))}
           </div>
         ) : (
-          <div className="space-y-6">
+          <div className="space-y-6">            
+            {/* Hotkey Sections */}
             {HOTKEY_SECTIONS.map(section => (
               <HotkeySection
                 key={section.id}
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx
index dd3f16a2af99..5139ca1644e5 100644
--- a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx
@@ -1,50 +1,189 @@
-
-import { useCallback, useEffect, useState, useRef } from "react";
 import React from "react";
 import ReactDOM from "react-dom";
 import clsx from "clsx";
-import { ToastType, useToast } from "@humansignal/ui";
-import { API } from "apps/labelstudio/src/providers/ApiProvider";
-import { atomWithMutation } from "jotai-tanstack-query";
-import { useAtomValue } from "jotai";
-
-// Shadcn UI components
 import { Button } from "@humansignal/ui";
-import { Label, Input, Toggle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@humansignal/ui";
+import { KeyboardKey } from "./Key";
+import { DEFAULT_HOTKEYS, HOTKEY_SECTIONS, HOTKEY_SUBGROUPS, URL_TO_SECTION_MAPPING } from "./defaults";
 
-import { Switch } from "@humansignal/shad/components/ui/switch";
-import { Separator } from "@humansignal/shad/components/ui/separator";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@humansignal/shad/components/ui/card";
-import { Badge } from "@humansignal/shad/components/ui/badge";
-import { Skeleton } from "@humansignal/shad/components/ui/skeleton";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@humansignal/shad/components/ui/dialog";
-import { Alert, AlertDescription, AlertTitle } from "@humansignal/shad/components/ui/alert";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@humansignal/shad/components/ui/dropdown-menu";
+/**
+ * Main modal component that displays keyboard shortcuts
+ * Renders shortcuts organized by sections and subgroups
+ */
+const HotkeyHelpModal = ({ sectionsToShow, onClose }) => {
+  /**
+   * Handles backdrop clicks to close modal
+   */
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
 
-import { KeyboardKey } from "./Key";
-import { HotkeyItem } from "./Item";
-import { HotkeySection } from "./Section";
-import { DEFAULT_HOTKEYS, HOTKEY_SECTIONS } from "./defaults";
+  /**
+   * Navigates to hotkey customization page and closes modal
+   */
+  const handleCustomizeClick = () => {
+    window.location.href = "/user/account/hotkeys";
+    onClose();
+  };
 
+  /**
+   * Renders a single hotkey section with its shortcuts
+   */
+  const renderSection = (sectionId) => {
+    const section = HOTKEY_SECTIONS.find(s => s.id === sectionId);
+    if (!section) return null;
 
-// Define a regex mapping from URL patterns to section IDs
-const URL_TO_SECTION_MAPPING = [
-  { regex: /\/projects\/\d+\/data\/?\?.*task=\d+/i, section: ["annotation", "regions"] },
-  { regex: /\/projects\/\d+\/data\/?$/i, section: "data_manager" },
-  
-];
+    const sectionHotkeys = DEFAULT_HOTKEYS.filter(h => h.section === sectionId);
+    if (sectionHotkeys.length === 0) return null;
 
-export const openHotkeyHelp = (sectionOrUrl) => {
+    // Group hotkeys by subgroup for better organization
+    const groupedHotkeys = sectionHotkeys.reduce((groups, hotkey) => {
+      const subgroup = hotkey.subgroup || 'default';
+      if (!groups[subgroup]) {
+        groups[subgroup] = [];
+      }
+      groups[subgroup].push(hotkey);
+      return groups;
+    }, {});
+
+    // Sort subgroups with 'default' always first
+    const subgroups = Object.keys(groupedHotkeys).sort((a, b) => {
+      if (a === 'default') return -1;
+      if (b === 'default') return 1;
+      return a.localeCompare(b);
+    });
+
+    return (
+      <div key={sectionId} className="border border-gray-200 dark:border-gray-700 rounded-lg">
+        {/* Section Header */}
+        <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+          <h3 className="font-medium">{section.title}</h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            {section.description}
+          </p>
+        </div>
+
+        {/* Section Content */}
+        <div className="p-4">
+          <div className="space-y-2">
+            {subgroups.map((subgroup) => (
+              <div 
+                key={subgroup} 
+                className={clsx(
+                  subgroup !== 'default' && 
+                  "mt-4 pt-2 border rounded-md border-gray-200 dark:border-gray-700 p-3"
+                )}
+              >
+                {/* Subgroup Header */}
+                {subgroup !== 'default' && (
+                  <div className="mb-3">
+                    <div className="text-sm font-medium mb-1 capitalize">
+                      {HOTKEY_SUBGROUPS[subgroup]?.title || subgroup}
+                    </div>
+                    {HOTKEY_SUBGROUPS[subgroup]?.description && (
+                      <div className="text-xs text-gray-500 dark:text-gray-400">
+                        {HOTKEY_SUBGROUPS[subgroup].description}
+                      </div>
+                    )}
+                  </div>
+                )}
+                
+                {/* Hotkey Items */}
+                {groupedHotkeys[subgroup].map(hotkey => (
+                  <div
+                    key={`${section.id}-${hotkey.element}`}
+                    className="flex items-center justify-between py-2"
+                  >
+                    <div>
+                      <div className="font-medium">{hotkey.label}</div>
+                      {hotkey.description && (
+                        <div className="text-sm text-gray-600 dark:text-gray-400">
+                          {hotkey.description}
+                        </div>
+                      )}
+                    </div>
+                    <KeyboardKey>{hotkey.key}</KeyboardKey>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div 
+      onClick={handleBackdropClick} 
+      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50"
+    >
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-3xl max-h-[80vh] overflow-hidden w-full mx-4">
+        {/* Modal Header */}
+        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex justify-between items-center">
+            <h2 className="text-lg font-semibold">Available Keyboard Shortcuts</h2>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xl leading-none"
+              aria-label="Close modal"
+            >
+              ×
+            </button>
+          </div>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+            Keyboard shortcuts for this page.&nbsp;
+            <a 
+              href="/user/account/hotkeys" 
+              onClick={(e) => { 
+                e.preventDefault(); 
+                handleCustomizeClick(); 
+              }}
+              className="text-blue-600 hover:underline"
+            >
+              Customize
+            </a>
+          </p>
+        </div>
+        
+        {/* Modal Content */}
+        <div className="px-6 py-4 overflow-y-auto max-h-[60vh]">
+          <div className="space-y-4">
+            {sectionsToShow.map(renderSection)}
+          </div>
+        </div>
+
+        {/* Modal Footer */}
+        <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
+          <div className="flex justify-end">
+            <Button
+              onClick={handleCustomizeClick}
+              variant="neutral"
+            >
+              Customize Hotkeys
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Determines which hotkey sections to display based on URL or explicit section names
+ * @param {string|string[]} sectionOrUrl - URL string, section name, or array of section names
+ * @returns {string[]} Array of section IDs to display
+ */
+const determineSectionsToShow = (sectionOrUrl) => {
   let sectionsToShow = [];
   
-  // If sectionOrUrl is provided
   if (sectionOrUrl) {
-    // Check if it's a URL
+    // Check if input is a URL
     if (sectionOrUrl.startsWith('http') || sectionOrUrl.startsWith('/')) {
-      // Apply regex mapping to identify sections
+      // Apply URL-to-section mapping
       for (const mapping of URL_TO_SECTION_MAPPING) {
         if (mapping.regex.test(sectionOrUrl)) {
-          // If the mapping.section is an array, extend sectionsToShow with it
           if (Array.isArray(mapping.section)) {
             sectionsToShow = [...sectionsToShow, ...mapping.section];
           } else {
@@ -53,15 +192,14 @@ export const openHotkeyHelp = (sectionOrUrl) => {
         }
       }
     } else {
-      // It's a section name or an array of section names
+      // Input is section name(s)
       sectionsToShow = Array.isArray(sectionOrUrl) ? sectionOrUrl : [sectionOrUrl];
     }
   } else {
-    // If nothing is provided, use current URL
-    const currentUrl = window.location.pathname;
+    // Use current URL if no input provided
+    const currentUrl = window.location.pathname + window.location.search;
     for (const mapping of URL_TO_SECTION_MAPPING) {
       if (mapping.regex.test(currentUrl)) {
-        // If the mapping.section is an array, extend sectionsToShow with it
         if (Array.isArray(mapping.section)) {
           sectionsToShow = [...sectionsToShow, ...mapping.section];
         } else {
@@ -74,12 +212,41 @@ export const openHotkeyHelp = (sectionOrUrl) => {
   // Remove duplicates
   sectionsToShow = [...new Set(sectionsToShow)];
 
-  // If no sections identified, show all sections
+  // Show all sections if none were identified
   if (sectionsToShow.length === 0) {
     sectionsToShow = HOTKEY_SECTIONS.map(section => section.id);
   }
 
-  // Create modal root with high z-index
+  return sectionsToShow;
+};
+
+/**
+ * Creates and displays a modal with keyboard shortcuts
+ * Automatically determines which shortcuts to show based on current page or provided sections
+ * 
+ * @param {string|string[]} [sectionOrUrl] - Optional URL or section name(s) to determine which shortcuts to display
+ *                                         - If URL: uses regex mapping to find relevant sections
+ *                                         - If string: shows that specific section
+ *                                         - If array: shows multiple specific sections  
+ *                                         - If undefined: auto-detects from current URL
+ * 
+ * @example
+ * // Show shortcuts for current page
+ * openHotkeyHelp();
+ * 
+ * // Show shortcuts for specific section
+ * openHotkeyHelp('annotation');
+ * 
+ * // Show shortcuts for multiple sections
+ * openHotkeyHelp(['annotation', 'regions']);
+ * 
+ * // Show shortcuts based on URL
+ * openHotkeyHelp('/projects/123/data/?task=456');
+ */
+export const openHotkeyHelp = (sectionOrUrl) => {
+  const sectionsToShow = determineSectionsToShow(sectionOrUrl);
+
+  // Create modal container with high z-index
   const modalRoot = document.createElement('div');
   modalRoot.style.position = 'fixed';
   modalRoot.style.top = '0';
@@ -87,165 +254,39 @@ export const openHotkeyHelp = (sectionOrUrl) => {
   modalRoot.style.width = '100%';
   modalRoot.style.height = '100%';
   modalRoot.style.zIndex = '9999';
-  modalRoot.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
-  modalRoot.style.display = 'flex';
-  modalRoot.style.alignItems = 'center';
-  modalRoot.style.justifyContent = 'center';
   document.body.appendChild(modalRoot);
 
-  // Create a function to remove the modal
+  /**
+   * Cleans up modal DOM elements and event listeners
+   */
   const closeModal = () => {
     ReactDOM.unmountComponentAtNode(modalRoot);
     document.body.removeChild(modalRoot);
+    document.removeEventListener("keydown", handleEscKey);
   };
 
-  // The HotkeyHelpModal component
-  const HotkeyHelpModal = () => {
-    const [open, setOpen] = React.useState(true);
-
-    const handleClose = () => {
-      setOpen(false);
-      setTimeout(closeModal, 300); // Give time for animation to complete
-    };
-
-    // Click outside to close
-    const handleBackdropClick = (e) => {
-      if (e.target === e.currentTarget) {
-        handleClose();
-      }
-    };
-
-    return (
-      <div onClick={handleBackdropClick} className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50">
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-3xl max-h-[80vh] overflow-hidden w-full mx-4">
-          {/* Header */}
-          <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div className="flex justify-between items-center">
-              <h2 className="text-lg font-semibold">Available Keyboard Shortcuts</h2>
-              <button
-                onClick={handleClose}
-                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xl leading-none"
-              >
-                ×
-              </button>
-            </div>
-            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
-              Keyboard shortcuts for this page.&nbsp;
-              <a 
-                href="/user/account/hotkeys" 
-                onClick={() => { handleClose(); return true; }}
-                className="text-blue-600 hover:underline"
-              >
-                Customize
-              </a>
-            </p>
-          </div>
-          
-          {/* Content */}
-          <div className="px-6 py-4 overflow-y-auto max-h-[60vh]">
-            <div className="space-y-4">
-              {sectionsToShow.map(sectionId => {
-                const section = HOTKEY_SECTIONS.find(s => s.id === sectionId);
-                if (!section) return null;
-
-                const sectionHotkeys = DEFAULT_HOTKEYS.filter(h => h.section === sectionId);
-                if (sectionHotkeys.length === 0) return null;
-
-                // Group hotkeys by subgroup
-                const groupedHotkeys = sectionHotkeys.reduce((groups, hotkey) => {
-                  const subgroup = hotkey.subgroup || 'default';
-                  if (!groups[subgroup]) {
-                    groups[subgroup] = [];
-                  }
-                  groups[subgroup].push(hotkey);
-                  return groups;
-                }, {});
-
-                // Get sorted subgroups (with 'default' always first)
-                const subgroups = Object.keys(groupedHotkeys).sort((a, b) => {
-                  if (a === 'default') return -1;
-                  if (b === 'default') return 1;
-                  return a.localeCompare(b);
-                });
-
-                return (
-                  <div key={sectionId} className="border border-gray-200 dark:border-gray-700 rounded-lg">
-                    <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
-                      <h3 className="font-medium">{section.title}</h3>
-                      <p className="text-sm text-gray-600 dark:text-gray-400">{section.description}</p>
-                    </div>
-                    <div className="p-4">
-                      <div className="space-y-2">
-                        {subgroups.map((subgroup, index) => (
-                          <div key={subgroup} className={clsx(
-                            subgroup !== 'default' && "mt-4 pt-2 border rounded-md border-gray-200 dark:border-gray-700 p-3"
-                          )}>
-                            {subgroup !== 'default' && (
-                              <div className="mb-3">
-                                <div className="text-sm font-medium mb-1 capitalize">
-                                  {HOTKEY_SUBGROUPS[subgroup]?.title || subgroup}
-                                </div>
-                                {HOTKEY_SUBGROUPS[subgroup]?.description && (
-                                  <div className="text-xs text-gray-500 dark:text-gray-400">
-                                    {HOTKEY_SUBGROUPS[subgroup].description}
-                                  </div>
-                                )}
-                              </div>
-                            )}
-                            {groupedHotkeys[subgroup].map(hotkey => (
-                              <div
-                                key={`${section.id}-${hotkey.element}`}
-                                className="flex items-center justify-between py-2"
-                              >
-                                <div>
-                                  <div className="font-medium">{hotkey.label}</div>
-                                  {hotkey.description && (
-                                    <div className="text-sm text-gray-600 dark:text-gray-400">{hotkey.description}</div>
-                                  )}
-                                </div>
-                                <KeyboardKey>{hotkey.key}</KeyboardKey>
-                              </div>
-                            ))}
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* Footer */}
-          <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
-            <div className="flex justify-end">
-              <Button
-                onClick={() => {
-                  window.location.href = "/user/account/hotkeys";
-                  handleClose();
-                }}
-                variant="neutral"
-              >
-                Customize Hotkeys
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  // Render the modal
-  ReactDOM.render(<HotkeyHelpModal />, modalRoot);
-
-  // Handle ESC key
-  const handleEsc = (event) => {
+  /**
+   * Handles ESC key press to close modal
+   */
+  const handleEscKey = (event) => {
     if (event.key === "Escape") {
       closeModal();
-      document.removeEventListener("keydown", handleEsc);
     }
   };
-  document.addEventListener("keydown", handleEsc);
 
-  return null;
+  // Set up ESC key listener
+  document.addEventListener("keydown", handleEscKey);
+
+  // Render modal component
+  ReactDOM.render(
+    <HotkeyHelpModal 
+      sectionsToShow={sectionsToShow} 
+      onClose={closeModal} 
+    />, 
+    modalRoot
+  );
+
+  return {
+    close: closeModal
+  };
 };
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Import.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Import.jsx
index 6d24d65b227f..eccb1890cec3 100644
--- a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Import.jsx
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Import.jsx
@@ -1,59 +1,114 @@
-
-import { useCallback, useEffect, useState, useRef } from "react";
-import React from "react";
-import ReactDOM from "react-dom";
-import clsx from "clsx";
-import { ToastType, useToast } from "@humansignal/ui";
-import { API } from "apps/labelstudio/src/providers/ApiProvider";
-import { atomWithMutation } from "jotai-tanstack-query";
-import { useAtomValue } from "jotai";
-
-// Shadcn UI components
+import React, { useState } from "react";
 import { Button } from "@humansignal/ui";
-import { Label, Input, Toggle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@humansignal/ui";
-
-import { Switch } from "@humansignal/shad/components/ui/switch";
-import { Separator } from "@humansignal/shad/components/ui/separator";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@humansignal/shad/components/ui/card";
-import { Badge } from "@humansignal/shad/components/ui/badge";
-import { Skeleton } from "@humansignal/shad/components/ui/skeleton";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@humansignal/shad/components/ui/dialog";
+import { Label } from "@humansignal/ui";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@humansignal/shad/components/ui/dialog";
 import { Alert, AlertDescription, AlertTitle } from "@humansignal/shad/components/ui/alert";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@humansignal/shad/components/ui/dropdown-menu";
 
-// ImportDialog component for importing hotkeys
+/**
+ * ImportDialog - A dialog component for importing hotkey configurations
+ * 
+ * This component allows users to import hotkey configurations by pasting JSON data.
+ * It validates the imported data structure and provides error feedback.
+ * 
+ * @param {ImportDialogProps} props - The component props
+ * @returns {React.ReactElement} The ImportDialog component
+ */
 export const ImportDialog = ({ open, onOpenChange, onImport }) => {
+  // State for the import text input
   const [importText, setImportText] = useState("");
+  // State for validation errors
   const [error, setError] = useState("");
-  
+
+  /**
+   * Validates a single hotkey object structure
+   * @param {Object} hotkey - The hotkey object to validate
+   * @throws {Error} If the hotkey is missing required fields
+   */
+  const validateHotkey = (hotkey) => {
+    const requiredFields = ['id', 'section', 'element', 'label', 'key'];
+    const missingFields = requiredFields.filter(field => !hotkey[field]);
+    
+    if (missingFields.length > 0) {
+      throw new Error(`Missing required fields: ${missingFields.join(', ')}`);
+    }
+  };
+
+  /**
+   * Handles the import process
+   * Parses JSON, validates structure, and calls the onImport callback
+   */
   const handleImport = () => {
     try {
-      // Parse the import text
+      // Clear any previous errors
+      setError("");
+      
+      // Validate input exists
+      if (!importText.trim()) {
+        throw new Error("Please enter JSON data to import");
+      }
+
+      // Parse the JSON
       const hotkeys = JSON.parse(importText);
       
-      // Validate the imported data
+      // Validate it's an array
       if (!Array.isArray(hotkeys)) {
         throw new Error("Invalid format: expected an array of hotkeys");
       }
+
+      // Validate it's not empty
+      if (hotkeys.length === 0) {
+        throw new Error("No hotkeys found in the imported data");
+      }
       
-      // Check if each hotkey has the required fields
-      hotkeys.forEach(hotkey => {
-        if (!hotkey.id || !hotkey.section || !hotkey.element || !hotkey.label || !hotkey.key) {
-          throw new Error("Invalid hotkey format: missing required fields");
+      // Validate each hotkey object
+      hotkeys.forEach((hotkey, index) => {
+        try {
+          validateHotkey(hotkey);
+        } catch (validationError) {
+          throw new Error(`Hotkey at index ${index}: ${validationError.message}`);
         }
       });
       
-      // Call the import function
+      // If validation passes, proceed with import
       onImport(hotkeys);
-      onOpenChange(false);
-      setImportText("");
-      setError("");
+      
+      // Reset the dialog state
+      resetDialogState();
       
     } catch (err) {
-      setError("Invalid JSON format: " + err.message);
+      // Set error message for display
+      setError(err.message);
+    }
+  };
+
+  /**
+   * Resets the dialog to its initial state
+   */
+  const resetDialogState = () => {
+    setImportText("");
+    setError("");
+    onOpenChange(false);
+  };
+
+  /**
+   * Handles dialog cancellation
+   */
+  const handleCancel = () => {
+    resetDialogState();
+  };
+
+  /**
+   * Handles textarea input changes
+   * @param {React.ChangeEvent<HTMLTextAreaElement>} e - The change event
+   */
+  const handleTextareaChange = (e) => {
+    setImportText(e.target.value);
+    // Clear error when user starts typing
+    if (error) {
+      setError("");
     }
   };
-  
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[525px]">
@@ -61,6 +116,7 @@ export const ImportDialog = ({ open, onOpenChange, onImport }) => {
           <DialogTitle>Import Hotkeys</DialogTitle>
           <DialogDescription>
             Paste your exported hotkeys JSON below. This will replace your current hotkeys.
+            Make sure the JSON contains an array of hotkey objects with the required fields.
           </DialogDescription>
         </DialogHeader>
         
@@ -68,23 +124,31 @@ export const ImportDialog = ({ open, onOpenChange, onImport }) => {
           <Label htmlFor="import-json">Hotkeys JSON</Label>
           <textarea
             id="import-json"
-            className="flex min-h-[150px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-            placeholder='[{"id": 1, "section": "annotation-actions", ...}]'
+            className="flex min-h-[150px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
+            placeholder='[{"id": 1, "section": "annotation-actions", "element": "button", "label": "Save", "key": "Ctrl+S"}]'
             value={importText}
-            onChange={(e) => setImportText(e.target.value)}
+            onChange={handleTextareaChange}
+            aria-describedby={error ? "import-error" : undefined}
           />
           
           {error && (
-            <Alert variant="destructive">
-              <AlertTitle>Error</AlertTitle>
+            <Alert variant="destructive" id="import-error">
+              <AlertTitle>Import Error</AlertTitle>
               <AlertDescription>{error}</AlertDescription>
             </Alert>
           )}
         </div>
         
         <DialogFooter>
-          <Button variant="ghost" onClick={() => onOpenChange(false)}>Cancel</Button>
-          <Button onClick={handleImport} disabled={!importText}>Import Hotkeys</Button>
+          <Button variant="ghost" onClick={handleCancel}>
+            Cancel
+          </Button>
+          <Button 
+            onClick={handleImport} 
+            disabled={!importText.trim()}
+          >
+            Import Hotkeys
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Item.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Item.jsx
index c6f65d190500..c1dc38378470 100644
--- a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Item.jsx
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Item.jsx
@@ -1,38 +1,56 @@
 
-import { useCallback, useEffect, useState, useRef } from "react";
-import React from "react";
-import ReactDOM from "react-dom";
+import { useEffect, useState, useRef } from "react";
 import clsx from "clsx";
-import { ToastType, useToast } from "@humansignal/ui";
-import { API } from "apps/labelstudio/src/providers/ApiProvider";
-import { atomWithMutation } from "jotai-tanstack-query";
-import { useAtomValue } from "jotai";
 
-// Shadcn UI components
+// UI components
 import { Button } from "@humansignal/ui";
-import { Label, Input, Toggle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@humansignal/ui";
-
 import { Switch } from "@humansignal/shad/components/ui/switch";
-import { Separator } from "@humansignal/shad/components/ui/separator";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@humansignal/shad/components/ui/card";
-import { Badge } from "@humansignal/shad/components/ui/badge";
-import { Skeleton } from "@humansignal/shad/components/ui/skeleton";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@humansignal/shad/components/ui/dialog";
-import { Alert, AlertDescription, AlertTitle } from "@humansignal/shad/components/ui/alert";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@humansignal/shad/components/ui/dropdown-menu";
-
-import { useAPI } from "apps/labelstudio/src/providers/ApiProvider";
+import { Toggle as UiToggle } from "@humansignal/ui";
 import { KeyboardKey } from "./Key";
 
-import { IconEdit } from "@humansignal/icons";
-
+/**
+ * HotkeyItem component for displaying and editing keyboard shortcuts
+ * 
+ * @param {Object} hotkey - The hotkey configuration object
+ * @param {string} hotkey.id - Unique identifier for the hotkey
+ * @param {string} hotkey.label - Display name for the hotkey
+ * @param {string} hotkey.description - Description of what the hotkey does
+ * @param {string} hotkey.key - Current key combination (e.g., "ctrl+s")
+ * @param {boolean} hotkey.active - Whether the hotkey is enabled
+ * @param {Function} onEdit - Callback when edit mode is triggered
+ * @param {boolean} isEditing - Whether this item is currently in edit mode
+ * @param {Function} onSave - Callback when saving edited hotkey (id, newKey)
+ * @param {Function} onCancel - Callback when canceling edit mode
+ * @param {Function} onToggle - Callback when toggling hotkey active state
+ */
 export const HotkeyItem = ({ hotkey, onEdit, isEditing, onSave, onCancel, onToggle }) => {
   const [editedKey, setEditedKey] = useState(hotkey.key);
   const [keyRecordingMode, setKeyRecordingMode] = useState(false);
   const [error, setError] = useState("");
   const keyRecordingRef = useRef(null);
   
-  // Handle key press in the key input field
+  /**
+   * Auto-start key recording when entering edit mode
+   * Focuses the input and begins listening for key presses immediately
+   */
+  useEffect(() => {
+    if (isEditing) {
+      setKeyRecordingMode(true);
+      setEditedKey("");
+      setError("");
+      // Small delay ensures DOM element is ready for focus
+      setTimeout(() => {
+        if (keyRecordingRef.current) {
+          keyRecordingRef.current.focus();
+        }
+      }, 50);
+    }
+  }, [isEditing]);
+  
+  /**
+   * Handles key press events and builds key combination strings
+   * Captures modifier keys (ctrl, shift, alt, meta) and main key
+   */
   const handleKeyPress = (e) => {
     if (!keyRecordingMode) return;
     
@@ -40,9 +58,10 @@ export const HotkeyItem = ({ hotkey, onEdit, isEditing, onSave, onCancel, onTogg
     
     const { key, ctrlKey, shiftKey, altKey, metaKey } = e.nativeEvent;
     
-    // Skip if it's just a modifier key
+    // Skip if only modifier keys are pressed
     if (['Control', 'Shift', 'Alt', 'Meta'].includes(key)) return;
     
+    // Build key combination array
     let keyCombo = [];
     if (ctrlKey) keyCombo.push('ctrl');
     if (shiftKey) keyCombo.push('shift');
@@ -56,7 +75,9 @@ export const HotkeyItem = ({ hotkey, onEdit, isEditing, onSave, onCancel, onTogg
     setKeyRecordingMode(false);
   };
   
-  // Start recording key combination
+  /**
+   * Manually restart key recording (for when user wants to re-record)
+   */
   const startRecordingKeys = () => {
     setKeyRecordingMode(true);
     setEditedKey("");
@@ -66,17 +87,20 @@ export const HotkeyItem = ({ hotkey, onEdit, isEditing, onSave, onCancel, onTogg
     }
   };
   
-  // Handle save button click
+  /**
+   * Save the edited key combination
+   */
   const handleSave = () => {
     onSave(hotkey.id, editedKey);
   };
-  
-  // If in editing mode, render edit form
+
+  // Render edit mode interface
   if (isEditing) {
     return (
       <div className="py-3 space-y-3 border-b border-border last:border-0">
         <div className="font-medium">{hotkey.label}</div>
         <div className="flex gap-3">
+          {/* Key recording input area */}
           <div 
             ref={keyRecordingRef}
             className={clsx(
@@ -96,11 +120,22 @@ export const HotkeyItem = ({ hotkey, onEdit, isEditing, onSave, onCancel, onTogg
               <span className="text-muted-foreground">Click to set shortcut</span>
             )}
           </div>
+          
+          {/* Action buttons */}
           <div className="flex flex-col gap-2">
-            <Button variant="default" size="sm" onClick={handleSave} disabled={!editedKey || !!error}>
+            <Button 
+              variant="default" 
+              size="sm" 
+              onClick={handleSave} 
+              disabled={!editedKey || !!error}
+            >
               Apply
             </Button>
-            <Button variant="neutral" size="sm" onClick={() => onCancel(hotkey.id)}>
+            <Button 
+              variant="neutral" 
+              size="sm" 
+              onClick={() => onCancel(hotkey.id)}
+            >
               Cancel
             </Button>
           </div>
@@ -112,31 +147,33 @@ export const HotkeyItem = ({ hotkey, onEdit, isEditing, onSave, onCancel, onTogg
     );
   }
   
-  // Otherwise render normal view with new layout: toggle, description, hotkey
+  // Render normal view: toggle switch, label/description, hotkey display
   return (
     <div className={clsx(
       "flex items-center py-3 border-b border-border/10 last:border-0",
       !hotkey.active && "opacity-60"
     )}>
+      {/* Toggle switch */}
       <div className="flex-none mr-4">
-        <Switch 
+        <UiToggle 
           checked={hotkey.active}
-          onCheckedChange={() => onToggle(hotkey.id)}
+          onChange={() => onToggle(hotkey.id)}
           aria-label={`${hotkey.active ? 'Disable' : 'Enable'} ${hotkey.label}`}
         />
       </div>
+      
+      {/* Label and description */}
       <div className="flex-1 mr-4">
         <div className="font-medium">{hotkey.label}</div>
         <div className="text-sm text-muted-foreground">{hotkey.description}</div>
       </div>
+      
+      {/* Current hotkey display (clickable to edit) */}
       <div 
         className="flex items-center gap-2 cursor-pointer hover:opacity-80" 
         onClick={() => onEdit(hotkey.id)}
       >
         <KeyboardKey>{hotkey.key}</KeyboardKey>
-        {/* <div className="px-0.5 py-0.5 bg-muted text-muted-foreground rounded"> */}
-        {/*   <IconEdit className="text-xs" /> */}
-        {/* </div> */}
       </div>
     </div>
   );
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Section.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Section.jsx
index 0e8b38f46513..d6f017ec5af0 100644
--- a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Section.jsx
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Section.jsx
@@ -1,29 +1,57 @@
 
-import { useCallback, useEffect, useState, useRef } from "react";
 import React from "react";
-import ReactDOM from "react-dom";
 import clsx from "clsx";
-import { ToastType, useToast } from "@humansignal/ui";
-import { API } from "apps/labelstudio/src/providers/ApiProvider";
-import { atomWithMutation } from "jotai-tanstack-query";
-import { useAtomValue } from "jotai";
-
-// Shadcn UI components
 import { Button } from "@humansignal/ui";
-import { Label, Input, Toggle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@humansignal/ui";
-
-import { Switch } from "@humansignal/shad/components/ui/switch";
-import { Separator } from "@humansignal/shad/components/ui/separator";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@humansignal/shad/components/ui/card";
-import { Badge } from "@humansignal/shad/components/ui/badge";
-import { Skeleton } from "@humansignal/shad/components/ui/skeleton";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@humansignal/shad/components/ui/dialog";
-import { Alert, AlertDescription, AlertTitle } from "@humansignal/shad/components/ui/alert";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@humansignal/shad/components/ui/dropdown-menu";
-
+import { 
+  Card, 
+  CardContent, 
+  CardHeader, 
+  CardTitle, 
+  CardDescription, 
+  CardFooter 
+} from "@humansignal/shad/components/ui/card";
 import { HotkeyItem } from "./Item";
 
-
+/**
+ * HotkeySection Component
+ * 
+ * Displays a section of hotkeys grouped by subgroups within a card layout.
+ * Provides functionality to edit, toggle, and save hotkeys within the section.
+ * 
+ * @param {Object} props - Component props
+ * @param {Object} props.section - Section configuration object
+ * @param {string} props.section.id - Unique identifier for the section
+ * @param {string} props.section.title - Display title for the section
+ * @param {string} props.section.description - Description text for the section
+ * @param {Array} props.hotkeys - Array of hotkey objects for this section
+ * @param {string} props.hotkeys[].id - Unique identifier for each hotkey
+ * @param {string} [props.hotkeys[].subgroup] - Optional subgroup for organizing hotkeys
+ * @param {string|null} props.editingHotkeyId - ID of currently editing hotkey, null if none
+ * @param {Function} props.onEditHotkey - Callback when user starts editing a hotkey
+ * @param {Function} props.onSaveHotkey - Callback when user saves hotkey changes
+ * @param {Function} props.onCancelEdit - Callback when user cancels hotkey editing
+ * @param {Function} props.onSaveSection - Callback when user saves section changes
+ * @param {Function} props.onToggleHotkey - Callback when user toggles hotkey enabled/disabled
+ * @param {boolean} props.hasChanges - Whether the section has unsaved changes
+ * 
+ * @returns {JSX.Element} Rendered HotkeySection component
+ * 
+ * @example
+ * <HotkeySection
+ *   section={{ id: "editor", title: "Editor", description: "Text editing shortcuts" }}
+ *   hotkeys={[
+ *     { id: "1", subgroup: "navigation", ... },
+ *     { id: "2", subgroup: "editing", ... }
+ *   ]}
+ *   editingHotkeyId={null}
+ *   onEditHotkey={(id) => setEditingId(id)}
+ *   onSaveHotkey={(hotkey) => saveHotkey(hotkey)}
+ *   onCancelEdit={() => setEditingId(null)}
+ *   onSaveSection={(sectionId) => saveSection(sectionId)}
+ *   onToggleHotkey={(id) => toggleHotkey(id)}
+ *   hasChanges={true}
+ * />
+ */
 export const HotkeySection = ({ 
   section, 
   hotkeys, 
@@ -35,7 +63,12 @@ export const HotkeySection = ({
   onToggleHotkey,
   hasChanges 
 }) => {
-  // Group hotkeys by subgroup
+  /**
+   * Groups hotkeys by their subgroup property
+   * Hotkeys without a subgroup are placed in the 'default' group
+   * 
+   * @returns {Object} Object with subgroup names as keys and arrays of hotkeys as values
+   */
   const groupedHotkeys = hotkeys.reduce((groups, hotkey) => {
     const subgroup = hotkey.subgroup || 'default';
     if (!groups[subgroup]) {
@@ -45,37 +78,41 @@ export const HotkeySection = ({
     return groups;
   }, {});
 
-  // Get sorted subgroups (with 'default' always first)
+  /**
+   * Gets sorted subgroup names with 'default' always appearing first
+   * Other subgroups are sorted alphabetically
+   * 
+   * @returns {string[]} Sorted array of subgroup names
+   */
   const subgroups = Object.keys(groupedHotkeys).sort((a, b) => {
     if (a === 'default') return -1;
     if (b === 'default') return 1;
     return a.localeCompare(b);
   });
 
+  /**
+   * Handles the save section button click
+   */
+  const handleSaveSection = () => {
+    onSaveSection(section.id);
+  };
+
   return (
     <Card className="mb-6">
       <CardHeader className="pb-2">
         <CardTitle>{section.title}</CardTitle>
         <CardDescription>{section.description}</CardDescription>
       </CardHeader>
+      
       <CardContent>
         <div>
-          {subgroups.map((subgroup, index) => (
-            <div key={subgroup} className={clsx(
-              subgroup !== 'default' && "mt-4 pt-2 border rounded-md border-border p-3"
-            )}>
-              {subgroup !== 'default' && (
-                <div className="mb-3">
-                  <div className="text-sm font-medium mb-1 capitalize">
-                    {HOTKEY_SUBGROUPS[subgroup]?.title || subgroup}
-                  </div>
-                  {HOTKEY_SUBGROUPS[subgroup]?.description && (
-                    <div className="text-xs text-muted-foreground">
-                      {HOTKEY_SUBGROUPS[subgroup].description}
-                    </div>
-                  )}
-                </div>
+          {subgroups.map((subgroup) => (
+            <div 
+              key={subgroup} 
+              className={clsx(
+                subgroup !== 'default' && "mt-4 pt-2 border rounded-md border-border p-3"
               )}
+            >
               {groupedHotkeys[subgroup].map(hotkey => (
                 <HotkeyItem 
                   key={hotkey.id}
@@ -97,11 +134,11 @@ export const HotkeySection = ({
           )}
         </div>
       </CardContent>
+      
       <CardFooter className="flex justify-end">
         <Button 
           variant="default" 
-          
-          onClick={() => onSaveSection(section.id)}
+          onClick={handleSaveSection}
           disabled={!hasChanges}
         >
           Save
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/defaults.js b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/defaults.js
index 49c686bb7895..9ee930f8d12a 100644
--- a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/defaults.js
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/defaults.js
@@ -1,9 +1,9 @@
 export const DEFAULT_HOTKEYS = [
   // Annotation Controls
-  { id: 100, section: "annotation", element: "annotation:submit", label: "Submit Annotation", key: "ctrl+enter", mac: "command+enter", description: "Submit the current annotation", active: true },
-  { id: 200, section: "annotation", element: "annotation:skip", label: "Skip Task", key: "ctrl+space", mac: "alt+enter", description: "Skip the current task", active: true },
-  { id: 300, section: "annotation", element: "annotation:undo", label: "Undo", key: "ctrl+z", mac: "command+z", description: "Undo last action", active: true },
-  { id: 400, section: "annotation", element: "annotation:redo", label: "Redo", key: "ctrl+shift+z", mac: "command+shift+z", description: "Redo previously undone action", active: true },
+  { id: 100, section: "annotation", element: "annotation:submit", label: "Submit Annotation", key: "ctrl+enter", description: "Submit the current annotation", active: true },
+  { id: 200, section: "annotation", element: "annotation:skip", label: "Skip Task", key: "ctrl+space", description: "Skip the current task", active: true },
+  { id: 300, section: "annotation", element: "annotation:undo", label: "Undo", key: "ctrl+z", description: "Undo last action", active: true },
+  { id: 400, section: "annotation", element: "annotation:redo", label: "Redo", key: "ctrl+shift+z", description: "Redo previously undone action", active: true },
   
   // Data Manager
   { id: 500, section: "data_manager", element: "dm.focus-previous", label: "Focus Previous Task", key: "shift+up", description: "Move focus to the previous task", active: true },
@@ -15,52 +15,52 @@ export const DEFAULT_HOTKEYS = [
   // Region Management
   { id: 1000, section: "regions", element: "region:next", label: "Next Region", key: "tab", description: "Go to the next region in the list", active: true },
   { id: 1001, section: "regions", element: "region:prev", label: "Previous Region", key: "shift+tab", description: "Go to the previous region in the list", active: true },
-  { id: 1100, section: "regions", element: "region:delete-all", label: "Delete All Regions", key: "ctrl+backspace", mac: "command+backspace", description: "Remove all regions", active: true },
-  { id: 1200, section: "regions", element: "region:focus", label: "Focus First Region", key: "enter", mac: "enter", description: "Move focus to the first focusable region", active: true },
-  { id: 1300, section: "regions", element: "region:relation", label: "Create Region Relation", key: "alt+r", mac: "alt+r", description: "Create a relation between selected regions", active: true },
-  { id: 1400, section: "regions", element: "region:visibility", label: "Toggle Region Visibility", key: "alt+h", mac: "alt+h", description: "Show or hide the selected region", active: true },
-  { id: 1500, section: "regions", element: "region:visibility-all", label: "Toggle All Region Visibility", key: "ctrl+h", mac: "ctrl+h", description: "Show or hide all regions", active: true },
-  { id: 1600, section: "regions", element: "region:lock", label: "Lock Region", key: "alt+l", mac: "alt+l", description: "Lock or unlock the selected region", active: true },
-  { id: 1700, section: "regions", element: "region:meta", label: "Edit Region Metadata", key: "alt+m", mac: "alt+m", description: "Edit metadata for selected region", active: true },
-  { id: 1800, section: "regions", element: "region:unselect", label: "Unselect Region", key: "u", mac: "u", description: "Deselect the currently selected region", active: true },
-  { id: 1900, section: "regions", element: "region:exit", label: "Exit Region Mode", key: "escape", mac: "escape", description: "Exit relation mode and unselect region", active: true },
-  { id: 2000, section: "regions", element: "region:delete", label: "Delete Selected Region", key: "backspace", mac: "backspace", description: "Delete currently selected region", active: true },
-  { id: 2100, section: "regions", element: "region:cycle", label: "Cycle Regions", key: "alt+.", mac: "alt+.", description: "Cycle through all regions", active: true },
-  { id: 2200, section: "regions", element: "region:duplicate", label: "Duplicate Region", key: "ctrl+d", mac: "command+d", description: "Create a copy of the selected region", active: true },
-  { id: 2300, section: "regions", element: "segment:delete", label: "Delete Segment", key: "delete", mac: "delete", description: "Delete selected segment", active: true },
+  { id: 1100, section: "regions", element: "region:delete-all", label: "Delete All Regions", key: "ctrl+backspace", description: "Remove all regions", active: true },
+  { id: 1200, section: "regions", element: "region:focus", label: "Focus First Region", key: "enter", description: "Move focus to the first focusable region", active: true },
+  { id: 1300, section: "regions", element: "region:relation", label: "Create Region Relation", key: "alt+r", description: "Create a relation between selected regions", active: true },
+  { id: 1400, section: "regions", element: "region:visibility", label: "Toggle Region Visibility", key: "alt+h", description: "Show or hide the selected region", active: true },
+  { id: 1500, section: "regions", element: "region:visibility-all", label: "Toggle All Region Visibility", key: "ctrl+h", description: "Show or hide all regions", active: true },
+  { id: 1600, section: "regions", element: "region:lock", label: "Lock Region", key: "alt+l", description: "Lock or unlock the selected region", active: true },
+  { id: 1700, section: "regions", element: "region:meta", label: "Edit Region Metadata", key: "alt+m", description: "Edit metadata for selected region", active: true },
+  { id: 1800, section: "regions", element: "region:unselect", label: "Unselect Region", key: "u", description: "Deselect the currently selected region", active: true },
+  { id: 1900, section: "regions", element: "region:exit", label: "Exit Region Mode", key: "escape", description: "Exit relation mode and unselect region", active: true },
+  { id: 2000, section: "regions", element: "region:delete", label: "Delete Selected Region", key: "backspace", description: "Delete currently selected region", active: true },
+  { id: 2100, section: "regions", element: "region:cycle", label: "Cycle Regions", key: "alt+.", description: "Cycle through all regions", active: true },
+  { id: 2200, section: "regions", element: "region:duplicate", label: "Duplicate Region", key: "ctrl+d", description: "Create a copy of the selected region", active: true },
+  { id: 2300, section: "regions", element: "segment:delete", label: "Delete Segment", key: "delete", description: "Delete selected segment", active: true },
   
   // Editor - Audio Controls
-  { id: 2400, section: "audio", element: "audio:back", label: "Rewind 1 Second", key: "ctrl+b", mac: "command+b", description: "Rewind the audio by 1 second", active: true },
-  { id: 2500, section: "audio", element: "audio:playpause", label: "Play / Pause Audio", key: "ctrl+p", mac: "command+p", description: "Toggle audio playback", active: true },
-  { id: 2600, section: "audio", element: "audio:step-backward", label: "Step Back", key: "alt+a", mac: "alt+a", description: "Step back one frame", active: true },
-  { id: 2700, section: "audio", element: "audio:step-forward", label: "Step Forward", key: "alt+d", mac: "alt+d", description: "Step forward one frame", active: true },
+  { id: 2400, section: "audio", element: "audio:back", label: "Rewind 1 Second", key: "ctrl+b", description: "Rewind the audio by 1 second", active: true },
+  { id: 2500, section: "audio", element: "audio:playpause", label: "Play / Pause Audio", key: "ctrl+p", description: "Toggle audio playback", active: true },
+  { id: 2600, section: "audio", element: "audio:step-backward", label: "Step Back", key: "alt+a", description: "Step back one frame", active: true },
+  { id: 2700, section: "audio", element: "audio:step-forward", label: "Step Forward", key: "alt+d", description: "Step forward one frame", active: true },
 
   // Editor - Video Controls
-  { id: 2800, section: "video", element: "media:playpause", label: "Play / Pause Video", key: "ctrl+alt+space", mac: "control+space", description: "Toggle video playback", active: true },
-  { id: 2900, section: "video", element: "media:step-backward", label: "Step Back", key: "alt+left", mac: "alt+left", description: "Step one frame backward", active: true },
-  { id: 3000, section: "video", element: "media:step-forward", label: "Step Forward", key: "alt+right", mac: "alt+right", description: "Step one frame forward", active: true },
-  { id: 3100, section: "video", element: "video:keyframe-backward", label: "Previous Keyframe", key: "ctrl+alt+left", mac: "ctrl+alt+left", description: "Jump to previous keyframe", active: true },
-  { id: 3200, section: "video", element: "video:keyframe-forward", label: "Next Keyframe", key: "ctrl+alt+right", mac: "ctrl+alt+right", description: "Jump to next keyframe", active: true },
-  { id: 3300, section: "video", element: "video:backward", label: "Seek Backward", key: "alt+left", mac: "alt+left", description: "Seek video backward", active: true },
-  { id: 3400, section: "video", element: "video:rewind", label: "First Frame", key: "shift+ctrl+alt+left", mac: "shift+ctrl+alt+left", description: "Jump to first frame", active: true },
-  { id: 3500, section: "video", element: "video:forward", label: "Seek Forward", key: "shift+alt+right", mac: "shift+alt+right", description: "Seek video forward", active: true },
-  { id: 3600, section: "video", element: "video:fastforward", label: "Last Frame", key: "shift+ctrl+alt+right", mac: "shift+ctrl+alt+right", description: "Jump to last frame", active: true },
-  { id: 3700, section: "video", element: "video:hop-backward", label: "Hop Backward", key: "shift+alt+left", mac: "shift+alt+left", description: "Hop backward quickly", active: true },
-  { id: 3800, section: "video", element: "video:hop-forward", label: "Hop Forward", key: "shift+alt+right", mac: "shift+alt+right", description: "Hop forward quickly", active: true },
+  { id: 2800, section: "video", element: "media:playpause", label: "Play / Pause Video", key: "ctrl+alt+space", description: "Toggle video playback", active: true },
+  { id: 2900, section: "video", element: "media:step-backward", label: "Step Back", key: "alt+left", description: "Step one frame backward", active: true },
+  { id: 3000, section: "video", element: "media:step-forward", label: "Step Forward", key: "alt+right", description: "Step one frame forward", active: true },
+  { id: 3100, section: "video", element: "video:keyframe-backward", label: "Previous Keyframe", key: "ctrl+alt+left", description: "Jump to previous keyframe", active: true },
+  { id: 3200, section: "video", element: "video:keyframe-forward", label: "Next Keyframe", key: "ctrl+alt+right", description: "Jump to next keyframe", active: true },
+  { id: 3300, section: "video", element: "video:backward", label: "Seek Backward", key: "alt+left", description: "Seek video backward", active: true },
+  { id: 3400, section: "video", element: "video:rewind", label: "First Frame", key: "shift+ctrl+alt+left", description: "Jump to first frame", active: true },
+  { id: 3500, section: "video", element: "video:forward", label: "Seek Forward", key: "shift+alt+right", description: "Seek video forward", active: true },
+  { id: 3600, section: "video", element: "video:fastforward", label: "Last Frame", key: "shift+ctrl+alt+right", description: "Jump to last frame", active: true },
+  { id: 3700, section: "video", element: "video:hop-backward", label: "Hop Backward", key: "shift+alt+left", description: "Hop backward quickly", active: true },
+  { id: 3800, section: "video", element: "video:hop-forward", label: "Hop Forward", key: "shift+alt+right", description: "Hop forward quickly", active: true },
 
   // Editor - Time Series Controls
-  { id: 3900, section: "timeseries", element: "ts:grow-left", label: "Extend Left", key: "left", mac: "left", description: "Extend the region to the left", active: true },
-  { id: 4000, section: "timeseries", element: "ts:grow-right", label: "Extend Right", key: "right", mac: "right", description: "Extend the region to the right", active: true },
-  { id: 4100, section: "timeseries", element: "ts:shrink-left", label: "Shrink Left", key: "alt+left", mac: "alt+left", description: "Shrink the region from the left", active: true },
-  { id: 4200, section: "timeseries", element: "ts:shrink-right", label: "Shrink Right", key: "alt+right", mac: "alt+right", description: "Shrink the region from the right", active: true },
-  { id: 4300, section: "timeseries", element: "ts:grow-left-large", label: "Extend Left (Large)", key: "shift+left", mac: "shift+left", description: "Extend region left significantly", active: true },
-  { id: 4400, section: "timeseries", element: "ts:grow-right-large", label: "Extend Right (Large)", key: "shift+right", mac: "shift+right", description: "Extend region right significantly", active: true },
-  { id: 4500, section: "timeseries", element: "ts:shrink-left-large", label: "Shrink Left (Large)", key: "shift+alt+left", mac: "shift+alt+left", description: "Shrink region from left significantly", active: true },
-  { id: 4600, section: "timeseries", element: "ts:shrink-right-large", label: "Shrink Right (Large)", key: "shift+alt+right", mac: "shift+alt+right", description: "Shrink region from right significantly", active: true },
+  { id: 3900, section: "timeseries", element: "ts:grow-left", label: "Extend Left", key: "left", description: "Extend the region to the left", active: true },
+  { id: 4000, section: "timeseries", element: "ts:grow-right", label: "Extend Right", key: "right", description: "Extend the region to the right", active: true },
+  { id: 4100, section: "timeseries", element: "ts:shrink-left", label: "Shrink Left", key: "alt+left", description: "Shrink the region from the left", active: true },
+  { id: 4200, section: "timeseries", element: "ts:shrink-right", label: "Shrink Right", key: "alt+right", description: "Shrink the region from the right", active: true },
+  { id: 4300, section: "timeseries", element: "ts:grow-left-large", label: "Extend Left (Large)", key: "shift+left", description: "Extend region left significantly", active: true },
+  { id: 4400, section: "timeseries", element: "ts:grow-right-large", label: "Extend Right (Large)", key: "shift+right", description: "Extend region right significantly", active: true },
+  { id: 4500, section: "timeseries", element: "ts:shrink-left-large", label: "Shrink Left (Large)", key: "shift+alt+left", description: "Shrink region from left significantly", active: true },
+  { id: 4600, section: "timeseries", element: "ts:shrink-right-large", label: "Shrink Right (Large)", key: "shift+alt+right", description: "Shrink region from right significantly", active: true },
 
   // Image Gallery Controls
-  { id: 4700, section: "image_gallery", element: "image:prev", label: "Previous Image", key: "ctrl+left", mac: "command+left", description: "View previous image", active: true },
-  { id: 4800, section: "image_gallery", element: "image:next", label: "Next Image", key: "ctrl+right", mac: "command+right", description: "View next image", active: true },
+  { id: 4700, section: "image_gallery", element: "image:prev", label: "Previous Image", key: "ctrl+left", description: "View previous image", active: true },
+  { id: 4800, section: "image_gallery", element: "image:next", label: "Next Image", key: "ctrl+right", description: "View next image", active: true },
 
   { id: 5000, section: "tools", element: "tool:zoom-in", label: "Zoom In", key: "ctrl+plus", description: "Zoom in on the image", active: true },
   { id: 5100, section: "tools", element: "tool:pan-image", label: "Pan Image", key: "H", description: "Pan around the image", active: true },
@@ -131,3 +131,19 @@ export const HOTKEY_SECTIONS = [
     description: "Shortcuts for navigating between images in multi-image tasks"
   },
 ]
+
+
+/**
+ * URL patterns mapped to their corresponding hotkey sections
+ * Used to automatically determine which shortcuts to display based on current page
+ */
+export const URL_TO_SECTION_MAPPING = [
+  { 
+    regex: /\/projects\/\d+\/data\/?\?.*task=\d+/i, 
+    section: ["annotation", "regions"] 
+  },
+  { 
+    regex: /\/projects\/\d+\/data\/?$/i, 
+    section: "data_manager" 
+  },
+];
diff --git a/web/libs/datamanager/src/sdk/keymap.ts b/web/libs/datamanager/src/sdk/keymap.ts
index 7f923dfe3a37..165503216b8b 100644
--- a/web/libs/datamanager/src/sdk/keymap.ts
+++ b/web/libs/datamanager/src/sdk/keymap.ts
@@ -18,25 +18,5 @@ export const keymap = {
   "dm.toggle-bulk-sidebar-minimization": {
     title: "Toggle bulk sidebar minimization",
     shortcut: "shift+.",
-  },
-  "lsf.save-annotation": {
-    title: "Save results",
-    macos: "cmd+enter",
-    other: "ctrl+enter",
-  },
-  "lsf.reject-task": {
-    title: "Mark task as cancelled",
-    macos: "cmd+shift+enter",
-    other: "ctrl+space",
-  },
-  "lsf.undo": {
-    title: "Undo last action",
-    macos: "cmd+z",
-    other: "ctrl+z",
-  },
-  "lsf.redo": {
-    title: "Redo last action",
-    macos: "cmd+shift+z",
-    other: "ctrl+shidt+z",
-  },
+  }
 };
diff --git a/web/libs/editor/src/core/settings/keymap.json b/web/libs/editor/src/core/settings/keymap.json
index fce6e96d585c..cc4d5eb9ce26 100644
--- a/web/libs/editor/src/core/settings/keymap.json
+++ b/web/libs/editor/src/core/settings/keymap.json
@@ -1,201 +1,206 @@
 {
-  "audio:back": {
-    "key": "ctrl+b",
-    "mac": "command+b",
-    "description": "Back for one second"
-  },
-  "audio:playpause": {
-    "key": "ctrl+p",
-    "mac": "command+p",
-    "description": "Play/pause"
-  },
-  "audio:step-backward": {
-    "key": "alt+a",
-    "description": "Go one step back"
-  },
-  "audio:step-forward": {
-    "key": "alt+d",
-    "description": "Go one step forward"
-  },
-  "ts:grow-left": {
-    "key": "left",
-    "description": "Increase region to the left"
-  },
-  "ts:grow-right": {
-    "key": "right",
-    "description": "Increase region to the right"
-  },
-  "ts:shrink-left": {
-    "key": "alt+left",
-    "description": "Decrease region on the left"
-  },
-  "ts:shrink-right": {
-    "key": "alt+right",
-    "description": "Decrease region on the right"
-  },
-  "ts:grow-left-largre": {
-    "key": "shift+left"
-  },
-  "ts:grow-right-largre": {
-    "key": "shift+right"
-  },
-  "ts:shrink-left-largre": {
-    "key": "shift+alt+left"
-  },
-  "ts:shrink-right-largre": {
-    "key": "shift+alt+right"
-  },
-  "annotation:submit": {
-    "key": "ctrl+enter",
-    "mac": "command+enter",
-    "description": "Submit annotation"
-  },
-  "annotation:skip": {
-    "key": "ctrl+space",
-    "mac": "alt+enter",
-    "description": "Skip task"
-  },
-  "annotation:undo": {
-    "key": "ctrl+z",
-    "mac": "command+z",
-    "description": "Undo"
-  },
-  "annotation:redo": {
-    "key": "ctrl+shift+z",
-    "mac": "command+shift+z",
-    "description": "Redo"
-  },
-  "polygon:undo": {
-    "key": "ctrl+z",
-    "mac": "command+z",
-    "description": "Undo"
-  },
-  "polygon:redo": {
-    "key": "ctrl+shift+z",
-    "mac": "command+shift+z",
-    "description": "Redo"
-  },
-  "region:delete-all": {
-    "key": "ctrl+backspace",
-    "mac": "command+backspace",
-    "description": "Delete all regions"
-  },
-  "region:focus": {
-    "key": "enter",
-    "description": "Focus first focusable region"
-  },
-  "region:relation": {
-    "key": "alt+r",
-    "description": "Create relation between regions"
-  },
-  "region:visibility": {
-    "key": "alt+h",
-    "description": "Toggle selected region visibility"
-  },
-  "region:visibility-all": {
-    "key": "ctrl+h",
-    "mac": "ctrl+h",
-    "description": "Toggle all regions visibility"
-  },
-  "region:lock": {
-    "key": "alt+l",
-    "description": "Lock selected region"
-  },
-  "region:meta": {
-    "key": "alt+m",
-    "description": "Edit selected region meta"
-  },
-  "region:unselect": {
-    "key": "u",
-    "description": "Unselect region"
-  },
-  "region:exit": {
-    "key": "escape",
-    "description": "Exit relation mode, unselect region"
-  },
-  "region:delete": {
-    "key": "backspace",
-    "description": "Delete selected region"
-  },
-  "region:cycle": {
-    "key": "alt+.",
-    "description": "Cycle through regions"
-  },
-  "region:duplicate": {
-    "key": "ctrl+d",
-    "mac": "command+d",
-    "description": "Duplicate selected region"
-  },
-  "segment:delete": {
-    "key": "delete",
-    "description": "Delete selected region"
-  },
-  "media:playpause": {
-    "key": "ctrl+alt+space",
-    "mac": "control+space",
-    "description": "Play/pause"
-  },
-  "media:step-backward": {
-    "key": "alt+left",
-    "description": "Go one step back"
-  },
-  "media:step-forward": {
-    "key": "alt+right",
-    "description": "Go one step forward"
-  },
-  "video:keyframe-backward": {
-    "key": "ctrl+alt+left",
-    "description": "Go to previous keyframe"
-  },
-  "video:keyframe-forward": {
-    "key": "ctrl+alt+right",
-    "description": "Go to next keyframe"
-  },
-  "video:backward": {
-    "key": "alt+left",
-    "description": "Go back"
-  },
-  "video:rewind": {
-    "key": "shift+ctrl+alt+left",
-    "description": "Go to first frame"
-  },
-  "video:forward": {
-    "key": "shift+alt+right",
-    "description": "Go forward"
-  },
-  "video:fastforward": {
-    "key": "shift+ctrl+alt+right",
-    "description": "Go to last frame"
-  },
-  "video:hop-backward": {
-    "key": "shift+alt+left",
-    "description": "Hop Backward"
-  },
-  "video:hop-forward": {
-    "key": "shift+alt+right",
-    "description": "Hop Forward"
-  },
-  "repeater:next-page": {
-    "key": "alt+right",
-    "description": "Next Page"
-  },
-  "repeater:previous-page": {
-    "key": "alt+left",
-    "description": "Previous Page"
-  },
-  "image:prev": {
-    "key": "ctrl+left",
-    "mac": "command+left",
-    "description": "Previous Image"
-  },
-  "image:next": {
-    "key": "ctrl+right",
-    "mac": "command+right",
-    "description": "Next Image"
-  },
+    "audio:back": {
+	"key": "ctrl+b",
+	"mac": "command+b",
+	"description": "Back for one second"
+    },
+    "audio:playpause": {
+	"key": "ctrl+p",
+	"mac": "command+p",
+	"description": "Play/pause"
+    },
+    "audio:step-backward": {
+	"key": "alt+a",
+	"description": "Go one step back"
+    },
+    "audio:step-forward": {
+	"key": "alt+d",
+	"description": "Go one step forward"
+    },
+    "ts:grow-left": {
+	"key": "left",
+	"description": "Increase region to the left"
+    },
+    "ts:grow-right": {
+	"key": "right",
+	"description": "Increase region to the right"
+    },
+    "ts:shrink-left": {
+	"key": "alt+left",
+	"description": "Decrease region on the left"
+    },
+    "ts:shrink-right": {
+	"key": "alt+right",
+	"description": "Decrease region on the right"
+    },
+    "ts:grow-left-largre": {
+	"key": "shift+left"
+    },
+    "ts:grow-right-largre": {
+	"key": "shift+right"
+    },
+    "ts:shrink-left-largre": {
+	"key": "shift+alt+left"
+    },
+    "ts:shrink-right-largre": {
+	"key": "shift+alt+right"
+    },
+    "annotation:submit": {
+	"key": "ctrl+enter",
+	"mac": "command+enter",
+	"description": "Submit annotation"
+    },
+    "annotation:skip": {
+	"key": "ctrl+space",
+	"mac": "alt+enter",
+	"description": "Skip task"
+    },
+    "annotation:undo": {
+	"key": "ctrl+z",
+	"mac": "command+z",
+	"description": "Undo"
+    },
+    "annotation:redo": {
+	"key": "ctrl+shift+z",
+	"mac": "command+shift+z",
+	"description": "Redo"
+    },
+    "polygon:undo": {
+	"key": "ctrl+z",
+	"mac": "command+z",
+	"description": "Undo"
+    },
+    "polygon:redo": {
+	"key": "ctrl+shift+z",
+	"mac": "command+shift+z",
+	"description": "Redo"
+    },
+    "region:delete-all": {
+	"key": "ctrl+backspace",
+	"mac": "command+backspace",
+	"description": "Delete all regions"
+    },
+    "region:focus": {
+	"key": "enter",
+	"description": "Focus first focusable region"
+    },
+    "region:relation": {
+	"key": "alt+r",
+	"description": "Create relation between regions"
+    },
+    "region:visibility": {
+	"key": "alt+h",
+	"description": "Toggle selected region visibility"
+    },
+    "region:visibility-all": {
+	"key": "ctrl+h",
+	"mac": "command+h",
+	"description": "Toggle all regions visibility"
+    },
+    "region:lock": {
+	"key": "alt+l",
+	"description": "Lock selected region"
+    },
+    "region:meta": {
+	"key": "alt+m",
+	"description": "Edit selected region meta"
+    },
+    "region:unselect": {
+	"key": "u",
+	"description": "Unselect region"
+    },
+    "region:exit": {
+	"key": "escape",
+	"description": "Exit relation mode, unselect region"
+    },
+    "region:delete": {
+	"key": "backspace",
+	"description": "Delete selected region"
+    },
+    "region:cycle": {
+	"key": "alt+.",
+	"description": "Cycle through regions"
+    },
+    "region:duplicate": {
+	"key": "ctrl+d",
+	"mac": "command+d",
+	"description": "Duplicate selected region"
+    },
+    "segment:delete": {
+	"key": "delete",
+	"description": "Delete selected region"
+    },
+    "media:playpause": {
+	"key": "ctrl+alt+space",
+	"mac": "command+alt+space",
+	"description": "Play/pause"
+    },
+    "media:step-backward": {
+	"key": "alt+left",
+	"description": "Go one step back"
+    },
+    "media:step-forward": {
+	"key": "alt+right",
+	"description": "Go one step forward"
+    },
+    "video:keyframe-backward": {
+	"key": "ctrl+alt+left",
+	"mac": "command+alt+left",
+	"description": "Go to previous keyframe"
+    },
+    "video:keyframe-forward": {
+	"key": "ctrl+alt+right",
+	"mac": "command+alt+right",
+	"description": "Go to next keyframe"
+    },
+    "video:backward": {
+	"key": "alt+left",
+	"description": "Go back"
+    },
+    "video:rewind": {
+	"key": "shift+ctrl+alt+left",
+	"mac": "shift+command+alt+left",
+	"description": "Go to first frame"
+    },
+    "video:forward": {
+	"key": "shift+alt+right",
+	"description": "Go forward"
+    },
+    "video:fastforward": {
+	"key": "shift+ctrl+alt+right",
+	"mac": "shift+command+alt+right",
+	"description": "Go to last frame"
+    },
+    "video:hop-backward": {
+	"key": "shift+alt+left",
+	"description": "Hop Backward"
+    },
+    "video:hop-forward": {
+	"key": "shift+alt+right",
+	"description": "Hop Forward"
+    },
+    "repeater:next-page": {
+	"key": "alt+right",
+	"description": "Next Page"
+    },
+    "repeater:previous-page": {
+	"key": "alt+left",
+	"description": "Previous Page"
+    },
+    "image:prev": {
+	"key": "ctrl+left",
+	"mac": "command+left",
+	"description": "Previous Image"
+    },
+    "image:next": {
+	"key": "ctrl+right",
+	"mac": "command+right",
+	"description": "Next Image"
+    },
 
     "tool:zoom-in": {
 	"key": "ctrl+plus",
+	"mac": "command+plus",
 	"description": "Zoom in on the image"
     },
 
@@ -216,6 +221,7 @@
 
     "tool:zoom-out": {
 	"key": "ctrl+minus",
+	"key": "command+minus",
 	"description": "Zoom out of the image"
     },
 
diff --git a/web/libs/ui/src/shad/components/ui/card.tsx b/web/libs/ui/src/shad/components/ui/card.tsx
index cbcea403bce2..7880f717d899 100644
--- a/web/libs/ui/src/shad/components/ui/card.tsx
+++ b/web/libs/ui/src/shad/components/ui/card.tsx
@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border border-neutral-border bg-neutral-surface text-neutral-content shadow-sm",
+      "rounded-lg border border-neutral-border text-neutral-content shadow-sm",
       className,
     )}
     {...props}

From f87f795dae171c15a79d5aaaa18fdab516f43a05 Mon Sep 17 00:00:00 2001
From: Michael Malyuk <michael.malyuk@icloud.com>
Date: Mon, 16 Jun 2025 19:26:47 -0700
Subject: [PATCH 03/12] fixing small bugs

Signed-off-by: Michael Malyuk <michael.malyuk@icloud.com>
---
 .../src/components/Menubar/Menubar.jsx        |  2 +-
 .../AccountSettings/sections/Hotkeys/Help.jsx |  8 ++---
 .../sections/Hotkeys/defaults.js              |  2 --
 .../src/components/Toolbar/FlyoutMenu.jsx     | 19 +++++-----
 .../editor/src/components/Toolbar/Tool.jsx    |  3 +-
 web/libs/editor/src/core/Hotkey.ts            | 36 +++++++++----------
 .../editor/src/regions/TimeSeriesRegion.js    | 13 +++++--
 web/libs/editor/src/stores/AppStore.js        |  5 ---
 8 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/web/apps/labelstudio/src/components/Menubar/Menubar.jsx b/web/apps/labelstudio/src/components/Menubar/Menubar.jsx
index d3639d0bbd42..08e7e59d4555 100644
--- a/web/apps/labelstudio/src/components/Menubar/Menubar.jsx
+++ b/web/apps/labelstudio/src/components/Menubar/Menubar.jsx
@@ -155,7 +155,7 @@ export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSid
 
           <div className={menubarClass.elem("hotkeys")}>
             <div className={menubarClass.elem("hotkeys-button")}>
-              <a href="#" onClick={() => { openHotkeyHelp() }}><IconHotkeys /></a>
+              <a href="#" onClick={() => { openHotkeyHelp(["annotation", "data_manager", "regions", "tools", "audio", "video", "timeseries", "image_gallery"]) }}><IconHotkeys /></a>
             </div>
           </div>
           
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx
index 5139ca1644e5..7dc596f48877 100644
--- a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx
@@ -157,10 +157,7 @@ const HotkeyHelpModal = ({ sectionsToShow, onClose }) => {
         {/* Modal Footer */}
         <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
           <div className="flex justify-end">
-            <Button
-              onClick={handleCustomizeClick}
-              variant="neutral"
-            >
+            <Button onClick={handleCustomizeClick}>
               Customize Hotkeys
             </Button>
           </div>
@@ -180,7 +177,8 @@ const determineSectionsToShow = (sectionOrUrl) => {
   
   if (sectionOrUrl) {
     // Check if input is a URL
-    if (sectionOrUrl.startsWith('http') || sectionOrUrl.startsWith('/')) {
+    if (typeof sectionOrUrl === 'string' &&
+        (sectionOrUrl.startsWith('http') || sectionOrUrl.startsWith('/'))) {
       // Apply URL-to-section mapping
       for (const mapping of URL_TO_SECTION_MAPPING) {
         if (mapping.regex.test(sectionOrUrl)) {
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/defaults.js b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/defaults.js
index 9ee930f8d12a..b3810486d294 100644
--- a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/defaults.js
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/defaults.js
@@ -13,8 +13,6 @@ export const DEFAULT_HOTKEYS = [
   { id: 900, section: "data_manager", element: "dm.toggle-bulk-sidebar-minimization", label: "Toggle Bulk Sidebar", key: "shift+.", description: "Minimize or expand bulk actions sidebar", active: true },
   
   // Region Management
-  { id: 1000, section: "regions", element: "region:next", label: "Next Region", key: "tab", description: "Go to the next region in the list", active: true },
-  { id: 1001, section: "regions", element: "region:prev", label: "Previous Region", key: "shift+tab", description: "Go to the previous region in the list", active: true },
   { id: 1100, section: "regions", element: "region:delete-all", label: "Delete All Regions", key: "ctrl+backspace", description: "Remove all regions", active: true },
   { id: 1200, section: "regions", element: "region:focus", label: "Focus First Region", key: "enter", description: "Move focus to the first focusable region", active: true },
   { id: 1300, section: "regions", element: "region:relation", label: "Create Region Relation", key: "alt+r", description: "Create a relation between selected regions", active: true },
diff --git a/web/libs/editor/src/components/Toolbar/FlyoutMenu.jsx b/web/libs/editor/src/components/Toolbar/FlyoutMenu.jsx
index 723b65cfb4ae..7453f919de55 100644
--- a/web/libs/editor/src/components/Toolbar/FlyoutMenu.jsx
+++ b/web/libs/editor/src/components/Toolbar/FlyoutMenu.jsx
@@ -1,4 +1,5 @@
 import { Block, Elem } from "../../utils/bem";
+import { isDefined } from "../../utils/utilities";
 import { Fragment, useEffect, useState } from "react";
 import { Hotkey } from "../../core/Hotkey";
 
@@ -10,10 +11,12 @@ const keysDictionary = {
 };
 
 const shortcutView = (shortcut) => {
-  if (!shortcut) return null;
+  const sc = hotkeys.lookupKey(shortcut);
 
-  const combos = shortcut.split(",").map((s) => s.trim());
+  if (!isDefined(sc)) return null;
 
+  const combos = sc.split(",").map((s) => s.trim());
+  
   return (
     <Elem name="shortcut">
       {combos.map((combo, index) => {
@@ -43,8 +46,8 @@ export const FlyoutMenu = ({ items, icon }) => {
       items.forEach((menuItem) => {
         const currentShortcut = menuItem.shortcut;
 
-        if (currentShortcut && hotkeys.hasKey(currentShortcut)) {
-          hotkeys.removeKey(currentShortcut);
+        if (currentShortcut && hotkeys.hasKeyByName(currentShortcut)) {
+          hotkeys.removeNamed(currentShortcut);
         }
       });
     };
@@ -52,14 +55,14 @@ export const FlyoutMenu = ({ items, icon }) => {
       items.forEach((menuItem) => {
         const currentShortcut = menuItem.shortcut;
 
-        if (currentShortcut && !hotkeys.hasKey(currentShortcut)) {
-          hotkeys.addKey(
+        if (currentShortcut && !hotkeys.hasKeyByName(currentShortcut)) {
+          hotkeys.addNamed(
             currentShortcut,
             () => {
+              console.log("clicked");
               menuItem?.onClick?.();
               setClicked(false);
-            },
-            menuItem.label,
+            }
           );
         }
       });
diff --git a/web/libs/editor/src/components/Toolbar/Tool.jsx b/web/libs/editor/src/components/Toolbar/Tool.jsx
index 2b95afbdccb8..de7948fc79a5 100644
--- a/web/libs/editor/src/components/Toolbar/Tool.jsx
+++ b/web/libs/editor/src/components/Toolbar/Tool.jsx
@@ -34,6 +34,7 @@ export const Tool = ({
 
   const shortcutView = useMemo(() => {
     const sc = hotkeys.lookupKey(shortcut);
+
     if (!isDefined(sc)) return null;
     
     const combos = sc.split(",").map((s) => s.trim());
@@ -97,7 +98,7 @@ export const Tool = ({
 
     const addShortcuts = () => {
       Object.entries(extraShortcuts).forEach(([key, [label, fn]]) => {
-        if (!hotkeys.hasKeyByName(key)) hotkeys.overwriteNamed(key, fn, label);
+        if (!hotkeys.hasKeyByName(key)) hotkeys.overwriteNamed(key, fn);
       });
     };
 
diff --git a/web/libs/editor/src/core/Hotkey.ts b/web/libs/editor/src/core/Hotkey.ts
index d1417b143bd6..308fe92378e1 100644
--- a/web/libs/editor/src/core/Hotkey.ts
+++ b/web/libs/editor/src/core/Hotkey.ts
@@ -271,24 +271,24 @@ export const Hotkey = (namespace = "global", description = "Hotkeys") => {
     /**
      * Add hotkey from keymap
      */
-    addNamed(name: string, func: keymaster.KeyHandler, scope?: string) {
-      const hotkey = Hotkey.keymap[name];
-	if (isDefined(hotkey)) {
-	    
-        const shortcut = isMacOS() ? (hotkey.mac ?? hotkey.key) : hotkey.key;
-
-        this.addKey(shortcut, func, hotkey.description, scope);
-
-        if (hotkey.modifier) {
-          this.addKey(`${hotkey.modifier}+${shortcut}`, func, hotkey.modifierDescription, scope);
-        }
-
-	    // if (name == "tool:move")
-	    // 	debugger;
-      } else {
-        throw new Error(`Unknown named hotkey ${hotkey}`);
-      }
-    },
+      addNamed(name: string, func: keymaster.KeyHandler, scope?: string) {
+	  const hotkey = Hotkey.keymap[name];
+	  
+	  if (isDefined(hotkey)) {
+	      const shortcut = isMacOS() ? (hotkey.mac ?? hotkey.key) : hotkey.key;
+	      
+              this.addKey(shortcut, func, hotkey.description, scope);
+
+              if (hotkey.modifier) {
+		  this.addKey(`${hotkey.modifier}+${shortcut}`, func, hotkey.modifierDescription, scope);
+              }
+
+	      // if (name == "tool:move")
+	      // 	debugger;
+	  } else {
+              throw new Error(`Unknown named hotkey ${hotkey}`);
+	  }
+      },
 
 
       lookupKey(name: string) {
diff --git a/web/libs/editor/src/regions/TimeSeriesRegion.js b/web/libs/editor/src/regions/TimeSeriesRegion.js
index e8bd89471029..eb47cb373011 100644
--- a/web/libs/editor/src/regions/TimeSeriesRegion.js
+++ b/web/libs/editor/src/regions/TimeSeriesRegion.js
@@ -79,8 +79,17 @@ const Model = types
     },
 
     afterUnselectRegion() {
-      hotkeys.unbindAll();
-
+      [
+	"ts:grow-left",
+	"ts:grow-right",
+	"ts:shrink-left",
+	"ts:shrink-right",
+	"ts:grow-left-largre",
+	"ts:grow-right-largre",
+	"ts:shrink-left-largre",
+	"ts:shrink-right-largre"
+      ].forEach(sc => hotkeys.removeNamed(sc));
+      
       self.parent.updateView();
     },
 
diff --git a/web/libs/editor/src/stores/AppStore.js b/web/libs/editor/src/stores/AppStore.js
index cccfc2682542..f3c424c689a3 100644
--- a/web/libs/editor/src/stores/AppStore.js
+++ b/web/libs/editor/src/stores/AppStore.js
@@ -447,11 +447,6 @@ export default types
         }
       });
 
-      hotkeys.addNamed("region:next", () => {
-	const c = self.annotationStore.selected;
-	
-      });
-      
       hotkeys.addNamed("region:visibility-all", () => {
         const { selected } = self.annotationStore;
         selected.regionStore.toggleVisibility();

From 90fc2cfebe37b8b3a60416aeb7c62761c8df0046 Mon Sep 17 00:00:00 2001
From: Michael Malyuk <michael.malyuk@icloud.com>
Date: Mon, 16 Jun 2025 20:00:44 -0700
Subject: [PATCH 04/12] remove duplicate check

Signed-off-by: Michael Malyuk <michael.malyuk@icloud.com>
---
 label_studio/users/serializers.py               | 17 +----------------
 .../pages/AccountSettings/sections/Hotkeys.jsx  |  2 +-
 2 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/label_studio/users/serializers.py b/label_studio/users/serializers.py
index 8826440fc261..a3c13ffdf31e 100644
--- a/label_studio/users/serializers.py
+++ b/label_studio/users/serializers.py
@@ -128,8 +128,6 @@ def validate_custom_hotkeys(self, custom_hotkeys):
         if not isinstance(custom_hotkeys, dict):
             raise serializers.ValidationError("custom_hotkeys must be a dictionary")
     
-        section_hotkeys = {}  # Keep track of hotkeys by section
-    
         for action_key, hotkey_data in custom_hotkeys.items():
             # Validate action key format (section:action)
             if not isinstance(action_key, str) or not action_key:
@@ -161,20 +159,7 @@ def validate_custom_hotkeys(self, custom_hotkeys):
             # Validate active flag if provided
             if 'active' in hotkey_data and not isinstance(active, bool):
                 raise serializers.ValidationError(f"Active flag for '{action_key}' must be a boolean")
-        
-            # Check for duplicate hotkeys within the same section
-            if section not in section_hotkeys:
-                section_hotkeys[section] = []
-            
-            # Only check for duplicates if the hotkey is active
-            if active:
-                if key_combo in section_hotkeys[section]:
-                    raise serializers.ValidationError(
-                        f"Duplicate hotkey '{key_combo}' in section '{section}'. "
-                        f"Each section must have unique hotkeys."
-                    )
-                
-                section_hotkeys[section].append(key_combo)
+                    
             
         return custom_hotkeys
 
diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.jsx
index faa7e2110450..aa0b392d9016 100644
--- a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.jsx
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys.jsx
@@ -301,7 +301,7 @@ export const HotkeysManager = () => {
     // Update the hotkey
     const updatedHotkeys = hotkeys.map(h => {
       if (h.id === hotkeyId) {
-        return { ...h, key: newKey };
+        return { ...h, key: newKey, mac: newKey };
       }
       return h;
     });

From 960aeccf382769b7fa929918913c7628e8c3c6ac Mon Sep 17 00:00:00 2001
From: Michael Malyuk <michael.malyuk@icloud.com>
Date: Mon, 16 Jun 2025 20:04:25 -0700
Subject: [PATCH 05/12] adding tests

Signed-off-by: Michael Malyuk <michael.malyuk@icloud.com>
---
 label_studio/users/tests/test_hotkeys_api.py  | 130 ++++++++++++++++++
 .../users/tests/test_hotkeys_serializer.py    |  88 ++++++++++++
 2 files changed, 218 insertions(+)
 create mode 100644 label_studio/users/tests/test_hotkeys_api.py
 create mode 100644 label_studio/users/tests/test_hotkeys_serializer.py

diff --git a/label_studio/users/tests/test_hotkeys_api.py b/label_studio/users/tests/test_hotkeys_api.py
new file mode 100644
index 000000000000..d991e47c1958
--- /dev/null
+++ b/label_studio/users/tests/test_hotkeys_api.py
@@ -0,0 +1,130 @@
+
+import json
+from django.test import TestCase
+from django.urls import reverse
+from rest_framework.test import APIClient
+from rest_framework import status
+from django.contrib.auth import get_user_model
+
+User = get_user_model()
+
+class UserHotkeysAPITestCase(TestCase):
+    """Tests for the UserHotkeysAPI"""
+    
+    def setUp(self):
+        self.client = APIClient()
+        # Create a test user
+        self.user = User.objects.create_user(
+            username='testuser',
+            email='test@example.com',
+            password='password123'
+        )
+        # Set initial hotkeys
+        self.user.custom_hotkeys = {
+            "editor:save": {"key": "ctrl+s", "active": True},
+            "editor:find": {"key": "ctrl+f", "active": True}
+        }
+        self.user.save()
+        
+        # URL for the hotkeys API
+        self.url = reverse('current-user-hotkeys')  # Adjust based on your URL configuration
+        
+        # Authenticate the test client
+        self.client.force_authenticate(user=self.user)
+        
+        # Valid payload for tests
+        self.valid_payload = {
+            "custom_hotkeys": {
+                "editor:save": {"key": "ctrl+shift+s", "active": True},
+                "editor:new": {"key": "ctrl+n", "active": True}
+            }
+        }
+    
+    def test_update_hotkeys_authenticated(self):
+        """Test updating hotkeys for authenticated user"""
+        response = self.client.post(
+            self.url,
+            data=json.dumps(self.valid_payload),
+            content_type='application/json'
+        )
+        self.assertEqual(response.status_code, status.HTTP_200_OK)
+        self.assertEqual(response.data['custom_hotkeys'], self.valid_payload['custom_hotkeys'])
+        
+        # Verify user data was updated in database
+        user = User.objects.get(id=self.user.id)
+        self.assertEqual(user.custom_hotkeys, self.valid_payload['custom_hotkeys'])
+    
+    def test_update_hotkeys_unauthenticated(self):
+        """Test updating hotkeys fails for unauthenticated user"""
+        # Logout/un-authenticate the client
+        self.client.force_authenticate(user=None)
+        
+        response = self.client.post(
+            self.url,
+            data=json.dumps(self.valid_payload),
+            content_type='application/json'
+        )
+        self.assertEqual(response.status_code, status.HTTP_401_UNAUTHORIZED)
+    
+    def test_update_hotkeys_invalid_data(self):
+        """Test updating hotkeys with invalid data"""
+        invalid_payload = {
+            "custom_hotkeys": {
+                "editor:save": {"active": True}  # Missing 'key'
+            }
+        }
+        
+        response = self.client.post(
+            self.url,
+            data=json.dumps(invalid_payload),
+            content_type='application/json'
+        )
+        self.assertEqual(response.status_code, status.HTTP_400_BAD_REQUEST)
+    
+    def test_update_hotkeys_partial(self):
+        """Test updating only some hotkeys preserves existing configuration"""
+        partial_update = {
+            "custom_hotkeys": {
+                "editor:save": {"key": "ctrl+alt+s", "active": True}
+            }
+        }
+        
+        response = self.client.post(
+            self.url,
+            data=json.dumps(partial_update),
+            content_type='application/json'
+        )
+        self.assertEqual(response.status_code, status.HTTP_200_OK)
+        
+        # Should completely replace the user's hotkeys, not merge them
+        user = User.objects.get(id=self.user.id)
+        self.assertEqual(user.custom_hotkeys, partial_update['custom_hotkeys'])
+        self.assertNotIn('editor:find', user.custom_hotkeys)
+    
+    def test_empty_hotkeys(self):
+        """Test setting empty hotkeys dictionary"""
+        empty_payload = {
+            "custom_hotkeys": {}
+        }
+        
+        response = self.client.post(
+            self.url,
+            data=json.dumps(empty_payload),
+            content_type='application/json'
+        )
+        self.assertEqual(response.status_code, status.HTTP_200_OK)
+        
+        # User should now have empty hotkeys
+        user = User.objects.get(id=self.user.id)
+        self.assertEqual(user.custom_hotkeys, {})
+    
+    def test_missing_required_field(self):
+        """Test request with missing required field"""
+        invalid_payload = {}  # Missing 'custom_hotkeys'
+        
+        response = self.client.post(
+            self.url,
+            data=json.dumps(invalid_payload),
+            content_type='application/json'
+        )
+        self.assertEqual(response.status_code, status.HTTP_400_BAD_REQUEST)
diff --git a/label_studio/users/tests/test_hotkeys_serializer.py b/label_studio/users/tests/test_hotkeys_serializer.py
new file mode 100644
index 000000000000..4c97612037a3
--- /dev/null
+++ b/label_studio/users/tests/test_hotkeys_serializer.py
@@ -0,0 +1,88 @@
+
+import json
+from django.test import TestCase
+from users.serializers import HotkeysSerializer  # Import from your actual app
+
+class HotkeysSerializerTestCase(TestCase):
+    """Tests for the HotkeysSerializer"""
+    
+    def setUp(self):
+        self.valid_hotkeys = {
+            "editor:save": {"key": "ctrl+s", "active": True},
+            "editor:open": {"key": "ctrl+o", "active": False},
+            "editor:cut": {"key": "ctrl+x"},
+            "navigation:home": {"key": "alt+h", "active": True}
+        }
+        
+        self.serializer_data = {
+            "custom_hotkeys": self.valid_hotkeys
+        }
+    
+    def test_valid_data(self):
+        """Test serializer with valid data"""
+        serializer = HotkeysSerializer(data=self.serializer_data)
+        self.assertTrue(serializer.is_valid())
+    
+    def test_invalid_format_not_dict(self):
+        """Test serializer rejects non-dictionary custom_hotkeys"""
+        data = {"custom_hotkeys": ["not a dictionary"]}
+        serializer = HotkeysSerializer(data=data)
+        self.assertFalse(serializer.is_valid())
+        self.assertIn('custom_hotkeys', serializer.errors)
+    
+    def test_invalid_action_key_format(self):
+        """Test serializer rejects action keys without proper format"""
+        # Missing colon
+        invalid_data = {
+            "custom_hotkeys": {
+                "editorsave": {"key": "ctrl+s"}
+            }
+        }
+        serializer = HotkeysSerializer(data=invalid_data)
+        self.assertFalse(serializer.is_valid())
+        self.assertIn('custom_hotkeys', serializer.errors)
+    
+    def test_empty_action_key(self):
+        """Test serializer rejects empty action keys"""
+        invalid_data = {
+            "custom_hotkeys": {
+                "": {"key": "ctrl+s"}
+            }
+        }
+        serializer = HotkeysSerializer(data=invalid_data)
+        self.assertFalse(serializer.is_valid())
+        self.assertIn('custom_hotkeys', serializer.errors)
+    
+    def test_missing_key_in_hotkey_data(self):
+        """Test serializer rejects hotkey data without 'key'"""
+        invalid_data = {
+            "custom_hotkeys": {
+                "editor:save": {"active": True}  # Missing 'key'
+            }
+        }
+        serializer = HotkeysSerializer(data=invalid_data)
+        self.assertFalse(serializer.is_valid())
+        self.assertIn('custom_hotkeys', serializer.errors)
+    
+    def test_invalid_key_value(self):
+        """Test serializer rejects invalid key values"""
+        invalid_data = {
+            "custom_hotkeys": {
+                "editor:save": {"key": ""}  # Empty key
+            }
+        }
+        serializer = HotkeysSerializer(data=invalid_data)
+        self.assertFalse(serializer.is_valid())
+        self.assertIn('custom_hotkeys', serializer.errors)
+    
+    def test_invalid_active_flag(self):
+        """Test serializer rejects non-boolean active flags"""
+        invalid_data = {
+            "custom_hotkeys": {
+                "editor:save": {"key": "ctrl+s", "active": "yes"}  # Should be boolean
+            }
+        }
+        serializer = HotkeysSerializer(data=invalid_data)
+        self.assertFalse(serializer.is_valid())
+        self.assertIn('custom_hotkeys', serializer.errors)
+    

From 63ba874b8135b7ed4ebfe060d1537f330da7d442 Mon Sep 17 00:00:00 2001
From: Michael Malyuk <michael.malyuk@icloud.com>
Date: Thu, 19 Jun 2025 16:03:54 -0700
Subject: [PATCH 06/12] removing wrong import

---
 .../src/pages/AccountSettings/sections/Hotkeys/Help.jsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx
index 7dc596f48877..2e4c30e8fcd7 100644
--- a/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx
+++ b/web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.jsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import clsx from "clsx";
 import { Button } from "@humansignal/ui";
 import { KeyboardKey } from "./Key";
-import { DEFAULT_HOTKEYS, HOTKEY_SECTIONS, HOTKEY_SUBGROUPS, URL_TO_SECTION_MAPPING } from "./defaults";
+import { DEFAULT_HOTKEYS, HOTKEY_SECTIONS, URL_TO_SECTION_MAPPING } from "./defaults";
 
 /**
  * Main modal component that displays keyboard shortcuts
@@ -79,11 +79,11 @@ const HotkeyHelpModal = ({ sectionsToShow, onClose }) => {
                 {subgroup !== 'default' && (
                   <div className="mb-3">
                     <div className="text-sm font-medium mb-1 capitalize">
-                      {HOTKEY_SUBGROUPS[subgroup]?.title || subgroup}
+                      {HOTKEY_SECTIONS[subgroup]?.title || subgroup}
                     </div>
-                    {HOTKEY_SUBGROUPS[subgroup]?.description && (
+                    {HOTKEY_SECTIONS[subgroup]?.description && (
                       <div className="text-xs text-gray-500 dark:text-gray-400">
-                        {HOTKEY_SUBGROUPS[subgroup].description}
+                        {HOTKEY_SECTIONS[subgroup].description}
                       </div>
                     )}
                   </div>

From 3e3a70ae0059e79651623c921976e04fd33699ce Mon Sep 17 00:00:00 2001
From: Michael Malyuk <michael.malyuk@icloud.com>
Date: Thu, 19 Jun 2025 16:56:38 -0700
Subject: [PATCH 07/12] documenting hotkeys POST api with swagger

---
 label_studio/users/api.py | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/label_studio/users/api.py b/label_studio/users/api.py
index 95982ace79bd..7ffd61e2aa7b 100644
--- a/label_studio/users/api.py
+++ b/label_studio/users/api.py
@@ -298,6 +298,19 @@ def get(self, request, *args, **kwargs):
         return super(UserWhoAmIAPI, self).get(request, *args, **kwargs)
 
 
+@method_decorator(
+    name='post',
+    decorator=swagger_auto_schema(
+        tags=['Users'],
+        x_fern_sdk_group_name='users',
+        x_fern_sdk_method_name='update_hotkeys',
+        x_fern_audiences=['public'],
+        operation_summary='Update user hotkeys',
+        operation_description='Update the custom hotkeys configuration for the current user.',
+        request_body=HotkeysSerializer,
+        responses={200: HotkeysSerializer},
+    ),
+)
 class UserHotkeysAPI(APIView):
     permission_classes = [IsAuthenticated]
 

From 8c034be5d2272a9266d2fdfe35eb9d6bbf8f4b60 Mon Sep 17 00:00:00 2001
From: Michael Malyuk <michael.malyuk@icloud.com>
Date: Fri, 20 Jun 2025 09:48:15 -0700
Subject: [PATCH 08/12] adding missing shad components

---
 web/libs/ui/src/shad/components/ui/alert.tsx  | 66 +++++++++++++++++++
 web/libs/ui/src/shad/components/ui/switch.tsx | 41 ++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 web/libs/ui/src/shad/components/ui/alert.tsx
 create mode 100644 web/libs/ui/src/shad/components/ui/switch.tsx

diff --git a/web/libs/ui/src/shad/components/ui/alert.tsx b/web/libs/ui/src/shad/components/ui/alert.tsx
new file mode 100644
index 000000000000..d2a0907664f7
--- /dev/null
+++ b/web/libs/ui/src/shad/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@humansignal/shad/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/web/libs/ui/src/shad/components/ui/switch.tsx b/web/libs/ui/src/shad/components/ui/switch.tsx
new file mode 100644
index 000000000000..c793d883bc17
--- /dev/null
+++ b/web/libs/ui/src/shad/components/ui/switch.tsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@humansignal/shad/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:bg-slate-300 data-[state=unchecked]:bg-slate-300/80",
+        "dark:data-[state=checked]:bg-slate-700 dark:data-[state=unchecked]:bg-slate-800",
+        "focus-visible:border-ring focus-visible:ring-ring/50",
+        "shadow-md", // Increased shadow for better visibility
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block size-4 rounded-full transition-transform",
+          "data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+          "data-[state=checked]:bg-[rgb(76,95,169)] data-[state=unchecked]:bg-white",
+          "data-[state=checked]:shadow-[0_5px_10px_var(--color-primary-shadow),inset_0_-1px_0_rgba(var(--color-primary-shadow)/10%)]",
+          "dark:data-[state=unchecked]:bg-slate-400",
+          "ring-0"
+        )}
+        style={{
+          '--color-primary-shadow': 'rgba(76, 95, 169, 0.5)'
+        } as React.CSSProperties}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

From 48f881c9db6858d53dcbe1f559b45a529f7b046f Mon Sep 17 00:00:00 2001
From: Michael Malyuk <michael.malyuk@icloud.com>
Date: Fri, 20 Jun 2025 10:55:02 -0700
Subject: [PATCH 09/12] adding radix-switch

---
 web/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/package.json b/web/package.json
index 971b57088195..09ed2a5f6b93 100644
--- a/web/package.json
+++ b/web/package.json
@@ -53,6 +53,7 @@
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-toast": "^1.1.5",
     "@tanstack/query-core": "^5.66.0",
     "@tanstack/react-query": "^4",

From a4624486f69c83b80c236b7b7369b8435a426de9 Mon Sep 17 00:00:00 2001
From: nik <nik@heartex.net>
Date: Sat, 21 Jun 2025 00:18:32 +0100
Subject: [PATCH 10/12] Update lock

---
 web/yarn.lock | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/web/yarn.lock b/web/yarn.lock
index d06e86a716f8..fcf82659188c 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -4262,6 +4262,11 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.1.tgz#fc169732d755c7fbad33ba8d0cd7fd10c90dc8e3"
   integrity sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==
 
+"@radix-ui/primitive@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.2.tgz#83f415c4425f21e3d27914c12b3272a32e3dae65"
+  integrity sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==
+
 "@radix-ui/react-arrow@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
@@ -4300,6 +4305,11 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz#6f766faa975f8738269ebb8a23bad4f5a8d2faec"
   integrity sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==
 
+"@radix-ui/react-compose-refs@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz#a2c4c47af6337048ee78ff6dc0d090b390d2bb30"
+  integrity sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==
+
 "@radix-ui/react-context@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
@@ -4312,6 +4322,11 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
   integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==
 
+"@radix-ui/react-context@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.2.tgz#61628ef269a433382c364f6f1e3788a6dc213a36"
+  integrity sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==
+
 "@radix-ui/react-dialog@^1.1.6":
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz#65b4465e99ad900f28a98eed9a94bb21ec644bf7"
@@ -4530,6 +4545,13 @@
   dependencies:
     "@radix-ui/react-slot" "1.1.2"
 
+"@radix-ui/react-primitive@2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz#db9b8bcff49e01be510ad79893fb0e4cda50f1bc"
+  integrity sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==
+  dependencies:
+    "@radix-ui/react-slot" "1.2.3"
+
 "@radix-ui/react-roving-focus@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"
@@ -4597,6 +4619,13 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.1"
 
+"@radix-ui/react-slot@1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.2.3.tgz#502d6e354fc847d4169c3bc5f189de777f68cfe1"
+  integrity sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+
 "@radix-ui/react-slot@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.1.tgz#ab9a0ffae4027db7dc2af503c223c978706affc3"
@@ -4604,6 +4633,19 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.1"
 
+"@radix-ui/react-switch@^1.2.5":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.2.5.tgz#56c15a4cd219e00b0745ec6b2ea1c0feeb0b21d0"
+  integrity sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.2"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    "@radix-ui/react-use-previous" "1.1.1"
+    "@radix-ui/react-use-size" "1.1.1"
+
 "@radix-ui/react-toast@^1.1.5":
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-toast/-/react-toast-1.1.5.tgz#f5788761c0142a5ae9eb97f0051fd3c48106d9e6"
@@ -4688,6 +4730,21 @@
   dependencies:
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
+"@radix-ui/react-use-controllable-state@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz#905793405de57d61a439f4afebbb17d0645f3190"
+  integrity sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==
+  dependencies:
+    "@radix-ui/react-use-effect-event" "0.0.2"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
+"@radix-ui/react-use-effect-event@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz#090cf30d00a4c7632a15548512e9152217593907"
+  integrity sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-use-escape-keydown@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755"
@@ -4715,6 +4772,11 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
   integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
 
+"@radix-ui/react-use-layout-effect@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz#0c4230a9eed49d4589c967e2d9c0d9d60a23971e"
+  integrity sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==
+
 "@radix-ui/react-use-previous@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz#b595c087b07317a4f143696c6a01de43b0d0ec66"
@@ -4722,6 +4784,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-previous@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz#1a1ad5568973d24051ed0af687766f6c7cb9b5b5"
+  integrity sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==
+
 "@radix-ui/react-use-rect@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
@@ -4752,6 +4819,13 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-use-size@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz#6de276ffbc389a537ffe4316f5b0f24129405b37"
+  integrity sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-visually-hidden@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac"

From 6542861f76560c9bd12545b8c4fb455eae2be732 Mon Sep 17 00:00:00 2001
From: Michael Malyuk <28912+deppp@users.noreply.github.com>
Date: Sat, 21 Jun 2025 17:57:39 -0700
Subject: [PATCH 11/12] Update label_studio/users/api.py

Co-authored-by: niklub <nikolai@heartex.com>
---
 label_studio/users/api.py | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/label_studio/users/api.py b/label_studio/users/api.py
index 7ffd61e2aa7b..ff21361b7193 100644
--- a/label_studio/users/api.py
+++ b/label_studio/users/api.py
@@ -314,16 +314,8 @@ def get(self, request, *args, **kwargs):
 class UserHotkeysAPI(APIView):
     permission_classes = [IsAuthenticated]
 
-    def post(self, request):
+    def perform_create(self, serializer):
         """Update the current user's hotkeys"""
-        serializer = HotkeysSerializer(data=request.data)
-        
-        if serializer.is_valid():
-            # Update the user's profile
-            user = request.user
-            user.custom_hotkeys = serializer.validated_data['custom_hotkeys']
-            user.save()
-            
-            return Response({'custom_hotkeys': user.custom_hotkeys})
-        else:
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        user = self.request.user
+        user.custom_hotkeys = serializer.validated_data['custom_hotkeys']
+        user.save()

From 22f99ff8fdfe01ed3f280e124de6faacaff0c115 Mon Sep 17 00:00:00 2001
From: Michael Malyuk <28912+deppp@users.noreply.github.com>
Date: Sat, 21 Jun 2025 17:57:47 -0700
Subject: [PATCH 12/12] Update label_studio/users/functions.py

Co-authored-by: niklub <nikolai@heartex.com>
---
 label_studio/users/functions.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/label_studio/users/functions.py b/label_studio/users/functions.py
index 371d4b39c8ad..0a36f3dc0079 100644
--- a/label_studio/users/functions.py
+++ b/label_studio/users/functions.py
@@ -96,4 +96,3 @@ def proceed_registration(request, user_form, organization_form, next_page):
 def login(request, *args, **kwargs):
     request.session['last_login'] = time()
     return auth.login(request, *args, **kwargs)
-