src/components/UI/Header.tsx

@@ -58,14 +58,31 @@ export default function Header() {
           <div onClick={refreshBrowser}>
             <FontAwesomeIcon icon={faRotate} size="2x" />
           </div>
+          <div className="flex">
             <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 className="hidden md:flex" to={"/system-settings"}>
+            <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
+          </Link>
         </div>
       </div>
     </div>

src/index.css

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