diff --git a/src/lib/components/profile/Appointment.svelte b/src/lib/components/profile/Appointment.svelte
new file mode 100644
index 0000000..3d8f50d
--- /dev/null
+++ b/src/lib/components/profile/Appointment.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	// import type { ExtendedAppointment } from "$lib/types";
+	// import { sectionName, userName } from "$lib/utils";
+
+	// export let appointment: ExtendedAppointment;
+
+	// $: appointmentBlock = appointment.appointment_block;
+	// $: instructionalMember = appointmentBlock.instructional_member;
+	// $: startTime = appointment.appointment_block.start_time;
+</script>
+
+<!-- Appointment Space -->
+<div class="flex space-x-5">
+	<!-- Appointment Block -->
+	<div class="bg-secondary w-fit h-fit p-4 rounded">
+		<!-- Name of TA -->
+		<p class="font-bold mb-1">Office Hours with Dylan Halstead</p>
+
+		<!-- Class of Appointment -->
+		<p class="text-sm">ITSC 3155 - Software Engineering</p>
+
+		<!-- Time of Appointment -->
+		<p class="text-sm">12:00 - 1:00 PM</p>
+
+		<!-- Unique Zoom Link -->
+		<a class="text-sm" href="#"><u>Zoom Link</u></a>
+	</div>
+</div>
+<!-- End Appointment Block -->
+
+<!-- Below is the original code for the Appointment component with dynamic inserts -->
+
+<!-- <script lang="ts">
+
+        import type { ExtendedAppointment } from "$lib/types";
+        import { sectionName, userName } from "$lib/utils";
+    
+        export let appointment: ExtendedAppointment;
+    
+        $: appointmentBlock = appointment.appointment_block;
+        $: instructionalMember = appointmentBlock.instructional_member;
+        $: startTime = appointment.appointment_block.start_time;
+    
+     </script> -->
+
+<!-- Appointment Space -->
+<!-- <div class="flex space-x-5"> -->
+
+<!-- Appointment Block -->
+<!-- <div class="bg-secondary w-fit h-fit p-4 rounded"> -->
+
+<!-- Name of TA -->
+<!-- <p class='font-bold mb-1'>Office Hours with {userName(instructionalMember.user)}</p> -->
+
+<!-- Class of Appointment -->
+<!-- <p class="text-sm">{sectionName(instructionalMember.section)}</p> -->
+
+<!-- Time of Appointment -->
+<!-- <p class="text-sm">{startTime.toLocaleString("en-US", {
+                timeStyle: "short"
+            })}</p> -->
+
+<!-- Unique Zoom Link -->
+<!-- <a class="text-sm" href={appointment.link}><u>{appointment.link}</u></a>
+    
+        </div> 
+    </div> -->
+<!-- End Appointment Block -->
diff --git a/src/lib/components/profile/Class.svelte b/src/lib/components/profile/Class.svelte
new file mode 100644
index 0000000..7849f5e
--- /dev/null
+++ b/src/lib/components/profile/Class.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	//import type { PartialCourse } from "$lib/types";
+	//let course: PartialCourse;
+
+	// export let departmentCode = 'unknown';
+	// export let className = 'unknown';
+</script>
+
+<!-- Class Space -->
+<div class="flex flex-wrap space-x-5">
+	<!-- Class Block -->
+	<div class="bg-neutral w-fit h-fit p-4 rounded flex justify-between space-x-5">
+		<!-- Dynamic: Name of Class and its Department Code -->
+		<div class="flex space-x-2">
+			<div>
+				<p class="p-1">ITSC 2214</p>
+			</div>
+			<div>
+				<p class="p-1">Data Structures and Algorithms</p>
+			</div>
+		</div>
+
+		<div class="flex rounded shadow-md p-1 bg-secondary pl-2 pr-2">
+			<div>
+				<a class="text-white" href="/courses/[id]/sections/[id]/members/[id]/appointments/book"
+					>+ Book</a>
+			</div>
+		</div>
+	</div>
+</div>
+<!-- End Class Block -->
+
+<!-- Below is the original code for the Appointment component with dynamic inserts -->
+
+<!-- <script lang="ts">
+
+        //import type { PartialCourse } from "$lib/types";
+        //let course: PartialCourse;
+    
+        export let departmentCode = 'unknown';
+        export let className = 'unknown';
+    
+    </script> -->
+
+<!-- Class Space -->
+<!-- <div class="flex flex-wrap space-x-5"> -->
+
+<!-- Class Block -->
+<!-- <div class="bg-neutral w-fit h-fit p-4 rounded flex justify-between space-x-5"> -->
+
+<!-- Dynamic: Name of Class and its Department Code -->
+<!-- <div class="flex space-x-2">
+                <div>
+                    <p class="p-1">{departmentCode}</p>
+                </div>
+                <div>
+                    <p class="p-1">{className}</p>
+                </div>
+            </div>
+    
+            <div class="flex rounded shadow-md p-1 bg-secondary pl-2 pr-2">
+    
+                <div>
+                    <a class="text-white" href="/courses/[id]/sections/[id]/members/[id]/appointments/book">+ Book</a>
+                </div>
+            </div>
+    
+        </div>
+    </div> -->
+<!-- End Class Block -->
diff --git a/src/lib/components/profile/InstructorClass.svelte b/src/lib/components/profile/InstructorClass.svelte
new file mode 100644
index 0000000..49b1bf7
--- /dev/null
+++ b/src/lib/components/profile/InstructorClass.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	// We want this to display the classes in which an instructor teaches only
+	// Instead of a booking button in the modal, point to the class overview page
+	// import type { PartialCourse } from "$lib/types";
+
+	// export let insCourse : PartialCourse;
+
+	// $: name = insCourse.course_name;
+	// $: dptName = insCourse.department_code;
+</script>
+
+<!-- Class Space -->
+<div class="flex flex-wrap space-x-5">
+	<!-- Class Block -->
+	<div class="bg-neutral w-fit h-fit p-4 rounded flex justify-between space-x-5">
+		<!-- Dynamic: Name of Class and its Department Code -->
+		<div class="flex space-x-2">
+			<div>
+				<p class="p-1">ITSC 4681</p>
+			</div>
+			<div>
+				<p class="p-1">Senior Design I</p>
+			</div>
+		</div>
+
+		<div class="flex rounded shadow-md p-1 bg-secondary pl-2 pr-2">
+			<div>
+				<a class="text-white" href="/courses/[id]/sections/[id]">View Class</a>
+			</div>
+		</div>
+	</div>
+</div>
+<!-- End Class Block -->
+
+<!-- Below is the original code for the InstructorClass component with dynamic inserts -->
+
+<!-- <script lang="ts">
+
+    // We want this to display the classes in which an instructor teaches only
+    // Instead of a booking button in the modal, point to the class overview page
+    import type { PartialCourse } from "$lib/types";
+    
+    export let insCourse : PartialCourse;
+    
+    $: name = insCourse.course_name;
+    $: dptName = insCourse.department_code;
+    
+    </script> -->
+
+<!-- Class Space -->
+<!-- <div class="flex flex-wrap space-x-5"> -->
+
+<!-- Class Block -->
+<!-- <div class="bg-neutral w-fit h-fit p-4 rounded flex justify-between space-x-5"> -->
+
+<!-- Dynamic: Name of Class and its Department Code -->
+<!-- <div class="flex space-x-2">
+                <div>
+                    <p class="p-1">{dptName}</p>
+                </div>
+                <div>
+                    <p class="p-1">{name}</p>
+                </div>
+            </div>
+    
+            <div class="flex rounded shadow-md p-1 bg-secondary pl-2 pr-2">
+    
+                <div>
+                    <a class="text-white" href="/courses/[id]/sections/[id]">View Class</a>
+                </div>
+            </div>
+    
+        </div>
+    </div> -->
+<!-- End Class Block -->
diff --git a/src/routes/(signed_in)/profile/[profileID]/+page.svelte b/src/routes/(signed_in)/profile/[profileID]/+page.svelte
index 0b5c2e6..9036afa 100644
--- a/src/routes/(signed_in)/profile/[profileID]/+page.svelte
+++ b/src/routes/(signed_in)/profile/[profileID]/+page.svelte
@@ -1,10 +1,475 @@
-<script>
-	import { title } from "$lib/stores";
-	title.set("Profile");
+<script lang="ts">
+	import Appointment from "$lib/components/profile/Appointment.svelte";
+	import Class from "$lib/components/profile/Class.svelte";
+	import InstructorClass from "$lib/components/profile/InstructorClass.svelte";
+	// import type { ExtendedAppointment } from "$lib/types";
+	// import type { PartialCourse } from "$lib/types";
+
+	import { type ExtendedSectionMember, SectionMemberType } from "$lib/types";
+
+	import type { PageData } from "./$types.js";
+
+	export let member: ExtendedSectionMember;
+	export let data: PageData;
+
+	// let course: Array<PartialCourse>;
+	// let appointment: Array<ExtendedAppointment>;
 </script>
 
