From a4657de885c92a2f76a625e26e5426ec703e458f Mon Sep 17 00:00:00 2001
From: jasminduong <jasmind009@gmail.com>
Date: Fri, 5 Dec 2025 18:21:10 -0500
Subject: [PATCH 1/5] fixed styling of all pages

---
 packages/ui/src/pages/AdminPage/AdminPage.vue  |  4 ++--
 .../AdminPage/components/AdminTaskLibrary.vue  |  4 ++--
 .../AdminPage/components/BatteryEditForm.vue   |  4 ++--
 .../components/BatteryEditFormSection.vue      |  2 +-
 .../src/pages/MyStudiesPage/MyStudiesPage.vue  |  2 +-
 .../StudyBuilderPage/StudyBuilderPage.vue      |  2 +-
 .../components/SessionCard.vue                 |  2 +-
 .../StudyBuilderPage/components/StudyPanel.vue | 18 ++++++++++++------
 .../components/StudyServerCode.vue             |  8 +++++---
 .../StudyBuilderPage/components/TaskBank.vue   |  4 ++--
 .../StudyBuilderPage/components/TaskCard.vue   |  2 +-
 .../components/StudyConditions.vue             |  3 ++-
 .../components/components/ConditionCard.vue    | 18 ++++++++++++++----
 .../components/components/ConditionPanel.vue   | 10 ++++++++--
 .../components/ConditionsSidebar.vue           |  4 ++--
 .../components/components/SessionCard.vue      |  2 +-
 16 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/packages/ui/src/pages/AdminPage/AdminPage.vue b/packages/ui/src/pages/AdminPage/AdminPage.vue
