diff --git a/bun.lockb b/bun.lockb
index f13f0c0..6b9e673 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index fe036fb..5683b2f 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "htmx.org": "^1.9.12",
     "kysely": "^0.26.0",
     "leaflet": "^1.9.4",
+    "lit": "^3.1.4",
     "lucide-react": "^0.309.0",
     "nanoid": "^5.0.4",
     "react": "^18.2.0",
diff --git a/src/components/WebComponentWrapper.astro b/src/components/WebComponentWrapper.astro
index cad3a8a..b937e2f 100644
--- a/src/components/WebComponentWrapper.astro
+++ b/src/components/WebComponentWrapper.astro
@@ -111,5 +111,8 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
   imageURL={imageUrl}
   targetPos={location}
   id="locked-content"></locked-content>
+<locked-content-lit imageId="sample" targetPosition="[1,1]"
+></locked-content-lit>
 
 <script src="../components/locked-content.ts"></script>
+<script src="../components/locked-content-lit.ts"></script>
diff --git a/src/components/locked-content-lit.ts b/src/components/locked-content-lit.ts
new file mode 100644
index 0000000..229587c
--- /dev/null
+++ b/src/components/locked-content-lit.ts
@@ -0,0 +1,28 @@
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+@customElement("locked-content-lit")
+export class LockedContent extends LitElement {
+  // Static properties
+  @property() readonly imageId?: string;
+  @property() readonly imageURL?: string;
+  @property({ type: Object })
+  readonly targetPosition?: [lat: number, lng: number];
+
+  // Reactive state
+  @state()
+  protected _hasGeolocationPermission = false;
+  @state()
+  protected _unlocked = false;
+  @state()
+  protected _targetProximity?: number;
+
+  render() {
+    return html`
+      <div>
+        Hello from MyElement! ${this.imageId}
+        <p>${this.targetPosition}</p>
+      </div>
+    `;
+  }
+}
diff --git a/src/components/locked-content.ts b/src/components/locked-content.ts
index bbdcfc8..7e06b2d 100644
--- a/src/components/locked-content.ts
+++ b/src/components/locked-content.ts
@@ -2,7 +2,6 @@ import L, { type LatLngTuple } from "leaflet";
 import Toastify from "toastify-js";
 
 class LockedContent extends HTMLElement {
-  unlockButtonElement: HTMLElement | null;
   watchId: number;
   targetPos: LatLngTuple;
   geolocationOptions = {
diff --git a/tsconfig.json b/tsconfig.json
index c05caa2..7ec5a42 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
   }
 }