diff --git a/.env.development b/.env.development
index ce0b2196..7b4ac54c 100644
--- a/.env.development
+++ b/.env.development
@@ -23,7 +23,7 @@ NEXT_PUBLIC_APP_STORAGE_BUCKET=ctfguide-dev.appspot.com
 NEXT_PUBLIC_APP_MESSAGING_SENDER_ID=792987058367
 NEXT_PUBLIC_APP_ID=1:792987058367:web:c48935325e46043c3cc60a
 NEXT_PUBLIC_APP_MEASUREMENT_ID=G-7ZNKM9VFN2
-NEXT_PUBLIC_TERM_URL=https://dev-terminal-api.ctfguide.com/
+NEXT_PUBLIC_TERM_URL=https://prod-terminal-api.ctfguide.com/
 
 NEXT_PUBLIC_APP_STRIPE_KEY=pk_test_51MAliSF4qMywXyoUvCPG6HDRQaRy4ach2pfDIj4sklm4k22VinqVcygs61F7UWosnZo6Ig1iFykui6rsbR0tRStm00LRZCrXQ8
 
diff --git a/package.json b/package.json
index b6526b72..b2867c26 100644
--- a/package.json
+++ b/package.json
@@ -65,9 +65,11 @@
     "react-markdown": "^9.0.1",
     "react-markdown-editor-lite": "^1.3.4",
     "react-resizable": "^3.0.5",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.9.0",
     "react-select-country-list": "^2.2.3",
     "react-simplemde-editor": "^5.2.0",
+    "react-swipeable": "^7.0.1",
     "react-text-loop": "^2.3.0",
     "react-text-transition": "^3.1.0",
     "react-toastify": "^10.0.5",
diff --git a/src/components/StandardNav.jsx b/src/components/StandardNav.jsx
index 186916de..f8f87590 100644
--- a/src/components/StandardNav.jsx
+++ b/src/components/StandardNav.jsx
@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, useEffect, useState, useRef } from 'react';
 import { Disclosure, Menu, Popover, Transition } from '@headlessui/react';
 import { Dialog } from '@headlessui/react';
 
@@ -218,6 +218,21 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
         : 'text-gray-300 hover:text-gray-50 border-transparent'
     }`;
 
+  const panelRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (panelRef.current && !panelRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [panelRef]);
+
   return (
     <>
       {isPopoverOpen && (
@@ -242,16 +257,16 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                 <div className="flex">
                   <div className="-ml-2 mr-2 flex items-center md:hidden">
                     {/* Mobile menu button */}
-                    <Disclosure.Button className="hover-bg-neutral-900 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
+                    <Disclosure.Button className="transition-transform duration-300 hover-bg-neutral-900 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
                       <span className="sr-only">Open main menu</span>
                       {open ? (
                         <XMarkIcon
-                          className="block h-6 w-6"
+                          className={`block h-6 w-6 transition-opacity duration-300 ${open ? 'opacity-100' : 'opacity-0'}`}
                           aria-hidden="true"
                         />
                       ) : (
                         <Bars3Icon
-                          className="block h-6 w-6"
+                          className={`block h-6 w-6 transition-opacity duration-300 ${open ? 'opacity-0' : 'opacity-100'}`}
                           aria-hidden="true"
                         />
                       )}
@@ -565,72 +580,93 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
               </div>
             </div>
 
-            <Disclosure.Panel className="md:hidden">
-              <div className="space-y-1 bg-neutral-800/50 pb-3 pt-2">
-                {/* Current: "bg-blue-50 border-blue-500 text-blue-700", Default: "border-transparent text-gray-300  hover:text-white" */}
-                <Disclosure.Button
-                  as="a"
-                  href="../dashboard"
-                  className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300  hover:text-gray-700 sm:pl-5 sm:pr-6"
-                >
-                  Dashboard
-                </Disclosure.Button>
-                <Disclosure.Button
-                  as="a"
-                  href="../learn"
-                  className=" block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300  hover:text-gray-700 sm:pl-5 sm:pr-6"
-                >
-                  Learn
-                </Disclosure.Button>
-                <Disclosure.Button
-                  as="a"
-                  href="../groups"
-                  className="block hidden border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300  hover:text-gray-700 sm:pl-5 sm:pr-6"
-                >
-                  Classes
-                </Disclosure.Button>
-                <Disclosure.Button
-                  as="a"
-                  href="../practice"
-                  className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300  hover:text-gray-700 sm:pl-5 sm:pr-6"
-                >
-                  Practice
-                </Disclosure.Button>
-                <Disclosure.Button
-                  as="a"
-                  href="../live"
-                  className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300  hover:text-gray-700 sm:pl-5 sm:pr-6"
-                >
-                  Live
-                </Disclosure.Button>
-              </div>
-              <div className="border-t border-neutral-800 bg-neutral-800/50 pb-3 pt-4">
-                <div className="space-y-1">
+            <Transition
+              show={open}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 transform -translate-y-1"
+              enterTo="opacity-100 transform translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 transform translate-y-0"
+              leaveTo="opacity-0 transform -translate-y-1"
+            >
+              <Disclosure.Panel ref={panelRef} className="md:hidden">
+                <div className="space-y-1 bg-neutral-800/50 pb-3 pt-2">
+                  {/* Current: "bg-blue-50 border-blue-500 text-blue-700", Default: "border-transparent text-gray-300  hover:text-white" */}
                   <Disclosure.Button
                     as="a"
-                    href={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/users/${username}`}
-                    className="hover-bg-neutral-900 block px-4 py-2 text-base font-medium text-gray-300 hover:text-gray-800 sm:px-6"
+                    href="../dashboard"
+                    className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300  hover:text-gray-100 sm:pl-5 sm:pr-6"
                   >
-                    Profile
+                    Dashboard
                   </Disclosure.Button>
                   <Disclosure.Button
                     as="a"
