diff --git a/todo_app_ui/lib/database.dart b/todo_app_ui/lib/database.dart
new file mode 100644
index 00000000..40f555dc
--- /dev/null
+++ b/todo_app_ui/lib/database.dart
@@ -0,0 +1,26 @@
+import 'package:hive_flutter/hive_flutter.dart';
+
+class todoDatabase {
+  List todoList = [];
+
+  // referencing the box
+  final mybox = Hive.box('mybox');
+
+  //run this method if it is the firsrt time to open the app
+  void createInitialData() {
+    todoList = [
+      ["add your first task", false],
+      ["add your second task", false],
+    ];
+  }
+
+  // load data from the database
+  void LoadData() {
+    todoList = mybox.get("TodoList");
+  }
+
+  //update the database
+  void UpdateDatabase() {
+    mybox.put("TodoList", todoList);
+  }
+}
diff --git a/todo_app_ui/lib/dialog_box.dart b/todo_app_ui/lib/dialog_box.dart
new file mode 100644
index 00000000..dd2eb61b
--- /dev/null
+++ b/todo_app_ui/lib/dialog_box.dart
@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:today/my_buttons.dart';
+
+class DialogBox extends StatelessWidget {
+  final controller;
+  VoidCallback onSave;
+  VoidCallback onCancel;
+  DialogBox({
+    super.key,
+    required this.controller,
+    required this.onSave,
+    required this.onCancel,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      backgroundColor: Colors.green[200],
+      content: Container(
+        height: 120,
+        child:
+            Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
+          TextField(
+            controller: controller,
+            decoration: InputDecoration(
+              border: OutlineInputBorder(),
+              hintText: "Add New Task",
+            ),
+          ),
+
+          // save and cancel buttons
+          Row(
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: [
+              MyButtons(text: "Save", onPressed: onSave),
+              const SizedBox(width: 8),
+              MyButtons(text: "Cancel", onPressed: onCancel),
+            ],
+          ),
+        ]),
+      ),
+    );
+  }
+}
diff --git a/todo_app_ui/lib/main.dart b/todo_app_ui/lib/main.dart
new file mode 100644
index 00000000..c351c7dd
--- /dev/null
+++ b/todo_app_ui/lib/main.dart
@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+// import 'package:hive_flutter/hive_flutter.dart';
+import 'my_home_page.dart';
+
+void main() async {
+  // init hive
+  // await Hive.initFlutter();
+
+  // open a box
+  // await Hive.openBox('my box');
+
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      theme: ThemeData(primarySwatch: Colors.green),
+      home: const MyHomePage(),
+    );
+  }
+}
diff --git a/todo_app_ui/lib/my_buttons.dart b/todo_app_ui/lib/my_buttons.dart
new file mode 100644
index 00000000..9fd96346
--- /dev/null
+++ b/todo_app_ui/lib/my_buttons.dart
@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+
+class MyButtons extends StatelessWidget {
+  final String text;
+  VoidCallback onPressed;
+  MyButtons({
+    super.key,
+    required this.text,
+    required this.onPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialButton(
+      onPressed: onPressed,
+      color: Theme.of(context).primaryColor,
+      child: Text(text),
+    );
+  }
+}
diff --git a/todo_app_ui/lib/my_home_page.dart b/todo_app_ui/lib/my_home_page.dart
new file mode 100644
index 00000000..4b468645
--- /dev/null
+++ b/todo_app_ui/lib/my_home_page.dart
@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+// import 'package:hive_flutter/hive_flutter.dart';
+// import 'package:today/database.dart';
+import 'package:today/dialog_box.dart';
+import 'package:today/todo_list.dart';
+
+class MyHomePage extends StatefulWidget {
+  const MyHomePage({super.key});
+
+  @override
+  State<MyHomePage> createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  //referencing hive box
+  // final mybox = Hive.box('mybox');
+  // database
+  // todoDatabase db = todoDatabase();
+
+  // @override
+  // void initState() {
+  //   // first time opening app
+  //   if (mybox.get("Todolist") == null) {
+  //     db.createInitialData();
+  //   } else {
+  //     // load the data
+  //     db.LoadData();
+  //   }
+  //   super.initState();
+  // }
+
+  // list todolist
+  List todoList = [
+    ["Make an todo app", false],
+    ["write a blog", false]
+  ];
+
+  //text editing controller
+  final controller = TextEditingController();
+
+  // check box changed
+  void CheckBoxChanged(bool? value, int index) {
+    setState(() {
+      todoList[index][1] = !todoList[index][1];
+    });
+    //db.UpdateDatabase();
+  }
+
+  // save new task
+  void SaveNewTask() {
+    setState(() {
+      todoList.add([controller.text, false]);
+      controller.clear();
+    });
+    Navigator.of(context).pop();
+    //db.UpdateDatabase();
+  }
+
+  // create new task
+  void CreateNewTask() {
+    showDialog(
+      context: context,
+      builder: (context) {
+        return DialogBox(
+          controller: controller,
+          onSave: SaveNewTask,
+          onCancel: () => Navigator.of(context).pop(),
+        );
+      },
+    );
+  }
+
+  // create delete task
+  void deleteTask(int index) {
+    setState(() {
+      todoList.removeAt(index);
+    });
+    //db.UpdateDatabase();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.green[200],
+      appBar: AppBar(
+        centerTitle: true,
+        title: const Text("TODAY"),
+        backgroundColor: Colors.green,
+        elevation: 0,
+      ),
+      floatingActionButton: FloatingActionButton(
+        onPressed: CreateNewTask,
+        child: const Icon(Icons.add),
+      ),
+      body: ListView.builder(
+        itemCount: todoList.length,
+        itemBuilder: (context, index) {
+          return TodoList(
+            taskName: todoList[index][0],
+            taskcompleted: todoList[index][1],
+            onChanged: (value) => CheckBoxChanged(value, index),
+            deleteFunction: (context) => deleteTask(index),
+          );
+        },
+      ),
+    );
+  }
+}
diff --git a/todo_app_ui/lib/todo_list.dart b/todo_app_ui/lib/todo_list.dart
new file mode 100644
index 00000000..6174491d
--- /dev/null
+++ b/todo_app_ui/lib/todo_list.dart
@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_slidable/flutter_slidable.dart';
+
+class TodoList extends StatelessWidget {
+  final String taskName;
+  final bool taskcompleted;
+  Function(bool?)? onChanged;
+  Function(BuildContext)? deleteFunction;
+
+  TodoList(
+      {super.key,
+      required this.taskName,
+      required this.taskcompleted,
+      required this.onChanged,
+      required this.deleteFunction});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(left: 25, right: 25, top: 25),
+      child: Slidable(
+        endActionPane: ActionPane(
+          motion: StretchMotion(),
+          children: [
+            SlidableAction(
+              onPressed: deleteFunction,
+              icon: Icons.delete,
+              backgroundColor: Color.fromARGB(255, 241, 83, 72),
+              borderRadius: BorderRadius.circular(12),
+            )
+          ],
+        ),
+        child: Container(
+          padding: const EdgeInsets.all(24),
+          child: Row(
+            children: [
+              // checkbox work
+              Checkbox(
+                value: taskcompleted,
+                onChanged: onChanged,
+                activeColor: Colors.black,
+                checkColor: Colors.white,
+              ),
+
+              //text work
+              Text(
+                taskName,
+                style: TextStyle(
+                  decoration: taskcompleted
+                      ? TextDecoration.lineThrough
+                      : TextDecoration.none,
+                ),
+              ),
+            ],
+          ),
+          decoration: BoxDecoration(
+              color: Colors.green, borderRadius: BorderRadius.circular(12)),
+        ),
+      ),
+    );
+  }
+}
diff --git a/todo_app_ui/readme.md b/todo_app_ui/readme.md
new file mode 100644
index 00000000..f51b51fb
--- /dev/null
+++ b/todo_app_ui/readme.md
@@ -0,0 +1,33 @@
+## Todo app user interface build with the technology flutter and dart...
+
+This project is used to add your daily task, you can mark it as complete or not, and you can delete it too...
+
+I am attaching few images of the app.
+
+First opening the app.
+
+<img width="300" alt="image" src="https://user-images.githubusercontent.com/92267172/194768746-8196139f-21cc-4986-9ced-ea8ef94c4a80.png">
+
+Adding new task...
+
+<img width="300" alt="image" src="https://user-images.githubusercontent.com/92267172/194768833-4286c490-82d2-4c90-a86e-1d8add1bddb3.png">
+
+<img width="300" alt="image" src="https://user-images.githubusercontent.com/92267172/194769016-da44bc5c-b5e4-49f5-ad58-6df3a16f4ca9.png">
+
+New Task added...
+
+<img width="300" alt="image" src="https://user-images.githubusercontent.com/92267172/194769087-d3884bd0-4ea0-4465-b776-60b99e26b6ea.png">
+
+If completed the old task then mark it as completed...
+
+<img width="300" alt="image" src="https://user-images.githubusercontent.com/92267172/194769163-cf2e274b-8c5a-49f3-a916-6b42c01407ce.png">
+
+You can delete your task by sliding left...
+
+<img width="300" alt="image" src="https://user-images.githubusercontent.com/92267172/194769381-407764c5-4eb2-4810-89a8-1a15f24e85a5.png">
+
+And yes it is deleted...
+
+<img width="300" alt="image" src="https://user-images.githubusercontent.com/92267172/194769462-1740e2ae-7168-47ad-8187-9d116b08f122.png">
+
+Thank you...