diff --git a/app/client/cypress/locators/HomePage.json b/app/client/cypress/locators/HomePage.json
index d17422e5a3..636a48d0f7 100644
--- a/app/client/cypress/locators/HomePage.json
+++ b/app/client/cypress/locators/HomePage.json
@@ -1,6 +1,6 @@
 {
     "searchInput": "input[type='text']",
-    "appEditIcon": "span[icon='edit']",
+    "appEditIcon": ".t--application-edit-link",
     "publishButton":".t--application-publish-btn",
     "publishCrossButton":"span[icon='small-cross']",
     "homePageID":"//div[@id='root']"
diff --git a/app/client/src/pages/Applications/ApplicationCard.tsx b/app/client/src/pages/Applications/ApplicationCard.tsx
index e8bf21c7da..01e2d398d0 100644
--- a/app/client/src/pages/Applications/ApplicationCard.tsx
+++ b/app/client/src/pages/Applications/ApplicationCard.tsx
@@ -5,7 +5,7 @@ import {
   getApplicationViewerPageURL,
   BUILDER_PAGE_URL,
 } from "constants/routes";
-import { Card, Tooltip, Classes, Icon } from "@blueprintjs/core";
+import { Card, Tooltip, Classes } from "@blueprintjs/core";
 import { ApplicationPayload } from "constants/ReduxActionConstants";
 import Button from "components/editorComponents/Button";
 import {
@@ -13,10 +13,10 @@ import {
   getBorderCSSShorthand,
   getColorWithOpacity,
 } from "constants/DefaultTheme";
+import { ControlIcons } from "icons/ControlIcons";
 import ContextDropdown, {
   ContextDropdownOption,
 } from "components/editorComponents/ContextDropdown";
-import { Colors } from "constants/Colors";
 
 const Wrapper = styled(Card)`
   display: flex;
@@ -74,18 +74,9 @@ const ApplicationTitle = styled.div`
   border-top: ${props => getBorderCSSShorthand(props.theme.card.divider)};
   font-weight: ${props => props.theme.fontWeights[2]};
   font-size: ${props => props.theme.fontSizes[4]}px;
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
   & {
-    & > {
-      span:first-of-type {
-        display: inline-block;
-        width: 80%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
+    span {
+      display: inline-block;
     }
     .control {
       z-index: 1;
@@ -131,8 +122,13 @@ const Control = styled.button<{ fixed?: boolean }>`
 `;
 
 const APPLICATION_CONTROL_FONTSIZE_INDEX = 6;
-
-const editControl = <Icon icon="edit" color={Colors.HIT_GRAY} />;
+const ViewIcon = ControlIcons.VIEW_CONTROL;
+const viewIconProps = {
+  width: theme.fontSizes[APPLICATION_CONTROL_FONTSIZE_INDEX - 1],
+  height: theme.fontSizes[APPLICATION_CONTROL_FONTSIZE_INDEX - 1],
+  color: theme.colors.secondary,
+};
+const viewControlIcon = <ViewIcon {...viewIconProps} />;
 
 type ApplicationCardProps = {
   application: ApplicationPayload;
@@ -190,10 +186,10 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
         className={props.loading ? Classes.SKELETON : undefined}
       >
         <span>{props.application.name}</span>
-        <Link className="t--application-edit-link" to={editApplicationURL}>
+        <Link to={viewApplicationURL}>
           <Control className="control">
-            <Tooltip content="Edit" hoverOpenDelay={500}>
-              {editControl}
+            <Tooltip content="Launch App" hoverOpenDelay={500}>
+              {viewControlIcon}
             </Tooltip>
           </Control>
         </Link>
@@ -207,14 +203,14 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
           className="more"
         />
       </ApplicationTitle>
-      <Link className="t--application-view-link" to={viewApplicationURL}>
+      <Link className="t--application-edit-link" to={editApplicationURL}>
         <ApplicationImage className="image-container">
           <Control className="control">
             <Button
               filled
-              text="Launch"
+              text="Edit"
               intent="primary"
-              icon="play"
+              icon="edit"
               iconAlignment="left"
               size="small"
               className="t--application-edit-btn"