diff --git a/.metadata b/.metadata
index 94c106f..68b331f 100644
--- a/.metadata
+++ b/.metadata
@@ -4,7 +4,7 @@
 # This file should be version controlled and should not be manually edited.
 
 version:
-  revision: "68bfaea224880b488c617afe30ab12091ea8fa4e"
+  revision: "761747bfc538b5af34aa0d3fac380f1bc331ec49"
   channel: "stable"
 
 project_type: app
@@ -13,26 +13,11 @@ project_type: app
 migration:
   platforms:
     - platform: root
-      create_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
-      base_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
-    - platform: android
-      create_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
-      base_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
-    - platform: ios
-      create_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
-      base_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
-    - platform: linux
-      create_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
-      base_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
-    - platform: macos
-      create_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
-      base_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
+      create_revision: 761747bfc538b5af34aa0d3fac380f1bc331ec49
+      base_revision: 761747bfc538b5af34aa0d3fac380f1bc331ec49
     - platform: web
-      create_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
-      base_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
-    - platform: windows
-      create_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
-      base_revision: 68bfaea224880b488c617afe30ab12091ea8fa4e
+      create_revision: 761747bfc538b5af34aa0d3fac380f1bc331ec49
+      base_revision: 761747bfc538b5af34aa0d3fac380f1bc331ec49
 
   # User provided section
 
