diff --git a/frontend/src/components/SectionFields.vue b/frontend/src/components/SectionFields.vue
index 63d43e00..d80868b5 100644
--- a/frontend/src/components/SectionFields.vue
+++ b/frontend/src/components/SectionFields.vue
@@ -136,7 +136,7 @@ const _fields = computed(() => {
   let all_fields = []
   props.fields?.forEach((field) => {
     let df = field.all_properties
-    if (df.depends_on) evaluate_depends_on(df.depends_on, field)
+    if (df?.depends_on) evaluate_depends_on(df.depends_on, field)
     all_fields.push(field)
   })
   return all_fields
diff --git a/frontend/src/components/Settings/ProfileSettings.vue b/frontend/src/components/Settings/ProfileSettings.vue
index a2ef0974..34b92f11 100644
--- a/frontend/src/components/Settings/ProfileSettings.vue
+++ b/frontend/src/components/Settings/ProfileSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="profile" class="flex w-full items-center justify-between">
+  <div v-if="profile" class="flex w-full items-center justify-between p-12 pt-14">
     <div class="flex items-center gap-4">
       <Avatar
         class="!size-16"
diff --git a/frontend/src/components/Settings/SettingsModal.vue b/frontend/src/components/Settings/SettingsModal.vue
index 821294ec..1809d812 100644
--- a/frontend/src/components/Settings/SettingsModal.vue
+++ b/frontend/src/components/Settings/SettingsModal.vue
@@ -40,7 +40,7 @@
             />
           </nav>
         </div>
-        <div class="flex flex-1 flex-col overflow-y-auto p-8">
+        <div class="flex flex-1 flex-col overflow-y-auto">
           <component :is="activeTab.component" v-if="activeTab" />
         </div>
       </div>
diff --git a/frontend/src/components/Settings/SettingsPage.vue b/frontend/src/components/Settings/SettingsPage.vue
index f7eff59e..45bf3b02 100644
--- a/frontend/src/components/Settings/SettingsPage.vue
+++ b/frontend/src/components/Settings/SettingsPage.vue
@@ -3,10 +3,10 @@
     <h2 class="flex gap-2 text-xl font-semibold leading-none">
       <div>{{ __(doctype) }}</div>
       <Badge
+        v-if="data.isDirty"
         :label="__('Not Saved')"
         variant="subtle"
         theme="orange"
-        v-if="data.isDirty"
       />
     </h2>
     <div v-if="!data.get.loading" class="flex-1 overflow-y-auto">
@@ -17,7 +17,7 @@
       />
     </div>
     <div v-else class="flex flex-1 items-center justify-center">
-      <Spinner />
+      <Spinner class="size-8" />
     </div>
     <div class="flex flex-row-reverse">
       <Button
@@ -31,7 +31,12 @@
 </template>
 <script setup>
 import Fields from '@/components/Fields.vue'
-import { createDocumentResource, createResource, Spinner, Badge } from 'frappe-ui'
+import {
+  createDocumentResource,
+  createResource,
+  Spinner,
+  Badge,
+} from 'frappe-ui'
 import { computed } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/Settings/TwilioSettings.vue b/frontend/src/components/Settings/TwilioSettings.vue
index 5672da6f..8d8479ba 100644
--- a/frontend/src/components/Settings/TwilioSettings.vue
+++ b/frontend/src/components/Settings/TwilioSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <SettingsPage doctype="Twilio Settings" />
+  <SettingsPage doctype="Twilio Settings" class="p-8" />
 </template>
 <script setup>
 import SettingsPage from '@/components/Settings/SettingsPage.vue'
diff --git a/frontend/src/components/Settings/WhatsAppSettings.vue b/frontend/src/components/Settings/WhatsAppSettings.vue
index 027b1b91..0b257791 100644
--- a/frontend/src/components/Settings/WhatsAppSettings.vue
+++ b/frontend/src/components/Settings/WhatsAppSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <SettingsPage doctype="WhatsApp Settings" />
+  <SettingsPage doctype="WhatsApp Settings" class="p-8" />
 </template>
 <script setup>
 import SettingsPage from '@/components/Settings/SettingsPage.vue'