diff --git a/package-lock.json b/package-lock.json
index 8e859a4..741589e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40648,6 +40648,7 @@
       "devDependencies": {
         "@babel/cli": "7.17.6",
         "@babel/core": "7.22.1",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
         "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
         "@babel/plugin-transform-runtime": "7.22.4",
         "@babel/preset-env": "7.22.4",
@@ -40673,6 +40674,7 @@
       "devDependencies": {
         "@babel/cli": "7.17.6",
         "@babel/core": "7.22.1",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
         "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
         "@babel/plugin-transform-runtime": "7.22.4",
         "@babel/preset-env": "7.22.4",
diff --git a/vanilla/counter-ts/package.json b/vanilla/counter-ts/package.json
index a143bed..ff53c43 100644
--- a/vanilla/counter-ts/package.json
+++ b/vanilla/counter-ts/package.json
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@babel/cli": "7.17.6",
     "@babel/core": "7.22.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
     "@babel/plugin-transform-runtime": "7.22.4",
     "@babel/preset-env": "7.22.4",
diff --git a/vanilla/counter-ts/src/index.ts b/vanilla/counter-ts/src/index.ts
index 72afe22..b495ab7 100644
--- a/vanilla/counter-ts/src/index.ts
+++ b/vanilla/counter-ts/src/index.ts
@@ -27,12 +27,12 @@ import {
   LookerExtensionSDK40,
 } from '@looker/extension-sdk'
 
-;(async () => {
-  const extensionSdk = await connectExtensionHost()
-  const sdk40 = LookerExtensionSDK40.createClient(extensionSdk)
-  const result = await sdk40.me()
-  const name = result.ok ? result.value.display_name : 'Unknown'
-  document.write(`
+  ; (async () => {
+    const extensionSdk = await connectExtensionHost()
+    const sdk40 = LookerExtensionSDK40.createClient(extensionSdk)
+    const result = await sdk40.me()
+    const name = result.ok ? result.value.display_name : 'Unknown'
+    document.write(`
   <style>
     body {
       font-family: -apple-system, system-ui, BlinkMacSystemFont;
@@ -59,10 +59,29 @@ import {
     <h1>Looker Counter Extension</h1>
     <h2>Welcome ${name}</h2>
     <h3>This number will increase by one upon every click:</h3>
-    <div class="butt" onclick="event.target.innerHTML = +event.target.innerHTML + (event.shiftKey ? -1 : 1); event.preventDefault
-    ()">0</div>
+    <div class="butt" id="counterButton">0</div>
     <h3>I hope you had fun with this Looker extension.</h3>
-    <img width="200" src="https://docs.looker.com/assets/site_images/looker-logo.svg" />
+    <img width="200" src="https://images.seeklogo.com/logo-png/39/2/google-looker-logo-png_seeklogo-394597.png" />
   </div>
-`)
-})()
+`);
+
+    const counterButton = document.getElementById('counterButton') as HTMLDivElement;
+    if (!counterButton) {
+      console.error('Counter button not found!')
+      return
+    } else {
+      console.log('Counter button found:', counterButton)
+    }
+
+    counterButton.addEventListener('click', (event) => {
+      console.log('Button clicked!')
+      console.log('Current counter value:', counterButton.innerHTML)
+
+      // Update the counter value
+      counterButton.innerHTML = (+counterButton.innerHTML + (event.shiftKey ? -1 : 1)).toString()
+
+      console.log('Updated counter value:', counterButton.innerHTML)
+      event.preventDefault()
+    })
+
+  })()
\ No newline at end of file