diff --git a/.vscode/launch.json b/.vscode/launch.json
index e21af9f..c09806b 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -7,8 +7,8 @@
             "program": "lib/main.dart",
             "deviceId": "chrome",
             "args": [
-                "--webport",
-                "5050"
+                "--web-port",
+                "8880"
             ]
         },
         {
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 8718d2f..f1946d4 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -1,8 +1,14 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
+    <uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
+    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO"/>
+
     <application
-        android:label="DTR App"
+        android:label="Daily Time Record"
         android:name="${applicationName}"
-        android:icon="@mipmap/ic_launcher">
+        android:icon="@mipmap/ic_launcher"
+        android:requestLegacyExternalStorage="true" 
+        >
         <activity
             android:name=".MainActivity"
             android:exported="true"
@@ -10,7 +16,8 @@
             android:theme="@style/LaunchTheme"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
             android:hardwareAccelerated="true"
-            android:windowSoftInputMode="adjustResize">
+            android:windowSoftInputMode="adjustResize"
+            android:screenOrientation="portrait">
             <!-- Specifies an Android theme to apply to this Activity as soon as
                  the Android process has started. This theme is visible to the user
                  while the Flutter UI initializes. After that, this theme continues
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
index 939b75f..965bec7 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png
index be483d4..1966948 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png differ
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png
index 70f40d3..93abda3 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher_monochrome.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher_monochrome.png
index 9966838..93abda3 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher_monochrome.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher_monochrome.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
index e5c6971..f90f34e 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.png
index ba4718c..75025cf 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png
index 1c5e045..f4730ad 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher_monochrome.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher_monochrome.png
index bcbdc6f..f4730ad 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher_monochrome.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher_monochrome.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
index 71420d9..2b2bb7f 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png
index 46692de..9784f16 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png
index 77260fc..4300e12 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_monochrome.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_monochrome.png
index fb454f1..4300e12 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_monochrome.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_monochrome.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
index 839945f..c6cd2e7 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png
index 1e00200..04ef206 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png
index 9c76940..75c51d5 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_monochrome.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_monochrome.png
index a2aef54..75c51d5 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_monochrome.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_monochrome.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
index a7df18e..123dd6c 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png
index 3aed259..66a5487 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png
index be9ea5e..9a1d94e 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_monochrome.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_monochrome.png
index 150caaa..9a1d94e 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_monochrome.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_monochrome.png differ
diff --git a/assets/fonts/Nunito-Black.ttf b/assets/fonts/Nunito-Black.ttf
new file mode 100644
index 0000000..81d557c
Binary files /dev/null and b/assets/fonts/Nunito-Black.ttf differ
diff --git a/assets/fonts/Nunito-Bold.ttf b/assets/fonts/Nunito-Bold.ttf
new file mode 100644
index 0000000..886134d
Binary files /dev/null and b/assets/fonts/Nunito-Bold.ttf differ
diff --git a/assets/fonts/Nunito-ExtraBold.ttf b/assets/fonts/Nunito-ExtraBold.ttf
new file mode 100644
index 0000000..711765e
Binary files /dev/null and b/assets/fonts/Nunito-ExtraBold.ttf differ
diff --git a/assets/fonts/Nunito-ExtraLight.ttf b/assets/fonts/Nunito-ExtraLight.ttf
new file mode 100644
index 0000000..d9eabf9
Binary files /dev/null and b/assets/fonts/Nunito-ExtraLight.ttf differ
diff --git a/assets/fonts/Nunito-Italic.ttf b/assets/fonts/Nunito-Italic.ttf
new file mode 100644
index 0000000..f4ab114
Binary files /dev/null and b/assets/fonts/Nunito-Italic.ttf differ
diff --git a/assets/fonts/Nunito-Light.ttf b/assets/fonts/Nunito-Light.ttf
new file mode 100644
index 0000000..e64c0fe
Binary files /dev/null and b/assets/fonts/Nunito-Light.ttf differ
diff --git a/assets/fonts/Nunito-Medium.ttf b/assets/fonts/Nunito-Medium.ttf
new file mode 100644
index 0000000..e24c1d6
Binary files /dev/null and b/assets/fonts/Nunito-Medium.ttf differ
diff --git a/assets/fonts/Nunito-Regular.ttf b/assets/fonts/Nunito-Regular.ttf
new file mode 100644
index 0000000..9411bfb
Binary files /dev/null and b/assets/fonts/Nunito-Regular.ttf differ
diff --git a/assets/fonts/Nunito-SemiBold.ttf b/assets/fonts/Nunito-SemiBold.ttf
new file mode 100644
index 0000000..1326a7d
Binary files /dev/null and b/assets/fonts/Nunito-SemiBold.ttf differ
diff --git a/assets/fonts/Roboto-Black.ttf b/assets/fonts/Roboto-Black.ttf
new file mode 100644
index 0000000..0112e7d
Binary files /dev/null and b/assets/fonts/Roboto-Black.ttf differ
diff --git a/assets/fonts/Roboto-Bold.ttf b/assets/fonts/Roboto-Bold.ttf
new file mode 100644
index 0000000..43da14d
Binary files /dev/null and b/assets/fonts/Roboto-Bold.ttf differ
diff --git a/assets/fonts/Roboto-Italic.ttf b/assets/fonts/Roboto-Italic.ttf
new file mode 100644
index 0000000..1b5eaa3
Binary files /dev/null and b/assets/fonts/Roboto-Italic.ttf differ
diff --git a/assets/fonts/Roboto-Light.ttf b/assets/fonts/Roboto-Light.ttf
new file mode 100644
index 0000000..e7307e7
Binary files /dev/null and b/assets/fonts/Roboto-Light.ttf differ
diff --git a/assets/fonts/Roboto-Medium.ttf b/assets/fonts/Roboto-Medium.ttf
new file mode 100644
index 0000000..ac0f908
Binary files /dev/null and b/assets/fonts/Roboto-Medium.ttf differ
diff --git a/assets/fonts/Roboto-Regular.ttf b/assets/fonts/Roboto-Regular.ttf
new file mode 100644
index 0000000..ddf4bfa
Binary files /dev/null and b/assets/fonts/Roboto-Regular.ttf differ
diff --git a/assets/fonts/Roboto-Thin.ttf b/assets/fonts/Roboto-Thin.ttf
new file mode 100644
index 0000000..2e0dee6
Binary files /dev/null and b/assets/fonts/Roboto-Thin.ttf differ
diff --git a/assets/icons/icon_back.svg b/assets/icons/icon_back.svg
new file mode 100644
index 0000000..0a2bb29
--- /dev/null
+++ b/assets/icons/icon_back.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 18.5L9 12.5L15 6.5" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/icons/icon_calendar.svg b/assets/icons/icon_calendar.svg
new file mode 100644
index 0000000..952e470
--- /dev/null
+++ b/assets/icons/icon_calendar.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.3333 2.66663V6.99996M8.66667 2.66663V6.99996M3.25 11.3333H22.75M5.41667 4.83329H20.5833C21.78 4.83329 22.75 5.80334 22.75 6.99996V22.1666C22.75 23.3632 21.78 24.3333 20.5833 24.3333H5.41667C4.22005 24.3333 3.25 23.3632 3.25 22.1666V6.99996C3.25 5.80334 4.22005 4.83329 5.41667 4.83329Z" stroke="#E1AA74" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/icons/icon_delete.svg b/assets/icons/icon_delete.svg
new file mode 100644
index 0000000..e9edf8e
--- /dev/null
+++ b/assets/icons/icon_delete.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.83337 17.5C5.37504 17.5 4.98268 17.3368 4.65629 17.0104C4.3299 16.684 4.16671 16.2917 4.16671 15.8333V5H3.33337V3.33333H7.50004V2.5H12.5V3.33333H16.6667V5H15.8334V15.8333C15.8334 16.2917 15.6702 16.684 15.3438 17.0104C15.0174 17.3368 14.625 17.5 14.1667 17.5H5.83337ZM14.1667 5H5.83337V15.8333H14.1667V5ZM7.50004 14.1667H9.16671V6.66667H7.50004V14.1667ZM10.8334 14.1667H12.5V6.66667H10.8334V14.1667Z" fill="#262626"/>
+</svg>
diff --git a/assets/icons/icon_guide_arrow_down.svg b/assets/icons/icon_guide_arrow_down.svg
new file mode 100644
index 0000000..d5583ca
--- /dev/null
+++ b/assets/icons/icon_guide_arrow_down.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 32C11.484 32 13.7 33.466 15.56 34.95C17.96 36.858 20.054 39.138 21.652 41.752C22.85 43.712 24 46.088 24 48M24 48C24 46.088 25.15 43.71 26.348 41.752C27.948 39.138 30.042 36.858 32.438 34.95C34.3 33.466 36.52 32 38 32M24 48V0" stroke="white" stroke-width="2"/>
+</svg>
diff --git a/assets/icons/icon_guide_arrow_up.svg b/assets/icons/icon_guide_arrow_up.svg
new file mode 100644
index 0000000..80a5c98
--- /dev/null
+++ b/assets/icons/icon_guide_arrow_up.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38 16C36.516 16 34.3 14.534 32.44 13.05C30.04 11.142 27.946 8.862 26.348 6.248C25.15 4.288 24 1.912 24 0M24 0C24 1.912 22.85 4.29 21.652 6.248C20.052 8.862 17.958 11.142 15.562 13.05C13.7 14.534 11.48 16 10 16M24 0V48" stroke="white" stroke-width="2"/>
+</svg>
diff --git a/assets/icons/icon_home.svg b/assets/icons/icon_home.svg
new file mode 100644
index 0000000..437f16f
--- /dev/null
+++ b/assets/icons/icon_home.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.707 2.293C12.5195 2.10553 12.2652 2.00021 12 2.00021C11.7348 2.00021 11.4805 2.10553 11.293 2.293L4.29299 9.293L2.29299 11.293C2.19748 11.3852 2.1213 11.4956 2.06889 11.6176C2.01648 11.7396 1.98889 11.8708 1.98774 12.0036C1.98659 12.1364 2.01189 12.2681 2.06217 12.391C2.11245 12.5139 2.1867 12.6255 2.28059 12.7194C2.37449 12.8133 2.48614 12.8875 2.60904 12.9378C2.73193 12.9881 2.86361 13.0134 2.99639 13.0123C3.12917 13.0111 3.26039 12.9835 3.38239 12.9311C3.5044 12.8787 3.61474 12.8025 3.70699 12.707L3.99999 12.414V19C3.99999 19.7956 4.31606 20.5587 4.87867 21.1213C5.44128 21.6839 6.20434 22 6.99999 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V12.414L20.293 12.707C20.4816 12.8892 20.7342 12.99 20.9964 12.9877C21.2586 12.9854 21.5094 12.8802 21.6948 12.6948C21.8802 12.5094 21.9854 12.2586 21.9877 11.9964C21.9899 11.7342 21.8891 11.4816 21.707 11.293L12.707 2.293Z" fill="#8E8E93"/>
+</svg>
diff --git a/assets/images/app_logo.png b/assets/images/app_logo.png
new file mode 100644
index 0000000..5f87701
Binary files /dev/null and b/assets/images/app_logo.png differ
diff --git a/assets/images/clapping_hands.png b/assets/images/clapping_hands.png
new file mode 100644
index 0000000..6214822
Binary files /dev/null and b/assets/images/clapping_hands.png differ
diff --git a/assets/images/party_cone.png b/assets/images/party_cone.png
new file mode 100644
index 0000000..92f5a6e
Binary files /dev/null and b/assets/images/party_cone.png differ
diff --git a/lib/calculator_screen.dart b/lib/calculator_screen.dart
deleted file mode 100644
index 65c2589..0000000
--- a/lib/calculator_screen.dart
+++ /dev/null
@@ -1,179 +0,0 @@
-import 'package:flutter/material.dart';
-
-class WorkHoursCalculator extends StatefulWidget {
-  const WorkHoursCalculator({super.key});
-
-  @override
-  State<WorkHoursCalculator> createState() => _WorkHoursCalculatorState();
-}
-
-class _WorkHoursCalculatorState extends State<WorkHoursCalculator> {
-  late TimeOfDay _lunchStart;
-  late TimeOfDay _lunchEnd;
-  late TimeOfDay _scheduleStart;
-  late TimeOfDay _scheduleEnd;
-  late DateTime _date;
-  late TimeOfDay _timeIn;
-  late TimeOfDay _timeOut;
-  late String _totalHours;
-
-  @override
-  void initState() {
-    super.initState();
-    _lunchStart = const TimeOfDay(hour: 12, minute: 0);
-    _lunchEnd = const TimeOfDay(hour: 13, minute: 0);
-    _scheduleStart = const TimeOfDay(hour: 8, minute: 0);
-    _scheduleEnd = const TimeOfDay(hour: 17, minute: 0);
-    _date = DateTime.now();
-    _timeIn = const TimeOfDay(hour: 8, minute: 0);
-    _timeOut = const TimeOfDay(hour: 17, minute: 0);
-    _calculateTotalWorkHours();
-  }
-
-  void _updateDate(DateTime newDate) {
-    setState(() {
-      _date = newDate;
-    });
-  }
-
-  void _updateTimeIn(TimeOfDay newTime) {
-    setState(() {
-      _timeIn = newTime;
-    });
-    _calculateTotalWorkHours();
-  }
-
-  void _updateTimeOut(TimeOfDay newTime) {
-    setState(() {
-      _timeOut = newTime;
-    });
-    _calculateTotalWorkHours();
-  }
-
-  void _calculateTotalWorkHours() {
-    if (_timeIn.hour < _scheduleStart.hour) {
-      _timeIn = _scheduleStart;
-    }
-    if (_timeOut.hour > _scheduleEnd.hour) {
-      _timeOut = _scheduleEnd;
-    }
-
-    final DateTime inDateTime = DateTime(
-        _date.year, _date.month, _date.day, _timeIn.hour, _timeIn.minute);
-    final DateTime outDateTime = DateTime(
-        _date.year, _date.month, _date.day, _timeOut.hour, _timeOut.minute);
-    final DateTime lunchStartDateTime = DateTime(_date.year, _date.month,
-        _date.day, _lunchStart.hour, _lunchStart.minute);
-    final DateTime lunchEndDateTime = DateTime(
-        _date.year, _date.month, _date.day, _lunchEnd.hour, _lunchEnd.minute);
-    final DateTime scheduleStartDateTime = DateTime(_date.year, _date.month,
-        _date.day, _scheduleStart.hour, _scheduleStart.minute);
-    final DateTime scheduleEndDateTime = DateTime(_date.year, _date.month,
-        _date.day, _scheduleEnd.hour, _scheduleEnd.minute);
-
-    double totalWorkHours = 0;
-
-    if (inDateTime.isBefore(outDateTime)) {
-      if (inDateTime.isBefore(scheduleStartDateTime)) {
-        inDateTime.add(Duration(
-            hours: scheduleStartDateTime.hour - inDateTime.hour,
-            minutes: scheduleStartDateTime.minute - inDateTime.minute));
-      }
-      if (outDateTime.isAfter(scheduleEndDateTime)) {
-        outDateTime.add(Duration(
-            hours: scheduleEndDateTime.hour - outDateTime.hour,
-            minutes: scheduleEndDateTime.minute - outDateTime.minute));
-      }
-
-      final lunchDuration = lunchEndDateTime.difference(lunchStartDateTime);
-      totalWorkHours = outDateTime.difference(inDateTime).inMinutes / 60.0;
-      totalWorkHours -= lunchDuration.inMinutes / 60.0;
-    }
-
-    setState(() {
-      _totalHours = totalWorkHours.toStringAsFixed(2);
-    });
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('Work Hours Calculator'),
-      ),
-      body: Padding(
-        padding: const EdgeInsets.all(16.0),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Text('Date: ${_date.toString().substring(0, 10)}'),
-            ElevatedButton(
-              onPressed: () async {
-                final DateTime? pickedDate = await showDatePicker(
-                  context: context,
-                  initialDate: _date,
-                  firstDate: DateTime(2000),
-                  lastDate: DateTime(2100),
-                );
-                if (pickedDate != null) {
-                  _updateDate(pickedDate);
-                }
-              },
-              child: const Text('Select Date'),
-            ),
-            const SizedBox(height: 16),
-            Text('Time In: ${_timeIn.format(context)}'),
-            ElevatedButton(
-              onPressed: () async {
-                final TimeOfDay? pickedTime = await showTimePicker(
-                  context: context,
-                  initialTime: _timeIn,
-                );
-                if (pickedTime != null) {
-                  _updateTimeIn(pickedTime);
-                }
-              },
-              child: const Text('Select Time In'),
-            ),
-            const SizedBox(height: 16),
-            Text('Time Out: ${_timeOut.format(context)}'),
-            ElevatedButton(
-              onPressed: () async {
-                final TimeOfDay? pickedTime = await showTimePicker(
-                  context: context,
-                  initialTime: _timeOut,
-                );
-                if (pickedTime != null) {
-                  _updateTimeOut(pickedTime);
-                }
-              },
-              child: const Text('Select Time Out'),
-            ),
-            const SizedBox(height: 16),
-            Text('Total Work Hours: $_totalHours hours'),
-            const SizedBox(height: 16),
-            ElevatedButton(
-              onPressed: () {
-                showDialog(
-                  context: context,
-                  builder: (context) => AlertDialog(
-                    title: const Text('Total Work Hours'),
-                    content: Text(
-                        'Total Work Hours: $_totalHours hours'),
-                    actions: [
-                      TextButton(
-                        onPressed: () => Navigator.pop(context),
-                        child: const Text('OK'),
-                      ),
-                    ],
-                  ),
-                );
-              },
-              child: const Text('Calculate Total Work Hours'),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
diff --git a/lib/core/api/datetime_api.dart b/lib/core/api/datetime_api.dart
new file mode 100644
index 0000000..ad54ca5
--- /dev/null
+++ b/lib/core/api/datetime_api.dart
@@ -0,0 +1,8 @@
+import 'package:intl/intl.dart';
+
+extension DateToString on DateTime {
+  /// Format DateTime to a string using the provided format
+  String formatToString({String format = 'MM/dd/yyyy'}) {
+    return DateFormat(format).format(this);
+  }
+}
diff --git a/lib/core/api/double_api.dart b/lib/core/api/double_api.dart
new file mode 100644
index 0000000..54305ae
--- /dev/null
+++ b/lib/core/api/double_api.dart
@@ -0,0 +1,8 @@
+extension DoubleFormatting on double {
+  String formatToString() {
+    final formattedValue = toStringAsFixed(2); // Format with two decimal places
+    final withoutTrailingZeros = formattedValue.replaceAll(
+        RegExp(r'\.?0+$'), ''); // Remove decimal places if it is only zero
+    return withoutTrailingZeros;
+  }
+}
diff --git a/lib/core/api/timeofday_api.dart b/lib/core/api/timeofday_api.dart
new file mode 100644
index 0000000..095a9a1
--- /dev/null
+++ b/lib/core/api/timeofday_api.dart
@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+extension TimeOfDayExtensions on TimeOfDay {
+  /// Convert TimeOfDay to DateTime for formatting
+  DateTime _toDateTime() {
+    final now = DateTime.now();
+    return DateTime(now.year, now.month, now.day, hour, minute);
+  }
+
+  /// Format TimeOfDay to a string using the provided format
+  String formatToString({String format = 'HH:mm'}) {
+    final dateTime = _toDateTime();
+    return DateFormat(format).format(dateTime);
+  }
+
+  /// Check if the time is after the inputted TimeOfDay
+  bool isAfter(TimeOfDay other) {
+    final now = DateTime.now();
+    final thisDateTime = DateTime(now.year, now.month, now.day, hour, minute);
+    final otherDateTime = DateTime(now.year, now.month, now.day, other.hour, other.minute);
+
+    return thisDateTime.isAfter(otherDateTime);
+  }
+
+  /// Check if the time is before the inputted TimeOfDay
+  bool isBefore(TimeOfDay other) {
+    final now = DateTime.now();
+    final thisDateTime = DateTime(now.year, now.month, now.day, hour, minute);
+    final otherDateTime = DateTime(now.year, now.month, now.day, other.hour, other.minute);
+
+    return thisDateTime.isBefore(otherDateTime);
+  }
+}
diff --git a/lib/core/constants.dart b/lib/core/constants.dart
new file mode 100644
index 0000000..52501ef
--- /dev/null
+++ b/lib/core/constants.dart
@@ -0,0 +1,25 @@
+const appLogo = 'assets/images/app_logo.png';
+const clappingHands = 'assets/images/clapping_hands.png';
+const partyCone = 'assets/images/party_cone.png';
+
+const iconHome = 'assets/icons/icon_home.svg';
+const iconDelete = 'assets/icons/icon_delete.svg';
+const iconCalendar = 'assets/icons/icon_calendar.svg';
+const iconBack = 'assets/icons/icon_back.svg';
+const iconGuideArrowUp = 'assets/icons/icon_guide_arrow_up.svg';
+const iconGuideArrowDown = 'assets/icons/icon_guide_arrow_down.svg';
+
+const militaryHourFormat = 'HH:mm';
+
+/// List of date formats
+final Map<String, String> dateFormats = {
+  'MM/dd/yyyy': 'MM/dd/yyyy (12/25/2024)',
+  'yyyy-MM-dd': 'yyyy-MM-dd (2024-12-25)',
+  'MM-dd-yyyy': 'MM-dd-yyyy (12-25-2024)',
+  'MMM dd, yyyy': 'MMM dd, yyyy (Dec 25, 2024)',
+  'MMMM dd, yyyy': 'MMMM dd, yyyy (December 25, 2024)',
+  'EEEE, MMMM dd, yyyy': 'EEEE, MMMM dd, yyyy (wednesday, December, 25, 2024)',
+};
+
+/// List of time formats
+final Map<String, String> timeFormats = {'h:mm a': '12-Hour Clock', 'HH:mm': '24-Hour Clock'};
diff --git a/lib/core/theme.dart b/lib/core/theme.dart
new file mode 100644
index 0000000..f91f1bb
--- /dev/null
+++ b/lib/core/theme.dart
@@ -0,0 +1,182 @@
+import 'package:flutter/material.dart';
+
+/// The app's palette
+final Map<String, Color> palette = {
+  'primary': const Color(0xff192655),
+  'secondary': const Color(0xff3876bf),
+  'tertiary': const Color(0xff2f64a1),
+  'tertiaryVariant': const Color(0xffeaf4ff),
+  'icons': const Color(0xffe1aa74),
+  'overview': const Color(0xfffffeec),
+  'inputs': const Color(0xfff2f2f7),
+  'danger': const Color(0xffffdbd9),
+  'disabled': const Color(0xff8e8e93),
+  'dark': const Color(0xff262626),
+  'faded': const Color(0xffe5e5ea),
+};
+
+/// Customized App Bar Theme
+final appBarTheme = AppBarTheme(
+    backgroundColor: Colors.white,
+    iconTheme: IconThemeData(color: palette['primary'], size: 24),
+    titleSpacing: 0,
+    titleTextStyle: TextStyle(
+        color: palette['primary'],
+        fontFamily: 'Nunito',
+        fontSize: 24,
+        fontWeight: FontWeight.w800));
+
+/// Customized the app's default text color
+final textTheme = TextTheme(
+  displayLarge: TextStyle(
+      fontSize: 24,
+      fontFamily: 'Nunito',
+      color: palette['primary'],
+      fontWeight: FontWeight.w900 // Black
+      ), // Style for splash screen title
+  bodySmall: TextStyle(
+      color: palette['dark'],
+      fontFamily: 'Roboto',
+      fontSize: 16,
+      fontWeight: FontWeight.w300 // Light
+      ), // Style for light labels
+  bodyMedium: TextStyle(
+      color: palette['dark'],
+      fontFamily: 'Roboto',
+      fontSize: 12,
+      fontWeight: FontWeight.w400 // Regular
+      ), // Default style for regular text
+  titleLarge: TextStyle(
+      fontFamily: "Nunito",
+      color: palette['primary'],
+      fontSize: 24,
+      fontWeight: FontWeight.w800 // ExtraBold
+      ), // H1
+  titleMedium: TextStyle(
+      height: 1,
+      fontFamily: "Nunito",
+      color: palette['primary'],
+      fontSize: 32,
+      fontWeight: FontWeight.w700 // Bold
+      ), // H2
+  titleSmall: TextStyle(
+      fontFamily: "Nunito",
+      color: palette['primary'],
+      fontSize: 24,
+      fontWeight: FontWeight.w700 // Bold
+      ), // H3
+  labelMedium: TextStyle(
+      fontFamily: "Roboto",
+      color: palette['dark'],
+      fontSize: 16,
+      fontWeight: FontWeight.w500 // Medium
+      ), // Style for titles, and menu labels
+  labelLarge: const TextStyle(
+      fontFamily: "Roboto",
+      color: Colors.white,
+      fontSize: 20,
+      fontWeight: FontWeight.w600 // SemiBold
+      ), // Style for text in buttons
+);
+
+/// Customized style of Floating Action Button
+final floatingActionButtonTheme = FloatingActionButtonThemeData(
+  backgroundColor: palette['secondary'],
+  splashColor: palette['tertiary'],
+  hoverColor: palette['tertiary'],
+  shape: const CircleBorder(),
+);
+
+/// Customized theme for Radio Buttons
+final radioTheme = RadioThemeData(
+  fillColor: WidgetStatePropertyAll(palette['primary']),
+);
+
+/// Customized theme for Date Picker
+final datePickerTheme = DatePickerThemeData(
+  dividerColor: Colors.transparent,
+  backgroundColor: Colors.white,
+  dayOverlayColor: WidgetStatePropertyAll(palette['secondary']),
+  yearOverlayColor: WidgetStatePropertyAll(palette['secondary']),
+  dayForegroundColor: WidgetStateProperty.resolveWith<Color>((states) {
+    if (states.contains(WidgetState.selected)) {
+      return Colors.white;
+    }
+
+    if (states.contains(WidgetState.disabled)) {
+      return palette['disabled']!;
+    }
+
+    return palette['dark']!;
+  }),
+  dayBackgroundColor: WidgetStateProperty.resolveWith<Color>((states) {
+    if (states.contains(WidgetState.selected)) {
+      return palette['primary']!;
+    }
+    return Colors.transparent;
+  }),
+  yearForegroundColor: WidgetStateProperty.resolveWith<Color>((states) {
+    if (states.contains(WidgetState.selected)) {
+      return Colors.white;
+    }
+
+    if (states.contains(WidgetState.disabled)) {
+      return palette['disabled']!;
+    }
+
+    return palette['dark']!;
+  }),
+  yearBackgroundColor: WidgetStateProperty.resolveWith<Color>((states) {
+    if (states.contains(WidgetState.selected)) {
+      return palette['primary']!;
+    }
+    return Colors.transparent;
+  }),
+  todayForegroundColor: const WidgetStatePropertyAll(Colors.white),
+  todayBackgroundColor: WidgetStateProperty.resolveWith<Color>((states) {
+    if (states.contains(WidgetState.selected)) {
+      return palette['primary']!;
+    }
+    return palette['secondary']!;
+  }),
+  headerForegroundColor: palette['dark'],
+);
+
+/// Customized theme for menus
+final menuTheme = MenuThemeData(
+    style: MenuStyle(
+  shape: WidgetStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))),
+));
+
+/// Cutomized theme for popup menus
+final popupMenuTheme = PopupMenuThemeData(
+  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+);
+
+/// Customized theme for SnackBar
+final snackBarTheme = SnackBarThemeData(
+  backgroundColor: palette['dark'],
+  contentTextStyle: textTheme.bodyMedium!.copyWith(fontSize: 12, color: Colors.white),
+);
+
+/// Customized Theme Data
+final themeData = ThemeData(
+  colorScheme: ColorScheme.light(
+    primary: palette['primary']!,
+    onPrimary: Colors.white,
+    surface: Colors.white,
+    onSurface: palette['dark']!,
+  ),
+  fontFamily: "Roboto", // Default Font
+  useMaterial3: true,
+  scaffoldBackgroundColor: Colors.white,
+  appBarTheme: appBarTheme,
+  textTheme: textTheme,
+  floatingActionButtonTheme: floatingActionButtonTheme,
+  radioTheme: radioTheme,
+  dialogBackgroundColor: Colors.white,
+  datePickerTheme: datePickerTheme,
+  menuTheme: menuTheme,
+  popupMenuTheme: popupMenuTheme,
+  snackBarTheme: snackBarTheme,
+);
diff --git a/lib/core/utilities/calculate_total_hours.dart b/lib/core/utilities/calculate_total_hours.dart
new file mode 100644
index 0000000..4449b00
--- /dev/null
+++ b/lib/core/utilities/calculate_total_hours.dart
@@ -0,0 +1,7 @@
+import 'package:flutter/material.dart';
+
+/// Calculate the total hours between two TimeOfDays
+double calculateTotalHours({required TimeOfDay start, required TimeOfDay end}) {
+  double totalHours = end.hour - start.hour + (end.minute - start.minute) / 60.0;
+  return totalHours = totalHours < 0 ? totalHours + 24 : totalHours;
+}
diff --git a/lib/core/utilities/date_range.dart b/lib/core/utilities/date_range.dart
new file mode 100644
index 0000000..a615b79
--- /dev/null
+++ b/lib/core/utilities/date_range.dart
@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+
+/// Collection of methods to get various date range
+class DateRange {
+  /// Get the range of date of the current week of inputted date
+  static DateTimeRange getThisWeek(DateTime date) {
+    // Find the current Monday
+    int daysSinceMonday = date.weekday - DateTime.monday;
+    DateTime currentMonday = date.subtract(Duration(days: daysSinceMonday));
+
+    // The following Sunday is 6 days after the current Monday
+    DateTime followingSunday = currentMonday.add(const Duration(days: 6));
+
+    return DateTimeRange(start: currentMonday, end: followingSunday);
+  }
+
+  /// Get the range of date of the previous week of inputted date
+  static DateTimeRange getLastWeek(DateTime date) {
+    // Find the previous Monday
+    int daysSinceMonday = date.weekday - DateTime.monday;
+    DateTime previousMonday = date.subtract(Duration(days: daysSinceMonday + 7));
+
+    // The following Sunday is 6 days after the previous Monday
+    DateTime previousSunday = previousMonday.add(const Duration(days: 6));
+
+    return DateTimeRange(start: previousMonday, end: previousSunday);
+  }
+
+  /// Get the first date of the current month of inputted date
+  static DateTime getThisMonth(DateTime date) {
+    return DateTime(date.year, date.month, 1);
+  }
+
+  /// Get the first date of the current year of inputted date
+  static DateTime getThisYear(DateTime date) {
+    return DateTime(date.year, 1, 1);
+  }
+}
diff --git a/lib/core/utilities/double_to_time.dart b/lib/core/utilities/double_to_time.dart
new file mode 100644
index 0000000..99340d2
--- /dev/null
+++ b/lib/core/utilities/double_to_time.dart
@@ -0,0 +1,17 @@
+import 'package:flutter_dtr_app/core/api/double_api.dart';
+
+/// Convert the double or int hours into time
+String convertDoubleToTime(double totalHours) {
+  // Ensure positive value (handle negative values)
+  final double adjustedHours = totalHours < 0 ? totalHours + 24 : totalHours;
+
+  final int hours = adjustedHours.floor(); // Truncate to whole hours
+  final double minutes = ((adjustedHours * 60) % 60); // Calculate remaining minutes
+
+  final String hoursText = hours > 0 ? '${hours}hr${hours > 1 ? 's' : ''}' : '';
+  final String space = hours > 0 && minutes > 0 ? ' ' : '';
+  final String minuteText =
+      minutes > 0 ? '${minutes.formatToString()}min${minutes > 1 ? 's' : ''}' : '';
+
+  return '$hoursText$space$minuteText'; // Formatted string for hours and minutes
+}
diff --git a/lib/core/utilities/notification_service.dart b/lib/core/utilities/notification_service.dart
new file mode 100644
index 0000000..87cd3ec
--- /dev/null
+++ b/lib/core/utilities/notification_service.dart
@@ -0,0 +1,60 @@
+import 'package:flutter_local_notifications/flutter_local_notifications.dart';
+import 'package:open_file_plus/open_file_plus.dart';
+
+class LocalNotificationService {
+  Future<void> init() async {
+    final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
+        FlutterLocalNotificationsPlugin();
+
+    flutterLocalNotificationsPlugin
+        .resolvePlatformSpecificImplementation<AndroidFlutterLocalNotificationsPlugin>()!
+        .requestNotificationsPermission();
+
+    // Initialize native android notification
+    const AndroidInitializationSettings initializationSettingsAndroid =
+        AndroidInitializationSettings('@mipmap/ic_launcher');
+
+    // Initialize native Ios Notifications
+    const DarwinInitializationSettings initializationSettingsIOS = DarwinInitializationSettings();
+
+    const InitializationSettings initializationSettings = InitializationSettings(
+      android: initializationSettingsAndroid,
+      iOS: initializationSettingsIOS,
+    );
+
+    await flutterLocalNotificationsPlugin.initialize(
+      initializationSettings,
+      onDidReceiveNotificationResponse: onDidReceiveNotificationResponse,
+    );
+  }
+}
+
+void onDidReceiveNotificationResponse(NotificationResponse notif) async {
+  OpenFile.open(notif.payload);
+}
+
+void showNotificationAndroid(String title, String body, String payload) async {
+  final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
+      FlutterLocalNotificationsPlugin();
+
+  const AndroidNotificationDetails androidNotificationDetails = AndroidNotificationDetails(
+    'channel_id',
+    'Channel Name',
+    channelDescription: 'Channel Description',
+    importance: Importance.max,
+    priority: Priority.high,
+    ticker: 'ticker',
+  );
+
+  int notificationId = 1;
+  const NotificationDetails notificationDetails =
+      NotificationDetails(android: androidNotificationDetails);
+
+  await flutterLocalNotificationsPlugin.show(
+    notificationId,
+    title,
+    body,
+    notificationDetails,
+    payload: payload,
+  );
+}
diff --git a/lib/core/utilities/responsive.dart b/lib/core/utilities/responsive.dart
new file mode 100644
index 0000000..06f47e5
--- /dev/null
+++ b/lib/core/utilities/responsive.dart
@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+
+/// Get responsive size that can be used to multiply to based font size and image sizes
+double getResponsiveSize(BuildContext context, double baseSize) {
+  double screenWidth = MediaQuery.of(context).size.width;
+  const double baseScreenWidth = 360; // Standard screen width
+  double scaleFactor = screenWidth / baseScreenWidth;
+  return baseSize * scaleFactor;
+}
diff --git a/lib/core/utilities/string_date_time_formatter.dart b/lib/core/utilities/string_date_time_formatter.dart
new file mode 100644
index 0000000..bdf4efc
--- /dev/null
+++ b/lib/core/utilities/string_date_time_formatter.dart
@@ -0,0 +1,21 @@
+import 'package:flutter_dtr_app/core/api/timeofday_api.dart';
+import 'package:flutter_dtr_app/core/utilities/string_to_timeofday.dart';
+import 'package:intl/intl.dart';
+
+String formatStringTime({required String timeString, required String format}) {
+  try {
+    return parseTimeOfDay(timeString)!.formatToString(format: format);
+  } catch (error) {
+    return timeString;
+  }
+}
+
+String formatStringDate(
+    {required String dateString, String fromFormat = 'MM/dd/yyyy', required String toFormat}) {
+  try {
+    final parsedTime = DateFormat(fromFormat).parseLoose(dateString);
+    return DateFormat(toFormat).format(parsedTime);
+  } catch (error) {
+    return dateString;
+  }
+}
diff --git a/lib/core/utilities/string_to_timeofday.dart b/lib/core/utilities/string_to_timeofday.dart
new file mode 100644
index 0000000..a3a53d0
--- /dev/null
+++ b/lib/core/utilities/string_to_timeofday.dart
@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+TimeOfDay? parseTimeOfDay(String formattedTime) {
+  try {
+    List<String> parts = formattedTime.split(':');
+    if (parts.length != 2) return null; // Early return for invalid format
+
+    final hour = int.tryParse(parts[0]);
+    final minute = int.tryParse(parts[1]);
+
+    if (hour == null ||
+        minute == null ||
+        hour < 0 ||
+        hour > 23 ||
+        minute < 0 ||
+        minute > 59) {
+      return null; // Combined validation
+    }
+
+    return TimeOfDay(hour: hour, minute: minute);
+  } catch (error) {
+    return null;
+  }
+}
diff --git a/lib/core/utilities/tutorial.dart b/lib/core/utilities/tutorial.dart
new file mode 100644
index 0000000..c72280b
--- /dev/null
+++ b/lib/core/utilities/tutorial.dart
@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/data/shared_preferences/sharedpref.dart';
+
+class Tutorial {
+  static final ValueNotifier<bool> showTutorialNotifier = ValueNotifier<bool>(false);
+  static final ValueNotifier<int> currentTutorialPageNotifier = ValueNotifier<int>(1);
+
+  static int maxTutorialPage = 4;
+
+  static void init() {
+    showTutorialNotifier.value = SharedPref.getShowTutorial();
+  }
+}
diff --git a/lib/data/database/daos/daily_time_records_dao.dart b/lib/data/database/daos/daily_time_records_dao.dart
new file mode 100644
index 0000000..6dd5bd8
--- /dev/null
+++ b/lib/data/database/daos/daily_time_records_dao.dart
@@ -0,0 +1,35 @@
+import 'package:floor/floor.dart';
+import 'package:flutter_dtr_app/data/database/entities/daily_time_records.dart';
+
+@dao
+abstract class DailyTimeRecordsDao {
+  @Query('SELECT * FROM DailyTimeRecords')
+  Future<List<DailyTimeRecord>> getAllRecords();
+
+  @Query('SELECT dateStart FROM DailyTimeRecords')
+  Future<List<String>> getAllDates();
+
+  @Query('SELECT * FROM DailyTimeRecords WHERE id = :id')
+  Future<DailyTimeRecord?> findRecordById(int id);
+
+  @Query('SELECT * FROM DailyTimeRecords WHERE dateStart = :date')
+  Future<DailyTimeRecord?> findRecordByDate(String date);
+
+  @Query('SELECT * FROM DailyTimeRecords WHERE dateStart BETWEEN :fromDate AND :toDate')
+  Future<List<DailyTimeRecord>> getRecordsByDateRange(String fromDate, String toDate);
+
+  @Insert(onConflict: OnConflictStrategy.ignore)
+  Future<void> insertRecord(DailyTimeRecord record);
+
+  @Update(onConflict: OnConflictStrategy.replace)
+  Future<void> updateRecord(DailyTimeRecord record);
+
+  @Query('DELETE FROM DailyTimeRecords WHERE id = :id')
+  Future<void> deleteRecord(int id);
+
+  @Query('DELETE FROM DailyTimeRecords')
+  Future<void> deleteAllRecords();
+
+  @Query('SELECT COUNT(id) FROM DailyTimeRecords')
+  Future<int?> getRecordsCount();
+}
diff --git a/lib/data/database/database.dart b/lib/data/database/database.dart
new file mode 100644
index 0000000..686366b
--- /dev/null
+++ b/lib/data/database/database.dart
@@ -0,0 +1,13 @@
+// required package imports
+import 'dart:async';
+import 'package:floor/floor.dart';
+import 'package:flutter_dtr_app/data/database/daos/daily_time_records_dao.dart';
+import 'package:flutter_dtr_app/data/database/entities/daily_time_records.dart';
+import 'package:sqflite/sqflite.dart' as sqflite;
+
+part 'database.g.dart'; // the generated code will be there
+
+@Database(version: 1, entities: [DailyTimeRecord])
+abstract class AppDatabase extends FloorDatabase {
+  DailyTimeRecordsDao get dailyTimeRecordsDao;
+}
diff --git a/lib/data/database/database.g.dart b/lib/data/database/database.g.dart
new file mode 100644
index 0000000..28c5453
--- /dev/null
+++ b/lib/data/database/database.g.dart
@@ -0,0 +1,260 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'database.dart';
+
+// **************************************************************************
+// FloorGenerator
+// **************************************************************************
+
+abstract class $AppDatabaseBuilderContract {
+  /// Adds migrations to the builder.
+  $AppDatabaseBuilderContract addMigrations(List<Migration> migrations);
+
+  /// Adds a database [Callback] to the builder.
+  $AppDatabaseBuilderContract addCallback(Callback callback);
+
+  /// Creates the database and initializes it.
+  Future<AppDatabase> build();
+}
+
+// ignore: avoid_classes_with_only_static_members
+class $FloorAppDatabase {
+  /// Creates a database builder for a persistent database.
+  /// Once a database is built, you should keep a reference to it and re-use it.
+  static $AppDatabaseBuilderContract databaseBuilder(String name) => _$AppDatabaseBuilder(name);
+
+  /// Creates a database builder for an in memory database.
+  /// Information stored in an in memory database disappears when the process is killed.
+  /// Once a database is built, you should keep a reference to it and re-use it.
+  static $AppDatabaseBuilderContract inMemoryDatabaseBuilder() => _$AppDatabaseBuilder(null);
+}
+
+class _$AppDatabaseBuilder implements $AppDatabaseBuilderContract {
+  _$AppDatabaseBuilder(this.name);
+
+  final String? name;
+
+  final List<Migration> _migrations = [];
+
+  Callback? _callback;
+
+  @override
+  $AppDatabaseBuilderContract addMigrations(List<Migration> migrations) {
+    _migrations.addAll(migrations);
+    return this;
+  }
+
+  @override
+  $AppDatabaseBuilderContract addCallback(Callback callback) {
+    _callback = callback;
+    return this;
+  }
+
+  @override
+  Future<AppDatabase> build() async {
+    final path = name != null ? await sqfliteDatabaseFactory.getDatabasePath(name!) : ':memory:';
+    final database = _$AppDatabase();
+    database.database = await database.open(
+      path,
+      _migrations,
+      _callback,
+    );
+    return database;
+  }
+}
+
+class _$AppDatabase extends AppDatabase {
+  _$AppDatabase([StreamController<String>? listener]) {
+    changeListener = listener ?? StreamController<String>.broadcast();
+  }
+
+  DailyTimeRecordsDao? _dailyTimeRecordsDaoInstance;
+
+  Future<sqflite.Database> open(
+    String path,
+    List<Migration> migrations, [
+    Callback? callback,
+  ]) async {
+    final databaseOptions = sqflite.OpenDatabaseOptions(
+      version: 1,
+      onConfigure: (database) async {
+        await database.execute('PRAGMA foreign_keys = ON');
+        await callback?.onConfigure?.call(database);
+      },
+      onOpen: (database) async {
+        await callback?.onOpen?.call(database);
+      },
+      onUpgrade: (database, startVersion, endVersion) async {
+        await MigrationAdapter.runMigrations(database, startVersion, endVersion, migrations);
+
+        await callback?.onUpgrade?.call(database, startVersion, endVersion);
+      },
+      onCreate: (database, version) async {
+        await database.execute(
+            'CREATE TABLE IF NOT EXISTS `DailyTimeRecords` (`dateStart` TEXT NOT NULL, `dateEnd` TEXT NOT NULL, `startTime` TEXT NOT NULL, `endTime` TEXT NOT NULL, `breakTimeStart` TEXT NOT NULL, `breakTimeEnd` TEXT NOT NULL, `notes` TEXT NOT NULL, `id` INTEGER PRIMARY KEY AUTOINCREMENT, `createdAt` TEXT NOT NULL, `updatedAt` TEXT NOT NULL)');
+        await database.execute(
+            'CREATE UNIQUE INDEX `index_DailyTimeRecords_dateStart` ON `DailyTimeRecords` (`dateStart`)');
+
+        await callback?.onCreate?.call(database, version);
+      },
+    );
+    return sqfliteDatabaseFactory.openDatabase(path, options: databaseOptions);
+  }
+
+  @override
+  DailyTimeRecordsDao get dailyTimeRecordsDao {
+    return _dailyTimeRecordsDaoInstance ??= _$DailyTimeRecordsDao(database, changeListener);
+  }
+}
+
+class _$DailyTimeRecordsDao extends DailyTimeRecordsDao {
+  _$DailyTimeRecordsDao(
+    this.database,
+    this.changeListener,
+  )   : _queryAdapter = QueryAdapter(database),
+        _dailyTimeRecordInsertionAdapter = InsertionAdapter(
+            database,
+            'DailyTimeRecords',
+            (DailyTimeRecord item) => <String, Object?>{
+                  'dateStart': item.dateStart,
+                  'dateEnd': item.dateEnd,
+                  'startTime': item.startTime,
+                  'endTime': item.endTime,
+                  'breakTimeStart': item.breakTimeStart,
+                  'breakTimeEnd': item.breakTimeEnd,
+                  'notes': item.notes,
+                  'id': item.id,
+                  'createdAt': item.createdAt,
+                  'updatedAt': item.updatedAt
+                }),
+        _dailyTimeRecordUpdateAdapter = UpdateAdapter(
+            database,
+            'DailyTimeRecords',
+            ['id'],
+            (DailyTimeRecord item) => <String, Object?>{
+                  'dateStart': item.dateStart,
+                  'dateEnd': item.dateEnd,
+                  'startTime': item.startTime,
+                  'endTime': item.endTime,
+                  'breakTimeStart': item.breakTimeStart,
+                  'breakTimeEnd': item.breakTimeEnd,
+                  'notes': item.notes,
+                  'id': item.id,
+                  'createdAt': item.createdAt,
+                  'updatedAt': item.updatedAt
+                });
+
+  final sqflite.DatabaseExecutor database;
+
+  final StreamController<String> changeListener;
+
+  final QueryAdapter _queryAdapter;
+
+  final InsertionAdapter<DailyTimeRecord> _dailyTimeRecordInsertionAdapter;
+
+  final UpdateAdapter<DailyTimeRecord> _dailyTimeRecordUpdateAdapter;
+
+  @override
+  Future<List<DailyTimeRecord>> getAllRecords() async {
+    return _queryAdapter.queryList('SELECT * FROM DailyTimeRecords',
+        mapper: (Map<String, Object?> row) => DailyTimeRecord(
+            id: row['id'] as int?,
+            dateStart: row['dateStart'] as String,
+            dateEnd: row['dateEnd'] as String,
+            startTime: row['startTime'] as String,
+            endTime: row['endTime'] as String,
+            breakTimeStart: row['breakTimeStart'] as String,
+            breakTimeEnd: row['breakTimeEnd'] as String,
+            notes: row['notes'] as String,
+            createdAt: row['createdAt'] as String?,
+            updatedAt: row['updatedAt'] as String?));
+  }
+
+  @override
+  Future<List<String>> getAllDates() async {
+    return _queryAdapter.queryList('SELECT dateStart FROM DailyTimeRecords',
+        mapper: (Map<String, Object?> row) => row.values.first as String);
+  }
+
+  @override
+  Future<DailyTimeRecord?> findRecordById(int id) async {
+    return _queryAdapter.query('SELECT * FROM DailyTimeRecords WHERE id = ?1',
+        mapper: (Map<String, Object?> row) => DailyTimeRecord(
+            id: row['id'] as int?,
+            dateStart: row['dateStart'] as String,
+            dateEnd: row['dateEnd'] as String,
+            startTime: row['startTime'] as String,
+            endTime: row['endTime'] as String,
+            breakTimeStart: row['breakTimeStart'] as String,
+            breakTimeEnd: row['breakTimeEnd'] as String,
+            notes: row['notes'] as String,
+            createdAt: row['createdAt'] as String?,
+            updatedAt: row['updatedAt'] as String?),
+        arguments: [id]);
+  }
+
+  @override
+  Future<DailyTimeRecord?> findRecordByDate(String date) async {
+    return _queryAdapter.query('SELECT * FROM DailyTimeRecords WHERE dateStart = ?1',
+        mapper: (Map<String, Object?> row) => DailyTimeRecord(
+            id: row['id'] as int?,
+            dateStart: row['dateStart'] as String,
+            dateEnd: row['dateEnd'] as String,
+            startTime: row['startTime'] as String,
+            endTime: row['endTime'] as String,
+            breakTimeStart: row['breakTimeStart'] as String,
+            breakTimeEnd: row['breakTimeEnd'] as String,
+            notes: row['notes'] as String,
+            createdAt: row['createdAt'] as String?,
+            updatedAt: row['updatedAt'] as String?),
+        arguments: [date]);
+  }
+
+  @override
+  Future<List<DailyTimeRecord>> getRecordsByDateRange(
+    String fromDate,
+    String toDate,
+  ) async {
+    return _queryAdapter.queryList(
+        'SELECT * FROM DailyTimeRecords WHERE dateStart BETWEEN ?1 AND ?2',
+        mapper: (Map<String, Object?> row) => DailyTimeRecord(
+            id: row['id'] as int?,
+            dateStart: row['dateStart'] as String,
+            dateEnd: row['dateEnd'] as String,
+            startTime: row['startTime'] as String,
+            endTime: row['endTime'] as String,
+            breakTimeStart: row['breakTimeStart'] as String,
+            breakTimeEnd: row['breakTimeEnd'] as String,
+            notes: row['notes'] as String,
+            createdAt: row['createdAt'] as String?,
+            updatedAt: row['updatedAt'] as String?),
+        arguments: [fromDate, toDate]);
+  }
+
+  @override
+  Future<void> deleteRecord(int id) async {
+    await _queryAdapter
+        .queryNoReturn('DELETE FROM DailyTimeRecords WHERE id = ?1', arguments: [id]);
+  }
+
+  @override
+  Future<void> deleteAllRecords() async {
+    await _queryAdapter.queryNoReturn('DELETE FROM DailyTimeRecords');
+  }
+
+  @override
+  Future<int?> getRecordsCount() async {
+    return _queryAdapter.query('SELECT COUNT(id) FROM DailyTimeRecords',
+        mapper: (Map<String, Object?> row) => row.values.first as int);
+  }
+
+  @override
+  Future<void> insertRecord(DailyTimeRecord record) async {
+    await _dailyTimeRecordInsertionAdapter.insert(record, OnConflictStrategy.ignore);
+  }
+
+  @override
+  Future<void> updateRecord(DailyTimeRecord record) async {
+    await _dailyTimeRecordUpdateAdapter.update(record, OnConflictStrategy.replace);
+  }
+}
diff --git a/lib/database/dtr_day.dart b/lib/data/database/dtr_day.dart
similarity index 100%
rename from lib/database/dtr_day.dart
rename to lib/data/database/dtr_day.dart
diff --git a/lib/data/database/entities/base_entity.dart b/lib/data/database/entities/base_entity.dart
new file mode 100644
index 0000000..a892ba9
--- /dev/null
+++ b/lib/data/database/entities/base_entity.dart
@@ -0,0 +1,19 @@
+import 'package:floor/floor.dart';
+
+class BaseEntity {
+  @PrimaryKey(autoGenerate: true)
+  final int? id;
+
+  @ColumnInfo(name: 'createTime')
+  final String createdAt;
+
+  @ColumnInfo(name: 'updateTime')
+  final String updatedAt;
+
+  BaseEntity({
+    this.id,
+    String? createdAt,
+    String? updatedAt,
+  })  : createdAt = createdAt ?? DateTime.now().toString(),
+        updatedAt = updatedAt ?? DateTime.now().toString();
+}
diff --git a/lib/data/database/entities/daily_time_records.dart b/lib/data/database/entities/daily_time_records.dart
new file mode 100644
index 0000000..9e00468
--- /dev/null
+++ b/lib/data/database/entities/daily_time_records.dart
@@ -0,0 +1,71 @@
+import 'package:floor/floor.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/utilities/calculate_total_hours.dart';
+import 'package:flutter_dtr_app/core/utilities/string_to_timeofday.dart';
+import 'package:flutter_dtr_app/data/database/entities/base_entity.dart';
+
+@Entity(tableName: 'DailyTimeRecords', indices: [
+  Index(value: ['dateStart'], unique: true)
+])
+class DailyTimeRecord extends BaseEntity {
+  final String dateStart;
+  final String dateEnd;
+  final String startTime;
+  final String endTime;
+  final String breakTimeStart;
+  final String breakTimeEnd;
+  final String notes;
+
+  DailyTimeRecord({
+    super.id,
+    required this.dateStart,
+    required this.dateEnd,
+    required this.startTime,
+    required this.endTime,
+    required this.breakTimeStart,
+    required this.breakTimeEnd,
+    required this.notes,
+    super.createdAt,
+    super.updatedAt,
+  });
+
+  Map toJson() => {
+        'id': id,
+        'dateStart': dateStart,
+        'dateEnd': dateEnd,
+        'startTime': startTime,
+        'endTime': endTime,
+        'breakTimeStart': breakTimeStart,
+        'breakTimeEnd': breakTimeEnd,
+        'notes': notes,
+        'createdAt': createdAt,
+        'updatedAt': updatedAt,
+      };
+
+  double getTotalHours() {
+    double totalWorkHours = 0;
+
+    final TimeOfDay timeStart = parseTimeOfDay(startTime)!;
+    final TimeOfDay timeEnd = parseTimeOfDay(endTime)!;
+    final TimeOfDay breakStart = parseTimeOfDay(breakTimeStart)!;
+    final TimeOfDay breakEnd = parseTimeOfDay(breakTimeEnd)!;
+
+    double workHours = calculateTotalHours(start: timeStart, end: timeEnd);
+
+    double breakTimeHours = calculateTotalHours(start: breakStart, end: breakEnd);
+
+    totalWorkHours = workHours - breakTimeHours;
+
+    return totalWorkHours;
+  }
+
+  static double calculateAllTotalHours(
+    List<DailyTimeRecord> records,
+  ) {
+    double totalWorkHours = 0;
+    for (var record in records) {
+      totalWorkHours += record.getTotalHours();
+    }
+    return totalWorkHours;
+  }
+}
diff --git a/lib/database/json_serialization.dart b/lib/data/database/json_serialization.dart
similarity index 100%
rename from lib/database/json_serialization.dart
rename to lib/data/database/json_serialization.dart
diff --git a/lib/data/models/daily_time_records_model.dart b/lib/data/models/daily_time_records_model.dart
new file mode 100644
index 0000000..5f023fd
--- /dev/null
+++ b/lib/data/models/daily_time_records_model.dart
@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/data/database/daos/daily_time_records_dao.dart';
+import 'package:flutter_dtr_app/data/database/database.dart';
+import 'package:flutter_dtr_app/data/database/entities/daily_time_records.dart';
+
+class DailyTimeRecordsModel {
+  DailyTimeRecordsModel._internal();
+
+  static final DailyTimeRecordsModel _instance = DailyTimeRecordsModel._internal();
+
+  factory DailyTimeRecordsModel() => _instance;
+
+  AppDatabase? database;
+  DailyTimeRecordsDao? dailyTimeRecordsDao;
+
+  final ValueNotifier<List<String>> existingDatesNotifier = ValueNotifier<List<String>>([]);
+  final ValueNotifier<double> totalHoursNotifier = ValueNotifier<double>(0);
+
+  Future<void> update() async {
+    database ??= await $FloorAppDatabase.databaseBuilder('app_database.db').build();
+    dailyTimeRecordsDao ??= database?.dailyTimeRecordsDao;
+
+    existingDatesNotifier.value = await dailyTimeRecordsDao!.getAllDates();
+    final List<DailyTimeRecord> records = await dailyTimeRecordsDao!.getAllRecords();
+
+    totalHoursNotifier.value = DailyTimeRecord.calculateAllTotalHours(records);
+  }
+}
diff --git a/lib/data/shared_preferences/sharedpref.dart b/lib/data/shared_preferences/sharedpref.dart
new file mode 100644
index 0000000..b1e1aca
--- /dev/null
+++ b/lib/data/shared_preferences/sharedpref.dart
@@ -0,0 +1,87 @@
+import 'package:flutter_dtr_app/core/constants.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+/// Collection of functions for handling SharedPreferences
+class SharedPref {
+  static late SharedPreferences _prefs;
+
+  /// Initialize SharedPreferences
+  static Future<void> init() async {
+    _prefs = await SharedPreferences.getInstance();
+  }
+
+  /// Save date format to SharedPreferences
+  static void setDateFormat(String format) {
+    _prefs.setString('dateFormat', format);
+  }
+
+  /// Retrieve date format from SharedPreferences
+  static String getDateFormat() {
+    var formats = dateFormats.keys;
+    return _prefs.getString('dateFormat') ?? formats.first;
+  }
+
+  /// Save time format to SharedPreferences
+  static void setTimeFormat(String format) {
+    _prefs.setString('timeFormat', format);
+  }
+
+  /// Retrieve date format from SharedPreferences
+  static String getTimeFormat() {
+    var formats = timeFormats.keys;
+    return _prefs.getString('timeFormat') ?? formats.first;
+  }
+
+  /// Save daily schedule start to SharedPreferences
+  static void setDailyScheduleStart(String time) {
+    _prefs.setString('dailyScheduleStart', time);
+  }
+
+  /// Retrieve daily schedule start from SharedPreferences
+  static String getDailyScheduleStart() {
+    return _prefs.getString('dailyScheduleStart') ?? '8:00';
+  }
+
+  /// Save daily schedule end to SharedPreferences
+  static void setDailyScheduleEnd(String time) {
+    _prefs.setString('dailyScheduleEnd', time);
+  }
+
+  /// Retrieve daily schedule end from SharedPreferences
+  static String getDailyScheduleEnd() {
+    return _prefs.getString('dailyScheduleEnd') ?? '17:00';
+  }
+
+  /// Save break time start to SharedPreferences
+  static void setBreakTimeStart(String time) {
+    _prefs.setString('breakTimeStart', time);
+  }
+
+  /// Retrieve break time start from SharedPreferences
+  static String getBreakTimeStart() {
+    return _prefs.getString('breakTimeStart') ?? '12:00';
+  }
+
+  /// Save break time end to SharedPreferences
+  static void setBreakTimeEnd(String time) {
+    _prefs.setString('breakTimeEnd', time);
+  }
+
+  /// Retrieve break time end from SharedPreferences
+  static String getBreakTimeEnd() {
+    return _prefs.getString('breakTimeEnd') ?? '13:00';
+  }
+
+  /// Clear all data from SharedPreferences
+  static Future<void> clearAll() async {
+    await _prefs.clear();
+  }
+
+  static void setShowTutorial(bool show) {
+    _prefs.setBool('showTutorial', show);
+  }
+
+  static bool getShowTutorial() {
+    return _prefs.getBool('showTutorial') ?? true;
+  }
+}
diff --git a/lib/dtr_screen.dart b/lib/dtr_screen.dart
deleted file mode 100644
index bd6fe0f..0000000
--- a/lib/dtr_screen.dart
+++ /dev/null
@@ -1,255 +0,0 @@
-import 'package:flutter/material.dart';
-
-
-class DTRScreen extends StatefulWidget {
-  const DTRScreen({super.key});
-
-  @override
-  State<DTRScreen> createState() => _DTRScreenState();
-}
-
-class _DTRScreenState extends State<DTRScreen> {
-  late TimeOfDay _lunchStart;
-  late TimeOfDay _lunchEnd;
-  late TimeOfDay _scheduleStart;
-  late TimeOfDay _scheduleEnd;
-
-  late List<DTRDay> _dtrDays;
-  late DateTime _selectedDate;
-
-  @override
-  void initState() {
-    super.initState();
-    _lunchStart = const TimeOfDay(hour: 12, minute: 0);
-    _lunchEnd = const TimeOfDay(hour: 13, minute: 0);
-    _scheduleStart = const TimeOfDay(hour: 8, minute: 0);
-    _scheduleEnd = const TimeOfDay(hour: 17, minute: 0);
-
-    _dtrDays = List.generate(7, (index) => DTRDay());
-    _selectedDate = DateTime.now();
-  }
-
-  void _updateLunchStart(TimeOfDay newTime) {
-    setState(() {
-      _lunchStart = newTime;
-    });
-  }
-
-  void _updateLunchEnd(TimeOfDay newTime) {
-    setState(() {
-      _lunchEnd = newTime;
-    });
-  }
-
-  void _updateScheduleStart(TimeOfDay newTime) {
-    setState(() {
-      _scheduleStart = newTime;
-    });
-  }
-
-  void _updateScheduleEnd(TimeOfDay newTime) {
-    setState(() {
-      _scheduleEnd = newTime;
-    });
-  }
-
-  void _updateSelectedDate(DateTime newDate) {
-    setState(() {
-      _selectedDate = newDate;
-    });
-  }
-
-  void _updateDTRDay(int index, TimeOfDay timeIn, TimeOfDay timeOut) {
-    setState(() {
-      _dtrDays[index] = DTRDay(timeIn: timeIn, timeOut: timeOut);
-    });
-  }
-
-  double _calculateTotalWorkHours() {
-    double totalWorkHours = 0;
-    for (var day in _dtrDays) {
-      final DateTime inDateTime = DateTime(
-          _selectedDate.year, _selectedDate.month, _selectedDate.day, day.timeIn.hour, day.timeIn.minute);
-      final DateTime outDateTime = DateTime(
-          _selectedDate.year, _selectedDate.month, _selectedDate.day, day.timeOut.hour, day.timeOut.minute);
-      final DateTime lunchStartDateTime = DateTime(
-          _selectedDate.year, _selectedDate.month, _selectedDate.day, _lunchStart.hour, _lunchStart.minute);
-      final DateTime lunchEndDateTime = DateTime(
-          _selectedDate.year, _selectedDate.month, _selectedDate.day, _lunchEnd.hour, _lunchEnd.minute);
-      final DateTime scheduleStartDateTime = DateTime(
-          _selectedDate.year, _selectedDate.month, _selectedDate.day, _scheduleStart.hour, _scheduleStart.minute);
-      final DateTime scheduleEndDateTime = DateTime(
-          _selectedDate.year, _selectedDate.month, _selectedDate.day, _scheduleEnd.hour, _scheduleEnd.minute);
-
-      if (inDateTime.isBefore(outDateTime)) {
-        if (inDateTime.isBefore(scheduleStartDateTime)) {
-          inDateTime.add(Duration(
-              hours: scheduleStartDateTime.hour - inDateTime.hour,
-              minutes: scheduleStartDateTime.minute - inDateTime.minute));
-        }
-        if (outDateTime.isAfter(scheduleEndDateTime)) {
-          outDateTime.add(Duration(
-              hours: scheduleEndDateTime.hour - outDateTime.hour,
-              minutes: scheduleEndDateTime.minute - outDateTime.minute));
-        }
-
-        final lunchDuration = lunchEndDateTime.difference(lunchStartDateTime);
-        totalWorkHours += outDateTime.difference(inDateTime).inMinutes / 60.0;
-        totalWorkHours -= lunchDuration.inMinutes / 60.0;
-      }
-    }
-    return totalWorkHours;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('DTR System'),
-      ),
-      body: Padding(
-        padding: const EdgeInsets.all(16.0),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Text('Lunch Start: ${_lunchStart.format(context)}'),
-            ElevatedButton(
-              onPressed: () async {
-                final TimeOfDay? pickedTime = await showTimePicker(
-                  context: context,
-                  initialTime: _lunchStart,
-                );
-                if (pickedTime != null) {
-                  _updateLunchStart(pickedTime);
-                }
-              },
-              child: const Text('Select Lunch Start'),
-            ),
-            const SizedBox(height: 16),
-            Text('Lunch End: ${_lunchEnd.format(context)}'),
-            ElevatedButton(
-              onPressed: () async {
-                final TimeOfDay? pickedTime = await showTimePicker(
-                  context: context,
-                  initialTime: _lunchEnd,
-                );
-                if (pickedTime != null) {
-                  _updateLunchEnd(pickedTime);
-                }
-              },
-              child: const Text('Select Lunch End'),
-            ),
-            const SizedBox(height: 16),
-            Text('Schedule Start: ${_scheduleStart.format(context)}'),
-            ElevatedButton(
-              onPressed: () async {
-                final TimeOfDay? pickedTime = await showTimePicker(
-                  context: context,
-                  initialTime: _scheduleStart,
-                );
-                if (pickedTime != null) {
-                  _updateScheduleStart(pickedTime);
-                }
-              },
-              child: const Text('Select Schedule Start'),
-            ),
-            const SizedBox(height: 16),
-            Text('Schedule End: ${_scheduleEnd.format(context)}'),
-            ElevatedButton(
-              onPressed: () async {
-                final TimeOfDay? pickedTime = await showTimePicker(
-                  context: context,
-                  initialTime: _scheduleEnd,
-                );
-                if (pickedTime != null) {
-                  _updateScheduleEnd(pickedTime);
-                }
-              },
-              child: const Text('Select Schedule End'),
-            ),
-            const SizedBox(height: 16),
-            Text('Date: ${_selectedDate.toString().substring(0, 10)}'),
-            ElevatedButton(
-              onPressed: () async {
-                final DateTime? pickedDate = await showDatePicker(
-                  context: context,
-                  initialDate: _selectedDate,
-                  firstDate: DateTime(2000),
-                  lastDate: DateTime(2100),
-                );
-                if (pickedDate != null) {
-                  _updateSelectedDate(pickedDate);
-                }
-              },
-              child: const Text('Select Date'),
-            ),
-            const SizedBox(height: 16),
-            const Text('DTR Entries:'),
-            Expanded(
-              child: ListView.builder(
-                itemCount: _dtrDays.length,
-                itemBuilder: (context, index) {
-                  return ListTile(
-                    title: Text('Day ${index + 1}'),
-                    subtitle: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text('Time In: ${_dtrDays[index].timeIn.format(context)}'),
-                        Text('Time Out: ${_dtrDays[index].timeOut.format(context)}'),
-                      ],
-                    ),
-                    onTap: () async {
-                      final TimeOfDay? timeIn = await showTimePicker(
-                        context: context,
-                        initialTime: _dtrDays[index].timeIn,
-                      );
-                      if (timeIn != null) {
-                        final TimeOfDay? timeOut = await showTimePicker(
-                          context: context,
-                          initialTime: _dtrDays[index].timeOut,
-                        );
-                        if (timeOut != null) {
-                          _updateDTRDay(index, timeIn, timeOut);
-                        }
-                      }
-                    },
-                  );
-                },
-              ),
-            ),
-            const SizedBox(height: 16),
-            ElevatedButton(
-              onPressed: () {
-                final totalWorkHours = _calculateTotalWorkHours();
-                final formattedTotalWorkHours =
-                    totalWorkHours.toStringAsFixed(2);
-                showDialog(
-                  context: context,
-                  builder: (context) => AlertDialog(
-                    title: const Text('Total Work Hours'),
-                    content: Text(
-                        'Total Work Hours: $formattedTotalWorkHours hours'),
-                    actions: [
-                      TextButton(
-                        onPressed: () => Navigator.pop(context),
-                        child: const Text('OK'),
-                      ),
-                    ],
-                  ),
-                );
-              },
-              child: const Text('Calculate Total Work Hours'),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-class DTRDay {
-  TimeOfDay timeIn;
-  TimeOfDay timeOut;
-
-  DTRDay({this.timeIn = const TimeOfDay(hour: 8, minute: 0), this.timeOut = const TimeOfDay(hour: 17, minute: 0)});
-}
diff --git a/lib/main.dart b/lib/main.dart
index 1f644ec..e11cb32 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,9 +1,26 @@
 import 'package:flutter/material.dart';
-// import 'package:flutter_dtr_app/calculator_screen.dart';
-import 'package:flutter_dtr_app/dtr_grid.dart';
-// import 'package:flutter_dtr_app/dtr_screen.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_dtr_app/core/utilities/notification_service.dart';
+import 'package:flutter_dtr_app/data/models/daily_time_records_model.dart';
+import 'package:flutter_dtr_app/data/shared_preferences/sharedpref.dart';
+import 'package:flutter_dtr_app/core/utilities/tutorial.dart';
+import 'package:flutter_dtr_app/splash_screen.dart';
+
+void main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+
+  // Initialize shared preferences
+  SharedPref.init();
+
+  // Initialize daily time records
+  await DailyTimeRecordsModel().update();
+
+  // Initialize local notification service
+  await LocalNotificationService().init();
+
+  // Initialize tutorial
+  Tutorial.init();
 
-void main() {
   runApp(const MyApp());
 }
 
@@ -15,13 +32,8 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'DTR App',
-      theme: ThemeData(
-        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
-        useMaterial3: true,
-        appBarTheme: const AppBarTheme(
-            color: Colors.blue, titleTextStyle: TextStyle(color: Colors.white, fontSize: 24)),
-      ),
-      home: const DTRGrid(),
+      theme: themeData,
+      home: const SplashScreen(),
     );
   }
 }
