fixing header sizes and elements positions

src/components/Header/header.module.css

@@ -1,27 +1,19 @@
 .header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   background-color: var(--color-primary);
-  padding: 16px;
-  box-shadow: 0px 4px 2px -2px gray;
+  padding: 0 16px;
+  height: 4rem;
+}
+
+.backButtonContainer {
+  /* same with from Image tag */
+  min-width: 40px;
 }
 
 .backButton {
-  font-size: 24px;
   border: none;
   background: none;
   cursor: pointer;
-  margin-right: 20px;
-}
-
-.title {
-  flex: 1;
-  text-align: center;
-  margin: 0;
-  font-size: 24px;
-}
-
-.backIcon {
-  width: 25px;
-  height: auto;
 }

src/components/Header/index.tsx

@@ -9,28 +9,24 @@ import Image from "next/image";
 const Header = () => {
   const pathname = usePathname();
 
-  const getTitle = () => {
-    return (
+  return (
+    <header className={styles.header}>
+      <div className={styles.backButtonContainer}>
+        {pathname !== "/" && (
+          <Link href="/">
+            <button className={styles.backButton}>
+              <Image src="/arrow.svg" alt="Back" width={20} height={30} />
+            </button>
+          </Link>
+        )}
+      </div>
       <Image
         src="/logo.svg"
         width={90}
         height={60}
         alt="Logo"
         className={styles.logo}
       />
-    );
-  };
-
-  return (
-    <header className={styles.header}>
-      {pathname !== "/" && (
-        <Link href="/">
-          <button className={styles.backButton}>
-            <Image src="/arrow.svg" alt="Back" width={40} height={40} />
-          </button>
-        </Link>
-      )}
-      <h1 className={styles.title}>{getTitle()}</h1>
       <Profile />
     </header>
   );

src/components/Navbar/navbar.module.css

@@ -6,6 +6,7 @@
   position: fixed;
   bottom: 0;
   width: 100%;
+  max-height: 4rem;
   border-top: 1px solid var(--background-tertiary);
 }
 

src/components/Profile/index.tsx

@@ -13,8 +13,8 @@ const Profile = () => {
         src={profilePicture}
         alt="Profile"
         className={styles.profilePicture}
-        width={30}
-        height={30}
+        width={Number.MAX_SAFE_INTEGER}
+        height={Number.MAX_SAFE_INTEGER}
       />
     </div>
   );