diff --git a/ui/src/components/ControlWrapper/ControlWrapper.tsx b/ui/src/components/ControlWrapper/ControlWrapper.tsx
index 1bcef56ac..ee200f31a 100644
--- a/ui/src/components/ControlWrapper/ControlWrapper.tsx
+++ b/ui/src/components/ControlWrapper/ControlWrapper.tsx
@@ -6,6 +6,7 @@ import CONTROL_TYPE_MAP, { ComponentTypes } from '../../constants/ControlTypeMap
 import { AnyEntity, UtilControlWrapper } from '../BaseFormView/BaseFormTypes';
 import { AcceptableFormValueOrNullish } from '../../types/components/shareableTypes';
 import CustomControl from '../CustomControl/CustomControl';
+import { Mode } from '../../constants/modes';
 
 const CustomElement = styled.div``;
 
@@ -26,7 +27,7 @@ const ControlGroupWrapper = styled(ControlGroup).attrs((props: { dataName: strin
 `;
 
 interface ControlWrapperProps {
-    mode: string;
+    mode: Mode;
     utilityFuncts: UtilControlWrapper;
     value: AcceptableFormValueOrNullish;
     display: boolean;
@@ -130,6 +131,7 @@ class ControlWrapper extends React.PureComponent<ControlWrapperProps> {
             this.props?.modifiedEntitiesData?.required || this.props.entity?.required === undefined
                 ? 'oauth_field' in (this.props.entity || {}) // if required is undefined use true for oauth fields and false for others
                 : this.props.entity?.required; // if required present use required
+        const label = this.props?.modifiedEntitiesData?.label || this?.props?.entity?.label || '';
 
         return (
             this.props.display && (
@@ -142,6 +144,7 @@ class ControlWrapper extends React.PureComponent<ControlWrapperProps> {
                     dataName={this?.props?.entity.field}
                     labelWidth={240}
                     required={isFieldRequired}
+                    label={label}
                 >
                     <CustomElement>{rowView}</CustomElement>
                 </ControlGroupWrapper>
diff --git a/ui/src/components/CustomControl.jsx b/ui/src/components/CustomControl.tsx
similarity index 55%
rename from ui/src/components/CustomControl.jsx
rename to ui/src/components/CustomControl.tsx
index e8dfe38b4..c3d42fa43 100644
--- a/ui/src/components/CustomControl.jsx
+++ b/ui/src/components/CustomControl.tsx
@@ -1,12 +1,54 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { _ } from '@splunk/ui-utils/i18n';
 
 import { getUnifiedConfigs } from '../util/util';
 import { getBuildDirPath } from '../util/script';
+import { AcceptableFormValueOrNullish } from '../types/components/shareableTypes';
+import { UtilBaseForm } from './BaseFormView/BaseFormTypes';
+import { GlobalConfig } from '../types/globalConfig/globalConfig';
+import { Mode } from '../constants/modes';
 
-class CustomControl extends Component {
-    static loadCustomControl = (module, type, appName) =>
+interface IData {
+    value: AcceptableFormValueOrNullish;
+    mode: Mode;
+    serviceName: string;
+}
+
+interface ICustomCompClass {
+    new (
+        config: GlobalConfig,
+        data: IData,
+        setValue: (field: string, newValue: AcceptableFormValueOrNullish) => void,
+        util: UtilBaseForm,
+        el?: HTMLElement
+    ): {
+        render: () => void;
+        validation?: (submittedField: string, submittedValue: string) => void;
+    };
+}
+
+interface ICustomCompProps {
+    data: IData;
+    field: string;
+    handleChange: (field: string, newValue: AcceptableFormValueOrNullish) => void;
+    controlOptions: { src: string; type: string };
+    addCustomValidator: (
+        field: string,
+        validatorFunc: (submittedField: string, submittedValue: string) => void
+    ) => void;
+    utilCustomFunctions: UtilBaseForm;
+}
+
+interface State {
+    loading: boolean;
+}
+
+class CustomControl extends Component<ICustomCompProps, State> {
+    static loadCustomControl = (
+        module: string,
+        type: string,
+        appName: string
+    ): Promise<ICustomCompClass> =>
         new Promise((resolve) => {
             if (type === 'external') {
                 import(/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${module}.js`).then(
@@ -16,13 +58,18 @@ class CustomControl extends Component {
                     }
                 );
             } else {
+                // @ts-expect-error typeof __non_webpack_require__ is not known during bundle
                 __non_webpack_require__([`app/${appName}/js/build/custom/${module}`], (Control) => {
                     resolve(Control);
                 });
             }
         });
 
