diff --git a/components/filter-sort-games.tsx b/components/filter-sort-games.tsx
index b1c574699ac1f9f274389fc48b9fb84d7d591d92..b7a736df69ec55a3524050442231e546493f1793 100644
--- a/components/filter-sort-games.tsx
+++ b/components/filter-sort-games.tsx
@@ -2,7 +2,7 @@
 
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { useLayoutEffect, useState } from "react";
 import { Icons } from "./icons";
 import { Button } from "./ui/button";
 import { Card } from "./ui/card";
@@ -36,7 +36,11 @@ export default function Sort() {
 
   const url = `${pathname}${queryParamString ? `${queryParamString}` : ''}`;
 
-  router.replace(url);
+  useLayoutEffect(() => {
+    if (queryParamString) {
+      router.replace(url);
+    }
+  }, [queryParamString, router, url]);
 
   function toggleSortOrder() {
     const newSortOrder = selectedSortOrder === 'desc' ? 'asc' : 'desc';
@@ -133,7 +137,7 @@ export default function Sort() {
             </SelectGroup>
           </SelectContent>
         </Select>
-        <Button variant="ghost" onClick={toggleSortOrder}>
+        <Button variant="ghost" onClick={() => toggleSortOrder}>
           <Icons.arrowdown className={`h-4 w-4 transition-all transform ${selectedSortOrder === 'asc' ? 'rotate-180' : ''}`} />
         </Button>
       </div>