diff --git a/src/app/[slug]/page.jsx b/src/app/[slug]/page.jsx
new file mode 100644
index 000000000..b83837ddb
--- /dev/null
+++ b/src/app/[slug]/page.jsx
@@ -0,0 +1,48 @@
+import Menu from '@/component/menu/Menu'
+import styles from './singlePage.module.css'
+import Image from 'next/image'
+import Comments from '@/component/comment/Comments'
+
+const SinglePage = () => {
+  return (
+    <div className={styles.container}>
+        <div className={styles.infoContainer}>
+            <div className={styles.textContainer}>
+                <h1 className={styles.title}>Lorem ipsum dolor sit amet consectetur.</h1>
+                <div className={styles.user}>
+                    <div className={styles.userImageContainer}>
+                      <Image src="/p1.jpeg" alt="" fill className={styles.avatar}/>
+                    </div>
+                    <div className={styles.userTextContainer}>
+                        <span className={styles.username}>John Doe</span>
+                        <span className={styles.date}>01.01.2024</span>
+                    </div>
+                </div>
+            </div>
+            <div className={styles.imageContainer}>
+                <Image src="/p1.jpeg" alt="" fill className={styles.image}/>
+            </div>
+        </div>
+        <div className={styles.content}>
+            <div className={styles.post}>
+                <div className={styles.description}> 
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus alias beatae nihil magnam earum deleniti tempora ipsum numquam nam, facilis, voluptatem suscipit aperiam sapiente ipsa, ad recusandae magni! Nemo, dicta?
+                </p>
+                 <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                </h2>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus alias beatae nihil magnam earum deleniti tempora ipsum numquam nam, facilis, voluptatem suscipit aperiam sapiente ipsa, ad recusandae magni! Nemo, dicta?
+                </p>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus alias beatae nihil magnam earum deleniti tempora ipsum numquam nam, facilis, voluptatem suscipit aperiam sapiente ipsa, ad recusandae magni! Nemo, dicta?
+                </p>
+                </div>
+                <div className={styles.comment}>
+ . .               <Comments />
+                </div>
+            </div>
+             <Menu />
+        </div>
+    </div>
+  )
+}
+
+export default SinglePage
\ No newline at end of file
diff --git a/src/app/[slug]/singlePage.module.css b/src/app/[slug]/singlePage.module.css
new file mode 100644
index 000000000..92cfb2545
--- /dev/null
+++ b/src/app/[slug]/singlePage.module.css
@@ -0,0 +1,74 @@
+.container{
+
+}
+
+.infoContainer{
+    display: flex;
+    align-items: center;
+    gap: 50px;
+}
+
+.textContainer{
+    flex:1;
+}
+
+.title{
+    font-size: 64px;
+    margin-bottom: 50px;
+}
+
+.user{
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.userImageContainer{
+    height: 50px;
+    width: 50px;
+    position: relative;
+
+}
+
+.username{
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.userTextContainer{
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    color: var(--softTextColor);
+}
+
+ .avatar{
+    object-fit: cover;
+    border-radius: 50%;
+ }
+
+.imageContainer{
+     flex:1;
+     position: relative;
+     height: 350px;
+}
+
+.image{
+    object-fit: cover;
+}
+
+.content{
+    display: flex;
+    gap: 50px;
+}
+
+.post{
+    flex: 5;
+    margin-top: 60px;
+}
+
+.description p{
+    font-size: 20px;
+    font-weight: 300;
+    margin-bottom: 20px;
+}
\ No newline at end of file
diff --git a/src/app/about/aboutPage.module.css b/src/app/about/aboutPage.module.css
new file mode 100644
index 000000000..b90efc2cd
--- /dev/null
+++ b/src/app/about/aboutPage.module.css
@@ -0,0 +1,3 @@
+.container{
+    
+}
\ 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..19ca31784
--- /dev/null
+++ b/src/app/about/page.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from "./aboutPage.module.css"
+
+
+const AboutPage = () => {
+  return (
+    <div>
+      About Page
+    </div>
+  )
+}
+
+export default AboutPage
diff --git a/src/app/blog/blogPage.module.css b/src/app/blog/blogPage.module.css
new file mode 100644
index 000000000..5a38299f1
--- /dev/null
+++ b/src/app/blog/blogPage.module.css
@@ -0,0 +1,11 @@
+.title{
+   background-color: coral;
+   color: white;
+   padding: 5px 10px;
+   text-align: center;
+}
+
+.content{
+    display: flex;
+    gap: 50px;
+}
\ 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..468a53539
--- /dev/null
+++ b/src/app/blog/page.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import styles from "./blogPage.module.css"
+import CardList from '@/component/CardList/CardList'
+import Menu from '@/component/menu/Menu'
+
+const BlogPage = () => {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>Style Blog</h1>
+      <div className={styles.content}>
+        <CardList />
+        <Menu />
+      </div>
+    </div>
+  )
+}
+
+export default BlogPage
+
diff --git a/src/app/contact/contactPage.module.css b/src/app/contact/contactPage.module.css
new file mode 100644
index 000000000..b90efc2cd
--- /dev/null
+++ b/src/app/contact/contactPage.module.css
@@ -0,0 +1,3 @@
+.container{
+    
+}
\ 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..96c350148
--- /dev/null
+++ b/src/app/contact/page.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import styles from "./contactPage.module.css"
+
+const ContactPage = () => {
+  return (
+    <div>ContactPage</div>
+  )
+}
+
+export default ContactPage
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index e69de29bb..07ed90807 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -0,0 +1,93 @@
+:root{
+    --bg: white;
+    --textColor:black;
+    --softBg:#f0f0f0;
+    ---softTextColor: #626262
+}
+
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body{
+    max-width: 100vw;
+    overflow-x: hidden;
+}
+
+a{
+    color: inherit;
+    text-decoration: none;
+}
+
+.dark{
+    --bg:#0f172a;
+    --textColor:#ddd;
+    --softBg:#1f273a;
+    --softTextColor:#a6a6a6;
+}
+
+.light{
+    --bg: white;
+    --textColor:black;
+    --softBg:#f0f0f0;
+    ---softTextColor: #626262
+}
+
+.container {
+    min-height: 100vh;
+    background-color: var(--bg);
+    color: var(--textColor);
+}
+
+.wrapper{
+    max-width: 1536px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 50px;
+    padding-right: 50px;
+
+}
+
+@media screen and (max-width: 1536px){
+    .wrapper{
+        max-width: 1280px;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+}
+
+@media screen and (max-width: 1280px){
+    .wrapper{
+        max-width: 1024px;
+        
+    }
+}
+
+@media screen and (max-width: 1024px){
+    .wrapper{
+        max-width: 768px;
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+}
+
+@media screen and (max-width: 768px){
+    .wrapper{
+        max-width: 640px;
+    }
+}
+
+@media screen and (max-width: 640px){
+    .wrapper{
+        max-width: 475px;
+    }
+}
+
+
+@media screen and (max-width: 475px){
+    .wrapper{
+        max-width: 320px;
+    }
+}
diff --git a/src/app/homepage.module.css b/src/app/homepage.module.css
index e69de29bb..73a472812 100644
--- a/src/app/homepage.module.css
+++ b/src/app/homepage.module.css
@@ -0,0 +1,4 @@
+.content{
+    display: flex;
+    gap: 50px;
+}
\ No newline at end of file
diff --git a/src/app/layout.js b/src/app/layout.js
index 507fb0619..4ed518904 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,17 +1,33 @@
+import Navbar from '@/component/navbar/Navbar'
 import './globals.css'
 import { Inter } from 'next/font/google'
+import Footer from '@/component/footer/Footer'
+import { ThemeContextProvider } from '@/context/ThemeContext'
+import ThemeProvider from '@/component/providers/ThemeProvider'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
-  title: 'Blog App',
+  title: "David's Blog ",
   description: 'The best blog app!',
 }
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <ThemeContextProvider >
+          <ThemeProvider >
+        <div className="container">
+          <div className="wrapper">
+            <Navbar />
+            {children}
+            <Footer />
+            </div>
+        </div>
+          </ThemeProvider>
+        </ThemeContextProvider>
+      </body>
     </html>
   )
 }
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 02e8e8b92..5afd75318 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -1,5 +1,19 @@
+import Featured from "@/component/featured/Featured";
 import styles from "./homepage.module.css";
