diff --git a/components/header.js b/components/header.js
index b44475dff..caa250b39 100644
--- a/components/header.js
+++ b/components/header.js
@@ -87,7 +87,7 @@ export default props => {
           padding: 5px 20px;
           width: 100%;
           background: #fff;
-          z-index: 1000
+          z-index: 1000;
         }
         .header__container {
           max-width: 1280px;
diff --git a/components/row-events.js b/components/row-events.js
index 258150198..872b4544d 100644
--- a/components/row-events.js
+++ b/components/row-events.js
@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 
 const extractImageUrl = input => {
   const regex = /<img.*?src=['"](.*?)['"]/;
-  return regex.exec(input)[1];
+  const matches = regex.exec(input);
+  return matches ? matches[1] : '';
 };
 
 const RowEvent = props => {
diff --git a/components/top-banner.js b/components/top-banner.js
new file mode 100644
index 000000000..d8fbdaaaf
--- /dev/null
+++ b/components/top-banner.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default props => (
+  <div>
+    <div>
+      <div className="top_banner_root">
+        <h1 className="top_banner_headline">{props.pageTitle}</h1>
+        <h2>{props.pageSubTitle}</h2>
+      </div>
+      <style jsx>{`
+        .top_banner_root {
+          background-color: #f4f7fb;
+          min-height: 200px;
+          text-align: center;
+        }
+        .top_banner_headline {
+          padding-top: 20px;
+          font-size: 4em;
+          color: #df1cb5;
+          font-weight: 900;
+        }
+      `}</style>
+    </div>
+  </div>
+);
diff --git a/package.json b/package.json
index 97ea5cccf..25694cd4e 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "xo",
-    "lint": "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write --single-quote --print-width='80' --trailing-comma='all' && xo --fix",
+    "lint":
+      "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write --single-quote --print-width='80' --trailing-comma='all' && xo --fix",
     "precommit": "lint-staged",
     "analyze": "cross-env ANALYZE=1 next build",
     "dev": "cross-env NODE_ENV=development next",
@@ -15,24 +16,15 @@
   },
   "xo": {
     "parser": "babel-eslint",
-    "extends": [
-      "prettier",
-      "prettier/react",
-      "plugin:react/recommended"
-    ],
-    "env": [
-      "browser",
-      "node"
-    ],
+    "extends": ["prettier", "prettier/react", "plugin:react/recommended"],
+    "env": ["browser", "node"],
     "rules": {
       "linebreak-style": 0,
       "react/display-name": 0,
       "react/prop-types": 0
     },
     "space:": 2,
-    "ignores": [
-      "next.config.js"
-    ]
+    "ignores": ["next.config.js"]
   },
   "lint-staged": {
     "*.js": [
@@ -42,8 +34,15 @@
     ]
   },
   "keywords": [],
-  "author": "Vinay Puppal <me@vinaypuppal.com> (https://www.vinaypuppal.com/)",
-  "license": "BSD",
+  "contributors": [
+    "Vinay Puppal <me@vinaypuppal.com> (https://www.vinaypuppal.com/)",
+    "M-ZubairAhmed <ahmedzubari216@gmail.com> (https://github.com/M-ZubairAhmed)"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/coderplex/coderplex.git"
+  },
+  "license": "BSD-3-Clause",
   "dependencies": {
     "date-fns": "1.29.0",
     "feathers-rest": "^1.8.0",
@@ -58,7 +57,7 @@
     "react-headroom": "^2.1.6",
     "react-icons": "^2.2.5",
     "react-textgradient": "0.0.2",
-    "semantic-ui-react": "^0.71.3"
+    "semantic-ui-react": "^0.71.5"
   },
   "devDependencies": {
     "axios": "0.16.2",
diff --git a/pages/events.js b/pages/events.js
index ffc2e5cff..dcc8fb61f 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -3,6 +3,7 @@ import fetch from 'isomorphic-unfetch';
 import { Card, Divider, Dimmer, Loader } from 'semantic-ui-react';
 
 import publicPage from '../hocs/public-page';
+import TopBanner from '../components/top-banner';
 import { baseEventsURL, futureEventsURL, pastEventsURL } from '../utils/urls';
 import RowEvent from '../components/row-events';
 
@@ -98,10 +99,10 @@ class Events extends React.Component {
   render() {
     return (
       <div>
-        <div className="top_banner_root">
-          <h1 className="top_banner_headline">Events</h1>
-          <h2>Because you cannot change the world alone</h2>
-        </div>
+        <TopBanner
+          pageTitle="Events"
+          pageSubTitle="Because you cannot change the world alone"
+        />
         <main>
           {this.state.loading ? (
             <Dimmer active>
@@ -124,17 +125,6 @@ class Events extends React.Component {
             align-items: center;
             flex-direction: column;
           }
-          .top_banner_root {
-            background-color: #f4f7fb;
-            min-height: 200px;
-            text-align: center;
-          }
-          .top_banner_headline {
-            padding-top: 20px;
-            font-size: 4em;
-            color: #df1cb5;
-            font-weight: 900;
-          }
         `}</style>
       </div>
     );
diff --git a/pages/space.js b/pages/space.js
index 579be93c6..51f1b10f5 100644
--- a/pages/space.js
+++ b/pages/space.js
@@ -1,23 +1,153 @@
 import React from 'react';
+import { Card, Segment, Header, Divider } from 'semantic-ui-react';
 
-import Icon from '../components/icon';
+import TopBanner from '../components/top-banner';
 import publicPage from '../hocs/public-page';
 
 export default publicPage(() => (
   <div>
+    <TopBanner
+      pageTitle="Space"
+      pageSubTitle="Physical spaces for collaboration, peer-learning and self-learning"
+    />
     <main>
-      <Icon />
-      <h3>Under Construction, Coming Soon!...</h3>
+      <section>
+        <div>
+          <Card centered fluid>
+            <Card.Content>
+              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
+            </Card.Content>
+          </Card>
+        </div>
+      </section>
+      <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 technologis and are willing to invest
+              significant amount to their time self-learning
+            </Segment>
+            <Segment textAlign="left">
+              Students who are willing to learn outside of theri collegs
+              curriculum, would like to become professional developers down the
+              line and get exposire 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 technologis.
+            </Segment>
+            <Segment textAlign="left">
+              Professioanls 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 exercise
+              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 a casual hackathons, where everyone will participate
+              to build a project, big or small.
+            </Segment>
+            <Segment textAlign="left" secondary>
+              <h4>Saturday</h4>
+              In 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);
-        background: #f4f7fb;
-        color: #314159;
         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>
diff --git a/yarn.lock b/yarn.lock
index 6ad2a5879..0e13fb73b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5190,7 +5190,7 @@ semantic-release@^8.0.3:
     require-relative "^0.8.7"
     semver "^5.4.1"
 
-semantic-ui-react@^0.71.3:
+semantic-ui-react@^0.71.5:
   version "0.71.5"
   resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.71.5.tgz#c8713f1cbdd63815843949fb611602541d3a20d8"
   dependencies: