diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index e1b8ce2c5..455cdf8a4 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -81,14 +81,16 @@ export default function Header(): JSX.Element {
           <span className="ml-4 text-2xl">⛓️</span>
         </Link>
         {showArrowReturnIcon && (
-          <button
+          <Button
+            variant="none"
+            size="none"
             onClick={() => {
               checkForChanges();
               redirectToLastLocation();
             }}
           >
             <IconComponent name="ChevronLeft" className="w-4" />
-          </button>
+          </Button>
         )}
 
         <MenuBar />
@@ -186,7 +188,9 @@ export default function Header(): JSX.Element {
             <Separator orientation="vertical" />
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <button
+                <Button
+                  variant="none"
+                  size="none"
                   data-testid="user-profile-settings"
                   className={
                     "h-7 w-7 rounded-full focus-visible:outline-0 " +
diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
index 527c8d423..78979c23d 100644
--- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
@@ -33,19 +33,14 @@ const HeaderComponent = ({
     <>
       <div className="flex w-full items-center justify-between gap-4">
         <div className="flex items-center justify-self-start">
-          <Button
-            variant="none"
-            size="none"
-            onClick={handleClick}
-            className="text-sm"
-          >
+          <a onClick={handleClick} className="cursor-pointer text-sm">
             <div className="flex items-center space-x-2">
               <Checkbox checked={!shouldSelectAll} id="terms" />
               <span className="label text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                 {shouldSelectAll ? "Select All" : "Unselect All"}
               </span>
             </div>
-          </Button>
+          </a>
         </div>
         <div className="flex items-center gap-2">
           <div>