diff --git a/lib/screens/home/add_entry.dart b/lib/screens/home/add_entry.dart
new file mode 100644
index 0000000..baf89a3
--- /dev/null
+++ b/lib/screens/home/add_entry.dart
@@ -0,0 +1,362 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/api/datetime_api.dart';
+import 'package:flutter_dtr_app/core/api/timeofday_api.dart';
+import 'package:flutter_dtr_app/core/constants.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_dtr_app/core/utilities/string_to_timeofday.dart';
+import 'package:flutter_dtr_app/data/database/entities/daily_time_records.dart';
+import 'package:flutter_dtr_app/data/models/daily_time_records_model.dart';
+import 'package:flutter_dtr_app/data/shared_preferences/sharedpref.dart';
+import 'package:flutter_dtr_app/widgets/back_button.dart';
+import 'package:flutter_dtr_app/widgets/configure_time_schedule.dart';
+import 'package:flutter_dtr_app/widgets/confirmation_dialog.dart';
+import 'package:flutter_dtr_app/widgets/date_picker_button.dart';
+import 'package:flutter_dtr_app/widgets/show_snackbar.dart';
+import 'package:flutter_dtr_app/widgets/text_button.dart';
+import 'package:flutter_dtr_app/widgets/time_picker_button.dart';
+import 'package:flutter_dtr_app/widgets/typography.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class AddEntry extends StatefulWidget {
+  const AddEntry({super.key, required this.date});
+
+  final DateTime date;
+
+  @override
+  State<AddEntry> createState() => _AddEntryState();
+}
+
+class _AddEntryState extends State<AddEntry> {
+  late DateTime _startDate = widget.date;
+  late DateTime _endDate = widget.date;
+
+  TimeOfDay _startTime = parseTimeOfDay(SharedPref.getDailyScheduleStart())!;
+  TimeOfDay _endTime = parseTimeOfDay(SharedPref.getDailyScheduleEnd())!;
+  TimeOfDay _breakTimeStart = parseTimeOfDay(SharedPref.getBreakTimeStart())!;
+  TimeOfDay _breakTimeEnd = parseTimeOfDay(SharedPref.getBreakTimeEnd())!;
+
+  String _notes = '';
+
+  final String _dateFormat = SharedPref.getDateFormat();
+  final String _timeFormat = SharedPref.getTimeFormat();
+  late final bool _use24HourFormat = _timeFormat == militaryHourFormat;
+
+  final DailyTimeRecordsModel _dailyTimeRecordsModel = DailyTimeRecordsModel();
+
+  late bool _editMode;
+  late DailyTimeRecord? _selectedRecord;
+
+  @override
+  void initState() {
+    super.initState();
+    String date = widget.date.formatToString();
+    _editMode = _dailyTimeRecordsModel.existingDatesNotifier.value.contains(date);
+    if (_editMode) {
+      _getExistingRecord(date);
+    }
+  }
+
+  Future<void> _getExistingRecord(String date) async {
+    _selectedRecord = await _dailyTimeRecordsModel.dailyTimeRecordsDao!.findRecordByDate(date);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      resizeToAvoidBottomInset:
+          false, // Prevent the save button to move on the top of keyboard when inputing notes
+      appBar: AppBar(
+        leading: buildBackButton(context: context, size: 24),
+        title: buildHeading1Text('${_editMode ? 'Edit' : 'Add'} Entry'),
+        actions: [
+          // Delete Button
+          Visibility(
+            visible: _editMode,
+            child: IconButton(
+                tooltip: 'Help',
+                onPressed: () {
+                  showConfirmationDialog(
+                      context: context,
+                      title: 'Delete Entry',
+                      message: 'Are you sure you want to delete this entry?',
+                      negativeText: 'No',
+                      onNegative: () {
+                        Navigator.pop(context);
+                      },
+                      positiveText: 'Yes',
+                      onPositive: () {
+                        _dailyTimeRecordsModel.dailyTimeRecordsDao!
+                            .deleteRecord(_selectedRecord!.id!);
+                        _dailyTimeRecordsModel.update();
+                        Navigator.pop(context);
+                        Navigator.pop(context);
+                      });
+                },
+                icon: SvgPicture.asset(
+                  iconDelete,
+                  width: 24,
+                  height: 24,
+                )),
+          ),
+          const SizedBox(
+            width: 20,
+          ),
+        ],
+      ),
+      body: Stack(
+        children: [
+          ListView(
+            padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 20),
+            children: [
+              _configureStartDateTime(),
+              const SizedBox(
+                height: 20,
+              ),
+              _configureEndDateTime(),
+              const SizedBox(
+                height: 20,
+              ),
+              _configureBreakTime(),
+              const SizedBox(
+                height: 20,
+              ),
+              _inputNotes()
+            ],
+          ),
+          _saveButton()
+        ],
+      ),
+    );
+  }
+
+  bool _validateTimeInputs() {
+    final bool isSameDay = _endDate.isAtSameMomentAs(_startDate);
+
+    if (_startTime == _endTime) {
+      showSnackBar(context, 'The start and end time should not be the same');
+      return true;
+    }
+
+    if (_startTime.isAfter(_endTime) && isSameDay) {
+      showSnackBar(context, 'The start time should be before the end time');
+      return true;
+    }
+
+    if (_endTime.isBefore(_startTime) && isSameDay) {
+      showSnackBar(context, 'The end time should be after the start time');
+      return true;
+    }
+
+    if (_breakTimeStart.isAfter(_breakTimeEnd)) {
+      showSnackBar(context, 'The start of break time should be before the end of break time');
+      return true;
+    }
+
+    if (_breakTimeStart.isBefore(_startTime) && isSameDay) {
+      showSnackBar(context, 'The start of break time should be after the start time');
+      return true;
+    }
+
+    if (_breakTimeEnd.isBefore(_breakTimeStart)) {
+      showSnackBar(context, 'The end of break time should be after the start of break time');
+      return true;
+    }
+
+    if (_breakTimeEnd.isAfter(_endTime) && isSameDay) {
+      showSnackBar(context, 'The end of break time should be before the end time');
+      return true;
+    }
+
+    return false;
+  }
+
+  Column _configureDateTime({
+    required String label,
+    required DateTime date,
+    required TimeOfDay time,
+    required Function(DateTime selectedDate) onDatePicked,
+    required Function(TimeOfDay selectedTime) onTimePicked,
+  }) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        buildTitleText(label),
+        Row(
+          children: [
+            Expanded(
+              child: buildDatePickerButton(
+                context: context,
+                date: date,
+                onDatePicked: onDatePicked,
+                dateFormat: _dateFormat,
+              ),
+            ),
+            const SizedBox(
+              width: 20,
+            ),
+            Expanded(
+              child: buildTimePickerButton(
+                context: context,
+                time: time,
+                onTimePicked: onTimePicked,
+                timeFormat: _timeFormat,
+                use24HourFormat: _use24HourFormat,
+              ),
+            ),
+          ],
+        )
+      ],
+    );
+  }
+
+  Column _configureStartDateTime() {
+    return _configureDateTime(
+      label: 'Start',
+      date: _startDate,
+      time: _startTime,
+      onDatePicked: (selectedDate) {
+        setState(() {
+          _startDate = selectedDate;
+          _endDate = selectedDate;
+        });
+      },
+      onTimePicked: (selectedTime) {
+        setState(() {
+          _startTime = selectedTime;
+        });
+      },
+    );
+  }
+
+  Column _configureEndDateTime() {
+    return _configureDateTime(
+      label: 'End',
+      date: _endDate,
+      time: _endTime,
+      onDatePicked: (selectedDate) {
+        if (selectedDate.isBefore(_startDate)) {
+          showSnackBar(context, 'The end date should be after the start date');
+          return;
+        }
+
+        if (selectedDate.difference(_startDate).inDays >= 2) {
+          showSnackBar(context, 'The end date can only be the day after the start date');
+          return;
+        }
+
+        setState(() {
+          _endDate = selectedDate;
+        });
+      },
+      onTimePicked: (selectedTime) {
+        setState(() {
+          _endTime = selectedTime;
+        });
+      },
+    );
+  }
+
+  Column _configureBreakTime() {
+    return buildTimeScheduleConfiguration(
+      context: context,
+      mainLabel: 'BreakTime',
+      startTimeLabel: 'Start Break Time',
+      startTimeShedule: _breakTimeStart,
+      endTimeLabel: 'End Break Time',
+      endTimeSchedule: _breakTimeEnd,
+      onSave: (start, end) {
+        setState(() {
+          _breakTimeStart = start;
+          _breakTimeEnd = end;
+        });
+      },
+      timeFormat: _timeFormat,
+      use24HourFormat: _use24HourFormat,
+      showInfo: true,
+      infoMessage: "Lunch breaks are excluded from your daily work hours.",
+    );
+  }
+
+  Column _inputNotes() {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        buildTitleText('Notes'),
+        Container(
+          height: 100,
+          decoration:
+              BoxDecoration(color: palette['inputs'], borderRadius: BorderRadius.circular(10)),
+          padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 20),
+          child: TextField(
+            onChanged: (value) {
+              setState(() {
+                _notes = value;
+              });
+            },
+            style: Theme.of(context).textTheme.bodyMedium!.copyWith(fontSize: 16),
+            minLines: 1,
+            maxLines: 5,
+            decoration: InputDecoration(
+                border: InputBorder.none,
+                hintText: 'Type here...',
+                hintStyle: Theme.of(context)
+                    .textTheme
+                    .bodyMedium!
+                    .copyWith(color: palette['disabled'], fontSize: 16)),
+          ),
+        )
+      ],
+    );
+  }
+
+  Positioned _saveButton() {
+    return Positioned(
+        right: 20,
+        left: 20,
+        bottom: 30,
+        child: buildTextButtonLarge('Save ${_editMode ? 'Changes' : ''}', onPressed: () async {
+          if (_validateTimeInputs()) return;
+
+          if (_editMode) {
+            _dailyTimeRecordsModel.dailyTimeRecordsDao!.updateRecord(DailyTimeRecord(
+              id: _selectedRecord?.id,
+              dateStart: _startDate.formatToString(),
+              dateEnd: _endDate.formatToString(),
+              startTime: _startTime.formatToString(),
+              endTime: _endTime.formatToString(),
+              breakTimeStart: _breakTimeStart.formatToString(),
+              breakTimeEnd: _breakTimeEnd.formatToString(),
+              updatedAt: DateTime.now().formatToString(),
+              notes: _notes,
+            ));
+
+            showSnackBar(context, 'Entry updated successfully');
+          } else {
+            if (_dailyTimeRecordsModel.existingDatesNotifier.value
+                .contains(_startDate.formatToString())) {
+              showSnackBar(
+                  context, 'The selected start of date is already existing in your records');
+              return;
+            }
+
+            _dailyTimeRecordsModel.dailyTimeRecordsDao!.insertRecord(DailyTimeRecord(
+              dateStart: _startDate.formatToString(),
+              dateEnd: _endDate.formatToString(),
+              startTime: _startTime.formatToString(),
+              endTime: _endTime.formatToString(),
+              breakTimeStart: _breakTimeStart.formatToString(),
+              breakTimeEnd: _breakTimeEnd.formatToString(),
+              notes: _notes,
+            ));
+
+            showSnackBar(context, 'Entry added successfully');
+          }
+
+          _dailyTimeRecordsModel.update();
+
+          Navigator.pop(context);
+        }));
+  }
+}
diff --git a/lib/screens/home/calendar_view.dart b/lib/screens/home/calendar_view.dart
new file mode 100644
index 0000000..b071cea
--- /dev/null
+++ b/lib/screens/home/calendar_view.dart
@@ -0,0 +1,541 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/api/datetime_api.dart';
+import 'package:flutter_dtr_app/core/constants.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_dtr_app/data/models/daily_time_records_model.dart';
+import 'package:flutter_dtr_app/screens/home/add_entry.dart';
+import 'package:flutter_dtr_app/core/utilities/tutorial.dart';
+import 'package:flutter_dtr_app/widgets/typography.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:overlay_tutorial/overlay_tutorial.dart';
+
+class CalendarView extends StatefulWidget {
+  const CalendarView({super.key});
+
+  @override
+  State<CalendarView> createState() => _CalendarViewState();
+}
+
+class _CalendarViewState extends State<CalendarView> {
+  final List<String> _months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  final List<String> _weeks = [
+    'SUN',
+    'MON',
+    'TUE',
+    'WED',
+    'THU',
+    'FRI',
+    'SAT',
+  ];
+
+  late DateTime _currentDate;
+  final int _minimumYear = 2000;
+  final int _maximumYear = DateTime.now().year;
+  final DailyTimeRecordsModel _dailyTimeRecordsModel = DailyTimeRecordsModel();
+
+  @override
+  void initState() {
+    super.initState();
+    _refreshCalendar();
+    Tutorial.showTutorialNotifier.addListener(_refreshCalendar);
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    Tutorial.showTutorialNotifier.removeListener(_refreshCalendar);
+  }
+
+  void _refreshCalendar() {
+    if (Tutorial.showTutorialNotifier.value) {
+      _currentDate = DateTime(2024, 07, 1);
+    } else {
+      var now = DateTime.now();
+      _currentDate = DateTime(now.year, now.month, 1);
+    }
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 20),
+          child: _buildHeader(),
+        ),
+        const SizedBox(
+          height: 20,
+        ),
+        Row(
+          children: List.generate(
+              7,
+              (index) => Expanded(
+                    child: Center(child: buildTitleText(_weeks[index], fontsize: 12)),
+                  )),
+        ),
+        const SizedBox(
+          height: 20,
+        ),
+        SizedBox(
+          height: 500,
+          child: ValueListenableBuilder<List<String>>(
+            valueListenable: _dailyTimeRecordsModel.existingDatesNotifier,
+            builder: (context, existingDates, child) {
+              return _buildCalendarGrid();
+            },
+          ),
+        ),
+      ],
+    );
+  }
+
+  Row _buildHeader() {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceAround,
+      children: [
+        _buildMonthYearDropDown(
+            selectedMonthYear: _currentDate,
+            minimumYear: _minimumYear,
+            maximumYear: _maximumYear,
+            onSelected: (DateTime date) {
+              setState(() {
+                _currentDate = date;
+              });
+            }),
+        const Spacer(),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.end,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            IconButton(
+              icon: const Icon(Icons.chevron_left),
+              onPressed: () => _changeMonth(false),
+            ),
+            IconButton(
+              icon: const Icon(Icons.chevron_right),
+              onPressed: () => _changeMonth(true),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget _buildMonthYearDropDown({
+    required DateTime selectedMonthYear,
+    required int minimumYear,
+    required int maximumYear,
+    required Function(DateTime date) onSelected,
+  }) {
+    final OverlayPortalController tooltipController = OverlayPortalController();
+    final link = LayerLink();
+    List<int> years = List.generate(maximumYear - minimumYear + 1, (index) => minimumYear + index);
+    return CompositedTransformTarget(
+      link: link,
+      child: OverlayPortal(
+        controller: tooltipController,
+        overlayChildBuilder: (BuildContext context) {
+          return CompositedTransformFollower(
+            link: link,
+            targetAnchor: Alignment.bottomLeft,
+            child: Align(
+              alignment: AlignmentDirectional.topStart,
+              child: Card(
+                elevation: 5,
+                child: Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 20),
+                  width: 300,
+                  height: 300,
+                  decoration: BoxDecoration(
+                    color: Colors.white,
+                    borderRadius: BorderRadius.circular(10),
+                  ),
+                  child: DefaultTabController(
+                      length: 2,
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        mainAxisAlignment: MainAxisAlignment.start,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Center(
+                            child: TabBar(
+                              tabAlignment: TabAlignment.center,
+                              dividerColor: Colors.transparent,
+                              indicatorColor: palette['secondary'],
+                              tabs: [
+                                buildRegularText('Month', fontSize: 16),
+                                buildRegularText('Year', fontSize: 16),
+                              ],
+                            ),
+                          ),
+                          const SizedBox(
+                            height: 10,
+                          ),
+                          Expanded(
+                            child: TabBarView(
+                              children: [
+                                // Month Grid View
+                                GridView.count(
+                                  crossAxisCount: 3,
+                                  childAspectRatio: 1.75,
+                                  children: List.generate(
+                                      _months.length,
+                                      (index) => InkWell(
+                                            borderRadius: BorderRadius.circular(10),
+                                            onTap: () {
+                                              onSelected(
+                                                  DateTime(selectedMonthYear.year, index + 1));
+                                            },
+                                            child: Container(
+                                              alignment: Alignment.center,
+                                              decoration: BoxDecoration(
+                                                  color: (index + 1) == selectedMonthYear.month
+                                                      ? palette['primary']
+                                                      : null,
+                                                  borderRadius: BorderRadius.circular(10)),
+                                              child: buildRegularText(_months[index],
+                                                  fontSize: 16,
+                                                  color: (index + 1) == selectedMonthYear.month
+                                                      ? Colors.white
+                                                      : palette['dark']),
+                                            ),
+                                          )),
+                                ),
+                                // Year Grid View
+                                GridView.count(
+                                  crossAxisCount: 3,
+                                  childAspectRatio: 1.75,
+                                  children: List.generate(
+                                      years.length,
+                                      (index) => InkWell(
+                                            borderRadius: BorderRadius.circular(10),
+                                            onTap: () {
+                                              onSelected(
+                                                  DateTime(years[index], selectedMonthYear.month));
+                                            },
+                                            child: Container(
+                                              alignment: Alignment.center,
+                                              decoration: BoxDecoration(
+                                                  color: years[index] == selectedMonthYear.year
+                                                      ? palette['primary']
+                                                      : null,
+                                                  borderRadius: BorderRadius.circular(10)),
+                                              child: buildRegularText(years[index].toString(),
+                                                  fontSize: 16,
+                                                  color: years[index] == selectedMonthYear.year
+                                                      ? Colors.white
+                                                      : palette['dark']),
+                                            ),
+                                          )),
+                                ),
+                              ],
+                            ),
+                          )
+                        ],
+                      )),
+                ),
+              ),
+            ),
+          );
+        },
+        child: StatefulBuilder(builder: (_, setState) {
+          return InkWell(
+            borderRadius: BorderRadius.circular(5),
+            onTap: () {
+              setState(() {
+                tooltipController.toggle();
+              });
+            },
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.start,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                buildHeading3Text(
+                    '${_months[selectedMonthYear.month - 1]} ${selectedMonthYear.year}'),
+                const SizedBox(
+                  width: 10,
+                ),
+                Icon(
+                  tooltipController.isShowing
+                      ? Icons.arrow_drop_up_rounded
+                      : Icons.arrow_drop_down_rounded,
+                  size: 24,
+                ),
+              ],
+            ),
+          );
+        }),
+      ),
+    );
+  }
+
+  void _changeMonth(bool isNext) {
+    int newMonth = _currentDate.month + (isNext ? 1 : -1);
+    int year = _currentDate.year;
+    if (newMonth == 0) {
+      if (year == _minimumYear) {
+        return;
+      }
+      _currentDate = DateTime(_currentDate.year - 1, 12, 1);
+    } else if (newMonth == 13) {
+      if (year == _maximumYear) {
+        return;
+      }
+      _currentDate = DateTime(_currentDate.year + 1, 1, 1);
+    } else {
+      _currentDate = DateTime(_currentDate.year, newMonth, 1);
+    }
+    setState(() {});
+  }
+
+  Widget _buildCalendarGrid() {
+    // Get the day of the first day of a month
+    // Ex: July 1, 2024 would result to 1 and then add 1 to make it 2
+    // The Sunday will be the first day of the week so it would be 1
+    final firstDayOfMonthWeekday = _currentDate.weekday == 7 ? 1 : _currentDate.weekday + 1;
+
+    // Get the total days in a month
+    final daysInMonth = DateTime(_currentDate.year, _currentDate.month + 1, 0).day;
+
+    // Calculate the total number of cells needed (including padding days)
+    int totalCells = (firstDayOfMonthWeekday - 1) +
+        daysInMonth +
+        (7 - ((firstDayOfMonthWeekday + daysInMonth - 1) % 7));
+
+    return GestureDetector(
+      onHorizontalDragEnd: (details) {
+        if (details.primaryVelocity! < 0) {
+          // Swiped left
+          // Next
+          _changeMonth(true);
+        } else if (details.primaryVelocity! > 0) {
+          // Swiped right
+          // Previous
+          _changeMonth(false);
+        }
+      },
+      child: GridView.count(
+        crossAxisCount: 7,
+        mainAxisSpacing: 20,
+        children: List.generate(totalCells, (index) {
+          int day;
+
+          if (index < firstDayOfMonthWeekday - 1) {
+            // Previous month's day
+            final previousMonth = DateTime(_currentDate.year, _currentDate.month, 0);
+            final previousMonthDays = previousMonth.day;
+            day = previousMonthDays - (firstDayOfMonthWeekday - 2 - index);
+            return _buildDayCell(DateTime(_currentDate.year, _currentDate.month - 1, day),
+                isPreviousMonth: true);
+          } else if (index >= firstDayOfMonthWeekday - 1 + daysInMonth) {
+            // Next month's day
+            day = index - (firstDayOfMonthWeekday - 2 + daysInMonth);
+            return _buildDayCell(DateTime(_currentDate.year, _currentDate.month + 1, day),
+                isNextMonth: true);
+          } else {
+            // Current month's day
+            day = index - (firstDayOfMonthWeekday - 2);
+            return _buildDayCell(DateTime(_currentDate.year, _currentDate.month, day));
+          }
+        }),
+      ),
+    );
+  }
+
+  Widget _buildDayCell(DateTime date, {bool isPreviousMonth = false, bool isNextMonth = false}) {
+    // Customize the text color based on the month
+    final dateToday = DateTime.now();
+    final bool isCurrentDate =
+        date.isAtSameMomentAs(DateTime(dateToday.year, dateToday.month, dateToday.day));
+    final bool isFuture = date.isAfter(DateTime(dateToday.year, dateToday.month, dateToday.day));
+    final List<String> existingDates = _dailyTimeRecordsModel.existingDatesNotifier.value;
+    final bool isInRecord = existingDates.contains(date.formatToString());
+
+    final bool isFirstDayCurrentMonth =
+        date.isAtSameMomentAs(DateTime(dateToday.year, dateToday.month - 1, 1));
+    final bool is31thCurrentMonth =
+        date.isAtSameMomentAs(DateTime(dateToday.year, dateToday.month - 1, 31));
+
+    final link = LayerLink();
+
+    Color? textColor;
+    if (isPreviousMonth || isNextMonth) {
+      textColor = palette['faded'];
+    } else if (isInRecord) {
+      textColor = Colors.white;
+    } else {
+      textColor = palette['dark'];
+    }
+
+    if (is31thCurrentMonth && Tutorial.showTutorialNotifier.value) {
+      return _dateTutorialPage1(link, date);
+    }
+
+    if (isFirstDayCurrentMonth && Tutorial.showTutorialNotifier.value) {
+      return _dateTutorialPage2(link, date);
+    }
+
+    return InkWell(
+      borderRadius: BorderRadius.circular(180),
+      onTap: () async {
+        if (isFuture) {
+          return;
+        }
+        await Navigator.push(
+            context,
+            MaterialPageRoute(
+              builder: (context) => AddEntry(date: date),
+            ));
+      },
+      child: Center(
+        child: Container(
+            width: 40,
+            height: 50,
+            alignment: Alignment.center,
+            decoration: BoxDecoration(
+              border: isCurrentDate ? Border.all(color: palette['secondary']!, width: 3) : null,
+              borderRadius: BorderRadius.circular(180),
+              color: isInRecord && !(isPreviousMonth || isNextMonth) ? palette['primary'] : null,
+            ),
+            child: buildRegularText(date.day.toString(), color: textColor, fontSize: 18)),
+      ),
+    );
+  }
+
+  Widget _dateTutorialPage2(LayerLink link, DateTime date) {
+    return CompositedTransformTarget(
+      link: link,
+      child: ValueListenableBuilder(
+        valueListenable: Tutorial.currentTutorialPageNotifier,
+        builder: (context, value, child) {
+          return OverlayTutorialHole(
+            enabled: Tutorial.showTutorialNotifier.value && value == 2,
+            overlayTutorialEntry: OverlayTutorialCircleEntry(radius: 30, overlayTutorialHints: [
+              OverlayTutorialWidgetHint(
+                builder: (context, entryRect) {
+                  return Material(
+                    color: Colors.transparent,
+                    child: CompositedTransformFollower(
+                      link: link,
+                      targetAnchor: Alignment.bottomLeft,
+                      followerAnchor: Alignment.topLeft,
+                      child: Container(
+                          width: 200,
+                          margin: const EdgeInsets.symmetric(horizontal: 0, vertical: 30),
+                          child: Column(
+                            mainAxisAlignment: MainAxisAlignment.start,
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            mainAxisSize: MainAxisSize.min,
+                            children: [
+                              SvgPicture.asset(
+                                iconGuideArrowUp,
+                                width: 48,
+                                height: 48,
+                              ),
+                              const SizedBox(
+                                height: 10,
+                              ),
+                              buildTitleText(
+                                'Filled date indicates that there is already a record or an entry.',
+                                fontsize: 20,
+                                color: Colors.white,
+                              ),
+                            ],
+                          )),
+                    ),
+                  );
+                },
+              ),
+            ]),
+            child: Center(
+              child: Container(
+                  width: 40,
+                  height: 50,
+                  alignment: Alignment.center,
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(180),
+                    color: palette['primary'],
+                  ),
+                  child: buildRegularText(date.day.toString(), color: Colors.white, fontSize: 18)),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _dateTutorialPage1(LayerLink link, DateTime date) {
+    return CompositedTransformTarget(
+      link: link,
+      child: ValueListenableBuilder(
+        valueListenable: Tutorial.currentTutorialPageNotifier,
+        builder: (context, value, child) {
+          return OverlayTutorialHole(
+            enabled: Tutorial.showTutorialNotifier.value && value == 1,
+            overlayTutorialEntry: OverlayTutorialCircleEntry(radius: 30, overlayTutorialHints: [
+              OverlayTutorialWidgetHint(
+                builder: (context, entryRect) {
+                  return Material(
+                    color: Colors.transparent,
+                    child: CompositedTransformFollower(
+                      link: link,
+                      targetAnchor: Alignment.bottomLeft,
+                      followerAnchor: Alignment.bottomLeft,
+                      child: Container(
+                          width: 200,
+                          margin: const EdgeInsets.symmetric(horizontal: 0, vertical: 70),
+                          child: Column(
+                            mainAxisAlignment: MainAxisAlignment.start,
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            mainAxisSize: MainAxisSize.min,
+                            children: [
+                              buildTitleText(
+                                'Tap either a date or the floating action button to record your time in and out, as well as break time.',
+                                fontsize: 20,
+                                color: Colors.white,
+                              ),
+                              const SizedBox(
+                                height: 10,
+                              ),
+                              SvgPicture.asset(
+                                iconGuideArrowDown,
+                                width: 48,
+                                height: 48,
+                              ),
+                            ],
+                          )),
+                    ),
+                  );
+                },
+              ),
+            ]),
+            child: Center(
+              child: Container(
+                  width: 40,
+                  height: 50,
+                  alignment: Alignment.center,
+                  child:
+                      buildRegularText(date.day.toString(), color: palette['dark'], fontSize: 18)),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}
diff --git a/lib/dtr_grid.dart b/lib/screens/home/dtr_grid.dart
similarity index 79%
rename from lib/dtr_grid.dart
rename to lib/screens/home/dtr_grid.dart
index d6ab578..119014f 100644
--- a/lib/dtr_grid.dart
+++ b/lib/screens/home/dtr_grid.dart
@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_dtr_app/custom_widgets/bordered_container.dart';
-import 'package:flutter_dtr_app/custom_widgets/dtr_cell.dart';
-import 'package:flutter_dtr_app/database/json_serialization.dart';
+import 'package:flutter_dtr_app/widgets/bordered_container.dart';
+import 'package:flutter_dtr_app/widgets/dtr_cell.dart';
+import 'package:flutter_dtr_app/data/database/json_serialization.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
-import 'database/dtr_day.dart';
+import '../../data/database/dtr_day.dart';
 
 class DTRGrid extends StatefulWidget {
   const DTRGrid({super.key});
@@ -164,61 +164,18 @@ class _DTRGridState extends State<DTRGrid> {
     prefs.setString('dtr', json);
   }
 
-  // Show dialog for a quick quide
-  void _showGuide(BuildContext context) {
-    showDialog(
-      context: context,
-      builder: (BuildContext context) {
-        return AlertDialog(
-          title: const Center(child: Text('Quick Guide'),),
-          content: const SingleChildScrollView(
-            child: ListBody(
-              children: <Widget>[
-                Text('1. Lunch breaks are excluded from your daily work hours.'),
-                SizedBox(height: 10,),
-                Text('2. Daily work hours are calculated from the start of your schedule to its end.'),
-                SizedBox(height: 10,),
-                Text('3. Gray cells indicate blank records. Tap to set the date, time in, and time out.'),
-              ],
-            ),
-          ),
-          actions: <Widget>[
-            Center(child: TextButton(
-              onPressed: () {
-                Navigator.of(context).pop();
-              },
-              child: const Text('Close'),
-            ),)
-          ],
-        );
-      },
-    );
-  }
-
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      // AppBar
-      appBar: AppBar(
-        title: const Text('Daily Time Record'),
-        actions: [
-          // Help Button
-          IconButton(
-            tooltip: 'Help',
-              onPressed: () => _showGuide(context),
-              icon: const Icon(Icons.help, color: Colors.white,))
-        ],
-      ),
-
       // Main Content
       body: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Padding(
             padding: const EdgeInsets.all(10),
-            child: 
-            // Configuration Section
-            Wrap(
+            child:
+                // Configuration Section
+                Wrap(
               spacing: 25,
               runSpacing: 25,
               children: [
@@ -293,7 +250,7 @@ class _DTRGridState extends State<DTRGrid> {
               ],
             ),
           ),
-          
+
           const SizedBox(height: 25),
 
           // DTR Table
@@ -384,49 +341,56 @@ class _DTRGridState extends State<DTRGrid> {
                                 7,
                                 (dayIndex) {
                                   final day = _dtrWeeks[weekIndex][dayIndex];
-                                  return Tooltip(message: 'Edit', child: GestureDetector(
-                                      onTap: () async {
-                                        final DateTime? date =
-                                            await showDatePicker(
-                                          helpText: 'Select Date',
-                                          context: context,
-                                          initialDate: day.date,
-                                          firstDate: DateTime(2000),
-                                          lastDate: DateTime(2100),
-                                        );
-                                        if (date != null) {
-                                          final TimeOfDay? timeIn =
-                                              await showTimePicker(
-                                            helpText: 'Select Time In',
+                                  return Tooltip(
+                                    message: 'Edit',
+                                    child: GestureDetector(
+                                        onTap: () async {
+                                          final DateTime? date =
+                                              await showDatePicker(
+                                            helpText: 'Select Date',
                                             context: context,
-                                            initialTime: day.timeIn,
+                                            initialDate: day.date,
+                                            firstDate: DateTime(2000),
+                                            lastDate: DateTime(2100),
                                           );
-
-                                          if (timeIn != null) {
-                                            final TimeOfDay? timeOut =
+                                          if (date != null) {
+                                            final TimeOfDay? timeIn =
                                                 await showTimePicker(
-                                              helpText: 'Select Time Out',
+                                              helpText: 'Select Time In',
                                               context: context,
-                                              initialTime: day.timeOut,
+                                              initialTime: day.timeIn,
                                             );
-                                            if (timeOut != null) {
-                                              _updateDTRDay(weekIndex, dayIndex,
-                                                  date, timeIn, timeOut);
+
+                                            if (timeIn != null) {
+                                              final TimeOfDay? timeOut =
+                                                  await showTimePicker(
+                                                helpText: 'Select Time Out',
+                                                context: context,
+                                                initialTime: day.timeOut,
+                                              );
+                                              if (timeOut != null) {
+                                                _updateDTRDay(
+                                                    weekIndex,
+                                                    dayIndex,
+                                                    date,
+                                                    timeIn,
+                                                    timeOut);
+                                              }
                                             }
                                           }
-                                        }
-                                      },
-                                      child: DTRCell(
-                                        dateText: day.date != null
-                                            ? day.getFormattedDate()
-                                            : '',
-                                        timeInText: day.timeIn.hour > 0
-                                            ? day.timeIn.format(context)
-                                            : '',
-                                        timeOutText: day.timeOut.hour > 0
-                                            ? day.timeOut.format(context)
-                                            : '',
-                                      )),);
+                                        },
+                                        child: DTRCell(
+                                          dateText: day.date != null
+                                              ? day.getFormattedDate()
+                                              : '',
+                                          timeInText: day.timeIn.hour > 0
+                                              ? day.timeIn.format(context)
+                                              : '',
+                                          timeOutText: day.timeOut.hour > 0
+                                              ? day.timeOut.format(context)
+                                              : '',
+                                        )),
+                                  );
                                 },
                               ),
                               BorderedContainer(
@@ -493,4 +457,4 @@ class _DTRGridState extends State<DTRGrid> {
       ),
     );
   }
-}
+}
\ No newline at end of file
diff --git a/lib/screens/home/home_screen.dart b/lib/screens/home/home_screen.dart
new file mode 100644
index 0000000..accc3b3
--- /dev/null
+++ b/lib/screens/home/home_screen.dart
@@ -0,0 +1,160 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/constants.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_dtr_app/core/utilities/double_to_time.dart';
+import 'package:flutter_dtr_app/data/models/daily_time_records_model.dart';
+import 'package:flutter_dtr_app/screens/home/add_entry.dart';
+import 'package:flutter_dtr_app/screens/home/calendar_view.dart';
+import 'package:flutter_dtr_app/core/utilities/tutorial.dart';
+import 'package:flutter_dtr_app/widgets/data_overview_container.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:overlay_tutorial/overlay_tutorial.dart';
+
+class HomeScreen extends StatefulWidget {
+  const HomeScreen({super.key});
+
+  @override
+  State<HomeScreen> createState() => _HomeScreenState();
+}
+
+class _HomeScreenState extends State<HomeScreen> {
+  final DailyTimeRecordsModel _dailyTimeRecordsModel = DailyTimeRecordsModel();
+  final link = LayerLink();
+
+  @override
+  void initState() {
+    super.initState();
+
+    Tutorial.showTutorialNotifier.addListener(_refreshTutorial);
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    Tutorial.showTutorialNotifier.removeListener(_refreshTutorial);
+  }
+
+  void _refreshTutorial() {
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        ListView(
+          padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 20),
+          children: [
+            _overviewDatas(),
+            const SizedBox(
+              height: 40,
+            ),
+            ValueListenableBuilder(
+              valueListenable: _dailyTimeRecordsModel.existingDatesNotifier,
+              builder: (context, value, child) {
+                return const CalendarView();
+              },
+            ),
+          ],
+        ),
+        _floatingActionButton()
+      ],
+    );
+  }
+
+  Widget _floatingActionButton() {
+    return Positioned(
+      bottom: 40,
+      right: 30,
+      child: CompositedTransformTarget(
+        link: link,
+        child: ValueListenableBuilder(
+          valueListenable: Tutorial.currentTutorialPageNotifier,
+          builder: (context, value, child) {
+            return OverlayTutorialHole(
+              enabled: Tutorial.showTutorialNotifier.value && value == 1,
+              overlayTutorialEntry: OverlayTutorialCircleEntry(radius: 40, overlayTutorialHints: [
+                OverlayTutorialWidgetHint(
+                  builder: (context, entryRect) {
+                    return Material(
+                      color: Colors.transparent,
+                      child: CompositedTransformFollower(
+                        link: link,
+                        targetAnchor: Alignment.bottomLeft,
+                        followerAnchor: Alignment.bottomLeft,
+                        child: Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 80),
+                          child: SvgPicture.asset(
+                            iconGuideArrowDown,
+                            width: 48,
+                            height: 48,
+                          ),
+                        ),
+                      ),
+                    );
+                  },
+                )
+              ]),
+              child: FloatingActionButton(
+                onPressed: () async {
+                  await Navigator.push(
+                      context,
+                      MaterialPageRoute(
+                        builder: (context) => AddEntry(
+                          date: DateTime.now(),
+                        ),
+                      ));
+                },
+                child: const Icon(
+                  Icons.add,
+                  size: 36,
+                  color: Colors.white,
+                ),
+              ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+  Row _overviewDatas() {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        Expanded(
+            child: ValueListenableBuilder(
+          valueListenable: _dailyTimeRecordsModel.existingDatesNotifier,
+          builder: (context, dates, child) {
+            return buildDataOverviewContainer(
+                icon: SvgPicture.asset(
+                  iconCalendar,
+                  width: 26,
+                  height: 26,
+                  colorFilter: ColorFilter.mode(palette['icons']!, BlendMode.srcIn),
+                ),
+                title: dates.length.toString(),
+                subtitle: 'Total Days Worked');
+          },
+        )),
+        const SizedBox(
+          width: 20,
+        ),
+        Expanded(
+            child: ValueListenableBuilder(
+                valueListenable: _dailyTimeRecordsModel.totalHoursNotifier,
+                builder: (context, hours, child) {
+                  return buildDataOverviewContainer(
+                      icon: Icon(
+                        Icons.schedule,
+                        size: 26,
+                        color: palette['icons'],
+                      ),
+                      title: hours == 0 ? '0' : convertDoubleToTime(hours),
+                      subtitle: 'Total Hours');
+                })),
+      ],
+    );
+  }
+}
diff --git a/lib/screens/home/user_guide.dart b/lib/screens/home/user_guide.dart
new file mode 100644
index 0000000..06f4031
--- /dev/null
+++ b/lib/screens/home/user_guide.dart
@@ -0,0 +1,51 @@
+// Show dialog for a quick quide
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_dtr_app/widgets/typography.dart';
+
+const List<String> userGuide = [
+  "Daily work hours are calculated from the start of your schedule to its end.",
+  "Lunch breaks are excluded from your daily work hours.",
+  "Tap either a date or the floating action button to record your time in and out, as well as break time.",
+  "Filled date indicates that there is already a record or an entry.",
+];
+
+void showGuide(BuildContext context) {
+  showDialog(
+    context: context,
+    builder: (BuildContext context) {
+      return Dialog(
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              Align(
+                alignment: Alignment.topRight,
+                child: IconButton(
+                    iconSize: 24,
+                    color: palette['dark'],
+                    onPressed: () {
+                      Navigator.pop(context, false);
+                    },
+                    icon: const Icon(Icons.close_rounded)),
+              ),
+              Center(child: buildHeading3Text('Quick Guide')),
+              ...List.generate(
+                  userGuide.length,
+                  (index) => Padding(
+                        padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
+                        child: buildRegularText("${index + 1}. ${userGuide[index]}", fontSize: 16),
+                      )),
+              const SizedBox(
+                height: 30,
+              ),
+            ],
+          ),
+        ),
+      );
+    },
+  );
+}
diff --git a/lib/screens/main_screen.dart b/lib/screens/main_screen.dart
new file mode 100644
index 0000000..d5361d3
--- /dev/null
+++ b/lib/screens/main_screen.dart
@@ -0,0 +1,428 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/constants.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_dtr_app/data/shared_preferences/sharedpref.dart';
+import 'package:flutter_dtr_app/screens/home/user_guide.dart';
+import 'package:flutter_dtr_app/screens/report/report.dart';
+import 'package:flutter_dtr_app/screens/settings/settings.dart';
+import 'package:flutter_dtr_app/screens/home/home_screen.dart';
+import 'package:flutter_dtr_app/core/utilities/tutorial.dart';
+import 'package:flutter_dtr_app/widgets/text_button.dart';
+import 'package:flutter_dtr_app/widgets/typography.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:overlay_tutorial/overlay_tutorial.dart';
+
+/// The app's main screen where the bottom navigation bar is displayed
+class MainScreen extends StatefulWidget {
+  const MainScreen({super.key});
+
+  @override
+  State<MainScreen> createState() => _MainScreenState();
+}
+
+class _MainScreenState extends State<MainScreen> {
+  int _selectedIndex = 1;
+  bool _startTutorial = false;
+
+  @override
+  void initState() {
+    super.initState();
+
+    if (Tutorial.showTutorialNotifier.value) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        _showTutorialDialog();
+      });
+    }
+  }
+
+  void _onItemTapped(int index) {
+    setState(() {
+      _selectedIndex = index;
+    });
+  }
+
+  Future<void> _showTutorialDialog() async {
+    final bool? result = await showDialog<bool>(
+      context: context,
+      builder: (context) => Dialog(
+        shadowColor: palette['dark'],
+        elevation: 2,
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
+        child: SizedBox(
+          width: 300,
+          child: Stack(
+            children: [
+              Positioned(
+                top: 10,
+                right: 10,
+                child: IconButton(
+                    iconSize: 24,
+                    color: palette['dark'],
+                    onPressed: () {
+                      Navigator.pop(context, false);
+                    },
+                    icon: const Icon(Icons.close_rounded)),
+              ),
+              Container(
+                padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Center(
+                      child: Image.asset(
+                        partyCone,
+                        width: 52,
+                        height: 52,
+                      ),
+                    ),
+                    const SizedBox(
+                      height: 10,
+                    ),
+                    Center(child: buildHeading3Text('Welcome To DTR')),
+                    Center(
+                      child: buildRegularText(
+                          "We’ll guide you through a quick tour to get started.",
+                          isCentered: true),
+                    ),
+                    const SizedBox(
+                      height: 20,
+                    ),
+                    buildTextButtonSmall("Let's Start", onPressed: () {
+                      Navigator.pop(context, true);
+                    })
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+
+    if (result != null) {
+      if (result) {
+        Tutorial.showTutorialNotifier.value = true;
+        _startTutorial = true;
+      } else {
+        Tutorial.showTutorialNotifier.value = false;
+        SharedPref.setShowTutorial(false);
+      }
+      setState(() {});
+    }
+  }
+
+  void _showGetStartDialog() {
+    showDialog(
+      context: context,
+      builder: (context) => Dialog(
+        shadowColor: palette['dark'],
+        elevation: 2,
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
+        child: Container(
+          width: 300,
+          padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            mainAxisAlignment: MainAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Center(
+                child: Image.asset(
+                  clappingHands,
+                  width: 52,
+                  height: 52,
+                ),
+              ),
+              const SizedBox(
+                height: 10,
+              ),
+              Center(child: buildHeading3Text("You're All Set")),
+              Center(
+                child: buildRegularText(
+                    "You now know the basics of using DTR. Start tracking your time effortlessly.",
+                    isCentered: true),
+              ),
+              const SizedBox(
+                height: 20,
+              ),
+              buildTextButtonSmall("Get Started", onPressed: () {
+                Navigator.pop(context);
+              })
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _nextTutorial() {
+    Tutorial.currentTutorialPageNotifier.value++;
+
+    if (Tutorial.currentTutorialPageNotifier.value > Tutorial.maxTutorialPage) {
+      Tutorial.showTutorialNotifier.value = false;
+      Tutorial.currentTutorialPageNotifier.value = 1;
+      _startTutorial = false;
+      SharedPref.setShowTutorial(false);
+      _showGetStartDialog();
+    }
+
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final screens = [
+      const ReportScreen(),
+      // const DTRGrid(),
+      const HomeScreen(),
+      const SettingsScreen()
+    ];
+
+    final appBars = [
+      _reportAppBar(),
+      _homeAppBar(),
+      _settingsAppBar(),
+    ];
+
+    return GestureDetector(
+      onTap: () {
+        if (Tutorial.showTutorialNotifier.value) {
+          _nextTutorial();
+        }
+      },
+      child: OverlayTutorialScope(
+        overlayColor: Colors.black54,
+        enabled: _startTutorial && Tutorial.showTutorialNotifier.value,
+        child: AbsorbPointer(
+          absorbing: _startTutorial && Tutorial.showTutorialNotifier.value,
+          child: Scaffold(
+            appBar: appBars.elementAt(_selectedIndex),
+            body: Center(
+              child: screens.elementAt(_selectedIndex),
+            ),
+            bottomNavigationBar: _bottomNavBar(_selectedIndex),
+          ),
+        ),
+      ),
+    );
+  }
+
+  AppBar _settingsAppBar() {
+    return AppBar(
+      title: Padding(
+        padding: const EdgeInsets.fromLTRB(20, 0, 0, 0),
+        child: buildHeading1Text('Settings'),
+      ),
+    );
+  }
+
+  AppBar _homeAppBar() {
+    return AppBar(
+      title: Padding(
+        padding: const EdgeInsets.fromLTRB(20, 0, 0, 0),
+        child: buildHeading1Text('Timesheet'),
+      ),
+      actions: [
+        // Help Button
+        CircleAvatar(
+          backgroundColor: palette['overview'],
+          child: IconButton(
+              tooltip: 'Help',
+              onPressed: () => showGuide(context),
+              icon: Icon(
+                Icons.question_mark_rounded,
+                color: palette['primary'],
+              )),
+        ),
+        const SizedBox(
+          width: 20,
+        ),
+      ],
+    );
+  }
+
+  AppBar _reportAppBar() {
+    return AppBar(
+      title: Padding(
+        padding: const EdgeInsets.fromLTRB(20, 0, 0, 0),
+        child: buildHeading1Text('Report'),
+      ),
+    );
+  }
+
+  Widget _bottomNavBar(int selectedIndex) {
+    return Container(
+      height: 60,
+      decoration: const BoxDecoration(
+        color: Colors.white,
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black,
+            blurRadius: 2.0,
+            spreadRadius: 0.0,
+            offset: Offset(0, 2), // Top
+          )
+        ],
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          _navReport(selectedIndex),
+          _navHome(selectedIndex),
+          _navSettings(selectedIndex),
+        ],
+      ),
+    );
+  }
+
+  Widget _navSettings(int selectedIndex) {
+    return Expanded(
+      child: InkWell(
+        onTap: () => _onItemTapped(2),
+        child: OverlayTutorialHole(
+          enabled: Tutorial.showTutorialNotifier.value &&
+              Tutorial.currentTutorialPageNotifier.value == 4,
+          overlayTutorialEntry: OverlayTutorialRectEntry(overlayTutorialHints: [
+            OverlayTutorialWidgetHint(
+              builder: (context, entryRect) {
+                return Material(
+                  color: Colors.transparent,
+                  child: Container(
+                    alignment: Alignment.bottomRight,
+                    margin: const EdgeInsets.symmetric(horizontal: 50, vertical: 70),
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.start,
+                      crossAxisAlignment: CrossAxisAlignment.end,
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        SizedBox(
+                          width: 200,
+                          child: buildTitleText(
+                              'Tap to select date and time formats, set daily and break schedules, or clear all entries.',
+                              fontsize: 20,
+                              color: Colors.white,
+                              isCentered: true),
+                        ),
+                        const SizedBox(
+                          height: 10,
+                        ),
+                        SvgPicture.asset(
+                          iconGuideArrowDown,
+                          width: 48,
+                          height: 48,
+                        )
+                      ],
+                    ),
+                  ),
+                );
+              },
+            )
+          ]),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Icon(
+                Icons.settings_rounded,
+                size: 24,
+                color: selectedIndex == 2 ? palette['secondary'] : palette['disabled'],
+              ),
+              buildTitleText('Settings',
+                  fontsize: 14,
+                  color: selectedIndex == 2 ? palette['secondary'] : palette['disabled']),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _navHome(int selectedIndex) {
+    return Expanded(
+      child: InkWell(
+        onTap: () => _onItemTapped(1),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SvgPicture.asset(
+              iconHome,
+              width: 24,
+              height: 24,
+              colorFilter: ColorFilter.mode(
+                  _selectedIndex == 1 ? palette['secondary']! : palette['disabled']!,
+                  BlendMode.srcIn),
+            ),
+            buildTitleText('Home',
+                fontsize: 14,
+                color: selectedIndex == 1 ? palette['secondary'] : palette['disabled']),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _navReport(int selectedIndex) {
+    return Expanded(
+      child: InkWell(
+        onTap: () => _onItemTapped(0),
+        child: OverlayTutorialHole(
+          enabled: Tutorial.showTutorialNotifier.value &&
+              Tutorial.currentTutorialPageNotifier.value == 3,
+          overlayTutorialEntry: OverlayTutorialRectEntry(overlayTutorialHints: [
+            OverlayTutorialWidgetHint(
+              builder: (context, entryRect) {
+                return Material(
+                  color: Colors.transparent,
+                  child: Container(
+                    alignment: Alignment.bottomLeft,
+                    padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 70),
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.start,
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        SizedBox(
+                          width: 200,
+                          child: buildTitleText(
+                              'Tap to convert your entries into a table format based on your preferred date range.',
+                              fontsize: 20,
+                              color: Colors.white,
+                              isCentered: true),
+                        ),
+                        const SizedBox(
+                          height: 10,
+                        ),
+                        SvgPicture.asset(
+                          iconGuideArrowDown,
+                          width: 48,
+                          height: 48,
+                        )
+                      ],
+                    ),
+                  ),
+                );
+              },
+            )
+          ]),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Icon(
+                Icons.view_list_rounded,
+                size: 24,
+                color: selectedIndex == 0 ? palette['secondary'] : palette['disabled'],
+              ),
+              buildTitleText('Report',
+                  fontsize: 14,
+                  color: selectedIndex == 0 ? palette['secondary'] : palette['disabled']),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/report/report.dart b/lib/screens/report/report.dart
new file mode 100644
index 0000000..66c239b
--- /dev/null
+++ b/lib/screens/report/report.dart
@@ -0,0 +1,335 @@
+import 'dart:io';
+
+import 'package:device_info_plus/device_info_plus.dart';
+import 'package:excel/excel.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/api/datetime_api.dart';
+import 'package:flutter_dtr_app/core/constants.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_dtr_app/core/utilities/date_range.dart';
+import 'package:flutter_dtr_app/core/utilities/double_to_time.dart';
+import 'package:flutter_dtr_app/core/utilities/notification_service.dart';
+import 'package:flutter_dtr_app/core/utilities/string_date_time_formatter.dart';
+import 'package:flutter_dtr_app/data/database/daos/daily_time_records_dao.dart';
+import 'package:flutter_dtr_app/data/database/entities/daily_time_records.dart';
+import 'package:flutter_dtr_app/data/models/daily_time_records_model.dart';
+import 'package:flutter_dtr_app/data/shared_preferences/sharedpref.dart';
+import 'package:flutter_dtr_app/widgets/data_overview_container.dart';
+import 'package:flutter_dtr_app/widgets/date_picker_button.dart';
+import 'package:flutter_dtr_app/widgets/show_snackbar.dart';
+import 'package:flutter_dtr_app/widgets/text_button.dart';
+import 'package:flutter_dtr_app/widgets/typography.dart';
+import 'package:flutter_svg/svg.dart';
+
+import 'package:path_provider/path_provider.dart';
+import 'package:permission_handler/permission_handler.dart';
+
+enum ReportOptions { lastWeek, thisWeek, thisMonth, thisYear, custom }
+
+class ReportScreen extends StatefulWidget {
+  const ReportScreen({super.key});
+
+  @override
+  State<ReportScreen> createState() => _ReportScreenState();
+}
+
+class _ReportScreenState extends State<ReportScreen> {
+  static ReportOptions _reportOption = ReportOptions.custom;
+
+  static DateTime _startDate = DateTime.now();
+  static DateTime _endDate = DateTime.now();
+
+  final String _dateFormat = SharedPref.getDateFormat();
+  final String _timeFormat = SharedPref.getTimeFormat();
+
+  final DailyTimeRecordsDao? _dailyTimeRecordsDao = DailyTimeRecordsModel().dailyTimeRecordsDao;
+
+  String _totalHours = '0';
+
+  static List<DailyTimeRecord> _records = [];
+
+  @override
+  void initState() {
+    super.initState();
+    _getRecords();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView(
+      padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 20),
+      children: [
+        _overviewDatas(),
+        const SizedBox(
+          height: 30,
+        ),
+        _radioOptionList(),
+        const SizedBox(
+          height: 10,
+        ),
+        Visibility(
+          visible: _reportOption == ReportOptions.custom,
+          child: _configureCustomDateDuration(),
+        ),
+        const SizedBox(
+          height: 100,
+        ),
+        buildTextButtonLarge('Generate Report', onPressed: () {
+          if (_records.isNotEmpty) {
+            _exportFile();
+          } else {
+            showSnackBar(context, "No entries found for the selected date range");
+          }
+        }),
+      ],
+    );
+  }
+
+  void _getRecords() async {
+    _records = await _dailyTimeRecordsDao!
+        .getRecordsByDateRange(_startDate.formatToString(), _endDate.formatToString());
+    double hours = DailyTimeRecord.calculateAllTotalHours(_records);
+    _totalHours = hours == 0 ? '0' : convertDoubleToTime(hours);
+    setState(() {});
+  }
+
+  void _changeStartDate(ReportOptions option) {
+    DateTime? startDate, endDate;
+    DateTime today = DateTime.now();
+    switch (option) {
+      case ReportOptions.lastWeek:
+        DateTimeRange date = DateRange.getLastWeek(today);
+        startDate = date.start;
+        endDate = date.end;
+      case ReportOptions.thisWeek:
+        DateTimeRange date = DateRange.getThisWeek(today);
+        startDate = date.start;
+        endDate = date.end;
+      case ReportOptions.thisMonth:
+        startDate = DateRange.getThisMonth(today);
+        endDate = today;
+      case ReportOptions.thisYear:
+        startDate = DateRange.getThisYear(today);
+        endDate = today;
+      default:
+        startDate = today;
+        endDate = today;
+    }
+    setState(() {
+      _reportOption = option;
+      _startDate = startDate!;
+      _endDate = endDate!;
+    });
+    _getRecords();
+  }
+
+  Excel _createExcel() {
+    final excel = Excel.createExcel();
+    final sheet = excel['Sheet1'];
+    final headerStyle = CellStyle(bold: true);
+
+    const headerValues = [
+      'ID',
+      'Start Date',
+      'End Date',
+      'Start Time',
+      'End Time',
+      'Break Time Start',
+      'Break Time End',
+      'Notes',
+      'Total Hours',
+    ];
+
+    for (int i = 0; i < headerValues.length; i++) {
+      final cell = sheet.cell(
+          CellIndex.indexByString('${String.fromCharCode(65 + i)}1')); // Use A-based column index
+      cell.value = TextCellValue(headerValues[i]);
+      cell.cellStyle = headerStyle;
+    }
+
+    for (int index = 0; index < _records.length; index++) {
+      final cellIndex = index + 2;
+      final record = _records[index];
+
+      final values = [
+        record.id.toString(),
+        formatStringDate(dateString: record.dateStart, toFormat: _dateFormat),
+        formatStringDate(dateString: record.dateEnd, toFormat: _dateFormat),
+        formatStringTime(timeString: record.startTime, format: _timeFormat),
+        formatStringTime(timeString: record.endTime, format: _timeFormat),
+        formatStringTime(timeString: record.breakTimeStart, format: _timeFormat),
+        formatStringTime(timeString: record.breakTimeEnd, format: _timeFormat),
+        record.notes,
+        convertDoubleToTime(record.getTotalHours()),
+      ];
+
+      for (int i = 0; i < values.length; i++) {
+        final cell =
+            sheet.cell(CellIndex.indexByString('${String.fromCharCode(65 + i)}$cellIndex'));
+        cell.value = TextCellValue(values[i]);
+      }
+    }
+
+    final totalCellIndex = _records.length + 2;
+    Data totalCell = sheet.cell(CellIndex.indexByString('H$totalCellIndex'));
+    totalCell.value = const TextCellValue('Total');
+    totalCell.cellStyle = headerStyle;
+    sheet.cell(CellIndex.indexByString('I$totalCellIndex')).value =
+        TextCellValue(convertDoubleToTime(DailyTimeRecord.calculateAllTotalHours(_records)));
+
+    return excel;
+  }
+
+  Future<void> _exportFile() async {
+    PermissionStatus status = await Permission.storage.status;
+    if (status.isDenied) {
+      // If not we will ask for permission first
+      final DeviceInfoPlugin deviceInfoPlugin = DeviceInfoPlugin();
+      final AndroidDeviceInfo info = await deviceInfoPlugin.androidInfo;
+      if ((info.version.sdkInt) >= 33) {
+        status = await Permission.photos.request();
+      } else {
+        status = await Permission.storage.request();
+      }
+    }
+
+    if (status.isGranted) {
+      Directory? directory = await getExternalStorageDirectory();
+
+      await directory!.create(recursive: true);
+      String path = directory.path;
+
+      String fileName = 'daily_time_records.xlsx';
+
+      // Create the file path
+      String filePath = '$path/$fileName';
+
+      var fileBytes = _createExcel().save();
+
+      // Create the file and write the data
+      File(filePath)
+        ..createSync(recursive: true)
+        ..writeAsBytesSync(fileBytes!);
+
+      if (!mounted) return;
+      showNotificationAndroid(
+          'Report Generation', 'Successfully exported ${_records.length} entries', filePath);
+    } else {
+      if (!mounted) return;
+      showSnackBar(context, 'Failed to Generate Report');
+    }
+  }
+
+  Row _overviewDatas() {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        Expanded(
+            child: buildDataOverviewContainer(
+                icon: SvgPicture.asset(
+                  iconCalendar,
+                  width: 26,
+                  height: 26,
+                  colorFilter: ColorFilter.mode(palette['icons']!, BlendMode.srcIn),
+                ),
+                title: _records.length.toString(),
+                subtitle: 'Days Worked')),
+        const SizedBox(
+          width: 20,
+        ),
+        Expanded(
+            child: buildDataOverviewContainer(
+                icon: Icon(
+                  Icons.schedule,
+                  size: 26,
+                  color: palette['icons'],
+                ),
+                title: _totalHours,
+                subtitle: 'Hours')),
+      ],
+    );
+  }
+
+  Column _radioOptionList() {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        _radioOption(label: 'Last Week', value: ReportOptions.lastWeek),
+        _radioOption(label: 'This Week', value: ReportOptions.thisWeek),
+        _radioOption(label: 'This Month', value: ReportOptions.thisMonth),
+        _radioOption(label: 'This Year', value: ReportOptions.thisYear),
+        _radioOption(label: 'Custom', value: ReportOptions.custom),
+      ],
+    );
+  }
+
+  RadioListTile _radioOption({required String label, required ReportOptions value}) {
+    return RadioListTile<ReportOptions>(
+      dense: true,
+      contentPadding: EdgeInsets.zero,
+      title: buildRegularText(label, fontSize: 16),
+      value: value,
+      groupValue: _reportOption,
+      onChanged: (ReportOptions? value) {
+        _changeStartDate(value!);
+      },
+    );
+  }
+
+  Padding _configureCustomDateDuration() {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 40),
+      child: Row(
+        children: [
+          Expanded(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.start,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                buildLightText('From'),
+                buildDatePickerButton(
+                  context: context,
+                  date: _startDate,
+                  onDatePicked: (selectedDate) {
+                    setState(() {
+                      _startDate = selectedDate;
+                    });
+
+                    _getRecords();
+                  },
+                  dateFormat: _dateFormat,
+                ),
+              ],
+            ),
+          ),
+          const SizedBox(
+            width: 20,
+          ),
+          Expanded(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.start,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                buildLightText('To'),
+                buildDatePickerButton(
+                  context: context,
+                  date: _endDate,
+                  onDatePicked: (selectedDate) {
+                    setState(() {
+                      _endDate = selectedDate;
+                    });
+
+                    _getRecords();
+                  },
+                  dateFormat: _dateFormat,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/settings/settings.dart b/lib/screens/settings/settings.dart
new file mode 100644
index 0000000..fe58bdc
--- /dev/null
+++ b/lib/screens/settings/settings.dart
@@ -0,0 +1,255 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/api/timeofday_api.dart';
+import 'package:flutter_dtr_app/core/constants.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_dtr_app/core/utilities/string_to_timeofday.dart';
+import 'package:flutter_dtr_app/data/models/daily_time_records_model.dart';
+import 'package:flutter_dtr_app/data/shared_preferences/sharedpref.dart';
+import 'package:flutter_dtr_app/widgets/configure_time_schedule.dart';
+import 'package:flutter_dtr_app/widgets/confirmation_dialog.dart';
+import 'package:flutter_dtr_app/widgets/typography.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class SettingsScreen extends StatefulWidget {
+  const SettingsScreen({super.key});
+
+  @override
+  State<SettingsScreen> createState() => _SettingsScreenState();
+}
+
+class _SettingsScreenState extends State<SettingsScreen> {
+  late String _selectedDateFormat;
+  late String _selectedTimeFormat;
+
+  late bool _use24HourFormat;
+
+  late TimeOfDay _scheduleStart;
+  late TimeOfDay _scheduleEnd;
+  late TimeOfDay _breakTimeStart;
+  late TimeOfDay _breakTimeEnd;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadSharedPref();
+  }
+
+  void _loadSharedPref() {
+    setState(() {
+      _selectedDateFormat = SharedPref.getDateFormat();
+      _selectedTimeFormat = SharedPref.getTimeFormat();
+
+      _use24HourFormat = _selectedTimeFormat == militaryHourFormat;
+
+      _scheduleStart = parseTimeOfDay(SharedPref.getDailyScheduleStart())!;
+      _scheduleEnd = parseTimeOfDay(SharedPref.getDailyScheduleEnd())!;
+      _breakTimeStart = parseTimeOfDay(SharedPref.getBreakTimeStart())!;
+      _breakTimeEnd = parseTimeOfDay(SharedPref.getBreakTimeEnd())!;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView(
+      padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 20),
+      children: [
+        _formatSelection(
+          label: 'Date Format',
+          items: dateFormats,
+          value: _selectedDateFormat,
+          onSelected: (selected) => setState(() {
+            _selectedDateFormat = selected!;
+            SharedPref.setDateFormat(_selectedDateFormat);
+          }),
+        ),
+        const SizedBox(
+          height: 20,
+        ),
+        _formatSelection(
+          label: 'Time Format',
+          items: timeFormats,
+          value: _selectedTimeFormat,
+          onSelected: (selected) => setState(() {
+            _selectedTimeFormat = selected!;
+            _use24HourFormat = _selectedTimeFormat == militaryHourFormat;
+            SharedPref.setTimeFormat(_selectedTimeFormat);
+          }),
+        ),
+        const SizedBox(
+          height: 40,
+        ),
+        buildRegularText(
+            'Set the daily and break time schedule as they are essential for calculating your work hours',
+            color: palette['disabled']),
+        const SizedBox(
+          height: 20,
+        ),
+        _configureDailySchedule(context),
+        const SizedBox(
+          height: 20,
+        ),
+        _configureBreakTimeSchedule(context),
+        const SizedBox(
+          height: 75,
+        ),
+        _clearAllDataButton(),
+      ],
+    );
+  }
+
+  Column _configureDailySchedule(BuildContext context) {
+    return buildTimeScheduleConfiguration(
+      context: context,
+      mainLabel: 'Daily Schedule',
+      startTimeLabel: 'Daily Schedule Start',
+      startTimeShedule: _scheduleStart,
+      endTimeLabel: 'Daily Schedule End',
+      endTimeSchedule: _scheduleEnd,
+      onSave: (start, end) {
+        setState(() {
+          _scheduleStart = start;
+          _scheduleEnd = end;
+
+          SharedPref.setDailyScheduleStart(_scheduleStart.formatToString());
+          SharedPref.setDailyScheduleEnd(_scheduleEnd.formatToString());
+        });
+      },
+      timeFormat: _selectedTimeFormat,
+      use24HourFormat: _use24HourFormat,
+    );
+  }
+
+  Column _configureBreakTimeSchedule(BuildContext context) {
+    return buildTimeScheduleConfiguration(
+      context: context,
+      mainLabel: 'Break Time Schedule',
+      startTimeLabel: 'Break Time Start',
+      startTimeShedule: _breakTimeStart,
+      endTimeLabel: 'Break Time End',
+      endTimeSchedule: _breakTimeEnd,
+      onSave: (start, end) {
+        setState(() {
+          _breakTimeStart = start;
+          _breakTimeEnd = end;
+
+          SharedPref.setBreakTimeStart(_breakTimeStart.formatToString());
+          SharedPref.setBreakTimeEnd(_breakTimeEnd.formatToString());
+        });
+      },
+      timeFormat: _selectedTimeFormat,
+      use24HourFormat: _use24HourFormat,
+    );
+  }
+
+  Column _formatSelection(
+      {required String label,
+      required Map<String, String> items,
+      required String? value,
+      required Function(String? selected) onSelected}) {
+    List<String> itemKeys = items.keys.toList();
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        buildTitleText(label),
+        Container(
+          decoration:
+              BoxDecoration(color: palette['inputs'], borderRadius: BorderRadius.circular(10)),
+          child: DropdownMenu<String>(
+            expandedInsets: EdgeInsets.zero,
+            trailingIcon: Icon(
+              applyTextScaling: false,
+              Icons.keyboard_arrow_down_rounded,
+              color: palette['icons'],
+              size: 16,
+            ),
+            selectedTrailingIcon: Icon(
+              Icons.keyboard_arrow_up_rounded,
+              color: palette['icons'],
+              size: 16,
+            ),
+            textStyle: Theme.of(context).textTheme.bodyMedium!.copyWith(fontSize: 16),
+            inputDecorationTheme: const InputDecorationTheme(
+              border: InputBorder.none,
+              contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
+            ),
+            initialSelection: value,
+            requestFocusOnTap: false,
+            onSelected: (String? selectedItem) {
+              onSelected(selectedItem);
+            },
+            dropdownMenuEntries: itemKeys.map<DropdownMenuEntry<String>>((String val) {
+              return DropdownMenuEntry<String>(
+                value: val,
+                label: items[val]!,
+                style: ButtonStyle(
+                  backgroundBuilder: (context, states, child) {
+                    Color? backgroundColor;
+                    if (value == val) {
+                      backgroundColor = palette['primary']!;
+                    } else if (states.contains(WidgetState.hovered)) {
+                      backgroundColor = palette['inputs']!;
+                    } else {
+                      backgroundColor = Colors.white;
+                    }
+
+                    return ColoredBox(
+                      color: backgroundColor,
+                      child: child,
+                    );
+                  },
+                ),
+                labelWidget: ConstrainedBox(
+                  constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width - 100),
+                  child: buildRegularText(items[val]!,
+                      fontSize: 14, color: value == val ? Colors.white : null),
+                ),
+              );
+            }).toList(),
+          ),
+        ),
+      ],
+    );
+  }
+
+  TextButton _clearAllDataButton() {
+    return TextButton(
+        onPressed: () {
+          showConfirmationDialog(
+              context: context,
+              title: 'Clear All Data',
+              message: 'Are you sure you want to clear all the data of the application?',
+              negativeText: 'No',
+              onNegative: () {
+                Navigator.pop(context);
+              },
+              positiveText: 'Yes',
+              onPositive: () async {
+                final DailyTimeRecordsModel dailyTimeRecordsModel = DailyTimeRecordsModel();
+                await SharedPref.clearAll();
+                await dailyTimeRecordsModel.dailyTimeRecordsDao?.deleteAllRecords();
+                await dailyTimeRecordsModel.update();
+
+                _loadSharedPref();
+
+                if (!mounted) return;
+                Navigator.pop(context);
+              });
+        },
+        style: TextButton.styleFrom(
+            padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
+            backgroundColor: palette['danger'],
+            foregroundColor: Colors.black,
+            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))),
+        child: Row(
+          children: [
+            Expanded(child: buildTitleText('Clear All Data')),
+            SvgPicture.asset(
+              iconDelete,
+              width: 20,
+              height: 20,
+            )
+          ],
+        ));
+  }
+}
diff --git a/lib/splash_screen.dart b/lib/splash_screen.dart
new file mode 100644
index 0000000..6ff0b59
--- /dev/null
+++ b/lib/splash_screen.dart
@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/constants.dart';
+import 'package:flutter_dtr_app/core/utilities/responsive.dart';
+import 'package:flutter_dtr_app/screens/main_screen.dart';
+
+/// The App's Splash Screen
+class SplashScreen extends StatefulWidget {
+  const SplashScreen({super.key});
+
+  @override
+  State<SplashScreen> createState() => _SplashScreenState();
+}
+
+class _SplashScreenState extends State<SplashScreen> {
+  @override
+  void initState() {
+    super.initState();
+    Future.delayed(
+      const Duration(seconds: 3),
+      () {
+        Navigator.pushReplacement(
+          context,
+          MaterialPageRoute(builder: (context) => const MainScreen()),
+        );
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final double imageSize = getResponsiveSize(context, 162);
+
+    return Scaffold(
+      body: Padding(
+        padding: const EdgeInsets.all(30),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Expanded(
+              child: Center(
+                child:
+                    Image.asset(appLogo, width: imageSize, height: imageSize),
+              ),
+            ),
+            Text(
+              "Daily Time Record",
+              textAlign: TextAlign.center,
+              style: Theme.of(context).textTheme.displayLarge,
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/widgets/back_button.dart b/lib/widgets/back_button.dart
new file mode 100644
index 0000000..be8b4c9
--- /dev/null
+++ b/lib/widgets/back_button.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/constants.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+/// Customized back button for Scaffold leading icon
+Widget buildBackButton({required BuildContext context, double? size}) {
+  return IconButton(
+      onPressed: () {
+        Navigator.pop(context);
+      },
+      icon: SvgPicture.asset(
+        iconBack,
+        width: 24,
+        height: 24,
+        colorFilter: ColorFilter.mode(palette['dark']!, BlendMode.srcIn),
+      ));
+}
diff --git a/lib/custom_widgets/bordered_container.dart b/lib/widgets/bordered_container.dart
similarity index 100%
rename from lib/custom_widgets/bordered_container.dart
rename to lib/widgets/bordered_container.dart
diff --git a/lib/widgets/configure_time_schedule.dart b/lib/widgets/configure_time_schedule.dart
new file mode 100644
index 0000000..71d92de
--- /dev/null
+++ b/lib/widgets/configure_time_schedule.dart
@@ -0,0 +1,214 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/api/timeofday_api.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_dtr_app/core/utilities/calculate_total_hours.dart';
+import 'package:flutter_dtr_app/core/utilities/double_to_time.dart';
+import 'package:flutter_dtr_app/widgets/show_snackbar.dart';
+import 'package:flutter_dtr_app/widgets/text_button.dart';
+import 'package:flutter_dtr_app/widgets/time_picker_button.dart';
+import 'package:flutter_dtr_app/widgets/typography.dart';
+
+Column buildTimeScheduleConfiguration({
+  required BuildContext context,
+  required String mainLabel,
+  required String startTimeLabel,
+  required TimeOfDay startTimeShedule,
+  required String endTimeLabel,
+  required TimeOfDay endTimeSchedule,
+  required Function(TimeOfDay start, TimeOfDay end) onSave,
+  required String timeFormat,
+  required bool use24HourFormat,
+  String? infoMessage,
+  bool showInfo = false,
+}) {
+  final double totalHours = calculateTotalHours(start: startTimeShedule, end: endTimeSchedule);
+  return Column(
+    mainAxisAlignment: MainAxisAlignment.start,
+    crossAxisAlignment: CrossAxisAlignment.start,
+    children: [
+      Row(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          buildTitleText(mainLabel),
+          const Spacer(),
+          Visibility(
+            visible: showInfo,
+            child: Tooltip(
+              message: infoMessage ?? "",
+              triggerMode: TooltipTriggerMode.tap,
+              textStyle: Theme.of(context)
+                  .textTheme
+                  .bodyMedium!
+                  .copyWith(color: Colors.white, fontSize: 14),
+              decoration:
+                  BoxDecoration(color: palette['dark'], borderRadius: BorderRadius.circular(10)),
+              child: Icon(
+                Icons.info_outline_rounded,
+                size: 18,
+                color: palette['dark'],
+              ),
+            ),
+          )
+        ],
+      ),
+      TextButton(
+        onPressed: () async {
+          await _configureTimeScheduleDialog(
+            context,
+            startTimeShedule,
+            endTimeSchedule,
+            startTimeLabel,
+            endTimeLabel,
+            onSave,
+            timeFormat,
+            use24HourFormat,
+          );
+        },
+        style: TextButton.styleFrom(
+            backgroundColor: palette['inputs'],
+            padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
+            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))),
+        child: Row(
+          children: [
+            Icon(
+              Icons.schedule,
+              color: palette['icons'],
+              size: 18,
+            ),
+            const SizedBox(
+              width: 10,
+            ),
+            Expanded(
+                child: buildRegularText(
+              '${startTimeShedule.formatToString(format: timeFormat)} - ${endTimeSchedule.formatToString(format: timeFormat)}',
+              fontSize: 16,
+            )),
+            buildRegularText(convertDoubleToTime(totalHours), fontSize: 16),
+          ],
+        ),
+      )
+    ],
+  );
+}
+
+Future<void> _configureTimeScheduleDialog(
+  BuildContext context,
+  TimeOfDay startTimeShedule,
+  TimeOfDay endTimeSchedule,
+  String startTimeLabel,
+  String endTimeLabel,
+  Function(TimeOfDay start, TimeOfDay end) onSave,
+  String timeFormat,
+  bool use24HourFormat,
+) async {
+  TimeOfDay startTime = startTimeShedule;
+  TimeOfDay endTime = endTimeSchedule;
+  final schedule = await showDialog<Map<String, TimeOfDay>>(
+    context: context,
+    builder: (BuildContext context) => StatefulBuilder(
+      builder: (_, setState) => ScaffoldMessenger(
+        child: Builder(
+            builder: (context) => Scaffold(
+                  backgroundColor: Colors.transparent,
+                  body: Dialog(
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 40),
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        mainAxisAlignment: MainAxisAlignment.start,
+                        children: <Widget>[
+                          _scheduleTimePicker(context,
+                              label: startTimeLabel,
+                              timeFormat: timeFormat,
+                              use24HourFormat: use24HourFormat,
+                              time: startTime, onTimePicked: (TimeOfDay selectedTime) {
+                            if (selectedTime == endTime) {
+                              showSnackBar(
+                                  context, 'The start and end time should not be the same');
+                              return;
+                            }
+
+                            setState(() {
+                              startTime = selectedTime;
+                            });
+                          }),
+                          const SizedBox(
+                            height: 20,
+                          ),
+                          _scheduleTimePicker(context,
+                              label: endTimeLabel,
+                              timeFormat: timeFormat,
+                              use24HourFormat: use24HourFormat,
+                              time: endTime, onTimePicked: (TimeOfDay selectedTime) {
+                            if (selectedTime == startTime) {
+                              showSnackBar(
+                                  context, 'The start and end time should not be the same');
+                              return;
+                            }
+
+                            setState(() {
+                              endTime = selectedTime;
+                            });
+                          }),
+                          const SizedBox(
+                            height: 30,
+                          ),
+                          Row(
+                            children: [
+                              Expanded(
+                                child: buildTextButtonSmall('Cancel', onPressed: () {
+                                  Navigator.pop(context);
+                                }, inverted: true),
+                              ),
+                              const SizedBox(
+                                width: 10,
+                              ),
+                              Expanded(
+                                child: buildTextButtonSmall('Save', onPressed: () {
+                                  Navigator.pop(context, {
+                                    'start': startTime,
+                                    'end': endTime,
+                                  });
+                                }),
+                              ),
+                            ],
+                          )
+                        ],
+                      ),
+                    ),
+                  ),
+                )),
+      ),
+    ),
+  );
+
+  if (schedule != null) {
+    onSave(schedule['start']!, schedule['end']!);
+  }
+}
+
+Column _scheduleTimePicker(
+  BuildContext context, {
+  required String label,
+  required TimeOfDay time,
+  required Function(TimeOfDay selectedTime) onTimePicked,
+  required String timeFormat,
+  required bool use24HourFormat,
+}) {
+  return Column(
+    mainAxisAlignment: MainAxisAlignment.start,
+    crossAxisAlignment: CrossAxisAlignment.start,
+    children: [
+      buildTitleText(label),
+      buildTimePickerButton(
+        context: context,
+        time: time,
+        onTimePicked: onTimePicked,
+        timeFormat: timeFormat,
+        use24HourFormat: use24HourFormat,
+      )
+    ],
+  );
+}
diff --git a/lib/widgets/confirmation_dialog.dart b/lib/widgets/confirmation_dialog.dart
new file mode 100644
index 0000000..df66f4c
--- /dev/null
+++ b/lib/widgets/confirmation_dialog.dart
@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/widgets/text_button.dart';
+import 'package:flutter_dtr_app/widgets/typography.dart';
+
+void showConfirmationDialog({
+  required BuildContext context,
+  required String title,
+  required String message,
+  required String negativeText,
+  required Function onNegative,
+  required String positiveText,
+  required Function onPositive,
+}) {
+  showDialog<String>(
+    context: context,
+    builder: (BuildContext context) => Dialog(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 40),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: <Widget>[
+            buildHeading3Text(title),
+            const SizedBox(
+              height: 10,
+            ),
+            buildRegularText(message, fontSize: 16, isCentered: true),
+            const SizedBox(
+              height: 30,
+            ),
+            Row(
+              children: [
+                Expanded(
+                  child: buildTextButtonSmall(negativeText, onPressed: onNegative, inverted: true),
+                ),
+                const SizedBox(
+                  width: 10,
+                ),
+                Expanded(
+                  child: buildTextButtonSmall(positiveText, onPressed: onPositive),
+                ),
+              ],
+            )
+          ],
+        ),
+      ),
+    ),
+  );
+}
diff --git a/lib/widgets/data_overview_container.dart b/lib/widgets/data_overview_container.dart
new file mode 100644
index 0000000..3cb5af3
--- /dev/null
+++ b/lib/widgets/data_overview_container.dart
@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_dtr_app/widgets/typography.dart';
+
+Container buildDataOverviewContainer(
+    {required Widget icon, required String title, required String subtitle}) {
+  return Container(
+    decoration: BoxDecoration(
+      color: palette['overview'],
+      borderRadius: BorderRadius.circular(15),
+    ),
+    padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
+    child: Row(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        icon,
+        const SizedBox(
+          width: 10,
+        ),
+        Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            SizedBox(
+              width: 100,
+              height: 32,
+              child: SingleChildScrollView(
+                scrollDirection: Axis.horizontal,
+                child: buildHeading2Text(title),
+              ),
+            ),
+            buildRegularText(subtitle),
+          ],
+        )
+      ],
+    ),
+  );
+}
diff --git a/lib/widgets/date_picker_button.dart b/lib/widgets/date_picker_button.dart
new file mode 100644
index 0000000..77cebc4
--- /dev/null
+++ b/lib/widgets/date_picker_button.dart
@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/api/datetime_api.dart';
+import 'package:flutter_dtr_app/core/constants.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_dtr_app/widgets/date_picker_dialog.dart';
+import 'package:flutter_dtr_app/widgets/typography.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+TextButton buildDatePickerButton({
+  required BuildContext context,
+  required DateTime date,
+  required Function(DateTime selectedDate) onDatePicked,
+  required String dateFormat,
+}) {
+  return TextButton(
+    onPressed: () async {
+      final DateTime? pickedDate = await showDatePickerDialog(context: context);
+      if (pickedDate != null) {
+        onDatePicked(pickedDate);
+      }
+    },
+    style: TextButton.styleFrom(
+        backgroundColor: palette['inputs'],
+        padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))),
+    child: Row(
+      children: [
+        SvgPicture.asset(
+          iconCalendar,
+          width: 18,
+          height: 18,
+          colorFilter: ColorFilter.mode(palette['icons']!, BlendMode.srcIn),
+        ),
+        const SizedBox(
+          width: 10,
+        ),
+        Expanded(
+            child: buildRegularText(date.formatToString(format: dateFormat),
+                fontSize: 16)),
+      ],
+    ),
+  );
+}
diff --git a/lib/widgets/date_picker_dialog.dart b/lib/widgets/date_picker_dialog.dart
new file mode 100644
index 0000000..0c40f83
--- /dev/null
+++ b/lib/widgets/date_picker_dialog.dart
@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+
+Future<DateTime?> showDatePickerDialog({required BuildContext context}) {
+  return showDatePicker(
+    context: context,
+    firstDate: DateTime(2000),
+    lastDate: DateTime.now(),
+  );
+}
diff --git a/lib/custom_widgets/dtr_cell.dart b/lib/widgets/dtr_cell.dart
similarity index 94%
rename from lib/custom_widgets/dtr_cell.dart
rename to lib/widgets/dtr_cell.dart
index 4f7174d..dded698 100644
--- a/lib/custom_widgets/dtr_cell.dart
+++ b/lib/widgets/dtr_cell.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_dtr_app/custom_widgets/bordered_container.dart';
+import 'package:flutter_dtr_app/widgets/bordered_container.dart';
 
 class DTRCell extends StatelessWidget {
   const DTRCell(
diff --git a/lib/widgets/show_snackbar.dart b/lib/widgets/show_snackbar.dart
new file mode 100644
index 0000000..96bbccb
--- /dev/null
+++ b/lib/widgets/show_snackbar.dart
@@ -0,0 +1,6 @@
+import 'package:flutter/material.dart';
+
+void showSnackBar(BuildContext context, String text) {
+  ScaffoldMessenger.of(context).hideCurrentSnackBar();
+  ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(text)));
+}
diff --git a/lib/widgets/text_button.dart b/lib/widgets/text_button.dart
new file mode 100644
index 0000000..059e7e4
--- /dev/null
+++ b/lib/widgets/text_button.dart
@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_dtr_app/widgets/typography.dart';
+
+/// Small text buttons primary used for dialogs
+TextButton buildTextButtonSmall(String text,
+    {required Function onPressed, bool inverted = false}) {
+  return TextButton(
+      style: ButtonStyle(
+        backgroundColor: WidgetStateProperty.resolveWith<Color>((states) {
+          if (states.contains(WidgetState.pressed)) {
+            return inverted
+                ? palette['tertiaryVariant']!
+                : palette['tertiary']!;
+          }
+
+          if (states.contains(WidgetState.hovered)) {
+            return inverted
+                ? palette['tertiaryVariant']!
+                : palette['tertiary']!;
+          }
+
+          return inverted ? Colors.white : palette['secondary']!;
+        }),
+        padding: const WidgetStatePropertyAll(
+            EdgeInsets.symmetric(vertical: 15, horizontal: 20)),
+        shape: WidgetStatePropertyAll(
+            RoundedRectangleBorder(borderRadius: BorderRadius.circular(15))),
+      ),
+      onPressed: () {
+        onPressed();
+      },
+      child: buildButtonText(text, color: inverted ? palette['dark'] : null));
+}
+
+/// Large text buttons primary used for forms
+TextButton buildTextButtonLarge(String text, {required Function onPressed}) {
+  return TextButton(
+      style: ButtonStyle(
+        backgroundColor: WidgetStateProperty.resolveWith<Color>((states) {
+          if (states.contains(WidgetState.pressed)) {
+            return palette['tertiary']!;
+          }
+
+          if (states.contains(WidgetState.hovered)) {
+            return palette['tertiary']!;
+          }
+
+          return palette['secondary']!;
+        }),
+        padding: const WidgetStatePropertyAll(
+            EdgeInsets.symmetric(vertical: 20, horizontal: 20)),
+        shape: WidgetStatePropertyAll(
+            RoundedRectangleBorder(borderRadius: BorderRadius.circular(15))),
+      ),
+      onPressed: () {
+        onPressed();
+      },
+      child: buildButtonText(text));
+}
diff --git a/lib/widgets/time_picker_button.dart b/lib/widgets/time_picker_button.dart
new file mode 100644
index 0000000..039e4d3
--- /dev/null
+++ b/lib/widgets/time_picker_button.dart
@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/api/timeofday_api.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+import 'package:flutter_dtr_app/widgets/time_picker_dialog.dart';
+import 'package:flutter_dtr_app/widgets/typography.dart';
+
+TextButton buildTimePickerButton({
+  required BuildContext context,
+  required TimeOfDay time,
+  required Function(TimeOfDay selectedTime) onTimePicked,
+  required String timeFormat,
+  required bool use24HourFormat,
+}) {
+  return TextButton(
+    onPressed: () async {
+      final TimeOfDay? pickedTime = await showTimePickerDialog(
+        context: context,
+        initialTime: time,
+        use24HourFormat: use24HourFormat,
+      );
+      if (pickedTime != null) {
+        onTimePicked(pickedTime);
+      }
+    },
+    style: TextButton.styleFrom(
+        backgroundColor: palette['inputs'],
+        padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))),
+    child: Row(
+      children: [
+        Icon(
+          Icons.schedule,
+          color: palette['icons'],
+          size: 18,
+        ),
+        const SizedBox(
+          width: 10,
+        ),
+        Expanded(
+            child: buildRegularText(time.formatToString(format: timeFormat),
+                fontSize: 16)),
+      ],
+    ),
+  );
+}
diff --git a/lib/widgets/time_picker_dialog.dart b/lib/widgets/time_picker_dialog.dart
new file mode 100644
index 0000000..6dd5263
--- /dev/null
+++ b/lib/widgets/time_picker_dialog.dart
@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+
+Future<TimeOfDay?> showTimePickerDialog({
+  required BuildContext context,
+  required TimeOfDay initialTime,
+  required bool use24HourFormat,
+}) {
+  return showTimePicker(
+    context: context,
+    initialTime: initialTime,
+    builder: (context, child) {
+      return MediaQuery(
+        data: MediaQuery.of(context)
+            .copyWith(alwaysUse24HourFormat: use24HourFormat),
+        child: Theme(
+          data: ThemeData(
+            colorScheme: ColorScheme.light(
+              primary: palette[
+                  'primary']!, // Color for time hand and time input background
+              secondary: palette['icons']!, // Color for AM/PM input background
+            ),
+          ),
+          child: child!,
+        ),
+      );
+    },
+  );
+}
diff --git a/lib/widgets/typography.dart b/lib/widgets/typography.dart
new file mode 100644
index 0000000..35a3552
--- /dev/null
+++ b/lib/widgets/typography.dart
@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/theme.dart';
+
+/// Heading (H1) text
+Text buildHeading1Text(String text) {
+  return Text(
+    text,
+    style: textTheme.titleLarge,
+  );
+}
+
+/// Heading (H2) text
+Text buildHeading2Text(String text) {
+  return Text(
+    text,
+    style: textTheme.titleMedium,
+  );
+}
+
+/// Heading (H3) text
+Text buildHeading3Text(String text) {
+  return Text(
+    text,
+    style: textTheme.titleSmall,
+  );
+}
+
+/// Text for displaying titles or menu labels
+Text buildTitleText(String text, {double fontsize = 16, Color? color, bool isCentered = false}) {
+  return Text(
+    text,
+    textAlign: isCentered ? TextAlign.center : null,
+    style: textTheme.labelMedium!.copyWith(fontSize: fontsize, color: color ?? palette['dark']),
+  );
+}
+
+/// Text for displaying text for buttons
+Text buildButtonText(String text, {Color? color}) {
+  return Text(
+    text,
+    textAlign: TextAlign.center,
+    style: textTheme.labelLarge!.copyWith(color: color ?? Colors.white),
+  );
+}
+
+/// Text for displaying regular text
+Text buildRegularText(String text, {double fontSize = 12, Color? color, bool isCentered = false}) {
+  return Text(
+    text,
+    textAlign: isCentered ? TextAlign.center : null,
+    style: textTheme.bodyMedium!.copyWith(fontSize: fontSize, color: color ?? palette['dark']),
+  );
+}
+
+/// Text for light labels
+Text buildLightText(String text) {
+  return Text(
+    text,
+    style: textTheme.bodySmall,
+  );
+}
diff --git a/macos/Flutter/GeneratedPluginRegistrant.swift b/macos/Flutter/GeneratedPluginRegistrant.swift
index 724bb2a..54e2237 100644
--- a/macos/Flutter/GeneratedPluginRegistrant.swift
+++ b/macos/Flutter/GeneratedPluginRegistrant.swift
@@ -5,8 +5,16 @@
 import FlutterMacOS
 import Foundation
 
+import device_info_plus
+import flutter_local_notifications
+import path_provider_foundation
 import shared_preferences_foundation
+import sqflite
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
+  DeviceInfoPlusMacosPlugin.register(with: registry.registrar(forPlugin: "DeviceInfoPlusMacosPlugin"))
+  FlutterLocalNotificationsPlugin.register(with: registry.registrar(forPlugin: "FlutterLocalNotificationsPlugin"))
+  PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
   SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
+  SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin"))
 }
diff --git a/pubspec.lock b/pubspec.lock
index 13cd083..d1bed35 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -1,6 +1,38 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  _fe_analyzer_shared:
+    dependency: transitive
+    description:
+      name: _fe_analyzer_shared
+      sha256: "0b2f2bd91ba804e53a61d757b986f89f1f9eaed5b11e4b2f5a2468d86d6c9fc7"
+      url: "https://pub.dev"
+    source: hosted
+    version: "67.0.0"
+  analyzer:
+    dependency: transitive
+    description:
+      name: analyzer
+      sha256: "37577842a27e4338429a1cbc32679d508836510b056f1eedf0c8d20e39c1383d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.4.1"
+  archive:
+    dependency: transitive
+    description:
+      name: archive
+      sha256: "7b875fd4a20b165a3084bd2d210439b22ebc653f21cea4842729c0c30c82596b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.4.9"
+  args:
+    dependency: transitive
+    description:
+      name: args
+      sha256: "7cf60b9f0cc88203c5a190b4cd62a99feea42759a7fa695010eb5de1c0b2252a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.5.0"
   async:
     dependency: transitive
     description:
@@ -17,6 +49,70 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.1"
+  build:
+    dependency: transitive
+    description:
+      name: build
+      sha256: "80184af8b6cb3e5c1c4ec6d8544d27711700bc3e6d2efad04238c7b5290889f0"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.1"
+  build_config:
+    dependency: transitive
+    description:
+      name: build_config
+      sha256: bf80fcfb46a29945b423bd9aad884590fb1dc69b330a4d4700cac476af1708d1
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
+  build_daemon:
+    dependency: transitive
+    description:
+      name: build_daemon
+      sha256: "79b2aef6ac2ed00046867ed354c88778c9c0f029df8a20fe10b5436826721ef9"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.2"
+  build_resolvers:
+    dependency: transitive
+    description:
+      name: build_resolvers
+      sha256: "339086358431fa15d7eca8b6a36e5d783728cf025e559b834f4609a1fcfb7b0a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.2"
+  build_runner:
+    dependency: "direct dev"
+    description:
+      name: build_runner
+      sha256: "644dc98a0f179b872f612d3eb627924b578897c629788e858157fa5e704ca0c7"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.11"
+  build_runner_core:
+    dependency: transitive
+    description:
+      name: build_runner_core
+      sha256: e3c79f69a64bdfcd8a776a3c28db4eb6e3fb5356d013ae5eb2e52007706d5dbe
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.3.1"
+  built_collection:
+    dependency: transitive
+    description:
+      name: built_collection
+      sha256: "376e3dd27b51ea877c28d525560790aee2e6fbb5f20e2f85d5081027d94e2100"
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.1.1"
+  built_value:
+    dependency: transitive
+    description:
+      name: built_value
+      sha256: c7913a9737ee4007efedaffc968c049fd0f3d0e49109e778edc10de9426005cb
+      url: "https://pub.dev"
+    source: hosted
+    version: "8.9.2"
   characters:
     dependency: transitive
     description:
@@ -25,6 +121,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.0"
+  charcode:
+    dependency: transitive
+    description:
+      name: charcode
+      sha256: fb98c0f6d12c920a02ee2d998da788bca066ca5f148492b7085ee23372b12306
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.1"
+  checked_yaml:
+    dependency: transitive
+    description:
+      name: checked_yaml
+      sha256: feb6bed21949061731a7a75fc5d2aa727cf160b91af9a3e464c5e3a32e28b5ff
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.3"
   clock:
     dependency: transitive
     description:
@@ -33,6 +145,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
+  code_builder:
+    dependency: transitive
+    description:
+      name: code_builder
+      sha256: f692079e25e7869c14132d39f223f8eec9830eb76131925143b2129c4bb01b37
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.10.0"
   collection:
     dependency: transitive
     description:
@@ -41,6 +161,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.18.0"
+  convert:
+    dependency: transitive
+    description:
+      name: convert
+      sha256: "0f08b14755d163f6e2134cb58222dd25ea2a2ee8a195e53983d57c075324d592"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.1"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      sha256: ff625774173754681d66daaf4a448684fb04b78f902da9cb3d308c19cc5e8bab
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.3"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -49,6 +185,62 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.6"
+  dart_style:
+    dependency: transitive
+    description:
+      name: dart_style
+      sha256: "99e066ce75c89d6b29903d788a7bb9369cf754f7b24bf70bf4b6d6d6b26853b9"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.6"
+  dbus:
+    dependency: transitive
+    description:
+      name: dbus
+      sha256: "365c771ac3b0e58845f39ec6deebc76e3276aa9922b0cc60840712094d9047ac"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.10"
+  dev_build:
+    dependency: transitive
+    description:
+      name: dev_build
+      sha256: cd2d110dc7ca372cc45d4eba79e4be9eb54ceda673687305b82be367aad8c652
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0+7"
+  device_info_plus:
+    dependency: "direct main"
+    description:
+      name: device_info_plus
+      sha256: eead12d1a1ed83d8283ab4c2f3fca23ac4082f29f25f29dff0f758f57d06ec91
+      url: "https://pub.dev"
+    source: hosted
+    version: "10.1.0"
+  device_info_plus_platform_interface:
+    dependency: transitive
+    description:
+      name: device_info_plus_platform_interface
+      sha256: d3b01d5868b50ae571cd1dc6e502fc94d956b665756180f7b16ead09e836fd64
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.0"
+  equatable:
+    dependency: transitive
+    description:
+      name: equatable
+      sha256: c2b87cb7756efdf69892005af546c56c0b5037f54d2a88269b4f347a505e3ca2
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.5"
+  excel:
+    dependency: "direct main"
+    description:
+      name: excel
+      sha256: "86958dd0771d4ce372cc8332d17d18d803bbcef6ab6d12ddd071699e4c232573"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.3"
   fake_async:
     dependency: transitive
     description:
@@ -73,6 +265,46 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "7.0.0"
+  fixnum:
+    dependency: transitive
+    description:
+      name: fixnum
+      sha256: "25517a4deb0c03aa0f32fd12db525856438902d9c16536311e76cdc57b31d7d1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
+  floor:
+    dependency: "direct main"
+    description:
+      name: floor
+      sha256: c1b06023912b5b8e49deb6a9d867863c535ae1a232d991c3582bba3ee8687867
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.5.0"
+  floor_annotation:
+    dependency: transitive
+    description:
+      name: floor_annotation
+      sha256: a40949580a7ab0eee572686e2d3b1638fd6bd6a753e661d792ab4236b365b23b
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.5.0"
+  floor_common:
+    dependency: transitive
+    description:
+      name: floor_common
+      sha256: "41c9914862f83a821815e1b1ffd47a1e1ae2130c35ff882ba2d000a67713ba64"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.5.0"
+  floor_generator:
+    dependency: "direct dev"
+    description:
+      name: floor_generator
+      sha256: "1499b3ab878a807e6fbe6f140dc014124845cd1df3090a113aae5fa7577a1e77"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.5.0"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -86,6 +318,38 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.2"
+  flutter_local_notifications:
+    dependency: "direct main"
+    description:
+      name: flutter_local_notifications
+      sha256: dd6676d8c2926537eccdf9f72128bbb2a9d0814689527b17f92c248ff192eaf3
+      url: "https://pub.dev"
+    source: hosted
+    version: "17.2.1+2"
+  flutter_local_notifications_linux:
+    dependency: transitive
+    description:
+      name: flutter_local_notifications_linux
+      sha256: c49bd06165cad9beeb79090b18cd1eb0296f4bf4b23b84426e37dd7c027fc3af
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.1"
+  flutter_local_notifications_platform_interface:
+    dependency: transitive
+    description:
+      name: flutter_local_notifications_platform_interface
+      sha256: "85f8d07fe708c1bdcf45037f2c0109753b26ae077e9d9e899d55971711a4ea66"
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.2.0"
+  flutter_svg:
+    dependency: "direct main"
+    description:
+      name: flutter_svg
+      sha256: "7b4ca6cf3304575fe9c8ec64813c8d02ee41d2afe60bcfe0678bcb5375d596a2"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.10+1"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -96,6 +360,54 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  frontend_server_client:
+    dependency: transitive
+    description:
+      name: frontend_server_client
+      sha256: f64a0333a82f30b0cca061bc3d143813a486dc086b574bfb233b7c1372427694
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.0"
+  glob:
+    dependency: transitive
+    description:
+      name: glob
+      sha256: "0e7014b3b7d4dac1ca4d6114f82bf1782ee86745b9b42a92c9289c23d8a0ab63"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.2"
+  graphs:
+    dependency: transitive
+    description:
+      name: graphs
+      sha256: aedc5a15e78fc65a6e23bcd927f24c64dd995062bcd1ca6eda65a3cff92a4d19
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.1"
+  http:
+    dependency: transitive
+    description:
+      name: http
+      sha256: "761a297c042deedc1ffbb156d6e2af13886bb305c2a343a4d972504cd67dd938"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.1"
+  http_multi_server:
+    dependency: transitive
+    description:
+      name: http_multi_server
+      sha256: "97486f20f9c2f7be8f514851703d0119c3596d14ea63227af6f7a481ef2b2f8b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.2.1"
+  http_parser:
+    dependency: transitive
+    description:
+      name: http_parser
+      sha256: "2aa08ce0341cc9b354a498388e30986515406668dbcc4f7c950c3e715496693b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.2"
   intl:
     dependency: "direct main"
     description:
@@ -104,6 +416,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.19.0"
+  io:
+    dependency: transitive
+    description:
+      name: io
+      sha256: "2ec25704aba361659e10e3e5f5d672068d332fc8ac516421d483a11e5cbd061e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.4"
+  js:
+    dependency: transitive
+    description:
+      name: js
+      sha256: c1b2e9b5ea78c45e1a0788d29606ba27dc5f71f019f32ca5140f61ef071838cf
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.1"
   json_annotation:
     dependency: "direct main"
     description:
@@ -116,26 +444,26 @@ packages:
     dependency: transitive
     description:
       name: leak_tracker
-      sha256: "78eb209deea09858f5269f5a5b02be4049535f568c07b275096836f01ea323fa"
+      sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a"
       url: "https://pub.dev"
     source: hosted
-    version: "10.0.0"
+    version: "10.0.4"
   leak_tracker_flutter_testing:
     dependency: transitive
     description:
       name: leak_tracker_flutter_testing
-      sha256: b46c5e37c19120a8a01918cfaf293547f47269f7cb4b0058f21531c2465d6ef0
+      sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.1"
+    version: "3.0.3"
   leak_tracker_testing:
     dependency: transitive
     description:
       name: leak_tracker_testing
-      sha256: a597f72a664dbd293f3bfc51f9ba69816f84dcd403cdac7066cb3f6003f3ab47
+      sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.1"
+    version: "3.0.1"
   lints:
     dependency: transitive
     description:
@@ -144,6 +472,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.0"
+  lists:
+    dependency: transitive
+    description:
+      name: lists
+      sha256: "4ca5c19ae4350de036a7e996cdd1ee39c93ac0a2b840f4915459b7d0a7d4ab27"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.1"
+  logging:
+    dependency: transitive
+    description:
+      name: logging
+      sha256: "623a88c9594aa774443aa3eb2d41807a48486b5613e67599fb4c41c0ad47c340"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.0"
   matcher:
     dependency: transitive
     description:
@@ -164,10 +508,42 @@ packages:
     dependency: transitive
     description:
       name: meta
-      sha256: d584fa6707a52763a52446f02cc621b077888fb63b93bbcb1143a7be5a0c0c04
+      sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.12.0"
+  mime:
+    dependency: transitive
+    description:
+      name: mime
+      sha256: "2e123074287cc9fd6c09de8336dae606d1ddb88d9ac47358826db698c176a1f2"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.5"
+  open_file_plus:
+    dependency: "direct main"
+    description:
+      name: open_file_plus
+      sha256: "01ad7011d46d253aa22e5f0bc7345ca49cfe652c50ae9b0af945491c1728a8c3"
       url: "https://pub.dev"
     source: hosted
-    version: "1.11.0"
+    version: "3.4.1+1"
+  overlay_tutorial:
+    dependency: "direct main"
+    description:
+      name: overlay_tutorial
+      sha256: "672609c2bae689d87d58099b1fa3a0bd91359d5457cda6d5555629f999544d73"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.0"
+  package_config:
+    dependency: transitive
+    description:
+      name: package_config
+      sha256: "1c5b77ccc91e4823a5af61ee74e6b972db1ef98c2ff5a18d3161c982a55448bd"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
   path:
     dependency: transitive
     description:
@@ -176,6 +552,38 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.9.0"
+  path_parsing:
+    dependency: transitive
+    description:
+      name: path_parsing
+      sha256: e3e67b1629e6f7e8100b367d3db6ba6af4b1f0bb80f64db18ef1fbabd2fa9ccf
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.1"
+  path_provider:
+    dependency: "direct main"
+    description:
+      name: path_provider
+      sha256: c9e7d3a4cd1410877472158bee69963a4579f78b68c65a2b7d40d1a7a88bb161
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.3"
+  path_provider_android:
+    dependency: transitive
+    description:
+      name: path_provider_android
+      sha256: "30c5aa827a6ae95ce2853cdc5fe3971daaac00f6f081c419c013f7f57bff2f5e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.7"
+  path_provider_foundation:
+    dependency: transitive
+    description:
+      name: path_provider_foundation
+      sha256: f234384a3fdd67f989b4d54a5d73ca2a6c422fa55ae694381ae0f4375cd1ea16
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.0"
   path_provider_linux:
     dependency: transitive
     description:
@@ -200,6 +608,62 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.2.1"
+  permission_handler:
+    dependency: "direct main"
+    description:
+      name: permission_handler
+      sha256: "18bf33f7fefbd812f37e72091a15575e72d5318854877e0e4035a24ac1113ecb"
+      url: "https://pub.dev"
+    source: hosted
+    version: "11.3.1"
+  permission_handler_android:
+    dependency: transitive
+    description:
+      name: permission_handler_android
+      sha256: b29a799ca03be9f999aa6c39f7de5209482d638e6f857f6b93b0875c618b7e54
+      url: "https://pub.dev"
+    source: hosted
+    version: "12.0.7"
+  permission_handler_apple:
+    dependency: transitive
+    description:
+      name: permission_handler_apple
+      sha256: e6f6d73b12438ef13e648c4ae56bd106ec60d17e90a59c4545db6781229082a0
+      url: "https://pub.dev"
+    source: hosted
+    version: "9.4.5"
+  permission_handler_html:
+    dependency: transitive
+    description:
+      name: permission_handler_html
+      sha256: "54bf176b90f6eddd4ece307e2c06cf977fb3973719c35a93b85cc7093eb6070d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.1"
+  permission_handler_platform_interface:
+    dependency: transitive
+    description:
+      name: permission_handler_platform_interface
+      sha256: "48d4fcf201a1dad93ee869ab0d4101d084f49136ec82a8a06ed9cfeacab9fd20"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.2.1"
+  permission_handler_windows:
+    dependency: transitive
+    description:
+      name: permission_handler_windows
+      sha256: "1a790728016f79a41216d88672dbc5df30e686e811ad4e698bfc51f76ad91f1e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.2.1"
+  petitparser:
+    dependency: transitive
+    description:
+      name: petitparser
+      sha256: c15605cd28af66339f8eb6fbe0e541bfe2d1b72d5825efc6598f3e0a31b9ad27
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.0.2"
   platform:
     dependency: transitive
     description:
@@ -216,6 +680,46 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.8"
+  pointycastle:
+    dependency: transitive
+    description:
+      name: pointycastle
+      sha256: "4be0097fcf3fd3e8449e53730c631200ebc7b88016acecab2b0da2f0149222fe"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.9.1"
+  pool:
+    dependency: transitive
+    description:
+      name: pool
+      sha256: "20fe868b6314b322ea036ba325e6fc0711a22948856475e2c2b6306e8ab39c2a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.5.1"
+  process_run:
+    dependency: transitive
+    description:
+      name: process_run
+      sha256: "6052115540ad88715d6bcee60656970f70c68c85846d1948b92e435f0382899e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0+1"
+  pub_semver:
+    dependency: transitive
+    description:
+      name: pub_semver
+      sha256: "40d3ab1bbd474c4c2328c91e3a7df8c6dd629b79ece4c4bd04bee496a224fb0c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.4"
+  pubspec_parse:
+    dependency: transitive
+    description:
+      name: pubspec_parse
+      sha256: c799b721d79eb6ee6fa56f00c04b472dcd44a30d258fac2174a6ec57302678f8
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.0"
   shared_preferences:
     dependency: "direct main"
     description:
@@ -272,11 +776,35 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.3.2"
+  shelf:
+    dependency: transitive
+    description:
+      name: shelf
+      sha256: ad29c505aee705f41a4d8963641f91ac4cee3c8fad5947e033390a7bd8180fa4
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.1"
+  shelf_web_socket:
+    dependency: transitive
+    description:
+      name: shelf_web_socket
+      sha256: "073c147238594ecd0d193f3456a5fe91c4b0abbcc68bf5cd95b36c4e194ac611"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.0"
   sky_engine:
     dependency: transitive
     description: flutter
     source: sdk
     version: "0.0.99"
+  source_gen:
+    dependency: transitive
+    description:
+      name: source_gen
+      sha256: "14658ba5f669685cd3d63701d01b31ea748310f7ab854e471962670abcf57832"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.5.0"
   source_span:
     dependency: transitive
     description:
@@ -285,6 +813,54 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.10.0"
+  sqflite:
+    dependency: "direct main"
+    description:
+      name: sqflite
+      sha256: a43e5a27235518c03ca238e7b4732cf35eabe863a369ceba6cbefa537a66f16d
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.3+1"
+  sqflite_common:
+    dependency: transitive
+    description:
+      name: sqflite_common
+      sha256: "3da423ce7baf868be70e2c0976c28a1bb2f73644268b7ffa7d2e08eab71f16a4"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.5.4"
+  sqflite_common_ffi:
+    dependency: transitive
+    description:
+      name: sqflite_common_ffi
+      sha256: "4d6137c29e930d6e4a8ff373989dd9de7bac12e3bc87bce950f6e844e8ad3bb5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.3"
+  sqflite_common_ffi_web:
+    dependency: transitive
+    description:
+      name: sqflite_common_ffi_web
+      sha256: cfc9d1c61a3e06e5b2e96994a44b11125b4f451fee95b9fad8bd473b4613d592
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.4.3+1"
+  sqlite3:
+    dependency: transitive
+    description:
+      name: sqlite3
+      sha256: "6d17989c0b06a5870b2190d391925186f944cb943e5262d0d3f778fcfca3bc6e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.4"
+  sqlparser:
+    dependency: transitive
+    description:
+      name: sqlparser
+      sha256: "7b20045d1ccfb7bc1df7e8f9fee5ae58673fce6ff62cefbb0e0fd7214e90e5a0"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.34.1"
   stack_trace:
     dependency: transitive
     description:
@@ -301,6 +877,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.2"
+  stream_transform:
+    dependency: transitive
+    description:
+      name: stream_transform
+      sha256: "14a00e794c7c11aa145a170587321aedce29769c08d7f58b1d141da75e3b1c6f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
   string_scanner:
     dependency: transitive
     description:
@@ -309,6 +893,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.2.0"
+  strings:
+    dependency: transitive
+    description:
+      name: strings
+      sha256: "052836499f03897d3860a603b330c1ea3c8a14177b21f34b15a1295f36024aae"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.2"
+  synchronized:
+    dependency: transitive
+    description:
+      name: synchronized
+      sha256: "539ef412b170d65ecdafd780f924e5be3f60032a1128df156adad6c5b373d558"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.0+1"
   term_glyph:
     dependency: transitive
     description:
@@ -321,10 +921,66 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b"
+      sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.0"
+  timezone:
+    dependency: transitive
+    description:
+      name: timezone
+      sha256: "2236ec079a174ce07434e89fcd3fcda430025eb7692244139a9cf54fdcf1fc7d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.9.4"
+  timing:
+    dependency: transitive
+    description:
+      name: timing
+      sha256: "70a3b636575d4163c477e6de42f247a23b315ae20e86442bebe32d3cabf61c32"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.1"
+  typed_data:
+    dependency: transitive
+    description:
+      name: typed_data
+      sha256: facc8d6582f16042dd49f2463ff1bd6e2c9ef9f3d5da3d9b087e244a7b564b3c
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.2"
+  unicode:
+    dependency: transitive
+    description:
+      name: unicode
+      sha256: "0f69e46593d65245774d4f17125c6084d2c20b4e473a983f6e21b7d7762218f1"
       url: "https://pub.dev"
     source: hosted
-    version: "0.6.1"
+    version: "0.3.1"
+  vector_graphics:
+    dependency: transitive
+    description:
+      name: vector_graphics
+      sha256: "32c3c684e02f9bc0afb0ae0aa653337a2fe022e8ab064bcd7ffda27a74e288e3"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.11+1"
+  vector_graphics_codec:
+    dependency: transitive
+    description:
+      name: vector_graphics_codec
+      sha256: c86987475f162fadff579e7320c7ddda04cd2fdeffbe1129227a85d9ac9e03da
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.11+1"
+  vector_graphics_compiler:
+    dependency: transitive
+    description:
+      name: vector_graphics_compiler
+      sha256: "12faff3f73b1741a36ca7e31b292ddeb629af819ca9efe9953b70bd63fc8cd81"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.11+1"
   vector_math:
     dependency: transitive
     description:
@@ -337,10 +993,18 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: b3d56ff4341b8f182b96aceb2fa20e3dcb336b9f867bc0eafc0de10f1048e957
+      sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec"
       url: "https://pub.dev"
     source: hosted
-    version: "13.0.0"
+    version: "14.2.1"
+  watcher:
+    dependency: transitive
+    description:
+      name: watcher
+      sha256: "3d2ad6751b3c16cf07c7fca317a1413b3f26530319181b37e3b9039b84fc01d8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   web:
     dependency: transitive
     description:
@@ -349,14 +1013,38 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.5.1"
+  web_socket:
+    dependency: transitive
+    description:
+      name: web_socket
+      sha256: "3c12d96c0c9a4eec095246debcea7b86c0324f22df69893d538fcc6f1b8cce83"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.6"
+  web_socket_channel:
+    dependency: transitive
+    description:
+      name: web_socket_channel
+      sha256: "9f187088ed104edd8662ca07af4b124465893caf063ba29758f97af57e61da8f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.1"
   win32:
     dependency: transitive
     description:
       name: win32
-      sha256: "0a989dc7ca2bb51eac91e8fd00851297cfffd641aa7538b165c62637ca0eaa4a"
+      sha256: a79dbe579cb51ecd6d30b17e0cae4e0ea15e2c0e66f69ad4198f22a6789e94f4
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.5.1"
+  win32_registry:
+    dependency: transitive
+    description:
+      name: win32_registry
+      sha256: "10589e0d7f4e053f2c61023a31c9ce01146656a70b7b7f0828c0b46d7da2a9bb"
       url: "https://pub.dev"
     source: hosted
-    version: "5.4.0"
+    version: "1.1.3"
   xdg_directories:
     dependency: transitive
     description:
@@ -365,6 +1053,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
+  xml:
+    dependency: transitive
+    description:
+      name: xml
+      sha256: b015a8ad1c488f66851d762d3090a21c600e479dc75e68328c52774040cf9226
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.5.0"
+  yaml:
+    dependency: transitive
+    description:
+      name: yaml
+      sha256: "75769501ea3489fca56601ff33454fe45507ea3bfb014161abc3b43ae25989d5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.2"
 sdks:
-  dart: ">=3.3.2 <4.0.0"
-  flutter: ">=3.19.0"
+  dart: ">=3.4.0 <4.0.0"
+  flutter: ">=3.22.0"
diff --git a/pubspec.yaml b/pubspec.yaml
index e8edf12..89e4789 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -2,7 +2,7 @@ name: flutter_dtr_app
 description: "A new Flutter project."
 # The following line prevents the package from being accidentally published to
 # pub.dev using `flutter pub publish`. This is preferred for private packages.
-publish_to: 'none' # Remove this line if you wish to publish to pub.dev
+publish_to: "none" # Remove this line if you wish to publish to pub.dev
 
 # The following defines the version and build number for your application.
 # A version number is three numbers separated by dots, like 1.2.43
@@ -16,10 +16,10 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 0.1.1-beta
+version: 0.2.0-rc1
 
 environment:
-  sdk: '>=3.3.2 <4.0.0'
+  sdk: ">=3.3.2 <4.0.0"
 
 # Dependencies specify other packages that your package needs in order to work.
 # To automatically upgrade your package dependencies to the latest versions
@@ -31,13 +31,22 @@ dependencies:
   flutter:
     sdk: flutter
 
-
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.6
   intl: ^0.19.0
   json_annotation: ^4.8.1
   shared_preferences: ^2.2.2
+  flutter_svg: ^2.0.10+1
+  floor: ^1.5.0
+  sqflite: ^2.3.3+1
+  excel: ^4.0.3
+  flutter_local_notifications: ^17.2.1+2
+  open_file_plus: ^3.4.1+1
+  path_provider: ^2.1.3
+  permission_handler: ^11.3.1
+  device_info_plus: ^10.1.0
+  overlay_tutorial: ^3.0.0
 
 dev_dependencies:
   flutter_test:
@@ -49,22 +58,30 @@ dev_dependencies:
   # package. See that file for information about deactivating specific lint
   # rules and activating additional ones.
   flutter_lints: ^3.0.0
+  floor_generator: ^1.5.0
+  build_runner: ^2.4.11
 
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec
 
 # The following section is specific to Flutter packages.
 flutter:
-
   # The following line ensures that the Material Icons font is
   # included with your application, so that you can use the icons in
   # the material Icons class.
   uses-material-design: true
 
   # To add assets to your application, add an assets section, like this:
-  # assets:
-  #   - images/a_dot_burr.jpeg
-  #   - images/a_dot_ham.jpeg
+  assets:
+    - assets/images/app_logo.png
+    - assets/images/clapping_hands.png
+    - assets/images/party_cone.png
+    - assets/icons/icon_home.svg
+    - assets/icons/icon_delete.svg
+    - assets/icons/icon_calendar.svg
+    - assets/icons/icon_back.svg
+    - assets/icons/icon_guide_arrow_up.svg
+    - assets/icons/icon_guide_arrow_down.svg
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware
@@ -77,17 +94,42 @@ flutter:
   # "family" key with the font family name, and a "fonts" key with a
   # list giving the asset and other descriptors for the font. For
   # example:
-  # fonts:
-  #   - family: Schyler
-  #     fonts:
-  #       - asset: fonts/Schyler-Regular.ttf
-  #       - asset: fonts/Schyler-Italic.ttf
-  #         style: italic
-  #   - family: Trajan Pro
-  #     fonts:
-  #       - asset: fonts/TrajanPro.ttf
-  #       - asset: fonts/TrajanPro_Bold.ttf
-  #         weight: 700
+  fonts:
+    - family: Nunito
+      fonts:
+        - asset: assets/fonts/Nunito-Regular.ttf
+        - asset: assets/fonts/Nunito-Italic.ttf
+          style: italic
+        - asset: assets/fonts/Nunito-ExtraLight.ttf
+          weight: 200
+        - asset: assets/fonts/Nunito-Light.ttf
+          weight: 300
+        - asset: assets/fonts/Nunito-Medium.ttf
+          weight: 500
+        - asset: assets/fonts/Nunito-SemiBold.ttf
+          weight: 600
+        - asset: assets/fonts/Nunito-Bold.ttf
+          weight: 700
+        - asset: assets/fonts/Nunito-ExtraBold.ttf
+          weight: 800
+        - asset: assets/fonts/Nunito-Black.ttf
+          weight: 900
+    - family: Roboto
+      fonts:
+        - asset: assets/fonts/Roboto-Regular.ttf
+        - asset: assets/fonts/Roboto-Italic.ttf
+          style: italic
+        - asset: assets/fonts/Roboto-Thin.ttf
+          weight: 100
+        - asset: assets/fonts/Roboto-Light.ttf
+          weight: 300
+        - asset: assets/fonts/Roboto-Medium.ttf
+          weight: 500
+        - asset: assets/fonts/Roboto-Bold.ttf
+          weight: 700
+        - asset: assets/fonts/Roboto-Black.ttf
+          weight: 900
+
   #
   # For details regarding fonts from package dependencies,
   # see https://flutter.dev/custom-fonts/#from-packages
diff --git a/test/date_range_test.dart b/test/date_range_test.dart
new file mode 100644
index 0000000..33442ff
--- /dev/null
+++ b/test/date_range_test.dart
@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/utilities/date_range.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  group('Test date ranges', () {
+    test('Get the date range of the current week', () {
+      DateTime today = DateTime(2024, 7, 30);
+      DateTimeRange thisWeek = DateRange.getThisWeek(today);
+
+      DateTime expectedDateStart = DateTime(2024, 7, 29);
+      DateTime expectedDateEnd = DateTime(2024, 8, 4);
+
+      expect(thisWeek.start, expectedDateStart);
+      expect(thisWeek.end, expectedDateEnd);
+    });
+
+    test('Get the date range of the last week', () {
+      DateTime today = DateTime(2024, 7, 30);
+      DateTimeRange lastWeek = DateRange.getLastWeek(today);
+
+      DateTime expectedDateStart = DateTime(2024, 7, 22);
+      DateTime expectedDateEnd = DateTime(2024, 7, 28);
+
+      expect(lastWeek.start, expectedDateStart);
+      expect(lastWeek.end, expectedDateEnd);
+    });
+
+    test('Get the first date of the current month', () {
+      DateTime today = DateTime(2024, 7, 30);
+      DateTime thisMonth = DateRange.getThisMonth(today);
+
+      expect(thisMonth, DateTime(2024, 7, 1));
+    });
+
+    test('Get the first date of the current year', () {
+      DateTime today = DateTime(2024, 7, 30);
+      DateTime thisYear = DateRange.getThisYear(today);
+
+      expect(thisYear, DateTime(2024, 1, 1));
+    });
+  });
+}
diff --git a/test/total_hours_test.dart b/test/total_hours_test.dart
new file mode 100644
index 0000000..defaba3
--- /dev/null
+++ b/test/total_hours_test.dart
@@ -0,0 +1,82 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dtr_app/core/utilities/calculate_total_hours.dart';
+import 'package:flutter_dtr_app/core/utilities/double_to_time.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  group('Calculate Total Hours', () {
+    test('Total Hours Duration', () {
+      TimeOfDay startTime = const TimeOfDay(hour: 8, minute: 30);
+      TimeOfDay endTime = const TimeOfDay(hour: 17, minute: 0);
+
+      double totalHours = calculateTotalHours(start: startTime, end: endTime);
+      expect(totalHours, 8.5);
+    });
+
+    test('Total Hours Duration from Double to String Time', () {
+      TimeOfDay startTime = const TimeOfDay(hour: 8, minute: 30);
+      TimeOfDay endTime = const TimeOfDay(hour: 17, minute: 0);
+
+      double totalHours = calculateTotalHours(start: startTime, end: endTime);
+
+      String timeDuration = convertDoubleToTime(totalHours);
+      expect(timeDuration, '8hrs 30mins');
+    });
+
+    test('String Time Singular', () {
+      TimeOfDay startTime = const TimeOfDay(hour: 1, minute: 1);
+      TimeOfDay endTime = const TimeOfDay(hour: 2, minute: 2);
+
+      double totalHours = calculateTotalHours(start: startTime, end: endTime);
+
+      String timeDuration = convertDoubleToTime(totalHours);
+      expect(timeDuration, '1hr 1min');
+    });
+
+    test('String Time Plural', () {
+      TimeOfDay startTime = const TimeOfDay(hour: 1, minute: 1);
+      TimeOfDay endTime = const TimeOfDay(hour: 5, minute: 5);
+
+      double totalHours = calculateTotalHours(start: startTime, end: endTime);
+
+      String timeDuration = convertDoubleToTime(totalHours);
+      expect(timeDuration, '4hrs 4mins');
+    });
+
+    test('Show Only Minutes', () {
+      TimeOfDay startTime1 = const TimeOfDay(hour: 0, minute: 1);
+      TimeOfDay endTime1 = const TimeOfDay(hour: 0, minute: 2);
+
+      double totalHours1 = calculateTotalHours(start: startTime1, end: endTime1);
+
+      String timeDuration1 = convertDoubleToTime(totalHours1);
+      expect(timeDuration1, '1min');
+
+      TimeOfDay startTime2 = const TimeOfDay(hour: 0, minute: 1);
+      TimeOfDay endTime2 = const TimeOfDay(hour: 0, minute: 5);
+
+      double totalHours2 = calculateTotalHours(start: startTime2, end: endTime2);
+
+      String timeDuration2 = convertDoubleToTime(totalHours2);
+      expect(timeDuration2, '4mins');
+    });
+
+    test('Show Only Hours', () {
+      TimeOfDay startTime1 = const TimeOfDay(hour: 1, minute: 0);
+      TimeOfDay endTime1 = const TimeOfDay(hour: 2, minute: 0);
+
+      double totalHours1 = calculateTotalHours(start: startTime1, end: endTime1);
+
+      String timeDuration1 = convertDoubleToTime(totalHours1);
+      expect(timeDuration1, '1hr');
+
+      TimeOfDay startTime2 = const TimeOfDay(hour: 1, minute: 0);
+      TimeOfDay endTime2 = const TimeOfDay(hour: 5, minute: 0);
+
+      double totalHours2 = calculateTotalHours(start: startTime2, end: endTime2);
+
+      String timeDuration2 = convertDoubleToTime(totalHours2);
+      expect(timeDuration2, '4hrs');
+    });
+  });
+}
diff --git a/web/index.html b/web/index.html
index ea1a9a3..98add3f 100644
--- a/web/index.html
+++ b/web/index.html
@@ -31,29 +31,8 @@
 
   <title>flutter_dtr_app</title>
   <link rel="manifest" href="manifest.json">
