diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..dad0d4f
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+REACT_APP_API_URL=http://127.0.0.1:5000/api/v1
+REACT_APP_HYDRA_PUBLIC_URL=https://sso.init.stackspin.net
\ No newline at end of file
diff --git a/deployment/helmchart/templates/configmaps.yaml b/deployment/helmchart/templates/configmaps.yaml
index 6d02f35..a6c9346 100644
--- a/deployment/helmchart/templates/configmaps.yaml
+++ b/deployment/helmchart/templates/configmaps.yaml
@@ -19,6 +19,8 @@ data:
   KRATOS_PUBLIC_URL: {{ .Values.backend.kratos.publicUrl }}
   KRATOS_ADMIN_URL: {{ .Values.backend.kratos.adminUrl }}
   HYDRA_PUBLIC_URL: {{ .Values.backend.oidc.baseUrl }}
+  # React can only read this env variable if it's prepended with REACT_APP
+  REACT_APP_HYDRA_PUBLIC_URL: {{ .Values.backend.oidc.baseUrl }}
   HYDRA_ADMIN_URL: {{ .Values.backend.hydra.adminUrl }}
   LOGIN_PANEL_URL: {{ .Values.backend.loginPanelUrl }}
   DATABASE_URL: {{ .Values.backend.databaseUrl }}
diff --git a/src/common/util/index.ts b/src/common/util/index.ts
index 40a831a..eb165cf 100644
--- a/src/common/util/index.ts
+++ b/src/common/util/index.ts
@@ -1,2 +1,2 @@
-export { isTouched } from './is-touched';
-export { addParamsToLink } from './add-params-to-link';
+export * from './is-touched';
+export * from './add-params-to-link';
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 200d577..7b1c5a2 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -26,6 +26,8 @@ function filterNavigationByDashboardRole(isAdmin: boolean) {
   return navigation.filter((item) => !item.requiresAdmin);
 }
 
+const HYDRA_URL = process.env.REACT_APP_HYDRA_PUBLIC_URL;
+
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface HeaderProps {}
 
@@ -48,6 +50,8 @@ const Header: React.FC<HeaderProps> = () => {
 
   const navigationItems = filterNavigationByDashboardRole(isAdmin);
 
+  const signOutUrl = `${HYDRA_URL}/oauth2/sessions/logout`;
+
   return (
     <>
       <Disclosure as="nav" className="bg-white shadow relative z-10">
@@ -127,7 +131,8 @@ const Header: React.FC<HeaderProps> = () => {
                         <Menu.Item>
                           {({ active }) => (
                             <a
-                              onClick={logOut}
+                              onClick={() => logOut()}
+                              href={signOutUrl}
                               className={classNames(
                                 active ? 'bg-gray-100 cursor-pointer' : '',
                                 'block px-4 py-2 text-sm text-gray-700 cursor-pointer',