diff --git a/assets/icons/archive.svg b/assets/icons/archive.svg
new file mode 100644
index 000000000..428882c87
--- /dev/null
+++ b/assets/icons/archive.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/arrow-left.svg b/assets/icons/arrow-left.svg
new file mode 100644
index 000000000..a5058fc73
--- /dev/null
+++ b/assets/icons/arrow-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/arrow-right.svg b/assets/icons/arrow-right.svg
new file mode 100644
index 000000000..939b57c5b
--- /dev/null
+++ b/assets/icons/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/at-sign.svg b/assets/icons/at-sign.svg
new file mode 100644
index 000000000..5a5e5d0d8
--- /dev/null
+++ b/assets/icons/at-sign.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-at-sign"><circle cx="12" cy="12" r="4"></circle><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/auth/github.svg b/assets/icons/auth/github.svg
new file mode 100644
index 000000000..00ac02388
--- /dev/null
+++ b/assets/icons/auth/github.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
diff --git a/assets/icons/auth/google.svg b/assets/icons/auth/google.svg
new file mode 100644
index 000000000..a207cee5e
--- /dev/null
+++ b/assets/icons/auth/google.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/></svg>
diff --git a/assets/icons/book-open.svg b/assets/icons/book-open.svg
new file mode 100644
index 000000000..5e0ca0ab7
--- /dev/null
+++ b/assets/icons/book-open.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book-open"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/book.svg b/assets/icons/book.svg
new file mode 100644
index 000000000..12ffcbc46
--- /dev/null
+++ b/assets/icons/book.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/check-circle.svg b/assets/icons/check-circle.svg
new file mode 100644
index 000000000..f2f4fd1af
--- /dev/null
+++ b/assets/icons/check-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/check.svg b/assets/icons/check.svg
new file mode 100644
index 000000000..1c209899d
--- /dev/null
+++ b/assets/icons/check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/chevron-down.svg b/assets/icons/chevron-down.svg
new file mode 100644
index 000000000..278c6a315
--- /dev/null
+++ b/assets/icons/chevron-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/chevron-right.svg b/assets/icons/chevron-right.svg
new file mode 100644
index 000000000..258de414a
--- /dev/null
+++ b/assets/icons/chevron-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/chrome.svg b/assets/icons/chrome.svg
index 7ebfe7a86..42eb88b4b 100644
--- a/assets/icons/chrome.svg
+++ b/assets/icons/chrome.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient x1="49.998%" y1=".706%" x2="49.998%" y2="96.99%" id="IconifyId-17b2bfeca9d-d6badc-3320"><stop stop-color="#86BBE5" offset="0%"></stop><stop stop-color="#1072BA" offset="100%"></stop></linearGradient></defs><path d="M127.789.035s75.32-3.38 115.253 72.328H121.38s-22.96-.74-42.573 27.114c-5.634 11.691-11.69 23.734-4.894 47.468c-9.79-16.586-51.975-90.04-51.975-90.04S51.693 3.028 127.788.035z" fill="#EF3F36"></path><path d="M239.133 192.229s-34.756 66.94-120.253 63.63c10.564-18.276 60.848-105.358 60.848-105.358s12.149-19.508-2.183-50.425c-7.29-10.74-14.72-21.973-38.664-27.96c19.262-.175 103.95 0 103.95 0s31.726 52.715-3.698 120.113z" fill="#FCD900"></path><path d="M16.973 192.757s-40.601-63.56 5.035-135.958c10.529 18.276 60.813 105.358 60.813 105.358s10.846 20.283 44.756 23.31c12.924-.95 26.375-1.76 43.56-19.472C161.663 182.757 119.16 256 119.16 256s-61.552 1.127-102.188-63.243z" fill="#61BC5B"></path><path d="M118.845 256.493l17.113-71.412s18.804-1.48 34.58-18.769c-9.79 17.22-51.693 90.181-51.693 90.181z" fill="#5AB055"></path><path d="M70.462 129.056c0-31.48 25.53-57.01 57.01-57.01c31.48 0 57.01 25.53 57.01 57.01c0 31.481-25.53 57.01-57.01 57.01c-31.48-.035-57.01-25.529-57.01-57.01z" fill="#FFF"></path><path d="M80.004 129.056c0-26.198 21.234-47.467 47.468-47.467c26.198 0 47.467 21.234 47.467 47.467c0 26.199-21.233 47.468-47.467 47.468c-26.199 0-47.468-21.269-47.468-47.468z" fill="url(#IconifyId-17b2bfeca9d-d6badc-3320)"></path><path d="M242.795 72.152l-70.462 20.67s-10.634-15.6-33.487-20.67c19.825-.106 103.949 0 103.949 0z" fill="#EACA05"></path><path d="M72.54 144.339c-9.896-17.149-50.602-87.434-50.602-87.434l52.186 51.622s-5.353 11.022-3.345 26.797l1.76 9.015z" fill="#DF3A32"></path></svg>
\ No newline at end of file
+<svg role="img" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C8.21 0 4.831 1.757 2.632 4.501l3.953 6.848A5.454 5.454 0 0 1 12 6.545h10.691A12 12 0 0 0 12 0zM1.931 5.47A11.943 11.943 0 0 0 0 12c0 6.012 4.42 10.991 10.189 11.864l3.953-6.847a5.45 5.45 0 0 1-6.865-2.29zm13.342 2.166a5.446 5.446 0 0 1 1.45 7.09l.002.001h-.002l-5.344 9.257c.206.01.413.016.621.016 6.627 0 12-5.373 12-12 0-1.54-.29-3.011-.818-4.364zM12 16.364a4.364 4.364 0 1 1 0-8.728 4.364 4.364 0 0 1 0 8.728Z"/></svg>
diff --git a/assets/icons/circle.svg b/assets/icons/circle.svg
new file mode 100644
index 000000000..b0090882b
--- /dev/null
+++ b/assets/icons/circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>
\ No newline at end of file
diff --git a/assets/icons/cloud.svg b/assets/icons/cloud.svg
new file mode 100644
index 000000000..0ee0c6322
--- /dev/null
+++ b/assets/icons/cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/code.svg b/assets/icons/code.svg
new file mode 100644
index 000000000..c4954b55a
--- /dev/null
+++ b/assets/icons/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/copy.svg b/assets/icons/copy.svg
new file mode 100644
index 000000000..4e0b09f19
--- /dev/null
+++ b/assets/icons/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/download.svg b/assets/icons/download.svg
new file mode 100644
index 000000000..76767a924
--- /dev/null
+++ b/assets/icons/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/edit.svg b/assets/icons/edit.svg
new file mode 100644
index 000000000..ec7b4ca2d
--- /dev/null
+++ b/assets/icons/edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/external-link.svg b/assets/icons/external-link.svg
new file mode 100644
index 000000000..6236df3e0
--- /dev/null
+++ b/assets/icons/external-link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/eye-off.svg b/assets/icons/eye-off.svg
new file mode 100644
index 000000000..77c54cb41
--- /dev/null
+++ b/assets/icons/eye-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/eye.svg b/assets/icons/eye.svg
new file mode 100644
index 000000000..9cde24372
--- /dev/null
+++ b/assets/icons/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
\ No newline at end of file
diff --git a/assets/icons/facebook.svg b/assets/icons/facebook.svg
index 53ee320d6..2570f56a0 100644
--- a/assets/icons/facebook.svg
+++ b/assets/icons/facebook.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M241.871 256.001c7.802 0 14.129-6.326 14.129-14.129V14.129C256 6.325 249.673 0 241.871 0H14.129C6.324 0 0 6.325 0 14.129v227.743c0 7.803 6.324 14.129 14.129 14.129h227.742" fill="#395185"></path><path d="M176.635 256.001v-99.137h33.277l4.982-38.635h-38.259V93.561c0-11.186 3.107-18.809 19.148-18.809l20.459-.009V40.188c-3.54-.471-15.684-1.523-29.812-1.523c-29.498 0-49.692 18.005-49.692 51.071v28.493h-33.362v38.635h33.362v99.137h39.897" fill="#FFF"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/file-plus.svg b/assets/icons/file-plus.svg
new file mode 100644
index 000000000..eed120047
--- /dev/null
+++ b/assets/icons/file-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-plus"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/file-text.svg b/assets/icons/file-text.svg
new file mode 100644
index 000000000..4197ddd40
--- /dev/null
+++ b/assets/icons/file-text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/file.svg b/assets/icons/file.svg
new file mode 100644
index 000000000..378519ab6
--- /dev/null
+++ b/assets/icons/file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/firefox.svg b/assets/icons/firefox.svg
index 99912aa45..58c2f7250 100644
--- a/assets/icons/firefox.svg
+++ b/assets/icons/firefox.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="30.92" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 265"><defs><radialGradient id="IconifyId-17b2bfeca9d-d6badc-3688" cx="-14920.226" cy="-8274.071" r="124.382" fx="-14928.161" fy="-8274.071" gradientTransform="matrix(.7398 .0292 -.04867 1.0902 10886.526 9537.696)" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#ffea00"></stop><stop offset=".17" stop-color="#ffde00"></stop><stop offset=".28" stop-color="#ffbf00"></stop><stop offset=".43" stop-color="#ff8e00"></stop><stop offset=".77" stop-color="#ff272d"></stop><stop offset=".87" stop-color="#e0255a"></stop><stop offset=".95" stop-color="#cc2477"></stop><stop offset="1" stop-color="#c42482"></stop></radialGradient><radialGradient id="IconifyId-17b2bfeca9d-d6badc-3689" cx="-8176.534" cy="-7746.301" r="218.273" gradientTransform="translate(9957.373 9315.522) scale(1.1973)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00ccda"></stop><stop offset=".22" stop-color="#0083ff"></stop><stop offset=".26" stop-color="#007af9"></stop><stop offset=".33" stop-color="#0060e8"></stop><stop offset=".33" stop-color="#005fe7"></stop><stop offset=".44" stop-color="#2639ad"></stop><stop offset=".52" stop-color="#401e84"></stop><stop offset=".57" stop-color="#4a1475"></stop></radialGradient><radialGradient id="IconifyId-17b2bfeca9d-d6badc-3690" cx="-9132.676" cy="-6696.7" r="73.626" gradientTransform="matrix(1.1875 .1168 -.1168 1.1875 10322.184 9194.845)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffea00"></stop><stop offset=".5" stop-color="#ff272d"></stop><stop offset="1" stop-color="#c42482"></stop></radialGradient><radialGradient id="IconifyId-17b2bfeca9d-d6badc-3691" cx="-9139.338" cy="-6767.297" r="122.948" gradientTransform="matrix(1.1875 .1168 -.1168 1.1875 10322.184 9194.845)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffe900"></stop><stop offset=".16" stop-color="#ffaf0e"></stop><stop offset=".32" stop-color="#ff7a1b"></stop><stop offset=".47" stop-color="#ff4e26"></stop><stop offset=".62" stop-color="#ff2c2e"></stop><stop offset=".76" stop-color="#ff1434"></stop><stop offset=".89" stop-color="#ff0538"></stop><stop offset="1" stop-color="#ff0039"></stop></radialGradient><radialGradient id="IconifyId-17b2bfeca9d-d6badc-3692" cx="-9121.947" cy="-6653.326" r="112.818" gradientTransform="matrix(1.1875 .1168 -.1168 1.1875 10322.184 9194.845)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff272d"></stop><stop offset=".5" stop-color="#c42482"></stop><stop offset=".99" stop-color="#620700"></stop></radialGradient><radialGradient id="IconifyId-17b2bfeca9d-d6badc-3693" cx="227.574" cy="408.42" r="215.776" fx="235.292" fy="404.605" gradientTransform="translate(-29.473 -291.75) scale(.9734)" gradientUnits="userSpaceOnUse"><stop offset=".16" stop-color="#ffea00"></stop><stop offset=".23" stop-color="#ffde00"></stop><stop offset=".37" stop-color="#ffbf00"></stop><stop offset=".54" stop-color="#ff8e00"></stop><stop offset=".76" stop-color="#ff272d"></stop><stop offset=".8" stop-color="#f92433"></stop><stop offset=".84" stop-color="#e91c45"></stop><stop offset=".89" stop-color="#cf0e62"></stop><stop offset=".94" stop-color="#b5007f"></stop></radialGradient><radialGradient id="IconifyId-17b2bfeca9d-d6badc-3694" cx="215.202" cy="308.35" r="245.92" gradientTransform="translate(-29.473 -291.75) scale(.9734)" gradientUnits="userSpaceOnUse"><stop offset=".28" stop-color="#ffea00"></stop><stop offset=".4" stop-color="#fd0"></stop><stop offset=".63" stop-color="#ffba00"></stop><stop offset=".86" stop-color="#ff9100"></stop><stop offset=".93" stop-color="#ff6711"></stop><stop offset=".99" stop-color="#ff4a1d"></stop></radialGradient><linearGradient id="IconifyId-17b2bfeca9d-d6badc-3695" gradientUnits="userSpaceOnUse" x1="145.243" y1="481.786" x2="93.837" y2="313.629" gradientTransform="translate(0 -286)"><stop offset="0" stop-color="#000f43" stop-opacity=".4"></stop><stop offset=".48" stop-color="#001962" stop-opacity=".17"></stop><stop offset="1" stop-color="#002079" stop-opacity="0"></stop></linearGradient><linearGradient id="IconifyId-17b2bfeca9d-d6badc-3696" gradientUnits="userSpaceOnUse" x1="-9348.662" y1="-6754.194" x2="-9266.217" y2="-6775.209" gradientTransform="matrix(1.22 .12 -.12 1.22 10634.76 9460)"><stop offset="0" stop-color="#c42482" stop-opacity=".5"></stop><stop offset=".47" stop-color="#ff272d" stop-opacity=".5"></stop><stop offset=".49" stop-color="#ff2c2c" stop-opacity=".51"></stop><stop offset=".68" stop-color="#ff7a1a" stop-opacity=".72"></stop><stop offset=".83" stop-color="#ffb20d" stop-opacity=".87"></stop><stop offset=".94" stop-color="#ffd605" stop-opacity=".96"></stop><stop offset="1" stop-color="#ffe302"></stop></linearGradient><linearGradient id="IconifyId-17b2bfeca9d-d6badc-3697" gradientUnits="userSpaceOnUse" x1="103.092" y1="-1126.781" x2="88.439" y2="-1164.334" gradientTransform="matrix(.99 .1 -.1 .99 -175.62 1176.21)"><stop offset="0" stop-color="#891551" stop-opacity=".6"></stop><stop offset="1" stop-color="#c42482" stop-opacity="0"></stop></linearGradient><linearGradient id="IconifyId-17b2bfeca9d-d6badc-3698" gradientUnits="userSpaceOnUse" x1="-193.279" y1="534.177" x2="-168.009" y2="562.877" gradientTransform="matrix(.99 .1 -.1 .99 303.51 -384.2)"><stop offset=".01" stop-color="#891551" stop-opacity=".5"></stop><stop offset=".48" stop-color="#ff272d" stop-opacity=".5"></stop><stop offset="1" stop-color="#ff272d" stop-opacity="0"></stop></linearGradient><linearGradient id="IconifyId-17b2bfeca9d-d6badc-3699" gradientUnits="userSpaceOnUse" x1="-144.684" y1="583.677" x2="-144.665" y2="563.596" gradientTransform="matrix(.99 .1 -.1 .99 303.51 -384.2)"><stop offset="0" stop-color="#c42482"></stop><stop offset=".08" stop-color="#c42482" stop-opacity=".81"></stop><stop offset=".21" stop-color="#c42482" stop-opacity=".57"></stop><stop offset=".33" stop-color="#c42482" stop-opacity=".36"></stop><stop offset=".45" stop-color="#c42482" stop-opacity=".2"></stop><stop offset=".56" stop-color="#c42482" stop-opacity=".09"></stop><stop offset=".67" stop-color="#c42482" stop-opacity=".02"></stop><stop offset=".77" stop-color="#c42482" stop-opacity="0"></stop></linearGradient><linearGradient id="IconifyId-17b2bfeca9d-d6badc-3700" gradientUnits="userSpaceOnUse" x1="166.591" y1="295.714" x2="248.667" y2="479.246" gradientTransform="translate(0 -286)"><stop offset="0" stop-color="#fff14f"></stop><stop offset=".27" stop-color="#ffee4c"></stop><stop offset=".45" stop-color="#ffe643"></stop><stop offset=".61" stop-color="#ffd834"></stop><stop offset=".76" stop-color="#ffc41e"></stop><stop offset=".89" stop-color="#ffab02"></stop><stop offset=".9" stop-color="#ffa900"></stop><stop offset=".95" stop-color="#ffa000"></stop><stop offset="1" stop-color="#ff9100"></stop></linearGradient><linearGradient id="IconifyId-17b2bfeca9d-d6badc-3701" gradientUnits="userSpaceOnUse" x1="182.888" y1="401.274" x2="144.011" y2="505.662" gradientTransform="translate(0 -286)"><stop offset="0" stop-color="#ff8e00"></stop><stop offset=".04" stop-color="#ff8e00" stop-opacity=".86"></stop><stop offset=".08" stop-color="#ff8e00" stop-opacity=".73"></stop><stop offset=".13" stop-color="#ff8e00" stop-opacity=".63"></stop><stop offset=".18" stop-color="#ff8e00" stop-opacity=".56"></stop><stop offset=".23" stop-color="#ff8e00" stop-opacity=".51"></stop><stop offset=".28" stop-color="#ff8e00" stop-opacity=".5"></stop><stop offset=".39" stop-color="#ff8e00" stop-opacity=".48"></stop><stop offset=".52" stop-color="#ff8e00" stop-opacity=".42"></stop><stop offset=".68" stop-color="#ff8e00" stop-opacity=".31"></stop><stop offset=".84" stop-color="#ff8e00" stop-opacity=".17"></stop><stop offset="1" stop-color="#ff8e00" stop-opacity="0"></stop></linearGradient></defs><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3688)" d="M206.8 24.6c-6.4 7.5-9.4 24.3-2.9 41.4s16.5 13.4 22.7 30.8c8.2 23 4.4 53.9 4.4 53.9s9.9 28.6 16.8-1.8c15.3-57.1-41-110.2-41-124.3z"></path><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3689)" d="M128.4 261.7c65.9 0 119.2-53.6 119.2-119.8S194.2 22.2 128.4 22.2S9.3 75.8 9.3 141.9c-.1 66.2 53.3 119.8 119.1 119.8z"></path><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3695)" d="M217.7 215.8c-2.6 1.8-5.3 3.4-8.1 4.9c3.7-5.5 7.2-11.1 10.3-16.9c2.5-2.8 4.9-5.5 6.8-8.5c.9-1.5 2-3.2 3.1-5.3c6.7-12.1 14.1-31.6 14.3-51.6v-1.5c0-5-.5-10.1-1.5-15c.1.4.1.8.2 1.2c-.1-.3-.1-.6-.2-.9c.1.5.2 1.1.3 1.6c1.4 11.6.4 22.9-4.5 31.3c-.1.1-.2.2-.2.4c2.5-12.7 3.4-26.7.6-40.7c0 0-1.1-6.8-9.5-27.5c-4.8-11.9-13.4-21.7-20.9-28.8c-6.6-8.2-12.7-13.7-16-17.2c-6.9-7.3-9.8-12.8-11-16.3c-1-.5-14.3-13.4-15.3-13.9c-5.8 9-23.9 37-15.3 63.1c3.9 11.9 13.8 24.2 24.2 31.1c.5.5 6.2 6.7 8.9 20.7c2.8 14.5 1.3 25.7-4.4 42.4c-6.8 14.6-24.2 29.1-40.5 30.6c-34.8 3.2-47.6-17.5-47.6-17.5c12.4 5 26.2 3.9 34.6-1.2c8.4-5.2 13.5-9.1 17.7-7.6c4.1 1.5 7.3-2.9 4.4-7.5c-4.6-7.1-13-10.7-21.3-9.3c-8.4 1.4-16.2 8.1-27.2 1.6c-.7-.4-1.4-.9-2.1-1.4s2.4.7 1.6.2c-2.1-1.2-6-3.7-6.9-4.6c-.2-.2 1.7.6 1.5.4c-10.3-8.5-9-14.3-8.7-17.9c.3-2.9 2.1-6.6 5.3-8.1c1.5.8 2.5 1.5 2.5 1.5s-.7-1.3-1-2c.1-.1.2 0 .4-.1c1.3.6 4 2.2 5.5 3.1c1.9 1.3 2.5 2.5 2.5 2.5s.5-.3.1-1.4c-.1-.5-.7-2-2.6-3.5h.1c1.1.6 2.2 1.4 3.2 2.2c.5-1.9 1.5-3.9 1.3-7.5c-.1-2.5-.1-3.2-.5-4.2c-.4-.8.2-1.2.9-.3c-.1-.7-.3-1.4-.6-2v-.1c.9-3 18.3-10.9 19.6-11.8c2.1-1.5 3.8-3.4 5.1-5.6c1-1.5 1.7-3.7 1.9-7c.1-2.4-1-4-18.7-5.8c-4.8-.5-7.7-4-9.3-7.2c-.3-.7-.6-1.3-.9-2s-.5-1.5-.7-2.3c2.9-8.3 7.7-15.3 14.9-20.6c.4-.4-1.6.1-1.2-.3c.5-.4 3.4-1.6 4-1.9c.7-.3-2.9-1.9-6.1-1.5s-3.9.8-5.7 1.5c.7-.7 3-1.7 2.5-1.6c-3.5.5-7.8 2.6-11.5 4.9c0-.4.1-.8.2-1.2c-1.7.7-6 3.7-7.2 6.2c.1-.5.1-1 .1-1.5c-1.3 1.1-2.5 2.3-3.5 3.7l-.6.2c-10-4-18.9-4.3-26.3-2.5c-1.6-1.6-2.4-.4-6.2-8.6c-.3-.5.2.5 0 0c-.6-1.6.4 2.1 0 0c-6.2 5-14.4 10.6-18.4 14.5c0 .2 4.6-1.3 0 0c-1.6.5-1.5 1.4-1.7 10.1c-.1.7 0 1.4-.1 2c-3.2 4-5.3 7.4-6.1 9.2c-4.1 7-8.6 18-12.9 35.3c1.9-4.7 4.2-9.2 6.9-13.5c-3.6 9.2-7.1 23.7-7.8 45.9c.9-4.6 2-9.1 3.4-13.6c-.9 18.5 2.3 36.9 9.3 54c2.5 6.1 6.6 15.4 13.7 25.6c22.2 23.3 53.4 37.8 88 37.8c36.1 0 68.6-15.8 90.9-40.9z"></path><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3690)" d="M190.9 232.7c43.7-5.1 63.1-50.1 38.2-51c-22.4-.7-58.9 53.4-38.2 51z"></path><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3691)" d="M232.3 172.5c30.1-17.5 22.2-55.3 22.2-55.3s-11.6 13.5-19.5 35c-7.7 21.3-20.8 30.9-2.7 20.3z"></path><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3692)" d="M136.8 255.1c42 13.4 78-19.7 55.8-30.7c-20.2-9.9-75.7 24.4-55.8 30.7z"></path><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3693)" d="M235.5 188.6c1-1.4 2.4-6 3.6-8.1c7.4-12 7.5-21.5 7.5-21.7c4.5-22.3 4.1-31.5 1.3-48.3c-2.2-13.6-11.9-33.1-20.3-42.4c-8.6-9.7-2.6-6.5-10.9-13.6c-7.3-8.1-14.5-16.2-18.3-19.4c-28-23.4-27.4-28.4-26.8-29.2l-.4.4c-.3-1.3-.6-2.4-.6-2.4S155.2 19.1 152 44.6c-2.1 16.6 4.1 34 13.2 45.1c4.7 5.8 10 11 15.8 15.6c6.8 9.8 10.6 21.9 10.6 34.9c0 32.6-26.4 58.9-59 58.9c-4.4 0-8.9-.5-13.2-1.5c-15.4-2.9-24.2-10.7-28.7-16c-2.5-3-3.6-5.2-3.6-5.2c13.8 4.9 29 3.9 38.3-1.2c9.3-5.2 15-9 19.6-7.5c4.5 1.5 8.1-2.9 4.9-7.4c-3.2-4.5-11.4-11-23.6-9.2c-9.3 1.4-17.9 8-30.1 1.6c-.8-.4-1.6-.9-2.3-1.3c-.8-.5 2.6.7 1.8.2c-2.4-1.2-6.6-3.7-7.7-4.6c-.2-.2 1.8.6 1.7.4c-11.4-8.4-10-14.1-9.7-17.7c.3-2.9 2.4-6.5 5.9-8c1.7.8 2.7 1.5 2.7 1.5s-.7-1.3-1.1-2c.1-.1.3 0 .4-.1c1.4.6 4.5 2.1 6.1 3.1c2.1 1.3 2.8 2.5 2.8 2.5s.6-.3.1-1.4c-.2-.5-.8-2-2.9-3.5h.1c1.2.6 2.4 1.4 3.5 2.2c.6-1.9 1.6-3.9 1.4-7.5c-.1-2.5-.1-3.2-.6-4.1c-.4-.8.2-1.2 1-.3c-.1-.7-.4-1.3-.7-2v-.1c1-3 20.3-10.8 21.7-11.7c2.3-1.4 4.2-3.3 5.7-5.5c1.1-1.5 1.9-3.7 2.1-7c.1-1.5-.4-2.6-5.5-3.8c-3.1-.7-7.8-1.3-15.2-2c-5.3-.5-8.5-3.9-10.3-7.1c-.3-.7-.7-1.3-1-1.9c-.3-.7-.6-1.5-.8-2.2c3.2-8.4 9-15.5 16.5-20.4c.4-.4-1.7.1-1.3-.3c.5-.4 3.8-1.6 4.4-1.9c.8-.3-3.2-1.8-6.8-1.5c-3.6.4-4.3.7-6.3 1.5c.8-.7 3.3-1.6 2.7-1.6c-3.6.4-8.4 2.4-12.5 4.7c0-.4.1-.8.2-1.2c-1.9.7-6.6 3.7-8 6.2c.1-.5.1-1 .1-1.4c-1.4 1.1-2.8 2.3-3.9 3.7l-.1.1c-11.1-4-20.9-4.3-29.1-2.5c-1.8-1.6-4.7-4.1-8.8-12.2c-.3-.5-.4 1-.6.5c-1.6-3.7-2.6-9.8-2.4-14c0 0-3.3 1.5-6 7.8c-.5 1.1-.8 1.8-1.2 2.4c-.2.2.3-2.1.3-1.9c-.5.8-1.7 1.9-2.2 3.4c-.4 1.1-.9 1.7-1.2 3l-.1.1c0-.4.1-1.6 0-1.4c-1.3 2.6-2.4 5.3-3.3 8c-1.5 4.8-3.2 11.4-3.5 20c-.1.6 0 1.4-.1 2c-3.5 4-5.9 7.4-6.8 9.1c-4.5 7-9.5 17.8-14.3 35c2.1-4.7 4.7-9.2 7.7-13.4c-4 9.1-7.9 23.5-8.7 45.5c1-4.6 2.2-9.1 3.7-13.5c-.7 14.7 1 33 10.3 53.6c5.5 12.1 18.2 36.7 49.3 55.9c0 0 10.6 7.9 28.7 13.8c1.3.5 2.7 1 4.1 1.4c-.4-.2-.9-.4-1.3-.5c12.1 3.6 24.6 5.5 37.3 5.5c47 0 60.9-18.9 60.9-18.9l-.1.1c.7-.6 1.3-1.3 1.9-1.9c-7.4 7-24.4 7.5-30.7 7c10.8-3.2 17.9-5.9 31.7-11.1c1.6-.6 3.3-1.3 5-2.1l.5-.3c.3-.2.7-.3 1-.5c6.7-3.2 13.1-7.1 18.9-11.8c13.9-11.1 16.9-21.9 18.5-29c-.2.7-.9 2.3-1.4 3.3c-3.6 7.6-11.5 12.4-20.1 16.4c4.1-5.4 7.9-11 11.4-16.8c2.8-2.8 3.6-7.2 5.8-10.1z"></path><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3694)" d="M218.6 215.1c5.7-6.2 10.7-13.4 14.6-21.5c9.9-20.8 25.2-55.5 13.2-91.6c-9.5-28.6-22.6-44.2-39.2-59.5c-27-24.8-34.5-35.9-34.5-42.5c0 0-31.2 34.7-17.7 71s41.2 34.9 59.5 72.7c21.6 44.5-17.4 93.1-49.7 106.7c2-.4 71.7-16.2 75.4-56.1c-.2.7-1.8 11.8-21.6 20.8z"></path><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3696)" d="M128.2 85.8c.1-2.4-1.1-3.9-20.6-5.8c-8-.7-11.1-8.1-12-11.3c-2.8 7.4-4 15.2-3.4 24.6c.4 6.2 4.6 12.8 6.5 16.6c0 0 .4-.6.6-.8c3.7-3.9 19.3-9.8 20.8-10.6c1.7-1 7.9-5.5 8.1-12.7z"></path><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3697)" d="M42.5 42c-.3-.5-.4 1-.6.5c-1.6-3.7-2.6-9.7-2.3-14c0 0-3.3 1.5-6 7.8c-.5 1.1-.8 1.8-1.2 2.4c-.2.2.3-2.1.3-1.9c-.5.8-1.7 1.9-2.2 3.3c-.4 1.1-.9 1.8-1.2 3.2c-.1.4.1-1.7 0-1.4c-6.4 12.3-7.6 30.9-6.9 30.1C36 57.5 51.5 54.1 51.5 54.1c-1.9-1.2-5.5-4.8-9-12.1z"></path><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3698)" d="M93.9 193.4c-18.7-8-40-19.3-39.2-44.9c1.1-33.7 31.5-27.1 31.5-27.1c-1.1.3-4.2 2.5-5.3 4.8c-1.1 2.9-3.2 9.5 3.1 16.4c10 10.8-20.5 25.6 26.5 53.6c1.2.6-11-.4-16.6-2.8z"></path><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3699)" d="M87.3 176.6c13.3 4.6 28.7 3.8 38-1.3c6.2-3.5 14.2-9 19-7.6c-4.2-1.7-7.4-2.5-11.3-2.6c-.7 0-1.4 0-2.1-.1c-1.4 0-2.8.1-4.2.2c-2.4.2-5 1.7-7.4 1.5c-.1 0 2.3-1 2.1-1c-1.3.3-2.7.3-4.1.5c-.9.1-1.7.2-2.7.3c-27.7 2.3-51-15-51-15c-2 6.6 8.9 19.9 23.7 25.1z"></path><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3700)" d="M218.5 215.3c28-27.5 42.1-60.8 36.1-98.3c0 0 2.4 19.2-6.7 38.8c4.4-19.2 4.9-43-6.7-67.7c-15.4-32.9-40.8-50.3-50.5-57.5c-14.7-11-20.8-22.1-20.9-24.4c-4.4 9-17.7 39.8-1.4 66.3c15.2 24.9 39.2 32.2 55.9 55c31 42.1-5.8 87.8-5.8 87.8z"></path><path fill="url(#IconifyId-17b2bfeca9d-d6badc-3701)" d="M214.5 143.8c-9.8-20.2-22-29-33.5-38.5c1.3 1.9 1.7 2.5 2.4 3.8c10.2 10.8 25.1 37.2 14.3 70.4c-20.5 62.4-102.3 33-110.9 24.8c3.5 36.1 63.9 53.4 103.3 30c22.3-21.4 40.4-57.4 24.4-90.5z"></path></svg>
\ No newline at end of file
+<svg role="img" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M20.452 3.445a11.002 11.002 0 00-2.482-1.908C16.944.997 15.098.093 12.477.032c-.734-.017-1.457.03-2.174.144-.72.114-1.398.292-2.118.56-1.017.377-1.996.975-2.574 1.554.583-.349 1.476-.733 2.55-.992a10.083 10.083 0 013.729-.167c2.341.34 4.178 1.381 5.48 2.625a8.066 8.066 0 011.298 1.587c1.468 2.382 1.33 5.376.184 7.142-.85 1.312-2.67 2.544-4.37 2.53-.583-.023-1.438-.152-2.25-.566-2.629-1.343-3.021-4.688-1.118-6.306-.632-.136-1.82.13-2.646 1.363-.742 1.107-.7 2.816-.242 4.028a6.473 6.473 0 01-.59-1.895 7.695 7.695 0 01.416-3.845A8.212 8.212 0 019.45 5.399c.896-1.069 1.908-1.72 2.75-2.005-.54-.471-1.411-.738-2.421-.767C8.31 2.583 6.327 3.061 4.7 4.41a8.148 8.148 0 00-1.976 2.414c-.455.836-.691 1.659-.697 1.678.122-1.445.704-2.994 1.248-4.055-.79.413-1.827 1.668-2.41 3.042C.095 9.37-.2 11.608.14 13.989c.966 5.668 5.9 9.982 11.843 9.982C18.62 23.971 24 18.591 24 11.956a11.93 11.93 0 00-3.548-8.511z"/></svg>
diff --git a/assets/icons/folder-minus.svg b/assets/icons/folder-minus.svg
new file mode 100644
index 000000000..d5b7af65f
--- /dev/null
+++ b/assets/icons/folder-minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder-minus"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="9" y1="14" x2="15" y2="14"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/folder-plus.svg b/assets/icons/folder-plus.svg
new file mode 100644
index 000000000..898f2fc98
--- /dev/null
+++ b/assets/icons/folder-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder-plus"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="12" y1="11" x2="12" y2="17"></line><line x1="9" y1="14" x2="15" y2="14"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/folder.svg b/assets/icons/folder.svg
new file mode 100644
index 000000000..134458b98
--- /dev/null
+++ b/assets/icons/folder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/gift.svg b/assets/icons/gift.svg
new file mode 100644
index 000000000..d2c14bd69
--- /dev/null
+++ b/assets/icons/gift.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-gift"><polyline points="20 12 20 22 4 22 4 12"></polyline><rect x="2" y="7" width="20" height="5"></rect><line x1="12" y1="22" x2="12" y2="7"></line><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/github.svg b/assets/icons/github.svg
index 12b8a3dee..ff0af4811 100644
--- a/assets/icons/github.svg
+++ b/assets/icons/github.svg
@@ -1 +1 @@
-<svg width="2500" height="2432" viewBox="0 0 256 249" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><g fill="currentColor"><path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0"/><path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/globe.svg b/assets/icons/globe.svg
new file mode 100644
index 000000000..0a0586d36
--- /dev/null
+++ b/assets/icons/globe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/google.svg b/assets/icons/google.svg
deleted file mode 100644
index 9618859b1..000000000
--- a/assets/icons/google.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M118.2 208.3c19.9-60.3 76.5-103.6 143.7-103.6 36.1 0 68.6 12.8 94.3 33.7L430.5 64C385.2 24.4 327 0 261.8 0 160.9 0 74 57.6 32.3 141.9l85.9 66.4z" fill="currentColor"/><path d="M348 384.3c-23.3 15-52.8 23-86.2 23-66.9 0-123.3-43-143.4-102.9l-86.2 65.4C73.9 454.3 160.8 512 261.8 512c62.6 0 122.4-22.2 167.1-64L348 384.3z" fill="currentColor"/><path d="M428.9 448c46.8-43.7 77.2-108.7 77.2-192 0-15.1-2.3-31.4-5.8-46.5H261.8v98.9h137.3c-6.8 33.3-25 59-51.1 75.9l80.9 63.7z" fill="currentColor"/><path d="M118.4 304.4c-5.1-15.2-7.9-31.4-7.9-48.4 0-16.7 2.7-32.7 7.6-47.7l-85.9-66.4C15.1 176.2 5.8 214.9 5.8 256c0 40.9 9.5 79.6 26.4 113.8l86.2-65.4z" fill="currentColor"/></svg>
diff --git a/assets/icons/help-circle.svg b/assets/icons/help-circle.svg
new file mode 100644
index 000000000..51fddd80d
--- /dev/null
+++ b/assets/icons/help-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/home.svg b/assets/icons/home.svg
new file mode 100644
index 000000000..7bb31b23d
--- /dev/null
+++ b/assets/icons/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/inbox.svg b/assets/icons/inbox.svg
new file mode 100644
index 000000000..03a13b4e4
--- /dev/null
+++ b/assets/icons/inbox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-inbox"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/info.svg b/assets/icons/info.svg
new file mode 100644
index 000000000..a09fa5f13
--- /dev/null
+++ b/assets/icons/info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/key.svg b/assets/icons/key.svg
new file mode 100644
index 000000000..e778e74eb
--- /dev/null
+++ b/assets/icons/key.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-key"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/layers.svg b/assets/icons/layers.svg
new file mode 100644
index 000000000..ea788c226
--- /dev/null
+++ b/assets/icons/layers.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/life-buoy.svg b/assets/icons/life-buoy.svg
new file mode 100644
index 000000000..54c2bd7dd
--- /dev/null
+++ b/assets/icons/life-buoy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-life-buoy"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="4.93" y1="4.93" x2="9.17" y2="9.17"></line><line x1="14.83" y1="14.83" x2="19.07" y2="19.07"></line><line x1="14.83" y1="9.17" x2="19.07" y2="4.93"></line><line x1="14.83" y1="9.17" x2="18.36" y2="5.64"></line><line x1="4.93" y1="19.07" x2="9.17" y2="14.83"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/link-2.svg b/assets/icons/link-2.svg
new file mode 100644
index 000000000..8cc7f6dda
--- /dev/null
+++ b/assets/icons/link-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link-2"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/linkedin.svg b/assets/icons/linkedin.svg
index b8480b323..395310945 100644
--- a/assets/icons/linkedin.svg
+++ b/assets/icons/linkedin.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4c-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013zM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009c-.002-12.157 9.851-22.014 22.008-22.016c12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16zM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453" fill="#0A66C2"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
\ No newline at end of file
diff --git a/assets/icons/loader.svg b/assets/icons/loader.svg
new file mode 100644
index 000000000..e1a70c127
--- /dev/null
+++ b/assets/icons/loader.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/lock.svg b/assets/icons/lock.svg
new file mode 100644
index 000000000..de09d9db3
--- /dev/null
+++ b/assets/icons/lock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/log-out.svg b/assets/icons/log-out.svg
new file mode 100644
index 000000000..c9002c903
--- /dev/null
+++ b/assets/icons/log-out.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/mail.svg b/assets/icons/mail.svg
new file mode 100644
index 000000000..2af169e83
--- /dev/null
+++ b/assets/icons/mail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/maximize-2.svg b/assets/icons/maximize-2.svg
new file mode 100644
index 000000000..e41fc0b73
--- /dev/null
+++ b/assets/icons/maximize-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/maximize.svg b/assets/icons/maximize.svg
new file mode 100644
index 000000000..fc3051894
--- /dev/null
+++ b/assets/icons/maximize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/message-circle.svg b/assets/icons/message-circle.svg
new file mode 100644
index 000000000..4b21b32b6
--- /dev/null
+++ b/assets/icons/message-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/minimize-2.svg b/assets/icons/minimize-2.svg
new file mode 100644
index 000000000..a720fa6c3
--- /dev/null
+++ b/assets/icons/minimize-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize-2"><polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/minimize.svg b/assets/icons/minimize.svg
new file mode 100644
index 000000000..46d611969
--- /dev/null
+++ b/assets/icons/minimize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/monitor.svg b/assets/icons/monitor.svg
new file mode 100644
index 000000000..6c3556db2
--- /dev/null
+++ b/assets/icons/monitor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-monitor"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/moon.svg b/assets/icons/moon.svg
new file mode 100644
index 000000000..dbf7c6cf5
--- /dev/null
+++ b/assets/icons/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/more-vertical.svg b/assets/icons/more-vertical.svg
new file mode 100644
index 000000000..cba6958f2
--- /dev/null
+++ b/assets/icons/more-vertical.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
\ No newline at end of file
diff --git a/assets/icons/paperclip.svg b/assets/icons/paperclip.svg
new file mode 100644
index 000000000..b1f69b7a7
--- /dev/null
+++ b/assets/icons/paperclip.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/play.svg b/assets/icons/play.svg
new file mode 100644
index 000000000..fd76e30d6
--- /dev/null
+++ b/assets/icons/play.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
\ No newline at end of file
diff --git a/assets/icons/plus-circle.svg b/assets/icons/plus-circle.svg
new file mode 100644
index 000000000..4291ff052
--- /dev/null
+++ b/assets/icons/plus-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/plus.svg b/assets/icons/plus.svg
new file mode 100644
index 000000000..703c5b7b2
--- /dev/null
+++ b/assets/icons/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/refresh-cw.svg b/assets/icons/refresh-cw.svg
new file mode 100644
index 000000000..06c358dd0
--- /dev/null
+++ b/assets/icons/refresh-cw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/rotate-ccw.svg b/assets/icons/rotate-ccw.svg
new file mode 100644
index 000000000..ade5dc426
--- /dev/null
+++ b/assets/icons/rotate-ccw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-ccw"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/save.svg b/assets/icons/save.svg
new file mode 100644
index 000000000..46c72990d
--- /dev/null
+++ b/assets/icons/save.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-save"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/search.svg b/assets/icons/search.svg
new file mode 100644
index 000000000..8710306dd
--- /dev/null
+++ b/assets/icons/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/settings.svg b/assets/icons/settings.svg
new file mode 100644
index 000000000..19c27265a
--- /dev/null
+++ b/assets/icons/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/share-2.svg b/assets/icons/share-2.svg
new file mode 100644
index 000000000..09b1c7bcd
--- /dev/null
+++ b/assets/icons/share-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/sidebar.svg b/assets/icons/sidebar.svg
new file mode 100644
index 000000000..8ba817e6f
--- /dev/null
+++ b/assets/icons/sidebar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sidebar"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/sparkles.svg b/assets/icons/sparkles.svg
new file mode 100644
index 000000000..f9022b921
--- /dev/null
+++ b/assets/icons/sparkles.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+</svg>
diff --git a/assets/icons/star-solid.svg b/assets/icons/star-solid.svg
new file mode 100644
index 000000000..6f2af735e
--- /dev/null
+++ b/assets/icons/star-solid.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20" fill="currentColor">
+  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+</svg>
diff --git a/assets/icons/star.svg b/assets/icons/star.svg
new file mode 100644
index 000000000..bcdc31aa4
--- /dev/null
+++ b/assets/icons/star.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
\ No newline at end of file
diff --git a/assets/icons/sun.svg b/assets/icons/sun.svg
new file mode 100644
index 000000000..7f51b94d1
--- /dev/null
+++ b/assets/icons/sun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/terminal.svg b/assets/icons/terminal.svg
new file mode 100644
index 000000000..af459c04e
--- /dev/null
+++ b/assets/icons/terminal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-terminal"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/trash-2.svg b/assets/icons/trash-2.svg
new file mode 100644
index 000000000..f24d55bf6
--- /dev/null
+++ b/assets/icons/trash-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/trash.svg b/assets/icons/trash.svg
new file mode 100644
index 000000000..55650bd44
--- /dev/null
+++ b/assets/icons/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/twitter.svg b/assets/icons/twitter.svg
index ff6f523a8..f8886eca8 100644
--- a/assets/icons/twitter.svg
+++ b/assets/icons/twitter.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="39.2" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 209"><path d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27c10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52c0 4.117.465 8.125 1.36 11.97c-43.65-2.191-82.35-23.1-108.255-54.876c-4.52 7.757-7.11 16.78-7.11 26.404c0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 0 1-23.79-6.57c-.003.22-.003.44-.003.661c0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475c-17.975 14.086-40.622 22.483-65.228 22.483c-4.24 0-8.42-.249-12.529-.734c23.243 14.902 50.85 23.597 80.51 23.597c96.607 0 149.434-80.031 149.434-149.435c0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 0 0 256 25.45" fill="#55acee"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/type.svg b/assets/icons/type.svg
new file mode 100644
index 000000000..c6b2de334
--- /dev/null
+++ b/assets/icons/type.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-type"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/upload-cloud.svg b/assets/icons/upload-cloud.svg
new file mode 100644
index 000000000..a1db297c5
--- /dev/null
+++ b/assets/icons/upload-cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
\ No newline at end of file
diff --git a/assets/icons/user-plus.svg b/assets/icons/user-plus.svg
new file mode 100644
index 000000000..21460f6ec
--- /dev/null
+++ b/assets/icons/user-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/user.svg b/assets/icons/user.svg
new file mode 100644
index 000000000..7bb5f2911
--- /dev/null
+++ b/assets/icons/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
\ No newline at end of file
diff --git a/assets/icons/users.svg b/assets/icons/users.svg
new file mode 100644
index 000000000..aacf6b08e
--- /dev/null
+++ b/assets/icons/users.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/x.svg b/assets/icons/x.svg
new file mode 100644
index 000000000..7d5875ca8
--- /dev/null
+++ b/assets/icons/x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
\ No newline at end of file
diff --git a/assets/icons/zap.svg b/assets/icons/zap.svg
new file mode 100644
index 000000000..8fdafa934
--- /dev/null
+++ b/assets/icons/zap.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
\ No newline at end of file
diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index ceceea2a3..0f83655f1 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -236,7 +236,7 @@ button {
 
 .floating-input:focus-within ~ label,
 .floating-input:not(:placeholder-shown) ~ label {
-  @apply bg-transparent;
+  @apply bg-primary;
   @apply transform;
   @apply origin-top-left;
   @apply scale-75;
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index 1ddb1cda2..b0552750d 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -5,7 +5,7 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="LEFT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
-          icon="menu_open"
+          svg="sidebar"
           :class="{ 'transform -rotate-180': !LEFT_SIDEBAR }"
           @click.native="LEFT_SIDEBAR = !LEFT_SIDEBAR"
         />
@@ -14,7 +14,7 @@
           :title="`${
             ZEN_MODE ? $t('action.turn_off') : $t('action.turn_on')
           } ${$t('layout.zen_mode')}`"
-          :icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
+          :svg="ZEN_MODE ? 'minimize' : 'maximize'"
           :class="{
             '!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
               ZEN_MODE,
@@ -33,19 +33,21 @@
           >
             <template #trigger>
               <ButtonSecondary
-                icon="help_center"
-                class="rounded-none"
+                svg="life-buoy"
+                class="!rounded-none"
                 :label="$t('app.help')"
               />
             </template>
             <div class="flex flex-col">
               <SmartItem
+                svg="book"
                 :label="$t('app.documentation')"
                 to="https://docs.hoppscotch.io"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
+                svg="zap"
                 :label="$t('app.keyboard_shortcuts')"
                 @click.native="
                   showShortcuts = true
@@ -53,12 +55,14 @@
                 "
               />
               <SmartItem
+                svg="gift"
                 :label="$t('app.whats_new')"
                 to="https://docs.hoppscotch.io/changelog"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
+                svg="message-circle"
                 :label="$t('app.chat_with_us')"
                 @click.native="
                   chatWithUs()
@@ -67,12 +71,14 @@
               />
               <hr />
               <SmartItem
+                svg="twitter"
                 :label="$t('app.twitter')"
                 to="https://twitter.com/hoppscotch_io"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
+                svg="lock"
                 :label="$t('app.terms_and_privacy')"
                 to="https://docs.hoppscotch.io/privacy"
                 blank
@@ -87,21 +93,21 @@
         </span>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          icon="keyboard"
+          svg="zap"
           :title="$t('app.shortcuts')"
           @click.native="showShortcuts = true"
         />
         <ButtonSecondary
           v-if="navigatorShare"
           v-tippy="{ theme: 'tooltip' }"
-          icon="share"
+          svg="share-2"
           :title="$t('request.share')"
           @click.native="nativeShare()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
-          icon="menu_open"
+          svg="sidebar"
           class="transform rotate-180"
           :class="{ 'rotate-360': !RIGHT_SIDEBAR }"
           @click.native="RIGHT_SIDEBAR = !RIGHT_SIDEBAR"
diff --git a/components/app/Header.vue b/components/app/Header.vue
index eabb23b35..5c7467340 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -16,13 +16,13 @@
           id="installPWA"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('header.install_pwa')"
-          icon="download_for_offline"
+          svg="download"
           class="rounded"
           @click.native="showInstallPrompt()"
         />
         <ButtonSecondary
           v-if="currentUser === null"
-          icon="filter_drama"
+          svg="upload-cloud"
           :label="$t('header.save_workspace')"
           filled
           class="hidden !font-semibold md:flex"
@@ -52,12 +52,12 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('header.account')"
                 class="rounded"
-                icon="account_circle"
+                svg="user"
               />
             </template>
             <SmartItem
               to="/settings"
-              icon="settings"
+              svg="settings"
               :label="$t('navigation.settings')"
               @click.native="$refs.user.tippy().hide()"
             />
diff --git a/components/app/Share.vue b/components/app/Share.vue
index 1fc86f343..4a33ebe78 100644
--- a/components/app/Share.vue
+++ b/components/app/Share.vue
@@ -23,7 +23,7 @@
             </span>
           </a>
           <button class="share-link" @click="copyAppLink">
-            <span class="font-icon h-6 text-xl w-6">{{ copyIcon }}</span>
+            <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
             <span class="mt-3">
               {{ $t("app.copy") }}
             </span>
@@ -54,11 +54,11 @@ export default defineComponent({
 
     return {
       url: "https://hoppscotch.io",
-      copyIcon: "content_copy",
+      copyIcon: "copy",
       platforms: [
         {
           name: "Email",
-          icon: "email",
+          icon: "mail",
           link: `mailto:?subject=${subject}&body=${summary}`,
         },
         {
@@ -87,11 +87,11 @@ export default defineComponent({
   methods: {
     copyAppLink() {
       copyToClipboard(this.url)
-      this.copyIcon = "done"
+      this.copyIcon = "check"
       this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
         icon: "content_paste",
       })
-      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
     },
     hideModal() {
       this.$emit("hide-modal")
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 2247eb9e7..6d2f2c5b6 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -16,11 +16,7 @@
       >
         <h3 class="ml-4 heading">{{ $t("app.shortcuts") }}</h3>
         <div class="flex">
-          <ButtonSecondary
-            icon="close"
-            class="rounded"
-            @click.native="close()"
-          />
+          <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
         </div>
       </div>
       <div class="bg-primary border-b border-dividerLight">
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index 287e5b886..ca24d5627 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -11,7 +11,7 @@
         <i v-if="navigation.icon" class="material-icons">
           {{ navigation.icon }}
         </i>
-        <div v-if="navigation.svg" class="h-4 w-4">
+        <div v-if="navigation.svg">
           <SmartIcon :name="navigation.svg" class="svg-icons" />
         </div>
         <span v-if="LEFT_SIDEBAR">{{ navigation.title }}</span>
@@ -20,7 +20,7 @@
     <!-- <nav
       class="
         flex flex-nowrap
-        p-4
+        p-2
         items-center
         justify-center
         md:(flex-col
@@ -30,21 +30,21 @@
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip', placement: 'top' }"
         :title="`${$t('app.search')} <kbd>/</kbd>`"
-        icon="search"
+        svg="search"
         class="rounded"
         @click.native="showSearch = true"
       />
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip', placement: 'top' }"
         :title="$t('app.invite')"
-        icon="person_add_alt"
+        svg="user-plus"
         class="rounded"
         @click.native="showShare = true"
       />
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip', placement: 'top' }"
         :title="`${$t('support.title')} <kbd>?</kbd>`"
-        icon="support"
+        svg="life-buoy"
         class="rounded"
         @click.native="showSupport = true"
       />
@@ -90,7 +90,7 @@ export default defineComponent({
       primaryNavigation: [
         {
           target: "index",
-          icon: "settings_ethernet",
+          svg: "link-2",
           title: this.$t("navigation.rest"),
         },
         {
@@ -100,17 +100,17 @@ export default defineComponent({
         },
         {
           target: "realtime",
-          icon: "language",
+          svg: "globe",
           title: this.$t("navigation.realtime"),
         },
         {
           target: "documentation",
-          icon: "book",
+          svg: "book-open",
           title: this.$t("navigation.doc"),
         },
         {
           target: "settings",
-          icon: "settings",
+          svg: "settings",
           title: this.$t("navigation.settings"),
         },
       ],
@@ -158,6 +158,8 @@ export default defineComponent({
   span {
     @apply mt-2;
     @apply font-font-medium;
+
+    font-size: 90%;
   }
 
   &.exact-active-link {
diff --git a/components/app/Support.vue b/components/app/Support.vue
index a517eaf2e..3306690bd 100644
--- a/components/app/Support.vue
+++ b/components/app/Support.vue
@@ -7,7 +7,7 @@
     <template #body>
       <div class="flex flex-col space-y-2">
         <SmartItem
-          icon="menu_book"
+          svg="book"
           :label="$t('app.documentation')"
           to="https://docs.hoppscotch.io"
           :description="$t('support.documentation')"
@@ -17,7 +17,7 @@
           @click.native="hideModal()"
         />
         <SmartItem
-          icon="keyboard"
+          svg="zap"
           :label="$t('app.keyboard_shortcuts')"
           :description="$t('support.shortcuts')"
           info-icon="chevron_right"
@@ -28,7 +28,7 @@
           "
         />
         <SmartItem
-          icon="auto_awesome"
+          svg="gift"
           :label="$t('app.whats_new')"
           to="https://docs.hoppscotch.io/changelog"
           :description="$t('support.changelog')"
@@ -38,7 +38,7 @@
           @click.native="hideModal()"
         />
         <SmartItem
-          icon="contact_support"
+          svg="message-circle"
           :label="$t('app.chat_with_us')"
           :description="$t('support.chat')"
           info-icon="chevron_right"
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index f42334c9f..09036dceb 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -10,7 +10,7 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('action.go_back')"
         class="rounded"
-        icon="arrow_back"
+        svg="arrow-left"
         @click.native="
           mode = 'import_export'
           mySelectedCollectionID = undefined
@@ -32,7 +32,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.more')"
               class="rounded"
-              icon="more_vert"
+              svg="more-vertical"
             />
           </template>
           <SmartItem
@@ -77,7 +77,7 @@
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.replace_current')"
-          icon="folder_special"
+          svg="file"
           :label="$t('action.replace_json')"
           @click.native="openDialogChooseFileToReplaceWith"
         />
@@ -92,7 +92,7 @@
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.preserve_current')"
-          icon="create_new_folder"
+          svg="folder-plus"
           :label="$t('import.json')"
           @click.native="openDialogChooseFileToImportFrom"
         />
@@ -108,14 +108,14 @@
           v-if="collectionsType.type == 'team-collections'"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.preserve_current')"
-          icon="folder_shared"
+          svg="user"
           :label="$t('import.from_my_collections')"
           @click.native="mode = 'import_from_my_collections'"
         />
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.download_file')"
-          icon="drive_file_move"
+          svg="download"
           :label="$t('export.as_json')"
           @click.native="exportJSON"
         />
@@ -160,7 +160,7 @@
         <span>
           <ButtonPrimary
             :disabled="mySelectedCollectionID == undefined"
-            icon="create_new_folder"
+            svg="folder-plus"
             :label="$t('import.title')"
             @click.native="importFromMyCollections"
           />
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index 81d89eb6d..59af0f215 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -13,9 +13,11 @@
         class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
-        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
-          {{ getCollectionIcon }}
-        </i>
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="getCollectionIcon"
+        />
       </span>
       <span
         class="
@@ -34,7 +36,7 @@
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          icon="create_new_folder"
+          svg="folder-plus"
           :title="$t('folder.new')"
           class="hidden group-hover:inline-flex"
           @click.native="
@@ -55,11 +57,11 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.more')"
-                icon="more_vert"
+                svg="more-vertical"
               />
             </template>
             <SmartItem
-              icon="create_new_folder"
+              svg="folder-plus"
               :label="$t('folder.new')"
               @click.native="
                 $emit('add-folder', {
@@ -69,7 +71,7 @@
               "
             />
             <SmartItem
-              icon="create"
+              svg="edit"
               :label="$t('action.edit')"
               @click.native="
                 $emit('edit-collection')
@@ -77,7 +79,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              svg="trash-2"
               color="red"
               :label="$t('action.delete')"
               @click.native="
@@ -186,9 +188,9 @@ export default defineComponent({
       )
     },
     getCollectionIcon() {
-      if (this.isSelected) return "check_circle_outline"
+      if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder_open"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
       else return "folder"
     },
   },
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index 2efa51d5c..0da151e07 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -13,9 +13,11 @@
         class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
-        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
-          {{ getCollectionIcon }}
-        </i>
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="getCollectionIcon"
+        />
       </span>
       <span
         class="
@@ -36,7 +38,7 @@
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          icon="create_new_folder"
+          svg="folder-plus"
           :title="$t('folder.new')"
           class="hidden group-hover:inline-flex"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
@@ -53,11 +55,11 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.more')"
-                icon="more_vert"
+                svg="more-vertical"
               />
             </template>
             <SmartItem
-              icon="create_new_folder"
+              svg="folder-plus"
               :label="$t('folder.new')"
               @click.native="
                 $emit('add-folder', { folder, path: folderPath })
@@ -65,7 +67,7 @@
               "
             />
             <SmartItem
-              icon="edit"
+              svg="edit"
               :label="$t('action.edit')"
               @click.native="
                 $emit('edit-folder', { folder, folderPath })
@@ -73,7 +75,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              svg="trash-2"
               color="red"
               :label="$t('action.delete')"
               @click.native="
@@ -184,9 +186,9 @@ export default defineComponent({
       )
     },
     getCollectionIcon() {
-      if (this.isSelected) return "check_circle_outline"
+      if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder_open"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
       else return "folder"
     },
   },
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index 73d4eed8a..dd859d761 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -12,7 +12,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.more')"
               class="rounded"
-              icon="more_vert"
+              svg="more-vertical"
             />
           </template>
           <SmartItem
@@ -57,7 +57,7 @@
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.replace_current')"
-          icon="folder_special"
+          svg="file"
           :label="$t('action.replace_json')"
           @click.native="openDialogChooseFileToReplaceWith"
         />
@@ -71,7 +71,7 @@
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.preserve_current')"
-          icon="create_new_folder"
+          svg="folder-plus"
           :label="$t('import.json')"
           @click.native="openDialogChooseFileToImportFrom"
         />
@@ -85,7 +85,7 @@
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.download_file')"
-          icon="drive_file_move"
+          svg="download"
           :label="$t('export.as_json')"
           @click.native="exportJSON"
         />
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index ad99dac86..26be0f266 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -20,9 +20,11 @@
         "
         @click="!doc ? selectRequest() : {}"
       >
-        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
-          {{ isSelected ? "check_circle_outline" : "description" }}
-        </i>
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="isSelected ? 'check-circle' : 'file'"
+        />
       </span>
       <span
         class="
@@ -42,7 +44,7 @@
         <ButtonSecondary
           v-if="!savingMode"
           v-tippy="{ theme: 'tooltip' }"
-          icon="replay"
+          svg="rotate-ccw"
           :title="$t('action.restore')"
           class="hidden group-hover:inline-flex"
           @click.native="!doc ? selectRequest() : {}"
@@ -59,11 +61,11 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.more')"
-                icon="more_vert"
+                svg="more-vertical"
               />
             </template>
             <SmartItem
-              icon="edit"
+              svg="edit"
               :label="$t('action.edit')"
               @click.native="
                 $emit('edit-request', {
@@ -75,7 +77,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              svg="trash-2"
               color="red"
               :label="$t('action.delete')"
               @click.native="
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index e32165eff..8b6649bd1 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -24,9 +24,9 @@
       </div>
       <div class="flex flex-1 justify-between">
         <ButtonSecondary
-          icon="add"
+          svg="plus"
           :label="$t('action.new')"
-          class="rounded-none"
+          class="!rounded-none"
           @click.native="displayModalAdd(true)"
         />
         <div class="flex">
@@ -35,13 +35,13 @@
             to="https://docs.hoppscotch.io/features/collections"
             blank
             :title="$t('app.wiki')"
-            icon="help_outline"
+            svg="help-circle"
           />
           <ButtonSecondary
             v-if="showCollActions"
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('modal.import_export')"
-            icon="import_export"
+            svg="archive"
             @click.native="displayModalImportExport(true)"
           />
         </div>
diff --git a/components/collections/index.vue b/components/collections/index.vue
index ba2370c0f..a6c2b732c 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -40,16 +40,16 @@
           "
           v-tippy="{ theme: 'tooltip' }"
           disabled
-          class="rounded-none"
-          icon="add"
+          class="!rounded-none"
+          svg="plus"
           :title="$t('team.no_access')"
           :label="$t('action.new')"
         />
         <ButtonSecondary
           v-else
-          icon="add"
+          svg="plus"
           :label="$t('action.new')"
-          class="rounded-none"
+          class="!rounded-none"
           @click.native="displayModalAdd(true)"
         />
         <span class="flex">
@@ -58,7 +58,7 @@
             to="https://docs.hoppscotch.io/features/collections"
             blank
             :title="$t('app.wiki')"
-            icon="help_outline"
+            svg="help-circle"
           />
           <ButtonSecondary
             v-if="!saveRequest"
@@ -67,7 +67,7 @@
               collectionsType.type == 'team-collections' &&
               collectionsType.selectedTeam == undefined
             "
-            icon="import_export"
+            svg="archive"
             :title="$t('modal.import_export')"
             @click.native="displayModalImportExport(true)"
           />
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 595ca329c..b2d3fcdfc 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -13,9 +13,11 @@
         class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
-        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
-          {{ getCollectionIcon }}
-        </i>
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="getCollectionIcon"
+        />
       </span>
       <span
         class="
@@ -36,7 +38,7 @@
           v-if="doc && !selected"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('import.title')"
-          icon="radio_button_unchecked"
+          svg="circle"
           color="green"
           @click.native="$emit('select-collection')"
         />
@@ -44,14 +46,14 @@
           v-if="doc && selected"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.remove')"
-          icon="check_circle_outline"
+          svg="check-circle"
           color="green"
           @click.native="$emit('unselect-collection')"
         />
         <ButtonSecondary
           v-if="!doc"
           v-tippy="{ theme: 'tooltip' }"
-          icon="create_new_folder"
+          svg="folder-plus"
           :title="$t('folder.new')"
           class="hidden group-hover:inline-flex"
           @click.native="
@@ -73,11 +75,11 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.more')"
-                icon="more_vert"
+                svg="more-vertical"
               />
             </template>
             <SmartItem
-              icon="create_new_folder"
+              svg="folder-plus"
               :label="$t('folder.new')"
               @click.native="
                 $emit('add-folder', {
@@ -88,7 +90,7 @@
               "
             />
             <SmartItem
-              icon="create"
+              svg="edit"
               :label="$t('action.edit')"
               @click.native="
                 $emit('edit-collection')
@@ -96,7 +98,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              svg="trash-2"
               color="red"
               :label="$t('action.delete')"
               @click.native="
@@ -212,9 +214,9 @@ export default defineComponent({
       )
     },
     getCollectionIcon() {
-      if (this.isSelected) return "check_circle_outline"
+      if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder_open"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
       else return "folder"
     },
   },
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 1fe472aaa..119b142e8 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -13,9 +13,11 @@
         class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
-        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
-          {{ getCollectionIcon }}
-        </i>
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="getCollectionIcon"
+        />
       </span>
       <span
         class="
@@ -36,7 +38,7 @@
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          icon="create_new_folder"
+          svg="folder-plus"
           :title="$t('folder.new')"
           class="hidden group-hover:inline-flex"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
@@ -53,11 +55,11 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.more')"
-                icon="more_vert"
+                svg="more-vertical"
               />
             </template>
             <SmartItem
-              icon="create_new_folder"
+              svg="folder-plus"
               :label="$t('folder.new')"
               @click.native="
                 $emit('add-folder', { folder, path: folderPath })
@@ -65,7 +67,7 @@
               "
             />
             <SmartItem
-              icon="edit"
+              svg="edit"
               :label="$t('action.edit')"
               @click.native="
                 $emit('edit-folder', {
@@ -78,7 +80,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              svg="trash-2"
               color="red"
               :label="$t('action.delete')"
               @click.native="
@@ -199,9 +201,9 @@ export default defineComponent({
       )
     },
     getCollectionIcon() {
-      if (this.isSelected) return "check_circle_outline"
+      if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder_open"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
       else return "folder"
     },
   },
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index df4c825e4..2ef55b346 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -21,13 +21,12 @@
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
       >
-        <i
+        <SmartIcon
           v-if="isSelected"
-          class="material-icons"
+          class="svg-icons"
           :class="{ 'text-green-500': isSelected }"
-        >
-          check_circle_outline
-        </i>
+          name="check-circle"
+        />
         <span v-else class="truncate">
           {{ request.method }}
         </span>
@@ -60,7 +59,7 @@
         <ButtonSecondary
           v-if="!saveRequest && !doc"
           v-tippy="{ theme: 'tooltip' }"
-          icon="replay"
+          svg="rotate-ccw"
           :title="$t('action.restore')"
           class="hidden group-hover:inline-flex"
           @click.native="!doc ? selectRequest() : {}"
@@ -77,11 +76,11 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.more')"
-                icon="more_vert"
+                svg="more-vertical"
               />
             </template>
             <SmartItem
-              icon="edit"
+              svg="edit"
               :label="$t('action.edit')"
               @click.native="
                 $emit('edit-request', {
@@ -96,7 +95,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              svg="trash-2"
               color="red"
               :label="$t('action.delete')"
               @click.native="
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 33e5969d3..e99f0ba41 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -5,9 +5,11 @@
         class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
-        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
-          {{ getCollectionIcon }}
-        </i>
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="getCollectionIcon"
+        />
       </span>
       <span
         class="
@@ -28,7 +30,7 @@
           v-if="doc && !selected"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('import.title')"
-          icon="radio_button_unchecked"
+          svg="circle"
           color="green"
           @click.native="$emit('select-collection')"
         />
@@ -36,14 +38,14 @@
           v-if="doc && selected"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.remove')"
-          icon="check_circle_outline"
+          svg="check-circle"
           color="green"
           @click.native="$emit('unselect-collection')"
         />
         <ButtonSecondary
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           v-tippy="{ theme: 'tooltip' }"
-          icon="create_new_folder"
+          svg="folder-plus"
           :title="$t('folder.new')"
           class="hidden group-hover:inline-flex"
           @click.native="
@@ -66,12 +68,12 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.more')"
-                icon="more_vert"
+                svg="more-vertical"
               />
             </template>
             <SmartItem
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="create_new_folder"
+              svg="folder-plus"
               :label="$t('folder.new')"
               @click.native="
                 $emit('add-folder', {
@@ -83,7 +85,7 @@
             />
             <SmartItem
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="create"
+              svg="edit"
               :label="$t('action.edit')"
               @click.native="
                 $emit('edit-collection')
@@ -92,7 +94,7 @@
             />
             <SmartItem
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="delete"
+              svg="trash-2"
               color="red"
               :label="$t('action.delete')"
               @click.native="
@@ -206,9 +208,9 @@ export default defineComponent({
       )
     },
     getCollectionIcon() {
-      if (this.isSelected) return "check_circle_outline"
+      if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder_open"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
       else return "folder"
     },
   },
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index 8ddb47ce5..ea9d1dd01 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -5,9 +5,11 @@
         class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
-        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
-          {{ getCollectionIcon }}
-        </i>
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="getCollectionIcon"
+        />
       </span>
       <span
         class="
@@ -29,7 +31,7 @@
         <ButtonSecondary
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           v-tippy="{ theme: 'tooltip' }"
-          icon="create_new_folder"
+          svg="folder-plus"
           :title="$t('folder.new')"
           class="hidden group-hover:inline-flex"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
@@ -47,12 +49,12 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.more')"
-                icon="more_vert"
+                svg="more-vertical"
               />
             </template>
             <SmartItem
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="create_new_folder"
+              svg="folder-plus"
               :label="$t('folder.new')"
               @click.native="
                 $emit('add-folder', { folder, path: folderPath })
@@ -61,7 +63,7 @@
             />
             <SmartItem
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="edit"
+              svg="edit"
               :label="$t('action.edit')"
               @click.native="
                 $emit('edit-folder', {
@@ -75,7 +77,7 @@
             />
             <SmartItem
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="delete"
+              svg="trash-2"
               color="red"
               :label="$t('action.delete')"
               @click.native="
@@ -189,9 +191,9 @@ export default defineComponent({
       )
     },
     getCollectionIcon() {
-      if (this.isSelected) return "check_circle_outline"
+      if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder_open"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
       else return "folder"
     },
   },
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index 0bd912651..da3a1a701 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -14,13 +14,12 @@
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
       >
-        <i
+        <SmartIcon
           v-if="isSelected"
-          class="material-icons"
+          class="svg-icons"
           :class="{ 'text-green-500': isSelected }"
-        >
-          check_circle_outline
-        </i>
+          name="check-circle"
+        />
         <span v-else>
           {{ request.method }}
         </span>
@@ -52,7 +51,7 @@
         <ButtonSecondary
           v-if="!saveRequest && !doc"
           v-tippy="{ theme: 'tooltip' }"
-          icon="replay"
+          svg="rotate-ccw"
           :title="$t('action.restore')"
           class="hidden group-hover:inline-flex"
           @click.native="!doc ? selectRequest() : {}"
@@ -70,11 +69,11 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.more')"
-                icon="more_vert"
+                svg="more-vertical"
               />
             </template>
             <SmartItem
-              icon="edit"
+              svg="edit"
               :label="$t('action.edit')"
               @click.native="
                 $emit('edit-request', {
@@ -88,7 +87,7 @@
               "
             />
             <SmartItem
-              icon="delete"
+              svg="trash-2"
               color="red"
               :label="$t('action.delete')"
               @click.native="
diff --git a/components/docs/Collection.vue b/components/docs/Collection.vue
index 46fdb57bf..725c78274 100644
--- a/components/docs/Collection.vue
+++ b/components/docs/Collection.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="collection">
     <h2 class="heading">
-      <i class="material-icons">folder</i>
+      <SmartIcon name="folder" class="svg-icons" />
       {{ collection.name || $t("state.none") }}
     </h2>
     <span
diff --git a/components/docs/Folder.vue b/components/docs/Folder.vue
index 6462a4714..3d0530f5d 100644
--- a/components/docs/Folder.vue
+++ b/components/docs/Folder.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="folder">
     <h3 class="heading">
-      <i class="material-icons">folder_open</i>
+      <SmartIcon name="folder-minus" class="svg-icons" />
       {{ folder.name || $t("state.none") }}
     </h3>
     <div
diff --git a/components/docs/Request.vue b/components/docs/Request.vue
index a28b0d955..a343f1295 100644
--- a/components/docs/Request.vue
+++ b/components/docs/Request.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="request">
     <h4 class="heading">
-      <i class="material-icons">insert_drive_file</i>
+      <SmartIcon name="file" class="svg-icons" />
       {{ request.name || $t("state.none") }}
     </h4>
     <p v-if="request.url" class="doc-desc">
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 34fe0900f..9a3fa3333 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -25,13 +25,13 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.clear_all')"
-              :icon="clearIcon"
+              :svg="clearIcon"
               class="rounded"
               @click.native="clearContent()"
             />
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
-              icon="add"
+              svg="plus"
               :title="$t('add.new')"
               class="rounded"
               @click.native="addEnvironmentVariable"
@@ -61,7 +61,7 @@
                 id="variable"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.remove')"
-                icon="remove_circle_outline"
+                svg="trash"
                 color="red"
                 @click.native="removeEnvironmentVariable(index)"
               />
@@ -77,7 +77,7 @@
               justify-center
             "
           >
-            <i class="opacity-75 pb-2 material-icons">layers</i>
+            <SmartIcon class="opacity-75 pb-2" name="layers" />
             <span class="text-center pb-4">
               {{ $t("empty.environments") }}
             </span>
@@ -146,7 +146,7 @@ export default defineComponent({
     return {
       name: null as string | null,
       vars: [] as { key: string; value: string }[],
-      clearIcon: "clear_all",
+      clearIcon: "trash-2",
     }
   },
   watch: {
@@ -158,11 +158,11 @@ export default defineComponent({
   methods: {
     clearContent() {
       this.vars = []
-      this.clearIcon = "done"
+      this.clearIcon = "check"
       this.$toast.success(this.$t("state.cleared").toString(), {
         icon: "clear_all",
       })
-      setTimeout(() => (this.clearIcon = "clear_all"), 1000)
+      setTimeout(() => (this.clearIcon = "trash-2"), 1000)
     },
     addEnvironmentVariable() {
       this.vars.push({
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index b6cb2c840..e29bdde7e 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -4,7 +4,7 @@
       class="cursor-pointer flex px-4 justify-center items-center"
       @click="$emit('edit-environment')"
     >
-      <i class="material-icons">layers</i>
+      <SmartIcon class="svg-icons" name="layers" />
     </span>
     <span
       class="
@@ -28,11 +28,11 @@
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('action.more')"
-            icon="more_vert"
+            svg="more-vertical"
           />
         </template>
         <SmartItem
-          icon="create"
+          svg="edit"
           :label="$t('action.edit')"
           @click.native="
             $emit('edit-environment')
@@ -41,7 +41,7 @@
         />
         <SmartItem
           v-if="!(environmentIndex === 'Global')"
-          icon="delete"
+          svg="trash-2"
           color="red"
           :label="$t('action.delete')"
           @click.native="
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index 6a09a0739..9fb533421 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -12,7 +12,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.more')"
               class="rounded"
-              icon="more_vert"
+              svg="more-vertical"
             />
           </template>
           <SmartItem
@@ -57,7 +57,7 @@
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.replace_current')"
-          icon="folder_special"
+          svg="file"
           :label="$t('action.replace_json')"
           @click.native="openDialogChooseFileToReplaceWith"
         />
@@ -71,7 +71,7 @@
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.preserve_current')"
-          icon="create_new_folder"
+          svg="folder-plus"
           :label="$t('import.json')"
           @click.native="openDialogChooseFileToImportFrom"
         />
@@ -85,7 +85,7 @@
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.download_file')"
-          icon="drive_file_move"
+          svg="download"
           :label="$t('export.as_json')"
           @click.native="exportJSON"
         />
diff --git a/components/environments/index.vue b/components/environments/index.vue
index e24baeeef..e5327c07c 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -57,9 +57,9 @@
       </tippy>
       <div class="border-b border-dividerLight flex flex-1 justify-between">
         <ButtonSecondary
-          icon="add"
+          svg="plus"
           :label="$t('action.new')"
-          class="rounded-none"
+          class="!rounded-none"
           @click.native="displayModalAdd(true)"
         />
         <div class="flex">
@@ -68,11 +68,11 @@
             to="https://docs.hoppscotch.io/features/environments"
             blank
             :title="$t('app.wiki')"
-            icon="help_outline"
+            svg="help-circle"
           />
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            icon="import_export"
+            svg="archive"
             :title="$t('modal.import_export')"
             @click.native="displayModalImportExport(true)"
           />
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index 5323a1f49..4b6ba1682 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -9,13 +9,13 @@
       <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2 px-2">
         <SmartItem
           :loading="signingInWithGitHub"
-          svg="github"
+          svg="auth/github"
           :label="$t('auth.continue_with_github')"
           @click.native="signInWithGithub"
         />
         <SmartItem
           :loading="signingInWithGoogle"
-          svg="google"
+          svg="auth/google"
           :label="$t('auth.continue_with_google')"
           @click.native="signInWithGoogle"
         />
@@ -61,9 +61,7 @@
       </div>
       <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
         <div class="flex flex-col max-w-md justify-center items-center">
-          <i class="text-accent material-icons !text-4xl">
-            mark_email_unread
-          </i>
+          <SmartIcon class="h-6 text-accent w-6" name="inbox" />
           <h3 class="my-2 text-center text-lg">
             {{ $t("auth.we_sent_magic_link") }}
           </h3>
diff --git a/components/firebase/Logout.vue b/components/firebase/Logout.vue
index cef28f798..305ced654 100644
--- a/components/firebase/Logout.vue
+++ b/components/firebase/Logout.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
     <SmartItem
-      icon="exit_to_app"
+      svg="log-out"
       :label="$t('auth.logout')"
       @click.native="
         $emit('confirm-logout')
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index d50381151..edfab5ca5 100644
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -23,14 +23,14 @@
             <div class="flex">
               <ButtonSecondary
                 :label="$t('request.run')"
-                icon="play_arrow"
+                svg="play"
                 class="rounded-none !text-accent"
                 @click.native="runQuery()"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.copy')"
-                :icon="copyQueryIcon"
+                :svg="copyQueryIcon"
                 @click.native="copyQuery"
               />
               <ButtonSecondary
@@ -38,14 +38,14 @@
                 :title="`${$t(
                   'action.prettify'
                 )} <kbd>${getSpecialKey()}</kbd><kbd>P</kbd>`"
-                :icon="prettifyQueryIcon"
+                :svg="prettifyQueryIcon"
                 @click.native="prettifyQuery"
               />
               <ButtonSecondary
                 ref="saveRequest"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('request.save')"
-                icon="create_new_folder"
+                svg="folder-plus"
                 @click.native="saveRequest"
               />
             </div>
@@ -89,7 +89,7 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.copy')"
-                :icon="copyVariablesIcon"
+                :svg="copyVariablesIcon"
                 @click.native="copyVariables"
               />
             </div>
@@ -132,13 +132,13 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.clear_all')"
-                icon="clear_all"
+                svg="trash-2"
                 @click.native="headers = []"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('add.new')"
-                icon="add"
+                svg="plus"
                 @click.native="addRequestHeader"
               />
             </div>
@@ -199,12 +199,12 @@
                       : $t('action.turn_on')
                     : $t('action.turn_off')
                 "
-                :icon="
+                :svg="
                   header.hasOwnProperty('active')
                     ? header.active
-                      ? 'check_circle_outline'
-                      : 'radio_button_unchecked'
-                    : 'check_circle_outline'
+                      ? 'check-circle'
+                      : 'circle'
+                    : 'check-circle'
                 "
                 color="green"
                 @click.native="
@@ -220,7 +220,7 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.remove')"
-                icon="remove_circle_outline"
+                svg="trash"
                 color="red"
                 @click.native="removeRequestHeader(index)"
               />
@@ -242,7 +242,7 @@
             <ButtonSecondary
               :label="$t('add.new')"
               filled
-              icon="add"
+              svg="plus"
               @click.native="addRequestHeader"
             />
           </div>
@@ -318,9 +318,9 @@ export default defineComponent({
 
     const queryEditor = ref<any | null>(null)
 
-    const copyQueryIcon = ref("content_copy")
-    const prettifyQueryIcon = ref("photo_filter")
-    const copyVariablesIcon = ref("content_copy")
+    const copyQueryIcon = ref("copy")
+    const prettifyQueryIcon = ref("sparkles")
+    const copyVariablesIcon = ref("copy")
 
     const showSaveRequestModal = ref(false)
 
@@ -347,8 +347,8 @@ export default defineComponent({
 
     const copyQuery = () => {
       copyToClipboard(gqlQueryString.value)
-      copyQueryIcon.value = "done"
-      setTimeout(() => (copyQueryIcon.value = "content_copy"), 1000)
+      copyQueryIcon.value = "check"
+      setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
     }
 
     const response = useStream(gqlResponse$, "", setGQLResponse)
@@ -416,8 +416,8 @@ export default defineComponent({
 
     const prettifyQuery = () => {
       queryEditor.value.prettifyQuery()
-      prettifyQueryIcon.value = "done"
-      setTimeout(() => (prettifyQueryIcon.value = "photo_filter"), 1000)
+      prettifyQueryIcon.value = "check"
+      setTimeout(() => (prettifyQueryIcon.value = "sparkles"), 1000)
     }
 
     const saveRequest = () => {
@@ -431,8 +431,8 @@ export default defineComponent({
 
     const copyVariables = () => {
       copyToClipboard(variableString.value)
-      copyVariablesIcon.value = "done"
-      setTimeout(() => (copyVariablesIcon.value = "content_copy"), 1000)
+      copyVariablesIcon.value = "check"
+      setTimeout(() => (copyVariablesIcon.value = "copy"), 1000)
     }
 
     const addRequestHeader = () => {
diff --git a/components/graphql/Response.vue b/components/graphql/Response.vue
index 27bb93483..feca15fcd 100644
--- a/components/graphql/Response.vue
+++ b/components/graphql/Response.vue
@@ -22,14 +22,14 @@
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.download_file')"
-          :icon="downloadResponseIcon"
+          :svg="downloadResponseIcon"
           @click.native="downloadResponse"
         />
         <ButtonSecondary
           ref="copyResponseButton"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.copy')"
-          :icon="copyResponseIcon"
+          :svg="copyResponseIcon"
           @click.native="copyResponse"
         />
       </div>
@@ -94,7 +94,7 @@
       <ButtonSecondary
         :label="$t('app.documentation')"
         to="https://docs.hoppscotch.io"
-        icon="open_in_new"
+        svg="external-link"
         blank
         outline
         reverse
@@ -132,13 +132,13 @@ export default defineComponent({
 
     const responseString = useReadonlyStream(gqlResponse$, "")
 
-    const downloadResponseIcon = ref("save_alt")
-    const copyResponseIcon = ref("content_copy")
+    const downloadResponseIcon = ref("download")
+    const copyResponseIcon = ref("copy")
 
     const copyResponse = () => {
       copyToClipboard(responseString.value!)
-      copyResponseIcon.value = "done"
-      setTimeout(() => (copyResponseIcon.value = "content_copy"), 1000)
+      copyResponseIcon.value = "check"
+      setTimeout(() => (copyResponseIcon.value = "copy"), 1000)
     }
 
     const downloadResponse = () => {
@@ -150,14 +150,14 @@ export default defineComponent({
       a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}`
       document.body.appendChild(a)
       a.click()
-      downloadResponseIcon.value = "done"
+      downloadResponseIcon.value = "check"
       $toast.success(t("state.download_started").toString(), {
         icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)
-        downloadResponseIcon.value = "save_alt"
+        downloadResponseIcon.value = "download"
       }, 1000)
     }
 
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index 0599af06d..b9e110de2 100644
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -18,7 +18,7 @@
                 to="https://docs.hoppscotch.io/quickstart/graphql"
                 blank
                 :title="$t('app.wiki')"
