diff --git a/lib/Screens/authentication/login/login_widget.dart b/lib/Screens/authentication/login/login_widget.dart
index 13cf433..f6ff2a7 100644
--- a/lib/Screens/authentication/login/login_widget.dart
+++ b/lib/Screens/authentication/login/login_widget.dart
@@ -1,5 +1,6 @@
 import 'dart:convert';
 import 'dart:html' as html;
+// import 'dart:ui' as html;
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
@@ -8,6 +9,7 @@ import 'package:google_fonts/google_fonts.dart';
 import 'package:http/http.dart' as http;
 import 'package:go_router/go_router.dart';
 import 'package:shared_preferences/shared_preferences.dart';
+import 'package:url_launcher/url_launcher.dart';
 
 class LoginWidget extends StatefulWidget {
   final bool isDesktop;
diff --git a/lib/Screens/myTemplates/template.dart b/lib/Screens/myTemplates/template.dart
index 31cecb7..8600b62 100644
--- a/lib/Screens/myTemplates/template.dart
+++ b/lib/Screens/myTemplates/template.dart
@@ -1,18 +1,26 @@
 import 'dart:convert';
 import 'dart:io' as io show Directory, File;
+import 'package:flutter_quill/flutter_quill.dart' hide Text;
+import 'package:flutter/material.dart';
+import 'package:flutter_quill/flutter_quill.dart' hide Text;
+import 'package:flutter_quill_extensions/flutter_quill_extensions.dart';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_quill/flutter_quill.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
+import 'package:flutter_quill/flutter_quill_internal.dart';
 import 'package:flutter_quill/quill_delta.dart';
 import 'package:flutter_quill_extensions/flutter_quill_extensions.dart';
+import 'package:google_fonts/google_fonts.dart';
 import 'package:path/path.dart' as path;
 import 'package:responsive_builder/responsive_builder.dart';
 
 import '../../routes/custom_appBar.dart';
 import '../../routes/custom_drawer.dart';
 import '../../services/apiService.dart';
+import '../../utils/auth_utils.dart';
+import '../../widgets/custom_user_travel.dart';
 
 /// Custom Embed Definition
 class TimeStampEmbed {
@@ -26,21 +34,40 @@ class Template extends StatefulWidget {
 
 class TemplateState extends State<Template> {
   final ApiService apiService = ApiService();
-  final QuillController _controller = QuillController.basic();
-  final FocusNode _editorFocusNode = FocusNode();
-  final ScrollController _editorScrollController = ScrollController();
+
+  Color layoutColor = Colors.redAccent;
+  Color bodyColor = Colors.white;
+
+  QuillController _controller = QuillController.basic();
+  final FocusNode _focusNode = FocusNode();
 
   @override
   void initState() {
     super.initState();
-    _controller.document = Document();
+    _controller = QuillController.basic(); // starts with empty document
+    loadInitialData();
   }
 
-  void _insertTimeStamp() {
-    final timestamp = DateTime.now().toIso8601String();
-    // Insert embed at the current selection
-    final delta = Delta()..insert({TimeStampEmbed.type: {'value': timestamp}});
-    _controller.compose(delta, _controller.selection, ChangeSource.local);
+  @override
+  void dispose() {
+    _focusNode.dispose();
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void loadInitialData() async {
+    String? layoutString = await getLayoutColor();
+    String? bodyStringColor = await getBodyColor();
+
+    setState(() {
+      layoutColor = layoutString != null
+          ? Color(int.parse(layoutString))
+          : Colors.redAccent;
+
+      bodyColor = bodyStringColor != null
+          ? Color(int.parse(bodyStringColor))
+          : Colors.white;
+    });
   }
 
   @override
@@ -55,75 +82,134 @@ class TemplateState extends State<Template> {
         body: Padding(
           padding: isDesktop
               ? EdgeInsets.symmetric(
-            horizontal: MediaQuery.of(context).size.width * 0.1,
-          )
+                  horizontal: MediaQuery.of(context).size.width *
+                      0.1, // 30% of screen width as horizontal padding
+                  vertical: MediaQuery.of(context).size.height *
+                      0, // 5% of screen height as vertical padding
+                )
               : EdgeInsets.all(0),
-          child: SafeArea(
-            child: Column(
-              children: [
-                QuillSimpleToolbar(
-                  controller: _controller,
-                  config: QuillSimpleToolbarConfig(
-                    embedButtons: FlutterQuillEmbeds.toolbarButtons(),
-                    showClipboardPaste: true,
-                    customButtons: [
-                      QuillToolbarCustomButtonOptions(
-                        icon: const Icon(Icons.access_time),
-                        onPressed: _insertTimeStamp,
-                      ),
-                    ],
-                  ),
-                ),
-                Expanded(
-                  child: QuillEditor(
-                    focusNode: _editorFocusNode,
-                    scrollController: _editorScrollController,
-                    controller: _controller,
-                    config: QuillEditorConfig(
-                      placeholder: 'Start writing your notes...',
-                      padding: const EdgeInsets.all(16),
-                      embedBuilders: [
-                        ...FlutterQuillEmbeds.editorBuilders(),
-                        TimeStampEmbedBuilder(),
-                      ],
-                    ),
-                  ),
-                ),
-              ],
-            ),
+          child: Row(
+            children: [
+              // if (isDesktop) CustomDrawer(isDesktop: true),
+              Expanded(
+                  child: buildUserTable(
+                      isDesktop, context, bodyColor, layoutColor)),
+            ],
           ),
         ),
       );
     });
   }
-}
 
-/// Embed Builder for TimeStamp
-class TimeStampEmbedBuilder extends EmbedBuilder {
-  @override
-  String get key => TimeStampEmbed.type;
+  Widget buildUserTable(
+      bool isDesktop, context, Color? bodyColor, Color layoutColor) {
+    return Container(
+      margin: isDesktop ? const EdgeInsets.only(top: 10.0, bottom: 10.0) : null,
+      padding: const EdgeInsets.all(8),
+      decoration: BoxDecoration(
+        color: isDesktop ? Colors.white : Color(0xFFFCFCFC),
+      ),
+      child: SafeArea(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            Text("Editor"),
+            SizedBox(
+              height: 20,
+            ),
+            buildTempalteSubject(isDesktop),
+            SizedBox(
+              height: 20,
+            ),
+            buildTempalteBody(isDesktop)
+          ],
+        ),
+      ),
+    );
+  }
 
-  @override
-  Widget build(BuildContext context, EmbedContext embedContext) {
-    final data = embedContext.node.value.data as Map<String, dynamic>;
-    final String time = data['value'] ?? '';
-
-    return Row(
-      mainAxisSize: MainAxisSize.min,
+  Widget buildTempalteSubject(bool isDesktop) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        const Icon(Icons.access_time_rounded, size: 18),
-        const SizedBox(width: 4),
         Text(
-          time,
-          style: const TextStyle(fontStyle: FontStyle.italic),
+          "Subject",
+          style: GoogleFonts.poppins(
+              fontSize: 12, fontWeight: FontWeight.w400, color: Colors.black),
+        ),
+        SizedBox(height: 5),
+        CustomTextFieldUserTravellerWrapper(
+          isFocused: false,
+          isDesktop: isDesktop,
+          child: SizedBox(
+            height: 40,
+            child: TextField(
+              style: GoogleFonts.poppins(fontSize: 12, color: Colors.black),
+              // controller: _controller[""],
+              onChanged: (value) {
+                // _clearError("local_id_num");
+              },
+              decoration: InputDecoration(
+                labelText: "enter the subject",
+                labelStyle:
+                    GoogleFonts.poppins(fontSize: 12, color: Colors.grey),
+                floatingLabelBehavior: FloatingLabelBehavior.never,
+                border: InputBorder.none,
+                contentPadding: EdgeInsets.symmetric(vertical: 16),
+              ),
+            ),
+          ),
         ),
       ],
     );
   }
 
