diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index b23fb5cc..c5f1136c 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -88,7 +88,7 @@
                     </div>
                     <!-- CHAT BOX -->
                     <div class="flex flex-row flex-grow items-center gap-2 ">
-                        <div >
+                        <div class="w-24">
                             <MountedPersonalitiesComponent  />
 
                         </div>
diff --git a/web/src/components/MountedPersonalitiesComponent.vue b/web/src/components/MountedPersonalitiesComponent.vue
index efe42804..541e2eb2 100644
--- a/web/src/components/MountedPersonalitiesComponent.vue
+++ b/web/src/components/MountedPersonalitiesComponent.vue
@@ -2,7 +2,7 @@
   
         <!-- LIST OF MOUNTED PERSONALITIES -->
         <div 
-            class=" text-base font-semibold cursor-pointer select-none items-center flex flex-row">
+            class=" text-base font-semibold cursor-pointer select-none items-center flex flex-row overflow-visible overflow-x-auto scrollbar-thin scrollbar-track-bg-light scrollbar-thumb-bg-light-tone hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark dark:scrollbar-thumb-bg-dark-tone dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
             <!-- LIST -->
             <div class="flex -space-x-4 items-center ">
                 <!-- ITEM -->