diff --git a/webnode/.babelrc b/webnode/.babelrc
index ad9f29a..142a3ca 100644
--- a/webnode/.babelrc
+++ b/webnode/.babelrc
@@ -1,4 +1,4 @@
 {
   "presets": ["env", "react", "es2015", "stage-2", "react-app"],
-  "plugins": ["transform-class-properties", "transform-object-rest-spread"]
+  "plugins": ["transform-class-properties", "transform-object-rest-spread", "styled-componets"]
 }
\ No newline at end of file
diff --git a/webnode/package.json b/webnode/package.json
index 0c2ccd6..96faaf4 100644
--- a/webnode/package.json
+++ b/webnode/package.json
@@ -100,6 +100,7 @@
     "interpolate-html-plugin": "^3.0.0",
     "jest-cli": "^23.1.0",
     "jest-enzyme": "^4.2.0",
+    "jest-styled-components": "^6.2.2",
     "jsdom-worker": "^0.1.0",
     "lodash-webpack-plugin": "^0.11.5",
     "mini-css-extract-plugin": "^0.4.1",
diff --git a/webnode/src/components/consent-overlay/button-group/index.tsx b/webnode/src/components/consent-overlay/button-group/index.tsx
index 0be8543..80630d9 100644
--- a/webnode/src/components/consent-overlay/button-group/index.tsx
+++ b/webnode/src/components/consent-overlay/button-group/index.tsx
@@ -1,60 +1,27 @@
 import React from "react";
 import styled from "styled-components";
-
-const Button = styled.button`
-  border: none;
-  border-radius: 12px;
-  cursor: pointer;
-  font: 600 23px Poppins;
-  height: 50px;
-  margin: 15px;
-  min-width: 300px;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  @media (max-width: 1200px) {
-    border-radius: 8px;
-    font-size: 16px;
-    height: 40px;
-    margin: 5px;
-    min-width: 180px;
-  }
-`;
+import { Container, Flexbox, Button } from "../../generic";
 
 const ContinueButton = styled(Button)`
-  background: rgba(8, 143, 252);
-  color: white;
   :hover: {
     background: #088ffc;
   }
 `;
 
 const DenyButton = styled(Button)`
-  background: #ffffff;
-  border: 1px solid #f76868;
-  color: #f76868;
   :hover: {
     background: #f76868;
     border-color: #f76868;
   }
 `;
 
-const DesktopContainer = styled.div`
-  list-style-type: none;
-  margin-right: 0;
-  min-width: 200px;
-  width: 15%;
+const DesktopContainer = styled(Container)`
   @media (max-width: 1200px) {
     display: none;
   }
 `;
 
-const MobileContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  margin-right: 0;
-  min-width: 200px;
-  width: 90%;
+const MobileContainer = styled(Flexbox)`
   @media (min-width: 1201px) {
     display: none;
   }
