diff --git a/frontend/src/components/MediaContent.vue b/frontend/src/components/MediaContent.vue
index 8151dbf..8a37124 100644
--- a/frontend/src/components/MediaContent.vue
+++ b/frontend/src/components/MediaContent.vue
@@ -18,27 +18,27 @@ export default defineComponent({
     };
 
     const nl2br = function (content) {
-      var breakTag = typeof is_xhtml === "undefined" ? "<br />" : "<br>";
+      var breakTag = "<br>";
       return (content + "").replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, "$1" + breakTag + "$2");
     }
 
 
     const replaceTags = (content) => {
-      content = content.replace(/#(\S+)/g, '<a href="/search?tag=$1">#$1</a>');
+      content = content.replace(/#(\S+)/g, '<a class="link" href="/search?tag=$1">#$1</a>');
       return content;
     }
 
     const replaceLinks = (content) => {
-      content = content.replace(/(https?:\/\/\S+)/g, '<a href="$1" target="_blank">$1</a>');
+      content = content.replace(/(https?:\/\/\S+)/g, '<a class="link" href="$1" target="_blank">$1</a>');
       return content;
     }
 
     const processedContent = computed(() => {
       let content = props.content.trim();
 
-      content = nl2br(content, false);
       content = replaceTags(content)
       content = replaceLinks(content)
+      content = nl2br(content);
 
       return content;
     });
@@ -51,3 +51,9 @@ export default defineComponent({
   },
 });
 </script>
+
+<style>
+.link {
+  @apply hover:text-sky-300 text-sky-500;
+}
+</style>