diff --git a/src/components/toggle/Checkbox.tsx b/src/components/toggle/Checkbox.tsx
index 9835e15b..08b6d6e3 100644
--- a/src/components/toggle/Checkbox.tsx
+++ b/src/components/toggle/Checkbox.tsx
@@ -1,8 +1,9 @@
 import './Checkbox.css';
 import './Toggle.css';
+import './Eye.css';
 import { customClassName } from "../../common/types/Helpers";
 
-export type Skin = "Checkbox" | "Toggle white" | "Toggle black";
+export type Skin = "Checkbox" | "Toggle white" | "Toggle black" | "Eye";
 
 export interface Props {
     checked: boolean;
diff --git a/src/components/toggle/Eye.css b/src/components/toggle/Eye.css
new file mode 100644
index 00000000..ba05d608
--- /dev/null
+++ b/src/components/toggle/Eye.css
@@ -0,0 +1,34 @@
+.Eye {
+    content: " ";
+    position: relative;
+    height: 37px;
+    width: 50px;
+}
+
+.Eye.clickable {
+    cursor: pointer;
+}
+
+.Eye.checked:after {
+    background-image: url("../../img/eye.svg");
+}
+.Eye:not(.checked):after {
+    background-image: url("../../img/eye-closed.svg");
+}
+
+.Eye:after {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.Eye.disabled,
+.Eye.clickable.disabled {
+    cursor: default;
+    opacity: 0.5;
+}
diff --git a/src/img/eye-closed.svg b/src/img/eye-closed.svg
new file mode 100644
index 00000000..2c826d1e
--- /dev/null
+++ b/src/img/eye-closed.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="white">
+    <path d="M8.052 5.837A9.715 9.715 0 0 1 12 5c2.955 0 5.309 1.315 7.06 2.864 1.756 1.553 2.866 3.307 3.307 4.08a.11.11 0 0 1 .016.055.122.122 0 0 1-.017.06 16.766 16.766 0 0 1-1.53 2.218.75.75 0 1 0 1.163.946 18.253 18.253 0 0 0 1.67-2.42 1.607 1.607 0 0 0 .001-1.602c-.485-.85-1.69-2.757-3.616-4.46C18.124 5.034 15.432 3.5 12 3.5c-1.695 0-3.215.374-4.552.963a.75.75 0 0 0 .604 1.373Zm11.114 12.15C17.328 19.38 14.933 20.5 12 20.5c-3.432 0-6.125-1.534-8.054-3.24C2.02 15.556.814 13.648.33 12.798a1.606 1.606 0 0 1 .001-1.6A18.283 18.283 0 0 1 3.648 7.01L1.317 5.362a.75.75 0 1 1 .866-1.224l20.5 14.5a.75.75 0 1 1-.866 1.224ZM4.902 7.898c-1.73 1.541-2.828 3.273-3.268 4.044a.112.112 0 0 0-.017.059c0 .015.003.034.016.055.441.774 1.551 2.527 3.307 4.08C6.69 17.685 9.045 19 12 19c2.334 0 4.29-.82 5.874-1.927l-3.516-2.487a3.5 3.5 0 0 1-5.583-3.949L4.902 7.899Z"/>
+</svg>
diff --git a/src/img/eye.svg b/src/img/eye.svg
new file mode 100644
index 00000000..d7de87cc
--- /dev/null
+++ b/src/img/eye.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="white">
+    <path d="M15.5 12a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"/>
+    <path d="M12 3.5c3.432 0 6.124 1.534 8.054 3.241 1.926 1.703 3.132 3.61 3.616 4.46a1.6 1.6 0 0 1 0 1.598c-.484.85-1.69 2.757-3.616 4.461-1.929 1.706-4.622 3.24-8.054 3.24-3.432 0-6.124-1.534-8.054-3.24C2.02 15.558.814 13.65.33 12.8a1.6 1.6 0 0 1 0-1.598c.484-.85 1.69-2.757 3.616-4.462C5.875 5.034 8.568 3.5 12 3.5ZM1.633 11.945a.115.115 0 0 0-.017.055c.001.02.006.039.017.056.441.774 1.551 2.527 3.307 4.08C6.691 17.685 9.045 19 12 19c2.955 0 5.31-1.315 7.06-2.864 1.756-1.553 2.866-3.306 3.307-4.08a.111.111 0 0 0 .017-.056.111.111 0 0 0-.017-.056c-.441-.773-1.551-2.527-3.307-4.08C17.309 6.315 14.955 5 12 5 9.045 5 6.69 6.314 4.94 7.865c-1.756 1.552-2.866 3.306-3.307 4.08Z"/>
+</svg>
diff --git a/src/loc/secrets/AddSecretDialog.tsx b/src/loc/secrets/AddSecretDialog.tsx
index 91d3e610..8dc82679 100644
--- a/src/loc/secrets/AddSecretDialog.tsx
+++ b/src/loc/secrets/AddSecretDialog.tsx
@@ -47,6 +47,7 @@ export default function AddSecretDialog(props: Props) {
             ] }
             onSubmit={ handleSubmit(submit) }
         >
+            <h3>Add a Recoverable Secret</h3>
             <FormGroup
                 id="name"
                 label="Name"
diff --git a/src/loc/secrets/RemoveSecretDialog.css b/src/loc/secrets/RemoveSecretDialog.css
new file mode 100644
index 00000000..abafc53c
--- /dev/null
+++ b/src/loc/secrets/RemoveSecretDialog.css
@@ -0,0 +1,3 @@
+.RemoveSecretDialog img {
+    margin-bottom: 20px;
+}
diff --git a/src/loc/secrets/RemoveSecretDialog.tsx b/src/loc/secrets/RemoveSecretDialog.tsx
index 61ae8e09..eb15584b 100644
--- a/src/loc/secrets/RemoveSecretDialog.tsx
+++ b/src/loc/secrets/RemoveSecretDialog.tsx
@@ -2,6 +2,9 @@ import { Secret } from "@logion/client";
 import Dialog from "../../common/Dialog";
 import { useForm } from "react-hook-form";
 import { useCallback } from "react";
+import Icon from "../../common/Icon";
+import ViewableSecret from "./ViewableSecret";
+import "./RemoveSecretDialog.css"
 
 export interface Props {
     secret: Secret | undefined;
@@ -24,6 +27,7 @@ export default function RemoveSecretDialog(props: Props) {
 
     return (
         <Dialog
+            className="RemoveSecretDialog"
             show={ props.secret !== undefined }
             size="lg"
             actions={ [
@@ -42,8 +46,10 @@ export default function RemoveSecretDialog(props: Props) {
             ] }
             onSubmit={ handleSubmit(submit) }
         >
-            <p>You are about to remove the secret <strong>{ props.secret?.name }</strong>.</p>
-            <p>It will be impossible to recover it after, so make your own backup</p>
+            <Icon icon={{id: "big-warning"}} type="png" height="70px"/>
+            <p>You are about to remove the secret <strong>{ props.secret?.name }</strong>:</p>
+            <p>It will be impossible to recover it after, so make your <strong>own backup</strong> of the value:</p>
+            <ViewableSecret value={ props.secret?.value || ""}/>
         </Dialog>
     )
 }
diff --git a/src/loc/secrets/SecretsTable.tsx b/src/loc/secrets/SecretsTable.tsx
index 7e6acd32..b8f56d65 100644
--- a/src/loc/secrets/SecretsTable.tsx
+++ b/src/loc/secrets/SecretsTable.tsx
@@ -1,6 +1,8 @@
 import Table, { EmptyTableMessage, Cell, ActionCell } from "../../common/Table";
 import { Secret } from "@logion/client";
 import Button from "react-bootstrap/Button";
+import Icon from "../../common/Icon";
+import ViewableSecret from "./ViewableSecret";
 
 export interface Properties {
     secrets: Secret[];
@@ -16,17 +18,24 @@ export default function SecretsTable(props: Properties) {
                 columns={ [
                     {
                         header: "Name",
+                        width: "200px",
                         render: secret => <Cell content={ secret.name } />
                     },
                     {
                         header: "Value",
-                        render: secret => <Cell content={ secret.value } />
+                        render: secret => <ViewableSecret value={ secret.value } />
                     },
                     {
                         header: "",
+                        width: "70px",
                         render: secret =>
                             <ActionCell>
-                                <Button onClick={ () => props.onRemoveSecret(secret) }>X</Button>
+                                <Button
+                                    variant="danger"
+                                    onClick={ () => props.onRemoveSecret(secret) }
+                                >
+                                    <Icon icon={ { id: 'trash' } } />
+                                </Button>
                             </ActionCell>
                     },
                 ] }
diff --git a/src/loc/secrets/ViewableSecret.css b/src/loc/secrets/ViewableSecret.css
new file mode 100644
index 00000000..512b4d51
--- /dev/null
+++ b/src/loc/secrets/ViewableSecret.css
@@ -0,0 +1,5 @@
+.ViewableSecret {
+    display: flex;
+    justify-content: center;
+    line-height: 40px;
+}
diff --git a/src/loc/secrets/ViewableSecret.tsx b/src/loc/secrets/ViewableSecret.tsx
new file mode 100644
index 00000000..9fb59bc9
--- /dev/null
+++ b/src/loc/secrets/ViewableSecret.tsx
@@ -0,0 +1,18 @@
+import { useState } from "react";
+import Checkbox from "../../components/toggle/Checkbox";
+import "./ViewableSecret.css";
+
+export interface Props {
+    value: string;
+}
+
+export default function ViewableSecret(props: Props) {
+    const [ hidden, setHidden ] = useState<boolean>(true);
+    return (
+        <div className="ViewableSecret">
+            { !hidden && <span>{ props.value }</span> }
+            { hidden && <span>******</span> }
+            <Checkbox checked={ hidden } setChecked={ setHidden } skin="Eye" />
+        </div>
+    )
+}