diff --git a/next.config.js b/next.config.js
index 3176fc1..1f9211d 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,9 +1,8 @@
-const withMDX = require('@next/mdx')();
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: "export",
-    images: { unoptimized: true }
+    images: {
+    domains: ['tetragram.codered.cloud'],
+  },
 }
 
-module.exports = nextConfig;
+module.exports = nextConfig
\ No newline at end of file
diff --git a/public/man-avatar-clipart-illustration-free-png.webp b/public/man-avatar-clipart-illustration-free-png.webp
new file mode 100644
index 0000000..19352e2
Binary files /dev/null and b/public/man-avatar-clipart-illustration-free-png.webp differ
diff --git a/src/app/blogs/Blogcard.js b/src/app/blogs/Blogcard.js
index 52faa12..89e016a 100644
--- a/src/app/blogs/Blogcard.js
+++ b/src/app/blogs/Blogcard.js
@@ -1,5 +1,28 @@
+// src/components/BlogCard.js
+/*import Link from 'next/link';
+import styles from './Blogcard.module.css'; // Use CSS modules for styles
+
+const BlogCard = ({ title, blogLink}) => {
+  //const truncatedDescription = description.length > 100 ? `${description.slice(0, 100)}...` : description;
+
+  return (
+    <div className={styles.blogcontainer}>
+      <div className={styles.blogCard}>
+        <div className={styles.blogDetails}>
+          <h2 className={styles.head}>{title}</h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BlogCard;
+
+// src/components/BlogCard.js*/
+
+// src/components/BlogCard.js
 import Link from 'next/link';
-//import Image from 'next/image';
+import Image from 'next/image';
 import styles from './Blogcard.module.css'; // Use CSS modules for styles
 
 const BlogCard = ({ title, authors, img, description, slug, date }) => {
@@ -21,5 +44,3 @@ const BlogCard = ({ title, authors, img, description, slug, date }) => {
 };
 
 export default BlogCard;
-
-// src/components/BlogCard.js
\ No newline at end of file
diff --git a/src/app/blogs/[blogid]/page.js b/src/app/blogs/[blogid]/page.js
new file mode 100644
index 0000000..ff4d631
--- /dev/null
+++ b/src/app/blogs/[blogid]/page.js
@@ -0,0 +1,63 @@
+// Import necessary modules
+"use client"
+import { useEffect, useState } from "react";
+import Navbar from "@/components/Navbar/Navbar";
+import Footer from "@/components/footer";
+import ReactMarkdown from "react-markdown";
+import './styleblog.css'
+// Import Tailwind CSS classes
+import 'tailwindcss/tailwind.css';
+
+// Component definition
+const BlogId = ({ params }) => {
+  console.log(params.blogid)
+  // State to store the fetched data
+  const [blogData, setBlogData] = useState(null);
+
+  // Effect to fetch data when the component mounts
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // Fetch data from the API
+        const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=blog.BlogPage&fields=*');
+        const data = await response.json();
+        console.log("check",data);
+        // Find the blog post with the matching id
+        const matchingBlog = data.items.find(blog => blog.id === parseInt(params.blogid));
+        
+        // Update the state with the matching blog data
+        setBlogData(matchingBlog);
+        console.log("blog :",matchingBlog.blog_img_url)
+
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    // Call the fetchData function
+    fetchData();
+  }, [params.id]); // Include params.id in the dependency array to refetch data when id changes
+
+  // Render the component
+  return (
+    <>
+  
+    <div className="min-h-screen bg-rose-100 flex items-center justify-center">
+    
+      <div className="max-w-4xl w-full">
+        {blogData ? (
+          <div>
+            <h2 className=" mb-2 text-center blogstyle">{blogData.title}</h2>
+          <ReactMarkdown className="prose pt-3  text-black blogbody p-8 rounded-md shadow-xl z-10">{blogData.blog_body}</ReactMarkdown>
+          </div>
+        ) : (
+          <p>Loading...</p>
+        )}
+      </div>
+    </div>
+    <Footer /></>
+  );
+};
+
+// Export the component
+export default BlogId;
diff --git a/src/app/blogs/[blogid]/styleblog.css b/src/app/blogs/[blogid]/styleblog.css
new file mode 100644
index 0000000..63a057a
--- /dev/null
+++ b/src/app/blogs/[blogid]/styleblog.css
@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Crimson+Text:ital,wght@1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@900&display=swap');
+
+.blogstyle {
+    font-family: "Montserrat", sans-serif;
+    font-size: 50px;
+    font-weight: bold;
+    font-style: normal;
+    letter-spacing: 0;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    margin-top: 5.4rem;
+}
+
+.blogbody{
+    font-family: "Montserrat", sans-serif;
+
+}
\ No newline at end of file
diff --git a/src/app/blogs/page.js b/src/app/blogs/page.js
index 5e1c7b6..ed108a8 100644
--- a/src/app/blogs/page.js
+++ b/src/app/blogs/page.js
@@ -1,6 +1,39 @@
+/*import BlogCard from './Blogcard';
+import Navbar from "@/components/Navbar/Navbar";
+
+const BlogList = () => {
+  return (
+    <div>
+     <Navbar />
+     <BlogCard 
+       title="React Blogging App"
+       blogger="John Doe"
+       Img="./blog.png"
+       blogLink="https://example.com/blog-post"
+       description="A simple React.js app for creating and managing blog posts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+     />
+     <BlogCard 
+       title="React Blogging App"
+       blogger="John Doe"
+       blogLink="https://example.com/blog-post"
+       description="A simple React.js app for creating and managing blog posts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+     />
+     <BlogCard 
+       title="React Blogging App"
+       blogger="John Doe"
+       blogLink="https://example.com/blog-post"
+       description="A simple React.js app for creating and managing blog posts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+     />
+     </div>
+  );
+};
+
+export default BlogList;*/
+
 "use client"
 import React, { useEffect, useState } from 'react';
 import BlogCard from './Blogcard';
