diff --git a/package-lock.json b/package-lock.json
index d257486b3..d5bca6c14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "next14githubstarter",
+  "name": "next14starter",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "next14githubstarter",
+      "name": "next14starter",
       "version": "0.1.0",
       "dependencies": {
         "next": "14.0.4",
diff --git a/public/about.png b/public/about.png
new file mode 100644
index 000000000..eb43db841
Binary files /dev/null and b/public/about.png differ
diff --git a/public/brands.png b/public/brands.png
new file mode 100644
index 000000000..010adff76
Binary files /dev/null and b/public/brands.png differ
diff --git a/public/contact.png b/public/contact.png
new file mode 100644
index 000000000..2a1cb78fa
Binary files /dev/null and b/public/contact.png differ
diff --git a/public/hero.gif b/public/hero.gif
new file mode 100644
index 000000000..cadda34b6
Binary files /dev/null and b/public/hero.gif differ
diff --git a/public/menu.png b/public/menu.png
new file mode 100644
index 000000000..b0576c68d
Binary files /dev/null and b/public/menu.png differ
diff --git a/public/noavatar.png b/public/noavatar.png
new file mode 100644
index 000000000..f425e6705
Binary files /dev/null and b/public/noavatar.png differ
diff --git a/src/app/about/about.module.css b/src/app/about/about.module.css
new file mode 100644
index 000000000..4a9c0e5de
--- /dev/null
+++ b/src/app/about/about.module.css
@@ -0,0 +1,5 @@
+.imgContainer {
+    position: relative;
+    width: 100%;
+    height: 500px;
+}
\ No newline at end of file
diff --git a/src/app/about/page.jsx b/src/app/about/page.jsx
new file mode 100644
index 000000000..370de3dd6
--- /dev/null
+++ b/src/app/about/page.jsx
@@ -0,0 +1,14 @@
+import Image from "next/image"
+import styles from "./about.module.css"
+
+function AboutPage() {
+  return (
+    <div>
+      <div className={styles.imgContainer}>
+        <Image src="/about.png" alt="About" fill/>
+      </div>
+    </div>
+  )
+}
+
+export default AboutPage
\ No newline at end of file
diff --git a/src/app/admin/page.jsx b/src/app/admin/page.jsx
new file mode 100644
index 000000000..ba2264700
--- /dev/null
+++ b/src/app/admin/page.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function AdminPage() {
+  return (
+    <div>AdminPage</div>
+  )
+}
+
+export default AdminPage
\ No newline at end of file
diff --git a/src/app/blog/[slug]/page.jsx b/src/app/blog/[slug]/page.jsx
new file mode 100644
index 000000000..57b18d1f9
--- /dev/null
+++ b/src/app/blog/[slug]/page.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function SinglePostPage() {
+  return (
+    <div>SinglePostPage</div>
+  )
+}
+
+export default SinglePostPage
\ No newline at end of file
diff --git a/src/app/blog/blog.module.css b/src/app/blog/blog.module.css
new file mode 100644
index 000000000..b90efc2cd
--- /dev/null
+++ b/src/app/blog/blog.module.css
@@ -0,0 +1,3 @@
+.container{
+    
+}
\ No newline at end of file
diff --git a/src/app/blog/layout.js b/src/app/blog/layout.js
new file mode 100644
index 000000000..a6e451042
--- /dev/null
+++ b/src/app/blog/layout.js
@@ -0,0 +1,10 @@
+const BlogLayout = ({children}) => {
+    return (
+        <div>
+            <h1>This is the Blog Layout</h1>
+            {children}
+        </div>
+    );
+};
+
+export default BlogLayout;
\ No newline at end of file
diff --git a/src/app/blog/page.jsx b/src/app/blog/page.jsx
new file mode 100644
index 000000000..022b0c4a3
--- /dev/null
+++ b/src/app/blog/page.jsx
@@ -0,0 +1,11 @@
+import styles from './blog.module.css'
+
+function BlogPage() {
+  return (
+    <div className={styles.container}>
+
+    </div>
+  )
+}
+
+export default BlogPage
\ No newline at end of file
diff --git a/src/app/contact/contact.module.css b/src/app/contact/contact.module.css
new file mode 100644
index 000000000..cbc4a908b
--- /dev/null
+++ b/src/app/contact/contact.module.css
@@ -0,0 +1,45 @@
+.container{
+    display: flex;
+    gap: 100px;
+    align-items: center;
+}
+
+.imgContainer{
+    flex: 1;
+    position: relative;
+    height: 500px;
+}
+
+.img{
+    object-fit: contain;
+}
+
+.formContainer{
+    flex: 1;
+    
+}
+
+.form{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.form input, .form textarea {
+    padding: 20px;
+    border-radius: 5px;
+    border: none;
+    outline: none;
+    background-color: var(--bgSoft);
+    color: var(--text);
+}
+
+.form button{
+    padding: 20px;
+    background-color: var(--btn);
+    color: var(--text);
+    font-weight: bold;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/app/contact/page.jsx b/src/app/contact/page.jsx
new file mode 100644
index 000000000..59b4e3f02
--- /dev/null
+++ b/src/app/contact/page.jsx
@@ -0,0 +1,24 @@
+import styles from './contact.module.css'
+import Image from 'next/image'
+
+function ContactPage() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.imgContainer}>
+        <Image src="/contact.png" alt="" fill className={styles.img}/>
+      </div>
+      <div className={styles.formContainer}>
+        <form action=""  className={styles.form}>
+          <input placeholder='First Name' type='text'></input>
+          <input placeholder='Email' type='text'></input>
+          <input placeholder='Phone Number (optional)' type='text'></input>
+          <textarea name="" cols="30" rows="10" placeholder='Message'></textarea>
+          <button>Send</button>
+        </form>
+      </div>
+
+    </div>
+  )
+}
+
+export default ContactPage
\ No newline at end of file
diff --git a/src/app/error.jsx b/src/app/error.jsx
new file mode 100644
index 000000000..9bd0730cb
--- /dev/null
+++ b/src/app/error.jsx
@@ -0,0 +1,12 @@
+'use client'
+import React from 'react';
+const Error = ({ statusCode }) => {
+    return (
+        <div>
+            <h1>Error {statusCode}</h1>
+            <p>Oops! Something went wrong.</p>
+        </div>
+    );
+};
+
+export default Error;
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index e69de29bb..d1d08d198 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -0,0 +1,77 @@
+:root {
+  --bg: #0d0c22;
+  --bgSoft: #2d2b42;
+  --text: white;
+  --textSoft: #e5e5e5;
+  --btn: #3673fd;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+body {
+    background-color: var(--bg);
+    color: var(--text);
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.container {
+    width: 1536px;
+    margin: auto;
+    padding-left: 50px;
+    padding-right: 50px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+@media (max-width: 1536px) {
+    .container {
+      width: 1366px;
+    }
+  }
+  
+  @media (max-width: 1366px) {
+    .container {
+      width: 1280px;
+    }
+  }
+  
+  @media (max-width: 1280px) {
+    .container {
+      width: 1024px;
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+  
+  @media (max-width: 1024px) {
+    .container {
+      width: 768px;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .container {
+      width: 640px;
+    }
+  }
+  
+  @media (max-width: 640px) {
+    .container {
+      width: 475px;
+    }
+  }
+  @media (max-width: 475px) {
+    .container {
+      width: 380px;
+    }
+  }
\ No newline at end of file
diff --git a/src/app/home.module.css b/src/app/home.module.css
new file mode 100644
index 000000000..805176c9f
--- /dev/null
+++ b/src/app/home.module.css
@@ -0,0 +1,49 @@
+.container {
+    display: flex;
+    gap: 100px;
+}
+
+.textContainer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+}
+
+.title{
+    font-size: 96px;
+}
+
+.desc{
+    font-size: 20px;
+}
+
+.buttons{
+    display: flex;
+    gap: 20px;
+}
+
+.button{
+    padding: 20px;
+    min-width: 120px;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+}
+
+.button:first-child{
+    background-color: #7f3cd6;
+    color: white;
+}
+
+.imgContainer {
+    flex: 1;
+    position: relative;
+}
+
+.brands{
+    width: 500px;
+    height: 50px;
+    position: relative;
+    filter: grayscale(100%)
+}
diff --git a/src/app/layout.js b/src/app/layout.js
index e680e139d..cae78470f 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,5 +1,7 @@
 import { Inter } from 'next/font/google'
 import './globals.css'
+import Navbar from "@/components/navbar/Navbar"
+import Footer from "@/components/footer/Footer"
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -11,7 +13,13 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <div className="container">
+          <Navbar />
+          {children}
+          <Footer />
+        </div>
+      </body>
     </html>
   )
 }
\ No newline at end of file
diff --git a/src/app/loading.jsx b/src/app/loading.jsx
new file mode 100644
index 000000000..ae245cc66
--- /dev/null
+++ b/src/app/loading.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+const Loading = () => {
+    return (
+        <div>
+            <h1>Loading</h1>
+        </div>
+    );
+};
+
+export default Loading;
\ No newline at end of file
diff --git a/src/app/not-found.jsx b/src/app/not-found.jsx
new file mode 100644
index 000000000..358de1334
--- /dev/null
+++ b/src/app/not-found.jsx
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+const NotFound = () => {
+    return (
+        <div>
+            <h1>404 - Page Not Found</h1>
+            <p>The page you are looking for does not exist.</p>
+            <Link href="/">Return Home</Link>
+        </div>
+    );
+};
+
+export default NotFound;
\ No newline at end of file
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 00b9a6a96..35189babd 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -1,5 +1,25 @@
+import styles from './home.module.css';
+import Image from 'next/image';
+
 const Home = () => {
-  return <div>Hello World!</div>;
+  return <div className={styles.container}>
+            <div className={styles.textContainer}>
+              <h1 className={styles.title}>Creative Thoughts Agency.</h1>
+              <p className={styles.desc}>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum animi vitae quidem nostrum odit temporibus minima maiores odio numquam ullam vel provident quaerat voluptas, placeat, qui eos natus ipsa quam!
+              </p>
+              <div className={styles.buttons}>
+                <button className={styles.button}>Learn More</button>
+                <button className={styles.button}>Contact</button>
+              </div>
+              <div className={styles.brands}>
+                <Image src="/brands.png" alt="" fill className={styles.brandImg}/>
+              </div>
+            </div>
+            <div className={styles.imgContainer}>
+                <Image src="/hero.gif" alt="" fill className={styles.heroImg}/>
+              </div>
+        </div>;
 };
 
 export default Home;
\ No newline at end of file
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
new file mode 100644
index 000000000..e592846f3
--- /dev/null
+++ b/src/components/footer/Footer.jsx
@@ -0,0 +1,18 @@
+import styles from './footer.module.css'
+
+const Footer = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.logo}></div>
+            <div className={styles.text}>
+                Test creative thoughts © All rights reserved.
+            </div>
+
+
+
+
+        </div>
+    )
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/footer/footer.module.css b/src/components/footer/footer.module.css
new file mode 100644
index 000000000..4205c8e1a
--- /dev/null
+++ b/src/components/footer/footer.module.css
@@ -0,0 +1,15 @@
+.containter{
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: gray;
+}
+
+.logo{
+    font-weight: bold;
+}
+
+.text{
+    font-size: 12px;   
+}
\ No newline at end of file
diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx
new file mode 100644
index 000000000..a2343a848
--- /dev/null
+++ b/src/components/navbar/Navbar.jsx
@@ -0,0 +1,16 @@
+import Link from "next/link"
+import styles from "./navbar.module.css"
+import Links from "./link/Links"
+
+const NavBar = () => {
+    return (
+        <div className={styles.container}>
+            <Link href='/'className={styles.logo}>Logo</Link>
+            <div>
+                <Links />
+            </div>
+        </div>
+    )
+};
+
+export default NavBar;
\ No newline at end of file
diff --git a/src/components/navbar/link/Links.jsx b/src/components/navbar/link/Links.jsx
new file mode 100644
index 000000000..0870fccd6
--- /dev/null
+++ b/src/components/navbar/link/Links.jsx
@@ -0,0 +1,66 @@
+"use client";
+import styles from './links.module.css';
+import NavLink from './navLink/NavLink';
+import React, { useState } from 'react';
+
+const Links = () => {
+
+    const [open, setOpen] = useState(false);
+
+    const links = [
+        {
+            title: "Homepage",
+            path: "/",
+        }, 
+        {
+            title: "About",
+            path: "/about",
+        },
+        {
+            title: "Contact",
+            path: "/contact",
+        },
+        {
+            title: "Blog",
+            path: "/blog",
+            
+        },
+
+    ];
+    const session = true;
+    const isAdmin = true;
+
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.links}>{links.map((link=>(
+                <NavLink item= {link} key={link.title} />
+            )))} 
+            {session ? (
+                <>
+                    {
+                        isAdmin && (
+                            <NavLink item={{title: "Admin", path: "/admin"}}/>
+                        )
+                    }
+                    <button className={styles.logout}>Logout</button>
+                </>
+                ) : (
+                    <NavLink item={{title: "Login", path: "/login"}}/>
+                )
+                
+            }
+            </div>
+            <button className={styles.menuButton} onClick={()=>setOpen((prev)=>!prev)}>Menu</button>
+            {
+                open && <div className={styles.mobileLinks}> 
+                    {links.map((link) => (
+                        <NavLink item={link} key={link.title}/>
+                    ))}
+                </div>
+            }
+        </div>
+    );
+};
+
+export default Links;
\ No newline at end of file
diff --git a/src/components/navbar/link/links.module.css b/src/components/navbar/link/links.module.css
new file mode 100644
index 000000000..79d8c9ce2
--- /dev/null
+++ b/src/components/navbar/link/links.module.css
@@ -0,0 +1,42 @@
+.links {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.logout {
+    padding: 10px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.mobileLinks, .menuButton {
+    display: none;
+}
+
+
+
+@media (max-width: 768px) {
+    .links{
+        display: none;
+    }
+
+    .mobileLinks {
+        position: absolute;
+        top: 100px;
+        right: 0;
+        width: 50%;
+        height: calc(100vh - 100px);
+        /* background-color: var(--bg); */
+        background-color: purple;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .menuButton {
+        display: block;
+        cursor: pointer;
+    }
+}
\ No newline at end of file
diff --git a/src/components/navbar/link/navLink/navLink.jsx b/src/components/navbar/link/navLink/navLink.jsx
new file mode 100644
index 000000000..4b8e8ac4d
--- /dev/null
+++ b/src/components/navbar/link/navLink/navLink.jsx
@@ -0,0 +1,15 @@
+"use client"
+
+import React from 'react';
+import styles from './navLink.module.css';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const NavLink = ({ item }) => {
+    const pathName = usePathname();
+    return (
+        <Link href={item.path} className={`${styles.container} ${pathName === item.path && styles.active}`}>{item.title}</Link>
+    );
+};
+
+export default NavLink;
\ No newline at end of file
diff --git a/src/components/navbar/link/navLink/navLink.module.css b/src/components/navbar/link/navLink/navLink.module.css
new file mode 100644
index 000000000..13e909ad2
--- /dev/null
+++ b/src/components/navbar/link/navLink/navLink.module.css
@@ -0,0 +1,12 @@
+.container {
+    min-width: 100px;
+    padding: 10px;
+    border-radius: 20px;
+    font-weight: 500;
+    text-align: center;
+}
+
+.active {
+    background-color: var(--text);
+    color: var(--bg);
+}
\ No newline at end of file
diff --git a/src/components/navbar/navbar.module.css b/src/components/navbar/navbar.module.css
new file mode 100644
index 000000000..60e671b5e
--- /dev/null
+++ b/src/components/navbar/navbar.module.css
@@ -0,0 +1,12 @@
+.container {
+    /* background-color: rgb(86, 86, 155); */
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logo {
+    font-size: 30px;
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/components/postCard/postCard.jsx b/src/components/postCard/postCard.jsx
new file mode 100644
index 000000000..7f00dc38f
--- /dev/null
+++ b/src/components/postCard/postCard.jsx
@@ -0,0 +1,11 @@
+
+
+const PostCard = () => {
+    return (
+        <div>
+            {/* Your component content goes here */}
+        </div>
+    );
+};
+
+export default PostCard;
\ No newline at end of file
diff --git a/src/components/postCard/postCard.module.css b/src/components/postCard/postCard.module.css
new file mode 100644
index 000000000..e69de29bb