src/components/UI/Header.tsx

@@ -58,12 +58,29 @@ export default function Header() {
           <div onClick={refreshBrowser}>
             <FontAwesomeIcon icon={faRotate} size="2x" />
           </div>
-          <SoundBtn />
+          <div className="flex">
-          <Link to={"/session-settings"}>
+            <SoundBtn />
+          </div>
+
+          <div className="md:hidden">
+            <ul className="flex flex-col">
+              <li>
+                <Link to={"/session-settings"}>
+                  <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
+                </Link>
+              </li>
+              <li>
+                <Link to={"/system-settings"}>
+                  <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <Link className="hidden md:flex" to={"/session-settings"}>
             <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
           </Link>
 
-          <Link to={"/system-settings"}>
+          <Link className="hidden md:flex" to={"/system-settings"}>
             <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
           </Link>
         </div>

src/index.css

@@ -33,7 +33,7 @@ body {
 }
 
 .arrow-outline path {
-  stroke: black; /* outline color */
+  stroke: black;
-  stroke-width: 20px; /* thickness of outline (tweak this) */
+  stroke-width: 20px;
   stroke-linejoin: round;
 }