diff --git a/client/src/components/Input/OpenAIOptions/index.jsx b/client/src/components/Input/OpenAIOptions/index.jsx
index b7fdfc280c..0192ac8f0a 100644
--- a/client/src/components/Input/OpenAIOptions/index.jsx
+++ b/client/src/components/Input/OpenAIOptions/index.jsx
@@ -1,35 +1,59 @@
 import React, { useState, useEffect, forwardRef } from 'react';
 import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs.tsx';
-import { useRecoilValue, useRecoilState } from 'recoil';
+import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil';
 import { Button } from '../../ui/Button.tsx';
 
 import store from '~/store';
 
 function OpenAIOptions({ conversation = {} }) {
   const { endpoint } = conversation;
-  const { advancedMode, setAdvancedMode } = useState(false);
+  const [advancedMode, setAdvancedMode] = useState(false);
+  const setConversation = useSetRecoilState(store.conversation);
 
   const triggerAdvancedMode = () => setAdvancedMode(prev => !prev);
 
+  const switchToSimpleMode = () => {
+    setAdvancedMode(false);
+    setConversation(prevState => ({
+      ...prevState,
+      chatGptLabel: null,
+      promptPrefix: null,
+      temperature: 0.8,
+      top_p: 1,
+      presence_penalty: 1
+    }));
+  };
+
   if (endpoint !== 'openAI') return null;
 
   const { model } = conversation;
 
   const cardStyle =
-    'shadow-md px-4 h-[40px] rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
+    'shadow-md rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
 
   return (
     <>
-      <div className="flex w-full items-center justify-center gap-2">
+      <div
+        className={
+          'openAIOptions-simple-container flex w-full items-center justify-center gap-2' +
+          (!advancedMode ? ' show' : '')
+        }
+      >
         <Button
           type="button"
-          className={cardStyle + ' flex items-center justify-center hover:bg-slate-50 dark:hover:bg-gray-600'}
+          className={
+            cardStyle +
+            ' flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 dark:hover:bg-gray-600'
+          }
         >
           <span className="w-full text-center text-xs font-medium font-normal">Model: {model}</span>
         </Button>
         <Button
           type="button"
-          className={cardStyle + ' flex items-center justify-center hover:bg-slate-50 dark:hover:bg-gray-600'}
+          className={
+            cardStyle +
+            ' flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 dark:hover:bg-gray-600'
+          }
           onClick={triggerAdvancedMode}
         >
           <span className="w-full text-center text-xs font-medium font-normal">More</span>
@@ -38,11 +62,21 @@ function OpenAIOptions({ conversation = {} }) {
       <div
         className={
           cardStyle +
-          ' p-b-[40px] absolute left-4 right-4 bottom-[40px] flex h-[220px] flex-col rounded-md bg-white'
+          ' p-b-[40px] openAIOptions-advanced-container absolute left-4 right-4 bottom-[40px] flex flex-col overflow-hidden rounded-md bg-white px-0' +
+          (advancedMode ? ' show' : '')
         }
       >
-        <div>title</div>
-        <div>content</div>
+        <div className="flex w-full items-center justify-between bg-slate-100 px-4 py-2 dark:bg-white/10">
+          <span className="text-xs font-medium font-normal">Advanced settings for OpenAI endpoint</span>
+          <Button
+            type="button"
+            className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
+            onClick={switchToSimpleMode}
+          >
+            Switch to simple mode
+          </Button>
+        </div>
+        <div className="h-[200px]">content</div>
       </div>
     </>
   );
diff --git a/client/src/style.css b/client/src/style.css
index 86e343e63c..4d143cd4d2 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -28,6 +28,31 @@
   transition: all 1s ease-in-out;
 } */
 
+.openAIOptions-simple-container {
+  pointer-events: none;
+  opacity: 0;
+  transition: all 0.5s ease-in-out;
+}
+
+.openAIOptions-simple-container.show {
+  pointer-events: fill;
+  opacity: 1;
+}
+
+.openAIOptions-advanced-container {
+  pointer-events: none;
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+  transform: scaleY(0);
+  transform-origin: bottom center;
+}
+
+.openAIOptions-advanced-container.show {
+  pointer-events: fill;
+  opacity: 1;
+  transform: scaleY(1)
+}
+
 .bing-styles {
 position: absolute; 
 left: 0;