diff --git a/web/src/features/AppConfig/components/AppConfig.tsx b/web/src/features/AppConfig/components/AppConfig.tsx
index 76a587f0db..2d70d50332 100644
--- a/web/src/features/AppConfig/components/AppConfig.tsx
+++ b/web/src/features/AppConfig/components/AppConfig.tsx
@@ -783,61 +783,65 @@ class AppConfig extends Component<Props, State> {
         </div>
         <div className="flex flex1 tw-mb-10 tw-mt-8 tw-flex tw-flex-col tw-gap-4 card-bg">
           <div className="tw-flex tw-justify-center" style={{ gap: "20px" }}>
-            {!this.props.isEmbeddedCluster && (
-              <div
-                id="configSidebarWrapper"
-                className="config-sidebar-wrapper card-bg clickable"
-              >
-                {configGroups?.map((group, i) => {
-                  if (
-                    group.title === "" ||
-                    group.title.length === 0 ||
-                    group.hidden ||
-                    group.when === "false"
-                  ) {
-                    return;
-                  }
-                  return (
-                    <div
-                      key={`${i}-${group.name}-${group.title}`}
-                      className={`side-nav-group ${
-                        this.state.activeGroups.includes(group.name) ||
-                        group.hasError
-                          ? "group-open"
-                          : ""
-                      }`}
-                      id={`config-group-nav-${group.name}`}
-                    >
-                      <div
-                        className="flex alignItems--center"
-                        onClick={() => this.toggleActiveGroups(group.name)}
-                      >
-                        <div className="u-lineHeight--normal group-title u-fontSize--normal">
-                          {group.title}
-                        </div>
-                        {/* adding the arrow-down classes, will rotate the icon when clicked */}
-                        <Icon
-                          icon="down-arrow"
-                          className="darkGray-color clickable flex-auto u-marginLeft--5 arrow-down"
-                          size={12}
-                          style={{}}
-                          color={""}
-                          disableFill={false}
-                          removeInlineStyle={false}
-                        />
-                      </div>
-                      {group.items ? (
-                        <div className="side-nav-items">
-                          {group.items
-                            ?.filter((item) => item.type !== "label")
-                            ?.map((item, j) => {
-                              const hash = this.props.location.hash.slice(1);
-                              if (item.hidden || item.when === "false") {
-                                return;
-                              }
-                              return (
-                                <a
-                                  className={`u-fontSize--normal u-lineHeight--normal
+            {/* show the config sidebar only if the app is not initially installed or if it is inital install and the cluster is not EC*/}
+            {!Utilities.isInitialAppInstall(app) ||
+              (Utilities.isInitialAppInstall(app) &&
+                !this.props.isEmbeddedCluster && (
+                  <div
+                    id="configSidebarWrapper"
+                    className="config-sidebar-wrapper card-bg clickable"
+                  >
+                    {configGroups?.map((group, i) => {
+                      if (
+                        group.title === "" ||
+                        group.title.length === 0 ||
+                        group.hidden ||
+                        group.when === "false"
+                      ) {
+                        return;
+                      }
+                      return (
+                        <div
+                          key={`${i}-${group.name}-${group.title}`}
+                          className={`side-nav-group ${
+                            this.state.activeGroups.includes(group.name) ||
+                            group.hasError
+                              ? "group-open"
+                              : ""
+                          }`}
+                          id={`config-group-nav-${group.name}`}
+                        >
+                          <div
+                            className="flex alignItems--center"
+                            onClick={() => this.toggleActiveGroups(group.name)}
+                          >
+                            <div className="u-lineHeight--normal group-title u-fontSize--normal">
+                              {group.title}
+                            </div>
+                            {/* adding the arrow-down classes, will rotate the icon when clicked */}
+                            <Icon
+                              icon="down-arrow"
+                              className="darkGray-color clickable flex-auto u-marginLeft--5 arrow-down"
+                              size={12}
+                              style={{}}
+                              color={""}
+                              disableFill={false}
+                              removeInlineStyle={false}
+                            />
+                          </div>
+                          {group.items ? (
+                            <div className="side-nav-items">
+                              {group.items
+                                ?.filter((item) => item.type !== "label")
+                                ?.map((item, j) => {
+                                  const hash =
+                                    this.props.location.hash.slice(1);
+                                  if (item.hidden || item.when === "false") {
+                                    return;
+                                  }
+                                  return (
+                                    <a
+                                      className={`u-fontSize--normal u-lineHeight--normal
                                 ${
                                   item.validationError || item.error
                                     ? "has-error"
@@ -848,20 +852,20 @@ class AppConfig extends Component<Props, State> {
                                     ? "active-item"
                                     : ""
                                 }`}
-                                  href={`#${item.name}-group`}
-                                  key={`${j}-${item.name}-${item.title}`}
-                                >
-                                  {item.title}
-                                </a>
-                              );
-                            })}
+                                      href={`#${item.name}-group`}
+                                      key={`${j}-${item.name}-${item.title}`}
+                                    >
+                                      {item.title}
+                                    </a>
+                                  );
+                                })}
+                            </div>
+                          ) : null}
                         </div>
-                      ) : null}
-                    </div>
-                  );
-                })}
-              </div>
-            )}
+                      );
+                    })}
+                  </div>
+                ))}
             <div className="ConfigArea--wrapper !tw-pt-0">
               <ConfigInfo
                 app={app}