diff --git a/package.json b/package.json
index 2af4e37f..e43fa7c3 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,11 @@
   },
   "dependencies": {
     "ansi_up": "^3.0.0",
+    "file-loader": "^4.1.0",
     "lodash.throttle": "^4.1.1",
     "portal-vue": "^1.5.0",
+    "text-security": "^1.2.0",
+    "url-loader": "^2.1.0",
     "vue": "^2.5.17",
     "vue-click-outside": "^1.0.7",
     "vue-i18n": "^8.2.1",
diff --git a/src/components/editable-list/Secrets.vue b/src/components/editable-list/Secrets.vue
index 97981988..a49b8d9d 100644
--- a/src/components/editable-list/Secrets.vue
+++ b/src/components/editable-list/Secrets.vue
@@ -17,7 +17,7 @@
 
     <template slot="fields">
       <BaseInput name="secret.name" v-model="secret.name" placeholder="Secret Name" type="text"/>
-      <BaseTextArea name="secret.data" v-model="secret.data" placeholder="Secret Value"/>
+      <BaseTextArea name="secret.data" v-model="secret.data" class="hide-secret" placeholder="Secret Value"/>
       <BaseCheckbox v-model="secret.pullRequest" style="margin-bottom: 12px;">Allow Pull Requests</BaseCheckbox>
     </template>
   </EditableList>
@@ -85,7 +85,12 @@ export default {
 };
 </script>
 
+<style src="text-security/dist/text-security-disc.css"></style>
 <style scoped>
+.hide-secret {
+    font-family: 'text-security-disc';
+}
+
 .icon-secrets-empty {
   display: block;
   margin: 0 auto 20px;