diff --git a/package-lock.json b/package-lock.json
index dc06d2b..36629fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1883,14 +1883,14 @@
       }
     },
     "acorn": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz",
-      "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ=="
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
+      "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg=="
     },
     "acorn-jsx": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.1.0.tgz",
-      "integrity": "sha512-tMUqwBWfLFbJbizRmEcWSLw6HnFzfdJs2sOJEOwwtVPMoH/0Ay+E703oZz78VSXZiiDcZrQ5XKjPIUQixhmgVw=="
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
+      "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ=="
     },
     "add-dom-event-listener": {
       "version": "1.1.0",
@@ -5850,12 +5850,12 @@
       "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A=="
     },
     "espree": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.1.2.tgz",
-      "integrity": "sha512-2iUPuuPP+yW1PZaMSDM9eyVf8D5P0Hi8h83YtZ5bPc/zHYjII5khoixIUTMO794NOY8F/ThF1Bo8ncZILarUTA==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.0.tgz",
+      "integrity": "sha512-Xs8airJ7RQolnDIbLtRutmfvSsAe0xqMMAantCN/GMoqf81TFbeI1T7Jpd56qYu1uuh32dOG5W/X9uO+ghPXzA==",
       "requires": {
         "acorn": "^7.1.0",
-        "acorn-jsx": "^5.1.0",
+        "acorn-jsx": "^5.2.0",
         "eslint-visitor-keys": "^1.1.0"
       }
     },
@@ -5865,9 +5865,9 @@
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
     "esquery": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.0.1.tgz",
-      "integrity": "sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.1.0.tgz",
+      "integrity": "sha512-MxYW9xKmROWF672KqjO75sszsA8Mxhw06YFeS5VHlB98KDHbOSurm3ArsjO60Eaf3QmGMCP1yn+0JQkNLo/97Q==",
       "requires": {
         "estraverse": "^4.0.0"
       }
diff --git a/src/components/Settings/index.js b/src/Settings/index.js
similarity index 92%
rename from src/components/Settings/index.js
rename to src/Settings/index.js
index 32bf00a..fcfcdcd 100644
--- a/src/components/Settings/index.js
+++ b/src/Settings/index.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react"
 import gql from "graphql-tag"
