From be0a047d30bc3d12e428cb9fbebfd94b3b66a05b Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Tue, 11 Nov 2025 12:01:28 +0000
Subject: [PATCH] - commiting changes for now will revert back

---
 src/components/UI/Header.tsx | 23 ++++++++++++++++++++---
 src/index.css                |  4 ++--
 2 files changed, 22 insertions(+), 5 deletions(-)

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;
 }