diff --git a/frontend/app/components/Session_/UnitStepsModal/index.tsx b/frontend/app/components/Session_/UnitStepsModal/index.tsx
index 93a0f96a2..033453d53 100644
--- a/frontend/app/components/Session_/UnitStepsModal/index.tsx
+++ b/frontend/app/components/Session_/UnitStepsModal/index.tsx
@@ -1,6 +1,6 @@
-import React from "react";
-import { TYPES, Input, Click, Location } from 'App/types/session/event'
-import { CodeBlock, CopyButton } from "UI";
+import React from 'react';
+import { TYPES, Input, Click, Location } from 'App/types/session/event';
+import { CodeBlock, CopyButton } from 'UI';
 import { Segmented } from 'antd';
 
 interface Props {
@@ -10,34 +10,62 @@ interface Props {
 }
 
 function UnitStepsModal({ events, width, height }: Props) {
-  const [eventStr, setEventStr] = React.useState('')
-  const [activeFramework, setActiveFramework] = React.useState('puppeteer')
+  const [eventStr, setEventStr] = React.useState('');
+  const [activeFramework, setActiveFramework] = React.useState('puppeteer');
 
   React.useEffect(() => {
-    const userEventTypes = [TYPES.LOCATION, TYPES.CLICK, TYPES.INPUT]
+    const userEventTypes = [TYPES.LOCATION, TYPES.CLICK, TYPES.INPUT];
     const puppeteerEvents = {
       [TYPES.LOCATION]: (event: Location) => `await page.goto('${event.url}')`,
-      [TYPES.CLICK]: (event: Click) => `await page.locator('${event.selector.length ? event.selector : event.label}').click()`,
-      [TYPES.INPUT]: (event: Input) => `await page.locator('${event.label}').type('Test Input')`,
-      'screen': () => `await page.setViewport({width: ${width}, height: ${height})`
-    }
+      [TYPES.CLICK]: (event: Click) =>
+        `await page.locator('${
+          event.selector.length ? event.selector : event.label
+        }').click()`,
+      [TYPES.INPUT]: (event: Input) =>
+        `await page.locator('${event.label}').type('Test Input')`,
+      screen: () =>
+        `await page.setViewport({width: ${width}, height: ${height})`,
+    };
     const cypressEvents = {
       [TYPES.LOCATION]: (event: Location) => `cy.visit('${event.url}')`,
-      [TYPES.CLICK]: (event: Click) => `cy.get('${event.selector.length ? event.selector : event.label}').click()`,
-      [TYPES.INPUT]: (event: Input) => `cy.get('${event.label}').type('Test Input')`,
-      'screen': () => `cy.viewport(${width}, ${height})`
-    }
-    const usedCollection = activeFramework === 'puppeteer' ? puppeteerEvents : cypressEvents
+      [TYPES.CLICK]: (event: Click) =>
+        `cy.get('${
+          event.selector.length ? event.selector : event.label
+        }').click()`,
+      [TYPES.INPUT]: (event: Input) =>
+        `cy.get('${event.label}').type('Test Input')`,
+      screen: () => `cy.viewport(${width}, ${height})`,
+    };
+    const playWrightEvents = {
+      [TYPES.LOCATION]: (event: Location) => `await page.goto('${event.url}')`,
+      [TYPES.CLICK]: (event: Click) =>
+        event.selector.length
+          ? `await page.locator('${event.selector}').click()`
+          : `await page.getByText('${event.label}').click()`,
+      [TYPES.INPUT]: (event: Input) =>
+        `await page.getByLabel('${event.label}').fill('Test Input')`,
+      screen: () =>
+        `await page.setViewport({width: ${width}, height: ${height})`,
+    };
 
-    let finalScript = ''
+    const collections = {
+      puppeteer: puppeteerEvents,
+      cypress: cypressEvents,
+      playwright: playWrightEvents,
+    }
+
+    // @ts-ignore
+    const usedCollection = collections[activeFramework];
+
+    let finalScript = '';
     events.forEach((ev) => {
       if (userEventTypes.includes(ev.type)) {
-        finalScript += usedCollection[ev.type](ev)
-        finalScript += '\n'
+        finalScript += usedCollection[ev.type](ev);
+        finalScript += '\n';
       }
-    })
-    setEventStr(finalScript)
-  }, [events, activeFramework])
+    });
+    setEventStr(finalScript);
+  }, [events, activeFramework]);
 
   return (
     <div className={'bg-white h-full flex flex-col items-start gap-2'}>
@@ -45,12 +73,18 @@ function UnitStepsModal({ events, width, height }: Props) {
         <Segmented
           options={[
             { label: 'Puppeteer', value: 'puppeteer' },
-            { label: 'Cypress', value: 'cypress' }
+            { label: 'Cypress', value: 'cypress' },
+            { label: 'Playwright', value: 'playwright' },
           ]}
           value={activeFramework}
           onChange={(value) => setActiveFramework(value)}
         />
-        <CopyButton size={'middle'} variant={'default'} content={eventStr} className={'capitalize font-medium text-neutral-400'} />
+        <CopyButton
+          size={'middle'}
+          variant={'default'}
+          content={eventStr}
+          className={'capitalize font-medium text-neutral-400'}
+        />
       </div>
       <div className={'w-full'}>
         <CodeBlock code={eventStr} language={'javascript'} />
@@ -59,4 +93,4 @@ function UnitStepsModal({ events, width, height }: Props) {
   );
 }
 
-export default UnitStepsModal;
\ No newline at end of file
+export default UnitStepsModal;
diff --git a/frontend/app/types/session/event.ts b/frontend/app/types/session/event.ts
index e603b53e5..8c28a45b3 100644
--- a/frontend/app/types/session/event.ts
+++ b/frontend/app/types/session/event.ts
@@ -170,7 +170,7 @@ export class Touch extends Event {
   }
 }
 
-class Input extends Event {
+export class Input extends Event {
   readonly type = INPUT;
   readonly name = 'Input';
   readonly hesitation: number = 0;