+import CategoryList from "@/component/CategoryList/CategoryList";
+import CardList from "@/component/CardList/CardList";
+import Menu from "@/component/menu/Menu";
 
 export default function Home() {
-  return <div>Hello</div>;
+  return (
+  <div className={styles.container}>
+    <Featured />
+    <CategoryList />
+      <div className={styles.content}>
+        <CardList />
+        <Menu />
+      </div>
+  </div>
+  );
 }
+
diff --git a/src/component/CardList/CardList.jsx b/src/component/CardList/CardList.jsx
new file mode 100644
index 000000000..4d00702d4
--- /dev/null
+++ b/src/component/CardList/CardList.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import styles from "./cardList.module.css"
+import Pagination from '../pagination/Pagination'
+import Card from '../card/Card'
+
+const CardList = () => {
+  return (
+    <div className={styles.container}>
+       <h1 className={styles.title}>Recent Post</h1>
+       <div className={styles.posts}>
+        <Card />
+        <Card />
+        <Card />
+        <Card />
+       </div>
+       <Pagination />
+    </div>
+  )
+}
+
+export default CardList
diff --git a/src/component/CardList/cardList.module.css b/src/component/CardList/cardList.module.css
new file mode 100644
index 000000000..ea1315aae
--- /dev/null
+++ b/src/component/CardList/cardList.module.css
@@ -0,0 +1,7 @@
+.container{
+    flex: 5;
+}
+
+.title{
+    margin: 50px 0px;
+}
\ No newline at end of file
diff --git a/src/component/CategoryList/CategoryList.jsx b/src/component/CategoryList/CategoryList.jsx
new file mode 100644
index 000000000..997ee7fba
--- /dev/null
+++ b/src/component/CategoryList/CategoryList.jsx
@@ -0,0 +1,82 @@
+import React from 'react'
+import styles from "./categoryList.module.css"
+import Link from 'next/link'
+import Image from 'next/image'
+
+
+const CategoryList = () => {
+  return (
+    <div className={styles.container}>
+       <h1 className={styles.title}>Popular Categories</h1>
+       <div className={styles.categories}>
+          <Link href="/blog?cat=style" 
+          className={`${styles.category} ${styles.style}`}>
+             <Image src="/style.png"
+              alt=""
+              height={32}
+              width={32}
+              className={styles.image}
+              /> 
+              Style
+          </Link>
+          
+          <Link href={`/blog`} 
+          className={`${styles.category} ${styles.fashion}`}>
+             <Image src="/fashion.png"
+              alt=""
+              height={32}
+              width={32}
+              className={styles.image}
+              />
+              Fashion
+          </Link>
+
+          <Link href={`/blog`} 
+          className={`${styles.category} ${styles.food}`}>
+             <Image src="/food.png"
+              alt=""
+              height={32}
+              width={32}
+              className={styles.image}
+              />
+              Food
+          </Link>
+
+          <Link href={`/blog`} 
+          className={`${styles.category} ${styles.travel}`}>
+             <Image src="/travel.png"
+              alt=""
+              height={32}
+              width={32}
+              className={styles.image}
+              />
+              Travel
+          </Link>
+
+          <Link href={`/blog`} 
+          className={`${styles.category} ${styles.culture}`}>
+             <Image src="/culture.png"
+              alt=""
+              height={32}
+              width={32}
+              className={styles.image}
+              />
+              Culture
+          </Link>
+
+          <Link href={`/blog`} 
+          className={`${styles.category} ${styles.coding}`}>
+             <Image src="/coding.png"
+              alt=""
+              height={32}
+              width={32}
+              className={styles.image}
+              />
+              Coding
+          </Link>
+       </div>
+    </div>
+  )
+}
+
+export default CategoryList
diff --git a/src/component/CategoryList/categoryList.module.css b/src/component/CategoryList/categoryList.module.css
new file mode 100644
index 000000000..163c00432
--- /dev/null
+++ b/src/component/CategoryList/categoryList.module.css
@@ -0,0 +1,74 @@
+.container{
+
+    
+}
+
+.title{
+    margin: 50px 0px
+}
+
+.categories{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 20px;
+}
+
+.category{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-transform: capitalize;
+    width: 15%;
+    height: 80px;
+    justify-content: center;
+    border-radius: 10px;
+
+}
+
+.category.style{
+  background-color: #57c4ff31;
+}
+.category.fashion{
+  background-color: #da85c731;
+}
+.category.food{
+  background-color: #7fb88133;
+}
+.category.travel{
+  background-color: #ff795736;
+}
+.category.culture{
+  background-color: #ffb04f45;
+}
+.category.coding{
+  background-color: #5e4fff31;
+}
+
+.image{
+    border-radius: 50%;
+}
+
+@media screen and (max-width: 1280px) {
+    .category{
+        width: 25%;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .category{
+        width: 25%;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .category{
+        width: 45%;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .category{
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/component/MenuPosts/MenuPost.jsx b/src/component/MenuPosts/MenuPost.jsx
new file mode 100644
index 000000000..2babcaacc
--- /dev/null
+++ b/src/component/MenuPosts/MenuPost.jsx
@@ -0,0 +1,80 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import styles from './menuPost.module.css'
+
+const MenuPost = ({withImage}) => {
+  return (
+     
+  <div className={styles.items}> 
+
+<Link href="/" className={styles.item}>
+    {withImage && (
+      <div className={styles.imageContainer}>
+        <Image src="/p1.jpeg" alt="" fill className={styles.image}/>
+      </div>
+        )}
+ <div className={styles.textContainer}>
+   <span className={`${styles.category} ${styles.travel}`}>Travel</span>
+   <h3 className={styles.postTitle}>Lorem ipsum dolor sit amet consectetur .</h3>
+   <div className={styles.details}>
+      <span className={styles.username}>John Doe</span>
+      <span className={styles.date}> - 10.03.2023</span>
+   </div>
+ </div>
+
+</Link>
+<Link href="/" className={styles.item}>
+    {withImage && (
+    <div className={styles.imageContainer}>
+      <Image src="/p1.jpeg" alt="" fill className={styles.image}/>
+     </div>
+    )}
+ <div className={styles.textContainer}>
+   <span className={`${styles.category} ${styles.culture}`}>Culture</span>
+   <h3 className={styles.postTitle}>Lorem ipsum dolor sit amet consectetur .</h3>
+   <div className={styles.details}>
+      <span className={styles.username}>John Doe</span>
+      <span className={styles.date}> - 10.03.2023</span>
+   </div>
+ </div>
+</Link>
+
+<Link href="/" className={styles.item}>
+    {withImage && (
+    <div className={styles.imageContainer}>
+       <Image src="/p1.jpeg" alt="" fill className={styles.image}/>
+     </div>
+    )}
+ <div className={styles.textContainer}>
+   <span className={`${styles.category} ${styles.food}`}>Foods</span>
+   <h3 className={styles.postTitle}>Lorem ipsum dolor sit amet consectetur .</h3>
+   <div className={styles.details}>
+      <span className={styles.username}>John Doe</span>
+      <span className={styles.date}> - 10.03.2023</span>
+   </div>
+ </div>
+</Link>
+
+<Link href="/" className={styles.item}>
+ {withImage && (     
+    <div className={styles.imageContainer}>
+   <Image src="/p1.jpeg" alt="" fill className={styles.image}/>
+    </div>
+   )}   
+ <div className={styles.textContainer}>
+   <span className={`${styles.category} ${styles.fashion}`}>Fashion</span>
+   <h3 className={styles.postTitle}>Lorem ipsum dolor sit amet consectetur .</h3>
+   <div className={styles.details}>
+      <span className={styles.username}>John Doe</span>
+      <span className={styles.date}> - 10.03.2023</span>
+   </div>
+   </div>
+  </Link>
+
+   </div>
+       
+  );
+};
+
+export default MenuPost
+
diff --git a/src/component/MenuPosts/menuPost.module.css b/src/component/MenuPosts/menuPost.module.css
new file mode 100644
index 000000000..03e0fc43b
--- /dev/null
+++ b/src/component/MenuPosts/menuPost.module.css
@@ -0,0 +1,79 @@
+.items{
+    margin-top: 35px;
+    margin-bottom: 60px;
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
+
+}
+
+.item{
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.imageContainer{
+    flex:1;
+    position: relative;
+    aspect-ratio: 1/1;
+}
+
+.image{
+    border: 3px solid lightgray;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.textContainer{
+    flex:4;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.category{
+    padding: 3px 8px;
+    border-radius: 10px;
+    font-size: 12px;
+    color: white;
+    width: max-content;
+}
+
+.category.travel{
+    background-color: #ff7857;
+}
+
+.category.culture{
+    background-color: #ffb14f;
+}
+
+.category.food{
+    background-color: #f7b881;
+}
+
+.category.fashion{
+    background-color: #ff7887;
+}
+
+.category.coding{
+    background-color: #775aec;
+}
+
+.category.style{
+    background-color: #789cff;
+}
+
+.postTitle{
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--softTextColor)
+}
+
+.detail{
+    font-size: 12px;
+}
+
+.date{
+    color: gray;
+}
\ No newline at end of file
diff --git a/src/component/authLinks/AuthLinks.jsx b/src/component/authLinks/AuthLinks.jsx
new file mode 100644
index 000000000..ff7592d4e
--- /dev/null
+++ b/src/component/authLinks/AuthLinks.jsx
@@ -0,0 +1,45 @@
+"use client"
+
+import React, { useState } from 'react'
+import styles from "./authLinks.module.css"
+import Link from 'next/link'
+
+const AuthLinks = () => {
+ const status = "notauthenticated"
+
+ const [open, setOpen]= useState(false);
+
+  return (
+     <> { status === "notauthenticated" ? (
+        <Link href="/login" className={styles.link}>Login</Link>
+
+           ):( 
+            <>  <Link href="/write" className={styles.link}>Write</Link>
+                   <span className={styles.link}>Logout</span>
+            </>)}
+
+         <div className={styles.burger} onClick={()=> setOpen(!open)}>
+            <div className={styles.line}></div>
+            <div className={styles.line}></div>
+            <div className={styles.line}></div>
+         </div>
+
+         { open && (
+            <div className={styles.responsiveMenu}>
+             <Link  href="/">Homepage</Link>
+             <Link href="/">About</Link>
+             <Link href="/">Contact</Link>
+             { status === "notauthenticated" ? (
+              <Link href="/login">Login</Link>
+                ):(<> <Link href="/write">Write</Link>
+                      <span className={styles.link}>Logout</span>
+                   </>)}
+           </div>
+          
+         )
+         }
+     </>
+  );
+};
+
+export default AuthLinks
diff --git a/src/component/authLinks/authLinks.module.css b/src/component/authLinks/authLinks.module.css
new file mode 100644
index 000000000..45fe87d58
--- /dev/null
+++ b/src/component/authLinks/authLinks.module.css
@@ -0,0 +1,42 @@
+.link{
+    cursor: pointer;
+}
+
+.burger{
+    width: 20px;
+    height: 16px;
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    cursor: pointer;
+}
+
+.line{
+    width: 100%;
+    height: 2px;
+    background-color: var(--textColor);
+}
+
+.responsiveMenu{
+    position: absolute;
+    top: 100px;
+    left:0;
+    background-color: var(--bg);
+    height: calc(100vh - 100px);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+    font-size: 36px;
+}
+
+@media screen and (max-width: 640px){
+    .burger{
+        display: flex;
+    }
+    .link{
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/src/component/card/Card.jsx b/src/component/card/Card.jsx
new file mode 100644
index 000000000..2f1697e44
--- /dev/null
+++ b/src/component/card/Card.jsx
@@ -0,0 +1,26 @@
+import Link from 'next/link';
+import styles from './card.module.css';
+import Image from 'next/image';
+
+const Card = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.imageContainer}>
+            <Image src="/p1.jpeg" alt="" fill className={styles.image}/>
+          </div>
+          <div className={styles.textContainer}>
+            <div className={styles.detail}>
+                <span className={styles.date}>11.02.2023 - </span>
+                <span className={styles.category}>CULTURE</span>
+            </div>
+            <Link href="/" >
+            <h1>Lorem ipsum dolor sit amet.</h1>
+            </Link>
+            <p className={styles.desc}>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi, aperiam. Aliquam quod cum quam, quas nemo harum repudiandae odit officia saepe culpa ratione. Fugit corrupti quibusdam mollitia! Nisi, ea dolores. </p>
+            <Link  href="/" className={styles.link}> Read More</Link>
+          </div>
+    </div>
+  )
+}
+
+export default Card
diff --git a/src/component/card/card.module.css b/src/component/card/card.module.css
new file mode 100644
index 000000000..f90173a69
--- /dev/null
+++ b/src/component/card/card.module.css
@@ -0,0 +1,52 @@
+.container{
+    margin-bottom: 50px;
+    display: flex;
+    align-items: center;
+    gap: 50px;
+}
+
+.imageContainer{
+    flex: 1;
+    position: relative;
+    height: 350px;
+
+}
+
+
+.image{
+  object-fit: cover;   
+}
+
+.textContainer{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.date{
+    color: gray;
+}
+
+.category{
+    font-weight: 500;
+    color: crimson;
+}
+
+.desc{
+    font-size: 18px;
+    font-weight: 300;
+    color: var(--softTextColor)
+}
+
+.link{
+    border-bottom: 1px solid crimson;
+    width: max-content;
+    padding: 2px 0px;
+}
+
+@media screen and (max-width: 1280px) {
+    .imageContainer{
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/src/component/comment/Comments.jsx b/src/component/comment/Comments.jsx
new file mode 100644
index 000000000..820f8bc10
--- /dev/null
+++ b/src/component/comment/Comments.jsx
@@ -0,0 +1,68 @@
+import styles from './comments.module.css'
+import Link from 'next/link';
+import Image from 'next/image';
+// import { useState } from 'react';
+
+const Comments = () => {
+
+  // const [dec, setDesc] = useState(false);
+
+  const isLoading = "false"
+
+  const status = "authenticated"
+
+  // const handleSubmit = () => {
+
+  // }
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>Comments</h1>
+
+      {status === "authenticated" ? (
+        <div className={styles.write}>
+          <textarea
+            placeholder="write a comment..."
+            className={styles.input}
+            // onChange={(e) => setDesc(e.target.value)}
+          />
+          <button className={styles.button} 
+                  // onClick={handleSubmit}
+                  >
+            Send
+          </button>
+        </div>
+      ) : (
+        <Link href="/login">Login to write a comment</Link>
+      )}
+      <div className={styles.comments}>
+        {isLoading
+          ? "loading..."
+          : data?.map((item) => (
+              <div className={styles.comment} key={item._id}>
+                <div className={styles.user}>
+                  {item?.user?.image && (
+                    <Image
+                      src={item.user.image}
+                      alt="few things"
+                      width={50}
+                      height={50}
+                      className={styles.image}
+
+                    />
+                  )}
+                  <div className={styles.userInfo}>
+                    <span className={styles.username}>{item.user.name}</span>
+                    <span className={styles.date}>{item.createdAt}</span>
+                  </div>
+                </div>
+                <p className={styles.desc}>{item.desc}</p>
+              </div>
+            ))}
+      </div>
+    </div>
+  );
+
+}
+
+export default Comments
\ No newline at end of file
diff --git a/src/component/comment/comments.module.css b/src/component/comment/comments.module.css
new file mode 100644
index 000000000..1883b9652
--- /dev/null
+++ b/src/component/comment/comments.module.css
@@ -0,0 +1,70 @@
+.container {
+    margin-top: 50px;
+  }
+  
+  .title {
+    color: var(--softTextColor);
+    margin-bottom: 30px;
+  }
+  
+  .write {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 30px;
+  }
+  
+  .input {
+    padding: 20px;
+    width: 100%;
+  }
+  
+  .button {
+    padding: 16px 20px;
+    background-color: teal;
+    color: white;
+    font-weight: bold;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  .comments{
+    margin-top: 50px;
+  }
+  
+  .comment{
+    margin-bottom: 50px;
+  }
+  
+  .user {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 20px;
+  }
+  
+  .image {
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  
+  .userInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    color: var(--softTextColor);
+  }
+  
+  .username {
+    font-weight: 500;
+  }
+  
+  .date{
+    font-size: 14px;
+  }
+  
+  .desc{
+    font-size: 18px;
+    font-weight: 300;
+  }
\ No newline at end of file
diff --git a/src/component/featured/Featured.jsx b/src/component/featured/Featured.jsx
new file mode 100644
index 000000000..618a0f806
--- /dev/null
+++ b/src/component/featured/Featured.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import styles from "./featured.module.css"
+import Image from 'next/image'
+
+
+const Featured = () => {
+  return (
+    <div className={styles.container}>
+       <h1 className={styles.title}>
+        <b>Hey, the gringo is here! </b>Discover my stories and creative ideas.</h1>
+        <div className={styles.post}>
+           <div className={styles.imgContainer}>
+            <Image src="/p1.jpeg" alt="" fill className={styles.image}/>
+           </div>
+           <div className={styles.textContainer}>
+            <h1 className={styles.postTitle}>Lorem, ipsum dolor sit amet consectetur</h1>
+            <p className={styles.postDesc}> Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit enim, similique iste impedit aspernatur eveniet ipsam velit asperiores veritatis laborum atque possimus corrupti accusamus omnis consectetur nobis dolor dolore nostrum.
+            </p>
+            <button className={styles.button}> Read More</button>
+           </div>
+        </div>
+    </div>
+  )
+}
+
+export default Featured
diff --git a/src/component/featured/featured.module.css b/src/component/featured/featured.module.css
new file mode 100644
index 000000000..c6c6a4706
--- /dev/null
+++ b/src/component/featured/featured.module.css
@@ -0,0 +1,79 @@
+.container{
+  margin-top: 30px;
+
+}
+
+.title{
+    font-size: 96px;
+    font-weight: 300;
+}
+
+.post{
+    margin-top: 60px;
+    display: flex;
+    align-items: center;
+    gap: 50px;
+}
+
+.imgContainer{
+    flex:1;
+    height: 500px;
+    position: relative;
+}
+
+.image{
+    object-fit:cover;
+}
+
+.textContainer{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.postTitle{
+    font-size: 40px;
+}
+
+.postDesc{
+    font-size: 20px;
+    font-weight: 300;
+    color: var(--softTextColor);
+}
+
+.button{
+    padding: 16px 24px;
+    border: none;
+    border-radius: 5px;
+    width: max-content;
+}
+
+@media screen and (max-width:1280px) {
+    .title{
+        font-size: 72px;
+    }
+}
+
+@media screen and (max-width:1024px) {
+    .title{
+        font-size: 64px;
+    }
+    
+
+@media screen and (max-width:768px) {
+    .title{
+        font-size: 48px;
+    }
+
+    .imgContainer{
+        display: none;
+    }
+}
+}
+
+@media screen and (max-width:640px) {
+    .title{
+        font-size: 36px;
+    }
+}
\ No newline at end of file
diff --git a/src/component/footer/Footer.jsx b/src/component/footer/Footer.jsx
new file mode 100644
index 000000000..34a945dab
--- /dev/null
+++ b/src/component/footer/Footer.jsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import styles from "./footer.module.css"
+import Image from 'next/image'
+import Link from 'next/link'
+
+
+const Footer = () => {
+  return (
+    <div className={styles.container}>
+       <div className={styles.info}>
+        <div className={styles.logo}>
+        <Image src="/logo.png" alt="{David's blog}" width={50} height={50} />
+        <h1 className={styles.logoText}> {"David's Blog"}</h1>
+        </div>
+        <p className={styles.desc}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum perferendis explicabo voluptates modi rem eum nemo at alias quae, ducimus deleniti laborum, animi quisquam error atque perspiciatis non quibusdam sint.
+        </p>
+        <div className={styles.icons}>
+           <Image  src="/facebook.png" alt="" width={18} height={18}/>
+           <Image  src="/instagram.png" alt="" width={18} height={18}/>
+           <Image  src="/tiktok.png" alt="" width={18} height={18}/>
+           <Image  src="/youtube.png" alt="" width={18} height={18}/>
+        </div>
+       </div>
+
+       <div className={styles.links}>
+         <div className={styles.list}>
+           <span className={styles.listTitle}>Links</span>
+           <Link href="/">Homepage</Link>
+           <Link href="/">Blog</Link>
+           <Link href="/">About</Link>
+           <Link href="/">Contact</Link>
+         </div>
+
+         <div className={styles.list}>
+           <span className={styles.listTitle}>Tags</span>
+           <Link href="/">Style</Link>
+           <Link href="/">Fashion</Link>
+           <Link href="/">Coding</Link>
+           <Link href="/">Travel</Link>
+         </div>
+
+         <div className={styles.list}>
+           <span className={styles.listTitle}>Social</span>
+           <Link href="/">Facebook</Link>
+           <Link href="/">Instagram</Link>
+           <Link href="/">Tiktok</Link>
+           <Link href="/">Youtube</Link>
+         </div>
+       </div>
+    </div>
+  )
+}
+
+export default Footer
diff --git a/src/component/footer/footer.module.css b/src/component/footer/footer.module.css
new file mode 100644
index 000000000..4318f8b64
--- /dev/null
+++ b/src/component/footer/footer.module.css
@@ -0,0 +1,76 @@
+.container{
+    margin-top: 50px;
+    padding: 20px 0px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--softTextColor);
+}
+
+.info{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.logo{
+   display: flex;
+   align-items: center;
+   gap: 10px;
+}
+.logoText{
+    font-size: 24px;
+}
+
+.desc{
+    font-weight: 300;
+}
+
+.icons{
+    display: flex;
+    margin-top: 10px;
+    gap: 10px;
+}
+
+.links{
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  gap: 100px;
+}
+
+.list{
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    font-weight: 300;
+}
+
+.listTitle{
+    font-weight: bold;
+}
+
+@media screen and (max-width: 1024px){
+    .links{
+        gap:50px
+    }
+}
+
+@media screen and (max-width: 768px){
+    .container{
+        flex-direction: column;
+        gap:50px
+    }
+    .links{
+        width: 100%;
+        justify-content:space-between ;
+    }
+}
+
+@media screen and (max-width: 640px){
+
+    .links{
+        font-size: 14px;
+    }
+}
\ No newline at end of file
diff --git a/src/component/menu/Menu.jsx b/src/component/menu/Menu.jsx
new file mode 100644
index 000000000..e486c9804
--- /dev/null
+++ b/src/component/menu/Menu.jsx
@@ -0,0 +1,28 @@
+import styles from "./menu.module.css"
+import MenuPost from "../MenuPosts/MenuPost"
+import MenuCategory from "../menuCategory/MenuCategory"
+
+
+const Menu = () => {
+  return (
+    <div className={styles.container}>
+      <h2 className={styles.subtitle}>{"what's hot"}</h2>
+      <h1 className={styles.title}>Most Popular</h1>
+      
+      <MenuPost withImage={false}/>
+
+       <h2 className={styles.subtitle}> Discover by topics</h2>
+      <h1 className={styles.title}> Categories</h1>
+
+        <MenuCategory />
+
+      <h2 className={styles.subtitle}> Chosen by Editor</h2>
+      <h1 className={styles.title}>{"Editor's Pick"}</h1>
+
+      <MenuPost withImage={true}/>
+
+    </div>
+  )
+}
+
+export default Menu
diff --git a/src/component/menu/menu.module.css b/src/component/menu/menu.module.css
new file mode 100644
index 000000000..cea7fa993
--- /dev/null
+++ b/src/component/menu/menu.module.css
@@ -0,0 +1,20 @@
+.container{
+    flex: 2;
+    margin-top: 60px;
+}
+
+.subtitle{
+  color:gray;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.title{
+ font-size: 20px;
+}
+
+@media screen and (max-width: 1024px) {
+  .container{
+      display: none;
+  }
+}
\ No newline at end of file
diff --git a/src/component/menuCategory/MenuCategory.jsx b/src/component/menuCategory/MenuCategory.jsx
new file mode 100644
index 000000000..8829cbb0c
--- /dev/null
+++ b/src/component/menuCategory/MenuCategory.jsx
@@ -0,0 +1,48 @@
+import Link from 'next/link'
+import styles from "./menuCategory.module.css"
+
+
+const MenuCategory = () => {
+  return (
+    <div className={styles.categoryList}>
+          <Link 
+          href="/blog?cat=style" 
+          className={`${styles.categoryItem} ${styles.style}`}
+          >
+          Style
+        </Link>
+          <Link 
+          href="/blog?cat=style" 
+          className={`${styles.categoryItem} ${styles.fashion}`}
+          >
+          Fashion
+        </Link>
+          <Link 
+          href="/blog?cat=style" 
+          className={`${styles.categoryItem} ${styles.food}`}
+          >
+          Food
+        </Link>
+          <Link 
+          href="/blog?cat=style" 
+          className={`${styles.categoryItem} ${styles.travel}`}
+          >
+          Travel
+        </Link>
+          <Link 
+          href="/blog?cat=style" 
+          className={`${styles.categoryItem} ${styles.culture}`}
+          >
+          Culture
+        </Link>
+          <Link 
+          href="/blog?cat=style" 
+          className={`${styles.categoryItem} ${styles.coding}`}
+          >
+          Coding
+        </Link>
+       </div>
+  )
+}
+
+export default MenuCategory
diff --git a/src/component/menuCategory/menuCategory.module.css b/src/component/menuCategory/menuCategory.module.css
new file mode 100644
index 000000000..43ddc6ecd
--- /dev/null
+++ b/src/component/menuCategory/menuCategory.module.css
@@ -0,0 +1,34 @@
+.categoryList{
+    margin-top: 35px;
+    margin-bottom: 60px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.categoryItem{
+    padding: 10px 25px;
+    border-radius: 10px ;
+    font-size: 14px;
+    width: 100px;
+}
+
+.categoryItem.style{
+    background-color: #57c4ff31;
+  }
+  .categoryItem.fashion{
+    background-color: #da85c731;
+  }
+  .categoryItem.food{
+    background-color: #7fb88133;
+  }
+  .categoryItem.travel{
+    background-color: #ff795736;
+  }
+  .categoryItem.culture{
+    background-color: #ffb04f45;
+  }
+  .categoryItem.coding{
+    background-color: #5e4fff31;
+  }
+  
\ No newline at end of file
diff --git a/src/component/navbar/Navbar.jsx b/src/component/navbar/Navbar.jsx
new file mode 100644
index 000000000..9eb83a8f5
--- /dev/null
+++ b/src/component/navbar/Navbar.jsx
@@ -0,0 +1,32 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from 'react'
+import styles from "./navbar.module.css"
+import Image from 'next/image'
+import Link from 'next/link'
+import ThemeToggle from '../themeToggle/ThemeToggle'
+import AuthLinks from '../authLinks/AuthLinks'
+
+
+const Navbar = () => {
+  return (
+    <div className={styles.container}>
+       <div className={styles.social}>
+        <Image src="/facebook.png" alt="facebook" width={24} height={24} />
+        <Image src="/instagram.png" alt="instagram" width={24} height={24} />
+        <Image src="/tiktok.png" alt="tiktok" width={24} height={24} />
+        <Image src="/youtube.png" alt="youtube" width={24} height={24} />
+       </div>
+       <div className={styles.logo}> David's Blog</div>
+       <div className={styles.links}>
+        <ThemeToggle />
+        <Link href="/" className={styles.link}>Homepage</Link>
+        <Link href="/" className={styles.link}>Contact</Link>
+        <Link href="/" className={styles.link}>About</Link>
+        <AuthLinks />
+       </div>
+    </div>
+  )
+}
+
+export default Navbar
+
diff --git a/src/component/navbar/navbar.module.css b/src/component/navbar/navbar.module.css
new file mode 100644
index 000000000..2c444b054
--- /dev/null
+++ b/src/component/navbar/navbar.module.css
@@ -0,0 +1,74 @@
+.container{
+    display:flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100px;
+}
+
+
+.social {
+    display: flex;
+    gap: 10px;
+    flex: 1;
+}
+
+.logo{
+   flex: 1;
+   text-align: center;
+   font-size: 36px;
+   font-weight: bold;
+}
+
+.links{
+    display: flex;
+    gap:20px;
+    flex: 1;
+    font-size: 20px;
+    align-items: center;
+}
+
+@media screen and (max-width:1300px){
+    
+    .logo{
+       flex: 1;
+       text-align: center;
+       font-size: 24px;
+       font-weight: bold;
+    }
+    
+    .links{
+        display: flex;
+        gap:15px;
+        flex: 1;
+        font-size: 15px;
+    }
+    
+}
+
+@media screen and (max-width:1024px){
+    .social{
+        display: none;
+    }
+
+    .logo{
+       text-align: left;
+    }
+    
+}
+
+
+@media screen and (max-width:768px){
+    .logo{
+      font-size: 24px;
+    }
+    
+}
+
+@media screen and (max-width:640px){
+    .link{
+      display: none;
+    }
+    .links{
+        justify-content: flex-end;
+    }    
+}
\ No newline at end of file
diff --git a/src/component/pagination/Pagination.jsx b/src/component/pagination/Pagination.jsx
new file mode 100644
index 000000000..6182e8abc
--- /dev/null
+++ b/src/component/pagination/Pagination.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import styles from "./pagination.module.css"
+
+
+const Pagination = () => {
+  return (
+    <div className={styles.container}>
+       <button className={styles.button}>Previous</button>
+       <button className={styles.button}>Next</button>
+    </div>
+  )
+}
+
+export default Pagination
diff --git a/src/component/pagination/pagination.module.css b/src/component/pagination/pagination.module.css
new file mode 100644
index 000000000..8377e6e09
--- /dev/null
+++ b/src/component/pagination/pagination.module.css
@@ -0,0 +1,13 @@
+.container{
+    display: flex;
+    justify-content: space-between;
+}
+
+.button{
+    width: 100px;
+    padding: 16px 10px;
+    border: none;
+    background-color: crimson;
+    color: white;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/component/providers/ThemeProvider.jsx b/src/component/providers/ThemeProvider.jsx
new file mode 100644
index 000000000..aae848912
--- /dev/null
+++ b/src/component/providers/ThemeProvider.jsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { ThemeContext } from '@/context/ThemeContext'
+import React, { useContext, useEffect, useState } from 'react'
+
+
+
+const ThemeProvider = ({children}) => {
+
+    const {theme} = useContext(ThemeContext);
+    const [mounted, setMounted] = useState(false)
+
+   useEffect(()=>{
+    setMounted(true)
+   },[]);
+
+   if(mounted){
+       return  <div className={theme}> {children}</div>
+    }
+
+  
+}
+
+export default ThemeProvider
diff --git a/src/component/themeToggle/ThemeToggle.jsx b/src/component/themeToggle/ThemeToggle.jsx
new file mode 100644
index 000000000..1b70f0059
--- /dev/null
+++ b/src/component/themeToggle/ThemeToggle.jsx
@@ -0,0 +1,31 @@
+"use client"
+
+import React, { useContext } from 'react'
+import styles from "./themeToggle.module.css"
+import Image from 'next/image'
+import { ThemeContext } from '@/context/ThemeContext'
+
+const ThemeToggle = () => {
+
+   const {theme, toggle} =useContext(ThemeContext)
+
+   console.log(theme)
+
+  return (
+    <div className={styles.container} onClick={toggle}
+          style={ theme === "dark" ?
+                 {backgroundColor: "white"}:
+                 {backgroundColor: "#0f172a" }}
+    >
+      <Image src="/moon.png" alt="" width={14} height={14}/>
+      <div className={styles.circle} 
+           style={ theme === "dark" ?
+              {left: 1, backgroundColor: "#0f172a"}:
+              {right:1, backgroundColor: "white"}}>
+      </div>
+      <Image src="/sun.png" alt="" width={14} height={14}/>
+    </div>
+  )
+}
+
+export default ThemeToggle
diff --git a/src/component/themeToggle/themeToggle.module.css b/src/component/themeToggle/themeToggle.module.css
new file mode 100644
index 000000000..b8624e387
--- /dev/null
+++ b/src/component/themeToggle/themeToggle.module.css
@@ -0,0 +1,17 @@
+.container{
+    width: 40px;
+    height: 20px;
+    border-radius: 50px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+}
+
+.circle{
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    position: absolute;
+}
\ No newline at end of file
diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx
new file mode 100644
index 000000000..80c58a87a
--- /dev/null
+++ b/src/context/ThemeContext.jsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { createContext, useEffect, useState } from "react";
+
+
+export const ThemeContext = createContext();
+
+const getFromLocaleStorage = () => {
+if (typeof window !== "undefined"){
+    const value = localStorage.getItem("theme");
+    return value || "light";
+  }
+};
+
+export const ThemeContextProvider = ({children}) =>{
+    const [theme, setTheme] = useState(()=>{
+        return getFromLocaleStorage();
+    });
+
+   const toggle = () => {
+   setTheme(theme === "light" ? "dark": "light")
+   }
+   
+   useEffect(()=>{
+    localStorage.setItem("theme", theme);
+   },[theme]);
+
+    return (
+        <ThemeContext.Provider value={{theme,toggle}}>
+            {children}
+        </ThemeContext.Provider>
+        )
+};