diff --git a/frontend/src/components/CcfriEstimator.vue b/frontend/src/components/CcfriEstimator.vue
index 0100e019..5cc4c3e0 100644
--- a/frontend/src/components/CcfriEstimator.vue
+++ b/frontend/src/components/CcfriEstimator.vue
@@ -168,7 +168,7 @@
                 <span style="color: #313131"> Type of care</span>
               </v-col>
               <v-col cols="1" style="padding-bottom: 0px; padding-top: 16px; padding-left: 0px">
-                <v-tooltip location="top" color="#68449A">
+                <v-tooltip location="top" content-class="tooltip-text">
                   <template #activator="{ props }">
                     <v-card class="tooltip" v-bind="props">
                       <v-icon class="pt-1" size="small" color="white"> mdi-help </v-icon>
@@ -217,7 +217,7 @@
                   <span style="color: #313131"> Child's age category </span>
                 </v-col>
                 <v-col cols="1" style="padding-bottom: 0px; padding-top: 16px; padding-left: 0px">
-                  <v-tooltip location="top" color="#68449A">
+                  <v-tooltip location="top" content-class="tooltip-text">
                     <template #activator="{ props }">
                       <v-card class="tooltip" v-bind="props">
                         <v-icon class="pt-1" size="small" color="white"> mdi-help </v-icon>
@@ -253,7 +253,7 @@
                   <span style="color: #313131"> Parent fee frequency </span>
                 </v-col>
                 <v-col cols="1" style="padding-bottom: 0px; padding-top: 16px; padding-left: 0px">
-                  <v-tooltip location="top" color="#68449A">
+                  <v-tooltip location="top" content-class="tooltip-text">
                     <template #activator="{ props }">
                       <v-card class="tooltip" v-bind="props">
                         <v-icon class="pt-1" size="small" color="white"> mdi-help </v-icon>
@@ -288,7 +288,7 @@
                   <span style="color: #313131"> Weekly care schedule </span>
                 </v-col>
                 <v-col cols="1" style="padding-bottom: 0px; padding-top: 16px; padding-left: 0px">
-                  <v-tooltip location="top" color="#68449A">
+                  <v-tooltip location="top" content-class="tooltip-text">
                     <template #activator="{ props }">
                       <v-card class="tooltip" v-bind="props">
                         <v-icon class="pt-1" size="small" color="white"> mdi-help </v-icon>
@@ -302,15 +302,13 @@
               <v-row>
                 <v-col class="d-flex wrap justify-center" style="padding-top: 0px; padding-bottom: 16px">
                   <div class="d-flex wrap" style="align-content: center; flex-wrap: wrap">
-                    <v-card min-width="154px" class="mb-1">
+                    <v-card min-width="154px" class="mb-1 ml-1">
                       <v-toolbar color="#431782">
-                        <v-spacer />
                         <v-toolbar-title class="ms-0 d-flex justify-center">Monday</v-toolbar-title>
-                        <v-spacer />
                       </v-toolbar>
-                      <v-list v-model:selected="child.selectedCareType[0]" active-class="purple--text">
+                      <v-list v-model:selected="child.selectedCareType[0]" active-class="purple-text">
                         <div v-for="(item, index) in getCareTypes(child.number)" :key="item.type">
-                          <v-list-item :value="item.type" :disabled="isScheduleDisabled(child, index)">
+                          <v-list-item :value="index" :disabled="isScheduleDisabled(child, index)">
                             <v-list-item-title>{{ item.type }}</v-list-item-title>
                           </v-list-item>
                           <v-divider v-if="index < getCareTypes(child.number).length - 1" :key="index" />
@@ -318,52 +316,42 @@
                       </v-list>
                     </v-card>
 
-                    <v-spacer />
-
-                    <v-card min-width="154px" class="mb-1">
+                    <v-card min-width="154px" class="mb-1 ml-1">
                       <v-toolbar color="#431782">
-                        <v-spacer />
                         <v-toolbar-title class="ms-0 d-flex justify-center">Tuesday</v-toolbar-title>
-                        <v-spacer />
                       </v-toolbar>
-                      <v-list v-model:selected="child.selectedCareType[1]" active-class="purple--text">
+                      <v-list v-model:selected="child.selectedCareType[1]" active-class="purple-text">
                         <div v-for="(item, index) in getCareTypes(child.number)" :key="item.type">
