diff --git a/gatsby-config.js b/gatsby-config.js
index 5a6c085..b033a8a 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -25,7 +25,7 @@ module.exports = {
         background_color: `#663399`,
         theme_color: `#663399`,
         display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        icon: `src/images/favicon.png`, // This path is relative to the root of the site.
       },
     },
     // this (optional) plugin enables Progressive Web App + Offline functionality
diff --git a/package-lock.json b/package-lock.json
index 5e3e8de..0c9a23f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3471,6 +3471,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -9937,6 +9942,29 @@
       "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
       "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
     },
+    "jsonp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz",
+      "integrity": "sha1-pltPoPEL2nGaBUQep7lMVfPhW64=",
+      "requires": {
+        "debug": "^2.1.3"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -13303,6 +13331,15 @@
         "scheduler": "^0.18.0"
       }
     },
+    "react-share": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-share/-/react-share-4.1.0.tgz",
+      "integrity": "sha512-4/XqVBC+hreniU08zkzAkOGC3FPdJhcLzt1QCdybsZPd5ieUS++iChEEptvNoksiJ5NxbI2VRoDY9ovLAGl7GQ==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "jsonp": "^0.2.1"
+      }
+    },
     "react-side-effect": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz",
diff --git a/package.json b/package.json
index 70f4202..0a35edc 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "react-countdown-circle-timer": "^1.1.1",
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1",
-    "react-particles-js": "^2.7.1"
+    "react-particles-js": "^2.7.1",
+    "react-share": "^4.1.0"
   },
   "devDependencies": {
     "axios": "^0.19.2",
diff --git a/src/components/progress-bar.js b/src/components/progress-bar.js
index 32acb13..bad4cfb 100644
--- a/src/components/progress-bar.js
+++ b/src/components/progress-bar.js
@@ -2,7 +2,7 @@ import PropTypes from "prop-types"
 import React from "react"
 
 import { GetPercentage } from "../utils/style"
-import styles from "./progress-bar.module.css"
+import styles from "../styles/progress-bar.module.css"
 
 const generateCircles = (count, key) => (
     <>
diff --git a/src/components/result.js b/src/components/result.js
new file mode 100644
index 0000000..09679bd
--- /dev/null
+++ b/src/components/result.js
@@ -0,0 +1,134 @@
+import React, { Component } from "react"
+import {
+	WhatsappShareButton,
+	WhatsappIcon,
+	TelegramShareButton,
+	TelegramIcon,
+	FacebookShareButton,
+	FacebookIcon,
+	// FacebookMessengerShareButton,
+	// FacebookMessengerIcon
+} from "react-share"
+
+import tick from "../images/tick.svg"
+import cross from "../images/cross.svg"
+import Constants from "../constants/config"
+import logo from "../jsons/team-logo.json"
+import styles from "../styles/template.module.css"
+import styles2 from "../styles/result.module.css"
+
+class ResultPage extends Component {
+	state = {
+		correct: 0
+	}
+	componentDidMount() {
+		this.setState(() => {
+			return {
+				correct: this.props.result.filter(
+					({ player_name, answer }) => player_name.toLowerCase() === answer.toLowerCase()
+				).length
+			}
+		})
+	}
+
+	renderPage = (result) => (
+		<div className={styles2.resultWrapper}>
+			<div className={styles2.title}>
+				You got {`${this.state.correct} / ${result.length}`}
+			</div>
+			<div>
+				{
+					result.map(quesObj => {
+						return (
+							<div key={`${quesObj.player_name}`} className={styles2.answerRows}>
+								<div className={styles2.logoList}>
+									{
+										quesObj.teams.map((name, index) => (
+											<div key={`${name}_${index}`} className={styles.logo}>
+												{
+													index !== 0 &&
+													<>
+														<div className={styles2.bar} />
+														<div className={styles2.right} />
+													</>
+												}
+												<img
+													className={styles2.teamLogo}
+													src={logo[name]}
+													alt={`${name} logo`}
+												/>
+											</div>
+										))
+									}
+								</div>
+								<div className={styles2.answerWrapper}>
+									<div>
+										Your answer:&nbsp;<span>{quesObj.answer}</span>
+										{
+											quesObj.player_name.toLowerCase() === quesObj.answer
+												? <img className={styles2.status} src={tick} alt="Correct answer" />
+												: <img className={styles2.status} src={cross} alt="Wrong answer" />
+										}
+									</div>
+									{
+										quesObj.player_name.toLowerCase() !== quesObj.answer &&
+										<div>
+											Correct answer:&nbsp;<span>{quesObj.player_name}</span>
+										</div>
+									}
+								</div>
+							</div>
+						)
+					})
+				}
+			</div>
+			<div className={styles2.buttonWrapper}>
+				<div
+					role="button"
+					className={styles.button}
+					tabIndex={0}
+					onClick={() => window.location.reload()}
+					onKeyPress={()=> window.location.reload()}
+				>
+					Play again
+				</div>
+				<div className={styles2.shareButtonWrapper}>
+					Share it with your friends
+					<div>
+						<WhatsappShareButton
+							url={window.location.href}
+							title={Constants.SHARE_LINK_TITLE}
+							separator=": "
+						>
+							<WhatsappIcon size={32} round />
+						</WhatsappShareButton>
+						{/* <FacebookMessengerShareButton
+							url={window.location.href}
+							appId={Constants.APP_ID}
+						>
+							<FacebookMessengerIcon size={32} round />
+						</FacebookMessengerShareButton> */}
+						<FacebookShareButton
+							url={window.location.href}
+							quote={Constants.SHARE_LINK_TITLE}
+						>
+							<FacebookIcon size={32} round />
+						</FacebookShareButton>
+						<TelegramShareButton
+							url={window.location.href}
+							title={Constants.SHARE_LINK_TITLE}
+						>
+							<TelegramIcon size={32} round />
+						</TelegramShareButton>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+
+	render() {
+		return this.renderPage(this.props.result);
+	}
+}
+
+export default ResultPage
diff --git a/src/components/seo.js b/src/components/seo.js
index e15f599..d4617a6 100644
--- a/src/components/seo.js
+++ b/src/components/seo.js
@@ -33,7 +33,7 @@ function SEO({ description, lang, meta, title }) {
         lang,
       }}
       title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
+      titleTemplate={site.siteMetadata.title}
       meta={[
         {
           name: `description`,
diff --git a/src/components/template.js b/src/components/template.js
new file mode 100644
index 0000000..05e0886
--- /dev/null
+++ b/src/components/template.js
@@ -0,0 +1,137 @@
+import React, { Component } from "react"
+import { CountdownCircleTimer } from "react-countdown-circle-timer";
+
+import Layout from "./layout"
+import ProgressBar from "./progress-bar"
+import SEO from "./seo"
+import Result from "./result"
+import Constants from "../constants/config"
+import { GetQuizQuestionIndexes } from "../utils/style"
+import list from "../jsons/transfer.json"
+import logo from "../jsons/team-logo.json"
+import styles from "../styles/template.module.css"
+
+const selectedIndex = GetQuizQuestionIndexes(Constants.NUMBER_OF_QUESTIONS, list.length)
+const data = selectedIndex.map(value => list[value])
+
+const renderTime = value => {
+	if (value === 0) {
+		return <div className="timer">Too late...</div>;
+	}
+
+	return (
+		<div className={styles.timer}>
+			<div className={styles.text}>Remaining</div>
+			<div className={styles.value}>{value}</div>
+			<div className={styles.text}>seconds</div>
+		</div>
+	);
+};
+
+class Template extends Component {
+	state = {
+		currentQuestion: 0,
+		currentAnswer: ""
+	}
+
+	renderPage = () => (
+		<Layout>
+			<SEO title="Home" />
+			<div className={styles.wrapperBox}>
+				{
+					this.state.currentQuestion < Constants.NUMBER_OF_QUESTIONS &&
+					<>
+						<div className={styles.progressWrapper}>
+							<ProgressBar current={this.state.currentQuestion + 1} total={data.length} />
+						</div>
+						<div className={styles.contentWrapper}>
+							<span className={styles.heading}>Who am I?</span>
+							<div className={styles.logoWrapper}>
+								{
+									data[this.state.currentQuestion].teams.map((name, index) => (
+										<div key={`${name}_${index}`} className={styles.logo}>
+											{index !== 0 && <><div className={styles.bar} /><div className={styles.right} /></>}
+											<img className={styles.teamLogo} src={logo[name]} alt={`${name} logo`} />
+										</div>
+									))
+								}
+							</div>
+							<CountdownCircleTimer
+								isPlaying
+								durationSeconds={Constants.TIME_FOR_EACH_QUESTION}
+								colors={[["#00AA00", 0.5], ["#A30000"]]}
+								renderTime={renderTime}
+								strokeWidth={5}
+								size={140}
+								onComplete={() => {
+									this.input.disabled = true
+									setTimeout(() => this.goToNextQuestion(), Constants.TIME_INTERVAL_BETWEEN_QUESTIONS)
+									return [false, Constants.TIME_INTERVAL_BETWEEN_QUESTIONS]
+								}}
+								key={this.state.currentQuestion}
+							/>
+							<div className={styles.inputWrapper}>
+								I am
+                <input
+									list="players"
+									name="input_player"
+									ref={input => { this.input = input; return input && input.focus() }}
+									className={styles.input}
+									type="text"
+									value={this.state.currentAnswer}
+									onChange={(evt) => {
+										this.saveInput(evt.target.value)
+									}}
+								/>
+								<datalist id="players">
+									{
+										data.map(({ player_name }) => <option key={player_name} value={player_name} />)
+									}
+								</datalist>
+							</div>
+							<div
+								role="button"
+								className={styles.button}
+								tabIndex={0}
+								onClick={this.goToNextQuestion}
+								onKeyPress={this.goToNextQuestion}
+							>
+								Next
+              </div>
+						</div>
+					</>
+				}
+				{
+					this.state.currentQuestion === Constants.NUMBER_OF_QUESTIONS &&
+					<Result result={data} />
+				}
+			</div>
+		</Layout>
+	)
+
+	goToNextQuestion = () => {
+		const { currentAnswer, currentQuestion } = this.state
+		data[currentQuestion].answer = currentAnswer
+		this.input.disabled = false
+		this.setState((prevState) => {
+			return {
+				currentQuestion: prevState.currentQuestion + 1,
+				currentAnswer: ""
+			};
+		})
+	}
+
+	saveInput = (value) => {
+		this.setState(() => {
+			return {
+				currentAnswer: value
+			}
+		})
+	}
+
+	render() {
+		return this.renderPage();
+	}
+}
+
+export default Template
diff --git a/src/constants/config.js b/src/constants/config.js
index 324d32f..f0ecb80 100644
--- a/src/constants/config.js
+++ b/src/constants/config.js
@@ -1,9 +1,13 @@
 const NUMBER_OF_QUESTIONS = 10
 const TIME_FOR_EACH_QUESTION = 15
 const TIME_INTERVAL_BETWEEN_QUESTIONS = 1500
+const SHARE_LINK_TITLE = "Play football player transfer quiz at"
+const APP_ID = "2893375807395705"
 
 export default {
     NUMBER_OF_QUESTIONS,
     TIME_FOR_EACH_QUESTION,
-    TIME_INTERVAL_BETWEEN_QUESTIONS
+    TIME_INTERVAL_BETWEEN_QUESTIONS,
+    SHARE_LINK_TITLE,
+    APP_ID
 }
\ No newline at end of file
diff --git a/src/images/cross.svg b/src/images/cross.svg
new file mode 100644
index 0000000..141139c
--- /dev/null
+++ b/src/images/cross.svg
@@ -0,0 +1 @@
+<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m256 0c-141.164062 0-256 114.835938-256 256s114.835938 256 256 256 256-114.835938 256-256-114.835938-256-256-256zm0 0" fill="#f44336"/><path d="m350.273438 320.105469c8.339843 8.34375 8.339843 21.824219 0 30.167969-4.160157 4.160156-9.621094 6.25-15.085938 6.25-5.460938 0-10.921875-2.089844-15.082031-6.25l-64.105469-64.109376-64.105469 64.109376c-4.160156 4.160156-9.621093 6.25-15.082031 6.25-5.464844 0-10.925781-2.089844-15.085938-6.25-8.339843-8.34375-8.339843-21.824219 0-30.167969l64.109376-64.105469-64.109376-64.105469c-8.339843-8.34375-8.339843-21.824219 0-30.167969 8.34375-8.339843 21.824219-8.339843 30.167969 0l64.105469 64.109376 64.105469-64.109376c8.34375-8.339843 21.824219-8.339843 30.167969 0 8.339843 8.34375 8.339843 21.824219 0 30.167969l-64.109376 64.105469zm0 0" fill="#fafafa"/></svg>
\ No newline at end of file
diff --git a/src/images/favicon.png b/src/images/favicon.png
new file mode 100644
index 0000000..90119f7
Binary files /dev/null and b/src/images/favicon.png differ
diff --git a/src/images/gatsby-astronaut.png b/src/images/gatsby-astronaut.png
deleted file mode 100644
index da58ece..0000000
Binary files a/src/images/gatsby-astronaut.png and /dev/null differ
diff --git a/src/images/gatsby-icon.png b/src/images/gatsby-icon.png
deleted file mode 100644
index 908bc78..0000000
Binary files a/src/images/gatsby-icon.png and /dev/null differ
diff --git a/src/images/tick.svg b/src/images/tick.svg
new file mode 100644
index 0000000..06691a1
--- /dev/null
+++ b/src/images/tick.svg
@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 128 128" width="512" xmlns="http://www.w3.org/2000/svg"><g><circle cx="64" cy="64" fill="#4ce797" r="43.125"/><circle cx="64" cy="64" fill="#e7f8fc" r="34.544"/><path d="m58.211 81.479a3.894 3.894 0 0 1 -2.694-1.079l-11.569-11.1a3.892 3.892 0 1 1 5.388-5.618l8.59 8.239 20.468-24.03a3.893 3.893 0 1 1 5.927 5.048l-23.147 27.171a3.893 3.893 0 0 1 -2.767 1.364c-.065.003-.13.005-.196.005z" fill="#4ce797"/></g></svg>
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index c0a93b8..cf8eb56 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,104 +1,12 @@
 import React, { Component } from "react"
-import { CountdownCircleTimer } from "react-countdown-circle-timer";
-
-import Layout from "../components/layout"
-import ProgressBar from "../components/progress-bar"
-import SEO from "../components/seo"
-import Constants from "../constants/config"
-import { GetQuizQuestionIndexes } from "../utils/style"
-import list from "../jsons/transfer.json"
-import logo from "../jsons/team-logo.json"
-import styles from "../styles/index.module.css"
-
-const selectedIndex = GetQuizQuestionIndexes(Constants.NUMBER_OF_QUESTIONS, list.length)
-const data = selectedIndex.map(value => list[value])
-
-const renderTime = value => {
-  if (value === 0) {
-    return <div className="timer">Too late...</div>;
-  }
-
-  return (
-    <div className={styles.timer}>
-      <div className={styles.text}>Remaining</div>
-      <div className={styles.value}>{value}</div>
-      <div className={styles.text}>seconds</div>
-    </div>
-  );
-};
 
+import Template from "../components/template"
 class Index extends Component {
-  state = {
-    currentQuestion: 0
-  }
 
   renderPage = () => (
-    <Layout>
-      <SEO title="Home" />
-      <div className={styles.wrapperBox}>
-        <div className={styles.progressWrapper}>
-          <ProgressBar current={this.state.currentQuestion + 1} total={data.length} />
-        </div>
-        <div className={styles.contentWrapper}>
-          <span className={styles.heading}>Who am I?</span>
-          <div className={styles.logoWrapper}>
-            {
-              data[this.state.currentQuestion].teams.map((name, index) => (
-                <div key={`${name}_${index}`} className={styles.logo}>
-                  {index !== 0 && <><div className={styles.bar} /><div className={styles.right} /></>}
-                  <img className={styles.teamLogo} src={logo[name]} alt={`${name} logo`} />
-                </div>
-              ))
-            }
-          </div>
-          <CountdownCircleTimer
-            // isPlaying
-            durationSeconds={Constants.TIME_FOR_EACH_QUESTION}
-            colors={[["#00AA00", 0.5], ["#A30000"]]}
-            renderTime={renderTime}
-            strokeWidth={5}
-            size={140}
-            onComplete={() => {
-              setTimeout(() => this.goToNextQuestion(), Constants.TIME_INTERVAL_BETWEEN_QUESTIONS)
-              return [false, Constants.TIME_INTERVAL_BETWEEN_QUESTIONS]
-            }}
-            key={this.state.currentQuestion}
-          />
-          <div className={styles.inputWrapper}>
-            I am
-            <input
-              list="players"
-              name="input_player"
-              ref={input => input && input.focus()}
-              className={styles.input} type="text"
-            />
-            <datalist id="players">
-              {
-                data.map(({ player_name }) => <option key={player_name} value={player_name} />)
-              }
-            </datalist>
-          </div>
-          <div
-            role="button"
-            className={styles.button}
-            tabIndex={0}
-            onClick={this.goToNextQuestion}
-          >
-            Next
-          </div>
-        </div>
-      </div>
-    </Layout>
+    <Template />
   )
 
-  goToNextQuestion = () => {
-    this.setState((prevState) => {
-      return {
-        currentQuestion: prevState.currentQuestion + 1
-      };
-    })
-  }
-
   render() {
     return this.renderPage();
   }
diff --git a/src/styles/index.module.css b/src/styles/index.module.css
deleted file mode 100644
index c31ae1a..0000000
--- a/src/styles/index.module.css
+++ /dev/null
@@ -1,124 +0,0 @@
-.wrapperBox{
-  margin: auto;
-  transform: translateY(1%);
-  background: #fff;
-  border-radius: 5px;
-  box-shadow: 0 4px 8px 0 #dddddd, 0 6px 20px 0 #dddddd;
-  max-width: 760px;
-  border: 1px solid #ddd;
-}
-
-.heading{
-  font-size: 25px;
-  font-weight: 600;
-  color: #2b8a9d;
-}
-
-.progressWrapper{
-  border-bottom: 1px solid #ddd;
-  padding: 20px 40px;
-}
-
-.contentWrapper{
-  padding: 10px 20px;
-  font-family: Arial, Helvetica, sans-serif;
-  text-align: center;
-}
-
-.contentWrapper > *{
-  margin: 10px 0;
-}
-
-.logo{
-  display: flex;
-  align-items: center;
-}
-
-.logoWrapper{
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.inputWrapper{
-  text-align: center;
-  margin: 15px 0;
-  color: #2b8a9d;
-}
-
-.button{
-  background: #2b8a9d;
-  color: #fff;
-  text-align: center;
-  padding: 10px 30px;
-  display: inline-block;
-  border-radius: 20px;
-  margin: 20px 0;
-  cursor: pointer;
-}
-
-.input{
-  outline: none;
-  border: 0;
-  border-bottom: 2px solid #2b8a9d;
-  border-radius: 2px;
-  margin-left: 5px;
-}
-
-input::-webkit-calendar-picker-indicator {
-	display: none;
-}
-
-/* right arrow */
-.right {
-	width: 0;
-	height: 0;
-	border-top: 10px solid transparent;
-	border-left: 20px solid #2b8a9d;
-  border-bottom: 10px solid transparent;
-  margin-right: 15px;
-}
-
-.bar{
-  height: 3px;
-  width: 30px;
-  background: #2b8a9d;
-  margin-top: -1px;
-  margin-left: 20px;
-}
-
-/* Team logo */
-.teamLogo{
-  height: 10vh;
-  margin: 5px;
-  filter:drop-shadow(5px 5px 5px #666666);
-  -webkit-filter:drop-shadow(5px 5px 5px #666666);
-}
-
-/* Timer css */
-.timer {
-  font-family: "Montserrat";
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.text {
-  color: #aaa;
-  font-size: 16px;
-}
-
-.value {
-  font-size: 20px;
-}
-
-@media only screen and (max-width: 760px){
-  .wrapperBox{
-    margin: auto;
-    background: #fff;
-    transform: translateY(0);
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-  }
-}
\ No newline at end of file
diff --git a/src/components/progress-bar.module.css b/src/styles/progress-bar.module.css
similarity index 100%
rename from src/components/progress-bar.module.css
rename to src/styles/progress-bar.module.css
diff --git a/src/styles/result.module.css b/src/styles/result.module.css
new file mode 100644
index 0000000..930a9aa
--- /dev/null
+++ b/src/styles/result.module.css
@@ -0,0 +1,80 @@
+.title{
+	text-align: center;
+	font-weight: 600;
+	font-size: 20px;
+	color: #2b8a9d;
+	margin-bottom: 15px;
+}
+
+/* right arrow */
+.right {
+	width: 0;
+	height: 0;
+	border-top: 10px solid transparent;
+	border-left: 20px solid #2b8a9d;
+	border-bottom: 10px solid transparent;
+	margin-right: 15px;
+}
+
+.bar{
+	height: 3px;
+	width: 15px;
+	background: #2b8a9d;
+	margin-top: -1px;
+	margin-left: 10px;
+}
+
+/* Team logo */
+.teamLogo{
+	height: 5vh;
+	margin: 2px;
+	filter:drop-shadow(5px 5px 5px #666666);
+	-webkit-filter:drop-shadow(5px 5px 5px #666666);
+}
+
+.resultWrapper{
+	padding: 20px;
+}
+
+.logoList{
+	display: flex;
+	flex-wrap: wrap;
+	margin-bottom: 10px;
+}
+
+.answerRows{
+	padding: 20px 0;
+}
+
+.answerWrapper{
+	display: flex;
+	justify-content: space-between;	
+}
+
+.answerWrapper > div{
+	display: flex;
+	align-items: center;
+}
+
+.answerWrapper span{
+	text-transform: capitalize;
+}
+
+.buttonWrapper{
+	text-align: center;
+}
+
+.status{
+	height: 25px;
+	margin: 0;
+}
+
+.shareButtonWrapper > div > *{
+	margin: 0 5px;
+}
+
+@media only screen and (max-width: 760px){
+	.answerWrapper{
+		display: block;
+	}
+}
\ No newline at end of file
diff --git a/src/styles/template.module.css b/src/styles/template.module.css
new file mode 100644
index 0000000..a51615d
--- /dev/null
+++ b/src/styles/template.module.css
@@ -0,0 +1,126 @@
+.wrapperBox{
+    margin: auto;
+    margin-bottom: 30px;
+    transform: translateY(1%);
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px 0 #dddddd, 0 6px 20px 0 #dddddd;
+    max-width: 760px;
+    border: 1px solid #ddd;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+  
+  .heading{
+    font-size: 25px;
+    font-weight: 600;
+    color: #2b8a9d;
+  }
+  
+  .progressWrapper{
+    border-bottom: 1px solid #ddd;
+    padding: 20px 40px;
+  }
+  
+  .contentWrapper{
+    padding: 10px 20px;
+    text-align: center;
+  }
+  
+  .contentWrapper > *{
+    margin: 10px 0;
+  }
+  
+  .logo{
+    display: flex;
+    align-items: center;
+  }
+  
+  .logoWrapper{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  
+  .inputWrapper{
+    text-align: center;
+    margin: 15px 0;
+    color: #2b8a9d;
+  }
+  
+  .button{
+    background: #2b8a9d;
+    color: #fff;
+    text-align: center;
+    padding: 10px 30px;
+    display: inline-block;
+    border-radius: 20px;
+    margin: 20px 0;
+    cursor: pointer;
+  }
+  
+  .input{
+    outline: none;
+    border: 0;
+    border-bottom: 2px solid #2b8a9d;
+    border-radius: 2px;
+    margin-left: 5px;
+    text-transform: capitalize;
+  }
+  
+  input::-webkit-calendar-picker-indicator {
+      display: none;
+  }
+  
+  /* right arrow */
+  .right {
+    width: 0;
+    height: 0;
+    border-top: 10px solid transparent;
+    border-left: 20px solid #2b8a9d;
+    border-bottom: 10px solid transparent;
+    margin-right: 15px;
+  }
+  
+  .bar{
+    height: 3px;
+    width: 30px;
+    background: #2b8a9d;
+    margin-top: -1px;
+    margin-left: 20px;
+  }
+  
+  /* Team logo */
+  .teamLogo{
+    height: 10vh;
+    margin: 5px;
+    filter:drop-shadow(5px 5px 5px #666666);
+    -webkit-filter:drop-shadow(5px 5px 5px #666666);
+  }
+  
+  /* Timer css */
+  .timer {
+    font-family: "Montserrat";
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .text {
+    color: #aaa;
+    font-size: 16px;
+  }
+  
+  .value {
+    font-size: 20px;
+  }
+  
+  @media only screen and (max-width: 760px){
+    .wrapperBox{
+      margin: auto;
+      background: #fff;
+      transform: translateY(0);
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+    }
+  }
\ No newline at end of file