diff --git a/index.php b/index.php
index 1ae8632..ae9d8d1 100644
--- a/index.php
+++ b/index.php
@@ -19,7 +19,6 @@ $nav_links      = [
     "~/blog"     => "https://wp.dejvino.com/",
     "~/projects" => "https://projects.dejvino.com/",
     "~/code"     => "https://git.dejvino.cz/",
-    "~/cv"       => "#",
 ];
 
 $hardware_info  = "Playing the mandolin, mountain biking, 3D printing and tinkering.";
@@ -114,18 +113,37 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
             <p><?= $hardware_info ?></p>
         </section>
 
+        <section class="card links">
+            <h2>Navigation</h2>
+            <ul class="link-grid">
+                <?php foreach ($nav_links as $label => $url): ?>
+                    <li><a href="<?= $url ?>" target="_blank"><span><?= $label ?></span></a></li>
+                <?php endforeach; ?>
+            </ul>
+        </section>
+
         <section class="card contact">
             <h2>Remote_Access</h2>
             <p class="mono-addr">
               Contact email: <span id="contact-mail">uncovering...</span>
             </p>
-            <ul class="link-grid cv-only hidden">
+            <ul class="link-grid">
                 <?php foreach ($extra_contact_links as $label => $url): ?>
                     <li><a href="<?= $url ?>" target="_blank"><span><?= $label ?></span></a></li>
                 <?php endforeach; ?>
             </ul>
         </section>
 
+        <label class="card hiring-toggle" for="cv-toggle">
+            <div class="cv-toggle-container">
+                <span id="toggle-label-text">Looking to hire?</span>
+                <span class="switch">
+                    <input type="checkbox" id="cv-toggle">
+                    <span class="slider"></span>
+                </span>
+            </div>
+        </label>
+
         <section class="card experience hidden">
             <h2>Experience</h2>
             <?php foreach ($cv_experience as $job): ?>
@@ -143,8 +161,8 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
         <section class="card skills hidden">
             <h2>Skills</h2>
             <div class="skill-tags">
-                <?php foreach ($cv_skills as $skill): ?>
-                    <span class="tag"><?= $skill ?></span>
+                <?php foreach ($cv_skills as $i => $skill): ?>
+                    <span class="tag" style="transition-delay: <?= 0.6 + ($i * 0.05) ?>s"><?= $skill ?></span>
                 <?php endforeach; ?>
             </div>
         </section>
@@ -164,20 +182,6 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
                 </div>
             <?php endforeach; ?>
         </section>
-
-        <section class="card links">
-            <h2>Navigation</h2>
-            <ul class="link-grid nav-default">
-                <?php foreach ($nav_links as $label => $url): 
-                    $id_attr = ($url === "#") ? 'id="cv-toggle"' : '';
-                ?>
-                    <li><a href="<?= $url ?>" <?= $id_attr ?>><span><?= $label ?></span></a></li>
-                <?php endforeach; ?>
-            </ul>
-            <ul class="link-grid cv-only hidden">
-                <li><a href="#" id="cv-back"><span>GO BACK ~/</span></a></li>
-            </ul>
-        </section>
     </main>
 
     <script>
