diff --git a/src/components/CompareScores/CompareScoresResults.js b/src/components/CompareScores/CompareScoresResults.js
index 1f4b8a0..b88a18b 100644
--- a/src/components/CompareScores/CompareScoresResults.js
+++ b/src/components/CompareScores/CompareScoresResults.js
@@ -115,7 +115,7 @@ const CompareScoresResults = ({ result, loading }) => {
           checked={showAtproto}
           onChange={() => setShowAtproto((prev) => !prev)}
         />
-        Show Atproto Score
+        Show AT Proto Score
       </label>
     </div>
   );
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 609ee37..9f8bca7 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -15,7 +15,7 @@ const Home = () => {
       />
       <h1>Welcome</h1>
       <p>
-        Generate a Bluesky credibility score. Understand your Atproto data footprint. Vibe check strangers and new accounts.
+        Generate a Bluesky credibility score. Understand your AT Proto data footprint. Vibe check strangers and new accounts.
       </p>
       <p className="disclaimer">
         <strong>Note:</strong> this tool is currently in beta and things will change.
diff --git a/src/components/MatterLoadingAnimation.css b/src/components/MatterLoadingAnimation.css
index efa8af5..b8aa983 100644
--- a/src/components/MatterLoadingAnimation.css
+++ b/src/components/MatterLoadingAnimation.css
@@ -15,7 +15,8 @@ canvas {
   
   .loading-text {
     font-size: 1em;
-    margin-top: 20px;
+    margin-top: 0px;
+    margin-bottom: 0px;
     color: #004f84e6;
     opacity: 1;
     transition: opacity 0.5s ease-in-out;
@@ -37,7 +38,6 @@ canvas {
   .circle-counters {
     display: flex;
     gap:  24.5px;;
-    margin-top: 10px;
     font-size: 1.2em;
     align-content: center;
     justify-content: center;
@@ -47,15 +47,15 @@ canvas {
     margin: 0px;
   }
 
-  .dark-mode .circle-counters {
-    opacity: 50%;
-  }
-
   .counter-item {
     display: flex;
     align-items: center;
     gap: 8px;
   }
+
+  .version-number p {
+    margin: 0px;
+  }
   
   .legend-circle {
     width: 12px;
@@ -74,4 +74,30 @@ canvas {
   .special-circle {
     background-color: #FFD700;
     border-color: #FFA500;
+  }
+
+  .loading-text-container {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    text-align: center;
+    gap: 17px;
+  }
+
+  .loading-container-1 {
+    gap: 17px;
+  }
+
+  .counter-item-regular {
+    color: #004f84e6;
+  }
+
+  .counter-item-special {
+    color: orange;
+  }
+
+  .version-number {
+    font-size: 0.7em;
+    opacity: 0.5;
   }
\ No newline at end of file
diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
index a29d6fb..408fd8a 100644
--- a/src/components/Navbar/Navbar.css
+++ b/src/components/Navbar/Navbar.css
@@ -279,7 +279,7 @@
     .navbar-actions {
       align-items: center;
       display: flex;
-      gap: 20px;
+      gap: 5px;
       justify-content: center;
       margin-right: 10px;
     }
diff --git a/src/components/PrivacyTerms/Privacy.js b/src/components/PrivacyTerms/Privacy.js
index 15141b2..6f2b036 100644
--- a/src/components/PrivacyTerms/Privacy.js
+++ b/src/components/PrivacyTerms/Privacy.js
@@ -23,7 +23,7 @@ const Privacy = () => {
 
         <h3>Information We Access</h3>
         <ul>
-            <li>Public Bluesky/Atproto PDS data associated with searched user accounts</li>
+            <li>Public Bluesky/AT Protocol PDS data associated with searched user accounts</li>
             <li>This includes publicly available posts, follows, likes, and other public account information</li>
         </ul>
 
@@ -61,7 +61,7 @@ const Privacy = () => {
         <h2>Third-Party Services</h2>
         <ul>
             <li>We use Bluesky's authentication system for user login</li>
-            <li>We access public data through Atproto/Bluesky PDSs</li>
+            <li>We access public data through AT Protocol/Bluesky PDSs</li>
             <li>We do not share any collected information with third parties</li>
         </ul>
 
diff --git a/src/components/ScoreResult.js b/src/components/ScoreResult.js
index 4693fc9..f81f638 100644
--- a/src/components/ScoreResult.js
+++ b/src/components/ScoreResult.js
@@ -146,7 +146,7 @@ const ScoreResult = ({ result, loading }) => {
 
         {/* Atproto Score Breakdown */}
         <div className="breakdown-section">
-          <h4>Atproto Score Breakdown</h4>
+          <h4>AT Proto Score Breakdown</h4>
           {atprotoBreakdown.length > 0 ? (
             <ul>
               {atprotoBreakdown.map((item, index) => (
@@ -168,7 +168,7 @@ const ScoreResult = ({ result, loading }) => {
               ))}
             </ul>
           ) : (
-            <p>No Atproto score breakdown available.</p>
+            <p>No AT Proto score breakdown available.</p>
           )}
         </div>
       </div>
@@ -194,7 +194,7 @@ const ScoreResult = ({ result, loading }) => {
           checked={showAtproto}
           onChange={() => setShowAtproto((prev) => !prev)}
         />
-        Show Atproto Score
+        Show AT Proto Score
       </label>
     </div>
   );
@@ -214,7 +214,7 @@ const ScoreResult = ({ result, loading }) => {
             <p>{`Bluesky Score: ${dataPoint.Bluesky || 0}`}</p>
           )}
           {showAtproto && (
-            <p>{`Atproto Score: ${dataPoint.Atproto || 0}`}</p>
+            <p>{`AT Proto Score: ${dataPoint.Atproto || 0}`}</p>
           )}
           <p>{`Combined Score: ${dataPoint.Combined || 0}`}</p>
         </div>
diff --git a/src/components/UserProfile/UserProfile.js b/src/components/UserProfile/UserProfile.js
index 29d5fc7..d618cd0 100644
--- a/src/components/UserProfile/UserProfile.js
+++ b/src/components/UserProfile/UserProfile.js
@@ -272,11 +272,11 @@ const UserProfile = () => {
               <div className="user-profile-data-group">
                 <div className="user-profile-score">
                   <p><strong>Bluesky Score:</strong> {selectedAccountData.blueskyScore}</p>
-                  <p><strong>Atproto Score:</strong> {selectedAccountData.atprotoScore}</p>
+                  <p><strong>AT Proto Score:</strong> {selectedAccountData.atprotoScore}</p>
                 </div>
                 <div className="user-profile-activity">
                   <p><strong>Bluesky Status:</strong> {selectedAccountData.activityAll.bskyActivityStatus}</p>
-                  <p><strong>Atproto Status:</strong> {selectedAccountData.activityAll.atprotoActivityStatus}</p>
+                  <p><strong>AT Proto Status:</strong> {selectedAccountData.activityAll.atprotoActivityStatus}</p>
                 </div>
               </div>
               <div className="share-button-container">
diff --git a/src/components/UserProfile/components/ScoresCard.js b/src/components/UserProfile/components/ScoresCard.js
deleted file mode 100644
index 659d2a2..0000000
--- a/src/components/UserProfile/components/ScoresCard.js
+++ /dev/null
@@ -1,51 +0,0 @@
-// src/components/ScoreCard/ScoreCard.js
-import React from 'react';
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
-
-const ScoreCard = ({ blueskyScore, atprotoScore }) => {
-  // Ensure scores are within 0-100
-  const validatedBlueskyScore = Math.max(0, Math.min(blueskyScore, 100));
-  const validatedAtprotoScore = Math.max(0, Math.min(atprotoScore, 100));
-
-  // Data for the bar chart
-  const data = [
-    {
-      name: 'Scores',
-      'Bluesky Score': validatedBlueskyScore,
-      'Atproto Score': validatedAtprotoScore,
-    },
-  ];
-
-  return (
-    <div className="score-card">
-      <h2>Account Scores</h2>
-      <ResponsiveContainer width="100%" height={150}>
-        <BarChart
-          data={data}
-          layout="vertical"
-          margin={{ top: 20, right: 30, left: 20, bottom: 20 }}
-        >
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis type="number" domain={[0, 100]} />
-          <YAxis type="category" dataKey="name" hide />
-          <Tooltip />
-          <Legend verticalAlign="top" height={36} />
-          <Bar dataKey="Bluesky Score" fill="#8884d8" barSize={20} />
-          <Bar dataKey="Atproto Score" fill="#82ca9d" barSize={20} />
-        </BarChart>
-      </ResponsiveContainer>
-      <div className="score-values">
-        <div className="score-item">
-          <span className="score-label bluesky">Bluesky Score:</span>
-          <span className="score-number">{validatedBlueskyScore}/100</span>
-        </div>
-        <div className="score-item">
-          <span className="score-label atproto">Atproto Score:</span>
-          <span className="score-number">{validatedAtprotoScore}/100</span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ScoreCard;
diff --git a/src/components/ZenPage.css b/src/components/ZenPage.css
new file mode 100644
index 0000000..42cac5c
--- /dev/null
+++ b/src/components/ZenPage.css
@@ -0,0 +1,3 @@
+.loading-text {
+    display: none;
+}
\ No newline at end of file
diff --git a/src/components/ZenPage.js b/src/components/ZenPage.js
index 2bdddd5..b611aa8 100644
--- a/src/components/ZenPage.js
+++ b/src/components/ZenPage.js
@@ -1,6 +1,7 @@
 // src/pages/ZenPage.jsx
 import React from "react";
 import "./MatterLoadingAnimation.css";
+import "./ZenPage.css";
 import MatterLoadingAnimation from "./MatterLoadingAnimation";
 
 const ZenPage = () => {