diff --git a/src/app/components/ContributionHeatmap.tsx b/src/app/components/ContributionHeatmap.tsx
index 3ec68ad..0bbd698 100644
--- a/src/app/components/ContributionHeatmap.tsx
+++ b/src/app/components/ContributionHeatmap.tsx
@@ -128,7 +128,7 @@ export default function ContributionHeatmap() {
     <div className="contribution-heatmap">
       <div className="contribution-command-row">
         <div className="contribution-command">
-          <span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ echo &#34;<span style={{ color: "var(--prettypurple)" }}>{totalContribs}</span> contributions in the last year&#34;
+          <span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ echo &#34;<span style={{ color: "var(--aqua)" }}>{totalContribs}</span> contributions in the last year&#34;
         </div>
       </div>
       <div className="heatmap-container">
@@ -152,7 +152,7 @@ export default function ContributionHeatmap() {
       <div className="heatmap-status-row">
         <div className="heatmap-status-text">
           {hoveredCell ? (
-            <span><strong style={{ color: "var(--prettypurple)" }}>{hoveredCell.contribs}</strong> contributions on {hoveredCell.date}</span>
+            <span><strong style={{ color: "var(--aqua)" }}>{hoveredCell.contribs}</strong> contributions on {hoveredCell.date}</span>
           ) : (
             <span>Hover over a day to see contributions</span>
           )}
diff --git a/src/app/page.css b/src/app/page.css
index 5395f82..2a9769f 100644
--- a/src/app/page.css
+++ b/src/app/page.css
@@ -1073,7 +1073,7 @@ body {
   align-items: flex-start;
   gap: 10px;
   min-width: 0;
-  color: var(--white);
+  color: var(--gray);
 }
 
 .contribution-repo {
@@ -1095,7 +1095,7 @@ body {
 
 .contribution-message {
   min-width: 0;
-  color: var(--gray);
+  color: var(--color-white);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1107,7 +1107,7 @@ body {
   overflow-x: auto;
   gap: 2px;
   scrollbar-width: none;
-  scrollbar-color: var(--gray) transparent;
+  scrollbar-color: var(--green) transparent;
 }
 
 .heatmap-status-row {
@@ -1151,13 +1151,13 @@ body {
 .heatmap-cell:hover {
   transform: scale(1.2);
   z-index: 10;
-  box-shadow: 0 0 6px rgba(142, 68, 173, 0.6);
+  box-shadow: 0 0 6px var(--color-white);
 }
 
-.heatmap-cell[data-level="1"] { background-color: rgba(142, 68, 173, 0.4); }
-.heatmap-cell[data-level="2"] { background-color: rgba(142, 68, 173, 0.6); }
-.heatmap-cell[data-level="3"] { background-color: rgba(142, 68, 173, 0.8); }
-.heatmap-cell[data-level="4"] { background-color: rgba(142, 68, 173, 1); }
+.heatmap-cell[data-level="1"] { background-color: rgba(130,180,19, 0.4); }
+.heatmap-cell[data-level="2"] { background-color: rgba(130,180,19, 0.6); }
+.heatmap-cell[data-level="3"] { background-color: rgba(130,180,19, 0.8); }
+.heatmap-cell[data-level="4"] { background-color: rgba(130,180,19, 1); }
 
 .heatmap-legend-cell {
   width: 11px;
@@ -1167,10 +1167,10 @@ body {
   flex-shrink: 0;
 }
 
-.heatmap-legend-cell[data-level="1"] { background-color: rgba(142, 68, 173, 0.4); }
-.heatmap-legend-cell[data-level="2"] { background-color: rgba(142, 68, 173, 0.6); }
-.heatmap-legend-cell[data-level="3"] { background-color: rgba(142, 68, 173, 0.8); }
-.heatmap-legend-cell[data-level="4"] { background-color: rgba(142, 68, 173, 1); }
+.heatmap-legend-cell[data-level="1"] { background-color: rgba(130,180,19, 0.4); }
+.heatmap-legend-cell[data-level="2"] { background-color: rgba(130,180,19, 0.6); }
+.heatmap-legend-cell[data-level="3"] { background-color: rgba(130,180,19, 0.8); }
+.heatmap-legend-cell[data-level="4"] { background-color: rgba(130,180,19, 1); }
 
 @media (max-width: 520px) {
   .contribution-command {