diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7f29cc3..05f76dc 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -14,6 +14,10 @@ import WriteBlog from "./Pages/WriteBlog";
 import ReadBlog from "./Pages/ReadBlog";
 import MyBlogsPage from "./Pages/MyBlogsPage";
 import EditBlog from "./Pages/EditBlog";
+import PostFeature from "./Pages/PostFeature";
+import ProjectPage from "./Pages/ProjectPage";
+
+
 
 function App() {
   const [currentUser, setCurrentUser] = useState<{ _id: string } | null>(null);
@@ -49,7 +53,11 @@ function App() {
         <Route path="/my-blogs" element={<MyBlogsPage />} />
         <Route path="/write-blog" element={<WriteBlog />} />
         <Route path="/edit-blog/:blogId" element={<EditBlog />} />
+        <Route path="/post-project" element={<PostFeature />} />
+        <Route path="/projects" element={<ProjectPage />} />
       </Routes>
+
+
     </>
   );
 }
diff --git a/frontend/src/Pages/PostFeature.tsx b/frontend/src/Pages/PostFeature.tsx
new file mode 100644
index 0000000..30d80f3
--- /dev/null
+++ b/frontend/src/Pages/PostFeature.tsx
@@ -0,0 +1,202 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, X, AlertCircle, Github, ExternalLink } from 'lucide-react';
+import Navbar from '../components/NavBar';
+import Footer from '../components/Footer';
+
+const PostFeature = () => {
+    const navigate = useNavigate();
+    const [title, setTitle] = useState('');
+    const [description, setDescription] = useState('');
+    const [githubLink, setGithubLink] = useState('');
+    const [liveLink, setLiveLink] = useState('');
+    const [tags, setTags] = useState<string[]>([]);
+    const [currentTag, setCurrentTag] = useState('');
+    const [error, setError] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const handleTagKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            if (currentTag.trim() && tags.length < 6 && !tags.includes(currentTag.trim())) {
+                setTags([...tags, currentTag.trim()]);
+                setCurrentTag('');
+            }
+        } else if (e.key === 'Backspace' && !currentTag && tags.length > 0) {
+            setTags(tags.slice(0, -1));
+        }
+    };
+
+    const removeTag = (tagToRemove: string) => {
+        setTags(tags.filter(tag => tag !== tagToRemove));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError('');
+
+        if (!title || !description || !githubLink) {
+            setError('Please fill in all required fields (Title, Description, Github Link)');
+            return;
+        }
+
+        setIsSubmitting(true);
+
+        try {
+            const response = await fetch('/api/project/post', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    title,
+                    description,
+                    tags,
+                    githubLink,
+                    liveLink,
+                }),
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.message || 'Failed to post project');
+            }
+
+            navigate('/'); // Navigate to home or projects page
+        } catch (err: any) {
+            setError(err.message || 'Something went wrong');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen bg-[#060010] text-[#c9d1d9] selection:bg-white selection:text-black">
+            <Navbar />
+
+            <div className="pt-32 pb-32">
+                <div className="max-w-4xl mx-auto px-6 lg:px-12">
+                    {/* Header */}
+                    <div className="flex justify-between items-center mb-12">
+                        <button
+                            onClick={() => navigate(-1)}
+                            className="flex items-center gap-2 text-[#8b949e] hover:text-white transition-colors group"
+                        >
+                            <ArrowLeft size={18} className="group-hover:-translate-x-1 transition-transform" />
+                            <span className="font-mono uppercase text-xs tracking-wider">Back</span>
+                        </button>
+                    </div>
+
+                    <form onSubmit={handleSubmit} className="space-y-12">
+                        {error && (
+                            <div className="bg-red-500/5 border border-red-500/20 text-red-400 p-4 font-mono text-xs flex items-center gap-3">
+                                <AlertCircle size={14} />
+                                <span>ERROR: {error}</span>
+                            </div>
+                        )}
+
+                        <div className="space-y-8">
+                            {/* Title Input */}
+                            <div className="space-y-2">
+                                <label className="text-[10px] font-mono text-[#8b949e] uppercase tracking-[0.2em] block ml-1">Project Title</label>
+                                <input
+                                    type="text"
+                                    value={title}
+                                    onChange={(e) => setTitle(e.target.value)}
+                                    placeholder="MY_AWESOME_PROJECT"
+                                    className="w-full bg-transparent border-b border-[#30363d] text-white text-4xl md:text-6xl font-extrabold pb-4 focus:outline-none focus:border-[#00ffff] transition-colors placeholder:text-[#30363d]"
+                                />
+                            </div>
+
+                            {/* Description Input */}
+                            <div className="space-y-2">
+                                <label className="text-[10px] font-mono text-[#8b949e] uppercase tracking-[0.2em] block ml-1">Description</label>
+                                <textarea
+                                    value={description}
+                                    onChange={(e) => setDescription(e.target.value)}
+                                    placeholder="Explain your project scope, tech stack, and features..."
+                                    className="w-full bg-transparent text-[#c9d1d9] text-xl md:text-2xl font-light p-4 h-40 resize-none focus:outline-none placeholder:text-[#30363d] leading-relaxed border-l-2 border-[#30363d] focus:border-[#00ffff] transition-colors scrollbar-hide"
+                                />
+                            </div>
+
+                            {/* Links Grid */}
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                                <div className="space-y-2">
+                                    <label className="text-[10px] font-mono text-[#8b949e] uppercase tracking-[0.2em] block ml-1 flex items-center gap-2">
+                                        <Github size={12} /> Github Repository
+                                    </label>
+                                    <input
+                                        type="url"
+                                        value={githubLink}
+                                        onChange={(e) => setGithubLink(e.target.value)}
+                                        placeholder="https://github.com/user/repo"
+                                        className="w-full bg-[#080212] border border-[#30363d] text-white p-4 font-mono text-base focus:outline-none focus:border-[#00ffff] transition-colors placeholder:text-[#30363d] rounded"
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    <label className="text-[10px] font-mono text-[#8b949e] uppercase tracking-[0.2em] block ml-1 flex items-center gap-2">
+                                        <ExternalLink size={12} /> Live Demo (Optional)
+                                    </label>
+                                    <input
+                                        type="url"
+                                        value={liveLink}
+                                        onChange={(e) => setLiveLink(e.target.value)}
+                                        placeholder="https://project.vercel.app"
+                                        className="w-full bg-[#080212] border border-[#30363d] text-white p-4 font-mono text-base focus:outline-none focus:border-[#00ffff] transition-colors placeholder:text-[#30363d] rounded"
+                                    />
+                                </div>
+                            </div>
+
+                            {/* Tags */}
+                            <div className="space-y-2">
+                                <label className="text-[10px] font-mono text-[#8b949e] uppercase tracking-[0.2em] block ml-1">Tags [{tags.length}/6]</label>
+                                <div className="flex flex-wrap gap-2 p-3 bg-[#080212] border border-[#30363d] rounded min-h-[50px]">
+                                    {tags.map(tag => (
+                                        <span key={tag} className="flex items-center gap-2 bg-[#161b22] border border-[#30363d] text-[#00ffff] px-3 py-1 text-[10px] font-mono uppercase tracking-wider">
+                                            {tag}
+                                            <button type="button" onClick={() => removeTag(tag)} className="hover:text-white"><X size={10} /></button>
+                                        </span>
+                                    ))}
+                                    {tags.length < 6 && (
+                                        <input
+                                            type="text"
+                                            value={currentTag}
+                                            onChange={(e) => setCurrentTag(e.target.value)}
+                                            onKeyDown={handleTagKeyDown}
+                                            placeholder="Press Enter to add tags..."
+                                            className="bg-transparent border-none text-xs font-mono uppercase focus:outline-none flex-grow py-2 placeholder:text-[#30363d]"
+                                        />
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="flex justify-end pt-8">
+                            <button
+                                type="submit"
+                                disabled={isSubmitting}
+                                className="px-8 py-4 bg-transparent border border-[#00ffff] text-[#00ffff] font-mono uppercase tracking-widest text-xs hover:bg-[#00ffff] hover:text-[#060010] transition-all disabled:opacity-50 disabled:cursor-not-allowed group flex items-center gap-3"
+                            >
+                                {isSubmitting ? (
+                                    <>
+                                        <div className="w-3 h-3 border-2 border-[#060010] border-t-transparent rounded-full animate-spin"></div>
+                                        Processing...
+                                    </>
+                                ) : (
+                                    <>
+                                        Publish Project
+                                        <ArrowLeft size={16} className="rotate-180 group-hover:translate-x-1 transition-transform" />
+                                    </>
+                                )}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <Footer />
+        </div>
+    );
+};
+
+export default PostFeature;
diff --git a/frontend/src/Pages/ProjectPage.tsx b/frontend/src/Pages/ProjectPage.tsx
new file mode 100644
index 0000000..b17c067
--- /dev/null
+++ b/frontend/src/Pages/ProjectPage.tsx
@@ -0,0 +1,188 @@
+import { useState, useEffect } from 'react';
+import { ArrowUpRight, Search, Github, ExternalLink, Rocket } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import Navbar from '../components/NavBar';
+import Footer from '../components/Footer';
+
+interface Project {
+    _id: string;
+    title: string;
+    description: string;
+    tags: string[];
+    githubLink: string;
+    liveLink: string;
+    createdAt?: string;
+    user?: any;
+    color?: string;
+}
+
+const ProjectPage = () => {
+    const navigate = useNavigate();
+    const [searchQuery, setSearchQuery] = useState('');
+    const [projects, setProjects] = useState<Project[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    const getRandomColor = () => {
+        const colors = ['#00ffff', '#00ff00', '#ff0080', '#ffff00', '#ff00ff', '#FFA500'];
+        return colors[Math.floor(Math.random() * colors.length)];
+    };
+
+    useEffect(() => {
+        const fetchProjects = async () => {
+            try {
+                const response = await fetch('/api/project');
+                const data = await response.json();
+
+                if (Array.isArray(data)) {
+                    setProjects(data.map(proj => ({
+                        ...proj,
+                        color: getRandomColor()
+                    })));
+                } else if (data && Array.isArray(data.projects)) {
+                    setProjects(data.projects.map((proj: any) => ({
+                        ...proj,
+                        color: getRandomColor()
+                    })));
+                }
+            } catch (error) {
+                console.error("Failed to fetch projects:", error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchProjects();
+    }, []);
+
+    const filteredProjects = projects.filter(project => {
+        const query = searchQuery.toLowerCase();
+        return (
+            project.title.toLowerCase().includes(query) ||
+            project.tags.some(tag => tag.toLowerCase().includes(query)) ||
+            project.description.toLowerCase().includes(query)
+        );
+    });
+
+    return (
+        <div className="min-h-screen bg-[#060010] text-[#c9d1d9] font-sans selection:bg-white selection:text-black">
+            <Navbar />
+
+            <div className="pt-24 pb-32">
+                <div className="max-w-[1400px] mx-auto px-6 lg:px-12">
+
+                    {/* Header Section */}
+                    <div className="mb-24 flex flex-col md:flex-row md:items-end justify-between gap-12 pb-8 border-b border-[#30363d]">
+                        <div className="flex-1">
+                            <h1 className="text-6xl md:text-8xl lg:text-9xl font-black text-white tracking-tighter uppercase leading-tight">
+                                BUILD<br />SHOW.
+                            </h1>
+                        </div>
+
+                        <div className="flex flex-col gap-6 w-full md:w-auto">
+                            <div className="w-full md:w-80 relative group">
+                                <input
+                                    type="text"
+                                    placeholder="Search projects..."
+                                    className="w-full bg-transparent border-b border-[#30363d] text-xl text-white px-0 py-3 focus:outline-none focus:border-white transition-colors placeholder:text-[#30363d]"
+                                    value={searchQuery}
+                                    onChange={(e) => setSearchQuery(e.target.value)}
+                                />
+                                <Search size={20} className="absolute right-0 top-1/2 -translate-y-1/2 text-[#30363d] group-focus-within:text-white transition-colors" />
+                            </div>
+
+                            <button
+                                onClick={() => navigate('/post-project')}
+                                className="flex items-center justify-center gap-2 px-6 py-3 bg-[#161b22] border border-[#30363d] text-white hover:bg-[#30363d] transition-colors rounded font-mono uppercase text-sm tracking-wider"
+                            >
+                                <Rocket size={16} />
+                                <span>Share Project</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Projects Listing */}
+                    {loading ? (
+                        <div className="flex flex-col items-center justify-center py-32 space-y-4">
+                            <div className="w-12 h-12 border-2 border-white/10 border-t-white rounded-full animate-spin"></div>
+                            <span className="font-mono text-xs uppercase tracking-widest text-[#30363d]">Initializing Manifest...</span>
+                        </div>
+                    ) : (
+                        <div className="grid grid-cols-1 gap-px bg-[#30363d]">
+                            {filteredProjects.length > 0 ? (
+                                filteredProjects.map((project, index) => (
+                                    <div
+                                        key={project._id}
+                                        className="group relative bg-[#060010] py-16 md:py-24 transition-colors duration-500 hover:bg-[#161b22]/30 overflow-hidden"
+                                    >
+                                        {/* Accent Bar */}
+                                        <div
+                                            className="absolute left-0 top-0 bottom-0 w-1 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-500 origin-top"
+                                            style={{ backgroundColor: project.color }}
+                                        />
+
+                                        <div className="flex flex-col md:flex-row gap-12 md:gap-20 items-start px-6 lg:px-12">
+                                            {/* Column 1: Index */}
+                                            <div className="shrink-0">
+                                                <span className="font-mono text-4xl md:text-7xl font-bold text-[#30363d] group-hover:text-white transition-colors duration-300">
+                                                    {(index + 1).toString().padStart(2, '0')}
+                                                </span>
+                                            </div>
+
+                                            {/* Column 2: Details */}
+                                            <div className="flex-1 min-w-0">
+                                                <div className="flex flex-wrap gap-2 mb-6">
+                                                    {project.tags.map(tag => (
+                                                        <span key={tag} className="text-[10px] font-mono text-[#8b949e] uppercase tracking-wider border border-[#30363d] px-2 py-1 rounded group-hover:border-white/20 group-hover:text-white transition-colors">
+                                                            {tag}
+                                                        </span>
+                                                    ))}
+                                                </div>
+
+                                                <h2 className="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight uppercase group-hover:translate-x-2 transition-transform duration-300 tracking-tighter">
+                                                    {project.title}
+                                                </h2>
+
+                                                <p className="text-[#8b949e] text-lg md:text-xl font-light max-w-4xl leading-relaxed mb-10">
+                                                    {project.description}
+                                                </p>
+
+                                                <div className="flex flex-wrap gap-6 pt-4">
+                                                    <a
+                                                        href={project.githubLink}
+                                                        target="_blank"
+                                                        rel="noopener noreferrer"
+                                                        className="flex items-center gap-2 text-white font-mono text-xs uppercase tracking-widest hover:text-[#00ffff] transition-colors"
+                                                    >
+                                                        <Github size={16} /> Repository <ArrowUpRight size={14} />
+                                                    </a>
+                                                    {project.liveLink && (
+                                                        <a
+                                                            href={project.liveLink}
+                                                            target="_blank"
+                                                            rel="noopener noreferrer"
+                                                            className="flex items-center gap-2 text-white font-mono text-xs uppercase tracking-widest hover:text-[#00ff00] transition-colors"
+                                                        >
+                                                            <ExternalLink size={16} /> Live Demo <ArrowUpRight size={14} />
+                                                        </a>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))
+                            ) : (
+                                <div className="bg-[#060010] py-32 text-center">
+                                    <p className="font-mono text-[#30363d] uppercase tracking-[0.3em]">No Projects Found in Current Sector</p>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            <Footer />
+        </div>
+    );
+};
+
+export default ProjectPage;
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
index f19e42e..146cf8c 100644
--- a/frontend/src/components/NavBar.tsx
+++ b/frontend/src/components/NavBar.tsx
@@ -80,6 +80,13 @@ export default function Navbar() {
             Blogs
           </Link>
 
+          <Link
+            to="/projects"
+            className={`text-sm font-medium transition-colors ${isActive('/projects') ? 'text-white' : 'text-slate-400 hover:text-white'}`}
+          >
+            Projects
+          </Link>
+
           {isAuthenticated ? (
             <Link
               to="/room/yaps"
@@ -172,6 +179,8 @@ export default function Navbar() {
       {isMobileMenuOpen && (
         <div className="md:hidden absolute top-20 left-0 w-full bg-[#060010] border-b border-white/10 p-6 flex flex-col gap-4 animate-in slide-in-from-top-5 duration-200">
           <Link to="/blogs" className="text-slate-300 hover:text-white py-2" onClick={() => setIsMobileMenuOpen(false)}>Blogs</Link>
+          <Link to="/projects" className="text-slate-300 hover:text-white py-2" onClick={() => setIsMobileMenuOpen(false)}>Projects</Link>
+
           {isAuthenticated ? (
             <Link to="/join-room" className="text-slate-300 hover:text-white py-2 flex items-center gap-2" onClick={() => setIsMobileMenuOpen(false)}>
               <MessageSquare size={16} />