diff --git a/apps/client/src/services/content_renderer.css b/apps/client/src/services/content_renderer.css
new file mode 100644
index 0000000000..a44fa54a29
--- /dev/null
+++ b/apps/client/src/services/content_renderer.css
@@ -0,0 +1,12 @@
+.rendered-content.no-preview {
+    display: flex;
+    flex-direction: column;
+
+    & > div {
+        justify-content: space-around;
+        align-items: center;
+        height: 100%;
+        font-size: 500%;
+        flex-grow: 1;
+    }
+}
diff --git a/apps/client/src/services/content_renderer.ts b/apps/client/src/services/content_renderer.ts
index 4fbf51024c..50fc94580d 100644
--- a/apps/client/src/services/content_renderer.ts
+++ b/apps/client/src/services/content_renderer.ts
@@ -1,3 +1,5 @@
+import "./content_renderer.css";
+
 import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
 import WheelZoom from 'vanilla-js-wheel-zoom';
 
@@ -71,18 +73,9 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
 
         $renderedContent.append($("<div>").append("<div>This note is protected and to access it you need to enter password.</div>").append("<br/>").append($button));
     } else if (entity instanceof FNote) {
-        $renderedContent
-            .css("display", "flex")
-            .css("flex-direction", "column");
+        $renderedContent.addClass("no-preview");
         $renderedContent.append(
-            $("<div>")
-                .css("display", "flex")
-                .css("justify-content", "space-around")
-                .css("align-items", "center")
-                .css("height", "100%")
-                .css("font-size", "500%")
-                .css("flex-grow", "1")
-                .append($("<span>").addClass(entity.getIcon()))
+            $("<div>").append($("<span>").addClass(entity.getIcon()))
         );
 
         if (entity.type === "webView" && entity.hasLabel("webViewSrc")) {