diff --git a/src/App.jsx b/src/App.jsx
index bb36e69..39db37d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -10,6 +10,7 @@ import AntiProtected from './components/AntiProtected'
 import Protected from './components/Protected'
 import ProjectDetails from './pages/ProjectDetails'
 import CreateProfile from './pages/CreateProfile'
+import MyCollaborations from './pages/MyCollaborations'
 
 
 function App() {
diff --git a/src/assets/CollaborateTabImage.png b/src/assets/CollaborateTabImage.png
new file mode 100644
index 0000000..6ebe678
Binary files /dev/null and b/src/assets/CollaborateTabImage.png differ
diff --git a/src/assets/Profileimage.png b/src/assets/Profileimage.png
new file mode 100644
index 0000000..a501fc0
Binary files /dev/null and b/src/assets/Profileimage.png differ
diff --git a/src/assets/profilecover.png b/src/assets/profilecover.png
new file mode 100644
index 0000000..68c91ea
Binary files /dev/null and b/src/assets/profilecover.png differ
diff --git a/src/components/CollaborateTab.jsx b/src/components/CollaborateTab.jsx
new file mode 100644
index 0000000..686166f
--- /dev/null
+++ b/src/components/CollaborateTab.jsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import Cover from './../assets/CollaborateTabImage.png'
+import {Card, CardFooter, Image} from "@nextui-org/react";
+import {Avatar} from "@nextui-org/react";
+
+function CollaborateTab() {
+  return (
+    <Card isFooterBlurred className="w-[575px] h-[400px] col-span-1">
+      
+      <Image
+        removeWrapper
+        alt="Project Cover Image Loading"
+        className="z-0 w-full h-full object-cover"
+        src={Cover}
+      />
+      
+      <CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
+        <div className='pr-2'>
+          <Avatar src="https://external-preview.redd.it/QgHKQP_SWg9gQYmxn5aYm6Lx55kg3GIADwHoKCFLOW8.jpg?width=1080&crop=smart&auto=webp&s=e1cee385f46919fe99102b1466249bf719798930" />
+        </div>
+        <div className="flex flex-grow gap-2 items-center">
+          <div className="flex flex-col">
+            <p className="text-large text-white">Project Title</p>
+            <p className="text-tiny text-white/60">Project Description</p>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
+
+export default CollaborateTab
\ No newline at end of file
diff --git a/src/pages/MyCollaborations.jsx b/src/pages/MyCollaborations.jsx
new file mode 100644
index 0000000..d7cacd5
--- /dev/null
+++ b/src/pages/MyCollaborations.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import {Input} from "@nextui-org/react";
+import CollaborateTab from '../components/CollaborateTab';
+
+function MyCollaborations() {
+  return (
+      <div className='flex flex-col mx-10 mt-10 items-center gap-y-30'>
+        <Input
+        radius="full"
+        type="search"
+        defaultValue="Search for your collaborations"
+        className="relative max-w-[450px]"
+        />
+        <div className='flex flex-wrap mt-10 items-center justify-center gap-20'>
+
+        < CollaborateTab/>
+        < CollaborateTab/>
+        < CollaborateTab/>
+        < CollaborateTab/>
+        < CollaborateTab/>
+        < CollaborateTab/>
+      
+        </div>
+      </div>
+  );
+}
+
+export default MyCollaborations
\ No newline at end of file
diff --git a/src/pages/MyProfile.jsx b/src/pages/MyProfile.jsx
index bf4f5b8..828153a 100644
--- a/src/pages/MyProfile.jsx
+++ b/src/pages/MyProfile.jsx
@@ -1,8 +1,55 @@
 import React from 'react'
+import ProfileImage from './../assets/Profileimage.png'
+import {Card, CardHeader, CardBody, CardFooter, Avatar, Button} from "@nextui-org/react";
 
 function MyProfile() {
   return (
-    <div className='MyProfile'>MyProfile</div>
+    <div className="flex items-center justify-center h-screen">
+    <div className="mt-10 mx-30 max-w-screen-lg bg-gradient-to-t from-blue-500 via-blue-400 to-transparent">
+    <Card className="mt-10 max-w-screen-lg bg-gradient-to-t from-blue-500 via-blue-400 to-transparent">
+      <CardHeader className="flex gap-5 flex-col items-center">
+        <Avatar src={ProfileImage} className="w-40 h-40 text-large"/>
+          <div className="flex flex-col gap-4 items-center ">
+            <h4 className="font-bold leading-none">Profile Name</h4>
+            <h5 className="text-small tracking-tight ">Profile Tagline</h5>
+          </div>
+      </CardHeader>  
+
+      <Button
+          className= "absolute text-foreground right-0 top-0 "
+          radius="full"
+          color="primary">
+         Edit Profile
+        </Button>  
+
+        <CardBody className="px-3 py-0 text-small text-default-400 items-center">
+        <p>
+        I'm Jane Hong, and I recently graduated with an
+advanced diploma from Smith secondary school.
+I'm seeking an internship where I can apply my skills
+in content creation and increase my experience
+in digital marketingI'm Jane Hong, and I recently graduated with an
+advanced diploma from Smith secondary school.
+I'm seeking an internship where I can apply my skills
+in content creation and increase my experience
+in digital marketingI'm Jane Hong, and I recently graduated with an
+advanced diploma from Smith secondary school.
+I'm seeking an internship where I can apply my skills
+in content creation and increase my experience
+in digital marketing
+        </p>
+      </CardBody> 
+      <CardFooter className="flex flex-col items-center">
+      
+            <h4 className="text-small font-semibold leading-none text-default-600">Skills</h4>
+            <h5 className="text-small tracking-tight text-default-400">HTML, CSS, JavaScript, Knowledge of Frameworks and Libraries, Version control, Cross-browser and device testing,
+Web performance optimization (WPO)</h5>
+        
+      </CardFooter>
+      
+    </Card>
+    </div>
+    </div>
   )
 }