diff --git a/src/pages/newCalendar/components/CalendarOpenSidebar.vue b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
index 11f380c..1046ee7 100644
--- a/src/pages/newCalendar/components/CalendarOpenSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-1
+  .sidebar-wrapper.flex.flex-col.gap-y-1
     .form.flex.items-center.justify-end.py-4.pr-4.rounded-t
       q-btn.rotate-180(
         @click="openSidebar",
@@ -98,13 +98,17 @@ export default {
   methods: {
     choiceState() {
       let num = 0;
+      let isPrimary = false;
       this.patientList.forEach((e) => {
         if (e.choice) num += 1;
+        if (e.choice && e.id === 1) isPrimary = true;
       });
       return {
-        one: num === 1,
-        two: num === 2,
-        three: num === 3,
+        "primary-form": num === 2 && isPrimary,
+        "one-form": num === 1,
+        "two-form": num === 2,
+        "all-form": num === 3,
+        default: !num,
       };
     },
     choiceForm(choice, idx) {
@@ -154,14 +158,8 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.one
-  max-height: calc(100vh - 394px)
-
-.two
-  max-height: calc(100vh - 498px)
-
-.three
-  max-height: calc(100vh - 632px)
+.sidebar-wrapper
+  width: 232px
 
 .form
   background: var(--default-white)
@@ -236,4 +234,24 @@ export default {
   border-bottom: 1px solid var(--bg-light-grey)
   &:first-child
     border-top: 1px solid var(--bg-light-grey)
+
+.one-form
+  max-height: calc(100vh - 394px)
+  transition: all 0.2s ease-in
+
+.two-form
+  max-height: calc(100vh - 528px)
+  transition: all 0.2s ease-in
+
+.all-form
+  max-height: calc(100vh - 632px)
+  transition: all 0.2s ease-in
+
+.primary-form
+  max-height: calc(100vh - 498px)
+  transition: all 0.2s ease-in
+
+.default
+  max-height: 0px
+  transition: all 0.5s ease-in
 </style>