diff --git a/lib/collapsableEmailsWeb.dart b/lib/collapsableEmailsWeb.dart
index 53b2d41..af80fbf 100644
--- a/lib/collapsableEmailsWeb.dart
+++ b/lib/collapsableEmailsWeb.dart
@@ -28,6 +28,9 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
   List<SerializableMessage> emailsInThread = [];
   bool _isLoaded = false;
   static bool _isListenerRegistered = false;
+  static bool left = true;
+  static bool right = true;
+  web.EventListener? _listener;
 
   @override
   void initState() {
@@ -36,6 +39,14 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
     _serializableData(widget.threadIDs); // this
     _keyListener();
   }
+  // @override
+  // void dispose() {
+  //   if (_listener != null) {
+  //     web.window.document.removeEventListener('keydown', _listener!);
+  //   }
+  //   super.dispose();
+  // }
+
 
   void _registerViewFactory(List<String> currentContent) async {
     // setState(() { //update to do item per item
@@ -89,30 +100,40 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
     });
   }
 
+  void handleKeyDown(web.Event event) {
+    final keyEvent = event as web.KeyboardEvent;
+
+    if (keyEvent.key == 'G') {
+      print('You pressed the "G" key!');
+      final rightPurpleNums = web.document.getElementsByClassName("right");
+      _CollapsableEmailsState.right = !_CollapsableEmailsState.right;
+      final newOpacity = _CollapsableEmailsState.right ? '1.0' : '0.0';
+      for (int i = 0; i < rightPurpleNums.length; i++) {
+        final currentElement = rightPurpleNums.item(i) as web.HTMLElement;
+        currentElement.style.opacity = newOpacity;
+      }
+    } else if (keyEvent.key == 'H') {
+      print('You pressed the "H" key!');
+      final leftPurpleNums = web.document.getElementsByClassName("left");
+      _CollapsableEmailsState.left = !_CollapsableEmailsState.left;
+      final newOpacity = _CollapsableEmailsState.left ? '1.0' : '0.0';
+      for (int i = 0; i < leftPurpleNums.length; i++) {
+        final currentElement = leftPurpleNums.item(i) as web.HTMLElement;
+        currentElement.style.opacity = newOpacity;
+      }
+    }
+  }
+
   void _keyListener() {
     if (_isListenerRegistered) return;
     _isListenerRegistered = true;
-    web.window.document.addEventListener(
-      'keydown',
-      ((web.Event event) {
-        final keyEvent = event as web.KeyboardEvent;
 
-        if (keyEvent.key.toLowerCase() == 'k') {
-          print('You pressed the "k" key!');
-          final leftPurpleNums = web.document.getElementsByClassName("right");
-
-          for (int i = 0; i < leftPurpleNums.length; i++) {
-            final currentElement = leftPurpleNums.item(i) as web.HTMLElement;
-            final opacity = web.window.getComputedStyle(currentElement).opacity;
-            
-            currentElement.style.opacity =
-                (opacity == '0') ? '1.0' : '0.0'; // works mostly
-          }
-        }
-      }).toJS,
-    );
+    // Convert the top-level function to JS-compatible
+    _listener = handleKeyDown.toJS;
+    web.window.document.addEventListener('keydown', _listener!);
   }
 
+
   @override
   Widget build(BuildContext context) {
     return _isLoaded