Header Buttons done

src/components/Header.tsx

@@ -3,7 +3,7 @@ import Back from "../images/Back.svg";
 import Settings from "../images/Settings.svg";
 import Notification from "../images/Notification.svg";
 import logo from "../images/logo.svg";
-
+import { UserName } from "../components";
 const Header = () => {
   return (
     <div className="w-container flex border-b bg-whiteSmoke border-grey-dark h-70 justify-center">
@@ -26,7 +26,7 @@ const Header = () => {
         alt="text"
       />
 
-      <p className="w-175 my-auto"> username</p>
+      <UserName />
       <input
         onClick={() => {
           //Open Notifications

src/components/UserName.tsx

@@ -1,3 +1,31 @@
-const UserName = () => {};
+import Down from "../images/Down.svg";
+import Logo from "../images/Logo.svg";
+const UserName = () => {
+  return (
+    <div className="bg-white px-8 w-175 h-45 my-auto rounded-3xl flex justify-between">
+      <input
+        onClick={() => {
+          //Show Accounts
+        }}
+        type="image"
+        className="h-30 my-auto my-auto cursor-pointer"
+        src={Logo}
+        alt="text"
+      />
+      <p className="text-tiny text-center py-14 ml-8 justify-center">
+        {"JOhndow.near"}
+      </p>
+      <input
+        onClick={() => {
+          //Show Accounts
+        }}
+        type="image"
+        className="h-10 my-auto mt-20 mx-14 cursor-pointer"
+        src={Down}
+        alt="text"
+      />
+    </div>
+  );
+};
 
 export default UserName;

src/components/index.ts

@@ -1,2 +1,3 @@
 export { default as CustomInput } from "./CustomInput";
 export { default as Header } from "./Header";
+export { default as UserName } from "./UserName";