Layout changes & update deps

src/App.tsx

@@ -26,7 +26,7 @@ export const App = (): JSX.Element => {
       <div className="flex flex-col h-full bg-gray-200 dark:bg-primaryDark">
         <div className="flex flex-shrink-0 overflow-hidden bg-primary dark:bg-primary">
           <div className="w-full overflow-hidden bg-white border-b border-gray-300 md:mt-6 md:mx-6 md:pt-4 md:pb-3 md:rounded-t-3xl dark:border-gray-600 md:shadow-md dark:bg-primaryDark">
-            <div className="flex items-center justify-between h-16 px-4 md:px-6">
+            <div className="flex items-center justify-between h-12 px-4 md:px-6">
               <div className="hidden md:flex">
                 <Logo />
               </div>

src/components/templates/PrimaryTemplate.tsx

@@ -34,7 +34,7 @@ export const PrimaryTemplate = ({
         {children}
       </div>
       {footer && (
-        <div className="flex px-4 py-2 bg-white border-t border-gray-300 md: md:py-4 md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
+        <div className="flex px-4 py-2 bg-white border-t border-gray-300 md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
           {leftButton && (
             <div className="pr-2 m-auto md:hidden">{leftButton}</div>
           )}