@@ -197,7 +201,7 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
               card.dataset.isShifting = "true";
               card.classList.add('shifting');
               setTimeout(() => {
-                  card.classList.remove('shifting', 'reveal', 'fade-out');
+                  card.classList.remove('shifting');
                   delete card.dataset.isShifting;
                   
                   if (!flashAtEnd) return;
@@ -210,63 +214,52 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
 
       const toggleCV = (show, updateHash = true) => {
           const grid = document.querySelector('.bento-grid');
+          const labelText = document.getElementById('toggle-label-text');
           
+          if (labelText) labelText.innerText = show ? 'SYSTEM ACCESS: CV_DATA' : 'Looking to hire?';
+
           const cvPanels = [
               document.querySelector('.experience'),
               document.querySelector('.skills'),
-              document.querySelector('.education'),
-              ...document.querySelectorAll('.cv-only')
+              document.querySelector('.education')
           ].filter(el => el);
-          
-          const navDefault = document.querySelectorAll('.nav-default');
 
           if (show) {
               grid.classList.add('cv-mode');
               
-              // Hide default navigation
-              navDefault.forEach(el => {
-                  el.classList.remove('reveal');
-                  el.classList.add('fade-out');
-                  applyShifting(el, false); // No flash when disappearing
-                  setTimeout(() => el.classList.add('hidden'), animationDuration);
-              });
-
-              // Unroll CV panels sequentially (Top -> Bottom)
               cvPanels.forEach((el, index) => {
                   setTimeout(() => {
-                      el.classList.remove('hidden', 'fade-out');
+                      el.classList.remove('hidden', 'fade-out', 'reveal');
+                      void el.offsetWidth; // Force reflow
                       el.classList.add('reveal');
-                      applyShifting(el, true); // Flash when appearing
+                      applyShifting(el, true, animationDuration);
                   }, index * staggerDelay);
               });
           } else {
-              // Roll up CV panels sequentially (Bottom -> Top)
               [...cvPanels].reverse().forEach((el, index) => {
                   setTimeout(() => {
                       el.classList.remove('reveal');
                       el.classList.add('fade-out');
-                      applyShifting(el, false); // No flash when disappearing
+                      applyShifting(el, false);
                       setTimeout(() => {
                           el.classList.add('hidden');
                           el.classList.remove('fade-out');
                       }, animationDuration);
-                  }, index * staggerDelay);
+                  }, (cvPanels.length - 1 - index) * staggerDelay);
               });
-
-              // Restore default state after panels have started rolling up
-              setTimeout(() => {
-                  grid.classList.remove('cv-mode');
-                  navDefault.forEach(el => {
-                      el.classList.remove('hidden', 'fade-out');
-                      el.classList.add('reveal');
-                      applyShifting(el, true); // Flash when navigation returns
-                  });
-              }, cvPanels.length * staggerDelay);
+              
+              // Remove cv-mode only after the longest-running shrink animation finishes
+              const totalRollupTime = (cvPanels.length * staggerDelay) + animationDuration;
+              setTimeout(() => grid.classList.remove('cv-mode'), totalRollupTime);
           }
 
           if (updateHash) {
               window.location.hash = show ? 'CV' : '';
           }
+          
+          // Keep toggle in sync
+          const toggle = document.getElementById('cv-toggle');
+          if (toggle) toggle.checked = show;
       };
 
       // Initialize state from URL
@@ -275,15 +268,14 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
       window.addEventListener('load', checkHash);
       window.addEventListener('hashchange', checkHash);
 