-                          <v-list-item :value="item.type" :disabled="isScheduleDisabled(child, index)">
+                          <v-list-item :value="index" :disabled="isScheduleDisabled(child, index)">
                             <v-list-item-title>{{ item.type }}</v-list-item-title>
                           </v-list-item>
                           <v-divider v-if="index < getCareTypes(child.number).length - 1" :key="index" />
                         </div>
                       </v-list>
                     </v-card>
-                    <v-spacer />
 
-                    <v-card min-width="154px" class="mb-1">
+                    <v-card min-width="154px" class="mb-1 ml-1">
                       <v-toolbar color="#431782">
-                        <v-spacer />
                         <v-toolbar-title class="ms-0 d-flex justify-center">Wednesday</v-toolbar-title>
-                        <v-spacer />
                       </v-toolbar>
 
-                      <v-list v-model:selected="child.selectedCareType[2]" active-class="purple--text">
+                      <v-list v-model:selected="child.selectedCareType[2]" active-class="purple-text">
                         <div v-for="(item, index) in getCareTypes(child.number)" :key="item.type">
-                          <v-list-item :value="item.type" :disabled="isScheduleDisabled(child, index)">
+                          <v-list-item :value="index" :disabled="isScheduleDisabled(child, index)">
                             <v-list-item-title>{{ item.type }}</v-list-item-title>
                           </v-list-item>
                           <v-divider v-if="index < getCareTypes(child.number).length - 1" :key="index" />
                         </div>
                       </v-list>
                     </v-card>
-                    <v-spacer />
 
-                    <v-card min-width="154px" class="mb-1">
+                    <v-card min-width="154px" class="mb-1 ml-1">
                       <v-toolbar color="#431782">
-                        <v-spacer />
                         <v-toolbar-title class="ms-0 d-flex justify-center">Thursday</v-toolbar-title>
-                        <v-spacer />
                       </v-toolbar>
-                      <v-list v-model:selected="child.selectedCareType[3]" active-class="purple--text">
+                      <v-list v-model:selected="child.selectedCareType[3]" active-class="purple-text">
                         <div v-for="(item, index) in getCareTypes(child.number)" :key="item.type">
-                          <v-list-item :value="item.type" :disabled="isScheduleDisabled(child, index)">
+                          <v-list-item :value="index" :disabled="isScheduleDisabled(child, index)">
                             <v-list-item-title>{{ item.type }}</v-list-item-title>
                           </v-list-item>
 
@@ -371,62 +359,53 @@
                         </div>
                       </v-list>
                     </v-card>
-                    <v-spacer />
 
-                    <v-card min-width="154px" class="mb-1">
+                    <v-card min-width="154px" class="mb-1 ml-1">
                       <v-toolbar color="#431782">
-                        <v-spacer />
                         <v-toolbar-title class="ms-0 d-flex justify-center">Friday</v-toolbar-title>
-                        <v-spacer />
                       </v-toolbar>
-                      <v-list v-model:selected="child.selectedCareType[4]" active-class="purple--text">
+                      <v-list v-model:selected="child.selectedCareType[4]" active-class="purple-text">
                         <div v-for="(item, index) in getCareTypes(child.number)" :key="item.type">
-                          <v-list-item :value="item.type" :disabled="isScheduleDisabled(child, index)">
+                          <v-list-item :value="index" :disabled="isScheduleDisabled(child, index)">
                             <v-list-item-title>{{ item.type }}</v-list-item-title>
                           </v-list-item>
                           <v-divider v-if="index < getCareTypes(child.number).length - 1" :key="index" />
                         </div>
                       </v-list>
                     </v-card>
-                    <v-spacer />
-                    <v-card min-width="154px" class="mb-1">
+
+                    <v-card min-width="154px" class="mb-1 ml-1">
                       <v-toolbar color="#431782">
-                        <v-spacer />
                         <v-toolbar-title class="ms-0 d-flex justify-center">Saturday</v-toolbar-title>
-                        <v-spacer />
                       </v-toolbar>
-                      <v-list v-model:selected="child.selectedCareType[5]" active-class="purple--text">
+                      <v-list v-model:selected="child.selectedCareType[5]" active-class="purple-text">
                         <div v-for="(item, index) in getCareTypes(child.number)" :key="item.type">
-                          <v-list-item :value="item.type" :disabled="isScheduleDisabled(child, index)">
+                          <v-list-item :value="index" :disabled="isScheduleDisabled(child, index)">
                             <v-list-item-title>{{ item.type }}</v-list-item-title>
                           </v-list-item>
                           <v-divider v-if="index < getCareTypes(child.number).length - 1" :key="index" />
                         </div>
                       </v-list>
                     </v-card>
-                    <v-spacer />
 
