diff --git a/client/src/App.tsx b/client/src/App.tsx
index e377e99..cc41b06 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -10,6 +10,8 @@ import EditProfileForm from './pages/EditProfileForm';
 import { MessagePage } from './pages/MessagePage';
 import Projects from './pages/Projects';
 import Visualization from './pages/Visualization';
+import PrivacyPolicy from './pages/Privacypolicy';
+import ProjectDisplay from './pages/ProjectDisplay';
 
 const App = () => {
 
@@ -24,8 +26,10 @@ const App = () => {
           <Route path="/settings" element={<EditProfileForm />} />
           <Route path="/message" element={<MessagePage/>} />
           <Route path="/projects/:username" element={<Projects />} />
+          <Route path="/projects/:username/:projectId" element={<ProjectDisplay />} />
           <Route path="/user/:username" element={<Profile />} />
           <Route path="/relations/:username" element={<Visualization />} />
+          <Route path="/privacy-policy" element={<PrivacyPolicy/>} />
           <Route path="*" element={<div>404</div>} />
         </Routes>
       </Router>
diff --git a/client/src/components/Footer/Footer.tsx b/client/src/components/Footer/Footer.tsx
index 266ce47..4bad2e9 100644
--- a/client/src/components/Footer/Footer.tsx
+++ b/client/src/components/Footer/Footer.tsx
@@ -24,12 +24,12 @@ const Footer = () => {
                                 <ul className="text-gray-500 dark:text-gray-400 font-medium">
                                     <li className="mb-4">
                                         <a href="/" className="hover:underline">
-                                            Devhub
+                                            Posts
                                         </a>
                                     </li>
                                     <li>
                                         <a href="/" className="hover:underline">
-                                            Tailwind CSS
+                                            DevMap
                                         </a>
                                     </li>
                                 </ul>
@@ -63,7 +63,7 @@ const Footer = () => {
                                 </h2>
                                 <ul className="text-gray-500 dark:text-gray-400 font-medium">
                                     <li className="mb-4">
-                                        <a href="#" className="hover:underline">
+                                        <a href="/privacy-policy" className="hover:underline">
                                             Privacy Policy
                                         </a>
                                     </li>
diff --git a/client/src/components/Projects/AddProject.tsx b/client/src/components/Projects/AddProject.tsx
index bc99aef..85e2a2b 100644
--- a/client/src/components/Projects/AddProject.tsx
+++ b/client/src/components/Projects/AddProject.tsx
@@ -6,7 +6,6 @@ import {
     AlertDialogContent,
     AlertDialogDescription,
     AlertDialogHeader,
-    AlertDialogTitle,
     AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Cross1Icon } from "@radix-ui/react-icons";
@@ -16,6 +15,7 @@ import { toast } from 'sonner';
 import { Button } from "@/components/ui/button";
 import { Icons } from "@/components/ui/icons";
 import { Textarea } from '../ui/textarea';
+import UploadComponent from './UploadComponent'; 
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
 
@@ -24,6 +24,7 @@ interface Project {
     description: string;
     repoLink: string;
     tags: Tag[];
+    imageUrl?: string; 
 }
 
 interface Tag {
@@ -37,8 +38,10 @@ const AddProject: React.FC<{ onProjectChange: () => void }> = ({ onProjectChange
         description: '',
         repoLink: '',
         tags: [],
+        imageUrl: '', // Add image URL state
     });
 
+    const [imageFile, setImageFile] = useState<File | null>(null); // State for handling image file
     const username = localStorage.getItem('devhub_username');
     const [isLoading, setIsLoading] = useState(false);
 
@@ -50,16 +53,39 @@ const AddProject: React.FC<{ onProjectChange: () => void }> = ({ onProjectChange
         }));
     };
 
+    // Function to upload image to Cloudinary via the backend
+    const uploadImage = async () => {
+        if (!imageFile) return ''; // Return empty string if no image is uploaded
+
+        const formData = new FormData();
+        formData.append('image', imageFile);
+
+        try {
+            const response = await axios.post(`${backendUrl}/project/upload`, formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+            });
+
+            return response.data.imageUrl; // Return the image URL
+        } catch (error) {
+            console.error('Image upload failed:', error);
+            toast.error('Failed to upload image');
+            return '';
+        }
+    };
+
     const handleAddProject = async () => {
         if (!username) {
             toast.error('Username not found');
             return;
         }
 
-        setIsLoading(true); 
+        setIsLoading(true);
 
         try {
-            // Convert tags array to a comma-separated string
+            const imageUrl = await uploadImage(); // Upload the image and get the URL
+
             const tagsString = newProject.tags.map((tag) => tag.value).join(',');
 
             const response = await axios.post(
@@ -68,14 +94,16 @@ const AddProject: React.FC<{ onProjectChange: () => void }> = ({ onProjectChange
                     title: newProject.title,
                     description: newProject.description,
                     repo_link: newProject.repoLink,
-                    tags: tagsString,  // Send as comma-separated string
+                    tags: tagsString, // Send as comma-separated string
+                    imageUrl, // Include the uploaded image URL
                 },
                 { withCredentials: true },
             );
 
             if (response.status === 200 || response.status === 201) {
                 toast.success('Project added successfully');
-                setNewProject({ title: '', description: '', repoLink: '', tags: [] });  // Reset form
+                setNewProject({ title: '', description: '', repoLink: '', tags: [], imageUrl: '' }); // Reset form
+                setImageFile(null); // Reset the image file
                 onProjectChange();
             } else {
                 toast.error('Failed to add project');
@@ -84,13 +112,10 @@ const AddProject: React.FC<{ onProjectChange: () => void }> = ({ onProjectChange
             console.error('Failed to add project:', error);
             toast.error('An error occurred while adding the project');
         } finally {
-            setIsLoading(false);  // Reset loading state
+            setIsLoading(false); // Reset loading state
         }
     };
 
-
-
-
     return (
         <AlertDialog>
             <AlertDialogTrigger className="w-[120px] ml-5 mt-5 mb-3">
@@ -98,66 +123,67 @@ const AddProject: React.FC<{ onProjectChange: () => void }> = ({ onProjectChange
             </AlertDialogTrigger>
             <AlertDialogContent>
                 <div className='flex'>
-                    <AlertDialogHeader className='text-2xl'>Add New Project</AlertDialogHeader>
+                    <AlertDialogHeader className='text-2xl mt-1.5'>Add New Project</AlertDialogHeader>
                     <div className='flex-grow'></div>
-                    <AlertDialogCancel><Cross1Icon className='h-3 w-3'/></AlertDialogCancel>
+                    <AlertDialogCancel><Cross1Icon className='h-3 w-3' /></AlertDialogCancel>
                 </div>
-                    <AlertDialogDescription>
-                        <AlertDialogTitle></AlertDialogTitle>
-                            <div className="grid gap-6 sm:w-80">
-                                <div>
-                                    <Input
-                                        id="newProjectTitle"
-                                        name="title"
-                                        value={newProject.title}
-                                        onChange={handleProjectChange}
-                                        disabled={isLoading}
-                                        placeholder="Project title"
-                                        className="mt-2"
-                                    />
-                                </div>
-                                <div>
-                                    <Textarea
-                                        id="newProjectDescription"
-                                        name="description"
-                                        value={newProject.description}
-                                        onChange={handleProjectChange}
-                                        disabled={isLoading}
-                                        placeholder="# Project description"
-                                        className=""
-                                    />
-                                </div>
-                                <div>
-                                    <TagInput
-                                        selectedTags={newProject.tags}
-                                        onTagsChange={(tags) => setNewProject({ ...newProject, tags })}
-                                    />
-                                </div>
-                                <div>
-                                    
-                                    <Input
-                                        id="newProjectRepoLink"
-                                        name="repoLink"
-                                        value={newProject.repoLink}
-                                        onChange={handleProjectChange}
-                                        disabled={isLoading}
-                                        placeholder="Repository link"
-                                        className=""
-                                    />
-                                </div>
-                                <Button onClick={handleAddProject} disabled={isLoading} className="w-full mt-4">
-                                    {isLoading ? (
-                                        <>
-                                            <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
-                                            Adding...
-                                        </>
-                                    ) : (
-                                        'Add Project'
-                                    )}
-                                </Button>
-                            </div>
+                <AlertDialogDescription>
+                    <div className="grid gap-6 sm:w-80">
+                        <div>
+                            <UploadComponent onFileChange={setImageFile} /> 
+                        </div>
+                        <div>
+                            <Input
+                                id="newProjectTitle"
+                                name="title"
+                                value={newProject.title}
+                                onChange={handleProjectChange}
+                                disabled={isLoading}
+                                placeholder="Project title"
+                                className="mt-2"
+                            />
+                        </div>
+                        <div>
+                            <Textarea
+                                id="newProjectDescription"
+                                name="description"
+                                value={newProject.description}
+                                onChange={handleProjectChange}
+                                disabled={isLoading}
+                                placeholder="# Project description"
+                                className=""
+                            />
+                        </div>
+                        <div>
+                            <TagInput
+                                selectedTags={newProject.tags}
+                                onTagsChange={(tags) => setNewProject({ ...newProject, tags })}
+                            />
+                        </div>
+                        <div>
+                            <Input
+                                id="newProjectRepoLink"
+                                name="repoLink"
+                                value={newProject.repoLink}
+                                onChange={handleProjectChange}
+                                disabled={isLoading}
+                                placeholder="Repository link"
+                                className=""
+                            />
+                        </div>
                         
-                    </AlertDialogDescription>
+                        <Button onClick={handleAddProject} disabled={isLoading} className="w-full mt-4">
+                            {isLoading ? (
+                                <>
+                                    <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+                                    Adding...
+                                </>
+                            ) : (
+                                'Add Project'
+                            )}
+                        </Button>
+                    </div>
+                </AlertDialogDescription>
             </AlertDialogContent>
         </AlertDialog>
     );
diff --git a/client/src/components/Projects/ProjectCard.tsx b/client/src/components/Projects/ProjectCard.tsx
index a424470..514035a 100644
--- a/client/src/components/Projects/ProjectCard.tsx
+++ b/client/src/components/Projects/ProjectCard.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { StarIcon, GitHubLogoIcon, TrashIcon, Pencil2Icon } from "@radix-ui/react-icons";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { FaStar as FilledStarIcon } from "react-icons/fa";
 import {
     AlertDialog,
@@ -14,6 +14,9 @@ import {
 import UpdateProject from "./UpdateProject";
 import DeleteProject from "./DeleteProject";
 import { Cross1Icon } from "@radix-ui/react-icons";
+import { Skeleton } from "../ui/skeleton";
+import { useNavigate } from "react-router-dom";
+import ReactMarkdown from 'react-markdown';
 
 interface Project {
     projectId: string;
@@ -21,6 +24,7 @@ interface Project {
     description: string;
     repoLink: string;
     starCount: number;
+    imageUrl: string;
     tags: string[];
 }
 
@@ -34,7 +38,13 @@ const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
 export function ProjectCard({ project, onProjectChange }: ProjectProps) {
     const [isStarred, setIsStarred] = useState(false);
     const [starCount, setStarCount] = useState(project.starCount);
-    const username = localStorage.getItem('devhub_username'); 
+    const username = localStorage.getItem('devhub_username');
+
+    const navigate = useNavigate();
+    
+    const projectDetails = () => {
+        navigate(`/projects/${username}/${project.projectId}`);
+    }
 
     // Fetch initial star state from server/localStorage or logic to check if user has starred
     useEffect(() => {
@@ -68,10 +78,24 @@ export function ProjectCard({ project, onProjectChange }: ProjectProps) {
 
     return (
         <Card>
+            {
+                project.imageUrl ? (
+                    <div className="h-40 w-full bg-primary rounded-tl-md rounded-tr-md" style={{backgroundImage: `url(${project.imageUrl})`}}></div>
+                ):
+                (
+                    <Skeleton className="h-40 w-full rounded-tl-md rounded-tr-md" />
+                )
+            }     
             <CardHeader className="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
+                
                 <div className="space-y-1">
-                    <CardTitle>{project.title}</CardTitle>
-                    <CardDescription>{project.description}</CardDescription>
+                    <CardTitle 
+                        onClick={projectDetails} 
+                        className="hover:underline cursor-pointer"
+                    >
+                        {project.title}
+                    </CardTitle>
+                    <ReactMarkdown>{project.description}</ReactMarkdown>
                 </div>
                 <div className="flex items-center rounded-md bg-secondary text-secondary-foreground">
                     <Button
diff --git a/client/src/components/Projects/UpdateProject.tsx b/client/src/components/Projects/UpdateProject.tsx
index 947f8b7..ff39e07 100644
--- a/client/src/components/Projects/UpdateProject.tsx
+++ b/client/src/components/Projects/UpdateProject.tsx
@@ -6,6 +6,7 @@ import { toast } from 'sonner';
 import { Button } from "@/components/ui/button";
 import { Textarea } from '../ui/textarea';
 import { Icons } from "@/components/ui/icons";
+import UploadComponent from './UploadComponent'; 
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
 
@@ -14,7 +15,8 @@ interface Project {
     projectId: string;
     description: string;
     repoLink: string;
-    tags: string[];  // Now an array of strings
+    tags: string[];
+    imageUrl?: string;
 }
 
 interface UpdateProjectProps {
@@ -28,9 +30,11 @@ const UpdateProject: React.FC<UpdateProjectProps> = ({ project, onProjectChange
         projectId: project.projectId,
         description: project.description,
         repoLink: project.repoLink,
-        tags: project.tags,  // Tags are passed as an array of strings
+        tags: project.tags,
+        imageUrl: project.imageUrl || '',
     });
 
+    const [imageFile, setImageFile] = useState<File | null>(null);
     const username = localStorage.getItem('devhub_username');
     const [isLoading, setIsLoading] = useState(false);
 
@@ -46,18 +50,24 @@ const UpdateProject: React.FC<UpdateProjectProps> = ({ project, onProjectChange
         setIsLoading(true);
 
         try {
-            // Join the array of tags into a comma-separated string
-            const tagsString = updatedProject.tags.join(',');
+            // Upload the image and get the URL if an image is provided
+            const uploadedImageUrl = await uploadImage();
+
+            // Prepare the data for submission, filling in empty fields with previous data
+            const finalData = {
+                title: updatedProject.title || project.title,
+                description: updatedProject.description || project.description,
+                repo_link: updatedProject.repoLink || project.repoLink,
+                tags: updatedProject.tags.length > 0 ? updatedProject.tags.join(',') : project.tags.join(','),
+                imageUrl: uploadedImageUrl || project.imageUrl || ''
+            };
 
             const response = await axios.put(
                 `${backendUrl}/profile/${username}/projects/${updatedProject.projectId}`,
+                finalData,
                 {
-                    title: updatedProject.title,
-                    description: updatedProject.description,
-                    repo_link: updatedProject.repoLink,
-                    tags: tagsString,  // Send tags as a comma-separated string
-                },
-                { withCredentials: true },
+                    withCredentials: true,
+                }
             );
 
             if (response.status === 200) {
@@ -74,8 +84,32 @@ const UpdateProject: React.FC<UpdateProjectProps> = ({ project, onProjectChange
         }
     };
 
+    const uploadImage = async () => {
+        if (!imageFile) return '';  // Return empty string if no image is uploaded
+
+        const formData = new FormData();
+        formData.append('image', imageFile);
+
+        try {
+            const response = await axios.post(`${backendUrl}/project/upload`, formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+            });
+
+            return response.data.imageUrl;  // Return the image URL
+        } catch (error) {
+            console.error('Image upload failed:', error);
+            toast.error('Failed to upload image');
+            return '';
+        }
+    };
+
     return (
         <div className="grid gap-6 sm:w-80">
+            <div>
+                <UploadComponent onFileChange={setImageFile} />
+            </div>
             <div>
                 <Input
                     id="updatedProjectTitle"
@@ -84,7 +118,6 @@ const UpdateProject: React.FC<UpdateProjectProps> = ({ project, onProjectChange
                     onChange={handleProjectChange}
                     disabled={isLoading}
                     placeholder="Project title"
-                    className=""
                 />
             </div>
             <div>
@@ -95,7 +128,6 @@ const UpdateProject: React.FC<UpdateProjectProps> = ({ project, onProjectChange
                     onChange={handleProjectChange}
                     disabled={isLoading}
                     placeholder="Project description"
-                    className=""
                 />
             </div>
             <div>
@@ -112,9 +144,9 @@ const UpdateProject: React.FC<UpdateProjectProps> = ({ project, onProjectChange
                     onChange={handleProjectChange}
                     disabled={isLoading}
                     placeholder="Repository link"
-                    className=""
                 />
             </div>
+            
             <Button onClick={handleUpdateProject} disabled={isLoading} className="w-full mt-4">
                 {isLoading ? (
                     <>
diff --git a/client/src/components/Projects/UploadComponent.tsx b/client/src/components/Projects/UploadComponent.tsx
new file mode 100644
index 0000000..844412b
--- /dev/null
+++ b/client/src/components/Projects/UploadComponent.tsx
@@ -0,0 +1,52 @@
+import { useState, useRef } from 'react';
+import { Upload } from 'lucide-react';
+import { Input } from "@/components/ui/input";
+
+interface UploadComponentProps {
+    onFileChange: (file: File) => void;
+}
+
+export default function UploadComponent({ onFileChange }: UploadComponentProps) {
+    const [file, setFile] = useState<File | null>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handleDivClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const selectedFile = event.target.files?.[0];
+        if (selectedFile) {
+            setFile(selectedFile);
+            onFileChange(selectedFile); // Notify the parent component about the file change
+        }
+    };
+
+    return (
+        <div
+            className="w-full h-24 border-2 border-dashed border-gray-700 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-gray-400 transition-colors"
+            onClick={handleDivClick}
+            onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    handleDivClick();
+                }
+            }}
+            tabIndex={0}
+            role="button"
+            aria-label="Click to upload image"
+        >
+            <Upload className="w-12 h-12 text-gray-400 mb-2" />
+            <p className="text-sm text-gray-500">
+                {file ? file.name : 'Upload Banner'}
+            </p>
+            <Input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={handleFileChange}
+                aria-hidden="true"
+            />
+        </div>
+    );
+}
diff --git a/client/src/components/Sidebar/Sidebar.tsx b/client/src/components/Sidebar/Sidebar.tsx
index af732f6..5b1ec87 100644
--- a/client/src/components/Sidebar/Sidebar.tsx
+++ b/client/src/components/Sidebar/Sidebar.tsx
@@ -27,7 +27,7 @@ import {
 } from "@/components/ui/sidebar"
 import { useNavigate } from 'react-router-dom';
 
-const username = typeof window !== 'undefined' ? localStorage.getItem('devhub_username') : null;
+const username = localStorage.getItem('devhub_username');
 
 export default function DevhubSidebar() {
     return (
@@ -72,7 +72,7 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
             },
             {
                 title: "Projects",
-                url: username ? `/projects/${username}` : "#",
+                url: `/projects/${username}`,
                 icon: Inbox,
             },
             {
diff --git a/client/src/pages/Privacypolicy.tsx b/client/src/pages/Privacypolicy.tsx
new file mode 100644
index 0000000..c2fd99c
--- /dev/null
+++ b/client/src/pages/Privacypolicy.tsx
@@ -0,0 +1,97 @@
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+export default function PrivacyPolicy() {
+    const lastUpdated = "October 24, 2024"
+
+    return (
+        <div className="min-h-screen bg-background text-foreground p-8">
+            <div className="max-w-4xl mx-auto">
+                <h1 className="text-4xl font-bold mb-6">Devhub Privacy Policy</h1>
+                <p className="text-muted-foreground mb-8">Last updated: {lastUpdated}</p>
+
+                <ScrollArea className="h-[600px] rounded-md border p-4">
+                    <div className="pr-4">
+                        <section className="mb-8">
+                            <h2 className="text-2xl font-semibold mb-4">Introduction</h2>
+                            <p>Welcome to Devhub. We value your privacy and are committed to protecting the personal information you share with us. This Privacy Policy explains how we collect, use, and safeguard your data when you visit our website or interact with our services.</p>
+                        </section>
+
+                        <section className="mb-8">
+                            <h2 className="text-2xl font-semibold mb-4">Information We Collect</h2>
+                            <h3 className="text-xl font-medium mb-2">Personal Data</h3>
+                            <p>When you visit our site, we may collect personal information such as:</p>
+                            <ul className="list-disc pl-6 mb-4">
+                                <li>Name</li>
+                                <li>Email address</li>
+                                <li>Contact information</li>
+                                <li>Any other information you voluntarily provide via contact forms or user profiles</li>
+                            </ul>
+                            <h3 className="text-xl font-medium mb-2">Usage Data</h3>
+                            <p>We may also collect non-personal information automatically when you interact with our website, such as:</p>
+                            <ul className="list-disc pl-6">
+                                <li>IP address</li>
+                                <li>Browser type and version</li>
+                                <li>Pages visited</li>
+                                <li>Time and date of your visit</li>
+                                <li>Referring websites</li>
+                            </ul>
+                        </section>
+
+                        <section className="mb-8">
+                            <h2 className="text-2xl font-semibold mb-4">How We Use Your Information</h2>
+                            <p>We may use the information collected in the following ways:</p>
+                            <ul className="list-disc pl-6">
+                                <li>To provide, operate, and maintain our website</li>
+                                <li>To improve and personalize user experience</li>
+                                <li>To understand and analyze how users interact with our site</li>
+                                <li>To communicate with you, either directly or through one of our partners, including for customer service and updates</li>
+                                <li>To comply with legal obligations or protect your rights</li>
+                            </ul>
+                        </section>
+
+                        <section className="mb-8">
+                            <h2 className="text-2xl font-semibold mb-4">Cookies and Tracking Technologies</h2>
+                            <p>We use cookies and similar tracking technologies to enhance your experience on our website, track user preferences, and gather analytical data. You can choose to disable cookies through your browser settings, but doing so may affect the functionality of our site.</p>
+                        </section>
+
+                        <section className="mb-8">
+                            <h2 className="text-2xl font-semibold mb-4">Third-Party Services</h2>
+                            <p>We may use third-party services for analytics, marketing, or payment processing. These third parties may collect information in accordance with their own privacy policies. We are not responsible for the privacy practices of these third parties.</p>
+                        </section>
+
+                        <section className="mb-8">
+                            <h2 className="text-2xl font-semibold mb-4">Data Security</h2>
+                            <p>We implement reasonable security measures to protect the personal information you provide us from unauthorized access, disclosure, or loss. However, no method of transmission over the internet or method of electronic storage is entirely secure.</p>
+                        </section>
+
+                        <section className="mb-8">
+                            <h2 className="text-2xl font-semibold mb-4">Your Data Rights</h2>
+                            <p>You have the following rights regarding your personal information:</p>
+                            <ul className="list-disc pl-6">
+                                <li>Access, update, or delete your personal data</li>
+                                <li>Opt-out of marketing communications</li>
+                                <li>Request restrictions on how we process your data</li>
+                            </ul>
+                            <p className="mt-4">To exercise any of these rights, please contact us at <a href="mailto:deepraj21.bera@gmail.com" className="text-blue-300 underline" >deepraj21.bera@gmail.com</a></p>
+                        </section>
+
+                        <section className="mb-8">
+                            <h2 className="text-2xl font-semibold mb-4">International Data Transfers</h2>
+                            <p>Your information may be transferred to and processed in countries other than your country of residence. These countries may have data protection laws that are different from the laws of your country. We take appropriate measures to ensure that your personal data remains protected in accordance with this Privacy Policy.</p>
+                        </section>
+
+                        <section className="mb-8">
+                            <h2 className="text-2xl font-semibold mb-4">Changes to This Privacy Policy</h2>
+                            <p>We may update this Privacy Policy from time to time to reflect changes in our practices. We encourage you to review this page periodically for the latest information on our privacy practices.</p>
+                        </section>
+
+                        <section className="mb-8">
+                            <h2 className="text-2xl font-semibold mb-4">Contact Us</h2>
+                            <p>If you have any questions about this Privacy Policy, please contact us <a href="mailto:deepraj21.bera@gmail.com" className="text-blue-300 underline" target="_blank" rel="noopener noreferrer">here</a>.</p>
+                        </section>
+                    </div>
+                </ScrollArea>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/client/src/pages/ProjectDisplay.tsx b/client/src/pages/ProjectDisplay.tsx
new file mode 100644
index 0000000..ac46d48
--- /dev/null
+++ b/client/src/pages/ProjectDisplay.tsx
@@ -0,0 +1,103 @@
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar"
+import { SidebarLeft } from '@/components/Sidebar/Sidebar'
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { Skeleton } from '@/components/ui/skeleton';
+import axios from 'axios';
+import ReactMarkdown from 'react-markdown';
+
+const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
+
+interface Project {
+  projectId: string;
+  title: string;
+  description: string;
+  repoLink: string;
+  starCount: number;
+  imageUrl: string;
+  tags: string[];
+}
+
+const ProjectDisplay = () => {
+  const { username, projectId } = useParams<{ username: string; projectId: string }>();
+
+  const [project, setProject] = useState<Project | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchProject = async () => {
+      try {
+        const response = await axios.get(`${backendUrl}/profile/${username}/projects/${projectId}`);
+        if (response.status === 200) {
+          setProject(response.data);
+        } else {
+          console.error("Failed to fetch project details");
+        }
+      } catch (error) {
+        console.error("Error fetching project:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProject();
+  }, [username, projectId]);
+
+  return (
+    <SidebarProvider>
+      <SidebarLeft />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+          </div>
+        </header>
+        <main className="flex flex-col flex-grow overflow-hidden">
+          <div className="flex flex-1 flex-col gap-4">
+            {loading ? (
+              <Skeleton className="h-40 w-full" />
+            ) : project ? (
+              <div className="space-y-4">
+                {project.imageUrl && (
+                  <div className="md:h-[440px] sm:h-auto overflow-hidden">
+                    <img src={project.imageUrl} alt={project.title} className="w-full h-full object-cover" />
+                  </div>
+                )}
+                <div className="w-full p-6">
+                  <div className='flex'>
+                    <h1 className="text-4xl font-bold">{project.title}</h1>
+                    <div className='flex-grow'></div>
+                      <div className="p-2 flex items-center">
+                        <p className="text-lg text-gray-500">Stars: {project.starCount}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center mt-2">
+                    <h2 className="text-lg font-medium mr-2">Tags:</h2>
+                    <div className="flex gap-2">
+                      {project.tags.map((tag, index) => (
+                        <span key={index} className="px-2 py-1 dark:bg-gray-200 rounded-full text-sm dark:text-black">
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                    <p className="text-lg text-gray-500 mt-2">Repo: <a href={project.repoLink} target="_blank" rel="noopener noreferrer" className="text-blue-600">{project.repoLink}</a></p>
+                  <h1 className="text-4xl font-bold mt-5">Project Description:</h1>
+                    <ReactMarkdown className="mt-4">{project.description}</ReactMarkdown>
+                </div>
+              </div>
+            ) : (
+              <p>Project not found</p>
+            )}
+          </div>
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export default ProjectDisplay;
diff --git a/client/src/pages/Projects.tsx b/client/src/pages/Projects.tsx
index 736fab5..b2ed9ad 100644
--- a/client/src/pages/Projects.tsx
+++ b/client/src/pages/Projects.tsx
@@ -18,6 +18,7 @@ interface Project {
     description: string;
     repoLink: string;
     starCount: number;
+    imageUrl: string;
     tags: string[];
 }
 
diff --git a/server/api/handlers/projects/projects.py b/server/api/handlers/projects/projects.py
index 3f9fc21..58cc73b 100644
--- a/server/api/handlers/projects/projects.py
+++ b/server/api/handlers/projects/projects.py
@@ -2,48 +2,71 @@
 from models import Project
 from extensions import neo4j_db
 import uuid
+from flask import request, jsonify
+import cloudinary.uploader
+import logging
+import cloudinary
+import os
 
-def increment_star(username, project_id):
-    check_query = """
-    MATCH (u:User {username: $username})-[:STARRED]->(p:Project {project_id: $project_id})
-    RETURN p
-    """
-    increment_star_query = """
-    MATCH (u:User {username: $username}), (p:Project {project_id: $project_id})
-    WHERE NOT (u)-[:STARRED]->(p)
-    SET p.star = p.star + 1
-    CREATE (u)-[:STARRED]->(p)
+cloudinary.config(
+    cloud_name=os.getenv('CLOUDINARY_NAME'),
+    api_key=os.getenv('CLOUDINARY_API_KEY'),
+    api_secret=os.getenv('CLOUDINARY_API_SECRET')
+)
+
+def add_project(username):
+    data = request.get_json()
+    title = data.get('title')
+    description = data.get('description', '')
+    repo_link = data.get('repo_link', '')
+    tags = data.get('tags', '')
+    image_url = data.get('imageUrl', '') 
+    project_id = str(uuid.uuid4())
+
+    domain_tags = [tag.strip() for tag in tags.split(',') if tag.strip()]
+
+    create_project_query = """
+    MATCH (u:User {username: $username})
+    CREATE (p:Project {project_id: $project_id, title: $title, description: $description, repo_link: $repo_link, star: 0, image_url: $image_url})
+    CREATE (u)-[:OWNS]->(p)
     RETURN p
     """
     try:
         with neo4j_db.driver.session() as session:
-            # Check if the user has already starred the project
-            check_result = session.run(check_query, username=username, project_id=project_id)
-            if check_result.single():
-                return jsonify({'message': 'You have already starred this project'}), 400
-
-            # Increment the star count and create a STARRED relationship
-            result = session.run(increment_star_query, username=username, project_id=project_id)
+            result = session.run(create_project_query, username=username, project_id=project_id, title=title, description=description, repo_link=repo_link, image_url=image_url)
             project_record = result.single()
-
+            
             if project_record:
                 project = project_record["p"]
+                
+                if domain_tags:
+                    update_project_query = """
+                    MATCH (p:Project {project_id: $project_id})
+                    WITH p, $tags AS tags
+                    UNWIND tags AS tagName
+                    MERGE (t:Tag {name: tagName})
+                    CREATE (p)-[:TAGGED_WITH]->(t)
+                    RETURN p
+                    """
+                    session.run(update_project_query, project_id=project_id, tags=domain_tags)
+                
                 return jsonify({
-                    'message': 'Star count incremented successfully',
+                    'message': 'Project added successfully',
                     'project': {
                         'projectId': project["project_id"],
                         'title': project["title"],
                         'description': project.get("description", ""),
                         'repoLink': project.get("repo_link", ""),
-                        'star': project.get("star")
+                        'tags': domain_tags,
+                        'imageUrl': project.get("image_url", ""), 
+                        'star': 0
                     }
-                }), 200
+                }), 201
             else:
-                return jsonify({'message': 'Project not found'}), 404
-
+                return jsonify({'message': 'User not found'}), 404
     except Exception as e:
-        current_app.logger.error(f"Error incrementing star count: {e}")
-        return jsonify({'message': 'An error occurred while incrementing the star count'}), 500
+        current_app.logger.error(f"Error adding project: {e}")
+        return jsonify({'message': 'An error occurred while adding the project'}), 500
 
 def get_projects(username):
     query = """
@@ -65,7 +88,8 @@ def get_projects(username):
                     'description': project.get('description', ''),
                     'repoLink': project.get('repo_link', ''),
                     'tags': tags if tags else [],
-                    'starCount' : project.get('star')
+                    'imageUrl': project.get('image_url', ''),  
+                    'starCount': project.get('star')
                 })
             
             if projects:
@@ -77,87 +101,120 @@ def get_projects(username):
         current_app.logger.error(f"Error fetching projects: {e}")
         return jsonify({'message': 'An error occurred while fetching projects'}), 500
 
-def add_project(username):
-    data = request.get_json()
-    title = data.get('title')
-    description = data.get('description', '')
-    repo_link = data.get('repo_link', '')
-    tags = data.get('tags', '')
-    project_id = str(uuid.uuid4())
-
-    domain_tags = [tag.strip() for tag in tags.split(',') if tag.strip()]
-
-    create_project_query = """
-    MATCH (u:User {username: $username})
-    CREATE (p:Project {project_id: $project_id, title: $title, description: $description, repo_link: $repo_link, star: 0})
-    CREATE (u)-[:OWNS]->(p)
+def increment_star(username, project_id):
+    check_query = """
+    MATCH (u:User {username: $username})-[:STARRED]->(p:Project {project_id: $project_id})
+    RETURN p
+    """
+    increment_star_query = """
+    MATCH (u:User {username: $username}), (p:Project {project_id: $project_id})
+    WHERE NOT (u)-[:STARRED]->(p)
+    SET p.star = p.star + 1
+    CREATE (u)-[:STARRED]->(p)
     RETURN p
     """
     try:
         with neo4j_db.driver.session() as session:
-            result = session.run(create_project_query, username=username, project_id=project_id, title=title, description=description, repo_link=repo_link)
+            check_result = session.run(check_query, username=username, project_id=project_id)
+            if check_result.single():
+                return jsonify({'message': 'You have already starred this project'}), 400
+
+            result = session.run(increment_star_query, username=username, project_id=project_id)
             project_record = result.single()
-            
+
             if project_record:
                 project = project_record["p"]
-                
-                if domain_tags:
-                    update_project_query = """
-                    MATCH (p:Project {project_id: $project_id})
-                    WITH p, $tags AS tags
-                    UNWIND tags AS tagName
-                    MERGE (t:Tag {name: tagName})
-                    CREATE (p)-[:TAGGED_WITH]->(t)
-                    RETURN p
-                    """
-                    session.run(update_project_query, project_id=project_id, tags=domain_tags)
-                
                 return jsonify({
-                    'message': 'Project added and categorized successfully',
+                    'message': 'Star count incremented successfully',
                     'project': {
                         'projectId': project["project_id"],
                         'title': project["title"],
                         'description': project.get("description", ""),
                         'repoLink': project.get("repo_link", ""),
-                        'tags': domain_tags,
-                        'star': 0
+                        'star': project.get("star")
                     }
-                }), 201
+                }), 200
             else:
-                return jsonify({'message': 'User not found'}), 404
-    except Exception as e:
-        current_app.logger.error(f"Error adding project: {e}")
-        return jsonify({'message': 'An error occurred while adding the project'}), 500
+                return jsonify({'message': 'Project not found'}), 404
 
+    except Exception as e:
+        current_app.logger.error(f"Error incrementing star count: {e}")
+        return jsonify({'message': 'An error occurred while incrementing the star count'}), 500
+    
 def update_project(username, project_id):
     data = request.get_json()
     title = data.get('title')
     description = data.get('description')
     repo_link = data.get('repo_link')
     tags = [tag.strip() for tag in data.get('tags', '').split(',')] if data.get('tags') else []
+    image_url = data.get('imageUrl', '') 
 
-    query = """
+    # Query to check if the user and project exist
+    check_query = """
     MATCH (u:User {username: $username})-[:OWNS]->(p:Project {project_id: $project_id})
-    SET p.title = $title, p.description = $description, p.repo_link = $repo_link
+    RETURN u, p
+    """
+    
+    # Update query
+    update_query = """
+    MATCH (u:User {username: $username})-[:OWNS]->(p:Project {project_id: $project_id})
+    SET p.title = $title, p.description = $description, p.repo_link = $repo_link, p.image_url = $image_url
     WITH p
     OPTIONAL MATCH (p)-[r:TAGGED_WITH]->(t:Tag)
     DELETE r
     WITH p, $tags AS tags
     UNWIND tags AS tagName
     MERGE (t:Tag {name: tagName})
-    MERGE (p)-[:TAGGED_WITH]->(t)  // Change here to use MERGE for the relationship
+    MERGE (p)-[:TAGGED_WITH]->(t)
     RETURN p
     """
+
     try:
         with neo4j_db.driver.session() as session:
-            result = session.run(query, username=username, project_id=project_id, title=title, description=description, repo_link=repo_link, tags=tags)
+            # First check if the user and project exist
+            check_result = session.run(check_query, username=username, project_id=project_id)
+            if not check_result.single():
+                return jsonify({'message': 'User or project not found'}), 404
+
+            # Proceed with the update if user and project exist
+            result = session.run(update_query, username=username, project_id=project_id, title=title, description=description, repo_link=repo_link, image_url=image_url, tags=tags)
             if result.single():
                 return jsonify({'message': 'Project updated successfully'}), 200
-            return jsonify({'message': 'Project or user not found'}), 404
+            
+            return jsonify({'message': 'Project not found or no changes made'}), 404
     except Exception as e:
         current_app.logger.error(f"Error updating project: {e}")
         return jsonify({'message': 'An error occurred while updating the project'}), 500
 
+def project_details(username, project_id):
+    query = """
+    MATCH (u:User {username: $username})-[:OWNS]->(p:Project {project_id: $project_id})
+    OPTIONAL MATCH (p)-[:TAGGED_WITH]->(t:Tag)
+    RETURN p, collect(t.name) AS tags
+    """
+    try:
+        with neo4j_db.driver.session() as session:
+            result = session.run(query, username=username, project_id=project_id)
+            record = result.single()
+
+            if record:
+                project = record["p"]
+                tags = record["tags"]
+                return jsonify({
+                    'projectId': project.get('project_id'),
+                    'title': project.get('title'),
+                    'description': project.get('description', ''),
+                    'repoLink': project.get('repo_link', ''),
+                    'tags': tags if tags else [],
+                    'imageUrl': project.get('image_url', ''),
+                    'starCount' : project.get('star')
+                }), 200
+            else:
+                return jsonify({'message': 'Project not found'}), 404
+    except Exception as e:
+        current_app.logger.error(f"Error fetching project details: {e}")
+        return jsonify({'message': 'An error occurred while fetching project details'}), 500
+
 def delete_project(username, project_id):
     query = """
     MATCH (u:User {username: $username})-[:OWNS]->(p:Project {project_id: $project_id})
@@ -170,3 +227,27 @@ def delete_project(username, project_id):
         if result.single():
             return jsonify({'message': 'Project deleted successfully'}), 200
         return jsonify({'message': 'Project or user not found'}), 404
+    
+def upload_image():
+    try:
+        # Check if the image is part of the request
+        if 'image' not in request.files:
+            return jsonify({'error': 'No image part in the request'}), 400
+
+        # Get the image file from the request
+        image = request.files['image']
+
+        if image.filename == '':
+            return jsonify({'error': 'No image selected for uploading'}), 400
+
+        # Upload to Cloudinary
+        upload_result = cloudinary.uploader.upload(image, folder="Devhub/Projects")
+
+        # Return the image URL after uploading
+        image_url = upload_result['secure_url']
+        return jsonify({'imageUrl': image_url}), 200
+
+    except Exception as e:
+        # Log the error for debugging
+        logging.error(f"Error uploading image: {str(e)}")
+        return jsonify({'error': 'An error occurred while uploading the image', 'details': str(e)}), 500
diff --git a/server/api/urls.py b/server/api/urls.py
index 2513887..4aacf0f 100644
--- a/server/api/urls.py
+++ b/server/api/urls.py
@@ -1,6 +1,6 @@
 from api.handlers.auth.userauth import signup, login, check_auth, home, logout, index, check_username
 from api.handlers.user.profile import get_profile, update_profile
-from api.handlers.projects.projects import add_project, update_project, delete_project, get_projects, increment_star
+from api.handlers.projects.projects import add_project, update_project, delete_project, get_projects, increment_star, project_details, upload_image
 from api.handlers.analyze.githubdata import github_data, top_languages, streak_stats, pinned_repos, streak_chart
 from api.handlers.analyze.leetcodedata import leetcode_data, leetcode_card
 from api.handlers.query.querymodel import chat,chat_history
@@ -37,9 +37,11 @@ def register_routes(app):
     # Project routes
     app.add_url_rule('/profile/<username>/projects', 'get_projects', get_projects, methods=['GET'])
     app.add_url_rule('/profile/<username>/projects', 'add_project', add_project, methods=['POST'])
-    app.add_url_rule('/profile/<username>/projects/<string:project_id>', 'update_project', update_project, methods=['PUT'])
+    app.add_url_rule('/profile/<string:username>/projects/<string:project_id>', 'project_details', project_details, methods=['GET'])
+    app.add_url_rule('/profile/<string:username>/projects/<string:project_id>', 'update_project', update_project, methods=['PUT'])
     app.add_url_rule('/profile/<username>/projects/<string:project_id>', 'delete_project', delete_project, methods=['DELETE'])
     app.add_url_rule('/profile/<username>/projects/<project_id>/star', 'increment_star', increment_star, methods=['POST'])
+    app.add_url_rule('/project/upload', 'upload_image', upload_image, methods=['POST'])
     
     # Chat with model routes
     app.add_url_rule('/chat', 'chat', chat, methods=['POST'])
diff --git a/server/config.py b/server/config.py
index a5ab183..dad9783 100644
--- a/server/config.py
+++ b/server/config.py
@@ -1,5 +1,7 @@
 import os
 from dotenv import load_dotenv
+import cloudinary
+import cloudinary.uploader
 
 load_dotenv()
 
@@ -9,3 +11,9 @@ class Config:
     NEO4J_USER = os.getenv('NEO4J_USER')
     NEO4J_PASSWORD = os.getenv('NEO4J_PASSWORD')
     MONGODB_URI = os.getenv('MONGODB_URI')
+    
+cloudinary.config(
+  CLOUDINARY_NAME = os.getenv('CLOUDINARY_NAME'),
+  CLOUDINARY_API_KEY = os.getenv('CLOUDINARY_API_KEY'),
+  CLOUDINARY_API_SECRET = os.getenv('CLOUDINARY_API_SECRET')
+)
diff --git a/server/models.py b/server/models.py
index fafebd6..934cc67 100644
--- a/server/models.py
+++ b/server/models.py
@@ -66,6 +66,7 @@ class Project(Base):
     title = Column(String, nullable=False)
     description = Column(Text, nullable=True)
     repo_link = Column(String, nullable=True)
+    image_link = Column(String, nullable=True)  # New field to store image links
     star = Column(Integer, default=0, nullable=False)
     
     user_id = Column(Integer, ForeignKey('users.id'))
@@ -73,13 +74,13 @@ class Project(Base):
 
     tags = relationship('Tag', secondary=project_tags, back_populates='projects')
 
-    def __init__(self, title, description=None, repo_link=None, star=0):
+    def __init__(self, title, description=None, repo_link=None, image_link=None, star=0):
         self.title = title
         self.description = description
         self.repo_link = repo_link
+        self.image_link = image_link  # Set the image link
         self.star = star
 
-
 class Tag(Base):
     __tablename__ = 'tags'
     
diff --git a/server/requirements.txt b/server/requirements.txt
index 8f04375..a4273ec 100644
--- a/server/requirements.txt
+++ b/server/requirements.txt
@@ -13,4 +13,5 @@ beautifulsoup4==4.12.3
 langchain==0.2.1
 langchain-community==0.2.1
 langchain-google-genai==1.0.5
-pymongo==4.10.1
\ No newline at end of file
+pymongo==4.10.1
+cloudinary
\ No newline at end of file