diff --git a/src/App.css b/src/App.css
index 179d0b3..bcef71c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,3 @@
-
-
 /***    General     ***/
 * {
     box-sizing: border-box;
@@ -16,6 +14,20 @@ body {
     margin: 5rem auto
 }
 
+.primary-button {
+    margin-top: 5rem;
+    margin-right: 1rem;
+    padding: .6rem;
+    width: 10rem;
+    background: #222;
+    border: none;
+    color: #fff;
+    font-size: 1.2rem;
+    transition: all .5s;
+    cursor: pointer;
+    text-transform: capitalize
+}
+
 /***    Landing Page     ***/
 .main-title,
 .main-para {
@@ -34,21 +46,6 @@ body {
     text-Transform: capitalize
 }
 
-#log_btn,
-#reg_btn {
-    margin-top: 5rem;
-    margin-right: 1rem;
-    padding: .6rem;
-    width: 10rem;
-    background: #222;
-    border: none;
-    color: #fff;
-    font-size: 1.2rem;
-    transition: all .5s;
-    cursor: pointer;
-    text-transform: capitalize
-}
-
 #reg_btn span {
     display: inline-block;
     position: relative;
@@ -138,4 +135,9 @@ form span {
 
 #reset_pass_lbl {
     float: left
+}
+
+/***    Home Page     ***/
+.home-page-title {
+    color: #222
 }
\ No newline at end of file
diff --git a/src/components/pages/HomePage.js b/src/components/pages/HomePage.js
index 6a19503..65731d9 100644
--- a/src/components/pages/HomePage.js
+++ b/src/components/pages/HomePage.js
@@ -1,9 +1,13 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 
 export default function HomePage() {
     return (
-        <div>
-            <h1>Home Page</h1>
+        <div className="text-center">
+            <h1 className="main-title home-page-title">welcome to our app</h1>
+            <Link to="/">
+                <button className="primary-button">Log out</button>
+            </Link>
         </div>
     )
 }
diff --git a/src/components/pages/LandingPage.js b/src/components/pages/LandingPage.js
index 9b97bf2..bcf490c 100644
--- a/src/components/pages/LandingPage.js
+++ b/src/components/pages/LandingPage.js
@@ -11,14 +11,10 @@ export default function LandingPage() {
             <p className="main-para text-center">join us now and don't waste time</p>
             <div className="buttons text-center">
                 <Link to="/login">
-                    <button href="https://google.com" id="log_btn">
-                        login
-                    </button>
+                    <button className="primary-button">log in</button>
                 </Link>
                 <Link to="/register">
-                    <button href="https://google.com" id="reg_btn">
-                        <span>register </span>
-                    </button>
+                    <button className="primary-button" id="reg_btn"><span>register </span></button>
                 </Link>
             </div>
         </header>