-<h1>Profile</h1>
+<div class="flex flex-col m-12 space-y-14">
+	<!-- User Info Hero -->
+	<div class="flex space-x-5">
+		<!-- profile image -->
+		<div>
+			<img class="rounded-full w-40 h-40" src={data.auth.user.picture} alt="Placeholder" />
+		</div>
+
+		<!-- Name of User and Email -->
+		<div class="flex flex-col space-y-3 justify-center">
+			<div class="flex space-x-2">
+				<div>
+					<h1 class="text-2xl font-bold">{data.auth.user.name}</h1>
+				</div>
+			</div>
+			<div>
+				<h3 class="text-lg">{data.auth.user.email}</h3>
+			</div>
+		</div>
+	</div>
+
+	<div class="flex items-center">
+		<div class="flex w-4/5 border-t-4 border-primary"></div>
+	</div>
+
+	<!--  {{ Appointments : Students and TAs }} -->
+
+	<!-- {{ Student Appointments }} -->
+	{#if member.member_type === SectionMemberType.Student}
+		<div class="flex flex-col space-y-10">
+			<div class="flex flex-col">
+				<div>
+					<h1 class="text-2xl font-bold">My Appointments</h1>
+				</div>
+				<div>
+					<h3 class="text-lg">Upcoming Meetings</h3>
+				</div>
+			</div>
+
+			<!-- {{ Appointemnt Components }} -->
+
+			<div class="flex flex-wrap space-x-7">
+				<div>
+					<Appointment />
+				</div>
+				<div>
+					<Appointment />
+				</div>
+				<div>
+					<Appointment />
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	<!-- {{ TA Appointments: With students and with other TAs }} -->
+	{#if member.member_type === SectionMemberType.TA}
+		<div class="flex flex-col space-y-10">
+			<div class="flex flex-col">
+				<div>
+					<h1 class="text-2xl font-bold">Student Appointments</h1>
+				</div>
+				<div>
+					<h3 class="text-lg">Upcoming Meetings with Students</h3>
+				</div>
+			</div>
+
+			<!-- Appointemnt Components -->
+
+			<div class="flex flex-wrap space-x-7">
+				<div>
+					<Appointment />
+				</div>
+				<div>
+					<Appointment />
+				</div>
+			</div>
+		</div>
+
+		<!-- Also show the TA their appointments as a student themself -->
+		<div class="flex flex-col space-y-10">
+			<div class="flex flex-col">
+				<div>
+					<h1 class="text-2xl font-bold">My Appointments</h1>
+				</div>
+				<div>
+					<h3 class="text-lg">Upcoming Meeting</h3>
+				</div>
+			</div>
+
+			<!-- Appointemnt Components -->
+
+			<div class="flex flex-wrap space-x-7">
+				<div>
+					<Appointment />
+				</div>
+				<div>
+					<Appointment />
+				</div>
+				<div>
+					<Appointment />
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	<!-- {{ Classes : Students, TAs, Instructors }} -->
+
+	<!-- {{ Student Classes }} -->
+	{#if member.member_type === SectionMemberType.Student}
+		<div class="flex flex-col space-y-10">
+			<div class="flex flex-col">
+				<div>
+					<h1 class="text-2xl font-bold">My Classes</h1>
+				</div>
+				<div>
+					<h3 class="text-lg">Book Appointments with a TA</h3>
+				</div>
+			</div>
+
+			<!-- Class Components -->
+
+			<div class="flex flex-wrap space-x-7">
+				<div>
+					<Class />
+				</div>
+				<div>
+					<Class />
+				</div>
+				<div>
+					<Class />
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	<!-- {{ TA Classes: Section 1 = Classes they TA for // Section 2 = Classes they are enrolled in as a student }}-->
+	{#if member.member_type === SectionMemberType.TA}
+		<div class="flex flex-col space-y-10">
+			<div class="flex flex-col">
+				<div>
+					<h1 class="text-2xl font-bold">TA Classes</h1>
+				</div>
+				<div>
+					<h3 class="text-lg">View Classes you TA for Here</h3>
+				</div>
+			</div>
+
+			<!-- Class Components -->
+
+			<div class="flex flex-wrap space-x-7">
+				<div>
+					<Class />
+				</div>
+				<div>
+					<Class />
+				</div>
+			</div>
+		</div>
+
+		<div class="flex flex-col space-y-10">
+			<div class="flex flex-col">
+				<div>
+					<h1 class="text-2xl font-bold">My Classes</h1>
+				</div>
+				<div>
+					<h3 class="text-lg">Book Appointments with a TA</h3>
+				</div>
+			</div>
+
+			<!-- Class Components -->
+
+			<div class="flex flex-wrap space-x-7">
+				<div>
+					<Class />
+				</div>
+				<div>
+					<Class />
+				</div>
+				<div>
+					<Class />
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	<!-- {{ Instructor Classes: Shows classes they teach }}-->
+	{#if member.member_type === SectionMemberType.Instructor}
+		<div class="flex flex-col space-y-10">
+			<div class="flex flex-col">
+				<div>
+					<h1 class="text-2xl font-bold">Instructional Classes</h1>
+				</div>
+				<div>
+					<h3 class="text-lg">View Classes you Instruct Here</h3>
+				</div>
+			</div>
+
+			<!-- Class Components TODO: Loop classes instructor teaches -->
+
+			<div class="flex flex-wrap space-x-7">
+				<div>
+					<InstructorClass />
+				</div>
+				<div>
+					<InstructorClass />
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<!-- Below is the original code for the pfp with dynamic components - bugs exist 
+
+<script lang="ts">
+    import Appointment from "$lib/components/profile/Appointment.svelte";
+    import Class from "$lib/components/profile/Class.svelte";
+    import InstructorClass from "$lib/components/profile/Class.svelte";
+    import type { ExtendedAppointment } from "$lib/types";
+    import type { PartialCourse } from "$lib/types";
+
+    import { type ExtendedSectionMember, SectionMemberType } from "$lib/types";
+
+    import type { PageData } from "./$types.js";
+
+    export let member: ExtendedSectionMember;
+    export let data: PageData;
+
+    let course: Array<PartialCourse>;
+    let appointment: Array<ExtendedAppointment>;
+</script>
+
+<div class="flex flex-col m-12 space-y-14"> -->
+
+<!-- User Info Hero -->
+<!-- <div class="flex space-x-5"> -->
+<!-- profile image -->
+<!-- <div>
+            <img class="rounded-full w-40 h-40" src={data.auth.user.picture} alt="Placeholder">
+        </div> -->
+
+<!-- Name of User and Email -->
+<!-- <div class="flex flex-col space-y-3 justify-center">
+            <div class="flex space-x-2">
+                <div>
+                    <h1 class="text-2xl font-bold">{data.auth.user.name}</h1>
+                </div>
+            </div>
+            <div>
+                <h3 class="text-lg">{data.auth.user.email}</h3>
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="flex items-center">
+        <div class="flex w-4/5 border-t-4 border-primary"></div>
+    </div> -->
+
+<!--  {{ Appointments : Students and TAs }} -->
+
+<!-- {{ Student Appointments }} -->
+<!-- {#if member.member_type === SectionMemberType.Student}
+    <div class="flex flex-col space-y-10">
+
+        <div class="flex flex-col">
+            <div>
+                <h1 class="text-2xl font-bold">My Appointments</h1>
+            </div>
+            <div>
+                <h3 class="text-lg">Upcoming Meetings</h3>
+            </div>
+        </div> -->
+
+<!-- {{ Appointemnt Components }} -->
+
+<!-- <div class="flex flex-wrap space-x-7">
+            {#each appointment as apt}
+                {#if apt.student}
+                    <div>
+                        <Appointment appointment={apt}/>
+                    </div>
+                {/if}
+            {/each}
+        </div>
+
+    </div>
+
+    {/if} -->
+
+<!-- {{ TA Appointments: With students and with other TAs }} -->
+<!-- {#if member.member_type === SectionMemberType.TA}
+
+    <div class="flex flex-col space-y-10">
+
+        <div class="flex flex-col">
+            <div>
+                <h1 class="text-2xl font-bold">Student Appointments</h1>
+            </div>
+            <div>
+                <h3 class="text-lg">Upcoming Meetings with Students</h3>
+            </div>
+        </div> -->
+
+<!-- Appointemnt Components -->
+
+<!-- <div class="flex flex-wrap space-x-7">
+            {#each appointment as apt}
+                {#if apt.student}
+                    <div>
+                        <Appointment appointment={apt}/>
+                    </div>
+                {/if}
+            {/each}
+        </div>
+
+    </div> -->
+
+<!-- Also show the TA their appointments as a student themself -->
+<!-- <div class="flex flex-col space-y-10">
+
+        <div class="flex flex-col">
+            <div>
+                <h1 class="text-2xl font-bold">My Appointments</h1>
+            </div>
+            <div>
+                <h3 class="text-lg">Upcoming Meeting</h3>
+            </div>
+        </div> -->
+
+<!-- Appointemnt Components -->
+
+<!-- <div class="flex flex-wrap space-x-7">
+            {#each appointment as apt}
+                {#if apt.student}
+                    <div>
+                        <Appointment appointment={apt}/>
+                    </div>
+                {/if}
+            {/each}
+        </div>
+
+    </div>
+                    
+    {/if} -->
+
+<!-- {{ Classes : Students, TAs, Instructors }} -->
+
+<!-- {{ Student Classes }} -->
+<!-- {#if member.member_type === SectionMemberType.Student}
+
+    <div class="flex flex-col space-y-10">
+
+        <div class="flex flex-col">
+            <div>
+                <h1 class="text-2xl font-bold">My Classes</h1>
+            </div>
+            <div>
+                <h3 class="text-lg">Book Appointments with a TA</h3>
+            </div>
+        </div> -->
+
+<!-- Class Components -->
+
+<!-- <div class="flex flex-wrap space-x-7">
+            {#each course as crs}
+                <div>
+                    <Class departmentCode={crs.department_code} className={crs.course_name}/>
+                </div>
+            {/each}
+        </div>
+
+    </div>
+
+    {/if} -->
+
+<!-- {{ TA Classes: Section 1 = Classes they TA for // Section 2 = Classes they are enrolled in as a student }}-->
+<!-- {#if member.member_type === SectionMemberType.TA}
+
+    <div class="flex flex-col space-y-10">
+
+        <div class="flex flex-col">
+            <div>
+                <h1 class="text-2xl font-bold">TA Classes</h1>
+            </div>
+            <div>
+                <h3 class="text-lg">View Classes you TA for Here</h3>
+            </div>
+        </div> -->
+
+<!-- Class Components -->
+
+<!-- <div class="flex flex-wrap space-x-7">
+            {#each course as crs}
+                <div>
+                    <Class departmentCode={crs.department_code} className={crs.course_name}/>
+                </div>
+            {/each}
+        </div>
+
+    </div>
+
+    <div class="flex flex-col space-y-10">
+
+        <div class="flex flex-col">
+            <div>
+                <h1 class="text-2xl font-bold">My Classes</h1>
+            </div>
+            <div>
+                <h3 class="text-lg">Book Appointments with a TA</h3>
+            </div>
+        </div> -->
+
+<!-- Class Components -->
+
+<!-- <div class="flex flex-wrap space-x-7">
+            {#each course as crs}
+                <div>
+                    <Class departmentCode={crs.department_code} className={crs.course_name}/>
+                </div>
+            {/each}
+        </div>
+
+    </div>
+
+    {/if} -->
+
+<!-- {{ Instructor Classes: Shows classes they teach }}-->
+<!-- {#if member.member_type === SectionMemberType.Instructor}
+
+    <div class="flex flex-col space-y-10">
+
+        <div class="flex flex-col">
+            <div>
+                <h1 class="text-2xl font-bold">Instructional Classes</h1>
+            </div>
+            <div>
+                <h3 class="text-lg">View Classes you Instruct Here</h3>
+            </div>
+        </div> -->
+
+<!-- Class Components TODO: Loop classes instructor teaches -->
+
+<!-- <div class="flex flex-wrap space-x-7">
+            {#each course as crs}
+                <div>
+                    <InstructorClass insCourse={crs}/>
+                </div>
+            {/each}
+        </div>
+
+    </div>
 
-<a href="/dashboard">Dashboard</a>
-<a href="/calendar">Calendar</a>
-<a href="/courses/[id]/sections/[id]/members/[id]/appointments/book">Book</a>
+    {/if}
+    
+</div> -->