diff --git a/src/components/ResponsePanel.vue b/src/components/ResponsePanel.vue
index dbcbcf1..70c1dee 100644
--- a/src/components/ResponsePanel.vue
+++ b/src/components/ResponsePanel.vue
@@ -5,12 +5,22 @@ import { useSettingsStore } from '../stores/settingsStore';
 import { Codemirror } from 'vue-codemirror';
 import { json } from '@codemirror/lang-json';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { EditorView } from '@codemirror/view';
+import { EditorView } from '@codemirror/view'; // Import EditorView
 
 const store = useRequestStore();
 const settings = useSettingsStore();
 
-const extensions = [json(), oneDark, EditorView.editable.of(false)];
+const transparentTheme = EditorView.theme({
+  "&": {
+    backgroundColor: "transparent !important",
+    height: "100%"
+  },
+  ".cm-gutters": {
+    backgroundColor: "transparent !important"
+  }
+});
+
+const extensions = [json(), oneDark, transparentTheme, EditorView.editable.of(false)];
 
 const formattedBody = computed(() => {
     if (!store.activeRequest.response) return '';
diff --git a/src/style.css b/src/style.css
index f61d8a8..cbec1d5 100644
--- a/src/style.css
+++ b/src/style.css
@@ -9,3 +9,30 @@ body {
 #app {
   @apply h-full w-full;
 }
+
+/* Custom Scrollbar Styles */
+/* For Webkit browsers (Chrome, Safari) */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1e293b; /* slate-800 */
+}
+
+::-webkit-scrollbar-thumb {
+  background: #475569; /* slate-600 */
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #64748b; /* slate-500 */
+}
+
+/* For Firefox (requires 'scrollbar-width' and 'scrollbar-color' on elements) */
+/* Applying to all elements for broader coverage */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #475569 #1e293b; /* thumb track */
+}