diff --git a/apps/website2/src/assets/collection_board.png b/apps/website2/src/assets/collection_board.png
new file mode 100644
index 000000000..8cbc1a72c
Binary files /dev/null and b/apps/website2/src/assets/collection_board.png differ
diff --git a/apps/website2/src/assets/collection_calendar.png b/apps/website2/src/assets/collection_calendar.png
new file mode 100644
index 000000000..0d6a4fa81
Binary files /dev/null and b/apps/website2/src/assets/collection_calendar.png differ
diff --git a/apps/website2/src/assets/collection_geomap.png b/apps/website2/src/assets/collection_geomap.png
new file mode 100644
index 000000000..cd891b646
Binary files /dev/null and b/apps/website2/src/assets/collection_geomap.png differ
diff --git a/apps/website2/src/assets/collection_table.png b/apps/website2/src/assets/collection_table.png
new file mode 100644
index 000000000..b23b4c468
Binary files /dev/null and b/apps/website2/src/assets/collection_table.png differ
diff --git a/apps/website2/src/assets/icon-color.svg b/apps/website2/src/assets/icon-color.svg
new file mode 100644
index 000000000..943f1bfe8
--- /dev/null
+++ b/apps/website2/src/assets/icon-color.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 256 256" version="1.1" viewBox="0 0 256 256" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+	<title>Trilium Notes</title>
+	<style type="text/css">
+		.st0{fill:#95C980;}
+		.st1{fill:#72B755;}
+		.st2{fill:#4FA52B;}
+		.st3{fill:#EE8C89;}
+		.st4{fill:#E96562;}
+		.st5{fill:#E33F3B;}
+		.st6{fill:#EFB075;}
+		.st7{fill:#E99547;}
+		.st8{fill:#E47B19;}
+	</style>
+	<g>
+		<path class="st0" d="m202.9 112.7c-22.5 16.1-54.5 12.8-74.9 6.3l14.8-11.8 14.1-11.3 49.1-39.3-51.2 35.9-14.3 10-14.9 10.5c0.7-21.2 7-49.9 28.6-65.4 1.8-1.3 3.9-2.6 6.1-3.8 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.4 2.8-4.9 5.4-7.4 7.8-3.4 3.5-6.8 6.4-10.1 8.8z"/>
+		<path class="st1" d="m213.1 104c-22.2 12.6-51.4 9.3-70.3 3.2l14.1-11.3 49.1-39.3-51.2 35.9-14.3 10c0.5-18.1 4.9-42.1 19.7-58.6 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.3 2.8-4.8 5.4-7.2 7.8z"/>
+		<path class="st2" d="m220.5 96.2c-21.1 8.6-46.6 5.3-63.7-0.2l49.2-39.4-51.2 35.9c0.3-15.8 3.5-36.6 14.3-52.8 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.8 66z"/>
+	
+		<path class="st3" d="m106.7 179c-5.8-21 5.2-43.8 15.5-57.2l4.8 14.2 4.5 13.4 15.9 47-12.8-47.6-3.6-13.2-3.7-13.9c15.5 6.2 35.1 18.6 40.7 38.8 0.5 1.7 0.9 3.6 1.2 5.5 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.1-3.8-7.6-1.6-3.5-2.9-6.8-3.8-10z"/>
+		<path class="st4" d="m110.4 188.9c-3.4-19.8 6.9-40.5 16.6-52.9l4.5 13.4 15.9 47-12.8-47.6-3.6-13.2c13.3 5.2 29.9 15 38.1 30.4 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.2-3.8-7.7z"/>
+		<path class="st5" d="m114.2 196.5c-0.7-18 8.6-35.9 17.3-47.1l15.9 47-12.8-47.6c11.6 4.4 26.1 12.4 35.2 24.8 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8z"/>
+
+		<path class="st6" d="m86.3 59.1c21.7 10.9 32.4 36.6 35.8 54.9l-15.2-6.6-14.5-6.3-50.6-22 48.8 24.9 13.6 6.9 14.3 7.3c-16.6 7.9-41.3 14.5-62.1 4.1-1.8-0.9-3.6-1.9-5.4-3.2-2.3-1.5-4.5-3.2-6.8-5.1-19.9-16.4-40.3-46.4-42.7-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.2 0.8 6.2 1.6 9.1 2.5 4 1.3 7.6 2.8 10.9 4.4z"/>
+		<path class="st7" d="m75.4 54.8c18.9 12 28.4 35.6 31.6 52.6l-14.5-6.3-50.6-22 48.7 24.9 13.6 6.9c-14.1 6.8-34.5 13-53.3 8.2-2.3-1.5-4.5-3.2-6.8-5.1-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.1 0.8 6.2 1.6 9.1 2.6z"/>
+		<path class="st8" d="m66.3 52.2c15.3 12.8 23.3 33.6 26.1 48.9l-50.6-22 48.8 24.9c-12.2 6-29.6 11.8-46.5 10-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3z"/>
+	</g>
+</svg>
diff --git a/apps/website2/src/assets/screenshot_desktop_win.png b/apps/website2/src/assets/screenshot_desktop_win.png
new file mode 100644
index 000000000..ab6ee05ec
Binary files /dev/null and b/apps/website2/src/assets/screenshot_desktop_win.png differ
diff --git a/apps/website2/src/assets/type_canvas.png b/apps/website2/src/assets/type_canvas.png
new file mode 100644
index 000000000..ad5c74b36
Binary files /dev/null and b/apps/website2/src/assets/type_canvas.png differ
diff --git a/apps/website2/src/assets/type_code.png b/apps/website2/src/assets/type_code.png
new file mode 100644
index 000000000..89841cdeb
Binary files /dev/null and b/apps/website2/src/assets/type_code.png differ
diff --git a/apps/website2/src/assets/type_file.png b/apps/website2/src/assets/type_file.png
new file mode 100644
index 000000000..e57ba1c4d
Binary files /dev/null and b/apps/website2/src/assets/type_file.png differ
diff --git a/apps/website2/src/assets/type_mermaid.png b/apps/website2/src/assets/type_mermaid.png
new file mode 100644
index 000000000..1e8bd7386
Binary files /dev/null and b/apps/website2/src/assets/type_mermaid.png differ
diff --git a/apps/website2/src/assets/type_mindmap.png b/apps/website2/src/assets/type_mindmap.png
new file mode 100644
index 000000000..a970d485f
Binary files /dev/null and b/apps/website2/src/assets/type_mindmap.png differ
diff --git a/apps/website2/src/assets/type_text.png b/apps/website2/src/assets/type_text.png
new file mode 100644
index 000000000..a6708c3cf
Binary files /dev/null and b/apps/website2/src/assets/type_text.png differ
diff --git a/apps/website2/src/index.html b/apps/website2/src/index.html
index ec30d6a1b..777a40e78 100644
--- a/apps/website2/src/index.html
+++ b/apps/website2/src/index.html
@@ -7,7 +7,7 @@
 
 <body>
     <header>
-        <div class="content-wrapper"><img src="api/attachments/1lkpAqzZVPxF/image/Trilium%20Notes.svg" width="300" height="300">&nbsp; <span>Trilium Notes&nbsp;</span></div>
+        <div class="content-wrapper"><img src="./assets/icon-color.svg" width="300" height="300">&nbsp; <span>Trilium Notes&nbsp;</span></div>
     </header>
 
     <section class="hero-section no-wrap">
@@ -16,8 +16,7 @@
                 <h1>Organize your thoughts. Build your personal knowledge base.</h1>
                 <p>Trilium is an open-source solution for note-taking and organizing a personal knowledge base. Use it locally on your desktop, or sync it with your self-hosted server to keep your notes everywhere you go.</p>
             </div>
-            <figure class="image"><img style="aspect-ratio:1399/858;"
-                    src="api/attachments/PFTOWM5a64xa/image/desktop-win.png" width="1399" height="858"></figure>
+            <figure class="image"><img style="aspect-ratio:1399/858;" src="./assets/screenshot_desktop_win.png"></figure>
         </div>
     </section>
 
@@ -80,28 +79,26 @@
             <h2>Note types</h2>
             <div class="note-types-container">
                 <div class="card">
-                    <img class="image" src="api/attachments/zbc0MjZY5TID/image/10_Content_image.png" width="1320"
-                            height="757">
+                    <img class="image" src="./assets/type_text.png" width="1320" height="757">
                     <p><span class="text-big"> Text notes&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><br>The notes
                         are edited using a visual (WYSIWYG) editor, with support for tables, images, math expressions,
                         code blocks with syntax highlighting. Quickly format the text using Markdown-like syntax or
                         using slash commands. </p>
                 </div>
                 <div class="card">
-                    <img class="image" src="api/attachments/Xeb66MNX1E1m/image/9_Content_image.png" width="1441"
-                            height="946">
+                    <img class="image" src="./assets/type_code.png" width="1441" height="946">
                     <p><span class="text-big"> Code notes&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><br>Large
                         samples of source code or scripts use a dedicated editor, with syntax highlighting for many
                         programming languages and with various color themes </p>
                 </div>
                 <div class="card">
-                    <img class="image" src="api/attachments/safrk4HUPpP1/image/12_Content_image.png" width="1522"
+                    <img class="image" src="./assets/type_file.png" width="1522"
                             height="942">
                     <p><span class="text-big"> File notes&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><br>Embed
                         multimedia files such as PDFs, images, videos with an in-application preview.&nbsp; </p>
                 </div>
                 <div class="card">
-                    <img class="image" src="api/attachments/Q3pAeR5Qaxy3/image/Content_canvas.png" width="835"
+                    <img class="image" src="./assets/type_canvas.png" width="835"
                             height="627">
                     <p><span class="text-big"> Canvas&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><br>Arrange
                         shapes, images and text across an infinite canvas, using the same technology behind <a
@@ -109,14 +106,14 @@
                         planning. </p>
                 </div>
                 <div class="card">
-                    <img class="image" src="api/attachments/KVKYvkZawtFs/image/Content_mermaid.png" width="831"
+                    <img class="image" src="./assets/type_mermaid.png" width="831"
                             height="640">
-                    <p><span class="text-big"> Mermaid diagrams&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <p><span class="text-big">Mermaid diagrams&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                         </span><br>Create diagrams such as flowcharts, class &amp; sequence diagrams, Gantt charts and
                         many more, using the Mermaid syntax. </p>
                 </div>
                 <div class="card">
-                    <img class="image" src="api/attachments/BPrHgo5VI6mh/image/Content_mind-map.png" width="832" height="631">
+                    <img class="image" src="./assets/type_mindmap.png" width="832" height="631">
                     <p><span class="text-big"> Mind maps&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span> &nbsp;
                         <br>Organize your thoughts visually or do a brainstorming session by using <a
                             href="https://en.wikipedia.org/wiki/Mind_map"> mind map diagrams&nbsp;&nbsp;&nbsp;&nbsp;
@@ -133,7 +130,7 @@
             <h2> Collections </h2>
             <div class="collections-container">
                 <div class="card">
-                    <img class="image" src="api/attachments/hD37lsoODKr9/image/image.png" width="1651" height="810">
+                    <img class="image" src="./assets/collection_calendar.png" width="1651" height="810">
                     <p>
                         <span class="text-big">Calendar</span><br>
                         Organize your personal or professional events using a calendar, with support for
@@ -142,20 +139,20 @@
                     </p>
                 </div>
                 <div class="card">
-                    <img src="api/attachments/rBWdy4op6kRW/image/image.png" width="1643" height="647">
+                    <img src="./assets/collection_table.png" width="1643" height="647">
                     <p>
                         <span class="text-big">Table</span><br>
                         Display and edit information about notes in a tabular structure, with various column types such as text, number, check boxes, date &amp; time, links and colors and support for relations. Optionally, display the notes within a tree hierarchy inside the table. </p>
                 </div>
                 <div class="card">
-                    <img src="api/attachments/wRmQeXJyYQd5/image/image.png" width="1174" height="850">
+                    <img src="./assets/collection_board.png" width="1174" height="850">
                     <p>
                         <span class="text-big"> Board</span><br>
                         Organize your tasks or project status into a Kanban board with an easy way to create new items and columns and simply changing their status by dragging across the board.
                     </p>
                 </div>
                 <div class="card">
-                    <img class="image" src="api/attachments/qMaHODYKElmQ/image/image.png" width="844" height="639">
+                    <img class="image" src="./assets/collection_geomap.png" width="844" height="639">
                     <p>
                         <span class="text-big">Geomap</span><br>
                         Plan your vacations or mark your points of interest directly on a geographical map