diff --git a/components/ConnectButton/Skeleton.tsx b/components/ConnectButton/Skeleton.tsx
new file mode 100644
index 00000000..bcebdc96
--- /dev/null
+++ b/components/ConnectButton/Skeleton.tsx
@@ -0,0 +1,15 @@
+import { Skeleton } from "@livepeer/design-system";
+
+const ConnectButtonSkeleton = () => (
+  <Skeleton
+    css={{
+      height: "40px",
+      minWidth: "145px",
+      width: "145px",
+      borderRadius: "8px",
+      display: "inline-block",
+    }}
+  />
+);
+
+export default ConnectButtonSkeleton;
diff --git a/components/OrchestratorList/Skeleton.tsx b/components/OrchestratorList/Skeleton.tsx
new file mode 100644
index 00000000..4b8c1790
--- /dev/null
+++ b/components/OrchestratorList/Skeleton.tsx
@@ -0,0 +1,81 @@
+import { Box, Flex, Skeleton } from "@livepeer/design-system";
+
+const OrchestratorListSkeleton = () => {
+  return (
+    <Box
+      css={{
+        border: "1px solid $colors$neutral4",
+        backgroundColor: "$panel",
+        borderRadius: "$4",
+      }}
+    >
+      {/* Input section skeleton */}
+      <Box
+        css={{
+          marginTop: "$4",
+          marginLeft: "$5",
+          marginBottom: "$4",
+        }}
+      >
+        <Flex css={{ alignItems: "center", marginBottom: "$2" }}>
+          <Skeleton css={{ width: 20, height: 20, borderRadius: "$2" }} />
+          <Skeleton css={{ width: 200, height: 16, marginLeft: "$2" }} />
+        </Flex>
+        <Flex css={{ gap: "$2", marginBottom: "$2" }}>
+          <Skeleton css={{ width: 120, height: 32, borderRadius: "$2" }} />
+          <Skeleton css={{ width: 120, height: 32, borderRadius: "$2" }} />
+          <Skeleton css={{ width: 120, height: 32, borderRadius: "$2" }} />
+        </Flex>
+      </Box>
+
+      {/* Table header skeleton */}
+      <Box
+        css={{ padding: "$3 $5", borderBottom: "1px solid $colors$neutral4" }}
+      >
+        <Flex css={{ gap: "$4" }}>
+          <Skeleton css={{ width: 150, height: 16 }} />
+          <Skeleton css={{ width: 120, height: 16 }} />
+          <Skeleton css={{ width: 120, height: 16 }} />
+          <Skeleton css={{ width: 100, height: 16 }} />
+          <Skeleton css={{ width: 100, height: 16 }} />
+        </Flex>
+      </Box>
+
+      {/* Table rows skeleton (10 rows) */}
+      {Array.from({ length: 10 }).map((_, i) => (
+        <Box
+          key={i}
+          css={{
+            padding: "$3 $5",
+            borderBottom: i < 9 ? "1px solid $colors$neutral4" : "none",
+          }}
+        >
+          <Flex css={{ gap: "$4", alignItems: "center" }}>
+            <Skeleton css={{ width: 150, height: 40, borderRadius: "$2" }} />
+            <Skeleton css={{ width: 120, height: 20 }} />
+            <Skeleton css={{ width: 120, height: 20 }} />
+            <Skeleton css={{ width: 100, height: 20 }} />
+            <Skeleton css={{ width: 100, height: 20 }} />
+          </Flex>
+        </Box>
+      ))}
+
+      {/* Pagination skeleton */}
+      <Flex
+        css={{
+          paddingTop: "$4",
+          paddingBottom: "$4",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "$3",
+        }}
+      >
+        <Skeleton css={{ width: 20, height: 20, borderRadius: "$2" }} />
+        <Skeleton css={{ width: 100, height: 16 }} />
+        <Skeleton css={{ width: 20, height: 20, borderRadius: "$2" }} />
+      </Flex>
+    </Box>
+  );
+};
+
+export default OrchestratorListSkeleton;
diff --git a/layouts/main.tsx b/layouts/main.tsx
index a02fee05..af71252d 100644
--- a/layouts/main.tsx
+++ b/layouts/main.tsx
@@ -57,7 +57,7 @@ import React, {
 } from "react";
 import { isMobile } from "react-device-detect";
 import ReactGA from "react-ga";
-import { useWindowSize } from "react-use";
+
 import { Chain } from "viem";
 
 import {
@@ -108,8 +108,11 @@ const DesignSystemProviderTyped = DesignSystemProvider as React.FC<{
   children?: React.ReactNode;
 }>;
 
+import ConnectButtonSkeleton from "../components/ConnectButton/Skeleton";
+
 const ConnectButton = dynamic(() => import("../components/ConnectButton"), {
   ssr: false,
+  loading: () => <ConnectButtonSkeleton />,
 });
 
 const Claim = dynamic(() => import("../components/Claim"), { ssr: false });
@@ -134,7 +137,6 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => {
   const activeChain = useActiveChain();
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [bannerActive, setBannerActive] = useState<boolean>(false);
-  const { width } = useWindowSize();
   const ref = useRef(null);
   const currentRound = useCurrentRoundData();
   const pendingFeesAndStake = usePendingFeesAndStakeData(accountAddress);
@@ -208,16 +210,6 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => {
     return () => window.removeEventListener("storage", onStorage);
   }, [isReady, isBannerDisabledByQuery]);
 
-  useEffect(() => {
-    if (width >= 1200) {
-      document.body.removeAttribute("style");
-    }
-
-    if (width < 1200 && drawerOpen) {
-      document.body.style.overflow = "hidden";
-    }
-  }, [drawerOpen, width]);
-
   useEffect(() => {
     ReactGA.set({
       customBrowserType: !isMobile
diff --git a/pages/index.tsx b/pages/index.tsx
index 0e5b1782..d5c4c79c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,6 +5,7 @@ import type { Group } from "@components/ExplorerChart";
 import ExplorerChart from "@components/ExplorerChart";
 import OrchestratorList from "@components/OrchestratorList";
 import RoundStatus from "@components/RoundStatus";
+import OrchestratorListSkeleton from "@components/OrchestratorList/Skeleton";
 import Spinner from "@components/Spinner";
 import TransactionsList, {
   FILTERED_EVENT_TYPENAMES,
@@ -461,11 +462,7 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
                     protocolData={protocol?.protocol}
                   />
                 ) : (
-                  <Box
-                    css={{ padding: "$4", textAlign: "center", opacity: 0.6 }}
-                  >
-                    Loading orchestrators…
-                  </Box>
+                  <OrchestratorListSkeleton />
                 )}
               </Box>
             )}