diff --git a/src/App.js b/src/App.js
index bdac567..5e0abb2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,303 +1,301 @@
-import { Router, Switch, Route } from "react-router-dom";
-import React, { useState } from "react";
-import ReactGA from 'react-ga';
-import { createBrowserHistory } from 'history';
-import { gql, useQuery } from "@apollo/client";
-import get from "lodash.get";
-import Post from "./Post";
-import { getUrlFromMappingByPathName } from "./utils";
-import LandingPage from "./LandingPage";
-import ListingPage from "./ListingPage";
-import SimplePage from "./SimplePage";
-import { UnknownComponent } from "./components";
-import {
-  actionFields,
-  assetFields,
-  seoFields,
-  subpageNavigationItemFields,
-} from "./graphQLFragments";
-import GraphQLLoader from "./components/GraphQLLoader";
-import getSeo from "./utils/getSeo";
-import { getListingPaginationAndFilter } from "./utils/queryString";
-
-export default function App(props) {
-  const homePageQuery = gql`
-    query HomePageQuery($codename: String!) {
-      post_All {
-        items {
-          slug
-          _system_ {
-            codename
-            type {
-              _system_ {
-                codename
-              }
-            }
-          }
-        }
-      }
-      homepage(codename: $codename) {
-        content {
-          ... on LandingPage {
-            _system_ {
-              codename
-              type {
-                _system_ {
-                  codename
-                }
-              }
-            }
-          }
-        }
-        _seo {
-          ...SeoFields
-        }
-        headerLogo {
-          ...AssetFields
-        }
-        title
-        favicon {
-          url
-        }
-        font {
-          items {
-            _system_ {
-              codename
-            }
-          }
-        }
-        palette {
-          items {
-            _system_ {
-              codename
-            }
-          }
-        }
-        mainMenu {
-          ... on Menu {
-            _system_ {
-              codename
-            }
-            actions {
-              items {
-                ... on Action {
-                  ...ActionFields
-                }
-              }
-            }
-          }
-        }
-        subpages {
-          items {
-            ... on NavigationItem {
-              ...SubpageNavigationItemFields
-              subpages {
-                items {
-                  ...SubpageNavigationItemFields
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    ${seoFields}
-    ${assetFields}
-    ${actionFields}
-    ${subpageNavigationItemFields}
-  `;
-
-  const getNavigationData = (parrentSlug, item) => {
-    if (item._system_?.type?._system_.codename === "post") {
-      return {
-        slug: parrentSlug.concat([item.slug]),
-        navigationType: "post",
-        navigationCodename: item._system_?.codename,
-        contentCodename: item._system_?.codename,
-        contentType: item._system_?.type._system_.codename,
-      };
-    }
-    return {
-      slug: parrentSlug.concat([item.slug]),
-      navigationType: "navigationItem",
-      navigationCodename: item._system_?.codename,
-      contentCodename: item.content._system_.codename,
-      contentType: item.content._system_.type._system_.codename,
-    };
-  };
-
-  const homepageCodename = "homepage";
-
-  const getMappings = (data) => {
-    const mappings = [
-      {
-        slug: [],
-        navigationCodename: homepageCodename,
-        navigationType: "homepage",
-        contentCodename: data.homepage.content._system_.codename,
-        contentType: data.homepage.content._system_.type._system_.codename,
-      },
-    ];
-
-    data.homepage.subpages.items.forEach((item) => {
-      const navigationData = getNavigationData([], item);
-      mappings.push(navigationData);
-      mappings.push(
-        ...item.subpages.items.map((subItem) =>
-          getNavigationData(navigationData.slug, subItem)
-        )
-      );
-
-      const content = item.content;
-      if (content._system_.type._system_.codename === "listing_page") {
-        const listingData = data[`${content.contentType}_All`];
-        if (!listingData) {
-          console.error(
-            `Unknown listing page content type: ${content.contentType}`
-          );
-        } else {
-          mappings.push(
-            ...listingData.items.map((subItem) =>
-              getNavigationData(navigationData.slug, subItem)
-            )
-          );
-        }
-      }
-    });
-
-    return mappings.reduce((result, item) => {
-      result[[].concat(item.slug).join("/")] = {
-        navigationCodename: item.navigationCodename,
-        navigationType: item.navigationType,
-        contentCodename: item.contentCodename,
-        contentType: item.contentType,
-      };
-
-      return result;
-    }, {});
-  };
-
-  const getSiteConfiguration = (data) => {
-    return {
-      asset: get(data, "homepage.headerLogo", null),
-      title: get(data, "homepage.title", ""),
-      mainMenuActions: get(
-        data,
-        "homepage.mainMenu.actions.items",
-        []
-      ),
-      favicon: get(data, "homepage.favicon.url", null),
-      font: get(data, "homepage.font.items[0]._system_.codename", null),
-      palette: get(data, "homepage.palette.items[0]._system_.codename", null),
-    };
-  };
-
-  const { loading, error } = useQuery(homePageQuery, {
-    variables: { codename: homepageCodename },
-    onCompleted: (data) => {
-      const mappings = getMappings(data);
-      const siteConfiguration = getSiteConfiguration(data);
-
-      setMappings(mappings);
-      setSiteConfiguration(siteConfiguration);
-      setHomepageSeo(getSeo(data.homepage._seo));
-    },
-  });
-
-  const [mappings, setMappings] = useState(null);
-  const [siteConfiguration, setSiteConfiguration] = useState(null);
-  const [homepageSeo, setHomepageSeo] = useState(null);
-
-  if (error || loading || !mappings || !siteConfiguration || !homepageSeo) {
-    return <GraphQLLoader error={error} loading={loading} />;
-  }
-
-  const history = createBrowserHistory();
-  if (props.initializeAnalytics) {
-    history.listen(location => {
-      ReactGA.set({ page: location.pathname });
-      ReactGA.pageview(location.pathname);
-    });
-  }
-
-  return (
-    <Router history={history} basename={process.env.PUBLIC_URL}>
-      <Switch>
-        <Route path="/" render={renderPage} />
-      </Switch>
-    </Router>
-  );
-
-  function renderPage({ location }) {
-    const navigationItem = getUrlFromMappingByPathName(mappings, location.pathname);
-
-    if (!navigationItem) {
-      if (process.env.NODE_ENV === "development") {
-        console.error(`Unknown navigation item pathname: ${location.pathname}`);
-        return (
-          <div>
-            <h2>Not found</h2>
-            <pre>{JSON.stringify(mappings, undefined, 2)}</pre>
-          </div>
-        );
-      }
-      return <h2>Not found</h2>;
-    }
-
-    const pageProps = {
-      siteConfiguration,
-      mappings,
-    };
-
-    if (navigationItem.navigationType === "homepage") {
-      pageProps["seo"] = homepageSeo;
-      pageProps["codename"] = navigationItem.contentCodename;
-    }
-
-    switch (navigationItem.contentType) {
-      case "landing_page":
-        return (
-          <LandingPage
-            {...pageProps}
-            codename={
-              pageProps["codename"] || navigationItem.navigationCodename
-            }
-          />
-        );
-      case "listing_page":
-        return (
-          <ListingPage
-            {...pageProps}
-            codename={navigationItem.navigationCodename}
-            {...getListingPaginationAndFilter(location)}
-          />
-        );
-      case "simple_page":
-        return (
-          <SimplePage
-            {...pageProps}
-            codename={
-              pageProps["codename"] || navigationItem.navigationCodename
-            }
-          />
-        );
-      case "post":
-        return (
-          <Post {...pageProps} codename={navigationItem.contentCodename} />
-        );
-      default:
-        if (process.env.NODE_ENV === "development") {
-          console.error(
-            `Unknown navigation item content type: ${navigationItem.contentType}`
-          );
-          return (
-            <UnknownComponent>
-              <pre>{JSON.stringify(mappings, undefined, 2)}</pre>
-            </UnknownComponent>
-          );
-        }
-        return null;
-    }
-  }
-}
+import { Router, Switch, Route, useLocation } from "react-router-dom";
+import React, { useState } from "react";
+import ReactGA from 'react-ga';
+import { gql, useQuery } from "@apollo/client";
+import get from "lodash.get";
+import Post from "./Post";
+import { getUrlFromMappingByPathName } from "./utils";
+import LandingPage from "./LandingPage";
+import ListingPage from "./ListingPage";
+import SimplePage from "./SimplePage";
+import { UnknownComponent } from "./components";
+import {
+  actionFields,
+  assetFields,
+  seoFields,
+  subpageNavigationItemFields,
+} from "./graphQLFragments";
+import GraphQLLoader from "./components/GraphQLLoader";
+import getSeo from "./utils/getSeo";
+import { getLanguage, getListingPaginationAndFilter } from "./utils/queryString";
+import { languages } from './components/LanguageSelector';
+
+export default function App() {
+  const homePageQuery = gql`
+    query HomePageQuery($codename: String!, $language: String!) {
+      post_All {
+        items {
+          slug
+          _system_ {
+            codename
+            type {
+              _system_ {
+                codename
+              }
+            }
+          }
+        }
+      }
+      homepage(codename: $codename, languageFilter: {languageCodename: $language}) {
+        content {
+          ... on LandingPage {
+            _system_ {
+              codename
+              type {
+                _system_ {
+                  codename
+                }
+              }
+            }
+          }
+        }
+        _seo {
+          ...SeoFields
+        }
+        headerLogo {
+          ...AssetFields
+        }
+        title
+        favicon {
+          url
+        }
+        font {
+          items {
+            _system_ {
+              codename
+            }
+          }
+        }
+        palette {
+          items {
+            _system_ {
+              codename
+            }
+          }
+        }
+        mainMenu {
+          ... on Menu {
+            _system_ {
+              codename
+            }
+            actions {
+              items {
+                ... on Action {
+                  ...ActionFields
+                }
+              }
+            }
+          }
+        }
+        subpages {
+          items {
+            ... on NavigationItem {
+              ...SubpageNavigationItemFields
+              subpages {
+                items {
+                  ...SubpageNavigationItemFields
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    ${seoFields}
+    ${assetFields}
+    ${actionFields}
+    ${subpageNavigationItemFields}
+  `;
+
+  const getNavigationData = (parrentSlug, item) => {
+    if (item._system_?.type?._system_.codename === "post") {
+      return {
+        slug: parrentSlug.concat([item.slug]),
+        navigationType: "post",
+        navigationCodename: item._system_?.codename,
+        contentCodename: item._system_?.codename,
+        contentType: item._system_?.type._system_.codename,
+      };
+    }
+    return {
+      slug: parrentSlug.concat([item.slug]),
+      navigationType: "navigationItem",
+      navigationCodename: item._system_?.codename,
+      contentCodename: item.content._system_.codename,
+      contentType: item.content._system_.type._system_.codename,
+    };
+  };
+
+  const homepageCodename = "homepage";
+
+  const getMappings = (data) => {
+    const mappings = [
+      {
+        slug: [],
+        navigationCodename: homepageCodename,
+        navigationType: "homepage",
+        contentCodename: data.homepage.content._system_.codename,
+        contentType: data.homepage.content._system_.type._system_.codename,
+      },
+    ];
+
+    data.homepage.subpages.items.forEach((item) => {
+      const navigationData = getNavigationData([], item);
+      mappings.push(navigationData);
+      mappings.push(
+        ...item.subpages.items.map((subItem) =>
+          getNavigationData(navigationData.slug, subItem)
+        )
+      );
+
+      const content = item.content;
+      if (content._system_.type._system_.codename === "listing_page") {
+        const listingData = data[`${content.contentType}_All`];
+        if (!listingData) {
+          console.error(
+            `Unknown listing page content type: ${content.contentType}`
+          );
+        } else {
+          mappings.push(
+            ...listingData.items.map((subItem) =>
+              getNavigationData(navigationData.slug, subItem)
+            )
+          );
+        }
+      }
+    });
+
+    return mappings.reduce((result, item) => {
+      result[[].concat(item.slug).join("/")] = {
+        navigationCodename: item.navigationCodename,
+        navigationType: item.navigationType,
+        contentCodename: item.contentCodename,
+        contentType: item.contentType,
+      };
+
+      return result;
+    }, {});
+  };
+
+  const getSiteConfiguration = (data) => {
+    return {
+      asset: get(data, "homepage.headerLogo", null),
+      title: get(data, "homepage.title", ""),
+      mainMenuActions: get(
+        data,
+        "homepage.mainMenu.actions.items",
+        []
+      ),
+      favicon: get(data, "homepage.favicon.url", null),
+      font: get(data, "homepage.font.items[0]._system_.codename", null),
+      palette: get(data, "homepage.palette.items[0]._system_.codename", null),
+    };
+  };
+
+  const language = getLanguage(useLocation()) || languages[0].codename;
+
+  const { loading, error, fetchMore } = useQuery(homePageQuery, {
+    variables: { codename: homepageCodename, language: language },
+    onCompleted: async (data) => {
+      const mappings = getMappings(data);
+      const siteConfiguration = getSiteConfiguration(data);
+
+      setSiteConfiguration(siteConfiguration);
+      setHomepageSeo(getSeo(data.homepage._seo));
+
+      await fetchMore({
+        variables: { codename: homepageCodename, language: languages.find(lang => lang.codename !== language).codename},
+        updateQuery: (_, fetchMoreResult) => {
+          setMappings({...getMappings(fetchMoreResult.fetchMoreResult), ...mappings});
+        }
+      });
+    },
+  });
+
+  const [mappings, setMappings] = useState(null);
+  const [siteConfiguration, setSiteConfiguration] = useState(null);
+  const [homepageSeo, setHomepageSeo] = useState(null);
+
+  if (error || loading || !mappings || !siteConfiguration || !homepageSeo) {
+    return <GraphQLLoader error={error} loading={loading} />;
+  }
+
+  return (
+    <Switch>
+      <Route path="/" render={renderPage} />
+    </Switch>
+  );
+
+  function renderPage({ location }) {
+    const navigationItem = getUrlFromMappingByPathName(mappings, location.pathname);
+
+    if (!navigationItem) {
+      if (process.env.NODE_ENV === "development") {
+        console.error(`Unknown navigation item pathname: ${location.pathname}`);
+        return (
+          <div>
+            <h2>Not found</h2>
+            <pre>{JSON.stringify(mappings, undefined, 2)}</pre>
+          </div>
+        );
+      }
+      return <h2>Not found</h2>;
+    }
+
+    const pageProps = {
+      siteConfiguration,
+      mappings,
+    };
+
+    if (navigationItem.navigationType === "homepage") {
+      pageProps["seo"] = homepageSeo;
+      pageProps["codename"] = navigationItem.contentCodename;
+    }
+
+    switch (navigationItem.contentType) {
+      case "landing_page":
+        return (
+          <LandingPage
+            {...pageProps}
+            codename={
+              pageProps["codename"] || navigationItem.navigationCodename
+            }
+          />
+        );
+      case "listing_page":
+        return (
+          <ListingPage
+            {...pageProps}
+            codename={navigationItem.navigationCodename}
+            {...getListingPaginationAndFilter(location)}
+          />
+        );
+      case "simple_page":
+        return (
+          <SimplePage
+            {...pageProps}
+            codename={
+              pageProps["codename"] || navigationItem.navigationCodename
+            }
+          />
+        );
+      case "post":
+        return (
+          <Post {...pageProps} codename={navigationItem.contentCodename} />
+        );
+      default:
+        if (process.env.NODE_ENV === "development") {
+          console.error(
+            `Unknown navigation item content type: ${navigationItem.contentType}`
+          );
+          return (
+            <UnknownComponent>
+              <pre>{JSON.stringify(mappings, undefined, 2)}</pre>
+            </UnknownComponent>
+          );
+        }
+        return null;
+    }
+  }
+}
diff --git a/src/LandingPage.js b/src/LandingPage.js
index 0bd2515..c41f28d 100644
--- a/src/LandingPage.js
+++ b/src/LandingPage.js
@@ -8,6 +8,9 @@ import React, { useState } from "react";
 import { gql, useQuery } from "@apollo/client";
 import { richTextFields, seoFields } from "./graphQLFragments";
 import getSeo from "./utils/getSeo";
