diff --git a/extension.js b/extension.js
index 2deab94..7ddc229 100644
--- a/extension.js
+++ b/extension.js
@@ -179,33 +179,283 @@ function getWebviewContent(apiResponse = '', question = '') {
     const fileList = selectedFiles
         .map(
             file =>
-                `<div><input type="checkbox" data-uri="${file.uri.fsPath}" ${
-                    file.selected ? 'checked' : ''
+                `<div><input type="checkbox" data-uri="${file.uri.fsPath}" ${file.selected ? 'checked' : ''
                 } onchange="toggleFileSelection('${file.uri.fsPath}')" /> ${file.uri.fsPath}</div>`
         )
         .join('');
 
     return `
       <html>
-      <body>
+      <head>
+            <style>
+                .panel {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    width: 50%;
+                    height: 100%;
+                    margin: 0 auto;
+                    background-color: #1e1e1e;
+                    color: #d4d4d4;
+                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                }
+                
+                .textbox {
+                    width: 100%;
+                    height: 200px;
+                    resize: both;
+                    padding: 10px;
+                }
+                
+                .buttons {
+                    display: flex;
+                    justify-content: space-between;
+                    width: 50%;
+                }
+                
+                .button {
+                    flex-grow: 1;
+                    background-color: #007acc;
+                    color: #fff;
+                    padding: 10px;
+                    text-align: center;
+                    cursor: pointer;
+                    border: none;
+                    outline: none;
+                    font-size: 14px;
+                }
+                
+                #response {
+                    border: 1px solid #000;
+                    background-color: #e0e0e0;
+                    padding: 10px;
+                    margin-top: 20px;
+                    overflow-wrap: break-word;
+                }
+                
+                #file-list {
+                    margin-top: 20px;
+                    border
+                }
+
+                .form-group {
+                    display: flex;
+                    flex-direction: column;
+                    margin-bottom: 20px;
+                    width: 100%;
+                }
+
+                .form-group label {
+                    margin-bottom: 5px;
+                    font-size: 14px;
+                }
+
+                .form-group input[type="text"] {
+                    padding: 10px;
+                    font-size: 14px;
+                    border: none;
+                    outline: none;
+                    background-color: #2d2d2d;
+                    color: #d4d4d4;
+                }
+
+                .form-group input[type="text"]::placeholder {
+                    color: #d4d4d4;
+                }
+
+                .form-group .button-options {
+                    display: flex;
+                    justify-content: space-between;
+                    margin-top: 10px;
+                }
+
+                .form-group .button-options button {
+                    padding: 10px;
+                    font-size: 14px;
+                    border: none;
+                    outline: none;
+                    cursor: pointer;
+                    background-color: #007acc;
+                    color: #fff;
+                }
+
+                .form-group .button-options button:hover {
+                    background-color: #005f8c;
+                }
+
+                .form-group .button-options button:active {
+                    background-color: #004d73;
+                }
+
+                .form-group .button-options button:focus {
+                    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
+                }
+
+                .file-list {
+                    margin-top: 20px;
+                    width: 100%;
+                }
+
+                .file-list h2 {
+                    margin-bottom: 10px;
+                    font-size: 14px;
+                }
+
+                .file-list .file-item {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 5px;
+                    font-size: 14px;
+                }
+
+                .file-list .file-item input[type="checkbox"] {
+                    margin-right: 5px;
+                }
+
+                .file-list .file-item label {
+                    margin-bottom: 0;
+                }
+
+                .file-list .file-item .file-path {
+                    overflow-wrap: break-word;
+                }
+
+                .file-list .file-item .file-path:hover {
+                    text-decoration: underline;
+                    cursor: pointer;
+                }
+
+                .file-list .file-item .file-path:active {
+                    color: #007acc;
+                }
+
+                .file-list .file-item .file-path:focus {
+                    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
+                }
+
+                .collapsible {
+                    background-color: #2d2d2d;
+                    color: #d4d4d4;
+                    cursor: pointer;
+                    padding: 10px;
+                    width: 100%;
+                    border: none;
+                    outline: none;
+                    text-align: left;
+                    font-size: 14px;
+                }
+
+                .collapsible:hover {
+                    background-color: #3c3c3c;
+                }
+
+                .collapsible:active {
+                    background-color: #4c4c4c;
+                }
+
+                .collapsible:focus {
+                    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
+                }
+
+                .content {
+                    padding: 0 10px;
+                    display: none;
+                    overflow: hidden;
+                    background-color: #f1f1f1;
+                    width:100%;
+                }
+
+                .content p {
+                    margin-top: 0;
+                    font-size: 14px;
+                }
+
+                .active, .collapsible:hover {
+                    background-color: #555;
+                }
+
+                .active:after {
+                    content: "\\2212";
+                }
+
+                .collapsible:after {
+                    content: "\\002B";
+                    color: #d4d4d4;
+                    font-weight: bold;
+                    float: right;
+                    margin-left: 5px;
+                }
+
+                .active:after {
+                    content: "\\2212";
+                }
+
+                .collapsible:after {
+                    content: "\\002B";
+                    color: #d4d4d4;
+                    font-weight: bold;
+                    float: right;
+                    margin-left: 5px;
+                }
+
+                #rendered {
+                    background-color: #2d2d2d;
+                    word-wrap: wrap;
+                    margin-top: 20px;
+                    border: 1px solid white;
+                    border-radius: 5px;
+                    padding: 10px;
+                }
+
+                #question-rep {
+                    font-weight: bold;
+                    background-color: #2d2d2d;
+                    word-wrap: wrap;
+                    border: 1px solid white;
+                    border-radius: 5px;
+                }
+
+                div#api-response.content.active {
+                    background-color: #313131;
+                }
+            
+            </style>
+      </head>
+      <body class="panel">
           <h1>GPT Context</h1>
           <form id="questionForm">
