diff --git a/.babelrc b/.babelrc
index f39067037..557c60187 100644
--- a/.babelrc
+++ b/.babelrc
@@ -12,9 +12,9 @@
   },
   "plugins": [
     [
-      "lodash",
+      "emotion",
       {
-        "id": ["lodash", "semantic-ui-react"]
+        "inline": true
       }
     ]
   ]
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..1a62086d8
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index d05f5f2d1..7a82b5398 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,10 +45,7 @@ node_modules
 
 # IDE - VSCode
 .vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
+jsconfig.json
 
 ### Linux ###
 *~
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..aa41fe5d7
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true
+}
diff --git a/.yarnclean b/.yarnclean
new file mode 100644
index 000000000..b591611ea
--- /dev/null
+++ b/.yarnclean
@@ -0,0 +1,45 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+appveyor.yml
+circle.yml
+codeship-services.yml
+codeship-steps.yml
+wercker.yml
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.travis.yml
+
+# misc
+*.md
diff --git a/README.md b/README.md
index 6958413d8..07212ca24 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
 This project mainly uses
 
 - [Next.js](https://github.com/zeit/next.js/)
-- [Semantic UI React](http://react.semantic-ui.com/introduction)
+- [emotion](https://emotion.sh) As css-in-js library
 
 ### [Join our community here](https://www.coderplex.org)
 
diff --git a/__tests__/__snapshots__/common-banner.test.js.snap b/__tests__/__snapshots__/common-banner.test.js.snap
deleted file mode 100644
index bf1ab05a1..000000000
--- a/__tests__/__snapshots__/common-banner.test.js.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Testing CommonBanner of \`components/common-banner\` Check the snapshot 1`] = `
-<div
-  className="jsx-1924801089"
->
-  <div
-    className="jsx-1924801089 root"
-  >
-    <h1
-      className="jsx-1924801089 headline"
-    />
-    <h2
-      className="jsx-1924801089"
-    />
-  </div>
-  <JSXStyle
-    css=".root.jsx-1924801089{background-color:#f4f7fb;min-height:150px;text-align:center;padding-top:30px;padding-bottom:30px;}.headline.jsx-1924801089{font-size:4em;color:#df1cb5;font-weight:900;}h2.jsx-1924801089{max-width:1024px;margin-left:auto;margin-right:auto;-webkit-letter-spacing:2px;-moz-letter-spacing:2px;-ms-letter-spacing:2px;letter-spacing:2px;line-height:2;}@media (max-width:720px){h2.jsx-1924801089{font-size:14px;padding:0 10px;}}"
-    styleId="1924801089"
-  />
-</div>
-`;
diff --git a/__tests__/__snapshots__/header.test.js.snap b/__tests__/__snapshots__/header.test.js.snap
new file mode 100644
index 000000000..784cae512
--- /dev/null
+++ b/__tests__/__snapshots__/header.test.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing Header of \`components/header\` Check the snapshot 1`] = `<NavBar />`;
diff --git a/__tests__/common-banner.test.js b/__tests__/common-banner.test.js
deleted file mode 100644
index db15756d8..000000000
--- a/__tests__/common-banner.test.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import CommonBanner from '../components/common-banner';
-
-describe('Testing CommonBanner of `components/common-banner`', () => {
-  const shallowWrapper = shallow(<CommonBanner />);
-
-  it('Check the snapshot', () => {
-    expect(shallowWrapper).toMatchSnapshot();
-  });
-
-  it('should have title tag rendered', () => {
-    expect(shallowWrapper.find('h1').length).toBe(1);
-  });
-
-  it('should have subtitle tag rendered', () => {
-    expect(shallowWrapper.find('h2').length).toBe(1);
-  });
-
-  describe('should render the props', () => {
-    const pageTitle = 'title of the page';
-    const pageSubTitle = 'Subtitle of the page';
-    const rootWrapper = shallow(
-      <CommonBanner pageTitle={pageTitle} pageSubTitle={pageSubTitle} />,
-    );
-
-    it('should display title', () => {
-      const headerElement = rootWrapper.find('.headline');
-      expect(headerElement.props().children).toEqual(pageTitle);
-    });
-
-    it('should display subtitle', () => {
-      const subHeaderElement = rootWrapper.find('h2');
-      expect(subHeaderElement.props().children).toEqual(pageSubTitle);
-    });
-  });
-});
diff --git a/__tests__/header.test.js b/__tests__/header.test.js
new file mode 100644
index 000000000..f005482b0
--- /dev/null
+++ b/__tests__/header.test.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Header from '../components/common/header';
+
+describe('Testing Header of `components/header`', () => {
+  const shallowWrapper = shallow(<Header />);
+
+  it('Check the snapshot', () => {
+    expect(shallowWrapper).toMatchSnapshot();
+  });
+  /**
+   * Disable for now
+    it('should have title tag rendered', () => {
+      expect(shallowWrapper.find('h1').length).toBe(1);
+    });
+
+    it('should have subtitle tag rendered', () => {
+      expect(shallowWrapper.find('h2').length).toBe(1);
+    });
+
+    describe('should render the props', () => {
+      const pageTitle = 'title of the page';
+      const pageSubTitle = 'Subtitle of the page';
+      const rootWrapper = shallow(<CommonBanner pageTitle={pageTitle} pageSubTitle={pageSubTitle} />);
+
+      it('should display title', () => {
+        const headerElement = rootWrapper.find('.headline');
+        expect(headerElement.props().children).toEqual(pageTitle);
+      });
+
+      it('should display subtitle', () => {
+        const subHeaderElement = rootWrapper.find('h2');
+        expect(subHeaderElement.props().children).toEqual(pageSubTitle);
+      });
+    });
+   */
+});
diff --git a/__tests__/index.test.js b/__tests__/index.test.js
deleted file mode 100644
index 6e9a7a543..000000000
--- a/__tests__/index.test.js
+++ /dev/null
@@ -1,5 +0,0 @@
-describe('Setting up jest', () => {
-  it('Runs tests', () => {
-    expect('foo').toEqual('foo');
-  });
-});
diff --git a/components/common-banner.js b/components/common-banner.js
deleted file mode 100644
index e8a0b09b9..000000000
--- a/components/common-banner.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-
-export default props => (
-  <div>
-    <div className="root">
-      <h1 className="headline">{props.pageTitle}</h1>
-      <h2>{props.pageSubTitle}</h2>
-    </div>
-    <style jsx>{`
-      .root {
-        background-color: #f4f7fb;
-        min-height: 150px;
-        text-align: center;
-        padding-top: 30px;
-        padding-bottom: 30px;
-      }
-      .headline {
-        font-size: 4em;
-        color: #df1cb5;
-        font-weight: 900;
-      }
-      h2 {
-        max-width: 1024px;
-        margin-left: auto;
-        margin-right: auto;
-        letter-spacing: 2px;
-        line-height: 2;
-      }
-      @media (max-width: 720px) {
-        h2 {
-          font-size: 14px;
-          padding: 0 10px;
-        }
-      }
-    `}</style>
-  </div>
-);
diff --git a/components/common/banner.js b/components/common/banner.js
new file mode 100644
index 000000000..1fc84fa50
--- /dev/null
+++ b/components/common/banner.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
+
+import { Container, Title, SubTitle } from '../../utils/base.styles';
+
+const BannerSection = styled.section`
+  background: #fbfbfb;
+  background-image: url('https://res.cloudinary.com/coderplex/image/upload/v1510788480/website__assets/pattern.png');
+  min-height: 150px;
+  text-align: center;
+  ${space};
+`;
+
+export default ({ title, subTitle, textInverted = false }) => (
+  <BannerSection py={[2, 3]} px={[2, 1]}>
+    <Container>
+      <Title inverted={textInverted}>{title}</Title>
+      <SubTitle inverted={textInverted}>{subTitle}</SubTitle>
+    </Container>
+  </BannerSection>
+);
diff --git a/components/common/footer/index.js b/components/common/footer/index.js
new file mode 100644
index 000000000..5285ba07c
--- /dev/null
+++ b/components/common/footer/index.js
@@ -0,0 +1,235 @@
+import React from 'react';
+import styled from 'react-emotion';
+import { Flex, Box } from 'grid-emotion';
+import FaFacebook from 'react-icons/lib/fa/facebook';
+import FaYoutube from 'react-icons/lib/fa/youtube-play';
+import FaGithub from 'react-icons/lib/fa/github-alt';
+import FaInstagram from 'react-icons/lib/fa/instagram';
+import FaTwitter from 'react-icons/lib/fa/twitter';
+
+import { Container, baseButton } from '../../../utils/base.styles';
+import { baseEventsURL, subscribeURL } from '../../../utils/urls';
+
+const Footer = styled.footer`
+  background: #222;
+  color: #fff;
+  @media (max-width: 480px) {
+    .follow {
+      background: #111;
+    }
+  }
+`;
+
+const SocialLinks = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+`;
+
+const SocialLink = styled.li`
+  margin: 0 10px;
+  & a {
+    width: 50px;
+    height: 50px;
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    text-decoration: none;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    transition: all 0.25s;
+    font-weight: bold;
+    &:hover {
+      background: #fff;
+      color: #314159;
+    }
+    @media (max-width: 480px) {
+      margin: 10px;
+    }
+  }
+`;
+
+const Title = styled.h3`
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 1.1rem;
+  font-weight: 300;
+  color: #fff;
+  @media (max-width: 1000px) {
+    margin-bottom: 10px;
+  }
+  @media (max-width: 780px) {
+    font-size: 1rem;
+    line-height: 1.8rem;
+  }
+`;
+
+const Form = styled.form`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  text-align: center;
+  & input {
+    border: none;
+    margin-right: 10px;
+    padding: 10px;
+    width: 240px;
+    font-size: 1rem;
+  }
+  & button {
+    ${baseButton};
+    padding: 0.6rem 1rem;
+    font-size: 1rem;
+    border: none;
+    outline: none;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    @media (max-width: 401px) {
+      margin-top: 20px;
+    }
+  }
+`;
+
+const Message = styled.div`
+  width: 300px;
+  color: #fff;
+  font-weight: bold;
+  background: #888;
+  text-align: center;
+  margin: 15px 0 0 0;
+  display: none;
+  & h4 {
+    margin: 5px;
+  }
+  &.error {
+    display: block;
+    background: tomato;
+  }
+`;
+
+export default class FooterBar extends React.Component {
+  state = {
+    subscribersEmail: '',
+    submittingEmail: false,
+    emailSubmittingError: '',
+    subscriberEmailPosted: false,
+  };
+  handleChange = event => {
+    this.setState({
+      subscribersEmail: event.target.value,
+      emailSubmittingError: '',
+    });
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    console.log('submitting....');
+    this.setState({ emailSubmittingError: '' });
+    const emailRegx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    const email = this.state.subscribersEmail;
+    if (!email) {
+      this.setState({
+        emailSubmittingError: 'Please enter a email',
+      });
+      return;
+    }
+    if (!emailRegx.test(email)) {
+      this.setState({
+        emailSubmittingError: 'Please enter a valid email',
+      });
+      return;
+    }
+    this.postSubscriberEmail(email);
+  };
+
+  async postSubscriberEmail(subscribersEmail) {
+    await this.setState({ submittingEmail: true });
+    const postSubscriberEmailRequest = await fetch(`${baseEventsURL}${subscribeURL}`, {
+      method: 'post',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email: subscribersEmail }),
+    });
+    if (postSubscriberEmailRequest.status === 200) {
+      this.setState({
+        subscriberEmailPosted: true,
+        submittingEmail: false,
+        emailSubmittingError: '',
+      });
+    } else {
+      this.setState({
+        submittingEmail: false,
+        emailSubmittingError: 'Submission Failed Try Again.',
+      });
+    }
+  }
+  render() {
+    return (
+      <Footer>
+        <Container>
+          <Flex wrap py={[0, 3]}>
+            <Flex align="center" direction="column" justify="center" width={[1, 1, 1 / 2]} px={[2, 3]} py={[3, 0]}>
+              <Title>We are constantly updating our platform. Do subscribe to stay informed.</Title>
+              {this.state.subscriberEmailPosted ? (
+                <h3>Thank you, we will keep you posted</h3>
+              ) : (
+                <Form onSubmit={this.handleSubmit}>
+                  <input
+                    disabled={this.state.submittingEmail}
+                    onChange={this.handleChange}
+                    type="text"
+                    placeholder="Enter your email..."
+                  />
+                  <button type="submit" disabled={this.state.submittingEmail}>
+                    {this.state.submittingEmail ? 'Subscribing...' : 'Subscribe'}
+                  </button>
+                </Form>
+              )}
+              <Message className={this.state.emailSubmittingError ? 'error' : ''}>
+                <p>{this.state.emailSubmittingError}</p>
+              </Message>
+            </Flex>
+            <Flex className="follow" align="center" justify="center" width={[1, 1, 1 / 2]}>
+              <Box p={[1, 2]}>
+                <Title>Follow Us</Title>
+                <SocialLinks>
+                  <SocialLink>
+                    <a href="https://www.youtube.com/channel/UCTkguToherUvVNnzMFINk-w">
+                      <FaYoutube size={20} />
+                    </a>
+                  </SocialLink>
+                  <SocialLink>
+                    <a href="https://www.facebook.com/coderplex">
+                      <FaFacebook size={20} />
+                    </a>
+                  </SocialLink>
+                  <SocialLink>
+                    <a href="https://github.com/coderplex">
+                      <FaGithub size={20} />
+                    </a>
+                  </SocialLink>
+                  <SocialLink>
+                    <a href="https://www.twitter.com/coderplex/">
+                      <FaTwitter size={20} />
+                    </a>
+                  </SocialLink>
+                  <SocialLink>
+                    <a href="https://www.instagram.com/coderplex/">
+                      <FaInstagram size={20} />
+                    </a>
+                  </SocialLink>
+                </SocialLinks>
+              </Box>
+            </Flex>
+          </Flex>
+        </Container>
+      </Footer>
+    );
+  }
+}
diff --git a/components/common/header/index.js b/components/common/header/index.js
new file mode 100644
index 000000000..6a8192b91
--- /dev/null
+++ b/components/common/header/index.js
@@ -0,0 +1,118 @@
+import React from 'react';
+import Router, { withRouter } from 'next/router';
+import Headroom from 'react-headroom';
+import NProgress from 'nprogress';
+import Link from 'next/link';
+
+import MetaInfo from '../../../config/meta-info';
+import { Container } from '../../../utils/base.styles';
+import Meta from '../meta';
+import { Header, Nav, NavLinks, NavLink, NavLogo, MobileMenuBtn } from './index.styles';
+
+Router.onRouteChangeStart = () => {
+  NProgress.start();
+};
+
+Router.onRouteChangeComplete = () => {
+  NProgress.done();
+};
+
+Router.onRouteChangeError = () => {
+  NProgress.done();
+};
+
+// Adds server generated styles to emotion cache.
+// '__NEXT_DATA__.ids' is set in '_document.js'
+// if (typeof window !== 'undefined' && window.__NEXT_DATA__) {
+//   hydrate(window.__NEXT_DATA__.ids);
+// }
+
+class NavBar extends React.Component {
+  state = {
+    menuOpen: false,
+    navItems: [
+      {
+        title: 'Learn',
+        path: '/learn',
+        external: false,
+      },
+      {
+        title: 'Space',
+        path: '/space',
+        external: false,
+      },
+      {
+        title: 'Events',
+        path: '/events',
+        external: false,
+      },
+      {
+        title: 'Blog',
+        path: 'https://coderplex.org/blog',
+        external: true,
+      },
+    ],
+  };
+  toggleMenu = e => {
+    e.preventDefault();
+    this.setState(state => {
+      return { menuOpen: !state.menuOpen };
+    });
+  };
+  render() {
+    const pathName = this.props.router.pathname;
+    const metaData = MetaInfo[pathName === '/' ? 'home' : pathName.split('/')[1]];
+    const title = metaData.title;
+    const description = metaData.description;
+    const image = metaData.image;
+    return (
+      <Headroom>
+        <Header>
+          <Meta title={title} description={description} image={image} />
+          <Container>
+            <Nav>
+              <MobileMenuBtn onClick={this.toggleMenu} className={this.state.menuOpen ? 'open' : ''}>
+                <span>Menu</span>
+              </MobileMenuBtn>
+              <NavLogo>
+                <Link href="/">
+                  <img
+                    src="https://res.cloudinary.com/coderplex/image/upload/c_scale,w_45/v1510788480/website__assets/logo.png"
+                    alt="coderplex_logo"
+                  />
+                </Link>
+              </NavLogo>
+              <NavLinks className={this.state.menuOpen ? 'open' : ''}>
+                {this.state.navItems.filter(item => !item.external).map(item => (
+                  <NavLink key={item.path}>
+                    <Link href={item.path}>
+                      <a className={pathName === item.path ? 'active' : ''}>
+                        <span>{item.title}</span>
+                      </a>
+                    </Link>
+                  </NavLink>
+                ))}
+                {this.state.navItems.filter(item => item.external).map(item => (
+                  <NavLink key={item.path}>
+                    <a href={item.path} rel="noopener noreferrer" className={pathName === item.path ? 'active' : ''}>
+                      <span>{item.title}</span>
+                    </a>
+                  </NavLink>
+                ))}
+                <NavLink>
+                  <Link href="/login">
+                    <a className={pathName === '/login' ? 'btn active' : 'btn'}>
+                      <span>Login / Signup</span>
+                    </a>
+                  </Link>
+                </NavLink>
+              </NavLinks>
+            </Nav>
+          </Container>
+        </Header>
+      </Headroom>
+    );
+  }
+}
+
+export default withRouter(NavBar);
diff --git a/components/common/header/index.styles.js b/components/common/header/index.styles.js
new file mode 100644
index 000000000..c94444ea1
--- /dev/null
+++ b/components/common/header/index.styles.js
@@ -0,0 +1,228 @@
+import styled, { injectGlobal } from 'react-emotion';
+
+export const Header = styled.header`
+  padding: 2px 10px;
+  width: 100%;
+  background: #fff;
+  z-index: 1000;
+  border-bottom: 1px solid #eee;
+`;
+
+export const Nav = styled.nav`
+  display: flex;
+  height: 55px;
+  align-items: center;
+  position: relative;
+  @media (max-width: 885px) {
+    justify-content: center;
+  }
+`;
+
+export const NavLogo = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  & img {
+    width: 45px;
+    height: 45px;
+    margin-right: 5px;
+    cursor: pointer;
+  }
+  @media (max-width: 885px) {
+    flex: initial;
+  }
+`;
+
+export const NavLinks = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex: 3;
+  justify-content: flex-end;
+  display: flex;
+  align-items: center;
+  @media (max-width: 885px) {
+    height: auto;
+    flex-direction: column;
+    width: 100%;
+    position: fixed;
+    z-index: -1;
+    top: -600%;
+    left: 0;
+    background: #fbfbfb;
+    border-bottom: 1px solid #eee;
+    font-size: 10px;
+    transition: all 0.25s;
+    &.open {
+      top: 60px;
+    }
+  }
+`;
+
+export const NavLink = styled.li`
+  height: inherit;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  margin: 0 20px;
+  @media(max-width: 885px) {
+    width: 100%;
+    border-top: 1px solid #eee;
+  }
+  & a {
+    text-decoration: none;
+    color: #525c65;
+    font-size: 0.9rem;
+    line-height: 1.9rem;
+    padding: 0.5rem 1rem;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-transform: capitalize;
+    transition: all 0.25s
+    letter-spacing: 1px;
+    will-change: color, background, box-shadow;
+    &:hover {
+      color: #222;
+      text-shadow:0.8px 0px 0px #222
+      @media(max-width: 885px) {
+        color: #222;
+      }
+    }
+    &.active {
+      pointer-events: none;
+      color: #222;
+      text-shadow:0.8px 0px 0px #222
+    }
+    &.btn {
+      color: #7657fb;
+      @media(max-width: 885px) {
+        background: transparent;
+        color: #888;
+        padding: 0.5rem 1rem;
+        &:hover {
+          color: #222;
+          background: transparent;
+        }
+      }
+    }
+    @media(max-width: 885px) {
+      width: 100%;
+      font-size: 14px;
+      font-weight: bold;
+      padding: 12px 15px;
+      color: #888;
+    }
+  }
+`;
+
+export const MobileMenuBtn = styled.a`
+  display: none;
+  text-decoration: none;
+  width: 32px;
+  height: 24px;
+  cursor: pointer;
+  top: 15px;
+  left: 5px;
+  position: absolute;
+  z-index: 1;
+  & span {
+    position: absolute;
+    width: 100%;
+    overflow: hidden;
+    height: 2px;
+    border-radius: 4px;
+    background: #888;
+    top: 50%;
+    transition: all 0.5s;
+    transform: translate3d(-2px, 0, 0) scale3d(0.6, 1, 1);
+  }
+  &::after,
+  &:before {
+    content: '';
+    width: 100%;
+    height: 2px;
+    border-radius: 4px;
+    position: absolute;
+    background: #888;
+    top: 50%;
+    transition: transform 0.5s;
+    transform-origin: 50% 50%;
+  }
+  &:before {
+    transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
+  }
+  &:after {
+    transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
+  }
+  &.open {
+    & span {
+      transform: translate3d(-2px, 0, 0) scale3d(0, 1, 1);
+    }
+    &:before {
+      transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 1, 1);
+    }
+    &:after {
+      transform: rotate3d(0, 0, 1, 45deg) scale3d(0.8, 1, 1);
+    }
+  }
+  @media (max-width: 885px) {
+    display: block;
+  }
+`;
+
+/* eslint-disable no-unused-expressions */
+injectGlobal`
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+  body {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.428rem;
+    background: #fafafa;
+    font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
+      Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
+      'Helvetica Neue', sans-serif;
+    font-weight: 400;
+    color: #444;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  #nprogress {
+    pointer-events: none;
+  }
+  #nprogress .bar {
+    background: #aa97fb;
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+  }
+  #nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0px;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px #aa97fb, 0 0 5px #aa97fb;
+    opacity: 1;
+    transform: rotate(3deg) translate(0px, -4px);
+  }
+  .headroom--pinned header {
+    box-shadow: 0 2px 4px rgba(61, 71, 82, 0.1);
+  }
+  .headroom--scrolled {
+    z-index: 99999 !important;
+  }
+`;
+/* eslint-enable no-unused-expressions */
diff --git a/components/common/layout.js b/components/common/layout.js
new file mode 100644
index 000000000..06e724175
--- /dev/null
+++ b/components/common/layout.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Header from './header';
+import Footer from './footer';
+
+export default ({ children }) => (
+  <div>
+    <Header />
+    {children}
+    <Footer />
+  </div>
+);
diff --git a/components/common/meta.js b/components/common/meta.js
new file mode 100644
index 000000000..0e8f99735
--- /dev/null
+++ b/components/common/meta.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import Head from 'next/head';
+
+export default ({ title, description, image }) => {
+  return (
+    <Head>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width,initial-scale=1" />
+      <meta name="mobile-web-app-capable" content="yes" />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+      <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png" />
+      <link rel="icon" type="image/png" href="/static/favicons/favicon-32x32.png" sizes="32x32" />
+      <link rel="icon" type="image/png" href="/static/favicons/favicon-16x16.png" sizes="16x16" />
+      <link rel="manifest" href="/static/favicons/manifest.json" />
+      <link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#c201b9" />
+      <link rel="shortcut icon" href="/static/favicons/favicon.ico" />
+      <link
+        rel="stylesheet"
+        href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"
+      />
+      <meta name="msapplication-config" content="/static/favicons/browserconfig.xml" />
+      <meta name="theme-color" content="#c201b9" />
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content={title} />
+      <meta property="og:url" content="https://coderplex.org" />
+      <meta property="og:image" content={image || 'https://coderplex.org/static/favicons/android-chrome-512x512.png'} />
+      <meta property="og:site_name" content="coderplex.org" />
+      <meta property="og:description" content={description} />
+    </Head>
+  );
+};
diff --git a/components/content-loaders.js b/components/content-loaders.js
deleted file mode 100644
index 95d03654a..000000000
--- a/components/content-loaders.js
+++ /dev/null
@@ -1,243 +0,0 @@
-import React from 'react';
-
-export const CardContentLoader = () => (
-  <div className="root">
-    <div className="main">
-      <div className="animation-background">
-        <div className="background-masker header-right" />
-        <div className="background-masker subheader-bottom" />
-        <div className="background-masker content-first-end" />
-        <div className="background-masker content-second-line" />
-        <div className="background-masker content-third-end" />
-      </div>
-    </div>
-    <style jsx>{`
-      @keyframes placeHolderShimmer {
-        0% {
-          background-position: -468px 0;
-        }
-        100% {
-          background-position: 468px 0;
-        }
-      }
-
-      .root {
-        color: #141823;
-        padding: 20px;
-      }
-
-      .main {
-        background: #fff;
-        border: 1px solid;
-        border-color: #e5e6e9 #dfe0e4 #d0d1d5;
-        border-radius: 3px;
-        padding: 12px;
-        margin: 0 auto;
-        max-width: 600px;
-        min-height: 120px;
-      }
-
-      .animation-background {
-        animation-duration: 1s;
-        animation-fill-mode: forwards;
-        animation-iteration-count: infinite;
-        animation-name: placeHolderShimmer;
-        animation-timing-function: linear;
-        background: #f6f7f8;
-        background: #eeeeee;
-        background: linear-gradient(
-          to right,
-          #eeeeee 8%,
-          #dddddd 18%,
-          #eeeeee 33%
-        );
-        background-size: 800px 104px;
-        height: 96px;
-        position: relative;
-      }
-
-      .background-masker {
-        background: #fff;
-        position: absolute;
-        box-sizing: border-box;
-      }
-
-      .outlined .background-masker {
-        border: 1px solid #ddd;
-      }
-
-      .outlined:hover .background-masker {
-        border: none;
-      }
-
-      .outlined:hover .background-masker:hover {
-        border: 1px solid #ccc;
-        z-index: 1;
-      }
-
-      .background-masker.header-top,
-      .background-masker.header-bottom,
-      .background-masker.subheader-bottom {
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 20px;
-      }
-
-      .background-masker.header-left,
-      .background-masker.subheader-left,
-      .background-masker.header-right,
-      .background-masker.subheader-right {
-        top: 00px;
-        left: 40px;
-        height: 30px;
-        width: 10px;
-      }
-
-      .background-masker.header-bottom {
-        top: 18px;
-        height: 6px;
-      }
-
-      .background-masker.subheader-right {
-        top: 24px;
-        height: 18px;
-      }
-
-      .background-masker.header-right,
-      .background-masker.subheader-right {
-        width: auto;
-        left: 300px;
-        right: 0;
-      }
-
-      .background-masker.subheader-right {
-        left: 230px;
-      }
-
-      .background-masker.subheader-bottom {
-        top: 30px;
-        height: 25px;
-      }
-
-      .background-masker.content-top,
-      .background-masker.content-second-line,
-      .background-masker.content-third-line,
-      .background-masker.content-second-end,
-      .background-masker.content-third-end,
-      .background-masker.content-first-end {
-        top: 40px;
-        left: 0;
-        right: 0;
-        height: 6px;
-      }
-
-      .background-masker.content-top {
-        height: 20px;
-      }
-
-      .background-masker.content-first-end,
-      .background-masker.content-second-end {
-        width: auto;
-        left: 180px;
-        right: 0;
-        top: 40px;
-        height: 30px;
-      }
-      .background-masker.content-third-end {
-        width: auto;
-        right: 0;
-        height: 10px;
-      }
-
-      .background-masker.content-second-line {
-        top: 68px;
-        height: 20px;
-      }
-
-      .background-masker.content-second-end {
-        left: 420px;
-        top: 74px;
-      }
-
-      .background-masker.content-third-line {
-        top: 82px;
-      }
-
-      .background-masker.content-third-end {
-        left: 500px;
-        top: 88px;
-      }
-    `}</style>
-  </div>
-);
-
-export const TextContentLoader = props => (
-  <div className="root">
-    <div className="animation-background">
-      <div className="background-masker subheader-right" />
-    </div>
-    <style jsx>{`
-      @keyframes placeHolderShimmer {
-        0% {
-          background-position: -468px 0;
-        }
-        100% {
-          background-position: 468px 0;
-        }
-      }
-
-      .root {
-        background: #fff;
-        padding-top: ${props.topPadding};
-        margin: 0 auto;
-        max-width: 600px;
-      }
-
-      .animation-background {
-        animation-duration: 1s;
-        animation-fill-mode: forwards;
-        animation-iteration-count: infinite;
-        animation-name: placeHolderShimmer;
-        animation-timing-function: linear;
-        background: #f6f7f8;
-        background: #eeeeee;
-        background: linear-gradient(
-          to right,
-          #eeeeee 8%,
-          #dddddd 18%,
-          #eeeeee 33%
-        );
-        background-size: 800px 104px;
-        height: 20px;
-        position: relative;
-      }
-
-      .background-masker {
-        background: #fff;
-        position: absolute;
-        box-sizing: border-box;
-      }
-
-      .outlined .background-masker {
-        border: 1px solid #ddd;
-      }
-
-      .outlined:hover .background-masker {
-        border: none;
-      }
-
-      .outlined:hover .background-masker:hover {
-        border: 1px solid #ccc;
-        z-index: 1;
-      }
-
-      .background-masker.subheader-right {
-        top: 0px;
-        right: 0px;
-        height: 30px;
-        width: 300px;
-      }
-    `}</style>
-  </div>
-);
diff --git a/components/events/event-card.js b/components/events/event-card.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/footer.js b/components/footer.js
deleted file mode 100644
index b8dc8b4ea..000000000
--- a/components/footer.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import FaFacebook from 'react-icons/lib/fa/facebook';
-import FaYoutube from 'react-icons/lib/fa/youtube-play';
-import FaGithub from 'react-icons/lib/fa/github-alt';
-import FaInstagram from 'react-icons/lib/fa/instagram';
-import FaTwitter from 'react-icons/lib/fa/twitter';
-
-export default () => (
-  <footer>
-    <div className="footer__container">
-      <div className="footer__content">
-        <h3>Follow Us</h3>
-        <ul>
-          <li>
-            <a href="https://www.youtube.com/channel/UCZ2EgRcIyY8lcHz0c5-lOUw">
-              <FaYoutube size={20} />
-            </a>
-          </li>
-          <li>
-            <a href="https://www.facebook.com/coderplex">
-              <FaFacebook size={20} />
-            </a>
-          </li>
-          <li>
-            <a href="https://github.com/coderplex">
-              <FaGithub size={20} />
-            </a>
-          </li>
-          <li>
-            <a href="https://www.instagram.com/coderplex/">
-              <FaInstagram size={20} />
-            </a>
-          </li>
-          <li>
-            <a href="https://www.twitter.com/coderplex/"><FaTwitter size={20}/></a>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <style jsx>{`
-      footer {
-        padding: 50px 0;
-        background: #c454df linear-gradient(to bottom, #ec53ab, #d354cf);
-        color: #fff;
-      }
-      .footer__container {
-        max-width: 1280px;
-        margin: 0 auto;
-      }
-      .footer__content {
-        text-align: center;
-      }
-      ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: flex;
-        justify-content: center;
-        flex-wrap: wrap;
-      }
-      ul li {
-        margin: 0 10px;
-      }
-      ul li a {
-        width: 50px;
-        height: 50px;
-        padding: 10px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #fff;
-        text-decoration: none;
-        border: 1px solid #fff;
-        border-radius: 50%;
-        transition: all 0.25s;
-        font-weight: bold;
-      }
-      ul li a:hover {
-        background: #fff;
-        color: #314159;
-      }
-    `}</style>
-  </footer>
-);
diff --git a/components/global-styles.js b/components/global-styles.js
deleted file mode 100644
index 317d5179a..000000000
--- a/components/global-styles.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import React from 'react';
-
-export default () => (
-  <div>
-    <style jsx global>{`
-      *,
-      *::after,
-      *::before {
-        box-sizing: border-box;
-      }
-      body {
-        height: 100%;
-        width: 100%;
-        padding: 0;
-        margin: 0;
-        background: #fafafa;
-        font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
-          Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-          'Helvetica Neue', sans-serif;
-        font-weight: 400;
-        color: #444;
-        text-rendering: optimizeLegibility;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
-      #nprogress {
-        pointer-events: none;
-      }
-      #nprogress .bar {
-        background: #f9d1ed;
-        position: fixed;
-        z-index: 1031;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 4px;
-      }
-      /* Fancy blur effect */
-      #nprogress .peg {
-        display: block;
-        position: absolute;
-        right: 0px;
-        width: 100px;
-        height: 100%;
-        box-shadow: 0 0 10px #f9d1ed, 0 0 5px #f9d1ed;
-        opacity: 1;
-        transform: rotate(3deg) translate(0px, -4px);
-      }
-      .headroom--pinned header {
-        box-shadow: 0 2px 4px rgba(61, 71, 82, 0.1);
-      }
-      .headroom--scrolled {
-        z-index: 99999 !important;
-      }
-      .learn_search {
-        padding-top: 40px;
-        padding-bottom: 40px;
-      }
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        text-align: center;
-      }
-      th {
-        background: #f4f6fb;
-        font-weight: bold;
-      }
-      td,
-      th {
-        padding: 6px;
-        border: 1px solid #ccc;
-        text-align: center;
-      }
-      @media only screen and (max-width: 760px),
-        (min-device-width: 768px) and (max-device-width: 1024px) {
-        table,
-        thead,
-        tbody,
-        th,
-        td,
-        tr {
-          display: block;
-          text-align: center;
-          margin-bottom: 10px;
-        }
-
-        thead tr {
-          position: absolute;
-          top: -9999px;
-          left: -9999px;
-        }
-
-        tr {
-          border: 1px solid #ccc;
-          text-align: center;
-        }
-
-        td {
-          border: none;
-          border-bottom: 1px solid #eee;
-          position: relative;
-          padding-left: 50%;
-        }
-
-        td:before {
-          position: absolute;
-          top: 6px;
-          left: 6px;
-          width: 30%;
-          padding-right: 5px;
-          white-space: normal;
-          font-size: 12px;
-          text-align: left;
-        }
-
-        td:nth-of-type(1):before {
-          content: 'Concept';
-        }
-        td:nth-of-type(1) {
-          background: #f4f6fb;
-        }
-        td:nth-of-type(2):before {
-          content: 'Best video';
-        }
-        td:nth-of-type(3):before {
-          content: 'Best text';
-        }
-        td:nth-of-type(4):before {
-          content: 'Duration';
-        }
-        td:nth-of-type(5):before {
-          content: 'Prereq';
-        }
-      }
-    `}</style>
-  </div>
-);
diff --git a/components/head.js b/components/head.js
deleted file mode 100644
index c85ae2430..000000000
--- a/components/head.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import Head from 'next/head';
-
-export default ({ title, description, image }) => (
-  <Head>
-    <meta charSet="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="/static/favicons/apple-touch-icon.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="/static/favicons/favicon-32x32.png"
-      sizes="32x32"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="/static/favicons/favicon-16x16.png"
-      sizes="16x16"
-    />
-    <link rel="manifest" href="/static/favicons/manifest.json" />
-    <link
-      rel="mask-icon"
-      href="/static/favicons/safari-pinned-tab.svg"
-      color="#c201b9"
-    />
-    <link rel="shortcut icon" href="/static/favicons/favicon.ico" />
-    <meta
-      name="msapplication-config"
-      content="/static/favicons/browserconfig.xml"
-    />
-    <meta name="theme-color" content="#c201b9" />
-    <link
-      rel="stylesheet"
-      href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"
-    />
-    <title>{title}</title>
-    <meta name="description" content={description} />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content={title} />
-    <meta property="og:url" content="https://coderplex.org" />
-    <meta
-      property="og:image"
-      content={
-        image ||
-        'https://coderplex.org/static/favicons/android-chrome-512x512.png'
-      }
-    />
-    <meta property="og:site_name" content="coderplex.org" />
-    <meta property="og:description" content={description} />
-  </Head>
-);
diff --git a/components/header.js b/components/header.js
deleted file mode 100644
index 897372cf4..000000000
--- a/components/header.js
+++ /dev/null
@@ -1,301 +0,0 @@
-import React from 'react';
-import Headroom from 'react-headroom';
-import NProgress from 'nprogress';
-import Router from 'next/router';
-import Link from 'next/link';
-import GoHome from 'react-icons/lib/go/home';
-import GoBook from 'react-icons/lib/md/school';
-import GoStar from 'react-icons/lib/md/library-books';
-import GoCalender from 'react-icons/lib/go/calendar';
-import GoOrg from 'react-icons/lib/go/organization';
-
-import MetaInfo from '../config/meta-info';
-import GlobalStyles from './global-styles';
-import Head from './head';
-
-Router.onRouteChangeStart = () => {
-  NProgress.start();
-};
-
-Router.onRouteChangeComplete = () => {
-  NProgress.done();
-};
-
-Router.onRouteChangeError = () => {
-  NProgress.done();
-};
-
-export default props => {
-  const title =
-    props.url.pathname === '/' ? 'home' : props.url.pathname.split('/')[1];
-  const metaData = MetaInfo[title];
-  const navItems = [
-    {
-      title: 'Home',
-      path: '/',
-      external: false,
-      icon: GoHome,
-    },
-    {
-      title: 'Learn',
-      path: '/learn',
-      external: false,
-      icon: GoBook,
-    },
-    {
-      title: 'Space',
-      path: '/space',
-      external: false,
-      icon: GoOrg,
-    },
-    {
-      title: 'Events',
-      path: '/events',
-      external: false,
-      icon: GoCalender,
-    },
-    {
-      title: 'Blog',
-      path: 'https://coderplex.org/blog',
-      external: true,
-      icon: GoStar,
-    },
-  ];
-  return (
-    <Headroom>
-      <header>
-        <Head
-          title={metaData.title}
-          description={metaData.description}
-          image={metaData.image}
-        />
-        <GlobalStyles />
-        <div className="header__container">
-          <nav>
-            <div className="nav__logo">
-              <Link href="/">
-                <img src="/static/favicons/android-chrome-192x192.png" alt="" />
-              </Link>
-            </div>
-            <input id="menu" type="checkbox" />
-            <label htmlFor="menu" className="mobile__menu">
-              <span>Menu</span>
-            </label>
-            <ul className="nav__links">
-              {navItems.map(item => {
-                return (
-                  <li key={item.title} className="nav__linkItem">
-                    {item.external ? (
-                      <a
-                        href={item.path}
-                        className={`nav__link ${props.url.pathname === item.path
-                          ? 'nav__link--active'
-                          : ''}`}
-                      >
-                        {React.createElement(item.icon)}
-                        <span>{item.title}</span>
-                      </a>
-                    ) : (
-                      <Link href={item.path}>
-                        <a
-                          className={`nav__link ${props.url.pathname ===
-                          item.path
-                            ? 'nav__link--active'
-                            : ''}`}
-                        >
-                          {React.createElement(item.icon)}
-                          <span>{item.title}</span>
-                        </a>
-                      </Link>
-                    )}
-                  </li>
-                );
-              })}
-            </ul>
-          </nav>
-        </div>
-      </header>
-      <style jsx>{`
-        header {
-          padding: 5px 10px;
-          width: 100%;
-          background: #c454df linear-gradient(to top, #ec53ab, #d354cf);
-          z-index: 1000;
-        }
-        .header__container {
-          max-width: 1280px;
-          margin: 0 auto;
-        }
-        nav {
-          display: flex;
-          height: 56px;
-          align-items: center;
-          position: relative;
-        }
-        .nav__logo {
-          flex: 1;
-          display: flex;
-          align-items: center;
-        }
-        .nav__logo img {
-          width: 50px;
-          height: 50px;
-          margin-right: 5px;
-          cursor: pointer;
-        }
-        .nav__links {
-          margin: 0;
-          padding: 0;
-          list-style: none;
-          flex: 2;
-          display: flex;
-          align-items: center;
-        }
-        .nav__linkItem {
-          flex: 1;
-          text-align: center;
-          display: flex;
-          justify-content: center;
-        }
-        .nav__linkItem :global(.dropdown__linkItem) {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        .nav__linkItem img {
-          width: 30px;
-          height: 30px;
-          border-radius: 50%;
-          margin-right: 5px;
-        }
-        .nav__link {
-          text-decoration: none;
-          color: #fff;
-          font-size: 16px;
-          font-weight: bold;
-          padding-bottom: 4px;
-          display: flex;
-          align-items: center;
-        }
-        .nav__link span {
-          margin-left: 5px;
-        }
-        .nav__link:hover {
-          color: #e1e1e1;
-        }
-        .nav__link--active {
-          border-bottom: 2px solid #fff;
-          pointer-events: none;
-        }
-        input[type='checkbox'] {
-          position: absolute;
-          display: none;
-          top: 25px;
-          left: 25px;
-        }
-        .mobile__menu {
-          width: 30px;
-          height: 24px;
-          display: none;
-          cursor: pointer;
-          top: 15px;
-          left: 5px;
-          position: absolute;
-          z-index: 1;
-        }
-        .mobile__menu:after,
-        .mobile__menu:before {
-          content: '';
-          width: 100%;
-          height: 2px;
-          border-radius: 4px;
-          position: absolute;
-          background: #fff;
-          top: 50%;
-          -webkit-transition: -webkit-transform 0.5s;
-          transition: -webkit-transform 0.5s;
-          transition: transform 0.5s;
-          transition: transform 0.5s, -webkit-transform 0.5s;
-          -webkit-transform-origin: 50% 50%;
-          transform-origin: 50% 50%;
-        }
-        .mobile__menu:after {
-          -webkit-transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
-          transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
-        }
-        .mobile__menu:before {
-          -webkit-transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
-          transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
-        }
-        .mobile__menu span {
-          position: absolute;
-          width: 100%;
-          overflow: hidden;
-          height: 2px;
-          border-radius: 4px;
-          background: #fff;
-          top: 50%;
-          -webkit-transition: all 0.5s;
-          transition: all 0.5s;
-        }
-        input[type='checkbox']:checked ~ .mobile__menu span {
-          -webkit-transform: scale3d(0, 1, 1);
-          transform: scale3d(0, 1, 1);
-        }
-        input[type='checkbox']:checked ~ .mobile__menu:after {
-          -webkit-transform: rotate3d(0, 0, 1, 45deg);
-          transform: rotate3d(0, 0, 1, 45deg);
-        }
-        input[type='checkbox']:checked ~ .mobile__menu:before {
-          -webkit-transform: rotate3d(0, 0, 1, -45deg);
-          transform: rotate3d(0, 0, 1, -45deg);
-        }
-        input[type='checkbox']:checked ~ .nav__links {
-          display: flex;
-        }
-        @media (max-width: 700px) {
-          nav {
-            justify-content: center;
-          }
-          .nav__logo {
-            flex: initial;
-          }
-          .mobile__menu {
-            display: block;
-          }
-          input[type='checkbox'] {
-            display: block;
-            opacity: 0;
-          }
-          .nav__links {
-            flex-direction: column;
-            width: 100%;
-            position: fixed;
-            top: 66px;
-            background: #fafafa;
-            display: none;
-            border-bottom: 1px solid #eee;
-            font-size: 10px;
-          }
-          .nav__linkItem {
-            width: 100%;
-            border-top: 1px solid #eee;
-          }
-          .nav__link {
-            width: 100%;
-            font-size: 14px;
-            font-weight: bold;
-            padding: 12px 15px;
-            color: #888;
-          }
-          .nav__link:hover {
-            color: #222;
-          }
-          .nav__link--active {
-            border: none;
-          }
-        }
-      `}</style>
-    </Headroom>
-  );
-};
diff --git a/components/icons.js b/components/icons.js
deleted file mode 100644
index cd77a8c84..000000000
--- a/components/icons.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-
-export const UnderConstructionSVG = props => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-    <path
-      fill="#6B4841"
-      d="M79.448 247.172h35.31v-35.31h-35.31v35.31zm317.793 0h35.31v-35.31h-35.31v35.31zm17.656-176.551c-6.179 0-12.359-1.766-17.655-5.297v40.607h35.31V65.324c-5.297 3.531-11.476 5.297-17.655 5.297m-317.794 0c-6.179 0-12.359-1.766-17.655-5.297v40.607h35.31V65.324c-5.296 3.531-11.475 5.297-17.655 5.297"
-    />
-    <path fill="#556080" d="M0 211.862h512V105.931H0v105.931z" />
-    <path
-      fill="#E15649"
-      d="M132.414 35.31c0-19.421-15.89-35.31-35.31-35.31s-35.31 15.89-35.31 35.31 15.89 35.31 35.31 35.31 35.31-15.889 35.31-35.31"
-    />
-    <path
-      fill="#6B4841"
-      d="M79.448 512h35.31V353.103h-35.31V512zm317.793 0h35.31V353.103h-35.31V512z"
-    />
-    <path fill="#4C2C28" d="M114.759 467.862h282.483v-52.966H114.759v52.966z" />
-    <path
-      fill="#ECBA16"
-      d="M67.972 105.931L0 173.903v37.959h87.393l105.931-105.931H67.972zm143.89 105.931h124.469l105.931-105.931H317.793L211.862 211.862z"
-    />
-    <path
-      fill="#556080"
-      d="M336.331 211.862H460.8l50.317-50.317v-55.614h-69.738L336.331 211.862z"
-    />
-    <path fill="#ECBA16" d="M512 211.862v-50.317l-50.317 50.317H512z" />
-    <path fill="#556080" d="M0 353.103h512V247.172H0v105.931z" />
-    <path
-      fill="#ECBA16"
-      d="M67.972 247.172L0 315.145v37.959h87.393l105.931-105.931H67.972zm143.89 105.931h124.469l105.931-105.931H317.793L211.862 353.103z"
-    />
-    <path
-      fill="#556080"
-      d="M336.331 353.103H460.8l50.317-50.317v-55.614h-69.738L336.331 353.103z"
-    />
-    <path fill="#ECBA16" d="M512 353.103v-50.317l-50.317 50.317H512z" />
-    <path
-      fill="#E15649"
-      d="M379.586 35.31c0-19.421 15.89-35.31 35.31-35.31 19.421 0 35.31 15.89 35.31 35.31s-15.89 35.31-35.31 35.31c-19.42.001-35.31-15.889-35.31-35.31"
-    />
-    <style jsx>{`
-      svg {
-        width: ${props.size};
-        height: ${props.size};
-      }
-    `}</style>
-  </svg>
-);
-
-export const LaravelSVG = props => (
-  <svg
-    version="1.1"
-    id="Layer_1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 700 700"
-  >
-    <path
-      fill="#FB503B"
-      d="M556.8,344.2c-2.9-3.2-42.3-52.6-49.3-61c-7-8.4-10.3-6.9-14.6-6.2s-54.2,9-60,10c-5.8,1-9.4,3.3-5.9,8.3
-      c3.2,4.4,36,51,43.2,61.2l-130.5,31.3L236.1,214.3c-4.1-6.1-5-8.3-14.4-7.8c-9.4,0.4-81.4,6.4-86.5,6.8c-5.1,0.4-10.8,2.7-5.6,14.8
-      c5.1,12.1,86.9,188.3,89.2,193.4c2.3,5.1,8.2,13.4,22.1,10.1c14.2-3.4,63.5-16.3,90.4-23.3c14.2,25.8,43.3,78,48.6,85.5
-      c7.2,10,12.1,8.3,23.1,5c8.6-2.6,134.4-47.8,140.1-50.2c5.7-2.3,9.2-4,5.3-9.7c-2.8-4.2-36-48.6-53.4-71.9
-      c11.9-3.2,54.2-14.4,58.8-15.7C559,350,559.7,347.4,556.8,344.2z M319.6,392.7c-1.6,0.3-74.6,17.8-78.5,18.7
-      c-3.9,0.9-3.9,0.4-4.3-0.9c-0.4-1.3-86.9-179.6-88.1-181.8c-1.2-2.2-1.1-4,0-4c1.1,0,69-6.1,71.4-6.2s2.1,0.4,3,1.9
-      c0,0,95.7,165.2,97.4,168.1C322.2,391.5,321.2,392.4,319.6,392.7z M525.7,431.3c1.2,1.8,2.3,3-1.3,4.3c-3.7,1.3-123.7,41.8-126,42.8
-      c-2.3,1-4.2,1.3-7.2-3s-42-71.9-42-71.9l127.2-33.1c3.2-1,4.2-1.7,6.2,1.5S524.5,429.5,525.7,431.3z M533.8,341
-      c-2.9,0.6-49.6,12.2-49.6,12.2l-38.2-52.4c-1.1-1.5-2-3,0.7-3.4c2.7-0.4,46.1-8.2,48-8.6c2-0.4,3.7-1,6.1,2.3
-      c2.4,3.3,35.4,45.1,36.7,46.7C538.8,339.4,536.7,340.4,533.8,341z"
-    />
-    <style jsx>{`
-      svg {
-        width: ${props.size};
-        height: ${props.size};
-      }
-    `}</style>
-  </svg>
-);
-
-export const ReactSVG = props => (
-  <svg
-    id="Layer_1"
-    data-name="Layer 1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 823.85795 733"
-  >
-    <path
-      d="M677.3796,237.5782v-.00013q-13.15347-4.51184-26.52168-8.35682,2.2162-9.00546,4.09815-18.08832c20.07545-97.45293,6.9495-175.96071-37.87563-201.8043C574.10386-15.45755,503.81433,10.386,432.82482,72.16188q-10.49272,9.15182-20.513,18.8248-6.70815-6.42994-13.651-12.60818c-74.39859-66.06005-148.97227-93.89436-193.75-67.97423-42.93648,24.85548-55.65406,98.66342-37.5803,191.01912q2.69729,13.71891,6.08893,27.28742c-10.55176,2.99712-20.74263,6.19108-30.49228,9.58925C55.70506,268.70848,0,316.37033,0,365.80411c0,51.06,59.796,102.27313,150.64951,133.32334q11.05033,3.759,22.27764,6.96393-3.64625,14.61321-6.47177,29.4132c-17.23148,90.75134-3.77376,162.80916,39.04973,187.51155,44.23076,25.50438,118.46536-.71107,190.75293-63.898q8.57022-7.49254,17.19138-15.84583,10.8498,10.46823,22.27032,20.3197c70.01968,60.25168,139.17161,84.58221,181.9586,59.81425,44.19066-25.581,58.549-102.99126,39.90285-197.17376q-2.13293-10.79053-4.94043-22.02241,7.82091-2.308,15.32089-4.78369C762.41022,468.13563,823.858,417.546,823.858,365.80425,823.858,316.19178,766.35894,268.20914,677.3796,237.5782ZM455.93017,98.71275c60.82417-52.934,117.67049-73.83348,143.5724-58.89543h.00007c27.58633,15.9116,38.31685,80.072,20.98329,164.213q-1.70415,8.22186-3.70447,16.37829A843.11184,843.11184,0,0,0,506.62552,203.0058c-22.63859-32.23516-46.09393-61.54615-69.6405-86.91573Q446.24028,107.16747,455.93017,98.71275ZM243.25691,408.03318q11.17562,21.58674,23.35692,42.63018,12.4265,21.46008,25.86547,42.30946a749.41279,749.41279,0,0,1-75.92641-12.20726C223.8269,457.27737,232.789,432.86312,243.25691,408.03318Zm-.0401-82.7737c-10.24913-24.30852-19.018-48.20874-26.17895-71.28855,23.50634-5.26129,48.57329-9.56006,74.69032-12.82331q-13.1139,20.4542-25.25653,41.50721Q254.34864,303.68289,243.21681,325.25948ZM261.9249,366.65q16.266-33.856,35.04269-66.41735v.00731q18.75838-32.54479,39.94668-63.59526c24.50177-1.85227,49.62338-2.82209,75.01843-2.82209,25.50817,0,50.66256.97714,75.15708,2.844q20.95959,30.97974,39.695,63.38007,18.82881,32.46544,35.51663,66.10381-16.50682,33.96338-35.39993,66.68714l-.00366.00007q-18.71978,32.51932-39.52367,63.77022c-24.44345,1.7466-49.70364,2.64707-75.44509,2.64707-25.63571,0-50.575-.79833-74.5919-2.35527q-21.33273-31.16146-40.26388-63.86883Q278.245,400.51974,261.9249,366.65Zm295.46159,83.76919q12.43081-21.55706,23.8929-43.65115h.00007a747.44376,747.44376,0,0,1,27.66653,72.4735,746.90393,746.90393,0,0,1-76.85248,13.10041Q545.15579,471.63431,557.38649,450.41918ZM580.944,325.28495Q569.52351,303.615,557.24445,282.4141v.00007q-12.081-20.868-25.05238-41.20092c26.2884,3.31791,51.472,7.72974,75.12057,13.1296A750.753,750.753,0,0,1,580.944,325.28495ZM412.32291,141.25908A752.67935,752.67935,0,0,1,460.805,199.78624q-48.65887-2.29927-97.37267-.02188C379.43872,178.65711,395.83523,159.04842,412.32291,141.25908ZM222.5434,40.86376C250.10793,24.9084,311.05246,47.66,375.2895,104.696c4.10546,3.64609,8.22921,7.46354,12.36021,11.41226a843.39474,843.39474,0,0,0-70.18008,86.8501A859.96423,859.96423,0,0,0,207.53247,220.044q-3.15066-12.6187-5.66241-25.38408v.00359C186.38506,115.5322,196.667,55.84191,222.5434,40.86376ZM182.3707,472.19q-10.24566-2.93259-20.33792-6.3661c-40.17271-13.73122-73.34857-31.57522-96.0893-51.04533-20.43275-17.50133-30.75117-34.875-30.75117-48.97441,0-29.99646,44.72664-68.26231,119.3222-94.26995q14.04424-4.87509,28.35573-8.922A844.0802,844.0802,0,0,0,223.02473,366.661,856.90089,856.90089,0,0,0,182.3707,472.19ZM373.09815,632.61472c-31.96537,27.94364-63.99632,47.76386-92.22443,57.736l-.00366-.00013c-25.36593,8.95844-45.56892,9.21367-57.7797,2.17319-25.98942-14.9856-36.78916-72.84909-22.05526-150.45626q2.62813-13.75741,6.01605-27.35312c33.74463,7.46354,71.0989,12.83435,111.02376,16.07206a856.43741,856.43741,0,0,0,70.71972,87.37518Q381.12547,625.58012,373.09815,632.61472Zm40.19824-39.779c-16.68093-18.00074-33.318-37.90848-49.56871-59.322q23.65952.92986,48.20142.93338,25.19087,0,49.73277-1.10475A748.43012,748.43012,0,0,1,413.2964,592.83569Zm213.71969,48.96723c-4.90764,26.44873-14.774,44.0814-26.97381,51.14381-25.96389,15.02922-81.49033-4.50652-141.36655-56.0333q-10.29837-8.85989-20.71716-18.88671c23.21474-25.3914,46.41485-54.91026,69.05717-87.68879,39.83-3.53291,77.45769-9.31215,111.58149-17.19849q2.51586,10.17258,4.45924,19.92955v-.00013C631.3003,574.71465,632.47794,612.3679,627.01609,641.80291Zm29.87976-175.78216h-.00359c-4.50293,1.49124-9.12622,2.93148-13.837,4.3279-10.42787-33.00808-24.50177-68.10909-41.71868-104.36958a825.689,825.689,0,0,0,40.09617-102.84915c8.42612,2.44291,16.60791,5.01338,24.4908,7.72974,76.24,26.241,122.74232,65.0464,122.74232,94.94445C788.6659,397.65278,738.44091,438.99953,656.89585,466.02076Z"
-      fill="#00D1FF"
-    />
-    <path
-      d="M411.929,292.23677a73.56917,73.56917,0,1,1-73.56735,73.56735A73.56713,73.56713,0,0,1,411.929,292.23677"
-      fill="#00D1FF"
-    />
-    <style jsx>{`
-      svg {
-        width: ${props.size};
-        height: ${props.size};
-      }
-    `}</style>
-  </svg>
-);
diff --git a/components/learn-components/accord-guide.js b/components/learn-components/accord-guide.js
deleted file mode 100644
index 47b051fac..000000000
--- a/components/learn-components/accord-guide.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { Component } from 'react';
-import fetch from 'isomorphic-unfetch';
-import marked from 'marked';
-import { Accordion, Icon, Loader } from 'semantic-ui-react';
-
-export default class AccordGuide extends Component {
-  constructor(props) {
-    super(props);
-    marked.setOptions({
-      renderer: new marked.Renderer(),
-      gfm: true,
-      tables: true,
-      breaks: true,
-      pedantic: false,
-      sanitize: true,
-      smartLists: true,
-      smartypants: false,
-    });
-    this.state = {
-      markdown: '',
-      activeIndex: -1,
-    };
-  }
-
-  handleClick = (e, titleProps) => {
-    const { index } = titleProps;
-    const { activeIndex } = this.state;
-    const newIndex = activeIndex === index ? -1 : index;
-
-    this.setState({ activeIndex: newIndex });
-  };
-
-  async componentDidMount() {
-    try {
-      const request = await fetch(this.props.url);
-      const response = await request.text();
-      await this.setState({ markdown: response, loading: false });
-    } catch (err) {
-      console.log(err);
-    }
-  }
-
-  render() {
-    const { activeIndex } = this.state;
-    return (
-      <div>
-        <main>
-          <Accordion fluid styled>
-            <Accordion.Title
-              active={activeIndex === 0}
-              onClick={this.handleClick}
-              index={0}
-            >
-              <Icon name="dropdown" />
-              {this.props.title}
-            </Accordion.Title>
-            <Accordion.Content active={activeIndex === 0}>
-              {this.state.markdown === '' ? (
-                <Loader active inline="centered" />
-              ) : (
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: marked(this.state.markdown),
-                  }}
-                />
-              )}
-            </Accordion.Content>
-          </Accordion>
-        </main>
-      </div>
-    );
-  }
-}
diff --git a/components/learn-components/row-contributors.js b/components/learn-components/row-contributors.js
deleted file mode 100644
index 507970432..000000000
--- a/components/learn-components/row-contributors.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import { Card, Image, Icon, Header } from 'semantic-ui-react';
-
-export default props => (
-  <div className="main">
-    <Card fluid href={props.userPage}>
-      <div className="root">
-        <div className="profile">
-          <Header as="h4">
-            <Image shape="circular" src={props.userImage} />
-            <Header.Content>{props.userName}</Header.Content>
-          </Header>
-        </div>
-        <div className="stats">
-          {props.contributions.map((contribution, index) => {
-            const icon =
-              contribution.type === 'topic'
-                ? 'code'
-                : contribution.type === 'article' ? 'book' : 'film';
-            const valueVerb =
-              contribution.count === 1
-                ? contribution.type
-                : `${contribution.type}s`;
-            return (
-              <Header
-                key={index}
-                style={{ paddingRight: '30px', margin: '2rem 0 1rem' }}
-                as="h6"
-                icon
-              >
-                <Icon name={icon} />
-                <Header.Subheader
-                >{`${contribution.count} ${valueVerb}`}</Header.Subheader>
-              </Header>
-            );
-          })}
-        </div>
-      </div>
-    </Card>
-    <style jsx>{`
-      .main {
-        margin-bottom: 10px;
-      }
-      .root {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        align-content: center;
-        align-items: center;
-      }
-      .profile {
-        order: 0;
-        flex: 1 1 auto;
-        align-self: center;
-        padding: 20px;
-      }
-      .stats {
-        order: 0;
-        flex: 0 1 auto;
-        align-self: center;
-      }
-    `}</style>
-  </div>
-);
diff --git a/components/learn-components/subject-banner.js b/components/learn-components/subject-banner.js
deleted file mode 100644
index cd95d8116..000000000
--- a/components/learn-components/subject-banner.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-
-export default props => (
-  <div>
-    <div className="header">
-      <div className={`logo ${props.logo}`} />
-      <div className="headline">{props.subject}</div>
-    </div>
-    <style jsx>{`
-      .header {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-content: center;
-        align-items: center;
-        background-color: #f4f7fb;
-        min-height: 200px;
-      }
-      .logo {
-        order: 1;
-        flex: 0 1 auto;
-        align-self: auto;
-        font-size: 4.5em;
-        padding-right: 30px;
-      }
-      .headline {
-        order: 2;
-        flex: 0 1 auto;
-        align-self: auto;
-        font-size: 5em;
-        text-align: center;
-        text-transform: capitalize;
-      }
-    `}</style>
-  </div>
-);
diff --git a/components/learn/subject-card.js b/components/learn/subject-card.js
new file mode 100644
index 000000000..f609df159
--- /dev/null
+++ b/components/learn/subject-card.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import styled from 'react-emotion';
+import Link from 'next/link';
+
+import { breakpoints } from '../../utils/base.styles';
+
+const Subject = styled.a`
+  text-decoration: none;
+  width: calc(33.33% - 40px);
+  margin: 20px;
+  display: inline-block;
+  min-height: 200px;
+  background: #fff;
+  border: 1px solid #b9b9b9;
+  transition: all 0.25s;
+  cursor: pointer;
+  &:hover {
+    border: 1px solid #000;
+  }
+  & .icon {
+    padding: 10px 15px;
+    font-size: 10rem;
+    ${breakpoints.xs} {
+      font-size: 8rem;
+    }
+  }
+  & .content {
+    padding: 10px 0 10px 30px;
+    color: #444;
+    background: #f6f6f6;
+    text-align: left;
+  }
+  & .title {
+    font-size: 1.5rem;
+    font-size: 600;
+    color: #222;
+    ${breakpoints.xs} {
+      font-size: 1.2rem;
+    }
+  }
+  & .subtitle {
+    font-size: 0.8rem;
+    color: #444;
+  }
+  ${breakpoints.md} {
+    width: calc(50% - 40px);
+  }
+  ${breakpoints.sm} {
+    width: calc(50% - 40px);
+    margin: 20px auto;
+  }
+  ${breakpoints.xs} {
+    width: 90%;
+    margin: 20px auto;
+  }
+`;
+
+export default ({ subject }) => (
+  <Link href={`/learn/subject?id=${subject.subjectId}`} as={subject.url}>
+    <Subject href={subject.url}>
+      <div className="icon">
+        <i className={subject.icon} />
+      </div>
+      <div className="content">
+        <div className="title">{subject.title}</div>
+        <div className="subtitle">{subject.domain}</div>
+      </div>
+    </Subject>
+  </Link>
+);
diff --git a/components/marked-js.js b/components/marked-js.js
deleted file mode 100644
index 8fbad66a7..000000000
--- a/components/marked-js.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import marked from 'marked';
-import { Loader } from 'semantic-ui-react';
-
-export default class MarkedJS extends React.Component {
-  constructor(props) {
-    super(props);
-    marked.setOptions({
-      renderer: new marked.Renderer(),
-      gfm: true,
-      tables: true,
-      breaks: false,
-      pedantic: false,
-      sanitize: true,
-      smartLists: true,
-      smartypants: false,
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        {this.props.loading ? (
-          <Loader active inline="centered" />
-        ) : (
-          <div
-            dangerouslySetInnerHTML={{
-              __html: marked(this.props.markdown),
-            }}
-          />
-        )}
-      </div>
-    );
-  }
-}
diff --git a/components/row-events.js b/components/row-events.js
deleted file mode 100644
index 5b106cb79..000000000
--- a/components/row-events.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-import { Card, Icon, Image } from 'semantic-ui-react';
-import format from 'date-fns/format';
-import PropTypes from 'prop-types';
-
-const extractImageUrl = input => {
-  const regex = /<img.*?src=['"](.*?)['"]/;
-  const matches = regex.exec(input);
-  return matches ? matches[1] : '';
-};
-
-const RowEvent = ({
-  link,
-  isMultiLine,
-  fluid,
-  description,
-  name,
-  venue,
-  time,
-  yesCount,
-  status,
-}) => {
-  return (
-    <Card fluid={fluid} raised centered target="_blank" href={link}>
-      {description ? <Image src={extractImageUrl(description)} /> : <div />}
-      <Card.Content>
-        <Card.Header>{name}</Card.Header>
-        <div className="card_venue">
-          <Card.Meta>{venue === undefined ? 'Online' : venue.name}</Card.Meta>
-        </div>
-      </Card.Content>
-      <Card.Content extra>
-        <span className="card_icons">
-          <Icon name="clock" />
-          {format(time, "h:mm A, ddd MMM Do 'YY")}
-        </span>
-        <span className="card_icons">
-          <Icon name="users" />
-          {yesCount}
-          {status === 'upcoming' ? ' attending' : ' attended'}
-        </span>
-        <span className="card_icons">
-          <Icon name="log out" />
-          {venue === undefined ? 'Free session' : 'Free entry'}
-        </span>
-      </Card.Content>
-      <style jsx>{`
-        .card_venue {
-          margin-top: 15px;
-        }
-        .card_icons {
-          margin-right: 15px;
-          display: ${isMultiLine ? 'block' : null};
-          text-align: left;
-        }
-        @media (max-width: 700px) {
-          .card_icons {
-            display: flex;
-            margin: 5px 0;
-          }
-        }
-      `}</style>
-    </Card>
-  );
-};
-
-RowEvent.defaultProps = {
-  fluid: false,
-};
-
-RowEvent.propTypes = {
-  fluid: PropTypes.bool,
-  link: PropTypes.string,
-  description: PropTypes.string,
-  name: PropTypes.string,
-  venue: PropTypes.object,
-  time: PropTypes.number,
-  yesCount: PropTypes.number,
-  status: PropTypes.string,
-};
-
-export default RowEvent;
diff --git a/components/subscribe.js b/components/subscribe.js
deleted file mode 100644
index a87956d45..000000000
--- a/components/subscribe.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { Component } from 'react';
-import { Form, Message, Grid } from 'semantic-ui-react';
-import { baseEventsURL, subscribeURL } from '../utils/urls';
-
-class Subscribe extends Component {
-  state = {
-    subscribersEmail: '',
-    submittingEmail: false,
-    emailSubmittingError: '',
-    subscriberEmailPosted: false,
-  };
-
-  handleChange = event => {
-    this.setState({
-      subscribersEmail: event.target.value,
-      emailSubmittingError: '',
-    });
-  };
-
-  handleSubmit = () => {
-    this.setState({ emailSubmittingError: '' });
-    const emailRegx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-    const email = this.state.subscribersEmail;
-    if (!email) {
-      this.setState({
-        emailSubmittingError: 'Please enter a email',
-      });
-      return;
-    }
-    if (!emailRegx.test(email)) {
-      this.setState({
-        emailSubmittingError: 'Please enter a valid email',
-      });
-      return;
-    }
-    this.postSubscriberEmail(email);
-  };
-
-  async postSubscriberEmail(subscribersEmail) {
-    await this.setState({ submittingEmail: true });
-    const postSubscriberEmailRequest = await fetch(
-      `${baseEventsURL}${subscribeURL}`,
-      {
-        method: 'post',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: subscribersEmail }),
-      },
-    );
-    if (postSubscriberEmailRequest.status === 200) {
-      this.setState({
-        subscriberEmailPosted: true,
-        submittingEmail: false,
-        emailSubmittingError: '',
-      });
-    } else {
-      this.setState({
-        submittingEmail: false,
-        emailSubmittingError: 'Submission Failed Try Again.',
-      });
-    }
-  }
-  render() {
-    const hasError = this.state.emailSubmittingError !== '';
-
-    return (
-      <div>
-        <section className="update">
-          <div>
-            <h3 className="taglines">
-              We are constanly updating our platform.<br />If you would like to
-              stay informed about our updates, drop your email.
-            </h3>
-            <div className="update_content">
-              {this.state.subscriberEmailPosted ? (
-                <h2>Thank you, we will keep you posted</h2>
-              ) : (
-                <Form onSubmit={this.handleSubmit} error={hasError}>
-                  <Form.Group>
-                    <Grid stackable columns={2}>
-                      <Grid.Column width={12}>
-                        <Form.Input
-                          placeholder="Enter email address"
-                          name="email"
-                          value={this.state.subscribersEmail}
-                          onChange={this.handleChange}
-                          disabled={this.state.submittingEmail}
-                        />
-                      </Grid.Column>
-                      <Grid.Column width={4}>
-                        <Form.Button
-                          loading={this.state.submittingEmail}
-                          color="pink"
-                          content="Subscribe"
-                        />
-                      </Grid.Column>
-                    </Grid>
-                  </Form.Group>
-                  <Message
-                    error
-                    header="Action Forbidden"
-                    content={this.state.emailSubmittingError}
-                  />
-                </Form>
-              )}
-            </div>
-          </div>
-        </section>
-        <style jsx>{`
-          .taglines {
-            padding-bottom: 20px;
-          }
-          .update_content {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: center;
-            align-content: center;
-            align-items: center;
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
-
-export default Subscribe;
diff --git a/config/meta-info.json b/config/meta-info.json
index 578de1dd0..84544aa00 100644
--- a/config/meta-info.json
+++ b/config/meta-info.json
@@ -1,8 +1,7 @@
 {
   "home": {
     "title": "Coderplex | Learn, Collaborate and Create with a Community",
-    "description":
-      "We're a non-profit startup on a mission to improve the state of tech across India",
+    "description": "We're a non-profit startup on a mission to improve the state of tech across India",
     "image": ""
   },
   "learn": {
@@ -21,5 +20,10 @@
     "title": "Online and Offline Tech Events | Coderplex",
     "description": "We host frequent online and offline events, from sessions to competitions",
     "image": ""
+  },
+  "login": {
+    "title": "Login Or Register | Coderplex",
+    "description": "Join our community",
+    "image": ""
   }
 }
diff --git a/hocs/public-page.js b/hocs/public-page.js
deleted file mode 100644
index f03453572..000000000
--- a/hocs/public-page.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-import Header from '../components/header';
-import Footer from '../components/footer';
-
-export default Page => {
-  return class PublicPage extends React.Component {
-    static async getInitialProps(ctx) {
-      let initialProps = {};
-      if (Page.getInitialProps) {
-        initialProps = await Page.getInitialProps(ctx);
-      }
-      return { ...initialProps };
-    }
-    render() {
-      return (
-        <div>
-          <Header {...this.props} />
-          <Page {...this.props} />
-          <Footer />
-        </div>
-      );
-    }
-  };
-};
diff --git a/next.config.js b/next.config.js
index 6c8ce8887..608f31e9b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,6 +2,7 @@ const { ANALYZE } = process.env;
 
 // For now copy paste from utils mockdata later we will fetch these from API
 // We cannot import from utils/mockData.js because this file is not transpiled so does not support es6 modules
+
 const listOfSubjects = [
   {
     id: '2132',
@@ -99,6 +100,13 @@ module.exports = {
   webpack: (config, { dev }) => {
     /* Enable only in Production */
     if (!dev) {
+      // Preact
+      // console.log('> Using Preact instead of React');
+      // config.resolve.alias = {
+      //   react: 'preact-compat/dist/preact-compat',
+      //   'react-dom': 'preact-compat/dist/preact-compat',
+      //   'react-emotion': 'preact-emotion',
+      // };
       if (ANALYZE) {
         const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
         config.plugins.push(
@@ -106,7 +114,7 @@ module.exports = {
             analyzerMode: 'server',
             analyzerPort: 8888,
             openAnalyzer: true,
-          }),
+          })
         );
       }
     }
@@ -118,6 +126,7 @@ module.exports = {
       '/events': { page: '/events' },
       '/learn': { page: '/learn' },
       '/space': { page: '/space' },
+      '/login': { page: '/login' },
     };
     for (const subject of listOfSubjects) {
       routes[subject.url] = {
diff --git a/package.json b/package.json
index 237235d85..de6fa1dce 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "test": "xo && jest",
     "lint":
-      "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write --single-quote --print-width='80' --trailing-comma='all' && xo --fix",
+      "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo",
     "precommit": "lint-staged",
     "analyze": "cross-env ANALYZE=1 next build",
     "dev": "cross-env NODE_ENV=development node server.js",
@@ -34,25 +34,35 @@
   },
   "lint-staged": {
     "*.js": [
-      "prettier --write --single-quote --print-width=80 --trailing-comma=all",
+      "prettier --write --single-quote --print-width=120 --trailing-comma=es5",
       "xo",
       "jest --findRelatedTests",
       "git add"
     ]
   },
   "dependencies": {
+    "babel-plugin-emotion": "^8.0.10",
     "date-fns": "1.29.0",
+    "emotion": "^8.0.10",
+    "emotion-server": "^8.0.10",
+    "grid-emotion": "^2.1.0",
     "isomorphic-unfetch": "2.0.0",
+    "lodash.take": "^4.1.1",
     "marked": "^0.3.6",
     "next": "^4.1.0",
     "nprogress": "^0.2.0",
     "path-match": "1.2.4",
+    "preact": "^8.2.6",
+    "preact-compat": "^3.17.0",
+    "preact-emotion": "^8.0.10",
     "prop-types": "^15.5.10",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "react-emotion": "^8.0.10",
+    "react-event-timeline": "^1.4.0",
     "react-headroom": "^2.1.6",
     "react-icons": "^2.2.5",
-    "semantic-ui-react": "^0.76.0"
+    "styled-system": "^1.0.8"
   },
   "devDependencies": {
     "babel-eslint": "^8.0.1",
@@ -70,6 +80,8 @@
     "prettier": "^1.7.0",
     "raf": "^3.4.0",
     "react-test-renderer": "^16.0.0",
+    "typescript": "^2.6.1",
+    "typescript-styled-plugin": "^0.2.0",
     "webpack-bundle-analyzer": "^2.8.3",
     "xo": "^0.18.2"
   },
diff --git a/pages/_document.js b/pages/_document.js
new file mode 100644
index 000000000..dc445a090
--- /dev/null
+++ b/pages/_document.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import Document, { Head, Main, NextScript } from 'next/document';
+import { extractCritical } from 'emotion-server';
+
+export default class MyDocument extends Document {
+  static getInitialProps({ renderPage }) {
+    const page = renderPage();
+    const styles = extractCritical(page.html);
+    return { ...page, ...styles };
+  }
+
+  constructor(props) {
+    super(props);
+    const { __NEXT_DATA__, ids } = props;
+    if (ids) {
+      __NEXT_DATA__.ids = ids;
+    }
+  }
+
+  render() {
+    return (
+      <html lang="en">
+        <Head>
+          <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    );
+  }
+}
diff --git a/pages/events.js b/pages/events.js
index f5c486ee9..4f4cfeb8f 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -1,144 +1,44 @@
 import React from 'react';
-import fetch from 'isomorphic-unfetch';
-import { Card, Divider } from 'semantic-ui-react';
+import { Flex, Box } from 'grid-emotion';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
 
-import publicPage from '../hocs/public-page';
-import CommonBanner from '../components/common-banner';
-import { baseEventsURL, futureEventsURL, pastEventsURL } from '../utils/urls';
-import RowEvent from '../components/row-events';
-import {
-  TextContentLoader,
-  CardContentLoader,
-} from '../components/content-loaders';
+import Layout from '../components/common/layout';
+import BannerSection from '../components/common/banner';
+import { Container, Title, SubTitle } from '../utils/base.styles';
 
-class Events extends React.Component {
-  state = {
-    pastEvents: null,
-    futureEvents: null,
-    fetchError: null,
-    loading: true,
-  };
+const EventsSection = styled.section`
+  ${space};
+  background: #fff;
+  position: relative;
+`;
 
-  async componentDidMount() {
-    try {
-      const pastEvents = await fetch(
-        `${baseEventsURL}${pastEventsURL}`,
-      ).then(res => {
-        if (res.ok) return res.json();
-        throw new Error('Failed to Retrieve Events');
-      });
-      const futureEvents = await fetch(
-        `${baseEventsURL}${futureEventsURL}`,
-      ).then(res => {
-        if (res.ok) return res.json();
-        throw new Error('Failed to Retrieve Events');
-      });
-      await this.setState({
-        pastEvents,
-        futureEvents,
-        fetchError: null,
-        loading: false,
-      });
-    } catch (err) {
-      console.log(err);
-      await this.setState({
-        pastEvents: null,
-        futureEvents: null,
-        fetchError: err.message,
-        loading: false,
-      });
-    }
-  }
-
-  renderEvents() {
-    if (this.state.fetchError) {
-      return <div>{this.state.fetchError}</div>;
-    }
-    return (
-      <div>
-        <section>
-          <h2>Upcoming events</h2>
-          <div>
-            {this.state.futureEvents.map(event => (
-              <Card.Group key={event.id}>
-                <RowEvent
-                  name={event.name}
-                  yesCount={event.yes_rsvp_count}
-                  time={event.time}
-                  venue={event.venue}
-                  link={event.link}
-                  status={event.status}
-                  fluid={true}
-                />
-              </Card.Group>
-            ))}
-          </div>
-        </section>
-        <Divider />
-        <section>
-          <h2>Recent events</h2>
-          <div>
-            {this.state.pastEvents.map(event => (
-              <Card.Group key={event.id}>
-                <RowEvent
-                  key={event.id}
-                  name={event.name}
-                  yesCount={event.yes_rsvp_count}
-                  time={event.time}
-                  venue={event.venue}
-                  link={event.link}
-                  status={event.status}
-                  fluid={true}
-                />
-              </Card.Group>
-            ))}
-          </div>
-        </section>
-        <style jsx>{`
-          section {
-            margin: 50px 0;
-          }
-        `}</style>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <div>
-        <CommonBanner
-          pageTitle="Events"
-          pageSubTitle="Because you cannot change the world alone"
-        />
-        <div>
-          {this.state.loading ? (
-            <div style={{ backgroundColor: '#FFF' }}>
-              <TextContentLoader topPadding="80px" />
-              <CardContentLoader />
-              <CardContentLoader />
-              <CardContentLoader />
-            </div>
-          ) : (
-            <main>{this.renderEvents()}</main>
-          )}
-        </div>
-        <style jsx>{`
-          main {
-            background-color: #ffffff;
-            padding-top: 30px;
-            padding-bottom: 30px;
-            padding-left: 30px;
-            padding-right: 30px;
-            min-height: calc(100vh - 70px);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
-
-export default publicPage(Events);
+export default () => (
+  <Layout>
+    <BannerSection textInverted title="Online & Offline Events" subTitle="Because you cannot change the world alone" />
+    <EventsSection py={[2, 4]} px={[2, 1]}>
+      <Container>
+        <Flex pb={[2, 4]} direction="column" align="center" justify="center">
+          <Box width={[1, 0.75]}>
+            <Title inverted color="#222">
+              Upcoming Events
+            </Title>
+            <SubTitle inverted color="#222">
+              No events as of now, check back later
+            </SubTitle>
+          </Box>
+        </Flex>
+        <Flex direction="column" align="center" justify="center">
+          <Box width={[1, 0.75]}>
+            <Title inverted color="#222">
+              Past Events
+            </Title>
+            <SubTitle inverted color="#222">
+              Loading...
+            </SubTitle>
+          </Box>
+        </Flex>
+      </Container>
+    </EventsSection>
+  </Layout>
+);
diff --git a/pages/index.js b/pages/index.js
index 0be9ef4d3..9f16d170a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,266 +1,258 @@
 import React from 'react';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
+import { Flex, Box } from 'grid-emotion';
+import take from 'lodash.take';
 import Link from 'next/link';
 
-import { Card, Button, Divider, Grid, Segment } from 'semantic-ui-react';
-import { baseEventsURL, indexPageEventURL } from '../utils/urls';
-import RowEvent from '../components/row-events';
-import publicPage from '../hocs/public-page';
-import Subscribe from '../components/subscribe';
+import Hide, { Container, Button, Title, SubTitle, breakpoints } from '../utils/base.styles';
+import { listOfSubjects } from '../utils/mock-data';
+import Layout from '../components/common/layout';
+import SubjectCard from '../components/learn/subject-card';
 
-const indexPageLearns = [
-  {
-    subjectId: 'react',
-    url: 'learn/react',
-    title: 'ReactJS',
-    subject: 'Frontend Web Development',
-  },
-  {
-    subjectId: 'laravel',
-    url: 'learn/laravel',
-    title: 'Laravel',
-    subject: 'Backend Web Development',
-  },
-  {
-    subjectId: 'go',
-    url: 'learn/go',
-    title: 'Go',
-    subject: 'Programming Language',
-  },
-  {
-    subjectId: 'introductiontoCS',
-    url: 'learn/introductiontoCS',
-    title: 'Introduction to C.S',
-    subject: 'Computer Science',
-  },
-  {
-    subjectId: 'blockchain',
-    url: 'learn/blockchain',
-    title: 'Blockchain',
-    subject: 'Decentralized Systems',
-  },
-  {
-    subjectId: 'android',
-    url: 'learn/android',
-    title: 'Android',
-    subject: 'Mobile Development',
-  },
-];
+const HeroSection = styled.section`
+  ${space};
+  background-color: #fff;
+  position: relative;
+  text-align: center;
+  background-image: url('https://res.cloudinary.com/coderplex/image/upload/v1510788480/website__assets/pattern.png');
+  & h1 {
+    font-size: 2.5rem;
+    font-weight: 300;
+    color: #36434d;
+    ${breakpoints.md} {
+      font-size: 2.3rem;
+    }
+    ${breakpoints.sm} {
+      font-size: 1.8rem;
+    }
+    ${breakpoints.xs} {
+      font-size: 1.5rem;
+      line-height: 1.8rem;
+    }
+  }
+  & img {
+    width: 100%;
+  }
+`;
 
-class Home extends React.Component {
-  state = {
-    indexPageEvent: '',
-  };
+const LearnSection = styled.section`
+  ${space};
+  background-color: #f6f6f6;
+  position: relative;
+  text-align: center;
+`;
 
-  async componentDidMount() {
-    try {
-      const requestEvent = await fetch(`${baseEventsURL}${indexPageEventURL}`);
-      const requestEventJson = await requestEvent.json();
-      await this.setState({
-        indexPageEvent: requestEventJson[0],
-      });
-    } catch (err) {
-      console.log(err);
+const SpaceSection = styled.section`
+  ${space};
+  background-color: #7657fb;
+  position: relative;
+  text-align: left;
+  color: #fff;
+  & .box {
+    position: relative;
+    z-index: 2;
+    & img {
+      width: 100%;
+      min-height: 332px;
+    }
+    ${breakpoints.sm} {
+      text-align: center;
+    }
+    ${breakpoints.xs} {
+      text-align: center;
     }
   }
+`;
 
-  render() {
-    return (
-      <div>
-        <main>
-          <section className="about">
-            <div className="about__container">
-              <div className="about__content">
-                <img src="/static/banner1280x370.png" alt="words" />
-              </div>
-              <h1 className="about__tag">
-                On a mission to improve the state of tech in India
-              </h1>
-            </div>
-            <Divider section />
-          </section>
-          <section className="learn">
-            <div className="container">
-              <h2 className="titles">Open Source Learning Guides</h2>
-              <h3 className="taglines">
-                Our guides are crowd-sourced recommendations of free online
-                resources to learn any technology
-              </h3>
-              <div className="content">
-                <Card.Group itemsPerRow={3} stackable>
-                  {indexPageLearns.map(learn => (
-                    <Link
-                      href={`/learn/subject?id=${learn.subjectId}`}
-                      as={learn.url}
-                      key={learn.url}
-                    >
-                      <Card header={learn.title} meta={learn.subject} />
-                    </Link>
-                  ))}
-                </Card.Group>
-              </div>
-              <Link href={'/learn'}>
-                <Button basic color="grey">
-                  SEE ALL AVAILABLE GUIDES
+const EventsSection = styled.section`
+  ${space};
+  background: #6f19ed;
+  color: #fff;
+  position: relative;
+  text-align: left;
+  & img {
+    width: 100%;
+    min-height: 427px;
+  }
+  & .box {
+    position: relative;
+    z-index: 2;
+    & img {
+      width: 100%;
+      ${breakpoints.sm} {
+        width: 50%;
+      }
+      ${breakpoints.xs} {
+        width: 100%;
+      }
+    }
+    ${breakpoints.sm} {
+      text-align: center;
+    }
+    ${breakpoints.xs} {
+      text-align: center;
+    }
+  }
+`;
+
+const DiscordSection = styled.section`
+  ${space};
+  background: #fff;
+  color: #222;
+  text-align: center;
+  position: relative;
+`;
+
+const SpaceOverlay = styled.div`
+  background: #6f19ed;
+  height: 200px;
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  ${breakpoints.sm} {
+    display: none;
+  }
+  ${breakpoints.xs} {
+    display: none;
+  }
+`;
+
+export default () => (
+  <Layout>
+    <HeroSection pb={[2, 4]} px={[2, 1]}>
+      <Container>
+        <Flex justify="center" align="center" direction="column">
+          <Box width={1}>
+            <img
+              src="https://res.cloudinary.com/coderplex/image/upload/c_scale,w_1024/v1510788480/website__assets/banner1280x370.png"
+              alt="words"
+            />
+            <h1>On a mission to improve the state of tech across India</h1>
+          </Box>
+        </Flex>
+      </Container>
+    </HeroSection>
+    <LearnSection pb={[3, 4]} pt={[2, 3]} px={[2, 1]}>
+      <Container>
+        <Flex justify="center" align="center" direction="column">
+          <Box width={1}>
+            <Title inverted>Open Source Learning Guides</Title>
+            <SubTitle inverted>
+              Our guides are crowd-sourced recommendations of free online resources to learn any technology
+            </SubTitle>
+          </Box>
+          <Box width={1}>
+            <Flex justify="center" align="center" wrap>
+              {take(listOfSubjects, 6).map(subject => {
+                return <SubjectCard key={subject.url} subject={subject} />;
+              })}
+            </Flex>
+          </Box>
+          <Flex justify="center" width={[1]} pt={[2, 3]}>
+            <Link href={'/learn'}>
+              <Button href={'/learn'} inverted medium>
+                SEE ALL AVAILABLE GUIDES
+              </Button>
+            </Link>
+          </Flex>
+        </Flex>
+      </Container>
+    </LearnSection>
+    <SpaceSection>
+      <Container>
+        <Flex justify="center" wrap>
+          <Box order={[2, 2, 1]} className="box" width={[1, 1, 1 / 2]} py={[0, 2, 3]} px={[2, 4, 3]}>
+            <Title>Offline Co-Learning Spaces</Title>
+            <SubTitle small>
+              Physical spaces where you can come down to engage in self learning, peer-learning and collaboration.
+            </SubTitle>
+            <SubTitle small>
+              These are dynamic learning environments where everyone learns at their own pace and compliments each
+              other. We also organize weekly group activities like Open Source evenings, casual hackathons etc.
+            </SubTitle>
+            <Box
+              mx={['auto', 'auto', 0]}
+              my={['auto', 'auto', 0]}
+              className="box"
+              width={[1]}
+              pt={[2, 3]}
+              pb={[4, 4, 0]}
+            >
+              <Link href={'/space'}>
+                <Button href={'/space'} medium>
+                  LEARN MORE ABOUT HACKERSPACE
                 </Button>
               </Link>
-            </div>
-          </section>
-          <Divider section />
-          <section className="space">
-            <div className="container">
-              <h2 className="titles">Offline Co-Learning Spaces</h2>
-              <h3 className="taglines">
-                Physical spaces where you can come down to engage in self
-                learning, peer-learning and collaboration.
-              </h3>
-              <div className="space-content">
-                <div className="space_content_info">
-                  These are dynamic learning environments where everyone learns
-                  at their own pace and compliments each other. We also organize
-                  weekly group activities like Open source evenings, casual
-                  hackathons etc.
-                </div>
+            </Box>
+          </Box>
+          <Box order={1} className="box" width={[1, 1, 1 / 2]} pt={4} pb={[0, 1, 4]} px={[3, 4, 3]}>
+            <img
+              className="space__img"
+              alt="sapce__img"
+              src="https://res.cloudinary.com/coderplex/image/upload/c_scale,w_450/v1510788480/website__assets/space.png"
+            />
+          </Box>
+        </Flex>
+      </Container>
+      <SpaceOverlay />
+    </SpaceSection>
+    <EventsSection>
+      <Container>
+        <Flex align="center" justify="center" wrap>
+          <Box order={[2, 2, 1]} width={[1, 1, 1 / 2]} px={[4, 4, 3]}>
+            <Hide sm xs>
+              <img
+                src="https://res.cloudinary.com/coderplex/image/upload/c_scale,w_348/v1510788480/website__assets/events.png"
+                alt="events__pic"
+              />
+            </Hide>
+          </Box>
+          <Box order={1} width={[1, 1, 1 / 2]} px={[2, 3]} pt={[3, 4, 0]} pb={[4, 4, 0]}>
+            <Title>Online & Offline Events</Title>
+            <SubTitle small>
+              We do frequent online and offline events, covering broad range of topics, from Web Development to Data
+              Science. The goal of these events are to share knowledge, connect with people and enable collaboration. We
+              also partner with local comunities to help them reach a wider audience.
+            </SubTitle>
+            <Box className="box" width={[1]} pt={[2]} px={[3, 0]}>
+              <Hide md lg>
                 <img
-                  className="space_content_info"
-                  src="https://static.vecteezy.com/system/resources/thumbnails/000/139/966/small/free-office-workspace-vector.png"
+                  src="https://res.cloudinary.com/coderplex/image/upload/c_scale,w_316/v1510788480/website__assets/events.png"
+                  alt="events__pic"
                 />
-              </div>
-              <Link href={'/learn'}>
-                <Button basic color="grey">
-                  LEARN MORE ABOUT HACKERSPACE
-                </Button>
-              </Link>
-            </div>
-          </section>
-          <Divider section />
-          <section className="events">
-            <div className="container">
-              <h2 className="titles">Online & Offline Events</h2>
-              <h3 className="taglines">
-                We do frequent online and offline events, covering broad range
-                of topics.
-              </h3>
-              <div className="content">
-                {this.state.indexPageEvent ? (
-                  <RowEvent
-                    isMultiLine={true}
-                    key={this.state.indexPageEvent.id}
-                    name={this.state.indexPageEvent.name}
-                    description={this.state.indexPageEvent.description}
-                    yesCount={this.state.indexPageEvent.yes_rsvp_count}
-                    time={this.state.indexPageEvent.time}
-                    venue={this.state.indexPageEvent.venue}
-                    link={this.state.indexPageEvent.link}
-                    status={this.state.indexPageEvent.status}
-                  />
-                ) : (
-                  <div />
-                )}
-              </div>
+              </Hide>
               <Link href={'/events'}>
-                <Button basic color="grey">
+                <Button href={'/events'} medium>
                   VIEW ALL EVENTS
                 </Button>
               </Link>
-            </div>
-          </section>
-          <Divider hidden />
-          <section className="discord-subscribe">
-            <div className="container">
-              <Grid stackable columns={2} divided>
-                <Grid.Column>
-                  <Segment basic>
-                    <section className="discord">
-                      <div>
-                        <h3 className="taglines">
-                          Join our Discord server, and say Hello World!
-                        </h3>
-                        <Button.Group basic>
-                          <Button
-                            content="Join Chat"
-                            icon="discussions"
-                            labelPosition="left"
-                            onClick={() =>
-                              window.open(
-                                'https://discord.gg/dVnQ2Gf',
-                                '_blank',
-                              )}
-                          />
-                        </Button.Group>
-                      </div>
-                    </section>
-                  </Segment>
-                </Grid.Column>
-                <Grid.Column>
-                  <Subscribe />
-                </Grid.Column>
-              </Grid>
-            </div>
-          </section>
-        </main>
-        <style jsx>{`
-          main {
-            background-color: #ffffff;
-          }
-          .about {
-            background-color: #f4f7fb;
-            position: relative;
-            text-align: center;
-          }
-          .about__container {
-            padding-bottom: 30px;
-            min-height: 200px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-          }
-          .about__content img {
-            width: 100%;
-          }
-          .about__tag {
-            font-size: 2.5rem;
-          }
-          .container {
-            background-color: #ffffff;
-            text-align: center;
-            padding: 20px;
-          }
-          .taglines {
-            padding-bottom: 20px;
-          }
-          .content {
-            padding-bottom: 50px;
-          }
-          .space-content {
-            display: flex;
-            flex-wrap: wrap-reverse
-            flex-wrap: wrap;
-            justify-content: center;
-            align-content: center;
-            align-items: center;
-          }
-          .space_content_info {
-            order: 0;
-            flex: 0 1 auto;
-            align-self: center;
-            max-width: 600px;
-            padding-left: 30px;
-            padding-right: 30px;
-          }
-          .discord-subscribe .container {
-            background: #FAFAFA;
-          }
-          @media (max-width: 720px) {
-            .about__tag {
-              font-size: 1.5rem;
-            }
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
-
-export default publicPage(Home);
+            </Box>
+          </Box>
+        </Flex>
+      </Container>
+    </EventsSection>
+    <DiscordSection>
+      <Container>
+        <Box py={[4]} px={[2]}>
+          <Title inverted color="#222">
+            Join our Discord Server, and say &#34;Hello, world!&#34;
+          </Title>
+          <Box pt={[4]} pb={[3]}>
+            <Button
+              href="https://discordapp.com/invite/dVnQ2Gf"
+              rel="noopener noreferrer"
+              target="_blank"
+              inverted
+              large
+            >
+              Join Discord
+            </Button>
+          </Box>
+        </Box>
+      </Container>
+    </DiscordSection>
+  </Layout>
+);
diff --git a/pages/learn/index.js b/pages/learn/index.js
index c19b91875..f09f5e997 100644
--- a/pages/learn/index.js
+++ b/pages/learn/index.js
@@ -1,157 +1,36 @@
 import React from 'react';
-import {
-  Card,
-  Icon,
-  Label,
-  Popup,
-  Grid,
-  Button,
-  Search,
-  Header,
-} from 'semantic-ui-react';
-import Link from 'next/link';
+import { Flex } from 'grid-emotion';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
 
-import publicPage from '../../hocs/public-page';
-import CommonBanner from '../../components/common-banner';
+import Layout from '../../components/common/layout';
+import BannerSection from '../../components/common/banner';
+import SubjectCard from '../../components/learn/subject-card';
+import { Container } from '../../utils/base.styles';
+import { listOfSubjects } from '../../utils/mock-data';
 
-import { listOfSubjects, listOfDomains } from '../../utils/mock-data';
+const SubjectsSection = styled.section`
+  ${space};
+  background: #fff;
+  text-align: center;
+  position: relative;
+`;
 
-let numOfFilteredSubjects;
-class Learn extends React.Component {
-  state = {
-    filter: 'All',
-    filteredSubjects: listOfSubjects,
-  };
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.filter !== this.state.filter) {
-      const filteredSubjects = listOfSubjects.filter(subject => {
-        if (this.state.filter === 'All') {
-          return true;
-        }
-        return subject.domain === this.state.filter;
-      });
-      numOfFilteredSubjects = filteredSubjects.length;
-      this.setState({
-        filteredSubjects,
-      });
-    }
-  }
-
-  render() {
-    return (
-      <div>
-        <CommonBanner
-          pageTitle="Learn"
-          pageSubTitle="Open Source Learning Guides to master your favorite technology"
-        />
-        <main>
-          <section>
-            <div className="filters">
-              {listOfDomains.map(domain => (
-                <Button
-                  key={domain}
-                  style={{ marginBottom: '10px' }}
-                  className="filter_button"
-                  basic
-                  color="pink"
-                  onClick={() => this.setState({ filter: domain })}
-                >
-                  {domain}
-                </Button>
-              ))}
-            </div>
-            <Search placeholder="Search topics" />
-            <Header
-              as="h3"
-              dividing
-              style={{ marginBottom: '40px', textAlign: 'center' }}
-            >
-              {this.state.filter === 'All'
-                ? 'Showing all courses'
-                : numOfFilteredSubjects === 0
-                  ? `Currenlty we dont have any subjects under ${this.state
-                      .filter}`
-                  : `Showing ${numOfFilteredSubjects} courses under ${this.state
-                      .filter}`}
-            </Header>
-            <Grid stackable columns={3}>
-              {this.state.filteredSubjects.map(subject => (
-                <Grid.Column
-                  style={{ paddingBottom: '4.5rem' }}
-                  key={subject.id}
-                >
-                  <Link
-                    as={subject.url}
-                    href={`/learn/subject?id=${subject.subjectId}`}
-                  >
-                    <Card href={subject.url} raised>
-                      <Label attached="bottom right">
-                        <Popup
-                          trigger={
-                            <Icon
-                              style={{ marginRight: '0px' }}
-                              name={
-                                subject.learnGuideStatus ? 'checkmark' : 'info'
-                              }
-                            />
-                          }
-                          position="top center"
-                        >
-                          {subject.learnGuideStatus
-                            ? 'Complete guide'
-                            : 'Guide underconstruction'}
-                        </Popup>
-                      </Label>
-                      <logo className={subject.icon} />
-                      <Card.Content>
-                        <Card.Header>{subject.title}</Card.Header>
-                        <Card.Meta>{subject.domain}</Card.Meta>
-                      </Card.Content>
-                      <Card.Content extra>
-                        <Icon name="student" />
-                        {`${subject.learningCount} learning`}
-                      </Card.Content>
-                    </Card>
-                  </Link>
-                </Grid.Column>
-              ))}
-            </Grid>
-          </section>
-        </main>
-        <style jsx>{`
-          .root {
-            background-color: #ffffff;
-          }
-          main {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: center;
-            align-content: flex-start;
-            align-items: flex-start;
-            background-color: #ffffff;
-            padding: 20px;
-            min-height: calc(100vh - 70px);
-            margin: 0 auto;
-          }
-          section {
-            margin: 50px 0;
-            max-width: 800px;
-          }
-          .filters {
-            margin-bottom: 20px;
-          }
-          logo {
-            font-size: 12em;
-            text-align: center;
-            padding-top: 10px;
-            padding-bottom: 10px;
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
-
-export default publicPage(Learn);
+export default () => (
+  <Layout>
+    <BannerSection
+      textInverted
+      title="Open Source Learning Guides"
+      subTitle="Open Source Learning Guides to master your favorite technology"
+    />
+    <SubjectsSection py={[2, 4]} px={[2, 1]}>
+      <Container>
+        <Flex justify="center" align="center" wrap>
+          {listOfSubjects.map(subject => {
+            return <SubjectCard key={subject.url} subject={subject} />;
+          })}
+        </Flex>
+      </Container>
+    </SubjectsSection>
+  </Layout>
+);
diff --git a/pages/learn/subject.js b/pages/learn/subject.js
index 95d81c8a5..4e4c592de 100644
--- a/pages/learn/subject.js
+++ b/pages/learn/subject.js
@@ -1,146 +1,12 @@
 import React from 'react';
-import fetch from 'isomorphic-unfetch';
-import { Tab } from 'semantic-ui-react';
 
-import publicPage from '../../hocs/public-page';
-import SubjectBanner from '../../components/learn-components/subject-banner';
-import MarkedJS from '../../components/marked-js';
-import AccordGuide from '../../components/learn-components/accord-guide';
-import { contentsOfLaravel } from '../../utils/mock-data';
-import RowContributors from '../../components/learn-components/row-contributors';
-import { UnderConstructionSVG } from '../../components/icons';
+import Layout from '../../components/common/layout';
+import BannerSection from '../../components/common/banner';
 
-export default publicPage(
-  class Subjects extends React.Component {
-    constructor(props) {
-      super(props);
-      this.state = {
-        overview: '',
-        overviewLoading: true,
-      };
-    }
-
-    componentDidMount() {
-      this.requestOverviewContent();
-    }
-
-    async requestOverviewContent() {
-      try {
-        const overviewPromise = await fetch(contentsOfLaravel.overview);
-        const overview = await overviewPromise.text();
-        await this.setState({
-          overview,
-          overviewLoading: false,
-        });
-      } catch (err) {
-        console.log(err);
-      }
-    }
-
-    render() {
-      return (
-        <div>
-          {this.props.url.query.id === 'laravel' ? (
-            <div>
-              <SubjectBanner
-                logo={contentsOfLaravel.logo}
-                subject={this.props.url.query.id}
-              />
-              <main>
-                <section>
-                  <Tab
-                    menu={{
-                      color: 'pink',
-                      attached: false,
-                      tabular: false,
-                      borderless: true,
-                    }}
-                    panes={[
-                      {
-                        menuItem: 'Overview',
-                        render: () => (
-                          <Tab.Pane attached={false}>
-                            <MarkedJS
-                              loading={this.state.overviewLoading}
-                              markdown={this.state.overview}
-                            />
-                          </Tab.Pane>
-                        ),
-                      },
-                      {
-                        menuItem: 'Guide',
-                        render: () => (
-                          <Tab.Pane attached={false}>
-                            {contentsOfLaravel.guides.map(guide => (
-                              <AccordGuide
-                                key={guide.url}
-                                title={guide.name}
-                                url={guide.url}
-                              />
-                            ))}
-                          </Tab.Pane>
-                        ),
-                      },
-                      {
-                        menuItem: 'Contributors',
-                        render: () => (
-                          <Tab.Pane attached={false}>
-                            {contentsOfLaravel.contributors.map(contributor => (
-                              <RowContributors
-                                key={contributor.userPage}
-                                userPage={contributor.userPage}
-                                userName={contributor.userName}
-                                userImage={contributor.userImage}
-                                contributions={contributor.contributions}
-                              />
-                            ))}
-                          </Tab.Pane>
-                        ),
-                      },
-                    ]}
-                  />
-                </section>
-              </main>
-            </div>
-          ) : (
-            <div className="comingSoon">
-              <UnderConstructionSVG size={'200px'} />
-              <h2>{`${this.props.url.query
-                .id} and other guides coming soon...!`}</h2>
-            </div>
-          )}
-          <style jsx>{`
-            main {
-              background-color: #ffffff;
-              padding-top: 30px;
-              padding-bottom: 30px;
-              padding-left: 30px;
-              padding-right: 30px;
-              min-height: calc(100vh - 70px);
-            }
-            section {
-              max-width: 800px;
-              margin: 0 auto;
-            }
-            h2 {
-              text-transform: uppercase;
-              padding-bottom: 10px;
-            }
-            divide {
-              width: 100%;
-            }
-            .comingSoon {
-              min-height: calc(100vh - 70px);
-              background: #f4f7fb;
-              color: #314159;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              flex-direction: column;
-            }
-          `}</style>
-        </div>
-      );
-    }
-  },
-);
+export default props => {
+  return (
+    <Layout>
+      <BannerSection textInverted title={props.url.query.id.toUpperCase()} subTitle="Coming Soon..." />
+    </Layout>
+  );
+};
diff --git a/pages/login.js b/pages/login.js
new file mode 100644
index 000000000..0caf64ee2
--- /dev/null
+++ b/pages/login.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Layout from '../components/common/layout';
+import BannerSection from '../components/common/banner';
+
+export default () => {
+  return (
+    <Layout>
+      <BannerSection textInverted title="Login / Register" subTitle="Coming Soon..." />
+    </Layout>
+  );
+};
diff --git a/pages/space.js b/pages/space.js
index 2770ee67c..e062afd8c 100644
--- a/pages/space.js
+++ b/pages/space.js
@@ -1,144 +1,145 @@
 import React from 'react';
-import { Card, Segment, Header, Divider } from 'semantic-ui-react';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
+import FaCalender from 'react-icons/lib/fa/calendar';
+import { Timeline, TimelineEvent } from 'react-event-timeline'; // eslint-disable-line import/no-unresolved
 
-import CommonBanner from '../components/common-banner';
-import publicPage from '../hocs/public-page';
+import Layout from '../components/common/layout';
+import BannerSection from '../components/common/banner';
+import { Container, Title, breakpoints, SubTitle } from '../utils/base.styles';
 
-export default publicPage(() => (
-  <div>
-    <CommonBanner
-      pageTitle="Space"
-      pageSubTitle="Physical spaces for collaboration, peer-learning and self-learning. These are dynamic learning environments, where everyone learns at their own pace and
-            compliments each other. You can also participate in weekly group activities like Open
-            source evenings and other casual competitions"
+const ForWhomSection = styled.section`
+  ${space};
+  background: #fff;
+  color: #222;
+  text-align: center;
+  & ul {
+    text-align: left;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 1.1rem;
+    line-height: 2rem;
+    ${breakpoints.md} {
+      font-size: 1rem;
+    }
+    ${breakpoints.sm} {
+      font-size: 1rem;
+    }
+    ${breakpoints.xs} {
+      font-size: 0.9rem;
+    }
+  }
+`;
+
+const ActivitySection = styled.section`
+  ${space};
+  background: #fbfbfb;
+  color: #222;
+  text-align: center;
+`;
+
+const ActivityTimeline = styled(Timeline)`
+  max-width: 600px;
+  text-align: left;
+`;
+
+const ActiviteEvent = styled(TimelineEvent)`
+  font-size: 1.5rem;
+  ${breakpoints.sm} {
+    font-size: 1.2rem;
+  }
+  ${breakpoints.xs} {
+    font-size: 1rem;
+  }
+`;
+
+const PricingSection = styled.section`
+  ${space};
+  background: #fff;
+  text-align: center;
+  position: relative;
+`;
+
+const forWhomPoints = [
+  'People who are genuinely passionate about tech, who get excited about learning new skills, building, solving and discussing problems in latest tech.',
+  'Graduates who are struggling to get a job, who want to build their expertise in modern technologies and are willing to invest a significant amount of their time self-learning',
+  'Students who are willing to learn outside of their college curriculum, would like to become professional developers down the line and get exposure to the real world',
+  'Experienced developers, who want to interact with other developers, contribute to open source, expand their horizons and learn new technologies.',
+  'Professionals from non-tech background, who want to get started with tech or switch their careers.',
+];
+
+const activities = [
+  {
+    day: 'Daily',
+    task: 'You will engage in daily code review and pair programming exercises with other members.',
+  },
+  {
+    day: 'Wednesday',
+    task:
+      'We will have an Open Source Evening, where everyone will be encouraged to find open source projects and contribute to them.',
+  },
+  {
+    day: 'Thursday',
+    task:
+      'We will have a casual coding competition, where members will participate to solve coding challenges together.',
+  },
+  {
+    day: 'Friday',
+    task: 'We will have casual hackathons, where everyone will participate to build a project, big or small.',
+  },
+  {
+    day: 'Saturday',
+    task: 'In the evening, we will screen a tech-related documentary, movie or TV show.',
+  },
+  {
+    day: 'Sunday',
+    task: 'Members will present their work i.e. projects or new topics they have made or learned in the past week',
+  },
+];
+
+export default () => (
+  <Layout>
+    <BannerSection
+      textInverted
+      title="Offline Co-Learning Spaces"
+      subTitle="Physical spaces for collaboration, peer-learning and self-learning"
     />
-    <main>
-      <section>
-        <h2>Who is this for?</h2>
-        <div>
-          <Segment.Group raised piled>
-            <Segment textAlign="left">
-              People who are genuinely passionate about tech, who get excited
-              about learning new skills, building, solving and discussing
-              problems in latest tech.
-            </Segment>
-            <Segment textAlign="left" secondary>
-              Graduates who are struggling to get a job, who want to build their
-              expertise in modern technologies and are willing to invest a
-              significant amount of their time self-learning
-            </Segment>
-            <Segment textAlign="left">
-              Students who are willing to learn outside of their college
-              curriculum, would like to become professional developers down the
-              line and get exposure to the real world
-            </Segment>
-            <Segment textAlign="left" secondary>
-              Experienced developers, who want to interact with other
-              developers, contribute to open source, expand their horizons and
-              learn new technologies.
-            </Segment>
-            <Segment textAlign="left">
-              Professionals from non-tech background, who want to get started
-              with tech or switch their careers.
-            </Segment>
-          </Segment.Group>
-        </div>
-      </section>
-      <section>
-        <h2>Activities & Schedule</h2>
-        <div>
-          <Segment.Group raised piled>
-            <Segment textAlign="left">
-              We will help you pick a technology and provide you with learning
-              guides to learn and build something on a daily basis.
-            </Segment>
-            <Segment textAlign="left" secondary>
-              <h4>Daily</h4>
-              You will engage in daily code review and pair programming
-              exercises with other members.
-            </Segment>
-            <Segment textAlign="left">
-              <h4>Wednesday</h4>
-              We will have an Open Source Evening, where everyone will be
-              encouraged to find open source projects and contribute to them.
-            </Segment>
-            <Segment textAlign="left" secondary>
-              <h4>Thursday</h4>
-              We will have a casual coding competition, where members will
-              participate to solve coding challenges together.
-            </Segment>
-            <Segment textAlign="left">
-              <h4>Friday - Saturday</h4>
-              We will have casual hackathons, where everyone will participate to
-              build a project, big or small.
-            </Segment>
-            <Segment textAlign="left" secondary>
-              <h4>Saturday</h4>
-              In the evening, we will screen a tech-related documentary, movie
-              or TV show.
-            </Segment>
-            <Segment textAlign="left">
-              <h4>Sunday</h4>
-              Members will present their work i.e. projects or new topics they
-              have made or learned in the past week
-            </Segment>
-          </Segment.Group>
-        </div>
-      </section>
-      <divide>
-        <Divider section />
-      </divide>
-      <section>
-        <h2>Pricing</h2>
-        <div>
-          <Card>
-            <Card.Content>
-              <Segment inverted color="pink">
-                <Header as="h2" inverted>
-                  INR 1000/-
-                  <Header.Subheader>per month</Header.Subheader>
-                </Header>
-              </Segment>
-              <Card.Description>
-                For membership mail us<br />space@coderplex.org
-              </Card.Description>
-            </Card.Content>
-          </Card>
-        </div>
-        <h2>Mode of payment</h2>
-        <Segment.Group horizontal>
-          <Segment>UPI</Segment>
-          <Segment>PayTM</Segment>
-          <Segment>Cash</Segment>
-        </Segment.Group>
-      </section>
-    </main>
-    <style jsx>{`
-      main {
-        background-color: #ffffff;
-        padding-top: 30px;
-        padding-bottom: 30px;
-        padding-left: 30px;
-        padding-right: 30px;
-        min-height: calc(100vh - 70px);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        text-align: center;
-        margin: 0 auto;
-      }
-      section {
-        max-width: 800px;
-        margin: 50px 0;
-      }
-      h2 {
-        text-transform: uppercase;
-        padding-bottom: 10px;
-      }
-      divide {
-        width: 100%;
-      }
-    `}</style>
-  </div>
-));
+    <ForWhomSection py={[2, 4]} px={[2, 1]}>
+      <Container>
+        <Title inverted color="#222">
+          Who Is This For?
+        </Title>
+        <ul>{forWhomPoints.map(point => <li key={point}>{point}</li>)}</ul>
+      </Container>
+    </ForWhomSection>
+    <ActivitySection py={[2, 4]} px={[2, 1]}>
+      <Container>
+        <Title inverted color="#222">
+          Activites and Schedule
+        </Title>
+        <SubTitle inverted>
+          We will help you pick a technology and provide you with learning guides to learn and build something on a
+          daily basis.
+        </SubTitle>
+        <ActivityTimeline>
+          {activities.map(activity => (
+            <ActiviteEvent key={activity.day} title={activity.day} icon={<FaCalender />} iconColor="#222">
+              {activity.task}
+            </ActiviteEvent>
+          ))}
+        </ActivityTimeline>
+      </Container>
+    </ActivitySection>
+    <PricingSection py={[2, 4]} px={[2, 1]}>
+      <Container>
+        <Title inverted color="#222">
+          Pricing
+        </Title>
+        <SubTitle inverted>
+          INR 1000/- per month. For membership mail us at <a href="mailto:space@codeplex.org">space@coderplex.org</a>
+        </SubTitle>
+      </Container>
+    </PricingSection>
+  </Layout>
+);
diff --git a/static/banner.png b/static/banner.png
deleted file mode 100644
index 87e7ad92f..000000000
Binary files a/static/banner.png and /dev/null differ
diff --git a/static/banner1280x370.png b/static/banner1280x370.png
deleted file mode 100644
index d1fb5275e..000000000
Binary files a/static/banner1280x370.png and /dev/null differ
diff --git a/static/bg.png b/static/bg.png
deleted file mode 100644
index eab6d06d2..000000000
Binary files a/static/bg.png and /dev/null differ
diff --git a/static/favicons/manifest.json b/static/favicons/manifest.json
index ebd929b74..2ddc86456 100644
--- a/static/favicons/manifest.json
+++ b/static/favicons/manifest.json
@@ -1,18 +1,21 @@
 {
-    "name": "CoderPlex",
-    "icons": [
-        {
-            "src": "/static/favicons/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/static/favicons/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#c201b9",
-    "background_color": "#c201b9",
-    "display": "standalone"
-}
\ No newline at end of file
+  "name": "CoderPlex",
+  "short_name": "CoderPlex",
+  "icons": [
+    {
+      "src": "/static/favicons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/favicons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#c201b9",
+  "background_color": "#c201b9",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait-primary"
+}
diff --git a/static/wordcloud.png b/static/wordcloud.png
deleted file mode 100644
index 10a1ccef2..000000000
Binary files a/static/wordcloud.png and /dev/null differ
diff --git a/utils/base.styles.js b/utils/base.styles.js
new file mode 100644
index 000000000..6d613a889
--- /dev/null
+++ b/utils/base.styles.js
@@ -0,0 +1,101 @@
+import styled, { css } from 'react-emotion';
+
+export const breakpoints = {
+  xs: '@media screen and (max-width: 40em)',
+  sm: '@media screen and (min-width: 40em) and (max-width: 52em)',
+  md: '@media screen and (min-width: 52em) and (max-width: 64em)',
+  lg: '@media screen and (min-width: 64em)',
+};
+
+export const hidden = key => props =>
+  props[key]
+    ? {
+        [breakpoints[key]]: {
+          display: 'none',
+        },
+      }
+    : null;
+
+export const xs = hidden('xs');
+export const sm = hidden('sm');
+export const md = hidden('md');
+export const lg = hidden('lg');
+
+const Hide = styled.div([], xs, sm, md, lg);
+
+export const baseContainer = css`
+  max-width: 1024px;
+  margin: 0 auto;
+`;
+
+export const Container = styled.div`
+  ${baseContainer};
+`;
+
+export const baseButton = css`
+  background: #7657fb;
+  padding: 0.2rem 1rem;
+  color: #fff;
+  text-decoration: none;
+  &:hover {
+    background: #6f19ed;
+    font-weight: normal;
+  }
+`;
+
+export const Button = styled.a`
+  ${baseButton};
+  background: ${props => (props.inverted ? '#7657fb' : '#fff')}
+  color: ${props => (props.inverted ? '#fff' : '#222')}
+  padding: ${props => (props.large ? '0.8rem 2.25rem' : props.medium ? '0.6rem 1.2rem' : '0.2rem 1rem')};
+  font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '1rem')}
+  cursor: pointer;
+  user-select: none;
+  -webkit-touch-callout: none;
+  &:hover {
+    background: ${props => (props.inverted ? '#6f19ed' : '#eee')};
+  }
+`;
+
+export const Title = styled.h2`
+  font-size: 2rem;
+  font-weight: 400;
+  color: ${props => (props.inverted ? (props.color ? props.color : '#7657fb') : '#fff')};
+  ${breakpoints.md} {
+    font-size: 1.8rem;
+  }
+  ${breakpoints.sm} {
+    font-size: 1.8rem;
+    line-height: 1.8rem;
+    text-align: center;
+  }
+  ${breakpoints.xs} {
+    font-size: 1.8rem;
+    line-height: 2rem;
+    text-align: center;
+  }
+`;
+
+export const SubTitle = styled.h3`
+  font-size: ${props => (props.small ? '1rem' : '1.2rem')};
+  font-weight: 400;
+  color: ${props => (props.inverted ? '#222' : '#fff')};
+  max-width: 900px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: ${props => (props.small ? '1.4rem' : '2rem')};
+  ${breakpoints.md} {
+    font-size: 1rem;
+  }
+  ${breakpoints.sm} {
+    font-size: 1rem;
+    text-align: center;
+  }
+  ${breakpoints.xs} {
+    font-size: 0.9rem;
+    text-align: center;
+    line-height: ${props => (props.small ? '1.4rem' : '1.8rem')};
+  }
+`;
+
+export default Hide;
diff --git a/utils/mock-data.js b/utils/mock-data.js
index abaea1909..3805f8d07 100644
--- a/utils/mock-data.js
+++ b/utils/mock-data.js
@@ -25,7 +25,7 @@ export const listOfSubjects = [
     domain: 'Programming Language',
     url: '/learn/go',
     subjectId: 'go',
-    icon: 'devicon-go-plain ',
+    icon: 'devicon-go-plain colored',
     learningCount: '7',
     learnGuideStatus: false,
   },
@@ -93,43 +93,37 @@ export const listOfSubjects = [
 
 export const indexPageLearns = [
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md',
+    link: 'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md',
     title: 'ReactJS',
     subject: 'Frontend Web Development',
     image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Laravel.md',
+    link: 'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Laravel.md',
     title: 'Laravel',
     subject: 'Backend Web Development',
     image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/programming-languages/Go/learn-go.md',
+    link: 'https://github.com/coderplex/learn/blob/master/programming-languages/Go/learn-go.md',
     title: 'Go',
     subject: 'Programming Language',
     image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/computer-science/Learn-CS.md',
+    link: 'https://github.com/coderplex/learn/blob/master/computer-science/Learn-CS.md',
     title: 'Introduction to C.S',
     subject: 'Computer Science',
     image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/Blockchain/blockchain-basics.md',
+    link: 'https://github.com/coderplex/learn/blob/master/Blockchain/blockchain-basics.md',
     title: 'Blockchain',
     subject: 'Decentralized Systems',
     image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/mobile-dev/Android/learn-android.md',
+    link: 'https://github.com/coderplex/learn/blob/master/mobile-dev/Android/learn-android.md',
     title: 'Android',
     subject: 'Mobile Development',
     image: '',
@@ -149,8 +143,7 @@ export const listOfDomains = [
 
 export const contentsOfLaravel = {
   logo: 'devicon-laravel-plain colored',
-  overview:
-    'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/overview.md',
+  overview: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/overview.md',
   guides: [
     {
       name: 'Prerequisites',
@@ -224,8 +217,7 @@ export const contentsOfLaravel = {
     {
       userName: 'Vinay Puppal',
       userPage: 'https://www.vinaypuppal.com/',
-      userImage:
-        'https://s3-us-west-2.amazonaws.com/s.cdpn.io/214440/profile/profile-512.jpg?2',
+      userImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/214440/profile/profile-512.jpg?2',
       contributions: [
         {
           type: 'topic',
diff --git a/yarn.lock b/yarn.lock
index 6914ec6b8..3622626a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,73 @@
 # yarn lockfile v1
 
 
+"@babel/code-frame@7.0.0-beta.32", "@babel/code-frame@^7.0.0-beta.31":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.32.tgz#04f231b8ec70370df830d9926ce0f5add074ec4c"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+"@babel/helper-function-name@7.0.0-beta.32":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.32.tgz#6161af4419f1b4e3ed2d28c0c79c160e218be1f3"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-beta.32"
+    "@babel/template" "7.0.0-beta.32"
+    "@babel/types" "7.0.0-beta.32"
+
+"@babel/helper-get-function-arity@7.0.0-beta.32":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.32.tgz#93721a99db3757de575a83bab7c453299abca568"
+  dependencies:
+    "@babel/types" "7.0.0-beta.32"
+
+"@babel/helper-module-imports@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.31.tgz#75d246ab1d7528a571a5b326b5380cd3e3c103c0"
+  dependencies:
+    "@babel/types" "7.0.0-beta.31"
+    lodash "^4.2.0"
+
+"@babel/template@7.0.0-beta.32":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.32.tgz#e1d9fdbd2a7bcf128f2f920744a67dab18072495"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.32"
+    "@babel/types" "7.0.0-beta.32"
+    babylon "7.0.0-beta.32"
+    lodash "^4.2.0"
+
+"@babel/traverse@^7.0.0-beta.31":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.32.tgz#b78b754c6e1af3360626183738e4c7a05951bc99"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.32"
+    "@babel/helper-function-name" "7.0.0-beta.32"
+    "@babel/types" "7.0.0-beta.32"
+    babylon "7.0.0-beta.32"
+    debug "^3.0.1"
+    globals "^10.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+"@babel/types@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.31.tgz#42c9c86784f674c173fb21882ca9643334029de4"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@7.0.0-beta.32", "@babel/types@^7.0.0-beta.31":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.32.tgz#c317d0ecc89297b80bbcb2f50608e31f6452a5ff"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@semantic-release/commit-analyzer@^3.0.1":
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/@semantic-release/commit-analyzer/-/commit-analyzer-3.0.7.tgz#dc955444a6d3d2ae9b8e21f90c2c80c4e9142b2f"
@@ -48,8 +115,8 @@
     pify "^3.0.0"
 
 "@types/node@*":
-  version "8.0.50"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.50.tgz#dc545448e128c88c4eec7cd64025fcc3b7604541"
+  version "8.0.53"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.53.tgz#396b35af826fa66aad472c8cb7b8d5e277f4e6d8"
 
 JSONStream@^1.0.4:
   version "1.3.1"
@@ -320,6 +387,10 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+
 async@^1.4.0, async@~1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@@ -346,14 +417,6 @@ aws4@^1.2.1, aws4@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
-babel-code-frame@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-7.0.0-beta.0.tgz#418a7b5f3f7dc9a4670e61b1158b4c5661bec98d"
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
-
 babel-code-frame@^6.16.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -387,13 +450,13 @@ babel-core@6.26.0, babel-core@^6.0.0, babel-core@^6.26.0:
     source-map "^0.5.6"
 
 babel-eslint@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.0.1.tgz#5d718be7a328625d006022eb293ed3008cbd6346"
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.0.2.tgz#e44fb9a037d749486071d52d65312f5c20aa7530"
   dependencies:
-    babel-code-frame "7.0.0-beta.0"
-    babel-traverse "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-    babylon "7.0.0-beta.22"
+    "@babel/code-frame" "^7.0.0-beta.31"
+    "@babel/traverse" "^7.0.0-beta.31"
+    "@babel/types" "^7.0.0-beta.31"
+    babylon "^7.0.0-beta.31"
 
 babel-generator@6.26.0, babel-generator@^6.18.0, babel-generator@^6.26.0:
   version "6.26.0"
@@ -450,15 +513,6 @@ babel-helper-explode-assignable-expression@^6.24.1:
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
-babel-helper-function-name@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-7.0.0-beta.0.tgz#d1b6779b647e5c5c31ebeb05e13b998e4d352d56"
-  dependencies:
-    babel-helper-get-function-arity "7.0.0-beta.0"
-    babel-template "7.0.0-beta.0"
-    babel-traverse "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-
 babel-helper-function-name@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz#d3475b8c03ed98242a25b48351ab18399d3580a9"
@@ -469,12 +523,6 @@ babel-helper-function-name@^6.24.1:
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
-babel-helper-get-function-arity@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-7.0.0-beta.0.tgz#9d1ab7213bb5efe1ef1638a8ea1489969b5a8b6e"
-  dependencies:
-    babel-types "7.0.0-beta.0"
-
 babel-helper-get-function-arity@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz#8f7782aa93407c41d3aa50908f89b031b1b6853d"
@@ -489,6 +537,13 @@ babel-helper-hoist-variables@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
+babel-helper-module-imports@^7.0.0-beta.3:
+  version "7.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-module-imports/-/babel-helper-module-imports-7.0.0-beta.3.tgz#e15764e3af9c8e11810c09f78f498a2bdc71585a"
+  dependencies:
+    babel-types "7.0.0-beta.3"
+    lodash "^4.2.0"
+
 babel-helper-optimise-call-expression@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz#f7a13427ba9f73f8f4fa993c54a97882d1244257"
@@ -547,9 +602,11 @@ babel-loader@7.1.2:
     loader-utils "^1.0.2"
     mkdirp "^0.5.1"
 
-babel-messages@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-7.0.0-beta.0.tgz#6df01296e49fc8fbd0637394326a167f36da817b"
+babel-macros@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/babel-macros/-/babel-macros-1.2.0.tgz#39e47ed6d286d4a98f1948d8bab45dac17e4e2d4"
+  dependencies:
+    cosmiconfig "3.1.0"
 
 babel-messages@^6.23.0:
   version "6.23.0"
@@ -563,6 +620,18 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-emotion@^8.0.10:
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-8.0.10.tgz#9247856d60718f3a741a8487ef907d95a4f5b8a7"
+  dependencies:
+    "@babel/helper-module-imports" "7.0.0-beta.31"
+    babel-macros "^1.2.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    emotion-utils "^8.0.10"
+    source-map "^0.5.7"
+    touch "^1.0.0"
+
 babel-plugin-istanbul@^4.0.0:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.5.tgz#6760cdd977f411d3e175bb064f2bc327d99b2b6e"
@@ -576,11 +645,14 @@ babel-plugin-jest-hoist@^21.2.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-21.2.0.tgz#2cef637259bd4b628a6cace039de5fcd14dbb006"
 
 babel-plugin-lodash@^3.2.11:
-  version "3.2.11"
-  resolved "https://registry.yarnpkg.com/babel-plugin-lodash/-/babel-plugin-lodash-3.2.11.tgz#21c8fdec9fe1835efaa737873e3902bdd66d5701"
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-lodash/-/babel-plugin-lodash-3.3.2.tgz#da3a5b49ba27447f54463f6c4fa81396ccdd463f"
   dependencies:
+    babel-helper-module-imports "^7.0.0-beta.3"
+    babel-types "^6.26.0"
     glob "^7.1.1"
-    lodash "^4.17.2"
+    lodash "^4.17.4"
+    require-package-name "^2.0.1"
 
 babel-plugin-module-resolver@2.7.1:
   version "2.7.1"
@@ -614,7 +686,7 @@ babel-plugin-syntax-flow@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
 
-babel-plugin-syntax-jsx@6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+babel-plugin-syntax-jsx@6.18.0, babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
@@ -957,7 +1029,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.25.0, babel-runtime@^6.26.0:
+babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -974,29 +1046,6 @@ babel-template@6.26.0, babel-template@^6.16.0, babel-template@^6.24.1, babel-tem
     babylon "^6.18.0"
     lodash "^4.17.4"
 
-babel-template@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-7.0.0-beta.0.tgz#85083cf9e4395d5e48bf5154d7a8d6991cafecfb"
-  dependencies:
-    babel-traverse "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-    babylon "7.0.0-beta.22"
-    lodash "^4.2.0"
-
-babel-traverse@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-7.0.0-beta.0.tgz#da14be9b762f62a2f060db464eaafdd8cd072a41"
-  dependencies:
-    babel-code-frame "7.0.0-beta.0"
-    babel-helper-function-name "7.0.0-beta.0"
-    babel-messages "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-    babylon "7.0.0-beta.22"
-    debug "^3.0.1"
-    globals "^10.0.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
-
 babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.25.0, babel-traverse@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
@@ -1020,9 +1069,9 @@ babel-types@6.23.0:
     lodash "^4.2.0"
     to-fast-properties "^1.0.1"
 
-babel-types@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-7.0.0-beta.0.tgz#eb8b6e556470e6dcc4aef982d79ad229469b5169"
+babel-types@7.0.0-beta.3:
+  version "7.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-7.0.0-beta.3.tgz#cd927ca70e0ae8ab05f4aab83778cfb3e6eb20b4"
   dependencies:
     esutils "^2.0.2"
     lodash "^4.2.0"
@@ -1037,9 +1086,9 @@ babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
-babylon@7.0.0-beta.22:
-  version "7.0.0-beta.22"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.22.tgz#74f0ad82ed7c7c3cfeab74cf684f815104161b65"
+babylon@7.0.0-beta.32, babylon@^7.0.0-beta.31:
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.32.tgz#e9033cb077f64d6895f4125968b37dc0a8c3bc6e"
 
 babylon@^6.18.0:
   version "6.18.0"
@@ -1388,10 +1437,6 @@ circular-json@^0.3.1:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
 
-classnames@^2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
-
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
@@ -1451,8 +1496,8 @@ codeclimate-test-reporter@^0.5.0:
     request "~2.79.0"
 
 color-convert@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
   dependencies:
     color-name "^1.1.1"
 
@@ -1645,7 +1690,7 @@ core-util-is@1.0.2, core-util-is@^1.0.1, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-cosmiconfig@^3.1.0:
+cosmiconfig@3.1.0, cosmiconfig@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-3.1.0.tgz#640a94bf9847f321800403cd273af60665c73397"
   dependencies:
@@ -2051,6 +2096,25 @@ emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
 
+emotion-server@^8.0.10:
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/emotion-server/-/emotion-server-8.0.10.tgz#159e214421a1346efdbb87716d9839a057872cb5"
+  dependencies:
+    emotion-utils "^8.0.10"
+
+emotion-utils@^8.0.10:
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/emotion-utils/-/emotion-utils-8.0.10.tgz#b42dd1386f07d74e45d5c78d7675f6c8f3165ae1"
+
+emotion@^8.0.10:
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-8.0.10.tgz#ea10f25afdd2039205aa488844c7c25dd559b7cd"
+  dependencies:
+    babel-plugin-emotion "^8.0.10"
+    emotion-utils "^8.0.10"
+    stylis "^3.3.2"
+    stylis-rule-sheet "^0.0.5"
+
 encodeurl@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
@@ -2081,8 +2145,8 @@ entities@^1.1.1, entities@~1.1.1:
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
 enzyme-adapter-react-16@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.4.tgz#67f898cc053452f5c786424e395fe0c63a0607fe"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.0.tgz#86c5db7c10f0be6ec25d54ca41b59f2abb397cf4"
   dependencies:
     enzyme-adapter-utils "^1.1.0"
     lodash "^4.17.4"
@@ -2106,18 +2170,19 @@ enzyme-to-json@^3.2.2:
     lodash "^4.17.4"
 
 enzyme@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.1.1.tgz#c6948dfccd055d75fbd8627ad1c96a024d0e247b"
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.2.0.tgz#998bdcda0fc71b8764a0017f7cc692c943f54a7a"
   dependencies:
     cheerio "^1.0.0-rc.2"
     function.prototype.name "^1.0.3"
+    has "^1.0.1"
     is-subset "^0.1.1"
     lodash "^4.17.4"
     object-is "^1.0.1"
     object.assign "^4.0.4"
     object.entries "^1.0.4"
     object.values "^1.0.4"
-    raf "^3.3.2"
+    raf "^3.4.0"
     rst-selector-parser "^2.2.3"
 
 errno@^0.1.2, errno@^0.1.3, errno@^0.1.4:
@@ -3040,6 +3105,14 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
+grid-emotion@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/grid-emotion/-/grid-emotion-2.1.0.tgz#5e62a8468f9cff4e50680afb9be9322a68336385"
+  dependencies:
+    prop-types "^15.6.0"
+    styled-system "^1.0.2"
+    tag-hoc "^1.0.0"
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -3276,6 +3349,12 @@ ignore@^3.2.0, ignore@^3.2.6:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
 
+immutability-helper@^2.1.2:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.5.0.tgz#01ea7204334997c645bdfa7eb22e8b84c970946e"
+  dependencies:
+    invariant "^2.2.0"
+
 import-from@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
@@ -4103,7 +4182,7 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-lint-staged@5.0.0:
+lint-staged@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-5.0.0.tgz#f1c670e03e2fdf3f3d0eb81f72d3bcf658770e54"
   dependencies:
@@ -4300,6 +4379,10 @@ lodash.snakecase@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d"
 
+lodash.take@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.take/-/lodash.take-4.1.1.tgz#0b4146dcb7a70c6153495187fc10b12b71fefadf"
+
 lodash.template@^4.0.2:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
@@ -4317,7 +4400,7 @@ lodash.upperfirst@^4.2.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz#1365edf431480481ef0d1c68957a5ed99d49f7ce"
 
-lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
+lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -5261,6 +5344,37 @@ pluralize@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
 
+preact-compat@^3.17.0:
+  version "3.17.0"
+  resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.17.0.tgz#528cfdfc301190c1a0f47567336be1f4be0266b3"
+  dependencies:
+    immutability-helper "^2.1.2"
+    preact-render-to-string "^3.6.0"
+    preact-transition-group "^1.1.0"
+    prop-types "^15.5.8"
+    standalone-react-addons-pure-render-mixin "^0.1.1"
+
+preact-emotion@^8.0.10:
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/preact-emotion/-/preact-emotion-8.0.10.tgz#e375602ac0f4aa5eff921e96f55a174e405d7792"
+  dependencies:
+    babel-plugin-emotion "^8.0.10"
+    emotion-utils "^8.0.10"
+
+preact-render-to-string@^3.6.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-3.7.0.tgz#7db4177454bc01395e0d01d6ac07bc5e838e31ee"
+  dependencies:
+    pretty-format "^3.5.1"
+
+preact-transition-group@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/preact-transition-group/-/preact-transition-group-1.1.1.tgz#f0a49327ea515ece34ea2be864c4a7d29e5d6e10"
+
+preact@^8.2.6:
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-8.2.6.tgz#0028b426ef98fcca741a3c617ff5b813b9a947c7"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -5274,8 +5388,8 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
 prettier@^1.7.0:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa"
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.8.2.tgz#bff83e7fd573933c607875e5ba3abbdffb96aeb8"
 
 pretty-format@^21.2.1:
   version "21.2.1"
@@ -5284,6 +5398,10 @@ pretty-format@^21.2.1:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+pretty-format@^3.5.1:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
+
 private@^0.1.6, private@^0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -5394,7 +5512,7 @@ querystring@0.2.0, querystring@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
-raf@^3.3.0, raf@^3.3.2, raf@^3.4.0:
+raf@^3.3.0, raf@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
   dependencies:
@@ -5458,14 +5576,27 @@ react-deep-force-update@^2.1.1:
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz#8ea4263cd6455a050b37445b3f08fd839d86e909"
 
 react-dom@^16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.1.1.tgz#b2e331b6d752faf1a2d31399969399a41d8d45f8"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-emotion@^8.0.10:
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/react-emotion/-/react-emotion-8.0.10.tgz#452371f463cd5184f318d27860275564867b6693"
+  dependencies:
+    babel-plugin-emotion "^8.0.10"
+    emotion-utils "^8.0.10"
+
+react-event-timeline@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-event-timeline/-/react-event-timeline-1.4.0.tgz#3a2e2e779f45fe1190148b9b6d1c2c90167cdbab"
+  dependencies:
+    prop-types "^15.6.0"
+
 react-headroom@^2.1.6:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-headroom/-/react-headroom-2.2.2.tgz#5ddea3bc87cd54be38f6f98c3fde4527e2a5fb0f"
@@ -5501,15 +5632,16 @@ react-proxy@^3.0.0-alpha.0:
     lodash "^4.6.1"
 
 react-test-renderer@^16.0.0, react-test-renderer@^16.0.0-0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.0.0.tgz#9fe7b8308f2f71f29fc356d4102086f131c9cb15"
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.1.1.tgz#a05184688d564be799f212449262525d1e350537"
   dependencies:
     fbjs "^0.8.16"
     object-assign "^4.1.1"
+    prop-types "^15.6.0"
 
 react@^16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.1.1.tgz#d5c4ef795507e3012282dd51261ff9c0e824fe1f"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -5811,6 +5943,10 @@ require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
 
+require-package-name@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/require-package-name/-/require-package-name-2.0.1.tgz#c11e97276b65b8e2923f75dabf5fb2ef0c3841b9"
+
 require-relative@^0.8.7:
   version "0.8.7"
   resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
@@ -5917,10 +6053,6 @@ safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, s
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
-safe-buffer@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
-
 sane@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/sane/-/sane-2.2.0.tgz#d6d2e2fcab00e3d283c93b912b7c3a20846f1d56"
@@ -5963,15 +6095,6 @@ semantic-release@^8.0.3:
     require-relative "^0.8.7"
     semver "^5.4.1"
 
-semantic-ui-react@^0.76.0:
-  version "0.76.0"
-  resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.76.0.tgz#39d8135416d787d904e0361399006fb8e0b24c8a"
-  dependencies:
-    babel-runtime "^6.25.0"
-    classnames "^2.2.5"
-    lodash "^4.17.4"
-    prop-types "^15.5.10"
-
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
@@ -6128,7 +6251,7 @@ source-map@^0.4.4:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3, source-map@~0.5.6:
+source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3, source-map@~0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
@@ -6204,6 +6327,10 @@ staged-git-files@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/staged-git-files/-/staged-git-files-0.0.4.tgz#d797e1b551ca7a639dec0237dc6eb4bb9be17d35"
 
+standalone-react-addons-pure-render-mixin@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/standalone-react-addons-pure-render-mixin/-/standalone-react-addons-pure-render-mixin-0.1.1.tgz#3c7409f4c79c40de9ac72c616cf679a994f37551"
+
 "statuses@>= 1.2.1 < 2", "statuses@>= 1.3.1 < 2":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
@@ -6341,14 +6468,28 @@ styled-jsx@2.1.1:
     stylis "3.3.2"
     stylis-rule-sheet "0.0.6"
 
+styled-system@^1.0.2, styled-system@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-1.0.8.tgz#a5a08ab26a8cc27e7a22e743d623211b82482b5e"
+  dependencies:
+    prop-types "^15.6.0"
+
 stylis-rule-sheet@0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.6.tgz#059f89125a8e8db546e8adb0e07c4b4bcb81911b"
 
+stylis-rule-sheet@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.5.tgz#ebae935cc1f6fb31b9b62dba47f2ea8b833dad9f"
+
 stylis@3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.3.2.tgz#95ef285836e98243f8b8f64a9a72706ea6c893ea"
 
+stylis@^3.3.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.2.tgz#336c5e33a673c7111c10fa18f8b9e41e1772bd98"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -6388,6 +6529,10 @@ table@^3.7.8:
     slice-ansi "0.0.4"
     string-width "^2.0.0"
 
+tag-hoc@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tag-hoc/-/tag-hoc-1.0.0.tgz#36ddc5f8831c40926ea520743cbddcc34f3c3ed9"
+
 tapable@^0.2.7:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"
@@ -6504,6 +6649,12 @@ touch@3.1.0:
   dependencies:
     nopt "~1.0.10"
 
+touch@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de"
+  dependencies:
+    nopt "~1.0.10"
+
 tough-cookie@^2.3.2, tough-cookie@~2.3.0, tough-cookie@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
@@ -6583,6 +6734,22 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript-styled-plugin@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/typescript-styled-plugin/-/typescript-styled-plugin-0.2.0.tgz#9514de01a47bd20d3f157b0472c276a1db709f6e"
+  dependencies:
+    typescript-template-language-service-decorator "^1.0.0"
+    vscode-css-languageservice "^2.1.10"
+    vscode-languageserver-types "^3.4.0"
+
+typescript-template-language-service-decorator@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/typescript-template-language-service-decorator/-/typescript-template-language-service-decorator-1.0.1.tgz#1d4cc508887ddeca44b64df0496bd37443efe471"
+
+typescript@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.1.tgz#ef39cdea27abac0b500242d6726ab90e0c846631"
+
 ua-parser-js@^0.7.9:
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
@@ -6732,6 +6899,21 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vscode-css-languageservice@^2.1.10:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-2.1.11.tgz#051ad9681d50ceee5f83a20142c8c659a8011ede"
+  dependencies:
+    vscode-languageserver-types "^3.4.0"
+    vscode-nls "^2.0.1"
+
+vscode-languageserver-types@^3.4.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.5.0.tgz#e48d79962f0b8e02de955e3f524908e2b19c0374"
+
+vscode-nls@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-2.0.2.tgz#808522380844b8ad153499af5c3b03921aea02da"
+
 walk@2.3.9, walk@^2.3.9:
   version "2.3.9"
   resolved "https://registry.yarnpkg.com/walk/-/walk-2.3.9.tgz#31b4db6678f2ae01c39ea9fb8725a9031e558a7b"
@@ -6768,8 +6950,8 @@ webidl-conversions@^4.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
 
 webpack-bundle-analyzer@^2.8.3:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.0.tgz#b58bc34cc30b27ffdbaf3d00bf27aba6fa29c6e3"
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.1.tgz#c2c8e03e8e5768ed288b39ae9e27a8b8d7b9d476"
   dependencies:
     acorn "^5.1.1"
     chalk "^1.1.3"
@@ -6781,7 +6963,7 @@ webpack-bundle-analyzer@^2.8.3:
     lodash "^4.17.4"
     mkdirp "^0.5.1"
     opener "^1.4.3"
-    ws "^2.3.1"
+    ws "^3.3.1"
 
 webpack-dev-middleware@1.12.0:
   version "1.12.0"
@@ -6952,11 +7134,12 @@ write@^0.2.1:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-2.3.1.tgz#6b94b3e447cb6a363f785eaf94af6359e8e81c80"
+ws@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.1.tgz#d97e34dee06a1190c61ac1e95f43cb60b78cf939"
   dependencies:
-    safe-buffer "~5.0.1"
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
     ultron "~1.1.0"
 
 xdg-basedir@^3.0.0:
