diff --git a/README.md b/README.md
index 9d3c4db..cd71ec5 100644
Binary files a/README.md and b/README.md differ
diff --git a/client/src/App.js b/client/src/App.js
index d5e6089..3d890a2 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -15,7 +15,7 @@ function App() {
   const onSetisLoggedState = () => {
     setisLogged(true);
   };
-  
+
   useEffect(() => {
     const data = localStorage.getItem(localStorage_key);
     console.log(data);
@@ -29,47 +29,44 @@ function App() {
   }, []);
 
   return (
-    <div className="h-full">
-       
-      <BrowserRouter>
-        <Switch>
-        {isLogged &&(
-          <Route path="/home" exact >
-              <Navbar />
+    <BrowserRouter>
+      <Switch>
+        {isLogged && (
+          <Route path="/" exact>
+            <Navbar />
+          </Route>
+        )}
+
+        {!isLogged && (
+          <Route path="/register" exact>
+            <Register onsetislogged={onSetisLoggedState} />
           </Route>
         )}
 
-          {!isLogged && (
-            <Route path="/register" exact>
-              <Register onsetislogged={onSetisLoggedState} />
-            </Route>
-          )}
+        {!isLogged && (
+          <Route path="/login" exact>
+            <Login />
+          </Route>
+        )}
 
-          {!isLogged && (
-            <Route path="/login" exact>
-              <Login />
-            </Route>
-          )}
-          
-            <Route path="/" exact>
-              <Home />
-            </Route>
-         
-          {isLogged && (
-            <Route path="/profile" exact>
-              <Profile
-                name="Saurabh"
-                email="abcd.com"
-                bio="I'm a software engineer based in San Francisco."
-              />
-            </Route>
-          )}
-          <Route path="*">
-            {isLogged ? <Redirect to="/home" /> : <Redirect to="/login" />}
+        <Route path="/home" exact>
+          <Home />
+        </Route>
+
+        {isLogged && (
+          <Route path="/profile" exact>
+            <Profile
+              name="Saurabh"
+              email="abcd.com"
+              bio="I'm a software engineer based in San Francisco."
+            />
           </Route>
-        </Switch>
-      </BrowserRouter>
-    </div>
+        )}
+        <Route path="*">
+          {isLogged ? <Redirect to="/home" /> : <Redirect to="/login" />}
+        </Route>
+      </Switch>
+    </BrowserRouter>
   );
 }
 
diff --git a/client/src/components/home/Home.jsx b/client/src/components/home/Home.jsx
index 3388f27..1a3b5e3 100644
--- a/client/src/components/home/Home.jsx
+++ b/client/src/components/home/Home.jsx
@@ -1,44 +1,15 @@
-import React from 'react';
-import classes from "./home.module.css";
+import styles from "./home.module.css";
 
 const Home = () => {
   return (
-    <div className={classes.home}>
-      <div className={classes.left}>
-        <h1 className={classes.brandName}>
-          <span className={classes.devText}>DEV</span> 
-          <span className={classes.gramText}>GRAM.</span>
-        </h1>
-
-        <h2 className={classes.displayText}>
-        Built for developers by developers /&gt; 
-        </h2>
-      </div>
-
-     
-      <div className={classes.right}>
-        <div className={classes.loginSignup}>
-          <a href="/login" className={classes.loginLink}>Log in</a>
-          <a href="/register" className={classes.signupLink}>Sign up</a>
-        </div>
-
-        <h2 className={classes.devMeaning}>
-          Developer
-          <span className={classes.devMeaningNoun}>
-          noun 
-          </span>
-          <br />
-          <span className={classes.devMeaningSentence}>
-          -a person or thing that develops something
-          </span>
-        </h2>
-
-        <h2 className={classes.descText}>
-          DevGram is a web application designed for developers to connect with each other.
-        </h2>
-      </div>
-    </div>
+    <main className={styles.home_outerdiv}>
+      <section>main data</section>
+      <aside>
+        <div>notification</div>
+        <div>Trending</div>
+      </aside>
+    </main>
   );
-}
+};
 
 export default Home;
diff --git a/client/src/components/home/home.module.css b/client/src/components/home/home.module.css
index d9a8719..4fb496f 100644
--- a/client/src/components/home/home.module.css
+++ b/client/src/components/home/home.module.css
@@ -1,115 +1,26 @@
-.home {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
-    position: relative;
-  }
-  
-  
-  .left {
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    left: 20px; 
-    top: 20px; 
-  }
-  
-  .brandName {
-    position: fixed;
-    width: 120px;
-    height: 12px;
-    font-size: 35px;
-    font-weight: bold;
-  }
-  
-  .devText {
-    color: rgba(0, 0, 0, 0.9);
-  }
-  
-  .gramText {
-    color: #999999;
-  }
-  
-  .displayText {
-    font-size: 50px;
-    margin-top: 16%;
-    margin-left: 40px;
-    width: 40%;
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    background-repeat: repeat;
-	background-color: #fff;
-	
-  }
-  
-  .right {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: fixed;
-    right: 20px;
-    top: 25px;
-  }
-  
-  
-  .loginSignup {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-right: 40px;
-  }
-  
-  .loginLink {
-    margin-right: 50px;
-    color: #808080;
-    font-size: 20px;
-    display: inline-block;
-  }
-  
-  .signupLink {
-    color: #808080;
-    font-size: 20px;
-    display: inline-block;
-  }
-  
-  
-  .descText{
-    font-size: 15px;
-    position: fixed;
-    bottom: 70px;
-    margin-right: 300px;
-    left: auto;
-    width: 50%;
-    width: 40%;
-    word-wrap: break-word;
-    white-space: pre-wrap;
-  }
-
-  .devMeaning{
-    position: absolute;
-    font-size: 40px;
-    margin-top: 160px;
-    margin-right: 450px;
-    width: 40%;
-  }
-
-  .devMeaningNoun{
-    position: absolute;
-    font-size: 20px;
-    margin-top: 20px;
-    color: grey;
-  }
-
-  .devMeaningSentence{
-    position: absolute;
-    font-size: 20px;
-    margin-top: -5px;
-    margin-left: -10px;
-    font-weight:200;
-    width: 450%;
-    word-wrap: break-word;
-    white-space: pre-wrap;  
-    color: grey;
-  }
\ No newline at end of file
+.home_outerdiv {
+  border: 1px solid black;
+  min-height: 100vh;
+  position: relative;
+  padding: 2rem 4rem;
+  display: flex;
+}
+.home_outerdiv section {
+  height: 1500px;
+  margin-right: 300px;
+  border: 1px solid red;
+  width: 100%;
+}
+.home_outerdiv aside {
+  position: fixed;
+  width: 300px;
+  top: 2rem;
+  right: 4rem;
+  border: 2px solid black;
+  overflow-y: scroll;
+  height: 89vh;
+}
+.home_outerdiv aside div {
+  height: 300px;
+  border: 1px solid blue;
+}
diff --git a/client/src/components/landing page/LandingPage.jsx b/client/src/components/landing page/LandingPage.jsx
new file mode 100644
index 0000000..83ee410
--- /dev/null
+++ b/client/src/components/landing page/LandingPage.jsx	
@@ -0,0 +1,45 @@
+import classes from "./landing.module.css";
+
+const LandingPage = () => {
+  return (
+    <div className={classes.home}>
+      <div className={classes.left}>
+        <h1 className={classes.brandName}>
+          <span className={classes.devText}>DEV</span>
+          <span className={classes.gramText}>GRAM.</span>
+        </h1>
+
+        <h2 className={classes.displayText}>
+          Built for developers by developers /&gt;
+        </h2>
+      </div>
+
+      <div className={classes.right}>
+        <div className={classes.loginSignup}>
+          <a href="/login" className={classes.loginLink}>
+            Log in
+          </a>
+          <a href="/register" className={classes.signupLink}>
+            Sign up
+          </a>
+        </div>
+
+        <h2 className={classes.devMeaning}>
+          Developer
+          <span className={classes.devMeaningNoun}>noun</span>
+          <br />
+          <span className={classes.devMeaningSentence}>
+            -a person or thing that develops something
+          </span>
+        </h2>
+
+        <h2 className={classes.descText}>
+          DevGram is a web application designed for developers to connect with
+          each other.
+        </h2>
+      </div>
+    </div>
+  );
+};
+
+export default LandingPage;
diff --git a/client/src/components/landing page/landing.module.css b/client/src/components/landing page/landing.module.css
new file mode 100644
index 0000000..11dd318
--- /dev/null
+++ b/client/src/components/landing page/landing.module.css	
@@ -0,0 +1,111 @@
+.home {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  position: relative;
+}
+
+.left {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  left: 20px;
+  top: 20px;
+}
+
+.brandName {
+  position: fixed;
+  width: 120px;
+  height: 12px;
+  font-size: 35px;
+  font-weight: bold;
+}
+
+.devText {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.gramText {
+  color: #999999;
+}
+
+.displayText {
+  font-size: 50px;
+  margin-top: 16%;
+  margin-left: 40px;
+  width: 40%;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  background-repeat: repeat;
+  background-color: #fff;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: fixed;
+  right: 20px;
+  top: 25px;
+}
+
+.loginSignup {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 40px;
+}
+
+.loginLink {
+  margin-right: 50px;
+  color: #808080;
+  font-size: 20px;
+  display: inline-block;
+}
+
+.signupLink {
+  color: #808080;
+  font-size: 20px;
+  display: inline-block;
+}
+
+.descText {
+  font-size: 15px;
+  position: fixed;
+  bottom: 70px;
+  margin-right: 300px;
+  left: auto;
+  width: 50%;
+  width: 40%;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.devMeaning {
+  position: absolute;
+  font-size: 40px;
+  margin-top: 160px;
+  margin-right: 450px;
+  width: 40%;
+}
+
+.devMeaningNoun {
+  position: absolute;
+  font-size: 20px;
+  margin-top: 20px;
+  color: grey;
+}
+
+.devMeaningSentence {
+  position: absolute;
+  font-size: 20px;
+  margin-top: -5px;
+  margin-left: -10px;
+  font-weight: 200;
+  width: 450%;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  color: grey;
+}