diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
new file mode 100644
index 0000000..29ddc19
--- /dev/null
+++ b/src/components/Sidebar/index.tsx
@@ -0,0 +1,17 @@
+import { useReactiveVar } from '@apollo/client';
+import { roleVar } from '../../graphql/state';
+import { IconButton } from '..';
+import { Add } from '../../assets';
+import { Wrapper } from './styles';
+
+const Sidebar = () => {
+  const role = useReactiveVar(roleVar);
+
+  return (
+    <Wrapper color={role}>
+      <IconButton icon={<Add />} color={role} onClick={() => {}} />
+    </Wrapper>
+  );
+};
+
+export default Sidebar;
diff --git a/src/components/Sidebar/styles.ts b/src/components/Sidebar/styles.ts
new file mode 100644
index 0000000..7e1afc3
--- /dev/null
+++ b/src/components/Sidebar/styles.ts
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+type WrapperProps = {
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+};
+
+export const Wrapper = styled.div<WrapperProps>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 75px;
+  height: 100%;
+  background: ${({ theme, color }) =>
+    color ? theme.colors[color].light : theme.colors.client.light};
+  display: grid;
+  justify-content: center;
+  align-items: flex-end;
+  padding: 55px 0px;
+`;