diff --git a/pinry-spa/src/components/PinPreview.vue b/pinry-spa/src/components/PinPreview.vue
index 6055d99..30a8516 100644
--- a/pinry-spa/src/components/PinPreview.vue
+++ b/pinry-spa/src/components/PinPreview.vue
@@ -9,7 +9,7 @@
           </div>
           <div class="card-content">
             <div class="content">
-                <p class="description title">{{ pinItem.description }}</p>
+                <p class="description title" v-html="niceLinks(pinItem.description)"></p>
             </div>
             <div class="media">
               <div class="media-left">
@@ -60,6 +60,8 @@
 </template>
 
 <script>
+import niceLinks from './utils/niceLinks';
+
 export default {
   name: 'PinPreview',
   props: ['pinItem'],
@@ -70,6 +72,7 @@ export default {
         { name: 'pin', params: { pinId: this.pinItem.id } },
       );
     },
+    niceLinks,
   },
 };
 </script>
diff --git a/pinry-spa/src/components/Pins.vue b/pinry-spa/src/components/Pins.vue
index a096ea7..e086e16 100644
--- a/pinry-spa/src/components/Pins.vue
+++ b/pinry-spa/src/components/Pins.vue
@@ -83,6 +83,7 @@ import noMore from './noMore.vue';
 import scroll from './utils/scroll';
 import bus from './utils/bus';
 import EditorUI from './editors/PinEditorUI.vue';
+import niceLinks from './utils/niceLinks';
 
 function createImageItem(pin) {
   const image = {};
@@ -126,18 +127,6 @@ function initialData() {
   };
 }
 
-const encoder = document.createElement('div');
-function escapeHTML(text) {
-  encoder.innerText = text;
-  return encoder.innerHTML;
-}
-
-const reURL = /https?:[/][/](?:www[.])?([^/]+)(?:[/]([.]?[^\s,.<>])+)?/g;
-function niceLinks(text) {
-  if (!text) return '';
-  return escapeHTML(text).replace(reURL, '<a href="$&" target="_blank">$1</a>');
-}
-
 export default {
   name: 'pins',
   components: {
diff --git a/pinry-spa/src/components/pin_edit/PinCreateModal.vue b/pinry-spa/src/components/pin_edit/PinCreateModal.vue
index 2115ce5..c142009 100644
--- a/pinry-spa/src/components/pin_edit/PinCreateModal.vue
+++ b/pinry-spa/src/components/pin_edit/PinCreateModal.vue
@@ -13,6 +13,7 @@
                 v-on:imageUploadSucceed="onUploadDone"
                 v-on:imageUploadProcessing="onUploadProcessing"
               ></FileUpload>
+              <div class="description" v-show="pinModel.form.description.value" v-html="niceLinks(pinModel.form.description.value)"></div>
             </div>
             <div class="column">
               <b-field label="Image URL"
@@ -109,6 +110,7 @@ import bus from '../utils/bus';
 import ModelForm from '../utils/ModelForm';
 import Loading from '../utils/Loading';
 import AutoComplete from '../utils/AutoComplete';
+import niceLinks from '../utils/niceLinks';
 
 function isURLBlank(url) {
   return url !== null && url === '';
@@ -271,6 +273,7 @@ export default {
         },
       );
     },
+    niceLinks,
   },
 };
 </script>
diff --git a/pinry-spa/src/components/utils/niceLinks.js b/pinry-spa/src/components/utils/niceLinks.js
new file mode 100644
index 0000000..44e7f1b
--- /dev/null
+++ b/pinry-spa/src/components/utils/niceLinks.js
@@ -0,0 +1,13 @@
+const encoder = document.createElement('div');
+function escapeHTML(text) {
+  encoder.innerText = text;
+  return encoder.innerHTML;
+}
+
+const reURL = /https?:[/][/](?:www[.])?([^/]+)(?:[/]([.]?[^\s,.<>])+)?/g;
+function niceLinks(text) {
+  if (!text) return '';
+  return escapeHTML(text).replace(reURL, '<a href="$&" target="_blank">$1</a>');
+}
+
+export default niceLinks;