diff --git a/lib/collapsableEmailsWeb.dart b/lib/collapsableEmailsWeb.dart
index ee8e4ea..53b2d41 100644
--- a/lib/collapsableEmailsWeb.dart
+++ b/lib/collapsableEmailsWeb.dart
@@ -27,13 +27,14 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
   List heightOfViewTypes = []; //the height of each viewtype
   List<SerializableMessage> emailsInThread = [];
   bool _isLoaded = false;
+  static bool _isListenerRegistered = false;
 
   @override
   void initState() {
-    // TODO: implement initState
     super.initState();
     _registerViewFactory(widget.threadHTML);
-    _serializableData(widget.threadIDs);
+    _serializableData(widget.threadIDs); // this
+    _keyListener();
   }
 
   void _registerViewFactory(List<String> currentContent) async {
@@ -88,45 +89,68 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
     });
   }
 
+  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,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
-    return _isLoaded 
-      ?Column(children: [
-        Expanded(
-          child: ListView.builder(
-            itemCount: widget.thread.length,
-            itemBuilder: (context, index) {
-              final isExpanded =
-                  _expandedEmails.contains(index); //check if email is expanded
-              return Column(
-                children: [
-                  ListTile(
-                    title: Text(emailsInThread[index].from),
-                    trailing: Text(emailsInThread[index].date),
-                    onTap: () {
-                      setState(() {
-                        if (isExpanded) {
-                          _expandedEmails.remove(index);
-                        } else {
-                          _expandedEmails.add(index);
-                        }
-                      });
-                    },
-                  ),
-                  if (isExpanded)
-                    // if(viewtypeIDs[index] == null || heightOfViewTypes[index] == null)
-                    //   const SizedBox(height: 100, child: Center(child: CircularProgressIndicator())),
-                    SizedBox(
-                      height: heightOfViewTypes[index].toDouble(),
-                      child: HtmlElementView(
-                          key: UniqueKey(), viewType: viewtypeIDs[index]),
-                    ),
-                  Divider(),
-                ],
-              );
-            },
-          ),
-        )
-    ]): const Center(child:CircularProgressIndicator());
+    return _isLoaded
+        ? Column(children: [
+            Expanded(
+              child: ListView.builder(
+                itemCount: widget.thread.length,
+                itemBuilder: (context, index) {
+                  final isExpanded = _expandedEmails
+                      .contains(index); //check if email is expanded
+                  return Column(
+                    children: [
+                      ListTile(
+                        title: Text(emailsInThread[index].from),
+                        trailing: Text(emailsInThread[index].date),
+                        onTap: () {
+                          setState(() {
+                            if (isExpanded) {
+                              _expandedEmails.remove(index);
+                            } else {
+                              _expandedEmails.add(index);
+                            }
+                          });
+                        },
+                      ),
+                      if (isExpanded)
+                        SizedBox(
+                          height: heightOfViewTypes[index].toDouble(),
+                          child: HtmlElementView(
+                              key: UniqueKey(), viewType: viewtypeIDs[index]),
+                        ),
+                      Divider(),
+                    ],
+                  );
+                },
+              ),
+            )
+          ])
+        : const Center(child: CircularProgressIndicator());
   }
 }