6 files changed, 56 insertions, 22 deletions
diff --git a/src/App.svelte b/src/App.svelte
index b775e86..5b453a1 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -18,5 +18,28 @@
 
 	/* Custom Styles */
 	@layer utilities {
+		.assign-box {
+			/* w-1/3 bg-green-500 flex flex-col border-solid hover:border-4 border-2 border-slate-400 */
+			flex: none;
+			flex-direction: column;
+			width: 33.33%;
+			display: flex;
+			border-width: 4px;
+			border: solid;
+			border-color: rgb(148 163 184);
+		}
+		.assign-box:hover {
+			/* border-width: 6px; */
+			border-color: black;
+		}
+
+		.assign-box-header {
+			font-size: 1.5rem;
+			font-family: sans;
+			border-bottom: solid;
+			text-align: center;
+			height: 10%;
+			overflow: hidden;
+		}
 	}
 </style>
diff --git a/src/components/AssignLabs.svelte b/src/components/AssignLabs/AssignLabs.svelte
index 2655853..9331b81 100644
--- a/src/components/AssignLabs.svelte
+++ b/src/components/AssignLabs/AssignLabs.svelte
@@ -7,8 +7,10 @@
     SecondaryText,
     Text,
   } from "@smui/list";
-  import type PeerTeacher from "../models/PeerTeacher";
-  import { labStore, ptStore } from "../stores";
+  import type PeerTeacher from "../../models/PeerTeacher";
+  import { labStore, ptStore } from "../../stores";
+  import Lab from "./Lab.svelte";
+  import PT from "./PT.svelte";
 
   let selectedPeerTeacher: PeerTeacher | undefined;
 
@@ -90,11 +92,12 @@
   $: clicked = 0;
 
   $: columns = [
-    { header: "Peer Teachers", body: [...peerTeachers] },
-    { header: "Labs", body: [...compatibleLabs] },
+    { header: "Peer Teachers", data: [...peerTeachers], component: PT },
+    { header: "Labs", data: [...compatibleLabs], component: Lab },
     {
       header: selectedPeerTeacher?.name ?? "PT's Labs",
-      body: [...assignedLabs],
+      data: [...assignedLabs],
+      component: Lab,
     },
   ];
 </script>
@@ -177,24 +180,15 @@
 </div> -->
 
 <div class="flex flex-row h-full px-[10%] pt-[3%] pb-[10%]">
-  <!-- Peer Teachers -->
-  <div class="flex flex-none flex-col w-1/3 border-4 border-solid rounded-lg border-slate-500 hover:border-8 hover:border-slate-700 overflow-hidden">
-    <!-- Header -->
-    <div class="flex font-sans text-lg text-center flex-none h-10 border-2 rounded-t-md border-slate-400 overflow-hidden">
-      Peer Teachers
+  <!-- 3 Columns -->
+
+  <div class="assign-box">
+
+    <div class="assign-box-header">
+      Peer Teacher
     </div>
-    <!-- Body -->
-    <div class="">Body</div>
   </div>
 
-  <!-- Labs -->
-  <!-- <div class="assign-box bg-red-500">
-    <div class="assign-box-header">Labs</div>
-    <div />
-  </div> -->
-
-  <!-- Currently assigned to PT -->
-  <!-- <div class="assign-box bg-blue-500">Current</div> -->
 </div>
 
 <style>
diff --git a/src/components/AssignLabs/Lab.svelte b/src/components/AssignLabs/Lab.svelte
new file mode 100644
index 0000000..94e1d69
--- /dev/null
+++ b/src/components/AssignLabs/Lab.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+    import type Lab from "../../models/Lab";
+    export let datum: Lab;
+</script>
+
+<div>
+    {datum.course}
+</div>
+\ No newline at end of file
diff --git a/src/components/AssignLabs/PT.svelte b/src/components/AssignLabs/PT.svelte
new file mode 100644
index 0000000..0976fe4
--- /dev/null
+++ b/src/components/AssignLabs/PT.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import type PeerTeacher from "../../models/PeerTeacher";
+    export let datum: PeerTeacher;
+    
+</script>
+
+<div>
+    {datum.firstname}
+</div>
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index 35fc90b..53982bb 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import DarkModeSwitch from "./DarkModeSwitch.svelte";
-    import AssignLabs from "./AssignLabs.svelte";
+    import AssignLabs from "./AssignLabs/AssignLabs.svelte";
     import FileUploads from "./FileUploads.svelte";
 
     let sections = [
diff --git a/src/models/PeerTeacher.ts b/src/models/PeerTeacher.ts
index 557b36b..4020a00 100644
--- a/src/models/PeerTeacher.ts
+++ b/src/models/PeerTeacher.ts
@@ -11,7 +11,7 @@ interface PeerTeacherSerializeInfo {
         start: number,
         end: number
     }[],
-    labs: number[]
+    labs: number[],
 }
 
 export default class PeerTeacher {