diff --git a/app/wiki/heroes/layout.tsx b/app/wiki/heroes/layout.tsx
new file mode 100644
index 00000000..2c468d53
--- /dev/null
+++ b/app/wiki/heroes/layout.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { TabsContent } from "@/components/shared/tabs";
+
+async function HeroesPage({ children }: { children: React.ReactNode }) {
+  return (
+    <TabsContent
+      value="heroes"
+      className="flex w-full flex-col gap-4 md:flex-row"
+    >
+      {children}
+    </TabsContent>
+  );
+}
+
+export default HeroesPage;
diff --git a/app/wiki/heroes/page.tsx b/app/wiki/heroes/page.tsx
index a62e721b..b173012b 100644
--- a/app/wiki/heroes/page.tsx
+++ b/app/wiki/heroes/page.tsx
@@ -1,5 +1,7 @@
 import getHeroes from "@/lib/actions/getHeroes";
-import { TabsContent } from "@/components/shared/tabs";
+import { GradiantCard } from "@/components/shared/gradiant-card";
+import HeroFilter from "@/components/hero-filter";
+import HeroSearch from "@/components/hero-search";
 import HeroesContainer from "@/components/wiki/heroes/heroes-container";
 import { Metadata } from "next";
 import { defaultOpenGraphMD, defaultTwitterMD } from "@/lib/configs/metadata";
@@ -34,12 +36,16 @@ async function HeroesPage({
   });
 
   return (
-    <TabsContent
-      value="heroes"
-      className="flex w-full flex-col gap-5 md:flex-row"
-    >
+    <>
+      <GradiantCard
+        className="flex h-fit w-full flex-col-reverse gap-4 px-6 md:sticky md:top-20 md:w-[220px] md:flex-col"
+        variant="clean"
+      >
+        <HeroSearch />
+        <HeroFilter orientation="vertical" />
+      </GradiantCard>
       <HeroesContainer heroes={heroes} query={searchParams} />
-    </TabsContent>
+    </>
   );
 }
 
diff --git a/components/wiki/heroes/heroes-container.tsx b/components/wiki/heroes/heroes-container.tsx
index cbf1731a..f1e155eb 100644
--- a/components/wiki/heroes/heroes-container.tsx
+++ b/components/wiki/heroes/heroes-container.tsx
@@ -1,15 +1,10 @@
 "use client";
 
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { useRouter } from "next/navigation";
 import { HeroesDocument } from "@/lib/mongoose/schema/heroes";
-import HeroFilter from "@/components/hero-filter";
-import HeroSearch from "@/components/hero-search";
 import HeroCard from "./hero-card";
-import { GradiantCard } from "@/components/shared/gradiant-card";
 import { Query } from "@/lib/types";
-import { cn } from "@/lib/utils";
-
 interface IHeroesContainer {
   heroes: HeroesDocument[];
   query: Query;
@@ -18,7 +13,7 @@ interface IHeroesContainer {
 const HeroesContainer = ({ heroes, query }: IHeroesContainer) => {
   const router = useRouter();
 
-  const filteredHeroes = useMemo(() => {
+  const filteredHeroes = React.useMemo(() => {
     if (!query) return heroes;
 
     const { q, type, lane } = query;
@@ -53,19 +48,6 @@ const HeroesContainer = ({ heroes, query }: IHeroesContainer) => {
 
   return (
     <>
-      <div className="space-y-4 md:w-[200px]">
-        <HeroSearch />
-        <GradiantCard
-          variant="default"
-          className={cn(
-            "w-full p-2"
-            // "border border-cloud/10 bg-cloud/5"
-          )}
-        >
-          <HeroFilter orientation="vertical" />
-        </GradiantCard>
-      </div>
-
       {filteredHeroes.length > 0 ? (
         <div className="grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7">
           {filteredHeroes.map((hero) => (
diff --git a/components/wiki/statistics/tournaments-popover.tsx b/components/wiki/statistics/tournaments-popover.tsx
index 0384bc9f..db248554 100644
--- a/components/wiki/statistics/tournaments-popover.tsx
+++ b/components/wiki/statistics/tournaments-popover.tsx
@@ -42,7 +42,7 @@ export default function StatsContainer({ children, tourNames }: IStats) {
             <PopoverTrigger asChild>
               <Button
                 variant="outline"
-                className="w-full max-w-md justify-start overflow-hidden text-ellipsis whitespace-nowrap border-cloud/10 text-sm font-semibold data-[state=open]:bg-cloud/10"
+                className="flex h-10 w-full max-w-md justify-start rounded-lg border border-cloud/10 bg-cloud/5 px-3 py-2 text-sm backdrop-blur-lg focus:outline-none focus:ring-1 focus:ring-cloud/30 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:bg-cloud/10"
               >
                 <span className="block overflow-hidden text-ellipsis whitespace-nowrap">
                   {selectedTournament