diff --git a/e2e/__tests__/__image_snapshots__/tab-test-js-components-tab-common-1-snap.png b/e2e/__tests__/__image_snapshots__/tab-test-js-components-tab-common-1-snap.png
new file mode 100644
index 00000000..9e132d82
Binary files /dev/null and b/e2e/__tests__/__image_snapshots__/tab-test-js-components-tab-common-1-snap.png differ
diff --git a/e2e/__tests__/tab.test.js b/e2e/__tests__/tab.test.js
new file mode 100644
index 00000000..6d3ae4b6
--- /dev/null
+++ b/e2e/__tests__/tab.test.js
@@ -0,0 +1,12 @@
+import { baisy } from '../setup/TestSuiter';
+
+
+const SUITES = [
+  baisy.suite('Components/Tab', 'common'),
+];
+
+
+SUITES.map(suite => {
+  it(suite.getTestName(), suite.testStory, 20000);
+});
+
diff --git a/src/components/Tab/Tab.js b/src/components/Tab/Tab.js
new file mode 100644
index 00000000..f78a3acf
--- /dev/null
+++ b/src/components/Tab/Tab.js
@@ -0,0 +1,19 @@
+// @flow
+
+import React from 'react';
+
+import { TabOuter } from './Tab.theme';
+
+type TabProps = {
+  children: React$Node,
+  className?: string,
+};
+
+const Tab = ({ children, ...rest }: TabProps) => (
+  <TabOuter { ...rest }>
+    { children }
+  </TabOuter>
+);
+
+export { Tab };
+
diff --git a/src/components/Tab/Tab.stories.js b/src/components/Tab/Tab.stories.js
new file mode 100644
index 00000000..2ce19464
--- /dev/null
+++ b/src/components/Tab/Tab.stories.js
@@ -0,0 +1,22 @@
+// @flow
+
+import React from 'react';
+import { css } from 'react-emotion';
+
+export default (asStory: *) => {
+  asStory('Components/Tab', module, (story, { Tab, Row }) => {
+    story
+      .add('common', () => (
+        <div className={ css`background-color: #F4F7F9` }>
+          <Row gap="xs" offsetX="lg" offsetY="lg">
+            <Tab tagName="div" className="active">
+              Active Tab
+            </Tab>
+            <Tab tagName="div">
+              Inactive Tab
+            </Tab>
+          </Row>
+        </div>
+      ));
+  });
+};
diff --git a/src/components/Tab/Tab.theme.js b/src/components/Tab/Tab.theme.js
new file mode 100644
index 00000000..8b064d84
--- /dev/null
+++ b/src/components/Tab/Tab.theme.js
@@ -0,0 +1,34 @@
+import { createThemeTag } from '../../theme/createThemeTag';
+
+const name = 'tab';
+
+const [TabOuter, themeTabOuter] = createThemeTag(name, () => ({
+  root: {
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '32px',
+    padding: '6px 12px',
+    fontSize: '14px',
+    lineHeight: '20px',
+    color: '#323C47',
+    borderRadius: '5px 5px 0 0',
+    backgroundColor: '#FFFFFF',
+    cursor: 'pointer',
+
+    '&:not(.active)': {
+      opacity: 0.7,
+      borderRadius: '5px 5px 0 0',
+    },
+  },
+}));
+
+const theme = {
+  ...themeTabOuter,
+};
+
+export {
+  TabOuter,
+  theme,
+};
+
diff --git a/src/components/Tab/index.js b/src/components/Tab/index.js
new file mode 100644
index 00000000..789bf04e
--- /dev/null
+++ b/src/components/Tab/index.js
@@ -0,0 +1,5 @@
+// @flow
+
+export { Tab } from './Tab';
+export { theme } from './Tab.theme';
+
diff --git a/src/components/components.js b/src/components/components.js
index 25008dcb..a468c393 100644
--- a/src/components/components.js
+++ b/src/components/components.js
@@ -53,4 +53,5 @@ export { NoData } from './NoData';
 export { Pagination } from './Pagination';
 export { Indicator } from './Indicator';
 export { Divider } from './Divider';
+export { Tab } from './Tab';
 
diff --git a/src/components/theme.js b/src/components/theme.js
index f070fcfb..f1779be9 100644
--- a/src/components/theme.js
+++ b/src/components/theme.js
@@ -43,6 +43,7 @@ import { theme as tooltipTheme } from './Tooltip';
 import { theme as topBarTheme } from './TopBar';
 import { theme as treeSelectTheme } from './TreeSelect';
 import { theme as dividerTheme } from './Divider';
+import { theme as tabTheme } from './Tab';
 
 
 export const theme = {
@@ -89,4 +90,5 @@ export const theme = {
   ...topBarTheme,
   ...treeSelectTheme,
   ...dividerTheme,
+  ...tabTheme,
 };