diff --git a/ui/client-app/src/components/ChatWindow.js b/ui/client-app/src/components/ChatWindow.js
index c2f2401..77dc975 100644
--- a/ui/client-app/src/components/ChatWindow.js
+++ b/ui/client-app/src/components/ChatWindow.js
@@ -1,14 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import ReactMarkdown from 'react-markdown';
 import './ChatWindow.css';
-import FileListComponent from "./FileList";
-import DiffViewer from "./DiffViewer";
-import CodeChangePlan from "./CodeChangePlan";
 import { FaRegCopy, FaCopy, FaVolumeUp, FaPlay, FaPause, FaDownload, FaSyncAlt } from 'react-icons/fa'; // Import the icons
 
 // Individual message component
 const ChatMessage = ({ message, index, onSynthesize, featureName = "default", activePlayingId, onPlayStateChange }) => {
-  const [selectedFile, setSelectedFile] = useState(null);
   const [isReasoningExpanded, setIsReasoningExpanded] = useState(false);
   const [audioUrl, setAudioUrl] = useState(null);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -81,13 +77,6 @@
     setIsReasoningExpanded(!isReasoningExpanded);
   };
 
-  const handleCloseDiff = () => {
-    setSelectedFile(null);
-  };
-
-  const handleFileClick = (file) => {
-    setSelectedFile(file);
-  };
   // Function to copy text to clipboard
   const handleCopy = async () => {
     if (message.text) {
@@ -210,13 +199,6 @@
           </div>
         </div>
       )}
-      {message.code_changes && (
-        <FileListComponent code_changes={message.code_changes} onFileClick={handleFileClick} />
-      )}
-      {message.steps && (
-        <CodeChangePlan steps={message.steps} />
-      )}
-      {selectedFile && <DiffViewer oldContent={selectedFile.old} newContent={selectedFile.new} filePath={selectedFile.filepath} onClose={handleCloseDiff} />}
     </div>
   );
 };
