diff --git a/.env.schema b/.env.schema
index 7e4fe201..c0d2ae65 100644
--- a/.env.schema
+++ b/.env.schema
@@ -7,4 +7,5 @@ NEXT_PUBLIC_EGO_CLIENT_ID=dms-ui-dev
 ######### Arranger
 NEXT_PUBLIC_ARRANGER_PROJECT_ID=
 NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD=
-NEXT_PUBLIC_ARRANGER_INDEX=
\ No newline at end of file
+NEXT_PUBLIC_ARRANGER_INDEX=
+NEXT_PUBLIC_ARRANGER_API_URL=
\ No newline at end of file
diff --git a/components/Footer.tsx b/components/Footer.tsx
index f9a8eeef..49360de7 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -22,6 +22,8 @@ const Footer = () => {
         justify-content: flex-end;
         align-items: center;
         padding-right: 18px;
+        ${theme.shadow.default};
+        z-index: 10;
       `}
     >
       <StyledLink
diff --git a/components/PageLayout.tsx b/components/PageLayout.tsx
index f82847db..d9130366 100644
--- a/components/PageLayout.tsx
+++ b/components/PageLayout.tsx
@@ -3,6 +3,7 @@ import { css } from '@emotion/core';
 
 import defaultTheme from './theme';
 import NavBar from './NavBar';
+import Footer from './Footer';
 
 const PageLayout = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -18,6 +19,7 @@ const PageLayout = ({ children }: { children: React.ReactNode }) => {
     >
       <NavBar />
       {children}
+      <Footer />
     </div>
   );
 };
diff --git a/components/pages/login/index.tsx b/components/pages/login/index.tsx
index 914c7b9b..a9fc399c 100644
--- a/components/pages/login/index.tsx
+++ b/components/pages/login/index.tsx
@@ -97,7 +97,6 @@ const LoginPage = () => {
           flex: 1;
           flex-direction: row;
           position: relative;
-          min-width: 1440px;
         `}
       >
         <div
diff --git a/components/pages/repository/PageContent.tsx b/components/pages/repository/PageContent.tsx
index 7c1a2ca8..f77fda92 100644
--- a/components/pages/repository/PageContent.tsx
+++ b/components/pages/repository/PageContent.tsx
@@ -37,8 +37,8 @@ const PageContent = (props: PageContentProps) => {
             min-width: 250px;
             max-width: 270px;
             background-color: ${theme.colors.white};
-            ${theme.shadow.default}
             z-index: 1;
+            ${theme.shadow.right};
           `}
         >
           <Facets {...props} />
@@ -60,7 +60,6 @@ const PageContent = (props: PageContentProps) => {
             <QueryBar {...props} />
             <RepoTable {...props} />
           </div>
-          <Footer />
         </div>
       </div>
     </div>
diff --git a/components/pages/repository/index.tsx b/components/pages/repository/index.tsx
index cd9b0209..625f8eac 100644
--- a/components/pages/repository/index.tsx
+++ b/components/pages/repository/index.tsx
@@ -6,6 +6,7 @@ import PageLayout from '../../PageLayout';
 import { RepoFiltersType } from './sqonTypes';
 import { getConfig } from '../../../global/config';
 import { css } from '@emotion/core';
+import createArrangerFetcher from '../../utils/arrangerFetcher';
 
 const Arranger = dynamic(
   () => import('@arranger/components/dist/Arranger').then((comp) => comp.Arranger),
@@ -33,9 +34,10 @@ export interface PageContentProps {
   fetchData?: (projectId: string) => Promise<any>;
 }
 
+const arrangerFetcher = createArrangerFetcher({});
+
 const RepositoryPage = () => {
   const { ARRANGER_PROJECT_ID, ARRANGER_GRAPHQL_FIELD, ARRANGER_INDEX } = getConfig();
-
   return (
     <PageLayout>
       {/* TODO: arranger config error handling tbd */}
@@ -56,7 +58,7 @@ const RepositoryPage = () => {
               `
             }
           >
-            Arranger is missing configuration values. Please check your ".env.local" file.
+            Arranger is missing configuration values. Please check your ".env" file.
             <ul>
               <li>Project ID: {ARRANGER_PROJECT_ID || 'missing'}</li>
               <li>GraphQL Field: {ARRANGER_GRAPHQL_FIELD || 'missing'}</li>
