diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..b242572ef
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
+}
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index 767719fc4..00ab48925 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,15 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    images: {
+        remotePatterns: [{
+            protocol: 'https',
+            hostname: "images.pexels.com"
+        }]
 
-module.exports = nextConfig
+
+
+    }
+}
+
+
+module.exports = nextConfig
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d257486b3..1cc393e5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,17 @@
 {
-  "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",
-        "react": "^18",
-        "react-dom": "^18"
+        "link": "^2.1.0",
+        "next": "^14.0.4",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
       },
       "devDependencies": {
         "eslint": "^8",
@@ -2384,6 +2385,17 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/link": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/link/-/link-2.1.0.tgz",
+      "integrity": "sha512-6jgX7ejPBOQaKsFY/9aFEg0HW0JyFuMGDoN+KQX1W94t+8Fi5xwlSlGouRMDqDlrE46drqu4PYduAG7tUwdF7Q==",
+      "bin": {
+        "link": "dist/cli.js"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/link?sponsor=1"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
diff --git a/package.json b/package.json
index 5e94028ed..3674e3a8c 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.4"
+    "link": "^2.1.0",
+    "next": "^14.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "eslint": "^8",
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/(auth)/login/page.jsx b/src/app/(auth)/login/page.jsx
new file mode 100644
index 000000000..65cde80f2
--- /dev/null
+++ b/src/app/(auth)/login/page.jsx
@@ -0,0 +1,6 @@
+const LoginPage = () => {
+return ( 
+    <div className="">LoginPage</div>);
+
+}
+export default LoginPage
\ No newline at end of file
diff --git a/src/app/about/about.module.css b/src/app/about/about.module.css
new file mode 100644
index 000000000..a0ee2848b
--- /dev/null
+++ b/src/app/about/about.module.css
@@ -0,0 +1,60 @@
+.container {
+    display: flex;
+    gap: 100px;
+}
+
+.textContainer {
+    display: flex;
+    flex: 1px;
+    flex-direction: column;
+    gap: 45px;
+}
+
+.title {
+    font-size: 54px;
+    gap: 10px;
+}
+
+.box {
+    display: flex;
+    flex-direction: column;
+}
+
+.box h1 {
+    color: var(--btn);
+}
+
+.desc {
+    font-size: 15px;
+    font-weight: 300;
+}
+
+.subtitle {
+    color: var(--btn);
+}
+
+.imgContainer {
+    flex: 1;
+    position: relative;
+}
+
+.boxes {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.img {
+    object-fit: contain;
+}
+
+@media(max-width: 768px) {
+    .container {
+        flex-direction: column;
+        text-align: center;
+    }
+    .boxes {
+        flex-direction: column;
+        gap: 50px;
+    }
+}
\ 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..6b36849fe
--- /dev/null
+++ b/src/app/about/page.jsx
@@ -0,0 +1,39 @@
+import Image from "next/image";
+import styles from './about.module.css'
+
+const AboutPage = () => {
+return ( 
+    <div className= {styles.container}>
+<div className={styles.textContainer}>
+    <h2 className={styles.subtitle}>About Agency</h2>
+    <h1 className={styles.title}>Life doesn’t require that we be the best, only that we try our best</h1>
+    <p className={styles.desc}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quidem aperiam deserunt autem? Nulla quasi non odio dicta animi repellat natus, ducimus eum quas hic voluptatum vitae, voluptas debitis voluptate.
+    Totam porro sint itaque natus consectetur nostrum modi eaque autem maxime cumque blanditiis obcaecati tempora sapiente sequi molestias, officiis error exercitationem. Obcaecati quia velit reprehenderit quos at, quaerat rerum cumque!
+    Nam fugiat officiis provident.</p>
+    <div className={styles.boxes}>
+<div className={styles.box}>
+    <h1>10 K+</h1>
+    <p>Year of experience</p>
+</div>
+<div className={styles.box}>
+    <h1>10 K+</h1>
+    <p>Year of experience</p>
+</div>
+<div className={styles.box}>
+    <h1>10 K+</h1>
+    <p>Year of experience</p>
+</div>
+</div>
+
+</div>
+
+<div className={styles.imgContainer}>
+<Image src="/about.png" fill alt="About Image" className={styles.img}></Image>
+</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..70cadc76a
--- /dev/null
+++ b/src/app/admin/page.jsx
@@ -0,0 +1,6 @@
+const AdminPage = () => {
+return ( 
+    <div className="">AdminPage</div>);
+
+}
+export default AdminPage
\ No newline at end of file
diff --git a/src/app/blog/[slug]/layout.jsx b/src/app/blog/[slug]/layout.jsx
new file mode 100644
index 000000000..44ae31fd7
--- /dev/null
+++ b/src/app/blog/[slug]/layout.jsx
@@ -0,0 +1,9 @@
+const BlogLayout = ({children}) => {
+    return ( 
+        <div className="">
+            {/* <h2>  This is the Blog Layout</h2> */}
+            {children}
+            </div>
+            )
+    }
+    export default BlogLayout
\ 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..f3709a510
--- /dev/null
+++ b/src/app/blog/[slug]/page.jsx
@@ -0,0 +1,37 @@
+import styles from "./singlePost.module.css";
+import Image from "next/image";
+const SingleBlogPage = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.imgContainer}>
+        <Image
+          src="https://images.pexels.com/photos/15580802/pexels-photo-15580802/free-photo-of-woman-holding-flowers-and-looking-at-her-boyfriend.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+          fill
+          className={styles.img}
+        ></Image>
+      </div>
+      <div className={styles.textContainer}>
+        <h1 className={styles.title}>Title</h1>
+        <div className={styles.detail}>
+          <Image
+            src="https://images.pexels.com/photos/7490540/pexels-photo-7490540.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+            width={50} height={50}
+            className={styles.avatar}
+          ></Image>
+          <div className={styles.detailText}>
+            <span className={styles.detailTitle}>Author</span>
+            <span className={styles.detailValue}>John Weasley</span>
+          </div>
+          <div className={styles.detailText}>
+            <span className={styles.detailTitle}>Published</span>
+            <span className={styles.detailValue}>01.01.2024</span>
+          </div>
+        </div>
+        <div className={styles.content}>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum adipisci quasi laboriosam ullam ipsum blanditiis harum sunt sequi dolorem odit? Veniam illo non aliquam odit ea. Praesentium quibusdam laudantium hic.
+          </div>
+      </div>
+    </div>
+  );
+};
+export default SingleBlogPage;
diff --git a/src/app/blog/[slug]/singlePost.module.css b/src/app/blog/[slug]/singlePost.module.css
new file mode 100644
index 000000000..52a5e4e6c
--- /dev/null
+++ b/src/app/blog/[slug]/singlePost.module.css
@@ -0,0 +1,61 @@
+.container {
+    display: flex;
+    gap: 100px;
+}
+
+.img {
+    object-fit: cover;
+}
+
+.imgContainer {
+    flex: 1;
+    position: relative;
+    /* height: calc(100vh - 200px); */
+}
+
+.textContainer {
+    flex: 2;
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+}
+
+.title {
+    font-size: 54px;
+}
+
+.detail {
+    display: flex;
+    /* flex-direction: column; */
+    gap: 20px;
+}
+
+.avatar {
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.detailText {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.detailTitle {
+    color: gray;
+    font-weight: bold;
+}
+
+.detailValue {
+    font-weight: 500;
+}
+
+.content {
+    font-size: 20px;
+}
+
+@media (max-width: 768px) {
+    .imgContainer {
+        display: none;
+    }
+}
\ 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..74e0a6816
--- /dev/null
+++ b/src/app/blog/blog.module.css
@@ -0,0 +1,21 @@
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.post {
+    width: 20%;
+}
+
+@media screen and (max-width: 1280px) {
+    .post {
+        width: 45%;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .post {
+        width: 100%;
+    }
+}
\ 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..3944f1be8
--- /dev/null
+++ b/src/app/blog/page.jsx
@@ -0,0 +1,24 @@
+import PostCard from "@/components/postCard/postCard";
+import styles from "./blog.module.css";
+const BlogPage = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.post}>
+      <PostCard></PostCard>
+      </div>
+      <div className={styles.post}>
+      <PostCard></PostCard>
+      </div>
+      <div className={styles.post}>
+      <PostCard></PostCard>
+      </div>
+      <div className={styles.post}>
+      <PostCard></PostCard>
+      </div>
+      <div className={styles.post}>
+      <PostCard></PostCard>
+      </div>
+    </div>
+  );
+};
+export default BlogPage;
diff --git a/src/app/contact/contact.module.css b/src/app/contact/contact.module.css
new file mode 100644
index 000000000..036589a97
--- /dev/null
+++ b/src/app/contact/contact.module.css
@@ -0,0 +1,50 @@
+.container {
+    display: flex;
+    align-items: center;
+    gap: 100px;
+}
+
+.imgContainer {
+    flex: 1;
+    position: relative;
+    height: 500px;
+}
+
+.img {
+    object-fit: content;
+}
+
+.formContainer {
+    flex: 1;
+}
+
+.form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.form input,
+.form textarea {
+    padding: 15px;
+    border-radius: 5px;
+    border: none;
+    outline: none;
+    color: var(--textSoft);
+    background-color: var(--bgSoft);
+}
+
+.form button {
+    padding: 15px;
+    background-color: var(--btn);
+    color: var(--text);
+    border-radius: 5px;
+    border: none;
+    cursor: pointer;
+}
+
+@media(max-width: 760px) {
+    .container {
+        flex-direction: column;
+    }
+}
\ 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..885ed1ce9
--- /dev/null
+++ b/src/app/contact/page.jsx
@@ -0,0 +1,22 @@
+import styles from "./contact.module.css"
+import Image  from 'next/image';
+const ContactPage = () => {
+return ( 
+    <div className={styles.container}>
+         <div className={styles.imgContainer}> 
+         <Image src="/contact.png" fill alt="Contact Image" className={styles.img}/>
+         </div>
+         <div className={styles.formContainer}>
+            <form action="" className={styles.form}>
+                <input type="text" placeholder="Name and Surname"/>
+                <input type="text" placeholder="Email and Address"/>
+                <input type="text" placeholder="Phone Number {Optional}"/>
+                <textarea name="" id="" 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..c43992ca5
--- /dev/null
+++ b/src/app/error.jsx
@@ -0,0 +1,6 @@
+"use client"
+const Error = () => {
+    return (<div>Error</div>);
+  }
+  
+  export default Error;
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index e69de29bb..94c1a6c84 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -0,0 +1,79 @@
+:root {
+    --bg: rgb(25, 11, 64);
+    --bgSoft: #2d2b42;
+    --text: white;
+    --textSoft: #e5e5e5;
+    --btn: #3663fd;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--bg);
+    color: var(--text);
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.container {
+    /* background-color: rgb(25, 11, 64); */
+    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-right: 20px;
+        padding-left: 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..0ecb132bb
--- /dev/null
+++ b/src/app/home.module.css
@@ -0,0 +1,61 @@
+.container {
+    display: flex;
+    gap: 100px;
+}
+
+.textContainer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+}
+
+.brands {
+    width: 500px;
+    height: 50px;
+    position: relative;
+    filter: grayscale(1);
+}
+
+.imgContainer {
+    flex: 1;
+    position: relative;
+    /* background-color: none; */
+}
+
+.title {
+    font-size: 69px;
+}
+
+.desc {
+    font-size: 15px;
+}
+
+.buttons {
+    display: flex;
+    gap: 20px;
+}
+
+.button:first-child {
+    background-color: var(--btn);
+    color: var(--text);
+}
+
+.button {
+    padding: 15px;
+    min-width: 120px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+@media(max-width: 1024px) {
+    .container {
+        flex-direction: column;
+        text-align: center;
+    }
+    .boxes {
+        flex-direction: column;
+        gap: 50px;
+    }
+}
\ No newline at end of file
diff --git a/src/app/layout.js b/src/app/layout.js
index e680e139d..b20f258a2 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,17 +1,25 @@
 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'] })
 
 export const metadata = {
-  title: 'Next App',
-  description: 'Next.js starter app',
+    title: 'Next App',
+    description: 'Next.js starter app',
 }
 
 export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
+    return (
+        <html lang="en">
+            <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..bbd421d61
--- /dev/null
+++ b/src/app/loading.jsx
@@ -0,0 +1,5 @@
+const Loading = () => {
+  return <div>Loading</div>;
+};
+
+export default Loading;
diff --git a/src/app/not-found.jsx b/src/app/not-found.jsx
new file mode 100644
index 000000000..a583228da
--- /dev/null
+++ b/src/app/not-found.jsx
@@ -0,0 +1,14 @@
+import Link from 'next/link'
+const NotFound = () => {
+    return (
+    <div>
+        <h2>Not Found
+        </h2>
+        <p>Sorry, The page you are looking for does not exist.
+        </p>
+        <Link href={"/"}>Return HomePage</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..284012b23 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -1,5 +1,27 @@
+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}>
+          Your success and happiness lies in you. Resolve to keep happy, and
+          your joy and you shall form an invincible host against difficulties.
+        </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" fill className={styles.brandsImg} />
+        </div>
+      </div>
+      <div className={styles.imgContainer}>
+        <Image src="/hero.gif" fill className={styles.heroImg} />
+      </div>
+    </div>
+  );
 };
 
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
new file mode 100644
index 000000000..95efa1553
--- /dev/null
+++ b/src/components/footer/Footer.jsx
@@ -0,0 +1,13 @@
+import styles from "./footer.module.css";
+const Footer = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.logo}>Lamdev</div>
+      <div className={styles.text}>
+        Lam creative thoughts agency &copy All right reserved.
+      </div>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/src/components/footer/footer.module.css b/src/components/footer/footer.module.css
new file mode 100644
index 000000000..3a0185ff8
--- /dev/null
+++ b/src/components/footer/footer.module.css
@@ -0,0 +1,23 @@
+.container {
+    display: flex;
+    justify-content: space-between;
+    height: 100px;
+    align-items: center;
+    color: gray;
+}
+
+.logo {
+    font-weight: bold;
+}
+
+.text {
+    font-size: 12px;
+}
+
+@media (max-width: 768px) {
+    .container {
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+    }
+}
\ 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..52c93e30d
--- /dev/null
+++ b/src/components/navbar/Navbar.jsx
@@ -0,0 +1,17 @@
+import Links from  "./links/Links"
+import styles from "./navbar.module.css"
+import Link from "next/link"
+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/links/Links.jsx b/src/components/navbar/links/Links.jsx
new file mode 100644
index 000000000..3dafed264
--- /dev/null
+++ b/src/components/navbar/links/Links.jsx
@@ -0,0 +1,61 @@
+// import Link from "next/link"
+"use client";
+import { useState } from "react";
+import styles from "./link.module.css"
+import NavLink from "./navLink/navLink";
+import Image from "next/image";
+const links = [
+
+    {title: "HomePage", 
+        path: "/",
+    },
+    
+    {title: "About",
+        path: "/about",
+    },
+    
+    {   title: "Contact",
+        path: "/contact",
+    },
+    {
+        title: "Blog",
+        path: "/blog",
+    },
+        ];
+    
+        
+const Links = () => {
+    const [open,setOpen] = useState(false);
+   
+       
+// temporary 
+const session = true;
+const isAdmin = false;
+
+    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>
+        <Image className={styles.menuButton} src="/menu.png" alt="" width={30} height={30} onClick={()=> setOpen((prev) => !prev)}></Image>
+        {
+    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/links/link.module.css b/src/components/navbar/links/link.module.css
new file mode 100644
index 000000000..ff069173d
--- /dev/null
+++ b/src/components/navbar/links/link.module.css
@@ -0,0 +1,44 @@
+.links {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.logout {
+    padding: 10px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.mobileLinks {
+    display: none;
+}
+
+.menuButton {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .links {
+        display: none;
+    }
+    .menuButton {
+        display: block;
+        cursor: pointer;
+    }
+    .mobileLinks {
+        position: absolute;
+        top: 100px;
+        right: 0;
+        width: 50%;
+        height: calc(100vh - 100px);
+        background-color: var(--bg);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        /* overflow: hidden;
+        transition: height 0.5s ease-in-out; */
+    }
+}
\ No newline at end of file
diff --git a/src/components/navbar/links/navLink/navLink.jsx b/src/components/navbar/links/navLink/navLink.jsx
new file mode 100644
index 000000000..db5acbd5b
--- /dev/null
+++ b/src/components/navbar/links/navLink/navLink.jsx
@@ -0,0 +1,16 @@
+"use client";
+import { usePathname } from "next/navigation";
+import styles from "./navLink.module.css";
+import Link from "next/link";
+
+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/links/navLink/navLink.module.css b/src/components/navbar/links/navLink/navLink.module.css
new file mode 100644
index 000000000..86a71133e
--- /dev/null
+++ b/src/components/navbar/links/navLink/navLink.module.css
@@ -0,0 +1,20 @@
+/* :root {
+    --bg: #0d0c22;
+    --bgSoft: #2d2b42;
+    --text: white;
+    --textSoft: #e5e5e5;
+    --btn: #3663fd;
+} */
+
+.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..adfa535f6
--- /dev/null
+++ b/src/components/navbar/navbar.module.css
@@ -0,0 +1,13 @@
+.container {
+    /* background-color: rgb(115, 115, 216);
+     */
+    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..bc8fd305f
--- /dev/null
+++ b/src/components/postCard/postCard.jsx
@@ -0,0 +1,22 @@
+import styles from "./postCard.module.css";
+import Image from "next/image";
+import Link from "next/link";
+
+const PostCard = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.top}>
+        <div className={styles.imgContainer}>
+          <Image src="https://images.pexels.com/photos/5391172/pexels-photo-5391172.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" fill className={styles.img} />
+        </div>
+        <span className={styles.date}>20.01.2024</span>
+      </div>
+      <div className={styles.bottom}>
+        <h1 className={styles.title}>Title</h1>
+        <p className={styles.desc}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi vel numquam dolorem laborum rerum odio autem nemo quisquam quidem fuga repellat ducimus eveniet accusantium, laboriosam iusto est inventore doloribus obcaecati.</p>
+        <Link className={styles.link} href="/blog/post">READ MORE</Link>
+      </div>
+    </div>
+  );
+};
+export default PostCard;
diff --git a/src/components/postCard/postCard.module.css b/src/components/postCard/postCard.module.css
new file mode 100644
index 000000000..8f40ebf22
--- /dev/null
+++ b/src/components/postCard/postCard.module.css
@@ -0,0 +1,43 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.top {
+    display: flex;
+}
+
+.imgContainer {
+    width: 900px;
+    height: 400px;
+    position: relative;
+}
+
+.img {
+    object-fit: cover;
+}
+
+.date {
+    font-size: 12px;
+    transform: rotate(270deg);
+    margin: auto;
+}
+
+.title {
+    font-size: 24px;
+    margin-bottom: 20px;
+    width: 90%;
+}
+
+.desc {
+    margin-bottom: 20px;
+    font-weight: 300;
+    color: gray;
+    width: 90%;
+}
+
+.link {
+    text-decoration: underline;
+}
\ No newline at end of file