diff --git a/lib/collapsableEmailsWeb.dart b/lib/collapsableEmailsWeb.dart
index c58d907..7422d9e 100644
--- a/lib/collapsableEmailsWeb.dart
+++ b/lib/collapsableEmailsWeb.dart
@@ -10,12 +10,14 @@ class CollapsableEmails extends StatefulWidget {
   final List<String> threadHTML;
   final String threadIDs;
   final String? targetJumpNumbering;
+  final String? targetViewspecs;
 
   const CollapsableEmails({
     required this.thread,
     required this.threadHTML,
     required this.threadIDs,
     this.targetJumpNumbering,
+    this.targetViewspecs,
   });
 
   @override
@@ -52,6 +54,9 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
   bool zoomOut = false;
   bool zoomIn = true;
   late List<AugmentTree> threadNodes = [];
+  static bool leftNumbering = true;
+  static bool rightNumbering = true;
+  bool showWhole = false;
 
   @override
   void initState() {
@@ -71,6 +76,10 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
         widget.targetJumpNumbering != oldWidget.targetJumpNumbering) {
       _handleJump(widget.targetJumpNumbering!);
     }
+    if (widget.targetViewspecs != null &&
+        widget.targetViewspecs != oldWidget.targetViewspecs) {
+      _handleViewspecs(widget.targetViewspecs!);
+    }
   }
 
   @override
@@ -257,6 +266,15 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
                     ],
                   ),
                   SizedBox(width: 12.0),
+                  if (leftNumbering)
+                    Padding(
+                      padding: const EdgeInsets.fromLTRB(0, 10, 5, 0),
+                      child: Text(
+                        childNode.numbering,
+                        style:
+                            TextStyle(color: Color(Colors.purple[400]!.value)),
+                      ),
+                    ),
                   Expanded(
                     child: MarkdownBlock(
                       data: childNode.data,
@@ -266,10 +284,15 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
                           .darkConfig, // or lightConfig depending on theme
                     ),
                   ),
-                  Text(
-                    childNode.numbering,
-                    style: TextStyle(color: Color(Colors.purple[400]!.value)),
-                  )
+                  if (rightNumbering)
+                    Padding(
+                      padding: const EdgeInsets.fromLTRB(5, 10, 5, 0),
+                      child: Text(
+                        childNode.numbering,
+                        style:
+                            TextStyle(color: Color(Colors.purple[400]!.value)),
+                      ),
+                    ),
                 ],
               ),
             ),
@@ -309,13 +332,60 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
     }
   }
 
-  // Placeholder for your actual node finding logic within AugmentTree
+  void _handleViewspecs(String viewspecsQuery) {
+    print(viewspecsQuery);
+    if (viewspecsQuery.isEmpty) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(content: Text('Please enter the viewspecs.')),
+      );
+      return;
+    }
+
+    final int targetEmailIndex = _expandedEmails.first;
+    if (targetEmailIndex >= threadNodes.length) {
+      // Error handling
+      return;
+    }
+
+    if (viewspecsQuery.contains('n')) {
+      setState(() {
+        leftNumbering = false; // Update the state
+        rightNumbering = false;
+      });
+    }
+    if (viewspecsQuery.contains('m')) {
+      setState(() {
+        rightNumbering = true;
+        leftNumbering = true;
+      });
+    }
+    if (viewspecsQuery.contains('H')) {
+      setState(() {
+        leftNumbering = !leftNumbering;
+      });
+    }
+    if (viewspecsQuery.contains('G')) {
+      setState(() {
+        rightNumbering = !rightNumbering;
+      });
+    }
+    if (viewspecsQuery.contrains('w')) {
+      setState(() {
+        showWhole = true;
+      });
+    }
+
+    // else {
+    //   ScaffoldMessenger.of(context).showSnackBar(
+    //     SnackBar(content: Text('Numbering "$viewspecsQuery" not found.')),
+    //   );
+    // }
+  }
+
   AugmentTree? _findNodeByNumbering(AugmentTree root, String numbering) {
-    // Implement your tree traversal here (e.g., DFS or BFS)
+    //recursively finds the node you mentioned
     // to find the AugmentTree node corresponding to the `numbering`.
-    // This is a simplified example:
     if (root.numbering == numbering) {
-      // Assuming 'id' can be your numbering
       return root;
     }
     for (var child in root.children) {