diff --git a/zero_true/__init__.py b/zero_true/__init__.py
index 778ab9e1..20bc5ce4 100644
--- a/zero_true/__init__.py
+++ b/zero_true/__init__.py
@@ -19,4 +19,5 @@
 from zt_backend.models.components.html import HTML, pygwalker
 from zt_backend.models.state.state import state
 from zt_backend.models.state.state import global_state
-from zt_backend.models.components.chat_ui import chat_ui
\ No newline at end of file
+from zt_backend.models.components.chat_ui import chat_ui
+from zt_backend.models.components.otp import Otp
\ No newline at end of file
diff --git a/zt_backend/models/components/otp.py b/zt_backend/models/components/otp.py
new file mode 100644
index 00000000..4752b612
--- /dev/null
+++ b/zt_backend/models/components/otp.py
@@ -0,0 +1,35 @@
+from typing import List, Optional,Union
+from pydantic import Field, field_validator, validator
+from zt_backend.models.components.zt_component import ZTComponent
+from zt_backend.models.components.validations import validate_color
+from zt_backend.models.state.user_state import UserContext
+
+class Otp(ZTComponent):
+    """A Otp component that allows for passwords or authentication"""
+    component: str = Field("v-otp", description="Vue component name")
+    value: Union[str,int] = Field ('', description="The input text value")
+    autofocus: bool = Field(False, description="Vue component name")
+    disabled: bool = Field(False, description="If true, the input is disabled")
+    color: str = Field('primary', pre=True, description="Color of the switch. Can be custom or standard Material color")
+    divider: bool = Field(False, description='Divider for otp')
+    width: Union[int,str] = Field('100%', description="Width of the switch")
+    type: str= Field("number",description="Type of otp")
+
+    triggerEvent: str = Field('finish', description="Trigger event for when to trigger a run")
+    loading: bool =Field(False,description="Loading for otp")
+    
+    @field_validator('color')
+    def validate_color(cls, color):
+        return validate_color(color)
+    
+    @validator('value', always=True) #TODO: debug and replace with field validator
+    def get_value_from_global_state(cls, value, values):
+        id = values['id'] # Get the id if it exists in the field values
+        execution_state = UserContext.get_state()
+        try:
+            if execution_state and id and id in execution_state.component_values:  # Check if id exists in global_state
+                return execution_state.component_values[id]  # Return the value associated with id in global_state
+        except Exception as e:
+            e
+        return value  # If id doesn't exist in global_state, return the original value
+    
\ No newline at end of file
diff --git a/zt_backend/models/generate_schema.py b/zt_backend/models/generate_schema.py
index 27ce4147..80ddfebc 100644
--- a/zt_backend/models/generate_schema.py
+++ b/zt_backend/models/generate_schema.py
@@ -20,6 +20,7 @@
 from .components.timer import Timer
 from .components.iframe import iFrame
 from .components.html import HTML
+from. components.otp import Otp
 import json
 
 def generate_json(model, name):
@@ -62,4 +63,5 @@ def generate_schema():
     generate_json(Text,'text')
     generate_json(Timer,'timer')
     generate_json(iFrame,'iframe')
-    generate_json(HTML,'html')
\ No newline at end of file
+    generate_json(HTML,'html')
+    generate_json(Otp,'otp')
\ No newline at end of file
diff --git a/zt_backend/models/notebook.py b/zt_backend/models/notebook.py
index 3e85c52d..0d70ec5b 100644
--- a/zt_backend/models/notebook.py
+++ b/zt_backend/models/notebook.py
@@ -18,6 +18,7 @@
 from zt_backend.models.components.autocomplete import Autocomplete
 from zt_backend.models.components.card import Card
 from zt_backend.models.components.timer import Timer
+from zt_backend.models.components.otp import Otp
 
 def deserialize_component(data: Dict[str, Any]) -> ZTComponent:
     component_map = {
@@ -35,6 +36,7 @@ def deserialize_component(data: Dict[str, Any]) -> ZTComponent:
         "v-card": Card,
         "v-timer": Timer,
         "plotly-plot": PlotlyComponent
+        "v-otp-input": Otp
         # add other component types here
     }
     component_class = data.get("component")
diff --git a/zt_frontend/src/components/ComponentWrapper.vue b/zt_frontend/src/components/ComponentWrapper.vue
index bef19b42..1018fcbd 100644
--- a/zt_frontend/src/components/ComponentWrapper.vue
+++ b/zt_frontend/src/components/ComponentWrapper.vue
@@ -48,6 +48,7 @@ import {
   VImg,
   VAutocomplete,
   VCard,
+  VOtpInput
 } from "vuetify/lib/components/index.mjs";
 import { VDataTable } from "vuetify/components/VDataTable";
 import TextComponent from "@/components/TextComponent.vue";
@@ -69,6 +70,7 @@ export default {
     "v-card": VCard,
     "v-text": TextComponent,
     "plotly-plot": PlotlyPlot,
+    "v-otp":VOtpInput
   },
   emits: ["runCode"],
   props: {
diff --git a/zt_frontend/src/types/otp.d.ts b/zt_frontend/src/types/otp.d.ts
new file mode 100644
index 00000000..771842d2
--- /dev/null
+++ b/zt_frontend/src/types/otp.d.ts
@@ -0,0 +1,74 @@
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+/**
+ * Unique id for a component
+ */
+export type Id = string;
+/**
+ * Optional variable name associated with a component
+ */
+export type VariableName = string;
+/**
+ * Vue component name
+ */
+export type Component = string;
+/**
+ * The input text value
+ */
+export type Value = string | number;
+/**
+ * Vue component name
+ */
+export type Autofocus = boolean;
+/**
+ * If true, the input is disabled
+ */
+export type Disabled = boolean;
+/**
+ * Color of the switch. Can be custom or standard Material color
+ */
+export type Color = string;
+/**
+ * Divider for otp
+ */
+export type Divider = boolean;
+/**
+ * Width of the switch
+ */
+export type Width = number | string;
+/**
+ * Type of otp
+ */
+export type Type = string;
+/**
+ * Trigger event for when to trigger a run
+ */
+export type Triggerevent = string;
+/**
+ * Loading for otp
+ */
+export type Loading = boolean;
+
+/**
+ * A Otp component that allows for passwords or authentication
+ */
+export interface Otp {
+  id: Id;
+  variable_name?: VariableName;
+  component?: Component;
+  value?: Value;
+  autofocus?: Autofocus;
+  disabled?: Disabled;
+  color?: Color;
+  divider?: Divider;
+  width?: Width;
+  type?: Type;
+  triggerEvent?: Triggerevent;
+  loading?: Loading;
+  [k: string]: unknown;
+}