diff --git a/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/controller/InstructorController.java b/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/controller/InstructorController.java
index 0e6b9d5..fa531b5 100644
--- a/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/controller/InstructorController.java
+++ b/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/controller/InstructorController.java
@@ -23,9 +23,9 @@ public ResponseEntity<InstructorDto> getInstructorInfo(
         return ResponseEntity.ok(instructorService.findInstructorDtoByInstructorEmail(email));
     }
 
-    @PostMapping("/instructor/paypal")
-    public ResponseEntity<InstructorDto> addPayPalEmail(@RequestHeader(value = "Authorization") String instructorToken,
-                                                        @RequestParam(value = "paypalEmail")  String paypalEmail){
+    @GetMapping("/instructor/paypal")
+    public ResponseEntity<InstructorDto> addPayPalEmail(@RequestHeader(value = "Authorization", defaultValue = "") String instructorToken,
+                                                        @RequestParam String paypalEmail){
         String email = jwtService.extractUserEmail(instructorToken.substring(7));
         return ResponseEntity.ok(instructorService.addInstructorPayPalEmail(email,paypalEmail));
     }
diff --git a/frontend/my-app/src/lib/types.ts b/frontend/my-app/src/lib/types.ts
index 4d92489..e16e69e 100644
--- a/frontend/my-app/src/lib/types.ts
+++ b/frontend/my-app/src/lib/types.ts
@@ -1,10 +1,26 @@
 import { type } from "os";
+export type MonthlyData = {
+  year?: number | null;
+  firstMonth: number;
+  secondMonth: number;
+  thirdMonth: number;
+  fourthMonth: number;
+  fifthMonth: number;
+  sixthMonth: number;
+  seventhMonth: number;
+  eighthMonth: number;
+  ninthMonth: number;
+  tenthMonth: number;
+  eleventhMonth: number;
+  twelfthMonth: number;
+}
 export type InstructorInfo = {
   id: number;
   fullName: string;
   specialization:string;
   phone:number;
   avatar:string;
+  paypalEmail:string;
 };
 export type InstructorSalary = {
   instructorInfo: InstructorInfo;
diff --git a/frontend/my-app/src/routes/CourseCard.svelte b/frontend/my-app/src/routes/CourseCard.svelte
index 3d5137d..046ba88 100644
--- a/frontend/my-app/src/routes/CourseCard.svelte
+++ b/frontend/my-app/src/routes/CourseCard.svelte
@@ -14,6 +14,7 @@
   export let isFetchManual: boolean;
   import { Card, Rating, Badge } from "flowbite-svelte";
   let open = true;
+  let tmpRating: number;
   let counter = 6;
   let message = "";
   let errorMsg = "";
@@ -91,7 +92,10 @@
     await axios
       .get(apiBaseUrl + `review/rating?courseID=${id}`)
       .then((response) => {
-        if (response.status === 200) rating = response.data;
+        if (response.status === 200){
+          tmpRating = response.data;
+          rating = parseFloat(tmpRating.toFixed(1));
+        } 
       });
   }
   let status = false;
@@ -146,7 +150,7 @@
         </h5>
       </a>
       <Rating {rating} class="mt-2.5 mb-5">
-        <Badge slot="text" class="ml-3">{rating.toFixed(1)}</Badge>
+        <Badge slot="text" class="ml-3">{rating}</Badge>
       </Rating>
       <div class="flex justify-between items-center">
         <span class="text-3xl font-bold text-gray-900 dark:text-white"
diff --git a/frontend/my-app/src/routes/Header.svelte b/frontend/my-app/src/routes/Header.svelte
index 74d3c88..24984c5 100644
--- a/frontend/my-app/src/routes/Header.svelte
+++ b/frontend/my-app/src/routes/Header.svelte
@@ -124,9 +124,11 @@
     <NavHamburger />
   </div>
   <NavUl>
-    {#if jwtData.role == "CUSTOMER"}
+    {#if jwtData.role === "CUSTOMER"}
       <NavLi href="/mylearning">My Learning</NavLi>
       <NavLi href="/cart">Your Cart</NavLi>
+      {:else if jwtData.role === "STAFF"}
+      <NavLi href="/staff/revenuestatistics">Staff Management Dashboard</NavLi>
     {:else}
       <NavLi href="/teaching">Assign Instructor</NavLi>
     {/if}
@@ -136,7 +138,7 @@
       <Avatar id="user-drop" src="" class="cursor-pointer" />
       <Dropdown triggeredBy="#user-drop">
         <DropdownHeader>
-          <span class="block text-sm">User</span>
+          <span class="block text-sm">{jwtData.role}</span>
           <span class="block truncate text-sm font-medium">{jwtData.email}</span
           >
         </DropdownHeader>
diff --git a/frontend/my-app/src/routes/RevenueStatistics.svelte b/frontend/my-app/src/routes/RevenueStatistics.svelte
index fa74536..32f106e 100644
--- a/frontend/my-app/src/routes/RevenueStatistics.svelte
+++ b/frontend/my-app/src/routes/RevenueStatistics.svelte
@@ -1,148 +1,269 @@
-<script>
-	import { Chart, Card, A, Button, Dropdown, DropdownItem } from 'flowbite-svelte';
-	import { UserGroupSolid, ArrowUpSolid, ChevronDownSolid, ChevronRightSolid } from 'flowbite-svelte-icons';
-  
-	const options = {
-	  colors: ['#00FFFF', '#20B2AA'],
-	  series: [
-		{
-		  name: 'Organic',
-		  color: '#00FFFF',
-		  data: [
-			{ x: 'Mon', y: 2310 },
-			{ x: 'Tue', y: 122 },
-			{ x: 'Wed', y: 63 },
-			{ x: 'Thu', y: 421 },
-			{ x: 'Fri', y: 122 },
-			{ x: 'Sat', y: 323 },
-			{ x: 'Sun', y: 111 },
-			{ x: '8'  , y: 600 },
-			{ x: '9'  , y: 700 },
-			{ x: '10'  , y: 800 },
-			{ x: '11'  , y: 900 },
-			{ x: '12'  , y: 1000 }
-		  ]
-		}
-	  ],
-	  chart: {
-		type: 'bar',
-		height: '320px',
-		fontFamily: 'Inter, sans-serif',
-		toolbar: {
-		  show: false
-		}
-	  },
-	  plotOptions: {
-		bar: {
-		  horizontal: false,
-		  columnWidth: '70%',
-		  borderRadiusApplication: 'end',
-		  borderRadius: 8
-		}
-	  },
-	  tooltip: {
-		shared: true,
-		intersect: false,
-		style: {
-		  fontFamily: 'Inter, sans-serif'
-		}
-	  },
-	  states: {
-		hover: {
-		  filter: {
-			type: 'darken',
-			value: 1
-		  }
-		}
-	  },
-	  stroke: {
-		show: true,
-		width: 0,
-		colors: ['transparent']
-	  },
-	  grid: {
-		show: false,
-		strokeDashArray: 4,
-		padding: {
-		  left: 2,
-		  right: 2,
-		  top: -14
-		}
-	  },
-	  dataLabels: {
-		enabled: false
-	  },
-	  legend: {
-		show: false
-	  },
-	  xaxis: {
-		floating: false,
-		labels: {
-		  show: true,
-		  style: {
-			fontFamily: 'Inter, sans-serif',
-			cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
-		  }
+<script lang="ts">
+	import type { MonthlyData } from "$lib/types";
+	import axios, { AxiosError, type AxiosResponse } from "axios";
+	import {
+		Chart,
+		Card,
+		A,
+		Button,
+		Dropdown,
+		DropdownItem,
+	} from "flowbite-svelte";
+	import {
+		UserGroupSolid,
+		ArrowUpSolid,
+		ChevronDownSolid,
+		ChevronRightSolid,
+	} from "flowbite-svelte-icons";
+	import { CurrencyHandler, apiBaseUrl } from "../service";
+	import { onMount } from "svelte";
+    import { page } from "$app/stores";
+	let monthlySalary: MonthlyData = {
+		firstMonth: 0,
+		secondMonth: 0,
+		thirdMonth: 0,
+		fourthMonth: 0,
+		fifthMonth: 0,
+		sixthMonth: 0,
+		seventhMonth: 0,
+		eighthMonth: 0,
+		ninthMonth: 0,
+		tenthMonth: 0,
+		eleventhMonth: 0,
+		twelfthMonth: 0,
+	};
+	let totalRevenue: string;
+	let options = {
+		colors: ["#00FFFF", "#20B2AA"],
+		series: [
+			{
+				name: "USD",
+				color: "#00FFFF",
+				data: [
+					{ x: "Jan", y: 0 },
+					{ x: "Feb", y: 0 },
+					{ x: "Mar", y: 0 },
+					{ x: "Apr", y: 0 },
+					{ x: "May", y: 0 },
+					{ x: "Jun", y: 0 },
+					{ x: "Jul", y: 0 },
+					{ x: "Aug", y: 0 },
+					{ x: "Sep", y: 0 },
+					{ x: "Oct", y: 0 },
+					{ x: "Nov", y: 0 },
+					{ x: "Dec", y: 0 },
+				],
+			},
+		],
+		chart: {
+			type: "bar",
+			height: "320px",
+			fontFamily: "Inter, sans-serif",
+			toolbar: {
+				show: false,
+			},
+		},
+		plotOptions: {
+			bar: {
+				horizontal: false,
+				columnWidth: "70%",
+				borderRadiusApplication: "end",
+				borderRadius: 8,
+			},
+		},
+		tooltip: {
+			shared: true,
+			intersect: false,
+			style: {
+				fontFamily: "Inter, sans-serif",
+			},
+		},
+		states: {
+			hover: {
+				filter: {
+					type: "darken",
+					value: 1,
+				},
+			},
+		},
+		stroke: {
+			show: true,
+			width: 0,
+			colors: ["transparent"],
+		},
+		grid: {
+			show: false,
+			strokeDashArray: 4,
+			padding: {
+				left: 2,
+				right: 2,
+				top: -14,
+			},
 		},
-		axisBorder: {
-		  show: false
+		dataLabels: {
+			enabled: false,
+		},
+		legend: {
+			show: false,
+		},
+		xaxis: {
+			floating: false,
+			labels: {
+				show: true,
+				style: {
+					fontFamily: "Inter, sans-serif",
+					cssClass:
+						"text-xs font-normal fill-gray-500 dark:fill-gray-400",
+				},
+			},
+			axisBorder: {
+				show: false,
+			},
+			axisTicks: {
+				show: false,
+			},
+		},
+		yaxis: {
+			show: false,
+		},
+		fill: {
+			opacity: 1,
 		},
-		axisTicks: {
-		  show: false
-		}
-	  },
-	  yaxis: {
-		show: false
-	  },
-	  fill: {
-		opacity: 1
-	  }
 	};
-  </script>
-  
-  <Card class = "max-w-screen-2xl">
-	<div class="flex justify-between pb-4 mb-4 border-b border-gray-200 dark:border-gray-700">
-	  <div class="flex items-center	w-max">
-		<div class="w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3">
-		  <UserGroupSolid class="w-6 h-6 text-gray-500 dark:text-gray-400"/>
-		</div>
-		<div>
-		  <h5 class="leading-none text-2xl font-bold text-gray-900 dark:text-white pb-1">3.4k</h5>
-		  <p class="text-sm font-normal text-gray-500 dark:text-gray-400">Leads generated per week</p>
+	const currentYear  = new Date().getFullYear();
+	const LastYear = currentYear - 1;
+	const TwoYearsAgo = currentYear - 2;
+	async function GetMonthlyData(getYear: number) {
+		let res;
+		// let year = $page.url.searchParams.get("year");
+		console.log(getYear)
+		res = axios
+			.get(apiBaseUrl + `transaction/revenue`, {
+				params: {
+					year: getYear,
+				},
+			})
+			.then((response: AxiosResponse) => {
+				if (response.status === 200) {
+					monthlySalary = response.data;
+					console.log(monthlySalary);
+					options.series[0].data = [
+						{ x: "Jan", y: monthlySalary.firstMonth },
+						{ x: "Feb", y: monthlySalary.secondMonth },
+						{ x: "Mar", y: monthlySalary.thirdMonth },
+						{ x: "Apr", y: monthlySalary.fourthMonth },
+						{ x: "May", y: monthlySalary.fifthMonth },
+						{ x: "Jun", y: monthlySalary.sixthMonth },
+						{ x: "Jul", y: monthlySalary.seventhMonth },
+						{ x: "Aug", y: monthlySalary.eighthMonth },
+						{ x: "Sep", y: monthlySalary.ninthMonth },
+						{ x: "Oct", y: monthlySalary.tenthMonth },
+						{ x: "Nov", y: monthlySalary.eleventhMonth },
+						{ x: "Dec", y: monthlySalary.twelfthMonth },
+					];
+					
+					totalRevenue = CurrencyHandler(monthlySalary.firstMonth +
+						monthlySalary.secondMonth +
+						monthlySalary.thirdMonth +
+						monthlySalary.fourthMonth +
+						monthlySalary.fifthMonth +
+						monthlySalary.sixthMonth +
+						monthlySalary.seventhMonth +
+						monthlySalary.eighthMonth +
+						monthlySalary.ninthMonth +
+						monthlySalary.tenthMonth +
+						monthlySalary.eleventhMonth +
+						monthlySalary.twelfthMonth);
+						
+				}
+			})
+			.catch((error: AxiosError) => {
+				console.log(error);
+			});
+	}
+
+	onMount(() => {
+		GetMonthlyData(currentYear);
+	});
+</script>
+
+<Card class="max-w-screen-2xl">
+	<div
+		class="flex justify-between pb-4 mb-4 border-b border-gray-200 dark:border-gray-700"
+	>
+		<div class="flex items-center w-max">
+			<div
+				class="w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3"
+			>
+				<UserGroupSolid
+					class="w-6 h-6 text-gray-500 dark:text-gray-400"
+				/>
+			</div>
+			<div>
+				<h5
+					class="leading-none text-2xl font-bold text-gray-900 dark:text-white pb-1"
+				>
+					3.4k
+				</h5>
+				<p class="text-sm font-normal text-gray-500 dark:text-gray-400">
+					Leads generated per week
+				</p>
+			</div>
 		</div>
-	  </div>
-	  <div>
-		<span class="bg-green-100 text-green-800 text-xs font-medium inline-flex items-center px-2.5 py-1 rounded-md dark:bg-green-900 dark:text-green-300 ">
-		  <ArrowUpSolid class="w-2.5 h-2.5 mr-1.5" />
-		  42.5%
-		</span>
-	  </div>
+		<!-- <div>
+			<span
+				class="bg-green-100 text-green-800 text-xs font-medium inline-flex items-center px-2.5 py-1 rounded-md dark:bg-green-900 dark:text-green-300"
+			>
+				<ArrowUpSolid class="w-2.5 h-2.5 mr-1.5" />
+				42.5%
+			</span>
+		</div> -->
 	</div>
 	<div class="grid grid-cols-2">
-	  <dl class="flex items-center">
-		<dt class="text-gray-500 dark:text-gray-400 text-sm font-normal mr-1">Money spent:</dt>
-		<dd class="text-gray-900 text-sm dark:text-white font-semibold">$3,232</dd>
-	  </dl>
-	  <dl class="flex items-center justify-end">
-		<dt class="text-gray-500 dark:text-gray-400 text-sm font-normal mr-1">Conversion rate:</dt>
-		<dd class="text-gray-900 text-sm dark:text-white font-semibold">1.2%</dd>
-	  </dl>
+		<dl class="flex items-center">
+			<dt
+				class="text-gray-500 dark:text-gray-400 text-sm font-normal mr-1"
+			>
+				Money spent:
+			</dt>
+			<dd class="text-gray-900 text-sm dark:text-white font-semibold">
+				{totalRevenue}
+			</dd>
+		</dl>
+		<!-- <dl class="flex items-center justify-end">
+			<dt
+				class="text-gray-500 dark:text-gray-400 text-sm font-normal mr-1"
+			>
+				Conversion rate:
+			</dt>
+			<dd class="text-gray-900 text-sm dark:text-white font-semibold">
+				1.2%
+			</dd>
+		</dl> -->
 	</div>
 	<Chart {options} />
-	<div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
-	  <div class="flex justify-between items-center pt-5">
-		<Button class="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 text-center inline-flex items-center dark:hover:text-white bg-transparent hover:bg-transparent dark:bg-transparent dark:hover:bg-transparent focus:ring-transparent dark:focus:ring-transparent py-0">Last 7 days<ChevronDownSolid class="w-2.5 m-2.5 ml-1.5" /></Button>
-		<Dropdown class="w-40" offset="-6">
-		  <DropdownItem>Yesterday</DropdownItem>
-		  <DropdownItem>Today</DropdownItem>
-		  <DropdownItem>Last 7 days</DropdownItem>
-		  <DropdownItem>Last 30 days</DropdownItem>
-		  <DropdownItem>Last 90 days</DropdownItem>
-		</Dropdown>
-		<A href="/" class="uppercase text-sm font-semibold hover:text-primary-700 dark:hover:text-primary-500 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2 hover:no-underline">
-		  Leads Report
-		  <ChevronRightSolid class="w-2.5 h-2.5 ml-1.5" />
-		</A>
-	  </div>
+	<div
+		class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between"
+	>
+		<div class="flex justify-between items-center pt-5">
+			<Button
+				class="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 text-center inline-flex items-center dark:hover:text-white bg-transparent hover:bg-transparent dark:bg-transparent dark:hover:bg-transparent focus:ring-transparent dark:focus:ring-transparent py-0"
+				>Yearly Profits<ChevronDownSolid
+					class="w-2.5 m-2.5 ml-1.5"
+				/></Button
+			>
+			<Dropdown class="w-40" offset="-6">
+				<DropdownItem on:click={()=>{GetMonthlyData(currentYear)}}>This Year</DropdownItem>
+				<DropdownItem on:click={()=>{GetMonthlyData(LastYear)}}>Last Year</DropdownItem>
+				<DropdownItem on:click={()=>{GetMonthlyData(TwoYearsAgo)}}>2 Years Ago</DropdownItem>
+			</Dropdown>
+			<A
+				href="/"
+				class="uppercase text-sm font-semibold hover:text-primary-700 dark:hover:text-primary-500 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2 hover:no-underline"
+			>
+				Leads Report
+				<ChevronRightSolid class="w-2.5 h-2.5 ml-1.5" />
+			</A>
+		</div>
 	</div>
-  </Card>
\ No newline at end of file
+</Card>
diff --git a/frontend/my-app/src/routes/instructor/+page.svelte b/frontend/my-app/src/routes/instructor/+page.svelte
index c4166a5..e2f134e 100644
--- a/frontend/my-app/src/routes/instructor/+page.svelte
+++ b/frontend/my-app/src/routes/instructor/+page.svelte
@@ -1,28 +1,22 @@
 <script lang="ts">
-  import axios from "axios";
+  import axios, { AxiosError, type AxiosResponse } from "axios";
   import { CurrencyHandler, GetCookie, apiBaseUrl } from "../../service";
   import { onMount } from "svelte";
   import headerImage from "$lib/assets/Header.jpg";
-  import type { Course, InstructorSalary } from "$lib/types";
+  import type { Course, InstructorInfo, InstructorSalary } from "$lib/types";
   import CreateCourseSection from "../CreateCourseSection.svelte";
   import CreateCourse from "../CreateCourse.svelte";
   import { Button, Popover } from "flowbite-svelte";
-    import { ChevronRightOutline, QuestionCircleSolid } from "flowbite-svelte-icons";
+  import { ChevronRightOutline, QuestionCircleSolid } from "flowbite-svelte-icons";
 
-  interface Instructorinterface {
-    email: string;
-    password: string;
-    fullName: string;
-    specialization: string;
-    phone: string;
-  }
   let instructorRevenue: InstructorSalary = {
       instructorInfo: {
           id: 0,
           fullName: "",
           specialization: "",
           phone: 0,
-          avatar: "https://t4.ftcdn.net/jpg/04/08/24/43/360_F_408244382_Ex6k7k8XYzTbiXLNJgIL8gssebpLLBZQ.jpg"
+          avatar: "https://t4.ftcdn.net/jpg/04/08/24/43/360_F_408244382_Ex6k7k8XYzTbiXLNJgIL8gssebpLLBZQ.jpg",
+          paypalEmail: ""
       },
       monthlySalary: 0,
       courseSelling: 0,
@@ -34,13 +28,32 @@
     createDate: "",
     isActive: false,
   };
-  let InstructorInfo: Instructorinterface = {
-      email: "",
-      password: "",
+  let instructorInfo: InstructorInfo = {
+      id: 0,
       fullName: "",
       specialization: "",
-      phone: ""
+      phone: 0,
+      avatar: "",
+      paypalEmail: ""
   };
+  async function AddPaypalEmail() {
+    let res;
+    res = await axios.get(apiBaseUrl + `instructor/paypal?paypalEmail=${instructorInfo.paypalEmail}`,{
+      headers: {
+        Authorization: `Bearer ${GetCookie("USER")}`,
+      },
+    })
+    .then((response: AxiosResponse) => {
+      if (response.status === 200){
+        instructorInfo = response.data;
+        console.log(instructorInfo);
+        window.location.reload();
+      }
+    })
+    .catch((error: AxiosError) => {
+      console.log(error);
+    })
+  }
   async function getInstructorSalary() {
     try {
       await axios
@@ -53,6 +66,9 @@
           if (response.status === 200) {
             console.log(response.data);
             instructorRevenue = response.data;
+            if(instructorRevenue.instructorInfo.avatar === null || instructorRevenue.instructorInfo.avatar === ""){
+              instructorRevenue.instructorInfo.avatar = "https://t4.ftcdn.net/jpg/04/08/24/43/360_F_408244382_Ex6k7k8XYzTbiXLNJgIL8gssebpLLBZQ.jpg"
+            }
           }
         });
     } catch (e) {}
@@ -68,7 +84,7 @@
         .then((response) => {
           if (response.status === 200) {
             console.log(response.data);
-            InstructorInfo = response.data;
+            instructorInfo = response.data;
           }
         });
     } catch (e) {}
@@ -149,7 +165,7 @@
               <div class="text-lg text-gray-500 p-0.5">
                 <i class="fa fa-phone" />Phone number
               </div>
-              <div class="font-medium p-0.5">{InstructorInfo.phone}</div>
+              <div class="font-medium p-0.5">{instructorInfo.phone}</div>
             </div>
           </div>
           <hr class="my-6 border-t border-gray-300" />
@@ -185,14 +201,14 @@
           <h1 class="text-2xl font-bold mb-4">General information</h1>
           <h2 class="text-xl font-medium mb-4">About Me</h2>
           <p class="text-gray-700">
-            Hey there! I'm {InstructorInfo.fullName}, a passionate {InstructorInfo.specialization} who embarked on this captivating journey back in {jwtData.createDate}.          </p>
+            Hey there! I'm {instructorInfo.fullName}, a passionate {instructorInfo.specialization} who embarked on this captivating journey back in {jwtData.createDate}.          </p>
 
           <br />
           <!--1-->
           <div class="grid grid-cols-2 gap-4">
             <div>
               <div>FullName</div>
-              <div class="font-medium">{InstructorInfo.fullName}</div>
+              <div class="font-medium">{instructorInfo.fullName}</div>
             </div>
             <div>
               <div>Join Date</div>
@@ -201,13 +217,37 @@
 
             <div>
               <div>Specialization</div>
-              <div class="font-medium">{InstructorInfo.specialization}</div>
+              <div class="font-medium">{instructorInfo.specialization}</div>
             </div>
 
             <div>
               <div>Birthday</div>
               <div class="font-medium">01-12-2003</div>
             </div>
+            <form on:submit={AddPaypalEmail}>
+              <div>Paypal Email</div>
+              <div class="flex items-center mr-32 border-b border-teal-500 py-2">
+                <input
+                  class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
+                  type="text"
+                  placeholder=" "
+                  aria-label="Full name"
+                  bind:value={instructorInfo.paypalEmail}
+                />
+                <button
+                  class="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded"
+                  type="submit"
+                >
+                  Save
+                </button>
+                <button
+                  class="flex-shrink-0 border-transparent border-4 text-teal-500 hover:text-teal-800 text-sm py-1 px-2 rounded"
+                  type="reset"
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
           </div>
           <hr class="my-6 border-t border-gray-300" />
           <!--2-->
diff --git a/frontend/my-app/src/routes/profile/+page.svelte b/frontend/my-app/src/routes/profile/+page.svelte
index 3affa9b..5f7d612 100644
--- a/frontend/my-app/src/routes/profile/+page.svelte
+++ b/frontend/my-app/src/routes/profile/+page.svelte
@@ -33,6 +33,9 @@
           if (response.status === 200) {
             console.log(response.data);
             customerInfo = response.data;
+            if(customerInfo.avatarLink === null || customerInfo.avatarLink === ""){
+              customerInfo.avatarLink = "https://t4.ftcdn.net/jpg/04/08/24/43/360_F_408244382_Ex6k7k8XYzTbiXLNJgIL8gssebpLLBZQ.jpg";
+            }
           } else if (response.status === 401) {
           }
         });