diff --git a/package-lock.json b/package-lock.json
index 49d8763..d35d3ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4981,7 +4981,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -4994,7 +4994,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -5214,7 +5214,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -5294,7 +5294,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -5541,7 +5541,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "individual",
@@ -6528,7 +6528,6 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "iconv-lite": "^0.6.2"
@@ -6538,7 +6537,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -7010,7 +7008,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -7359,7 +7357,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -7941,7 +7939,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -7979,7 +7977,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7996,7 +7994,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -8022,7 +8020,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -9658,7 +9656,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10918,7 +10916,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -10930,7 +10928,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -12430,7 +12428,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 04c1379..e76dfdb 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -5,6 +5,7 @@ import { ReceivePageComponent } from './receive-page/receive-page.component';
 import { DonatePageComponent } from './donate-page/donate-page.component';
 import { ProfilePageDonorsComponent } from './profile-page-donors/profile-page-donors.component';
 import { ProfilePageNgosComponent } from './profile-page-ngos/profile-page-ngos.component';
+import { ContactUsComponent } from './contact-us/contact-us.component';
 
 
 export const routes: Routes = [
@@ -38,4 +39,9 @@ export const routes: Routes = [
         title: 'NGO\'s Profile',
         component: ProfilePageNgosComponent,
     },
+    {
+        path: 'contact_us',
+        title: 'Contact Us',
+        component: ContactUsComponent,
+    },
 ];
diff --git a/src/app/contact-us/contact-us.component.css b/src/app/contact-us/contact-us.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/contact-us/contact-us.component.ts b/src/app/contact-us/contact-us.component.ts
new file mode 100644
index 0000000..db3893c
--- /dev/null
+++ b/src/app/contact-us/contact-us.component.ts
@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { NavBarComponent } from '../nav-bar/nav-bar.component';
+import { FooterComponent } from '../footer/footer.component';
+
+@Component({
+  selector: 'app-contact-us',
+  standalone: true,
+  imports: [
+    NavBarComponent,
+    FooterComponent,
+  ],
+  template: `
+    <app-nav-bar> </app-nav-bar>
+    <div class="flex flex-col items-center w-full">
+    <div class = "flex flex-col items-center">
+      <p class="font-bold text-3xl p-4">Contact us</p>
+      <p class="text-center p-8">We would love to hear from you. Contact us with any questions, comments or enquiries. Your support and feedback are important to us</p>
+    </div>
+    <div class="md:flex md:flex-row justify-between sm:flex sm:flex-col sm:items-center sm:w-full">
+      <div class="w-1/2 flex flex-col justify-around">
+        <img src="/assets/Contact-us.jpg">
+        <div class="text-center py-6 font-light text-xl">
+          Timings:<br>
+          Monday, Tuesday: 08:30 AM - 05:30 PM<br>
+          Wednesday, Thursday, Friday: 09:15 AM - 06:15 PM<br>
+          Saturday, Sunday: 09:30 AM - 06:30 PM<br>
+        </div>
+      </div>
+      <!-- class="flex flex-column items-center" -->
+      <div class="w-1/2" style="display: flex; flex-direction: column; align-items: end;">
+          <p class ="text-left w-full p-4 font-thin text-2xl"><legend>Generosity Headquarters</legend></p>
+          <p class="text-left w-full p-8 font-thin text-xl"><label for="First Name" >First Name</label><br></p>
+          <p class="w-full px-8"><input name="First Name" type="text" class="w-full bg-transparent focus:outline-none border-x-0 border-t-0 border-b-blue-800 border-b-2"><br></p>
+          <p class="text-left w-full p-8 font-thin text-xl"><label for="Last Name" >Last Name</label><br></p>
+          <p class="w-full px-8"><input name="Last Name" type="text" class="w-full bg-transparent focus:outline-none border-x-0 border-t-0 border-b-blue-800 border-b-2"><br></p>
+          <p class="text-left w-full p-8 font-thin text-xl"><label for="email" >Email</label><br></p>
+          <p class="w-full px-8"><input name="email" type="email" class="w-full bg-transparent focus:outline-none border-x-0 border-t-0 border-b-blue-800 border-b-2"><br></p>
+          <p class="text-left w-full p-8 font-thin text-xl"><label for="phone" >Phone</label><br></p>
+          <p class="w-full px-8"><input name="phone" type="number" class="w-full bg-transparent focus:outline-none border-x-0 border-t-0 border-b-blue-800 border-b-2"><br></p>
+          <p class="text-left w-full p-8 font-thin text-xl"><label for="subject" >Subject</label><br></p>
+          <p class="w-full px-8"><input name="subject" type="text" class="w-full bg-transparent focus:outline-none border-x-0 border-t-0 border-b-blue-800 border-b-2"><br></p>
+          <p class="text-left w-full p-8 font-thin text-xl"><label for="Message" >Message</label><br></p>
+          <p class="w-full p-8"><input name="Message" type="text" class="w-full bg-transparent focus:outline-none border-x-0 border-t-0 border-b-blue-800 border-b-2"><br></p>
+          
+      </div>
+    </div>
+    </div>
+    <app-footer> </app-footer>
+  
+  `,
+  styleUrl: './contact-us.component.css'
+})
+export class ContactUsComponent {
+
+}
diff --git a/src/assets/Contact-us.jpg b/src/assets/Contact-us.jpg
new file mode 100644
index 0000000..f6b223a
Binary files /dev/null and b/src/assets/Contact-us.jpg differ
diff --git a/src/index.html b/src/index.html
index 1274fa5..007744c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,7 +10,7 @@
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body class="justify-center items-center">
+<body class="justify-center items-center bg-stone-100">
   <app-root></app-root>
 </body>
 </html>
diff --git a/src/styles.css b/src/styles.css
index 8027431..5264b81 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3,3 +3,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+    font-family: 'Bree-Serif';
+    src: url('https://fonts.googleapis.com/css?family=BreeSerif');
+}
+
+*{
+    font-family: "Bree-serif";
+}