-    constructor(props) {
+    shouldRender: boolean;
+
+    el?: HTMLElement;
+
+    constructor(props: ICustomCompProps) {
         super(props);
         this.state = {
             loading: true,
@@ -41,10 +88,10 @@ class CustomControl extends Component {
         ).then((Control) => {
             const customControl = new Control(
                 globalConfig,
-                this.el,
                 this.props.data,
                 this.setValue,
-                this.props.utilCustomFunctions
+                this.props.utilCustomFunctions,
+                this.el
             );
             customControl.render();
 
@@ -55,7 +102,7 @@ class CustomControl extends Component {
         });
     }
 
-    shouldComponentUpdate(nextProps, nextState) {
+    shouldComponentUpdate(nextProps: ICustomCompProps, nextState: State) {
         if (!nextState.loading && this.shouldRender) {
             this.shouldRender = false;
             return true;
@@ -63,7 +110,7 @@ class CustomControl extends Component {
         return false;
     }
 
-    setValue = (newValue) => {
+    setValue = (newValue: AcceptableFormValueOrNullish) => {
         this.props.handleChange(this.props.field, newValue);
     };
 
@@ -74,7 +121,9 @@ class CustomControl extends Component {
                 {
                     <span // nosemgrep: typescript.react.security.audit.react-no-refs.react-no-refs
                         ref={(el) => {
-                            this.el = el;
+                            if (el) {
+                                this.el = el;
+                            }
                         }}
                         style={{ visibility: this.state.loading ? 'hidden' : 'visible' }}
                     />
@@ -84,13 +133,4 @@ class CustomControl extends Component {
     }
 }
 
-CustomControl.propTypes = {
-    data: PropTypes.object,
-    field: PropTypes.string,
-    handleChange: PropTypes.func,
-    controlOptions: PropTypes.object,
-    addCustomValidator: PropTypes.func,
-    utilCustomFunctions: PropTypes.object,
-};
-
 export default CustomControl;
diff --git a/ui/src/components/CustomControl/CustomControl.tsx b/ui/src/components/CustomControl/CustomControl.tsx
index 59697288a..bbb2967dd 100644
--- a/ui/src/components/CustomControl/CustomControl.tsx
+++ b/ui/src/components/CustomControl/CustomControl.tsx
@@ -5,20 +5,21 @@ import { getBuildDirPath } from '../../util/script';
 import { AcceptableFormValueOrNullish } from '../../types/components/shareableTypes';
 import { UtilBaseForm } from '../BaseFormView/BaseFormTypes';
 import { GlobalConfig } from '../../types/globalConfig/globalConfig';
+import { Mode } from '../../constants/modes';
 
 interface IData {
     value: AcceptableFormValueOrNullish;
-    mode: string;
+    mode: Mode;
     serviceName: string;
 }
 
 interface ICustomCompClass {
     new (
         config: GlobalConfig,
-        el: HTMLElement | undefined,
         data: IData,
         setValue: (field: string, newValue: AcceptableFormValueOrNullish) => void,
-        util: UtilBaseForm
+        util: UtilBaseForm,
+        el?: HTMLElement
     ): {
         render: () => void;
         validation?: (submittedField: string, submittedValue: string) => void;
@@ -83,13 +84,13 @@ class CustomControl extends React.Component<ICustomCompProps, ICustomCompState>
             this.props.controlOptions.src,
             this.props.controlOptions.type,
             appName
-        ).then((Control: ICustomCompClass) => {
+        ).then((Control) => {
             const customControl = new Control(
                 globalConfig,
-                this.el,
                 this.props.data,
                 this.setValue,
-                this.props.utilCustomFunctions
+                this.props.utilCustomFunctions,
+                this.el
             );
             customControl?.render();
 
diff --git a/ui/src/components/CustomControl/CustomControlMockForTest.ts b/ui/src/components/CustomControl/CustomControlMockForTest.ts
index 01218a7e2..1823816a6 100644
--- a/ui/src/components/CustomControl/CustomControlMockForTest.ts
+++ b/ui/src/components/CustomControl/CustomControlMockForTest.ts
@@ -6,7 +6,7 @@ import { UtilControlWrapper } from '../BaseFormView/BaseFormTypes';
 export class CustomControlMockForTest {
     globalConfig: GlobalConfig;
 
-    el: Element;
+    el?: Element;
 
     data: { mode: Mode; serviceName: string; value: AcceptableFormValueOrNullish };
 
@@ -25,10 +25,10 @@ export class CustomControlMockForTest {
      */
     constructor(
         globalConfig: GlobalConfig,
-        el: Element,
         data: { mode: Mode; serviceName: string; value: AcceptableFormValueOrNullish },
         setValue: (newValue: AcceptableFormValueOrNullish) => void,
-        util: UtilControlWrapper
+        util: UtilControlWrapper,
+        el?: Element
     ) {
         this.globalConfig = globalConfig;
         this.el = el;
@@ -53,6 +53,10 @@ export class CustomControlMockForTest {
     }
 
     render() {
+        if (!this.el) {
+            return this;
+        }
+
         const options = ['input_default', 'input_one', 'input_two', 'input_three'].map(
             (value) =>
                 `<option value="${value}" ${
diff --git a/ui/src/components/CustomTab/CustomTab.jsx b/ui/src/components/CustomTab/CustomTab.tsx
similarity index 57%
rename from ui/src/components/CustomTab/CustomTab.jsx
rename to ui/src/components/CustomTab/CustomTab.tsx
index f7f146696..f84902298 100644
--- a/ui/src/components/CustomTab/CustomTab.jsx
+++ b/ui/src/components/CustomTab/CustomTab.tsx
@@ -1,19 +1,32 @@
 import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
 import { _ } from '@splunk/ui-utils/i18n';
+import { z } from 'zod';
 import { getUnifiedConfigs } from '../../util/util';
 import { getBuildDirPath } from '../../util/script';
+import { TabSchema } from '../../types/globalConfig/pages';
 
-function CustomTab({ tab }) {
+type Tab = z.infer<typeof TabSchema>;
+
+interface CustomTabProps {
+    tab: Tab;
+}
+
+interface ICustomTabClass {
+    new (tab: Tab, ref: HTMLDivElement): {
+        render: () => void;
+    };
+}
+
+const CustomTab: React.FC<CustomTabProps> = ({ tab }) => {
     const [loading, setLoading] = useState(true);
-    const divRef = useRef(null);
+    const divRef = useRef<HTMLDivElement>(null);
 
     const globalConfig = getUnifiedConfigs();
     const appName = globalConfig.meta.name;
 
-    const loadCustomTab = () =>
+    const loadCustomTab = (): Promise<ICustomTabClass> =>
         new Promise((resolve) => {
-            if (tab.customTab.type === 'external') {
+            if (tab.customTab?.type === 'external') {
                 import(
                     /* webpackIgnore: true */ `${getBuildDirPath()}/custom/${tab.customTab.src}.js`
                 ).then((external) => {
@@ -21,18 +34,21 @@ function CustomTab({ tab }) {
                     resolve(Control);
                 });
             } else {
+                // @ts-expect-error should be exported to other js module and imported here
                 __non_webpack_require__(
-                    [`app/${appName}/js/build/custom/${tab.customTab.src}`],
-                    (Control) => resolve(Control)
+                    [`app/${appName}/js/build/custom/${tab.customTab?.src}`],
+                    (Control: ICustomTabClass) => resolve(Control)
                 );
             }
         });
 
     useEffect(() => {
         loadCustomTab().then((Control) => {
-            const customControl = new Control(tab, divRef.current);
-            customControl.render();
-            setLoading(false);
+            if (divRef.current) {
+                const customControl = new Control(tab, divRef.current);
+                customControl.render();
+                setLoading(false);
+            }
         });
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -42,10 +58,6 @@ function CustomTab({ tab }) {
             <div ref={divRef} style={{ visibility: loading ? 'hidden' : 'visible' }} />
         </>
     );
-}
-
-CustomTab.propTypes = {
-    tab: PropTypes.object.isRequired,
 };
 
 export default CustomTab;
diff --git a/ui/src/components/table/CustomTable.jsx b/ui/src/components/table/CustomTable.tsx
similarity index 73%
rename from ui/src/components/table/CustomTable.jsx
rename to ui/src/components/table/CustomTable.tsx
index 87c2e5d99..065977e98 100644
--- a/ui/src/components/table/CustomTable.jsx
+++ b/ui/src/components/table/CustomTable.tsx
@@ -1,12 +1,10 @@
 import React, { useCallback, useEffect, memo, useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
-
-import Table from '@splunk/react-ui/Table';
+import Table, { HeadCellSortHandler } from '@splunk/react-ui/Table';
 import { _ } from '@splunk/ui-utils/i18n';
-
 import { useSearchParams } from 'react-router-dom';
-import { MODE_CLONE, MODE_EDIT } from '../../constants/modes';
-import { PAGE_INPUT } from '../../constants/pages';
+import { Mode, MODE_CLONE, MODE_EDIT } from '../../constants/modes';
+import { PAGE_CONF, PAGE_INPUT } from '../../constants/pages';
+import { RowDataFields } from '../../context/TableContext';
 import { getUnifiedConfigs } from '../../util/util';
 import { getExpansionRow } from './TableExpansionRow';
 import { STYLE_MODAL, STYLE_PAGE } from '../../constants/dialogStyles';
@@ -16,11 +14,34 @@ import DeleteModal from '../DeleteModal/DeleteModal';
 import { NoRecordsDiv } from './CustomTableStyle';
 import { useTableContext } from '../../context/useTableContext';
 import { isReadonlyRow } from './table.utils';
+import { SortDirection } from './useTableSort';
+import { GlobalConfig } from '../../types/globalConfig/globalConfig';
+import { ITableConfig } from '../../types/globalConfig/pages';
+
+interface CustomTableProps {
+    page: string;
+    serviceName?: string;
+    data: RowDataFields[];
+    handleToggleActionClick: (row: RowDataFields) => void;
+    handleOpenPageStyleDialog: (row: RowDataFields, mode: Mode) => void;
+    handleSort: HeadCellSortHandler;
+    sortDir: SortDirection;
+    sortKey?: string;
+    tableConfig: ITableConfig;
+}
 
-function getServiceToStyleMap(page, unifiedConfigs) {
-    const serviceToStyleMap = {};
+interface IEntityModal {
+    serviceName?: string;
+    open: boolean;
+    stanzaName?: string;
+    mode?: Mode;
+}
+
+const getServiceToStyleMap = (page: string, unifiedConfigs: GlobalConfig) => {
+    const serviceToStyleMap: Record<string, typeof STYLE_PAGE | typeof STYLE_MODAL> = {};
     if (page === PAGE_INPUT) {
-        unifiedConfigs.pages.inputs.services.forEach((x) => {
+        const inputsPage = unifiedConfigs.pages.inputs;
+        inputsPage?.services.forEach((x) => {
             serviceToStyleMap[x.name] = x.style === STYLE_PAGE ? STYLE_PAGE : STYLE_MODAL;
         });
     } else {
@@ -29,9 +50,9 @@ function getServiceToStyleMap(page, unifiedConfigs) {
         });
     }
     return serviceToStyleMap;
-}
+};
 
-function CustomTable({
+const CustomTable: React.FC<CustomTableProps> = ({
     page,
     serviceName,
     data,
@@ -41,22 +62,25 @@ function CustomTable({
     sortDir,
     sortKey,
     tableConfig,
-}) {
-    const unifiedConfigs = getUnifiedConfigs();
-    const [entityModal, setEntityModal] = useState({ open: false });
-    const [deleteModal, setDeleteModal] = useState({ open: false });
+}) => {
+    const unifiedConfigs: GlobalConfig = getUnifiedConfigs();
+    const [entityModal, setEntityModal] = useState<IEntityModal>({ open: false });
+    const [deleteModal, setDeleteModal] = useState<IEntityModal>({ open: false });
 
     const { rowData } = useTableContext();
+    const inputsPage = unifiedConfigs.pages.inputs;
     const readonlyFieldId =
-        page === PAGE_INPUT && 'readonlyFieldId' in unifiedConfigs.pages.inputs
-            ? unifiedConfigs.pages.inputs.readonlyFieldId
+        page === PAGE_INPUT && inputsPage && 'table' in inputsPage && inputsPage.readonlyFieldId
+            ? inputsPage.readonlyFieldId
             : undefined;
     const { moreInfo, header: headers, actions } = tableConfig;
 
-    const headerMapping = {};
+    const headerMapping: Record<string, unknown> = {};
+
     headers.forEach((x) => {
         headerMapping[x.field] = x.mapping;
     });
+
     const serviceToStyleMap = useMemo(
         () => getServiceToStyleMap(page, unifiedConfigs),
         [page, unifiedConfigs]
@@ -70,10 +94,8 @@ function CustomTable({
     // and when query params are updated
     useEffect(() => {
         // Only run when tab matches serviceName or if in input page where serviceName is undefined
-        if ((tab === serviceName || serviceName === undefined) && record && !entityModal.open) {
-            const serviceKey = Object.keys(rowData).find(
-                (x) => typeof rowData[x][record] !== 'undefined'
-            );
+        if ((tab === serviceName || !serviceName) && record && !entityModal.open) {
+            const serviceKey = Object.keys(rowData).find((x) => rowData[x][record]);
             if (serviceKey) {
                 const row = rowData[serviceKey][record];
                 setEntityModal({
@@ -97,7 +119,7 @@ function CustomTable({
     };
 
     const handleEditActionClick = useCallback(
-        (selectedRow) => {
+        (selectedRow: RowDataFields) => {
             if (serviceToStyleMap[selectedRow.serviceName] === STYLE_PAGE) {
                 handleOpenPageStyleDialog(selectedRow, MODE_EDIT);
             } else {
@@ -119,7 +141,7 @@ function CustomTable({
     };
 
     const handleCloneActionClick = useCallback(
-        (selectedRow) => {
+        (selectedRow: RowDataFields) => {
             if (serviceToStyleMap[selectedRow.serviceName] === STYLE_PAGE) {
                 handleOpenPageStyleDialog(selectedRow, MODE_CLONE);
             } else {
@@ -132,12 +154,11 @@ function CustomTable({
                 });
             }
         },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [entityModal]
+        [entityModal, handleOpenPageStyleDialog, serviceToStyleMap]
     );
 
     const handleDeleteActionClick = useCallback(
-        (selectedRow) => {
+        (selectedRow: RowDataFields) => {
             setDeleteModal({
                 ...deleteModal,
                 open: true,
@@ -150,15 +171,15 @@ function CustomTable({
 
     const generateModalDialog = () => {
         if (entityModal.open) {
-            let label;
+            let label: string | undefined;
             if (page === PAGE_INPUT) {
-                const { services } = unifiedConfigs.pages.inputs;
-                label = services.find((x) => x.name === entityModal.serviceName)?.title;
-            } else if (page === 'configuration') {
+                const services = inputsPage?.services;
+                label = services?.find((x) => x.name === entityModal.serviceName)?.title;
+            } else if (page === PAGE_CONF) {
                 const { tabs } = unifiedConfigs.pages.configuration;
                 label = tabs.find((x) => x.name === entityModal.serviceName)?.title;
             }
-            return (
+            return entityModal.serviceName && entityModal.mode ? (
                 <EntityModal
                     page={page}
                     open={entityModal.open}
@@ -170,23 +191,25 @@ function CustomTable({
                         entityModal.mode === MODE_CLONE ? _(`Clone `) + label : _(`Update `) + label
                     }
                 />
-            );
+            ) : null;
         }
         return null;
     };
 
-    const generateDeleteDialog = () => (
-        <DeleteModal
-            page={page}
-            open={deleteModal.open}
-            handleRequestClose={handleDeleteClose}
-            serviceName={deleteModal.serviceName}
-            stanzaName={deleteModal.stanzaName}
-        />
-    );
+    const generateDeleteDialog = () =>
+        deleteModal.serviceName && deleteModal.stanzaName ? (
+            <DeleteModal
+                page={page}
+                open={deleteModal.open}
+                handleRequestClose={handleDeleteClose}
+                serviceName={deleteModal.serviceName}
+                stanzaName={deleteModal.stanzaName}
+            />
+        ) : null;
 
     const generateColumns = () => {
-        const column = [];
+        const column: Array<{ label: string; field: string; sortKey: string | null }> = [];
+
         if (headers && headers.length) {
             headers.forEach((item) => {
                 column.push({
@@ -213,8 +236,8 @@ function CustomTable({
                     columns.map((headData) => (
                         <Table.HeadCell
                             key={headData.field}
-                            onSort={headData.sortKey ? handleSort : null}
-                            sortKey={headData.sortKey ? headData.sortKey : null}
+                            onSort={headData.sortKey ? handleSort : undefined}
+                            sortKey={headData.sortKey ?? undefined}
                             sortDir={
                                 headData.sortKey && headData.sortKey === sortKey ? sortDir : 'none'
                             }
@@ -272,18 +295,6 @@ function CustomTable({
             {generateDeleteDialog()}
         </>
     );
-}
-
-CustomTable.propTypes = {
-    page: PropTypes.string.isRequired,
-    serviceName: PropTypes.string,
-    data: PropTypes.array.isRequired,
-    handleToggleActionClick: PropTypes.func,
-    handleOpenPageStyleDialog: PropTypes.func,
-    handleSort: PropTypes.func,
-    sortDir: PropTypes.string,
-    sortKey: PropTypes.string,
-    tableConfig: PropTypes.object.isRequired,
 };
 
 export default memo(CustomTable);
diff --git a/ui/src/components/table/TableWrapper.tsx b/ui/src/components/table/TableWrapper.tsx
index c28f812e5..1c13add42 100644
--- a/ui/src/components/table/TableWrapper.tsx
+++ b/ui/src/components/table/TableWrapper.tsx
@@ -12,26 +12,31 @@ import { PAGE_CONF, PAGE_INPUT } from '../../constants/pages';
 import { parseErrorMsg } from '../../util/messageUtil';
 import { Mode } from '../../constants/modes';
 import { GlobalConfig } from '../../types/globalConfig/globalConfig';
-import { AcceptableFormValueOrNull } from '../../types/components/shareableTypes';
 import { useTableSort } from './useTableSort';
 import { useTableContext } from '../../context/useTableContext';
 import { isFalse, isTrue } from '../../util/considerFalseAndTruthy';
 import { isReadonlyRow } from './table.utils';
+import { ITableConfig } from '../../types/globalConfig/pages';
 
 export interface ITableWrapperProps {
     page: typeof PAGE_INPUT | typeof PAGE_CONF;
-    serviceName: string;
-    handleRequestModalOpen: () => void;
-    handleOpenPageStyleDialog: (row: IRowData, mode: Mode) => void;
-    displayActionBtnAllRows: boolean;
+    serviceName?: string;
+    handleRequestModalOpen?: () => void;
+    handleOpenPageStyleDialog: (row: RowDataFields, mode: Mode) => void;
+    displayActionBtnAllRows?: boolean;
 }
 
-interface IRowData {}
+const defaultTableConfig: ITableConfig = {
+    header: [],
+    actions: [],
+    moreInfo: [],
+    customRow: {},
+};
 
 const getTableConfigAndServices = (
     page: string,
     unifiedConfigs: GlobalConfig,
-    serviceName: string
+    serviceName?: string
 ) => {
     const services =
         page === PAGE_INPUT
@@ -52,17 +57,23 @@ const getTableConfigAndServices = (
 
         return {
             services,
-            tableConfig: tableData || {},
+            tableConfig: {
+                ...(tableData || defaultTableConfig),
+            },
             readonlyFieldId: undefined,
             hideFieldId: undefined,
         };
     }
 
-    const tableConfig =
-        unifiedConfigs.pages.configuration.tabs.find((x) => x.name === serviceName)?.table || {};
+    const tableConfig = unifiedConfigs.pages.configuration.tabs.find(
+        (x) => x.name === serviceName
+    )?.table;
+
     return {
         services,
-        tableConfig,
+        tableConfig: {
+            ...(tableConfig || defaultTableConfig),
+        },
         readonlyFieldId: undefined,
         hideFieldId: undefined,
     };
@@ -231,7 +242,7 @@ const TableWrapper: React.FC<ITableWrapperProps> = ({
      */
     const findByMatchingValue = useCallback(
         (serviceData: Record<string, RowDataFields>) => {
-            const matchedRows: Record<string, AcceptableFormValueOrNull>[] = [];
+            const matchedRows: RowDataFields[] = [];
             const searchableFields: string[] = [
                 ...(headers?.map((headData) => headData.field) || []),
                 ...(moreInfo?.map((moreInfoData) => moreInfoData.field) || []),
@@ -256,7 +267,7 @@ const TableWrapper: React.FC<ITableWrapperProps> = ({
     );
 
     const getRowData = () => {
-        let allRowsData: Record<string, AcceptableFormValueOrNull>[] = [];
+        let allRowsData: RowDataFields[] = [];
         if (searchType === 'all') {
             Object.keys(rowData).forEach((key) => {
                 const newArr = searchText
diff --git a/ui/src/pages/Configuration/ConfigurationPage.jsx b/ui/src/pages/Configuration/ConfigurationPage.tsx
similarity index 61%
rename from ui/src/pages/Configuration/ConfigurationPage.jsx
rename to ui/src/pages/Configuration/ConfigurationPage.tsx
index 630d95735..c5acd5226 100644
--- a/ui/src/pages/Configuration/ConfigurationPage.jsx
+++ b/ui/src/pages/Configuration/ConfigurationPage.tsx
@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
 import { _ } from '@splunk/ui-utils/i18n';
-import TabBar from '@splunk/react-ui/TabBar';
+import TabBar, { TabBarChangeHandler } from '@splunk/react-ui/TabBar';
 import ToastMessages from '@splunk/react-toast-notifications/ToastMessages';
 import ColumnLayout from '@splunk/react-ui/ColumnLayout';
 
 import styled from 'styled-components';
+import { z } from 'zod';
 import useQuery from '../../hooks/useQuery';
 import { getUnifiedConfigs } from '../../util/util';
 import { TitleComponent, SubTitleComponent } from '../Input/InputPageStyle';
@@ -16,6 +16,7 @@ import ConfigurationTable from '../../components/ConfigurationTable';
 import OpenApiDownloadButton from '../../components/DownloadButton/OpenApiDownloadBtn';
 import SubDescription from '../../components/SubDescription/SubDescription';
 import UccCredit from '../../components/UCCCredit/UCCCredit';
+import { TabSchema } from '../../types/globalConfig/pages';
 
 const StyledHeaderControls = styled.div`
     display: inline-flex;
@@ -38,6 +39,8 @@ const Row = styled(ColumnLayout.Row)`
     }
 `;
 
+type Tab = z.infer<typeof TabSchema>;
+
 function ConfigurationPage() {
     const unifiedConfigs = getUnifiedConfigs();
     const { title, description, subDescription, tabs } = unifiedConfigs.pages.configuration;
@@ -55,7 +58,11 @@ function ConfigurationPage() {
     useEffect(() => {
         // Only change active tab when provided tab in query is specified in globalConfig
         // and if the current active tab is not same as provided in query
-        if (permittedTabNames.includes(queryTabValue) && queryTabValue !== activeTabId) {
+        if (
+            queryTabValue &&
+            permittedTabNames.includes(queryTabValue) &&
+            queryTabValue !== activeTabId
+        ) {
             setActiveTabId(queryTabValue);
         }
     }, [queryTabValue, permittedTabNames, activeTabId]);
@@ -66,22 +73,23 @@ function ConfigurationPage() {
             isComponentMounted.current = false;
         };
     }, []);
-    const handleChange = useCallback((e, { selectedTabId }) => {
-        if (isComponentMounted.current) {
+
+    const handleChange = useCallback<TabBarChangeHandler>((e, { selectedTabId }) => {
+        if (isComponentMounted.current && selectedTabId) {
             setActiveTabId(selectedTabId);
             setIsPageOpen(false);
         }
     }, []);
 
-    const updateIsPageOpen = (data) => {
+    const updateIsPageOpen = (data: boolean) => {
         if (isComponentMounted.current) {
             setIsPageOpen(data);
         }
     };
 
-    const getCustomTab = (tab) => React.createElement(CustomTab, { tab });
+    const getCustomTab = (tab: Tab) => React.createElement(CustomTab, { tab });
 
-    const getTabContent = (tab) => {
+    const getTabContent = (tab: Tab) => {
         let TabComponent;
         if (tab?.customTab) {
             TabComponent = getCustomTab(tab);
@@ -110,30 +118,35 @@ function ConfigurationPage() {
 
     return (
         <ErrorBoundary>
-            <div style={isPageOpen ? { display: 'none' } : { display: 'block' }}>
-                <ColumnLayout gutter={8}>
-                    <Row>
-                        <ColumnLayout.Column span={9}>
-                            <TitleComponent>{_(title)}</TitleComponent>
-                            <SubTitleComponent>{_(description || '')}</SubTitleComponent>
-                            <SubDescription {...subDescription} />
-                        </ColumnLayout.Column>
-                        <ColumnLayout.Column span={3} style={{ textAlignLast: 'right' }}>
-                            <StyledHeaderControls>
-                                <UccCredit />
-                                <OpenApiDownloadButton />
-                            </StyledHeaderControls>
-                        </ColumnLayout.Column>
-                    </Row>
-                </ColumnLayout>
-                <TabBar activeTabId={activeTabId} onChange={handleChange}>
-                    {tabs.map((tab) => (
-                        <TabBar.Tab key={tab.name} label={_(tab.title)} tabId={tab.name} />
-                    ))}
-                </TabBar>
-            </div>
-            {tabs.map((tab) => getTabContent(tab))}
-            <ToastMessages position="top-right" />
+            <>
+                <div style={isPageOpen ? { display: 'none' } : { display: 'block' }}>
+                    <ColumnLayout gutter={8}>
+                        <Row>
+                            <ColumnLayout.Column span={9}>
+                                <TitleComponent>{_(title)}</TitleComponent>
+                                <SubTitleComponent>{_(description || '')}</SubTitleComponent>
+                                <SubDescription
+                                    text={subDescription?.text || ''}
+                                    links={subDescription?.links}
+                                />
+                            </ColumnLayout.Column>
+                            <ColumnLayout.Column span={3} style={{ textAlignLast: 'right' }}>
+                                <StyledHeaderControls>
+                                    <UccCredit />
+                                    <OpenApiDownloadButton />
+                                </StyledHeaderControls>
+                            </ColumnLayout.Column>
+                        </Row>
+                    </ColumnLayout>
+                    <TabBar activeTabId={activeTabId} onChange={handleChange}>
+                        {tabs.map((tab) => (
+                            <TabBar.Tab key={tab.name} label={_(tab.title)} tabId={tab.name} />
+                        ))}
+                    </TabBar>
+                </div>
+                {tabs.map((tab) => getTabContent(tab))}
+                <ToastMessages position="top-right" />
+            </>
         </ErrorBoundary>
     );
 }
diff --git a/ui/src/pages/Input/InputPage.jsx b/ui/src/pages/Input/InputPage.tsx
similarity index 63%
rename from ui/src/pages/Input/InputPage.jsx
rename to ui/src/pages/Input/InputPage.tsx
index 6efd7af93..3254f8583 100644
--- a/ui/src/pages/Input/InputPage.jsx
+++ b/ui/src/pages/Input/InputPage.tsx
@@ -1,15 +1,24 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, ReactElement } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 
 import ColumnLayout from '@splunk/react-ui/ColumnLayout';
 import styled from 'styled-components';
 import ToastMessages from '@splunk/react-toast-notifications/ToastMessages';
-import TabBar from '@splunk/react-ui/TabBar';
+import TabBar, { TabBarChangeHandler } from '@splunk/react-ui/TabBar';
 import { _ } from '@splunk/ui-utils/i18n';
+import { z } from 'zod';
+import {
+    InputsPage,
+    InputsPageTable,
+    ITableConfig,
+    ServiceTable,
+    SubDescriptionType,
+    TableFullServiceSchema,
+} from '../../types/globalConfig/pages';
 import { getUnifiedConfigs } from '../../util/util';
 import { TitleComponent, SubTitleComponent } from './InputPageStyle';
-import { TableContextProvider } from '../../context/TableContext';
-import { MODE_CREATE, MODE_CLONE, MODE_EDIT } from '../../constants/modes';
+import { RowDataFields, TableContextProvider } from '../../context/TableContext';
+import { MODE_CREATE, MODE_CLONE, MODE_EDIT, Mode } from '../../constants/modes';
 import { PAGE_INPUT } from '../../constants/pages';
 import { STYLE_PAGE } from '../../constants/dialogStyles';
 import MenuInput, { ROOT_GROUP_NAME } from '../../components/MenuInput/MenuInput';
@@ -36,16 +45,51 @@ const Row = styled(ColumnLayout.Row)`
     }
 `;
 
-function InputPage() {
-    const [entity, setEntity] = useState({ open: false });
+interface EntityState {
+    open: boolean;
+    isInputPageStyle?: boolean;
+    serviceName?: string;
+    mode?: Mode;
+    formLabel?: string;
+    groupName?: string;
+    stanzaName?: string;
+}
+
+function isTableFullServiceSchema(
+    service: ServiceTable | undefined
+): service is z.infer<typeof TableFullServiceSchema> {
+    return service !== undefined && 'description' in service;
+}
+
+function isTableSchema(inputs: InputsPage): inputs is InputsPageTable {
+    return inputs !== undefined && 'table' in inputs;
+}
+
+function InputPage(): ReactElement {
+    const [entity, setEntity] = useState<EntityState>({ open: false });
     const unifiedConfigs = getUnifiedConfigs();
-    const { services, title, table, description, subDescription } = unifiedConfigs.pages.inputs;
+    const inputsPage = unifiedConfigs.pages.inputs;
+
+    let services: ServiceTable[] = [];
+    let title: string | undefined;
+    let table: ITableConfig | undefined;
+    let description: string | undefined;
+    let subDescription: SubDescriptionType | undefined;
+
+    if (inputsPage) {
+        if (isTableSchema(inputsPage)) {
+            ({ services, title, table, description, subDescription } = inputsPage);
+        } else {
+            ({ services, title } = inputsPage);
+        }
+    }
 
     // check if the tabs feature is enabled or not.
     const isTabs = !table;
 
-    const [activeTabId, setActiveTabId] = useState(services[0].name);
+    const [activeTabId, setActiveTabId] = useState<string>(services[0].name);
     const selectedTab = services.find((x) => x.name === activeTabId);
+    const isTableFullSchema = isTableFullServiceSchema(selectedTab);
 
     const PERMITTED_MODES = [MODE_CLONE, MODE_CREATE, MODE_EDIT];
     const permittedTabNames = services.map((service) => service.name);
@@ -54,24 +98,28 @@ function InputPage() {
     const query = useQuery();
 
     useEffect(() => {
-        // eslint-disable-next-line no-use-before-define
         setServiceEntity();
-        // eslint-disable-next-line no-use-before-define
         setActiveTab();
-    }, [useLocation().search]); // eslint-disable-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [useLocation().search]);
 
-    const setServiceEntity = () => {
+    const setServiceEntity = (): void => {
         const service = services.find((x) => x.name === query.get('service'));
         // Run only when service and action/mode is valid and modal/page is not open
-        if (query && service && PERMITTED_MODES.includes(query.get('action')) && !entity.open) {
+        if (
+            query &&
+            service &&
+            PERMITTED_MODES.includes(query.get('action') || '') &&
+            !entity.open
+        ) {
             // run when mode is not create and previous state info is available
             if (query.get('action') !== MODE_CREATE && entity.stanzaName) {
                 setEntity({
                     ...entity,
                     open: true,
                     isInputPageStyle: true,
-                    serviceName: query.get('service'),
-                    mode: query.get('action'),
+                    serviceName: query.get('service') || '',
+                    mode: (query.get('action') as Mode) || '',
                 });
             } else {
                 // If previous state information is unavailable, create mode will be used by default
@@ -79,7 +127,7 @@ function InputPage() {
                     ...entity,
                     open: true,
                     isInputPageStyle: true,
-                    serviceName: query.get('service'),
+                    serviceName: query.get('service') || '',
                     formLabel: `Create ${service?.title}`,
                     mode: MODE_CREATE,
                 });
@@ -94,17 +142,25 @@ function InputPage() {
         }
     };
 
-    const setActiveTab = () => {
-        if (query && permittedTabNames.includes(query.get('service'))) {
-            setActiveTabId(query.get('service'));
+    const setActiveTab = (): void => {
+        if (query && permittedTabNames.includes(query.get('service') || '')) {
+            setActiveTabId(query.get('service') || '');
         }
     };
 
     // handle modal/page open request on create/add entity button
-    const handleRequestOpen = ({ serviceName, groupName, input }) => {
+    const handleRequestOpen = ({
+        serviceName,
+        groupName,
+        input,
+    }: {
+        serviceName: string;
+        groupName?: string;
+        input?: string;
+    }): void => {
         const service = services.find((x) => x.name === serviceName);
-        const serviceTitle = service.title;
-        const isInputPageStyle = service.style === STYLE_PAGE;
+        const serviceTitle = service?.title;
+        const isInputPageStyle = service?.style === STYLE_PAGE;
 
         setEntity({
             ...entity,
@@ -131,25 +187,26 @@ function InputPage() {
     };
 
     // handle close/cancel/back request in add/create modal component
-    const handleModalDialogClose = () => {
+    const handleModalDialogClose = (): void => {
         setEntity({ ...entity, open: false });
     };
 
     // generate modal style dialog
-    const generateModalDialog = () => (
-        <EntityModal
-            page={PAGE_INPUT}
-            open={entity.open}
-            handleRequestClose={handleModalDialogClose}
-            serviceName={entity.serviceName}
-            mode={MODE_CREATE}
-            formLabel={entity.formLabel}
-            groupName={entity.groupName}
-        />
-    );
+    const generateModalDialog = () =>
+        entity.serviceName && (
+            <EntityModal
+                page={PAGE_INPUT}
+                open={entity.open}
+                handleRequestClose={handleModalDialogClose}
+                serviceName={entity.serviceName}
+                mode={MODE_CREATE}
+                formLabel={entity.formLabel}
+                groupName={entity.groupName}
+            />
+        );
 
     // handle clone/edit request per row from table for page style dialog
-    const handleOpenPageStyleDialog = (row, mode) => {
+    const handleOpenPageStyleDialog = (row: RowDataFields, mode: Mode): void => {
         const label = services.find((x) => x.name === row.serviceName)?.title;
         setEntity({
             ...entity,
@@ -167,7 +224,7 @@ function InputPage() {
     };
 
     // handle close request for page style dialog
-    const handlePageDialogClose = () => {
+    const handlePageDialogClose = (): void => {
         setEntity({ ...entity, open: false });
         if (!isTabs) {
             query.delete('service');
@@ -177,34 +234,35 @@ function InputPage() {
     };
 
     // generate page style dialog
-    const generatePageDialog = () => (
-        <EntityPage
-            open={entity.open}
-            handleRequestClose={handlePageDialogClose}
-            serviceName={entity.serviceName}
-            stanzaName={entity.stanzaName}
-            mode={entity.mode}
-            formLabel={entity.formLabel}
-            page={PAGE_INPUT}
-            groupName={entity.groupName}
-        />
-    );
+    const generatePageDialog = () =>
+        entity.serviceName && entity.mode ? (
+            <EntityPage
+                handleRequestClose={handlePageDialogClose}
+                serviceName={entity.serviceName}
+                stanzaName={entity.stanzaName}
+                mode={entity.mode}
+                formLabel={entity.formLabel}
+                page={PAGE_INPUT}
+                groupName={entity.groupName}
+            />
+        ) : null;
 
-    const onTabChange = useCallback(
+    const onTabChange = useCallback<TabBarChangeHandler>(
         (e, { selectedTabId }) => {
-            setActiveTabId(selectedTabId);
-            query.delete('action');
-            query.set('service', selectedTabId);
-            navigate({ search: query.toString() });
-            // eslint-disable-next-line react-hooks/exhaustive-deps
+            if (selectedTabId) {
+                setActiveTabId(selectedTabId);
+                query.delete('action');
+                query.set('service', selectedTabId);
+                navigate({ search: query.toString() });
+            }
         },
         [activeTabId] // eslint-disable-line react-hooks/exhaustive-deps
     );
 
     return (
         <ErrorBoundary>
-            <TableContextProvider value={null}>
-                {entity.isInputPageStyle && entity.open ? generatePageDialog() : null}{' '}
+            <TableContextProvider>
+                {entity.isInputPageStyle && entity.open ? generatePageDialog() : null}
                 <div
                     style={
                         entity.isInputPageStyle && entity.open
@@ -214,14 +272,22 @@ function InputPage() {
                 >
                     <ColumnLayout gutter={8}>
                         <Row>
-                            <ColumnLayout.Column className={isTabs && 'title_menu_column'} span={9}>
+                            <ColumnLayout.Column
+                                className={isTabs ? 'title_menu_column' : ''}
+                                span={9}
+                            >
                                 <TitleComponent>
-                                    {isTabs ? _(selectedTab.title) : _(title || '')}
+                                    {isTabs ? _(selectedTab?.title || '') : _(title || '')}
                                 </TitleComponent>
-                                <SubTitleComponent className={isTabs && 'page_subtitle'}>
-                                    {isTabs ? _(selectedTab.description) : _(description || '')}
+                                <SubTitleComponent className={isTabs ? 'pageSubtitle' : undefined}>
+                                    {isTabs
+                                        ? _(isTableFullSchema ? selectedTab?.description : '')
+                                        : _(description || '')}
                                 </SubTitleComponent>
-                                <SubDescription {...subDescription} />
+                                <SubDescription
+                                    text={subDescription?.text || ''}
+                                    links={subDescription?.links}
+                                />
                             </ColumnLayout.Column>
                             <ColumnLayout.Column
                                 className={isTabs ? 'title_menu_column' : 'dropdown'}
diff --git a/ui/src/types/globalConfig/pages.ts b/ui/src/types/globalConfig/pages.ts
index 3d7b12e9b..e589b9785 100644
--- a/ui/src/types/globalConfig/pages.ts
+++ b/ui/src/types/globalConfig/pages.ts
@@ -149,6 +149,9 @@ export const InputsPageTableSchema = z
     })
     .strict();
 
+const InputsPageSchema = z.union([InputsPageRegular, InputsPageTableSchema]).optional();
+const ServiceTableSchema = z.union([TableFullServiceSchema, TableLessServiceSchema]);
+
 export const pages = z.object({
     configuration: z.object({
         title: z.string(),
@@ -156,7 +159,7 @@ export const pages = z.object({
         subDescription: SubDescriptionSchema,
         tabs: z.array(TabSchema).min(1),
     }),
-    inputs: z.union([InputsPageRegular, InputsPageTableSchema]).optional(),
+    inputs: InputsPageSchema,
     dashboard: z
         .object({
             panels: z.array(z.object({ name: z.string() })).min(1),
@@ -165,3 +168,10 @@ export const pages = z.object({
         })
         .optional(),
 });
+
+// Define the types based on the Zod schemas
+export type InputsPage = z.infer<typeof InputsPageSchema>;
+export type InputsPageTable = z.infer<typeof InputsPageTableSchema>;
+export type ServiceTable = z.infer<typeof ServiceTableSchema>;
+export type SubDescriptionType = z.infer<typeof SubDescriptionSchema>;
+export type ITableConfig = z.infer<typeof TableSchema>;
diff --git a/ui/src/util/configManager.jsx b/ui/src/util/configManager.tsx
similarity index 70%
rename from ui/src/util/configManager.jsx
rename to ui/src/util/configManager.tsx
index 267c2d87d..c1ded8def 100644
--- a/ui/src/util/configManager.jsx
+++ b/ui/src/util/configManager.tsx
@@ -1,17 +1,40 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, ReactNode } from 'react';
 
 import { getFormattedMessage } from './messageUtil';
 import { setMetaInfo, setUnifiedConfig } from './util';
 import { loadGlobalConfig } from './script';
 import ErrorModal from '../components/ErrorModal/ErrorModal';
+import { GlobalConfig } from '../types/globalConfig/globalConfig';
 
-class ConfigManager extends Component {
-    constructor(props) {
+interface ConfigManagerProps {
+    children: (state: ConfigManagerState) => ReactNode;
+}
+
+interface ConfigManagerState {
+    unifiedConfig?: GlobalConfig;
+    appData: IAppData;
+    loading: boolean;
+    syntaxError: boolean;
+    fileNotFoundError?: boolean;
+}
+
+interface IAppData {
+    app: string;
+    custom_rest: string;
+    nullStr: 'NULL';
+    stanzaPrefix: string;
+}
+
+class ConfigManager extends Component<ConfigManagerProps, ConfigManagerState> {
+    constructor(props: ConfigManagerProps) {
         super(props);
         this.state = {
-            unifiedConfig: {},
-            appData: {},
+            appData: {
+                app: '',
+                custom_rest: '',
+                nullStr: 'NULL',
+                stanzaPrefix: '',
+            },
             loading: true,
             syntaxError: false,
         };
@@ -24,7 +47,7 @@ class ConfigManager extends Component {
                 // The configuration object should be attached to global object,
                 // before executing the code below.
                 // this.unifiedConfig = window.__globalConfig;
-                this.attchPropertie(val);
+                this.attachProperties(val);
             })
             .catch((err) => {
                 if (err && err.name === 'SyntaxError') {
@@ -38,9 +61,9 @@ class ConfigManager extends Component {
             });
     }
 
-    attchPropertie(unifiedConfig) {
+    attachProperties(unifiedConfig: GlobalConfig) {
         const { meta } = unifiedConfig;
-        const appData = {
+        const appData: IAppData = {
             app: meta.name,
             custom_rest: meta.restRoot,
             nullStr: 'NULL',
@@ -75,8 +98,4 @@ class ConfigManager extends Component {
     }
 }
 
-ConfigManager.propTypes = {
-    children: PropTypes.any,
-};
-
 export default ConfigManager;