diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index 2b2b97e..a295b3f 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -15,21 +15,21 @@ import { ImageQuality } from "./Img";
 import Popup from "./Popup";
 import { useEffect, useState } from "react";
 import Select from "./Select";
+import { AppStaticProps } from "queries/getAppStaticProps";
 
-type AppLayoutProps = {
+interface AppLayoutProps extends AppStaticProps {
   subPanel?: React.ReactNode;
   subPanelIcon?: string;
   contentPanel?: React.ReactNode;
-  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
   title?: string;
   navTitle: string;
   thumbnail?: StrapiImage;
   description?: string;
   extra?: React.ReactNode;
-};
+}
 
 export default function AppLayout(props: AppLayoutProps): JSX.Element {
-  const langui = props.langui;
+  const { langui, currencies, languages, subPanel, contentPanel } = props;
   const router = useRouter();
   const isMobile = useMediaMobile();
   const isCoarse = useMediaCoarse();
@@ -42,7 +42,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
       if (SwipeEventData.velocity < sensibilitySwipe) return;
       if (appLayout.mainPanelOpen) {
         appLayout.setMainPanelOpen(false);
-      } else if (props.subPanel && props.contentPanel) {
+      } else if (subPanel && contentPanel) {
         appLayout.setSubPanelOpen(true);
       }
     },
@@ -63,13 +63,13 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
     appLayout.mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]"
   }`;
   let contentPanelClass = "";
-  if (props.subPanel) {
+  if (subPanel) {
     contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
       appLayout.mainPanelReduced
         ? "desktop:left-[26rem]"
         : "desktop:left-[40rem]"
     }`;
-  } else if (props.contentPanel) {
+  } else if (contentPanel) {
     contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
       appLayout.mainPanelReduced
         ? "desktop:left-[6rem]"
@@ -77,7 +77,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
     }`;
   }
 
-  const turnSubIntoContent = props.subPanel && !props.contentPanel;
+  const turnSubIntoContent = subPanel && !contentPanel;
 
   const titlePrefix = "Accord’s Library";
   const metaImage: OgImage = props.thumbnail
@@ -100,7 +100,9 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
     }%`;
   }, [appLayout.fontSize]);
 
