diff --git a/packages/react-ui/src/stories/common/Pagination.stories.js b/packages/react-ui/src/stories/common/Pagination.stories.js
new file mode 100644
index 00000000..4456f414
--- /dev/null
+++ b/packages/react-ui/src/stories/common/Pagination.stories.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Pagination } from '@material-ui/lab';
+
+export default {
+  title: 'Common/Pagination',
+  component: Pagination,
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: ['default', 'outlined']
+      }
+    },
+    shape: {
+      control: {
+        type: 'select',
+        options: ['default', 'rounded']
+      }
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: ['default', 'primary', 'secondary']
+      }
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['small', 'medium', 'large']
+      }
+    },
+    disabled: {
+      control: {
+        type: 'boolean'
+      }
+    },
+  }
+}
+const Template = ({ ...args }) => {
+  return (
+    <div>
+      <Pagination count={10} {...args} />
+    </div>
+  )
+};
+
+export const Playground = Template.bind({});
+
+
diff --git a/packages/react-ui/src/stories/common/Table.stories.js b/packages/react-ui/src/stories/common/Table.stories.js
new file mode 100644
index 00000000..dbdfb901
--- /dev/null
+++ b/packages/react-ui/src/stories/common/Table.stories.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow } from '@material-ui/core';
+
+export default {
+  title: 'Common/Table',
+  component: Table
+}
+
+function createData(name, calories, fat, carbs, protein) {
+  return { name, calories, fat, carbs, protein };
+}
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+const Template = ({ ...args }) => {
+  return (
+    <TableContainer component={Paper}>
+      <Table aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell align="right">Calories</TableCell>
+            <TableCell align="right">Fat&nbsp;(g)</TableCell>
+            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
+            <TableCell align="right">Protein&nbsp;(g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.name}>
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell align="right">{row.calories}</TableCell>
+              <TableCell align="right">{row.fat}</TableCell>
+              <TableCell align="right">{row.carbs}</TableCell>
+              <TableCell align="right">{row.protein}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+};
+
+export const Playground = Template.bind({});
+
+