diff --git a/components/auth/LoginModal/index.module.scss b/components/auth/LoginModal/index.module.scss
index a84d8f17..287a08d6 100644
--- a/components/auth/LoginModal/index.module.scss
+++ b/components/auth/LoginModal/index.module.scss
@@ -1,11 +1,6 @@
-.Login.DialogContent {
+.fields {
+  display: flex;
+  flex-direction: column;
   gap: $unit;
-  // min-width: $unit * 52;
-
-  .Fields {
-    display: flex;
-    flex-direction: column;
-    gap: $unit;
-    padding: 0 $unit-4x;
-  }
+  padding: 0 $unit-4x;
 }
diff --git a/components/auth/LoginModal/index.tsx b/components/auth/LoginModal/index.tsx
index 77fc7c28..d2da05be 100644
--- a/components/auth/LoginModal/index.tsx
+++ b/components/auth/LoginModal/index.tsx
@@ -10,12 +10,13 @@ import { accountState } from '~utils/accountState'
 
 import Button from '~components/common/Button'
 import Input from '~components/common/Input'
-import { Dialog, DialogClose } from '~components/common/Dialog'
+import { Dialog } from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
 import changeLanguage from '~utils/changeLanguage'
 
-import CrossIcon from '~public/icons/Cross.svg'
 import styles from './index.module.scss'
+import DialogHeader from '~components/common/DialogHeader'
+import DialogFooter from '~components/common/DialogFooter'
 
 interface ErrorMap {
   [index: string]: string
@@ -221,19 +222,11 @@ const LoginModal = (props: Props) => {
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}
       >
-        <div className="DialogHeader">
-          <div className="DialogTitle">
-            <h1>{t('modals.login.title')}</h1>
-          </div>
-          <DialogClose className="DialogClose">
-            <CrossIcon />
-          </DialogClose>
-        </div>
-
-        <form className="form" onSubmit={login}>
-          <div className="Fields">
+        <DialogHeader title={t('modals.login.title')} />
+        <form onSubmit={login}>
+          <div className={styles.fields}>
             <Input
-              className="Bound"
+              bound={true}
               name="email"
               placeholder={t('modals.login.placeholders.email')}
               onChange={handleChange}
@@ -242,6 +235,7 @@ const LoginModal = (props: Props) => {
             />
 
             <Input
+              bound={true}
               className="Bound"
               name="password"
               placeholder={t('modals.login.placeholders.password')}
@@ -251,15 +245,17 @@ const LoginModal = (props: Props) => {
               ref={passwordInput}
             />
           </div>
-          <div className="DialogFooter" ref={footerRef}>
-            <div className="Buttons Span">
+          <DialogFooter
+            ref={footerRef}
+            rightElements={[
               <Button
                 contained={true}
                 disabled={!formValid}
+                key="confirm"
                 text={t('modals.login.buttons.confirm')}
-              />
-            </div>
-          </div>
+              />,
+            ]}
+          />
         </form>
       </DialogContent>
     </Dialog>
diff --git a/components/auth/SignupModal/index.module.scss b/components/auth/SignupModal/index.module.scss
index 1c18c253..437adf6f 100644
--- a/components/auth/SignupModal/index.module.scss
+++ b/components/auth/SignupModal/index.module.scss
@@ -1,27 +1,22 @@
-.Signup.DialogContent {
+.fields {
+  display: flex;
+  flex-direction: column;
   gap: $unit;
-  // min-width: $unit * 52;
+  padding: 0 $unit-4x;
+}
 
-  .Fields {
-    display: flex;
-    flex-direction: column;
-    gap: calc($unit / 2);
-    padding: 0 $unit-4x;
+.terms {
+  color: $grey-50;
+  font-size: $font-small;
+  line-height: 1.2;
+  margin-top: $unit;
+  text-align: center;
 
-    .terms {
-      color: $grey-50;
-      font-size: $font-small;
-      line-height: 1.2;
-      margin-top: $unit;
-      text-align: center;
+  a {
+    color: $blue;
 
-      a {
-        color: $blue;
-
-        &:hover {
-          color: darken($blue, 30);
-        }
-      }
+    &:hover {
+      color: darken($blue, 30);
     }
   }
 }
diff --git a/components/auth/SignupModal/index.tsx b/components/auth/SignupModal/index.tsx
index 5cc96dc2..34c1ee37 100644
--- a/components/auth/SignupModal/index.tsx
+++ b/components/auth/SignupModal/index.tsx
@@ -10,10 +10,11 @@ import { accountState } from '~utils/accountState'
 
 import Button from '~components/common/Button'
 import Input from '~components/common/Input'
-import { Dialog, DialogClose } from '~components/common/Dialog'
+import { Dialog } from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
-import CrossIcon from '~public/icons/Cross.svg'
 import styles from './index.module.scss'
+import DialogHeader from '~components/common/DialogHeader'
+import DialogFooter from '~components/common/DialogFooter'
 
 interface Props {
   open: boolean
@@ -300,18 +301,11 @@ const SignupModal = (props: Props) => {
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}
       >
-        <div className="DialogHeader">
-          <div className="DialogTitle">
-            <h1>{t('modals.signup.title')}</h1>
-          </div>
-          <DialogClose className="DialogClose">
-            <CrossIcon />
-          </DialogClose>
-        </div>
-
-        <form className="form" onSubmit={register}>
-          <div className="Fields">
+        <DialogHeader title={t('modals.signup.title')} />
+        <form onSubmit={register}>
+          <div className={styles.fields}>
             <Input
+              bound={true}
               className="Bound"
               name="username"
               placeholder={t('modals.signup.placeholders.username')}
@@ -321,6 +315,7 @@ const SignupModal = (props: Props) => {
             />
 
             <Input
+              bound={true}
               className="Bound"
               name="email"
               placeholder={t('modals.signup.placeholders.email')}
@@ -330,6 +325,7 @@ const SignupModal = (props: Props) => {
             />
 
             <Input
+              bound={true}
               className="Bound"
               name="password"
               placeholder={t('modals.signup.placeholders.password')}
@@ -340,7 +336,7 @@ const SignupModal = (props: Props) => {
             />
 
             <Input
-              className="Bound"
+              bound={true}
               name="confirm_password"
               placeholder={t('modals.signup.placeholders.password_confirm')}
               type="password"
@@ -350,15 +346,17 @@ const SignupModal = (props: Props) => {
             />
           </div>
 
-          <div className="DialogFooter" ref={footerRef}>
-            <div className="Buttons Span">
+          <DialogFooter
+            ref={footerRef}
+            rightElements={[
               <Button
                 contained={true}
                 disabled={!formValid}
+                key="confirm"
                 text={t('modals.signup.buttons.confirm')}
-              />
-            </div>
-          </div>
+              />,
+            ]}
+          />
 
           <p className="terms">
             {/* <Trans i18nKey="modals.signup.agreement">