diff --git a/apps/readest-app/src-tauri/Cargo.toml b/apps/readest-app/src-tauri/Cargo.toml
index 3e94e227..3ec9e747 100644
--- a/apps/readest-app/src-tauri/Cargo.toml
+++ b/apps/readest-app/src-tauri/Cargo.toml
@@ -22,7 +22,7 @@ serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 log = "0.4"
 # FIXME: remove the devtools feature in production
-tauri = { version = "2.0.2", features = ["protocol-asset", "devtools"] }
+tauri = { version = "2.0.2", features = [ "macos-private-api", "protocol-asset", "devtools"] }
 tauri-plugin-log = "2.0.1"
 tauri-plugin-fs = "2.0.1"
 tauri-plugin-dialog = "2.0.1"
diff --git a/apps/readest-app/src-tauri/tauri.conf.json b/apps/readest-app/src-tauri/tauri.conf.json
index e46653ad..d4aeb0d6 100644
--- a/apps/readest-app/src-tauri/tauri.conf.json
+++ b/apps/readest-app/src-tauri/tauri.conf.json
@@ -10,7 +10,7 @@
     "beforeBuildCommand": "pnpm build"
   },
   "app": {
-    "withGlobalTauri": true,
+    "macOSPrivateApi": true,
     "windows": [
       {
         "title": "Readest",
@@ -19,7 +19,9 @@
         "resizable": true,
         "fullscreen": false,
         "maximized": true,
-        "decorations": false
+        "decorations": false,
+        "transparent": true,
+        "shadow": false
       }
     ],
     "security": {
diff --git a/apps/readest-app/src/app/globals.css b/apps/readest-app/src/app/globals.css
index 524e66eb..e21948fd 100644
--- a/apps/readest-app/src/app/globals.css
+++ b/apps/readest-app/src/app/globals.css
@@ -5,12 +5,14 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  border-radius: 10px;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
+    border-radius: 10px;
   }
 }
 
