diff --git a/app/globals.css b/app/globals.css
index 5a28f75..a68a6b2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -17,6 +17,8 @@ body {
   --glassmorphism-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
   --glassmorphism-gradient-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
   --glassmorphism-bg: rgba(255, 255, 255, 0.03);
+  --glassmorphism-bg-dark: rgba(0, 0, 0, 0.2);
+
   --glassmorphism-blur: 10px;
   --glassmorphism-border: rgba(255, 255, 255, 0.15);
 }
@@ -30,6 +32,15 @@ body {
   overflow: hidden;
   transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
 }
+.glassmorphism-dark{
+  background: var(--glassmorphism-gradient-hover), var(--glassmorphism-bg-dark);
+  backdrop-filter: blur(var(--glassmorphism-blur));
+  border: 1px solid var(--glassmorphism-border);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+  transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
+}
 .glassmorphism::before {
   content: "";
   position: absolute;
diff --git a/app/page.tsx b/app/page.tsx
index 99d21d8..da245e2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -236,7 +236,7 @@ function Home() {
           {periods.map((period) => (
             <button
               key={period}
-              className={`glassmorphism px-4 py-2 rounded ${selectedPeriod === period ? 'bg-black text-white' : 'bg-gray-700 text-gray-400'}`}
+              className={`px-4 py-2 rounded ${selectedPeriod === period ? 'bg-black text-white glassmorphism-dark' : 'bg-gray-700 text-gray-400 glassmorphism'}`}
               onClick={() => setSelectedPeriod(period)}
             >
               {period}
@@ -246,7 +246,7 @@ function Home() {
 
         <div className="w-full max-w-4xl">
           {leaderboardData.map((item) => (
-            <motion.div key="id" whileHover={{ scale: 1.1, transition: { duration: 0.2 } }}>
+            <motion.div key="id" whileHover={{ scale: 1.05, transition: { duration: 0.15 } }}>
               <div
                 key={item["id"]}
                 className={`leaderboard-card glassmorphism ${item["points"] >= 0 ? 'positive' : 'negative'} mx-auto mb-4`}