diff --git a/lib/backend/DataManager.dart b/lib/backend/DataManager.dart
index 5115dc1..083b428 100644
--- a/lib/backend/DataManager.dart
+++ b/lib/backend/DataManager.dart
@@ -2,11 +2,14 @@ import 'dart:convert';
 
 import 'package:flutter/material.dart';
 import 'package:http/http.dart' as http;
+import 'package:intl/intl.dart';
 import 'package:queue_mgr/backend/DebugHelper.dart';
 // DateFormat dateFormat;
 
 final String API_ENDPOINT= "https://vps.playpoolstudios.com/qms/api/";
-
+DateFormat dateFormat = DateFormat("yyyy/MM/dd");
+DateFormat timeFormat = DateFormat("hh:mm a");
+DateFormat dateTimeFormat = DateFormat("yyyy/MM/dd hh:mm a");
 class DataManager{
   static _DataManager? m_instance = null;
   static _DataManager instance(){
@@ -33,10 +36,9 @@ class _DataManager{
     }catch(e){
       Debug.LogError(e);
     }
-
   }
 
-  Future<void> AddService(String name, DateTime sTime, DateTime eTime,TimeOfDay duration) async {
+  Future<void> AddService(String name, DateTime sTime, DateTime eTime,Duration duration) async {
     try{
       var response = (await http.post(
       Uri.parse('${API_ENDPOINT}add_service.php'),
@@ -44,7 +46,7 @@ class _DataManager{
             'name':name,
             'stime':sTime.toString(),
             'etime':eTime.toString(),
-            'duration':"${duration.hour}:${duration.minute}"
+            'duration':"${duration.ToHoursAndMinutes()}"
           }));
       Debug.LogResponse(response.body.toString());
       services = jsonDecode(response.body.toString());
@@ -53,4 +55,22 @@ class _DataManager{
       Debug.LogError(e);
     }
   }
+
+  Map<String,dynamic> GetServiceById(String id){
+    for (var service in services) {
+      Map<String,dynamic> s = jsonDecode(service.toString());
+
+      if(s['id']==id){
+        return s;
+      }
+    }
+    return {};
+  }
+}
+
+
+extension DurationExtensions on Duration{
+  String ToHoursAndMinutes(){
+    return "${this.inHours}:${this.inMinutes}";
+  }
 }
\ No newline at end of file
diff --git a/lib/backend/Dialogs.dart b/lib/backend/Dialogs.dart
new file mode 100644
index 0000000..fe7efe7
--- /dev/null
+++ b/lib/backend/Dialogs.dart
@@ -0,0 +1,113 @@
+// import 'package:fhub/backend/login_mgr.dart';
+
+import 'package:duration_picker/duration_picker.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:queue_mgr/backend/DebugHelper.dart';
+// import 'package:flutter_spinkit/flutter_spinkit.dart';
+// import 'package:shared_preferences/shared_preferences.dart';
+// import 'package:url_launcher/url_launcher.dart';
+import '../main.dart';
+
+class Dialogs{
+
+  static showAlertDialog(BuildContext context, String title, String message) {
+    // set up the button
+    Widget okButton = TextButton(
+      child: Text("OK"),
+      onPressed: () {
+        Navigator.of(context).pop();
+      },
+    );
+
+    // set up the AlertDialog
+    AlertDialog alert = AlertDialog(
+      backgroundColor: Color(0xFF1F1F1F),
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
+      title: Text(title,textAlign: TextAlign.center,),
+      content: Text(message,textAlign: TextAlign.center,),
+      actions: [
+        okButton,
+      ],
+
+    );
+
+    // show the dialog
+    showDialog(
+      context: context,
+      builder: (BuildContext context) {
+        return alert;
+      },
+    );
+  }
+
+  static bool showing = false;
+  static BuildContext? context;
+  static waiting(){
+    showing=true;
+    // context=navigatorKey.currentContext;
+    if(context!=null) {
+      return showDialog(
+          context: context!,
+          barrierDismissible: false,
+          routeSettings: const RouteSettings(name: "Progress"),
+          builder: (BuildContext context) {
+            return AlertDialog(
+              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
+              backgroundColor: Color(0xaa101010),
+              title: Row(
+                mainAxisSize: MainAxisSize.max,
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  // SpinKitChasingDots(color: Colors.green),
+                  Expanded(child: Text("Loading",textAlign: TextAlign.center,)),
+                ],
+              ),
+            );
+          }
+      );
+    }
+  }
+
+  static showDurationPicker(BuildContext context, String title) {
+    // set up the button
+    Widget okButton = TextButton(
+      child: Text("OK"),
+      onPressed: () {
+        Navigator.of(context).pop();
+      },
+    );
+
+    // set up the AlertDialog
+    AlertDialog alert = AlertDialog(
+      backgroundColor: Color(0xFF1F1F1F),
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
+      title: Text(title,textAlign: TextAlign.center,),
+      // content: DurationPicker(onChange: (Duration value) { return value; },),
+      content: Container(
+        child: DurationPicker(onChange: (val){
+          Debug.Log(val);
+        },),
+      ),
+      actions: [
+        okButton,
+      ],
+
+    );
+
+    // show the dialog
+    showDialog(
+      context: context,
+      builder: (BuildContext context) {
+        return alert;
+      },
+    );
+  }
+// static hide(){
+//   showing=false;
+//   Navigator.of(navigatorKey.currentContext!).popUntil((route){
+//     return route.settings.name!="Progress";
+//   });
+// }
+
+}
diff --git a/lib/main.dart b/lib/main.dart
index e83aada..2681163 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -3,6 +3,7 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:queue_mgr/backend/DataManager.dart';
 import 'package:queue_mgr/new_service.dart';
+import 'package:queue_mgr/service_info.dart';
 
 import 'backend/DebugHelper.dart';
 
@@ -65,18 +66,23 @@ class _HomeState extends State<Home> {
                 shrinkWrap: true,
                 itemCount:DataManager.instance().services.length,
                 itemBuilder: (context,index){
-                  dynamic service = jsonDecode(DataManager.instance().services[index]);
-                  return Card(
-                    child: Center(
-                      child: Container(
-                        padding: EdgeInsets.all(10),
-                        child: Row(
-                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                          children: [
-                            Text(service['start_time']),
-                            Text(service['name']),
-                            Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(50),color: Colors.deepPurple), child: SizedBox(width:20,height: 20,child: Center(child: Text(service['members'].toString().split(',').length.toString()))),)
-                          ],
+                  Map<String,dynamic> service = jsonDecode(DataManager.instance().services[index]);
+                  return InkWell(
+                    onTap: (){
+                      Navigator.of(context).push(MaterialPageRoute(builder: (context)=> ServicePage(serviceId: service['id'])));
+                    },
+                    child: Card(
+                      child: Center(
+                        child: Container(
+                          padding: EdgeInsets.all(10),
+                          child: Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                            children: [
+                              Text(service['start_time']),
+                              Text(service['name']),
+                              Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(50),color: Colors.deepPurple), child: SizedBox(width:20,height: 20,child: Center(child: Text(service['members'].toString().split(',').length.toString()))),)
+                            ],
+                          ),
                         ),
                       ),
                     ),
diff --git a/lib/new_service.dart b/lib/new_service.dart
index 1347ea6..a27e5bd 100644
--- a/lib/new_service.dart
+++ b/lib/new_service.dart
@@ -1,3 +1,4 @@
+import 'package:duration_picker/duration_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:queue_mgr/backend/DataManager.dart';
 
@@ -14,7 +15,7 @@ class _NewServiceState extends State<NewService> {
   TimeOfDay sTime = TimeOfDay(hour: 2, minute: 2);
   DateTime eDate = DateTime.now();
   TimeOfDay eTime = TimeOfDay(hour: 2, minute: 2);
-  TimeOfDay duration = TimeOfDay(hour:0, minute: 15);
+  Duration duration = Duration(hours:0, minutes: 15);
 
   @override
   Widget build(BuildContext context) {
@@ -39,7 +40,10 @@ class _NewServiceState extends State<NewService> {
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: [
                       ElevatedButton(
-                        child: Text("${sDate.year}-${sDate.month}-${sDate.day}"),
+                        child: Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Text("${sDate.year}-${sDate.month}-${sDate.day}"),
+                        ),
                         onPressed: () async{
                           sDate = await showDatePicker(context: context, initialDate: DateTime.now(), firstDate: DateTime.now().subtract(const Duration(days: 350)), lastDate: DateTime.now().add(const Duration(days: 350))) ?? sDate;
                           setState(() {
@@ -47,8 +51,12 @@ class _NewServiceState extends State<NewService> {
                           });
                         },
                       ),
+                      SizedBox(width: 10,),
                       ElevatedButton(
-                        child: Text("${sTime.hour}:${sTime.minute}"),
+                        child: Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Text("${sTime.hour}:${sTime.minute}"),
+                        ),
                         onPressed: () async{
                           sTime = await showTimePicker(context: context, initialTime: sTime) ?? sTime;
                           setState(() {
@@ -65,7 +73,10 @@ class _NewServiceState extends State<NewService> {
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: [
                       ElevatedButton(
-                        child: Text("${eDate.year}-${eDate.month}-${eDate.day}"),
+                        child: Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Text("${eDate.year}-${eDate.month}-${eDate.day}"),
+                        ),
                         onPressed: () async{
                           eDate = await showDatePicker(context: context, initialDate: DateTime.now(), firstDate: DateTime.now().subtract(const Duration(days: 350)), lastDate: DateTime.now().add(const Duration(days: 350))) ?? eDate;
                           setState(() {
@@ -73,8 +84,13 @@ class _NewServiceState extends State<NewService> {
                           });
                         },
                       ),
+                      SizedBox(width: 10,),
+
                       ElevatedButton(
-                        child: Text("${eTime.hour}:${eTime.minute}"),
+                        child: Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Text("${eTime.hour}:${eTime.minute}"),
+                        ),
                         onPressed: () async{
                           eTime = await showTimePicker(context: context, initialTime: eTime) ?? eTime;
                           setState(() {
@@ -86,11 +102,12 @@ class _NewServiceState extends State<NewService> {
                   ),
                 ),
                 ListTile(
-                  title:Text("Duration for each"),
+                  title:Text("Session Duration"),
                   subtitle: ElevatedButton(
-                    child: Text("${duration.hour}:${duration.minute}"),
+                    child: Text("${duration.inHours}:${duration.inMinutes}"),
                     onPressed: () async{
-                      duration = await showTimePicker(context: context, initialTime: duration) ?? duration;
+                      // duration = await showTimePicker(context: context, initialTime: duration) ?? duration;
+                      duration = await showDurationPicker(context: context, initialTime: Duration(minutes: 15)) ?? Duration(minutes: 15);
                       setState(() {
 
                       });
diff --git a/lib/service_info.dart b/lib/service_info.dart
new file mode 100644
index 0000000..87c2a9e
--- /dev/null
+++ b/lib/service_info.dart
@@ -0,0 +1,75 @@
+import 'package:flutter/material.dart';
+import 'package:queue_mgr/backend/DataManager.dart';
+
+class ServicePage extends StatefulWidget {
+  ServicePage({super.key,required this.serviceId});
+  String serviceId;
+  @override
+  State<ServicePage> createState() => _ServicePageState();
+}
+
+class _ServicePageState extends State<ServicePage> {
+  @override
+  Widget build(BuildContext context) {
+    Map<String, dynamic> service = DataManager.instance().GetServiceById(widget.serviceId.toString());
+
+    return Scaffold(
+      appBar: AppBar(title: Text(service['name']),),
+      body: Padding(
+        padding: const EdgeInsets.all(12.0),
+        child: Column(
+          children: [
+            GridView.count(shrinkWrap: true,crossAxisCount: 2,children: [
+              Card(child:
+                Column(
+                  mainAxisAlignment: MainAxisAlignment.spaceAround,
+                  children: [
+                    Row(mainAxisAlignment: MainAxisAlignment.center,children: [Icon(Icons.play_arrow),Text("  Starting Time")],),
+                    Column(
+                      children: [
+                        Text(dateFormat.format(DateTime.parse(service['start_time']))),
+                        Text(timeFormat.format(DateTime.parse(service['start_time'])),style: TextStyle(fontSize: 20)),
+                      ],
+                    ),
+                    Container(height: 20,)
+                  ],
+                ),),
+              Card(child:
+              Column(
+                mainAxisAlignment: MainAxisAlignment.spaceAround,
+                children: [
+                  Row(mainAxisAlignment: MainAxisAlignment.center,children: [Icon(Icons.stop),Text("  Ending Time")],),
+                  Column(
+                    children: [
+                      Text(dateFormat.format(DateTime.parse(service['end_time']))),
+                      Text(timeFormat.format(DateTime.parse(service['end_time'])),style: TextStyle(fontSize: 20)),
+                    ],
+                  ),
+                  Container(height: 20,)
+                ],
+              ),),
+
+            ],),
+            Card(
+              child: Padding(
+                padding: const EdgeInsets.all(12.0),
+                child: Column(
+                  children: [
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Icon(Icons.people_alt_rounded),
+                        Text("  Queue Length"),
+                      ],
+                    ),
+                    Text(service['members'].toString().split(',').length.toString(),style: TextStyle(fontSize: 25),)
+                  ],
+                ),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/pubspec.lock b/pubspec.lock
index 99295f4..af13091 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -49,6 +49,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.5"
+  duration_picker:
+    dependency: "direct main"
+    description:
+      name: duration_picker
+      sha256: "052b34dac04c29f3849bb3817a26c5aebe9e5f0697c3a374be87db2b84d75753"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
   fake_async:
     dependency: transitive
     description:
@@ -112,6 +120,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.0.2"
+  intl:
+    dependency: "direct main"
+    description:
+      name: intl
+      sha256: "3bc132a9dbce73a7e4a21a17d06e1878839ffbf975568bc875c60537824b0c4d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.18.1"
   js:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
index f59c3f1..2b38766 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -34,6 +34,9 @@ dependencies:
   cupertino_icons: ^1.0.2
   http: ^1.1.0
   shared_preferences: ^2.2.0
+  duration_picker: ^1.1.1
+  intl: ^0.18.1
+
 dev_dependencies:
   flutter_test:
     sdk: flutter