diff --git a/frontend/packages/ux-editor/src/components/Tabs.module.css b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.module.css
similarity index 100%
rename from frontend/packages/ux-editor/src/components/Tabs.module.css
rename to frontend/packages/ux-editor/src/components/Settings/SettingsTabs.module.css
diff --git a/frontend/packages/ux-editor/src/components/Tabs.tsx b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
similarity index 83%
rename from frontend/packages/ux-editor/src/components/Tabs.tsx
rename to frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
index 5c44abf0ba6..1cb7f4d6778 100644
--- a/frontend/packages/ux-editor/src/components/Tabs.tsx
+++ b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
@@ -2,10 +2,10 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import { StudioHeading, StudioTabs } from '@studio/components';
 import { useTranslation } from 'react-i18next';
-import classes from './Tabs.module.css';
+import classes from './Settings.module.css';
 import { CompassIcon, DatabaseIcon } from '@studio/icons';
 
-const SettingTabs = [
+const tabs = [
   {
     icon: CompassIcon,
     title: 'ux_editor.settings.navigation_tab',
@@ -16,7 +16,7 @@ const SettingTabs = [
   },
 ];
 
-export const Tabs = (): ReactElement => {
+export const SettingsTabs = (): ReactElement => {
   const { t } = useTranslation();
 
   return (
@@ -24,9 +24,9 @@ export const Tabs = (): ReactElement => {
       <StudioHeading level={2} size='xsmall' className={classes.heading}>
         {t('ux_editor.settings.other_settings')}
       </StudioHeading>
-      <StudioTabs defaultValue={SettingTabs[0].title}>
+      <StudioTabs defaultValue={tabs[0].title}>
         <StudioTabs.List>
-          {SettingTabs.map((tab) => {
+          {tabs.map((tab) => {
             const TabIcon = tab.icon;
             return (
               <StudioTabs.Tab key={tab.title} value={tab.title}>
diff --git a/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx b/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx
index e029cfd6573..0d781b4ddf7 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx
@@ -4,7 +4,7 @@ import classes from './FormDesignerNavigation.module.css';
 import { useTranslation } from 'react-i18next';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useAppConfigQuery } from 'app-development/hooks/queries';
-import { Tabs } from '../../components/Tabs';
+import { SettingsTabs } from '../../components/Settings/SettingsTabs';
 
 export const FormDesignerNavigation = () => {
   const { t } = useTranslation();
@@ -16,7 +16,7 @@ export const FormDesignerNavigation = () => {
         <div className={classes.panel}>
           <div className={classes.content}>
             <div className={classes.header}>{appConfigData?.serviceName}</div>
-            <Tabs />
+            <SettingsTabs />
           </div>
           <footer className={classes.footer}>
             <Link href='/contact'>{t('general.contact')}</Link>