diff --git a/app/client/cypress/integration/Smoke_TestSuite/Applications/UpdateApplication_spec.js b/app/client/cypress/integration/Smoke_TestSuite/Applications/UpdateApplication_spec.js
new file mode 100644
index 0000000000..b46e2399ee
--- /dev/null
+++ b/app/client/cypress/integration/Smoke_TestSuite/Applications/UpdateApplication_spec.js
@@ -0,0 +1,70 @@
+const homePage = require("../../../locators/HomePage.json");
+const commonlocators = require("../../../locators/commonlocators.json");
+import tinycolor from "tinycolor2";
+
+describe("Update Application", function() {
+  let appname;
+  let iconname;
+  let colorname;
+
+  it("Open the application menu and update name and then check whether update is reflected in the application card", function() {
+    cy.get(commonlocators.homeIcon).click({ force: true });
+    appname = localStorage.getItem("AppName");
+    cy.get(homePage.searchInput).type(appname);
+    cy.wait(2000);
+
+    cy.get(homePage.applicationCard)
+      .first()
+      .trigger("mouseover");
+    cy.get(homePage.appMoreIcon)
+      .first()
+      .click({ force: true });
+    cy.get(homePage.applicationName).type(appname + "{enter}");
+    cy.wait("@updateApplication").should(
+      "have.nested.property",
+      "response.body.responseMeta.status",
+      200,
+    );
+    cy.get(homePage.applicationCardName).should("contain", appname);
+  });
+
+  it("Open the application menu and update icon and then check whether update is reflected in the application card", function() {
+    cy.get(homePage.applicationIconSelector)
+      .first()
+      .click();
+    cy.wait("@updateApplication")
+      .then(xhr => {
+        iconname = xhr.response.body.data.icon;
+      })
+      .should("have.nested.property", "response.body.responseMeta.status", 200);
+    cy.get(homePage.applicationCard)
+      .first()
+      .within(() => {
+        cy.get("a")
+          .invoke("attr", "name")
+          .should("equal", iconname);
+      });
+  });
+
+  it("Open the application menu and update card color and then check whether update is reflected in the application card", function() {
+    cy.get(homePage.applicationColorSelector)
+      .first()
+      .click();
+    cy.wait("@updateApplication")
+      .then(xhr => {
+        colorname = tinycolor(xhr.response.body.data.color).toRgbString();
+      })
+      .should("have.nested.property", "response.body.responseMeta.status", 200);
+    cy.wait(2000);
+
+    cy.get(homePage.applicationCard)
+      .first()
+      .within(() => {
+        cy.get(homePage.applicationBackgroundColor).should(
+          "have.css",
+          "background-color",
+          colorname,
+        );
+      });
+  });
+});
diff --git a/app/client/cypress/locators/HomePage.json b/app/client/cypress/locators/HomePage.json
index e78f4d0d45..8883897dbb 100644
--- a/app/client/cypress/locators/HomePage.json
+++ b/app/client/cypress/locators/HomePage.json
@@ -51,10 +51,14 @@
     "profileMenu": ".bp3-popover-wrapper.profile-menu",
     "signOutIcon": ".t--logout-icon",
     "headerAppSmithLogo": ".t--Appsmith-logo-image",
+    "applicationCardName": "[data-cy=t--app-card-name]",
+    "applicationIconSelector": ".t--icon-not-selected",
+    "applicationColorSelector": ".t--color-not-selected",
+    "applicationBackgroundColor": ".t--application-card-background",
     "orgSettingOption": "[data-cy=t--org-setting]",
     "orgNameInput": "[data-cy=t--org-name-input]",
     "orgEmailInput": "[data-cy=t--org-email-input]",
     "orgWebsiteInput": "[data-cy=t--org-website-input]",
     "orgHeaderName": ".t--organization-header",
     "leftPanelContainer": "[data-cy=t--left-panel]"