@@ -18,6 +20,8 @@ body {
   color: var(--foreground);
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
+  border-radius: 10px;
+  background-color: transparent;
 }
 
 @layer utilities {
@@ -42,4 +46,18 @@ foliate-view {
   @apply inline-flex h-6 w-6 items-center justify-center rounded-full;
   @apply transition duration-200 ease-in-out transform hover:scale-105;
   @apply bg-base-300 hover:bg-gray-300;
+}
+
+.rounded-window {
+  border-radius: 10px;
+}
+
+.rounded-window-left {
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+
+.rounded-window-right {
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
 }
\ No newline at end of file
diff --git a/apps/readest-app/src/app/library/components/Header.tsx b/apps/readest-app/src/app/library/components/Header.tsx
index 38eaecd6..4647a49f 100644
--- a/apps/readest-app/src/app/library/components/Header.tsx
+++ b/apps/readest-app/src/app/library/components/Header.tsx
@@ -11,7 +11,10 @@ interface LibraryHeaderProps {
 
 const LibraryHeader: React.FC<LibraryHeaderProps> = ({ onImportBooks, onToggleSelectMode }) => {
   return (
-    <div id='titlebar' className='titlebar fixed top-0 z-10 w-full bg-gray-100 px-8 py-6'>
+    <div
+      id='titlebar'
+      className='titlebar rounded-window fixed top-0 z-10 w-full bg-gray-100 px-6 py-4'
+    >
       <div className='flex items-center justify-between'>
         <div className='sm:w relative flex w-full items-center'>
           <span className='absolute left-4 text-gray-500'>
diff --git a/apps/readest-app/src/app/library/page.tsx b/apps/readest-app/src/app/library/page.tsx
index 210e35a3..8094d18d 100644
--- a/apps/readest-app/src/app/library/page.tsx
+++ b/apps/readest-app/src/app/library/page.tsx
@@ -73,13 +73,13 @@ const LibraryPage = () => {
   };
 
   return (
-    <div className='min-h-screen select-none bg-gray-100'>
+    <div className='rounded-window min-h-screen select-none bg-gray-100'>
       <LibraryHeader
         onImportBooks={handleImportBooks}
         onToggleSelectMode={handleToggleSelectMode}
       />
-      <div className='min-h-screen pt-10'>
-        <div className='hero-content p-4'>
+      <div className='min-h-screen pt-12'>
+        <div className='hero-content px-2 py-4'>
           <Spinner loading={loading} />
           <Bookshelf
             libraryBooks={libraryBooks}
diff --git a/apps/readest-app/src/app/reader/components/FooterBar.tsx b/apps/readest-app/src/app/reader/components/FooterBar.tsx
index 640b280c..f9f3b43e 100644
--- a/apps/readest-app/src/app/reader/components/FooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/FooterBar.tsx
@@ -41,7 +41,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
     <div
       className={clsx(
         'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center px-4',
-        'shadow-xs bg-base-100 transition-opacity duration-300',
+        'shadow-xs bg-base-100 rounded-window transition-opacity duration-300',
         isHoveredAnim && 'hover-bar-anim',
         hoveredBookKey === bookKey ? `opacity-100` : `opacity-0`,
       )}
diff --git a/apps/readest-app/src/app/reader/components/HeaderBar.tsx b/apps/readest-app/src/app/reader/components/HeaderBar.tsx
index 3b295075..5e41e1a1 100644
--- a/apps/readest-app/src/app/reader/components/HeaderBar.tsx
+++ b/apps/readest-app/src/app/reader/components/HeaderBar.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import clsx from 'clsx';
 import { VscLayoutSidebarLeft, VscLayoutSidebarLeftOff } from 'react-icons/vsc';
 
+import WindowButtons from '@/components/WindowButtons';
+
 interface HeaderBarProps {
   bookKey: string;
   bookTitle: string;
@@ -36,9 +38,10 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
 
   return (
     <div
+      id='titlebar'
       className={clsx(
-        `header-bar absolute top-0 z-10 flex h-10 w-full items-center px-4`,
-        `shadow-xs bg-base-100 transition-opacity duration-300`,
+        `header-bar absolute top-0 z-10 flex h-11 w-full items-center px-4`,
+        `shadow-xs bg-base-100 rounded-window transition-opacity duration-300`,
         isHoveredAnim && 'hover-bar-anim',
         hoveredBookKey === bookKey ? `opacity-100` : `opacity-0`,
       )}
@@ -59,6 +62,9 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
           )}
         </button>
       </div>
+      <div className='absolute right-4 flex h-full items-center'>
+        <WindowButtons />
+      </div>
     </div>
   );
 };
diff --git a/apps/readest-app/src/app/reader/components/SideBar.tsx b/apps/readest-app/src/app/reader/components/SideBar.tsx
index 49ce3563..fdc2330a 100644
--- a/apps/readest-app/src/app/reader/components/SideBar.tsx
+++ b/apps/readest-app/src/app/reader/components/SideBar.tsx
@@ -82,7 +82,7 @@ const SideBar: React.FC<{
   return (
     isVisible && (
       <div
-        className='sidebar-container bg-base-200 z-20 h-full select-none'
+        className='sidebar-container bg-base-200 rounded-window-left z-20 h-full select-none'
         style={{
           width: `${width}`,
           minWidth: `${MIN_SIDEBAR_WIDTH * 100}%`,
@@ -91,7 +91,7 @@ const SideBar: React.FC<{
         }}
       >
         <div className={'sidebar h-full'}>
-          <div className='flex h-10 items-center justify-between pl-1.5 pr-3'>
+          <div className='flex h-11 items-center justify-between pl-1.5 pr-3'>
             <div className='flex items-center'>
               <button className='btn btn-ghost h-8 min-h-8 w-8 p-0' onClick={onGoToLibrary}>
                 <GiBookshelf size={20} className='fill-base-content' />
diff --git a/apps/readest-app/src/app/reader/components/TOCView.tsx b/apps/readest-app/src/app/reader/components/TOCView.tsx
index 7c42002b..eb1bdfa3 100644
--- a/apps/readest-app/src/app/reader/components/TOCView.tsx
+++ b/apps/readest-app/src/app/reader/components/TOCView.tsx
@@ -164,7 +164,7 @@ const TOCView: React.FC<{
 
   return (
     <div className='relative'>
-      <div className='max-h-[calc(100vh-168px)] overflow-y-auto rounded border'>
+      <div className='max-h-[calc(100vh-173px)] overflow-y-auto rounded border'>
         <ul role='tree' ref={tocRef} className='overflow-y-auto px-2'>
           {toc &&
             toc.map((item) => (