+import { useLocation } from 'react-router-dom';
+import { getLanguage } from './utils/queryString';
+import { languages } from './components/LanguageSelector';
 
 const useStyles = makeStyles((theme) => ({
   sections: {
@@ -129,8 +132,8 @@ function LandingPage(props) {
   `;
 
   const landingPageQuery = gql`
-    query LandingPageQuery($codename: String!) {
-      landingPage(codename: $codename) {
+    query LandingPageQuery($codename: String!, $language: String!) {
+      landingPage(codename: $codename, languageFilter: {languageCodename: $language}) {
         ...LandingPageFields
       }
     }
@@ -138,8 +141,8 @@ function LandingPage(props) {
   `;
 
   const navigationAndLandingPageQuery = gql`
-    query NavigationAndLandingPageQuery($codename: String!) {
-      navigationItem(codename: $codename) {
+    query NavigationAndLandingPageQuery($codename: String!, $language: String!) {
+      navigationItem(codename: $codename, languageFilter: {languageCodename: $language}) {
         _seo {
           ...SeoFields
         }
@@ -158,11 +161,12 @@ function LandingPage(props) {
 
   const [sectionItems, setSectionItems] = useState(null);
   const [seo, setSeo] = useState({});
+    const language = getLanguage(useLocation()) || languages[0].codename;
 
   const { loading, error } = useQuery(
     props.seo ? landingPageQuery : navigationAndLandingPageQuery,
     {
-      variables: { codename: props.codename },
+      variables: { codename: props.codename, language: language},
       onCompleted: (data) => {
         if (props.seo) {
           setSectionItems(data.landingPage.sections.items);
diff --git a/src/components/Action.js b/src/components/Action.js
index 19b0e9d..fbb10bc 100644
--- a/src/components/Action.js
+++ b/src/components/Action.js
@@ -1,12 +1,19 @@
 import get from "lodash.get";
 import { Button } from "@material-ui/core";
 import { Link, Icon } from ".";
+import { useLocation } from 'react-router-dom';
 
 function Action(props) {
-  const { action } = props;
+  const search = useLocation().search;
+
+  const getHrefFromUrlSlugAndPreserveQueryString = (navigationItem) => {
+    return `${get(navigationItem, "slug")}${search}`
+  }
+
+  const { action, size } = props;
   const navigationItem = get(action, "navigationItem", null);
   const href = navigationItem._system_.type.codename === "external_url" ?
-               get(navigationItem, "url") : get(navigationItem, "slug");
+               get(navigationItem, "url") : getHrefFromUrlSlugAndPreserveQueryString(navigationItem);
   const action_options = get(action, "options.items", []);
 
 
@@ -38,7 +45,7 @@ function Action(props) {
       startIcon={iconPosition && iconPosition === "left" && <Icon icon={icon} />}
       endIcon={iconPosition && iconPosition === "right" && <Icon icon={icon} />}
       underline="none"
-      size={props.size}
+      size={size}
       href={href}
       {...config}
       {...options}>
diff --git a/src/components/Header.js b/src/components/Header.js
index 3d2088a..a2cb682 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -4,6 +4,7 @@ import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 import { Action, Image, Link, SideDrawer } from ".";
 import { Container, Hidden } from "@material-ui/core";
+import LanguageSelector from './LanguageSelector';
 
 
 const useStyles = makeStyles((theme) => ({
@@ -47,6 +48,7 @@ function Header({ asset, title, mainMenuActions }) {
               <div className={classes.mainMenu}>
                 {mainMenuActions.map((navigationItem, index) =>
                     <Action key={index} action={navigationItem} />)}
+                <LanguageSelector/>
               </div>
             </Hidden>
             <Hidden mdUp>
diff --git a/src/components/LanguageSelector.js b/src/components/LanguageSelector.js
new file mode 100644
index 0000000..354eaf5
--- /dev/null
+++ b/src/components/LanguageSelector.js
@@ -0,0 +1,43 @@
+import React from "react";
+import MuiSelect from "@material-ui/core/Select";
+import { useHistory } from 'react-router-dom';
+import { makeStyles, MenuItem } from '@material-ui/core';
+import { getLanguage, setLanguage } from '../utils/queryString';
+
+const useStyles = makeStyles((theme) => ({
+  selectLanguage: {
+    clear: 'both',
+    borderBottom: 'none'
+  },
+}));
+
+export const languages = [{
+        name: "EN",
+        codename: "default"
+    },
+    {
+        name: "CZ",
+        codename: "cz"
+    }
+];
+
+function LanguageSelector() {
+  const history = useHistory();
+  const classes = useStyles();
+  const handleClick = ({target}) => {
+    history.push(setLanguage(history.location, target.value));
+  }
+  return (
+    <MuiSelect
+        value={getLanguage(history.location)}
+        onChange={handleClick}
+        className={classes.selectLanguage}
+        displayEmpty
+        renderValue={value => !value ? <em>{languages[0].name}</em> : languages.find(language => language.codename === value).name}
+    >
+      {languages.map((language, index) => <MenuItem key={`languageSelectorItem${index}`} value={language.codename}>{language.name}</MenuItem>)}
+    </MuiSelect>
+  );
+}
+
+export default LanguageSelector;
diff --git a/src/components/SideDrawer.js b/src/components/SideDrawer.js
index b3cd220..4665c59 100644
--- a/src/components/SideDrawer.js
+++ b/src/components/SideDrawer.js
@@ -2,6 +2,7 @@ import { Drawer, IconButton, List, ListItem } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useState } from "react";
 import { Action, Icon } from ".";
+import LanguageSelector from './LanguageSelector';
 
 const useStyles = makeStyles({
   list: {
@@ -42,6 +43,9 @@ const SideDrawer = (props) => {
             <Action action={navigationItem} />
           </ListItem>
         ))}
+        <ListItem key="language" >
+          <LanguageSelector/>
+        </ListItem>
       </List>
     </div>
   );
diff --git a/src/components/index.js b/src/components/index.js
index 163ddfc..9100e6e 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -11,6 +11,7 @@ import FormField from "./FormField";
 import RichText from "./RichText";
 import CtaButtons from "./CtaButtons";
 import GraphQLLoader from "./GraphQLLoader";
+import LanguageSelector from "./LanguageSelector";
 
 export {
   CtaButtons,
@@ -25,5 +26,23 @@ export {
   RichText,
   SideDrawer,
   Icon,
-  GraphQLLoader
-};
\ No newline at end of file
+  GraphQLLoader,
+  LanguageSelector
+};
+
+export default {
+  CtaButtons,
+  FormField,
+  UnknownComponent,
+  Layout,
+  Header,
+  Link,
+  Filter,
+  Action,
+  Image,
+  RichText,
+  SideDrawer,
+  Icon,
+  GraphQLLoader,
+  LanguageSelector
+};
diff --git a/src/index.js b/src/index.js
index efaf82b..af0544c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,47 +1,59 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactGA from 'react-ga';
-import App from './App';
-import { HelmetProvider } from 'react-helmet-async';
-import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
-import { name, version } from "../package.json";
-
-const PREVIEW_API_KEY = process.env.REACT_APP_KONTENT_PREVIEW_API_KEY;
-const GQL_ENDPOINT = process.env.REACT_APP_KONTENT_GRAPHQL_ENDPOINT ||
-    (PREVIEW_API_KEY ? "https://preview-graphql.kontent.ai" : "https://graphql.kontent.ai");
-const PROJECT_ID = process.env.REACT_APP_KONTENT_PROJECT_ID || "ad25961e-f934-01dc-e1fa-f4dd41b84df2";
-const GA_TOKEN = process.env.REACT_APP_GA_ANALYTICS_TOKEN;
-
-const authorizationHeader = PREVIEW_API_KEY ? {
-    'Authorization': `Bearer ${PREVIEW_API_KEY}`
-} : {};
-
-const client = new ApolloClient({
-    cache: new InMemoryCache({
-        // https://github.com/apollographql/apollo-client/issues/7648#issuecomment-968969367
-        // possibleTypes: {
-        //     _Item: [
-        //         "LandingPage",
-        //         "ListingPage",
-        //         "SimplePage"
-        //     ]
-        // }
-    }),
-    uri: `${GQL_ENDPOINT}/${PROJECT_ID}`,
-    headers: Object.assign({
-        'X-KC-SOURCE': `${name};${version}`
-    }, authorizationHeader)
-});
-
-GA_TOKEN && ReactGA.initialize(GA_TOKEN);
-
-ReactDOM.render(
-    <React.StrictMode>
-        <HelmetProvider>
-            <ApolloProvider client={client}>
-                <App initializeAnalytics={!!GA_TOKEN}/>
-            </ApolloProvider>
-        </HelmetProvider>
-    </React.StrictMode>,
-    document.getElementById('root')
-);
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactGA from 'react-ga';
+import App from './App';
+import { createBrowserHistory } from 'history';
+import { HelmetProvider } from 'react-helmet-async';
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { name, version } from "../package.json";
+
+const PREVIEW_API_KEY = process.env.REACT_APP_KONTENT_PREVIEW_API_KEY;
+const GQL_ENDPOINT = process.env.REACT_APP_KONTENT_GRAPHQL_ENDPOINT ||
+    (PREVIEW_API_KEY ? "https://preview-graphql.kontent.ai" : "https://graphql.kontent.ai");
+const PROJECT_ID = process.env.REACT_APP_KONTENT_PROJECT_ID || "ad25961e-f934-01dc-e1fa-f4dd41b84df2";
+const GA_TOKEN = process.env.REACT_APP_GA_ANALYTICS_TOKEN;
+
+const authorizationHeader = PREVIEW_API_KEY ? {
+    'Authorization': `Bearer ${PREVIEW_API_KEY}`
+} : {};
+
+const client = new ApolloClient({
+    cache: new InMemoryCache({
+        // https://github.com/apollographql/apollo-client/issues/7648#issuecomment-968969367
+        // possibleTypes: {
+        //     _Item: [
+        //         "LandingPage",
+        //         "ListingPage",
+        //         "SimplePage"
+        //     ]
+        // }
+    }),
+    uri: `${GQL_ENDPOINT}/${PROJECT_ID}`,
+    headers: Object.assign({
+        'X-KC-SOURCE': `${name};${version}`
+    }, authorizationHeader)
+});
+
+const history = createBrowserHistory();
+
+if (GA_TOKEN) {
+    ReactGA.initialize(GA_TOKEN);
+    history.listen(location => {
+        ReactGA.set({ page: location.pathname });
+        ReactGA.pageview(location.pathname);
+    });
+}
+
+ReactDOM.render(
+    <React.StrictMode>
+        <HelmetProvider>
+            <ApolloProvider client={client}>
+                <Router history={history} basename={process.env.PUBLIC_URL}>
+                    <App />
+                </Router>
+            </ApolloProvider>
+        </HelmetProvider>
+    </React.StrictMode>,
+    document.getElementById('root')
+);
diff --git a/src/utils/queryString.js b/src/utils/queryString.js
index 3204770..41faa9e 100644
--- a/src/utils/queryString.js
+++ b/src/utils/queryString.js
@@ -1,59 +1,64 @@
-const pageSize = 3;
-const authorQueryStringKey = "author";
-const personaQueryStringKey = "persona";
-const pageQueryStringKey = "page";
-
-const setPageAndReturnQueryString = (page, urlParams) => {
-  urlParams.set(pageQueryStringKey, page > 0 ? page : 1);
-
-  return `?${urlParams}`;
-}
-
-export const getListingPaginationAndFilter = (location) => {
-  const urlParams = new URLSearchParams(location.search);
-  const authorQuery = urlParams.get(authorQueryStringKey);
-  const personaQuery = urlParams.get(personaQueryStringKey);
-  const pageQuery = urlParams.get(pageQueryStringKey);
-  let pageNumber = parseInt(pageQuery);
-
-  pageNumber = pageNumber > 0 ? pageNumber : 1;
-
-  return {
-    author: authorQuery,
-    persona: personaQuery,
-    nextPage: `${location.pathname}${setPageAndReturnQueryString(pageNumber + 1, urlParams)}`,
-    prevPage: `${location.pathname}${setPageAndReturnQueryString(pageNumber - 1, urlParams)}`,
-    limit: pageSize,
-    offset: (pageNumber - 1) * pageSize
-  }
-};
-
-export const setAuthor = (location, author) => setParameter(location, authorQueryStringKey, author);
-
-export const getAuthor = (location) => getParameter(location, authorQueryStringKey);
-
-export const setPersona = (location, persona) => setParameter(location, personaQueryStringKey, persona);
-
-export const getPersona = (location) => getParameter(location, personaQueryStringKey);
-
-const getParameter = (location, key) => {
-  const urlParams = new URLSearchParams(location.search);
-
-  return urlParams.get(key) || "";
-};
-
-const setParameter = (location, key, value) => {
-  const urlParams = new URLSearchParams(location.search);
-
-  if(!value){
-    urlParams.delete(key);
-  }
-  else{
-    urlParams.set(key, value);
-  }
-
-  return {
-    pathname: location.pathname,
-    search: `?${urlParams}`
-  };
-}
+const pageSize = 3;
+const authorQueryStringKey = "author";
+const languageQueryStringKey = "lang";
+const personaQueryStringKey = "persona";
+const pageQueryStringKey = "page";
+
+const setPageAndReturnQueryString = (page, urlParams) => {
+  urlParams.set(pageQueryStringKey, page > 0 ? page : 1);
+
+  return `?${urlParams}`;
+}
+
+export const getListingPaginationAndFilter = (location) => {
+  const urlParams = new URLSearchParams(location.search);
+  const authorQuery = urlParams.get(authorQueryStringKey);
+  const personaQuery = urlParams.get(personaQueryStringKey);
+  const pageQuery = urlParams.get(pageQueryStringKey);
+  let pageNumber = parseInt(pageQuery);
+
+  pageNumber = pageNumber > 0 ? pageNumber : 1;
+
+  return {
+    author: authorQuery,
+    persona: personaQuery,
+    nextPage: `${location.pathname}${setPageAndReturnQueryString(pageNumber + 1, urlParams)}`,
+    prevPage: `${location.pathname}${setPageAndReturnQueryString(pageNumber - 1, urlParams)}`,
+    limit: pageSize,
+    offset: (pageNumber - 1) * pageSize
+  }
+};
+
+export const setAuthor = (location, author) => setParameter(location, authorQueryStringKey, author);
+
+export const getAuthor = (location) => getParameter(location, authorQueryStringKey);
+
+export const setLanguage = (location, language) => setParameter(location, languageQueryStringKey, language);
+
+export const getLanguage = (location) => getParameter(location, languageQueryStringKey);
+
+export const setPersona = (location, persona) => setParameter(location, personaQueryStringKey, persona);
+
+export const getPersona = (location) => getParameter(location, personaQueryStringKey);
+
+const getParameter = (location, key) => {
+  const urlParams = new URLSearchParams(location.search);
+
+  return urlParams.get(key) || "";
+};
+
+const setParameter = (location, key, value) => {
+  const urlParams = new URLSearchParams(location.search);
+
+  if(!value){
+    urlParams.delete(key);
+  }
+  else{
+    urlParams.set(key, value);
+  }
+
+  return {
+    pathname: location.pathname,
+    search: `?${urlParams}`
+  };
+}