increasing sizing

src/components/UI/Header.tsx

@@ -75,17 +75,21 @@ export default function Header() {
         </Link>
       </div>
       {/* Right: Texts stacked + icons */}
-      <div className="flex items-center space-x-12">
+      <div className="flex items-center space-x-24">
         <div className="flex flex-col leading-tight text-white text-sm tabular-nums">
           <h2>Local: {localStr}</h2>
           <h2>UTC: {utcStr}</h2>
         </div>
-        <div className="flex flex-row space-x-2">
+        <div className="flex flex-row space-x-8">
           <Link to={"/session-settings"}>
-            <FontAwesomeIcon className="text-white" icon={faListCheck} />
+            <FontAwesomeIcon
+              className="text-white"
+              icon={faListCheck}
+              size="2x"
+            />
           </Link>
           <Link to={"/system-settings"}>
-            <FontAwesomeIcon className="text-white" icon={faGear} />
+            <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
           </Link>
         </div>
       </div>

src/components/UI/ModalComponent.tsx

@@ -16,7 +16,7 @@ const ModalComponent = ({
     <Modal
       isOpen={isModalOpen}
       onRequestClose={close}
-      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[90%] mx-auto mt-[1%] md:w-[70%] md:h-[90%] z-[100] overflow-y-auto max-h-screen"
+      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[90%] mx-auto mt-[1%] md:w-[80%] md:h-[90%] z-[100] overflow-y-auto max-h-screen"
       overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
     >
       {children}