diff --git a/src/App.js b/src/App.js
index 5c30bc0..35d9d09 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,12 @@ import getBlock from './blocks';
 import getIcons from './icons';
 
 const iconList = getIcons();
+const blockListArr = [];
+
+Object.entries(iconList).forEach(([type, icons]) => {
+ Object.keys(icons).map(name =>  blockListArr.push(`${name},${type}`));
+});
+
 const themeList = ["indigo", "orange", "teal", "red", "purple", "pink", "blue", "green"];
 
 const desktopIcon = (
@@ -88,6 +94,7 @@ class App extends Component {
       copied: false,
       sidebar: true,
       codeView: false,
+      currentKeyCode: null,
       view: 'desktop',
       theme: 'indigo',
       blockType: 'Blog',
@@ -103,6 +110,7 @@ class App extends Component {
     this.toggleSidebar = this.toggleSidebar.bind(this);
     this.toggleView = this.toggleView.bind(this);
     this.copyToClipboard = this.copyToClipboard.bind(this);
+    this.keyboardNavigation = this.keyboardNavigation.bind(this);
     this.markupRef = React.createRef();
     this.textareaRef = React.createRef();
     this.sidebarRef = React.createRef();
@@ -110,21 +118,12 @@ class App extends Component {
   }
 
   componentDidMount() {
-    window.focus();
-    const iframe = document.querySelector('iframe');
+    document.addEventListener('keydown', this.keyboardNavigation);
+  }
+
+  hideSidebar() {
     const sidebar = this.sidebarRef.current;
     const opener = this.openerRef.current;
-    let iframeMouseOver = false;
-
-    window.focus();
-    window.addEventListener('blur', () => {
-      if (iframeMouseOver) {
-        this.setState({ sidebar: false });
-      }
-    });
-
-    iframe.addEventListener('mouseover', () => iframeMouseOver = true);
-    iframe.addEventListener('mouseout', () => iframeMouseOver = false);
 
     document.addEventListener('click', (e) => {
       if (e.target === opener) {
@@ -137,11 +136,77 @@ class App extends Component {
     });
   }
 
+  keyboardNavigation(e) {
+    const { blockType, blockName } = this.state;
+    const blockStringFormat = `${blockName},${blockType}`;
+    const keyCode = e.which || e.keyCode;
+
+    switch (keyCode) {
+      case 40: // Down
+        e.preventDefault();
+        blockListArr.forEach((block, index) => {
+          if (block === blockStringFormat) {
+            const newActiveBlock = index + 1 <= blockListArr.length - 1  ? blockListArr[index + 1].split(',') : blockListArr[0].split(',');
+            const newBlockName = newActiveBlock[0];
+            const newBlockType = newActiveBlock[1];
+            const newBlockNode = document.querySelector(`.block-item[block-name="${newBlockName}"]`);
+            if (newBlockNode) newBlockNode.focus();
+            this.setState({
+              blockType: newBlockType,
+              blockName: newBlockName,
+              codeView: false,
+              currentKeyCode: 40
+            });
+          }
+        });
+        break;
+      case 37: // Left
+        e.preventDefault();
+        this.setState({ sidebar: false, currentKeyCode: 37 });
+        break;
+      case 39: // Right
+        e.preventDefault();
+        this.setState({ sidebar: true, currentKeyCode: 39 });
+        break;  
+      case 38: // Up
+        e.preventDefault();
+        blockListArr.forEach((block, index) => {
+          if (block === blockStringFormat) {
+            const newActiveBlock = index - 1 >= 0 ? blockListArr[index - 1].split(',') : blockListArr[blockListArr.length - 1].split(',');
+            const newBlockName = newActiveBlock[0];
+            const newBlockType = newActiveBlock[1];
+            const newBlockNode = document.querySelector(`.block-item[block-name="${newBlockName}"]`);
+            if (newBlockNode) newBlockNode.focus();
+
+            this.setState({
+              blockType: newBlockType,
+              blockName: newBlockName,
+              codeView: false,
+              currentKeyCode: 38
+            });
+          }
+        });
+        break;
+      default:
+        return;
+    }
+
+    setTimeout(() => {
+      if (keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40) {
+        this.setState({ currentKeyCode: null })
+      }
+    }, 200);
+   }
+
   changeMode() {
     this.setState({ darkMode: !this.state.darkMode })
   }
 
   handleContentDidMount() {
+    const iframe = document.querySelector('iframe');
+    iframe.contentWindow.document.addEventListener('keydown', this.keyboardNavigation);
+    iframe.contentWindow.document.addEventListener('click', () => this.setState({ sidebar: false }));
+
     setTimeout(() => {
       this.setState({
         ready: true,
@@ -187,7 +252,6 @@ class App extends Component {
       blockType, blockName,
       codeView: false
     });
-
   }
 
   changeTheme(e) {
@@ -209,7 +273,7 @@ class App extends Component {
   themeListRenderer() {
     const { theme } = this.state;
     return themeList.map((t, k) => 
-      <button key={k} data-theme={t} className={`theme-button bg-${t}-500${theme === t ? ' is-active' : ''}`} onClick={this.changeTheme}></button>
+      <button key={k} data-theme={t} onKeyDown={this.keyboardNavigation} className={`theme-button bg-${t}-500${theme === t ? ' is-active' : ''}`} onClick={this.changeTheme}></button>
     )
   }
 
@@ -219,7 +283,7 @@ class App extends Component {
       <div className="blocks" key={type}>
         <div className="block-category">{type}</div>
         <div className="block-list">
-        {Object.entries(icons).map(icon => <button key={icon[0]} onClick={this.changeBlock} className={`block-item${icon[0] === blockName ? ' is-active': ''}`} block-type={type} block-name={icon[0]}>{icon[1]}</button>)}
+        {Object.entries(icons).map(icon => <button key={icon[0]} tabIndex="0" onClick={this.changeBlock} className={`block-item${icon[0] === blockName ? ' is-active': ''}`} block-type={type} block-name={icon[0]}>{icon[1]}</button>)}
         </div>
       </div>
     );
@@ -251,7 +315,7 @@ class App extends Component {
 }
 
   render() {
-    const { darkMode, theme, blockName, blockType, sidebar, view, copied } = this.state;
+    const { darkMode, theme, blockName, blockType, sidebar, view, copied, currentKeyCode } = this.state;
     return (
       <div className={`app${darkMode ? ' dark-mode' : ''}${sidebar ? ' has-sidebar' : ''} ${theme} ${view}`}>
         <textarea className="copy-textarea" ref={this.textareaRef} />
@@ -335,9 +399,33 @@ class App extends Component {
           </svg>
           GitHub
         </a>
+        <div className="keyboard-nav">
+          <div className={`k-up keyboard-button${currentKeyCode === 38 ? ' is-active' : ''}`} data-info="Previous block">
+            <svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
+              <path d="M12 19V5M5 12l7-7 7 7"/>
+            </svg>
+          </div>
+          <div className="keyboard-nav-row">
+            <div className={`k-left keyboard-button${currentKeyCode === 37 ? ' is-active' : ''}`} data-info="Hide sidebar">
+              <svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
+                <path d="M19 12H5M12 19l-7-7 7-7"/>
+              </svg>
+            </div>
+            <div className={`k-down keyboard-button${currentKeyCode === 40 ? ' is-active' : ''}`} data-info="Next block">
+              <svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
+                <path d="M12 5v14M19 12l-7 7-7-7"/>
+              </svg>
+            </div>
+            <div className={`k-right keyboard-button${currentKeyCode === 39 ? ' is-active' : ''}`} data-info="Show sidebar">
+              <svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
+                <path d="M5 12h14M12 5l7 7-7 7"/>
+              </svg>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/blocks/footer/dark/a.js b/src/blocks/footer/dark/a.js
index 7356f5d..0704358 100644
--- a/src/blocks/footer/dark/a.js
+++ b/src/blocks/footer/dark/a.js
@@ -19,7 +19,7 @@ function DarkFooterA(props) {
             >
               <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
             </svg>
-            <span className="ml-3 text-xl">madde</span>
+            <span className="ml-3 text-xl">tailblocks</span>
           </a>
           <p className="mt-2 text-sm text-gray-700">
             Air plant banjo lyft occupy retro adaptogen indego
@@ -107,7 +107,7 @@ function DarkFooterA(props) {
       <div className="bg-gray-800">
         <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
           <p className="text-gray-600 text-sm text-center sm:text-left">
-            © 2020 madde —
+            © 2020 tailblocks —
             <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-500 ml-1" target="_blank">
               @knyttneve
             </a>
diff --git a/src/blocks/footer/dark/b.js b/src/blocks/footer/dark/b.js
index 6d0977c..f452389 100644
--- a/src/blocks/footer/dark/b.js
+++ b/src/blocks/footer/dark/b.js
@@ -19,7 +19,7 @@ function DarkFooterB(props) {
             >
               <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
             </svg>
-            <span className="ml-3 text-xl">madde</span>
+            <span className="ml-3 text-xl">tailblocks</span>
           </a>
           <p className="mt-2 text-sm text-gray-700">
             Air plant banjo lyft occupy retro adaptogen indego
@@ -107,7 +107,7 @@ function DarkFooterB(props) {
       <div className="bg-gray-800">
         <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
           <p className="text-gray-600 text-sm text-center sm:text-left">
-            © 2020 madde —
+            © 2020 tailblocks —
             <a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" rel="noopener noreferrer" target="_blank">
               @knyttneve
             </a>
diff --git a/src/blocks/footer/dark/c.js b/src/blocks/footer/dark/c.js
index 7df324e..8443f93 100644
--- a/src/blocks/footer/dark/c.js
+++ b/src/blocks/footer/dark/c.js
@@ -200,7 +200,7 @@ function DarkFooterC(props) {
       <div className="bg-gray-800">
         <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
           <p className="text-gray-600 text-sm text-center sm:text-left">
-            © 2020 madde —
+            © 2020 tailblocks —
             <a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
               @knyttneve
             </a>
diff --git a/src/blocks/footer/dark/d.js b/src/blocks/footer/dark/d.js
index e0c021f..d4ad4b9 100644
--- a/src/blocks/footer/dark/d.js
+++ b/src/blocks/footer/dark/d.js
@@ -18,10 +18,10 @@ function DarkFooterD(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span class="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">tailblocks</span>
         </a>
         <p className="text-sm text-gray-600 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">
-          © 2020 madde —
+          © 2020 tailblocks —
           <a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
             @knyttneve
           </a>
diff --git a/src/blocks/footer/dark/e.js b/src/blocks/footer/dark/e.js
index 8331f83..fecfffd 100644
--- a/src/blocks/footer/dark/e.js
+++ b/src/blocks/footer/dark/e.js
@@ -99,10 +99,10 @@ function DarkFooterE(props) {
             >
               <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
             </svg>
-            <span class="ml-3 text-xl">madde</span>
+            <span className="ml-3 text-xl">tailblocks</span>
           </a>
           <p className="text-sm text-gray-600 sm:ml-6 sm:mt-0 mt-4">
-            © 2020 madde —
+            © 2020 tailblocks —
             <a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
               @knyttneve
             </a>
diff --git a/src/blocks/footer/light/a.js b/src/blocks/footer/light/a.js
index beb6fd7..05ca12b 100644
--- a/src/blocks/footer/light/a.js
+++ b/src/blocks/footer/light/a.js
@@ -19,7 +19,7 @@ function LightFooterA(props) {
             >
               <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
             </svg>
-            <span className="ml-3 text-xl">madde</span>
+            <span className="ml-3 text-xl">tailblocks</span>
           </a>
           <p className="mt-2 text-sm text-gray-500">
             Air plant banjo lyft occupy retro adaptogen indego
@@ -107,7 +107,7 @@ function LightFooterA(props) {
       <div className="bg-gray-200">
         <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
           <p className="text-gray-500 text-sm text-center sm:text-left">
-            © 2020 madde —
+            © 2020 tailblocks —
             <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-600 ml-1" target="_blank">
               @knyttneve
             </a>
diff --git a/src/blocks/footer/light/b.js b/src/blocks/footer/light/b.js
index fee487e..173cff6 100644
--- a/src/blocks/footer/light/b.js
+++ b/src/blocks/footer/light/b.js
@@ -19,7 +19,7 @@ function LightFooterB(props) {
             >
               <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
             </svg>
-            <span className="ml-3 text-xl">madde</span>
+            <span className="ml-3 text-xl">tailblocks</span>
           </a>
           <p className="mt-2 text-sm text-gray-500">
             Air plant banjo lyft occupy retro adaptogen indego
@@ -107,7 +107,7 @@ function LightFooterB(props) {
       <div className="bg-gray-200">
         <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
           <p className="text-gray-500 text-sm text-center sm:text-left">
-            © 2020 madde —
+            © 2020 tailblocks —
             <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-600 ml-1" target="_blank">
               @knyttneve
             </a>
diff --git a/src/blocks/footer/light/c.js b/src/blocks/footer/light/c.js
index 316bdf3..21942b2 100644
--- a/src/blocks/footer/light/c.js
+++ b/src/blocks/footer/light/c.js
@@ -200,7 +200,7 @@ function LightFooterC(props) {
       <div className="bg-gray-200">
         <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
           <p className="text-gray-500 text-sm text-center sm:text-left">
-            © 2020 madde —
+            © 2020 tailblocks —
             <a href="https://twitter.com/knyttneve" className="text-gray-600 ml-1" target="_blank" rel="noopener noreferrer">
               @knyttneve
             </a>
diff --git a/src/blocks/footer/light/d.js b/src/blocks/footer/light/d.js
index 233acbb..705e14b 100644
--- a/src/blocks/footer/light/d.js
+++ b/src/blocks/footer/light/d.js
@@ -18,10 +18,10 @@ function LightFooterD(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span class="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">tailblocks</span>
         </a>
         <p className="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
-          © 2020 madde —
+          © 2020 tailblocks —
           <a href="https://twitter.com/knyttneve" className="text-gray-600 ml-1" rel="noopener noreferrer" target="_blank">
             @knyttneve
           </a>
diff --git a/src/blocks/footer/light/e.js b/src/blocks/footer/light/e.js
index b28edcb..22cdc24 100644
--- a/src/blocks/footer/light/e.js
+++ b/src/blocks/footer/light/e.js
@@ -99,10 +99,10 @@ function LightFooterE(props) {
             >
               <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
             </svg>
-            <span class="ml-3 text-xl">madde</span>
+            <span className="ml-3 text-xl">tailblocks</span>
           </a>
           <p className="text-sm text-gray-500 sm:ml-6 sm:mt-0 mt-4">
-            © 2020 madde —
+            © 2020 tailblocks —
             <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-600 ml-1" target="_blank">
               @knyttneve
             </a>
diff --git a/src/blocks/header/dark/a.js b/src/blocks/header/dark/a.js
index 1ad2a6d..2f85d0c 100644
--- a/src/blocks/header/dark/a.js
+++ b/src/blocks/header/dark/a.js
@@ -18,7 +18,7 @@ function DarkHeaderA(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span className="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">tailblocks</span>
         </a>
         <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
           <a href className="mr-5 hover:text-white">First Link</a>
diff --git a/src/blocks/header/dark/b.js b/src/blocks/header/dark/b.js
index 6a4fdd1..cdef061 100644
--- a/src/blocks/header/dark/b.js
+++ b/src/blocks/header/dark/b.js
@@ -18,7 +18,7 @@ function DarkHeaderB(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span className="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">tailblocks</span>
         </a>
         <nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-700	flex flex-wrap items-center text-base justify-center">
           <a href className="mr-5 hover:text-white">First Link</a>
diff --git a/src/blocks/header/dark/c.js b/src/blocks/header/dark/c.js
index 3896fde..34b82bf 100644
--- a/src/blocks/header/dark/c.js
+++ b/src/blocks/header/dark/c.js
@@ -24,7 +24,7 @@ function DarkHeaderC(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span className="ml-3 text-xl xl:block lg:hidden">madde</span>
+          <span className="ml-3 text-xl xl:block lg:hidden">tailblocks</span>
         </a>
         <div className="lg:w-2/5 inline-flex lg:justify-end ml-5 lg:ml-0">
           <button className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
diff --git a/src/blocks/header/dark/d.js b/src/blocks/header/dark/d.js
index a3f14fb..45370f2 100644
--- a/src/blocks/header/dark/d.js
+++ b/src/blocks/header/dark/d.js
@@ -18,7 +18,7 @@ function DarkHeaderD(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span class="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">tailblocks</span>
         </a>
         <nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
           <a href className="mr-5 hover:text-white">First Link</a>
diff --git a/src/blocks/header/light/a.js b/src/blocks/header/light/a.js
index 7b383fe..e852abf 100644
--- a/src/blocks/header/light/a.js
+++ b/src/blocks/header/light/a.js
@@ -18,7 +18,7 @@ function LightHeaderA(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span class="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">tailblocks</span>
         </a>
         <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
           <a href className="mr-5 hover:text-gray-900">First Link</a>
diff --git a/src/blocks/header/light/b.js b/src/blocks/header/light/b.js
index 8a5826b..1edf6a2 100644
--- a/src/blocks/header/light/b.js
+++ b/src/blocks/header/light/b.js
@@ -18,7 +18,7 @@ function LightHeaderB(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span class="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">tailblocks</span>
         </a>
         <nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400	flex flex-wrap items-center text-base justify-center">
           <a href className="mr-5 hover:text-gray-900">First Link</a>
diff --git a/src/blocks/header/light/c.js b/src/blocks/header/light/c.js
index 6b1be23..7a99481 100644
--- a/src/blocks/header/light/c.js
+++ b/src/blocks/header/light/c.js
@@ -24,7 +24,7 @@ function LightHeaderC(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span class="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">tailblocks</span>
         </a>
         <div className="lg:w-2/5 inline-flex lg:justify-end ml-5 lg:ml-0">
           <button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">
diff --git a/src/blocks/header/light/d.js b/src/blocks/header/light/d.js
index ce5ef3d..c53b813 100644
--- a/src/blocks/header/light/d.js
+++ b/src/blocks/header/light/d.js
@@ -18,7 +18,7 @@ function LightHeaderD(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span className="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">tailblocks</span>
         </a>
         <nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
           <a href className="mr-5 hover:text-gray-900">First Link</a>
diff --git a/src/index.css b/src/index.css
index 8778930..57d3b5a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -617,12 +617,116 @@ pre, code {
   }
 }
 
+.keyboard-nav {
+  position: fixed;
+  right: 158px;
+  bottom: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.keyboard-nav-row {
+  display: flex;
+}
+
+.keyboard-button {
+  width: 20px;
+  height: 20px;
+  opacity: 1;
+  border-radius: 4px;
+  flex-shrink: 0;
+  margin: 1px;
+  opacity: 0.5;
+  background-color: var(--base-300);
+  color: var(--solid-900);
+  padding: 3px;
+  position: relative;
+}
+
+.keyboard-nav:hover .keyboard-button:not(:hover) {
+  opacity: .2;
+}
+
+.keyboard-button:hover {
+  opacity: 1;
+}
+
+.keyboard-button:before {
+  content: attr(data-info);
+  position: absolute;
+  color: var(--solid-900);
+  pointer-events: none;
+  font-size: 8px;
+  text-transform: uppercase;
+  transition: opacity .3s;
+  text-align: center;
+  white-space: nowrap;
+  padding: 1px 4px;
+  background-color: var(--base-200);
+  border-radius: 4px;
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.keyboard-button.is-active {
+  animation-name: keyboard;
+  animation-duration: .2s;
+  animation-fill-mode: forwards;
+}
+
+
+@keyframes keyboard {
+  0% {
+    box-shadow: 0;
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--main-500);
+    z-index: 1;
+  }
+}
+
+.keyboard-button:hover:before {
+  opacity: 1;
+  z-index: 1;
+}
+
+.k-up:before {
+  left: 50%;
+  transform: translateX(-50%);
+  top: 24px;
+}
+
+.k-down:before {
+  left: 50%;
+  transform: translateX(-50%);
+  top: -18px;
+}
+
+.k-left:before {
+  right: -70px;
+  top: 4px;
+}
+
+.k-right:before {
+  left: -76px;
+  top: 4px;
+}
+
+.keyboard-button:hover:before {
+  opacity: 1;
+}
+
 @media (max-width: 960px) {
   .copy-to-clipboard {
     display: none;
   }
-}
 
+  .keyboard-nav{
+    display: none;
+  }
+}
 
 @media (max-width: 760px) {
   .copy-the-block {