diff --git a/app/callout.tsx b/app/callout.tsx
index 07af226..28dc924 100644
--- a/app/callout.tsx
+++ b/app/callout.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
 
-const CalloutModal = ({ isOpen, onClose, item, onSubmit }) => {
+const CalloutModal = ({ isOpen, onClose, onSubmit }) => {
   const [tokenId, setTokenId] = useState('');
 
   const handleTokenChange = (e) => {
diff --git a/app/globals.css b/app/globals.css
index 7d4081c..5a28f75 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -60,13 +60,11 @@ body {
   justify-content: center; /* Center vertically */
   align-items: center; /* Center horizontally */
   position: relative;
-  transition:{duration:1}
 
 }
 
 .leaderboard-card:hover{
   background: var(--glassmorphism-gradient-hover), var(--glassmorphism-bg);
-  transition:{duration:1}
 
 }
 
diff --git a/app/modal.tsx b/app/modal.tsx
index 831afa7..ba23fc5 100644
--- a/app/modal.tsx
+++ b/app/modal.tsx
@@ -1,11 +1,15 @@
-// Modal.js
-
-import React, { useEffect,useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 
-const Modal = ({ isOpen, onClose, item }) => {
+interface Detail {
+  token: string;
+  gains: number;
+  price_at_creation: number;
+  price_now: number;
+}
 
-  const [details, setDetails] = useState(null);
+const Modal: React.FC<{ isOpen: boolean; onClose: () => void; item: { username: string; points: number } }> = ({ isOpen, onClose, item }) => {
+  const [details, setDetails] = useState<Detail[] | null>(null); // Specify null as the initial type
 
   useEffect(() => {
     if (isOpen && item) {
@@ -32,46 +36,46 @@ const Modal = ({ isOpen, onClose, item }) => {
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }} className="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none modal-bg" onClick={onClose}>
+      exit={{ opacity: 0 }}
+      className="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none modal-bg"
+      onClick={onClose}
+    >
       <div className="relative w-auto max-w-3xl mx-auto my-6 modal">
-        {/* Modal content */}
         <div className="relative flex flex-col border-0 rounded-lg shadow-lg outline-none focus:outline-none">
-          {/* Header */}
           <div className="flex items-start justify-between p-5 border-b border-solid rounded-t border-blueGray-200">
             <h3 className="text-3xl font-semibold">{item.username}s Callouts</h3>
-            {/* <button
-              className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
-              onClick={onClose}
-            > 
-              <span className="bg-transparent text-black h-6 w-6 text-2xl block outline-none focus:outline-none">×</span>
-            </button>*/}
-          </div>
-          {/* Body */}
-          <div className="relative p-6 flex-auto">
-            <p className={`my-4 text-blueGray-500 text-2xl font-bold leading-relaxed ${
-            parseFloat(item.points) > 0 ? 'text-green-500' : 'text-red-500'
-          }`}>Total Gains : {parseFloat(item.points).toFixed(2)} x</p>
           </div>
           <div className="relative p-6 flex-auto">
-  {details != null ? (
-    <div>
-      {details.map((detail) => (
-        <p
-          key={detail.token}
-          className={`my-4 text-lg leading-relaxed ${
-            parseFloat(detail.gains) > 0 ? 'text-green-500' : 'text-red-400'
-          }`}
-        >
-          {detail.token}: {parseFloat(detail.gains).toFixed(2)}x  [
-          {parseFloat(detail.price_at_creation).toFixed(8) + ' => ' + parseFloat(detail.price_now).toFixed(8)}]
-        </p>
-      ))}
-    </div>
-  ) : (
-    <p>Loading...</p>
-  )}
-</div>
-
+            <p
+              className={`my-4 text-blueGray-500 text-2xl font-bold leading-relaxed ${
+                item.points > 0 ? 'text-green-500' : 'text-red-500'
+              }`}
+            >
+              Total Gains : {item.points.toFixed(2)} x
+            </p>
+          </div>
+          <div className="relative p-6 flex-auto">
+            {details !== null ? (
+              <div>
+                {details.map((detail) => (
+                  <p
+                    key={detail.token}
+                    className={`my-4 text-lg leading-relaxed ${
+                      detail.gains > 0 ? 'text-green-500' : 'text-red-400'
+                    }`}
+                  >
+                    {detail.token}: {detail.gains.toFixed(2)}x [
+                    {detail.price_at_creation.toFixed(8) +
+                      ' => ' +
+                      detail.price_now.toFixed(8)}
+                    ]
+                  </p>
+                ))}
+              </div>
+            ) : (
+              <p>Loading...</p>
+            )}
+          </div>
         </div>
       </div>
     </motion.div>
diff --git a/app/page.tsx b/app/page.tsx
index 256d260..3631262 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -245,7 +245,7 @@ function Home() {
         </div>
       </div>
       {/* Modal */}
-      <Modal isOpen={modalOpen} onClose={closeModal} item={selectedItem} />
+      <Modal isOpen={modalOpen} onClose={closeModal} item={selectedItem ?? {username:"", points:2}} />
       <CalloutModal isOpen={newCallModalOpen} onClose={closeNewCallModal} onSubmit={handleNewCallSubmit} />
 
       {/* Rest of your Home component */}