diff --git a/app/client/src/components/ads/EditableText.tsx b/app/client/src/components/ads/EditableText.tsx
index 75aa557ffd..3622481d03 100644
--- a/app/client/src/components/ads/EditableText.tsx
+++ b/app/client/src/components/ads/EditableText.tsx
@@ -241,6 +241,7 @@ export const EditableText = (props: EditableTextProps) => {
       }
     >
       <TextContainer
+        className="editable-text-container"
         data-cy={props.cypressSelector}
         isInvalid={!!isInvalid}
         isEditing={isEditing}
diff --git a/app/client/src/components/ads/EditableTextWrapper.tsx b/app/client/src/components/ads/EditableTextWrapper.tsx
index 7e64cd6ab5..42c3226d9b 100644
--- a/app/client/src/components/ads/EditableTextWrapper.tsx
+++ b/app/client/src/components/ads/EditableTextWrapper.tsx
@@ -13,10 +13,13 @@ const Container = styled.div<{
   savingState: SavingState;
   isInvalid: boolean;
 }>`
+  .editable-text-container {
+    justify-content: center;
+  }
+
   &&& .${Classes.EDITABLE_TEXT}, .icon-wrapper {
     padding: 5px 10px;
     height: 25px;
-    text-decoration: ${props => (props.isEditing ? "unset" : "underline")};
     background-color: ${props =>
       (props.isInvalid && props.isEditing) ||
       props.savingState === SavingState.ERROR
@@ -24,6 +27,28 @@ const Container = styled.div<{
         : "transparent"};
   }
 
+  &&&& .${Classes.EDITABLE_TEXT} {
+    ${props =>
+      !props.isEditing
+        ? `
+      padding-left: 0px;
+      padding-right: 0px;
+      border-bottom-style: solid; 
+      border-bottom-width: 1px;
+      width: fit-content;
+    `
+        : null}
+  }
+
+  &&&& .${Classes.EDITABLE_TEXT_CONTENT} {
+    ${props =>
+      !props.isEditing
+        ? `
+        min-width: 0px !important;
+    `
+        : null}
+  }
+
   &&& .${Classes.EDITABLE_TEXT_CONTENT}, &&& .${Classes.EDITABLE_TEXT_INPUT} {
     text-align: center;
     color: #d4d4d4;