diff --git a/app/[locale]/account/LogoutButton.tsx b/app/[locale]/account/LogoutButton.tsx
new file mode 100644
index 0000000..d4bc1b1
--- /dev/null
+++ b/app/[locale]/account/LogoutButton.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { FC } from 'react';
+import LogoutIcon from "@mui/icons-material/Logout";
+import { signOut } from 'next-auth/react';
+import { useLocale, useTranslations } from 'next-intl';
+import { Button } from '@/app/ui/button';
+
+export const LogoutButton: FC = () => {
+    const t = useTranslations('account-page');
+    const locale = useLocale();
+
+    const handleLogout = () => {
+        signOut({ callbackUrl: `/${locale}/login` });
+    };
+
+    return (
+        <Button className='btn' onClick={handleLogout}><LogoutIcon /> {t('logout-button')}</Button>
+    )
+}
\ No newline at end of file
diff --git a/app/[locale]/account/page.tsx b/app/[locale]/account/page.tsx
index 7d1c37c..d60ace9 100644
--- a/app/[locale]/account/page.tsx
+++ b/app/[locale]/account/page.tsx
@@ -2,12 +2,13 @@ import { FC } from 'react';
 import { Main } from '@/app/ui/Main';
 import Link from 'next/link';
 import SettingsIcon from "@mui/icons-material/Settings";
-import LogoutIcon from "@mui/icons-material/Logout";
 import AccountCircle from "@mui/icons-material/AccountCircle";
-import { useTranslations } from 'next-intl';
+import { getTranslations, getLocale } from 'next-intl/server';
+import { LogoutButton } from './LogoutButton';
 
-const Page: FC = () => {
-    const t = useTranslations('account-page');
+const Page: FC = async () => {
+    const t = await getTranslations('account-page');
+    const locale = await getLocale();
 
     return (
         <Main>
@@ -15,8 +16,8 @@ const Page: FC = () => {
                 <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
                     <div className="card-body">
                         <h2 className="card-title"><AccountCircle /> {t('title')}</h2>
-                        <Link href="/account/settings" className='btn btn-neutral'><SettingsIcon /> {t('settings-button')}</Link>
-                        <Link href="/account/logout" className='btn btn-error'><LogoutIcon /> {t('logout-button')}</Link>
+                        <Link href={`/${locale}/account/settings`} className='btn btn-neutral'><SettingsIcon /> {t('settings-button')}</Link>
+                        <LogoutButton />
                     </div>
                 </div>
             </div>
diff --git a/messages/en.json b/messages/en.json
index 50c0a1c..8402eb8 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -5,7 +5,8 @@
   "account-page": {
     "title": "User account",
     "settings-button": "User Settings",
-    "logout-button": "Logout"
+    "logout-button": "Logout",
+    "logging-out-message": "Logging out..."
   },
   "PageFooter": {
     "app-description": "Helping you to stay on top of your utility bills",
diff --git a/messages/hr.json b/messages/hr.json
index cd3a06c..8725686 100644
--- a/messages/hr.json
+++ b/messages/hr.json
@@ -5,7 +5,8 @@
   "account-page": {
     "title": "Korisnički račun",
     "settings-button": "Korisničke postavke",
-    "logout-button": "Odjava"
+    "logout-button": "Odjava",
+    "logging-out-message": "Odjavljujem se..."
   },
   "PageFooter": {
     "app-description": "Preuzmite kontrolu nad svojim režijama!",