-  @override
-  String toPlainText(Embed node) {
-    final data = node.value.data as Map<String, dynamic>;
-    return '[${data['value'] ?? ''}]';
+  Widget buildTempalteBody(bool isDesktop) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          "Content",
+          style: GoogleFonts.poppins(
+            fontSize: 12,
+            fontWeight: FontWeight.w400,
+            color: Colors.black,
+          ),
+        ),
+
+        const SizedBox(height: 10),
+
+        // ✅ Modern toolbar
+        QuillSimpleToolbar(
+          controller: _controller,
+          config: QuillSimpleToolbarConfig(
+            embedButtons: FlutterQuillEmbeds.toolbarButtons(),
+          ),
+        ),
+        const SizedBox(height: 10),
+
+        // ✅ Modern editor
+        // Container(
+        //   height: 300,
+        //   decoration: BoxDecoration(
+        //     border: Border.all(color: Colors.grey),
+        //     borderRadius: BorderRadius.circular(8),
+        //   ),
+        //   child: QuillEditor(
+        //     focusNode: _focusNode,
+        //     scrollController: ScrollController(),
+        //     controller: _controller,
+        //     config: QuillEditorConfig(
+        //       padding: const EdgeInsets.all(8),
+        //       embedBuilders: FlutterQuillEmbeds.editorBuilders(),
+        //       sharedConfigurations: const QuillSharedConfigurations(
+        //         locale: Locale('en'),
+        //       ),
+        //     ),
+        //   ),
+        // ),
+      ],
+    );
   }
 }
