diff --git a/.changeset/explorer-styling-enhancements.md b/.changeset/explorer-styling-enhancements.md
new file mode 100644
index 00000000000..c7f18a11f93
--- /dev/null
+++ b/.changeset/explorer-styling-enhancements.md
@@ -0,0 +1,5 @@
+---
+"@graphiql/plugin-explorer": patch
+---
+
+style: improve scrollbar styling on the query editor
diff --git a/packages/graphiql-plugin-explorer/src/index.css b/packages/graphiql-plugin-explorer/src/index.css
index 96e578497e8..0e8f3291475 100644
--- a/packages/graphiql-plugin-explorer/src/index.css
+++ b/packages/graphiql-plugin-explorer/src/index.css
@@ -1,6 +1,6 @@
 .docExplorerWrap {
-  height: unset !important;
-  min-width: unset !important;
+  height: 100% !important;
+  min-width: auto !important;
   width: unset !important;
 }
 
@@ -17,22 +17,65 @@
   font-family: var(--font-family-mono) !important;
   font-size: var(--font-size-body) !important;
   padding: 0 !important;
+  flex: 1;
 }
 
 .graphiql-explorer-root > div:first-child {
   padding-left: var(--px-8);
-  overflow: hidden !important;
+  overflow: auto !important;
+  scrollbar-color: #88888888 transparent;
+}
+
+/* Safari scrollbars */
+.graphiql-explorer-root>div:first-child::-webkit-scrollbar-track,
+.graphiql-explorer-root>div:first-child::-webkit-scrollbar,
+.graphiql-explorer-root>div:first-child::-webkit-scrollbar-corner{
+  background-color: transparent;
+}
+
+.graphiql-explorer-root>div:first-child::-webkit-scrollbar-thumb {
+  border-radius: 99px;
+  padding: 3px;
+  box-shadow: inset 0 0 99px 99px #88888888;
+  border: solid 3px transparent;
 }
 
 .graphiql-explorer-root input {
   background: hsl(var(--color-base));
+  padding: 1px 0;
+  font-family: inherit;
 }
 
 .graphiql-explorer-root select {
-  background-color: hsl(var(--color-base));
+  background-color: hsl(var(--color-base)) !important;
   border: 1px solid hsla(var(--color-neutral), var(--alpha-secondary));
   border-radius: var(--border-radius-4);
   color: hsl(var(--color-neutral));
   margin: 0 var(--px-4);
   padding: var(--px-4) var(--px-6);
 }
+
+.doc-explorer-contents {
+  flex:1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto !important;
+}
+
+.doc-explorer-title-bar {
+  flex: 0;
+}
+
+.graphiql-explorer-root > div:last-child {
+  min-height: auto !important;
+  max-height: auto !important;
+  flex: 0;
+}
+
+.graphiql-explorer-root .graphiql-operation-title-bar button {
+  padding: 1px 6px;
+}
+
+.graphiql-explorer-root .graphiql-explorer-node button {
+  padding: 1px 6px;
+}
diff --git a/packages/graphiql-plugin-explorer/src/index.tsx b/packages/graphiql-plugin-explorer/src/index.tsx
index c7b4bb625fd..77c4feebbb7 100644
--- a/packages/graphiql-plugin-explorer/src/index.tsx
+++ b/packages/graphiql-plugin-explorer/src/index.tsx
@@ -106,7 +106,7 @@ const styles = {
     fontSize: '1em',
   },
   explorerActionsStyle: {
-    padding: 'var(--px-8) var(--px-4)',
+    padding: 'var(--px-8) var(--px-4) 0',
   },
   actionButtonStyle: {
     backgroundColor: 'transparent',