diff --git a/src/components/WindowTitleBar.tsx b/src/components/WindowTitleBar.tsx
new file mode 100644
index 0000000..fc21c7f
--- /dev/null
+++ b/src/components/WindowTitleBar.tsx
@@ -0,0 +1,64 @@
+import { username, hostname, path } from "../../constants";
+
+const WindowTitleBar = (props: { customUserName: string }) => {
+  return (
+    <div className="flex flex-row bg-stone-600 w-screen px-2 text-stone-700 gap-4 py-1 items-center">
+      <span className="flex flex-row gap-2">
+        <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-orange-700 h-5 w-5">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-4 h-4"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </div>
+        <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-neutral-500 h-5 w-5">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-4 h-4"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M19.5 12h-15"
+            />
+          </svg>
+        </div>
+        <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-neutral-500 h-5 w-5">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-4 h-4"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M5.25 7.5A2.25 2.25 0 017.5 5.25h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9a2.25 2.25 0 01-2.25-2.25v-9z"
+            />
+          </svg>
+        </div>
+      </span>
+      <span className="text-white">
+        {props.customUserName == "" ? username : props.customUserName}@
+        {hostname}:{path}
+      </span>
+    </div>
+  );
+};
+
+export default WindowTitleBar;
diff --git a/src/pages/Homepage.tsx b/src/pages/Homepage.tsx
index 18bda27..25c110d 100644
--- a/src/pages/Homepage.tsx
+++ b/src/pages/Homepage.tsx
@@ -6,6 +6,7 @@ import { themes } from "../../constants";
 const options = info.options.map((option) => option.label);
 import { Queue } from "queue-typescript";
 import PromptBar from "../components/PromptBar";
+import WindowTitleBar from "../components/WindowTitleBar";
 import { IDataType } from "../types";
 
 const historyCommand = new Queue<string>();
@@ -278,6 +279,7 @@ function Homepage() {
 
   return (
     <div className={`${currentTheme}`}>
+      <WindowTitleBar customUserName={customUserName} />
       <div className="font-bold text-xl p-2 w-[100vw] min-h-[100vh] bg-bgcol">
         {
           /* History */
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index 9c6352b..8c9a882 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -9,6 +9,7 @@ import {
 } from "react";
 import PromptBar from "../components/PromptBar";
 import commands from "../commands.json";
+import WindowTitleBar from "../components/WindowTitleBar";
 import { themes } from "../../constants";
 
 interface State {
@@ -389,6 +390,7 @@ function Profile() {
   }, []);
   return (
     <div className={`${currentTheme} min-h-[100vh] w-[100vw] bg-bgcol`}>
+      <WindowTitleBar customUserName={state.customUserName} />
       {state.showWelcomeMessage && (
         <p className="font-bold p-2">
           Type 'help' to view all available commands