diff --git a/app/components/addon-tabs.js b/app/components/addon-tabs.js
new file mode 100644
index 000000000..efe82debf
--- /dev/null
+++ b/app/components/addon-tabs.js
@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  currentTab: 0,
+  tagName: '',
+});
diff --git a/app/helpers/eq.js b/app/helpers/eq.js
new file mode 100644
index 000000000..493bb75aa
--- /dev/null
+++ b/app/helpers/eq.js
@@ -0,0 +1,7 @@
+import { helper } from '@ember/component/helper';
+
+export function eq(params) {
+  return params[0] === params[1];
+}
+
+export default helper(eq);
diff --git a/app/styles/app.css b/app/styles/app.css
index 760957407..9a3c6faf1 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1,3 +1,4 @@
+@import "components/addon-tabs.css";
 @import "components/brand-logos.css";
 @import "components/faqs.css";
 @import "components/homepage-image-grid.css";
diff --git a/app/styles/components/addon-tabs.css b/app/styles/components/addon-tabs.css
new file mode 100644
index 000000000..19c5e69b1
--- /dev/null
+++ b/app/styles/components/addon-tabs.css
@@ -0,0 +1,51 @@
+.addon-tabs {
+  background: linear-gradient(0deg, rgba(52,55,62,1) 0%, rgba(66,69,77,1) 100%);
+  background: rgb(52,55,62);
+  border-radius: 15px;
+  box-shadow: 0px 5px 15px -10px rgba(0,0,0,0.75);
+  width: 100%;
+}
+
+.addon-tabs--header {
+  display: flex;
+  text-align: left;
+}
+
+.addon-tabs--tab {
+  background: none;
+  border-color: #54565E;
+  border-width: 1px;
+  color: var(--color-gray-300);
+  height: 50px;
+  margin: 0;
+  margin-left: -1px;
+  padding: 0 10px;
+  text-align: left;
+}
+
+.addon-tabs--tab.active-tab {
+  background-color: var(--color-button-bg);
+  color: var(--color-button-text);
+}
+
+.addon-tabs--tab:first-child {
+  border-top-left-radius: 15px;
+  margin-left: 0;
+}
+.addon-tabs--tab:last-child {
+  border-top-right-radius: 15px;
+  flex-grow: 1;
+}
+.addon-tabs--content {
+  display: none;
+  padding: 30px;
+  text-align: left;
+}
+.addon-tabs--content.active-tab {
+  display: block;
+}
+.addon-tabs--code {
+  color: var(--color-gray-400);
+  font-size: .8em;
+  font-style: var(--font-family-mono);
+}
diff --git a/app/templates/components/addon-tabs.hbs b/app/templates/components/addon-tabs.hbs
new file mode 100644
index 000000000..d57089714
--- /dev/null
+++ b/app/templates/components/addon-tabs.hbs
@@ -0,0 +1,81 @@
+<div class="addon-tabs">
+  <div class="addon-tabs--header" role="tablist">
+    <AddonTabs::Tab
+      @currentTab={{this.currentTab}}
+      @tabId={{0}}
+      @onClick={{action (mut this.currentTab) 0}}
+    >
+      ember-cli-sass
+    </AddonTabs::Tab>
+    <AddonTabs::Tab
+      @currentTab={{this.currentTab}}
+      @tabId={{1}}
+      @onClick={{action (mut this.currentTab) 1}}
+    >
+      SVG jar
+    </AddonTabs::Tab>
+    <AddonTabs::Tab
+      @currentTab={{this.currentTab}}
+      @tabId={{2}}
+      @onClick={{action (mut this.currentTab) 2}}
+    >
+      Percy
+    </AddonTabs::Tab>
+    <AddonTabs::Tab
+      @currentTab={{this.currentTab}}
+      @tabId={{3}}
+      @onClick={{action (mut this.currentTab) 3}}
+    >
+      ember-cli-deploy
+    </AddonTabs::Tab>
+  </div>
+
+  {{!-- template-lint-disable block-indentation  --}}
+  <AddonTabs::Panel
+    @currentTab={{this.currentTab}}
+    @tabId={{0}}
+  >
+    <p>Ember CLI Sass wires up your app with Sass, in a single command.</p>
+
+    <code class="addon-tabs--code">
+      <pre class="mt-3">&gt; ember install ember-cli-sass
+
+// app.scss
+body {
+@extend .font-serif;
+}</pre>
+    </code>
+  </AddonTabs::Panel>
+
+  <AddonTabs::Panel
+    @currentTab={{this.currentTab}}
+    @tabId={{1}}
+  >
+    <p>TODO one</p>
+
+    <code class="addon-tabs--code">
+      <pre class="mt-3"></pre>
+    </code>
+  </AddonTabs::Panel>
+  <AddonTabs::Panel
+    @currentTab={{this.currentTab}}
+    @tabId={{2}}
+  >
+    <p>TODO two</p>
+
+    <code class="addon-tabs--code">
+      <pre class="mt-3"></pre>
+    </code>
+  </AddonTabs::Panel>
+  <AddonTabs::Panel
+    @currentTab={{this.currentTab}}
+    @tabId={{3}}
+  >
+    <p>TODO three</p>
+
+    <code class="addon-tabs--code">
+      <pre class="mt-3"></pre>
+    </code>
+  </AddonTabs::Panel>
+  {{!-- template-lint-enable block-indentation  --}}
+</div>
\ No newline at end of file
diff --git a/app/templates/components/addon-tabs/panel.hbs b/app/templates/components/addon-tabs/panel.hbs
new file mode 100644
index 000000000..37cc91f2e
--- /dev/null
+++ b/app/templates/components/addon-tabs/panel.hbs
@@ -0,0 +1,9 @@
+<div
+  id="addon-panel-{{@tabId}}"
+  role="tabpanel"
+  tabindex="0"
+  aria-labelledby="addon-tab-{{@tabId}}"
+  class="addon-tabs--content {{if (eq @currentTab @tabId) "active-tab"}}"
+>
+  {{yield}}
+</div>
\ No newline at end of file
diff --git a/app/templates/components/addon-tabs/tab.hbs b/app/templates/components/addon-tabs/tab.hbs
new file mode 100644
index 000000000..e28de1b7d
--- /dev/null
+++ b/app/templates/components/addon-tabs/tab.hbs
@@ -0,0 +1,11 @@
+<button
+  class="addon-tabs--tab {{if (eq @currentTab @tabId) "active-tab"}}"
+  role="tab"
+  aria-selected={{if (eq @currentTab @tabId) "true"}}
+  aria-controls="addon-panel-{{@tabId}}"
+  id="addon-tab-{{@tabId}}"
+  tabindex={{if (eq @currentTab @tabId) "0" "-1"}}
+  onclick={{@onClick}}
+>
+  {{yield}}
+</button>
\ No newline at end of file
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index c529dd9dd..2663db672 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -115,7 +115,7 @@
     </div>
 
     <div class="lg:col-3 text-center">
