diff --git a/src/components/LeaderboardTotals.module.css b/src/components/LeaderboardTotals.module.css
index 35e21fe..1ab8d92 100644
--- a/src/components/LeaderboardTotals.module.css
+++ b/src/components/LeaderboardTotals.module.css
@@ -1,67 +1,36 @@
-.number {
-    position: relative;
-    line-height: 32px;
-    font-weight: 600;
-}
-
-.text {
+.frameParent {
+    width: 100%;
     position: relative;
-    line-height: 22px;
-    font-weight: 600;
-}
-
-.button {
-    width: 110px;
-    border-radius: 0.875rem;
-    background-color: #E8E3D500;
-    height: 38px;
-    overflow: hidden;
-    flex-shrink: 0;
+    border-radius: 14px;
+    background: linear-gradient(180deg, #f98c13, #ffaf03);
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 14px;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 18px;
     box-sizing: border-box;
-    max-width: 600px;
-    transition: background-color 0.2s ease;
-    color: #9B8D7D;
+    text-align: left;
+    font-size: 24px;
+    color: #fff;
+    font-family: 'SF Compact Rounded';
 }
 
-.button1 {
-    width: 110px;
-    border-radius: 0.875rem;
-    background-color: rgba(232, 227, 213, 0);
-    height: 38px;
-    overflow: hidden;
-    flex-shrink: 0;
+.instanceParent {
+    align-self: stretch;
     display: flex;
     flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 14px;
-    box-sizing: border-box;
-    max-width: 600px;
-    cursor: pointer;
-    color: #9B8D7D;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 24px;
 }
 
-.buttonParent {
-    border-radius: 0.875rem;
-    background-color: #e8e3d6;
-    overflow: hidden;
+.numberAndBadgeParent {
     display: flex;
-    flex-direction: row;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
     justify-content: flex-start;
 }
 
-.number1 {
-    position: relative;
-    line-height: 32px;
-    font-weight: 600;
-}
-
 .numberAndBadge {
     align-self: stretch;
     display: flex;
@@ -70,11 +39,11 @@
     justify-content: flex-start;
 }
 
-.heading {
+.number {
     position: relative;
-    line-height: 140%;
-    text-transform: uppercase;
+    line-height: 32px;
     font-weight: 600;
+    font-size: 34px;
 }
 
 .headingWrapper {
@@ -88,167 +57,20 @@
     font-family: 'Open Runde';
 }
 
-.numberAndBadgeParent {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-}
-
-.container {
-    width: 100%;
-    max-width: 100%;
-    position: relative;
-    border-radius: 14px;
-    background: linear-gradient(180deg, #f98c13, #ffaf03);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: 18px 24px;
-    box-sizing: border-box;
-    text-align: left;
-    font-size: 24px;
-    color: #ffffff;
-    gap: 12px;
-    font-family: var(--font-family-base);
-}
-
-.numberParent {
-    width: 100%;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    padding: 8px 24px;
-    box-sizing: border-box;
-    gap: 24px;
-    text-align: left;
-    font-size: 34px;
-    color: #242424;
-    font-family: var(--font-family-base);
-}
-
-.container {
-    max-width: 1200px;
-    padding: 18px;
-}
-
-.statsGrid {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-    gap: 24px;
-    width: 100%;
-}
-
-.statCard {
-    width: 100%;
+.heading {
     position: relative;
-    border-radius: 14px;
-    background: linear-gradient(180deg, #f98c13, #ffaf03);
-    padding: 18px;
-    box-sizing: border-box;
-}
-
-/* Add these classes to your existing CSS file */
-.table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 20px 0;
-    background: linear-gradient(180deg, #f98c13, #ffaf03);
-    border-radius: 14px;
-    overflow: hidden;
-}
-
-.table th,
-.table td {
-    padding: 18px;
-    text-align: left;
-    border: none;
-    color: #fff;
-    font-family: var(--font-family-base);
-}
-
-.table th {
-    font-size: 12px;
-    font-weight: 600;
+    line-height: 140%;
     text-transform: uppercase;
-    color: #fff;
-    background: transparent;
-    font-family: var(--font-family-base);
-}
-
-.table td {
-    font-size: 24px;
     font-weight: 600;
 }
 
-.table tr:nth-child(even) {
-    background-color: #f9f9f9;
-}
-
-
-/* Add responsive behavior */
 @media (max-width: 768px) {
-    .statsGrid {
-        flex-direction: column;
-    }
-    .table {
-        display: block;
-        overflow-x: auto;
-    }
-    .container {
-        padding: 12px;
+    .instanceParent {
+        flex-direction: row;
+        gap: 4px;
     }
-}
-
-.statsContainer {
-    width: 100%;
-    margin: 0 auto;
-    background: linear-gradient(180deg, #f98c13, #ffaf03);
-    border-radius: 14px;
-    padding: 18px 24px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    gap: 4px;
-    box-sizing: border-box;
-    overflow: hidden;
-}
 
-.statItem {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    white-space: nowrap;
-}
-
-.statValue {
-    font-family: 'SF Compact Rounded', -apple-system, BlinkMacSystemFont, sans-serif;
-    font-size: 24px;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 1);
-    line-height: 32px;
-}
-
-.statLabel {
-    font-family: 'SF Compact Rounded', -apple-system, BlinkMacSystemFont, sans-serif;
-    font-size: 12px;
-    font-weight: 500;
-    color: rgba(255, 255, 255, 0.7);
-    line-height: 17px;
-    letter-spacing: 0.5px;
-}
-
-@media (max-width: 768px) {
-    .statsContainer {
-        flex-direction: column;
-        gap: 24px;
-        padding: 18px 24px;
+    .frameParent {
+        padding: 16px;
     }
 }
diff --git a/src/components/LeaderboardTotals.tsx b/src/components/LeaderboardTotals.tsx
index e1414f4..97a5e0a 100644
--- a/src/components/LeaderboardTotals.tsx
+++ b/src/components/LeaderboardTotals.tsx
@@ -14,9 +14,8 @@ interface DashboardData {
   }[];
 }
 
-// Add AI16Z token constant
 const AI16Z_ADDRESS = 'HeLp6NuQkmYB4pYWo2zYs22mESHXPQYzXbB8n4V98jwC';
-const DECIMALS = 1_000_000_000; // 9 decimals for Solana tokens
+const DECIMALS = 1_000_000_000;
 
 const LeaderboardTotals: NextPage = () => {
   const [data, setData] = useState<DashboardData | null>(null);
@@ -27,9 +26,7 @@ const LeaderboardTotals: NextPage = () => {
     const fetchData = async () => {
       try {
         const response = await fetch('/api/dashboard');
-        if (!response.ok) {
-          throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
-        }
+        if (!response.ok) throw new Error('Failed to fetch data');
         const result = await response.json();
         setData(result);
       } catch (err) {
@@ -51,39 +48,49 @@ const LeaderboardTotals: NextPage = () => {
 
     const totalPartners = data.partners.length;
     const helpPrice = data.prices.find(p => p.address === AI16Z_ADDRESS)?.usdPrice || 0;
-    const totalWorth = data.partners.reduce((sum, partner) => {
-      return sum + partner.amount * helpPrice;
-    }, 0);
+    const totalWorth = data.partners.reduce((sum, partner) => sum + partner.amount * helpPrice, 0);
+    const newPartners = data.partners.filter(partner => 
+      new Date(partner.createdAt) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
+    ).length;
 
-    return {
-      totalPartners,
-      totalWorth,
-      newPartners: data.partners.filter(partner => 
-        new Date(partner.createdAt) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
-      ).length
-    };
+    return { totalPartners, totalWorth, newPartners };
   };
 
-  if (isLoading) return <div className={styles.loading}>Loading...</div>;
-  if (error) return <div className={styles.error}>Error: {error}</div>;
+  const renderMetric = (value: string | number, label: string) => (
+    <div className={styles.numberAndBadgeParent}>
+      <div className={styles.numberAndBadge}>
+        <div className={styles.number}>{value}</div>
+      </div>
+      <div className={styles.headingWrapper}>
+        <div className={styles.heading}>{label}</div>
+      </div>
+    </div>
+  );
 
   const metrics = calculateMetrics();
 
   return (
-    <div className={styles.statsContainer}>
-      <div className={styles.statItem}>
-        <div className={styles.statValue}>{metrics.totalPartners.toLocaleString()}</div>
-        <div className={styles.statLabel}>PARTNERS</div>
-      </div>
-      <div className={styles.statItem}>
-        <div className={styles.statValue}>
-          ${(metrics.totalWorth / 1000000).toFixed(2)}m
-        </div>
-        <div className={styles.statLabel}>TOTAL WORTH</div>
-      </div>
-      <div className={styles.statItem}>
-        <div className={styles.statValue}>+{metrics.newPartners.toLocaleString()}</div>
-        <div className={styles.statLabel}>NEW PARTNERS (7D)</div>
+    <div className={styles.frameParent}>
+      <div className={styles.instanceParent}>
+        {isLoading ? (
+          <>
+            {renderMetric(<div className="animate-pulse bg-gray-300 h-8 w-24 rounded" />, 'PARTNERS')}
+            {renderMetric(<div className="animate-pulse bg-gray-300 h-8 w-24 rounded" />, 'TOTAL WORTH')}
+            {renderMetric(<div className="animate-pulse bg-gray-300 h-8 w-24 rounded" />, 'NEW PARTNERS (7D)')}
+          </>
+        ) : error ? (
+          <>
+            {renderMetric('-', 'PARTNERS')}
+            {renderMetric('-', 'TOTAL WORTH')}
+            {renderMetric('-', 'NEW PARTNERS (7D)')}
+          </>
+        ) : (
+          <>
+            {renderMetric(metrics.totalPartners.toLocaleString(), 'PARTNERS')}
+            {renderMetric(`$${(metrics.totalWorth / 1000000).toFixed(2)}m`, 'TOTAL WORTH')}
+            {renderMetric(`+${metrics.newPartners}`, 'NEW PARTNERS (7D)')}
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/ProfileTotals.module.css b/src/components/ProfileTotals.module.css
index 00af56d..ac05669 100644
--- a/src/components/ProfileTotals.module.css
+++ b/src/components/ProfileTotals.module.css
@@ -272,6 +272,14 @@
     justify-content: center;
 }
 
+.metricText {
+    font-size: 34px;
+    line-height: 42px;
+    font-weight: 600;
+    font-family: 'SF Compact Rounded';
+    color: #FFFFFF;
+}
+
 .tooltip {
     visibility: hidden;
     position: absolute;
@@ -306,9 +314,3 @@
     border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
 }
 
-.trustScoreImage {
-    width: 20px;
-    height: 20px;
-    object-fit: contain;
-}
-
diff --git a/src/components/ProfileTotals.tsx b/src/components/ProfileTotals.tsx
index 11e5490..07922c2 100644
--- a/src/components/ProfileTotals.tsx
+++ b/src/components/ProfileTotals.tsx
@@ -112,15 +112,9 @@ const ProfileTotals: NextPage<ProfileTotalsProps> = ({ onViewChange = () => {} }
       <div className={styles.metricValue}>
         {label === 'TRUST SCORE' && value === '0.0' ? (
           <div className={styles.tooltipContainer}>
-            <Image 
-              src="/null.svg"
-              alt="Null trust score"
-              width={20}
-              height={20}
-              className={styles.trustScoreImage}
-            />
+            <span className={styles.metricText}>-</span>
             <span className={styles.tooltip}>
-              AI Marc is Calculating Your Trust
+              Your Trust Score is Not Yet Calculated
             </span>
           </div>
         ) : (
diff --git a/src/views/home/index.module.css b/src/views/home/index.module.css
new file mode 100644
index 0000000..b6634de
--- /dev/null
+++ b/src/views/home/index.module.css
@@ -0,0 +1,80 @@
+.container {
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+}
+
+.content {
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.title {
+    font-size: 34px;
+    line-height: 42px;
+    font-weight: 600;
+    color: #242424;
+    margin-bottom: 24px;
+}
+
+.buttonParent {
+    border-radius: 14px;
+    background-color: #e8e3d6;
+    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    align-items: left;
+    justify-content: flex-start;
+    padding: 4px;
+    margin-bottom: 24px;
+}
+
+.button {
+    width: 110px;
+    border-radius: 14px;
+    background-color: #b5ad94;
+    height: 38px;
+    overflow: hidden;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 14px;
+    box-sizing: border-box;
+    max-width: 600px;
+    color: #FFFFFF;
+}
+
+.button1 {
+    width: 110px;
+    border-radius: 14px;
+    background-color: transparent;
+    height: 38px;
+    overflow: hidden;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 14px;
+    box-sizing: border-box;
+    max-width: 600px;
+    cursor: pointer;
+    color: #9b8d7d;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 0;
+    }
+    
+    .content {
+        padding: 0 8px;
+    }
+}
\ No newline at end of file
diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx
index f4e696f..5cad2c7 100644
--- a/src/views/home/index.tsx
+++ b/src/views/home/index.tsx
@@ -1,42 +1,17 @@
 // FILE: src/views/HomeView.tsx
 import { FC, useState } from 'react';
+import styles from './index.module.css';
 import LeaderboardTotals from '../../components/LeaderboardTotals';
 import LeaderboardPartners from '../../components/LeaderboardPartners';
-// import LeaderboardHoldings from '../../components/LeaderboardHoldings';
-// import LeaderboardHoldingTotals from '../../components/LeaderboardHoldingTotals';
 
 export const HomeView: FC = () => {
-  // const [activeView, setActiveView] = useState<'partners' | 'holdings'>('partners');
-
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center px-2">
-      <div className="w-full max-w-6xl mx-auto p-2">
+    <div className={styles.container}>
+      <div className={styles.content}>
         <div className="flex flex-col w-full">
-          <h2 className="text-[34px] font-semibold text-[#242424] bg-clip-text mb-[24px]">
+          <h2 className={styles.title}>
             Leaderboard
           </h2>
-          {/* <div className="flex mb-[24px]">
-            <button
-              onClick={() => setActiveView('partners')}
-              className={`px-6 py-2 rounded-[0.875rem] transition-all ${
-                activeView === 'partners'
-                ? 'bg-[#B5AD94] text-white'
-                : 'bg-[#E8E3D500] text-[#9B8D7D]'
-              }`}
-            >
-              Partners
-            </button>
-            <button
-              onClick={() => setActiveView('holdings')}
-              className={`px-6 py-2 rounded-[0.875rem] transition-all ${
-                activeView === 'holdings'
-                ? 'bg-[#B5AD94] text-white font-semibold'
-                : 'bg-[#E8E3D500] text-[#9B8D7D] font-semibold'
-              }`}
-            >
-              Holdings
-            </button>
-          </div> */}
           <LeaderboardTotals />
           <div className="relative group w-full">
             <LeaderboardPartners />
diff --git a/src/views/leaderboard/index.tsx b/src/views/leaderboard/index.tsx
new file mode 100644
index 0000000..327780f
--- /dev/null
+++ b/src/views/leaderboard/index.tsx
@@ -0,0 +1,4 @@
+<div className="container mx-auto px-4 sm:px-6 lg:px-8">
+  <LeaderboardTotals />
+  {/* other components */}
+</div> 
\ No newline at end of file