diff --git a/lib/app.dart b/lib/app.dart
index d7e26d2..cd137fe 100644
--- a/lib/app.dart
+++ b/lib/app.dart
@@ -14,12 +14,14 @@
 //   }
 // }
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter_quill/flutter_quill.dart';
 import 'package:frontend/routes/custom_router.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:flutter_quill/flutter_quill.dart' hide Text;
+import 'dart:html' as html;
 
 class MyApp extends StatefulWidget {
   const MyApp({super.key});
@@ -29,14 +31,40 @@ class MyApp extends StatefulWidget {
 }
 
 class _MyAppState extends State<MyApp> {
+  String? _authCode;
+  bool _isAuthRedirect = false;
   @override
   void initState() {
     super.initState();
     SemanticsBinding.instance.ensureSemantics(); // ✅ Safe here
+    if (kIsWeb) {
+      final uri = Uri.parse(html.window.location.href);
+      if (uri.path == '/authredirection' &&
+          uri.queryParameters['code'] != null) {
+        _authCode = uri.queryParameters['code'];
+        // _isAuthRedirect = true;
+
+        // print(">>> _isAuthRedirect: $_isAuthRedirect");
+        print(">>> Auth code found at startup: $_authCode");
+
+        // You can now:
+        // - call an API
+        // - store this in a Provider
+        // - or just pass it through GoRouter as usual
+      }
+    }
   }
 
   @override
   Widget build(BuildContext context) {
+    // if (_isAuthRedirect) {
+    //   print("Rendering MicrosoftPage with code: $_authCode");
+    //   return MaterialApp(
+    //     home: MicrosoftPage(code: _authCode),
+    //     debugShowCheckedModeBanner: false,
+    //   );
+    // }
+
     return MaterialApp.router(
       title: 'TRIP MANAGEMENT',
       routerConfig: router,
diff --git a/lib/routes/custom_router.dart b/lib/routes/custom_router.dart
index 5f5bc0a..7d74693 100644
--- a/lib/routes/custom_router.dart
+++ b/lib/routes/custom_router.dart
@@ -31,6 +31,13 @@ final GoRouter router = GoRouter(
       path: '/',
       builder: (context, state) => LoginPage(),
     ),
+    // GoRoute(
+    //   path: '/authredirection',
+    //   builder: (context, state) {
+    //     final code = state.uri.queryParameters['code'];
+    //     return MicrosoftPage(code: code);
+    //   },
+    // ),
     GoRoute(
       path: '/home',
       builder: (context, state) => HomePage(),