diff --git a/connect-your-tools.html b/connect-your-tools.html
index 2ee2e201..6c5d6212 100644
--- a/connect-your-tools.html
+++ b/connect-your-tools.html
@@ -31,13 +31,18 @@
         overflow: hidden;
         display: grid;
         place-items: center;
+        overflow: hidden;
+        background: linear-gradient(125deg, var(--bg-start) 2%, var(--bg-mid) 51%, var(--bg-end) 98%);
         background: linear-gradient(124deg, var(--bg-start) 4%, var(--bg-mid) 53%, var(--bg-end) 98%);
         font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
       }
 
       .logos {
+        --logo-size: clamp(108px, 11vw, 168px);
         display: flex;
         align-items: center;
+        gap: clamp(24px, 5vw, 64px);
+        transform: translateY(clamp(10px, 5vh, 52px));
         justify-content: center;
         gap: var(--icon-gap);
         transform: translateY(var(--cluster-shift-y));
@@ -45,6 +50,7 @@
       }
 
       .logo {
+        width: var(--logo-size);
         width: var(--icon-size);
         aspect-ratio: 1;
         border-radius: 50%;
@@ -59,6 +65,18 @@
         position: absolute;
         inset: 0;
         border-radius: 50%;
+        background: linear-gradient(
+          45deg,
+          transparent 38%,
+          var(--icon-accent) 38% 43.4%,
+          transparent 43.4% 51.6%,
+          var(--icon-accent) 51.6% 57%,
+          transparent 57% 65.2%,
+          var(--icon-accent) 65.2% 70.6%,
+          transparent 70.6% 78.8%,
+          var(--icon-accent) 78.8% 84.2%,
+          transparent 84.2%
+        );
         background:
           linear-gradient(
             45deg,
@@ -80,6 +98,8 @@
         position: absolute;
         top: 50%;
         left: 50%;
+        width: 46%;
+        height: 10%;
         width: 44%;
         height: 10.5%;
         border-radius: 999px;
@@ -88,9 +108,13 @@
       }
 
       .logo.plus::after {
-        transform: translate(-50%, -50%) rotate(90deg);
+        width: 10%;
+        height: 46%;
       }
 
+      @media (max-width: 700px) {
+        .logos {
+          transform: translateY(clamp(4px, 3vh, 20px));
       @media (max-width: 480px) {
         :root {
           --cluster-shift-y: clamp(0px, 2vh, 16px);
@@ -98,6 +122,9 @@
       }
 
       @media (prefers-reduced-motion: reduce) {
+        *,
+        *::before,
+        *::after {
         * {
           animation: none !important;
           transition: none !important;
diff --git a/examples/connect-your-tools.html b/examples/connect-your-tools.html
index 2ee2e201..6d989070 100644
--- a/examples/connect-your-tools.html
+++ b/examples/connect-your-tools.html
@@ -6,6 +6,11 @@
     <title>Connect your tools</title>
     <style>
       :root {
+        --bg-start: #6544dc;
+        --bg-mid: #9a54b5;
+        --bg-end: #ec6d74;
+        --icon-bg: #eeeeef;
+        --icon-accent: #b3579f;
         --bg-start: #6746db;
         --bg-mid: #9d56b1;
         --bg-end: #ee6e6a;
@@ -27,6 +32,10 @@
 
       body {
         margin: 0;
+        display: grid;
+        place-items: center;
+        overflow: hidden;
+        background: linear-gradient(125deg, var(--bg-start) 2%, var(--bg-mid) 51%, var(--bg-end) 98%);
         min-height: 100vh;
         overflow: hidden;
         display: grid;
@@ -36,6 +45,11 @@
       }
 
       .logos {
+        --logo-size: clamp(108px, 11vw, 168px);
+        display: flex;
+        align-items: center;
+        gap: clamp(24px, 5vw, 64px);
+        transform: translateY(clamp(10px, 5vh, 52px));
         display: flex;
         align-items: center;
         justify-content: center;
@@ -45,6 +59,7 @@
       }
 
       .logo {
+        width: var(--logo-size);
         width: var(--icon-size);
         aspect-ratio: 1;
         border-radius: 50%;
@@ -59,6 +74,18 @@
         position: absolute;
         inset: 0;
         border-radius: 50%;
+        background: linear-gradient(
+          45deg,
+          transparent 38%,
+          var(--icon-accent) 38% 43.4%,
+          transparent 43.4% 51.6%,
+          var(--icon-accent) 51.6% 57%,
+          transparent 57% 65.2%,
+          var(--icon-accent) 65.2% 70.6%,
+          transparent 70.6% 78.8%,
+          var(--icon-accent) 78.8% 84.2%,
+          transparent 84.2%
+        );
         background:
           linear-gradient(
             45deg,
@@ -80,6 +107,8 @@
         position: absolute;
         top: 50%;
         left: 50%;
+        width: 46%;
+        height: 10%;
         width: 44%;
         height: 10.5%;
         border-radius: 999px;
@@ -88,6 +117,13 @@
       }
 
       .logo.plus::after {
+        width: 10%;
+        height: 46%;
+      }
+
+      @media (max-width: 700px) {
+        .logos {
+          transform: translateY(clamp(4px, 3vh, 20px));
         transform: translate(-50%, -50%) rotate(90deg);
       }
 
@@ -98,6 +134,9 @@
       }
 
       @media (prefers-reduced-motion: reduce) {
+        *,
+        *::before,
+        *::after {
         * {
           animation: none !important;
           transition: none !important;