diff --git a/components/BottomHeader/index.tsx b/components/BottomHeader/index.tsx
index 93eff8af..eaaec479 100644
--- a/components/BottomHeader/index.tsx
+++ b/components/BottomHeader/index.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 import { useRouter } from 'next/router'
 import { useCookies } from 'react-cookie'
 import { useSnapshot } from 'valtio'
+import { useTranslation } from 'next-i18next'
+
 import clonedeep from 'lodash.clonedeep'
 import * as Scroll from 'react-scroll'
 
@@ -11,15 +13,13 @@ import Header from '~components/Header'
 import Button from '~components/Button'
 
 import api from '~utils/api'
-import { accountState } from '~utils/accountState'
 import { appState, initialAppState } from '~utils/appState'
 
-import { ButtonType } from '~utils/enums'
 import CrossIcon from '~public/icons/Cross.svg'
-import { route } from 'next/dist/server/router'
 
 const BottomHeader = () => {
-    const account = useSnapshot(accountState)
+    const { t } = useTranslation('common')
+
     const app = useSnapshot(appState)
 
     const router = useRouter()
@@ -67,9 +67,9 @@ const BottomHeader = () => {
     const leftNav = () => {
         if (router.pathname === '/p/[party]' || router.pathname === '/new') {
             if (app.party.detailsVisible) {
-                return (<Button icon="edit" active={true} onClick={toggleDetails}>Hide info</Button>)
+                return (<Button icon="edit" active={true} onClick={toggleDetails}>{t('buttons.hide_info')}</Button>)
             } else {
-                return (<Button icon="edit" onClick={toggleDetails}>Edit info</Button>)
+                return (<Button icon="edit" onClick={toggleDetails}>{t('buttons.show_info')}</Button>)
             }
         } else {
             return (<div />)
@@ -84,20 +84,20 @@ const BottomHeader = () => {
                     <span className='icon'>
                         <CrossIcon />
                     </span>
-                    <span className="text">Delete team</span>
+                    <span className="text">{t('buttons.delete')}</span>
                 </AlertDialog.Trigger>
                 <AlertDialog.Portal>
                 <AlertDialog.Overlay className="Overlay" />
                 <AlertDialog.Content className="Dialog">
                     <AlertDialog.Title className="DialogTitle">
-                        Delete team
+                        {t('delete_team.title')}
                     </AlertDialog.Title>
                     <AlertDialog.Description className="DialogDescription">
-                        Are you sure you want to permanently delete this team?
+                        {t('delete_team.description')}
                     </AlertDialog.Description>
                     <div className="actions">
-                        <AlertDialog.Cancel className="Button modal">Nevermind</AlertDialog.Cancel>
-                        <AlertDialog.Action className="Button modal destructive" onClick={(e) => deleteTeam(e)}>Yes, delete</AlertDialog.Action>
+                        <AlertDialog.Cancel className="Button modal">{t('delete_team.buttons.cancel')}</AlertDialog.Cancel>
+                        <AlertDialog.Action className="Button modal destructive" onClick={(e) => deleteTeam(e)}>{t('delete_team.buttons.confirm')}</AlertDialog.Action>
                     </div>
                 </AlertDialog.Content>
                 </AlertDialog.Portal>
diff --git a/components/TopHeader/index.tsx b/components/TopHeader/index.tsx
index 4f5f8977..c7915304 100644
--- a/components/TopHeader/index.tsx
+++ b/components/TopHeader/index.tsx
@@ -1,8 +1,10 @@
 import React, { useEffect } from 'react'
+import { useSnapshot } from 'valtio'
 import { useCookies } from 'react-cookie'
 import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
 import clonedeep from 'lodash.clonedeep'
-import { useSnapshot } from 'valtio'
 
 import api from '~utils/api'
 import { accountState, initialAccountState } from '~utils/accountState'
@@ -13,6 +15,8 @@ import Button from '~components/Button'
 import HeaderMenu from '~components/HeaderMenu'
 
 const TopHeader = () => {
+    const { t } = useTranslation('common')
+
     // Cookies
     const [accountCookies, setAccountCookie, removeAccountCookie] = useCookies(['account'])
     const [userCookies, setUserCookies, removeUserCookie] = useCookies(['user'])
@@ -100,7 +104,7 @@ const TopHeader = () => {
     const leftNav = () => {
         return (
             <div className="dropdown">
-                <Button icon="menu">Menu</Button>
+                <Button icon="menu">{t('buttons.menu')}</Button>
                 { (account.user) ? 
                     <HeaderMenu authenticated={account.authorized} username={account.user.username} logout={logout} /> :
                     <HeaderMenu authenticated={account.authorized} />
@@ -123,9 +127,9 @@ const TopHeader = () => {
                     saveButton() : ''
                 }
                 { (router.route === '/p/[party]') ? 
-                    <Button icon="link" onClick={copyToClipboard}>Copy link</Button> : ''
+                    <Button icon="link" onClick={copyToClipboard}>{t('buttons.copy')}</Button> : ''
                 }
-                <Button icon="new" onClick={newParty}>New</Button>
+                <Button icon="new" onClick={newParty}>{t('buttons.new')}</Button>
             </div>
         )
     }