diff --git a/.circleci/config.yml b/.circleci/config.yml
index b6bf1d3..315db2f 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -21,7 +21,7 @@ defaults_Dependencies: &defaults_Dependencies |
   apk --no-cache add ca-certificates
   apk --no-cache add curl
   apk --no-cache add openssh-client
-  apk add --no-cache -t build-dependencies make gcc g++ python libtool autoconf automake jq
+  apk add --no-cache -t build-dependencies python3 make gcc g++ libtool autoconf automake jq
   npm config set unsafe-perm true
   npm install -g node-gyp
 
diff --git a/.env b/.env
deleted file mode 100644
index 3ac6376..0000000
--- a/.env
+++ /dev/null
@@ -1,4 +0,0 @@
-DEV_PORT=3012
-PUBLIC_PATH=http://localhost:3012/
-REACT_APP_API_BASE_URL=http://localhost:3008/
-REACT_APP_MOCK_API=false
diff --git a/.env.template b/.env.template
new file mode 100644
index 0000000..ec56aa1
--- /dev/null
+++ b/.env.template
@@ -0,0 +1,13 @@
+# Specify `webpack-dev-server` port.
+# You shouldn't need to change this unless there is port collision on
+# you local machine.
+DEV_PORT=3012
+
+# The mocks have diverged from the actual API and been removed.
+# Leave this as `false` or check `src/utils/api` and add mocks.
+REACT_APP_MOCK_API=false
+
+# When locally testing leave these endpoints as is.
+# Webpack uses proxies found in `webpack.config.js` to proxy
+# the request to your locally hosted or port-forwarded `reporting-hub-bop-api-svc` service.
+REACT_APP_API_BASE_URL=/role-assignment
diff --git a/.gitignore b/.gitignore
index 603940c..8a67d15 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ dev/*
 styleguide
 
 ## Env files
+.env
 .env.local
 
 ## modules
diff --git a/Dockerfile b/Dockerfile
index 9ae598b..c17f5aa 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,9 +1,9 @@
-FROM node:lts-alpine as builder
+FROM node:14.18.1-alpine as builder
 WORKDIR /opt/reporting-hub-bop-role-ui
 ENV PATH /opt/reporting-hub-bop-role-ui/node_modules/.bin:$PATH
 
 # Install build dependencies
-RUN apk add --no-cache -t build-dependencies git make gcc g++ python libtool autoconf automake \
+RUN apk add --no-cache -t build-dependencies python3 git make gcc g++  libtool autoconf automake \
     && cd $(npm root -g)/npm \
     && npm config set unsafe-perm true \
     && npm install -g node-gyp
@@ -76,5 +76,4 @@ USER appuser
 EXPOSE 8081
 ENTRYPOINT ["/usr/share/nginx/html/entrypoint.sh"]
 CMD ["sh", "/usr/share/nginx/start.sh"]
-# TODO: Need to add 8080 to image-scan whitelist
-#       Investigate Feed data unavailable, cannot perform CVE scan for distro: alpine:3.14.2
+# TODO: Need to add 8081 to image-scan whitelist
diff --git a/docs/docker.md b/docs/docker.md
index b37abf4..3b199cb 100644
--- a/docs/docker.md
+++ b/docs/docker.md
@@ -38,7 +38,6 @@ docker build \
   --build-arg REACT_APP_NAME=`npm run name --silent` \
   --build-arg REACT_APP_VERSION=`npm run version --silent` \
   --build-arg REACT_APP_COMMIT=`git rev-parse HEAD`\
-  --build-arg PUBLIC_PATH=https://localhost:8081/\
   -t reporting-hub-bop-role-ui \
   .
 ```
@@ -51,7 +50,7 @@ The `config.json` is produced at runtime, it uses environment variables passed t
 
 ```bash
 docker run --rm \
-  -p 8081:8080 \
+  -p 8081:8081 \
   -e API_BASE_URL="https://your-api-base-url" \
   -e MOCK_API="true" \
    reporting-hub-bop-role-ui
diff --git a/docs/environment-variables.md b/docs/environment-variables.md
index b227a2d..e109066 100644
--- a/docs/environment-variables.md
+++ b/docs/environment-variables.md
@@ -10,7 +10,6 @@ The application is driven by some environment variables used at build and runtim
 | `REACT_APP_NAME` | name extracted from package.json` | - |
 | `REACT_APP_VERSION` | version extracted from package.json` | - |
 | `REACT_APP_COMMIT` | commit extracted from git history | - |
-| `PUBLIC_PATH` | public url where the app is accessible | http://localhost:3001/ |
 
 ### Used Locally / Static Files CDN
 
@@ -30,8 +29,3 @@ The application is driven by some environment variables used at build and runtim
 #### Note About Remote URLs Variables
 
 This project is using the `REMOTE_1_URL` to dinamically load a remote. You can add as many remotes as you want or you can decide to use static know localtions without relying on environment variables for the purpose.
-
-#### Note About The Public Path
-
-When working with several host/remote applications it is a requirement that
-`PUBLIC_PATH` are updated to avoid port collision.
\ No newline at end of file
diff --git a/docs/microfrontend-setup.md b/docs/microfrontend-setup.md
index 140f0cd..c244942 100644
--- a/docs/microfrontend-setup.md
+++ b/docs/microfrontend-setup.md
@@ -2,7 +2,7 @@
 
 This microfrontend setup is configured to have this project acting as the remote.
 
-It is responsible to export the children modules/app which will be loaded at runtime and will be provided with some context e.g. auth, routing. 
+It is responsible to export the children modules/app which will be loaded at runtime and will be provided with some context e.g. auth, routing.
 
 `microfrontend-shell-boilerplate` is a default remote (child) boilerplate meant to be consumed by a host such as [microfrontend-shell-boilerplate](https://github.com/modusintegration/microfrontend-shell-boilerplate).
 
@@ -23,7 +23,7 @@ It's important to note the remote has to use a unique name in order to work and
 
 The suggested practice is use such name as:
 - Git repository
-- Webpack Module Federation [configuration](#webpack-module-federation) 
+- Webpack Module Federation [configuration](#webpack-module-federation)
 - Module (package.json) name
 - CSS wrapper name
 
@@ -100,15 +100,6 @@ In the project root directory you can find the `webpack.config.js` configuration
 
 Code splitting is automatically enabled when using the _ModuleFederationPlugin_.
 
-#### Public Path
-
-In order to work, the microfrontend remote has to specity the correct `output.publicPath`.
-
-The `publicPath` represents the URL where the host is expected to be accessed.
-
-To simplify the configuration, this is set using the `PUBLIC_PATH` environemnt variable.
-
-
 #### Module Federation Plugin
 
 At the `webpack.config.js` plugins section, you can find the _ModuleFederationPlugin_.
@@ -138,7 +129,7 @@ plugins: [
 
 In the `expose` configuration, you need to export all the components you expect are going to be use.
 
-**Note - export only the modules** 
+**Note - export only the modules**
 
 Make sure you do not export the `bootstrap.tsx` as that is only used locally. When your modules are imported by a host, they do not need to include all the traditional context setup specified in `bootstrap.tsx` since the host will be providing that.
 
diff --git a/src/App/Users/views.tsx b/src/App/Users/views.tsx
index d7c4153..9388142 100644
--- a/src/App/Users/views.tsx
+++ b/src/App/Users/views.tsx
@@ -15,7 +15,7 @@ const usersColumns = [
     label: 'Name',
     key: 'name',
     fn: (rawValue: Name) => {
-      return `${rawValue.givenName || ''} ${rawValue.familyName || ''}`;
+      return `${rawValue ? rawValue.givenName : ''} ${rawValue ? rawValue.familyName : ''}`;
     },
   },
   {
diff --git a/src/Menu/Menu.tsx b/src/Menu/Menu.tsx
index cd79ef4..79e2c63 100644
--- a/src/Menu/Menu.tsx
+++ b/src/Menu/Menu.tsx
@@ -6,9 +6,15 @@ import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 
 interface ExportMenuProps {
   path: string;
+  pathname: string;
+  onChange: (path: string) => void;
 }
 
-function MenuItems({ path }: ExportMenuProps) {
+interface MenuItemsProps {
+  path: string;
+}
+
+function MenuItems({ path }: MenuItemsProps) {
   return (
     <>
       <Menu.Item path={`${path}`} label="Users" />
@@ -16,22 +22,24 @@ function MenuItems({ path }: ExportMenuProps) {
   );
 }
 
-export default function ExportMenu({ path }: ExportMenuProps) {
+// ExportMenu is the exported component to be consumed
+// The shell passes down these props
+export default function ExportMenu({ path, pathname, onChange }: ExportMenuProps) {
   return (
-    <Provider store={store} context={ReduxContext}>
-      <MenuItems path={path} />
-    </Provider>
+    <Menu path={path} pathname={pathname} onChange={onChange}>
+      <Provider store={store} context={ReduxContext}>
+        <MenuItems path={path} />
+      </Provider>
+    </Menu>
   );
 }
 
+// AppMenu is the standalone component used when the microfrontend is not being
+// consumed
 export function AppMenu() {
   const match = useRouteMatch();
   const history = useHistory();
   const location = useLocation();
   const path = match.url === '/' ? '' : match.url;
-  return (
-    <Menu path={path} pathname={location.pathname} onChange={history.push}>
-      <ExportMenu path={path} />
-    </Menu>
-  );
+  return <ExportMenu path={path} pathname={location.pathname} onChange={history.push} />;
 }
diff --git a/webpack.config.js b/webpack.config.js
index ec7f725..7417bad 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -47,6 +47,15 @@ module.exports = {
     port: config.DEV_PORT,
     host: '0.0.0.0',
     publicPath: '/',
+    proxy: {
+      // For local testing update `target` to point to your
+      // locally hosted or port-forwarded `role-assignment-service` service
+      '/role-assignment': {
+        target: 'http://localhost:port',
+        pathRewrite: { '^/role-assignment': '' },
+        secure: false,
+      },
+    },
   },
   output: {
     path: path.resolve(__dirname, 'dist'),