-      document.getElementById('cv-toggle')?.addEventListener('click', (e) => {
-          e.preventDefault();
-          toggleCV(true);
-      });
-
-      document.getElementById('cv-back')?.addEventListener('click', (e) => {
-          e.preventDefault();
-          toggleCV(false);
-          window.scrollTo({ top: 0, behavior: 'smooth' });
+      const cvToggleInput = document.getElementById('cv-toggle');
+      cvToggleInput?.addEventListener('change', (e) => {
+          toggleCV(e.target.checked);
+          
+          // Only scroll to top if we are collapsing the CV and the user is scrolled down
+          if (!e.target.checked && window.scrollY > 200) {
+              window.scrollTo({ top: document.querySelector('.hiring-toggle').offsetTop - 20, behavior: 'smooth' });
+          }
       });
     </script>
   </body>
diff --git a/style.css b/style.css
index 527cec8..ef09d95 100644
--- a/style.css
+++ b/style.css
@@ -26,7 +26,7 @@
         transform: scale(0.95);
     }
     to { 
-        opacity: 0.4; /* Faded while unrolling */
+        opacity: 1;
         max-height: 2000px; /* Sufficiently large to contain content */
         transform: scale(1);
     }
@@ -34,7 +34,7 @@
 
 @keyframes shrink-fade-away { /* New animation for shrinking */
     from {
-        opacity: 0.4;
+        opacity: 1;
         max-height: 2000px;
         transform: scale(1);
     }
@@ -47,12 +47,11 @@
 
 @keyframes flash-impact {
     0% {
-        opacity: 1;
         filter: brightness(3) saturate(1.5); 
         box-shadow: 0 0 40px var(--accent-color); 
         border-color: var(--accent-color); 
     }
-    100% { opacity: 1; filter: brightness(1) saturate(1); }
+    100% { filter: brightness(1) saturate(1); }
 }
 
 * { box-sizing: border-box; }
@@ -74,9 +73,9 @@ body {
 
 .bento-grid {
     display: grid;
-    max-width: 900px;
+    max-width: 800px;
     gap: 24px;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(3, 1fr);
 }
 
 .card {
@@ -111,42 +110,39 @@ body {
                     linear-gradient(135deg, rgba(0, 243, 255, 0.8), rgba(255, 0, 255, 0.8)) border-box;
     }
 
+    /* Desktop Grid Spans */
+    .profile { grid-column: span 3; }
+    .about { grid-column: span 2; }
+    .interests { grid-column: span 1; }
+    .contact { grid-column: span 2; }
+    .links { grid-column: span 1; }
+    .hiring-toggle { grid-column: span 3; }
+    .experience { grid-column: span 2; }
+    .skills { grid-column: span 1; }
+    .education { grid-column: span 3; }
+
     /* Shuffle Logic */
     .profile { transform: rotate(0.1deg); }
     .about { transform: translate(-4px, 2px) rotate(-0.5deg); }
     .interests { transform: translate(6px, -2px) rotate(0.4deg); }
-    .links { transform: translate(-2px, -4px) rotate(-0.3deg); grid-column: span 4; }
-    .contact { transform: translate(4px, 6px) rotate(0.5deg); grid-column: span 4; }
-    
-    /* CV sections also shuffled */
+    .links { transform: translate(-2px, -4px) rotate(-0.3deg); }
+    .contact { transform: translate(4px, 6px) rotate(0.5deg); }
+    .hiring-toggle { transform: translate(-2px, 3px) rotate(0.2deg); }
     .experience { transform: translate(3px, -2px) rotate(-0.2deg); }
     .skills { transform: translate(-3px, 4px) rotate(0.6deg); }
     .education { transform: translate(2px, 3px) rotate(-0.4deg); }
 
-    /* Base states to prevent "re-added to DOM" flashes */
-    .experience, .skills, .education, .cv-only {
+    /* Base states for CV elements */
+    .experience, .skills, .education {
         opacity: 0;
         max-height: 0;
         overflow: hidden;
     }
 
-    /* Solid states when CV is fully locked in */
-    .cv-mode .experience, .cv-mode .skills, .cv-mode .education, .cv-mode .cv-only {
-        opacity: 1;
+    /* Visible states when CV mode is active */
+    .cv-mode .experience, .cv-mode .skills, .cv-mode .education {
         max-height: 2000px;
     }
-
-    .cv-mode .nav-default {
-        opacity: 0;
-        max-height: 0;
-        pointer-events: none;
-        overflow: hidden;
-    }
-
-    /* CV mode layout overrides - ensure full width for key info */
-    .cv-mode .education { 
-        grid-column: span 4; 
-    }
 }
 
 @media (max-width: 768px) {
@@ -158,10 +154,20 @@ body {
     }
 }
 
-.profile { grid-column: span 4; display: flex; align-items: center; gap: 32px; }
+.profile { display: flex; align-items: center; gap: 32px; }
 
-.experience, .education { grid-column: span 3; }
-.skills { grid-column: span 1; }
+.hiring-toggle {
+    padding: 12px 24px;
+    cursor: pointer;
+    transition: transform 0.2s ease, filter 0.3s ease;
+}
+
+.hiring-toggle:hover {
+    filter: brightness(1.2);
+    transform: translate(-2px, 3px) rotate(0.2deg) scale(1.01);
+    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
+                linear-gradient(135deg, rgba(255, 0, 255, 0.6), rgba(0, 243, 255, 0.6)) border-box;
+}
 
 .hidden {
     display: none !important;
@@ -171,25 +177,28 @@ body {
     display: block !important;
     animation: grow-reveal 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
     transition: none !important;
+    will-change: opacity, max-height, transform;
+    transform: translateZ(0);
 }
 
 .fade-out {
     /* This class will be applied when content is being hidden */
     animation: shrink-fade-away 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
     transition: none !important;
+    will-change: opacity, max-height, transform;
+    transform: translateZ(0);
 }
 
 .shifting {
-    filter: blur(2px) grayscale(0.5);
+    filter: blur(1px) grayscale(0.8) brightness(0.7);
     z-index: 10;
-    pointer-events: none;
-    transition: none !important;
+    pointer-events: none !important;
+    transition: filter 0.3s ease;
 }
 
 .flash-glow {
-    display: block !important;
     animation: flash-impact 0.6s ease-out forwards;
-    transition: none !important;
+    pointer-events: none;
 }
 
 /* CV Specific Content Styles */
@@ -242,6 +251,14 @@ body {
     padding: 4px 8px;
     background: rgba(0, 243, 255, 0.1);
     border: 1px solid rgba(0, 243, 255, 0.3);
+    opacity: 0;
+    transform: translateX(-5px);
+    transition: opacity 0.4s ease, transform 0.4s ease;
+}
+
+.reveal .tag {
+    opacity: 1;
+    transform: translateX(0);
 }
 
 .profile::before {
@@ -256,9 +273,6 @@ body {
     pointer-events: none;
 }
 
-.about { grid-column: span 2; }
-.interests { grid-column: span 2; }
-
 .link-grid { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
 
 .link-grid a { 
@@ -267,9 +281,25 @@ body {
     padding: 8px;
     border-left: 3px solid var(--text-color);
     color: var(--link-color);
-    background: rgba(255, 255, 255, 0.02);
+    background: rgba(0, 243, 255, 0.15); /* Increased alpha for better visibility */
     text-align: center;
     transition: all 0.2s ease;
+    border: 1px solid rgba(0, 243, 255, 0.3);
+    border-left: 3px solid var(--text-color);
+    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
+}
+
+.link-grid a:hover {
+    background: rgba(0, 243, 255, 0.25);
+    border-left-color: var(--accent-color);
+    box-shadow: 0 0 15px var(--accent-color);
+    transform: translateY(-2px);
+}
+
+/* Specific styling for the small contact buttons */
+.contact .link-grid {
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    margin-top: 15px;
 }
 
 .links::after {
@@ -282,6 +312,59 @@ body {
     border-radius: 50%;
     animation: pulse-trace 1s infinite;
 }
+
+/* Cyberpunk Toggle Switch */
+.cv-toggle-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.85rem;
+    color: var(--accent-color);
+    text-shadow: 0 0 10px var(--accent-color);
+    text-transform: uppercase;
+    letter-spacing: 4px;
+    font-weight: bold;
+}
+
+.cv-mode .cv-toggle-container span {
+    color: #fff;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+}
+
+.switch input { opacity: 0; width: 0; height: 0; }
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: rgba(255, 0, 255, 0.2);
+    transition: .4s;
+    border: 1px solid var(--accent-color);
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 12px; width: 12px;
+    left: 4px; bottom: 3px;
+    background-color: var(--accent-color);
+    transition: .4s;
+    box-shadow: 0 0 10px var(--accent-color);
+}
+
+input:checked + .slider { background-color: rgba(0, 243, 255, 0.2); border-color: var(--text-color); }
+input:checked + .slider:before { 
+    transform: translateX(20px); 
+    background-color: var(--text-color);
+    box-shadow: 0 0 10px var(--text-color);
+}
+
 .avatar {
     width: 120px;
     height: 160px; /* Explicit height for aspect ratio 3:4 */
@@ -294,7 +377,6 @@ h1 {
     margin: 0; 
     font-size: clamp(1.5rem, 5vw, 2.2rem); 
     color: #fff;
-    text-shadow: 2px 2px 0 var(--accent-color), -2px -2px 0 var(--text-color);
 }
 
 h2 {