diff --git a/public/index.html b/public/index.html
index c39b5b7..20db8d0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Platform for Ayat Quran Center" />
+    <link
+      rel="stylesheet"
+      media="screen"
+      href="https://fontlibrary.org/face/droid-arabic-kufi"
+      type="text/css"
+    />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -23,7 +30,7 @@
     -->
     <title>Ayat</title>
   </head>
-  <body>
+  <body class="HolyGrail">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/src/App.css b/src/App.css
index 5347c7d..573fd6f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,40 +1,98 @@
-.row-header {
-  margin: 0px auto;
-  padding: 0px auto;
+.holyGrail {
+  display: grid;
+  grid-template-areas:
+    "header header header"
+    "nav content side"
+    "footer footer footer";
+
+  grid-template-columns: 200px 1fr 200px;
+  grid-template-rows: auto 1fr auto;
+  grid-gap: 10px;
+
+  height: 100vh;
 }
 
-.row-content {
-  margin: 0px auto;
-  padding: 50px 0px 50px 0px;
-  border-bottom: 1px ridge;
-  min-height: 400px;
+header h1 {
+  font-size: 1.4em;
+  font-weight: bold;
+  color: #f2f2f2;
 }
 
-.footer {
-  background-color: #1e8b6e;
-  margin: 0px auto;
-  padding: 20px 0px 20px 0px;
+header {
+  grid-area: header;
+  background-color: #23b48c;
+  padding: 0.4em;
+  width: 100%;
+  display: flex;
+  align-items: center;
 }
 
-address {
-  font-size: 80%;
-  margin: 0px;
-  color: #0f0f0f;
+nav {
+  grid-area: nav;
+  margin-left: 0.5rem;
+  background-color: #f2f2f2;
 }
 
-.navbar-dark {
-  background-color: #1fb78e;
+main {
+  grid-area: content;
 }
-.nav-link {
-  color: white;
+
+aside {
+  grid-area: side;
+  margin-right: 0.5rem;
+  background-color: #f2f2f2;
 }
-.nav-link:hover {
-  color: #252f31;
+
+footer {
+  grid-area: footer;
+  background-color: #d7d2d2;
+  height: 10em;
 }
 
-a {
-  color: white;
+footer span {
+  float: left;
+}
+footer ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+  float: right;
+}
+footer ul li {
+  display: inline-block;
 }
-a:hover {
-  color: #0f0f0f;
+footer ul li i:hover {
+  color: #fff;
+  cursor: pointer;
+}
+
+@media (max-width: 768px) {
+  .holyGrail {
+    grid-template-areas:
+      "header"
+      "nav"
+      "content"
+      "side"
+      "footer";
+
+    grid-template-columns: 1fr;
+    grid-template-rows:
+      auto /* Header */
+      minmax(75px, auto) /* Nav */
+      1fr /* Content */
+      minmax(75px, auto) /* Sidebar */
+      auto; /* Footer */
+  }
+
+  header {
+    flex-direction: column;
+  }
+  header h1 {
+  font-size: 1em;
+  }
+
+  nav,
+  aside {
+    margin: 0;
+  }
 }
diff --git a/src/App.js b/src/App.js
index ab08bb6..9a1597d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,5 @@
 import React, { Component } from "react";
 import "./App.css";
-import Header from "./components/HeaderComponent";
-import Footer from "./components/FooterComponent";
 import Home from "./components/HomeComponent/HomeComponent";
 import ProgramDetails from "./components/programdetails/ProgramDetails";
 import StudentProfilePage from "./components/StudentProfilePage/StudentProfilePage";
@@ -21,17 +19,48 @@ class App extends Component {
     return (
       <BrowserRouter>
         <div className="App">
-          <Header />
+          <div className="holyGrail">
+            <header>
+              <img
+                src="./assets/images/logo.png"
+                height="98"
+                width="auto"
+                alt="logo"
+              />
+              <h1>مركز آيات لتعليم القرآن الكريم</h1>
+            </header>
+            <main>
+              <Switch>
+                <Route path="/home" component={this.HomePage} />
+                <Route path="/program" component={() => <ProgramDetails />} />
+                <Route path="/student" component={() => <StudentProfilePage />} />
 
-          <Switch>
-            <Route path="/home" component={this.HomePage} />
-            <Route path="/program" component={() => <ProgramDetails />} />
-            <Route path="/student" component={() => <StudentProfilePage />} />
+                <Redirect to="/home" />
+              </Switch>
+            </main>
+            <nav>
+              <div></div>
+            </nav>
+            <aside></aside>
+            <footer>
+              <div>
+                <span> Copyright &copy; 2020 Ayat </span>
+                <ul>
+                  <li>
+                    <i className="fa fa-facebook fa-lg"></i>
+                  </li>
+                  <li>
+                    <i className="fa fa-youtube fa-lg"></i>
+                  </li>
+                  <li>
+                    <i className="fa fa-twitter fa-lg"></i>
+                  </li>
+                </ul>
+              </div>
+            </footer>
+          </div>
 
-            <Redirect to="/home" />
-          </Switch>
 
-          <Footer />
         </div>
       </BrowserRouter>
     );
diff --git a/src/components/HeaderComponent.jsx b/src/components/HeaderComponent.jsx
index 17d9cf7..8c13508 100644
--- a/src/components/HeaderComponent.jsx
+++ b/src/components/HeaderComponent.jsx
@@ -5,7 +5,7 @@ import {
   Nav,
   NavbarToggler,
   Collapse,
-  NavItem
+  NavItem,
 } from "reactstrap";
 import { NavLink } from "react-router-dom";
 
@@ -15,13 +15,13 @@ class Header extends Component {
 
     this.toggleNav = this.toggleNav.bind(this);
     this.state = {
-      isNavOpen: false
+      isNavOpen: false,
     };
   }
 
   toggleNav() {
     this.setState({
-      isNavOpen: !this.state.isNavOpen
+      isNavOpen: !this.state.isNavOpen,
     });
   }
 
@@ -29,52 +29,15 @@ class Header extends Component {
     return (
       <>
         <Navbar dark expand="md" sticky={"top"}>
-          <div className="container">
-            <NavbarToggler onClick={this.toggleNav} />
             <NavbarBrand className="mr-auto" href="/">
               <img
                 src="./assets/images/logo.png"
-                height="68"
-                width="60"
-                alt="restaurant"
+                height="88"
+                width="auto"
+                alt="logo"
               />
             </NavbarBrand>
-            <Collapse isOpen={this.state.isNavOpen} navbar>
-              <Nav Navbar>
-                <NavItem>
-                  <NavLink className="nav-link" to="/home">
-                    <span className="fa fa-home fa-lg "></span> الصفحة الرئيسية
-                  </NavLink>
-                </NavItem>
-                <NavItem>
-                  <NavLink className="nav-link" to="/profile">
-                    <span className="fa fa-user fa-lg"></span> الصفحة الشخصية
-                  </NavLink>
-                </NavItem>
-                <NavItem>
-                  <NavLink className="nav-link" to="/menu">
-                    <span className="fa fa-list fa-lg"></span> القائمة
-                  </NavLink>
-                </NavItem>
-                <NavItem>
-                  <NavLink className="nav-link" to="/settings">
-                    <span className="fa fa-cog fa-lg"></span> الاعدادات
-                  </NavLink>
-                </NavItem>
-                <NavItem>
-                  <NavLink className="nav-link" to="/aboutus">
-                    <span className="fa fa-info fa-lg"></span> معلومات اضافية
-                  </NavLink>
-                </NavItem>
-                <NavItem>
-                  <NavLink className="nav-link" to="/contactus">
-                    <span className="fa fa-address-card fa-lg"></span> تواصل
-                    معنا
-                  </NavLink>
-                </NavItem>
-              </Nav>
-            </Collapse>
-          </div>
+            <Nav Navbar></Nav>
         </Navbar>
       </>
     );
diff --git a/src/components/HeaderComponent.scss b/src/components/HeaderComponent.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/HomeComponent/HomeComponent.css b/src/components/HomeComponent/HomeComponent.css
index 9f93482..849641f 100644
--- a/src/components/HomeComponent/HomeComponent.css
+++ b/src/components/HomeComponent/HomeComponent.css
@@ -2,3 +2,8 @@
   text-align: right;
   color: #1a8a1a;
 }
+.programSection {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
diff --git a/src/components/HomeComponent/HomeComponent.jsx b/src/components/HomeComponent/HomeComponent.jsx
index f1a680c..d3b7c6d 100644
--- a/src/components/HomeComponent/HomeComponent.jsx
+++ b/src/components/HomeComponent/HomeComponent.jsx
@@ -5,26 +5,23 @@ import ProgramPreview from "../ProgramPreview/ProgramPreview";
 
 function Home(props) {
   return (
-    <div className=" HomeComponent">
-      <div className="container">
-        <Jumbotron>
-          <h1 className="display-3 ">محتوى جديد</h1>
-          <p className="lead ">
-            This is a simple hero unit, a simple Jumbotron-style component for
-            calling extra attention to featured content or information.
-          </p>
-          <hr className="my-2 " />
-          <p>
-            It uses utility classes for typography and spacing to space content
-            out within the larger container.
-          </p>
-          <p className="lead ">
-            <Button color="success">Learn More</Button>{" "}
-          </p>
-        </Jumbotron>
-      </div>
-
-      <div className="row">
+    <>
+      <Jumbotron>
+        <h1>محتوى جديد</h1>
+        <p className="lead ">
+          This is a simple hero unit, a simple Jumbotron-style component for
+          calling extra attention to featured content or information.
+        </p>
+        <hr className="my-2 " />
+        <p>
+          It uses utility classes for typography and spacing to space content
+          out within the larger container.
+        </p>
+        <p className="lead ">
+          <Button color="success">Learn More</Button>{" "}
+        </p>
+      </Jumbotron>
+      <div className="programSection">
         <ProgramPreview />
         <ProgramPreview />
         <ProgramPreview />
@@ -34,7 +31,7 @@ function Home(props) {
         <ProgramPreview />
         <ProgramPreview />
       </div>
-    </div>
+    </>
   );
 }
 
diff --git a/src/components/ProgramPreview/ProgramPreview.jsx b/src/components/ProgramPreview/ProgramPreview.jsx
index ba7a5ee..2a1044c 100644
--- a/src/components/ProgramPreview/ProgramPreview.jsx
+++ b/src/components/ProgramPreview/ProgramPreview.jsx
@@ -18,7 +18,7 @@ class ProgramPreview extends Component {
   render() {
     return (
       <div className="col-6 col-sm-2 m-3 programPreview">
-        <Card style={{ width: "125%", height: "100%" }}>
+        <Card style={{ width: "100%", height: "100%" }}>
           <CardBody>
             <CardImg width="100%" src="./assets/images/logo.png" />
             <CardHeader tag="h4">اسم البرنامج</CardHeader>
diff --git a/src/components/ProgramPreview/previewStyle.css b/src/components/ProgramPreview/previewStyle.css
index d932941..8a7d0c6 100644
--- a/src/components/ProgramPreview/previewStyle.css
+++ b/src/components/ProgramPreview/previewStyle.css
@@ -1,3 +1,8 @@
 .programPreview {
   color: #008600;
+  min-width: 14em;
+}
+
+.programPreview h4{
+
 }
diff --git a/src/index.css b/src/index.css
index 82bdb59..d061082 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,14 +1,25 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: "DroidArabicKufiRegular";
+  font-weight: normal;
+  font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   direction: rtl;
+  text-align: right;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