-                icon="help_outline"
+                svg="help-circle"
               />
             </div>
           </div>
@@ -148,20 +148,20 @@
                 to="https://docs.hoppscotch.io/quickstart/graphql"
                 blank
                 :title="$t('app.wiki')"
-                icon="help_outline"
+                svg="help-circle"
               />
               <ButtonSecondary
                 ref="downloadSchema"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.download_file')"
-                :icon="downloadSchemaIcon"
+                :svg="downloadSchemaIcon"
                 @click.native="downloadSchema"
               />
               <ButtonSecondary
                 ref="copySchemaCode"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.copy')"
-                :icon="copySchemaIcon"
+                :svg="copySchemaIcon"
                 @click.native="copySchema"
               />
             </div>
@@ -317,8 +317,8 @@ export default defineComponent({
       []
     )
 
-    const downloadSchemaIcon = ref("save_alt")
-    const copySchemaIcon = ref("content_copy")
+    const downloadSchemaIcon = ref("download")
+    const copySchemaIcon = ref("copy")
 
     const graphqlFieldsFilterText = ref("")
 
@@ -405,14 +405,14 @@ export default defineComponent({
       }.graphql`
       document.body.appendChild(a)
       a.click()
-      downloadSchemaIcon.value = "done"
+      downloadSchemaIcon.value = "check"
       $toast.success(t("state.download_started").toString(), {
         icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)
-        downloadSchemaIcon.value = "save_alt"
+        downloadSchemaIcon.value = "download"
       }, 1000)
     }
 
@@ -420,8 +420,8 @@ export default defineComponent({
       if (!schemaString.value) return
 
       copyToClipboard(schemaString.value)
-      copySchemaIcon.value = "done"
-      setTimeout(() => (copySchemaIcon.value = "content_copy"), 1000)
+      copySchemaIcon.value = "check"
+      setTimeout(() => (copySchemaIcon.value = "copy"), 1000)
     }
 
     const handleUseHistory = (entry: GQLHistoryEntry) => {
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index c751a63b1..c472d8f16 100644
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -16,12 +16,12 @@
         @click="useEntry"
       >
         <span class="truncate">
-          {{ entry.url }}
+          {{ entry.request.url }}
         </span>
       </span>
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
-        icon="remove_circle_outline"
+        svg="trash"
         color="red"
         :title="$t('action.remove')"
         class="hidden group-hover:inline-flex"
@@ -31,14 +31,14 @@
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="expand ? $t('hide.more') : $t('show.more')"
-        :icon="expand ? 'unfold_less' : 'unfold_more'"
+        :svg="expand ? 'minimize-2' : 'maximize-2'"
         class="hidden group-hover:inline-flex"
         @click.native="expand = !expand"
       />
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="!entry.star ? $t('add.star') : $t('remove.star')"
-        :icon="entry.star ? 'star' : 'star_border'"
+        :svg="entry.star ? 'star-solid' : 'star'"
         color="yellow"
         :class="{ 'group-hover:inline-flex hidden': !entry.star }"
         data-testid="star_button"
diff --git a/components/history/index.vue b/components/history/index.vue
index b174e80bc..6134f1aa4 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -24,13 +24,13 @@
           to="https://docs.hoppscotch.io/features/history"
           blank
           :title="$t('app.wiki')"
-          icon="help_outline"
+          svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           data-testid="clear_history"
           :disabled="history.length === 0"
-          icon="clear_all"
+          svg="trash-2"
           :title="$t('action.clear_all')"
           @click.native="confirmRemove = true"
         />
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index a7d2602ff..3e22c5fc4 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -29,7 +29,7 @@
     </span>
     <ButtonSecondary
       v-tippy="{ theme: 'tooltip' }"
-      icon="remove_circle_outline"
+      svg="trash"
       color="red"
       :title="$t('action.remove')"
       class="hidden group-hover:inline-flex"
@@ -40,7 +40,7 @@
       v-tippy="{ theme: 'tooltip' }"
       :title="!entry.star ? $t('add.star') : $t('remove.star')"
       :class="{ 'group-hover:inline-flex hidden': !entry.star }"
-      :icon="entry.star ? 'star' : 'star_border'"
+      :svg="entry.star ? 'star-solid' : 'star'"
       color="yellow"
       data-testid="star_button"
       @click.native="$emit('toggle-star')"
diff --git a/components/http/Authorization.vue b/components/http/Authorization.vue
index 10e0389c9..6d9b0c649 100644
--- a/components/http/Authorization.vue
+++ b/components/http/Authorization.vue
@@ -81,12 +81,12 @@
           to="https://docs.hoppscotch.io/features/authorization"
           blank
           :title="$t('app.wiki')"
-          icon="help_outline"
+          svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear')"
-          icon="clear_all"
+          svg="trash-2"
           @click.native="clearContent"
         />
       </div>
@@ -103,7 +103,7 @@
         :label="$t('action.learn_more')"
         to="https://docs.hoppscotch.io"
         blank
-        icon="open_in_new"
+        svg="external-link"
         reverse
       />
     </div>
@@ -147,9 +147,7 @@
           />
           <span>
             <ButtonSecondary
-              :icon="
-                passwordFieldType === 'text' ? 'visibility' : 'visibility_off'
-              "
+              :svg="passwordFieldType === 'text' ? 'eye' : 'eye-off'"
               @click.native="switchVisibility"
             />
           </span>
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index 21bb8c02b..eed872e2c 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -22,18 +22,18 @@
           to="https://docs.hoppscotch.io/features/body"
           blank
           :title="$t('app.wiki')"
-          icon="help_outline"
+          svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear_all')"
-          icon="clear_all"
+          svg="trash-2"
           @click.native="clearContent"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('add.new')"
-          icon="add"
+          svg="plus"
           @click.native="addBodyParam"
         />
       </div>
@@ -131,7 +131,7 @@
         <label for="attachment" class="p-0">
           <ButtonSecondary
             class="w-full"
-            icon="attach_file"
+            svg="paperclip"
             @click.native="$refs.attachment[index].click()"
           />
         </label>
@@ -154,12 +154,12 @@
                 : $t('action.turn_on')
               : $t('action.turn_off')
           "
-          :icon="
+          :svg="
             param.hasOwnProperty('active')
               ? param.active
-                ? 'check_circle_outline'
-                : 'radio_button_unchecked'
-              : 'check_circle_outline'
+                ? 'check-circle'
+                : 'circle'
+              : 'check-circle'
           "
           color="green"
           @click.native="
@@ -176,7 +176,7 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.remove')"
-          icon="remove_circle_outline"
+          svg="trash"
           color="red"
           @click.native="deleteBodyParam(index)"
         />
@@ -192,7 +192,7 @@
       <ButtonSecondary
         :label="$t('add.new')"
         filled
-        icon="add"
+        svg="plus"
         @click.native="addBodyParam"
       />
     </div>
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 71f1ef641..fe3c39cee 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -59,7 +59,7 @@
       <ButtonPrimary
         ref="copyRequestCode"
         :label="t('action.copy')"
-        :icon="copyIcon"
+        :svg="copyIcon"
         @click.native="copyRequestCode"
       />
       <ButtonSecondary :label="t('action.dismiss')" @click.native="hideModal" />
@@ -93,7 +93,7 @@ const options = ref<any | null>(null)
 
 const request = ref(getRESTRequest())
 const codegenType = ref("curl")
-const copyIcon = ref("content_copy")
+const copyIcon = ref("copy")
 
 const requestCode = computed(() => {
   const effectiveRequest = getEffectiveRESTRequest(
@@ -119,10 +119,10 @@ const hideModal = () => emit("hide-modal")
 
 const copyRequestCode = () => {
   copyToClipboard(requestCode.value)
-  copyIcon.value = "done"
+  copyIcon.value = "check"
   $toast.success(t("state.copied_to_clipboard").toString(), {
     icon: "content_paste",
   })
-  setTimeout(() => (copyIcon.value = "content_copy"), 1000)
+  setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index d5a1df2c3..924a2fdd3 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -22,18 +22,18 @@
           to="https://docs.hoppscotch.io/features/headers"
           blank
           :title="$t('app.wiki')"
-          icon="help_outline"
+          svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear_all')"
-          icon="clear_all"
+          svg="trash-2"
           @click.native="clearContent"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('add.new')"
-          icon="add"
+          svg="plus"
           @click.native="addHeader"
         />
       </div>
@@ -109,12 +109,12 @@
                 : $t('action.turn_on')
               : $t('action.turn_off')
           "
-          :icon="
+          :svg="
             header.hasOwnProperty('active')
               ? header.active
-                ? 'check_circle_outline'
-                : 'radio_button_unchecked'
-              : 'check_circle_outline'
+                ? 'check-circle'
+                : 'circle'
+              : 'check-circle'
           "
           color="green"
           @click.native="
@@ -130,7 +130,7 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.remove')"
-          icon="remove_circle_outline"
+          svg="trash"
           color="red"
           @click.native="deleteHeader(index)"
         />
@@ -146,7 +146,7 @@
       <ButtonSecondary
         filled
         :label="$t('add.new')"
-        icon="add"
+        svg="plus"
         @click.native="addHeader"
       />
     </div>
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index ef4e700ac..860847572 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -22,18 +22,18 @@
           to="https://docs.hoppscotch.io/features/parameters"
           blank
           :title="$t('app.wiki')"
-          icon="help_outline"
+          svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear_all')"
-          icon="clear_all"
+          svg="trash-2"
           @click.native="clearContent"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('add.new')"
-          icon="add"
+          svg="plus"
           @click.native="addParam"
         />
       </div>
@@ -120,12 +120,12 @@
                 : $t('action.turn_on')
               : $t('action.turn_off')
           "
-          :icon="
+          :svg="
             param.hasOwnProperty('active')
               ? param.active
-                ? 'check_circle_outline'
-                : 'radio_button_unchecked'
-              : 'check_circle_outline'
+                ? 'check-circle'
+                : 'circle'
+              : 'check-circle'
           "
           color="green"
           @click.native="
@@ -141,7 +141,7 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.remove')"
-          icon="remove_circle_outline"
+          svg="trash"
           color="red"
           @click.native="deleteParam(index)"
         />
@@ -156,7 +156,7 @@
       </span>
       <ButtonSecondary
         :label="$t('add.new')"
-        icon="add"
+        svg="plus"
         filled
         @click.native="addParam"
       />
diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue
index cb26c32f3..a24629650 100644
--- a/components/http/PreRequestScript.vue
+++ b/components/http/PreRequestScript.vue
@@ -22,12 +22,12 @@
           to="https://docs.hoppscotch.io/features/pre-request-script"
           blank
           :title="$t('app.wiki')"
-          icon="help_outline"
+          svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear')"
-          icon="clear_all"
+          svg="trash-2"
           @click.native="clearContent"
         />
       </div>
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index a4228d7c3..be24b599b 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -22,12 +22,12 @@
           to="https://docs.hoppscotch.io/features/body"
           blank
           :title="$t('app.wiki')"
-          icon="help_outline"
+          svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear')"
-          icon="clear_all"
+          svg="trash-2"
           @click.native="clearContent('rawParams', $event)"
         />
         <ButtonSecondary
@@ -35,14 +35,14 @@
           ref="prettifyRequest"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.prettify')"
-          :icon="prettifyIcon"
+          :svg="prettifyIcon"
           @click.native="prettifyRequestBody"
         />
         <label for="payload">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('import.json')"
-            icon="post_add"
+            svg="file-plus"
             @click.native="$refs.payload.click()"
           />
         </label>
@@ -88,7 +88,7 @@ export default defineComponent({
   setup() {
     return {
       rawParamsBody: pluckRef(useRESTRequestBody(), "body"),
-      prettifyIcon: "photo_filter",
+      prettifyIcon: "sparkles",
     }
   },
   computed: {
@@ -122,8 +122,8 @@ export default defineComponent({
       try {
         const jsonObj = JSON.parse(this.rawParamsBody)
         this.rawParamsBody = JSON.stringify(jsonObj, null, 2)
-        this.prettifyIcon = "done"
-        setTimeout(() => (this.prettifyIcon = "photo_filter"), 1000)
+        this.prettifyIcon = "check"
+        setTimeout(() => (this.prettifyIcon = "sparkles"), 1000)
       } catch (e) {
         console.error(e)
         this.$toast.error(`${this.$t("error.json_prettify_invalid_body")}`, {
diff --git a/components/http/Request.vue b/components/http/Request.vue
index b8c672005..01a5967a9 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -107,15 +107,11 @@
           arrow
         >
           <template #trigger>
-            <ButtonPrimary
-              class="rounded-l-none"
-              filled
-              icon="keyboard_arrow_down"
-            />
+            <ButtonPrimary class="rounded-l-none" filled svg="chevron-down" />
           </template>
           <SmartItem
             :label="$t('import.curl')"
-            icon="import_export"
+            svg="terminal"
             @click.native="
               () => {
                 showCurlImportModal = !showCurlImportModal
@@ -125,7 +121,7 @@
           />
           <SmartItem
             :label="$t('show.code')"
-            icon="code"
+            svg="code"
             @click.native="
               () => {
                 showCodegenModal = !showCodegenModal
@@ -136,7 +132,7 @@
           <SmartItem
             ref="clearAll"
             :label="$t('action.clear_all')"
-            icon="clear_all"
+            svg="rotate-ccw"
             @click.native="
               () => {
                 clearContent()
@@ -150,7 +146,7 @@
         class="rounded-r-none ml-2"
         :label="$t('request.save')"
         filled
-        icon="save"
+        svg="save"
         @click.native="saveRequest()"
       />
       <span class="flex">
@@ -162,11 +158,7 @@
           arrow
         >
           <template #trigger>
-            <ButtonSecondary
-              icon="keyboard_arrow_down"
-              filled
-              class="rounded-r"
-            />
+            <ButtonSecondary svg="chevron-down" filled class="rounded-r" />
           </template>
           <input
             id="request-name"
@@ -180,7 +172,7 @@
           <SmartItem
             ref="copyRequest"
             :label="$t('request.copy_link')"
-            :icon="hasNavigatorShare ? 'share' : 'content_copy'"
+            :svg="hasNavigatorShare ? 'share-2' : 'copy'"
             @click.native="
               () => {
                 copyRequest()
@@ -191,7 +183,7 @@
           <SmartItem
             ref="saveRequest"
             :label="$t('request.save_as')"
-            icon="create_new_folder"
+            svg="folder-plus"
             @click.native="
               () => {
                 showSaveRequestModal = true
diff --git a/components/http/ResponseMeta.vue b/components/http/ResponseMeta.vue
index cffc606ee..0052608a0 100644
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -44,7 +44,7 @@
       <ButtonSecondary
         :label="$t('app.documentation')"
         to="https://docs.hoppscotch.io"
-        icon="open_in_new"
+        svg="external-link"
         blank
         outline
         reverse
@@ -76,7 +76,7 @@
           :label="$t('action.learn_more')"
           to="https://docs.hoppscotch.io"
           blank
-          icon="open_in_new"
+          svg="external-link"
           reverse
         />
       </div>
diff --git a/components/http/TestResult.vue b/components/http/TestResult.vue
index 83ec777c1..0ce516558 100644
--- a/components/http/TestResult.vue
+++ b/components/http/TestResult.vue
@@ -25,7 +25,7 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear')"
-          icon="clear_all"
+          svg="trash-2"
           @click.native="clearContent()"
         />
       </div>
@@ -87,7 +87,7 @@
         :label="$t('action.learn_more')"
         to="https://docs.hoppscotch.io"
         blank
-        icon="open_in_new"
+        svg="external-link"
         reverse
       />
     </div>
diff --git a/components/http/Tests.vue b/components/http/Tests.vue
index 526361c24..a44afcc8b 100644
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -22,12 +22,12 @@
           to="https://docs.hoppscotch.io/features/tests"
           blank
           :title="$t('app.wiki')"
-          icon="help_outline"
+          svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear')"
-          icon="clear_all"
+          svg="trash-2"
           @click.native="clearContent"
         />
       </div>
diff --git a/components/landing/CTA.vue b/components/landing/CTA.vue
index bba23b1c0..202794d50 100644
--- a/components/landing/CTA.vue
+++ b/components/landing/CTA.vue
@@ -28,7 +28,7 @@
         <p class="mt-2">
           <SmartLink :to="cta.link.target" class="link" blank>
             {{ cta.link.title }}
-            <i class="material-icons">chevron_right</i>
+            <SmartIcon name="chevron-right" class="svg-icons" />
           </SmartLink>
         </p>
       </div>
diff --git a/components/landing/Features.vue b/components/landing/Features.vue
index e42f302af..92b0e4d9b 100644
--- a/components/landing/Features.vue
+++ b/components/landing/Features.vue
@@ -20,7 +20,7 @@
           <p class="mt-2">
             <NuxtLink :to="feature.link.target" class="link">
               {{ feature.link.title }}
-              <i class="material-icons">chevron_right</i>
+              <SmartIcon name="chevron-right" class="svg-icons" />
             </NuxtLink>
           </p>
         </div>
diff --git a/components/landing/Hero.vue b/components/landing/Hero.vue
index 4681e9973..cba17716b 100644
--- a/components/landing/Hero.vue
+++ b/components/landing/Hero.vue
@@ -36,7 +36,7 @@
       <div class="flex space-x-4 my-8 justify-center items-center">
         <ButtonPrimary
           label="Get Started"
-          icon="arrow_forward"
+          svg="arrow-right"
           reverse
           large
           @click.native="showLogin = true"
diff --git a/components/lenses/HeadersRenderer.vue b/components/lenses/HeadersRenderer.vue
index 3cef24e98..8205dc144 100644
--- a/components/lenses/HeadersRenderer.vue
+++ b/components/lenses/HeadersRenderer.vue
@@ -22,7 +22,7 @@
           ref="copyHeaders"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.copy')"
-          :icon="copyIcon"
+          :svg="copyIcon"
           @click.native="copyHeaders"
         />
       </div>
@@ -79,17 +79,17 @@ export default defineComponent({
   },
   data() {
     return {
-      copyIcon: "content_copy",
+      copyIcon: "copy",
     }
   },
   methods: {
     copyHeaders() {
       copyToClipboard(JSON.stringify(this.headers))
-      this.copyIcon = "done"
+      this.copyIcon = "check"
       this.$toast.success(this.$t("state.copied_to_clipboard"), {
         icon: "content_paste",
       })
-      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
     },
   },
 })
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index db26e3750..9ba3e3d90 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -23,7 +23,7 @@
           :title="
             previewEnabled ? $t('hide.preview') : $t('response.preview_html')
           "
-          :icon="!previewEnabled ? 'visibility' : 'visibility_off'"
+          :svg="!previewEnabled ? 'eye' : 'eye-off'"
           @click.native.prevent="togglePreview"
         />
         <ButtonSecondary
@@ -31,7 +31,7 @@
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.download_file')"
-          :icon="downloadIcon"
+          :svg="downloadIcon"
           @click.native="downloadResponse"
         />
         <ButtonSecondary
@@ -39,7 +39,7 @@
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.copy')"
-          :icon="copyIcon"
+          :svg="copyIcon"
           @click.native="copyResponse"
         />
       </div>
@@ -80,8 +80,8 @@ export default defineComponent({
   },
   data() {
     return {
-      downloadIcon: "save_alt",
-      copyIcon: "content_copy",
+      downloadIcon: "download",
+      copyIcon: "copy",
       previewEnabled: false,
     }
   },
@@ -96,23 +96,23 @@ export default defineComponent({
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
       document.body.appendChild(a)
       a.click()
-      this.downloadIcon = "done"
+      this.downloadIcon = "check"
       this.$toast.success(this.$t("state.download_started"), {
         icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)
-        this.downloadIcon = "save_alt"
+        this.downloadIcon = "download"
       }, 1000)
     },
     copyResponse() {
       copyToClipboard(this.responseBodyText)
-      this.copyIcon = "done"
+      this.copyIcon = "check"
       this.$toast.success(this.$t("state.copied_to_clipboard"), {
         icon: "content_paste",
       })
-      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
     },
     togglePreview() {
       this.previewEnabled = !this.previewEnabled
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index 874c83261..a2ee88044 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -22,7 +22,7 @@
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.download_file')"
-          :icon="downloadIcon"
+          :svg="downloadIcon"
           @click.native="downloadResponse"
         />
       </div>
@@ -46,7 +46,7 @@ export default defineComponent({
   data() {
     return {
       imageSource: "",
-      downloadIcon: "save_alt",
+      downloadIcon: "download",
     }
   },
   computed: {
@@ -102,14 +102,14 @@ export default defineComponent({
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
       document.body.appendChild(a)
       a.click()
-      this.downloadIcon = "done"
+      this.downloadIcon = "check"
       this.$toast.success(this.$t("state.download_started"), {
         icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)
-        this.downloadIcon = "save_alt"
+        this.downloadIcon = "download"
       }, 1000)
     },
   },
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 2851b55e1..fc6bc2f12 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -22,7 +22,7 @@
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.download_file')"
-          :icon="downloadIcon"
+          :svg="downloadIcon"
           @click.native="downloadResponse"
         />
         <ButtonSecondary
@@ -30,7 +30,7 @@
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.copy')"
-          :icon="copyIcon"
+          :svg="copyIcon"
           @click.native="copyResponse"
         />
       </div>
@@ -66,8 +66,8 @@ export default defineComponent({
   },
   data() {
     return {
-      downloadIcon: "save_alt",
-      copyIcon: "content_copy",
+      downloadIcon: "download",
+      copyIcon: "copy",
     }
   },
   computed: {
@@ -100,23 +100,23 @@ export default defineComponent({
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
       document.body.appendChild(a)
       a.click()
-      this.downloadIcon = "done"
+      this.downloadIcon = "check"
       this.$toast.success(this.$t("state.download_started"), {
         icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)
-        this.downloadIcon = "save_alt"
+        this.downloadIcon = "download"
       }, 1000)
     },
     copyResponse() {
       copyToClipboard(this.responseBodyText)
-      this.copyIcon = "done"
+      this.copyIcon = "check"
       this.$toast.success(this.$t("state.copied_to_clipboard"), {
         icon: "content_paste",
       })
-      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
     },
   },
 })
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 7fee1051c..563f9de1f 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -22,7 +22,7 @@
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.download_file')"
-          :icon="downloadIcon"
+          :svg="downloadIcon"
           @click.native="downloadResponse"
         />
         <ButtonSecondary
@@ -30,7 +30,7 @@
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.copy')"
-          :icon="copyIcon"
+          :svg="copyIcon"
           @click.native="copyResponse"
         />
       </div>
@@ -65,8 +65,8 @@ export default defineComponent({
   },
   data() {
     return {
-      downloadIcon: "save_alt",
-      copyIcon: "content_copy",
+      downloadIcon: "download",
+      copyIcon: "copy",
     }
   },
   computed: {
@@ -91,23 +91,23 @@ export default defineComponent({
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
       document.body.appendChild(a)
       a.click()
-      this.downloadIcon = "done"
+      this.downloadIcon = "check"
       this.$toast.success(this.$t("state.download_started"), {
         icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)
-        this.downloadIcon = "save_alt"
+        this.downloadIcon = "download"
       }, 1000)
     },
     copyResponse() {
       copyToClipboard(this.responseBodyText)
-      this.copyIcon = "done"
+      this.copyIcon = "check"
       this.$toast.success(this.$t("state.copied_to_clipboard"), {
         icon: "content_paste",
       })
-      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
     },
   },
 })
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 3aa9fd7fe..eb5340f41 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -22,7 +22,7 @@
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.download_file')"
-          :icon="downloadIcon"
+          :svg="downloadIcon"
           @click.native="downloadResponse"
         />
         <ButtonSecondary
@@ -30,7 +30,7 @@
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.copy')"
-          :icon="copyIcon"
+          :svg="copyIcon"
           @click.native="copyResponse"
         />
       </div>
@@ -65,8 +65,8 @@ export default defineComponent({
   },
   data() {
     return {
-      copyIcon: "content_copy",
-      downloadIcon: "save_alt",
+      copyIcon: "copy",
+      downloadIcon: "download",
     }
   },
   computed: {
@@ -91,23 +91,23 @@ export default defineComponent({
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
       document.body.appendChild(a)
       a.click()
-      this.downloadIcon = "done"
+      this.downloadIcon = "check"
       this.$toast.success(this.$t("state.download_started"), {
         icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)
-        this.downloadIcon = "save_alt"
+        this.downloadIcon = "download"
       }, 1000)
     },
     copyResponse() {
       copyToClipboard(this.responseBodyText)
-      this.copyIcon = "done"
+      this.copyIcon = "check"
       this.$toast.success(this.$t("state.copied_to_clipboard"), {
         icon: "content_paste",
       })
-      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
     },
   },
 })
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index e99b1b7aa..b8be272a8 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -105,7 +105,7 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('add.new')"
-              icon="add"
+              svg="plus"
               class="rounded"
               @click.native="addCommunicationInput"
             />
@@ -130,7 +130,7 @@
                 v-if="index + 1 !== communication.inputs.length"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.remove')"
-                icon="remove_circle_outline"
+                svg="trash"
                 class="rounded"
                 color="red"
                 outline
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 4fdcade49..cc36db7c2 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -63,13 +63,13 @@
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   :title="$t('action.clear_all')"
-                  icon="clear_all"
+                  svg="trash-2"
                   @click.native="clearContent"
                 />
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   :title="$t('add.new')"
-                  icon="add"
+                  svg="plus"
                   @click.native="addProtocol"
                 />
               </div>
@@ -100,12 +100,12 @@
                         : $t('action.turn_on')
                       : $t('action.turn_off')
                   "
-                  :icon="
+                  :svg="
                     protocol.hasOwnProperty('active')
                       ? protocol.active
-                        ? 'check_circle_outline'
-                        : 'radio_button_unchecked'
-                      : 'check_circle_outline'
+                        ? 'check-circle'
+                        : 'circle'
+                      : 'check-circle'
                   "
                   color="green"
                   @click.native="
@@ -119,7 +119,7 @@
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   :title="$t('action.remove')"
-                  icon="remove_circle_outline"
+                  svg="trash"
                   color="red"
                   @click.native="deleteProtocol({ index })"
                 />
diff --git a/components/smart/ChangeLanguage.vue b/components/smart/ChangeLanguage.vue
index 0dd9b31d0..f85337b18 100644
--- a/components/smart/ChangeLanguage.vue
+++ b/components/smart/ChangeLanguage.vue
@@ -8,7 +8,7 @@
             :title="$t('settings.choose_language')"
             class="pr-8"
             outline
-            icon="language"
+            svg="globe"
             :label="`${
               $i18n.locales.find(({ code }) => code == $i18n.locale).name
             }`"
diff --git a/components/smart/ColorModePicker.vue b/components/smart/ColorModePicker.vue
index 188d54aa5..bc5208acc 100644
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -9,7 +9,7 @@
         'bg-primaryLight !text-accent hover:text-accent': color === active,
       }"
       class="rounded"
-      :icon="getIcon(color)"
+      :svg="getIcon(color)"
       @click.native="setBGMode(color)"
     />
   </div>
@@ -38,15 +38,15 @@ export default defineComponent({
     getIcon(color: HoppBgColor) {
       switch (color) {
         case "system":
-          return "devices"
+          return "monitor"
         case "light":
-          return "light_mode"
+          return "sun"
         case "dark":
-          return "nights_stay"
+          return "cloud"
         case "black":
-          return "dark_mode"
+          return "moon"
         default:
-          return "devices"
+          return "monitor"
       }
     },
     getColorModeName(colorMode: string) {
diff --git a/components/smart/DeletableChip.vue b/components/smart/DeletableChip.vue
index 6985c239b..ae4549ff2 100644
--- a/components/smart/DeletableChip.vue
+++ b/components/smart/DeletableChip.vue
@@ -4,7 +4,7 @@
     <span class="max-w-64 px-2 truncate"><slot></slot></span>
     <ButtonSecondary
       class="rounded close-button"
-      icon="close"
+      svg="x"
       @click.native="$emit('chip-delete')"
     />
   </span>
diff --git a/components/smart/FontSizePicker.vue b/components/smart/FontSizePicker.vue
index d75be2bca..5b862ba83 100644
--- a/components/smart/FontSizePicker.vue
+++ b/components/smart/FontSizePicker.vue
@@ -7,7 +7,7 @@
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('settings.change_font_size')"
             class="pr-8"
-            icon="format_size"
+            svg="type"
             outline
             :label="getFontSizeName(fontSizes.find((size) => size == active))"
           />
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 8bc5c3699..dc61fe753 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -58,7 +58,7 @@
                 <ButtonSecondary
                   v-if="dimissible"
                   class="rounded"
-                  icon="close"
+                  svg="x"
                   @click.native="close"
                 />
               </span>
diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index 202aa02d9..c9b343a6b 100644
--- a/components/smart/Toggle.vue
+++ b/components/smart/Toggle.vue
@@ -26,20 +26,22 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-$useBorder: false;
+$useBorder: true;
 $borderColor: var(--divider-color);
-$activeColor: var(--accent-color);
+$activeColor: var(--divider-color);
 $inactiveColor: var(--divider-color);
-$inactiveHandleColor: var(--primary-color);
-$activeHandleColor: var(--primary-color);
+$inactiveHandleColor: var(--secondary-light-color);
+$activeHandleColor: var(--accent-color);
 $width: 1.6rem;
-$height: 0.78rem;
-$handleSpacing: 0.2rem;
+$height: 0.6rem;
+$indicatorHeight: 0.4rem;
+$indicatorWidth: 0.4rem;
+$handleSpacing: 0.1rem;
 $transition: all 0.2s ease-in-out;
 
 .toggle {
   @apply relative;
-  @apply inline-flex;
+  @apply flex;
   @apply items-center;
   @apply justify-center;
   @apply rounded-full;
@@ -57,7 +59,8 @@ $transition: all 0.2s ease-in-out;
 
   .handle {
     @apply absolute;
-    @apply inline-block;
+    @apply flex;
+    @apply flex-shrink-0;
     @apply inset-0;
     @apply rounded-full;
     @apply pointer-events-none;
@@ -65,12 +68,12 @@ $transition: all 0.2s ease-in-out;
     transition: $transition;
     margin: $handleSpacing;
     background-color: $inactiveHandleColor;
-    width: #{$height - ($handleSpacing * 2)};
-    height: #{$height - ($handleSpacing * 2)};
+    width: $indicatorWidth;
+    height: $indicatorHeight;
   }
 
   &.on {
-    background-color: $activeColor;
+    // background-color: $activeColor;
     border-color: $activeColor;
 
     .handle {
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index a1e51f89c..ad745eebd 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -22,7 +22,7 @@
           </label>
           <div class="flex">
             <ButtonSecondary
-              icon="add"
+              svg="plus"
               :label="$t('add.new')"
               @click.native="addTeamMember"
             />
@@ -89,7 +89,7 @@
                 id="member"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.remove')"
-                icon="remove_circle_outline"
+                svg="trash"
                 color="red"
                 @click.native="removeExistingTeamMember(member.user.uid)"
               />
@@ -155,7 +155,7 @@
                 id="member"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.remove')"
-                icon="remove_circle_outline"
+                svg="trash"
                 color="red"
                 @click.native="removeTeamMember(index)"
               />
@@ -171,7 +171,7 @@
               justify-center
             "
           >
-            <i class="opacity-75 pb-2 material-icons">layers</i>
+            <SmartIcon class="opacity-75 pb-2" name="users" />
             <span class="text-center pb-4">
               {{ $t("empty.members") }}
             </span>
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index db45eb45a..06d8a59b2 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -27,12 +27,12 @@
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('action.more')"
-            icon="more_vert"
+            svg="more-vertical"
           />
         </template>
         <SmartItem
           v-if="team.myRole === 'OWNER'"
-          icon="create"
+          svg="edit"
           :label="$t('action.edit')"
           @click.native="
             $emit('edit-team')
@@ -41,7 +41,7 @@
         />
         <SmartItem
           v-if="team.myRole === 'OWNER'"
-          icon="delete"
+          svg="trash-2"
           color="red"
           :label="$t('action.delete')"
           @click.native="
@@ -51,7 +51,7 @@
         />
         <SmartItem
           v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
-          icon="remove"
+          svg="trash"
           :label="$t('team.exit')"
           @click.native="
             exitTeam()
diff --git a/layouts/error.vue b/layouts/error.vue
index 6df2acca5..1c251a793 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -3,11 +3,11 @@
     <h1 class="mb-4 text-4xl heading">{{ statusCode }}</h1>
     <h3 class="select-text">{{ message }}</h3>
     <p class="mt-4">
-      <ButtonSecondary to="/" icon="home" outline :label="$t('app.home')" />
+      <ButtonSecondary to="/" svg="home" filled :label="$t('app.home')" />
       <ButtonSecondary
-        icon="refresh"
+        svg="refresh-cw"
         :label="$t('app.reload')"
-        outline
+        filled
         @click.native="reloadApplication"
       />
     </p>
diff --git a/pages/documentation.vue b/pages/documentation.vue
index 5da190417..7bc44e0bf 100644
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -37,8 +37,8 @@
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   title="JSON"
-                  icon="folder"
-                  class="rounded-none"
+                  svg="folder"
+                  class="!rounded-none"
                   :label="$t('import.collections')"
                   @click.native="$refs.collectionUpload.click()"
                 />
@@ -53,7 +53,7 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.clear')"
-                icon="clear_all"
+                svg="trash-2"
                 @click.native="collectionJSON = '[]'"
               />
             </div>
diff --git a/pages/settings.vue b/pages/settings.vue
index 034063ee5..1f33cb956 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -30,7 +30,7 @@
                       :src="currentUser.photoURL"
                       class="rounded-full h-5 w-5"
                     />
-                    <i v-else class="material-icons">account_circle</i>
+                    <SmartIcon v-else name="user" class="svg-icons" />
                   </div>
                   <div class="ml-4">
                     <label>
@@ -43,7 +43,7 @@
                 </div>
                 <div class="flex items-start">
                   <div class="flex items-center">
-                    <i class="material-icons">email</i>
+                    <SmartIcon name="at-sign" class="svg-icons" />
                   </div>
                   <div class="ml-4">
                     <label>
@@ -314,7 +314,7 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('settings.reset_default')"
-                :icon="clearIcon"
+                :svg="clearIcon"
                 outline
                 class="rounded"
                 @click.native="resetProxy"
@@ -390,7 +390,7 @@ export default defineComponent({
       hasChromeExtInstalled: hasChromeExtensionInstalled(),
       hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
 
-      clearIcon: "clear_all",
+      clearIcon: "rotate-ccw",
 
       showLogin: false,
 
@@ -449,11 +449,11 @@ export default defineComponent({
     },
     resetProxy() {
       applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
-      this.clearIcon = "done"
+      this.clearIcon = "check"
       this.$toast.success(this.$t("state.cleared").toString(), {
         icon: "clear_all",
       })
-      setTimeout(() => (this.clearIcon = "clear_all"), 1000)
+      setTimeout(() => (this.clearIcon = "rotate-ccw"), 1000)
     },
     getColorModeName(colorMode: string) {
       switch (colorMode) {