diff --git a/docs/app.css b/docs/app.css
index 6512b08..0f941a5 100644
--- a/docs/app.css
+++ b/docs/app.css
@@ -2,6 +2,22 @@
 CUSTOM CSS
 */
 
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/open_sans/OpenSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/open_sans/OpenSans-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('./fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
+}
+
 :root {
   --color-accent-1: #01bfad;
   --color-accent-2: #a98fef;
@@ -10,23 +26,38 @@ CUSTOM CSS
   --color-accent-5: #cb46bf;
   --color-accent-6: #2d4b73;
 
-  --color-gray-1: #f5f5f5;
-  --color-gray-2: #495057;
-  --color-gray-3: #212529;
-  --color-gray-4: #1b1f22;
-
-  --base-bg-color: var(--color-gray-1);
-  --body-bg-color: #ffffff;
-  --font-color: var(--color-gray-3);
-  --font-color-inverse: #ffffff;
-  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
-    'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --color-white: #ffffff;
+
+  /* TODO: make list of colors consistent */
+  --color-grey-1: #e6e7e8;
+  --color-grey-2: #495057;
+  --color-grey-3: #212529;
+  --color-grey-4: #1b1f22;
+
+  --color-grey-10: #212121;
+  --color-grey-20: #424242;
+  --color-grey-30: #616161;
+  --color-grey-40: #767676;
+  --color-grey-50: #9e9e9e;
+  --color-grey-60: #bdbdbd;
+  --color-grey-70: #e0e0e0;
+  --color-grey-80: #eeeeee;
+  --color-grey-90: #f5f5f5;
+  --color-grey-95: #fafafa;
+
+  --base-bg-color: var(--color-grey-1);
+  --body-bg-color: var(--color-white);
+  --font-color: var(--color-grey-3);
+  --font-color-inverse: var(--color-white);
+  --font-color-grey: var(--color-grey-40);
+  --font-family: 'Open Sans', monospace;
+  --font-family-header: 'Poppins', monospace;
 
   --color-primary: #191970;
   --color-secondary: #feaa00;
 
-  --border-color: var(--color-gray-2);
+  --border-color: var(--color-grey-70);
+  --border-radius: 0.25rem;
 
   --size-1: 3rem;
   --size-2: 1.75rem;
@@ -38,24 +69,19 @@ CUSTOM CSS
 
   --icon-cross: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
 
-  --btn-bg-default: var(--color-gray-1);
+  --btn-bg-default: var(--color-grey-1);
   --btn-color-default: var(--font-color);
   --modal-width: 500px;
 }
+
 @media (prefers-color-scheme: dark) {
   :root {
-    --base-bg-color: var(--color-gray-3);
-    --body-bg-color: var(--color-gray-4);
-    --font-color: #ffffff;
-    --font-color-inverse: #ffffff;
-
-    --border-color: var(--color-gray-2);
-
-    --color-primary: #191970;
-    --color-secondary: #feaa00;
-
-    --btn-bg-default: var(--color-gray-3);
-    --btn-color-default: var(--font-color);
+    --base-bg-color: var(--color-grey-3);
+    --body-bg-color: var(--color-grey-4);
+    --font-color: var(--color-white);
+    --font-color-inverse: var(--color-grey-4);
+    --border-color: var(--color-grey-2);
+    --btn-bg-default: var(--color-grey-3);
   }
 }
 
