refactor: use echo again

refactor: use cat instead of echo
refactor: use echo to write manifest on flatpak
2026-03-22 16:05:50 +05:30 · 2026-02-26 14:03:22 +05:30 · 2026-02-26 13:44:51 +05:30 · 2026-02-26 13:24:58 +05:30 · 2026-02-26 11:59:06 +05:30 · 2026-02-26 11:39:36 +05:30
104 changed files with 3767 additions and 5340 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,24 +1,16 @@
 ### ✨ Changelog

- Added support for selective-batch/full-playlist download
- Added support for selecting multiple audio streams on combine mode
- Added support for embedding original auto-generated subtitles
- Added option to crop thubnails to square (1:1) before embedding
- Added 'errored' download state (to better identify errored downloads, which you can retry later)
- Added app interface color scheme options on appearance settings
- Added app info page under settings
- Added copy/clear log buttons in log viewer
- Added sponsorblock 'hook' category
- Fixed sidebar state not persisting on app re-start
- Fixed linux native (deb/rpm) installation downloading appimage update
- Bumped up shadcn/ui to v3.5 and lots of under the hood ui improvements
- Optimized database and backend performance
- Lots of other fixes and improvements
+- Added delay/sleep configuration settings (delay is now also configurable on search)
+- Added support for YouTube PO Token generation (based on [bgutil-ytdlp-pot-provider-rs](https://github.com/jim60105/bgutil-ytdlp-pot-provider-rs))
+- Implemented custom app titlebar on windows and linux
+- Further improved and persisted app logs (stored in [platform specific log directory](https://v2.tauri.app/plugin/logging/#persisting-logs))
+- Fixed webview window creation is failing on wayland with nvidia gpu
+- Other minor fixes and improvements

 ### 📝 Notes

 > [!CAUTION]
-> This update introduces few breaking changes! Users are adviced to complete/cancel all paused downloads before updating to this version, otherwise paused downloads may not resume properly or re-start from the begining.
+> Users are always adviced to complete/cancel all paused downloads before updating to a newer version, otherwise paused downloads may not resume properly and re-start from the begining.

 > [!WARNING]
 > Linux users make sure `yt-dlp` and `deno` is not installed in your distro (otherwise you will get package installation conflict). Don't worry, You can still use yt-dlp cli as before (the only difference is that now it will be installed and auto-updated by neo-dlp, which You can also disable from neo-dlp Settings if you don't want to auto-update yt-dlp)
@@ -29,9 +21,9 @@

 ### 📦 Shipped Binaries

-| yt-dlp (updateable) | ffmpeg | ffprobe | aria2c | deno |
-| :---- | :---- | :---- | :---- | :---- |
-| v2026.01.19.233146 (nightly) | v7.1.1 | v7.1.1 | v1.37.0 | v2.6.5 |
+| yt-dlp (updateable) | ffmpeg | ffprobe | aria2c | deno | bgutil-pot-rs |
+| :---- | :---- | :---- | :---- | :---- | :---- |
+| v2026.02.17.233631 (nightly) | v7.1.1 | v7.1.1 | v1.37.0 | v2.6.10 | v0.7.1-1.2.2 |

 > ‼️ Linux builds (deb, rpm) does not ships with `ffmpeg` and `ffprobe` (though it will be auto installed as a dependency by your package manager, if you are on fedora make sure to [enable rpmfusion free+nonfree repos](https://docs.fedoraproject.org/en-US/quick-docs/rpmfusion-setup/#_enabling_the_rpm_fusion_repositories_using_command_line_utilities) before installing the rpm package)

--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@

 # NeoDLP - Neo Downloader Plus

-Cross-platform Video/Audio Downloader Desktop App with Modern UI and Browser Integration
+Cross-platform Video/Audio Downloader Desktop App based on YT-DLP with Modern UI and Browser Integration

 [![github release](https://img.shields.io/github/v/release/neosubhamoy/neodlp?color=lime-green&style=for-the-badge)](https://github.com/neosubhamoy/neodlp/releases/latest)
 [![github downloads](https://img.shields.io/github/downloads/neosubhamoy/neodlp/total?style=for-the-badge)](https://github.com/neosubhamoy/neodlp/releases)
@@ -18,13 +18,15 @@ Cross-platform Video/Audio Downloader Desktop App with Modern UI and Browser Int

 ## ✨ Highlighted Features

- Download Video/Audio from popular sites (YT, FB, IG, X and other 2.5k+ [supported sites](https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md))
+- Download Video/Audio from thousands of popular sites (YT, FB, IG, X and other 2.5k+ [supported sites](https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md))
+- Fully Configured YT-DLP Environment Out-of-the-Box (with JS Runtime, PO Token Server, Real-Time Logs etc.)
 - Download Video/Audio in your preffered format (MP4, WEBM, MKV, MP3 etc.)
- Supports both Video and Playlist download
+- Supports both Video and Playlist/Batch download
 - Supports Combining Video, Audio streams of your choice
 - Supports Multi-Lingual Subtitle/Caption (CC) embeding
 - Different Video/Audio metadata embeding options (info, chapters, thumbnail etc.)
 - SponsorBlock support (mark/remove video segments)
+- Aria2 support (for blazing fast downloads)
 - Network controls (proxy, rate limit etc.)
 - Highly customizable and many more...😉

@@ -58,6 +60,7 @@ After installing the extension you can do the following directly from the browse
 - [FFmpeg & FFprobe](https://www.ffmpeg.org) [LGPLv2.1+] - Used for video/audio post-processing
 - [Aria2](https://aria2.github.io) [GPLv2+] - Used as an external downloader for blazing fast downloads with yt-dlp (Not included with NeoDLP MacOS builds)
 - [Deno](https://deno.com) [MIT] - Provides sandboxed javascript runtime environment for yt-dlp (Required for YT downloads, as per the new yt-dlp [announcement](https://github.com/yt-dlp/yt-dlp/issues/14404))
+- [BgUtils POT Provider (Rust)](https://github.com/jim60105/bgutil-ytdlp-pot-provider-rs) [GPLv3+] - Provides PO (Proof-of-Origin) Token for YT downloads

 ## ℹ️ System Pre-Requirements

@@ -80,9 +83,10 @@ After installing the extension you can do the following directly from the browse
 | Platform (OS) | Distribution Channel | Installation Command / Instruction |
 | :---- | :---- | :---- |
 | Windows x86_64 / ARM64 | WinGet | `winget install neosubhamoy.neodlp` |
+| MacOS x86_64 / ARM64 | Homebrew | `brew install neosubhamoy/tap/neodlp` |
 | MacOS x86_64 / ARM64 | Curl-Bash Installer | `curl -sSL https://neodlp.neosubhamoy.com/macos_installer.sh \| bash` |
 | Linux x86_64 / ARM64 | Curl-Bash Installer | `curl -sSL https://neodlp.neosubhamoy.com/linux_installer.sh \| bash` |
-| Arch Linux x86_64 / ARM64 | AUR | `yay -S neodlp` |
+| Arch Linux x86_64 / ARM64 | AUR | `yay -S neodlp` or `paru -S neodlp` |

 ## 🧪 Package Testing Status

@@ -195,6 +199,7 @@ Noticed any Bug? or Want to give us some suggetions? Always feel free to let us
 - NeoDLP is made possible by the joint efforts of [yt-dlp](https://github.com/yt-dlp/yt-dlp) and [FFmpeg](https://www.ffmpeg.org). Lots of NeoDLP features are actually powered by these tools under the hood! So huge thanks to all the developers/contributers for making these great tools! 🙏
 - NeoDLP's 'Format Selection' options are inspired from the [Seal](https://github.com/JunkFood02/Seal) app by [@JunkFood02](https://github.com/JunkFood02)
 - Aria2 Linux x86_64 static binaries are built by [@asdo92](https://github.com/asdo92/aria2-static-builds)
+- NeoDLP's 'POT Server' is based on [@jim60105's Rust Implementation](https://github.com/jim60105/bgutil-ytdlp-pot-provider-rs) of [Brainicism/bgutil-ytdlp-pot-provider](https://github.com/Brainicism/bgutil-ytdlp-pot-provider)

 ## ⚖️ License and Usage

--- a/com.neosubhamoy.neodlp.desktop
+++ b/com.neosubhamoy.neodlp.desktop
@@ -0,0 +1,10 @@
+[Desktop Entry]
+Type=Application
+
+Name=NeoDLP
+Comment=Modern video/audio downloader based on yt-dlp with browser integration.
+Icon=com.neosubhamoy.neodlp
+Exec=neodlp
+Terminal=false
+Categories=Utility;
+Keywords=neodlp;downloader;yt-dlp-gui;
--- a/com.neosubhamoy.neodlp.metainfo.xml
+++ b/com.neosubhamoy.neodlp.metainfo.xml
@@ -0,0 +1,31 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<component type="desktop-application">
+  <id>com.neosubhamoy.neodlp</id>
+  <name>NeoDLP</name>
+  <summary>Modern video/audio downloader based on yt-dlp with browser integration</summary>
+  <developer_name>Subhamoy Biswas</developer_name>
+  <metadata_license>CC0-1.0</metadata_license>
+  <project_license>MIT</project_license>
+  <url type="homepage">https://neodlp.neosubhamoy.com</url>
+  <url type="bugtracker">https://github.com/neosubhamoy/neodlp/issues</url>
+  <description>
+    <p>
+      NeoDLP is a cross-platform desktop application designed for downloading videos and audio from various online sources based on yt-dlp.
+
+      It offers modern user interface, lots of customization options and seamless browser integration.
+    </p>
+  </description>
+  <launchable type="desktop-id">com.neosubhamoy.neodlp.desktop</launchable>
+  <screenshots>
+    <screenshot type="default">
+      <image>https://raw.githubusercontent.com/neosubhamoy/neodlp/main/.github/images/downloader.png</image>
+      <caption>NeoDLP Downloader</caption>
+    </screenshot>
+  </screenshots>
+  <content_rating type="oars-1.1" />
+  <releases>
+    <release version="0.4.2" date="2026-02-23">
+      <url type="details">https://github.com/neosubhamoy/neodlp/releases/tag/v0.4.2</url>
+    </release>
+  </releases>
+</component>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
  "name": "neodlp",
  "private": true,
-  "version": "0.4.0",
-  "description": "Cross-platform Video/Audio Downloader Desktop App with Modern UI and Browser Integration",
+  "version": "0.4.1",
+  "description": "Cross-platform Video/Audio Downloader Desktop App based on YT-DLP with Modern UI and Browser Integration",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -21,82 +21,50 @@
  },
  "dependencies": {
    "@hookform/resolvers": "^5.2.2",
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-aspect-ratio": "^1.1.8",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-context-menu": "^2.2.16",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@tanstack/devtools-vite": "^0.4.1",
-    "@tanstack/react-devtools": "^0.9.2",
-    "@tanstack/react-pacer": "^0.19.3",
+    "@tanstack/devtools-vite": "^0.5.1",
+    "@tanstack/react-devtools": "^0.9.6",
+    "@tanstack/react-pacer": "^0.20.0",
    "@tanstack/react-pacer-devtools": "^0.5.2",
-    "@tanstack/react-query": "^5.90.19",
-    "@tanstack/react-query-devtools": "^5.91.2",
-    "@tauri-apps/api": "^2.9.1",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-query-devtools": "^5.91.3",
+    "@tauri-apps/api": "^2.10.1",
    "@tauri-apps/plugin-clipboard-manager": "^2.3.2",
    "@tauri-apps/plugin-dialog": "^2.6.0",
    "@tauri-apps/plugin-fs": "^2.4.5",
+    "@tauri-apps/plugin-log": "^2.8.0",
    "@tauri-apps/plugin-notification": "^2.3.3",
    "@tauri-apps/plugin-opener": "^2.5.3",
    "@tauri-apps/plugin-os": "^2.3.2",
    "@tauri-apps/plugin-process": "^2.3.1",
-    "@tauri-apps/plugin-shell": "^2.3.4",
-    "@tauri-apps/plugin-sql": "^2.3.1",
-    "@tauri-apps/plugin-updater": "^2.9.0",
+    "@tauri-apps/plugin-shell": "^2.3.5",
+    "@tauri-apps/plugin-sql": "^2.3.2",
+    "@tauri-apps/plugin-updater": "^2.10.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.6.0",
-    "input-otp": "^1.4.2",
-    "lucide-react": "^0.562.0",
+    "lucide-react": "^0.574.0",
    "next-themes": "^0.4.6",
-    "react": "^19.2.3",
-    "react-day-picker": "^9.13.0",
-    "react-dom": "^19.2.3",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
    "react-hook-form": "^7.71.1",
-    "react-resizable-panels": "^3.0.6",
-    "react-router-dom": "^7.12.0",
-    "recharts": "^3.6.0",
+    "react-resizable-panels": "^4.6.4",
+    "react-router-dom": "^7.13.0",
    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.4.1",
    "ulid": "^3.0.2",
-    "vaul": "^1.1.2",
-    "zod": "^4.3.5",
-    "zustand": "^5.0.10"
+    "zod": "^4.3.6",
+    "zustand": "^5.0.11"
  },
  "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.18",
-    "@tailwindcss/vite": "^4.1.18",
-    "@tauri-apps/cli": "^2.9.6",
-    "@types/node": "^25.0.9",
-    "@types/react": "^19.2.9",
+    "@tailwindcss/postcss": "^4.2.0",
+    "@tailwindcss/vite": "^4.2.0",
+    "@tauri-apps/cli": "^2.10.0",
+    "@types/node": "^25.2.3",
+    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-react": "^5.1.4",
    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.0",
    "tw-animate-css": "^1.4.0",
    "typescript": "~5.9.3",
    "vite": "^7.3.1"
--- a/scripts/download-bins.js
+++ b/scripts/download-bins.js
@@ -20,6 +20,7 @@ const versions = {
    'ffmpeg-ffprobe': 'latest',
    'deno': 'latest',
    'aria2c': '1.37.0',
+    'neodlp-pot': 'latest'
 };

 const binaries = {
@@ -145,10 +146,54 @@ const binaries = {
                path.join(downloadDir, 'ffmpeg-master-latest-linuxarm64-gpl')
            ]
        },
+        // {
+        //     name: 'ffmpeg-universal-apple-darwin',
+        //     platform: 'darwin',
+        //     url: `https://evermeet.cx/ffmpeg/get/zip`,
+        //     src: path.join(downloadDir, 'ffmpeg-universal-apple-darwin.zip'),
+        //     dest: null,
+        //     archive: {
+        //         type: 'zip',
+        //         binSrc: [
+        //             path.join(downloadDir, 'ffmpeg'),
+        //             path.join(downloadDir, 'ffmpeg')
+        //         ],
+        //         binDest: [
+        //             path.join(binDir, 'ffmpeg-x86_64-apple-darwin'),
+        //             path.join(binDir, 'ffmpeg-aarch64-apple-darwin')
+        //         ]
+        //     },
+        //     cleanup: [
+        //         path.join(downloadDir, 'ffmpeg-universal-apple-darwin.zip'),
+        //         path.join(downloadDir, 'ffmpeg')
+        //     ]
+        // },
+        // {
+        //     name: 'ffprobe-universal-apple-darwin',
+        //     platform: 'darwin',
+        //     url: `https://evermeet.cx/ffmpeg/get/ffprobe/zip`,
+        //     src: path.join(downloadDir, 'ffprobe-universal-apple-darwin.zip'),
+        //     dest: null,
+        //     archive: {
+        //         type: 'zip',
+        //         binSrc: [
+        //             path.join(downloadDir, 'ffprobe'),
+        //             path.join(downloadDir, 'ffprobe')
+        //         ],
+        //         binDest: [
+        //             path.join(binDir, 'ffprobe-x86_64-apple-darwin'),
+        //             path.join(binDir, 'ffprobe-aarch64-apple-darwin')
+        //         ]
+        //     },
+        //     cleanup: [
+        //         path.join(downloadDir, 'ffprobe-universal-apple-darwin.zip'),
+        //         path.join(downloadDir, 'ffprobe')
+        //     ]
+        // },
        {
            name: 'ffmpeg-universal-apple-darwin',
            platform: 'darwin',
-            url: `https://evermeet.cx/ffmpeg/get/zip`,
+            url: `https://github.com/neosubhamoy/evermeet-static-ffmpeg/releases${versions['ffmpeg-ffprobe'] === 'latest' ? '/latest' : ''}/download${versions['ffmpeg-ffprobe'] !== 'latest' ? '/'+versions['ffmpeg-ffprobe'] : ''}/ffmpeg-universal-apple-darwin.zip`,
            src: path.join(downloadDir, 'ffmpeg-universal-apple-darwin.zip'),
            dest: null,
            archive: {
@@ -170,7 +215,7 @@ const binaries = {
        {
            name: 'ffprobe-universal-apple-darwin',
            platform: 'darwin',
-            url: `https://evermeet.cx/ffmpeg/get/ffprobe/zip`,
+            url: `https://github.com/neosubhamoy/evermeet-static-ffmpeg/releases${versions['ffmpeg-ffprobe'] === 'latest' ? '/latest' : ''}/download${versions['ffmpeg-ffprobe'] !== 'latest' ? '/'+versions['ffmpeg-ffprobe'] : ''}/ffprobe-universal-apple-darwin.zip`,
            src: path.join(downloadDir, 'ffprobe-universal-apple-darwin.zip'),
            dest: null,
            archive: {
@@ -353,6 +398,73 @@ const binaries = {
                path.join(downloadDir, `aria2-${versions['aria2c']}-aarch64-linux-android-build1`)
            ]
        }
+    ],
+    'neodlp-pot': [
+        {
+            name: 'neodlp-pot-x86_64-pc-windows-msvc',
+            platform: 'win32',
+            url: `https://github.com/jim60105/bgutil-ytdlp-pot-provider-rs/releases${versions['neodlp-pot'] === 'latest' ? '/latest' : ''}/download${versions['neodlp-pot'] !== 'latest' ? '/'+versions['neodlp-pot'] : ''}/bgutil-pot-windows-x86_64.exe`,
+            src: path.join(downloadDir, 'bgutil-pot-windows-x86_64.exe'),
+            dest: [
+                path.join(binDir, 'neodlp-pot-x86_64-pc-windows-msvc.exe')
+            ],
+            archive: null,
+            cleanup: [
+                path.join(downloadDir, 'bgutil-pot-windows-x86_64.exe')
+            ]
+        },
+        {
+            name: 'neodlp-pot-x86_64-unknown-linux-gnu',
+            platform: 'linux',
+            url: `https://github.com/jim60105/bgutil-ytdlp-pot-provider-rs/releases${versions['neodlp-pot'] === 'latest' ? '/latest' : ''}/download${versions['neodlp-pot'] !== 'latest' ? '/'+versions['neodlp-pot'] : ''}/bgutil-pot-linux-x86_64`,
+            src: path.join(downloadDir, 'bgutil-pot-linux-x86_64'),
+            dest: [
+                path.join(binDir, 'neodlp-pot-x86_64-unknown-linux-gnu')
+            ],
+            archive: null,
+            cleanup: [
+                path.join(downloadDir, 'bgutil-pot-linux-x86_64')
+            ]
+        },
+        {
+            name: 'neodlp-pot-aarch64-unknown-linux-gnu',
+            platform: 'linux',
+            url: `https://github.com/jim60105/bgutil-ytdlp-pot-provider-rs/releases${versions['neodlp-pot'] === 'latest' ? '/latest' : ''}/download${versions['neodlp-pot'] !== 'latest' ? '/'+versions['neodlp-pot'] : ''}/bgutil-pot-linux-aarch64`,
+            src: path.join(downloadDir, 'bgutil-pot-linux-aarch64'),
+            dest: [
+                path.join(binDir, 'neodlp-pot-aarch64-unknown-linux-gnu')
+            ],
+            archive: null,
+            cleanup: [
+                path.join(downloadDir, 'bgutil-pot-linux-aarch64')
+            ]
+        },
+        {
+            name: 'neodlp-pot-x86_64-apple-darwin',
+            platform: 'darwin',
+            url: `https://github.com/jim60105/bgutil-ytdlp-pot-provider-rs/releases${versions['neodlp-pot'] === 'latest' ? '/latest' : ''}/download${versions['neodlp-pot'] !== 'latest' ? '/'+versions['neodlp-pot'] : ''}/bgutil-pot-macos-x86_64`,
+            src: path.join(downloadDir, 'bgutil-pot-macos-x86_64'),
+            dest: [
+                path.join(binDir, 'neodlp-pot-x86_64-apple-darwin')
+            ],
+            archive: null,
+            cleanup: [
+                path.join(downloadDir, 'bgutil-pot-macos-x86_64')
+            ]
+        },
+        {
+            name: 'neodlp-pot-aarch64-apple-darwin',
+            platform: 'darwin',
+            url: `https://github.com/jim60105/bgutil-ytdlp-pot-provider-rs/releases${versions['neodlp-pot'] === 'latest' ? '/latest' : ''}/download${versions['neodlp-pot'] !== 'latest' ? '/'+versions['neodlp-pot'] : ''}/bgutil-pot-macos-aarch64`,
+            src: path.join(downloadDir, 'bgutil-pot-macos-aarch64'),
+            dest: [
+                path.join(binDir, 'neodlp-pot-aarch64-apple-darwin')
+            ],
+            archive: null,
+            cleanup: [
+                path.join(downloadDir, 'bgutil-pot-macos-aarch64')
+            ]
+        }
    ]
 }

--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,7 +1,7 @@
 [package]
 name = "neodlp"
-version = "0.4.0"
-description = "Cross-platform Video/Audio Downloader Desktop App with Modern UI and Browser Integration"
+version = "0.4.1"
+description = "Cross-platform Video/Audio Downloader Desktop App based on YT-DLP with Modern UI and Browser Integration"
 authors = ["neosubhamoy <hey@neosubhamoy.com>"]
 edition = "2021"
 license = "MIT"
@@ -29,6 +29,7 @@ sqlx = { version = "0.8", features = [ "sqlite", "runtime-tokio", "tls-native-tl
 base64 = "0.22"
 directories = "6.0"
 futures-util = "0.3"
+log = "0.4"
 fix-path-env = { git = "https://github.com/tauri-apps/fix-path-env-rs" }
 tauri-plugin-opener = "2"
 tauri-plugin-shell = "2"
@@ -39,6 +40,7 @@ tauri-plugin-sql = { version = "2", features = ["sqlite"] }
 tauri-plugin-process = "2"
 tauri-plugin-clipboard-manager = "2"
 tauri-plugin-notification = "2"
+tauri-plugin-log = "2"

 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
 tauri-plugin-single-instance = "2"
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -10,6 +10,10 @@
    "core:window:allow-hide",
    "core:window:allow-show",
    "core:window:allow-set-focus",
+    "core:window:allow-minimize",
+    "core:window:allow-maximize",
+    "core:window:allow-unmaximize",
+    "core:window:allow-start-dragging",
    "opener:default",
    "shell:default",
    "fs:default",
@@ -25,6 +29,7 @@
    "clipboard-manager:allow-read-text",
    "clipboard-manager:allow-write-text",
    "notification:default",
+    "log:default",
    {
      "identifier": "opener:allow-open-path",
      "allow": [
--- a/src-tauri/capabilities/shell.json
+++ b/src-tauri/capabilities/shell.json
@@ -35,6 +35,11 @@
          "args": true,
          "sidecar": true
        },
+        {
+          "name": "binaries/neodlp-pot",
+          "args": true,
+          "sidecar": true
+        },
        {
          "name": "ffmpeg",
          "cmd": "ffmpeg",
@@ -45,6 +50,11 @@
          "cmd": "aria2c",
          "args": true
        },
+        {
+          "name": "deno",
+          "cmd": "deno",
+          "args": true
+        },
        {
          "name": "pkexec",
          "cmd": "pkexec",
@@ -54,6 +64,16 @@
          "name": "powershell",
          "cmd": "powershell",
          "args": true
+        },
+        {
+            "name": "cp",
+            "cmd": "cp",
+            "args": true
+        },
+        {
+            "name": "echo",
+            "cmd": "echo",
+            "args": true
        }
      ]
    },
@@ -85,6 +105,11 @@
          "args": true,
          "sidecar": true
        },
+        {
+          "name": "binaries/neodlp-pot",
+          "args": true,
+          "sidecar": true
+        },
        {
          "name": "ffmpeg",
          "cmd": "ffmpeg",
@@ -94,6 +119,11 @@
          "name": "aria2c",
          "cmd": "aria2c",
          "args": true
+        },
+        {
+          "name": "deno",
+          "cmd": "deno",
+          "args": true
        }
      ]
    }
--- a/src-tauri/resources/plugins/yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil.py
+++ b/src-tauri/resources/plugins/yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil.py
@@ -0,0 +1,79 @@
+from __future__ import annotations
+
+__version__ = '1.2.2'
+
+import abc
+import json
+
+from yt_dlp.extractor.youtube.pot.provider import (
+    ExternalRequestFeature,
+    PoTokenContext,
+    PoTokenProvider,
+    PoTokenProviderRejectedRequest,
+)
+from yt_dlp.extractor.youtube.pot.utils import WEBPO_CLIENTS
+from yt_dlp.utils import js_to_json
+from yt_dlp.utils.traversal import traverse_obj
+
+
+class BgUtilPTPBase(PoTokenProvider, abc.ABC):
+    PROVIDER_VERSION = __version__
+    BUG_REPORT_LOCATION = (
+        'https://github.com/jim60105/bgutil-ytdlp-pot-provider/issues'
+    )
+    _SUPPORTED_EXTERNAL_REQUEST_FEATURES = (
+        ExternalRequestFeature.PROXY_SCHEME_HTTP,
+        ExternalRequestFeature.PROXY_SCHEME_HTTPS,
+        ExternalRequestFeature.PROXY_SCHEME_SOCKS4,
+        ExternalRequestFeature.PROXY_SCHEME_SOCKS4A,
+        ExternalRequestFeature.PROXY_SCHEME_SOCKS5,
+        ExternalRequestFeature.PROXY_SCHEME_SOCKS5H,
+        ExternalRequestFeature.SOURCE_ADDRESS,
+        ExternalRequestFeature.DISABLE_TLS_VERIFICATION,
+    )
+    _SUPPORTED_CLIENTS = WEBPO_CLIENTS
+    _SUPPORTED_CONTEXTS = (
+        PoTokenContext.GVS,
+        PoTokenContext.PLAYER,
+        PoTokenContext.SUBS,
+    )
+    _GETPOT_TIMEOUT = 20.0
+    _GET_SERVER_VSN_TIMEOUT = 5.0
+    _MIN_NODE_VSN = (18, 0, 0)
+
+    def _info_and_raise(self, msg, raise_from=None):
+        self.logger.info(msg)
+        raise PoTokenProviderRejectedRequest(msg) from raise_from
+
+    def _warn_and_raise(self, msg, once=True, raise_from=None):
+        self.logger.warning(msg, once=once)
+        raise PoTokenProviderRejectedRequest(msg) from raise_from
+
+    def _get_attestation(self, webpage: str | None):
+        if not webpage:
+            return None
+        raw_challenge_data = self.ie._search_regex(
+            r'''(?sx)window\.ytAtR\s*=\s*(?P<raw_cd>(?P<q>['"])
+                (?:
+                    \\.|
+                    (?!(?P=q)).
+                )*
+            (?P=q))\s*;''',
+            webpage,
+            'raw challenge data',
+            default=None,
+            group='raw_cd',
+        )
+        att_txt = traverse_obj(
+            raw_challenge_data,
+            ({js_to_json}, {json.loads}, {json.loads}, 'bgChallenge')
+        )
+        if not att_txt:
+            self.logger.warning(
+                'Failed to extract initial attestation from the webpage'
+            )
+            return None
+        return att_txt
+
+
+__all__ = ['__version__']
--- a/src-tauri/resources/plugins/yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil_cli.py
+++ b/src-tauri/resources/plugins/yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil_cli.py
@@ -0,0 +1,211 @@
+from __future__ import annotations
+
+import functools
+import json
+import os.path
+import shutil
+import subprocess
+
+from yt_dlp.extractor.youtube.pot.provider import (
+    PoTokenProviderError,
+    PoTokenRequest,
+    PoTokenResponse,
+    register_preference,
+    register_provider,
+)
+from yt_dlp.extractor.youtube.pot.utils import get_webpo_content_binding
+from yt_dlp.utils import Popen
+
+from yt_dlp_plugins.extractor.getpot_bgutil import BgUtilPTPBase
+
+
+@register_provider
+class BgUtilCliPTP(BgUtilPTPBase):
+    PROVIDER_NAME = 'bgutil:cli'
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self._check_cli = functools.cache(self._check_cli_impl)
+
+    @functools.cached_property
+    def _cli_path(self):
+        cli_path = self._configuration_arg(
+            'cli_path', casesense=True, default=[None])[0]
+
+        if cli_path:
+            return os.path.expandvars(cli_path)
+
+        # check deprecated arg
+        deprecated_cli_path = self.ie._configuration_arg(
+            ie_key='youtube', key='getpot_bgutil_script', default=[None])[0]
+
+        if deprecated_cli_path:
+            self._warn_and_raise(
+                "'youtube:getpot_bgutil_script' extractor arg is deprecated, "
+                "use 'youtubepot-bgutilcli:cli_path' instead")
+
+        # default if no arg was passed
+        # First, try to find the executable in PATH
+        if self._get_executable_path('bgutil-pot'):
+            self.logger.debug('Found bgutil-pot in PATH')
+            return 'bgutil-pot'
+
+        # Then check common file locations
+        file_paths = [
+            os.path.join(
+                os.getcwd(), 'target', 'debug', 'bgutil-pot'
+            ),
+            os.path.join(
+                os.getcwd(), 'target', 'release', 'bgutil-pot'
+            ),
+            os.path.expanduser(
+                '~/bgutil-ytdlp-pot-provider/target/debug/bgutil-pot'
+            ),
+            os.path.expanduser(
+                '~/bgutil-ytdlp-pot-provider/target/release/'
+                'bgutil-pot'
+            ),
+        ]
+
+        for path in file_paths:
+            if self._get_executable_path(path):
+                self.logger.debug(f'Found bgutil-pot at: {path}')
+                return path
+
+        # Fallback to PATH name if no file found
+        default_path = 'bgutil-pot'
+        self.logger.debug(
+            f'No CLI path found, defaulting to {default_path}')
+        return default_path
+
+    def is_available(self):
+        return self._check_cli(self._cli_path)
+
+    def _get_executable_path(self, cli_path):
+        """Get the actual executable path, checking PATH or file existence."""
+        # For relative names (like 'bgutil-pot-generate'), search in PATH
+        if os.path.sep not in cli_path:
+            executable_path = shutil.which(cli_path)
+            if executable_path:
+                return executable_path
+
+        # For absolute/relative paths, check file existence directly
+        if os.path.isfile(cli_path):
+            return cli_path
+
+        return None
+
+    def _check_cli_impl(self, cli_path):
+        executable_path = self._get_executable_path(cli_path)
+        if not executable_path:
+            self.logger.debug(
+                f"Executable path doesn't exist: {cli_path}")
+            return False
+
+        stdout, stderr, returncode = Popen.run(
+            [executable_path, '--version'],
+            stdout=subprocess.PIPE,
+            stderr=subprocess.PIPE,
+            text=True,
+            timeout=self._GET_SERVER_VSN_TIMEOUT
+        )
+        if returncode:
+            self.logger.warning(
+                f'Failed to check executable version. '
+                f'Executable returned {returncode} exit status. '
+                f'stdout: {stdout}; stderr: {stderr}',
+                once=True)
+            return False
+        else:
+            self.logger.debug(f'bgutil-pot version: {stdout.strip()}')
+            return True
+
+    def _real_request_pot(
+        self,
+        request: PoTokenRequest,
+    ) -> PoTokenResponse:
+        # used for CI check
+        self.logger.trace(
+            f'Generating POT via Rust executable: {self._cli_path}')
+
+        executable_path = self._get_executable_path(self._cli_path)
+        if not executable_path:
+            raise PoTokenProviderError(
+                f'Executable not found: {self._cli_path}')
+
+        command_args = [executable_path]
+        if proxy := request.request_proxy:
+            command_args.extend(['-p', proxy])
+        command_args.extend(['-c', get_webpo_content_binding(request)[0]])
+        if request.bypass_cache:
+            command_args.append('--bypass-cache')
+        if request.request_source_address:
+            command_args.extend(
+                ['--source-address', request.request_source_address])
+        if request.request_verify_tls is False:
+            command_args.append('--disable-tls-verification')
+
+        self.logger.info(
+            f'Generating a {request.context.value} PO Token for '
+            f'{request.internal_client_name} client via bgutil '
+            f'Rust executable',
+        )
+        self.logger.debug(
+            f'Executing command to get POT via Rust executable: '
+            f'{" ".join(command_args)}'
+        )
+
+        try:
+            stdout, stderr, returncode = Popen.run(
+                command_args,
+                stdout=subprocess.PIPE,
+                stderr=subprocess.PIPE,
+                text=True,
+                timeout=self._GETPOT_TIMEOUT
+            )
+        except subprocess.TimeoutExpired as e:
+            raise PoTokenProviderError(
+                f'_get_pot_via_cli failed: Timeout expired when trying '
+                f'to run executable (caused by {e!r})'
+            )
+        except Exception as e:
+            raise PoTokenProviderError(
+                f'_get_pot_via_cli failed: Unable to run executable '
+                f'(caused by {e!r})'
+            ) from e
+
+        msg = ''
+        if stdout_extra := stdout.strip().splitlines()[:-1]:
+            msg = f'stdout:\n{stdout_extra}\n'
+        if stderr_stripped := stderr.strip():  # Empty strings are falsy
+            msg += f'stderr:\n{stderr_stripped}\n'
+        msg = msg.strip()
+        if msg:
+            self.logger.trace(msg)
+        if returncode:
+            raise PoTokenProviderError(
+                f'_get_pot_via_cli failed with returncode {returncode}')
+
+        try:
+            json_resp = stdout.splitlines()[-1]
+            self.logger.trace(f'JSON response:\n{json_resp}')
+            # The JSON response is always the last line
+            cli_data_resp = json.loads(json_resp)
+        except json.JSONDecodeError as e:
+            raise PoTokenProviderError(
+                f'Error parsing JSON response from _get_pot_via_cli '
+                f'(caused by {e!r})'
+            ) from e
+        if 'poToken' not in cli_data_resp:
+            raise PoTokenProviderError(
+                'The executable did not respond with a po_token')
+        return PoTokenResponse(po_token=cli_data_resp['poToken'])
+
+
+@register_preference(BgUtilCliPTP)
+def bgutil_cli_getpot_preference(provider, request):
+    return 1
+
+
+__all__ = [BgUtilCliPTP.__name__,
+           bgutil_cli_getpot_preference.__name__]
--- a/src-tauri/resources/plugins/yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil_http.py
+++ b/src-tauri/resources/plugins/yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil_http.py
@@ -0,0 +1,207 @@
+from __future__ import annotations
+
+import functools
+import json
+import time
+
+from yt_dlp.extractor.youtube.pot.provider import (
+    PoTokenProviderError,
+    PoTokenProviderRejectedRequest,
+    PoTokenRequest,
+    PoTokenResponse,
+    register_preference,
+    register_provider,
+)
+from yt_dlp.extractor.youtube.pot.utils import get_webpo_content_binding
+from yt_dlp.networking.common import Request
+from yt_dlp.networking.exceptions import HTTPError, TransportError
+
+from yt_dlp_plugins.extractor.getpot_bgutil import BgUtilPTPBase
+
+
+@register_provider
+class BgUtilHTTPPTP(BgUtilPTPBase):
+    PROVIDER_NAME = 'bgutil:http'
+    DEFAULT_BASE_URL = 'http://127.0.0.1:4416'
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self._last_server_check = 0
+        self._server_available = True
+
+    @functools.cached_property
+    def _base_url(self):
+        base_url = self._configuration_arg('base_url', default=[None])[0]
+
+        if base_url:
+            return base_url
+
+        # check deprecated arg
+        deprecated_base_url = self.ie._configuration_arg(
+            ie_key='youtube', key='getpot_bgutil_baseurl', default=[None])[0]
+        if deprecated_base_url:
+            self._warn_and_raise(
+                "'youtube:getpot_bgutil_baseurl' extractor arg is deprecated, "
+                "use 'youtubepot-bgutilhttp:base_url' instead"
+            )
+
+        # default if no arg was passed
+        self.logger.debug(
+            f'No base_url provided, defaulting to {self.DEFAULT_BASE_URL}')
+        return self.DEFAULT_BASE_URL
+
+    def _check_server_availability(self, ctx: PoTokenRequest):
+        if self._last_server_check + 60 > time.time():
+            return self._server_available
+
+        self._server_available = False
+        try:
+            self.logger.trace(
+                f'Checking server availability at {self._base_url}/ping')
+            response = json.load(self._request_webpage(Request(
+                f'{self._base_url}/ping',
+                extensions={'timeout': self._GET_SERVER_VSN_TIMEOUT},
+                proxies={'all': None}
+            ),
+                note=False))
+        except TransportError as e:
+            # the server may be down
+            script_path_provided = self.ie._configuration_arg(
+                ie_key='youtubepot-bgutilscript',
+                key='script_path',
+                default=[None]
+            )[0] is not None
+
+            warning_base = (
+                f'Error reaching GET {self._base_url}/ping '
+                f'(caused by {e.__class__.__name__}). '
+            )
+            if script_path_provided:  # server down is expected, log info
+                self._info_and_raise(
+                    warning_base +
+                    'This is expected if you are using the script method.'
+                )
+            else:
+                self._warn_and_raise(
+                    warning_base +
+                    f'Please make sure that the server is reachable at '
+                    f'{self._base_url}.'
+                )
+
+            return
+        except HTTPError as e:
+            # may be an old server, don't raise
+            self.logger.warning(
+                f'HTTP Error reaching GET /ping (caused by {e!r})', once=True)
+            return
+        except json.JSONDecodeError as e:
+            # invalid server
+            self._warn_and_raise(
+                f'Error parsing ping response JSON (caused by {e!r})')
+            return
+        except Exception as e:
+            self._warn_and_raise(
+                f'Unknown error reaching GET /ping (caused by {e!r})',
+                raise_from=e
+            )
+            return
+        else:
+            version = response.get("version", "unknown")
+            self.logger.debug(f'HTTP server version: {version}')
+            self._server_available = True
+            return True
+        finally:
+            self._last_server_check = time.time()
+
+    def is_available(self):
+        return (self._server_available or
+                self._last_server_check + 60 < int(time.time()))
+
+    def _real_request_pot(
+        self,
+        request: PoTokenRequest,
+    ) -> PoTokenResponse:
+        if not self._check_server_availability(request):
+            raise PoTokenProviderRejectedRequest(
+                f'{self.PROVIDER_NAME} server is not available')
+
+        # used for CI check
+        self.logger.trace('Generating POT via HTTP server')
+
+        disable_innertube = bool(
+            self._configuration_arg('disable_innertube', default=[None])[0]
+        )
+        challenge = self._get_attestation(
+            None if disable_innertube else request.video_webpage
+        )
+        # The challenge is falsy when the webpage and the challenge are
+        # unavailable. In this case, we need to disable /att/get since
+        # it's broken for web_music
+        if not challenge and request.internal_client_name == 'web_music':
+            if not disable_innertube:  # if not already set, warn the user
+                self.logger.warning(
+                    'BotGuard challenges could not be obtained from the '
+                    'webpage, overriding disable_innertube=True because '
+                    'InnerTube challenges are currently broken for the '
+                    'web_music client. Pass disable_innertube=1 to suppress '
+                    'this warning.'
+                )
+            disable_innertube = True
+
+        try:
+            response = self._request_webpage(
+                request=Request(
+                    f'{self._base_url}/get_pot', data=json.dumps({
+                        'bypass_cache': request.bypass_cache,
+                        'challenge': challenge,
+                        'content_binding': get_webpo_content_binding(
+                            request
+                        )[0],
+                        'disable_innertube': disable_innertube,
+                        'disable_tls_verification': (
+                            not request.request_verify_tls
+                        ),
+                        'proxy': request.request_proxy,
+                        'innertube_context': request.innertube_context,
+                        'source_address': request.request_source_address,
+                    }).encode(), headers={'Content-Type': 'application/json'},
+                    extensions={'timeout': self._GETPOT_TIMEOUT},
+                    proxies={'all': None}
+                ),
+                note=f'Generating a {request.context.value} PO Token for '
+                f'{request.internal_client_name} client via bgutil '
+                f'HTTP server',
+            )
+        except Exception as e:
+            raise PoTokenProviderError(
+                f'Error reaching POST /get_pot (caused by {e!r})') from e
+
+        try:
+            response_json = json.load(response)
+        except Exception as e:
+            response_data = response.read().decode()
+            raise PoTokenProviderError(
+                f'Error parsing response JSON (caused by {e!r}). '
+                f'response = {response_data}'
+            ) from e
+
+        if error_msg := response_json.get('error'):
+            raise PoTokenProviderError(error_msg)
+        if 'poToken' not in response_json:
+            raise PoTokenProviderError(
+                f'Server did not respond with a poToken. '
+                f'Received response: {response}'
+            )
+
+        po_token = response_json['poToken']
+        self.logger.trace(f'Generated POT: {po_token}')
+        return PoTokenResponse(po_token=po_token)
+
+
+@register_preference(BgUtilHTTPPTP)
+def bgutil_HTTP_getpot_preference(provider, request):
+    return 130
+
+
+__all__ = [BgUtilHTTPPTP.__name__,
+           bgutil_HTTP_getpot_preference.__name__]
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -184,6 +184,16 @@ fn get_current_app_path() -> Result<String, String> {
        .into_owned())
 }

+#[tauri::command]
+fn is_flatpak() -> bool {
+    std::env::var("FLATPAK").is_ok()
+}
+
+#[tauri::command]
+fn get_appimage_path() -> Option<String> {
+    std::env::var("APPDIR").ok()
+}
+
 #[tauri::command]
 async fn update_config(
    new_config: Config,
@@ -477,6 +487,11 @@ pub async fn run() {
    let start_hidden = args.contains(&"--hidden".to_string());

    tauri::Builder::default()
+        .plugin(tauri_plugin_log::Builder::new()
+            .level(log::LevelFilter::Info)
+            .max_file_size(5_242_880) /* in bytes = 5MB */
+            .build(),
+        )
        .plugin(tauri_plugin_updater::Builder::new().build())
        .plugin(tauri_plugin_single_instance::init(|app, _args, _cwd| {
            // Focus the main window when attempting to launch another instance
@@ -485,8 +500,7 @@ pub async fn run() {
                let _ = window.set_focus();
            }
        }))
-        .plugin(
-            tauri_plugin_sql::Builder::default()
+        .plugin(tauri_plugin_sql::Builder::default()
            .add_migrations("sqlite:database.db", migrations)
            .build(),
        )
@@ -600,6 +614,8 @@ pub async fn run() {
            get_config_file_path,
            restart_websocket_server,
            get_current_app_path,
+            is_flatpak,
+            get_appimage_path
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -3,5 +3,12 @@

 #[tokio::main]
 async fn main() {
+    #[cfg(target_os = "linux")]
+    {
+        if std::env::var("WEBKIT_DISABLE_DMABUF_RENDERER").is_err() {
+            std::env::set_var("WEBKIT_DISABLE_DMABUF_RENDERER", "1");
+        }
+    }
+
    neodlp_lib::run().await
 }
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -2,7 +2,7 @@
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "NeoDLP",
  "mainBinaryName": "neodlp",
-  "version": "0.4.0",
+  "version": "0.4.1",
  "identifier": "com.neosubhamoy.neodlp",
  "build": {
    "beforeDevCommand": "npm run dev",
--- a/src-tauri/tauri.linux-aarch64.conf.json
+++ b/src-tauri/tauri.linux-aarch64.conf.json
@@ -10,8 +10,9 @@
        "windows": [
            {
                "title": "NeoDLP",
-                "width": 1067,
-                "height": 605,
+                "width": 1080,
+                "height": 680,
+                "decorations": false,
                "visible": false
            }
        ],
@@ -38,8 +39,12 @@
        "externalBin": [
            "binaries/yt-dlp",
            "binaries/aria2c",
-            "binaries/deno"
+            "binaries/deno",
+            "binaries/neodlp-pot"
        ],
+        "resources": {
+            "resources/plugins/yt-dlp-plugins/": "yt-dlp-plugins/"
+        },
        "linux": {
            "deb": {
                "depends": ["ffmpeg"],
--- a/src-tauri/tauri.linux-flatpak.conf.json
+++ b/src-tauri/tauri.linux-flatpak.conf.json
@@ -0,0 +1,51 @@
+{
+    "identifier": "com.neosubhamoy.neodlp",
+    "build": {
+        "beforeDevCommand": "npm run dev",
+        "beforeBuildCommand": "npm run build",
+        "devUrl": "http://localhost:1420",
+        "frontendDist": "../dist"
+    },
+    "app": {
+        "windows": [
+            {
+                "title": "NeoDLP",
+                "width": 1080,
+                "height": 680,
+                "decorations": false,
+                "visible": false
+            }
+        ],
+        "security": {
+            "csp": null,
+            "capabilities": [
+                "default",
+                "shell-scope"
+            ]
+        }
+    },
+    "bundle": {
+        "active": true,
+        "targets": ["deb"],
+        "createUpdaterArtifacts": true,
+        "licenseFile": "../LICENSE",
+        "icon": [
+            "icons/32x32.png",
+            "icons/128x128.png",
+            "icons/128x128@2x.png",
+            "icons/icon.icns",
+            "icons/icon.ico"
+        ],
+        "externalBin": [
+            "binaries/yt-dlp",
+            "binaries/ffmpeg",
+            "binaries/ffprobe",
+            "binaries/aria2c",
+            "binaries/deno",
+            "binaries/neodlp-pot"
+        ],
+        "resources": {
+            "resources/plugins/yt-dlp-plugins/": "yt-dlp-plugins/"
+        }
+    }
+}
--- a/src-tauri/tauri.linux-x86_64.conf.json
+++ b/src-tauri/tauri.linux-x86_64.conf.json
@@ -10,8 +10,9 @@
        "windows": [
            {
                "title": "NeoDLP",
-                "width": 1067,
-                "height": 605,
+                "width": 1080,
+                "height": 680,
+                "decorations": false,
                "visible": false
            }
        ],
@@ -38,8 +39,12 @@
        "externalBin": [
            "binaries/yt-dlp",
            "binaries/aria2c",
-            "binaries/deno"
+            "binaries/deno",
+            "binaries/neodlp-pot"
        ],
+        "resources": {
+            "resources/plugins/yt-dlp-plugins/": "yt-dlp-plugins/"
+        },
        "linux": {
            "deb": {
                "depends": ["ffmpeg"],
--- a/src-tauri/tauri.macos-aarch64.conf.json
+++ b/src-tauri/tauri.macos-aarch64.conf.json
@@ -39,13 +39,15 @@
            "binaries/yt-dlp",
            "binaries/ffmpeg",
            "binaries/ffprobe",
-            "binaries/deno"
+            "binaries/deno",
+            "binaries/neodlp-pot"
        ],
        "resources": {
            "target/aarch64-apple-darwin/release/neodlp-msghost": "neodlp-msghost",
            "resources/msghost-manifest/macos/chrome.json": "neodlp-msghost.json",
            "resources/msghost-manifest/macos/firefox.json": "neodlp-msghost-moz.json",
-            "resources/autostart/macos/autostart.plist": "neodlp-autostart.plist"
+            "resources/autostart/macos/autostart.plist": "neodlp-autostart.plist",
+            "resources/plugins/yt-dlp-plugins/": "yt-dlp-plugins/"
        },
        "macOS": {
            "providerShortName": "neosubhamoy"
--- a/src-tauri/tauri.macos-x86_64.conf.json
+++ b/src-tauri/tauri.macos-x86_64.conf.json
@@ -39,13 +39,15 @@
            "binaries/yt-dlp",
            "binaries/ffmpeg",
            "binaries/ffprobe",
-            "binaries/deno"
+            "binaries/deno",
+            "binaries/neodlp-pot"
        ],
        "resources": {
            "target/x86_64-apple-darwin/release/neodlp-msghost": "neodlp-msghost",
            "resources/msghost-manifest/macos/chrome.json": "neodlp-msghost.json",
            "resources/msghost-manifest/macos/firefox.json": "neodlp-msghost-moz.json",
-            "resources/autostart/macos/autostart.plist": "neodlp-autostart.plist"
+            "resources/autostart/macos/autostart.plist": "neodlp-autostart.plist",
+            "resources/plugins/yt-dlp-plugins/": "yt-dlp-plugins/"
        },
        "macOS": {
            "providerShortName": "neosubhamoy"
--- a/src-tauri/tauri.windows.conf.json
+++ b/src-tauri/tauri.windows.conf.json
@@ -10,8 +10,9 @@
        "windows": [
            {
                "title": "NeoDLP",
-                "width": 1067,
-                "height": 605,
+                "width": 1080,
+                "height": 680,
+                "decorations": false,
                "visible": false
            }
        ],
@@ -40,12 +41,14 @@
            "binaries/ffmpeg",
            "binaries/ffprobe",
            "binaries/aria2c",
-            "binaries/deno"
+            "binaries/deno",
+            "binaries/neodlp-pot"
        ],
        "resources": {
            "target/release/neodlp-msghost.exe": "neodlp-msghost.exe",
            "resources/msghost-manifest/windows/chrome.json": "chrome.json",
-            "resources/msghost-manifest/windows/firefox.json": "firefox.json"
+            "resources/msghost-manifest/windows/firefox.json": "firefox.json",
+            "resources/plugins/yt-dlp-plugins/": "yt-dlp-plugins/"
        },
        "windows": {
            "wix": {
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,6 +25,8 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import { useLogger } from "@/helpers/use-logger";
 import useDownloader from "@/helpers/use-downloader";
+import usePotServer from "@/helpers/use-pot-server";
+import { useLinuxRegisterer } from "@/helpers/use-linux-registerer";

 export default function App({ children }: { children: React.ReactNode }) {
    const { data: downloadStates, isSuccess: isSuccessFetchingDownloadStates } = useFetchAllDownloadStates();
@@ -39,6 +41,7 @@ export default function App({ children }: { children: React.ReactNode }) {
    const setIsUsingDefaultSettings = useSettingsPageStatesStore((state) => state.setIsUsingDefaultSettings);
    const setSettingsKey = useSettingsPageStatesStore((state) => state.setSettingsKey);
    const appVersion = useSettingsPageStatesStore(state => state.appVersion);
+    const isRunningPotServer = useSettingsPageStatesStore(state => state.isRunningPotServer);
    const ytDlpVersion = useSettingsPageStatesStore(state => state.ytDlpVersion);
    const setYtDlpVersion = useSettingsPageStatesStore((state) => state.setYtDlpVersion);
    const setIsFetchingYtDlpVersion = useSettingsPageStatesStore((state) => state.setIsFetchingYtDlpVersion);
@@ -50,6 +53,7 @@ export default function App({ children }: { children: React.ReactNode }) {
        download_dir: DOWNLOAD_DIR,
        theme: APP_THEME,
        color_scheme: APP_COLOR_SCHEME,
+        use_potoken: USE_POTOKEN,
    } = useSettingsPageStatesStore(state => state.settings);

    const erroredDownloadIds = useDownloaderPageStatesStore((state) => state.erroredDownloadIds);
@@ -63,10 +67,13 @@ export default function App({ children }: { children: React.ReactNode }) {
    const currentPlatform = platform();
    const { updateYtDlp } = useYtDlpUpdater();
    const { registerToMac } = useMacOsRegisterer();
+    const { registerToLinux } = useLinuxRegisterer();
    const { checkForAppUpdate } = useAppUpdater();
+    const { startPotServer, stopPotServer } = usePotServer();
    const setKvPairsKey = useKvPairsStatesStore((state) => state.setKvPairsKey);
    const ytDlpUpdateLastCheck = useKvPairsStatesStore(state => state.kvPairs.ytdlp_update_last_check);
    const macOsRegisteredVersion = useKvPairsStatesStore(state => state.kvPairs.macos_registered_version);
+    const linuxRegisteredVersion = useKvPairsStatesStore(state => state.kvPairs.linux_registered_version);

    const queryClient = useQueryClient();
    const downloadStatusUpdater = useUpdateDownloadStatus();
@@ -76,7 +83,9 @@ export default function App({ children }: { children: React.ReactNode }) {

    const hasRunYtDlpAutoUpdateRef = useRef(false);
    const hasRunAppUpdateCheckRef = useRef(false);
+    const hasRunPotServerStatusCheckRef = useRef(false);
    const isRegisteredToMacOsRef = useRef(false);
+    const isRegisteredToLinuxRef = useRef(false);
    const pendingErrorUpdatesRef = useRef<Set<string>>(new Set());

    const { fetchVideoMetadata, startDownload, pauseDownload, resumeDownload, cancelDownload, processQueuedDownloads } = useDownloader();
@@ -98,6 +107,19 @@ export default function App({ children }: { children: React.ReactNode }) {
        appWindow.onCloseRequested(handleCloseRequested);
    }, []);

+    // Cleanup before page refresh/unload
+    useEffect(() => {
+        const handleBeforeUnload = (_event: BeforeUnloadEvent) => {
+            if (isRunningPotServer) {
+                stopPotServer();
+            }
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => {
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+        };
+    }, [stopPotServer]);
+
    // Listen for websocket messages
    useEffect(() => {
        const unlisten = listen<WebSocketMessage>('websocket-message', (event) => {
@@ -272,6 +294,32 @@ export default function App({ children }: { children: React.ReactNode }) {
        }
    }, [isSettingsStatePropagated, isKvPairsStatePropagated]);

+    // Check POT server status and auto-start if enabled
+    useEffect(() => {
+        // Only run once when both settings and KV pairs are loaded
+        if (!isSettingsStatePropagated || !isKvPairsStatePropagated) {
+            console.log("Skipping POT server status check, waiting for configs to load...");
+            return;
+        }
+        // Skip if we've already run the POT server status check once
+        if (hasRunPotServerStatusCheckRef.current) {
+            console.log("POT server status check already performed in this session, skipping");
+            return;
+        }
+        hasRunPotServerStatusCheckRef.current = true;
+        console.log("Checking POT server status with loaded config values:", {
+            usePotoken: USE_POTOKEN,
+        });
+        if (USE_POTOKEN) {
+            console.log("Auto-starting POT server...");
+            startPotServer().catch((error) => {
+                console.error("Error starting POT server:", error);
+            });
+        } else {
+            console.log("Skipping POT server auto-start, not enabled.");
+        }
+    }, [isSettingsStatePropagated, isKvPairsStatePropagated]);
+
    // Check for MacOS auto-registration
    useEffect(() => {
        // Only run once when both settings and KV pairs are loaded
@@ -307,6 +355,41 @@ export default function App({ children }: { children: React.ReactNode }) {
        }
    }, [isSettingsStatePropagated, isKvPairsStatePropagated]);

+    // Check for Linux auto-registration
+    useEffect(() => {
+        // Only run once when both settings and KV pairs are loaded
+        if (!isSettingsStatePropagated || !isKvPairsStatePropagated) {
+            console.log("Skipping Linux auto registration, waiting for configs to load...");
+            return;
+        }
+        // Skip if we've already run the linux auto-registration once
+        if (isRegisteredToLinuxRef.current) {
+            console.log("Linux auto registration check already performed in this session, skipping");
+            return;
+        }
+        isRegisteredToLinuxRef.current = true;
+        console.log("Checking Linux auto registration with loaded config values:", {
+            appVersion: appVersion,
+            registeredVersion: linuxRegisteredVersion
+        });
+        if (currentPlatform === 'linux' && (!linuxRegisteredVersion || linuxRegisteredVersion !== appVersion)) {
+            console.log("Running Linux auto registration...");
+            LOG.info('NEODLP', 'Running Linux registration');
+            registerToLinux().then((result: { success: boolean, message: string }) => {
+                if (result.success) {
+                    console.log("Linux registration successful:", result.message);
+                    LOG.info('NEODLP', 'Linux registration successful');
+                } else {
+                    console.error("Linux registration failed:", result.message);
+                    LOG.error('NEODLP', `Linux registration failed: ${result.message}`);
+                }
+            }).catch((error) => {
+                console.error("Error during Linux registration:", error);
+                LOG.error('NEODLP', `Error during Linux registration: ${error}`);
+            });
+        }
+    }, [isSettingsStatePropagated, isKvPairsStatePropagated]);
+
    useEffect(() => {
        if (isSuccessFetchingDownloadStates && downloadStates) {
            // console.log("Download States fetched successfully:", downloadStates);
@@ -341,7 +424,7 @@ export default function App({ children }: { children: React.ReactNode }) {
            });
        });

-        const timeoutIds: NodeJS.Timeout[] = [];
+        const timeoutIds: ReturnType<typeof setTimeout>[] = [];
        unexpectedErrors.forEach((downloadId) => {
            pendingErrorUpdatesRef.current.add(downloadId);

--- a/src/components/custom/formatSelectionGroup.tsx
+++ b/src/components/custom/formatSelectionGroup.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 import { VideoFormat } from "@/types/video"
 import { determineFileType, formatBitrate, formatCodec, formatFileSize } from "@/utils"
--- a/src/components/custom/formatToggleGroup.tsx
+++ b/src/components/custom/formatToggleGroup.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import { type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 import { toggleVariants } from "@/components/ui/toggle";
--- a/src/components/custom/indeterminateProgress.tsx
+++ b/src/components/custom/indeterminateProgress.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import { Progress as ProgressPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

--- a/src/components/custom/legacyToggleGroup.tsx
+++ b/src/components/custom/legacyToggleGroup.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
 import { type VariantProps } from "class-variance-authority"

 import { cn } from "@/lib/utils"
--- a/src/components/custom/numberInput.tsx
+++ b/src/components/custom/numberInput.tsx
@@ -0,0 +1,110 @@
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+interface NumberInputProps
+    extends Omit<React.ComponentProps<"input">, "type" | "onChange" | "value"> {
+    value?: number
+    defaultValue?: number
+    min?: number
+    max?: number
+    step?: number
+    onChange?: (value: number) => void
+}
+
+const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  (
+    {
+      className,
+      value: controlledValue,
+      defaultValue = 0,
+      min = -Infinity,
+      max = Infinity,
+      step = 1,
+      onChange,
+      disabled,
+      readOnly,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue)
+    const isControlled = controlledValue !== undefined
+    const currentValue = isControlled ? controlledValue : internalValue
+
+    const updateValue = (newValue: number) => {
+      const clamped = Math.min(max, Math.max(min, newValue))
+      if (!isControlled) {
+        setInternalValue(clamped)
+      }
+      onChange?.(clamped)
+    }
+
+    const handleIncrement = () => {
+      if (!disabled && !readOnly) {
+        updateValue(currentValue + step)
+      }
+    }
+
+    const handleDecrement = () => {
+      if (!disabled && !readOnly) {
+        updateValue(currentValue - step)
+      }
+    }
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const parsed = parseFloat(e.target.value)
+      if (!isNaN(parsed)) {
+        updateValue(parsed)
+      } else if (e.target.value === "" || e.target.value === "-") {
+        if (!isControlled) {
+          setInternalValue(0)
+        }
+      }
+    }
+
+    return (
+      <div className={cn("relative flex items-center", className)}>
+        <Input
+          type="number"
+          ref={ref}
+          value={currentValue}
+          onChange={handleInputChange}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          readOnly={readOnly}
+          className="pr-16 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [-moz-appearance:textfield] focus-visible:ring-0"
+          {...props}
+        />
+        <div className="absolute right-0 flex h-full items-center">
+          <button
+            type="button"
+            onClick={handleDecrement}
+            disabled={disabled || readOnly || currentValue <= min}
+            className="flex h-full items-center justify-center px-2 text-muted-foreground hover:text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 transition-colors border-x"
+            aria-label="Decrement"
+            tabIndex={-1}
+          >
+            <Minus className="size-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={handleIncrement}
+            disabled={disabled || readOnly || currentValue >= max}
+            className="flex h-full items-center justify-center px-2 text-muted-foreground hover:text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 transition-colors rounded-r-md"
+            aria-label="Increment"
+            tabIndex={-1}
+          >
+            <Plus className="size-3.5" />
+          </button>
+        </div>
+      </div>
+    )
+  }
+)
+NumberInput.displayName = "NumberInput"
+
+export { NumberInput }
--- a/src/components/custom/playlistSelectionGroup.tsx
+++ b/src/components/custom/playlistSelectionGroup.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 import { RawVideoInfo } from "@/types/video"
 import { formatDurationString} from "@/utils"
--- a/src/components/custom/playlistToggleGroup.tsx
+++ b/src/components/custom/playlistToggleGroup.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import { type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 import { toggleVariants } from "@/components/ui/toggle";
--- a/src/components/icons/close.tsx
+++ b/src/components/icons/close.tsx
@@ -0,0 +1,12 @@
+export function CloseIcon({ className }: { className?: string }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" className={className}>
+            <path
+                fill="currentColor"
+                fillRule="evenodd"
+                d="m7.116 8l-4.558 4.558l.884.884L8 8.884l4.558 4.558l.884-.884L8.884 8l4.558-4.558l-.884-.884L8 7.116L3.442 2.558l-.884.884z"
+                clipRule="evenodd"
+            />
+        </svg>
+    );
+}
--- a/src/components/icons/maximize.tsx
+++ b/src/components/icons/maximize.tsx
@@ -0,0 +1,7 @@
+export function MaximizeIcon({ className }: { className?: string }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" className={className}>
+            <path fill="currentColor" d="M3 3v10h10V3zm9 9H4V4h8z" />
+        </svg>
+    );
+}
--- a/src/components/icons/minimize.tsx
+++ b/src/components/icons/minimize.tsx
@@ -0,0 +1,7 @@
+export function MinimizeIcon({ className }: { className?: string }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" className={className}>
+            <path fill="currentColor" d="M14 8v1H3V8z" />
+        </svg>
+    );
+}
--- a/src/components/icons/unmaximize.tsx
+++ b/src/components/icons/unmaximize.tsx
@@ -0,0 +1,10 @@
+export function UnmaximizeIcon({ className }: { className?: string }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" className={className}>
+            <g fill="currentColor">
+                <path d="M3 5v9h9V5zm8 8H4V6h7z" />
+                <path fillRule="evenodd" d="M5 5h1V4h7v7h-1v1h2V3H5z" clipRule="evenodd" />
+            </g>
+        </svg>
+    );
+}
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -8,10 +8,13 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { useLogger } from "@/helpers/use-logger";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import TitleBar from "@/components/titlebar";
+import { platform } from "@tauri-apps/plugin-os";

 export default function Navbar() {
    const [copied, setCopied] = useState(false);
    const location = useLocation();
+    const currentPlatform = platform();
    const logger = useLogger();
    const logs = logger.getLogs();
    const logText = logs.map(log => `${new Date(log.timestamp).toLocaleTimeString()} [${log.level.toUpperCase()}] ${log.context}: ${log.message}`).join('\n');
@@ -23,7 +26,13 @@ export default function Navbar() {
    }

    return (
-        <nav className="flex justify-between items-center py-3 px-4 sticky top-0 backdrop-blur supports-backdrop-filter:bg-background/60 border-b z-50">
+        <div className="sticky top-0 z-50">
+            {currentPlatform === "windows" || currentPlatform === "linux" ? (
+                <TitleBar />
+            ) : (
+                null
+            )}
+            <nav className="flex justify-between items-center py-3 px-4 backdrop-blur supports-backdrop-filter:bg-background/60 border-b">
                <div className="flex justify-center">
                    <SidebarTrigger />
                    <h1 className="text-lg font-semibold ml-4">{getRouteName(location.pathname)}</h1>
@@ -38,7 +47,7 @@ export default function Navbar() {
                                    </Button>
                                </DialogTrigger>
                            </TooltipTrigger>
-                        <TooltipContent>
+                            <TooltipContent side="bottom">
                                <p>Logs</p>
                            </TooltipContent>
                        </Tooltip>
@@ -85,5 +94,6 @@ export default function Navbar() {
                    </Dialog>
                </div>
            </nav>
+        </div>
    )
 }
--- a/src/components/pages/downloader/bottomBar.tsx
+++ b/src/components/pages/downloader/bottomBar.tsx
@@ -276,7 +276,7 @@ function DownloadConfigDialog({ selectedFormatFileType }: DownloadConfigDialogPr

 export function BottomBar({ videoMetadata, selectedFormat, selectedFormatFileType, selectedVideoFormat, selectedAudioFormats, containerRef }: BottomBarProps) {
    const { startDownload } = useAppContext();
-    console.log(selectedAudioFormats);
+
    const activeDownloadModeTab = useDownloaderPageStatesStore((state) => state.activeDownloadModeTab);
    const isStartingDownload = useDownloaderPageStatesStore((state) => state.isStartingDownload);
    const selectedDownloadFormat = useDownloaderPageStatesStore((state) => state.selectedDownloadFormat);
--- a/src/components/pages/downloader/playlistDownloader.tsx
+++ b/src/components/pages/downloader/playlistDownloader.tsx
@@ -10,6 +10,7 @@ import { PlaylistToggleGroup, PlaylistToggleGroupItem } from "@/components/custo
 import { getMergedBestFormat } from "@/utils";
 import { Switch } from "@/components/ui/switch";
 import { FormatToggleGroup, FormatToggleGroupItem } from "@/components/custom/formatToggleGroup";
+import { Layout } from "react-resizable-panels";

 interface PlaylistPreviewSelectionProps {
    videoMetadata: RawVideoInfo;
@@ -348,18 +349,22 @@ export function PlaylistDownloader({ videoMetadata, audioOnlyFormats, videoOnlyF
    return (
        <div className="flex">
            <ResizablePanelGroup
-            direction="horizontal"
+            orientation="horizontal"
            className="w-full"
-            onLayout={(sizes) => setPlaylistPanelSizes(sizes)}
+            onLayoutChanged={(layout: Layout) => {
+                const firstPanelSize = layout[Object.keys(layout)[0]];
+                const secondPanelSize = layout[Object.keys(layout)[1]];
+                setPlaylistPanelSizes([firstPanelSize, secondPanelSize]);
+            }}
            >
                <ResizablePanel
-                defaultSize={playlistPanelSizes[0]}
+                defaultSize={`${playlistPanelSizes[0]}%`}
                >
                    <PlaylistPreviewSelection videoMetadata={videoMetadata} />
                </ResizablePanel>
-                <ResizableHandle />
+                <ResizableHandle withHandle />
                <ResizablePanel
-                defaultSize={playlistPanelSizes[1]}
+                defaultSize={`${playlistPanelSizes[1]}%`}
                >
                    <div className="flex flex-col w-full pl-4">
                        <Tabs
--- a/src/components/pages/downloader/videoDownloader.tsx
+++ b/src/components/pages/downloader/videoDownloader.tsx
@@ -12,6 +12,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { FormatToggleGroup, FormatToggleGroupItem } from "@/components/custom/formatToggleGroup";
+import { Layout } from "react-resizable-panels";

 interface VideoPreviewProps {
    videoMetadata: RawVideoInfo;
@@ -325,18 +326,22 @@ export function VideoDownloader({ videoMetadata, audioOnlyFormats, videoOnlyForm
    return (
        <div className="flex">
            <ResizablePanelGroup
-            direction="horizontal"
+            orientation="horizontal"
            className="w-full"
-            onLayout={(sizes) => setVideoPanelSizes(sizes)}
+            onLayoutChanged={(layout: Layout) => {
+                const firstPanelSize = layout[Object.keys(layout)[0]];
+                const secondPanelSize = layout[Object.keys(layout)[1]];
+                setVideoPanelSizes([firstPanelSize, secondPanelSize]);
+            }}
            >
                <ResizablePanel
-                defaultSize={videoPanelSizes[0]}
+                defaultSize={`${videoPanelSizes[0]}%`}
                >
                    <VideoPreview videoMetadata={videoMetadata} />
                </ResizablePanel>
-                <ResizableHandle />
+                <ResizableHandle withHandle />
                <ResizablePanel
-                defaultSize={videoPanelSizes[1]}
+                defaultSize={`${videoPanelSizes[1]}%`}
                >
                    <div className="flex flex-col w-full pl-4">
                        <Tabs
--- a/src/components/pages/library/completedDownloads.tsx
+++ b/src/components/pages/library/completedDownloads.tsx
@@ -352,7 +352,7 @@ export function CompletedDownloads({ downloads }: CompletedDownloadsProps) {
                <Empty className="mt-10">
                    <EmptyHeader>
                        <EmptyMedia variant="icon">
-                            <CircleArrowDown />
+                            <CircleArrowDown className="stroke-primary" />
                        </EmptyMedia>
                        <EmptyTitle>No Completed Downloads</EmptyTitle>
                        <EmptyDescription>
--- a/src/components/pages/library/incompleteDownloads.tsx
+++ b/src/components/pages/library/incompleteDownloads.tsx
@@ -115,9 +115,9 @@ export function IncompleteDownload({ state }: IncompleteDownloadProps) {
                        ) : (
                            <span>{state.download_status.charAt(0).toUpperCase() + state.download_status.slice(1)}</span>
                        )} {
-                        (debugMode && state.download_id) || (state.download_status === 'errored' && state.download_id) && (
+                        (debugMode && state.download_id) || (state.download_status === 'errored' && state.download_id) ? (
                            <><span className="text-primary">•</span> ID: {state.download_id.toUpperCase()}</>
-                        )} {
+                        ) : null} {
                        state.download_status === 'downloading' && state.status !== 'finished' && state.speed && (
                            <><span className="text-primary">•</span> Speed: {formatSpeed(state.speed)}</>
                        )} {state.download_status === 'downloading' && state.eta && (
@@ -280,7 +280,7 @@ export function IncompleteDownloads({ downloads }: IncompleteDownloadsProps) {
                <Empty className="mt-10">
                    <EmptyHeader>
                        <EmptyMedia variant="icon">
-                            <CircleCheck />
+                            <CircleCheck className="stroke-primary" />
                        </EmptyMedia>
                        <EmptyTitle>No Incomplete Downloads</EmptyTitle>
                        <EmptyDescription>
--- a/src/components/pages/settings/applicationSettings.tsx
+++ b/src/components/pages/settings/applicationSettings.tsx
@@ -7,7 +7,7 @@ import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { toast } from "sonner";
-import { BadgeCheck, BellRing, BrushCleaning, Bug, Cookie, ExternalLink, FilePen, FileVideo, Folder, FolderOpen, Github, Globe, Heart, Info, Loader2, LucideIcon, Mail, Monitor, Moon, Package, Scale, ShieldMinus, SquareTerminal, Sun, Terminal, Trash, TriangleAlert, WandSparkles, Wifi, Wrench } from "lucide-react";
+import { BadgeCheck, BellRing, BrushCleaning, Bug, Cookie, ExternalLink, FilePen, FileVideo, Folder, FolderOpen, Github, Globe, Heart, Info, KeyRound, Loader2, LucideIcon, Mail, Monitor, Moon, Package, Scale, ShieldMinus, SquareTerminal, Sun, Terminal, Timer, Trash, TriangleAlert, WandSparkles, Wifi, Wrench } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Slider } from "@/components/ui/slider";
 import { Input } from "@/components/ui/input";
@@ -34,6 +34,8 @@ import { config } from "@/config";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import neosubhamoyImage from "@/assets/images/neosubhamoy.jpg";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { NumberInput } from "@/components/custom/numberInput";
+import usePotServer from "@/helpers/use-pot-server";

 const proxyUrlSchema = z.object({
    url: z.url({
@@ -66,6 +68,59 @@ const filenameTemplateShcema = z.object({
    template: z.string().min(1, { message: "Filename Template is required" }),
 });

+const minMaxSleepIntervalSchema = z.object({
+    min_sleep_interval: z.coerce.number<number>({
+        error: (issue) => issue.input === undefined || issue.input === null || issue.input === ""
+        ? "Minimum Sleep Interval is required"
+        : "Minimum Sleep Interval must be a valid number"
+    }).int({
+        message: "Minimum Sleep Interval must be an integer"
+    }).min(1, {
+        message: "Minimum Sleep Interval must be at least 1 second"
+    }).max(3600, {
+        message: "Minimum Sleep Interval must be at most 3600 seconds (1 hour)"
+    }),
+    max_sleep_interval: z.coerce.number<number>({
+        error: (issue) => issue.input === undefined || issue.input === null || issue.input === ""
+        ? "Maximum Sleep Interval is required"
+        : "Maximum Sleep Interval must be a valid number"
+    }).int({
+        message: "Maximum Sleep Interval must be an integer"
+    }).min(1, {
+        message: "Maximum Sleep Interval must be at least 1 second"
+    }).max(3600, {
+        message: "Maximum Sleep Interval must be at most 3600 seconds (1 hour)"
+    }),
+})
+
+const requestSleepIntervalSchema = z.object({
+    request_sleep_interval: z.coerce.number<number>({
+        error: (issue) => issue.input === undefined || issue.input === null || issue.input === ""
+        ? "Request Sleep Interval is required"
+        : "Request Sleep Interval must be a valid number"
+    }).int({
+        message: "Request Sleep Interval must be an integer"
+    }).min(1, {
+        message: "Request Sleep Interval must be at least 1 second"
+    }).max(3600, {
+        message: "Request Sleep Interval must be at most 3600 seconds (1 hour)"
+    }),
+})
+
+const potServerPortSchema = z.object({
+    port: z.coerce.number<number>({
+        error: (issue) => issue.input === undefined || issue.input === null || issue.input === ""
+        ? "POT Server Port is required"
+        : "POT Server Port must be a valid number"
+    }).int({
+        message: "POT Server Port must be an integer"
+    }).min(4000, {
+        message: "POT Server Port must be at least 4000"
+    }).max(5000, {
+        message: "POT Server Port must be at most 5000"
+    }),
+});
+
 function AppGeneralSettings() {
    const { saveSettingsKey } = useSettings();

@@ -668,9 +723,10 @@ function AppNetworkSettings() {
                        render={({ field }) => (
                            <FormItem className="w-full">
                                <FormControl>
-                                    <Input
-                                    className="focus-visible:ring-0"
+                                    <NumberInput
+                                    className="w-full"
                                    placeholder="Enter rate limit in bytes/s"
+                                    min={0}
                                    readOnly={useCustomCommands}
                                    {...field}
                                    />
@@ -853,7 +909,7 @@ function AppSponsorblockSettings() {
    return (
        <>
        <div className="sponsorblock">
-            <h3 className="font-semibold">Sponsor Block</h3>
+            <h3 className="font-semibold">Sponsorblock</h3>
            <p className="text-xs text-muted-foreground mb-3">Use sponsorblock to remove/mark unwanted segments in videos (sponsorships, intros, outros, etc.)</p>
            <div className="flex items-center space-x-2 mb-4">
                <Switch
@@ -978,6 +1034,369 @@ function AppSponsorblockSettings() {
    );
 }

+function AppDelaySettings() {
+    const { saveSettingsKey } = useSettings();
+
+    const formResetTrigger = useSettingsPageStatesStore(state => state.formResetTrigger);
+    const acknowledgeFormReset = useSettingsPageStatesStore(state => state.acknowledgeFormReset);
+
+    const useDelay = useSettingsPageStatesStore(state => state.settings.use_delay);
+    const useSearchDelay = useSettingsPageStatesStore(state => state.settings.use_search_delay);
+    const delayMode = useSettingsPageStatesStore(state => state.settings.delay_mode);
+    const minSleepInterval = useSettingsPageStatesStore(state => state.settings.min_sleep_interval);
+    const maxSleepInterval = useSettingsPageStatesStore(state => state.settings.max_sleep_interval);
+    const requestSleepInterval = useSettingsPageStatesStore(state => state.settings.request_sleep_interval);
+    const delayPlaylistOnly = useSettingsPageStatesStore(state => state.settings.delay_playlist_only);
+    const useCustomCommands = useSettingsPageStatesStore(state => state.settings.use_custom_commands);
+
+    const minMaxSleepIntervalForm = useForm<z.infer<typeof minMaxSleepIntervalSchema>>({
+        resolver: zodResolver(minMaxSleepIntervalSchema),
+        defaultValues: {
+            min_sleep_interval: minSleepInterval,
+            max_sleep_interval: maxSleepInterval,
+        },
+        mode: "onChange",
+    });
+    const watchedMinSleepInterval = minMaxSleepIntervalForm.watch("min_sleep_interval");
+    const watchedMaxSleepInterval = minMaxSleepIntervalForm.watch("max_sleep_interval");
+    const { errors: minMaxSleepIntervalFormErrors } = minMaxSleepIntervalForm.formState;
+
+    function handleMinMaxSleepIntervalSubmit(values: z.infer<typeof minMaxSleepIntervalSchema>) {
+        try {
+            saveSettingsKey('min_sleep_interval', values.min_sleep_interval);
+            saveSettingsKey('max_sleep_interval', values.max_sleep_interval);
+            toast.success("Sleep Intervals updated", {
+                description: `Minimum Sleep Interval changed to ${values.min_sleep_interval} seconds, Maximum Sleep Interval changed to ${values.max_sleep_interval} seconds`,
+            });
+        } catch (error) {
+            console.error("Error changing sleep intervals:", error);
+            toast.error("Failed to change sleep intervals", {
+                description: "An error occurred while trying to change the sleep intervals. Please try again.",
+            });
+        }
+    }
+
+    const requestSleepIntervalForm = useForm<z.infer<typeof requestSleepIntervalSchema>>({
+        resolver: zodResolver(requestSleepIntervalSchema),
+        defaultValues: {
+            request_sleep_interval: requestSleepInterval,
+        },
+        mode: "onChange",
+    });
+    const watchedRequestSleepInterval = requestSleepIntervalForm.watch("request_sleep_interval");
+    const { errors: requestSleepIntervalFormErrors } = requestSleepIntervalForm.formState;
+
+    function handleRequestSleepIntervalSubmit(values: z.infer<typeof requestSleepIntervalSchema>) {
+        try {
+            saveSettingsKey('request_sleep_interval', values.request_sleep_interval);
+            toast.success("Request Sleep Interval updated", {
+                description: `Request Sleep Interval changed to ${values.request_sleep_interval} seconds`,
+            });
+        } catch (error) {
+            console.error("Error changing request sleep interval:", error);
+            toast.error("Failed to change request sleep interval", {
+                description: "An error occurred while trying to change the request sleep interval. Please try again.",
+            });
+        }
+    }
+
+    useEffect(() => {
+        if (formResetTrigger > 0) {
+            minMaxSleepIntervalForm.reset();
+            requestSleepIntervalForm.reset();
+            acknowledgeFormReset();
+        }
+    }, [formResetTrigger]);
+
+    return (
+        <>
+        <div className="delay">
+            <h3 className="font-semibold">Delay</h3>
+            <p className="text-xs text-muted-foreground mb-3">Use delay to prevent potential issues with some sites (bypass rate-limit, temporary ban, etc.)</p>
+            <div className="flex items-center space-x-2 mb-3">
+                <Switch
+                id="use-delay"
+                checked={useDelay}
+                onCheckedChange={(checked) => saveSettingsKey('use_delay', checked)}
+                disabled={useCustomCommands}
+                />
+                <Label htmlFor="use-delay">Use Delay in Downloads</Label>
+            </div>
+            <div className="flex items-center space-x-2 mb-4">
+                <Switch
+                id="use-search-delay"
+                checked={useSearchDelay}
+                onCheckedChange={(checked) => saveSettingsKey('use_search_delay', checked)}
+                disabled={useCustomCommands}
+                />
+                <Label htmlFor="use-search-delay">Use Delay in Search</Label>
+            </div>
+            <RadioGroup
+            orientation="horizontal"
+            className="flex items-center gap-4"
+            value={delayMode}
+            onValueChange={(value) => saveSettingsKey('delay_mode', value)}
+            disabled={(!useDelay && !useSearchDelay) || useCustomCommands}
+            >
+                <div className="flex items-center gap-3">
+                    <RadioGroupItem value="auto" id="delay-auto" />
+                    <Label htmlFor="delay-auto">Auto (Default)</Label>
+                </div>
+                <div className="flex items-center gap-3">
+                    <RadioGroupItem value="custom" id="delay-custom" />
+                    <Label htmlFor="delay-custom">Custom</Label>
+                </div>
+            </RadioGroup>
+            <div className="flex flex-col gap-2 mt-5">
+                <Label className="text-xs mb-1">Minimum, Maximum Sleep Interval (in Seconds)</Label>
+                <Form {...minMaxSleepIntervalForm}>
+                    <form onSubmit={minMaxSleepIntervalForm.handleSubmit(handleMinMaxSleepIntervalSubmit)} className="flex gap-4 w-full" autoComplete="off">
+                        <FormField
+                            control={minMaxSleepIntervalForm.control}
+                            name="min_sleep_interval"
+                            disabled={delayMode !== "custom" || (!useDelay && !useSearchDelay)}
+                            render={({ field }) => (
+                                <FormItem className="w-full">
+                                    <FormControl>
+                                        <NumberInput
+                                        className="w-full"
+                                        placeholder="Min sleep"
+                                        min={0}
+                                        readOnly={useCustomCommands}
+                                        {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={minMaxSleepIntervalForm.control}
+                            name="max_sleep_interval"
+                            disabled={delayMode !== "custom" || (!useDelay && !useSearchDelay)}
+                            render={({ field }) => (
+                                <FormItem className="w-full">
+                                    <FormControl>
+                                        <NumberInput
+                                        className="w-full"
+                                        placeholder="Max sleep"
+                                        min={0}
+                                        readOnly={useCustomCommands}
+                                        {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <Button
+                            type="submit"
+                            disabled={(!watchedMinSleepInterval || Number(watchedMinSleepInterval) === minSleepInterval) && (!watchedMaxSleepInterval || Number(watchedMaxSleepInterval) === maxSleepInterval) || Object.keys(minMaxSleepIntervalFormErrors).length > 0 || delayMode !== "custom" || (!useDelay && !useSearchDelay)}
+                        >
+                            Save
+                        </Button>
+                    </form>
+                </Form>
+            </div>
+            <div className="flex flex-col gap-2 mt-4 mb-2">
+                <Label className="text-xs mb-1">Request Sleep Interval (in Seconds)</Label>
+                <Form {...requestSleepIntervalForm}>
+                    <form onSubmit={requestSleepIntervalForm.handleSubmit(handleRequestSleepIntervalSubmit)} className="flex gap-4 w-full" autoComplete="off">
+                        <FormField
+                            control={requestSleepIntervalForm.control}
+                            name="request_sleep_interval"
+                            disabled={delayMode !== "custom" || (!useDelay && !useSearchDelay)}
+                            render={({ field }) => (
+                                <FormItem className="w-full">
+                                    <FormControl>
+                                        <NumberInput
+                                        className="w-full"
+                                        placeholder="Request sleep"
+                                        min={0}
+                                        readOnly={useCustomCommands}
+                                        {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <Button
+                            type="submit"
+                            disabled={!watchedRequestSleepInterval || Number(watchedRequestSleepInterval) === requestSleepInterval || Object.keys(requestSleepIntervalFormErrors).length > 0 || delayMode !== "custom" || (!useDelay && !useSearchDelay)}
+                        >
+                            Save
+                        </Button>
+                    </form>
+                </Form>
+            </div>
+            <Label className="text-xs text-muted-foreground">(Configured: {minSleepInterval}s - {maxSleepInterval}s & {requestSleepInterval}s, Mode: {delayMode === 'auto' ? 'Auto' : 'Custom'}, Status: {useDelay && delayPlaylistOnly ? 'Playlist Only' : useDelay ? 'Downloads' : ''}{useDelay && useSearchDelay ? ', Search' : useSearchDelay ? 'Search' : !useDelay && !useSearchDelay ? 'Disabled' : ''}) (Default: 10s - 20s & 1s, Range: 1s - 3600s)</Label>
+        </div>
+        <div className="delay-playlist-only">
+            <h3 className="font-semibold">Delay Playlist Only</h3>
+            <p className="text-xs text-muted-foreground mb-3">Only apply delay for playlist/batch downloads, single video downloads will not be affected (recommended)</p>
+            <div className="flex items-center space-x-2 mb-4">
+                <Switch
+                id="delay-playlist-only"
+                checked={delayPlaylistOnly}
+                onCheckedChange={(checked) => saveSettingsKey('delay_playlist_only', checked)}
+                disabled={!useDelay || useCustomCommands}
+                />
+            </div>
+        </div>
+        </>
+    );
+}
+
+function AppPoTokenSettings() {
+    const formResetTrigger = useSettingsPageStatesStore(state => state.formResetTrigger);
+    const acknowledgeFormReset = useSettingsPageStatesStore(state => state.acknowledgeFormReset);
+
+    const usePotoken = useSettingsPageStatesStore(state => state.settings.use_potoken);
+    const disableInnertube = useSettingsPageStatesStore(state => state.settings.disable_innertube);
+    const potServerPort = useSettingsPageStatesStore(state => state.settings.pot_server_port);
+    const useCustomCommands = useSettingsPageStatesStore(state => state.settings.use_custom_commands);
+    const isRunningPotServer = useSettingsPageStatesStore(state => state.isRunningPotServer);
+    const isStartingPotServer = useSettingsPageStatesStore(state => state.isStartingPotServer);
+    const isChangingPotServerPort = useSettingsPageStatesStore(state => state.isChangingPotServerPort);
+    const setIsChangingPotServerPort = useSettingsPageStatesStore(state => state.setIsChangingPotServerPort);
+
+    const { saveSettingsKey } = useSettings();
+    const { startPotServer, stopPotServer } = usePotServer();
+
+    const potServerPortForm = useForm<z.infer<typeof potServerPortSchema>>({
+        resolver: zodResolver(potServerPortSchema),
+        defaultValues: {
+            port: potServerPort,
+        },
+        mode: "onChange",
+    });
+    const watchedPotServerPort = potServerPortForm.watch("port");
+    const { errors: potServerPortFormErrors } = potServerPortForm.formState;
+
+    async function handlePotServerPortSubmit(values: z.infer<typeof potServerPortSchema>) {
+        setIsChangingPotServerPort(true);
+        try {
+            saveSettingsKey('pot_server_port', values.port);
+            if (isRunningPotServer) {
+                await stopPotServer();
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                await startPotServer(values.port);
+            }
+            toast.success("POT Server Port updated", {
+                description: `PO Token Server Port changed to ${values.port}`,
+            });
+        } catch (error) {
+            console.error("Error changing PO Token Server Port:", error);
+            toast.error("Failed to change POT Server Port", {
+                description: "An error occurred while trying to change the PO Token Server Port. Please try again.",
+            });
+        } finally {
+            setIsChangingPotServerPort(false);
+        }
+    }
+
+    useEffect(() => {
+        if (formResetTrigger > 0) {
+            potServerPortForm.reset();
+            acknowledgeFormReset();
+        }
+    }, [formResetTrigger]);
+
+    return (
+        <>
+        <div className="potoken">
+            <h3 className="font-semibold">PO Token</h3>
+            <p className="text-xs text-muted-foreground mb-3">Generate proof-of-origin token for youtube to make seem your traffic more legitimate (bypasses some bot-protection checks, sometimes requires cookies)</p>
+            <div className="flex items-center space-x-2 mb-2">
+                <Switch
+                id="use-potoken"
+                checked={usePotoken}
+                onCheckedChange={async (checked) => {
+                    saveSettingsKey('use_potoken', checked);
+                    if (checked) {
+                        await startPotServer();
+                    } else {
+                        await stopPotServer();
+                    }
+                }}
+                disabled={useCustomCommands || isStartingPotServer || isChangingPotServerPort}
+                />
+                <Label htmlFor="use-potoken">Use PO Token</Label>
+            </div>
+            <Label className="text-xs text-muted-foreground flex items-center">
+                <span className="mr-1">NeoDLP POT Server is</span>
+                {isStartingPotServer ? (
+                    <span className="text-amber-600 dark:text-amber-500 underline">Starting</span>
+                ) : isRunningPotServer ? (
+                    <span className="text-emerald-600 dark:text-emerald-500 underline">Running</span>
+                ) : (
+                    <span className="text-red-600 dark:text-red-500 underline">Not Running</span>
+                )}
+                {isRunningPotServer && potServerPort ? (
+                    <span className="ml-1">on Port {potServerPort}</span>
+                ) : null}
+            </Label>
+        </div>
+        <div className="disable-innertube">
+            <h3 className="font-semibold">Disable Innertube</h3>
+            <p className="text-xs text-muted-foreground mb-3">Disable the usage of innertube api for potoken generation (falls back to legacy mode, use only if normal potoken is not working)</p>
+            <div className="flex items-center space-x-2">
+                <Switch
+                id="disable-innertube"
+                checked={disableInnertube}
+                onCheckedChange={(checked) => saveSettingsKey('disable_innertube', checked)}
+                disabled={useCustomCommands || !usePotoken}
+                />
+            </div>
+        </div>
+        <div className="pot-server-port">
+            <h3 className="font-semibold">POT Server Port</h3>
+            <p className="text-xs text-muted-foreground mb-3">Change neodlp proof-of-origin token server port</p>
+            <div className="flex flex-col gap-2">
+                <Form {...potServerPortForm}>
+                    <form onSubmit={potServerPortForm.handleSubmit(handlePotServerPortSubmit)} className="flex gap-4 w-full" autoComplete="off">
+                        <FormField
+                            control={potServerPortForm.control}
+                            name="port"
+                            disabled={!usePotoken || useCustomCommands || isChangingPotServerPort || isStartingPotServer}
+                            render={({ field }) => (
+                                <FormItem className="w-full">
+                                    <FormControl>
+                                        <NumberInput
+                                        className="w-full"
+                                        placeholder="Enter port number"
+                                        min={0}
+                                        readOnly={useCustomCommands}
+                                        {...field}
+                                        />
+                                    </FormControl>
+                                    <Label htmlFor="port" className="text-xs text-muted-foreground">(Current: {potServerPort}) (Default: 4416, Range: 4000-5000)</Label>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <Button
+                            type="submit"
+                            disabled={!watchedPotServerPort || Number(watchedPotServerPort) === potServerPort || Object.keys(potServerPortFormErrors).length > 0 || !usePotoken || useCustomCommands || isChangingPotServerPort || isStartingPotServer}
+                        >
+                            {isChangingPotServerPort ? (
+                                <>
+                                <Loader2 className="h-4 w-4 animate-spin" />
+                                Changing
+                                </>
+                            ) : (
+                                'Change'
+                            )}
+                        </Button>
+                    </form>
+                </Form>
+            </div>
+        </div>
+        </>
+    );
+}
+
 function AppNotificationSettings() {
    const { saveSettingsKey } = useSettings();

@@ -1040,12 +1459,14 @@ function AppNotificationSettings() {

 function AppCommandSettings() {
    const { saveSettingsKey } = useSettings();
+    const { startPotServer, stopPotServer } = usePotServer();

    const formResetTrigger = useSettingsPageStatesStore(state => state.formResetTrigger);
    const acknowledgeFormReset = useSettingsPageStatesStore(state => state.acknowledgeFormReset);

    const useCustomCommands = useSettingsPageStatesStore(state => state.settings.use_custom_commands);
    const customCommands = useSettingsPageStatesStore(state => state.settings.custom_commands);
+    const usePotoken = useSettingsPageStatesStore(state => state.settings.use_potoken);

    const setDownloadConfigurationKey = useDownloaderPageStatesStore((state) => state.setDownloadConfigurationKey);
    const resetDownloadConfiguration = useDownloaderPageStatesStore((state) => state.resetDownloadConfiguration);
@@ -1123,9 +1544,14 @@ function AppCommandSettings() {
                <Switch
                id="use-custom-commands"
                checked={useCustomCommands}
-                onCheckedChange={(checked) => {
+                onCheckedChange={async(checked) => {
                    saveSettingsKey('use_custom_commands', checked)
                    resetDownloadConfiguration();
+                    if (checked && usePotoken) {
+                        await stopPotServer();
+                    } else if (!checked && usePotoken) {
+                        await startPotServer();
+                    }
                }}
                />
                <Label htmlFor="use-custom-commands">Use Custom Commands</Label>
@@ -1268,6 +1694,7 @@ function AppInfoSettings() {
        { key: 'ffprobe', name: 'FFprobe', desc: 'Multimedia stream analyzer for retrieving media information', url: 'https://ffmpeg.org/ffprobe.html', license: 'LGPLv2.1+', licenseUrl: 'https://ffmpeg.org/legal.html' },
        { key: 'deno', name: 'Deno', desc: 'The modern JavaScript/TypeScript runtime', url: 'https://deno.land/', license: 'MIT', licenseUrl: 'https://github.com/denoland/deno/blob/main/LICENSE.md' },
        { key: 'aria2', name: 'Aria2', desc: 'Lightweight multi-protocol & multi-source download utility', url: 'https://aria2.github.io/', license: 'GPLv2+', licenseUrl: 'https://github.com/aria2/aria2/blob/master/COPYING' },
+        { Key: 'bgutil-pot-rs', name: 'BgUtils POT Provider (Rust)', desc: 'A high-performance YouTube POT (Proof-of-Origin Token) provider implemented in Rust', url: 'https://github.com/jim60105/bgutil-ytdlp-pot-provider-rs', license: 'GPLv3+', licenseUrl: 'https://github.com/jim60105/bgutil-ytdlp-pot-provider-rs/blob/master/LICENSE' },
    ];
    const langDepsList = [
        { key: 'tauri', name: 'Tauri', desc: 'Framework for building cross-platform, tiny and blazing fast binaries', url: 'https://tauri.app/', license: 'MIT, Apache-2.0', licenseUrl: 'https://github.com/tauri-apps/tauri/blob/dev/LICENSE_MIT' },
@@ -1468,6 +1895,8 @@ export function ApplicationSettings() {
        { key: 'network', label: 'Network', icon: Wifi, component: <AppNetworkSettings /> },
        { key: 'cookies', label: 'Cookies', icon: Cookie, component: <AppCookiesSettings /> },
        { key: 'sponsorblock', label: 'Sponsorblock', icon: ShieldMinus, component: <AppSponsorblockSettings /> },
+        { key: 'delay', label: 'Delay', icon: Timer, component: <AppDelaySettings /> },
+        { key: 'potoken', label: 'Potoken', icon: KeyRound, component: <AppPoTokenSettings /> },
        { key: 'notifications', label: 'Notifications', icon: BellRing, component: <AppNotificationSettings /> },
        { key: 'commands', label: 'Commands', icon: SquareTerminal, component: <AppCommandSettings /> },
        { key: 'debug', label: 'Debug', icon: Bug, component: <AppDebugSettings /> },
@@ -1553,7 +1982,7 @@ export function ApplicationSettings() {
            </TabsList>
            <div className="min-h-full flex flex-col w-full border-l border-border pl-4">
                {tabsList.map((tab) => (
-                    <TabsContent key={tab.key} value={tab.key} className={clsx("flex flex-col gap-4 min-h-108.75", tab.key === "info" ? "max-w-[80%]" : "max-w-[70%]")}>
+                    <TabsContent key={tab.key} value={tab.key} className={clsx("flex flex-col gap-4 min-h-130", tab.key === "info" ? "max-w-[80%]" : "max-w-[70%]")}>
                        {tab.component}
                    </TabsContent>
                ))}
--- a/src/components/pages/settings/extensionSettings.tsx
+++ b/src/components/pages/settings/extensionSettings.tsx
@@ -7,7 +7,6 @@ import { Button } from "@/components/ui/button";
 import { toast } from "sonner";
 import { ArrowDownToLine, ArrowRight, EthernetPort, Loader2, Radio, RotateCw } from "lucide-react";
 import { useSettings } from "@/helpers/use-settings";
-import { Input } from "@/components/ui/input";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod"
@@ -15,6 +14,7 @@ import { Form, FormControl, FormField, FormItem, FormMessage } from "@/component
 import { invoke } from "@tauri-apps/api/core";
 import { SlidingButton } from "@/components/custom/slidingButton";
 import clsx from "clsx";
+import { NumberInput } from "@/components/custom/numberInput";

 const websocketPortSchema = z.object({
    port: z.coerce.number<number>({
@@ -167,9 +167,10 @@ function ExtPortSettings() {
                            render={({ field }) => (
                                <FormItem className="w-full">
                                    <FormControl>
-                                        <Input
-                                        className="focus-visible:ring-0"
+                                        <NumberInput
+                                        className="w-full"
                                        placeholder="Enter port number"
+                                        min={0}
                                        {...field}
                                        />
                                    </FormControl>
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -147,7 +147,7 @@ export function AppSidebar() {
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button variant="ghost">
-                                <CircleArrowUp className="size-4" />
+                                <CircleArrowUp className="size-4 stroke-primary" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent side="right">
--- a/src/components/titlebar.tsx
+++ b/src/components/titlebar.tsx
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { MaximizeIcon } from "@/components/icons/maximize";
+import { MinimizeIcon } from "@/components/icons/minimize";
+import { CloseIcon } from "@/components/icons/close";
+import { UnmaximizeIcon } from "@/components/icons/unmaximize";
+
+export default function TitleBar() {
+    const [maximized, setMaximized] = useState<boolean>(false);
+    const appWindow = getCurrentWebviewWindow();
+
+    return (
+        <div className="titlebar flex items-center justify-between border-b bg-background">
+            <div className="flex items-center justify-center grow px-4 py-2.5" data-tauri-drag-region>
+                <h1 className="text-sm text-primary font-semibold">NeoDLP</h1>
+            </div>
+            <div className="controls flex items-center justify-center">
+                <button
+                className="px-4 py-3 hover:bg-muted"
+                id="titlebar-minimize"
+                title="Minimize"
+                onClick={() => appWindow.minimize()}
+                >
+                    <MinimizeIcon />
+                </button>
+                <button
+                className="px-4 py-3 hover:bg-muted"
+                id="titlebar-maximize"
+                title={maximized ? "Unmaximize" : "Maximize"}
+                onClick={async () => {
+                    const isMaximized = await appWindow.isMaximized();
+                    if (isMaximized) {
+                        await appWindow.unmaximize();
+                        setMaximized(false);
+                    } else {
+                        await appWindow.maximize();
+                        setMaximized(true);
+                    }
+                }}
+                >
+                    {maximized ? (
+                        <UnmaximizeIcon />
+                    ) : (
+                        <MaximizeIcon />
+                    )}
+                </button>
+                <button
+                className="px-4 py-3 hover:bg-destructive"
+                id="titlebar-close"
+                title="Close"
+                onClick={() => appWindow.hide()}
+                >
+                    <CloseIcon />
+                </button>
+            </div>
+        </div>
+    );
+}
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -1,55 +0,0 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
--- a/src/components/ui/aspect-ratio.tsx
+++ b/src/components/ui/aspect-ratio.tsx
@@ -1,4 +1,4 @@
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui"

 const AspectRatio = AspectRatioPrimitive.Root

--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { Avatar as AvatarPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -1,115 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
-    {...props}
-  />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
-
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
-
-  return (
-    <Comp
-      ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    />
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
-
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}
--- a/src/components/ui/button-group.tsx
+++ b/src/components/ui/button-group.tsx
@@ -1,83 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { Separator } from "@/components/ui/separator"
-
-const buttonGroupVariants = cva(
-  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-        vertical:
-          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
-  }
-)
-
-function ButtonGroup({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="button-group"
-      data-orientation={orientation}
-      className={cn(buttonGroupVariants({ orientation }), className)}
-      {...props}
-    />
-  )
-}
-
-function ButtonGroupText({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? Slot : "div"
-
-  return (
-    <Comp
-      className={cn(
-        "bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ButtonGroupSeparator({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="button-group-separator"
-      orientation={orientation}
-      className={cn(
-        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  ButtonGroup,
-  ButtonGroupSeparator,
-  ButtonGroupText,
-  buttonGroupVariants,
-}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
+import { Slot as SlotPrimitive } from "radix-ui"
 import { cva, type VariantProps } from "class-variance-authority"

 import { cn } from "@/lib/utils"
@@ -44,7 +44,7 @@ export interface ButtonProps

 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? SlotPrimitive.Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -1,213 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
-}) {
-  const defaultClassNames = getDefaultClassNames()
-
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months
-        ),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          "bg-popover absolute inset-0 opacity-0",
-          defaultClassNames.dropdown
-        ),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
-          defaultClassNames.weekday
-        ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn(
-          "w-[--cell-size] select-none",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-muted-foreground select-none text-[0.8rem]",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "bg-accent rounded-l-md",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
-          }
-
-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            )
-          }
-
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-[--cell-size] items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          )
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  )
-}
-
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
-
-  const ref = React.useRef<HTMLButtonElement>(null)
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Calendar, CalendarDayButton }
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -1,260 +0,0 @@
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
-
-  return context
-}
-
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return
-      }
-
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
-        }
-      },
-      [scrollPrev, scrollNext]
-    )
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return
-      }
-
-      setApi(api)
-    }, [api, setApi])
-
-    React.useEffect(() => {
-      if (!api) {
-        return
-      }
-
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
-
-      return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    )
-  }
-)
-Carousel.displayName = "Carousel"
-
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
-
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
-
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -1,382 +0,0 @@
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-import type { LegendPayload } from "recharts/types/component/DefaultLegendContent"
-import {
-  NameType,
-  Payload,
-  ValueType,
-} from "recharts/types/component/DefaultTooltipContent"
-import type { Props as LegendProps } from "recharts/types/component/Legend"
-import { TooltipContentProps } from "recharts/types/component/Tooltip"
-
-import { cn } from "@/lib/utils"
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
-
-type ChartContextProps = {
-  config: ChartConfig
-}
-
-export type CustomTooltipProps = TooltipContentProps<ValueType, NameType> & {
-  className?: string
-  hideLabel?: boolean
-  hideIndicator?: boolean
-  indicator?: "line" | "dot" | "dashed"
-  nameKey?: string
-  labelKey?: string
-  labelFormatter?: (
-    label: TooltipContentProps<number, string>["label"],
-    payload: TooltipContentProps<number, string>["payload"]
-  ) => React.ReactNode
-  formatter?: (
-    value: number | string,
-    name: string,
-    item: Payload<number | string, string>,
-    index: number,
-    payload: ReadonlyArray<Payload<number | string, string>>
-  ) => React.ReactNode
-  labelClassName?: string
-  color?: string
-}
-
-export type ChartLegendContentProps = {
-  className?: string
-  hideIcon?: boolean
-  verticalAlign?: LegendProps["verticalAlign"]
-  payload?: LegendPayload[]
-  nameKey?: string
-}
-
-const ChartContext = React.createContext<ChartContextProps | null>(null)
-
-function useChart() {
-  const context = React.useContext(ChartContext)
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
-
-  return context
-}
-
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  ...props
-}: React.ComponentProps<"div"> & {
-  config: ChartConfig
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
-}) {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-slot="chart"
-        data-chart={chartId}
-        className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
-}
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color
-  )
-
-  if (!colorConfig.length) {
-    return null
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-            ${prefix} [data-chart=${id}] {
-            ${colorConfig
-              .map(([key, itemConfig]) => {
-                const color =
-                  itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-                  itemConfig.color
-                return color ? `  --color-${key}: ${color};` : null
-              })
-              .join("\n")}
-            }
-            `
-          )
-          .join("\n"),
-      }}
-    />
-  )
-}
-
-const ChartTooltip = RechartsPrimitive.Tooltip
-
-function ChartTooltipContent({
-  active,
-  payload,
-  label,
-  className,
-  indicator = "dot",
-  hideLabel = false,
-  hideIndicator = false,
-  labelFormatter,
-  formatter,
-  labelClassName,
-  color,
-  nameKey,
-  labelKey,
-}: CustomTooltipProps) {
-  const { config } = useChart()
-
-  const tooltipLabel = React.useMemo(() => {
-    if (hideLabel || !payload?.length) {
-      return null
-    }
-
-    const [item] = payload
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
-    const value = (() => {
-      const v =
-        !labelKey && typeof label === "string"
-          ? config[label as keyof typeof config]?.label ?? label
-          : itemConfig?.label
-
-      return typeof v === "string" || typeof v === "number" ? v : undefined
-    })()
-
-    if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      )
-    }
-
-    if (!value) {
-      return null
-    }
-
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
-
-  if (!active || !payload?.length) {
-    return null
-  }
-
-  const nestLabel = payload.length === 1 && indicator !== "dot"
-
-  return (
-    <div
-      className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-        className
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload.map((item, index) => {
-          const key = `${nameKey || item.name || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-          const indicatorColor = color || item.payload.fill || item.color
-
-          return (
-            <div
-              key={item.dataKey}
-              className={cn(
-                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                indicator === "dot" && "items-center"
-              )}
-            >
-              {formatter && item?.value !== undefined && item.name ? (
-                formatter(item.value, item.name, item, index, item.payload)
-              ) : (
-                <>
-                  {itemConfig?.icon ? (
-                    <itemConfig.icon />
-                  ) : (
-                    !hideIndicator && (
-                      <div
-                        className={cn(
-                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                          {
-                            "h-2.5 w-2.5": indicator === "dot",
-                            "w-1": indicator === "line",
-                            "w-0 border-[1.5px] border-dashed bg-transparent":
-                              indicator === "dashed",
-                            "my-0.5": nestLabel && indicator === "dashed",
-                          }
-                        )}
-                        style={
-                          {
-                            "--color-bg": indicatorColor,
-                            "--color-border": indicatorColor,
-                          } as React.CSSProperties
-                        }
-                      />
-                    )
-                  )}
-                  <div
-                    className={cn(
-                      "flex flex-1 justify-between leading-none",
-                      nestLabel ? "items-end" : "items-center"
-                    )}
-                  >
-                    <div className="grid gap-1.5">
-                      {nestLabel ? tooltipLabel : null}
-                      <span className="text-muted-foreground">
-                        {itemConfig?.label || item.name}
-                      </span>
-                    </div>
-                    {item.value && (
-                      <span className="text-foreground font-mono font-medium tabular-nums">
-                        {item.value.toLocaleString()}
-                      </span>
-                    )}
-                  </div>
-                </>
-              )}
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-const ChartLegend = RechartsPrimitive.Legend
-
-function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = "bottom",
-  nameKey,
-}: ChartLegendContentProps) {
-  const { config } = useChart()
-
-  if (!payload?.length) {
-    return null
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
-      )}
-    >
-      {payload.map((item) => {
-        const key = `${nameKey || item.dataKey || "value"}`
-        const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-        return (
-          <div
-            key={item.value}
-            className={cn(
-              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
-            )}
-          >
-            {itemConfig?.icon && !hideIcon ? (
-              <itemConfig.icon />
-            ) : (
-              <div
-                className="h-2 w-2 shrink-0 rounded-[2px]"
-                style={{
-                  backgroundColor: item.color,
-                }}
-              />
-            )}
-            {itemConfig?.label}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
-
-  let configLabelKey: string = key
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
 import { CheckIcon } from "lucide-react"

 import { cn } from "@/lib/utils"
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -1,11 +0,0 @@
-"use client"
-
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-
-const Collapsible = CollapsiblePrimitive.Root
-
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
-
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -1,153 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -1,198 +0,0 @@
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const ContextMenu = ContextMenuPrimitive.Root
-
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
-
-const ContextMenuGroup = ContextMenuPrimitive.Group
-
-const ContextMenuPortal = ContextMenuPrimitive.Portal
-
-const ContextMenuSub = ContextMenuPrimitive.Sub
-
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
-
-const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
-))
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
-
-const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
-
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
-        className
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-))
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
-
-const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
-
-const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-))
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
-
-const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-4 w-4 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
-
-const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
-
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
-
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-}
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Dialog as DialogPrimitive } from "radix-ui"
 import { X } from "lucide-react"

 import { cn } from "@/lib/utils"
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -1,116 +0,0 @@
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
-
-import { cn } from "@/lib/utils"
-
-const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
-)
-Drawer.displayName = "Drawer"
-
-const DrawerTrigger = DrawerPrimitive.Trigger
-
-const DrawerPortal = DrawerPrimitive.Portal
-
-const DrawerClose = DrawerPrimitive.Close
-
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-  />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
-
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
-      )}
-      {...props}
-    >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-))
-DrawerContent.displayName = "DrawerContent"
-
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
-)
-DrawerHeader.displayName = "DrawerHeader"
-
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
-)
-DrawerFooter.displayName = "DrawerFooter"
-
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
-
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-}
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,201 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}
--- a/src/components/ui/field.tsx
+++ b/src/components/ui/field.tsx
@@ -1,244 +0,0 @@
-"use client"
-
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
-
-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
-  return (
-    <fieldset
-      data-slot="field-set"
-      className={cn(
-        "flex flex-col gap-6",
-        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldLegend({
-  className,
-  variant = "legend",
-  ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
-  return (
-    <legend
-      data-slot="field-legend"
-      data-variant={variant}
-      className={cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-group"
-      className={cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const fieldVariants = cva(
-  "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
-  {
-    variants: {
-      orientation: {
-        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
-        horizontal: [
-          "flex-row items-center",
-          "[&>[data-slot=field-label]]:flex-auto",
-          "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
-        ],
-        responsive: [
-          "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
-          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
-      },
-    },
-    defaultVariants: {
-      orientation: "vertical",
-    },
-  }
-)
-
-function Field({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="field"
-      data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
-      {...props}
-    />
-  )
-}
-
-function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-content"
-      className={cn(
-        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof Label>) {
-  return (
-    <Label
-      data-slot="field-label"
-      className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4",
-        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-label"
-      className={cn(
-        "flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="field-description"
-      className={cn(
-        "text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
-        "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  children?: React.ReactNode
-}) {
-  return (
-    <div
-      data-slot="field-separator"
-      data-content={!!children}
-      className={cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
-      )}
-      {...props}
-    >
-      <Separator className="absolute inset-0 top-1/2" />
-      {children && (
-        <span
-          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
-          data-slot="field-separator-content"
-        >
-          {children}
-        </span>
-      )}
-    </div>
-  )
-}
-
-function FieldError({
-  className,
-  children,
-  errors,
-  ...props
-}: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>
-}) {
-  const content = useMemo(() => {
-    if (children) {
-      return children
-    }
-
-    if (!errors) {
-      return null
-    }
-
-    if (errors?.length === 1 && errors[0]?.message) {
-      return errors[0].message
-    }
-
-    return (
-      <ul className="ml-4 flex list-disc flex-col gap-1">
-        {errors.map(
-          (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
-        )}
-      </ul>
-    )
-  }, [children, errors])
-
-  if (!content) {
-    return null
-  }
-
-  return (
-    <div
-      role="alert"
-      data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
-      {...props}
-    >
-      {content}
-    </div>
-  )
-}
-
-export {
-  Field,
-  FieldLabel,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldContent,
-  FieldTitle,
-}
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui"
+
 import {
  Controller,
  FormProvider,
@@ -102,13 +102,13 @@ const FormLabel = React.forwardRef<
 FormLabel.displayName = "FormLabel"

 const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
+  React.ElementRef<typeof SlotPrimitive.Slot>,
+  React.ComponentPropsWithoutRef<typeof SlotPrimitive.Slot>
 >(({ ...props }, ref) => {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

  return (
-    <Slot
+    <SlotPrimitive.Slot
      ref={ref}
      id={formItemId}
      aria-describedby={
--- a/src/components/ui/hover-card.tsx
+++ b/src/components/ui/hover-card.tsx
@@ -1,27 +0,0 @@
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
-
-import { cn } from "@/lib/utils"
-
-const HoverCard = HoverCardPrimitive.Root
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
-      className
-    )}
-    {...props}
-  />
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
-
-export { HoverCard, HoverCardTrigger, HoverCardContent }
--- a/src/components/ui/input-group.tsx
+++ b/src/components/ui/input-group.tsx
@@ -1,168 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-
-function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-group"
-      role="group"
-      className={cn(
-        "group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]",
-        "h-9 has-[>textarea]:h-auto",
-
-        // Variants based on alignment.
-        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
-        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
-        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-
-        // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
-
-        // Error state.
-        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
-
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      align: {
-        "inline-start":
-          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end":
-          "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
-        "block-start":
-          "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
-        "block-end":
-          "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5",
-      },
-    },
-    defaultVariants: {
-      align: "inline-start",
-    },
-  }
-)
-
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="input-group-addon"
-      data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest("button")) {
-          return
-        }
-        e.currentTarget.parentElement?.querySelector("input")?.focus()
-      }}
-      {...props}
-    />
-  )
-}
-
-const inputGroupButtonVariants = cva(
-  "flex items-center gap-2 text-sm shadow-none",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
-        "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-      },
-    },
-    defaultVariants: {
-      size: "xs",
-    },
-  }
-)
-
-function InputGroupButton({
-  className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, "size"> &
-  VariantProps<typeof inputGroupButtonVariants>) {
-  return (
-    <Button
-      type={type}
-      data-size={size}
-      variant={variant}
-      className={cn(inputGroupButtonVariants({ size }), className)}
-      {...props}
-    />
-  )
-}
-
-function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
-  return (
-    <Input
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function InputGroupTextarea({
-  className,
-  ...props
-}: React.ComponentProps<"textarea">) {
-  return (
-    <Textarea
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
-}
--- a/src/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@@ -1,69 +0,0 @@
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { Minus } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-  <OTPInput
-    ref={ref}
-    containerClassName={cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
-      containerClassName
-    )}
-    className={cn("disabled:cursor-not-allowed", className)}
-    {...props}
-  />
-))
-InputOTP.displayName = "InputOTP"
-
-const InputOTPGroup = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
-))
-InputOTPGroup.displayName = "InputOTPGroup"
-
-const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-1 ring-ring",
-        className
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
-        </div>
-      )}
-    </div>
-  )
-})
-InputOTPSlot.displayName = "InputOTPSlot"
-
-const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <Minus />
-  </div>
-))
-InputOTPSeparator.displayName = "InputOTPSeparator"
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
--- a/src/components/ui/item.tsx
+++ b/src/components/ui/item.tsx
@@ -1,193 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { Separator } from "@/components/ui/separator"
-
-function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      role="list"
-      data-slot="item-group"
-      className={cn("group/item-group flex flex-col", className)}
-      {...props}
-    />
-  )
-}
-
-function ItemSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="item-separator"
-      orientation="horizontal"
-      className={cn("my-0", className)}
-      {...props}
-    />
-  )
-}
-
-const itemVariants = cva(
-  "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border-border",
-        muted: "bg-muted/50",
-      },
-      size: {
-        default: "gap-4 p-4 ",
-        sm: "gap-2.5 px-4 py-3",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Item({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> &
-  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div"
-  return (
-    <Comp
-      data-slot="item"
-      data-variant={variant}
-      data-size={size}
-      className={cn(itemVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-const itemMediaVariants = cva(
-  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
-        image:
-          "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function ItemMedia({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
-  return (
-    <div
-      data-slot="item-media"
-      data-variant={variant}
-      className={cn(itemMediaVariants({ variant, className }))}
-      {...props}
-    />
-  )
-}
-
-function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-content"
-      className={cn(
-        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-title"
-      className={cn(
-        "flex w-fit items-center gap-2 text-sm font-medium leading-snug",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="item-description"
-      className={cn(
-        "text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-actions"
-      className={cn("flex items-center gap-2", className)}
-      {...props}
-    />
-  )
-}
-
-function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-header"
-      className={cn(
-        "flex basis-full items-center justify-between gap-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-footer"
-      className={cn(
-        "flex basis-full items-center justify-between gap-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Item,
-  ItemMedia,
-  ItemContent,
-  ItemActions,
-  ItemGroup,
-  ItemSeparator,
-  ItemTitle,
-  ItemDescription,
-  ItemHeader,
-  ItemFooter,
-}
--- a/src/components/ui/kbd.tsx
+++ b/src/components/ui/kbd.tsx
@@ -1,28 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
-  return (
-    <kbd
-      data-slot="kbd"
-      className={cn(
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
-        "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <kbd
-      data-slot="kbd-group"
-      className={cn("inline-flex items-center gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-export { Kbd, KbdGroup }
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import { Label as LabelPrimitive } from "radix-ui"
 import { cva, type VariantProps } from "class-variance-authority"

 import { cn } from "@/lib/utils"
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -1,254 +0,0 @@
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function MenubarMenu({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu {...props} />
-}
-
-function MenubarGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group {...props} />
-}
-
-function MenubarPortal({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal {...props} />
-}
-
-function MenubarRadioGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return <MenubarPrimitive.RadioGroup {...props} />
-}
-
-function MenubarSub({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
-}
-
-const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
-Menubar.displayName = MenubarPrimitive.Root.displayName
-
-const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
-
-const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
-))
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
-
-const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
-
-const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  )
-)
-MenubarContent.displayName = MenubarPrimitive.Content.displayName
-
-const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarItem.displayName = MenubarPrimitive.Item.displayName
-
-const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.CheckboxItem>
-))
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
-
-const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Circle className="h-4 w-4 fill-current" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.RadioItem>
-))
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
-
-const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName
-
-const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
-
-const MenubarShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-MenubarShortcut.displayname = "MenubarShortcut"
-
-export {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarPortal,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
-}
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -1,128 +0,0 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
-
-const NavigationMenuItem = NavigationMenuPrimitive.Item
-
-const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
-)
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
-    {...props}
-  >
-    {children}{" "}
-    <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-))
-NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className
-    )}
-    {...props}
-  >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuPrimitive.Indicator>
-))
-NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName
-
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-}
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,31 +0,0 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-const Popover = PopoverPrimitive.Root
-
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverAnchor = PopoverPrimitive.Anchor
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import { Progress as ProgressPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
 import { CircleIcon } from "lucide-react"

 import { cn } from "@/lib/utils"
--- a/src/components/ui/resizable.tsx
+++ b/src/components/ui/resizable.tsx
@@ -1,45 +1,50 @@
 "use client"

-import { GripVertical } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"

 import { cn } from "@/lib/utils"

-const ResizablePanelGroup = ({
+function ResizablePanelGroup({
  className,
  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
      className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
        className
      )}
      {...props}
    />
-)
+  )
+}

-const ResizablePanel = ResizablePrimitive.Panel
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}

-const ResizableHandle = ({
+function ResizableHandle({
  withHandle,
  className,
  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: ResizablePrimitive.SeparatorProps & {
  withHandle?: boolean
-}) => (
-  <ResizablePrimitive.PanelResizeHandle
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
      className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
        className
      )}
      {...props}
    >
      {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical className="h-2.5 w-2.5" />
-      </div>
+        <div className="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0" />
      )}
-  </ResizablePrimitive.PanelResizeHandle>
-)
+    </ResizablePrimitive.Separator>
+  )
+}

-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -1,46 +0,0 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-
-import { cn } from "@/lib/utils"
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
-
-export { ScrollArea, ScrollBar }
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
+import { Select as SelectPrimitive } from "radix-ui"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"

 import { cn } from "@/lib/utils"
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { Separator as SeparatorPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { Dialog as SheetPrimitive } from "radix-ui"
 import { cva, type VariantProps } from "class-variance-authority"
 import { X } from "lucide-react"

--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
+import { Slot as SlotPrimitive } from "radix-ui"
 import { cva, VariantProps } from "class-variance-authority"
 import { PanelLeftIcon } from "lucide-react"

@@ -414,7 +414,7 @@ function SidebarGroupLabel({
  asChild = false,
  ...props
 }: React.ComponentProps<"div"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div"
+  const Comp = asChild ? SlotPrimitive.Slot : "div"

  return (
    <Comp
@@ -435,7 +435,7 @@ function SidebarGroupAction({
  asChild = false,
  ...props
 }: React.ComponentProps<"button"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? SlotPrimitive.Slot : "button"

  return (
    <Comp
@@ -524,7 +524,7 @@ function SidebarMenuButton({
  isActive?: boolean
  tooltip?: string | React.ComponentProps<typeof TooltipContent>
 } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? SlotPrimitive.Slot : "button"
  const { isMobile, state } = useSidebar()

  const button = (
@@ -570,7 +570,7 @@ function SidebarMenuAction({
  asChild?: boolean
  showOnHover?: boolean
 }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? SlotPrimitive.Slot : "button"

  return (
    <Comp
@@ -693,7 +693,7 @@ function SidebarMenuSubButton({
  size?: "sm" | "md"
  isActive?: boolean
 }) {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? SlotPrimitive.Slot : "a"

  return (
    <Comp
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import { Slider as SliderPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import { Switch as SwitchPrimitives } from "radix-ui"

 import { cn } from "@/lib/utils"

--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,120 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
-Table.displayName = "Table"
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
-
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
-
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableFooter.displayName = "TableFooter"
-
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = "TableHead"
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
-    )}
-    {...props}
-  />
-))
-TableCell.displayName = "TableCell"
-
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { Tabs as TabsPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -1,127 +0,0 @@
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-}
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -1,33 +0,0 @@
-import { useToast } from "@/hooks/use-toast"
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast"
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}
--- a/src/components/ui/toggle-group.tsx
+++ b/src/components/ui/toggle-group.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
 import { type VariantProps } from "class-variance-authority"

 import { cn } from "@/lib/utils"
--- a/src/components/ui/toggle.tsx
+++ b/src/components/ui/toggle.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { Toggle as TogglePrimitive } from "radix-ui"
 import { cva, type VariantProps } from "class-variance-authority"

 import { cn } from "@/lib/utils"
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { Tooltip as TooltipPrimitive } from "radix-ui"

 import { cn } from "@/lib/utils"

--- a/src/helpers/use-downloader.ts
+++ b/src/helpers/use-downloader.ts
@@ -61,8 +61,19 @@ export default function useDownloader() {
        log_verbose: LOG_VERBOSE,
        log_progress: LOG_PROGRESS,
        enable_notifications: ENABLE_NOTIFICATIONS,
-        download_completion_notification: DOWNLOAD_COMPLETION_NOTIFICATION
+        download_completion_notification: DOWNLOAD_COMPLETION_NOTIFICATION,
+        use_delay: USE_DELAY,
+        use_search_delay: USE_SEARCH_DELAY,
+        delay_mode: DELAY_MODE,
+        min_sleep_interval: MIN_SLEEP_INTERVAL,
+        max_sleep_interval: MAX_SLEEP_INTERVAL,
+        request_sleep_interval: REQUEST_SLEEP_INTERVAL,
+        delay_playlist_only: DELAY_PLAYLIST_ONLY,
+        use_potoken: USE_POTOKEN,
+        disable_innertube: DISABLE_INNERTUBE,
+        pot_server_port: POT_SERVER_PORT,
    } = useSettingsPageStatesStore(state => state.settings);
+    const isRunningPotServer = useSettingsPageStatesStore(state => state.isRunningPotServer);

    const expectedErrorDownloadIds = useDownloaderPageStatesStore((state) => state.expectedErrorDownloadIds);
    const addErroredDownload = useDownloaderPageStatesStore((state) => state.addErroredDownload);
@@ -103,7 +114,12 @@ export default function useDownloader() {
    const fetchVideoMetadata = async (params: FetchVideoMetadataParams): Promise<RawVideoInfo | null> => {
        const { url, formatId, playlistIndices, selectedSubtitles, resumeState, downloadConfig } = params;
        try {
-            const args = [url, '--dump-single-json', '--no-warnings'];
+            const args = [url, '--dump-single-json'];
+            if (DEBUG_MODE && LOG_VERBOSE) {
+                args.push('--verbose');
+            } else {
+                args.push('--no-warnings');
+            }
            if (formatId) {
                const isMultipleAudioFormatSelected = formatId.split('+').length > 2;
                args.push('--format', formatId);
@@ -162,21 +178,49 @@ export default function useDownloader() {
                    args.push('--sponsorblock-mark', sponsorblockMark);
                }
            };
+            if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_SEARCH_DELAY) {
+                if (DELAY_MODE === 'auto') {
+                    args.push('--sleep-requests', '1', '--sleep-interval', '10', '--max-sleep-interval', '20');
+                } else if (DELAY_MODE === 'custom') {
+                    args.push('--sleep-requests', REQUEST_SLEEP_INTERVAL.toString(), '--sleep-interval', MIN_SLEEP_INTERVAL.toString(), '--max-sleep-interval', MAX_SLEEP_INTERVAL.toString());
+                }
+            }
+            if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_POTOKEN) {
+                if (!isRunningPotServer) {
+                    LOG.warning("NEODLP", "Looks like you want to use PO Token! But, NeoDLP POT Server is not running. PO Token generation will most likely fail!");
+                }
+                if (DISABLE_INNERTUBE) {
+                    args.push('--extractor-args', `youtubepot-bgutilhttp:base_url=http://localhost:${POT_SERVER_PORT};disable_innertube=1`);
+                } else {
+                    args.push('--extractor-args', `youtubepot-bgutilhttp:base_url=http://localhost:${POT_SERVER_PORT}`);
+                }
+            }
+
            const command = Command.sidecar('binaries/yt-dlp', args);

            let jsonOutput = '';

            return new Promise<RawVideoInfo | null>((resolve) => {
                command.stdout.on('data', line => {
-                    jsonOutput += line;
+                    if (line.startsWith('{')) {
+                        jsonOutput = line;
+                    } else {
+                        if (line.trim() !== '') LOG.info('YT-DLP', line);
+                    }
+                });
+
+                command.stderr.on('data', line => {
+                    if (line.trim() !== '') LOG.info('YT-DLP', line);
                });

                command.on('close', async (data) => {
                    if (data.code !== 0) {
-                        console.error(`yt-dlp failed to fetch metadata with code ${data.code}`);
+                        console.error(`yt-dlp exited with code ${data.code} while fetching metadata for URL: ${url}`);
                        LOG.error('NEODLP', `yt-dlp exited with code ${data.code} while fetching metadata for URL: ${url} (ignore if you manually cancelled)`);
-                        resolve(null);
                    } else {
+                        LOG.info('NEODLP', `yt-dlp exited with code ${data.code} while fetching metadata for URL: ${url}`);
+                    }
+
                    try {
                        const matchedJson = jsonOutput.match(/{.*}/);
                        if (!matchedJson) {
@@ -193,7 +237,6 @@ export default function useDownloader() {
                        LOG.error('NEODLP', `Failed to parse metadata JSON for URL: ${url}) with error: ${e}`);
                        resolve(null);
                    }
-                    }
                });

                command.on('error', error => {
@@ -305,14 +348,41 @@ export default function useDownloader() {
            args.push('--output', `${FILENAME_TEMPLATE}[${downloadId}].%(ext)s`);
        }

+        if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_DELAY) {
+            if (!DELAY_PLAYLIST_ONLY) {
+                if (DELAY_MODE === 'auto') {
                    if (isMultiplePlaylistItems) {
                        const playlistLength = playlistIndices.split(',').length;
-            if (playlistLength > 5 && playlistLength < 100) {
-                args.push('--sleep-requests', '1', '--sleep-interval', '5', '--max-sleep-interval', '15');
+                        if (playlistLength <= 5) {
+                            args.push('--sleep-requests', '1', '--sleep-interval', '5', '--max-sleep-interval', '10');
+                        } else if (playlistLength > 5 && playlistLength < 100) {
+                            args.push('--sleep-requests', '1', '--sleep-interval', '10', '--max-sleep-interval', '20');
                        } else if (playlistLength >= 100 && playlistLength < 500) {
-                args.push('--sleep-requests', '1.5', '--sleep-interval', '10', '--max-sleep-interval', '40');
+                            args.push('--sleep-requests', '2', '--sleep-interval', '20', '--max-sleep-interval', '40');
                        } else if (playlistLength >= 500) {
-                args.push('--sleep-requests', '2.5', '--sleep-interval', '20', '--max-sleep-interval', '60');
+                            args.push('--sleep-requests', '2', '--sleep-interval', '40', '--max-sleep-interval', '60');
+                        }
+                    } else {
+                        args.push('--sleep-requests', '1', '--sleep-interval', '10', '--max-sleep-interval', '20');
+                    }
+                } else if (DELAY_MODE === 'custom') {
+                    args.push('--sleep-requests', REQUEST_SLEEP_INTERVAL.toString(), '--sleep-interval', MIN_SLEEP_INTERVAL.toString(), '--max-sleep-interval', MAX_SLEEP_INTERVAL.toString());
+                }
+            } else if (DELAY_PLAYLIST_ONLY && isMultiplePlaylistItems) {
+                if (DELAY_MODE === 'auto') {
+                    const playlistLength = playlistIndices.split(',').length;
+                    if (playlistLength <= 5) {
+                        args.push('--sleep-requests', '1', '--sleep-interval', '5', '--max-sleep-interval', '10');
+                    } else if (playlistLength > 5 && playlistLength < 100) {
+                        args.push('--sleep-requests', '1', '--sleep-interval', '10', '--max-sleep-interval', '20');
+                    } else if (playlistLength >= 100 && playlistLength < 500) {
+                        args.push('--sleep-requests', '2', '--sleep-interval', '20', '--max-sleep-interval', '40');
+                    } else if (playlistLength >= 500) {
+                        args.push('--sleep-requests', '2', '--sleep-interval', '40', '--max-sleep-interval', '60');
+                    }
+                } else if (DELAY_MODE === 'custom') {
+                    args.push('--sleep-requests', REQUEST_SLEEP_INTERVAL.toString(), '--sleep-interval', MIN_SLEEP_INTERVAL.toString(), '--max-sleep-interval', MAX_SLEEP_INTERVAL.toString());
+                }
            }
        }

@@ -469,6 +539,17 @@ export default function useDownloader() {
            LOG.warning('NEODLP', `Looks like you are using aria2 for this yt-dlp download: ${downloadId}. Make sure aria2 is installed on your system if you are on macOS for this to work. Also, pause/resume might not work as expected especially on windows (using aria2 is not recommended for most downloads).`);
        }

+        if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_POTOKEN) {
+            if (!isRunningPotServer) {
+                LOG.warning("NEODLP", "Looks like you want to use PO Token! But, NeoDLP POT Server is not running. PO Token generation will most likely fail!");
+            }
+            if (DISABLE_INNERTUBE) {
+                args.push('--extractor-args', `youtubepot-bgutilhttp:base_url=http://localhost:${POT_SERVER_PORT};disable_innertube=1`);
+            } else {
+                args.push('--extractor-args', `youtubepot-bgutilhttp:base_url=http://localhost:${POT_SERVER_PORT}`);
+            }
+        }
+
        if (resumeState || (!USE_CUSTOM_COMMANDS && USE_ARIA2)) {
            args.push('--continue');
        } else {
@@ -658,6 +739,10 @@ export default function useDownloader() {
            }
        });

+        command.stderr.on('data', line => {
+            if (line.trim() !== '') LOG.info(`YT-DLP Download ${downloadId}`, line);
+        });
+
        try {
            videoInfoSaver.mutate({
                video_id: videoId,
--- a/src/helpers/use-linux-registerer.ts
+++ b/src/helpers/use-linux-registerer.ts
@@ -0,0 +1,113 @@
+import { join, resourceDir, homeDir } from "@tauri-apps/api/path";
+import * as fs from "@tauri-apps/plugin-fs";
+import { useKvPairs } from "@/helpers/use-kvpairs";
+import { useSettingsPageStatesStore } from "@/services/store";
+import { invoke } from "@tauri-apps/api/core";
+import { useLogger } from "@/helpers/use-logger";
+import { Command } from "@tauri-apps/plugin-shell";
+
+interface FileMap {
+    source: string;
+    destination: string;
+    dir: string;
+    content?: string;
+}
+
+export function useLinuxRegisterer() {
+    const { saveKvPair } = useKvPairs();
+    const appVersion = useSettingsPageStatesStore(state => state.appVersion);
+    const LOG = useLogger();
+
+    const registerToLinux = async () => {
+        try {
+            const isFlatpak = await invoke<boolean>('is_flatpak');
+            const resourceDirPath = isFlatpak ? '/app/lib/neodlp' : await resourceDir();
+            const homeDirPath = await homeDir();
+            const flatpakChromeManifestContent = {
+                name: "com.neosubhamoy.neodlp",
+                description: "NeoDLP MsgHost",
+                path: `${homeDirPath}/.local/bin/neodlp-msghost`,
+                type: "stdio",
+                allowed_origins: ["chrome-extension://mehopeailfjmiloiiohgicphlcgpompf/"]
+            };
+            const flatpakFirefoxManifestContent = {
+                name: "com.neosubhamoy.neodlp",
+                description: "NeoDLP MsgHost",
+                path: `${homeDirPath}/.local/bin/neodlp-msghost`,
+                type: "stdio",
+                allowed_extension: ["neodlp@neosubhamoy.com"]
+            };
+
+            const filesToCopy: FileMap[] = [
+                { source: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil.py', destination: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil.py', dir: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/' },
+                { source: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil_cli.py', destination: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil_cli.py', dir: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/' },
+                { source: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil_http.py', destination: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil_http.py', dir: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/' },
+            ];
+
+            const filesToCopyFlatpak: FileMap[] = [
+                { source: 'chrome.json', destination: '.config/google-chrome/NativeMessagingHosts/com.neosubhamoy.neodlp.json', dir: '.config/google-chrome/NativeMessagingHosts/', content: JSON.stringify(flatpakChromeManifestContent, null, 2) },
+                { source: 'chrome.json', destination: '.config/chromium/NativeMessagingHosts/com.neosubhamoy.neodlp.json', dir: '.config/chromium/NativeMessagingHosts/', content: JSON.stringify(flatpakChromeManifestContent, null, 2) },
+                { source: 'firefox.json', destination: '.mozilla/native-messaging-hosts/com.neosubhamoy.neodlp.json', dir: '.mozilla/native-messaging-hosts/', content: JSON.stringify(flatpakFirefoxManifestContent, null, 2) },
+            ];
+
+            LOG.info("LINUX REGISTERER", `Is Flatpak: ${isFlatpak}, Resource dir: ${resourceDirPath}, Home dir: ${homeDirPath}`);
+
+            if (isFlatpak) {
+                for (const file of filesToCopyFlatpak) {
+                    const sourcePath = await join(resourceDirPath, file.source);
+                    const destinationPath = await join(homeDirPath, file.destination);
+                    const copyCommand = Command.create('cp', [sourcePath, destinationPath]);
+
+                    const copyOutput = await copyCommand.execute();
+                    if (copyOutput.code === 0) {
+                        console.log(`File ${file.source} copied successfully to ${destinationPath}`);
+                        LOG.info("LINUX REGISTERER", `File ${file.source} copied successfully to ${destinationPath}`);
+                        if (file.content) {
+                            LOG.info("LINUX REGISTERER", `Writing content to ${destinationPath}: ${file.content}`);
+                            const writeCommand = Command.create('echo', [file.content, '>', destinationPath]);
+                            const writeOutput = await writeCommand.execute();
+                            if (writeOutput.code === 0) {
+                                console.log(`Content written successfully to ${destinationPath}`);
+                                LOG.info("LINUX REGISTERER", `Content written successfully to ${destinationPath}`);
+                            } else {
+                                console.error(`Failed to write content to ${destinationPath}:`, writeOutput.stderr);
+                                LOG.error("LINUX REGISTERER", `Failed to write content to ${destinationPath}: ${writeOutput.stderr}`);
+                            }
+                        }
+                    } else {
+                        console.error(`Failed to copy file ${file.source} to ${destinationPath}:`, copyOutput.stderr);
+                        LOG.error("LINUX REGISTERER", `Failed to copy file ${file.source} to ${destinationPath}: ${copyOutput.stderr}`);
+                    }
+                }
+            } else {
+                for (const file of filesToCopy) {
+                    const sourcePath = await join(resourceDirPath, file.source);
+                    const destinationDir = await join(homeDirPath, file.dir);
+                    const destinationPath = await join(homeDirPath, file.destination);
+
+                    const dirExists = await fs.exists(destinationDir);
+                    if (dirExists) {
+                        await fs.copyFile(sourcePath, destinationPath);
+                        console.log(`File ${file.source} copied successfully to ${destinationPath}`);
+                        LOG.info("LINUX REGISTERER", `File ${file.source} copied successfully to ${destinationPath}`);
+                    } else {
+                        await fs.mkdir(destinationDir, { recursive: true })
+                        console.log(`Created dir ${destinationDir}`);
+                        LOG.info("LINUX REGISTERER", `Created dir ${destinationDir}`);
+                        await fs.copyFile(sourcePath, destinationPath);
+                        console.log(`File ${file.source} copied successfully to ${destinationPath}`);
+                        LOG.info("LINUX REGISTERER", `File ${file.source} copied successfully to ${destinationPath}`);
+                    }
+                }
+            }
+            saveKvPair('linux_registered_version', appVersion);
+            return { success: true, message: 'Registered successfully' }
+        } catch (error) {
+            console.error('Error copying files:', error);
+            LOG.error("LINUX REGISTERER", `Error copying files: ${error}`);
+            return { success: false, message: 'Failed to register' }
+        }
+    }
+
+    return { registerToLinux };
+}
--- a/src/helpers/use-logger.ts
+++ b/src/helpers/use-logger.ts
@@ -1,4 +1,5 @@
 import { useLogsStore } from "@/services/store";
+import { warn, debug, info, error } from "@tauri-apps/plugin-log";

 export function useLogger() {
    const logs = useLogsStore((state) => state.logs);
@@ -8,18 +9,23 @@ export function useLogger() {
    const logger = {
        info: (context: string, message: string) => {
            addLog({ timestamp: Date.now(), level: 'info', context, message });
+            info(`${context}: ${message}`);
        },
        warning: (context: string, message: string) => {
            addLog({ timestamp: Date.now(), level: 'warning', context, message });
+            warn(`${context}: ${message}`);
        },
        error: (context: string, message: string) => {
            addLog({ timestamp: Date.now(), level: 'error', context, message });
+            error(`${context}: ${message}`);
        },
        debug: (context: string, message: string) => {
            addLog({ timestamp: Date.now(), level: 'debug', context, message });
+            debug(`${context}: ${message}`);
        },
        progress: (context: string, message: string) => {
            addLog({ timestamp: Date.now(), level: 'progress', context, message });
+            info(`${context}: ${message}`);
        },
        getLogs: () => logs,
        clearLogs,
--- a/src/helpers/use-macos-registerer.ts
+++ b/src/helpers/use-macos-registerer.ts
@@ -3,17 +3,26 @@ import * as fs from "@tauri-apps/plugin-fs";
 import { useKvPairs } from "@/helpers/use-kvpairs";
 import { useSettingsPageStatesStore } from "@/services/store";

+interface FileMap {
+    source: string;
+    destination: string;
+    dir: string;
+}
+
 export function useMacOsRegisterer() {
    const { saveKvPair } = useKvPairs();
    const appVersion = useSettingsPageStatesStore(state => state.appVersion);

    const registerToMac = async () => {
        try {
-            const filesToCopy = [
+            const filesToCopy: FileMap[] = [
                { source: 'neodlp-autostart.plist', destination: 'Library/LaunchAgents/com.neosubhamoy.neodlp.plist', dir: 'Library/LaunchAgents/' },
                { source: 'neodlp-msghost.json', destination: 'Library/Application Support/Google/Chrome/NativeMessagingHosts/com.neosubhamoy.neodlp.json', dir: 'Library/Application Support/Google/Chrome/NativeMessagingHosts/' },
                { source: 'neodlp-msghost.json', destination: 'Library/Application Support/Chromium/NativeMessagingHosts/com.neosubhamoy.neodlp.json', dir: 'Library/Application Support/Chromium/NativeMessagingHosts/' },
                { source: 'neodlp-msghost-moz.json', destination: 'Library/Application Support/Mozilla/NativeMessagingHosts/com.neosubhamoy.neodlp.json', dir: 'Library/Application Support/Mozilla/NativeMessagingHosts/' },
+                { source: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil.py', destination: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil.py', dir: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/' },
+                { source: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil_cli.py', destination: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil_cli.py', dir: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/' },
+                { source: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil_http.py', destination: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/getpot_bgutil_http.py', dir: 'yt-dlp-plugins/bgutil-ytdlp-pot-provider/yt_dlp_plugins/extractor/' },
            ];

            const resourceDirPath = await resourceDir();
--- a/src/helpers/use-pot-server.ts
+++ b/src/helpers/use-pot-server.ts
@@ -0,0 +1,86 @@
+import { useSettingsPageStatesStore } from "@/services/store";
+import { useLogger } from "@/helpers/use-logger";
+import { Command } from "@tauri-apps/plugin-shell";
+import { invoke } from "@tauri-apps/api/core";
+
+export default function usePotServer() {
+    const setIsRunningPotServer = useSettingsPageStatesStore(state => state.setIsRunningPotServer);
+    const setIsStartingPotServer = useSettingsPageStatesStore(state => state.setIsStartingPotServer);
+    const potServerPid = useSettingsPageStatesStore(state => state.potServerPid);
+    const setPotServerPid = useSettingsPageStatesStore(state => state.setPotServerPid);
+    const potServerPort = useSettingsPageStatesStore(state => state.settings.pot_server_port);
+    const LOG = useLogger();
+
+    const stripAnsiAndLogPrefix = (line: string): string => {
+        const stripped = line.replace(/\x1b\[\d+m/g, '');
+        return stripped.replace(/^\d{4}-\d{2}-\d{2}T[\d:.]+Z\s+\w+\s+[\w:]+:\s*/, '');
+    };
+
+    const startPotServer = async (port?: number) => {
+        const runCommand = Command.sidecar('binaries/neodlp-pot', [
+            'server',
+            '--port',
+            port ? port.toString() : potServerPort.toString(),
+        ]);
+
+        try {
+            setIsStartingPotServer(true);
+            LOG.info("NEODLP POT-SERVER", `Starting POT Server on port: ${port ?? potServerPort}`);
+
+            runCommand.on("close", (data) => {
+                if (data.code === 0) {
+                    LOG.info("NEODLP POT-SERVER", `POT Server process exited with code: ${data.code}`);
+                } else {
+                    LOG.error("NEODLP POT-SERVER", `POT Server process exited with code: ${data.code} (ignore if you manually stopped the server)`);
+                }
+                setIsRunningPotServer(false);
+                setPotServerPid(null);
+            });
+
+            runCommand.on("error", (error) => {
+                LOG.error("NEODLP POT-SERVER", `Error running POT Server: ${error}`);
+                setIsRunningPotServer(false);
+                setPotServerPid(null);
+            });
+
+            runCommand.stdout.on("data", (line) => {
+                const cleanedLine = stripAnsiAndLogPrefix(line).trim();
+                if (cleanedLine !== '') LOG.info("NEODLP POT-SERVER", cleanedLine);
+                if (cleanedLine.startsWith("POT server")) {
+                    setIsRunningPotServer(true);
+                }
+            });
+
+            runCommand.stderr.on("data", (line) => {
+                const cleanedLine = stripAnsiAndLogPrefix(line).trim();
+                if (cleanedLine !== '') LOG.error("NEODLP POT-SERVER", cleanedLine);
+            });
+
+            const child = await runCommand.spawn();
+            setPotServerPid(child.pid);
+        } catch (error) {
+            LOG.error("NEODLP POT-SERVER", `Error starting POT Server: ${error}`);
+        } finally {
+            setIsStartingPotServer(false);
+        }
+    }
+
+    const stopPotServer = async () => {
+        if (!potServerPid) {
+            LOG.warning("NEODLP POT-SERVER", "No POT Server process found to stop.");
+            return;
+        }
+
+        try {
+            LOG.info("NEODLP POT-SERVER", `Stopping POT Server with PID: ${potServerPid}`);
+            await invoke('kill_all_process', { pid: potServerPid });
+            LOG.info("NEODLP POT-SERVER", "POT Server stopped successfully.");
+            setIsRunningPotServer(false);
+            setPotServerPid(null);
+        } catch (error) {
+            LOG.error("NEODLP POT-SERVER", `Error stopping POT Server: ${error}`);
+        }
+    }
+
+    return { startPotServer, stopPotServer};
+}
--- a/src/helpers/use-ytdlp-updater.ts
+++ b/src/helpers/use-ytdlp-updater.ts
@@ -17,10 +17,11 @@ export function useYtDlpUpdater() {

    const updateYtDlp = async () => {
        const CURRENT_TIMESTAMP = Date.now();
+        const isFlatpak = await invoke<boolean>('is_flatpak');
        setIsUpdatingYtDlp(true);
        LOG.info('NEODLP', 'Updating yt-dlp to latest version');
        try {
-            const command = currentPlatform === 'linux' ? Command.create('pkexec', ['yt-dlp', '--update-to', ytDlpUpdateChannel]) : Command.sidecar('binaries/yt-dlp', ['--update-to', ytDlpUpdateChannel]);
+            const command = currentPlatform === 'linux' && !isFlatpak ? Command.create('pkexec', ['yt-dlp', '--update-to', ytDlpUpdateChannel]) : Command.sidecar('binaries/yt-dlp', ['--update-to', ytDlpUpdateChannel]);
            const output = await command.execute();
            if (output.code === 0) {
                console.log("yt-dlp updated successfully:", output.stdout);
--- a/src/hooks/use-toast.ts
+++ b/src/hooks/use-toast.ts
@@ -1,194 +0,0 @@
-"use client"
-
-// Inspired by react-hot-toast library
-import * as React from "react"
-
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
-
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      }
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, "id">
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
-}
-
-export { useToast, toast }
--- a/src/pages/layout/root.tsx
+++ b/src/pages/layout/root.tsx
@@ -7,10 +7,10 @@ import Footer from "@/components/footer";
 export default function RootLayout() {
    return (
        <>
-        <div className="flex min-h-screen">
+        <div className="flex flex-col min-h-screen">
            <SidebarProvider>
                <AppSidebar />
-            <div className="w-full h-screen overflow-y-scroll relative">
+                <div className="w-full h-screen overflow-y-scroll no-scrollbar relative">
                    <Navbar/>
                    <Outlet />
                    <Footer/>
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -9,6 +9,7 @@ import { useSettings } from "@/helpers/use-settings";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
 import { ExtensionSettings } from "@/components/pages/settings/extensionSettings";
 import { ApplicationSettings } from "@/components/pages/settings/applicationSettings";
+import usePotServer from "@/helpers/use-pot-server";

 export default function SettingsPage() {
    const { setTheme } = useTheme();
@@ -17,10 +18,12 @@ export default function SettingsPage() {
    const setActiveTab = useSettingsPageStatesStore(state => state.setActiveTab);

    const isUsingDefaultSettings = useSettingsPageStatesStore(state => state.isUsingDefaultSettings);
+    const isRunningPotServer = useSettingsPageStatesStore(state => state.isRunningPotServer);
    const appTheme = useSettingsPageStatesStore(state => state.settings.theme);
    const appColorScheme = useSettingsPageStatesStore(state => state.settings.color_scheme);

    const { resetSettings } = useSettings();
+    const { stopPotServer } = usePotServer();

    useEffect(() => {
        const updateTheme = async () => {
@@ -60,8 +63,11 @@ export default function SettingsPage() {
                            <AlertDialogFooter>
                                <AlertDialogCancel>Cancel</AlertDialogCancel>
                                <AlertDialogAction onClick={
-                                    () => {
-                                        resetSettings()
+                                    async () => {
+                                        resetSettings();
+                                        if (isRunningPotServer) {
+                                            await stopPotServer();
+                                        }
                                    }
                                }>Reset</AlertDialogAction>
                            </AlertDialogFooter>
--- a/src/services/store.ts
+++ b/src/services/store.ts
@@ -211,6 +211,16 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
        enable_notifications: false,
        update_notification: true,
        download_completion_notification: false,
+        use_delay: true,
+        use_search_delay: false,
+        delay_mode: 'auto',
+        min_sleep_interval: 10,
+        max_sleep_interval: 20,
+        request_sleep_interval: 1,
+        delay_playlist_only: true,
+        use_potoken: false,
+        disable_innertube: false,
+        pot_server_port: 4416,
        // extension settings
        websocket_port: 53511
    },
@@ -223,6 +233,10 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
    appUpdateDownloadProgress: 0,
    formResetTrigger: 0,
    resetAcknowledgements: 0,
+    isRunningPotServer: false,
+    isStartingPotServer: false,
+    isChangingPotServerPort: false,
+    potServerPid: null,
    setActiveTab: (tab) => set(() => ({ activeTab: tab })),
    setActiveSubAppTab: (tab) => set(() => ({ activeSubAppTab: tab })),
    setActiveSubExtTab: (tab) => set(() => ({ activeSubExtTab: tab })),
@@ -282,6 +296,16 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
            enable_notifications: false,
            update_notification: true,
            download_completion_notification: false,
+            use_delay: true,
+            use_search_delay: false,
+            delay_mode: 'auto',
+            min_sleep_interval: 10,
+            max_sleep_interval: 20,
+            request_sleep_interval: 1,
+            delay_playlist_only: true,
+            use_potoken: false,
+            disable_innertube: false,
+            pot_server_port: 4416,
            // extension settings
            websocket_port: 53511
        },
@@ -301,12 +325,17 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
    acknowledgeFormReset: () => set((state) => ({
        resetAcknowledgements: state.resetAcknowledgements + 1
    })),
+    setIsRunningPotServer: (isRunning) => set(() => ({ isRunningPotServer: isRunning })),
+    setIsStartingPotServer: (isStarting) => set(() => ({ isStartingPotServer: isStarting })),
+    setIsChangingPotServerPort: (isChanging) => set(() => ({ isChangingPotServerPort: isChanging })),
+    setPotServerPid: (pid) => set(() => ({ potServerPid: pid }))
 }));

 export const useKvPairsStatesStore = create<KvPairsStatesStore>((set) => ({
    kvPairs: {
        ytdlp_update_last_check: null,
-        macos_registered_version: null
+        macos_registered_version: null,
+        linux_registered_version: null
    },
    setKvPairsKey: (key, value) => set((state) => ({
        kvPairs: {
--- a/Show More
+++ b/Show More