diff --git a/app/modal.tsx b/app/modal.tsx
index 9d1366c..b6e4c51 100644
--- a/app/modal.tsx
+++ b/app/modal.tsx
@@ -49,7 +49,14 @@ const Modal: React.FC<{ isOpen: boolean; onClose: () => void; item: { username:
       <div className="relative w-auto max-w-3xl mx-auto my-6 modal">
         <div className="relative flex flex-col border-0 rounded-lg shadow-lg outline-none focus:outline-none">
           <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>
+          <div className="flex items-center">
+              <img
+                src={item["img_url"]} // Assuming img_url is a valid image URL
+                alt={`${item.username}'s profile`}
+                className="w-12 h-12 rounded-full mr-4"
+              />
+              <h3 className="text-3xl font-semibold">{item.username}s Callouts</h3>
+            </div>
           </div>
           <div className="relative p-6 flex-auto">
             <p
diff --git a/app/page.tsx b/app/page.tsx
index 32bd60c..72a3fbb 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
+import Link from 'next/link';
 import { SunIcon, MoonIcon } from "@heroicons/react/solid";
 import { PrivyProvider, usePrivy } from "@privy-io/react-auth";
 import { FaTwitter, FaWallet } from "react-icons/fa";
@@ -8,6 +9,7 @@ import { CheckIcon } from "@heroicons/react/outline";
 import Modal from './modal';
 import CalloutModal from './callout';
 import { motion } from 'framer-motion';
+import UserDetailModal from "@/components/UserDetailsModal";
 
 // Helper functions to generate pseudo data
 const generateRandomName = () => {
@@ -24,7 +26,7 @@ const generateRandomPoint = () => {
   return Math.floor(Math.random() * (100 - 10 + 1)) + 10;
 };
 
-function Home() {
+const Home: React.FC = () => {
   const [modalOpen, setModalOpen] = useState(false);
   const { login, user, ready, logout, linkTwitter, unlinkTwitter, linkWallet, unlinkWallet } = usePrivy();
   const [darkMode, setDarkMode] = useState(true);
@@ -35,6 +37,7 @@ function Home() {
   const [isJoined, setIsJoined] = useState(false);
   const [selectedItem, setSelectedItem] = useState(null);
   const [newCallModalOpen, setNewCallModalOpen] = useState(false);
+  const [userDetailModalOpen, setUserDetailModalOpen] = useState(false);
   const [selectedPeriod, setSelectedPeriod] = useState('All Time');
 
   const periods = ['All Time', 'Weekly', 'Monthly'];
@@ -59,6 +62,20 @@ function Home() {
     setNewCallModalOpen(false);
   };
 
+  // Function to handle opening user detail modal
+  const openUserDetailModal = (username) => {
+    setUserDetailModalOpen(true);
+    setTimeout(() => {
+      setModalOpen(false);
+      // Additional logic if needed to fetch user details
+    }, 10);
+  };
+
+  // Function to handle closing user detail modal
+  const closeUserDetailModal = () => {
+    setUserDetailModalOpen(false);
+  };
+
   const handleNewCallSubmit = (tokenId, tokenContract, tokenName) => {
     let twitterIntentURL = `https://x.com/intent/tweet?text=%24${tokenId}%20is%20Booming%20rn%21%20See%20ya%20on%20the%20moon%21%0A%0A%23CallFi%20%23CallingIt`;
     if(tokenContract.length >0){
@@ -162,7 +179,13 @@ function Home() {
   return (
     <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">
+          <h1 className="text-xl font-bold px-10">CallFi</h1>
+        <nav className="flex space-x-4 hidden">
+            <Link href="/users">
+              <p className="text-white hover:underline">User Ranking</p>            
+            </Link>
+        </nav></div>
         <div className="flex items-center">
           {ready && user ? (
             <div className="flex items-center bg-white bg-opacity-20 rounded-full px-4 py-2 glassmorphism">
@@ -262,7 +285,7 @@ function Home() {
                     className="w-12 h-12 rounded-full mr-4"
                   />
                   <div>
-                    <p className="text-center font-bold">{item["username"]}</p>
+                    <p className="text-center font-bold" onClick={()=>openUserDetailModal(item["username"])}>{item["username"]}</p>
                     <p className="text-center">{parseFloat(item["points"]).toFixed(2)}x</p>
                   </div>
                 </div>
@@ -274,6 +297,7 @@ function Home() {
 
       <Modal isOpen={modalOpen} onClose={closeModal} item={selectedItem ?? { username: "", points: 2 }} period={selectedPeriod} />
       <CalloutModal isOpen={newCallModalOpen} onClose={closeNewCallModal} onSubmit={handleNewCallSubmit} />
+      <UserDetailModal isOpen={userDetailModalOpen} onClose={closeUserDetailModal} user={selectedItem ?? {username:""}} />
 
       <footer className="w-full p-4 bg-gray-800 text-white text-center glassmorphism">
         <p>&copy; 2024 CallFi. All rights reserved.</p>
diff --git a/components/UserDetailsModal.tsx b/components/UserDetailsModal.tsx
new file mode 100644
index 0000000..8502ad7
--- /dev/null
+++ b/components/UserDetailsModal.tsx
@@ -0,0 +1,54 @@
+// components/UserDetailModal.tsx
+
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface UserDetailModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  user: any;
+}
+
+const UserDetailModal: React.FC<UserDetailModalProps> = ({ isOpen, onClose, user }) => {
+  if (!isOpen) return null;
+
+  return (
+    <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}
+    >
+      <div className="relative w-auto max-w-3xl mx-auto my-6 modal">
+        <div className="relative flex flex-col border-0 rounded-lg shadow-lg outline-none focus:outline-none">
+          <div className="flex items-start justify-between p-5 border-b border-solid rounded-t border-blueGray-200">
+          <div className="flex items-center">
+              <img
+                src={user["img_url"]} // Assuming img_url is a valid image URL
+                alt={`${user.username}'s profile`}
+                className="w-12 h-12 rounded-full mr-4"
+              />
+              <h3 className="text-3xl font-semibold">{user.username}</h3>
+            </div>
+            <button
+              className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
+              onClick={onClose}
+            >
+              <span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">×</span>
+            </button>
+          </div>
+          <div className="relative p-6 flex-auto">
+            <div>
+              <p>Email: {user.email}</p>
+              <p>Points: {user.points}</p>
+              {/* Add more details as needed */}
+            </div>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default UserDetailModal;