diff --git a/src/components/SideBar.js b/src/components/SideBar.js
index 8a38a46..8298012 100644
--- a/src/components/SideBar.js
+++ b/src/components/SideBar.js
@@ -37,9 +37,16 @@ function SideBar() {
   const { switchTheme } = useActions(actions);
   return (
     <div className={s.root}>
-      <div className={s.logo}>
-        <Icon id={yacd.id} width={80} height={80} />
-      </div>
+      <a
+        href="https://github.com/haishanh/yacd"
+        className={s.logoLink}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <div className={s.logo}>
+          <Icon id={yacd.id} width={80} height={80} />
+        </div>
+      </a>
 
       <div className={s.rows}>
         <SideBarRow to="/" iconId={activity.id} labelText="Overview" />
diff --git a/src/components/SideBar.module.scss b/src/components/SideBar.module.scss
index 6729851..ace8a4a 100644
--- a/src/components/SideBar.module.scss
+++ b/src/components/SideBar.module.scss
@@ -3,6 +3,10 @@
   position: relative;
 }
 
+.logoLink {
+  display: block;
+}
+
 .logo {
   display: flex;
   align-items: center;
@@ -21,7 +25,7 @@
   }
 }
 
-// a router linke
+// a router link
 .rowActive,
 .row {
   color: var(--color-text);
@@ -31,11 +35,6 @@
   align-items: center;
   padding: 8px 20px;
 
-  // &:hover {
-  //   color: white;
-  //   background: #494b4e;
-  // }
-
   svg {
     color: var(--color-icon);
   }