-      <img src="/images/addons.svg" alt="ember addons">
+      <AddonTabs />
     </div>
 
     <div class="lg:col-3">
diff --git a/public/images/addons.svg b/public/images/addons.svg
deleted file mode 100644
index f3f4f127e..000000000
--- a/public/images/addons.svg
+++ /dev/null
@@ -1,64 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="460px" height="335px" viewBox="0 0 460 335" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 56 (81588) - https://sketch.com -->
-    <title>Code</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#42454D" offset="0%"></stop>
-            <stop stop-color="#34373E" offset="100%"></stop>
-        </linearGradient>
-        <path d="M10,-9.09494702e-13 L440,-9.09494702e-13 C445.522847,-9.10509232e-13 450,4.4771525 450,10 L450,315 C450,320.522847 445.522847,325 440,325 L10,325 C4.4771525,325 6.76353751e-16,320.522847 0,315 L0,10 C-6.76353751e-16,4.4771525 4.4771525,-9.08480171e-13 10,-9.09494702e-13 Z" id="path-2"></path>
-        <filter x="-2.0%" y="-1.8%" width="104.0%" height="105.5%" filterUnits="objectBoundingBox" id="filter-4">
-            <feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <filter x="-1.2%" y="-0.8%" width="102.4%" height="103.4%" filterUnits="objectBoundingBox" id="filter-5">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.07 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Code" transform="translate(5.000000, 2.000000)">
-            <mask id="mask-3" fill="white">
-                <use xlink:href="#path-2"></use>
-            </mask>
-            <g id="Rectangle" fill-rule="nonzero">
-                <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
-                <use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
-                <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-2"></use>
-            </g>
-            <polygon id="Rectangle" fill="#E04E39" fill-rule="nonzero" mask="url(#mask-3)" points="0 0 110 0 110 49 0 49"></polygon>
-            <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" opacity="0.100000001" mask="url(#mask-3)" x="0" y="48" width="450" height="1"></rect>
-            <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" opacity="0.100000001" mask="url(#mask-3)" x="109" y="0" width="1" height="48"></rect>
-            <rect id="Rectangle-Copy-15" fill="#FFFFFF" fill-rule="nonzero" opacity="0.100000001" mask="url(#mask-3)" x="214" y="0" width="1" height="48"></rect>
-            <rect id="Rectangle-Copy-16" fill="#FFFFFF" fill-rule="nonzero" opacity="0.100000001" mask="url(#mask-3)" x="301" y="0" width="1" height="48"></rect>
-            <text id="Ember-CLI-Sass-wires" mask="url(#mask-3)" font-family="SFUIText-Medium, SF UI Text" font-size="16" font-weight="400" line-spacing="24" fill="#FFFFFF">
-                <tspan x="30" y="94">Ember CLI Sass wires up your app with Sass, in a </tspan>
-                <tspan x="30" y="118">single command.</tspan>
-            </text>
-            <text id="&gt;-ember-install-embe" mask="url(#mask-3)" font-family="SFMono-Regular, SF Mono" font-size="15" font-weight="normal" line-spacing="23" fill="#A3A6AF">
-                <tspan x="30" y="171">&gt; ember install ember-cli-sass</tspan>
-                <tspan x="30" y="194"></tspan>
-                <tspan x="30" y="217">// app.scss</tspan>
-                <tspan x="30" y="240">body {</tspan>
-                <tspan x="30" y="263">	@extend .font-serif;</tspan>
-                <tspan x="30" y="286">}</tspan>
-            </text>
-            <text id="CLI-Sass" mask="url(#mask-3)" font-family="SFUIText-Bold, SF UI Text" font-size="16" font-weight="bold" line-spacing="18" fill="#FFFFFF">
-                <tspan x="20" y="30">CLI Sass</tspan>
-            </text>
-            <text id="SVG-Jar" mask="url(#mask-3)" font-family="SFUIText-Bold, SF UI Text" font-size="16" font-weight="bold" line-spacing="18" fill="#D7D9DF">
-                <tspan x="130" y="30">SVG Jar</tspan>
-            </text>
-            <text id="Percy" mask="url(#mask-3)" font-family="SFUIText-Bold, SF UI Text" font-size="16" font-weight="bold" line-spacing="18" fill="#D7D9DF">
-                <tspan x="235" y="30">Percy</tspan>
-            </text>
-            <text id="CLI-Deploy" mask="url(#mask-3)" font-family="SFUIText-Bold, SF UI Text" font-size="16" font-weight="bold" line-spacing="18" fill="#D7D9DF">
-                <tspan x="322" y="30">CLI Deploy</tspan>
-            </text>
-        </g>
-    </g>
-</svg>
\ No newline at end of file