diff --git a/.gitignore b/.gitignore
index ddb6132..c29dfdc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,9 @@
 # do not track installed modules
-/node_modules
+node_modules/
 
 # do not track built files
-/.next
+.vscode/
+.next/
 *.tsbuildinfo
 next-env.d.ts
 
@@ -13,6 +14,6 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # production
-/build
-/data
-/confs
+build/
+data/
+confs/
diff --git a/components/layout.tsx b/components/layout.tsx
index 699bf27..6163070 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -26,7 +26,6 @@ const LayoutReadyOrNot = ({ children }: { children: React.ReactNode }) => {
       </Script>
 
       <Sidebar />
-      <div className={styles.sidebarPlaceholder}></div>
       <main className={styles.main}>
         {children}
       </main>
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index 113c438..35386ec 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -4,7 +4,8 @@ import { useRouter } from 'next/router'
 import useSWR from 'swr';
 import ReadyOrNotMap from '../interfaces/ReadyOrNot';
 import React, { useState } from 'react';
-import Image from 'next/image'
+import Image from 'next/image';
+import useWindowSize from '../components/windowsize';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
@@ -12,37 +13,53 @@ function stopPropagation(e: any) {
   e.stopPropagation();
 }
 
-
 const Sidebar = () => {
+  const isMobile = useWindowSize();
   const router = useRouter();
-  const [active, setActive] = useState(true);
-  const { maps, isLoading, isError } = useNavbar();
+  const [active, setActive] = useState(isMobile);
+  const { maps, isLoading, isError }:{ maps: ReadyOrNotMap[], isLoading: boolean, isError: boolean} = useNavbar();
 
-  if (isError) { return (<div><nav><a>Error loading Sidemenu</a></nav></div>) }
+  if(typeof(isMobile) === "boolean" && typeof(active) === "undefined") {
+    setActive(!isMobile);
+  }
+
+  if (isError) {
+    return (
+      <>
+        <div><nav><a>Error loading Sidemenu</a></nav></div>
+        <div className={styles.sidebarPlaceholder}></div>
+      </>
+    )
+  }
   else if (isLoading) {
     return (
-      <div>
-        <nav>
-          <a>Loading...</a>
-        </nav>
-      </div>
+      <>
+        <div>
+          <nav>
+            <a>Loading...</a>
+          </nav>
+        </div>
+        <div className={styles.sidebarPlaceholder}></div>
+      </>
     )
   }
   else {
-    // > is a placeholder
     return (
-      <div className={styles.sidebar} onClick={() => setActive(!active)}>
-        <nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
-          {maps.map((item: ReadyOrNotMap) => (
-            <Link key={item.name} href={item.href}>
-              <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active: styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
-            </Link>
-          ))}
-        </nav>
-        <div className={styles.sidebarArrow}>
-          <Image src="/sidebar_arrow.webp" width={32} height={96} alt=">"/>
+      <>
+        <div className={styles.sidebar} onClick={() => setActive(!active)}>
+          <nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
+            {maps.map((item) => (
+              <Link key={item.name} href={item.href}>
+                <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active : styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
+              </Link>
+            ))}
+          </nav>
+          <div className={styles.sidebarArrow}>
+            <Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<"} />
+          </div>
         </div>
-      </div>
+        <div className={styles.sidebarPlaceholder}></div>
+      </>
     );
   }
 }
diff --git a/components/windowsize.tsx b/components/windowsize.tsx
new file mode 100644
index 0000000..063fae5
--- /dev/null
+++ b/components/windowsize.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+interface ScreenSize {
+  width: number | undefined;
+  height: number | undefined;
+}
+
+export default function useWindowSize(): boolean | undefined {
+  const [windowSize, setWindowSize] = useState<ScreenSize>({
+    width: undefined,
+    height: undefined,
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    
+    window.addEventListener("resize", handleResize);
+
+    handleResize();
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  if(typeof(windowSize.width) === "number") {
+    return windowSize.width <= 1080;
+  }
+  else {
+    return undefined;
+  }
+}
\ No newline at end of file
diff --git a/pages/[map].tsx b/pages/[map].tsx
index 5676b61..922df1d 100644
--- a/pages/[map].tsx
+++ b/pages/[map].tsx
@@ -6,34 +6,12 @@ import { NextPageWithLayout } from './_app';
 import React from 'react';
 import useSWR, { KeyedMutator, mutate } from 'swr';
 import { useRouter } from 'next/router';
-import Image from 'next/image'
+import Image from 'next/image';
 import ReadyOrNotMap from '../interfaces/ReadyOrNot';
+import useWindowSize from '../components/windowsize';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
-function useWindowSize() {
-  const [windowSize, setWindowSize] = useState({
-    width: 0,
-    height: 0,
-  });
-
-  useEffect(() => {
-    function handleResize() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    }
-    
-    window.addEventListener("resize", handleResize);
-
-    handleResize();
-
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-  return windowSize.width <= 1080;
-}
-
 const ReadyOrNotMaps: NextPageWithLayout = () => {
   const [floor, setFloor] = useState(0);
   const { mapInfo, isLoadingInfo, isErrorInfo } = useMap(useRouter().query.map?.toString() || "a_lethal_obsession")
diff --git a/public/sidebar_arrow.webp b/public/sidebar_arrow.webp
index a78f750..9c00889 100644
Binary files a/public/sidebar_arrow.webp and b/public/sidebar_arrow.webp differ
diff --git a/public/sidebar_arrow_flipped.webp b/public/sidebar_arrow_flipped.webp
new file mode 100644
index 0000000..482d5db
Binary files /dev/null and b/public/sidebar_arrow_flipped.webp differ
diff --git a/resources/sidebar_arrow.svg b/resources/sidebar_arrow.svg
index 870d15f..bd01371 100644
--- a/resources/sidebar_arrow.svg
+++ b/resources/sidebar_arrow.svg
@@ -28,8 +28,8 @@
      inkscape:document-units="px"
      showgrid="true"
      inkscape:zoom="11.313709"
-     inkscape:cx="-3.1819805"
-     inkscape:cy="35.974057"
+     inkscape:cx="-3.1819804"
+     inkscape:cy="36.062444"
      inkscape:window-width="2560"
      inkscape:window-height="1391"
      inkscape:window-x="0"
@@ -52,7 +52,7 @@
      id="layer1">
     <path
        id="path1211"
-       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       style="fill:#999999;fill-opacity:1;stroke:#999999;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        d="M 8,3.9708715 V 19.970872 c 3.449498,11.952732 9.599609,28.000391 9.599609,28.000391 L 8,75.970872 v 16 L 24,47.971263 C 18.666759,33.304433 13.333375,18.637654 8,3.9708715 Z"
        sodipodi:nodetypes="ccccccc" />
   </g>
diff --git a/resources/sidebar_arrow.webp b/resources/sidebar_arrow.webp
index a78f750..9c00889 100644
Binary files a/resources/sidebar_arrow.webp and b/resources/sidebar_arrow.webp differ
diff --git a/resources/sidebar_arrow_flipped.webp b/resources/sidebar_arrow_flipped.webp
new file mode 100644
index 0000000..482d5db
Binary files /dev/null and b/resources/sidebar_arrow_flipped.webp differ