diff --git a/packages/portal/pages/index.tsx b/packages/portal/pages/index.tsx
index ad6a3f38..9c6fde8d 100644
--- a/packages/portal/pages/index.tsx
+++ b/packages/portal/pages/index.tsx
@@ -5,36 +5,48 @@ import Nav from '../components/home/Nav';
 import Recent from '../components/home/Recent';
 import Form from '../components/search/Form';
 import { SEARCH_QUERY } from '../graphql/queries';
+import { loadNamespaces } from './_app';
+import useTranslation from 'next-translate/useTranslation';
 
-const Home: React.FC = () => (
-  <div className="container mx-auto">
-    <Head>
-      <title>Portal</title>
-      <link rel="icon" href="/favicon.ico" />
-    </Head>
-    <Nav />
-    <section className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row">
-      <div>
-        <h1 className="text-4xl mb-3 font-thin">
-          Find, Share and Publish <br /> Quality Data with{' '}
-          <span className="text-orange-500">Datahub</span>
-        </h1>
-        <p className="text-md font-light mb-3 w-4/5">
-          At Datahub, we have over thousands of datasets for free and a Premium
-          Data Service for additional or customised data with guaranteed
-          updates.
-        </p>
-        <Form />
-      </div>
-      <div className="mt-4">
-        <img src="/images/banner.svg" className="w-4/5" alt="banner_img" />
-      </div>
-    </section>
-    <Recent />
-  </div>
-);
+const Home: React.FC<{ locale: any; locales: any }> = ({
+  locale,
+  locales,
+}) => {
+  const { t } = useTranslation();
 
-export const getServerSideProps: GetServerSideProps = async () => {
+  return (
+    <>
+      <div className="container mx-auto">
+        <Head>
+          <title>{t`common:title`}</title>
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+        <Nav />
+        <section className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row">
+          <div>
+            <h1 className="text-4xl mb-3 font-thin">
+              Find, Share and Publish <br /> Quality Data with{' '}
+              <span className="text-orange-500">Datahub</span>
+            </h1>
+            <p className="text-md font-light mb-3 w-4/5">
+              {t`common:description`}
+            </p>
+            <Form />
+          </div>
+          <div className="mt-4">
+            <img src="/images/banner.svg" className="w-4/5" alt="banner_img" />
+          </div>
+        </section>
+        <Recent />
+      </div>
+    </>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async ({
+  locale,
+  locales,
+}) => {
   const apolloClient = initializeApollo();
 
   await apolloClient.query({
@@ -48,6 +60,9 @@ export const getServerSideProps: GetServerSideProps = async () => {
   return {
     props: {
       initialApolloState: apolloClient.cache.extract(),
+      _ns: await loadNamespaces(['common'], locale),
+      locale,
+      locales,
     },
   };
 };
