fixed a bunch of styling and component usage

made sure almost all viewer pages use the navbar component properly instead of using their hardcoded version, started to match the styling of the design for a lot of pages

app/(main)/stats/page.js

@@ -175,9 +175,12 @@ export default function StatsPage() {
 
   return (
     <div className={styles.container}>
-      <div className={styles.header}>
-        <h1 className={styles.title}>Team Stats</h1>
-        <h2 className={styles.teamName}>{teamStats.team.name}</h2>
+      {/* Replace header with team banner that matches team page */}
+      <div className="team-banner">
+        <div className="team-info">
+          <h1 className="team-name">Team Name: {teamStats.team.name}</h1>
+          <div className="team-code">{teamStats.team.code}</div>
+        </div>
       </div>
 
       <div className={styles.statsCard}>
@@ -232,23 +235,56 @@ export default function StatsPage() {
       <NavBar activeLink="stats" teamData={teamStats.team} />
 
       <style jsx>{`
+        .team-banner {
+          background-image: url("/images/Bottom-Bar.svg");
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center;
+          color: white;
+          padding: 20px;
+          position: relative;
+          display: flex;
+          align-items: center;
+        }
+
+        .team-info {
+          flex: 1;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .team-name {
+          margin: 0;
+          font-size: 24px;
+          font-weight: bold;
+          color: white;
+        }
+
+        .team-code {
+          font-size: 24px;
+          font-weight: bold;
+          margin-left: auto;
+          color: white;
+        }
+
         .clues-section {
           padding: 10px 15px;
         }
-        
+
         .section-title {
           font-size: 16px;
           margin: 15px 0 10px 0;
           color: #444;
           font-weight: 600;
         }
-        
+
         .clue-list {
           list-style: none;
           padding: 0;
           margin: 0 0 20px 0;
         }
-        
+
         .clue-item {
           padding: 12px 15px;
           border-bottom: 1px solid #eee;
@@ -257,23 +293,23 @@ export default function StatsPage() {
           border-radius: 4px;
           border-left: 3px solid #4caf50;
         }
-        
+
         .skipped-clue {
           border-left: 3px solid #2196f3;
         }
-        
+
         .clue-details {
           display: flex;
           justify-content: space-between;
           align-items: center;
         }
-        
+
         .clue-title {
           font-size: 14px;
           color: #333;
           flex: 1;
         }
-        
+
         .clue-time {
           font-size: 12px;
           color: #666;
@@ -281,7 +317,7 @@ export default function StatsPage() {
           margin-left: 10px;
           white-space: nowrap;
         }
-        
+
         .empty-state {
           padding: 15px;
           text-align: center;