diff --git a/apps/website/screens/theme-generator/componentsRegistry.tsx b/apps/website/screens/theme-generator/componentsRegistry.tsx
index 516134301..21b65f68c 100644
--- a/apps/website/screens/theme-generator/componentsRegistry.tsx
+++ b/apps/website/screens/theme-generator/componentsRegistry.tsx
@@ -31,6 +31,7 @@ import {
   TabsPreview,
   TextareaPreview,
   TextInputPreview,
+  TimeInputPreview,
   ToastPreview,
   ToggleGroupPreview,
   TooltipPreview,
@@ -64,6 +65,7 @@ export const componentsRegistry = {
   "/components/switch": SwitchPreview,
   "/components/text-input": TextInputPreview,
   "/components/textarea": TextareaPreview,
+  "/components/time-input": TimeInputPreview,
   "/components/toggle-group": ToggleGroupPreview,
   "/components/breadcrumbs": BreadcrumbsPreview,
   "/components/contextual-menu": ContextualMenuPreview,
diff --git a/apps/website/screens/theme-generator/previews/components/TimeInputPreview.tsx b/apps/website/screens/theme-generator/previews/components/TimeInputPreview.tsx
new file mode 100644
index 000000000..e7bacd3c4
--- /dev/null
+++ b/apps/website/screens/theme-generator/previews/components/TimeInputPreview.tsx
@@ -0,0 +1,15 @@
+import { DxcFlex, DxcTimeInput } from "@dxc-technology/halstack-react";
+const TimeInputPreview = () => {
+  return (
+    <DxcFlex gap="var(--spacing-gap-ml)">
+      <DxcTimeInput label="Start time" helperText="We'll use this time to schedule your appointment." />
+      <DxcTimeInput
+        label="End time"
+        helperText="We'll use this time to schedule your appointment."
+        error="Incorrect time"
+      />
+    </DxcFlex>
+  );
+};
+
+export default TimeInputPreview;
diff --git a/apps/website/screens/theme-generator/previews/components/index.ts b/apps/website/screens/theme-generator/previews/components/index.ts
index b4aa47787..5e26b5c24 100644
--- a/apps/website/screens/theme-generator/previews/components/index.ts
+++ b/apps/website/screens/theme-generator/previews/components/index.ts
@@ -30,6 +30,7 @@ export { default as TablePreview } from "./TablePreview";
 export { default as TabsPreview } from "./TabsPreview";
 export { default as TextareaPreview } from "./TextareaPreview";
 export { default as TextInputPreview } from "./TextInputPreview";
+export { default as TimeInputPreview } from "./TimeInputPreview";
 export { default as ToastPreview } from "./ToastPreview";
 export { default as ToggleGroupPreview } from "./ToggleGroupPreview";
 export { default as TooltipPreview } from "./TooltipPreview";