-              <div>
+              <div class="form-group">
                   <label for="question">Enter your question:</label>
-                  <input type="text" id="question" name="question" required>
-                  <button type="submit">Submit</button>
-                  <button type="button" onclick="clearSelectedFiles()">Clear</button>
-                  <button type="button" onclick="refreshSelectedFiles()">Refresh</button>
+                  <input type="text" id="question" name="question" placeholder="Enter your question" required>
+                  <div class="button-options">
+                    <button type="submit">Submit</button>
+                    <button type="button" onclick="clearSelectedFiles()">Clear</button>
+                    <button type="button" onclick="refreshSelectedFiles()">Refresh</button>
+                </div>
               </div>
-              <div>
-                <div><pre>${question ? question : ''}</pre></div>
-                ${
-                    apiResponse ? `<div><pre>${apiResponse}</pre></div>` : ''
-                }
+              <div class="form-group">
+              <div class="collapsible" onclick="toggleApiResponse()">
+                  API Response
               </div>
-              <div>
-                  <h2>Selected Files:</h2>
-                  ${fileList}
+              <div class="content" id="api-response">
+                  <div id="question-rep">
+                      <p>${question ? '> ' + question : null}</p>
+                  </div>
+                  ${
+                      apiResponse ? `
+                          <div id="rendered">
+                              <p>${apiResponse}</p>
+                          </div>
+                      ` : null
+                  }
+              </div>
+            </div>
+              <div class="form-group">
+                <label for="selected-files">Selected Files:</label>
+                <div class="file-list">
+                    ${fileList ? fileList : '<p class="no-files">No files selected</p>'}
+                </div>
               </div>
               <script>
                   const vscode = acquireVsCodeApi();
@@ -229,6 +479,21 @@ function getWebviewContent(apiResponse = '', question = '') {
                       });
                   }
 
+                  function toggleApiResponse() {
+                    const apiResponse = document.getElementById('api-response');
+                    apiResponse.classList.toggle('active');
+                    const content = apiResponse;
+                    const collapsible = apiResponse.previousElementSibling;
+                    if (content.style.display === 'block') {
+                        content.style.display = 'none';
+                        collapsible.classList.remove('active');
+                    } else {
+                        content.style.display = 'block';
+                        collapsible.classList.add('active');
+                    }
+                }
+                
+
                   const form = document.getElementById('questionForm');
                   form.addEventListener('submit', event => {
                       event.preventDefault();
@@ -254,6 +519,7 @@ function getWebviewContent(apiResponse = '', question = '') {
 }
 
 
+
 // Activates the extension
 function activate(context) {
     context.subscriptions.push(addFilesCommand);
@@ -263,38 +529,38 @@ function activate(context) {
     context.subscriptions.push(refreshFilesCommand);
     vscode.window.registerTreeDataProvider('selectedFiles', fileDataProvider);
 
-const provider = {
-    resolveWebviewView(webviewView) {
-        webviewView.webview.options = {
-            enableScripts: true
-        };
-        webviewView.webview.html = getWebviewContent();
-        webviewView.webview.onDidReceiveMessage(async message => {
-            if (message.command === 'toggleFileSelection') {
-                const uri = message.uri;
-                const file = selectedFiles.find(file => file.uri.fsPath === uri);
-                if (file) {
-                    file.toggleSelected();
+    const provider = {
+        resolveWebviewView(webviewView) {
+            webviewView.webview.options = {
+                enableScripts: true
+            };
+            webviewView.webview.html = getWebviewContent();
+            webviewView.webview.onDidReceiveMessage(async message => {
+                if (message.command === 'toggleFileSelection') {
+                    const uri = message.uri;
+                    const file = selectedFiles.find(file => file.uri.fsPath === uri);
+                    if (file) {
+                        file.toggleSelected();
+                        fileDataProvider.refresh();
+                    }
+                } else if (message.command === 'clearSelectedFiles') {
+                    const clearedFiles = selectedFiles.filter(file => file.selected === false);
+                    selectedFiles.length = 0; // Clear the array
+                    clearedFiles.forEach(file => {
+                        fileDataProvider.refresh();
+                    });
+                    webviewView.webview.html = getWebviewContent();
+                } else if (message.command === 'refreshFiles') {
                     fileDataProvider.refresh();
+                    webviewView.webview.html = getWebviewContent();
+                } else if (message.command === 'submitQuestion') {
+                    await handleQuestionSubmission(webviewView, message.text, message.selectedUris);
                 }
-            } else if (message.command === 'clearSelectedFiles') {
-                const clearedFiles = selectedFiles.filter(file => file.selected === false);
-                selectedFiles.length = 0; // Clear the array
-                clearedFiles.forEach(file => {
-                    fileDataProvider.refresh();
-                });
-                webviewView.webview.html = getWebviewContent();
-            } else if (message.command === 'refreshFiles') {
-                fileDataProvider.refresh();
-                webviewView.webview.html = getWebviewContent();
-            } else if (message.command === 'submitQuestion') {
-                await handleQuestionSubmission(webviewView, message.text, message.selectedUris);
-            }
-        });
-    }
-};
+            });
+        }
+    };
 
-context.subscriptions.push(vscode.window.registerWebviewViewProvider('gpt-context-sidebar', provider));
+    context.subscriptions.push(vscode.window.registerWebviewViewProvider('gpt-context-sidebar', provider));
 
 }
 
