diff --git a/src/app/page.css b/src/app/page.css
index 0b07157..3fd06a6 100644
--- a/src/app/page.css
+++ b/src/app/page.css
@@ -86,7 +86,7 @@ body {
   left: 0;
   width: 100%;
   z-index: 1000;
-  border-bottom: 1px solid var(--tui-border);
+  border-bottom: 1px solid var(--tui-border-highlight);
   background-color: rgba(29, 32, 33, 0.4) !important;
   backdrop-filter: blur(20px) saturate(150%) !important;
   -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
@@ -137,7 +137,7 @@ body {
 }
 
 .hero-panel {
-  border: 1px solid var(--accent);
+  border: 1px solid var(--panel-color, var(--accent));
   background: rgba(29, 32, 33, 0.75);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
@@ -151,10 +151,10 @@ body {
   left: 16px;
   transform: translateY(-50%);
   background: var(--bg);
-  color: white;
+  color: var(--panel-color, white);
   padding: 2px 6px;
   border-radius: 0;
-  border: 1px solid white;
+  border: 1px solid var(--panel-color, white);
   font-size: 0.8rem;
   font-weight: bold;
   letter-spacing: 0.05em;
@@ -236,7 +236,7 @@ body {
 }
 
 .tui-panel {
-  border: 1px solid var(--tui-border);
+  border: 1px solid var(--panel-color, var(--tui-border));
   background: rgba(29, 32, 33, 0.75);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
@@ -249,10 +249,10 @@ body {
   left: 16px;
   transform: translateY(-50%);
   background: var(--bg);
-  color: white;
+  color: var(--panel-color, white);
   padding: 2px 6px;
   border-radius: 0;
-  border: 1px solid white;
+  border: 1px solid var(--panel-color, white);
   font-size: 0.8rem;
   font-weight: bold;
   letter-spacing: 0.05em;
@@ -486,7 +486,7 @@ body {
 }
 
 .subsection-panel {
-  border: 1px solid var(--tui-border);
+  border: 1px solid var(--panel-color, var(--tui-border));
   background: rgba(29, 32, 33, 0.75);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
@@ -500,10 +500,10 @@ body {
   left: 16px;
   transform: translateY(-50%);
   background: var(--bg);
-  color: white;
+  color: var(--panel-color, white);
   padding: 2px 6px;
   border-radius: 0;
-  border: 1px solid white;
+  border: 1px solid var(--panel-color, white);
   font-size: 0.8rem;
   font-weight: bold;
   letter-spacing: 0.05em;
@@ -698,7 +698,7 @@ body {
   color: white;
   padding: 2px 6px;
   border-radius: 0;
-  border: 1px solid white;
+  border: 1px solid var(--tui-border);
   font-size: 0.7rem;
   font-weight: bold;
   letter-spacing: 0.05em;
@@ -1076,4 +1076,3 @@ body {
 .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); }
 
-
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 296ef9d..ad9756f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 import "./page.css";
 import { Metadata } from 'next';
+import type { CSSProperties } from 'react';
 import JokerLogo from "./components/JokerLogo";
 import ServiceButton from "./components/ServiceButton";
 import SlBackground from "./components/SlBackground";
@@ -18,6 +19,12 @@ export const metadata: Metadata = {
   },
 };
 
+type PanelStyle = CSSProperties & { '--panel-color'?: string };
+
+const panelStyle = (color: string, style: CSSProperties = {}): PanelStyle => ({
+  ...style,
+  '--panel-color': color,
+});
 
 // Example projects array (you can edit this)
 const codingProjects = [
@@ -251,7 +258,7 @@ export default function Home() {
 
       {/* Hero - TUI welcome panel */}
       <main className="hero">
-        <div className="hero-panel">
+        <div className="hero-panel" style={panelStyle('var(--accent)')}>
           <span className="hero-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>README.MD</span>
           <h2 className="hero-title">$ whoami</h2>
           <p className="hero-subtitle">
@@ -261,7 +268,7 @@ export default function Home() {
 
         {/* Search Panel */}
         <div className="search-section">
-          <div className="tui-panel">
+          <div className="tui-panel" style={panelStyle('var(--red)')}>
             <span className="tui-panel-label" style={{ color: 'var(--red)', borderColor: 'var(--red)' }}>SEARXNG.C</span>
             <form action="https://search.dvorakmortonxd.dev/search" method="GET" target="_blank" rel="noopener noreferrer" className="search-form">
               <input type="text" name="q" placeholder="Search... (only works if I granted you access)" className="search-bar" />
@@ -271,7 +278,7 @@ export default function Home() {
 
         {/* Social Links Panel */}
         <div className="social-section">
-          <div className="tui-panel">
+          <div className="tui-panel" style={panelStyle('var(--blue)')}>
             <span className="tui-panel-label" style={{ color: 'var(--blue)', borderColor: 'var(--blue)' }}>SOCIALS.JS</span>
             <div className="social-buttons">
               {socials.map((s) => (
@@ -295,7 +302,7 @@ export default function Home() {
 
         {/* Gym SBD Panel */}
         <div className="gym-section">
-          <div className="tui-panel">
+          <div className="tui-panel" style={panelStyle('#929292')}>
             <span className="tui-panel-label" style={{ color: '#929292', borderColor: '#929292' }}>GYM_SBD_AT_73KG_BW.DB</span>
             <div className="gym-grid">
               <div className="gym-item">
@@ -322,7 +329,7 @@ export default function Home() {
 
         {/* About Me Panel */}
         <div className="about-section">
-          <div className="tui-panel">
+          <div className="tui-panel" style={panelStyle('var(--green)')}>
             <span className="tui-panel-label" style={{ color: 'var(--green)', borderColor: 'var(--green)' }}>about_me.txt</span>
             <div className="about-content">
               <p>
@@ -345,7 +352,7 @@ export default function Home() {
 
         {/* Services Panel */}
         <div className="services-section">
-          <div className="tui-panel">
+          <div className="tui-panel" style={panelStyle('var(--accent)')}>
             <span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>SERVICES.HTML</span>
             <div className="services-buttons">
               <ServiceButton
@@ -426,7 +433,7 @@ export default function Home() {
 
         {/* Softcraft Panel */}
         <div className="services-section" style={{ marginTop: '20px' }}>
-          <div className="tui-panel">
+          <div className="tui-panel" style={panelStyle('white')}>
             <span className="tui-panel-label" style={{ color: 'white', borderColor: 'white' }}>SOFTCRAFT.JAR</span>
             <div className="services-buttons" style={{ gap: '1rem' }}>
               <ServiceButton
@@ -457,7 +464,7 @@ export default function Home() {
 
         {/* GitDXD Panel */}
         <div className="gitdxd-section" style={{ marginTop: '20px' }}>
-          <div className="tui-panel">
+          <div className="tui-panel" style={panelStyle('#0ea5e9')}>
             <span className="tui-panel-label" style={{ color: '#0ea5e9', borderColor: '#0ea5e9' }}>GITDXD.GIT</span>
             <div style={{ padding: '24px 16px 16px' }}>
               <h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: '#0ea5e9', marginBottom: '16px', textAlign: 'center' }}>GitDXD</h2>
@@ -480,7 +487,7 @@ export default function Home() {
 
         {/* Commits Panel */}
         <div className="commits-section" style={{ marginTop: '20px' }}>
-          <div className="tui-panel">
+          <div className="tui-panel" style={panelStyle('var(--green)')}>
             <span className="tui-panel-label" style={{ color: 'var(--green)', borderColor: 'var(--green)' }}>CONTRIBUTIONS@GITDXD.GIT</span>
             <div className="commits-content" style={{ padding: '24px 12px 16px' }}>
               <ContributionHeatmap />
@@ -490,7 +497,7 @@ export default function Home() {
 
         {/* RustyWolf Panel */}
         <div className="rustywolf-section" style={{ marginTop: '20px' }}>
-          <div className="tui-panel">
+          <div className="tui-panel" style={panelStyle('#f74c00')}>
             <span className="tui-panel-label" style={{ color: '#f74c00', borderColor: '#f74c00' }}>RUSTYWOLF.RS</span>
             <div style={{ padding: '24px 16px 16px' }}>
               <h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: '#f74c00', marginBottom: '32px', textAlign: 'center' }}>Introducing RustyWolf</h2>
@@ -516,7 +523,7 @@ export default function Home() {
       <section className="projects">
         {/* Tech Section */}
         <div className="subsection-wrapper">
-          <div className="subsection-panel">
+          <div className="subsection-panel" style={panelStyle('var(--accent2)')}>
             <span className="subsection-panel-label" style={{ color: 'var(--accent2)', borderColor: 'var(--accent2)' }}>TECH_LIST.JSON</span>
             <h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'darkorange' }}>All my hardware equipment :)</h2>
             <div className="project-grid">
@@ -536,7 +543,7 @@ export default function Home() {
 
         {/* Coding Section */}
         <div className="subsection-wrapper">
-          <div className="subsection-panel coding-panel">
+          <div className="subsection-panel coding-panel" style={panelStyle('var(--purple)')}>
             <span className="subsection-panel-label" style={{ color: 'var(--purple)', borderColor: 'var(--purple)' }}>PROJECTS.DOCX</span>
             <h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'pink' }}>All the stuff I&#39;ve worked on :))</h2>
             <div className="project-grid">
@@ -562,7 +569,7 @@ export default function Home() {
 
         {/* Friends Section */}
         <div className="subsection-wrapper">
-          <div className="subsection-panel friends-panel" style={{ backgroundColor: 'rgba(50, 205, 50, 0.05)', borderColor: 'rgba(50, 205, 50, 0.2)' }}>
+          <div className="subsection-panel friends-panel" style={panelStyle('var(--aqua)', { backgroundColor: 'rgba(50, 205, 50, 0.05)' })}>
             <span className="subsection-panel-label" style={{ color: 'var(--aqua)', borderColor: 'var(--aqua)' }}>FRIENDS.TSX</span>
             <h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'limegreen' }}>Friend&#39;s websites and projects</h2>
             <div className="services-buttons" style={{ gap: '1rem' }}>
diff --git a/src/app/softcraft/page.tsx b/src/app/softcraft/page.tsx
index 23bc282..f0d3d3a 100644
--- a/src/app/softcraft/page.tsx
+++ b/src/app/softcraft/page.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 import "../page.css";
 import { Metadata } from 'next';
+import type { CSSProperties } from 'react';
 import JokerLogo from "../components/JokerLogo";
 import ServiceButton from "../components/ServiceButton";
 
@@ -15,6 +16,13 @@ export const metadata: Metadata = {
   },
 };
 
+type PanelStyle = CSSProperties & { '--panel-color'?: string };
+
+const panelStyle = (color: string, style: CSSProperties = {}): PanelStyle => ({
+  ...style,
+  '--panel-color': color,
+});
+
 export default function Softcraft() {
   return <>
     <style>{`
@@ -62,7 +70,7 @@ export default function Softcraft() {
 
       {/* Hero - TUI welcome panel */}
       <main className="hero">
-        <div className="hero-panel">
+        <div className="hero-panel" style={panelStyle('var(--accent)')}>
           <span className="hero-panel-label">~ ABOUT_SOFTCRAFT.MD</span>
           <h2 className="hero-title">$ ./start_softcraft.sh</h2>
           <p className="hero-subtitle">
@@ -72,7 +80,7 @@ export default function Softcraft() {
 
         {/* Server Info Panel */}
         <div className="about-section">
-          <div className="tui-panel">
+          <div className="tui-panel" style={panelStyle('var(--accent)')}>
             <span className="tui-panel-label label-yellow">├─ neofetch</span>
             <div className="about-content">
               <p>
@@ -119,7 +127,7 @@ export default function Softcraft() {
 
         {/* Links Panel */}
         <div className="services-section" style={{ marginTop: '20px' }}>
-          <div className="tui-panel">
+          <div className="tui-panel" style={panelStyle('var(--blue)')}>
             <span className="tui-panel-label label-blue">├─ LINKS.SH</span>
             <div className="services-buttons" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1rem' }}>
               <ServiceButton
@@ -149,7 +157,7 @@ export default function Softcraft() {
 
         {/* Vote Panel */}
         <div className="services-section" style={{ marginTop: '20px' }}>
-          <div className="tui-panel">
+          <div className="tui-panel" style={panelStyle('var(--accent)')}>
             <span className="tui-panel-label label-yellow">├─ VOTE_HERE.JS</span>
             <div className="services-buttons" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1rem' }}>
               <ServiceButton
@@ -186,8 +194,8 @@ export default function Softcraft() {
 
         {/* Video Panel */}
         <div className="video-section" style={{ marginTop: '20px' }}>
-          <div className="tui-panel">
-            <span className="tui-panel-label" style={{ color: '#ec4899' }}>└─ BASH &#39;LS ./VIDEOS/&#39;</span>
+          <div className="tui-panel" style={panelStyle('#ec4899')}>
+            <span className="tui-panel-label" style={{ color: '#ec4899', borderColor: '#ec4899' }}>└─ BASH &#39;LS ./VIDEOS/&#39;</span>
             <div className="video-grid" style={{ marginTop: '10px' }}>
               {[
                 "ifBnNS8X3O8",