-                    <v-card min-width="154px" class="mb-1">
+                    <v-card min-width="154px" class="mb-1 ml-1">
                       <v-toolbar color="#431782">
-                        <v-spacer />
                         <v-toolbar-title class="ms-0 d-flex justify-center">Sunday</v-toolbar-title>
-                        <v-spacer />
                       </v-toolbar>
-                      <v-list v-model:selected="child.selectedCareType[6]" active-class="purple--text">
+                      <v-list v-model:selected="child.selectedCareType[6]" active-class="purple-text">
                         <div v-for="(item, index) in getCareTypes(child.number)" :key="item.type">
-                          <v-list-item :value="item.type" :disabled="isScheduleDisabled(child, index)">
+                          <v-list-item :value="index" :disabled="isScheduleDisabled(child, index)">
                             <v-list-item-title>{{ item.type }}</v-list-item-title>
                           </v-list-item>
                           <v-divider v-if="index < getCareTypes(child.number).length - 1" :key="index" />
                         </div>
                       </v-list>
                     </v-card>
-                    <v-spacer />
                   </div>
                 </v-col>
               </v-row>
               <v-row>
-                <v-col cols="8" class="text-left verticalAlignFlexbox">
+                <v-col cols="6" sm="7" md="8" lg="9" class="text-left verticalAlignFlexbox">
                   <div
                     v-if="child.parentFeeFrequency == 'Daily' && child.childAgeCategory != 'Preschool'"
                     style="padding-left: 30px"
@@ -435,17 +414,10 @@
                     enter them separately to receive an estimate.
                   </div>
                 </v-col>
-                <v-col cols="4" class="text-right">
+                <v-col cols="6" sm="5" md="4" lg="3" class="text-right">
                   <v-btn
-                    style="
-                      color: white;
-                      font-weight: 600;
-                      font-size: 16px;
-                      padding-left: 40px;
-                      padding-right: 40px;
-                      margin-right: 40px !important;
-                    "
-                    class="ma-2"
+                    style="font-weight: 600; font-size: 16px"
+                    class="ma-2 px-8 mr-8"
                     color="#0483AF"
                     @click="clearSchedule(child)"
                   >
@@ -463,7 +435,7 @@
                   <span style="color: #313131"> Select a month (Optional) </span>
                 </v-col>
                 <v-col cols="7" md="1" style="padding-bottom: 0px; padding-top: 16px; padding-left: 0px">
-                  <v-tooltip location="top" color="#68449A">
+                  <v-tooltip location="top" content-class="tooltip-text">
                     <template #activator="{ props }">
                       <v-card class="tooltip" v-bind="props">
                         <v-icon class="pt-1" size="small" color="white"> mdi-help </v-icon>
@@ -508,27 +480,34 @@
                           </span>
                         </template>
                         <template #prev>
-                          <span class="estimator-label fill-height pt-1 pr-7" align="right" style="font-size: 13px">
-                            <v-icon color="#431782" size="x-large">mdi-chevron-left</v-icon>
-                            <span style="color: #313131"> {{ child.feeFrequency }}&nbsp; </span>
+                          <span class="estimator-label fill-height pt-1 pr-7" align="right">
+                            <v-icon color="#431782" size="x-large" class="ml-2">mdi-chevron-left</v-icon>
+                            <span class="fee-frequency-label"> {{ child.feeFrequency }}&nbsp; </span>
                           </span>
                         </template>
                         <v-slide-group-item v-for="n in child.items" :key="n.id" v-slot="{ isSelected, toggle }">
                           <v-card
                             :disabled="n.rate == 0 || n.rate == null || n.rate == 'N/A' ? true : false"
                             :color="isSelected ? '#F3E6F6' : '#FFFFFF'"
-                            class="ma-1 fill-height"
+                            class="ma-1 month-card"
                             :elevation="isSelected ? 4 : 0"
                             height="67"
                             width="70"
                             @click="toggle(focusAwayFromOnSlider(child.number - 1))"
                           >
                             <v-row style="" justify="center">
-                              <v-col align="center" style="padding-top: 4px; padding-bottom: 5px; margin-top: -2px">
+                              <v-col
+                                align="center"
+                                style="
+                                  padding-top: 4px;
+                                  padding-bottom: 5px;
+                                  margin-top: -2px;
+                                  background-color: #431782;
+                                "
+                              >
                                 <span
                                   style="
                                     color: white;
-                                    background-color: #431782;
                                     font-size: 17px;
                                     font-weight: bold;
                                     padding-bottom: 6px;
@@ -575,27 +554,34 @@
                           </span>
                         </template>
                         <template #prev>
