diff --git a/src-electron/main.js b/src-electron/main.js
index c8fa1b69..281969e3 100644
--- a/src-electron/main.js
+++ b/src-electron/main.js
@@ -316,6 +316,7 @@ function createWindow() {
         height,
         icon: path.join(rootDir, 'VRCX.png'),
         autoHideMenuBar: true,
+        titleBarStyle: 'hiddenInset',
         webPreferences: {
             preload: path.join(__dirname, 'preload.js')
         }
diff --git a/src/App.vue b/src/App.vue
index dacdbc5a..df90deaa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,13 @@
 <template>
     <!DOCTYPE html>
     <el-config-provider :locale="currentLocale">
+        <!-- macOS Custom Title Bar -->
+        <MacOSTitleBar></MacOSTitleBar>
+
         <div
             id="x-app"
             class="x-app"
+            :class="{ 'with-macos-titlebar': isMacOS }"
             ondragenter="event.preventDefault()"
             ondragover="event.preventDefault()"
             ondrop="event.preventDefault()">
@@ -106,6 +110,7 @@
 
     import Login from './views/Login/Login.vue';
     import NavMenu from './components/NavMenu.vue';
+    import MacOSTitleBar from './components/TitleBar/MacOSTitleBar.vue';
     import Sidebar from './views/Sidebar/Sidebar.vue';
     import Feed from './views/Feed/Feed.vue';
     import GameLog from './views/GameLog/GameLog.vue';
@@ -148,6 +153,11 @@
 
     console.log(`isLinux: ${LINUX}`);
 
+    // Simple macOS detection
+    const isMacOS = computed(() => {
+        return navigator.platform.indexOf('Mac') > -1;
+    });
+
     const { locale } = useI18n();
 
     initNoty();
@@ -200,4 +210,9 @@
     :deep(.el-splitter-bar__dragger) {
         width: 4px !important;
     }
+
+    /* Add title bar spacing for macOS */
+    .x-app.with-macos-titlebar {
+        padding-top: 28px;
+    }
 </style>
diff --git a/src/components/TitleBar/MacOSTitleBar.vue b/src/components/TitleBar/MacOSTitleBar.vue
new file mode 100644
index 00000000..dd524dba
--- /dev/null
+++ b/src/components/TitleBar/MacOSTitleBar.vue
@@ -0,0 +1,115 @@
+<template>
+    <div v-if="isMacOS" class="macos-title-bar">
+        <div class="title-bar-content">
+            <div class="traffic-lights-spacer"></div>
+            <div class="title-bar-center">
+                <span class="app-title">VRCX</span>
+            </div>
+            <div class="title-bar-right"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { computed, onMounted } from 'vue';
+
+    // Simple macOS detection
+    const isMacOS = computed(() => {
+        return navigator.platform.indexOf('Mac') > -1;
+    });
+
+    // Make title bar draggable
+    onMounted(() => {
+        if (isMacOS.value) {
+            const titleBar = document.querySelector('.macos-title-bar');
+            if (titleBar) {
+                titleBar.classList.add('draggable');
+            }
+        }
+    });
+</script>
+
+<style scoped>
+    .macos-title-bar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 28px;
+        z-index: 9999;
+        user-select: none;
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        border-bottom: 1px solid transparent;
+        transition: all 0.2s ease;
+    }
+
+    .macos-title-bar.draggable {
+        -webkit-app-region: drag;
+    }
+
+    .title-bar-content {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding: 0 12px;
+    }
+
+    .traffic-lights-spacer {
+        width: 78px;
+        flex-shrink: 0;
+    }
+
+    .title-bar-center {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .app-title {
+        font-size: 13px;
+        font-weight: 600;
+        line-height: 1;
+        transition: all 0.2s ease;
+    }
+
+    .title-bar-right {
+        width: 78px;
+        flex-shrink: 0;
+    }
+
+    /* Light theme styles */
+    :global(html:not(.dark)) .macos-title-bar {
+        background-color: rgba(248, 248, 248, 0.8);
+        border-bottom-color: rgba(0, 0, 0, 0.06);
+    }
+
+    :global(html:not(.dark)) .macos-title-bar .app-title {
+        color: rgba(29, 29, 31, 0.9);
+    }
+
+    /* Dark theme styles */
+    :global(html.dark) .macos-title-bar {
+        background-color: rgba(30, 30, 30, 0.8);
+        border-bottom-color: rgba(255, 255, 255, 0.06);
+    }
+
+    :global(html.dark) .macos-title-bar .app-title {
+        color: rgba(245, 245, 247, 0.9);
+    }
+
+    /* Hover effects */
+    .macos-title-bar:hover {
+        backdrop-filter: blur(30px);
+        -webkit-backdrop-filter: blur(30px);
+    }
+
+    :global(html:not(.dark)) .macos-title-bar:hover {
+        background-color: rgba(248, 248, 248, 0.95);
+    }
+
+    :global(html.dark) .macos-title-bar:hover {
+        background-color: rgba(30, 30, 30, 0.95);
+    }
+</style>
