diff --git a/.eslintcache b/.eslintcache
index 4e9dbce..953351b 100644
--- a/.eslintcache
+++ b/.eslintcache
@@ -1 +1 @@
-[{"/Users/vilasayrathahao/Documents/FreeOpenUniversity/splash--page/src/index.js":"1","/Users/vilasayrathahao/Documents/FreeOpenUniversity/splash--page/src/App.js":"2","/Users/vilasayrathahao/Documents/FreeOpenUniversity/splash--page/src/reportWebVitals.js":"3"},{"size":500,"mtime":1610117916212,"results":"4","hashOfConfig":"5"},{"size":144,"mtime":1610122043791,"results":"6","hashOfConfig":"5"},{"size":362,"mtime":1610117916213,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"q4ivd7",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/vilasayrathahao/Documents/FreeOpenUniversity/splash--page/src/index.js",[],"/Users/vilasayrathahao/Documents/FreeOpenUniversity/splash--page/src/App.js",[],"/Users/vilasayrathahao/Documents/FreeOpenUniversity/splash--page/src/reportWebVitals.js",[]]
\ No newline at end of file
+[{"C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\index.js":"1","C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\App.js":"2","C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\reportWebVitals.js":"3","C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\components\\Navbar\\Navbar.js":"4","C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\components\\Hero\\index.js":"5","C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\components\\SearchBar.js":"6"},{"size":500,"mtime":1610126499193,"results":"7","hashOfConfig":"8"},{"size":231,"mtime":1610237254969,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":1610126499216,"results":"10","hashOfConfig":"8"},{"size":1125,"mtime":1610244588586,"results":"11","hashOfConfig":"8"},{"size":702,"mtime":1610237110498,"results":"12","hashOfConfig":"8"},{"size":697,"mtime":1610237111090,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"afgwvf",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"23","messages":"24","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"25","usedDeprecatedRules":"16"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"28","usedDeprecatedRules":"16"},"C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\index.js",[],["29","30"],"C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\App.js",[],"C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\reportWebVitals.js",[],"C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\components\\Navbar\\Navbar.js",["31"],"C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\components\\Hero\\index.js",["32"],"import { SearchBar } from \"../SearchBar\"\nimport \"./index.css\"\nimport heroimg from \"./resources/hero_img.png\"\n\nconst Hero = () => {\n    return (\n      <div className=\"varela bg-img mv6 tl h-100\">\n        <div className=\"flex justify-around ph6\">\n          <div className=\" pt6 w-40-l\">\n            <h1 className=\"f1\">Powerful search tools for your documents</h1>\n            <p className =\"f3 mid-gray w-90-l\">You simply input keywords, then all relavant results will be returned within miliseconds.</p>\n          </div>\n          <img src={heroimg} className=\"w-40-l \"/>\n        </div>\n        <div className=\"\"><SearchBar/></div>\n        \n        \n      </div>\n    );\n  };\n  \n  export default Hero;\n  ","C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\components\\SearchBar.js",["33"],"import { isEmpty } from \"lodash\";\nimport React from \"react\";\n// import { connect } from \"react-redux\";\n// import { api } from \"../store\";\n\nexport function SearchBar({ books, className }) {\n  // isEmpty(books) && api.book.read();\n  return (\n    <div className={\"pa5 pb5 flex justify-center tc\" + className}>\n      <input\n        type=\"text\"\n        className=\"f2 fw5 shadow-5 pv3 ph5 br-pill mr2 b-dark-green bw0 \"\n      ></input>\n      <button className=\"fw6 shadow-5  white ph4 br-pill  f3 ttc bg-blue b-dark-green bw0 \">\n        search\n      </button>\n    </div>\n  );\n}\n\n// export const SearchBar \n// = connect(\n//   (state, props) => ({ books: state.book, ...props }),\n//   {}\n// )(searchBar);\n",{"ruleId":"34","replacedBy":"35"},{"ruleId":"36","replacedBy":"37"},{"ruleId":"38","severity":1,"message":"39","line":1,"column":17,"nodeType":"40","messageId":"41","endLine":1,"endColumn":26},{"ruleId":"42","severity":1,"message":"43","line":13,"column":11,"nodeType":"44","endLine":13,"endColumn":51},{"ruleId":"38","severity":1,"message":"45","line":1,"column":10,"nodeType":"40","messageId":"41","endLine":1,"endColumn":17},"no-native-reassign",["46"],"no-negated-in-lhs",["47"],"no-unused-vars","'Component' is defined but never used.","Identifier","unusedVar","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","'isEmpty' is defined but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 4d29575..00ec607 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.eslintcache
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/package-lock.json b/package-lock.json
index eccaf3a..20e68dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15007,7 +15007,6 @@
           "version": "2.3.2",
           "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
           "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-          "optional": true,
           "requires": {
             "arr-flatten": "^1.1.0",
             "array-unique": "^0.3.2",
@@ -15025,7 +15024,6 @@
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -15056,7 +15054,6 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
           "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "optional": true,
           "requires": {
             "extend-shallow": "^2.0.1",
             "is-number": "^3.0.0",
@@ -15068,7 +15065,6 @@
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -15119,7 +15115,6 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "optional": true,
           "requires": {
             "kind-of": "^3.0.2"
           },
@@ -15128,7 +15123,6 @@
               "version": "3.2.2",
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
               "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "optional": true,
               "requires": {
                 "is-buffer": "^1.1.5"
               }
@@ -15139,7 +15133,6 @@
           "version": "3.1.10",
           "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
           "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-          "optional": true,
           "requires": {
             "arr-diff": "^4.0.0",
             "array-unique": "^0.3.2",
@@ -15195,7 +15188,6 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
           "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-          "optional": true,
           "requires": {
             "is-number": "^3.0.0",
             "repeat-string": "^1.6.1"
diff --git a/public/index.html b/public/index.html
index 9d88cbd..ed77683 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,6 +23,9 @@
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
   />
+
+  <!-- Varela Round font -->
+  <link href="http://fonts.cdnfonts.com/css/varela-round-3" rel="stylesheet">
   
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
diff --git a/src/App.css b/src/App.css
index 74b5e05..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.js b/src/App.js
index 2e7652c..3d54544 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,13 @@
 
 import './App.css';
+import Hero from './components/Hero';
+import Navbar from './components/Navbar/Navbar'
 
 function App() {
   return (
     <div className="App">
-      <div>HELLO WORLD</div>
+      <Navbar/>
+      <Hero/>
     </div>
   );
 }
diff --git a/src/components/Hero/index.css b/src/components/Hero/index.css
new file mode 100644
index 0000000..efd7b82
--- /dev/null
+++ b/src/components/Hero/index.css
@@ -0,0 +1,10 @@
+.bg-img {
+    background-image: url("./resources/hero_bg.png");
+    background-repeat: no-repeat;
+    background-size: 65% 100%;
+    background-position: right;
+}
+
+.varela {
+    font-family: 'Varela Round', sans-serif;
+}
\ No newline at end of file
diff --git a/src/components/Hero/index.js b/src/components/Hero/index.js
index 61beb24..6132540 100644
--- a/src/components/Hero/index.js
+++ b/src/components/Hero/index.js
@@ -1,7 +1,20 @@
+import { SearchBar } from "../SearchBar"
+import "./index.css"
+import heroimg from "./resources/hero_img.png"
+
 const Hero = () => {
     return (
-      <div>
-          this is for hero section
+      <div className="varela bg-img mv6 tl h-100">
+        <div className="flex justify-around ph6">
+          <div className=" pt6 w-40-l">
+            <h1 className="f1">Powerful search tools for your documents</h1>
+            <p className ="f3 mid-gray w-90-l">You simply input keywords, then all relavant results will be returned within miliseconds.</p>
+          </div>
+          <img src={heroimg} className="w-40-l "/>
+        </div>
+        <div className=""><SearchBar/></div>
+        
+        
       </div>
     );
   };
diff --git a/src/components/Hero/resources/hero_bg.png b/src/components/Hero/resources/hero_bg.png
new file mode 100644
index 0000000..1900469
Binary files /dev/null and b/src/components/Hero/resources/hero_bg.png differ
diff --git a/src/components/Hero/resources/hero_img.png b/src/components/Hero/resources/hero_img.png
new file mode 100644
index 0000000..d61d1a6
Binary files /dev/null and b/src/components/Hero/resources/hero_img.png differ
diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
new file mode 100644
index 0000000..ad523ea
--- /dev/null
+++ b/src/components/Navbar/Navbar.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+
+const Navbar = () => {
+
+        return (
+        <div className="">
+            <nav className="flex justify-between items-center ph5 fixed w-100 top-0 ">
+                <h1 className="">
+                    <a className="varela f3 no-underline black" href="index.html"> Colligate Independent Study</a>
+                </h1>
+                <ul className="flex no-underline
+                ">
+                    <li className="list"><a className="ttu ph2 mh3 varela no-underline black" href="profiles.html">Products</a></li>
+                    <li className="list" ><a className="ttu varela no-underline black ph2 mh3" href="register.html">Technologies</a></li>
+                    <li className="list"><a className="ttu p2 mh3 varela no-underline black" href="login.html">Teams</a></li>
+                    <li className="list"><a className="ttc bg-light-blue ba br-2 white mh3 ph2 pv1 varela no-underline" href="login.html">Subscribe</a></li>
+
+                </ul>
+            </nav>
+        </div>
+        
+        ) 
+    
+}
+
+
+
+export default Navbar
\ No newline at end of file
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
new file mode 100644
index 0000000..e2a9ce0
--- /dev/null
+++ b/src/components/SearchBar.js
@@ -0,0 +1,25 @@
+import { isEmpty } from "lodash";
+import React from "react";
+// import { connect } from "react-redux";
+// import { api } from "../store";
+
+export function SearchBar({ books, className }) {
+  // isEmpty(books) && api.book.read();
+  return (
+    <div className={"pa5 pb5 flex justify-center tc" + className}>
+      <input
+        type="text"
+        className="f2 fw5 shadow-5 pv3 ph5 br-pill mr2 b-dark-green bw0 "
+      ></input>
+      <button className="fw6 shadow-5  white ph4 br-pill  f3 ttc bg-blue b-dark-green bw0 ">
+        search
+      </button>
+    </div>
+  );
+}
+
+// export const SearchBar 
+// = connect(
+//   (state, props) => ({ books: state.book, ...props }),
+//   {}
+// )(searchBar);