-  const currencyOptions = ["EUR", "USD", "CAD", "JPY"];
+  const currencyOptions = currencies.map((currency) => {
+    return currency.attributes.code;
+  });
   const [currencySelect, setCurrencySelect] = useState<number>(-1);
 
   useEffect(() => {
@@ -161,8 +163,8 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
         <div
           className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll bg-light texture-paper-dots ${contentPanelClass}`}
         >
-          {props.contentPanel ? (
-            props.contentPanel
+          {contentPanel ? (
+            contentPanel
           ) : (
             <div className="grid place-content-center h-full">
               <div className="text-dark border-dark border-2 border-dotted rounded-2xl p-8 grid grid-flow-col place-items-center gap-9 opacity-40">
@@ -197,7 +199,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
         </div>
 
         {/* Sub panel */}
-        {props.subPanel ? (
+        {subPanel ? (
           <div
             className={`${subPanelClass} border-r-[1px] mobile:bottom-20 mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
           ${
@@ -208,7 +210,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
               : ""
           }`}
           >
-            {props.subPanel}
+            {subPanel}
           </div>
         ) : (
           ""
@@ -255,7 +257,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
               appLayout.setMainPanelOpen(false);
             }}
           >
-            {props.subPanel && !turnSubIntoContent
+            {subPanel && !turnSubIntoContent
               ? appLayout.subPanelOpen
                 ? "close"
                 : props.subPanelIcon
@@ -271,15 +273,15 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
         >
           <h2 className="text-2xl">{langui.select_language}</h2>
           <div className="flex flex-wrap flex-row gap-2 mobile:flex-col">
-            {router.locales?.sort().map((locale) => (
+            {languages.map((language) => (
               <Button
-                key={locale}
-                active={locale === router.locale}
+                key={language.id}
+                active={language.attributes.code === router.locale}
                 href={router.asPath}
-                locale={locale}
+                locale={language.attributes.code}
                 onClick={() => appLayout.setLanguagePanelOpen(false)}
               >
-                {prettyLanguage(locale)}
+                {language.attributes.localized_name}
               </Button>
             ))}
           </div>
diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql
index 07d03cc..a671a29 100644
--- a/src/graphql/operation.graphql
+++ b/src/graphql/operation.graphql
@@ -1100,3 +1100,16 @@ query getCurrencies {
     }
   }
 }
+
+query getLanguages {
+  languages {
+    data {
+      id
+      attributes {
+        name
+        code
+        localized_name
+      }
+    }
+  }
+}
diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts
index 65d7804..ea1f9ae 100644
--- a/src/graphql/operations-types.ts
+++ b/src/graphql/operations-types.ts
@@ -1465,3 +1465,22 @@ export type GetCurrenciesQuery = {
     }>;
   };
 };
+
+export type GetLanguagesQueryVariables = Exact<{ [key: string]: never }>;
+
+export type GetLanguagesQuery = {
+  __typename: "Query";
+  languages: {
+    __typename: "LanguageEntityResponseCollection";
+    data: Array<{
+      __typename: "LanguageEntity";
+      id: string;
+      attributes: {
+        __typename: "Language";
+        name: string;
+        code: string;
+        localized_name: string;
+      };
+    }>;
+  };
+};
diff --git a/src/graphql/operations.ts b/src/graphql/operations.ts
index e8a78f3..28541db 100644
--- a/src/graphql/operations.ts
+++ b/src/graphql/operations.ts
@@ -15,6 +15,8 @@ import {
   GetCurrenciesQueryVariables,
   GetErasQuery,
   GetErasQueryVariables,
+  GetLanguagesQuery,
+  GetLanguagesQueryVariables,
   GetLibraryItemQuery,
   GetLibraryItemQueryVariables,
   GetLibraryItemsPreviewQuery,
@@ -132,3 +134,10 @@ export async function getCurrencies(
   const query = getQueryFromOperations("getCurrencies");
   return await graphQL(query, JSON.stringify(variables));
 }
+
+export async function getLanguages(
+  variables: GetLanguagesQueryVariables
+): Promise<GetLanguagesQuery> {
+  const query = getQueryFromOperations("getLanguages");
+  return await graphQL(query, JSON.stringify(variables));
+}
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 5e312fd..8357e42 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,19 +1,15 @@
-import Link from "next/link";
 import ContentPanel from "components/Panels/ContentPanel";
-import { getWebsiteInterface } from "graphql/operations";
 import { GetStaticProps } from "next";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import AppLayout from "components/AppLayout";
 import ReturnButton, {
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type FourOhFourProps = {
-  langui: GetWebsiteInterfaceQuery;
-};
+interface FourOhFourProps extends AppStaticProps {}
 
 export default function FourOhFour(props: FourOhFourProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const contentPanel = (
     <ContentPanel>
       <h1>404 - {langui.page_not_found}</h1>
@@ -25,21 +21,14 @@ export default function FourOhFour(props: FourOhFourProps): JSX.Element {
       />
     </ContentPanel>
   );
-  return (
-    <AppLayout navTitle="404" langui={langui} contentPanel={contentPanel} />
-  );
+  return <AppLayout navTitle="404" contentPanel={contentPanel} {...props} />;
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: FourOhFourProps = {
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
+  const props: FourOhFourProps = {
+    ...(await getAppStaticProps(context)),
+  };
+  return {
+    props: props,
+  };
 };
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 506d91b..a8304bc 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -16,6 +16,7 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head>
+
           <link
             rel="apple-touch-icon"
             sizes="180x180"
diff --git a/src/pages/about-us/index.tsx b/src/pages/about-us/index.tsx
index 8e69680..93d8cd2 100644
--- a/src/pages/about-us/index.tsx
+++ b/src/pages/about-us/index.tsx
@@ -1,16 +1,13 @@
 import SubPanel from "components/Panels/SubPanel";
 import PanelHeader from "components/PanelComponents/PanelHeader";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-import { getWebsiteInterface } from "graphql/operations";
 import AppLayout from "components/AppLayout";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type AboutUsProps = {
-  langui: GetWebsiteInterfaceQuery;
-};
+interface AboutUsProps extends AppStaticProps {}
 
 export default function AboutUs(props: AboutUsProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -21,24 +18,15 @@ export default function AboutUs(props: AboutUsProps): JSX.Element {
     </SubPanel>
   );
   return (
-    <AppLayout
-      navTitle={langui.about_us}
-      langui={langui}
-      subPanel={subPanel}
-    />
+    <AppLayout navTitle={langui.about_us} subPanel={subPanel} {...props} />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: AboutUsProps = {
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
+  const props: AboutUsProps = {
+    ...(await getAppStaticProps(context)),
+  };
+  return {
+    props: props,
+  };
 };
diff --git a/src/pages/archives/index.tsx b/src/pages/archives/index.tsx
index 88fc0a2..3b3a262 100644
--- a/src/pages/archives/index.tsx
+++ b/src/pages/archives/index.tsx
@@ -1,16 +1,13 @@
 import SubPanel from "components/Panels/SubPanel";
 import PanelHeader from "components/PanelComponents/PanelHeader";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-import { getWebsiteInterface } from "graphql/operations";
 import AppLayout from "components/AppLayout";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type ArchivesProps = {
-  langui: GetWebsiteInterfaceQuery;
-};
+interface ArchivesProps extends AppStaticProps {}
 
 export default function Archives(props: ArchivesProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -21,24 +18,15 @@ export default function Archives(props: ArchivesProps): JSX.Element {
     </SubPanel>
   );
   return (
-    <AppLayout
-      navTitle={langui.archives}
-      langui={langui}
-      subPanel={subPanel}
-    />
+    <AppLayout navTitle={langui.archives} subPanel={subPanel} {...props} />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: ArchivesProps = {
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
+  const props: ArchivesProps = {
+    ...(await getAppStaticProps(context)),
+  };
+  return {
+    props: props,
+  };
 };
diff --git a/src/pages/chronicles/index.tsx b/src/pages/chronicles/index.tsx
index 2ef7522..53eaa78 100644
--- a/src/pages/chronicles/index.tsx
+++ b/src/pages/chronicles/index.tsx
@@ -1,16 +1,13 @@
 import SubPanel from "components/Panels/SubPanel";
 import PanelHeader from "components/PanelComponents/PanelHeader";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-import { getWebsiteInterface } from "graphql/operations";
 import AppLayout from "components/AppLayout";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type ChroniclesProps = {
-  langui: GetWebsiteInterfaceQuery;
-};
+interface ChroniclesProps extends AppStaticProps {}
 
 export default function Chronicles(props: ChroniclesProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -21,24 +18,15 @@ export default function Chronicles(props: ChroniclesProps): JSX.Element {
     </SubPanel>
   );
   return (
-    <AppLayout
-      navTitle={langui.chronicles}
-      langui={langui}
-      subPanel={subPanel}
-    />
+    <AppLayout navTitle={langui.chronicles} subPanel={subPanel} {...props} />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: ChroniclesProps = {
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
+  const props: ChroniclesProps = {
+    ...(await getAppStaticProps(context)),
+  };
+  return {
+    props: props,
+  };
 };
diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx
index fcf141d..1c9726d 100644
--- a/src/pages/contents/[slug]/index.tsx
+++ b/src/pages/contents/[slug]/index.tsx
@@ -1,13 +1,6 @@
 import { GetStaticPaths, GetStaticProps } from "next";
-import {
-  getContent,
-  getContentsSlugs,
-  getWebsiteInterface,
-} from "graphql/operations";
-import {
-  GetContentQuery,
-  GetWebsiteInterfaceQuery,
-} from "graphql/operations-types";
+import { getContent, getContentsSlugs } from "graphql/operations";
+import { GetContentQuery } from "graphql/operations-types";
 import ContentPanel from "components/Panels/ContentPanel";
 import Button from "components/Button";
 import HorizontalLine from "components/HorizontalLine";
@@ -18,15 +11,14 @@ import ReturnButton, {
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
 import { prettyinlineTitle, prettySlug } from "queries/helpers";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type ContentIndexProps = {
-  content: GetContentQuery;
-  langui: GetWebsiteInterfaceQuery;
-};
+interface ContentIndexProps extends AppStaticProps {
+  content: GetContentQuery["contents"]["data"][number]["attributes"];
+}
 
 export default function ContentIndex(props: ContentIndexProps): JSX.Element {
-  const content = props.content.contents.data[0].attributes;
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { content, langui } = props;
   const subPanel = (
     <SubPanel>
       <ReturnButton
@@ -92,7 +84,6 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
           : prettySlug(content.slug)
       }
       thumbnail={content.thumbnail.data?.attributes}
-      langui={langui}
       contentPanel={contentPanel}
       subPanel={subPanel}
       description={`${langui.type}: ${
@@ -111,40 +102,28 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
          
         ${content.titles.length > 0 ? content.titles[0].description : undefined}
         `}
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.params) {
-    if (context.params.slug && context.locale) {
-      if (context.params.slug instanceof Array)
-        context.params.slug = context.params.slug.join("");
-
-      const props: ContentIndexProps = {
-        content: await getContent({
-          slug: context.params.slug,
-          language_code: context.locale,
-        }),
-        langui: await getWebsiteInterface({
-          language_code: context.locale,
-        }),
-      };
-      return {
-        props: props,
-      };
-    }
-  }
-  return { props: {} };
+  const props: ContentIndexProps = {
+    ...(await getAppStaticProps(context)),
+    content: (
+      await getContent({
+        slug: context.params?.slug?.toString() || "",
+        language_code: context.locale || "en",
+      })
+    ).contents.data[0].attributes,
+  };
+  return {
+    props: props,
+  };
 };
 
 export const getStaticPaths: GetStaticPaths = async (context) => {
-  type Path = {
-    params: {
-      slug: string;
-    };
-    locale: string;
-  };
+  type Path = { params: { slug: string }; locale: string };
 
   const data = await getContentsSlugs({});
   const paths: Path[] = [];
diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx
index 6b30fc0..8dc58cb 100644
--- a/src/pages/contents/[slug]/read.tsx
+++ b/src/pages/contents/[slug]/read.tsx
@@ -1,13 +1,8 @@
 import { GetStaticPaths, GetStaticProps } from "next";
-import {
-  getContentsSlugs,
-  getContentText,
-  getWebsiteInterface,
-} from "graphql/operations";
+import { getContentsSlugs, getContentText } from "graphql/operations";
 import {
   Enum_Componentsetstextset_Status,
   GetContentTextQuery,
-  GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
 import ContentPanel from "components/Panels/ContentPanel";
 import HorizontalLine from "components/HorizontalLine";
@@ -30,16 +25,16 @@ import { useRouter } from "next/router";
 import Chip from "components/Chip";
 import ReactTooltip from "react-tooltip";
 import RecorderChip from "components/RecorderChip";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-interface ContentReadProps {
-  content: GetContentTextQuery;
-  langui: GetWebsiteInterfaceQuery;
+interface ContentReadProps extends AppStaticProps {
+  content: GetContentTextQuery["contents"]["data"][number]["attributes"];
+  contentId: GetContentTextQuery["contents"]["data"][number]["id"];
 }
 
 export default function ContentRead(props: ContentReadProps): JSX.Element {
   useTesting(props);
-  const content = props.content.contents.data[0].attributes;
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui, content } = props;
   const router = useRouter();
 
   const subPanel = (
@@ -212,7 +207,6 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
           : prettySlug(content.slug)
       }
       thumbnail={content.thumbnail.data?.attributes}
-      langui={langui}
       contentPanel={contentPanel}
       subPanel={subPanel}
       extra={extra}
@@ -232,31 +226,26 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
          
         ${content.titles.length > 0 ? content.titles[0].description : undefined}
         `}
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.params) {
-    if (context.params.slug && context.locale) {
-      if (context.params.slug instanceof Array)
-        context.params.slug = context.params.slug.join("");
-
-      const props: ContentReadProps = {
-        content: await getContentText({
-          slug: context.params.slug,
-          language_code: context.locale,
-        }),
-        langui: await getWebsiteInterface({
-          language_code: context.locale,
-        }),
-      };
-      return {
-        props: props,
-      };
-    }
-  }
-  return { props: {} };
+  const content = (
+    await getContentText({
+      slug: context.params?.slug?.toString() || "",
+      language_code: context.locale || "en",
+    })
+  ).contents.data[0];
+  const props: ContentReadProps = {
+    ...(await getAppStaticProps(context)),
+    content: content.attributes,
+    contentId: content.id,
+  };
+  return {
+    props: props,
+  };
 };
 
 export const getStaticPaths: GetStaticPaths = async (context) => {
@@ -282,11 +271,10 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
 
 export function useTesting(props: ContentReadProps) {
   const router = useRouter();
-  const content = props.content.contents.data[0].attributes;
+  const { content, contentId } = props;
 
   const contentURL =
-    "/admin/content-manager/collectionType/api::content.content/" +
-    props.content.contents.data[0].id;
+    "/admin/content-manager/collectionType/api::content.content/" + contentId;
 
   if (router.locale === "en") {
     if (content.categories.data.length === 0) {
diff --git a/src/pages/contents/index.tsx b/src/pages/contents/index.tsx
index 0c9eed5..d899665 100644
--- a/src/pages/contents/index.tsx
+++ b/src/pages/contents/index.tsx
@@ -3,25 +3,56 @@ import SubPanel from "components/Panels/SubPanel";
 import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import {
-  GetContentsQuery,
-  GetWebsiteInterfaceQuery,
-} from "graphql/operations-types";
-import { getContents, getWebsiteInterface } from "graphql/operations";
+import { GetContentsQuery } from "graphql/operations-types";
+import { getContents } from "graphql/operations";
 import PanelHeader from "components/PanelComponents/PanelHeader";
 import AppLayout from "components/AppLayout";
 import LibraryContentPreview from "components/Library/LibraryContentPreview";
 import { prettyinlineTitle } from "queries/helpers";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type LibraryProps = {
-  contents: GetContentsQuery;
-  langui: GetWebsiteInterfaceQuery;
-};
+interface LibraryProps extends AppStaticProps {
+  contents: GetContentsQuery["contents"]["data"];
+}
 
 export default function Library(props: LibraryProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
+  const subPanel = (
+    <SubPanel>
+      <PanelHeader
+        icon="workspaces"
+        title={langui.contents}
+        description={langui.contents_description}
+      />
+    </SubPanel>
+  );
+  const contentPanel = (
+    <ContentPanel width={ContentPanelWidthSizes.large}>
+      <div className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
+        {props.contents.map((item) => (
+          <LibraryContentPreview key={item.id} item={item.attributes} />
+        ))}
+      </div>
+    </ContentPanel>
+  );
+  return (
+    <AppLayout
+      navTitle={langui.contents}
+      subPanel={subPanel}
+      contentPanel={contentPanel}
+      {...props}
+    />
+  );
+}
 
-  props.contents.contents.data.sort((a, b) => {
+export const getStaticProps: GetStaticProps = async (context) => {
+  const contents = (
+    await getContents({
+      language_code: context.locale || "en",
+    })
+  ).contents.data;
+
+  contents.sort((a, b) => {
     const titleA =
       a.attributes.titles.length > 0
         ? prettyinlineTitle(
@@ -41,48 +72,11 @@ export default function Library(props: LibraryProps): JSX.Element {
     return titleA.localeCompare(titleB);
   });
 
-  const subPanel = (
-    <SubPanel>
-      <PanelHeader
-        icon="workspaces"
-        title="Contents"
-        description="Laboriosam vitae velit quis. Non et dolor reiciendis officia earum et molestias excepturi. Cupiditate officiis quis qui reprehenderit. Ut neque eos ipsa corrupti autem mollitia inventore. Exercitationem iste magni vel harum."
-      />
-    </SubPanel>
-  );
-  const contentPanel = (
-    <ContentPanel width={ContentPanelWidthSizes.large}>
-      <div className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
-        {props.contents.contents.data.map((item) => (
-          <LibraryContentPreview key={item.id} item={item.attributes} />
-        ))}
-      </div>
-    </ContentPanel>
-  );
-  return (
-    <AppLayout
-      navTitle="Contents"
-      langui={langui}
-      subPanel={subPanel}
-      contentPanel={contentPanel}
-    />
-  );
-}
-
-export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: LibraryProps = {
-      contents: await getContents({
-        language_code: context.locale,
-      }),
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  } else {
-    return { props: {} };
-  }
+  const props: LibraryProps = {
+    ...(await getAppStaticProps(context)),
+    contents: contents,
+  };
+  return {
+    props: props,
+  };
 };
diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx
index a7f5444..825ed90 100644
--- a/src/pages/editor.tsx
+++ b/src/pages/editor.tsx
@@ -1,20 +1,17 @@
 import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import { getWebsiteInterface } from "graphql/operations";
 import { GetStaticProps } from "next";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import AppLayout from "components/AppLayout";
 import { useCallback, useState } from "react";
 import Markdawn from "components/Markdown/Markdawn";
 import Script from "next/script";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type EditorProps = {
-  langui: GetWebsiteInterfaceQuery;
-};
+interface EditorProps extends AppStaticProps {}
 
 export default function Editor(props: EditorProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
 
   const handleInput = useCallback((e) => {
     setMarkdown(e.target.value);
@@ -45,12 +42,14 @@ export default function Editor(props: EditorProps): JSX.Element {
             onInput={handleInput}
             className="bg-mid rounded-xl p-8 w-full font-monospace"
             value={markdown}
+            title="Input textarea"
           />
 
           <h2 className="mt-4">Convert text to markdown</h2>
           <textarea
             readOnly
             id="htmlMdTextArea"
+            title="Ouput textarea"
             onPaste={(event) => {
               const TurndownService = require("turndown").default;
               const turndownService = new TurndownService({
@@ -86,22 +85,17 @@ export default function Editor(props: EditorProps): JSX.Element {
   return (
     <AppLayout
       navTitle="Markdawn Editor"
-      langui={langui}
       contentPanel={contentPanel}
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: EditorProps = {
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
+  const props: EditorProps = {
+    ...(await getAppStaticProps(context)),
+  };
+  return {
+    props: props,
+  };
 };
diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx
index f9608f9..f29ab70 100644
--- a/src/pages/gallery/index.tsx
+++ b/src/pages/gallery/index.tsx
@@ -1,14 +1,11 @@
 import AppLayout from "components/AppLayout";
-import { getWebsiteInterface } from "graphql/operations";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type GalleryProps = {
-  langui: GetWebsiteInterfaceQuery;
-};
+interface GalleryProps extends AppStaticProps {}
 
 export default function Gallery(props: GalleryProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const contentPanel = (
     <iframe
       className="w-full h-screen"
@@ -19,22 +16,17 @@ export default function Gallery(props: GalleryProps): JSX.Element {
   return (
     <AppLayout
       navTitle={langui.gallery}
-      langui={langui}
       contentPanel={contentPanel}
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: GalleryProps = {
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
+  const props: GalleryProps = {
+    ...(await getAppStaticProps(context)),
+  };
+  return {
+    props: props,
+  };
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 73d909b..374325c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,16 +1,11 @@
 import AppLayout from "components/AppLayout";
 import ContentPanel from "components/Panels/ContentPanel";
-import SVG from "components/SVG";
-import { getWebsiteInterface } from "graphql/operations";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-type HomeProps = {
-  langui: GetWebsiteInterfaceQuery;
-};
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
+
+interface HomeProps extends AppStaticProps {}
 
 export default function Home(props: HomeProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
-
   const contentPanel = (
     <ContentPanel autoformat>
       <div className="grid place-items-center place-content-center w-full gap-5 text-center">
@@ -140,26 +135,14 @@ export default function Home(props: HomeProps): JSX.Element {
     </ContentPanel>
   );
 
-  return (
-    <AppLayout
-      navTitle={"Home"}
-      langui={langui}
-      contentPanel={contentPanel}
-    />
-  );
+  return <AppLayout navTitle={"Home"} contentPanel={contentPanel} {...props} />;
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: HomeProps = {
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  } else {
-    return { props: {} };
-  }
+  const props: HomeProps = {
+    ...(await getAppStaticProps(context)),
+  };
+  return {
+    props: props,
+  };
 };
diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx
index d78bbce..955490c 100644
--- a/src/pages/library/[slug].tsx
+++ b/src/pages/library/[slug].tsx
@@ -2,18 +2,11 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import { GetStaticPaths, GetStaticProps } from "next";
-import {
-  getCurrencies,
-  getLibraryItem,
-  getLibraryItemsSlugs,
-  getWebsiteInterface,
-} from "graphql/operations";
+import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations";
 import {
   Enum_Componentmetadatabooks_Binding_Type,
   Enum_Componentmetadatabooks_Page_Order,
-  GetCurrenciesQuery,
   GetLibraryItemQuery,
-  GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
 import {
   convertMmToInch,
@@ -40,18 +33,16 @@ import Img, { ImageQuality } from "components/Img";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { useRouter } from "next/router";
 import ContentTOCLine from "components/Library/ContentTOCLine";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-interface LibrarySlugProps {
-  libraryItem: GetLibraryItemQuery;
-  langui: GetWebsiteInterfaceQuery;
-  currencies: GetCurrenciesQuery;
+interface LibrarySlugProps extends AppStaticProps {
+  item: GetLibraryItemQuery["libraryItems"]["data"][number]["attributes"];
+  itemId: GetLibraryItemQuery["libraryItems"]["data"][number]["id"];
 }
 
 export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
   useTesting(props);
-  const item = props.libraryItem.libraryItems.data[0].attributes;
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
-  const currencies = props.currencies.currencies.data;
+  const { item, langui, currencies } = props;
   const appLayout = useAppLayout();
 
   const isVariantSet =
@@ -396,7 +387,6 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
     <AppLayout
       navTitle={langui.library}
       title={prettyinlineTitle("", item.title, item.subtitle)}
-      langui={langui}
       contentPanel={contentPanel}
       subPanel={subPanel}
       thumbnail={item.thumbnail.data?.attributes}
@@ -405,32 +395,26 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
           ? item.descriptions[0].description
           : undefined
       }
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.params) {
-    if (context.params.slug && context.locale) {
-      if (context.params.slug instanceof Array)
-        context.params.slug = context.params.slug.join("");
-
-      const props: LibrarySlugProps = {
-        libraryItem: await getLibraryItem({
-          slug: context.params.slug,
-          language_code: context.locale,
-        }),
-        langui: await getWebsiteInterface({
-          language_code: context.locale,
-        }),
-        currencies: await getCurrencies({}),
-      };
-      return {
-        props: props,
-      };
-    }
-  }
-  return { props: {} };
+  const item = (
+    await getLibraryItem({
+      slug: context.params?.slug?.toString() || "",
+      language_code: context.locale || "en",
+    })
+  ).libraryItems.data[0];
+  const props: LibrarySlugProps = {
+    ...(await getAppStaticProps(context)),
+    item: item.attributes,
+    itemId: item.id,
+  };
+  return {
+    props: props,
+  };
 };
 
 export const getStaticPaths: GetStaticPaths = async (context) => {
@@ -455,17 +439,17 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
 };
 
 function useTesting(props: LibrarySlugProps) {
-  const libraryItem = props.libraryItem.libraryItems.data[0].attributes;
+  const { item, itemId } = props;
   const router = useRouter();
 
   const libraryItemURL =
     "/admin/content-manager/collectionType/api::library-item.library-item/" +
-    props.libraryItem.libraryItems.data[0].id;
+    itemId;
 
-  sortContent(libraryItem.contents);
+  sortContent(item.contents);
 
   if (router.locale === "en") {
-    if (!libraryItem.thumbnail.data) {
+    if (!item.thumbnail.data) {
       prettyTestError(
         router,
         "Missing thumbnail",
@@ -473,7 +457,7 @@ function useTesting(props: LibrarySlugProps) {
         libraryItemURL
       );
     }
-    if (libraryItem.metadata.length === 0) {
+    if (item.metadata.length === 0) {
       prettyTestError(
         router,
         "Missing metadata",
@@ -482,14 +466,12 @@ function useTesting(props: LibrarySlugProps) {
       );
     } else {
       if (
-        libraryItem.metadata[0].__typename === "ComponentMetadataGroup" &&
-        (libraryItem.metadata[0].subtype.data.attributes.slug ===
-          "relation-set" ||
-          libraryItem.metadata[0].subtype.data.attributes.slug ===
-            "variant-set")
+        item.metadata[0].__typename === "ComponentMetadataGroup" &&
+        (item.metadata[0].subtype.data.attributes.slug === "relation-set" ||
+          item.metadata[0].subtype.data.attributes.slug === "variant-set")
       ) {
         // This is a group type item
-        if (libraryItem.price) {
+        if (item.price) {
           prettyTestError(
             router,
             "Group-type items shouldn't have price",
@@ -497,7 +479,7 @@ function useTesting(props: LibrarySlugProps) {
             libraryItemURL
           );
         }
-        if (libraryItem.size) {
+        if (item.size) {
           prettyTestError(
             router,
             "Group-type items shouldn't have size",
@@ -505,7 +487,7 @@ function useTesting(props: LibrarySlugProps) {
             libraryItemURL
           );
         }
-        if (libraryItem.release_date) {
+        if (item.release_date) {
           prettyTestError(
             router,
             "Group-type items shouldn't have release_date",
@@ -513,7 +495,7 @@ function useTesting(props: LibrarySlugProps) {
             libraryItemURL
           );
         }
-        if (libraryItem.contents.data.length > 0) {
+        if (item.contents.data.length > 0) {
           prettyTestError(
             router,
             "Group-type items shouldn't have contents",
@@ -521,7 +503,7 @@ function useTesting(props: LibrarySlugProps) {
             libraryItemURL
           );
         }
-        if (libraryItem.subitems.data.length === 0) {
+        if (item.subitems.data.length === 0) {
           prettyTestError(
             router,
             "Group-type items should have subitems",
@@ -532,8 +514,8 @@ function useTesting(props: LibrarySlugProps) {
       } else {
         // This is a normal item
 
-        if (libraryItem.metadata[0].__typename === "ComponentMetadataGroup") {
-          if (libraryItem.subitems.data.length === 0) {
+        if (item.metadata[0].__typename === "ComponentMetadataGroup") {
+          if (item.subitems.data.length === 0) {
             prettyTestError(
               router,
               "Group-type item should have subitems",
@@ -543,7 +525,7 @@ function useTesting(props: LibrarySlugProps) {
           }
         }
 
-        if (!libraryItem.price) {
+        if (!item.price) {
           prettyTestWarning(
             router,
             "Missing price",
@@ -551,7 +533,7 @@ function useTesting(props: LibrarySlugProps) {
             libraryItemURL
           );
         } else {
-          if (!libraryItem.price.amount) {
+          if (!item.price.amount) {
             prettyTestError(
               router,
               "Missing amount",
@@ -559,7 +541,7 @@ function useTesting(props: LibrarySlugProps) {
               libraryItemURL
             );
           }
-          if (!libraryItem.price.currency) {
+          if (!item.price.currency) {
             prettyTestError(
               router,
               "Missing currency",
@@ -569,8 +551,8 @@ function useTesting(props: LibrarySlugProps) {
           }
         }
 
-        if (!libraryItem.digital) {
-          if (!libraryItem.size) {
+        if (!item.digital) {
+          if (!item.size) {
             prettyTestWarning(
               router,
               "Missing size",
@@ -578,7 +560,7 @@ function useTesting(props: LibrarySlugProps) {
               libraryItemURL
             );
           } else {
-            if (!libraryItem.size.width) {
+            if (!item.size.width) {
               prettyTestWarning(
                 router,
                 "Missing width",
@@ -586,7 +568,7 @@ function useTesting(props: LibrarySlugProps) {
                 libraryItemURL
               );
             }
-            if (!libraryItem.size.height) {
+            if (!item.size.height) {
               prettyTestWarning(
                 router,
                 "Missing height",
@@ -594,7 +576,7 @@ function useTesting(props: LibrarySlugProps) {
                 libraryItemURL
               );
             }
-            if (!libraryItem.size.thickness) {
+            if (!item.size.thickness) {
               prettyTestWarning(
                 router,
                 "Missing thickness",
@@ -605,7 +587,7 @@ function useTesting(props: LibrarySlugProps) {
           }
         }
 
-        if (!libraryItem.release_date) {
+        if (!item.release_date) {
           prettyTestWarning(
             router,
             "Missing release_date",
@@ -613,7 +595,7 @@ function useTesting(props: LibrarySlugProps) {
             libraryItemURL
           );
         } else {
-          if (!libraryItem.release_date.year) {
+          if (!item.release_date.year) {
             prettyTestError(
               router,
               "Missing year",
@@ -621,7 +603,7 @@ function useTesting(props: LibrarySlugProps) {
               libraryItemURL
             );
           }
-          if (!libraryItem.release_date.month) {
+          if (!item.release_date.month) {
             prettyTestError(
               router,
               "Missing month",
@@ -629,7 +611,7 @@ function useTesting(props: LibrarySlugProps) {
               libraryItemURL
             );
           }
-          if (!libraryItem.release_date.day) {
+          if (!item.release_date.day) {
             prettyTestError(
               router,
               "Missing day",
@@ -639,7 +621,7 @@ function useTesting(props: LibrarySlugProps) {
           }
         }
 
-        if (libraryItem.contents.data.length === 0) {
+        if (item.contents.data.length === 0) {
           prettyTestWarning(
             router,
             "Missing contents",
@@ -648,7 +630,7 @@ function useTesting(props: LibrarySlugProps) {
           );
         } else {
           let currentRangePage = 0;
-          libraryItem.contents.data.map((content) => {
+          item.contents.data.map((content) => {
             const contentURL =
               "/admin/content-manager/collectionType/api::content.content/" +
               content.id;
@@ -709,26 +691,26 @@ function useTesting(props: LibrarySlugProps) {
             }
           });
 
-          if (libraryItem.metadata[0].__typename === "ComponentMetadataBooks") {
-            if (currentRangePage < libraryItem.metadata[0].page_count) {
+          if (item.metadata[0].__typename === "ComponentMetadataBooks") {
+            if (currentRangePage < item.metadata[0].page_count) {
               prettyTestError(
                 router,
                 `Missing pages ${currentRangePage + 1} to ${
-                  libraryItem.metadata[0].page_count
+                  item.metadata[0].page_count
                 }`,
                 ["libraryItem", "content"],
                 libraryItemURL
               );
-            } else if (currentRangePage > libraryItem.metadata[0].page_count) {
+            } else if (currentRangePage > item.metadata[0].page_count) {
               prettyTestError(
                 router,
-                `Page overflow, content references pages up to ${currentRangePage} when the highest expected was ${libraryItem.metadata[0].page_count}`,
+                `Page overflow, content references pages up to ${currentRangePage} when the highest expected was ${item.metadata[0].page_count}`,
                 ["libraryItem", "content"],
                 libraryItemURL
               );
             }
 
-            if (libraryItem.metadata[0].languages.data.length === 0) {
+            if (item.metadata[0].languages.data.length === 0) {
               prettyTestWarning(
                 router,
                 "Missing language",
@@ -737,7 +719,7 @@ function useTesting(props: LibrarySlugProps) {
               );
             }
 
-            if (!libraryItem.metadata[0].page_count) {
+            if (!item.metadata[0].page_count) {
               prettyTestWarning(
                 router,
                 "Missing page_count",
@@ -750,7 +732,7 @@ function useTesting(props: LibrarySlugProps) {
       }
     }
 
-    if (!libraryItem.root_item && libraryItem.subitem_of.data.length === 0) {
+    if (!item.root_item && item.subitem_of.data.length === 0) {
       prettyTestError(
         router,
         "This item is inaccessible (not root item and not subitem of another item)",
@@ -759,7 +741,7 @@ function useTesting(props: LibrarySlugProps) {
       );
     }
 
-    if (libraryItem.gallery.data.length === 0) {
+    if (item.gallery.data.length === 0) {
       prettyTestWarning(
         router,
         "Missing gallery",
@@ -769,7 +751,7 @@ function useTesting(props: LibrarySlugProps) {
     }
   }
 
-  if (libraryItem.descriptions.length === 0) {
+  if (item.descriptions.length === 0) {
     prettyTestWarning(
       router,
       "Missing description",
diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx
index c2e4345..4dec60f 100644
--- a/src/pages/library/index.tsx
+++ b/src/pages/library/index.tsx
@@ -4,15 +4,10 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import {
-  GetCurrenciesQuery,
   GetLibraryItemsPreviewQuery,
   GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
-import {
-  getCurrencies,
-  getLibraryItemsPreview,
-  getWebsiteInterface,
-} from "graphql/operations";
+import { getLibraryItemsPreview } from "graphql/operations";
 import PanelHeader from "components/PanelComponents/PanelHeader";
 import AppLayout from "components/AppLayout";
 import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
@@ -20,12 +15,11 @@ import Select from "components/Select";
 import { useEffect, useState } from "react";
 import { prettyDate, prettyinlineTitle } from "queries/helpers";
 import Switch from "components/Switch";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type LibraryProps = {
-  libraryItems: GetLibraryItemsPreviewQuery;
-  langui: GetWebsiteInterfaceQuery;
-  currencies: GetCurrenciesQuery;
-};
+interface LibraryProps extends AppStaticProps {
+  items: GetLibraryItemsPreviewQuery["libraryItems"]["data"];
+}
 
 type GroupLibraryItems = Map<
   string,
@@ -33,7 +27,7 @@ type GroupLibraryItems = Map<
 >;
 
 export default function Library(props: LibraryProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui, items } = props;
 
   const [showSubitems, setShowSubitems] = useState<boolean>(false);
   const [showPrimaryItems, setShowPrimaryItems] = useState<boolean>(true);
@@ -41,20 +35,13 @@ export default function Library(props: LibraryProps): JSX.Element {
   const [sortingMethod, setSortingMethod] = useState<number>(0);
   const [groupingMethod, setGroupingMethod] = useState<number>(-1);
 
-  const [filteredItems, setFilteredItems] = useState<
-    LibraryProps["libraryItems"]["libraryItems"]["data"]
-  >(
-    filterItems(
-      showSubitems,
-      showPrimaryItems,
-      showSecondaryItems,
-      props.libraryItems.libraryItems.data
-    )
+  const [filteredItems, setFilteredItems] = useState<LibraryProps["items"]>(
+    filterItems(showSubitems, showPrimaryItems, showSecondaryItems, items)
   );
 
-  const [sortedItems, setSortedItem] = useState<
-    LibraryProps["libraryItems"]["libraryItems"]["data"]
-  >(sortBy(groupingMethod, filteredItems));
+  const [sortedItems, setSortedItem] = useState<LibraryProps["items"]>(
+    sortBy(groupingMethod, filteredItems)
+  );
 
   const [groups, setGroups] = useState<GroupLibraryItems>(
     getGroups(langui, groupingMethod, sortedItems)
@@ -62,19 +49,9 @@ export default function Library(props: LibraryProps): JSX.Element {
 
   useEffect(() => {
     setFilteredItems(
-      filterItems(
-        showSubitems,
-        showPrimaryItems,
-        showSecondaryItems,
-        props.libraryItems.libraryItems.data
-      )
+      filterItems(showSubitems, showPrimaryItems, showSecondaryItems, items)
     );
-  }, [
-    showSubitems,
-    props.libraryItems.libraryItems.data,
-    showPrimaryItems,
-    showSecondaryItems,
-  ]);
+  }, [showSubitems, items, showPrimaryItems, showSecondaryItems]);
 
   useEffect(() => {
     setSortedItem(sortBy(sortingMethod, filteredItems));
@@ -144,7 +121,7 @@ export default function Library(props: LibraryProps): JSX.Element {
                   <LibraryItemsPreview
                     key={item.id}
                     item={item.attributes}
-                    currencies={props.currencies.currencies.data}
+                    currencies={props.currencies}
                   />
                 ))}
               </div>
@@ -157,36 +134,31 @@ export default function Library(props: LibraryProps): JSX.Element {
   return (
     <AppLayout
       navTitle={langui.library}
-      langui={langui}
       subPanel={subPanel}
       contentPanel={contentPanel}
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: LibraryProps = {
-      libraryItems: await getLibraryItemsPreview({
-        language_code: context.locale,
-      }),
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-      currencies: await getCurrencies({}),
-    };
-    return {
-      props: props,
-    };
-  } else {
-    return { props: {} };
-  }
+  const props: LibraryProps = {
+    ...(await getAppStaticProps(context)),
+    items: (
+      await getLibraryItemsPreview({
+        language_code: context.locale || "en",
+      })
+    ).libraryItems.data,
+  };
+  return {
+    props: props,
+  };
 };
 
 function getGroups(
   langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"],
   groupByType: number,
-  items: LibraryProps["libraryItems"]["libraryItems"]["data"]
+  items: LibraryProps["items"]
 ): GroupLibraryItems {
   switch (groupByType) {
     case 0:
@@ -284,8 +256,8 @@ function filterItems(
   showSubitems: boolean,
   showPrimaryItems: boolean,
   showSecondaryItems: boolean,
-  items: LibraryProps["libraryItems"]["libraryItems"]["data"]
-): LibraryProps["libraryItems"]["libraryItems"]["data"] {
+  items: LibraryProps["items"]
+): LibraryProps["items"] {
   return [...items].filter((item) => {
     if (!showSubitems && !item.attributes.root_item) return false;
     if (
@@ -306,8 +278,8 @@ function filterItems(
 
 function sortBy(
   orderByType: number,
-  items: LibraryProps["libraryItems"]["libraryItems"]["data"]
-): LibraryProps["libraryItems"]["libraryItems"]["data"] {
+  items: LibraryProps["items"]
+): LibraryProps["items"] {
   switch (orderByType) {
     case 0:
       return [...items].sort((a, b) => {
diff --git a/src/pages/merch/index.tsx b/src/pages/merch/index.tsx
index 393688a..cedd031 100644
--- a/src/pages/merch/index.tsx
+++ b/src/pages/merch/index.tsx
@@ -1,16 +1,12 @@
 import SubPanel from "components/Panels/SubPanel";
 import PanelHeader from "components/PanelComponents/PanelHeader";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-import { getWebsiteInterface } from "graphql/operations";
 import AppLayout from "components/AppLayout";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type MerchProps = {
-  langui: GetWebsiteInterfaceQuery;
-};
-
+interface MerchProps extends AppStaticProps {}
 export default function Merch(props: MerchProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -21,25 +17,14 @@ export default function Merch(props: MerchProps): JSX.Element {
     </SubPanel>
   );
 
-  return (
-    <AppLayout
-      navTitle={langui.merch}
-      langui={langui}
-      subPanel={subPanel}
-    />
-  );
+  return <AppLayout navTitle={langui.merch} subPanel={subPanel} {...props} />;
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: MerchProps = {
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
+  const props: MerchProps = {
+    ...(await getAppStaticProps(context)),
+  };
+  return {
+    props: props,
+  };
 };
diff --git a/src/pages/news/index.tsx b/src/pages/news/index.tsx
index 4777519..9f26104 100644
--- a/src/pages/news/index.tsx
+++ b/src/pages/news/index.tsx
@@ -1,16 +1,13 @@
 import SubPanel from "components/Panels/SubPanel";
 import PanelHeader from "components/PanelComponents/PanelHeader";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-import { getWebsiteInterface } from "graphql/operations";
 import AppLayout from "components/AppLayout";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type NewsProps = {
-  langui: GetWebsiteInterfaceQuery;
-};
+interface NewsProps extends AppStaticProps {}
 
 export default function News(props: NewsProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -21,25 +18,14 @@ export default function News(props: NewsProps): JSX.Element {
     </SubPanel>
   );
 
-  return (
-    <AppLayout
-      navTitle={langui.news}
-      langui={langui}
-      subPanel={subPanel}
-    />
-  );
+  return <AppLayout navTitle={langui.news} subPanel={subPanel} {...props} />;
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: NewsProps = {
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
+  const props: NewsProps = {
+    ...(await getAppStaticProps(context)),
+  };
+  return {
+    props: props,
+  };
 };
diff --git a/src/pages/wiki/chronology.tsx b/src/pages/wiki/chronology.tsx
index a02d3ef..1a58ac2 100644
--- a/src/pages/wiki/chronology.tsx
+++ b/src/pages/wiki/chronology.tsx
@@ -5,18 +5,9 @@ import ChronologyYearComponent from "components/Chronology/ChronologyYearCompone
 import {
   GetChronologyItemsQuery,
   GetErasQuery,
-  GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
-import {
-  getEras,
-  getChronologyItems,
-  getWebsiteInterface,
-} from "graphql/operations";
+import { getEras, getChronologyItems } from "graphql/operations";
 import NavOption from "components/PanelComponents/NavOption";
-import ReturnButton, {
-  ReturnButtonType,
-} from "components/PanelComponents/ReturnButton";
-import HorizontalLine from "components/HorizontalLine";
 import AppLayout from "components/AppLayout";
 import {
   prettySlug,
@@ -26,34 +17,32 @@ import {
 import InsetBox from "components/InsetBox";
 import { useRouter } from "next/router";
 import ReactTooltip from "react-tooltip";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-interface DataChronologyProps {
-  chronologyItems: GetChronologyItemsQuery;
-  chronologyEras: GetErasQuery;
-  langui: GetWebsiteInterfaceQuery;
+interface DataChronologyProps extends AppStaticProps {
+  chronologyItems: GetChronologyItemsQuery["chronologyItems"]["data"];
+  chronologyEras: GetErasQuery["chronologyEras"]["data"];
 }
 
 export default function DataChronology(
   props: DataChronologyProps
 ): JSX.Element {
   useTesting(props);
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
-  const chronologyItems = props.chronologyItems.chronologyItems;
-  const chronologyEras = props.chronologyEras.chronologyEras;
+  const { chronologyItems, chronologyEras } = props;
 
   // Group by year the Chronology items
   let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][][] =
     [];
 
-  chronologyEras.data.map(() => {
+  chronologyEras.map(() => {
     chronologyItemYearGroups.push([]);
   });
 
   let currentChronologyEraIndex = 0;
-  chronologyItems.data.map((item) => {
+  chronologyItems.map((item) => {
     if (
       item.attributes.year >
-      chronologyEras.data[currentChronologyEraIndex].attributes.ending_year
+      chronologyEras[currentChronologyEraIndex].attributes.ending_year
     ) {
       currentChronologyEraIndex++;
     }
@@ -74,7 +63,7 @@ export default function DataChronology(
 
   const subPanel = (
     <SubPanel>
-      {props.chronologyEras.chronologyEras.data.map((era) => (
+      {chronologyEras.map((era) => (
         <NavOption
           key={era.id}
           url={"#" + era.attributes.slug}
@@ -97,17 +86,17 @@ export default function DataChronology(
       {chronologyItemYearGroups.map((era, eraIndex) => (
         <>
           <InsetBox
-            id={chronologyEras.data[eraIndex].attributes.slug}
+            id={chronologyEras[eraIndex].attributes.slug}
             className="grid text-center my-8 gap-4"
           >
             <h2 className="text-2xl">
-              {chronologyEras.data[eraIndex].attributes.title.length > 0
-                ? chronologyEras.data[eraIndex].attributes.title[0].title
-                : prettySlug(chronologyEras.data[eraIndex].attributes.slug)}
+              {chronologyEras[eraIndex].attributes.title.length > 0
+                ? chronologyEras[eraIndex].attributes.title[0].title
+                : prettySlug(chronologyEras[eraIndex].attributes.slug)}
             </h2>
             <p className="whitespace-pre-line ">
-              {chronologyEras.data[eraIndex].attributes.title.length > 0
-                ? chronologyEras.data[eraIndex].attributes.title[0].description
+              {chronologyEras[eraIndex].attributes.title.length > 0
+                ? chronologyEras[eraIndex].attributes.title[0].description
                 : ""}
             </p>
           </InsetBox>
@@ -136,37 +125,36 @@ export default function DataChronology(
   return (
     <AppLayout
       navTitle="Chronology"
-      langui={langui}
       contentPanel={contentPanel}
       subPanel={subPanel}
+      {...props}
     />
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: DataChronologyProps = {
-      chronologyItems: await getChronologyItems({
-        language_code: context.locale,
-      }),
-      chronologyEras: await getEras({ language_code: context.locale }),
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
+  const props: DataChronologyProps = {
+    ...(await getAppStaticProps(context)),
+    chronologyItems: (
+      await getChronologyItems({
+        language_code: context.locale || "en",
+      })
+    ).chronologyItems.data,
+    chronologyEras: (await getEras({ language_code: context.locale || "en" }))
+      .chronologyEras.data,
+  };
+  return {
+    props: props,
+  };
 };
 
-function useTesting({ chronologyItems, chronologyEras }: DataChronologyProps) {
+function useTesting(props: DataChronologyProps) {
   const router = useRouter();
-  chronologyEras.chronologyEras.data.map((era) => {
+  const { chronologyItems, chronologyEras } = props;
+  chronologyEras.map((era) => {
     const chronologyErasURL =
       "/admin/content-manager/collectionType/api::chronology-era.chronology-era/" +
-      chronologyItems.chronologyItems.data[0].id;
+      chronologyItems[0].id;
 
     if (era.attributes.title.length === 0) {
       prettyTestError(
@@ -200,10 +188,10 @@ function useTesting({ chronologyItems, chronologyEras }: DataChronologyProps) {
     }
   });
 
-  chronologyItems.chronologyItems.data.map((item) => {
+  chronologyItems.map((item) => {
     const chronologyItemsURL =
       "/admin/content-manager/collectionType/api::chronology-item.chronology-item/" +
-      chronologyItems.chronologyItems.data[0].id;
+      chronologyItems[0].id;
 
     const date = `${item.attributes.year}/${item.attributes.month}/${item.attributes.day}`;
 
diff --git a/src/pages/wiki/index.tsx b/src/pages/wiki/index.tsx
index 102448a..1b0b1f1 100644
--- a/src/pages/wiki/index.tsx
+++ b/src/pages/wiki/index.tsx
@@ -1,17 +1,13 @@
 import SubPanel from "components/Panels/SubPanel";
 import PanelHeader from "components/PanelComponents/PanelHeader";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
-import { getWebsiteInterface } from "graphql/operations";
-import ContentPanel from "components/Panels/ContentPanel";
 import AppLayout from "components/AppLayout";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-type WikiProps = {
-  langui: GetWebsiteInterfaceQuery;
-};
+interface WikiProps extends AppStaticProps {}
 
 export default function Hubs(props: WikiProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
+  const { langui } = props;
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -21,28 +17,15 @@ export default function Hubs(props: WikiProps): JSX.Element {
       />
     </SubPanel>
   );
-  const contentPanel = <ContentPanel>Hello</ContentPanel>;
 
-  return (
-    <AppLayout
-      navTitle={langui.wiki}
-      langui={langui}
-      contentPanel={contentPanel}
-      subPanel={subPanel}
-    />
-  );
+  return <AppLayout navTitle={langui.wiki} subPanel={subPanel} {...props} />;
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: WikiProps = {
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  }
-  return { props: {} };
+  const props: WikiProps = {
+    ...(await getAppStaticProps(context)),
+  };
+  return {
+    props: props,
+  };
 };
diff --git a/src/queries/getAppStaticProps.ts b/src/queries/getAppStaticProps.ts
new file mode 100644
index 0000000..57e675b
--- /dev/null
+++ b/src/queries/getAppStaticProps.ts
@@ -0,0 +1,44 @@
+import {
+  getCurrencies,
+  getLanguages,
+  getWebsiteInterface,
+} from "graphql/operations";
+import {
+  GetCurrenciesQuery,
+  GetLanguagesQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
+import { GetStaticPropsContext, PreviewData } from "next";
+import { ParsedUrlQuery } from "querystring";
+
+export interface AppStaticProps {
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
+  currencies: GetCurrenciesQuery["currencies"]["data"];
+  languages: GetLanguagesQuery["languages"]["data"];
+}
+
+export async function getAppStaticProps(
+  context: GetStaticPropsContext<ParsedUrlQuery, PreviewData>
+): Promise<AppStaticProps> {
+  const languages = (await getLanguages({})).languages.data;
+  languages.sort((a, b) => {
+    return a.attributes.localized_name.localeCompare(
+      b.attributes.localized_name
+    );
+  });
+
+  const currencies = (await getCurrencies({})).currencies.data;
+  currencies.sort((a, b) => {
+    return a.attributes.code.localeCompare(b.attributes.code);
+  });
+
+  return {
+    langui: (
+      await getWebsiteInterface({
+        language_code: context.locale || "en",
+      })
+    ).websiteInterfaces.data[0].attributes,
+    currencies: currencies,
+    languages: languages,
+  };
+}