diff --git a/src/app/(public)/_components/button.tsx b/src/app/(public)/_components/button.tsx
index f7590ce..4547cf7 100644
--- a/src/app/(public)/_components/button.tsx
+++ b/src/app/(public)/_components/button.tsx
@@ -14,7 +14,7 @@ export function Button({
     <div className="relative inline-block group w-fit">
       <button
         className={cn(
-          'bg-hacktoberfest-black m-1 hover:bg-hacktoberfest-dark-green btn btn-lg text-hacktoberfest-light rounded-2xl leading-none border-none',
+          'bg-hacktoberfest-black m-1 hover:bg-hacktoberfest-dark-green btn btn-md md:btn-lg text-hacktoberfest-light rounded-2xl leading-none border-none',
           className
         )}
         {...props}
diff --git a/src/app/(public)/repos/[language]/_components/sorter.tsx b/src/app/(public)/repos/[language]/_components/sorter.tsx
index d00ff11..aa5e9b3 100644
--- a/src/app/(public)/repos/[language]/_components/sorter.tsx
+++ b/src/app/(public)/repos/[language]/_components/sorter.tsx
@@ -117,7 +117,7 @@ export function Sorter() {
 
   return (
     <div className="flex items-center justify-center gap-2 mb-8">
-      <div className="dropdown dropdown-hover">
+      <div className="dropdown group dropdown-hover">
         <Button
           tabIndex={0}
           className="hover:bg-hacktoberfest-green hover:text-hacktoberfest-dark-green"
@@ -125,7 +125,7 @@ export function Sorter() {
           <Code className="w-6 h-6 mr-2" />
           Language
         </Button>
-        <div className="z-50 h-64 p-2 overflow-y-scroll shadow dropdown-content bg-base-100 rounded-box w-60">
+        <div className="z-50 h-64 p-2 overflow-y-scroll shadow dropdown-content hidden group-hover:block bg-base-100 rounded-box w-60">
           <ul tabIndex={0} className="menu menu-vertical">
             {mainLanguages.sort(sortByName).map(language => (
               <li key={language} onClick={handleClick}>
@@ -137,7 +137,7 @@ export function Sorter() {
           </ul>
         </div>
       </div>
-      <div className="dropdown dropdown-hover">
+      <div className="dropdown dropdown-hover group">
         <Button
           tabIndex={0}
           className="hover:bg-hacktoberfest-green hover:text-hacktoberfest-dark-green"
@@ -145,7 +145,7 @@ export function Sorter() {
           <ArrowUpAZ className="w-6 h-6 mr-2" />
           {selectedSort()}
         </Button>
-        <div className="z-50 h-64 p-2 overflow-y-scroll shadow dropdown-content bg-base-100 rounded-box w-60">
+        <div className="z-50 h-64 p-2 overflow-y-scroll shadow dropdown-content hidden group-hover:block -ml-16 bg-base-100 rounded-box w-60">
           <ul tabIndex={0} className="menu menu-vertical">
             {navigationItems.map((item, index) => {
               const sp = item.onSelect(new URLSearchParams(searchParams));
diff --git a/src/app/(public)/repos/[language]/page.tsx b/src/app/(public)/repos/[language]/page.tsx
index fb9da28..88cdbd4 100644
--- a/src/app/(public)/repos/[language]/page.tsx
+++ b/src/app/(public)/repos/[language]/page.tsx
@@ -144,7 +144,7 @@ async function getRepos(
 
 async function getReportedRepos() {
   const client = getXataClient();
-  const reports = await client.db.reports
+  const reports = await client.db.reports 
     .select(['repoId'])
     .filter({ valid: false })
     .getMany();
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index fb40439..0044ba9 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -8,7 +8,7 @@ const formatter = new Intl.ListFormat('en', {
 
 export function Footer() {
   return (
-    <footer className="text-center text-white py-4 text-lg border-t-[0.5px] border-dashed border-t-hacktoberfest-light-green">
+    <footer className="text-center pb-10 text-white py-4 text-lg border-t-[0.5px] border-dashed border-t-hacktoberfest-light-green">
       <div className="container px-4 mx-auto">
         <Link href="/contributors">
           Made with <span className="text-red-500">💗</span> by{' '}