-
-  <script>
-    // The value below is injected by flutter build, do not touch.
-    const serviceWorkerVersion = null;
-  </script>
-  <!-- This script adds the flutter initialization JS code -->
-  <script src="flutter.js" defer></script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-  <script>
-    window.addEventListener('load', function(ev) {
-      // Download main.dart.js
-      _flutter.loader.loadEntrypoint({
-        serviceWorker: {
-          serviceWorkerVersion: serviceWorkerVersion,
-        },
-        onEntrypointLoaded: function(engineInitializer) {
-          engineInitializer.initializeEngine().then(function(appRunner) {
-            appRunner.runApp();
-          });
-        }
-      });
-    });
-  </script>
+  <script src="flutter_bootstrap.js" async></script>
 </body>
 </html>
diff --git a/windows/flutter/generated_plugin_registrant.cc b/windows/flutter/generated_plugin_registrant.cc
index 8b6d468..48de52b 100644
--- a/windows/flutter/generated_plugin_registrant.cc
+++ b/windows/flutter/generated_plugin_registrant.cc
@@ -6,6 +6,9 @@
 
 #include "generated_plugin_registrant.h"
 
+#include <permission_handler_windows/permission_handler_windows_plugin.h>
 
 void RegisterPlugins(flutter::PluginRegistry* registry) {
+  PermissionHandlerWindowsPluginRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("PermissionHandlerWindowsPlugin"));
 }
diff --git a/windows/flutter/generated_plugins.cmake b/windows/flutter/generated_plugins.cmake
index b93c4c3..0e69e40 100644
--- a/windows/flutter/generated_plugins.cmake
+++ b/windows/flutter/generated_plugins.cmake
@@ -3,6 +3,7 @@
 #
 
 list(APPEND FLUTTER_PLUGIN_LIST
+  permission_handler_windows
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST