diff --git a/client/package-lock.json b/client/package-lock.json
index 4a701afb..fbb2ff6c 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -8,6 +8,7 @@
       "name": "client",
       "version": "0.0.0",
       "dependencies": {
+        "@heroicons/react": "^2.0.18",
         "axios": "^1.6.2",
         "normalize.css": "^8.0.1",
         "react": "^18.2.0",
@@ -444,6 +445,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
diff --git a/client/package.json b/client/package.json
index 027042e4..a3aa8a16 100644
--- a/client/package.json
+++ b/client/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "axios": "^1.6.2",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
diff --git a/client/src/assets/images/ DELETEME.svg b/client/src/assets/images/ DELETEME.svg
deleted file mode 100644
index e7b8dfb1..00000000
--- a/client/src/assets/images/ DELETEME.svg	
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/client/src/assets/images/logo.svg b/client/src/assets/images/logo.svg
new file mode 100644
index 00000000..e47d98e1
--- /dev/null
+++ b/client/src/assets/images/logo.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="30" viewBox="0 0 40 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4606 0H21.4702L18.2552 8.98472C12.5964 9.97911 8.26833 15.454 8.26833 22.0588C8.26833 25.0383 9.14915 27.788 10.6355 30H0L9.7229 2.82874C10.3342 1.12028 11.8145 0 13.4606 0Z" fill="#341492"/>
+<path d="M21.4697 0L19.2101 6.31445L18.5293 0H21.4697Z" fill="black" fill-opacity="0.3"/>
+<path d="M26.5389 0H18.5293L21.7308 8.9468C27.5022 9.83109 31.9482 15.3645 31.9482 22.0588C31.9482 25.0383 31.0674 27.788 29.581 30H39.9995L30.2766 2.82875C29.6653 1.12028 28.185 0 26.5389 0Z" fill="#4C28B5"/>
+<path d="M12.0316 29.1352C10.6629 27.186 9.84668 24.7289 9.84668 22.0587C9.84668 15.7236 14.4409 10.5881 20.1081 10.5881C25.7754 10.5881 30.3697 15.7236 30.3697 22.0587C30.3697 24.7289 29.5535 27.186 28.1847 29.1352C25.9377 27.4624 23.1404 26.4704 20.1081 26.4704C17.076 26.4704 14.2786 27.4624 12.0316 29.1352Z" fill="#4C28B5"/>
+</svg>
diff --git a/client/src/assets/styles/components/DELETEME.txt b/client/src/assets/styles/components/DELETEME.txt
deleted file mode 100644
index e69de29b..00000000
diff --git a/client/src/assets/styles/components/Nav.scss b/client/src/assets/styles/components/Nav.scss
new file mode 100644
index 00000000..b8b7140a
--- /dev/null
+++ b/client/src/assets/styles/components/Nav.scss
@@ -0,0 +1,34 @@
+.Nav {
+  padding: var(--side-spacing);
+
+  .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row-reverse;
+  }
+
+  &__logo a {
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 5px;
+    align-items: center;
+
+    h2 {
+      font-size: 1.875rem;
+      font-style: normal;
+      font-weight: 800;
+      margin: 0;
+    }
+  }
+
+  &__icons {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  &__icon {
+    width: 24px;
+  }
+}
diff --git a/client/src/assets/styles/global/DELETEME.txt b/client/src/assets/styles/global/DELETEME.txt
deleted file mode 100644
index e69de29b..00000000
diff --git a/client/src/assets/styles/global/_layout.scss b/client/src/assets/styles/global/_layout.scss
new file mode 100644
index 00000000..8a7e7a7e
--- /dev/null
+++ b/client/src/assets/styles/global/_layout.scss
@@ -0,0 +1,36 @@
+// _layout.scss
+// Classes or the layout of the app
+
+section,
+.section {
+  padding: var(--section-spacing) 0;
+}
+
+.container {
+  max-width: 700px;
+  margin: 0 auto;
+  padding: 0 var(--side-spacing);
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -var(--side-spacing);
+  gap: var(--side-spacing);
+
+  .col-1 {
+    flex: 0 1 calc(25% - var(--side-spacing) * 2);
+  }
+
+  .col-2 {
+    flex: 0 1 calc(50% - var(--side-spacing) * 2);
+  }
+
+  .col-3 {
+    flex: 0 1 calc(75% - var(--side-spacing) * 2);
+  }
+
+  .col-4 {
+    flex: 0 1 calc(100% - var(--side-spacing) * 2);
+  }
+}
diff --git a/client/src/assets/styles/global/global.scss b/client/src/assets/styles/global/global.scss
index 849c13ad..7fee132f 100644
--- a/client/src/assets/styles/global/global.scss
+++ b/client/src/assets/styles/global/global.scss
@@ -1,5 +1,6 @@
 @import "normalize.css";
 @import "typography";
+@import "layout";
 
 *,
 *::before,
diff --git a/client/src/components/common/DELETME.txt b/client/src/components/common/DELETME.txt
deleted file mode 100644
index e69de29b..00000000
diff --git a/client/src/components/common/nav.jsx b/client/src/components/common/nav.jsx
new file mode 100644
index 00000000..901b78ad
--- /dev/null
+++ b/client/src/components/common/nav.jsx
@@ -0,0 +1,43 @@
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+
+// icons
+import { UserCircleIcon } from "@heroicons/react/24/outline";
+import { BellIcon } from "@heroicons/react/24/outline";
+// logo
+import logo from "../../assets/images/logo.svg";
+// styles
+import "../../assets/styles/components/Nav.scss";
+
+export default function Nav(props) {
+  const { showIcons } = props;
+
+  return (
+    <nav className="Nav">
+      <div className="container">
+        <div className="Nav__logo">
+          <Link to="/">
+            <img src={logo} alt="logo" />
+            <h2 className="logo-text">كشافة</h2>
+          </Link>
+        </div>
+        {showIcons && (
+          <div className="Nav__icons">
+            {/* TODO: add route later */}
+            <Link to="/">
+              <UserCircleIcon className="Nav__icon" />
+            </Link>
+            {/* TODO: add route later */}
+            <Link to="/">
+              <BellIcon className="Nav__icon" />
+            </Link>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}
+
+Nav.propTypes = {
+  showIcons: PropTypes.bool.isRequired,
+};
diff --git a/client/src/components/landingpage/LandingPage.jsx b/client/src/components/landingpage/LandingPage.jsx
new file mode 100644
index 00000000..f0c006e6
--- /dev/null
+++ b/client/src/components/landingpage/LandingPage.jsx
@@ -0,0 +1,9 @@
+import Nav from "../common/nav";
+
+export default function LandingPage() {
+  return (
+    <>
+      <Nav showIcons={true} />
+    </>
+  );
+}
diff --git a/client/src/components/testing/testLayout.jsx b/client/src/components/testing/testLayout.jsx
new file mode 100644
index 00000000..100ccad3
--- /dev/null
+++ b/client/src/components/testing/testLayout.jsx
@@ -0,0 +1,41 @@
+export default function TestLayout() {
+  return (
+    <>
+      <div className="container">Test Layout</div>
+      <section style={{ textAlign: "center" }}>
+        <div className="container">
+          <div className="row">
+            <div className="col-2" style={{ background: "red" }}>
+              Test Layout
+            </div>
+            <div className="col-2" style={{ background: "magenta" }}>
+              Test Layout
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-3" style={{ background: "blue" }}>
+              Test Layout
+            </div>
+            <div className="col-3" style={{ background: "yellow" }}>
+              Test Layout
+            </div>
+            <div className="col-3" style={{ background: "red" }}>
+              Test Layout
+            </div>
+          </div>
+
+          <div className="row">
+            <div className="col-4">Test Layout</div>
+            <div className="col-4">Test Layout</div>
+            <div className="col-4">Test Layout</div>
+          </div>
+          <div className="row">
+            <div className="col-2">Test Layout</div>
+            <div className="col-2">Test Layout</div>
+            <div className="col-4">Test Layout</div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/client/src/routes.jsx b/client/src/routes.jsx
index 454f74c1..c8fa8a8a 100644
--- a/client/src/routes.jsx
+++ b/client/src/routes.jsx
@@ -7,19 +7,22 @@ import {
 } from "react-router-dom";
 
 // Import modules/pages under this line
+import LandingPage from "./components/landingpage/LandingPage";
 
 // Import Testing Routes here
 import TestTypo from "./components/testing/testTypo";
+import TestLayout from "./components/testing/testLayout";
 
 function Routes() {
   return (
     <Router>
       <Switch>
-        <Route exact path="/" element={<h1>Landing</h1>} />
+        <Route exact path="/" element={<LandingPage />} />
 
         {/* Testing Routes */}
         {/* FIXME: Delete test routes Later */}
-        <Route path="/testTypo" element={<TestTypo />} />
+        <Route path="/test/typo" element={<TestTypo />} />
+        <Route path="/test/layout" element={<TestLayout />} />
 
         {/* Not Found */}
         <Route path="*" element={<h1>Not Found</h1>} />
diff --git a/client/src/theme.scss b/client/src/theme.scss
index cefa4880..493db32c 100644
--- a/client/src/theme.scss
+++ b/client/src/theme.scss
@@ -107,4 +107,10 @@
   //----------------------------//
   --font-primary: "Noto Kufi Arabic", sans-serif;
   --font-base-size: 16px;
+
+  //----------------------------//
+  // Spacing
+  //----------------------------//
+  --side-spacing: 1.25rem;
+  --section-spacing: 2.5rem;
 }