diff --git a/Frontend/src/pages/portfolio.js b/Frontend/src/pages/portfolio.js
index 01b5d82..3aaf2da 100644
--- a/Frontend/src/pages/portfolio.js
+++ b/Frontend/src/pages/portfolio.js
@@ -26,21 +26,29 @@ export default function Portfolio() {
 
   return (
     <div className="bg-gray-100 min-h-screen p-6">
-      
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-
-        {portfolio && portfolio.map((image) =>
-          <div className="w-full h-64 relative rounded-lg mb-4">
-
-            <Image src={image.url}
-               loader={() => image.url}
-               height={1024}
-               width={1024}
-            /></div>)}
+        {portfolio && portfolio.map((image) => (
+          <div className="w-full h-64 relative rounded-lg overflow-hidden mb-4">
+            <Image 
+              src={image.url}
+              loader={() => image.url}
+              layout="fill" // This ensures the image takes up the full container
+              objectFit="cover" // This will cover the area without stretching the image
+            />
+          </div>
+        ))}
+        <Link legacyBehavior href="/create" passHref>
+          <a className="w-full h-64 rounded-lg flex justify-center items-center border-4 border-dotted border-gray-300 hover:border-solid hover:bg-gray-50 transition-all duration-300 cursor-pointer">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+            </svg>
+          </a>
+        </Link>
       </div>
     </div>
   );
-}
+};
+
 
 export async function getServerSideProps(context) {
   const { req } = context;