diff --git a/public/app/features/datasources/components/picker/AddNewDataSourceButton.tsx b/public/app/features/datasources/components/picker/AddNewDataSourceButton.tsx
index 7e703eeea80..f0b21dd19a2 100644
--- a/public/app/features/datasources/components/picker/AddNewDataSourceButton.tsx
+++ b/public/app/features/datasources/components/picker/AddNewDataSourceButton.tsx
@@ -1,3 +1,4 @@
+import { locationUtil } from '@grafana/data';
 import { LinkButton, ButtonVariant } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { Trans } from 'app/core/internationalization';
@@ -11,7 +12,7 @@ interface AddNewDataSourceButtonProps {
 
 export function AddNewDataSourceButton({ variant, onClick }: AddNewDataSourceButtonProps) {
   const hasCreateRights = contextSrv.hasPermission(AccessControlAction.DataSourcesCreate);
-  const newDataSourceURL = CONNECTIONS_ROUTES.DataSourcesNew;
+  const newDataSourceURL = locationUtil.assureBaseUrl(CONNECTIONS_ROUTES.DataSourcesNew);
 
   return (
     <LinkButton
diff --git a/public/app/features/datasources/components/picker/DataSourceModal.test.tsx b/public/app/features/datasources/components/picker/DataSourceModal.test.tsx
index c4e1251f984..f2b4dd0fdce 100644
--- a/public/app/features/datasources/components/picker/DataSourceModal.test.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceModal.test.tsx
@@ -1,7 +1,14 @@
 import { queryByTestId, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { DataSourceInstanceSettings, DataSourcePluginMeta, PluginMetaInfo, PluginType } from '@grafana/data';
+import {
+  DataSourceInstanceSettings,
+  DataSourcePluginMeta,
+  GrafanaConfig,
+  PluginMetaInfo,
+  PluginType,
+  locationUtil,
+} from '@grafana/data';
 import { config } from '@grafana/runtime';
 
 import { DataSourceModal, DataSourceModalProps } from './DataSourceModal';
@@ -73,6 +80,12 @@ jest.mock('@grafana/runtime/src/services/dataSourceSrv', () => {
   };
 });
 
+locationUtil.initialize({
+  config: { appSubUrl: '/my-sub-path' } as GrafanaConfig,
+  getTimeRangeForUrl: jest.fn(),
+  getVariablesUrlParams: jest.fn(),
+});
+
 const getListMock = jest.fn();
 const getInstanceSettingsMock = jest.fn();
 beforeEach(() => {
@@ -95,6 +108,10 @@ describe('DataSourceDropdown', () => {
       await user.keyboard('foobarbaz'); //Search for a DS that should not exist
 
       expect(screen.queryAllByText('Configure a new data source')).toHaveLength(2);
+      screen.queryAllByRole('link').forEach((link) => {
+        // It should point to the new data source page including any sub url configured
+        expect(link).toHaveAttribute('href', '/my-sub-path/connections/datasources/new');
+      });
     });
 
     it('only displays the file drop area when the ff is enabled', async () => {
diff --git a/public/app/features/datasources/components/picker/DataSourcePicker.test.tsx b/public/app/features/datasources/components/picker/DataSourcePicker.test.tsx
index 2395065224b..d6accb33324 100644
--- a/public/app/features/datasources/components/picker/DataSourcePicker.test.tsx
+++ b/public/app/features/datasources/components/picker/DataSourcePicker.test.tsx
@@ -2,7 +2,14 @@ import { findByText, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
 
-import { DataSourceInstanceSettings, DataSourcePluginMeta, PluginMetaInfo, PluginType } from '@grafana/data';
+import {
+  DataSourceInstanceSettings,
+  DataSourcePluginMeta,
+  GrafanaConfig,
+  PluginMetaInfo,
+  PluginType,
+  locationUtil,
+} from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { ModalRoot, ModalsProvider } from '@grafana/ui';
 import config from 'app/core/config';
@@ -51,6 +58,12 @@ async function setupOpenDropdown(user: UserEvent, props: DataSourcePickerProps)
   await user.click(searchBox!);
 }
 
+locationUtil.initialize({
+  config: { appSubUrl: '/my-sub-path' } as GrafanaConfig,
+  getVariablesUrlParams: jest.fn(),
+  getTimeRangeForUrl: jest.fn(),
+});
+
 jest.mock('@grafana/runtime', () => {
   const actual = jest.requireActual('@grafana/runtime');
   return {
@@ -281,6 +294,8 @@ describe('DataSourcePicker', () => {
       await user.keyboard('foobarbaz'); //Search for a DS that should not exist
 
       expect(await screen.findByText('Configure a new data source')).toBeInTheDocument();
+      // It should point to the new data source page including any sub url configured
+      expect(screen.getByRole('link')).toHaveAttribute('href', '/my-sub-path/connections/datasources/new');
     });
 
     it('should call onChange with the default query when add csv is clicked', async () => {