diff --git a/src/components/system/TitleBar/TitleBar.tsx b/src/components/system/TitleBar/TitleBar.tsx
new file mode 100644
index 0000000..e5f5042
--- /dev/null
+++ b/src/components/system/TitleBar/TitleBar.tsx
@@ -0,0 +1,40 @@
+import { Maximize, Minus, X } from 'react-feather'
+import { appWindow } from '@tauri-apps/api/window'
+
+import { Image } from '..'
+
+export const TitleBar: React.FC = () => {
+  return (
+    <nav className='flex w-full h-[40px] !z-50 items-center justify-between bg-[#1f1f1f] text-white'>
+      <div
+        className='w-full select-none'
+        onMouseDown={async () => {
+          return await appWindow.startDragging()
+        }}>
+        <Image src='/Logo.svg' size={60} className='ml-3 p-1' />
+      </div>
+
+      <ul className='flex h-full'>
+        <li
+          className='grid h-full w-14 cursor-pointer place-items-center transition-colors duration-[10ms] hover:bg-[#2a2a2a]'
+          onClick={async () => {
+            return await appWindow.minimize()
+          }}>
+          <Minus />
+        </li>
+
+        <li className='grid h-full w-14 place-items-center cursor-not-allowed opacity-40'>
+          <Maximize size={20} />
+        </li>
+
+        <li
+          className='grid h-full w-14 cursor-pointer place-items-center transition-colors duration-[10ms] hover:bg-red-500'
+          onClick={async () => {
+            return await appWindow.close()
+          }}>
+          <X />
+        </li>
+      </ul>
+    </nav>
+  )
+}
diff --git a/src/components/system/TitleBar/index.ts b/src/components/system/TitleBar/index.ts
new file mode 100644
index 0000000..259755c
--- /dev/null
+++ b/src/components/system/TitleBar/index.ts
@@ -0,0 +1 @@
+export * from './TitleBar'