diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx
index b93f17b9e9f..46bfc574944 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx
@@ -12,33 +12,28 @@
  */
 
 import { isUndefined } from 'lodash';
-import { DynamicFormFieldType } from 'Models';
+import { LoadingState } from 'Models';
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import {
-  getAddServicePath,
-  getServiceDetailsPath,
-  ONLY_NUMBER_REGEX,
-  ROUTES,
-} from '../../constants/constants';
+import { getServiceDetailsPath, ROUTES } from '../../constants/constants';
 import { STEPS_FOR_ADD_SERVICE } from '../../constants/services.const';
 import { PageLayoutType } from '../../enums/layout.enum';
 import { ServiceCategory } from '../../enums/service.enum';
-import { DashboardServiceType } from '../../generated/entity/services/dashboardService';
-import { MessagingServiceType } from '../../generated/entity/services/messagingService';
-import { DataObj } from '../../interface/service.interface';
-import { getCurrentUserId } from '../../utils/CommonUtils';
 import {
-  getKeyValueObject,
-  isIngestionSupported,
-} from '../../utils/ServiceUtils';
+  ConfigData,
+  DataObj,
+  DataService,
+} from '../../interface/service.interface';
+import { getCurrentUserId } from '../../utils/CommonUtils';
+import { getAddServicePath } from '../../utils/RouterUtils';
+import { isIngestionSupported } from '../../utils/ServiceUtils';
 import AddIngestion from '../AddIngestion/AddIngestion.component';
 import SuccessScreen from '../common/success-screen/SuccessScreen';
 import PageLayout from '../containers/PageLayout';
 import IngestionStepper from '../IngestionStepper/IngestionStepper.component';
+import ConnectionConfigForm from '../ServiceConfig/ConnectionConfigForm';
 import { AddServiceProps } from './AddService.interface';
 import ConfigureService from './Steps/ConfigureService';
