Can someone tell me why i get an hydration Error on this?

<main className="font-light">
      <div className="mb-2">Logo.(REPLACE)</div>
      <h1 className="text-2xl mb-2">{t('header')}</h1>
      <div className="flex text-md">
        <p className="mr-1">{t('isregistered')}</p>
        <div className="text-blue-600 cursor-pointer hover:underline">
          <a href="/signin">{t('login')}.</a>
        </div>
      </div>
      <div className="mt-4">
        <div className="grid w-full max-w-sm items-center gap-1.5">
          <Label className="ml-1">Email</Label>
          <Input type="email" placeholder="Email" />
        </div>
        <div className="grid w-full max-w-sm items-center gap-1.5 mt-3">
          <Label className="ml-1">Email</Label>
          <Input type="email" placeholder="Email" />
        </div>
        <div className="grid w-full max-w-sm items-center gap-1.5 mt-3">
          <Label className="ml-1">Email</Label>
          <Input type="email" placeholder="Email" />
        </div>
        <div className="grid w-full max-w-sm items-center gap-1.5 mt-3">
          <Label className="ml-1">Email</Label>
          <Input type="email" placeholder="Email" />
        </div>
      </div>
      <Button className="w-full h-10 mt-4">{t('createaccount')}</Button>
      <div className="flex mt-8">
        <p className="line w-1/2 h-px bg-black" />
        <p className="inline text-sm mx-3 -mt-[10px]">{t('or')}</p>
        <p className="line w-1/2 h-px bg-black" />
      </div>
    </main>