diff --git a/.changeset/five-pillows-fail.md b/.changeset/five-pillows-fail.md
index 279cab609e3..9bb1677681e 100644
--- a/.changeset/five-pillows-fail.md
+++ b/.changeset/five-pillows-fail.md
@@ -3,8 +3,8 @@
 ---
 
 Add new components:
-- UI components (`Dropdown`, `Spinner`, `UnStyledButton` and lots of icon components)
+- UI components (`Button`, `Dropdown`, `Spinner`, `UnStyledButton` and lots of icon components)
 - Editor components (`QueryEditor`, `VariableEditor`, `HeaderEditor` and `ResponseEditor`)
 - Toolbar components (`ExecuteButton` and `ToolbarButton`)
-- Docs components (`Argument`, `DefaultValue`, `Directive`, `DocExplorer`, `FieldDocumentation`, `FieldLink`, `SchemaDocumentation`, `Search`, `TypeDocumentation` and `TypeLink`)
+- Docs components (`Argument`, `DefaultValue`, `DeprecationReason`, `Directive`, `DocExplorer`, `ExplorerSection`, `FieldDocumentation`, `FieldLink`, `SchemaDocumentation`, `Search`, `TypeDocumentation` and `TypeLink`)
 - `History` component
diff --git a/.changeset/red-zoos-divide.md b/.changeset/red-zoos-divide.md
index 689ea91d859..aac443000ea 100644
--- a/.changeset/red-zoos-divide.md
+++ b/.changeset/red-zoos-divide.md
@@ -4,3 +4,4 @@
 
 BREAKING: The following exports of the `graphiql` package have been removed:
 - `DocExplorer`: Now exported from `@graphiql/react` as `DocExplorer`
+  - The `schema` prop has been removed, the component now uses the schema provided by the `ExplorerContext`
diff --git a/packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx b/packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx
index cd4d339e9a4..bb46140f355 100644
--- a/packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx
+++ b/packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx
@@ -1,25 +1,23 @@
 import { render } from '@testing-library/react';
+import { GraphQLSchema } from 'graphql';
 
 import { SchemaContext, SchemaContextType } from '../../../schema';
 import { ExplorerContextProvider } from '../../context';
 import { DocExplorer } from '../doc-explorer';
-import { ExampleSchema } from './example-schema';
 
 const defaultSchemaContext: SchemaContextType = {
   fetchError: null,
   isFetching: false,
-  schema: ExampleSchema,
+  schema: new GraphQLSchema({ description: 'GraphQL Schema for testing' }),
   setFetchError() {},
   setSchema() {},
   validationErrors: null,
 };
 
-function DocExplorerWithContext(
-  props: React.ComponentProps<typeof DocExplorer>,
-) {
+function DocExplorerWithContext() {
   return (
     <ExplorerContextProvider>
-      <DocExplorer {...props} />
+      <DocExplorer />
     </ExplorerContextProvider>
   );
 }
@@ -45,9 +43,9 @@ describe('DocExplorer', () => {
         <DocExplorerWithContext />
       </SchemaContext.Provider>,
     );
-    const error = container.querySelectorAll('.error-container');
+    const error = container.querySelectorAll('.graphiql-doc-explorer-error');
     expect(error).toHaveLength(1);
-    expect(error[0]).toHaveTextContent('No Schema Available');
+    expect(error[0]).toHaveTextContent('No GraphQL schema available');
   });
   it('renders with schema', () => {
     const { container } = render(
@@ -55,7 +53,7 @@ describe('DocExplorer', () => {
         <DocExplorerWithContext />,
       </SchemaContext.Provider>,
     );
-    const error = container.querySelectorAll('.error-container');
+    const error = container.querySelectorAll('.graphiql-doc-explorer-error');
     expect(error).toHaveLength(0);
     expect(
       container.querySelector('.graphiql-markdown-description'),
diff --git a/packages/graphiql-react/src/explorer/components/__tests__/example-schema.ts b/packages/graphiql-react/src/explorer/components/__tests__/example-schema.ts
deleted file mode 100644
index 0154642af5e..00000000000
--- a/packages/graphiql-react/src/explorer/components/__tests__/example-schema.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
-  GraphQLObjectType,
-  GraphQLString,
-  GraphQLSchema,
-  GraphQLUnionType,
-  GraphQLInterfaceType,
-  GraphQLBoolean,
-  GraphQLEnumType,
-} from 'graphql';
-
-export const ExampleInterface = new GraphQLInterfaceType({
-  name: 'exampleInterface',
-  fields: {
-    name: { type: GraphQLString },
-  },
-});
-
-export const ExampleEnum = new GraphQLEnumType({
-  name: 'exampleEnum',
-  values: {
-    value1: { value: 'Value 1' },
-    value2: { value: 'Value 2' },
-    value3: { value: 'Value 3', deprecationReason: 'Only two are needed' },
-  },
-});
-
-export const ExampleUnionType1 = new GraphQLObjectType({
-  name: 'Union_Type_1',
-  interfaces: [ExampleInterface],
-  fields: {
-    name: { type: GraphQLString },
-    enum: { type: ExampleEnum },
-  },
-});
-
-export const ExampleUnionType2 = new GraphQLObjectType({
-  name: 'Union_Type_2',
-  interfaces: [ExampleInterface],
-  fields: {
-    name: { type: GraphQLString },
-    string: { type: GraphQLString },
-  },
-});
-
-export const ExampleUnion = new GraphQLUnionType({
-  name: 'exampleUnion',
-  types: [ExampleUnionType1, ExampleUnionType2],
-});
-
-export const ExampleQuery = new GraphQLObjectType({
-  name: 'Query',
-  description: 'Query description\n Second line',
-  fields: {
-    string: { type: GraphQLString },
-    union: { type: ExampleUnion },
-    fieldWithArgs: {
-      type: GraphQLString,
-      args: {
-        stringArg: { type: GraphQLString },
-      },
-    },
-    deprecatedField: {
-      type: GraphQLBoolean,
-      deprecationReason: 'example deprecation reason',
-    },
-  },
-});
-
-export const ExampleSchema = new GraphQLSchema({
-  query: ExampleQuery,
-  description: 'GraphQL Schema for testing',
-});
diff --git a/packages/graphiql-react/src/explorer/components/__tests__/field-documentation.spec.tsx b/packages/graphiql-react/src/explorer/components/__tests__/field-documentation.spec.tsx
index 49d4de603b7..d7f31842c55 100644
--- a/packages/graphiql-react/src/explorer/components/__tests__/field-documentation.spec.tsx
+++ b/packages/graphiql-react/src/explorer/components/__tests__/field-documentation.spec.tsx
@@ -4,8 +4,8 @@ import {
   render,
 } from '@testing-library/react';
 import { GraphQLString, GraphQLObjectType, Kind } from 'graphql';
-import { ExplorerContext, ExplorerFieldDef } from '../../context';
 
+import { ExplorerContext, ExplorerFieldDef } from '../../context';
 import { FieldDocumentation } from '../field-documentation';
 import { mockExplorerContextValue } from './test-utils';
 
@@ -64,12 +64,12 @@ function FieldDocumentationWithContext(props: { field: ExplorerFieldDef }) {
         name: props.field.name,
         def: props.field,
       })}>
-      <FieldDocumentation />
+      <FieldDocumentation field={props.field} />
     </ExplorerContext.Provider>
   );
 }
 
