diff --git a/.env.example b/.env.example
index 4f3588b..5a32295 100644
--- a/.env.example
+++ b/.env.example
@@ -1,11 +1,5 @@
-# "local" | "staging" | "production"
-APP_ENV=""
-
-# API Base URL and Bearer Token
 AF_DB_URL=""
-AF_BEARER_TOKEN=""
-
-# SNS Configuration
 AF_TOPIC_ARN=""
+AF_BEARER_TOKEN=""
 AF_ACCESS_KEY_ID=""
 AF_SECRET_ACCESS_KEY=""
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index cc81240..486ec73 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -49,8 +49,8 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className='h-4 w-4' />,
-        IconRight: ({ ...props }) => <ChevronRight className='h-4 w-4' />,
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
         Dropdown: ({ name, value, children, onChange }) => {
           type OptionElement = React.ReactElement<React.HTMLProps<HTMLOptionElement>>;
           const options = React.Children.toArray(children) as OptionElement[];
@@ -74,7 +74,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
               >
                 <SelectValue />
               </SelectTrigger>
-              <SelectContent position='popper' side='bottom' align='center' sideOffset={2}>
+              <SelectContent position="popper" side="bottom" align="center" sideOffset={2}>
                 {options.map((option, index) => {
                   return (
                     <SelectItem
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 3114430..3ec39e4 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -22,7 +22,7 @@ const Checkbox = React.forwardRef<
     {...props}
   >
     <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
-      <Check className='h-4 w-4' />
+      <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
@@ -46,7 +46,7 @@ const ControlledCheckbox = React.forwardRef<
           render={({ field }) => (
             <FormItem
               key={option.value as React.Key}
-              className='flex flex-row items-start space-x-3 space-y-0'
+              className="flex flex-row items-start space-x-3 space-y-0"
             >
               <FormControl ref={ref}>
                 <Checkbox
@@ -65,7 +65,7 @@ const ControlledCheckbox = React.forwardRef<
                   }}
                 />
               </FormControl>
-              <FormLabel className='text-sm font-normal'>{option.label}</FormLabel>
+              <FormLabel className="text-sm font-normal">{option.label}</FormLabel>
             </FormItem>
           )}
         />
diff --git a/src/components/ui/date-time.tsx b/src/components/ui/date-time.tsx
index dcc70aa..9c1bedf 100644
--- a/src/components/ui/date-time.tsx
+++ b/src/components/ui/date-time.tsx
@@ -48,18 +48,18 @@ const DateTimePicker = forwardRef<
                 ref={refField}
                 disabled={disabled}
               >
-                <CalendarIcon className='mr-2 h-4 w-4' />
+                <CalendarIcon className="mr-2 h-4 w-4" />
                 {value ? (
                   format(value, 'PP')
                 ) : (
-                  <span className='text-muted-foreground/80 italic font-medium'>
+                  <span className="text-muted-foreground/80 italic font-medium">
                     Pick a date and time
                   </span>
                 )}
               </Button>
             </PopoverTrigger>
           </FormControl>
-          <PopoverContent className='w-auto p-0'>
+          <PopoverContent className="w-auto p-0">
             <Calendar
               {...restSchemaProps}
               {...restFieldProps}
@@ -67,7 +67,7 @@ const DateTimePicker = forwardRef<
               captionLayout="dropdown-buttons"
               fromYear={startOfToday().getFullYear()}
               toYear={addYears(startOfToday(), ALLOWED_YEARS).getFullYear()}
-              mode='single'
+              mode="single"
               selected={value}
               onSelect={(d) => handleSelect(d)}
               onMonthChange={handleSelect}
@@ -77,8 +77,8 @@ const DateTimePicker = forwardRef<
           </PopoverContent>
         </Popover>
       </div>
-      <div className='flex flex-col gap-4 flex-1'>
-        <FormLabel className='self-start'>{label?.time}</FormLabel>
+      <div className="flex flex-col gap-4 flex-1">
+        <FormLabel className="self-start">{label?.time}</FormLabel>
         <TimePicker setDate={onChange} date={value} />
       </div>
     </div>
diff --git a/src/components/ui/time-picker.tsx b/src/components/ui/time-picker.tsx
index 63978ef..017caeb 100644
--- a/src/components/ui/time-picker.tsx
+++ b/src/components/ui/time-picker.tsx
@@ -118,7 +118,7 @@ const TimePickerInput = React.forwardRef<HTMLInputElement, TimePickerInputProps>
           onChange?.(e);
         }}
         type={type}
-        inputMode='decimal'
+        inputMode="decimal"
         onKeyDown={(e) => {
           onKeyDown?.(e);
           handleKeyDown(e);
@@ -171,14 +171,14 @@ const TimePeriodSelect = React.forwardRef<HTMLButtonElement, PeriodSelectorProps
           <SelectTrigger
             value={period}
             ref={ref}
-            className='w-[65px] focus:bg-accent focus:text-accent-foreground'
+            className="w-[65px] focus:bg-accent focus:text-accent-foreground"
             onKeyDown={handleKeyDown}
           >
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value='AM'>AM</SelectItem>
-            <SelectItem value='PM'>PM</SelectItem>
+            <SelectItem value="AM">AM</SelectItem>
+            <SelectItem value="PM">PM</SelectItem>
           </SelectContent>
         </Select>
       </div>
@@ -201,21 +201,21 @@ function TimePicker({ date, setDate }: TimePickerProps) {
   const periodRef = React.useRef<HTMLButtonElement>(null);
 
   return (
-    <div className='flex items-center gap-4'>
-      <ClockIcon className='size-5 text-current' />
+    <div className="flex items-center gap-4">
+      <ClockIcon className="size-5 text-current" />
       <TimePickerInput
-        id='hours'
-        picker='hours'
+        id="hours"
+        picker="hours"
         period={period}
         date={date}
         setDate={setDate}
         ref={hourRef}
         onRightFocus={() => minuteRef.current?.focus()}
       />
-      <span className='-mx-1.5'>:</span>
+      <span className="-mx-1.5">:</span>
       <TimePickerInput
-        id='minutes'
-        picker='minutes'
+        id="minutes"
+        picker="minutes"
         date={date}
         setDate={setDate}
         ref={minuteRef}