-                          <span class="estimator-label fill-height pt-1 pr-7" align="right" style="font-size: 13px">
-                            <v-icon color="#431782" size="x-large">mdi-chevron-left</v-icon>
-                            <span style="color: #313131"> {{ child.feeFrequency }}&nbsp; </span>
+                          <span class="estimator-label fill-height pt-1 pr-7" align="right">
+                            <v-icon color="#431782" size="x-large" class="ml-2">mdi-chevron-left</v-icon>
+                            <span class="fee-frequency-label"> {{ child.feeFrequency }}&nbsp; </span>
                           </span>
                         </template>
-                        <v-slide-group-item v-for="n in child.items" :key="n.id" v-slot="{ isSelected, toggle }">
+                        <v-slide-group-item v-for="n in child.items" :key="n.id" v-slot="{ toggle }">
                           <v-card
                             :disabled="n.rate == 0 || n.rate == null || n.rate == 'N/A' ? true : false"
                             color="white"
-                            class="ma-1 fill-height"
-                            :elevation="isSelected ? 0 : 0"
+                            class="ma-1 month-card"
+                            elevation="0"
                             height="67"
                             width="70"
                             @click="toggle(clickForOffSlider(n.id, child.number - 1))"
                           >
                             <v-row style="" justify="center">
-                              <v-col align="center" style="padding-top: 3px; padding-bottom: 5px; margin-top: -2px">
+                              <v-col
+                                align="center"
+                                style="
+                                  padding-top: 3px;
+                                  padding-bottom: 5px;
+                                  margin-top: -2px;
+                                  background-color: #431782;
+                                "
+                              >
                                 <span
                                   style="
                                     color: white;
-                                    background-color: #431782;
                                     font-size: 17px;
                                     font-weight: bold;
                                     padding-bottom: 6px;
@@ -646,7 +632,7 @@
                   </div>
                 </v-col>
                 <v-col cols="1" style="padding-bottom: 0px; padding-top: 16px; padding-left: 0px">
-                  <v-tooltip location="top" color="#68449A">
+                  <v-tooltip location="top" content-class="tooltip-text">
                     <template #activator="{ props }">
                       <v-card class="tooltip" v-bind="props">
                         <v-icon class="pt-1" size="small" color="white"> mdi-help </v-icon>
@@ -705,7 +691,7 @@
                   </div>
                 </v-col>
                 <v-col cols="1" style="padding-bottom: 0px; padding-top: 16px; padding-left: 0px">
-                  <v-tooltip location="top" color="#68449A">
+                  <v-tooltip location="top" content-class="tooltip-text">
                     <template #activator="{ props }">
                       <v-card class="tooltip" v-bind="props">
                         <v-icon class="pt-1" size="small" color="white"> mdi-help </v-icon>
@@ -778,7 +764,7 @@
                 <v-col cols="10">
                   <v-row>
                     <v-col cols="1" style="padding-bottom: 0px; padding-top: 10px; padding-left: 0px">
-                      <v-tooltip location="top" color="#68449A">
+                      <v-tooltip location="top" content-class="tooltip-text">
                         <template #activator="{ props }">
                           <v-card class="tooltip" v-bind="props">
                             <v-icon class="pt-1" size="small" color="white"> mdi-help </v-icon>
@@ -1660,9 +1646,6 @@ export default {
   text-align: center !important;
   background-color: #7b2ee5 !important;
 }
-.v-tooltip__content {
-  opacity: 0.95 !important;
-}
 .bounce-enter-active {
   animation: bounce-in 0.2s;
 }
@@ -1742,12 +1725,9 @@ div.v-select__selection.v-select__selection--comma {
   overflow-wrap: inherit;
   overflow: hidden;
 }
-div.ma-1.fill-height.v-card.v-card--link.v-sheet.theme--light {
+.month-card {
   border: 1px solid grey !important;
 }
-div.ma-1.fill-height.v-card.v-card--disabled.v-sheet.theme--light {
-  border: 1px solid #b8babd !important;
-}
 .hidden-btn:focus::before {
   opacity: 0 !important;
 }
@@ -1775,4 +1755,18 @@ div.v-slide-group__next.v-slide-group__next--disabled span i {
   caret-color: #7b7c7e !important;
   color: #7b7c7e !important;
 }
+
+.purple-text {
+  color: rgb(156, 39, 176);
+}
+
+.tooltip-text {
+  color: white !important;
+  background-color: #68449a !important;
+}
+
+.fee-frequency-label {
+  color: #313131;
+  font-size: 13px;
+}
 </style>