diff --git a/components/atoms/PillSelector/pill-selector.tsx b/components/atoms/PillSelector/pill-selector.tsx
index 4afbbfd7d..174cf5ee9 100644
--- a/components/atoms/PillSelector/pill-selector.tsx
+++ b/components/atoms/PillSelector/pill-selector.tsx
@@ -63,13 +63,13 @@ const PillSelector: React.FC<PillSelectorProps> = ({
       <PillSelectorButton>
         {selected ? (
           <>
-            <div onClick={toggleFilter}>
+            <button onClick={toggleFilter}>
               {pillOptions.find((option) => option.toLowerCase().replaceAll(" ", "-") === selected)}
-            </div>
+            </button>
             <Icon IconImage={cancelIcon} onClick={handleCancelClick} />
           </>
         ) : (
-          <div onClick={toggleFilter}>Add Filter</div>
+          <button onClick={toggleFilter}>Add Filter</button>
         )}
       </PillSelectorButton>
 
diff --git a/components/atoms/Radio/radio.tsx b/components/atoms/Radio/radio.tsx
index 89ca1bef7..ed060c864 100644
--- a/components/atoms/Radio/radio.tsx
+++ b/components/atoms/Radio/radio.tsx
@@ -14,12 +14,12 @@ interface RadioProps {
 
 const Radio = ({ className, withLabel, id, children, value, checked = false, onClick }: RadioProps): JSX.Element => {
   return (
-    <div
+    <button
       onClick={onClick}
       className={
         `${
           checked && "!bg-light-orange-3"
-        }  px-2 py-1.5 text-sm text-slate-600   group  rounded-md  hover:bg-light-orange-3 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition` +
+        }  w-full px-2 py-1.5 text-sm text-slate-600   group  rounded-md  hover:bg-light-orange-3 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition` +
         `${className}`
       }
     >
@@ -49,7 +49,7 @@ const Radio = ({ className, withLabel, id, children, value, checked = false, onC
           </span>
         )}
       </label>
-    </div>
+    </button>
   );
 };
 
diff --git a/components/atoms/RadioCheck/radio-check.tsx b/components/atoms/RadioCheck/radio-check.tsx
index a7fe202f1..c6d392b54 100644
--- a/components/atoms/RadioCheck/radio-check.tsx
+++ b/components/atoms/RadioCheck/radio-check.tsx
@@ -12,10 +12,10 @@ interface RadioCheckProps {
 
 const RadioCheck = ({ className, id, children, value, checked = false, onClick }: RadioCheckProps): JSX.Element => {
   return (
-    <div
+    <button
       onClick={onClick}
       className={
-        "px-2 py-1.5 text-sm text-black group  rounded-md  hover:bg-light-orange-3 hover:text-light-orange-9 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition" +
+        "w-full px-2 py-1.5 text-sm text-black group  rounded-md  hover:bg-light-orange-3 hover:text-light-orange-9 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition" +
         `${className}`
       }
     >
@@ -36,7 +36,7 @@ const RadioCheck = ({ className, id, children, value, checked = false, onClick }
         )}
         <span className="ml-3 leading-none my-auto">{children}</span>
       </label>
-    </div>
+    </button>
   );
 };
 
diff --git a/components/atoms/SVGIcon/svg-icon.tsx b/components/atoms/SVGIcon/svg-icon.tsx
index 22bf5b4f1..acd323ae4 100644
--- a/components/atoms/SVGIcon/svg-icon.tsx
+++ b/components/atoms/SVGIcon/svg-icon.tsx
@@ -11,7 +11,7 @@ interface IconProps {
 
 const SVGIcon: React.FC<IconProps> = ({ onClick, className, IconImage, size = 16 }) => {
   return (
-    <div className={clsx(`inline-flex`, className)} onClick={onClick}>
+    <button className={clsx(`inline-flex`, className)} onClick={onClick}>
       <svg>
         <use
           href={IconImage}
@@ -21,7 +21,7 @@ const SVGIcon: React.FC<IconProps> = ({ onClick, className, IconImage, size = 16
           style={{ stroke: "currentcolor", maxWidth: "100%", height: "auto" }}
         />
       </svg>
-    </div>
+    </button>
   );
 };
 
diff --git a/components/atoms/Search/search.tsx b/components/atoms/Search/search.tsx
index 99d5096ec..b9d4fe922 100644
--- a/components/atoms/Search/search.tsx
+++ b/components/atoms/Search/search.tsx
@@ -119,7 +119,6 @@ const Search = ({
       <FaSearch className="text-light-slate-9" fontSize={16} onClick={handleOnSearch} />
       <input
         className="w-full pl-2 placeholder:text-sm focus:outline-none placeholder:text-slate-400 disabled:cursor-not-allowed"
-        autoFocus={autoFocus}
         placeholder={placeholder}
         name={name}
         value={search}
@@ -141,7 +140,7 @@ const Search = ({
           <ScrollArea type="auto" className="h-60">
             {suggestionsLabel && suggestions.length > 0 ? <div className="pl-5 pt-4">{suggestionsLabel}</div> : null}
             {suggestions.map((suggestion, index) => (
-              <div
+              <button
                 className={clsx(
                   cursor === index && "_cursorActive bg-slate-100",
                   "px-4 py-2 hover:bg-light-slate-2",
@@ -162,7 +161,7 @@ const Search = ({
                 ) : (
                   suggestion.node
                 )}
-              </div>
+              </button>
             ))}
           </ScrollArea>
         </div>
diff --git a/components/atoms/TextInput/text-input.tsx b/components/atoms/TextInput/text-input.tsx
index 2e5ad241a..188289dc2 100644
--- a/components/atoms/TextInput/text-input.tsx
+++ b/components/atoms/TextInput/text-input.tsx
@@ -77,12 +77,12 @@ const TextInput = ({
               {state === "valid" ? (
                 <CheckCircleFillIcon className="ml-1 text-light-orange-9" size={12} />
               ) : !!value ? (
-                <span title="Clear input" className="flex items-center ml-1" onClick={handleResetInput}>
+                <button title="Clear input" className="flex items-center ml-1" onClick={handleResetInput}>
                   <XCircleFillIcon
                     className={clsx(state === "invalid" && errorMsg ? "text-light-red-11" : "", "cursor-pointer")}
                     size={12}
                   />
-                </span>
+                </button>
               ) : (
                 ""
               )}
diff --git a/components/atoms/ToggleOption/toggle-option.tsx b/components/atoms/ToggleOption/toggle-option.tsx
index d920cc069..c36ee4c7f 100644
--- a/components/atoms/ToggleOption/toggle-option.tsx
+++ b/components/atoms/ToggleOption/toggle-option.tsx
@@ -8,7 +8,7 @@ interface ToogleOptionProps {
 }
 const ToggleOption = ({ optionText, withIcon, checked, handleToggle }: ToogleOptionProps): JSX.Element => {
   return (
-    <div
+    <button
       onClick={handleToggle}
       className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-0.5 border border-light-slate-6 bg-light-slate-1"
     >
@@ -20,7 +20,7 @@ const ToggleOption = ({ optionText, withIcon, checked, handleToggle }: ToogleOpt
           className="text-light-slate-9"
         />
       )}
-    </div>
+    </button>
   );
 };
 export default ToggleOption;
diff --git a/components/molecules/AuthSection/auth-section.tsx b/components/molecules/AuthSection/auth-section.tsx
index 6509bbbe0..4bf444a6d 100644
--- a/components/molecules/AuthSection/auth-section.tsx
+++ b/components/molecules/AuthSection/auth-section.tsx
@@ -83,7 +83,7 @@ const AuthSection: React.FC = ({}) => {
         <FiSettings className="group-hover:text-light-orange-10" />
         <Text className="group-hover:text-light-orange-10">Settings</Text>
       </Link>,
-      <span
+      <button
         onClick={async () => {
           const pageHref = window.location.href;
           const searchParams = new URLSearchParams(pageHref.substring(pageHref.indexOf("?")));
@@ -99,7 +99,7 @@ const AuthSection: React.FC = ({}) => {
       >
         <FiLogOut className="group-hover:text-light-orange-10" />
         <Text className="group-hover:text-light-orange-10">Disconnect</Text>
-      </span>,
+      </button>,
     ],
   };
   return (
diff --git a/components/molecules/CardRepoList/card-repo-list.tsx b/components/molecules/CardRepoList/card-repo-list.tsx
index b18700db4..ababa2ed5 100644
--- a/components/molecules/CardRepoList/card-repo-list.tsx
+++ b/components/molecules/CardRepoList/card-repo-list.tsx
@@ -36,6 +36,15 @@ const CardRepoList = ({
   const sanitizedRepoList = [...new Map(repoList.map((item) => [item["repoName"], item])).values()];
   const [selectedRepo, setSelectedRepo] = useState<string>("");
 
+  const handleClick = (repoOwner: any, repoName: string) => {
+    if (!selectedRepo) {
+      onSelect(`${repoOwner}/${repoName}`);
+      setSelectedRepo(`${repoOwner}/${repoName}`);
+    } else {
+      onSelect("");
+      setSelectedRepo("");
+    }
+  };
   return (
     <div className="flex gap-1 items-center max-w[175px] truncate flex-wrap text-xs text-light-slate-9">
       {repoList.length > 0 ? (
@@ -44,18 +53,7 @@ const CardRepoList = ({
             .filter((_, arrCount) => arrCount < limit)
             .map(({ repoOwner, repoName, repoIcon }, index) => {
               return (
-                <div
-                  key={`repo_${index}`}
-                  onClick={() => {
-                    if (!selectedRepo) {
-                      onSelect(`${repoOwner}/${repoName}`);
-                      setSelectedRepo(`${repoOwner}/${repoName}`);
-                    } else {
-                      onSelect("");
-                      setSelectedRepo("");
-                    }
-                  }}
-                >
+                <button key={`repo_${index}`} onClick={() => handleClick(repoOwner, repoName)}>
                   {repoName && repoIcon ? (
                     <Tooltip content={`${repoOwner}/${repoName}`}>
                       <div
@@ -89,7 +87,7 @@ const CardRepoList = ({
                   ) : (
                     ""
                   )}
-                </div>
+                </button>
               );
             })}
           <div>{repoTotal > limit ? `+${repoTotal - limit}` : null}</div>
diff --git a/components/molecules/ContributorFilterDropdown/contributor-filter-dropdown.tsx b/components/molecules/ContributorFilterDropdown/contributor-filter-dropdown.tsx
index 60774d519..e21d4e3eb 100644
--- a/components/molecules/ContributorFilterDropdown/contributor-filter-dropdown.tsx
+++ b/components/molecules/ContributorFilterDropdown/contributor-filter-dropdown.tsx
@@ -39,7 +39,7 @@ const ContributorFilterDropdown = () => {
 
   return (
     <div ref={ref} className="flex flex-col px-3 border rounded-lg shadow w-max">
-      <div
+      <button
         onClick={() => setOpen((prev) => !prev)}
         className="flex items-center justify-between text-sm font-normal cursor-pointer text-light-slate-9 w-44 "
       >
@@ -49,7 +49,7 @@ const ContributorFilterDropdown = () => {
           <BiChevronUp className="text-lg translate-y-1.5" />
           <BiChevronDown className="text-lg -translate-y-1.5" />
         </div>
-      </div>
+      </button>
 
       <div
         className={clsx(
diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
index aeec683e2..bc62c3797 100644
--- a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
+++ b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
@@ -543,7 +543,7 @@ const ContributorHighlightCard = ({
                   <DropdownMenuItem
                     className={`rounded-md ${loggedInUser?.user_metadata?.user_name === user && "hidden"}`}
                   >
-                    <div
+                    <button
                       onClick={isError ? follow : unFollow}
                       className="flex gap-2.5 py-1 items-center pl-3 pr-7 cursor-pointer"
                     >
@@ -551,17 +551,17 @@ const ContributorHighlightCard = ({
                       <span>
                         {!isError ? "Unfollow" : "Follow"} {user}
                       </span>
-                    </div>
+                    </button>
                   </DropdownMenuItem>
                 ) : (
                   <DropdownMenuItem className="rounded-md">
-                    <div
+                    <button
                       onClick={async () => signIn({ provider: "github" })}
                       className="flex gap-2.5 py-1  items-center pl-3 pr-7"
                     >
                       <FaUserPlus size={22} />
                       <span>Follow {user}</span>
-                    </div>
+                    </button>
                   </DropdownMenuItem>
                 )}
                 {loggedInUser && (
diff --git a/components/molecules/ContributorListTableRow/contributor-list-table-row.tsx b/components/molecules/ContributorListTableRow/contributor-list-table-row.tsx
index b9bd2aedc..7613e2e68 100644
--- a/components/molecules/ContributorListTableRow/contributor-list-table-row.tsx
+++ b/components/molecules/ContributorListTableRow/contributor-list-table-row.tsx
@@ -143,12 +143,12 @@ const ContributorListTableRow = ({
             </div>
           </div>
           <div>
-            <div
+            <button
               onClick={() => setTableOpen(!tableOpen)}
               className="items-center justify-between w-6 h-6 p-1 border rounded-md "
             >
               {tableOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-            </div>
+            </button>
           </div>
         </div>
 
diff --git a/components/molecules/DevCard/dev-card.tsx b/components/molecules/DevCard/dev-card.tsx
index 222e7c932..3848e5dfe 100644
--- a/components/molecules/DevCard/dev-card.tsx
+++ b/components/molecules/DevCard/dev-card.tsx
@@ -97,7 +97,7 @@ export default function DevCard(props: DevCardProps) {
       <div style={{ ...faceStyle }} className="DevCard-card relative rounded-xl w-full h-full border border-gray-400" />
     </animated.div>
   ) : (
-    <div
+    <button
       className="DevCard select-none"
       style={{
         width: "245px",
@@ -238,7 +238,7 @@ export default function DevCard(props: DevCardProps) {
           </div>
         </div>
       </Tilt>
-    </div>
+    </button>
   );
 }
 
diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx
index bd42d0517..5e075b917 100644
--- a/components/molecules/HighlightInput/highlight-input-form.tsx
+++ b/components/molecules/HighlightInput/highlight-input-form.tsx
@@ -755,9 +755,10 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
                                 />
                               )}
                               <a
-                                href={suggestion.url}
+                                className="text-light-slate-11 truncate max-w-[14rem] xs:max-w-[16rem] text-xs xs:text-sm cursor-pointer hover:text-orange-600 transition"
                                 target="_blank"
-                                className="truncate max-w-[14rem] xs:max-w-[16rem] text-xs xs:text-sm"
+                                rel="noreferrer"
+                                href={suggestion.url}
                               >
                                 {suggestion.title}
                               </a>
@@ -846,7 +847,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
           className="fixed left-0 right-0 z-30 h-screen py-4 transition bg-white top-24 md:hidden"
         >
           <div className="flex items-center justify-between w-full px-2">
-            <button onClick={() => setIsFormOpenMobile(false)} type="button">
+            <button onClick={() => setIsFormOpenMobile(false)}>
               <IoClose className="text-2xl text-light-slate-10" />
             </button>
             <Button
@@ -1022,14 +1023,15 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
         </form>
       )}
 
-      <Fab className="md:hidden" onClick={() => setIsFormOpenMobile(true)}>
-        <span
-          className="outline-none p-3 mb-10 -mr-4 text-white rounded-full shadow-lg bg-light-orange-10"
+      <Fab className="md:hidden">
+        <button
+          onClick={() => setIsFormOpenMobile(true)}
+          className="p-3 mb-10 -mr-4 text-white rounded-full shadow-lg bg-light-orange-10"
           id="mobile-highlight-create"
         >
           <span className="sr-only">Create a highlight</span>
           <RxPencil1 className="text-3xl" />
-        </span>
+        </button>
       </Fab>
     </>
   );
diff --git a/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx b/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx
index 89c7a00ee..611b050ed 100644
--- a/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx
+++ b/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx
@@ -21,7 +21,7 @@ const HighlightsFilterCard = ({ repos, setSelected, selectedFilter }: Highlights
       <p className="mb-2 text-sm font-normal text-light-slate-11">Click to filter the highlights</p>
       <div className="flex flex-col gap-2 pt-4 border-t">
         {repos.map(({ repoName, repoIcon, full_name }) => (
-          <div
+          <button
             onClick={() => handleClick(full_name)}
             key={full_name as string}
             className={`${
@@ -30,7 +30,7 @@ const HighlightsFilterCard = ({ repos, setSelected, selectedFilter }: Highlights
           >
             <Icon IconImage={repoIcon} className="rounded-[4px] overflow-hidden" />
             <span className="max-w-[45px] md:max-w-[100px] truncate text-xs ">{repoName}</span>
-          </div>
+          </button>
         ))}
       </div>
     </aside>
diff --git a/components/molecules/InfoCard/info-card.tsx b/components/molecules/InfoCard/info-card.tsx
index 35f51c3ce..d26aab8f1 100644
--- a/components/molecules/InfoCard/info-card.tsx
+++ b/components/molecules/InfoCard/info-card.tsx
@@ -9,7 +9,7 @@ export interface FavoriteRepoCardProps {
 
 const InfoCard = ({ icon, title, description, handleClick }: FavoriteRepoCardProps): JSX.Element => {
   return (
-    <div className="p-3 bg-white border-2 rounded-xl cursor-pointer" onClick={handleClick}>
+    <button className="p-3 bg-white border-2 rounded-xl cursor-pointer" onClick={handleClick}>
       <div className="flex items-center gap-2.5">
         {/* Avatar */}
         {icon === "github" && <FiGithub size={24} className="text-orange-200" />}
@@ -21,7 +21,7 @@ const InfoCard = ({ icon, title, description, handleClick }: FavoriteRepoCardPro
           <div className="text-sm text-gray-400 tracking-tight -mt-0.5">{description}</div>
         </div>
       </div>
-    </div>
+    </button>
   );
 };
 
diff --git a/components/molecules/RepoRow/repo-row.tsx b/components/molecules/RepoRow/repo-row.tsx
index ad4b790b7..bd945a6ea 100644
--- a/components/molecules/RepoRow/repo-row.tsx
+++ b/components/molecules/RepoRow/repo-row.tsx
@@ -169,12 +169,12 @@ const RepoRow = ({ repo, topic, userPage, selected, handleOnSelectRepo }: RepoPr
             )}
           </div>
           <div>
-            <div
+            <button
               onClick={() => setTableOpen(!tableOpen)}
               className="items-center justify-between w-6 h-6 p-1 border rounded-md"
             >
               {tableOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-            </div>
+            </button>
           </div>
         </div>
 
@@ -225,9 +225,9 @@ const RepoRow = ({ repo, topic, userPage, selected, handleOnSelectRepo }: RepoPr
             </div>
           </div>
 
-          <div onClick={() => setTableOpen(!tableOpen)} className="py-1 mt-3 text-center border rounded-lg">
+          <button onClick={() => setTableOpen(!tableOpen)} className="py-1 mt-3 text-center border rounded-lg">
             Hide details
-          </div>
+          </button>
         </div>
       </div>
       <div className={`${classNames.row} `}>
diff --git a/components/molecules/ReposoitoryCartItem/repository-cart-item.tsx b/components/molecules/ReposoitoryCartItem/repository-cart-item.tsx
index 45001c479..7b687ced4 100644
--- a/components/molecules/ReposoitoryCartItem/repository-cart-item.tsx
+++ b/components/molecules/ReposoitoryCartItem/repository-cart-item.tsx
@@ -24,12 +24,12 @@ const RepositoryCartItem = ({ avatar, orgName, repoName, totalPrs, handleRemoveI
         <span className="flex items-center">
           <BiGitPullRequest className="text-[15px]" /> {totalPrs}
         </span>
-        <span
+        <button
           onClick={() => handleRemoveItem()}
           className="w-[26px] cursor-pointer flex justify-center items-center h-6 border rounded"
         >
           <AiOutlineClose className="text-sm" />
-        </span>
+        </button>
       </div>
     </div>
   );
diff --git a/components/molecules/SuperlativeSelector/superlative-selector.tsx b/components/molecules/SuperlativeSelector/superlative-selector.tsx
index 3108e738d..f6c2c3acb 100644
--- a/components/molecules/SuperlativeSelector/superlative-selector.tsx
+++ b/components/molecules/SuperlativeSelector/superlative-selector.tsx
@@ -50,11 +50,10 @@ const SuperativeSelector: React.FC<SuperlativeSelectorProps> = ({
     <div className="truncate" ref={ref}>
       <ContextFilterButton onClick={toggleFilter} isSelected={!!selected}>
         {selected ? (
-          <div className="flex" onClick={toggleFilter}>
+          <button className="flex" onClick={toggleFilter}>
             <span className="inline-block text-dark-slate-10">Filtered by:</span>
             <div className="block truncate pr-4 ml-1 text-light-slate-12">
               {filterDescription}
-
               <Icon
                 className="absolute right-1 top-1/2 transform -translate-y-1/2"
                 IconImage={cancelIcon}
@@ -64,9 +63,9 @@ const SuperativeSelector: React.FC<SuperlativeSelectorProps> = ({
                 }}
               />
             </div>
-          </div>
+          </button>
         ) : (
-          <div onClick={toggleFilter}>Add Filter </div>
+          <button onClick={toggleFilter}>Add Filter </button>
         )}
       </ContextFilterButton>
       {isOpen && (
diff --git a/components/organisms/SearchDialog/search-dialog.tsx b/components/organisms/SearchDialog/search-dialog.tsx
index a5a7f916d..ab4640d17 100644
--- a/components/organisms/SearchDialog/search-dialog.tsx
+++ b/components/organisms/SearchDialog/search-dialog.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import clsx from "clsx";
 import { useRouter } from "next/router";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { FaSearch } from "react-icons/fa";
 import { HiOutlineExclamation } from "react-icons/hi";
 import store from "lib/store";
@@ -34,8 +34,10 @@ const SearchDialog = () => {
   } = useSearchRepos(debouncedSearchTerm, 3, 5);
 
   const [userSearchResult, setUserSearchResult] = useState<{ data: GhUser[] }>();
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
+    searchInputRef.current?.focus();
     document.addEventListener("keydown", handleCloseSearch);
     function handleCloseSearch(e: KeyboardEvent) {
       if (e.key === "Escape") {
@@ -137,7 +139,10 @@ const SearchDialog = () => {
 
   return (
     <div className="fixed left-0 top-0 z-auto p-5 w-full h-full flex justify-center bg-white/30">
-      <div className="absolute w-full h-full left-0 top-0 z-50 backdrop-blur-sm" onClick={() => setOpenSearch(false)} />
+      <button
+        className="absolute w-full h-full left-0 top-0 z-50 backdrop-blur-sm"
+        onClick={() => setOpenSearch(false)}
+      />
       <div
         className="flex flex-col w-full max-w-2xl h-fit max-h-full bg-white shadow-xl border transition rounded-lg ring-light-slate-6 relative z-50 overflow-hidden"
         onMouseMove={() => cursor !== -1 && setCursor(-1)}
@@ -149,7 +154,7 @@ const SearchDialog = () => {
             <FaSearch className="text-light-slate-9" fontSize={16} />
           )}
           <input
-            autoFocus
+            ref={searchInputRef}
             className="w-full pl-2 text-sm font-semibold text-slate-700 focus:outline-none"
             value={searchTerm}
             onChange={(e) => {
@@ -200,7 +205,7 @@ const SearchDialogTrigger = ({ hideSmallIcon, className }: { hideSmallIcon?: boo
 
   return (
     <>
-      <div
+      <button
         className={`hidden sm:flex justify-between p-1 pl-3 h-fit ${
           isMac ? "w-56" : "w-64"
         } ${className} ml-auto bg-white border rounded-lg ring-light-slate-6 relative overflow-hidden`}
@@ -213,11 +218,11 @@ const SearchDialogTrigger = ({ hideSmallIcon, className }: { hideSmallIcon?: boo
         <Text keyboard className="text-gray-600 !border-b !px-1">
           {isMac ? "⌘K" : <span className="text-xs px-1 py-2">CTRL+K</span>}
         </Text>
-      </div>
+      </button>
       {!hideSmallIcon && (
-        <div className="flex sm:hidden p-1" onClick={() => setOpenSearch(true)}>
+        <button className="flex sm:hidden p-1" onClick={() => setOpenSearch(true)}>
           <FaSearch className="text-light-slate-9 cursor-pointer" fontSize={16} />
-        </div>
+        </button>
       )}
     </>
   );
diff --git a/pages/u/[username]/card.tsx b/pages/u/[username]/card.tsx
index 6fc0426d4..17921371a 100644
--- a/pages/u/[username]/card.tsx
+++ b/pages/u/[username]/card.tsx
@@ -171,7 +171,7 @@ function CopyButton({ username }: { username: string }) {
   const posthog = usePostHog();
 
   return (
-    <div
+    <button
       className="rounded-full w-10 h-10 bg-sauced-orange stroke-white cursor-pointer hover:opacity-80 transition-all
 flex items-center justify-center"
       onClick={async () => {
@@ -191,7 +191,7 @@ flex items-center justify-center"
       }}
     >
       {copying ? <Spinner className="w-6 h-8" /> : <FiCopy className="w-6 h-8 stroke-white" />}
-    </div>
+    </button>
   );
 }