-import { client } from "../../apollo/client"
-import Loader from "../Layout/loader"
+import { client } from "../apollo/client"
+import Loader from "../Stateless/Layout/loader"
 import Settings from "./settings"
 
 export default function() {
diff --git a/src/components/Settings/settings.js b/src/Settings/settings.js
similarity index 99%
rename from src/components/Settings/settings.js
rename to src/Settings/settings.js
index f6a1de6..eddeea4 100644
--- a/src/components/Settings/settings.js
+++ b/src/Settings/settings.js
@@ -10,7 +10,7 @@ import "firebase/storage"
 
 import styles from "./styles.module.css"
 
-import { client } from "../../apollo/client"
+import { client } from "../apollo/client"
 
 export default class Settings extends Component {
   state = {
diff --git a/src/components/Settings/styles.module.css b/src/Settings/styles.module.css
similarity index 93%
rename from src/components/Settings/styles.module.css
rename to src/Settings/styles.module.css
index be25019..19db102 100644
--- a/src/components/Settings/styles.module.css
+++ b/src/Settings/styles.module.css
@@ -55,7 +55,7 @@ textarea:focus {
 .add_image_btn:hover {
   cursor: pointer;
   transform: scale(1.1);
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 .add_image_btn {
@@ -85,14 +85,14 @@ textarea:focus {
   font-family: "Montserrat", sans-serif;
   font-weight: 700;
   color: white;
-  margin: 20px 50px 50px 50px;
+  margin: 20px 50px 50px;
   transition: transform 0.2s;
 }
 
 .update_btn:hover {
   cursor: pointer;
   transform: scale(1.1);
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 .error {
diff --git a/src/components/Create/addFootstep.js b/src/Statefull/Create/addFootstep.js
similarity index 85%
rename from src/components/Create/addFootstep.js
rename to src/Statefull/Create/addFootstep.js
index 9ff4e09..02eec8d 100644
--- a/src/components/Create/addFootstep.js
+++ b/src/Statefull/Create/addFootstep.js
@@ -4,7 +4,7 @@ import FileUploader from "react-firebase-file-uploader"
 import firebase from "firebase/app"
 import "firebase/storage"
 
-import styles from "../../styles/add.module.css"
+import addStyles from "../../styles/add.module.css"
 
 const { Option } = Select
 
@@ -96,16 +96,16 @@ export class addFootstep extends Component {
 
   render() {
     return (
-      <div className={styles.footstep_container}>
+      <div className={addStyles.footstep_container}>
         <Row>
           <Col span={12}>
-            <div className={styles.footstep_counter}>{this.props.index}</div>
+            <div className={addStyles.footstep_counter}>{this.props.index}</div>
           </Col>
 
           <Col span={12}>
             <div
               onClick={() => this.props.remove(this.props.data.id)}
-              className={styles.footstep_remove_btn}
+              className={addStyles.footstep_remove_btn}
             >
               X
             </div>
@@ -114,18 +114,18 @@ export class addFootstep extends Component {
 
         <Row>
           <Col xs={24} lg={12}>
-            <div className={styles.input_label}>Title</div>
+            <div className={addStyles.input_label}>Title</div>
             <input
-              className={styles.input}
+              className={addStyles.input}
               name="title"
               value={this.state.title}
               onChange={this.handleInputChange}
               placeholder="Footsteps Title"
             />
 
-            <div className={styles.input_label}>Description</div>
+            <div className={addStyles.input_label}>Description</div>
             <textarea
-              className={styles.input}
+              className={addStyles.input}
               name="description"
               value={this.state.description}
               onChange={this.handleInputChange}
@@ -133,9 +133,9 @@ export class addFootstep extends Component {
               placeholder="Short description of the footstep (max 80 chars) -- Optional"
             />
 
-            <div className={styles.input_label}>Resource URL</div>
+            <div className={addStyles.input_label}>Resource URL</div>
             <input
-              className={styles.input}
+              className={addStyles.input}
               name="url"
               value={this.state.url}
               onChange={this.handleInputChange}
@@ -144,7 +144,7 @@ export class addFootstep extends Component {
           </Col>
 
           <Col xs={24} lg={12}>
-            <div className={styles.icon_container}>
+            <div className={addStyles.icon_container}>
               {this.state.icon_url && (
                 <img src={this.state.icon_url} alt="Icon URL" />
               )}
@@ -152,12 +152,15 @@ export class addFootstep extends Component {
 
             <Row>
               <Col span={20}>
-                <div className={styles.input_label} style={{ marginTop: "0" }}>
+                <div
+                  className={addStyles.input_label}
+                  style={{ marginTop: "0" }}
+                >
                   Icon URL
                 </div>
                 <input
                   style={{ width: "100%" }}
-                  className={styles.input}
+                  className={addStyles.input}
                   name="icon_url"
                   value={this.state.icon_url}
                   onChange={this.handleInputChange}
@@ -166,7 +169,7 @@ export class addFootstep extends Component {
               </Col>
 
               <Col span={4}>
-                <label className={styles.add_image_btn}>
+                <label className={addStyles.add_image_btn}>
                   <Icon type="cloud-upload" style={{ fontSize: "25px" }}></Icon>
                   <FileUploader
                     hidden
@@ -184,7 +187,7 @@ export class addFootstep extends Component {
             </Row>
             <Row>
               <Col span={12}>
-                <div className={styles.input_label}>Resource Type</div>
+                <div className={addStyles.input_label}>Resource Type</div>
                 <Select
                   defaultValue="Course"
                   style={{
@@ -209,7 +212,7 @@ export class addFootstep extends Component {
                 </Select>
               </Col>
               <Col span={12}>
-                <div className={styles.input_label}>Resource Level</div>
+                <div className={addStyles.input_label}>Resource Level</div>
                 <Select
                   defaultValue={0}
                   style={{
diff --git a/src/components/Create/addPath.js b/src/Statefull/Create/addPath.js
similarity index 75%
rename from src/components/Create/addPath.js
rename to src/Statefull/Create/addPath.js
index 5554ed5..f4d8202 100644
--- a/src/components/Create/addPath.js
+++ b/src/Statefull/Create/addPath.js
@@ -7,8 +7,9 @@ import { WithContext as ReactTags } from "react-tag-input"
 import FileUploader from "react-firebase-file-uploader"
 import firebase from "firebase/app"
 import "firebase/storage"
+import { validatePathDetails, err_msg } from "../../helper/Validation"
 
-import styles from "../../styles/add.module.css"
+import addStyles from "../../styles/add.module.css"
 
 import AddFootsteps from "./addFootstep"
 
@@ -79,76 +80,6 @@ export class addPath extends Component {
     })
   }
 
-  // Footstep validation functions
-
-  noContent = () => {
-    let valid = false
-
-    let { footsteps } = this.state
-
-    for (var i = 0; i < footsteps.length; i++) {
-      if (Object.keys(footsteps[i]).length <= 1) {
-        valid = true
-      }
-    }
-
-    return valid
-  }
-
-  emptyContent = () => {
-    let valid = false
-
-    let { footsteps } = this.state
-
-    for (var i = 0; i < footsteps.length; i++) {
-      let footstep = footsteps[i]
-
-      for (var key in footstep) {
-        if (key !== "description") {
-          if (footstep[key] === "") {
-            valid = true
-          }
-        }
-      }
-    }
-
-    return valid
-  }
-
-  validatePathDetails = () => {
-    if (
-      this.state.title === "" ||
-      this.state.description === "" ||
-      this.state.icon_url === "" ||
-      this.state.tags === ""
-    ) {
-      this.setState({
-        err_msg: "Please fill the path details",
-      })
-      return false
-    } else if (this.state.footsteps.length < 1) {
-      this.setState({
-        err_msg: "Please add a few footsteps. Footsteps can not be empty.",
-      })
-      return false
-    } else if (this.noContent()) {
-      this.setState({
-        err_msg: "Please fill the footstep content",
-      })
-      return false
-    } else if (this.emptyContent()) {
-      this.setState({
-        err_msg: "Please fill all the footstep fields",
-      })
-      return false
-    } else {
-      this.setState({
-        err_msg: "",
-      })
-      return true
-    }
-  }
-
   // Handle Private Paths of User
   handlePrivatePath = val => {
     this.setState({ isPrivate: val })
@@ -188,7 +119,8 @@ export class addPath extends Component {
   }
 
   submitPath = () => {
-    if (this.validatePathDetails()) {
+    this.setState({ err_msg })
+    if (validatePathDetails(this.state)) {
       client
         .mutate({
           mutation: CREATE_PATH_MUTATION_APOLLO,
@@ -246,9 +178,9 @@ export class addPath extends Component {
 
   render() {
     return (
-      <div className={styles.container}>
-        <h1 className={styles.heading}>Create a new Path</h1>
-        <div className={styles.checkbox_input}>
+      <div className={addStyles.container}>
+        <h1 className={addStyles.heading}>Create a new Path</h1>
+        <div className={addStyles.checkbox_input}>
           <label>
             Private{"  "}
             <Switch
@@ -260,18 +192,18 @@ export class addPath extends Component {
         </div>
         <Row>
           <Col xs={24} lg={12}>
-            <div className={styles.input_label}>Title</div>
+            <div className={addStyles.input_label}>Title</div>
             <input
-              className={styles.input}
+              className={addStyles.input}
               name="title"
               value={this.state.title}
               onChange={this.handleInputChange}
               placeholder="Intro to Gatsby"
             />
 
-            <div className={styles.input_label}>Description</div>
+            <div className={addStyles.input_label}>Description</div>
             <textarea
-              className={styles.input}
+              className={addStyles.input}
               name="description"
               value={this.state.description}
               onChange={this.handleInputChange}
@@ -279,7 +211,7 @@ export class addPath extends Component {
               style={{ height: "100px" }}
             />
 
-            <div className={styles.input_label}>Tags</div>
+            <div className={addStyles.input_label}>Tags</div>
             <ReactTags
               tags={this.state.tags_array}
               placeholder={"Enter relevant tags"}
@@ -292,27 +224,27 @@ export class addPath extends Component {
             />
           </Col>
           <Col xs={24} lg={12}>
-            <div className={styles.icon_container}>
+            <div className={addStyles.icon_container}>
               {this.state.icon_url && (
                 <img src={this.state.icon_url} alt="icon" />
               )}
             </div>
 
             <div
-              // className={styles.icon_input_container}
+              // className={addStyles.icon_input_container}
               style={{ marginTop: "35px" }}
             >
               <Row>
                 <Col xs={24} lg={14}>
                   <div
-                    className={styles.input_label}
+                    className={addStyles.input_label}
                     style={{ marginTop: "0" }}
                   >
                     Icon URL
                   </div>
                   <input
                     style={{ width: "100%" }}
-                    className={styles.input}
+                    className={addStyles.input}
                     name="icon"
                     value={this.state.icon_url}
                     onChange={this.handleInputChange}
@@ -321,7 +253,7 @@ export class addPath extends Component {
                 </Col>
 
                 <Col xs={24} lg={10}>
-                  <label className={styles.add_image_btn}>
+                  <label className={addStyles.add_image_btn}>
                     Upload Custom Icon
                     <FileUploader
                       hidden
@@ -341,8 +273,8 @@ export class addPath extends Component {
           </Col>
         </Row>
 
-        <div className={styles.footsteps_container}>
-          <h1 className={styles.footsteps_heading}>Footsteps</h1>
+        <div className={addStyles.footsteps_container}>
+          <h1 className={addStyles.footsteps_heading}>Footsteps</h1>
 
           {this.state.footsteps.map((footstep, i) => {
             return (
@@ -359,9 +291,9 @@ export class addPath extends Component {
           })}
 
           {this.state.footsteps.length < 10 ? (
-            <div className={styles.footsteps_new_container}>
+            <div className={addStyles.footsteps_new_container}>
               <div
-                className={styles.footsteps_new}
+                className={addStyles.footsteps_new}
                 onClick={this.addNewFootstep}
               >
                 Add new Footstep
@@ -372,10 +304,10 @@ export class addPath extends Component {
           )}
         </div>
 
-        <div className={styles.error_message}>{this.state.err_msg}</div>
+        <div className={addStyles.error_message}>{this.state.err_msg}</div>
 
-        <div className={styles.path_submit_container}>
-          <div className={styles.path_submit} onClick={this.submitPath}>
+        <div className={addStyles.path_submit_container}>
+          <div className={addStyles.path_submit} onClick={this.submitPath}>
             Create Path
           </div>
         </div>
diff --git a/src/components/EditPath/editFootstep.js b/src/Statefull/EditPath/editFootstep.js
similarity index 100%
rename from src/components/EditPath/editFootstep.js
rename to src/Statefull/EditPath/editFootstep.js
diff --git a/src/components/EditPath/editPath.js b/src/Statefull/EditPath/editPath.js
similarity index 88%
rename from src/components/EditPath/editPath.js
rename to src/Statefull/EditPath/editPath.js
index 84dd8ce..0764b73 100644
--- a/src/components/EditPath/editPath.js
+++ b/src/Statefull/EditPath/editPath.js
@@ -7,6 +7,7 @@ import { WithContext as ReactTags } from "react-tag-input"
 import FileUploader from "react-firebase-file-uploader"
 import firebase from "firebase/app"
 import "firebase/storage"
+import { validatePathDetails, err_msg } from "../../helper/Validation"
 
 import addStyles from "../../styles/add.module.css"
 
@@ -108,77 +109,6 @@ export class EditPath extends Component {
   handlePrivatePath = val => {
     this.setState({ isPrivate: val })
   }
-
-  // Footstep validation functions
-
-  noContent = () => {
-    let valid = false
-
-    let { footsteps } = this.state
-
-    for (var i = 0; i < footsteps.length; i++) {
-      if (Object.keys(footsteps[i]).length <= 1) {
-        valid = true
-      }
-    }
-
-    return valid
-  }
-
-  emptyContent = () => {
-    let valid = false
-
-    let { footsteps } = this.state
-
-    for (var i = 0; i < footsteps.length; i++) {
-      let footstep = footsteps[i]
-
-      for (var key in footstep) {
-        if (key !== "description") {
-          if (footstep[key] === "") {
-            valid = true
-          }
-        }
-      }
-    }
-
-    return valid
-  }
-
-  validatePathDetails = () => {
-    if (
-      this.state.title === "" ||
-      this.state.description === "" ||
-      this.state.icon_url === "" ||
-      this.state.tags === ""
-    ) {
-      this.setState({
-        err_msg: "Please fill the Path Details",
-      })
-      return false
-    } else if (this.state.footsteps.length < 1) {
-      this.setState({
-        err_msg: "Please add a few footsteps. Footsteps can not be empty.",
-      })
-      return false
-    } else if (this.noContent()) {
-      this.setState({
-        err_msg: "Please fill the footstep content",
-      })
-      return false
-    } else if (this.emptyContent()) {
-      this.setState({
-        err_msg: "Please fill all the footstep fields",
-      })
-      return false
-    } else {
-      this.setState({
-        err_msg: "",
-      })
-      return true
-    }
-  }
-
   // Tag Handling Functions
 
   handleTagDelete = i => {
@@ -233,7 +163,8 @@ export class EditPath extends Component {
   }
 
   submitPath = () => {
-    if (this.validatePathDetails()) {
+    this.setState({ err_msg })
+    if (validatePathDetails(this.state)) {
       client
         .mutate({
           mutation: UPDATE_PATH_MUTATION_APOLLO,
diff --git a/src/components/EditPath/index.js b/src/Statefull/EditPath/index.js
similarity index 94%
rename from src/components/EditPath/index.js
rename to src/Statefull/EditPath/index.js
index d764f1f..b93b666 100644
--- a/src/components/EditPath/index.js
+++ b/src/Statefull/EditPath/index.js
@@ -3,8 +3,8 @@ import gql from "graphql-tag"
 import { Query } from "react-apollo"
 import { navigate } from "gatsby"
 
-import Layout from "../Layout/layout"
-import Loader from "../Layout/loader"
+import Layout from "../../Statefull/Layout/layout"
+import Loader from "../../Stateless/Layout/loader"
 import EditPath from "./editPath"
 
 export class index extends Component {
diff --git a/src/components/Landing/searchbar.js b/src/Statefull/Landing/searchbar.js
similarity index 100%
rename from src/components/Landing/searchbar.js
rename to src/Statefull/Landing/searchbar.js
diff --git a/src/components/Layout/layout.js b/src/Statefull/Layout/layout.js
similarity index 92%
rename from src/components/Layout/layout.js
rename to src/Statefull/Layout/layout.js
index 0d05c03..0a76b4d 100644
--- a/src/components/Layout/layout.js
+++ b/src/Statefull/Layout/layout.js
@@ -7,16 +7,16 @@ import firebase from "firebase/app"
 import "firebase/auth"
 import firebaseConfig from "../../firebase/config"
 
-import styles from "../../styles/layout.module.css"
+import Layoutstyles from "../../styles/layout.module.css"
 import "antd/dist/antd.css"
 
-import Header from "./sideDrawer"
-import Footer from "./footer"
-import Login from "../Login/loginFlow"
-import Loader from "./loader"
+import Header from "../../Stateless/Layout/sideDrawer"
+import Footer from "../../Stateless/Layout/footer"
+import Login from "../../Stateless/Login/loginFlow"
+import Loader from "../../Stateless/Layout/loader"
 import SignUp from "../Login/signUpFlow"
 
-import SEO from "../SEO"
+import SEO from "../../Stateless/SEO"
 
 import { client } from "../../apollo/client"
 
@@ -87,7 +87,7 @@ export class layout extends Component {
     if (this.state.isSignedIn === null) {
       return (
         <div>
-          <div className={styles.content}>
+          <div className={Layoutstyles.content}>
             <Header show={false} user={this.state.user} />
             <Loader />
           </div>
@@ -113,7 +113,7 @@ export class layout extends Component {
               content="crowdsourced, learning paths, experts, best learning resources, find mentors, learn online, learn for free, footsteps, learning journey, fnplus, fnplus club, fnplus tech community"
             />
           </Helmet>
-          <div className={styles.content}>
+          <div className={Layoutstyles.content}>
             <Header show={false} user={this.state.user} />
             {!this.state.signUp ? (
               <Login />
@@ -146,7 +146,7 @@ export class layout extends Component {
                 content="crowdsourced, community-made, learning paths, experts, best learning resources, find mentors, learn online, learn for free, footsteps, learning journey, fnplus, fnplus club, fnplus tech community"
               />
             </Helmet>
-            <div className={styles.content}>
+            <div className={Layoutstyles.content}>
               <Header show />
               <main>{this.props.children}</main>
             </div>
diff --git a/src/components/Login/signUpFlow.js b/src/Statefull/Login/signUpFlow.js
similarity index 80%
rename from src/components/Login/signUpFlow.js
rename to src/Statefull/Login/signUpFlow.js
index 299f616..551508b 100644
--- a/src/components/Login/signUpFlow.js
+++ b/src/Statefull/Login/signUpFlow.js
@@ -9,7 +9,7 @@ import "firebase/auth"
 
 import { client } from "../../apollo/client"
 
-import styles from "../../styles/signUp.module.css"
+import SignUpstyles from "../../styles/signUp.module.css"
 
 export class signUp extends Component {
   state = {
@@ -181,16 +181,16 @@ export class signUp extends Component {
   render() {
     if (this.state.step === 0) {
       return (
-        <div className={styles.step0_container}>
+        <div className={SignUpstyles.step0_container}>
           <Row>
             <Col xs={24} lg={12}>
               <img
-                className={styles.step0_img}
+                className={SignUpstyles.step0_img}
                 src={require("../../images/signUp.png")}
                 alt=""
               />
             </Col>
-            <Col xs={24} lg={12} className={styles.step0_content}>
+            <Col xs={24} lg={12} className={SignUpstyles.step0_content}>
               <h1>Hey {firebase.auth().currentUser.displayName}!</h1>
               <h2>Welcome to Footsteps!</h2>
               <h3>
@@ -206,9 +206,9 @@ export class signUp extends Component {
       )
     } else if (this.state.step === 1) {
       return (
-        <div className={styles.step1_container}>
+        <div className={SignUpstyles.step1_container}>
           <Row>
-            <Col xs={24} lg={10} className={styles.steps_content}>
+            <Col xs={24} lg={10} className={SignUpstyles.steps_content}>
               <h1>01</h1>
               <h2>/ 03</h2>
 
@@ -217,11 +217,13 @@ export class signUp extends Component {
               <h3>Your Socials</h3>
             </Col>
             <Col xs={24} lg={14}>
-              <h1 className={styles.step_heading}>Let's get started!</h1>
-              <div className={styles.step1_form}>
-                <div className={styles.input_label}>What's your email?</div>
+              <h1 className={SignUpstyles.step_heading}>Let's get started!</h1>
+              <div className={SignUpstyles.step1_form}>
+                <div className={SignUpstyles.input_label}>
+                  What's your email?
+                </div>
                 <input
-                  className={styles.input}
+                  className={SignUpstyles.input}
                   name="email"
                   value={this.state.email}
                   onChange={this.handleInputChange}
@@ -229,37 +231,39 @@ export class signUp extends Component {
                   disabled
                 />
 
-                <div className={styles.input_label}>
+                <div className={SignUpstyles.input_label}>
                   What's your first name?
                 </div>
                 <input
-                  className={styles.input}
+                  className={SignUpstyles.input}
                   name="first_name"
                   value={this.state.first_name}
                   onChange={this.handleInputChange}
                   placeholder="First Name"
                 />
 
-                <div className={styles.input_label}>And, your last name?</div>
+                <div className={SignUpstyles.input_label}>
+                  And, your last name?
+                </div>
                 <input
-                  className={styles.input}
+                  className={SignUpstyles.input}
                   name="last_name"
                   value={this.state.last_name}
                   onChange={this.handleInputChange}
                   placeholder="Last Name"
                 />
 
-                <div className={styles.input_label}>
+                <div className={SignUpstyles.input_label}>
                   Enter an unique username!
                 </div>
                 <input
-                  className={styles.input}
+                  className={SignUpstyles.input}
                   name="username"
                   value={this.state.username}
                   onChange={this.handleUsernameChange}
                   placeholder="Username"
                 />
-                <div className={styles.input_label_comment}>
+                <div className={SignUpstyles.input_label_comment}>
                   *Only lowercase letters, numbers and underscore allowed
                 </div>
                 <div
@@ -268,19 +272,19 @@ export class signUp extends Component {
                       ? { opacity: "1" }
                       : { opacity: "0" }
                   }
-                  className={styles.username_error}
+                  className={SignUpstyles.username_error}
                 >
                   This username is not available, try another one.
                 </div>
               </div>
-              <div className={styles.stepBtn} onClick={this.nextStep}>
+              <div className={SignUpstyles.stepBtn} onClick={this.nextStep}>
                 Next <Icon style={{ marginLeft: "10px" }} type="arrow-right" />
               </div>
               <div
                 style={
                   this.state.step_error ? { opacity: "1" } : { opacity: "0" }
                 }
-                className={styles.step_error}
+                className={SignUpstyles.step_error}
               >
                 Please fill up all the fields
               </div>
@@ -290,9 +294,9 @@ export class signUp extends Component {
       )
     } else if (this.state.step === 2) {
       return (
-        <div className={styles.step2_container}>
+        <div className={SignUpstyles.step2_container}>
           <Row>
-            <Col xs={24} lg={10} className={styles.steps_content}>
+            <Col xs={24} lg={10} className={SignUpstyles.steps_content}>
               <h1>02</h1>
               <h2>/ 03</h2>
 
@@ -306,28 +310,28 @@ export class signUp extends Component {
               <h3>Your Socials</h3>
             </Col>
             <Col xs={24} lg={14}>
-              <h1 className={styles.step_heading}>What do you do?</h1>
+              <h1 className={SignUpstyles.step_heading}>What do you do?</h1>
 
-              <div className={styles.input_label}>Title</div>
+              <div className={SignUpstyles.input_label}>Title</div>
               <input
-                className={styles.input}
+                className={SignUpstyles.input}
                 name="bio"
                 value={this.state.bio}
                 onChange={this.handleInputChange}
                 placeholder="Developer, Data Scientist, Teacher"
               />
 
-              <div className={styles.input_label}>About</div>
+              <div className={SignUpstyles.input_label}>About</div>
               <textarea
-                className={styles.input}
+                className={SignUpstyles.input}
                 name="about"
                 value={this.state.about}
                 onChange={this.handleInputChange}
                 placeholder="A short bio of less than 120 characters"
               />
 
-              <div className={styles.input_label}>Skills</div>
-              <div className={styles.input_label_comment}>
+              <div className={SignUpstyles.input_label}>Skills</div>
+              <div className={SignUpstyles.input_label_comment}>
                 *Press enter to add a skill
               </div>
               <ReactTags
@@ -341,14 +345,14 @@ export class signUp extends Component {
                 autofocus={false}
               />
 
-              <div className={styles.stepBtn} onClick={this.nextStep}>
+              <div className={SignUpstyles.stepBtn} onClick={this.nextStep}>
                 Next <Icon style={{ marginLeft: "10px" }} type="arrow-right" />
               </div>
               <div
                 style={
                   this.state.step_error ? { opacity: "1" } : { opacity: "0" }
                 }
-                className={styles.step_error}
+                className={SignUpstyles.step_error}
               >
                 Please fill up all the fields
               </div>
@@ -358,9 +362,9 @@ export class signUp extends Component {
       )
     } else if (this.state.step === 3) {
       return (
-        <div className={styles.step3_container}>
+        <div className={SignUpstyles.step3_container}>
           <Row>
-            <Col xs={24} lg={10} className={styles.steps_content}>
+            <Col xs={24} lg={10} className={SignUpstyles.steps_content}>
               <h1>03</h1>
               <h2>/ 03</h2>
 
@@ -379,7 +383,7 @@ export class signUp extends Component {
               <h3 style={{ opacity: "1" }}>Your Socials</h3>
             </Col>
             <Col xs={24} lg={14}>
-              <h1 className={styles.step_heading}>
+              <h1 className={SignUpstyles.step_heading}>
                 Where can others find you online?
               </h1>
 
@@ -388,43 +392,43 @@ export class signUp extends Component {
                 give.
               </h2>
 
-              <div className={styles.input_label}>Github</div>
+              <div className={SignUpstyles.input_label}>Github</div>
               <input
-                className={styles.input}
+                className={SignUpstyles.input}
                 name="github"
                 value={this.state.github}
                 onChange={this.handleInputChange}
                 placeholder="Github URL"
               />
 
-              <div className={styles.input_label}>Linkedin</div>
+              <div className={SignUpstyles.input_label}>Linkedin</div>
               <input
-                className={styles.input}
+                className={SignUpstyles.input}
                 name="linkedin"
                 value={this.state.linkedin}
                 onChange={this.handleInputChange}
                 placeholder="Linkedin Profile URL"
               />
 
-              <div className={styles.input_label}>Facebook</div>
+              <div className={SignUpstyles.input_label}>Facebook</div>
               <input
-                className={styles.input}
+                className={SignUpstyles.input}
                 name="facebook"
                 value={this.state.facebook}
                 onChange={this.handleInputChange}
                 placeholder="Facebook Profile URL"
               />
 
-              <div className={styles.input_label}>Twitter</div>
+              <div className={SignUpstyles.input_label}>Twitter</div>
               <input
-                className={styles.input}
+                className={SignUpstyles.input}
                 name="twitter"
                 value={this.state.twitter}
                 onChange={this.handleInputChange}
                 placeholder="Twitter Profile URL"
               />
               {/* Skipped step-4 to reduce time in on-boarding the user - Abhi */}
-              <div className={styles.stepBtn} onClick={this.signup}>
+              <div className={SignUpstyles.stepBtn} onClick={this.signup}>
                 Finish{" "}
                 <Icon style={{ marginLeft: "10px" }} type="arrow-right" />
               </div>
@@ -434,18 +438,20 @@ export class signUp extends Component {
       )
     } else if (this.state.step === 4) {
       return (
-        <div className={styles.preview_container}>
-          <h1 className={styles.preview_heading}>Do you want to continue?</h1>
+        <div className={SignUpstyles.preview_container}>
+          <h1 className={SignUpstyles.preview_heading}>
+            Do you want to continue?
+          </h1>
 
           <div
             onClick={() => this.setState({ step: 1 })}
-            className={styles.preview_btn + " " + styles.no_btn}
+            className={SignUpstyles.preview_btn + " " + SignUpstyles.no_btn}
           >
             Nope. Let me review my details
           </div>
           <div
             onClick={this.signup}
-            className={styles.preview_btn + " " + styles.yes_btn}
+            className={SignUpstyles.preview_btn + " " + SignUpstyles.yes_btn}
           >
             Yes! Sign me up
           </div>
diff --git a/src/components/Search/resultFootstepCard.js b/src/Statefull/Search/resultFootstepCard.js
similarity index 77%
rename from src/components/Search/resultFootstepCard.js
rename to src/Statefull/Search/resultFootstepCard.js
index af58e55..28219fc 100644
--- a/src/components/Search/resultFootstepCard.js
+++ b/src/Statefull/Search/resultFootstepCard.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react"
 import { Row, Col, Icon } from "antd"
 
-import styles from "../../styles/resultFootsteps.module.css"
+import ResultFootstepstyles from "../../styles/resultFootsteps.module.css"
 
 const levelsText = ["Beginner", "Intermediate", "Expert"]
 
@@ -122,19 +122,25 @@ export class resultFootstepCard extends Component {
     return (
       <Col xs={24} lg={6}>
         <div style={{ display: "flex", justifyContent: "center" }}>
-          <div className={styles.cardContainer}>
-            <img className={styles.icon} src={data.resource_icon} alt="" />
+          <div className={ResultFootstepstyles.cardContainer}>
+            <img
+              className={ResultFootstepstyles.icon}
+              src={data.resource_icon}
+              alt=""
+            />
 
-            <div className={styles.detailsContainer}>
-              <div className={styles.title}>{data.title}</div>
-              <div className={styles.description}>{data.description}</div>
+            <div className={ResultFootstepstyles.detailsContainer}>
+              <div className={ResultFootstepstyles.title}>{data.title}</div>
+              <div className={ResultFootstepstyles.description}>
+                {data.description}
+              </div>
             </div>
 
-            <Row className={styles.typeContainer}>
+            <Row className={ResultFootstepstyles.typeContainer}>
               <Col span={4}>
                 {this.state.internet ? (
                   <img
-                    className={styles.typeImage}
+                    className={ResultFootstepstyles.typeImage}
                     src={require("../../images/footsteps/internet.png")}
                     alt=""
                   />
@@ -144,7 +150,7 @@ export class resultFootstepCard extends Component {
 
                 {this.state.video ? (
                   <img
-                    className={styles.typeImage}
+                    className={ResultFootstepstyles.typeImage}
                     src={require("../../images/footsteps/video.png")}
                     alt=""
                   />
@@ -154,7 +160,7 @@ export class resultFootstepCard extends Component {
 
                 {this.state.blog ? (
                   <img
-                    className={styles.typeImage}
+                    className={ResultFootstepstyles.typeImage}
                     src={require("../../images/footsteps/blog.png")}
                     alt=""
                   />
@@ -164,7 +170,7 @@ export class resultFootstepCard extends Component {
 
                 {this.state.course ? (
                   <img
-                    className={styles.typeImage}
+                    className={ResultFootstepstyles.typeImage}
                     src={require("../../images/footsteps/course.png")}
                     alt=""
                   />
@@ -174,7 +180,7 @@ export class resultFootstepCard extends Component {
 
                 {this.state.plan ? (
                   <img
-                    className={styles.typeImage}
+                    className={ResultFootstepstyles.typeImage}
                     src={require("../../images/footsteps/plan.png")}
                     alt=""
                   />
@@ -184,7 +190,7 @@ export class resultFootstepCard extends Component {
 
                 {this.state.quiz ? (
                   <img
-                    className={styles.typeImage}
+                    className={ResultFootstepstyles.typeImage}
                     src={require("../../images/footsteps/quiz.png")}
                     alt=""
                   />
@@ -194,7 +200,7 @@ export class resultFootstepCard extends Component {
 
                 {this.state.audio ? (
                   <img
-                    className={styles.typeImage}
+                    className={ResultFootstepstyles.typeImage}
                     src={require("../../images/footsteps/audio.png")}
                     alt=""
                   />
@@ -204,7 +210,7 @@ export class resultFootstepCard extends Component {
 
                 {this.state.page ? (
                   <img
-                    className={styles.typeImage}
+                    className={ResultFootstepstyles.typeImage}
                     src={require("../../images/footsteps/page.png")}
                     alt=""
                   />
@@ -214,7 +220,7 @@ export class resultFootstepCard extends Component {
 
                 {this.state.book ? (
                   <img
-                    className={styles.typeImage}
+                    className={ResultFootstepstyles.typeImage}
                     src={require("../../images/footsteps/book.png")}
                     alt=""
                   />
@@ -222,37 +228,39 @@ export class resultFootstepCard extends Component {
                   ""
                 )}
               </Col>
-              <Col className={styles.typeTitle} span={20}>
+              <Col className={ResultFootstepstyles.typeTitle} span={20}>
                 {this.state.resourceTitle}
               </Col>
             </Row>
 
-            <Row className={styles.levelContainer}>
-              <Col className={styles.levelTitle} span={8}>
+            <Row className={ResultFootstepstyles.levelContainer}>
+              <Col className={ResultFootstepstyles.levelTitle} span={8}>
                 Level:{" "}
               </Col>
-              <Col className={styles.levelType} span={16}>
+              <Col className={ResultFootstepstyles.levelType} span={16}>
                 {levelsText[data.level]}
               </Col>
             </Row>
 
-            {/* <Row className={styles.levelContainer}>
-            <Col className={styles.levelTitle} span={8}>
+            {/* <Row className={ResultFootstepstyles.levelContainer}>
+            <Col className={ResultFootstepstyles.levelTitle} span={8}>
               By:{" "}
             </Col>
-            <Col className={styles.levelType} span={16}>
+            <Col className={ResultFootstepstyles.levelType} span={16}>
               {data.}
             </Col>
           </Row> */}
 
             <Row
-              className={styles.resourceLink}
+              className={ResultFootstepstyles.resourceLink}
               onClick={() => window.open(data.resource_url)}
             >
               <Col span={16}>
-                <h4 className={styles.linkTitle}>{this.state.resourceLink}</h4>
+                <h4 className={ResultFootstepstyles.linkTitle}>
+                  {this.state.resourceLink}
+                </h4>
               </Col>
-              <Col span={8} className={styles.linkArrow}>
+              <Col span={8} className={ResultFootstepstyles.linkArrow}>
                 <Icon type="right" />
               </Col>
             </Row>
diff --git a/src/components/Search/resultPathCard.js b/src/Statefull/Search/resultPathCard.js
similarity index 68%
rename from src/components/Search/resultPathCard.js
rename to src/Statefull/Search/resultPathCard.js
index b8a353e..d045b79 100644
--- a/src/components/Search/resultPathCard.js
+++ b/src/Statefull/Search/resultPathCard.js
@@ -2,7 +2,7 @@ import React, { Component } from "react"
 import { Row, Col, Icon } from "antd"
 
 import FootstepCard from "../User/footstepsCard"
-import styles from "../../styles/result.module.css"
+import Resultstyles from "../../styles/result.module.css"
 
 export class resultPathCard extends Component {
   state = {
@@ -20,19 +20,22 @@ export class resultPathCard extends Component {
 
     return (
       <div>
-        <Row className={styles.cardContainer} onClick={() => this.expand()}>
+        <Row
+          className={Resultstyles.cardContainer}
+          onClick={() => this.expand()}
+        >
           <Col span={2}>
-            <div className={styles.iconContainer}>
-              <img src={data.icon} alt="" className={styles.icon} />
+            <div className={Resultstyles.iconContainer}>
+              <img src={data.icon} alt="" className={Resultstyles.icon} />
             </div>
           </Col>
-          <Col span={22} className={styles.contentContainer}>
+          <Col span={22} className={Resultstyles.contentContainer}>
             <Row>
-              <Col span={22} className={styles.pathDescription}>
+              <Col span={22} className={Resultstyles.pathDescription}>
                 <h1>{data.title}</h1>
                 <h3>{data.description}</h3>
 
-                <div className={styles.pathInfo}>
+                <div className={Resultstyles.pathInfo}>
                   <p>
                     <span>By:</span>{" "}
                     {data.user.first_name + " " + data.user.last_name}
@@ -48,8 +51,8 @@ export class resultPathCard extends Component {
                 span={2}
                 className={
                   this.state.expand
-                    ? styles.pathExpand + " " + styles.expandRotate
-                    : styles.pathExpand
+                    ? Resultstyles.pathExpand + " " + Resultstyles.expandRotate
+                    : Resultstyles.pathExpand
                 }
               >
                 <Icon type="down" />
@@ -57,7 +60,7 @@ export class resultPathCard extends Component {
             </Row>
           </Col>
         </Row>
-        <div className={styles.mobCardContainer}>
+        <div className={Resultstyles.mobCardContainer}>
           <Row onClick={() => this.expand()}>
             <Col
               span={22}
@@ -72,21 +75,21 @@ export class resultPathCard extends Component {
               span={2}
               className={
                 this.state.expand
-                  ? styles.pathExpand + " " + styles.expandRotate
-                  : styles.pathExpand
+                  ? Resultstyles.pathExpand + " " + Resultstyles.expandRotate
+                  : Resultstyles.pathExpand
               }
             >
               <Icon type="down" onClick={() => this.expand()} />
             </Col>
           </Row>
           <Row>
-            <Col span={12} className={styles.mobInfoBy}>
+            <Col span={12} className={Resultstyles.mobInfoBy}>
               <p>
                 <span>By:</span>{" "}
                 {data.user.first_name + " " + data.user.last_name}
               </p>
             </Col>
-            <Col span={12} className={styles.mobInfoVotes}>
+            <Col span={12} className={Resultstyles.mobInfoVotes}>
               <span>Votes:</span> {data.votes_aggregate.aggregate.count}
             </Col>
           </Row>
@@ -94,8 +97,10 @@ export class resultPathCard extends Component {
         <div
           className={
             this.state.expand
-              ? styles.footstepsContainer
-              : styles.footstepsContainer + " " + styles.footstepsHide
+              ? Resultstyles.footstepsContainer
+              : Resultstyles.footstepsContainer +
+                " " +
+                Resultstyles.footstepsHide
           }
         >
           {data.footsteps.map((footstep, index) => (
diff --git a/src/components/Search/searchResult.js b/src/Statefull/Search/searchResult.js
similarity index 84%
rename from src/components/Search/searchResult.js
rename to src/Statefull/Search/searchResult.js
index 262ed81..f6295e6 100644
--- a/src/components/Search/searchResult.js
+++ b/src/Statefull/Search/searchResult.js
@@ -3,7 +3,7 @@ import { Row, Select } from "antd"
 
 import ResultPathCard from "./resultPathCard"
 import ResultFootstepCard from "./resultFootstepCard"
-import styles from "../../styles/result.module.css"
+import Resultstyles from "../../styles/result.module.css"
 
 const { Option } = Select
 
@@ -74,24 +74,24 @@ export class SearchResult extends Component {
   render() {
     return (
       <div>
-        <div className={styles.resultPath}>
+        <div className={Resultstyles.resultPath}>
           <h1>Learning Paths ({this.props.paths.length})</h1>
 
           {this.props.paths.length !== 0 ? (
             <div>
-              <div className={styles.filterCard}>
+              <div className={Resultstyles.filterCard}>
                 <h4>
                   Sort by: <span style={{ marginLeft: "10px" }}> Votes </span>
                 </h4>
-                <div className={styles.filterArrowContainer}>
+                <div className={Resultstyles.filterArrowContainer}>
                   <img
-                    className={styles.filterArrow}
+                    className={Resultstyles.filterArrow}
                     src={require("../../images/results/upArrow.png")}
                     alt=""
                     onClick={() => this.sortPathsAscending}
                   />{" "}
                   <img
-                    className={styles.filterArrow}
+                    className={Resultstyles.filterArrow}
                     src={require("../../images/results/downArrow.png")}
                     alt=""
                     onClick={() => this.sortPathsDescending}
@@ -103,16 +103,16 @@ export class SearchResult extends Component {
               })}
             </div>
           ) : (
-            <div className={styles.noResults}>No Paths Found</div>
+            <div className={Resultstyles.noResults}>No Paths Found</div>
           )}
         </div>
 
-        <div className={styles.resultFootsteps}>
+        <div className={Resultstyles.resultFootsteps}>
           <h1>Footsteps ({this.props.footsteps.length})</h1>
           <Row>
             {this.props.footsteps.length !== 0 ? (
               <div>
-                <div className={styles.filterCardFootsteps}>
+                <div className={Resultstyles.filterCardFootsteps}>
                   <h4>
                     Filter By: <span>Level</span>
                   </h4>
@@ -136,11 +136,13 @@ export class SearchResult extends Component {
                     })}
                   </div>
                 ) : (
-                  <div className={styles.noResults}>No Footsteps Found</div>
+                  <div className={Resultstyles.noResults}>
+                    No Footsteps Found
+                  </div>
                 )}
               </div>
             ) : (
-              <div className={styles.noResults}>No Footsteps Found</div>
+              <div className={Resultstyles.noResults}>No Footsteps Found</div>
             )}
           </Row>
         </div>
diff --git a/src/components/User/footstepsCard.js b/src/Statefull/User/footstepsCard.js
similarity index 80%
rename from src/components/User/footstepsCard.js
rename to src/Statefull/User/footstepsCard.js
index 65a27c7..be8d947 100644
--- a/src/components/User/footstepsCard.js
+++ b/src/Statefull/User/footstepsCard.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react"
 import { Row, Col, Icon } from "antd"
 
-import styles from "../../styles/footsteps.module.css"
+import Footstepstyles from "../../styles/footsteps.module.css"
 
 const levelsText = ["Beginner", "Intermediate", "Expert"]
 
@@ -119,19 +119,19 @@ export class footstepsCard extends Component {
     const data = this.props.footstep
 
     return (
-      <div className={styles.cardContainer}>
-        <img className={styles.icon} src={data.resource_icon} alt="" />
+      <div className={Footstepstyles.cardContainer}>
+        <img className={Footstepstyles.icon} src={data.resource_icon} alt="" />
 
-        <div className={styles.detailsContainer}>
-          <div className={styles.title}>{data.title}</div>
-          <div className={styles.description}>{data.description}</div>
+        <div className={Footstepstyles.detailsContainer}>
+          <div className={Footstepstyles.title}>{data.title}</div>
+          <div className={Footstepstyles.description}>{data.description}</div>
         </div>
 
-        <Row className={styles.typeContainer}>
+        <Row className={Footstepstyles.typeContainer}>
           <Col span={4}>
             {this.state.internet ? (
               <img
-                className={styles.typeImage}
+                className={Footstepstyles.typeImage}
                 src={require("../../images/footsteps/internet.png")}
                 alt=""
               />
@@ -141,7 +141,7 @@ export class footstepsCard extends Component {
 
             {this.state.video ? (
               <img
-                className={styles.typeImage}
+                className={Footstepstyles.typeImage}
                 src={require("../../images/footsteps/video.png")}
                 alt=""
               />
@@ -151,7 +151,7 @@ export class footstepsCard extends Component {
 
             {this.state.blog ? (
               <img
-                className={styles.typeImage}
+                className={Footstepstyles.typeImage}
                 src={require("../../images/footsteps/blog.png")}
                 alt=""
               />
@@ -161,7 +161,7 @@ export class footstepsCard extends Component {
 
             {this.state.course ? (
               <img
-                className={styles.typeImage}
+                className={Footstepstyles.typeImage}
                 src={require("../../images/footsteps/course.png")}
                 alt=""
               />
@@ -171,7 +171,7 @@ export class footstepsCard extends Component {
 
             {this.state.plan ? (
               <img
-                className={styles.typeImage}
+                className={Footstepstyles.typeImage}
                 src={require("../../images/footsteps/plan.png")}
                 alt=""
               />
@@ -181,7 +181,7 @@ export class footstepsCard extends Component {
 
             {this.state.quiz ? (
               <img
-                className={styles.typeImage}
+                className={Footstepstyles.typeImage}
                 src={require("../../images/footsteps/quiz.png")}
                 alt=""
               />
@@ -191,7 +191,7 @@ export class footstepsCard extends Component {
 
             {this.state.audio ? (
               <img
-                className={styles.typeImage}
+                className={Footstepstyles.typeImage}
                 src={require("../../images/footsteps/audio.png")}
                 alt=""
               />
@@ -201,7 +201,7 @@ export class footstepsCard extends Component {
 
             {this.state.page ? (
               <img
-                className={styles.typeImage}
+                className={Footstepstyles.typeImage}
                 src={require("../../images/footsteps/page.png")}
                 alt=""
               />
@@ -211,7 +211,7 @@ export class footstepsCard extends Component {
 
             {this.state.book ? (
               <img
-                className={styles.typeImage}
+                className={Footstepstyles.typeImage}
                 src={require("../../images/footsteps/book.png")}
                 alt=""
               />
@@ -219,40 +219,42 @@ export class footstepsCard extends Component {
               ""
             )}
           </Col>
-          <Col className={styles.typeTitle} span={20}>
+          <Col className={Footstepstyles.typeTitle} span={20}>
             {this.state.resourceTitle}
           </Col>
         </Row>
 
-        <Row className={styles.levelContainer}>
-          <Col className={styles.levelTitle} span={8}>
+        <Row className={Footstepstyles.levelContainer}>
+          <Col className={Footstepstyles.levelTitle} span={8}>
             Level:{" "}
           </Col>
-          <Col className={styles.levelType} span={16}>
+          <Col className={Footstepstyles.levelType} span={16}>
             {levelsText[data.level]}
           </Col>
         </Row>
 
         <Row
-          className={styles.resourceLink}
+          className={Footstepstyles.resourceLink}
           onClick={() => window.open(data.resource_url)}
         >
           <Col span={16}>
-            <h4 className={styles.linkTitle}>{this.state.resourceLink}</h4>
+            <h4 className={Footstepstyles.linkTitle}>
+              {this.state.resourceLink}
+            </h4>
           </Col>
-          <Col span={8} className={styles.linkArrow}>
+          <Col span={8} className={Footstepstyles.linkArrow}>
             <Icon type="right" />
           </Col>
         </Row>
         <div style={{ display: "inlineBlock" }}>
-          <div className={styles.timelineDot}></div>
+          <div className={Footstepstyles.timelineDot}></div>
           <div
             style={
               this.props.position + 1 === this.props.size
                 ? { opacity: "0", width: "150px" }
                 : {}
             }
-            className={styles.timelineBox}
+            className={Footstepstyles.timelineBox}
           ></div>
         </div>
       </div>
diff --git a/src/components/User/learningPathCard.js b/src/Statefull/User/learningPathCard.js
similarity index 67%
rename from src/components/User/learningPathCard.js
rename to src/Statefull/User/learningPathCard.js
index f04ba04..25ae90c 100644
--- a/src/components/User/learningPathCard.js
+++ b/src/Statefull/User/learningPathCard.js
@@ -4,7 +4,7 @@ import { navigate } from "gatsby"
 
 import FootstepCard from "./footstepsCard"
 
-import styles from "../../styles/footsteps.module.css"
+import Footstepstyles from "../../styles/footsteps.module.css"
 
 export class learningPathCard extends Component {
   state = {
@@ -25,7 +25,7 @@ export class learningPathCard extends Component {
         {this.props.show_edit ? (
           <div
             title="Edit Path"
-            className={styles.editBtn}
+            className={Footstepstyles.editBtn}
             onClick={() => navigate(`/editPath/${path.id}`)}
           >
             <Icon type="edit" />
@@ -34,12 +34,15 @@ export class learningPathCard extends Component {
           ""
         )}
 
-        <div className={styles.learningPathCard} onClick={() => this.expand()}>
+        <div
+          className={Footstepstyles.learningPathCard}
+          onClick={() => this.expand()}
+        >
           <Row>
             <Col xs={24} lg={4}>
-              <img className={styles.pathIcon} src={path.icon} alt="" />
+              <img className={Footstepstyles.pathIcon} src={path.icon} alt="" />
             </Col>
-            <Col xs={24} lg={18} className={styles.pathHeading}>
+            <Col xs={24} lg={18} className={Footstepstyles.pathHeading}>
               <h1>{path.title}</h1>
               <h5>{path.description}</h5>
               <Progress percent={path.percent} />
@@ -49,8 +52,10 @@ export class learningPathCard extends Component {
               lg={2}
               className={
                 this.state.expand
-                  ? styles.pathExpand + " " + styles.expandRotate
-                  : styles.pathExpand
+                  ? Footstepstyles.pathExpand +
+                    " " +
+                    Footstepstyles.expandRotate
+                  : Footstepstyles.pathExpand
               }
             >
               <Icon type="down" />
@@ -60,8 +65,10 @@ export class learningPathCard extends Component {
         <div
           className={
             this.state.expand
-              ? styles.footstepsContainer
-              : styles.footstepsContainer + " " + styles.footstepsHide
+              ? Footstepstyles.footstepsContainer
+              : Footstepstyles.footstepsContainer +
+                " " +
+                Footstepstyles.footstepsHide
           }
         >
           {path.footsteps.map((footstep, index) => (
diff --git a/src/components/User/learningPaths.js b/src/Statefull/User/learningPaths.js
similarity index 81%
rename from src/components/User/learningPaths.js
rename to src/Statefull/User/learningPaths.js
index 4ee5264..fb1b641 100644
--- a/src/components/User/learningPaths.js
+++ b/src/Statefull/User/learningPaths.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react"
 
-import styles from "../../styles/footsteps.module.css"
+import Footstepstyles from "../../styles/footsteps.module.css"
 
 import LearningPathCard from "./learningPathCard"
 
@@ -23,13 +23,13 @@ export class learningPaths extends Component {
     const data = this.props.learning_paths
 
     return (
-      <div className={styles.learningPathsContainer}>
-        <h1 className={styles.learningPathHeading}>
+      <div className={Footstepstyles.learningPathsContainer}>
+        <h1 className={Footstepstyles.learningPathHeading}>
           Learning Paths ({data.length})
         </h1>
 
         {data.length === 0 ? (
-          <div className={styles.learningPathEmpty}>
+          <div className={Footstepstyles.learningPathEmpty}>
             <img src={require("../../images/pathEmpty.png")} alt="Path Empty" />
             <h1>
               No Learning Paths found. <br /> Create one now!
diff --git a/src/components/Landing/index.js b/src/Stateless/Landing/index.js
similarity index 59%
rename from src/components/Landing/index.js
rename to src/Stateless/Landing/index.js
index 173b0a2..a2174bd 100644
--- a/src/components/Landing/index.js
+++ b/src/Stateless/Landing/index.js
@@ -1,16 +1,16 @@
 import React, { Component } from "react"
 import { Row, Col } from "antd"
 
-import Searchbar from "./searchbar"
-import styles from "../../styles/landing.module.css"
+import Searchbar from "../../Statefull/Landing/searchbar"
+import Landingstyles from "../../styles/landing.module.css"
 export class index extends Component {
   render() {
     return (
-      <div className={styles.container}>
+      <div className={Landingstyles.container}>
         <Row>
           <Col sm={24} lg={14}>
-            <h1 className={styles.heading}>Hi there!</h1>
-            <p className={styles.subHeading}>
+            <h1 className={Landingstyles.heading}>Hi there!</h1>
+            <p className={Landingstyles.subHeading}>
               What do you want to learn today?
             </p>
             <Searchbar />
@@ -18,10 +18,10 @@ export class index extends Component {
             <img
               src={require("../../images/roadSign.svg")}
               alt="Road Sign"
-              className={styles.mobileImage}
+              className={Landingstyles.mobileImage}
             />
           </Col>
-          <Col sm={24} lg={10} className={styles.imageContainer}>
+          <Col sm={24} lg={10} className={Landingstyles.imageContainer}>
             <img src={require("../../images/roadSign.svg")} alt="Road Sign" />
           </Col>
         </Row>
diff --git a/src/components/Layout/footer.js b/src/Stateless/Layout/footer.js
similarity index 75%
rename from src/components/Layout/footer.js
rename to src/Stateless/Layout/footer.js
index d352f00..9a2a45b 100644
--- a/src/components/Layout/footer.js
+++ b/src/Stateless/Layout/footer.js
@@ -1,12 +1,12 @@
 import React, { Component } from "react"
 import { Row, Col } from "antd"
 
-import styles from "../../styles/footer.module.css"
+import Footerstyles from "../../styles/footer.module.css"
 
 export class footer extends Component {
   render() {
     return (
-      <footer className={styles.container}>
+      <footer className={Footerstyles.container}>
         <Row>
           <Col xs={24} lg={8}>
             Made with{" "}
@@ -15,7 +15,7 @@ export class footer extends Component {
             </span>{" "}
             by{" "}
             <a
-              className={styles.link}
+              className={Footerstyles.link}
               target="_blank"
               rel="noopener noreferrer"
               href="https://fnplus.tech"
@@ -23,9 +23,9 @@ export class footer extends Component {
               Fnplus
             </a>
           </Col>
-          <Col xs={24} lg={8} className={styles.footer_center}>
+          <Col xs={24} lg={8} className={Footerstyles.footer_center}>
             <a
-              className={styles.link}
+              className={Footerstyles.link}
               target="_blank"
               rel="noopener noreferrer"
               href="https://fnplus.tech/privacy-policy"
@@ -33,7 +33,7 @@ export class footer extends Component {
               Privacy Policy
             </a>{" "}
             <a
-              className={styles.link}
+              className={Footerstyles.link}
               target="_blank"
               rel="noopener noreferrer"
               href="https://fnplus.tech/terms-of-use"
@@ -41,10 +41,10 @@ export class footer extends Component {
               Terms of Use
             </a>
           </Col>
-          <Col xs={24} lg={8} className={styles.footer_right}>
+          <Col xs={24} lg={8} className={Footerstyles.footer_right}>
             Check out this project on{" "}
             <a
-              className={styles.link}
+              className={Footerstyles.link}
               target="_blank"
               rel="noopener noreferrer"
               href="https://github.com/fnplus/footsteps-app"
diff --git a/src/components/Layout/loader.js b/src/Stateless/Layout/loader.js
similarity index 100%
rename from src/components/Layout/loader.js
rename to src/Stateless/Layout/loader.js
diff --git a/src/components/Layout/menu.js b/src/Stateless/Layout/menu.js
similarity index 73%
rename from src/components/Layout/menu.js
rename to src/Stateless/Layout/menu.js
index 8886bc4..8df30fd 100644
--- a/src/components/Layout/menu.js
+++ b/src/Stateless/Layout/menu.js
@@ -4,7 +4,7 @@ import { Link, navigate } from "gatsby"
 import firebase from "firebase/app"
 import "firebase/auth"
 
-import styles from "../../styles/menu.module.css"
+import Menustyles from "../../styles/menu.module.css"
 import UserContext from "../../context/userContext"
 
 function NavMenu() {
@@ -29,29 +29,31 @@ function NavMenu() {
   return (
     <Row>
       <ul>
-        <li className={styles.menuProfile}>
+        <li className={Menustyles.menuProfile}>
           <img
-            className={styles.menuProfileImg}
+            className={Menustyles.menuProfileImg}
             src={user.profile_pic}
             alt=""
             onClick={expandMenu}
           />
         </li>
 
-        <li className={styles.menuItems}>
+        <li className={Menustyles.menuItems}>
           <Link to="/add/">Create Path</Link>
         </li>
-        <li className={styles.menuItems}>
+        <li className={Menustyles.menuItems}>
           <Link to="/">Home</Link>
         </li>
       </ul>
 
       <div
         className={
-          expand ? styles.dropDown + " " + styles.dropDownShow : styles.dropDown
+          expand
+            ? Menustyles.dropDown + " " + Menustyles.dropDownShow
+            : Menustyles.dropDown
         }
       >
-        <Row className={styles.dropDownInfo}>
+        <Row className={Menustyles.dropDownInfo}>
           <Col span={6}>
             <img src={user.profile_pic} alt="" />
           </Col>
@@ -62,13 +64,13 @@ function NavMenu() {
             <h5>{user.email}</h5>
             <Row>
               <Col span={10}>
-                <div className={styles.profileBtn} onClick={profileClick}>
+                <div className={Menustyles.profileBtn} onClick={profileClick}>
                   My Profile
                 </div>
               </Col>
               <Col span={14}>
                 <div
-                  className={styles.settingsBtn}
+                  className={Menustyles.settingsBtn}
                   onClick={() => navigate("/settings/")}
                 >
                   <Icon type="setting" theme="filled"></Icon>
@@ -77,7 +79,7 @@ function NavMenu() {
             </Row>
           </Col>
         </Row>
-        <div className={styles.logoutBtn} onClick={logoutClick}>
+        <div className={Menustyles.logoutBtn} onClick={logoutClick}>
           Logout
         </div>
       </div>
diff --git a/src/components/Layout/sideDrawer.js b/src/Stateless/Layout/sideDrawer.js
similarity index 73%
rename from src/components/Layout/sideDrawer.js
rename to src/Stateless/Layout/sideDrawer.js
index c77d294..b255f13 100644
--- a/src/components/Layout/sideDrawer.js
+++ b/src/Stateless/Layout/sideDrawer.js
@@ -4,7 +4,7 @@ import { navigate } from "gatsby"
 import firebase from "firebase/app"
 import "firebase/auth"
 
-import styles from "../../styles/header.module.css"
+import Headerstyles from "../../styles/header.module.css"
 
 import NavMenu from "./menu"
 export function header({ show = false }) {
@@ -24,9 +24,9 @@ export function header({ show = false }) {
   }
 
   return (
-    <nav className={styles.navContainer}>
+    <nav className={Headerstyles.navContainer}>
       <Row>
-        <Col xs={6} md={2} className={styles.logo}>
+        <Col xs={6} md={2} className={Headerstyles.logo}>
           <img
             src={require("../../images/brandLogo.png")}
             alt=""
@@ -36,12 +36,12 @@ export function header({ show = false }) {
 
         {show ? (
           <Col xs={18} md={22}>
-            <div className={styles.menuContainer}>
-              <div className={styles.navDesktop}>
+            <div className={Headerstyles.menuContainer}>
+              <div className={Headerstyles.navDesktop}>
                 <NavMenu mode="horizontal" />
               </div>
 
-              <div className={styles.mobile_toggle} onClick={showDrawer}>
+              <div className={Headerstyles.mobile_toggle} onClick={showDrawer}>
                 <img src={require("../../images/menu.png")} alt="Menu" />
               </div>
 
@@ -52,29 +52,32 @@ export function header({ show = false }) {
                 visible={visible}
                 width={200}
               >
-                <div className={styles.navItem} onClick={() => navigate("/")}>
+                <div
+                  className={Headerstyles.navItem}
+                  onClick={() => navigate("/")}
+                >
                   Home
                 </div>
                 <div
-                  className={styles.navItem}
+                  className={Headerstyles.navItem}
                   onClick={() => navigate("/add/")}
                 >
                   Create Path
                 </div>
                 <div
-                  className={styles.navItem}
+                  className={Headerstyles.navItem}
                   onClick={() => navigate("/profile/")}
                 >
                   Profile
                 </div>
                 <div
-                  className={styles.navItem}
+                  className={Headerstyles.navItem}
                   onClick={() => navigate("/settings/")}
                 >
                   Settings
                 </div>
                 <div
-                  className={styles.navItem}
+                  className={Headerstyles.navItem}
                   onClick={logoutClick}
                   style={{ color: "#fe5e44" }}
                 >
diff --git a/src/components/Login/loginFlow.js b/src/Stateless/Login/loginFlow.js
similarity index 80%
rename from src/components/Login/loginFlow.js
rename to src/Stateless/Login/loginFlow.js
index ccc59bc..23310f5 100644
--- a/src/components/Login/loginFlow.js
+++ b/src/Stateless/Login/loginFlow.js
@@ -5,7 +5,7 @@ import "firebase/auth"
 
 import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth"
 
-import styles from "../../styles/login.module.css"
+import Loginstyles from "../../styles/login.module.css"
 
 const uiConfig = {
   signInFlow: "popup",
@@ -23,21 +23,21 @@ export class login extends Component {
     return (
       <div>
         <Row>
-          <h1 className={styles.heading}>Welcome to Footsteps</h1>
-          <h2 className={styles.heading}>
+          <h1 className={Loginstyles.heading}>Welcome to Footsteps</h1>
+          <h2 className={Loginstyles.heading}>
             Search 🔎 community-made 🧑‍🤝‍🧑learning paths here!
           </h2>
         </Row>
         <Row>
           <Col xs={24} lg={14}>
             <img
-              className={styles.image}
+              className={Loginstyles.image}
               src={require("../../images/signIn.png")}
               alt="Website is under construction"
             />
           </Col>
           <Col xs={24} lg={10}>
-            <div className={styles.container}>
+            <div className={Loginstyles.container}>
               <StyledFirebaseAuth
                 uiConfig={uiConfig}
                 firebaseAuth={firebase.auth()}
diff --git a/src/components/SEO/Facebook.js b/src/Stateless/SEO/Facebook.js
similarity index 100%
rename from src/components/SEO/Facebook.js
rename to src/Stateless/SEO/Facebook.js
diff --git a/src/components/SEO/SEO.js b/src/Stateless/SEO/SEO.js
similarity index 100%
rename from src/components/SEO/SEO.js
rename to src/Stateless/SEO/SEO.js
diff --git a/src/components/SEO/Twitter.js b/src/Stateless/SEO/Twitter.js
similarity index 100%
rename from src/components/SEO/Twitter.js
rename to src/Stateless/SEO/Twitter.js
diff --git a/src/components/SEO/index.js b/src/Stateless/SEO/index.js
similarity index 100%
rename from src/components/SEO/index.js
rename to src/Stateless/SEO/index.js
diff --git a/src/components/SEO/robots.txt b/src/Stateless/SEO/robots.txt
similarity index 100%
rename from src/components/SEO/robots.txt
rename to src/Stateless/SEO/robots.txt
diff --git a/src/components/User/follow.js b/src/Stateless/User/follow.js
similarity index 59%
rename from src/components/User/follow.js
rename to src/Stateless/User/follow.js
index 511e4e8..ae0c3a9 100644
--- a/src/components/User/follow.js
+++ b/src/Stateless/User/follow.js
@@ -1,13 +1,13 @@
 import React from "react"
 import { Col } from "antd"
 
-import styles from "../../styles/user.module.css"
+import Userstyles from "../../rstyles/user.module.css"
 import { Link } from "gatsby"
 
 export default ({ users, type }) => {
   if (users.length === 0)
     return (
-      <div className={styles.followContainer}>
+      <div className={Userstyles.followContainer}>
         <h3>Nothing to show here</h3>
       </div>
     )
@@ -15,12 +15,12 @@ export default ({ users, type }) => {
     type ? user.follower_info : user.follow_info
   )
   return (
-    <div className={styles.followContainer}>
+    <div className={Userstyles.followContainer}>
       {users_info_list.map(user => (
-        <Col xs={12} lg={6} className={styles.userContainer} key={user.id}>
-          <img className={styles.userImg} src={user.profile_pic} alt="" />
+        <Col xs={12} lg={6} className={Userstyles.userContainer} key={user.id}>
+          <img className={Userstyles.userImg} src={user.profile_pic} alt="" />
           <Link to={`/user/${user.username}`}>
-            <h4 className={styles.userName}>
+            <h4 className={Userstyles.userName}>
               {user.first_name + " " + user.last_name}
             </h4>
           </Link>
diff --git a/src/components/User/index.js b/src/Stateless/User/index.js
similarity index 69%
rename from src/components/User/index.js
rename to src/Stateless/User/index.js
index 0bdd6c7..86cad5b 100644
--- a/src/components/User/index.js
+++ b/src/Stateless/User/index.js
@@ -1,8 +1,8 @@
 import React, { Component } from "react"
 import { Row, Col, Icon } from "antd"
 
-import styles from "../../styles/user.module.css"
-import LearningPaths from "./learningPaths"
+import Userstyles from "../../styles/user.module.css"
+import LearningPaths from "../../Statefull/User/learningPaths"
 
 import UserContext from "../../context/userContext"
 
@@ -13,26 +13,34 @@ export class user extends Component {
     const data = this.context.user
 
     return (
-      <div className={styles.container}>
-        <div className={styles.profileContainer + " " + styles.desktopProfile}>
-          <div className={styles.profileInfo}>
+      <div className={Userstyles.container}>
+        <div
+          className={
+            Userstyles.profileContainer + " " + Userstyles.desktopProfile
+          }
+        >
+          <div className={Userstyles.profileInfo}>
             <h1>
               {data.first_name} {data.last_name}
             </h1>
             <h2>{data.username}</h2>
             <h3>{data.bio}</h3>
           </div>
-          <div className={styles.profileImgContainer}>
-            <img className={styles.profileImg} src={data.profile_pic} alt="" />
-            <div className={styles.social}>
-              <Row className={styles.social_row}>
+          <div className={Userstyles.profileImgContainer}>
+            <img
+              className={Userstyles.profileImg}
+              src={data.profile_pic}
+              alt=""
+            />
+            <div className={Userstyles.social}>
+              <Row className={Userstyles.social_row}>
                 {data.github !== "" &&
                 data.github !== null &&
                 data.github !== "https://github.com/" ? (
                   <Col span={6}>
                     <Icon
                       onClick={() => window.open(data.github)}
-                      className={styles.icon}
+                      className={Userstyles.icon}
                       type="github"
                       theme="filled"
                     />
@@ -46,7 +54,7 @@ export class user extends Component {
                   <Col span={6}>
                     <Icon
                       onClick={() => window.open(data.linkedin)}
-                      className={styles.icon}
+                      className={Userstyles.icon}
                       type="linkedin"
                       theme="filled"
                     />
@@ -60,7 +68,7 @@ export class user extends Component {
                   <Col span={6}>
                     <Icon
                       onClick={() => window.open(data.twitter)}
-                      className={styles.icon}
+                      className={Userstyles.icon}
                       type="twitter"
                     />
                   </Col>
@@ -73,7 +81,7 @@ export class user extends Component {
                   <Col span={6}>
                     <Icon
                       onClick={() => window.open(data.facebook)}
-                      className={styles.icon}
+                      className={Userstyles.icon}
                       type="facebook"
                       theme="filled"
                     />
@@ -84,16 +92,16 @@ export class user extends Component {
               </Row>
             </div>
           </div>
-          <div className={styles.profileDetail}>
-            <div className={styles.profileAbout}>
+          <div className={Userstyles.profileDetail}>
+            <div className={Userstyles.profileAbout}>
               <h1>About</h1>
-              <p className={styles.bioContent}>{data.about}</p>
+              <p className={Userstyles.bioContent}>{data.about}</p>
               {data.skills !== null ? (
-                <div className={styles.skills}>
+                <div className={Userstyles.skills}>
                   <h1>Skills</h1>
                   {data.skills.split(",").map((skill, i) => {
                     return (
-                      <div key={i} className={styles.skill}>
+                      <div key={i} className={Userstyles.skill}>
                         {skill}
                       </div>
                     )
@@ -103,33 +111,33 @@ export class user extends Component {
                 <div></div>
               )}
             </div>
-            <Row className={styles.userInfo}>
+            <Row className={Userstyles.userInfo}>
               <Col span={8}>
-                <div className={styles.count}>
+                <div className={Userstyles.count}>
                   {data.learning_paths_aggregate.aggregate.count}
-                  <span className={styles.text}>Learning Paths</span>
+                  <span className={Userstyles.text}>Learning Paths</span>
                 </div>
               </Col>
               <Col span={8}>
-                <div className={styles.count}>
+                <div className={Userstyles.count}>
                   {data.followers_aggregate.aggregate.count}
-                  <span className={styles.text}>Followers</span>
+                  <span className={Userstyles.text}>Followers</span>
                 </div>
               </Col>
               <Col span={8}>
-                <div className={styles.count}>
+                <div className={Userstyles.count}>
                   {data.following_aggregate.aggregate.count}
-                  <span className={styles.text}>Following</span>
+                  <span className={Userstyles.text}>Following</span>
                 </div>
               </Col>
             </Row>
           </div>
         </div>
 
-        <div className={styles.mobileProfile}>
-          <div className={styles.profileContainer}>
-            <img className={styles.avatar} src={data.profile_pic} alt="" />
-            <div className={styles.userDetails}>
+        <div className={Userstyles.mobileProfile}>
+          <div className={Userstyles.profileContainer}>
+            <img className={Userstyles.avatar} src={data.profile_pic} alt="" />
+            <div className={Userstyles.userDetails}>
               <h2>
                 {data.first_name} {data.last_name}
               </h2>
@@ -137,37 +145,37 @@ export class user extends Component {
               <h4>{data.bio}</h4>
             </div>
 
-            <div className={styles.userInfo}>
+            <div className={Userstyles.userInfo}>
               <Row>
                 <Col span={8}>
-                  <div className={styles.count}>
+                  <div className={Userstyles.count}>
                     {data.followers_aggregate.aggregate.count}
                   </div>
-                  <div className={styles.text}>Followers</div>
+                  <div className={Userstyles.text}>Followers</div>
                 </Col>
                 <Col span={8}>
-                  <div className={styles.count}>
+                  <div className={Userstyles.count}>
                     {data.following_aggregate.aggregate.count}
                   </div>
-                  <div className={styles.text}>Following</div>
+                  <div className={Userstyles.text}>Following</div>
                 </Col>
                 <Col span={8}>
-                  <div className={styles.count}>
+                  <div className={Userstyles.count}>
                     {data.learning_paths_aggregate.aggregate.count}
                   </div>
-                  <div className={styles.text}>Learning Paths</div>
+                  <div className={Userstyles.text}>Learning Paths</div>
                 </Col>
               </Row>
             </div>
 
-            <div className={styles.bio}>{data.about}</div>
+            <div className={Userstyles.bio}>{data.about}</div>
 
             {data.skills !== null ? (
-              <div className={styles.skills}>
+              <div className={Userstyles.skills}>
                 <h2>Skills</h2>
                 {data.skills.split(",").map((skill, i) => {
                   return (
-                    <div key={i} className={styles.skill}>
+                    <div key={i} className={Userstyles.skill}>
                       {skill}
                     </div>
                   )
@@ -177,15 +185,15 @@ export class user extends Component {
               <div></div>
             )}
 
-            <div className={styles.social}>
-              <Row className={styles.social_row}>
+            <div className={Userstyles.social}>
+              <Row className={Userstyles.social_row}>
                 {data.github !== "" &&
                 data.github !== null &&
                 data.github !== "https://github.com/" ? (
                   <Col span={6}>
                     <Icon
                       onClick={() => window.open(data.github)}
-                      className={styles.icon}
+                      className={Userstyles.icon}
                       type="github"
                       theme="filled"
                     />
@@ -199,7 +207,7 @@ export class user extends Component {
                   <Col span={6}>
                     <Icon
                       onClick={() => window.open(data.linkedin)}
-                      className={styles.icon}
+                      className={Userstyles.icon}
                       type="linkedin"
                       theme="filled"
                     />
@@ -213,7 +221,7 @@ export class user extends Component {
                   <Col span={6}>
                     <Icon
                       onClick={() => window.open(data.twitter)}
-                      className={styles.icon}
+                      className={Userstyles.icon}
                       type="twitter"
                     />
                   </Col>
@@ -226,7 +234,7 @@ export class user extends Component {
                   <Col span={6}>
                     <Icon
                       onClick={() => window.open(data.facebook)}
-                      className={styles.icon}
+                      className={Userstyles.icon}
                       type="facebook"
                       theme="filled"
                     />
@@ -239,9 +247,9 @@ export class user extends Component {
           </div>
         </div>
 
-        <Row className={styles.menuContainer}>
+        <Row className={Userstyles.menuContainer}>
           <Col span={24}>
-            <div className={styles.content}>
+            <div className={Userstyles.content}>
               <LearningPaths
                 learning_paths={data.learning_paths}
                 user_id={data.id}
diff --git a/src/components/publicProfile.js b/src/components/publicProfile.js
index 02aebd6..eb1611d 100644
--- a/src/components/publicProfile.js
+++ b/src/components/publicProfile.js
@@ -2,16 +2,16 @@ import React, { Component } from "react"
 import { Query } from "react-apollo"
 import gql from "graphql-tag"
 import { navigate } from "gatsby"
-import LearningPathCard from "./User/learningPathCard"
+import LearningPathCard from "../Statefull/User/learningPathCard"
 import { Row, Col, Icon } from "antd"
 
-import Header from "./Layout/sideDrawer"
-import Footer from "./Layout/footer"
-import Loader from "./Layout/loader"
+import Header from "../Stateless/Layout/sideDrawer"
+import Footer from "../Stateless/Layout/footer"
+import Loader from "../Stateless/Layout/loader"
 
-import userStyles from "../styles/user.module.css"
-import styles from "../styles/layout.module.css"
-import pathStyles from "../styles/result.module.css"
+import Userstyles from "../styles/user.module.css"
+import Layoutstyles from "../styles/layout.module.css"
+import Resultstyles from "../styles/result.module.css"
 
 export class publicProfile extends Component {
   state = {
@@ -34,7 +34,7 @@ export class publicProfile extends Component {
           if (loading)
             return (
               <div>
-                <div className={styles.content}>
+                <div className={Layoutstyles.content}>
                   <Header show={false} />
                   <Loader />
                 </div>
@@ -44,7 +44,7 @@ export class publicProfile extends Component {
           if (error)
             return (
               <div>
-                <div className={styles.content}>
+                <div className={Layoutstyles.content}>
                   <Header show={false} />
                   <h1>Error Loading User</h1>
                 </div>
@@ -55,38 +55,38 @@ export class publicProfile extends Component {
             <div>
               {data ? (
                 <div>
-                  <div className={userStyles.content}>
+                  <div className={Userstyles.content}>
                     <Header show={false} />
-                    <div className={userStyles.container}>
+                    <div className={Userstyles.container}>
                       <div
                         className={
-                          userStyles.profileContainer +
+                          Userstyles.profileContainer +
                           " " +
-                          userStyles.desktopProfile
+                          Userstyles.desktopProfile
                         }
                       >
-                        <div className={userStyles.profileInfo}>
+                        <div className={Userstyles.profileInfo}>
                           <h1>
                             {data.first_name} {data.last_name}
                           </h1>
                           <h2>{data.username}</h2>
                           <h3>{data.bio}</h3>
                         </div>
-                        <div className={userStyles.profileImgContainer}>
+                        <div className={Userstyles.profileImgContainer}>
                           <img
-                            className={userStyles.profileImg}
+                            className={Userstyles.profileImg}
                             src={data.profile_pic}
                             alt=""
                           />
-                          <div className={userStyles.social}>
-                            <Row className={userStyles.social_row}>
+                          <div className={Userstyles.social}>
+                            <Row className={Userstyles.social_row}>
                               {data.github !== "" &&
                               data.github !== null &&
                               data.github !== "https://github.com/" ? (
                                 <Col span={6}>
                                   <Icon
                                     onClick={() => window.open(data.github)}
-                                    className={userStyles.icon}
+                                    className={Userstyles.icon}
                                     type="github"
                                     theme="filled"
                                   />
@@ -100,7 +100,7 @@ export class publicProfile extends Component {
                                 <Col span={6}>
                                   <Icon
                                     onClick={() => window.open(data.linkedin)}
-                                    className={userStyles.icon}
+                                    className={Userstyles.icon}
                                     type="linkedin"
                                     theme="filled"
                                   />
@@ -114,7 +114,7 @@ export class publicProfile extends Component {
                                 <Col span={6}>
                                   <Icon
                                     onClick={() => window.open(data.twitter)}
-                                    className={userStyles.icon}
+                                    className={Userstyles.icon}
                                     type="twitter"
                                   />
                                 </Col>
@@ -127,7 +127,7 @@ export class publicProfile extends Component {
                                 <Col span={6}>
                                   <Icon
                                     onClick={() => window.open(data.facebook)}
-                                    className={userStyles.icon}
+                                    className={Userstyles.icon}
                                     type="facebook"
                                     theme="filled"
                                   />
@@ -138,18 +138,18 @@ export class publicProfile extends Component {
                             </Row>
                           </div>
                         </div>
-                        <div className={userStyles.profileDetail}>
-                          <div className={userStyles.profileAbout}>
+                        <div className={Userstyles.profileDetail}>
+                          <div className={Userstyles.profileAbout}>
                             <h1>About</h1>
-                            <p className={userStyles.bioContent}>
+                            <p className={Userstyles.bioContent}>
                               {data.about}
                             </p>
                             {data.skills ? (
-                              <div className={userStyles.skills}>
+                              <div className={Userstyles.skills}>
                                 <h1>Skills</h1>
                                 {data.skills.split(",").map((skill, i) => {
                                   return (
-                                    <div key={i} className={userStyles.skill}>
+                                    <div key={i} className={Userstyles.skill}>
                                       {skill}
                                     </div>
                                   )
@@ -159,37 +159,37 @@ export class publicProfile extends Component {
                               <div></div>
                             )}
                           </div>
-                          <Row className={userStyles.userInfo}>
+                          <Row className={Userstyles.userInfo}>
                             <Col span={8}>
-                              <div className={userStyles.count}>
+                              <div className={Userstyles.count}>
                                 {data.learning_paths_aggregate.aggregate.count}
-                                <span className={userStyles.text}>
+                                <span className={Userstyles.text}>
                                   Learning Paths
                                 </span>
                               </div>
                             </Col>
                             <Col span={8}>
-                              <div className={userStyles.count}>
+                              <div className={Userstyles.count}>
                                 {data.followers_aggregate.aggregate.count}
-                                <span className={userStyles.text}>
+                                <span className={Userstyles.text}>
                                   Followers
                                 </span>
                               </div>
                             </Col>
                             <Col span={8}>
-                              <div className={userStyles.count}>
+                              <div className={Userstyles.count}>
                                 {data.following_aggregate.aggregate.count}
-                                <span className={userStyles.text}>
+                                <span className={Userstyles.text}>
                                   Following
                                 </span>
                               </div>
                             </Col>
                           </Row>
                         </div>
-                        <div className={userStyles.profileLearningPath}>
+                        <div className={Userstyles.profileLearningPath}>
                           <h1>Learning Paths ({data.learning_paths.length})</h1>
                         </div>
-                        <div className={userStyles.profilePath}>
+                        <div className={Userstyles.profilePath}>
                           {data.learning_paths.map((data, index) => {
                             return (
                               <LearningPathCard
@@ -202,14 +202,14 @@ export class publicProfile extends Component {
                         </div>
                       </div>
 
-                      <div className={userStyles.mobileProfile}>
-                        <div className={userStyles.profileContainer}>
+                      <div className={Userstyles.mobileProfile}>
+                        <div className={Userstyles.profileContainer}>
                           <img
-                            className={userStyles.avatar}
+                            className={Userstyles.avatar}
                             src={data.profile_pic}
                             alt=""
                           />
-                          <div className={userStyles.userDetails}>
+                          <div className={Userstyles.userDetails}>
                             <h2>
                               {data.first_name} {data.last_name}
                             </h2>
@@ -217,42 +217,42 @@ export class publicProfile extends Component {
                             <h4>{data.bio}</h4>
                           </div>
 
-                          <div className={userStyles.userInfo}>
+                          <div className={Userstyles.userInfo}>
                             <Row>
                               <Col span={8}>
-                                <div className={userStyles.count}>
+                                <div className={Userstyles.count}>
                                   {data.followers_aggregate.aggregate.count}
                                 </div>
-                                <div className={userStyles.text}>Followers</div>
+                                <div className={Userstyles.text}>Followers</div>
                               </Col>
                               <Col span={8}>
-                                <div className={userStyles.count}>
+                                <div className={Userstyles.count}>
                                   {data.following_aggregate.aggregate.count}
                                 </div>
-                                <div className={userStyles.text}>Following</div>
+                                <div className={Userstyles.text}>Following</div>
                               </Col>
                               <Col span={8}>
-                                <div className={userStyles.count}>
+                                <div className={Userstyles.count}>
                                   {
                                     data.learning_paths_aggregate.aggregate
                                       .count
                                   }
                                 </div>
-                                <div className={userStyles.text}>
+                                <div className={Userstyles.text}>
                                   Learning Paths
                                 </div>
                               </Col>
                             </Row>
                           </div>
 
-                          <div className={userStyles.bio}>{data.about}</div>
+                          <div className={Userstyles.bio}>{data.about}</div>
 
                           {data.skills !== null ? (
-                            <div className={userStyles.skills}>
+                            <div className={Userstyles.skills}>
                               <h2>Skills</h2>
                               {data.skills.split(",").map((skill, i) => {
                                 return (
-                                  <div key={i} className={userStyles.skill}>
+                                  <div key={i} className={Userstyles.skill}>
                                     {skill}
                                   </div>
                                 )
@@ -262,15 +262,15 @@ export class publicProfile extends Component {
                             <div></div>
                           )}
 
-                          <div className={userStyles.social}>
-                            <Row className={userStyles.social_row}>
+                          <div className={Userstyles.social}>
+                            <Row className={Userstyles.social_row}>
                               {data.github !== "" &&
                               data.github !== null &&
                               data.github !== "https://github.com/" ? (
                                 <Col span={6}>
                                   <Icon
                                     onClick={() => window.open(data.github)}
-                                    className={userStyles.icon}
+                                    className={Userstyles.icon}
                                     type="github"
                                     theme="filled"
                                   />
@@ -284,7 +284,7 @@ export class publicProfile extends Component {
                                 <Col span={6}>
                                   <Icon
                                     onClick={() => window.open(data.linkedin)}
-                                    className={userStyles.icon}
+                                    className={Userstyles.icon}
                                     type="linkedin"
                                     theme="filled"
                                   />
@@ -298,7 +298,7 @@ export class publicProfile extends Component {
                                 <Col span={6}>
                                   <Icon
                                     onClick={() => window.open(data.twitter)}
-                                    className={userStyles.icon}
+                                    className={Userstyles.icon}
                                     type="twitter"
                                   />
                                 </Col>
@@ -311,7 +311,7 @@ export class publicProfile extends Component {
                                 <Col span={6}>
                                   <Icon
                                     onClick={() => window.open(data.facebook)}
-                                    className={userStyles.icon}
+                                    className={Userstyles.icon}
                                     type="facebook"
                                     theme="filled"
                                   />
@@ -323,12 +323,12 @@ export class publicProfile extends Component {
                           </div>
                         </div>
                         <Row>
-                          <div className={userStyles.mobileProfileLearningPath}>
+                          <div className={Userstyles.mobileProfileLearningPath}>
                             <h1>
                               Learning Paths ({data.learning_paths.length})
                             </h1>
                           </div>
-                          <div className={pathStyles.resultPath}>
+                          <div className={Resultstyles.resultPath}>
                             {data.learning_paths.map((data, index) => {
                               return (
                                 <LearningPathCard
@@ -348,12 +348,14 @@ export class publicProfile extends Component {
                 </div>
               ) : (
                 <div>
-                  <div className={styles.content}>
+                  <div className={Layoutstyles.content}>
                     <Header show={false} />
                     <div>
-                      <h1 className={styles.public_not_found}>
+                      <h1 className={Layoutstyles.public_not_found}>
                         No profile found with username{" "}
-                        <span className={styles.public_not_found_username}>
+                        <span
+                          className={Layoutstyles.public_not_found_username}
+                        >
                           {this.props.username}
                         </span>
                       </h1>
@@ -365,7 +367,7 @@ export class publicProfile extends Component {
                         }}
                       >
                         <div
-                          className={styles.public_not_found_go_home}
+                          className={Layoutstyles.public_not_found_go_home}
                           onClick={() => navigate("/")}
                         >
                           <Icon type="home" style={{ marginRight: "10px" }} />{" "}
diff --git a/src/helper/Validation.js b/src/helper/Validation.js
new file mode 100644
index 0000000..8680e5f
--- /dev/null
+++ b/src/helper/Validation.js
@@ -0,0 +1,57 @@
+noContent = footsteps => {
+  let valid = false
+
+  for (var i = 0; i < footsteps.length; i++) {
+    if (Object.keys(footsteps[i]).length <= 1) {
+      valid = true
+    }
+  }
+
+  return valid
+}
+
+emptyContent = footsteps => {
+  let valid = false
+
+  for (var i = 0; i < footsteps.length; i++) {
+    let footstep = footsteps[i]
+
+    for (var key in footstep) {
+      if (key !== "description") {
+        if (footstep[key] === "") {
+          valid = true
+        }
+      }
+    }
+  }
+
+  return valid
+}
+
+validatePathDetails = footsteps => {
+  let footstep = footsteps
+  let err_msg
+  if (
+    footstep.title === "" ||
+    footstep.description === "" ||
+    footstep.icon_url === "" ||
+    footstep.tags === ""
+  ) {
+    err_msg = "Please fill the path details"
+    return false
+  } else if (footstep.footsteps.length < 1) {
+    err_msg = "Please add a few footsteps. Footsteps can not be empty."
+    return false
+  } else if (this.noContent(footstep)) {
+    err_msg = "Please fill the footstep content"
+    return false
+  } else if (this.emptyContent(footstep)) {
+    err_msg = "Please fill all the footstep fields"
+    return false
+  } else {
+    err_msg = ""
+    return true
+  }
+}
+
+// export { validatePathDetails, err_msg }
diff --git a/src/pages/about.js b/src/pages/about.js
index 8a6095e..7023838 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -1,14 +1,14 @@
 import React, { Component } from "react"
 import { Row, Col } from "antd"
 
-import Layout from "../components/Layout/layout"
-import styles from "../styles/about.module.css"
+import Layout from "../Statefull/Layout/layout"
+import Aboutstyles from "../styles/about.module.css"
 
 export class about extends Component {
   render() {
     return (
       <Layout>
-        <div className={styles.container}>
+        <div className={Aboutstyles.container}>
           <Row>
             <Col xs={24} md={12}>
               <h1>About Footsteps</h1>
diff --git a/src/pages/add.js b/src/pages/add.js
index 1c9dd5d..611dbb9 100644
--- a/src/pages/add.js
+++ b/src/pages/add.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react"
 
-import Layout from "../components/Layout/layout"
-import AddPath from "../components/Create/addPath"
+import Layout from "../Statefull/Layout/layout"
+import AddPath from "../Statefull/Create/addPath"
 
 export class add extends Component {
   render() {
diff --git a/src/pages/editPath.js b/src/pages/editPath.js
index 6b1540b..f38fe3d 100644
--- a/src/pages/editPath.js
+++ b/src/pages/editPath.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react"
 import { Router } from "@reach/router"
 
-import EditPath from "../components/EditPath"
+import EditPath from "../Statefull/EditPath/editPath"
 
 export class editPath extends Component {
   render() {
diff --git a/src/pages/index.js b/src/pages/index.js
index e105f6e..e0b6e50 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react"
 
-import Layout from "../components/Layout/layout"
-import Landing from "../components/Landing"
+import Layout from "../Statefull/Layout/layout"
+import Landing from "../Stateless/Landing/index"
 
 export class index extends Component {
   render() {
diff --git a/src/pages/profile.js b/src/pages/profile.js
index f41e02a..2cff0ce 100644
--- a/src/pages/profile.js
+++ b/src/pages/profile.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react"
-import Layout from "../components/Layout/layout"
-import User from "../components/User"
+import Layout from "../Statefull/Layout/layout"
+import User from "../Stateless/User/index"
 
 export class profile extends Component {
   render() {
diff --git a/src/pages/search.js b/src/pages/search.js
index fb015b5..6fd65d9 100644
--- a/src/pages/search.js
+++ b/src/pages/search.js
@@ -3,10 +3,10 @@ import queryString from "query-string"
 import { Query } from "react-apollo"
 import gql from "graphql-tag"
 
-import Layout from "../components/Layout/layout"
-import SearchResult from "../components/Search/searchResult"
-import Loader from "../components/Layout/loader"
-import styles from "../styles/search.module.css"
+import Layout from "../Statefull/Layout/layout"
+import SearchResult from "../Statefull/Search/searchResult"
+import Loader from "../Stateless/Layout/loader"
+import Searchstyles from "../styles/search.module.css"
 
 export class search extends Component {
   state = {
@@ -21,11 +21,11 @@ export class search extends Component {
   render() {
     return (
       <Layout>
-        <div className={styles.container}>
-          <h1 className={styles.heading}>
+        <div className={Searchstyles.container}>
+          <h1 className={Searchstyles.heading}>
             Search results for "{this.state.query}"
           </h1>
-          <div className={styles.resultContainer}>
+          <div className={Searchstyles.resultContainer}>
             <Query
               query={SEARCH_QUERY_APOLLO}
               variables={{ query: "%" + this.state.query + "%" }}
diff --git a/src/pages/settings.js b/src/pages/settings.js
index 332c488..3d6b5d3 100644
--- a/src/pages/settings.js
+++ b/src/pages/settings.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react"
 
-import Layout from "../components/Layout/layout"
-import Settings from "../components/Settings"
+import Layout from "../Statefull/Layout/layout"
+import Settings from "../Settings"
 
 export class settings extends Component {
   render() {
diff --git a/src/utils/typography.js b/src/utils/typography.js
index 526d8dd..abcb2ea 100644
--- a/src/utils/typography.js
+++ b/src/utils/typography.js
@@ -1,4 +1,6 @@
-import Typography from "typography"
-import grandViewTheme from "typography-theme-grand-view"
-const typography = new Typography(grandViewTheme)
-export default typography
+import Typography from "typography"
+import grandViewTheme from "typography-theme-grand-view"
+
+const typography = new Typography(grandViewTheme)
+
+export default typography