index 32dda3b2..afecc040 100644
--- a/packages/ui/src/pages/AdminPage/AdminPage.vue
+++ b/packages/ui/src/pages/AdminPage/AdminPage.vue
@@ -16,10 +16,10 @@ if (!authStore.hasAdminPower(Role.StudyManager)) {
 </script>
 <template>
   <div class="flex h-screen items-stretch">
-    <AdminTaskLibrary class="flex-none" />
+    <AdminTaskLibrary class="flex-none border border-neutral-100" />
     <div
       v-if="batteryEditingStore.editingBatteryId !== undefined"
-      class="flex-1 mx-6 my-8 p-8 rounded-2xl min-w-[600px] bg-white shadow-xl overflow-y-hidden"
+      class="flex-1 mx-6 my-8 p-8 rounded-2xl min-w-[600px] bg-white shadow-xl overflow-y-hidden border border-neutral-100"
     >
       <BatteryEditForm />
     </div>
diff --git a/packages/ui/src/pages/AdminPage/components/AdminTaskLibrary.vue b/packages/ui/src/pages/AdminPage/components/AdminTaskLibrary.vue
index 26645960..62d5af41 100644
--- a/packages/ui/src/pages/AdminPage/components/AdminTaskLibrary.vue
+++ b/packages/ui/src/pages/AdminPage/components/AdminTaskLibrary.vue
@@ -204,8 +204,8 @@ const switchTab = (tab: string) => {
               :class="[
                 'flex gap-5 p-4 border rounded-2xl cursor-pointer',
                 batteryEditingStore.editingBatteryId === task._id.toString()
-                  ? 'bg-neutral-100 border-neutral-400'
-                  : 'bg-neutral-10 border-neutral-300',
+                  ? 'bg-neutral-50 border-neutral-200'
+                  : 'bg-neutral-10 border-neutral-100',
               ]"
               @click="batteryEditingStore.select(task._id.toString())"
             >
diff --git a/packages/ui/src/pages/AdminPage/components/BatteryEditForm.vue b/packages/ui/src/pages/AdminPage/components/BatteryEditForm.vue
index 10524405..d888645c 100644
--- a/packages/ui/src/pages/AdminPage/components/BatteryEditForm.vue
+++ b/packages/ui/src/pages/AdminPage/components/BatteryEditForm.vue
@@ -115,8 +115,8 @@ const editingName = ref(false);
             <textarea
               id="description"
               v-model="batteryData.description"
-              class="mt-3 border border-neutral-300 rounded-2xl resize-none py-2.5 px-4 w-full"
-              rows="10"
+              class="mt-3 border border-neutral-200 rounded-2xl resize-none py-2.5 px-4 w-full"
+              rows="5"
             ></textarea>
           </div>
         </div>
diff --git a/packages/ui/src/pages/AdminPage/components/BatteryEditFormSection.vue b/packages/ui/src/pages/AdminPage/components/BatteryEditFormSection.vue
index 3edaea92..45189dcb 100644
--- a/packages/ui/src/pages/AdminPage/components/BatteryEditFormSection.vue
+++ b/packages/ui/src/pages/AdminPage/components/BatteryEditFormSection.vue
@@ -5,7 +5,7 @@ defineProps<{ group: DTO<IBattery>["stages"][0]["options"] }>();
 </script>
 
 <template>
-  <div class="border border-gray-400 rounded-xl p-5">
+  <div class="bg-neutral-50 border border-neutral-200 rounded-xl p-5">
     <h2 class="text-base font-bold">
       {{ group.name }}
     </h2>
diff --git a/packages/ui/src/pages/MyStudiesPage/MyStudiesPage.vue b/packages/ui/src/pages/MyStudiesPage/MyStudiesPage.vue
index 7863e5b5..4c3acb1c 100644
--- a/packages/ui/src/pages/MyStudiesPage/MyStudiesPage.vue
+++ b/packages/ui/src/pages/MyStudiesPage/MyStudiesPage.vue
@@ -48,7 +48,7 @@ const handleStudyDeleted = async () => {
 <template>
   <div
     v-loading="isLoading"
-    class="mt-14 mx-auto w-full min-w-[600px] px-4 sm:px-6 lg:px-10"
+    class="pt-14 mx-auto w-full min-w-[600px] px-4 sm:px-6 lg:px-10 bg-neutral-50"
   >
     <div class="flex items-center">
       <h1 class="text-3xl font-bold mb-4 -mt-4">My Studies</h1>
diff --git a/packages/ui/src/pages/StudyBuilderPage/StudyBuilderPage.vue b/packages/ui/src/pages/StudyBuilderPage/StudyBuilderPage.vue
index 6b455111..c6e6dee8 100644
--- a/packages/ui/src/pages/StudyBuilderPage/StudyBuilderPage.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/StudyBuilderPage.vue
@@ -23,7 +23,7 @@ const taskEditingStore = useTaskEditingStore();
 </script>
 
 <template>
-  <div>
+  <div class="bg-neutral-50">
     <AppBreadcrumb />
     <Draggable
       v-loading="studyBuilderStore.isStudySaving"
diff --git a/packages/ui/src/pages/StudyBuilderPage/components/SessionCard.vue b/packages/ui/src/pages/StudyBuilderPage/components/SessionCard.vue
index b4e1c229..19407102 100644
--- a/packages/ui/src/pages/StudyBuilderPage/components/SessionCard.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/components/SessionCard.vue
@@ -29,7 +29,7 @@ const draggableProps = {
 
 <template>
   <div
-    class="flex flex-col px-6 pb-5 border rounded-3xl border-neutral-300 overflow-y-hidden"
+    class="flex flex-col px-6 pb-5 border rounded-3xl border-neutral-200 overflow-y-hidden"
   >
     <ElImage
       v-if="draggable"
diff --git a/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue b/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue
index daf38ab5..41b19696 100644
--- a/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue
@@ -100,16 +100,16 @@ watch(
             <ElSkeletonItem variant="text" class="h-8 mt-2 mb-1 w-3/4" />
           </template>
           <template #default>
-            <div class="flex gap-3 flex-col">
+            <div class="flex gap-1 flex-col">
               <input
                 v-model="studyBuilderStore.name"
-                class="w-full bg-transparent text-neutral-600 font-bold text-4xl"
+                class="w-full bg-transparent text-neutral-600 font-bold text-2xl"
                 type="text"
                 placeholder="Untitled Study"
               />
               <input
                 v-model="studyBuilderStore.description"
-                class="w-full bg-transparent text-neutral-600 font-medium text-lg"
+                class="w-full bg-transparent text-neutral-600 font-medium text-md"
                 type="text"
                 placeholder="Add a description"
               />
@@ -120,6 +120,7 @@ watch(
     </div>
     <div class="flex items-center justify-center w-3/6 p-2 mx-auto">
       <el-button
+        class="rounded-lg px-2"
         :icon="ArrowLeft"
         :disabled="currentVariantIndex <= 0"
         @click="switchVariant('prev')"
@@ -131,23 +132,28 @@ watch(
         placeholder="Untitled Variant"
       />
       <el-button
+        class="rounded-lg px-2"
         v-if="currentVariantIndex < studyBuilderStore.variants.length - 1"
         :icon="ArrowRight"
         :disabled="currentVariantIndex >= studyBuilderStore.variants.length - 1"
         @click="switchVariant('next')"
       />
       <el-button v-else :icon="Plus" @click="addVariant()" />
-      <el-button class="ml-8" :icon="Delete" @click="deleteVariant()" />
+      <el-button
+        class="ml-8 rounded-lg px-3"
+        :icon="Delete"
+        @click="deleteVariant()"
+      />
     </div>
 
     <div
       v-loading="studyBuilderStore.isStudyLoading"
-      class="grow p-6 bg-neutral-10 border border-neutral-300 rounded-3xl overflow-x-hidden"
+      class="grow p-6 bg-neutral-10 border border-neutral-200 rounded-3xl overflow-x-hidden"
     >
       <div class="flex-2 items-center justify-between gap-4 pb-5">
         <input
           v-model="studyBuilderStore.variantDescription"
-          class="text-center w-full bg-transparent text-neutral-600 font-medium text-lg"
+          class="text-center w-full bg-transparent text-neutral-600 font-medium text-md"
           type="text"
           placeholder="Untitled Variant Description"
         />
diff --git a/packages/ui/src/pages/StudyBuilderPage/components/StudyServerCode.vue b/packages/ui/src/pages/StudyBuilderPage/components/StudyServerCode.vue
index 58c9f229..f337ec2c 100644
--- a/packages/ui/src/pages/StudyBuilderPage/components/StudyServerCode.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/components/StudyServerCode.vue
@@ -17,7 +17,7 @@ function copyCode() {
 </script>
 
 <template>
-  <el-button class="border rounded-lg px-5 py-1" @click="copyCode">
+  <el-button class="border rounded-lg px-3 py-1" @click="copyCode">
     <FontAwesomeIcon :icon="['far', 'copy']" />
   </el-button>
 
@@ -28,13 +28,15 @@ function copyCode() {
     <div
       :class="[
         'border rounded-lg px-5 py-1 flex items-center justify-center gap-1 w-40',
-        copied ? 'bg-gray-300 border-gray-500' : 'bg-gray-200 border-gray-300',
+        copied
+          ? 'bg-neutral-0 border-gray-500'
+          : 'bg-neutral-0 border-gray-300',
       ]"
     >
       <input
         v-model="studyBuilderStore.serverCode"
         type="text"
-        class="truncate text-center border-none bg-transparent w-full focus:outline-none"
+        class="truncate text-center border-none bg-neutral-0 w-full focus:outline-none"
       />
     </div>
   </div>
diff --git a/packages/ui/src/pages/StudyBuilderPage/components/TaskBank.vue b/packages/ui/src/pages/StudyBuilderPage/components/TaskBank.vue
index 94529a44..92889a13 100644
--- a/packages/ui/src/pages/StudyBuilderPage/components/TaskBank.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/components/TaskBank.vue
@@ -19,14 +19,14 @@ const libraryVisible = ref(false);
 
 <template>
   <div
-    class="bg-neutral-10 fixed flex items-stretch h-full border border-neutral-300 rounded-l-2xl px-6 py-8 shadow-2xl right-0"
+    class="top-0 bg-neutral-10 fixed flex items-stretch h-full border border-neutral-200 rounded-l-2xl px-6 py-8 shadow-2xl right-0"
   >
     <div class="flex flex-col w-[216px]">
       <div class="flex mb-5 items-center">
         <h1 class="text-2xl font-bold">Task Bank</h1>
         <div class="grow"></div>
         <AppButton v-if="!libraryVisible" @click="libraryVisible = true">
-          Add
+          + Add
         </AppButton>
       </div>
       <ElSkeleton animated :loading="studyBuilderStore.isStudyLoading">
diff --git a/packages/ui/src/pages/StudyBuilderPage/components/TaskCard.vue b/packages/ui/src/pages/StudyBuilderPage/components/TaskCard.vue
index f44f9943..e407c089 100644
--- a/packages/ui/src/pages/StudyBuilderPage/components/TaskCard.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/components/TaskCard.vue
@@ -17,7 +17,7 @@ const taskEditingStore = useTaskEditingStore();
 <template>
   <div
     :class="[
-      'group flex items-center pl-1.5 pr-3 py-2.5 gap-2 rounded-xl border border-neutral-300 bg-neutral-10',
+      'group flex items-center pl-1.5 pr-3 py-2.5 gap-2 rounded-xl border border-neutral-200 bg-neutral-50',
       { 'cursor-pointer': draggable },
     ]"
     @click="taskEditingStore.select(taskId)"
diff --git a/packages/ui/src/pages/StudyConditions/components/StudyConditions.vue b/packages/ui/src/pages/StudyConditions/components/StudyConditions.vue
index b6ab2bcc..8c3ace57 100644
--- a/packages/ui/src/pages/StudyConditions/components/StudyConditions.vue
+++ b/packages/ui/src/pages/StudyConditions/components/StudyConditions.vue
@@ -21,7 +21,7 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div>
+  <div class="bg-neutral-50">
     <AppBreadcrumb />
     <div class="flex flex-row">
       <div
@@ -32,6 +32,7 @@ onMounted(() => {
       </div>
 
       <ConditionsSidebar
+        class="top-0"
         :collapsed="isCollapsed"
         @collapse-change="(v: boolean) => (collapsePressed = v)"
       />
diff --git a/packages/ui/src/pages/StudyConditions/components/components/ConditionCard.vue b/packages/ui/src/pages/StudyConditions/components/components/ConditionCard.vue
index 26204698..5bcdab03 100644
--- a/packages/ui/src/pages/StudyConditions/components/components/ConditionCard.vue
+++ b/packages/ui/src/pages/StudyConditions/components/components/ConditionCard.vue
@@ -7,7 +7,11 @@ import AppButton from "@/components/ui/AppButton.vue";
 import { defineProps } from "vue";
 
 // Define props for this component
-const props = defineProps<{ variantId: string; draggable: boolean }>();
+const props = defineProps<{
+  variantId: string;
+  draggable: boolean;
+  isSelected?: boolean;
+}>();
 
 // Use the study builder store to get your data
 const studyBuilderStore = useStudyBuilderStore();
@@ -60,7 +64,10 @@ function setVariantId() {
       <div
         v-if="isOpen === true"
         v-loading="studyBuilderStore.isStudyLoading"
-        class="w-full p-6 bg-neutral-10 border border-neutral-300 rounded-3xl overflow-x-hidden"
+        :class="[
+          'w-full p-6 border border-neutral-200 rounded-3xl overflow-x-hidden',
+          isSelected ? 'bg-neutral-100' : 'bg-neutral-10',
+        ]"
         @click="setVariantId"
       >
         <div class="flex items-start justify-between gap-4 pb-3">
@@ -99,7 +106,7 @@ function setVariantId() {
           {{ variantData.description || "No description" }}
         </div>
 
-        <div class="w-full h-5/6 flex gap-6 overflow-x-auto bg-white pr-5">
+        <div class="w-full h-5/6 flex gap-6 overflow-x-auto pr-5">
           <TransitionGroup>
             <Draggable
               key="draggable"
@@ -126,7 +133,10 @@ function setVariantId() {
       <div
         v-else
         v-loading="studyBuilderStore.isStudyLoading"
-        class="w-full p-6 bg-neutral-10 border border-neutral-300 rounded-3xl overflow-x-hidden"
+        :class="[
+          'w-full p-6 border border-neutral-300 rounded-3xl overflow-x-hidden',
+          isSelected ? 'bg-neutral-100' : 'bg-neutral-10',
+        ]"
         @click="setVariantId"
       >
         <div class="flex items-start justify-between gap-4 pb-5">
diff --git a/packages/ui/src/pages/StudyConditions/components/components/ConditionPanel.vue b/packages/ui/src/pages/StudyConditions/components/components/ConditionPanel.vue
index 658e10a9..659d9c25 100644
--- a/packages/ui/src/pages/StudyConditions/components/components/ConditionPanel.vue
+++ b/packages/ui/src/pages/StudyConditions/components/components/ConditionPanel.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<(e: "open-sidebar") => void>();
         </template>
 
         <template #default>
-          <div class="flex flex-col">
+          <div class="flex gap-1 flex-col">
             <input
               v-model="studyBuilderStore.name"
               class="w-fit bg-transparent text-neutral-600 font-bold text-2xl"
@@ -40,7 +40,13 @@ const emit = defineEmits<(e: "open-sidebar") => void>();
       :key="variant._id"
       :variant-id="variant._id"
       :draggable="true"
-      @click="emit('open-sidebar')"
+      :is-selected="variant._id === studyBuilderStore.currentVariantId"
+      @click="
+        () => {
+          studyBuilderStore.switchVariant(variant._id);
+          emit('open-sidebar');
+        }
+      "
     />
   </div>
 </template>
diff --git a/packages/ui/src/pages/StudyConditions/components/components/ConditionsSidebar.vue b/packages/ui/src/pages/StudyConditions/components/components/ConditionsSidebar.vue
index d58235a9..f32ae0da 100644
--- a/packages/ui/src/pages/StudyConditions/components/components/ConditionsSidebar.vue
+++ b/packages/ui/src/pages/StudyConditions/components/components/ConditionsSidebar.vue
@@ -79,11 +79,11 @@ function updateVariantName() {
 <template>
   <div
     :class="[
-      'bg-neutral-10 fixed flex flex-row items-stretch h-full border border-neutral-300 rounded-l-2xl pt-8 shadow-2xl right-0 transition-all duration-200',
+      'bg-neutral-10 fixed flex flex-row items-stretch h-full border border-neutral-200 rounded-l-xl pt-8 shadow-2xl right-0 transition-all duration-200',
       isCollapsed ? 'w-16 px-3' : 'w-[300px] px-4',
     ]"
   >
-    <div class="justify-center flex flex-col pr-4">
+    <div class="align-start flex flex-col pr-4">
       <ElImage
         v-if="!isCollapsed"
         src="/icons/fa6-solid_angles-right-gray.svg"
diff --git a/packages/ui/src/pages/StudyConditions/components/components/SessionCard.vue b/packages/ui/src/pages/StudyConditions/components/components/SessionCard.vue
index 6a752abf..1e227e78 100644
--- a/packages/ui/src/pages/StudyConditions/components/components/SessionCard.vue
+++ b/packages/ui/src/pages/StudyConditions/components/components/SessionCard.vue
@@ -42,7 +42,7 @@ const taskCounts = computed(() => {
 
 <template>
   <div
-    class="w-52 h-52 flex flex-col items-center border rounded-3xl border-neutral-300 overflow-hidden p-3 bg-stone-50 outline-stone-300"
+    class="w-52 h-52 flex flex-col items-center border rounded-3xl border-neutral-200 overflow-hidden p-3 bg-neutral-50 outline-stone-300"
   >
     <!-- grip icon for dragging -->
     <ElImage

From 9ecc43285503f1bbb3adf7936f0aebf03c502d94 Mon Sep 17 00:00:00 2001
From: jasminduong <jasmind009@gmail.com>
Date: Fri, 5 Dec 2025 18:21:10 -0500
Subject: [PATCH 2/5] fixed styling of all pages

---
 packages/ui/src/pages/AdminPage/AdminPage.vue  |  4 ++--
 .../AdminPage/components/AdminTaskLibrary.vue  |  4 ++--
 .../AdminPage/components/BatteryEditForm.vue   |  4 ++--
 .../components/BatteryEditFormSection.vue      |  2 +-
 .../src/pages/MyStudiesPage/MyStudiesPage.vue  |  2 +-
 .../StudyBuilderPage/StudyBuilderPage.vue      |  2 +-
 .../components/SessionCard.vue                 |  2 +-
 .../StudyBuilderPage/components/StudyPanel.vue | 18 ++++++++++++------
 .../components/StudyServerCode.vue             |  8 +++++---
 .../StudyBuilderPage/components/TaskBank.vue   |  4 ++--
 .../StudyBuilderPage/components/TaskCard.vue   |  2 +-
 .../components/StudyConditions.vue             |  3 ++-
 .../components/components/ConditionCard.vue    | 18 ++++++++++++++----
 .../components/components/ConditionPanel.vue   | 10 ++++++++--
 .../components/ConditionsSidebar.vue           |  4 ++--
 .../components/components/SessionCard.vue      |  2 +-
 16 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/packages/ui/src/pages/AdminPage/AdminPage.vue b/packages/ui/src/pages/AdminPage/AdminPage.vue
index 32dda3b2..afecc040 100644
--- a/packages/ui/src/pages/AdminPage/AdminPage.vue
+++ b/packages/ui/src/pages/AdminPage/AdminPage.vue
@@ -16,10 +16,10 @@ if (!authStore.hasAdminPower(Role.StudyManager)) {
 </script>
 <template>
   <div class="flex h-screen items-stretch">
-    <AdminTaskLibrary class="flex-none" />
+    <AdminTaskLibrary class="flex-none border border-neutral-100" />
     <div
       v-if="batteryEditingStore.editingBatteryId !== undefined"
-      class="flex-1 mx-6 my-8 p-8 rounded-2xl min-w-[600px] bg-white shadow-xl overflow-y-hidden"
+      class="flex-1 mx-6 my-8 p-8 rounded-2xl min-w-[600px] bg-white shadow-xl overflow-y-hidden border border-neutral-100"
     >
       <BatteryEditForm />
     </div>
diff --git a/packages/ui/src/pages/AdminPage/components/AdminTaskLibrary.vue b/packages/ui/src/pages/AdminPage/components/AdminTaskLibrary.vue
index 26645960..62d5af41 100644
--- a/packages/ui/src/pages/AdminPage/components/AdminTaskLibrary.vue
+++ b/packages/ui/src/pages/AdminPage/components/AdminTaskLibrary.vue
@@ -204,8 +204,8 @@ const switchTab = (tab: string) => {
               :class="[
                 'flex gap-5 p-4 border rounded-2xl cursor-pointer',
                 batteryEditingStore.editingBatteryId === task._id.toString()
-                  ? 'bg-neutral-100 border-neutral-400'
-                  : 'bg-neutral-10 border-neutral-300',
+                  ? 'bg-neutral-50 border-neutral-200'
+                  : 'bg-neutral-10 border-neutral-100',
               ]"
               @click="batteryEditingStore.select(task._id.toString())"
             >
diff --git a/packages/ui/src/pages/AdminPage/components/BatteryEditForm.vue b/packages/ui/src/pages/AdminPage/components/BatteryEditForm.vue
index 10524405..d888645c 100644
--- a/packages/ui/src/pages/AdminPage/components/BatteryEditForm.vue
+++ b/packages/ui/src/pages/AdminPage/components/BatteryEditForm.vue
@@ -115,8 +115,8 @@ const editingName = ref(false);
             <textarea
               id="description"
               v-model="batteryData.description"
-              class="mt-3 border border-neutral-300 rounded-2xl resize-none py-2.5 px-4 w-full"
-              rows="10"
+              class="mt-3 border border-neutral-200 rounded-2xl resize-none py-2.5 px-4 w-full"
+              rows="5"
             ></textarea>
           </div>
         </div>
diff --git a/packages/ui/src/pages/AdminPage/components/BatteryEditFormSection.vue b/packages/ui/src/pages/AdminPage/components/BatteryEditFormSection.vue
index 3edaea92..45189dcb 100644
--- a/packages/ui/src/pages/AdminPage/components/BatteryEditFormSection.vue
+++ b/packages/ui/src/pages/AdminPage/components/BatteryEditFormSection.vue
@@ -5,7 +5,7 @@ defineProps<{ group: DTO<IBattery>["stages"][0]["options"] }>();
 </script>
 
 <template>
-  <div class="border border-gray-400 rounded-xl p-5">
+  <div class="bg-neutral-50 border border-neutral-200 rounded-xl p-5">
     <h2 class="text-base font-bold">
       {{ group.name }}
     </h2>
diff --git a/packages/ui/src/pages/MyStudiesPage/MyStudiesPage.vue b/packages/ui/src/pages/MyStudiesPage/MyStudiesPage.vue
index b3d41b02..7acf7418 100644
--- a/packages/ui/src/pages/MyStudiesPage/MyStudiesPage.vue
+++ b/packages/ui/src/pages/MyStudiesPage/MyStudiesPage.vue
@@ -48,7 +48,7 @@ const handleStudyDeleted = async () => {
 <template>
   <div
     v-loading="isLoading"
-    class="mt-14 mx-auto w-full min-w-[600px] px-4 sm:px-6 lg:px-10"
+    class="pt-14 mx-auto w-full min-w-[600px] px-4 sm:px-6 lg:px-10 bg-neutral-50"
   >
     <div class="flex items-center">
       <h1 class="text-3xl font-bold mb-4 -mt-4">My Studies</h1>
diff --git a/packages/ui/src/pages/StudyBuilderPage/StudyBuilderPage.vue b/packages/ui/src/pages/StudyBuilderPage/StudyBuilderPage.vue
index 6b455111..c6e6dee8 100644
--- a/packages/ui/src/pages/StudyBuilderPage/StudyBuilderPage.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/StudyBuilderPage.vue
@@ -23,7 +23,7 @@ const taskEditingStore = useTaskEditingStore();
 </script>
 
 <template>
-  <div>
+  <div class="bg-neutral-50">
     <AppBreadcrumb />
     <Draggable
       v-loading="studyBuilderStore.isStudySaving"
diff --git a/packages/ui/src/pages/StudyBuilderPage/components/SessionCard.vue b/packages/ui/src/pages/StudyBuilderPage/components/SessionCard.vue
index b4e1c229..19407102 100644
--- a/packages/ui/src/pages/StudyBuilderPage/components/SessionCard.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/components/SessionCard.vue
@@ -29,7 +29,7 @@ const draggableProps = {
 
 <template>
   <div
-    class="flex flex-col px-6 pb-5 border rounded-3xl border-neutral-300 overflow-y-hidden"
+    class="flex flex-col px-6 pb-5 border rounded-3xl border-neutral-200 overflow-y-hidden"
   >
     <ElImage
       v-if="draggable"
diff --git a/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue b/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue
index daf38ab5..41b19696 100644
--- a/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue
@@ -100,16 +100,16 @@ watch(
             <ElSkeletonItem variant="text" class="h-8 mt-2 mb-1 w-3/4" />
           </template>
           <template #default>
-            <div class="flex gap-3 flex-col">
+            <div class="flex gap-1 flex-col">
               <input
                 v-model="studyBuilderStore.name"
-                class="w-full bg-transparent text-neutral-600 font-bold text-4xl"
+                class="w-full bg-transparent text-neutral-600 font-bold text-2xl"
                 type="text"
                 placeholder="Untitled Study"
               />
               <input
                 v-model="studyBuilderStore.description"
-                class="w-full bg-transparent text-neutral-600 font-medium text-lg"
+                class="w-full bg-transparent text-neutral-600 font-medium text-md"
                 type="text"
                 placeholder="Add a description"
               />
@@ -120,6 +120,7 @@ watch(
     </div>
     <div class="flex items-center justify-center w-3/6 p-2 mx-auto">
       <el-button
+        class="rounded-lg px-2"
         :icon="ArrowLeft"
         :disabled="currentVariantIndex <= 0"
         @click="switchVariant('prev')"
@@ -131,23 +132,28 @@ watch(
         placeholder="Untitled Variant"
       />
       <el-button
+        class="rounded-lg px-2"
         v-if="currentVariantIndex < studyBuilderStore.variants.length - 1"
         :icon="ArrowRight"
         :disabled="currentVariantIndex >= studyBuilderStore.variants.length - 1"
         @click="switchVariant('next')"
       />
       <el-button v-else :icon="Plus" @click="addVariant()" />
-      <el-button class="ml-8" :icon="Delete" @click="deleteVariant()" />
+      <el-button
+        class="ml-8 rounded-lg px-3"
+        :icon="Delete"
+        @click="deleteVariant()"
+      />
     </div>
 
     <div
       v-loading="studyBuilderStore.isStudyLoading"
-      class="grow p-6 bg-neutral-10 border border-neutral-300 rounded-3xl overflow-x-hidden"
+      class="grow p-6 bg-neutral-10 border border-neutral-200 rounded-3xl overflow-x-hidden"
     >
       <div class="flex-2 items-center justify-between gap-4 pb-5">
         <input
           v-model="studyBuilderStore.variantDescription"
-          class="text-center w-full bg-transparent text-neutral-600 font-medium text-lg"
+          class="text-center w-full bg-transparent text-neutral-600 font-medium text-md"
           type="text"
           placeholder="Untitled Variant Description"
         />
diff --git a/packages/ui/src/pages/StudyBuilderPage/components/StudyServerCode.vue b/packages/ui/src/pages/StudyBuilderPage/components/StudyServerCode.vue
index 58c9f229..f337ec2c 100644
--- a/packages/ui/src/pages/StudyBuilderPage/components/StudyServerCode.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/components/StudyServerCode.vue
@@ -17,7 +17,7 @@ function copyCode() {
 </script>
 
 <template>
-  <el-button class="border rounded-lg px-5 py-1" @click="copyCode">
+  <el-button class="border rounded-lg px-3 py-1" @click="copyCode">
     <FontAwesomeIcon :icon="['far', 'copy']" />
   </el-button>
 
@@ -28,13 +28,15 @@ function copyCode() {
     <div
       :class="[
         'border rounded-lg px-5 py-1 flex items-center justify-center gap-1 w-40',
-        copied ? 'bg-gray-300 border-gray-500' : 'bg-gray-200 border-gray-300',
+        copied
+          ? 'bg-neutral-0 border-gray-500'
+          : 'bg-neutral-0 border-gray-300',
       ]"
     >
       <input
         v-model="studyBuilderStore.serverCode"
         type="text"
-        class="truncate text-center border-none bg-transparent w-full focus:outline-none"
+        class="truncate text-center border-none bg-neutral-0 w-full focus:outline-none"
       />
     </div>
   </div>
diff --git a/packages/ui/src/pages/StudyBuilderPage/components/TaskBank.vue b/packages/ui/src/pages/StudyBuilderPage/components/TaskBank.vue
index 94529a44..92889a13 100644
--- a/packages/ui/src/pages/StudyBuilderPage/components/TaskBank.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/components/TaskBank.vue
@@ -19,14 +19,14 @@ const libraryVisible = ref(false);
 
 <template>
   <div
-    class="bg-neutral-10 fixed flex items-stretch h-full border border-neutral-300 rounded-l-2xl px-6 py-8 shadow-2xl right-0"
+    class="top-0 bg-neutral-10 fixed flex items-stretch h-full border border-neutral-200 rounded-l-2xl px-6 py-8 shadow-2xl right-0"
   >
     <div class="flex flex-col w-[216px]">
       <div class="flex mb-5 items-center">
         <h1 class="text-2xl font-bold">Task Bank</h1>
         <div class="grow"></div>
         <AppButton v-if="!libraryVisible" @click="libraryVisible = true">
-          Add
+          + Add
         </AppButton>
       </div>
       <ElSkeleton animated :loading="studyBuilderStore.isStudyLoading">
diff --git a/packages/ui/src/pages/StudyBuilderPage/components/TaskCard.vue b/packages/ui/src/pages/StudyBuilderPage/components/TaskCard.vue
index f44f9943..e407c089 100644
--- a/packages/ui/src/pages/StudyBuilderPage/components/TaskCard.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/components/TaskCard.vue
@@ -17,7 +17,7 @@ const taskEditingStore = useTaskEditingStore();
 <template>
   <div
     :class="[
-      'group flex items-center pl-1.5 pr-3 py-2.5 gap-2 rounded-xl border border-neutral-300 bg-neutral-10',
+      'group flex items-center pl-1.5 pr-3 py-2.5 gap-2 rounded-xl border border-neutral-200 bg-neutral-50',
       { 'cursor-pointer': draggable },
     ]"
     @click="taskEditingStore.select(taskId)"
diff --git a/packages/ui/src/pages/StudyConditions/components/StudyConditions.vue b/packages/ui/src/pages/StudyConditions/components/StudyConditions.vue
index b6ab2bcc..8c3ace57 100644
--- a/packages/ui/src/pages/StudyConditions/components/StudyConditions.vue
+++ b/packages/ui/src/pages/StudyConditions/components/StudyConditions.vue
@@ -21,7 +21,7 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div>
+  <div class="bg-neutral-50">
     <AppBreadcrumb />
     <div class="flex flex-row">
       <div
@@ -32,6 +32,7 @@ onMounted(() => {
       </div>
 
       <ConditionsSidebar
+        class="top-0"
         :collapsed="isCollapsed"
         @collapse-change="(v: boolean) => (collapsePressed = v)"
       />
diff --git a/packages/ui/src/pages/StudyConditions/components/components/ConditionCard.vue b/packages/ui/src/pages/StudyConditions/components/components/ConditionCard.vue
index 26204698..5bcdab03 100644
--- a/packages/ui/src/pages/StudyConditions/components/components/ConditionCard.vue
+++ b/packages/ui/src/pages/StudyConditions/components/components/ConditionCard.vue
@@ -7,7 +7,11 @@ import AppButton from "@/components/ui/AppButton.vue";
 import { defineProps } from "vue";
 
 // Define props for this component
-const props = defineProps<{ variantId: string; draggable: boolean }>();
+const props = defineProps<{
+  variantId: string;
+  draggable: boolean;
+  isSelected?: boolean;
+}>();
 
 // Use the study builder store to get your data
 const studyBuilderStore = useStudyBuilderStore();
@@ -60,7 +64,10 @@ function setVariantId() {
       <div
         v-if="isOpen === true"
         v-loading="studyBuilderStore.isStudyLoading"
-        class="w-full p-6 bg-neutral-10 border border-neutral-300 rounded-3xl overflow-x-hidden"
+        :class="[
+          'w-full p-6 border border-neutral-200 rounded-3xl overflow-x-hidden',
+          isSelected ? 'bg-neutral-100' : 'bg-neutral-10',
+        ]"
         @click="setVariantId"
       >
         <div class="flex items-start justify-between gap-4 pb-3">
@@ -99,7 +106,7 @@ function setVariantId() {
           {{ variantData.description || "No description" }}
         </div>
 
-        <div class="w-full h-5/6 flex gap-6 overflow-x-auto bg-white pr-5">
+        <div class="w-full h-5/6 flex gap-6 overflow-x-auto pr-5">
           <TransitionGroup>
             <Draggable
               key="draggable"
@@ -126,7 +133,10 @@ function setVariantId() {
       <div
         v-else
         v-loading="studyBuilderStore.isStudyLoading"
-        class="w-full p-6 bg-neutral-10 border border-neutral-300 rounded-3xl overflow-x-hidden"
+        :class="[
+          'w-full p-6 border border-neutral-300 rounded-3xl overflow-x-hidden',
+          isSelected ? 'bg-neutral-100' : 'bg-neutral-10',
+        ]"
         @click="setVariantId"
       >
         <div class="flex items-start justify-between gap-4 pb-5">
diff --git a/packages/ui/src/pages/StudyConditions/components/components/ConditionPanel.vue b/packages/ui/src/pages/StudyConditions/components/components/ConditionPanel.vue
index a98018a9..5aafb874 100644
--- a/packages/ui/src/pages/StudyConditions/components/components/ConditionPanel.vue
+++ b/packages/ui/src/pages/StudyConditions/components/components/ConditionPanel.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<(e: "open-sidebar") => void>();
         </template>
 
         <template #default>
-          <div class="flex flex-col">
+          <div class="flex gap-1 flex-col">
             <input
               v-model="studyBuilderStore.name"
               @change="studyBuilderStore.saveStudyStore"
@@ -42,7 +42,13 @@ const emit = defineEmits<(e: "open-sidebar") => void>();
       :key="variant._id"
       :variant-id="variant._id"
       :draggable="true"
-      @click="emit('open-sidebar')"
+      :is-selected="variant._id === studyBuilderStore.currentVariantId"
+      @click="
+        () => {
+          studyBuilderStore.switchVariant(variant._id);
+          emit('open-sidebar');
+        }
+      "
     />
   </div>
 </template>
diff --git a/packages/ui/src/pages/StudyConditions/components/components/ConditionsSidebar.vue b/packages/ui/src/pages/StudyConditions/components/components/ConditionsSidebar.vue
index d58235a9..f32ae0da 100644
--- a/packages/ui/src/pages/StudyConditions/components/components/ConditionsSidebar.vue
+++ b/packages/ui/src/pages/StudyConditions/components/components/ConditionsSidebar.vue
@@ -79,11 +79,11 @@ function updateVariantName() {
 <template>
   <div
     :class="[
-      'bg-neutral-10 fixed flex flex-row items-stretch h-full border border-neutral-300 rounded-l-2xl pt-8 shadow-2xl right-0 transition-all duration-200',
+      'bg-neutral-10 fixed flex flex-row items-stretch h-full border border-neutral-200 rounded-l-xl pt-8 shadow-2xl right-0 transition-all duration-200',
       isCollapsed ? 'w-16 px-3' : 'w-[300px] px-4',
     ]"
   >
-    <div class="justify-center flex flex-col pr-4">
+    <div class="align-start flex flex-col pr-4">
       <ElImage
         v-if="!isCollapsed"
         src="/icons/fa6-solid_angles-right-gray.svg"
diff --git a/packages/ui/src/pages/StudyConditions/components/components/SessionCard.vue b/packages/ui/src/pages/StudyConditions/components/components/SessionCard.vue
index 6a752abf..1e227e78 100644
--- a/packages/ui/src/pages/StudyConditions/components/components/SessionCard.vue
+++ b/packages/ui/src/pages/StudyConditions/components/components/SessionCard.vue
@@ -42,7 +42,7 @@ const taskCounts = computed(() => {
 
 <template>
   <div
-    class="w-52 h-52 flex flex-col items-center border rounded-3xl border-neutral-300 overflow-hidden p-3 bg-stone-50 outline-stone-300"
+    class="w-52 h-52 flex flex-col items-center border rounded-3xl border-neutral-200 overflow-hidden p-3 bg-neutral-50 outline-stone-300"
   >
     <!-- grip icon for dragging -->
     <ElImage

From 470960ef7d486407700d8603974c31c39ffdb43e Mon Sep 17 00:00:00 2001
From: jasminduong <jasmind009@gmail.com>
Date: Sun, 7 Dec 2025 09:58:37 -0500
Subject: [PATCH 3/5] fixed warning in study panel component

---
 .../ui/src/pages/StudyBuilderPage/components/StudyPanel.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue b/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue
index 41b19696..9602ed7c 100644
--- a/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue
@@ -132,8 +132,8 @@ watch(
         placeholder="Untitled Variant"
       />
       <el-button
-        class="rounded-lg px-2"
         v-if="currentVariantIndex < studyBuilderStore.variants.length - 1"
+        class="rounded-lg px-2"
         :icon="ArrowRight"
         :disabled="currentVariantIndex >= studyBuilderStore.variants.length - 1"
         @click="switchVariant('next')"

From 51b87c26696cc5bf66325ef0f8da7e5afc45cb3c Mon Sep 17 00:00:00 2001
From: jasminduong <jasmind009@gmail.com>
Date: Sun, 7 Dec 2025 10:13:44 -0500
Subject: [PATCH 4/5] removed duplicate class in study panel

---
 packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue b/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue
index 2f176db1..9602ed7c 100644
--- a/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue
+++ b/packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue
@@ -132,7 +132,6 @@ watch(
         placeholder="Untitled Variant"
       />
       <el-button
-        class="rounded-lg px-2"
         v-if="currentVariantIndex < studyBuilderStore.variants.length - 1"
         class="rounded-lg px-2"
         :icon="ArrowRight"

From f92ee801c07b9b97f0bf5ac3b30ea1921e7d8d02 Mon Sep 17 00:00:00 2001
From: Ananya Rath <rath.ananya@gmail.com>
Date: Sun, 7 Dec 2025 12:18:31 -0500
Subject: [PATCH 5/5] fixed lint issues

---
 .../StudyConditions/components/components/ConditionPanel.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/pages/StudyConditions/components/components/ConditionPanel.vue b/packages/ui/src/pages/StudyConditions/components/components/ConditionPanel.vue
index 5aafb874..93eedab3 100644
--- a/packages/ui/src/pages/StudyConditions/components/components/ConditionPanel.vue
+++ b/packages/ui/src/pages/StudyConditions/components/components/ConditionPanel.vue
@@ -19,17 +19,17 @@ const emit = defineEmits<(e: "open-sidebar") => void>();
           <div class="flex gap-1 flex-col">
             <input
               v-model="studyBuilderStore.name"
-              @change="studyBuilderStore.saveStudyStore"
               class="w-full bg-transparent text-neutral-600 font-bold text-2xl"
               type="text"
               placeholder="Untitled Study"
+              @change="studyBuilderStore.saveStudyStore"
             />
             <input
               v-model="studyBuilderStore.description"
-              @change="studyBuilderStore.saveStudyStore"
               class="w-full bg-transparent text-neutral-600 font-medium text-md"
               type="text"
               placeholder="Add a description"
+              @change="studyBuilderStore.saveStudyStore"
             />
           </div>
         </template>