diff --git a/components/home/GroupBox/GroupBox.tsx b/components/home/GroupBox/GroupBox.tsx
index 4214951..a80739a 100644
--- a/components/home/GroupBox/GroupBox.tsx
+++ b/components/home/GroupBox/GroupBox.tsx
@@ -6,7 +6,8 @@ import styles from "./GroupBox.module.css"
 import {EntitySpan} from "../EntitySpan/EntitySpan";
 import {useGroups} from "../../contexts/GroupProvider";
 import {calculateInputs} from "../../../src/calculateInputs";
-import {uniquify} from "../../../src/utils";
+import {fixedEncodeURIComponent, uniquify} from "../../../src/utils";
+import Link from "next/link";
 
 interface Props {
   group: Group
@@ -81,6 +82,7 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
     >
       {name}
     </h3>
+    <Link href={`./visualize/${fixedEncodeURIComponent(group.name)}`}>👁</Link>
     <button
       className={styles.quit}
       onBlur={() => setDeleteConfirm(false)}
diff --git a/components/shared/ScrollContainer/ScrollContainer.module.css b/components/shared/ScrollContainer/ScrollContainer.module.css
new file mode 100644
index 0000000..7d138ea
--- /dev/null
+++ b/components/shared/ScrollContainer/ScrollContainer.module.css
@@ -0,0 +1,10 @@
+.container {
+    width: 100vw;
+    height: 100vh;
+}
+
+.inner {
+    padding: 2em;
+    width: fit-content;
+    height: fit-content;
+}
diff --git a/components/shared/ScrollContainer/ScrollContainer.tsx b/components/shared/ScrollContainer/ScrollContainer.tsx
new file mode 100644
index 0000000..063a02e
--- /dev/null
+++ b/components/shared/ScrollContainer/ScrollContainer.tsx
@@ -0,0 +1,25 @@
+import {FC, PropsWithChildren, useEffect, useRef} from "react";
+import IndianaDragScoll from "react-indiana-drag-scroll";
+import styles from './ScrollContainer.module.css'
+
+export const ScrollContainer: FC<PropsWithChildren> = ({children}) => {
+  const container = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (container.current) {
+      container.current.oncontextmenu = e => e.preventDefault()
+    }
+  }, []);
+
+  return <IndianaDragScoll
+    className={styles.container}
+    buttons={[2]}
+    innerRef={container}
+    hideScrollbars={false}
+    activationDistance={5}
+  >
+    <div className={styles.inner}>
+      {children}
+    </div>
+  </IndianaDragScoll>
+}
diff --git a/package.json b/package.json
index 8097d1e..b9d7fa1 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "pako": "^2.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-indiana-drag-scroll": "^2.2.0",
     "react-select": "^5.4.0",
     "react-tooltip": "^4.2.21",
     "seedrandom": "^3.0.5"