@@ -66,6 +68,7 @@ const RepositoryPage = () => {
         </div>
       ) : (
         <Arranger
+          api={arrangerFetcher}
           projectId={ARRANGER_PROJECT_ID}
           graphqlField={ARRANGER_GRAPHQL_FIELD}
           index={ARRANGER_INDEX}
diff --git a/components/theme/shadow.ts b/components/theme/shadow.ts
index 8f5cf82b..4fac1aad 100644
--- a/components/theme/shadow.ts
+++ b/components/theme/shadow.ts
@@ -2,6 +2,11 @@ const defaultShadow = `
   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.08);
 `;
 
+const rightShadow = `
+  box-shadow: 3px 0 5px -2px rgba(0, 0, 0, 0.1), 3px 0 5px -2px rgba(0, 0, 0, 0.08);
+`;
+
 export default {
   default: defaultShadow,
+  right: rightShadow,
 };
diff --git a/components/utils/ajax.ts b/components/utils/ajax.ts
new file mode 100644
index 00000000..1d79a2c5
--- /dev/null
+++ b/components/utils/ajax.ts
@@ -0,0 +1,25 @@
+/***************
+Arranger does not work with fetch lib right out of the box, so using this implementation from
+https://github.com/IHCC-cohorts/ihcc-ui/blob/develop/src/pages/cohortRepo/arrangerFetcher/ajax.ts
+for now
+ ***************/
+
+import axios from 'axios';
+
+const ajax = axios.create();
+
+ajax.interceptors.request.use(
+  (config) => {
+    // set Authorization headers on a per request basis
+    // setting headers on axios get/put/post or common seems to be shared accross all axios instances
+    config.headers = {
+      ...config.headers,
+    };
+    return config;
+  },
+  (err) => {
+    return Promise.reject(err);
+  },
+);
+
+export default ajax;
diff --git a/components/utils/arrangerFetcher.ts b/components/utils/arrangerFetcher.ts
new file mode 100644
index 00000000..2e5792a5
--- /dev/null
+++ b/components/utils/arrangerFetcher.ts
@@ -0,0 +1,27 @@
+import urlJoin from 'url-join';
+import { getConfig } from '../../global/config';
+import ajax from './ajax';
+
+const createArrangerFetcher = ({
+  onError = (err: any) => Promise.reject(err),
+  defaultHeaders = {},
+} = {}) => ({ method = 'post', body = {}, headers = {} }) => {
+  const { ARRANGER_API, ARRANGER_PROJECT_ID } = getConfig();
+  const uri = urlJoin(ARRANGER_API, ARRANGER_PROJECT_ID, '/graphql');
+  return ajax
+    .post(uri, body, {
+      headers: {
+        'Content-Type': 'application/json',
+        ...(defaultHeaders || {}),
+        ...headers,
+      },
+    })
+    .then((response: { data: any }) => {
+      return response.data;
+    })
+    .catch((err: { response: any }) => {
+      return onError(err);
+    });
+};
+
+export default createArrangerFetcher;
diff --git a/global/config.ts b/global/config.ts
index 8090cff3..01cc1f3e 100644
--- a/global/config.ts
+++ b/global/config.ts
@@ -1,18 +1,23 @@
+import getNextConfig from 'next/config';
+
 export const getConfig = () => {
+  const publicConfig: { [k: string]: string } = getNextConfig()?.publicRuntimeConfig || {};
+
   return {
-    EGO_API_ROOT: process.env.NEXT_PUBLIC_EGO_API_ROOT || 'http://localhost:8088',
-    EGO_CLIENT_ID: process.env.NEXT_PUBLIC_EGO_CLIENT_ID || '',
+    EGO_API_ROOT: publicConfig.EGO_API_ROOT || 'http://localhost:8088',
+    EGO_CLIENT_ID: publicConfig.EGO_CLIENT_ID || '',
     EGO_PUBLIC_KEY:
-      process.env.EGO_PUBLIC_KEY ||
+      publicConfig.EGO_PUBLIC_KEY ||
       `-----BEGIN PUBLIC KEY-----\r\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0lOqMuPLCVusc6szklNXQL1FHhSkEgR7An+8BllBqTsRHM4bRYosseGFCbYPn8r8FsWuMDtxp0CwTyMQR2PCbJ740DdpbE1KC6jAfZxqcBete7gP0tooJtbvnA6X4vNpG4ukhtUoN9DzNOO0eqMU0Rgyy5HjERdYEWkwTNB30i9I+nHFOSj4MGLBSxNlnuo3keeomCRgtimCx+L/K3HNo0QHTG1J7RzLVAchfQT0lu3pUJ8kB+UM6/6NG+fVyysJyRZ9gadsr4gvHHckw8oUBp2tHvqBEkEdY+rt1Mf5jppt7JUV7HAPLB/qR5jhALY2FX/8MN+lPLmb/nLQQichVQIDAQAB\r\n-----END PUBLIC KEY-----`,
-    EGO_GOOGLE_ID: process.env.NEXT_PUBLIC_EGO_GOOGLE_ID || 'google',
-    EGO_LINKEDIN_ID: process.env.NEXT_PUBLIC_EGO_LINKEDIN_ID || 'linkedin',
-    EGO_FACEBOOK_ID: process.env.NEXT_PUBLIC_EGO_FACEBOOK_ID || 'facebook',
-    EGO_GITHUB_ID: process.env.NEXT_PUBLIC_EGO_GITHUB_ID || 'github',
-    EGO_ORCID_ID: process.env.NEXT_PUBLIC_EGO_ORCID_ID || 'orcid',
-    ARRANGER_PROJECT_ID: process.env.NEXT_PUBLIC_ARRANGER_PROJECT_ID || '',
-    ARRANGER_GRAPHQL_FIELD: process.env.NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD || '',
-    ARRANGER_INDEX: process.env.NEXT_PUBLIC_ARRANGER_INDEX || '',
+    EGO_GOOGLE_ID: publicConfig.EGO_GOOGLE_ID || 'google',
+    EGO_LINKEDIN_ID: publicConfig.EGO_LINKEDIN_ID || 'linkedin',
+    EGO_FACEBOOK_ID: publicConfig.EGO_FACEBOOK_ID || 'facebook',
+    EGO_GITHUB_ID: publicConfig.EGO_GITHUB_ID || 'github',
+    EGO_ORCID_ID: publicConfig.EGO_ORCID_ID || 'orcid',
+    ARRANGER_PROJECT_ID: publicConfig.ARRANGER_PROJECT_ID || '',
+    ARRANGER_GRAPHQL_FIELD: publicConfig.ARRANGER_GRAPHQL_FIELD || '',
+    ARRANGER_INDEX: publicConfig.ARRANGER_INDEX || '',
+    ARRANGER_API: publicConfig.ARRANGER_API || 'http://localhost:5050',
   } as {
     EGO_API_ROOT: string;
     EGO_CLIENT_ID: string;
@@ -25,5 +30,6 @@ export const getConfig = () => {
     ARRANGER_PROJECT_ID: string;
     ARRANGER_GRAPHQL_FIELD: string;
     ARRANGER_INDEX: string;
+    ARRANGER_API: string;
   };
 };
diff --git a/next.config.js b/next.config.js
index e6453e97..ad6f391a 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,2 +1,12 @@
-const withCSS = require("@zeit/next-css");
-module.exports = withCSS({});
+const withCSS = require('@zeit/next-css');
+module.exports = withCSS({
+  publicRuntimeConfig: {
+    EGO_API_ROOT: process.env.NEXT_PUBLIC_EGO_API_ROOT,
+    EGO_CLIENT_ID: process.env.NEXT_PUBLIC_EGO_CLIENT_ID,
+    EGO_PUBLIC_KEY: process.env.EGO_PUBLIC_KEY,
+    ARRANGER_PROJECT_ID: process.env.NEXT_PUBLIC_ARRANGER_PROJECT_ID,
+    ARRANGER_GRAPHQL_FIELD: process.env.NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD,
+    ARRANGER_INDEX: process.env.NEXT_PUBLIC_ARRANGER_INDEX,
+    ARRANGER_API: process.env.NEXT_PUBLIC_ARRANGER_API_URL,
+  },
+});
diff --git a/package-lock.json b/package-lock.json
index 7d691df5..91a95bf6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2912,6 +2912,14 @@
       "integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
+      "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -5361,6 +5369,11 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "follow-redirects": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
diff --git a/package.json b/package.json
index 2a9ff3db..a1138a2f 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
     "@zeit/next-css": "^1.0.1",
+    "axios": "^0.20.0",
     "emotion-theming": "^10.0.27",
     "next": "9.5.3",
     "query-string": "^6.13.2",