diff --git a/.github/workflows/deploy-next.yml b/.github/workflows/deploy-next.yml
index 230ab40..a27e6c9 100644
--- a/.github/workflows/deploy-next.yml
+++ b/.github/workflows/deploy-next.yml
@@ -36,7 +36,7 @@ jobs:
           # You can use whatever directory your project uses, for example "wwwroot".
           # Such a directory does *not* have to already exist in your repo,
           # it could be an output directory created dynamically by your static website builder.
-          source-directory: client/build
+          source-directory: client/out
 
           # Optional. Default value "gh-pages".
           # It specifies the temporary branch which hosts the static website.
diff --git a/client/next.config.js b/client/next.config.js
index 8f400a4..c2c3f0f 100644
--- a/client/next.config.js
+++ b/client/next.config.js
@@ -1,16 +1,19 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  output: 'export',
- 
+  output: "export",
+  images: {
+    unoptimized: true,
+  },
+
   // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
   // trailingSlash: true,
- 
+
   // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
   // skipTrailingSlashRedirect: true,
- 
+
   // Optional: Change the output directory `out` -> `dist`
-  distDir: 'build',
+  // distDir: "build",
 };
 
 module.exports = nextConfig;
diff --git a/client/src/components/card.tsx b/client/src/components/card.tsx
index d22667a..c3b972c 100644
--- a/client/src/components/card.tsx
+++ b/client/src/components/card.tsx
@@ -1,48 +1,54 @@
-import { FC } from "react";
 import Image from "next/image";
+import { FC } from "react";
+
 const Card: FC = () => {
   return (
     <>
-     <div className="w-[300px] h-[300px] bg-slate-400">
+      <div className="w-[300px] h-[300px] bg-slate-400">
         <div className="relative overflow-hidden">
-          <img  className="w-[300px] h-[300px]"
-						src="https://cultivatedculture.com/wp-content/themes/x5-child/assets/images/templates/template6.jpg"
-						alt="Resume"/>
-          <section className="absolute bottom-0 right-0 left-0 border bg-neutral-100 p-4 rounded-lg  bg-neutral-100">
-          <div className="-ml-2 -mt-3">
-            <div className="card md:flex max-w-lg">
-              <div className="w-12 h-12 mx-auto mt-1 md:mr-6 flex-shrink-10">
-                <img className="object-cover rounded-full background" src="https://tailwindflex.com/public/images/user.png"/>
+          <Image
+            width={300}
+            height={300}
+            src="https://cultivatedculture.com/wp-content/themes/x5-child/assets/images/templates/template6.jpg"
+            alt="resume"
+          />
+          <section className="absolute bottom-0 right-0 left-0 border bg-neutral-100 p-4 rounded-lg">
+            <div className="-ml-2 -mt-3">
+              <div className="card md:flex max-w-lg">
+                <div className="w-12 h-12 mx-auto mt-1 md:mr-6 flex-shrink-10">
+                  <Image
+                    alt="profile picture"
+                    fill={true}
+                    className="object-cover rounded-full background"
+                    src="https://tailwindflex.com/public/images/user.png"
+                  />
+                </div>
+                <div className="flex-grow text-center md:text-left">
+                  <h3 className="text-xl">John Doe</h3>
+                  <p className="mt-0 mb-3 text-sm">John is a Senior</p>
+                </div>
               </div>
-              <div className="flex-grow text-center md:text-left">
-                <h3 className="text-xl">John Doe</h3>
-                <p className="mt-0 mb-3 text-sm">John is a Senior</p>     
+              <div className="-mt-2 text-center">
+                <span className="text-xs"> cs+math </span>
+                <span className="ml-20 text-xs"> gpa </span>
+                <span className="ml-20 text-xs"> year </span>
+              </div>
+              <div className="mt-2 text-center">
+                <span className="bg-blue-200 border px-3 py-1.5 rounded-lg text-xs 0px]">
+                  Discrete
+                </span>
+                <span className="bg-pink-200 border px-3 py-1.5 rounded-lg text-xs ml-5">
+                  Topology
+                </span>
+                <span className="bg-yellow-200 border px-3 py-1.5 rounded-lg text-xs ml-5">
+                  Neural
+                </span>
               </div>
-                 
-            </div>
-            <div className="-mt-2 text-center">
-                  <span className = "text-xs"> cs+math </span>
-                  <span className = "ml-20 text-xs"> gpa </span>  
-                  <span className = "ml-20 text-xs"> year </span>    
-            </div>  
-            <div className="mt-2 text-center">
-                    <span className="bg-blue-200 border px-3 py-1.5 rounded-lg text-xs 0px]">Discrete</span>
-                    <span className="bg-pink-200 border px-3 py-1.5 rounded-lg text-xs ml-5">Topology</span> 
-                    <span className="bg-yellow-200 border px-3 py-1.5 rounded-lg text-xs ml-5" >Neural</span>
             </div>
-          </div> 
           </section>
         </div>
       </div>
-      
-      
     </>
-
-     
-
-
-
-
   );
 };
 
diff --git a/client/src/pages/profile.tsx b/client/src/pages/profile.tsx
index 4652133..cdf1cbf 100644
--- a/client/src/pages/profile.tsx
+++ b/client/src/pages/profile.tsx
@@ -3,6 +3,7 @@ import { Autocomplete } from "@/components/profile/autocomplete";
 import SocialButton from "@/components/profile/social-button";
 import TagsContainer from "@/components/profile/tags-container";
 import { example_skills } from "@/contants";
+import Image from "next/image";
 import { FC, useEffect, useState } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
 
@@ -56,11 +57,10 @@ const Profile: FC = () => {
             <div className="flex flex-row gap-8">
               {/* PFP CONTAINER */}
               <div>
-                <img
-                  width="96"
-                  height="96"
-                  style={{}}
-                  className=" rounded-full"
+                <Image
+                  width={96}
+                  height={96}
+                  className="rounded-full"
                   alt="profile picture"
                   // src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTyKN-iSchpbCqguP_UfZXbrQrb3Zu7LcPfQqhq9gF3hDhGyWB_"
                   src="https://www.corporatephotographerslondon.com/wp-content/uploads/2021/07/LinkedIn_profile_photo_sample_1-300x300.jpg"