diff --git a/src/renderer/App.svelte b/src/renderer/App.svelte
index 7ef2df1..9d0ddf6 100644
--- a/src/renderer/App.svelte
+++ b/src/renderer/App.svelte
@@ -23,6 +23,7 @@
   import Menubar from './components/Menubar.svelte'
   import IspBlock from './views/IspBlock.svelte'
   import { Toaster } from 'svelte-sonner'
+  import Logout from './components/Logout.svelte'
 
   setContext('view', view)
 </script>
@@ -32,6 +33,7 @@
   <IspBlock />
   <Menubar bind:page={$page} />
   <ViewAnime />
+  <Logout />
   <Sidebar bind:page={$page} />
   <div class='overflow-hidden content-wrapper h-full z-10'>
     <RSSView />
diff --git a/src/renderer/components/Logout.svelte b/src/renderer/components/Logout.svelte
new file mode 100644
index 0000000..fe0d78a
--- /dev/null
+++ b/src/renderer/components/Logout.svelte
@@ -0,0 +1,47 @@
+<script context='module'>
+  import { click } from '@/modules/click.js'
+  import { writable } from 'simple-store-svelte'
+
+  export const logout = writable(false)
+
+  function confirm () {
+    localStorage.removeItem('ALtoken')
+    location.hash = ''
+    location.reload()
+  }
+</script>
+
+<script>
+  let modal
+  function close () {
+    $logout = false
+  }
+  function checkClose ({ keyCode }) {
+    if (keyCode === 27) close()
+  }
+  $: $logout && modal?.focus()
+</script>
+
+<div class='modal z-40' class:show={$logout}>
+  <div class='modal-dialog' on:pointerup|self={close} on:keydown={checkClose} tabindex='-1' role='button' bind:this={modal}>
+    <div class='modal-content d-flex justify-content-center flex-column'>
+      <button class='close pointer z-30 top-20 right-0 position-absolute' type='button' use:click={close}> &times; </button>
+      <h5 class='modal-title'>Log Out</h5>
+      <p>
+        Are You Sure You Want To Sign Out?
+      </p>
+      <div class='text-right mt-20'>
+        <button class='btn mr-5' type='button' on:click={close}>Cancel</button>
+        <button class='btn btn-danger' type='button' on:click={confirm}>Sign Out</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .close {
+    top: 4rem !important;
+    left: unset !important;
+    right: 2.5rem !important;
+  }
+</style>
diff --git a/src/renderer/components/Sidebar.svelte b/src/renderer/components/Sidebar.svelte
index 0647ff3..d791265 100644
--- a/src/renderer/components/Sidebar.svelte
+++ b/src/renderer/components/Sidebar.svelte
@@ -5,15 +5,14 @@
   import { platformMap, set } from '../views/Settings.svelte'
   import { toast } from 'svelte-sonner'
   import { click } from '@/modules/click.js'
+  import { logout } from './Logout.svelte'
   const view = getContext('view')
   export let page
   const links = [
     {
       click: () => {
         if (alID) {
-          localStorage.removeItem('ALtoken')
-          location.hash = ''
-          location.reload()
+          $logout = true
         } else {
           window.IPC.emit('open', 'https://anilist.co/api/v2/oauth/authorize?client_id=4254&response_type=token') // Change redirect_url to miru://auth
           if (platformMap[window.version.platform] === 'Linux') {