diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index c093949..3627fdc 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -58,12 +58,29 @@ export default function Header() {
           <div onClick={refreshBrowser}>
             <FontAwesomeIcon icon={faRotate} size="2x" />
           </div>
-          <SoundBtn />
-          <Link to={"/session-settings"}>
+          <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 to={"/system-settings"}>
+          <Link className="hidden md:flex" to={"/system-settings"}>
             <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
           </Link>
         </div>
diff --git a/src/index.css b/src/index.css
index 92bfa28..77fced0 100644
--- a/src/index.css
+++ b/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;
 }