diff --git a/lib/email.dart b/lib/email.dart
index e289526..5a4c396 100644
--- a/lib/email.dart
+++ b/lib/email.dart
@@ -1,136 +1,146 @@
-import 'package:flutter/material.dart';
-import 'api_service.dart';
-import 'structs.dart';
-
-class EmailListScreen extends StatelessWidget {
-  final List<GetThreadResponse> emails;
-  final Future<String> Function(List<String>, String) getEmailContent;
-  final String folder;
-
-
-  EmailListScreen({required this.emails, required this.getEmailContent, required this.folder});
-//fix the email list
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      body: ListView.separated(
-        itemCount: emails.length,
-        itemBuilder: (context, index) {
-          final email = emails[index];
-          return ListTile(
-            title: Text(email.from_name,
-                style: TextStyle(fontWeight: FontWeight.bold)),
-            subtitle: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [Text(email.subject)],
-            ),
-            trailing: Text(email.date.toString()),
-            onTap: () async {
-              String emailContent = await getEmailContent(email.messages, folder);
-              Navigator.push(
-                context,
-                MaterialPageRoute(
-                  builder: (context) => EmailView(
-                    emailContent: emailContent,
-                    from: email.from_address,
-                    name: email.from_name,
-                    to: email.to.toString(),
-                    subject: email.subject,
-                    date: email.date.toString(),
-                    id: email.id.toString(),
-                  ),
-                ),
-              );
-            },
-          );
-        },
-        separatorBuilder: (context, index) => Divider(),
-      ),
-    );
-  }
-}
-
-// ignore: must_be_immutable
-class EmailPage extends StatefulWidget {
-  EmailPage({Key? key}) : super(key: key);
-  String selectedFolder = "INBOX"; //starter
-  int offset = 0;
-  int page = 1;
-
-  @override
-  EmailPageState createState() => EmailPageState();
-}
-
-class EmailPageState extends State<EmailPage> {
-  final ApiService apiService = ApiService();
-  List<GetThreadResponse> emails = [];
-  int page = 1;
-  bool isBackDisabled = false;
-
-  @override
-  void initState() {
-    super.initState();
-    widget.page = page;
-    isBackDisabled = true;
-  }
-
-  void updateSelectedFolder(String folder) {
-    setState(() {
-      widget.selectedFolder = folder;
-    });
-    print(folder);
-    _fetchEmails();
-  }
-
-  String getPage() {
-    return widget.page.toString();
-  }
-
-  void updatePagenation(String option) {
-    if (option == "next") {
-      setState(() {
-        widget.offset += 50;
-        widget.page += 1;
-        isBackDisabled = false;
-      });
-    } else if (option == "back") {
-      setState(() {
-        widget.offset -= 50;
-        widget.page -= 1;
-        if (widget.page == 1) {
-          isBackDisabled = true;
-          print("back dis");
-        }
-      });
-    }
-    // print(currentPage);
-    _fetchEmails();
-  }
-
-  void _fetchEmails() async {
-    // print(selectedFolder)
-    try {
-      List<GetThreadResponse> fetchedEmails = await apiService
-          .fetchEmailsFromFolder(widget.selectedFolder, widget.offset);
-      if (!mounted) return;
-
-      setState(() {
-        emails = fetchedEmails; // Update the list of emails
-      });
-    } catch (e) {
-      print('Error fetching emails: $e');
-    }
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    _fetchEmails();
-    return Scaffold(
-      body: EmailListScreen(
-        emails: emails,
-        getEmailContent: apiService.fetchEmailContent,
-        folder: widget.selectedFolder,//try to grab from it directly
-      ),
-    );
-  }
-}
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'api_service.dart';
+import 'structs.dart';
+
+class EmailListScreen extends StatelessWidget {
+  final List<GetThreadResponse> emails;
+  final Future<String> Function(List<String>, String) getEmailContent;
+  final String folder;
+
+  EmailListScreen(
+      {required this.emails,
+      required this.getEmailContent,
+      required this.folder});
+//fix the email list
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: ListView.separated(
+        itemCount: emails.length,
+        itemBuilder: (context, index) {
+          final email = emails[index];
+          return ListTile(
+            title: Text(email.from_name,
+                style: TextStyle(fontWeight: FontWeight.bold)),
+            subtitle: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [Text(email.subject)],
+            ),
+            trailing: Text(email.date.toString()),
+            onTap: () async {
+              String emailContent =
+                  await getEmailContent(email.messages, folder);
+              Navigator.push(
+                context,
+                MaterialPageRoute(
+                  builder: (context) => EmailView(
+                    emailContent: emailContent,
+                    from: email.from_address,
+                    name: email.from_name,
+                    to: email.to.toString(),
+                    subject: email.subject,
+                    date: email.date.toString(),
+                    id: email.id.toString(),
+                  ),
+                ),
+              );
+            },
+          );
+        },
+        separatorBuilder: (context, index) => Divider(),
+      ),
+    );
+  }
+}
+
+// ignore: must_be_immutable
+class EmailPage extends StatefulWidget {
+  EmailPage({Key? key}) : super(key: key);
+  String selectedFolder = "INBOX"; //starter
+  int offset = 0;
+  int page = 1;
+
+  @override
+  EmailPageState createState() => EmailPageState();
+}
+
+class EmailPageState extends State<EmailPage> {
+  final ApiService apiService = ApiService();
+  List<GetThreadResponse> emails = [];
+  ValueNotifier<int> currentPageNotifier = ValueNotifier<int>(1);
+  int page = 1;
+  bool isBackDisabled = false;
+
+  @override
+  void initState() {
+    super.initState();
+    widget.page = page;
+    isBackDisabled = true;
+  }
+
+  String getPage() => widget.page.toString();
+  bool get backDisabled => isBackDisabled;
+
+  void updateSelectedFolder(String folder) {
+    setState(() {
+      widget.selectedFolder = folder;
+    });
+    print(folder);
+    _fetchEmails();
+  }
+
+  // String getPage() =>  widget.page.toString();
+  
+
+  void updatePagenation(String option) {
+    if (option == "next") {
+      setState(() {
+        widget.offset += 50;
+        widget.page += 1;
+        currentPageNotifier.value = widget.page;
+        isBackDisabled = false;
+      });
+    } else if (option == "back") {
+      setState(() {
+        widget.offset -= 50;
+        widget.page -= 1;
+        currentPageNotifier.value = widget.page;
+        if (widget.page == 1) {
+          isBackDisabled = true;
+          print("back dis");
+        }
+      });
+    }
+    // print(currentPage);
+    print(widget.page);
+    _fetchEmails();
+  }
+
+  void _fetchEmails() async {
+    // print(selectedFolder)
+    try {
+      List<GetThreadResponse> fetchedEmails = await apiService
+          .fetchEmailsFromFolder(widget.selectedFolder, widget.offset);
+      if (!mounted) return;
+
+      setState(() {
+        emails = fetchedEmails; // Update the list of emails
+      });
+    } catch (e) {
+      print('Error fetching emails: $e');
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    _fetchEmails();
+    return Scaffold(
+      body: EmailListScreen(
+        emails: emails,
+        getEmailContent: apiService.fetchEmailContent,
+        folder: widget.selectedFolder, //try to grab from it directly
+      ),
+    );
+  }
+}
diff --git a/lib/home_page.dart b/lib/home_page.dart
index 5badb9f..03ae481 100644
--- a/lib/home_page.dart
+++ b/lib/home_page.dart
@@ -1,440 +1,454 @@
-import 'folder_drawer.dart';
-import 'structs.dart';
-import 'package:flutter/widgets.dart';
-import 'api_service.dart';
-import 'package:flutter/material.dart';
-import 'email.dart';
-// import 'package:shared_preferences/shared_preferences.dart';
-// import 'serialize.dart';
-
-class HomeScreen extends StatefulWidget {
-  @override
-  _HomeScreenState createState() => _HomeScreenState();
-}
-
-class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
-  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
-  final GlobalKey<EmailPageState> _emailPageKey = GlobalKey<EmailPageState>();
-  ApiService apiService = ApiService();
-  bool _isSidebarOpen = true;
-  bool querySearches = false;
-  String? _selectedOption = "INBOX";
-
-  List<String> _tabs = ['Emails'];
-  Map<String, Widget> _tabWidgets = {};
-  TabController? _tabController;
-
-  @override
-  void initState() {
-    super.initState();
-    _tabController = TabController(length: _tabs.length, vsync: this);
-    _tabWidgets['Emails'] = EmailPage(
-      key: _emailPageKey,
-    );
-  }
-
-  // Add a new tab based on the search
-  void _performSearch(String query, String? list) {
-    setState(() {
-      if (!_tabs.contains(query)) {
-        _tabs.add(query);
-        _tabWidgets[query] = _buildSearchResultsWidget(
-            query, list); // Store a different widget for this tab
-        _tabController = TabController(length: _tabs.length, vsync: this);
-      }
-    });
-  }
-
-  void _showOptionsSearchDialog () async {
-    List<String> folders = await apiService.fetchFolders();
-
-    if (mounted) {
-    showDialog(
-      context: context,
-      builder: (BuildContext context) {
-        return AlertDialog(
-          title: Text('Choose an Option'),
-          content: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: folders.map((option) {
-              return ListTile(
-                title: Text(option),
-                leading: Radio<String>(
-                  value: option,
-                  groupValue: _selectedOption, // Bind with _selectedOption
-                  onChanged: (String? value) {
-                    setState(() {
-                      _selectedOption = value;
-                    });
-                    Navigator.of(context).pop(); // Close the dialog on selection
-                  },
-                ),
-              );
-            }).toList(),
-          ),
-          actions: <Widget>[
-            ElevatedButton(
-              child: Text('Submit'),
-              onPressed: () {
-                Navigator.of(context).pop(); // Close the dialog
-                ScaffoldMessenger.of(context).showSnackBar(SnackBar(
-                  content: Text('You selected: $_selectedOption'),
-                ));
-              },
-            ),
-          ],
-        );
-      },
-    );}
-  }
-  
-
-  // Remove a tab
-  void _removeTab(int index) {
-    if (_tabs[index] != 'Emails') {
-      setState(() {
-        String tabToRemove = _tabs[index];
-        _tabs.removeAt(index);
-        _tabWidgets
-            .remove(tabToRemove); // Remove widget associated with the tab
-        _tabController = TabController(length: _tabs.length, vsync: this);
-      });
-    }
-  }
-
-  // Build a custom widget for each search query
-  Widget _buildSearchResultsWidget(String query, String? list) {
-    return FutureBuilder<List<SerializableMessage>>(
-      future: apiService.sonicSearch(list ?? "INBOX", 50, 0, query),
-      builder: (BuildContext context,
-          AsyncSnapshot<List<SerializableMessage>> snapshot) {
-        if (snapshot.connectionState == ConnectionState.waiting) {
-          return Center(child: CircularProgressIndicator());
-        } else if (snapshot.hasError) {
-          return Center(child: Text('Error: ${snapshot.error}'));
-        } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
-          return Center(child: Text('No results found for: $query'));
-        } else {
-          List<SerializableMessage> result = snapshot.data!;
-          return Scaffold(
-            body: ListView.separated(
-              itemCount: result.length,
-              itemBuilder: (context, index) {
-                final SerializableMessage email  = result[index];
-                return ListTile(
-                  title: Text(email.from,
-                      style: TextStyle(fontWeight: FontWeight.bold)),
-                  subtitle: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [Text(email.subject)],
-                  ),
-                  trailing: Text(email.date.toString()),
-                  onTap: () async {
-                    // print('tapped');
-                    String emailContent =
-                        await apiService.fetchEmailContent([email.id], email.list);
-                    // print('content below');
-                    // print(emailContent);
-                    Navigator.push(
-                      context,
-                      MaterialPageRoute(
-                        builder: (context) => EmailView(
-                          emailContent: emailContent,
-                          from: email.from,
-                          name: email.name,
-                          to: email.to.toString(),
-                          subject: email.subject,
-                          date: email.date.toString(),
-                          id: email.id.toString(),
-                        ),
-                      ),
-                    );
-                  },
-                );
-              },
-              separatorBuilder: (context, index) => Divider(),
-            ),
-            // child: Column(
-            //   mainAxisAlignment: MainAxisAlignment.center,
-            //   children: [
-            //     Text("Results for: $query", style: TextStyle(fontSize: 24)),
-            //     // Display the actual data
-            //     Text(result[0].name), // Accessing the first result safely
-            //     Text(result[0].from), // Displaying the 'from' field as an example
-            //     Text(result[0].hash),
-            //     Text(result[0].subject),
-            //     Text(result[0].uid.toString()),
-            //     Text(result[0].list),
-            //     Text(result[0].id),
-
-            //     // Add more fields or customize the display
-            //     // SerializableEmailListScreen(emails: result, getEmailContent: getEmailContent)
-            //     // Expanded(
-
-            //     //   child:
-            //     // ),
-            // ],
-          );
-          // );
-        }
-      },
-    );
-  }
-
-  @override
-  void dispose() {
-    _tabController?.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      key: _scaffoldKey,
-      drawer: FolderDrawer(
-        apiService: apiService,
-        onFolderTap: (folder) {
-          _emailPageKey.currentState?.updateSelectedFolder(folder);
-        },
-      ),
-      body: Stack(
-        children: [
-          Row(
-            children: [
-              // Sidebar
-              if (_isSidebarOpen)
-                Container(
-                  width: 70,
-                  color: Color.fromARGB(17, 96, 122, 135),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      ListTile(
-                        leading: Icon(Icons.home),
-                        onTap: () {
-                          // Navigate to Home
-                        },
-                      ),
-                      ListTile(
-                        leading: Icon(Icons.settings),
-                        onTap: () {
-                          // Navigate to Settings
-                        },
-                      ),
-                      ListTile(
-                        leading: Icon(Icons.email),
-                        onTap: () {
-                          _scaffoldKey.currentState?.openDrawer();
-                        },
-                      ),
-                      Spacer(),
-                      Padding(
-                        padding: const EdgeInsets.all(8.0),
-                        child: Align(
-                          alignment: Alignment.bottomLeft,
-                          child: IconButton(
-                            icon: Icon(Icons.close, color: Colors.white),
-                            onPressed: () {
-                              setState(() {
-                                _isSidebarOpen = false;
-                              });
-                            },
-                          ),
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-              // Main content
-              Expanded(
-                child: Column(
-                  children: [
-                    Container(
-                      padding: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 4.0),
-                      color: Color.fromARGB(42, 36, 102, 132),
-                      child: Row(
-                        mainAxisAlignment: MainAxisAlignment.center,
-                        children: [
-                          Container(
-                            width: 800,
-                            height: 40,
-                            child: TextField(
-                              decoration: InputDecoration(
-                                hintText: 'Search...',
-                                border: OutlineInputBorder(),
-                                prefixIcon: Icon(Icons.search),
-                              ),
-                              onSubmitted: (value) {
-                                if (value.isNotEmpty) {
-                                  _performSearch(value, _selectedOption);
-                                }
-                                //this is the input box i mentioned
-                                // if (value == '') {
-                                //   setState(() {
-                                //     querySearches = false;
-                                //   });
-                                // }
-                                // Future<List<String>> results = apiService
-                                //     .sonicSearch('INBOX', 20, 0, value);
-                                // // print(value);
-                                // print(results);
-                                // setState(() {
-                                //   querySearches = true;
-                                // });
-                              },
-                            ),
-                          ),
-                          SizedBox(
-                            width: 16,
-                          ),
-                          Container(
-                            width: 80,
-                            height: 40,
-                            child: ElevatedButton(
-                              onPressed: _showOptionsSearchDialog,
-                              child: Icon(Icons.manage_search),
-                            ),
-                          )
-                        ],
-                      ),
-                    ),
-                    Container(
-                      padding: EdgeInsets.all(0.0),
-                      color: Color.fromARGB(42, 36, 102, 132),
-                      child: Row(
-                        children: [
-                          Container(
-                            height: 2,
-                          )
-                        ],
-                      ),
-                    ),
-                    Container(
-                      color: Color.fromARGB(255, 131, 110, 143),
-                      child: TabBar(
-                        controller: _tabController,
-                        isScrollable: true,
-                        tabs: _tabs
-                            .asMap()
-                            .entries
-                            .map((entry) => Tab(
-                                  child: Row(
-                                    children: [
-                                      Text(entry.value),
-                                      if (entry.value != 'Emails')
-                                        GestureDetector(
-                                          onTap: () => _removeTab(entry.key),
-                                          child: Icon(Icons.close, size: 16),
-                                        ),
-                                    ],
-                                  ),
-                                ))
-                            .toList(),
-                        labelColor: Colors.white,
-                        indicatorColor: Colors.white,
-                      ),
-                    ),
-                    Container(
-                      // alignment: Alignment.topLeft,
-                      padding: EdgeInsets.all(8.0),
-                      color: Colors.white,
-                      child: Row(
-                        children: [
-                          ElevatedButton(
-                            onPressed: () {
-                              _emailPageKey.currentState!.isBackDisabled ? null: _emailPageKey.currentState
-                                  ?.updatePagenation('back');
-                            },
-                            child: Icon(Icons.navigate_before),
-                          ),
-                          Text(_emailPageKey.currentState?.getPage() ?? '1'),
-                          ElevatedButton(
-                            onPressed: () {
-                              _emailPageKey.currentState
-                                  ?.updatePagenation('next');
-                            },
-                            child: Icon(Icons.navigate_next),
-                          ),
-                        ],
-                      ),
-                    ),
-                    Expanded(
-                      child: TabBarView(
-                        controller: _tabController,
-                        children: _tabs.map((tab) {
-                          return _tabWidgets[tab] ??
-                              Center(child: Text("No content found"));
-                          // return Center(
-                          //     child: EmailPage(
-                          //   key: _emailPageKey,
-                          // ));
-                        }).toList(),
-                      ),
-                    ),
-
-                    // if (_tabs.isEmpty)
-                    //   Expanded(
-                    //     child: EmailPage(key: _emailPageKey),
-                    //   ),
-                    // if (_tabs.isNotEmpty)
-                    //   Expanded(
-                    //     // child: Text('supposed to be mails'),
-                    //     child: TabBarView(
-                    //       controller: _tabController,
-                    //       children: _tabs
-                    //           .map((tab) => Center(child: Text('Results for $tab')))
-                    //           .toList(),
-                    //     ),
-                    //   ),
-                  ],
-                ),
-              ),
-            ],
-          ),
-          if (!_isSidebarOpen)
-            Positioned(
-              bottom: 16,
-              left: 16,
-              child: FloatingActionButton(
-                child: Icon(Icons.menu),
-                onPressed: () {
-                  setState(() {
-                    _isSidebarOpen = true;
-                  });
-                },
-              ),
-            ),
-        ],
-      ),
-    );
-  }
-}
-//   void _showPopupMenu(BuildContext context, Offset position) async {
-//     final RenderBox overlay =
-//         Overlay.of(context).context.findRenderObject() as RenderBox;
-
-//     await showMenu<String>(
-//       context: context,
-//       position: RelativeRect.fromLTRB(
-//         position.dx,
-//         position.dy,
-//         overlay.size.width - position.dx,
-//         overlay.size.height - position.dy,
-//       ),
-//       items: <PopupMenuEntry<String>>[
-//         PopupMenuItem<String>(
-//           value: 'Open',
-//           child: Text('Open'),
-//         ),
-//         PopupMenuItem<String>(
-//           value: 'Reply',
-//           child: Text('Reply'),
-//         ),
-//         PopupMenuItem<String>(
-//           value: 'Delete',
-//           child: Text('Delete'),
-//         ),
-//       ],
-//     );
-//   }
-// }
+import 'folder_drawer.dart';
+import 'structs.dart';
+import 'package:flutter/widgets.dart';
+import 'api_service.dart';
+import 'package:flutter/material.dart';
+import 'email.dart';
+// import 'package:shared_preferences/shared_preferences.dart';
+// import 'serialize.dart';
+
+class HomeScreen extends StatefulWidget {
+  @override
+  _HomeScreenState createState() => _HomeScreenState();
+}
+
+class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
+  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
+  final GlobalKey<EmailPageState> _emailPageKey = GlobalKey<EmailPageState>();
+  ApiService apiService = ApiService();
+  bool _isSidebarOpen = true;
+  bool querySearches = false;
+  String? _selectedOption = "INBOX";
+
+  List<String> _tabs = ['Emails'];
+  Map<String, Widget> _tabWidgets = {};
+  TabController? _tabController;
+
+  @override
+  void initState() {
+    super.initState();
+    _tabController = TabController(length: _tabs.length, vsync: this);
+    _tabWidgets['Emails'] = EmailPage(
+      key: _emailPageKey,
+    );
+  }
+
+  // Add a new tab based on the search
+  void _performSearch(String query, String? list) {
+    setState(() {
+      if (!_tabs.contains(query)) {
+        _tabs.add(query);
+        _tabWidgets[query] = _buildSearchResultsWidget(
+            query, list); // Store a different widget for this tab
+        _tabController = TabController(length: _tabs.length, vsync: this);
+      }
+    });
+  }
+
+  void _showOptionsSearchDialog () async {
+    List<String> folders = await apiService.fetchFolders();
+
+    if (mounted) {
+    showDialog(
+      context: context,
+      builder: (BuildContext context) {
+        return AlertDialog(
+          title: Text('Choose an Option'),
+          content: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: folders.map((option) {
+              return ListTile(
+                title: Text(option),
+                leading: Radio<String>(
+                  value: option,
+                  groupValue: _selectedOption, // Bind with _selectedOption
+                  onChanged: (String? value) {
+                    setState(() {
+                      _selectedOption = value;
+                    });
+                    Navigator.of(context).pop(); // Close the dialog on selection
+                  },
+                ),
+              );
+            }).toList(),
+          ),
+          actions: <Widget>[
+            ElevatedButton(
+              child: Text('Submit'),
+              onPressed: () {
+                Navigator.of(context).pop(); // Close the dialog
+                ScaffoldMessenger.of(context).showSnackBar(SnackBar(
+                  content: Text('You selected: $_selectedOption'),
+                ));
+              },
+            ),
+          ],
+        );
+      },
+    );}
+  }
+  
+
+  // Remove a tab
+  void _removeTab(int index) {
+    if (_tabs[index] != 'Emails') {
+      setState(() {
+        String tabToRemove = _tabs[index];
+        _tabs.removeAt(index);
+        _tabWidgets
+            .remove(tabToRemove); // Remove widget associated with the tab
+        _tabController = TabController(length: _tabs.length, vsync: this);
+      });
+    }
+  }
+
+  // Build a custom widget for each search query
+  Widget _buildSearchResultsWidget(String query, String? list) {
+    return FutureBuilder<List<SerializableMessage>>(
+      future: apiService.sonicSearch(list ?? "INBOX", 50, 0, query),
+      builder: (BuildContext context,
+          AsyncSnapshot<List<SerializableMessage>> snapshot) {
+        if (snapshot.connectionState == ConnectionState.waiting) {
+          return Center(child: CircularProgressIndicator());
+        } else if (snapshot.hasError) {
+          return Center(child: Text('Error: ${snapshot.error}'));
+        } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
+          return Center(child: Text('No results found for: $query'));
+        } else {
+          List<SerializableMessage> result = snapshot.data!;
+          return Scaffold(
+            body: ListView.separated(
+              itemCount: result.length,
+              itemBuilder: (context, index) {
+                final SerializableMessage email  = result[index];
+                return ListTile(
+                  title: Text(email.from,
+                      style: TextStyle(fontWeight: FontWeight.bold)),
+                  subtitle: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [Text(email.subject)],
+                  ),
+                  trailing: Text(email.date.toString()),
+                  onTap: () async {
+                    // print('tapped');
+                    String emailContent =
+                        await apiService.fetchEmailContent([email.id], email.list);
+                    // print('content below');
+                    // print(emailContent);
+                    Navigator.push(
+                      context,
+                      MaterialPageRoute(
+                        builder: (context) => EmailView(
+                          emailContent: emailContent,
+                          from: email.from,
+                          name: email.name,
+                          to: email.to.toString(),
+                          subject: email.subject,
+                          date: email.date.toString(),
+                          id: email.id.toString(),
+                        ),
+                      ),
+                    );
+                  },
+                );
+              },
+              separatorBuilder: (context, index) => Divider(),
+            ),
+            // child: Column(
+            //   mainAxisAlignment: MainAxisAlignment.center,
+            //   children: [
+            //     Text("Results for: $query", style: TextStyle(fontSize: 24)),
+            //     // Display the actual data
+            //     Text(result[0].name), // Accessing the first result safely
+            //     Text(result[0].from), // Displaying the 'from' field as an example
+            //     Text(result[0].hash),
+            //     Text(result[0].subject),
+            //     Text(result[0].uid.toString()),
+            //     Text(result[0].list),
+            //     Text(result[0].id),
+
+            //     // Add more fields or customize the display
+            //     // SerializableEmailListScreen(emails: result, getEmailContent: getEmailContent)
+            //     // Expanded(
+
+            //     //   child:
+            //     // ),
+            // ],
+          );
+          // );
+        }
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    _tabController?.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      key: _scaffoldKey,
+      drawer: FolderDrawer(
+        apiService: apiService,
+        onFolderTap: (folder) {
+          _emailPageKey.currentState?.updateSelectedFolder(folder);
+        },
+      ),
+      body: Stack(
+        children: [
+          Row(
+            children: [
+              // Sidebar
+              if (_isSidebarOpen)
+                Container(
+                  width: 70,
+                  color: Color.fromARGB(17, 96, 122, 135),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      ListTile(
+                        leading: Icon(Icons.home),
+                        onTap: () {
+                          // Navigate to Home
+                        },
+                      ),
+                      ListTile(
+                        leading: Icon(Icons.settings),
+                        onTap: () {
+                          // Navigate to Settings
+                        },
+                      ),
+                      ListTile(
+                        leading: Icon(Icons.email),
+                        onTap: () {
+                          _scaffoldKey.currentState?.openDrawer();
+                        },
+                      ),
+                      Spacer(),
+                      Padding(
+                        padding: const EdgeInsets.all(8.0),
+                        child: Align(
+                          alignment: Alignment.bottomLeft,
+                          child: IconButton(
+                            icon: Icon(Icons.close, color: Colors.white),
+                            onPressed: () {
+                              setState(() {
+                                _isSidebarOpen = false;
+                              });
+                            },
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              // Main content
+              Expanded(
+                child: Column(
+                  children: [
+                    Container(
+                      padding: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 4.0),
+                      color: Color.fromARGB(42, 36, 102, 132),
+                      child: Row(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Container(
+                            width: 800,
+                            height: 40,
+                            child: TextField(
+                              decoration: InputDecoration(
+                                hintText: 'Search...',
+                                border: OutlineInputBorder(),
+                                prefixIcon: Icon(Icons.search),
+                              ),
+                              onSubmitted: (value) {
+                                if (value.isNotEmpty) {
+                                  _performSearch(value, _selectedOption);
+                                }
+                                //this is the input box i mentioned
+                                // if (value == '') {
+                                //   setState(() {
+                                //     querySearches = false;
+                                //   });
+                                // }
+                                // Future<List<String>> results = apiService
+                                //     .sonicSearch('INBOX', 20, 0, value);
+                                // // print(value);
+                                // print(results);
+                                // setState(() {
+                                //   querySearches = true;
+                                // });
+                              },
+                            ),
+                          ),
+                          SizedBox(
+                            width: 16,
+                          ),
+                          Container(
+                            width: 80,
+                            height: 40,
+                            child: ElevatedButton(
+                              onPressed: _showOptionsSearchDialog,
+                              child: Icon(Icons.manage_search),
+                            ),
+                          )
+                        ],
+                      ),
+                    ),
+                    Container(
+                      padding: EdgeInsets.all(0.0),
+                      color: Color.fromARGB(42, 36, 102, 132),
+                      child: Row(
+                        children: [
+                          Container(
+                            height: 2,
+                          )
+                        ],
+                      ),
+                    ),
+                    Container(
+                      color: Color.fromARGB(255, 131, 110, 143),
+                      child: TabBar(
+                        controller: _tabController,
+                        isScrollable: true,
+                        tabs: _tabs
+                            .asMap()
+                            .entries
+                            .map((entry) => Tab(
+                                  child: Row(
+                                    children: [
+                                      Text(entry.value),
+                                      if (entry.value != 'Emails')
+                                        GestureDetector(
+                                          onTap: () => _removeTab(entry.key),
+                                          child: Icon(Icons.close, size: 16),
+                                        ),
+                                    ],
+                                  ),
+                                ))
+                            .toList(),
+                        labelColor: Colors.white,
+                        indicatorColor: Colors.white,
+                      ),
+                    ),
+                    Container(
+                      // alignment: Alignment.topLeft,
+                      padding: EdgeInsets.all(8.0),
+                      color: Colors.white,
+                      child: Row(
+                        children: [
+                          ElevatedButton(
+                            onPressed: () {
+                              _emailPageKey.currentState!.isBackDisabled ? null: _emailPageKey.currentState
+                                  ?.updatePagenation('back');
+                            },
+                            child: Icon(Icons.navigate_before),
+                          ),
+                          Builder(
+                            builder: (context) {
+                              final emailState = _emailPageKey.currentState;
+                              if (emailState == null) {
+                                // Schedule a rebuild once the state is available
+                                Future.microtask(() => setState(() {}));
+                                return Text('Loading...');
+                              }
+
+                              return ValueListenableBuilder<int>(
+                                valueListenable: emailState.currentPageNotifier,
+                                builder: (context, value, _) => Text('$value'),
+                              );
+                            },
+                          ),
+                          ElevatedButton(
+                            onPressed: () {
+                              _emailPageKey.currentState
+                                  ?.updatePagenation('next');
+                            },
+                            child: Icon(Icons.navigate_next),
+                          ),
+                        ],
+                      ),
+                    ),
+                    Expanded(
+                      child: TabBarView(
+                        controller: _tabController,
+                        children: _tabs.map((tab) {
+                          return _tabWidgets[tab] ??
+                              Center(child: Text("No content found"));
+                          // return Center(
+                          //     child: EmailPage(
+                          //   key: _emailPageKey,
+                          // ));
+                        }).toList(),
+                      ),
+                    ),
+
+                    // if (_tabs.isEmpty)
+                    //   Expanded(
+                    //     child: EmailPage(key: _emailPageKey),
+                    //   ),
+                    // if (_tabs.isNotEmpty)
+                    //   Expanded(
+                    //     // child: Text('supposed to be mails'),
+                    //     child: TabBarView(
+                    //       controller: _tabController,
+                    //       children: _tabs
+                    //           .map((tab) => Center(child: Text('Results for $tab')))
+                    //           .toList(),
+                    //     ),
+                    //   ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          if (!_isSidebarOpen)
+            Positioned(
+              bottom: 16,
+              left: 16,
+              child: FloatingActionButton(
+                child: Icon(Icons.menu),
+                onPressed: () {
+                  setState(() {
+                    _isSidebarOpen = true;
+                  });
+                },
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}
+//   void _showPopupMenu(BuildContext context, Offset position) async {
+//     final RenderBox overlay =
+//         Overlay.of(context).context.findRenderObject() as RenderBox;
+
+//     await showMenu<String>(
+//       context: context,
+//       position: RelativeRect.fromLTRB(
+//         position.dx,
+//         position.dy,
+//         overlay.size.width - position.dx,
+//         overlay.size.height - position.dy,
+//       ),
+//       items: <PopupMenuEntry<String>>[
+//         PopupMenuItem<String>(
+//           value: 'Open',
+//           child: Text('Open'),
+//         ),
+//         PopupMenuItem<String>(
+//           value: 'Reply',
+//           child: Text('Reply'),
+//         ),
+//         PopupMenuItem<String>(
+//           value: 'Delete',
+//           child: Text('Delete'),
+//         ),
+//       ],
+//     );
+//   }
+// }