diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index aa82857..801f82a 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -151,4 +151,8 @@
   pointer-events: none;
   user-select: none;
   z-index: 1000;
+}
+
+.tab-scroll::-webkit-scrollbar {
+  display: none;
 }
\ No newline at end of file
diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx
index 8234f37..49f96c2 100644
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@@ -598,7 +598,7 @@ export default function CodeEditor({
           minSize={30}
           defaultSize={60}
         >
-          <div className="h-10 w-full flex gap-2">
+          <div className="h-10 w-full flex gap-2 overflow-auto tab-scroll">
             {tabs.map((tab) => (
               <Tab
                 key={tab.id}
@@ -712,7 +712,7 @@ export default function CodeEditor({
             >
               {isOwner ? (
                 <>
-                  <div className="h-10 w-full flex gap-2 shrink-0">
+                  <div className="h-10 w-full overflow-auto flex gap-2 shrink-0 tab-scroll">
                     {terminals.map((term) => (
                       <Tab
                         key={term.id}
@@ -737,7 +737,7 @@ export default function CodeEditor({
                       }}
                       size="smIcon"
                       variant={"secondary"}
-                      className={`font-normal select-none text-muted-foreground`}
+                      className={`font-normal shrink-0 select-none text-muted-foreground`}
                     >
                       {creatingTerminal ? (
                         <Loader2 className="animate-spin w-4 h-4" />
diff --git a/frontend/components/editor/live/avatars.tsx b/frontend/components/editor/live/avatars.tsx
index f52bc14..4b7550d 100644
--- a/frontend/components/editor/live/avatars.tsx
+++ b/frontend/components/editor/live/avatars.tsx
@@ -1,6 +1,6 @@
-"use client"
+"use client";
 
-import { useOthers } from "@/liveblocks.config"
+import { useOthers } from "@/liveblocks.config";
 
 const classNames = {
   red: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-red-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-red-950 to-red-600 flex items-center justify-center text-xs font-medium",
@@ -14,10 +14,10 @@ const classNames = {
   purple:
     "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-purple-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-purple-950 to-purple-600 flex items-center justify-center text-xs font-medium",
   pink: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-pink-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-pink-950 to-pink-600 flex items-center justify-center text-xs font-medium",
-}
+};
 
 export function Avatars() {
-  const users = useOthers()
+  const users = useOthers();
 
   return (
     <>
@@ -30,10 +30,12 @@ export function Avatars() {
                 .slice(0, 2)
                 .map((letter) => letter[0].toUpperCase())}
             </div>
-          )
+          );
         })}
       </div>
-      <div className="h-full w-[1px] bg-border mx-2" />
+      {users.length > 0 ? (
+        <div className="h-full w-[1px] bg-border mx-2" />
+      ) : null}
     </>
-  )
+  );
 }