diff --git a/src/components/job.webc b/src/components/job.webc
index 48caa70..a92af51 100644
--- a/src/components/job.webc
+++ b/src/components/job.webc
@@ -1,5 +1,5 @@
 <section webc:root="override">
-  <div class="icon"><icon :@icon="icon"></icon></div>
+  <div class="icon-box"><icon :@icon="icon"></icon></div>
   <p class="title" @text="title"></p>
   <p class="text" webc:type="11ty" @11ty:type="md" webc:keep>
     <slot></slot>
@@ -8,16 +8,15 @@
 
 <style webc:scoped="job">
   :host {
-    --timeline-circle-size: 3rem;
-    --timeline-circle-background: var(--clr-box-background);
-    --timeline-stroke-color: var(--clr-timeline-stroke);
-    --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
+    --icon-size: 3rem;
+    --stroke-color: var(--clr-timeline-stroke);
+    --line-width: 0.25rem;
 
     margin: 0;
     padding: 0;
 
     @media (min-width: 32em) {
-      --timeline-circle-size: 4rem;
+      --icon-size: 3.5rem;
     }
   }
 
@@ -36,15 +35,20 @@
     grid-column: line;
     justify-self: center;
 
-    width: var(--timeline-stroke-thickness);
+    width: var(--line-width);
     height: 100%;
 
-    background-color: var(--timeline-stroke-color);
+    background-color: var(--stroke-color);
+    background: linear-gradient(
+      to top,
+      oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
+      oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
+    );
   }
 
   :host:first-of-type::before {
     align-self: end;
-    height: calc(100% - var(--timeline-circle-size));
+    height: calc(100% - var(--icon-size));
   }
 
   :host:last-of-type::before {
@@ -53,18 +57,45 @@
     height: 50%;
   }
 
-  :host > .icon {
+  :host .icon-box {
+    --border-radius: 0.75em;
+
+    position: relative;
     grid-area: icon;
-    align-self: center;
 
-    width: var(--timeline-circle-size);
-    height: var(--timeline-circle-size);
+    width: var(--icon-size);
+    height: var(--icon-size);
 
-    background-color: var(--timeline-circle-background);
+    background: linear-gradient(
+      to bottom right,
+      oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
+      oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
+    );
 
-    border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
-    border-radius: 100%;
-    padding: calc(var(--timeline-circle-size) * 0.2);
+    border-radius: var(--border-radius);
+    padding: calc(var(--icon-size) / 4);
+
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  :host .icon-box::before {
+    --gradient-dir: ellipse at bottom right;
+    --gradient-start: var(--clr-quick-info-gradient-end);
+    --gradient-end: var(--clr-quick-info-gradient-start);
+
+    content: '';
+    position: absolute;
+    inset: var(--line-width);
+
+    background: radial-gradient(
+      var(--gradient-dir),
+      var(--gradient-start) 70%,
+      var(--gradient-end) 100%
+    );
+
+    border-radius: calc(var(--border-radius) - 1em * 0.125);
+    z-index: -1;
   }
 
   :host .title {
@@ -72,10 +103,10 @@
     align-self: center;
 
     font-family: var(--font-family-headings);
-    font-size: calc(var(--timeline-circle-size) / 2);
+    font-size: calc(var(--icon-size) / 2);
     font-weight: bold;
     text-align: start;
-    margin-block: calc(var(--timeline-circle-size) / 4);
+    margin-block: 0;
   }
 
   :host .text {
@@ -85,5 +116,7 @@
     margin-block: 0;
     line-height: 1.5;
     text-align: justify;
+
+    margin-block: calc(var(--icon-size) / 4);
   }
 </style>