diff --git a/src/ui/components/TopBar.tsx b/src/ui/components/TopBar.tsx
index d50873b..d4120a6 100644
--- a/src/ui/components/TopBar.tsx
+++ b/src/ui/components/TopBar.tsx
@@ -1,7 +1,16 @@
+import "@css/components/TopBar.scss";
+
 function TopBar() {
     return (
-        <div>
+        <div class={"TopBar"} data-tauri-drag-region>
+            <div class={"flex flex-row gap-1 text-white"}>
+                <p>Cultivation</p>
+                <p>2.0.0</p>
+            </div>
 
+            <div>
+
+            </div>
         </div>
     );
 }
diff --git a/src/ui/css/components/TopBar.scss b/src/ui/css/components/TopBar.scss
new file mode 100644
index 0000000..c588014
--- /dev/null
+++ b/src/ui/css/components/TopBar.scss
@@ -0,0 +1,6 @@
+.TopBar {
+    @apply flex flex-row justify-between items-center w-full;
+    @apply bg-gray-900 pl-4 pr-4;
+
+    height: 40px;
+}