@@ -66,11 +92,13 @@ html {
 
 body {
   font-family: var(--font-family);
+  font-weight: normal;
   padding: 2rem;
   max-width: 1400px;
   margin: auto;
   background-color: var(--body-bg-color);
   border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
   color: var(--font-color);
 }
 
@@ -80,9 +108,10 @@ body {
 h1,
 h2,
 h3 {
+  font-family: var(--font-family-header);
   color: var(--header-color);
   margin-bottom: 1rem;
-  font-weight: 900;
+  font-weight: 600;
 }
 
 h1 {
@@ -140,6 +169,10 @@ h3 {
   background-color: var(--color-accent-6);
 }
 
+.text-gray {
+  color: var(--font-color-grey);
+}
+
 /* CONTAINERS
 -------------------------------*/
 
@@ -162,8 +195,22 @@ h3 {
 
 .d-grid {
   display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(4, 1fr);
+
+  &.items {
+    gap: 2rem;
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  }
+  &.quadrants {
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
+  }
+}
+
+.quadrants {
+  background-color: var(--base-bg-color);
+  padding: 2rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
 }
 
 /* BUTTONS
@@ -193,7 +240,7 @@ button.btn-default {
 
 button.btn-primary {
   background-color: var(--color-primary);
-  color: var(--font-color-inverse);
+  color: var(--color-white);
 }
 
 button.btn-transparent {
@@ -216,9 +263,10 @@ button.btn-close {
 }
 
 .btn-image {
-  flex-direction: row-reverse;
   align-items: center;
   gap: 0.5rem;
+  padding: 0.5rem;
+  width: 100%;
 }
 
 button.btn-sm {
@@ -240,7 +288,7 @@ ul {
   padding: 0.5rem 0.75rem;
   border-radius: 9999px;
   font-weight: bold;
-  color: var(--font-color-inverse);
+  color: var(--color-grey-3);
   font-size: var(--font-size-small);
   display: flex;
   justify-content: center;
@@ -305,7 +353,7 @@ ul {
 }
 
 .modal-header {
-  /* border-bottom: 1px solid var(--border-color); */
+  border-bottom: 1px solid var(--border-color);
   padding: 2rem;
   display: flex;
   justify-content: space-between;
@@ -316,7 +364,7 @@ ul {
 }
 
 .modal-footer {
-  /* border-top: 1px solid var(--border-color); */
+  border-top: 1px solid var(--border-color);
   padding: 2rem;
   display: flex;
   justify-content: end;
@@ -330,3 +378,72 @@ body.modal-open {
   display: flex;
   gap: 0.5rem;
 }
+
+/* RADAR
+-------------------------------*/
+
+.blip {
+  cursor: pointer;
+}
+
+.blip path,
+.blip circle {
+  stroke-width: 2px;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.blip > text {
+  fill: var(--font-color-inverse);
+  font-family: var(--font-family-header);
+  font-size: var(--font-size-small);
+  pointer-events: none;
+  user-select: none;
+}
+
+#radar .legend-header {
+  font-family: var(--font-family);
+  font-size: var(--size-3);
+  font-weight: 900;
+  fill: var(--font-color);
+}
+#radar .legend-text {
+  font-family: var(--font-family);
+  fill: var(--font-color);
+}
+
+#radar .line {
+  stroke-width: 2;
+}
+
+#radar .circle {
+  fill: none;
+  stroke-width: 2;
+}
+
+#radar .circle-text {
+  opacity: 0.35;
+  font-family: var(--font-family-header);
+  font-size: var(--size-1);
+  pointer-events: none;
+  user-select: none;
+}
+
+#radar #bubble {
+  pointer-events: none;
+  user-select: none;
+}
+
+#bubble rect {
+  fill: var(--color-grey-10);
+}
+
+#bubble path {
+  fill: var(--color-grey-10);
+}
+
+#bubble text {
+  font-family: var(--font-family);
+  font-size: var(--font-size-small);
+  fill: var(--color-white);
+}
diff --git a/docs/app.js b/docs/app.js
index 9966793..c14ab46 100644
--- a/docs/app.js
+++ b/docs/app.js
@@ -22,15 +22,16 @@ fetch('./data.json')
     radar_visualization(radarInput);
 
     dataSet.forEach(function (item) {
-      let label = document.createElement('button');
-      label.setAttribute(
+      // create button
+      const button = document.createElement('button');
+      button.setAttribute(
         'class',
         'btn-transparent btn-sm text-left d-flex btn-image',
       );
       const params = `openTechDetails(${item.index})`;
-      label.setAttribute('onClick', params);
-      label.textContent = item.label;
+      button.setAttribute('onClick', params);
 
+      // create favicon
       const favicon = document.createElement('img');
       favicon.setAttribute('class', 'img-circle');
 
@@ -46,10 +47,19 @@ fetch('./data.json')
         );
       }
       item.favObjectUrl = favicon.getAttribute('src');
-      label.appendChild(favicon);
+      button.appendChild(favicon);
+
+      // create index + label
+      const index = document.createElement('span');
+      const label = document.createElement('span');
+      index.textContent = '#' + item.id;
+      index.setAttribute('class', 'text-gray');
+      label.textContent = item.label;
+      button.appendChild(index);
+      button.appendChild(label);
 
-      let li = document.createElement('li');
-      li.appendChild(label);
+      const li = document.createElement('li');
+      li.appendChild(button);
 
       const id = item.quadrant + '-' + item.ring;
       document.getElementById(id).appendChild(li);
diff --git a/docs/config.js b/docs/config.js
index c577b48..ad9df9b 100644
--- a/docs/config.js
+++ b/docs/config.js
@@ -32,25 +32,18 @@ const RINGS = [
   { name: 'HOLD', color: 'var(--color-accent-4)', id: 3 },
 ];
 
+const RADAR_WIDTH = 1400 - 4 * 16;
+
 const RADAR_CONFIG = {
   svg_id: 'radar',
-  width: 1400,
+  width: RADAR_WIDTH,
   height: 1000,
   colors: {
-    background: 'var(--bg-base-color)',
-    grid: '#dddde0',
-    inactive: '#ddd',
-    bubble: 'var(--font-color-inverse)',
+    grid: 'var(--border-color)',
+    inactive: 'var(--color-grey-1)',
   },
-  title: 'Finaps Tech Radar',
-  // date: data.date,
   quadrants: QUADRANTS,
   rings: RINGS,
   print_rings: true,
-  print_title: false,
   print_legend: true,
-  print_layout: false,
-  links_in_new_tabs: true,
-  // zoomed_quadrant: 0,
-  // entries: data.entries,
 };
diff --git a/docs/data.json b/docs/data.json
index 38589c5..11b6ecb 100644
--- a/docs/data.json
+++ b/docs/data.json
@@ -26,7 +26,7 @@
       "description": "Core browser language; SCSS is a mature extension that makes writing large CSS code bases easier (although CSS is coming close, so this might update the future)",
       "link": "https://sass-lang.com/",
       "active": true,
-      "moved": 0
+      "moved": 1
     },
     {
       "label": "Adobe Creative Cloud",
diff --git a/docs/fonts/open_sans/OpenSans-Bold.ttf b/docs/fonts/open_sans/OpenSans-Bold.ttf
new file mode 100644
index 0000000..98c74e0
Binary files /dev/null and b/docs/fonts/open_sans/OpenSans-Bold.ttf differ
diff --git a/docs/fonts/open_sans/OpenSans-Light.ttf b/docs/fonts/open_sans/OpenSans-Light.ttf
new file mode 100644
index 0000000..ea175cc
Binary files /dev/null and b/docs/fonts/open_sans/OpenSans-Light.ttf differ
diff --git a/docs/fonts/open_sans/OpenSans-Regular.ttf b/docs/fonts/open_sans/OpenSans-Regular.ttf
new file mode 100644
index 0000000..67803bb
Binary files /dev/null and b/docs/fonts/open_sans/OpenSans-Regular.ttf differ
diff --git a/docs/fonts/poppins/Poppins-SemiBold.ttf b/docs/fonts/poppins/Poppins-SemiBold.ttf
new file mode 100644
index 0000000..74c726e
Binary files /dev/null and b/docs/fonts/poppins/Poppins-SemiBold.ttf differ
diff --git a/docs/index.html b/docs/index.html
index 49dfc01..c2f604d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -31,10 +31,10 @@ <h1>Finaps Tech Radar</h1>
 
   <svg id="radar"></svg>
 
-  <div class="d-flex d-column mb-2">
+  <div class="d-grid items">
     <div id="2">
       <h2>Languages & Frameworks</h2>
-      <div class="d-grid">
+      <div class="d-grid quadrants">
         <div>
           <div class='badge bg-accent-1 mb-1'>ADOPT</div>
           <ul id="2-0"></ul>
@@ -51,13 +51,11 @@ <h2>Languages & Frameworks</h2>
           <div class='badge bg-accent-4 mb-1'>HOLD</div>
           <ul id="2-3"></ul>
         </div>
-
       </div>
     </div>
-
     <div id="3">
       <h2>Tools</h2>
-      <div class="d-grid">
+      <div class="d-grid quadrants">
         <div>
           <div class='badge bg-accent-1 mb-1'>ADOPT</div>
           <ul id="3-0"></ul>
@@ -76,12 +74,9 @@ <h2>Tools</h2>
         </div>
       </div>
     </div>
-  </div>
-
-  <div class="d-flex d-column">
     <div id="1">
       <h2>Platforms & Operations</h2>
-      <div class="d-grid">
+      <div class="d-grid quadrants">
         <div>
           <div class='badge bg-accent-1 mb-1'>ADOPT</div>
           <ul id="1-0"></ul>
@@ -102,7 +97,7 @@ <h2>Platforms & Operations</h2>
     </div>
     <div id="4">
       <h2>Methods & Patterns</h2>
-      <div class="d-grid">
+      <div class="d-grid quadrants">
         <div>
           <div class='badge bg-accent-1 mb-1'>ADOPT</div>
           <ul id="4-0"></ul>
@@ -122,6 +117,7 @@ <h2>Methods & Patterns</h2>
       </div>
     </div>
   </div>
+
 </body>
 
 <div id="modal-introduction" class="modal">
diff --git a/docs/radar.js b/docs/radar.js
index 590ad4d..3e05aff 100644
--- a/docs/radar.js
+++ b/docs/radar.js
@@ -23,9 +23,9 @@
 function radar_visualization(config) {
   // custom random number generator, to make random sequence reproducible
   // source: https://stackoverflow.com/questions/521295
-  var seed = 42;
+  let seed = 42;
   function random() {
-    var x = Math.sin(seed++) * 10000;
+    const x = Math.sin(seed++) * 10000;
     return x - Math.floor(x);
   }
 
@@ -52,20 +52,16 @@ function radar_visualization(config) {
     { radius: 400 },
   ];
 
-  const title_offset = { x: -675, y: -420 };
-
-  const footer_offset = { x: -675, y: 420 };
-
   const legend_offset = [
-    { pos: 'br', x: 450, y: 290 },
-    { pos: 'bl', x: -675, y: 290 },
-    { pos: 'tl', x: -675, y: -310 },
-    { pos: 'tr', x: 450, y: -310 },
+    { pos: 'br', x: config.width / 3, y: config.height / 3 },
+    { pos: 'bl', x: -config.width / 2, y: config.height / 3 },
+    { pos: 'tl', x: -config.width / 2, y: -config.height / 3.5 },
+    { pos: 'tr', x: config.width / 3, y: -config.height / 3.5 },
   ];
 
   function polar(cartesian) {
-    var x = cartesian.x;
-    var y = cartesian.y;
+    const x = cartesian.x;
+    const y = cartesian.y;
     return {
       t: Math.atan2(y, x),
       r: Math.sqrt(x * x + y * y),
@@ -80,8 +76,8 @@ function radar_visualization(config) {
   }
 
   function bounded_interval(value, min, max) {
-    var low = Math.min(min, max);
-    var high = Math.max(min, max);
+    const low = Math.min(min, max);
+    const high = Math.max(min, max);
     return Math.min(Math.max(value, low), high);
   }
 
@@ -100,32 +96,32 @@ function radar_visualization(config) {
   }
 
   function segment(quadrant, ring) {
-    var polar_min = {
+    const polar_min = {
       t: quadrants[quadrant].radial_min * Math.PI,
       r: ring === 0 ? 30 : rings[ring - 1].radius,
     };
-    var polar_max = {
+    const polar_max = {
       t: quadrants[quadrant].radial_max * Math.PI,
       r: rings[ring].radius,
     };
-    var cartesian_min = {
+    const cartesian_min = {
       x: 15 * quadrants[quadrant].factor_x,
       y: 15 * quadrants[quadrant].factor_y,
     };
-    var cartesian_max = {
+    const cartesian_max = {
       x: rings[3].radius * quadrants[quadrant].factor_x,
       y: rings[3].radius * quadrants[quadrant].factor_y,
     };
     return {
       clipx: function (d) {
-        var c = bounded_box(d, cartesian_min, cartesian_max);
-        var p = bounded_ring(polar(c), polar_min.r + 15, polar_max.r - 15);
+        const c = bounded_box(d, cartesian_min, cartesian_max);
+        const p = bounded_ring(polar(c), polar_min.r + 15, polar_max.r - 15);
         d.x = cartesian(p).x; // adjust data too!
         return d.x;
       },
       clipy: function (d) {
-        var c = bounded_box(d, cartesian_min, cartesian_max);
-        var p = bounded_ring(polar(c), polar_min.r + 15, polar_max.r - 15);
+        const c = bounded_box(d, cartesian_min, cartesian_max);
+        const p = bounded_ring(polar(c), polar_min.r + 15, polar_max.r - 15);
         d.y = cartesian(p).y; // adjust data too!
         return d.y;
       },
@@ -139,41 +135,40 @@ function radar_visualization(config) {
   }
 
   // position each entry randomly in its segment
-  for (var i = 0; i < config.entries.length; i++) {
-    var entry = config.entries[i];
+  for (const element of config.entries) {
+    const entry = element;
     entry.segment = segment(entry.quadrant, entry.ring);
-    var point = entry.segment.random();
+    const point = entry.segment.random();
     entry.x = point.x;
     entry.y = point.y;
-    entry.color =
-      entry.active || config.print_layout
-        ? config.rings[entry.ring].color
-        : config.colors.inactive;
+    entry.color = entry.active
+      ? config.rings[entry.ring].color
+      : config.colors.inactive;
   }
 
   // partition entries according to segments
-  var segmented = new Array(4);
-  for (var quadrant = 0; quadrant < 4; quadrant++) {
+  const segmented = new Array(4);
+  for (let quadrant = 0; quadrant < 4; quadrant++) {
     segmented[quadrant] = new Array(4);
-    for (var ring = 0; ring < 4; ring++) {
+    for (let ring = 0; ring < 4; ring++) {
       segmented[quadrant][ring] = [];
     }
   }
-  for (var i = 0; i < config.entries.length; i++) {
-    var entry = config.entries[i];
+  for (const element of config.entries) {
+    const entry = element;
     segmented[entry.quadrant][entry.ring].push(entry);
   }
 
   // assign unique sequential id to each entry
-  var id = 1;
-  for (var quadrant of [2, 3, 1, 0]) {
-    for (var ring = 0; ring < 4; ring++) {
-      var entries = segmented[quadrant][ring];
+  let id = 1;
+  for (const quadrant of [2, 3, 1, 0]) {
+    for (let ring = 0; ring < 4; ring++) {
+      const entries = segmented[quadrant][ring];
       entries.sort(function (a, b) {
         return a.label.localeCompare(b.label);
       });
-      for (var i = 0; i < entries.length; i++) {
-        entries[i].id = '' + id++;
+      for (const element of entries) {
+        element.id = '' + id++;
       }
     }
   }
@@ -193,16 +188,15 @@ function radar_visualization(config) {
 
   // adjust with config.scale.
   config.scale = config.scale || 1;
-  var scaled_width = config.width * config.scale;
-  var scaled_height = config.height * config.scale;
+  const scaled_width = config.width * config.scale;
+  const scaled_height = config.height * config.scale;
 
-  var svg = d3
+  const svg = d3
     .select('svg#' + config.svg_id)
-    .style('background-color', config.colors.background)
     .attr('width', scaled_width)
     .attr('height', scaled_height);
 
-  var radar = svg.append('g');
+  const radar = svg.append('g');
   if ('zoomed_quadrant' in config) {
     svg.attr('viewBox', viewbox(config.zoomed_quadrant));
   } else {
@@ -214,30 +208,31 @@ function radar_visualization(config) {
     );
   }
 
-  var grid = radar.append('g');
+  const grid = radar.append('g');
 
   // draw grid lines
   grid
     .append('line')
+    .attr('class', 'line')
     .attr('x1', 0)
     .attr('y1', -400)
     .attr('x2', 0)
     .attr('y2', 400)
-    .style('stroke', config.colors.grid)
-    .style('stroke-width', 1);
+    .style('stroke', config.colors.grid);
+
   grid
     .append('line')
+    .attr('class', 'line')
     .attr('x1', -400)
     .attr('y1', 0)
     .attr('x2', 400)
     .attr('y2', 0)
-    .style('stroke', config.colors.grid)
-    .style('stroke-width', 1);
+    .style('stroke', config.colors.grid);
 
   // background color. Usage `.attr("filter", "url(#solid)")`
   // SOURCE: https://stackoverflow.com/a/31013492/2609980
-  var defs = grid.append('defs');
-  var filter = defs
+  const defs = grid.append('defs');
+  const filter = defs
     .append('filter')
     .attr('x', 0)
     .attr('y', 0)
@@ -248,34 +243,28 @@ function radar_visualization(config) {
   filter.append('feComposite').attr('in', 'SourceGraphic');
 
   // draw rings
-  for (var i = 0; i < rings.length; i++) {
+  for (let i = 0; i < rings.length; i++) {
     grid
       .append('circle')
+      .attr('class', 'circle')
       .attr('cx', 0)
       .attr('cy', 0)
       .attr('r', rings[i].radius)
-      .style('fill', 'none')
-      .style('stroke', config.colors.grid)
-      .style('stroke-width', 1);
+      .style('stroke', config.colors.grid);
     if (config.print_rings) {
       grid
         .append('text')
         .text(config.rings[i].name)
+        .attr('class', 'circle-text')
         .attr('y', -rings[i].radius + 62)
         .attr('text-anchor', 'middle')
-        .style('fill', config.rings[i].color)
-        .style('opacity', 0.35)
-        .style('font-family', 'var(--font-family)')
-        .style('font-size', '42px')
-        .style('font-weight', 'bold')
-        .style('pointer-events', 'none')
-        .style('user-select', 'none');
+        .style('fill', config.rings[i].color);
     }
   }
 
   function legend_transform(quadrant, ring, index = null) {
-    var dx = ring < 2 ? 0 : 140;
-    var dy = index == null ? -16 : index * 12;
+    const dx = ring < 2 ? 0 : 140;
+    let dy = index == null ? -16 : index * 12;
     if (ring % 2 === 1) {
       dy = dy + 36 + segmented[quadrant][ring - 1].length * 12;
     }
@@ -285,183 +274,69 @@ function radar_visualization(config) {
     );
   }
 
-  // draw title and legend (only in print layout)
-  if (config.print_title) {
-    // title
-    radar
-      .append('text')
-      .attr('transform', translate(title_offset.x, title_offset.y))
-      .text(config.title)
-      .style('font-family', 'Arial, Helvetica')
-      .style('font-size', '30')
-      .style('font-weight', 'bold');
-
-    // date
-    radar
-      .append('text')
-      .attr('transform', translate(title_offset.x, title_offset.y + 20))
-      .text(config.date || '')
-      .style('font-family', 'Arial, Helvetica')
-      .style('font-size', '14')
-      .style('fill', '#999');
-
-    // footer
-    radar
-      .append('text')
-      .attr('transform', translate(footer_offset.x, footer_offset.y))
-      .text('▲ moved up     ▼ moved down')
-      .attr('xml:space', 'preserve')
-      .style('font-family', 'Arial, Helvetica')
-      .style('font-size', '10px');
-  }
   if (config.print_legend) {
     // legend
-    var legend = radar.append('g');
-    for (var quadrant = 0; quadrant < 4; quadrant++) {
+    const legend = radar.append('g');
+    for (let quadrant = 0; quadrant < 4; quadrant++) {
       legend
         .append('text')
+        .attr('class', 'legend-header')
         .attr(
           'transform',
           translate(legend_offset[quadrant].x, legend_offset[quadrant].y - 45),
         )
-        .text(config.quadrants[quadrant].name)
-        .style('font-family', 'var(--font-family)')
-        .style('font-size', 'var(--size-3)')
-        .style('font-weight', '900')
-        .style('fill', 'var(--font-color)');
-      legend
-        .append('text')
-        .attr(
-          'transform',
-          translate(legend_offset[quadrant].x, legend_offset[quadrant].y - 0),
-        )
-        .attr('width', 200)
-        .attr('height', 500)
-        .text(config.quadrants[quadrant].description)
-        .style('font-family', 'var(--font-family)')
-        .style('fill', 'var(--font-color)');
-    }
-  }
-  if (config.print_layout) {
-    // legend
-    var legend = radar.append('g');
-    for (var quadrant = 0; quadrant < 4; quadrant++) {
+        .text(config.quadrants[quadrant].name);
       legend
         .append('text')
+        .attr('class', 'legend-text')
+        .attr('x', '0')
+        .attr('dy', '1.5rem')
         .attr(
           'transform',
           translate(legend_offset[quadrant].x, legend_offset[quadrant].y - 45),
         )
-        .text(config.quadrants[quadrant].name)
-        .style('font-family', 'Arial, Helvetica')
-        .style('font-size', '2rem')
-        .style('font-weight', 'bold');
-      for (var ring = 0; ring < 4; ring++) {
-        legend
-          .append('text')
-          .attr('transform', legend_transform(quadrant, ring))
-          .text(config.rings[ring].name)
-          .style('font-family', 'Arial, Helvetica')
-          .style('font-size', '1rem')
-          .style('font-weight', 'bold')
-          .style('fill', config.rings[ring].color);
-        legend
-          .selectAll('.legend' + quadrant + ring)
-          .data(segmented[quadrant][ring])
-          .enter()
-          .append('a')
-          .attr('href', function (d, i) {
-            return d.link ? d.link : '#'; // stay on same page if no link was provided
-          })
-          // Add a target if (and only if) there is a link and we want new tabs
-          .attr('target', function (d, i) {
-            return d.link && config.links_in_new_tabs ? '_blank' : null;
-          })
-          .append('text')
-          .attr('transform', function (d, i) {
-            return legend_transform(quadrant, ring, i);
-          })
-          .attr('class', 'legend' + quadrant + ring)
-          .attr('id', function (d, i) {
-            return 'legendItem' + d.id;
-          })
-          .text(function (d, i) {
-            return d.id + '. ' + d.label;
-          })
-          .style('font-family', 'Arial, Helvetica')
-          .style('font-size', '1rem')
-          .on('mouseover', function (d) {
-            showBubble(d);
-            highlightLegendItem(d);
-          })
-          .on('mouseout', function (d) {
-            hideBubble(d);
-            unhighlightLegendItem(d);
-          });
-      }
+        .append('tspan')
+        .text(config.quadrants[quadrant].description);
     }
   }
 
   // layer for entries
-  var rink = radar.append('g').attr('id', 'rink');
+  const rink = radar.append('g').attr('id', 'rink');
 
   // rollover bubble (on top of everything else)
-  var bubble = radar
+  const bubble = radar
     .append('g')
     .attr('id', 'bubble')
     .attr('x', 0)
     .attr('y', 0)
-    .style('opacity', 0)
-    .style('pointer-events', 'none')
-    .style('user-select', 'none');
-  bubble.append('rect').attr('rx', 4).attr('ry', 4).style('fill', '#333');
-  bubble
-    .append('text')
-    .style('font-family', 'sans-serif')
-    .style('font-size', '10px')
-    .style('fill', '#fff');
-  bubble.append('path').attr('d', 'M 0,0 10,0 5,8 z').style('fill', '#333');
+    .style('opacity', 0);
+  bubble.append('rect').attr('rx', 4).attr('ry', 4);
+  bubble.append('text');
+  bubble.append('path').attr('d', 'M 0,0 10,0 5,8 z');
 
   function showBubble(d) {
-    if (d.active || config.print_layout) {
-      var tooltip = d3.select('#bubble text').text(d.label);
-      var bbox = tooltip.node().getBBox();
-      d3.select('#bubble')
-        .attr('transform', translate(d.x - bbox.width / 2, d.y - 16))
-        .style('opacity', 0.8);
-      d3.select('#bubble rect')
-        .attr('x', -5)
-        .attr('y', -bbox.height)
-        .attr('width', bbox.width + 10)
-        .attr('height', bbox.height + 4);
-      d3.select('#bubble path').attr(
-        'transform',
-        translate(bbox.width / 2 - 5, 3),
-      );
-    }
+    const tooltip = d3.select('#bubble text').text(d.label);
+    const bbox = tooltip.node().getBBox();
+    d3.select('#bubble')
+      .attr('transform', translate(d.x - bbox.width / 2, d.y - 16))
+      .style('opacity', 0.9);
+    d3.select('#bubble rect')
+      .attr('x', -5)
+      .attr('y', -bbox.height)
+      .attr('width', bbox.width + 10)
+      .attr('height', bbox.height + 4);
+    d3.select('#bubble path').attr(
+      'transform',
+      translate(bbox.width / 2 - 5, 3),
+    );
   }
 
   function hideBubble(d) {
-    var bubble = d3
-      .select('#bubble')
-      .attr('transform', translate(0, 0))
-      .style('opacity', 0);
-  }
-
-  function highlightLegendItem(d) {
-    var legendItem = document.getElementById('legendItem' + d.id);
-    legendItem.setAttribute('filter', 'url(#solid)');
-    legendItem.setAttribute('fill', 'white');
-  }
-
-  function unhighlightLegendItem(d) {
-    var legendItem = document.getElementById('legendItem' + d.id);
-    legendItem.removeAttribute('filter');
-    legendItem.removeAttribute('fill');
+    d3.select('#bubble').attr('transform', translate(0, 0)).style('opacity', 0);
   }
 
   // draw blips on radar
-  var blips = rink
+  const blips = rink
     .selectAll('.blip')
     .data(config.entries)
     .enter()
@@ -470,59 +345,49 @@ function radar_visualization(config) {
     .attr('transform', function (d, i) {
       return legend_transform(d.quadrant, d.ring, i);
     })
+    .on('click', function (d) {
+      openTechDetails(d.index);
+    })
     .on('mouseover', function (d) {
       showBubble(d);
-      highlightLegendItem(d);
     })
     .on('mouseout', function (d) {
       hideBubble(d);
-      unhighlightLegendItem(d);
     });
 
   // configure each blip
   blips.each(function (d) {
-    var blip = d3.select(this);
-
-    // blip link
-    if (d.active && Object.prototype.hasOwnProperty.call(d, 'link') && d.link) {
-      blip = blip.append('a').attr('xlink:href', d.link);
-
-      if (config.links_in_new_tabs) {
-        blip.attr('target', '_blank');
-      }
-    }
+    const blip = d3.select(this);
 
     // blip shape
     if (d.moved > 0) {
       blip
         .append('path')
         .attr('d', 'M -11,5 11,5 0,-13 z') // triangle pointing up
-        .style('fill', d.color);
+        .style('fill', d.color)
+        .style('stroke', d.color);
     } else if (d.moved < 0) {
       blip
         .append('path')
         .attr('d', 'M -11,-5 11,-5 0,13 z') // triangle pointing down
-        .style('fill', d.color);
+        .style('fill', d.color)
+        .style('stroke', d.color);
     } else {
-      blip.append('circle').attr('r', 9).attr('fill', d.color);
+      blip
+        .append('circle')
+        .attr('r', 10)
+        .attr('fill', d.color)
+        .style('stroke', d.color);
     }
 
     // blip text
-    if (d.active || config.print_layout) {
-      var blip_text = config.print_layout ? d.id : d.label.match(/[a-z]/i);
-      blip
-        .append('text')
-        .text(blip_text)
-        .attr('y', 3)
-        .attr('text-anchor', 'middle')
-        .style('fill', config.bubble)
-        .style('font-family', 'Arial, Helvetica')
-        .style('font-size', function (d) {
-          return blip_text.length > 2 ? '8px' : '9px';
-        })
-        .style('pointer-events', 'none')
-        .style('user-select', 'none');
-    }
+    // const blip_text = d.label.match(/[a-z]/i);
+    const blip_text = d.id;
+    blip
+      .append('text')
+      .text(blip_text)
+      .attr('y', 5)
+      .attr('text-anchor', 'middle');
   });
 
   // make sure that blips stay inside their segment