diff --git a/src/routes/personalInfo/about.svelte b/src/routes/personalInfo/about.svelte
index 6f149393..b3af4290 100644
--- a/src/routes/personalInfo/about.svelte
+++ b/src/routes/personalInfo/about.svelte
@@ -9,6 +9,7 @@
   import contributors from "$lib/components/personalInfo/contributors.json";
   import { t, locale, locales} from "$lib/i18n";
   import SubPageHeader from '$shared/subPageHeader.svelte';
+  import IonPage from 'ionic-svelte/components/IonPage.svelte';
   import { construct } from 'ionicons/icons';
 
   interface Contributor {
@@ -51,7 +52,7 @@
 
 </script>
 
-
+<IonPage>
 <SubPageHeader title={$t("about.title")} stackedNav/>
 <ion-content class="ion-padding">
 <div>
@@ -121,6 +122,7 @@
 </div>
 </div>
 </ion-content>
+</IonPage>
 
 <style>
   
@@ -128,10 +130,10 @@
   padding: 20px;
 }
 
-.section {
+/* .section {
   margin-bottom: 30px;
   align-items: flex-start;
-}
+} */
 
 .section-title {
   color: var(--ion-color-primary);
@@ -164,5 +166,9 @@
   transform: scale(1.2);
 }
 
+ion-content {
+		--padding-end: 0.6rem;
+		--padding-start: 0.6rem;
+}
+
 </style>
-  
\ No newline at end of file
diff --git a/src/routes/personalInfo/settings.svelte b/src/routes/personalInfo/settings.svelte
index b27334c2..47f1c961 100644
--- a/src/routes/personalInfo/settings.svelte
+++ b/src/routes/personalInfo/settings.svelte
@@ -6,7 +6,7 @@
 	import CredentialLoginItem from '$components/webmailLogin/CredentialLoginItem.svelte';
 	import cog_solid from '$customIcons/cog-solid.svg';
 	import launchNativenotificationSettings from '$lib/functions/nativeSettings/launchNotificationSettings';
-	import { checkAppMode, toggleDarkTheme } from '$lib/globalFunctions/darkMode';
+	import { checkAppMode, toggleDarkTheme, autoDarkMode, toggleAutoDarkMode, darkMode } from '$lib/globalFunctions/darkMode';
 	import { t } from '$lib/i18n';
 	import { Capacitor } from '@capacitor/core';
 	import { AppUpdate, AppUpdateAvailability } from '@capawesome/capacitor-app-update';
@@ -17,7 +17,6 @@
 	import { onMount } from 'svelte';
 	import About from './about.svelte';
 	import Faq from './faq.svelte';
-	import { darkMode } from '$lib/globalFunctions/darkMode';
 
 	/**
 	 * @type {any}
@@ -164,12 +163,24 @@
 <ion-card>
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<ion-card-content>
+		<ion-item>
+			<ion-icon size="small" icon={allIonicIcons.contrast} />
+			<ion-toggle
+				id="autoThemeToggle"
+				class="ion-padding-start"
+				checked={$autoDarkMode}
+				on:ionChange={async () => await toggleAutoDarkMode()}
+			>
+				Auto Dark Mode
+			</ion-toggle>
+		</ion-item>
 		<ion-item>
 			<ion-icon size="small" icon={allIonicIcons.brush} />
 			<ion-toggle
 				id="themeToggle"
 				class="ion-padding-start"
 				checked={$darkMode}
+				disabled={$autoDarkMode}
 				on:ionChange={async () => await toggleDarkTheme()}
 			>
 				Dark Mode