diff --git a/css/activity.css b/css/activity.css
index e653586..c11dd98 100644
--- a/css/activity.css
+++ b/css/activity.css
@@ -13,7 +13,7 @@
 }
 
 #activity-tab::-webkit-scrollbar-thumb {
-  background: #8c52ff66;
+  background: color-mix(in srgb, var(--accent-color) 40%, transparent);
   border-radius: 4px;
 }
 
@@ -50,8 +50,8 @@
 }
 
 .filter-btn.active {
-  background: #6d44b8;
-  box-shadow: 0 0 8px #8c52ff;
+  background: var(--accent-color);
+  box-shadow: 0 0 8px var(--accent-color);
 }
 
 .activity-wrapper {
@@ -61,7 +61,7 @@
   background: #1b1429;
   padding: 12px;
   border-radius: 12px;
-  box-shadow: inset 0 0 10px #8c52ff20;
+  box-shadow: inset 0 0 10px var(--accent-color)20;
 }
 
 .activity-icon {
@@ -71,7 +71,7 @@
   object-fit: cover;
   flex-shrink: 0;
   border: 2px solid #b592ff;
-  box-shadow: 0 0 10px #8c52ff90;
+  box-shadow: 0 0 10px var(--accent-color)90;
 }
 
 .activity-info {
@@ -155,7 +155,7 @@
 }
 
 .pagination-controls button:hover {
-  background: #8c52ff;
+  background: var(--accent-color);
 }
 
 #activity-loading {
