diff --git a/app/globals.css b/app/globals.css
index 91f55f0..60d3b68 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,4 +1,79 @@
+body {
+  background-image: url('../public/black_back.jpg'); /* Path relative to the public directory */
+  background-size: cover; /* Cover the entire viewport */
+  background-position: center; /* Center the background image */
+  background-repeat: no-repeat; /* Do not repeat the image */
+}
+
 @tailwind base;
   @tailwind components;
   @tailwind utilities;
-  
\ No newline at end of file
+  
+
+/* Add this CSS to your global styles or a relevant CSS file */
+
+:root {
+  
+  --glassmorphism-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
+  --glassmorphism-bg: rgba(255, 255, 255, 0.1);
+  --glassmorphism-blur: 10px;
+  --glassmorphism-border: rgba(255, 255, 255, 0.15);
+}
+
+.glassmorphism {
+  background: var(--glassmorphism-gradient), var(--glassmorphism-bg);
+  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; /* Ensure noise texture covers the entire element */
+}
+.glassmorphism::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('../public/acrylic.jpg');
+  -webkit-backdrop-filter: blur(50px);
+  backdrop-filter: blur(50px);
+  background-repeat: repeat;
+  opacity: 0.01;
+  pointer-events: none;
+}
+
+/* globals.css or your relevant CSS file */
+.leaderboard-card {
+  background: var(--glassmorphism-gradient), var(--glassmorphism-bg);
+  backdrop-filter: blur(var(--glassmorphism-blur));
+  border: 1px solid var(--glassmorphism-border);
+  margin-bottom: 1rem;
+  padding: 1rem;
+  width: 100%;
+  max-width: 400px;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center; /* Center vertically */
+  align-items: center; /* Center horizontally */
+  position: relative;
+}
+
+
+.leaderboard-card.positive {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 255, 0, 0.1), 1px 1px 1px rgba(0,255,0,0.3), -1px -1px 1px rgba(100,255,100,0.15);
+}
+
+.leaderboard-card.negative {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 50px rgba(255, 0, 0, 0.05), 1px 1px 1px rgba(255,0,0,0.3), -1px -1px 1px rgba(255,100,100,0.15);
+}
+
+.leaderboard-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center horizontally */
+  justify-content: center; /* Center vertically */
+  width: 100%;
+  position:relative; /* Adjust padding as needed */
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 699e58a..b7cbc1c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,7 +4,7 @@ import React, { useState, useEffect } from "react";
 import { SunIcon, MoonIcon } from "@heroicons/react/solid";
 import { PrivyProvider, usePrivy } from "@privy-io/react-auth";
 import { FaTwitter, FaWallet } from "react-icons/fa";
