diff --git a/public/index.html b/public/index.html
index aa069f2..a31d734 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,37 +7,14 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Tauri-powered Grasscutter launcher"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 7dcd20d..eca912c 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-function buttonFunctionality() {
-  alert('Button clicked!');
-}
+// Major Components
+import Topbar from './components/TopBar'
 
 function App() {
   return (
     <div className="App">
-      <button onClick={buttonFunctionality}>Cool button</button>
+      <Topbar />
+      <button onClick={() => console.log("cum")}>Cool button</button>
     </div>
   );
 }
diff --git a/src/ui/components/TopBar.css b/src/ui/components/TopBar.css
new file mode 100644
index 0000000..a7a5131
--- /dev/null
+++ b/src/ui/components/TopBar.css
@@ -0,0 +1,10 @@
+.TopBar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 34px;
+  background-color: #141414;
+  z-index: 1;
+  color: #fff;
+}
\ No newline at end of file
diff --git a/src/ui/components/TopBar.tsx b/src/ui/components/TopBar.tsx
new file mode 100644
index 0000000..cf3c1d4
--- /dev/null
+++ b/src/ui/components/TopBar.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import './TopBar.css';
+
+export default class TopBar extends React.Component {
+  constructor(props: unknown[]) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <div className="TopBar">
+        TOP BAR BABY
+      </div>
+    )
+  }
+}
\ No newline at end of file
