diff --git a/next-env.d.ts b/next-env.d.ts
index 9bc3dd46b..c6643fda1 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/package.json b/package.json
index 387ca946b..60f049ce4 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,6 @@
     "prettier": "^2.3.0",
     "typescript": "4.3.4"
   },
-
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
       "prettier --write",
diff --git a/pages/index.tsx b/pages/index.tsx
index 9374596a6..1f438f12f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,6 @@
 
-import { CarouselCommon, LabelCommon, Layout, QuanittyInput,CheckboxCommon } from 'src/components/common'
-
+import { CarouselCommon, LabelCommon, Layout, QuanittyInput,CheckboxCommon ,Author,DateTime} from 'src/components/common'
+import imgAuthor from '../src/components/common/Author/img/author.png';
 const dataTest = [{
   text: 1
 }, {
@@ -18,8 +18,9 @@ const test = (props: { text: string }) => <div className="h-64 bg-yellow-300">{p
 export default function Home() {
   return (
     <>
-      
       <CheckboxCommon defaultChecked={true}></CheckboxCommon>
+      <Author image={imgAuthor} name="Alessandro Del Piero"></Author>
+      <DateTime date="april 30,2021"></DateTime>
     </>
   )
 }
diff --git a/src/components/common/Author/Author.module.scss b/src/components/common/Author/Author.module.scss
new file mode 100644
index 000000000..0459a9fbb
--- /dev/null
+++ b/src/components/common/Author/Author.module.scss
@@ -0,0 +1,17 @@
+.authorWarper{
+    @apply flex flex-row items-center;
+    
+    .authorImage{
+        width:3.2rem;
+        height:3.2rem;
+        border-radius:3.2rem;
+    }
+    .authorName{
+        margin-left:1rem;
+        color:var(--text-label);
+        font-family: var(--font-sans);
+        font-size: 1.2rem;
+        line-height: 2rem;
+        font-feature-settings: 'salt' on;
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/Author/Author.tsx b/src/components/common/Author/Author.tsx
new file mode 100644
index 000000000..bbb389fbd
--- /dev/null
+++ b/src/components/common/Author/Author.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import s from './Author.module.scss';
+import classNames from 'classnames';
+
+import Image from "next/image";
+interface Props {
+    image:any,
+    name: string
+}
+
+const Author = ({image,name}:Props) =>{
+
+    return (
+        <div className={classNames(s.authorWarper)}>
+            <Image className={classNames(s.authorImage)}  src={image}  alt=""/>
+            <div className={classNames(s.authorName)}>{name}</div>
+        </div>
+    )
+}
+
+export default Author;
\ No newline at end of file
diff --git a/src/components/common/Author/img/author.png b/src/components/common/Author/img/author.png
new file mode 100644
index 000000000..70c922bc6
Binary files /dev/null and b/src/components/common/Author/img/author.png differ
diff --git a/src/components/common/CheckboxCommon/CheckboxCommon.module.scss b/src/components/common/CheckboxCommon/CheckboxCommon.module.scss
index 00d6836b1..a26a23aec 100644
--- a/src/components/common/CheckboxCommon/CheckboxCommon.module.scss
+++ b/src/components/common/CheckboxCommon/CheckboxCommon.module.scss
@@ -1,12 +1,11 @@
 @import '../../../styles/utilities';
 .checkboxCommonWarper{
     @apply flex flex-col;
-    margin-left:2rem;
+
     .checkboxItem{
         display: block;
         position: relative;
         cursor: pointer;
-        margin-top:2rem;
         border-radius: 0.4rem;
         width:50%;
         &:hover .checkboxInput ~ .checkMark {
@@ -62,5 +61,10 @@
     }
     .checkboxText{
         margin-left:3rem;
+        font-size:1.2rem;
+        line-height: 2rem;
+        font-family: var(--font-sans);
+        color:var(--text-base);
+        letter-spacing: 0.01em;
     }
 }
\ No newline at end of file
diff --git a/src/components/common/CheckboxCommon/CheckboxCommon.tsx b/src/components/common/CheckboxCommon/CheckboxCommon.tsx
index 7493078e9..d901f91f4 100644
--- a/src/components/common/CheckboxCommon/CheckboxCommon.tsx
+++ b/src/components/common/CheckboxCommon/CheckboxCommon.tsx
@@ -1,4 +1,4 @@
-import React,{useState,useEffect} from 'react';
+import React,{ChangeEvent,useState,useEffect} from 'react';
 import s from './CheckboxCommon.module.scss';
 import classNames from 'classnames';
 
@@ -12,7 +12,7 @@ interface CheckboxProps extends Omit<
 
 const CheckboxCommon = ({onChange,defaultChecked = true,...props}: CheckboxProps) =>{
     
-    const [value, setValue] = useState<boolean>();
+    const [value, setValue] = useState<boolean>(true);
 
     useEffect(()=>{
         onChange && onChange(value)
@@ -31,7 +31,7 @@ const CheckboxCommon = ({onChange,defaultChecked = true,...props}: CheckboxProps
                 <span className={s.checkMark}></span>
              </label>
              <div className={classNames(s.checkboxText)}>
-                <label for="check"> Billing address is same as shipping </label>
+                <label htmlFor="check"> Billing address is same as shipping </label>
              </div>
         </div>
     )
diff --git a/src/components/common/DateTime/DateTime.module.scss b/src/components/common/DateTime/DateTime.module.scss
new file mode 100644
index 000000000..db64a6434
--- /dev/null
+++ b/src/components/common/DateTime/DateTime.module.scss
@@ -0,0 +1,9 @@
+.dateTime{
+    color:var(--text-label);
+    text-transform: uppercase;
+    font-size: 1.2rem;
+    line-height: 2rem;
+    letter-spacing: 0.01em;
+    font-feature-settings: 'salt' on;
+    font-family: var(--font-sans);
+}
\ No newline at end of file
diff --git a/src/components/common/DateTime/DateTime.tsx b/src/components/common/DateTime/DateTime.tsx
new file mode 100644
index 000000000..3e1b6288a
--- /dev/null
+++ b/src/components/common/DateTime/DateTime.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import s from './DateTime.module.scss';
+import classNames from 'classnames';
+
+interface Props {
+    date:string,
+}
+
+const DateTime = ({date}:Props) =>{
+    return (
+      <div  className={classNames(s.dateTime)}>{date}</div>
+    )
+}
+
+export default DateTime;
\ No newline at end of file
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index ca922bbb0..c0313b67e 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -8,4 +8,6 @@ export { default as ViewAllItem} from './ViewAllItem/ViewAllItem'
 export { default as ItemWishList} from './ItemWishList/ItemWishList'
 export { default as Logo} from './Logo/Logo'
 export { default as Inputcommon} from './InputCommon/InputCommon'
-export { default as CheckboxCommon} from './CheckboxCommon/CheckboxCommon'
\ No newline at end of file
+export { default as CheckboxCommon} from './CheckboxCommon/CheckboxCommon'
+export { default as Author} from './Author/Author'
+export { default as DateTime} from './DateTime/DateTime'
\ No newline at end of file