diff --git a/packages/site/src/pages/visualTests/VisualTestInputTimeV2Page.tsx b/packages/site/src/pages/visualTests/VisualTestInputTimeV2Page.tsx
new file mode 100644
index 0000000000..c4c8310e01
--- /dev/null
+++ b/packages/site/src/pages/visualTests/VisualTestInputTimeV2Page.tsx
@@ -0,0 +1,240 @@
+import { Box, Grid, Heading, InputTime, Stack, Text } from "@jobber/components";
+import { useState } from "react";
+
+const REFERENCE_TIME = new Date(2024, 0, 1, 14, 30, 0);
+
+export const VisualTestInputTimeV2Page = () => {
+  const [value, setValue] = useState<Date | undefined>(undefined);
+
+  return (
+    <Box padding="large">
+      <Stack gap="extravagant">
+        <Heading level={3}>InputTime v2 Examples</Heading>
+
+        <Stack gap="large">
+          <section data-testid="basic-empty">
+            <Text size="large">Basic (empty)</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={value}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+
+          <section data-testid="with-value">
+            <Text size="large">With value</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={REFERENCE_TIME}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+
+          <section data-testid="with-description">
+            <Text size="large">With description</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={value}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                  description="Please select a start time"
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+
+          <section data-testid="with-error">
+            <Text size="large">With error</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={value}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                  error="Please enter a valid time"
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+
+          <section data-testid="invalid">
+            <Text size="large">Invalid (no message)</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={value}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                  invalid={true}
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+
+          <section data-testid="disabled">
+            <Text size="large">Disabled (with value)</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={REFERENCE_TIME}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                  disabled={true}
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+
+          <section data-testid="disabled-empty">
+            <Text size="large">Disabled (empty)</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={undefined}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                  disabled={true}
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+
+          <section data-testid="readonly">
+            <Text size="large">ReadOnly (with value)</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={REFERENCE_TIME}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                  readOnly={true}
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+
+          <section data-testid="size-small">
+            <Text size="large">Small size</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={REFERENCE_TIME}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                  size="small"
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+
+          <section data-testid="size-large">
+            <Text size="large">Large size</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={REFERENCE_TIME}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                  size="large"
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+
+          <section data-testid="align-center">
+            <Text size="large">Center aligned</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={REFERENCE_TIME}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                  align="center"
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+
+          <section data-testid="align-right">
+            <Text size="large">Right aligned</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={REFERENCE_TIME}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                  align="right"
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+
+          <section data-testid="inline">
+            <Text size="large">Inline</Text>
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <Text>Start:</Text>
+              <InputTime
+                version={2}
+                value={REFERENCE_TIME}
+                onChange={newValue => setValue(newValue)}
+                placeholder="Time"
+                inline={true}
+              />
+            </div>
+          </section>
+
+          <section data-testid="clearable-always">
+            <Text size="large">Clearable always (with value)</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={REFERENCE_TIME}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                  clearable="always"
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+
+          <section data-testid="clearable-focus">
+            <Text size="large">Clearable on focus (with value)</Text>
+            <Grid>
+              <Grid.Cell size={{ xs: 12, md: 6 }}>
+                <InputTime
+                  version={2}
+                  value={REFERENCE_TIME}
+                  onChange={newValue => setValue(newValue)}
+                  placeholder="Select time"
+                  clearable="while-editing"
+                />
+              </Grid.Cell>
+            </Grid>
+          </section>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};
diff --git a/packages/site/src/pages/visualTests/VisualTestRouter.tsx b/packages/site/src/pages/visualTests/VisualTestRouter.tsx
index 82f903de55..3132a1d4c7 100644
--- a/packages/site/src/pages/visualTests/VisualTestRouter.tsx
+++ b/packages/site/src/pages/visualTests/VisualTestRouter.tsx
@@ -32,6 +32,7 @@ import { VisualTestInputPasswordPage } from "./VisualTestInputPasswordPage";
 import { VisualTestInputPhoneNumberPage } from "./VisualTestInputPhoneNumberPage";
 import { VisualTestInputTextPage } from "./VisualTestInputTextPage";
 import { VisualTestInputTimePage } from "./VisualTestInputTimePage";
+import { VisualTestInputTimeV2Page } from "./VisualTestInputTimeV2Page";
 import { VisualTestInputValidationPage } from "./VisualTestInputValidationPage";
 import { VisualTestLayoutPage } from "./VisualTestLayoutPage";
 import { VisualTestLightBoxPage } from "./VisualTestLightBoxPage";
@@ -105,6 +106,7 @@ const visualTestPages: Record<string, () => ReactElement> = {
   "input-phone-number": VisualTestInputPhoneNumberPage,
   "input-text": VisualTestInputTextPage,
   "input-time": VisualTestInputTimePage,
+  "input-time-v2": VisualTestInputTimeV2Page,
   "input-validation": VisualTestInputValidationPage,
   lightbox: VisualTestLightBoxPage,
   "lightbox-composable": VisualTestLightBoxComposablePage,
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts b/packages/site/tests/visual/inputtime-v2.visual.ts
new file mode 100644
index 0000000000..c2ae7b1e48
--- /dev/null
+++ b/packages/site/tests/visual/inputtime-v2.visual.ts
@@ -0,0 +1,88 @@
+import { expect, test } from "@playwright/test";
+
+const screenshotOptions = {
+  animations: "disabled" as const,
+  caret: "hide" as const,
+  fullPage: true,
+};
+
+test.describe("InputTime v2 Visual Tests", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/visual-tests/input-time-v2");
+    await page.waitForLoadState("networkidle");
+    await page.waitForTimeout(500);
+  });
+
+  test("1 - initial page state", async ({ page }) => {
+    await expect(page).toHaveScreenshot("1-initial.png", screenshotOptions);
+  });
+
+  test.describe("interactions", () => {
+    test("2 - focus state (empty)", async ({ page }) => {
+      const input = page
+        .getByTestId("basic-empty")
+        .getByTestId("ATL-InputTime-input");
+      await input.scrollIntoViewIfNeeded();
+      await input.focus();
+      await page.waitForTimeout(200);
+      await expect(page).toHaveScreenshot(
+        "2-focus-empty.png",
+        screenshotOptions,
+      );
+    });
+
+    test("3 - focus state (with value)", async ({ page }) => {
+      const input = page
+        .getByTestId("with-value")
+        .getByTestId("ATL-InputTime-input");
+      await input.scrollIntoViewIfNeeded();
+      await input.focus();
+      await page.waitForTimeout(200);
+      await expect(page).toHaveScreenshot(
+        "3-focus-with-value.png",
+        screenshotOptions,
+      );
+    });
+
+    test("4 - focus state (error)", async ({ page }) => {
+      const input = page
+        .getByTestId("with-error")
+        .getByTestId("ATL-InputTime-input");
+      await input.scrollIntoViewIfNeeded();
+      await input.focus();
+      await page.waitForTimeout(200);
+      await expect(page).toHaveScreenshot(
+        "4-focus-error.png",
+        screenshotOptions,
+      );
+    });
+
+    test("5 - clearable focus: clear button visible on focus", async ({
+      page,
+    }) => {
+      const input = page
+        .getByTestId("clearable-focus")
+        .getByTestId("ATL-InputTime-input");
+      await input.scrollIntoViewIfNeeded();
+      await input.focus();
+      await page.waitForTimeout(200);
+      await expect(page).toHaveScreenshot(
+        "5-clearable-focus-focused.png",
+        screenshotOptions,
+      );
+    });
+
+    test("6 - clearable always: clear button hover", async ({ page }) => {
+      const clearButton = page
+        .getByTestId("clearable-always")
+        .getByRole("button", { name: /clear/i });
+      await clearButton.scrollIntoViewIfNeeded();
+      await clearButton.hover();
+      await page.waitForTimeout(200);
+      await expect(page).toHaveScreenshot(
+        "6-clearable-always-clear-hover.png",
+        screenshotOptions,
+      );
+    });
+  });
+});
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/1-initial-chromium.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/1-initial-chromium.png
new file mode 100644
index 0000000000..697b87a09a
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/1-initial-chromium.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/1-initial-firefox.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/1-initial-firefox.png
new file mode 100644
index 0000000000..a91ccf90b9
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/1-initial-firefox.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/1-initial-webkit.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/1-initial-webkit.png
new file mode 100644
index 0000000000..8ca8870fda
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/1-initial-webkit.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/2-focus-empty-chromium.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/2-focus-empty-chromium.png
new file mode 100644
index 0000000000..076960fdd9
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/2-focus-empty-chromium.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/2-focus-empty-firefox.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/2-focus-empty-firefox.png
new file mode 100644
index 0000000000..ff5c975bc7
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/2-focus-empty-firefox.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/2-focus-empty-webkit.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/2-focus-empty-webkit.png
new file mode 100644
index 0000000000..8245e7cd80
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/2-focus-empty-webkit.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/3-focus-with-value-chromium.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/3-focus-with-value-chromium.png
new file mode 100644
index 0000000000..e2873252cb
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/3-focus-with-value-chromium.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/3-focus-with-value-firefox.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/3-focus-with-value-firefox.png
new file mode 100644
index 0000000000..861e81daf4
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/3-focus-with-value-firefox.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/3-focus-with-value-webkit.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/3-focus-with-value-webkit.png
new file mode 100644
index 0000000000..070927b0d8
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/3-focus-with-value-webkit.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/4-focus-error-chromium.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/4-focus-error-chromium.png
new file mode 100644
index 0000000000..b9145e2b9e
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/4-focus-error-chromium.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/4-focus-error-firefox.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/4-focus-error-firefox.png
new file mode 100644
index 0000000000..7c0dfed473
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/4-focus-error-firefox.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/4-focus-error-webkit.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/4-focus-error-webkit.png
new file mode 100644
index 0000000000..106adac23b
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/4-focus-error-webkit.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/5-clearable-focus-focused-chromium.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/5-clearable-focus-focused-chromium.png
new file mode 100644
index 0000000000..4137575827
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/5-clearable-focus-focused-chromium.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/5-clearable-focus-focused-firefox.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/5-clearable-focus-focused-firefox.png
new file mode 100644
index 0000000000..a6fa207a30
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/5-clearable-focus-focused-firefox.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/5-clearable-focus-focused-webkit.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/5-clearable-focus-focused-webkit.png
new file mode 100644
index 0000000000..d88c28c118
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/5-clearable-focus-focused-webkit.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/6-clearable-always-clear-hover-chromium.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/6-clearable-always-clear-hover-chromium.png
new file mode 100644
index 0000000000..7f28c3dbcc
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/6-clearable-always-clear-hover-chromium.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/6-clearable-always-clear-hover-firefox.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/6-clearable-always-clear-hover-firefox.png
new file mode 100644
index 0000000000..cca041c571
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/6-clearable-always-clear-hover-firefox.png differ
diff --git a/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/6-clearable-always-clear-hover-webkit.png b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/6-clearable-always-clear-hover-webkit.png
new file mode 100644
index 0000000000..9b53267ee6
Binary files /dev/null and b/packages/site/tests/visual/inputtime-v2.visual.ts-snapshots/6-clearable-always-clear-hover-webkit.png differ