diff --git a/css/global.css b/css/global.css
index 683a33b..43057a1 100644
--- a/css/global.css
+++ b/css/global.css
@@ -1,13 +1,27 @@
+:root {
+  --bg-color: #0d0b16;
+  --text-color: #e6dbff;
+  --accent-color: #ff6ec7;
+  --card-bg: #1a1329;
+  --card-border: #3b2a60;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
 body {
-  background: #0d0b16;
-  color: #e6dbff;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: var(--bg-color);
+  color: var(--text-color);
+  font-family: 'Inter', system-ui, sans-serif;
+  line-height: 1.5;
   margin: 0;
   padding: 0;
   height: 100vh;
   width: 100vw;
   overflow: hidden;
   position: relative;
+  scroll-behavior: smooth;
 }
 
 .background-scroll {
@@ -29,7 +43,7 @@ body {
   font-size: clamp(2rem, 5vw, 4rem); /* Responsive font size */
   font-weight: bold;
   color: #2d1d4a;
-  text-shadow: 0 0 10px #8c52ff20;
+  text-shadow: 0 0 10px var(--accent-color)20;
   user-select: none;
   width: 100%;
   position: absolute;
@@ -86,8 +100,8 @@ body {
 }
 
 .id-card {
-  background: linear-gradient(145deg, #1a1329, #120d1f);
-  border: 2px solid #3b2a60;
+  background: linear-gradient(145deg, var(--card-bg), #120d1f);
+  border: 2px solid var(--card-border);
   border-radius: 20px;
   width: 100%;
   max-width: 1000px;
@@ -98,7 +112,7 @@ body {
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
-  box-shadow: 0 0 25px rgba(140, 82, 255, 0.4);
+  box-shadow: 0 0 25px var(--accent-color);
   z-index: 1;
   position: relative;
   overflow: hidden;
@@ -120,9 +134,9 @@ body {
 }
 
 .card-tab {
-  background: #1a1329;
+  background: var(--card-bg);
   color: #bfaaff;
-  border: 2px solid #3b2a60;
+  border: 2px solid var(--card-border);
   padding: 6px 16px;
   border-radius: 8px;
   font-weight: bold;
@@ -132,7 +146,7 @@ body {
 }
 
 .card-tab.active {
-  background: #8c52ff;
+  background: var(--accent-color);
   color: #fff;
 }
 
@@ -162,4 +176,6 @@ body {
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
-}
\ No newline at end of file
+}
+:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px;}
+
diff --git a/css/home.css b/css/home.css
index d53176a..ae9991e 100644
--- a/css/home.css
+++ b/css/home.css
@@ -34,8 +34,8 @@
   height: 100px;
   border-radius: 50%;
   object-fit: cover;
-  border: 2px solid #6d44b8;
-  box-shadow: 0 0 12px #8c52ff80;
+  border: 2px solid var(--accent-color);
+  box-shadow: 0 0 12px var(--accent-color)80;
   display: block;
 }
 
diff --git a/css/mobile.css b/css/mobile.css
index 1c7b198..077f416 100644
--- a/css/mobile.css
+++ b/css/mobile.css
@@ -215,7 +215,7 @@
 
 .spotify-progress .fill {
   height: 100%;
-  background: #8c52ff;
+  background: var(--accent-color);
   border-radius: 2px;
   position: absolute;
   top: 0;
diff --git a/css/presence.css b/css/presence.css
index d250fb2..52d98f8 100644
--- a/css/presence.css
+++ b/css/presence.css
@@ -10,8 +10,8 @@
   height: 100px;
   border-radius: 50%;
   object-fit: cover;
-  border: 2px solid #6d44b8;
-  box-shadow: 0 0 12px #8c52ff80;
+  border: 2px solid var(--accent-color);
+  box-shadow: 0 0 12px var(--accent-color)80;
   display: block;
 }
 
@@ -37,7 +37,7 @@
   font-size: 1.4rem;
   font-weight: bold;
   color: #d2c6f8;
-  text-shadow: 0 0 6px #8c52ff80;
+  text-shadow: 0 0 6px var(--accent-color)80;
   margin-bottom: 10px;
   text-align: center;
 }
@@ -47,7 +47,7 @@
   margin-bottom: 10px;
   text-align: center;
   color: #e6dbff;
-  text-shadow: 0 0 5px #8c52ff55;
+  text-shadow: 0 0 5px var(--accent-color)55;
 }
 
 .link {
@@ -61,13 +61,13 @@
   max-width: 260px;
   text-align: center;
   transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-  box-shadow: 0 0 8px #8c52ff40;
+  box-shadow: 0 0 8px var(--accent-color)40;
 }
 
 .link:hover {
-  background: #8c52ff;
+  background: var(--accent-color);
   color: #fff;
-  box-shadow: 0 0 12px #8c52ff, 0 0 24px #8c52ff99;
+  box-shadow: 0 0 12px var(--accent-color), 0 0 24px var(--accent-color)99;
 }
 
 .social-link {
@@ -99,7 +99,7 @@
   flex-direction: column;
   gap: 16px;
   margin-top: 12px;
-  box-shadow: inset 0 0 10px #8c52ff20;
+  box-shadow: inset 0 0 10px var(--accent-color)20;
 }
 
 .logs-tab-content {
@@ -124,7 +124,7 @@
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid #b592ff;
-  box-shadow: 0 0 10px #8c52ff90;
+  box-shadow: 0 0 10px var(--accent-color)90;
   margin: 0 auto;
 }
 
@@ -135,7 +135,7 @@
   object-fit: cover;
   flex-shrink: 0;
   border: 2px solid #b592ff;
-  box-shadow: 0 0 10px #8c52ff90;
+  box-shadow: 0 0 10px var(--accent-color)90;
 }
 
 /* Center text in Spotify activity */
@@ -204,7 +204,7 @@
 
 .spotify-progress .fill {
   height: 100%;
-  background: #8c52ff;
+  background: var(--accent-color);
   border-radius: 2px;
   position: absolute;
   top: 0;
diff --git a/css/projects.css b/css/projects.css
index 92d03d2..80caa4b 100644
--- a/css/projects.css
+++ b/css/projects.css
@@ -8,7 +8,7 @@
   margin-top: 0;
   text-align: center;
   color: #d2c6f8;
-  text-shadow: 0 0 6px #8c52ff80;
+  text-shadow: 0 0 6px var(--accent-color)80;
   margin-bottom: 20px;
 }
 
@@ -17,7 +17,7 @@
 }
 
 #projects-tab::-webkit-scrollbar-thumb {
-  background: #8c52ff66;
+  background: color-mix(in srgb, var(--accent-color) 40%, transparent);
   border-radius: 4px;
 }
 
