diff --git a/app/[locale]/login/page.tsx b/app/[locale]/login/page.tsx
index a476278..d5cd131 100644
--- a/app/[locale]/login/page.tsx
+++ b/app/[locale]/login/page.tsx
@@ -4,6 +4,7 @@ import { Main } from '@/app/ui/Main';
 import { authConfig } from "@/app/lib/auth";
 import { SignInButton } from '@/app/ui/SignInButton';
 import Image from 'next/image';
+import { getTranslations } from "next-intl/server";
 
 type Provider = {
   id: string;
@@ -34,17 +35,18 @@ function getKeyValuesFromObject<T>(obj: any, keys: (keyof T)[]): T {
 
 const Page:FC = async () => {
 
-  const providers = await getProviders()
+  const providers = await getProviders();
+  const t = await getTranslations("login-page");
 
  return (
     <Main>
       <h1 className="text-3xl font-bold text-center">
-        <span className="text-neutral-50 mr-3">Which bills are due?</span>
-        <span className="text-indigo-400">Which are payed?</span>
-        <span className="text-neutral-50 ml-3">How much are my expenses?</span>
+        <span className="text-neutral-50 mr-3">{t("main-card.title-1")}</span>
+        <span className="text-indigo-400">{t("main-card.title-2")}</span>
+        <span className="text-neutral-50 ml-3">{t("main-card.title-3")}</span>
       </h1>
-      <p className="p mt-[1em] text-center">These are the questions this simple and free app will help you with ...</p>
-      <p className="p mb-[1em] text-center">... try it & use it completly free!</p>
+      <p className="p mt-[1em] text-center">{t("main-card.text-1")}</p>
+      <p className="p mb-[1em] text-center">{t("main-card.text-2")}</p>
       <span className="text-center">
       {
         Object.values(providers).map((provider) => (
@@ -54,23 +56,24 @@ const Page:FC = async () => {
         ))
       }
       </span>
-      <video className="m-auto mt-4" title="Demo osnovnih koraka u aplikaciji" role="img" data-js-id="hero" loop muted playsInline autoPlay poster="hero.png">
-        <source src="/welcome-demo-vp9-25fps-1500bps.webm" type="video/webm" />
-      </video>
-      <h1 className="text-2xl font-bold text-neutral-50 my-5">Easy copy of expenditures</h1>
-      <p className="p mt-[1em]">All your realestate and utilitys are automatically copied to the next month, so you don&apos;t neeed to do it by hand.</p>
-      <video className="m-auto mt-4" title="Demo kopiranja mjeseca" role="img" data-js-id="hero" loop muted playsInline autoPlay poster="bar-code-demo.png">
-        <source src="/kopiranje-mjeseca-demo.webm" type="video/webm" />
+      <video className="m-auto mt-4" title={t("main-card.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("main-card.image-url")}>
+        <source src={t("main-card.video-url")} type="video/webm" />
       </video>
 
-      <h1 className="text-2xl font-bold text-neutral-50 my-5">Color signals status</h1>
-      <p className="p mt-[1em]">Each of trhe utility bills is color coded - at a glance you can see which bill was received and which one is payed.</p>
+      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-1.title")}</h1>
+      <p className="p mt-[1em]">{t("card-1.text")}</p>
+      <video className="m-auto mt-4" title={t("card-1.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-1.image-url")}>
+        <source src={t("card-1.video-url")} type="video/webm" />
+      </video>
+
+      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-2.title")}</h1>
+      <p className="p mt-[1em]">{t("card-2.text")}</p>
       <Image src="/status-color-demo.png" alt="Boje označavaju status računa" className="m-auto mt-4" width={423} height={145} />
 
-      <h1 className="text-2xl font-bold text-neutral-50 my-5">Extraction of 2D bar code</h1>
-      <p className="p mt-[1em]">If the attached dokument contains a 2D bar code, it is automatically extracted and shown on the page, so you can scan it without opening the PDF document.</p>
-      <video className="m-auto mt-4" title="Demo generiranja 2D bar koda" role="img" data-js-id="hero" loop muted playsInline autoPlay poster="bar-code-demo.png">
-        <source src="/bar-code-demo.webm" type="video/webm" />
+      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-3.title")}</h1>
+      <p className="p mt-[1em]">{t("card-3.text")}</p>
+      <video className="m-auto mt-4" title={t("card-3.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-3.image-url")}>
+        <source src={t("card-3.video-url")} type="video/webm" />
       </video>
     </Main>
   );
diff --git a/messages/en.json b/messages/en.json
index d2cf6a0..c7d9df5 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -12,22 +12,34 @@
     },
   "login-page": {
     "main-card": {
-      "main-title-1": "Which bills are due?",
-      "main-title-2": "Which are payed?",
-      "main-title-3": "How much are my expenses?",
-      "main-text": "These are the questions this simple and free app will help you with ... try it & use it completly free!"
+      "title-1": "Which bills are due?",
+      "title-2": "Which are payed?",
+      "title-3": "How much are my expenses?",
+      "text-1": "These are the questions this simple and free app will help you with ...",
+      "text-2": "... try it & use it completly free!",
+      "video-url": "/welcome-demo-vp9-25fps-1500bps.webm",
+      "image-url": "/hero.png",
+      "video-title": "Demo osnovnih koraka u aplikaciji"
     },
     "card-1": {
       "title":"Easy copy of expenditures",
-      "text": "All your realestate and utilitys are automatically copied to the next month, so you don't neeed to do it by hand."
+      "text": "All your realestate and utilitys are automatically copied to the next month, so you don't neeed to do it by hand.",
+      "video-url": "/kopiranje-mjeseca-demo.webm",
+      "image-url": "/status-color-demo.png",
+      "video-title": "Demo kopiranja mjeseca"
     },
     "card-2": {
       "title": "Color signals status",
-      "text": "Each of the utility bills is color coded - at a glance you can see which bill was received and which one is payed."
+      "text": "Each of the utility bills is color coded - at a glance you can see which bill was received and which one is payed.",
+      "image-url": "/bar-code-demo.png",
+      "image-alt": "Boje označavaju status računa"
     },
     "card-3": {
       "title": "Color signals status",
-      "text": "If the attached dokument contains a 2D bar code, it is automatically extracted and shown on the page, so you can scan it without opening the PDF document."
+      "text": "If the attached dokument contains a 2D bar code, it is automatically extracted and shown on the page, so you can scan it without opening the PDF document.",
+      "video-url": "/welcome-demo-vp9-25fps-1500bps.webm",
+      "image-url": "/bar-code-demo.png",
+      "video-title": "Demo osnovnih koraka u aplikaciji"
     }
   }
 }
\ No newline at end of file
diff --git a/messages/hr.json b/messages/hr.json
index 1ca528b..7511ce8 100644
--- a/messages/hr.json
+++ b/messages/hr.json
@@ -12,22 +12,34 @@
     },
     "login-page": {
       "main-card": {
-        "main-title-1": "Koji računi su stigli?",
-        "main-title-2": "Koji su plaćeni?",
-        "main-title-3": "Koliki su mi troškovi?",
-        "main-text": "To su pitanja na koja će vam ova jednostavna aplikacija odgovoriti ... isprobajte je, koristite je potpuno besplatno!"
+        "title-1": "Koji računi su stigli?",
+        "title-2": "Koji su plaćeni?",
+        "title-3": "Koliki su mi troškovi?",
+        "text-1": "To su pitanja na koja će vam ova jednostavna aplikacija odgovoriti ...",
+        "text-2": "... isprobajte je, koristite je potpuno besplatno!",
+        "video-url": "/welcome-demo-vp9-25fps-1500bps.webm",
+        "image-url": "/hero.png",
+        "video-title": "Demo osnovnih koraka u aplikaciji"
       },
       "card-1": {
         "title":"Prijenos režija u idući mjesec",
-        "text": "Sve vaše nekretnine i pripadajuće režije se automatski prenose u idući mjesec, tako da ne morate svaki mjesec ponovno unositi iste podatke."
+        "text": "Sve vaše nekretnine i pripadajuće režije se automatski prenose u idući mjesec, tako da ne morate svaki mjesec ponovno unositi iste podatke.",
+        "video-url": "/kopiranje-mjeseca-demo.webm",
+        "image-url": "/status-color-demo.png",
+        "video-title": "Demo kopiranja mjeseca"
       },
       "card-2": {
         "title": "Boja signalizira status",
-        "text": "Jednim pogledom možete vidjeti koji računi su plaćeni, a koji nisu. U tome vam pomaže boja koja označava status računa."
+        "text": "Jednim pogledom možete vidjeti koji računi su plaćeni, a koji nisu. U tome vam pomaže boja koja označava status računa.",
+        "image-url": "/bar-code-demo.png",
+        "image-alt": "Boje označavaju status računa"
       },
       "card-3": {
         "title": "Prikaz bar koda za plaćanje",
-        "text": "Ako priloženi dokument sadrži 2D barkod, on se automatski izvlači i prikazuje na stranici, tako da ga možete skenirati bez otvaranja PDF dokumenta."
+        "text": "Ako priloženi dokument sadrži 2D barkod, on se automatski izvlači i prikazuje na stranici, tako da ga možete skenirati bez otvaranja PDF dokumenta.",
+        "video-url": "/bar-code-demo.webm",
+        "image-url": "/bar-code-demo.png",
+        "video-title": "Demo osnovnih koraka u aplikaciji"
       }
     }
 }
\ No newline at end of file