@@ -70,7 +37,11 @@ class ButtonGroup extends React.Component<ButtonGroupProps> {
     const { giveConsent, denyConsent } = this.props;
     return (
       <div>
-        <DesktopContainer>
+        <DesktopContainer
+          width="15%"
+          minWidth="200px"
+          listStyleType="none"
+        >
           <li>
             {" "}
             <ContinueButton onClick={giveConsent}>
@@ -79,14 +50,31 @@ class ButtonGroup extends React.Component<ButtonGroupProps> {
           </li>
           <li>
             {" "}
-            <DenyButton onClick={denyConsent}>Deny Consent</DenyButton>
+            <DenyButton
+              border="1px solid #f76868"
+              color="#f76868"
+              backgroundColor="#ffffff"
+              onClick={denyConsent}
+            >
+              Deny Consent
+            </DenyButton>
           </li>
         </DesktopContainer>
-        <MobileContainer>
+        <MobileContainer
+          flex-direction="row"
+          width="90%"
+          minWidth="200px"
+        >
           <ContinueButton onClick={giveConsent}>
             Continue Ad-Free
           </ContinueButton>
-          <DenyButton onClick={denyConsent}>Deny Consent</DenyButton>
+          <DenyButton
+            color="#f76868"
+            backgroundColor="#ffffff"
+            onClick={denyConsent}
+          >
+            Deny Consent
+          </DenyButton>
         </MobileContainer>
       </div>
     );
diff --git a/webnode/src/components/consent-overlay/index.tsx b/webnode/src/components/consent-overlay/index.tsx
index b249bd3..91ea47b 100644
--- a/webnode/src/components/consent-overlay/index.tsx
+++ b/webnode/src/components/consent-overlay/index.tsx
@@ -5,6 +5,7 @@ import MiddleGroup from "./middle-group";
 import LogoGroup from "./logo-group";
 import WebFont from "webfontloader";
 import styled from "styled-components";
+import { Container, Flexbox } from "../generic";
 
 WebFont.load({
   google: {
@@ -12,34 +13,16 @@ WebFont.load({
   }
 });
 
-const Container = styled.div`
-  font-family: Poppins;
-  overflow: hidden;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  position: fixed;
-  background-color: #ffffff;
-  text-align: center;
-  height: 300px;
+const OuterContainer = styled(Container)`
   @media (max-width: 1200px) {
     height: 200px;
   }
 `;
 
-const BlueBar = styled.div`
-  top: 0;
-  height: 6px;
-  width: 100%;
-  border-bottom: solid 6px #088ffc;
+const BlueBar = styled(Container)`
 `;
 
-const Inner = styled.div`
-  flex-direction: row;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  height: 300px;
+const InnerContainer = styled(Flexbox)`
   @media (max-width: 1200px) {
     flex-direction: column;
     height: 200px;
@@ -56,14 +39,34 @@ class ConsentOverlay extends React.Component<ConsentOverlayProps> {
   render() {
     const { denyConsent, giveConsent } = this.props;
     return (
-      <Container>
-        <BlueBar />
-        <Inner>
+      <OuterContainer 
+        alignItems="center" 
+        height="300px"
+        fontFamily="Poppins"
+        overflow="hidden"
+        bottom="0"
+        left="0"
+        right="0"
+        position="fixed"
+        backgroundColor="#ffffff"
+      >
+        <BlueBar
+          top="0"
+          height="6px"
+          width="100%"
+          borderBottom="solid 6px #088ffc" 
+        />
+        <InnerContainer
+          alignItems="center"
+          height="300px"
+          flexDirection="row"
+          justifyContent="space-around"
+        >
           <LogoGroup />
           <MiddleGroup />
           <ButtonGroup giveConsent={giveConsent} denyConsent={denyConsent} />
-        </Inner>
-      </Container>
+        </InnerContainer >
+      </OuterContainer>
     );
   }
 }
diff --git a/webnode/src/components/consent-overlay/logo-group/index.tsx b/webnode/src/components/consent-overlay/logo-group/index.tsx
index 89bc269..fca572b 100644
--- a/webnode/src/components/consent-overlay/logo-group/index.tsx
+++ b/webnode/src/components/consent-overlay/logo-group/index.tsx
@@ -3,34 +3,33 @@ import styled from "styled-components";
 
 import { ASSET_URL } from "../../../config";
 import LogoImg from "../../../assets/images/oyster-logo-with-dot.svg";
+import { Flexbox, Text, Image } from "../../generic";
 
-const Container = styled.div`
-  width: 20%;
-  flex-direction: column;
-  justify-content: space-around;
+const LogoGroupContainer = styled(Flexbox)`
   @media (max-width: 1200px) {
     display: none;
   }
 `;
 
-const Logo = styled.img`
-  height: 100px;
-`;
-
-const Text = styled.div`
-  font: 600 32px Poppins;
-  padding-top: 25px;
-  line-height: 1.25;
-  color: #088ffc;
-`;
-
 class LogoGroup extends React.Component {
   render() {
     return (
-      <Container>
-        <Logo src={`${ASSET_URL}${LogoImg}`} alt="logo" />
-        <Text>Oyster Protocol in use</Text>
-      </Container>
+      <LogoGroupContainer
+        width="20%"
+        flexDirection="column"
+        justifyContent="space-around"
+      >
+        <Image src={`${ASSET_URL}${LogoImg}`} alt="logo" />
+        <Text
+          color="#088ffc"
+          lineHeight="1.25"
+          paddingTop="25px"
+          fontSize="32px"
+          fontFamily="Poppins"
+        >
+          Oyster Protocol in use
+        </Text>
+      </LogoGroupContainer>
     );
   }
 }
diff --git a/webnode/src/components/consent-overlay/middle-group/index.tsx b/webnode/src/components/consent-overlay/middle-group/index.tsx
index 6db15ee..499b972 100644
--- a/webnode/src/components/consent-overlay/middle-group/index.tsx
+++ b/webnode/src/components/consent-overlay/middle-group/index.tsx
@@ -1,45 +1,26 @@
 import React from "react";
 import styled from "styled-components";
+import { Container, Text, Link } from "../../generic";
 
-const Container = styled.div`
-  width: 45%;
+const MiddleGroupContainer = styled(Container)`
   @media (max-width: 1200px) {
     width: 90%;
   }
 `;
 
-const Headline = styled.div`
-  font: 600 18px Poppins;
-  color: #088ffc;
-  text-align: left;
-  padding-bottom: 10px;
+const Headline = styled(Text)`
   @media (max-width: 1200px) {
     font-size: 12px;
   }
 `;
 
-const Link = styled.a`
-  color: #778291;
-  font-weight: 600;
-`;
-
-const DesktopText = styled.div`
-  color: #778291;
-  font-size: 16px;
-  font-family: Open Sans;
-  text-align: justify;
-  line-height: 1.5;
+const DesktopText = styled(Text)`
   @media (max-width: 1200px) {
     display: none;
   }
 `;
 
-const MobileText = styled.div`
-  color: #778291;
-  font-size: 12px;
-  font-family: Open Sans;
-  text-align: justify;
-  line-height: 1.5;
+const MobileText = styled(Text)`
   @media (min-width: 1201px) {
     display: none;
   }
@@ -48,8 +29,16 @@ const MobileText = styled.div`
 class MiddleGroup extends React.Component {
   render() {
     return (
-      <Container>
-        <Headline>Consent to an Ad-Free Experience</Headline>
+      <MiddleGroupContainer width="45%">
+        <Headline
+          color="#088ffc" 
+          textAlign="left" 
+          fontFamily="Poppins" 
+          fontSize="18px"
+          paddingBottom="10px"
+        >
+            Consent to an Ad-Free Experience
+        </Headline>
         <DesktopText>
           This website is revolutionizing the way content is monetized on the
           internet. We use the Oyster Protocol as a way to generate revenue,
@@ -71,7 +60,7 @@ class MiddleGroup extends React.Component {
             </Link>
           </b>
         </DesktopText>
-        <MobileText>
+        <MobileText fontSize="12px">
           This website is using the Oyster protocol to generate revenue. By
           using a small portion of your unused device resources, this website
           generates revenue without the use of intrusive ads. Choosing to deny
@@ -85,7 +74,7 @@ class MiddleGroup extends React.Component {
             Learn more...
           </Link>
         </MobileText>
-      </Container>
+      </MiddleGroupContainer>
     );
   }
 }
diff --git a/webnode/src/components/generic/button.test.js b/webnode/src/components/generic/button.test.js
new file mode 100644
index 0000000..a07a0ab
--- /dev/null
+++ b/webnode/src/components/generic/button.test.js
@@ -0,0 +1,11 @@
+import React from "react";
+import Button from "./button";
+
+test("Button test", () => {
+  const tree = renderer.create(<Button color="red" />).toJSON();
+  expect(tree).toMatchSnapshot();
+  expect(tree).toHaveStyleRule("color", "red");
+  expect(tree).toHaveStyleRule("border-radius", "8px", {
+    media: "(max-width:1200px)"
+  });
+});
diff --git a/webnode/src/components/generic/button.tsx b/webnode/src/components/generic/button.tsx
new file mode 100644
index 0000000..f5779dc
--- /dev/null
+++ b/webnode/src/components/generic/button.tsx
@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+const Button = styled.button`
+  background-color: ${ (props : any) => props.backgroundColor || 'rgba(8, 143, 252)' };
+  color: ${ (props : any) => props.color || 'white' };
+  border: ${ (props : any) => props.border || 'none' };
+  border-radius: ${ (props : any) => props.borderRadius || '12px' };
+  cursor: ${ (props : any) => props.cursor || 'pointer' };
+  font: ${ (props : any) => props.font || '600 23px Poppins' };
+  height: ${ (props : any) => props.height || '50px' };
+  margin: ${ (props : any) => props.margin || '15px' };
+  min-width: ${ (props : any) => props.minWidth || '300px' };
+  outline: ${ (props : any) => props.outline || 'none' };
+  padding: ${ (props : any) => props.padding || 0 };
+  width: ${ (props : any) => props.width || '100%' };
+  @media (max-width: 1200px) {
+    border-radius: 8px;
+    font-size: 16px;
+    height: 40px;
+    margin: 5px;
+    min-width: 180px;
+  }
+`;
+
+export default Button;
diff --git a/webnode/src/components/generic/container.tsx b/webnode/src/components/generic/container.tsx
new file mode 100644
index 0000000..49723f2
--- /dev/null
+++ b/webnode/src/components/generic/container.tsx
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+const Container = styled.div`
+  width: ${ (props : any) => props.width || 'auto' };
+  height: ${ (props : any) => props.height || 'auto' };
+  margin-top: ${ (props : any) => props.marginTop || 0 };
+  margin-left: ${ (props : any) => props.marginLeft || 0 };
+  margin-right: ${ (props : any) => props.marginRight || 0 };
+  margin-bottom: ${ (props : any) => props.marginBottom || 0 };
+  padding-top: ${ (props : any) => props.paddingTop || 0 };
+  padding-left: ${ (props : any) => props.paddingLeft || 0 };
+  padding-right: ${ (props : any) => props.paddingRight || 0 };
+  padding-bottom: ${ (props : any) => props.paddingBottom || 0 };
+  min-width: ${ (props : any) => props.minWidth || 'auto' };
+  max-width: ${ (props : any) => props.maxWidth || 'auto' };
+  list-style-type: ${ (props : any) => props.listStyleType || 'auto' };
+  align-items: ${ (props : any) => props.alignItems || 'auto' };
+  top: ${ (props : any) => props.top || 'auto' };
+  left: ${ (props : any) => props.left || 'auto' };
+  right: ${ (props : any) => props.right || 'auto' };
+  bottom: ${ (props : any) => props.bottom || 'auto' };
+  overflow: ${ (props : any) => props.overflow || 'none' };
+  border-bottom: ${ (props : any) => props.borderBottom || 'auto' };
+  font-family: ${ (props : any) => props.fontFamily || 'auto' };
+  position: ${ (props : any) => props.position || 'static' };
+  background-color: ${ (props : any) => props.backgroundColor || '#ffffff' };
+`;
+
+export default Container;
diff --git a/webnode/src/components/generic/flexbox.tsx b/webnode/src/components/generic/flexbox.tsx
new file mode 100644
index 0000000..cef6314
--- /dev/null
+++ b/webnode/src/components/generic/flexbox.tsx
@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import Container from "./container";
+
+const Flexbox = styled(Container)`
+  display: flex;
+  align-items: ${ (props : any) => props.alignItems || 'flex-start' };
+  align-content: ${ (props : any) => props.alignContent || 'flex-start' };
+  justify-content: ${ (props : any) => props.justifyContent || 'flex-start' };
+  flex-direction: ${ (props : any) => props.flexDirection || 'auto' };
+  flex-basis: ${ (props : any) => props.flexBasis || 'auto' };
+  flex-grow: ${ (props : any) => props.flexGrow || '0' };
+  flex-shrink: ${ (props : any) => props.flexShrink || '0' };
+`;
+
+export default Flexbox;
diff --git a/webnode/src/components/generic/image.tsx b/webnode/src/components/generic/image.tsx
new file mode 100644
index 0000000..df38b9d
--- /dev/null
+++ b/webnode/src/components/generic/image.tsx
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+const Image = styled.img`
+  width: ${ (props : any) => props.width || 'auto' };
+  height: ${ (props : any) => props.height || '100px' };
+  margin-top: ${ (props : any) => props.marginTop || 0 };
+  margin-left: ${ (props : any) => props.marginLeft || 0 };
+  margin-right: ${ (props : any) => props.marginRight || 0 };
+  margin-bottom: ${ (props : any) => props.marginBottom || 0 };
+`;
+
+export default Image;
diff --git a/webnode/src/components/generic/index.tsx b/webnode/src/components/generic/index.tsx
new file mode 100644
index 0000000..91c9711
--- /dev/null
+++ b/webnode/src/components/generic/index.tsx
@@ -0,0 +1,8 @@
+import Container from "./container";
+import Flexbox from "./flexbox";
+import Button from "./button";
+import Text from "./text";
+import Link from "./link";
+import Image from "./image";
+
+export { Container, Flexbox, Button, Text, Link, Image };
diff --git a/webnode/src/components/generic/link.tsx b/webnode/src/components/generic/link.tsx
new file mode 100644
index 0000000..7c8e46b
--- /dev/null
+++ b/webnode/src/components/generic/link.tsx
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+const Link = styled.a`
+  color: ${ (props: any) => props.color || '#778291' };
+  font-weight: ${ (props: any) => props.fontWeight || '600' };
+`;
+
+export default Link;
diff --git a/webnode/src/components/generic/text.tsx b/webnode/src/components/generic/text.tsx
new file mode 100644
index 0000000..4ca1268
--- /dev/null
+++ b/webnode/src/components/generic/text.tsx
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import Container from "./container";
+
+const Text = styled(Container)`
+  color: ${ (props: any) => props.color || '#778291' };
+  font-family: ${ (props: any) => props.fontFamily || 'Open Sans' };
+  text-align: ${ (props: any) => props.textAlign || 'justify' };
+  line-height: ${ (props: any) => props.lineHeight || '1.5' };
+  font-size: ${ (props: any) => props.fontSize || '16px' };
+  font-weight: ${ (props: any) => props.fontWeight || '600' };
+`;
+
+export default Text;
diff --git a/webnode/src/setup-tests.tsx b/webnode/src/setup-tests.tsx
index 174de8d..42025bb 100644
--- a/webnode/src/setup-tests.tsx
+++ b/webnode/src/setup-tests.tsx
@@ -2,6 +2,8 @@ import nock from "nock";
 import Enzyme, { shallow, render, mount } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
 import toJson from "enzyme-to-json";
+import renderer from "react-test-renderer";
+import "jest-styled-components";
 
 // React 16 Enzyme adapter
 Enzyme.configure({ adapter: new Adapter() });
@@ -12,6 +14,7 @@ global.shallow = shallow;
 global.render = render;
 global.mount = mount;
 global.toJson = toJson;
+global.renderer = renderer;
 
 // Mock globals
 global.Math.random = () => 0.123456789;