diff --git a/.changeset/fast-oranges-leave.md b/.changeset/fast-oranges-leave.md
new file mode 100644
index 000000000..30272b607
--- /dev/null
+++ b/.changeset/fast-oranges-leave.md
@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Enable "@typescript-eslint/consistent-type-imports" lint rule
diff --git a/.eslintrc.js b/.eslintrc.js
index 78bd03279..8549fea0c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -22,6 +22,14 @@ module.exports = {
     "testing-library/no-node-access": "off",
     "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/no-unused-vars": ["warn", { ignoreRestSiblings: true }],
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        prefer: "type-imports",
+        disallowTypeAnnotations: false,
+        fixStyle: "separate-type-imports",
+      },
+    ],
   },
   settings: {
     react: {
diff --git a/src/@types/svg.d.ts b/src/@types/svg.d.ts
index bbac48480..8f4806e72 100644
--- a/src/@types/svg.d.ts
+++ b/src/@types/svg.d.ts
@@ -1,5 +1,5 @@
 declare module "*.svg" {
-  import * as React from "react";
+  import type * as React from "react";
 
   export const ReactComponent: React.FunctionComponent<
     React.SVGProps<SVGSVGElement> & { title?: string }
diff --git a/src/application/App.tsx b/src/application/App.tsx
index 1858e36cc..d83b1839c 100644
--- a/src/application/App.tsx
+++ b/src/application/App.tsx
@@ -1,27 +1,26 @@
 import { useEffect, useState, useRef } from "react";
-import {
-  useReactiveVar,
-  gql,
-  useQuery,
-  makeVar,
-  TypedDocumentNode,
-} from "@apollo/client";
+import type { TypedDocumentNode } from "@apollo/client";
+import { useReactiveVar, gql, useQuery, makeVar } from "@apollo/client";
 
 import { currentScreen, Screens } from "./components/Layouts/Navigation";
 import { Queries } from "./components/Queries/Queries";
 import { Mutations } from "./components/Mutations/Mutations";
 import { Explorer } from "./components/Explorer/Explorer";
 import { Cache } from "./components/Cache/Cache";
-import { GetOperationCounts, GetOperationCountsVariables } from "./types/gql";
+import type {
+  GetOperationCounts,
+  GetOperationCountsVariables,
+} from "./types/gql";
 import { Tabs } from "./components/Tabs";
 import { Button } from "./components/Button";
 import IconSettings from "@apollo/icons/default/IconSettings.svg";
 import IconSync from "@apollo/icons/small/IconSync.svg";
 import { SettingsModal } from "./components/Layouts/SettingsModal";
 import Logo from "@apollo/icons/logos/LogoSymbol.svg";
-import { BannerAlert, BannerAlertConfig } from "./components/BannerAlert";
-import { GetStates } from "./stateMachine";
-import { DevtoolsMachine } from "./machines";
+import type { BannerAlertConfig } from "./components/BannerAlert";
+import { BannerAlert } from "./components/BannerAlert";
+import type { GetStates } from "./stateMachine";
+import type { DevtoolsMachine } from "./machines";
 import { ClientNotFoundModal } from "./components/ClientNotFoundModal";
 import { getPanelActor } from "../extension/devtools/panelActor";
 
diff --git a/src/application/__tests__/AppProvider.test.tsx b/src/application/__tests__/AppProvider.test.tsx
index 502cd0dbe..71192834f 100644
--- a/src/application/__tests__/AppProvider.test.tsx
+++ b/src/application/__tests__/AppProvider.test.tsx
@@ -5,7 +5,7 @@ import { gql } from "@apollo/client";
 import matchMediaMock from "../utilities/testing/matchMedia";
 import { Mode, colorTheme } from "../theme";
 import { AppProvider, getQueryData, getMutationData } from "../index";
-import { QueryInfo } from "../../extension/tab/helpers";
+import type { QueryInfo } from "../../extension/tab/helpers";
 import { print, getIntrospectionQuery } from "graphql";
 
 const matchMedia = matchMediaMock();
diff --git a/src/application/components/BannerAlert.tsx b/src/application/components/BannerAlert.tsx
index 4f1a42c4b..bd9e46720 100644
--- a/src/application/components/BannerAlert.tsx
+++ b/src/application/components/BannerAlert.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { makeVar, useReactiveVar } from "@apollo/client";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { LoadingSpinner } from "./Explorer/LoadingSpinner";
 import IconCheck from "@apollo/icons/default/IconCheck.svg";
 import IconError from "@apollo/icons/default/IconError.svg";
diff --git a/src/application/components/Button.tsx b/src/application/components/Button.tsx
index 4701499dd..08b7a0b7c 100644
--- a/src/application/components/Button.tsx
+++ b/src/application/components/Button.tsx
@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ElementType } from "react";
+import type { ComponentPropsWithoutRef, ElementType } from "react";
 import { clsx } from "clsx";
 
 type NativeButtonProps = ComponentPropsWithoutRef<"button">;
diff --git a/src/application/components/ButtonGroup.tsx b/src/application/components/ButtonGroup.tsx
index 9897a9a6d..a9d354c67 100644
--- a/src/application/components/ButtonGroup.tsx
+++ b/src/application/components/ButtonGroup.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 interface ButtonGroupProps {
   children: ReactNode;
diff --git a/src/application/components/Cache/Cache.tsx b/src/application/components/Cache/Cache.tsx
index f8b6ab85d..1cc4ef8bd 100644
--- a/src/application/components/Cache/Cache.tsx
+++ b/src/application/components/Cache/Cache.tsx
@@ -1,12 +1,14 @@
-import { Fragment, useState, useMemo, ReactNode } from "react";
-import { gql, useQuery, TypedDocumentNode } from "@apollo/client";
+import type { ReactNode } from "react";
+import { Fragment, useState, useMemo } from "react";
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql, useQuery } from "@apollo/client";
 
 import { SidebarLayout } from "../Layouts/SidebarLayout";
 import { SearchField } from "../SearchField";
 import { EntityList } from "./sidebar/EntityList";
 import { Loading } from "./common/Loading";
-import { GetCache, GetCacheVariables } from "../../types/gql";
-import { JSONObject } from "../../types/json";
+import type { GetCache, GetCacheVariables } from "../../types/gql";
+import type { JSONObject } from "../../types/json";
 import { JSONTreeViewer } from "../JSONTreeViewer";
 import clsx from "clsx";
 import { CopyButton } from "../CopyButton";
diff --git a/src/application/components/Cache/common/utils.ts b/src/application/components/Cache/common/utils.ts
index 161ee25e2..7371b6e5c 100644
--- a/src/application/components/Cache/common/utils.ts
+++ b/src/application/components/Cache/common/utils.ts
@@ -1,4 +1,4 @@
-import { JSONObject } from "../../../types/json";
+import type { JSONObject } from "../../../types/json";
 
 // Return an alphabetically sorted list of all root cache ID's. ROOT_QUERY,
 // ROOT_MUTATION, and ROOT_SUBSCRIPTION will be listed first (if they exist).
diff --git a/src/application/components/Cache/sidebar/EntityList.tsx b/src/application/components/Cache/sidebar/EntityList.tsx
index 8622a1279..644b36695 100644
--- a/src/application/components/Cache/sidebar/EntityList.tsx
+++ b/src/application/components/Cache/sidebar/EntityList.tsx
@@ -2,7 +2,7 @@ import { List } from "../../List";
 import { ListItem } from "../../ListItem";
 
 import { getRootCacheIds } from "../common/utils";
-import { JSONObject } from "../../../types/json";
+import type { JSONObject } from "../../../types/json";
 import HighlightMatch from "../../HighlightMatch";
 
 interface EntityListProps {
diff --git a/src/application/components/CodeBlock.tsx b/src/application/components/CodeBlock.tsx
index 047c0c374..f271887d3 100644
--- a/src/application/components/CodeBlock.tsx
+++ b/src/application/components/CodeBlock.tsx
@@ -1,4 +1,5 @@
-import { Highlight, Language, PrismTheme } from "prism-react-renderer";
+import type { Language, PrismTheme } from "prism-react-renderer";
+import { Highlight } from "prism-react-renderer";
 import { useReactiveVar } from "@apollo/client";
 import { colors } from "@apollo/brand";
 import { clsx } from "clsx";
diff --git a/src/application/components/CopyButton.tsx b/src/application/components/CopyButton.tsx
index 8015546a7..f2f0425b2 100644
--- a/src/application/components/CopyButton.tsx
+++ b/src/application/components/CopyButton.tsx
@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 import clsx from "clsx";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { Button } from "./Button";
diff --git a/src/application/components/Disclosure/Button.tsx b/src/application/components/Disclosure/Button.tsx
index 707920179..4554ef40c 100644
--- a/src/application/components/Disclosure/Button.tsx
+++ b/src/application/components/Disclosure/Button.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Disclosure } from "@headlessui/react";
 import IconChevronUp from "@apollo/icons/default/IconChevronUp.svg";
 import clsx from "clsx";
diff --git a/src/application/components/Disclosure/Disclosure.tsx b/src/application/components/Disclosure/Disclosure.tsx
index 5cc90f3da..2492a6347 100644
--- a/src/application/components/Disclosure/Disclosure.tsx
+++ b/src/application/components/Disclosure/Disclosure.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Disclosure as DisclosureRoot } from "@headlessui/react";
 import { DisclosureButton } from "./Button";
 import { DisclosurePanel } from "./Panel";
diff --git a/src/application/components/Disclosure/Panel.tsx b/src/application/components/Disclosure/Panel.tsx
index 7bd550177..39e96b292 100644
--- a/src/application/components/Disclosure/Panel.tsx
+++ b/src/application/components/Disclosure/Panel.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 
 interface DisclosurePanelProps {
diff --git a/src/application/components/Explorer/Explorer.tsx b/src/application/components/Explorer/Explorer.tsx
index b79564e5a..36f8e5b78 100644
--- a/src/application/components/Explorer/Explorer.tsx
+++ b/src/application/components/Explorer/Explorer.tsx
@@ -5,7 +5,8 @@ import type { IntrospectionQuery } from "graphql";
 import { getIntrospectionQuery } from "graphql/utilities";
 import { colorTheme } from "../../theme";
 import { FullWidthLayout } from "../Layouts/FullWidthLayout";
-import { QueryResult } from "../../../types";
+import type { QueryResult } from "../../../types";
+import type { JSONValue, IncomingMessageEvent } from "./postMessageHelpers";
 import {
   postMessageToEmbed,
   EMBEDDABLE_EXPLORER_URL,
@@ -14,10 +15,8 @@ import {
   EXPLORER_SUBSCRIPTION_REQUEST,
   EXPLORER_SUBSCRIPTION_RESPONSE,
   EXPLORER_SUBSCRIPTION_TERMINATION,
-  JSONValue,
   SCHEMA_ERROR,
   SCHEMA_RESPONSE,
-  IncomingMessageEvent,
 } from "./postMessageHelpers";
 import {
   EXPLORER_LISTENING_FOR_HANDSHAKE,
diff --git a/src/application/components/Explorer/GraphRefModal.tsx b/src/application/components/Explorer/GraphRefModal.tsx
index ed884ca3b..3fbe9f506 100644
--- a/src/application/components/Explorer/GraphRefModal.tsx
+++ b/src/application/components/Explorer/GraphRefModal.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
 import { clsx } from "clsx";
 import { LoadingSpinner } from "./LoadingSpinner";
 import { hasGraphRefBeenAuthenticated } from "./postMessageAuthHelpers";
diff --git a/src/application/components/Explorer/Telescope.tsx b/src/application/components/Explorer/Telescope.tsx
index 3dbaa17a6..c7e319d44 100644
--- a/src/application/components/Explorer/Telescope.tsx
+++ b/src/application/components/Explorer/Telescope.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 
 interface TelescopeProps {
   className?: string;
diff --git a/src/application/components/Explorer/postMessageAuthHelpers.ts b/src/application/components/Explorer/postMessageAuthHelpers.ts
index 89a1dd1a9..f43673fe4 100644
--- a/src/application/components/Explorer/postMessageAuthHelpers.ts
+++ b/src/application/components/Explorer/postMessageAuthHelpers.ts
@@ -1,4 +1,5 @@
-import { IncomingMessageEvent, postMessageToEmbed } from "./postMessageHelpers";
+import type { IncomingMessageEvent } from "./postMessageHelpers";
+import { postMessageToEmbed } from "./postMessageHelpers";
 
 export const SET_PARTIAL_AUTHENTICATION_TOKEN_FOR_PARENT =
   "SetPartialAuthenticationTokenForParent";
diff --git a/src/application/components/GitHubIssueLink.tsx b/src/application/components/GitHubIssueLink.tsx
index af41a7e0f..877b32c5e 100644
--- a/src/application/components/GitHubIssueLink.tsx
+++ b/src/application/components/GitHubIssueLink.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 declare const VERSION: string;
 
diff --git a/src/application/components/JSONTreeViewer.tsx b/src/application/components/JSONTreeViewer.tsx
index 8a13df7eb..04d1b20db 100644
--- a/src/application/components/JSONTreeViewer.tsx
+++ b/src/application/components/JSONTreeViewer.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, ComponentPropsWithoutRef } from "react";
+import type { CSSProperties, ComponentPropsWithoutRef } from "react";
 import { useReactiveVar } from "@apollo/client";
 import { JSONTree } from "react-json-tree";
 import { ColorTheme, colorTheme } from "../theme";
diff --git a/src/application/components/Layouts/FullWidthLayout.tsx b/src/application/components/Layouts/FullWidthLayout.tsx
index 12f7b0c48..31146a806 100644
--- a/src/application/components/Layouts/FullWidthLayout.tsx
+++ b/src/application/components/Layouts/FullWidthLayout.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { clsx } from "clsx";
 
 interface FullWidthLayoutProps {
diff --git a/src/application/components/Layouts/SidebarLayout.tsx b/src/application/components/Layouts/SidebarLayout.tsx
index 5c50ec8ba..09eaef262 100644
--- a/src/application/components/Layouts/SidebarLayout.tsx
+++ b/src/application/components/Layouts/SidebarLayout.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";
 
 interface SidebarLayoutProps {
diff --git a/src/application/components/List.tsx b/src/application/components/List.tsx
index 36b76e791..b75ccc0c2 100644
--- a/src/application/components/List.tsx
+++ b/src/application/components/List.tsx
@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 import clsx from "clsx";
 
 type ListProps = ComponentPropsWithoutRef<"div">;
diff --git a/src/application/components/ListItem.tsx b/src/application/components/ListItem.tsx
index 3a255976c..5282acd00 100644
--- a/src/application/components/ListItem.tsx
+++ b/src/application/components/ListItem.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, ComponentPropsWithoutRef } from "react";
+import type { ReactNode, ComponentPropsWithoutRef } from "react";
 import { clsx } from "clsx";
 
 interface ListItemProps {
diff --git a/src/application/components/Modal/Body.tsx b/src/application/components/Modal/Body.tsx
index fda525e09..c20dfe99e 100644
--- a/src/application/components/Modal/Body.tsx
+++ b/src/application/components/Modal/Body.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { clsx } from "clsx";
 
 interface BodyProps {
diff --git a/src/application/components/Modal/Footer.tsx b/src/application/components/Modal/Footer.tsx
index 820f3ea11..9adfd6190 100644
--- a/src/application/components/Modal/Footer.tsx
+++ b/src/application/components/Modal/Footer.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { clsx } from "clsx";
 
 interface FooterProps {
diff --git a/src/application/components/Modal/Header.tsx b/src/application/components/Modal/Header.tsx
index ad27308d1..cdbba0b76 100644
--- a/src/application/components/Modal/Header.tsx
+++ b/src/application/components/Modal/Header.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { clsx } from "clsx";
 
 interface HeaderProps {
diff --git a/src/application/components/Modal/Modal.tsx b/src/application/components/Modal/Modal.tsx
index 3f7dfe4a8..873b42983 100644
--- a/src/application/components/Modal/Modal.tsx
+++ b/src/application/components/Modal/Modal.tsx
@@ -1,5 +1,6 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, ReactNode } from "react";
+import type { ReactNode } from "react";
+import { Fragment } from "react";
 import { clsx } from "clsx";
 
 import { Body } from "./Body";
diff --git a/src/application/components/Modal/Title.tsx b/src/application/components/Modal/Title.tsx
index 3ff4cb9da..1e3efe63d 100644
--- a/src/application/components/Modal/Title.tsx
+++ b/src/application/components/Modal/Title.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Dialog } from "@headlessui/react";
 import { clsx } from "clsx";
 
diff --git a/src/application/components/Mutations/Mutations.tsx b/src/application/components/Mutations/Mutations.tsx
index 6949092ed..41c9575f4 100644
--- a/src/application/components/Mutations/Mutations.tsx
+++ b/src/application/components/Mutations/Mutations.tsx
@@ -1,11 +1,12 @@
 import { Fragment, useState } from "react";
-import { gql, TypedDocumentNode, useQuery } from "@apollo/client";
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql, useQuery } from "@apollo/client";
 import { List } from "../List";
 import { ListItem } from "../ListItem";
 
 import { SidebarLayout } from "../Layouts/SidebarLayout";
 import { RunInExplorerButton } from "../Queries/RunInExplorerButton";
-import { GetMutations, GetMutationsVariables } from "../../types/gql";
+import type { GetMutations, GetMutationsVariables } from "../../types/gql";
 import { JSONTreeViewer } from "../JSONTreeViewer";
 import { Tabs } from "../Tabs";
 import { QueryLayout } from "../QueryLayout";
diff --git a/src/application/components/Queries/Queries.tsx b/src/application/components/Queries/Queries.tsx
index 527c7c5f3..5b0bb5aa0 100644
--- a/src/application/components/Queries/Queries.tsx
+++ b/src/application/components/Queries/Queries.tsx
@@ -1,11 +1,15 @@
 import { useState } from "react";
-import { gql, useQuery, TypedDocumentNode } from "@apollo/client";
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql, useQuery } from "@apollo/client";
 import { List } from "../List";
 import { ListItem } from "../ListItem";
 
 import { SidebarLayout } from "../Layouts/SidebarLayout";
 import { RunInExplorerButton } from "./RunInExplorerButton";
-import { GetWatchedQueries, GetWatchedQueriesVariables } from "../../types/gql";
+import type {
+  GetWatchedQueries,
+  GetWatchedQueriesVariables,
+} from "../../types/gql";
 import { Tabs } from "../Tabs";
 import { JSONTreeViewer } from "../JSONTreeViewer";
 import { QueryLayout } from "../QueryLayout";
diff --git a/src/application/components/Queries/RunInExplorerButton.tsx b/src/application/components/Queries/RunInExplorerButton.tsx
index 3928c0d82..1e0a7fffa 100644
--- a/src/application/components/Queries/RunInExplorerButton.tsx
+++ b/src/application/components/Queries/RunInExplorerButton.tsx
@@ -1,4 +1,4 @@
-import { Variables } from "../../types/scalars";
+import type { Variables } from "../../types/scalars";
 import {
   postMessageToEmbed,
   SET_OPERATION,
diff --git a/src/application/components/QueryLayout/Header.tsx b/src/application/components/QueryLayout/Header.tsx
index a7cf09fbb..59f16d0aa 100644
--- a/src/application/components/QueryLayout/Header.tsx
+++ b/src/application/components/QueryLayout/Header.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 interface HeaderProps {
   children: ReactNode;
diff --git a/src/application/components/QueryLayout/QueryLayout.tsx b/src/application/components/QueryLayout/QueryLayout.tsx
index beaf3164b..971f98119 100644
--- a/src/application/components/QueryLayout/QueryLayout.tsx
+++ b/src/application/components/QueryLayout/QueryLayout.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { clsx } from "clsx";
 
 import { SidebarLayout } from "../Layouts/SidebarLayout";
diff --git a/src/application/components/QueryLayout/TabContent.tsx b/src/application/components/QueryLayout/TabContent.tsx
index b3d38fa05..aa0d676cc 100644
--- a/src/application/components/QueryLayout/TabContent.tsx
+++ b/src/application/components/QueryLayout/TabContent.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Tabs } from "../Tabs";
 
 interface TabContentProps {
diff --git a/src/application/components/QueryLayout/Tabs.tsx b/src/application/components/QueryLayout/Tabs.tsx
index c01fdfc5a..c2f7a823a 100644
--- a/src/application/components/QueryLayout/Tabs.tsx
+++ b/src/application/components/QueryLayout/Tabs.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Tabs as TabsBase } from "../Tabs";
 
 interface TabsProps<TValue extends string> {
diff --git a/src/application/components/QueryLayout/Title.tsx b/src/application/components/QueryLayout/Title.tsx
index 9b7d52aa4..41968aaaa 100644
--- a/src/application/components/QueryLayout/Title.tsx
+++ b/src/application/components/QueryLayout/Title.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 interface TitleProps {
   children: ReactNode;
diff --git a/src/application/components/Tabs/Content.tsx b/src/application/components/Tabs/Content.tsx
index b1ca406a0..b30c930d4 100644
--- a/src/application/components/Tabs/Content.tsx
+++ b/src/application/components/Tabs/Content.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Content as ContentBase } from "@radix-ui/react-tabs";
 import clsx from "clsx";
 
diff --git a/src/application/components/Tabs/List.tsx b/src/application/components/Tabs/List.tsx
index 51156afa6..70df3dfe7 100644
--- a/src/application/components/Tabs/List.tsx
+++ b/src/application/components/Tabs/List.tsx
@@ -1,5 +1,5 @@
 import { List as ListBase } from "@radix-ui/react-tabs";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { clsx } from "clsx";
 
 interface ListProps {
diff --git a/src/application/components/Tabs/Tabs.tsx b/src/application/components/Tabs/Tabs.tsx
index c79f6c093..b8d557c81 100644
--- a/src/application/components/Tabs/Tabs.tsx
+++ b/src/application/components/Tabs/Tabs.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Root } from "@radix-ui/react-tabs";
 import clsx from "clsx";
 
diff --git a/src/application/components/Tabs/Trigger.tsx b/src/application/components/Tabs/Trigger.tsx
index 149097082..b7379694c 100644
--- a/src/application/components/Tabs/Trigger.tsx
+++ b/src/application/components/Tabs/Trigger.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Trigger as TriggerBase } from "@radix-ui/react-tabs";
 
 interface TriggerProps {
diff --git a/src/application/components/TextField.tsx b/src/application/components/TextField.tsx
index dcdab9560..f0bf0619a 100644
--- a/src/application/components/TextField.tsx
+++ b/src/application/components/TextField.tsx
@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 import { clsx } from "clsx";
 
-import { ExtendProps } from "../types/props";
+import type { ExtendProps } from "../types/props";
 
 type TextFieldProps = ExtendProps<
   ComponentPropsWithoutRef<"input">,
diff --git a/src/application/index.tsx b/src/application/index.tsx
index 8257e8e0c..86fbd1cf5 100755
--- a/src/application/index.tsx
+++ b/src/application/index.tsx
@@ -1,12 +1,12 @@
 import { useEffect } from "react";
 import { createRoot } from "react-dom/client";
+import type { TypedDocumentNode } from "@apollo/client";
 import {
   ApolloClient,
   ApolloProvider,
   InMemoryCache,
   makeVar,
   gql,
-  TypedDocumentNode,
 } from "@apollo/client";
 import { getOperationName } from "@apollo/client/utilities";
 import { print } from "graphql/language/printer";
@@ -15,7 +15,7 @@ import { colorTheme, listenForThemeChange } from "./theme";
 import { App } from "./App";
 import { fragmentRegistry } from "./fragmentRegistry";
 
-import {
+import type {
   GetAllMutations,
   GetAllMutationsVariables,
   GetQueries,
@@ -23,7 +23,7 @@ import {
   WatchedMutation,
   WatchedQuery,
 } from "./types/gql";
-import { QueryInfo } from "../extension/tab/helpers";
+import type { QueryInfo } from "../extension/tab/helpers";
 
 const cache = new InMemoryCache({
   fragments: fragmentRegistry,
diff --git a/src/application/machines.ts b/src/application/machines.ts
index 01e2b0436..4052aa819 100644
--- a/src/application/machines.ts
+++ b/src/application/machines.ts
@@ -1,5 +1,5 @@
 import { createMachine } from "./stateMachine";
-import { QueryInfo } from "../extension/tab/helpers";
+import type { QueryInfo } from "../extension/tab/helpers";
 
 export const devtoolsMachine = createMachine({
   initial: "initialized",
diff --git a/src/application/stateMachine.ts b/src/application/stateMachine.ts
index 542d0930c..ebb2fffdf 100644
--- a/src/application/stateMachine.ts
+++ b/src/application/stateMachine.ts
@@ -1,4 +1,4 @@
-import { NoInfer, SafeAny } from "../types";
+import type { NoInfer, SafeAny } from "../types";
 
 interface Machine<
   State extends string,
diff --git a/src/application/types/gql.ts b/src/application/types/gql.ts
index e233e8181..dc812d14c 100644
--- a/src/application/types/gql.ts
+++ b/src/application/types/gql.ts
@@ -1,5 +1,5 @@
-import { QueryData } from "./scalars";
-import { Variables } from "./scalars";
+import type { QueryData } from "./scalars";
+import type { Variables } from "./scalars";
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {
diff --git a/src/application/types/scalars.ts b/src/application/types/scalars.ts
index 8d81e7683..16e7fd503 100644
--- a/src/application/types/scalars.ts
+++ b/src/application/types/scalars.ts
@@ -1,4 +1,4 @@
-import { JSONObject } from "./json";
+import type { JSONObject } from "./json";
 
 export type Variables = JSONObject;
 export type QueryData = JSONObject;
diff --git a/src/application/utilities/testing/fakeGraphQL.ts b/src/application/utilities/testing/fakeGraphQL.ts
index eee19ac09..876bc770c 100644
--- a/src/application/utilities/testing/fakeGraphQL.ts
+++ b/src/application/utilities/testing/fakeGraphQL.ts
@@ -1,6 +1,6 @@
 import { makeExecutableSchema } from "@graphql-tools/schema";
 import { addMocksToSchema } from "@graphql-tools/mock";
-import { GraphQLFieldResolver } from "graphql";
+import type { GraphQLFieldResolver } from "graphql";
 
 interface Author {
   id: number;
diff --git a/src/application/utilities/testing/renderWithApolloClient.tsx b/src/application/utilities/testing/renderWithApolloClient.tsx
index 18b6550a1..83300c783 100644
--- a/src/application/utilities/testing/renderWithApolloClient.tsx
+++ b/src/application/utilities/testing/renderWithApolloClient.tsx
@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 import { render } from "@testing-library/react";
 import { ApolloProvider } from "@apollo/client";
 import userEvent from "@testing-library/user-event";
diff --git a/src/extension/actor.ts b/src/extension/actor.ts
index 67b33a0df..71064b00e 100644
--- a/src/extension/actor.ts
+++ b/src/extension/actor.ts
@@ -1,7 +1,7 @@
-import browser from "webextension-polyfill";
+import type browser from "webextension-polyfill";
 import type { MessageFormat } from "./messages";
 import { isApolloClientDevtoolsMessage } from "./messages";
-import { NoInfer } from "../types";
+import type { NoInfer } from "../types";
 
 export interface Actor<Messages extends MessageFormat> {
   on: <TName extends Messages["type"]>(
diff --git a/src/extension/devtools/devtools.ts b/src/extension/devtools/devtools.ts
index 1d1e5d559..2fbf028c0 100755
--- a/src/extension/devtools/devtools.ts
+++ b/src/extension/devtools/devtools.ts
@@ -1,7 +1,7 @@
 import browser from "webextension-polyfill";
 import { devtoolsMachine } from "../../application/machines";
 import { createPortActor } from "../actor";
-import { ClientMessage } from "../messages";
+import type { ClientMessage } from "../messages";
 import { getPanelActor } from "./panelActor";
 
 const inspectedTabId = browser.devtools.inspectedWindow.tabId;
diff --git a/src/extension/devtools/panelActor.ts b/src/extension/devtools/panelActor.ts
index e847564eb..56f7f7285 100644
--- a/src/extension/devtools/panelActor.ts
+++ b/src/extension/devtools/panelActor.ts
@@ -1,5 +1,6 @@
-import { Actor, createWindowActor } from "../actor";
-import { PanelMessage } from "../messages";
+import type { Actor } from "../actor";
+import { createWindowActor } from "../actor";
+import type { PanelMessage } from "../messages";
 
 let panelActor: Actor<PanelMessage> | null = null;
 
diff --git a/src/extension/messages.ts b/src/extension/messages.ts
index 769f53452..d25f96e37 100644
--- a/src/extension/messages.ts
+++ b/src/extension/messages.ts
@@ -1,6 +1,6 @@
-import { ExplorerResponse } from "../types";
-import { GetStates, GetContext } from "../application/stateMachine";
-import { DevtoolsMachine } from "../application/machines";
+import type { ExplorerResponse } from "../types";
+import type { GetStates, GetContext } from "../application/stateMachine";
+import type { DevtoolsMachine } from "../application/machines";
 
 export interface MessageFormat {
   type: string;
diff --git a/src/extension/tab/helpers.ts b/src/extension/tab/helpers.ts
index 3c58ec638..06db46a90 100644
--- a/src/extension/tab/helpers.ts
+++ b/src/extension/tab/helpers.ts
@@ -5,7 +5,7 @@ import type {
   OperationDefinitionNode,
   FragmentDefinitionNode,
 } from "graphql/language";
-import { QueryData, Variables } from "../../application/types/scalars";
+import type { QueryData, Variables } from "../../application/types/scalars";
 import { getPrivateAccess } from "../../privateAccess";
 
 export type QueryInfo = {
diff --git a/src/extension/tab/tab.ts b/src/extension/tab/tab.ts
index f46836225..bc7f9df8c 100755
--- a/src/extension/tab/tab.ts
+++ b/src/extension/tab/tab.ts
@@ -1,6 +1,6 @@
 // This script is injected into each tab.
 import browser from "webextension-polyfill";
-import { ClientMessage } from "../messages";
+import type { ClientMessage } from "../messages";
 import { createPortActor, createWindowActor } from "../actor";
 
 declare const __IS_FIREFOX__: boolean;
diff --git a/src/types.ts b/src/types.ts
index bd73f3ad2..180b39a58 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,4 +1,4 @@
-import { ApolloQueryResult } from "@apollo/client";
+import type { ApolloQueryResult } from "@apollo/client";
 
 export type QueryResult = ApolloQueryResult<any>;