diff --git a/src/app/page.css b/src/app/page.css
index 90d0bd5..0b07157 100644
--- a/src/app/page.css
+++ b/src/app/page.css
@@ -133,7 +133,7 @@ body {
   padding: 0;
   position: relative;
   z-index: 2;
-  margin-top: 16px;
+  margin-top: 20px;
 }
 
 .hero-panel {
@@ -150,12 +150,14 @@ body {
   top: -1px;
   left: 16px;
   transform: translateY(-50%);
-  background: rgba(29, 32, 33, 0.95);
-  padding: 0 8px;
+  background: var(--bg);
+  color: white;
+  padding: 2px 6px;
+  border-radius: 0;
+  border: 1px solid white;
   font-size: 0.8rem;
-  font-weight: 700;
-  color: var(--accent);
-  letter-spacing: 0.08em;
+  font-weight: bold;
+  letter-spacing: 0.05em;
   text-transform: uppercase;
 }
 
@@ -196,7 +198,7 @@ body {
 }
 
 .about-section {
-  margin-top: 16px;
+  margin-top: 20px;
 }
 
 .about-content {
@@ -230,7 +232,7 @@ body {
    SOCIAL BUTTONS - TUI list style
    ============================================ */
 .social-section {
-  margin-top: 16px;
+  margin-top: 20px;
 }
 
 .tui-panel {
@@ -246,11 +248,14 @@ body {
   top: -1px;
   left: 16px;
   transform: translateY(-50%);
-  background: rgba(29, 32, 33, 0.95);
-  padding: 0 8px;
+  background: var(--bg);
+  color: white;
+  padding: 2px 6px;
+  border-radius: 0;
+  border: 1px solid white;
   font-size: 0.8rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
+  font-weight: bold;
+  letter-spacing: 0.05em;
   text-transform: uppercase;
 }
 
@@ -322,7 +327,7 @@ body {
    SERVICES SECTION - TUI grid
    ============================================ */
 .services-section {
-  margin-top: 16px;
+  margin-top: 20px;
   padding-top: 0;
 }
 
@@ -461,7 +466,7 @@ body {
    PROJECTS - TUI sections
    ============================================ */
 .projects {
-  margin-top: 16px;
+  margin-top: 20px;
   padding: 0;
   text-align: left;
   position: relative;
@@ -477,7 +482,7 @@ body {
 }
 
 .subsection-wrapper {
-  margin-top: 16px;
+  margin-top: 20px;
 }
 
 .subsection-panel {
@@ -494,12 +499,14 @@ body {
   top: -1px;
   left: 16px;
   transform: translateY(-50%);
-  background: rgba(29, 32, 33, 0.95);
-  padding: 0 8px;
+  background: var(--bg);
+  color: white;
+  padding: 2px 6px;
+  border-radius: 0;
+  border: 1px solid white;
   font-size: 0.8rem;
-  font-weight: 700;
-  color: var(--accent2);
-  letter-spacing: 0.08em;
+  font-weight: bold;
+  letter-spacing: 0.05em;
   text-transform: uppercase;
 }
 
@@ -666,7 +673,7 @@ body {
    FOOTER - TUI status bar
    ============================================ */
 .footer {
-  margin-top: 16px;
+  margin-top: 20px;
   margin-bottom: 24px;
   padding: 10px 20px;
   text-align: center;
@@ -687,12 +694,14 @@ body {
   top: -1px;
   right: 16px;
   transform: translateY(-50%);
-  background: rgba(29, 32, 33, 0.95);
-  padding: 0 8px;
+  background: var(--bg);
+  color: white;
+  padding: 2px 6px;
+  border-radius: 0;
+  border: 1px solid white;
   font-size: 0.7rem;
-  font-weight: 700;
-  color: var(--gray);
-  letter-spacing: 0.08em;
+  font-weight: bold;
+  letter-spacing: 0.05em;
   text-transform: uppercase;
 }
 
@@ -884,7 +893,7 @@ body {
    SEARCH BAR
    ============================================ */
 .search-section {
-  margin-top: 16px;
+  margin-top: 20px;
 }
 
 .search-form {
@@ -960,7 +969,7 @@ body {
    GYM PANEL
    ============================================ */
 .gym-section {
-  margin-top: 16px;
+  margin-top: 20px;
 }
 
 .gym-grid {
@@ -1067,3 +1076,4 @@ 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 aaded4e..58e77be 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -252,7 +252,7 @@ export default function Home() {
       {/* Hero - TUI welcome panel */}
       <main className="hero">
         <div className="hero-panel">
-          <span className="hero-panel-label">~ README.MD</span>
+          <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">
             Welcome to my website, down under this section you get to find out about me and my social media, services, hardware and projects. Proceed at your own risk :)<span className="cursor-blink"></span>
@@ -262,7 +262,7 @@ export default function Home() {
         {/* Search Panel */}
         <div className="search-section">
           <div className="tui-panel">
-            <span className="tui-panel-label" style={{ color: 'var(--red)' }}>├─ SEARXNG.C</span>
+            <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" />
             </form>
@@ -272,7 +272,7 @@ export default function Home() {
         {/* Social Links Panel */}
         <div className="social-section">
           <div className="tui-panel">
-            <span className="tui-panel-label label-blue">├─ SOCIALS.JS</span>
+            <span className="tui-panel-label" style={{ color: 'var(--blue)', borderColor: 'var(--blue)' }}>SOCIALS.JS</span>
             <div className="social-buttons">
               {socials.map((s) => (
                   <a
@@ -296,7 +296,7 @@ export default function Home() {
         {/* Gym SBD Panel */}
         <div className="gym-section">
           <div className="tui-panel">
-            <span className="tui-panel-label" style={{ color: 'var(--accent2)' }}>├─ GYM_SBD_AT_73KG_BW.DB</span>
+            <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">
                 <Image src="/squat.svg" alt="Squat" width={48} height={48} className="gym-icon" />
@@ -323,7 +323,7 @@ export default function Home() {
         {/* About Me Panel */}
         <div className="about-section">
           <div className="tui-panel">
-            <span className="tui-panel-label label-yellow">├─ about_me.txt</span>
+            <span className="tui-panel-label" style={{ color: 'var(--green)', borderColor: 'var(--green)' }}>about_me.txt</span>
             <div className="about-content">
               <p>
                 <span className="text-green">martin@dvorakmortonxd</span>:<span className="text-blue">~</span>$ cat about_me.txt
@@ -346,7 +346,7 @@ export default function Home() {
         {/* Services Panel */}
         <div className="services-section">
           <div className="tui-panel">
-            <span className="tui-panel-label label-green">├─ SERVICES.HTML</span>
+            <span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>SERVICES.HTML</span>
             <div className="services-buttons">
               <ServiceButton
                   url="https://proxmox.dvorakmortonxd.dev/"
@@ -427,7 +427,7 @@ export default function Home() {
         {/* Softcraft Panel */}
         <div className="services-section" style={{ marginTop: '20px' }}>
           <div className="tui-panel">
-            <span className="tui-panel-label" style={{ color: '#d946ef' }}>├─ SOFTCRAFT.JAR</span>
+            <span className="tui-panel-label" style={{ color: 'white', borderColor: 'white' }}>SOFTCRAFT.JAR</span>
             <div className="services-buttons" style={{ gap: '1rem' }}>
               <ServiceButton
                   url="https://dvorakmortonxd.dev/softcraft"
@@ -458,7 +458,7 @@ export default function Home() {
         {/* GitDXD Panel */}
         <div className="gitdxd-section" style={{ marginTop: '20px' }}>
           <div className="tui-panel">
-            <span className="tui-panel-label" style={{ color: '#0ea5e9' }}>├─ GITDXD.GIT</span>
+            <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>
               <p style={{ fontSize: '1.8rem', color: '#0ea5e9', fontWeight: '500', textAlign: 'center' }}>My Self-hosted Git Instance</p>
@@ -481,7 +481,7 @@ export default function Home() {
         {/* Commits Panel */}
         <div className="commits-section" style={{ marginTop: '16px' }}>
           <div className="tui-panel">
-            <span className="tui-panel-label" style={{ color: 'var(--green)' }}>├─ CONTRIBUTIONS@GITDXD.GIT</span>
+            <span className="tui-panel-label" style={{ color: 'var(--green)', borderColor: 'var(--green)' }}>CONTRIBUTIONS@GITDXD.GIT</span>
             <div className="commits-content" style={{ padding: '24px 16px 16px' }}>
               <ContributionHeatmap />
             </div>
@@ -491,7 +491,7 @@ export default function Home() {
         {/* RustyWolf Panel */}
         <div className="rustywolf-section" style={{ marginTop: '20px' }}>
           <div className="tui-panel">
-            <span className="tui-panel-label" style={{ color: '#f74c00' }}>├─ RUSTYWOLF.RS</span>
+            <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>
               <div style={{ marginTop: '12px', marginBottom: '12px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(255, 255, 255, 0.4)', boxShadow: '0 0 30px rgba(255, 255, 255, 0.15)' }}>
@@ -517,7 +517,7 @@ export default function Home() {
         {/* Tech Section */}
         <div className="subsection-wrapper">
           <div className="subsection-panel">
-            <span className="subsection-panel-label">├─ TECH_LIST.JSON</span>
+            <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">
               {techProjects.map((project) => (
@@ -537,7 +537,7 @@ export default function Home() {
         {/* Coding Section */}
         <div className="subsection-wrapper">
           <div className="subsection-panel coding-panel">
-            <span className="subsection-panel-label">├─ PROJECTS.DOCX</span>
+            <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">
               {codingProjects.map((project, idx) => (
@@ -563,7 +563,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)' }}>
-            <span className="subsection-panel-label">└─ FRIENDS.TSX</span>
+            <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' }}>
               {friends.map((friend, idx) => (