diff --git a/tasker-client/src/app/components/Navbar/index.tsx b/tasker-client/src/app/components/Navbar/index.tsx
index f8e5a68..0453a9e 100644
--- a/tasker-client/src/app/components/Navbar/index.tsx
+++ b/tasker-client/src/app/components/Navbar/index.tsx
@@ -77,7 +77,7 @@ const Navbar = () => {
           <div className="align-center flex h-9 w-9 justify-center">
             {!!currentUserDetails?.profilePictureUrl ? (
               <Image
-                src={`/${currentUserDetails?.profilePictureUrl}`}
+                src={`${process.env.S3_PUBLIC_IMAGE_URL}/${currentUserDetails?.profilePictureUrl}`}
                 alt={currentUserDetails?.username || "User Profile Picture"}
                 width={100}
                 height={50}
diff --git a/tasker-client/src/app/components/Sidebar/index.tsx b/tasker-client/src/app/components/Sidebar/index.tsx
index 928b23b..2299589 100644
--- a/tasker-client/src/app/components/Sidebar/index.tsx
+++ b/tasker-client/src/app/components/Sidebar/index.tsx
@@ -70,7 +70,12 @@ const Sidebar = () => {
           )}
         </div>
         <div className="flex items-center gap-5 border-y-[1.5px] border-gray-200 px-8 py-4 dark:border-gray-700">
-          <Image src="/logo.png" alt="logo" width={40} height={40} />
+          <Image
+            src={`${process.env.S3_PUBLIC_IMAGE_URL}/logo.png`}
+            alt="logo"
+            width={40}
+            height={40}
+          />
           <div>
             <h3 className="text-md font-bold tracking-widest dark:text-gray-200">
               Tasker.IO
@@ -157,7 +162,7 @@ const Sidebar = () => {
           <div className="align-center flex h-9 w-9 justify-center">
             {!!currentUserDetails?.profilePictureUrl ? (
               <Image
-                src={`/${currentUserDetails?.profilePictureUrl}`}
+                src={`${process.env.S3_PUBLIC_IMAGE_URL}/${currentUserDetails?.profilePictureUrl}`}
                 alt={currentUserDetails?.username || "User Profile Picture"}
                 width={100}
                 height={50}
diff --git a/tasker-client/src/app/components/TaskCard/index.tsx b/tasker-client/src/app/components/TaskCard/index.tsx
index cf29c71..bd409cb 100644
--- a/tasker-client/src/app/components/TaskCard/index.tsx
+++ b/tasker-client/src/app/components/TaskCard/index.tsx
@@ -16,7 +16,7 @@ const TaskCard = ({ task }: Props) => {
           <div className="flex flex-wrap">
             {task.attachments && task.attachments.length > 0 && (
               <Image
-                src={`/${task.attachments[0].fileURL}`}
+                src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.attachments[0].fileURL}`}
                 alt={task.attachments[0].fileName}
                 width={400}
                 height={200}
diff --git a/tasker-client/src/app/components/UserCard/index.tsx b/tasker-client/src/app/components/UserCard/index.tsx
index 6ce3eb3..876fbe3 100644
--- a/tasker-client/src/app/components/UserCard/index.tsx
+++ b/tasker-client/src/app/components/UserCard/index.tsx
@@ -11,7 +11,7 @@ const UserCard = ({ user }: Props) => {
     <div className="flex items-center rounded border p-4 shadow">
       {user.profilePictureUrl && (
         <Image
-          src={`/${user.profilePictureUrl}`}
+          src={`${process.env.S3_PUBLIC_IMAGE_URL}/${user.profilePictureUrl}`}
           alt="profile picture"
           width={32}
           height={32}
diff --git a/tasker-client/src/app/projects/BoardView/index.tsx b/tasker-client/src/app/projects/BoardView/index.tsx
index 9a29b38..b66d10e 100644
--- a/tasker-client/src/app/projects/BoardView/index.tsx
+++ b/tasker-client/src/app/projects/BoardView/index.tsx
@@ -197,7 +197,7 @@ const Task = ({ task }: TaskProps) => {
     >
       {task.attachments && task.attachments.length > 0 && (
         <Image
-          src={`/${task.attachments[0].fileURL}`}
+          src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.attachments[0].fileURL}`}
           alt={task.attachments[0].fileName}
           width={400}
           height={200}
@@ -249,7 +249,7 @@ const Task = ({ task }: TaskProps) => {
             {task.assignee && (
               <Image
                 key={task.assignee.userId}
-                src={`/${task.assignee.profilePictureUrl!}`}
+                src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.assignee.profilePictureUrl!}`}
                 alt={task.assignee.username}
                 width={30}
                 height={30}
@@ -259,7 +259,7 @@ const Task = ({ task }: TaskProps) => {
             {task.author && (
               <Image
                 key={task.author.userId}
-                src={`/${task.author.profilePictureUrl!}`}
+                src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.author.profilePictureUrl!}`}
                 alt={task.author.username}
                 width={30}
                 height={30}
diff --git a/tasker-client/src/app/users/page.tsx b/tasker-client/src/app/users/page.tsx
index 887dbe8..0d604d7 100644
--- a/tasker-client/src/app/users/page.tsx
+++ b/tasker-client/src/app/users/page.tsx
@@ -31,7 +31,7 @@ const columns: GridColDef[] = [
       <div className="flex h-full w-full items-center justify-center">
         <div className="h-9 w-9">
           <Image
-            src={`/${params.value}`}
+            src={`${process.env.S3_PUBLIC_IMAGE_URL}/${params.value}`}
             alt={params.row.username}
             width={100}
             height={50}