ok

src/components/Header.js

@@ -190,28 +190,32 @@ const ChildWrapper = styled.div`
   flex-direction: column;
   width: 100%;
 `;
-
 const Child = styled.div`
   width: 100%;
   height: 40px;
   margin: 5px;
-  background-color: rgba(88, 55, 50, 0.2);
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
-  padding-top: 10px;
   padding-left: 5px;
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
 
   ${(props) =>
-    props.hasChildren &&
-    `
-    height: auto;
-    padding-bottom: 10px;
-  `}
+    props.hasChildren
+      ? `
+        border: 1px solid #ababab;
+        height: auto;
+        padding-bottom: 10px;
+      `
+      : `
+        display: flex;
+        align-items: center;
+        background-color: rgb(223 223 223);
+      `}
 `;
 
+
 const Header = ({
   HeaderText,
   HeaderSize='6vw',
@@ -343,7 +347,7 @@ const Header = ({
                       {shopName}
 
                       <Child>
-                        Mode edit 
+                        Mode edit &nbsp;
                         <Switch
                         borderRadius={0}
                           checked={isEditMode}