diff --git a/e2e-tests/cypress/e2e/charts.cy.js b/e2e-tests/cypress/e2e/charts.cy.js
index 89f7bc6ff..7a5199c46 100644
--- a/e2e-tests/cypress/e2e/charts.cy.js
+++ b/e2e-tests/cypress/e2e/charts.cy.js
@@ -198,4 +198,74 @@ describe('Charts', () => {
     cy.testid('ConfirmModal_okButton').click();
     cy.testid('WidgetIconPanel_settings');
   });
+
+  it.only('Settings', () => {
+    cy.testid('WidgetIconPanel_settings').click();
+    cy.themeshot('app-settings-general');
+
+    cy.contains('Behaviour').click();
+    cy.themeshot('app-settings-behaviour');
+    cy.get('[data-testid=BehaviourSettings_useTabPreviewMode]').uncheck();
+
+    // SQL Editor
+    cy.contains('SQL Editor').click();
+    cy.get('[data-testid=SQLEditorSettings_sqlCommandsCase]').select('lowerCase');
+
+    cy.contains('MySql-connection').click();
+    cy.contains('charts_sample').click();
+    cy.contains('employees').click();
+    cy.contains('MyChinook').click();
+    cy.contains('Customer').rightclick();
+    cy.contains('SQL template').click();
+    cy.contains('CREATE TABLE').click();
+    cy.contains('create table');
+
+    // Default Actions
+    cy.testid('WidgetIconPanel_settings').click();
+    cy.contains('Default Actions').click();
+    cy.get('[data-testid=DefaultActionsSettings_useLastUsedAction]').uncheck();
+
+
+    // Themes
+    cy.contains('Themes').click();
+    cy.themeshot('app-settings-themes');
+    cy.contains('Dark').click();
+    cy.get('body').find('.theme-dark').should('exist');
+    cy.contains('Light').click();
+    cy.get('body').find('.theme-light').should('exist');
+
+    // Connection
+    cy.contains(/^Connection$/).click();
+    cy.contains('charts_sample');
+    cy.get('[data-testid=ConnectionSettings_lockedDatabaseMode]').check();
+    cy.contains('Connections').click();
+    cy.contains('charts_sample').should('not.exist');
+
+    // Datagrid
+    cy.contains('Data grid').click();
+    cy.get('[data-testid=DataGridSettings_showHintColumns]').uncheck();
+    cy.wait(500);
+    cy.contains('Album').click();
+    cy.contains('AC/DC').should('not.exist');
+
+    cy.testid('WidgetIconPanel_settings').click();
+    cy.contains('Keyboard shortcuts').click();
+    cy.themeshot('app-settings-keyboard-shortcuts');
+    cy.contains('Chart').click();
+    cy.testid('CommandModal_keyboardButton').click();
+    cy.realPress(['Control', 'g']);
+    cy.realPress('Enter');
+    cy.contains('OK').click();
+    cy.contains('Ctrl+G');
+
+    
+    cy.contains('AI').click();
+    cy.themeshot('app-settings-ai');
+    cy.get('[data-testid=AISettings_addProviderButton]').click();
+    cy.contains('Provider 1');
+    cy.get('[data-testid=AiProviderCard_removeButton]').click();
+    cy.contains('Are you sure you want to remove Provider 1 provider?');
+    cy.contains('OK').click();
+    cy.contains('Provider 1').should('not.exist');
+  });
 });
diff --git a/packages/web/src/elements/SettingsMenuControl.svelte b/packages/web/src/elements/SettingsMenuControl.svelte
index 98e88dccb..c8fc1b8fd 100644
--- a/packages/web/src/elements/SettingsMenuControl.svelte
+++ b/packages/web/src/elements/SettingsMenuControl.svelte
@@ -137,6 +137,7 @@
     position: relative;
     overflow: hidden;
     height: 100%;
+    background-color: var(--theme-bg-0);
   }
 
   .scrollableContentContainer {
diff --git a/packages/web/src/settings/BehaviourSettings.svelte b/packages/web/src/settings/BehaviourSettings.svelte
index c4cb45704..edab0fa1e 100644
--- a/packages/web/src/settings/BehaviourSettings.svelte
+++ b/packages/web/src/settings/BehaviourSettings.svelte
@@ -13,6 +13,7 @@
     name="behaviour.useTabPreviewMode"
     label={_t('settings.behaviour.useTabPreviewMode', { defaultMessage: 'Use tab preview mode' })}
     defaultValue={true}
+    data-testid="BehaviourSettings_useTabPreviewMode"
     />
 
     <FormCheckboxField
diff --git a/packages/web/src/settings/ConnectionSettings.svelte b/packages/web/src/settings/ConnectionSettings.svelte
index 7e26bdb0c..31903e5a4 100644
--- a/packages/web/src/settings/ConnectionSettings.svelte
+++ b/packages/web/src/settings/ConnectionSettings.svelte
@@ -26,7 +26,7 @@
         },
     }}
     >
