diff --git a/src/Explorer/Tabs/ConnectTab.tsx b/src/Explorer/Tabs/ConnectTab.tsx
index 3c334fbc1..62f190996 100644
--- a/src/Explorer/Tabs/ConnectTab.tsx
+++ b/src/Explorer/Tabs/ConnectTab.tsx
@@ -16,10 +16,20 @@ export const ConnectTab: React.FC = (): JSX.Element => {
   const [primaryReadonlyMasterKey, setPrimaryReadonlyMasterKey] = useState<string>("");
   const [secondaryReadonlyMasterKey, setSecondaryReadonlyMasterKey] = useState<string>("");
   const uri: string = userContext.databaseAccount.properties?.documentEndpoint;
-  const primaryConnectionStr = `AccountEndpoint=${uri};AccountKey=${primaryMasterKey}`;
-  const secondaryConnectionStr = `AccountEndpoint=${uri};AccountKey=${secondaryMasterKey}`;
-  const primaryReadonlyConnectionStr = `AccountEndpoint=${uri};AccountKey=${primaryReadonlyMasterKey}`;
-  const secondaryReadonlyConnectionStr = `AccountEndpoint=${uri};AccountKey=${secondaryReadonlyMasterKey}`;
+  const primaryConnectionStr = `AccountEndpoint=${uri};AccountKey=${primaryMasterKey};`;
+  const secondaryConnectionStr = `AccountEndpoint=${uri};AccountKey=${secondaryMasterKey};`;
+  const primaryReadonlyConnectionStr = `AccountEndpoint=${uri};AccountKey=${primaryReadonlyMasterKey};`;
+  const secondaryReadonlyConnectionStr = `AccountEndpoint=${uri};AccountKey=${secondaryReadonlyMasterKey};`;
+  const maskedValue: string =
+    "*********************************************************************************************************************************";
+  const [showPrimaryMasterKey, setShowPrimaryMasterKey] = useState<boolean>(false);
+  const [showSecondaryMasterKey, setShowSecondaryMasterKey] = useState<boolean>(false);
+  const [showPrimaryReadonlyMasterKey, setShowPrimaryReadonlyMasterKey] = useState<boolean>(false);
+  const [showSecondaryReadonlyMasterKey, setShowSecondaryReadonlyMasterKey] = useState<boolean>(false);
+  const [showPrimaryConnectionStr, setShowPrimaryConnectionStr] = useState<boolean>(false);
+  const [showSecondaryConnectionStr, setShowSecondaryConnectionStr] = useState<boolean>(false);
+  const [showPrimaryReadonlyConnectionStr, setShowPrimaryReadonlyConnectionStr] = useState<boolean>(false);
+  const [showSecondaryReadonlyConnectionStr, setShowSecondaryReadonlyConnectionStr] = useState<boolean>(false);
 
   useEffect(() => {
     fetchKeys();
@@ -62,55 +72,97 @@ export const ConnectTab: React.FC = (): JSX.Element => {
     root: { width: "100%" },
     field: { backgroundColor: "rgb(230, 230, 230)" },
     fieldGroup: { borderColor: "rgb(138, 136, 134)" },
+    suffix: {
+      backgroundColor: "rgb(230, 230, 230)",
+      margin: 0,
+      padding: 0,
+    },
   };
 
+  const renderCopyButton = (selector: string) => (
+    <IconButton
+      iconProps={{ iconName: "Copy" }}
+      onClick={() => onCopyBtnClicked(selector)}
+      styles={{
+        root: {
+          height: "100%",
+          backgroundColor: "rgb(230, 230, 230)",
+          border: "none",
+        },
+        rootHovered: {
+          backgroundColor: "rgb(220, 220, 220)",
+        },
+        rootPressed: {
+          backgroundColor: "rgb(210, 210, 210)",
+        },
+      }}
+    />
+  );
+
   return (
     <div style={{ width: "100%", padding: 16 }}>
+      <Stack horizontal verticalAlign="end" style={{ marginBottom: 16, margin: 10 }}>
+        <TextField
+          label="URI"
+          id="uriTextfield"
+          readOnly
+          value={uri}
+          styles={textfieldStyles}
+          onRenderSuffix={() => renderCopyButton("#uriTextfield")}
+        />
+        <div style={{ width: 32 }}></div>
+      </Stack>
+
       <Pivot>
         {userContext.hasWriteAccess && (
           <PivotItem headerText="Read-write Keys">
-            <Stack style={{ margin: 10 }}>
-              <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
-                <TextField label="URI" id="uriTextfield" readOnly value={uri} styles={textfieldStyles} />
-                <IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#uriTextfield")} />
-              </Stack>
-
+            <Stack style={{ margin: 10, overflow: "auto", maxHeight: "calc(100vh - 300px)" }}>
               <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
                 <TextField
                   label="PRIMARY KEY"
                   id="primaryKeyTextfield"
                   readOnly
-                  value={primaryMasterKey}
+                  value={showPrimaryMasterKey ? primaryMasterKey : maskedValue}
                   styles={textfieldStyles}
+                  {...(showPrimaryMasterKey && {
+                    onRenderSuffix: () => renderCopyButton("#primaryKeyTextfield"),
+                  })}
+                />
+                <IconButton
+                  iconProps={{ iconName: showPrimaryMasterKey ? "Hide3" : "View" }}
+                  onClick={() => setShowPrimaryMasterKey(!showPrimaryMasterKey)}
                 />
-                <IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#primaryKeyTextfield")} />
               </Stack>
-
               <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
                 <TextField
                   label="SECONDARY KEY"
                   id="secondaryKeyTextfield"
                   readOnly
-                  value={secondaryMasterKey}
+                  value={showSecondaryMasterKey ? secondaryMasterKey : maskedValue}
                   styles={textfieldStyles}
+                  {...(showSecondaryMasterKey && {
+                    onRenderSuffix: () => renderCopyButton("#secondaryKeyTextfield"),
+                  })}
                 />
                 <IconButton
-                  iconProps={{ iconName: "Copy" }}
-                  onClick={() => onCopyBtnClicked("#secondaryKeyTextfield")}
+                  iconProps={{ iconName: showSecondaryMasterKey ? "Hide3" : "View" }}
+                  onClick={() => setShowSecondaryMasterKey(!showSecondaryMasterKey)}
                 />
               </Stack>
-
               <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
                 <TextField
                   label="PRIMARY CONNECTION STRING"
                   id="primaryConStrTextfield"
                   readOnly
-                  value={primaryConnectionStr}
+                  value={showPrimaryConnectionStr ? primaryConnectionStr : maskedValue}
                   styles={textfieldStyles}
+                  {...(showPrimaryConnectionStr && {
+                    onRenderSuffix: () => renderCopyButton("#primaryConStrTextfield"),
+                  })}
                 />
                 <IconButton
-                  iconProps={{ iconName: "Copy" }}
-                  onClick={() => onCopyBtnClicked("#primaryConStrTextfield")}
+                  iconProps={{ iconName: showPrimaryConnectionStr ? "Hide3" : "View" }}
+                  onClick={() => setShowPrimaryConnectionStr(!showPrimaryConnectionStr)}
                 />
               </Stack>
               <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
@@ -118,34 +170,36 @@ export const ConnectTab: React.FC = (): JSX.Element => {
                   label="SECONDARY CONNECTION STRING"
                   id="secondaryConStrTextfield"
                   readOnly
-                  value={secondaryConnectionStr}
+                  value={showSecondaryConnectionStr ? secondaryConnectionStr : maskedValue}
                   styles={textfieldStyles}
+                  {...(showSecondaryConnectionStr && {
+                    onRenderSuffix: () => renderCopyButton("#secondaryConStrTextfield"),
+                  })}
                 />
                 <IconButton
-                  iconProps={{ iconName: "Copy" }}
-                  onClick={() => onCopyBtnClicked("#secondaryConStrTextfield")}
+                  iconProps={{ iconName: showSecondaryConnectionStr ? "Hide3" : "View" }}
+                  onClick={() => setShowSecondaryConnectionStr(!showSecondaryConnectionStr)}
                 />
               </Stack>
             </Stack>
           </PivotItem>
         )}
         <PivotItem headerText="Read-only Keys">
-          <Stack style={{ margin: 10 }}>
-            <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
-              <TextField label="URI" id="uriReadOnlyTextfield" readOnly value={uri} styles={textfieldStyles} />
-              <IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#uriReadOnlyTextfield")} />
-            </Stack>
+          <Stack style={{ margin: 10, overflow: "auto", maxHeight: "calc(100vh - 300px)" }}>
             <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
               <TextField
                 label="PRIMARY READ-ONLY KEY"
                 id="primaryReadonlyKeyTextfield"
                 readOnly
-                value={primaryReadonlyMasterKey}
+                value={showPrimaryReadonlyMasterKey ? primaryReadonlyMasterKey : maskedValue}
                 styles={textfieldStyles}
+                {...(showPrimaryReadonlyMasterKey && {
+                  onRenderSuffix: () => renderCopyButton("#primaryReadonlyKeyTextfield"),
+                })}
               />
               <IconButton
-                iconProps={{ iconName: "Copy" }}
-                onClick={() => onCopyBtnClicked("#primaryReadonlyKeyTextfield")}
+                iconProps={{ iconName: showPrimaryReadonlyMasterKey ? "Hide3" : "View" }}
+                onClick={() => setShowPrimaryReadonlyMasterKey(!showPrimaryReadonlyMasterKey)}
               />
             </Stack>
             <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
@@ -153,12 +207,15 @@ export const ConnectTab: React.FC = (): JSX.Element => {
                 label="SECONDARY READ-ONLY KEY"
                 id="secondaryReadonlyKeyTextfield"
                 readOnly
-                value={secondaryReadonlyMasterKey}
+                value={showSecondaryReadonlyMasterKey ? secondaryReadonlyMasterKey : maskedValue}
                 styles={textfieldStyles}
+                {...(showSecondaryReadonlyMasterKey && {
+                  onRenderSuffix: () => renderCopyButton("#secondaryReadonlyKeyTextfield"),
+                })}
               />
               <IconButton
-                iconProps={{ iconName: "Copy" }}
-                onClick={() => onCopyBtnClicked("#secondaryReadonlyKeyTextfield")}
+                iconProps={{ iconName: showSecondaryReadonlyMasterKey ? "Hide3" : "View" }}
+                onClick={() => setShowSecondaryReadonlyMasterKey(!showSecondaryReadonlyMasterKey)}
               />
             </Stack>
             <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
@@ -166,25 +223,31 @@ export const ConnectTab: React.FC = (): JSX.Element => {
                 label="PRIMARY READ-ONLY CONNECTION STRING"
                 id="primaryReadonlyConStrTextfield"
                 readOnly
-                value={primaryReadonlyConnectionStr}
+                value={showPrimaryReadonlyConnectionStr ? primaryReadonlyConnectionStr : maskedValue}
                 styles={textfieldStyles}
+                {...(showPrimaryReadonlyConnectionStr && {
+                  onRenderSuffix: () => renderCopyButton("#primaryReadonlyConStrTextfield"),
+                })}
               />
               <IconButton
-                iconProps={{ iconName: "Copy" }}
-                onClick={() => onCopyBtnClicked("#primaryReadonlyConStrTextfield")}
+                iconProps={{ iconName: showPrimaryReadonlyConnectionStr ? "Hide3" : "View" }}
+                onClick={() => setShowPrimaryReadonlyConnectionStr(!showPrimaryReadonlyConnectionStr)}
               />
             </Stack>
             <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
               <TextField
                 label="SECONDARY READ-ONLY CONNECTION STRING"
                 id="secondaryReadonlyConStrTextfield"
-                value={secondaryReadonlyConnectionStr}
+                value={showSecondaryReadonlyConnectionStr ? secondaryReadonlyConnectionStr : maskedValue}
                 readOnly
                 styles={textfieldStyles}
+                {...(showSecondaryReadonlyConnectionStr && {
+                  onRenderSuffix: () => renderCopyButton("#secondaryReadonlyConStrTextfield"),
+                })}
               />
               <IconButton
-                iconProps={{ iconName: "Copy" }}
-                onClick={() => onCopyBtnClicked("#secondaryReadonlyConStrTextfield")}
+                iconProps={{ iconName: showSecondaryReadonlyConnectionStr ? "Hide3" : "View" }}
+                onClick={() => setShowSecondaryReadonlyConnectionStr(!showSecondaryReadonlyConnectionStr)}
               />
             </Stack>
           </Stack>