diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index cd0e48f66..9f8b2283f 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -2,12 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import cx from 'classnames';
+import Logo from './Logo';
 import Navigation from './Navigation';
 import styles from './Sidebar.module.scss';
 
 const Sidebar = ({ className }) => (
   <aside className={cx(styles.sidebar, className)}>
-    <Link to="/" className={styles.logo} />
+    <Link to="/">
+      <Logo className={styles.logo} />
+    </Link>
     <Navigation />
   </aside>
 );
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index 5d977842d..9c8eef789 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -1,23 +1,17 @@
-.logo {
-  padding: 0;
-  background-size: contain;
-  background-repeat: no-repeat;
-  width: 247px;
-  height: 64px;
-  margin-bottom: 1rem;
-  display: inline-block;
-  background-image: url('../images/developers-logo.svg');
-}
+.sidebar {
+  padding: 2rem;
+  border-right: 1px solid var(--color-neutrals-100);
 
-@media screen and (max-width: 760px) {
-  .sidebar {
+  @media screen and (max-width: 760px) {
     height: 60px;
     border-bottom: 1px solid var(--color-neutrals-100);
   }
+}
+
+.logo {
+  width: 200px;
 
-  .logo {
+  @media screen and (max-width: 760px) {
     width: 160px;
-    height: 34px;
-    background-size: 160px 34px;
   }
 }