diff --git a/chaoscenter/web/src/components/SettingsWrapper/SettingsWrapper.tsx b/chaoscenter/web/src/components/SettingsWrapper/SettingsWrapper.tsx
index 9bd37612ab1..8f5ba242793 100644
--- a/chaoscenter/web/src/components/SettingsWrapper/SettingsWrapper.tsx
+++ b/chaoscenter/web/src/components/SettingsWrapper/SettingsWrapper.tsx
@@ -45,8 +45,8 @@ export default function SettingsWrapper(props: SettingsWrapperProps): React.Reac
         </Container>
         <Layout.Horizontal style={{ flexGrow: 1 }} height={'100%'}>
           <Container
-            width={'30%'}
-            style={{ minWidth: 420, position: 'relative' }}
+            width={'20%'}
+            style={{ minWidth: 350, position: 'relative' }}
             height={'100%'}
             background={Color.PRIMARY_1}
             padding={{ top: 'xxlarge', right: 'medium', bottom: 'xxlarge', left: 'medium' }}
diff --git a/chaoscenter/web/src/controllers/Environments/EditEnvironment.tsx b/chaoscenter/web/src/controllers/Environments/EditEnvironment.tsx
index f810b24de07..ff8d87ffef5 100644
--- a/chaoscenter/web/src/controllers/Environments/EditEnvironment.tsx
+++ b/chaoscenter/web/src/controllers/Environments/EditEnvironment.tsx
@@ -8,13 +8,11 @@ import type { RefetchEnvironments } from './types';
 interface EditEnvironmentControllerProps {
   environmentID: string;
   handleClose: () => void;
-  isEditOpen: boolean;
 }
 
 export default function EditEnvironmentController({
   environmentID,
   handleClose,
-  isEditOpen,
   refetchEnvironments
 }: EditEnvironmentControllerProps & RefetchEnvironments): React.ReactElement {
   const { showError, showSuccess } = useToaster();
@@ -36,12 +34,11 @@ export default function EditEnvironmentController({
 
   return (
     <CreateEnvironment
+      closeModal={handleClose}
       loading={{
         getEnvironment: getEnvironmentLoading
       }}
-      isOpen={isEditOpen}
       editable={true}
-      setIsOpen={handleClose}
       environmentID={environmentID}
       mutation={{ updateEnvironment: editEnvironmentMutation }}
       existingEnvironment={environmentDetails?.getEnvironment}
diff --git a/chaoscenter/web/src/controllers/Environments/Environment.tsx b/chaoscenter/web/src/controllers/Environments/Environment.tsx
index 15b64e98b70..2e8a0114396 100644
--- a/chaoscenter/web/src/controllers/Environments/Environment.tsx
+++ b/chaoscenter/web/src/controllers/Environments/Environment.tsx
@@ -19,14 +19,11 @@ const EnvironmentController: React.FC = () => {
 
   const setPage = (newPage: number): void => updateSearchParams({ page: newPage.toString() });
   const setLimit = (newLimit: number): void => updateSearchParams({ limit: newLimit.toString() });
-  // const resetPage = (): void => {
-  //   page !== 0 && updateSearchParams({ page: '0' });
-  // };
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
   const {
     data: envData,
     loading: listEnvironmentLoading,
-    refetch: refetchEnvironments
+    refetch: refetchEnvironments,
+    error: listEnvironmentError
   } = listEnvironment({
     projectID: scope.projectID,
     environmentIDs: [],
@@ -73,9 +70,7 @@ const EnvironmentController: React.FC = () => {
 
   return (
     <EnvironmentListView
-      isModalOpen={isModalOpen}
-      setIsModalOpen={setIsModalOpen}
-      loading={{ listEnvironments: listEnvironmentLoading }}
+      loading={{ listEnvironments: listEnvironmentLoading || listEnvironmentError?.message !== undefined }}
       environmentTableData={environmentTableData}
       refetchEnvironments={refetchEnvironments}
       mutation={{
diff --git a/chaoscenter/web/src/controllers/KubernetesChaosInfrastructure/KubernetesChaosInfrastructure.tsx b/chaoscenter/web/src/controllers/KubernetesChaosInfrastructure/KubernetesChaosInfrastructure.tsx
index 38378d0f115..5825c58ff3b 100644
--- a/chaoscenter/web/src/controllers/KubernetesChaosInfrastructure/KubernetesChaosInfrastructure.tsx
+++ b/chaoscenter/web/src/controllers/KubernetesChaosInfrastructure/KubernetesChaosInfrastructure.tsx
@@ -25,7 +25,7 @@ export default function KubernetesChaosInfrastructureController(): React.ReactEl
     data,
     loading: listChaosInfrastructureLoading,
     error: listChaosInfrastructureError,
-    refetch,
+    refetch: listInfrastructureRefetch,
     startPolling,
     stopPolling
   } = listChaosInfra({
@@ -56,7 +56,7 @@ export default function KubernetesChaosInfrastructureController(): React.ReactEl
   // Mutation is passed down, will be called on user click event
   const [deleteChaosInfrastructureMutation] = deleteKubernetesChaosInfra({
     onCompleted: () => {
-      refetch();
+      listInfrastructureRefetch();
       setPage(0);
       showSuccess(getString('deleteSuccess'));
     },
@@ -78,8 +78,6 @@ export default function KubernetesChaosInfrastructureController(): React.ReactEl
     );
   };
 
-  //TODO pass down refetch() to call it in done buttons
-
   return (
     <KubernetesChaosInfrastructureView
       chaosInfrastructures={InfrastructureData.length <= 0 && searchTerm == '' ? undefined : InfrastructureData}
@@ -91,6 +89,9 @@ export default function KubernetesChaosInfrastructureController(): React.ReactEl
         getEnvironmentError: getEnvironmentError,
         listChaosInfrastructureError: listChaosInfrastructureError
       }}
+      refetch={{
+        listChaosInfra: listInfrastructureRefetch
+      }}
       startPolling={startPolling}
       stopPolling={stopPolling}
       environmentID={environmentID}
diff --git a/chaoscenter/web/src/strings/strings.en.yaml b/chaoscenter/web/src/strings/strings.en.yaml
index 65b5903fdf7..c9fdc0299b4 100644
--- a/chaoscenter/web/src/strings/strings.en.yaml
+++ b/chaoscenter/web/src/strings/strings.en.yaml
@@ -324,7 +324,12 @@ enterYourName: Enter your name
 enterYourPassword: Enter your password
 enterYourUsername: Enter your username
 environment: Environment
+environmentDescription: >-
+  An environment is the place where you will deploy your cluster for chaos
+  testing
 environmentError: It seems there was an error fetching the Environment Details.
+environmentNameIsRequired: Environment Name is a required field
+environmentType: Environment Type
 environments: Environments
 error: Error
 errorApplyChanges: Error in Applying the Changes. Please enter correct input values.
diff --git a/chaoscenter/web/src/strings/types.ts b/chaoscenter/web/src/strings/types.ts
index f6819888ed8..bd45af1161b 100644
--- a/chaoscenter/web/src/strings/types.ts
+++ b/chaoscenter/web/src/strings/types.ts
@@ -275,7 +275,10 @@ export interface StringsMap {
   'enterYourPassword': unknown
   'enterYourUsername': unknown
   'environment': unknown
+  'environmentDescription': unknown
   'environmentError': unknown
+  'environmentNameIsRequired': unknown
+  'environmentType': unknown
   'environments': unknown
   'error': unknown
   'errorApplyChanges': unknown
diff --git a/chaoscenter/web/src/views/Environments/EnvironmentList/CreateEnvironment.tsx b/chaoscenter/web/src/views/Environments/EnvironmentList/CreateEnvironment.tsx
index 86e11b43146..4ab1b4c4df5 100644
--- a/chaoscenter/web/src/views/Environments/EnvironmentList/CreateEnvironment.tsx
+++ b/chaoscenter/web/src/views/Environments/EnvironmentList/CreateEnvironment.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonVariation, CardSelect, Container, Dialog, FormInput, Layout, Text } from '@harnessio/uicore';
+import { Button, ButtonVariation, CardSelect, Container, FormInput, Layout, Text } from '@harnessio/uicore';
 import { FontVariation, Color } from '@harnessio/design-system';
 import { Form, Formik } from 'formik';
 import React from 'react';
@@ -25,11 +25,10 @@ interface CreateEnvironmentData {
 }
 
 interface CreateEnvironmentProps {
-  isOpen: boolean;
   editable?: boolean;
   environmentID?: string;
   existingEnvironment?: Environment;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  closeModal: () => void;
   mutation: {
     createEnvironment?: MutationFunction<CreateEnvironmentResponse, CreateEnvironmentRequest>;
     updateEnvironment?: MutationFunction<string, UpdateEnvironmentRequest>;
@@ -40,13 +39,12 @@ interface CreateEnvironmentProps {
 }
 
 export default function CreateEnvironment({
-  isOpen,
   editable,
-  setIsOpen,
   environmentID,
   mutation,
   existingEnvironment,
-  loading
+  loading,
+  closeModal
 }: CreateEnvironmentProps): React.ReactElement {
   const { getString } = useStrings();
   const scope = getScope();
@@ -69,122 +67,106 @@ export default function CreateEnvironment({
   ];
 
   return (
-    <Dialog
-      isOpen={isOpen}
-      enforceFocus={false}
-      canEscapeKeyClose
-      canOutsideClickClose
-      onClose={
-        /* istanbul ignore next*/ () => {
-          setIsOpen(false);
-        }
-      }
-      isCloseButtonShown
-      className={css.dialogStylesEnv}
-    >
-      <Layout.Vertical height={'100%'} padding="small">
-        <Loader loading={loading?.getEnvironment}>
-          <Formik<CreateEnvironmentData>
-            initialValues={initialValues}
-            onSubmit={data => {
-              !editable
-                ? mutation.createEnvironment &&
-                  mutation
-                    .createEnvironment({
-                      variables: {
-                        projectID: scope.projectID,
-                        request: {
-                          environmentID: data.id,
-                          name: data.name,
-                          description: data.description,
-                          tags: data.tags,
-                          type: data.type
-                        }
-                      }
-                    })
-                    .then(() => setIsOpen(false))
-                : mutation.updateEnvironment &&
-                  environmentID &&
-                  mutation.updateEnvironment({
+    <Layout.Vertical height={'100%'} padding="small">
+      <Loader loading={loading?.getEnvironment}>
+        <Formik<CreateEnvironmentData>
+          initialValues={initialValues}
+          onSubmit={data => {
+            !editable
+              ? mutation.createEnvironment &&
+                mutation
+                  .createEnvironment({
                     variables: {
                       projectID: scope.projectID,
                       request: {
-                        environmentID: environmentID,
+                        environmentID: data.id,
                         name: data.name,
                         description: data.description,
                         tags: data.tags,
                         type: data.type
                       }
                     }
-                  });
-            }}
-            validationSchema={Yup.object().shape({
-              name: Yup.string().trim().required('Environment Name is a required field')
-            })}
-          >
-            {formikProps => {
-              return (
-                <Form style={{ height: '100%' }}>
-                  <Layout.Vertical height={'100%'}>
-                    <Text font={{ variation: FontVariation.H3 }} color={Color.GREY_800} margin={{ bottom: 'small' }}>
-                      {editable ? 'Edit Environment' : 'New Environment'}
-                    </Text>
-                    <Text color={Color.GREY_700} margin={{ bottom: 'large' }}>
-                      An environment is the place where you will deploy your cluster for chaos testing
-                    </Text>
-                    <div className={css.maxInputNameId}>
-                      <FormInput.InputWithIdentifier
-                        inputName="name"
-                        idName="id"
-                        isIdentifierEditable={editable ? false : true}
-                        inputLabel="Environment Name"
-                        inputGroupProps={{
-                          placeholder: 'Environment Name',
-                          className: css.maxWidthFormInput
-                        }}
-                      />
-                    </div>
-                    <DescriptionTags formikProps={formikProps} className={css.maxWidthFormInput} />
-                    {/* <FlexExpander /> */}
-
-                    <Text font={{ variation: FontVariation.H3 }} color={Color.GREY_800} margin={{ bottom: 'large' }}>
-                      Environment Type
-                    </Text>
-                    <CardSelect
-                      selected={environmentTypes.find(objective => objective._cardName === formikProps.values.type)}
-                      data={environmentTypes}
-                      onChange={key => {
-                        formikProps.setFieldValue('type', key._cardName);
+                  })
+                  .then(() => closeModal())
+              : mutation.updateEnvironment &&
+                environmentID &&
+                mutation.updateEnvironment({
+                  variables: {
+                    projectID: scope.projectID,
+                    request: {
+                      environmentID: environmentID,
+                      name: data.name,
+                      description: data.description,
+                      tags: data.tags,
+                      type: data.type
+                    }
+                  }
+                });
+          }}
+          validationSchema={Yup.object().shape({
+            name: Yup.string().trim().required(getString('environmentNameIsRequired'))
+          })}
+        >
+          {formikProps => {
+            return (
+              <Form style={{ height: '100%' }}>
+                <Layout.Vertical height={'100%'}>
+                  <Text font={{ variation: FontVariation.H3 }} color={Color.GREY_800} margin={{ bottom: 'small' }}>
+                    {editable ? 'Edit Environment' : 'New Environment'}
+                  </Text>
+                  <Text color={Color.GREY_700} margin={{ bottom: 'large' }}>
+                    {getString('environmentDescription')}
+                  </Text>
+                  <div className={css.maxInputNameId}>
+                    <FormInput.InputWithIdentifier
+                      inputName="name"
+                      idName="id"
+                      isIdentifierEditable={editable ? false : true}
+                      inputLabel="Environment Name"
+                      inputGroupProps={{
+                        placeholder: 'Environment Name',
+                        className: css.maxWidthFormInput
                       }}
-                      cornerSelected
-                      className={css.cardContainer}
-                      renderItem={item => (
-                        <Container className={css.card} flex={{ justifyContent: 'center', alignItems: 'center' }}>
-                          <Text font={{ variation: FontVariation.BODY, align: 'center' }}>{item.name}</Text>
-                        </Container>
-                      )}
                     />
-                    <Layout.Horizontal flex={{ justifyContent: 'flex-start' }} spacing={'medium'}>
-                      <Button
-                        disabled={false}
-                        onClick={() => setIsOpen(false)}
-                        variation={ButtonVariation.SECONDARY}
-                        text={getString('cancel')}
-                      />
-                      <Button
-                        type="submit"
-                        variation={ButtonVariation.PRIMARY}
-                        text={getString('save')}
-                        onClick={() => formikProps.handleSubmit()}
-                      />
-                    </Layout.Horizontal>
-                  </Layout.Vertical>
-                </Form>
-              );
-            }}
-          </Formik>
-        </Loader>
-      </Layout.Vertical>
-    </Dialog>
+                  </div>
+                  <DescriptionTags formikProps={formikProps} className={css.maxWidthFormInput} />
+                  <Text font={{ variation: FontVariation.H3 }} color={Color.GREY_800} margin={{ bottom: 'large' }}>
+                    {getString('environmentType')}
+                  </Text>
+                  <CardSelect
+                    selected={environmentTypes.find(objective => objective._cardName === formikProps.values.type)}
+                    data={environmentTypes}
+                    onChange={key => {
+                      formikProps.setFieldValue('type', key._cardName);
+                    }}
+                    cornerSelected
+                    className={css.cardContainer}
+                    renderItem={item => (
+                      <Container className={css.card} flex={{ justifyContent: 'center', alignItems: 'center' }}>
+                        <Text font={{ variation: FontVariation.BODY, align: 'center' }}>{item.name}</Text>
+                      </Container>
+                    )}
+                  />
+                  <Layout.Horizontal flex={{ justifyContent: 'flex-start' }} spacing={'medium'}>
+                    <Button
+                      disabled={false}
+                      onClick={() => closeModal()}
+                      variation={ButtonVariation.SECONDARY}
+                      text={getString('cancel')}
+                    />
+                    <Button
+                      type="submit"
+                      variation={ButtonVariation.PRIMARY}
+                      text={getString('save')}
+                      onClick={() => formikProps.handleSubmit()}
+                    />
+                  </Layout.Horizontal>
+                </Layout.Vertical>
+              </Form>
+            );
+          }}
+        </Formik>
+      </Loader>
+    </Layout.Vertical>
   );
 }
diff --git a/chaoscenter/web/src/views/Environments/EnvironmentList/EnvironmentsList.tsx b/chaoscenter/web/src/views/Environments/EnvironmentList/EnvironmentsList.tsx
index 34c443ba205..13124d84bf4 100644
--- a/chaoscenter/web/src/views/Environments/EnvironmentList/EnvironmentsList.tsx
+++ b/chaoscenter/web/src/views/Environments/EnvironmentList/EnvironmentsList.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Layout, TableV2 } from '@harnessio/uicore';
+import { Layout, TableV2, useToggleOpen, Dialog } from '@harnessio/uicore';
 import type { Column, Row } from 'react-table';
 import { useHistory } from 'react-router-dom';
 import type { MutationFunction } from '@apollo/client';
@@ -23,11 +23,10 @@ import type {
 import CreateEnvironment from './CreateEnvironment';
 import { MenuCell } from './EnvironmentsTableMenu';
 import { EnvironmentName, EnvironmentTypes, LastUpdatedBy } from '../EnvironmentsListColumns/EnvironmentsListColumns';
+import css from './EnvironmentsList.module.scss';
 
 interface EnvironmentListViewProps {
   environmentTableData: EnvironmentDetailsTableProps | undefined;
-  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  isModalOpen: boolean;
   loading: {
     listEnvironments: boolean;
   };
@@ -42,13 +41,12 @@ export default function EnvironmentListView({
   loading,
   environmentTableData,
   refetchEnvironments,
-  setIsModalOpen,
-  isModalOpen,
   mutation
 }: EnvironmentListViewProps & RefetchEnvironments): React.ReactElement {
   const { getString } = useStrings();
   const history = useHistory();
   const paths = useRouteWithBaseUrl();
+  const { isOpen, open, close } = useToggleOpen();
 
   useDocumentTitle(getString('environments'));
 
@@ -99,10 +97,26 @@ export default function EnvironmentListView({
               iconProps={{ size: 10 }}
               text="New Environment"
               permission={PermissionGroup.EDITOR}
-              onClick={() => {
-                setIsModalOpen(true);
-              }}
+              onClick={() => open()}
             />
+            {isOpen && (
+              <Dialog
+                isOpen={isOpen}
+                canOutsideClickClose={false}
+                canEscapeKeyClose={false}
+                onClose={() => close()}
+                isCloseButtonShown
+                className={css.dialogStylesEnv}
+              >
+                <CreateEnvironment
+                  closeModal={close}
+                  mutation={{
+                    createEnvironment: mutation.createEnvironment,
+                    updateEnvironment: mutation.updateEnvironment
+                  }}
+                />
+              </Dialog>
+            )}
           </Layout.Horizontal>
         </Layout.Horizontal>
       }
@@ -115,13 +129,6 @@ export default function EnvironmentListView({
           message: getString('noEnvironmentFoundMessage')
         }}
       >
-        {isModalOpen && (
-          <CreateEnvironment
-            isOpen={isModalOpen}
-            setIsOpen={setIsModalOpen}
-            mutation={{ createEnvironment: mutation.createEnvironment, updateEnvironment: mutation.updateEnvironment }}
-          />
-        )}
         <TableV2<EnvironmentDetails>
           columns={envColumns}
           sortable
diff --git a/chaoscenter/web/src/views/Environments/EnvironmentList/EnvironmentsTableMenu.tsx b/chaoscenter/web/src/views/Environments/EnvironmentList/EnvironmentsTableMenu.tsx
index 83f8f4ae281..410c17db01f 100644
--- a/chaoscenter/web/src/views/Environments/EnvironmentList/EnvironmentsTableMenu.tsx
+++ b/chaoscenter/web/src/views/Environments/EnvironmentList/EnvironmentsTableMenu.tsx
@@ -52,12 +52,18 @@ export const MenuCell = ({
         )}
       </Dialog>
       {isEditOpen && (
-        <EditEnvironmentController
-          isEditOpen={isEditOpen}
-          handleClose={hideEditModal}
-          environmentID={data.environmentID}
-          refetchEnvironments={refetchEnvironments}
-        />
+        <Dialog
+          isOpen={isEditOpen}
+          canOutsideClickClose={false}
+          canEscapeKeyClose={false}
+          onClose={() => hideEditModal()}
+        >
+          <EditEnvironmentController
+            handleClose={hideEditModal}
+            environmentID={data.environmentID}
+            refetchEnvironments={refetchEnvironments}
+          />
+        </Dialog>
       )}
     </Layout.Vertical>
   );
diff --git a/chaoscenter/web/src/views/KubernetesChaosInfrastructure/KubernetesChaosInfrastructure.tsx b/chaoscenter/web/src/views/KubernetesChaosInfrastructure/KubernetesChaosInfrastructure.tsx
index 9c49e187f1d..2e57ec7903e 100644
--- a/chaoscenter/web/src/views/KubernetesChaosInfrastructure/KubernetesChaosInfrastructure.tsx
+++ b/chaoscenter/web/src/views/KubernetesChaosInfrastructure/KubernetesChaosInfrastructure.tsx
@@ -1,4 +1,4 @@
-import type { ApolloError, MutationFunction } from '@apollo/client';
+import type { ApolloError, ApolloQueryResult, MutationFunction } from '@apollo/client';
 import { Color, FontVariation } from '@harnessio/design-system';
 import { Button, Container, ExpandingSearchInput, FlexExpander, Layout, Page, Text } from '@harnessio/uicore';
 import React from 'react';
@@ -6,7 +6,12 @@ import deployAgent from '@images/deployAgent.svg';
 import noFilteredData from '@images/noFilteredData.svg';
 import { useStrings } from '@strings';
 import type { KubernetesChaosInfrastructure } from '@api/entities';
-import type { DeleteKubernetesChaosInfraRequest, DeleteKubernetesChaosInfraResponse } from '@api/core';
+import type {
+  DeleteKubernetesChaosInfraRequest,
+  DeleteKubernetesChaosInfraResponse,
+  ListKubernetesChaosInfrastructureRequest,
+  ListKubernetesChaosInfrastructureResponse
+} from '@api/core';
 import Loader from '@components/Loader';
 import ChaosInfrastructureHeader from '@components/ChaosInfrastructureHeader';
 import KubernetesChaosInfrastructureTableView from '@views/KubernetesChaosInfrastructureTable';
@@ -26,6 +31,11 @@ interface KubernetesChaosInfrastructureViewProps {
     getEnvironmentError: ApolloError | undefined;
     listChaosInfrastructureError: ApolloError | undefined;
   };
+  refetch: {
+    listChaosInfra: (
+      variables?: Partial<ListKubernetesChaosInfrastructureRequest> | undefined
+    ) => Promise<ApolloQueryResult<ListKubernetesChaosInfrastructureResponse>>;
+  };
   environmentID: string;
   deleteChaosInfrastructureMutation: MutationFunction<
     DeleteKubernetesChaosInfraResponse,
@@ -50,37 +60,20 @@ export default function KubernetesChaosInfrastructureView({
   searchTerm,
   setSearchTerm,
   totalInfrastructures,
-  pagination
+  pagination,
+  refetch
 }: KubernetesChaosInfrastructureViewProps): React.ReactElement {
   const { getString } = useStrings();
   const paths = useRouteWithBaseUrl();
 
-  // if (error.getEnvironmentError?.response?.status === 400) {
-  //   return (
-  //     <GenericErrorHandler
-  //       errStatusCode={400}
-  //       errorMessage={getString('genericResourceNotFoundError', {
-  //         resource: getString('environment'),
-  //         resourceID: environmentDetails?.environment?.name ?? environmentID,
-  //         projectID: scope.projectID
-  //       })}
-  //     />
-  //   );
-  // }
-
-  // if (error.getEnvironmentError !== undefined || error.listChaosInfrastructureError !== undefined) {
-  //   return (
-  //     <GenericErrorHandler
-  //       errStatusCode={error.getEnvironmentError?.response?.status}
-  //       errorMessage={error.getEnvironmentError?.message}
-  //     />
-  //   );
-  // }
-
   const subHeader = (
     <Layout.Horizontal flex={{ justifyContent: 'space-between' }} width={'100%'}>
       <Layout.Horizontal spacing="medium">
-        <KubernetesChaosInfrastructureCreationModalView stopPolling={stopPolling} startPolling={startPolling} />
+        <KubernetesChaosInfrastructureCreationModalView
+          refetch={refetch}
+          stopPolling={stopPolling}
+          startPolling={startPolling}
+        />
       </Layout.Horizontal>
       <Layout.Horizontal flex={{ alignItems: 'center' }}>
         <ExpandingSearchInput
@@ -149,6 +142,7 @@ export default function KubernetesChaosInfrastructureView({
                     {getString('chaosInfrastructureDesc')}
                   </Text>
                   <KubernetesChaosInfrastructureCreationModalView
+                    refetch={refetch}
                     stopPolling={stopPolling}
                     startPolling={startPolling}
                   />
diff --git a/chaoscenter/web/src/views/KubernetesChaosInfrastructureCreationModal/KubernetesChaosInfrastructureCreationModal.tsx b/chaoscenter/web/src/views/KubernetesChaosInfrastructureCreationModal/KubernetesChaosInfrastructureCreationModal.tsx
index 4768ba04509..6d6d86bb300 100644
--- a/chaoscenter/web/src/views/KubernetesChaosInfrastructureCreationModal/KubernetesChaosInfrastructureCreationModal.tsx
+++ b/chaoscenter/web/src/views/KubernetesChaosInfrastructureCreationModal/KubernetesChaosInfrastructureCreationModal.tsx
@@ -1,19 +1,27 @@
 import { ButtonVariation, Layout } from '@harnessio/uicore';
 import React from 'react';
+import type { ApolloQueryResult } from '@apollo/client';
 import { PermissionGroup } from '@models';
 import { useStrings } from '@strings';
 import { ParentComponentErrorWrapper } from '@errors';
 import RbacButton from '@components/RbacButton';
+import type { ListKubernetesChaosInfrastructureRequest, ListKubernetesChaosInfrastructureResponse } from '@api/core';
 import { KubernetesChaosInfrastructureStepWizardConfiguration } from './KubernetesChaosInfrastructureStepWizardConfiguration';
 
 interface KubernetesChaosInfrastructureCreationModalViewProps {
   startPolling: (pollInterval: number) => void;
   stopPolling: () => void;
+  refetch: {
+    listChaosInfra: (
+      variables?: Partial<ListKubernetesChaosInfrastructureRequest> | undefined
+    ) => Promise<ApolloQueryResult<ListKubernetesChaosInfrastructureResponse>>;
+  };
 }
 
 export default function KubernetesChaosInfrastructureCreationModalView({
   stopPolling,
-  startPolling
+  startPolling,
+  refetch
 }: KubernetesChaosInfrastructureCreationModalViewProps): React.ReactElement {
   const { getString } = useStrings();
 
@@ -30,6 +38,7 @@ export default function KubernetesChaosInfrastructureCreationModalView({
         {createInfrastructureModal && (
           <Layout.Horizontal style={{ flexGrow: '1' }}>
             <KubernetesChaosInfrastructureStepWizardConfiguration
+              refetch={refetch}
               kubernetesChaosInfrastructureCreationModalClose={kubernetesChaosInfrastructureCreationModalClose}
               chaosStepWizardIsOpen={createInfrastructureModal}
               setChaosStepWizardIsOpen={setCreateInfrastructureModal}
diff --git a/chaoscenter/web/src/views/KubernetesChaosInfrastructureCreationModal/KubernetesChaosInfrastructureStepWizardConfiguration.tsx b/chaoscenter/web/src/views/KubernetesChaosInfrastructureCreationModal/KubernetesChaosInfrastructureStepWizardConfiguration.tsx
index a4fd29de699..987386fb19d 100644
--- a/chaoscenter/web/src/views/KubernetesChaosInfrastructureCreationModal/KubernetesChaosInfrastructureStepWizardConfiguration.tsx
+++ b/chaoscenter/web/src/views/KubernetesChaosInfrastructureCreationModal/KubernetesChaosInfrastructureStepWizardConfiguration.tsx
@@ -17,6 +17,7 @@ import { FieldArray, Formik, Form, FormikProps } from 'formik';
 import { get } from 'lodash-es';
 import React from 'react';
 import * as Yup from 'yup';
+import type { ApolloQueryResult } from '@apollo/client';
 import { useStrings } from '@strings';
 import {
   DeploymentScopeOptions,
@@ -30,6 +31,7 @@ import KubernetesChaosInfrastructureGreenfieldController from '@controllers/Kube
 import KubernetesChaosInfrastructureDeploymentScopeController from '@controllers/KubernetesChaosInfrastructureDeploymentScope';
 import NameDescriptionTags from '@components/NameIdDescriptionTags';
 import CodeBlock from '@components/CodeBlock';
+import type { ListKubernetesChaosInfrastructureRequest, ListKubernetesChaosInfrastructureResponse } from '@api/core';
 import css from './KubernetesChaosInfrastructureCreationModal.module.scss';
 
 interface ParentModalProps {
@@ -40,11 +42,21 @@ interface ParentModalProps {
   connectorScope?: string;
   delegateID?: string;
   selectedConnector?: string;
+  refetch: {
+    listChaosInfra: (
+      variables?: Partial<ListKubernetesChaosInfrastructureRequest> | undefined
+    ) => Promise<ApolloQueryResult<ListKubernetesChaosInfrastructureResponse>>;
+  };
 }
 
 interface DeploySetupStepProps {
   kubernetesChaosInfrastructureCreationModalClose: () => void;
   setChaosStepWizardIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  refetch: {
+    listChaosInfra: (
+      variables?: Partial<ListKubernetesChaosInfrastructureRequest> | undefined
+    ) => Promise<ApolloQueryResult<ListKubernetesChaosInfrastructureResponse>>;
+  };
 }
 
 interface BasicChaosInfrastructureConfigProps {
@@ -306,9 +318,8 @@ function BasicChaosInfrastructureConfig({
 export function DeploySetupStep({
   prevStepData,
   kubernetesChaosInfrastructureCreationModalClose,
-  // connectorScope,
-  // delegateID,
-  setChaosStepWizardIsOpen
+  setChaosStepWizardIsOpen,
+  refetch
 }: StepProps<StepData> & DeploySetupStepProps): React.ReactElement {
   const { getString } = useStrings();
   const [infraRegistered, setInfraRegistered] = React.useState<boolean>(false);
@@ -396,6 +407,7 @@ export function DeploySetupStep({
             className={css.stepButton}
             onClick={() => {
               prevStepData && (prevStepData.value = initialValues);
+              refetch.listChaosInfra();
               kubernetesChaosInfrastructureCreationModalClose();
             }}
             variation={ButtonVariation.PRIMARY}
@@ -584,7 +596,8 @@ export const OverviewStep: React.FC<
 export function KubernetesChaosInfrastructureStepWizardConfiguration({
   kubernetesChaosInfrastructureCreationModalClose,
   chaosStepWizardIsOpen,
-  setChaosStepWizardIsOpen
+  setChaosStepWizardIsOpen,
+  refetch
 }: ParentModalProps): React.ReactElement {
   const { getString } = useStrings();
 
@@ -607,6 +620,7 @@ export function KubernetesChaosInfrastructureStepWizardConfiguration({
           <OverviewStep name={getString('overview')} setChaosStepWizardIsOpen={setChaosStepWizardIsOpen} />
           <ConfigureStep name={getString('configure')} setChaosStepWizardIsOpen={setChaosStepWizardIsOpen} />
           <DeploySetupStep
+            refetch={refetch}
             name={getString('deploySetup')}
             kubernetesChaosInfrastructureCreationModalClose={kubernetesChaosInfrastructureCreationModalClose}
             setChaosStepWizardIsOpen={setChaosStepWizardIsOpen}
diff --git a/chaoscenter/web/src/views/ProjectsJoined/ProjectsJoined.module.scss b/chaoscenter/web/src/views/ProjectsJoined/ProjectsJoined.module.scss
index a3bc9d1c645..2df6b379935 100644
--- a/chaoscenter/web/src/views/ProjectsJoined/ProjectsJoined.module.scss
+++ b/chaoscenter/web/src/views/ProjectsJoined/ProjectsJoined.module.scss
@@ -14,12 +14,14 @@
 
   div[class*='TableV2--body'] {
     max-height: 400px;
+    min-width: auto !important;
     overflow-y: scroll;
   }
   div[class*='TableV2--cells'],
   div[class*='TableV2--header'] {
     display: grid !important;
-    grid-template-columns: 1fr 1fr 2fr 0.7fr;
+    grid-template-columns: 2fr 1fr 2fr 1fr;
+    gap: 0.5rem;
   }
 }
 
diff --git a/chaoscenter/web/src/views/UserCreatedProjects/UserCreatedProjects.module.scss b/chaoscenter/web/src/views/UserCreatedProjects/UserCreatedProjects.module.scss
index a3bc9d1c645..2df6b379935 100644
--- a/chaoscenter/web/src/views/UserCreatedProjects/UserCreatedProjects.module.scss
+++ b/chaoscenter/web/src/views/UserCreatedProjects/UserCreatedProjects.module.scss
@@ -14,12 +14,14 @@
 
   div[class*='TableV2--body'] {
     max-height: 400px;
+    min-width: auto !important;
     overflow-y: scroll;
   }
   div[class*='TableV2--cells'],
   div[class*='TableV2--header'] {
     display: grid !important;
-    grid-template-columns: 1fr 1fr 2fr 0.7fr;
+    grid-template-columns: 2fr 1fr 2fr 1fr;
+    gap: 0.5rem;
   }
 }
 
diff --git a/chaoscenter/web/src/views/UserCreatedProjects/UserCreatedProjects.tsx b/chaoscenter/web/src/views/UserCreatedProjects/UserCreatedProjects.tsx
index 84fe7d06527..6cbcedf9029 100644
--- a/chaoscenter/web/src/views/UserCreatedProjects/UserCreatedProjects.tsx
+++ b/chaoscenter/web/src/views/UserCreatedProjects/UserCreatedProjects.tsx
@@ -40,7 +40,9 @@ function MemoizedUserCreatedProjectsTable({
           return (
             <Layout.Horizontal style={{ gap: '0.25rem' }} flex={{ alignItems: 'center', justifyContent: 'flex-start' }}>
               <Icon name="nav-project" size={20} />
-              <Text font={{ variation: FontVariation.BODY }}>{data.name}</Text>
+              <Text width="calc(100% - 1.5rem)" lineClamp={1} font={{ variation: FontVariation.BODY }}>
+                {data.name}
+              </Text>
             </Layout.Horizontal>
           );
         }