@@ -67,7 +67,7 @@
   justify-content: center;
   color: #e6dbff;
   font-weight: bold;
-  border-bottom: 2px solid #6d44b8;
+  border-bottom: 2px solid var(--accent-color);
   overflow: hidden;
 }
 
@@ -107,7 +107,7 @@
 .coming-soon {
   margin-top: 10px;
   font-size: 1.1rem;
-  color: #8c52ff;
+  color: var(--accent-color);
   text-align: center;
   font-style: italic;
 }
diff --git a/index.html b/index.html
index 990f9dd..1b87f70 100644
--- a/index.html
+++ b/index.html
@@ -1,44 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>cole's website</title>
-  <link rel="icon" type="image/png" href="icons/webicon.png" />
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Cole's Website</title>
+  <link rel="icon" type="image/png" href="icons/webicon.png">
 
-  <link rel="stylesheet" href="css/global.css" />
-  <link rel="stylesheet" href="css/home.css" />
-  <link rel="stylesheet" href="css/activity.css" />
-  <link rel="stylesheet" href="css/presence.css" />
-  <link rel="stylesheet" href="css/projects.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+
+  <link rel="stylesheet" href="css/global.css">
+  <link rel="stylesheet" href="css/home.css">
+  <link rel="stylesheet" href="css/activity.css">
+  <link rel="stylesheet" href="css/presence.css">
+  <link rel="stylesheet" href="css/projects.css">
+  <link rel="stylesheet" href="css/mobile.css" media="(max-width: 768px)">
+
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' https: data:; script-src 'self'; connect-src 'self' https:; base-uri 'none'; object-src 'none'; form-action 'none'; upgrade-insecure-requests">
+  <meta name="referrer" content="same-origin">
 
   <script>
     const isMobile = /iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent);
-    if (isMobile) {
-      document.write('<link rel="stylesheet" href="css/mobile.css">');
-    }
   </script>
 
-  <meta property="og:title" content="coles website! its awesome!" />
-  <meta property="og:description" content="fuck you!" />
-  <meta property="og:image" content="icons/webicon2.png" />
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://cole.ong" />
+  <meta property="og:title" content="Cole's Website">
+  <meta property="og:description" content="Welcome to Cole's personal website">
+  <meta property="og:image" content="icons/webicon2.png">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://cole.ong">
 </head>
 <body>
-
   <div class="background-scroll">
     <div class="scrolling-row scroll-left">
-      <div class="inner-scroll">colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ </div>
+      <div class="inner-scroll">colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ </div>
     </div>
     <div class="scrolling-row scroll-right">
-      <div class="inner-scroll">colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ </div>
+      <div class="inner-scroll">colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ </div>
     </div>
   </div>
 
   <div class="center-wrapper">
     <div class="id-card" id="main-card">
-
       <div class="card-tabs">
         <button class="card-tab active" data-tab="home">Home</button>
         <button class="card-tab" data-tab="activity">Recent Activity</button>
@@ -50,36 +53,35 @@
           <div class="left-section">
             <div class="center-content">
               <div class="status-wrapper">
-                <img src="icons/colespfp.gif" alt="Profile Picture" />
+                <img src="icons/colespfp.gif" alt="Profile Picture">
                 <div class="status-dot status-offline"></div>
               </div>
               <div class="username">colevr</div>
             </div>
             <div class="discord-box" id="discord-activity">Loading Discord activity...</div>
           </div>