-import { CheckIcon } from "@heroicons/react/outline"; // For the check mark icon
+import { CheckIcon } from "@heroicons/react/outline";
 
 // Helper functions to generate pseudo data
 const generateRandomName = () => {
@@ -27,7 +27,9 @@ function Home() {
   const [twitterConnected, setTwitterConnected] = useState(false); // State to track Twitter connection
   const [walletConnected, setWalletConnected] = useState(false); // State to track Wallet connection
   const [incrementNumber, setIncrementNumber] = useState(1);
-  const[leaderboardData, setLeaderboardData] = useState([]);
+  const [leaderboardData, setLeaderboardData] = useState([]);
+  const [isJoined, setIsJoined] = useState(false);
+
   useEffect(() => {
     if (darkMode) {
       document.documentElement.classList.add("dark");
@@ -86,64 +88,89 @@ function Home() {
   }, [ready, user]);
 
   return (
-    <main className={`flex flex-col min-h-screen items-center justify-between ${darkMode ? "bg-gray-900 text-white" : "bg-white text-black"}`}>
-      <header className="w-full flex justify-between items-center p-4 bg-gray-800 text-white">
-  <h1 className="text-xl font-bold">CallFi</h1>
-  <div className="flex items-center">
-    <button onClick={toggleDarkMode} className="bg-gray-700 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded mr-2">
-      {darkMode ? <SunIcon className="h-5 w-5 text-white" /> : <MoonIcon className="h-5 w-5 text-white" />}
-    </button>
-    {ready && user ? (
-      <div className="flex items-center bg-white bg-opacity-20 rounded-full px-4 py-2">
-        
-          <button className={`relative ${twitterConnected ? "bg-black" : "bg-gray-700"} hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full mr-2`} onClick={linkTwitter}>
-            <FaTwitter className="h-5 w-5 text-white" />
-            {twitterConnected && (
-              <CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
-            )}
-          </button>
-          <button className={`relative ${walletConnected ? "bg-black" : "bg-gray-700"} hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full mr-2` } onClick={linkWallet}>
-            <FaWallet className="h-5 w-5 text-white" />
-            {walletConnected && (
-              <CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
-            )}
-          </button>
-        
-          <button onClick={logout} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
-            Logout
-          </button>
-      </div>
-    ):
-    !ready ? (
-      <p>Loading...</p>
-    ) : <button onClick={login} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
-    Login
-  </button>
- } </div>
-</header>
+    // ${darkMode ? "bg-black text-white" : "bg-white text-black"}
+    <main className={`flex flex-col min-h-screen items-center justify-between text-white`}>
+      <header className="w-full flex justify-between items-center p-4 bg-gray-800 text-white glassmorphism">
+        <h1 className="text-xl font-bold">CallFi</h1>
+        <div className="flex items-center">
 
-      <div className="flex-grow flex flex-col items-center justify-center w-full p-4">
-        <h2 className="text-2xl font-bold mb-4">Leaderboard </h2>
+          {ready && user ? (
+            <div className="flex items-center bg-white bg-opacity-20 rounded-full px-4 py-2 glassmorphism">
+              <button className={`relative ${twitterConnected ? "bg-black" : "bg-gray-700"} hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full mr-2 glassmorphism`} onClick={linkTwitter}>
+                <FaTwitter className="h-5 w-5 text-white" />
+                {twitterConnected && (
+                  <CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
+                )}
+              </button>
+              <button className={`relative ${walletConnected ? "bg-black" : "bg-gray-700"} hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full mr-2 glassmorphism`} onClick={linkWallet}>
+                <FaWallet className="h-5 w-5 text-white" />
+                {walletConnected && (
+                  <CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
+                )}
+              </button>
+              <button onClick={logout} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded glassmorphism">
+                Logout
+              </button>
+            </div>
+          ) : !ready ? (
+            <p>Loading...</p>
+          ) : (
+            <button onClick={login} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism">
+              Login
+            </button>
+          )}
+        </div>
+      </header>
+      {/* Note card */}
+      {
+        ready && user?.twitter &&(
+          <div className="note-card-container w-full p-4 flex flex-col items-center justify-center">
+            <div className="note-card glassmorphism mb-4 p-4 text-center rounded-lg px-20 py-5">
+              <h2 className="text-2xl font-bold mb-2">Join the Leaderboard</h2>
+              <p className="text-lg mb-4">Get on the leaderboard by posting a tweet!</p>
+              <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism">
+                <a href="https://x.com/intent/post?text=I%27m+gonna+be+on+the+%23CallFi+leaderboards%21+Come+check+me+out+and+take+part+in+their+test%21+%0A%0Atest.callfi.io">Get Started</a>
+              </button>
+            </div>
+          </div>
+        )
+      }
+      {
+        ready && !user?.twitter && (
+          <div className="note-card-container w-full p-4 flex flex-col items-center justify-center">
+            <div className="note-card glassmorphism mb-4 p-4 text-center rounded-lg px-20 py-5">
+              <h2 className="text-2xl font-bold mb-2">Join the Leaderboard</h2>
+              <p className="text-lg mb-4">Start by linking your Twitter account!</p>
+              {user ? (
+                <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism" onClick={linkTwitter}>
+                <a>Link X</a>
+              </button>
+              ) : (
+                <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism" onClick={login}>
+                <a>Login</a>
+              </button>
+              )}
+              
+              
+            </div>
+          </div>
+        )
+      }
+
+
+      {/* Leaderboard */}
+      <div className="w-full p-4 flex flex-col items-center justify-center">
         <div className="w-full max-w-4xl">
-          <table className={`min-w-full rounded-lg overflow-hidden shadow-lg ${darkMode ? "bg-gray-800" : "bg-white"}`}>
-            <thead className={`bg-gray-800 text-white`}>
-              <tr>
-                <th className="py-2 px-4">Name</th>
-                <th className="py-2 px-4">Points</th>
-              </tr>
-            </thead>
-            <tbody>
-            {leaderboardData.map((item, index) => (
-                <tr key={item["id"]} className={`${index % 2 === 0 ? (darkMode ? "bg-gray-700" : "bg-gray-100") : (darkMode ? "bg-gray-600" : "bg-gray-200")}`}>
-                  <td className="py-2 px-4 text-center">{item["username"]}</td>
-                  <td className="py-2 px-4 text-center">{parseFloat(item["points"]).toFixed(2)}x</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+          {leaderboardData.map((item) => (
+            <div key={item["id"]} className={`leaderboard-card glassmorphism ${item["points"] >= 0 ? 'positive' : 'negative'} mx-auto mb-4`}>
+              <p className="text-center font-bold">{item["username"]}</p>
+              <p className="text-center">{parseFloat(item["points"]).toFixed(2)}x</p>
+            </div>
+          ))}
         </div>
       </div>
-      <footer className="w-full p-4 bg-gray-800 text-white text-center">
+
+      <footer className="w-full p-4 bg-gray-800 text-white text-center glassmorphism">
         <p>&copy; 2024 CallFi. All rights reserved.</p>
       </footer>
     </main>
diff --git a/public/acrylic.jpg b/public/acrylic.jpg
new file mode 100644
index 0000000..ec99d9f
Binary files /dev/null and b/public/acrylic.jpg differ
diff --git a/public/black_back.jpg b/public/black_back.jpg
new file mode 100644
index 0000000..bf9f6f7
Binary files /dev/null and b/public/black_back.jpg differ
diff --git a/public/noise.png b/public/noise.png
new file mode 100644
index 0000000..dfd44e1
Binary files /dev/null and b/public/noise.png differ
diff --git a/public/white-noise-screen.png b/public/white-noise-screen.png
new file mode 100644
index 0000000..b62b40c
Binary files /dev/null and b/public/white-noise-screen.png differ