diff --git a/landing-page/src/components/Button.jsx b/landing-page/src/components/Button.jsx
index 6e55aeb..109de50 100644
--- a/landing-page/src/components/Button.jsx
+++ b/landing-page/src/components/Button.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const Button = ({ styles }) => (
   <button type="button" className={`py-4 px-6 font-poppins font-medium text-[18px] text-primary bg-blue-gradient rounded-[10px] outline-none ${styles}`}>
-    Get Started
+    <a href="https://raise-1.vercel.app/">Get Started</a>
   </button>
 );
 
diff --git a/web/components/Footer.js b/web/components/Footer.js
new file mode 100644
index 0000000..74a2c1b
--- /dev/null
+++ b/web/components/Footer.js
@@ -0,0 +1,49 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import styles from '../styles/Home.module.css'
+
+
+export default function Footer() {
+return (
+<>
+    <hr className='my-6 mx-20' />
+    <footer className={styles.footer}>
+        
+    <div className='flex items-center justify-center space-x-4 cursor-pointer '>
+
+
+    <div className='transition ease-in-out delay-50 hover:-translate-y-1 cursor-pointer text-white font-mono font-bold text-lg'>
+
+    <a href='https://github.com/ayush035/raise-1'>
+    {/* <img src='/github-1.png'>
+        </img> */}
+        Github
+        </a>
+        </div>
+        <div className='text-gray-700 text-3xl'>
+        |
+        </div>
+
+
+
+
+    <div className='transition ease-in-out delay-50 hover:-translate-y-1 cursor-pointer text-white font-mono font-bold text-lg'>
+    <a href='https://twitter.com/'>
+
+    {/* <img src='/twitter-1.png'>
+        </img> */} Twitter
+        </a>
+       
+    </div>
+    <div className='text-white my-4'>
+        Copyright © 2022 Raise Inc. All rights reserved
+        </div>
+
+    </div>
+    
+        
+    </footer>
+</>
+
+)
+}
\ No newline at end of file
diff --git a/web/components/Navbar.js b/web/components/Navbar.js
index c818942..f9ed366 100644
--- a/web/components/Navbar.js
+++ b/web/components/Navbar.js
@@ -40,15 +40,35 @@ export default function Navbar() {
 //   }
 
   return (
-    <div className={styles.navbar}>
-      <Link href="/">Home</Link>
-      <Link href="/purchase">Create Grant</Link>
-      <Link href="/manage">Manage</Link>
-      <Link href="/fund">Fund</Link>
+    <>
+     <nav className=' flex justify-between h-12 text-green-400 bg-black   font-bold' >
+        <span className='mx-20 my-2 flex text-green-400 text-2xl	'><Link href={"/"}>RAISE</Link></span>
+        <ul className= 'px-2 py-3 flex space-x-10 mx-12 '>
+    {/* <div className='flex mx-16 '> */}
+      {/* <input className="px-4 h-8  rounded-lg  bg-gray-800 text-gray-400" type="text" placeholder="🔍 Search projects" /> */}
+{/* </div> */}
+
+<div className='hover:text-white delay-50  text-md font-semibold font-mono '>
+      <Link href="/">Home</Link></div>
+<div className='hover:text-white delay-50  text-md font-semibold font-mono'>
+
+      <Link href="/purchase">Create Grant</Link></div>
+<div className='hover:text-white delay-50  text-md font-semibold font-mono'>
+
+      <Link href="/manage">Manage</Link></div>
+<div className='hover:text-white delay-50 text-md font-semibold font-mono '>
+
+      <Link href="/fund">Fund</Link></div>
+      {/* <div className=' mx-2 my-2 '> */}
+<div className='hover:text-white delay-50  text-md font-semibold bg-green-400 text-black rounded-lg px-3 font-mono' >
       <button onClick={currentUser.addr ? logOut : logIn}>
         {currentUser.addr ? `${currentUser.addr}` : "Login"}
-      </button>
-    </div>
+      </button></div>
+      </ul>
+</nav>
+{/* <hr/> */}
+</>
+  
   );
 }
 
