diff --git a/app/globals.css b/app/globals.css
index 43461e2..c67aef3 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -16,6 +16,7 @@ body {
       rgb(var(--background-end-rgb))
     )
     rgb(var(--background-start-rgb));
+  
 }
 
 .grid-cols-4 {
diff --git a/app/graphView.tsx b/app/graphView.tsx
index 61ce345..a922542 100644
--- a/app/graphView.tsx
+++ b/app/graphView.tsx
@@ -65,7 +65,6 @@ const GraphView: React.FC<GraphViewProps> = ({ upload, updateAdjacencyMatrix, in
     }, []);
 
     if(upload && !uploadMode) {
-        console.log(adjacencyMatrix);
         setUploadMode(true);
     }
 
@@ -73,7 +72,6 @@ const GraphView: React.FC<GraphViewProps> = ({ upload, updateAdjacencyMatrix, in
         const textareaValue = textareaRef.current?.value;
         const adj = stringToAdjacencyMatrix(textareaValue ?? "");
         if(adj !== undefined) {
-            console.log(adj);
             setAdjacencyMatrix(adj);
             updateAdjacencyMatrix(adj);
         }
diff --git a/app/page.tsx b/app/page.tsx
index 9457a60..8fe185a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -45,16 +45,17 @@ export default function Home() {
   const [vertices, setVertices] = useState(Array.from(Array(adjacencyMatrix.length).keys()).map(i => (i + 1).toFixed(0)));
 
   return (
-    <main className="flex h-screen flex-col items-center">
+    <main className="flex h-screen flex-col items-center font-sans">
       <nav className="flex items-center justify-between w-full bg-slate-100 p-5">
         <a href="#" className="text-gray-900 font-medium flex flex-row gap-2 items-center"><Image alt="TUM" src={"tum_logo.svg"} width={60} height={1}></Image>MQT Pathfinder</a>
-        <a href="#" className="text-gray-900 font-medium">More on our Work</a>
-        <a href="#" className="text-gray-900 font-medium">Legal Information</a>
+        <a href="#" className="text-gray-900 font-medium hidden md:block">More on our Work</a>
+        <a href="#" className="text-gray-900 font-medium hidden md:block">Legal Information</a>
+        <a href="#" className="text-gray-900 font-medium block md:hidden"><Image alt="i" src={"info.png"} width={20} height={1}></Image></a>
       </nav>
-      <div className="flex flex-row h-full w-full items-center p-5 justify-between gap-4">
-        <div className="flex flex-col gap-4">
+      <div className="flex flex-col lg:flex-row lg:h-full w-full items-center p-5 justify-between gap-4 lg:overflow-clip">
+        <div className="flex flex-col gap-4 w-full lg:w-auto">
           <GraphView updateAdjacencyMatrix={setAdjacencyMatrix} upload={doUpload} initialAdjacencyMatrix={adjacencyMatrix}></GraphView>
-          <div className="flex flex-row justify-around">
+          <div className="flex flex-row justify-around w-full lg:w-auto">
             <button onClick={() => setDoUpload(true)} className="border-2 rounded bg-slate-100 p-2 hover:bg-slate-200 active:bg-slate-300">Change Graph</button>
             <button onClick={() => download("generator.json", settings.toJson())} className="border-2 rounded bg-slate-100 p-2 hover:bg-slate-200 active:bg-slate-300">Generate</button>
           </div>
@@ -65,7 +66,7 @@ export default function Home() {
           ]} mutualExclusions={[
             [0, 1, 2]
           ]} onChange={(states) => setSettings(settings.setEncoding(states))}></ToggleBag>
-          <div className="flex flex-row gap-4">
+          <div className="flex flex-col lg:flex-row gap-4 w-full lg:w-auto">
           <TitledTextbox title="Number of Paths:" defaultValue="1" onChange={(n) => {
             const newNum = parseInt(n);
             if(!isNaN(newNum) && newNum > 0)
@@ -78,7 +79,7 @@ export default function Home() {
           }}></TitledTextbox>
           </div>
         </div>
-        <div className="flex flex-col h-full w-4/12 justify-around">
+        <div className="flex flex-col gap-5 h-full w-full lg:w-4/12 justify-around">
           <ToggleBag cols={2} all={false} title='' items={[
             "Path is Loop",
             "Minimize Weight",
@@ -93,7 +94,7 @@ export default function Home() {
           <ToggleBag onChange={(states) => setSettings(settings.setShareNoVertices(states))} all={true} title='The following paths may not share vertices' items={Array(settings.nPaths).fill(0).map((_, i) => (i + 1) + "")}></ToggleBag>
           <ToggleBag onChange={(states) => setSettings(settings.setShareNoVertices(states))} all={true} title='The following paths may not share edges' items={Array(settings.nPaths).fill(0).map((_, i) => (i + 1) + "")}></ToggleBag>
         </div>
-        <div className="flex flex-col h-full w-3/12 justify-around">
+        <div className="flex flex-col gap-5 h-full w-full lg:w-3/12 justify-around">
           <EdgeCollector onChange={(edges) => setSettings(settings.setExactlyOnceEdges(edges))} title="The following edges must appear exactly once in each path" allVertices={vertices}></EdgeCollector>
           <EdgeCollector onChange={(edges) => setSettings(settings.setAtLeastOnceEdges(edges))} title="The following edges must appear at least once in each path" allVertices={vertices}></EdgeCollector>
           <EdgeCollector onChange={(edges) => setSettings(settings.setAtMostOnceEdges(edges))} title="The following edges must appear at most once in each path" allVertices={vertices}></EdgeCollector>
diff --git a/app/style.module.css b/app/style.module.css
index c03ee9e..0d6e7d2 100644
--- a/app/style.module.css
+++ b/app/style.module.css
@@ -3,4 +3,14 @@
   border-radius: 5px;
   height: 60vh;
   width: 60vh;
+  position: relative;
+  left: 50%;
+  transform: translate(-50%, 0);
 }
+
+@media (max-width: 1024px) {
+  .canvas {
+    width: calc(100vw - 2.5rem);
+    height: calc(100vw - 2.5rem);
+  }
+}
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index 0ba7b42..8df1320 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: 'export'
+    output: 'export',
+    images: { unoptimized: true }
 };
 
 module.exports = nextConfig;
diff --git a/package-lock.json b/package-lock.json
index d65b0ec..37bcbf9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4016,9 +4016,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
-      "integrity": "sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
+      "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
       "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
diff --git a/public/info.png b/public/info.png
new file mode 100644
index 0000000..2c4648b
Binary files /dev/null and b/public/info.png differ