-describe('FieldDoc', () => {
+describe('FieldDocumentation', () => {
   it('should render a simple string field', () => {
     const { container } = render(
       <FieldDocumentationWithContext
@@ -78,7 +78,7 @@ describe('FieldDoc', () => {
     );
     expect(
       container.querySelector('.graphiql-markdown-description'),
-    ).toHaveTextContent('No Description');
+    ).not.toBeInTheDocument();
     expect(
       container.querySelector('.graphiql-doc-explorer-type-name'),
     ).toHaveTextContent('String');
@@ -95,7 +95,7 @@ describe('FieldDoc', () => {
     );
     expect(
       container.querySelector('.graphiql-markdown-description'),
-    ).toHaveTextContent('No Description');
+    ).not.toBeInTheDocument();
     expect(
       container.querySelector('.graphiql-doc-explorer-type-name'),
     ).toHaveTextContent('String');
@@ -117,7 +117,7 @@ describe('FieldDoc', () => {
   });
 
   it('should render a string field with arguments', () => {
-    const { container } = render(
+    const { container, getByText } = render(
       <FieldDocumentationWithContext
         field={exampleObject.getFields().stringWithArgs}
       />,
@@ -139,7 +139,7 @@ describe('FieldDoc', () => {
       container.querySelectorAll('.graphiql-markdown-deprecation'),
     ).toHaveLength(0);
     // make sure deprecation is present
-    fireEvent.click(container.querySelector('.show-btn'));
+    fireEvent.click(getByText('Show Deprecated Arguments'));
     const deprecationDocs = container.querySelectorAll(
       '.graphiql-markdown-deprecation',
     );
diff --git a/packages/graphiql-react/src/explorer/components/__tests__/type-documentation.spec.tsx b/packages/graphiql-react/src/explorer/components/__tests__/type-documentation.spec.tsx
index 011ed7959d0..7745c7b830a 100644
--- a/packages/graphiql-react/src/explorer/components/__tests__/type-documentation.spec.tsx
+++ b/packages/graphiql-react/src/explorer/components/__tests__/type-documentation.spec.tsx
@@ -3,17 +3,20 @@ import {
   fireEvent,
   render,
 } from '@testing-library/react';
-import { GraphQLNamedType } from 'graphql';
+import {
+  GraphQLBoolean,
+  GraphQLEnumType,
+  GraphQLInterfaceType,
+  GraphQLNamedType,
+  GraphQLObjectType,
+  GraphQLSchema,
+  GraphQLString,
+  GraphQLUnionType,
+} from 'graphql';
 
 import { SchemaContext } from '../../../schema';
 import { ExplorerContext } from '../../context';
 import { TypeDocumentation } from '../type-documentation';
-import {
-  ExampleEnum,
-  ExampleQuery,
-  ExampleSchema,
-  ExampleUnion,
-} from './example-schema';
 import { mockExplorerContextValue, unwrapType } from './test-utils';
 
 function TypeDocumentationWithContext(props: { type: GraphQLNamedType }) {
@@ -32,13 +35,13 @@ function TypeDocumentationWithContext(props: { type: GraphQLNamedType }) {
           name: unwrapType(props.type).name,
           def: props.type,
         })}>
-        <TypeDocumentation />
+        <TypeDocumentation type={props.type} />
       </ExplorerContext.Provider>
     </SchemaContext.Provider>
   );
 }
 
-describe('TypeDoc', () => {
+describe('TypeDocumentation', () => {
   it('renders a top-level query object type', () => {
     const { container } = render(
       <TypeDocumentationWithContext type={ExampleQuery} />,
@@ -51,7 +54,7 @@ describe('TypeDoc', () => {
       normalizeWhitespace: false,
     });
 
-    const cats = container.querySelectorAll('.doc-category-item');
+    const cats = container.querySelectorAll('.graphiql-doc-explorer-item');
     expect(cats[0]).toHaveTextContent('string: String');
     expect(cats[1]).toHaveTextContent('union: exampleUnion');
     expect(cats[2]).toHaveTextContent(
@@ -60,15 +63,15 @@ describe('TypeDoc', () => {
   });
 
   it('renders deprecated fields when you click to see them', () => {
-    const { container } = render(
+    const { container, getByText } = render(
       <TypeDocumentationWithContext type={ExampleQuery} />,
     );
-    let cats = container.querySelectorAll('.doc-category-item');
+    let cats = container.querySelectorAll('.graphiql-doc-explorer-item');
     expect(cats).toHaveLength(3);
 
-    fireEvent.click(container.querySelector('.show-btn')!);
+    fireEvent.click(getByText('Show Deprecated Fields'));
 
-    cats = container.querySelectorAll('.doc-category-item');
+    cats = container.querySelectorAll('.graphiql-doc-explorer-item');
     expect(cats).toHaveLength(4);
     expect(
       container.querySelectorAll('.graphiql-doc-explorer-field-name')[3],
@@ -82,19 +85,25 @@ describe('TypeDoc', () => {
     const { container } = render(
       <TypeDocumentationWithContext type={ExampleUnion} />,
     );
-    expect(container.querySelector('.doc-category-title')).toHaveTextContent(
-      'possible types',
+    const title = container.querySelector(
+      '.graphiql-doc-explorer-section-title',
     );
+    title.removeChild(title.childNodes[0]);
+    expect(title).toHaveTextContent('Possible Types');
   });
 
   it('renders an Enum type', () => {
     const { container } = render(
       <TypeDocumentationWithContext type={ExampleEnum} />,
     );
-    expect(container.querySelector('.doc-category-title')).toHaveTextContent(
-      'values',
+    const title = container.querySelector(
+      '.graphiql-doc-explorer-section-title',
+    );
+    title.removeChild(title.childNodes[0]);
+    expect(title).toHaveTextContent('Enum Values');
+    const enums = container.querySelectorAll(
+      '.graphiql-doc-explorer-enum-value',
     );
-    const enums = container.querySelectorAll('.enum-value');
     expect(enums[0]).toHaveTextContent('value1');
     expect(enums[1]).toHaveTextContent('value2');
   });
@@ -103,18 +112,29 @@ describe('TypeDoc', () => {
     const { getByText, container } = render(
       <TypeDocumentationWithContext type={ExampleEnum} />,
     );
-    const showBtn = getByText('Show deprecated values...');
+    const showBtn = getByText('Show Deprecated Values');
     expect(showBtn).toBeInTheDocument();
-    const titles = container.querySelectorAll('.doc-category-title');
-    expect(titles[0]).toHaveTextContent('values');
-    expect(titles[1]).toHaveTextContent('deprecated values');
-    let enums = container.querySelectorAll('.enum-value');
+
+    const title = container.querySelector(
+      '.graphiql-doc-explorer-section-title',
+    );
+    title.removeChild(title.childNodes[0]);
+    expect(title).toHaveTextContent('Enum Values');
+
+    let enums = container.querySelectorAll('.graphiql-doc-explorer-enum-value');
     expect(enums).toHaveLength(2);
 
     // click button to show deprecated enum values
     fireEvent.click(showBtn);
     expect(showBtn).not.toBeInTheDocument();
-    enums = container.querySelectorAll('.enum-value');
+
+    const deprecatedTitle = container.querySelectorAll(
+      '.graphiql-doc-explorer-section-title',
+    )[1];
+    deprecatedTitle.removeChild(deprecatedTitle.childNodes[0]);
+    expect(deprecatedTitle).toHaveTextContent('Deprecated Enum Values');
+
+    enums = container.querySelectorAll('.graphiql-doc-explorer-enum-value');
     expect(enums).toHaveLength(3);
     expect(enums[2]).toHaveTextContent('value3');
     expect(
@@ -122,3 +142,66 @@ describe('TypeDoc', () => {
     ).toHaveTextContent('Only two are needed');
   });
 });
+
+const ExampleInterface = new GraphQLInterfaceType({
+  name: 'exampleInterface',
+  fields: {
+    name: { type: GraphQLString },
+  },
+});
+
+const ExampleEnum = new GraphQLEnumType({
+  name: 'exampleEnum',
+  values: {
+    value1: { value: 'Value 1' },
+    value2: { value: 'Value 2' },
+    value3: { value: 'Value 3', deprecationReason: 'Only two are needed' },
+  },
+});
+
+const ExampleUnionType1 = new GraphQLObjectType({
+  name: 'Union_Type_1',
+  interfaces: [ExampleInterface],
+  fields: {
+    name: { type: GraphQLString },
+    enum: { type: ExampleEnum },
+  },
+});
+
+const ExampleUnionType2 = new GraphQLObjectType({
+  name: 'Union_Type_2',
+  interfaces: [ExampleInterface],
+  fields: {
+    name: { type: GraphQLString },
+    string: { type: GraphQLString },
+  },
+});
+
+const ExampleUnion = new GraphQLUnionType({
+  name: 'exampleUnion',
+  types: [ExampleUnionType1, ExampleUnionType2],
+});
+
+const ExampleQuery = new GraphQLObjectType({
+  name: 'Query',
+  description: 'Query description\n Second line',
+  fields: {
+    string: { type: GraphQLString },
+    union: { type: ExampleUnion },
+    fieldWithArgs: {
+      type: GraphQLString,
+      args: {
+        stringArg: { type: GraphQLString },
+      },
+    },
+    deprecatedField: {
+      type: GraphQLBoolean,
+      deprecationReason: 'example deprecation reason',
+    },
+  },
+});
+
+const ExampleSchema = new GraphQLSchema({
+  query: ExampleQuery,
+  description: 'GraphQL Schema for testing',
+});
diff --git a/packages/graphiql-react/src/explorer/components/deprecation-reason.css b/packages/graphiql-react/src/explorer/components/deprecation-reason.css
new file mode 100644
index 00000000000..9c863766a01
--- /dev/null
+++ b/packages/graphiql-react/src/explorer/components/deprecation-reason.css
@@ -0,0 +1,12 @@
+.graphiql-doc-explorer-deprecation {
+  background-color: var(--color-orche-background);
+  border: 1px solid var(--color-orche);
+  border-radius: var(--px-4);
+  color: var(--color-orche);
+  padding: var(--px-8);
+}
+
+.graphiql-doc-explorer-deprecation-label {
+  font-size: var(--font-size-hint);
+  font-weight: var(--font-weight-medium);
+}
diff --git a/packages/graphiql-react/src/explorer/components/deprecation-reason.tsx b/packages/graphiql-react/src/explorer/components/deprecation-reason.tsx
new file mode 100644
index 00000000000..3ad2f5f99ef
--- /dev/null
+++ b/packages/graphiql-react/src/explorer/components/deprecation-reason.tsx
@@ -0,0 +1,16 @@
+import { MarkdownContent } from '../../ui';
+
+import './deprecation-reason.css';
+
+type DeprecationReasonProps = { children?: string | null };
+
+export function DeprecationReason(props: DeprecationReasonProps) {
+  return props.children ? (
+    <div className="graphiql-doc-explorer-deprecation">
+      <div className="graphiql-doc-explorer-deprecation-label">Deprecated</div>
+      <MarkdownContent type="deprecation" onlyShowFirstChild>
+        {props.children}
+      </MarkdownContent>
+    </div>
+  ) : null;
+}
diff --git a/packages/graphiql-react/src/explorer/components/doc-explorer.css b/packages/graphiql-react/src/explorer/components/doc-explorer.css
new file mode 100644
index 00000000000..740755e8e33
--- /dev/null
+++ b/packages/graphiql-react/src/explorer/components/doc-explorer.css
@@ -0,0 +1,79 @@
+/* The header of the doc explorer */
+.graphiql-doc-explorer-header {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+.graphiql-doc-explorer-header-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.graphiql-doc-explorer-header:focus-within
+  > .graphiql-doc-explorer-header-content
+  > *:not(.graphiql-doc-explorer-back) {
+  /* Hide the header when focussing the search input */
+  visibility: hidden;
+}
+
+/* The search input in the header of the doc explorer */
+.graphiql-doc-explorer-search {
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.graphiql-doc-explorer-search:focus-within {
+  left: 0;
+}
+.graphiql-doc-explorer-search [data-reach-combobox-input] {
+  height: 24px;
+  width: 4ch;
+}
+.graphiql-doc-explorer-search [data-reach-combobox-input]:focus {
+  width: 100%;
+}
+
+/* The back-button in the doc explorer */
+.graphiql-doc-explorer-back {
+  align-items: center;
+  color: var(--color-neutral-60);
+  display: flex;
+  text-decoration: none;
+}
+.graphiql-doc-explorer-back:hover {
+  text-decoration: underline;
+}
+.graphiql-doc-explorer-back > svg {
+  height: var(--px-8);
+  margin-right: var(--px-8);
+  width: var(--px-8);
+}
+
+/* The title of the currently active page in the doc explorer */
+.graphiql-doc-explorer-title {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-h2);
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.graphiql-doc-explorer-title:not(:first-child) {
+  font-size: var(--font-size-h3);
+  margin-top: var(--px-8);
+}
+
+/* The contents of the currently active page in the doc explorer */
+.graphiql-doc-explorer-content > * {
+  color: var(--color-neutral-60);
+  margin-top: var(--px-20);
+}
+
+/* Error message */
+.graphiql-doc-explorer-error {
+  background-color: var(--color-red-background);
+  border: 1px solid var(--color-red);
+  border-radius: var(--border-radius-8);
+  color: var(--color-red);
+  padding: var(--px-8) var(--px-12);
+}
diff --git a/packages/graphiql-react/src/explorer/components/doc-explorer.tsx b/packages/graphiql-react/src/explorer/components/doc-explorer.tsx
index 19530708b52..4c12b23ed9a 100644
--- a/packages/graphiql-react/src/explorer/components/doc-explorer.tsx
+++ b/packages/graphiql-react/src/explorer/components/doc-explorer.tsx
@@ -1,6 +1,7 @@
-import { GraphQLSchema, isType } from 'graphql';
+import { isType } from 'graphql';
 import { ReactNode } from 'react';
 
+import { ChevronLeftIcon } from '../../icons';
 import { useSchemaContext } from '../../schema';
 import { Spinner } from '../../ui';
 import { useExplorerContext } from '../context';
@@ -9,41 +10,30 @@ import { SchemaDocumentation } from './schema-documentation';
 import { Search } from './search';
 import { TypeDocumentation } from './type-documentation';
 
-type DocExplorerProps = {
-  onClose?(): void;
-  /**
-   * @deprecated Passing a schema prop directly to this component will be
-   * removed in the next major version. Instead you need to wrap this component
-   * with the `SchemaContextProvider` from `@graphiql/react`. This context
-   * provider accepts a `schema` prop that you can use to skip fetching the
-   * schema with an introspection request.
-   */
-  schema?: GraphQLSchema | null;
-};
+import './doc-explorer.css';
 
-export function DocExplorer(props: DocExplorerProps) {
+export function DocExplorer() {
   const {
     fetchError,
     isFetching,
-    schema: schemaFromContext,
+    schema,
     validationErrors,
   } = useSchemaContext({ nonNull: true, caller: DocExplorer });
-  const { explorerNavStack, hide, pop } = useExplorerContext({
+  const { explorerNavStack, pop } = useExplorerContext({
     nonNull: true,
     caller: DocExplorer,
   });
 
   const navItem = explorerNavStack[explorerNavStack.length - 1];
 
-  // The schema passed via props takes precedence until we remove the prop
-  const schema = props.schema === undefined ? schemaFromContext : props.schema;
-
   let content: ReactNode = null;
   if (fetchError) {
-    content = <div className="error-container">Error fetching schema</div>;
+    content = (
+      <div className="graphiql-doc-explorer-error">Error fetching schema</div>
+    );
   } else if (validationErrors) {
     content = (
-      <div className="error-container">
+      <div className="graphiql-doc-explorer-error">
         Schema is invalid: {validationErrors[0].message}
       </div>
     );
@@ -53,13 +43,17 @@ export function DocExplorer(props: DocExplorerProps) {
   } else if (!schema) {
     // Schema is null when it explicitly does not exist, typically due to
     // an error during introspection.
-    content = <div className="error-container">No Schema Available</div>;
+    content = (
+      <div className="graphiql-doc-explorer-error">
+        No GraphQL schema available
+      </div>
+    );
   } else if (explorerNavStack.length === 1) {
-    content = <SchemaDocumentation />;
+    content = <SchemaDocumentation schema={schema} />;
   } else if (isType(navItem.def)) {
-    content = <TypeDocumentation />;
+    content = <TypeDocumentation type={navItem.def} />;
   } else if (navItem.def) {
-    content = <FieldDocumentation />;
+    content = <FieldDocumentation field={navItem.def} />;
   }
 
   let prevName;
@@ -69,37 +63,29 @@ export function DocExplorer(props: DocExplorerProps) {
 
   return (
     <section
-      className="doc-explorer"
-      key={navItem.name}
+      className="graphiql-doc-explorer"
       aria-label="Documentation Explorer">
-      <div className="doc-explorer-title-bar">
-        {prevName && (
-          <button
-            className="doc-explorer-back"
-            onClick={pop}
-            aria-label={`Go back to ${prevName}`}>
-            {prevName}
-          </button>
-        )}
-        <div className="doc-explorer-title">
-          {navItem.title || navItem.name}
+      <div className="graphiql-doc-explorer-header">
+        <div className="graphiql-doc-explorer-header-content">
+          {prevName && (
+            <a
+              href="#"
+              className="graphiql-doc-explorer-back"
+              onClick={pop}
+              aria-label={`Go back to ${prevName}`}>
+              <ChevronLeftIcon />
+              {prevName}
+            </a>
+          )}
+          <div className="graphiql-doc-explorer-title">
+            {navItem.title || navItem.name}
+          </div>
         </div>
-        <div className="doc-explorer-rhs">
-          <button
-            className="docExplorerHide"
-            onClick={() => {
-              hide();
-              props.onClose?.();
-            }}
-            aria-label="Close Documentation Explorer">
-            {'\u2715'}
-          </button>
+        <div className="graphiql-doc-explorer-search">
+          <Search key={navItem.name} />
         </div>
       </div>
-      <div className="doc-explorer-contents">
-        <Search key={navItem.def?.name || '__schema'} />
-        {content}
-      </div>
+      <div className="graphiql-doc-explorer-content">{content}</div>
     </section>
   );
 }
diff --git a/packages/graphiql-react/src/explorer/components/field-documentation.tsx b/packages/graphiql-react/src/explorer/components/field-documentation.tsx
index ec4ef2bd303..928363767bb 100644
--- a/packages/graphiql-react/src/explorer/components/field-documentation.tsx
+++ b/packages/graphiql-react/src/explorer/components/field-documentation.tsx
@@ -1,92 +1,92 @@
-import { isType } from 'graphql';
+import { GraphQLArgument } from 'graphql';
 import { useState } from 'react';
 
-import { MarkdownContent } from '../../ui';
-import { useExplorerContext } from '../context';
+import { Button, MarkdownContent } from '../../ui';
+import { ExplorerFieldDef } from '../context';
 import { Argument } from './argument';
+import { DeprecationReason } from './deprecation-reason';
 import { Directive } from './directive';
+import { ExplorerSection } from './section';
 import { TypeLink } from './type-link';
 
-export function FieldDocumentation() {
-  const { explorerNavStack } = useExplorerContext({
-    nonNull: true,
-    caller: FieldDocumentation,
-  });
-  const [showDeprecated, handleShowDeprecated] = useState(false);
+type FieldDocumentationProps = { field: ExplorerFieldDef };
 
-  const navItem = explorerNavStack[explorerNavStack.length - 1];
-  const field = navItem.def;
-  if (!field || isType(field)) {
+export function FieldDocumentation(props: FieldDocumentationProps) {
+  return (
+    <>
+      {props.field.description ? (
+        <MarkdownContent type="description">
+          {props.field.description}
+        </MarkdownContent>
+      ) : null}
+      <DeprecationReason>{props.field.deprecationReason}</DeprecationReason>
+      <ExplorerSection title="Type">
+        <TypeLink type={props.field.type} />
+      </ExplorerSection>
+      <Arguments field={props.field} />
+      <Directives field={props.field} />
+    </>
+  );
+}
+
+function Arguments({ field }: { field: ExplorerFieldDef }) {
+  const [showDeprecated, setShowDeprecated] = useState(false);
+
+  if (!('args' in field)) {
     return null;
   }
 
-  let argsDef;
-  let deprecatedArgsDef;
-  if (field && 'args' in field && field.args.length > 0) {
-    argsDef = (
-      <div id="doc-args" className="doc-category">
-        <div className="doc-category-title">arguments</div>
-        {field.args
-          .filter(arg => !arg.deprecationReason)
-          .map(arg => (
-            <Argument key={arg.name} arg={arg} />
-          ))}
-      </div>
-    );
-    const deprecatedArgs = field.args.filter(arg =>
-      Boolean(arg.deprecationReason),
-    );
-    if (deprecatedArgs.length > 0) {
-      deprecatedArgsDef = (
-        <div id="doc-deprecated-args" className="doc-category">
-          <div className="doc-category-title">deprecated arguments</div>
-          {!showDeprecated ? (
-            <button
-              className="show-btn"
-              onClick={() => handleShowDeprecated(!showDeprecated)}>
-              Show deprecated arguments...
-            </button>
-          ) : (
-            deprecatedArgs.map(arg => <Argument key={arg.name} arg={arg} />)
-          )}
-        </div>
-      );
+  const args: GraphQLArgument[] = [];
+  const deprecatedArgs: GraphQLArgument[] = [];
+  for (const argument of field.args) {
+    if (argument.deprecationReason) {
+      deprecatedArgs.push(argument);
+    } else {
+      args.push(argument);
     }
   }
 
-  let directivesDef;
-  if (field?.astNode?.directives && field.astNode.directives.length > 0) {
-    directivesDef = (
-      <div id="doc-directives" className="doc-category">
-        <div className="doc-category-title">directives</div>
-        {field.astNode.directives.map(directive => (
-          <div key={directive.name.value} className="doc-category-item">
-            <div>
-              <Directive directive={directive} />
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
   return (
-    <div>
-      <MarkdownContent type="description">
-        {field.description || 'No Description'}
-      </MarkdownContent>
-      {field && 'deprecationReason' in field && field.deprecationReason ? (
-        <MarkdownContent type="deprecation">
-          {field.deprecationReason}
-        </MarkdownContent>
+    <>
+      {args.length > 0 ? (
+        <ExplorerSection title="Arguments">
+          {args.map(arg => (
+            <Argument key={arg.name} arg={arg} />
+          ))}
+        </ExplorerSection>
       ) : null}
-      <div className="doc-category">
-        <div className="doc-category-title">type</div>
-        <TypeLink type={field.type} />
-      </div>
-      {argsDef}
-      {directivesDef}
-      {deprecatedArgsDef}
-    </div>
+      {deprecatedArgs.length > 0 ? (
+        showDeprecated || args.length === 0 ? (
+          <ExplorerSection title="Deprecated Arguments">
+            {deprecatedArgs.map(arg => (
+              <Argument key={arg.name} arg={arg} />
+            ))}
+          </ExplorerSection>
+        ) : (
+          <Button
+            onClick={() => {
+              setShowDeprecated(true);
+            }}>
+            Show Deprecated Arguments
+          </Button>
+        )
+      ) : null}
+    </>
+  );
+}
+
+function Directives({ field }: { field: ExplorerFieldDef }) {
+  const directives = field.astNode?.directives || [];
+  if (!directives || directives.length === 0) {
+    return null;
+  }
+  return (
+    <ExplorerSection title="Directives">
+      {directives.map(directive => (
+        <div key={directive.name.value}>
+          <Directive directive={directive} />
+        </div>
+      ))}
+    </ExplorerSection>
   );
 }
diff --git a/packages/graphiql-react/src/explorer/components/schema-documentation.css b/packages/graphiql-react/src/explorer/components/schema-documentation.css
new file mode 100644
index 00000000000..b7b06d5e4ab
--- /dev/null
+++ b/packages/graphiql-react/src/explorer/components/schema-documentation.css
@@ -0,0 +1,3 @@
+.graphiql-doc-explorer-root-type {
+  color: var(--color-blue);
+}
diff --git a/packages/graphiql-react/src/explorer/components/schema-documentation.tsx b/packages/graphiql-react/src/explorer/components/schema-documentation.tsx
index 5143b1c6be3..2c5ea55bd5c 100644
--- a/packages/graphiql-react/src/explorer/components/schema-documentation.tsx
+++ b/packages/graphiql-react/src/explorer/components/schema-documentation.tsx
@@ -1,51 +1,49 @@
-import { useSchemaContext } from '../../schema';
+import type { GraphQLSchema } from 'graphql';
+
 import { MarkdownContent } from '../../ui';
+import { ExplorerSection } from './section';
 import { TypeLink } from './type-link';
 
-export function SchemaDocumentation() {
-  const { schema } = useSchemaContext({
-    nonNull: true,
-    caller: SchemaDocumentation,
-  });
+import './schema-documentation.css';
 
-  if (!schema) {
-    return null;
-  }
+type SchemaDocumentationProps = { schema: GraphQLSchema };
 
-  const queryType = schema.getQueryType();
-  const mutationType = schema.getMutationType?.();
-  const subscriptionType = schema.getSubscriptionType?.();
+export function SchemaDocumentation(props: SchemaDocumentationProps) {
+  const queryType = props.schema.getQueryType();
+  const mutationType = props.schema.getMutationType?.();
+  const subscriptionType = props.schema.getSubscriptionType?.();
 
   return (
-    <div>
+    <>
       <MarkdownContent type="description">
-        {schema.description ||
+        {props.schema.description ||
           'A GraphQL schema provides a root type for each kind of operation.'}
       </MarkdownContent>
-      <div className="doc-category">
-        <div className="doc-category-title">root types</div>
+      <ExplorerSection title="Root Types">
         {queryType ? (
-          <div className="doc-category-item">
-            <span className="keyword">query</span>
+          <div>
+            <span className="graphiql-doc-explorer-root-type">query</span>
             {': '}
             <TypeLink type={queryType} />
           </div>
         ) : null}
         {mutationType && (
-          <div className="doc-category-item">
-            <span className="keyword">mutation</span>
+          <div>
+            <span className="graphiql-doc-explorer-root-type">mutation</span>
             {': '}
             <TypeLink type={mutationType} />
           </div>
         )}
         {subscriptionType && (
-          <div className="doc-category-item">
-            <span className="keyword">subscription</span>
+          <div>
+            <span className="graphiql-doc-explorer-root-type">
+              subscription
+            </span>
             {': '}
             <TypeLink type={subscriptionType} />
           </div>
         )}
-      </div>
-    </div>
+      </ExplorerSection>
+    </>
   );
 }
diff --git a/packages/graphiql-react/src/explorer/components/section.css b/packages/graphiql-react/src/explorer/components/section.css
new file mode 100644
index 00000000000..05c55425688
--- /dev/null
+++ b/packages/graphiql-react/src/explorer/components/section.css
@@ -0,0 +1,21 @@
+.graphiql-doc-explorer-section-title {
+  align-items: center;
+  font-size: var(--font-size-hint);
+  font-weight: var(--font-weight-medium);
+  display: flex;
+
+  & > svg {
+    height: var(--px-16);
+    margin-right: var(--px-8);
+    width: var(--px-16);
+  }
+}
+
+.graphiql-doc-explorer-section-content {
+  margin-left: var(--px-8);
+  margin-top: var(--px-16);
+
+  & > * + * {
+    margin-top: var(--px-16);
+  }
+}
diff --git a/packages/graphiql-react/src/explorer/components/section.tsx b/packages/graphiql-react/src/explorer/components/section.tsx
new file mode 100644
index 00000000000..9d98fa19c2e
--- /dev/null
+++ b/packages/graphiql-react/src/explorer/components/section.tsx
@@ -0,0 +1,63 @@
+import { ComponentType, ReactNode } from 'react';
+
+import {
+  ArgumentIcon,
+  DeprecatedArgumentIcon,
+  DeprecatedEnumValueIcon,
+  DeprecatedFieldIcon,
+  DirectiveIcon,
+  EnumValueIcon,
+  FieldIcon,
+  ImplementsIcon,
+  RootTypeIcon,
+  TypeIcon,
+} from '../../icons';
+
+import './section.css';
+
+type ExplorerSectionProps = {
+  children: ReactNode;
+  title:
+    | 'Root Types'
+    | 'Fields'
+    | 'Deprecated Fields'
+    | 'Type'
+    | 'Arguments'
+    | 'Deprecated Arguments'
+    | 'Implements'
+    | 'Implementations'
+    | 'Possible Types'
+    | 'Enum Values'
+    | 'Deprecated Enum Values'
+    | 'Directives';
+};
+
+export function ExplorerSection(props: ExplorerSectionProps) {
+  const Icon = TYPE_TO_ICON[props.title];
+  return (
+    <div>
+      <div className="graphiql-doc-explorer-section-title">
+        <Icon />
+        {props.title}
+      </div>
+      <div className="graphiql-doc-explorer-section-content">
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+const TYPE_TO_ICON: Record<ExplorerSectionProps['title'], ComponentType> = {
+  Arguments: ArgumentIcon,
+  'Deprecated Arguments': DeprecatedArgumentIcon,
+  'Deprecated Enum Values': DeprecatedEnumValueIcon,
+  'Deprecated Fields': DeprecatedFieldIcon,
+  Directives: DirectiveIcon,
+  'Enum Values': EnumValueIcon,
+  Fields: FieldIcon,
+  Implements: ImplementsIcon,
+  Implementations: TypeIcon,
+  'Possible Types': TypeIcon,
+  'Root Types': RootTypeIcon,
+  Type: TypeIcon,
+};
diff --git a/packages/graphiql-react/src/explorer/components/type-documentation.css b/packages/graphiql-react/src/explorer/components/type-documentation.css
new file mode 100644
index 00000000000..4da4394ea0e
--- /dev/null
+++ b/packages/graphiql-react/src/explorer/components/type-documentation.css
@@ -0,0 +1,11 @@
+.graphiql-doc-explorer-item > :not(:first-child) {
+  margin-top: var(--px-12);
+}
+
+.graphiql-doc-explorer-argument-multiple {
+  margin-left: var(--px-8);
+}
+
+.graphiql-doc-explorer-enum-value {
+  color: var(--color-blue);
+}
diff --git a/packages/graphiql-react/src/explorer/components/type-documentation.tsx b/packages/graphiql-react/src/explorer/components/type-documentation.tsx
index c2fa3de32a1..b446473cf38 100644
--- a/packages/graphiql-react/src/explorer/components/type-documentation.tsx
+++ b/packages/graphiql-react/src/explorer/components/type-documentation.tsx
@@ -1,213 +1,203 @@
 import {
   GraphQLEnumValue,
-  GraphQLInterfaceType,
   GraphQLNamedType,
-  GraphQLObjectType,
+  isAbstractType,
   isEnumType,
+  isInputObjectType,
   isInterfaceType,
   isNamedType,
   isObjectType,
-  isUnionType,
 } from 'graphql';
-import { ReactNode, useState } from 'react';
+import { useState } from 'react';
 
 import { useSchemaContext } from '../../schema';
-import { MarkdownContent } from '../../ui';
-import { ExplorerFieldDef, useExplorerContext } from '../context';
+import { Button, MarkdownContent } from '../../ui';
+import { ExplorerFieldDef } from '../context';
 import { Argument } from './argument';
 import { DefaultValue } from './default-value';
+import { DeprecationReason } from './deprecation-reason';
 import { FieldLink } from './field-link';
+import { ExplorerSection } from './section';
 import { TypeLink } from './type-link';
 
-export function TypeDocumentation() {
-  const { schema } = useSchemaContext({
-    nonNull: true,
-    caller: TypeDocumentation,
-  });
-  const { explorerNavStack } = useExplorerContext({
-    nonNull: true,
-    caller: TypeDocumentation,
-  });
-  const [showDeprecated, setShowDeprecated] = useState(false);
+import './type-documentation.css';
 
-  const navItem = explorerNavStack[explorerNavStack.length - 1];
-  const type = navItem.def;
+type TypeDocumentationProps = { type: GraphQLNamedType };
 
-  if (!schema || !isNamedType(type)) {
+export function TypeDocumentation(props: TypeDocumentationProps) {
+  return isNamedType(props.type) ? (
+    <>
+      {props.type.description ? (
+        <MarkdownContent type="description">
+          {props.type.description}
+        </MarkdownContent>
+      ) : null}
+      <ImplementsInterfaces type={props.type} />
+      <Fields type={props.type} />
+      <EnumValues type={props.type} />
+      <PossibleTypes type={props.type} />
+    </>
+  ) : null;
+}
+
+function ImplementsInterfaces({ type }: { type: GraphQLNamedType }) {
+  if (!isObjectType(type)) {
     return null;
   }
+  const interfaces = type.getInterfaces();
+  return interfaces.length > 0 ? (
+    <ExplorerSection title="Implements">
+      {type.getInterfaces().map(implementedInterface => (
+        <div key={implementedInterface.name}>
+          <TypeLink type={implementedInterface} />
+        </div>
+      ))}
+    </ExplorerSection>
+  ) : null;
+}
 
-  let typesTitle: string | null = null;
-  let types: readonly (GraphQLObjectType | GraphQLInterfaceType)[] = [];
-  if (isUnionType(type)) {
-    typesTitle = 'possible types';
-    types = schema.getPossibleTypes(type);
-  } else if (isInterfaceType(type)) {
-    typesTitle = 'implementations';
-    types = schema.getPossibleTypes(type);
-  } else if (isObjectType(type)) {
-    typesTitle = 'implements';
-    types = type.getInterfaces();
+function Fields({ type }: { type: GraphQLNamedType }) {
+  const [showDeprecated, setShowDeprecated] = useState(false);
+  if (
+    !isObjectType(type) &&
+    !isInterfaceType(type) &&
+    !isInputObjectType(type)
+  ) {
+    return null;
   }
 
-  let typesDef;
-  if (types && types.length > 0) {
-    typesDef = (
-      <div id="doc-types" className="doc-category">
-        <div className="doc-category-title">{typesTitle}</div>
-        {types.map(subtype => (
-          <div key={subtype.name} className="doc-category-item">
-            <TypeLink type={subtype} />
-          </div>
-        ))}
-      </div>
-    );
-  }
+  const fieldMap = type.getFields();
 
-  // InputObject and Object
-  let fieldsDef;
-  let deprecatedFieldsDef;
-  if (type && 'getFields' in type) {
-    const fieldMap = type.getFields();
-    const fields = Object.keys(fieldMap).map(name => fieldMap[name]);
-    fieldsDef = (
-      <div id="doc-fields" className="doc-category">
-        <div className="doc-category-title">fields</div>
-        {fields
-          .filter(field => !field.deprecationReason)
-          .map(field => (
-            <Field key={field.name} type={type} field={field} />
-          ))}
-      </div>
-    );
-
-    const deprecatedFields = fields.filter(field =>
-      Boolean(field.deprecationReason),
-    );
-    if (deprecatedFields.length > 0) {
-      deprecatedFieldsDef = (
-        <div id="doc-deprecated-fields" className="doc-category">
-          <div className="doc-category-title">deprecated fields</div>
-          {!showDeprecated ? (
-            <button
-              className="show-btn"
-              onClick={() => {
-                setShowDeprecated(true);
-              }}>
-              Show deprecated fields...
-            </button>
-          ) : (
-            deprecatedFields.map(field => (
-              <Field key={field.name} type={type} field={field} />
-            ))
-          )}
-        </div>
-      );
-    }
-  }
+  const fields: ExplorerFieldDef[] = [];
+  const deprecatedFields: ExplorerFieldDef[] = [];
 
-  let valuesDef: ReactNode;
-  let deprecatedValuesDef: ReactNode;
-  if (isEnumType(type)) {
-    const values = type.getValues();
-    valuesDef = (
-      <div className="doc-category">
-        <div className="doc-category-title">values</div>
-        {values
-          .filter(value => Boolean(!value.deprecationReason))
-          .map(value => (
-            <EnumValue key={value.name} value={value} />
-          ))}
-      </div>
-    );
-
-    const deprecatedValues = values.filter(value =>
-      Boolean(value.deprecationReason),
-    );
-    if (deprecatedValues.length > 0) {
-      deprecatedValuesDef = (
-        <div className="doc-category">
-          <div className="doc-category-title">deprecated values</div>
-          {!showDeprecated ? (
-            <button
-              className="show-btn"
-              onClick={() => {
-                setShowDeprecated(true);
-              }}>
-              Show deprecated values...
-            </button>
-          ) : (
-            deprecatedValues.map(value => (
-              <EnumValue key={value.name} value={value} />
-            ))
-          )}
-        </div>
-      );
+  for (const field of Object.keys(fieldMap).map(name => fieldMap[name])) {
+    if (field.deprecationReason) {
+      deprecatedFields.push(field);
+    } else {
+      fields.push(field);
     }
   }
 
   return (
-    <div>
-      <MarkdownContent type="description">
-        {('description' in type && type.description) || 'No Description'}
-      </MarkdownContent>
-      {isObjectType(type) && typesDef}
-      {fieldsDef}
-      {deprecatedFieldsDef}
-      {valuesDef}
-      {deprecatedValuesDef}
-      {!isObjectType(type) && typesDef}
-    </div>
+    <>
+      {fields.length > 0 ? (
+        <ExplorerSection title="Fields">
+          {fields.map(field => (
+            <Field key={field.name} field={field} />
+          ))}
+        </ExplorerSection>
+      ) : null}
+      {deprecatedFields.length > 0 ? (
+        showDeprecated || fields.length === 0 ? (
+          <ExplorerSection title="Deprecated Fields">
+            {deprecatedFields.map(field => (
+              <Field key={field.name} field={field} />
+            ))}
+          </ExplorerSection>
+        ) : (
+          <Button
+            onClick={() => {
+              setShowDeprecated(true);
+            }}>
+            Show Deprecated Fields
+          </Button>
+        )
+      ) : null}
+    </>
   );
 }
 
-type FieldProps = {
-  type: GraphQLNamedType;
-  field: ExplorerFieldDef;
-};
-
-function Field({ field }: FieldProps) {
+function Field({ field }: { field: ExplorerFieldDef }) {
+  const args =
+    'args' in field ? field.args.filter(arg => !arg.deprecationReason) : [];
   return (
-    <div className="doc-category-item">
-      <FieldLink field={field} />
-      {'args' in field &&
-        field.args &&
-        field.args.length > 0 && [
-          '(',
-          <span key="args">
-            {field.args
-              .filter(arg => !arg.deprecationReason)
-              .map(arg => (
-                <Argument key={arg.name} arg={arg} />
-              ))}
-          </span>,
-          ')',
-        ]}
-      {': '}
-      <TypeLink type={field.type} />
-      <DefaultValue field={field} />
+    <div className="graphiql-doc-explorer-item">
+      <div>
+        <FieldLink field={field} />
+        {args.length > 0 ? (
+          <>
+            (
+            <span>
+              {args.map(arg =>
+                args.length === 1 ? (
+                  <Argument key={arg.name} arg={arg} inline />
+                ) : (
+                  <div
+                    key={arg.name}
+                    className="graphiql-doc-explorer-argument-multiple">
+                    <Argument arg={arg} inline />
+                  </div>
+                ),
+              )}
+            </span>
+            )
+          </>
+        ) : null}
+        {': '}
+        <TypeLink type={field.type} />
+        <DefaultValue field={field} />
+      </div>
       {field.description ? (
-        <MarkdownContent type="description">
+        <MarkdownContent type="description" onlyShowFirstChild>
           {field.description}
         </MarkdownContent>
       ) : null}
-      {'deprecationReason' in field && field.deprecationReason ? (
-        <MarkdownContent type="deprecation">
-          {field.deprecationReason}
-        </MarkdownContent>
-      ) : null}
+      <DeprecationReason>{field.deprecationReason}</DeprecationReason>
     </div>
   );
 }
 
-type EnumValueProps = {
-  value: GraphQLEnumValue;
-};
+function EnumValues({ type }: { type: GraphQLNamedType }) {
+  const [showDeprecated, setShowDeprecated] = useState(false);
+
+  if (!isEnumType(type)) {
+    return null;
+  }
+
+  const values: GraphQLEnumValue[] = [];
+  const deprecatedValues: GraphQLEnumValue[] = [];
+  for (const value of type.getValues()) {
+    if (value.deprecationReason) {
+      deprecatedValues.push(value);
+    } else {
+      values.push(value);
+    }
+  }
 
-function EnumValue({ value }: EnumValueProps) {
   return (
-    <div className="doc-category-item">
-      <div className="enum-value">{value.name}</div>
+    <>
+      {values.length > 0 ? (
+        <ExplorerSection title="Enum Values">
+          {values.map(value => (
+            <EnumValue key={value.name} value={value} />
+          ))}
+        </ExplorerSection>
+      ) : null}
+      {deprecatedValues.length > 0 ? (
+        showDeprecated || values.length === 0 ? (
+          <ExplorerSection title="Deprecated Enum Values">
+            {deprecatedValues.map(value => (
+              <EnumValue key={value.name} value={value} />
+            ))}
+          </ExplorerSection>
+        ) : (
+          <Button
+            onClick={() => {
+              setShowDeprecated(true);
+            }}>
+            Show Deprecated Values
+          </Button>
+        )
+      ) : null}
+    </>
+  );
+}
+
+function EnumValue({ value }: { value: GraphQLEnumValue }) {
+  return (
+    <div className="graphiql-doc-explorer-item">
+      <div className="graphiql-doc-explorer-enum-value">{value.name}</div>
       {value.description ? (
         <MarkdownContent type="description">
           {value.description}
@@ -221,3 +211,20 @@ function EnumValue({ value }: EnumValueProps) {
     </div>
   );
 }
+
+function PossibleTypes({ type }: { type: GraphQLNamedType }) {
+  const { schema } = useSchemaContext({ nonNull: true });
+  if (!schema || !isAbstractType(type)) {
+    return null;
+  }
+  return (
+    <ExplorerSection
+      title={isInterfaceType(type) ? 'Implementations' : 'Possible Types'}>
+      {schema.getPossibleTypes(type).map(possibleType => (
+        <div key={possibleType.name}>
+          <TypeLink type={possibleType} />
+        </div>
+      ))}
+    </ExplorerSection>
+  );
+}
diff --git a/packages/graphiql-react/src/explorer/index.ts b/packages/graphiql-react/src/explorer/index.ts
index 64d236b2fe8..9ecdb58bac2 100644
--- a/packages/graphiql-react/src/explorer/index.ts
+++ b/packages/graphiql-react/src/explorer/index.ts
@@ -1,11 +1,13 @@
 export { Argument } from './components/argument';
 export { DefaultValue } from './components/default-value';
+export { DeprecationReason } from './components/deprecation-reason';
 export { Directive } from './components/directive';
 export { DocExplorer } from './components/doc-explorer';
 export { FieldDocumentation } from './components/field-documentation';
 export { FieldLink } from './components/field-link';
 export { SchemaDocumentation } from './components/schema-documentation';
 export { Search } from './components/search';
+export { ExplorerSection } from './components/section';
 export { TypeDocumentation } from './components/type-documentation';
 export { TypeLink } from './components/type-link';
 export {
diff --git a/packages/graphiql-react/src/icons/argument.svg b/packages/graphiql-react/src/icons/argument.svg
new file mode 100644
index 00000000000..3a981c90c84
--- /dev/null
+++ b/packages/graphiql-react/src/icons/argument.svg
@@ -0,0 +1,4 @@
+<svg height="1em" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.0484 1.40838C6.12624 0.33054 7.87376 0.330541 8.9516 1.40838L12.5916 5.0484C13.6695 6.12624 13.6695 7.87376 12.5916 8.9516L8.9516 12.5916C7.87376 13.6695 6.12624 13.6695 5.0484 12.5916L1.40838 8.9516C0.33054 7.87376 0.330541 6.12624 1.40838 5.0484L5.0484 1.40838Z" stroke="currentColor" stroke-width="1.2"/>
+<rect x="6" y="6" width="2" height="2" rx="1" fill="currentColor"/>
+</svg>
diff --git a/packages/graphiql-react/src/icons/chevron-left.svg b/packages/graphiql-react/src/icons/chevron-left.svg
new file mode 100644
index 00000000000..b740c1d21df
--- /dev/null
+++ b/packages/graphiql-react/src/icons/chevron-left.svg
@@ -0,0 +1,3 @@
+<svg height="1em" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1.04819L2 5.04819L6 9.04819" stroke="currentColor" stroke-width="1.75"/>
+</svg>
diff --git a/packages/graphiql-react/src/icons/deprecated-argument.svg b/packages/graphiql-react/src/icons/deprecated-argument.svg
new file mode 100644
index 00000000000..5da9ce09f52
--- /dev/null
+++ b/packages/graphiql-react/src/icons/deprecated-argument.svg
@@ -0,0 +1,5 @@
+<svg height="1em" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.0484 1.40838C6.12624 0.33054 7.87376 0.330541 8.9516 1.40838L12.5916 5.0484C13.6695 6.12624 13.6695 7.87376 12.5916 8.9516L8.9516 12.5916C7.87376 13.6695 6.12624 13.6695 5.0484 12.5916L1.40838 8.9516C0.33054 7.87376 0.330541 6.12624 1.40838 5.0484L5.0484 1.40838Z" stroke="currentColor" stroke-width="1.2"/>
+<path d="M5 9L9 5" stroke="currentColor" stroke-width="1.2"/>
+<path d="M5 5L9 9" stroke="currentColor" stroke-width="1.2"/>
+</svg>
diff --git a/packages/graphiql-react/src/icons/deprecated-enum-value.svg b/packages/graphiql-react/src/icons/deprecated-enum-value.svg
new file mode 100644
index 00000000000..8e44d419817
--- /dev/null
+++ b/packages/graphiql-react/src/icons/deprecated-enum-value.svg
@@ -0,0 +1,5 @@
+<svg height="1em" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 8L8 4" stroke="currentColor" stroke-width="1.2"/>
+<path d="M4 4L8 8" stroke="currentColor" stroke-width="1.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 1.2H9C9.99411 1.2 10.8 2.00589 10.8 3V9C10.8 9.99411 9.99411 10.8 9 10.8H8.5V12H9C10.6569 12 12 10.6569 12 9V3C12 1.34315 10.6569 0 9 0H8.5V1.2ZM3.5 1.2V0H3C1.34315 0 0 1.34315 0 3V9C0 10.6569 1.34315 12 3 12H3.5V10.8H3C2.00589 10.8 1.2 9.99411 1.2 9V3C1.2 2.00589 2.00589 1.2 3 1.2H3.5Z" fill="currentColor"/>
+</svg>
diff --git a/packages/graphiql-react/src/icons/deprecated-field.svg b/packages/graphiql-react/src/icons/deprecated-field.svg
new file mode 100644
index 00000000000..fd07672d975
--- /dev/null
+++ b/packages/graphiql-react/src/icons/deprecated-field.svg
@@ -0,0 +1,5 @@
+<svg height="1em" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.6" y="0.6" width="10.8" height="10.8" rx="3.4" stroke="currentColor" stroke-width="1.2"/>
+<path d="M4 8L8 4" stroke="currentColor" stroke-width="1.2"/>
+<path d="M4 4L8 8" stroke="currentColor" stroke-width="1.2"/>
+</svg>
diff --git a/packages/graphiql-react/src/icons/directive.svg b/packages/graphiql-react/src/icons/directive.svg
new file mode 100644
index 00000000000..5cdd18314ff
--- /dev/null
+++ b/packages/graphiql-react/src/icons/directive.svg
@@ -0,0 +1,4 @@
+<svg height="1em" viewBox="0 0.5 12 12" xmlns="http://www.w3.org/2000/svg">
+<rect x="7" y="5.5" width="2" height="2" rx="1" transform="rotate(90 7 5.5)" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8 9L10.8 9.5C10.8 10.4941 9.99411 11.3 9 11.3L3 11.3C2.00589 11.3 1.2 10.4941 1.2 9.5L1.2 9L-3.71547e-07 9L-3.93402e-07 9.5C-4.65826e-07 11.1569 1.34314 12.5 3 12.5L9 12.5C10.6569 12.5 12 11.1569 12 9.5L12 9L10.8 9ZM10.8 4L12 4L12 3.5C12 1.84315 10.6569 0.5 9 0.5L3 0.5C1.34315 0.5 -5.87117e-08 1.84315 -1.31135e-07 3.5L-1.5299e-07 4L1.2 4L1.2 3.5C1.2 2.50589 2.00589 1.7 3 1.7L9 1.7C9.99411 1.7 10.8 2.50589 10.8 3.5L10.8 4Z" fill="currentColor"/>
+</svg>
diff --git a/packages/graphiql-react/src/icons/enum-value.svg b/packages/graphiql-react/src/icons/enum-value.svg
new file mode 100644
index 00000000000..d677ef519f0
--- /dev/null
+++ b/packages/graphiql-react/src/icons/enum-value.svg
@@ -0,0 +1,4 @@
+<svg height="1em" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5" y="5" width="2" height="2" rx="1" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 1.2H9C9.99411 1.2 10.8 2.00589 10.8 3V9C10.8 9.99411 9.99411 10.8 9 10.8H8.5V12H9C10.6569 12 12 10.6569 12 9V3C12 1.34315 10.6569 0 9 0H8.5V1.2ZM3.5 1.2V0H3C1.34315 0 0 1.34315 0 3V9C0 10.6569 1.34315 12 3 12H3.5V10.8H3C2.00589 10.8 1.2 9.99411 1.2 9V3C1.2 2.00589 2.00589 1.2 3 1.2H3.5Z" fill="currentColor"/>
+</svg>
diff --git a/packages/graphiql-react/src/icons/field.svg b/packages/graphiql-react/src/icons/field.svg
new file mode 100644
index 00000000000..58bfbfa987f
--- /dev/null
+++ b/packages/graphiql-react/src/icons/field.svg
@@ -0,0 +1,4 @@
+<svg height="1em" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.6" y="1.1" width="10.8" height="10.8" rx="2.4" stroke="currentColor" stroke-width="1.2"/>
+<rect x="5" y="5.5" width="2" height="2" rx="1" fill="currentColor"/>
+</svg>
diff --git a/packages/graphiql-react/src/icons/implements.svg b/packages/graphiql-react/src/icons/implements.svg
new file mode 100644
index 00000000000..31b7ba1c310
--- /dev/null
+++ b/packages/graphiql-react/src/icons/implements.svg
@@ -0,0 +1,4 @@
+<svg height="1em" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="5.4" stroke="currentColor" stroke-width="1.2" stroke-dasharray="4.241025 4.241025" transform="rotate(22.5)" transform-origin="center"/>
+<circle cx="6" cy="6" r="1" fill="currentColor" />
+</svg>
diff --git a/packages/graphiql-react/src/icons/index.tsx b/packages/graphiql-react/src/icons/index.tsx
index 8cf03060533..aaadb85fd1a 100644
--- a/packages/graphiql-react/src/icons/index.tsx
+++ b/packages/graphiql-react/src/icons/index.tsx
@@ -1,29 +1,61 @@
+import _ArgumentIcon from './argument.svg';
 import _ChevronDownIcon from './chevron-down.svg';
+import _ChevronLeftIcon from './chevron-left.svg';
 import _ChevronUpIcon from './chevron-up.svg';
 import _CloseIcon from './close.svg';
 import _CopyIcon from './copy.svg';
+import _DeprecatedArgumentIcon from './deprecated-argument.svg';
+import _DeprecatedEnumValueIcon from './deprecated-enum-value.svg';
+import _DeprecatedFieldIcon from './deprecated-field.svg';
+import _DirectiveIcon from './directive.svg';
 import _DocsIcon from './docs.svg';
+import _EnumValueIcon from './enum-value.svg';
+import _FieldIcon from './field.svg';
 import _HistoryIcon from './history.svg';
+import _ImplementsIcon from './implements.svg';
 import _KeyboardShortcutIcon from './keyboard-shortcut.svg';
 import _MagnifyingGlassIcon from './magnifying-glass.svg';
 import _MergeIcon from './merge.svg';
 import _PenIcon from './pen.svg';
 import _PlayIcon from './play.svg';
 import _PrettifyIcon from './prettify.svg';
+import _RootTypeIcon from './root-type.svg';
 import _SettingsIcon from './settings.svg';
 import _StarFilledIcon from './star-filled.svg';
 import _StarIcon from './star.svg';
 import _StopIcon from './stop.svg';
+import _TypeIcon from './type.svg';
 
+export const ArgumentIcon = generateIcon(_ArgumentIcon, 'argument icon');
 export const ChevronDownIcon = generateIcon(
   _ChevronDownIcon,
   'chevron down icon',
 );
+export const ChevronLeftIcon = generateIcon(
+  _ChevronLeftIcon,
+  'chevron left icon',
+);
 export const ChevronUpIcon = generateIcon(_ChevronUpIcon, 'chevron up icon');
 export const CloseIcon = generateIcon(_CloseIcon, 'close icon');
 export const CopyIcon = generateIcon(_CopyIcon, 'copy icon');
+export const DeprecatedArgumentIcon = generateIcon(
+  _DeprecatedArgumentIcon,
+  'deprecated argument icon',
+);
+export const DeprecatedEnumValueIcon = generateIcon(
+  _DeprecatedEnumValueIcon,
+  'deprecated enum value icon',
+);
+export const DeprecatedFieldIcon = generateIcon(
+  _DeprecatedFieldIcon,
+  'deprecated field icon',
+);
+export const DirectiveIcon = generateIcon(_DirectiveIcon, 'directive icon');
 export const DocsIcon = generateIcon(_DocsIcon, 'docs icon');
+export const EnumValueIcon = generateIcon(_EnumValueIcon, 'enum value icon');
+export const FieldIcon = generateIcon(_FieldIcon, 'field icon');
 export const HistoryIcon = generateIcon(_HistoryIcon, 'history icon');
+export const ImplementsIcon = generateIcon(_ImplementsIcon, 'implements icon');
 export const KeyboardShortcutIcon = generateIcon(
   _KeyboardShortcutIcon,
   'keyboard shortcut icon',
@@ -36,10 +68,12 @@ export const MergeIcon = generateIcon(_MergeIcon, 'merge icon');
 export const PenIcon = generateIcon(_PenIcon, 'pen icon');
 export const PlayIcon = generateIcon(_PlayIcon, 'play icon');
 export const PrettifyIcon = generateIcon(_PrettifyIcon, 'prettify icon');
+export const RootTypeIcon = generateIcon(_RootTypeIcon, 'root type icon');
 export const SettingsIcon = generateIcon(_SettingsIcon, 'settings icon');
 export const StarFilledIcon = generateIcon(_StarFilledIcon, 'filled star icon');
 export const StarIcon = generateIcon(_StarIcon, 'star icon');
 export const StopIcon = generateIcon(_StopIcon, 'stop icon');
+export const TypeIcon = generateIcon(_TypeIcon, 'type icon');
 
 function generateIcon(RawComponent: any, title: string) {
   const WithTitle = function IconComponent(
diff --git a/packages/graphiql-react/src/icons/root-type.svg b/packages/graphiql-react/src/icons/root-type.svg
new file mode 100644
index 00000000000..29ffd5a325a
--- /dev/null
+++ b/packages/graphiql-react/src/icons/root-type.svg
@@ -0,0 +1,4 @@
+<svg height="1em" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.6" y="0.6" width="11.8" height="11.8" rx="5.9" stroke="currentColor" stroke-width="1.2"/>
+<path d="M4.25 7.5C4.25 6 5.75 5 6.5 6.5C7.25 8 8.75 7 8.75 5.5" stroke="currentColor" stroke-width="1.2"/>
+</svg>
diff --git a/packages/graphiql-react/src/icons/type.svg b/packages/graphiql-react/src/icons/type.svg
new file mode 100644
index 00000000000..59c2c5b21b5
--- /dev/null
+++ b/packages/graphiql-react/src/icons/type.svg
@@ -0,0 +1,4 @@
+<svg height="1em" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.6" y="0.6" width="11.8" height="11.8" rx="5.9" stroke="currentColor" stroke-width="1.2"/>
+<rect x="5.5" y="5.5" width="2" height="2" rx="1" fill="currentColor" />
+</svg>
diff --git a/packages/graphiql-react/src/index.ts b/packages/graphiql-react/src/index.ts
index ff3bfc18637..907840192af 100644
--- a/packages/graphiql-react/src/index.ts
+++ b/packages/graphiql-react/src/index.ts
@@ -25,10 +25,12 @@ export {
 export {
   Argument,
   DefaultValue,
+  DeprecationReason,
   Directive,
   DocExplorer,
   ExplorerContext,
   ExplorerContextProvider,
+  ExplorerSection,
   FieldDocumentation,
   FieldLink,
   SchemaDocumentation,
diff --git a/packages/graphiql-react/src/style/root.css b/packages/graphiql-react/src/style/root.css
index 17fec5d4fec..3465c504a70 100644
--- a/packages/graphiql-react/src/style/root.css
+++ b/packages/graphiql-react/src/style/root.css
@@ -31,6 +31,7 @@
   --font-size-inline-code: calc(13rem / 16);
   --font-size-body: calc(15rem / 16);
   --font-size-h4: calc(18rem / 16);
+  --font-size-h3: calc(22rem / 16);
   --font-size-h2: calc(29rem / 16);
   --font-weight-regular: 400;
   --font-weight-medium: 500;
@@ -44,6 +45,7 @@
   --px-10: 10px;
   --px-12: 12px;
   --px-16: 16px;
+  --px-20: 20px;
 
   /* Border radius */
   --border-radius-2: 2px;
diff --git a/packages/graphiql-react/src/ui/button.css b/packages/graphiql-react/src/ui/button.css
index a8e98e46e23..c81313e2b09 100644
--- a/packages/graphiql-react/src/ui/button.css
+++ b/packages/graphiql-react/src/ui/button.css
@@ -11,3 +11,21 @@ button.graphiql-un-styled {
     outline: var(--color-neutral-15) auto 1px;
   }
 }
+
+button.graphiql-button {
+  background-color: var(--color-neutral-7);
+  border: none;
+  border-radius: var(--border-radius-4);
+  color: var(--color-neutral-100);
+  cursor: pointer;
+  font-size: var(--font-size-body);
+  padding: var(--px-8) var(--px-12);
+
+  &:active {
+    background-color: var(--color-neutral-10);
+  }
+
+  &:focus {
+    outline: var(--color-neutral-15) auto 1px;
+  }
+}
diff --git a/packages/graphiql-react/src/ui/button.tsx b/packages/graphiql-react/src/ui/button.tsx
index 93d7c36dd59..50a30763ff3 100644
--- a/packages/graphiql-react/src/ui/button.tsx
+++ b/packages/graphiql-react/src/ui/button.tsx
@@ -8,3 +8,12 @@ export function UnStyledButton(props: JSX.IntrinsicElements['button']) {
     />
   );
 }
+
+export function Button(props: JSX.IntrinsicElements['button']) {
+  return (
+    <button
+      {...props}
+      className={`graphiql-button ${props.className || ''}`.trim()}
+    />
+  );
+}
diff --git a/packages/graphiql/__mocks__/@graphiql/react.tsx b/packages/graphiql/__mocks__/@graphiql/react.tsx
index 8b369e50c83..7a07ff4f935 100644
--- a/packages/graphiql/__mocks__/@graphiql/react.tsx
+++ b/packages/graphiql/__mocks__/@graphiql/react.tsx
@@ -13,29 +13,41 @@ import React, { useEffect, useRef, useState } from 'react';
 
 export {
   Argument,
+  ArgumentIcon,
+  Button,
   ChevronDownIcon,
+  ChevronLeftIcon,
   ChevronUpIcon,
   CloseIcon,
   CopyIcon,
   DefaultValue,
+  DeprecatedArgumentIcon,
+  DeprecatedEnumValueIcon,
+  DeprecatedFieldIcon,
+  DeprecationReason,
   Directive,
+  DirectiveIcon,
   DocExplorer,
   DocsIcon,
   Dropdown,
   EditorContext,
   EditorContextProvider,
+  EnumValueIcon,
   ExecuteButton,
   ExecutionContext,
   ExecutionContextProvider,
   ExplorerContext,
   ExplorerContextProvider,
+  ExplorerSection,
   FieldDocumentation,
+  FieldIcon,
   FieldLink,
   History,
   HistoryContext,
   HistoryContextProvider,
   HistoryIcon,
   ImagePreview,
+  ImplementsIcon,
   KeyboardShortcutIcon,
   MagnifyingGlassIcon,
   MarkdownContent,
@@ -44,6 +56,7 @@ export {
   PenIcon,
   PlayIcon,
   PrettifyIcon,
+  RootTypeIcon,
   SchemaContext,
   SchemaContextProvider,
   SchemaDocumentation,
@@ -57,6 +70,7 @@ export {
   StorageContextProvider,
   ToolbarButton,
   TypeDocumentation,
+  TypeIcon,
   TypeLink,
   UnStyledButton,
   useAutoCompleteLeafs,
diff --git a/packages/graphiql/cypress/integration/docs.spec.ts b/packages/graphiql/cypress/integration/docs.spec.ts
index 7d17ab0df48..71fc402fb14 100644
--- a/packages/graphiql/cypress/integration/docs.spec.ts
+++ b/packages/graphiql/cypress/integration/docs.spec.ts
@@ -6,13 +6,12 @@ describe('GraphiQL DocExplorer - button', () => {
   });
   it('Toggles doc pane on', () => {
     cy.get('.graphiql-sidebar button').eq(0).click();
-    cy.get('.doc-explorer').should('be.visible');
+    cy.get('.graphiql-doc-explorer').should('be.visible');
   });
 
   it('Toggles doc pane back off', () => {
-    // there are two components with .docExplorerHide, one in query history
-    cy.get('.graphiql-plugin button.docExplorerHide').click();
-    cy.get('.doc-explorer').should('not.be.visible');
+    cy.get('.graphiql-sidebar button').eq(0).click();
+    cy.get('.graphiql-doc-explorer').should('not.be.visible');
   });
 });
 
@@ -30,7 +29,7 @@ describe('GraphiQL DocExplorer - search', () => {
 
   it('Navigates to a docs entry on selecting a search result', () => {
     cy.get('[data-reach-combobox-option]').eq(4).children().click();
-    cy.get('.doc-explorer-title').should('have.text', 'TestInput');
+    cy.get('.graphiql-doc-explorer-title').should('have.text', 'TestInput');
   });
 
   it('Allows searching fields within a type', () => {
@@ -45,18 +44,22 @@ describe('GraphiQL DocExplorer - search', () => {
     cy.get('[data-reach-combobox-option]').contains('hasArgs');
   });
 
-  it('Navigates back and closes popover', () => {
-    cy.get('.doc-explorer-back').click();
-    cy.get('.doc-explorer-title').should('have.text', 'Docs');
+  it('Closes popover when blurring input', () => {
+    cy.get('[data-reach-combobox-input]').blur();
     cy.get('[data-reach-combobox-popover]').should('have.attr', 'hidden');
   });
 
+  it('Navigates back', () => {
+    cy.get('.graphiql-doc-explorer-back').click();
+    cy.get('.graphiql-doc-explorer-title').should('have.text', 'Docs');
+  });
+
   it('Type fields link to their own docs entry', () => {
     cy.get('[data-reach-combobox-input]').type('test');
     cy.wait(250);
     cy.get('[data-reach-combobox-option]').last().click();
 
-    cy.get('.doc-explorer-title').should('have.text', 'isTest');
+    cy.get('.graphiql-doc-explorer-title').should('have.text', 'isTest');
     cy.get('.graphiql-markdown-description').should(
       'have.text',
       'Is this a test schema? Sure it is.\n',
@@ -65,27 +68,28 @@ describe('GraphiQL DocExplorer - search', () => {
 });
 
 describe('GraphQL DocExplorer - deprecated fields', () => {
-  before(() => {
+  it('should show deprecated fields details when expanding', () => {
     cy.visit(`/`);
+    // Open doc explorer
     cy.get('.graphiql-sidebar button').eq(0).click();
-  });
-  it('should show deprecated fields category title', () => {
-    cy.get('.doc-category>.doc-category-item').first().find('a').click();
-    cy.wait(300);
-    cy.get('.doc-category>.doc-category-title')
-      .last()
-      .should('have.text', 'deprecated fields');
-  });
-  it('should show deprecated fields details when expanding', () => {
-    cy.get('.show-btn').click();
-
-    const deprecated = cy.get('.doc-category').last();
-    deprecated
-      .get('.graphiql-markdown-description')
-      .should('contain.text', 'This field is an example of a deprecated field');
-    deprecated
-      .get('.graphiql-markdown-deprecation')
-      .should(
+
+    // Select query type
+    cy.get('.graphiql-doc-explorer-type-name').first().click();
+
+    // Show deprecated fields
+    cy.contains('Show Deprecated Fields').click();
+
+    // Assert that title is shown
+    cy.get('.graphiql-doc-explorer-section-title').contains(
+      'Deprecated Fields',
+    );
+
+    // Assert that the deprecated field is shown correctly
+    cy.get('.graphiql-doc-explorer-field-name')
+      .contains('deprecatedField')
+      .closest('.graphiql-doc-explorer-item')
+      .should('contain.text', 'This field is an example of a deprecated field')
+      .and(
         'contain.html',
         '<p>No longer in use, try <code>test</code> instead.</p>',
       );
@@ -101,13 +105,11 @@ if (!version.includes('15.5')) {
 
 describeOrSkip('GraphQL DocExplorer - deprecated arguments', () => {
   it('should show deprecated arguments category title', () => {
-    cy.get('#doc-fields .doc-category-item a.graphiql-doc-explorer-field-name')
-      .last()
-      .click();
-    cy.get('#doc-deprecated-args>.doc-category-title')
-      .last()
-      .should('have.text', 'deprecated arguments');
-    cy.get('.show-btn').click();
+    cy.get('.graphiql-doc-explorer-field-name').contains('hasArgs').click();
+    cy.contains('Show Deprecated Arguments').click();
+    cy.get('.graphiql-doc-explorer-section-title').contains(
+      'Deprecated Arguments',
+    );
     cy.get('.graphiql-markdown-deprecation').should(
       'have.text',
       'deprecated argument\n',
diff --git a/packages/graphiql/src/cdn.ts b/packages/graphiql/src/cdn.ts
index 61f94499eb3..134762717d4 100644
--- a/packages/graphiql/src/cdn.ts
+++ b/packages/graphiql/src/cdn.ts
@@ -15,7 +15,6 @@ import './style.css';
 
 // Legacy styles
 import './css/app.css';
-import './css/doc-explorer.css';
 
 import { GraphiQL } from './components/GraphiQL';
 // add the static function here for CDN only. otherwise, doing this in the component could
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
index 20431ac6a12..8d39e451a53 100644
--- a/packages/graphiql/src/components/GraphiQL.tsx
+++ b/packages/graphiql/src/components/GraphiQL.tsx
@@ -760,13 +760,7 @@ class GraphiQLWithContext extends React.Component<
               minWidth: '200px',
             }}>
             <div className="graphiql-plugin">
-              {this.props.explorerContext?.isVisible ? (
-                <DocExplorer
-                  onClose={() =>
-                    this.props.pluginResize.setHiddenElement('first')
-                  }
-                />
-              ) : null}
+              {this.props.explorerContext?.isVisible ? <DocExplorer /> : null}
               {this.props.historyContext?.isVisible ? <History /> : null}
             </div>
           </div>
diff --git a/packages/graphiql/src/css/doc-explorer.css b/packages/graphiql/src/css/doc-explorer.css
deleted file mode 100644
index 167b5ca5237..00000000000
--- a/packages/graphiql/src/css/doc-explorer.css
+++ /dev/null
@@ -1,282 +0,0 @@
-.graphiql-container .doc-explorer {
-  background: white;
-}
-
-.graphiql-container .doc-explorer-title-bar {
-  cursor: default;
-  display: flex;
-  height: 34px;
-  line-height: 14px;
-  padding: 8px 8px 5px;
-  position: relative;
-  user-select: none;
-}
-
-.graphiql-container .doc-explorer-title {
-  flex: 1;
-  font-weight: bold;
-  overflow-x: hidden;
-  padding: 10px 0 10px 10px;
-  text-align: center;
-  text-overflow: ellipsis;
-  user-select: text;
-  white-space: nowrap;
-}
-
-.graphiql-container .doc-explorer-back {
-  color: #3b5998;
-  cursor: pointer;
-  margin: -7px 0 -6px -8px;
-  overflow-x: hidden;
-  padding: 17px 12px 16px 16px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background: 0;
-  border: 0;
-  line-height: 14px;
-}
-
-.graphiql-container .doc-explorer-back:before {
-  border-left: 2px solid #3b5998;
-  border-top: 2px solid #3b5998;
-  content: '';
-  display: inline-block;
-  height: 9px;
-  margin: 0 3px -1px 0;
-  position: relative;
-  transform: rotate(-45deg);
-  width: 9px;
-}
-
-.graphiql-container .doc-explorer-rhs {
-  position: relative;
-}
-
-.graphiql-container .doc-explorer-contents {
-  background-color: #ffffff;
-  border-top: 1px solid #d6d6d6;
-  overflow-y: auto;
-  padding: 20px 15px;
-}
-
-.graphiql-container .doc-type-description p:first-child,
-.graphiql-container .doc-type-description blockquote:first-child {
-  margin-top: 0;
-}
-
-.graphiql-container .doc-explorer-contents a {
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.graphiql-container .doc-explorer-contents a:hover {
-  text-decoration: underline;
-}
-
-.graphiql-container .doc-value-description > :first-child {
-  margin-top: 4px;
-}
-
-.graphiql-container .doc-value-description > :last-child {
-  margin-bottom: 4px;
-}
-
-.graphiql-container .doc-type-description code,
-.graphiql-container .doc-type-description pre,
-.graphiql-container .doc-category code,
-.graphiql-container .doc-category pre {
-  --saf-0: rgba(var(--sk_foreground_low, 29, 28, 29), 0.13);
-  font-size: 12px;
-  line-height: 1.50001;
-  font-variant-ligatures: none;
-  white-space: pre;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  word-break: normal;
-  -webkit-tab-size: 4;
-  -moz-tab-size: 4;
-  tab-size: 4;
-}
-
-.graphiql-container .doc-type-description code,
-.graphiql-container .doc-category code {
-  padding: 2px 3px 1px;
-  border: 1px solid var(--saf-0);
-  border-radius: 3px;
-  background-color: rgba(var(--sk_foreground_min, 29, 28, 29), 0.04);
-  color: #e01e5a;
-  background-color: white;
-}
-
-.graphiql-container .doc-category {
-  margin: 20px 0;
-}
-
-.graphiql-container .doc-category-title {
-  border-bottom: 1px solid #e0e0e0;
-  color: #777;
-  cursor: default;
-  font-size: 14px;
-  font-variant: small-caps;
-  font-weight: bold;
-  letter-spacing: 1px;
-  margin: 0 -15px 10px 0;
-  padding: 10px 0;
-  user-select: none;
-}
-
-.graphiql-container .doc-category-item {
-  margin: 12px 0;
-  color: #555;
-}
-
-.graphiql-container .keyword {
-  color: #b11a04;
-}
-
-.graphiql-container .type-name {
-  color: #ca9800;
-}
-
-.graphiql-container .field-name {
-  color: #1f61a0;
-}
-
-.graphiql-container .field-short-description {
-  color: #666;
-  margin-left: 5px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.graphiql-container .enum-value {
-  color: #0b7fc7;
-}
-
-.graphiql-container .arg-name {
-  color: #8b2bb9;
-}
-
-.graphiql-container .arg {
-  display: block;
-  margin-left: 1em;
-}
-
-.graphiql-container .arg:first-child:last-child,
-.graphiql-container .arg:first-child:nth-last-child(2),
-.graphiql-container .arg:first-child:nth-last-child(2) ~ .arg {
-  display: inherit;
-  margin: inherit;
-}
-
-.graphiql-container .arg:first-child:nth-last-child(2):after {
-  content: ', ';
-}
-
-.graphiql-container .arg-default-value {
-  color: #43a047;
-}
-
-.graphiql-container .doc-deprecation {
-  background: #fffae8;
-  box-shadow: inset 0 0 1px #bfb063;
-  color: #867f70;
-  line-height: 16px;
-  margin: 8px -8px;
-  max-height: 80px;
-  overflow: hidden;
-  padding: 8px;
-  border-radius: 3px;
-}
-
-.graphiql-container .doc-deprecation:before {
-  content: 'Deprecated:';
-  color: #c79b2e;
-  cursor: default;
-  display: block;
-  font-size: 9px;
-  font-weight: bold;
-  letter-spacing: 1px;
-  line-height: 1;
-  padding-bottom: 5px;
-  text-transform: uppercase;
-  user-select: none;
-}
-
-.graphiql-container .doc-deprecation > :first-child {
-  margin-top: 0;
-}
-
-.graphiql-container .doc-deprecation > :last-child {
-  margin-bottom: 0;
-}
-
-.graphiql-container .show-btn {
-  -webkit-appearance: initial;
-  display: block;
-  border-radius: 3px;
-  border: solid 1px #ccc;
-  text-align: center;
-  padding: 8px 12px 10px;
-  width: 100%;
-  box-sizing: border-box;
-  background: #fbfcfc;
-  color: #555;
-  cursor: pointer;
-}
-
-.graphiql-container .search-box {
-  border-bottom: 1px solid #d3d6db;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  margin: -15px -15px 12px 0;
-  position: relative;
-}
-
-.graphiql-container .search-box-icon {
-  cursor: pointer;
-  display: block;
-  font-size: 24px;
-  transform: rotate(-45deg);
-  user-select: none;
-}
-
-.graphiql-container .search-box .search-box-clear {
-  background-color: #d0d0d0;
-  border-radius: 12px;
-  color: #fff;
-  cursor: pointer;
-  font-size: 11px;
-  padding: 1px 5px 2px;
-  position: absolute;
-  right: 3px;
-  user-select: none;
-  border: 0;
-}
-
-.graphiql-container .search-box .search-box-clear:hover {
-  background-color: #b9b9b9;
-}
-
-.graphiql-container .search-box > input {
-  border: none;
-  box-sizing: border-box;
-  font-size: 14px;
-  outline: none;
-  padding: 6px 24px 8px 20px;
-  width: 100%;
-}
-
-.graphiql-container .error-container {
-  font-weight: bold;
-  left: 0;
-  letter-spacing: 1px;
-  opacity: 0.5;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  text-transform: uppercase;
-  top: 50%;
-  transform: translate(0, -50%);
-}
diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
index 6edf5e9a834..6abf23bb2cc 100644
--- a/packages/graphiql/src/style.css
+++ b/packages/graphiql/src/style.css
@@ -142,6 +142,7 @@
   border-left: 1px solid var(--color-neutral-15);
   flex: 1;
   max-width: calc(100% - 2 * var(--px-16));
+  overflow-y: auto;
   padding: var(--px-16);
 }