diff --git a/app/client/src/pages/Editor/gitSync/components/DeployedKeyUI.tsx b/app/client/src/pages/Editor/gitSync/components/DeployedKeyUI.tsx
index aeed6b1e2e..4c685b69a7 100644
--- a/app/client/src/pages/Editor/gitSync/components/DeployedKeyUI.tsx
+++ b/app/client/src/pages/Editor/gitSync/components/DeployedKeyUI.tsx
@@ -53,15 +53,25 @@ const FlexRow = styled.div`
width: 100%;
`;
+const KeyType = styled.span`
+ width: 30%;
+ font-size: 10px;
+ font-weight: 600;
+ text-transform: uppercase;
+ color: var(--appsmith-color-black-900);
+`;
+
const KeyText = styled.span`
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
- width: calc(100% - 35px);
+ width: 60%;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
- color: ${Colors.COD_GRAY};
+ color: var(--appsmith-color-black-900);
+ direction: rtl;
+ margin-right: 8px;
`;
const MoreMenuWrapper = styled.div`
@@ -127,6 +137,8 @@ function DeployedKeyUI(props: DeployedKeyUIProps) {
const [showConfirmation, setShowConfirmation] = useState(false);
const [showKeyGeneratedMessage, setShowKeyGeneratedMessage] = useState(true);
+ const [keyType, keyVal, keyName] = SSHKeyPair.split(" ");
+ const keyText = `${keyVal} ${keyName}`;
const learnMoreClickHandler = () => {
AnalyticsUtil.logEvent("GS_GIT_DOCUMENTATION_LINK_CLICK", {
source: "SSH_KEY_ON_GIT_CONNECTION_TAB",
@@ -158,7 +170,8 @@ function DeployedKeyUI(props: DeployedKeyUIProps) {
size={20}
style={{ marginTop: -1, marginRight: 4 }}
/>
- {SSHKeyPair}
+ {keyType}
+ {keyText}
{CopySSHKey(showCopied, copyToClipboard)}