diff --git a/web/pages/fund/index.js b/web/pages/fund/index.js
index 5033c09..0ad255b 100644
--- a/web/pages/fund/index.js
+++ b/web/pages/fund/index.js
@@ -3,6 +3,7 @@ import Head from "next/head";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import Navbar from "../../components/Navbar";
+import Footer from "@/components/Footer";
 import { useAuth } from "../../contexts/AuthContext";
 import { getMyGrantInfos } from "../../flow/scripts";
 import { initializeAccount } from "../../flow/transactions";
@@ -91,7 +92,9 @@ export default function Home() {
       <Navbar />
 
       <main className={styles.main}>
-        <h1>Your Registered Grants</h1>
+      <div className='mx-4 my-4 text-2xl text-white font-semibold font-mono'>
+        <h1> Registered Grants </h1></div>
+
 
         {<>
 
@@ -143,7 +146,7 @@ export default function Home() {
         
         
             <div
-              className="block max-w-sm rounded-lg bg-white shadow-lg dark:bg-neutral-700" key={idx}>
+              className="block max-w-sm rounded-lg bg-gray-900 text-white font-mono" key={idx}>
               <a href="#!" data-te-ripple-init data-te-ripple-color="light">
                 <img
                   className="rounded-t-lg"
@@ -156,26 +159,28 @@ export default function Home() {
                   className="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
                 {di.name}
                 </h5></Link>
-                <p className="mb-1 text-base text-neutral-600 dark:text-neutral-200">
+                <p className="mb-1 text-base text-neutral-800 dark:text-neutral-200">
                   By {di.owner}
                 </p>
-                <p className="mb-4 text-base text-neutral-600 dark:text-neutral-200">
+                <p className="mb-4 text-base text-neutral-800 dark:text-neutral-200">
                   {di.bio.slice(0,64)}...
                 </p>
+                <hr className='my-4 mx-2'/>
                 <div className='flex flex-col pb-2'>
                  
-                  <input type="text" placeholder="amount"
-                    className='px-4 py-2 focus:outline-none focus:border-[#38E8C6] focus:border-2 bg-gray-800 focus:border rounded-lg'
+                  <input type="text" placeholder="Amount $"
+                    className='px-4 py-2 focus:outline-none  bg-gray-800 rounded-lg'
                     onChange={e => setAmount(e.target.value)} />
                 </div>
+                <div className=' flex justify-center'>
 
                 <button type="button"
-                  className="inline-block rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
+                  className="inline-block rounded bg-green-600 px-6 pt-2.5 pb-2 text-md font-semibold uppercase leading-normal text-white  transition duration-150 ease-in-out my-2 py-2 hover:bg-green-400"
                   data-te-ripple-init
                   data-te-ripple-color="light" onClick={async () => {
                     const txId = await sendFlow(di.owner, amount);
                     await fcl.tx(txId).onceSealed();
-                  }} >Fund </button>
+                  }} >Fund </button></div>
 
               </div>
             </div>
@@ -185,6 +190,7 @@ export default function Home() {
         </>
         }
       </main>
+      <Footer />
     </div>
   );
 }
\ No newline at end of file
diff --git a/web/pages/index.js b/web/pages/index.js
index b1fc1e2..0cb77b5 100644
--- a/web/pages/index.js
+++ b/web/pages/index.js
@@ -5,6 +5,10 @@ import { useEffect, useState } from "react";
 import Navbar from "../components/Navbar";
 import { getAllGrantInfos ,getFlownsName} from "../flow/scripts";
 import styles from "../styles/Home.module.css";