-
           <div class="right-section">
             <div class="intro">Hi, I'm Cole!</div>
             <a href="https://www.youtube.com/@colevrrr" class="link social-link" target="_blank">
-              <img src="icons/yt.svg" class="icon" /> YouTube
+              <img src="icons/yt.svg" class="icon" alt="YouTube"> YouTube
             </a>
             <a href="https://github.com/colevrya" class="link social-link" target="_blank">
-              <img src="icons/github.svg" class="icon" /> GitHub
+              <img src="icons/github.svg" class="icon" alt="GitHub"> GitHub
             </a>
             <a href="https://discord.gg/nqJv5czwQG" class="link social-link" target="_blank">
-              <img src="icons/discord.svg" class="icon" /> Discord
+              <img src="icons/discord.svg" class="icon" alt="Discord"> Discord
             </a>
             <a href="https://x.com/coledotvr" class="link social-link" target="_blank">
-              <img src="icons/twitter.svg" class="icon" /> Twitter
+              <img src="icons/twitter.svg" class="icon" alt="Twitter"> Twitter
             </a>
             <a href="https://steamcommunity.com/id/colevryt/" class="link social-link" target="_blank">
-              <img src="icons/steam.svg" class="icon" /> Steam
+              <img src="icons/steam.svg" class="icon" alt="Steam"> Steam
             </a>
           </div>
         </div>
       </div>
 
-      <div id="activity-tab" class="tab-page" style="display: none;">
+      <div id="activity-tab" class="tab-page" style="display:none;">
         <div class="logs-tab-content">
           <h2>Recent Activity</h2>
           <div class="activity-filters">
@@ -92,7 +94,10 @@
           <div class="pagination-controls">
             <label>Show per page:
               <select id="activity-per-page" onchange="renderActivityLogs()">
-                <option>10</option><option selected>30</option><option>50</option><option>100</option>
+                <option>10</option>
+                <option selected>30</option>
+                <option>50</option>
+                <option>100</option>
               </select>
             </label>
             <div id="activity-pages" data-page="1"></div>
@@ -100,7 +105,7 @@
         </div>
       </div>
 
-      <div id="projects-tab" class="tab-page" style="display: none;">
+      <div id="projects-tab" class="tab-page" style="display:none;">
         <div class="projects-content">
           <h2>My Projects</h2>
           <div class="projects-grid">
@@ -117,24 +122,22 @@
           <div class="coming-soon">more stuff here soon!!</div>
         </div>
       </div>
-      
     </div>
   </div>
 
-  <script src="js/utils.js"></script>
-  <script src="js/firebase.js"></script>
-  <script src="js/activity.js"></script>
-  <script src="js/presence.js"></script>
-  <script src="js/navigation.js"></script>
-  <script src="js/main.js"></script>
-
+  <script type="module" src="js/utils.js"></script>
+  <script type="module" src="js/firebase.js"></script>
+  <script type="module" src="js/activity.js"></script>
+  <script type="module" src="js/presence.js"></script>
+  <script type="module" src="js/navigation.js"></script>
+  <script type="module" src="js/main.js"></script>
   <script>
     if (isMobile) {
       const s = document.createElement('script');
       s.src = 'js/mobile.js';
-      document.body.appendChild(s);
+      s.type = 'module';
+      document.head.appendChild(s);
     }
   </script>
-
 </body>
 </html>
diff --git a/readme.md b/readme.md
index 174b5bc..0e5c6f6 100644
--- a/readme.md
+++ b/readme.md
@@ -1 +1,14 @@
-yo wsp me I'm cole
+# Cole's Website
+
+Hey! I'm Cole. This site is a little place where I keep my online stuff together. The home page shows my status and links to my socials, there's a page for recent activity, and there's a projects section for things I'm working on.
+
+## Running it locally
+
+Make sure you've got Node.js installed. Then install the dependencies and start the dev server:
+
+```bash
+npm install
+npm run dev
+```
+
+Vite will let you know which address to open (usually http://localhost:5173). That's it!