diff --git a/src/css/app.scss b/src/css/app.scss
index c79a67f..29d530e 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -39,7 +39,7 @@ body.body--dark {
 }
 
 .frosted-glass {
-    background-color: #FFFA !important;
+    background-color: #0008 !important;
     backdrop-filter: blur(5px);
 }
 
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index b7391b6..22844cf 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -16,13 +16,13 @@ $primary                    : #30303A;
 $secondary                  : #DAE0E7;
 $accent                     : #0c9a3b;
 
-$dark-shadow-color          : #00220f;
+$dark-shadow-color          : #173625;
 
 $elevation-dark-umbra       : rgba($dark-shadow-color, 1);
-$elevation-dark-penumbra    : rgba($dark-shadow-color, 0.2);
-$elevation-dark-ambient     : rgba($dark-shadow-color, 0.2);
+$elevation-dark-penumbra    : rgba($dark-shadow-color, 0.5);
+$elevation-dark-ambient     : rgba($dark-shadow-color, 0.3);
 
-$dark-shadow-2              : 0 3px 5px -1px $elevation-dark-umbra, 0 5px 8px $elevation-dark-penumbra, 0 1px 14px $elevation-dark-ambient;
+$dark-shadow-2              : 2px 3px  $elevation-dark-umbra, 2px 3px 6px $elevation-dark-penumbra, 2px 3px 14px $elevation-dark-ambient;
 $layout-shadow-dark         : 0 0 10px 5px rgba($dark-shadow-color, 0.5);
 
 $input-text-color           : #455A64;
diff --git a/src/modules/shared/components/pay-period-navigator.vue b/src/modules/shared/components/pay-period-navigator.vue
index 86c4268..daacdfb 100644
--- a/src/modules/shared/components/pay-period-navigator.vue
+++ b/src/modules/shared/components/pay-period-navigator.vue
@@ -1,6 +1,9 @@
-<script setup lang="ts">
+<script
+    setup
+    lang="ts"
+>
     import { computed, ref } from 'vue';
-    import { date} from 'quasar';
+    import { date } from 'quasar';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
 
     const NEXT = 1;
@@ -10,18 +13,18 @@
     const timesheet_store = useTimesheetStore();
 
     const is_showing_calendar_picker = ref(false);
-    const calendar_date = ref(date.formatDate( Date.now(), 'YYYY-MM-DD' ));
+    const calendar_date = ref(date.formatDate(Date.now(), 'YYYY-MM-DD'));
     const is_disabled = computed(() => timesheet_store.pay_period === undefined);
-    
+
     const emit = defineEmits<{
-        'date-selected': [ value: string ]
+        'date-selected': [value: string]
         'pressed-previous-button': []
         'pressed-next-button': []
     }>();
 
