diff --git a/package.json b/package.json
index a860790..8949cfa 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "private": false,
   "description": "An app to manage your JS projects",
   "main": "packages/main/dist/index.cjs",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "author": "Ahmad Kholid <kholid060@gmail.com>",
   "scripts": {
     "clean": "rimraf -y dist",
diff --git a/packages/main/src/index.js b/packages/main/src/index.js
index c2e4b42..df47edf 100644
--- a/packages/main/src/index.js
+++ b/packages/main/src/index.js
@@ -1,5 +1,6 @@
 import { app, BrowserWindow, shell, dialog } from 'electron';
 import { join } from 'path';
+import { autoUpdater } from 'electron-updater';
 import { URL } from 'url';
 import { ipcMain } from 'electron-better-ipc';
 import { userStore } from './lib/electron-store';
@@ -61,6 +62,8 @@ const createWindow = async () => {
     if (env.MODE === 'development') {
       mainWindow?.webContents.openDevTools();
     }
+
+    autoUpdater.checkForUpdatesAndNotify();
   });
 
   mainWindow.webContents.once('did-finish-load', () => {
@@ -108,6 +111,10 @@ ipcMain.answerRenderer('app:info', () => ({
   version: app.getVersion(),
 }));
 
+ipcMain.answerRenderer('updater:check', () => {
+  autoUpdater.checkForUpdatesAndNotify();
+});
+
 ipcMain.answerRenderer('get:workspaces', getWorkspaces);
 ipcMain.answerRenderer('get:repository', helper.getRepository);
 ipcMain.answerRenderer('get:package-manager', helper.getPackageManager);
diff --git a/packages/renderer/src/components/app/bottom/BottomAbout.vue b/packages/renderer/src/components/app/bottom/BottomAbout.vue
index 9f28ffd..d2373b8 100644
--- a/packages/renderer/src/components/app/bottom/BottomAbout.vue
+++ b/packages/renderer/src/components/app/bottom/BottomAbout.vue
@@ -59,19 +59,24 @@ function checkUpdate() {
 
   fetch(`https://api.github.com/repos/kholid060/projectile/releases/latest`)
     .then((response) => response.json())
-    .then((result) => {
+    .then(async (result) => {
       if (!result.tag_name) throw new Error();
 
       const isLatest = result.tag_name === `v${props.version}`;
+      const { ipcRenderer } = window.electron;
 
-      window.electron.ipcRenderer.callMain('dialog:message', {
+      await ipcRenderer.callMain('dialog:message', {
         type: 'info',
         title: isLatest ? 'Check for update' : 'Found Updates',
         message: isLatest
           ? "You're using the latest version of the app"
-          : `Found updates, Projectile ${result.tag_name}`,
+          : `Found update for Projectile ${result.tag_name}`,
       });
 
+      if (!isLatest) {
+        await ipcRenderer.callMain('updater:check');
+      }
+
       loading.value = false;
     })
     .catch((error) => {
diff --git a/packages/renderer/src/components/app/bottom/BottomPackagesQueue.vue b/packages/renderer/src/components/app/bottom/BottomPackagesQueue.vue
index e1ed2e3..0979fda 100644
--- a/packages/renderer/src/components/app/bottom/BottomPackagesQueue.vue
+++ b/packages/renderer/src/components/app/bottom/BottomPackagesQueue.vue
@@ -41,14 +41,13 @@
           </li>
         </ul>
       </div>
-      <div
-        class="bg-gray-900 text-gray-200 text-sm rounded-lg min-w-[200px]"
-      >
+      <div class="bg-gray-900 text-gray-200 text-sm rounded-lg min-w-[200px]">
         <p class="flex-1 text-gray-400 p-2">Logs</p>
         <pre
           class="max-h-64 max-w-sm overflow-auto scroll px-2 pb-2"
-          style="font-family: 'Jetbrains mono', monospace;"
-        >{{ logs }}</pre>
+          style="font-family: 'Jetbrains mono', monospace"
+          >{{ logs }}</pre
+        >
       </div>
     </div>
   </ui-popover>
@@ -164,7 +163,9 @@ export default {
       logs.value = '';
 
       ipcRenderer.callMain('terminal:log').then((data) => {
-        const terminalId = Object.keys(data).find((item) => item.startsWith('package'));
+        const terminalId = Object.keys(data).find((item) =>
+          item.startsWith('package')
+        );
 
         if (!terminalId) return;
 
diff --git a/packages/renderer/src/components/app/bottom/BottomTerminal.vue b/packages/renderer/src/components/app/bottom/BottomTerminal.vue
index d8726d6..8b0ba6c 100644
--- a/packages/renderer/src/components/app/bottom/BottomTerminal.vue
+++ b/packages/renderer/src/components/app/bottom/BottomTerminal.vue
@@ -29,7 +29,7 @@ export default {
     const ptyDataListener = ipcRenderer.answerMain(
       'terminal-pty-data',
       ({ data, name }) => {
-        if (!terminal || name !== props.activeTerminal || !isDone.value) return;
+        if (!terminal || name !== props.activeTerminal || !isDone.value || !data) return;
 
         terminal.write(data);
       }
@@ -43,8 +43,8 @@ export default {
       ipcRenderer
         .callMain('terminal:log', props.activeTerminal)
         .then((data) => {
-          terminal.reset();
-          terminal.write(data.log);
+          terminal?.reset();
+          terminal?.write(data?.log ?? '');
           isDone.value = true;
         });
     }
diff --git a/packages/renderer/src/components/app/sidebar/ProjectSidebar.vue b/packages/renderer/src/components/app/sidebar/ProjectSidebar.vue
index ba2ca62..9aaa326 100644
--- a/packages/renderer/src/components/app/sidebar/ProjectSidebar.vue
+++ b/packages/renderer/src/components/app/sidebar/ProjectSidebar.vue
@@ -26,7 +26,7 @@
     </option>
   </ui-select>
   <ui-list class="space-y-1 text-gray-200">
-    <ui-list-item tag="router-link" to="/">
+    <ui-list-item tag="router-link" to="/" title="Ctrl+Shift+1">
       <v-mdi name="mdi-home-variant-outline" class="mr-2"></v-mdi>
       <span>Home</span>
     </ui-list-item>
@@ -35,6 +35,7 @@
       :key="item.id"
       :active="item.id === $route.name"
       :to="`/project/${$route.params.id}/${item.path}`"
+      :title="item.title"
       tag="router-link"
     >
       <v-mdi :name="item.icon" class="mr-2"></v-mdi>
@@ -43,8 +44,9 @@
   </ui-list>
 </template>
 <script>
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import Mousetrap from 'mousetrap';
 import Project from '@/models/project';
 
 export default {
@@ -55,18 +57,21 @@ export default {
         id: 'project-packages',
         icon: 'mdi-puzzle-outline',
         path: '',
+        title: 'Ctrl+Shift+2',
       },
       {
         name: 'Scripts',
         id: 'project-id-scripts',
         icon: 'mdi-clipboard-text-outline',
         path: 'scripts',
+        title: 'Ctrl+Shift+3',
       },
       {
         name: 'Boards',
         id: 'project-id-boards',
         icon: 'mdi-view-dashboard-outline',
         path: 'boards',
+        title: 'Ctrl+Shift+4',
       },
     ];
 
@@ -75,6 +80,13 @@ export default {
 
     const rootId = ref('');
 
+    const shortcuts = {
+      'mod+shift+1': () => router.push('/'),
+      'mod+shift+2': () => router.push(`/project/${route.params.id}`),
+      'mod+shift+3': () => router.push(`/project/${route.params.id}/scripts`),
+      'mod+shift+4': () => router.push(`/project/${route.params.id}/boards`),
+    };
+
     const projects = computed(() =>
       Project.query()
         .where('isMonorepo', false)
@@ -98,6 +110,13 @@ export default {
       const project = Project.find(route.params.id);
 
       rootId.value = project.isMonorepo ? project.rootId : route.params.id;
+
+      Mousetrap.bind(Object.keys(shortcuts), (event, combo) => {
+        shortcuts[combo]();
+      });
+    });
+    onUnmounted(() => {
+      Mousetrap.unbind(Object.keys(shortcuts));
     });
 
     return {
diff --git a/packages/renderer/src/components/home/HomeProjects.vue b/packages/renderer/src/components/home/HomeProjects.vue
index 8d4db38..2f150ab 100644
--- a/packages/renderer/src/components/home/HomeProjects.vue
+++ b/packages/renderer/src/components/home/HomeProjects.vue
@@ -87,3 +87,8 @@ export default {
   },
 };
 </script>
+<style>
+.project-card.is-active {
+  @apply ring-2 ring-primary;
+}
+</style>
diff --git a/packages/renderer/src/components/home/view/ViewGrid.vue b/packages/renderer/src/components/home/view/ViewGrid.vue
index 0076a62..51fdc37 100644
--- a/packages/renderer/src/components/home/view/ViewGrid.vue
+++ b/packages/renderer/src/components/home/view/ViewGrid.vue
@@ -4,7 +4,9 @@
       <ui-card
         v-for="project in projects"
         :key="project.id"
-        class="list-transition hover:ring-2 hover:ring-gray-700"
+        :data-project-id="project.id"
+        :data-project-name="project.name"
+        class="list-transition hover:ring-2 hover:ring-gray-700 project-card"
       >
         <router-link :to="`/project/${project.id}`" class="block text-overflow">
           {{ project.name }}
diff --git a/packages/renderer/src/components/home/view/ViewList.vue b/packages/renderer/src/components/home/view/ViewList.vue
index df8d349..e192ed7 100644
--- a/packages/renderer/src/components/home/view/ViewList.vue
+++ b/packages/renderer/src/components/home/view/ViewList.vue
@@ -3,7 +3,9 @@
     <ui-list-item
       v-for="project in projects"
       :key="project.id"
-      class="group even:bg-gray-500 even:bg-opacity-5"
+      :data-project-id="project.id"
+      :data-project-name="project.name"
+      class="group even:bg-gray-500 even:bg-opacity-5 project-card"
     >
       <ui-button
         class="mr-4"
diff --git a/packages/renderer/src/components/package/AddPackageModal.vue b/packages/renderer/src/components/package/AddPackageModal.vue
index 8fa4cd1..ea90682 100644
--- a/packages/renderer/src/components/package/AddPackageModal.vue
+++ b/packages/renderer/src/components/package/AddPackageModal.vue
@@ -53,7 +53,10 @@
           lazy
         ></ui-img>
         <div class="text-overflow flex-1 mr-4">
-          <p class="text-overflow">
+          <p
+            class="text-overflow cursor-pointer"
+            @click="packageDetails(item.package.name)"
+          >
             {{ item.package.name }}
             <span class="text-gray-300 text-sm"
               >({{ item.package.version }})</span
diff --git a/packages/renderer/src/components/ui/Select.vue b/packages/renderer/src/components/ui/Select.vue
index a4e9ea9..77f9883 100644
--- a/packages/renderer/src/components/ui/Select.vue
+++ b/packages/renderer/src/components/ui/Select.vue
@@ -11,7 +11,7 @@
         bg-gray-100 bg-opacity-5
         hover:bg-opacity-10
         pl-4
-        pr-8
+        pr-10
         py-2
         z-10
         relative
diff --git a/packages/renderer/src/pages/index.vue b/packages/renderer/src/pages/index.vue
index 7c63a12..f56bf17 100644
--- a/packages/renderer/src/pages/index.vue
+++ b/packages/renderer/src/pages/index.vue
@@ -36,9 +36,19 @@
 }
 </route>
 <script>
-import { computed, shallowReactive, onMounted } from 'vue';
+import {
+  computed,
+  shallowRef,
+  shallowReactive,
+  onMounted,
+  onUnmounted,
+  watch,
+} from 'vue';
 import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 import { nanoid } from 'nanoid';
+import { debounce } from '@/utils/helper';
+import KeyboardNavigation from '@/utils/keyboardNavigation';
 import Project from '@/models/project';
 import HomeNav from '@/components/home/HomeNav.vue';
 import HomeProjects from '@/components/home/HomeProjects.vue';
@@ -47,8 +57,11 @@ export default {
   components: { HomeNav, HomeProjects },
   setup() {
     const store = useStore();
+    const router = useRouter();
+
     const { ipcRenderer, existsSync, path } = window.electron;
 
+    const keyboardNavigation = shallowRef(null);
     const state = shallowReactive({
       search: '',
       viewType: 'list',
@@ -143,9 +156,64 @@ export default {
         store.dispatch('saveToStorage', 'projects');
       });
     }
+    function deleteProject(name, id) {
+      const confirm = window.confirm(`Are you sure want to delete "${name}"?`);
+
+      if (confirm) Project.delete(id);
+    }
+
+    const navigationBreakpoints = {
+      default: 2,
+      '(min-width: 1024px)': 3,
+      '(min-width: 1280px)': 4,
+    };
+
+    watch(
+      projects,
+      debounce(() => {
+        keyboardNavigation.value?.refresh();
+      }, 200)
+    );
+    watch(
+      () => state.viewType,
+      debounce((value) => {
+        keyboardNavigation.value?.setOptions({
+          breakpoints:
+            value === 'grid' ? navigationBreakpoints : { default: 1 },
+        });
+      }, 200)
+    );
 
     onMounted(() => {
       state.viewType = localStorage.getItem('view-type') || 'list';
+
+      keyboardNavigation.value = new KeyboardNavigation({
+        itemSelector: '.project-card',
+      });
+
+      keyboardNavigation.value.on('keydown', ({ key }, activeItem) => {
+        if (!activeItem) return;
+
+        const { projectId, projectName } = activeItem.dataset;
+
+        switch (key) {
+          case 'Enter':
+            router.push(`/project/${projectId}`);
+            break;
+          case 'Backspace':
+          case 'Delete':
+            deleteProject(projectName, projectId);
+            break;
+          default:
+        }
+      });
+
+      setTimeout(() => {
+        keyboardNavigation.value.refresh();
+      }, 250);
+    });
+    onUnmounted(() => {
+      keyboardNavigation.value.destroy();
     });
 
     return {
diff --git a/packages/renderer/src/pages/project/[id]/boards.vue b/packages/renderer/src/pages/project/[id]/boards.vue
index 14a07d0..3908f9f 100644
--- a/packages/renderer/src/pages/project/[id]/boards.vue
+++ b/packages/renderer/src/pages/project/[id]/boards.vue
@@ -3,7 +3,7 @@
     <div class="flex items-center mb-8">
       <h2 class="text-2xl font-semibold text-overflow">Boards</h2>
       <div class="flex-grow"></div>
-      <ui-button variant="primary" @click="addBoard">
+      <ui-button variant="primary" title="Ctrl+Shift+N" @click="addBoard">
         <v-mdi name="mdi-plus" class="mr-1 -ml-2"></v-mdi>
         <span>Board</span>
       </ui-button>
@@ -42,10 +42,11 @@
   </div>
 </template>
 <script>
-import { computed, shallowReactive } from 'vue';
+import { computed, shallowReactive, onMounted, onUnmounted } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 import Draggable from 'vuedraggable/src/vuedraggable';
+import Mousetrap from 'mousetrap';
 import { useDialog } from '@/composable/dialog';
 import Board from '@/models/board';
 import AddCard from '@/components/boards/AddCard.vue';
@@ -123,6 +124,13 @@ export default {
       store.dispatch('saveToStorage', 'cards');
     }
 
+    onMounted(() => {
+      Mousetrap.bind('mod+shift+n', addBoard);
+    });
+    onUnmounted(() => {
+      Mousetrap.unbind('mod+shift+n');
+    });
+
     return {
       boards,
       addBoard,
diff --git a/packages/renderer/src/utils/keyboardNavigation.js b/packages/renderer/src/utils/keyboardNavigation.js
new file mode 100644
index 0000000..546ed8e
--- /dev/null
+++ b/packages/renderer/src/utils/keyboardNavigation.js
@@ -0,0 +1,147 @@
+class EventHandler {
+  constructor() {
+    this.keydownHandler = this._keydownHandler.bind(this);
+  }
+
+  activeItemIndex() {
+    return this.items.indexOf(this.activeItem);
+  }
+
+  getBreakpoint() {
+    let breakpoint = this.breakpoints?.default || 1;
+
+    Object.keys(this.breakpoints || {}).forEach((mediaQuery) => {
+      if (window.matchMedia(mediaQuery).matches)
+        breakpoint = this.breakpoints[mediaQuery];
+    });
+
+    return breakpoint;
+  }
+
+  _keydownHandler(event) {
+    const keyHandlers = {
+      ArrowUp: this.upHandler.bind(this),
+      ArrowDown: this.downHandler.bind(this),
+      ArrowLeft: this.leftHandler.bind(this),
+      ArrowRight: this.rightHandler.bind(this),
+    };
+    const elementBlacklist = ['INPUT', 'SELECT', 'TEXTAREA'];
+    const isInBlacklist = elementBlacklist.includes(event.target.tagName);
+
+    if (keyHandlers[event.key] && !isInBlacklist) {
+      event.preventDefault();
+
+      this.activeItem?.classList.remove(...this.activeClass);
+      keyHandlers[event.key]();
+      this.activeItem?.classList.add(...this.activeClass);
+      this.activeItem?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    } else if (event.key === 'Enter') {
+      this._fireEvent('select', this.activeItem);
+    }
+
+    this._fireEvent('keydown', event, this.activeItem);
+  }
+
+  upHandler() {
+    const brekpoint = this.getBreakpoint();
+    const prevIndex = this.activeItemIndex() - brekpoint;
+
+    if (prevIndex < 0) this.activeItem = this.items[this.items.length - 1];
+    else this.activeItem = this.items[prevIndex];
+  }
+
+  downHandler() {
+    const brekpoint = this.getBreakpoint();
+    const nextIndex = this.activeItemIndex() + brekpoint;
+
+    if (nextIndex > this.items.length - 1) this.activeItem = this.items[0];
+    else this.activeItem = this.items[nextIndex];
+  }
+
+  leftHandler() {
+    const index = this.activeItemIndex();
+    const prevItem = this.items[index - 1];
+
+    if (prevItem) this.activeItem = prevItem;
+    else if (index <= 0) this.activeItem = this.items[this.items.length - 1];
+  }
+
+  rightHandler() {
+    const index = this.activeItemIndex();
+    const nextItem = this.items[index + 1];
+
+    if (nextItem) this.activeItem = nextItem;
+    else if (index + 1 > this.items.length - 1) this.activeItem = this.items[0];
+  }
+}
+
+class KeyboardNavigation extends EventHandler {
+  constructor({
+    container = document,
+    itemSelector = '',
+    activeClass = 'is-active',
+    breakpoints,
+  }) {
+    super();
+
+    this.itemSelector = itemSelector;
+    this.activeClass = activeClass.split(' ');
+    this.breakpoints = breakpoints;
+    this.container =
+      typeof container === 'string'
+        ? document.querySelector(container)
+        : container;
+    this.activeItem = null;
+    this.items = [];
+    this.listeners = {};
+
+    this._retrieveItems();
+    window.addEventListener('keydown', this.keydownHandler);
+  }
+
+  on(name, callback) {
+    (this.listeners[name] = this.listeners[name] || []).push(callback);
+  }
+
+  refresh() {
+    this._retrieveItems();
+    this.activeItem?.classList.remove(...this.activeClass);
+    this.activeItem = null;
+  }
+
+  destroy() {
+    window.removeEventListener('keydown', this.keydownHandler);
+
+    this.listeners = {};
+    this.activeItem?.classList.remove(...this.activeClass);
+  }
+
+  setOptions(options = {}, refresh = true) {
+    const mutableKeys = [
+      'container',
+      'itemSelector',
+      'activeClass',
+      'breakpoints',
+    ];
+
+    for (const key in options) {
+      if (!mutableKeys.includes(key)) continue;
+
+      this[key] = options[key];
+    }
+
+    if (refresh) this.refresh();
+  }
+
+  _retrieveItems() {
+    this.items = [...this.container.querySelectorAll(this.itemSelector)];
+  }
+
+  _fireEvent(name, ...params) {
+    (this.listeners[name] || []).forEach((callback) => {
+      callback(...params);
+    });
+  }
+}
+
+export default KeyboardNavigation;