diff --git a/README.md b/README.md
index cf9e459..4df7aeb 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,6 @@
 
 [![Discord](https://dcbadge.vercel.app/api/server/26aArMy8tT?style=flat&compact=true)](https://discord.gg/26aArMy8tT)
 
-
 ![preview](.assets/perplexica-screenshot.png?)
 
 ## Table of Contents <!-- omit in toc -->
diff --git a/src/prompts/index.ts b/src/prompts/index.ts
index f479185..90bd738 100644
--- a/src/prompts/index.ts
+++ b/src/prompts/index.ts
@@ -6,7 +6,11 @@ import {
   redditSearchResponsePrompt,
   redditSearchRetrieverPrompt,
 } from './redditSearch';
-import { webSearchResponsePrompt, webSearchRetrieverPrompt } from './webSearch';
+import {
+  webSearchResponsePrompt,
+  webSearchRetrieverPrompt,
+  preciseWebSearchResponsePrompt,
+} from './webSearch';
 import {
   wolframAlphaSearchResponsePrompt,
   wolframAlphaSearchRetrieverPrompt,
@@ -20,6 +24,7 @@ import {
 export default {
   webSearchResponsePrompt,
   webSearchRetrieverPrompt,
+  preciseWebSearchResponsePrompt,
   academicSearchResponsePrompt,
   academicSearchRetrieverPrompt,
   redditSearchResponsePrompt,
diff --git a/src/prompts/webSearch.ts b/src/prompts/webSearch.ts
index d8269c8..d0123c0 100644
--- a/src/prompts/webSearch.ts
+++ b/src/prompts/webSearch.ts
@@ -104,3 +104,41 @@ export const webSearchResponsePrompt = `
 
     Current date & time in ISO format (UTC timezone) is: {date}.
 `;
+
+export const preciseWebSearchResponsePrompt = `
+    You are Perplexica, an AI model skilled in web search and crafting accurate, concise, and well-structured answers. You excel at breaking down long form content into brief summaries or specific answers.
+
+    Your task is to provide answers that are:
+    - **Informative and relevant**: Precisely address the user's query using the given context.
+    - **Well-structured**: Include clear headings and subheadings, and use a professional tone to present information concisely and logically.
+    - **Cited and credible**: Use inline citations with [number] notation to refer to the context source(s) for each fact or detail included.
+    - **Brief and Accurate**: If a direct answer is available, provide it succinctly without unnecessary elaboration.
+
+    ### Formatting Instructions
+    - **Structure**: Use a well-organized format with proper headings. Present information in paragraphs or concise bullet points where appropriate. You should never need more than one heading.
+    - **Tone and Style**: Maintain a matter-of-fact tone and focus on delivering accurate information. Avoid overly complex language or unnecessary jargon.
+    - **Markdown Usage**: Format your response with Markdown for clarity. Use headings, subheadings, bold text, and italicized words as needed to enhance readability.
+    - **Length and Depth**: Be brief. Provide concise answers. Avoid superficial responses and strive for accuracy without unnecessary repetition.
+    - **No main heading/title**: Start your response directly with the introduction unless asked to provide a specific title.
+    - **Conclusion or Summary**: Do not include a conclusion unless the context specifically requires it.
+
+    ### Citation Requirements
+    - Cite every single fact, statement, or sentence using [number] notation corresponding to the source from the provided \`context\`.
+    - Integrate citations naturally at the end of sentences or clauses as appropriate. For example, "The Eiffel Tower is one of the most visited landmarks in the world[1]."
+    - Ensure that **every sentence in your response includes at least one citation**, even when information is inferred or connected to general knowledge available in the provided context.
+    - Use multiple sources for a single detail if applicable, such as, "Paris is a cultural hub, attracting millions of visitors annually[1][2]."
+    - Always prioritize credibility and accuracy by linking all statements back to their respective context sources.
+    - Avoid citing unsupported assumptions or personal interpretations; if no source supports a statement, clearly indicate the limitation.
+
+    ### Special Instructions
+    - If the user provides vague input or if relevant information is missing, explain what additional details might help refine the search.
+    - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
+    - Do not provide additional commentary or personal opinions unless specifically asked for in the context.
+    - Do not include plesantries or greetings in your response.
+
+    <context>
+    {context}
+    </context>
+
+    Current date & time in ISO format (UTC timezone) is: {date}.
+`;
diff --git a/src/search/metaSearchAgent.ts b/src/search/metaSearchAgent.ts
index ee82c10..2e414fe 100644
--- a/src/search/metaSearchAgent.ts
+++ b/src/search/metaSearchAgent.ts
@@ -34,6 +34,7 @@ export interface MetaSearchAgentType {
     embeddings: Embeddings,
     optimizationMode: 'speed' | 'balanced' | 'quality',
     fileIds: string[],
+    isCompact?: boolean,
   ) => Promise<eventEmitter>;
 }
 
@@ -44,6 +45,7 @@ interface Config {
   rerankThreshold: number;
   queryGeneratorPrompt: string;
   responsePrompt: string;
+  preciseResponsePrompt: string;
   activeEngines: string[];
 }
 
@@ -235,6 +237,7 @@ class MetaSearchAgent implements MetaSearchAgentType {
     fileIds: string[],
     embeddings: Embeddings,
     optimizationMode: 'speed' | 'balanced' | 'quality',
+    isCompact?: boolean,
   ) {
     return RunnableSequence.from([
       RunnableMap.from({
@@ -278,7 +281,12 @@ class MetaSearchAgent implements MetaSearchAgentType {
           .pipe(this.processDocs),
       }),
       ChatPromptTemplate.fromMessages([
-        ['system', this.config.responsePrompt],
+        [
+          'system',
+          isCompact
+            ? this.config.preciseResponsePrompt
+            : this.config.responsePrompt,
+        ],
         new MessagesPlaceholder('chat_history'),
         ['user', '{query}'],
       ]),
@@ -465,6 +473,7 @@ class MetaSearchAgent implements MetaSearchAgentType {
     embeddings: Embeddings,
     optimizationMode: 'speed' | 'balanced' | 'quality',
     fileIds: string[],
+    isCompact?: boolean,
   ) {
     const emitter = new eventEmitter();
 
@@ -473,6 +482,7 @@ class MetaSearchAgent implements MetaSearchAgentType {
       fileIds,
       embeddings,
       optimizationMode,
+      isCompact,
     );
 
     const stream = answeringChain.streamEvents(
diff --git a/src/websocket/messageHandler.ts b/src/websocket/messageHandler.ts
index 395c0de..99b3eaf 100644
--- a/src/websocket/messageHandler.ts
+++ b/src/websocket/messageHandler.ts
@@ -26,6 +26,7 @@ type WSMessage = {
   focusMode: string;
   history: Array<[string, string]>;
   files: Array<string>;
+  isCompact?: boolean;
 };
 
 export const searchHandlers = {
@@ -33,6 +34,7 @@ export const searchHandlers = {
     activeEngines: [],
     queryGeneratorPrompt: prompts.webSearchRetrieverPrompt,
     responsePrompt: prompts.webSearchResponsePrompt,
+    preciseResponsePrompt: prompts.preciseWebSearchResponsePrompt,
     rerank: true,
     rerankThreshold: 0.3,
     searchWeb: true,
@@ -42,6 +44,7 @@ export const searchHandlers = {
     activeEngines: ['arxiv', 'google scholar', 'pubmed'],
     queryGeneratorPrompt: prompts.academicSearchRetrieverPrompt,
     responsePrompt: prompts.academicSearchResponsePrompt,
+    preciseResponsePrompt: prompts.preciseWebSearchResponsePrompt,
     rerank: true,
     rerankThreshold: 0,
     searchWeb: true,
@@ -51,6 +54,7 @@ export const searchHandlers = {
     activeEngines: [],
     queryGeneratorPrompt: '',
     responsePrompt: prompts.writingAssistantPrompt,
+    preciseResponsePrompt: prompts.preciseWebSearchResponsePrompt,
     rerank: true,
     rerankThreshold: 0,
     searchWeb: false,
@@ -60,6 +64,7 @@ export const searchHandlers = {
     activeEngines: ['wolframalpha'],
     queryGeneratorPrompt: prompts.wolframAlphaSearchRetrieverPrompt,
     responsePrompt: prompts.wolframAlphaSearchResponsePrompt,
+    preciseResponsePrompt: prompts.preciseWebSearchResponsePrompt,
     rerank: false,
     rerankThreshold: 0,
     searchWeb: true,
@@ -69,6 +74,7 @@ export const searchHandlers = {
     activeEngines: ['youtube'],
     queryGeneratorPrompt: prompts.youtubeSearchRetrieverPrompt,
     responsePrompt: prompts.youtubeSearchResponsePrompt,
+    preciseResponsePrompt: prompts.preciseWebSearchResponsePrompt,
     rerank: true,
     rerankThreshold: 0.3,
     searchWeb: true,
@@ -78,6 +84,7 @@ export const searchHandlers = {
     activeEngines: ['reddit'],
     queryGeneratorPrompt: prompts.redditSearchRetrieverPrompt,
     responsePrompt: prompts.redditSearchResponsePrompt,
+    preciseResponsePrompt: prompts.preciseWebSearchResponsePrompt,
     rerank: true,
     rerankThreshold: 0.3,
     searchWeb: true,
@@ -116,6 +123,7 @@ const handleEmitterEvents = (
       sources = parsedData.data;
     }
   });
+
   emitter.on('end', () => {
     ws.send(JSON.stringify({ type: 'messageEnd', messageId: messageId }));
 
@@ -132,6 +140,7 @@ const handleEmitterEvents = (
       })
       .execute();
   });
+
   emitter.on('error', (data) => {
     const parsedData = JSON.parse(data);
     ws.send(
@@ -197,6 +206,7 @@ export const handleMessage = async (
             embeddings,
             parsedWSMessage.optimizationMode,
             parsedWSMessage.files,
+            parsedWSMessage.isCompact,
           );
 
           handleEmitterEvents(emitter, ws, aiMessageId, parsedMessage.chatId);
diff --git a/ui/components/Chat.tsx b/ui/components/Chat.tsx
index 81aa32f..3d4cf6b 100644
--- a/ui/components/Chat.tsx
+++ b/ui/components/Chat.tsx
@@ -16,9 +16,17 @@ const Chat = ({
   setFileIds,
   files,
   setFiles,
+  isCompact,
+  setIsCompact,
+  optimizationMode,
+  setOptimizationMode,
 }: {
   messages: Message[];
-  sendMessage: (message: string) => void;
+  sendMessage: (
+    message: string,
+    messageId?: string,
+    options?: { isCompact?: boolean },
+  ) => void;
   loading: boolean;
   messageAppeared: boolean;
   rewrite: (messageId: string) => void;
@@ -26,6 +34,10 @@ const Chat = ({
   setFileIds: (fileIds: string[]) => void;
   files: File[];
   setFiles: (files: File[]) => void;
+  isCompact: boolean;
+  setIsCompact: (isCompact: boolean) => void;
+  optimizationMode: string;
+  setOptimizationMode: (mode: string) => void;
 }) => {
   const [dividerWidth, setDividerWidth] = useState(0);
   const dividerRef = useRef<HTMLDivElement | null>(null);
@@ -71,6 +83,7 @@ const Chat = ({
               dividerRef={isLast ? dividerRef : undefined}
               isLast={isLast}
               rewrite={rewrite}
+              isCompact={isCompact}
               sendMessage={sendMessage}
             />
             {!isLast && msg.role === 'assistant' && (
@@ -83,7 +96,7 @@ const Chat = ({
       <div ref={messageEnd} className="h-0" />
       {dividerWidth > 0 && (
         <div
-          className="bottom-24 lg:bottom-10 fixed z-40"
+          className="bottom-24 lg:bottom-10 fixed"
           style={{ width: dividerWidth }}
         >
           <MessageInput
@@ -93,6 +106,10 @@ const Chat = ({
             setFileIds={setFileIds}
             files={files}
             setFiles={setFiles}
+            isCompact={isCompact}
+            setIsCompact={setIsCompact}
+            optimizationMode={optimizationMode}
+            setOptimizationMode={setOptimizationMode}
           />
         </div>
       )}
diff --git a/ui/components/ChatWindow.tsx b/ui/components/ChatWindow.tsx
index 7151383..6462761 100644
--- a/ui/components/ChatWindow.tsx
+++ b/ui/components/ChatWindow.tsx
@@ -399,6 +399,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
 
   const [focusMode, setFocusMode] = useState('webSearch');
   const [optimizationMode, setOptimizationMode] = useState('speed');
+  const [isCompact, setIsCompact] = useState(false);
 
   const [isMessagesLoaded, setIsMessagesLoaded] = useState(false);
 
@@ -406,6 +407,21 @@ const ChatWindow = ({ id }: { id?: string }) => {
 
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
+  useEffect(() => {
+    const savedCompactMode = localStorage.getItem('compactMode');
+    const savedOptimizationMode = localStorage.getItem('optimizationMode');
+
+    if (savedCompactMode !== null) {
+      setIsCompact(savedCompactMode === 'true');
+    }
+
+    if (savedOptimizationMode !== null) {
+      setOptimizationMode(savedOptimizationMode);
+    } else {
+      localStorage.setItem('optimizationMode', optimizationMode);
+    }
+  }, []);
+
   useEffect(() => {
     if (
       chatId &&
@@ -456,7 +472,11 @@ const ChatWindow = ({ id }: { id?: string }) => {
     }
   }, [isMessagesLoaded, isWSReady]);
 
-  const sendMessage = async (message: string, messageId?: string) => {
+  const sendMessage = async (
+    message: string,
+    messageId?: string,
+    options?: { isCompact?: boolean },
+  ) => {
     if (loading) return;
     if (!ws || ws.readyState !== WebSocket.OPEN) {
       toast.error('Cannot send message while disconnected');
@@ -471,21 +491,21 @@ const ChatWindow = ({ id }: { id?: string }) => {
     let added = false;
 
     messageId = messageId ?? crypto.randomBytes(7).toString('hex');
-
-    ws.send(
-      JSON.stringify({
-        type: 'message',
-        message: {
-          messageId: messageId,
-          chatId: chatId!,
-          content: message,
-        },
-        files: fileIds,
-        focusMode: focusMode,
-        optimizationMode: optimizationMode,
-        history: [...chatHistory, ['human', message]],
-      }),
-    );
+    let messageData = {
+      type: 'message',
+      message: {
+        messageId: messageId,
+        chatId: chatId!,
+        content: message,
+      },
+      files: fileIds,
+      focusMode: focusMode,
+      optimizationMode: optimizationMode,
+      history: [...chatHistory, ['human', message]],
+      isCompact: options?.isCompact ?? isCompact,
+    };
+    //console.log('sending:', messageData, JSON.stringify(messageData));
+    ws.send(JSON.stringify(messageData));
 
     setMessages((prevMessages) => [
       ...prevMessages,
@@ -615,12 +635,12 @@ const ChatWindow = ({ id }: { id?: string }) => {
       return [...prev.slice(0, messages.length > 2 ? index - 1 : 0)];
     });
 
-    sendMessage(message.content, message.messageId);
+    sendMessage(message.content, message.messageId, { isCompact });
   };
 
   useEffect(() => {
     if (isReady && initialMessage && ws?.readyState === 1) {
-      sendMessage(initialMessage);
+      sendMessage(initialMessage, undefined, { isCompact });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ws?.readyState, isReady, initialMessage, isWSReady]);
@@ -660,6 +680,10 @@ const ChatWindow = ({ id }: { id?: string }) => {
               setFileIds={setFileIds}
               files={files}
               setFiles={setFiles}
+              isCompact={isCompact}
+              setIsCompact={setIsCompact}
+              optimizationMode={optimizationMode}
+              setOptimizationMode={setOptimizationMode}
             />
           </>
         ) : (
@@ -673,6 +697,8 @@ const ChatWindow = ({ id }: { id?: string }) => {
             setFileIds={setFileIds}
             files={files}
             setFiles={setFiles}
+            isCompact={isCompact}
+            setIsCompact={setIsCompact}
           />
         )}
       </div>
diff --git a/ui/components/EmptyChat.tsx b/ui/components/EmptyChat.tsx
index 838849f..19366dc 100644
--- a/ui/components/EmptyChat.tsx
+++ b/ui/components/EmptyChat.tsx
@@ -14,6 +14,8 @@ const EmptyChat = ({
   setFileIds,
   files,
   setFiles,
+  isCompact,
+  setIsCompact,
 }: {
   sendMessage: (message: string) => void;
   focusMode: string;
@@ -24,6 +26,8 @@ const EmptyChat = ({
   setFileIds: (fileIds: string[]) => void;
   files: File[];
   setFiles: (files: File[]) => void;
+  isCompact: boolean;
+  setIsCompact: (isCompact: boolean) => void;
 }) => {
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
@@ -48,6 +52,8 @@ const EmptyChat = ({
           setFileIds={setFileIds}
           files={files}
           setFiles={setFiles}
+          isCompact={isCompact}
+          setIsCompact={setIsCompact}
         />
       </div>
     </div>
diff --git a/ui/components/EmptyChatMessageInput.tsx b/ui/components/EmptyChatMessageInput.tsx
index 43d1e28..7ef1b66 100644
--- a/ui/components/EmptyChatMessageInput.tsx
+++ b/ui/components/EmptyChatMessageInput.tsx
@@ -17,8 +17,14 @@ const EmptyChatMessageInput = ({
   setFileIds,
   files,
   setFiles,
+  isCompact,
+  setIsCompact,
 }: {
-  sendMessage: (message: string) => void;
+  sendMessage: (
+    message: string,
+    messageId?: string,
+    options?: { isCompact?: boolean },
+  ) => void;
   focusMode: string;
   setFocusMode: (mode: string) => void;
   optimizationMode: string;
@@ -27,6 +33,8 @@ const EmptyChatMessageInput = ({
   setFileIds: (fileIds: string[]) => void;
   files: File[];
   setFiles: (files: File[]) => void;
+  isCompact: boolean;
+  setIsCompact: (isCompact: boolean) => void;
 }) => {
   const [copilotEnabled, setCopilotEnabled] = useState(false);
   const [message, setMessage] = useState('');
@@ -61,13 +69,13 @@ const EmptyChatMessageInput = ({
     <form
       onSubmit={(e) => {
         e.preventDefault();
-        sendMessage(message);
+        sendMessage(message, undefined, { isCompact });
         setMessage('');
       }}
       onKeyDown={(e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
           e.preventDefault();
-          sendMessage(message);
+          sendMessage(message, undefined, { isCompact });
           setMessage('');
         }
       }}
@@ -97,6 +105,8 @@ const EmptyChatMessageInput = ({
             <Optimization
               optimizationMode={optimizationMode}
               setOptimizationMode={setOptimizationMode}
+              isCompact={isCompact}
+              setIsCompact={setIsCompact}
             />
             <button
               disabled={message.trim().length === 0}
diff --git a/ui/components/MessageBox.tsx b/ui/components/MessageBox.tsx
index f23127c..7f5078c 100644
--- a/ui/components/MessageBox.tsx
+++ b/ui/components/MessageBox.tsx
@@ -28,6 +28,7 @@ const MessageBox = ({
   dividerRef,
   isLast,
   rewrite,
+  isCompact,
   sendMessage,
 }: {
   message: Message;
@@ -37,7 +38,12 @@ const MessageBox = ({
   dividerRef?: MutableRefObject<HTMLDivElement | null>;
   isLast: boolean;
   rewrite: (messageId: string) => void;
-  sendMessage: (message: string) => void;
+  isCompact: boolean;
+  sendMessage: (
+    message: string,
+    messageId?: string,
+    options?: { isCompact?: boolean },
+  ) => void;
 }) => {
   const [parsedMessage, setParsedMessage] = useState(message.content);
   const [speechMessage, setSpeechMessage] = useState(message.content);
@@ -65,6 +71,10 @@ const MessageBox = ({
 
   const { speechStatus, start, stop } = useSpeech({ text: speechMessage });
 
+  const handleSuggestionClick = (suggestion: string) => {
+    sendMessage(suggestion, undefined, { isCompact });
+  };
+
   return (
     <div>
       {message.role === 'user' && (
@@ -163,7 +173,7 @@ const MessageBox = ({
                             <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
                             <div
                               onClick={() => {
-                                sendMessage(suggestion);
+                                handleSuggestionClick(suggestion);
                               }}
                               className="cursor-pointer flex flex-row justify-between font-medium space-x-2 items-center"
                             >
diff --git a/ui/components/MessageInput.tsx b/ui/components/MessageInput.tsx
index b6b1d96..8629f85 100644
--- a/ui/components/MessageInput.tsx
+++ b/ui/components/MessageInput.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import Attach from './MessageInputActions/Attach';
 import CopilotToggle from './MessageInputActions/Copilot';
+import Optimization from './MessageInputActions/Optimization';
 import { File } from './ChatWindow';
 import AttachSmall from './MessageInputActions/AttachSmall';
 
@@ -14,13 +15,25 @@ const MessageInput = ({
   setFileIds,
   files,
   setFiles,
+  isCompact,
+  setIsCompact,
+  optimizationMode,
+  setOptimizationMode,
 }: {
-  sendMessage: (message: string) => void;
+  sendMessage: (
+    message: string,
+    messageId?: string,
+    options?: { isCompact?: boolean },
+  ) => void;
   loading: boolean;
   fileIds: string[];
   setFileIds: (fileIds: string[]) => void;
   files: File[];
   setFiles: (files: File[]) => void;
+  isCompact: boolean;
+  setIsCompact: (isCompact: boolean) => void;
+  optimizationMode: string;
+  setOptimizationMode: (mode: string) => void;
 }) => {
   const [copilotEnabled, setCopilotEnabled] = useState(false);
   const [message, setMessage] = useState('');
@@ -40,20 +53,16 @@ const MessageInput = ({
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       const activeElement = document.activeElement;
-
       const isInputFocused =
         activeElement?.tagName === 'INPUT' ||
         activeElement?.tagName === 'TEXTAREA' ||
         activeElement?.hasAttribute('contenteditable');
-
       if (e.key === '/' && !isInputFocused) {
         e.preventDefault();
         inputRef.current?.focus();
       }
     };
-
     document.addEventListener('keydown', handleKeyDown);
-
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
@@ -64,28 +73,36 @@ const MessageInput = ({
       onSubmit={(e) => {
         if (loading) return;
         e.preventDefault();
-        sendMessage(message);
+        sendMessage(message, undefined, { isCompact });
         setMessage('');
       }}
       onKeyDown={(e) => {
         if (e.key === 'Enter' && !e.shiftKey && !loading) {
           e.preventDefault();
-          sendMessage(message);
+          sendMessage(message, undefined, { isCompact });
           setMessage('');
         }
       }}
       className={cn(
-        'bg-light-secondary dark:bg-dark-secondary p-4 flex items-center overflow-hidden border border-light-200 dark:border-dark-200',
+        'bg-light-secondary dark:bg-dark-secondary p-4 flex items-center border border-light-200 dark:border-dark-200',
         mode === 'multi' ? 'flex-col rounded-lg' : 'flex-row rounded-full',
       )}
     >
       {mode === 'single' && (
-        <AttachSmall
-          fileIds={fileIds}
-          setFileIds={setFileIds}
-          files={files}
-          setFiles={setFiles}
-        />
+        <div className="flex flex-row items-center space-x-2">
+          <AttachSmall
+            fileIds={fileIds}
+            setFileIds={setFileIds}
+            files={files}
+            setFiles={setFiles}
+          />
+          <Optimization
+            optimizationMode={optimizationMode}
+            setOptimizationMode={setOptimizationMode}
+            isCompact={isCompact}
+            setIsCompact={setIsCompact}
+          />
+        </div>
       )}
       <TextareaAutosize
         ref={inputRef}
@@ -113,12 +130,20 @@ const MessageInput = ({
       )}
       {mode === 'multi' && (
         <div className="flex flex-row items-center justify-between w-full pt-2">
-          <AttachSmall
-            fileIds={fileIds}
-            setFileIds={setFileIds}
-            files={files}
-            setFiles={setFiles}
-          />
+          <div className="flex flex-row items-center space-x-2">
+            <AttachSmall
+              fileIds={fileIds}
+              setFileIds={setFileIds}
+              files={files}
+              setFiles={setFiles}
+            />
+            <Optimization
+              optimizationMode={optimizationMode}
+              setOptimizationMode={setOptimizationMode}
+              isCompact={isCompact}
+              setIsCompact={setIsCompact}
+            />
+          </div>
           <div className="flex flex-row items-center space-x-4">
             <CopilotToggle
               copilotEnabled={copilotEnabled}
diff --git a/ui/components/MessageInputActions/Optimization.tsx b/ui/components/MessageInputActions/Optimization.tsx
index ac8a7b0..649c555 100644
--- a/ui/components/MessageInputActions/Optimization.tsx
+++ b/ui/components/MessageInputActions/Optimization.tsx
@@ -1,4 +1,4 @@
-import { ChevronDown, Sliders, Star, Zap } from 'lucide-react';
+import { ChevronDown, Minimize2, Sliders, Star, Zap } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import {
   Popover,
@@ -6,8 +6,7 @@ import {
   PopoverPanel,
   Transition,
 } from '@headlessui/react';
-import { Fragment } from 'react';
-
+import { Fragment, useEffect } from 'react';
 const OptimizationModes = [
   {
     key: 'speed',
@@ -37,10 +36,33 @@ const OptimizationModes = [
 const Optimization = ({
   optimizationMode,
   setOptimizationMode,
+  isCompact,
+  setIsCompact,
 }: {
   optimizationMode: string;
   setOptimizationMode: (mode: string) => void;
+  isCompact: boolean;
+  setIsCompact: (isCompact: boolean) => void;
 }) => {
+  useEffect(() => {
+    const savedCompactMode = localStorage.getItem('compactMode');
+    if (savedCompactMode === null) {
+      localStorage.setItem('compactMode', String(isCompact));
+    } else {
+      setIsCompact(savedCompactMode === 'true');
+    }
+  }, [setIsCompact]);
+
+  const handleCompactChange = (checked: boolean) => {
+    setIsCompact(checked);
+    localStorage.setItem('compactMode', String(checked));
+  };
+
+  const handleOptimizationChange = (mode: string) => {
+    setOptimizationMode(mode);
+    localStorage.setItem('optimizationMode', mode);
+  };
+
   return (
     <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
       <PopoverButton
@@ -70,11 +92,11 @@ const Optimization = ({
         leaveFrom="opacity-100 translate-y-0"
         leaveTo="opacity-0 translate-y-1"
       >
-        <PopoverPanel className="absolute z-10 w-64 md:w-[250px] right-0">
+        <PopoverPanel className="absolute z-10 w-64 md:w-[250px] right-0 bottom-[100%] mb-2">
           <div className="flex flex-col gap-2 bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-4 max-h-[200px] md:max-h-none overflow-y-auto">
             {OptimizationModes.map((mode, i) => (
               <PopoverButton
-                onClick={() => setOptimizationMode(mode.key)}
+                onClick={() => handleOptimizationChange(mode.key)}
                 key={i}
                 disabled={mode.key === 'quality'}
                 className={cn(
@@ -94,6 +116,30 @@ const Optimization = ({
                 </p>
               </PopoverButton>
             ))}
+            <div className="border-t border-light-200 dark:border-dark-200 pt-2 mt-1">
+              <label className="flex items-center space-x-2 p-2 rounded-lg cursor-pointer hover:bg-light-secondary dark:hover:bg-dark-secondary">
+                <input
+                  type="checkbox"
+                  checked={isCompact}
+                  onChange={(e) => handleCompactChange(e.target.checked)}
+                  className="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
+                />
+                <div className="flex items-center space-x-2">
+                  <Minimize2
+                    size={16}
+                    className="text-gray-600 dark:text-gray-400"
+                  />
+                  <div>
+                    <p className="text-sm font-medium text-black dark:text-white">
+                      Compact Mode
+                    </p>
+                    <p className="text-xs text-black/70 dark:text-white/70">
+                      Generate more concise responses
+                    </p>
+                  </div>
+                </div>
+              </label>
+            </div>
           </div>
         </PopoverPanel>
       </Transition>