From 9acf663f336c16140cdb76fef8aefda024316028 Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Sat, 24 Aug 2024 12:40:53 +0200
Subject: [PATCH] feat: show filler episodes perf: optimise fonts perf: use svg
 icons fix: exit fullscreen on navigation fix: exit rss on navigation

---
 common/App.svelte                             |   3 +
 common/components/Navbar.svelte               |  48 ++++-
 common/components/NavbarLink.svelte           |  69 +-----
 common/components/Search.svelte               |  35 ++-
 common/components/Sidebar.svelte              | 120 ++++-------
 common/components/SidebarLink.svelte          |  68 +-----
 common/components/banner/FullBanner.svelte    |   9 +-
 common/components/cards/EpisodeCard.svelte    |  11 +-
 .../cards/EpisodePreviewCard.svelte           |  21 +-
 common/components/cards/PreviewCard.svelte    |  22 +-
 common/components/cards/SmallCard.svelte      |  11 +-
 common/css.css                                |  58 +++--
 common/main.js                                |   2 -
 common/modules/animeresolver.js               |   3 +-
 common/package.json                           |   6 +-
 common/views/Player/Player.svelte             | 130 +++++++++---
 .../Settings/HomeSectionsSettings.svelte      |  25 +--
 .../views/Settings/InterfaceSettings.svelte   |   3 +-
 common/views/Settings/PlayerSettings.svelte   |   3 +-
 common/views/Settings/Settings.svelte         |  35 ++-
 common/views/Settings/TorrentSettings.svelte  |   3 +-
 common/views/TorrentSearch/TorrentCard.svelte |   9 +-
 common/views/TorrentSearch/TorrentMenu.svelte |   3 +-
 .../views/TorrentSearch/TorrentModal.svelte   |   2 +-
 common/views/ViewAnime/Controls.svelte        | 161 --------------
 common/views/ViewAnime/Details.svelte         |  28 ++-
 common/views/ViewAnime/EpisodeList.svelte     |  25 ++-
 common/views/ViewAnime/Following.svelte       |   5 +-
 common/views/ViewAnime/ViewAnime copy.svelte  | 199 ------------------
 common/views/ViewAnime/ViewAnime.svelte       |  58 +++--
 common/views/WatchTogether/Lobby.svelte       |  10 +-
 .../views/WatchTogether/WatchTogether.svelte  |   8 +-
 common/webpack.config.cjs                     |   1 +
 pnpm-lock.yaml                                |  40 ++--
 34 files changed, 452 insertions(+), 782 deletions(-)
 delete mode 100644 common/views/ViewAnime/Controls.svelte
 delete mode 100644 common/views/ViewAnime/ViewAnime copy.svelte

diff --git a/common/App.svelte b/common/App.svelte
index 4052dab..7169cc3 100644
--- a/common/App.svelte
+++ b/common/App.svelte
@@ -3,6 +3,7 @@
   import { writable } from 'simple-store-svelte'
   import { anilistClient } from '@/modules/anilist.js'
   import IPC from '@/modules/ipc.js'
+  import { rss } from './views/TorrentSearch/TorrentModal.svelte'
 
   export const page = writable('home')
   export const view = writable(null)
@@ -37,6 +38,8 @@
     if (!state) return
     ignoreNext = true
     view.set(null)
