diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index 9b8a5e7d67e183e93b9082b88614463b6b987323..c40a956b813ed0b8e7f67e17479b67c26f3b7bdb 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -1,2 +1,3 @@
 export { default as MainMenuBar } from "./src/mainMenuBar/MainMenuBar";
 export { default as SideMenuBar } from "./src/sideMenuBar/SideMenuBar";
+export { default as InfoArea } from "./src/components/infoArea/InfoArea";
diff --git a/wax-prosemirror-components/src/components/infoArea/InfoArea.js b/wax-prosemirror-components/src/components/infoArea/InfoArea.js
new file mode 100644
index 0000000000000000000000000000000000000000..1abbefdfa4d2fc492fd17d576aaec5e3df7821a2
--- /dev/null
+++ b/wax-prosemirror-components/src/components/infoArea/InfoArea.js
@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "styled-components";
+
+const InfoAreaContainer = styled.div`
+  height: ${props => (props.height ? props.height : "30px")};
+  position: fixed;
+  bottom: 0;
+  z-index: 9999;
+  background: #efefef;
+  width: 100%;
+`;
+
+const InfoArea = () => <InfoAreaContainer />;
+
+export default InfoArea;
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index b70150b960f4232caaa2b1469f56adba17f8edd3..5f4c4dd0b2a36558bf455bba44e8d0b632ed3a47 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -1,6 +1,6 @@
 import styled, { ThemeProvider } from "styled-components";
 import React, { Fragment } from "react";
-import { MainMenuBar, SideMenuBar } from "wax-prosemirror-components";
+import { MainMenuBar, SideMenuBar, InfoArea } from "wax-prosemirror-components";
 import EditorElements from "./EditorElements";
 import { cokoTheme } from "wax-prosemirror-themes";
 
@@ -35,7 +35,6 @@ const WaxSurfaceScroll = styled.div`
 
 const CommentsContainer = styled.div``;
 const NotesContainer = styled.div``;
-const InfoAreaContainer = styled.div``;
 
 const EditoriaLayout = ({ editor, view, ...props }) => (
   <ThemeProvider theme={cokoTheme}>
@@ -47,6 +46,7 @@ const EditoriaLayout = ({ editor, view, ...props }) => (
           {editor}
         </WaxSurfaceScroll>
       </WaxSurfaceContainer>
+      <InfoArea />
     </LayoutWrapper>
   </ThemeProvider>
 );
diff --git a/wax-prosemirror-themes/src/coko-theme/index.js b/wax-prosemirror-themes/src/coko-theme/index.js
index 314007987680eb80babb87da18fc5554362c028a..d400d828fc775e35cee0406c405d3c7394b7aa7b 100644
--- a/wax-prosemirror-themes/src/coko-theme/index.js
+++ b/wax-prosemirror-themes/src/coko-theme/index.js
@@ -2,7 +2,7 @@
 import "typeface-fira-sans-condensed";
 import "typeface-vollkorn";
 
-import { ButtonStyled } from "./elements";
+import { ButtonStyles } from "./elements";
 
 const cokoTheme = {
   /* Colors */
@@ -69,7 +69,7 @@ const cokoTheme = {
 
   cssOverrides: {
     ui: {
-      ButtonStyled
+      ButtonStyles
     }
   }
 };