diff --git a/app/clock.tsx b/app/clock.tsx
index 26c3346..aac4df1 100644
--- a/app/clock.tsx
+++ b/app/clock.tsx
@@ -1,7 +1,10 @@
 'use client'
 
+import dynamic from 'next/dynamic'
 import { useEffect, useState } from 'react'
 
+const Time = dynamic(() => import('./time'), { ssr: false })
+
 type Props = {
   time: number
 }
@@ -19,10 +22,7 @@ export const Clock = ({ time: initial }: Props) => {
 
   return (
     <div className="text-7xl tabular-nums">
-      {time.toLocaleTimeString(undefined, {
-        hour: 'numeric',
-        minute: '2-digit'
-      })}
+      <Time time={time} />
     </div>
   )
 }
diff --git a/app/time.tsx b/app/time.tsx
new file mode 100644
index 0000000..7973b98
--- /dev/null
+++ b/app/time.tsx
@@ -0,0 +1,15 @@
+type Props = {
+  time: Date
+}
+const Time = ({ time }: Props) => {
+  return (
+    <span>
+      {time.toLocaleTimeString(undefined, {
+        hour: 'numeric',
+        minute: '2-digit'
+      })}
+    </span>
+  )
+}
+
+export default Time