+import Footer from '@/components/footer';
 import Navbar from "@/components/Navbar/Navbar";
 import {
   Card,
@@ -13,13 +46,14 @@ import {
 
 const BlogList = () => {
   const [blogs, setBlogs] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const blogsPerPage = 6;
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=blog.BlogPage&fields=*');
         const data = await response.json();
-        console.log(data.items)
         setBlogs(data.items);
       } catch (error) {
         console.error('Error fetching data:', error);
@@ -29,6 +63,16 @@ const BlogList = () => {
     fetchData();
   }, []);
 
+  // Calculate the index range for the current page
+  const indexOfLastBlog = currentPage * blogsPerPage;
+  const indexOfFirstBlog = indexOfLastBlog - blogsPerPage;
+  const currentBlogs = blogs.slice(indexOfFirstBlog, indexOfLastBlog);
+
+  // Function to handle page change
+  const handlePageChange = (newPage) => {
+    setCurrentPage(newPage);
+  };
+
   return (
     <>
       <div className='mt-4 py-4 p-5 md:p-10 md:py-4 grid gap-5 grid-cols-1 md:grid-cols-2 xl:p-20 xl:py-4 lg:grid-cols-3'>
diff --git a/src/app/team/man-avatar-clipart-illustration-free-png.webp b/src/app/team/man-avatar-clipart-illustration-free-png.webp
new file mode 100644
index 0000000..19352e2
Binary files /dev/null and b/src/app/team/man-avatar-clipart-illustration-free-png.webp differ
diff --git a/src/app/team/page.js b/src/app/team/page.js
new file mode 100644
index 0000000..d5836ac
--- /dev/null
+++ b/src/app/team/page.js
@@ -0,0 +1,158 @@
+/*import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebook, faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons';
+import Image from 'next/image';
+
+const Home = () => {
+  return (
+    <div className="p-0 m-0 box-border font-Poppins">
+    <div className="bg-blue-700 min-h-screen flex items-center justify-center">
+      <div className="relative w-220 h-220 bg-white p-30 rounded-full shadow-lg transition-all duration-400 m-0 20px border-10 hover:border-10 hover:h-260">
+        <div className="w-full h-full relative hover:border-10 hover:-translate-y-70">
+            <Image
+              src="/man-avatar-clipart-illustration-free-png.webp"
+              alt="Profile"
+              width={128}
+              height={128}
+              className="object-fill w-full border-0 transition-all duration-400 rounded-full z-99 "
+            />
+          </div>
+        <div className="text-center transform -translate-y-90 opacity-0 pointer-events-none transition-all duration-500 hover:opacity-100 hover:pointer-events-all">
+          <h3 className="text-21 font-semibold text-blue-700">Tom Cruise</h3>
+          <p className="text-15 font-medium mb-12">Full Stack Developer</p>
+          <div className="social-links">
+            <FontAwesomeIcon className="text-21 mx-3 cursor-pointer text-gray-700 transition-all duration-400 hover:text-blue-700" icon={faFacebook} size="2x"  />
+            <FontAwesomeIcon className="text-21 mx-3 cursor-pointer text-gray-700 transition-all duration-400 hover:text-blue-700" icon={faTwitter} size="2x"  />
+            <FontAwesomeIcon className="text-21 mx-3 cursor-pointer text-gray-700 transition-all duration-400 hover:text-blue-700" icon={faInstagram} size="2x"  />
+          </div>
+        </div>
+      </div>
+ 
+      </div></div>
+  );
+};
+
+export default Home;
+
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebook, faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons';
+import Image from 'next/image';
+
+const Home = () => {
+  const teamMembers = [
+    { name: 'Tom Cruise', role: 'Full Stack Developer' },
+    { name: 'John Doe', role: 'Frontend Developer' },
+    { name: 'Jane Doe', role: 'Backend Developer' },
+    { name: 'Alice Smith', role: 'UI/UX Designer' },
+    { name: 'Bob Johnson', role: 'Data Scientist' },
+    { name: 'Eve White', role: 'DevOps Engineer' },
+    // Add more team members here
+  ];
+
+  return (
+    <div className="p-0 m-0 box-border font-Poppins">
+      <div className="home-container bg-blue-700 min-h-screen flex items-center justify-center">
+        <div className="flex flex-wrap justify-center">
+          {teamMembers.map((member, index) => (
+            <div
+              key={index}
+              className="profile-card relative w-64 h-140 bg-white p-6 rounded-full shadow-lg transition-all duration-400 border-4 hover:border-0 hover:h-140 hover:w-140 text-center mb-8 mx-4"
+            >
+              <div className="img w-32 h-32 mx-auto mb-4 relative group-hover:-translate-y-8 group-hover:scale-105">
+                <Image
+                  src="/man-avatar-clipart-illustration-free-png.webp"
+                  alt="Profile"
+                  width={128}
+                  height={128}
+                  className="object-fill w-full border-0 transition-all duration-400 rounded-full z-99"
+                />
+              </div>
+              <div className="caption">
+                <h3 className="text-xl font-semibold text-blue-700 mb-1">{member.name}</h3>
+                <p className="text-sm font-medium mb-2">{member.role}</p>
+                <div className="social-links flex justify-center opacity-0 group-hover:opacity-100 transition-all duration-400">
+                  <FontAwesomeIcon style={{ width: '30px', height: '30px' }} className="mx-1 cursor-pointer text-gray-700 transition-all duration-400 group-hover:text-blue-700" icon={faFacebook} />
+                  <FontAwesomeIcon style={{ width: '30px', height: '30px' }} className="mx-1 cursor-pointer text-gray-700 transition-all duration-400 group-hover:text-blue-700" icon={faTwitter} />
+                  <FontAwesomeIcon style={{ width: '30px', height: '30px' }} className="mx-1 cursor-pointer text-gray-700 transition-all duration-400 group-hover:text-blue-700" icon={faInstagram} />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;
+*/
+"use client"
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Navbar from '@/components/Navbar/Navbar';
+import Footer from '@/components/footer';
+import './styles.css'
+import { faFacebook, faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons';
+import Image from 'next/image';
+
+const Home = () => {
+  const teamMembers = [
+    { name: 'Tom Cruise', role: 'Full Stack Developer' },
+    { name: 'John Doe', role: 'Frontend Developer' },
+    { name: 'Jane Doe', role: 'Backend Developer' },
+    { name: 'Alice Smith', role: 'UI/UX Designer' },
+    { name: 'Bob Johnson', role: 'Data Scientist' },
+    { name: 'Eve White', role: 'DevOps Engineer' },
+    // Add more team members here
+  ];
+
+  return (
+    <>
+    <div className="p-0 m-0 box-border font-Poppins bg-white">
+      <br></br>
+      <div className="home-container bg-b5179e-700 min-h-screen flex items-center justify-center">
+        <div className="flex flex-wrap justify-center">
+          {teamMembers.map((member, index) => (
+            <div
+              key={index}
+              className="profile-card relative w-64 h-140 bg-white p-6 border-4 border--500 rounded-lg shadow-lg transition-all duration-400 hover:border-0 hover:h-140 hover:w-140 text-center mb-8 mx-4 group"
+            >
+              <div className="img w-32 h-32 mx-auto mb-4 relative group-hover:-translate-y-5 group-hover:scale-105">
+                <Image
+                  src="/man-avatar-clipart-illustration-free-png.webp"
+                  alt="Profile"
+                  width={128}
+                  height={128}
+                  className="object-fill w-full border-0 transition-all duration-400 rounded-full z-99"
+                />
+              </div>
+              <div className="caption">
+                <h3 className="text-xl font-semibold custom-text-color text-700 mb-1">{member.name}</h3>
+                <p className="text-sm font-semibold  mb-2">{member.role}</p>
+                <div className="social-links flex justify-center opacity-0 group-hover:opacity-100 transition-all duration-400">
+                  <FontAwesomeIcon
+                    style={{ width: '30px', height: '30px' }}
+                    className="mx-1 cursor-pointer text-gray-700 transition-all duration-400 group-hover:text-[#A9009D]-700"
+                    icon={faFacebook}
+                  />
+                  <FontAwesomeIcon
+                    style={{ width: '30px', height: '30px' }}
+                    className="mx-1 cursor-pointer text-gray-700 transition-all duration-400 group-hover:text-[#A9009D]-700"
+                    icon={faTwitter}
+                  />
+                  <FontAwesomeIcon
+                    style={{ width: '30px', height: '30px' }}
+                    className="mx-1 cursor-pointer text-gray-700 transition-all duration-400 group-hover:text-[#A9009D]-700"
+                    icon={faInstagram}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div><Footer /></>
+  );
+};
+
+export default Home;
+
diff --git a/src/app/team/styles.css b/src/app/team/styles.css
new file mode 100644
index 0000000..513736a
--- /dev/null
+++ b/src/app/team/styles.css
@@ -0,0 +1,3 @@
+.custom-text-color{
+    color: #A8019Dff
+}
\ No newline at end of file
diff --git a/src/app/team/th.jpeg b/src/app/team/th.jpeg
new file mode 100644
index 0000000..9aa5eda
Binary files /dev/null and b/src/app/team/th.jpeg differ