diff --git a/apps/explorer/src/app/app.tsx b/apps/explorer/src/app/app.tsx
index 7de3d33a5..f4d63a4a5 100644
--- a/apps/explorer/src/app/app.tsx
+++ b/apps/explorer/src/app/app.tsx
@@ -1,3 +1,4 @@
+import classnames from 'classnames';
 import { useState, useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import { BrowserTracing } from '@sentry/tracing';
@@ -44,28 +45,33 @@ function App() {
     },
   };
 
+  const layoutClasses = classnames(
+    'grid grid-rows-[auto_1fr_auto] grid-cols-[1fr] md:grid-rows-[auto_minmax(700px,_1fr)_auto] md:grid-cols-[300px_1fr]',
+    'min-h-[100vh] mx-auto my-0',
+    'border-neutral-700 dark:border-neutral-300 lg:border-l lg:border-r',
+    'bg-white dark:bg-black',
+    'antialiased text-black dark:text-white',
+    {
+      'h-[100vh] min-h-auto overflow-hidden': menuOpen,
+    }
+  );
+
   return (
     <ThemeContext.Provider value={theme}>
       <TendermintWebsocketProvider>
         <NetworkLoader cache={cacheConfig}>
-          <div
-            className={`${
-              menuOpen && 'h-[100vh] overflow-hidden'
-            } antialiased m-0 bg-white dark:bg-black text-black dark:text-white`}
-          >
-            <div className="grid grid-rows-[repeat(2,_auto)_1fr] grid-cols-[1fr] md:grid-rows-[auto_minmax(700px,_1fr)] md:grid-cols-[300px_1fr] border-neutral-700 dark:border-neutral-300 lg:border-l lg:border-r mx-auto">
-              <Header
-                theme={theme}
-                toggleTheme={toggleTheme}
-                menuOpen={menuOpen}
-                setMenuOpen={setMenuOpen}
-              />
-              <Nav menuOpen={menuOpen} />
-              <Main />
-              <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-sm md:text-md md:flex md:col-span-2 p-4 gap-4 border-t border-neutral-700 dark:border-neutral-300">
-                <NetworkInfo />
-              </footer>
-            </div>
+          <div className={layoutClasses}>
+            <Header
+              theme={theme}
+              toggleTheme={toggleTheme}
+              menuOpen={menuOpen}
+              setMenuOpen={setMenuOpen}
+            />
+            <Nav menuOpen={menuOpen} />
+            <Main />
+            <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-sm md:text-md md:flex md:col-span-2 p-4 gap-4 border-t border-neutral-700 dark:border-neutral-300">
+              <NetworkInfo />
+            </footer>
           </div>
         </NetworkLoader>
       </TendermintWebsocketProvider>
diff --git a/apps/explorer/src/app/components/main/index.tsx b/apps/explorer/src/app/components/main/index.tsx
index 475930612..15fa742ad 100644
--- a/apps/explorer/src/app/components/main/index.tsx
+++ b/apps/explorer/src/app/components/main/index.tsx
@@ -2,7 +2,7 @@ import { AppRouter } from '../../routes';
 
 export const Main = () => {
   return (
-    <main className="p-4 overflow-hidden">
+    <main className="p-4 overflow-scroll">
       <AppRouter />
     </main>
   );