diff --git a/frontend/agentic-seek-front/src/App.css b/frontend/agentic-seek-front/src/App.css
index d9ac01c..b43c965 100644
--- a/frontend/agentic-seek-front/src/App.css
+++ b/frontend/agentic-seek-front/src/App.css
@@ -167,6 +167,88 @@ body {
   margin-bottom: 8px;
 }
 
+/* Message header layout */
+.message-header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.reasoning-toggle {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    color: #fff;
+    padding: 4px 8px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    align-self: flex-start;
+}
+
+.reasoning-toggle:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.reasoning-toggle:active {
+    transform: translateY(1px);
+}
+
+/* Reasoning content container */
+.reasoning-content {
+    margin-top: 12px;
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.2);
+    border-left: 3px solid rgba(255, 255, 255, 0.3);
+    border-radius: 0 4px 4px 0;
+    font-size: 0.9em;
+    line-height: 1.4;
+}
+
+.reasoning-content h1,
+.reasoning-content h2,
+.reasoning-content h3,
+.reasoning-content h4,
+.reasoning-content h5,
+.reasoning-content h6 {
+    font-size: 1em;
+    margin: 8px 0 4px 0;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.reasoning-content p {
+    margin: 6px 0;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+/* Alternative light theme styles */
+.message.user-message .reasoning-toggle {
+    background: rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.1);
+    color: #333;
+}
+
+.message.user-message .reasoning-toggle:hover {
+    background: rgba(0, 0, 0, 0.1);
+    border-color: rgba(0, 0, 0, 0.2);
+}
+
+.message.user-message .reasoning-content {
+    background: rgba(0, 0, 0, 0.03);
+    border-left-color: rgba(0, 0, 0, 0.2);
+}
+
+.message.user-message .reasoning-content p {
+    color: rgba(0, 0, 0, 0.7);
+}
+
 .placeholder {
   text-align: center;
   color: #64748b; /* lighter gray */
diff --git a/frontend/agentic-seek-front/src/App.js b/frontend/agentic-seek-front/src/App.js
index 7f16b9d..c1e6ba8 100644
--- a/frontend/agentic-seek-front/src/App.js
+++ b/frontend/agentic-seek-front/src/App.js
@@ -13,6 +13,7 @@ function App() {
     const [responseData, setResponseData] = useState(null);
     const [isOnline, setIsOnline] = useState(false);
     const [status, setStatus] = useState('Agents ready');
+    const [expandedReasoning, setExpandedReasoning] = useState(new Set());
     const messagesEndRef = useRef(null);
 
     useEffect(() => {
@@ -75,6 +76,18 @@ function App() {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     };
 
+    const toggleReasoning = (messageIndex) => {
+        setExpandedReasoning(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(messageIndex)) {
+                newSet.delete(messageIndex);
+            } else {
+                newSet.add(messageIndex);
+            }
+            return newSet;
+        });
+    };
+
     const fetchLatestAnswer = async () => {
         try {
             const res = await axios.get('http://127.0.0.1:8000/latest_answer');
@@ -186,8 +199,6 @@ function App() {
             </header>
             <main className="main">
                 <div className="app-sections">
-
-
                     <div className="chat-section">
                         <h2>Chat Interface</h2>
                         <div className="messages">
@@ -205,10 +216,28 @@ function App() {
                                                 : 'error-message'
                                         }`}
                                     >
-                                        {msg.type === 'agent' && (
-                                            <span className="agent-name">{msg.agentName}</span>
-                                        )}
-                                        <ReactMarkdown>{msg.content}</ReactMarkdown>
+                                        <div className="message-header">
+                                            {msg.type === 'agent' && (
+                                                <span className="agent-name">{msg.agentName}</span>
+                                            )}
+                                            {msg.type === 'agent' && msg.reasoning && expandedReasoning.has(index) && (
+                                                <div className="reasoning-content">
+                                                    <ReactMarkdown>{msg.reasoning}</ReactMarkdown>
+                                                </div>
+                                            )}
+                                            {msg.type === 'agent' && (
+                                                <button 
+                                                    className="reasoning-toggle"
+                                                    onClick={() => toggleReasoning(index)}
+                                                    title={expandedReasoning.has(index) ? "Hide reasoning" : "Show reasoning"}
+                                                >
+                                                    {expandedReasoning.has(index) ? '▼' : '▶'} Reasoning
+                                                </button>
+                                            )}
+                                        </div>
+                                        <div className="message-content">
+                                            <ReactMarkdown>{msg.content}</ReactMarkdown>
+                                        </div>
                                     </div>
                                 ))
                             )}
@@ -248,12 +277,6 @@ function App() {
                             >
                                 Browser View
                             </button>
-                            <button
-                                className={currentView === 'thinking' ? 'active' : ''}
-                                onClick={() => setCurrentView('thinking')}
-                            >
-                                Reasoning view
-                            </button>
                         </div>
                         <div className="content">
                             {error && <p className="error">{error}</p>}
@@ -279,33 +302,6 @@ function App() {
                                         </div>
                                     )}
                                 </div>
-                            ) : currentView == 'thinking' ? (
-                                <div className="thinking">
-                                    <div className="messages">
-                                        {messages.length === 0 ? (
-                                            <p className="placeholder">No thinking yet.</p>
-                                        ) : (
-                                            messages.map((msg, index) => (
-                                                <div
-                                                    key={index}
-                                                    className={`message ${
-                                                        msg.type === 'user'
-                                                            ? 'user-message'
-                                                            : msg.type === 'agent'
-                                                            ? 'agent-message'
-                                                            : 'error-message'
-                                                    }`}
-                                                >
-                                                    {msg.type === 'agent' && (
-                                                        <span className="agent-name">{msg.agentName}</span>
-                                                    )}
-                                                    <ReactMarkdown>{msg.reasoning}</ReactMarkdown>
-                                                </div>
-                                            ))
-                                        )}
-                                <div ref={messagesEndRef} />
-                        </div>
-                                </div>
                             ) : (
                                 <div className="screenshot">
                                     <img
@@ -327,4 +323,4 @@ function App() {
     );
 }
 
-export default App;
+export default App;
\ No newline at end of file