diff --git a/.netlify/state.json b/.netlify/state.json
new file mode 100644
index 0000000..8b9372e
--- /dev/null
+++ b/.netlify/state.json
@@ -0,0 +1,3 @@
+{
+	"siteId": "333362bb-34db-4636-8b8d-959ffcdf221e"
+}
\ No newline at end of file
diff --git a/_redirects b/_redirects
new file mode 100644
index 0000000..50a4633
--- /dev/null
+++ b/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index a11777c..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/index.html b/public/index.html
index 4bfce95..a738681 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,15 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -19,12 +18,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Slurp Retro</title>
   </head>
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git a/src/App.js b/src/App.js
index f2e814c..b2ac7d3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,16 +5,19 @@ import firebase from 'firebase';
 import base from './base';
 import Main from './components/Main';
 
-class Home extends Component {
+class App extends Component {
   state = {
     uid: '',
     name: '',
+    loading: false,
   };
 
   componentDidMount() {
     // On mount check for if user is already authenticaed
     firebase.auth().onAuthStateChanged(user => {
-      user && this.authHandler({ user });
+      if (user) {
+        this.authHandler({ user });
+      }
     });
   }
 
@@ -35,15 +38,16 @@ class Home extends Component {
     const authProvider = new firebase.auth[`GoogleAuthProvider`]();
     firebase
       .auth()
-      .signInWithPopup(authProvider)
+      .signInWithRedirect(authProvider)
       .then(this.authHandler);
   };
   render() {
     if (!this.state.uid) {
       return <Login authenticate={this.authenticate} />;
     }
+
     return <Main logout={this.logout} uid={this.state.uid} name={this.state.name} />;
   }
 }
 
-export default Home;
+export default App;
diff --git a/src/Routes.js b/src/Routes.js
index 700a8e2..ae7d887 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -5,9 +5,52 @@ import App from './App';
 import Main from './components/Main';
 import typography from './utils/typography';
 import fontFiles from './fonts/index.js';
+import GodMode from './components/GodMode';
 
 const GlobalStyles = createGlobalStyle`
  ${typography}
+
+:root {
+  --main-color: #0055FF;
+  --bg-color: #f8f8f8;
+}
+
+body,html {
+    margin: 0px;
+    padding: 0px;
+}
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+body {
+  -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    background: var(--bg-color);
+}
+
+  button {
+    min-width: 75px;
+    min-height: 25px;
+    background: var(--main-color);
+    padding: 0;
+    cursor: pointer;
+    color: white;
+    font-weight: bold;
+    border: none;
+    border-radius: 5px;
+    &:focus {
+      outline: none;
+    }
+    &:disabled {
+      background: lightgrey;
+      cursor: auto;
+    }
+  }
+
  @font-face {
     font-family: "Gotham Rounded";
     font-style: normal;
@@ -48,6 +91,7 @@ class Routes extends Component {
       <React.Fragment>
         <GlobalStyles />
         <Router>
+          <GodMode path="godmode" />
           <App path="/*" />
         </Router>
       </React.Fragment>
diff --git a/src/components/AddCard.js b/src/components/AddCard.js
new file mode 100644
index 0000000..dc1d53e
--- /dev/null
+++ b/src/components/AddCard.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import styled from 'styled-components';
+import { log } from 'util';
+
+const Content = styled.div`
+  display: grid;
+  grid-template-rows: auto 1fr;
+  max-width: 500px;
+  width: 80%;
+  min-height: 200px;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 40px;
+  border-radius: 15px;
+  overflow: hidden;
+  background: white;
+  margin: auto;
+
+  p {
+    padding: 20px;
+    margin: 0;
+    color: ${props => props.color};
+  }
+`;
+
+const InputWithButton = styled.div`
+  display: grid;
+  grid-template-rows: 1fr 40px;
+  border-radius: 15px;
+  overflow: hidden;
+
+  background: white;
+  button {
+    border-radius: 0px;
+    background: ${props => props.color};
+  }
+
+  input,
+  textarea {
+    background: white;
+    color: ${props => props.color};
+    border-radius: 0;
+    display: block;
+    text-align: center;
+    width: 100%;
+    &:focus {
+      outline: none;
+    }
+  }
+  textarea {
+    resize: none;
+    border: none;
+    text-align: left;
+    display: inline-block;
+    width: 100%;
+    margin: auto;
+    font-weight: lighter;
+    border-radius: 5px;
+    text-align: center;
+  }
+`;
+
+class AddCard extends React.Component {
+  textRef = React.createRef();
+
+  handleClick = () => {
+    let text = this.textRef.current.value;
+    text && this.props.addStuff(text);
+    this.textRef.current.value = '';
+  };
+
+  render() {
+    return (
+      <Content color={this.props.color}>
+        <p>{this.props.text}</p>
+        <InputWithButton color={this.props.color}>
+          <textarea ref={this.textRef} placeholder="Type here anything" />
+          <button onClick={this.handleClick}>Add</button>
+        </InputWithButton>
+      </Content>
+    );
+  }
+}
+
+export default AddCard;
diff --git a/src/components/Card.js b/src/components/Card.js
deleted file mode 100644
index cd7cd41..0000000
--- a/src/components/Card.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-const Card = () => (
-  <div>
-    <input type="text" />
-  </div>
-);
-
-export default Card;
diff --git a/src/components/DisplayCard.js b/src/components/DisplayCard.js
new file mode 100644
index 0000000..f6839ee
--- /dev/null
+++ b/src/components/DisplayCard.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+const Card = styled.div`
+  display: inline-block;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 20px;
+  background: white;
+  color: ${props => props.color};
+  border-radius: 15px;
+  max-width: 80%;
+  margin: ${props => props.margin};
+
+  p {
+    padding: 10px;
+    margin: 0;
+  }
+`;
+
+class DisplayCard extends React.Component {
+  handleRemove = () => {
+    this.props.removeStuff(this.props.index);
+  };
+  render() {
+    return (
+      <Card color={this.props.color} onClick={this.handleRemove} margin={this.props.margin || 0}>
+        <p>{this.props.text}</p>
+      </Card>
+    );
+  }
+}
+
+export default DisplayCard;
diff --git a/src/components/GodDisplayCard.js b/src/components/GodDisplayCard.js
new file mode 100644
index 0000000..3478199
--- /dev/null
+++ b/src/components/GodDisplayCard.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+const Card = styled.div`
+  display: inline-block;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 20px;
+  background: white;
+  color: ${props => props.color};
+  border-radius: 15px;
+  max-width: 80%;
+  margin: ${props => props.margin};
+
+  p {
+    padding: 10px;
+    margin: 0;
+  }
+`;
+
+class GodDisplayCard extends React.Component {
+  //   handleRemove = () => {
+  //     this.props.index && this.props.removeStuff(this.props.index);
+  //   };
+  render() {
+    return (
+      <Card color={this.props.color} margin={this.props.margin || 0}>
+        <p>{this.props.text}</p>
+      </Card>
+    );
+  }
+}
+
+export default GodDisplayCard;
diff --git a/src/components/GodMode.js b/src/components/GodMode.js
new file mode 100644
index 0000000..8f389b2
--- /dev/null
+++ b/src/components/GodMode.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import base from '../base';
+import styled from 'styled-components';
+import { goodColor, badColor } from '../utils/colors';
+import GodDisplayCard from './GodDisplayCard';
+
+const Cards = styled.div`
+  padding: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+`;
+
+const Content = styled.div`
+  padding: 1rem;
+  .title {
+    color: rgb(80, 80, 80);
+    font-weight: lighter;
+  }
+`;
+
+class GodMode extends Component {
+  state = {
+    firebase: {},
+  };
+
+  componentDidMount() {
+    this.ref = base.bindToState('app', {
+      context: this,
+      state: 'firebase',
+      asArray: false,
+      then: () => console.log(this.state.firebase),
+    });
+  }
+
+  componentWillUnmount() {
+    base.removeBinding(this.ref);
+  }
+
+  render() {
+    const goods = Object.keys(this.state.firebase).map(person => this.state.firebase[person].good);
+    const bads = Object.keys(this.state.firebase).map(person => this.state.firebase[person].bad);
+    const good = [].concat(...goods);
+    const bad = [].concat(...bads);
+
+    return (
+      <Content>
+        <h4 className="title">You are in God mode now 😇 Discuss with other Gods and make our lives better 🌞🦋🌸</h4>
+        <Cards>
+          {good.map(text => (
+            <GodDisplayCard text={text} color={goodColor} margin="10px" />
+          ))}
+        </Cards>
+        <Cards>
+          {bad.map(text => (
+            <GodDisplayCard text={text} color={badColor} margin="10px" />
+          ))}
+        </Cards>
+      </Content>
+    );
+  }
+}
+
+export default GodMode;
diff --git a/src/components/GoodOrBad.js b/src/components/GoodOrBad.js
new file mode 100644
index 0000000..e91bdfa
--- /dev/null
+++ b/src/components/GoodOrBad.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+import AddCard from './AddCard';
+import DisplayCard from './DisplayCard';
+
+const Content = styled.div`
+  display: grid;
+  grid-gap: 1rem;
+
+  justify-items: center;
+`;
+
+class GoodOrBad extends React.Component {
+  render() {
+    return (
+      <Content>
+        <AddCard
+          text={this.props.text}
+          color={this.props.color}
+          addStuff={this.props.addStuff}
+          removeStuff={this.props.removeStuff}
+        />
+        {this.props.textArray.map((text, index) => (
+          <DisplayCard
+            key={text}
+            index={index}
+            text={text}
+            color={this.props.color}
+            removeStuff={this.props.removeStuff}
+          />
+        ))}
+      </Content>
+    );
+  }
+}
+
+export default GoodOrBad;
diff --git a/src/components/Login.js b/src/components/Login.js
index 477c918..1a1e0e4 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -1,12 +1,20 @@
 import React, { Component } from 'react';
+import styled from 'styled-components';
 
+const Content = styled.div`
+  display: grid;
+  width: 100vw;
+  height: 100vh;
+  justify-content: center;
+  align-content: center;
+`;
 class Login extends Component {
   render() {
     return (
-      <div>
-        <h1>Login with Google</h1>
+      <Content>
+        <h3>Login with Google</h3>
         <button onClick={this.props.authenticate}>Login</button>
-      </div>
+      </Content>
     );
   }
 }
diff --git a/src/components/Main.js b/src/components/Main.js
index 3532991..2a4e00b 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -2,26 +2,132 @@ import React from 'react';
 import firebase from 'firebase';
 import base from '../base';
 import styled from 'styled-components';
+import AddCard from './AddCard';
+import DisplayCard from './DisplayCard';
+import GoodOrBad from './GoodOrBad';
+import Number from './Number';
+import { goodColor, badColor } from '../utils/colors';
 
 const Content = styled.div`
   display: grid;
-  width: 100vw;
-  height: 100vh;
+  grid-template-rows: auto;
+  height: 100%;
+  grid-gap: 1rem;
   justify-content: center;
   align-content: center;
+  justify-items: center;
+`;
+
+const Numbers = styled.div`
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-gap: 1rem;
+`;
+
+const Wrapper = styled.div`
+  max-width: 100vw;
+  height: 100vh;
+`;
+
+const AllWrapper = styled.div`
+  .logout {
+    background: var(--bg-color);
+  }
 `;
 
 class Main extends React.Component {
+  state = {
+    good: [],
+    bad: [],
+    isGoodOpen: true,
+  };
+
+  componentDidMount() {
+    this.ref1 = base.syncState(`/app/${this.props.name}/good`, {
+      context: this,
+      state: 'good',
+      asArray: true,
+      then: () => console.log(this.state),
+    });
+    this.ref2 = base.syncState(`/app/${this.props.name}/bad`, {
+      context: this,
+      state: 'bad',
+      asArray: true,
+      then: () => console.log(this.state),
+    });
+  }
+
+  componentWillUnmount() {
+    base.removeBinding(this.ref1);
+    base.removeBinding(this.ref2);
+  }
+
+  setGood = good => {
+    this.setState(prevState => ({ good: [good, ...prevState.good] }));
+  };
+  removeGood = index => {
+    const good = [...this.state.good];
+    good.splice(index, 1);
+    this.setState({ good });
+  };
+  removeBad = index => {
+    const bad = [...this.state.bad];
+    bad.splice(index, 1);
+    this.setState({ bad });
+  };
+
+  setBad = bad => {
+    this.setState({ bad: [bad, ...this.state.bad] });
+  };
+
+  setIsGoodOpen = number => {
+    console.log('setIsGoodOpen');
+    console.log(number);
+
+    if (number === '1') {
+      this.setState({ isGoodOpen: true });
+    } else {
+      this.setState({ isGoodOpen: false });
+    }
+  };
+
   render() {
     const { name, logout } = this.props;
     const firstName = name.replace(/ .*/, '');
     return (
-      <Content>
-        <div>
-          <h1>Hello {firstName}!</h1>
-          <button onClick={this.props.logout}>Logout</button>
-        </div>
-      </Content>
+      <AllWrapper>
+        <Wrapper>
+          <Content>
+            <h1>
+              Waddup {firstName} <span>😎</span>
+            </h1>
+            <Numbers>
+              <Number number="1" color={goodColor} setIsGoodOpen={this.setIsGoodOpen} />
+              <Number number="2" color={badColor} setIsGoodOpen={this.setIsGoodOpen} />
+            </Numbers>
+            {this.state.isGoodOpen ? (
+              <GoodOrBad
+                text="What did you enjoy during the past couple of weeks? 🤩"
+                color={goodColor}
+                textArray={this.state.good}
+                addStuff={this.setGood}
+                removeStuff={this.removeGood}
+              />
+            ) : (
+              <GoodOrBad
+                text="What are the things that were blocking you or anything that you want to be improved? 💪"
+                color={badColor}
+                textArray={this.state.bad}
+                addStuff={this.setBad}
+                removeStuff={this.removeBad}
+              />
+            )}
+          </Content>
+        </Wrapper>
+        <button className="logout" onClick={this.props.logout}>
+          Logout
+        </button>
+      </AllWrapper>
     );
   }
 }
diff --git a/src/components/Number.js b/src/components/Number.js
new file mode 100644
index 0000000..697c97f
--- /dev/null
+++ b/src/components/Number.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Content = styled.div`
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  color: white;
+  background: ${props => props.color};
+  p {
+    margin: 0;
+    padding: 2px;
+  }
+`;
+
+class Number extends React.Component {
+  render() {
+    return (
+      <Content color={this.props.color} onClick={() => this.props.setIsGoodOpen(this.props.number)}>
+        <p>{this.props.number}</p>
+      </Content>
+    );
+  }
+}
+
+export default Number;
diff --git a/src/components/View.js b/src/components/View.js
new file mode 100644
index 0000000..ece18bc
--- /dev/null
+++ b/src/components/View.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const View = ({ title, children }) => (
+  <section>
+    <h1>{title}</h1>
+    {children}
+  </section>
+);
+
+View.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default View;
diff --git a/src/components/icons/Google.js b/src/components/icons/Google.js
new file mode 100644
index 0000000..8681d69
--- /dev/null
+++ b/src/components/icons/Google.js
@@ -0,0 +1,29 @@
+import React from 'react';
+
+const Google = props => {
+  return (
+    <svg width="21" height="21" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M17.64 9.205c0-.639-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"
+          fill="#4285F4"
+        />
+        <path
+          d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z"
+          fill="#34A853"
+        />
+        <path
+          d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z"
+          fill="#FBBC05"
+        />
+        <path
+          d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z"
+          fill="#EA4335"
+        />
+        <path d="M0 0h18v18H0z" />
+      </g>
+    </svg>
+  );
+};
+
+export default Google;
diff --git a/src/utils/colors.js b/src/utils/colors.js
new file mode 100644
index 0000000..7155a9c
--- /dev/null
+++ b/src/utils/colors.js
@@ -0,0 +1,2 @@
+export const goodColor = '#0055FF';
+export const badColor = '#FF0088';
