diff --git a/apps/explorer/src/app/app.tsx b/apps/explorer/src/app/app.tsx
index 547306e47..fcba354ab 100644
--- a/apps/explorer/src/app/app.tsx
+++ b/apps/explorer/src/app/app.tsx
@@ -1,4 +1,6 @@
 import { ApolloProvider } from '@apollo/client';
+import { ThemeContext } from '@vegaprotocol/react-helpers';
+import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { createClient } from './lib/apollo-client';
 import { Nav } from './components/nav';
 import { Header } from './components/header';
@@ -8,22 +10,27 @@ import { DATA_SOURCES } from './config';
 import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider';
 
 function App() {
+  const [theme, toggleTheme] = useThemeSwitcher();
+
   const client = React.useMemo(
     () => createClient(DATA_SOURCES.dataNodeUrl),
     []
   );
+
   return (
-    <TendermintWebsocketProvider>
-      <ApolloProvider client={client}>
-        <div className="antialiased m-0 min-h-[100vh] max-w-[1300px] grid grid-rows-[1fr_min-content] bg-black text-white border-white lg:border-l-1 lg:border-r-1">
-          <div className="grid grid-rows-[auto_minmax(700px,_1fr)] grid-cols-[300px_minmax(auto,_1fr)] border-b-1">
-            <Nav />
-            <Header />
-            <Main />
+    <ThemeContext.Provider value={theme}>
+      <TendermintWebsocketProvider>
+        <ApolloProvider client={client}>
+          <div className="antialiased m-0 min-h-[100vh] max-w-[1300px] grid grid-rows-[1fr_min-content] bg-white dark:bg-black text-black dark:text-white border-white lg:border-l-1 lg:border-r-1">
+            <div className="grid grid-rows-[auto_minmax(700px,_1fr)] grid-cols-[300px_minmax(auto,_1fr)] border-b-1">
+              <Nav />
+              <Header toggleTheme={toggleTheme} />
+              <Main />
+            </div>
           </div>
-        </div>
-      </ApolloProvider>
-    </TendermintWebsocketProvider>
+        </ApolloProvider>
+      </TendermintWebsocketProvider>
+    </ThemeContext.Provider>
   );
 }
 
diff --git a/apps/explorer/src/app/components/header/header.tsx b/apps/explorer/src/app/components/header/header.tsx
index 618a7405e..bb743d3a5 100644
--- a/apps/explorer/src/app/components/header/header.tsx
+++ b/apps/explorer/src/app/components/header/header.tsx
@@ -1,8 +1,13 @@
+import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
 import { Search } from '../search';
 
-export const Header = () => {
+interface ThemeToggleProps {
+  toggleTheme: () => void;
+}
+
+export const Header = ({ toggleTheme }: ThemeToggleProps) => {
   return (
-    <header className="flex px-16 pt-16 pb-8 border-b-1 col-start-1 col-end-3 row-start-1 row-end-2">
+    <header className="flex items-center px-16 py-16 border-b-1 col-start-1 col-end-3 row-start-1 row-end-2">
       <h1
         className="text-h3 font-alpha uppercase contextual-alternates"
         data-testid="explorer-header"
@@ -10,6 +15,7 @@ export const Header = () => {
         Vega Explorer
       </h1>
       <Search />
+      <ThemeSwitcher onToggle={toggleTheme} />
     </header>
   );
 };
diff --git a/apps/explorer/src/app/components/search/search.tsx b/apps/explorer/src/app/components/search/search.tsx
index adf4d9db7..0e5e4d8b7 100644
--- a/apps/explorer/src/app/components/search/search.tsx
+++ b/apps/explorer/src/app/components/search/search.tsx
@@ -52,9 +52,9 @@ export const Search = () => {
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="flex-1 flex ml-16 justify-end"
+      className="flex-1 flex ml-16 mr-12 justify-end"
     >
-      <FormGroup className="w-2/3 mb-0">
+      <FormGroup className="relative w-2/3 mb-0">
         <Input
           {...register('search')}
           id="search"
@@ -64,16 +64,14 @@ export const Search = () => {
           autoFocus={true}
           placeholder="Enter block number or transaction hash"
         />
-        {error?.message ? (
+        {error?.message && (
           <InputError
             data-testid="search-error"
             intent="danger"
-            className="flex-1 w-full"
+            className="absolute top-[100%] flex-1 w-full"
           >
             {error.message}
           </InputError>
-        ) : (
-          <div className="h-28"></div>
         )}
       </FormGroup>
       <Button type="submit" variant="secondary" data-testid="search-button">
diff --git a/apps/explorer/src/index.html b/apps/explorer/src/index.html
index 43ba24a20..b51ae59f9 100644
--- a/apps/explorer/src/index.html
+++ b/apps/explorer/src/index.html
@@ -9,6 +9,6 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
-    <div id="root" class="dark"></div>
+    <div id="root"></div>
   </body>
 </html>
diff --git a/apps/explorer/src/styles.css b/apps/explorer/src/styles.css
index 908ec6a9b..9a64e560a 100644
--- a/apps/explorer/src/styles.css
+++ b/apps/explorer/src/styles.css
@@ -7,7 +7,7 @@
   src: url('./AlphaLyrae-Medium.woff');
 }
 
-/*No Tailwind class for this*/
+/* No Tailwind class for this */
 .contextual-alternates {
   font-feature-settings: 'calt';
 }
diff --git a/libs/ui-toolkit/src/components/form-group/form-group.tsx b/libs/ui-toolkit/src/components/form-group/form-group.tsx
index bd5724943..89b3ec163 100644
--- a/libs/ui-toolkit/src/components/form-group/form-group.tsx
+++ b/libs/ui-toolkit/src/components/form-group/form-group.tsx
@@ -20,7 +20,10 @@ export const FormGroup = ({
     'text-right': labelAlign === 'right',
   });
   return (
-    <div data-testid="form-group" className={classNames(className, 'mb-20')}>
+    <div
+      data-testid="form-group"
+      className={className?.includes('mb') ? className : `${className} mb-20`}
+    >
       {label && (
         <label className={labelClasses} htmlFor={labelFor}>
           {label}