-    <CheckboxField checked={$lockedDatabaseMode} on:change={e => ($lockedDatabaseMode = e.target.checked)} />
+    <CheckboxField checked={$lockedDatabaseMode} on:change={e => ($lockedDatabaseMode = e.target.checked)} data-testid="ConnectionSettings_lockedDatabaseMode"/>
     </FormFieldTemplateLarge>
 
     <FormCheckboxField
@@ -84,4 +84,12 @@
     margin-top: var(--dim-large-form-margin);
   }
 
+  .wrapper :global(input){
+    max-width: 400px;
+  }
+
+  .wrapper :global(select){
+    max-width: 400px;
+  }
+
 </style>
\ No newline at end of file
diff --git a/packages/web/src/settings/DataGridSettings.svelte b/packages/web/src/settings/DataGridSettings.svelte
index 6fbdf7ed6..eb47f76ca 100644
--- a/packages/web/src/settings/DataGridSettings.svelte
+++ b/packages/web/src/settings/DataGridSettings.svelte
@@ -22,6 +22,7 @@ defaultValue="100"
     name="dataGrid.showHintColumns"
     label={_t('settings.dataGrid.showHintColumns', { defaultMessage: 'Show foreign key hints' })}
     defaultValue={true}
+    data-testid="DataGridSettings_showHintColumns"
 />
 {/if}
 <!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> -->
@@ -97,4 +98,12 @@ defaultValue={false}
     margin-left: var(--dim-large-form-margin);
     margin-top: var(--dim-large-form-margin);
   }
+
+  .wrapper :global(select){
+    max-width: 400px;
+  }
+
+  .wrapper :global(input){
+    max-width: 400px;
+  }
 </style>
\ No newline at end of file
diff --git a/packages/web/src/settings/DefaultActionsSettings.svelte b/packages/web/src/settings/DefaultActionsSettings.svelte
index dddb59dc7..29be7e88a 100644
--- a/packages/web/src/settings/DefaultActionsSettings.svelte
+++ b/packages/web/src/settings/DefaultActionsSettings.svelte
@@ -56,6 +56,7 @@
     name="defaultAction.useLastUsedAction"
     label={_t('settings.defaultActions.useLastUsedAction', { defaultMessage: 'Use last used action' })}
     defaultValue={true}
+    data-testid="DefaultActionsSettings_useLastUsedAction"
     />
 
     <FormDefaultActionField
@@ -100,4 +101,8 @@
     margin-top: var(--dim-large-form-margin);
   }
 
+  .wrapper :global(select){
+    max-width: 400px;
+  }
+
 </style>
\ No newline at end of file
diff --git a/packages/web/src/settings/GeneralSettings.svelte b/packages/web/src/settings/GeneralSettings.svelte
index aa7cd0bc9..a8a32939e 100644
--- a/packages/web/src/settings/GeneralSettings.svelte
+++ b/packages/web/src/settings/GeneralSettings.svelte
@@ -120,4 +120,8 @@
     margin-top: var(--dim-large-form-margin);
   }
 
+  .wrapper :global(select){
+    max-width: 400px;
+  }
+
 </style>
\ No newline at end of file
diff --git a/packages/web/src/settings/SQLEditorSettings.svelte b/packages/web/src/settings/SQLEditorSettings.svelte
index 5829986e4..a3740d3e9 100644
--- a/packages/web/src/settings/SQLEditorSettings.svelte
+++ b/packages/web/src/settings/SQLEditorSettings.svelte
@@ -26,6 +26,7 @@
         { value: 'upperCase', label: 'UPPER CASE' },
         { value: 'lowerCase', label: 'lower case' },
     ]}
+    data-testid="SQLEditorSettings_sqlCommandsCase"
     />
 </div>
 <div class="col-3">
@@ -97,4 +98,8 @@ defaultValue={false}
     margin-left: var(--dim-large-form-margin);
     margin-top: var(--dim-large-form-margin);
   }
+
+  .wrapper :global(input){
+    max-width: 400px;
+  }
 </style>
\ No newline at end of file