diff --git a/src/Atoms/SidePanel/README.md b/src/Atoms/SidePanel/README.md
new file mode 100644
index 0000000..67da694
--- /dev/null
+++ b/src/Atoms/SidePanel/README.md
@@ -0,0 +1 @@
+## SidePanel
diff --git a/src/Atoms/SidePanel/SidePanel.jsx b/src/Atoms/SidePanel/SidePanel.jsx
new file mode 100644
index 0000000..4dfd2c9
--- /dev/null
+++ b/src/Atoms/SidePanel/SidePanel.jsx
@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+const SidePanel = styled.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 300px;
+  transition: all 0.1s ease;
+  right: ${({ show }) => show ? '0' : '-300px'};
+  background-color: #f5f5f5;
+`
+
+SidePanel.defaultProps = {
+  show: false,
+}
+
+export default SidePanel
diff --git a/src/Atoms/SidePanel/SidePanel.stories.jsx b/src/Atoms/SidePanel/SidePanel.stories.jsx
new file mode 100644
index 0000000..5dc4101
--- /dev/null
+++ b/src/Atoms/SidePanel/SidePanel.stories.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import { boolean } from '@storybook/addon-knobs'
+
+import SidePanel from './index'
+
+import markdown from './README.md'
+
+export default {
+  title: 'Atoms/SidePanel',
+}
+
+export const sidePanel = () => (
+  <SidePanel show={boolean('Show', true)}>
+    Hello, I am a side panel
+  </SidePanel>
+)
+sidePanel.story = {
+  parameters: {
+    notes: { markdown },
+    jest:  [],
+  },
+}
diff --git a/src/Atoms/SidePanel/index.js b/src/Atoms/SidePanel/index.js
new file mode 100644
index 0000000..ba0c0fe
--- /dev/null
+++ b/src/Atoms/SidePanel/index.js
@@ -0,0 +1,3 @@
+import SidePanel from './SidePanel'
+
+export default SidePanel
diff --git a/src/Atoms/index.js b/src/Atoms/index.js
index feb9bde..67b5e4b 100644
--- a/src/Atoms/index.js
+++ b/src/Atoms/index.js
@@ -7,3 +7,4 @@ export { default as Typo } from './Typo'
 export { default as Banner } from './Banner'
 export { default as Tooltip } from './Tooltip'
 export { default as Byte } from './Byte'
+export { default as SidePanel } from './SidePanel'
diff --git a/src/index.js b/src/index.js
index 0030d36..5e035e2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,3 +8,4 @@ export { Typo } from './Atoms'
 export { Banner } from './Atoms'
 export { Tooltip } from './Atoms'
 export { Byte } from './Atoms'
+export { SidePanel } from './Atoms'