diff --git a/src/components/ApiMenu/ApiMenu.tsx b/src/components/ApiMenu/ApiMenu.tsx
index 5c290db..0f7d1c8 100644
--- a/src/components/ApiMenu/ApiMenu.tsx
+++ b/src/components/ApiMenu/ApiMenu.tsx
@@ -53,7 +53,7 @@ const ApiMenu = ({
           {t('customEndpoint', { ns: 'api' })}
         </label>
 
-        <div className='flex gap-2 items-center justify-center mb-6'>
+        <div className='flex gap-2 items-center mb-6'>
           <div className='min-w-fit text-gray-900 dark:text-gray-300 text-sm'>
             {t('apiEndpoint.inputLabel', { ns: 'api' })}
           </div>
@@ -124,13 +124,13 @@ const ApiEndpointSelector = ({
   const [dropDown, setDropDown] = useState<boolean>(false);
 
   return (
-    <div className='w-full relative'>
+    <div className='w-[40vw] relative flex-1'>
       <button
-        className='btn btn-neutral btn-small flex w-32 flex justify-between w-full'
+        className='btn btn-neutral btn-small flex justify-between w-full'
         type='button'
         onClick={() => setDropDown((prev) => !prev)}
       >
-        {_apiEndpoint}
+        <span className='truncate'>{_apiEndpoint}</span>
         <DownChevronArrow />
       </button>
       <div
@@ -145,7 +145,7 @@ const ApiEndpointSelector = ({
         >
           {availableEndpoints.map((endpoint) => (
             <li
-              className='px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer'
+              className='px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer truncate'
               onClick={() => {
                 _setApiEndpoint(endpoint);
                 setDropDown(false);