diff --git a/client/src/components/Input/OpenAIOptions/ModelDropDown.jsx b/client/src/components/Input/OpenAIOptions/ModelDropDown.jsx
index c4da1cbd21..433883d031 100644
--- a/client/src/components/Input/OpenAIOptions/ModelDropDown.jsx
+++ b/client/src/components/Input/OpenAIOptions/ModelDropDown.jsx
@@ -1,14 +1,16 @@
 import React from 'react';
 import CheckMark from '../../svg/CheckMark';
-import { Listbox } from '@headlessui/react';
+import { Listbox, Transition } from '@headlessui/react';
 import { useRecoilValue } from 'recoil';
 import { cn } from '~/utils/';
 import store from '~/store';
 
-function ModelDropDown({ model, setModel, endpoint }) {
+function ModelDropDown({ model, setModel, endpoint, showAbove = false, showLabel = true, className = '' }) {
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
   const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
 
+  console.log('className', className);
+
   return (
     <div className="flex items-center justify-center gap-2">
       <div className="relative w-full">
@@ -16,59 +18,98 @@ function ModelDropDown({ model, setModel, endpoint }) {
           value={model}
           onChange={setModel}
         >
-          <Listbox.Button className="relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm">
-            <Listbox.Label
-              className="block text-xs text-gray-700 dark:text-gray-500"
-              id="headlessui-listbox-label-:r1:"
-              data-headlessui-state=""
-            >
-              Model
-            </Listbox.Label>
-            <span className="inline-flex w-full truncate">
-              <span className="flex h-6 items-center gap-1 truncate text-sm">{model}</span>
-            </span>
-            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-              <svg
-                stroke="currentColor"
-                fill="none"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="h-4 w-4  text-gray-400"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
+          {({ open }) => (
+            <>
+              <Listbox.Button
+                className={cn(
+                  'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
+                  className
+                )}
               >
-                <polyline points="6 9 12 15 18 9"></polyline>
-              </svg>
-            </span>
-          </Listbox.Button>
-          <Listbox.Options className="absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]">
-            {models.map((modelOption, i) => (
-              <Listbox.Option
-                key={i}
-                value={modelOption}
-                className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-[#ECECF1] dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
-              >
-                <span className="flex items-center gap-1.5 truncate">
-                  <span
-                    className={cn(
-                      'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100',
-                      modelOption === model ? 'font-semibold' : ''
-                    )}
+                {showLabel && (
+                  <Listbox.Label
+                    className="block text-xs text-gray-700 dark:text-gray-500"
+                    id="headlessui-listbox-label-:r1:"
+                    data-headlessui-state=""
                   >
-                    {modelOption}
+                    Model
+                  </Listbox.Label>
+                )}
+                <span className="inline-flex w-full truncate">
+                {/* {!showLabel && (
+                  <Listbox.Label
+                    className="text-xs text-gray-700 dark:text-gray-500 mr-3"
+                    id="headlessui-listbox-label-:r1:"
+                    data-headlessui-state=""
+                  >
+                    Model
+                  </Listbox.Label>
+                )} */}
+                  <span className={cn("flex h-6 items-center gap-1 truncate text-sm text-gray-900 dark:text-white", !showLabel ? 'text-xs' : '')}>
+                {!showLabel && (
+                  <span
+                    className="text-xs text-gray-700 dark:text-gray-500"
+                  >
+                    Model:
+                  </span>
+                )}
+                    {`${!showLabel ? '' : ''} ${model}`}
+                    {/* {`${!showLabel ? 'Model: ' : ''} ${model}`} */}
                   </span>
-                  {modelOption === model && (
-                    <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-100">
-                      <CheckMark />
-                    </span>
-                  )}
                 </span>
-              </Listbox.Option>
-            ))}
-          </Listbox.Options>
+                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                  <svg
+                    stroke="currentColor"
+                    fill="none"
+                    strokeWidth="2"
+                    viewBox="0 0 24 24"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="h-4 w-4  text-gray-400"
+                    height="1em"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                  </svg>
+                </span>
+              </Listbox.Button>
+              <Transition
+                show={open}
+                as={React.Fragment}
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+                className={showAbove ? 'bottom-full mb-1' : 'top-full mt-1'}
+              >
+                <Listbox.Options className="absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]">
+                  {models.map((modelOption, i) => (
+                    <Listbox.Option
+                      key={i}
+                      value={modelOption}
+                      className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-[#ECECF1] dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
+                    >
+                      <span className="flex items-center gap-1.5 truncate">
+                        <span
+                          className={cn(
+                            'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100',
+                            modelOption === model ? 'font-semibold' : ''
+                          )}
+                        >
+                          {modelOption}
+                        </span>
+                        {modelOption === model && (
+                          <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-100">
+                            <CheckMark />
+                          </span>
+                        )}
+                      </span>
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </Transition>
+            </>
+          )}
         </Listbox>
       </div>
     </div>
diff --git a/client/src/components/Input/OpenAIOptions/index.jsx b/client/src/components/Input/OpenAIOptions/index.jsx
index 801ae6c88b..8a4a47b0e8 100644
--- a/client/src/components/Input/OpenAIOptions/index.jsx
+++ b/client/src/components/Input/OpenAIOptions/index.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Settings2 } from 'lucide-react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import ModelSelect from './ModelSelect';
+import ModelDropDown from './ModelDropDown';
 import EndpointOptionsPopover from '../../ui/EndpointOptionsPopover';
 import DialogTemplate from '../../ui/DialogTemplate';
 import { Button } from '../../ui/Button.tsx';
@@ -79,7 +80,7 @@ function OpenAIOptions() {
           (!advancedMode ? ' show' : '')
         }
       >
-        <ModelSelect
+        {/* <ModelSelect
           model={model}
           availableModels={availableModels}
           onChange={setOption('model')}
@@ -88,12 +89,20 @@ function OpenAIOptions() {
             cardStyle,
             ' z-50 flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 data-[state=open]:bg-slate-50 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
           )}
+        /> */}
+        <ModelDropDown
+          model={model}
+          setModel={setOption('model')}
+          endpoint="openAI"
+          showAbove={true}
+          showLabel={false}
+          className="z-50 flex h-[40px] w-48 min-w-48 items-center justify-center px-4 hover:bg-slate-50 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600"
         />
         <Button
           type="button"
           className={cn(
             cardStyle,
-            ' min-w-4 z-50 flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
+            'min-w-4 z-50 flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
           )}
           onClick={triggerAdvancedMode}
         >