-}
\ No newline at end of file
+}
diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
index 5e75da02c1..a1d6c0bea6 100644
--- a/app/client/cypress/support/commands.js
+++ b/app/client/cypress/support/commands.js
@@ -1642,7 +1642,7 @@ Cypress.Commands.add("startServerAndRoutes", () => {
   cy.route("DELETE", "/api/v1/datasources/*").as("deleteDatasource");
   cy.route("DELETE", "/api/v1/applications/*").as("deleteApplication");
   cy.route("POST", "/api/v1/applications/?orgId=*").as("createNewApplication");
-  cy.route("PUT", "/api/v1/applications/*").as("updateApplicationName");
+  cy.route("PUT", "/api/v1/applications/*").as("updateApplication");
   cy.route("PUT", "/api/v1/actions/*").as("saveAction");
 
   cy.route("POST", "/api/v1/organizations").as("createOrg");
diff --git a/app/client/src/components/ads/ColorSelector.tsx b/app/client/src/components/ads/ColorSelector.tsx
index ff01cfbac2..3fae16e43e 100644
--- a/app/client/src/components/ads/ColorSelector.tsx
+++ b/app/client/src/components/ads/ColorSelector.tsx
@@ -76,9 +76,14 @@ const ColorSelector = (props: ColorSelectorProps) => {
             selected={selected}
             color={hex}
             onClick={() => {
-              setSelected(hex);
-              props.onSelect && props.onSelect(hex);
+              if (selected !== hex) {
+                setSelected(hex);
+                props.onSelect && props.onSelect(hex);
+              }
             }}
+            className={
+              selected === hex ? "t--color-selected" : "t--color-not-selected"
+            }
           />
         );
       })}
diff --git a/app/client/src/components/ads/IconSelector.tsx b/app/client/src/components/ads/IconSelector.tsx
index 0dc17980fb..70bd3ba5d2 100644
--- a/app/client/src/components/ads/IconSelector.tsx
+++ b/app/client/src/components/ads/IconSelector.tsx
@@ -73,9 +73,16 @@ const IconSelector = (props: IconSelectorProps) => {
             <IconBox
               key={index}
               selectedColor={selected === iconName ? props.selectedColor : ""}
+              className={
+                selected === iconName
+                  ? "t--icon-selected"
+                  : "t--icon-not-selected"
+              }
               onClick={() => {
-                setSelected(iconName);
-                props.onSelect && props.onSelect(iconName);
+                if (iconName !== selected) {
+                  setSelected(iconName);
+                  props.onSelect && props.onSelect(iconName);
+                }
               }}
             >
               <AppIcon name={iconName} size={Size.small} />
diff --git a/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx b/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx
index 99200a880b..a83a90a5d8 100644
--- a/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx
+++ b/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx
@@ -19,10 +19,10 @@ const DropdownWrapper = (props: DropdownWrapperProps) => {
   };
 
   useEffect(() => {
-    if (props.placeholder) {
-      setSelectedOption({ value: props.placeholder });
-    } else if (props.input && props.input.value) {
+    if (props.input && props.input.value) {
       setSelectedOption({ value: props.input.value });
+    } else if (props.placeholder) {
+      setSelectedOption({ value: props.placeholder });
     }
   }, [props.input, props.placeholder]);
 
diff --git a/app/client/src/pages/Applications/ApplicationCard.tsx b/app/client/src/pages/Applications/ApplicationCard.tsx
index cf9075b054..085b9190dc 100644
--- a/app/client/src/pages/Applications/ApplicationCard.tsx
+++ b/app/client/src/pages/Applications/ApplicationCard.tsx
@@ -458,7 +458,11 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
     >
       <>
         <Wrapper
-          className={isFetchingApplications ? Classes.SKELETON : ""}
+          className={
+            isFetchingApplications
+              ? Classes.SKELETON
+              : "t--application-card-background"
+          }
           key={props.application.id}
           hasReadPermission={hasReadPermission}
           backgroundColor={colorCode}
@@ -514,7 +518,9 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
           isFetching={isFetchingApplications}
           className={isFetchingApplications ? Classes.SKELETON : ""}
         >
-          <Text type={TextType.H3}>{props.application.name}</Text>
+          <Text type={TextType.H3} cypressSelector="t--app-card-name">
+            {props.application.name}
+          </Text>
         </AppNameWrapper>
       </>
     </NameWrapper>