diff --git a/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx b/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
index 4301840ad915836d3e38079bd3cf0c15198fd86e..5c0e1be3b8c5744af4f237e99a2224badba3a5da 100644
--- a/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
+++ b/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
@@ -57,7 +57,7 @@ export default function DatabaseSelector({}) {
   }, [connecting]);
 
   return (
-    <>
+    <div className="menu-walkthrough">
       {settingsMenuOpen !== undefined && (
         <SettingsForm
           open={settingsMenuOpen}
@@ -201,6 +201,6 @@ export default function DatabaseSelector({}) {
           </DropdownItemContainer>
         )}
       </DropdownContainer>
-    </>
+    </div>
   );
 }
diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index 47f714926ded8ca9ae2ca520a2e4c6221ac88cc7..92c7a548dbb5dfc3f36d743943c36eeea110909e 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -51,7 +51,7 @@ export const Navbar = () => {
         <div>
           <SearchBar />
           <ColorMode />
-          <div className="w-fit menu-walkthrough" ref={dropdownRef}>
+          <div className="w-fit" ref={dropdownRef}>
             <div
               className="relative inline-flex items-center justify-center w-8 h-8 overflow-hidden bg-secondary-500 rounded hover:bg-secondary-600 transition-colors duration-150 ease-in-out cursor-pointer"
               onClick={() => setMenuOpen(!menuOpen)}
diff --git a/apps/web/src/components/navbar/search/SearchBar.tsx b/apps/web/src/components/navbar/search/SearchBar.tsx
index ccd3b30ac3f31f2ed7447798cf1923e6b0c470ab..797b267f65101c6cc65aaebca2169ffc4dfd3d9d 100644
--- a/apps/web/src/components/navbar/search/SearchBar.tsx
+++ b/apps/web/src/components/navbar/search/SearchBar.tsx
@@ -161,7 +161,7 @@ export function SearchBar({}) {
   }, []);
 
   return (
-    <>
+    <div className="searchbar">
       {searchOpen && <div className="fixed inset-0 bg-black bg-opacity-50 z-40"></div>}
       <div className="mr-2" ref={searchbarRef}>
         <div
@@ -254,6 +254,6 @@ export function SearchBar({}) {
           </div>
         )}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/libs/shared/lib/components/buttons/index.tsx b/libs/shared/lib/components/buttons/index.tsx
index 2100b11f8e3a6d19732da62854700d28282e88cd..fa96b6ccb618fed6c671bc987ba023f0e6ef7565 100644
--- a/libs/shared/lib/components/buttons/index.tsx
+++ b/libs/shared/lib/components/buttons/index.tsx
@@ -15,6 +15,7 @@ type ButtonProps = {
   iconPosition?: 'leading' | 'trailing';
   ariaLabel?: string;
   children?: React.ReactNode;
+  additionalClasses?: string;
 };
 
 export function Button({
@@ -29,6 +30,7 @@ export function Button({
   iconName,
   iconPosition = 'leading',
   ariaLabel,
+  additionalClasses,
   children,
   ...props
 }: ButtonProps & React.HTMLAttributes<HTMLButtonElement>) {
@@ -95,7 +97,7 @@ export function Button({
 
   return (
     <button
-      className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass}`}
+      className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass} ${additionalClasses}`}
       onClick={onClick}
       disabled={disabled}
       aria-label={ariaLabel}
diff --git a/libs/shared/lib/querybuilder/panel/querybuilder.tsx b/libs/shared/lib/querybuilder/panel/querybuilder.tsx
index 65838b391931a33e1e09e97011c7acee638dff01..cece0446719a032a2b67b403a82df194ff5d174f 100644
--- a/libs/shared/lib/querybuilder/panel/querybuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/querybuilder.tsx
@@ -466,6 +466,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
             variant="ghost"
             size="xs"
             iconName="Settings"
+            additionalClasses="query-settings"
             onClick={(event) => {
               event.stopPropagation();
               if (toggleSettings === 'settings') setToggleSettings(undefined);
diff --git a/libs/shared/lib/schema/panel/schema.tsx b/libs/shared/lib/schema/panel/schema.tsx
index 531bd450a8b2a2676d1cc04f2eba63b816fa7220..2ca58efb06f6a81997e2deee87d570cd9ae334b8 100644
--- a/libs/shared/lib/schema/panel/schema.tsx
+++ b/libs/shared/lib/schema/panel/schema.tsx
@@ -126,6 +126,7 @@ export const Schema = (props: Props) => {
             variant="ghost"
             size="xs"
             iconName="Settings"
+            additionalClasses="schema-settings"
             onClick={(e) => {
               e.stopPropagation();
               setToggleSchemaSettings(!toggleSchemaSettings);