Fixed: Added type to all buttons that are not meant for form submissions.

frontend/src/components/LoginPageContent.tsx

@@ -71,6 +71,7 @@ const LoginPageContent: FC<LoginPageContentProps> = ({ isGitHubAuthEnabled }) =>
         </p>
 
         <button
+          type="button"
           onClick={() => signIn('github', { callbackUrl: '/' })}
           className="flex w-full items-center justify-center gap-2 rounded-lg bg-black px-4 py-2 font-medium text-white transition-colors hover:bg-gray-900/90"
         >

frontend/src/components/MenteeIssues.tsx

@@ -117,6 +117,7 @@ const MenteeIssues: React.FC<MenteeIssuesProps> = ({ openIssues, closedIssues, m
       {/* Tab Navigation */}
       <div className="mb-4 flex border-b border-gray-200">
         <button
+          type="button"
           onClick={() => setActiveTab('open')}
           className={`border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
             activeTab === 'open'
@@ -128,6 +129,7 @@ const MenteeIssues: React.FC<MenteeIssuesProps> = ({ openIssues, closedIssues, m
           Open Issues ({openIssues.length})
         </button>
         <button
+          type="button"
           onClick={() => setActiveTab('closed')}
           className={`border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
             activeTab === 'closed'

frontend/src/components/Milestones.tsx

@@ -56,6 +56,7 @@ const Milestones: React.FC<ProjectMilestonesProps> = ({
             <div className="flex flex-1 items-center overflow-hidden">
               <FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
               <button
+                type="button"
                 className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
                 onClick={() =>
                   router.push(

frontend/src/components/ModuleList.tsx

@@ -21,10 +21,11 @@
           const displayText = module.length > 50 ? `${module.slice(0, 50)}...` : module
           return (
             <button
+              type="button"
               key={`${module}-${index}`}
               className="rounded-lg border border-gray-400 px-3 py-1 text-sm transition-all duration-200 ease-in-out hover:scale-105 hover:bg-gray-200 dark:border-gray-300 dark:hover:bg-gray-700"
               title={module.length > 50 ? module : undefined}
               type="button"
               aria-label={`Module: ${module}`}
             >
               {displayText}

frontend/src/components/MultiSearch.tsx

@@ -274,6 +274,7 @@ const MultiSearchBar: React.FC<MultiSearchBarProps> = ({
                       }`}
                     >
                       <button
+                        type="button"
                         onClick={() => handleSuggestionClick(hit, suggestion.indexName)}
                         className="flex w-full cursor-pointer items-center overflow-hidden border-none bg-transparent p-0 text-left"
                       >

frontend/src/components/NavDropDown.tsx

@@ -40,6 +40,7 @@ export default function NavDropdown({ link, pathname }: NavDropDownProps) {
       )}
     >
       <button
+        type="button"
         className="flex items-center gap-2 whitespace-nowrap"
         onClick={() => setIsOpen((prev) => !prev)}
         aria-expanded={isOpen}

frontend/src/components/RecentIssues.tsx

@@ -36,6 +36,7 @@ const RecentIssues: React.FC<RecentIssuesProps> = ({ data, showAvatar = true })
             <div className="flex flex-1 items-center overflow-hidden">
               <FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
               <button
+                type="button"
                 className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
                 onClick={() =>
                   router.push(

frontend/src/components/RecentPullRequests.tsx

@@ -37,6 +37,7 @@ const RecentPullRequests: React.FC<RecentPullRequestsProps> = ({ data, showAvata
             <div className="mr-4 flex flex-1 items-center overflow-hidden">
               <FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
               <button
+                type="button"
                 className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
                 onClick={() =>
                   router.push(

frontend/src/components/Release.tsx

@@ -70,6 +70,7 @@ const Release: React.FC<ReleaseProps> = ({
           <div className="flex flex-1 items-center overflow-hidden">
             <FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
             <button
+              type="button"
               className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
               disabled={!release.organizationName || !release.repositoryName}
               onClick={() => {

frontend/src/components/RepositoryCard.tsx

@@ -41,6 +41,7 @@ const RepositoryItem = ({ details }: { details: RepositoryCardProps }) => {
     <div className="flex h-46 w-full flex-col gap-3 rounded-lg border-1 border-gray-200 p-4 shadow-xs ease-in-out hover:shadow-md dark:border-gray-700 dark:bg-gray-800">
       <div className="flex items-start justify-between gap-2">
         <button
+          type="button"
           onClick={handleClick}
           className="min-w-0 flex-1 cursor-pointer text-start font-semibold text-blue-400 hover:underline"
         >

frontend/src/components/ScrollToTop.tsx

@@ -33,6 +33,7 @@ export default function ScrollToTop() {
 
   return (
     <button
+      type="button"
       onClick={scrollToTop}
       aria-label="Scroll to top"
       className={`bg-owasp-blue/70 hover:bg-owasp-blue dark:bg-owasp-blue/30 hover:dark:bg-owasp-blue/50 fixed right-4 bottom-4 z-50 flex h-11 w-11 items-center justify-center rounded-full text-white shadow-lg transition-all duration-400 hover:scale-105 active:scale-100 dark:text-slate-300 ${isVisible ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'} `}

frontend/src/components/Search.tsx

@@ -86,6 +86,7 @@ const SearchBar: React.FC<SearchProps> = ({
             />
             {searchQuery && (
               <button
+                type="button"
                 className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full p-1 hover:bg-gray-100 focus:ring-2 focus:ring-gray-300 focus:outline-hidden"
                 onClick={handleClearSearch}
                 aria-label="Clear search"

frontend/src/components/SingleModuleCard.tsx

@@ -92,6 +92,7 @@ const SingleModuleCard: React.FC<SingleModuleCardProps> = ({
         {isAdmin && (
           <div className="relative" ref={dropdownRef}>
             <button
+              type="button"
               onClick={() => setDropdownOpen((prev) => !prev)}
               className="rounded px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
             >
@@ -102,6 +103,7 @@ const SingleModuleCard: React.FC<SingleModuleCardProps> = ({
               <div className="absolute right-0 z-20 mt-2 w-40 rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
                 {showEdit && isAdmin && (
                   <button
+                    type="button"
                     onClick={handleEdit}
                     className="block w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
                   >
@@ -110,6 +112,7 @@ const SingleModuleCard: React.FC<SingleModuleCardProps> = ({
                 )}
                 {isAdmin && (
                   <button
+                    type="button"
                     onClick={handleCreate}
                     className="block w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
                   >
@@ -118,6 +121,7 @@ const SingleModuleCard: React.FC<SingleModuleCardProps> = ({
                 )}
                 {isAdmin && (
                   <button
+                    type="button"
                     onClick={handleIssue}
                     className="block w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
                   >

frontend/src/components/SortBy.tsx

@@ -61,6 +61,7 @@ const SortBy = ({
           closeDelay={100}
         >
           <button
+            type="button"
             onClick={() => onOrderChange(selectedOrder === 'asc' ? 'desc' : 'asc')}
             className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 bg-gray-100 p-0 shadow-sm transition-all duration-200 hover:bg-gray-200 hover:shadow-md focus:ring-2 focus:ring-gray-300 focus:ring-offset-1 focus:outline-none dark:border-gray-600 dark:bg-[#323232] dark:hover:bg-[#404040] dark:focus:ring-gray-500"
             aria-label={

frontend/src/components/ToggleableList.tsx

@@ -38,6 +38,7 @@ const ToggleableList = ({
       <div className="flex flex-wrap gap-2">
         {(showAll ? items : items.slice(0, limit)).map((item) => (
           <button
+            type="button"
             key={item}
             className="rounded-lg border border-gray-400 px-3 py-1 text-sm hover:bg-gray-200 dark:border-gray-300 dark:hover:bg-gray-700"
             onClick={() => !isDisabled && handleButtonClick({ item })}

frontend/src/components/UserMenu.tsx

@@ -46,6 +46,7 @@ export default function UserMenu({
   if (status === 'unauthenticated') {
     return (
       <button
+        type="button"
         onClick={() => signIn('github', { callbackUrl: '/', prompt: 'login' })}
         className="group relative flex h-10 cursor-pointer items-center justify-center gap-2 rounded-md bg-[#87a1bc] p-4 text-sm font-medium text-black hover:ring-1 hover:ring-[#b0c7de] dark:bg-slate-900 dark:text-white dark:hover:bg-slate-900/90 dark:hover:ring-[#46576b]"
       >
@@ -66,6 +67,7 @@ export default function UserMenu({
   return (
     <div ref={dropdownRef} className="relative flex items-center justify-center">
       <button
+        type="button"
         onClick={() => setIsOpen((prev) => !prev)}
         aria-expanded={isOpen}
         aria-haspopup="true"
@@ -109,7 +111,7 @@ export default function UserMenu({
             </Link>
           )}
 
-          <button onClick={handleLogout} disabled={isLoggingOut} className={userMenuItemClasses}>
+          <button type="button" onClick={handleLogout} disabled={isLoggingOut} className={userMenuItemClasses}>
             {isLoggingOut ? 'Signing out...' : 'Sign out'}
           </button>
         </div>