-    const is_previous_pay_period_limit = computed( ()=> 
-        ( timesheet_store.pay_period?.pay_year === 2024 &&
-        timesheet_store.pay_period?.pay_period_no <= 1 ) ?? false
+    const is_previous_pay_period_limit = computed(() =>
+        (timesheet_store.pay_period?.pay_year === 2024 &&
+            timesheet_store.pay_period?.pay_period_no <= 1) ?? false
     );
 
     const onDateSelected = (value: string) => {
@@ -59,28 +62,30 @@
 </script>
 
 <template>
-    <div class="row" >
+    <div class="row">
         <!-- navigation to previous week -->
-        <q-btn 
-            push rounded
+        <q-btn
+            push
+            rounded
             icon="keyboard_arrow_left"
             color="accent"
             @click="getPreviousPayPeriod"
             :disable="is_previous_pay_period_limit || timesheet_store.is_loading || is_disabled"
             class="q-mr-sm q-px-sm"
         >
-            <q-tooltip 
+            <q-tooltip
                 anchor="top middle"
                 self="center middle"
                 class="bg-primary text-uppercase text-weight-bold"
-            > 
-                {{ $t( 'timesheet.nav_button.previous_week' )}}
+            >
+                {{ $t('timesheet.nav_button.previous_week') }}
             </q-tooltip>
         </q-btn>
 
         <!-- navigation through calendar date picker -->
-        <q-btn 
-            push rounded
+        <q-btn
+            push
+            rounded
             icon="calendar_month"
             color="accent"
             @click="is_showing_calendar_picker = true"
@@ -94,11 +99,29 @@
             >
                 {{ $t('timesheet.nav_button.calendar_date_picker') }}
             </q-tooltip>
+
+            <!-- date picker calendar -->
+            <q-menu
+                anchor="bottom middle"
+                self="top middle"
+                :offset="[0, 10]"
+                class="shadow-24"
+            >
+                <q-date
+                    v-model="calendar_date"
+                    color="primary"
+                    today-btn
+                    mask="YYYY-MM-DD"
+                    :options="date => date >= PAY_PERIOD_DATE_LIMIT"
+                    @update:model-value="onDateSelected"
+                />
+            </q-menu>
         </q-btn>
 
         <!-- navigation to next week -->
-        <q-btn 
-            push rounded
+        <q-btn
+            push
+            rounded
             icon="keyboard_arrow_right"
             color="accent"
             @click="getNextPayPeriod"
@@ -113,21 +136,4 @@
             </q-tooltip>
         </q-btn>
     </div>
-
-    <!-- date picker calendar -->
-    <q-dialog 
-        v-model="is_showing_calendar_picker"
-        transition-show="jump-down"
-        transition-hide="jump-up"
-        position="top">
-        <q-date 
-            v-model="calendar_date"
-            color="primary"
-            class="q-mt-xl"
-            today-btn
-            mask="YYYY-MM-DD"
-            :options="date => date >= PAY_PERIOD_DATE_LIMIT"
-            @update:model-value="onDateSelected"
-        />
-    </q-dialog>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expense-dialog-form.vue b/src/modules/timesheets/components/expense-dialog-form.vue
index 5574c57..8bc8fee 100644
--- a/src/modules/timesheets/components/expense-dialog-form.vue
+++ b/src/modules/timesheets/components/expense-dialog-form.vue
@@ -2,17 +2,19 @@
     setup
     lang="ts"
 >
-    import { inject, ref } from 'vue';
-    import { useI18n } from 'vue-i18n';
-    import { useExpensesStore } from 'src/stores/expense-store';
-    import { Expense, EXPENSE_TYPE, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
-    import { useExpenseRules } from 'src/modules/timesheets/utils/expense.util';
-    import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { date } from 'quasar';
+    import { computed, inject, ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { useUiStore } from 'src/stores/ui-store';
+    import { useExpensesStore } from 'src/stores/expense-store';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
+    import { useExpenseRules } from 'src/modules/timesheets/utils/expense.util';
+    import { Expense, EXPENSE_TYPE, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
 
     const { t } = useI18n();
 
+    const ui_store = useUiStore();
     const timesheet_store = useTimesheetStore();
     const expenses_store = useExpensesStore();
     const expenses_api = useExpensesApi();
@@ -23,11 +25,16 @@
     const employee_email = inject<string>('employeeEmail');
     const rules = useExpenseRules(t);
 
+    const period_start_date = computed(() => timesheet_store.pay_period?.period_start.replaceAll('-', '/') ?? '');
+    const period_end_date = computed(() => timesheet_store.pay_period?.period_end.replaceAll('-', '/') ?? '');
+
     const openDatePicker = () => {
         is_navigator_open.value = true;
-        if (expenses_store.current_expense.date === '') {
-            expenses_store.current_expense.date = date.formatDate(new Date(), 'YYYY-MM-DD');
+        if (timesheet_store.pay_period !== undefined) {
+            expenses_store.current_expense.date = timesheet_store.pay_period.period_start;
         }
+        console.log('current pay period start date: ', period_start_date.value);
+        console.log('current pay period end date: ', period_end_date.value);
     };
 
     const cancelUpdateMode = () => {
@@ -40,12 +47,6 @@
         if (expenses_store.mode === 'create') await expenses_api.createExpenseByEmployeeEmail(employee_email ?? '', expenses_store.current_expense?.date ?? '');
         else await expenses_api.updateExpenseByEmployeeEmail(employee_email ?? '', expenses_store.current_expense?.date ?? '');
     };
-
-    const getExpenseCalendarRange = (current_date: string) => {
-        const period = timesheet_store.pay_period;
-        if (period !== undefined) return current_date >= period.period_start && current_date <= period.period_end;
-        return false;
-    }
 </script>
 
 <template>
@@ -55,7 +56,10 @@
         flat
         @submit.prevent="requestExpenseCreationOrUpdate"
     >
-        <div class="text-uppercase text-weight-medium q-pt-sm q-px-lg">
+        <div
+            class="text-uppercase text-weight-medium q-pt-sm q-px-lg q-ma-sm"
+            :class="expenses_store.mode === 'create' ? '' : 'invisible'"
+        >
             {{ $t('timesheet.expense.add_expense') }}
         </div>
         <div class="row justify-between items-start rounded-5 q-px-lg q-pb-sm">
@@ -66,8 +70,10 @@
                 outlined
                 readonly
                 stack-label
-                class="col q-px-xs"
                 color="primary"
+                class="col q-px-xs"
+                input-class="text-weight-medium"
+                input-style="font-size: 1.2em;"
                 :label="$t('timesheet.expense.date')"
             >
                 <template #prepend>
@@ -89,11 +95,17 @@
                             v-model="expenses_store.current_expense.date"
                             mask="YYYY-MM-DD"
                             event-color="accent"
-                            :options="getExpenseCalendarRange"
+                            :options="date => date >= period_start_date && date <= period_end_date"
                             @update:model-value="is_navigator_open = false"
                         />
                     </q-dialog>
                 </template>
+
+                <template #label>
+                    <span class="text-weight-bold text-accent text-uppercase text-caption">
+                        {{ $t('timesheet.expense.date') }}
+                    </span>
+                </template>
             </q-input>
 
             <!-- expenses type selection -->
@@ -103,8 +115,8 @@
                 standout="bg-blue-grey-9"
                 dense
                 emit-value
-                map-options
                 hide-dropdown-icon
+                label-slot
                 class="col q-px-xs"
                 color="primary"
                 :label="$t('timesheet.expense.type')"
@@ -115,7 +127,26 @@
                 popup-content-style="border: 2px solid var(--q-accent)"
                 :rules="[rules.typeRequired]"
                 :option-label="label => $t(`timesheet.expense.types.${label}`)"
-            />
+            >
+                <template #label>
+                    <span class="text-weight-bold text-accent text-uppercase text-caption">
+                        {{ $t('timesheet.expense.type') }}
+                    </span>
+                </template>
+
+                <template #selected-item="scope">
+                    <div
+                        class="row flex-center text-weight-bold q-ma-none q-pa-none no-wrap ellipsis full-width"
+                        :class="ui_store.is_mobile_mode ? 'items-center full-height' : 'flex-center'"
+                        :tabindex="scope.tabindex"
+                    >
+                        <span
+                            style="line-height: 0.9em;"
+                            class="col-auto ellipsis"
+                        >{{ scope.opt.label }}</span>
+                    </div>
+                </template>
+            </q-select>
 
             <!-- amount input -->
             <div v-if="TYPES_WITH_AMOUNT_ONLY.includes(expenses_store.current_expense?.type ?? 'EXPENSES')">
@@ -207,6 +238,12 @@
                         color="primary"
                     />
                 </template>
+
+                <template #label>
+                    <span class="text-weight-bold text-accent text-uppercase text-caption">
+                        {{ $t('timesheet.expense.hints.attach_file') }}
+                    </span>
+                </template>
             </q-file>
         </div>
         <div class="col row full-width items-center">
diff --git a/src/modules/timesheets/components/expense-dialog-list-item.vue b/src/modules/timesheets/components/expense-dialog-list-item.vue
index 83f85c8..59f7398 100644
--- a/src/modules/timesheets/components/expense-dialog-list-item.vue
+++ b/src/modules/timesheets/components/expense-dialog-list-item.vue
@@ -12,6 +12,7 @@
     import { useAuthStore } from 'src/stores/auth-store';
     import { CAN_APPROVE_PAY_PERIODS } from 'src/modules/shared/models/user.models';
     import { Expense } from 'src/modules/timesheets/models/expense.models';
+    import ExpenseDialogForm from 'src/modules/timesheets/components/expense-dialog-form.vue';
 
     const { expense, horizontal = false } = defineProps<{
         expense: Expense;
@@ -29,6 +30,7 @@
     const background_style = computed(() => deepEqual(expense, expenses_store.current_expense) ? 'border: 3px solid var(--q-accent);' : '');
     const approved_class = computed(() => expense.is_approved ? ' bg-accent text-white' : '')
     const is_authorized_to_approve = computed(() => CAN_APPROVE_PAY_PERIODS.includes(auth_store.user?.role ?? 'GUEST'))
+    const is_showing_update_form = ref(false);
 
     const requestExpenseDeletion = async () => {
         await expenses_api.deleteExpenseById(expense.id);
@@ -45,28 +47,27 @@
         if (deepEqual(expense, expenses_store.current_expense)) {
             expenses_store.mode = 'create';
             expenses_store.current_expense = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
+            is_showing_update_form.value = false;
             return;
         }
 
         expenses_store.mode = 'update';
         expenses_store.current_expense = expense;
         expenses_store.initial_expense = unwrapAndClone(expense);
+        is_showing_update_form.value = true;
     }
 </script>
 
 <template>
-    <transition
-        enter-active-class="animated pulse"
-        mode="out-in"
+    <q-item
+        :key="refresh_key"
+        :clickable="horizontal"
+        class="column col-4 items-center q-my-sm q-py-none shadow-3 rounded-5 bg-dark"
+        :class="background_class + approved_class"
+        :style="background_style"
+        @click="onExpenseClicked"
     >
-        <q-item
-            :key="refresh_key"
-            :clickable="horizontal"
-            class="row col-4 items-center q-my-sm q-py-none shadow-3 rounded-5 bg-dark"
-            :class="background_class + approved_class"
-            :style="background_style"
-            @click="onExpenseClicked"
-        >
+        <div class="row full-width items-center">
             <!-- avatar type icon section -->
             <q-item-section avatar>
                 <q-icon
@@ -194,6 +195,13 @@
                     @click.stop="requestExpenseDeletion"
                 />
             </q-item-section>
-        </q-item>
-    </transition>
+        </div>
+
+        <q-slide-transition
+            @hide="expenses_store.is_hiding_create_form = false"
+            :duration="200"
+        >
+            <ExpenseDialogForm v-if="is_showing_update_form && expenses_store.is_hiding_create_form" />
+        </q-slide-transition>
+    </q-item>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/expense-dialog-list.vue b/src/modules/timesheets/components/expense-dialog-list.vue
index 34c7047..2d0b364 100644
--- a/src/modules/timesheets/components/expense-dialog-list.vue
+++ b/src/modules/timesheets/components/expense-dialog-list.vue
@@ -14,9 +14,10 @@
 
     const expenses_list = computed(() => {
         if (timesheet_store.timesheets !== undefined) {
-            return timesheet_store.timesheets.flatMap(week => week.days).flatMap(day => day.expenses);
+            const current_expenses = timesheet_store.timesheets.flatMap(week => week.days).flatMap(day => day.expenses);
+            console.log('current expenses: ', current_expenses);
+            return current_expenses;
         }
-
         return [];
     })
 </script>
@@ -29,10 +30,12 @@
         :class="horizontal ? 'row flex-center' : ''"
     >
         <q-item-label
-            v-if="expenses_list.length > 0"
-            class="text-italic q-px-sm"
+            v-if="expenses_list.length < 1"
+            class="text-italic text-center q-pa-sm rounded-4"
         >
+            <q-separator spaced />
             {{ $t('timesheet.expense.empty_list') }}
+            <q-separator spaced />
         </q-item-label>
 
         <ExpenseDialogListItem
diff --git a/src/modules/timesheets/components/expense-dialog.vue b/src/modules/timesheets/components/expense-dialog.vue
index a0d3b66..d0a94fc 100644
--- a/src/modules/timesheets/components/expense-dialog.vue
+++ b/src/modules/timesheets/components/expense-dialog.vue
@@ -38,20 +38,9 @@
 
                 <ExpenseDialogList />
 
-                <transition
-                    appear
-                    enter-active-class="animated fadeInDown faster"
-                    leave-active-class="animated fadeOutDown faster"
-                    mode="out-in"
-                >
-                    <ExpenseDialogForm v-if="!expense_store.current_expense.is_approved" />
-                    <q-icon
-                        v-else
-                        name="block"
-                        color="negative"
-                        size="lg"
-                    />
-                </transition>
+                <q-slide-transition @hide="expense_store.is_hiding_create_form = true" :duration="200">
+                    <ExpenseDialogForm v-if="!expense_store.current_expense.is_approved && expense_store.mode !== 'update' && expense_store.is_hiding_create_form === false" />
+                </q-slide-transition>
             </q-card-section>
         </q-card>
     </q-dialog>
diff --git a/src/modules/timesheets/components/shift-crud-dialog-add-update-shift.vue b/src/modules/timesheets/components/shift-crud-dialog-add-update-shift.vue
deleted file mode 100644
index db04be3..0000000
--- a/src/modules/timesheets/components/shift-crud-dialog-add-update-shift.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script
-    setup
-    lang="ts"
->
-    import { type Shift, SHIFT_TYPES } from 'src/modules/timesheets/models/shift.models';
-
-    const shift = defineModel<Shift>({ required: true });
-
-    defineEmits<{
-        'onCommentBlur': [void];
-    }>();
-</script>
-
-<template>
-    <div class="row full-width justify-center">
-        <div class="col-sm-6 col-md-3 row q-mx-xs q-my-none">
-            <div class="col-auto column items-center">
-                <span
-                    class="text-caption q-pa-none q-ma-none"
-                    style="line-height: 0.7em; font-size: 0.7em;"
-                >{{ $t('timesheet.shift.types.REMOTE') }}</span>
-                <q-toggle
-                    v-model="shift.is_remote"
-                    class="q-pa-none q-ma-none"
-                />
-            </div>
-
-            <q-select
-                v-model="shift.type"
-                options-dense
-                :options="SHIFT_TYPES"
-                :label="$t('timesheet.shift.types.label')"
-                class="col q-pa-none"
-                color="primary"
-                outlined
-                dense
-                square
-                hide-dropdown-icon
-                emit-value
-                map-options
-            />
-        </div>
-
-        <div class="col-auto row q-mx-xs">
-            <q-input
-                v-model="shift.start_time"
-                :label="$t('timesheet.shift.fields.start')"
-                outlined
-                dense
-                square
-                inputmode="numeric"
-                mask="##:##"
-                class="col-auto q-mx-xs"
-            />
-
-            <q-input
-                v-model="shift.end_time"
-                :label="$t('timesheet.shift.fields.end')"
-                outlined
-                dense
-                square
-                inputmode="numeric"
-                mask="##:##"
-                class="col-auto q-mx-xs"
-            />
-        </div>
-
-        <q-input
-            v-model="shift.comment"
-            type="textarea"
-            autogrow
-            filled
-            dense
-            square
-            :label="$t('timesheet.shift.fields.header_comment')"
-            :counter="true"
-            :maxlength="512"
-            class="col-grow"
-        />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/shift-list-day-row.vue b/src/modules/timesheets/components/shift-list-day-row.vue
index a9c8ccb..ffe3e08 100644
--- a/src/modules/timesheets/components/shift-list-day-row.vue
+++ b/src/modules/timesheets/components/shift-list-day-row.vue
@@ -14,9 +14,9 @@
     const ui_store = useUiStore();
 
     interface ShiftOption {
-        label: string; 
+        label: string;
         value: ShiftType;
-        icon: string; 
+        icon: string;
         icon_color: string;
     }
 
@@ -85,7 +85,8 @@
 <template>
     <q-slide-item
         right-color="negative"
-        class="q-my-xs rounded-5 bg-transparent"
+        class="rounded-5 bg-transparent"
+        :class="ui_store.is_mobile_mode ? 'q-my-md' : ''"
         @right="details => slideDeleteShift(details.reset)"
     >
         <template
@@ -94,172 +95,226 @@
         >
             <q-icon name="delete" />
         </template>
-
-        <div
-            class="row flex-center text-uppercase rounded-5 bg-transparent"
-        >
-            <!-- shift type -->
-            <q-select
-                ref="select"
-                v-model="shift_type_selected"
-                standout="bg-blue-grey-9"
-                dense
-                :readonly="shift.is_approved"
-                :options-dense="!ui_store.is_mobile_mode"
-                hide-dropdown-icon
-                :menu-offset="[0, 10]"
-                menu-anchor="bottom middle"
-                menu-self="top middle"
-                :options="SHIFT_OPTIONS"
-                class="rounded-5 q-mx-xs bg-dark"
-                :class="(ui_store.is_mobile_mode ? 'col-12 q-mb-xs ' : 'col ')"
-                popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
-                popup-content-style="border: 2px solid var(--q-accent)"
-                @blur="onBlurShiftTypeSelect"
-                @update:model-value="option => shift.type = option.value"
-            >
-                <template #selected-item="scope">
-                    <div
-                        class="row flex-center text-weight-bold q-ma-none q-pa-none no-wrap ellipsis full-width"
-                        :class="ui_store.is_mobile_mode ? 'items-center full-height' : 'flex-center'"
-                        :tabindex="scope.tabindex"
-                    >
-                        <q-icon
-                            :name="scope.opt.icon"
-                            :color="scope.opt.icon_color"
-                            size="sm"
-                            class="col-auto q-mx-xs"
-                        />
-                        <span
-                            style="line-height: 0.9em;"
-                            class="col-auto ellipsis"
-                        >{{ scope.opt.label }}</span>
-                    </div>
-                </template>
-            </q-select>
-
-            <!-- punch in field -->
-            <q-input
-                v-model="shift.start_time"
-                dense
-                :readonly="shift.is_approved"
-                type="time"
-                :standout="$q.dark.isActive ? 'bg-blue-grey-9' : 'bg-blue-grey-1 text-white'"
-                label-slot
-                label-color="accent"
-                :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
-                input-style="font-size: 1.2em;"
-                class="col rounded-5 bg-dark"
-                :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
-            >
-                <template #label>
-                    <span
-                        class="text-weight-bolder"
-                        style="font-size: 0.95em;"
-                    >{{ $t('shared.misc.in') }}</span>
-                </template>
-            </q-input>
-
-            <!-- punch out field -->
-            <q-input
-                v-model="shift.end_time"
-                dense
-                :readonly="shift.is_approved"
-                type="time"
-                standout="bg-blue-grey-9"
-                label-slot
-                label-color="accent"
-                :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
-                input-style="font-size: 1.2em;"
-                class="col rounded-5 bg-dark"
-                :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-ml-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
-            >
-                <template #label>
-                    <span
-                        class="text-weight-bolder"
-                        style="font-size: 0.95em;"
-                    >{{ $t('shared.misc.out') }}</span>
-                </template>
-            </q-input>
-
-            <!-- comment and delete buttons -->
-            <div :class="ui_store.is_mobile_mode ? 'col-12 row' : 'col-auto'">
-                <q-icon
-                    v-if="shift.type && dense"
-                    :name="shift.comment ? 'comment' : ''"
-                    color="primary"
-                    :size="dense ? 'xs' : 'sm'"
-                    class="col"
-                />
-
-                <q-btn
-                    v-else
-                    flat
-                    dense
-                    :icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
-                    :text-color="shift.comment ? 'accent' : 'grey-5'"
-                    class="col"
-                    :class="ui_store.is_mobile_mode ? 'q-mt-xs bg-dark' : ''"
-                >
-                    <q-popup-edit
-                        v-model="shift.comment"
-                        :title="$t('timesheet.shift.fields.header_comment')"
-                        auto-save
-                        v-slot="scope"
-                        class="bg-dark"
-                    >
-                        <q-input
-                            color="white"
-                            v-model="scope.value"
-                            dense
-                            :readonly="shift.is_approved"
-                            autofocus
-                            counter
-                            bottom-slots
-                            :maxlength="COMMENT_LENGTH_MAX"
-                            class="q-pb-lg"
-                            :class="shift.is_approved ? 'cursor-not-allowed' : ''"
-                            @keyup.enter="scope.set"
-                        >
-                            <template #append>
-                                <q-icon name="edit" />
-                            </template>
-
-                            <template #counter>
-                                <div class="row flex-center">
-                                    <q-space />
-                                    <q-knob
-                                        :model-value="scope.value?.length"
-                                        readonly
-                                        :max="COMMENT_LENGTH_MAX"
-                                        size="1.6em"
-                                        :thickness="0.4"
-                                        :color="getCommentCounterColor(scope.value?.length ?? 0)"
-                                        track-color="grey-4"
-                                        class="col-auto q-mr-xs"
-                                    />
-                                    <span
-                                        :class="'col-auto text-weight-bolder text-' + getCommentCounterColor(scope.value?.length ?? 0)"
-                                    >{{ 280 - (scope.value?.length ?? 0) }}</span>
-                                </div>
-                            </template>
-                        </q-input>
-                    </q-popup-edit>
-                </q-btn>
-
-                <q-btn
-                    v-if="!ui_store.is_mobile_mode"
-                    flat
-                    dense
-                    :disable="shift.is_approved"
-                    tabindex="-1"
-                    icon="cancel"
-                    text-color="negative"
-                    class="col"
-                    :class="shift.is_approved ? 'invisible' : ''"
-                    @click="$emit('requestDelete')"
-                />
-            </div>
-        </div>
+         <div :class="ui_store.is_mobile_mode ? 'column' : 'row'">
+             <div class="row items-center text-uppercase rounded-5 bg-transparent q-mb-xs" :class="ui_store.is_mobile_mode ? 'col' : 'col-4'">
+                 <!-- mobile comment button -->
+                 <q-btn
+                     v-if="ui_store.is_mobile_mode && !dense"
+                     :icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
+                     :text-color="shift.comment ? 'accent' : 'grey-5'"
+                     class="col-auto full-height q-mx-xs rounded-5 shadow-1"
+                 >
+                     <q-popup-edit
+                         v-model="shift.comment"
+                         :title="$t('timesheet.shift.fields.header_comment')"
+                         auto-save
+                         v-slot="scope"
+                         class="bg-dark"
+                     >
+                         <q-input
+                             color="white"
+                             v-model="scope.value"
+                             dense
+                             :readonly="shift.is_approved"
+                             autofocus
+                             counter
+                             bottom-slots
+                             :maxlength="COMMENT_LENGTH_MAX"
+                             class="q-pb-lg"
+                             :class="shift.is_approved ? 'cursor-not-allowed' : ''"
+                             @keyup.enter="scope.set"
+                         >
+                             <template #append>
+                                 <q-icon name="edit" />
+                             </template>
+     
+                             <template #counter>
+                                 <div class="row flex-center">
+                                     <q-space />
+                                     <q-knob
+                                         :model-value="scope.value?.length"
+                                         readonly
+                                         :max="COMMENT_LENGTH_MAX"
+                                         size="1.6em"
+                                         :thickness="0.4"
+                                         :color="getCommentCounterColor(scope.value?.length ?? 0)"
+                                         track-color="grey-4"
+                                         class="col-auto q-mr-xs"
+                                     />
+                                     <span
+                                         :class="'col-auto text-weight-bolder text-' + getCommentCounterColor(scope.value?.length ?? 0)"
+                                     >{{ 280 - (scope.value?.length ?? 0) }}</span>
+                                 </div>
+                             </template>
+                         </q-input>
+                     </q-popup-edit>
+                 </q-btn>
+     
+                 <!-- shift type -->
+                 <q-select
+                     ref="select"
+                     v-model="shift_type_selected"
+                     standout="bg-blue-grey-9"
+                     dense
+                     :readonly="shift.is_approved"
+                     :options-dense="!ui_store.is_mobile_mode"
+                     hide-dropdown-icon
+                     :menu-offset="[0, 10]"
+                     menu-anchor="bottom middle"
+                     menu-self="top middle"
+                     :options="SHIFT_OPTIONS"
+                     class="col rounded-5 q-mx-xs bg-dark"
+                     popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
+                     popup-content-style="border: 2px solid var(--q-accent)"
+                     @blur="onBlurShiftTypeSelect"
+                     @update:model-value="option => shift.type = option.value"
+                 >
+                     <template #selected-item="scope">
+                         <div
+                             class="row flex-center text-weight-bold q-ma-none q-pa-none no-wrap ellipsis full-width"
+                             :class="ui_store.is_mobile_mode ? 'items-center full-height' : 'flex-center'"
+                             :tabindex="scope.tabindex"
+                         >
+                             <q-icon
+                                 :name="scope.opt.icon"
+                                 :color="scope.opt.icon_color"
+                                 size="sm"
+                                 class="col-auto q-mx-xs"
+                             />
+                             <span
+                                 style="line-height: 0.9em;"
+                                 class="col-auto ellipsis"
+                             >{{ scope.opt.label }}</span>
+                         </div>
+                     </template>
+                 </q-select>
+             </div>
+     
+             <div class="col row flex-center text-uppercase rounded-5 bg-transparent q-pa-xs">
+                 <!-- punch in field -->
+                 <q-input
+                     v-model="shift.start_time"
+                     dense
+                     :readonly="shift.is_approved"
+                     type="time"
+                     :standout="$q.dark.isActive ? 'bg-blue-grey-9' : 'bg-blue-grey-1 text-white'"
+                     label-slot
+                     label-color="accent"
+                     :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
+                     input-style="font-size: 1.2em;"
+                     class="col rounded-5 bg-dark"
+                     :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
+                 >
+                     <template #label>
+                         <span
+                             class="text-weight-bolder"
+                             style="font-size: 0.95em;"
+                         >{{ $t('shared.misc.in') }}</span>
+                     </template>
+                 </q-input>
+     
+                 <!-- punch out field -->
+                 <q-input
+                     v-model="shift.end_time"
+                     dense
+                     :readonly="shift.is_approved"
+                     type="time"
+                     standout="bg-blue-grey-9"
+                     label-slot
+                     label-color="accent"
+                     :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
+                     input-style="font-size: 1.2em;"
+                     class="col rounded-5 bg-dark"
+                     :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-ml-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
+                 >
+                     <template #label>
+                         <span
+                             class="text-weight-bolder"
+                             style="font-size: 0.95em;"
+                         >{{ $t('shared.misc.out') }}</span>
+                     </template>
+                 </q-input>
+     
+                 <!-- comment and delete buttons -->
+                 <div :class="ui_store.is_mobile_mode ? 'col-12 row' : 'col-auto'">
+                     <q-icon
+                         v-if="shift.type && dense"
+                         :name="shift.comment ? 'comment' : ''"
+                         color="primary"
+                         :size="dense ? 'xs' : 'sm'"
+                         class="col"
+                     />
+     
+                     <!-- desktop comment button -->
+                     <q-btn
+                         v-else-if="!ui_store.is_mobile_mode"
+                         flat
+                         dense
+                         :icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
+                         :text-color="shift.comment ? 'accent' : 'grey-5'"
+                         class="col"
+                         :class="ui_store.is_mobile_mode ? 'q-mt-xs bg-dark' : ''"
+                     >
+                         <q-popup-edit
+                             v-model="shift.comment"
+                             :title="$t('timesheet.shift.fields.header_comment')"
+                             auto-save
+                             v-slot="scope"
+                             class="bg-dark"
+                         >
+                             <q-input
+                                 color="white"
+                                 v-model="scope.value"
+                                 dense
+                                 :readonly="shift.is_approved"
+                                 autofocus
+                                 counter
+                                 bottom-slots
+                                 :maxlength="COMMENT_LENGTH_MAX"
+                                 class="q-pb-lg"
+                                 :class="shift.is_approved ? 'cursor-not-allowed' : ''"
+                                 @keyup.enter="scope.set"
+                             >
+                                 <template #append>
+                                     <q-icon name="edit" />
+                                 </template>
+     
+                                 <template #counter>
+                                     <div class="row flex-center">
+                                         <q-space />
+                                         <q-knob
+                                             :model-value="scope.value?.length"
+                                             readonly
+                                             :max="COMMENT_LENGTH_MAX"
+                                             size="1.6em"
+                                             :thickness="0.4"
+                                             :color="getCommentCounterColor(scope.value?.length ?? 0)"
+                                             track-color="grey-4"
+                                             class="col-auto q-mr-xs"
+                                         />
+                                         <span
+                                             :class="'col-auto text-weight-bolder text-' + getCommentCounterColor(scope.value?.length ?? 0)"
+                                         >{{ 280 - (scope.value?.length ?? 0) }}</span>
+                                     </div>
+                                 </template>
+                             </q-input>
+                         </q-popup-edit>
+                     </q-btn>
+     
+                     <q-btn
+                         v-if="!ui_store.is_mobile_mode"
+                         flat
+                         dense
+                         :disable="shift.is_approved"
+                         tabindex="-1"
+                         icon="cancel"
+                         text-color="negative"
+                         class="col"
+                         :class="shift.is_approved ? 'invisible' : ''"
+                         @click="$emit('requestDelete')"
+                     />
+                 </div>
+             </div>
+         </div>
     </q-slide-item>
 </template>
\ No newline at end of file
diff --git a/src/modules/timesheets/components/shift-list-day.vue b/src/modules/timesheets/components/shift-list-day.vue
index 2d926eb..49d95cf 100644
--- a/src/modules/timesheets/components/shift-list-day.vue
+++ b/src/modules/timesheets/components/shift-list-day.vue
@@ -31,7 +31,7 @@
 </script>
 
 <template>
-    <div class="column justify-center q-py-xs" :class="approved ? 'bg-dark' : ''">
+    <div class="column justify-center q-py-xs" :class="approved ? '' : ''">
         <ShiftListDayRow
             v-for="shift, shift_index in day.shifts"
             :key="shift_index"
diff --git a/src/modules/timesheets/components/shift-list.vue b/src/modules/timesheets/components/shift-list.vue
index 60c520d..e980b1c 100644
--- a/src/modules/timesheets/components/shift-list.vue
+++ b/src/modules/timesheets/components/shift-list.vue
@@ -57,17 +57,20 @@
                     v-if="ui_store.is_mobile_mode"
                     class="col column full-width"
                 >
-                    <q-card class="rounded-5 q-my-md" :class="getDayApproval(day) ? 'bg-accent' : 'bg-dark'">
-                        
+                    <q-card
+                        class="rounded-10 bg-dark"
+                        :style="ui_store.is_mobile_mode ? (getDayApproval(day) ? 'border: 3px solid var(--q-accent)' : 'border: 1px solid var(--q-accent);') : ''"
+                    >
+
                         <q-card-section
-                        class="text-white text-weight-bolder text-uppercase text-h6 q-py-xs"
-                        :class="getDayApproval(day) ? 'bg-dark' : 'bg-accent'"
-                        style="line-height: 1em;"
+                            class="text-weight-bolder text-uppercase text-h6 q-py-xs"
+                            :class="getDayApproval(day) ? 'bg-dark text-accent' : 'bg-primary text-white'"
+                            style="line-height: 1em;"
                         >
-                        <span> {{ $d(extractDate(day.date, 'YYYY-MM-DD'), {
-                            weekday: 'long', day: 'numeric', month:
-                            'long'
-                        }) }}</span>
+                            <span> {{ $d(extractDate(day.date, 'YYYY-MM-DD'), {
+                                weekday: 'long', day: 'numeric', month:
+                                    'long'
+                                }) }}</span>
                         </q-card-section>
 
                         <q-card-section
@@ -85,7 +88,6 @@
                         <q-card-actions class="q-pa-none">
                             <q-btn
                                 v-if="!getDayApproval(day)"
-                                push
                                 square
                                 color="accent"
                                 icon="more_time"
@@ -98,9 +100,9 @@
                         <q-badge
                             v-if="getDayApproval(day)"
                             floating
-                            class="bg-secondary q-pa-none rounded-50"
+                            class="transparent q-pa-none rounded-50"
                             style="transform: translate(15px, -5px);"
-                        >   
+                        >
                             <q-icon
                                 name="verified"
                                 size="5em"
@@ -137,7 +139,7 @@
 
                     <div class="col-auto self-stretch">
                         <q-icon
-                            v-if="getDayApproval(day)" 
+                            v-if="getDayApproval(day)"
                             name="verified"
                             color="white"
                             size="xl"
diff --git a/src/modules/timesheets/components/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet-wrapper.vue
index 3c0a970..bc6e25c 100644
--- a/src/modules/timesheets/components/timesheet-wrapper.vue
+++ b/src/modules/timesheets/components/timesheet-wrapper.vue
@@ -65,7 +65,7 @@
                     v-if="$q.screen.lt.md"
                     push
                     rounded
-                    color="primary"
+                    color="accent"
                     icon="receipt_long"
                     :label="$t('timesheet.expense.open_btn')"
                     class="q-mt-sm"
diff --git a/src/modules/timesheets/services/shift-service.ts b/src/modules/timesheets/services/shift-service.ts
index f7eac5b..c25f5dd 100644
--- a/src/modules/timesheets/services/shift-service.ts
+++ b/src/modules/timesheets/services/shift-service.ts
@@ -15,7 +15,6 @@ export const ShiftService = {
     updateShifts: async (existing_shifts: Shift[]) => {
         console.log('sent shifts: ', existing_shifts)
         const response = await api.patch(`/shift/update`, existing_shifts);
-        console.log('API response to existing shifts: ', response.data);
         return response;
     }
 };
\ No newline at end of file
diff --git a/src/modules/timesheets/services/timesheet-service.ts b/src/modules/timesheets/services/timesheet-service.ts
index 422c726..5810788 100644
--- a/src/modules/timesheets/services/timesheet-service.ts
+++ b/src/modules/timesheets/services/timesheet-service.ts
@@ -20,7 +20,7 @@ export const timesheetService = {
     },
 
     getTimesheetsByPayPeriod: async (year: number, period_number: number): Promise<TimesheetResponse> => {
-        const response = await api.get('timesheets', { params: { year, period_number } });
-        return response.data;
+        const response = await api.get(`timesheets/${year}/${period_number}`);
+        return response.data.data;
     },
 };
\ No newline at end of file
diff --git a/src/stores/expense-store.ts b/src/stores/expense-store.ts
index af8ec5f..86019dc 100644
--- a/src/stores/expense-store.ts
+++ b/src/stores/expense-store.ts
@@ -1,22 +1,25 @@
 import { ref } from "vue";
 import { defineStore } from "pinia";
+import { useTimesheetStore } from "src/stores/timesheet-store";
 import { Expense } from "src/modules/timesheets/models/expense.models";
 import { ExpenseService } from "src/modules/timesheets/services/expense-service";
 import { date } from "quasar";
 
-
-
 export const useExpensesStore = defineStore('expenses', () => {
+    const timesheet_store = useTimesheetStore();
     const is_open = ref(false);
     const is_loading = ref(false);
+    const is_hiding_create_form = ref(false);
     const mode = ref<'create' | 'update' | 'delete'>('create');
     const current_expense = ref<Expense>(new Expense(date.formatDate(new Date(), 'YYYY-MM-DD')));
     const initial_expense = ref<Expense>(new Expense(date.formatDate(new Date(), 'YYYY-MM-DD')));
 
     const open = (): void => {
         is_open.value = true;
-        current_expense.value = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
-        initial_expense.value = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
+        if (timesheet_store.pay_period !== undefined) {
+            current_expense.value = new Expense(timesheet_store.pay_period.period_start);
+            initial_expense.value = new Expense(timesheet_store.pay_period.period_start);
+        }
         mode.value = 'create';
     }
 
@@ -45,6 +48,7 @@ export const useExpensesStore = defineStore('expenses', () => {
     return {
         is_open,
         is_loading,
+        is_hiding_create_form,
         mode,
         current_expense,
         initial_expense,