diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index e843a58d8b5f5aefbc39966c07e9f0162d1afc73..c66a944f1e48676d7906097345d1a9dd16554859 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -126,7 +126,7 @@ export function App(props: App) {
       <DashboardAlerts />
       <div className={'h-screen w-screen ' + (!auth.authorized ? 'blur-sm pointer-events-none ' : '')}>
         <div className="flex flex-col h-screen max-h-screen relative">
-          <aside className="h-[4rem]">
+          <aside className="h-auto w-auto">
             <Navbar />
           </aside>
           <main className="flex w-screen h-[calc(100%-4.2rem)]">
diff --git a/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx b/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx
index eca81b20962ee79f8269d6ec79334f01385a4898..c697f2c36d1380d931ce9c953ec1c157499fe3e3 100644
--- a/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx
+++ b/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx
@@ -68,21 +68,30 @@ export default function DatabaseSelector({}) {
           setAddDatabaseFormOpen(false);
         }}
       />
-      <div className="relative border w-[20rem] ml-auto mr-auto cursor-pointer" ref={dbSelectionMenuRef}>
+      <div
+        className="relative flex-shrink max-md:flex-grow border w-full xl:w-[30rem] min-w-0 max-h-full ml-auto mr-auto cursor-pointer"
+        ref={dbSelectionMenuRef}
+      >
         <div
-          className="flex w-full justify-between items-center px-4 py-2 hover:bg-slate-200 transition-colors duration-300"
+          className="flex w-full px-4 py-2 hover:bg-slate-200 transition-colors duration-300"
           onClick={() => setDbSelectionMenuOpen(!dbSelectionMenuOpen)}
         >
-          <div className="flex items-center w-full">
+          <div className="flex items-center w-full shrink-0">
             {connecting ? (
               <>
                 <LoadingSpinner />
-                <p className="ml-2 truncate">Connecting to {session.currentDatabase}</p>
+                <p className="ml-2 truncate">
+                  <span className="max-md:hidden">Connecting to </span>
+                  {session.currentDatabase}
+                </p>
               </>
             ) : session.currentDatabase ? (
               <>
-                <div className="h-2 w-2 rounded-full bg-green-500" />
-                <p className="ml-2 truncate">Connected DB: {session.currentDatabase}</p>
+                <div className="h-[8px] w-[8px] shrink-0 rounded-full bg-green-500" />
+                <p className="ml-2 truncate">
+                  <span className="max-md:hidden">Connected DB: </span>
+                  {session.currentDatabase}
+                </p>
               </>
             ) : session.databases.length == 0 ? (
               <>
@@ -140,17 +149,16 @@ export default function DatabaseSelector({}) {
                 onMouseLeave={() => setHovered(null)}
                 title={`Connect to ${db.Name}`}
               >
-                <div className="flex items-center">
-                  <div className={`h-2 w-2 rounded-full mr-2 ${db.status ? 'bg-green-500' : 'bg-red-500'}`} />
-                  <div>
-                    <p className="ml-2">{db.Name}</p>
-                    <p className="ml-2 text-xs text-slate-400">
-                      <span className="border border-slate-300 px-1">{db.Protocol}</span> {db.URL}
-                    </p>
-                  </div>
+                <div className={`h-2 w-2 rounded-full mr-2 shrink-0 ${db.status ? 'bg-green-500' : 'bg-red-500'}`} />
+                <div className="w-full shrink min-w-0">
+                  <p className="ml-2 truncate w-full shrink-0 min-w-0">{db.Name}</p>
+                  <p className="ml-2 text-xs text-slate-400 truncate w-full shrink-0 min-w-0">
+                    <span className="border border-slate-300 px-1 ">{db.Protocol}</span>{' '}
+                    <span className="truncate w-full min-w-0">{db.URL}</span>
+                  </p>
                 </div>
                 {hovered === db.Name && (
-                  <div className="flex items-center">
+                  <div className="flex items-center ml-2">
                     <div
                       className="text-slate-700 hover:text-slate-400 transition-colors duration-300"
                       onClick={(e) => {
diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index bed6bb50d74baf9cd157e33336c4f77543063387..d5ae5ac8e2c297c1799da520cf1ff447d65d3df4 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -55,8 +55,8 @@ export const Navbar = (props: NavbarComponentProps) => {
 
   return (
     <div className="w-full h-auto px-5">
-      <div title="GraphPolaris" className="navbar flex items-center justify-between w-full">
-        <a href="https://graphpolaris.com/" target="_blank">
+      <div title="GraphPolaris" className="navbar flex items-center justify-between w-auto gap-2 xl:gap-10">
+        <a href="https://graphpolaris.com/" target="_blank" className="xl:w-fit w-[5rem] shrink-0">
           <img src={currentLogo} alt="GraphPolaris" className="h-9" />
         </a>