diff --git a/dashboard/src/components/Sidebar.tsx b/dashboard/src/components/Sidebar.tsx
index c769016..6b64fa5 100644
--- a/dashboard/src/components/Sidebar.tsx
+++ b/dashboard/src/components/Sidebar.tsx
@@ -78,12 +78,12 @@ const Sidebar = (props: SidebarProps) => {
 
   const MapacheHeader = (props: { isSidebarExpanded: boolean }) => {
     return (
-      <div className="flex items-center p-4">
-        <div className="flex min-w-[60px] items-center justify-center">
+      <div className="flex items-center p-4 overflow-hidden">
+        <div className="flex min-w-[60px] items-center justify-center flex-shrink-0">
           <img src="/logo/mapache.png" className="h-10" />
         </div>
         <div
-          className={`whitespace-nowrap pl-4 ${props.isSidebarExpanded ? "slide-in" : "slide-out"}`}
+          className={`whitespace-nowrap pl-4 overflow-hidden ${props.isSidebarExpanded ? "slide-in" : "slide-out"}`}
         >
           <h2>Mapache</h2>
         </div>
@@ -111,17 +111,17 @@ const Sidebar = (props: SidebarProps) => {
         }}
       >
         <div
-          className={`flex w-full items-center rounded-md ${
+          className={`flex w-full items-center rounded-md overflow-hidden ${
             props.isSelected ? "bg-card/50" : ""
           } h-10 p-1 hover:bg-card`}
         >
-          <div className="flex min-w-[60px] items-center justify-center">
+          <div className="flex min-w-[60px] items-center justify-center flex-shrink-0">
             <props.icon
               className={`${props.isSelected ? "text-white" : "text-neutral-400"}`}
             />
           </div>
           <div
-            className={`whitespace-nowrap font-semibold ${props.isSelected ? "text-white" : "text-neutral-400"} ${props.isSidebarExpanded ? "slide-in" : "slide-out"}`}
+            className={`whitespace-nowrap font-semibold overflow-hidden ${props.isSelected ? "text-white" : "text-neutral-400"} ${props.isSidebarExpanded ? "slide-in" : "slide-out"}`}
           >
             {props.text}
           </div>
@@ -141,26 +141,26 @@ const Sidebar = (props: SidebarProps) => {
             className={`mx-2 my-2 flex cursor-pointer items-center overflow-hidden rounded-lg bg-gradient-to-br from-gr-pink to-gr-purple bg-[length:100%_100%] p-[2px] transition-all duration-150`}
             onClick={(e) => e.stopPropagation()}
           >
-            <div className="flex h-12 w-full items-center rounded-lg bg-card/50 p-1 hover:bg-card">
-              <div className="flex min-w-[60px] items-center justify-center">
+            <div className="flex h-12 w-full items-center rounded-lg bg-card/50 p-1 hover:bg-card overflow-hidden">
+              <div className="flex min-w-[60px] items-center justify-center flex-shrink-0">
                 <VehicleClassIcon
                   vehicleClass={currentVehicle.type}
                   iconType={"pixel"}
                 />
               </div>
               <div
-                className={`whitespace-nowrap font-semibold text-white ${props.isSidebarExpanded ? "slide-in" : "slide-out"}`}
+                className={`whitespace-nowrap font-semibold text-white overflow-hidden ${props.isSidebarExpanded ? "slide-in" : "slide-out"}`}
               >
                 <div className="flex w-full items-center justify-between">
-                  <div className="flex w-[160px] flex-col items-start justify-center">
-                    <div className="text-sm font-semibold">
+                  <div className="flex w-[160px] flex-col items-start justify-center overflow-hidden">
+                    <div className="text-sm font-semibold truncate w-full">
                       {currentVehicle.name}
                     </div>
-                    <div className="text-xs text-neutral-400">
+                    <div className="text-xs text-neutral-400 truncate w-full">
                       {currentVehicle.id} • {currentVehicle.type}
                     </div>
                   </div>
-                  <div className="flex items-center justify-center">
+                  <div className="flex items-center justify-center flex-shrink-0">
                     <ChevronsUpDown />
                   </div>
                 </div>
@@ -286,4 +286,4 @@ const Sidebar = (props: SidebarProps) => {
   );
 };
 
-export default Sidebar;
+export default Sidebar;
\ No newline at end of file
diff --git a/dashboard/src/index.css b/dashboard/src/index.css
index 61ccd5c..0b3bd76 100644
--- a/dashboard/src/index.css
+++ b/dashboard/src/index.css
@@ -118,5 +118,8 @@
 }
 
 .slide-out {
-  animation: slideOut 0.3s ease forwards;
+  opacity: 0;
+  transform: translateX(-100%);
+  width: 0;
+  transition: all 0.3s ease;
 }