diff --git a/apps/web/src/components/onboarding/onboarding.tsx b/apps/web/src/components/onboarding/onboarding.tsx
index 3327615ceaa543b2eed7d4604b6ffe676953151b..26dc76034a714d3fbb5ae78b3ee72ee294eafd53 100644
--- a/apps/web/src/components/onboarding/onboarding.tsx
+++ b/apps/web/src/components/onboarding/onboarding.tsx
@@ -4,6 +4,7 @@ import { useLocation } from 'react-router-dom';
 import { Button } from '@graphpolaris/shared/lib/components/buttons';
 import { useCases } from './use-cases';
 import { useAuthCache } from '@graphpolaris/shared/lib/data-access';
+import { OnboardingTooltip } from './tooltip';
 
 interface OnboardingState {
   run?: boolean;
@@ -54,7 +55,7 @@ export function Onboarding({}) {
   return (
     <div>
       {showWalkthrough && (
-        <div className="bg-accent-light alert absolute bottom-5 left-5 w-fit cursor-pointer z-50">
+        <div className="bg-light alert absolute bottom-5 left-5 w-fit cursor-pointer z-50">
           <Button onClick={startWalkThrough} label={'Start a Tour'} variant="ghost" />
           <Button onClick={() => addWalkthroughCookie()} iconComponent="icon-[ic--baseline-close]" variant="ghost" rounded />
         </div>
@@ -68,6 +69,7 @@ export function Onboarding({}) {
         showSkipButton={true}
         hideCloseButton={true}
         callback={handleJoyrideCallback}
+        tooltipComponent={OnboardingTooltip}
         styles={{
           options: {
             primaryColor: '#FF7D00',
diff --git a/apps/web/src/components/onboarding/tooltip.tsx b/apps/web/src/components/onboarding/tooltip.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9c74c1fde47a27756ab4bd622545b47c676ee679
--- /dev/null
+++ b/apps/web/src/components/onboarding/tooltip.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { TooltipRenderProps } from 'react-joyride';
+
+const OnboardingTooltip = (props: TooltipRenderProps) => {
+  const { backProps, closeProps, continuous, index, primaryProps, skipProps, step, tooltipProps } = props;
+
+  return (
+    <div className="bg-light p-4 rounded-lg shadow-lg" {...tooltipProps}>
+      <button className="absolute top-2 right-2 text-secondary-500 hover:text-secondary-700" {...closeProps}>
+        &times;
+      </button>
+      {step.title && <h4 className="text-lg font-semibold mb-2">{step.title}</h4>}
+      <div className="mb-4">{step.content}</div>
+      <div className="flex justify-between items-center">
+        <button className="text-sm text-gray-500 hover:text-gray-700" {...skipProps}>
+          {skipProps.title}
+        </button>
+        <div className="flex space-x-2">
+          {index > 0 && (
+            <button className="bg-light-200 text-light-700 px-3 py-1 rounded hover:bg-light-300" {...backProps}>
+              {backProps.title}
+            </button>
+          )}
+          {continuous && (
+            <button className="bg-primary text-light px-3 py-1 rounded hover:bg-primary-dark" {...primaryProps}>
+              {primaryProps.title}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { OnboardingTooltip };
diff --git a/apps/web/src/components/onboarding/use-cases/general.tsx b/apps/web/src/components/onboarding/use-cases/general.tsx
index 715b44ffbd0351230bb5635e6379c7f4f89b44b2..bf4a90d13d845fe1ca6a4144908cc52e47432bc2 100644
--- a/apps/web/src/components/onboarding/use-cases/general.tsx
+++ b/apps/web/src/components/onboarding/use-cases/general.tsx
@@ -48,7 +48,7 @@ export const generalScript: GPStep[] = [
     disableBeacon: true,
   },
   {
-    target: '.menu-walkthrough',
+    target: '.database-menu',
     title: 'Menu',
     content: 'In the menu you can manage databases, switch between them, and perform other actions.',
     placement: 'bottom',
diff --git a/libs/shared/lib/components/layout/Panel.tsx b/libs/shared/lib/components/layout/Panel.tsx
index 3a4bdda2cb78a7696248dae29c5d78b387609890..b1a55e0a660a154d02c64b777bc2910ba603b0eb 100644
--- a/libs/shared/lib/components/layout/Panel.tsx
+++ b/libs/shared/lib/components/layout/Panel.tsx
@@ -5,11 +5,12 @@ export type Panel = {
   title: string | React.ReactNode;
   tooltips?: React.ReactNode;
   children: React.ReactNode;
+  className?: string;
 };
 
 export function Panel(props: Panel) {
   return (
-    <div className="flex flex-col border w-full h-full bg-light">
+    <div className={`flex flex-col border w-full h-full bg-light ${props.className || ''}`}>
       <div className="sticky shrink-0 top-0 flex items-stretch justify-between h-7 bg-secondary-100 border-b border-secondary-200 max-w-full">
         <div className="flex items-center">
           <h1 className="text-xs font-semibold text-secondary-600 px-2 truncate">{props.title}</h1>
diff --git a/libs/shared/lib/management/ManagementTrigger.tsx b/libs/shared/lib/management/ManagementTrigger.tsx
index ace73c3c3235f3743527d08dbe4a8ba9188d372d..65d4f7c72ef3a5cefa930f9638d4f9909364d3b0 100644
--- a/libs/shared/lib/management/ManagementTrigger.tsx
+++ b/libs/shared/lib/management/ManagementTrigger.tsx
@@ -41,7 +41,7 @@ export function ManagementTrigger({ managementOpen, setManagementOpen, current,
   }, [connecting]);
 
   return (
-    <div>
+    <div className="database-menu">
       <ManagementDialog
         open={managementOpen}
         onClose={() => setManagementOpen(!managementOpen)}
diff --git a/libs/shared/lib/schema/panel/Schema.tsx b/libs/shared/lib/schema/panel/Schema.tsx
index fce8bad964645ac4c5bedeb26dea4e9c12d0921c..c13f95409295348d948d34c54c4d26a5129b76bb 100644
--- a/libs/shared/lib/schema/panel/Schema.tsx
+++ b/libs/shared/lib/schema/panel/Schema.tsx
@@ -276,6 +276,7 @@ export const Schema = (props: Props) => {
   return (
     <Panel
       title="Schema"
+      className="schema-panel"
       tooltips={
         <>
           <Tooltip>
@@ -351,7 +352,7 @@ export const Schema = (props: Props) => {
         </>
       }
     >
-      <div className="schema-panel w-full h-full flex flex-col justify-between" ref={reactFlowRef}>
+      <div className="w-full h-full flex flex-col justify-between" ref={reactFlowRef}>
         {schema.loading ? (
           <div className="h-full flex flex-col items-center justify-center">
             <Icon component="icon-[mingcute--loading-line]" size={56} className="w-15 h-15 animate-spin " />
diff --git a/libs/shared/lib/sidebar/index.tsx b/libs/shared/lib/sidebar/index.tsx
index 9c45f29bdfa6a4d4c9de9541a32b4d8374e06d3c..7c2f424192cc6deaa7350748873198edb2440207 100644
--- a/libs/shared/lib/sidebar/index.tsx
+++ b/libs/shared/lib/sidebar/index.tsx
@@ -7,12 +7,17 @@ export type SideNavTab = 'Schema' | 'Search' | undefined;
 const tabs: Array<{
   name: SideNavTab;
   icon: string | undefined;
+  className?: string;
 }> = [
   {
     name: 'Search',
     icon: 'icon-[ic--outline-search]',
+    className: 'searchbar',
+  },
+  {
+    name: 'Schema',
+    icon: 'icon-[ic--baseline-schema]',
   },
-  { name: 'Schema', icon: 'icon-[ic--baseline-schema]' },
 ];
 
 export function Sidebar({
@@ -46,7 +51,7 @@ export function Sidebar({
                       onTab(t.name);
                     }
                   }}
-                  className={tab === t.name ? 'bg-secondary-100' : ''}
+                  className={`${t.className || ''} ${tab === t.name ? 'bg-secondary-100' : ''}`}
                 />
               </TooltipTrigger>
               <TooltipContent>{t.name}</TooltipContent>