diff --git a/src/App.css b/src/App.css
index e69de29..aaad169 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,7 @@
+main {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/App.jsx b/src/App.jsx
index d89aae9..fce2c51 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,19 @@
-import React from 'react'
+import React from "react";
+import Layout from "./layout/Layout";
+import { Route, Routes } from "react-router-dom";
+import Home from "./components/Home";
+import "./App.css";
 
 const App = () => {
   return (
-    <div>App</div>
-  )
-}
+    <main>
+      {/* <Layout> */}
+      <Routes>
+        <Route path="/" element={<Home />} />
+      </Routes>
+      {/* </Layout> */}
+    </main>
+  );
+};
 
-export default App
\ No newline at end of file
+export default App;
diff --git a/src/assets/fonts/San-Francisco-Pro-Fonts b/src/assets/fonts/San-Francisco-Pro-Fonts
new file mode 160000
index 0000000..8bfea09
--- /dev/null
+++ b/src/assets/fonts/San-Francisco-Pro-Fonts
@@ -0,0 +1 @@
+Subproject commit 8bfea09aa6f1139479f80358b2e1e5c6dc991a58
diff --git a/src/assets/icons/skill-icons b/src/assets/icons/skill-icons
new file mode 160000
index 0000000..65dea6c
--- /dev/null
+++ b/src/assets/icons/skill-icons
@@ -0,0 +1 @@
+Subproject commit 65dea6c4eaca7da319e552c09f4cf5a9a8dab2c8
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
new file mode 100644
index 0000000..a2b8867
--- /dev/null
+++ b/src/components/Home.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import Hero from "./subComponents/Hero";
+import "../css/Home.css";
+
+const Home = () => {
+  return (
+    <div className="gridContainer">
+      <Hero />
+    </div>
+  );
+};
+
+export default Home;
diff --git a/src/components/subComponents/Hero.jsx b/src/components/subComponents/Hero.jsx
new file mode 100644
index 0000000..39c55bf
--- /dev/null
+++ b/src/components/subComponents/Hero.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import "../../css/Hero.css";
+
+const Hero = () => {
+  return (
+    <div className="hero">
+      <p>
+        <span>
+          Hi, I'm Yousif. <br />
+        </span>{" "}
+        I'm a Full-Stack Developer from Germany.
+      </p>
+    </div>
+  );
+};
+
+export default Hero;
diff --git a/src/components/subComponents/TechStack.jsx b/src/components/subComponents/TechStack.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/css/Hero.css b/src/css/Hero.css
new file mode 100644
index 0000000..0d7fd46
--- /dev/null
+++ b/src/css/Hero.css
@@ -0,0 +1,17 @@
+.hero {
+  grid-area: 1 / 1 / 5 / 5;
+  background-color: #28272a;
+  padding: 2rem;
+  border-radius: 1rem;
+  border: 0.5px solid rgb(73, 73, 73);
+}
+
+.hero p span {
+  color: white;
+  font-weight: bold;
+}
+
+.hero p {
+  font-size: 2rem;
+  color: rgb(151, 151, 151);
+}
diff --git a/src/css/Home.css b/src/css/Home.css
new file mode 100644
index 0000000..474f706
--- /dev/null
+++ b/src/css/Home.css
@@ -0,0 +1,8 @@
+.gridContainer {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-template-rows: repeat(9, 1fr);
+  gap: 10px;
+  width: 50%;
+}
+
diff --git a/src/css/fonts.css b/src/css/fonts.css
new file mode 100644
index 0000000..9db8be4
--- /dev/null
+++ b/src/css/fonts.css
@@ -0,0 +1,146 @@
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Thin.otf") format("opentype");
+    font-weight: 100;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-ThinItalic.otf") format("opentype");
+    font-weight: 100;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Light.otf") format("opentype");
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-LightItalic.otf") format("opentype");
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Regular.otf") format("opentype");
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-RegularItalic.otf") format("opentype");
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Medium.otf") format("opentype");
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-MediumItalic.otf") format("opentype");
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Semibold.otf") format("opentype");
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-SemiboldItalic.otf") format("opentype");
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Bold.otf") format("opentype");
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-BoldItalic.otf") format("opentype");
+    font-weight: 700;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Black.otf") format("opentype");
+    font-weight: 900;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-BlackItalic.otf") format("opentype");
+    font-weight: 900;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Light.otf") format("opentype");
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Regular.otf") format("opentype");
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Medium.otf") format("opentype");
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Semibold.otf") format("opentype");
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Bold.otf") format("opentype");
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Heavy.otf") format("opentype");
+    font-weight: 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Black.otf") format("opentype");
+    font-weight: 900;
+    font-style: normal;
+}
diff --git a/src/index.css b/src/index.css
index e69de29..7152ed4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,10 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "SF Pro Display", sans-serif;
+  background-color: black;
+}
diff --git a/src/layout/Footer.jsx b/src/layout/Footer.jsx
new file mode 100644
index 0000000..09379a2
--- /dev/null
+++ b/src/layout/Footer.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <div>Footer</div>
+  )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/layout/Header.jsx b/src/layout/Header.jsx
new file mode 100644
index 0000000..041aba3
--- /dev/null
+++ b/src/layout/Header.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Header = () => {
+  return (
+    <div>Header</div>
+  )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/layout/Layout.jsx b/src/layout/Layout.jsx
new file mode 100644
index 0000000..7376c63
--- /dev/null
+++ b/src/layout/Layout.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import Header from "./Header";
+import Footer from "./Footer";
+
+const Layout = ({ children }) => {
+  return (
+    <>
+      <Header />
+      {children}
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6d..4c7dc41 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,11 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.jsx";
+import { BrowserRouter } from "react-router-dom";
+import "./css/fonts.css";
 
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
+createRoot(document.getElementById("root")).render(
+  <BrowserRouter>
     <App />
-  </StrictMode>,
-)
+  </BrowserRouter>
+);