diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx
index b837004d6..691b1d026 100644
--- a/src/components/common/TabCommon/TabCommon.tsx
+++ b/src/components/common/TabCommon/TabCommon.tsx
@@ -1,7 +1,7 @@
 import React, { RefObject, useEffect } from "react"
 import s from './TabCommon.module.scss'
 
-import TabItem from './TabItem/TabItem'
+import TabItem from './components/TabItem/TabItem'
 
 interface TabCommonProps {
     tabs: {ref:RefObject<HTMLLIElement>, tabName: string, active: boolean, onClick: (tabIndex: number, tabPane?: string) => void}[];
diff --git a/src/components/common/TabCommon/TabItem/TabItem.module.scss b/src/components/common/TabCommon/components/TabItem/TabItem.module.scss
similarity index 100%
rename from src/components/common/TabCommon/TabItem/TabItem.module.scss
rename to src/components/common/TabCommon/components/TabItem/TabItem.module.scss
diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/components/TabItem/TabItem.tsx
similarity index 100%
rename from src/components/common/TabCommon/TabItem/TabItem.tsx
rename to src/components/common/TabCommon/components/TabItem/TabItem.tsx
diff --git a/src/components/common/TabCommon/components/TabPane/TabPane.module.scss b/src/components/common/TabCommon/components/TabPane/TabPane.module.scss
new file mode 100644
index 000000000..6904a6acb
--- /dev/null
+++ b/src/components/common/TabCommon/components/TabPane/TabPane.module.scss
@@ -0,0 +1,23 @@
+@import '../../../../../../styles/utilities';
+
+.tabPane {
+    @apply hidden;
+    animation-duration: 0.6s;
+    animation-name: appear;
+    @keyframes appear {
+        from {
+            margin-left: 100%;
+            width: 200%;
+        }
+        
+        to {
+            margin-left: 0%;
+            width: 100%;
+        }
+    }
+    
+
+    &.active {
+        @apply block;
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/TabCommon/components/TabPane/TabPane.tsx b/src/components/common/TabCommon/components/TabPane/TabPane.tsx
new file mode 100644
index 000000000..3b39291b7
--- /dev/null
+++ b/src/components/common/TabCommon/components/TabPane/TabPane.tsx
@@ -0,0 +1,20 @@
+import classNames from "classnames"
+import React from "react"
+import s from './TabPane.module.scss'
+
+interface TabPaneProps {
+    active: string;
+    children?: React.ReactNode;
+}
+
+const TabPane = ({ active="", children } : TabPaneProps) => {
+    return (
+        <section className={classNames(s.tabPane, {
+            [s[active]] : active
+        })}>
+            {children}
+        </section>
+    )
+}
+
+export default TabPane
\ No newline at end of file