+    rss.set(null)
+    if (document.fullscreenElement) document.exitFullscreen()
     if (state.type === 'page') {
       page.set(state.value)
     } else {
diff --git a/common/components/Navbar.svelte b/common/components/Navbar.svelte
index fbea68a..ba0789f 100644
--- a/common/components/Navbar.svelte
+++ b/common/components/Navbar.svelte
@@ -4,6 +4,8 @@
   import { click } from '@/modules/click.js'
   import IPC from '@/modules/ipc.js'
   import NavbarLink from './NavbarLink.svelte'
+  import { MagnifyingGlass } from 'svelte-radix'
+  import { Users, Clock, ListMusic, Settings, Heart } from 'lucide-svelte'
   const view = getContext('view')
   export let page
   function close () {
@@ -15,13 +17,47 @@
 <nav class='navbar navbar-fixed-bottom d-block d-md-none border-0 bg-dark'>
   <div class='navbar-menu h-full d-flex flex-row justify-content-center align-items-center m-0 pb-5' class:animate={page !== 'player'}>
     <img src='./logo_filled.png' class='w-50 h-50 m-10 pointer p-5' alt='ico' use:click={close} />
-    <NavbarLink click={() => { page = 'search' }} _page='search' css='ml-auto' icon='search' {page} />
-    <NavbarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' {page} />
+    <NavbarLink click={() => { page = 'search' }} _page='search' css='ml-auto' icon='search' {page} let:active>
+      <MagnifyingGlass size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' stroke-width={active ? '2' : '0'} stroke='currentColor' />
+    </NavbarLink>
+    <NavbarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' {page} let:active>
+      <Clock size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    </NavbarLink>
     {#if $media?.media}
-      <NavbarLink click={() => { $view = $media.media }} icon='queue_music' {page} />
+      <NavbarLink click={() => { $view = $media.media }} icon='queue_music' {page} let:active>
+        <ListMusic size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+      </NavbarLink>
     {/if}
-    <NavbarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' {page} />
-    <NavbarLink click={() => { IPC.emit('open', 'https://github.com/sponsors/ThaUnknown/') }} icon='favorite' css='ml-auto donate' {page} />
-    <NavbarLink click={() => { page = 'settings' }} _page='settings' icon='settings' {page} />
+    <NavbarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' {page} let:active>
+      <Users size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    </NavbarLink>
+    <NavbarLink click={() => { IPC.emit('open', 'https://github.com/sponsors/ThaUnknown/') }} icon='favorite' css='ml-auto donate' {page} let:active>
+      <Heart size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded donate' strokeWidth={active ? '3.5' : '2'} fill='currentColor' />
+    </NavbarLink>
+    <NavbarLink click={() => { page = 'settings' }} _page='settings' icon='settings' {page} let:active>
+      <Settings size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    </NavbarLink>
   </div>
 </nav>
+
+<style>
+  .navbar .animate :global(.donate) {
+    animation: glow 1s ease-in-out infinite alternate;
+  }
+  .navbar :global(.donate):active {
+    color: #fa68b6 !important;
+  }
+  .navbar :global(.donate) {
+    font-variation-settings: 'FILL' 1;
+    color: #fa68b6;
+    text-shadow: 0 0 1rem #fa68b6;
+  }
+  @keyframes glow {
+    from {
+      filter: drop-shadow(0 0 1rem #fa68b6);
+    }
+    to {
+      filter: drop-shadow(0 0 0.5rem #fa68b6);
+    }
+  }
+</style>
diff --git a/common/components/NavbarLink.svelte b/common/components/NavbarLink.svelte
index 7ec71c8..0327ecc 100644
--- a/common/components/NavbarLink.svelte
+++ b/common/components/NavbarLink.svelte
@@ -3,7 +3,6 @@
 
   let _click = () => {}
   export { _click as click }
-  export let image = ''
   export let page
   export let _page = ''
   export let css = ''
@@ -13,53 +12,20 @@
 <div
   class='navbar-link navbar-link-with-icon pointer overflow-hidden {css}'
   use:click={_click}>
-  {#if image}
-    <span class='material-symbols-outlined rounded' class:filled={page === _page}>
-      <img src={image} class='h-30 rounded' alt='logo' />
-    </span>
-  {:else}
-    <span class='material-symbols-outlined rounded' class:filled={page === _page}>{icon}</span>
-  {/if}
+
+  <span class='rounded d-flex'>
+    <slot active={page === _page}>{icon}</slot>
+  </span>
 </div>
 
 <style>
-  @keyframes glow {
-    from {
-      text-shadow: 0 0 2rem #fa68b6;
-    }
-    to {
-      text-shadow: 0 0 1rem #fa68b6;
-    }
-  }
-  .animate .donate .material-symbols-outlined {
-    animation: glow 1s ease-in-out infinite alternate;
-  }
-  .donate:active .material-symbols-outlined {
-    background: #fff;
-    color: #fa68b6 !important;
-  }
-  .donate .material-symbols-outlined {
-    font-variation-settings: 'FILL' 1;
-    color: #fa68b6;
-    text-shadow: 0 0 1rem #fa68b6;
-  }
-  /* .sidebar-menu {
-    padding-top: 10rem;
-  } */
-  .text {
-    opacity: 1;
-    transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
 
   .navbar-link > span {
     color: #fff;
     border-radius: 0.3rem;
   }
 
-  .material-symbols-outlined {
+  .navbar-link > span {
     color: #fff;
     transition: background .8s cubic-bezier(0.25, 0.8, 0.25, 1), color .8s cubic-bezier(0.25, 0.8, 0.25, 1);
   }
@@ -68,34 +34,9 @@
     background: #fff;
     color: var(--dark-color);
   }
-
   .navbar-link {
     font-size: 1.4rem;
     padding: 0.75rem;
     height: 5.5rem;
   }
-
-  .material-symbols-outlined {
-    font-size: 2.2rem;
-    min-width: 4rem;
-    width: 4rem;
-    height: 4rem;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .navbar-link img {
-    font-size: 2.2rem;
-    width: 3rem;
-    height: 3rem;
-    margin: 0.5rem;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  img {
-    margin-right: var(--sidebar-brand-image-margin-right);
-  }
 </style>
diff --git a/common/components/Search.svelte b/common/components/Search.svelte
index 0dfd169..0855817 100644
--- a/common/components/Search.svelte
+++ b/common/components/Search.svelte
@@ -14,6 +14,8 @@
   import { click } from '@/modules/click.js'
   import { page } from '@/App.svelte'
   import { toast } from 'svelte-sonner'
+  import { MagnifyingGlass, Image } from 'svelte-radix'
+  import { Type, Drama, Leaf, MonitorPlay, Tv, ArrowDownWideNarrow, Trash2, Tags, Grid3X3, Grid2X2 } from 'lucide-svelte'
 
   export let search
   let searchTextInput
@@ -58,12 +60,12 @@
   <div class='row'>
     <div class='col-lg col-4 p-10 d-flex flex-column justify-content-end'>
       <div class='pb-10 font-size-24 font-weight-semi-bold d-flex'>
-        <div class='material-symbols-outlined mr-10 font-size-30'>title</div>
+        <Type class='mr-10' size='3rem' />
         Title
       </div>
       <div class='input-group'>
         <div class='input-group-prepend'>
-          <span class='input-group-text d-flex material-symbols-outlined bg-dark-light pr-0 font-size-18'>search</span>
+          <MagnifyingGlass size='2.75rem' class='input-group-text bg-dark-light pr-0' />
         </div>
         <input
           bind:this={searchTextInput}
@@ -78,7 +80,7 @@
     </div>
     <div class='col-lg col-4 p-10 d-flex flex-column justify-content-end'>
       <div class='pb-10 font-size-24 font-weight-semi-bold d-flex'>
-        <div class='material-symbols-outlined mr-10 font-size-30'>theater_comedy</div>
+        <Drama class='mr-10' size='3rem' />
         Genre
       </div>
       <div class='input-group'>
@@ -107,7 +109,7 @@
     </div>
     <div class='col-lg col-4 p-10 d-flex flex-column justify-content-end'>
       <div class='pb-10 font-size-24 font-weight-semi-bold d-flex'>
-        <div class='material-symbols-outlined mr-10 font-size-30'>spa</div>
+        <Leaf class='mr-10' size='3rem' />
         Season
       </div>
       <div class='input-group'>
@@ -129,7 +131,7 @@
     </div>
     <div class='col p-10 d-flex flex-column justify-content-end'>
       <div class='pb-10 font-size-24 font-weight-semi-bold d-flex'>
-        <div class='material-symbols-outlined mr-10 font-size-30'>monitor</div>
+        <Tv class='mr-10' size='3rem' />
         Format
       </div>
       <div class='input-group'>
@@ -145,7 +147,7 @@
     </div>
     <div class='col p-10 d-flex flex-column justify-content-end'>
       <div class='pb-10 font-size-24 font-weight-semi-bold d-flex'>
-        <div class='material-symbols-outlined mr-10 font-size-30'>live_tv</div>
+        <MonitorPlay class='mr-10' size='3rem' />
         Status
       </div>
       <div class='input-group'>
@@ -160,7 +162,7 @@
     </div>
     <div class='col p-10 d-flex flex-column justify-content-end'>
       <div class='pb-10 font-size-24 font-weight-semi-bold d-flex'>
-        <div class='material-symbols-outlined mr-10 font-size-30'>sort</div>
+        <ArrowDownWideNarrow class='mr-10' size='3rem' />
         Sort
       </div>
       <div class='input-group'>
@@ -177,37 +179,34 @@
     <input type='file' class='d-none' id='search-image' accept='image/*' on:input|preventDefault|stopPropagation={handleFile} />
     <div class='col-auto p-10 d-flex'>
       <div class='align-self-end'>
-        <button class='btn btn-square bg-dark-light material-symbols-outlined font-size-18 px-5 align-self-end border-0' type='button'>
-          <label for='search-image' class='pointer mb-0'>
-            image
+        <button class='btn btn-square bg-dark-light px-5 align-self-end border-0' type='button'>
+          <label for='search-image' class='pointer mb-0 d-flex align-items-center justify-content-center'>
+            <Image size='1.625rem' />
           </label>
         </button>
       </div>
     </div>
     <div class='col-auto p-10 d-flex'>
       <div class='align-self-end'>
-        <button class='btn btn-square bg-dark-light material-symbols-outlined font-size-18 px-5 align-self-end border-0' type='button' use:click={searchClear} class:text-primary={!!sanitisedSearch?.length || search.disableSearch || search.clearNext}>
-          delete
+        <button class='btn btn-square bg-dark-light d-flex align-items-center justify-content-center px-5 align-self-end border-0' type='button' use:click={searchClear} class:text-primary={!!sanitisedSearch?.length || search.disableSearch || search.clearNext}>
+          <Trash2 size='1.625rem' />
         </button>
       </div>
     </div>
   </div>
   <div class='w-full px-10 pt-10 h-50 d-flex flex-colum align-items-center'>
     {#if sanitisedSearch?.length}
-      <span class='material-symbols-outlined font-size-24 mr-20 filled text-dark-light'>sell</span>
+      <Tags class='text-dark-light mr-20' size='3rem' />
       {#each sanitisedSearch as badge}
         <span class='badge bg-light border-0 py-5 px-10 text-capitalize mr-20 text-white text-nowrap'>{('' + badge).replace(/_/g, ' ').toLowerCase()}</span>
       {/each}
     {/if}
-    <span class='material-symbols-outlined font-size-24 mr-10 filled ml-auto text-dark-light pointer' class:text-muted={$settings.cards === 'small'} use:click={() => changeCardMode('small')}>grid_on</span>
-    <span class='material-symbols-outlined font-size-24 filled text-dark-light pointer' class:text-muted={$settings.cards === 'full'} use:click={() => changeCardMode('full')}>grid_view</span>
+    <span class='mr-10 filled ml-auto text-dark-light pointer' class:text-muted={$settings.cards === 'small'} use:click={() => changeCardMode('small')}><Grid3X3 size='2.25rem' /></span>
+    <span class='text-dark-light pointer' class:text-muted={$settings.cards === 'full'} use:click={() => changeCardMode('full')}><Grid2X2 size='2.25rem' /></span>
   </div>
 </form>
 
 <style>
-  .text-dark-light {
-    color: var(--gray-color-light);
-  }
   .input-group,
   .container-fluid button, .pointer {
     transition: scale 0.2s ease;
diff --git a/common/components/Sidebar.svelte b/common/components/Sidebar.svelte
index 2ea1241..85fd051 100644
--- a/common/components/Sidebar.svelte
+++ b/common/components/Sidebar.svelte
@@ -8,6 +8,8 @@
   import { logout } from './Logout.svelte'
   import IPC from '@/modules/ipc.js'
   import SidebarLink from './SidebarLink.svelte'
+  import { Clock, Download, Heart, Home, ListMusic, LogIn, Settings, Users } from 'lucide-svelte'
+  import { MagnifyingGlass } from 'svelte-radix'
 
   let updateState = ''
 
@@ -40,105 +42,71 @@
 <div class='sidebar z-30 d-md-block' class:animated={$settings.expandingSidebar}>
   <div class='sidebar-overlay pointer-events-none h-full position-absolute' />
   <div class='sidebar-menu h-full d-flex flex-column justify-content-center align-items-center m-0 pb-5' class:animate={page !== 'player'}>
-    <SidebarLink click={handleAlLogin} icon='login' text={anilistClient.userID?.viewer?.data?.Viewer ? 'Logout' : 'Login With AniList'} css='mt-auto' {page} image={anilistClient.userID?.viewer?.data?.Viewer?.avatar.medium} />
-    <SidebarLink click={() => { page = 'home' }} _page='home' icon='home' text='Home' {page} />
-    <SidebarLink click={() => { page = 'search' }} _page='search' icon='search' text='Search' {page} />
-    <SidebarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' text='Schedule' {page} />
+    <SidebarLink click={handleAlLogin} icon='login' text={anilistClient.userID?.viewer?.data?.Viewer ? 'Logout' : 'Login With AniList'} css='mt-auto' {page} image={anilistClient.userID?.viewer?.data?.Viewer?.avatar.medium}>
+      <LogIn size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' />
+    </SidebarLink>
+    <SidebarLink click={() => { page = 'home' }} _page='home' text='Home' {page} let:active>
+      <Home size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    </SidebarLink>
+    <SidebarLink click={() => { page = 'search' }} _page='search' text='Search' {page} let:active>
+      <MagnifyingGlass size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' stroke-width={active ? '2' : '0'} stroke='currentColor' />
+    </SidebarLink>
+    <SidebarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' text='Schedule' {page} let:active>
+      <Clock size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    </SidebarLink>
     {#if $media?.media}
-      <SidebarLink click={() => { $view = $media.media }} icon='queue_music' text='Now Playing' {page} />
+      <SidebarLink click={() => { $view = $media.media }} icon='queue_music' text='Now Playing' {page} let:active>
+        <ListMusic size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+      </SidebarLink>
     {/if}
-    <SidebarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' text='Watch Together' {page} />
-    <SidebarLink click={() => { IPC.emit('open', 'https://github.com/sponsors/ThaUnknown/') }} icon='favorite' text='Support This App' css='mt-auto donate' {page} />
+    <SidebarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' text='Watch Together' {page} let:active>
+      <Users size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    </SidebarLink>
+    <SidebarLink click={() => { IPC.emit('open', 'https://github.com/sponsors/ThaUnknown/') }} icon='favorite' text='Support This App' css='mt-auto' {page} let:active>
+      <Heart size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded donate' strokeWidth={active ? '3.5' : '2'} fill='currentColor' />
+    </SidebarLink>
     {#if updateState === 'downloading'}
-      <SidebarLink click={() => { toast('Update is downloading...') }} icon='download' text='Update Downloading...' {page} />
+      <SidebarLink click={() => { toast('Update is downloading...') }} icon='download' text='Update Downloading...' {page} let:active>
+        <Download size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+      </SidebarLink>
     {:else if updateState === 'ready'}
-      <SidebarLink click={() => { IPC.emit('quit-and-install') }} css='update' icon='download' text='Update Ready!' {page} />
+      <SidebarLink click={() => { IPC.emit('quit-and-install') }} icon='download' text='Update Ready!' {page} let:active>
+        <Download size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded update' strokeWidth={active ? '3.5' : '2'} />
+      </SidebarLink>
     {/if}
-    <SidebarLink click={() => { page = 'settings' }} _page='settings' icon='settings' text='Settings' {page} />
+    <SidebarLink click={() => { page = 'settings' }} _page='settings' icon='settings' text='Settings' {page} let:active>
+      <Settings size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    </SidebarLink>
   </div>
 </div>
 
 <style>
-  @keyframes glow {
-    from {
-      text-shadow: 0 0 2rem #fa68b6;
-    }
-    to {
-      text-shadow: 0 0 1rem #fa68b6;
-    }
-  }
-  .animate .donate .material-symbols-outlined {
+  .sidebar .animate :global(.donate) {
     animation: glow 1s ease-in-out infinite alternate;
   }
-  .donate:hover .material-symbols-outlined {
-    background: #fff;
+  .sidebar :global(.donate):hover {
     color: #fa68b6 !important;
   }
-  .donate .material-symbols-outlined {
+  .sidebar :global(.donate) {
     font-variation-settings: 'FILL' 1;
     color: #fa68b6;
     text-shadow: 0 0 1rem #fa68b6;
   }
-  .update .material-symbols-outlined {
+  :global(.update) {
     color: #47cb6a;
     font-variation-settings: 'FILL' 1;
   }
+  @keyframes glow {
+    from {
+      filter: drop-shadow(0 0 1rem #fa68b6);
+    }
+    to {
+      filter: drop-shadow(0 0 0.5rem #fa68b6);
+    }
+  }
   .sidebar-menu {
     padding-top: 10rem;
   }
-  .text {
-    opacity: 1;
-    transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .sidebar-link > span {
-    color: #fff;
-    border-radius: 0.3rem;
-  }
-
-  .material-symbols-outlined {
-    color: #fff;
-    transition: background .8s cubic-bezier(0.25, 0.8, 0.25, 1), color .8s cubic-bezier(0.25, 0.8, 0.25, 1);
-  }
-
-  .sidebar-link:hover > span > *:nth-child(1) {
-    background: #fff;
-    color: var(--dark-color);
-  }
-
-  .sidebar-link {
-    width: 100%;
-    font-size: 1.4rem;
-    padding: 0.75rem 1.5rem;
-    height: 5.5rem;
-  }
-
-  .material-symbols-outlined {
-    font-size: 2.2rem;
-    min-width: 4rem;
-    width: 4rem;
-    height: 4rem;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .sidebar-link img {
-    font-size: 2.2rem;
-    width: 3rem;
-    height: 3rem;
-    margin: 0.5rem;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  img {
-    margin-right: var(--sidebar-brand-image-margin-right);
-  }
 
   .sidebar {
     transition: width .8s cubic-bezier(0.25, 0.8, 0.25, 1), left .8s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
diff --git a/common/components/SidebarLink.svelte b/common/components/SidebarLink.svelte
index 80f9352..4ad5c29 100644
--- a/common/components/SidebarLink.svelte
+++ b/common/components/SidebarLink.svelte
@@ -11,50 +11,24 @@
   export let icon = ''
 </script>
 
-<div
-  class='sidebar-link sidebar-link-with-icon pointer overflow-hidden {css}'
+<div class='sidebar-link sidebar-link-with-icon pointer overflow-hidden {css}'
   use:click={_click}>
   <span class='text-nowrap d-flex align-items-center w-full h-full'>
     {#if image}
-      <span class='material-symbols-outlined rounded' class:filled={page === _page}>
+      <span class='rounded d-flex'>
         <img src={image} class='h-30 rounded' alt='logo' />
       </span>
       <span class='text ml-20'>{text}</span>
     {:else}
-      <span class='material-symbols-outlined rounded' class:filled={page === _page}>{icon}</span>
+      <span class='rounded d-flex'>
+        <slot active={page === _page}>{icon}</slot>
+      </span>
       <span class='text ml-20'>{text}</span>
     {/if}
   </span>
 </div>
 
 <style>
-  @keyframes glow {
-    from {
-      text-shadow: 0 0 2rem #fa68b6;
-    }
-    to {
-      text-shadow: 0 0 1rem #fa68b6;
-    }
-  }
-  .animate .donate .material-symbols-outlined {
-    animation: glow 1s ease-in-out infinite alternate;
-  }
-  .donate:hover .material-symbols-outlined {
-    background: #fff;
-    color: #fa68b6 !important;
-  }
-  .donate .material-symbols-outlined {
-    font-variation-settings: 'FILL' 1;
-    color: #fa68b6;
-    text-shadow: 0 0 1rem #fa68b6;
-  }
-  .update .material-symbols-outlined {
-    color: #47cb6a;
-    font-variation-settings: 'FILL' 1;
-  }
-  .sidebar-menu {
-    padding-top: 10rem;
-  }
   .text {
     opacity: 1;
     transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -68,12 +42,12 @@
     border-radius: 0.3rem;
   }
 
-  .material-symbols-outlined {
+  .sidebar-link > span > span:nth-child(1) {
     color: #fff;
     transition: background .8s cubic-bezier(0.25, 0.8, 0.25, 1), color .8s cubic-bezier(0.25, 0.8, 0.25, 1);
   }
 
-  .sidebar-link:hover > span > *:nth-child(1) {
+  .sidebar-link:hover > span > span:nth-child(1) {
     background: #fff;
     color: var(--dark-color);
   }
@@ -85,16 +59,6 @@
     height: 5.5rem;
   }
 
-  .material-symbols-outlined {
-    font-size: 2.2rem;
-    min-width: 4rem;
-    width: 4rem;
-    height: 4rem;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
-
   .sidebar-link img {
     font-size: 2.2rem;
     width: 3rem;
@@ -108,22 +72,4 @@
   img {
     margin-right: var(--sidebar-brand-image-margin-right);
   }
-
-  .sidebar {
-    transition: width .8s cubic-bezier(0.25, 0.8, 0.25, 1), left .8s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
-    background: none !important;
-    overflow-y: unset;
-    overflow-x: visible;
-    left: unset;
-  }
-  .sidebar.animated:hover {
-    width: 22rem
-  }
-  .sidebar-overlay {
-    width: var(--sidebar-width);
-    transition: width .8s cubic-bezier(0.25, 0.8, 0.25, 1), left .8s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
-    background: var(--sidebar-gradient);
-    backdrop-filter: blur(2px);
-    z-index: -1;
-  }
 </style>
diff --git a/common/components/banner/FullBanner.svelte b/common/components/banner/FullBanner.svelte
index abba439..541d718 100644
--- a/common/components/banner/FullBanner.svelte
+++ b/common/components/banner/FullBanner.svelte
@@ -3,6 +3,7 @@
   import { anilistClient } from '@/modules/anilist.js'
   import { click } from '@/modules/click.js'
   import { alToken } from '@/modules/settings.js'
+  import { Bookmark, Heart } from 'lucide-svelte'
   export let mediaList
 
   let current = mediaList[0]
@@ -93,11 +94,11 @@
       use:click={() => playMedia(current)}>
       Watch Now
     </button>
-    <button class='btn bg-dark-light btn-square ml-10 material-symbols-outlined font-size-16 shadow-none border-0' class:filled={current.isFavourite} use:click={toggleFavourite} disabled={!alToken}>
-      favorite
+    <button class='btn bg-dark-light btn-square ml-10 d-flex align-items-center justify-content-center shadow-none border-0' use:click={toggleFavourite} disabled={!alToken}>
+      <Heart fill={current.isFavourite ? 'currentColor' : 'transparent'} size='1.5rem' />
     </button>
-    <button class='btn bg-dark-light btn-square ml-10 material-symbols-outlined font-size-16 shadow-none border-0' class:filled={current.mediaListEntry} use:click={toggleStatus} disabled={!alToken}>
-      bookmark
+    <button class='btn bg-dark-light btn-square ml-10 d-flex align-items-center justify-content-center shadow-none border-0' use:click={toggleStatus} disabled={!alToken}>
+      <Bookmark fill={current.mediaListEntry ? 'currentColor' : 'transparent'} size='1.5rem' />
     </button>
   </div>
   <div class='d-flex'>
diff --git a/common/components/cards/EpisodeCard.svelte b/common/components/cards/EpisodeCard.svelte
index 8541693..730df3a 100644
--- a/common/components/cards/EpisodeCard.svelte
+++ b/common/components/cards/EpisodeCard.svelte
@@ -6,6 +6,7 @@
   import { getContext } from 'svelte'
   import { liveAnimeEpisodeProgress } from '@/modules/animeprogress.js'
   import { anilistClient } from '@/modules/anilist.js'
+  import { Play } from 'lucide-svelte'
   export let data
 
   let preview = false
@@ -32,12 +33,7 @@
   <div class='item d-flex flex-column h-full pointer content-visibility-auto'>
     <div class='image h-200 w-full position-relative rounded overflow-hidden d-flex justify-content-between align-items-end text-white' class:bg-black={episodeThumbnail === ' '}>
       <img loading='lazy' src={episodeThumbnail} alt='cover' class='cover-img w-full h-full position-absolute' style:--color={media?.coverImage?.color || '#1890ff'} />
-      {#if data.failed}
-        <div class='material-symbols-outlined pl-10 pt-10 position-absolute top-0 left-0 text-danger filled font-weight-medium' title='Failed to resolve media z-10'>
-          sync_problem
-        </div>
-      {/if}
-      <div class='pl-10 pb-10 material-symbols-outlined filled z-10'>play_arrow</div>
+      <Play class='mb-5 ml-5 pl-10 pb-10 z-10' fill='currentColor' size='3rem' />
       <div class='pr-15 pb-10 font-size-16 font-weight-medium z-10'>
         {#if media?.duration}
           {media.duration}m
@@ -86,9 +82,6 @@
     z-index: 30;
     /* fixes transform scaling on click causing z-index issues */
   }
-  .material-symbols-outlined {
-    font-size: 3rem;
-  }
   .title {
     display: -webkit-box;
     -webkit-line-clamp: 1;
diff --git a/common/components/cards/EpisodePreviewCard.svelte b/common/components/cards/EpisodePreviewCard.svelte
index 0d6642c..c5c23c6 100644
--- a/common/components/cards/EpisodePreviewCard.svelte
+++ b/common/components/cards/EpisodePreviewCard.svelte
@@ -2,6 +2,7 @@
   import { statusColorMap, formatMap } from '@/modules/anime.js'
   import { since } from '@/modules/util'
   import { liveAnimeEpisodeProgress } from '@/modules/animeprogress.js'
+  import { CalendarDays, Play, Tv } from 'lucide-svelte'
   export let data
   /** @type {import('@/modules/al.d.ts').Media | null} */
   const media = data.media
@@ -26,12 +27,7 @@
         on:loadeddata={() => { hide = false }}
         autoplay />
     {/if}
-    {#if data.failed}
-      <div class='material-symbols-outlined pl-10 pt-10 position-absolute top-0 left-0 text-danger filled font-weight-medium z-10' title='Failed to resolve media'>
-        sync_problem
-      </div>
-    {/if}
-    <div class='pl-15 pb-10 material-symbols-outlined filled z-10'>play_arrow</div>
+    <Play class='mb-5 ml-5 pl-10 pb-10 z-10' fill='currentColor' size='3rem' />
     <div class='pr-20 pb-10 font-size-16 font-weight-medium z-10'>
       {#if media?.duration}
         {media.duration}m
@@ -78,13 +74,13 @@
     </div>
     {#if media}
       <div class='d-flex flex-row pt-15 font-weight-medium justify-content-between w-full text-muted'>
-        <div class='d-flex align-items-center' style='margin-left: -3px'>
-          <span class='material-symbols-outlined font-size-24 pr-5'>calendar_month</span>
-          {media.seasonYear || 'N/A'}
+        <div class='d-flex align-items-center' style='margin-left: -2px'>
+          <CalendarDays class='pr-5' size='2.6rem' />
+          <span class='line-height-1'>{media.seasonYear || 'N/A'}</span>
         </div>
         <div class='d-flex align-items-center'>
-          {formatMap[media.format]}
-          <span class='material-symbols-outlined font-size-24 pl-5'>monitor</span>
+          <span class='line-height-1'>{formatMap[media.format]}</span>
+          <Tv class='pl-5' size='2.6rem' />
         </div>
       </div>
     {/if}
@@ -92,9 +88,6 @@
 </div>
 
 <style>
-  .material-symbols-outlined {
-    font-size: 3rem;
-  }
   .description {
     display: -webkit-box !important;
     -webkit-line-clamp: 3;
diff --git a/common/components/cards/PreviewCard.svelte b/common/components/cards/PreviewCard.svelte
index bb348c3..f0d5553 100644
--- a/common/components/cards/PreviewCard.svelte
+++ b/common/components/cards/PreviewCard.svelte
@@ -3,6 +3,7 @@
   import { anilistClient } from '@/modules/anilist.js'
   import { click } from '@/modules/click.js'
   import { alToken } from '@/modules/settings.js'
+  import { Bookmark, Heart, Play, VolumeX, Volume2 } from 'lucide-svelte'
   /** @type {import('@/modules/al.d.ts').Media} */
   export let media
 
@@ -55,7 +56,14 @@
   <div class='banner position-relative bg-black overflow-hidden'>
     <img src={media.bannerImage || `https://i.ytimg.com/vi/${media.trailer?.id}/hqdefault.jpg` || ' '} alt='banner' class='img-cover w-full h-full' />
     {#if media.trailer?.id}
-      <div class='material-symbols-outlined filled position-absolute z-10 top-0 right-0 p-15 font-size-22' class:d-none={hide} use:click={toggleMute}>{muted ? 'volume_off' : 'volume_up'}</div>
+      <div class='position-absolute z-10 top-0 right-0 p-15' use:click={toggleMute}>
+        {#if muted}
+          <VolumeX size='2.2rem' fill='currentColor' />
+        {:else}
+          <Volume2 size='2.2rem' fill='currentColor' />
+        {/if}
+      </div>
+
       <!-- indivious is nice because its faster, but not reliable -->
       <!-- <video src={`https://inv.tux.pizza/latest_version?id=${media.trailer.id}&itag=18`}
         class='w-full h-full position-absolute left-0'
@@ -85,16 +93,14 @@
       <button class='btn btn-secondary flex-grow-1 text-dark font-weight-bold shadow-none border-0 d-flex align-items-center justify-content-center'
         use:click={play}
         disabled={media.status === 'NOT_YET_RELEASED'}>
-        <span class='material-symbols-outlined font-size-20 filled pr-10'>
-          play_arrow
-        </span>
+        <Play class='pr-10 z-10' fill='currentColor' size='2.2rem' />
         {playButtonText}
       </button>
-      <button class='btn btn-square ml-10 material-symbols-outlined font-size-16 shadow-none border-0' class:filled={media.isFavourite} use:click={toggleFavourite} disabled={!alToken}>
-        favorite
+      <button class='btn btn-square ml-10 d-flex align-items-center justify-content-center shadow-none border-0' use:click={toggleFavourite} disabled={!alToken}>
+        <Heart fill={media.isFavourite ? 'currentColor' : 'transparent'} size='1.5rem' />
       </button>
-      <button class='btn btn-square ml-10 material-symbols-outlined font-size-16 shadow-none border-0' class:filled={media.mediaListEntry} use:click={toggleStatus} disabled={!alToken}>
-        bookmark
+      <button class='btn btn-square ml-10 d-flex align-items-center justify-content-center shadow-none border-0' use:click={toggleStatus} disabled={!alToken}>
+        <Bookmark fill={media.mediaListEntry ? 'currentColor' : 'transparent'} size='1.5rem' />
       </button>
     </div>
     <div class='details text-white text-capitalize pt-15 pb-10 d-flex'>
diff --git a/common/components/cards/SmallCard.svelte b/common/components/cards/SmallCard.svelte
index cd4df76..43ce2d2 100644
--- a/common/components/cards/SmallCard.svelte
+++ b/common/components/cards/SmallCard.svelte
@@ -6,6 +6,7 @@
   import { countdown } from '@/modules/util.js'
 
   import { page } from '@/App.svelte'
+  import { CalendarDays, Tv } from 'lucide-svelte'
   /** @type {import('@/modules/al.d.ts').Media} */
   export let media
   let preview = false
@@ -45,13 +46,13 @@
       {media.title.userPreferred}
     </div>
     <div class='d-flex flex-row mt-auto pt-10 font-weight-medium justify-content-between w-full text-muted'>
-      <div class='d-flex align-items-center pr-5' style='margin-left: -2px'>
-        <span class='material-symbols-outlined font-size-24 pr-5'>calendar_month</span>
-        {media.seasonYear || 'N/A'}
+      <div class='d-flex align-items-center pr-5' style='margin-left: -1px'>
+        <CalendarDays class='pr-5' size='2.6rem' />
+        <span class='line-height-1'>{media.seasonYear || 'N/A'}</span>
       </div>
       <div class='d-flex align-items-center text-nowrap text-right'>
-        {formatMap[media.format]}
-        <span class='material-symbols-outlined font-size-24 pl-5'>monitor</span>
+        <span class='line-height-1'>{formatMap[media.format]}</span>
+        <Tv class='pl-5' size='2.6rem' />
       </div>
     </div>
   </div>
diff --git a/common/css.css b/common/css.css
index 2c2240f..e92c810 100644
--- a/common/css.css
+++ b/common/css.css
@@ -33,10 +33,37 @@
   --section-end-gradient: linear-gradient(270deg, #17191cff 0%, #17191c00 100%);
   color-scheme: dark;
 }
+
+@font-face {
+  font-family: "Roboto";
+  src: /* webpackIgnore: true */ url(Roboto.ttf) format("truetype");
+  unicode-range: U+0000, U+0002, U+0009, U+000D, U+0020-007E, U+00A0-0377,
+      U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03E1,
+      U+03F0-052F, U+1AB0-1ABE, U+1D00-1DF5, U+1DFC-1F15, U+1F18-1F1D,
+      U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D,
+      U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB,
+      U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-2027, U+202F-205F,
+      U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20BE, U+20DB-20DC,
+      U+20E3, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109,
+      U+2113, U+2116-2117, U+211E-2123, U+2125-2126, U+212A-212B, U+212E,
+      U+2132, U+213B, U+214D, U+214F-2189, U+2191, U+2193, U+2202, U+2206,
+      U+220F, U+2211-2212, U+221A, U+221E, U+222B, U+2248, U+2260,
+      U+2264-2265, U+2423, U+25CA, U+2669-266F, U+27E6-27EF, U+2B4E-2B4F,
+      U+2B5A-2B5F, U+2C60-2C7F, U+2DE0-2E42, U+A640-A69D, U+A69F,
+      U+A700-A7AD, U+A7B0-A7B1, U+A7F7-A7FF, U+A92E, U+AB30-AB5F,
+      U+AB64-AB65, U+EE01-EE02, U+F6C3, U+FB00-FB06, U+FE20-FE2D, U+FEFF,
+      U+FFFC-FFFD, U+1F16A-1F16B;
+}
+
 .dark-mode {
   background-color: var(--dark-color) !important;
 }
 
+.h-30 {
+  width: 3rem;
+  height: 3rem;
+}
+
 @media (min-width: 769px) {
   :root {
     --sidebar-minimised: 7rem;
@@ -45,6 +72,14 @@
   }
 }
 
+.line-height-1 {
+  line-height: 1;
+}
+
+.line-height-normal {
+  line-height: normal;
+}
+
 * {
   -webkit-tap-highlight-color: transparent;
 }
@@ -82,27 +117,8 @@ a[href]:active, button:not([disabled]):active, fieldset:not([disabled]):active,
   z-index: 100;
 }
 
-.material-symbols-outlined {
-  font-family: "Material Symbols Outlined Variable";
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  font-feature-settings: "liga";
-  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 64;
-}
-
-.filled {
-  font-variation-settings: 'FILL' 1;
+.text-dark-light {
+  color: var(--gray-color-light);
 }
 
 .pointer {
diff --git a/common/main.js b/common/main.js
index 25c44fd..445c7a9 100644
--- a/common/main.js
+++ b/common/main.js
@@ -1,8 +1,6 @@
 import App from './App.svelte'
 import 'quartermoon/css/quartermoon-variables.css'
-import '@fontsource-variable/material-symbols-outlined/full.css'
 import '@fontsource-variable/nunito'
-import '@fontsource/roboto'
 import './css.css'
 
 export default new App({ target: document.body })
diff --git a/common/modules/animeresolver.js b/common/modules/animeresolver.js
index c209dff..0ae92a5 100644
--- a/common/modules/animeresolver.js
+++ b/common/modules/animeresolver.js
@@ -78,7 +78,8 @@ export default new class AnimeResolver {
 
     debug(`Finding ${titleObjects.length} titles: ${titleObjects.map(obj => obj.title).join(', ')}`)
 
-    for (const chunk of chunks(titleObjects, 62)) { // single title has a complexity of 8.1, al limits complexity to 500
+    for (const chunk of chunks(titleObjects, 60)) {
+      // single title has a complexity of 8.1, al limits complexity to 500, so this can be at most 62, undercut it to 60, al pagination is 50, but at most we'll do 30 titles since isAduld duplicates each title
       for (const [key, media] of await anilistClient.alSearchCompound(chunk)) {
         debug(`Found ${key} as ${media.id}: ${media.title.userPreferred}`)
         this.animeNameCache[key] = media
diff --git a/common/package.json b/common/package.json
index fdc6600..eb2bfe7 100644
--- a/common/package.json
+++ b/common/package.json
@@ -2,9 +2,7 @@
   "name": "common",
   "private": true,
   "dependencies": {
-    "@fontsource-variable/material-symbols-outlined": "^5.0.24",
     "@fontsource-variable/nunito": "^5.0.18",
-    "@fontsource/roboto": "^5.0.12",
     "@thaunknown/ani-resourced": "^1.0.3",
     "anitomyscript": "github:ThaUnknown/anitomyscript#42290c4b3f256893be08a4e89051f448ff5e9d00",
     "bottleneck": "^2.19.5",
@@ -12,16 +10,18 @@
     "comlink": "^4.4.1",
     "jassub": "^1.7.17",
     "js-levenshtein": "^1.1.6",
+    "lucide-svelte": "^0.429.0",
     "p2pt": "github:ThaUnknown/p2pt#modernise",
     "perfect-seekbar": "^1.1.0",
     "quartermoon": "^1.2.3",
     "simple-font-select": "^1.0.1",
     "simple-store-svelte": "^1.0.6",
     "svelte": "^4.2.12",
-    "svelte-keybinds": "^1.0.8",
+    "svelte-keybinds": "^1.0.9",
     "svelte-loader": "^3.1.9",
     "svelte-miniplayer": "^1.0.5",
     "svelte-persisted-store": "^0.11.0",
+    "svelte-radix": "^1.1.0",
     "svelte-sonner": "^0.3.19",
     "video-deband": "^1.0.5",
     "webpack-merge": "^5.10.0"
diff --git a/common/views/Player/Player.svelte b/common/views/Player/Player.svelte
index f721314..57b4b8f 100644
--- a/common/views/Player/Player.svelte
+++ b/common/views/Player/Player.svelte
@@ -18,6 +18,7 @@
   import { SUPPORTS } from '@/modules/support.js'
   import 'rvfc-polyfill'
   import IPC from '@/modules/ipc.js'
+  import { ArrowDown, ArrowUp, Captions, Cast, CircleHelp, Contrast, FastForward, Keyboard, List, ListMusic, ListVideo, Maximize, Minimize, Pause, PictureInPicture, PictureInPicture2, Play, Proportions, RefreshCcw, Rewind, RotateCcw, RotateCw, ScreenShare, SkipBack, SkipForward, Users, Volume1, Volume2, VolumeX } from 'lucide-svelte'
 
   const emit = createEventDispatcher()
 
@@ -465,11 +466,13 @@
     KeyX: {
       fn: () => screenshot(),
       id: 'screenshot_monitor',
+      icon: ScreenShare,
       type: 'icon',
       desc: 'Save Screenshot to Clipboard'
     },
     KeyI: {
       fn: () => toggleStats(),
+      icon: List,
       id: 'list',
       type: 'icon',
       desc: 'Toggle Stats'
@@ -477,24 +480,28 @@
     Backquote: {
       fn: () => (showKeybinds = !showKeybinds),
       id: 'help_outline',
+      icon: CircleHelp,
       type: 'icon',
       desc: 'Toggle Keybinds'
     },
     Space: {
       fn: () => playPause(),
       id: 'play_arrow',
+      play: Play,
       type: 'icon',
       desc: 'Play/Pause'
     },
     KeyN: {
       fn: () => playNext(),
       id: 'skip_next',
+      icon: SkipForward,
       type: 'icon',
       desc: 'Next Episode'
     },
     KeyB: {
       fn: () => playLast(),
       id: 'skip_previous',
+      icon: SkipBack,
       type: 'icon',
       desc: 'Previous Episode'
     },
@@ -503,24 +510,28 @@
         $settings.playerDeband = !$settings.playerDeband
       },
       id: 'deblur',
+      icon: Contrast,
       type: 'icon',
       desc: 'Toggle Video Debanding'
     },
     KeyM: {
       fn: () => (muted = !muted),
       id: 'volume_off',
+      icon: VolumeX,
       type: 'icon',
       desc: 'Toggle Mute'
     },
     KeyP: {
       fn: () => togglePopout(),
       id: 'picture_in_picture',
+      icon: PictureInPicture2,
       type: 'icon',
       desc: 'Toggle Picture in Picture'
     },
     KeyF: {
       fn: () => toggleFullscreen(),
       id: 'fullscreen',
+      icon: Maximize,
       type: 'icon',
       desc: 'Toggle Fullscreen'
     },
@@ -532,18 +543,21 @@
     KeyW: {
       fn: () => { fitWidth = !fitWidth },
       id: 'fit_width',
+      icon: Proportions,
       type: 'icon',
       desc: 'Toggle Video Cover'
     },
     KeyD: {
       fn: () => toggleCast(),
       id: 'cast',
+      icon: Cast,
       type: 'icon',
       desc: 'Toggle Cast [broken]'
     },
     KeyC: {
       fn: () => cycleSubtitles(),
       id: 'subtitles',
+      icon: Captions,
       type: 'icon',
       desc: 'Cycle Subtitles'
     },
@@ -554,6 +568,7 @@
         rewind()
       },
       id: 'fast_rewind',
+      icon: Rewind,
       type: 'icon',
       desc: 'Rewind'
     },
@@ -564,6 +579,7 @@
         forward()
       },
       id: 'fast_forward',
+      icon: FastForward,
       type: 'icon',
       desc: 'Seek'
     },
@@ -574,6 +590,7 @@
         volume = Math.min(1, volume + 0.05)
       },
       id: 'volume_up',
+      icon: Volume2,
       type: 'icon',
       desc: 'Volume Up'
     },
@@ -584,23 +601,27 @@
         volume = Math.max(0, volume - 0.05)
       },
       id: 'volume_down',
+      icon: Volume1,
       type: 'icon',
       desc: 'Volume Down'
     },
     BracketLeft: {
       fn: () => { playbackRate = video.defaultPlaybackRate -= 0.1 },
       id: 'history',
+      icon: RotateCcw,
       type: 'icon',
       desc: 'Decrease Playback Rate'
     },
     BracketRight: {
       fn: () => { playbackRate = video.defaultPlaybackRate += 0.1 },
       id: 'update',
+      icon: RotateCw,
       type: 'icon',
       desc: 'Increase Playback Rate'
     },
     Backslash: {
       fn: () => { playbackRate = video.defaultPlaybackRate = 1 },
+      icon: RefreshCcw,
       id: 'schedule',
       type: 'icon',
       desc: 'Reset Playback Rate'
@@ -1029,7 +1050,15 @@
   {#if showKeybinds && !miniplayer}
     <div class='position-absolute bg-tp w-full h-full z-50 font-size-12 p-20 d-flex align-items-center justify-content-center pointer' on:pointerup|self={() => (showKeybinds = false)} tabindex='-1' role='button'>
       <Keybinds let:prop={item} autosave={true} clickable={true}>
-        <div class:material-symbols-outlined={item?.type} class='bind' title={item?.desc} style='pointer-events: all !important;'>{item?.id || ''}</div>
+        {#if item?.type}
+          <div class='bind icon' title={item?.desc} style='pointer-events: all !important;'>
+            {#if item?.icon}
+              <svelte:component this={item.icon} size='2rem' />
+            {/if}
+          </div>
+        {:else}
+          <div class='bind font-weight-normal' title={item?.desc} style='pointer-events: all !important;'>{item?.id || ''}</div>
+        {/if}
       </Keybinds>
     </div>
   {/if}
@@ -1097,11 +1126,11 @@
       </div>
     </div>
     <div class='d-flex col-4 justify-content-center'>
-      <span class='material-symbols-outlined'> people </span>
+      <span class='icon'><Users size='3rem' class='pt-5' /> </span>
       <span class='stats'>{torrent.peers || 0}</span>
-      <span class='material-symbols-outlined'> arrow_downward </span>
+      <span class='icon'><ArrowDown size='3rem' /></span>
       <span class='stats'>{fastPrettyBytes(torrent.down)}/s</span>
-      <span class='material-symbols-outlined'> arrow_upward </span>
+      <span class='icon'><ArrowUp size='3rem' /></span>
       <span class='stats'>{fastPrettyBytes(torrent.up)}/s</span>
     </div>
     <div class='col-4' />
@@ -1113,10 +1142,24 @@
     <div class='w-full h-full position-absolute toggle-immerse d-none' on:dblclick={toggleFullscreen} on:click|self={toggleImmerse} />
     <div class='w-full h-full position-absolute mobile-focus-target d-none' use:click={() => { page = 'player' }} />
     <!-- eslint-disable-next-line svelte/valid-compile -->
-    <span class='material-symbols-outlined ctrl h-full align-items-center justify-content-end w-150 mw-full mr-auto' on:click={rewind}> fast_rewind </span>
-    <span class='material-symbols-outlined ctrl' data-name='playPause' use:click={playPause}> {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} </span>
+    <span class='icon ctrl h-full align-items-center justify-content-end w-150 mw-full mr-auto' on:click={rewind}>
+      <Rewind size='3rem' />
+    </span>
+    <span class='icon ctrl' data-name='playPause' use:click={playPause}>
+      {#if ended}
+        <RotateCw size='3rem' />
+      {:else}
+        {#if paused}
+          <Play size='3rem' fill='white' />
+        {:else}
+          <Pause size='3rem' fill='white' />
+        {/if}
+      {/if}
+    </span>
     <!-- eslint-disable-next-line svelte/valid-compile -->
-    <span class='material-symbols-outlined ctrl h-full align-items-center w-150 mw-full ml-auto' on:click={forward}> fast_forward </span>
+    <span class='icon ctrl h-full align-items-center w-150 mw-full ml-auto' on:click={forward}>
+      <FastForward size='3rem' />
+    </span>
     <div class='position-absolute bufferingDisplay' />
     {#if currentSkippable}
       <button class='skip btn text-dark position-absolute bottom-0 right-0 mr-20 mb-5 font-weight-bold z-30' use:click={skip}>
@@ -1139,26 +1182,47 @@
       />
     </div>
     <div class='d-flex'>
-      <span class='material-symbols-outlined ctrl' title='Play/Pause [Space]' data-name='playPause' use:click={playPause}> {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} </span>
+      <span class='icon ctrl m-5' title='Play/Pause [Space]' data-name='playPause' use:click={playPause}>
+        {#if ended}
+          <RotateCw size='2rem' />
+        {:else}
+          {#if paused}
+            <Play size='2rem' fill='white' />
+          {:else}
+            <Pause size='2rem' fill='white' />
+          {/if}
+        {/if}</span>
       {#if hasLast}
-        <span class='material-symbols-outlined ctrl' title='Last [B]' use:click={playLast}> skip_previous </span>
+        <span class='icon ctrl m-5' title='Last [B]' use:click={playLast}>
+          <SkipBack size='2rem' fill='white' />
+        </span>
       {/if}
       {#if hasNext}
-        <span class='material-symbols-outlined ctrl' title='Next [N]' use:click={playNext}> skip_next </span>
+        <span class='icon ctrl m-5' title='Next [N]' use:click={playNext}>
+          <SkipForward size='2rem' fill='white' />
+        </span>
       {/if}
       <div class='d-flex w-auto volume'>
-        <span class='material-symbols-outlined ctrl' title='Mute [M]' data-name='toggleMute' use:click={toggleMute}> {muted ? 'volume_off' : 'volume_up'} </span>
+        <span class='icon ctrl m-5' title='Mute [M]' data-name='toggleMute' use:click={toggleMute}>
+          {#if muted}
+            <VolumeX size='2rem' fill='white' />
+          {:else}
+            <Volume2 size='2rem' fill='white' />
+          {/if}
+        </span>
         <input class='ctrl h-full custom-range' type='range' min='0' max='1' step='any' data-name='setVolume' bind:value={volume} />
       </div>
       <div class='ts' class:mr-auto={playbackRate === 1}>{toTS(targetTime, safeduration > 3600 ? 2 : 3)} / {toTS(safeduration - targetTime, safeduration > 3600 ? 2 : 3)}</div>
       {#if playbackRate !== 1}
         <div class='ts mr-auto'>x{playbackRate.toFixed(1)}</div>
       {/if}
-      <span class='material-symbols-outlined ctrl keybinds' title='Keybinds [`]' use:click={() => (showKeybinds = true)}> keyboard </span>
+      <span class='icon ctrl m-5 keybinds' title='Keybinds [`]' use:click={() => (showKeybinds = true)}>
+        <Keyboard size='2rem' />
+      </span>
       {#if 'audioTracks' in HTMLVideoElement.prototype && video?.audioTracks?.length > 1}
         <div class='dropdown dropup with-arrow' use:click={toggleDropdown}>
-          <span class='material-symbols-outlined ctrl' title='Audio Tracks'>
-            queue_music
+          <span class='icon ctrl m-5' title='Audio Tracks'>
+            <ListMusic size='2rem' />
           </span>
           <div class='dropdown-menu dropdown-menu-left ctrl custom-radio p-10 pb-5 text-capitalize'>
             {#each video.audioTracks as track}
@@ -1172,8 +1236,8 @@
       {/if}
       {#if 'videoTracks' in HTMLVideoElement.prototype && video?.videoTracks?.length > 1}
         <div class='dropdown dropup with-arrow'>
-          <span class='material-symbols-outlined ctrl' title='Video Tracks'>
-            playlist_play
+          <span class='icon ctrl m-5' title='Video Tracks'>
+            <ListVideo size='2rem' />
           </span>
           <div class='dropdown-menu dropdown-menu-left ctrl custom-radio p-10 pb-5 text-capitalize'>
             {#each video.videoTracks as track}
@@ -1187,8 +1251,8 @@
       {/if}
       {#if subHeaders?.length}
         <div class='subtitles dropdown dropup with-arrow' use:click={toggleDropdown}>
-          <span class='material-symbols-outlined ctrl' title='Subtitles [C]'>
-            subtitles
+          <span class='icon ctrl m-5' title='Subtitles [C]'>
+            <Captions size='2rem' />
           </span>
           <div class='dropdown-menu dropdown-menu-right ctrl custom-radio p-10 pb-5 text-capitalize'>
             <input name='subtitle-radio-set' type='radio' id='subtitle-off-radio' value='off' checked={subHeaders && subs?.current === -1} />
@@ -1206,17 +1270,29 @@
         </div>
       {/if}
       {#if 'PresentationRequest' in window && canCast && current}
-        <span class='material-symbols-outlined ctrl' title='Cast Video [D]' data-name='toggleCast' use:click={toggleCast}>
-          {presentationConnection ? 'cast_connected' : 'cast'}
+        <span class='icon ctrl m-5' title='Cast Video [D]' data-name='toggleCast' use:click={toggleCast}>
+          {#if presentationConnection}
+            <Cast size='2rem' fill='white' strokeWidth={0} />
+          {:else}
+            <Cast size='2rem' />
+          {/if}
         </span>
       {/if}
       {#if 'pictureInPictureEnabled' in document}
-        <span class='material-symbols-outlined ctrl' title='Popout Window [P]' data-name='togglePopout' use:click={togglePopout}>
-          {pip ? 'featured_video' : 'picture_in_picture'}
+        <span class='icon ctrl m-5' title='Popout Window [P]' data-name='togglePopout' use:click={togglePopout}>
+          {#if pip}
+            <PictureInPicture size='2rem' />
+          {:else}
+            <PictureInPicture2 size='2rem' />
+          {/if}
         </span>
       {/if}
-      <span class='material-symbols-outlined ctrl' title='Fullscreen [F]' data-name='toggleFullscreen' use:click={toggleFullscreen}>
-        {isFullscreen ? 'fullscreen_exit' : 'fullscreen'}
+      <span class='icon ctrl m-5' title='Fullscreen [F]' data-name='toggleFullscreen' use:click={toggleFullscreen}>
+        {#if isFullscreen}
+          <Minimize size='2rem' />
+        {:else}
+          <Maximize size='2rem' />
+        {/if}
       </span>
     </div>
   </div>
@@ -1379,11 +1455,10 @@
     height: 1px !important;
   }
 
-  .material-symbols-outlined {
+  .icon {
     font-size: 2.8rem;
     padding: 1.5rem;
     display: flex;
-    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 100, 'opsz' 64;
   }
 
   .immersed {
@@ -1415,9 +1490,6 @@
     transition: 0.5s opacity ease 0.2s;
     filter: drop-shadow(0 0 8px #000);
   }
-  .disabled {
-    cursor: not-allowed !important;
-  }
 
   .buffering .middle .bufferingDisplay {
     opacity: 1 !important;
diff --git a/common/views/Settings/HomeSectionsSettings.svelte b/common/views/Settings/HomeSectionsSettings.svelte
index 2f335e6..a18a0fc 100644
--- a/common/views/Settings/HomeSectionsSettings.svelte
+++ b/common/views/Settings/HomeSectionsSettings.svelte
@@ -2,6 +2,7 @@
   import { click } from '@/modules/click.js'
   import { sections } from '@/modules/sections.js'
   import { SUPPORTS } from '@/modules/support.js'
+  import { ArrowDown, ArrowDownUp, ArrowUp, Trash2 } from 'lucide-svelte'
 
   const allowedHomeSections = sections.map(({ title }) => title)
   export let homeSections
@@ -16,19 +17,15 @@
 
   $: {
     if (draggingItemIndex != null && hoveredItemIndex != null && draggingItemIndex !== hoveredItemIndex) {
-      [homeSections[draggingItemIndex], homeSections[hoveredItemIndex]] = [homeSections[hoveredItemIndex], homeSections[draggingItemIndex]]
+      swapItem(draggingItemIndex, hoveredItemIndex)
 
       draggingItemIndex = hoveredItemIndex
     }
   }
 
-  function moveItem (index, direction) {
-    if (direction === 'up' && index > 0) {
-      [homeSections[index], homeSections[index - 1]] = [homeSections[index - 1], homeSections[index]]
-    } else if (direction === 'down' && index < homeSections.length - 1) {
-      [homeSections[index], homeSections[index + 1]] = [homeSections[index + 1], homeSections[index]]
-    }
-    homeSections = homeSections
+  function swapItem (a, b) {
+    b = Math.min(homeSections.length - 1, Math.max(0, b))
+    ;[homeSections[a], homeSections[b]] = [homeSections[b], homeSections[a]]
   }
 </script>
 
@@ -37,7 +34,7 @@
     class='input-group mb-10 ghost w-full'
     style='top: {mouseYCoordinate + distanceTopGrabbedVsPointer}px;'>
     <div class='input-group-prepend'>
-      <span class='input-group-text d-flex justify-content-center px-5 material-symbols-outlined font-size-20'>swap_vert</span>
+      <span class='input-group-text d-flex align-items-center px-5'><ArrowDownUp size='1.8rem' /></span>
     </div>
     <select class='form-control' value={draggingItem}>
       {#each allowedHomeSections as section}
@@ -45,7 +42,7 @@
       {/each}
     </select>
     <div class='input-group-append'>
-      <button type='button' class='btn btn-danger input-group-append px-5 material-symbols-outlined font-size-20'>delete</button>
+      <button type='button' class='btn btn-danger btn-square input-group-append px-5 d-flex align-items-center'><Trash2 size='1.8rem' /></button>
     </div>
   </div>
 {/if}
@@ -71,14 +68,14 @@
     }}>
     {#if !SUPPORTS.isAndroid}
       <div class='input-group-prepend grab'>
-        <span class='input-group-text d-flex justify-content-center px-5 material-symbols-outlined font-size-20'>swap_vert</span>
+        <span class='input-group-text d-flex align-items-center px-5'><ArrowDownUp size='1.8rem' /></span>
       </div>
     {:else}
       <div class='input-group-prepend'>
-        <button use:click={() => moveItem(index, 'up')} class='input-group-text d-flex justify-content-center px-5 material-symbols-outlined font-size-20 pointer'>arrow_upward</button>
+        <button use:click={() => swapItem(index, index - 1)} class='input-group-text d-flex align-items-center px-5 pointer'><ArrowUp size='1.8rem' /></button>
       </div>
       <div class='input-group-prepend'>
-        <button use:click={() => moveItem(index, 'down')} class='input-group-text d-flex justify-content-center px-5 material-symbols-outlined font-size-20 pointer'>arrow_downward</button>
+        <button use:click={() => swapItem(index, index + 1)} class='input-group-text d-flex align-items-center px-5 pointer'><ArrowDown size='1.8rem' /></button>
       </div>
     {/if}
     <select class='form-control bg-dark w-300 mw-full' bind:value={homeSections[index]}>
@@ -87,7 +84,7 @@
       {/each}
     </select>
     <div class='input-group-append'>
-      <button type='button' use:click={() => { homeSections.splice(index, 1); homeSections = homeSections }} class='btn btn-danger input-group-append px-5 material-symbols-outlined font-size-20'>delete</button>
+      <button type='button' use:click={() => { homeSections.splice(index, 1); homeSections = homeSections }} class='btn btn-danger btn-square input-group-append px-5 d-flex align-items-center'><Trash2 size='1.8rem' /></button>
     </div>
   </div>
 {/each}
diff --git a/common/views/Settings/InterfaceSettings.svelte b/common/views/Settings/InterfaceSettings.svelte
index 387d58c..3382024 100644
--- a/common/views/Settings/InterfaceSettings.svelte
+++ b/common/views/Settings/InterfaceSettings.svelte
@@ -5,6 +5,7 @@
   import IPC from '@/modules/ipc.js'
   import SettingCard from './SettingCard.svelte'
   import { SUPPORTS } from '@/modules/support.js'
+  import { Trash2 } from 'lucide-svelte'
   function updateAngle () {
     IPC.emit('angle', settings.value.angle)
   }
@@ -74,7 +75,7 @@
           <option value='Judas [Small Size]'>{settings.toshoURL + 'rss2?qx=1&q="[Judas] "'}</option>
         </datalist>
         <div class='input-group-append'>
-          <button type='button' use:click={() => { settings.rssFeedsNew.splice(i, 1); settings.rssFeedsNew = settings.rssFeedsNew }} class='btn btn-danger input-group-append px-5 material-symbols-outlined font-size-20'>delete</button>
+          <button type='button' use:click={() => { settings.rssFeedsNew.splice(i, 1); settings.rssFeedsNew = settings.rssFeedsNew }} class='btn btn-danger btn-square input-group-append px-5 d-flex align-items-center'><Trash2 size='1.8rem' /></button>
         </div>
       </div>
     {/each}
diff --git a/common/views/Settings/PlayerSettings.svelte b/common/views/Settings/PlayerSettings.svelte
index b9a77c3..ff83cae 100644
--- a/common/views/Settings/PlayerSettings.svelte
+++ b/common/views/Settings/PlayerSettings.svelte
@@ -5,6 +5,7 @@
   import { SUPPORTS } from '@/modules/support.js'
   import { click } from '@/modules/click.js'
   import IPC from '@/modules/ipc.js'
+  import { Trash2 } from 'lucide-svelte'
   export let settings
 
   async function changeFont ({ detail }) {
@@ -39,7 +40,7 @@
     <div class='input-group w-400 mw-full'>
       <FontSelect class='form-control bg-dark w-300 mw-full' on:change={changeFont} value={settings.font?.name} />
       <div class='input-group-append'>
-        <button type='button' class='btn btn-danger btn-square px-5 material-symbols-outlined font-size-20' use:click={() => removeFont()}>delete</button>
+        <button type='button' use:click={() => removeFont()} class='btn btn-danger btn-square input-group-append px-5 d-flex align-items-center'><Trash2 size='1.8rem' /></button>
       </div>
     </div>
   </SettingCard>
diff --git a/common/views/Settings/Settings.svelte b/common/views/Settings/Settings.svelte
index 543f78e..dd1500b 100644
--- a/common/views/Settings/Settings.svelte
+++ b/common/views/Settings/Settings.svelte
@@ -38,27 +38,28 @@
   import { anilistClient } from '@/modules/anilist.js'
   import { logout } from '@/components/Logout.svelte'
   import smoothScroll from '@/modules/scroll.js'
+  import { AppWindow, Heart, LogIn, Logs, Play, Rss, Settings } from 'lucide-svelte'
 
   const groups = {
     player: {
       name: 'Player',
-      icon: 'play_arrow'
+      icon: Play
     },
     torrent: {
       name: 'Torrent',
-      icon: 'rss_feed'
+      icon: Rss
     },
     interface: {
       name: 'Interface',
-      icon: 'settings'
+      icon: AppWindow
     },
     app: {
       name: 'App',
-      icon: 'info'
+      icon: Settings
     },
     changelog: {
       name: 'Changelog',
-      icon: 'description'
+      icon: Logs
     }
   }
   function pathListener (data) {
@@ -97,28 +98,28 @@
       <div class='px-20 py-15 font-size-24 font-weight-semi-bold'>Settings</div>
       {#each Object.values(groups) as group}
         <TabLabel>
-          <div class='px-20 py-10 d-flex'>
-            <span class='material-symbols-outlined font-size-24 pr-10 d-inline-flex justify-content-center align-items-center'>{group.icon}</span>
-            <div class='font-size-16'>{group.name}</div>
+          <div class='px-20 py-10 d-flex align-items-center'>
+            <svelte:component this={group.icon} class='pr-10 d-inline-flex' size='3.1rem' fill={group.icon === Play ? 'currentColor' : 'transparent'} />
+            <div class='font-size-16 line-height-normal'>{group.name}</div>
           </div>
         </TabLabel>
       {/each}
       <div class='pointer my-5 rounded' tabindex='0' role='button' use:click={() => IPC.emit('open', 'https://github.com/sponsors/ThaUnknown/')}>
-        <div class='px-20 py-10 d-flex'>
-          <span class='material-symbols-outlined font-size-24 pr-10 d-inline-flex justify-content-center align-items-center'>favorite</span>
-          <div class='font-size-16'>Donate</div>
+        <div class='px-20 py-10 d-flex align-items-center'>
+          <Heart class='pr-10 d-inline-flex' size='3.1rem' />
+          <div class='font-size-16 line-height-normal'>Donate</div>
         </div>
       </div>
       <div class='pointer my-5 rounded' use:click={loginButton}>
-        <div class='px-20 py-10 d-flex'>
+        <div class='px-20 py-10 d-flex align-items-center'>
           {#if anilistClient.userID?.viewer?.data?.Viewer}
-            <span class='material-symbols-outlined rounded mr-10'>
+            <span class='rounded mr-10'>
               <img src={anilistClient.userID.viewer.data.Viewer.avatar.medium} class='h-30 rounded' alt='logo' />
             </span>
             <div class='font-size-16 login-image-text'>Logout</div>
           {:else}
-            <span class='material-symbols-outlined font-size-24 pr-10 d-inline-flex justify-content-center align-items-center'>login</span>
-            <div class='font-size-16'>Login With AniList</div>
+            <LogIn class='pr-10 d-inline-flex' size='3.1rem' />
+            <div class='font-size-16 line-height-normal'>Login With AniList</div>
           {/if}
         </div>
       </div>
@@ -233,10 +234,6 @@
     justify-content: center;
     align-items: center;
   }
-  .h-30 {
-    width: 3rem;
-    height: 3rem;
-  }
   .settings :global(input:not(:focus):invalid) {
     box-shadow: 0 0 0 0.2rem var(--danger-color) !important;
   }
diff --git a/common/views/Settings/TorrentSettings.svelte b/common/views/Settings/TorrentSettings.svelte
index c9e3a64..e0dfcfb 100644
--- a/common/views/Settings/TorrentSettings.svelte
+++ b/common/views/Settings/TorrentSettings.svelte
@@ -35,6 +35,7 @@
   import IPC from '@/modules/ipc.js'
   import SettingCard from './SettingCard.svelte'
   import { SUPPORTS } from '@/modules/support.js'
+  import { Trash2 } from 'lucide-svelte'
   export let settings
 
   function handleFolder () {
@@ -74,7 +75,7 @@
           <div class='input-group-prepend overflow-hidden w-full'>
             <span class='input-group-text bg-dark w-full'>{extension}</span>
           </div>
-          <button type='button' class='btn btn-danger btn-square px-5 material-symbols-outlined font-size-20' use:click={() => removeExtension(i)}>delete</button>
+          <button type='button' use:click={() => removeExtension(i)} class='btn btn-danger btn-square input-group-append px-5 d-flex align-items-center'><Trash2 size='1.8rem' /></button>
         </div>
       {/each}
     </div>
diff --git a/common/views/TorrentSearch/TorrentCard.svelte b/common/views/TorrentSearch/TorrentCard.svelte
index 80f2973..b4a8af9 100644
--- a/common/views/TorrentSearch/TorrentCard.svelte
+++ b/common/views/TorrentSearch/TorrentCard.svelte
@@ -1,6 +1,7 @@
 <script context='module'>
   import { click } from '@/modules/click.js'
   import { fastPrettyBytes, since } from '@/modules/util.js'
+  import { Database, BadgeCheck } from 'lucide-svelte'
 
   /** @typedef {import('@thaunknown/ani-resourced/sources/types.d.ts').Result} Result */
   /** @typedef {import('anitomyscript').AnitomyResult} AnitomyResult */
@@ -86,13 +87,9 @@
     <div class='d-flex w-full'>
       <div class='font-size-22 font-weight-bold text-nowrap'>{result.parseObject?.release_group && result.parseObject.release_group.length < 20 ? result.parseObject.release_group : 'No Group'}</div>
       {#if result.type === 'batch'}
-        <div class='material-symbols-outlined card-title symbol-bold ml-auto' title='Batch'>
-          database
-        </div>
+        <Database size='2.6rem' class='ml-auto' />
       {:else if result.verified}
-        <div class='material-symbols-outlined card-title symbol-bold ml-auto' style='color: #53da33' title='Verified'>
-          verified
-        </div>
+        <BadgeCheck size='2.8rem' class='ml-auto' style='color: #53da33' />
       {/if}
     </div>
     <div class='font-size-14 text-muted text-truncate overflow-hidden'>{simplifyFilename(result.parseObject)}</div>
diff --git a/common/views/TorrentSearch/TorrentMenu.svelte b/common/views/TorrentSearch/TorrentMenu.svelte
index 53a1bf7..22edd9a 100644
--- a/common/views/TorrentSearch/TorrentMenu.svelte
+++ b/common/views/TorrentSearch/TorrentMenu.svelte
@@ -44,6 +44,7 @@
   import { add } from '@/modules/torrent.js'
   import TorrentSkeletonCard from './TorrentSkeletonCard.svelte'
   import { onDestroy } from 'svelte'
+  import { MagnifyingGlass } from 'svelte-radix'
 
   /** @type {{ media: Media, episode?: number }} */
   export let search
@@ -130,7 +131,7 @@
   {/await}
   <div class='input-group mt-20'>
     <div class='input-group-prepend'>
-      <span class='input-group-text d-flex material-symbols-outlined bg-dark pr-0 font-size-18'>search</span>
+      <MagnifyingGlass size='2.75rem' class='input-group-text bg-dark pr-0' />
     </div>
     <input
       type='search'
diff --git a/common/views/TorrentSearch/TorrentModal.svelte b/common/views/TorrentSearch/TorrentModal.svelte
index 6190857..473ed91 100644
--- a/common/views/TorrentSearch/TorrentModal.svelte
+++ b/common/views/TorrentSearch/TorrentModal.svelte
@@ -2,7 +2,7 @@
   import { findInCurrent } from '../Player/MediaHandler.svelte'
   import { writable } from 'simple-store-svelte'
 
-  const rss = writable(null)
+  export const rss = writable(null)
 
   export function playAnime (media, episode = 1, force) {
     episode = Number(episode)
diff --git a/common/views/ViewAnime/Controls.svelte b/common/views/ViewAnime/Controls.svelte
deleted file mode 100644
index 14243e0..0000000
--- a/common/views/ViewAnime/Controls.svelte
+++ /dev/null
@@ -1,161 +0,0 @@
-<script>
-  import { alToken } from '../../views/Settings.svelte'
-  import { addToast } from '../../components/Toasts.svelte'
-  import IPC from '@/modules/ipc.js'
-  import { anilistClient } from '@/modules/anilist.js'
-  import { getContext } from 'svelte'
-  import { getMediaMaxEp } from '@/modules/anime.js'
-  import { playAnime } from '../RSSView.svelte'
-  import { click } from '@/modules/click.js'
-  export let media = null
-
-  const toggleStatusMap = {
-    CURRENT: 'DROPPED',
-    COMPLETED: 'REPEATING',
-    PAUSED: 'CURRENT',
-    REPEATING: 'CURRENT',
-    DROPPED: 'PLANNING',
-    PLANNING: 'remove'
-  }
-  async function toggleStatus () {
-    if (media.mediaListEntry?.status !== 'PLANNING') {
-      // add
-      await setStatus(toggleStatusMap[media.mediaListEntry?.status] || 'PLANNING')
-    } else {
-      await anilistClient.delete({ id: media.mediaListEntry.id })
-    }
-    update()
-  }
-  function getStatusText (media) {
-    if (media.mediaListEntry) {
-      const { status } = media.mediaListEntry
-      if (status === 'PLANNING') return 'Remove From List'
-      if (media.mediaListEntry?.status in toggleStatusMap) return 'Drop From Watching'
-    }
-    return 'Add To List'
-  }
-  function setStatus (status, other = {}) {
-    const variables = {
-      id: media.id,
-      status,
-      ...other
-    }
-    return anilistClient.entry(variables)
-  }
-  async function update () {
-    media = (await anilistClient.searchIDSingle({ id: media.id })).data.Media
-  }
-  async function score (media, score) {
-    const variables = {
-      id: media.id,
-      score: score * 10
-    }
-    await anilistClient.entry(variables)
-    media = (await anilistClient.searchIDSingle({ id: media.id })).data.Media
-  }
-  const trailer = getContext('trailer')
-  function viewTrailer (media) {
-    $trailer = media.trailer.id
-  }
-  function copyToClipboard (text) {
-    navigator.clipboard.writeText(text)
-    addToast({
-      title: 'Copied to clipboard',
-      text: 'Copied share URL to clipboard',
-      type: 'primary',
-      duration: '5000'
-    })
-  }
-  function openInBrowser (url) {
-    IPC.emit('open', url)
-  }
-  function getPlayText (media) {
-    if (media.mediaListEntry) {
-      const { status, progress } = media.mediaListEntry
-      if (progress) {
-        if (status === 'COMPLETED') return 'Rewatch'
-        return 'Continue ' + Math.min(getMediaMaxEp(media, true), progress + 1)
-      }
-    }
-    return 'Play'
-  }
-  async function play (media) {
-    let ep = 1
-    if (media.mediaListEntry) {
-      const { status, progress } = media.mediaListEntry
-      if (progress) {
-        if (status === 'COMPLETED') {
-          await setStatus('REPEATING', { episode: 0 })
-        } else {
-          ep = Math.min(getMediaMaxEp(media, true), progress + 1)
-        }
-      }
-    }
-    playAnime(media, ep, true)
-    media = null
-  }
-</script>
-
-<div class='col-md-4 d-flex justify-content-end flex-column'>
-  <div class='d-flex flex-column flex-wrap'>
-    <button
-      class='btn btn-primary d-flex align-items-center font-weight-bold font-size-24 h-50 mb-5'
-      type='button'
-      use:click={() => play(media)}>
-      <span class='material-symbols-outlined mr-10 font-size-24 w-30'> play_arrow </span>
-      <span>{getPlayText(media)}</span>
-    </button>
-    {#if alToken}
-      <button class='btn d-flex align-items-center mb-5 font-weight-bold font-size-16 btn-primary' use:click={toggleStatus}>
-        <span class='material-symbols-outlined mr-10 font-size-18 w-30'> {(media.mediaListEntry?.status in toggleStatusMap) ? 'remove' : 'add'} </span>
-        {getStatusText(media)}
-      </button>
-      <div class='input-group shadow-lg mb-5 font-size-16'>
-        <div class='input-group-prepend'>
-          <span class='input-group-text bg-tp pl-15 d-flex material-symbols-outlined font-size-18'>hotel_class</span>
-        </div>
-        <select class='form-control' required value={(media.mediaListEntry?.score || '').toString()} on:change={({ target }) => { score(media, Number(target.value)) }}>
-          <option value selected disabled hidden>Score</option>
-          <option>1</option>
-          <option>2</option>
-          <option>3</option>
-          <option>4</option>
-          <option>5</option>
-          <option>6</option>
-          <option>7</option>
-          <option>8</option>
-          <option>9</option>
-          <option>10</option>
-        </select>
-      </div>
-    {/if}
-    {#if media.trailer}
-      <button class='btn d-flex align-items-center mb-5 font-weight-bold font-size-16' use:click={() => viewTrailer(media)}>
-        <span class='material-symbols-outlined mr-15 font-size-18 w-30'> live_tv </span>
-        Trailer
-      </button>
-    {/if}
-    <div class='d-flex mb-5 w-full'>
-      <button class='btn flex-fill font-weight-bold font-size-16 d-flex align-items-center' use:click={() => { openInBrowser(`https://anilist.co/anime/${media.id}`) }}>
-        <span class='material-symbols-outlined mr-15 font-size-18 w-30'> open_in_new </span>
-        Open
-      </button>
-      <button class='btn flex-fill font-weight-bold font-size-16 ml-5 d-flex align-items-center' use:click={() => { copyToClipboard(`https://miru.watch/anime/${media.id}`) }}>
-        <span class='material-symbols-outlined mr-15 font-size-18 w-30'> share </span>
-        Share
-      </button>
-    </div>
-  </div>
-</div>
-
-<style>
-  select.form-control:invalid {
-    color: var(--dm-input-placeholder-text-color);
-  }
-  .bg-tp {
-    background-color: var(--dm-button-bg-color) !important;
-  }
-  .w-30 {
-    width: 3rem
-  }
-</style>
diff --git a/common/views/ViewAnime/Details.svelte b/common/views/ViewAnime/Details.svelte
index c5bbcf2..135d21a 100644
--- a/common/views/ViewAnime/Details.svelte
+++ b/common/views/ViewAnime/Details.svelte
@@ -1,13 +1,15 @@
 <script>
+  import { Building2, FolderKanban, Languages, Leaf, MonitorPlay, Type } from 'lucide-svelte'
+
   export let media = null
 
   const detailsMap = [
-    { property: 'season', label: 'Season', icon: 'spa', custom: 'property' },
-    { property: 'status', label: 'Status', icon: 'live_tv' },
-    { property: 'nodes', label: 'Studio', icon: 'business' },
-    { property: 'source', label: 'Source', icon: 'source' },
-    { property: 'english', label: 'English', icon: 'title' },
-    { property: 'romaji', label: 'Romaji', icon: 'translate' },
+    { property: 'season', label: 'Season', icon: Leaf, custom: 'property' },
+    { property: 'status', label: 'Status', icon: MonitorPlay },
+    { property: 'nodes', label: 'Studio', icon: Building2 },
+    { property: 'source', label: 'Source', icon: FolderKanban },
+    { property: 'english', label: 'English', icon: Type },
+    { property: 'romaji', label: 'Romaji', icon: Languages },
     { property: 'native', label: 'Native', icon: '語', custom: 'icon' }
   ]
   function getCustomProperty (detail, media) {
@@ -33,12 +35,16 @@
   {#each detailsMap as detail}
     {@const property = getProperty(detail.property, media)}
     {#if property}
-      <div class='d-flex flex-row mx-10 py-5'>
-        <div class={'mr-10 ' + (detail.custom === 'icon' ? 'd-flex align-items-center text-nowrap font-size-20 font-weight-bold' : 'material-symbols-outlined font-size-24')}>
-          {detail.icon}
-        </div>
+      <div class='d-flex flex-row mx-10 py-5 justify-content-center'>
+        {#if detail.custom !== 'icon'}
+          <svelte:component size='2rem' this={detail.icon} class='mr-10' />
+        {:else}
+          <div class='mr-10 d-flex align-items-center text-nowrap font-size-12 font-weight-bold line-height-normal'>
+            {detail.icon}
+          </div>
+        {/if}
         <div class='d-flex flex-column justify-content-center text-nowrap'>
-          <div class='font-weight-bold select-all'>
+          <div class='font-weight-bold select-all line-height-normal'>
             {#if detail.custom === 'property'}
               {getCustomProperty(detail, media)}
             {:else if property.constructor === Array}
diff --git a/common/views/ViewAnime/EpisodeList.svelte b/common/views/ViewAnime/EpisodeList.svelte
index c17ba7c..12cd2f9 100644
--- a/common/views/ViewAnime/EpisodeList.svelte
+++ b/common/views/ViewAnime/EpisodeList.svelte
@@ -1,3 +1,11 @@
+<script context='module'>
+  let fillerEpisodes = {}
+
+  fetch('https://raw.githubusercontent.com/ThaUnknown/filler-scrape/master/filler.json').then(async res => {
+    fillerEpisodes = await res.json()
+  })
+</script>
+
 <script>
   import { since } from '@/modules/util'
   import { click } from '@/modules/click.js'
@@ -22,12 +30,12 @@
   export let play
 
   const episodeList = Array.from({ length: episodeCount }, (_, i) => ({
-    episode: i + 1, image: null, summary: null, rating: null, title: null, length: null, airdate: null, airingAt: null
+    episode: i + 1, image: null, summary: null, rating: null, title: null, length: null, airdate: null, airingAt: null, filler: fillerEpisodes[id]?.includes(i)
   }))
   async function load () {
     const res = await fetch('https://api.ani.zip/mappings?anilist_id=' + id)
     const { episodes, specialCount, episodeCount } = await res.json()
-    /** @type {{ airingAt: number; episode: number; }[]} */
+    /** @type {{ airingAt: number; episode: number; filler?: boolean }[]} */
     let alEpisodes = episodeList
 
     // fallback: pull episodes from airing schedule if anime doesn't have expected episode count
@@ -35,14 +43,14 @@
       const settled = (await anilistClient.episodes({ id })).data.Page?.airingSchedules
       if (settled?.length) alEpisodes = settled
     }
-    for (const { episode, airingAt } of alEpisodes) {
+    for (const { episode, airingAt, filler } of alEpisodes) {
       const alDate = new Date((airingAt || 0) * 1000)
 
       // validate by air date if the anime has specials AND doesn't have matching episode count
       const needsValidation = !(!specialCount || (media.episodes && media.episodes === episodeCount && episodes[Number(episode)]))
       const { image, summary, rating, title, length, airdate } = needsValidation ? episodeByAirDate(alDate, episodes, episode) : (episodes[Number(episode)] || {})
 
-      episodeList[episode - 1] = { episode, image, summary, rating, title, length: length || duration, airdate: +alDate || airdate, airingAt: +alDate || airdate }
+      episodeList[episode - 1] = { episode, image, summary, rating, title, length: length || duration, airdate: +alDate || airdate, airingAt: +alDate || airdate, filler }
     }
   }
   load()
@@ -50,17 +58,22 @@
   const animeProgress = liveAnimeProgress(id)
 </script>
 
-{#each episodeOrder ? episodeList : [...episodeList].reverse() as { episode, image, summary, rating, title, length, airdate }}
+{#each episodeOrder ? episodeList : [...episodeList].reverse() as { episode, image, summary, rating, title, length, airdate, filler }}
   {@const completed = !watched && userProgress >= episode}
   {@const target = userProgress + 1 === episode}
   {@const progress = !watched && ($animeProgress?.[episode] ?? 0)}
   <div class='w-full my-20 content-visibility-auto scale' class:opacity-half={completed} class:px-20={!target} class:h-150={image || summary}>
-    <div class='rounded w-full h-full overflow-hidden d-flex flex-xsm-column flex-row pointer' class:border={target} class:bg-black={completed} class:bg-dark={!completed} use:click={() => play(episode)}>
+    <div class='rounded w-full h-full overflow-hidden d-flex flex-xsm-column flex-row pointer position-relative' class:border={target || filler} class:bg-black={completed} class:border-secondary={filler} class:bg-dark={!completed} use:click={() => play(episode)}>
       {#if image}
         <div class='h-full'>
           <img alt='thumbnail' src={image} class='img-cover h-full' />
         </div>
       {/if}
+      {#if filler}
+        <div class='position-absolute bottom-0 right-0 bg-secondary py-5 px-10 text-dark rounded-top rounded-left font-weight-bold'>
+          Filler
+        </div>
+      {/if}
       <div class='h-full w-full px-20 py-15 d-flex flex-column'>
         <div class='w-full d-flex flex-row mb-15'>
           <div class='text-white font-weight-bold font-size-16 overflow-hidden title'>
diff --git a/common/views/ViewAnime/Following.svelte b/common/views/ViewAnime/Following.svelte
index 71ea349..248818a 100644
--- a/common/views/ViewAnime/Following.svelte
+++ b/common/views/ViewAnime/Following.svelte
@@ -2,6 +2,7 @@
   import { anilistClient } from '@/modules/anilist.js'
   import { click } from '@/modules/click.js'
   import IPC from '@/modules/ipc.js'
+  import { ExternalLink } from 'lucide-svelte'
 
   /** @type {import('@/modules/al.d.ts').Media} */
   export let media
@@ -22,7 +23,9 @@
           <img src={friend.user.avatar.medium} alt='avatar' class='w-50 h-50 img-fluid rounded cover-img' />
           <span class='my-0 pl-20 mr-auto text-truncate'>{friend.user.name}</span>
           <span class='my-0 px-10 text-capitalize'>{friend.status.toLowerCase()}</span>
-          <span class='material-symbols-outlined pointer text-primary font-size-18' use:click={() => IPC.emit('open', 'https://anilist.co/user/' + friend.user.name)}> open_in_new </span>
+          <span class='pointer text-primary d-flex align-items-center' use:click={() => IPC.emit('open', 'https://anilist.co/user/' + friend.user.name)}>
+            <ExternalLink size='1.8rem' />
+          </span>
         </div>
       {/each}
     </div>
diff --git a/common/views/ViewAnime/ViewAnime copy.svelte b/common/views/ViewAnime/ViewAnime copy.svelte
deleted file mode 100644
index 2b22161..0000000
--- a/common/views/ViewAnime/ViewAnime copy.svelte	
+++ /dev/null
@@ -1,199 +0,0 @@
-<script>
-  import { playAnime } from '../RSSView.svelte'
-  import { anilistClient } from '@/modules/anilist.js'
-  import { getMediaMaxEp } from '@/modules/anime.js'
-  import { getContext } from 'svelte'
-  import Details from './Details.svelte'
-  import Following from './Following.svelte'
-  import Controls from './Controls.svelte'
-  import ToggleList from './ToggleList.svelte'
-  import { click } from '@/modules/click.js'
-
-  const view = getContext('view')
-  const trailer = getContext('trailer')
-  function close () {
-    $view = null
-  }
-  $: media = $view
-  let modal
-  $: media && modal?.focus()
-  $: !$trailer && modal?.focus()
-  $: maxPlayEp = getMediaMaxEp($view || {}, true)
-  function checkClose ({ keyCode }) {
-    if (keyCode === 27) close()
-  }
-</script>
-
-<div class='modal modal-full z-40' class:show={media} on:keydown={checkClose} tabindex='-1' role='button' bind:this={modal}>
-  {#if media}
-    <div class='h-full modal-content bg-very-dark p-0 overflow-y-auto'>
-      <button class='close pointer z-30 bg-dark top-20 right-0 position-absolute' type='button' use:click={close}> &times; </button>
-      <div class='h-md-half w-full position-relative z-20'>
-        <div class='h-full w-full position-absolute bg-dark-light banner' style:--bannerurl={`url('${media.bannerImage || ''}')`} />
-        <div class='d-flex h-full top w-full'>
-          <div class='container-xl w-full'>
-            <div class='row d-flex justify-content-end flex-row h-full px-20 pt-20 px-xl-0'>
-              <div class='col-md-3 col-4 d-flex h-full justify-content-end flex-column pb-15 align-items-center'>
-                <img class='contain-img rounded mw-full mh-full shadow' alt='cover' src={media.coverImage?.extraLarge || media.coverImage?.medium} />
-              </div>
-              <div class='col-md-9 col-8 row align-content-end'>
-                <div class='col-md-8 col-12 d-flex justify-content-end flex-column pl-20'>
-                  <div class='px-md-20 d-flex flex-column font-size-12'>
-                    <span class='title font-weight-bold pb-sm-15 text-white select-all'>
-                      {media.title.userPreferred}
-                    </span>
-                    <div class='d-flex flex-row font-size-18 pb-sm-15'>
-                      {#if media.averageScore}
-                        <span class='material-symbols-outlined mr-10 font-size-24'> trending_up </span>
-                        <span class='mr-20'>
-                          Rating: {media.averageScore + '%'}
-                        </span>
-                      {/if}
-                      {#if media.format}
-                        <span class='material-symbols-outlined mx-10 font-size-24'> monitor </span>
-                        <span class='mr-20 text-capitalize'>
-                          Format: {media.format === 'TV' ? media.format : media.format?.replace(/_/g, ' ').toLowerCase()}
-                        </span>
-                      {/if}
-                      {#if media.episodes !== 1 && getMediaMaxEp(media)}
-                        <span class='material-symbols-outlined mx-10 font-size-24'> theaters </span>
-                        <span class='mr-20'>
-                          Episodes: {getMediaMaxEp(media)}
-                        </span>
-                      {:else if media.duration}
-                        <span class='material-symbols-outlined mx-10 font-size-24'> timer </span>
-                        <span class='mr-20'>
-                          Length: {media.duration + ' min'}
-                        </span>
-                      {/if}
-                    </div>
-                    <div class='pb-15 pt-5 px-5 overflow-x-auto text-nowrap font-weight-bold'>
-                      {#each media.genres as genre}
-                        <div class='badge badge-pill shadow'>
-                          {genre}
-                        </div>
-                      {/each}
-                    </div>
-                  </div>
-                </div>
-                <Controls bind:media={$view} />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class='container-xl bg-very-dark z-10'>
-        <div class='row p-20 px-xl-0 flex-column-reverse flex-md-row'>
-          <div class='col-md-9 pr-50'>
-            <h1 class='title font-weight-bold text-white'>Synopsis</h1>
-            <div class='font-size-16 pre-wrap select-all card m-0'>
-              {media.description?.replace(/<[^>]*>/g, '') || ''}
-            </div>
-            <ToggleList list={media.relations?.edges?.filter(({ node }) => node.type === 'ANIME')} let:item title='Relations'>
-              <div class='w-150 mx-15 my-10 rel pointer'
-                use:click={async () => { $view = null; $view = (await anilistClient.searchIDSingle({ id: item.node.id })).data.Media }}>
-                <img loading='lazy' src={item.node.coverImage.medium || ''} alt='cover' class='cover-img w-full h-200 rel-img rounded' />
-                <div class='pt-5'>{item.relationType.replace(/_/g, ' ').toLowerCase()}</div>
-                <h5 class='font-weight-bold text-white mb-5'>{item.node.title.userPreferred}</h5>
-              </div>
-            </ToggleList>
-            {#if maxPlayEp}
-              <h1 class='title font-weight-bold text-white pt-20'>Episodes</h1>
-              <div class='card m-0 d-inline-block'>
-                <table class='table table-hover w-500 table-auto '>
-                  <tbody>
-                    {#each Array(maxPlayEp) as _, i}
-                      {@const ep = maxPlayEp - i}
-                      <tr class="font-size-20 py-10 pointer {ep <= media.mediaListEntry?.progress ? 'text-muted' : 'text-white'}"
-                        use:click={() => {
-                          playAnime(media, ep)
-                          close()
-                        }}>
-                        <td class='w-full font-weight-semi-bold'>Episode {ep}</td>
-                        <td class='material-symbols-outlined text-right h-full d-table-cell'>play_arrow</td>
-                      </tr>
-                    {/each}
-                  </tbody>
-                </table>
-              </div>
-            {/if}
-            <ToggleList list={media.recommendations.edges.filter(edge => edge.node.mediaRecommendation)} let:item title='Recommendations'>
-              <div class='w-150 mx-15 my-10 rel pointer'
-                use:click={async () => { $view = null; $view = (await anilistClient.searchIDSingle({ id: item.node.mediaRecommendation.id })).data.Media }}>
-                <img loading='lazy' src={item.node.mediaRecommendation.coverImage.medium || ''} alt='cover' class='cover-img w-full h-200 rel-img rounded' />
-                <h5 class='font-weight-bold text-white mb-5'>{item.node.mediaRecommendation.title.userPreferred}</h5>
-              </div>
-            </ToggleList>
-          </div>
-          <div class='col-md-3 px-sm-0 px-20'>
-            {#if media.mediaListEntry?.progress}
-              <h1 class='title font-weight-bold text-white'>Progress</h1>
-              <div class='card m-0 pt-20 pb-15 d-flex flex-md-column flex-row text-capitalize align-items-start'>
-                <div class='progress w-full'>
-                  <div class='progress-bar' role='progressbar' style='width: {media.mediaListEntry?.progress / getMediaMaxEp(media) * 100}%;' />
-                </div>
-                <div class='font-weight-bold pt-10'>
-                  {media.mediaListEntry?.progress} / {getMediaMaxEp(media)} Available Episodes
-                </div>
-              </div>
-            {/if}
-            <Details {media} />
-            <Following {media} />
-          </div>
-        </div>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .pre-wrap {
-    white-space: pre-wrap
-  }
-  .banner {
-    background: no-repeat center center;
-    background-size: cover;
-    background-image: linear-gradient(0deg, rgba(17, 20, 23, 1) 0%, rgba(17, 20, 23, 0.8) 25%, rgba(17, 20, 23, 0.4) 50%, rgba(37, 40, 44, 0) 100%), var(--bannerurl) !important;
-  }
-
-  .d-table-cell {
-    display: table-cell !important;
-  }
-
-  .top {
-    backdrop-filter: blur(10px);
-  }
-  .title {
-    font-size: 4rem;
-  }
-  .pr-50 {
-    padding-right: 5rem;
-  }
-  .close {
-    top: 4rem !important;
-    left: unset !important;
-    right: 2.5rem !important;
-  }
-  .badge {
-    background-color: var(--dm-button-bg-color) !important;
-    padding: 0.6rem 2rem;
-    font-size: 1.4rem;
-    border: none;
-    margin-right: 0.6rem;
-  }
-  .rel-img{
-    height: 27rem;
-    width: 17rem
-  }
-
-  .cover-img {
-    object-fit: cover;
-  }
-
-  .rel {
-    transition: transform 0.2s ease;
-  }
-  .rel:hover {
-    transform: scale(1.05);
-  }
-</style>
diff --git a/common/views/ViewAnime/ViewAnime.svelte b/common/views/ViewAnime/ViewAnime.svelte
index 4d9f7ab..a82106e 100644
--- a/common/views/ViewAnime/ViewAnime.svelte
+++ b/common/views/ViewAnime/ViewAnime.svelte
@@ -12,6 +12,7 @@
   import smoothScroll from '@/modules/scroll.js'
   import IPC from '@/modules/ipc.js'
   import { alToken } from '@/modules/settings.js'
+  import { Bookmark, Clapperboard, ExternalLink, Heart, Play, Share2, Timer, TrendingUp, Tv } from 'lucide-svelte'
 
   const view = getContext('view')
   function close () {
@@ -68,6 +69,15 @@
     IPC.emit('open', url)
   }
   let episodeOrder = true
+
+// async function score (media, score) {
+    //   const variables = {
+    //     id: media.id,
+    //     score: score * 10
+    //   }
+    //   await anilistClient.entry(variables)
+    //   media = (await anilistClient.searchIDSingle({ id: media.id })).data.Media
+    // }
 </script>
 
 <div class='modal modal-full z-100' class:show={media} on:keydown={checkClose} tabindex='-1' role='button' bind:this={modal}>
@@ -86,7 +96,7 @@
               <div class='d-flex flex-row font-size-18 flex-wrap mt-5'>
                 {#if media.averageScore}
                   <div class='d-flex flex-row mt-10'>
-                    <span class='material-symbols-outlined mx-10 font-size-24'> trending_up </span>
+                    <TrendingUp class='mx-10' size='2.2rem' />
                     <span class='mr-20'>
                       Rating: {media.averageScore + '%'}
                     </span>
@@ -94,7 +104,7 @@
                 {/if}
                 {#if media.format}
                   <div class='d-flex flex-row mt-10'>
-                    <span class='material-symbols-outlined mx-10 font-size-24'> monitor </span>
+                    <Tv class='mx-10' size='2.2rem' />
                     <span class='mr-20 text-capitalize'>
                       Format: {formatMap[media.format]}
                     </span>
@@ -102,14 +112,14 @@
                 {/if}
                 {#if media.episodes !== 1 && getMediaMaxEp(media)}
                   <div class='d-flex flex-row mt-10'>
-                    <span class='material-symbols-outlined mx-10 font-size-24'> theaters </span>
+                    <Clapperboard class='mx-10' size='2.2rem' />
                     <span class='mr-20'>
                       Episodes: {getMediaMaxEp(media)}
                     </span>
                   </div>
                 {:else if media.duration}
                   <div class='d-flex flex-row mt-10'>
-                    <span class='material-symbols-outlined mx-10 font-size-24'> timer </span>
+                    <Timer class='mx-10' size='2.2rem' />
                     <span class='mr-20'>
                       Length: {media.duration + ' min'}
                     </span>
@@ -120,24 +130,40 @@
                 <button class='btn btn-lg btn-secondary w-250 text-dark font-weight-bold shadow-none border-0 d-flex align-items-center justify-content-center mr-10 mt-20'
                   use:click={() => play()}
                   disabled={media.status === 'NOT_YET_RELEASED'}>
-                  <span class='material-symbols-outlined font-size-24 filled pr-10'>
-                    play_arrow
-                  </span>
+                  <Play class='mr-10' fill='currentColor' size='1.6rem' />
                   {playButtonText}
                 </button>
-                <div class='mt-20'>
-                  <button class='btn bg-dark btn-lg btn-square material-symbols-outlined font-size-20 shadow-none border-0' class:filled={media.isFavourite} use:click={toggleFavourite} disabled={!alToken}>
-                    favorite
+                <div class='mt-20 d-flex'>
+                  <button class='btn bg-dark btn-lg btn-square d-flex align-items-center justify-content-center shadow-none border-0' use:click={toggleFavourite} disabled={!alToken}>
+                    <Heart fill={media.isFavourite ? 'currentColor' : 'transparent'} size='1.7rem' />
                   </button>
-                  <button class='btn bg-dark btn-lg btn-square ml-10 material-symbols-outlined font-size-20 shadow-none border-0' class:filled={media.mediaListEntry} use:click={toggleStatus} disabled={!alToken}>
-                    bookmark
+                  <button class='btn bg-dark btn-lg btn-square d-flex align-items-center justify-content-center shadow-none border-0 ml-10' use:click={toggleStatus} disabled={!alToken}>
+                    <Bookmark fill={media.mediaListEntry ? 'currentColor' : 'transparent'} size='1.7rem' />
                   </button>
-                  <button class='btn bg-dark btn-lg btn-square ml-10 material-symbols-outlined font-size-20 shadow-none border-0' use:click={() => copyToClipboard(`https://miru.watch/anime/${media.id}`)}>
-                    share
+                  <button class='btn bg-dark btn-lg btn-square d-flex align-items-center justify-content-center shadow-none border-0 ml-10' use:click={() => copyToClipboard(`https://miru.watch/anime/${media.id}`)}>
+                    <Share2 size='1.7rem' />
                   </button>
-                  <button class='btn bg-dark btn-lg btn-square ml-10 material-symbols-outlined font-size-20 shadow-none border-0' use:click={() => openInBrowser(`https://anilist.co/anime/${media.id}`)}>
-                    open_in_new
+                  <button class='btn bg-dark btn-lg btn-square d-flex align-items-center justify-content-center shadow-none border-0 ml-10' use:click={() => openInBrowser(`https://anilist.co/anime/${media.id}`)}>
+                    <ExternalLink size='1.7rem' />
                   </button>
+                  <!-- <div class='input-group shadow-lg mb-5 font-size-16'>
+                    <div class='input-group-prepend'>
+                      <span class='input-group-text bg-tp pl-15 d-flex font-size-18'>hotel_class</span> stars
+                    </div>
+                    <select class='form-control' required value={(media.mediaListEntry?.score || '').toString()} on:change={({ target }) => { score(media, Number(target.value)) }}>
+                      <option value selected disabled hidden>Score</option>
+                      <option>1</option>
+                      <option>2</option>
+                      <option>3</option>
+                      <option>4</option>
+                      <option>5</option>
+                      <option>6</option>
+                      <option>7</option>
+                      <option>8</option>
+                      <option>9</option>
+                      <option>10</option>
+                    </select>
+                  </div> -->
                 </div>
               </div>
             </div>
diff --git a/common/views/WatchTogether/Lobby.svelte b/common/views/WatchTogether/Lobby.svelte
index 1ac9bf5..df0a297 100644
--- a/common/views/WatchTogether/Lobby.svelte
+++ b/common/views/WatchTogether/Lobby.svelte
@@ -1,6 +1,7 @@
 <script>
   import { click } from '@/modules/click.js'
   import IPC from '@/modules/ipc.js'
+  import { ExternalLink, User } from 'lucide-svelte'
   export let peers
   export let invite
   export let cleanup
@@ -17,15 +18,12 @@
       {#if peer.user?.avatar?.medium}
         <img src={peer.user?.avatar?.medium} alt='avatar' class='w-50 h-50 img-fluid rounded' />
       {:else}
-        <span class='material-symbols-outlined w-50 h-50 anon'> person </span>
+        <span class='w-50 h-50 anon d-flex align-items-center'><User size='4rem' /></span>
       {/if}
-      <h4 class='my-0 pl-20 mr-auto'>{peer.user?.name || 'Anonymous'}</h4>
+      <h4 class='my-0 pl-20 mr-auto line-height-normal'>{peer.user?.name || 'Anonymous'}</h4>
       {#if peer.user?.name}
-        <span class='material-symbols-outlined pointer text-primary' use:click={() => IPC.emit('open', 'https://anilist.co/user/' + peer.user?.name)}> open_in_new </span>
+        <span class='pointer text-primary d-flex align-items-center' use:click={() => IPC.emit('open', 'https://anilist.co/user/' + peer.user?.name)}><ExternalLink size='2.5rem' /></span>
       {/if}
-      <!-- {#if state === 'host'}
-        <span class='material-symbols-outlined ml-15 pointer text-danger' use:click={() => peer.peer.pc.close()}> logout </span>
-      {/if} -->
     </div>
   {/each}
 </div>
diff --git a/common/views/WatchTogether/WatchTogether.svelte b/common/views/WatchTogether/WatchTogether.svelte
index 821c46c..e1cc9fc 100644
--- a/common/views/WatchTogether/WatchTogether.svelte
+++ b/common/views/WatchTogether/WatchTogether.svelte
@@ -158,6 +158,7 @@
 
 <script>
   import Lobby from './Lobby.svelte'
+  import { Plus, UserPlus } from 'lucide-svelte'
 
   let joinText
 
@@ -179,11 +180,11 @@
   {#if !$state}
     <div class='d-flex flex-row flex-wrap justify-content-center align-items-center h-full mb-20 pb-20 root'>
       <div class='card d-flex flex-column align-items-center w-300 h-300 justify-content-end'>
-        <span class='font-size-80 material-symbols-outlined d-flex align-items-center h-full'>add</span>
+        <Plus size='6rem' class='d-flex align-items-center h-full' />
         <button class='btn btn-primary btn-lg mt-10 btn-block' type='button' use:click={() => joinLobby()}>Create Lobby</button>
       </div>
       <div class='card d-flex flex-column align-items-center w-300 h-300 justify-content-end'>
-        <span class='font-size-80 material-symbols-outlined d-flex align-items-center h-full'>group_add</span>
+        <UserPlus size='6rem' class='d-flex align-items-center h-full' />
         <h2 class='font-weight-bold'>Join Lobby</h2>
         <input
           type='text'
@@ -203,7 +204,4 @@
   .font-size-50 {
     font-size: 5rem;
   }
-  .font-size-80 {
-    font-size: 8rem;
-  }
 </style>
diff --git a/common/webpack.config.cjs b/common/webpack.config.cjs
index 2b14639..d2f911b 100644
--- a/common/webpack.config.cjs
+++ b/common/webpack.config.cjs
@@ -60,6 +60,7 @@ module.exports = (parentDir, alias = {}, aliasFields = 'browser', filename = 'ap
       module: false,
       url: false,
       debug: resolve(__dirname, './modules/debug.js'),
+      'svelte-radix': resolve(__dirname, '../node_modules/svelte-radix/dist/index.js'),
       'bittorrent-tracker/lib/client/websocket-tracker.js': resolve('../node_modules/bittorrent-tracker/lib/client/websocket-tracker.js')
     },
     extensions: ['.mjs', '.js', '.svelte']
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 92a37d8..4a3547d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -142,15 +142,9 @@ importers:
 
   common:
     dependencies:
-      '@fontsource-variable/material-symbols-outlined':
-        specifier: ^5.0.24
-        version: 5.0.24
       '@fontsource-variable/nunito':
         specifier: ^5.0.18
         version: 5.0.18
-      '@fontsource/roboto':
-        specifier: ^5.0.12
-        version: 5.0.12
       '@thaunknown/ani-resourced':
         specifier: ^1.0.3
         version: 1.0.3
@@ -172,6 +166,9 @@ importers:
       js-levenshtein:
         specifier: ^1.1.6
         version: 1.1.6
+      lucide-svelte:
+        specifier: ^0.429.0
+        version: 0.429.0(svelte@4.2.12)
       p2pt:
         specifier: github:ThaUnknown/p2pt#modernise
         version: github.com/ThaUnknown/p2pt/9ad7a56ed6ee43f5664ebad33b803702ee349316
@@ -191,8 +188,8 @@ importers:
         specifier: ^4.2.12
         version: 4.2.12
       svelte-keybinds:
-        specifier: ^1.0.8
-        version: 1.0.8
+        specifier: ^1.0.9
+        version: 1.0.9
       svelte-loader:
         specifier: ^3.1.9
         version: 3.1.9(svelte@4.2.12)
@@ -202,6 +199,9 @@ importers:
       svelte-persisted-store:
         specifier: ^0.11.0
         version: 0.11.0(svelte@4.2.12)
+      svelte-radix:
+        specifier: ^1.1.0
+        version: 1.1.0(svelte@4.2.12)
       svelte-sonner:
         specifier: ^0.3.19
         version: 0.3.19(svelte@4.2.12)
@@ -5280,7 +5280,7 @@ packages:
       array-union: 2.1.0
       dir-glob: 3.0.1
       fast-glob: 3.3.2
-      ignore: 5.3.1
+      ignore: 5.3.2
       merge2: 1.4.1
       slash: 3.0.0
 
@@ -5642,11 +5642,11 @@ packages:
   /ignore@5.3.1:
     resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
+    dev: false
 
   /ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
-    dev: false
 
   /immediate-chunk-store@2.2.0:
     resolution: {integrity: sha512-1bHBna0hCa6arRXicu91IiL9RvvkbNYLVq+mzWdaLGZC3hXvX4doh8e1dLhMKez5siu63CYgO5NrGJbRX5lbPA==}
@@ -6335,6 +6335,14 @@ packages:
       - supports-color
     dev: false
 
+  /lucide-svelte@0.429.0(svelte@4.2.12):
+    resolution: {integrity: sha512-3LwbxQn5i9/zQwMg0ZWT875djOEQoR3eM8ytOGqk0eRk4wkoqqgZX0Gr+aQjkd+RSDEVMXkIEoyW/1zLyXr/6g==}
+    peerDependencies:
+      svelte: ^3 || ^4 || ^5.0.0-next.42
+    dependencies:
+      svelte: 4.2.12
+    dev: false
+
   /magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
     dependencies:
@@ -8622,8 +8630,8 @@ packages:
       svelte: 4.2.12
     dev: true
 
-  /svelte-keybinds@1.0.8:
-    resolution: {integrity: sha512-clP0/5XgMWXNlImQALBQYyrfN06fgWKWufoMumeGOABOsewScPsv1jRFZzks9f3Xh2e53XgZIx57Fb/a6d/ptw==}
+  /svelte-keybinds@1.0.9:
+    resolution: {integrity: sha512-bQt9azkXX4SgMJpJzYWQB6D0hj45+Ro2+2Awr4YNtjmuRuKdio+Rxuhky5JJyBBfyRQ7YT63nSR3whH4FACv1A==}
     dev: false
 
   /svelte-loader@3.1.9(svelte@4.2.12):
@@ -8698,6 +8706,14 @@ packages:
       typescript: 5.3.3
     dev: true
 
+  /svelte-radix@1.1.0(svelte@4.2.12):
+    resolution: {integrity: sha512-kyE9wZiJV937INGb+wiBkAjmGtQUUYRPkVL2Q+/gj+9Vog1Ewd2wNvNmpNMUd+c+euxoc5u5YZMuCUgky9EUPw==}
+    peerDependencies:
+      svelte: ^3.54.0 || ^4.0.0 || ^5.0.0
+    dependencies:
+      svelte: 4.2.12
+    dev: false
+
   /svelte-sonner@0.3.19(svelte@4.2.12):
     resolution: {integrity: sha512-jpPOgLtHwRaB6Vqo2dUQMv15/yUV/BQWTjKpEqQ11uqRSHKjAYUKZyGrHB2cQsGmyjR0JUzBD58btpgNqINQ/Q==}
     peerDependencies: