diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..bf241bd
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+	"tabWidth": 3,
+	"useTabs": true,
+	"semi": false,
+	"trailingComma": "none",
+	"arrowParens": "avoid",
+	"singleQuote": false
+}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index d8ff782..9a23c5d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,23 +1,51 @@
-<nav class="navbar navbar-expand-md navbar-dark bg-primary default-font mat-elevation-z10" id="calendo-navbar">
-	<a class="navbar-brand ml-3" routerLink="/" style="font-size: 25px">Calendo</a>
+<nav
+	class="navbar navbar-expand-md navbar-dark bg-primary default-font mat-elevation-z10"
+	id="calendo-navbar"
+>
+	<a class="navbar-brand ml-3" routerLink="/" style="font-size: 25px"
+		>Calendo</a
+	>
 
-	<div class="collapse navbar-collapse" id="navbar-items" [ngClass]="dataService.smallWindow ? '' : 'd-flex justify-content-center'" style="font-size: 20px;">
+	<div
+		class="collapse navbar-collapse"
+		id="navbar-items"
+		[ngClass]="dataService.smallWindow ? '' : 'd-flex justify-content-center'"
+		style="font-size: 20px"
+	>
 		<ul class="navbar-nav text-white">
 			<li class="nav-item mx-3 my-auto">
-				<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" class="nav-link">{{ locale.start }}</a>
+				<a
+					routerLink="/"
+					routerLinkActive="active"
+					[routerLinkActiveOptions]="{ exact: true }"
+					class="nav-link"
+					>{{ locale.start }}</a
+				>
 			</li>
 			<li class="nav-item mx-3 my-auto">
-				<a routerLink="/calendar" routerLinkActive="active" class="nav-link">{{ locale.calendar }}</a>
+				<a
+					routerLink="/calendar"
+					routerLinkActive="active"
+					class="nav-link"
+					>{{ locale.calendar }}</a
+				>
 			</li>
 			<li class="nav-item mx-3 my-auto">
-				<a routerLink="/todos" routerLinkActive="active" class="nav-link">{{ locale.todos }}</a>
+				<a routerLink="/todos" routerLinkActive="active" class="nav-link">{{
+					locale.todos
+				}}</a>
 			</li>
 			<li class="nav-item mx-3 my-auto">
-				<a routerLink="/appointments" routerLinkActive="active" class="nav-link">{{ locale.appointments }}</a>
+				<a
+					routerLink="/appointments"
+					routerLinkActive="active"
+					class="nav-link"
+					>{{ locale.appointments }}</a
+				>
 			</li>
 		</ul>
 	</div>
-	
+
 	<calendo-user-menu style="margin-right: -6px"></calendo-user-menu>
 </nav>
 
@@ -28,37 +56,65 @@
 <div
 	id="bottom-navigation-bar"
 	class="bg-primary d-flex flex-row"
-	*ngIf="dataService.smallWindow">
-
+	*ngIf="dataService.smallWindow"
+>
 	<button
 		mat-flat-button
 		class="bottom-navigation-button flex-fill"
-		routerLink="/">
-		<img src="/assets/svgs/home-white-outlined.svg" [style.display]="currentUrl == '/' ? 'none' : ''">
-		<img src="/assets/svgs/home-white-filled.svg" [style.display]="currentUrl == '/' ? '' : 'none'">
+		routerLink="/"
+	>
+		<img
+			src="/assets/svgs/home-white-outlined.svg"
+			[style.display]="currentUrl == '/' ? 'none' : ''"
+		/>
+		<img
+			src="/assets/svgs/home-white-filled.svg"
+			[style.display]="currentUrl == '/' ? '' : 'none'"
+		/>
 	</button>
 
 	<button
 		mat-flat-button
 		class="bottom-navigation-button flex-fill"
-		routerLink="/calendar">
-		<img src="/assets/svgs/event_note-white-outlined.svg" [style.display]="currentUrl == '/calendar' ? 'none' : ''">
-		<img src="/assets/svgs/event_note-white-filled.svg" [style.display]="currentUrl == '/calendar' ? '' : 'none'">
+		routerLink="/calendar"
+	>
+		<img
+			src="/assets/svgs/event_note-white-outlined.svg"
+			[style.display]="currentUrl == '/calendar' ? 'none' : ''"
+		/>
+		<img
+			src="/assets/svgs/event_note-white-filled.svg"
+			[style.display]="currentUrl == '/calendar' ? '' : 'none'"
+		/>
 	</button>
 
 	<button
 		mat-flat-button
 		class="bottom-navigation-button flex-fill"
-		routerLink="/todos">
-		<img src="/assets/svgs/check_box-white-outlined.svg" [style.display]="currentUrl == '/todos' ? 'none' : ''">
-		<img src="/assets/svgs/check_box-white-filled.svg" [style.display]="currentUrl == '/todos' ? '' : 'none'">
+		routerLink="/todos"
+	>
+		<img
+			src="/assets/svgs/check_box-white-outlined.svg"
+			[style.display]="currentUrl == '/todos' ? 'none' : ''"
+		/>
+		<img
+			src="/assets/svgs/check_box-white-filled.svg"
+			[style.display]="currentUrl == '/todos' ? '' : 'none'"
+		/>
 	</button>
 
 	<button
 		mat-flat-button
 		class="bottom-navigation-button flex-fill"
-		routerLink="/appointments">
-		<img src="/assets/svgs/event-white-outlined.svg" [style.display]="currentUrl == '/appointments' ? 'none' : ''">
-		<img src="/assets/svgs/event-white-filled.svg" [style.display]="currentUrl == '/appointments' ? '' : 'none'">
+		routerLink="/appointments"
+	>
+		<img
+			src="/assets/svgs/event-white-outlined.svg"
+			[style.display]="currentUrl == '/appointments' ? 'none' : ''"
+		/>
+		<img
+			src="/assets/svgs/event-white-filled.svg"
+			[style.display]="currentUrl == '/appointments' ? '' : 'none'"
+		/>
 	</button>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 0dd3c8b..6ac4c34 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,8 +1,8 @@
-.default-font{
-	font-family: 'Roboto', sans-serif;
+.default-font {
+	font-family: "Roboto", sans-serif;
 }
 
-#bottom-navigation-bar{
+#bottom-navigation-bar {
 	position: fixed;
 	bottom: 0;
 	left: 0;
@@ -10,9 +10,9 @@
 	height: 56px;
 }
 
-.bottom-navigation-button{
+.bottom-navigation-button {
 	border-radius: 0px;
 	color: white;
 	background-color: var(--primary);
 	height: 56px;
-}
\ No newline at end of file
+}
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
deleted file mode 100644
index ce6b3cb..0000000
--- a/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-  it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-  it(`should have as title 'app'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app');
-  }));
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to calendo!');
-  }));
-});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 07fbe52..7017102 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,32 +1,27 @@
-import { Component, HostListener } from '@angular/core'
-import { Router, NavigationStart } from '@angular/router'
-import { Dav, Environment, TableObject } from 'dav-js'
-import { environment } from '../environments/environment'
-import { enUS } from '../locales/locales'
-import { DataService } from './services/data-service'
-import { ConvertTableObjectToAppointment } from './models/Appointment'
-import { ConvertTableObjectToTodo } from './models/Todo'
-import { initializeIcons } from 'office-ui-fabric-react/lib/Icons'
-import { TodoList, ConvertTableObjectToTodoList } from './models/TodoList'
+import { Component, HostListener } from "@angular/core"
+import { Router, NavigationStart } from "@angular/router"
+import { Dav, Environment, TableObject } from "dav-js"
+import { environment } from "../environments/environment"
+import { enUS } from "../locales/locales"
+import { DataService } from "./services/data-service"
+import { ConvertTableObjectToAppointment } from "./models/Appointment"
+import { ConvertTableObjectToTodo } from "./models/Todo"
+import { initializeIcons } from "office-ui-fabric-react/lib/Icons"
+import { TodoList, ConvertTableObjectToTodoList } from "./models/TodoList"
 
 const smallWindowMaxSize = 768
 
 @Component({
-	selector: 'app-root',
-	templateUrl: './app.component.html',
-	styleUrls: [
-		'./app.component.scss'
-	]
+	selector: "app-root",
+	templateUrl: "./app.component.html",
+	styleUrls: ["./app.component.scss"]
 })
 export class AppComponent {
 	locale = enUS.navbar
 	windowWidth: number = 500
 	currentUrl: string = "/"
 
-	constructor(
-		public dataService: DataService,
-		private router: Router
-	) {
+	constructor(public dataService: DataService, private router: Router) {
 		this.locale = this.dataService.GetLocale().navbar
 		initializeIcons()
 
@@ -48,24 +43,35 @@ export class AppComponent {
 
 		// Initialize dav
 		new Dav({
-			environment: environment.production ? Environment.Production : Environment.Development,
+			environment: environment.production
+				? Environment.Production
+				: Environment.Development,
 			appId: environment.appId,
-			tableIds: [environment.todoTableId, environment.todoListTableId, environment.appointmentTableId],
+			tableIds: [
+				environment.todoTableId,
+				environment.todoListTableId,
+				environment.appointmentTableId
+			],
 			notificationOptions: {
 				icon: "/assets/icons/icon-192x192.png",
 				badge: "/assets/icons/badge-128x128.png"
 			},
 			callbacks: {
-				UpdateAllOfTable: (tableId: number) => this.UpdateAllOfTable(tableId),
-				UpdateTableObject: (tableObject: TableObject, downloaded: boolean) => this.UpdateTableObject(tableObject, downloaded),
-				DeleteTableObject: (tableObject: TableObject) => this.DeleteTableObject(tableObject)
+				UpdateAllOfTable: (tableId: number) =>
+					this.UpdateAllOfTable(tableId),
+				UpdateTableObject: (
+					tableObject: TableObject,
+					downloaded: boolean
+				) => this.UpdateTableObject(tableObject, downloaded),
+				DeleteTableObject: (tableObject: TableObject) =>
+					this.DeleteTableObject(tableObject)
 			}
 		})
 	}
 
-	@HostListener('window:resize')
+	@HostListener("window:resize")
 	setSize() {
-		this.dataService.smallWindow = (window.innerWidth < smallWindowMaxSize)
+		this.dataService.smallWindow = window.innerWidth < smallWindowMaxSize
 		this.windowWidth = window.innerWidth
 	}
 
@@ -78,7 +84,10 @@ export class AppComponent {
 		}
 	}
 
-	async UpdateTableObject(tableObject: TableObject, downloaded: boolean = false) {
+	async UpdateTableObject(
+		tableObject: TableObject,
+		downloaded: boolean = false
+	) {
 		if (tableObject.TableId == environment.appointmentTableId) {
 			// Update appointment
 			var appointment = ConvertTableObjectToAppointment(tableObject)
@@ -174,7 +183,10 @@ export class AppComponent {
 				a: 255
 			}
 
-			let titleBar = window["Windows"].UI.ViewManagement.ApplicationView.getForCurrentView().titleBar
+			let titleBar =
+				window[
+					"Windows"
+				].UI.ViewManagement.ApplicationView.getForCurrentView().titleBar
 			titleBar.foregroundColor = themeColor
 			titleBar.backgroundColor = themeColor
 			titleBar.buttonBackgroundColor = themeColor
@@ -183,4 +195,4 @@ export class AppComponent {
 			titleBar.inactiveBackgroundColor = themeColor
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c52d5d4..52d0b97 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,49 +1,55 @@
-import { AngularReactBrowserModule } from '@angular-react/core';
-import { FormsModule } from '@angular/forms';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { ServiceWorkerModule } from '@angular/service-worker';
-import { FabCheckboxModule, FabButtonModule, FabDropdownModule, FabTextFieldModule, FabIconModule } from '@angular-react/fabric';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatButtonModule } from '@angular/material/button';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatTreeModule } from '@angular/material/tree';
-import { MatRadioModule } from '@angular/material/radio';
-import { DragulaModule } from 'ng2-dragula';
+import { AngularReactBrowserModule } from "@angular-react/core"
+import { FormsModule } from "@angular/forms"
+import { NgModule } from "@angular/core"
+import { RouterModule } from "@angular/router"
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap"
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome"
+import { ServiceWorkerModule } from "@angular/service-worker"
+import {
+	FabCheckboxModule,
+	FabButtonModule,
+	FabDropdownModule,
+	FabTextFieldModule,
+	FabIconModule
+} from "@angular-react/fabric"
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
+import { MatButtonModule } from "@angular/material/button"
+import { MatSnackBarModule } from "@angular/material/snack-bar"
+import { MatTreeModule } from "@angular/material/tree"
+import { MatRadioModule } from "@angular/material/radio"
+import { DragulaModule } from "ng2-dragula"
 
-import { AppComponent } from './app.component';
-import { StartPageComponent } from './pages/start-page/start-page.component';
-import { TodosPageComponent } from './pages/todos-page/todos-page.component';
-import { AppointmentsPageComponent } from './pages/appointments-page/appointments-page.component';
-import { AccountPageComponent } from './pages/account-page/account-page.component';
-import { SettingsPageComponent } from './pages/settings-page/settings-page.component';
-import { CalendarPageComponent } from './pages/calendar-page/calendar-page.component';
-import { CalendarDayPageComponent } from './pages/calendar-day-page/calendar-day-page.component';
-import { TodoListPageComponent } from './pages/todo-list-page/todo-list-page.component';
-import { UserMenuComponent } from './components/user-menu/user-menu.component';
-import { TodoListItemComponent } from './components/todo-list-item/todo-list-item.component';
-import { SmallTodoListItemComponent } from './components/small-todo-list-item/small-todo-list-item.component';
-import { TodoItemComponent } from './components/todo-item/todo-item.component';
-import { SmallTodoItemComponent } from './components/small-todo-item/small-todo-item.component';
-import { AppointmentItemComponent } from './components/appointment-item/appointment-item.component';
-import { SmallAppointmentItemComponent } from './components/small-appointment-item/small-appointment-item.component';
-import { NewTodoModalComponent } from './components/new-todo-modal/new-todo-modal.component';
-import { AppointmentModalComponent } from './components/appointment-modal/appointment-modal.component';
-import { TodoListModalComponent } from './components/todo-list-modal/todo-list-modal.component';
-import { DeleteTodoListModalComponent } from './components/delete-todo-list-modal/delete-todo-list-modal.component';
-import { DeleteAppointmentModalComponent } from './components/delete-appointment-modal/delete-appointment-modal.component';
-import { LogoutModalComponent } from './components/logout-modal/logout-modal.component';
-import { TodoGroupBadgeComponent } from './components/todo-group-badge/todo-group-badge.component';
-import { SetTodoGroupsComponent } from './components/set-todo-groups/set-todo-groups.component';
-import { SetNameComponent } from './components/set-name/set-name.component'
-import { TodoListTreeComponent } from './components/todo-list-tree/todo-list-tree.component';
-import { DataService } from './services/data-service';
-import { environment } from '../environments/environment';
+import { AppComponent } from "./app.component"
+import { StartPageComponent } from "./pages/start-page/start-page.component"
+import { TodosPageComponent } from "./pages/todos-page/todos-page.component"
+import { AppointmentsPageComponent } from "./pages/appointments-page/appointments-page.component"
+import { AccountPageComponent } from "./pages/account-page/account-page.component"
+import { SettingsPageComponent } from "./pages/settings-page/settings-page.component"
+import { CalendarPageComponent } from "./pages/calendar-page/calendar-page.component"
+import { CalendarDayPageComponent } from "./pages/calendar-day-page/calendar-day-page.component"
+import { TodoListPageComponent } from "./pages/todo-list-page/todo-list-page.component"
+import { UserMenuComponent } from "./components/user-menu/user-menu.component"
+import { TodoListItemComponent } from "./components/todo-list-item/todo-list-item.component"
+import { SmallTodoListItemComponent } from "./components/small-todo-list-item/small-todo-list-item.component"
+import { TodoItemComponent } from "./components/todo-item/todo-item.component"
+import { SmallTodoItemComponent } from "./components/small-todo-item/small-todo-item.component"
+import { AppointmentItemComponent } from "./components/appointment-item/appointment-item.component"
+import { SmallAppointmentItemComponent } from "./components/small-appointment-item/small-appointment-item.component"
+import { NewTodoModalComponent } from "./components/new-todo-modal/new-todo-modal.component"
+import { AppointmentModalComponent } from "./components/appointment-modal/appointment-modal.component"
+import { TodoListModalComponent } from "./components/todo-list-modal/todo-list-modal.component"
+import { DeleteTodoListModalComponent } from "./components/delete-todo-list-modal/delete-todo-list-modal.component"
+import { DeleteAppointmentModalComponent } from "./components/delete-appointment-modal/delete-appointment-modal.component"
+import { LogoutModalComponent } from "./components/logout-modal/logout-modal.component"
+import { TodoGroupBadgeComponent } from "./components/todo-group-badge/todo-group-badge.component"
+import { SetTodoGroupsComponent } from "./components/set-todo-groups/set-todo-groups.component"
+import { SetNameComponent } from "./components/set-name/set-name.component"
+import { TodoListTreeComponent } from "./components/todo-list-tree/todo-list-tree.component"
+import { DataService } from "./services/data-service"
+import { environment } from "../environments/environment"
 
 @NgModule({
-  	declarations: [
+	declarations: [
 		AppComponent,
 		StartPageComponent,
 		TodosPageComponent,
@@ -51,59 +57,62 @@ import { environment } from '../environments/environment';
 		AccountPageComponent,
 		SettingsPageComponent,
 		CalendarPageComponent,
-      CalendarDayPageComponent,
-      TodoListPageComponent,
+		CalendarDayPageComponent,
+		TodoListPageComponent,
 		UserMenuComponent,
-      TodoListItemComponent,
-      SmallTodoListItemComponent,
+		TodoListItemComponent,
+		SmallTodoListItemComponent,
 		TodoItemComponent,
 		SmallTodoItemComponent,
 		AppointmentItemComponent,
 		SmallAppointmentItemComponent,
 		NewTodoModalComponent,
-      AppointmentModalComponent,
-      TodoListModalComponent,
+		AppointmentModalComponent,
+		TodoListModalComponent,
 		DeleteTodoListModalComponent,
-      DeleteAppointmentModalComponent,
+		DeleteAppointmentModalComponent,
 		LogoutModalComponent,
-      TodoGroupBadgeComponent,
-      SetTodoGroupsComponent,
-      SetNameComponent,
-      TodoListTreeComponent
-  	],
-  	imports: [
+		TodoGroupBadgeComponent,
+		SetTodoGroupsComponent,
+		SetNameComponent,
+		TodoListTreeComponent
+	],
+	imports: [
 		AngularReactBrowserModule,
 		FormsModule,
-		RouterModule.forRoot([
-			{ path: '', component: StartPageComponent },
-			{ path: 'calendar', component: CalendarPageComponent },
-			{ path: 'calendar/day/:time', component: CalendarDayPageComponent },
-			{ path: 'todos', component: TodosPageComponent },
-         { path: 'appointments', component: AppointmentsPageComponent },
-         { path: 'todolist/:uuid', component: TodoListPageComponent },
-			{ path: 'account', component: AccountPageComponent },
-         { path: 'settings', component: SettingsPageComponent }
-		], {
-			useHash: false
-		}),
+		RouterModule.forRoot(
+			[
+				{ path: "", component: StartPageComponent },
+				{ path: "calendar", component: CalendarPageComponent },
+				{ path: "calendar/day/:time", component: CalendarDayPageComponent },
+				{ path: "todos", component: TodosPageComponent },
+				{ path: "appointments", component: AppointmentsPageComponent },
+				{ path: "todolist/:uuid", component: TodoListPageComponent },
+				{ path: "account", component: AccountPageComponent },
+				{ path: "settings", component: SettingsPageComponent }
+			],
+			{
+				useHash: false
+			}
+		),
 		NgbModule,
 		FontAwesomeModule,
-      ServiceWorkerModule.register('/sw.js', { enabled: environment.production }),
-      FabCheckboxModule,
-      FabButtonModule,
+		ServiceWorkerModule.register("/sw.js", {
+			enabled: environment.production
+		}),
+		FabCheckboxModule,
+		FabButtonModule,
 		FabDropdownModule,
-      FabTextFieldModule,
-      FabIconModule,
-      BrowserAnimationsModule,
-      MatButtonModule,
-      MatSnackBarModule,
-      MatTreeModule,
-      MatRadioModule,
-      DragulaModule.forRoot()
-  	],
-  	providers: [
-		DataService
+		FabTextFieldModule,
+		FabIconModule,
+		BrowserAnimationsModule,
+		MatButtonModule,
+		MatSnackBarModule,
+		MatTreeModule,
+		MatRadioModule,
+		DragulaModule.forRoot()
 	],
-  	bootstrap: [AppComponent]
+	providers: [DataService],
+	bootstrap: [AppComponent]
 })
-export class AppModule {}
\ No newline at end of file
+export class AppModule {}
diff --git a/src/app/components/appointment-item/appointment-item.component.html b/src/app/components/appointment-item/appointment-item.component.html
index 9841652..ce518c2 100644
--- a/src/app/components/appointment-item/appointment-item.component.html
+++ b/src/app/components/appointment-item/appointment-item.component.html
@@ -1,24 +1,61 @@
-<li class="list-group-item theme-background-color-secondary d-flex" style="padding: 10px 0px 10px 10px;">
-   <label class="col-form-label d-flex">
-		<fa-icon [icon]="faCheck" style="margin-left: -30px; margin-top: -2px; position: absolute; color: green" *ngIf="IsCompleted() && !appointment.allday"></fa-icon>
-		<div *ngIf="!appointment.allday" class="appointment-item-{{ appointment.uuid }} mr-2 text-color ms-fontSize-14" style=" margin-top: -8px">
-			<span class="font-italic position-absolute">{{ ConvertUnixTimestampToTime(appointment.start) }}</span><br>
-			<span class="font-italic position-absolute">{{ ConvertUnixTimestampToTime(appointment.end) }}</span>
-		</div>
-		<span class="text-color my-auto" [ngClass]="appointment.allday ? '' : 'ml-5'">{{ appointment.name }}</span>
-	</label>
-	
-	<div ngbDropdown placement="bottom-right" class="my-auto ml-auto">
-		<div ngbDropdownToggle>
-			<fab-icon-button [iconProps]="menuButtonIconProps"></fab-icon-button>
-		</div>
-
-		<div ngbDropdownMenu class="theme-background-color-tertiary ms-depth-4 ms-motion-slideDownIn">
-			<button class="dropdown-item text-color cursor" (click)="Edit()">{{ locale.edit }}</button>
-			<button class="dropdown-item text-color cursor" (click)="Delete()">{{ locale.delete }}</button>
-		</div>
-	</div>
-</li>
-
-<calendo-delete-appointment-modal [appointment]="appointment" (remove)="Remove()"></calendo-delete-appointment-modal>
-<calendo-appointment-modal (save)="Update($event)"></calendo-appointment-modal>
\ No newline at end of file
+<li
+	class="list-group-item theme-background-color-secondary d-flex"
+	style="padding: 10px 0px 10px 10px"
+>
+	<label class="col-form-label d-flex">
+		<fa-icon
+			[icon]="faCheck"
+			style="
+				margin-left: -30px;
+				margin-top: -2px;
+				position: absolute;
+				color: green;
+			"
+			*ngIf="IsCompleted() && !appointment.allday"
+		></fa-icon>
+		<div
+			*ngIf="!appointment.allday"
+			class="appointment-item-{{
+				appointment.uuid
+			}} mr-2 text-color ms-fontSize-14"
+			style="margin-top: -8px"
+		>
+			<span class="font-italic position-absolute">{{
+				ConvertUnixTimestampToTime(appointment.start)
+			}}</span
+			><br />
+			<span class="font-italic position-absolute">{{
+				ConvertUnixTimestampToTime(appointment.end)
+			}}</span>
+		</div>
+		<span
+			class="text-color my-auto"
+			[ngClass]="appointment.allday ? '' : 'ml-5'"
+			>{{ appointment.name }}</span
+		>
+	</label>
+
+	<div ngbDropdown placement="bottom-right" class="my-auto ml-auto">
+		<div ngbDropdownToggle>
+			<fab-icon-button [iconProps]="menuButtonIconProps"></fab-icon-button>
+		</div>
+
+		<div
+			ngbDropdownMenu
+			class="theme-background-color-tertiary ms-depth-4 ms-motion-slideDownIn"
+		>
+			<button class="dropdown-item text-color cursor" (click)="Edit()">
+				{{ locale.edit }}
+			</button>
+			<button class="dropdown-item text-color cursor" (click)="Delete()">
+				{{ locale.delete }}
+			</button>
+		</div>
+	</div>
+</li>
+
+<calendo-delete-appointment-modal
+	[appointment]="appointment"
+	(remove)="Remove()"
+></calendo-delete-appointment-modal>
+<calendo-appointment-modal (save)="Update($event)"></calendo-appointment-modal>
diff --git a/src/app/components/appointment-item/appointment-item.component.ts b/src/app/components/appointment-item/appointment-item.component.ts
index 89cec96..b0c695c 100644
--- a/src/app/components/appointment-item/appointment-item.component.ts
+++ b/src/app/components/appointment-item/appointment-item.component.ts
@@ -1,63 +1,70 @@
-import { Component, Input, ViewChild } from '@angular/core';
-import * as moment from 'moment';
-import { AppointmentModalComponent } from '../../components/appointment-modal/appointment-modal.component';
-import { DeleteAppointmentModalComponent } from '../../components/delete-appointment-modal/delete-appointment-modal.component';
-import { Appointment } from '../../models/Appointment';
-import { DataService } from '../../services/data-service';
-import { environment } from '../../../environments/environment';
-import { enUS } from '../../../locales/locales';
-import { faCheck, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
-import { IIconProps } from 'office-ui-fabric-react';
-
-@Component({
-   selector: "calendo-appointment-item",
-   templateUrl: "./appointment-item.component.html"
-})
-export class AppointmentItemComponent{
-   locale = enUS.appointmentItem;
-   faCheck = faCheck;
-   faEllipsisH = faEllipsisH;
-   @Input() appointment: Appointment = new Appointment("", "", 0, 0, false, environment.appointmentDefaultColor);
-   @Input() showCompleted: boolean = false;
-   @ViewChild(AppointmentModalComponent, { static: true })
-   private newAppointmentModalComponent: AppointmentModalComponent;
-   @ViewChild(DeleteAppointmentModalComponent, { static: true })
-   private deleteAppointmentModalComponent: DeleteAppointmentModalComponent;
-   menuButtonIconProps: IIconProps = {
-      iconName: "More",
-      style: {
-         fontSize: 16,
-         color: this.dataService.darkTheme ? "white" : "black"
-      }
-   }
-
-   constructor(public dataService: DataService){
-      this.locale = this.dataService.GetLocale().appointmentItem;
-   }
-
-   Edit(){
-      this.newAppointmentModalComponent.Show(this.appointment);
-   }
-
-   Update(appointment: Appointment){
-      this.dataService.UpdateAppointment(appointment);
-   }
-
-   Delete(){
-      this.deleteAppointmentModalComponent.Show();
-   }
-
-   Remove(){
-      this.dataService.RemoveAppointment(this.appointment);
-   }
-
-   ConvertUnixTimestampToTime(timestamp: number): string{
-      return moment.unix(timestamp).format("HH:mm");
-   }
-
-   IsCompleted(): boolean{
-      if(!this.showCompleted) return false;
-      
-      return moment.now() / 1000 > this.appointment.end
-   }
-}
\ No newline at end of file
+import { Component, Input, ViewChild } from "@angular/core"
+import * as moment from "moment"
+import { AppointmentModalComponent } from "../../components/appointment-modal/appointment-modal.component"
+import { DeleteAppointmentModalComponent } from "../../components/delete-appointment-modal/delete-appointment-modal.component"
+import { Appointment } from "../../models/Appointment"
+import { DataService } from "../../services/data-service"
+import { environment } from "../../../environments/environment"
+import { enUS } from "../../../locales/locales"
+import { faCheck, faEllipsisH } from "@fortawesome/free-solid-svg-icons"
+import { IIconProps } from "office-ui-fabric-react"
+
+@Component({
+	selector: "calendo-appointment-item",
+	templateUrl: "./appointment-item.component.html"
+})
+export class AppointmentItemComponent {
+	locale = enUS.appointmentItem
+	faCheck = faCheck
+	faEllipsisH = faEllipsisH
+	@Input() appointment: Appointment = new Appointment(
+		"",
+		"",
+		0,
+		0,
+		false,
+		environment.appointmentDefaultColor
+	)
+	@Input() showCompleted: boolean = false
+	@ViewChild(AppointmentModalComponent, { static: true })
+	private newAppointmentModalComponent: AppointmentModalComponent
+	@ViewChild(DeleteAppointmentModalComponent, { static: true })
+	private deleteAppointmentModalComponent: DeleteAppointmentModalComponent
+	menuButtonIconProps: IIconProps = {
+		iconName: "More",
+		style: {
+			fontSize: 16,
+			color: this.dataService.darkTheme ? "white" : "black"
+		}
+	}
+
+	constructor(public dataService: DataService) {
+		this.locale = this.dataService.GetLocale().appointmentItem
+	}
+
+	Edit() {
+		this.newAppointmentModalComponent.Show(this.appointment)
+	}
+
+	Update(appointment: Appointment) {
+		this.dataService.UpdateAppointment(appointment)
+	}
+
+	Delete() {
+		this.deleteAppointmentModalComponent.Show()
+	}
+
+	Remove() {
+		this.dataService.RemoveAppointment(this.appointment)
+	}
+
+	ConvertUnixTimestampToTime(timestamp: number): string {
+		return moment.unix(timestamp).format("HH:mm")
+	}
+
+	IsCompleted(): boolean {
+		if (!this.showCompleted) return false
+
+		return moment.now() / 1000 > this.appointment.end
+	}
+}
diff --git a/src/app/components/appointment-modal/appointment-modal.component.html b/src/app/components/appointment-modal/appointment-modal.component.html
index a254852..83322f7 100644
--- a/src/app/components/appointment-modal/appointment-modal.component.html
+++ b/src/app/components/appointment-modal/appointment-modal.component.html
@@ -1,99 +1,169 @@
-<ng-template #appointmentModal let-c="close" let-d="dismiss">
-   <div class="modal-header theme-background-color-primary" [ngClass]="dataService.darkTheme ? 'border-dark' : ''">
-		<h4 class="modal-title text-color">{{ new ? locale.newAppointment : locale.editAppointment }}</h4>
-		<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
-			<span aria-hidden="true" class="text-color">&times;</span>
-		</button>
-   </div>
-   <div class="modal-body row theme-background-color-primary mx-0">
-		<div class="mx-auto mb-1">
-			<!-- Datepicker -->
-			<ngb-datepicker style="background-color: white;" #dp [(ngModel)]="appointmentDate" (navigate)="date = $event.next"></ngb-datepicker>
-
-         <!-- All Day Checkbox -->
-         <div class="mt-3 ml-1">
-				<div class="d-inline-flex">
-					<fab-checkbox [checked]="appointmentAllDayCheckboxChecked" (onChange)="ToggleAllDayCheckbox()"></fab-checkbox>
-					<label class="col-form-label ml-2 text-color cursor ms-fontSize-14" style="margin-top: -8px" (click)="ToggleAllDayCheckbox()">
-						{{ locale.entireDay }}
-					</label>
-				</div>
-         </div>
-		</div>
-
-		<div class="mx-auto mb-3">
-			<!-- Start & End time pickers -->
-			<div class="mx-auto">
-				<div class="row">
-					<div class="col-5 offset-1 mr-1">
-						<label for="appointmentStartTime" class="col-form-label text-color">{{ locale.start }}</label>
-						<ngb-timepicker
-							id="appointment-start-time"
-							[disabled]="appointmentAllDayCheckboxChecked"
-							[(ngModel)]="appointmentStartTime"
-							[hourStep]="1"
-							[minuteStep]="15"
-							(ngModelChange)="TimepickerValueChanged()">
-						</ngb-timepicker>
-					</div>
-	
-					<div class="col-5">
-						<label for="appointmentEndTime" class="col-form-label text-color">{{ locale.end }}</label>
-						<ngb-timepicker
-							id="appointment-end-time"
-							[disabled]="appointmentAllDayCheckboxChecked"
-							[(ngModel)]="appointmentEndTime"
-							[hourStep]="1"
-							[minuteStep]="15"
-							(ngModelChange)="TimepickerValueChanged()">
-						</ngb-timepicker>
-					</div>
-				</div>
-			</div>
-      </div>
-
-		<!-- Reminder -->
-		<div class="col-12 mt-2">
-         <div class="mx-auto" style="width: 250px;" [style.display]="showReminderOption ? 'block' : 'none'">
-            <div class="d-inline-flex">
-               <fab-checkbox [checked]="reminderCheckboxChecked" (onChange)="ToggleReminderCheckbox()"></fab-checkbox>
-               <label class="col-form-label ml-2 text-color cursor ms-fontSize-14" style="margin-top: -8px" (click)="ToggleReminderCheckbox()">
-                  {{ locale.reminder }}
-               </label>
-            </div>
-            
-				<div class="form-group mt-2" style="width: 250px;">
-					<fab-dropdown
-						[options]="reminderOptions" 
-						[selectedKey]="notificationTime" 
-						[disabled]="!reminderCheckboxChecked"
-						(onChange)="ReminderDropdownChanged($event)">
-					</fab-dropdown>
-				</div>
-			</div>
-
-			<!-- Color -->
-			<div class="mx-auto mt-3" style="width: 250px;">
-				<label class="text-color">{{ locale.color }}</label>
-	
-				<div class="row mx-auto">
-					<div
-						class="rounded-circle m-1 appointment-color cursor" 
-						[style.background-color]="selectedColor == i ? (dataService.darkTheme ? '#15202b' : 'white') : '#' + color" 
-						[style.border]="selectedColor == i ? '5px solid #' + color : ''"
-						(click)="selectedColor = i"
-						*ngFor="let color of availableColors; let i = index;">
-					</div>
-				</div>
-			</div>
-
-			<!-- Name -->
-			<div class="mx-auto mt-3" style="width: 250px;">
-				<calendo-set-name [(name)]="appointmentName" (nameChanged)="appointmentName = $event; SetSubmitButtonDisabled()" (submit)="submitButtonDisabled ? 0 : c()" [type]="2" [width]="250"></calendo-set-name>
-			</div>
-		</div>
-   </div>
-   <div class="modal-footer theme-background-color-primary" [ngClass]="dataService.darkTheme ? 'border-dark' : ''">
-		<button type="button" class="btn btn-primary" [disabled]="submitButtonDisabled" (click)="c()">{{ locale.save }}</button>
-   </div>
-</ng-template>
\ No newline at end of file
+<ng-template #appointmentModal let-c="close" let-d="dismiss">
+	<div
+		class="modal-header theme-background-color-primary"
+		[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	>
+		<h4 class="modal-title text-color">
+			{{ new ? locale.newAppointment : locale.editAppointment }}
+		</h4>
+		<button
+			type="button"
+			class="close"
+			aria-label="Close"
+			(click)="d('Cross click')"
+		>
+			<span aria-hidden="true" class="text-color">&times;</span>
+		</button>
+	</div>
+	<div class="modal-body row theme-background-color-primary mx-0">
+		<div class="mx-auto mb-1">
+			<!-- Datepicker -->
+			<ngb-datepicker
+				style="background-color: white"
+				#dp
+				[(ngModel)]="appointmentDate"
+				(navigate)="date = $event.next"
+			></ngb-datepicker>
+
+			<!-- All Day Checkbox -->
+			<div class="mt-3 ml-1">
+				<div class="d-inline-flex">
+					<fab-checkbox
+						[checked]="appointmentAllDayCheckboxChecked"
+						(onChange)="ToggleAllDayCheckbox()"
+					></fab-checkbox>
+					<label
+						class="col-form-label ml-2 text-color cursor ms-fontSize-14"
+						style="margin-top: -8px"
+						(click)="ToggleAllDayCheckbox()"
+					>
+						{{ locale.entireDay }}
+					</label>
+				</div>
+			</div>
+		</div>
+
+		<div class="mx-auto mb-3">
+			<!-- Start & End time pickers -->
+			<div class="mx-auto">
+				<div class="row">
+					<div class="col-5 offset-1 mr-1">
+						<label
+							for="appointmentStartTime"
+							class="col-form-label text-color"
+							>{{ locale.start }}</label
+						>
+						<ngb-timepicker
+							id="appointment-start-time"
+							[disabled]="appointmentAllDayCheckboxChecked"
+							[(ngModel)]="appointmentStartTime"
+							[hourStep]="1"
+							[minuteStep]="15"
+							(ngModelChange)="TimepickerValueChanged()"
+						>
+						</ngb-timepicker>
+					</div>
+
+					<div class="col-5">
+						<label
+							for="appointmentEndTime"
+							class="col-form-label text-color"
+							>{{ locale.end }}</label
+						>
+						<ngb-timepicker
+							id="appointment-end-time"
+							[disabled]="appointmentAllDayCheckboxChecked"
+							[(ngModel)]="appointmentEndTime"
+							[hourStep]="1"
+							[minuteStep]="15"
+							(ngModelChange)="TimepickerValueChanged()"
+						>
+						</ngb-timepicker>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Reminder -->
+		<div class="col-12 mt-2">
+			<div
+				class="mx-auto"
+				style="width: 250px"
+				[style.display]="showReminderOption ? 'block' : 'none'"
+			>
+				<div class="d-inline-flex">
+					<fab-checkbox
+						[checked]="reminderCheckboxChecked"
+						(onChange)="ToggleReminderCheckbox()"
+					></fab-checkbox>
+					<label
+						class="col-form-label ml-2 text-color cursor ms-fontSize-14"
+						style="margin-top: -8px"
+						(click)="ToggleReminderCheckbox()"
+					>
+						{{ locale.reminder }}
+					</label>
+				</div>
+
+				<div class="form-group mt-2" style="width: 250px">
+					<fab-dropdown
+						[options]="reminderOptions"
+						[selectedKey]="notificationTime"
+						[disabled]="!reminderCheckboxChecked"
+						(onChange)="ReminderDropdownChanged($event)"
+					>
+					</fab-dropdown>
+				</div>
+			</div>
+
+			<!-- Color -->
+			<div class="mx-auto mt-3" style="width: 250px">
+				<label class="text-color">{{ locale.color }}</label>
+
+				<div class="row mx-auto">
+					<div
+						class="rounded-circle m-1 appointment-color cursor"
+						[style.background-color]="
+							selectedColor == i
+								? dataService.darkTheme
+									? '#15202b'
+									: 'white'
+								: '#' + color
+						"
+						[style.border]="
+							selectedColor == i ? '5px solid #' + color : ''
+						"
+						(click)="selectedColor = i"
+						*ngFor="let color of availableColors; let i = index"
+					></div>
+				</div>
+			</div>
+
+			<!-- Name -->
+			<div class="mx-auto mt-3" style="width: 250px">
+				<calendo-set-name
+					[(name)]="appointmentName"
+					(nameChanged)="
+						appointmentName = $event; SetSubmitButtonDisabled()
+					"
+					(submit)="submitButtonDisabled ? 0 : c()"
+					[type]="2"
+					[width]="250"
+				></calendo-set-name>
+			</div>
+		</div>
+	</div>
+	<div
+		class="modal-footer theme-background-color-primary"
+		[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	>
+		<button
+			type="button"
+			class="btn btn-primary"
+			[disabled]="submitButtonDisabled"
+			(click)="c()"
+		>
+			{{ locale.save }}
+		</button>
+	</div>
+</ng-template>
diff --git a/src/app/components/appointment-modal/appointment-modal.component.scss b/src/app/components/appointment-modal/appointment-modal.component.scss
index ee772e0..909a9ae 100644
--- a/src/app/components/appointment-modal/appointment-modal.component.scss
+++ b/src/app/components/appointment-modal/appointment-modal.component.scss
@@ -1,4 +1,4 @@
-.appointment-color{
-   width: 30px;
-   height: 30px;
-}
\ No newline at end of file
+.appointment-color {
+	width: 30px;
+	height: 30px;
+}
diff --git a/src/app/components/appointment-modal/appointment-modal.component.ts b/src/app/components/appointment-modal/appointment-modal.component.ts
index 4439fff..325ceb7 100644
--- a/src/app/components/appointment-modal/appointment-modal.component.ts
+++ b/src/app/components/appointment-modal/appointment-modal.component.ts
@@ -1,310 +1,387 @@
-import { Component, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core'
-import { NgbModal, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap'
-import { IDropdownOption } from 'office-ui-fabric-react'
-import * as moment from 'moment'
-import {
-	Notification,
-	GetNotification,
-	SetupWebPushSubscription
-} from 'dav-js'
-import { Appointment, GetAppointment } from 'src/app/models/Appointment'
-import { DataService } from 'src/app/services/data-service'
-import { enUS } from 'src/locales/locales'
-
-@Component({
-	selector: "calendo-appointment-modal",
-	templateUrl: "./appointment-modal.component.html",
-	styleUrls: [
-		"./appointment-modal.component.scss"
-	]
-})
-export class AppointmentModalComponent {
-	locale = enUS.appointmentModal
-	notificationLocale = enUS.notifications.appointment
-	@Output() save = new EventEmitter()
-	@ViewChild('appointmentModal', { static: true }) appointmentModal: ElementRef
-	appointmentDate: NgbDateStruct
-	appointmentName: string
-	appointmentAllDayCheckboxChecked: boolean
-	appointmentStartTime: { hour: number, minute: number }
-	appointmentEndTime: { hour: number, minute: number }
-	new: boolean = true
-	appointmentUuid: string
-	availableColors: string[] = ["D32F2F", "D67724", "FFD600", "388E3C", "43A047", "00B0FF", "1565C0", "283593", "7B1FA2", "757575", "000000"]
-	selectedColor: number = 6
-	reminderCheckboxChecked: boolean = true
-	notificationTime: number = 3600				// Saves the time of the notification in seconds before the start of the appointment
-	showReminderOption: boolean = true
-	reminderOptions: IDropdownOption[] = []
-	modalVisible: boolean = false
-	submitButtonDisabled: boolean = true
-
-	constructor(
-		private modalService: NgbModal,
-		private dataService: DataService
-	) {
-		this.locale = this.dataService.GetLocale().appointmentModal
-		this.notificationLocale = this.dataService.GetLocale().notifications.appointment
-	}
-
-	Show(appointment?: Appointment, date?: number) {
-		if (this.modalVisible) return
-		this.modalVisible = true
-
-		// Check if push is supported
-		this.showReminderOption = (
-			('serviceWorker' in navigator)
-			&& ('PushManager' in window)
-			&& this.dataService.dav.isLoggedIn
-			&& this.dataService.GetNotificationPermission() != "denied"
-		)
-
-		// Init reminderTimes
-		this.reminderOptions = []
-		this.reminderOptions.push(
-			{ key: 0, text: this.locale.reminderTimes.minutes0 },
-			{ key: 900, text: this.locale.reminderTimes.minutes15 },
-			{ key: 1800, text: this.locale.reminderTimes.minutes30 },
-			{ key: 3600, text: this.locale.reminderTimes.hour1 },
-			{ key: 10800, text: this.locale.reminderTimes.hours3 },
-			{ key: 21600, text: this.locale.reminderTimes.hours6 },
-			{ key: 43200, text: this.locale.reminderTimes.hours12 },
-			{ key: 86400, text: this.locale.reminderTimes.day1 },
-			{ key: 604800, text: this.locale.reminderTimes.week1 }
-		)
-
-		if (appointment) {
-			// Update appointment
-			// Add the values of the appointment to the local variables
-			this.new = false
-			this.appointmentUuid = appointment.uuid
-
-			var startDate = new Date(appointment.start * 1000)
-			var endDate = new Date(appointment.end * 1000)
-
-			if (appointment.notificationUuid) {
-				// Get the date of the notification
-				GetNotification(appointment.notificationUuid).then((notification: Notification) => {
-					if (notification == null) return
-					this.reminderCheckboxChecked = true
-
-					// Calculate the seconds the notification is sent before the appointment starts
-					let difference = (appointment.allday ? moment.unix(appointment.start).startOf('day').unix() : appointment.start) - notification.Time
-					this.SetReminderSelection(difference)
-				})
-			} else {
-				this.reminderCheckboxChecked = false
-			}
-
-			this.appointmentDate = { year: startDate.getFullYear(), month: startDate.getMonth() + 1, day: startDate.getDate() }
-			this.appointmentName = appointment.name
-			this.appointmentAllDayCheckboxChecked = appointment.allday
-			this.appointmentStartTime = { hour: startDate.getHours(), minute: startDate.getMinutes() }
-			this.appointmentEndTime = { hour: endDate.getHours(), minute: endDate.getMinutes() }
-			if (appointment.color) {
-				let colorIndex = this.availableColors.findIndex(c => c == appointment.color)
-				if (colorIndex !== -1) {
-					this.selectedColor = colorIndex
-				}
-			}
-		} else {
-			// New appointment
-			this.ResetNewObjects(date)
-		}
-
-		this.modalService.open(this.appointmentModal).result.then(async () => {
-			if (this.submitButtonDisabled) return
-
-			// Save the new appointment
-			// Calculate the unix timestamp of start and end
-			var start = new Date(
-				this.appointmentDate.year,
-				this.appointmentDate.month - 1,
-				this.appointmentDate.day,
-				this.appointmentStartTime.hour,
-				this.appointmentStartTime.minute,
-				0,
-				0
-			)
-			var startUnix = Math.floor(start.getTime() / 1000)
-
-			var end = new Date(
-				this.appointmentDate.year,
-				this.appointmentDate.month - 1,
-				this.appointmentDate.day,
-				this.appointmentEndTime.hour,
-				this.appointmentEndTime.minute,
-				0,
-				0
-			)
-			var endUnix = Math.floor(end.getTime() / 1000)
-
-			var color = this.availableColors[this.selectedColor]
-
-			if (this.new) {
-				// Create the new appointment
-				let notificationUuid = null
-
-				if (this.reminderCheckboxChecked && this.dataService.dav.isLoggedIn) {
-					// Ask the user for notification permission
-					if (await SetupWebPushSubscription()) {
-						// Create the notification
-						// Set the time of the notification to (the start of the day - seconds before) or (appointment start - seconds before)
-						let time = (this.appointmentAllDayCheckboxChecked ? moment.unix(startUnix).startOf('day').unix() : startUnix) - this.notificationTime
-						let notification = new Notification({
-							Time: time,
-							Interval: 0,
-							Title: this.appointmentName,
-							Body: this.GenerateNotificationBody(startUnix, endUnix)
-						})
-						await notification.Save()
-						notificationUuid = notification.Uuid
-					}
-				}
-
-				let appointment = await Appointment.Create(this.appointmentName, startUnix, endUnix, this.appointmentAllDayCheckboxChecked, color, notificationUuid)
-				this.save.emit(appointment)
-			} else {
-				// Update the appointment
-				let appointment = await GetAppointment(this.appointmentUuid)
-				let notificationUuid: string = appointment.notificationUuid
-
-				if (this.reminderCheckboxChecked) {
-					let time = (this.appointmentAllDayCheckboxChecked ? moment.unix(appointment.start).startOf('day').unix() : appointment.start) - this.notificationTime
-
-					if (appointment.notificationUuid) {
-						// Update the existing notification
-						let notification = await GetNotification(appointment.notificationUuid)
-
-						if (notification != null) {
-							notification.Time = time
-							notification.Interval = 0
-							notification.Title = appointment.name
-							notification.Body = this.GenerateNotificationBody(startUnix, endUnix)
-
-							await notification.Save()
-						}
-					} else {
-						// Create a notification
-						if (await SetupWebPushSubscription()) {
-							let notification = new Notification({
-								Time: time,
-								Interval: 0,
-								Title: appointment.name,
-								Body: this.GenerateNotificationBody(startUnix, endUnix)
-							})
-							await notification.Save()
-							notificationUuid = notification.Uuid
-						}
-					}
-				} else if (appointment.notificationUuid) {
-					// Delete the notification
-					let notification = await GetNotification(appointment.notificationUuid)
-
-					if (notification != null) {
-						await notification.Delete()
-					}
-
-					notificationUuid = null
-				}
-
-				await appointment.Update(this.appointmentName, startUnix, endUnix, this.appointmentAllDayCheckboxChecked, color, notificationUuid)
-				this.save.emit(appointment)
-			}
-
-			this.modalService.dismissAll()
-			this.modalVisible = false
-		}, () => {
-			this.modalVisible = false
-		})
-
-		this.SetSubmitButtonDisabled()
-	}
-
-	ResetNewObjects(date?: number) {
-		let d = new Date();
-		if (date) d = new Date(date * 1000);
-
-		this.appointmentDate = { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate() };
-		this.appointmentName = "";
-		this.appointmentAllDayCheckboxChecked = false;
-		this.appointmentStartTime = { hour: 15, minute: 0 };
-		this.appointmentEndTime = { hour: 16, minute: 0 };
-		this.reminderCheckboxChecked = true;
-
-		// Select a random color
-		this.selectedColor = Math.floor(Math.random() * this.availableColors.length);
-
-		this.SetSubmitButtonDisabled()
-	}
-
-	SetSubmitButtonDisabled() {
-		this.submitButtonDisabled = !(
-			this.appointmentName.trim().length > 1
-			&& (
-				this.appointmentAllDayCheckboxChecked ?
-					true
-					: (
-						this.appointmentStartTime.hour < this.appointmentEndTime.hour
-						|| (
-							this.appointmentStartTime.hour == this.appointmentEndTime.hour
-							&& this.appointmentStartTime.minute <= this.appointmentEndTime.minute
-						)
-					)
-			)
-		)
-	}
-
-	GenerateNotificationBody(start: number, end: number): string {
-		// Format the time in the message correctly
-		let message = ""
-
-		if (this.appointmentAllDayCheckboxChecked) {
-			let appointmentMoment = moment.unix(start)
-			message = this.notificationLocale.messageSpecificTime + ", " + appointmentMoment.format(this.notificationLocale.formats.allDay)
-		} else {
-			let appointmentStartMoment = moment.unix(start)
-			let appointmentEndMoment = moment.unix(end)
-
-			message = (
-				appointmentStartMoment.format(this.notificationLocale.formats.specificTime)
-				+ " - "
-				+ appointmentEndMoment.format(this.notificationLocale.formats.specificTime)
-			)
-		}
-
-		return message
-	}
-
-	SetReminderSelection(secondsBefore: number) {
-		this.notificationTime = secondsBefore;
-	}
-
-	ReminderDropdownChanged(event: { ev: MouseEvent, index: number, option: IDropdownOption }) {
-		this.SetReminderSelection(event.option.key as number);
-	}
-
-	ToggleAllDayCheckbox() {
-		if (!this.appointmentAllDayCheckboxChecked) {
-			this.appointmentAllDayCheckboxChecked = true
-
-			// Set the notification time to 12 hours
-			this.SetReminderSelection(43200);
-		} else {
-			this.appointmentAllDayCheckboxChecked = false
-
-			// Set the notification time to 1 hour
-			this.SetReminderSelection(3600);
-		}
-
-		this.SetSubmitButtonDisabled()
-	}
-
-	ToggleReminderCheckbox() {
-		this.reminderCheckboxChecked = !this.reminderCheckboxChecked;
-	}
-
-	TimepickerValueChanged() {
-		this.SetSubmitButtonDisabled()
-	}
-}
\ No newline at end of file
+import {
+	Component,
+	ViewChild,
+	ElementRef,
+	Output,
+	EventEmitter
+} from "@angular/core"
+import { NgbModal, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap"
+import { IDropdownOption } from "office-ui-fabric-react"
+import * as moment from "moment"
+import { Notification, GetNotification, SetupWebPushSubscription } from "dav-js"
+import { Appointment, GetAppointment } from "src/app/models/Appointment"
+import { DataService } from "src/app/services/data-service"
+import { enUS } from "src/locales/locales"
+
+@Component({
+	selector: "calendo-appointment-modal",
+	templateUrl: "./appointment-modal.component.html",
+	styleUrls: ["./appointment-modal.component.scss"]
+})
+export class AppointmentModalComponent {
+	locale = enUS.appointmentModal
+	notificationLocale = enUS.notifications.appointment
+	@Output() save = new EventEmitter()
+	@ViewChild("appointmentModal", { static: true }) appointmentModal: ElementRef
+	appointmentDate: NgbDateStruct
+	appointmentName: string
+	appointmentAllDayCheckboxChecked: boolean
+	appointmentStartTime: { hour: number; minute: number }
+	appointmentEndTime: { hour: number; minute: number }
+	new: boolean = true
+	appointmentUuid: string
+	availableColors: string[] = [
+		"D32F2F",
+		"D67724",
+		"FFD600",
+		"388E3C",
+		"43A047",
+		"00B0FF",
+		"1565C0",
+		"283593",
+		"7B1FA2",
+		"757575",
+		"000000"
+	]
+	selectedColor: number = 6
+	reminderCheckboxChecked: boolean = true
+	notificationTime: number = 3600 // Saves the time of the notification in seconds before the start of the appointment
+	showReminderOption: boolean = true
+	reminderOptions: IDropdownOption[] = []
+	modalVisible: boolean = false
+	submitButtonDisabled: boolean = true
+
+	constructor(
+		private modalService: NgbModal,
+		private dataService: DataService
+	) {
+		this.locale = this.dataService.GetLocale().appointmentModal
+		this.notificationLocale =
+			this.dataService.GetLocale().notifications.appointment
+	}
+
+	Show(appointment?: Appointment, date?: number) {
+		if (this.modalVisible) return
+		this.modalVisible = true
+
+		// Check if push is supported
+		this.showReminderOption =
+			"serviceWorker" in navigator &&
+			"PushManager" in window &&
+			this.dataService.dav.isLoggedIn &&
+			this.dataService.GetNotificationPermission() != "denied"
+
+		// Init reminderTimes
+		this.reminderOptions = []
+		this.reminderOptions.push(
+			{ key: 0, text: this.locale.reminderTimes.minutes0 },
+			{ key: 900, text: this.locale.reminderTimes.minutes15 },
+			{ key: 1800, text: this.locale.reminderTimes.minutes30 },
+			{ key: 3600, text: this.locale.reminderTimes.hour1 },
+			{ key: 10800, text: this.locale.reminderTimes.hours3 },
+			{ key: 21600, text: this.locale.reminderTimes.hours6 },
+			{ key: 43200, text: this.locale.reminderTimes.hours12 },
+			{ key: 86400, text: this.locale.reminderTimes.day1 },
+			{ key: 604800, text: this.locale.reminderTimes.week1 }
+		)
+
+		if (appointment) {
+			// Update appointment
+			// Add the values of the appointment to the local variables
+			this.new = false
+			this.appointmentUuid = appointment.uuid
+
+			var startDate = new Date(appointment.start * 1000)
+			var endDate = new Date(appointment.end * 1000)
+
+			if (appointment.notificationUuid) {
+				// Get the date of the notification
+				GetNotification(appointment.notificationUuid).then(
+					(notification: Notification) => {
+						if (notification == null) return
+						this.reminderCheckboxChecked = true
+
+						// Calculate the seconds the notification is sent before the appointment starts
+						let difference =
+							(appointment.allday
+								? moment.unix(appointment.start).startOf("day").unix()
+								: appointment.start) - notification.Time
+						this.SetReminderSelection(difference)
+					}
+				)
+			} else {
+				this.reminderCheckboxChecked = false
+			}
+
+			this.appointmentDate = {
+				year: startDate.getFullYear(),
+				month: startDate.getMonth() + 1,
+				day: startDate.getDate()
+			}
+			this.appointmentName = appointment.name
+			this.appointmentAllDayCheckboxChecked = appointment.allday
+			this.appointmentStartTime = {
+				hour: startDate.getHours(),
+				minute: startDate.getMinutes()
+			}
+			this.appointmentEndTime = {
+				hour: endDate.getHours(),
+				minute: endDate.getMinutes()
+			}
+			if (appointment.color) {
+				let colorIndex = this.availableColors.findIndex(
+					c => c == appointment.color
+				)
+				if (colorIndex !== -1) {
+					this.selectedColor = colorIndex
+				}
+			}
+		} else {
+			// New appointment
+			this.ResetNewObjects(date)
+		}
+
+		this.modalService.open(this.appointmentModal).result.then(
+			async () => {
+				if (this.submitButtonDisabled) return
+
+				// Save the new appointment
+				// Calculate the unix timestamp of start and end
+				var start = new Date(
+					this.appointmentDate.year,
+					this.appointmentDate.month - 1,
+					this.appointmentDate.day,
+					this.appointmentStartTime.hour,
+					this.appointmentStartTime.minute,
+					0,
+					0
+				)
+				var startUnix = Math.floor(start.getTime() / 1000)
+
+				var end = new Date(
+					this.appointmentDate.year,
+					this.appointmentDate.month - 1,
+					this.appointmentDate.day,
+					this.appointmentEndTime.hour,
+					this.appointmentEndTime.minute,
+					0,
+					0
+				)
+				var endUnix = Math.floor(end.getTime() / 1000)
+
+				var color = this.availableColors[this.selectedColor]
+
+				if (this.new) {
+					// Create the new appointment
+					let notificationUuid = null
+
+					if (
+						this.reminderCheckboxChecked &&
+						this.dataService.dav.isLoggedIn
+					) {
+						// Ask the user for notification permission
+						if (await SetupWebPushSubscription()) {
+							// Create the notification
+							// Set the time of the notification to (the start of the day - seconds before) or (appointment start - seconds before)
+							let time =
+								(this.appointmentAllDayCheckboxChecked
+									? moment.unix(startUnix).startOf("day").unix()
+									: startUnix) - this.notificationTime
+							let notification = new Notification({
+								Time: time,
+								Interval: 0,
+								Title: this.appointmentName,
+								Body: this.GenerateNotificationBody(startUnix, endUnix)
+							})
+							await notification.Save()
+							notificationUuid = notification.Uuid
+						}
+					}
+
+					let appointment = await Appointment.Create(
+						this.appointmentName,
+						startUnix,
+						endUnix,
+						this.appointmentAllDayCheckboxChecked,
+						color,
+						notificationUuid
+					)
+					this.save.emit(appointment)
+				} else {
+					// Update the appointment
+					let appointment = await GetAppointment(this.appointmentUuid)
+					let notificationUuid: string = appointment.notificationUuid
+
+					if (this.reminderCheckboxChecked) {
+						let time =
+							(this.appointmentAllDayCheckboxChecked
+								? moment.unix(appointment.start).startOf("day").unix()
+								: appointment.start) - this.notificationTime
+
+						if (appointment.notificationUuid) {
+							// Update the existing notification
+							let notification = await GetNotification(
+								appointment.notificationUuid
+							)
+
+							if (notification != null) {
+								notification.Time = time
+								notification.Interval = 0
+								notification.Title = appointment.name
+								notification.Body = this.GenerateNotificationBody(
+									startUnix,
+									endUnix
+								)
+
+								await notification.Save()
+							}
+						} else {
+							// Create a notification
+							if (await SetupWebPushSubscription()) {
+								let notification = new Notification({
+									Time: time,
+									Interval: 0,
+									Title: appointment.name,
+									Body: this.GenerateNotificationBody(
+										startUnix,
+										endUnix
+									)
+								})
+								await notification.Save()
+								notificationUuid = notification.Uuid
+							}
+						}
+					} else if (appointment.notificationUuid) {
+						// Delete the notification
+						let notification = await GetNotification(
+							appointment.notificationUuid
+						)
+
+						if (notification != null) {
+							await notification.Delete()
+						}
+
+						notificationUuid = null
+					}
+
+					await appointment.Update(
+						this.appointmentName,
+						startUnix,
+						endUnix,
+						this.appointmentAllDayCheckboxChecked,
+						color,
+						notificationUuid
+					)
+					this.save.emit(appointment)
+				}
+
+				this.modalService.dismissAll()
+				this.modalVisible = false
+			},
+			() => {
+				this.modalVisible = false
+			}
+		)
+
+		this.SetSubmitButtonDisabled()
+	}
+
+	ResetNewObjects(date?: number) {
+		let d = new Date()
+		if (date) d = new Date(date * 1000)
+
+		this.appointmentDate = {
+			year: d.getFullYear(),
+			month: d.getMonth() + 1,
+			day: d.getDate()
+		}
+		this.appointmentName = ""
+		this.appointmentAllDayCheckboxChecked = false
+		this.appointmentStartTime = { hour: 15, minute: 0 }
+		this.appointmentEndTime = { hour: 16, minute: 0 }
+		this.reminderCheckboxChecked = true
+
+		// Select a random color
+		this.selectedColor = Math.floor(
+			Math.random() * this.availableColors.length
+		)
+
+		this.SetSubmitButtonDisabled()
+	}
+
+	SetSubmitButtonDisabled() {
+		this.submitButtonDisabled = !(
+			this.appointmentName.trim().length > 1 &&
+			(this.appointmentAllDayCheckboxChecked
+				? true
+				: this.appointmentStartTime.hour < this.appointmentEndTime.hour ||
+					(this.appointmentStartTime.hour ==
+						this.appointmentEndTime.hour &&
+						this.appointmentStartTime.minute <=
+							this.appointmentEndTime.minute))
+		)
+	}
+
+	GenerateNotificationBody(start: number, end: number): string {
+		// Format the time in the message correctly
+		let message = ""
+
+		if (this.appointmentAllDayCheckboxChecked) {
+			let appointmentMoment = moment.unix(start)
+			message =
+				this.notificationLocale.messageSpecificTime +
+				", " +
+				appointmentMoment.format(this.notificationLocale.formats.allDay)
+		} else {
+			let appointmentStartMoment = moment.unix(start)
+			let appointmentEndMoment = moment.unix(end)
+
+			message =
+				appointmentStartMoment.format(
+					this.notificationLocale.formats.specificTime
+				) +
+				" - " +
+				appointmentEndMoment.format(
+					this.notificationLocale.formats.specificTime
+				)
+		}
+
+		return message
+	}
+
+	SetReminderSelection(secondsBefore: number) {
+		this.notificationTime = secondsBefore
+	}
+
+	ReminderDropdownChanged(event: {
+		ev: MouseEvent
+		index: number
+		option: IDropdownOption
+	}) {
+		this.SetReminderSelection(event.option.key as number)
+	}
+
+	ToggleAllDayCheckbox() {
+		if (!this.appointmentAllDayCheckboxChecked) {
+			this.appointmentAllDayCheckboxChecked = true
+
+			// Set the notification time to 12 hours
+			this.SetReminderSelection(43200)
+		} else {
+			this.appointmentAllDayCheckboxChecked = false
+
+			// Set the notification time to 1 hour
+			this.SetReminderSelection(3600)
+		}
+
+		this.SetSubmitButtonDisabled()
+	}
+
+	ToggleReminderCheckbox() {
+		this.reminderCheckboxChecked = !this.reminderCheckboxChecked
+	}
+
+	TimepickerValueChanged() {
+		this.SetSubmitButtonDisabled()
+	}
+}
diff --git a/src/app/components/delete-appointment-modal/delete-appointment-modal.component.html b/src/app/components/delete-appointment-modal/delete-appointment-modal.component.html
index adfd0fe..25f5e6a 100644
--- a/src/app/components/delete-appointment-modal/delete-appointment-modal.component.html
+++ b/src/app/components/delete-appointment-modal/delete-appointment-modal.component.html
@@ -1,21 +1,40 @@
-<ng-template #deleteAppointmentModal let-c="close" let-d="dismiss">
-   <div class="modal-header theme-background-color-primary" [ngClass]="dataService.darkTheme ? 'border-dark' : ''">
-      <h4 class="modal-title text-color" id="modal-basic-title">{{ locale.header }}</h4>
-      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
-         <span aria-hidden="true" class="text-color">&times;</span>
-      </button>
-   </div>
-   <div class="modal-body theme-background-color-primary text-color">
-      <p>{{ locale.deleteWarning }}</p>
-      <div class="d-flex">
-         <span *ngIf="!appointment.allday" class="mr-2">
-            <span class="font-italic">{{ ConvertUnixTimestampToTime(appointment.start) }}</span>: 
-         </span>
-         {{ appointment.name }}
-      </div>
-   </div>
-   <div class="modal-footer theme-background-color-primary" [ngClass]="dataService.darkTheme ? 'border-dark' : ''">
-      <button type="button" class="btn btn-secondary" (click)="d()">{{ locale.cancel }}</button>
-      <button type="button" class="btn btn-danger" (click)="c()">{{ locale.delete }}</button>
-   </div>
-</ng-template>
\ No newline at end of file
+<ng-template #deleteAppointmentModal let-c="close" let-d="dismiss">
+	<div
+		class="modal-header theme-background-color-primary"
+		[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	>
+		<h4 class="modal-title text-color" id="modal-basic-title">
+			{{ locale.header }}
+		</h4>
+		<button
+			type="button"
+			class="close"
+			aria-label="Close"
+			(click)="d('Cross click')"
+		>
+			<span aria-hidden="true" class="text-color">&times;</span>
+		</button>
+	</div>
+	<div class="modal-body theme-background-color-primary text-color">
+		<p>{{ locale.deleteWarning }}</p>
+		<div class="d-flex">
+			<span *ngIf="!appointment.allday" class="mr-2">
+				<span class="font-italic">
+					{{ ConvertUnixTimestampToTime(appointment.start) }}
+				</span>:
+			</span>
+			{{ appointment.name }}
+		</div>
+	</div>
+	<div
+		class="modal-footer theme-background-color-primary"
+		[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	>
+		<button type="button" class="btn btn-secondary" (click)="d()">
+			{{ locale.cancel }}
+		</button>
+		<button type="button" class="btn btn-danger" (click)="c()">
+			{{ locale.delete }}
+		</button>
+	</div>
+</ng-template>
diff --git a/src/app/components/delete-appointment-modal/delete-appointment-modal.component.ts b/src/app/components/delete-appointment-modal/delete-appointment-modal.component.ts
index 1e59576..c7079c0 100644
--- a/src/app/components/delete-appointment-modal/delete-appointment-modal.component.ts
+++ b/src/app/components/delete-appointment-modal/delete-appointment-modal.component.ts
@@ -1,34 +1,47 @@
-import { Component, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import * as moment from 'moment';
-import { Appointment } from '../../models/Appointment';
-import { enUS } from '../../../locales/locales';
-import { DataService } from '../../services/data-service';
-
-@Component({
-   selector: "calendo-delete-appointment-modal",
-   templateUrl: "./delete-appointment-modal.component.html"
-})
-export class DeleteAppointmentModalComponent{
-   locale = enUS.deleteAppointmentModal;
-   @Input() appointment: Appointment;
-   @Output() remove = new EventEmitter();
-   @ViewChild('deleteAppointmentModal', { static: true }) appointmentModal: ElementRef;
-
-   constructor(private modalService: NgbModal,
-               private dataService: DataService){
-      this.locale = this.dataService.GetLocale().deleteAppointmentModal;
-   }
-
-   Show(){
-      this.modalService.open(this.appointmentModal).result.then(async () => {
-         // Delete the appointment
-         await this.appointment.Delete();
-         this.remove.emit(null);
-      }, () => {});
-   }
-
-   ConvertUnixTimestampToTime(timestamp: number): string{
-      return moment.unix(timestamp).format("H:mm");
-   }
-}
\ No newline at end of file
+import {
+	Component,
+	ViewChild,
+	ElementRef,
+	Input,
+	Output,
+	EventEmitter
+} from "@angular/core"
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap"
+import * as moment from "moment"
+import { Appointment } from "../../models/Appointment"
+import { enUS } from "../../../locales/locales"
+import { DataService } from "../../services/data-service"
+
+@Component({
+	selector: "calendo-delete-appointment-modal",
+	templateUrl: "./delete-appointment-modal.component.html"
+})
+export class DeleteAppointmentModalComponent {
+	locale = enUS.deleteAppointmentModal
+	@Input() appointment: Appointment
+	@Output() remove = new EventEmitter()
+	@ViewChild("deleteAppointmentModal", { static: true })
+	appointmentModal: ElementRef
+
+	constructor(
+		private modalService: NgbModal,
+		private dataService: DataService
+	) {
+		this.locale = this.dataService.GetLocale().deleteAppointmentModal
+	}
+
+	Show() {
+		this.modalService.open(this.appointmentModal).result.then(
+			async () => {
+				// Delete the appointment
+				await this.appointment.Delete()
+				this.remove.emit(null)
+			},
+			() => {}
+		)
+	}
+
+	ConvertUnixTimestampToTime(timestamp: number): string {
+		return moment.unix(timestamp).format("H:mm")
+	}
+}
diff --git a/src/app/components/delete-todo-list-modal/delete-todo-list-modal.component.html b/src/app/components/delete-todo-list-modal/delete-todo-list-modal.component.html
index 3b378b1..e1b7c54 100644
--- a/src/app/components/delete-todo-list-modal/delete-todo-list-modal.component.html
+++ b/src/app/components/delete-todo-list-modal/delete-todo-list-modal.component.html
@@ -1,15 +1,32 @@
 <ng-template #deleteTodoListModal let-c="close" let-d="dismiss">
-	<div class="modal-header theme-background-color-primary" [ngClass]="dataService.darkTheme ? 'border-dark' : ''">
-		<h4 class="modal-title text-color" id="modal-basic-title">{{ locale.header }}</h4>
-		<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
+	<div
+		class="modal-header theme-background-color-primary"
+		[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	>
+		<h4 class="modal-title text-color" id="modal-basic-title">
+			{{ locale.header }}
+		</h4>
+		<button
+			type="button"
+			class="close"
+			aria-label="Close"
+			(click)="d('Cross click')"
+		>
 			<span aria-hidden="true" class="text-color">&times;</span>
 		</button>
 	</div>
 	<div class="modal-body theme-background-color-primary text-color">
-      <p>{{ locale.message }}</p>
+		<p>{{ locale.message }}</p>
 	</div>
-	<div class="modal-footer theme-background-color-primary" [ngClass]="dataService.darkTheme ? 'border-dark' : ''">
-		<button type="button" class="btn btn-secondary" (click)="d()">{{ locale.cancel }}</button>
-		<button type="button" class="btn btn-danger" (click)="c()">{{ locale.delete }}</button>
+	<div
+		class="modal-footer theme-background-color-primary"
+		[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	>
+		<button type="button" class="btn btn-secondary" (click)="d()">
+			{{ locale.cancel }}
+		</button>
+		<button type="button" class="btn btn-danger" (click)="c()">
+			{{ locale.delete }}
+		</button>
 	</div>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/src/app/components/delete-todo-list-modal/delete-todo-list-modal.component.ts b/src/app/components/delete-todo-list-modal/delete-todo-list-modal.component.ts
index 0acf216..232f3ce 100644
--- a/src/app/components/delete-todo-list-modal/delete-todo-list-modal.component.ts
+++ b/src/app/components/delete-todo-list-modal/delete-todo-list-modal.component.ts
@@ -1,32 +1,42 @@
-import { Component, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { DataService } from '../../services/data-service';
-import { enUS } from '../../../locales/locales';
-import { TodoList } from 'src/app/models/TodoList';
+import {
+	Component,
+	ViewChild,
+	ElementRef,
+	Input,
+	Output,
+	EventEmitter
+} from "@angular/core"
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap"
+import { DataService } from "../../services/data-service"
+import { enUS } from "../../../locales/locales"
+import { TodoList } from "src/app/models/TodoList"
 
 @Component({
 	selector: "calendo-delete-todo-list-modal",
 	templateUrl: "./delete-todo-list-modal.component.html"
 })
-export class DeleteTodoListModalComponent{
-   locale = enUS.deleteTodoListModal;
-   todoList: TodoList = new TodoList();
-	@Output() remove = new EventEmitter();
-	@ViewChild('deleteTodoListModal', { static: true }) todoListModal: ElementRef;
+export class DeleteTodoListModalComponent {
+	locale = enUS.deleteTodoListModal
+	todoList: TodoList = new TodoList()
+	@Output() remove = new EventEmitter()
+	@ViewChild("deleteTodoListModal", { static: true }) todoListModal: ElementRef
 
 	constructor(
 		private modalService: NgbModal,
 		private dataService: DataService
-	){
-		this.locale = this.dataService.GetLocale().deleteTodoListModal;
-   }
-   
-   Show(todoList: TodoList){
-      this.todoList = todoList;
+	) {
+		this.locale = this.dataService.GetLocale().deleteTodoListModal
+	}
 
-      this.modalService.open(this.todoListModal).result.then(async () => {
-         await this.todoList.Delete();
-			this.remove.emit(this.todoList);
-      }, () => {});
-   }
-}
\ No newline at end of file
+	Show(todoList: TodoList) {
+		this.todoList = todoList
+
+		this.modalService.open(this.todoListModal).result.then(
+			async () => {
+				await this.todoList.Delete()
+				this.remove.emit(this.todoList)
+			},
+			() => {}
+		)
+	}
+}
diff --git a/src/app/components/logout-modal/logout-modal.component.html b/src/app/components/logout-modal/logout-modal.component.html
index 4578ec3..bfd216a 100644
--- a/src/app/components/logout-modal/logout-modal.component.html
+++ b/src/app/components/logout-modal/logout-modal.component.html
@@ -1,15 +1,30 @@
-<ng-template #logoutModal let-c="close" let-d="dismiss">
-   <div class="modal-header theme-background-color-primary" [ngClass]="dataService.darkTheme ? 'border-dark' : ''">
-      <h4 class="modal-title text-color">{{ locale.header }}</h4>
-      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
-         <span aria-hidden="true" class="text-color">&times;</span>
-      </button>
-   </div>
-   <div class="modal-body theme-background-color-primary text-color">
-      <p>{{ locale.message }}</p>
-   </div>
-   <div class="modal-footer theme-background-color-primary" [ngClass]="dataService.darkTheme ? 'border-dark' : ''">
-      <button type="button" class="btn btn-secondary" (click)="d()">{{ locale.cancel }}</button>
-      <button type="button" class="btn btn-danger" (click)="c()">{{ locale.logout }}</button>
-   </div>
-</ng-template>
\ No newline at end of file
+<ng-template #logoutModal let-c="close" let-d="dismiss">
+	<div
+		class="modal-header theme-background-color-primary"
+		[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	>
+		<h4 class="modal-title text-color">{{ locale.header }}</h4>
+		<button
+			type="button"
+			class="close"
+			aria-label="Close"
+			(click)="d('Cross click')"
+		>
+			<span aria-hidden="true" class="text-color">&times;</span>
+		</button>
+	</div>
+	<div class="modal-body theme-background-color-primary text-color">
+		<p>{{ locale.message }}</p>
+	</div>
+	<div
+		class="modal-footer theme-background-color-primary"
+		[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	>
+		<button type="button" class="btn btn-secondary" (click)="d()">
+			{{ locale.cancel }}
+		</button>
+		<button type="button" class="btn btn-danger" (click)="c()">
+			{{ locale.logout }}
+		</button>
+	</div>
+</ng-template>
diff --git a/src/app/components/logout-modal/logout-modal.component.ts b/src/app/components/logout-modal/logout-modal.component.ts
index c2bf1eb..204441d 100644
--- a/src/app/components/logout-modal/logout-modal.component.ts
+++ b/src/app/components/logout-modal/logout-modal.component.ts
@@ -1,25 +1,36 @@
-import { Component, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { DataService } from '../../services/data-service';
-import { enUS } from '../../../locales/locales';
-
-@Component({
-   selector: "calendo-logout-modal",
-   templateUrl: "./logout-modal.component.html"
-})
-export class LogoutModalComponent{
-	locale = enUS.logoutModal;
-	@Output() logout = new EventEmitter();
-	@ViewChild('logoutModal', { static: true }) logoutModal: ElementRef;
-
-   constructor(private modalService: NgbModal,
-      			private dataService: DataService){
-      this.locale = this.dataService.GetLocale().logoutModal;
-	}
-	
-	Show(){
-		this.modalService.open(this.logoutModal).result.then(() => {
-			this.logout.emit();
-		}, () => {});
-	}
-}
\ No newline at end of file
+import {
+	Component,
+	ViewChild,
+	ElementRef,
+	Output,
+	EventEmitter
+} from "@angular/core"
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap"
+import { DataService } from "../../services/data-service"
+import { enUS } from "../../../locales/locales"
+
+@Component({
+	selector: "calendo-logout-modal",
+	templateUrl: "./logout-modal.component.html"
+})
+export class LogoutModalComponent {
+	locale = enUS.logoutModal
+	@Output() logout = new EventEmitter()
+	@ViewChild("logoutModal", { static: true }) logoutModal: ElementRef
+
+	constructor(
+		private modalService: NgbModal,
+		private dataService: DataService
+	) {
+		this.locale = this.dataService.GetLocale().logoutModal
+	}
+
+	Show() {
+		this.modalService.open(this.logoutModal).result.then(
+			() => {
+				this.logout.emit()
+			},
+			() => {}
+		)
+	}
+}
diff --git a/src/app/components/new-todo-modal/new-todo-modal.component.html b/src/app/components/new-todo-modal/new-todo-modal.component.html
index b7f56b5..ffa8660 100644
--- a/src/app/components/new-todo-modal/new-todo-modal.component.html
+++ b/src/app/components/new-todo-modal/new-todo-modal.component.html
@@ -1,65 +1,101 @@
-<ng-template #createTodoModal let-c="close" let-d="dismiss">
-	<div class="modal-header theme-background-color-primary" [ngClass]="dataService.darkTheme ? 'border-dark' : ''">
-		<h4 class="modal-title text-color">{{ locale.header }}</h4>
-		<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
-			<span aria-hidden="true" class="text-color">&times;</span>
-		</button>
-	</div>
-	<div class="modal-body row theme-background-color-primary mx-0">
-		<div class="mx-auto mb-4 px-4 text-color">
-			<!-- Set Date checkbox -->
-			<div class="mb-1">
-				<div class="d-inline-flex">
-					<fab-checkbox (onChange)="ToggleSetDateCheckbox()" [checked]="newTodoSetDateCheckboxChecked"></fab-checkbox>
-					<label class="col-form-label ml-2 text-color cursor ms-fontSize-14" style="margin-top: -8px" (click)="ToggleSetDateCheckbox()">
-						{{ locale.setDate }}
-					</label>
-				</div>
-			</div>
-
-			<ngb-datepicker
-				[(ngModel)]="newTodoDate" 
-				(navigate)="date = $event.next" 
-				[disabled]="!newTodoSetDateCheckboxChecked"
-				style="background-color: white">
-			</ngb-datepicker>
-		</div>
-		<div class="mx-auto mb-4 text-color" style="padding: 0px 60px" [style.display]="showReminderOption ? 'block' : 'none'">
-			<!-- Reminder checkbox -->
-			<div class="d-inline-flex">
-				<fab-checkbox
-					(onChange)="ToggleReminderCheckbox()" 
-					[checked]="newTodoReminderCheckboxChecked"
-					[disabled]="!newTodoSetDateCheckboxChecked"
-					className="ml-4">
-				</fab-checkbox>
-
-				<label
-					class="col-form-label ml-2 text-color ms-fontSize-14" 
-					[ngClass]="newTodoSetDateCheckboxChecked ? 'cursor' : ''" 
-					style="margin-top: -8px" 
-					(click)="ToggleReminderCheckbox()">
-					{{ locale.reminder }}
-				</label>
-			</div>
-
-			<ngb-timepicker
-				id="todo-reminder-time"
-				class="mx-auto"
-				style="width: 100px"
-				[disabled]="!newTodoReminderCheckboxChecked"
-				[(ngModel)]="todoReminderTime"
-				[hourStep]="1"
-				[minuteStep]="15">
-			</ngb-timepicker>
-		</div>
-
-      <div class="mx-auto offset-1">
-         <calendo-set-todo-groups (groupsChanged)="todoGroups = $event"></calendo-set-todo-groups>
-			<calendo-set-name [(name)]="newTodoName" (nameChanged)="newTodoName = $event; SetSubmitButtonDisabled()" (submit)="submitButtonDisabled? 0 : c()"></calendo-set-name>
-		</div>
-	</div>
-	<div class="modal-footer theme-background-color-primary" [ngClass]="dataService.darkTheme ? 'border-dark' : ''">
-		<button type="button" class="btn btn-primary" [disabled]="submitButtonDisabled" (click)="c()">{{ locale.save }}</button>
-	</div>
-</ng-template>
\ No newline at end of file
+<ng-template #createTodoModal let-c="close" let-d="dismiss">
+	<div
+		class="modal-header theme-background-color-primary"
+		[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	>
+		<h4 class="modal-title text-color">{{ locale.header }}</h4>
+		<button
+			type="button"
+			class="close"
+			aria-label="Close"
+			(click)="d('Cross click')"
+		>
+			<span aria-hidden="true" class="text-color">&times;</span>
+		</button>
+	</div>
+	<div class="modal-body row theme-background-color-primary mx-0">
+		<div class="mx-auto mb-4 px-4 text-color">
+			<!-- Set Date checkbox -->
+			<div class="mb-1">
+				<div class="d-inline-flex">
+					<fab-checkbox
+						(onChange)="ToggleSetDateCheckbox()"
+						[checked]="newTodoSetDateCheckboxChecked"
+					></fab-checkbox>
+					<label
+						class="col-form-label ml-2 text-color cursor ms-fontSize-14"
+						style="margin-top: -8px"
+						(click)="ToggleSetDateCheckbox()"
+					>
+						{{ locale.setDate }}
+					</label>
+				</div>
+			</div>
+
+			<ngb-datepicker
+				[(ngModel)]="newTodoDate"
+				(navigate)="date = $event.next"
+				[disabled]="!newTodoSetDateCheckboxChecked"
+				style="background-color: white"
+			></ngb-datepicker>
+		</div>
+		<div
+			class="mx-auto mb-4 text-color"
+			style="padding: 0px 60px"
+			[style.display]="showReminderOption ? 'block' : 'none'"
+		>
+			<!-- Reminder checkbox -->
+			<div class="d-inline-flex">
+				<fab-checkbox
+					(onChange)="ToggleReminderCheckbox()"
+					[checked]="newTodoReminderCheckboxChecked"
+					[disabled]="!newTodoSetDateCheckboxChecked"
+					className="ml-4"
+				></fab-checkbox>
+
+				<label
+					class="col-form-label ml-2 text-color ms-fontSize-14"
+					[ngClass]="newTodoSetDateCheckboxChecked ? 'cursor' : ''"
+					style="margin-top: -8px"
+					(click)="ToggleReminderCheckbox()"
+				>
+					{{ locale.reminder }}
+				</label>
+			</div>
+
+			<ngb-timepicker
+				id="todo-reminder-time"
+				class="mx-auto"
+				style="width: 100px"
+				[disabled]="!newTodoReminderCheckboxChecked"
+				[(ngModel)]="todoReminderTime"
+				[hourStep]="1"
+				[minuteStep]="15"
+			></ngb-timepicker>
+		</div>
+
+		<div class="mx-auto offset-1">
+			<calendo-set-todo-groups
+				(groupsChanged)="todoGroups = $event"
+			></calendo-set-todo-groups>
+			<calendo-set-name
+				[(name)]="newTodoName"
+				(nameChanged)="newTodoName = $event; SetSubmitButtonDisabled()"
+				(submit)="submitButtonDisabled ? 0 : c()"
+			></calendo-set-name>
+		</div>
+	</div>
+	<div
+		class="modal-footer theme-background-color-primary"
+		[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	>
+		<button
+			type="button"
+			class="btn btn-primary"
+			[disabled]="submitButtonDisabled"
+			(click)="c()"
+		>
+			{{ locale.save }}
+		</button>
+	</div>
+</ng-template>
diff --git a/src/app/components/new-todo-modal/new-todo-modal.component.ts b/src/app/components/new-todo-modal/new-todo-modal.component.ts
index f1c5e3e..2bd659b 100644
--- a/src/app/components/new-todo-modal/new-todo-modal.component.ts
+++ b/src/app/components/new-todo-modal/new-todo-modal.component.ts
@@ -1,142 +1,171 @@
-import { Component, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core'
-import { NgbDateStruct, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { Todo } from '../../models/Todo'
-import { enUS } from '../../../locales/locales'
-import { DataService } from '../../services/data-service'
-import { Notification, SetupWebPushSubscription } from 'dav-js'
-import * as moment from 'moment'
-import { faPlus } from '@fortawesome/free-solid-svg-icons'
-
-@Component({
-	selector: "calendo-new-todo-modal",
-	templateUrl: "./new-todo-modal.component.html"
-})
-export class NewTodoModalComponent {
-	locale = enUS.newTodoModal
-	notificationLocale = enUS.notifications.todo
-	faPlus = faPlus
-	@Output() save = new EventEmitter()
-	@ViewChild('createTodoModal', { static: true }) todoModal: ElementRef
-	newTodoDate: NgbDateStruct
-	newTodoName: string
-	newTodoSetDateCheckboxChecked: boolean = true
-	newTodoReminderCheckboxChecked: boolean = false
-	todoGroups: string[] = []
-	allGroups: string[] = []
-	todoReminderTime: { hour: number, minute: number }
-	showReminderOption: boolean = true
-	modalVisible: boolean = false
-	submitButtonDisabled: boolean = false
-	groupTextFieldStyle = {
-		root: {
-			width: 250,
-		}
-	}
-	nameTextFieldStyle = {
-		root: {
-			width: 280,
-		}
-	}
-
-	constructor(
-		private modalService: NgbModal,
-		private dataService: DataService
-	) {
-		this.locale = this.dataService.GetLocale().newTodoModal
-		this.notificationLocale = this.dataService.GetLocale().notifications.todo
-	}
-
-	Show(date?: number) {
-		if (this.modalVisible) return
-		this.modalVisible = true
-
-		this.ResetNewObjects(date)
-
-		// Check if push is supported
-		this.showReminderOption = (
-			('serviceWorker' in navigator)
-			&& ('PushManager' in window)
-			&& this.dataService.dav.isLoggedIn
-			&& this.dataService.GetNotificationPermission() != "denied"
-		)
-
-		this.modalService.open(this.todoModal).result.then(async () => {
-			if (this.submitButtonDisabled) return
-
-			// Save new todo
-			var todoTimeUnix: number = 0
-			if (this.newTodoSetDateCheckboxChecked) {
-				var todoTime = new Date(this.newTodoDate.year, this.newTodoDate.month - 1, this.newTodoDate.day, 0, 0, 0, 0)
-				todoTimeUnix = Math.floor(todoTime.getTime() / 1000)
-			}
-
-			let notificationUuid = null
-
-			if (this.newTodoReminderCheckboxChecked) {
-				// Ask the user for notification permission
-				if (await SetupWebPushSubscription()) {
-					// Create the notification
-					let notificationTime = moment.unix(todoTimeUnix).startOf('day').unix()
-						+ this.todoReminderTime.hour * 60 * 60
-						+ this.todoReminderTime.minute * 60
-					
-					let notification = new Notification({
-						Time: notificationTime,
-						Interval: 0,
-						Title: this.notificationLocale.title,
-						Body: this.newTodoName
-					})
-					await notification.Save()
-					notificationUuid = notification.Uuid
-				}
-			}
-
-			let todo = await Todo.Create(this.newTodoName, false, todoTimeUnix, this.todoGroups, null, notificationUuid)
-
-			this.save.emit(todo)
-
-			this.modalService.dismissAll()
-			this.modalVisible = false
-		}, () => {
-			this.modalVisible = false
-		})
-
-		this.SetSubmitButtonDisabled()
-	}
-
-	ResetNewObjects(date?: number) {
-		let d = new Date()
-		if (date) {
-			d = new Date(date * 1000)
-		}
-
-		this.newTodoDate = { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate() }
-		this.newTodoName = ""
-		this.newTodoSetDateCheckboxChecked = true
-		this.todoGroups = []
-		this.allGroups = []
-		this.todoReminderTime = { hour: 10, minute: 0 }
-		this.newTodoReminderCheckboxChecked = false
-
-		this.SetSubmitButtonDisabled()
-	}
-
-	ToggleSetDateCheckbox() {
-		if (this.newTodoSetDateCheckboxChecked) {
-			this.newTodoSetDateCheckboxChecked = false
-			this.newTodoReminderCheckboxChecked = false
-		} else {
-			this.newTodoSetDateCheckboxChecked = true
-		}
-	}
-
-	ToggleReminderCheckbox() {
-		if (this.newTodoSetDateCheckboxChecked) {
-			this.newTodoReminderCheckboxChecked = !this.newTodoReminderCheckboxChecked
-		}
-	}
-
-	SetSubmitButtonDisabled() {
-		this.submitButtonDisabled = this.newTodoName.trim().length < 2
-	}
-}
\ No newline at end of file
+import {
+	Component,
+	ViewChild,
+	ElementRef,
+	Output,
+	EventEmitter
+} from "@angular/core"
+import { NgbDateStruct, NgbModal } from "@ng-bootstrap/ng-bootstrap"
+import { Todo } from "../../models/Todo"
+import { enUS } from "../../../locales/locales"
+import { DataService } from "../../services/data-service"
+import { Notification, SetupWebPushSubscription } from "dav-js"
+import * as moment from "moment"
+import { faPlus } from "@fortawesome/free-solid-svg-icons"
+
+@Component({
+	selector: "calendo-new-todo-modal",
+	templateUrl: "./new-todo-modal.component.html"
+})
+export class NewTodoModalComponent {
+	locale = enUS.newTodoModal
+	notificationLocale = enUS.notifications.todo
+	faPlus = faPlus
+	@Output() save = new EventEmitter()
+	@ViewChild("createTodoModal", { static: true }) todoModal: ElementRef
+	newTodoDate: NgbDateStruct
+	newTodoName: string
+	newTodoSetDateCheckboxChecked: boolean = true
+	newTodoReminderCheckboxChecked: boolean = false
+	todoGroups: string[] = []
+	allGroups: string[] = []
+	todoReminderTime: { hour: number; minute: number }
+	showReminderOption: boolean = true
+	modalVisible: boolean = false
+	submitButtonDisabled: boolean = false
+	groupTextFieldStyle = {
+		root: {
+			width: 250
+		}
+	}
+	nameTextFieldStyle = {
+		root: {
+			width: 280
+		}
+	}
+
+	constructor(
+		private modalService: NgbModal,
+		private dataService: DataService
+	) {
+		this.locale = this.dataService.GetLocale().newTodoModal
+		this.notificationLocale = this.dataService.GetLocale().notifications.todo
+	}
+
+	Show(date?: number) {
+		if (this.modalVisible) return
+		this.modalVisible = true
+
+		this.ResetNewObjects(date)
+
+		// Check if push is supported
+		this.showReminderOption =
+			"serviceWorker" in navigator &&
+			"PushManager" in window &&
+			this.dataService.dav.isLoggedIn &&
+			this.dataService.GetNotificationPermission() != "denied"
+
+		this.modalService.open(this.todoModal).result.then(
+			async () => {
+				if (this.submitButtonDisabled) return
+
+				// Save new todo
+				var todoTimeUnix: number = 0
+				if (this.newTodoSetDateCheckboxChecked) {
+					var todoTime = new Date(
+						this.newTodoDate.year,
+						this.newTodoDate.month - 1,
+						this.newTodoDate.day,
+						0,
+						0,
+						0,
+						0
+					)
+					todoTimeUnix = Math.floor(todoTime.getTime() / 1000)
+				}
+
+				let notificationUuid = null
+
+				if (this.newTodoReminderCheckboxChecked) {
+					// Ask the user for notification permission
+					if (await SetupWebPushSubscription()) {
+						// Create the notification
+						let notificationTime =
+							moment.unix(todoTimeUnix).startOf("day").unix() +
+							this.todoReminderTime.hour * 60 * 60 +
+							this.todoReminderTime.minute * 60
+
+						let notification = new Notification({
+							Time: notificationTime,
+							Interval: 0,
+							Title: this.notificationLocale.title,
+							Body: this.newTodoName
+						})
+						await notification.Save()
+						notificationUuid = notification.Uuid
+					}
+				}
+
+				let todo = await Todo.Create(
+					this.newTodoName,
+					false,
+					todoTimeUnix,
+					this.todoGroups,
+					null,
+					notificationUuid
+				)
+
+				this.save.emit(todo)
+
+				this.modalService.dismissAll()
+				this.modalVisible = false
+			},
+			() => {
+				this.modalVisible = false
+			}
+		)
+
+		this.SetSubmitButtonDisabled()
+	}
+
+	ResetNewObjects(date?: number) {
+		let d = new Date()
+		if (date) {
+			d = new Date(date * 1000)
+		}
+
+		this.newTodoDate = {
+			year: d.getFullYear(),
+			month: d.getMonth() + 1,
+			day: d.getDate()
+		}
+		this.newTodoName = ""
+		this.newTodoSetDateCheckboxChecked = true
+		this.todoGroups = []
+		this.allGroups = []
+		this.todoReminderTime = { hour: 10, minute: 0 }
+		this.newTodoReminderCheckboxChecked = false
+
+		this.SetSubmitButtonDisabled()
+	}
+
+	ToggleSetDateCheckbox() {
+		if (this.newTodoSetDateCheckboxChecked) {
+			this.newTodoSetDateCheckboxChecked = false
+			this.newTodoReminderCheckboxChecked = false
+		} else {
+			this.newTodoSetDateCheckboxChecked = true
+		}
+	}
+
+	ToggleReminderCheckbox() {
+		if (this.newTodoSetDateCheckboxChecked) {
+			this.newTodoReminderCheckboxChecked =
+				!this.newTodoReminderCheckboxChecked
+		}
+	}
+
+	SetSubmitButtonDisabled() {
+		this.submitButtonDisabled = this.newTodoName.trim().length < 2
+	}
+}
diff --git a/src/app/components/set-name/set-name.component.html b/src/app/components/set-name/set-name.component.html
index 94720a7..da6741d 100644
--- a/src/app/components/set-name/set-name.component.html
+++ b/src/app/components/set-name/set-name.component.html
@@ -1,4 +1,10 @@
 <div class="form-group mt-2" [style.width.px]="width">
-   <label class="col-form-label text-color">{{ locale.name }}</label>
-   <fab-text-field [(value)]="name" [placeholder]="textFieldPlaceholder" [styles]="nameTextFieldStyle" (onChange)="onChange($event)" (keydown.enter)="Submit()"></fab-text-field>
-</div>
\ No newline at end of file
+	<label class="col-form-label text-color">{{ locale.name }}</label>
+	<fab-text-field
+		[(value)]="name"
+		[placeholder]="textFieldPlaceholder"
+		[styles]="nameTextFieldStyle"
+		(onChange)="onChange($event)"
+		(keydown.enter)="Submit()"
+	></fab-text-field>
+</div>
diff --git a/src/app/components/set-name/set-name.component.ts b/src/app/components/set-name/set-name.component.ts
index 14b5f1c..c9237fe 100644
--- a/src/app/components/set-name/set-name.component.ts
+++ b/src/app/components/set-name/set-name.component.ts
@@ -1,59 +1,57 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { DataService } from '../../services/data-service';
-import { enUS } from '../../../locales/locales';
+import { Component, Input, Output, EventEmitter } from "@angular/core"
+import { DataService } from "../../services/data-service"
+import { enUS } from "../../../locales/locales"
 
 @Component({
 	selector: "calendo-set-name",
 	templateUrl: "./set-name.component.html"
 })
-export class SetNameComponent{
-	locale = enUS.setName;
+export class SetNameComponent {
+	locale = enUS.setName
 	@Input()
-	type: number = 0;		// Todo: 0, TodoList: 1, Appointment: 2
+	type: number = 0 // Todo: 0, TodoList: 1, Appointment: 2
 	@Input()
-	name: string = "";
+	name: string = ""
 	@Input()
-	width: number = 280;
-   @Output()
-	nameChanged = new EventEmitter<string>();
+	width: number = 280
+	@Output()
+	nameChanged = new EventEmitter<string>()
 	@Output()
 	submit = new EventEmitter()
-	textFieldPlaceholder: string = this.locale.todoName;
+	textFieldPlaceholder: string = this.locale.todoName
 	nameTextFieldStyle = {
 		root: {
-			width: this.width,
+			width: this.width
 		}
 	}
 
-	constructor(
-      public dataService: DataService
-   ){
-		this.locale = this.dataService.GetLocale().setName;
+	constructor(public dataService: DataService) {
+		this.locale = this.dataService.GetLocale().setName
 	}
-	
-	ngOnInit(){
+
+	ngOnInit() {
 		// Update the width of the text field
-		this.nameTextFieldStyle.root.width = this.width;
+		this.nameTextFieldStyle.root.width = this.width
 
 		// Set the placeholder text
 		switch (this.type) {
-			case 0:	// Todo
-				this.textFieldPlaceholder = this.locale.todoName;
-				break;
-			case 1:	// TodoList
-				this.textFieldPlaceholder = this.locale.todoListName;
-				break;
-			case 2:	// Appointment
-				this.textFieldPlaceholder = this.locale.appointmentName;
-				break;
+			case 0: // Todo
+				this.textFieldPlaceholder = this.locale.todoName
+				break
+			case 1: // TodoList
+				this.textFieldPlaceholder = this.locale.todoListName
+				break
+			case 2: // Appointment
+				this.textFieldPlaceholder = this.locale.appointmentName
+				break
 		}
 	}
 
-   onChange(event: {ev: any, newValue: string}){
+	onChange(event: { ev: any; newValue: string }) {
 		this.nameChanged.emit(event.newValue)
 	}
-	
+
 	Submit() {
 		this.submit.emit()
 	}
-}
\ No newline at end of file
+}
diff --git a/src/app/components/set-todo-groups/set-todo-groups.component.html b/src/app/components/set-todo-groups/set-todo-groups.component.html
index 04c4ccc..719f381 100644
--- a/src/app/components/set-todo-groups/set-todo-groups.component.html
+++ b/src/app/components/set-todo-groups/set-todo-groups.component.html
@@ -1,21 +1,57 @@
 <div style="width: 282px">
-   <div class="form-group">
-      <label for="new-group-name" class="col-form-label text-color">{{ locale.addNewGroup }}</label>
-   
-      <div class="d-flex">
-         <fab-text-field [(value)]="newGroupName" (input)="NameChanged()" (keydown.enter)="AddButtonClick()" [placeholder]="locale.groupName" [styles]="groupTextFieldStyle"></fab-text-field>
-         <button type="button" class="btn btn-outline-primary btn-sm" (click)="AddButtonClick()"><fa-icon [icon]="faPlus"></fa-icon></button>
-      </div>
-   </div>
-   
-   <div class="form-group" ngbDropdown placement="bottom-left" *ngIf="existingGroups.length > 0">
-      <button type="button" class="btn btn-outline-primary btn-sm" ngbDropdownToggle>{{ locale.addExistingGroup }}</button>
-      <div ngbDropdownMenu class="theme-background-color-tertiary ms-depth-4">
-         <button class="dropdown-item text-color cursor" (click)="AddGroup(groupName)" *ngFor="let groupName of existingGroups">{{ groupName }}</button>
-      </div>
-   </div>
-   
-   <div style="margin-top: -8px">
-      <calendo-todo-group-badge *ngFor="let todoGroup of todoGroups" [groupName]="todoGroup" [canRemove]="true" (remove)="RemoveGroup($event)"></calendo-todo-group-badge>
-   </div>
-</div>
\ No newline at end of file
+	<div class="form-group">
+		<label for="new-group-name" class="col-form-label text-color">{{
+			locale.addNewGroup
+		}}</label>
+
+		<div class="d-flex">
+			<fab-text-field
+				[(value)]="newGroupName"
+				(input)="NameChanged()"
+				(keydown.enter)="AddButtonClick()"
+				[placeholder]="locale.groupName"
+				[styles]="groupTextFieldStyle"
+			></fab-text-field>
+			<button
+				type="button"
+				class="btn btn-outline-primary btn-sm"
+				(click)="AddButtonClick()"
+			>
+				<fa-icon [icon]="faPlus"></fa-icon>
+			</button>
+		</div>
+	</div>
+
+	<div
+		class="form-group"
+		ngbDropdown
+		placement="bottom-left"
+		*ngIf="existingGroups.length > 0"
+	>
+		<button
+			type="button"
+			class="btn btn-outline-primary btn-sm"
+			ngbDropdownToggle
+		>
+			{{ locale.addExistingGroup }}
+		</button>
+		<div ngbDropdownMenu class="theme-background-color-tertiary ms-depth-4">
+			<button
+				class="dropdown-item text-color cursor"
+				(click)="AddGroup(groupName)"
+				*ngFor="let groupName of existingGroups"
+			>
+				{{ groupName }}
+			</button>
+		</div>
+	</div>
+
+	<div style="margin-top: -8px">
+		<calendo-todo-group-badge
+			*ngFor="let todoGroup of todoGroups"
+			[groupName]="todoGroup"
+			[canRemove]="true"
+			(remove)="RemoveGroup($event)"
+		></calendo-todo-group-badge>
+	</div>
+</div>
diff --git a/src/app/components/set-todo-groups/set-todo-groups.component.ts b/src/app/components/set-todo-groups/set-todo-groups.component.ts
index ad66ca8..19e1210 100644
--- a/src/app/components/set-todo-groups/set-todo-groups.component.ts
+++ b/src/app/components/set-todo-groups/set-todo-groups.component.ts
@@ -1,36 +1,34 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core'
-import { DataService } from 'src/app/services/data-service'
-import { GetAllTodoGroups } from '../../models/Todo'
-import { enUS } from '../../../locales/locales'
-import { faPlus } from '@fortawesome/free-solid-svg-icons'
+import { Component, Input, Output, EventEmitter } from "@angular/core"
+import { DataService } from "src/app/services/data-service"
+import { GetAllTodoGroups } from "../../models/Todo"
+import { enUS } from "../../../locales/locales"
+import { faPlus } from "@fortawesome/free-solid-svg-icons"
 
 @Component({
-   selector: "calendo-set-todo-groups",
-   templateUrl: "./set-todo-groups.component.html"
+	selector: "calendo-set-todo-groups",
+	templateUrl: "./set-todo-groups.component.html"
 })
-export class SetTodoGroupsComponent{
+export class SetTodoGroupsComponent {
 	faPlus = faPlus
 	locale = enUS.setTodoGroups
-   existingGroups: string[] = []
+	existingGroups: string[] = []
 	todoGroups: string[] = []
 	@Input() initialGroups: string[] = []
-   @Output() groupsChanged = new EventEmitter<string[]>()
+	@Output() groupsChanged = new EventEmitter<string[]>()
 	newGroupName: string = ""
 	groupTextFieldStyle = {
 		root: {
-			width: 250,
+			width: 250
 		}
 	}
 
-	constructor(
-		private dataService: DataService
-	){
-      this.locale = this.dataService.GetLocale().setTodoGroups;
-		this.GetAllTodoGroups();
+	constructor(private dataService: DataService) {
+		this.locale = this.dataService.GetLocale().setTodoGroups
+		this.GetAllTodoGroups()
 	}
 
 	ngAfterViewInit() {
-		GetAllTodoGroups();
+		GetAllTodoGroups()
 
 		// Add the initial groups to the groups
 		this.initialGroups.forEach(group => {
@@ -43,63 +41,66 @@ export class SetTodoGroupsComponent{
 			}
 		})
 	}
-	
+
 	async GetAllTodoGroups() {
-      this.existingGroups = [];
-      var todoGroups = await GetAllTodoGroups();
-      todoGroups.forEach(group => {
-         // Check if the group is already selected
-         if(this.todoGroups.findIndex(g => g == group) == -1){
+		this.existingGroups = []
+		var todoGroups = await GetAllTodoGroups()
+		todoGroups.forEach(group => {
+			// Check if the group is already selected
+			if (this.todoGroups.findIndex(g => g == group) == -1) {
 				this.existingGroups.push(group)
-         }
+			}
 		})
-   }
+	}
 
 	AddGroup(name: string) {
 		name = name.trim()
-      if(name.length > 0 && this.todoGroups.findIndex(g => g == name) == -1){
-         this.todoGroups.push(name);
-   
-         // Remove the group from existingGroups
-         var index = this.existingGroups.findIndex(g => g == name);
-   
-         if(index !== -1){
-            this.existingGroups.splice(index, 1);
+		if (name.length > 0 && this.todoGroups.findIndex(g => g == name) == -1) {
+			this.todoGroups.push(name)
+
+			// Remove the group from existingGroups
+			var index = this.existingGroups.findIndex(g => g == name)
+
+			if (index !== -1) {
+				this.existingGroups.splice(index, 1)
 			}
-			
-			this.TriggerGroupsUpdate(this.todoGroups);
-      }
+
+			this.TriggerGroupsUpdate(this.todoGroups)
+		}
 	}
-	
+
 	RemoveGroup(name: string) {
 		name = name.trim()
-      var index = this.todoGroups.findIndex(g => g == name);
+		var index = this.todoGroups.findIndex(g => g == name)
 
-      if(index !== -1){
-         this.todoGroups.splice(index, 1);
-			this.GetAllTodoGroups();
+		if (index !== -1) {
+			this.todoGroups.splice(index, 1)
+			this.GetAllTodoGroups()
 
-			this.TriggerGroupsUpdate(this.todoGroups);
-      }
+			this.TriggerGroupsUpdate(this.todoGroups)
+		}
 	}
 
 	AddButtonClick() {
 		this.AddGroup(this.newGroupName)
-		this.newGroupName = ''
+		this.newGroupName = ""
 	}
 
 	NameChanged() {
 		setTimeout(() => {
 			// Update the groups in the parent element with the group name in the text field
-			if (this.newGroupName.trim().length > 0 && this.todoGroups.findIndex(g => g == this.newGroupName) == -1) {
+			if (
+				this.newGroupName.trim().length > 0 &&
+				this.todoGroups.findIndex(g => g == this.newGroupName) == -1
+			) {
 				this.TriggerGroupsUpdate([...this.todoGroups, this.newGroupName])
 			} else {
 				this.TriggerGroupsUpdate(this.todoGroups)
 			}
 		}, 1)
 	}
-	
-	TriggerGroupsUpdate(groups: string[]){
-		this.groupsChanged.emit(groups);
+
+	TriggerGroupsUpdate(groups: string[]) {
+		this.groupsChanged.emit(groups)
 	}
-}
\ No newline at end of file
+}
diff --git a/src/app/components/small-appointment-item/small-appointment-item.component.html b/src/app/components/small-appointment-item/small-appointment-item.component.html
index 76f127d..6de7e26 100644
--- a/src/app/components/small-appointment-item/small-appointment-item.component.html
+++ b/src/app/components/small-appointment-item/small-appointment-item.component.html
@@ -1,31 +1,55 @@
-<calendo-delete-appointment-modal [appointment]="appointment" (remove)="Remove()"></calendo-delete-appointment-modal>
-<calendo-appointment-modal (save)="Update($event)"></calendo-appointment-modal>
-
-<div *ngIf="enableDropdown" ngbDropdown placement="bottom-left">
-   <div class="px-1 rounded cursor" 
-         style="font-size: 15px; color: white; user-select: none" 
-         [style.background-color]="appointment.color ? '#' + appointment.color : defaultColor"
-         ngbDropdownToggle>
-      <p *ngIf="!compact">
-         {{ appointment.name }}<br>
-         <span *ngIf="!appointment.allday">{{ getTimeSpan() }}</span>
-      </p>
-      <p *ngIf="compact"><span *ngIf="!appointment.allday">{{ getStartTime() }}</span> {{ appointment.name }}</p>
-   </div>
-
-   <div ngbDropdownMenu class="theme-background-color-tertiary ms-depth-4 ms-motion-slideDownIn">
-      <button class="dropdown-item text-color cursor" (click)="Edit()">{{ locale.edit }}</button>
-      <button class="dropdown-item text-color cursor" (click)="Delete()">{{ locale.delete }}</button>
-   </div>
-</div>
-
-<div class="px-1 rounded d-inline-flex" 
-      style="font-size: 15px; color: white; user-select: none" 
-      [style.background-color]="appointment.color ? '#' + appointment.color : defaultColor"
-      *ngIf="!enableDropdown">
-   <span *ngIf="!compact">
-      {{ appointment.name }}<br>
-      <span *ngIf="!appointment.allday">{{ getTimeSpan() }}</span>
-   </span>
-   <span *ngIf="compact"><span *ngIf="!appointment.allday">{{ getStartTime() }}</span> {{ appointment.name }}</span>
-</div>
\ No newline at end of file
+<calendo-delete-appointment-modal
+	[appointment]="appointment"
+	(remove)="Remove()"
+></calendo-delete-appointment-modal>
+<calendo-appointment-modal (save)="Update($event)"></calendo-appointment-modal>
+
+<div *ngIf="enableDropdown" ngbDropdown placement="bottom-left">
+	<div
+		class="px-1 rounded cursor"
+		style="font-size: 15px; color: white; user-select: none"
+		[style.background-color]="
+			appointment.color ? '#' + appointment.color : defaultColor
+		"
+		ngbDropdownToggle
+	>
+		<p *ngIf="!compact">
+			{{ appointment.name }}<br />
+			<span *ngIf="!appointment.allday">{{ getTimeSpan() }}</span>
+		</p>
+		<p *ngIf="compact">
+			<span *ngIf="!appointment.allday">{{ getStartTime() }}</span>
+			{{ appointment.name }}
+		</p>
+	</div>
+
+	<div
+		ngbDropdownMenu
+		class="theme-background-color-tertiary ms-depth-4 ms-motion-slideDownIn"
+	>
+		<button class="dropdown-item text-color cursor" (click)="Edit()">
+			{{ locale.edit }}
+		</button>
+		<button class="dropdown-item text-color cursor" (click)="Delete()">
+			{{ locale.delete }}
+		</button>
+	</div>
+</div>
+
+<div
+	class="px-1 rounded d-inline-flex"
+	style="font-size: 15px; color: white; user-select: none"
+	[style.background-color]="
+		appointment.color ? '#' + appointment.color : defaultColor
+	"
+	*ngIf="!enableDropdown"
+>
+	<span *ngIf="!compact">
+		{{ appointment.name }}<br />
+		<span *ngIf="!appointment.allday">{{ getTimeSpan() }}</span>
+	</span>
+	<span *ngIf="compact">
+		<span *ngIf="!appointment.allday">{{ getStartTime() }}</span>
+		{{ appointment.name }}
+	</span>
+</div>
diff --git a/src/app/components/small-appointment-item/small-appointment-item.component.ts b/src/app/components/small-appointment-item/small-appointment-item.component.ts
index a360eb9..4b978d3 100644
--- a/src/app/components/small-appointment-item/small-appointment-item.component.ts
+++ b/src/app/components/small-appointment-item/small-appointment-item.component.ts
@@ -1,52 +1,63 @@
-import { Component, Input, ViewChild } from '@angular/core';
-import * as moment from 'moment';
-import { AppointmentModalComponent } from '../../components/appointment-modal/appointment-modal.component';
-import { DeleteAppointmentModalComponent } from '../../components/delete-appointment-modal/delete-appointment-modal.component';
-import { Appointment } from '../../models/Appointment';
-import { DataService } from '../../services/data-service';
-import { environment } from '../../../environments/environment';
-import { enUS } from '../../../locales/locales';
-
-@Component({
-   selector: "calendo-small-appointment-item",
-   templateUrl: "./small-appointment-item.component.html"
-})
-export class SmallAppointmentItemComponent{
-   locale = enUS.smallAppointmentItem;
-   @Input() appointment: Appointment = new Appointment("", "", 0, 0, false, environment.appointmentDefaultColor);
-   @Input() enableDropdown: boolean = true;
-   @Input() compact: boolean = false;
-   @ViewChild(AppointmentModalComponent, { static: true })
-   private newAppointmentModalComponent: AppointmentModalComponent;
-   @ViewChild(DeleteAppointmentModalComponent, { static: true })
-   private deleteAppointmentModalComponent: DeleteAppointmentModalComponent;
-   defaultColor: string = environment.appointmentDefaultColor;
-
-   constructor(private dataService: DataService){
-      this.locale = this.dataService.GetLocale().smallAppointmentItem;
-   }
-
-   getTimeSpan(){
-      return moment.unix(this.appointment.start).format("H:mm") + " - " + moment.unix(this.appointment.end).format("H:mm");
-   }
-
-   getStartTime(){
-      return moment.unix(this.appointment.start).format("H:mm");
-   }
-
-   Edit(){
-      this.newAppointmentModalComponent.Show(this.appointment);
-   }
-
-   Update(appointment: Appointment){
-      this.dataService.UpdateAppointment(appointment);
-   }
-
-   Delete(){
-      this.deleteAppointmentModalComponent.Show();
-   }
-
-   Remove(){
-      this.dataService.RemoveAppointment(this.appointment);
-   }
-}
\ No newline at end of file
+import { Component, Input, ViewChild } from "@angular/core"
+import * as moment from "moment"
+import { AppointmentModalComponent } from "../../components/appointment-modal/appointment-modal.component"
+import { DeleteAppointmentModalComponent } from "../../components/delete-appointment-modal/delete-appointment-modal.component"
+import { Appointment } from "../../models/Appointment"
+import { DataService } from "../../services/data-service"
+import { environment } from "../../../environments/environment"
+import { enUS } from "../../../locales/locales"
+
+@Component({
+	selector: "calendo-small-appointment-item",
+	templateUrl: "./small-appointment-item.component.html"
+})
+export class SmallAppointmentItemComponent {
+	locale = enUS.smallAppointmentItem
+	@Input() appointment: Appointment = new Appointment(
+		"",
+		"",
+		0,
+		0,
+		false,
+		environment.appointmentDefaultColor
+	)
+	@Input() enableDropdown: boolean = true
+	@Input() compact: boolean = false
+	@ViewChild(AppointmentModalComponent, { static: true })
+	private newAppointmentModalComponent: AppointmentModalComponent
+	@ViewChild(DeleteAppointmentModalComponent, { static: true })
+	private deleteAppointmentModalComponent: DeleteAppointmentModalComponent
+	defaultColor: string = environment.appointmentDefaultColor
+
+	constructor(private dataService: DataService) {
+		this.locale = this.dataService.GetLocale().smallAppointmentItem
+	}
+
+	getTimeSpan() {
+		return (
+			moment.unix(this.appointment.start).format("H:mm") +
+			" - " +
+			moment.unix(this.appointment.end).format("H:mm")
+		)
+	}
+
+	getStartTime() {
+		return moment.unix(this.appointment.start).format("H:mm")
+	}
+
+	Edit() {
+		this.newAppointmentModalComponent.Show(this.appointment)
+	}
+
+	Update(appointment: Appointment) {
+		this.dataService.UpdateAppointment(appointment)
+	}
+
+	Delete() {
+		this.deleteAppointmentModalComponent.Show()
+	}
+
+	Remove() {
+		this.dataService.RemoveAppointment(this.appointment)
+	}
+}
diff --git a/src/app/components/small-todo-item/small-todo-item.component.html b/src/app/components/small-todo-item/small-todo-item.component.html
index e6589d7..6fbdab9 100644
--- a/src/app/components/small-todo-item/small-todo-item.component.html
+++ b/src/app/components/small-todo-item/small-todo-item.component.html
@@ -1,13 +1,39 @@
-<div class="border rounded d-inline-flex align-items-center pl-2 pr-2 mb-2 mr-2 theme-background-color-secondary" 
-		[ngClass]="dataService.darkTheme ? 'border-dark' : ''" style="min-height: 35px">
-	<div style="margin-bottom: -8px">
-		<fab-checkbox (onChange)="ToggleCheckbox()" [checked]="todo.completed"></fab-checkbox>
-	</div>
-   <label class="col-form-label mx-3 text-color cursor ms-fontSize-14" [ngClass]="todo.completed ? 'strikethrough' : ''" (click)="ToggleCheckbox()">
-      <span class="mr-2">{{ todo.name }}</span><span *ngIf="showBadge"><calendo-todo-group-badge *ngFor="let todoGroup of todo.groups" [groupName]="todoGroup"></calendo-todo-group-badge></span>
-   </label>
-
-   <button type="button" class="close" aria-label="Delete" (click)="Delete()" *ngIf="todo.completed">
-      <fa-icon [icon]="faTimes" class="text-color" style="font-size: 15px; display: block"></fa-icon>
-   </button>
-</div>
\ No newline at end of file
+<div
+	class="border rounded d-inline-flex align-items-center pl-2 pr-2 mb-2 mr-2 theme-background-color-secondary"
+	[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	style="min-height: 35px"
+>
+	<div style="margin-bottom: -8px">
+		<fab-checkbox
+			(onChange)="ToggleCheckbox()"
+			[checked]="todo.completed"
+		></fab-checkbox>
+	</div>
+	<label
+		class="col-form-label mx-3 text-color cursor ms-fontSize-14"
+		[ngClass]="todo.completed ? 'strikethrough' : ''"
+		(click)="ToggleCheckbox()"
+	>
+		<span class="mr-2">{{ todo.name }}</span
+		><span *ngIf="showBadge"
+			><calendo-todo-group-badge
+				*ngFor="let todoGroup of todo.groups"
+				[groupName]="todoGroup"
+			></calendo-todo-group-badge
+		></span>
+	</label>
+
+	<button
+		type="button"
+		class="close"
+		aria-label="Delete"
+		(click)="Delete()"
+		*ngIf="todo.completed"
+	>
+		<fa-icon
+			[icon]="faTimes"
+			class="text-color"
+			style="font-size: 15px; display: block"
+		></fa-icon>
+	</button>
+</div>
diff --git a/src/app/components/small-todo-item/small-todo-item.component.scss b/src/app/components/small-todo-item/small-todo-item.component.scss
index b19636f..7594f2b 100644
--- a/src/app/components/small-todo-item/small-todo-item.component.scss
+++ b/src/app/components/small-todo-item/small-todo-item.component.scss
@@ -1,19 +1,19 @@
-.strikethrough {
-   position: relative;
-}
-
-.strikethrough:before {
-   position: absolute;
-   content: "";
-   left: 0;
-   top: 50%;
-   right: 0;
-   border-top: 1px solid;
-   border-color: inherit;
- 
-	-webkit-transform:rotate(-5deg);
-   -moz-transform:rotate(-5deg);
-   -ms-transform:rotate(-5deg);
-   -o-transform:rotate(-5deg);
-   transform:rotate(-5deg);
-}
\ No newline at end of file
+.strikethrough {
+	position: relative;
+}
+
+.strikethrough:before {
+	position: absolute;
+	content: "";
+	left: 0;
+	top: 50%;
+	right: 0;
+	border-top: 1px solid;
+	border-color: inherit;
+
+	-webkit-transform: rotate(-5deg);
+	-moz-transform: rotate(-5deg);
+	-ms-transform: rotate(-5deg);
+	-o-transform: rotate(-5deg);
+	transform: rotate(-5deg);
+}
diff --git a/src/app/components/small-todo-item/small-todo-item.component.ts b/src/app/components/small-todo-item/small-todo-item.component.ts
index a7bdf85..66a2d71 100644
--- a/src/app/components/small-todo-item/small-todo-item.component.ts
+++ b/src/app/components/small-todo-item/small-todo-item.component.ts
@@ -1,29 +1,27 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Todo } from '../../models/Todo';
-import { DataService } from '../../services/data-service';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
-
-@Component({
-   selector: "calendo-small-todo-item",
-   templateUrl: "./small-todo-item.component.html",
-   styleUrls: [
-      "./small-todo-item.component.scss"
-   ]
-})
-export class SmallTodoItemComponent{
-   faTimes = faTimes;
-   @Input() todo: Todo = new Todo();
-   @Input() showBadge: boolean = true;
-	@Output() delete = new EventEmitter();
-	
-	constructor(public dataService: DataService){}
-
-   ToggleCheckbox(){
-      this.todo.SetCompleted(!this.todo.completed);
-   }
-
-   Delete(){
-      this.todo.Delete();
-      this.delete.emit();
-   }
-}
\ No newline at end of file
+import { Component, Input, Output, EventEmitter } from "@angular/core"
+import { Todo } from "../../models/Todo"
+import { DataService } from "../../services/data-service"
+import { faTimes } from "@fortawesome/free-solid-svg-icons"
+
+@Component({
+	selector: "calendo-small-todo-item",
+	templateUrl: "./small-todo-item.component.html",
+	styleUrls: ["./small-todo-item.component.scss"]
+})
+export class SmallTodoItemComponent {
+	faTimes = faTimes
+	@Input() todo: Todo = new Todo()
+	@Input() showBadge: boolean = true
+	@Output() delete = new EventEmitter()
+
+	constructor(public dataService: DataService) {}
+
+	ToggleCheckbox() {
+		this.todo.SetCompleted(!this.todo.completed)
+	}
+
+	Delete() {
+		this.todo.Delete()
+		this.delete.emit()
+	}
+}
diff --git a/src/app/components/small-todo-list-item/small-todo-list-item.component.html b/src/app/components/small-todo-list-item/small-todo-list-item.component.html
index 5d30d62..59186a2 100644
--- a/src/app/components/small-todo-list-item/small-todo-list-item.component.html
+++ b/src/app/components/small-todo-list-item/small-todo-list-item.component.html
@@ -1,12 +1,25 @@
-<div class="border rounded d-inline-flex align-items-center pl-2 pr-2 mb-2 mr-2 theme-background-color-secondary cursor" 
-		[ngClass]="dataService.darkTheme ? 'border-dark' : ''" style="min-height: 35px; user-select: none;" (click)="ShowDetails()">
-	<span class="mr-2 cursor" style="margin-bottom: -2px" *ngIf="todoTreeCopy.children.length != 0 && completedTodos == totalTodos">
-		<fab-icon iconName="Accept" [styles]="iconStyles"></fab-icon>
-	</span>
-	<span class="cursor" style="font-size: 14px; color: gray;">{{ completedTodos }}/{{ totalTodos }}</span>
-
-	<label class="col-form-label ms-fontSize-14 ml-3 cursor">
-		<span class="text-color mr-2">{{ todoList.name }}</span>
-		<calendo-todo-group-badge *ngFor="let todoGroup of todoList.groups" [groupName]="todoGroup"></calendo-todo-group-badge>
-	</label>
-</div>
\ No newline at end of file
+<div
+	class="border rounded d-inline-flex align-items-center pl-2 pr-2 mb-2 mr-2 theme-background-color-secondary cursor"
+	[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	style="min-height: 35px; user-select: none"
+	(click)="ShowDetails()"
+>
+	<span
+		class="mr-2 cursor"
+		style="margin-bottom: -2px"
+		*ngIf="todoTreeCopy.children.length != 0 && completedTodos == totalTodos"
+	>
+		<fab-icon iconName="Accept" [styles]="iconStyles"></fab-icon>
+	</span>
+	<span class="cursor" style="font-size: 14px; color: gray"
+		>{{ completedTodos }}/{{ totalTodos }}</span
+	>
+
+	<label class="col-form-label ms-fontSize-14 ml-3 cursor">
+		<span class="text-color mr-2">{{ todoList.name }}</span>
+		<calendo-todo-group-badge
+			*ngFor="let todoGroup of todoList.groups"
+			[groupName]="todoGroup"
+		></calendo-todo-group-badge>
+	</label>
+</div>
diff --git a/src/app/components/small-todo-list-item/small-todo-list-item.component.ts b/src/app/components/small-todo-list-item/small-todo-list-item.component.ts
index 339d920..2cda7d4 100644
--- a/src/app/components/small-todo-list-item/small-todo-list-item.component.ts
+++ b/src/app/components/small-todo-list-item/small-todo-list-item.component.ts
@@ -1,107 +1,107 @@
-import { Component, Input } from '@angular/core';
-import { Router } from '@angular/router';
-import { DataService } from 'src/app/services/data-service';
-import { IIconStyles } from 'office-ui-fabric-react';
-import { Todo } from 'src/app/models/Todo';
-import { TodoList } from 'src/app/models/TodoList';
-
-@Component({
-	selector: "calendo-small-todo-list-item",
-	templateUrl: "./small-todo-list-item.component.html"
-})
-export class SmallTodoListItemComponent{
-	@Input()
-	todoList: TodoList = new TodoList();
-	totalTodos: number = 0;
-	completedTodos: number = 0;
-	todoTreeCopy: TodoElement;
-	iconStyles: IIconStyles = {
-		root: {
-			fontSize: 15,
-			color: "#1da520"
-		}
-	}
-
-	constructor(
-		public dataService: DataService,
-		private router: Router
-   ){}
-   
-   ngOnInit(){
-		this.LoadTree();
-   }
-
-	LoadTree(){
-		// Create a copy of the tree of todoList
-		this.todoTreeCopy = {
-			uuid: this.todoList.uuid,
-			list: true,
-			children: [],
-			completed: false,
-			completedCount: 0
-		}
-
-		this.LoadTreeElement(this.todoTreeCopy, this.todoList);
-		this.LoadTreeElementCount(this.todoTreeCopy);
-		this.totalTodos = this.todoTreeCopy.children.length;
-		this.completedTodos = this.todoTreeCopy.completedCount;
-	}
-
-	LoadTreeElement(element: TodoElement, todoList: TodoList){
-		todoList.items.forEach((item: Todo | TodoList) => {
-			if(item instanceof Todo){
-				element.children.push({
-					uuid: item.uuid,
-					list: false,
-					children: [],
-					completed: item.completed,
-					completedCount: 0
-				});
-			}else{
-				let newElement: TodoElement = {
-					uuid: item.uuid,
-					list: true,
-					children: [],
-					completed: false,
-					completedCount: 0
-				}
-
-				this.LoadTreeElement(newElement, item);
-				element.children.push(newElement);
-			}
-		});
-	}
-
-	LoadTreeElementCount(rootItem: TodoElement){
-		let todosCompleted: number = 0;
-
-		rootItem.children.forEach(item => {
-			if(!item.list){
-				// Todo
-				if(item.completed){
-					todosCompleted++;
-				}
-			}else{
-				// Todo list
-				this.LoadTreeElementCount(item);
-				if(item.completedCount == item.children.length){
-					todosCompleted++;
-				}
-			}
-		});
-		
-		rootItem.completedCount = todosCompleted;
-	}
-
-   ShowDetails(){
-		this.router.navigate(['todolist', this.todoList.uuid]);
-   }
-}
-
-interface TodoElement{
-	uuid: string;
-	list: boolean;
-	children: TodoElement[];
-	completed: boolean;
-	completedCount: number;
-}
\ No newline at end of file
+import { Component, Input } from "@angular/core"
+import { Router } from "@angular/router"
+import { DataService } from "src/app/services/data-service"
+import { IIconStyles } from "office-ui-fabric-react"
+import { Todo } from "src/app/models/Todo"
+import { TodoList } from "src/app/models/TodoList"
+
+@Component({
+	selector: "calendo-small-todo-list-item",
+	templateUrl: "./small-todo-list-item.component.html"
+})
+export class SmallTodoListItemComponent {
+	@Input()
+	todoList: TodoList = new TodoList()
+	totalTodos: number = 0
+	completedTodos: number = 0
+	todoTreeCopy: TodoElement
+	iconStyles: IIconStyles = {
+		root: {
+			fontSize: 15,
+			color: "#1da520"
+		}
+	}
+
+	constructor(
+		public dataService: DataService,
+		private router: Router
+	) {}
+
+	ngOnInit() {
+		this.LoadTree()
+	}
+
+	LoadTree() {
+		// Create a copy of the tree of todoList
+		this.todoTreeCopy = {
+			uuid: this.todoList.uuid,
+			list: true,
+			children: [],
+			completed: false,
+			completedCount: 0
+		}
+
+		this.LoadTreeElement(this.todoTreeCopy, this.todoList)
+		this.LoadTreeElementCount(this.todoTreeCopy)
+		this.totalTodos = this.todoTreeCopy.children.length
+		this.completedTodos = this.todoTreeCopy.completedCount
+	}
+
+	LoadTreeElement(element: TodoElement, todoList: TodoList) {
+		todoList.items.forEach((item: Todo | TodoList) => {
+			if (item instanceof Todo) {
+				element.children.push({
+					uuid: item.uuid,
+					list: false,
+					children: [],
+					completed: item.completed,
+					completedCount: 0
+				})
+			} else {
+				let newElement: TodoElement = {
+					uuid: item.uuid,
+					list: true,
+					children: [],
+					completed: false,
+					completedCount: 0
+				}
+
+				this.LoadTreeElement(newElement, item)
+				element.children.push(newElement)
+			}
+		})
+	}
+
+	LoadTreeElementCount(rootItem: TodoElement) {
+		let todosCompleted: number = 0
+
+		rootItem.children.forEach(item => {
+			if (!item.list) {
+				// Todo
+				if (item.completed) {
+					todosCompleted++
+				}
+			} else {
+				// Todo list
+				this.LoadTreeElementCount(item)
+				if (item.completedCount == item.children.length) {
+					todosCompleted++
+				}
+			}
+		})
+
+		rootItem.completedCount = todosCompleted
+	}
+
+	ShowDetails() {
+		this.router.navigate(["todolist", this.todoList.uuid])
+	}
+}
+
+interface TodoElement {
+	uuid: string
+	list: boolean
+	children: TodoElement[]
+	completed: boolean
+	completedCount: number
+}
diff --git a/src/app/components/todo-group-badge/todo-group-badge.component.html b/src/app/components/todo-group-badge/todo-group-badge.component.html
index 6b0f824..96e937b 100644
--- a/src/app/components/todo-group-badge/todo-group-badge.component.html
+++ b/src/app/components/todo-group-badge/todo-group-badge.component.html
@@ -1,8 +1,9 @@
-<span
-	class="badge badge-pill badge-primary mr-1" 
-	(click)="Remove()" 
-	[ngClass]="canRemove ? 'cursor' : ''" 
-	[style.background-color]="badgeColor"
-	[style.color]="badgeTextColor">
-	{{ groupName }}
-</span>
\ No newline at end of file
+<span
+	class="badge badge-pill badge-primary mr-1"
+	(click)="Remove()"
+	[ngClass]="canRemove ? 'cursor' : ''"
+	[style.background-color]="badgeColor"
+	[style.color]="badgeTextColor"
+>
+	{{ groupName }}
+</span>
diff --git a/src/app/components/todo-group-badge/todo-group-badge.component.ts b/src/app/components/todo-group-badge/todo-group-badge.component.ts
index 06719cc..c71d8fc 100644
--- a/src/app/components/todo-group-badge/todo-group-badge.component.ts
+++ b/src/app/components/todo-group-badge/todo-group-badge.component.ts
@@ -1,78 +1,80 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-   selector: "calendo-todo-group-badge",
-   templateUrl: "./todo-group-badge.component.html"
-})
-export class TodoGroupBadgeComponent{
-   @Input() groupName: string = "";
-   @Input() canRemove: boolean = false;
-   @Output() remove = new EventEmitter();
-   badgeColor: string = "#4285F4";     // Bootstrap primary color
-   badgeTextColor: string = "#FFFFFF";    // Either black or white
-
-   constructor(){}
-
-   ngOnInit(){
-      this.ColorizeBadge();
-   }
-
-   ColorizeBadge(){
-      this.badgeColor = this.stringToColour(this.groupName);
-      this.badgeTextColor = this.generateTextColor(this.badgeColor);
-   }
-
-   Remove(){
-      if(this.canRemove){
-         this.remove.emit(this.groupName);
-      }
-   }
-
-   // https://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-javascript
-   stringToColour(str){
-      var hash = 0;
-      for (var i = 0; i < str.length; i++) {
-        hash = str.charCodeAt(i) + ((hash << 5) - hash);
-      }
-      var colour = '#';
-      for (var i = 0; i < 3; i++) {
-        var value = (hash >> (i * 8)) & 0xFF;
-        colour += ('00' + value.toString(16)).substr(-2);
-      }
-      return colour;
-   }
-
-   // https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
-   hexToRgb(hex) {
-      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-      return result ? {
-         r: parseInt(result[1], 16),
-         g: parseInt(result[2], 16),
-         b: parseInt(result[3], 16)
-      } : null;
-   }
-
-   generateTextColor(colorCode: string){
-      var rgb = this.hexToRgb(colorCode);
-
-      var c = [rgb.r / 255, rgb.g / 255, rgb.b / 255];
-
-      for(var i = 0; i < c.length; i++){
-         if(c[i] <= 0.03928){
-            c[i] = c[i] / 12.92;
-         }else{
-            c[i] = Math.pow((c[i] + 0.055) / 1.055, 2.4);
-         }
-      }
-
-      var l = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-
-      if(l > 0.179){
-         // Black text color
-         return "#000000";
-      }else{
-         // White text color
-         return "#FFFFFF";
-      }
-   }
-}
\ No newline at end of file
+import { Component, Input, Output, EventEmitter } from "@angular/core"
+
+@Component({
+	selector: "calendo-todo-group-badge",
+	templateUrl: "./todo-group-badge.component.html"
+})
+export class TodoGroupBadgeComponent {
+	@Input() groupName: string = ""
+	@Input() canRemove: boolean = false
+	@Output() remove = new EventEmitter()
+	badgeColor: string = "#4285F4" // Bootstrap primary color
+	badgeTextColor: string = "#FFFFFF" // Either black or white
+
+	constructor() {}
+
+	ngOnInit() {
+		this.ColorizeBadge()
+	}
+
+	ColorizeBadge() {
+		this.badgeColor = this.stringToColour(this.groupName)
+		this.badgeTextColor = this.generateTextColor(this.badgeColor)
+	}
+
+	Remove() {
+		if (this.canRemove) {
+			this.remove.emit(this.groupName)
+		}
+	}
+
+	// https://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-javascript
+	stringToColour(str) {
+		var hash = 0
+		for (var i = 0; i < str.length; i++) {
+			hash = str.charCodeAt(i) + ((hash << 5) - hash)
+		}
+		var colour = "#"
+		for (var i = 0; i < 3; i++) {
+			var value = (hash >> (i * 8)) & 0xff
+			colour += ("00" + value.toString(16)).substr(-2)
+		}
+		return colour
+	}
+
+	// https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+	hexToRgb(hex) {
+		var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+		return result
+			? {
+					r: parseInt(result[1], 16),
+					g: parseInt(result[2], 16),
+					b: parseInt(result[3], 16)
+				}
+			: null
+	}
+
+	generateTextColor(colorCode: string) {
+		var rgb = this.hexToRgb(colorCode)
+
+		var c = [rgb.r / 255, rgb.g / 255, rgb.b / 255]
+
+		for (var i = 0; i < c.length; i++) {
+			if (c[i] <= 0.03928) {
+				c[i] = c[i] / 12.92
+			} else {
+				c[i] = Math.pow((c[i] + 0.055) / 1.055, 2.4)
+			}
+		}
+
+		var l = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
+
+		if (l > 0.179) {
+			// Black text color
+			return "#000000"
+		} else {
+			// White text color
+			return "#FFFFFF"
+		}
+	}
+}
diff --git a/src/app/components/todo-item/todo-item.component.html b/src/app/components/todo-item/todo-item.component.html
index 1b9bb4e..71d16b5 100644
--- a/src/app/components/todo-item/todo-item.component.html
+++ b/src/app/components/todo-item/todo-item.component.html
@@ -1,12 +1,39 @@
-<li class="list-group-item d-flex align-items-center theme-background-color-secondary" style="padding: 10px 0px 10px 10px;">
-   <div style="margin-bottom: -8px">
-		<fab-checkbox (onChange)="ToggleCheckbox()" [checked]="todo.completed"></fab-checkbox>
-	</div>
-   <label class="ml-3 mr-3 col-form-label text-color cursor ms-fontSize-14" [ngClass]="todo.completed ? 'strikethrough' : ''" style="user-select: none" (click)="ToggleCheckbox()">
-      {{ todo.name }}<span *ngIf="showBadge" class="ml-2"><calendo-todo-group-badge *ngFor="let todoGroup of todo.groups" [groupName]="todoGroup"></calendo-todo-group-badge></span>
-   </label>
-   
-   <button type="button" class="close ml-auto" aria-label="Delete" (click)="Delete()" *ngIf="todo.completed">
-      <fa-icon [icon]="faTimes" class="text-color" style="font-size: 16px; display: block"></fa-icon>
-   </button>
-</li>
\ No newline at end of file
+<li
+	class="list-group-item d-flex align-items-center theme-background-color-secondary"
+	style="padding: 10px 0px 10px 10px"
+>
+	<div style="margin-bottom: -8px">
+		<fab-checkbox
+			(onChange)="ToggleCheckbox()"
+			[checked]="todo.completed"
+		></fab-checkbox>
+	</div>
+	<label
+		class="ml-3 mr-3 col-form-label text-color cursor ms-fontSize-14"
+		[ngClass]="todo.completed ? 'strikethrough' : ''"
+		style="user-select: none"
+		(click)="ToggleCheckbox()"
+	>
+		{{ todo.name }}
+		<span *ngIf="showBadge" class="ml-2">
+			<calendo-todo-group-badge
+				*ngFor="let todoGroup of todo.groups"
+				[groupName]="todoGroup"
+			></calendo-todo-group-badge>
+		</span>
+	</label>
+
+	<button
+		type="button"
+		class="close ml-auto"
+		aria-label="Delete"
+		(click)="Delete()"
+		*ngIf="todo.completed"
+	>
+		<fa-icon
+			[icon]="faTimes"
+			class="text-color"
+			style="font-size: 16px; display: block"
+		></fa-icon>
+	</button>
+</li>
diff --git a/src/app/components/todo-item/todo-item.component.ts b/src/app/components/todo-item/todo-item.component.ts
index c300e4d..bc7d297 100644
--- a/src/app/components/todo-item/todo-item.component.ts
+++ b/src/app/components/todo-item/todo-item.component.ts
@@ -1,23 +1,23 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Todo } from '../../models/Todo';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
-
-@Component({
-   selector: "calendo-todo-item",
-   templateUrl: "./todo-item.component.html"
-})
-export class TodoItemComponent{
-   faTimes = faTimes;
-   @Input() todo: Todo = new Todo();
-   @Input() showBadge: boolean = true;
-   @Output() delete = new EventEmitter();
-	
-	ToggleCheckbox(){
-		this.todo.SetCompleted(!this.todo.completed);
-	}
-
-   Delete(){
-      this.todo.Delete();
-      this.delete.emit();
-   }
-}
\ No newline at end of file
+import { Component, Input, Output, EventEmitter } from "@angular/core"
+import { Todo } from "../../models/Todo"
+import { faTimes } from "@fortawesome/free-solid-svg-icons"
+
+@Component({
+	selector: "calendo-todo-item",
+	templateUrl: "./todo-item.component.html"
+})
+export class TodoItemComponent {
+	faTimes = faTimes
+	@Input() todo: Todo = new Todo()
+	@Input() showBadge: boolean = true
+	@Output() delete = new EventEmitter()
+
+	ToggleCheckbox() {
+		this.todo.SetCompleted(!this.todo.completed)
+	}
+
+	Delete() {
+		this.todo.Delete()
+		this.delete.emit()
+	}
+}
diff --git a/src/app/components/todo-list-item/todo-list-item.component.html b/src/app/components/todo-list-item/todo-list-item.component.html
index 9382535..1504c06 100644
--- a/src/app/components/todo-list-item/todo-list-item.component.html
+++ b/src/app/components/todo-list-item/todo-list-item.component.html
@@ -1,7 +1,18 @@
-<li class="list-group-item theme-background-color-secondary d-flex" style="padding: 10px 0px;">
-	<calendo-todo-list-tree [todoList]="todoList" showRoot="true" readonly="true" (update)="UpdateTodoList()"></calendo-todo-list-tree>
-	
-	<div class="ml-auto" style="margin-top: 3px">
-		<fab-icon-button [iconProps]="menuButtonIconProps" (click)="ShowDetails()"></fab-icon-button>
-	</div>
-</li>
\ No newline at end of file
+<li
+	class="list-group-item theme-background-color-secondary d-flex"
+	style="padding: 10px 0px"
+>
+	<calendo-todo-list-tree
+		[todoList]="todoList"
+		showRoot="true"
+		readonly="true"
+		(update)="UpdateTodoList()"
+	></calendo-todo-list-tree>
+
+	<div class="ml-auto" style="margin-top: 3px">
+		<fab-icon-button
+			[iconProps]="menuButtonIconProps"
+			(click)="ShowDetails()"
+		></fab-icon-button>
+	</div>
+</li>
diff --git a/src/app/components/todo-list-item/todo-list-item.component.ts b/src/app/components/todo-list-item/todo-list-item.component.ts
index abd125e..b52eb54 100644
--- a/src/app/components/todo-list-item/todo-list-item.component.ts
+++ b/src/app/components/todo-list-item/todo-list-item.component.ts
@@ -1,37 +1,37 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Router } from '@angular/router';
-import { TodoList } from 'src/app/models/TodoList';
-import { IIconProps } from 'office-ui-fabric-react';
-import { DataService } from '../../services/data-service';
-
-@Component({
-   selector: 'calendo-todo-list-item',
-	templateUrl: './todo-list-item.component.html'
-})
-export class TodoListItemComponent{
-   @Input()
-	todoList: TodoList = new TodoList();
-	@Output()
-	update = new EventEmitter();
-   menuButtonIconProps: IIconProps = {
-      iconName: "More",
-      style: {
-         fontSize: 16,
-         color: this.dataService.darkTheme ? "white" : "black"
-      }
-   }
-
-   constructor(
-      public dataService: DataService,
-      private router: Router
-   ){}
-   
-   ShowDetails(){
-      this.router.navigate(['todolist', this.todoList.uuid]);
-	}
-	
-	async UpdateTodoList(){
-		this.dataService.AddTodoListToUpdatedTodoLists(this.todoList.uuid);
-		this.update.emit();
-	}
-}
\ No newline at end of file
+import { Component, Input, Output, EventEmitter } from "@angular/core"
+import { Router } from "@angular/router"
+import { TodoList } from "src/app/models/TodoList"
+import { IIconProps } from "office-ui-fabric-react"
+import { DataService } from "../../services/data-service"
+
+@Component({
+	selector: "calendo-todo-list-item",
+	templateUrl: "./todo-list-item.component.html"
+})
+export class TodoListItemComponent {
+	@Input()
+	todoList: TodoList = new TodoList()
+	@Output()
+	update = new EventEmitter()
+	menuButtonIconProps: IIconProps = {
+		iconName: "More",
+		style: {
+			fontSize: 16,
+			color: this.dataService.darkTheme ? "white" : "black"
+		}
+	}
+
+	constructor(
+		public dataService: DataService,
+		private router: Router
+	) {}
+
+	ShowDetails() {
+		this.router.navigate(["todolist", this.todoList.uuid])
+	}
+
+	async UpdateTodoList() {
+		this.dataService.AddTodoListToUpdatedTodoLists(this.todoList.uuid)
+		this.update.emit()
+	}
+}
diff --git a/src/app/components/todo-list-modal/todo-list-modal.component.html b/src/app/components/todo-list-modal/todo-list-modal.component.html
index f20f21a..61e6de6 100644
--- a/src/app/components/todo-list-modal/todo-list-modal.component.html
+++ b/src/app/components/todo-list-modal/todo-list-modal.component.html
@@ -1,36 +1,71 @@
 <ng-template #todoListModal let-c="close" let-d="dismiss">
-	<div class="modal-header theme-background-color-primary" [ngClass]="dataService.darkTheme ? 'border-dark' : ''">
-		<h4 class="modal-title text-color">{{ new ? locale.newTodoList : locale.editTodoList }}</h4>
-		<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
+	<div
+		class="modal-header theme-background-color-primary"
+		[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	>
+		<h4 class="modal-title text-color">
+			{{ new ? locale.newTodoList : locale.editTodoList }}
+		</h4>
+		<button
+			type="button"
+			class="close"
+			aria-label="Close"
+			(click)="d('Cross click')"
+		>
 			<span aria-hidden="true" class="text-color">&times;</span>
 		</button>
 	</div>
 	<div class="modal-body row theme-background-color-primary mx-0">
 		<div class="mx-auto mb-4 px-4 text-color">
-         <!-- Set Date checkbox -->
-         <div class="mb-1">
+			<!-- Set Date checkbox -->
+			<div class="mb-1">
 				<div class="d-inline-flex">
-					<fab-checkbox (onChange)="ToggleSetDateCheckbox()" [checked]="setDateCheckboxChecked"></fab-checkbox>
-					<label class="col-form-label ml-2 text-color cursor ms-fontSize-14" style="margin-top: -8px" (click)="ToggleSetDateCheckbox()">
+					<fab-checkbox
+						(onChange)="ToggleSetDateCheckbox()"
+						[checked]="setDateCheckboxChecked"
+					></fab-checkbox>
+					<label
+						class="col-form-label ml-2 text-color cursor ms-fontSize-14"
+						style="margin-top: -8px"
+						(click)="ToggleSetDateCheckbox()"
+					>
 						{{ locale.setDate }}
 					</label>
 				</div>
 			</div>
 
 			<ngb-datepicker
-				[(ngModel)]="todoListDate" 
-				(navigate)="date = $event.next" 
+				[(ngModel)]="todoListDate"
+				(navigate)="date = $event.next"
 				[disabled]="!setDateCheckboxChecked"
-				style="background-color: white">
-			</ngb-datepicker>
-      </div>
+				style="background-color: white"
+			></ngb-datepicker>
+		</div>
 
 		<div class="mx-auto offset-1">
-			<calendo-set-todo-groups [initialGroups]="todoGroups" (groupsChanged)="todoGroups = $event"></calendo-set-todo-groups>
-			<calendo-set-name [(name)]="todoListName" (nameChanged)="todoListName = $event; SetSubmitButtonDisabled()" (submit)="submitButtonDisabled ? 0 : c()" [type]="1"></calendo-set-name>
+			<calendo-set-todo-groups
+				[initialGroups]="todoGroups"
+				(groupsChanged)="todoGroups = $event"
+			></calendo-set-todo-groups>
+			<calendo-set-name
+				[(name)]="todoListName"
+				(nameChanged)="todoListName = $event; SetSubmitButtonDisabled()"
+				(submit)="submitButtonDisabled ? 0 : c()"
+				[type]="1"
+			></calendo-set-name>
 		</div>
 	</div>
-	<div class="modal-footer theme-background-color-primary" [ngClass]="dataService.darkTheme ? 'border-dark' : ''">
-		<button type="button" class="btn btn-primary" [disabled]="submitButtonDisabled" (click)="c()">{{ locale.save }}</button>
-   </div>
-</ng-template>
\ No newline at end of file
+	<div
+		class="modal-footer theme-background-color-primary"
+		[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+	>
+		<button
+			type="button"
+			class="btn btn-primary"
+			[disabled]="submitButtonDisabled"
+			(click)="c()"
+		>
+			{{ locale.save }}
+		</button>
+	</div>
+</ng-template>
diff --git a/src/app/components/todo-list-modal/todo-list-modal.component.ts b/src/app/components/todo-list-modal/todo-list-modal.component.ts
index ee700ed..7d75b76 100644
--- a/src/app/components/todo-list-modal/todo-list-modal.component.ts
+++ b/src/app/components/todo-list-modal/todo-list-modal.component.ts
@@ -1,120 +1,150 @@
-import { Component, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
-import { NgbModal, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
-import { DataService } from '../../services/data-service';
-import { enUS } from '../../../locales/locales';
-import { TodoList, GetTodoList } from '../../models/TodoList';
+import {
+	Component,
+	ViewChild,
+	ElementRef,
+	Output,
+	EventEmitter
+} from "@angular/core"
+import { NgbModal, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap"
+import { DataService } from "../../services/data-service"
+import { enUS } from "../../../locales/locales"
+import { TodoList, GetTodoList } from "../../models/TodoList"
 
 @Component({
 	selector: "calendo-todo-list-modal",
 	templateUrl: "./todo-list-modal.component.html"
 })
-export class TodoListModalComponent{
-   locale = enUS.todoListModal;
-	@Output() save = new EventEmitter<TodoList>();
-	@ViewChild('todoListModal', { static: true }) todoListModal: ElementRef;
-	setDateCheckboxChecked: boolean = true;
-	todoListDate: NgbDateStruct;
-   todoListName: string = "";
-	todoGroups: string[] = [];
-	new: boolean = true;
-	todoListUuid: string;
+export class TodoListModalComponent {
+	locale = enUS.todoListModal
+	@Output() save = new EventEmitter<TodoList>()
+	@ViewChild("todoListModal", { static: true }) todoListModal: ElementRef
+	setDateCheckboxChecked: boolean = true
+	todoListDate: NgbDateStruct
+	todoListName: string = ""
+	todoGroups: string[] = []
+	new: boolean = true
+	todoListUuid: string
 	modalVisible: boolean = false
 	submitButtonDisabled: boolean = true
 
 	constructor(
 		private modalService: NgbModal,
 		private dataService: DataService
-	){
-      this.locale = this.dataService.GetLocale().todoListModal;
-   }
+	) {
+		this.locale = this.dataService.GetLocale().todoListModal
+	}
 
 	Show(todoList?: TodoList, date?: number) {
-		if(this.modalVisible) return
+		if (this.modalVisible) return
 		this.modalVisible = true
 
-      if(todoList){
+		if (todoList) {
 			// Update todo list
-			this.new = false;
-			this.todoListUuid = todoList.uuid;
-
-         let date = new Date();
-         if(todoList.time != 0){
-            date = new Date(todoList.time * 1000);
-         }
-
-         this.todoListDate = {
-            year: date.getFullYear(),
-            month: date.getMonth() + 1,
-            day: date.getDate()
+			this.new = false
+			this.todoListUuid = todoList.uuid
+
+			let date = new Date()
+			if (todoList.time != 0) {
+				date = new Date(todoList.time * 1000)
 			}
-			
-			this.todoListDate.year = date.getFullYear();
-			this.todoListDate.month = date.getMonth() + 1;
-			this.todoListDate.day = date.getDate();
+
+			this.todoListDate = {
+				year: date.getFullYear(),
+				month: date.getMonth() + 1,
+				day: date.getDate()
+			}
+
+			this.todoListDate.year = date.getFullYear()
+			this.todoListDate.month = date.getMonth() + 1
+			this.todoListDate.day = date.getDate()
 
 			this.todoListName = todoList.name
-			
-			this.todoGroups = [];
+
+			this.todoGroups = []
 			todoList.groups.forEach(group => {
-				this.todoGroups.push(group);
-			});
-			
+				this.todoGroups.push(group)
+			})
+
 			setTimeout(() => {
-				this.setDateCheckboxChecked = todoList.time != 0;
-			}, 1);
-      }else{
-         // New todo list
-         this.Reset(date);
-      }
-
-		this.modalService.open(this.todoListModal).result.then(async () => {
-			if (this.submitButtonDisabled) return
-
-			// Calculate the unix timestamp
-			let todoListTimeUnix = 0;
-			if(this.setDateCheckboxChecked){
-				let todoListTime = new Date(this.todoListDate.year, this.todoListDate.month - 1, this.todoListDate.day, 0, 0, 0, 0);
-				todoListTimeUnix = Math.floor(todoListTime.getTime() / 1000);
-			}
+				this.setDateCheckboxChecked = todoList.time != 0
+			}, 1)
+		} else {
+			// New todo list
+			this.Reset(date)
+		}
 
-			if(this.new){
-				// Create the todo list
-				let todoList = await TodoList.Create(this.todoListName, todoListTimeUnix, [], this.todoGroups);
-				this.save.emit(todoList);
-			}else{
-				let todoList = await GetTodoList(this.todoListUuid);
-				await todoList.Update(this.todoListName, todoListTimeUnix, this.todoGroups);
-				this.save.emit(todoList);
+		this.modalService.open(this.todoListModal).result.then(
+			async () => {
+				if (this.submitButtonDisabled) return
+
+				// Calculate the unix timestamp
+				let todoListTimeUnix = 0
+				if (this.setDateCheckboxChecked) {
+					let todoListTime = new Date(
+						this.todoListDate.year,
+						this.todoListDate.month - 1,
+						this.todoListDate.day,
+						0,
+						0,
+						0,
+						0
+					)
+					todoListTimeUnix = Math.floor(todoListTime.getTime() / 1000)
+				}
+
+				if (this.new) {
+					// Create the todo list
+					let todoList = await TodoList.Create(
+						this.todoListName,
+						todoListTimeUnix,
+						[],
+						this.todoGroups
+					)
+					this.save.emit(todoList)
+				} else {
+					let todoList = await GetTodoList(this.todoListUuid)
+					await todoList.Update(
+						this.todoListName,
+						todoListTimeUnix,
+						this.todoGroups
+					)
+					this.save.emit(todoList)
+				}
+
+				this.modalService.dismissAll()
+				this.modalVisible = false
+			},
+			() => {
+				this.modalVisible = false
 			}
+		)
 
-			this.modalService.dismissAll()
-			this.modalVisible = false
-		}, () => {
-			this.modalVisible = false
-		})
-		
 		this.SetSubmitButtonDisabled()
 	}
-	
-	Reset(date?: number){
-		let d = new Date();
-      if(date){
-         d = new Date(date * 1000);
+
+	Reset(date?: number) {
+		let d = new Date()
+		if (date) {
+			d = new Date(date * 1000)
 		}
-		
-		this.todoListDate = { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate() };
-      this.todoListName = "";
-      this.setDateCheckboxChecked = true;
-		this.todoGroups = [];
-		
+
+		this.todoListDate = {
+			year: d.getFullYear(),
+			month: d.getMonth() + 1,
+			day: d.getDate()
+		}
+		this.todoListName = ""
+		this.setDateCheckboxChecked = true
+		this.todoGroups = []
+
 		this.SetSubmitButtonDisabled()
 	}
-   
-   ToggleSetDateCheckbox(){
-      this.setDateCheckboxChecked = !this.setDateCheckboxChecked;
+
+	ToggleSetDateCheckbox() {
+		this.setDateCheckboxChecked = !this.setDateCheckboxChecked
 	}
-	
+
 	SetSubmitButtonDisabled() {
 		this.submitButtonDisabled = this.todoListName.trim().length < 2
 	}
-}
\ No newline at end of file
+}
diff --git a/src/app/components/todo-list-tree/todo-list-tree.component.html b/src/app/components/todo-list-tree/todo-list-tree.component.html
index dc7a93e..cb21367 100644
--- a/src/app/components/todo-list-tree/todo-list-tree.component.html
+++ b/src/app/components/todo-list-tree/todo-list-tree.component.html
@@ -1,111 +1,277 @@
-<ul style="padding: 0px; margin: 0px">
-	<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" [dragula]="showRoot ? '' : 'todoList'" class="theme-background-color-primary">
-		<mat-tree-node *matTreeNodeDef="let node" [ngClass]="showRoot ? 'theme-background-color-secondary' : 'theme-background-color-primary'" [id]="node.uuid">
-			<!-- Normal todo -->
-			<ng-container *ngIf="!node.newTodo && !node.newTodoList">
-				<div style="margin-bottom: -8px; margin-left: 5px;">
-					<fab-checkbox [checked]="node.completed" (onChange)="ToggleTodoCheckbox(node.uuid)"></fab-checkbox>
-				</div>
-				<label class="ml-2 col-form-label text-color cursor ms-fontSize-14" 
-                  [ngClass]="node.completed ? 'strikethrough' : ''" 
-                  style="user-select: none"
-						(click)="ToggleTodoCheckbox(node.uuid)">
-					{{ node.name }}
-				</label>
-				
-				<!-- Remove button for todos -->
-            <button *ngIf="!node.list && node.completed" type="button" class="close ml-3" aria-label="Delete" (click)="DeleteTodo(node.uuid)">
-               <fa-icon [icon]="faTimes" class="text-color" style="font-size: 15px; display: block"></fa-icon>
-            </button>
-			</ng-container>
-			<!-- New Todo input -->
-			<ng-container *ngIf="node.newTodo">
-				<fab-text-field [(value)]="inputValue" [placeholder]="locale.todoName" (keydown.enter)="ChangeInputToNode(node, false)"></fab-text-field>
-            <button type="button" 
-                  class="btn btn-outline-primary btn-sm ml-2" 
-                  [disabled]="inputValue.length < 2"
-                  (click)="ChangeInputToNode(node, false)">{{ locale.add }}</button>
-            <button type="button" 
-                  class="btn btn-sm ml-2 text-color theme-background-color-primary theme-border-color-primary icon-button" 
-                  style="padding: 5px 8px 3px 8px" 
-                  (click)="RemoveAllInputNodes()"><fab-icon iconName="Cancel"></fab-icon></button>
-			</ng-container>
-			<!-- New Todo list input -->
-			<ng-container *ngIf="node.newTodoList && !node.newTodo">
-            <fab-text-field [(value)]="inputValue" [placeholder]="locale.todoListName" (keydown.enter)="ChangeInputToNode(node, true)"></fab-text-field>
-            <button type="button" 
-                  class="btn btn-outline-primary btn-sm ml-2" 
-                  [disabled]="inputValue.length < 2"
-                  (click)="ChangeInputToNode(node, true)">{{ locale.add }}</button>
-            <button type="button" 
-                  class="btn btn-sm ml-2 text-color theme-background-color-primary theme-border-color-primary icon-button" 
-                  style="padding: 5px 8px 3px 8px" 
-                  (click)="RemoveAllInputNodes()"><fab-icon iconName="Cancel"></fab-icon></button>
-			</ng-container>
-		</mat-tree-node>
-
-		<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild" [ngClass]="showRoot ? 'theme-background-color-secondary' : 'theme-background-color-primary'" [id]="node.uuid">
-			<div class="d-flex" [ngClass]="showRoot ? 'theme-background-color-secondary' : 'theme-background-color-primary'">
-				<button mat-icon-button matTreeNodeToggle class="text-color" style="height: 35px; width: 35px; outline: none;">
-					<fab-icon [iconName]="treeControl.isExpanded(node) ? 'ChevronDownMed' : 'ChevronRightMed'" [styles]="chevronIconStyles"></fab-icon>
-				</button>
-
-				<span class="cursor d-flex" style="margin-top: 7px; user-select: none" matTreeNodeToggle *ngIf="!node.editTodoList">
-					<span class="mr-2" style="margin-top: -2px" *ngIf="node.completedCount == GetNodeChildrenCount(node)">
-						<fab-icon iconName="Accept" [styles]="checkIconStyles"></fab-icon>
-					</span>
-					<span style="font-size: 14px; color: gray" matTreeNodeToggle>{{ node.completedCount }}/{{ GetNodeChildrenCount(node) }}</span>
-				</span>
-
-				<span class="cursor my-auto text-color ml-3" style="user-select: none" matTreeNodeToggle *ngIf="!node.editTodoList">
-					<span class="mr-2">{{ node.name }}</span>
-					<span *ngIf="showRoot">
-						<calendo-todo-group-badge *ngFor="let todoGroup of node.groups" [groupName]="todoGroup"></calendo-todo-group-badge>
-					</span>
-				</span>
-				
-				<!-- Add dropdown -->
-            <div ngbDropdown placement="top-left" style="margin-top: 2px" *ngIf="!node.editTodoList">
-               <button type="button"
-                     class="btn ml-2 text-color theme-background-color-primary theme-border-color-primary icon-button"
-                  	style="height: 30px; width: 30px; padding: 2px 0px 0px 0px;"
-                  	ngbDropdownToggle *ngIf="!readonly">
-                  <fab-icon iconName="Add"></fab-icon>
-               </button>
-
-               <div ngbDropdownMenu class="theme-background-color-tertiary ms-depth-4 ms-motion-slideUpIn">
-                  <button class="dropdown-item text-color cursor" (click)="AddInputToTodoList(node, false)">{{ locale.newTodo }}</button>
-                  <button class="dropdown-item text-color cursor" (click)="AddInputToTodoList(node, true)">{{ locale.newTodoList }}</button>
-               </div>
-            </div>
-				
-				<!-- Options button -->
-				<div ngbDropdown placement="top-left" style="margin-top: 2px" *ngIf="!node.editTodoList">
-					<button type="button"
-							class="btn ml-2 text-color theme-background-color-primary theme-border-color-primary icon-button"
-							style="height: 30px; width: 30px; padding: 2px 0px 0px 0px;" 
-							ngbDropdownToggle *ngIf="!readonly">
-						<fab-icon iconName="More"></fab-icon>
-					</button>
-
-					<div ngbDropdownMenu class="theme-background-color-tertiary ms-depth-4 ms-motion-slideUpIn">
-						<button class="dropdown-item text-color cursor" (click)="EditTodoList(node)">{{ locale.rename }}</button>
-						<button class="dropdown-item text-color cursor" (click)="ShowDeleteTodoListModal(node)">{{ locale.delete }}</button>
-					</div>
-				</div>
-
-				<!-- Edit buttons -->
-				<div *ngIf="node.editTodoList" class="d-flex">
-					<fab-text-field [(value)]="node.name" [placeholder]="locale.todoListName" (keydown.enter)="UpdateTodoList(node)"></fab-text-field>
-					<button type="button" class="btn btn-outline-primary btn-sm ml-2" (click)="UpdateTodoList(node)" [disabled]="node.name.length < 2">{{ locale.save }}</button>
-				</div>
-			</div>
-
-			<div [ngClass]="showRoot ? 'theme-background-color-secondary' : 'theme-background-color-primary'" style="padding-left: 25px;" [style.display]="treeControl.isExpanded(node) ? '' : 'none'" [dragula]="showRoot ? null : 'todoList'">
-				<ng-container matTreeNodeOutlet></ng-container>
-			</div>
-		</mat-nested-tree-node>
-	</mat-tree>
-</ul>
-
-<calendo-delete-todo-list-modal #deleteTodoListModal (remove)="RemoveTodoList($event)"></calendo-delete-todo-list-modal>
\ No newline at end of file
+<ul style="padding: 0px; margin: 0px">
+	<mat-tree
+		[dataSource]="dataSource"
+		[treeControl]="treeControl"
+		[dragula]="showRoot ? '' : 'todoList'"
+		class="theme-background-color-primary"
+	>
+		<mat-tree-node
+			*matTreeNodeDef="let node"
+			[ngClass]="
+				showRoot
+					? 'theme-background-color-secondary'
+					: 'theme-background-color-primary'
+			"
+			[id]="node.uuid"
+		>
+			<!-- Normal todo -->
+			<ng-container *ngIf="!node.newTodo && !node.newTodoList">
+				<div style="margin-bottom: -8px; margin-left: 5px">
+					<fab-checkbox
+						[checked]="node.completed"
+						(onChange)="ToggleTodoCheckbox(node.uuid)"
+					></fab-checkbox>
+				</div>
+				<label
+					class="ml-2 col-form-label text-color cursor ms-fontSize-14"
+					[ngClass]="node.completed ? 'strikethrough' : ''"
+					style="user-select: none"
+					(click)="ToggleTodoCheckbox(node.uuid)"
+				>
+					{{ node.name }}
+				</label>
+
+				<!-- Remove button for todos -->
+				<button
+					*ngIf="!node.list && node.completed"
+					type="button"
+					class="close ml-3"
+					aria-label="Delete"
+					(click)="DeleteTodo(node.uuid)"
+				>
+					<fa-icon
+						[icon]="faTimes"
+						class="text-color"
+						style="font-size: 15px; display: block"
+					></fa-icon>
+				</button>
+			</ng-container>
+			<!-- New Todo input -->
+			<ng-container *ngIf="node.newTodo">
+				<fab-text-field
+					[(value)]="inputValue"
+					[placeholder]="locale.todoName"
+					(keydown.enter)="ChangeInputToNode(node, false)"
+				></fab-text-field>
+				<button
+					type="button"
+					class="btn btn-outline-primary btn-sm ml-2"
+					[disabled]="inputValue.length < 2"
+					(click)="ChangeInputToNode(node, false)"
+				>
+					{{ locale.add }}
+				</button>
+				<button
+					type="button"
+					class="btn btn-sm ml-2 text-color theme-background-color-primary theme-border-color-primary icon-button"
+					style="padding: 5px 8px 3px 8px"
+					(click)="RemoveAllInputNodes()"
+				>
+					<fab-icon iconName="Cancel"></fab-icon>
+				</button>
+			</ng-container>
+			<!-- New Todo list input -->
+			<ng-container *ngIf="node.newTodoList && !node.newTodo">
+				<fab-text-field
+					[(value)]="inputValue"
+					[placeholder]="locale.todoListName"
+					(keydown.enter)="ChangeInputToNode(node, true)"
+				></fab-text-field>
+				<button
+					type="button"
+					class="btn btn-outline-primary btn-sm ml-2"
+					[disabled]="inputValue.length < 2"
+					(click)="ChangeInputToNode(node, true)"
+				>
+					{{ locale.add }}
+				</button>
+				<button
+					type="button"
+					class="btn btn-sm ml-2 text-color theme-background-color-primary theme-border-color-primary icon-button"
+					style="padding: 5px 8px 3px 8px"
+					(click)="RemoveAllInputNodes()"
+				>
+					<fab-icon iconName="Cancel"></fab-icon>
+				</button>
+			</ng-container>
+		</mat-tree-node>
+
+		<mat-nested-tree-node
+			*matTreeNodeDef="let node; when: hasNestedChild"
+			[ngClass]="
+				showRoot
+					? 'theme-background-color-secondary'
+					: 'theme-background-color-primary'
+			"
+			[id]="node.uuid"
+		>
+			<div
+				class="d-flex"
+				[ngClass]="
+					showRoot
+						? 'theme-background-color-secondary'
+						: 'theme-background-color-primary'
+				"
+			>
+				<button
+					mat-icon-button
+					matTreeNodeToggle
+					class="text-color"
+					style="height: 35px; width: 35px; outline: none"
+				>
+					<fab-icon
+						[iconName]="
+							treeControl.isExpanded(node)
+								? 'ChevronDownMed'
+								: 'ChevronRightMed'
+						"
+						[styles]="chevronIconStyles"
+					></fab-icon>
+				</button>
+
+				<span
+					class="cursor d-flex"
+					style="margin-top: 7px; user-select: none"
+					matTreeNodeToggle
+					*ngIf="!node.editTodoList"
+				>
+					<span
+						class="mr-2"
+						style="margin-top: -2px"
+						*ngIf="node.completedCount == GetNodeChildrenCount(node)"
+					>
+						<fab-icon
+							iconName="Accept"
+							[styles]="checkIconStyles"
+						></fab-icon>
+					</span>
+					<span style="font-size: 14px; color: gray" matTreeNodeToggle>
+						{{ node.completedCount }}/{{ GetNodeChildrenCount(node) }}
+					</span>
+				</span>
+
+				<span
+					class="cursor my-auto text-color ml-3"
+					style="user-select: none"
+					matTreeNodeToggle
+					*ngIf="!node.editTodoList"
+				>
+					<span class="mr-2">{{ node.name }}</span>
+					<span *ngIf="showRoot">
+						<calendo-todo-group-badge
+							*ngFor="let todoGroup of node.groups"
+							[groupName]="todoGroup"
+						></calendo-todo-group-badge>
+					</span>
+				</span>
+
+				<!-- Add dropdown -->
+				<div
+					ngbDropdown
+					placement="top-left"
+					style="margin-top: 2px"
+					*ngIf="!node.editTodoList"
+				>
+					<button
+						type="button"
+						class="btn ml-2 text-color theme-background-color-primary theme-border-color-primary icon-button"
+						style="height: 30px; width: 30px; padding: 2px 0px 0px 0px"
+						ngbDropdownToggle
+						*ngIf="!readonly"
+					>
+						<fab-icon iconName="Add"></fab-icon>
+					</button>
+
+					<div
+						ngbDropdownMenu
+						class="theme-background-color-tertiary ms-depth-4 ms-motion-slideUpIn"
+					>
+						<button
+							class="dropdown-item text-color cursor"
+							(click)="AddInputToTodoList(node, false)"
+						>
+							{{ locale.newTodo }}
+						</button>
+						<button
+							class="dropdown-item text-color cursor"
+							(click)="AddInputToTodoList(node, true)"
+						>
+							{{ locale.newTodoList }}
+						</button>
+					</div>
+				</div>
+
+				<!-- Options button -->
+				<div
+					ngbDropdown
+					placement="top-left"
+					style="margin-top: 2px"
+					*ngIf="!node.editTodoList"
+				>
+					<button
+						type="button"
+						class="btn ml-2 text-color theme-background-color-primary theme-border-color-primary icon-button"
+						style="height: 30px; width: 30px; padding: 2px 0px 0px 0px"
+						ngbDropdownToggle
+						*ngIf="!readonly"
+					>
+						<fab-icon iconName="More"></fab-icon>
+					</button>
+
+					<div
+						ngbDropdownMenu
+						class="theme-background-color-tertiary ms-depth-4 ms-motion-slideUpIn"
+					>
+						<button
+							class="dropdown-item text-color cursor"
+							(click)="EditTodoList(node)"
+						>
+							{{ locale.rename }}
+						</button>
+						<button
+							class="dropdown-item text-color cursor"
+							(click)="ShowDeleteTodoListModal(node)"
+						>
+							{{ locale.delete }}
+						</button>
+					</div>
+				</div>
+
+				<!-- Edit buttons -->
+				<div *ngIf="node.editTodoList" class="d-flex">
+					<fab-text-field
+						[(value)]="node.name"
+						[placeholder]="locale.todoListName"
+						(keydown.enter)="UpdateTodoList(node)"
+					></fab-text-field>
+					<button
+						type="button"
+						class="btn btn-outline-primary btn-sm ml-2"
+						(click)="UpdateTodoList(node)"
+						[disabled]="node.name.length < 2"
+					>
+						{{ locale.save }}
+					</button>
+				</div>
+			</div>
+
+			<div
+				[ngClass]="
+					showRoot
+						? 'theme-background-color-secondary'
+						: 'theme-background-color-primary'
+				"
+				style="padding-left: 25px"
+				[style.display]="treeControl.isExpanded(node) ? '' : 'none'"
+				[dragula]="showRoot ? null : 'todoList'"
+			>
+				<ng-container matTreeNodeOutlet></ng-container>
+			</div>
+		</mat-nested-tree-node>
+	</mat-tree>
+</ul>
+
+<calendo-delete-todo-list-modal
+	#deleteTodoListModal
+	(remove)="RemoveTodoList($event)"
+></calendo-delete-todo-list-modal>
diff --git a/src/app/components/todo-list-tree/todo-list-tree.component.ts b/src/app/components/todo-list-tree/todo-list-tree.component.ts
index d064ae0..41f5a0b 100644
--- a/src/app/components/todo-list-tree/todo-list-tree.component.ts
+++ b/src/app/components/todo-list-tree/todo-list-tree.component.ts
@@ -1,519 +1,568 @@
-import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core'
-import { Router } from '@angular/router'
-import { MatTreeNestedDataSource } from '@angular/material/tree'
-import { NestedTreeControl } from '@angular/cdk/tree'
-import { BehaviorSubject, Subscription } from 'rxjs'
-import { IIconStyles } from 'office-ui-fabric-react'
-import { Todo, GetTodo } from '../../models/Todo'
-import { TodoList, GetTodoList } from '../../models/TodoList'
-import { generateUuid } from 'dav-js'
-import { enUS } from '../../../locales/locales'
-import { DataService } from 'src/app/services/data-service'
-import { faTimes } from '@fortawesome/free-solid-svg-icons'
-import { DeleteTodoListModalComponent } from '../delete-todo-list-modal/delete-todo-list-modal.component'
-import { DragulaService } from 'ng2-dragula'
-declare var $: any
-
-@Component({
-	selector: "calendo-todo-list-tree",
-	templateUrl: "./todo-list-tree.component.html"
-})
-export class TodoListTreeComponent{
-	locale = enUS.todoListTree;
-	faTimes = faTimes;
-	dataSource: MatTreeNestedDataSource<TodoNode>;
-	treeControl: NestedTreeControl<TodoNode>;
-	dataChange: BehaviorSubject<TodoNode[]> = new BehaviorSubject<TodoNode[]>([]);
-	subs = new Subscription();    // Holds all subscriptions
-	@ViewChild('deleteTodoListModal', { static: true }) deleteTodoListModal: DeleteTodoListModalComponent;
-	@Input()
-	todoList: TodoList = new TodoList()
-	@Input()
-   showRoot: boolean = false;
-   @Input()
-   readonly: boolean = false;
-   @Output()
-   update = new EventEmitter();
-	rootTodoItem: TodoNode = {
-		uuid: this.todoList ? this.todoList.uuid : "",
-		name: this.todoList ? this.todoList.name : "",
-		list: true,
-		children: [],
-		completed: false,
-		completedCount: 0,
-		newTodo: false,
-		newTodoList: false,
-		editTodoList: false,
-		groups: this.todoList ? this.todoList.groups : [],
-		item: this.todoList
-	}
-	todoItems: TodoNode[] = [];
-	inputValue: string = "";
-	dropEventFired: boolean = false;
-	chevronIconStyles: IIconStyles = {
-		root: {
-         fontSize: 14,
-         marginBottom: 20
-		}
-	}
-	checkIconStyles: IIconStyles = {
-		root: {
-			fontSize: 15,
-			color: "#1da520"
-		}
-	}
-
-	constructor(
-      public dataService: DataService,
-		public router: Router,
-		private dragula: DragulaService
-   ){
-      this.locale = this.dataService.GetLocale().todoListTree;
-		this.dataSource = new MatTreeNestedDataSource();
-		this.treeControl = new NestedTreeControl<TodoNode>((dataNode: TodoNode) => dataNode.children);
-	}
-
-	hasNestedChild = (i: number, nodeData: TodoNode) => { return nodeData.list && !nodeData.newTodoList };
-
-	ngOnInit(){
-		this.subs.add(this.dataChange.subscribe(data => this.dataSource.data = data));
-		this.subs.add(this.dragula.drop().subscribe(async value => await this.HandleDrop(value)));
-
-		this.Init();
-	}
-
-	public Init(){
-		this.AddTodoItems(this.todoList, this.todoItems);
-
-		this.rootTodoItem = {
-			uuid: this.todoList.uuid,
-			name: this.todoList.name,
-			list: true,
-			children: this.todoItems,
-			completed: false,
-			completedCount: 0,
-			newTodo: false,
-			newTodoList: false,
-			editTodoList: false,
-			groups: this.todoList.groups,
-			item: this.todoList
-		}
-		
-		this.LoadTodoListCompletedCount(this.rootTodoItem);
-		this.dataChange.next(this.showRoot ? [this.rootTodoItem] : this.todoItems);
-	}
-
-	ngOnDestroy(){
-		this.subs.unsubscribe();
-	}
-
-	/**
-	 * Finds the node with the given uuid and returns it
-	 * @param uuid The uuid of the node to search for
-	 * @param rootItem The parent in which the node should be searched for
-	 */
-	FindNodeInTree(uuid: string, rootItem: TodoNode) : TodoNode{
-		if(rootItem.uuid == uuid) return rootItem;
-
-		for(let item of rootItem.children){
-			if(item.uuid == uuid){
-				return item;
-			}else if(item.list){
-				let foundItem = this.FindNodeInTree(uuid, item);
-				if(foundItem){
-					return foundItem;
-				}
-			}
-		}
-
-		return null;
-	}
-
-	/**
-	 * Finds the parent of the node with the given uuid and returns it
-	 * @param uuid The uuid of the node of which the parent is searched for
-	 * @param rootItem The parent in which the node should be searched for
-	 */
-	FindParentNodeInTree(uuid: string, rootItem: TodoNode) : TodoNode{
-		for(let item of rootItem.children){
-			if(item.uuid == uuid){
-				return rootItem;
-			}else if(item.list){
-				let foundItem = this.FindParentNodeInTree(uuid, item);
-				if(foundItem){
-					return foundItem;
-				}
-			}
-		}
-
-		return null;
-	}
-
-	AddTodoItems(todoList: TodoList, todoItems: TodoNode[]){
-		// Create a todoNode for each todo and todoList in the TodoList
-		todoList.items.forEach((item: Todo | TodoList) => {
-			if(item instanceof Todo){
-				todoItems.push({
-					uuid: item.uuid,
-					name: item.name,
-					list: false,
-					children: [],
-					completed: item.completed,
-					completedCount: 0,
-					newTodo: false,
-					newTodoList: false,
-					editTodoList: false,
-					groups: [],
-					item: item
-				});
-			}else{
-				let newTodoItems: TodoNode[] = [];
-				this.AddTodoItems(item, newTodoItems);
-
-				todoItems.push({
-					uuid: item.uuid,
-					name: item.name,
-					list: true,
-					children: newTodoItems,
-					completed: false,
-					completedCount: 0,
-					newTodo: false,
-					newTodoList: false,
-					editTodoList: false,
-					groups: [],
-					item
-				});
-			}
-		});
-	}
-
-	ReloadTree(){
-		this.dataChange.next([]);
-      this.dataChange.next(this.showRoot ? [this.rootTodoItem] : this.todoItems);
-      this.LoadTodoListCompletedCount(this.rootTodoItem);
-		this.update.emit();
-	}
-
-	LoadTodoListCompletedCount(rootItem: TodoNode){
-		let todosCompleted: number = 0;
-
-		rootItem.children.forEach((item: TodoNode) => {
-			if(!item.list){
-				// Todo
-				if(item.completed){
-					todosCompleted++;
-				}
-			}else{
-				// Todo list
-				this.LoadTodoListCompletedCount(item);
-				if(item.completedCount == this.GetNodeChildrenCount(item)){
-					todosCompleted++;
-				}
-			}
-		});
-
-		rootItem.completedCount = todosCompleted;
-	}
-
-	GetNodeChildrenCount(node: TodoNode){
-		let children = 0;
-		node.children.forEach(item => !item.newTodo && !item.newTodoList ? children++ : 0 )
-		return children;
-   }
-
-   RemoveAllInputNodes(){
-		this.RemoveInputNodes(this.todoItems);
-		
-		// Update the UI
-		this.inputValue = "";
-		this.dataChange.next([]);
-      this.dataChange.next(this.showRoot ? [this.rootTodoItem] : this.todoItems);
-   }
-
-   RemoveInputNodes(todoNodes: TodoNode[]){
-      let removeNodes: TodoNode[] = [];
-
-      for(let node of todoNodes){
-         if(node.newTodo || node.newTodoList){
-            // Remove the node
-            removeNodes.push(node);
-         }else if(node.list){
-            this.RemoveInputNodes(node.children);
-         }
-		}
-		
-		for(let node of removeNodes){
-			let index = todoNodes.indexOf(node);
-			if(index != -1){
-				todoNodes.splice(index, 1);
-			}
-		}
-   }
-
-	AddInputToTodoList(todo: TodoNode, list: boolean = false){
-		// Remove all input nodes
-		this.RemoveAllInputNodes();
-
-		// Insert the input node
-		let newTodoNode: TodoNode = {
-			uuid: generateUuid(),
-			name: "",
-			list,
-			children: [],
-			completed: false,
-			completedCount: 0,
-			newTodo: !list,
-			newTodoList: list,
-			editTodoList: false,
-			groups: [],
-			item: null
-		}
-		
-		// Add the node at the end of the children
-		todo.children.push(newTodoNode);
-
-		// Update the UI
-		this.dataChange.next([]);
-      this.dataChange.next(this.showRoot ? [this.rootTodoItem] : this.todoItems);
-      this.treeControl.expand(todo);
-
-		// Set focus on the text field
-		setTimeout(() => $(".ms-TextField-field, .field-65").focus(), 1);
-	}
-
-	async ChangeInputToNode(node: TodoNode, list: boolean = false){
-		if(this.inputValue.length < 2) return;
-
-		if(list){
-			node.name = this.inputValue;
-			node.list = true;
-			node.newTodo = false;
-			node.newTodoList = false;
-
-			// Create the todo list
-			let parentNode = this.FindParentNodeInTree(node.uuid, this.rootTodoItem);
-
-			if(parentNode){
-				let todoList = await TodoList.Create(node.name, this.todoList.time, [], [], parentNode.uuid, node.uuid);
-				node.item = todoList;
-
-				await this.UpdateTodoListOrder(parentNode);
-			}
-		}else{
-			node.name = this.inputValue;
-			node.list = false;
-			node.newTodo = false;
-			node.newTodoList = false;
-
-			// Create the todo
-			let parentNode = this.FindParentNodeInTree(node.uuid, this.rootTodoItem);
-			
-			if(parentNode){
-				let todo = await Todo.Create(node.name, false, this.todoList.time, [], parentNode.uuid, null, node.uuid);
-				node.item = todo;
-
-				await this.UpdateTodoListOrder(parentNode);
-			}
-		}
-
-		// Update the count of the completed children in the parent
-		this.LoadTodoListCompletedCount(this.rootTodoItem);
-
-		// Update the UI
-		this.inputValue = "";
-		this.ReloadTree();
-	}
-
-	RemoveNode(uuid: string){
-		let node = this.FindParentNodeInTree(uuid, this.rootTodoItem);
-		if(node){
-			let index = node.children.findIndex(child => child.uuid == uuid);
-			if(index !== -1){
-				node.children.splice(index, 1);
-				this.ReloadTree();
-			}
-		}
-	}
-
-	async HandleDrop(value: {name: string, el: Element, target: Element, source: Element, sibling: Element}){
-		if(this.dropEventFired) return;
-		this.dropEventFired = true;
-
-		if(value.source == value.target){
-			// The item was moved within the list; update the parent element
-			await this.UpdateTodoListByElement(value.el.parentElement);
-		}else{
-			// The item was moved into another list; update the order of the two parent elements
-			// Update the target list
-			await this.UpdateTodoListByElement(value.target);
-
-			// Update the source list
-			await this.UpdateTodoListByElement(value.source);
-
-			// Update the list of the moved item
-			let itemUuid = value.el.id;
-			let itemNode = this.FindNodeInTree(itemUuid, this.rootTodoItem);
-
-			let newListUuid = this.GetListUuidByElement(value.target);
-			await itemNode.item.SetList(newListUuid);
-		}
-
-		this.dropEventFired = false;
-	}
-
-	/**
-	 * Gets the items of the list from the children of the given element and updates it in the database
-	 * @param element The html element which represents the todo list in the DOM
-	 */
-	private async UpdateTodoListByElement(element: Element){
-		// Find the node of the list
-		let parentUuid = this.GetListUuidByElement(element);
-		let parentNode = this.FindNodeInTree(parentUuid, this.rootTodoItem);
-		let newOrderItems: TodoNode[] = [];
-
-		// Get the nodes of the updated todo list
-		let children = element.children;
-
-		for(let i = 0; i < children.length; i++){
-			let child = children.item(i);
-			let uuid = child.id;
-
-			//let item = parentNode.children.find(node => node.uuid == uuid);
-			let item = this.FindNodeInTree(uuid, this.rootTodoItem);
-			if(item) newOrderItems.push(item);
-		}
-
-		// Update the todo list with the new children
-		parentNode.children = newOrderItems;
-
-		// Update the todoItems, if necessary
-		if(parentNode == this.rootTodoItem) this.todoItems = newOrderItems;
-
-		await this.UpdateTodoListOrder(parentNode);
-	}
-
-	/**
-	 * Finds the uuid of the todo list that is represented by the given html element
-	 * @param element The html element which represents the todo list in the DOM
-	 */
-	private GetListUuidByElement(element: Element){
-		let uuid: string = null;
-		if(element.tagName == "DIV"){
-			uuid = element.parentElement.id;
-		}else if(element.tagName == "MAT-TREE"){
-			uuid = this.rootTodoItem.uuid;
-		}else{
-			uuid = element.id;
-		}
-
-		return uuid;
-	}
-
-	async UpdateTodoListOrder(node: TodoNode){
-		if(!node.list || !(node.item instanceof TodoList)) return;
-
-		let items: (Todo | TodoList)[] = [];
-		node.children.forEach((child: TodoNode) => {
-			if(child.item) items.push(child.item);
-		});
-
-		await node.item.SetItems(items);
-		this.LoadTodoListCompletedCount(this.rootTodoItem);
-      this.update.emit();
-	}
-
-	//#region Event handlers
-	async ToggleTodoCheckbox(uuid: string){
-		// Find the todo in the tree and change the completed value
-		let item = this.FindNodeInTree(uuid, this.rootTodoItem);
-
-		if(item){
-			item.completed = !item.completed;
-			this.LoadTodoListCompletedCount(this.rootTodoItem);
-
-			// Update the todo
-			let todo = await GetTodo(uuid);
-
-			if(todo){
-            await todo.SetCompleted(item.completed);
-				this.update.emit();
-			}
-		}
-	}
-
-	async DeleteTodo(uuid: string){
-		// Get the todo and delete it
-		let todo = await GetTodo(uuid);
-		await todo.Delete();
-
-		// Remove the todo from the todo list
-		let parentNode = this.FindParentNodeInTree(uuid, this.rootTodoItem);
-
-		// Remove the todo from the tree
-		this.RemoveNode(uuid);
-
-		if(parentNode){
-			await this.UpdateTodoListOrder(parentNode);
-		}
-	}
-
-	EditTodoList(node: TodoNode){
-		// Change the node to input
-		node.editTodoList = true;
-		this.ReloadTree();
-
-		// Set focus on the text field
-		setTimeout(() => $(".ms-TextField-field, .field-65").focus(), 1)
-	}
-
-	async UpdateTodoList(node: TodoNode){
-		// Save the new name of the todo list
-		let list = await GetTodoList(node.uuid);
-		await list.SetName(node.name);
-
-		// Remove the input
-		node.editTodoList = false;
-		this.ReloadTree();
-	}
-
-	async ShowDeleteTodoListModal(node: TodoNode){
-		// Get the todo list
-		let todoList = await GetTodoList(node.uuid)
-		if(!todoList) return
-
-		if (todoList.items.length == 0) {
-			// Delete the todo list immediately
-			await this.RemoveTodoList(todoList)
-		} else {
-			// Show the confirmation modal
-			this.deleteTodoListModal.Show(todoList)
-		}
-	}
-
-	async RemoveTodoList(todoList: TodoList){
-		// Remove the todo list from the parent todo list
-		let parentNode = this.FindParentNodeInTree(todoList.uuid, this.rootTodoItem);
-
-		// Remove the todo list from the tree
-		this.RemoveNode(todoList.uuid);
-
-		if(parentNode){
-			await this.UpdateTodoListOrder(parentNode);
-		}
-   }
-	//#endregion
-}
-
-interface TodoNode{
-	uuid: string;
-	name: string;
-	list: boolean;
-	children: TodoNode[];
-	completed: boolean;
-	completedCount: number;
-	newTodo: boolean;
-	newTodoList: boolean;
-	editTodoList: boolean;
-	groups: string[];
-	item: Todo | TodoList;
-}
\ No newline at end of file
+import {
+	Component,
+	Input,
+	Output,
+	EventEmitter,
+	ViewChild
+} from "@angular/core"
+import { Router } from "@angular/router"
+import { MatTreeNestedDataSource } from "@angular/material/tree"
+import { NestedTreeControl } from "@angular/cdk/tree"
+import { BehaviorSubject, Subscription } from "rxjs"
+import { IIconStyles } from "office-ui-fabric-react"
+import { Todo, GetTodo } from "../../models/Todo"
+import { TodoList, GetTodoList } from "../../models/TodoList"
+import { generateUuid } from "dav-js"
+import { enUS } from "../../../locales/locales"
+import { DataService } from "src/app/services/data-service"
+import { faTimes } from "@fortawesome/free-solid-svg-icons"
+import { DeleteTodoListModalComponent } from "../delete-todo-list-modal/delete-todo-list-modal.component"
+import { DragulaService } from "ng2-dragula"
+declare var $: any
+
+@Component({
+	selector: "calendo-todo-list-tree",
+	templateUrl: "./todo-list-tree.component.html"
+})
+export class TodoListTreeComponent {
+	locale = enUS.todoListTree
+	faTimes = faTimes
+	dataSource: MatTreeNestedDataSource<TodoNode>
+	treeControl: NestedTreeControl<TodoNode>
+	dataChange: BehaviorSubject<TodoNode[]> = new BehaviorSubject<TodoNode[]>([])
+	subs = new Subscription() // Holds all subscriptions
+	@ViewChild("deleteTodoListModal", { static: true })
+	deleteTodoListModal: DeleteTodoListModalComponent
+	@Input()
+	todoList: TodoList = new TodoList()
+	@Input()
+	showRoot: boolean = false
+	@Input()
+	readonly: boolean = false
+	@Output()
+	update = new EventEmitter()
+	rootTodoItem: TodoNode = {
+		uuid: this.todoList ? this.todoList.uuid : "",
+		name: this.todoList ? this.todoList.name : "",
+		list: true,
+		children: [],
+		completed: false,
+		completedCount: 0,
+		newTodo: false,
+		newTodoList: false,
+		editTodoList: false,
+		groups: this.todoList ? this.todoList.groups : [],
+		item: this.todoList
+	}
+	todoItems: TodoNode[] = []
+	inputValue: string = ""
+	dropEventFired: boolean = false
+	chevronIconStyles: IIconStyles = {
+		root: {
+			fontSize: 14,
+			marginBottom: 20
+		}
+	}
+	checkIconStyles: IIconStyles = {
+		root: {
+			fontSize: 15,
+			color: "#1da520"
+		}
+	}
+
+	constructor(
+		public dataService: DataService,
+		public router: Router,
+		private dragula: DragulaService
+	) {
+		this.locale = this.dataService.GetLocale().todoListTree
+		this.dataSource = new MatTreeNestedDataSource()
+		this.treeControl = new NestedTreeControl<TodoNode>(
+			(dataNode: TodoNode) => dataNode.children
+		)
+	}
+
+	hasNestedChild = (i: number, nodeData: TodoNode) => {
+		return nodeData.list && !nodeData.newTodoList
+	}
+
+	ngOnInit() {
+		this.subs.add(
+			this.dataChange.subscribe(data => (this.dataSource.data = data))
+		)
+		this.subs.add(
+			this.dragula
+				.drop()
+				.subscribe(async value => await this.HandleDrop(value))
+		)
+
+		this.Init()
+	}
+
+	public Init() {
+		this.AddTodoItems(this.todoList, this.todoItems)
+
+		this.rootTodoItem = {
+			uuid: this.todoList.uuid,
+			name: this.todoList.name,
+			list: true,
+			children: this.todoItems,
+			completed: false,
+			completedCount: 0,
+			newTodo: false,
+			newTodoList: false,
+			editTodoList: false,
+			groups: this.todoList.groups,
+			item: this.todoList
+		}
+
+		this.LoadTodoListCompletedCount(this.rootTodoItem)
+		this.dataChange.next(this.showRoot ? [this.rootTodoItem] : this.todoItems)
+	}
+
+	ngOnDestroy() {
+		this.subs.unsubscribe()
+	}
+
+	/**
+	 * Finds the node with the given uuid and returns it
+	 * @param uuid The uuid of the node to search for
+	 * @param rootItem The parent in which the node should be searched for
+	 */
+	FindNodeInTree(uuid: string, rootItem: TodoNode): TodoNode {
+		if (rootItem.uuid == uuid) return rootItem
+
+		for (let item of rootItem.children) {
+			if (item.uuid == uuid) {
+				return item
+			} else if (item.list) {
+				let foundItem = this.FindNodeInTree(uuid, item)
+				if (foundItem) {
+					return foundItem
+				}
+			}
+		}
+
+		return null
+	}
+
+	/**
+	 * Finds the parent of the node with the given uuid and returns it
+	 * @param uuid The uuid of the node of which the parent is searched for
+	 * @param rootItem The parent in which the node should be searched for
+	 */
+	FindParentNodeInTree(uuid: string, rootItem: TodoNode): TodoNode {
+		for (let item of rootItem.children) {
+			if (item.uuid == uuid) {
+				return rootItem
+			} else if (item.list) {
+				let foundItem = this.FindParentNodeInTree(uuid, item)
+				if (foundItem) {
+					return foundItem
+				}
+			}
+		}
+
+		return null
+	}
+
+	AddTodoItems(todoList: TodoList, todoItems: TodoNode[]) {
+		// Create a todoNode for each todo and todoList in the TodoList
+		todoList.items.forEach((item: Todo | TodoList) => {
+			if (item instanceof Todo) {
+				todoItems.push({
+					uuid: item.uuid,
+					name: item.name,
+					list: false,
+					children: [],
+					completed: item.completed,
+					completedCount: 0,
+					newTodo: false,
+					newTodoList: false,
+					editTodoList: false,
+					groups: [],
+					item: item
+				})
+			} else {
+				let newTodoItems: TodoNode[] = []
+				this.AddTodoItems(item, newTodoItems)
+
+				todoItems.push({
+					uuid: item.uuid,
+					name: item.name,
+					list: true,
+					children: newTodoItems,
+					completed: false,
+					completedCount: 0,
+					newTodo: false,
+					newTodoList: false,
+					editTodoList: false,
+					groups: [],
+					item
+				})
+			}
+		})
+	}
+
+	ReloadTree() {
+		this.dataChange.next([])
+		this.dataChange.next(this.showRoot ? [this.rootTodoItem] : this.todoItems)
+		this.LoadTodoListCompletedCount(this.rootTodoItem)
+		this.update.emit()
+	}
+
+	LoadTodoListCompletedCount(rootItem: TodoNode) {
+		let todosCompleted: number = 0
+
+		rootItem.children.forEach((item: TodoNode) => {
+			if (!item.list) {
+				// Todo
+				if (item.completed) {
+					todosCompleted++
+				}
+			} else {
+				// Todo list
+				this.LoadTodoListCompletedCount(item)
+				if (item.completedCount == this.GetNodeChildrenCount(item)) {
+					todosCompleted++
+				}
+			}
+		})
+
+		rootItem.completedCount = todosCompleted
+	}
+
+	GetNodeChildrenCount(node: TodoNode) {
+		let children = 0
+		node.children.forEach(item =>
+			!item.newTodo && !item.newTodoList ? children++ : 0
+		)
+		return children
+	}
+
+	RemoveAllInputNodes() {
+		this.RemoveInputNodes(this.todoItems)
+
+		// Update the UI
+		this.inputValue = ""
+		this.dataChange.next([])
+		this.dataChange.next(this.showRoot ? [this.rootTodoItem] : this.todoItems)
+	}
+
+	RemoveInputNodes(todoNodes: TodoNode[]) {
+		let removeNodes: TodoNode[] = []
+
+		for (let node of todoNodes) {
+			if (node.newTodo || node.newTodoList) {
+				// Remove the node
+				removeNodes.push(node)
+			} else if (node.list) {
+				this.RemoveInputNodes(node.children)
+			}
+		}
+
+		for (let node of removeNodes) {
+			let index = todoNodes.indexOf(node)
+			if (index != -1) {
+				todoNodes.splice(index, 1)
+			}
+		}
+	}
+
+	AddInputToTodoList(todo: TodoNode, list: boolean = false) {
+		// Remove all input nodes
+		this.RemoveAllInputNodes()
+
+		// Insert the input node
+		let newTodoNode: TodoNode = {
+			uuid: generateUuid(),
+			name: "",
+			list,
+			children: [],
+			completed: false,
+			completedCount: 0,
+			newTodo: !list,
+			newTodoList: list,
+			editTodoList: false,
+			groups: [],
+			item: null
+		}
+
+		// Add the node at the end of the children
+		todo.children.push(newTodoNode)
+
+		// Update the UI
+		this.dataChange.next([])
+		this.dataChange.next(this.showRoot ? [this.rootTodoItem] : this.todoItems)
+		this.treeControl.expand(todo)
+
+		// Set focus on the text field
+		setTimeout(() => $(".ms-TextField-field, .field-65").focus(), 1)
+	}
+
+	async ChangeInputToNode(node: TodoNode, list: boolean = false) {
+		if (this.inputValue.length < 2) return
+
+		if (list) {
+			node.name = this.inputValue
+			node.list = true
+			node.newTodo = false
+			node.newTodoList = false
+
+			// Create the todo list
+			let parentNode = this.FindParentNodeInTree(
+				node.uuid,
+				this.rootTodoItem
+			)
+
+			if (parentNode) {
+				let todoList = await TodoList.Create(
+					node.name,
+					this.todoList.time,
+					[],
+					[],
+					parentNode.uuid,
+					node.uuid
+				)
+				node.item = todoList
+
+				await this.UpdateTodoListOrder(parentNode)
+			}
+		} else {
+			node.name = this.inputValue
+			node.list = false
+			node.newTodo = false
+			node.newTodoList = false
+
+			// Create the todo
+			let parentNode = this.FindParentNodeInTree(
+				node.uuid,
+				this.rootTodoItem
+			)
+
+			if (parentNode) {
+				let todo = await Todo.Create(
+					node.name,
+					false,
+					this.todoList.time,
+					[],
+					parentNode.uuid,
+					null,
+					node.uuid
+				)
+				node.item = todo
+
+				await this.UpdateTodoListOrder(parentNode)
+			}
+		}
+
+		// Update the count of the completed children in the parent
+		this.LoadTodoListCompletedCount(this.rootTodoItem)
+
+		// Update the UI
+		this.inputValue = ""
+		this.ReloadTree()
+	}
+
+	RemoveNode(uuid: string) {
+		let node = this.FindParentNodeInTree(uuid, this.rootTodoItem)
+		if (node) {
+			let index = node.children.findIndex(child => child.uuid == uuid)
+			if (index !== -1) {
+				node.children.splice(index, 1)
+				this.ReloadTree()
+			}
+		}
+	}
+
+	async HandleDrop(value: {
+		name: string
+		el: Element
+		target: Element
+		source: Element
+		sibling: Element
+	}) {
+		if (this.dropEventFired) return
+		this.dropEventFired = true
+
+		if (value.source == value.target) {
+			// The item was moved within the list; update the parent element
+			await this.UpdateTodoListByElement(value.el.parentElement)
+		} else {
+			// The item was moved into another list; update the order of the two parent elements
+			// Update the target list
+			await this.UpdateTodoListByElement(value.target)
+
+			// Update the source list
+			await this.UpdateTodoListByElement(value.source)
+
+			// Update the list of the moved item
+			let itemUuid = value.el.id
+			let itemNode = this.FindNodeInTree(itemUuid, this.rootTodoItem)
+
+			let newListUuid = this.GetListUuidByElement(value.target)
+			await itemNode.item.SetList(newListUuid)
+		}
+
+		this.dropEventFired = false
+	}
+
+	/**
+	 * Gets the items of the list from the children of the given element and updates it in the database
+	 * @param element The html element which represents the todo list in the DOM
+	 */
+	private async UpdateTodoListByElement(element: Element) {
+		// Find the node of the list
+		let parentUuid = this.GetListUuidByElement(element)
+		let parentNode = this.FindNodeInTree(parentUuid, this.rootTodoItem)
+		let newOrderItems: TodoNode[] = []
+
+		// Get the nodes of the updated todo list
+		let children = element.children
+
+		for (let i = 0; i < children.length; i++) {
+			let child = children.item(i)
+			let uuid = child.id
+
+			//let item = parentNode.children.find(node => node.uuid == uuid);
+			let item = this.FindNodeInTree(uuid, this.rootTodoItem)
+			if (item) newOrderItems.push(item)
+		}
+
+		// Update the todo list with the new children
+		parentNode.children = newOrderItems
+
+		// Update the todoItems, if necessary
+		if (parentNode == this.rootTodoItem) this.todoItems = newOrderItems
+
+		await this.UpdateTodoListOrder(parentNode)
+	}
+
+	/**
+	 * Finds the uuid of the todo list that is represented by the given html element
+	 * @param element The html element which represents the todo list in the DOM
+	 */
+	private GetListUuidByElement(element: Element) {
+		let uuid: string = null
+		if (element.tagName == "DIV") {
+			uuid = element.parentElement.id
+		} else if (element.tagName == "MAT-TREE") {
+			uuid = this.rootTodoItem.uuid
+		} else {
+			uuid = element.id
+		}
+
+		return uuid
+	}
+
+	async UpdateTodoListOrder(node: TodoNode) {
+		if (!node.list || !(node.item instanceof TodoList)) return
+
+		let items: (Todo | TodoList)[] = []
+		node.children.forEach((child: TodoNode) => {
+			if (child.item) items.push(child.item)
+		})
+
+		await node.item.SetItems(items)
+		this.LoadTodoListCompletedCount(this.rootTodoItem)
+		this.update.emit()
+	}
+
+	//#region Event handlers
+	async ToggleTodoCheckbox(uuid: string) {
+		// Find the todo in the tree and change the completed value
+		let item = this.FindNodeInTree(uuid, this.rootTodoItem)
+
+		if (item) {
+			item.completed = !item.completed
+			this.LoadTodoListCompletedCount(this.rootTodoItem)
+
+			// Update the todo
+			let todo = await GetTodo(uuid)
+
+			if (todo) {
+				await todo.SetCompleted(item.completed)
+				this.update.emit()
+			}
+		}
+	}
+
+	async DeleteTodo(uuid: string) {
+		// Get the todo and delete it
+		let todo = await GetTodo(uuid)
+		await todo.Delete()
+
+		// Remove the todo from the todo list
+		let parentNode = this.FindParentNodeInTree(uuid, this.rootTodoItem)
+
+		// Remove the todo from the tree
+		this.RemoveNode(uuid)
+
+		if (parentNode) {
+			await this.UpdateTodoListOrder(parentNode)
+		}
+	}
+
+	EditTodoList(node: TodoNode) {
+		// Change the node to input
+		node.editTodoList = true
+		this.ReloadTree()
+
+		// Set focus on the text field
+		setTimeout(() => $(".ms-TextField-field, .field-65").focus(), 1)
+	}
+
+	async UpdateTodoList(node: TodoNode) {
+		// Save the new name of the todo list
+		let list = await GetTodoList(node.uuid)
+		await list.SetName(node.name)
+
+		// Remove the input
+		node.editTodoList = false
+		this.ReloadTree()
+	}
+
+	async ShowDeleteTodoListModal(node: TodoNode) {
+		// Get the todo list
+		let todoList = await GetTodoList(node.uuid)
+		if (!todoList) return
+
+		if (todoList.items.length == 0) {
+			// Delete the todo list immediately
+			await this.RemoveTodoList(todoList)
+		} else {
+			// Show the confirmation modal
+			this.deleteTodoListModal.Show(todoList)
+		}
+	}
+
+	async RemoveTodoList(todoList: TodoList) {
+		// Remove the todo list from the parent todo list
+		let parentNode = this.FindParentNodeInTree(
+			todoList.uuid,
+			this.rootTodoItem
+		)
+
+		// Remove the todo list from the tree
+		this.RemoveNode(todoList.uuid)
+
+		if (parentNode) {
+			await this.UpdateTodoListOrder(parentNode)
+		}
+	}
+	//#endregion
+}
+
+interface TodoNode {
+	uuid: string
+	name: string
+	list: boolean
+	children: TodoNode[]
+	completed: boolean
+	completedCount: number
+	newTodo: boolean
+	newTodoList: boolean
+	editTodoList: boolean
+	groups: string[]
+	item: Todo | TodoList
+}
diff --git a/src/app/components/user-menu/user-menu.component.html b/src/app/components/user-menu/user-menu.component.html
index 8880738..f6c35f5 100644
--- a/src/app/components/user-menu/user-menu.component.html
+++ b/src/app/components/user-menu/user-menu.component.html
@@ -1,12 +1,34 @@
-<div ngbDropdown class="d-inline-block default-font" placement="bottom-right">
-   <button class="btn btn-primary" ngbDropdownToggle id="user-menu-dropdown">
-      <span *ngIf="!dataService.dav.isLoggedIn"><fa-icon [icon]="faUserCircle" style="font-size: 25px;"></fa-icon></span>
-      <img *ngIf="dataService.dav.isLoggedIn" [src]="dataService.dav.user.ProfileImage" class="rounded-circle" height="32" width="32" />
-   </button>
-   <div ngbDropdownMenu aria-labelledby="user-menu-dropdown" class="theme-background-color-tertiary ms-depth-4 ms-motion-slideDownIn">
-      <p *ngIf="dataService.dav.isLoggedIn" class="font-weight-light my-auto py-1 text-color" style="font-size: 16px; margin-left: 23px;">{{ dataService.dav.user.FirstName }}</p>
-		<div class="dropdown-divider" *ngIf="dataService.dav.isLoggedIn"></div>
-		<button class="dropdown-item text-color cursor" routerLink="/account">{{ locale.account }}</button>
-      <button class="dropdown-item text-color cursor" routerLink="/settings">{{ locale.settings }}</button>
-   </div>
-</div>
\ No newline at end of file
+<div ngbDropdown class="d-inline-block default-font" placement="bottom-right">
+	<button class="btn btn-primary" ngbDropdownToggle id="user-menu-dropdown">
+		<span *ngIf="!dataService.dav.isLoggedIn">
+			<fa-icon [icon]="faUserCircle" style="font-size: 25px"></fa-icon>
+		</span>
+		<img
+			*ngIf="dataService.dav.isLoggedIn"
+			[src]="dataService.dav.user.ProfileImage"
+			class="rounded-circle"
+			height="32"
+			width="32"
+		/>
+	</button>
+	<div
+		ngbDropdownMenu
+		aria-labelledby="user-menu-dropdown"
+		class="theme-background-color-tertiary ms-depth-4 ms-motion-slideDownIn"
+	>
+		<p
+			*ngIf="dataService.dav.isLoggedIn"
+			class="font-weight-light my-auto py-1 text-color"
+			style="font-size: 16px; margin-left: 23px"
+		>
+			{{ dataService.dav.user.FirstName }}
+		</p>
+		<div class="dropdown-divider" *ngIf="dataService.dav.isLoggedIn"></div>
+		<button class="dropdown-item text-color cursor" routerLink="/account">
+			{{ locale.account }}
+		</button>
+		<button class="dropdown-item text-color cursor" routerLink="/settings">
+			{{ locale.settings }}
+		</button>
+	</div>
+</div>
diff --git a/src/app/components/user-menu/user-menu.component.ts b/src/app/components/user-menu/user-menu.component.ts
index 624f7ab..4b0c503 100644
--- a/src/app/components/user-menu/user-menu.component.ts
+++ b/src/app/components/user-menu/user-menu.component.ts
@@ -1,30 +1,30 @@
-import { Component } from '@angular/core'
-import { enUS } from '../../../locales/locales'
-import { ActivatedRoute } from '@angular/router'
-import { Dav } from 'dav-js'
-import { DataService } from '../../services/data-service'
-import { faUserCircle } from '@fortawesome/free-solid-svg-icons'
-
-@Component({
-	selector: "calendo-user-menu",
-	templateUrl: "./user-menu.component.html"
-})
-export class UserMenuComponent {
-	locale = enUS.userMenu
-	faUserCircle = faUserCircle
-
-	constructor(
-		private activatedRoute: ActivatedRoute,
-		public dataService: DataService
-	) {
-		this.locale = this.dataService.GetLocale().userMenu
-
-		this.activatedRoute.queryParams.subscribe(async params => {
-			if (params["accessToken"]) {
-				// Login with the access token
-				await Dav.Login(params["accessToken"])
-				window.location.href = "/"
-			}
-		})
-	}
-}
\ No newline at end of file
+import { Component } from "@angular/core"
+import { enUS } from "../../../locales/locales"
+import { ActivatedRoute } from "@angular/router"
+import { Dav } from "dav-js"
+import { DataService } from "../../services/data-service"
+import { faUserCircle } from "@fortawesome/free-solid-svg-icons"
+
+@Component({
+	selector: "calendo-user-menu",
+	templateUrl: "./user-menu.component.html"
+})
+export class UserMenuComponent {
+	locale = enUS.userMenu
+	faUserCircle = faUserCircle
+
+	constructor(
+		private activatedRoute: ActivatedRoute,
+		public dataService: DataService
+	) {
+		this.locale = this.dataService.GetLocale().userMenu
+
+		this.activatedRoute.queryParams.subscribe(async params => {
+			if (params["accessToken"]) {
+				// Login with the access token
+				await Dav.Login(params["accessToken"])
+				window.location.href = "/"
+			}
+		})
+	}
+}
diff --git a/src/app/models/Appointment.ts b/src/app/models/Appointment.ts
index d19e55f..b57e9e8 100644
--- a/src/app/models/Appointment.ts
+++ b/src/app/models/Appointment.ts
@@ -1,161 +1,211 @@
-import { TableObject, GetTableObject, GetAllTableObjects, GetNotification } from 'dav-js'
-import { environment } from '../../environments/environment'
-
-export class Appointment {
-	public uuid: string = null
-	public name: string = ""
-	public start: number = 0
-	public end: number = 0
-	public allday: boolean = true
-	public color: string = ""
-	public notificationUuid: string = null
-
-	constructor(
-		uuid: string,
-		name: string,
-		start?: number,
-		end?: number,
-		allday?: boolean,
-		color?: string,
-		notificationUuid?: string
-	) {
-		this.uuid = uuid
-		this.name = name ? name : ""
-		this.start = start ? start : 0
-		this.end = end ? end : 0
-		this.allday = allday == null ? true : allday
-		this.color = color ? color : ""
-		this.notificationUuid = notificationUuid
-	}
-
-	public static async Create(name: string, start: number = 0, end: number = 0, allday: boolean = true, color: string = "", notificationUuid: string = null): Promise<Appointment> {
-		let appointment = new Appointment(null, name, start, end, allday, color, notificationUuid)
-		await appointment.Save()
-		return appointment
-	}
-
-	async Update(name: string, start: number, end: number, allday: boolean, color: string, notificationUuid: string) {
-		this.name = name
-		this.start = start
-		this.end = end
-		this.allday = allday
-		this.color = color
-		this.notificationUuid = notificationUuid
-		await this.Save()
-	}
-
-	async Delete() {
-		let tableObject = await GetTableObject(this.uuid)
-		if (tableObject == null) return
-
-		if (this.notificationUuid) {
-			// Delete the notification
-			let notification = await GetNotification(this.notificationUuid)
-
-			if (notification != null) {
-				await notification.Delete()
-			}
-		}
-
-		await tableObject.Delete()
-	}
-
-	private async Save() {
-		let tableObject = await GetTableObject(this.uuid)
-
-		if (!tableObject) {
-			// Create the table object
-			tableObject = new TableObject()
-			tableObject.TableId = environment.appointmentTableId
-			this.uuid = tableObject.Uuid
-		}
-
-		// Set the property values
-		let properties: { name: string, value: string }[] = [
-			{ name: environment.appointmentNameKey, value: this.name },
-			{ name: environment.appointmentStartKey, value: this.start.toString() },
-			{ name: environment.appointmentEndKey, value: this.end.toString() },
-			{ name: environment.appointmentAllDayKey, value: this.allday.toString() },
-			{ name: environment.appointmentColorKey, value: this.color }
-		]
-
-		if (this.notificationUuid) {
-			properties.push({
-				name: environment.notificationUuidKey,
-				value: this.notificationUuid
-			})
-		}
-
-		await tableObject.SetPropertyValues(properties)
-	}
-}
-
-export async function GetAppointment(uuid: string): Promise<Appointment> {
-	var tableObject = await GetTableObject(uuid)
-
-	if (tableObject) {
-		var appointment = ConvertTableObjectToAppointment(tableObject)
-
-		if (appointment) {
-			return appointment
-		}
-	}
-
-	return null
-}
-
-export async function GetAllAppointments(): Promise<Appointment[]> {
-	var tableObjects = await GetAllTableObjects(environment.appointmentTableId, false)
-	var appointments: Appointment[] = []
-
-	tableObjects.forEach((tableObject: TableObject) => {
-		var appointment = ConvertTableObjectToAppointment(tableObject)
-
-		if (appointment) {
-			appointments.push(appointment)
-		}
-	})
-
-	return appointments
-}
-
-export function ConvertTableObjectToAppointment(tableObject: TableObject): Appointment {
-	if (tableObject.TableId != environment.appointmentTableId) return null
-
-	let name = tableObject.GetPropertyValue(environment.appointmentNameKey) as string
-
-	let allDay: boolean = false
-	let allDayString = tableObject.GetPropertyValue(environment.appointmentAllDayKey) as string
-	if (allDayString != null) {
-		allDay = allDayString.toLowerCase() == "true"
-	}
-
-	let start: number = 0
-	let startString = tableObject.GetPropertyValue(environment.appointmentStartKey) as string
-	if (startString != null) {
-		start = +startString
-	}
-
-	let end: number = 0
-	let endString = tableObject.GetPropertyValue(environment.appointmentEndKey) as string
-	if (endString != null) {
-		end = +endString
-	}
-
-	let color = tableObject.GetPropertyValue(environment.appointmentColorKey) as string
-	if (color == null) {
-		color = environment.appointmentDefaultColor
-	}
-
-	let notificationUuid = tableObject.GetPropertyValue(environment.notificationUuidKey) as string
-
-	return new Appointment(
-		tableObject.Uuid,
-		name,
-		start,
-		end,
-		allDay,
-		color,
-		notificationUuid
-	)
-}
\ No newline at end of file
+import {
+	TableObject,
+	GetTableObject,
+	GetAllTableObjects,
+	GetNotification
+} from "dav-js"
+import { environment } from "../../environments/environment"
+
+export class Appointment {
+	public uuid: string = null
+	public name: string = ""
+	public start: number = 0
+	public end: number = 0
+	public allday: boolean = true
+	public color: string = ""
+	public notificationUuid: string = null
+
+	constructor(
+		uuid: string,
+		name: string,
+		start?: number,
+		end?: number,
+		allday?: boolean,
+		color?: string,
+		notificationUuid?: string
+	) {
+		this.uuid = uuid
+		this.name = name ? name : ""
+		this.start = start ? start : 0
+		this.end = end ? end : 0
+		this.allday = allday == null ? true : allday
+		this.color = color ? color : ""
+		this.notificationUuid = notificationUuid
+	}
+
+	public static async Create(
+		name: string,
+		start: number = 0,
+		end: number = 0,
+		allday: boolean = true,
+		color: string = "",
+		notificationUuid: string = null
+	): Promise<Appointment> {
+		let appointment = new Appointment(
+			null,
+			name,
+			start,
+			end,
+			allday,
+			color,
+			notificationUuid
+		)
+		await appointment.Save()
+		return appointment
+	}
+
+	async Update(
+		name: string,
+		start: number,
+		end: number,
+		allday: boolean,
+		color: string,
+		notificationUuid: string
+	) {
+		this.name = name
+		this.start = start
+		this.end = end
+		this.allday = allday
+		this.color = color
+		this.notificationUuid = notificationUuid
+		await this.Save()
+	}
+
+	async Delete() {
+		let tableObject = await GetTableObject(this.uuid)
+		if (tableObject == null) return
+
+		if (this.notificationUuid) {
+			// Delete the notification
+			let notification = await GetNotification(this.notificationUuid)
+
+			if (notification != null) {
+				await notification.Delete()
+			}
+		}
+
+		await tableObject.Delete()
+	}
+
+	private async Save() {
+		let tableObject = await GetTableObject(this.uuid)
+
+		if (!tableObject) {
+			// Create the table object
+			tableObject = new TableObject()
+			tableObject.TableId = environment.appointmentTableId
+			this.uuid = tableObject.Uuid
+		}
+
+		// Set the property values
+		let properties: { name: string; value: string }[] = [
+			{ name: environment.appointmentNameKey, value: this.name },
+			{
+				name: environment.appointmentStartKey,
+				value: this.start.toString()
+			},
+			{ name: environment.appointmentEndKey, value: this.end.toString() },
+			{
+				name: environment.appointmentAllDayKey,
+				value: this.allday.toString()
+			},
+			{ name: environment.appointmentColorKey, value: this.color }
+		]
+
+		if (this.notificationUuid) {
+			properties.push({
+				name: environment.notificationUuidKey,
+				value: this.notificationUuid
+			})
+		}
+
+		await tableObject.SetPropertyValues(properties)
+	}
+}
+
+export async function GetAppointment(uuid: string): Promise<Appointment> {
+	var tableObject = await GetTableObject(uuid)
+
+	if (tableObject) {
+		var appointment = ConvertTableObjectToAppointment(tableObject)
+
+		if (appointment) {
+			return appointment
+		}
+	}
+
+	return null
+}
+
+export async function GetAllAppointments(): Promise<Appointment[]> {
+	var tableObjects = await GetAllTableObjects(
+		environment.appointmentTableId,
+		false
+	)
+	var appointments: Appointment[] = []
+
+	tableObjects.forEach((tableObject: TableObject) => {
+		var appointment = ConvertTableObjectToAppointment(tableObject)
+
+		if (appointment) {
+			appointments.push(appointment)
+		}
+	})
+
+	return appointments
+}
+
+export function ConvertTableObjectToAppointment(
+	tableObject: TableObject
+): Appointment {
+	if (tableObject.TableId != environment.appointmentTableId) return null
+
+	let name = tableObject.GetPropertyValue(
+		environment.appointmentNameKey
+	) as string
+
+	let allDay: boolean = false
+	let allDayString = tableObject.GetPropertyValue(
+		environment.appointmentAllDayKey
+	) as string
+	if (allDayString != null) {
+		allDay = allDayString.toLowerCase() == "true"
+	}
+
+	let start: number = 0
+	let startString = tableObject.GetPropertyValue(
+		environment.appointmentStartKey
+	) as string
+	if (startString != null) {
+		start = +startString
+	}
+
+	let end: number = 0
+	let endString = tableObject.GetPropertyValue(
+		environment.appointmentEndKey
+	) as string
+	if (endString != null) {
+		end = +endString
+	}
+
+	let color = tableObject.GetPropertyValue(
+		environment.appointmentColorKey
+	) as string
+	if (color == null) {
+		color = environment.appointmentDefaultColor
+	}
+
+	let notificationUuid = tableObject.GetPropertyValue(
+		environment.notificationUuidKey
+	) as string
+
+	return new Appointment(
+		tableObject.Uuid,
+		name,
+		start,
+		end,
+		allDay,
+		color,
+		notificationUuid
+	)
+}
diff --git a/src/app/models/Todo.ts b/src/app/models/Todo.ts
index 5223a62..fb59dbf 100644
--- a/src/app/models/Todo.ts
+++ b/src/app/models/Todo.ts
@@ -1,214 +1,233 @@
-import { TableObject, Property, GetTableObject, GetAllTableObjects, GetNotification } from 'dav-js'
-import { environment } from '../../environments/environment'
-import { GetAllTodoLists } from './TodoList'
-
-export class Todo {
-	public uuid: string
-	public name: string
-	public completed: boolean
-	public time: number
-	public groups: string[]
-	public list: string
-	public notificationUuid: string
-
-	constructor(
-		name: string = "",
-		completed: boolean = false,
-		time: number = 0,
-		groups: string[] = [],
-		list: string = null,
-		notificationUuid: string = null
-	) {
-		this.name = name
-		this.completed = completed
-		this.time = time
-		this.groups = groups
-		this.list = list
-		this.notificationUuid = notificationUuid
-	}
-
-	public static async Create(name: string, completed: boolean = false, time: number = 0, groups: string[] = [], list: string = null, notificationUuid: string = null, uuid: string = null): Promise<Todo> {
-		let todo = new Todo(name, completed, time, groups, list, notificationUuid)
-		todo.uuid = uuid
-		await todo.Save()
-		return todo
-	}
-
-	async AddGoup(name: string) {
-		if (this.groups.findIndex(n => n === name) === -1) {
-			this.groups.push(name)
-			await this.Save()
-		}
-	}
-
-	async RemoveGroup(name: string) {
-		var index = this.groups.findIndex(n => n === name)
-
-		if (index !== -1) {
-			this.groups.splice(index, 1)
-			await this.Save()
-		}
-	}
-
-	async SetCompleted(completed: boolean) {
-		if (this.completed != completed) {
-			this.completed = completed
-			await this.Save()
-		}
-	}
-
-	async SetList(list: string) {
-		this.list = list
-		await this.Save()
-	}
-
-	async Delete() {
-		let tableObject = await GetTableObject(this.uuid)
-		if (tableObject == null) return
-
-		if (this.notificationUuid) {
-			// Delete the notification
-			let notification = await GetNotification(this.notificationUuid)
-
-			if (notification != null) {
-				await notification.Delete()
-			}
-		}
-
-		await tableObject.Delete()
-	}
-
-	private async Save() {
-		let tableObject = await GetTableObject(this.uuid)
-
-		if (!tableObject) {
-			// Create the table object
-			tableObject = new TableObject({
-				Uuid: this.uuid,
-				TableId: environment.todoTableId
-			})
-			this.uuid = tableObject.Uuid
-		}
-
-		let properties: Property[] = [
-			{ name: environment.todoNameKey, value: this.name },
-			{ name: environment.todoCompletedKey, value: this.completed.toString() },
-			{ name: environment.todoTimeKey, value: this.time.toString() }
-		]
-
-		if (this.groups.length > 0) {
-			properties.push({
-				name: environment.todoGroupsKey,
-				value: this.groups.join(',')
-			})
-		}
-
-		if (this.list) {
-			properties.push({
-				name: environment.todoListKey,
-				value: this.list
-			})
-		}
-
-		if (this.notificationUuid) {
-			properties.push({
-				name: environment.notificationUuidKey,
-				value: this.notificationUuid
-			})
-		}
-
-		await tableObject.SetPropertyValues(properties)
-	}
-}
-
-export async function GetAllTodos(): Promise<Todo[]> {
-	var tableObjects = await GetAllTableObjects(environment.todoTableId, false)
-	var todos: Todo[] = []
-
-	for (let tableObject of tableObjects) {
-		var todo = ConvertTableObjectToTodo(tableObject)
-
-		if (todo) {
-			todos.push(todo)
-		}
-	}
-
-	return todos
-}
-
-export async function GetTodo(uuid: string): Promise<Todo> {
-	let tableObject = await GetTableObject(uuid)
-	return ConvertTableObjectToTodo(tableObject)
-}
-
-export async function GetAllTodoGroups(): Promise<string[]> {
-	let todoGroups: string[] = []
-	let allTodos = await GetAllTodos()
-	let allTodoLists = await GetAllTodoLists()
-
-	allTodos.forEach(todo => {
-		todo.groups.forEach(group => {
-			let index = todoGroups.findIndex(g => g == group)
-
-			if (index == -1) {
-				// Add the group
-				todoGroups.push(group)
-			}
-		})
-	})
-
-	allTodoLists.forEach(todoList => {
-		todoList.groups.forEach(group => {
-			let index = todoGroups.findIndex(g => g == group)
-
-			if (index == -1) {
-				// Add the group
-				todoGroups.push(group)
-			}
-		})
-	})
-
-	return todoGroups
-}
-
-export function ConvertTableObjectToTodo(tableObject: TableObject): Todo {
-	if (!tableObject || tableObject.TableId != environment.todoTableId) return null
-
-	let name = tableObject.GetPropertyValue(environment.todoNameKey) as string
-
-	let completed: boolean = false
-	let completedString = tableObject.GetPropertyValue(environment.todoCompletedKey) as string
-	if (completedString != null) {
-		completed = completedString.toLowerCase() == "true"
-	}
-
-	let time: number = 0
-	let timeString = tableObject.GetPropertyValue(environment.todoTimeKey) as string
-	if (timeString != null) {
-		time = +timeString
-	}
-
-	// Groups
-	let groups: string[] = []
-	let groupsString = tableObject.GetPropertyValue(environment.todoGroupsKey) as string
-	if (groupsString != null) {
-		groupsString.split(',').forEach(group => {
-			groups.push(group);
-		})
-	}
-
-	let list = tableObject.GetPropertyValue(environment.todoListKey) as string
-
-	let notificationUuid = tableObject.GetPropertyValue(environment.notificationUuidKey) as string
-
-	let todo = new Todo(
-		name,
-		completed,
-		time,
-		groups,
-		list,
-		notificationUuid
-	)
-	todo.uuid = tableObject.Uuid;
-	return todo;
-}
\ No newline at end of file
+import {
+	TableObject,
+	Property,
+	GetTableObject,
+	GetAllTableObjects,
+	GetNotification
+} from "dav-js"
+import { environment } from "../../environments/environment"
+import { GetAllTodoLists } from "./TodoList"
+
+export class Todo {
+	public uuid: string
+	public name: string
+	public completed: boolean
+	public time: number
+	public groups: string[]
+	public list: string
+	public notificationUuid: string
+
+	constructor(
+		name: string = "",
+		completed: boolean = false,
+		time: number = 0,
+		groups: string[] = [],
+		list: string = null,
+		notificationUuid: string = null
+	) {
+		this.name = name
+		this.completed = completed
+		this.time = time
+		this.groups = groups
+		this.list = list
+		this.notificationUuid = notificationUuid
+	}
+
+	public static async Create(
+		name: string,
+		completed: boolean = false,
+		time: number = 0,
+		groups: string[] = [],
+		list: string = null,
+		notificationUuid: string = null,
+		uuid: string = null
+	): Promise<Todo> {
+		let todo = new Todo(name, completed, time, groups, list, notificationUuid)
+		todo.uuid = uuid
+		await todo.Save()
+		return todo
+	}
+
+	async AddGoup(name: string) {
+		if (this.groups.findIndex(n => n === name) === -1) {
+			this.groups.push(name)
+			await this.Save()
+		}
+	}
+
+	async RemoveGroup(name: string) {
+		var index = this.groups.findIndex(n => n === name)
+
+		if (index !== -1) {
+			this.groups.splice(index, 1)
+			await this.Save()
+		}
+	}
+
+	async SetCompleted(completed: boolean) {
+		if (this.completed != completed) {
+			this.completed = completed
+			await this.Save()
+		}
+	}
+
+	async SetList(list: string) {
+		this.list = list
+		await this.Save()
+	}
+
+	async Delete() {
+		let tableObject = await GetTableObject(this.uuid)
+		if (tableObject == null) return
+
+		if (this.notificationUuid) {
+			// Delete the notification
+			let notification = await GetNotification(this.notificationUuid)
+
+			if (notification != null) {
+				await notification.Delete()
+			}
+		}
+
+		await tableObject.Delete()
+	}
+
+	private async Save() {
+		let tableObject = await GetTableObject(this.uuid)
+
+		if (!tableObject) {
+			// Create the table object
+			tableObject = new TableObject({
+				Uuid: this.uuid,
+				TableId: environment.todoTableId
+			})
+			this.uuid = tableObject.Uuid
+		}
+
+		let properties: Property[] = [
+			{ name: environment.todoNameKey, value: this.name },
+			{
+				name: environment.todoCompletedKey,
+				value: this.completed.toString()
+			},
+			{ name: environment.todoTimeKey, value: this.time.toString() }
+		]
+
+		if (this.groups.length > 0) {
+			properties.push({
+				name: environment.todoGroupsKey,
+				value: this.groups.join(",")
+			})
+		}
+
+		if (this.list) {
+			properties.push({
+				name: environment.todoListKey,
+				value: this.list
+			})
+		}
+
+		if (this.notificationUuid) {
+			properties.push({
+				name: environment.notificationUuidKey,
+				value: this.notificationUuid
+			})
+		}
+
+		await tableObject.SetPropertyValues(properties)
+	}
+}
+
+export async function GetAllTodos(): Promise<Todo[]> {
+	var tableObjects = await GetAllTableObjects(environment.todoTableId, false)
+	var todos: Todo[] = []
+
+	for (let tableObject of tableObjects) {
+		var todo = ConvertTableObjectToTodo(tableObject)
+
+		if (todo) {
+			todos.push(todo)
+		}
+	}
+
+	return todos
+}
+
+export async function GetTodo(uuid: string): Promise<Todo> {
+	let tableObject = await GetTableObject(uuid)
+	return ConvertTableObjectToTodo(tableObject)
+}
+
+export async function GetAllTodoGroups(): Promise<string[]> {
+	let todoGroups: string[] = []
+	let allTodos = await GetAllTodos()
+	let allTodoLists = await GetAllTodoLists()
+
+	allTodos.forEach(todo => {
+		todo.groups.forEach(group => {
+			let index = todoGroups.findIndex(g => g == group)
+
+			if (index == -1) {
+				// Add the group
+				todoGroups.push(group)
+			}
+		})
+	})
+
+	allTodoLists.forEach(todoList => {
+		todoList.groups.forEach(group => {
+			let index = todoGroups.findIndex(g => g == group)
+
+			if (index == -1) {
+				// Add the group
+				todoGroups.push(group)
+			}
+		})
+	})
+
+	return todoGroups
+}
+
+export function ConvertTableObjectToTodo(tableObject: TableObject): Todo {
+	if (!tableObject || tableObject.TableId != environment.todoTableId)
+		return null
+
+	let name = tableObject.GetPropertyValue(environment.todoNameKey) as string
+
+	let completed: boolean = false
+	let completedString = tableObject.GetPropertyValue(
+		environment.todoCompletedKey
+	) as string
+	if (completedString != null) {
+		completed = completedString.toLowerCase() == "true"
+	}
+
+	let time: number = 0
+	let timeString = tableObject.GetPropertyValue(
+		environment.todoTimeKey
+	) as string
+	if (timeString != null) {
+		time = +timeString
+	}
+
+	// Groups
+	let groups: string[] = []
+	let groupsString = tableObject.GetPropertyValue(
+		environment.todoGroupsKey
+	) as string
+	if (groupsString != null) {
+		groupsString.split(",").forEach(group => {
+			groups.push(group)
+		})
+	}
+
+	let list = tableObject.GetPropertyValue(environment.todoListKey) as string
+
+	let notificationUuid = tableObject.GetPropertyValue(
+		environment.notificationUuidKey
+	) as string
+
+	let todo = new Todo(name, completed, time, groups, list, notificationUuid)
+	todo.uuid = tableObject.Uuid
+	return todo
+}
diff --git a/src/app/models/TodoList.ts b/src/app/models/TodoList.ts
index ffbbebe..e92dfb8 100644
--- a/src/app/models/TodoList.ts
+++ b/src/app/models/TodoList.ts
@@ -1,216 +1,253 @@
-import { TableObject, Property, GetTableObject, GetAllTableObjects } from 'dav-js'
-import { Todo, ConvertTableObjectToTodo } from './Todo'
-import { environment } from '../../environments/environment'
-
-export class TodoList {
-	public uuid: string
-	public name: string
-	public time: number
-	public items: (Todo | TodoList)[]
-	public groups: string[]
-	public list: string
-
-	constructor(
-		name: string = "",
-		time: number = 0,
-		items: (Todo | TodoList)[] = [],
-		groups: string[] = [],
-		list: string = null
-	) {
-		this.name = name
-		this.time = time
-		this.items = items
-		this.groups = groups
-		this.list = list
-	}
-
-	public static async Create(name: string, time: number = 0, items: (Todo | TodoList)[] = [], groups: string[] = [], list: string = null, uuid: string = null): Promise<TodoList> {
-		let todoList = new TodoList(name, time, items, groups, list)
-		todoList.uuid = uuid
-		await todoList.Save()
-		return todoList
-	}
-
-	async Update(name?: string, time?: number, groups?: string[], list?: string) {
-		if (name != null) this.name = name
-		if (time != null) this.time = time
-		if (groups) this.groups = groups
-		if (list != null) this.list = list
-		await this.Save()
-	}
-
-	async SetName(name: string) {
-		if (this.name == name) return
-
-		this.name = name
-		await this.Save()
-	}
-
-	async SetItems(items: (Todo | TodoList)[]) {
-		this.items = items
-		await this.Save()
-	}
-
-	async SetList(list: string) {
-		this.list = list
-		await this.Save()
-	}
-
-	private async Save() {
-		let tableObject = await GetTableObject(this.uuid)
-
-		if (!tableObject) {
-			// Create the table object
-			tableObject = new TableObject({
-				Uuid: this.uuid,
-				TableId: environment.todoListTableId
-			})
-			this.uuid = tableObject.Uuid
-		}
-
-		let properties: Property[] = [
-			{ name: environment.todoListNameKey, value: this.name },
-			{ name: environment.todoListTimeKey, value: this.time.toString() }
-		]
-
-		// Create the items string
-		let itemUuids: string[] = []
-		this.items.forEach((item: (Todo | TodoList)) => itemUuids.push(item.uuid))
-		properties.push({
-			name: environment.todoListItemsKey,
-			value: itemUuids.join(",")
-		})
-
-		// Remove the todos and todoLists properties
-		await tableObject.RemoveProperty(environment.todoListTodosKey)
-		await tableObject.RemoveProperty(environment.todoListTodoListsKey)
-
-		// Groups
-		properties.push({
-			name: environment.todoListGroupsKey,
-			value: this.groups.join(',')
-		})
-
-		// List
-		if (this.list) {
-			properties.push({
-				name: environment.todoListListKey,
-				value: this.list
-			})
-		}
-
-		// Set the properties
-		await tableObject.SetPropertyValues(properties)
-	}
-
-	public async Delete() {
-		// Delete each item
-		for (let i = 0; i < this.items.length; i++) {
-			await this.items[i].Delete()
-		}
-
-		// Self-destruction!
-		let tableObject = await GetTableObject(this.uuid)
-		if (tableObject) {
-			await tableObject.Delete()
-		}
-	}
-}
-
-export async function GetAllTodoLists(): Promise<TodoList[]> {
-	let tableObjects = await GetAllTableObjects(environment.todoListTableId, false)
-	let todoLists: TodoList[] = []
-
-	for (let tableObject of tableObjects) {
-		let todoList = await ConvertTableObjectToTodoList(tableObject)
-
-		if (todoList) {
-			todoLists.push(todoList)
-		}
-	}
-
-	return todoLists
-}
-
-export async function GetTodoList(uuid: string): Promise<TodoList> {
-	let tableObject = await GetTableObject(uuid)
-	return await ConvertTableObjectToTodoList(tableObject)
-}
-
-export async function ConvertTableObjectToTodoList(tableObject: TableObject): Promise<TodoList> {
-	if (!tableObject || tableObject.TableId != environment.todoListTableId) return null
-
-	let name = tableObject.GetPropertyValue(environment.todoListNameKey) as string
-
-	let time: number = 0
-	let timeString = tableObject.GetPropertyValue(environment.todoListTimeKey) as string
-	if (timeString != null) {
-		time = +timeString
-	}
-
-	let todos: Todo[] = []
-	let todosString = tableObject.GetPropertyValue(environment.todoListTodosKey) as string
-	if (todosString != null) {
-		for (let uuid of todosString.split(',')) {
-			// Get the todo from the local storage
-			let todoTableObject = await GetTableObject(uuid)
-			if (!todoTableObject) continue
-
-			let todo = ConvertTableObjectToTodo(todoTableObject)
-			if (todo) {
-				todos.push(todo)
-			}
-		}
-	}
-
-	let todoLists: TodoList[] = []
-	let todoListsString = tableObject.GetPropertyValue(environment.todoListTodoListsKey) as string
-	if (todoListsString != null) {
-		for (let uuid of todoListsString.split(',')) {
-			// Get the todo list from the local storage
-			let todoListTableObject = await GetTableObject(uuid)
-			if (!todoListTableObject) continue
-
-			let todoList = await ConvertTableObjectToTodoList(todoListTableObject)
-			if (todoList) {
-				todoLists.push(todoList)
-			}
-		}
-	}
-
-	let items: (Todo | TodoList)[] = []
-	let itemsString = tableObject.GetPropertyValue(environment.todoListItemsKey) as string
-	if (itemsString != null) {
-		for (let uuid of itemsString.split(',')) {
-			// Get the todo or todo list from local storage
-			let itemTableObject = await GetTableObject(uuid)
-			if (!itemTableObject) continue
-
-			if (itemTableObject.TableId == environment.todoTableId) {
-				let todo = ConvertTableObjectToTodo(itemTableObject)
-				if (todo) items.push(todo)
-			} else if (itemTableObject.TableId == environment.todoListTableId) {
-				let todoList = await ConvertTableObjectToTodoList(itemTableObject)
-				if (todoList) items.push(todoList)
-			}
-		}
-	}
-
-	// Move all todos and todo lists into the items array
-	for (let todo of todos) items.push(todo);
-	for (let todoList of todoLists) items.push(todoList);
-
-	let groups: string[] = []
-	let groupsString = tableObject.GetPropertyValue(environment.todoListGroupsKey) as string
-	if (groupsString) {
-		for (let group of groupsString.split(',')) {
-			groups.push(group)
-		}
-	}
-
-	let list = tableObject.GetPropertyValue(environment.todoListListKey) as string
-
-	let todoList = new TodoList(name, time, items, groups, list)
-	todoList.uuid = tableObject.Uuid
-	return todoList
-}
\ No newline at end of file
+import {
+	TableObject,
+	Property,
+	GetTableObject,
+	GetAllTableObjects
+} from "dav-js"
+import { Todo, ConvertTableObjectToTodo } from "./Todo"
+import { environment } from "../../environments/environment"
+
+export class TodoList {
+	public uuid: string
+	public name: string
+	public time: number
+	public items: (Todo | TodoList)[]
+	public groups: string[]
+	public list: string
+
+	constructor(
+		name: string = "",
+		time: number = 0,
+		items: (Todo | TodoList)[] = [],
+		groups: string[] = [],
+		list: string = null
+	) {
+		this.name = name
+		this.time = time
+		this.items = items
+		this.groups = groups
+		this.list = list
+	}
+
+	public static async Create(
+		name: string,
+		time: number = 0,
+		items: (Todo | TodoList)[] = [],
+		groups: string[] = [],
+		list: string = null,
+		uuid: string = null
+	): Promise<TodoList> {
+		let todoList = new TodoList(name, time, items, groups, list)
+		todoList.uuid = uuid
+		await todoList.Save()
+		return todoList
+	}
+
+	async Update(
+		name?: string,
+		time?: number,
+		groups?: string[],
+		list?: string
+	) {
+		if (name != null) this.name = name
+		if (time != null) this.time = time
+		if (groups) this.groups = groups
+		if (list != null) this.list = list
+		await this.Save()
+	}
+
+	async SetName(name: string) {
+		if (this.name == name) return
+
+		this.name = name
+		await this.Save()
+	}
+
+	async SetItems(items: (Todo | TodoList)[]) {
+		this.items = items
+		await this.Save()
+	}
+
+	async SetList(list: string) {
+		this.list = list
+		await this.Save()
+	}
+
+	private async Save() {
+		let tableObject = await GetTableObject(this.uuid)
+
+		if (!tableObject) {
+			// Create the table object
+			tableObject = new TableObject({
+				Uuid: this.uuid,
+				TableId: environment.todoListTableId
+			})
+			this.uuid = tableObject.Uuid
+		}
+
+		let properties: Property[] = [
+			{ name: environment.todoListNameKey, value: this.name },
+			{ name: environment.todoListTimeKey, value: this.time.toString() }
+		]
+
+		// Create the items string
+		let itemUuids: string[] = []
+		this.items.forEach((item: Todo | TodoList) => itemUuids.push(item.uuid))
+		properties.push({
+			name: environment.todoListItemsKey,
+			value: itemUuids.join(",")
+		})
+
+		// Remove the todos and todoLists properties
+		await tableObject.RemoveProperty(environment.todoListTodosKey)
+		await tableObject.RemoveProperty(environment.todoListTodoListsKey)
+
+		// Groups
+		properties.push({
+			name: environment.todoListGroupsKey,
+			value: this.groups.join(",")
+		})
+
+		// List
+		if (this.list) {
+			properties.push({
+				name: environment.todoListListKey,
+				value: this.list
+			})
+		}
+
+		// Set the properties
+		await tableObject.SetPropertyValues(properties)
+	}
+
+	public async Delete() {
+		// Delete each item
+		for (let i = 0; i < this.items.length; i++) {
+			await this.items[i].Delete()
+		}
+
+		// Self-destruction!
+		let tableObject = await GetTableObject(this.uuid)
+		if (tableObject) {
+			await tableObject.Delete()
+		}
+	}
+}
+
+export async function GetAllTodoLists(): Promise<TodoList[]> {
+	let tableObjects = await GetAllTableObjects(
+		environment.todoListTableId,
+		false
+	)
+	let todoLists: TodoList[] = []
+
+	for (let tableObject of tableObjects) {
+		let todoList = await ConvertTableObjectToTodoList(tableObject)
+
+		if (todoList) {
+			todoLists.push(todoList)
+		}
+	}
+
+	return todoLists
+}
+
+export async function GetTodoList(uuid: string): Promise<TodoList> {
+	let tableObject = await GetTableObject(uuid)
+	return await ConvertTableObjectToTodoList(tableObject)
+}
+
+export async function ConvertTableObjectToTodoList(
+	tableObject: TableObject
+): Promise<TodoList> {
+	if (!tableObject || tableObject.TableId != environment.todoListTableId)
+		return null
+
+	let name = tableObject.GetPropertyValue(
+		environment.todoListNameKey
+	) as string
+
+	let time: number = 0
+	let timeString = tableObject.GetPropertyValue(
+		environment.todoListTimeKey
+	) as string
+	if (timeString != null) {
+		time = +timeString
+	}
+
+	let todos: Todo[] = []
+	let todosString = tableObject.GetPropertyValue(
+		environment.todoListTodosKey
+	) as string
+	if (todosString != null) {
+		for (let uuid of todosString.split(",")) {
+			// Get the todo from the local storage
+			let todoTableObject = await GetTableObject(uuid)
+			if (!todoTableObject) continue
+
+			let todo = ConvertTableObjectToTodo(todoTableObject)
+			if (todo) {
+				todos.push(todo)
+			}
+		}
+	}
+
+	let todoLists: TodoList[] = []
+	let todoListsString = tableObject.GetPropertyValue(
+		environment.todoListTodoListsKey
+	) as string
+	if (todoListsString != null) {
+		for (let uuid of todoListsString.split(",")) {
+			// Get the todo list from the local storage
+			let todoListTableObject = await GetTableObject(uuid)
+			if (!todoListTableObject) continue
+
+			let todoList = await ConvertTableObjectToTodoList(todoListTableObject)
+			if (todoList) {
+				todoLists.push(todoList)
+			}
+		}
+	}
+
+	let items: (Todo | TodoList)[] = []
+	let itemsString = tableObject.GetPropertyValue(
+		environment.todoListItemsKey
+	) as string
+	if (itemsString != null) {
+		for (let uuid of itemsString.split(",")) {
+			// Get the todo or todo list from local storage
+			let itemTableObject = await GetTableObject(uuid)
+			if (!itemTableObject) continue
+
+			if (itemTableObject.TableId == environment.todoTableId) {
+				let todo = ConvertTableObjectToTodo(itemTableObject)
+				if (todo) items.push(todo)
+			} else if (itemTableObject.TableId == environment.todoListTableId) {
+				let todoList = await ConvertTableObjectToTodoList(itemTableObject)
+				if (todoList) items.push(todoList)
+			}
+		}
+	}
+
+	// Move all todos and todo lists into the items array
+	for (let todo of todos) items.push(todo)
+	for (let todoList of todoLists) items.push(todoList)
+
+	let groups: string[] = []
+	let groupsString = tableObject.GetPropertyValue(
+		environment.todoListGroupsKey
+	) as string
+	if (groupsString) {
+		for (let group of groupsString.split(",")) {
+			groups.push(group)
+		}
+	}
+
+	let list = tableObject.GetPropertyValue(
+		environment.todoListListKey
+	) as string
+
+	let todoList = new TodoList(name, time, items, groups, list)
+	todoList.uuid = tableObject.Uuid
+	return todoList
+}
diff --git a/src/app/pages/account-page/account-page.component.html b/src/app/pages/account-page/account-page.component.html
index a4eace3..9acf5ff 100644
--- a/src/app/pages/account-page/account-page.component.html
+++ b/src/app/pages/account-page/account-page.component.html
@@ -1,54 +1,143 @@
-<div class="container mb-4 ms-motion-slideUpIn" style="padding-bottom: 56px" *ngIf="!dataService.dav.isLoggedIn">
-   <h1 class="text-center mt-3 text-color font-weight-light">{{ locale.header }}</h1>
-   <h5 class="text-center mt-4 text-color">{{ locale.text1 }}</h5>
-
-   <div class="row mt-5">
-      <div class="col-6 col-md-4 offset-md-1 text-center text-color">
-			<i class="ms-Icon ms-Icon--Sync" style="font-size: 60px;" aria-hidden="true"></i>
-         <p class="mt-4" [style.fontSize.px]="width > 550 ? 21 : 19">{{ locale.text2 }}</p>
-      </div>
-
-      <div class="col-6 col-md-4 offset-md-2 text-center text-color">
-			<i class="ms-Icon ms-Icon--Lock" style="font-size: 60px;" aria-hidden="true"></i>
-         <p class="mt-4" [style.fontSize.px]="width > 550 ? 21 : 19">{{ locale.text3 }}</p>
-      </div>
-	</div>
-
-	<div class="d-flex justify-content-center mt-5">
-		<a href="https://dav-apps.tech" target="blank"><img [src]="dataService.darkTheme ? '/assets/images/dav-logo-white.png' : '/assets/images/dav-logo.png'" class="align-self-center" style="width: 140px" alt="dav Logo" /></a>
-	</div>
-
-	<div class="d-flex justify-content-center" style="margin-top: 45px">
-		<button type="button" class="btn btn-primary mr-2" (click)="ShowLoginPage()">{{ locale.login }}</button>
-		<button type="button" class="btn btn-secondary ml-2" (click)="ShowSignupPage()">{{ locale.signup }}</button>
-	</div>
-</div>
-
-<div class="container mb-4 ms-motion-slideUpIn" style="padding-bottom: 56px" *ngIf="dataService.dav.isLoggedIn">
-   <h1 class="text-center mt-3 text-color font-weight-light" style="margin-bottom: 40px">{{ locale.header }}</h1>
-	
-	<div class="d-flex justify-content-center">
-		<img
-			class="rounded-circle shadow"
-			[src]="dataService.dav.user.ProfileImage" 
-			[height]="width > 420 ? 150 : 130"
-			[width]="width > 420 ? 150 : 130" />
-
-		<div style="width: 200px;" [style.marginLeft.px]="width > 400 ? 40 : 20">
-			<h4 class="text-color mb-0"><a class="text-color" href="https://dav-apps.tech/login?redirect=user" target="blank">{{ dataService.dav.user.FirstName }}</a></h4>
-			<p class="text-muted mb-1">
-				{{ dataService.dav.user.Plan == 0 ? locale.planFree : (dataService.dav.user.Plan == 1 ? locale.planPlus : locale.planPro ) }}
-			</p>
-
-			<div class="progress mt-3" style="width: 200px; height: 5%">
-				<div class="progress-bar" role="progressbar" [style.width.%]="getUsedStoragePercentage()" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
-			</div>
-			
-			<p class="mt-2 text-color" style="margin-bottom: 2px">{{ locale.storageUsed.replace("{0}", bytesToGigabytes(dataService.dav.user.UsedStorage, 1)).replace("{1}", bytesToGigabytes(dataService.dav.user.TotalStorage, 0)) }}</p>
-
-			<button type="button" class="btn btn-outline-danger btn-sm mt-2" (click)="ShowLogoutModal()">{{ locale.logout }}</button>
-		</div>
-	</div>
-
-	<calendo-logout-modal (logout)="Logout()"></calendo-logout-modal>
-</div>
\ No newline at end of file
+<div
+	class="container mb-4 ms-motion-slideUpIn"
+	style="padding-bottom: 56px"
+	*ngIf="!dataService.dav.isLoggedIn"
+>
+	<h1 class="text-center mt-3 text-color font-weight-light">
+		{{ locale.header }}
+	</h1>
+	<h5 class="text-center mt-4 text-color">{{ locale.text1 }}</h5>
+
+	<div class="row mt-5">
+		<div class="col-6 col-md-4 offset-md-1 text-center text-color">
+			<i
+				class="ms-Icon ms-Icon--Sync"
+				style="font-size: 60px"
+				aria-hidden="true"
+			></i>
+			<p class="mt-4" [style.fontSize.px]="width > 550 ? 21 : 19">
+				{{ locale.text2 }}
+			</p>
+		</div>
+
+		<div class="col-6 col-md-4 offset-md-2 text-center text-color">
+			<i
+				class="ms-Icon ms-Icon--Lock"
+				style="font-size: 60px"
+				aria-hidden="true"
+			></i>
+			<p class="mt-4" [style.fontSize.px]="width > 550 ? 21 : 19">
+				{{ locale.text3 }}
+			</p>
+		</div>
+	</div>
+
+	<div class="d-flex justify-content-center mt-5">
+		<a href="https://dav-apps.tech" target="blank">
+			<img
+				[src]="
+					dataService.darkTheme
+						? '/assets/images/dav-logo-white.png'
+						: '/assets/images/dav-logo.png'
+				"
+				class="align-self-center"
+				style="width: 140px"
+				alt="dav Logo"
+			/>
+		</a>
+	</div>
+
+	<div class="d-flex justify-content-center" style="margin-top: 45px">
+		<button
+			type="button"
+			class="btn btn-primary mr-2"
+			(click)="ShowLoginPage()"
+		>
+			{{ locale.login }}
+		</button>
+		<button
+			type="button"
+			class="btn btn-secondary ml-2"
+			(click)="ShowSignupPage()"
+		>
+			{{ locale.signup }}
+		</button>
+	</div>
+</div>
+
+<div
+	class="container mb-4 ms-motion-slideUpIn"
+	style="padding-bottom: 56px"
+	*ngIf="dataService.dav.isLoggedIn"
+>
+	<h1
+		class="text-center mt-3 text-color font-weight-light"
+		style="margin-bottom: 40px"
+	>
+		{{ locale.header }}
+	</h1>
+
+	<div class="d-flex justify-content-center">
+		<img
+			class="rounded-circle shadow"
+			[src]="dataService.dav.user.ProfileImage"
+			[height]="width > 420 ? 150 : 130"
+			[width]="width > 420 ? 150 : 130"
+		/>
+
+		<div style="width: 200px" [style.marginLeft.px]="width > 400 ? 40 : 20">
+			<h4 class="text-color mb-0">
+				<a
+					class="text-color"
+					href="https://dav-apps.tech/login?redirect=user"
+					target="blank"
+					>{{ dataService.dav.user.FirstName }}</a
+				>
+			</h4>
+			<p class="text-muted mb-1">
+				{{
+					dataService.dav.user.Plan == 0
+						? locale.planFree
+						: dataService.dav.user.Plan == 1
+							? locale.planPlus
+							: locale.planPro
+				}}
+			</p>
+
+			<div class="progress mt-3" style="width: 200px; height: 5%">
+				<div
+					class="progress-bar"
+					role="progressbar"
+					[style.width.%]="getUsedStoragePercentage()"
+					aria-valuenow="40"
+					aria-valuemin="0"
+					aria-valuemax="100"
+				></div>
+			</div>
+
+			<p class="mt-2 text-color" style="margin-bottom: 2px">
+				{{
+					locale.storageUsed
+						.replace(
+							"{0}",
+							bytesToGigabytes(dataService.dav.user.UsedStorage, 1)
+						)
+						.replace(
+							"{1}",
+							bytesToGigabytes(dataService.dav.user.TotalStorage, 0)
+						)
+				}}
+			</p>
+
+			<button
+				type="button"
+				class="btn btn-outline-danger btn-sm mt-2"
+				(click)="ShowLogoutModal()"
+			>
+				{{ locale.logout }}
+			</button>
+		</div>
+	</div>
+
+	<calendo-logout-modal (logout)="Logout()"></calendo-logout-modal>
+</div>
diff --git a/src/app/pages/account-page/account-page.component.ts b/src/app/pages/account-page/account-page.component.ts
index ca95908..05bc1ad 100644
--- a/src/app/pages/account-page/account-page.component.ts
+++ b/src/app/pages/account-page/account-page.component.ts
@@ -1,56 +1,60 @@
-import { Component, ViewChild, HostListener } from "@angular/core"
-import { DataService } from '../../services/data-service'
-import { enUS } from '../../../locales/locales'
-import { environment } from '../../../environments/environment'
-import { Dav } from 'dav-js'
-import { LogoutModalComponent } from '../../components/logout-modal/logout-modal.component'
-import { faSync, faLock } from '@fortawesome/free-solid-svg-icons'
-
-@Component({
-	selector: "calendo-account-page",
-	templateUrl: "./account-page.component.html"
-})
-export class AccountPageComponent {
-	locale = enUS.accountPage
-	faSync = faSync
-	faLock = faLock
-	@ViewChild(LogoutModalComponent)
-	private logoutModalComponent: LogoutModalComponent
-	width: number = window.innerWidth
-
-	constructor(public dataService: DataService) {
-		this.locale = this.dataService.GetLocale().accountPage
-		this.dataService.HideWindowsBackButton()
-	}
-
-	@HostListener('window:resize')
-	onResize() {
-		this.width = window.innerWidth
-	}
-
-	ShowLoginPage() {
-		Dav.ShowLoginPage(environment.apiKey, environment.baseUrl)
-	}
-
-	ShowSignupPage() {
-		Dav.ShowSignupPage(environment.apiKey, environment.baseUrl)
-	}
-
-	ShowLogoutModal() {
-		this.logoutModalComponent.Show()
-	}
-
-	Logout() {
-		Dav.Logout().then(() => window.location.href = "/account")
-	}
-
-	bytesToGigabytes(bytes: number, rounding: number): string {
-		if (bytes == 0) return "0"
-		let gb = Math.round(bytes / 1000000000).toFixed(rounding)
-		return gb == "0.0" ? "0" : gb
-	}
-
-	getUsedStoragePercentage(): number {
-		return (this.dataService.dav.user.UsedStorage / this.dataService.dav.user.TotalStorage) * 100
-	}
-}
\ No newline at end of file
+import { Component, ViewChild, HostListener } from "@angular/core"
+import { DataService } from "../../services/data-service"
+import { enUS } from "../../../locales/locales"
+import { environment } from "../../../environments/environment"
+import { Dav } from "dav-js"
+import { LogoutModalComponent } from "../../components/logout-modal/logout-modal.component"
+import { faSync, faLock } from "@fortawesome/free-solid-svg-icons"
+
+@Component({
+	selector: "calendo-account-page",
+	templateUrl: "./account-page.component.html"
+})
+export class AccountPageComponent {
+	locale = enUS.accountPage
+	faSync = faSync
+	faLock = faLock
+	@ViewChild(LogoutModalComponent)
+	private logoutModalComponent: LogoutModalComponent
+	width: number = window.innerWidth
+
+	constructor(public dataService: DataService) {
+		this.locale = this.dataService.GetLocale().accountPage
+		this.dataService.HideWindowsBackButton()
+	}
+
+	@HostListener("window:resize")
+	onResize() {
+		this.width = window.innerWidth
+	}
+
+	ShowLoginPage() {
+		Dav.ShowLoginPage(environment.apiKey, environment.baseUrl)
+	}
+
+	ShowSignupPage() {
+		Dav.ShowSignupPage(environment.apiKey, environment.baseUrl)
+	}
+
+	ShowLogoutModal() {
+		this.logoutModalComponent.Show()
+	}
+
+	Logout() {
+		Dav.Logout().then(() => (window.location.href = "/account"))
+	}
+
+	bytesToGigabytes(bytes: number, rounding: number): string {
+		if (bytes == 0) return "0"
+		let gb = Math.round(bytes / 1000000000).toFixed(rounding)
+		return gb == "0.0" ? "0" : gb
+	}
+
+	getUsedStoragePercentage(): number {
+		return (
+			(this.dataService.dav.user.UsedStorage /
+				this.dataService.dav.user.TotalStorage) *
+			100
+		)
+	}
+}
diff --git a/src/app/pages/appointments-page/appointments-page.component.html b/src/app/pages/appointments-page/appointments-page.component.html
index 1c6032c..8266a74 100644
--- a/src/app/pages/appointments-page/appointments-page.component.html
+++ b/src/app/pages/appointments-page/appointments-page.component.html
@@ -1,56 +1,80 @@
-<div class="container-fluid ms-motion-slideUpIn" style="padding-bottom: 56px">
-   <h1 class="text-center mt-3 text-color font-weight-light">
-      {{ locale.header }}
-		<button
-			type="button"
-			class="btn btn-outline-primary btn-sm mb-1"
-			(click)="ShowNewAppointmentModal()">
-
-			<fa-icon [icon]="faPlus"></fa-icon>
-		</button>
-   </h1>
-
-	<p class="no-items-message font-weight-light text-center mt-3 text-color" *ngIf="dataService.appointmentDays.length == 0">
-		{{ locale.noAppointments }}
-	</p>
-	
-	<!-- List of future appointments -->
-   <div class="row">
-		<div
-			class="card offset-1 col-11 col-md-9 col-lg-7 mx-auto my-4 theme-background-color-secondary ms-depth-4"
-			*ngFor="let appointmentDay of dataService.appointmentDays">
-
-         <div class="card-body">
-            <h5 class="card-title mb-3 text-color">
-					<span (click)="ShowCalendarDay(appointmentDay.timestamp)">{{ appointmentDay.date }}</span>
-				</h5>
-            <ul class="list-group list-group-flush d-flex flex-column" *ngFor="let appointment of appointmentDay.appointments">
-               <calendo-small-appointment-item class="d-inline-flex" [appointment]="appointment"></calendo-small-appointment-item>
-            </ul>
-         </div>
-      </div>
-	</div>
-	
-	<!-- List of old appointments -->
-	<h2 class="font-weight-light text-center mt-3 text-color" *ngIf="dataService.oldAppointmentDays.length > 0">
-		{{ locale.oldAppointments }}
-	</h2>
-
-	<div class="row" *ngIf="dataService.oldAppointmentDays.length > 0">
-		<div
-			class="card offset-1 col-11 col-md-9 col-lg-7 mx-auto my-4 theme-background-color-secondary ms-depth-4"
-			*ngFor="let appointmentDay of dataService.oldAppointmentDays">
-		
-			<div class="card-body">
-				<h5 class="card-title mb-3 text-color">
-					<span (click)="ShowCalendarDay(appointmentDay.timestamp)">{{ appointmentDay.date }}</span>
-				</h5>
-            <ul class="list-group list-group-flush d-flex flex-column" *ngFor="let appointment of appointmentDay.appointments">
-               <calendo-small-appointment-item class="d-inline-flex" [appointment]="appointment"></calendo-small-appointment-item>
-            </ul>
-			</div>
-		</div>
-	</div>
-   
-   <calendo-appointment-modal (save)="CreateAppointment($event)"></calendo-appointment-modal>
-</div>
\ No newline at end of file
+<div class="container-fluid ms-motion-slideUpIn" style="padding-bottom: 56px">
+	<h1 class="text-center mt-3 text-color font-weight-light">
+		{{ locale.header }}
+		<button
+			type="button"
+			class="btn btn-outline-primary btn-sm mb-1"
+			(click)="ShowNewAppointmentModal()"
+		>
+			<fa-icon [icon]="faPlus"></fa-icon>
+		</button>
+	</h1>
+
+	<p
+		class="no-items-message font-weight-light text-center mt-3 text-color"
+		*ngIf="dataService.appointmentDays.length == 0"
+	>
+		{{ locale.noAppointments }}
+	</p>
+
+	<!-- List of future appointments -->
+	<div class="row">
+		<div
+			class="card offset-1 col-11 col-md-9 col-lg-7 mx-auto my-4 theme-background-color-secondary ms-depth-4"
+			*ngFor="let appointmentDay of dataService.appointmentDays"
+		>
+			<div class="card-body">
+				<h5 class="card-title mb-3 text-color">
+					<span (click)="ShowCalendarDay(appointmentDay.timestamp)">{{
+						appointmentDay.date
+					}}</span>
+				</h5>
+				<ul
+					class="list-group list-group-flush d-flex flex-column"
+					*ngFor="let appointment of appointmentDay.appointments"
+				>
+					<calendo-small-appointment-item
+						class="d-inline-flex"
+						[appointment]="appointment"
+					></calendo-small-appointment-item>
+				</ul>
+			</div>
+		</div>
+	</div>
+
+	<!-- List of old appointments -->
+	<h2
+		class="font-weight-light text-center mt-3 text-color"
+		*ngIf="dataService.oldAppointmentDays.length > 0"
+	>
+		{{ locale.oldAppointments }}
+	</h2>
+
+	<div class="row" *ngIf="dataService.oldAppointmentDays.length > 0">
+		<div
+			class="card offset-1 col-11 col-md-9 col-lg-7 mx-auto my-4 theme-background-color-secondary ms-depth-4"
+			*ngFor="let appointmentDay of dataService.oldAppointmentDays"
+		>
+			<div class="card-body">
+				<h5 class="card-title mb-3 text-color">
+					<span (click)="ShowCalendarDay(appointmentDay.timestamp)">{{
+						appointmentDay.date
+					}}</span>
+				</h5>
+				<ul
+					class="list-group list-group-flush d-flex flex-column"
+					*ngFor="let appointment of appointmentDay.appointments"
+				>
+					<calendo-small-appointment-item
+						class="d-inline-flex"
+						[appointment]="appointment"
+					></calendo-small-appointment-item>
+				</ul>
+			</div>
+		</div>
+	</div>
+
+	<calendo-appointment-modal
+		(save)="CreateAppointment($event)"
+	></calendo-appointment-modal>
+</div>
diff --git a/src/app/pages/appointments-page/appointments-page.component.scss b/src/app/pages/appointments-page/appointments-page.component.scss
index ca73190..e2a4fe3 100644
--- a/src/app/pages/appointments-page/appointments-page.component.scss
+++ b/src/app/pages/appointments-page/appointments-page.component.scss
@@ -1,3 +1,3 @@
-.dropdown-toggle::after {
-	display:none;
-}
\ No newline at end of file
+.dropdown-toggle::after {
+	display: none;
+}
diff --git a/src/app/pages/appointments-page/appointments-page.component.ts b/src/app/pages/appointments-page/appointments-page.component.ts
index dbbe0c3..bf0c180 100644
--- a/src/app/pages/appointments-page/appointments-page.component.ts
+++ b/src/app/pages/appointments-page/appointments-page.component.ts
@@ -1,53 +1,58 @@
-import { Component, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
-import { DataService } from '../../services/data-service';
-import { AppointmentModalComponent } from '../../components/appointment-modal/appointment-modal.component';
-import { Appointment } from '../../models/Appointment';
-import { enUS } from '../../../locales/locales';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { MatSnackBar } from '@angular/material/snack-bar';
-
-@Component({
-   selector: "calendo-appointments-page",
-   templateUrl: "./appointments-page.component.html",
-   styleUrls: [
-      "./appointments-page.component.scss"
-   ]
-})
-export class AppointmentsPageComponent{
-   locale = enUS.appointmentsPage
-   snackbarLocale = enUS.snackbar
-   faPlus = faPlus
-   @ViewChild(AppointmentModalComponent, { static: true })
-   private newAppointmentModalComponent: AppointmentModalComponent
-
-   constructor(
-      public dataService: DataService,
-      public router: Router,
-      public snackBar: MatSnackBar
-   ){
-      this.locale = this.dataService.GetLocale().appointmentsPage
-      this.snackbarLocale = this.dataService.GetLocale().snackbar
-      this.dataService.HideWindowsBackButton()
-   }
-
-   ShowNewAppointmentModal(){
-      this.newAppointmentModalComponent.Show()
-   }
-
-   CreateAppointment(appointment: Appointment){
-      this.dataService.AddAppointment(appointment)
-
-      // Show snackbar
-		this.snackBar.open(this.snackbarLocale.appointmentCreated, this.snackbarLocale.show, {duration: 3000}).onAction().subscribe(() => {
-			// Show the day of the appointment
-			this.router.navigate(["calendar/day", appointment.start])
-		})
-
-		this.dataService.AdaptSnackbarPosition()
-	}
-
-	ShowCalendarDay(date: number){
-		this.router.navigate(['/calendar/day', date]);
-	}
-}
\ No newline at end of file
+import { Component, ViewChild } from "@angular/core"
+import { Router } from "@angular/router"
+import { DataService } from "../../services/data-service"
+import { AppointmentModalComponent } from "../../components/appointment-modal/appointment-modal.component"
+import { Appointment } from "../../models/Appointment"
+import { enUS } from "../../../locales/locales"
+import { faPlus } from "@fortawesome/free-solid-svg-icons"
+import { MatSnackBar } from "@angular/material/snack-bar"
+
+@Component({
+	selector: "calendo-appointments-page",
+	templateUrl: "./appointments-page.component.html",
+	styleUrls: ["./appointments-page.component.scss"]
+})
+export class AppointmentsPageComponent {
+	locale = enUS.appointmentsPage
+	snackbarLocale = enUS.snackbar
+	faPlus = faPlus
+	@ViewChild(AppointmentModalComponent, { static: true })
+	private newAppointmentModalComponent: AppointmentModalComponent
+
+	constructor(
+		public dataService: DataService,
+		public router: Router,
+		public snackBar: MatSnackBar
+	) {
+		this.locale = this.dataService.GetLocale().appointmentsPage
+		this.snackbarLocale = this.dataService.GetLocale().snackbar
+		this.dataService.HideWindowsBackButton()
+	}
+
+	ShowNewAppointmentModal() {
+		this.newAppointmentModalComponent.Show()
+	}
+
+	CreateAppointment(appointment: Appointment) {
+		this.dataService.AddAppointment(appointment)
+
+		// Show snackbar
+		this.snackBar
+			.open(
+				this.snackbarLocale.appointmentCreated,
+				this.snackbarLocale.show,
+				{ duration: 3000 }
+			)
+			.onAction()
+			.subscribe(() => {
+				// Show the day of the appointment
+				this.router.navigate(["calendar/day", appointment.start])
+			})
+
+		this.dataService.AdaptSnackbarPosition()
+	}
+
+	ShowCalendarDay(date: number) {
+		this.router.navigate(["/calendar/day", date])
+	}
+}
diff --git a/src/app/pages/calendar-day-page/calendar-day-page.component.html b/src/app/pages/calendar-day-page/calendar-day-page.component.html
index 5e0d46b..55f96f0 100644
--- a/src/app/pages/calendar-day-page/calendar-day-page.component.html
+++ b/src/app/pages/calendar-day-page/calendar-day-page.component.html
@@ -1,52 +1,106 @@
-<div class="container ms-motion-slideUpIn" style="padding-bottom: 56px">
-	<div class="d-flex">
-		<div class="mx-auto d-flex">
-			<button
-				type="button" 
-				class="btn mt-3 text-color icon-button" 
-				style="height: 40px; width: 45px; padding: 2px 0px 0px 0px;"
-				(click)="GoBack()">
-				<fab-icon iconName="Back" [styles]="backButtonIconStyles"></fab-icon>
-			</button>
-			<h2 class="text-left mt-3 ml-3 text-color font-weight-light">{{ getCurrentDate() }}</h2>
-		</div>
-	</div>
-
-   <div class="d-flex flex-column text-color">
-      <h3 class="mt-4 mb-3">
-         {{ locale.appointments }}
-         <button type="button" class="btn btn-outline-primary btn-sm mb-1" (click)="ShowNewAppointmentModal()"><fa-icon [icon]="faPlus"></fa-icon></button>
-      </h3>
-
-      <p class="no-items-message font-weight-light" *ngIf="dataService.selectedDayAppointments.length == 0">
-			{{ locale.noAppointments }}
-		</p>
-		
-      <calendo-small-appointment-item class="d-inline-flex" [appointment]="appointment" *ngFor="let appointment of dataService.selectedDayAppointments"></calendo-small-appointment-item>
-   </div>
-   
-   <div class="text-color">
-      <h3 class="mt-4 mb-3" ngbDropdown placement="bottom-left">
-			{{ locale.todos }}
-			<button type="button" class="btn btn-outline-primary btn-sm mb-1" ngbDropdownToggle>
-				<fa-icon [icon]="faPlus"></fa-icon>
-			</button>
-			
-			<div ngbDropdownMenu class="theme-background-color-tertiary ms-depth-4 ms-motion-slideDownIn">
-				<button class="dropdown-item text-color cursor" (click)="ShowNewTodoModal()">{{ locale.newTodo }}</button>
-				<button class="dropdown-item text-color cursor" (click)="ShowTodoListModal()">{{ locale.newTodoList }}</button>
-			</div>
-		</h3>
-		
-		<p class="font-weight-light no-items-message" *ngIf="dataService.selectedDayTodos.length == 0 && dataService.selectedDayTodoLists.length == 0">
-			{{ locale.noTodos }}
-		</p>
-      
-		<calendo-small-todo-item [todo]="todo" (delete)="DeleteTodo(todo)" *ngFor="let todo of dataService.selectedDayTodos"></calendo-small-todo-item>
-		<calendo-small-todo-list-item [todoList]="todoList" *ngFor="let todoList of dataService.selectedDayTodoLists"></calendo-small-todo-list-item>
-   </div>
-
-   <calendo-appointment-modal (save)="CreateAppointment($event)"></calendo-appointment-modal>
-   <calendo-new-todo-modal (save)="CreateTodo($event)"></calendo-new-todo-modal>
-   <calendo-todo-list-modal #todoListModal (save)="CreateTodoList($event)"></calendo-todo-list-modal>
-</div>
\ No newline at end of file
+<div class="container ms-motion-slideUpIn" style="padding-bottom: 56px">
+	<div class="d-flex">
+		<div class="mx-auto d-flex">
+			<button
+				type="button"
+				class="btn mt-3 text-color icon-button"
+				style="height: 40px; width: 45px; padding: 2px 0px 0px 0px"
+				(click)="GoBack()"
+			>
+				<fab-icon
+					iconName="Back"
+					[styles]="backButtonIconStyles"
+				></fab-icon>
+			</button>
+			<h2 class="text-left mt-3 ml-3 text-color font-weight-light">
+				{{ getCurrentDate() }}
+			</h2>
+		</div>
+	</div>
+
+	<div class="d-flex flex-column text-color">
+		<h3 class="mt-4 mb-3">
+			{{ locale.appointments }}
+			<button
+				type="button"
+				class="btn btn-outline-primary btn-sm mb-1"
+				(click)="ShowNewAppointmentModal()"
+			>
+				<fa-icon [icon]="faPlus"></fa-icon>
+			</button>
+		</h3>
+
+		<p
+			class="no-items-message font-weight-light"
+			*ngIf="dataService.selectedDayAppointments.length == 0"
+		>
+			{{ locale.noAppointments }}
+		</p>
+
+		<calendo-small-appointment-item
+			class="d-inline-flex"
+			[appointment]="appointment"
+			*ngFor="let appointment of dataService.selectedDayAppointments"
+		></calendo-small-appointment-item>
+	</div>
+
+	<div class="text-color">
+		<h3 class="mt-4 mb-3" ngbDropdown placement="bottom-left">
+			{{ locale.todos }}
+			<button
+				type="button"
+				class="btn btn-outline-primary btn-sm mb-1"
+				ngbDropdownToggle
+			>
+				<fa-icon [icon]="faPlus"></fa-icon>
+			</button>
+
+			<div
+				ngbDropdownMenu
+				class="theme-background-color-tertiary ms-depth-4 ms-motion-slideDownIn"
+			>
+				<button
+					class="dropdown-item text-color cursor"
+					(click)="ShowNewTodoModal()"
+				>
+					{{ locale.newTodo }}
+				</button>
+				<button
+					class="dropdown-item text-color cursor"
+					(click)="ShowTodoListModal()"
+				>
+					{{ locale.newTodoList }}
+				</button>
+			</div>
+		</h3>
+
+		<p
+			class="font-weight-light no-items-message"
+			*ngIf="
+				dataService.selectedDayTodos.length == 0 &&
+				dataService.selectedDayTodoLists.length == 0
+			"
+		>
+			{{ locale.noTodos }}
+		</p>
+
+		<calendo-small-todo-item
+			[todo]="todo"
+			(delete)="DeleteTodo(todo)"
+			*ngFor="let todo of dataService.selectedDayTodos"
+		></calendo-small-todo-item>
+		<calendo-small-todo-list-item
+			[todoList]="todoList"
+			*ngFor="let todoList of dataService.selectedDayTodoLists"
+		></calendo-small-todo-list-item>
+	</div>
+
+	<calendo-appointment-modal
+		(save)="CreateAppointment($event)"
+	></calendo-appointment-modal>
+	<calendo-new-todo-modal (save)="CreateTodo($event)"></calendo-new-todo-modal>
+	<calendo-todo-list-modal
+		#todoListModal
+		(save)="CreateTodoList($event)"
+	></calendo-todo-list-modal>
+</div>
diff --git a/src/app/pages/calendar-day-page/calendar-day-page.component.ts b/src/app/pages/calendar-day-page/calendar-day-page.component.ts
index 70b0fb2..1239f7c 100644
--- a/src/app/pages/calendar-day-page/calendar-day-page.component.ts
+++ b/src/app/pages/calendar-day-page/calendar-day-page.component.ts
@@ -1,131 +1,155 @@
-import { Component, ViewChild } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import * as moment from 'moment';
-import { DataService } from '../../services/data-service';
-import { AppointmentModalComponent } from '../../components/appointment-modal/appointment-modal.component';
-import { NewTodoModalComponent } from '../../components/new-todo-modal/new-todo-modal.component';
-import { Appointment } from '../../models/Appointment';
-import { Todo } from '../../models/Todo';
-import { TodoList } from '../../models/TodoList';
-import { enUS } from '../../../locales/locales';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { TodoListModalComponent } from 'src/app/components/todo-list-modal/todo-list-modal.component';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { IIconStyles } from 'office-ui-fabric-react';
-import { Location } from '@angular/common';
-
-@Component({
-   selector: "calendo-calendar-day-page",
-   templateUrl: "./calendar-day-page.component.html"
-})
-export class CalendarDayPageComponent{
-	locale = enUS.calendarDayPage;
-	snackbarLocale = enUS.snackbar;
-   faPlus = faPlus;
-   @ViewChild(AppointmentModalComponent, { static: true })
-   private newAppointmentModalComponent: AppointmentModalComponent;
-   @ViewChild(NewTodoModalComponent, { static: true })
-   private newTodoModalComponent: NewTodoModalComponent;
-   @ViewChild('todoListModal', { static: true })
-   private todoListModal: TodoListModalComponent;
-   date: moment.Moment = moment();
-   backButtonIconStyles: IIconStyles = {
-		root: {
-         fontSize: 19
-		}
-	}
-
-   constructor(
-		public dataService: DataService,
-		private router: Router,
-      private route: ActivatedRoute,
-      private location: Location,
-		private snackBar: MatSnackBar
-	){
-      moment.locale(this.dataService.locale);
-		this.locale = this.dataService.GetLocale().calendarDayPage;
-		this.snackbarLocale = this.dataService.GetLocale().snackbar;
-      this.dataService.HideWindowsBackButton();
-   }
-
-   ngOnInit(){
-      this.route.params.subscribe(param => {
-         if(param.time){
-            this.date = moment.unix(param.time).startOf('day');
-            this.dataService.selectedDay = this.date;
-            
-            this.dataService.LoadAllAppointments();
-            this.dataService.LoadAllTodos();
-         }
-      });
-   }
-
-   getCurrentDate(){
-      return this.date.format(this.locale.formats.currentDay);
-   }
-
-   ShowNewAppointmentModal(){
-      this.newAppointmentModalComponent.Show(null, this.date.unix());
-   }
-
-   CreateAppointment(appointment: Appointment){
-		this.dataService.AddAppointment(appointment);
-		
-		// Show snackbar if the appointment was created for another day
-		if(this.date.unix() != moment(appointment.start * 1000).startOf('day').unix()){
-			// Another day
-			this.snackBar.open(this.snackbarLocale.appointmentCreated, this.snackbarLocale.show, {duration: 3000}).onAction().subscribe(() => {
-				// Show the day of the appointment
-				this.router.navigate(["calendar/day", appointment.start])
-			})
-
-			this.dataService.AdaptSnackbarPosition()
-		}
-   }
-
-   ShowNewTodoModal(){
-      this.newTodoModalComponent.Show(this.date.unix());
-   }
-
-   CreateTodo(todo: Todo){
-		this.dataService.AddTodo(todo);
-		
-		// Show snackbar if the todo was created for another day
-		if(todo.time == 0){
-			// Show snackbar without action
-			this.snackBar.open(this.snackbarLocale.todoCreated, null, {duration: 3000})
-		}else if(this.date.unix() != todo.time){
-			// Another day
-			this.snackBar.open(this.snackbarLocale.todoCreated, this.snackbarLocale.show, {duration: 3000}).onAction().subscribe(() => {
-				// Show the day of the todo
-				this.router.navigate(["calendar/day", todo.time])
-			})
-		}
-
-		this.dataService.AdaptSnackbarPosition()
-   }
-
-   DeleteTodo(todo: Todo){
-      this.dataService.RemoveTodo(todo);
-   }
-
-   ShowTodoListModal(){
-      this.todoListModal.Show(null, this.date.unix());
-   }
-
-   CreateTodoList(todoList: TodoList){
-		this.dataService.AddTodoList(todoList);
-		
-		// Show snackbar
-		this.snackBar.open(this.snackbarLocale.todoListCreated, this.snackbarLocale.show, {duration: 3000}).onAction().subscribe(() => {
-			// Show the todo list
-			this.router.navigate(["todolist", todoList.uuid])
-		})
-
-		this.dataService.AdaptSnackbarPosition()
-   }
-
-   GoBack(){
-      this.location.back();
-   }
-}
\ No newline at end of file
+import { Component, ViewChild } from "@angular/core"
+import { Router, ActivatedRoute } from "@angular/router"
+import * as moment from "moment"
+import { DataService } from "../../services/data-service"
+import { AppointmentModalComponent } from "../../components/appointment-modal/appointment-modal.component"
+import { NewTodoModalComponent } from "../../components/new-todo-modal/new-todo-modal.component"
+import { Appointment } from "../../models/Appointment"
+import { Todo } from "../../models/Todo"
+import { TodoList } from "../../models/TodoList"
+import { enUS } from "../../../locales/locales"
+import { faPlus } from "@fortawesome/free-solid-svg-icons"
+import { TodoListModalComponent } from "src/app/components/todo-list-modal/todo-list-modal.component"
+import { MatSnackBar } from "@angular/material/snack-bar"
+import { IIconStyles } from "office-ui-fabric-react"
+import { Location } from "@angular/common"
+
+@Component({
+	selector: "calendo-calendar-day-page",
+	templateUrl: "./calendar-day-page.component.html"
+})
+export class CalendarDayPageComponent {
+	locale = enUS.calendarDayPage
+	snackbarLocale = enUS.snackbar
+	faPlus = faPlus
+	@ViewChild(AppointmentModalComponent, { static: true })
+	private newAppointmentModalComponent: AppointmentModalComponent
+	@ViewChild(NewTodoModalComponent, { static: true })
+	private newTodoModalComponent: NewTodoModalComponent
+	@ViewChild("todoListModal", { static: true })
+	private todoListModal: TodoListModalComponent
+	date: moment.Moment = moment()
+	backButtonIconStyles: IIconStyles = {
+		root: {
+			fontSize: 19
+		}
+	}
+
+	constructor(
+		public dataService: DataService,
+		private router: Router,
+		private route: ActivatedRoute,
+		private location: Location,
+		private snackBar: MatSnackBar
+	) {
+		moment.locale(this.dataService.locale)
+		this.locale = this.dataService.GetLocale().calendarDayPage
+		this.snackbarLocale = this.dataService.GetLocale().snackbar
+		this.dataService.HideWindowsBackButton()
+	}
+
+	ngOnInit() {
+		this.route.params.subscribe(param => {
+			if (param.time) {
+				this.date = moment.unix(param.time).startOf("day")
+				this.dataService.selectedDay = this.date
+
+				this.dataService.LoadAllAppointments()
+				this.dataService.LoadAllTodos()
+			}
+		})
+	}
+
+	getCurrentDate() {
+		return this.date.format(this.locale.formats.currentDay)
+	}
+
+	ShowNewAppointmentModal() {
+		this.newAppointmentModalComponent.Show(null, this.date.unix())
+	}
+
+	CreateAppointment(appointment: Appointment) {
+		this.dataService.AddAppointment(appointment)
+
+		// Show snackbar if the appointment was created for another day
+		if (
+			this.date.unix() !=
+			moment(appointment.start * 1000)
+				.startOf("day")
+				.unix()
+		) {
+			// Another day
+			this.snackBar
+				.open(
+					this.snackbarLocale.appointmentCreated,
+					this.snackbarLocale.show,
+					{ duration: 3000 }
+				)
+				.onAction()
+				.subscribe(() => {
+					// Show the day of the appointment
+					this.router.navigate(["calendar/day", appointment.start])
+				})
+
+			this.dataService.AdaptSnackbarPosition()
+		}
+	}
+
+	ShowNewTodoModal() {
+		this.newTodoModalComponent.Show(this.date.unix())
+	}
+
+	CreateTodo(todo: Todo) {
+		this.dataService.AddTodo(todo)
+
+		// Show snackbar if the todo was created for another day
+		if (todo.time == 0) {
+			// Show snackbar without action
+			this.snackBar.open(this.snackbarLocale.todoCreated, null, {
+				duration: 3000
+			})
+		} else if (this.date.unix() != todo.time) {
+			// Another day
+			this.snackBar
+				.open(this.snackbarLocale.todoCreated, this.snackbarLocale.show, {
+					duration: 3000
+				})
+				.onAction()
+				.subscribe(() => {
+					// Show the day of the todo
+					this.router.navigate(["calendar/day", todo.time])
+				})
+		}
+
+		this.dataService.AdaptSnackbarPosition()
+	}
+
+	DeleteTodo(todo: Todo) {
+		this.dataService.RemoveTodo(todo)
+	}
+
+	ShowTodoListModal() {
+		this.todoListModal.Show(null, this.date.unix())
+	}
+
+	CreateTodoList(todoList: TodoList) {
+		this.dataService.AddTodoList(todoList)
+
+		// Show snackbar
+		this.snackBar
+			.open(this.snackbarLocale.todoListCreated, this.snackbarLocale.show, {
+				duration: 3000
+			})
+			.onAction()
+			.subscribe(() => {
+				// Show the todo list
+				this.router.navigate(["todolist", todoList.uuid])
+			})
+
+		this.dataService.AdaptSnackbarPosition()
+	}
+
+	GoBack() {
+		this.location.back()
+	}
+}
diff --git a/src/app/pages/calendar-page/calendar-page.component.html b/src/app/pages/calendar-page/calendar-page.component.html
index 647b5d7..bb96737 100644
--- a/src/app/pages/calendar-page/calendar-page.component.html
+++ b/src/app/pages/calendar-page/calendar-page.component.html
@@ -1,94 +1,170 @@
-<div (window:resize)="onResize()">
-   <div id="calendar-top-bar">
-		<h3 class="mt-2 ml-3 text-color" style="font-weight: 300">
-			<button id="calendar-show-previous-button" class="btn theme-background-color-secondary text-color icon-button" *ngIf="!showMobileLayout" (click)="ShowPrevious()" type="button" style="height: 36px; width: 36px">
-            <i class="ms-Icon ms-Icon--ChevronLeftSmall" style="font-size: 12px; margin-left: -3px" aria-hidden="true"></i>
-			</button>
-			<button id="calendar-show-next-button" class="btn theme-background-color-secondary text-color icon-button ml-2 mr-3" *ngIf="!showMobileLayout" (click)="ShowNext()" type="button" style="height: 36px; width: 36px">
-            <i class="ms-Icon ms-Icon--ChevronRightSmall" style="font-size: 12px; margin-right: -3px" aria-hidden="true"></i>
-			</button>
-			{{ getCurrentMonth() }} {{ getCurrentYear() }}
-		</h3>
-	</div>
-	
-   <div id="calendar-label-div" class="position-absolute ml-1">
-      <span class="position-absolute" *ngFor="let day of weekDayLabels; let i = index;" [style.margin-left.px]="calendarDayWidth * i">
-			<span class="font-weight-light text-color">{{ day }}</span><br>
-			<span
-				[style.background-color]="currentDayOfWeek == i ? (dataService.darkTheme ? '#3d4753' : '#e3e4e5') : ''" 
-				[style.padding-left.px]="currentDayOfWeek == i ? 2 : 0"
-				[style.padding-right.px]="currentDayOfWeek == i ? 2 : 0"
-				(click)="goToWeekday(i)"
-				class="text-color cursor"
-				*ngIf="showMobileLayout">
-				{{ currentWeekDays[i] }}
-			</span>
-		</span>
-	</div>
-	
-	<div
-		id="calendarContainer" #calendarContainer 
-		[style.height.px]="calendarHeight" 
-		[style.width.px]="calendarWidth" 
-		style="margin-top: 30px">
-
-		<div class="d-flex" *ngFor="let week of dataService.desktopCalendarDaysDates; let i = index;">
-			<div
-				[ngClass]="dataService.darkTheme ? 'border border-dark' : 'border'" 
-				*ngFor="let date of week; let j = index;" 
-				[style.height.px]="calendarDayHeight" 
-				[style.width.px]="calendarDayWidth" 
-				[style.background-color]="getDayBackgroundColor(i, j)"
-				(click)="dayClicked(date)">
-
-				<span class="text-color">{{ getDayOfDate(date) }}</span>
-
-				<!-- Render todos -->
-				<span class="badge badge-primary ml-1" *ngIf='dataService.desktopCalendarDaysTodos[i][j].length > 0'>{{ dataService.desktopCalendarDaysTodos[i][j].length }} {{ locale.todo }}<span *ngIf="dataService.desktopCalendarDaysTodos[i][j].length > 1">{{ locale.s }}</span></span>
-
-				<!-- Render appointments -->
-				<div>
-					<calendo-small-appointment-item
-						[appointment]="appointment"
-						[enableDropdown]="false" 
-						[compact]="true" 
-						*ngFor="let appointment of dataService.desktopCalendarDaysAppointments[i][j]; let k = index;">
-					</calendo-small-appointment-item>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<div
-		id="mobileCalendarContainer" #mobileCalendarContainer 
-		style="overflow: scroll; margin-top: 60px;" 
-		[style.height.px]="calendarHeight" 
-		[style.width.px]="calendarWidth">
-
-		<div
-			class="border" 
-			[ngClass]="isTimestampToday(date) ? (dataService.darkTheme ? 'border-dark theme-background-color-primary' : 'light-theme-calendar-day') : (dataService.darkTheme ? 'border-dark theme-background-color-secondary' : 'theme-background-color-primary')"
-			*ngFor="let date of dataService.mobileCalendarDaysDates; let i = index;"
-			[style.height.px]="calendarDayHeight"
-			style="position: relative;"
-			(click)="dayClicked(date)">
-
-			<span class="text-color">{{ getFullDayOfDate(date) }}</span>
-
-			<!-- Render todos -->
-			<span class="badge badge-primary ml-2" *ngIf='dataService.mobileCalendarDaysTodos[i].length > 0'>
-				{{ dataService.mobileCalendarDaysTodos[i].length }} {{ locale.todo }}<span *ngIf="dataService.mobileCalendarDaysTodos[i].length > 1">{{ locale.s }}</span>
-			</span>
-
-			<!-- Render appointments -->
-			<div class="d-flex flex-column">
-				<calendo-small-appointment-item
-					*ngFor="let appointment of dataService.mobileCalendarDaysAppointments[i]; let k = index;"
-					[appointment]="appointment" 
-					[enableDropdown]="false" 
-					[compact]="true">
-				</calendo-small-appointment-item>
-			</div>
-		</div>
-	</div>
-</div>
\ No newline at end of file
+<div (window:resize)="onResize()">
+	<div id="calendar-top-bar">
+		<h3 class="mt-2 ml-3 text-color" style="font-weight: 300">
+			<button
+				id="calendar-show-previous-button"
+				class="btn theme-background-color-secondary text-color icon-button"
+				*ngIf="!showMobileLayout"
+				(click)="ShowPrevious()"
+				type="button"
+				style="height: 36px; width: 36px"
+			>
+				<i
+					class="ms-Icon ms-Icon--ChevronLeftSmall"
+					style="font-size: 12px; margin-left: -3px"
+					aria-hidden="true"
+				></i>
+			</button>
+			<button
+				id="calendar-show-next-button"
+				class="btn theme-background-color-secondary text-color icon-button ml-2 mr-3"
+				*ngIf="!showMobileLayout"
+				(click)="ShowNext()"
+				type="button"
+				style="height: 36px; width: 36px"
+			>
+				<i
+					class="ms-Icon ms-Icon--ChevronRightSmall"
+					style="font-size: 12px; margin-right: -3px"
+					aria-hidden="true"
+				></i>
+			</button>
+			{{ getCurrentMonth() }} {{ getCurrentYear() }}
+		</h3>
+	</div>
+
+	<div id="calendar-label-div" class="position-absolute ml-1">
+		<span
+			class="position-absolute"
+			*ngFor="let day of weekDayLabels; let i = index"
+			[style.margin-left.px]="calendarDayWidth * i"
+		>
+			<span class="font-weight-light text-color">{{ day }}</span>
+			<br />
+			<span
+				[style.background-color]="
+					currentDayOfWeek == i
+						? dataService.darkTheme
+							? '#3d4753'
+							: '#e3e4e5'
+						: ''
+				"
+				[style.padding-left.px]="currentDayOfWeek == i ? 2 : 0"
+				[style.padding-right.px]="currentDayOfWeek == i ? 2 : 0"
+				(click)="goToWeekday(i)"
+				class="text-color cursor"
+				*ngIf="showMobileLayout"
+			>
+				{{ currentWeekDays[i] }}
+			</span>
+		</span>
+	</div>
+
+	<div
+		id="calendarContainer"
+		#calendarContainer
+		[style.height.px]="calendarHeight"
+		[style.width.px]="calendarWidth"
+		style="margin-top: 30px"
+	>
+		<div
+			class="d-flex"
+			*ngFor="
+				let week of dataService.desktopCalendarDaysDates;
+				let i = index
+			"
+		>
+			<div
+				[ngClass]="dataService.darkTheme ? 'border border-dark' : 'border'"
+				*ngFor="let date of week; let j = index"
+				[style.height.px]="calendarDayHeight"
+				[style.width.px]="calendarDayWidth"
+				[style.background-color]="getDayBackgroundColor(i, j)"
+				(click)="dayClicked(date)"
+			>
+				<span class="text-color">{{ getDayOfDate(date) }}</span>
+
+				<!-- Render todos -->
+				<span
+					class="badge badge-primary ml-1"
+					*ngIf="dataService.desktopCalendarDaysTodos[i][j].length > 0"
+				>
+					{{ dataService.desktopCalendarDaysTodos[i][j].length }}
+					{{ locale.todo }}
+					<span
+						*ngIf="dataService.desktopCalendarDaysTodos[i][j].length > 1"
+					>
+						{{ locale.s }}
+					</span>
+				</span>
+
+				<!-- Render appointments -->
+				<div>
+					<calendo-small-appointment-item
+						[appointment]="appointment"
+						[enableDropdown]="false"
+						[compact]="true"
+						*ngFor="
+							let appointment of dataService
+								.desktopCalendarDaysAppointments[i][j];
+							let k = index
+						"
+					></calendo-small-appointment-item>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div
+		id="mobileCalendarContainer"
+		#mobileCalendarContainer
+		style="overflow: scroll; margin-top: 60px"
+		[style.height.px]="calendarHeight"
+		[style.width.px]="calendarWidth"
+	>
+		<div
+			class="border"
+			[ngClass]="
+				isTimestampToday(date)
+					? dataService.darkTheme
+						? 'border-dark theme-background-color-primary'
+						: 'light-theme-calendar-day'
+					: dataService.darkTheme
+					? 'border-dark theme-background-color-secondary'
+					: 'theme-background-color-primary'
+			"
+			*ngFor="let date of dataService.mobileCalendarDaysDates; let i = index"
+			[style.height.px]="calendarDayHeight"
+			style="position: relative"
+			(click)="dayClicked(date)"
+		>
+			<span class="text-color">{{ getFullDayOfDate(date) }}</span>
+
+			<!-- Render todos -->
+			<span
+				class="badge badge-primary ml-2"
+				*ngIf="dataService.mobileCalendarDaysTodos[i].length > 0"
+			>
+				{{ dataService.mobileCalendarDaysTodos[i].length }} {{ locale.todo }}
+				<span *ngIf="dataService.mobileCalendarDaysTodos[i].length > 1">
+					{{ locale.s }}
+				</span>
+			</span>
+
+			<!-- Render appointments -->
+			<div class="d-flex flex-column">
+				<calendo-small-appointment-item
+					*ngFor="
+						let appointment of dataService.mobileCalendarDaysAppointments[
+							i
+						];
+						let k = index
+					"
+					[appointment]="appointment"
+					[enableDropdown]="false"
+					[compact]="true"
+				></calendo-small-appointment-item>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/app/pages/calendar-page/calendar-page.component.scss b/src/app/pages/calendar-page/calendar-page.component.scss
index 585113d..22884d3 100644
--- a/src/app/pages/calendar-page/calendar-page.component.scss
+++ b/src/app/pages/calendar-page/calendar-page.component.scss
@@ -1,7 +1,7 @@
-.hidden{
-   display: none;
-}
-
-.light-theme-calendar-day{
-   background-color: #f0f0f0
-}
\ No newline at end of file
+.hidden {
+	display: none;
+}
+
+.light-theme-calendar-day {
+	background-color: #f0f0f0;
+}
diff --git a/src/app/pages/calendar-page/calendar-page.component.ts b/src/app/pages/calendar-page/calendar-page.component.ts
index a4ac085..a0c30af 100644
--- a/src/app/pages/calendar-page/calendar-page.component.ts
+++ b/src/app/pages/calendar-page/calendar-page.component.ts
@@ -1,339 +1,393 @@
-import { Component, ViewChild, ElementRef } from '@angular/core';
-import { Router } from '@angular/router';
-import * as moment from 'moment';
-declare var $: any;
-import { DataService } from '../../services/data-service';
-import { enUS } from '../../../locales/locales';
-import * as platform from 'platform';
-import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
-
-@Component({
-   selector: "calendo-calendar-page",
-   templateUrl: "./calendar-page.component.html",
-   styleUrls: [
-      "./calendar-page.component.scss"
-   ]
-})
-export class CalendarPageComponent{
-	locale = enUS.calendarPage;
-	faAngleLeft = faAngleLeft;
-	faAngleRight = faAngleRight;
-	@ViewChild("calendarContainer", { read: ElementRef, static: true }) calendarContainer: ElementRef<any>;
-	@ViewChild("mobileCalendarContainer", { read: ElementRef, static: true }) mobileCalendarContainer: ElementRef<any>;
-	weekDayLabels: string[] = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
-	dayFormat: string = "D";
-	fullDayFormat: string = "dddd D";
-
-	showMobileLayout: boolean = true;
-	isInitializing: boolean = true;
-	calendarHeight: number = 500;
-	calendarWidth: number = 200;
-	calendarDayHeight: number = this.showMobileLayout ? this.calendarHeight / 7 :  this.calendarHeight / 5;
-   calendarDayWidth: number = window.innerWidth / 7;
-
-	topDay: moment.Moment = moment();	// The day at the very top of the mobile view
-	currentDay: moment.Moment = moment();
-	currentDayOfWeek: number = 0;
-	position: number = 1;
-	visibleRows: number = 5;		// The number of days that are visible
-	dayBuffer: number = 14;			// The number of days of each before and after the current day
-	scrolled: boolean = false;		// If true, load the todos and appointments in the days after the 2 seconds interval
-	currentWeekDays: string[] = ["1", "2", "3", "4", "5", "6", "7"];
-
-	constructor(
-		public dataService: DataService,
-		private router: Router
-	) {
-		this.locale = this.dataService.GetLocale().calendarPage;
-		moment.locale(this.dataService.locale);
-		this.dataService.HideWindowsBackButton();
-
-		// Set the weekday labels in the current language
-		let weekdays = moment.weekdaysMin();
-
-		for(let i = 0; i < weekdays.length; i++){
-			if(i < 6){
-				this.weekDayLabels[i] = weekdays[i + 1];
-			}else{
-				this.weekDayLabels[i] = weekdays[0];
-			}
-		}
-	}
-
-   async ngOnInit(){
-		await this.initialize();
-
-		$("#calendarContainer").scroll(() => this.onScroll());
-		$("#mobileCalendarContainer").scroll(() => this.onScroll());
-
-		$(document).keydown((e) => {
-			if(this.showMobileLayout) return;
-         if(e.keyCode === 38 || e.keyCode === 37){
-				// Arrow up or Arrow left
-				this.ShowPrevious();
-         }else if(e.keyCode === 40 || e.keyCode === 39){
-            // Arrow down or Arrow right
-            this.ShowNext();
-         }
-      });
-
-      $(document).bind('mousewheel', (e) => {
-			if(this.showMobileLayout) return;
-         if(e.originalEvent.wheelDelta > 0){
-            // Wheel up
-            this.ShowPrevious();
-         }else{
-            // Wheel down
-            this.ShowNext();
-         }
-      });
-   }
-
-   async initialize(){
-		this.topDay = moment().subtract(this.dayBuffer, 'days');
-
-		this.fillDaysMobile();
-		this.fillDaysDesktop();
-		
-		setTimeout(() => {
-			this.setSize();
-
-			setTimeout(() => {
-				this.scrollToDate(this.currentDay);
-				this.setSize();
-
-				setTimeout(() => {
-					this.isInitializing = false;
-				}, 500);
-			}, 1);
-		}, 1);
-
-		if(this.showMobileLayout){
-			setInterval(() => {
-				if(this.scrolled){
-					this.dataService.UpdateCalendarDays();
-					this.scrolled = false;
-				}
-			}, 2000);
-		}
-	}
-	
-	onScroll(){
-		if(!this.isInitializing && this.showMobileLayout){
-			let bufferAbove = this.dayBuffer * this.calendarDayHeight;		// The height of all days before the current day
-			let bufferBelow = (this.dataService.mobileCalendarDaysDates.length * this.calendarDayHeight) - bufferAbove;		// The height of the days from the current day to the last one
-
-			if(this.mobileCalendarContainer.nativeElement.scrollTop < bufferAbove){
-				// The user scrolled into the buffer above
-				this.addDayTop();
-				this.scrolled = true;
-
-				// Update the scrollTop value (only needed in Edge and Firefox)
-				if(platform.name.includes("Firefox") || platform.name.includes("Edge")){
-					this.mobileCalendarContainer.nativeElement.scrollTop += this.calendarDayHeight;
-				}
-			}else if(this.mobileCalendarContainer.nativeElement.scrollTop > bufferBelow){
-				// The user scrolled into the buffer below
-				this.addDayBottom();
-				this.scrolled = true;
-			}else{
-				this.position = Math.floor(this.mobileCalendarContainer.nativeElement.scrollTop / this.calendarDayHeight);
-				this.currentDay = moment.unix(this.topDay.unix()).add(this.position, 'days');
-				
-				this.updateCurrentWeekDays();
-			}
-		}
-	}
-
-   fillDaysMobile(){
-		this.dataService.mobileCalendarDaysDates = [];
-		this.dataService.mobileCalendarDaysAppointments = [];
-		this.dataService.mobileCalendarDaysTodos = [];
-
-      // Get the first day of the top week
-		var date = moment.unix(this.topDay.unix()).startOf('day');
-
-		// Fill the days array with values
-      for(let i = 0; i < this.dayBuffer * 2; i++){
-			this.dataService.mobileCalendarDaysDates.push(date.unix());
-			this.dataService.mobileCalendarDaysAppointments.push([]);
-			this.dataService.mobileCalendarDaysTodos.push([]);
-
-			date.add(1, 'days');
-		}
-		
-		this.updateCurrentWeekDays();
-		this.dataService.UpdateCalendarDays();
-	}
-
-	fillDaysDesktop(){
-		this.dataService.desktopCalendarDaysDates = [];
-		this.dataService.desktopCalendarDaysAppointments = [];
-		this.dataService.desktopCalendarDaysTodos = [];
-
-		var startDate = moment.unix(this.currentDay.unix()).startOf('month').isoWeekday(1).startOf('day');
-		var endDate = moment.unix(this.currentDay.unix()).endOf('month').isoWeekday(7).endOf('day');
-		var date = moment.unix(startDate.unix());
-		var dates = [];
-
-		while (date.unix() < endDate.unix()) {
-			dates.push(date.unix())
-			date.add(1, 'days');
-		}
-
-		let datesWeek = [];
-
-		for(let i = 0; i < dates.length; i++){
-			datesWeek.push(dates[i]);
-
-			if(datesWeek.length == 7){
-				// Add the datesWeek to the desktopCalendarDays array
-				this.dataService.desktopCalendarDaysDates.push(datesWeek);
-				this.dataService.desktopCalendarDaysAppointments.push([[], [], [], [], [], [], []]);
-				this.dataService.desktopCalendarDaysTodos.push([[], [], [], [], [], [], []]);
-
-				datesWeek = [];
-			}
-		}
-
-		this.dataService.UpdateCalendarDays();
-	}
-
-	scrollToDate(date: moment.Moment){
-		let dateStart: number = date.startOf('day').unix();
-		let days = 0;
-
-		for(let day of this.dataService.mobileCalendarDaysDates){
-			if(moment.unix(day).startOf('day').unix() == dateStart){
-				break;
-			}
-			days++;
-		}
-
-		this.mobileCalendarContainer.nativeElement.scrollTop = days * this.calendarDayHeight + 1;
-		this.updateCurrentWeekDays();
-	}
-
-   addDayTop(){
-      this.topDay.subtract(1, 'day');
-
-		// Add a new entry at the beginning of the mobileCalendarDaysDates and the todos and appointments arrays
-		this.dataService.mobileCalendarDaysDates.unshift(this.topDay.startOf('day').unix());
-		this.dataService.mobileCalendarDaysAppointments.unshift([]);
-		this.dataService.mobileCalendarDaysTodos.unshift([]);
-   }
-
-   addDayBottom(){
-		let date = moment.unix(this.topDay.unix()).startOf('day').add(this.dataService.mobileCalendarDaysDates.length, 'days').startOf('day');
-
-		// Add a new entry at the end of the mobileCalendarDaysDates and the todos and appointments arrays
-		this.dataService.mobileCalendarDaysDates.push(date.unix());
-		this.dataService.mobileCalendarDaysAppointments.push([]);
-		this.dataService.mobileCalendarDaysTodos.push([]);
-	}
-
-	ShowPrevious(){
-		this.currentDay.subtract(1, 'month');
-		this.fillDaysDesktop();
-		this.setSize();
-	}
-
-	ShowNext(){
-		this.currentDay.add(1, 'month');
-		this.fillDaysDesktop();
-		this.setSize();
-	}
-	
-	updateCurrentWeekDays(){
-		var date = moment.unix(this.currentDay.unix());
-		date.isoWeekday(1);
-
-		for(let i = 0; i < 7; i++){
-			this.currentWeekDays[i] = date.format("D");
-			date.add(1, 'day');
-		}
-
-		this.currentDayOfWeek = this.currentDay.isoWeekday() - 1;
-	}
-
-   setSize(){
-		this.showMobileLayout = window.innerWidth < 650;
-
-		this.calendarContainer.nativeElement.hidden = this.showMobileLayout;
-		this.mobileCalendarContainer.nativeElement.hidden = !this.showMobileLayout;
-
-		this.calendarWidth = window.innerWidth;
-		this.calendarHeight = (
-			window.innerHeight
-			- $("#calendo-navbar").height()
-			- $("#calendar-top-bar").height()
-			- $("#calendar-label-div").height()
-			- (this.showMobileLayout ? 86 : 56)
-		)
-
-		this.calendarDayHeight = this.calendarHeight / this.dataService.desktopCalendarDaysDates.length;
-		this.calendarDayWidth = this.calendarWidth / 7;
-	}
-	
-	onResize(){
-		let showMobileLayoutBefore = this.showMobileLayout;
-		this.setSize();
-		
-		// If it was desktop before and is now mobile
-		if(!showMobileLayoutBefore && this.showMobileLayout){
-			// Scroll to the current page
-			this.scrollToDate(moment())
-		}
-	}
-
-	dayClicked(date: number){
-		this.router.navigate(['/calendar/day', date]);
-	}
-
-	goToWeekday(index: number){
-		this.scrollToDate(moment.unix(this.currentDay.unix()).startOf('isoWeek').add(index, 'days'));
-	}
-	
-	getFullDayOfDate(date: number){
-		return moment.unix(date).format(this.fullDayFormat);
-	}
-
-	getDayOfDate(date: number){
-		return moment.unix(date).format(this.dayFormat);
-	}
-
-	getCurrentMonth(){
-		return this.currentDay.format("MMMM")
-	}
-	
-	getCurrentYear(): number{
-		return this.currentDay.year();
-	}
-
-	getTimeOfDate(date: number){
-		return moment.unix(date).format("H:mm");
-	}
-
-	getDayBackgroundColor(i: number, j: number){
-		var date = moment.unix(this.dataService.desktopCalendarDaysDates[i][j]);
-
-      if(this.isToday(date)){
-			// Current day
-			return this.dataService.darkTheme ? "#3d4753" : "#dddddd";
-      }else if(date.month() == this.currentDay.month()){
-			// Current month
-			return this.dataService.darkTheme ? "#1c2938" : "#f9f9f9";
-      }else{
-			// Last or next month
-			return this.dataService.darkTheme ? "#15202b" : "#ffffff";
-      }
-	}
-
-	isTimestampToday(timestamp: number) : boolean{
-		return this.isToday(moment.unix(timestamp));
-	}
-
-	isToday(date: moment.Moment): boolean{
-		return date.startOf('day').unix() == moment().startOf('day').unix();
-	}
-}
\ No newline at end of file
+import { Component, ViewChild, ElementRef } from "@angular/core"
+import { Router } from "@angular/router"
+import * as moment from "moment"
+declare var $: any
+import { DataService } from "../../services/data-service"
+import { enUS } from "../../../locales/locales"
+import * as platform from "platform"
+import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons"
+
+@Component({
+	selector: "calendo-calendar-page",
+	templateUrl: "./calendar-page.component.html",
+	styleUrls: ["./calendar-page.component.scss"]
+})
+export class CalendarPageComponent {
+	locale = enUS.calendarPage
+	faAngleLeft = faAngleLeft
+	faAngleRight = faAngleRight
+	@ViewChild("calendarContainer", { read: ElementRef, static: true })
+	calendarContainer: ElementRef<any>
+	@ViewChild("mobileCalendarContainer", { read: ElementRef, static: true })
+	mobileCalendarContainer: ElementRef<any>
+	weekDayLabels: string[] = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
+	dayFormat: string = "D"
+	fullDayFormat: string = "dddd D"
+
+	showMobileLayout: boolean = true
+	isInitializing: boolean = true
+	calendarHeight: number = 500
+	calendarWidth: number = 200
+	calendarDayHeight: number = this.showMobileLayout
+		? this.calendarHeight / 7
+		: this.calendarHeight / 5
+	calendarDayWidth: number = window.innerWidth / 7
+
+	topDay: moment.Moment = moment() // The day at the very top of the mobile view
+	currentDay: moment.Moment = moment()
+	currentDayOfWeek: number = 0
+	position: number = 1
+	visibleRows: number = 5 // The number of days that are visible
+	dayBuffer: number = 14 // The number of days of each before and after the current day
+	scrolled: boolean = false // If true, load the todos and appointments in the days after the 2 seconds interval
+	currentWeekDays: string[] = ["1", "2", "3", "4", "5", "6", "7"]
+
+	constructor(
+		public dataService: DataService,
+		private router: Router
+	) {
+		this.locale = this.dataService.GetLocale().calendarPage
+		moment.locale(this.dataService.locale)
+		this.dataService.HideWindowsBackButton()
+
+		// Set the weekday labels in the current language
+		let weekdays = moment.weekdaysMin()
+
+		for (let i = 0; i < weekdays.length; i++) {
+			if (i < 6) {
+				this.weekDayLabels[i] = weekdays[i + 1]
+			} else {
+				this.weekDayLabels[i] = weekdays[0]
+			}
+		}
+	}
+
+	async ngOnInit() {
+		await this.initialize()
+
+		$("#calendarContainer").scroll(() => this.onScroll())
+		$("#mobileCalendarContainer").scroll(() => this.onScroll())
+
+		$(document).keydown(e => {
+			if (this.showMobileLayout) return
+			if (e.keyCode === 38 || e.keyCode === 37) {
+				// Arrow up or Arrow left
+				this.ShowPrevious()
+			} else if (e.keyCode === 40 || e.keyCode === 39) {
+				// Arrow down or Arrow right
+				this.ShowNext()
+			}
+		})
+
+		$(document).bind("mousewheel", e => {
+			if (this.showMobileLayout) return
+			if (e.originalEvent.wheelDelta > 0) {
+				// Wheel up
+				this.ShowPrevious()
+			} else {
+				// Wheel down
+				this.ShowNext()
+			}
+		})
+	}
+
+	async initialize() {
+		this.topDay = moment().subtract(this.dayBuffer, "days")
+
+		this.fillDaysMobile()
+		this.fillDaysDesktop()
+
+		setTimeout(() => {
+			this.setSize()
+
+			setTimeout(() => {
+				this.scrollToDate(this.currentDay)
+				this.setSize()
+
+				setTimeout(() => {
+					this.isInitializing = false
+				}, 500)
+			}, 1)
+		}, 1)
+
+		if (this.showMobileLayout) {
+			setInterval(() => {
+				if (this.scrolled) {
+					this.dataService.UpdateCalendarDays()
+					this.scrolled = false
+				}
+			}, 2000)
+		}
+	}
+
+	onScroll() {
+		if (!this.isInitializing && this.showMobileLayout) {
+			let bufferAbove = this.dayBuffer * this.calendarDayHeight // The height of all days before the current day
+			let bufferBelow =
+				this.dataService.mobileCalendarDaysDates.length *
+					this.calendarDayHeight -
+				bufferAbove // The height of the days from the current day to the last one
+
+			if (
+				this.mobileCalendarContainer.nativeElement.scrollTop < bufferAbove
+			) {
+				// The user scrolled into the buffer above
+				this.addDayTop()
+				this.scrolled = true
+
+				// Update the scrollTop value (only needed in Edge and Firefox)
+				if (
+					platform.name.includes("Firefox") ||
+					platform.name.includes("Edge")
+				) {
+					this.mobileCalendarContainer.nativeElement.scrollTop +=
+						this.calendarDayHeight
+				}
+			} else if (
+				this.mobileCalendarContainer.nativeElement.scrollTop > bufferBelow
+			) {
+				// The user scrolled into the buffer below
+				this.addDayBottom()
+				this.scrolled = true
+			} else {
+				this.position = Math.floor(
+					this.mobileCalendarContainer.nativeElement.scrollTop /
+						this.calendarDayHeight
+				)
+				this.currentDay = moment
+					.unix(this.topDay.unix())
+					.add(this.position, "days")
+
+				this.updateCurrentWeekDays()
+			}
+		}
+	}
+
+	fillDaysMobile() {
+		this.dataService.mobileCalendarDaysDates = []
+		this.dataService.mobileCalendarDaysAppointments = []
+		this.dataService.mobileCalendarDaysTodos = []
+
+		// Get the first day of the top week
+		var date = moment.unix(this.topDay.unix()).startOf("day")
+
+		// Fill the days array with values
+		for (let i = 0; i < this.dayBuffer * 2; i++) {
+			this.dataService.mobileCalendarDaysDates.push(date.unix())
+			this.dataService.mobileCalendarDaysAppointments.push([])
+			this.dataService.mobileCalendarDaysTodos.push([])
+
+			date.add(1, "days")
+		}
+
+		this.updateCurrentWeekDays()
+		this.dataService.UpdateCalendarDays()
+	}
+
+	fillDaysDesktop() {
+		this.dataService.desktopCalendarDaysDates = []
+		this.dataService.desktopCalendarDaysAppointments = []
+		this.dataService.desktopCalendarDaysTodos = []
+
+		var startDate = moment
+			.unix(this.currentDay.unix())
+			.startOf("month")
+			.isoWeekday(1)
+			.startOf("day")
+		var endDate = moment
+			.unix(this.currentDay.unix())
+			.endOf("month")
+			.isoWeekday(7)
+			.endOf("day")
+		var date = moment.unix(startDate.unix())
+		var dates = []
+
+		while (date.unix() < endDate.unix()) {
+			dates.push(date.unix())
+			date.add(1, "days")
+		}
+
+		let datesWeek = []
+
+		for (let i = 0; i < dates.length; i++) {
+			datesWeek.push(dates[i])
+
+			if (datesWeek.length == 7) {
+				// Add the datesWeek to the desktopCalendarDays array
+				this.dataService.desktopCalendarDaysDates.push(datesWeek)
+				this.dataService.desktopCalendarDaysAppointments.push([
+					[],
+					[],
+					[],
+					[],
+					[],
+					[],
+					[]
+				])
+				this.dataService.desktopCalendarDaysTodos.push([
+					[],
+					[],
+					[],
+					[],
+					[],
+					[],
+					[]
+				])
+
+				datesWeek = []
+			}
+		}
+
+		this.dataService.UpdateCalendarDays()
+	}
+
+	scrollToDate(date: moment.Moment) {
+		let dateStart: number = date.startOf("day").unix()
+		let days = 0
+
+		for (let day of this.dataService.mobileCalendarDaysDates) {
+			if (moment.unix(day).startOf("day").unix() == dateStart) {
+				break
+			}
+			days++
+		}
+
+		this.mobileCalendarContainer.nativeElement.scrollTop =
+			days * this.calendarDayHeight + 1
+		this.updateCurrentWeekDays()
+	}
+
+	addDayTop() {
+		this.topDay.subtract(1, "day")
+
+		// Add a new entry at the beginning of the mobileCalendarDaysDates and the todos and appointments arrays
+		this.dataService.mobileCalendarDaysDates.unshift(
+			this.topDay.startOf("day").unix()
+		)
+		this.dataService.mobileCalendarDaysAppointments.unshift([])
+		this.dataService.mobileCalendarDaysTodos.unshift([])
+	}
+
+	addDayBottom() {
+		let date = moment
+			.unix(this.topDay.unix())
+			.startOf("day")
+			.add(this.dataService.mobileCalendarDaysDates.length, "days")
+			.startOf("day")
+
+		// Add a new entry at the end of the mobileCalendarDaysDates and the todos and appointments arrays
+		this.dataService.mobileCalendarDaysDates.push(date.unix())
+		this.dataService.mobileCalendarDaysAppointments.push([])
+		this.dataService.mobileCalendarDaysTodos.push([])
+	}
+
+	ShowPrevious() {
+		this.currentDay.subtract(1, "month")
+		this.fillDaysDesktop()
+		this.setSize()
+	}
+
+	ShowNext() {
+		this.currentDay.add(1, "month")
+		this.fillDaysDesktop()
+		this.setSize()
+	}
+
+	updateCurrentWeekDays() {
+		var date = moment.unix(this.currentDay.unix())
+		date.isoWeekday(1)
+
+		for (let i = 0; i < 7; i++) {
+			this.currentWeekDays[i] = date.format("D")
+			date.add(1, "day")
+		}
+
+		this.currentDayOfWeek = this.currentDay.isoWeekday() - 1
+	}
+
+	setSize() {
+		this.showMobileLayout = window.innerWidth < 650
+
+		this.calendarContainer.nativeElement.hidden = this.showMobileLayout
+		this.mobileCalendarContainer.nativeElement.hidden = !this.showMobileLayout
+
+		this.calendarWidth = window.innerWidth
+		this.calendarHeight =
+			window.innerHeight -
+			$("#calendo-navbar").height() -
+			$("#calendar-top-bar").height() -
+			$("#calendar-label-div").height() -
+			(this.showMobileLayout ? 86 : 56)
+
+		this.calendarDayHeight =
+			this.calendarHeight / this.dataService.desktopCalendarDaysDates.length
+		this.calendarDayWidth = this.calendarWidth / 7
+	}
+
+	onResize() {
+		let showMobileLayoutBefore = this.showMobileLayout
+		this.setSize()
+
+		// If it was desktop before and is now mobile
+		if (!showMobileLayoutBefore && this.showMobileLayout) {
+			// Scroll to the current page
+			this.scrollToDate(moment())
+		}
+	}
+
+	dayClicked(date: number) {
+		this.router.navigate(["/calendar/day", date])
+	}
+
+	goToWeekday(index: number) {
+		this.scrollToDate(
+			moment
+				.unix(this.currentDay.unix())
+				.startOf("isoWeek")
+				.add(index, "days")
+		)
+	}
+
+	getFullDayOfDate(date: number) {
+		return moment.unix(date).format(this.fullDayFormat)
+	}
+
+	getDayOfDate(date: number) {
+		return moment.unix(date).format(this.dayFormat)
+	}
+
+	getCurrentMonth() {
+		return this.currentDay.format("MMMM")
+	}
+
+	getCurrentYear(): number {
+		return this.currentDay.year()
+	}
+
+	getTimeOfDate(date: number) {
+		return moment.unix(date).format("H:mm")
+	}
+
+	getDayBackgroundColor(i: number, j: number) {
+		var date = moment.unix(this.dataService.desktopCalendarDaysDates[i][j])
+
+		if (this.isToday(date)) {
+			// Current day
+			return this.dataService.darkTheme ? "#3d4753" : "#dddddd"
+		} else if (date.month() == this.currentDay.month()) {
+			// Current month
+			return this.dataService.darkTheme ? "#1c2938" : "#f9f9f9"
+		} else {
+			// Last or next month
+			return this.dataService.darkTheme ? "#15202b" : "#ffffff"
+		}
+	}
+
+	isTimestampToday(timestamp: number): boolean {
+		return this.isToday(moment.unix(timestamp))
+	}
+
+	isToday(date: moment.Moment): boolean {
+		return date.startOf("day").unix() == moment().startOf("day").unix()
+	}
+}
diff --git a/src/app/pages/settings-page/settings-page.component.html b/src/app/pages/settings-page/settings-page.component.html
index 0f662ef..a5cab5f 100644
--- a/src/app/pages/settings-page/settings-page.component.html
+++ b/src/app/pages/settings-page/settings-page.component.html
@@ -1,60 +1,89 @@
-<div class="container d-flex flex-column ms-motion-slideUpIn" style="padding-bottom: 56px">
-	<h1 class="text-center mt-3 text-color font-weight-light">{{ locale.header }}</h1>
-
-	<div class="mx-auto">
-		<!-- Sort todos by -->
-      <div class="form-group mt-4" style="font-size: 18px; width: 200px">
-         <label class="text-color">{{ locale.sortTodosBy }}</label>
-
-			<fab-dropdown
-				[selectedKey]="sortTodosSelectedKey" 
-         	(onChange)="onSortTodosSelectChanged($event)">
-				
-				<options>
-               <fab-dropdown-option optionKey="date" [text]="locale.sortTodosByDate"></fab-dropdown-option>
-               <fab-dropdown-option optionKey="group" [text]="locale.sortTodosByGroup"></fab-dropdown-option>
-            </options>
-         </fab-dropdown>
-		</div>
-
-		<!-- Theme -->
-		<div style="display: inline-block">
-			<p class="text-color mt-4" style="font-size: 18px">{{ locale.theme }}</p>
-			<mat-radio-group
-				class="d-flex flex-column text-color" 
-				[color]="dataService.darkTheme ? 'accent' : 'primary'" 
-				[value]="selectedTheme" 
-				(change)="onThemeRadioButtonSelected($event)">
-
-				<mat-radio-button [value]="themeKeys[0]">
-					{{ locale.lightTheme }}
-				</mat-radio-button>
-				<mat-radio-button [value]="themeKeys[1]">
-					{{ locale.darkTheme }}
-				</mat-radio-button>
-				<mat-radio-button [value]="themeKeys[2]">
-					{{ locale.systemTheme }}
-				</mat-radio-button>
-			</mat-radio-group>
-		</div>
-
-		<!-- App information -->
-		<div class="mt-5 text-color">
-			<p>
-				<a href="https://blog.dav-apps.tech/tag/calendo" target="blank" class="text-secondary">{{ locale.news }}</a><br>
-				<a href="https://github.com/dav-apps/Calendo" target="blank" class="text-secondary">{{ locale.github }}</a><br>
-				<a href="https://dav-apps.tech/privacy" target="blank" class="text-secondary">{{ locale.privacy }}</a><br>
-			</p>
-			<p>
-				Version {{ version }}<br>
-				Copyright &copy; {{ year }} by dav
-			</p>
-
-			<fab-primary-button
-				(onClick)="InstallUpdate()"
-				*ngIf="updateAvailable">
-				{{ locale.installUpdate }}
-			</fab-primary-button>
-		</div>
-	</div>
-</div>
\ No newline at end of file
+<div
+	class="container d-flex flex-column ms-motion-slideUpIn"
+	style="padding-bottom: 56px"
+>
+	<h1 class="text-center mt-3 text-color font-weight-light">
+		{{ locale.header }}
+	</h1>
+
+	<div class="mx-auto">
+		<!-- Sort todos by -->
+		<div class="form-group mt-4" style="font-size: 18px; width: 200px">
+			<label class="text-color">{{ locale.sortTodosBy }}</label>
+
+			<fab-dropdown
+				[selectedKey]="sortTodosSelectedKey"
+				(onChange)="onSortTodosSelectChanged($event)"
+			>
+				<options>
+					<fab-dropdown-option
+						optionKey="date"
+						[text]="locale.sortTodosByDate"
+					></fab-dropdown-option>
+					<fab-dropdown-option
+						optionKey="group"
+						[text]="locale.sortTodosByGroup"
+					></fab-dropdown-option>
+				</options>
+			</fab-dropdown>
+		</div>
+
+		<!-- Theme -->
+		<div style="display: inline-block">
+			<p class="text-color mt-4" style="font-size: 18px">
+				{{ locale.theme }}
+			</p>
+			<mat-radio-group
+				class="d-flex flex-column text-color"
+				[color]="dataService.darkTheme ? 'accent' : 'primary'"
+				[value]="selectedTheme"
+				(change)="onThemeRadioButtonSelected($event)"
+			>
+				<mat-radio-button [value]="themeKeys[0]">
+					{{ locale.lightTheme }}
+				</mat-radio-button>
+				<mat-radio-button [value]="themeKeys[1]">
+					{{ locale.darkTheme }}
+				</mat-radio-button>
+				<mat-radio-button [value]="themeKeys[2]">
+					{{ locale.systemTheme }}
+				</mat-radio-button>
+			</mat-radio-group>
+		</div>
+
+		<!-- App information -->
+		<div class="mt-5 text-color">
+			<p>
+				<a
+					href="https://blog.dav-apps.tech/tag/calendo"
+					target="blank"
+					class="text-secondary"
+					>{{ locale.news }}</a
+				><br />
+				<a
+					href="https://github.com/dav-apps/Calendo"
+					target="blank"
+					class="text-secondary"
+					>{{ locale.github }}</a
+				><br />
+				<a
+					href="https://dav-apps.tech/privacy"
+					target="blank"
+					class="text-secondary"
+					>{{ locale.privacy }}</a
+				><br />
+			</p>
+			<p>
+				Version {{ version }}<br />
+				Copyright &copy; {{ year }} by dav
+			</p>
+
+			<fab-primary-button
+				(onClick)="InstallUpdate()"
+				*ngIf="updateAvailable"
+			>
+				{{ locale.installUpdate }}
+			</fab-primary-button>
+		</div>
+	</div>
+</div>
diff --git a/src/app/pages/settings-page/settings-page.component.ts b/src/app/pages/settings-page/settings-page.component.ts
index e5ea5ba..451a1e1 100644
--- a/src/app/pages/settings-page/settings-page.component.ts
+++ b/src/app/pages/settings-page/settings-page.component.ts
@@ -1,65 +1,75 @@
-import { Component } from '@angular/core';
-import { SwUpdate } from '@angular/service-worker'
-import { DataService } from '../../services/data-service';
-import { environment } from '../../../environments/environment';
-import { enUS } from "../../../locales/locales";
-import { MatRadioChange } from '@angular/material/radio';
-import { IDropdownOption } from 'office-ui-fabric-react';
-
-const dateKey = "date";
-const groupKey = "group";
-
-@Component({
-   selector: "calendo-settings-page",
-   templateUrl: "./settings-page.component.html"
-})
-export class SettingsPageComponent{
-	locale = enUS.settingsPage;
-	version: string = environment.version;
-	year = (new Date()).getFullYear();
-   sortTodosSelectedKey: string = groupKey;
-	isWindows: boolean = false;
-	themeKeys: string[] = [environment.lightThemeKey, environment.darkThemeKey, environment.systemThemeKey]
-	selectedTheme: string
-	updateAvailable: boolean = false
-
-	constructor(
-		public dataService: DataService,
-		private swUpdate: SwUpdate
-	) {
-		this.locale = this.dataService.GetLocale().settingsPage;
-      this.isWindows = window["Windows"] != null;
-      this.dataService.HideWindowsBackButton();
-   }
-
-   async ngOnInit(){
-      this.sortTodosSelectedKey = await this.dataService.GetSortTodosByDate() ? dateKey : groupKey
-
-      // Set the correct theme radio button
-		this.selectedTheme = await this.dataService.GetTheme()
-
-		// Check for updates
-		this.swUpdate.available.subscribe(() => {
-			this.updateAvailable = true
-		})
-
-		if (this.swUpdate.isEnabled) {
-			this.swUpdate.checkForUpdate()
-		}
-   }
-
-   onSortTodosSelectChanged(event: {ev: MouseEvent, option: IDropdownOption, index: number}){
-		this.sortTodosSelectedKey = event.index == 0 ? dateKey : groupKey;
-		this.dataService.SetSortTodosByDate(event.index == 0);
-   }
-
-   onThemeRadioButtonSelected(event: MatRadioChange){
-		this.selectedTheme = event.value;
-		this.dataService.SetTheme(event.value);
-		this.dataService.ApplyTheme(event.value);
-	}
-
-	InstallUpdate() {
-		window.location.reload()
-	}
-}
\ No newline at end of file
+import { Component } from "@angular/core"
+import { SwUpdate } from "@angular/service-worker"
+import { DataService } from "../../services/data-service"
+import { environment } from "../../../environments/environment"
+import { enUS } from "../../../locales/locales"
+import { MatRadioChange } from "@angular/material/radio"
+import { IDropdownOption } from "office-ui-fabric-react"
+
+const dateKey = "date"
+const groupKey = "group"
+
+@Component({
+	selector: "calendo-settings-page",
+	templateUrl: "./settings-page.component.html"
+})
+export class SettingsPageComponent {
+	locale = enUS.settingsPage
+	version: string = environment.version
+	year = new Date().getFullYear()
+	sortTodosSelectedKey: string = groupKey
+	isWindows: boolean = false
+	themeKeys: string[] = [
+		environment.lightThemeKey,
+		environment.darkThemeKey,
+		environment.systemThemeKey
+	]
+	selectedTheme: string
+	updateAvailable: boolean = false
+
+	constructor(
+		public dataService: DataService,
+		private swUpdate: SwUpdate
+	) {
+		this.locale = this.dataService.GetLocale().settingsPage
+		this.isWindows = window["Windows"] != null
+		this.dataService.HideWindowsBackButton()
+	}
+
+	async ngOnInit() {
+		this.sortTodosSelectedKey = (await this.dataService.GetSortTodosByDate())
+			? dateKey
+			: groupKey
+
+		// Set the correct theme radio button
+		this.selectedTheme = await this.dataService.GetTheme()
+
+		// Check for updates
+		this.swUpdate.available.subscribe(() => {
+			this.updateAvailable = true
+		})
+
+		if (this.swUpdate.isEnabled) {
+			this.swUpdate.checkForUpdate()
+		}
+	}
+
+	onSortTodosSelectChanged(event: {
+		ev: MouseEvent
+		option: IDropdownOption
+		index: number
+	}) {
+		this.sortTodosSelectedKey = event.index == 0 ? dateKey : groupKey
+		this.dataService.SetSortTodosByDate(event.index == 0)
+	}
+
+	onThemeRadioButtonSelected(event: MatRadioChange) {
+		this.selectedTheme = event.value
+		this.dataService.SetTheme(event.value)
+		this.dataService.ApplyTheme(event.value)
+	}
+
+	InstallUpdate() {
+		window.location.reload()
+	}
+}
diff --git a/src/app/pages/start-page/start-page.component.html b/src/app/pages/start-page/start-page.component.html
index 8128749..c789bf8 100644
--- a/src/app/pages/start-page/start-page.component.html
+++ b/src/app/pages/start-page/start-page.component.html
@@ -1,63 +1,157 @@
-<div class="container-fluid ms-motion-slideUpIn" (window:resize)="onResize()" style="padding-bottom: 56px">
-	<div class="ml-md-5 ml-4">
-		<h1 class="mt-3 text-color" style="font-weight: 300">{{ GetCurrentWeekday() }}</h1>
-		<p class="lead text-color font-weight-light">{{ GetCurrentDate() }}</p>
-	</div>
-
-	<div class="row mt-4">
-		<div class="card col-10 offset-1 col-md-4 mb-5 theme-background-color-secondary ms-depth-4">
-			<div class="card-body" style="padding-bottom: 0px">
-				<h5 class="card-title text-color">{{ locale.appointments }}</h5>
-				<ul class="list-group list-group-flush">
-					<calendo-appointment-item [appointment]="appointment" [showCompleted]="true" *ngFor="let appointment of dataService.startDaysAppointments[0]"></calendo-appointment-item>
-					<li class="list-group-item theme-background-color-secondary" style="padding: 14px 0px 14px 5px;">
-						<button type="button" class="btn btn-outline-primary btn-sm" (click)="ShowModal(0)"><fa-icon [icon]="faPlus"></fa-icon></button>
-					</li>
-				</ul>
-			</div>
-		</div>
-		
-		<div class="card col-10 offset-1 col-md-4 offset-md-2 mb-5 theme-background-color-secondary ms-depth-4">
-			<div class="card-body" style="padding-bottom: 0px">
-				<h5 class="card-title text-color">{{ locale.todos }}</h5>
-				<ul class="list-group list-group-flush">
-               <calendo-todo-item [todo]="todo" *ngFor="let todo of dataService.startDaysTodos[0]" (delete)="DeleteTodo(todo)"></calendo-todo-item>
-               <calendo-todo-list-item [todoList]="todoList" *ngFor="let todoList of dataService.startDaysTodoLists[0]"></calendo-todo-list-item>
-
-					<li class="list-group-item theme-background-color-secondary" style="padding: 14px 0px 14px 5px;" ngbDropdown placement="bottom-left">
-                  <button type="button" class="btn btn-outline-primary btn-sm" ngbDropdownToggle><fa-icon [icon]="faPlus"></fa-icon></button>
-                  <div ngbDropdownMenu class="theme-background-color-tertiary ms-depth-4 ms-motion-slideDownIn">
-                     <button class="dropdown-item text-color cursor" (click)="ShowModal(1)">{{ locale.newTodo }}</button>
-                     <button class="dropdown-item text-color cursor" (click)="ShowModal(2)">{{ locale.newTodoList }}</button>
-                  </div>
-					</li>
-				</ul>
-			</div>
-		</div>
-	</div>
-
-	<div class="container">
-		<ng-container *ngFor="let date of dataService.startDaysDates; let i = index;">
-			<div class="row py-4 ml-md-4 border-top" [ngClass]="dataService.darkTheme ? 'border-dark' : ''" *ngIf="i > 0">
-				<div class="col-3 text-color">
-					<h4 class="cursor" [style.font-size.px]="largeDateFontSize" (click)="ShowCalendarDay(dataService.startDaysDates[i])">{{ GetLargeDate(date) }}</h4>
-					<p class="font-weight-light cursor" [style.font-size.px]="smallDateFontSize" (click)="ShowCalendarDay(dataService.startDaysDates[i])">{{ GetSmallDate(date) }}</p>
-				</div>
-				<div class="offset-1 col-8 offset-lg-0 col-lg-9 d-flex flex-column mt-1">
-					<div class="d-inline-flex" *ngFor="let appointment of dataService.startDaysAppointments[i]">
-						<calendo-small-appointment-item [appointment]="appointment"></calendo-small-appointment-item>
-					</div>
-					
-					<div class="d-flex flex-wrap">
-                  <calendo-small-todo-item [todo]="todo" *ngFor="let todo of dataService.startDaysTodos[i]" (delete)="DeleteTodo(todo)"></calendo-small-todo-item>
-                  <calendo-small-todo-list-item [todoList]="todoList" *ngFor="let todoList of dataService.startDaysTodoLists[i]"></calendo-small-todo-list-item>
-					</div>
-				</div>
-			</div>
-		</ng-container>
-	</div>
-
-	<calendo-appointment-modal (save)="CreateAppointment($event)"></calendo-appointment-modal>
-   <calendo-new-todo-modal (save)="CreateTodo($event)"></calendo-new-todo-modal>
-   <calendo-todo-list-modal (save)="CreateTodoList($event)"></calendo-todo-list-modal>
-</div>
\ No newline at end of file
+<div
+	class="container-fluid ms-motion-slideUpIn"
+	(window:resize)="onResize()"
+	style="padding-bottom: 56px"
+>
+	<div class="ml-md-5 ml-4">
+		<h1 class="mt-3 text-color" style="font-weight: 300">
+			{{ GetCurrentWeekday() }}
+		</h1>
+		<p class="lead text-color font-weight-light">{{ GetCurrentDate() }}</p>
+	</div>
+
+	<div class="row mt-4">
+		<div
+			class="card col-10 offset-1 col-md-4 mb-5 theme-background-color-secondary ms-depth-4"
+		>
+			<div class="card-body" style="padding-bottom: 0px">
+				<h5 class="card-title text-color">{{ locale.appointments }}</h5>
+				<ul class="list-group list-group-flush">
+					<calendo-appointment-item
+						[appointment]="appointment"
+						[showCompleted]="true"
+						*ngFor="
+							let appointment of dataService.startDaysAppointments[0]
+						"
+					></calendo-appointment-item>
+					<li
+						class="list-group-item theme-background-color-secondary"
+						style="padding: 14px 0px 14px 5px"
+					>
+						<button
+							type="button"
+							class="btn btn-outline-primary btn-sm"
+							(click)="ShowModal(0)"
+						>
+							<fa-icon [icon]="faPlus"></fa-icon>
+						</button>
+					</li>
+				</ul>
+			</div>
+		</div>
+
+		<div
+			class="card col-10 offset-1 col-md-4 offset-md-2 mb-5 theme-background-color-secondary ms-depth-4"
+		>
+			<div class="card-body" style="padding-bottom: 0px">
+				<h5 class="card-title text-color">{{ locale.todos }}</h5>
+				<ul class="list-group list-group-flush">
+					<calendo-todo-item
+						[todo]="todo"
+						*ngFor="let todo of dataService.startDaysTodos[0]"
+						(delete)="DeleteTodo(todo)"
+					></calendo-todo-item>
+					<calendo-todo-list-item
+						[todoList]="todoList"
+						*ngFor="let todoList of dataService.startDaysTodoLists[0]"
+					></calendo-todo-list-item>
+
+					<li
+						class="list-group-item theme-background-color-secondary"
+						style="padding: 14px 0px 14px 5px"
+						ngbDropdown
+						placement="bottom-left"
+					>
+						<button
+							type="button"
+							class="btn btn-outline-primary btn-sm"
+							ngbDropdownToggle
+						>
+							<fa-icon [icon]="faPlus"></fa-icon>
+						</button>
+						<div
+							ngbDropdownMenu
+							class="theme-background-color-tertiary ms-depth-4 ms-motion-slideDownIn"
+						>
+							<button
+								class="dropdown-item text-color cursor"
+								(click)="ShowModal(1)"
+							>
+								{{ locale.newTodo }}
+							</button>
+							<button
+								class="dropdown-item text-color cursor"
+								(click)="ShowModal(2)"
+							>
+								{{ locale.newTodoList }}
+							</button>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+
+	<div class="container">
+		<ng-container
+			*ngFor="let date of dataService.startDaysDates; let i = index"
+		>
+			<div
+				class="row py-4 ml-md-4 border-top"
+				[ngClass]="dataService.darkTheme ? 'border-dark' : ''"
+				*ngIf="i > 0"
+			>
+				<div class="col-3 text-color">
+					<h4
+						class="cursor"
+						[style.font-size.px]="largeDateFontSize"
+						(click)="ShowCalendarDay(dataService.startDaysDates[i])"
+					>
+						{{ GetLargeDate(date) }}
+					</h4>
+					<p
+						class="font-weight-light cursor"
+						[style.font-size.px]="smallDateFontSize"
+						(click)="ShowCalendarDay(dataService.startDaysDates[i])"
+					>
+						{{ GetSmallDate(date) }}
+					</p>
+				</div>
+				<div
+					class="offset-1 col-8 offset-lg-0 col-lg-9 d-flex flex-column mt-1"
+				>
+					<div
+						class="d-inline-flex"
+						*ngFor="
+							let appointment of dataService.startDaysAppointments[i]
+						"
+					>
+						<calendo-small-appointment-item
+							[appointment]="appointment"
+						></calendo-small-appointment-item>
+					</div>
+
+					<div class="d-flex flex-wrap">
+						<calendo-small-todo-item
+							[todo]="todo"
+							*ngFor="let todo of dataService.startDaysTodos[i]"
+							(delete)="DeleteTodo(todo)"
+						></calendo-small-todo-item>
+						<calendo-small-todo-list-item
+							[todoList]="todoList"
+							*ngFor="let todoList of dataService.startDaysTodoLists[i]"
+						></calendo-small-todo-list-item>
+					</div>
+				</div>
+			</div>
+		</ng-container>
+	</div>
+
+	<calendo-appointment-modal
+		(save)="CreateAppointment($event)"
+	></calendo-appointment-modal>
+	<calendo-new-todo-modal (save)="CreateTodo($event)"></calendo-new-todo-modal>
+	<calendo-todo-list-modal
+		(save)="CreateTodoList($event)"
+	></calendo-todo-list-modal>
+</div>
diff --git a/src/app/pages/start-page/start-page.component.ts b/src/app/pages/start-page/start-page.component.ts
index fc6be11..7c51e46 100644
--- a/src/app/pages/start-page/start-page.component.ts
+++ b/src/app/pages/start-page/start-page.component.ts
@@ -1,148 +1,173 @@
-import { Component, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
-import * as moment from 'moment';
-import { Todo } from '../../models/Todo';
-import { TodoList } from '../../models/TodoList';
-import { DataService } from '../../services/data-service';
-import { NewTodoModalComponent } from '../../components/new-todo-modal/new-todo-modal.component';
-import { AppointmentModalComponent } from '../../components/appointment-modal/appointment-modal.component';
-import { TodoListModalComponent } from '../../components/todo-list-modal/todo-list-modal.component';
-import { enUS } from '../../../locales/locales';
-import { Appointment } from 'src/app/models/Appointment';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { MatSnackBar } from '@angular/material/snack-bar';
-
-@Component({
-   selector: "calendo-start-page",
-   templateUrl: "./start-page.component.html"
-})
-export class StartPageComponent{
-	locale = enUS.startPage;
-	snackbarLocale = enUS.snackbar;
-	faPlus = faPlus;
-	@ViewChild(NewTodoModalComponent, { static: true })
-	private newTodoModalComponent: NewTodoModalComponent;
-	@ViewChild(AppointmentModalComponent, { static: true })
-   private newAppointmentModalComponent: AppointmentModalComponent;
-   @ViewChild(TodoListModalComponent, { static: true })
-   private todoListModalComponent: TodoListModalComponent;
-
-	largeDateFormat: string = this.locale.formats.smallDate;
-	smallDateFormat: string = this.locale.formats.largeDate;
-	largeDateFontSize: number = 24;
-	smallDateFontSize: number = 16;
-
-	constructor(
-		public dataService: DataService,
-		private router: Router,
-		private snackBar: MatSnackBar
-	) {
-		this.locale = this.dataService.GetLocale().startPage;
-		this.snackbarLocale = this.dataService.GetLocale().snackbar;
-		moment.locale(this.dataService.locale);
-
-		this.largeDateFormat = this.locale.formats.largeDate;
-		this.smallDateFormat = this.locale.formats.smallDate;
-
-		// Hide the title bar back button on Windows
-		this.dataService.HideWindowsBackButton();
-	}
-
-	ngOnInit(){
-		this.setSize();
-	}
-
-	public async DeleteTodo(todo: Todo){
-		this.dataService.RemoveTodo(todo);
-	}
-
-	ShowCalendarDay(date: number){
-		this.router.navigate(['/calendar/day', date]);
-	}
-
-	GetLargeDate(date: number): string{
-		let momentDate = moment.unix(date);
-		let format = momentDate.diff(moment(), 'days') > 6 ? this.smallDateFormat : this.largeDateFormat;
-		return momentDate.format(format);
-	}
-	
-	GetSmallDate(date: number): string{
-		let momentDate = moment.unix(date);
-		let format = momentDate.diff(moment(), 'days') > 6 ? this.largeDateFormat : this.smallDateFormat;
-		return momentDate.format(format);
-	}
-
-	GetCurrentWeekday(){
-		return moment().format("dddd")
-	}
-
-	GetCurrentDate(){
-		return moment().format("LL")
-	}
-
-	ShowModal(index: number){
-      switch (index) {
-         case 0:
-            // Show the appointment modal
-			   this.newAppointmentModalComponent.Show();
-            break;
-         case 1:
-            // Show the todo modal
-			   this.newTodoModalComponent.Show();
-            break;
-         case 2:
-            // Show the todo list modal
-            this.todoListModalComponent.Show();
-            break;
-      }
-	}
-
-	CreateTodo(todo: Todo){
-		this.dataService.AddTodo(todo)
-
-		// Show snackbar
-		if(todo.time == 0){
-			this.snackBar.open(this.snackbarLocale.todoCreated, null, {duration: 3000})
-		}else{
-			this.snackBar.open(this.snackbarLocale.todoCreated, this.snackbarLocale.show, {duration: 3000}).onAction().subscribe(() => {
-				// Show the day of the todo
-				this.router.navigate(["calendar/day", todo.time])
-			})
-		}
-
-		this.dataService.AdaptSnackbarPosition()
-	}
-
-	CreateAppointment(appointment: Appointment){
-		this.dataService.AddAppointment(appointment)
-
-		// Show snackbar
-		this.snackBar.open(this.snackbarLocale.appointmentCreated, this.snackbarLocale.show, {duration: 3000}).onAction().subscribe(() => {
-			// Show the day of the appointment
-			this.router.navigate(["calendar/day", appointment.start])
-		})
-
-		this.dataService.AdaptSnackbarPosition()
-   }
-
-   CreateTodoList(todoList: TodoList){
-		this.dataService.AddTodoList(todoList)
-
-		// Show snackbar
-		this.snackBar.open(this.snackbarLocale.todoListCreated, this.snackbarLocale.show, {duration: 3000}).onAction().subscribe(() => {
-			// Show the todo list
-			this.router.navigate(["todolist", todoList.uuid])
-		})
-
-		this.dataService.AdaptSnackbarPosition()
-   }
-
-	onResize(){
-		this.setSize();
-	}
-
-	setSize(){
-		this.largeDateFontSize = window.innerWidth < 450 ? 21 : 24;
-		this.smallDateFontSize = window.innerWidth < 450 ? 15 : 16;
-	}
-}
\ No newline at end of file
+import { Component, ViewChild } from "@angular/core"
+import { Router } from "@angular/router"
+import * as moment from "moment"
+import { Todo } from "../../models/Todo"
+import { TodoList } from "../../models/TodoList"
+import { DataService } from "../../services/data-service"
+import { NewTodoModalComponent } from "../../components/new-todo-modal/new-todo-modal.component"
+import { AppointmentModalComponent } from "../../components/appointment-modal/appointment-modal.component"
+import { TodoListModalComponent } from "../../components/todo-list-modal/todo-list-modal.component"
+import { enUS } from "../../../locales/locales"
+import { Appointment } from "src/app/models/Appointment"
+import { faPlus } from "@fortawesome/free-solid-svg-icons"
+import { MatSnackBar } from "@angular/material/snack-bar"
+
+@Component({
+	selector: "calendo-start-page",
+	templateUrl: "./start-page.component.html"
+})
+export class StartPageComponent {
+	locale = enUS.startPage
+	snackbarLocale = enUS.snackbar
+	faPlus = faPlus
+	@ViewChild(NewTodoModalComponent, { static: true })
+	private newTodoModalComponent: NewTodoModalComponent
+	@ViewChild(AppointmentModalComponent, { static: true })
+	private newAppointmentModalComponent: AppointmentModalComponent
+	@ViewChild(TodoListModalComponent, { static: true })
+	private todoListModalComponent: TodoListModalComponent
+
+	largeDateFormat: string = this.locale.formats.smallDate
+	smallDateFormat: string = this.locale.formats.largeDate
+	largeDateFontSize: number = 24
+	smallDateFontSize: number = 16
+
+	constructor(
+		public dataService: DataService,
+		private router: Router,
+		private snackBar: MatSnackBar
+	) {
+		this.locale = this.dataService.GetLocale().startPage
+		this.snackbarLocale = this.dataService.GetLocale().snackbar
+		moment.locale(this.dataService.locale)
+
+		this.largeDateFormat = this.locale.formats.largeDate
+		this.smallDateFormat = this.locale.formats.smallDate
+
+		// Hide the title bar back button on Windows
+		this.dataService.HideWindowsBackButton()
+	}
+
+	ngOnInit() {
+		this.setSize()
+	}
+
+	public async DeleteTodo(todo: Todo) {
+		this.dataService.RemoveTodo(todo)
+	}
+
+	ShowCalendarDay(date: number) {
+		this.router.navigate(["/calendar/day", date])
+	}
+
+	GetLargeDate(date: number): string {
+		let momentDate = moment.unix(date)
+		let format =
+			momentDate.diff(moment(), "days") > 6
+				? this.smallDateFormat
+				: this.largeDateFormat
+		return momentDate.format(format)
+	}
+
+	GetSmallDate(date: number): string {
+		let momentDate = moment.unix(date)
+		let format =
+			momentDate.diff(moment(), "days") > 6
+				? this.largeDateFormat
+				: this.smallDateFormat
+		return momentDate.format(format)
+	}
+
+	GetCurrentWeekday() {
+		return moment().format("dddd")
+	}
+
+	GetCurrentDate() {
+		return moment().format("LL")
+	}
+
+	ShowModal(index: number) {
+		switch (index) {
+			case 0:
+				// Show the appointment modal
+				this.newAppointmentModalComponent.Show()
+				break
+			case 1:
+				// Show the todo modal
+				this.newTodoModalComponent.Show()
+				break
+			case 2:
+				// Show the todo list modal
+				this.todoListModalComponent.Show()
+				break
+		}
+	}
+
+	CreateTodo(todo: Todo) {
+		this.dataService.AddTodo(todo)
+
+		// Show snackbar
+		if (todo.time == 0) {
+			this.snackBar.open(this.snackbarLocale.todoCreated, null, {
+				duration: 3000
+			})
+		} else {
+			this.snackBar
+				.open(this.snackbarLocale.todoCreated, this.snackbarLocale.show, {
+					duration: 3000
+				})
+				.onAction()
+				.subscribe(() => {
+					// Show the day of the todo
+					this.router.navigate(["calendar/day", todo.time])
+				})
+		}
+
+		this.dataService.AdaptSnackbarPosition()
+	}
+
+	CreateAppointment(appointment: Appointment) {
+		this.dataService.AddAppointment(appointment)
+
+		// Show snackbar
+		this.snackBar
+			.open(
+				this.snackbarLocale.appointmentCreated,
+				this.snackbarLocale.show,
+				{ duration: 3000 }
+			)
+			.onAction()
+			.subscribe(() => {
+				// Show the day of the appointment
+				this.router.navigate(["calendar/day", appointment.start])
+			})
+
+		this.dataService.AdaptSnackbarPosition()
+	}
+
+	CreateTodoList(todoList: TodoList) {
+		this.dataService.AddTodoList(todoList)
+
+		// Show snackbar
+		this.snackBar
+			.open(this.snackbarLocale.todoListCreated, this.snackbarLocale.show, {
+				duration: 3000
+			})
+			.onAction()
+			.subscribe(() => {
+				// Show the todo list
+				this.router.navigate(["todolist", todoList.uuid])
+			})
+
+		this.dataService.AdaptSnackbarPosition()
+	}
+
+	onResize() {
+		this.setSize()
+	}
+
+	setSize() {
+		this.largeDateFontSize = window.innerWidth < 450 ? 21 : 24
+		this.smallDateFontSize = window.innerWidth < 450 ? 15 : 16
+	}
+}
diff --git a/src/app/pages/todo-list-page/todo-list-page.component.html b/src/app/pages/todo-list-page/todo-list-page.component.html
index 78b29e1..d086f9c 100644
--- a/src/app/pages/todo-list-page/todo-list-page.component.html
+++ b/src/app/pages/todo-list-page/todo-list-page.component.html
@@ -1,58 +1,106 @@
-<div class="ml-3 ms-motion-slideUpIn" style="padding-bottom: 56px">
-	<div class="d-flex my-3">
-		<button type="button"
-				class="btn my-auto text-color icon-button" 
-				style="height: 30px; width: 35px; padding: 2px 0px 0px 0px;"
-				(click)="GoBack()">
-			<fab-icon iconName="Back"></fab-icon>
-		</button>
-		<h4 class="text-color my-auto ml-3 font-weight-light">{{ todoList.name }}</h4>
-		<button type="button" 
-				class="btn ml-3 text-color icon-button" 
-				style="padding: 3px 6px;" 
-				(click)="ShowEditModal()">
-			<fab-icon iconName="Edit"></fab-icon>
-		</button>
-		<button type="button" 
-				class="btn ml-2 text-color icon-button" 
-				style="padding: 3px 6px;" 
-				(click)="ShowDeleteModal()">
-			<fab-icon iconName="Delete"></fab-icon>
-		</button>
-	</div>
-	<div class="mx-0 pt-3 border-top">
-		<!-- Todo List metadata -->
-		<p class="text-color" *ngIf="todoList.time != 0">{{ locale.date }}<span class="ml-2">{{ date }}</span></p>
-		<p style="margin-bottom: 4px" *ngIf="todoList.groups.length > 0">
-			<span class="text-color">{{ locale.groups }}</span>
-			<span class="ml-2">
-				<calendo-todo-group-badge *ngFor="let todoGroup of todoList.groups" [groupName]="todoGroup"></calendo-todo-group-badge>
-			</span>
-		</p>
-	
-		<!-- Todos list -->
-		<div class="d-flex" style="height: 40px">
-			<p class="ms-fontSize-18 mt-2 text-color">
-				{{ locale.todos }}
-			</p>
-			
-			<div ngbDropdown placement="top-left" style="margin-top: 7px">
-				<button type="button" 
-						class="btn ml-2 text-color theme-border-color-primary icon-button" 
-						style="height: 30px; width: 30px; padding: 2px 0px 0px 0px" 
-						ngbDropdownToggle>
-					<fab-icon iconName="Add"></fab-icon>
-				</button>
-	
-				<div ngbDropdownMenu class="theme-background-color-tertiary ms-depth-4 ms-motion-slideUpIn">
-					<button class="dropdown-item text-color cursor" (click)="todoListTree.AddInputToTodoList(todoListTree.rootTodoItem, false)">{{ locale.newTodo }}</button>
-					<button class="dropdown-item text-color cursor" (click)="todoListTree.AddInputToTodoList(todoListTree.rootTodoItem, true)">{{ locale.newTodoList }}</button>
-				</div>
-			</div>
-		</div>
-		<calendo-todo-list-tree #todoListTree [todoList]="todoList" (update)="Update()"></calendo-todo-list-tree>
-	</div>
-</div>
-
-<calendo-todo-list-modal #todoListModal (save)="Update($event)"></calendo-todo-list-modal>
-<calendo-delete-todo-list-modal #deleteTodoListModal (remove)="Remove()"></calendo-delete-todo-list-modal>
\ No newline at end of file
+<div class="ml-3 ms-motion-slideUpIn" style="padding-bottom: 56px">
+	<div class="d-flex my-3">
+		<button
+			type="button"
+			class="btn my-auto text-color icon-button"
+			style="height: 30px; width: 35px; padding: 2px 0px 0px 0px"
+			(click)="GoBack()"
+		>
+			<fab-icon iconName="Back"></fab-icon>
+		</button>
+		<h4 class="text-color my-auto ml-3 font-weight-light">
+			{{ todoList.name }}
+		</h4>
+		<button
+			type="button"
+			class="btn ml-3 text-color icon-button"
+			style="padding: 3px 6px"
+			(click)="ShowEditModal()"
+		>
+			<fab-icon iconName="Edit"></fab-icon>
+		</button>
+		<button
+			type="button"
+			class="btn ml-2 text-color icon-button"
+			style="padding: 3px 6px"
+			(click)="ShowDeleteModal()"
+		>
+			<fab-icon iconName="Delete"></fab-icon>
+		</button>
+	</div>
+	<div class="mx-0 pt-3 border-top">
+		<!-- Todo List metadata -->
+		<p class="text-color" *ngIf="todoList.time != 0">
+			{{ locale.date }}<span class="ml-2">{{ date }}</span>
+		</p>
+		<p style="margin-bottom: 4px" *ngIf="todoList.groups.length > 0">
+			<span class="text-color">{{ locale.groups }}</span>
+			<span class="ml-2">
+				<calendo-todo-group-badge
+					*ngFor="let todoGroup of todoList.groups"
+					[groupName]="todoGroup"
+				></calendo-todo-group-badge>
+			</span>
+		</p>
+
+		<!-- Todos list -->
+		<div class="d-flex" style="height: 40px">
+			<p class="ms-fontSize-18 mt-2 text-color">
+				{{ locale.todos }}
+			</p>
+
+			<div ngbDropdown placement="top-left" style="margin-top: 7px">
+				<button
+					type="button"
+					class="btn ml-2 text-color theme-border-color-primary icon-button"
+					style="height: 30px; width: 30px; padding: 2px 0px 0px 0px"
+					ngbDropdownToggle
+				>
+					<fab-icon iconName="Add"></fab-icon>
+				</button>
+
+				<div
+					ngbDropdownMenu
+					class="theme-background-color-tertiary ms-depth-4 ms-motion-slideUpIn"
+				>
+					<button
+						class="dropdown-item text-color cursor"
+						(click)="
+							todoListTree.AddInputToTodoList(
+								todoListTree.rootTodoItem,
+								false
+							)
+						"
+					>
+						{{ locale.newTodo }}
+					</button>
+					<button
+						class="dropdown-item text-color cursor"
+						(click)="
+							todoListTree.AddInputToTodoList(
+								todoListTree.rootTodoItem,
+								true
+							)
+						"
+					>
+						{{ locale.newTodoList }}
+					</button>
+				</div>
+			</div>
+		</div>
+		<calendo-todo-list-tree
+			#todoListTree
+			[todoList]="todoList"
+			(update)="Update()"
+		></calendo-todo-list-tree>
+	</div>
+</div>
+
+<calendo-todo-list-modal
+	#todoListModal
+	(save)="Update($event)"
+></calendo-todo-list-modal>
+<calendo-delete-todo-list-modal
+	#deleteTodoListModal
+	(remove)="Remove()"
+></calendo-delete-todo-list-modal>
diff --git a/src/app/pages/todo-list-page/todo-list-page.component.ts b/src/app/pages/todo-list-page/todo-list-page.component.ts
index 2249a6d..69a3d51 100644
--- a/src/app/pages/todo-list-page/todo-list-page.component.ts
+++ b/src/app/pages/todo-list-page/todo-list-page.component.ts
@@ -1,92 +1,99 @@
-import { Component, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Location } from '@angular/common';
-import { TodoList, GetTodoList } from 'src/app/models/TodoList';
-import { enUS } from '../../../locales/locales';
-import { DataService } from '../../services/data-service';
-import * as moment from 'moment';
-import { TodoListTreeComponent } from '../../components/todo-list-tree/todo-list-tree.component';
-import { TodoListModalComponent } from 'src/app/components/todo-list-modal/todo-list-modal.component';
-import { DeleteTodoListModalComponent } from 'src/app/components/delete-todo-list-modal/delete-todo-list-modal.component';
-
-@Component({
-	selector: 'calendo-todo-list-page',
-	templateUrl: './todo-list-page.component.html'
-})
-export class TodoListPageComponent{
-   locale = enUS.todoListDetailsPage;
-	@ViewChild('todoListTree', { static: true }) todoListTree: TodoListTreeComponent;
-	@ViewChild('todoListModal', { static: true }) todoListModal: TodoListModalComponent;
-	@ViewChild('deleteTodoListModal', { static: true }) deleteTodoListModal: DeleteTodoListModalComponent;
-	todoList: TodoList = new TodoList();
-	date: string = "";
-
-	constructor(
-      private dataService: DataService,
-      private route: ActivatedRoute,
-      private location: Location
-	){
-      moment.locale(this.dataService.locale);
-      this.locale = this.dataService.GetLocale().todoListDetailsPage;
-      this.dataService.HideWindowsBackButton();
-	}
-
-	ngOnInit(){
-      this.route.params.subscribe(async param => {
-         let list = await GetTodoList(param.uuid);
-         
-         if(!list){
-            this.location.back();
-         }
-
-			this.todoList.uuid = list.uuid;
-			this.todoList.name = list.name;
-			this.todoList.time = list.time;
-			this.todoList.groups = list.groups;
-         this.todoList.list = list.list;
-			this.todoList.items = list.items;
-         this.date = moment.unix(this.todoList.time).format(this.locale.formats.date);
-         
-         this.todoListTree.Init();
-      });
-	}
-	
-	async Update(updatedTodoList?: TodoList){
-		if(updatedTodoList){
-			this.dataService.UpdateTodoList(updatedTodoList);
-
-			// Update the local properties
-			this.todoList.name = updatedTodoList.name;
-			this.todoList.time = updatedTodoList.time;
-			this.todoList.groups = updatedTodoList.groups;
-
-			this.date = moment.unix(this.todoList.time).format(this.locale.formats.date);
-		}else{
-			this.dataService.UpdateTodoList(await GetTodoList(this.todoList.uuid));
-		}
-	}
-
-	GoBack(){
-      this.location.back();
-	}
-
-	ShowEditModal(){
-		this.todoListModal.Show(this.todoList);
-	}
-
-	async ShowDeleteModal() {
-		if (this.todoList.items.length == 0) {
-			// Delete the todo list immediately
-			await this.todoList.Delete()
-			this.Remove()
-		} else {
-			// Show the confirmation modal
-			this.deleteTodoListModal.Show(this.todoList)
-		}
-   }
-   
-   Remove(){
-      this.dataService.RemoveTodoList(this.todoList);
-      this.location.back();
-   }
-}
\ No newline at end of file
+import { Component, ViewChild } from "@angular/core"
+import { ActivatedRoute } from "@angular/router"
+import { Location } from "@angular/common"
+import { TodoList, GetTodoList } from "src/app/models/TodoList"
+import { enUS } from "../../../locales/locales"
+import { DataService } from "../../services/data-service"
+import * as moment from "moment"
+import { TodoListTreeComponent } from "../../components/todo-list-tree/todo-list-tree.component"
+import { TodoListModalComponent } from "src/app/components/todo-list-modal/todo-list-modal.component"
+import { DeleteTodoListModalComponent } from "src/app/components/delete-todo-list-modal/delete-todo-list-modal.component"
+
+@Component({
+	selector: "calendo-todo-list-page",
+	templateUrl: "./todo-list-page.component.html"
+})
+export class TodoListPageComponent {
+	locale = enUS.todoListDetailsPage
+	@ViewChild("todoListTree", { static: true })
+	todoListTree: TodoListTreeComponent
+	@ViewChild("todoListModal", { static: true })
+	todoListModal: TodoListModalComponent
+	@ViewChild("deleteTodoListModal", { static: true })
+	deleteTodoListModal: DeleteTodoListModalComponent
+	todoList: TodoList = new TodoList()
+	date: string = ""
+
+	constructor(
+		private dataService: DataService,
+		private route: ActivatedRoute,
+		private location: Location
+	) {
+		moment.locale(this.dataService.locale)
+		this.locale = this.dataService.GetLocale().todoListDetailsPage
+		this.dataService.HideWindowsBackButton()
+	}
+
+	ngOnInit() {
+		this.route.params.subscribe(async param => {
+			let list = await GetTodoList(param.uuid)
+
+			if (!list) {
+				this.location.back()
+			}
+
+			this.todoList.uuid = list.uuid
+			this.todoList.name = list.name
+			this.todoList.time = list.time
+			this.todoList.groups = list.groups
+			this.todoList.list = list.list
+			this.todoList.items = list.items
+			this.date = moment
+				.unix(this.todoList.time)
+				.format(this.locale.formats.date)
+
+			this.todoListTree.Init()
+		})
+	}
+
+	async Update(updatedTodoList?: TodoList) {
+		if (updatedTodoList) {
+			this.dataService.UpdateTodoList(updatedTodoList)
+
+			// Update the local properties
+			this.todoList.name = updatedTodoList.name
+			this.todoList.time = updatedTodoList.time
+			this.todoList.groups = updatedTodoList.groups
+
+			this.date = moment
+				.unix(this.todoList.time)
+				.format(this.locale.formats.date)
+		} else {
+			this.dataService.UpdateTodoList(await GetTodoList(this.todoList.uuid))
+		}
+	}
+
+	GoBack() {
+		this.location.back()
+	}
+
+	ShowEditModal() {
+		this.todoListModal.Show(this.todoList)
+	}
+
+	async ShowDeleteModal() {
+		if (this.todoList.items.length == 0) {
+			// Delete the todo list immediately
+			await this.todoList.Delete()
+			this.Remove()
+		} else {
+			// Show the confirmation modal
+			this.deleteTodoListModal.Show(this.todoList)
+		}
+	}
+
+	Remove() {
+		this.dataService.RemoveTodoList(this.todoList)
+		this.location.back()
+	}
+}
diff --git a/src/app/pages/todos-page/todos-page.component.html b/src/app/pages/todos-page/todos-page.component.html
index 3637bd3..d2a2300 100644
--- a/src/app/pages/todos-page/todos-page.component.html
+++ b/src/app/pages/todos-page/todos-page.component.html
@@ -1,71 +1,174 @@
-<div class="container-fluid ms-motion-slideUpIn" style="padding-bottom: 56px">
-	<h1 class="text-center mt-3 text-color font-weight-light" ngbDropdown placement="bottom-right">
-		{{ locale.header }}
-		<button type="button" class="btn btn-outline-primary btn-sm mb-1" ngbDropdownToggle><fa-icon [icon]="faEllipsisH"></fa-icon></button>
-		<div ngbDropdownMenu class="theme-background-color-tertiary ms-depth-4 ms-motion-slideDownIn">
-			<button class="dropdown-item text-color cursor" (click)="SortByGroupOrDate()">{{ dataService.sortTodosByDate ? locale.sortByGroup : locale.sortByDate }}</button>
-         <button class="dropdown-item text-color cursor" (click)="ShowNewTodoModal()">{{ locale.newTodo }}</button>
-         <button class="dropdown-item text-color cursor" (click)="ShowNewTodoListModal()">{{ locale.newTodoList }}</button>
-		</div>
-	</h1>
-
-	<p class="no-items-message font-weight-light text-center mt-3 text-color"
-		*ngIf="dataService.todosWithoutDate.todos.length == 0 
-					&& dataService.todosWithoutDate.todoLists.length == 0
-					&& dataService.todoDays.length == 0
-					&& dataService.todosWithoutGroup.length == 0 
-					&& dataService.todoListsWithoutGroup.length == 0
-					&& dataService.todoGroups.length == 0">
-		{{ locale.noTodos }}
-	</p>
-
-	<div class="row">
-		<!-- Sort by date -->
-      <div class="card offset-1 col-11 col-md-9 col-lg-7 mx-auto my-4 theme-background-color-secondary ms-depth-4" 
-            *ngIf="dataService.todosWithoutDate.todos.length > 0 || dataService.todosWithoutDate.todoLists.length > 0">
-			<ul class="list-group list-group-flush">
-            <calendo-todo-item [todo]="todo" (delete)="DeleteTodo(todo)" *ngFor="let todo of dataService.todosWithoutDate.todos"></calendo-todo-item>
-            <calendo-todo-list-item [todoList]="todoList" *ngFor="let todoList of dataService.todosWithoutDate.todoLists"></calendo-todo-list-item>
-			</ul>
-		</div>
-
-		<div class="card offset-1 col-11 col-md-9 col-lg-7 mx-auto my-4 theme-background-color-secondary ms-depth-4" 
-				*ngFor="let todoDay of dataService.todoDays" [ngClass]="todoDay.todos.length > 0 || todoDay.todoLists.length > 0 ? '' : 'hidden'">
-			<div class="card-body">
-				<h5
-					class="card-title text-color"
-					*ngIf="todoDay.todos.length > 0 || todoDay.todoLists.length > 0">
-					<span (click)="ShowCalendarDay(todoDay.timestamp)">{{ todoDay.date }}</span>
-				</h5>
-
-				<ul class="list-group list-group-flush">
-					<calendo-todo-item [todo]="todo" (delete)="DeleteTodo(todo)" *ngFor="let todo of todoDay.todos"></calendo-todo-item>
-					<calendo-todo-list-item [todoList]="todoList" *ngFor="let todoList of todoDay.todoLists"></calendo-todo-list-item>
-				</ul>
-			</div>
-		</div>
-
-		<!-- Sort by group -->
-		<div class="card offset-1 col-11 col-md-9 col-lg-7 mx-auto my-4 theme-background-color-secondary ms-depth-4" 
-				*ngIf="dataService.todosWithoutGroup.length > 0 || dataService.todoListsWithoutGroup.length > 0">
-			<ul class="list-group list-group-flush">
-				<calendo-todo-item [todo]="todo" (delete)="DeleteTodo(todo)" [showBadge]="false" *ngFor="let todo of dataService.todosWithoutGroup"></calendo-todo-item>
-				<calendo-todo-list-item [todoList]="todoList" *ngFor="let todoList of dataService.todoListsWithoutGroup"></calendo-todo-list-item>
-			</ul>
-		</div>
-
-      <div class="card offset-1 col-11 col-md-9 col-lg-7 mx-auto my-4 theme-background-color-secondary ms-depth-4" 
-            *ngFor="let todoGroup of dataService.todoGroups" [ngClass]="todoGroup.todos.length > 0 || todoGroup.todoLists.length > 0 ? '' : 'hidden'">
-			<div class="card-body">
-				<h5 class="card-title text-color" *ngIf="todoGroup.todos.length > 0 || todoGroup.todoLists.length > 0">{{ todoGroup.name }}</h5>
-				<ul class="list-group list-group-flush">
-					<calendo-todo-item [todo]="todo" (delete)="DeleteTodo(todo)" [showBadge]="false" *ngFor="let todo of todoGroup.todos"></calendo-todo-item>
-					<calendo-todo-list-item [todoList]="todoList" (update)="TodoListUpdated(todoList.uuid, todoGroup.name)" *ngFor="let todoList of todoGroup.todoLists"></calendo-todo-list-item>
-				</ul>
-			</div>
-		</div>
-	</div>
-
-   <calendo-new-todo-modal (save)="CreateTodo($event)"></calendo-new-todo-modal>
-   <calendo-todo-list-modal (save)="CreateTodoList($event)"></calendo-todo-list-modal>
-</div>
\ No newline at end of file
+<div class="container-fluid ms-motion-slideUpIn" style="padding-bottom: 56px">
+	<h1
+		class="text-center mt-3 text-color font-weight-light"
+		ngbDropdown
+		placement="bottom-right"
+	>
+		{{ locale.header }}
+		<button
+			type="button"
+			class="btn btn-outline-primary btn-sm mb-1"
+			ngbDropdownToggle
+		>
+			<fa-icon [icon]="faEllipsisH"></fa-icon>
+		</button>
+		<div
+			ngbDropdownMenu
+			class="theme-background-color-tertiary ms-depth-4 ms-motion-slideDownIn"
+		>
+			<button
+				class="dropdown-item text-color cursor"
+				(click)="SortByGroupOrDate()"
+			>
+				{{
+					dataService.sortTodosByDate
+						? locale.sortByGroup
+						: locale.sortByDate
+				}}
+			</button>
+			<button
+				class="dropdown-item text-color cursor"
+				(click)="ShowNewTodoModal()"
+			>
+				{{ locale.newTodo }}
+			</button>
+			<button
+				class="dropdown-item text-color cursor"
+				(click)="ShowNewTodoListModal()"
+			>
+				{{ locale.newTodoList }}
+			</button>
+		</div>
+	</h1>
+
+	<p
+		class="no-items-message font-weight-light text-center mt-3 text-color"
+		*ngIf="
+			dataService.todosWithoutDate.todos.length == 0 &&
+			dataService.todosWithoutDate.todoLists.length == 0 &&
+			dataService.todoDays.length == 0 &&
+			dataService.todosWithoutGroup.length == 0 &&
+			dataService.todoListsWithoutGroup.length == 0 &&
+			dataService.todoGroups.length == 0
+		"
+	>
+		{{ locale.noTodos }}
+	</p>
+
+	<div class="row">
+		<!-- Sort by date -->
+		<div
+			class="card offset-1 col-11 col-md-9 col-lg-7 mx-auto my-4 theme-background-color-secondary ms-depth-4"
+			*ngIf="
+				dataService.todosWithoutDate.todos.length > 0 ||
+				dataService.todosWithoutDate.todoLists.length > 0
+			"
+		>
+			<ul class="list-group list-group-flush">
+				<calendo-todo-item
+					[todo]="todo"
+					(delete)="DeleteTodo(todo)"
+					*ngFor="let todo of dataService.todosWithoutDate.todos"
+				></calendo-todo-item>
+				<calendo-todo-list-item
+					[todoList]="todoList"
+					*ngFor="let todoList of dataService.todosWithoutDate.todoLists"
+				></calendo-todo-list-item>
+			</ul>
+		</div>
+
+		<div
+			class="card offset-1 col-11 col-md-9 col-lg-7 mx-auto my-4 theme-background-color-secondary ms-depth-4"
+			*ngFor="let todoDay of dataService.todoDays"
+			[ngClass]="
+				todoDay.todos.length > 0 || todoDay.todoLists.length > 0
+					? ''
+					: 'hidden'
+			"
+		>
+			<div class="card-body">
+				<h5
+					class="card-title text-color"
+					*ngIf="todoDay.todos.length > 0 || todoDay.todoLists.length > 0"
+				>
+					<span (click)="ShowCalendarDay(todoDay.timestamp)">
+						{{ todoDay.date }}
+					</span>
+				</h5>
+
+				<ul class="list-group list-group-flush">
+					<calendo-todo-item
+						[todo]="todo"
+						(delete)="DeleteTodo(todo)"
+						*ngFor="let todo of todoDay.todos"
+					></calendo-todo-item>
+					<calendo-todo-list-item
+						[todoList]="todoList"
+						*ngFor="let todoList of todoDay.todoLists"
+					></calendo-todo-list-item>
+				</ul>
+			</div>
+		</div>
+
+		<!-- Sort by group -->
+		<div
+			class="card offset-1 col-11 col-md-9 col-lg-7 mx-auto my-4 theme-background-color-secondary ms-depth-4"
+			*ngIf="
+				dataService.todosWithoutGroup.length > 0 ||
+				dataService.todoListsWithoutGroup.length > 0
+			"
+		>
+			<ul class="list-group list-group-flush">
+				<calendo-todo-item
+					[todo]="todo"
+					(delete)="DeleteTodo(todo)"
+					[showBadge]="false"
+					*ngFor="let todo of dataService.todosWithoutGroup"
+				></calendo-todo-item>
+				<calendo-todo-list-item
+					[todoList]="todoList"
+					*ngFor="let todoList of dataService.todoListsWithoutGroup"
+				></calendo-todo-list-item>
+			</ul>
+		</div>
+
+		<div
+			class="card offset-1 col-11 col-md-9 col-lg-7 mx-auto my-4 theme-background-color-secondary ms-depth-4"
+			*ngFor="let todoGroup of dataService.todoGroups"
+			[ngClass]="
+				todoGroup.todos.length > 0 || todoGroup.todoLists.length > 0
+					? ''
+					: 'hidden'
+			"
+		>
+			<div class="card-body">
+				<h5
+					class="card-title text-color"
+					*ngIf="
+						todoGroup.todos.length > 0 || todoGroup.todoLists.length > 0
+					"
+				>
+					{{ todoGroup.name }}
+				</h5>
+				<ul class="list-group list-group-flush">
+					<calendo-todo-item
+						[todo]="todo"
+						(delete)="DeleteTodo(todo)"
+						[showBadge]="false"
+						*ngFor="let todo of todoGroup.todos"
+					></calendo-todo-item>
+					<calendo-todo-list-item
+						[todoList]="todoList"
+						(update)="TodoListUpdated(todoList.uuid, todoGroup.name)"
+						*ngFor="let todoList of todoGroup.todoLists"
+					></calendo-todo-list-item>
+				</ul>
+			</div>
+		</div>
+	</div>
+
+	<calendo-new-todo-modal (save)="CreateTodo($event)"></calendo-new-todo-modal>
+	<calendo-todo-list-modal
+		(save)="CreateTodoList($event)"
+	></calendo-todo-list-modal>
+</div>
diff --git a/src/app/pages/todos-page/todos-page.component.scss b/src/app/pages/todos-page/todos-page.component.scss
index 4a88371..7c6cc7c 100644
--- a/src/app/pages/todos-page/todos-page.component.scss
+++ b/src/app/pages/todos-page/todos-page.component.scss
@@ -1,7 +1,7 @@
-.hidden{
-   display: none;
-}
-
-.dropdown-toggle::after {
-	display:none;
-}
\ No newline at end of file
+.hidden {
+	display: none;
+}
+
+.dropdown-toggle::after {
+	display: none;
+}
diff --git a/src/app/pages/todos-page/todos-page.component.ts b/src/app/pages/todos-page/todos-page.component.ts
index dcf4255..7b7eecf 100644
--- a/src/app/pages/todos-page/todos-page.component.ts
+++ b/src/app/pages/todos-page/todos-page.component.ts
@@ -1,91 +1,104 @@
-import { Component, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
-import { Todo } from '../../models/Todo';
-import { DataService } from '../../services/data-service';
-import { NewTodoModalComponent } from '../../components/new-todo-modal/new-todo-modal.component';
-import { TodoListModalComponent } from '../../components/todo-list-modal/todo-list-modal.component';
-import { enUS } from '../../../locales/locales';
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
-import { TodoList } from 'src/app/models/TodoList';
-import { MatSnackBar } from '@angular/material/snack-bar';
-
-@Component({
-   selector: "calendo-todos-page",
-   templateUrl: "./todos-page.component.html",
-   styleUrls: [
-      "./todos-page.component.scss"
-   ]
-})
-export class TodosPageComponent{
-   locale = enUS.todosPage;
-   snackbarLocale = enUS.snackbar;
-	faEllipsisH = faEllipsisH;
-	@ViewChild(NewTodoModalComponent, { static: true })
-   private newTodoModalComponent: NewTodoModalComponent;
-   @ViewChild(TodoListModalComponent, { static: true })
-   private todoListModalComponent: TodoListModalComponent;
-
-	constructor(
-      public dataService: DataService,
-      public router: Router,
-      public snackBar: MatSnackBar
-   ){
-      this.locale = this.dataService.GetLocale().todosPage;
-      this.snackbarLocale = this.dataService.GetLocale().snackbar;
-		this.dataService.HideWindowsBackButton();
-   }
-   
-   SortByGroupOrDate(){
-		this.dataService.sortTodosByDate = !this.dataService.sortTodosByDate;
-		this.dataService.LoadAllTodos();
-	}
-
-	ShowNewTodoModal(){
-		this.newTodoModalComponent.Show();
-   }
-
-	CreateTodo(todo: Todo){
-      this.dataService.AddTodo(todo);
-      
-      // Show snackbar
-      if(todo.time == 0){
-			this.snackBar.open(this.snackbarLocale.todoCreated, null, {duration: 3000})
-		}else{
-			this.snackBar.open(this.snackbarLocale.todoCreated, this.snackbarLocale.show, {duration: 3000}).onAction().subscribe(() => {
-				// Show the day of the todo
-				this.router.navigate(["calendar/day", todo.time])
-			})
-		}
-
-		this.dataService.AdaptSnackbarPosition()
-	}
-
-	DeleteTodo(todo: Todo){
-		this.dataService.RemoveTodo(todo);
-   }
-   
-   ShowNewTodoListModal(){
-      this.todoListModalComponent.Show();
-   }
-
-   CreateTodoList(todoList: TodoList){
-		this.dataService.AddTodoList(todoList)
-
-		// Show snackbar
-		this.snackBar.open(this.snackbarLocale.todoListCreated, this.snackbarLocale.show, {duration: 3000}).onAction().subscribe(() => {
-			// Show the todo list
-			this.router.navigate(["todolist", todoList.uuid])
-		})
-
-		this.dataService.AdaptSnackbarPosition()
-   }
-
-	// This is called when a todo list in the Sort By Groups mode was updated; Update all todo lists of the same object
-   TodoListUpdated(todoListUuid: string, todoGroup: string){
-		this.dataService.UpdateTodoListsOnSortByGroupTodoPage(todoListUuid, todoGroup);
-	}
-	
-	ShowCalendarDay(date: number){
-		this.router.navigate(['/calendar/day', date]);
-	}
-}
\ No newline at end of file
+import { Component, ViewChild } from "@angular/core"
+import { Router } from "@angular/router"
+import { Todo } from "../../models/Todo"
+import { DataService } from "../../services/data-service"
+import { NewTodoModalComponent } from "../../components/new-todo-modal/new-todo-modal.component"
+import { TodoListModalComponent } from "../../components/todo-list-modal/todo-list-modal.component"
+import { enUS } from "../../../locales/locales"
+import { faEllipsisH } from "@fortawesome/free-solid-svg-icons"
+import { TodoList } from "src/app/models/TodoList"
+import { MatSnackBar } from "@angular/material/snack-bar"
+
+@Component({
+	selector: "calendo-todos-page",
+	templateUrl: "./todos-page.component.html",
+	styleUrls: ["./todos-page.component.scss"]
+})
+export class TodosPageComponent {
+	locale = enUS.todosPage
+	snackbarLocale = enUS.snackbar
+	faEllipsisH = faEllipsisH
+	@ViewChild(NewTodoModalComponent, { static: true })
+	private newTodoModalComponent: NewTodoModalComponent
+	@ViewChild(TodoListModalComponent, { static: true })
+	private todoListModalComponent: TodoListModalComponent
+
+	constructor(
+		public dataService: DataService,
+		public router: Router,
+		public snackBar: MatSnackBar
+	) {
+		this.locale = this.dataService.GetLocale().todosPage
+		this.snackbarLocale = this.dataService.GetLocale().snackbar
+		this.dataService.HideWindowsBackButton()
+	}
+
+	SortByGroupOrDate() {
+		this.dataService.sortTodosByDate = !this.dataService.sortTodosByDate
+		this.dataService.LoadAllTodos()
+	}
+
+	ShowNewTodoModal() {
+		this.newTodoModalComponent.Show()
+	}
+
+	CreateTodo(todo: Todo) {
+		this.dataService.AddTodo(todo)
+
+		// Show snackbar
+		if (todo.time == 0) {
+			this.snackBar.open(this.snackbarLocale.todoCreated, null, {
+				duration: 3000
+			})
+		} else {
+			this.snackBar
+				.open(this.snackbarLocale.todoCreated, this.snackbarLocale.show, {
+					duration: 3000
+				})
+				.onAction()
+				.subscribe(() => {
+					// Show the day of the todo
+					this.router.navigate(["calendar/day", todo.time])
+				})
+		}
+
+		this.dataService.AdaptSnackbarPosition()
+	}
+
+	DeleteTodo(todo: Todo) {
+		this.dataService.RemoveTodo(todo)
+	}
+
+	ShowNewTodoListModal() {
+		this.todoListModalComponent.Show()
+	}
+
+	CreateTodoList(todoList: TodoList) {
+		this.dataService.AddTodoList(todoList)
+
+		// Show snackbar
+		this.snackBar
+			.open(this.snackbarLocale.todoListCreated, this.snackbarLocale.show, {
+				duration: 3000
+			})
+			.onAction()
+			.subscribe(() => {
+				// Show the todo list
+				this.router.navigate(["todolist", todoList.uuid])
+			})
+
+		this.dataService.AdaptSnackbarPosition()
+	}
+
+	// This is called when a todo list in the Sort By Groups mode was updated; Update all todo lists of the same object
+	TodoListUpdated(todoListUuid: string, todoGroup: string) {
+		this.dataService.UpdateTodoListsOnSortByGroupTodoPage(
+			todoListUuid,
+			todoGroup
+		)
+	}
+
+	ShowCalendarDay(date: number) {
+		this.router.navigate(["/calendar/day", date])
+	}
+}
diff --git a/src/app/services/data-service.ts b/src/app/services/data-service.ts
index 4b048a8..425eb19 100644
--- a/src/app/services/data-service.ts
+++ b/src/app/services/data-service.ts
@@ -2,22 +2,22 @@ import { Injectable } from "@angular/core"
 import { Todo, GetAllTodos } from "../models/Todo"
 import { Appointment, GetAllAppointments } from "../models/Appointment"
 import { TodoList, GetAllTodoLists, GetTodoList } from "../models/TodoList"
-import { Dav } from 'dav-js'
-import * as moment from 'moment'
+import { Dav } from "dav-js"
+import * as moment from "moment"
 import * as localforage from "localforage"
 import { environment } from "../../environments/environment.prod"
 import * as locales from "../../locales/locales"
 
 @Injectable()
-export class DataService{
+export class DataService {
 	dav = Dav
 	locale: string = navigator.language
 
 	//#region StartPage
-	startDaysDates: number[] = [];					// Contains the timestamps of the start of the days
-	startDaysAppointments: Appointment[][] = [];	// Contains the appointments for the individual days
-	startDaysTodos: Todo[][] = [];					// Contains the todos for the individual days
-	startDaysTodoLists: TodoList[][] = [];			// Contains the todo lists for the individual days
+	startDaysDates: number[] = [] // Contains the timestamps of the start of the days
+	startDaysAppointments: Appointment[][] = [] // Contains the appointments for the individual days
+	startDaysTodos: Todo[][] = [] // Contains the todos for the individual days
+	startDaysTodoLists: TodoList[][] = [] // Contains the todo lists for the individual days
 	//#endregion
 
 	//#region TodosPage
@@ -27,11 +27,11 @@ export class DataService{
 		todos: [],
 		todoLists: []
 	}
-	todoDays: TodoDay[] = [];
+	todoDays: TodoDay[] = []
 
-	todosWithoutGroup: Todo[] = [];
-	todoListsWithoutGroup: TodoList[] = [];
-	todoGroups: { name: string, todos: Todo[], todoLists: TodoList[] }[] = [];
+	todosWithoutGroup: Todo[] = []
+	todoListsWithoutGroup: TodoList[] = []
+	todoGroups: { name: string; todos: Todo[]; todoLists: TodoList[] }[] = []
 	//#endregion
 
 	//#region AppointmentsPage
@@ -40,37 +40,37 @@ export class DataService{
 	//#endregion
 
 	//#region CalendarPage
-	private updatingCalendarDays: boolean = false;
-	private updateCalendarDaysAgain: boolean = false;
-	allAppointments: Appointment[] = [];		// Save all objects to add them to the calendar days in UpdateCalendarDays
-	allTodos: Todo[] = [];
-	allTodoLists: TodoList[] = [];
-
-	mobileCalendarDaysDates: number[] = [];
-	mobileCalendarDaysAppointments: Appointment[][] = [];
-	mobileCalendarDaysTodos: Todo[][] = [];
-
-	desktopCalendarDaysDates: number[][] = [];
-	desktopCalendarDaysAppointments: Appointment[][][] = [];
-	desktopCalendarDaysTodos: Todo[][][] = [];
-
-	selectedDay: moment.Moment = moment();
-	selectedDayAppointments: Appointment[] = [];
-   selectedDayTodos: Todo[] = [];
-   selectedDayTodoLists: TodoList[] = [];
+	private updatingCalendarDays: boolean = false
+	private updateCalendarDaysAgain: boolean = false
+	allAppointments: Appointment[] = [] // Save all objects to add them to the calendar days in UpdateCalendarDays
+	allTodos: Todo[] = []
+	allTodoLists: TodoList[] = []
+
+	mobileCalendarDaysDates: number[] = []
+	mobileCalendarDaysAppointments: Appointment[][] = []
+	mobileCalendarDaysTodos: Todo[][] = []
+
+	desktopCalendarDaysDates: number[][] = []
+	desktopCalendarDaysAppointments: Appointment[][][] = []
+	desktopCalendarDaysTodos: Todo[][][] = []
+
+	selectedDay: moment.Moment = moment()
+	selectedDayAppointments: Appointment[] = []
+	selectedDayTodos: Todo[] = []
+	selectedDayTodoLists: TodoList[] = []
 	//#endregion
 
 	//#region All pages
-	sortTodosByDate: boolean = true;
-	smallWindow: boolean = false;
-	darkTheme: boolean = false;
+	sortTodosByDate: boolean = true
+	smallWindow: boolean = false
+	darkTheme: boolean = false
 	windowsUiSettings = null
-	isLoadingAllAppointments: boolean = false;	// If true, LoadAllAppointments is currently running
-	isLoadingAllTodos: boolean = false;
-	updatedTodoLists: string[] = [];
+	isLoadingAllAppointments: boolean = false // If true, LoadAllAppointments is currently running
+	isLoadingAllTodos: boolean = false
+	updatedTodoLists: string[] = []
 	//#endregion
 
-	constructor(){
+	constructor() {
 		this.InitStartDays()
 		this.LoadAllAppointments()
 		this.LoadAllTodos()
@@ -80,22 +80,22 @@ export class DataService{
 		})
 	}
 
-	InitStartDays(){
-		this.startDaysDates = [];
-		this.startDaysAppointments = [];
-		this.startDaysTodos = [];
-		this.startDaysTodoLists = [];
+	InitStartDays() {
+		this.startDaysDates = []
+		this.startDaysAppointments = []
+		this.startDaysTodos = []
+		this.startDaysTodoLists = []
 
 		// Add the current day to the start page
-		this.startDaysDates.push(moment().startOf('day').unix());
-		this.startDaysAppointments.push([]);
-		this.startDaysTodos.push([]);
-		this.startDaysTodoLists.push([]);
+		this.startDaysDates.push(moment().startOf("day").unix())
+		this.startDaysAppointments.push([])
+		this.startDaysTodos.push([])
+		this.startDaysTodoLists.push([])
 	}
 
-	async LoadAllAppointments(){
-		if(this.isLoadingAllAppointments) return;
-		this.isLoadingAllAppointments = true;
+	async LoadAllAppointments() {
+		if (this.isLoadingAllAppointments) return
+		this.isLoadingAllAppointments = true
 
 		this.appointmentDays = []
 		this.oldAppointmentDays = []
@@ -103,467 +103,509 @@ export class DataService{
 		this.ClearCalendarDaysAppointments()
 		this.selectedDayAppointments = []
 
-		var appointments = await GetAllAppointments();
-		for(let appointment of appointments){
-			this.AddAppointmentToStartPage(appointment);
-			this.AddAppointmentToAppointmentsPage(appointment);
-			this.AddAppointmentToCalendarPage(appointment);
+		var appointments = await GetAllAppointments()
+		for (let appointment of appointments) {
+			this.AddAppointmentToStartPage(appointment)
+			this.AddAppointmentToAppointmentsPage(appointment)
+			this.AddAppointmentToCalendarPage(appointment)
 		}
 
-		this.isLoadingAllAppointments = false;
+		this.isLoadingAllAppointments = false
 	}
 
-	async LoadAllTodos(){
-		if(this.isLoadingAllTodos) return;
-		this.isLoadingAllTodos = true;
-
-		this.todosWithoutDate.todos = [];
-		this.todosWithoutDate.todoLists = [];
-		this.todoDays = [];
-		this.todosWithoutGroup = [];
-		this.todoListsWithoutGroup = [];
-		this.todoGroups = [];
-		this.allTodos = [];
-		this.allTodoLists = [];
-		this.ClearCalendarDaysTodos();
-		this.selectedDayTodos = [];
-		this.selectedDayTodoLists = [];
-
-      // Load todos
-		var todos = await GetAllTodos();
-		for(let todo of todos){
-			this.AddTodoToStartPage(todo);
-			this.AddTodoToTodosPage(todo);
-			this.AddTodoToCalendarPage(todo);
+	async LoadAllTodos() {
+		if (this.isLoadingAllTodos) return
+		this.isLoadingAllTodos = true
+
+		this.todosWithoutDate.todos = []
+		this.todosWithoutDate.todoLists = []
+		this.todoDays = []
+		this.todosWithoutGroup = []
+		this.todoListsWithoutGroup = []
+		this.todoGroups = []
+		this.allTodos = []
+		this.allTodoLists = []
+		this.ClearCalendarDaysTodos()
+		this.selectedDayTodos = []
+		this.selectedDayTodoLists = []
+
+		// Load todos
+		var todos = await GetAllTodos()
+		for (let todo of todos) {
+			this.AddTodoToStartPage(todo)
+			this.AddTodoToTodosPage(todo)
+			this.AddTodoToCalendarPage(todo)
 		}
 
 		// Load todo lists
-		let todoLists = await GetAllTodoLists();
+		let todoLists = await GetAllTodoLists()
 
-      for(let todoList of todoLists){
-			this.AddTodoListToStartPage(todoList);
-			this.AddTodoListToTodosPage(todoList);
-			this.AddTodoListToCalendarPage(todoList);
+		for (let todoList of todoLists) {
+			this.AddTodoListToStartPage(todoList)
+			this.AddTodoListToTodosPage(todoList)
+			this.AddTodoListToCalendarPage(todoList)
 		}
 
-		this.isLoadingAllTodos = false;
+		this.isLoadingAllTodos = false
 	}
 
-	ClearCalendarDaysAppointments(){
-		for(let appointments of this.mobileCalendarDaysAppointments){
-			appointments = [];
+	ClearCalendarDaysAppointments() {
+		for (let appointments of this.mobileCalendarDaysAppointments) {
+			appointments = []
 		}
 
-		this.ClearCalendarDaysDates();
+		this.ClearCalendarDaysDates()
 	}
 
-	ClearCalendarDaysTodos(){
-		for(let todos of this.mobileCalendarDaysTodos){
-			todos = [];
+	ClearCalendarDaysTodos() {
+		for (let todos of this.mobileCalendarDaysTodos) {
+			todos = []
 		}
 
-		this.ClearCalendarDaysDates();
+		this.ClearCalendarDaysDates()
 	}
 
-	ClearCalendarDaysDates(){
-		for(let date of this.mobileCalendarDaysDates){
-			date = 0;
+	ClearCalendarDaysDates() {
+		for (let date of this.mobileCalendarDaysDates) {
+			date = 0
 		}
-   }
-
-   AddTodoList(todoList: TodoList){
-      this.AddTodoListToStartPage(todoList);
-		this.AddTodoListToTodosPage(todoList);
-		this.AddTodoListToCalendarPage(todoList);
-   }
-
-   UpdateTodoList(todoList: TodoList){
-		this.RemoveTodoList(todoList);
-		this.AddTodoList(todoList);
-   }
-   
-   RemoveTodoList(todoList: TodoList){
-      this.RemoveTodoListFromStartPage(todoList);
-		this.RemoveTodoListFromTodosPage(todoList);
-		this.RemoveTodoListFromCalendarPage(todoList);
-   }
-
-	AddTodo(todo: Todo){
-		this.AddTodoToStartPage(todo);
-		this.AddTodoToTodosPage(todo);
-		this.AddTodoToCalendarPage(todo);
 	}
 
-	UpdateTodo(todo: Todo){
-		this.RemoveTodo(todo);
-		this.AddTodo(todo);
+	AddTodoList(todoList: TodoList) {
+		this.AddTodoListToStartPage(todoList)
+		this.AddTodoListToTodosPage(todoList)
+		this.AddTodoListToCalendarPage(todoList)
 	}
 
-	RemoveTodo(todo: Todo){
-		this.RemoveTodoFromStartPage(todo);
-		this.RemoveTodoFromTodosPage(todo);
-		this.RemoveTodoFromCalendarPage(todo);
+	UpdateTodoList(todoList: TodoList) {
+		this.RemoveTodoList(todoList)
+		this.AddTodoList(todoList)
 	}
 
-	AddAppointment(appointment: Appointment){
-		this.AddAppointmentToStartPage(appointment);
-		this.AddAppointmentToAppointmentsPage(appointment);
-		this.AddAppointmentToCalendarPage(appointment);
+	RemoveTodoList(todoList: TodoList) {
+		this.RemoveTodoListFromStartPage(todoList)
+		this.RemoveTodoListFromTodosPage(todoList)
+		this.RemoveTodoListFromCalendarPage(todoList)
 	}
 
-	UpdateAppointment(appointment: Appointment){
-		this.RemoveAppointment(appointment);
-		this.AddAppointment(appointment);
+	AddTodo(todo: Todo) {
+		this.AddTodoToStartPage(todo)
+		this.AddTodoToTodosPage(todo)
+		this.AddTodoToCalendarPage(todo)
 	}
 
-	RemoveAppointment(appointment: Appointment){
-		this.RemoveAppointmentFromStartPage(appointment);
-		this.RemoveAppointmentFromAppointmentsPage(appointment);
-		this.RemoveAppointmentFromCalendarPage(appointment);
+	UpdateTodo(todo: Todo) {
+		this.RemoveTodo(todo)
+		this.AddTodo(todo)
 	}
 
-	SortAppointmentsArray(appointments: Appointment[]){
+	RemoveTodo(todo: Todo) {
+		this.RemoveTodoFromStartPage(todo)
+		this.RemoveTodoFromTodosPage(todo)
+		this.RemoveTodoFromCalendarPage(todo)
+	}
+
+	AddAppointment(appointment: Appointment) {
+		this.AddAppointmentToStartPage(appointment)
+		this.AddAppointmentToAppointmentsPage(appointment)
+		this.AddAppointmentToCalendarPage(appointment)
+	}
+
+	UpdateAppointment(appointment: Appointment) {
+		this.RemoveAppointment(appointment)
+		this.AddAppointment(appointment)
+	}
+
+	RemoveAppointment(appointment: Appointment) {
+		this.RemoveAppointmentFromStartPage(appointment)
+		this.RemoveAppointmentFromAppointmentsPage(appointment)
+		this.RemoveAppointmentFromCalendarPage(appointment)
+	}
+
+	SortAppointmentsArray(appointments: Appointment[]) {
 		appointments.sort((a: Appointment, b: Appointment) => {
-			if(a.allday) return 1;
-			if(b.allday) return -1;
-
-			if(a.start < b.start){
-				return -1;
-			}else if(a.start > b.start){
-				return 1;
-			}else{
-				return 0;
+			if (a.allday) return 1
+			if (b.allday) return -1
+
+			if (a.start < b.start) {
+				return -1
+			} else if (a.start > b.start) {
+				return 1
+			} else {
+				return 0
 			}
-		});
+		})
 	}
 
-	SortTodosArray(todos: Todo[]){
+	SortTodosArray(todos: Todo[]) {
 		todos.sort((a: Todo, b: Todo) => {
-			if(a.time < b.time){
-				return -1;
-			}else if(a.time > b.time){
-				return 1;
-			}else{
-				return 0;
+			if (a.time < b.time) {
+				return -1
+			} else if (a.time > b.time) {
+				return 1
+			} else {
+				return 0
 			}
-		});
+		})
 	}
 
-	SortTodoListsArray(todoLists: TodoList[]){
+	SortTodoListsArray(todoLists: TodoList[]) {
 		todoLists.sort((a: TodoList, b: TodoList) => {
-			if(a.time < b.time){
-				return -1;
-			}else if(a.time > b.time){
-				return 1;
-			}else{
-				return 0;
+			if (a.time < b.time) {
+				return -1
+			} else if (a.time > b.time) {
+				return 1
+			} else {
+				return 0
 			}
-		});
+		})
 	}
 
-	SortStartDays(){
-		for(let j = 0; j < this.startDaysDates.length; j++){
-			for(let i = 1; i < this.startDaysDates.length; i++){
-				if(this.startDaysDates[i - 1] > this.startDaysDates[i]){
+	SortStartDays() {
+		for (let j = 0; j < this.startDaysDates.length; j++) {
+			for (let i = 1; i < this.startDaysDates.length; i++) {
+				if (this.startDaysDates[i - 1] > this.startDaysDates[i]) {
 					// Swap the dates
-					let firstDate = this.startDaysDates[i - 1];
-					let secondDate = this.startDaysDates[i];
-					this.startDaysDates[i - 1] = secondDate;
-					this.startDaysDates[i] = firstDate;
-
-					let firstAppointments = this.startDaysAppointments[i - 1];
-					let secondAppointments = this.startDaysAppointments[i];
-					this.startDaysAppointments[i - 1] = secondAppointments;
-					this.startDaysAppointments[i] = firstAppointments;
-
-					let firstTodos = this.startDaysTodos[i - 1];
-					let secondTodos = this.startDaysTodos[i];
-					this.startDaysTodos[i - 1] = secondTodos;
-					this.startDaysTodos[i] = firstTodos;
-
-					let firstTodoLists = this.startDaysTodoLists[i - 1];
-					let secondTodoLists = this.startDaysTodoLists[i];
-					this.startDaysTodoLists[i - 1] = secondTodoLists;
-					this.startDaysTodoLists[i] = firstTodoLists;
+					let firstDate = this.startDaysDates[i - 1]
+					let secondDate = this.startDaysDates[i]
+					this.startDaysDates[i - 1] = secondDate
+					this.startDaysDates[i] = firstDate
+
+					let firstAppointments = this.startDaysAppointments[i - 1]
+					let secondAppointments = this.startDaysAppointments[i]
+					this.startDaysAppointments[i - 1] = secondAppointments
+					this.startDaysAppointments[i] = firstAppointments
+
+					let firstTodos = this.startDaysTodos[i - 1]
+					let secondTodos = this.startDaysTodos[i]
+					this.startDaysTodos[i - 1] = secondTodos
+					this.startDaysTodos[i] = firstTodos
+
+					let firstTodoLists = this.startDaysTodoLists[i - 1]
+					let secondTodoLists = this.startDaysTodoLists[i]
+					this.startDaysTodoLists[i - 1] = secondTodoLists
+					this.startDaysTodoLists[i] = firstTodoLists
 				}
 			}
 		}
 	}
 
-	SortTodoDays(){
-		this.todoDays.sort((a: {timestamp: number}, b: {timestamp: number}) => {
-			if(a.timestamp < b.timestamp){
-				return -1;
-			}else if(a.timestamp > b.timestamp){
-				return 1;
-			}else{
-				return 0;
+	SortTodoDays() {
+		this.todoDays.sort(
+			(a: { timestamp: number }, b: { timestamp: number }) => {
+				if (a.timestamp < b.timestamp) {
+					return -1
+				} else if (a.timestamp > b.timestamp) {
+					return 1
+				} else {
+					return 0
+				}
 			}
-		});
+		)
 	}
 
-	GetLocale(){
-		let l = this.locale.toLowerCase();
-
-		if(l.includes("en")){			// en
-			if(l == "en-gb") 				return locales.enGB;
-			else if(l == "en-nz")		return locales.enNZ;
-			else if(l == "en-il")		return locales.enIL;
-			else if(l == "en-ie")		return locales.enIE;
-			else if(l == "en-ca")		return locales.enCA;
-			else if(l == "en-au")		return locales.enAU;
-			else 								return locales.enUS;
-		}if(l.includes("de")){			// de
-			if(l == "de-at") 				return locales.deAT;
-			else if(l == "de-ch") 		return locales.deCH;
-			else 								return locales.deDE;
+	GetLocale() {
+		let l = this.locale.toLowerCase()
+
+		if (l.includes("en")) {
+			// en
+			if (l == "en-gb") return locales.enGB
+			else if (l == "en-nz") return locales.enNZ
+			else if (l == "en-il") return locales.enIL
+			else if (l == "en-ie") return locales.enIE
+			else if (l == "en-ca") return locales.enCA
+			else if (l == "en-au") return locales.enAU
+			else return locales.enUS
+		}
+		if (l.includes("de")) {
+			// de
+			if (l == "de-at") return locales.deAT
+			else if (l == "de-ch") return locales.deCH
+			else return locales.deDE
 		}
 
-		return locales.enUS;
+		return locales.enUS
 	}
 
-	HideWindowsBackButton(){
-		if(window["Windows"]){
-			window["Windows"].UI.Core.SystemNavigationManager.getForCurrentView().appViewBackButtonVisibility = window["Windows"].UI.Core.AppViewBackButtonVisibility.collapsed;
+	HideWindowsBackButton() {
+		if (window["Windows"]) {
+			window[
+				"Windows"
+			].UI.Core.SystemNavigationManager.getForCurrentView().appViewBackButtonVisibility =
+				window["Windows"].UI.Core.AppViewBackButtonVisibility.collapsed
 		}
 	}
 
-	async ApplyTheme(theme?: string){
-		if(theme == null){
+	async ApplyTheme(theme?: string) {
+		if (theme == null) {
 			// Get the theme from the settings
 			theme = await this.GetTheme()
 		}
 
-		switch (theme){
+		switch (theme) {
 			case environment.darkThemeKey:
 				// Dark theme
-				this.darkTheme = true;
-				break;
+				this.darkTheme = true
+				break
 			case environment.systemThemeKey:
 				// Get the Windows theme
-				if(window["Windows"]){
-					if(this.windowsUiSettings == null){
-						this.windowsUiSettings = new window["Windows"].UI.ViewManagement.UISettings();
+				if (window["Windows"]) {
+					if (this.windowsUiSettings == null) {
+						this.windowsUiSettings = new window[
+							"Windows"
+						].UI.ViewManagement.UISettings()
 					}
-					
+
 					var color = this.windowsUiSettings.getColorValue(
 						window["Windows"].UI.ViewManagement.UIColorType.background
-					);
+					)
 
-					this.darkTheme = color.r == 0;
+					this.darkTheme = color.r == 0
 
 					// Observe the system theme
 					this.windowsUiSettings.oncolorvalueschanged = () => {
-						this.ApplyTheme();
+						this.ApplyTheme()
 					}
 
-					break;
+					break
 				} else {
 					// Get the browser theme
-					let darkTheme = false;
-					
+					let darkTheme = false
+
 					if (window.matchMedia) {
-						let colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
-	
-						darkTheme = colorScheme.matches;
-						colorScheme.onchange = () => this.ApplyTheme();
+						let colorScheme = window.matchMedia(
+							"(prefers-color-scheme: dark)"
+						)
+
+						darkTheme = colorScheme.matches
+						colorScheme.onchange = () => this.ApplyTheme()
 					}
-	
-					this.darkTheme = darkTheme;
-					break;
+
+					this.darkTheme = darkTheme
+					break
 				}
 			default:
 				// Light theme
-				this.darkTheme = false;
-				break;
-      }
-      
-      document.body.setAttribute(
-			environment.themeKey, 
+				this.darkTheme = false
+				break
+		}
+
+		document.body.setAttribute(
+			environment.themeKey,
 			this.darkTheme ? environment.darkThemeKey : environment.lightThemeKey
-		);
+		)
 	}
 
 	//#region StartPage
-	AddAppointmentToStartPage(appointment: Appointment){
-		if(appointment.start < moment().startOf('day').unix()) return;
+	AddAppointmentToStartPage(appointment: Appointment) {
+		if (appointment.start < moment().startOf("day").unix()) return
 
 		// Check if the day of the appointment is already in the array
-		let index = this.startDaysDates.findIndex(d => d == moment.unix(appointment.start).startOf('day').unix());
+		let index = this.startDaysDates.findIndex(
+			d => d == moment.unix(appointment.start).startOf("day").unix()
+		)
 
-		if(index !== -1){
+		if (index !== -1) {
 			// Check if the appointment is already in the appointments array of the day
-			let i = this.startDaysAppointments[index].findIndex(a => a.uuid == appointment.uuid);
+			let i = this.startDaysAppointments[index].findIndex(
+				a => a.uuid == appointment.uuid
+			)
 
-			if(i !== -1){
+			if (i !== -1) {
 				// Replace the appointment
-				this.startDaysAppointments[index][i] = appointment;
-			}else{
+				this.startDaysAppointments[index][i] = appointment
+			} else {
 				// Add the appointment
-				this.startDaysAppointments[index].push(appointment);
-         }
-         
-         this.SortAppointmentsArray(this.startDaysAppointments[index]);
-		}else{
+				this.startDaysAppointments[index].push(appointment)
+			}
+
+			this.SortAppointmentsArray(this.startDaysAppointments[index])
+		} else {
 			// Create a new day
-			this.startDaysDates.push(moment.unix(appointment.start).startOf('day').unix());
-			this.startDaysAppointments.push([appointment]);
-			this.startDaysTodoLists.push([]);
-			this.startDaysTodos.push([]);
+			this.startDaysDates.push(
+				moment.unix(appointment.start).startOf("day").unix()
+			)
+			this.startDaysAppointments.push([appointment])
+			this.startDaysTodoLists.push([])
+			this.startDaysTodos.push([])
 
 			// Sort the arrays
-			this.SortStartDays();
+			this.SortStartDays()
 		}
 	}
 
-	RemoveAppointmentFromStartPage(appointment: Appointment){
+	RemoveAppointmentFromStartPage(appointment: Appointment) {
 		// Remove the appointment from all arrays
-		for(let i = 0; i < this.startDaysAppointments.length; i++){
-			let index = this.startDaysAppointments[i].findIndex(a => a.uuid == appointment.uuid);
-
-			if(index !== -1){
-				this.startDaysAppointments[i].splice(index, 1);
-
-            if(this.startDaysAppointments[i].length == 0 
-               && this.startDaysTodos[i].length == 0 
-               && this.startDaysTodoLists[i].length == 0
-               && i != 0){
-               // Remove the day
-					this.startDaysAppointments.splice(i, 1);
-               this.startDaysTodos.splice(i, 1);
-               this.startDaysTodoLists.splice(i, 1);
-					this.startDaysDates.splice(i, 1);
+		for (let i = 0; i < this.startDaysAppointments.length; i++) {
+			let index = this.startDaysAppointments[i].findIndex(
+				a => a.uuid == appointment.uuid
+			)
+
+			if (index !== -1) {
+				this.startDaysAppointments[i].splice(index, 1)
+
+				if (
+					this.startDaysAppointments[i].length == 0 &&
+					this.startDaysTodos[i].length == 0 &&
+					this.startDaysTodoLists[i].length == 0 &&
+					i != 0
+				) {
+					// Remove the day
+					this.startDaysAppointments.splice(i, 1)
+					this.startDaysTodos.splice(i, 1)
+					this.startDaysTodoLists.splice(i, 1)
+					this.startDaysDates.splice(i, 1)
 				}
 			}
 		}
 	}
 
-	AddTodoToStartPage(todo: Todo){
+	AddTodoToStartPage(todo: Todo) {
 		// Don't add the todo if it belongs to a list
-		if(todo.list) return;
+		if (todo.list) return
 
 		// Check if the day of the todo is already in the array
-		let index = todo.time < moment().startOf('day').unix() ? 0 : this.startDaysDates.findIndex(t => t == todo.time);
+		let index =
+			todo.time < moment().startOf("day").unix()
+				? 0
+				: this.startDaysDates.findIndex(t => t == todo.time)
 
-		if(index !== -1){
+		if (index !== -1) {
 			// Check if the todo is already in the todos array of the day
-			let i = this.startDaysTodos[index].findIndex(t => t.uuid == todo.uuid);
+			let i = this.startDaysTodos[index].findIndex(t => t.uuid == todo.uuid)
 
-			if(i !== -1){
+			if (i !== -1) {
 				// Replace the todo
-				this.startDaysTodos[index][i] = todo;
-			}else{
+				this.startDaysTodos[index][i] = todo
+			} else {
 				// Add the todo
-				this.startDaysTodos[index].push(todo);
-         }
-         
-         this.SortTodosArray(this.startDaysTodos[index]);
-		}else{
+				this.startDaysTodos[index].push(todo)
+			}
+
+			this.SortTodosArray(this.startDaysTodos[index])
+		} else {
 			// Create a new day
-			this.startDaysDates.push(moment.unix(todo.time).startOf('day').unix());
-			this.startDaysAppointments.push([]);
-			this.startDaysTodoLists.push([]);
-			this.startDaysTodos.push([todo]);
+			this.startDaysDates.push(moment.unix(todo.time).startOf("day").unix())
+			this.startDaysAppointments.push([])
+			this.startDaysTodoLists.push([])
+			this.startDaysTodos.push([todo])
 
 			// Sort the arrays
-			this.SortStartDays();
+			this.SortStartDays()
 		}
 	}
 
-	RemoveTodoFromStartPage(todo: Todo){
+	RemoveTodoFromStartPage(todo: Todo) {
 		// Remove the todo from all arrays
-		for(let i = 0; i < this.startDaysTodos.length; i++){
-			let index = this.startDaysTodos[i].findIndex(t => t.uuid == todo.uuid);
-
-			if(index !== -1){
-				this.startDaysTodos[i].splice(index, 1);
-
-				if(this.startDaysAppointments[i].length == 0 
-					&& this.startDaysTodos[i].length == 0 
-					&& this.startDaysTodoLists[i].length == 0
-					&& i != 0){
+		for (let i = 0; i < this.startDaysTodos.length; i++) {
+			let index = this.startDaysTodos[i].findIndex(t => t.uuid == todo.uuid)
+
+			if (index !== -1) {
+				this.startDaysTodos[i].splice(index, 1)
+
+				if (
+					this.startDaysAppointments[i].length == 0 &&
+					this.startDaysTodos[i].length == 0 &&
+					this.startDaysTodoLists[i].length == 0 &&
+					i != 0
+				) {
 					// Remove the day
-					this.startDaysAppointments.splice(i, 1);
-					this.startDaysTodos.splice(i, 1);
-					this.startDaysTodoLists.splice(i, 1);
-					this.startDaysDates.splice(i, 1);
+					this.startDaysAppointments.splice(i, 1)
+					this.startDaysTodos.splice(i, 1)
+					this.startDaysTodoLists.splice(i, 1)
+					this.startDaysDates.splice(i, 1)
 				}
 			}
 		}
 	}
 
-	AddTodoListToStartPage(todoList: TodoList){
+	AddTodoListToStartPage(todoList: TodoList) {
 		// Don't add the list if it belongs to another list
-		if(todoList.list) return;
+		if (todoList.list) return
 
 		// Check if the day of the todo list is already in the array
-		let index = todoList.time < moment().startOf('day').unix() ? 0 : this.startDaysDates.findIndex(t => t == todoList.time);
+		let index =
+			todoList.time < moment().startOf("day").unix()
+				? 0
+				: this.startDaysDates.findIndex(t => t == todoList.time)
 
-		if(index !== -1){
+		if (index !== -1) {
 			// Add the list to the existing day
 			// Check if the list is already in the todos array of the day
-			let i = this.startDaysTodoLists[index].findIndex(t => t.uuid == todoList.uuid);
+			let i = this.startDaysTodoLists[index].findIndex(
+				t => t.uuid == todoList.uuid
+			)
 
-			if(i !== -1){
+			if (i !== -1) {
 				// Replace the todo list
-				this.startDaysTodoLists[index][i] = todoList;
-			}else{
+				this.startDaysTodoLists[index][i] = todoList
+			} else {
 				// Add the todo list
-				this.startDaysTodoLists[index].push(todoList);
-         }
+				this.startDaysTodoLists[index].push(todoList)
+			}
 
-         this.SortTodoListsArray(this.startDaysTodoLists[index]);
-		}else{
+			this.SortTodoListsArray(this.startDaysTodoLists[index])
+		} else {
 			// Create a new day
-			this.startDaysDates.push(moment.unix(todoList.time).startOf('day').unix());
-			this.startDaysAppointments.push([]);
-			this.startDaysTodoLists.push([todoList]);
-			this.startDaysTodos.push([]);
+			this.startDaysDates.push(
+				moment.unix(todoList.time).startOf("day").unix()
+			)
+			this.startDaysAppointments.push([])
+			this.startDaysTodoLists.push([todoList])
+			this.startDaysTodos.push([])
 
 			// Sort the arrays
-			this.SortStartDays();
+			this.SortStartDays()
 		}
-   }
-   
-   RemoveTodoListFromStartPage(todoList: TodoList){
-		// Remove the todo list from all arrays
-		for(let i = 0; i < this.startDaysTodoLists.length; i++){
-			let index = this.startDaysTodoLists[i].findIndex(t => t.uuid == todoList.uuid);
-
-			if(index !== -1){
-				this.startDaysTodoLists[i].splice(index, 1);
+	}
 
-				if(this.startDaysAppointments[i].length == 0 
-					&& this.startDaysTodos[i].length == 0
-					&& this.startDaysTodoLists[i].length == 0
-					&& i != 0){
+	RemoveTodoListFromStartPage(todoList: TodoList) {
+		// Remove the todo list from all arrays
+		for (let i = 0; i < this.startDaysTodoLists.length; i++) {
+			let index = this.startDaysTodoLists[i].findIndex(
+				t => t.uuid == todoList.uuid
+			)
+
+			if (index !== -1) {
+				this.startDaysTodoLists[i].splice(index, 1)
+
+				if (
+					this.startDaysAppointments[i].length == 0 &&
+					this.startDaysTodos[i].length == 0 &&
+					this.startDaysTodoLists[i].length == 0 &&
+					i != 0
+				) {
 					// Remove the day
-					this.startDaysAppointments.splice(i, 1);
-					this.startDaysTodos.splice(i, 1);
-					this.startDaysTodoLists.splice(i, 1);
-					this.startDaysDates.splice(i, 1);
+					this.startDaysAppointments.splice(i, 1)
+					this.startDaysTodos.splice(i, 1)
+					this.startDaysTodoLists.splice(i, 1)
+					this.startDaysDates.splice(i, 1)
 				}
 			}
 		}
-   }
+	}
 	//#endregion
 
 	//#region TodosPage
-	AddTodoToTodosPage(todo: Todo){
-		if(todo.list) return;
-
-		if(this.sortTodosByDate){
-			if(todo.time != 0){
-				var date: string = moment.unix(todo.time).format(this.GetLocale().todosPage.formats.date);
-				var timestampOfDate = moment.unix(todo.time).startOf('day').unix();
-	
+	AddTodoToTodosPage(todo: Todo) {
+		if (todo.list) return
+
+		if (this.sortTodosByDate) {
+			if (todo.time != 0) {
+				var date: string = moment
+					.unix(todo.time)
+					.format(this.GetLocale().todosPage.formats.date)
+				var timestampOfDate = moment.unix(todo.time).startOf("day").unix()
+
 				// Check if the date already exists in the todoDays array
-				var todoDay = this.todoDays.find(obj => obj.timestamp == timestampOfDate);
-	
-				if(todoDay){
+				var todoDay = this.todoDays.find(
+					obj => obj.timestamp == timestampOfDate
+				)
+
+				if (todoDay) {
 					// Add the todo to the array of the todoDay
-					todoDay.todos.push(todo);
-				}else{
+					todoDay.todos.push(todo)
+				} else {
 					// Add a new day to the array
 					var newTodoDay = {
 						date,
@@ -571,105 +613,123 @@ export class DataService{
 						todos: [todo],
 						todoLists: []
 					}
-	
-					this.todoDays.push(newTodoDay);
+
+					this.todoDays.push(newTodoDay)
 				}
-			}else{
-				this.todosWithoutDate.todos.push(todo);
+			} else {
+				this.todosWithoutDate.todos.push(todo)
 			}
-	
+
 			// Sort the todoDays array
-			this.SortTodoDays();
-		}else{
+			this.SortTodoDays()
+		} else {
 			// Sort by group
-			if(todo.groups.length == 0){
-				this.todosWithoutGroup.push(todo);
-			}else{
+			if (todo.groups.length == 0) {
+				this.todosWithoutGroup.push(todo)
+			} else {
 				todo.groups.forEach(groupName => {
 					// Check if the todoGroup already exists
-					var index = this.todoGroups.findIndex(todoGroup => todoGroup.name == groupName);
-	
-					if(index !== -1){
+					var index = this.todoGroups.findIndex(
+						todoGroup => todoGroup.name == groupName
+					)
+
+					if (index !== -1) {
 						// Add the todo to the todoGroup
-						this.todoGroups[index].todos.push(todo);
-					}else{
+						this.todoGroups[index].todos.push(todo)
+					} else {
 						// Create the todoGroup
-						var todoGroup: { name: string, todos: Todo[], todoLists: TodoList[] } = {
+						var todoGroup: {
+							name: string
+							todos: Todo[]
+							todoLists: TodoList[]
+						} = {
 							name: groupName,
 							todos: [todo],
 							todoLists: []
-						};
-	
-						this.todoGroups.push(todoGroup);
+						}
+
+						this.todoGroups.push(todoGroup)
 					}
-				});
+				})
 			}
 		}
 	}
 
-	RemoveTodoFromTodosPage(todo: Todo){
+	RemoveTodoFromTodosPage(todo: Todo) {
 		// Remove the todo from the todoDays
-		let index = this.todosWithoutDate.todos.findIndex(t => t.uuid == todo.uuid);
+		let index = this.todosWithoutDate.todos.findIndex(
+			t => t.uuid == todo.uuid
+		)
 
-		if(index !== -1){
-			this.todosWithoutDate.todos.splice(index, 1);
-		}else{
+		if (index !== -1) {
+			this.todosWithoutDate.todos.splice(index, 1)
+		} else {
 			this.todoDays.forEach(todoDay => {
-				index = todoDay.todos.findIndex(t => t.uuid == todo.uuid);
+				index = todoDay.todos.findIndex(t => t.uuid == todo.uuid)
 
-				if(index !== -1){
-					todoDay.todos.splice(index, 1);
+				if (index !== -1) {
+					todoDay.todos.splice(index, 1)
 
 					// If the todoDay is empty, remove it
-					if(todoDay.todos.length == 0 && todoDay.todoLists.length == 0){
-						index = this.todoDays.indexOf(todoDay);
-						if(index !== -1){
-							this.todoDays.splice(index, 1);
+					if (todoDay.todos.length == 0 && todoDay.todoLists.length == 0) {
+						index = this.todoDays.indexOf(todoDay)
+						if (index !== -1) {
+							this.todoDays.splice(index, 1)
 						}
 					}
 				}
-			});
+			})
 		}
 
 		// Remove the todo from the todoGroups
-		index = this.todosWithoutGroup.findIndex(t => t.uuid == todo.uuid);
+		index = this.todosWithoutGroup.findIndex(t => t.uuid == todo.uuid)
 
-		if(index !== -1){
-			this.todosWithoutGroup.splice(index, 1);
-		}else{
+		if (index !== -1) {
+			this.todosWithoutGroup.splice(index, 1)
+		} else {
 			this.todoGroups.forEach(todoGroup => {
-				index = todoGroup.todos.findIndex(t => t.uuid == todo.uuid);
+				index = todoGroup.todos.findIndex(t => t.uuid == todo.uuid)
 
-				if(index !== -1){
-					todoGroup.todos.splice(index, 1);
+				if (index !== -1) {
+					todoGroup.todos.splice(index, 1)
 
 					// If the todoGroup is empty, remove it
-					if(todoGroup.todos.length == 0 && todoGroup.todoLists.length == 0){
-						index = this.todoGroups.indexOf(todoGroup);
-						if(index !== -1){
-							this.todoGroups.splice(index, 1);
+					if (
+						todoGroup.todos.length == 0 &&
+						todoGroup.todoLists.length == 0
+					) {
+						index = this.todoGroups.indexOf(todoGroup)
+						if (index !== -1) {
+							this.todoGroups.splice(index, 1)
 						}
 					}
 				}
-			});
+			})
 		}
 	}
 
-	AddTodoListToTodosPage(todoList: TodoList){
-		if(todoList.list) return;
+	AddTodoListToTodosPage(todoList: TodoList) {
+		if (todoList.list) return
 
-		if(this.sortTodosByDate){
-			if(todoList.time != 0){
-				let date: string = moment.unix(todoList.time).format(this.GetLocale().todosPage.formats.date);
-				let timestampOfDate = moment.unix(todoList.time).startOf('day').unix();
+		if (this.sortTodosByDate) {
+			if (todoList.time != 0) {
+				let date: string = moment
+					.unix(todoList.time)
+					.format(this.GetLocale().todosPage.formats.date)
+				let timestampOfDate = moment
+					.unix(todoList.time)
+					.startOf("day")
+					.unix()
 
 				// Check if the date already exists in the todoDays array
-				let todoDay = this.todoDays.find(obj => obj.timestamp == timestampOfDate);
+				let todoDay = this.todoDays.find(
+					obj => obj.timestamp == timestampOfDate
+				)
 
-				if(todoDay){
+				if (todoDay) {
 					// Add the todoList to the array of the todoDay
-					todoDay.todoLists.push(todoList);
-				}else{
+					todoDay.todoLists.push(todoList)
+				} else {
 					// Add a new day to the array
 					let newTodoDay = {
 						date,
@@ -678,102 +738,116 @@ export class DataService{
 						todoLists: [todoList]
 					}
 
-					this.todoDays.push(newTodoDay);
+					this.todoDays.push(newTodoDay)
 				}
-			}else{
-				this.todosWithoutDate.todoLists.push(todoList);
+			} else {
+				this.todosWithoutDate.todoLists.push(todoList)
 			}
 
 			// Sort the todoDays array
-			this.SortTodoDays();
-		}else{
+			this.SortTodoDays()
+		} else {
 			// Sort by group
-			if(todoList.groups.length == 0){
-				this.todoListsWithoutGroup.push(todoList);
-			}else{
+			if (todoList.groups.length == 0) {
+				this.todoListsWithoutGroup.push(todoList)
+			} else {
 				todoList.groups.forEach(group => {
 					// Check if the todoGroup already exists
-					let index = this.todoGroups.findIndex(todoGroup => todoGroup.name == group);
+					let index = this.todoGroups.findIndex(
+						todoGroup => todoGroup.name == group
+					)
 
-					if(index !== -1){
+					if (index !== -1) {
 						// Add the todoList to the todoGroup
-						this.todoGroups[index].todoLists.push(todoList);
-					}else{
+						this.todoGroups[index].todoLists.push(todoList)
+					} else {
 						// Create the todoGroup
-						let todoGroup: { name: string, todos: Todo[], todoLists: TodoList[] } = {
+						let todoGroup: {
+							name: string
+							todos: Todo[]
+							todoLists: TodoList[]
+						} = {
 							name: group,
 							todos: [],
 							todoLists: [todoList]
 						}
-						
-						this.todoGroups.push(todoGroup);
+
+						this.todoGroups.push(todoGroup)
 					}
-				});
+				})
 			}
 		}
 	}
 
-	RemoveTodoListFromTodosPage(todoList: TodoList){
+	RemoveTodoListFromTodosPage(todoList: TodoList) {
 		// Remove the todolist from the todoDays
-		let index = this.todosWithoutDate.todoLists.findIndex(t => t.uuid == todoList.uuid);
+		let index = this.todosWithoutDate.todoLists.findIndex(
+			t => t.uuid == todoList.uuid
+		)
 
-		if(index !== -1){
-			this.todosWithoutDate.todoLists.splice(index, 1);
-		}else{
+		if (index !== -1) {
+			this.todosWithoutDate.todoLists.splice(index, 1)
+		} else {
 			this.todoDays.forEach(todoDay => {
-				index = todoDay.todoLists.findIndex(t => t.uuid == todoList.uuid);
+				index = todoDay.todoLists.findIndex(t => t.uuid == todoList.uuid)
 
-				if(index !== -1){
-					todoDay.todoLists.splice(index, 1);
+				if (index !== -1) {
+					todoDay.todoLists.splice(index, 1)
 
 					// If the todoDay is empty, remove it
-					if(todoDay.todos.length == 0 && todoDay.todoLists.length == 0){
-						index = this.todoDays.indexOf(todoDay);
-						if(index !== -1){
-							this.todoDays.splice(index, 1);
+					if (todoDay.todos.length == 0 && todoDay.todoLists.length == 0) {
+						index = this.todoDays.indexOf(todoDay)
+						if (index !== -1) {
+							this.todoDays.splice(index, 1)
 						}
 					}
 				}
-			});
+			})
 		}
 
 		// Remove the todoList from the todoGroups
-		index = this.todoListsWithoutGroup.findIndex(t => t.uuid == todoList.uuid);
+		index = this.todoListsWithoutGroup.findIndex(t => t.uuid == todoList.uuid)
 
-		if(index !== -1){
-			this.todoListsWithoutGroup.splice(index, 1);
-		}else{
+		if (index !== -1) {
+			this.todoListsWithoutGroup.splice(index, 1)
+		} else {
 			this.todoGroups.forEach(todoGroup => {
-				index = todoGroup.todoLists.findIndex(t => t.uuid == todoList.uuid);
+				index = todoGroup.todoLists.findIndex(t => t.uuid == todoList.uuid)
+
+				if (index !== -1) {
+					todoGroup.todoLists.splice(index, 1)
 
-				if(index !== -1){
-					todoGroup.todoLists.splice(index, 1);
-					
 					// If the todoGroup is empty, remove it
-					if(todoGroup.todos.length == 0 && todoGroup.todoLists.length == 0){
-						index = this.todoGroups.indexOf(todoGroup);
-						if(index !== -1){
-							this.todoGroups.splice(index, 1);
+					if (
+						todoGroup.todos.length == 0 &&
+						todoGroup.todoLists.length == 0
+					) {
+						index = this.todoGroups.indexOf(todoGroup)
+						if (index !== -1) {
+							this.todoGroups.splice(index, 1)
 						}
 					}
 				}
-			});
+			})
 		}
 	}
-	
+
 	// This is called from TodosPage in SortByGroups when a todo list is updated, to update all of the same todo list on the page
-	async UpdateTodoListsOnSortByGroupTodoPage(uuid: string, todoGroupName: string){
+	async UpdateTodoListsOnSortByGroupTodoPage(
+		uuid: string,
+		todoGroupName: string
+	) {
 		// Get the todo list from the database
-		let todoList = await GetTodoList(uuid);
+		let todoList = await GetTodoList(uuid)
 
 		// Update the todo list in all todoGroups where the todoGroup name is different
-		for(let todoGroup of this.todoGroups){
-			if(todoGroup.name != todoGroupName){
+		for (let todoGroup of this.todoGroups) {
+			if (todoGroup.name != todoGroupName) {
 				// Find the todo list in the todoGroup
-				let index = todoGroup.todoLists.findIndex(t => t.uuid == uuid);
+				let index = todoGroup.todoLists.findIndex(t => t.uuid == uuid)
 
-				if(index !== -1){
-					todoGroup.todoLists[index] = todoList;
+				if (index !== -1) {
+					todoGroup.todoLists[index] = todoList
 				}
 			}
 		}
@@ -781,65 +855,81 @@ export class DataService{
 	//#endregion
 
 	//#region AppointmentsPage
-	AddAppointmentToAppointmentsPage(appointment: Appointment){
-      var date: string = moment.unix(appointment.start).format('dddd, D. MMMM YYYY')
-		var timestampOfDate = moment.unix(appointment.start).startOf('day').unix()
-
-		var appointmentStartTimestamp = moment.unix(appointment.start).endOf('day').unix()
-		if(!appointment.allday){
+	AddAppointmentToAppointmentsPage(appointment: Appointment) {
+		var date: string = moment
+			.unix(appointment.start)
+			.format("dddd, D. MMMM YYYY")
+		var timestampOfDate = moment.unix(appointment.start).startOf("day").unix()
+
+		var appointmentStartTimestamp = moment
+			.unix(appointment.start)
+			.endOf("day")
+			.unix()
+		if (!appointment.allday) {
 			appointmentStartTimestamp = appointment.end
 		}
 
 		// Check if the appointment was created yesterday or a day before
-		let isOld = appointmentStartTimestamp < moment.unix(moment.now() / 1000).startOf('day').unix()
-		let appointmentDays = isOld ? this.oldAppointmentDays : this.appointmentDays
+		let isOld =
+			appointmentStartTimestamp <
+			moment
+				.unix(moment.now() / 1000)
+				.startOf("day")
+				.unix()
+		let appointmentDays = isOld
+			? this.oldAppointmentDays
+			: this.appointmentDays
 
 		// Check if the date already exists in the appointmentDays or oldAppointmentDays array
-      var appointmentDay = appointmentDays.find(obj => obj["timestamp"] == timestampOfDate)
-
-      if(appointmentDay){
-         var appointmentArray = appointmentDay["appointments"]
-         appointmentArray.push(appointment)
-
-         // Sort the appointments array
-         this.SortAppointmentsArray(appointmentArray)
-      }else{
-         // Create a new appointmentDay
-         var newAppointmentDay = {
-            date: date,
-            timestamp: timestampOfDate,
-            appointments: [appointment]
-         }
-
-         appointmentDays.push(newAppointmentDay)
-
-         // Sort the appointmentDays array
-         appointmentDays.sort((a: object, b: object) => {
-            const timestampString = "timestamp";
-            if(a[timestampString] < b[timestampString]){
-               return isOld ? 1 : -1
-            }else if(a[timestampString] > b[timestampString]){
-               return isOld ? -1 : 1
-            }else{
-               return 0
-            }
-         })
-      }
+		var appointmentDay = appointmentDays.find(
+			obj => obj["timestamp"] == timestampOfDate
+		)
+
+		if (appointmentDay) {
+			var appointmentArray = appointmentDay["appointments"]
+			appointmentArray.push(appointment)
+
+			// Sort the appointments array
+			this.SortAppointmentsArray(appointmentArray)
+		} else {
+			// Create a new appointmentDay
+			var newAppointmentDay = {
+				date: date,
+				timestamp: timestampOfDate,
+				appointments: [appointment]
+			}
+
+			appointmentDays.push(newAppointmentDay)
+
+			// Sort the appointmentDays array
+			appointmentDays.sort((a: object, b: object) => {
+				const timestampString = "timestamp"
+				if (a[timestampString] < b[timestampString]) {
+					return isOld ? 1 : -1
+				} else if (a[timestampString] > b[timestampString]) {
+					return isOld ? -1 : 1
+				} else {
+					return 0
+				}
+			})
+		}
 	}
-	
-	RemoveAppointmentFromAppointmentsPage(appointment: Appointment){
+
+	RemoveAppointmentFromAppointmentsPage(appointment: Appointment) {
 		let i = 0
 
 		// Try to find the appointment in appointmentDays
 		for (let appointmentDay of this.appointmentDays) {
-			let index = appointmentDay["appointments"].findIndex(a => a.uuid == appointment.uuid)
+			let index = appointmentDay["appointments"].findIndex(
+				a => a.uuid == appointment.uuid
+			)
 
-			if(index !== -1){
+			if (index !== -1) {
 				appointmentDay["appointments"].splice(index, 1)
-				
-				if(appointmentDay["appointments"].length == 0){
+
+				if (appointmentDay["appointments"].length == 0) {
 					// Remove the appointmentDay
-					this.appointmentDays.splice(i, 1);
+					this.appointmentDays.splice(i, 1)
 				}
 
 				return
@@ -852,14 +942,16 @@ export class DataService{
 
 		// Try to find the appointment in oldAppointmentDays
 		for (let appointmentDay of this.oldAppointmentDays) {
-			let index = appointmentDay["appointments"].findIndex(a => a.uuid == appointment.uuid)
+			let index = appointmentDay["appointments"].findIndex(
+				a => a.uuid == appointment.uuid
+			)
 
-			if(index !== -1){
+			if (index !== -1) {
 				appointmentDay["appointments"].splice(index, 1)
-				
-				if(appointmentDay["appointments"].length == 0){
+
+				if (appointmentDay["appointments"].length == 0) {
 					// Remove the appointmentDay
-					this.oldAppointmentDays.splice(i, 1);
+					this.oldAppointmentDays.splice(i, 1)
 				}
 
 				return
@@ -871,184 +963,216 @@ export class DataService{
 	//#endregion
 
 	//#region CalendarPage
-	UpdateCalendarDays(){
-		if(this.updatingCalendarDays){
-			this.updateCalendarDaysAgain = true;
-			return;
+	UpdateCalendarDays() {
+		if (this.updatingCalendarDays) {
+			this.updateCalendarDaysAgain = true
+			return
 		}
 
-		this.updatingCalendarDays = true;
+		this.updatingCalendarDays = true
 
 		// Go through each mobileCalendarDay
-		for(let i = 0; i < this.mobileCalendarDaysDates.length; i++){
-			let date = moment.unix(this.mobileCalendarDaysDates[i]).startOf('day');
-			this.mobileCalendarDaysAppointments[i] = this.GetAppointmentsOfDay(date);
-			this.mobileCalendarDaysTodos[i] = this.GetTodosOfDay(date, false);
+		for (let i = 0; i < this.mobileCalendarDaysDates.length; i++) {
+			let date = moment.unix(this.mobileCalendarDaysDates[i]).startOf("day")
+			this.mobileCalendarDaysAppointments[i] =
+				this.GetAppointmentsOfDay(date)
+			this.mobileCalendarDaysTodos[i] = this.GetTodosOfDay(date, false)
 		}
 
 		// Go through each desktopCalendarDay
-		for(let i = 0; i < this.desktopCalendarDaysDates.length; i++){
-			for(let j = 0; j < this.desktopCalendarDaysDates[i].length; j++){
-				let date = moment.unix(this.desktopCalendarDaysDates[i][j]).startOf('day');
-				this.desktopCalendarDaysAppointments[i][j] = this.GetAppointmentsOfDay(date);
-				this.desktopCalendarDaysTodos[i][j] = this.GetTodosOfDay(date, false);
+		for (let i = 0; i < this.desktopCalendarDaysDates.length; i++) {
+			for (let j = 0; j < this.desktopCalendarDaysDates[i].length; j++) {
+				let date = moment
+					.unix(this.desktopCalendarDaysDates[i][j])
+					.startOf("day")
+				this.desktopCalendarDaysAppointments[i][j] =
+					this.GetAppointmentsOfDay(date)
+				this.desktopCalendarDaysTodos[i][j] = this.GetTodosOfDay(
+					date,
+					false
+				)
 			}
 		}
 
-		this.updatingCalendarDays = false;
+		this.updatingCalendarDays = false
 
-		if(this.updateCalendarDaysAgain){
-			this.updateCalendarDaysAgain = false;
-			this.UpdateCalendarDays();
+		if (this.updateCalendarDaysAgain) {
+			this.updateCalendarDaysAgain = false
+			this.UpdateCalendarDays()
 		}
-   }
-   
-   // Get the todos of the given day to show them on the calendar page
-	GetTodosOfDay(day: moment.Moment, completed: boolean){
-		var todos: Todo[] = [];
-
-		this.allTodos.forEach((todo) => {
-			if(moment.unix(todo.time).startOf('day').unix() === day.startOf('day').unix() && (completed || !todo.completed)){
-				todos.push(todo);
+	}
+
+	// Get the todos of the given day to show them on the calendar page
+	GetTodosOfDay(day: moment.Moment, completed: boolean) {
+		var todos: Todo[] = []
+
+		this.allTodos.forEach(todo => {
+			if (
+				moment.unix(todo.time).startOf("day").unix() ===
+					day.startOf("day").unix() &&
+				(completed || !todo.completed)
+			) {
+				todos.push(todo)
 			}
-		});
+		})
 
-		return todos;
+		return todos
 	}
 
-	AddAppointmentToCalendarPage(appointment: Appointment){
-		this.allAppointments.push(appointment);
-		this.SortAppointmentsArray(this.allAppointments);
+	AddAppointmentToCalendarPage(appointment: Appointment) {
+		this.allAppointments.push(appointment)
+		this.SortAppointmentsArray(this.allAppointments)
 
-		if(moment.unix(appointment.start).startOf('day').unix() == this.selectedDay.startOf('day').unix()){
-			this.selectedDayAppointments.push(appointment);
-			this.SortAppointmentsArray(this.selectedDayAppointments);
+		if (
+			moment.unix(appointment.start).startOf("day").unix() ==
+			this.selectedDay.startOf("day").unix()
+		) {
+			this.selectedDayAppointments.push(appointment)
+			this.SortAppointmentsArray(this.selectedDayAppointments)
 		}
 
-		this.UpdateCalendarDays();
+		this.UpdateCalendarDays()
 	}
 
-	GetAppointmentsOfDay(day: moment.Moment){
-		var appointments: Appointment[] = [];
+	GetAppointmentsOfDay(day: moment.Moment) {
+		var appointments: Appointment[] = []
 
-		for(let appointment of this.allAppointments){
-			if(moment.unix(appointment.start).startOf('day').unix() === day.startOf('day').unix()){
-				appointments.push(appointment);
+		for (let appointment of this.allAppointments) {
+			if (
+				moment.unix(appointment.start).startOf("day").unix() ===
+				day.startOf("day").unix()
+			) {
+				appointments.push(appointment)
 			}
 		}
 
-		this.SortAppointmentsArray(appointments);
+		this.SortAppointmentsArray(appointments)
 
-		return appointments;
+		return appointments
 	}
 
-	RemoveAppointmentFromCalendarPage(appointment: Appointment){
-		let index = this.allAppointments.findIndex(a => a.uuid == appointment.uuid);
-		if(index !== -1){
-			this.allAppointments.splice(index, 1);
+	RemoveAppointmentFromCalendarPage(appointment: Appointment) {
+		let index = this.allAppointments.findIndex(
+			a => a.uuid == appointment.uuid
+		)
+		if (index !== -1) {
+			this.allAppointments.splice(index, 1)
 		}
 
-		index = this.selectedDayAppointments.findIndex(a => a.uuid == appointment.uuid);
-		if(index !== -1){
-			this.selectedDayAppointments.splice(index, 1);
+		index = this.selectedDayAppointments.findIndex(
+			a => a.uuid == appointment.uuid
+		)
+		if (index !== -1) {
+			this.selectedDayAppointments.splice(index, 1)
 		}
 
-		this.UpdateCalendarDays();
+		this.UpdateCalendarDays()
 	}
 
-	AddTodoToCalendarPage(todo: Todo){
-		if(todo.list) return;
+	AddTodoToCalendarPage(todo: Todo) {
+		if (todo.list) return
 
-		this.allTodos.push(todo);
-		this.SortTodosArray(this.allTodos);
+		this.allTodos.push(todo)
+		this.SortTodosArray(this.allTodos)
 
-		if(moment.unix(todo.time).startOf('day').unix() == this.selectedDay.startOf('day').unix() && !todo.list){
-			this.selectedDayTodos.push(todo);
-			this.SortTodosArray(this.selectedDayTodos);
+		if (
+			moment.unix(todo.time).startOf("day").unix() ==
+				this.selectedDay.startOf("day").unix() &&
+			!todo.list
+		) {
+			this.selectedDayTodos.push(todo)
+			this.SortTodosArray(this.selectedDayTodos)
 		}
 
-		this.UpdateCalendarDays();
+		this.UpdateCalendarDays()
 	}
 
-	RemoveTodoFromCalendarPage(todo: Todo){
-		let index = this.allTodos.findIndex(t => t.uuid == todo.uuid);
-		if(index !== -1){
-			this.allTodos.splice(index, 1);
+	RemoveTodoFromCalendarPage(todo: Todo) {
+		let index = this.allTodos.findIndex(t => t.uuid == todo.uuid)
+		if (index !== -1) {
+			this.allTodos.splice(index, 1)
 		}
 
-		index = this.selectedDayTodos.findIndex(t => t.uuid == todo.uuid);
-		if(index !== -1){
-			this.selectedDayTodos.splice(index, 1);
+		index = this.selectedDayTodos.findIndex(t => t.uuid == todo.uuid)
+		if (index !== -1) {
+			this.selectedDayTodos.splice(index, 1)
 		}
 
-		this.UpdateCalendarDays();
+		this.UpdateCalendarDays()
 	}
 
-	AddTodoListToCalendarPage(todoList: TodoList){
-      if(todoList.list) return;
+	AddTodoListToCalendarPage(todoList: TodoList) {
+		if (todoList.list) return
 
-      // Add the todos of the list to allTodos
-      let todos: Todo[] = [];
-      this.GetNestedTodosInTodoList(todoList, todos);
-		for(let todo of todos){
-			this.allTodos.push(todo);
+		// Add the todos of the list to allTodos
+		let todos: Todo[] = []
+		this.GetNestedTodosInTodoList(todoList, todos)
+		for (let todo of todos) {
+			this.allTodos.push(todo)
 		}
 
-		if(todoList.list) return;
+		if (todoList.list) return
 
-		this.allTodoLists.push(todoList);
-		this.SortTodoListsArray(this.allTodoLists);
+		this.allTodoLists.push(todoList)
+		this.SortTodoListsArray(this.allTodoLists)
 
-		if(moment.unix(todoList.time).startOf('day').unix() == this.selectedDay.startOf('day').unix()){
-			this.selectedDayTodoLists.push(todoList);
-			this.SortTodoListsArray(this.selectedDayTodoLists);
-      }
+		if (
+			moment.unix(todoList.time).startOf("day").unix() ==
+			this.selectedDay.startOf("day").unix()
+		) {
+			this.selectedDayTodoLists.push(todoList)
+			this.SortTodoListsArray(this.selectedDayTodoLists)
+		}
 
-      this.UpdateCalendarDays();
+		this.UpdateCalendarDays()
 	}
 
-	RemoveTodoListFromCalendarPage(todoList: TodoList){
+	RemoveTodoListFromCalendarPage(todoList: TodoList) {
 		// Remove the todos of the todo list
-		let todos: Todo[] = [];
-		this.GetNestedTodosInTodoList(todoList, todos);
-		for(let todo of todos){
-			let i = this.allTodos.findIndex(t => t.uuid == todo.uuid);
-			if(i !== -1){
-				this.allTodos.splice(i, 1);
+		let todos: Todo[] = []
+		this.GetNestedTodosInTodoList(todoList, todos)
+		for (let todo of todos) {
+			let i = this.allTodos.findIndex(t => t.uuid == todo.uuid)
+			if (i !== -1) {
+				this.allTodos.splice(i, 1)
 			}
 		}
 
-		let index = this.allTodoLists.findIndex(t => t.uuid == todoList.uuid);
-		if(index !== -1){
-			this.allTodoLists.splice(index, 1);
+		let index = this.allTodoLists.findIndex(t => t.uuid == todoList.uuid)
+		if (index !== -1) {
+			this.allTodoLists.splice(index, 1)
 		}
 
-		index = this.selectedDayTodoLists.findIndex(t => t.uuid == todoList.uuid);
-		if(index !== -1){
-			this.selectedDayTodoLists.splice(index, 1);
-      }
+		index = this.selectedDayTodoLists.findIndex(t => t.uuid == todoList.uuid)
+		if (index !== -1) {
+			this.selectedDayTodoLists.splice(index, 1)
+		}
 
-      this.UpdateCalendarDays();
-   }
+		this.UpdateCalendarDays()
+	}
 	//#endregion
 
 	//#region SettingsPage
-	async SetSortTodosByDate(value: boolean){
-		await localforage.setItem(environment.settingsSortTodosByDateKey, value);
+	async SetSortTodosByDate(value: boolean) {
+		await localforage.setItem(environment.settingsSortTodosByDateKey, value)
 	}
 
-	async GetSortTodosByDate(): Promise<boolean>{
-      let value = await localforage.getItem(environment.settingsSortTodosByDateKey) as boolean;
-		return value != null ? value : environment.settingsSortTodosByDateDefault;
+	async GetSortTodosByDate(): Promise<boolean> {
+		let value = (await localforage.getItem(
+			environment.settingsSortTodosByDateKey
+		)) as boolean
+		return value != null ? value : environment.settingsSortTodosByDateDefault
 	}
 
-	async SetTheme(value: string){
-		await localforage.setItem(environment.settingsThemeKey, value);
+	async SetTheme(value: string) {
+		await localforage.setItem(environment.settingsThemeKey, value)
 	}
 
-	async GetTheme(){
-		var value = await localforage.getItem(environment.settingsThemeKey) as string;
-		return value ? value : environment.settingsThemeDefault;
+	async GetTheme() {
+		var value = (await localforage.getItem(
+			environment.settingsThemeKey
+		)) as string
+		return value ? value : environment.settingsThemeDefault
 	}
 	//#endregion
 
@@ -1058,66 +1182,66 @@ export class DataService{
 	}
 
 	// Get the todos of todoList and add them to todos
-	GetNestedTodosInTodoList(todoList: TodoList, todos: Todo[]){
-      todoList.items.forEach((item: (Todo | TodoList)) => {
-         if(item instanceof Todo){
-				todos.push(item);
-			}else{
-				this.GetNestedTodosInTodoList(item, todos);
+	GetNestedTodosInTodoList(todoList: TodoList, todos: Todo[]) {
+		todoList.items.forEach((item: Todo | TodoList) => {
+			if (item instanceof Todo) {
+				todos.push(item)
+			} else {
+				this.GetNestedTodosInTodoList(item, todos)
 			}
-      });
-   }
-	
+		})
+	}
+
 	// Save the todo list uuid in updatedTodoLists if it is not there yet
-   AddTodoListToUpdatedTodoLists(uuid: string){
-		let index = this.updatedTodoLists.findIndex(t => t == uuid);
-		if(index == -1){
+	AddTodoListToUpdatedTodoLists(uuid: string) {
+		let index = this.updatedTodoLists.findIndex(t => t == uuid)
+		if (index == -1) {
 			// Add the todo list uuid
-			this.updatedTodoLists.push(uuid);
+			this.updatedTodoLists.push(uuid)
 		}
 	}
-	
+
 	// Reload the todo lists in updatedTodoLists
-	async UpdateUpdatedTodoLists(){
-		for(let uuid of this.updatedTodoLists){
-			let todoList = await GetTodoList(uuid);
-			if(todoList) this.UpdateTodoList(todoList);
+	async UpdateUpdatedTodoLists() {
+		for (let uuid of this.updatedTodoLists) {
+			let todoList = await GetTodoList(uuid)
+			if (todoList) this.UpdateTodoList(todoList)
 		}
 
-		this.updatedTodoLists = [];
-   }
-   
-   async GetRootOfTodo(todo: Todo) : Promise<TodoList>{
-		if(!todo.list) return null;
+		this.updatedTodoLists = []
+	}
+
+	async GetRootOfTodo(todo: Todo): Promise<TodoList> {
+		if (!todo.list) return null
 
-      let parent = await GetTodoList(todo.list);
-      if(!parent) return null;
+		let parent = await GetTodoList(todo.list)
+		if (!parent) return null
 
-      if(parent.list){
-         // Get the parent of the parent
-			return await this.GetRootOfTodoList(parent);
-      }else{
-			return parent;
+		if (parent.list) {
+			// Get the parent of the parent
+			return await this.GetRootOfTodoList(parent)
+		} else {
+			return parent
 		}
-   }
-
-   async GetRootOfTodoList(todoList: TodoList) : Promise<TodoList>{
-		if(!todoList.list) return todoList;
-		
-		let parentUuid = todoList.list;
-		let currentList: TodoList = todoList;
-
-		while(parentUuid){
-			currentList = await GetTodoList(parentUuid);
-			
-      	if(currentList){
-				parentUuid = currentList.list;
-			}else{
-				return null;
+	}
+
+	async GetRootOfTodoList(todoList: TodoList): Promise<TodoList> {
+		if (!todoList.list) return todoList
+
+		let parentUuid = todoList.list
+		let currentList: TodoList = todoList
+
+		while (parentUuid) {
+			currentList = await GetTodoList(parentUuid)
+
+			if (currentList) {
+				parentUuid = currentList.list
+			} else {
+				return null
 			}
 		}
 
-		return currentList;
+		return currentList
 	}
 
 	/**
@@ -1126,7 +1250,9 @@ export class DataService{
 	AdaptSnackbarPosition() {
 		if (this.smallWindow) {
 			setTimeout(() => {
-				let snackbarContainerList = document.getElementsByTagName("snack-bar-container")
+				let snackbarContainerList = document.getElementsByTagName(
+					"snack-bar-container"
+				)
 
 				for (let i = 0; i < snackbarContainerList.length; i++) {
 					let snackbarContainer = snackbarContainerList.item(i)
@@ -1139,15 +1265,15 @@ export class DataService{
 	//#endregion
 }
 
-export interface TodoDay{
-	date: string,
-	timestamp: number,
-	todos: Todo[],
+export interface TodoDay {
+	date: string
+	timestamp: number
+	todos: Todo[]
 	todoLists: TodoList[]
 }
 
 export interface AppointmentDay {
-	date: string,
-	timestamp: number,
+	date: string
+	timestamp: number
 	appointments: Appointment[]
-}
\ No newline at end of file
+}
diff --git a/src/index.html b/src/index.html
index f58107a..ad33221 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,35 +1,96 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 	<head>
 		<title>Calendo</title>
-		<base href="/">
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-		<meta name="theme-color" content="#007bff">
-		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+		<base href="/" />
+		<meta charset="utf-8" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+		/>
+		<meta name="theme-color" content="#007bff" />
+		<meta
+			name="apple-mobile-web-app-status-bar-style"
+			content="black-translucent"
+		/>
 
-		<link rel="manifest" href="manifest.webmanifest">
-		<link rel="icon" type="image/x-icon" href="favicon.ico">
+		<link rel="manifest" href="manifest.webmanifest" />
+		<link rel="icon" type="image/x-icon" href="favicon.ico" />
 
 		<!-- Apple icons -->
-		<link rel="apple-touch-icon" href="assets/icons/touch-icon-iphone.png">
-		<link rel="apple-touch-icon" sizes="152x152" href="assets/icons/touch-icon-ipad.png">
-		<link rel="apple-touch-icon" sizes="180x180" href="assets/icons/touch-icon-iphone-retina.png">
-		<link rel="apple-touch-icon" sizes="167x167" href="assets/icons/touch-icon-ipad-retina.png">
+		<link rel="apple-touch-icon" href="assets/icons/touch-icon-iphone.png" />
+		<link
+			rel="apple-touch-icon"
+			sizes="152x152"
+			href="assets/icons/touch-icon-ipad.png"
+		/>
+		<link
+			rel="apple-touch-icon"
+			sizes="180x180"
+			href="assets/icons/touch-icon-iphone-retina.png"
+		/>
+		<link
+			rel="apple-touch-icon"
+			sizes="167x167"
+			href="assets/icons/touch-icon-ipad-retina.png"
+		/>
 
 		<!-- Apple Splash Screens -->
-		<link rel="apple-touch-startup-image" href="assets/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
-		<link rel="apple-touch-startup-image" href="assets/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)">
-		<link rel="apple-touch-startup-image" href="assets/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)">
-		<link rel="apple-touch-startup-image" href="assets/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)">
-		<link rel="apple-touch-startup-image" href="assets/splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)">
-		<link rel="apple-touch-startup-image" href="assets/splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)">
-		<link rel="apple-touch-startup-image" href="assets/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)">
-		<link rel="apple-touch-startup-image" href="assets/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)">
-		<link rel="apple-touch-startup-image" href="assets/splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)">
-		<link rel="apple-touch-startup-image" href="assets/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)">
+		<link
+			rel="apple-touch-startup-image"
+			href="assets/splashscreens/iphone5_splash.png"
+			media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="assets/splashscreens/iphone6_splash.png"
+			media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="assets/splashscreens/iphoneplus_splash.png"
+			media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="assets/splashscreens/iphonex_splash.png"
+			media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="assets/splashscreens/iphonexr_splash.png"
+			media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="assets/splashscreens/iphonexsmax_splash.png"
+			media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="assets/splashscreens/ipad_splash.png"
+			media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="assets/splashscreens/ipadpro1_splash.png"
+			media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="assets/splashscreens/ipadpro3_splash.png"
+			media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="assets/splashscreens/ipadpro2_splash.png"
+			media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
+		/>
 
-		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap">
+		<link
+			rel="stylesheet"
+			href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap"
+		/>
 	</head>
 	<body dir="ltr">
 		<div id="root">
@@ -37,6 +98,10 @@
 			<noscript>Please enable JavaScript to use this app.</noscript>
 		</div>
 
-		<script async defer src="https://cdn.simpleanalytics.io/hello.js"></script>
+		<script
+			async
+			defer
+			src="https://cdn.simpleanalytics.io/hello.js"
+		></script>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/locales/locales.ts b/src/locales/locales.ts
index 3d65835..7fb03dd 100644
--- a/src/locales/locales.ts
+++ b/src/locales/locales.ts
@@ -1,168 +1,170 @@
 //#region en
 const enDefaults = {
-   navbar: {
-      start: "Start",
-      calendar: "Calendar",
-      todos: "Todos",
-      appointments: "Appointments"
-   },
-   setTodoGroups: {
-      addNewGroup: "Add a new group",
-      groupName: "Group name",
-      addExistingGroup: "Add existing group"
-   },
-   setName: {
-      name: "Name",
-      todoName: "Todo name",
-      todoListName: "Todo list name",
-      appointmentName: "Appointment name"
-   },
-   userMenu: {
+	navbar: {
+		start: "Start",
+		calendar: "Calendar",
+		todos: "Todos",
+		appointments: "Appointments"
+	},
+	setTodoGroups: {
+		addNewGroup: "Add a new group",
+		groupName: "Group name",
+		addExistingGroup: "Add existing group"
+	},
+	setName: {
+		name: "Name",
+		todoName: "Todo name",
+		todoListName: "Todo list name",
+		appointmentName: "Appointment name"
+	},
+	userMenu: {
 		account: "Your Account",
-      settings: "Settings"
-   },
-   newTodoModal: {
-      header: "New Todo",
-      setDate: "Set a date",
-      save: "Save",
-      reminder: "Reminder"
-   },
-   todoListModal: {
-      newTodoList: "New Todo list",
-      editTodoList: "Edit Todo list",
-      setDate: "Set a date",
-      save: "Save"
-   },
-   todoListTree: {
-      newTodo: "Add Todo",
-      newTodoList: "Add Todo list",
-      add: "Add",
-      todoName: "Todo name",
+		settings: "Settings"
+	},
+	newTodoModal: {
+		header: "New Todo",
+		setDate: "Set a date",
+		save: "Save",
+		reminder: "Reminder"
+	},
+	todoListModal: {
+		newTodoList: "New Todo list",
+		editTodoList: "Edit Todo list",
+		setDate: "Set a date",
+		save: "Save"
+	},
+	todoListTree: {
+		newTodo: "Add Todo",
+		newTodoList: "Add Todo list",
+		add: "Add",
+		todoName: "Todo name",
 		todoListName: "Todo list name",
-      rename: "Rename",
-      delete: "Delete",
-      save: "Save"
-   },
-   deleteTodoListModal: {
-      header: "Delete Todo list",
-      message: "Are you sure you want to delete the Todo list and all its todos and todo lists?",
-      delete: "Delete",
-      cancel: "Cancel"
-   },
-   appointmentItem: {
-      edit: "Edit",
-      delete: "Delete"
-   },
-   smallAppointmentItem: {
-      edit: "Edit",
-      delete: "Delete"
-   },
-   appointmentModal: {
-      newAppointment: "New Appointment",
-      editAppointment: "Edit Appointment",
-      entireDay: "Entire Day",
-      start: "Start",
-      end: "End",
-      color: "Color",
-      save: "Save",
-      reminder: "Reminder",
-      reminderTimes: {
-         minutes0: "0 minutes before",
-         minutes15: "15 minutes before",
-         minutes30: "30 minutes before",
-         hour1: "1 hour before",
-         hours3: "3 hours before",
-         hours6: "6 hours before",
-         hours12: "12 hours before",
-         day1: "1 day before",
-         week1: "1 week before"
-      }
-   },
-   deleteAppointmentModal: {
-      header: "Delete appointment",
-      deleteWarning: "Are you sure you want to delete the following appointment?",
-      delete: "Delete",
-      cancel: "Cancel"
-	},
-   logoutModal: {
-      header: "Log out",
-      message: "Are you sure you want to log out?",
-      logout: "Log out",
-      cancel: "Cancel"
-   },
-   startPage: {
+		rename: "Rename",
+		delete: "Delete",
+		save: "Save"
+	},
+	deleteTodoListModal: {
+		header: "Delete Todo list",
+		message:
+			"Are you sure you want to delete the Todo list and all its todos and todo lists?",
+		delete: "Delete",
+		cancel: "Cancel"
+	},
+	appointmentItem: {
+		edit: "Edit",
+		delete: "Delete"
+	},
+	smallAppointmentItem: {
+		edit: "Edit",
+		delete: "Delete"
+	},
+	appointmentModal: {
+		newAppointment: "New Appointment",
+		editAppointment: "Edit Appointment",
+		entireDay: "Entire Day",
+		start: "Start",
+		end: "End",
+		color: "Color",
+		save: "Save",
+		reminder: "Reminder",
+		reminderTimes: {
+			minutes0: "0 minutes before",
+			minutes15: "15 minutes before",
+			minutes30: "30 minutes before",
+			hour1: "1 hour before",
+			hours3: "3 hours before",
+			hours6: "6 hours before",
+			hours12: "12 hours before",
+			day1: "1 day before",
+			week1: "1 week before"
+		}
+	},
+	deleteAppointmentModal: {
+		header: "Delete appointment",
+		deleteWarning:
+			"Are you sure you want to delete the following appointment?",
+		delete: "Delete",
+		cancel: "Cancel"
+	},
+	logoutModal: {
+		header: "Log out",
+		message: "Are you sure you want to log out?",
+		logout: "Log out",
+		cancel: "Cancel"
+	},
+	startPage: {
 		appointments: "Appointments",
-      todos: "Todos",
-      newTodo: "Add Todo",
-      newTodoList: "Add Todo list",
-      formats: {
+		todos: "Todos",
+		newTodo: "Add Todo",
+		newTodoList: "Add Todo list",
+		formats: {
 			smallDate: "M/D",
 			largeDate: "dddd"
-      }
-   },
-   todosPage: {
-      header: "Todos",
-      sortByGroup: "Sort by group",
-      sortByDate: "Sort by date",
-      newTodo: "Add Todo",
-      newTodoList: "Add Todo list",
+		}
+	},
+	todosPage: {
+		header: "Todos",
+		sortByGroup: "Sort by group",
+		sortByDate: "Sort by date",
+		newTodo: "Add Todo",
+		newTodoList: "Add Todo list",
 		noTodos: "You have no todos",
 		formats: {
 			date: "dddd, MMMM D, YYYY"
 		}
-   },
-   appointmentsPage: {
-      header: "Appointments",
+	},
+	appointmentsPage: {
+		header: "Appointments",
 		noAppointments: "You have no upcoming appointments",
 		oldAppointments: "Old appointments"
-   },
-   calendarPage: {
-      todo: "Todo",
-      s: "s"
-   },
-   calendarDayPage: {
-      appointments: "Appointments",
-      todos: "Todos",
-      newTodo: "Add Todo",
-      newTodoList: "Add Todo list",
-      noAppointments: "No appointments",
-      noTodos: "No todos",
-      formats: {
-         currentDay: "dddd, MMMM D, YYYY"
-      }
-   },
-   todoListDetailsPage: {
-      date: "Date: ",
-      groups: "Groups: ",
-      todos: "Todos",
-      newTodo: "Add Todo",
-      newTodoList: "Add Todo list",
-      formats: {
-         date: "L"
-      }
-   },
-   accountPage: {
-      header: "Your Account",
-      text1: "Save your calendar and access it from anywhere",
-      text2: "Access the same calendar on all your devices",
-      text3: "Make sure your todos and appointments don't get lost",
-      login: "Log in",
-      logout: "Log out",
-      signup: "Sign up",
+	},
+	calendarPage: {
+		todo: "Todo",
+		s: "s"
+	},
+	calendarDayPage: {
+		appointments: "Appointments",
+		todos: "Todos",
+		newTodo: "Add Todo",
+		newTodoList: "Add Todo list",
+		noAppointments: "No appointments",
+		noTodos: "No todos",
+		formats: {
+			currentDay: "dddd, MMMM D, YYYY"
+		}
+	},
+	todoListDetailsPage: {
+		date: "Date: ",
+		groups: "Groups: ",
+		todos: "Todos",
+		newTodo: "Add Todo",
+		newTodoList: "Add Todo list",
+		formats: {
+			date: "L"
+		}
+	},
+	accountPage: {
+		header: "Your Account",
+		text1: "Save your calendar and access it from anywhere",
+		text2: "Access the same calendar on all your devices",
+		text3: "Make sure your todos and appointments don't get lost",
+		login: "Log in",
+		logout: "Log out",
+		signup: "Sign up",
 		storageUsed: "{0} GB of {1} GB used",
 		planFree: "Free",
 		planPlus: "Plus",
 		planPro: "Pro"
-   },
-   settingsPage: {
-      header: "Settings",
-      sortTodosBy: "Sort todos by",
-      sortTodosByDate: "date",
-      sortTodosByGroup: "group",
-      showOldAppointments: "Show old appointments",
-      theme: "Theme",
-      lightTheme: "Light",
-      darkTheme: "Dark",
+	},
+	settingsPage: {
+		header: "Settings",
+		sortTodosBy: "Sort todos by",
+		sortTodosByDate: "date",
+		sortTodosByGroup: "group",
+		showOldAppointments: "Show old appointments",
+		theme: "Theme",
+		lightTheme: "Light",
+		darkTheme: "Dark",
 		systemTheme: "Use system setting",
 		news: "News and updates",
 		github: "Calendo on GitHub",
@@ -176,218 +178,220 @@ const enDefaults = {
 				allDay: "LL",
 				specificTime: "LT"
 			}
-      },
-      todo: {
-         title: "Don't forget..."
-      }
-   },
-   snackbar: {
-      todoCreated: "Todo was created",
-      todoListCreated: "Todo list was created",
-      appointmentCreated: "Appointment was created",
-      show: "Show"
-   }
+		},
+		todo: {
+			title: "Don't forget..."
+		}
+	},
+	snackbar: {
+		todoCreated: "Todo was created",
+		todoListCreated: "Todo list was created",
+		appointmentCreated: "Appointment was created",
+		show: "Show"
+	}
 }
 
-export var enUS = enDefaults;
+export var enUS = enDefaults
 
-export var enGB = enDefaults;
-enGB.startPage.formats.smallDate = "D/M";
-enGB.calendarDayPage.formats.currentDay = "dddd, D MMMM YYYY";
-enGB.todosPage.formats.date = "dddd, D MMMM YYYY";
-enGB.appointmentModal.color = "Colour";
+export var enGB = enDefaults
+enGB.startPage.formats.smallDate = "D/M"
+enGB.calendarDayPage.formats.currentDay = "dddd, D MMMM YYYY"
+enGB.todosPage.formats.date = "dddd, D MMMM YYYY"
+enGB.appointmentModal.color = "Colour"
 
-export var enNZ = enDefaults;
-enNZ.startPage.formats.smallDate = "D/M";
-enNZ.calendarDayPage.formats.currentDay = "dddd, D MMMM YYYY";
-enNZ.todosPage.formats.date = "dddd, D MMMM YYYY";
-enNZ.appointmentModal.color = "Colour";
+export var enNZ = enDefaults
+enNZ.startPage.formats.smallDate = "D/M"
+enNZ.calendarDayPage.formats.currentDay = "dddd, D MMMM YYYY"
+enNZ.todosPage.formats.date = "dddd, D MMMM YYYY"
+enNZ.appointmentModal.color = "Colour"
 
-export var enIL = enDefaults;
-enIL.startPage.formats.smallDate = "D/M";
-enIL.calendarDayPage.formats.currentDay = "dddd, D MMMM YYYY";
-enIL.todosPage.formats.date = "dddd, D MMMM YYYY";
+export var enIL = enDefaults
+enIL.startPage.formats.smallDate = "D/M"
+enIL.calendarDayPage.formats.currentDay = "dddd, D MMMM YYYY"
+enIL.todosPage.formats.date = "dddd, D MMMM YYYY"
 
-export var enIE = enDefaults;
-enIE.startPage.formats.smallDate = "D-M";
-enIE.calendarDayPage.formats.currentDay = "dddd D MMMM YYYY";
-enIE.todosPage.formats.date = "dddd D MMMM YYYY";
+export var enIE = enDefaults
+enIE.startPage.formats.smallDate = "D-M"
+enIE.calendarDayPage.formats.currentDay = "dddd D MMMM YYYY"
+enIE.todosPage.formats.date = "dddd D MMMM YYYY"
 
-export var enCA = enDefaults;
-enCA.startPage.formats.smallDate = "M-D";
-enCA.todosPage.formats.date = "dddd, MMMM D, YYYY";
+export var enCA = enDefaults
+enCA.startPage.formats.smallDate = "M-D"
+enCA.todosPage.formats.date = "dddd, MMMM D, YYYY"
 
-export var enAU = enDefaults;
-enAU.startPage.formats.smallDate = "D/M";
-enAU.calendarDayPage.formats.currentDay = "dddd, D MMMM YYYY";
-enAU.todosPage.formats.date = "dddd, D MMMM YYYY";
+export var enAU = enDefaults
+enAU.startPage.formats.smallDate = "D/M"
+enAU.calendarDayPage.formats.currentDay = "dddd, D MMMM YYYY"
+enAU.todosPage.formats.date = "dddd, D MMMM YYYY"
 //#endregion
 
 //#region de
 const deDefaults = {
-   navbar: {
-      start: "Start",
-      calendar: "Kalender",
-      todos: "Todos",
-      appointments: "Termine"
-   },
-   setTodoGroups: {
-      addNewGroup: "Neue Gruppe hinzufügen",
-      groupName: "Name der Gruppe",
-      addExistingGroup: "Bestehende Gruppe hinzufügen"
-   },
-   setName: {
-      name: "Name",
-      todoName: "Name des Todos",
-      todoListName: "Name der Todo-Liste",
-      appointmentName: "Name des Termins"
-   },
-   userMenu: {
+	navbar: {
+		start: "Start",
+		calendar: "Kalender",
+		todos: "Todos",
+		appointments: "Termine"
+	},
+	setTodoGroups: {
+		addNewGroup: "Neue Gruppe hinzufügen",
+		groupName: "Name der Gruppe",
+		addExistingGroup: "Bestehende Gruppe hinzufügen"
+	},
+	setName: {
+		name: "Name",
+		todoName: "Name des Todos",
+		todoListName: "Name der Todo-Liste",
+		appointmentName: "Name des Termins"
+	},
+	userMenu: {
 		account: "Dein Account",
-      settings: "Einstellungen"
-   },
-   newTodoModal: {
-      header: "Neues Todo",
-      setDate: "Datum speichern",
-      save: "Speichern",
-      reminder: "Erinnerung"
-   },
-   todoListModal: {
-      newTodoList: "Neue Todo-Liste",
-      editTodoList: "Todo-Liste bearbeiten",
-      setDate: "Datum speichern",
-      save: "Speichern"
-   },
-   todoListTree: {
-      newTodo: "Todo hinzufügen",
-      newTodoList: "Todo-Liste hinzufügen",
-      add: "Hinzufügen",
-      todoName: "Name des Todos",
+		settings: "Einstellungen"
+	},
+	newTodoModal: {
+		header: "Neues Todo",
+		setDate: "Datum speichern",
+		save: "Speichern",
+		reminder: "Erinnerung"
+	},
+	todoListModal: {
+		newTodoList: "Neue Todo-Liste",
+		editTodoList: "Todo-Liste bearbeiten",
+		setDate: "Datum speichern",
+		save: "Speichern"
+	},
+	todoListTree: {
+		newTodo: "Todo hinzufügen",
+		newTodoList: "Todo-Liste hinzufügen",
+		add: "Hinzufügen",
+		todoName: "Name des Todos",
 		todoListName: "Name der Todo-Liste",
 		rename: "Umbenennen",
-      delete: "Löschen",
-      save: "Speichern"
-   },
-   deleteTodoListModal: {
-      header: "Todo-Liste löschen",
-      message: "Bist du dir sicher, dass du die Todo-Liste und alle dazugehörigen Todos und Todo-Listen löschen willst?",
-      delete: "Löschen",
-      cancel: "Abbrechen"
-   },
-   appointmentItem: {
-      edit: "Bearbeiten",
-      delete: "Löschen"
-   },
-   smallAppointmentItem: {
-      edit: "Bearbeiten",
-      delete: "Löschen"
-   },
-   appointmentModal: {
-      newAppointment: "Neuer Termin",
-      editAppointment: "Termin bearbeiten",
-      entireDay: "Ganzer Tag",
-      start: "Anfang",
-      end: "Ende",
-      color: "Farbe",
-      save: "Speichern",
-      reminder: "Erinnerung",
-      reminderTimes: {
-         minutes0: "0 Minuten vorher",
-         minutes15: "15 Minuten vorher",
-         minutes30: "30 Minuten vorher",
-         hour1: "1 Stunde vorher",
-         hours3: "3 Stunden vorher",
-         hours6: "6 Stunden vorher",
-         hours12: "12 Stunden vorher",
-         day1: "1 Tag vorher",
-         week1: "1 Woche vorher"
-      }
-   },
-   deleteAppointmentModal: {
-      header: "Termin löschen",
-      deleteWarning: "Bist du dir sicher, dass du diesen Termin löschen willst?",
-      delete: "Löschen",
-      cancel: "Abbrechen"
+		delete: "Löschen",
+		save: "Speichern"
+	},
+	deleteTodoListModal: {
+		header: "Todo-Liste löschen",
+		message:
+			"Bist du dir sicher, dass du die Todo-Liste und alle dazugehörigen Todos und Todo-Listen löschen willst?",
+		delete: "Löschen",
+		cancel: "Abbrechen"
+	},
+	appointmentItem: {
+		edit: "Bearbeiten",
+		delete: "Löschen"
+	},
+	smallAppointmentItem: {
+		edit: "Bearbeiten",
+		delete: "Löschen"
+	},
+	appointmentModal: {
+		newAppointment: "Neuer Termin",
+		editAppointment: "Termin bearbeiten",
+		entireDay: "Ganzer Tag",
+		start: "Anfang",
+		end: "Ende",
+		color: "Farbe",
+		save: "Speichern",
+		reminder: "Erinnerung",
+		reminderTimes: {
+			minutes0: "0 Minuten vorher",
+			minutes15: "15 Minuten vorher",
+			minutes30: "30 Minuten vorher",
+			hour1: "1 Stunde vorher",
+			hours3: "3 Stunden vorher",
+			hours6: "6 Stunden vorher",
+			hours12: "12 Stunden vorher",
+			day1: "1 Tag vorher",
+			week1: "1 Woche vorher"
+		}
+	},
+	deleteAppointmentModal: {
+		header: "Termin löschen",
+		deleteWarning:
+			"Bist du dir sicher, dass du diesen Termin löschen willst?",
+		delete: "Löschen",
+		cancel: "Abbrechen"
 	},
 	logoutModal: {
-      header: "Abmelden",
-      message: "Bist du dir sicher, dass du dich abmelden möchtest?",
-      logout: "Abmelden",
-      cancel: "Abbrechen"
+		header: "Abmelden",
+		message: "Bist du dir sicher, dass du dich abmelden möchtest?",
+		logout: "Abmelden",
+		cancel: "Abbrechen"
 	},
-   startPage: {
+	startPage: {
 		appointments: "Termine",
-      todos: "Todos",
-      newTodo: "Todo hinzufügen",
-      newTodoList: "Todo-Liste hinzufügen",
-      formats: {
-         smallDate: "D.M",
+		todos: "Todos",
+		newTodo: "Todo hinzufügen",
+		newTodoList: "Todo-Liste hinzufügen",
+		formats: {
+			smallDate: "D.M",
 			largeDate: "dddd"
-      }
-   },
-   todosPage: {
-      header: "Todos",
-      sortByGroup: "Nach Gruppe sortieren",
-      sortByDate: "Nach Datum sortieren",
-      newTodo: "Todo hinzufügen",
-      newTodoList: "Todo-Liste hinzufügen",
+		}
+	},
+	todosPage: {
+		header: "Todos",
+		sortByGroup: "Nach Gruppe sortieren",
+		sortByDate: "Nach Datum sortieren",
+		newTodo: "Todo hinzufügen",
+		newTodoList: "Todo-Liste hinzufügen",
 		noTodos: "Du hast keine Todos",
 		formats: {
 			date: "dddd, D. MMMM YYYY"
 		}
-   },
-   appointmentsPage: {
-      header: "Termine",
+	},
+	appointmentsPage: {
+		header: "Termine",
 		noAppointments: "Du hast keine anstehenden Termine",
 		oldAppointments: "Alte Termine"
-   },
-   calendarPage: {
-      todo: "Todo",
-      s: "s"
-   },
-   calendarDayPage: {
-      appointments: "Termine",
-      todos: "Todos",
-      newTodo: "Todo hinzufügen",
-      newTodoList: "Todo-Liste hinzufügen",
-      noAppointments: "Keine Termine",
-      noTodos: "Keine Todos",
-      formats: {
-         currentDay: "dddd, D. MMMM YYYY"
-      }
-   },
-   todoListDetailsPage: {
-      date: "Datum: ",
-      groups: "Gruppen: ",
-      todos: "Todos",
-      newTodo: "Todo hinzufügen",
-      newTodoList: "Todo-Liste hinzufügen",
-      formats: {
-         date: "L"
-      }
-   },
-   accountPage: {
-      header: "Dein Account",
-      text1: "Sichere deinen Kalender und greife von überall darauf zu",
-      text2: "Nutze den gleichen Kalender auf all deinen Geräten",
-      text3: "Stelle sicher, dass deine Termine und Todos nicht verloren gehen",
-      login: "Anmelden",
-      logout: "Abmelden",
-      signup: "Registrieren",
-      storageUsed: "{0} GB von {1} GB verwendet",
-      planFree: "Free",
+	},
+	calendarPage: {
+		todo: "Todo",
+		s: "s"
+	},
+	calendarDayPage: {
+		appointments: "Termine",
+		todos: "Todos",
+		newTodo: "Todo hinzufügen",
+		newTodoList: "Todo-Liste hinzufügen",
+		noAppointments: "Keine Termine",
+		noTodos: "Keine Todos",
+		formats: {
+			currentDay: "dddd, D. MMMM YYYY"
+		}
+	},
+	todoListDetailsPage: {
+		date: "Datum: ",
+		groups: "Gruppen: ",
+		todos: "Todos",
+		newTodo: "Todo hinzufügen",
+		newTodoList: "Todo-Liste hinzufügen",
+		formats: {
+			date: "L"
+		}
+	},
+	accountPage: {
+		header: "Dein Account",
+		text1: "Sichere deinen Kalender und greife von überall darauf zu",
+		text2: "Nutze den gleichen Kalender auf all deinen Geräten",
+		text3: "Stelle sicher, dass deine Termine und Todos nicht verloren gehen",
+		login: "Anmelden",
+		logout: "Abmelden",
+		signup: "Registrieren",
+		storageUsed: "{0} GB von {1} GB verwendet",
+		planFree: "Free",
 		planPlus: "Plus",
 		planPro: "Pro"
-   },
-   settingsPage: {
-      header: "Einstellungen",
-      sortTodosBy: "Sortiere Todos nach",
-      sortTodosByDate: "Datum",
-      sortTodosByGroup: "Gruppe",
-      showOldAppointments: "Alte Termine anzeigen",
-      theme: "Thema",
-      lightTheme: "Hell",
-      darkTheme: "Dunkel",
+	},
+	settingsPage: {
+		header: "Einstellungen",
+		sortTodosBy: "Sortiere Todos nach",
+		sortTodosByDate: "Datum",
+		sortTodosByGroup: "Gruppe",
+		showOldAppointments: "Alte Termine anzeigen",
+		theme: "Thema",
+		lightTheme: "Hell",
+		darkTheme: "Dunkel",
 		systemTheme: "Systemeinstellung verwenden",
 		news: "Neuigkeiten und Updates",
 		github: "Calendo auf GitHub",
@@ -402,21 +406,21 @@ const deDefaults = {
 				specificTime: "LT"
 			}
 		},
-      todo: {
-         title: "Nicht vergessen..."
-      }
+		todo: {
+			title: "Nicht vergessen..."
+		}
 	},
 	snackbar: {
-      todoCreated: "Todo wurde erstellt",
-      todoListCreated: "Todo-Liste wurde erstellt",
-      appointmentCreated: "Termin wurde erstellt",
-      show: "Anzeigen"
-   }
-};
+		todoCreated: "Todo wurde erstellt",
+		todoListCreated: "Todo-Liste wurde erstellt",
+		appointmentCreated: "Termin wurde erstellt",
+		show: "Anzeigen"
+	}
+}
 
-export var deDE = deDefaults;
+export var deDE = deDefaults
 
-export var deAT = deDefaults;
+export var deAT = deDefaults
 
-export var deCH = deDefaults;
-//#endregion
\ No newline at end of file
+export var deCH = deDefaults
+//#endregion
diff --git a/src/main.ts b/src/main.ts
index 91ec6da..7bb6d5f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,12 +1,13 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from "@angular/core"
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppModule } from "./app/app.module"
+import { environment } from "./environments/environment"
 
 if (environment.production) {
-  enableProdMode();
+	enableProdMode()
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+platformBrowserDynamic()
+	.bootstrapModule(AppModule)
+	.catch(err => console.log(err))