-import ConnectionDetails from './Steps/ConnectionDetails';
 import SelectServiceType from './Steps/SelectServiceType';
 
 const AddService = ({
@@ -58,28 +53,8 @@ const AddService = ({
   const [selectServiceType, setSelectServiceType] = useState('');
   const [serviceName, setServiceName] = useState('');
   const [description, setDescription] = useState('');
-  const [url, setUrl] = useState('');
-  const [port, setPort] = useState('');
-  const [database, setDatabase] = useState('');
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [warehouse, setWarehouse] = useState('');
-  const [account, setAccount] = useState('');
-  const [connectionOptions, setConnectionOptions] = useState<
-    DynamicFormFieldType[]
-  >([]);
-  const [connectionArguments, setConnectionArguments] = useState<
-    DynamicFormFieldType[]
-  >([]);
-  const [brokers, setBrokers] = useState('');
-  const [schemaRegistry, setSchemaRegistry] = useState('');
-  const [pipelineUrl, setPipelineUrl] = useState('');
-  const [dashboardUrl, setDashboardUrl] = useState('');
-  const [env, setEnv] = useState('');
-  const [apiVersion, setApiVersion] = useState('');
-  const [server, setServer] = useState('');
-  const [siteName, setSiteName] = useState('');
-  const [apiKey, setApiKey] = useState('');
+  const [saveServiceState, setSaveServiceState] =
+    useState<LoadingState>('initial');
 
   const handleServiceTypeClick = (type: string) => {
     setShowErrorMessage({ ...showErrorMessage, serviceType: false });
@@ -121,173 +96,47 @@ const AddService = ({
     setAddIngestion(value);
   };
 
-  const handleSubmit = () => {
-    let dataObj: DataObj = {
-      description: description,
+  const handleConfigUpdate = (
+    oData: ConfigData,
+    serviceCat: ServiceCategory
+  ) => {
+    const data = {
       name: serviceName,
       serviceType: selectServiceType,
-    };
-
-    switch (serviceCategory) {
-      case ServiceCategory.DATABASE_SERVICES:
-        {
-          dataObj = {
-            ...dataObj,
-            databaseConnection: {
-              hostPort: `${url}:${port}`,
-              connectionArguments: getKeyValueObject(connectionArguments),
-              connectionOptions: getKeyValueObject(connectionOptions),
-              database: database,
-              password: password,
-              username: username,
-            },
-          };
-        }
-
-        break;
-      case ServiceCategory.MESSAGING_SERVICES:
-        {
-          dataObj = {
-            ...dataObj,
-            brokers:
-              selectServiceType === MessagingServiceType.Pulsar
-                ? [brokers]
-                : brokers.split(',').map((broker) => broker.trim()),
-            schemaRegistry: schemaRegistry,
-          };
-        }
-
-        break;
-      case ServiceCategory.DASHBOARD_SERVICES:
-        {
-          switch (selectServiceType) {
-            case DashboardServiceType.Redash:
-              {
-                dataObj = {
-                  ...dataObj,
-                  dashboardUrl: dashboardUrl,
-                  // eslint-disable-next-line @typescript-eslint/camelcase
-                  api_key: apiKey,
-                };
-              }
-
-              break;
-            case DashboardServiceType.Tableau:
-              {
-                dataObj = {
-                  ...dataObj,
-                  dashboardUrl: dashboardUrl,
-                  // eslint-disable-next-line @typescript-eslint/camelcase
-                  site_name: siteName,
-                  username: username,
-                  password: password,
-                  // eslint-disable-next-line @typescript-eslint/camelcase
-                  api_version: apiVersion,
-                  server: server,
-                };
-              }
-
-              break;
-            default:
-              {
-                dataObj = {
-                  ...dataObj,
-                  dashboardUrl: dashboardUrl,
-                  username: username,
-                  password: password,
-                };
-              }
-
-              break;
-          }
-        }
-
-        break;
-      case ServiceCategory.PIPELINE_SERVICES:
-        {
-          dataObj = {
-            ...dataObj,
-            pipelineUrl: pipelineUrl,
-          };
-        }
-
-        break;
-      default:
-        break;
-    }
-    // TODO:- need to replace mockdata with actual data.
-    // mockdata to create service for mySQL
-    const mockData = {
       description: description,
-      name: serviceName,
-      connection: {
-        config: {
-          type: 'MySQL',
-          hostPort: 'localhost:3306',
-        },
-      },
       owner: {
         id: getCurrentUserId(),
         type: 'user',
       },
-      serviceType: 'MySQL',
     };
+    const configData =
+      serviceCat === ServiceCategory.PIPELINE_SERVICES
+        ? { ...data, pipelineUrl: oData.pipelineUrl }
+        : {
+            ...data,
+            connection: {
+              config: oData,
+            },
+          };
 
-    onAddServiceSave(mockData).then(() => {
-      setActiveStepperStep(4);
+    return new Promise<void>((resolve, reject) => {
+      setSaveServiceState('waiting');
+      onAddServiceSave(configData)
+        .then(() => {
+          setActiveStepperStep(4);
+          resolve();
+        })
+        .catch((err) => {
+          reject(err);
+        })
+        .finally(() => setSaveServiceState('initial'));
     });
   };
 
-  const handleConnectionDetailsSubmitClick = () => {
-    // validation will go here
-
-    handleSubmit();
-  };
-
   const handleConnectionDetailsBackClick = () => {
     setActiveStepperStep(2);
   };
 
-  const addConnectionOptionFields = () => {
-    setConnectionOptions([...connectionOptions, { key: '', value: '' }]);
-  };
-
-  const removeConnectionOptionFields = (i: number) => {
-    const newFormValues = [...connectionOptions];
-    newFormValues.splice(i, 1);
-    setConnectionOptions(newFormValues);
-  };
-
-  const handleConnectionOptionFieldsChange = (
-    i: number,
-    field: keyof DynamicFormFieldType,
-    value: string
-  ) => {
-    const newFormValues = [...connectionOptions];
-    newFormValues[i][field] = value;
-    setConnectionOptions(newFormValues);
-  };
-
-  const addConnectionArgumentFields = () => {
-    setConnectionArguments([...connectionArguments, { key: '', value: '' }]);
-  };
-
-  const removeConnectionArgumentFields = (i: number) => {
-    const newFormValues = [...connectionArguments];
-    newFormValues.splice(i, 1);
-    setConnectionArguments(newFormValues);
-  };
-
-  const handleConnectionArgumentFieldsChange = (
-    i: number,
-    field: keyof DynamicFormFieldType,
-    value: string
-  ) => {
-    const newFormValues = [...connectionArguments];
-    newFormValues[i][field] = value;
-    setConnectionArguments(newFormValues);
-  };
-
   const handleViewServiceClick = () => {
     if (!isUndefined(newServiceData)) {
       history.push(getServiceDetailsPath(newServiceData.name, serviceCategory));
@@ -297,97 +146,10 @@ const AddService = ({
   const handleValidation = (
     event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
   ) => {
-    const value = event.target.value;
-    const name = event.target.name;
-
-    switch (name) {
-      case 'serviceName':
-        setServiceName(value.trim());
-        setShowErrorMessage({ ...showErrorMessage, name: false });
-
-        break;
-
-      case 'url':
-        setUrl(value);
-
-        break;
-
-      case 'port':
-        if (ONLY_NUMBER_REGEX.test(value) || value === '') {
-          setPort(value);
-        }
-
-        break;
-
-      case 'database':
-        setDatabase(value);
-
-        break;
-
-      case 'username':
-        setUsername(value);
-
-        break;
-
-      case 'password':
-        setPassword(value);
-
-        break;
-
-      case 'warehouse':
-        setWarehouse(value);
-
-        break;
-
-      case 'account':
-        setAccount(value);
-
-        break;
-
-      case 'brokers':
-        setBrokers(value);
-
-        break;
-
-      case 'schemaRegistry':
-        setSchemaRegistry(value);
-
-        break;
-
-      case 'pipelineUrl':
-        setPipelineUrl(value);
-
-        break;
-
-      case 'dashboardUrl':
-        setDashboardUrl(value);
-
-        break;
-
-      case 'env':
-        setEnv(value);
-
-        break;
-
-      case 'apiVersion':
-        setApiVersion(value);
-
-        break;
-
-      case 'server':
-        setServer(value);
-
-        break;
-
-      case 'siteName':
-        setSiteName(value);
-
-        break;
-
-      case 'apiKey':
-        setApiKey(value);
-
-        break;
+    const value = event.target.value.trim();
+    setServiceName(value);
+    if (value) {
+      setShowErrorMessage({ ...showErrorMessage, name: false });
     }
   };
 
@@ -430,40 +192,20 @@ const AddService = ({
           )}
 
           {activeStepperStep === 3 && (
-            <ConnectionDetails
-              account={account}
-              addConnectionArgumentFields={addConnectionArgumentFields}
-              addConnectionOptionFields={addConnectionOptionFields}
-              apiKey={apiKey}
-              apiVersion={apiVersion}
-              brokers={brokers}
-              connectionArguments={connectionArguments}
-              connectionOptions={connectionOptions}
-              dashboardUrl={dashboardUrl}
-              database={database}
-              env={env}
-              handleConnectionArgumentFieldsChange={
-                handleConnectionArgumentFieldsChange
+            <ConnectionConfigForm
+              data={
+                (serviceCategory !== ServiceCategory.PIPELINE_SERVICES
+                  ? {
+                      connection: { config: { type: selectServiceType } },
+                    }
+                  : {}) as DataService
               }
-              handleConnectionOptionFieldsChange={
-                handleConnectionOptionFieldsChange
-              }
-              handleValidation={handleValidation}
-              password={password}
-              pipelineUrl={pipelineUrl}
-              port={port}
-              removeConnectionArgumentFields={removeConnectionArgumentFields}
-              removeConnectionOptionFields={removeConnectionOptionFields}
-              schemaRegistry={schemaRegistry}
-              selectedService={selectServiceType}
-              server={server}
               serviceCategory={serviceCategory}
-              siteName={siteName}
-              url={url}
-              username={username}
-              warehouse={warehouse}
-              onBack={handleConnectionDetailsBackClick}
-              onSubmit={handleConnectionDetailsSubmitClick}
+              status={saveServiceState}
+              onCancel={handleConnectionDetailsBackClick}
+              onSave={(e) => {
+                handleConfigUpdate(e.formData, serviceCategory);
+              }}
             />
           )}
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.test.tsx
index 1857b9261e6..0993a2e6d3d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.test.tsx
@@ -38,6 +38,10 @@ jest.mock('react-router-dom', () => ({
   useHistory: jest.fn(),
 }));
 
+jest.mock('../ServiceConfig/ConnectionConfigForm', () => () => (
+  <>ConnectionConfigForm</>
+));
+
 describe('Test AddService component', () => {
   it('AddService component should render', async () => {
     const { container } = render(
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/SelectServiceType.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/SelectServiceType.tsx
index 5045826646f..c359c819abb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/SelectServiceType.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/SelectServiceType.tsx
@@ -101,7 +101,7 @@ const SelectServiceType = ({
           theme="primary"
           variant="text"
           onClick={onCancel}>
-          <span>Discard</span>
+          <span>Back</span>
         </Button>
 
         <Button
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ConnectionConfigForm.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ConnectionConfigForm.tsx
index 60a088efb24..c998c283155 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ConnectionConfigForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ConnectionConfigForm.tsx
@@ -40,6 +40,7 @@ interface Props {
   data: DatabaseService | MessagingService | DashboardService | PipelineService;
   serviceCategory: ServiceCategory;
   status: LoadingState;
+  onCancel?: () => void;
   onSave: (data: ISubmitEvent<ConfigData>) => void;
 }
 
@@ -47,6 +48,7 @@ const ConnectionConfigForm: FunctionComponent<Props> = ({
   data,
   serviceCategory,
   status,
+  onCancel,
   onSave,
 }: Props) => {
   const config = !isNil(data)
@@ -55,7 +57,7 @@ const ConnectionConfigForm: FunctionComponent<Props> = ({
       ? ((data as DatabaseService | MessagingService | DashboardService)
           .connection.config as ConfigData)
       : ({ pipelineUrl: (data as PipelineService).pipelineUrl } as ConfigData)
-    : {};
+    : ({} as ConfigData);
   const getDatabaseFields = () => {
     let connSch = {
       schema: {},
@@ -105,6 +107,7 @@ const ConnectionConfigForm: FunctionComponent<Props> = ({
         schema={connSch.schema}
         status={status}
         uiSchema={connSch.uiSchema}
+        onCancel={onCancel}
         onSubmit={onSave}
       />
     );
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ServiceConfig.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ServiceConfig.tsx
index 362b4ece2a6..985d3e633c6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ServiceConfig.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ServiceConfig.tsx
@@ -11,20 +11,21 @@
  *  limitations under the License.
  */
 
-import { ServicesData } from 'Models';
+import { LoadingState, ServicesData } from 'Models';
 import React, { useState } from 'react';
 import { ServiceCategory } from '../../enums/service.enum';
 import { DashboardService } from '../../generated/entity/services/dashboardService';
 import { DatabaseService } from '../../generated/entity/services/databaseService';
 import { MessagingService } from '../../generated/entity/services/messagingService';
 import { PipelineService } from '../../generated/entity/services/pipelineService';
+import { ConfigData } from '../../interface/service.interface';
 import ConnectionConfigForm from './ConnectionConfigForm';
 
 interface ServiceConfigProps {
   serviceCategory: ServiceCategory;
   data?: ServicesData;
   handleUpdate: (
-    data: ServicesData,
+    data: ConfigData,
     serviceCategory: ServiceCategory
   ) => Promise<void>;
 }
@@ -38,7 +39,7 @@ const ServiceConfig = ({
   data,
   handleUpdate,
 }: ServiceConfigProps) => {
-  const [status] = useState<'initial' | 'waiting' | 'success'>('initial');
+  const [status] = useState<LoadingState>('initial');
 
   const getDynamicFields = () => {
     return (
@@ -53,7 +54,7 @@ const ServiceConfig = ({
         serviceCategory={serviceCategory}
         status={status}
         onSave={(e) => {
-          handleUpdate(e.formData as ServicesData, serviceCategory);
+          handleUpdate(e.formData, serviceCategory);
         }}
       />
     );
diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
index aa88521ecf1..4dec813ea71 100644
--- a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
@@ -45,7 +45,8 @@ const PLACEHOLDER_ROUTE_DASHBOARD_FQN = ':dashboardFQN';
 const PLACEHOLDER_ROUTE_DATABASE_FQN = ':databaseFQN';
 const PLACEHOLDER_ROUTE_DATABASE_SCHEMA_FQN = ':databaseSchemaFQN';
 const PLACEHOLDER_ROUTE_SERVICE_FQN = ':serviceFQN';
-const PLACEHOLDER_ROUTE_SERVICE_CAT = ':serviceCategory';
+
+export const PLACEHOLDER_ROUTE_SERVICE_CAT = ':serviceCategory';
 const PLACEHOLDER_ROUTE_SEARCHQUERY = ':searchQuery';
 const PLACEHOLDER_ROUTE_TAB = ':tab';
 const PLACEHOLDER_ROUTE_TEAM = ':team';
@@ -243,13 +244,6 @@ export const getServiceDetailsPath = (
   return path;
 };
 
-export const getAddServicePath = (serviceCategory: string) => {
-  let path = ROUTES.ADD_SERVICE;
-  path = path.replace(PLACEHOLDER_ROUTE_SERVICE_CAT, serviceCategory);
-
-  return path;
-};
-
 export const getExplorePathWithSearch = (searchQuery = '', tab = 'tables') => {
   let path = ROUTES.EXPLORE_WITH_SEARCH;
   path = path
diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/service.interface.ts b/openmetadata-ui/src/main/resources/ui/src/interface/service.interface.ts
index e93c8f314d7..86109fcf700 100644
--- a/openmetadata-ui/src/main/resources/ui/src/interface/service.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/interface/service.interface.ts
@@ -62,15 +62,19 @@ export type ServiceDataObj = { name: string } & Partial<DatabaseService> &
   Partial<DashboardService> &
   Partial<PipelineService>;
 
+export type DataService =
+  | DatabaseService
+  | MessagingService
+  | DashboardService
+  | PipelineService;
+
 export interface ServiceResponse {
   data: Array<ServiceDataObj>;
   paging: Paging;
 }
 
-export type ConfigData =
-  | DatabaseService['connection']
-  | MessagingService['connection']
-  | DashboardService['connection']
-  | {
-      pipelineUrl: string;
-    };
+export type ConfigData = Partial<DatabaseService['connection']> &
+  Partial<MessagingService['connection']> &
+  Partial<DashboardService['connection']> & {
+    pipelineUrl: string;
+  };
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.test.tsx
index cc710da4a83..9f20983e158 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.test.tsx
@@ -45,6 +45,7 @@ import {
   mockSupersetService,
   mockTableauService,
 } from '../../mocks/Service.mock';
+import { getAddServicePath } from '../../utils/RouterUtils';
 import ServicesPage from './index';
 
 jest.mock('../../authentication/auth-provider/AuthProvider', () => {
@@ -59,6 +60,10 @@ jest.mock('../../authentication/auth-provider/AuthProvider', () => {
   };
 });
 
+jest.mock('../../utils/RouterUtils', () => ({
+  getAddServicePath: jest.fn(),
+}));
+
 jest.mock('../../axiosAPIs/serviceAPI', () => ({
   deleteService: jest.fn(),
   getServiceDetails: jest
@@ -112,6 +117,8 @@ jest.mock('../../components/Modals/AddServiceModal/AddServiceModal', () => ({
     .mockReturnValue(<p data-testid="add-service-modal">AddServiceModal</p>),
 }));
 
+const mockGetAddServicePath = jest.fn();
+
 describe('Test Service page', () => {
   it('Check if there is an element in the page', async () => {
     const { container } = render(<ServicesPage />, {
@@ -160,15 +167,16 @@ describe('Test Service page', () => {
   });
 
   it('OnClick of add service, AddServiceModal should open', async () => {
+    (getAddServicePath as jest.Mock).mockImplementationOnce(
+      mockGetAddServicePath
+    );
     const { container } = render(<ServicesPage />, {
       wrapper: MemoryRouter,
     });
     const addService = await findByTestId(container, 'add-new-service-button');
     fireEvent.click(addService);
 
-    expect(
-      await findByTestId(container, 'add-service-modal')
-    ).toBeInTheDocument();
+    expect(mockGetAddServicePath).toBeCalled();
   });
 
   it('Card details should be display properly', async () => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
index fe974a9c20d..0a214e22cca 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
@@ -16,7 +16,7 @@ import classNames from 'classnames';
 import { isNil } from 'lodash';
 import { ServiceCollection, ServiceData, ServiceTypes } from 'Models';
 import React, { Fragment, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
 import { addAirflowPipeline } from '../../axiosAPIs/airflowPipelineAPI';
 import {
@@ -69,6 +69,7 @@ import {
 } from '../../utils/CommonUtils';
 import { getDashboardURL } from '../../utils/DashboardServiceUtils';
 import { getBrokers } from '../../utils/MessagingServiceUtils';
+import { getAddServicePath } from '../../utils/RouterUtils';
 import { getErrorText } from '../../utils/StringsUtils';
 import SVGIcons from '../../utils/SvgUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
@@ -98,6 +99,8 @@ export type ApiData = {
 };
 
 const ServicesPage = () => {
+  const history = useHistory();
+
   const { isAdminUser } = useAuth();
   const { isAuthDisabled } = useAuthContext();
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -211,9 +214,12 @@ const ServicesPage = () => {
     }
   };
 
+  const goToAddService = () => {
+    history.push(getAddServicePath(serviceName));
+  };
+
   const handleAddService = () => {
-    setEditData(undefined);
-    setIsModalOpen(true);
+    goToAddService();
   };
   const handleClose = () => {
     setIsModalOpen(false);
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts
index d46f35985a7..6aa789fdd49 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts
@@ -11,7 +11,11 @@
  *  limitations under the License.
  */
 
-import { IN_PAGE_SEARCH_ROUTES, ROUTES } from '../constants/constants';
+import {
+  IN_PAGE_SEARCH_ROUTES,
+  PLACEHOLDER_ROUTE_SERVICE_CAT,
+  ROUTES,
+} from '../constants/constants';
 
 export const isDashboard = (pathname: string): boolean => {
   return pathname === ROUTES.FEEDS;
@@ -35,3 +39,10 @@ export const inPageSearchOptions = (pathname: string): Array<string> => {
 
   return strOptions;
 };
+
+export const getAddServicePath = (serviceCategory: string) => {
+  let path = ROUTES.ADD_SERVICE;
+  path = path.replace(PLACEHOLDER_ROUTE_SERVICE_CAT, serviceCategory);
+
+  return path;
+};