diff --git a/ui/client-app/src/components/CodeChangePlan.css b/ui/client-app/src/components/CodeChangePlan.css
deleted file mode 100644
index b8fccea..0000000
--- a/ui/client-app/src/components/CodeChangePlan.css
+++ /dev/null
@@ -1,105 +0,0 @@
-/* Container for the list */
-.code-change-plan {
-  list-style: none;
-  padding: 0;
-  margin: 1rem 0;
-  font-family: 'Inter', sans-serif;
-  counter-reset: step-counter;
-}
-
-/* Style for each list item */
-.code-change-plan-step {
-  background-color: #f7f9fc;
-  border: 1px solid #e0e6ed;
-  border-radius: 8px;
-  padding: 1rem;
-  margin-bottom: 0.75rem;
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  cursor: pointer;
-  position: relative; /* Required for absolute tooltip */
-  counter-increment: step-counter;
-}
-
-/* Add a hover effect */
-.code-change-plan-step:hover {
-  background-color: #e6e9ef;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* Step prefix before each item */
-.code-change-plan-step::before {
-  content: "Step " counter(step-counter) ".";
-  font-size: 0.9rem;
-  font-weight: bold;
-  color: #3b82f6;
-  flex-shrink: 0;
-  margin-right: 0.5rem;
-}
-
-/* Text content */
-.code-change-plan-step p {
-  margin: 0;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  color: #333;
-  flex: 1;
-}
-
-/* --- Updated Tooltip Styles --- */
-.step-details-popdown {
-  position: absolute;
-  left: 100%;
-  top: 0;
-  margin-left: 10px;
-  padding: 10px;
-  background-color: #ffffff; /* Lighter background, perhaps white or a very light grey */
-  color: #333; /* Darker text for contrast on light background */
-  border: 1px solid #e0e6ed; /* Border matching list items */
-  border-radius: 8px; /* Matching border radius */
-  white-space: nowrap;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Softer, slightly larger shadow */
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.tooltip-action {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: bold;
-  color: #333; /* Ensure action text is dark for readability */
-}
-
-.tooltip-file-path {
-  font-family: monospace;
-  font-size: 0.9em;
-  color: #555; /* Slightly darker grey for filepath */
-  border-top: 1px solid #e0e6ed; /* Lighter border for separation */
-  padding-top: 5px;
-  margin-top: 5px;
-}
-
-/* Icon colors remain the same for clear visual cues */
-.create-icon {
-  color: #28a745; /* Green for create */
-}
-
-.delete-icon {
-  color: #dc3545; /* Red for delete */
-}
-
-.modify-icon {
-  color: #ffc107; /* Yellow for modify */
-}
-
-.code-change-plan {
-  overflow: visible;
-  position: relative; /* ensures tooltip is positioned correctly */
-}
diff --git a/ui/client-app/src/components/CodeChangePlan.js b/ui/client-app/src/components/CodeChangePlan.js
deleted file mode 100644
index 379a26b..0000000
--- a/ui/client-app/src/components/CodeChangePlan.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { createPortal } from 'react-dom';
-import { useRef, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import './CodeChangePlan.css';
-import { FaPlus, FaTrash, FaEdit } from 'react-icons/fa';
-
-// Tooltip component
-const StepDetails = ({ stepItem, position }) => {
-  const style = {
-    position: 'absolute',
-    top: position?.top ?? 0,
-    left: position?.left ?? 0,
-  };
-
-  return (
-    <div className="step-details-popdown" style={style}>
-      <div className="tooltip-action">
-        {stepItem.action === 'create' && <FaPlus className="create-icon" />}
-        {stepItem.action === 'delete' && <FaTrash className="delete-icon" />}
-        {stepItem.action === 'modify' && <FaEdit className="modify-icon" />}
-        <span>
-          {stepItem.action === 'create'
-            ? 'Create File'
-            : stepItem.action === 'delete'
-            ? 'Delete File'
-            : stepItem.action === 'modify'
-            ? 'Modify File'
-            : stepItem.action}
-        </span>
-      </div>
-      <div className="tooltip-file-path">{stepItem.file_path}</div>
-    </div>
-  );
-};
-
-// Main component
-const CodeChangePlan = ({ steps }) => {
-  const [hoveredStepIndex, setHoveredStepIndex] = useState(null);
-  const [tooltipPosition, setTooltipPosition] = useState(null);
-  const stepRefs = useRef([]);
-
-  const handleMouseEnter = (index) => {
-    const stepElement = stepRefs.current[index];
-    if (stepElement) {
-      const rect = stepElement.getBoundingClientRect();
-    //   const tooltipPadding = 10;
-
-      setTooltipPosition({
-        top: rect.bottom + window.scrollY + 6,  // 6px spacing
-        left: rect.left + window.scrollX,
-        });
-    }
-    setHoveredStepIndex(index);
-  };
-
-  const handleMouseLeave = () => {
-    setHoveredStepIndex(null);
-    setTooltipPosition(null);
-  };
-
-  return (
-    <>
-      <ul className="code-change-plan">
-        {steps.map((step, index) => (
-          <li
-            key={index}
-            className="code-change-plan-step"
-            onMouseEnter={() => handleMouseEnter(index)}
-            onMouseLeave={handleMouseLeave}
-            ref={(el) => (stepRefs.current[index] = el)}
-          >
-            <ReactMarkdown>{step.change_instruction}</ReactMarkdown>
-          </li>
-        ))}
-      </ul>
-
-      {hoveredStepIndex !== null &&
-        createPortal(
-          <StepDetails
-            stepItem={steps[hoveredStepIndex]}
-            position={tooltipPosition}
-          />,
-          document.body
-        )}
-    </>
-  );
-};
-
-export default CodeChangePlan;
diff --git a/ui/client-app/src/components/DiffViewer.css b/ui/client-app/src/components/DiffViewer.css
deleted file mode 100644
index eac3042..0000000
--- a/ui/client-app/src/components/DiffViewer.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.d2h-code-side-linenumber,
-.d2h-code-linenumber,
-.d2h-info,
-.d2h-file-header {
-  position: static !important;
-  background: inherit !important;
-  z-index: auto !important;
-}
-
-ol li::before {
-      content: "";
-}
\ No newline at end of file
diff --git a/ui/client-app/src/components/DiffViewer.js b/ui/client-app/src/components/DiffViewer.js
deleted file mode 100644
index ba5d04c..0000000
--- a/ui/client-app/src/components/DiffViewer.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { createTwoFilesPatch } from 'diff';
-import { parse, html } from 'diff2html';
-import 'diff2html/bundles/css/diff2html.min.css';
-import './DiffViewer.css';
-
-const DiffViewer = ({ oldContent, newContent, filePath, onClose }) => {
-  const [diffHtml, setDiffHtml] = useState("");
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-
-  useEffect(() => {
-    // Generate the unified diff format
-    const generatedDiff = createTwoFilesPatch(
-      filePath,
-      filePath,
-      oldContent,
-      newContent,
-      'old version',
-      'new version'
-    );
-
-    // Parse the unified diff to an internal data structure
-    const diffJson = parse(generatedDiff);
-
-    // Use diff2html to generate the side-by-side HTML
-    const configuration = {
-      drawFileList: true,
-      matching: 'lines',
-      outputFormat: 'side-by-side' // Crucial for side-by-side view
-    };
-    const htmlOutput = html(diffJson, configuration);
-    setDiffHtml(htmlOutput);
-  }, [oldContent, newContent, filePath]);
-
-  if (!diffHtml) return null;
-
-  const handleDownload = (fileType) => {
-    let content, filename;
-
-    switch (fileType) {
-      case 'diff':
-        content = createTwoFilesPatch(
-          filePath,
-          filePath,
-          oldContent,
-          newContent,
-          'old version',
-          'new version'
-        );
-        filename = `${filePath.split('/').pop()}_changes.diff`;
-        break;
-      case 'old':
-        content = oldContent;
-        filename = `${filePath.split('/').pop()}_old.txt`;
-        break;
-      case 'new':
-        content = newContent;
-        filename = `${filePath.split('/').pop()}_new.txt`;
-        break;
-      default:
-        return;
-    }
-
-    const blob = new Blob([content], { type: 'text/plain' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = filename;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-    setIsDropdownOpen(false); // Close the dropdown after download
-  };
-
-  return (
-    <div className="fixed inset-0 bg-gray-900 bg-opacity-75 z-50 flex items-center justify-center p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-10xl w-full max-h-[90vh] flex flex-col overflow-hidden">
-        <div className="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700">
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Changes in {filePath}</h2>
-          <div className="flex items-center space-x-2">
-            <div className="relative">
-             <button
-                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                className="flex items-center space-x-1 px-4 py-2 rounded-md text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-200"
-              >
-               <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
-                <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
-                </svg>
-                <span>Download</span>
-              </button>
-              {isDropdownOpen && (
-                <div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-                  <div className="py-1">
-                    <button
-                      onClick={() => handleDownload('diff')}
-                      className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 w-full text-left"
-                    >
-                      Download Diff
-                    </button>
-                    <button
-                      onClick={() => handleDownload('old')}
-                      className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 w-full text-left"
-                    >
-                      Download Old File
-                    </button>
-                    <button
-                      onClick={() => handleDownload('new')}
-                      className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 w-full text-left"
-                    >
-                      Download New File
-                    </button>
-                  </div>
-                </div>
-              )}
-            </div>
-            <button
-              onClick={onClose}
-              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div className="flex-grow p-4 overflow-y-auto" dangerouslySetInnerHTML={{ __html: diffHtml }} />
-      </div>
-    </div>
-  );
-};
-
-export default DiffViewer;
\ No newline at end of file
diff --git a/ui/client-app/src/components/FileList.js b/ui/client-app/src/components/FileList.js
deleted file mode 100644
index 80c6d9c..0000000
--- a/ui/client-app/src/components/FileList.js
+++ /dev/null
@@ -1,35 +0,0 @@
-// FileListComponent.jsx
-import React from "react";
-import ReactMarkdown from 'react-markdown';
-
-const FileListComponent = ({ code_changes, onFileClick }) => {
-  const filesArray = code_changes ? Object.keys(code_changes).map(filepath => ({
-    filepath,
-    ...code_changes[filepath]
-  })) : [];
-
-  return (
-    <div className="mt-4 border border-gray-300 dark:border-gray-600 rounded-lg p-2 space-y-2">
-      <div className="font-semibold text-sm text-gray-700 dark:text-gray-300">Files:</div>
-      {filesArray.map((file, index) => (
-        <div
-          key={index}
-          className="cursor-pointer bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 p-3 rounded-md shadow-sm transition-colors duration-200"
-          onClick={() => onFileClick(file)}
-        >
-          <div className="flex items-center space-x-2">
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
-              <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 2h2v2H6V6zm3 0h2v2H9V6zm3 0h2v2h-2V6z" clipRule="evenodd" />
-            </svg>
-            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{file.filepath}</span>
-          </div>
-          <div className="mt-2 text-xs text-gray-700 dark:text-gray-300">
-            <ReactMarkdown>{file.reasoning}</ReactMarkdown>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default FileListComponent;
\ No newline at end of file