+import b from'../public/b.jpg'
+import m from'../public/m.png'
+import e from'../public/e.jpg'
+import Footer from '../components/Footer'
 
 export default function Home() {
   // Create a state variable for all the GrantInfo structs
@@ -62,40 +66,72 @@ async function getFlowns(url){
 
       <Navbar />
 
+  
+
+        
+
+      <div className='grid grid-cols-2'>
+        <div className=' flex flex-col=-2'>
+      <div className ='my-20 mx-20 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-105'>
+<Image 
+src={b}
+alt=''
+width="400"
+height="400"/>
+</div>
+</div>
+<div className=' flex flex-col'>
+<div className ='my-20 mx-20 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-105'>
+<Image 
+src={m}
+alt=''
+width="350"
+height="400"/>
+</div>
+</div></div>
+<div className ='my-20 mx-20'>
+<Image 
+src={e}
+alt=''
+width="1100"
+height="400"/>
+
+</div>
       <main className={styles.main}>
-        <h1>All Registered Grants</h1>
+        <div className='mx-4 my-4 text-2xl text-white font-semibold font-mono'>
+        <h1> Registered Grants </h1></div>
 
         <div className={styles.grantsContainer}>
         {grantInfos.length === 0 ? (
-              <p>You have not registered any FNS Grants yet</p>
+      <div className='mx-4 my-4 text-2xl text-white font-semibold font-mono'>
+      <p>You have not registered any FNS Grants yet</p>
+              </div>
             ) : (
 
               
-              <div className="grid grid-cols-4 gap-8" >
+              <div className="grid grid-cols-4 gap-8 my-6 mx-2" >
              { grantInfos.map((di, idx) => (
              
               
         
             <div
-              className="block max-w-sm rounded-lg bg-white shadow-lg dark:bg-neutral-700" key={idx}>
+              className="block max-w-sm rounded-sm bg-gray-900 cursor-pointer font-mono text-white  hover:bg-green-600" key={idx}>
               <a href="#!" data-te-ripple-init data-te-ripple-color="light">
                <img
                   className="rounded-t-lg "
                   src={di.imgurl}
-                  alt="" />
+                  alt=""
+                  width="300" height="200" />
               </a>
-              <div className="p-6">
+              <div className="p-6 ease-in-out delay-100 hover:-translate-y-1">
                 <h5
-                  className="mb-[2px] text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
+                  className="mb-2 text-xl  text-white font-semibold">
                 {di.name}
                 </h5>
-                <div className="mb-1 text-xs text-neutral-600 dark:text-neutral-200">
-                  By <p className="text-red-100" on={ async ()=>{ 
-const name = await getFlownsName(di.owner);
-setName(name);
-                  }} >{name}</p>
-                </div>
-                <p className="mb-4 text-base text-neutral-600 dark:text-neutral-200">
+                <p className="mb-1 text-base text-neutral-600 dark:text-neutral-100">
+                  By {di.owner}
+                </p>
+                <p className="mb-4 text-base text-neutral-600 dark:text-neutral-100">
                   {di.bio.slice(0,64)}...
                 </p>
                 {/* <div className='flex flex-col pb-2'>
@@ -123,6 +159,7 @@ setName(name);
             )}
         </div>
       </main>
+      <Footer />
     </div>
   );
 }
\ No newline at end of file
diff --git a/web/pages/manage/[nameHash].js b/web/pages/manage/[nameHash].js
index 662c806..e4acd70 100644
--- a/web/pages/manage/[nameHash].js
+++ b/web/pages/manage/[nameHash].js
@@ -4,6 +4,7 @@ import { useAuth } from "../../contexts/AuthContext";
 import * as fcl from "@onflow/fcl";
 import Head from "next/head";
 import Navbar from "../../components/Navbar";
+import Footer from "@/components/Footer";
 import { getGrantInfoByNameHash, getRentCost } from "../../flow/scripts";
 import styles from "../../styles/ManageGrant.module.css";
 import {
@@ -167,74 +168,86 @@ export default function ManageGrant() {
 
       <Navbar />
 
-      {/* <div className='flex bg-gray-900 rounded-lg shadow-lg px-5 py-7 flex-col space-y-5 w-1/3'>
-              <div className='flex justify-between'>
-                <h1 className='text-lg font-semibold text-gray-100 mb-2'>Transfer Tokens</h1>
-                <img src='/planee.png' alt='plane' />
+            {/* <div className='my-6 mx-20 text-2xl text-white font-semibold font-mono'>
+              Project Details :
+            </div> */}
+
+      {/* <main className={styles.main}> */}
+
+<div className='flex justify-center'>
+<div className=' rounded-xl mx-20 my-6'>
+        <img src={grantInfo.imgurl}/>
+</div></div>
+<main className={styles.main}>
+
+
+<div className='mx-4'>
+        <div className=' my-8 text-xl  text-white'>
+          <div className='text-2xl font-bold my-2'>{grantInfo.name}</div>
+          {/* <p className='text-xl font-semibold'>ID: {grantInfo.id}</p> */}
+          <div className='flex flex-col'>
+          <label className='text-white font-semibold text-xl my-2'>FOUNDER</label>
+          <div className='text-xl font-bold'> {grantInfo.owner}</div>
+          </div>
+          <hr className=' my-6 mx-2'/>
+          <div className='font-mono'> {grantInfo.bio ? grantInfo.bio : "Not Set"}</div>
+        </div>
+        </div>
+        <div>
+        <div className='flex bg-gray-900 rounded-lg shadow-lg px-4 py-6 flex-col space-y-5 w-1/2 mx-28 my-6 '>
+              <div className='flex justify-center'>
+                <h1 className='text-xl font-semibold text-gray-100 mb-2 fonr-mono'>FUND</h1>
+                {/* <img src='/planee.png' alt='plane' /> */}
               </div>
-              <div className='flex flex-col'>
-                <label className='text-sm text-[#38E8C6]'>address</label>
-                <input type="text" placeholder="recipient address"
-                  className='px-4 py-2 focus:outline-none focus:border-[#38E8C6] focus:border-2 bg-gray-800 focus:border rounded-lg'
+              <div className='flex flex-col '>
+                <label className='text-sm text-white'>Address</label>
+                <input type="text" placeholder="Vitalik.eth"
+                  className='px-4 py-2 focus:outline-none   bg-gray-800  rounded-lg '
                   onChange={e => setRecipient(e.target.value)} />
               </div>
               <div className='flex flex-col pb-2'>
-                <label className='text-sm text-[#38E8C6]'>amount</label>
-                <input type="text" placeholder="amount"
-                  className='px-4 py-2 focus:outline-none focus:border-[#38E8C6] focus:border-2 bg-gray-800 focus:border rounded-lg'
+                <label className='text-sm text-white'>Amount</label>
+                <input type="text" placeholder="Amount $"
+                  className='px-4 py-2 focus:outline-none  bg-gray-800 r rounded-lg'
                   onChange={e => setAmount(e.target.value)} />
               </div>
               <button onClick={() => transferTokens(amount, recipient)}
-                className='rounded-lg text-center text-sm font-bold text-blue-900 py-2 bg-[#38E8C6]'
-              >Transfer Tokens</button>
-            </div> */}
-
-      <main className={styles.main}>
-        <div>
-          <h1>{grantInfo.name}</h1>
-          <img src={grantInfo.imgurl}/>
-          <p>ID: {grantInfo.id}</p>
-          <p>Owner: {grantInfo.owner}</p>
-          <p>
-            Created At:{" "}
-            {new Date(
-              parseInt(grantInfo.createdAt) * 1000
-            ).toLocaleDateString()}
-          </p>
-          <p>
-            Expires At:{" "}
-            {new Date(
-              parseInt(grantInfo.expiresAt) * 1000
-            ).toLocaleDateString()}
-          </p>
-          <hr />
-          <p>Bio: {grantInfo.bio ? grantInfo.bio : "Not Set"}</p>
-          <p>Address: {grantInfo.address ? grantInfo.address : "Not Set"}</p>
+                className='rounded-lg text-center text-sm font-bold text-white py-2 px-16 mx-2 bg-green-600 hover:bg-green-400'
+              >Transfer</button>
+            </div>
         </div>
 
-        <div>
-          <h1>Update</h1>
-          <div className={styles.inputGroup}>
-            <span>Update Bio: </span>
+
+      </main>
+      <hr className= 'mx-20 my-2'/>
+           <div className =' flex justify-center'>
+            <div className=' bg-gray-900 text-white mx-4 my-4 px-4 rounded-lg w-1/3 py-4 '>
+          <div className='text-2xl font-semibold  mx-36 '>Edit ✏️</div>
+          <div className='my-2'>
+          <div className={styles.inputGroup} >
+            <span className='text-xl font-mono'>Bio: </span>
             <input
+            className='bg-slate-800'
               type="text"
-              placeholder="Lorem ipsum..."
+              placeholder=" Text"
               value={bio}
               onChange={(e) => setBio(e.target.value)}
             />
-            <button onClick={updateBio} disabled={loading}>
+            <button onClick={updateBio} disabled={loading}  className='hover:bg-gray-800 rounded-md outline outline-offset-1 outline-gray-600'>
               Update
             </button>
           </div>
+          </div>
           <div className={styles.inputGroup}>
-            <span>Update ImgUrl: </span>
+            <span className='text-xl font-mono'>Logo: </span>
             <input
+            className='bg-slate-800'
               type="text"
-              placeholder="Lorem ipsum..."
+              placeholder=" Image URL "
               value={imgurl}
               onChange={(e) => setImgUrl(e.target.value)}
             />
-            <button onClick={updateImgUrl} disabled={loading}>
+            <button onClick={updateImgUrl} disabled={loading} className='rounded-md outline outline-offset-1 outline-gray-600 hover:bg-gray-800'>
               Update
             </button>
           </div>
@@ -243,13 +256,16 @@ export default function ManageGrant() {
  <div className={styles.inputGroup}>
             <span>Fund: </span>
             <input
+            className='bg-slate-800'
               type="number"
               placeholder="1"
               value={years}
               onChange={(e) => setYears(e.target.value)}
             />
-            <span>years</span>
-          </div> 
+            <span className='text-xl font-mono mx-5'>Years</span>
+          </div>
+          </div>
+          </div>
           {/* <div className={styles.inputGroup}>
             <span>Update Address: </span>
             <input
@@ -278,8 +294,10 @@ export default function ManageGrant() {
           </div>
           <p>Cost: {cost} FLOW</p>
           {loading && <p>Loading...</p>} */}
-        </div>
-      </main>
+
+        {/* </div>
+        </main> */}
+        <Footer/>
     </div>
   );
 }
diff --git a/web/pages/manage/index.js b/web/pages/manage/index.js
index f33abc3..21d7e1e 100644
--- a/web/pages/manage/index.js
+++ b/web/pages/manage/index.js
@@ -3,6 +3,7 @@ import Head from "next/head";
 import Link from "next/link";
 import {useEffect, useState} from "react";
 import Navbar from "../../components/Navbar";
+import Footer from "@/components/Footer";
 import {useAuth} from "../../contexts/AuthContext";
 import {getMyGrantInfos,getFlowBalance, getFlownsName} from "../../flow/scripts";
 import {initializeAccount} from "../../flow/transactions";
@@ -79,17 +80,26 @@ setName(name);
       <button onClick={fetchName}>FetchName{name ? name :"name"}</button>
 
       <main className={styles.main}>
-        <h1>Your Registered Grants</h1>
+
+      <div className='mx-4 my-4 text-2xl text-white font-semibold font-mono'>
+        <h1> Registered Grants </h1></div>
 
         {!isInitialized ? (
           <>
-            <p>Your account has not been initialized yet</p>
-            <button onClick={initialize}>Initialize Account</button>
+        <div className='mx-2 my-4 text-xl text-white font-mono'>
+            <p>Account not Initialized ! </p></div>
+            <div className ='flex justify-center mx-2 my-4'>
+        <div className='px-6 rounded-lg text-2xl text-white bg-blue-600 font-bold my-2'>
+            <button onClick={initialize}> Initialize Account</button>
+            </div>
+            </div>
           </>
         ) : (
           <div className={styles.grantsContainer}>
             {grantInfos.length === 0 ? (
-              <p>You have not registered any FNS Grants yet</p>
+      <div className='mx-4 my-4 text-2xl text-white font-semibold font-mono'>
+            
+              <p>You have not registered any FNS Grants yet</p></div>
             ) : (
 
               
@@ -100,14 +110,15 @@ setName(name);
         
         
             <div
-              className="block max-w-sm rounded-lg bg-white shadow-lg dark:bg-neutral-700" key={idx}>
+              className="block max-w-sm rounded-sm bg-gray-900 text-white font-mono my-8 mx-4 hover:bg-green-600" key={idx}>
+              {/* <a href="#!" data-te-ripple-init data-te-ripple-color="light"> */}
                 <img
                   className="rounded-t-lg"
                   src={di.imgurl}
                   alt="" />
               <div className="p-6">
                 <h5
-                  className="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
+                  className="mb-2 text-xl  leading-tight text-neutral-800 dark:text-neutral-50 font-semibold">
                 {di.name}
                 </h5>
                 <p className="mb-1 text-base text-neutral-600 dark:text-neutral-200">
@@ -141,6 +152,7 @@ setName(name);
           </div>
         )}
       </main>
+      <Footer/>
     </div>
   );
 }
\ No newline at end of file
diff --git a/web/pages/purchase.js b/web/pages/purchase.js
index 22dded0..ac07d71 100644
--- a/web/pages/purchase.js
+++ b/web/pages/purchase.js
@@ -12,6 +12,7 @@ import {
     updateBioForGrant,
   } from "../flow/transactions";
 import { useRouter } from "next/router";
+import Footer from '../components/Footer'
 
 
 // Maintain a constant for seconds per year
@@ -139,26 +140,46 @@ export default function Purchase() {
 
       {!isInitialized ? (
         <>
-          <p>Your account has not been initialized yet</p>
-          <button onClick={initialize}>Initialize Account</button>
+         <div className='mx-6 my-4 text-xl text-white'>
+            <p>Account not Initialized ! </p></div>
+            <div className ='flex justify-center mx-2 my-4'>
+        <div className='px-6 rounded-lg text-2xl text-white bg-blue-600 font-bold my-2'>
+            <button onClick={initialize}> Initialize Account</button>
+            </div>
+            </div>
         </>
       ) : (
+        <>
+                    {/* <div className='grid grid-cols-2'>
+                    <div className=' mx-20 my-10 text-3xl text-green-400 font-bold'>
+                      Create Your Own Grant</div> */}
+
+        <div className=' flex justify-center my-20'>
+          <div className=' flex flex-col  rounded-md bg-gray-900 '>
+            <div className='my-6'>
+              <div className='flex justify-center my-4'>
+              <div className='text-2xl font-mono font-bold text-green-400 '>
+                 Create Grant
+                 </div></div>
         <main className={styles.main}>
           <div className={styles.inputGroup}>
-            <span>Name: </span>
+            <span className=' text-md font-mono mx-4 my-2'>Name: </span>
+            <div className='flex'>
             <input
+            className="px-4 h-8  rounded-lg  bg-gray-800 text-gray-400 "
               type="text"
               value={name}
-              placeholder="learnweb3"
+              placeholder="Grant Name"
               onChange={(e) => setName(e.target.value)}
-            />
+            /></div>
             {/* <span>.fns</span> */}
           </div>
           <div className={styles.inputGroup}>
-            <span>Select Categories: </span>
+            <label className='text-sm' > Categories: </label>
             <input
+            className="px-4 h-8  rounded-lg  bg-gray-800 text-gray-400  "
               list="categories"
-              placeholder="Categories"
+              placeholder=" Select"
               value={category}
               onChange={(e) => setCategory(e.target.value)}
             //   multiple
@@ -192,11 +213,17 @@ export default function Purchase() {
             />
             <span>years</span>
           </div> */}
-          <button onClick={purchase}>Create Grant</button>
-          <p>Cost: {cost} FLOW</p>
+                  <div className='inline-block rounded bg-green-600 px-6 pt-2.5 pb-2 text-md   text-white hover:bg-green-500 font-semibold '>
+          <button onClick={purchase}>Create</button></div>
+          {/* <p>Cost:{cost} FLOW</p> */}
           <p>{loading ? "Loading..." : null}</p>
         </main>
+        </div>
+        </div>
+        </div>
+        </>
       )}
+      <Footer/>
     </div>
   );
 }
diff --git a/web/public/a.jpg b/web/public/a.jpg
new file mode 100644
index 0000000..f782786
Binary files /dev/null and b/web/public/a.jpg differ
diff --git a/web/public/b.jpg b/web/public/b.jpg
new file mode 100644
index 0000000..fa4c14a
Binary files /dev/null and b/web/public/b.jpg differ
diff --git a/web/public/c.jpg b/web/public/c.jpg
new file mode 100644
index 0000000..aa8b544
Binary files /dev/null and b/web/public/c.jpg differ
diff --git a/web/public/d.jpg b/web/public/d.jpg
new file mode 100644
index 0000000..ba57909
Binary files /dev/null and b/web/public/d.jpg differ
diff --git a/web/public/e.jpg b/web/public/e.jpg
new file mode 100644
index 0000000..d93a292
Binary files /dev/null and b/web/public/e.jpg differ
diff --git a/web/public/f.jpg b/web/public/f.jpg
new file mode 100644
index 0000000..ab4796c
Binary files /dev/null and b/web/public/f.jpg differ
diff --git a/web/public/f2.jpg b/web/public/f2.jpg
new file mode 100644
index 0000000..5d9f600
Binary files /dev/null and b/web/public/f2.jpg differ
diff --git a/web/public/g.png b/web/public/g.png
new file mode 100644
index 0000000..0fd489f
Binary files /dev/null and b/web/public/g.png differ
diff --git a/web/public/github-1.png b/web/public/github-1.png
new file mode 100644
index 0000000..47f3e99
Binary files /dev/null and b/web/public/github-1.png differ
diff --git a/web/public/m.png b/web/public/m.png
new file mode 100644
index 0000000..e891cfc
Binary files /dev/null and b/web/public/m.png differ
diff --git a/web/public/photo_2023-03-01_03-14-30.jpg b/web/public/photo_2023-03-01_03-14-30.jpg
new file mode 100644
index 0000000..8af2d96
Binary files /dev/null and b/web/public/photo_2023-03-01_03-14-30.jpg differ
diff --git a/web/public/twitter-1.png b/web/public/twitter-1.png
new file mode 100644
index 0000000..36e892b
Binary files /dev/null and b/web/public/twitter-1.png differ
diff --git a/web/styles/Home.module.css b/web/styles/Home.module.css
index 37d296d..bea2f57 100644
--- a/web/styles/Home.module.css
+++ b/web/styles/Home.module.css
@@ -1,5 +1,5 @@
 .container {
-  background-color: #171923;
+  background-color: #000000;
   min-height: 100vh;
 }
 
diff --git a/web/styles/Manage.module.css b/web/styles/Manage.module.css
index 3f57c7d..ee45ca3 100644
--- a/web/styles/Manage.module.css
+++ b/web/styles/Manage.module.css
@@ -1,5 +1,5 @@
 .container {
-    background-color: #171923;
+    background-color: #000000;
     min-height: 100vh;
   }
   
diff --git a/web/styles/ManageGrant.module.css b/web/styles/ManageGrant.module.css
index dcea5c5..ae20ecd 100644
--- a/web/styles/ManageGrant.module.css
+++ b/web/styles/ManageGrant.module.css
@@ -1,5 +1,5 @@
 .container {
-    background-color: #171923;
+    background-color: #000000;
     min-height: 100vh;
   }
   
diff --git a/web/styles/Navbar.module.css b/web/styles/Navbar.module.css
index 22344de..4416c8b 100644
--- a/web/styles/Navbar.module.css
+++ b/web/styles/Navbar.module.css
@@ -3,7 +3,7 @@
     justify-content: center;
     column-gap: 2em;
     align-items: center;
-    background-color: #171923;
+    background-color: #000000;
     padding: 1em 0 1em 0;
     font-size: 16px;
     border-bottom: 2px solid darkslategray;
diff --git a/web/styles/Purchase.module.css b/web/styles/Purchase.module.css
index 2a6a55d..51e7693 100644
--- a/web/styles/Purchase.module.css
+++ b/web/styles/Purchase.module.css
@@ -1,5 +1,5 @@
 .container {
-    background-color: #171923;
+    background-color: #000000;
     min-height: 100vh;
   }
   
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 9aec8a1..3623605 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -9,7 +9,12 @@ module.exports = {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        code: {
+        100:'#0f0c0c',}
+      },
+    },
   },
   plugins: [],
 }
\ No newline at end of file