diff --git a/docs/reference/alpha-web-ui.md b/docs/reference/alpha-web-ui.md
index 83abbe0229e..80c5b824c5a 100644
--- a/docs/reference/alpha-web-ui.md
+++ b/docs/reference/alpha-web-ui.md
@@ -102,7 +102,7 @@ The advantage of importing Feast UI as a module is in the ease of customization.
 
 ##### Fetching the Project List
 
-You can use `projectListPromise` to provide a promise that overrides where the Feast UI fetches the project list from.
+By default, the Feast UI fetches the project list from the app root path. You can use `projectListPromise` to provide a promise that overrides where it's fetched from.
 
 ```jsx
 <FeastUI
diff --git a/ui/README.md b/ui/README.md
index fef74b60104..bf9ccd367d9 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -77,7 +77,7 @@ The advantage of importing Feast UI as a module is in the ease of customization.
 
 ##### Fetching the Project List
 
-You can use `projectListPromise` to provide a promise that overrides where the Feast UI fetches the project list from.
+By default, the Feast UI fetches the project list from the app root path. You can use `projectListPromise` to provide a promise that overrides where it's fetched from.
 
 ```jsx
 <FeastUI
diff --git a/ui/src/FeastUI.tsx b/ui/src/FeastUI.tsx
index 12025e6d6e7..067296316ec 100644
--- a/ui/src/FeastUI.tsx
+++ b/ui/src/FeastUI.tsx
@@ -25,7 +25,7 @@ const FeastUI = ({ reactQueryClient, feastUIConfigs }: FeastUIProps) => {
     >
       <QueryClientProvider client={queryClient}>
         <QueryParamProvider adapter={ReactRouter6Adapter}>
-          <FeastUISansProviders feastUIConfigs={feastUIConfigs} />
+          <FeastUISansProviders basename={basename} feastUIConfigs={feastUIConfigs} />
         </QueryParamProvider>
       </QueryClientProvider>
     </BrowserRouter>
diff --git a/ui/src/FeastUISansProviders.tsx b/ui/src/FeastUISansProviders.tsx
index 8a0e0b94db0..52676c5d0b5 100644
--- a/ui/src/FeastUISansProviders.tsx
+++ b/ui/src/FeastUISansProviders.tsx
@@ -40,8 +40,8 @@ interface FeastUIConfigs {
   projectListPromise?: Promise<any>;
 }
 
-const defaultProjectListPromise = () => {
-  return fetch("/projects-list.json", {
+const defaultProjectListPromise = (basename: string) => {
+  return fetch(`${basename}/projects-list.json`, {
     headers: {
       "Content-Type": "application/json",
     },
@@ -51,8 +51,10 @@ const defaultProjectListPromise = () => {
 };
 
 const FeastUISansProviders = ({
+  basename = "",
   feastUIConfigs,
 }: {
+  basename?: string;
   feastUIConfigs?: FeastUIConfigs;
 }) => {
   const projectListContext: ProjectsListContextInterface =
@@ -61,7 +63,7 @@ const FeastUISansProviders = ({
           projectsListPromise: feastUIConfigs?.projectListPromise,
           isCustom: true,
         }
-      : { projectsListPromise: defaultProjectListPromise(), isCustom: false };
+      : { projectsListPromise: defaultProjectListPromise(basename), isCustom: false };
 
   return (
     <EuiProvider colorMode="light">
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 04eda8a1ba4..9cca508fcae 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -96,16 +96,7 @@ root.render(
   <React.StrictMode>
     <FeastUI
       reactQueryClient={queryClient}
-      feastUIConfigs={{
-        tabsRegistry: tabsRegistry,
-        projectListPromise: fetch((process.env.PUBLIC_URL || "") + "/projects-list.json", {
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }).then((res) => {
-            return res.json();
-          })
-      }}
+      feastUIConfigs={{ tabsRegistry }}
     />
   </React.StrictMode>
 );