diff --git a/pages/index.tsx b/pages/index.tsx
index 4f1c27c..b3dd013 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,10 +4,6 @@ import {Home} from "../components/home/Home";
 import {useEffect} from "react";
 
 const Page: NextPage = () => {
-  useEffect(() =>
-  {
-    document.body.classList.add("scroll");
-  });
   return (
     <>
       <Head>
diff --git a/pages/visualize/[name].tsx b/pages/visualize/[name].tsx
index 499577f..ed8377d 100644
--- a/pages/visualize/[name].tsx
+++ b/pages/visualize/[name].tsx
@@ -3,12 +3,13 @@ import Head from 'next/head'
 import {useGroups} from "../../components/contexts/GroupProvider";
 import {useFactories} from "../../src/hooks/useFactories";
 import {ProducingGraph} from "../../components/shared/ProducingGraph/ProducingGraph";
-import {useMemo} from "react";
+import {useEffect, useMemo} from "react";
 import {calculateInputs} from "../../src/calculateInputs";
 import {useRouter} from "next/router";
 import {groupBy, isNonNullable, uniquify} from "../../src/utils";
-import {EnrichedEntity, Recipe} from "../../src/types";
+import {EnrichedEntity} from "../../src/types";
 import {DetailGraphNode, NodeDetails} from "../../components/visualize/NodeDetails/NodeDetails";
+import {ScrollContainer} from "../../components/shared/ScrollContainer/ScrollContainer";
 
 
 
@@ -24,6 +25,11 @@ const Page: NextPage = () => {
     findFactory
   } = useFactories()
 
+  useEffect(() => {
+    document.body.classList.add("scroll");
+    return () => document.body.classList.remove("scroll")
+  }, []);
+
   const group = typeof name === 'string' ? groups[name] : undefined
 
   const [inputFactories, intermediateFactories] = useMemo<ReturnType<typeof calculateInputs>>(() => {
@@ -66,13 +72,15 @@ const Page: NextPage = () => {
         <link rel="icon" href="/public/favicon.ico" />
       </Head>
       <main>
-        <h1>Factorio Microservices</h1>
-        <ProducingGraph
-          nodes={producingNodes}
-          inputs={inputFactories}
-          outputs={group?.exports}
-          childType={NodeDetails}
-          />
+        <ScrollContainer>
+          <h1>{name}</h1>
+          <ProducingGraph
+            nodes={producingNodes}
+            inputs={inputFactories}
+            outputs={group?.exports}
+            childType={NodeDetails}
+            />
+        </ScrollContainer>
       </main>
     </>
   )
diff --git a/pages/visualize/index.tsx b/pages/visualize/index.tsx
index 6f1eef6..ad21c2a 100644
--- a/pages/visualize/index.tsx
+++ b/pages/visualize/index.tsx
@@ -1,11 +1,13 @@
-import type { NextPage } from 'next'
+import type {NextPage} from 'next'
 import Head from 'next/head'
 import {useGroups} from "../../components/contexts/GroupProvider";
 import {useFactories} from "../../src/hooks/useFactories";
 import {ProducingGraph} from "../../components/shared/ProducingGraph/ProducingGraph";
-import {useMemo} from "react";
+import {useEffect, useMemo} from "react";
 import {calculateInputs} from "../../src/calculateInputs";
 import {NodeOverview, OverviewGraphNode} from "../../components/visualize/NodeOverview/NodeOverview";
+import {fixedEncodeURIComponent} from "../../src/utils";
+import {ScrollContainer} from "../../components/shared/ScrollContainer/ScrollContainer";
 
 const Page: NextPage = () => {
   const {
@@ -18,6 +20,11 @@ const Page: NextPage = () => {
     findFactory
   } = useFactories()
 
+  useEffect(() => {
+    document.body.classList.add("scroll");
+    return () => document.body.classList.remove("scroll")
+  }, []);
+
   const producingNodes: OverviewGraphNode[] = useMemo(() => {
     return Object.values(groups).map(group => ({
       inputs: calculateInputs(
@@ -42,20 +49,13 @@ const Page: NextPage = () => {
         <link rel="icon" href="/public/favicon.ico" />
       </Head>
       <main>
-        <h1>Factorio Microservices</h1>
-        <ProducingGraph nodes={producingNodes} inputs={baseFactories} childType={NodeOverview}></ProducingGraph>
+        <ScrollContainer>
+          <h1>Factorio Microservices</h1>
+          <ProducingGraph nodes={producingNodes} inputs={baseFactories} childType={NodeOverview}/>
+        </ScrollContainer>
       </main>
     </>
   )
 }
 
-export async function getStaticProps() {
-  return { props: { bodyClassName: 'scroll' } };
-}
-
-function fixedEncodeURIComponent(str: string): string {
-  return encodeURIComponent(str).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16));
-}
-
-
 export default Page
diff --git a/src/utils.ts b/src/utils.ts
index 3b286fe..8131368 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -34,3 +34,7 @@ export function shuffleInplace<T>(array: T[], rng: PRNG): T[] {
   }
   return array
 }
+
+export function fixedEncodeURIComponent(str: string): string {
+  return encodeURIComponent(str).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16));
+}
diff --git a/styles/globals.css b/styles/globals.css
index 84e97b4..940a316 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -13,8 +13,9 @@ body {
 }
 
 body.scroll {
-  overflow: auto;
-  overflow-scrolling: touch;
+  width: 100vw;
+  height: 100vh;
+  padding: 0;
 }
 
 a {
diff --git a/yarn.lock b/yarn.lock
index ebc1371..e0304f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -567,7 +567,7 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-classnames@^2.3.1:
+classnames@^2.2.6, classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -643,6 +643,11 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
+debounce@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
 debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -713,6 +718,11 @@ dom-helpers@^5.0.1:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
 
+easy-bem@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/easy-bem/-/easy-bem-1.1.1.tgz#1bfcc10425498090bcfddc0f9c000aba91399e03"
+  integrity sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==
+
 emoji-regex@^9.2.2:
   version "9.2.2"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
@@ -1771,6 +1781,15 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-indiana-drag-scroll@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.2.0.tgz#657e14bbdf4888cc738e9fa8dc4384d76c348c0b"
+  integrity sha512-+W/3B2OQV0FrbdnsoIo4dww/xpH0MUQJz6ziQb7H+oBko3OCbXuzDFYnho6v6yhGrYDNWYPuFUewb89IONEl/A==
+  dependencies:
+    classnames "^2.2.6"
+    debounce "^1.2.0"
+    easy-bem "^1.1.1"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
