diff --git a/frontend/app-config.yaml b/frontend/app-config.yaml
index aa3f3527..11c3fabf 100644
--- a/frontend/app-config.yaml
+++ b/frontend/app-config.yaml
@@ -1,6 +1,7 @@
 app:
   title: Hangar App
   baseUrl: http://localhost:3000
+  useApiTokenAuth: false
 
 organization:
   name: Kiwi.com
diff --git a/frontend/packages/zoo-api/src/client.ts b/frontend/packages/zoo-api/src/client.ts
index 7eceff30..38754f18 100644
--- a/frontend/packages/zoo-api/src/client.ts
+++ b/frontend/packages/zoo-api/src/client.ts
@@ -2,6 +2,7 @@ import { Client, dedupExchange, fetchExchange } from 'urql';
 import { cacheExchange } from '@urql/exchange-graphcache';
 import { relayPagination } from '@urql/exchange-graphcache/extras';
 import { Connection, Edge, Node } from './queries';
+import { useApi, configApiRef } from '@backstage/core';
 
 const cache = cacheExchange({
   resolvers: {
@@ -11,9 +12,31 @@ const cache = cacheExchange({
   },
 });
 
+export const API_AUTH_KEY = "the-zoo.api.token";
+
+function getToken(): string {
+    const value = localStorage.getItem(API_AUTH_KEY);
+    if (!value) return "";
+    const token = JSON.parse(value)["token"];
+    return token ? token : "";
+}
+
 export const theZooClient = new Client({
   url: '/graphql',
   exchanges: [cache, dedupExchange, fetchExchange],
+  fetchOptions: () => {
+      const config = useApi(configApiRef);
+      const useApiTokenAuth = config.getBoolean("app.useApiTokenAuth");
+
+      if (useApiTokenAuth) {
+          const token: string = getToken();
+          return {
+              headers: { Authorization: token ? `Bearer ${token}` : '' },
+          };
+      }
+
+      return {};
+  }
 });
 
 /**
diff --git a/frontend/plugins/services/src/state/AppState.tsx b/frontend/plugins/services/src/state/AppState.tsx
index 97e0fecb..d2d307cb 100644
--- a/frontend/plugins/services/src/state/AppState.tsx
+++ b/frontend/plugins/services/src/state/AppState.tsx
@@ -6,7 +6,6 @@ export type { SettingsState };
 export const AppContext = React.createContext<[State, Dispatch<Action>]>(
   [] as any,
 );
-export const STORAGE_KEY = "the-zoo.api.token";
 
 const initialState: State = {
   token: '',
diff --git a/frontend/plugins/services/src/state/useSettings.ts b/frontend/plugins/services/src/state/useSettings.ts
index f999adde..828a78a0 100644
--- a/frontend/plugins/services/src/state/useSettings.ts
+++ b/frontend/plugins/services/src/state/useSettings.ts
@@ -1,7 +1,8 @@
 import { errorApiRef, useApi } from '@backstage/core';
 import { useContext, useEffect } from 'react';
-import { AppContext, STORAGE_KEY } from './AppState';
+import { API_AUTH_KEY } from 'zoo-api';
 import { Settings } from './types';
+import { AppContext } from './AppState'
 
 export function useSettings() {
   const [settings, dispatch] = useContext(AppContext);
@@ -11,8 +12,8 @@ export function useSettings() {
   useEffect(() => {
     const rehydrate = () => {
       try {
-        const stateFromStorage = JSON.parse(
-          localStorage.getItem(STORAGE_KEY)!,
+          const stateFromStorage = JSON.parse(
+              localStorage.getItem(API_AUTH_KEY)!,
         );
         if (
           stateFromStorage &&
@@ -33,7 +34,7 @@ export function useSettings() {
   }, [dispatch, errorApi, settings]);
 
   const persist = (state: Settings) => {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    localStorage.setItem(API_AUTH_KEY, JSON.stringify(state));
   };
 
   return [