diff --git a/pages/index.tsx b/pages/index.tsx
index 85b4a208e..c20682748 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,6 @@
 
 import { ButtonCommon, Inputcommon, Layout } from 'src/components/common';
-import { IconBuy } from 'src/components/icons';
+import { IconBuy, IconSearch } from 'src/components/icons';
 export default function Home() {
   return (
     <>
@@ -9,11 +9,14 @@ export default function Home() {
       <p>Go to <code>src/components</code> to make your awesome component!</p>
       <p>Go to <code>src/styles</code> to find global styles!</p>
 
-      <Inputcommon placeholder="Enter here" />
-      <Inputcommon placeholder="Enter here" type='number' />
-      <Inputcommon placeholder="Enter here" value="23434" />
 
-      <ButtonCommon type='ghost' icon={<IconBuy/>}>Button</ButtonCommon>
+      {/* demo  */}
+      <div style={{ display: 'flex' }}>
+        <Inputcommon placeholder="Enter here" />
+        <Inputcommon placeholder="Enter here" styleType='custom' icon={<IconSearch />}/>
+      </div>
+
+      <ButtonCommon type='ghost' icon={<IconBuy />}>Button</ButtonCommon>
     </>
   )
 }
diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx
index 82961b43e..f3fc32ab0 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.tsx
+++ b/src/components/common/ButtonCommon/ButtonCommon.tsx
@@ -1,13 +1,12 @@
 import classNames from 'classnames'
 import React, { memo } from 'react'
-import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
 import s from './ButtonCommon.module.scss'
 
 interface Props {
     children?: React.ReactNode,
     type?: 'primary' | 'light' | 'ghost',
     size?: 'default' | 'large',
-    icon?: any,
+    icon?: React.ReactNode,
     isIconSuffix?: boolean,
     loading?: boolean,
     disabled?: boolean,
diff --git a/src/components/common/InputCommon/InputCommon.module.scss b/src/components/common/InputCommon/InputCommon.module.scss
index af7cde088..13e27fd5f 100644
--- a/src/components/common/InputCommon/InputCommon.module.scss
+++ b/src/components/common/InputCommon/InputCommon.module.scss
@@ -1,5 +1,43 @@
 @import "../../../styles/utilities";
 
-.inputCommon {
-  @apply custom-border-radius transition-all duration-200;
+.inputWrap {
+  @apply flex items-center relative;
+  .icon {
+    @apply absolute;
+    content: "";
+    left: 1.6rem;
+    margin-right: 1.6rem;
+    svg path {
+      fill: currentColor;
+    }
+  }
+  .icon + .inputCommon {
+    padding-left: 4.8rem;
+  }
+  .inputCommon {
+    @apply block w-full transition-all duration-200 rounded;
+    padding: 1.6rem;
+    border: 1px solid var(--border-line);
+    &:hover,
+    &:focus,
+    &:active {
+      outline: none;
+      border: 1px solid var(--primary);
+      @apply shadow-md;
+    }
+
+    &::placeholder {
+      @apply text-label;
+    }
+
+    &.custom {
+      @apply custom-border-radius border-none;
+      background: var(--gray);
+      &:hover,
+      &:focus,
+      &:active {
+        border: 1px solid var(--primary);
+      }
+    }
+  }
 }
diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx
index 0e6ef87a9..d26ed98bd 100644
--- a/src/components/common/InputCommon/InputCommon.tsx
+++ b/src/components/common/InputCommon/InputCommon.tsx
@@ -11,11 +11,14 @@ interface Props {
     value?: string | number,
     placeholder?: string,
     type?: 'text' | 'number',
+    styleType?: 'default' | 'custom',
+    icon?: React.ReactNode,
     onChange?: (value: string | number) => void,
     onEnter?: (value: string | number) => void,
 }
 
-const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, onChange, onEnter }: Props, ref) => {
+const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleType = 'default', icon,
+    onChange, onEnter }: Props, ref) => {
     const inputElementRef = useRef<HTMLInputElement>(null);
 
     useImperativeHandle(ref, () => ({
@@ -36,15 +39,20 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, onChange
     }
 
     return (
-        <input
-            ref={inputElementRef}
-            value={value}
-            type={type}
-            placeholder={placeholder}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            className={s.inputCommon}
-        />
+        <div className={s.inputWrap}>
+            {
+                icon && <span className={s.icon}>{icon}</span>
+            }
+            <input
+                ref={inputElementRef}
+                value={value}
+                type={type}
+                placeholder={placeholder}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                className={`${s.inputCommon} ${s[styleType]}`}
+            />
+        </div>
     )
 
 })
diff --git a/src/components/icons/IconSearch.tsx b/src/components/icons/IconSearch.tsx
new file mode 100644
index 000000000..4fc3633b2
--- /dev/null
+++ b/src/components/icons/IconSearch.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconSearch = () => {
+    return (
+        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20.7104 19.2899L17.0004 15.6099C18.4405 13.8143 19.1379 11.5352 18.9492 9.2412C18.7605 6.94721 17.7001 4.81269 15.9859 3.27655C14.2718 1.74041 12.0342 0.919414 9.73332 0.982375C7.43243 1.04534 5.24311 1.98747 3.61553 3.61505C1.98795 5.24263 1.04582 7.43194 0.982863 9.73283C0.919903 12.0337 1.7409 14.2713 3.27704 15.9854C4.81318 17.6996 6.94769 18.76 9.24169 18.9487C11.5357 19.1374 13.8148 18.44 15.6104 16.9999L19.2904 20.6799C19.3834 20.7736 19.494 20.848 19.6158 20.8988C19.7377 20.9496 19.8684 20.9757 20.0004 20.9757C20.1324 20.9757 20.2631 20.9496 20.385 20.8988C20.5068 20.848 20.6174 20.7736 20.7104 20.6799C20.8906 20.4934 20.9914 20.2442 20.9914 19.9849C20.9914 19.7256 20.8906 19.4764 20.7104 19.2899ZM10.0004 16.9999C8.61592 16.9999 7.26255 16.5894 6.1114 15.8202C4.96026 15.051 4.06305 13.9578 3.53324 12.6787C3.00342 11.3996 2.8648 9.99214 3.1349 8.63427C3.40499 7.27641 4.07168 6.02912 5.05065 5.05016C6.02961 4.07119 7.27689 3.4045 8.63476 3.13441C9.99263 2.86431 11.4001 3.00293 12.6792 3.53275C13.9583 4.06256 15.0515 4.95977 15.8207 6.11091C16.5899 7.26206 17.0004 8.61544 17.0004 9.9999C17.0004 11.8564 16.2629 13.6369 14.9501 14.9497C13.6374 16.2624 11.8569 16.9999 10.0004 16.9999Z" fill="#3D3D3D" />
+        </svg>
+    )
+}
+
+export default IconSearch
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 155948269..c82e4fa76 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -1 +1,3 @@
 export { default as IconBuy } from './IconBuy'
+export { default as IconSearch } from './IconSearch'
+
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index affd4207b..ec4273b21 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -32,7 +32,8 @@
 
   --disabled: #cccccc;
   --border-line: #ebebeb;
-  --background: #f8f8f8;
+  --background: #fff;
+  --gray: #f8f8f8;
   --white: #fbfbfb;
 
   --font-size: 16px;
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index 53a0d952b..20093a1b2 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -89,7 +89,7 @@
         }
     }
     .custom-border-radius {
-        border-radius: 60% 10% 60% 2%/ 10% 40% 10% 50%;
+        border-radius: 60% 10% 60% 2%/ 10% 20% 10% 50%;
     }
 
     .font-heading {
diff --git a/tailwind.config.js b/tailwind.config.js
index 393960c51..c22fbc0a6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -45,10 +45,11 @@ module.exports = {
         'negative-border-line': 'var(--negative-border-line)',
         'negative-light': 'var(--negative-light)',
 
-        'line': 'var(--border-line)',
-        'background': 'var(--background)',
-        'white': 'var(--white)',
-        'disabled': 'var(--text-disabled)',
+        line: 'var(--border-line)',
+        background: 'var(--background)',
+        white: 'var(--white)',
+        gray: 'var(--gray)',
+        disabled: 'var(--text-disabled)',
         
         // @deprecated (NOT use these variables)
         'primary-2': 'var(--primary-2)',