-                    href="#"
-                    className="hover-bg-neutral-900 block px-4 py-2 text-base font-medium text-gray-300 hover:text-gray-800 sm:px-6"
+                    href="../practice"
+                    className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300  hover:text-gray-100 sm:pl-5 sm:pr-6"
                   >
-                    Settings
+                    Practice
+                  </Disclosure.Button>
+                  <Disclosure.Button
+                    as="a"
+                    href="../leaderboards"
+                    className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300  hover:text-gray-100 sm:pl-5 sm:pr-6"
+                  >
+                    Leaderboards
                   </Disclosure.Button>
-
                   <Disclosure.Button
                     as="a"
-                    onClick={logout}
-                    className="hover-bg-neutral-900 block px-4 py-2 text-base font-medium text-gray-300 hover:text-gray-800 sm:px-6"
+                    href="../groups"
+                    className="block  border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300  hover:text-gray-100 sm:pl-5 sm:pr-6"
                   >
-                    Sign out
+                    Classes
                   </Disclosure.Button>
                 </div>
-              </div>
-            </Disclosure.Panel>
+                <div className="border-t border-neutral-800 bg-neutral-800/50 pb-3 pt-4">
+                  <div className="space-y-1">
+                    <Disclosure.Button
+                      as="a"
+                      href={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/users/${username}`}
+                      className="flex hover-bg-neutral-900 block px-4 py-2 text-base font-medium text-gray-300 hover:text-gray-100 sm:px-6"
+                    >
+                      <UserCircleIcon className="mr-4 block h-6 w-6" aria-hidden="true" />
+                      Profile
+                    </Disclosure.Button>
+                    <Disclosure.Button
+                      as="a"
+                      href="/settings"
+                      className="flex hover-bg-neutral-900 block px-4 py-2 text-base font-medium text-gray-300 hover:text-gray-100 sm:px-6"
+                    >
+                      <Cog6ToothIcon className="mr-4 block h-6 w-6" aria-hidden="true" />
+                      Settings
+                    </Disclosure.Button>
+
+                    <Disclosure.Button
+                      as="a"
+                      onClick={logout}
+                      className="flex cursor-pointer block px-4 py-2 text-base font-medium text-red-500 hover:text-red-400 sm:px-6"
+                    >
+                      <ArrowRightIcon className="mr-4 block h-6 w-6" aria-hidden="true" />
+                      Sign out
+                    </Disclosure.Button>
+                  </div>
+                </div>
+                <div className="border-t border-neutral-800 bg-neutral-800/50 pb-3 pt-4">
+                  <div className="px-4">
+                    <div
+                      type="text"
+                      className="flex w-full items-center rounded-lg border border-transparent bg-neutral-800 px-4 py-2 text-sm font-semibold text-neutral-500 placeholder-gray-300 hover:cursor-pointer hover:text-neutral-50 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      onClick={() => setShowSearchModal(true)}
+                    >
+                      <FontAwesomeIcon
+                        icon={faSearch}
+                        className="mr-1 h-3 w-3"
+                      />
+                      <span>Search for anything</span>
+                    </div>
+                  </div>
+                </div>
+              </Disclosure.Panel>
+            </Transition>
           </>
         )}
       </Disclosure>
diff --git a/src/components/dashboard/DashboardHeader.jsx b/src/components/dashboard/DashboardHeader.jsx
index 2bd6e369..e8cdfb46 100644
--- a/src/components/dashboard/DashboardHeader.jsx
+++ b/src/components/dashboard/DashboardHeader.jsx
@@ -90,17 +90,17 @@ export function DashboardHeader() {
             backgroundImage:
               'url("https://images.unsplash.com/photo-1633259584604-afdc243122ea?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80")',
           }}
-          className="h-20 w-full object-cover lg:h-20"
+          className="h-20 w-full object-cover lg:h-20 "
           alt=""
         ></div>
       </div>
-      <div className="mx-auto max-w-7xl ">
-        <div className="-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
-          <div className="flex">
+      <div className="mx-auto max-w-7xl">
+        <div className="-mt-12  sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
+          <div className="flex justify-center sm:justify-start">
             <Link href={`${baseUrl}/users/${username}`}>
               {(pfp && (
                 <img
-                  className="h-24 w-24 rounded-full hover:bg-[#212121] sm:h-32 sm:w-32"
+                  className="h-32 w-32    rounded-full hover:bg-[#212121] sm:h-32 sm:w-32"
                   src={pfp}
                   alt=""
                 />
@@ -116,8 +116,8 @@ export function DashboardHeader() {
             </Link>
           </div>
           <div className="mt-6 sm:flex sm:min-w-0 sm:flex-1 sm:items-center sm:justify-end sm:space-x-6 sm:pb-1">
-            <div className="mt-6 min-w-0 flex-1 sm:hidden md:block">
-              <h1 className="flex items-center mt-8 truncate text-2xl font-bold text-white">
+            <div className="mt-6 min-w-0 flex-1 sm:hidden md:block  text-center sm:text-left">
+              <div className="items-center mt-8 truncate text-3xl sm:text-3xl lg:text-2xl font-bold text-white">
                 {username || (
                   <Skeleton
                     baseColor="#262626"
@@ -127,17 +127,19 @@ export function DashboardHeader() {
                 )}
 
                 {role === 'ADMIN' && (
-                  <span className="ml-2 rounded-sm bg-red-600 px-1 text-sm">
-                    <i className="fas fa-code fa-fw"></i> Developer
+                  <span className="ml-2 rounded-sm bg-red-600 px-1 text-sm hidden sm:inline">
+                    <i className="fas fa-code fa-fw"></i>
+                    <span className="hidden sm:inline"> Developer</span>
                   </span>
                 )}
                 {role === 'PRO' && (
-                  <span className="ml-2 rounded-sm bg-gradient-to-br from-orange-400 to-yellow-600 px-1 text-sm">
-                    <i className="fas fa-crown fa-fw"></i> Pro
+                  <span className="ml-2 rounded-sm bg-gradient-to-br from-orange-400 to-yellow-600 px-1 text-sm hidden sm:inline">
+                    <i className="fas fa-crown fa-fw"></i>
+                    <span className="hidden sm:inline"> Pro</span>
                   </span>
                 )}
-              </h1>
-              <p className="text-white">
+              </div>
+              <p className="text-white hidden sm:block">
                 <i className="fas fa-map-marker-alt mt-2"></i>{' '}
                 {location || (
                   <Skeleton
@@ -148,7 +150,7 @@ export function DashboardHeader() {
                 )}
               </p>
             </div>
-            <div className="mt-12 flex justify-stretch px-4 sm:px-4 md:px-0 lg:px-0 ">
+            <div className="hidden mt-12 flex justify-center sm:justify-stretch px-4 sm:px-4 md:px-0 lg:px-0 ">
               <div className="mr-4 hidden">
                 {github && (
                   <a className="" href={github}>
@@ -173,7 +175,7 @@ export function DashboardHeader() {
               </div>
               <a
                 href={`/users/${username}`}
-                className=" duration-4000 mb-0 ml-2 mt-8 flex cursor-pointer items-center space-x-1 rounded-lg bg-neutral-800 px-10 py-1 transition ease-in-out hover:bg-neutral-800/40"
+                className="duration-400 mb-0 ml-2 flex cursor-pointer items-center space-x-1 rounded-lg bg-neutral-800 px-10 py-1 transition ease-in-out hover:bg-neutral-800/40 sm:block hidden"
               >
                 <p className="mt-0 text-white">
                   <i className="fas fa-user mr-1"></i> View Profile
@@ -191,14 +193,8 @@ export function DashboardHeader() {
             </div>
           </div>
         </div>
-        <div className="mt-6 hidden min-w-0 flex-1 sm:block md:hidden">
-          <h1 className="truncate text-2xl font-bold text-gray-900">
-            {username || (
-              <Skeleton baseColor="#262626" highlightColor="#3a3a3a" />
-            )}
-          </h1>
-        </div>
+   
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/challenges/[...id].jsx b/src/pages/challenges/[...id].jsx
index ead03f25..29a94e52 100644
--- a/src/pages/challenges/[...id].jsx
+++ b/src/pages/challenges/[...id].jsx
@@ -26,6 +26,8 @@ import WriteupModal from '@/components/WriteupModal';
 export default function Challenge() {
   const router = useRouter();
   const [selectedWriteup, setSelectedWriteup] = useState(null);
+  const [isTerminalFullscreen, setIsTerminalFullscreen] = useState(false);
+  const [isChallengeFullscreen, setIsChallengeFullscreen] = useState(true);
 
   // I hate this
   const [urlChallengeId, urlSelectedTab, urlWriteupId] = (router ?? {})?.query?.id ?? [undefined, undefined, undefined];
@@ -313,27 +315,123 @@ export default function Challenge() {
       </Head>
       <FlagDialog />
       <PointsModal isOpen={isPointsModalOpen} setIsOpen={setIsPointsModalOpen} points={awardedPoints} />
-      <div className='flex flex-col min-w-[64rem] text-white overflow-x-auto overflow-y-hidden min-h-0 h-screen'>
+      <div className='flex flex-col text-white overflow-x-auto overflow-y-hidden min-h-0 h-screen md:min-w-[64rem]'>
         <StandardNav alignCenter={false} />
-        <main className="flex flex-grow p-2 gap-2 overflow-y-hidden">
-          <div className="flex flex-col flex-1 bg-neutral-800 overflow-y-hidden rounded-md">
-            <div className="flex shrink-0 p-1 items-center gap-1 bg-neutral-700 h-12 w-full">
-              {Object.entries(tabs).map(([url, tab]) => <TabLink tabName={tab.text} selected={selectedTab === tab} url={`/challenges/${urlChallengeId}/${url}`} key={url} />)}
+        <main className="flex flex-grow p-2 gap-2 overflow-y-hidden flex-col md:flex-row">
+          {isChallengeFullscreen && (
+            <div className={`flex flex-col flex-1 bg-neutral-800 overflow-y-hidden rounded-md`}>
+              <div className="flex shrink-0 p-1 items-center gap-1 bg-neutral-700 h-12 w-full overflow-x-auto">
+                {Object.entries(tabs).map(([url, tab]) => (
+                  <TabLink 
+                    tabName={tab.text} 
+                    selected={selectedTab === tab} 
+                    url={`/challenges/${urlChallengeId}/${url}`} 
+                    key={url} 
+                    className="text-sm md:text-base px-2 md:px-4"
+                  />
+                ))}
+              </div>
+              {selectedWriteup ? (
+                <WriteupModal isOpen={true} onClose={() => setSelectedWriteup(null)} writeup={selectedWriteup} />
+              ) : (
+                <selectedTab.element cache={cache} setCache={setCache} onWriteupSelect={handleWriteupSelect} />
+              )}
+              <div className='flex w-full h-full grow basis-0'></div>
+              <div className="shrink-0 bg-neutral-800 h-12 w-full">
+                <form action="" method="get" onSubmit={onSubmitFlag} className="flex p-1 gap-2 h-full">
+                  <input 
+                    name="flag" 
+                    type="text" 
+                    required 
+                    placeholder="Enter flag submission here" 
+                    className="text-white bg-neutral-900 border-neutral-600 h-full p-0 rounded-sm grow px-2 w-1/2 text-sm md:text-base" 
+                  />
+                  <input 
+                    name="submitFlag" 
+                    type="submit" 
+                    value="Submit Flag" 
+                    disabled={loadingFlagSubmit} 
+                    className="h-full border border-green-500/50 hover:border-green-200/50 bg-green-600 hover:bg-green-500 disabled:bg-neutral-800 disabled:text-neutral-400 disabled:border-neutral-500/50 transition-all text-green-50 cursor-pointer disabled:cursor-default px-2 rounded-sm text-sm md:text-base" 
+                  />
+                </form>
+              </div>
+              <button
+                onClick={() => {
+                  setIsChallengeFullscreen(false);
+                }}
+                className="bg-neutral-700/50 hover:bg-neutral-700 text-white px-4 py-1 rounded mt-2 md:hidden"
+              >
+                <i className="fas fa-exchange-alt"></i> Switch to Terminal
+              </button>
             </div>
-            {selectedWriteup ? (
-              <WriteupModal isOpen={true} onClose={() => setSelectedWriteup(null)} writeup={selectedWriteup} />
-            ) : (
-              <selectedTab.element cache={cache} setCache={setCache} onWriteupSelect={handleWriteupSelect} />
-            )}
-            <div className='flex w-full h-full grow basis-0'></div>
-            <div className="shrink-0 bg-neutral-800 h-12 w-full">
-              <form action="" method="get" onSubmit={onSubmitFlag} className="flex p-1 gap-2 h-full">
-                <input name="flag" type="text" required placeholder="Enter flag submission here" className="text-white bg-neutral-900 border-neutral-600 h-full p-0 rounded-sm grow px-2 w-1/2" />
-                <input name="submitFlag" type="submit" value="Submit Flag" disabled={loadingFlagSubmit} className="h-full border border-green-500/50 hover:border-green-200/50 bg-green-600 hover:bg-green-500 disabled:bg-neutral-800 disabled:text-neutral-400 disabled:border-neutral-500/50 transition-all text-green-50 cursor-pointer disabled:cursor-default px-2 rounded-sm" />
-              </form>
+          )}
+          {!isChallengeFullscreen && (
+            <div className={`flex md:hidden flex-col flex-1 bg-neutral-800 overflow-hidden rounded-md`}>
+              <div className="grow bg-neutral-950 w-full overflow-hidden">
+                <div className="h-full">
+                  {foundTerminal && (
+                    <div className="flex py-1  mb-4 text-xs">
+                      <h1 className="text-xs font-semibold py-2  pl-2">
+                        Username: {userName}
+                        <button onClick={() => copyToClipboard(userName)} className="ml-2 text-blue-500 hover:text-blue-300">
+                          <i className="fas fa-copy"></i>
+                        </button>
+                      </h1>
+                      <h1 className="text-xs font-semibold py-2  pl-2">
+                        Password: {password}
+                        <button onClick={() => copyToClipboard(password)} className="ml-2 text-blue-500 hover:text-blue-300">
+                          <i className="fas fa-copy"></i>
+                        </button>
+                      </h1>
+                      <h1 className="text-xs ml-auto px-4 text-sm font-semibold py-2 line-clamp-1 pl-2">
+                        Remaining Time: {formatTime(minutesRemaining)}
+                        <i onClick={() => window.open(terminalUrl, '_blank')} className="cursor-pointer hover:text-yellow-500 ml-2 fas fa-expand text-white"></i>
+                        {showMessage && (
+                          <span className="bg-neutral-800 px-2 py-1 absolute right-5 top-32 max-w-[20rem] text-sm text-yellow-500">
+                            Sometimes browsers block iframes, try opening the terminal in full screen if it the terminal is empty.
+                            <button onClick={() => setShowMessage(false)} className="ml-2 text-red-500 hover:text-red-300">
+                              Dismiss
+                            </button>
+                          </span>
+                        )}
+                      </h1>
+                    </div>
+                  )}
+                  {fetchingTerminal ? (
+                    <div className="flex mx-auto text-center justify-center items-center h-full">
+                      <div>
+                        <h1 className="text-white text-4xl"><i className="fas fa-spinner fa-spin"></i></h1>
+                        <span className="text-white text-xl">{loadingMessage}</span>
+                        <p className="text-white text-lg">If you see a black screen, please wait a few seconds and refresh the page.</p>
+                      </div>
+                    </div>
+                  ) : (
+                    isTerminalBooted ? (
+                      <iframe src={terminalUrl} className="pl-2 pb-10 w-full h-full overflow-hidden " />
+                    ) : (
+                      <div className="flex mx-auto text-center justify-center items-center h-full">
+                        <button
+                          onClick={handleBootTerminal}
+                          className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded"
+                        >
+                          Boot Terminal
+                        </button>
+                      </div>
+                    )
+                  )}
+                </div>
+              </div>
+              <button
+                onClick={() => {
+                  setIsChallengeFullscreen(true);
+                }}
+                className="bg-neutral-700/50 hover:bg-neutral-700 text-white px-4 py-1 rounded mt-2 md:hidden"
+              >
+                <i className="fas fa-exchange-alt"></i> Switch to Challenge
+              </button>
             </div>
-          </div>
-          <div className="flex flex-col flex-1 bg-neutral-800 overflow-hidden rounded-md">
+          )}
+          <div className="hidden md:flex flex-col flex-1 bg-neutral-800 overflow-hidden rounded-md">
             <div className="grow bg-neutral-950 w-full overflow-hidden">
               <div className="h-full">
                 {foundTerminal && (
@@ -362,8 +460,6 @@ export default function Challenge() {
                         </span>
                       )}
                     </h1>
-
-                   
                   </div>
                 )}
                 {fetchingTerminal ? (
@@ -372,7 +468,6 @@ export default function Challenge() {
                       <h1 className="text-white text-4xl"><i className="fas fa-spinner fa-spin"></i></h1>
                       <span className="text-white text-xl">{loadingMessage}</span>
                       <p className="text-white text-lg">If you see a black screen, please wait a few seconds and refresh the page.</p>
-
                     </div>
                   </div>
                 ) : (
@@ -472,17 +567,17 @@ function PointsModal({ isOpen, setIsOpen, points }) {
                 numberOfPieces={800}
               />
               <div className="flex min-h-full items-center justify-center p-4">
-                <Dialog.Panel className="mx-auto px-32 py-14 max-w-6xl rounded bg-neutral-900 text-white">
-                  <div className="flex gap-x-10">
-                    <div className=" ">
-                      <Dialog.Title className={'text-3xl font-semibold'}>Nice work!</Dialog.Title>
+                <Dialog.Panel className="mx-auto px-20 py-14 max-w-6xl rounded bg-neutral-900 text-white">
+                  <div className="flex flex-col md:flex-row gap-x-10">
+                    <div className="mb-4 md:mb-0">
+                      <Dialog.Title className="text-3xl font-semibold">Nice work!</Dialog.Title>
                       <p className="text-xl">You have been awarded {points} points.</p>
                       <button onClick={() => setIsOpen(false)} className="mt-4 bg-blue-600 hover:bg-blue-400 text-white px-4 py-2 rounded">
                         Close
                       </button>
                     </div>
-                    <div className="border-l border-neutral-700 px-4">
-                      <h1 className="text-xl font-semibold">BADGES</h1>
+                    <div className="border-t md:border-t-0 md:border-l border-neutral-700 px-4">
+                      <h1 className="mt-4 md:mt-0 text-xl font-semibold">BADGES</h1>
                       <p className="text-lg">You did not receive any new badges.</p>
                       <h1 className="text-xl mt-2 font-semibold">REWARD SUMMARY</h1>
                       <p className="text-lg"><span className="text-green-500">+{points}</span> points</p>
@@ -498,7 +593,7 @@ function PointsModal({ isOpen, setIsOpen, points }) {
   );
 }
 
-function TabLink({ tabName, selected, url }) {
+function TabLink({ tabName, selected, url, className }) {
   const selectedStyle = selected ? 'text-white bg-neutral-600' : 'text-neutral-400';
   const icon = {
     'Comments': 'fas fa-comments text-green-500',
@@ -510,7 +605,7 @@ function TabLink({ tabName, selected, url }) {
   }[tabName] || 'fas fa-file-alt text-blue-500';
 
   return (
-    <Link href={url} className={`flex justify-center items-center ${selectedStyle} hover:text-white transition-all duration-400 px-2 hover:bg-neutral-600 rounded-sm h-full`}>
+    <Link href={url} className={`flex justify-center items-center ${selectedStyle} hover:text-white transition-all duration-400 px-2 hover:bg-neutral-600 rounded-sm h-full ${className}`}>
       <i className={`${icon} w-6 mr-1 inline-flex`}></i>
       {tabName ?? 'This is a test button'}
     </Link>
@@ -1221,18 +1316,18 @@ function CommentsPage({ cache }) {
               className="w-8 h-8 rounded-full"
               alt={`${comment.username}'s profile`}
             />
-            <span className="flex items-center ml-2 text-lg font-semibold text-white">
+            <span className="ml-2 text-lg font-semibold text-white">
               <a href={`/users/${comment.username}`} className={`hover:text-neutral-10 ${comment.role === 'PRO' ? 'bg-gradient-to-br from-orange-300 to-yellow-300 bg-clip-text text-transparent' : ''}`}>
                 {comment.username}
               </a>
               {comment.role === 'ADMIN' && (
                 <>
-                  <span className="bg-red-600 px-1 rounded-sm text-sm ml-2"><i className="fas fa-code fa-fw"></i> Developer</span>
+                  <span className="bg-red-600 px-1 text-sm ml-2"><i className="fas fa-code fa-fw"></i> developer</span>
                 </>
               )}
               {comment.role === 'PRO' && (
                 <>
-                  <span className="ml-2 bg-gradient-to-br rounded-sm from-orange-400 to-yellow-600 px-1 text-sm"><i className="fas fa-crown fa-fw"></i> Pro</span>
+                  <span className="ml-2 bg-gradient-to-br from-orange-400 to-yellow-600 px-1 text-sm"><i className="fas fa-crown fa-fw"></i> pro</span>
                 </>
               )}
               <span className="ml-2 text-sm font-medium"> {new Date(comment.createdAt).toLocaleString()}</span>
diff --git a/src/pages/dashboard.jsx b/src/pages/dashboard.jsx
index c65a434d..1a92080c 100644
--- a/src/pages/dashboard.jsx
+++ b/src/pages/dashboard.jsx
@@ -164,47 +164,13 @@ export default function Dashboard() {
         </style>
       </Head>
 
-      <div className="hidden fixed z-50 inset-0 overflow-y-auto">
-        <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-
-          <div className="fixed inset-0 transition-opacity">
-            <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
-          </div>
-
-          <span className="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203;
-
-          <div className="inline-block align-bottom bg-neutral-900 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-            <div>
-              <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
-                <svg className="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </div>
-              <div className="mt-3 text-center sm:mt-5">
-                <h3 className="text-lg leading-6 font-medium text-white">
-                  Mobile Device Warning
-                </h3>
-                <div className="mt-2">
-                  <p className="text-sm text-white">
-                    We regret to inform you that CTFGuide is not optimized for use on mobile devices. While you can still access our website on your phone or tablet, we strongly recommend using a desktop or laptop computer for the best experience.
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className="mt-5 sm:mt-6">
-              <button type="button" className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-900 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm">
-                Okay
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
+     
 
       <div className='flex flex-col min-h-screen'>
         <StandardNav />
         <DashboardHeader />
         <main className="animate__animated animate__fadeIn">
-          <div className="flex flex-col lg:flex-row mt-8 items-start p-4 mx-auto gap-4 max-w-7xl text-neutral-50">
+          <div className="flex flex-col lg:flex-row md:mt-8 lg:mt-8 items-start p-4 mx-auto gap-4 max-w-7xl text-neutral-50">
             <div className='w-full'>
               {showOnboarding && (
                 <div className='w-full p-4'>
diff --git a/src/pages/leaderboards.jsx b/src/pages/leaderboards.jsx
index 739e2fb1..c2cd992c 100644
--- a/src/pages/leaderboards.jsx
+++ b/src/pages/leaderboards.jsx
@@ -54,10 +54,51 @@ export default function Leaderboard() {
       <div className="flex min-h-screen flex-col">
         <StandardNav />
         <main>
-
+      {/*simple mobile podium*/}
+      <div className="sm:hidden mt-4flex flex-col w-full items-center justify-center gap-4 px-2">
+           
+           <div className="flex flex-col gap-2 w-full">
+             {leaderboardData.slice(0, 3).map((entry, index) => (
+               <div
+                 onClick={() => {
+                   window.location.href = '../users/' + entry.user.username;
+                 }}
+                 key={index}
+                 className={`cursor-pointer flex items-center gap-2 p-2 rounded-lg w-full ${
+                   index === 0
+                     ? 'bg-gradient-to-br from-amber-600 via-yellow-400 via-75% to-amber-600'
+                     : index === 1
+                     ? 'bg-gradient-to-br from-gray-600 via-gray-400 via-65% to-gray-600'
+                     : 'bg-gradient-to-br from-orange-900 via-orange-400 via-65% to-orange-900'
+                 }`}
+               >
+                 <span className="text-lg font-semibold text-white">{index + 1}.</span>
+                 <img
+                   alt="Avatar"
+                   className="rounded-full"
+                   height="40"
+                   src={
+                     entry.user.profileImage === ''
+                       ? 'https://robohash.org/' + entry.user.username
+                       : `${entry.user.profileImage}`
+                   }
+                   style={{
+                     aspectRatio: '40/40',
+                     objectFit: 'cover',
+                   }}
+                   width="40"
+                 />
+                 <div className="flex w-full">
+                   <div className="text-white">{entry.user.username}</div>
+                   <div className="ml-auto text-sm text-white bg-neutral-900/50 px-2 py-1 text-center  w-fit rounded-lg">{entry.totalPoints} points</div>
+                 </div>
+               </div>
+             ))}
+           </div>
+         </div>
           { leaderboardData[0]  && leaderboardData[1]    && leaderboardData[2] && leaderboardData.length > 3 ? (
             <>
-          <div className="mx-auto mt-20 flex max-w-7xl flex-col items-end gap-5 md:flex-row">
+          <div className="mx-auto sm:mt-32 flex max-w-7xl flex-col items-end gap-5 md:flex-row">
             <div
               className="relative w-full flex-1 cursor-pointer bg-gradient-to-br from-gray-600 via-gray-400 via-65% to-gray-600 shadow md:w-auto podium"
               onClick={() => {
@@ -66,7 +107,7 @@ export default function Leaderboard() {
               }}
             >
               <div className="flag-top"></div>
-              <div className="absolute -top-20 left-1/2 hidden -translate-x-1/2 transform md:block">
+              <div className="absolute -top-20 left-1/2 transform -translate-x-1/2 md:block">
                 <img
                   alt="Avatar"
                   className="rounded-full"
@@ -105,7 +146,7 @@ export default function Leaderboard() {
               }}
             >
               <div className="flag-top"></div>
-              <div className="absolute -top-16 left-1/2 hidden -translate-x-1/2 transform md:block">
+              <div className="absolute -top-16 left-1/2  -translate-x-1/2 transform md:block">
                 <img
                   alt="Avatar"
                   className="rounded-full"
@@ -149,7 +190,7 @@ export default function Leaderboard() {
                 //too poopy
               }
               <div className="flag-top"></div>
-              <div className="absolute -top-20 left-1/2 hidden -translate-x-1/2 transform md:block">
+              <div className="absolute -top-20 left-1/2  -translate-x-1/2 transform md:block">
                 <img
                   alt="Avatar"
                   className="rounded-full"
@@ -181,6 +222,8 @@ export default function Leaderboard() {
             </div>
           </div>
 
+    
+
           <div className="mx-auto max-w-7xl">
             <div>
               <div className="w-full pt-8">
diff --git a/src/pages/users/[user].jsx b/src/pages/users/[user].jsx
index 60a9c636..e835e7fc 100644
--- a/src/pages/users/[user].jsx
+++ b/src/pages/users/[user].jsx
@@ -35,6 +35,8 @@ import 'react-circular-progressbar/dist/styles.css';
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import CusTooltip from '@/components/profile/BadgeOnhover';
+import { useSwipeable } from 'react-swipeable';
+
 // Register the necessary chart component
 ChartJS.register(
   RadialLinearScale,
@@ -158,6 +160,13 @@ export default function Create() {
   const [categoryChallenges, setCategoryChallenges] = useState([]);
   const [rank, setRank] = useState(null);
 
+  const [currentSwipeView, setCurrentSwipeView] = useState('skillChart');
+
+  const handlers = useSwipeable({
+    onSwipedLeft: () => setCurrentSwipeView('difficultyBreakdown'),
+    onSwipedRight: () => setCurrentSwipeView('skillChart'),
+  });
+
   function closeUnsavedNotif() {
     bannerState(false);
     setIsBioExpanded(false);
@@ -879,13 +888,13 @@ export default function Create() {
           ></div>
         </div>
         <div className="mx-auto max-w-7xl ">
-          <div className="-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
-            <div className="flex w-40">
+          <div className="-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5 sm:justify-start justify-center text-center sm:text-left">
+            <div className="flex w-40 justify-center mx-auto sm:mx-0">
               {
                 <a href={ownUser ? '../settings' : '#'}>
                   {(user && (
                     <img
-                      className="rounded-full hover:bg-[#212121] sm:h-32 sm:w-32"
+                      className="rounded-full hover:bg-[#212121] sm:h-32 sm:w-32 h-24 w-24"
                       src={
                         user.profileImage ||
                         'https://robohash.org/' + user.username
@@ -904,10 +913,10 @@ export default function Create() {
                 </a>
               }
             </div>
-            <div className="mt-4 w-full">
+            <div className="sm:mt-12 w-full">
               <div className="">
-                <div className="mt-6 ">
-                  <div className="mt-6  flex w-full">
+                <div className="">
+                  <div className=" flex w-full flex-col sm:flex-row items-center sm:items-start">
                     <div>
                       <h1 className={`${getNameColor(user && user.role)}`}>
                         {(user && user.username) || (
@@ -951,7 +960,7 @@ export default function Create() {
                           </span>
                         )}
                       </h1>
-                      <p className="text-white  ">
+                      <p className="text-white">
                         <i className="fas fa-map-marker-alt mt-2"></i>{' '}
                         {(user && user.location) || (
                           <Skeleton
@@ -962,8 +971,8 @@ export default function Create() {
                         )}
                       </p>
                     </div>
-                    <div className="ml-auto  mt-14 flex text-white">
-                      <p>
+                    <div className="sm:ml-auto mt-4 sm:mt-14 flex text-white justify-center sm:justify-end">
+                      <p className="text-center sm:text-right w-full sm:w-auto">
                         {user && (
                           <>
                             <span
@@ -994,7 +1003,8 @@ export default function Create() {
         </div>
       </div>
 
-      <main className="mx-auto mb-20 mt-10 max-w-7xl">
+      {/* Main layout for larger screens */}
+      <main className="hidden md:block mx-auto mb-20 mt-10 max-w-7xl">
         <div className="mt-10 grid grid-cols-1 gap-y-4 sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-4 lg:gap-x-4 ">
           <div className="h-40 w-full border-t-4 border-blue-600 bg-neutral-800">
             <div className="col-span-2 bg-neutral-800 px-4 pt-4">
@@ -1217,6 +1227,211 @@ export default function Create() {
             />
           </div>
         </div>
+      
+      
+      </main>
+
+      {/* Mobile layout */}
+      <main className="block md:hidden mx-auto mb-20 mt-10 max-w-7xl px-6">
+        <div className="mt-10 grid grid-cols-1 gap-y-4">
+          <div className="border-t-4 border-blue-600">
+            <div className="bg-neutral-800 px-4 py-4 ">
+              <div className="mb-2 flex w-full justify-between  ">
+                <div className="flex space-x-2  rounded-md">
+                  {user && (
+                    <h1 className="mb-1 text-xl font-bold uppercase text-white">
+                      ABOUT {user.username}
+                    </h1>
+                  )}
+                </div>
+                {bioViewCheck() ? renderEditButton() : ''}
+              </div>
+              {user && user.bio != null ? (
+                <p className="text-neutral-400">
+                  {bioViewCheck()
+                    ? renderUsersBio()
+                    : user && <MarkdownViewer content={user.bio || "Nothing to see here..."} />}
+                </p>
+              ) : (
+                <p className="text-neutral-400">
+                  {bioViewCheck()
+                    ? renderUsersBio()
+                    : user && (
+                        <MarkdownViewer content="Nothing to see here..." />
+                      )}
+                </p>
+              )}
+            </div>
+          </div>
+          <div className="h-40 w-full border-t-4 border-blue-600 bg-neutral-800" {...handlers}>
+            {currentSwipeView === 'skillChart' ? (
+              <div className="bg-neutral-800 px-4 pt-4">
+                <h1 className="text-xl font-bold text-white">SKILL CHART</h1>
+                {categoryChallenges.length > 0 &&
+                categoryChallenges.some(
+                  (category) => category.completed > 0
+                ) ? (
+                  <div className="">
+                  <Radar data={radarData} options={{ ...radarOptions }}   />
+                  </div>
+                ) : (
+                  <h1 className="mx-auto my-auto text-neutral-400">
+                    It seems that {user && user.username} hasn't solved any
+                    challenges yet.
+                  </h1>
+                )}
+                <hr className="mt-4 border-neutral-700 px-4"></hr>
+              </div>
+            ) : (
+              <div className="bg-neutral-800 px-4 pt-4">
+                <h1 className="text-xl font-bold text-white">
+                  DIFFICULTY BREAKDOWN
+                </h1>
+                {solvedChallenges > 0 ? (
+                  <div className="mt-4 flex items-center justify-center">
+                    <div className="w-1/2">
+                      <MultiColorCircularProgressBar segments={segments} />
+                      <p className=" mt-2 text-center text-white">
+                        {solvedChallenges} Solved
+                      </p>
+                    </div>
+                    <div className="ml-4 w-1/2">
+                      {completionData.map((item, index) => (
+                        <div key={index} className="mb-2 flex justify-between">
+                          <span
+                            className={`text-${item.color.split('-')[1]}-500`}
+                            title={`${item.name}: ${item.amount} challenges`}
+                          >
+                            {item.name}
+                          </span>
+                          <span className="text-white">{item.amount}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ) : (
+                  <p className="text-neutral-400">
+                    Hmm, {user && user.username} hasn't solved any challenges
+                    yet.
+                  </p>
+                )}
+                <hr className="mt-4 border-neutral-700 px-4"></hr>
+              </div>
+            )}
+          </div>
+
+          <div className="">
+            {displayMode === 'followers' && (
+              <Followers
+                followers={followers}
+                pageData={followerPageData}
+                userData={userData}
+              />
+            )}
+            {displayMode === 'following' && (
+              <Following
+                followings={following}
+                pageData={followingPageData}
+                userData={userData}
+              />
+            )}
+
+            {displayMode === 'default' && (
+              <>
+                <div className="mt-4 hidden">
+                  <div className="pb-2 ">
+                    <ul className="hidden w-full list-none text-neutral-500 md:flex">
+                      {[
+                        'SOLVED CHALLENGES',
+                        'WRITEUPS',
+                        'CREATED CHALLENGES',
+                        'BADGES',
+                      ].map((tab) => (
+                        <li
+                          key={tab}
+                          className={`mr-4 cursor-pointer ${
+                            activeTab === tab
+                              ? ' border-blue-600 font-semibold text-blue-600'
+                              : ''
+                          }`}
+                          onClick={() => setActiveTab(tab)}
+                        >
+                          {tab}
+                        </li>
+                      ))}
+                    </ul>
+                    <select
+                      className="w-1/2 w-full rounded border-none bg-neutral-800 px-4 text-neutral-50 md:hidden"
+                      value={activeTab}
+                      onChange={(e) => setActiveTab(e.target.value)}
+                    >
+                      {[
+                        'LIKED CHALLENGES',
+                        'WRITEUPS',
+                        'CREATED CHALLENGES',
+                        'BADGES',
+                      ].map((tab) => (
+                        <option key={tab} value={tab}>
+                          {tab}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="border-t-4 hiborder-blue-600 bg-neutral-800 px-4 py-4">
+                    {user != undefined && renderContent()}
+                  </div>
+
+                  <div className="w-full">
+                    <div className="text-white">
+                      <div className="mt-4 w-full border-t-4 border-blue-600 bg-neutral-800 px-4 py-4">
+                        <h2 className="mb-4 text-xl font-bold text-white">
+                          ACTIVITY CALENDAR
+                        </h2>
+                        <div className="flex justify-center">
+                          {activityData && (
+                            <ActivityCalendar
+                              data={activityData}
+                              showMonthLabels={true} // Ensure month labels are shown
+                              theme={{
+                                light: [
+                                  '#1f1f1f',
+                                  '#c0d7ff',
+                                  '#93bfff',
+                                  '#66a7ff',
+                                  '#3a8fff',
+                                ],
+                                dark: [
+                                  '#1f1f1f',
+                                  '#c0d7ff',
+                                  '#93bfff',
+                                  '#66a7ff',
+                                  '#3a8fff',
+                                ],
+                                level4: '#3a8fff',
+                              }}
+                            />
+                          )}{' '}
+                        </div>{' '}
+                      </div>{' '}
+                    </div>
+                  </div>
+                </div>
+              </>
+            )}
+            <ToastContainer
+              position="top-right"
+              autoClose={5000}
+              hideProgressBar={false}
+              newestOnTop={false}
+              closeOnClick
+              rtl={false}
+              pauseOnFocusLoss
+              draggable
+              pauseOnHover
+              theme="dark"
+            />
+          </div>
+        </div>
       </main>
 
       {/* are you even surprised atp?  */}
@@ -1247,6 +1462,9 @@ export default function Create() {
         </>
       ) : null}
 
+      <div className="mt-4"></div>
+
+      <div className="flex h-full w-full grow basis-0"></div>
       <Footer />
 
       {banner && (
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 7c329530..6a596b23 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -432,7 +432,14 @@ ul {
   position: relative;
   transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
 }
-
+@media (max-width: 768px) {
+  .podium {
+    display: none;
+  }
+  .top-three {
+    background-color: var(--color);
+  }
+}
 .podium:hover {
   transform: translateY(-5px);
   height: calc(100% + 200px)
diff --git a/yarn.lock b/yarn.lock
index c5bda690..bda41bf7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2602,6 +2602,11 @@ cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-mediaquery@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
+  integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==
+
 css-selector-parser@^3.0.0:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-3.0.5.tgz#9b636ebccf7c4bcce5c1ac21ae27de9f01180ae9"
@@ -4004,6 +4009,11 @@ https-proxy-agent@^7.0.2:
     agent-base "^7.0.2"
     debug "4"
 
+hyphenate-style-name@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436"
+  integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==
+
 ieee754@^1.1.13:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@@ -4478,6 +4488,13 @@ marked@^4.1.0, marked@^4.3.0:
   resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
   integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
 
+matchmediaquery@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.4.2.tgz#22582bd4ae63ad9f54c53001bba80cbed0f7eafa"
+  integrity sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==
+  dependencies:
+    css-mediaquery "^0.1.2"
+
 material-ui-popup-state@^5.0.5:
   version "5.0.9"
   resolved "https://registry.yarnpkg.com/material-ui-popup-state/-/material-ui-popup-state-5.0.9.tgz#c4a1054b3ee8457fe1952fc32ad7604f238eca17"
@@ -5871,7 +5888,7 @@ progress@2.0.3:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -6191,6 +6208,16 @@ react-resize-detector@^8.0.4:
   dependencies:
     lodash "^4.17.21"
 
+react-responsive@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-10.0.0.tgz#657c7a90823cd565f43aa5918bd8eb0cd2c91c91"
+  integrity sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg==
+  dependencies:
+    hyphenate-style-name "^1.0.0"
+    matchmediaquery "^0.4.2"
+    prop-types "^15.6.1"
+    shallow-equal "^3.1.0"
+
 react-router-dom@^6.9.0:
   version "6.14.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.14.2.tgz#88f520118b91aa60233bd08dbd3fdcaea3a68488"
@@ -6226,6 +6253,11 @@ react-smooth@^2.0.2:
     fast-equals "^5.0.0"
     react-transition-group "2.9.0"
 
+react-swipeable@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-7.0.1.tgz#cd299f5986c5e4a7ee979839658c228f660e1e0c"
+  integrity sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==
+
 react-text-loop@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-text-loop/-/react-text-loop-2.3.0.tgz#c4035b1f3fb8216b34ed93f3160025fc7b1af3b7"
@@ -6751,6 +6783,11 @@ server-only@^0.0.1:
   resolved "https://registry.yarnpkg.com/server-only/-/server-only-0.0.1.tgz#0f366bb6afb618c37c9255a314535dc412cd1c9e"
   integrity sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==
 
+shallow-equal@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-3.1.0.tgz#e7a54bac629c7f248eff6c2f5b63122ba4320bec"
+  integrity sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"