diff --git a/src/components/Componentes/question-birthplace.tsx b/src/components/Componentes/question-birthplace.tsx
index abb43f2..5ef9826 100644
--- a/src/components/Componentes/question-birthplace.tsx
+++ b/src/components/Componentes/question-birthplace.tsx
@@ -9,6 +9,7 @@ import { useQuestionAnswers } from "./question-answer-storage";
 import QuestionTitle from "./question-title";
 import { LoadingThreeDot } from "./loading-three-dot";
 import { useSheetScrollLock } from "./use-sheet-scroll-lock";
+import { Input } from "@/components/ui/input";
 
 const EXIT_ANIMATION_MS = 220;
 
@@ -479,25 +480,15 @@ export function QuestionBirthplace({
 
               {/* City Text Input */}
               <div className="w-full">
-                <input
+                <Input
                   ref={cityInputRef}
                   type="text"
                   name={`field_${question.id}`}
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="none"
-                  spellCheck="false"
-                  aria-autocomplete="none"
-                  data-lpignore="true"
-                  data-1p-ignore="true"
-                  data-bwignore="true"
-                  data-form-type="other"
                   data-no-auto-focus
                   disabled={disabled}
                   value={cityInput}
                   onChange={handleCityChange}
                   placeholder={cityPlaceholder}
-                  className="h-[54px] w-full rounded-[16px] border border-[#D0D5DD] bg-white px-4.5 text-[15px] font-medium text-[#181818] placeholder:text-[#98A2B3] hover:border-[#98A2B3] focus:border-[#6F6F6F] focus:ring-1 focus:ring-[#6F6F6F] outline-none transition-all"
                 />
               </div>
             </div>
diff --git a/src/components/Componentes/question-number.tsx b/src/components/Componentes/question-number.tsx
index 81ecfcd..00a4959 100644
--- a/src/components/Componentes/question-number.tsx
+++ b/src/components/Componentes/question-number.tsx
@@ -5,6 +5,7 @@ import type { QuestionField } from "@/lib/schema-adapter";
 import { useI18n } from "@/translations/provider";
 import { useQuestionAnswers } from "./question-answer-storage";
 import QuestionTitle from "./question-title";
+import { Input } from "@/components/ui/input";
 
 type QuestionNumberProps = {
   question: QuestionField;
@@ -186,19 +187,10 @@ export default function QuestionNumber({
         <QuestionTitle question={question} />
         <div className="flex gap-3 w-full relative" ref={currencyContainerRef}>
           <div className="flex-1 min-w-0">
-            <input
+            <Input
               type="text"
               inputMode="decimal"
               name={`field_${question.id}`}
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="none"
-              spellCheck="false"
-              aria-autocomplete="none"
-              data-lpignore="true"
-              data-1p-ignore="true"
-              data-bwignore="true"
-              data-form-type="other"
               required={question.required && !disabled}
               disabled={disabled || Boolean(derivedFromQuestion)}
               placeholder={dynamicPlaceholder}
@@ -396,18 +388,9 @@ export default function QuestionNumber({
       ].join(" ")}
     >
       <QuestionTitle question={question} />
-      <input
+      <Input
         type="number"
         name={`field_${question.id}`}
-        autoComplete="off"
-        autoCorrect="off"
-        autoCapitalize="none"
-        spellCheck="false"
-        aria-autocomplete="none"
-        data-lpignore="true"
-        data-1p-ignore="true"
-        data-bwignore="true"
-        data-form-type="other"
         required={question.required && !disabled}
         disabled={disabled || Boolean(derivedFromQuestion)}
         min={min || undefined}
diff --git a/src/components/Componentes/question-phone.tsx b/src/components/Componentes/question-phone.tsx
index 9d45232..2eab460 100644
--- a/src/components/Componentes/question-phone.tsx
+++ b/src/components/Componentes/question-phone.tsx
@@ -569,6 +569,7 @@ export function QuestionPhone({
       <QuestionTitle question={question} />
       <div
         dir="ltr"
+        data-snap-drag-ignore="true"
         className={[
           "flex h-[54px] w-full items-center rounded-[16px] border bg-white text-[#181818] focus-within:border-[#6F6F6F] focus-within:ring-1 focus-within:ring-[#6F6F6F] transition-all",
           showInvalidState
@@ -611,6 +612,7 @@ export function QuestionPhone({
           <input
             type="tel"
             inputMode="tel"
+            data-snap-drag-ignore="true"
             name={`field_${question.id}`}
             autoComplete="off"
             autoCorrect="off"
diff --git a/src/components/Componentes/question-text.tsx b/src/components/Componentes/question-text.tsx
index c185a08..7463527 100644
--- a/src/components/Componentes/question-text.tsx
+++ b/src/components/Componentes/question-text.tsx
@@ -2,7 +2,9 @@
 
 import { useEffect, useRef, useState } from "react";
 import type { QuestionField } from "@/lib/schema-adapter";
+import { cn } from "@/lib/utils";
 import { useI18n } from "@/translations/provider";
+import { Input } from "@/components/ui/input";
 import { useQuestionAnswers } from "./question-answer-storage";
 import QuestionTitle from "./question-title";
 
@@ -84,42 +86,24 @@ export default function QuestionText({
       <div
         data-question-answered={isAnswered ? "true" : "false"}
         data-question-type="email"
-        className={[
+        className={cn(
           "flex w-full flex-col gap-2 transition-opacity duration-200",
-          disabled ? "pointer-events-none opacity-30" : "",
-        ].join(" ")}
+          disabled && "pointer-events-none opacity-30",
+        )}
       >
         <QuestionTitle question={question} />
-        <div
+        <Input
+          type="text"
+          inputMode="email"
           dir="ltr"
-          className={[
-            "flex h-[54px] w-full items-center rounded-[16px] border bg-white text-[#181818] focus-within:border-[#6F6F6F] focus-within:ring-1 focus-within:ring-[#6F6F6F] transition-all",
-            showInvalidState
-              ? "border-[#F2465F] ring-1 ring-[#F2465F]"
-              : "border-[#D0D5DD] hover:border-[#98A2B3]",
-          ].join(" ")}
-        >
-          <input
-            type="text"
-            inputMode="email"
-            name={`field_${question.id}`}
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="none"
-            spellCheck="false"
-            aria-autocomplete="none"
-            data-lpignore="true"
-            data-1p-ignore="true"
-            data-bwignore="true"
-            data-form-type="other"
-            value={localValue}
-            onChange={(e) => handleChange(e.target.value)}
-            onBlur={handleBlur}
-            placeholder={question.extras.placeHolder}
-            disabled={disabled || isMuted}
-            className="h-full w-full border-0 bg-transparent px-4.5 text-[15px] font-medium text-[#181818] outline-none placeholder:text-[#98A2B3] disabled:opacity-50 disabled:cursor-not-allowed"
-          />
-        </div>
+          name={`field_${question.id}`}
+          hasError={showInvalidState}
+          value={localValue}
+          onChange={(e) => handleChange(e.target.value)}
+          onBlur={handleBlur}
+          placeholder={question.extras.placeHolder}
+          disabled={disabled || isMuted}
+        />
         {showInvalidState ? (
           <span className="block group-10 font-semibold text-[#F2465F]">
             {question.validation?.errorMessage ||
@@ -141,39 +125,25 @@ export default function QuestionText({
     <div
       data-question-answered={isAnswered ? "true" : "false"}
       data-question-type={question.type}
-      className={[
+      className={cn(
         "flex w-full flex-col gap-2 transition-opacity duration-200",
-        disabled ? "pointer-events-none opacity-30" : "",
-      ].join(" ")}
+        disabled && "pointer-events-none opacity-30",
+      )}
     >
       <QuestionTitle question={question} />
-      <input
+      <Input
         type={isNumericQuestion ? "tel" : "text"}
         inputMode={isNumericQuestion ? "numeric" : "text"}
         pattern={isNumericQuestion ? "[0-9]*" : undefined}
         name={`field_${question.id}`}
-        autoComplete="off"
-        autoCorrect="off"
-        autoCapitalize="none"
-        spellCheck="false"
-        aria-autocomplete="none"
-        data-lpignore="true"
-        data-1p-ignore="true"
-        data-bwignore="true"
-        data-form-type="other"
         value={localValue}
         onChange={(e) => handleChange(e.target.value)}
         onBlur={handleBlur}
         placeholder={question.extras.placeHolder}
         disabled={disabled || isMuted}
-        className={[
-          "h-[54px] w-full rounded-[16px] border border-[#D0D5DD] bg-white px-4.5 text-[15px] font-medium text-[#181818] outline-none transition-all placeholder:text-[#98A2B3] hover:border-[#98A2B3] focus:border-[#6F6F6F] focus:ring-1 focus:ring-[#6F6F6F] disabled:bg-[#F5F2F1] disabled:text-[#7C7472]",
-          isMuted
-            ? "opacity-50 cursor-not-allowed bg-[#F5F5F5] border-[#E2E8F0]"
-            : "",
-        ]
-          .filter(Boolean)
-          .join(" ")}
+        className={cn(
+          isMuted && "opacity-50 cursor-not-allowed bg-[#F5F5F5] border-[#E2E8F0]",
+        )}
       />
       {isMarjaQuestion ? (
         <div className="mt-2.5 flex items-center">
diff --git a/src/components/Componentes/question-textarea.tsx b/src/components/Componentes/question-textarea.tsx
index 3302e36..6f3e83d 100644
--- a/src/components/Componentes/question-textarea.tsx
+++ b/src/components/Componentes/question-textarea.tsx
@@ -2,7 +2,9 @@
 
 import { useEffect, useRef, useState } from "react";
 import type { QuestionField } from "@/lib/schema-adapter";
+import { cn } from "@/lib/utils";
 import { useI18n } from "@/translations/provider";
+import { Textarea } from "@/components/ui/textarea";
 import { useQuestionAnswers } from "./question-answer-storage";
 import QuestionTitle from "./question-title";
 
@@ -56,20 +58,21 @@ export function QuestionTextarea({
     <div
       data-question-answered={isAnswered ? "true" : "false"}
       data-question-type="textarea"
-      className={[
+      className={cn(
         "flex w-full flex-col gap-2 transition-opacity duration-200",
-        disabled ? "pointer-events-none opacity-30" : "",
-      ].join(" ")}
+        disabled && "pointer-events-none opacity-30",
+      )}
     >
       <QuestionTitle question={question} />
-      <textarea
+      <Textarea
+        name={`field_${question.id}`}
         value={localValue}
         onChange={handleChange}
         onBlur={handleBlur}
         placeholder={question.extras.placeHolder}
         disabled={disabled}
         rows={5}
-        className="h-[270px] w-full rounded-[16px] border border-[#D0D5DD] bg-white px-4.5 py-4 text-[15px] font-medium text-[#181818] outline-none transition-all placeholder:text-[#98A2B3] hover:border-[#98A2B3] focus:border-[#6F6F6F] focus:ring-1 focus:ring-[#6F6F6F] disabled:bg-[#F5F2F1] disabled:text-[#7C7472] resize-none"
+        className="h-[270px]"
       />
       {description ? (
         <span className="block group-10 font-semibold text-[#747474]">
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
new file mode 100644
index 0000000..01cd4ed
--- /dev/null
+++ b/src/components/ui/index.ts
@@ -0,0 +1,2 @@
+export * from "./input";
+export * from "./textarea";
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..e263305
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface InputProps extends React.ComponentProps<"input"> {
+  hasError?: boolean;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = "text", hasError, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        type={type}
+        data-snap-drag-ignore="true"
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="none"
+        spellCheck="false"
+        aria-autocomplete="none"
+        data-lpignore="true"
+        data-1p-ignore="true"
+        data-bwignore="true"
+        data-form-type="other"
+        className={cn(
+          "h-[54px] w-full rounded-[16px] border border-[#D0D5DD] bg-white px-4.5 text-[15px] font-medium text-[#181818] outline-none transition-all placeholder:text-[#98A2B3] hover:border-[#98A2B3] focus:border-[#6F6F6F] focus:ring-1 focus:ring-[#6F6F6F] disabled:cursor-not-allowed disabled:bg-[#F5F2F1] disabled:text-[#7C7472]",
+          hasError && "border-[#F2465F] ring-1 ring-[#F2465F] focus:border-[#F2465F] focus:ring-[#F2465F]",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Input.displayName = "Input";
+
+export { Input };
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..9833482
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps extends React.ComponentProps<"textarea"> {
+  hasError?: boolean;
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, hasError, ...props }, ref) => {
+    return (
+      <textarea
+        ref={ref}
+        data-snap-drag-ignore="true"
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="none"
+        spellCheck="false"
+        aria-autocomplete="none"
+        data-lpignore="true"
+        data-1p-ignore="true"
+        data-bwignore="true"
+        data-form-type="other"
+        className={cn(
+          "w-full rounded-[16px] border border-[#D0D5DD] bg-white px-4.5 py-4 text-[15px] font-medium text-[#181818] outline-none transition-all placeholder:text-[#98A2B3] hover:border-[#98A2B3] focus:border-[#6F6F6F] focus:ring-1 focus:ring-[#6F6F6F] disabled:cursor-not-allowed disabled:bg-[#F5F2F1] disabled:text-[#7C7472] resize-none",
+          hasError && "border-[#F2465F] ring-1 ring-[#F2465F] focus:border-[#F2465F] focus:ring-[#F2465F]",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Textarea.displayName = "Textarea";
+
+export { Textarea };