diff --git a/pages/index.tsx b/pages/index.tsx
index 1d3072ef7..95af77b83 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,5 @@
 
-import { Layout } from 'src/components/common'
+import { Layout, ModalCreateUserInfo } from 'src/components/common'
 import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories, HomeFeature, HomeRecipe } from 'src/components/modules/home';
 
 export default function Home() {
@@ -13,6 +13,8 @@ export default function Home() {
       <HomeCTA />
       <HomeRecipe />
       <HomeSubscribe />
+
+      <ModalCreateUserInfo/>
     </>
   )
 }
diff --git a/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss
index bdfc69387..2ec8bf91f 100644
--- a/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss
+++ b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss
@@ -1,17 +1,12 @@
+@import '../../../../styles/utilities';
+
 .formAuthen {
-    @apply bg-white w-full;
+    @apply bg-white w-full u-form;
     .inner {
         @screen md {
-            max-width: 52rem;
+            width: 60rem;
             margin: auto;
         }
-        .body {
-            > div {
-                &:not(:last-child) {
-                    margin-bottom: 1.6rem;
-                }
-            }
-        }
         .others {
             @apply font-bold text-center;
             margin-top: 4rem;
diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
index 7ef3ec9ba..de553a6aa 100644
--- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
+++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
@@ -23,10 +23,7 @@ const FormLogin = ({ onSwitch, isHide }: Props) => {
     }, [isHide])
 
     return (
-        <section className={classNames({
-            [s.formAuthen]: true,
-            // [styles.hide]: isHide
-        })}>
+        <section className={s.formAuthen}>
             <div className={s.inner}>
                 <div className={s.body}>
                     <Inputcommon placeholder='Email Address' type='email' ref={emailRef} />
diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
index 1624f2c1c..40d4ef355 100644
--- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
+++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
@@ -24,7 +24,6 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
         <section className={classNames({
             [s.formAuthen]: true,
             [styles.formRegister]: true,
-            // [styles.hide]: isHide
         })}>
             <div className={s.inner}>
                 <div className={s.body}>
diff --git a/src/components/common/ModalCommon/ModalCommon.module.scss b/src/components/common/ModalCommon/ModalCommon.module.scss
index d4967b04e..d1434ed21 100644
--- a/src/components/common/ModalCommon/ModalCommon.module.scss
+++ b/src/components/common/ModalCommon/ModalCommon.module.scss
@@ -8,7 +8,7 @@
         @apply flex justify-center items-center  min-h-screen;
         .modal{
             @apply inline-block align-bottom bg-white relative;
-            max-width: 60rem;
+            max-width: 66.4rem;
             padding: 3.2rem;
             box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.24);
             border-radius: 1.2rem;
diff --git a/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.module.scss b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.module.scss
new file mode 100644
index 000000000..199028061
--- /dev/null
+++ b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.module.scss
@@ -0,0 +1,19 @@
+@import "../../../styles/utilities";
+
+.formUserInfo {
+    @apply u-form;
+    .inner {
+        @screen md {
+            width: 60rem;
+            margin: auto;
+        }
+        .bottom {
+            @apply grid grid-cols-2;
+            margin-top: 4rem;
+            grid-gap: 1.6rem;
+            > button {
+                @apply w-full;
+            }
+        }
+    }
+}
diff --git a/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx
new file mode 100644
index 000000000..f6c3d7a6f
--- /dev/null
+++ b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx
@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import Link from 'next/link';
+import React, { useRef } from 'react';
+import { useModalCommon } from 'src/components/hooks/useModalCommon';
+import { CustomInputCommon } from 'src/utils/type.utils';
+import { Inputcommon } from '..';
+import ButtonCommon from '../ButtonCommon/ButtonCommon';
+import ModalCommon from '../ModalCommon/ModalCommon';
+import s from './ModalCreateUserInfo.module.scss';
+
+
+const ModalCreateUserInfo = () => {
+    const { visible, closeModal } = useModalCommon({ initialValue: true })
+    const firstInputRef = useRef<CustomInputCommon>(null)
+
+    return (
+        <ModalCommon visible={visible} onClose={closeModal} title='Enter your Information'>
+            <div className={s.formUserInfo}>
+                <div className={s.inner}>
+                    <div className={s.body}>
+                        <Inputcommon placeholder='Street Address' ref={firstInputRef} />
+                        <Inputcommon placeholder='City' />
+                        <div className={s.line}>
+                            <Inputcommon placeholder='State' />
+                            <Inputcommon placeholder='Zip code' />
+                        </div>
+                        <Inputcommon placeholder='Phone (delivery contact)' />
+                    </div>
+                    <div className={s.bottom}>
+                        <ButtonCommon size='large' onClick={closeModal} type='light'>Skip</ButtonCommon>
+                        <ButtonCommon size='large'>Submit</ButtonCommon>
+
+                    </div>
+                </div>
+            </div>
+        </ModalCommon>
+    );
+}
+
+export default ModalCreateUserInfo;
\ No newline at end of file
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index dc0288966..86b242fb9 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -28,3 +28,4 @@ export { default as NotiMessage} from './NotiMessage/NotiMessage'
 export { default as VideoPlayer} from './VideoPlayer/VideoPlayer'
 export { default as SelectCommon} from './SelectCommon/SelectCommon'
 export { default as ModalCommon} from './ModalCommon/ModalCommon'
+export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo'
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index 93291dc3a..26cea17c0 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -80,7 +80,7 @@
         font-size: 10px;
         line-height: 16px;
     }
-    
+
     .spacing-horizontal {
         padding-left: 2rem;
         padding-right: 2rem;
@@ -119,4 +119,22 @@
     .font-logo {
         font-family: var(--font-logo);
     }
+
+    .u-form {
+        .body {
+            > div {
+                &:not(:last-child) {
+                    margin-bottom: 1.6rem;
+                }
+            }
+            .line {
+                @apply flex justify-between items-center;
+                > div {
+                    &:not(:last-child) {
+                        margin-right: 1.6rem;
+                    }
+                }
+            }
+        }
+    }
 }