From 554bb225c2d486a4deb3a6a028c2f37828596f7e Mon Sep 17 00:00:00 2001
From: chimpdev <skyhancloud@gmail.com>
Date: Tue, 22 Oct 2024 04:26:26 +0300
Subject: [PATCH] New eslint rule

---
 client/.eslintrc.js                           |  4 ++
 .../Content/Sidebar/Icons/Collapse.jsx        | 12 ++--
 .../components/Content/Sidebar/index.jsx      |  2 +-
 .../Content/Tabs/MyAccount/CreateProfile.jsx  |  8 +--
 .../Content/Tabs/MyBots/NewBot/index.jsx      | 64 +++++++++----------
 .../Content/Tabs/MyLinks/CreateLinkModal.jsx  |  8 +--
 .../Tabs/MyServers/NewServer/index.jsx        |  6 +-
 .../Content/Tabs/MySounds/NewSound/index.jsx  | 62 +++++++++---------
 .../Content/Tabs/MyThemes/NewTheme/index.jsx  | 48 +++++++-------
 .../account/components/Content/index.jsx      |  4 +-
 client/app/(blogs)/blogs/Hero/Card.jsx        |  6 +-
 client/app/(blogs)/blogs/Hero/index.jsx       |  4 +-
 .../bots/[id]/components/Tabs/Reviews.jsx     | 26 ++++----
 .../components/sections/RightSide/Actions.jsx |  4 +-
 .../manage/components/ExtraOwners/index.jsx   |  4 +-
 .../[id]/manage/components/Input/index.jsx    |  2 +-
 client/app/(bots)/bots/[id]/manage/content.js | 14 ++--
 .../Hero/SearchResults/Card/index.jsx         |  6 +-
 .../app/(bots)/bots/components/Hero/index.jsx |  4 +-
 .../CreateQuarantineModal/index.jsx           | 32 +++++-----
 .../(dashboard)/components/Dropdown/Deny.jsx  |  6 +-
 .../app/(dashboard)/components/Home/index.jsx |  2 +-
 .../(dashboard)/components/Queue/index.jsx    | 14 ++--
 .../components/Sidebar/Icons/Collapse.jsx     | 12 ++--
 .../(dashboard)/components/Sidebar/index.jsx  |  2 +-
 .../components/Table/ColumnRenderer.jsx       |  2 +-
 .../(dashboard)/components/Table/index.jsx    |  2 +-
 client/app/(dashboard)/dashboard/page.js      |  4 +-
 .../[id]/components/FaQs/Questions/3.jsx      |  2 +-
 .../emojis/components/EmojiPreview/index.jsx  |  4 +-
 .../emojis/components/Hero/Emojis.jsx         |  2 +-
 .../(emojis)/emojis/components/Hero/index.jsx |  4 +-
 .../components/PackagePreview/index.jsx       |  4 +-
 .../components/UploadEmojiToDiscordModal.jsx  |  4 +-
 client/app/(emojis)/emojis/create/page.js     |  8 +--
 .../[id]/components/FaQs/Questions/3.jsx      |  2 +-
 client/app/(home)/page.js                     |  2 +-
 .../components/sections/Graph/index.jsx       |  2 +-
 .../[slug]/components/sections/Servers.jsx    |  2 +-
 .../app/(profiles)/profile/[slug]/content.js  |  2 +-
 .../(profiles)/profile/[slug]/edit/content.js | 14 ++--
 .../(profiles)/profile/u/[user_id]/content.js | 10 +--
 .../profiles/components/Hero/index.jsx        |  4 +-
 .../servers/[id]/components/Tabs/Reviews.jsx  | 26 ++++----
 .../servers/[id]/components/Tabs/Rewards.jsx  | 20 +++---
 .../components/sections/RightSide/Actions.jsx |  4 +-
 .../[id]/manage/components/Input/index.jsx    |  2 +-
 .../(servers)/servers/[id]/manage/content.js  | 12 ++--
 .../servers/components/Hero/index.jsx         |  4 +-
 .../servers/components/ServerCard/index.jsx   |  6 +-
 .../[id]/components/FaQs/Questions/3.jsx      |  2 +-
 .../UploadSoundToDiscordModal.jsx             |  4 +-
 .../sounds/components/SoundPreview/index.jsx  | 14 ++--
 .../sounds/components/Sounds/index.jsx        |  2 +-
 client/app/(sounds)/sounds/content.js         |  4 +-
 .../components/Icons/BrowseChannels/index.jsx |  6 +-
 .../components/Icons/CirclePlus/index.jsx     |  4 +-
 .../Icons/CommunityServerBoosted/index.jsx    | 12 ++--
 .../preview/components/Icons/Emoji/index.jsx  |  4 +-
 .../preview/components/Icons/Events/index.jsx |  6 +-
 .../preview/components/Icons/Gif/index.jsx    |  4 +-
 .../preview/components/Icons/Help/index.jsx   |  4 +-
 .../preview/components/Icons/Home/index.jsx   |  4 +-
 .../preview/components/Icons/Inbox/index.jsx  |  4 +-
 .../components/Icons/MemberList/index.jsx     |  4 +-
 .../preview/components/Icons/Nitro/index.jsx  |  8 +--
 .../Icons/NotificationSettings/index.jsx      |  4 +-
 .../components/Icons/PinnedMessages/index.jsx |  4 +-
 .../preview/components/Icons/Search/index.jsx |  4 +-
 .../components/Icons/Stickers/index.jsx       |  6 +-
 .../components/Icons/TextChannel/index.jsx    |  4 +-
 .../Icons/TextChannelNSFW/index.jsx           |  6 +-
 .../components/Icons/Threads/index.jsx        |  4 +-
 .../components/Icons/VoiceChannel/index.jsx   |  6 +-
 .../Icons/VoiceChannelNSFW/index.jsx          |  6 +-
 .../[id]/preview/components/Sidebar/index.jsx | 24 +++----
 .../templates/[id]/preview/content.js         |  2 +-
 .../Hero/SearchResults/Card/index.jsx         | 14 ++--
 .../templates/components/Hero/index.jsx       |  4 +-
 .../app/(templates)/templates/create/page.js  |  8 +--
 .../[id]/components/FaQs/Questions/3.jsx      |  2 +-
 .../themes/components/Themes/index.jsx        |  2 +-
 client/app/(themes)/themes/content.js         |  4 +-
 client/app/api/og/content/Blog.jsx            |  2 +-
 client/app/api/og/content/Bot.jsx             |  2 +-
 client/app/api/og/content/Emoji.jsx           |  2 +-
 client/app/api/og/content/Profile.jsx         |  6 +-
 client/app/api/og/content/Server.jsx          |  4 +-
 client/app/api/og/content/Sound.jsx           |  6 +-
 client/app/api/og/content/Template.jsx        |  2 +-
 client/app/api/og/route.jsx                   |  2 +-
 client/app/components/Background/Square.jsx   | 12 ++--
 client/app/components/CookieBanner/index.jsx  |  6 +-
 client/app/components/FlipWords/index.jsx     |  2 +-
 client/app/components/Footer/index.jsx        |  6 +-
 .../app/components/FullPageLoading/index.jsx  |  4 +-
 .../components/Header/NotCollapsedHeader.jsx  |  4 +-
 .../components/Header/ServicesDropdown.jsx    | 12 ++--
 client/app/components/Header/UserSide.jsx     |  2 +-
 client/app/components/Logo/WithText.jsx       |  2 +-
 .../app/components/Providers/Modal/index.jsx  |  2 +-
 .../Providers/ProgressBar/index.jsx           |  4 +-
 .../ReportableArea/Previews/Bot.jsx           |  6 +-
 .../ReportableArea/Previews/Emoji.jsx         |  8 +--
 .../ReportableArea/Previews/Profile.jsx       | 10 +--
 .../ReportableArea/Previews/Review.jsx        |  6 +-
 .../ReportableArea/Previews/Server.jsx        |  6 +-
 .../ReportableArea/Previews/Sound.jsx         |  4 +-
 .../ReportableArea/Previews/Template.jsx      |  6 +-
 .../ReportableArea/Previews/Theme.jsx         |  6 +-
 client/app/components/Select/index.jsx        | 10 +--
 client/app/layout.js                          |  2 +-
 client/app/legal/content-policy/page.js       |  2 +-
 client/app/legal/cookie-policy/page.js        |  2 +-
 client/app/legal/privacy/page.js              |  4 +-
 client/app/legal/purchase-policy/page.js      |  2 +-
 client/app/legal/terms/page.js                |  4 +-
 client/app/premium/content.jsx                |  4 +-
 client/lib/markdownComponents.jsx             |  2 +-
 docs/.eslintrc.js                             |  4 ++
 docs/app/layout.js                            |  2 +-
 docs/components/endpoint.jsx                  |  2 +-
 docs/components/footer.jsx                    |  8 +--
 docs/components/header.jsx                    | 12 ++--
 124 files changed, 448 insertions(+), 440 deletions(-)

diff --git a/client/.eslintrc.js b/client/.eslintrc.js
index 7834cde7..54bd273d 100644
--- a/client/.eslintrc.js
+++ b/client/.eslintrc.js
@@ -20,6 +20,10 @@ module.exports = {
   },
   rules: {
     'react/prop-types': 'off',
+    'jsx-quotes': [
+      'error',
+      'prefer-single'
+    ],
     'react/self-closing-comp': [
       'error',
       {
diff --git a/client/app/(account)/account/components/Content/Sidebar/Icons/Collapse.jsx b/client/app/(account)/account/components/Content/Sidebar/Icons/Collapse.jsx
index 5c70a266..536d8254 100644
--- a/client/app/(account)/account/components/Content/Sidebar/Icons/Collapse.jsx
+++ b/client/app/(account)/account/components/Content/Sidebar/Icons/Collapse.jsx
@@ -1,14 +1,14 @@
 export default function CollapseIcon({ ...props }) {
   return (
     <svg
-      stroke="currentColor"
-      fill="currentColor"
-      stroke-width="0"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
+      stroke='currentColor'
+      fill='currentColor'
+      stroke-width='0'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
-      <path d="M15 4.00008H13V11.0001H20V9.00008H16.4142L20.7071 4.70718L19.2929 3.29297L15 7.58586V4.00008ZM4.00008 15H7.58586L3.29297 19.2929L4.70718 20.7071L9.00008 16.4142V20H11.0001V13H4.00008V15Z" />
+      <path d='M15 4.00008H13V11.0001H20V9.00008H16.4142L20.7071 4.70718L19.2929 3.29297L15 7.58586V4.00008ZM4.00008 15H7.58586L3.29297 19.2929L4.70718 20.7071L9.00008 16.4142V20H11.0001V13H4.00008V15Z' />
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(account)/account/components/Content/Sidebar/index.jsx b/client/app/(account)/account/components/Content/Sidebar/index.jsx
index debb5fdf..fe40f7d8 100644
--- a/client/app/(account)/account/components/Content/Sidebar/index.jsx
+++ b/client/app/(account)/account/components/Content/Sidebar/index.jsx
@@ -43,7 +43,7 @@ export default function Sidebar({ blocks }) {
               src={theme === 'dark' ? '/symbol_white.png' : '/symbol_black.png'}
               width={64}
               height={64}
-              alt="discord.place Logo"
+              alt='discord.place Logo'
               className='size-6'
             />
 
diff --git a/client/app/(account)/account/components/Content/Tabs/MyAccount/CreateProfile.jsx b/client/app/(account)/account/components/Content/Tabs/MyAccount/CreateProfile.jsx
index b7aa1424..09e27e51 100644
--- a/client/app/(account)/account/components/Content/Tabs/MyAccount/CreateProfile.jsx
+++ b/client/app/(account)/account/components/Content/Tabs/MyAccount/CreateProfile.jsx
@@ -67,7 +67,7 @@ export default function CreateProfile() {
   }, [debouncedSlug]);
 
   return (
-    <div className="flex flex-col gap-y-4">
+    <div className='flex flex-col gap-y-4'>
       <div className='flex flex-col'>
         <div className='flex items-center gap-x-2'>
           <h2 className='text-sm font-semibold text-secondary'>
@@ -87,7 +87,7 @@ export default function CreateProfile() {
           {t('accountPage.tabs.myAccount.sections.yourProfile.createProfileModal.fields.host.description')}
         </p>
 
-        <div className="mt-2 flex w-full">
+        <div className='mt-2 flex w-full'>
           {['discord.place/p', ...config.customHostnames]
             .map(hostname => (
               <div
@@ -153,9 +153,9 @@ export default function CreateProfile() {
         </p>
 
         <input
-          type="text"
+          type='text'
           placeholder={t('accountPage.tabs.myAccount.sections.yourProfile.createProfileModal.fields.slug.placeholder')}
-          className="mt-2 w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background"
+          className='mt-2 w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background'
           value={slug}
           maxLength={32}
           onChange={event => setSlug(event.target.value)}
diff --git a/client/app/(account)/account/components/Content/Tabs/MyBots/NewBot/index.jsx b/client/app/(account)/account/components/Content/Tabs/MyBots/NewBot/index.jsx
index d441aa7b..69c72384 100644
--- a/client/app/(account)/account/components/Content/Tabs/MyBots/NewBot/index.jsx
+++ b/client/app/(account)/account/components/Content/Tabs/MyBots/NewBot/index.jsx
@@ -108,13 +108,13 @@ export default function NewBot() {
 
   return (
     <>
-      <div className="pointer-events-none fixed left-0 top-0 z-10 h-svh w-full">
-        <Lottie options={{ loop: false, autoplay: false, animationData: confetti }} isStopped={!renderConfetti} height="100%" width="100%"/>
+      <div className='pointer-events-none fixed left-0 top-0 z-10 h-svh w-full'>
+        <Lottie options={{ loop: false, autoplay: false, animationData: confetti }} isStopped={!renderConfetti} height='100%' width='100%'/>
       </div>
 
-      <div className="flex w-full max-w-[800px] flex-col justify-center gap-y-4">
-        <div className="flex items-center gap-x-4">
-          <button className="rounded-xl bg-secondary p-1.5 hover:bg-tertiary" onClick={() => {
+      <div className='flex w-full max-w-[800px] flex-col justify-center gap-y-4'>
+        <div className='flex items-center gap-x-4'>
+          <button className='rounded-xl bg-secondary p-1.5 hover:bg-tertiary' onClick={() => {
             setBotId('');
             setBotShortDescription('');
             setBotDescription('');
@@ -124,56 +124,56 @@ export default function NewBot() {
             <MdChevronLeft size={24}/>
           </button>
 
-          <h1 className="flex flex-wrap items-center gap-x-1 text-lg font-bold sm:text-3xl">
+          <h1 className='flex flex-wrap items-center gap-x-1 text-lg font-bold sm:text-3xl'>
             {t('accountPage.tabs.myBots.sections.addBot.title')}
           </h1>
         </div>
 
-        <p className="max-w-[800px] text-sm text-tertiary sm:text-base">
+        <p className='max-w-[800px] text-sm text-tertiary sm:text-base'>
           {t('accountPage.tabs.myBots.sections.addBot.subtitle')}
         </p>
 
-        <div className="mt-12 flex w-full items-center justify-center">
-          <div className="flex w-full max-w-[800px] flex-col gap-y-1">
-            <h2 className="text-lg font-semibold">
+        <div className='mt-12 flex w-full items-center justify-center'>
+          <div className='flex w-full max-w-[800px] flex-col gap-y-1'>
+            <h2 className='text-lg font-semibold'>
               {t('accountPage.tabs.myBots.sections.addBot.fields.botId.label')}
             </h2>
 
-            <p className="text-sm text-tertiary sm:text-base">
+            <p className='text-sm text-tertiary sm:text-base'>
               {t('accountPage.tabs.myBots.sections.addBot.fields.botId.description')}
             </p>
 
             <input
-              className="mt-4 block w-full rounded-lg border-2 border-transparent bg-secondary p-2 text-sm text-placeholder outline-none focus-visible:border-purple-500 focus-visible:text-primary"
+              className='mt-4 block w-full rounded-lg border-2 border-transparent bg-secondary p-2 text-sm text-placeholder outline-none focus-visible:border-purple-500 focus-visible:text-primary'
               onChange={event => setBotId(event.target.value)}
               value={botId}
             />
 
-            <h2 className="mt-8 text-lg font-semibold">
+            <h2 className='mt-8 text-lg font-semibold'>
               {t('accountPage.tabs.myBots.sections.addBot.fields.shortDescription.label')}
             </h2>
 
-            <p className="text-sm text-tertiary sm:text-base">
+            <p className='text-sm text-tertiary sm:text-base'>
               {t('accountPage.tabs.myBots.sections.addBot.fields.shortDescription.description')}
             </p>
 
             <input
-              className="mt-4 block w-full rounded-lg border-2 border-transparent bg-secondary p-2 text-sm text-placeholder outline-none focus-visible:border-purple-500 focus-visible:text-primary"
+              className='mt-4 block w-full rounded-lg border-2 border-transparent bg-secondary p-2 text-sm text-placeholder outline-none focus-visible:border-purple-500 focus-visible:text-primary'
               maxLength={config.botShortDescriptionMaxLength}
               value={botShortDescription}
               onChange={event => setBotShortDescription(event.target.value)}
             />
 
-            <h2 className="mt-8 text-lg font-semibold">
+            <h2 className='mt-8 text-lg font-semibold'>
               {t('accountPage.tabs.myBots.sections.addBot.fields.longDescription.label')}
             </h2>
 
-            <p className="text-sm text-tertiary sm:text-base">
+            <p className='text-sm text-tertiary sm:text-base'>
               {t('accountPage.tabs.myBots.sections.addBot.fields.longDescription.description')}
             </p>
 
             <button
-              className="mt-4 flex size-max items-center gap-x-1.5 rounded-lg bg-black px-3 py-1.5 text-sm font-semibold text-white hover:bg-black/70 disabled:pointer-events-none disabled:opacity-70 dark:bg-white dark:text-black dark:hover:bg-white/70"
+              className='mt-4 flex size-max items-center gap-x-1.5 rounded-lg bg-black px-3 py-1.5 text-sm font-semibold text-white hover:bg-black/70 disabled:pointer-events-none disabled:opacity-70 dark:bg-white dark:text-black dark:hover:bg-white/70'
               onClick={() => setMarkdownPreviewing(!markdownPreviewing)}
             >
               {markdownPreviewing ? (
@@ -190,41 +190,41 @@ export default function NewBot() {
             </button>
 
             {markdownPreviewing ? (
-              <Markdown className="mt-4 h-[250px] overflow-y-auto rounded-lg border-2 border-transparent">
+              <Markdown className='mt-4 h-[250px] overflow-y-auto rounded-lg border-2 border-transparent'>
                 {botDescription}
               </Markdown>
             ) : (
               <textarea
-                className="mt-4 block h-[250px] w-full resize-none overflow-y-auto rounded-lg border-2 border-transparent bg-secondary p-2 text-placeholder outline-none focus-visible:border-purple-500 focus-visible:text-primary"
+                className='mt-4 block h-[250px] w-full resize-none overflow-y-auto rounded-lg border-2 border-transparent bg-secondary p-2 text-placeholder outline-none focus-visible:border-purple-500 focus-visible:text-primary'
                 value={botDescription}
                 onChange={event => setBotDescription(event.target.value)}
                 maxLength={config.botDescriptionMaxLength}
               />
             )}
 
-            <h2 className="mt-8 text-lg font-semibold">
+            <h2 className='mt-8 text-lg font-semibold'>
               {t('accountPage.tabs.myBots.sections.addBot.fields.inviteUrl.label')}
             </h2>
 
-            <p className="text-sm text-tertiary sm:text-base">
+            <p className='text-sm text-tertiary sm:text-base'>
               {t('accountPage.tabs.myBots.sections.addBot.fields.inviteUrl.description')}
             </p>
 
             <input
-              className="mt-4 block w-full rounded-lg border-2 border-transparent bg-secondary p-2 text-sm text-placeholder outline-none focus-visible:border-purple-500 focus-visible:text-primary"
+              className='mt-4 block w-full rounded-lg border-2 border-transparent bg-secondary p-2 text-sm text-placeholder outline-none focus-visible:border-purple-500 focus-visible:text-primary'
               value={botInviteUrl}
               onChange={event => setBotInviteUrl(event.target.value)}
             />
 
-            <h2 className="mt-8 text-lg font-semibold">
+            <h2 className='mt-8 text-lg font-semibold'>
               {t('accountPage.tabs.myBots.sections.addBot.fields.categories.label')}
             </h2>
 
-            <p className="text-sm text-tertiary">
+            <p className='text-sm text-tertiary'>
               {t('accountPage.tabs.myBots.sections.addBot.fields.categories.description')}
             </p>
 
-            <div className="mt-4 flex flex-wrap gap-2">
+            <div className='mt-4 flex flex-wrap gap-2'>
               {config.botCategories
                 .filter(category => category !== 'All')
                 .map(category => (
@@ -245,7 +245,7 @@ export default function NewBot() {
                 ))}
             </div>
 
-            <h2 className="mt-8 text-lg font-semibold">
+            <h2 className='mt-8 text-lg font-semibold'>
               {t('accountPage.tabs.myBots.sections.addBot.fields.contentPolicy.label')}
             </h2>
 
@@ -255,13 +255,13 @@ export default function NewBot() {
               })}
             </p>
 
-            <h2 className="mt-8 text-lg font-semibold">
+            <h2 className='mt-8 text-lg font-semibold'>
               {t('accountPage.tabs.myBots.sections.addBot.fields.areYouReady.label')}
             </h2>
 
-            <div className="mt-2 flex w-full flex-col gap-2 sm:flex-row">
+            <div className='mt-2 flex w-full flex-col gap-2 sm:flex-row'>
               <button
-                className="flex w-full items-center justify-center gap-x-1.5 rounded-lg bg-black px-3 py-1.5 text-sm font-semibold text-white hover:bg-black/70 disabled:pointer-events-none disabled:opacity-70 dark:bg-white dark:text-black dark:hover:bg-white/70"
+                className='flex w-full items-center justify-center gap-x-1.5 rounded-lg bg-black px-3 py-1.5 text-sm font-semibold text-white hover:bg-black/70 disabled:pointer-events-none disabled:opacity-70 dark:bg-white dark:text-black dark:hover:bg-white/70'
                 disabled={
                   loading ||
                   !botId ||
@@ -272,11 +272,11 @@ export default function NewBot() {
                 }
                 onClick={addBot}
               >
-                {loading && <TbLoader className="animate-spin"/>}
+                {loading && <TbLoader className='animate-spin'/>}
                 {t('buttons.addBot')}
               </button>
 
-              <button className="flex w-full items-center justify-center rounded-lg py-2 text-sm font-medium hover:bg-quaternary disabled:pointer-events-none disabled:opacity-70"
+              <button className='flex w-full items-center justify-center rounded-lg py-2 text-sm font-medium hover:bg-quaternary disabled:pointer-events-none disabled:opacity-70'
                 onClick={() => {
                   setBotId('');
                   setBotShortDescription('');
diff --git a/client/app/(account)/account/components/Content/Tabs/MyLinks/CreateLinkModal.jsx b/client/app/(account)/account/components/Content/Tabs/MyLinks/CreateLinkModal.jsx
index 10b54ee5..47b22657 100644
--- a/client/app/(account)/account/components/Content/Tabs/MyLinks/CreateLinkModal.jsx
+++ b/client/app/(account)/account/components/Content/Tabs/MyLinks/CreateLinkModal.jsx
@@ -24,9 +24,9 @@ export default function CreateLinkModal() {
         </p>
 
         <input
-          type="text"
+          type='text'
           placeholder={t('accountPage.tabs.myLinks.createLinkModal.inputs.name.placeholder')}
-          className="mt-3 w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background"
+          className='mt-3 w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background'
           value={name}
           onChange={event => setName(event.target.value)}
         />
@@ -42,9 +42,9 @@ export default function CreateLinkModal() {
         </p>
 
         <input
-          type="text"
+          type='text'
           placeholder={t('accountPage.tabs.myLinks.createLinkModal.inputs.destinationUrl.placeholder')}
-          className="mt-3 w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background"
+          className='mt-3 w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background'
           value={destinationURL}
           onChange={event => setDestinationURL(event.target.value)}
         />
diff --git a/client/app/(account)/account/components/Content/Tabs/MyServers/NewServer/index.jsx b/client/app/(account)/account/components/Content/Tabs/MyServers/NewServer/index.jsx
index f9e5b135..69e50ffb 100644
--- a/client/app/(account)/account/components/Content/Tabs/MyServers/NewServer/index.jsx
+++ b/client/app/(account)/account/components/Content/Tabs/MyServers/NewServer/index.jsx
@@ -74,9 +74,9 @@ export default function NewServer() {
         <Lottie options={{ loop: false, autoplay: false, animationData: confetti }} isStopped={!renderConfetti} height='100%' width='100%' />
       </div>
 
-      <div className="flex w-full max-w-[800px] flex-col justify-center gap-y-4">
+      <div className='flex w-full max-w-[800px] flex-col justify-center gap-y-4'>
         <div className='flex items-center gap-x-4'>
-          <button className="rounded-xl bg-secondary p-1.5 hover:bg-quaternary" onClick={() => {
+          <button className='rounded-xl bg-secondary p-1.5 hover:bg-quaternary' onClick={() => {
             setCurrentlyAddingServer(null);
             setServerDescription('');
             setServerInviteLink('');
@@ -86,7 +86,7 @@ export default function NewServer() {
             <MdChevronLeft size={24} />
           </button>
 
-          <h1 className="flex flex-wrap items-center gap-x-1 text-lg font-bold sm:text-3xl">
+          <h1 className='flex flex-wrap items-center gap-x-1 text-lg font-bold sm:text-3xl'>
             {t('accountPage.tabs.myServers.sections.newServer.title', {
               serverName: <span className='truncate'>{currentlyAddingServer.name}</span>,
               serverIcon: (
diff --git a/client/app/(account)/account/components/Content/Tabs/MySounds/NewSound/index.jsx b/client/app/(account)/account/components/Content/Tabs/MySounds/NewSound/index.jsx
index 689ac81d..38085695 100644
--- a/client/app/(account)/account/components/Content/Tabs/MySounds/NewSound/index.jsx
+++ b/client/app/(account)/account/components/Content/Tabs/MySounds/NewSound/index.jsx
@@ -71,13 +71,13 @@ export default function NewSound() {
 
   return (
     <>
-      <div className="pointer-events-none fixed left-0 top-0 z-10 h-svh w-full">
-        <Lottie options={{ loop: false, autoplay: false, animationData: confetti }} isStopped={!renderConfetti} height="100%" width="100%"/>
+      <div className='pointer-events-none fixed left-0 top-0 z-10 h-svh w-full'>
+        <Lottie options={{ loop: false, autoplay: false, animationData: confetti }} isStopped={!renderConfetti} height='100%' width='100%'/>
       </div>
 
-      <div className="flex w-full max-w-[800px] flex-col justify-center gap-y-4">
-        <div className="flex items-center gap-x-4">
-          <button className="rounded-xl bg-secondary p-1.5 hover:bg-tertiary" onClick={() => {
+      <div className='flex w-full max-w-[800px] flex-col justify-center gap-y-4'>
+        <div className='flex items-center gap-x-4'>
+          <button className='rounded-xl bg-secondary p-1.5 hover:bg-tertiary' onClick={() => {
             setSoundName('');
             setSoundCategories([]);
             setFile(null);
@@ -86,22 +86,22 @@ export default function NewSound() {
             <MdChevronLeft size={24}/>
           </button>
 
-          <h1 className="flex flex-wrap items-center gap-x-1 text-lg font-bold sm:text-3xl">
+          <h1 className='flex flex-wrap items-center gap-x-1 text-lg font-bold sm:text-3xl'>
             {t('accountPage.tabs.mySounds.sections.addSound.title')}
           </h1>
         </div>
 
-        <p className="max-w-[800px] text-sm text-tertiary sm:text-base">
+        <p className='max-w-[800px] text-sm text-tertiary sm:text-base'>
           {t('accountPage.tabs.mySounds.sections.addSound.subtitle')}
         </p>
 
-        <div className="mt-12 flex w-full items-center justify-center">
-          <div className="flex w-full max-w-[800px] flex-col gap-y-1">
-            <h2 className="text-lg font-semibold">
+        <div className='mt-12 flex w-full items-center justify-center'>
+          <div className='flex w-full max-w-[800px] flex-col gap-y-1'>
+            <h2 className='text-lg font-semibold'>
               File
             </h2>
 
-            <p className="text-sm text-tertiary sm:text-base">
+            <p className='text-sm text-tertiary sm:text-base'>
               Upload your sound file here. Only mp3 files are allowed.
             </p>
 
@@ -110,7 +110,7 @@ export default function NewSound() {
                 'w-full bg-quaternary cursor-pointer group hover:bg-purple-500/10 hover:border-purple-500 transition-all gap-y-2 flex-col border-2 border-primary h-[150px] mt-4 rounded-xl flex items-center justify-center',
                 (file || dragging) && 'border-purple-500 bg-purple-500/10'
               )}
-              htmlFor="file"
+              htmlFor='file'
               draggable={true}
               onDragEnter={() => setDragging(true)}
               onDragLeave={() => setDragging(false)}
@@ -141,10 +141,10 @@ export default function NewSound() {
               }}
             >
               <input
-                className="hidden"
-                id="file"
-                type="file"
-                accept=".mp3"
+                className='hidden'
+                id='file'
+                type='file'
+                accept='.mp3'
                 onChange={event => {
                   const file = event.target.files[0];
                   if (file) {
@@ -168,7 +168,7 @@ export default function NewSound() {
                 }}
               />
 
-              <p className="flex items-center gap-x-2 text-sm font-medium text-tertiary transition-all group-hover:text-white">
+              <p className='flex items-center gap-x-2 text-sm font-medium text-tertiary transition-all group-hover:text-white'>
                 {file ? (
                   <>
                     <IoMdCheckmarkCircle/>
@@ -180,30 +180,30 @@ export default function NewSound() {
               </p>
             </label>
 
-            <h2 className="mt-8 text-lg font-semibold">
+            <h2 className='mt-8 text-lg font-semibold'>
               {t('accountPage.tabs.mySounds.sections.addSound.fields.name.label')}
             </h2>
 
-            <p className="text-sm text-tertiary sm:text-base">
+            <p className='text-sm text-tertiary sm:text-base'>
               {t('accountPage.tabs.mySounds.sections.addSound.fields.name.description')}
             </p>
 
             <input
-              className="mt-4 block w-full rounded-lg border-2 border-transparent bg-secondary p-2 text-sm text-placeholder outline-none focus-visible:border-purple-500 focus-visible:text-primary"
+              className='mt-4 block w-full rounded-lg border-2 border-transparent bg-secondary p-2 text-sm text-placeholder outline-none focus-visible:border-purple-500 focus-visible:text-primary'
               onChange={event => setSoundName(event.target.value)}
               value={soundName}
               maxLength={config.soundNameMaxLength}
             />
 
-            <h2 className="mt-8 text-lg font-semibold">
+            <h2 className='mt-8 text-lg font-semibold'>
               {t('accountPage.tabs.mySounds.sections.addSound.fields.categories.label')}
             </h2>
 
-            <p className="text-sm text-tertiary">
+            <p className='text-sm text-tertiary'>
               {t('accountPage.tabs.mySounds.sections.addSound.fields.categories.description')}
             </p>
 
-            <div className="mt-4 flex flex-wrap gap-2">
+            <div className='mt-4 flex flex-wrap gap-2'>
               {config.soundCategories
                 .filter(category => category !== 'All')
                 .map(category => (
@@ -224,23 +224,23 @@ export default function NewSound() {
                 ))}
             </div>
 
-            <h2 className="mt-8 text-lg font-semibold">
+            <h2 className='mt-8 text-lg font-semibold'>
               {t('accountPage.tabs.mySounds.sections.addSound.fields.contentPolicy.label')}
             </h2>
 
-            <p className="flex flex-col gap-y-1 text-sm text-tertiary sm:text-base">
+            <p className='flex flex-col gap-y-1 text-sm text-tertiary sm:text-base'>
               {t('accountPage.tabs.mySounds.sections.addSound.fields.contentPolicy.description', {
-                note: <span className="mt-2 text-xs text-tertiary">{t('accountPage.tabs.mySounds.sections.addSound.fields.contentPolicy.note')}</span>
+                note: <span className='mt-2 text-xs text-tertiary'>{t('accountPage.tabs.mySounds.sections.addSound.fields.contentPolicy.note')}</span>
               })}
             </p>
 
-            <h2 className="mt-8 text-lg font-semibold">
+            <h2 className='mt-8 text-lg font-semibold'>
               {t('accountPage.tabs.mySounds.sections.addSound.fields.areYouReady.label')}
             </h2>
 
-            <div className="mt-2 flex w-full flex-col gap-2 sm:flex-row">
+            <div className='mt-2 flex w-full flex-col gap-2 sm:flex-row'>
               <button
-                className="flex w-full items-center justify-center gap-x-1.5 rounded-lg bg-black px-3 py-1.5 text-sm font-semibold text-white hover:bg-black/70 disabled:pointer-events-none disabled:opacity-70 dark:bg-white dark:text-black dark:hover:bg-white/70"
+                className='flex w-full items-center justify-center gap-x-1.5 rounded-lg bg-black px-3 py-1.5 text-sm font-semibold text-white hover:bg-black/70 disabled:pointer-events-none disabled:opacity-70 dark:bg-white dark:text-black dark:hover:bg-white/70'
                 disabled={
                   loading ||
                   soundName.trim().length <= 0 ||
@@ -249,11 +249,11 @@ export default function NewSound() {
                 }
                 onClick={addSound}
               >
-                {loading && <TbLoader className="animate-spin"/>}
+                {loading && <TbLoader className='animate-spin'/>}
                 {t('buttons.addSound')}
               </button>
 
-              <button className="flex w-full items-center justify-center rounded-lg py-2 text-sm font-medium hover:bg-quaternary disabled:pointer-events-none disabled:opacity-70"
+              <button className='flex w-full items-center justify-center rounded-lg py-2 text-sm font-medium hover:bg-quaternary disabled:pointer-events-none disabled:opacity-70'
                 onClick={() => {
                   setSoundName('');
                   setSoundCategories([]);
diff --git a/client/app/(account)/account/components/Content/Tabs/MyThemes/NewTheme/index.jsx b/client/app/(account)/account/components/Content/Tabs/MyThemes/NewTheme/index.jsx
index 920fe6fa..d6ef0932 100644
--- a/client/app/(account)/account/components/Content/Tabs/MyThemes/NewTheme/index.jsx
+++ b/client/app/(account)/account/components/Content/Tabs/MyThemes/NewTheme/index.jsx
@@ -63,14 +63,14 @@ export default function NewTheme() {
 
   return (
     <>
-      <div className="pointer-events-none fixed left-0 top-0 z-10 h-svh w-full">
-        <Lottie options={{ loop: false, autoplay: false, animationData: confetti }} isStopped={!renderConfetti} height="100%" width="100%"/>
+      <div className='pointer-events-none fixed left-0 top-0 z-10 h-svh w-full'>
+        <Lottie options={{ loop: false, autoplay: false, animationData: confetti }} isStopped={!renderConfetti} height='100%' width='100%'/>
       </div>
 
-      <div className="flex w-full max-w-[800px] flex-col justify-center gap-y-4">
-        <div className="flex items-center gap-x-4">
+      <div className='flex w-full max-w-[800px] flex-col justify-center gap-y-4'>
+        <div className='flex items-center gap-x-4'>
           <button
-            className="rounded-xl bg-secondary p-1.5 hover:bg-tertiary"
+            className='rounded-xl bg-secondary p-1.5 hover:bg-tertiary'
             onClick={() => {
               setThemeCategories([]);
               setCurrentlyAddingTheme(false);
@@ -79,29 +79,29 @@ export default function NewTheme() {
             <MdChevronLeft size={24}/>
           </button>
 
-          <h1 className="flex flex-wrap items-center gap-x-1 text-lg font-bold sm:text-3xl">
+          <h1 className='flex flex-wrap items-center gap-x-1 text-lg font-bold sm:text-3xl'>
             {t('accountPage.tabs.myThemes.sections.addTheme.title')}
           </h1>
         </div>
 
-        <p className="max-w-[800px] text-sm text-tertiary sm:text-base">
+        <p className='max-w-[800px] text-sm text-tertiary sm:text-base'>
           {t('accountPage.tabs.myThemes.sections.addTheme.subtitle')}
         </p>
 
-        <div className="mt-12 flex w-full items-center justify-center">
-          <div className="flex w-full max-w-[800px] flex-col gap-y-1">
+        <div className='mt-12 flex w-full items-center justify-center'>
+          <div className='flex w-full max-w-[800px] flex-col gap-y-1'>
 
-            <h2 className="text-lg font-semibold">
+            <h2 className='text-lg font-semibold'>
               {t('accountPage.tabs.myThemes.sections.addTheme.fields.colors.label')}
             </h2>
 
-            <p className="text-sm text-tertiary">
+            <p className='text-sm text-tertiary'>
               {t('accountPage.tabs.myThemes.sections.addTheme.fields.colors.description')}
             </p>
 
             <div className='flex items-center gap-x-16 gap-y-4'>
               <div className='flex items-center gap-x-4'>
-                <div className="mt-4 flex flex-col gap-y-2">
+                <div className='mt-4 flex flex-col gap-y-2'>
                   <h2 className='flex items-center gap-x-2 text-sm font-medium text-secondary'>
                     {t('accountPage.tabs.myThemes.sections.addTheme.fields.colors.primaryLabel')}
 
@@ -124,7 +124,7 @@ export default function NewTheme() {
                   </div>
                 </div>
 
-                <div className="mt-4 flex flex-col gap-y-2">
+                <div className='mt-4 flex flex-col gap-y-2'>
                   <h2 className='flex items-center gap-x-2 text-sm font-medium text-secondary'>
                     {t('accountPage.tabs.myThemes.sections.addTheme.fields.colors.secondaryLabel')}
 
@@ -156,15 +156,15 @@ export default function NewTheme() {
               />
             </div>
 
-            <h2 className="mt-8 text-lg font-semibold">
+            <h2 className='mt-8 text-lg font-semibold'>
               {t('accountPage.tabs.myThemes.sections.addTheme.fields.categories.label')}
             </h2>
 
-            <p className="text-sm text-tertiary">
+            <p className='text-sm text-tertiary'>
               {t('accountPage.tabs.myThemes.sections.addTheme.fields.categories.description')}
             </p>
 
-            <div className="mt-4 flex flex-wrap gap-2">
+            <div className='mt-4 flex flex-wrap gap-2'>
               {config.themeCategories
                 .map(category => (
                   <button
@@ -184,35 +184,35 @@ export default function NewTheme() {
                 ))}
             </div>
 
-            <h2 className="mt-8 text-lg font-semibold">
+            <h2 className='mt-8 text-lg font-semibold'>
               {t('accountPage.tabs.myThemes.sections.addTheme.fields.contentPolicy.label')}
             </h2>
 
-            <p className="flex flex-col gap-y-1 text-sm text-tertiary sm:text-base">
+            <p className='flex flex-col gap-y-1 text-sm text-tertiary sm:text-base'>
               {t('accountPage.tabs.myThemes.sections.addTheme.fields.contentPolicy.description', {
-                note: <span className="mt-2 text-xs text-tertiary">{t('accountPage.tabs.myThemes.sections.addTheme.fields.contentPolicy.note')}</span>
+                note: <span className='mt-2 text-xs text-tertiary'>{t('accountPage.tabs.myThemes.sections.addTheme.fields.contentPolicy.note')}</span>
               })}
             </p>
 
-            <h2 className="mt-8 text-lg font-semibold">
+            <h2 className='mt-8 text-lg font-semibold'>
               {t('accountPage.tabs.myThemes.sections.addTheme.fields.areYouReady.label')}
             </h2>
 
-            <div className="mt-2 flex w-full flex-col gap-2 sm:flex-row">
+            <div className='mt-2 flex w-full flex-col gap-2 sm:flex-row'>
               <button
-                className="flex w-full items-center justify-center gap-x-1.5 rounded-lg bg-black px-3 py-1.5 text-sm font-semibold text-white hover:bg-black/70 disabled:pointer-events-none disabled:opacity-70 dark:bg-white dark:text-black dark:hover:bg-white/70"
+                className='flex w-full items-center justify-center gap-x-1.5 rounded-lg bg-black px-3 py-1.5 text-sm font-semibold text-white hover:bg-black/70 disabled:pointer-events-none disabled:opacity-70 dark:bg-white dark:text-black dark:hover:bg-white/70'
                 disabled={
                   loading ||
                   themeCategories.length < 1
                 }
                 onClick={addTheme}
               >
-                {loading && <TbLoader className="animate-spin"/>}
+                {loading && <TbLoader className='animate-spin'/>}
                 {t('buttons.addTheme')}
               </button>
 
               <button
-                className="flex w-full items-center justify-center rounded-lg py-2 text-sm font-medium hover:bg-quaternary disabled:pointer-events-none disabled:opacity-70"
+                className='flex w-full items-center justify-center rounded-lg py-2 text-sm font-medium hover:bg-quaternary disabled:pointer-events-none disabled:opacity-70'
                 onClick={() => {
                   setThemeCategories([]);
                   setCurrentlyAddingTheme(false);
diff --git a/client/app/(account)/account/components/Content/index.jsx b/client/app/(account)/account/components/Content/index.jsx
index 549d063f..e27b8895 100644
--- a/client/app/(account)/account/components/Content/index.jsx
+++ b/client/app/(account)/account/components/Content/index.jsx
@@ -280,7 +280,7 @@ export default function Content() {
           <AnimatePresence>
             {loading && (
               <motion.div
-                className="absolute left-0 top-0 z-10 flex size-full flex-col items-center justify-center bg-background"
+                className='absolute left-0 top-0 z-10 flex size-full flex-col items-center justify-center bg-background'
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
@@ -288,7 +288,7 @@ export default function Content() {
                 <Image
                   className='size-[64px]'
                   src={theme === 'dark' ? '/symbol_white.png' : '/symbol_black.png'}
-                  alt="discord.place Logo"
+                  alt='discord.place Logo'
                   width={256}
                   height={256}
                 />
diff --git a/client/app/(blogs)/blogs/Hero/Card.jsx b/client/app/(blogs)/blogs/Hero/Card.jsx
index d59b865f..451cc904 100644
--- a/client/app/(blogs)/blogs/Hero/Card.jsx
+++ b/client/app/(blogs)/blogs/Hero/Card.jsx
@@ -20,7 +20,7 @@ export default function BlogCard({ data, loading }) {
           className='h-[200px] w-full rounded-xl object-cover'
         />
 
-        <div className='absolute top-0 left-0 size-full rounded-xl bg-black/50' />
+        <div className='absolute left-0 top-0 size-full rounded-xl bg-black/50' />
 
         <div className='absolute left-4 top-4'>
           {data.tags.map(tag => (
@@ -34,11 +34,11 @@ export default function BlogCard({ data, loading }) {
         </div>
       </div>
 
-      <h2 className='font-medium line-clamp-1 whitespace-nowrap text-pretty text-primary'>
+      <h2 className='line-clamp-1 whitespace-nowrap text-pretty font-medium text-primary'>
         {data.name}
       </h2>
 
-      <p className='text-sm whitespace-pre-wrap line-clamp-3 text-tertiary'>
+      <p className='line-clamp-3 whitespace-pre-wrap text-sm text-tertiary'>
         {data.description}
       </p>
     </Link>
diff --git a/client/app/(blogs)/blogs/Hero/index.jsx b/client/app/(blogs)/blogs/Hero/index.jsx
index d6ada0c9..7fc2fee8 100644
--- a/client/app/(blogs)/blogs/Hero/index.jsx
+++ b/client/app/(blogs)/blogs/Hero/index.jsx
@@ -36,7 +36,7 @@ export default function Hero() {
   }, []);
 
   return (
-    <div className="relative z-0 flex flex-col items-center px-6 pt-56 mobile:px-12 lg:px-0">
+    <div className='relative z-0 flex flex-col items-center px-6 pt-56 mobile:px-12 lg:px-0'>
       <Square column='10' row='10' transparentEffectDirection='bottomToTop' blockColor='rgba(var(--bg-secondary))' />
 
       <div className='absolute top-[-15%] h-[300px] w-full max-w-[800px] rounded-[5rem] bg-[#ffffff10] blur-[15rem]' />
@@ -62,7 +62,7 @@ export default function Hero() {
           />
         </motion.h1>
 
-        <motion.span className="mt-8 max-w-[700px] text-center text-tertiary sm:text-left sm:text-lg" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
+        <motion.span className='mt-8 max-w-[700px] text-center text-tertiary sm:text-left sm:text-lg' initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
           {t('blogsPage.subtitle')}
         </motion.span>
 
diff --git a/client/app/(bots)/bots/[id]/components/Tabs/Reviews.jsx b/client/app/(bots)/bots/[id]/components/Tabs/Reviews.jsx
index 774360e5..fe60757e 100644
--- a/client/app/(bots)/bots/[id]/components/Tabs/Reviews.jsx
+++ b/client/app/(bots)/bots/[id]/components/Tabs/Reviews.jsx
@@ -69,18 +69,18 @@ export default function Reviews({ bot }) {
   }
 
   return (
-    <div className="flex flex-col px-8 lg:w-[70%] lg:px-0">
-      <h1 className="text-xl font-semibold">
+    <div className='flex flex-col px-8 lg:w-[70%] lg:px-0'>
+      <h1 className='text-xl font-semibold'>
         {t('botPage.tabs.reviews.title')}
       </h1>
 
-      <div className="mt-8 flex w-full flex-col gap-y-4 sm:flex-row">
-        <div className="flex w-[35%] flex-col gap-y-4">
-          <h2 className="text-5xl font-bold sm:text-7xl">
+      <div className='mt-8 flex w-full flex-col gap-y-4 sm:flex-row'>
+        <div className='flex w-[35%] flex-col gap-y-4'>
+          <h2 className='text-5xl font-bold sm:text-7xl'>
             {((bot.reviews.reduce((acc, review) => acc + review.rating, 0) / bot.reviews.length) || 0).toFixed(1)}
           </h2>
 
-          <div className="flex gap-x-0.5 text-lg text-yellow-500 sm:gap-x-2">
+          <div className='flex gap-x-0.5 text-lg text-yellow-500 sm:gap-x-2'>
             {[...Array(5)].map((_, index) => {
               const rating = bot.reviews.reduce((acc, review) => acc + review.rating, 0) / bot.reviews.length;
               if (rating >= index + 1) return <TiStarFullOutline key={index} />;
@@ -95,7 +95,7 @@ export default function Reviews({ bot }) {
           </span>
         </div>
 
-        <div className="flex w-full flex-1">
+        <div className='flex w-full flex-1'>
           <div className='flex w-full flex-col gap-y-2'>
             {new Array(5).fill(null).map((_, index) => (
               <div key={index} className='flex w-full items-center gap-x-4'>
@@ -127,7 +127,7 @@ export default function Reviews({ bot }) {
         </div>
       )}
 
-      <div className="mt-8 flex w-full flex-col gap-y-8 sm:flex-row sm:gap-y-0">
+      <div className='mt-8 flex w-full flex-col gap-y-8 sm:flex-row sm:gap-y-0'>
         {bot.has_reviewed ? (
           <span className='text-sm font-medium text-tertiary'>
             {t('botPage.tabs.reviews.reviewSubmitted.alreadyReviewed')}
@@ -139,7 +139,7 @@ export default function Reviews({ bot }) {
         ) : (
           <>
             <div className='flex w-[35%] flex-col gap-y-3'>
-              <div className="flex gap-x-4">
+              <div className='flex gap-x-4'>
                 {loggedIn ? (
 
                   <UserAvatar
@@ -213,7 +213,7 @@ export default function Reviews({ bot }) {
               )}
             </div>
 
-            <div className="flex w-full flex-1 flex-col gap-y-1 whitespace-pre-wrap font-medium text-secondary">
+            <div className='flex w-full flex-1 flex-col gap-y-1 whitespace-pre-wrap font-medium text-secondary'>
               <h3 className='font-medium text-primary'>
                 {t('botPage.tabs.reviews.input.label')}
               </h3>
@@ -261,8 +261,8 @@ export default function Reviews({ bot }) {
       </div>
 
       {reviews.map(review => (
-        <div className="mt-8 flex w-full flex-col gap-y-4 sm:flex-row" key={review._id}>
-          <div className="flex w-full gap-x-4 sm:w-[35%]">
+        <div className='mt-8 flex w-full flex-col gap-y-4 sm:flex-row' key={review._id}>
+          <div className='flex w-full gap-x-4 sm:w-[35%]'>
             <Link
               href={`/profile/u/${review.user.id}`}
               className='transition-opacity hover:opacity-70'
@@ -307,7 +307,7 @@ export default function Reviews({ bot }) {
             }}
             identifier={`bot-${bot.id}-review-${review._id}`}
           >
-            <div className="flex w-full max-w-[440px] flex-1 flex-col justify-between gap-y-2 whitespace-pre-wrap break-words font-medium text-secondary sm:gap-y-0">
+            <div className='flex w-full max-w-[440px] flex-1 flex-col justify-between gap-y-2 whitespace-pre-wrap break-words font-medium text-secondary sm:gap-y-0'>
               <span className='text-xs font-medium text-tertiary'>
                 {new Date(review.createdAt).toLocaleDateString(language, { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' })}
               </span>
diff --git a/client/app/(bots)/bots/[id]/components/sections/RightSide/Actions.jsx b/client/app/(bots)/bots/[id]/components/sections/RightSide/Actions.jsx
index 63b123c9..8d86aa9c 100644
--- a/client/app/(bots)/bots/[id]/components/sections/RightSide/Actions.jsx
+++ b/client/app/(bots)/bots/[id]/components/sections/RightSide/Actions.jsx
@@ -132,7 +132,7 @@ export default function Actions({ bot }) {
       >
         {loggedIn && (
           <Script
-            src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+            src='https://challenges.cloudflare.com/turnstile/v0/api.js'
             async={true}
             defer={true}
           />
@@ -142,7 +142,7 @@ export default function Actions({ bot }) {
           {showCaptcha && (
             <motion.div
               /* eslint-disable-next-line tailwindcss/no-custom-classname */
-              className="cf-turnstile [&>iframe]:max-w-full"
+              className='cf-turnstile [&>iframe]:max-w-full'
               data-sitekey={process.env.NEXT_PUBLIC_CF_SITE_KEY}
               ref={captchaRef}
               initial={{ opacity: 0 }}
diff --git a/client/app/(bots)/bots/[id]/manage/components/ExtraOwners/index.jsx b/client/app/(bots)/bots/[id]/manage/components/ExtraOwners/index.jsx
index 70c5d395..2f72df45 100644
--- a/client/app/(bots)/bots/[id]/manage/components/ExtraOwners/index.jsx
+++ b/client/app/(bots)/bots/[id]/manage/components/ExtraOwners/index.jsx
@@ -95,9 +95,9 @@ export default function ExtraOwners({ botId, canEditExtraOwners }) {
                 description: t('botManagePage.extraOwners.addExtraOwnerModal.description'),
                 content: (
                   <input
-                    type="text"
+                    type='text'
                     placeholder={botId}
-                    className="w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background"
+                    className='w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background'
                     ref={newExtraOwnerIdInputRef}
                   />
                 ),
diff --git a/client/app/(bots)/bots/[id]/manage/components/Input/index.jsx b/client/app/(bots)/bots/[id]/manage/components/Input/index.jsx
index ca9da5e1..cbf80db3 100644
--- a/client/app/(bots)/bots/[id]/manage/components/Input/index.jsx
+++ b/client/app/(bots)/bots/[id]/manage/components/Input/index.jsx
@@ -7,7 +7,7 @@ export default function Input({ label, customLabelPeer, description, type, Custo
 
   return (
     <div className='flex flex-1 flex-col gap-y-2'>
-      <div className="flex size-full items-center gap-x-2">
+      <div className='flex size-full items-center gap-x-2'>
         <label
           className='font-medium text-secondary'
         >
diff --git a/client/app/(bots)/bots/[id]/manage/content.js b/client/app/(bots)/bots/[id]/manage/content.js
index f11aea97..1fa325bd 100644
--- a/client/app/(bots)/bots/[id]/manage/content.js
+++ b/client/app/(bots)/bots/[id]/manage/content.js
@@ -172,11 +172,11 @@ export default function Content({ bot }) {
   }, [changesMade, openedModals]);
 
   return (
-    <div className="mb-24 flex size-full items-center justify-center px-4 sm:px-12">
-      <div className="mt-48 flex size-full max-w-[1000px] flex-col items-start gap-y-8">
-        <div className="flex w-full flex-col sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex flex-col gap-y-1">
-            <h2 className="flex items-center gap-x-2 text-3xl font-bold">
+    <div className='mb-24 flex size-full items-center justify-center px-4 sm:px-12'>
+      <div className='mt-48 flex size-full max-w-[1000px] flex-col items-start gap-y-8'>
+        <div className='flex w-full flex-col sm:flex-row sm:items-center sm:justify-between'>
+          <div className='flex flex-col gap-y-1'>
+            <h2 className='flex items-center gap-x-2 text-3xl font-bold'>
               {t('botManagePage.title')}
 
               <div className='select-none rounded-lg bg-quaternary p-2 text-xs font-bold uppercase'>
@@ -184,7 +184,7 @@ export default function Content({ bot }) {
               </div>
             </h2>
 
-            <p className="text-tertiary">
+            <p className='text-tertiary'>
               {t('botManagePage.subtitle')}
             </p>
 
@@ -195,7 +195,7 @@ export default function Content({ bot }) {
                 size={32}
                 width={18}
                 height={18}
-                className="rounded-full bg-secondary"
+                className='rounded-full bg-secondary'
               />
 
               {bot.username}
diff --git a/client/app/(bots)/bots/components/Hero/SearchResults/Card/index.jsx b/client/app/(bots)/bots/components/Hero/SearchResults/Card/index.jsx
index 331019af..31bc40dc 100644
--- a/client/app/(bots)/bots/components/Hero/SearchResults/Card/index.jsx
+++ b/client/app/(bots)/bots/components/Hero/SearchResults/Card/index.jsx
@@ -86,10 +86,10 @@ export default function Card({ data, overridedSort }) {
       href={`/bots/${data.id}`}
     >
       {data.standed_out?.created_at ? (
-        <div className="pointer-events-none absolute inset-0 z-20 size-full animate-rotate rounded-full bg-[conic-gradient(#22c55e_20deg,transparent_120deg)] transition-opacity group-hover:opacity-0" />
+        <div className='pointer-events-none absolute inset-0 z-20 size-full animate-rotate rounded-full bg-[conic-gradient(#22c55e_20deg,transparent_120deg)] transition-opacity group-hover:opacity-0' />
       ) : (
         data.owner.premium === true && (
-          <div className="pointer-events-none absolute inset-0 z-20 size-full animate-rotate rounded-full bg-[conic-gradient(#a855f7_20deg,transparent_120deg)] transition-opacity group-hover:opacity-0" />
+          <div className='pointer-events-none absolute inset-0 z-20 size-full animate-rotate rounded-full bg-[conic-gradient(#a855f7_20deg,transparent_120deg)] transition-opacity group-hover:opacity-0' />
         )
       )}
 
@@ -154,7 +154,7 @@ export default function Card({ data, overridedSort }) {
 
               {data.vote_triple_enabled?.created_at && (
                 <div className='relative z-[1] overflow-hidden rounded-full p-[0.1rem]'>
-                  <div className="pointer-events-none absolute inset-0 z-10 size-full animate-rotate rounded-full bg-[conic-gradient(#f97316_10deg,transparent_90deg)]"></div>
+                  <div className='pointer-events-none absolute inset-0 z-10 size-full animate-rotate rounded-full bg-[conic-gradient(#f97316_10deg,transparent_90deg)]'></div>
 
                   <div className='relative z-20 flex items-center gap-x-1 rounded-full bg-orange-500/20 px-3 py-1 text-xs font-bold text-white backdrop-blur-md'>
                     <BsFire /> {t('botCard.tripledVoteBadge')}
diff --git a/client/app/(bots)/bots/components/Hero/index.jsx b/client/app/(bots)/bots/components/Hero/index.jsx
index d5d4c4d0..59305a78 100644
--- a/client/app/(bots)/bots/components/Hero/index.jsx
+++ b/client/app/(bots)/bots/components/Hero/index.jsx
@@ -34,7 +34,7 @@ export default function Hero() {
   };
 
   return (
-    <div className="relative z-0 flex flex-col items-center px-4 pt-56 sm:px-0">
+    <div className='relative z-0 flex flex-col items-center px-4 pt-56 sm:px-0'>
       <Square column='10' row='10' transparentEffectDirection='bottomToTop' blockColor='rgba(var(--bg-secondary))' />
 
       <div className='absolute top-[-15%] h-[300px] w-full max-w-[800px] rounded-[5rem] bg-[#ffffff10] blur-[15rem]' />
@@ -52,7 +52,7 @@ export default function Hero() {
           {t('botsPage.title')}
         </motion.h1>
 
-        <motion.span className="mt-8 max-w-[700px] text-center text-tertiary sm:text-lg" initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
+        <motion.span className='mt-8 max-w-[700px] text-center text-tertiary sm:text-lg' initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
           {t('botsPage.subtitle')}
         </motion.span>
 
diff --git a/client/app/(dashboard)/components/CreateQuarantineModal/index.jsx b/client/app/(dashboard)/components/CreateQuarantineModal/index.jsx
index 3acd95b5..010e5767 100644
--- a/client/app/(dashboard)/components/CreateQuarantineModal/index.jsx
+++ b/client/app/(dashboard)/components/CreateQuarantineModal/index.jsx
@@ -123,14 +123,14 @@ export default function CreateQuarantineModal() {
   }, [step, type, value, restriction, reason, time]);
 
   return (
-    <div className="flex flex-col gap-y-4">
+    <div className='flex flex-col gap-y-4'>
       {step === 0 && (
         <>
           <div className='flex flex-col'>
             <h2 className='text-sm font-semibold text-secondary'>Quarantine Type</h2>
             <p className='text-xs text-tertiary'>Select the type of quarantine you want to create.</p>
 
-            <div className="mt-4 flex w-full gap-4">
+            <div className='mt-4 flex w-full gap-4'>
               <div
                 className={cn(
                   'relative flex flex-1 transition-all select-none font-bold text-lg gap-x-2 items-center justify-center w-full h-[80px] rounded-xl cursor-pointer bg-secondary hover:bg-background',
@@ -142,8 +142,8 @@ export default function CreateQuarantineModal() {
                 User ID
 
                 {type === 'USER_ID' && (
-                  <div className="absolute left-0 top-0 flex size-full items-center justify-center rounded-xl bg-secondary/80 text-2xl">
-                    <IoMdCheckmarkCircle className="text-primary" />
+                  <div className='absolute left-0 top-0 flex size-full items-center justify-center rounded-xl bg-secondary/80 text-2xl'>
+                    <IoMdCheckmarkCircle className='text-primary' />
                   </div>
                 )}
               </div>
@@ -159,8 +159,8 @@ export default function CreateQuarantineModal() {
                 Guild ID
 
                 {type === 'GUILD_ID' && (
-                  <div className="absolute left-0 top-0 flex size-full items-center justify-center rounded-xl bg-secondary/80 text-2xl">
-                    <IoMdCheckmarkCircle className="text-primary" />
+                  <div className='absolute left-0 top-0 flex size-full items-center justify-center rounded-xl bg-secondary/80 text-2xl'>
+                    <IoMdCheckmarkCircle className='text-primary' />
                   </div>
                 )}
               </div>
@@ -174,9 +174,9 @@ export default function CreateQuarantineModal() {
                 <p className='text-xs text-tertiary'>Enter the ID of the {type === 'USER_ID' ? 'user' : 'guild'} you want to quarantine.</p>
 
                 <input
-                  type="text"
+                  type='text'
                   placeholder={`${type === 'USER_ID' ? 'User' : 'Guild'} ID`}
-                  className="mt-3 w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background"
+                  className='mt-3 w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background'
                   value={value}
                   onChange={event => setValue(event.target.value)}
                 />
@@ -207,8 +207,8 @@ export default function CreateQuarantineModal() {
                         </div>
 
                         {restriction === quarantineRestriction && (
-                          <div className="absolute left-0 top-0 flex size-full items-center justify-center rounded-xl bg-secondary/80 text-2xl">
-                            <IoMdCheckmarkCircle className="text-primary" />
+                          <div className='absolute left-0 top-0 flex size-full items-center justify-center rounded-xl bg-secondary/80 text-2xl'>
+                            <IoMdCheckmarkCircle className='text-primary' />
                           </div>
                         )}
                       </div>
@@ -228,9 +228,9 @@ export default function CreateQuarantineModal() {
             <p className='text-xs text-tertiary'>Reason for quarantining the {type === 'USER_ID' ? 'user' : 'guild'}.</p>
 
             <input
-              type="text"
-              placeholder="Reason"
-              className="mt-3 w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background"
+              type='text'
+              placeholder='Reason'
+              className='mt-3 w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background'
               value={reason}
               onChange={event => setReason(event.target.value)}
             />
@@ -241,9 +241,9 @@ export default function CreateQuarantineModal() {
             <p className='text-xs text-tertiary'>Expiration time for the quarantine. (Optional, 20m, 6h, 3d, 1w, 30d, 1y)</p>
 
             <input
-              type="text"
-              placeholder="Time"
-              className="mt-3 w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background"
+              type='text'
+              placeholder='Time'
+              className='mt-3 w-full rounded-xl bg-secondary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-background hover:ring-2 focus-visible:bg-background'
               value={time}
               onChange={event => setTime(event.target.value)}
             />
diff --git a/client/app/(dashboard)/components/Dropdown/Deny.jsx b/client/app/(dashboard)/components/Dropdown/Deny.jsx
index 062008e3..c4bdaa54 100644
--- a/client/app/(dashboard)/components/Dropdown/Deny.jsx
+++ b/client/app/(dashboard)/components/Dropdown/Deny.jsx
@@ -39,9 +39,9 @@ export default function DenyDropdown({ description, reasons, onDeny, customReaso
           ) : (
             <div className='flex flex-col items-center gap-2'>
               <input
-                type="text"
-                placeholder="Enter a reason.."
-                className="w-full rounded-xl bg-tertiary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-quaternary hover:ring-2"
+                type='text'
+                placeholder='Enter a reason..'
+                className='w-full rounded-xl bg-tertiary px-3 py-2 text-sm text-secondary outline-none ring-purple-500 transition-all placeholder:text-placeholder hover:bg-quaternary hover:ring-2'
                 value={value}
                 onChange={event => setValue(event.target.value)}
               />
diff --git a/client/app/(dashboard)/components/Home/index.jsx b/client/app/(dashboard)/components/Home/index.jsx
index 21360052..9d0b6720 100644
--- a/client/app/(dashboard)/components/Home/index.jsx
+++ b/client/app/(dashboard)/components/Home/index.jsx
@@ -61,7 +61,7 @@ export default function Home() {
   const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toLocaleString('en-US', { month: 'short', day: 'numeric' });
 
   return (
-    <div className="my-8 flex flex-col gap-y-4">
+    <div className='my-8 flex flex-col gap-y-4'>
       <h1 className='text-4xl font-bold text-primary'>
         Welcome back, {user.global_name}!
       </h1>
diff --git a/client/app/(dashboard)/components/Queue/index.jsx b/client/app/(dashboard)/components/Queue/index.jsx
index 7ca96d99..14b39eed 100644
--- a/client/app/(dashboard)/components/Queue/index.jsx
+++ b/client/app/(dashboard)/components/Queue/index.jsx
@@ -2,25 +2,25 @@ import Table from '@/app/(dashboard)/components/Table';
 
 export default function Queue({ title, subtitle, totalCount, actionButton, tableData }) {
   return (
-    <div className="my-8 flex flex-col gap-y-8 sm:mr-6">
-      <div className="flex flex-col justify-between gap-y-4 sm:flex-row sm:items-center">
-        <div className="flex flex-col gap-y-1.5">
-          <h1 className="flex items-center gap-x-2 text-2xl font-semibold">
+    <div className='my-8 flex flex-col gap-y-8 sm:mr-6'>
+      <div className='flex flex-col justify-between gap-y-4 sm:flex-row sm:items-center'>
+        <div className='flex flex-col gap-y-1.5'>
+          <h1 className='flex items-center gap-x-2 text-2xl font-semibold'>
             {title}
 
-            <span className="text-base font-normal text-tertiary">
+            <span className='text-base font-normal text-tertiary'>
               {totalCount}
             </span>
           </h1>
 
-          <p className="text-sm text-tertiary">
+          <p className='text-sm text-tertiary'>
             {subtitle}
           </p>
         </div>
 
         {typeof actionButton === 'object' && !actionButton.hide && (
           <button
-            className="flex items-center gap-x-2 rounded-lg bg-quaternary px-4 py-2 text-sm font-semibold hover:bg-tertiary"
+            className='flex items-center gap-x-2 rounded-lg bg-quaternary px-4 py-2 text-sm font-semibold hover:bg-tertiary'
             onClick={actionButton.action}
           >
             {actionButton.name}
diff --git a/client/app/(dashboard)/components/Sidebar/Icons/Collapse.jsx b/client/app/(dashboard)/components/Sidebar/Icons/Collapse.jsx
index 5c70a266..536d8254 100644
--- a/client/app/(dashboard)/components/Sidebar/Icons/Collapse.jsx
+++ b/client/app/(dashboard)/components/Sidebar/Icons/Collapse.jsx
@@ -1,14 +1,14 @@
 export default function CollapseIcon({ ...props }) {
   return (
     <svg
-      stroke="currentColor"
-      fill="currentColor"
-      stroke-width="0"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
+      stroke='currentColor'
+      fill='currentColor'
+      stroke-width='0'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
-      <path d="M15 4.00008H13V11.0001H20V9.00008H16.4142L20.7071 4.70718L19.2929 3.29297L15 7.58586V4.00008ZM4.00008 15H7.58586L3.29297 19.2929L4.70718 20.7071L9.00008 16.4142V20H11.0001V13H4.00008V15Z" />
+      <path d='M15 4.00008H13V11.0001H20V9.00008H16.4142L20.7071 4.70718L19.2929 3.29297L15 7.58586V4.00008ZM4.00008 15H7.58586L3.29297 19.2929L4.70718 20.7071L9.00008 16.4142V20H11.0001V13H4.00008V15Z' />
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(dashboard)/components/Sidebar/index.jsx b/client/app/(dashboard)/components/Sidebar/index.jsx
index 410490dc..f8f7144f 100644
--- a/client/app/(dashboard)/components/Sidebar/index.jsx
+++ b/client/app/(dashboard)/components/Sidebar/index.jsx
@@ -207,7 +207,7 @@ export default function Sidebar() {
               src={theme === 'dark' ? '/symbol_white.png' : '/symbol_black.png'}
               width={64}
               height={64}
-              alt="discord.place Logo"
+              alt='discord.place Logo'
               className='size-6'
             />
 
diff --git a/client/app/(dashboard)/components/Table/ColumnRenderer.jsx b/client/app/(dashboard)/components/Table/ColumnRenderer.jsx
index 0c4bb216..0f14071d 100644
--- a/client/app/(dashboard)/components/Table/ColumnRenderer.jsx
+++ b/client/app/(dashboard)/components/Table/ColumnRenderer.jsx
@@ -405,7 +405,7 @@ export default function ColumnRenderer({ data }) {
     case 'theme':
       return (
         <div className='flex w-max items-center gap-x-2 rounded-full bg-quaternary py-0.5 pl-1 pr-2'>
-          <div className="relative flex items-center justify-center">
+          <div className='relative flex items-center justify-center'>
             <span
               className='block size-4 rounded-full'
               style={{ backgroundColor: data.colors.primary }}
diff --git a/client/app/(dashboard)/components/Table/index.jsx b/client/app/(dashboard)/components/Table/index.jsx
index 38ccd8ff..05a2746a 100644
--- a/client/app/(dashboard)/components/Table/index.jsx
+++ b/client/app/(dashboard)/components/Table/index.jsx
@@ -252,7 +252,7 @@ export default function Table({ tabs }) {
                       });
                     }}
                   >
-                    <div className="flex items-center gap-x-2 text-xs font-bold uppercase">
+                    <div className='flex items-center gap-x-2 text-xs font-bold uppercase'>
                       {row.icon && <row.icon size={18} />}
 
                       {row.name}
diff --git a/client/app/(dashboard)/dashboard/page.js b/client/app/(dashboard)/dashboard/page.js
index b01e885d..40cb3a88 100644
--- a/client/app/(dashboard)/dashboard/page.js
+++ b/client/app/(dashboard)/dashboard/page.js
@@ -1885,11 +1885,11 @@ export default function Page() {
 
           {loading && (
             <AnimatePresence>
-              <div className="absolute left-0 top-0 z-10 flex size-full max-h-[919px] flex-col items-center justify-center bg-background">
+              <div className='absolute left-0 top-0 z-10 flex size-full max-h-[919px] flex-col items-center justify-center bg-background'>
                 <MotionImage
                   className='size-[64px]'
                   src={theme === 'dark' ? '/symbol_white.png' : '/symbol_black.png'}
-                  alt="discord.place Logo"
+                  alt='discord.place Logo'
                   width={256}
                   height={256}
                   initial={{ opacity: 0 }}
diff --git a/client/app/(emojis)/emojis/[id]/components/FaQs/Questions/3.jsx b/client/app/(emojis)/emojis/[id]/components/FaQs/Questions/3.jsx
index 96d3d7a1..f8dd6757 100644
--- a/client/app/(emojis)/emojis/[id]/components/FaQs/Questions/3.jsx
+++ b/client/app/(emojis)/emojis/[id]/components/FaQs/Questions/3.jsx
@@ -4,7 +4,7 @@ import { t } from '@/stores/language';
 
 export default function Question3() {
   return (
-    <p className="mt-2">
+    <p className='mt-2'>
       {t('emojiPage.frequentlyAskedQuestions.answers.2')}
     </p>
   );
diff --git a/client/app/(emojis)/emojis/components/EmojiPreview/index.jsx b/client/app/(emojis)/emojis/components/EmojiPreview/index.jsx
index f4e222f9..0584e82e 100644
--- a/client/app/(emojis)/emojis/components/EmojiPreview/index.jsx
+++ b/client/app/(emojis)/emojis/components/EmojiPreview/index.jsx
@@ -136,8 +136,8 @@ export default function EmojiPreview({ id, name, image_url, ableToChange, defaul
       backgroundImage: `url(/${patternDarkMode ? 'transparent-pattern-dark' : 'transparent-pattern-light'}.png)`
     }}>
 
-      <div className="pointer-events-none fixed left-0 top-0 z-10 h-svh w-full">
-        <Lottie options={{ loop: false, autoplay: false, animationData: confetti }} isStopped={!renderConfetti} height="100%" width="100%"/>
+      <div className='pointer-events-none fixed left-0 top-0 z-10 h-svh w-full'>
+        <Lottie options={{ loop: false, autoplay: false, animationData: confetti }} isStopped={!renderConfetti} height='100%' width='100%'/>
       </div>
 
       <AnimatePresence>
diff --git a/client/app/(emojis)/emojis/components/Hero/Emojis.jsx b/client/app/(emojis)/emojis/components/Hero/Emojis.jsx
index 02733143..56cfae5d 100644
--- a/client/app/(emojis)/emojis/components/Hero/Emojis.jsx
+++ b/client/app/(emojis)/emojis/components/Hero/Emojis.jsx
@@ -84,7 +84,7 @@ export default function Emojis() {
         >
           {loading ? (
             new Array(12).fill(0).map((_, index) => (
-              <div key={index} className="h-[164px] w-[322px] animate-pulse rounded-2xl bg-secondary" />
+              <div key={index} className='h-[164px] w-[322px] animate-pulse rounded-2xl bg-secondary' />
             ))
           ) : (
             emojis.map(emoji => (
diff --git a/client/app/(emojis)/emojis/components/Hero/index.jsx b/client/app/(emojis)/emojis/components/Hero/index.jsx
index 50a59563..1515b2e0 100644
--- a/client/app/(emojis)/emojis/components/Hero/index.jsx
+++ b/client/app/(emojis)/emojis/components/Hero/index.jsx
@@ -41,7 +41,7 @@ export default function Hero() {
   };
 
   return (
-    <div className="relative z-0 flex flex-col items-center px-4 pt-56 sm:px-0">
+    <div className='relative z-0 flex flex-col items-center px-4 pt-56 sm:px-0'>
       <Square column='10' row='10' transparentEffectDirection='bottomToTop' blockColor='rgba(var(--bg-secondary))' />
 
       <div className='absolute top-[-15%] h-[300px] w-full max-w-[800px] rounded-[5rem] bg-[#ffffff10] blur-[15rem]' />
@@ -59,7 +59,7 @@ export default function Hero() {
           {t('emojisPage.title')}
         </motion.h1>
 
-        <motion.span className="mt-8 max-w-[700px] text-center text-tertiary sm:text-lg" initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
+        <motion.span className='mt-8 max-w-[700px] text-center text-tertiary sm:text-lg' initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
           {t('emojisPage.subtitle', { br: <br />, count: total })}
         </motion.span>
 
diff --git a/client/app/(emojis)/emojis/components/PackagePreview/index.jsx b/client/app/(emojis)/emojis/components/PackagePreview/index.jsx
index 78c4671c..81b7e86d 100644
--- a/client/app/(emojis)/emojis/components/PackagePreview/index.jsx
+++ b/client/app/(emojis)/emojis/components/PackagePreview/index.jsx
@@ -146,8 +146,8 @@ export default function PackagePreview({ image_urls, setImageURLs, setIsPackage,
 
   return (
     <div className='flex flex-col gap-y-4'>
-      <div className="pointer-events-none fixed left-0 top-0 z-10 h-svh w-full">
-        <Lottie options={{ loop: false, autoplay: false, animationData: confetti }} isStopped={!renderConfetti} height="100%" width="100%"/>
+      <div className='pointer-events-none fixed left-0 top-0 z-10 h-svh w-full'>
+        <Lottie options={{ loop: false, autoplay: false, animationData: confetti }} isStopped={!renderConfetti} height='100%' width='100%'/>
       </div>
 
       {ableToChange && (
diff --git a/client/app/(emojis)/emojis/components/UploadEmojiToDiscordModal.jsx b/client/app/(emojis)/emojis/components/UploadEmojiToDiscordModal.jsx
index a8a9313b..22ae1d93 100644
--- a/client/app/(emojis)/emojis/components/UploadEmojiToDiscordModal.jsx
+++ b/client/app/(emojis)/emojis/components/UploadEmojiToDiscordModal.jsx
@@ -16,9 +16,9 @@ export default function UploadEmojiToDiscordModal({ guilds }) {
   const setSelectedGuildId = useGeneralStore(state => state.uploadEmojiToDiscordModal.setSelectedGuildId);
 
   return (
-    <div className="flex size-full items-center justify-center">
+    <div className='flex size-full items-center justify-center'>
       {guilds.length === 0 ? (
-        <div className="mt-4 flex flex-col gap-y-2">
+        <div className='mt-4 flex flex-col gap-y-2'>
           <ErrorState
             title={
               <div className='flex items-center gap-x-2'>
diff --git a/client/app/(emojis)/emojis/create/page.js b/client/app/(emojis)/emojis/create/page.js
index 69b81801..3540245e 100644
--- a/client/app/(emojis)/emojis/create/page.js
+++ b/client/app/(emojis)/emojis/create/page.js
@@ -82,15 +82,15 @@ export default function Page() {
 
   return (
     <AuthProtected>
-      <div className="relative z-0 flex w-full justify-center px-6 lg:px-0">
+      <div className='relative z-0 flex w-full justify-center px-6 lg:px-0'>
         <Square column='10' row='10' transparentEffectDirection='bottomToTop' blockColor='rgba(var(--bg-secondary))' />
 
-        <div className="mb-16 mt-48 flex w-full max-w-[600px] flex-col gap-y-2">
-          <h1 className="text-4xl font-bold text-primary">
+        <div className='mb-16 mt-48 flex w-full max-w-[600px] flex-col gap-y-2'>
+          <h1 className='text-4xl font-bold text-primary'>
             {t('createEmojiPage.title')}
           </h1>
 
-          <p className="text-sm text-tertiary">
+          <p className='text-sm text-tertiary'>
             {t('createEmojiPage.subtitle')}
           </p>
 
diff --git a/client/app/(emojis)/emojis/packages/[id]/components/FaQs/Questions/3.jsx b/client/app/(emojis)/emojis/packages/[id]/components/FaQs/Questions/3.jsx
index 1fc894cb..c8b23286 100644
--- a/client/app/(emojis)/emojis/packages/[id]/components/FaQs/Questions/3.jsx
+++ b/client/app/(emojis)/emojis/packages/[id]/components/FaQs/Questions/3.jsx
@@ -4,7 +4,7 @@ import { t } from '@/stores/language';
 
 export default function Question3() {
   return (
-    <p className="mt-2">
+    <p className='mt-2'>
       {t('emojiPackagePage.frequentlyAskedQuestions.answers.2')}
     </p>
   );
diff --git a/client/app/(home)/page.js b/client/app/(home)/page.js
index 3590a12e..fc5bbcf9 100644
--- a/client/app/(home)/page.js
+++ b/client/app/(home)/page.js
@@ -12,7 +12,7 @@ export default async function Page() {
   const { data, totalServers } = result || { data: [], totalServers: 0 };
 
   return (
-    <div className="relative z-10 mb-24 flex w-full flex-col items-center">
+    <div className='relative z-10 mb-24 flex w-full flex-col items-center'>
       <div className='relative flex min-h-[60svh] w-full flex-col items-center'>
         <Square
           column='5'
diff --git a/client/app/(profiles)/profile/[slug]/components/sections/Graph/index.jsx b/client/app/(profiles)/profile/[slug]/components/sections/Graph/index.jsx
index fc9fd69a..0b5d88fc 100644
--- a/client/app/(profiles)/profile/[slug]/components/sections/Graph/index.jsx
+++ b/client/app/(profiles)/profile/[slug]/components/sections/Graph/index.jsx
@@ -28,7 +28,7 @@ export default function Graph({ profile }) {
   const isMobile = useMedia('(max-width: 640px)', false);
 
   return (
-    <div className="rounded-3xl p-[.75rem] px-8 lg:px-0">
+    <div className='rounded-3xl p-[.75rem] px-8 lg:px-0'>
       <motion.div
         className='w-full'
         initial={{ opacity: 0, y: -10 }}
diff --git a/client/app/(profiles)/profile/[slug]/components/sections/Servers.jsx b/client/app/(profiles)/profile/[slug]/components/sections/Servers.jsx
index 9f34d076..ce407654 100644
--- a/client/app/(profiles)/profile/[slug]/components/sections/Servers.jsx
+++ b/client/app/(profiles)/profile/[slug]/components/sections/Servers.jsx
@@ -10,7 +10,7 @@ export default function Servers({ profile }) {
   const user = useAuthStore(state => state.user);
 
   return (
-    <div className="mt-8 px-8 lg:px-0">
+    <div className='mt-8 px-8 lg:px-0'>
       <motion.h2
         className='text-xl font-semibold'
         initial={{ opacity: 0, y: -10 }}
diff --git a/client/app/(profiles)/profile/[slug]/content.js b/client/app/(profiles)/profile/[slug]/content.js
index e108d2d1..c9d4fcc9 100644
--- a/client/app/(profiles)/profile/[slug]/content.js
+++ b/client/app/(profiles)/profile/[slug]/content.js
@@ -29,7 +29,7 @@ export default function Content({ profile }) {
   return (
     <div className='mt-32 flex w-full justify-center'>
       <Script
-        src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+        src='https://challenges.cloudflare.com/turnstile/v0/api.js'
         async={true}
         defer={true}
       />
diff --git a/client/app/(profiles)/profile/[slug]/edit/content.js b/client/app/(profiles)/profile/[slug]/edit/content.js
index 227e79ff..6d2a526d 100644
--- a/client/app/(profiles)/profile/[slug]/edit/content.js
+++ b/client/app/(profiles)/profile/[slug]/edit/content.js
@@ -11,15 +11,15 @@ import UserAvatar from '@/app/components/ImageFromHash/UserAvatar';
 
 export default function Content({ profile }) {
   return (
-    <div className="mb-8 mt-36 flex w-full justify-center px-4 sm:px-0">
-      <div className="flex w-full max-w-[650px] justify-center">
-        <div className="flex w-full flex-col">
-          <div className="flex items-center gap-x-4">
-            <Link href={`/profile/${profile.slug}`} className="rounded-xl bg-secondary p-1.5 hover:bg-tertiary">
+    <div className='mb-8 mt-36 flex w-full justify-center px-4 sm:px-0'>
+      <div className='flex w-full max-w-[650px] justify-center'>
+        <div className='flex w-full flex-col'>
+          <div className='flex items-center gap-x-4'>
+            <Link href={`/profile/${profile.slug}`} className='rounded-xl bg-secondary p-1.5 hover:bg-tertiary'>
               <MdChevronLeft size={24} />
             </Link>
 
-            <h1 className="text-3xl font-bold">
+            <h1 className='text-3xl font-bold'>
               {t('editProfilePage.title')}
             </h1>
           </div>
@@ -43,7 +43,7 @@ export default function Content({ profile }) {
                 {profile.verified && <VerifiedBadge />}
               </div>
 
-              <div className="select-none">
+              <div className='select-none'>
                 <span className='text-sm text-tertiary sm:text-base'>
                   {profile.preferredHost}/
                 </span>
diff --git a/client/app/(profiles)/profile/u/[user_id]/content.js b/client/app/(profiles)/profile/u/[user_id]/content.js
index d5422cd2..6e8698cc 100644
--- a/client/app/(profiles)/profile/u/[user_id]/content.js
+++ b/client/app/(profiles)/profile/u/[user_id]/content.js
@@ -99,7 +99,7 @@ export default function Content({ user }) {
 
   return (
     <div className='mb-8 mt-32 flex w-full flex-col items-center gap-y-8 px-8 lg:px-0'>
-      <div className="relative h-max w-full max-w-[600px] rounded-[2rem] bg-secondary p-3">
+      <div className='relative h-max w-full max-w-[600px] rounded-[2rem] bg-secondary p-3'>
         {user.bannerURL ? (
           <div className='relative'>
             <Image
@@ -107,7 +107,7 @@ export default function Content({ user }) {
               alt={`${user.username}'s banner`}
               width={1024}
               height={256}
-              className="h-[200px] rounded-[2.5rem] object-cover"
+              className='h-[200px] rounded-[2.5rem] object-cover'
             />
 
             {user.bannerURL.includes('.gif') && (
@@ -117,7 +117,7 @@ export default function Content({ user }) {
             )}
           </div>
         ) : (
-          <div className="h-[200px] rounded-[2.5rem] bg-tertiary" />
+          <div className='h-[200px] rounded-[2.5rem] bg-tertiary' />
         )}
 
         <div className='pointer-events-none relative bottom-16 left-8 -mb-12 flex w-full items-center sm:mb-[-7.5rem]'>
@@ -126,8 +126,8 @@ export default function Content({ user }) {
             alt={`${user.username}'s avatar`}
             width={128}
             height={128}
-            objectFit="cover"
-            className="size-[100px] rounded-full border-8 border-[rgba(var(--bg-secondary))] sm:size-[128px]"
+            objectFit='cover'
+            className='size-[100px] rounded-full border-8 border-[rgba(var(--bg-secondary))] sm:size-[128px]'
           />
         </div>
 
diff --git a/client/app/(profiles)/profiles/components/Hero/index.jsx b/client/app/(profiles)/profiles/components/Hero/index.jsx
index e0ddf208..7440c0bd 100644
--- a/client/app/(profiles)/profiles/components/Hero/index.jsx
+++ b/client/app/(profiles)/profiles/components/Hero/index.jsx
@@ -39,7 +39,7 @@ export default function Hero() {
 
   return (
     <>
-      <div className="relative z-0 flex flex-col items-center px-4 pt-56 sm:px-0">
+      <div className='relative z-0 flex flex-col items-center px-4 pt-56 sm:px-0'>
         <Square column='10' row='10' transparentEffectDirection='bottomToTop' blockColor='rgba(var(--bg-secondary))' />
 
         <div className='absolute -top-1/2 h-[300px] w-full max-w-[800px] rounded-[5rem] bg-[#ffffff10] blur-[15rem]' />
@@ -57,7 +57,7 @@ export default function Hero() {
             {t('profilesPage.title')}
           </motion.h1>
 
-          <motion.div className="mt-8 max-w-[700px] text-center text-tertiary sm:text-lg" initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
+          <motion.div className='mt-8 max-w-[700px] text-center text-tertiary sm:text-lg' initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
             {t('profilesPage.subtitle', { br: <br />, count: totalProfiles })}
           </motion.div>
 
diff --git a/client/app/(servers)/servers/[id]/components/Tabs/Reviews.jsx b/client/app/(servers)/servers/[id]/components/Tabs/Reviews.jsx
index 1ac9dea5..61ad726c 100644
--- a/client/app/(servers)/servers/[id]/components/Tabs/Reviews.jsx
+++ b/client/app/(servers)/servers/[id]/components/Tabs/Reviews.jsx
@@ -69,18 +69,18 @@ export default function Reviews({ server }) {
   }
 
   return (
-    <div className="flex flex-col px-8 lg:w-[70%] lg:px-0">
-      <h1 className="text-xl font-semibold">
+    <div className='flex flex-col px-8 lg:w-[70%] lg:px-0'>
+      <h1 className='text-xl font-semibold'>
         {t('serverPage.tabs.reviews.title')}
       </h1>
 
-      <div className="mt-8 flex w-full flex-col gap-y-4 sm:flex-row">
-        <div className="flex w-[35%] flex-col gap-y-4">
-          <h2 className="text-5xl font-bold sm:text-7xl">
+      <div className='mt-8 flex w-full flex-col gap-y-4 sm:flex-row'>
+        <div className='flex w-[35%] flex-col gap-y-4'>
+          <h2 className='text-5xl font-bold sm:text-7xl'>
             {((server.reviews.reduce((acc, review) => acc + review.rating, 0) / server.reviews.length) || 0).toFixed(1)}
           </h2>
 
-          <div className="flex gap-x-0.5 text-lg text-yellow-500 sm:gap-x-2">
+          <div className='flex gap-x-0.5 text-lg text-yellow-500 sm:gap-x-2'>
             {[...Array(5)].map((_, index) => {
               const rating = server.reviews.reduce((acc, review) => acc + review.rating, 0) / server.reviews.length;
               if (rating >= index + 1) return <TiStarFullOutline key={index} />;
@@ -95,7 +95,7 @@ export default function Reviews({ server }) {
           </span>
         </div>
 
-        <div className="flex w-full flex-1">
+        <div className='flex w-full flex-1'>
           <div className='flex w-full flex-col gap-y-2'>
             {new Array(5).fill(null).map((_, index) => (
               <div key={index} className='flex w-full items-center gap-x-4'>
@@ -127,7 +127,7 @@ export default function Reviews({ server }) {
         </div>
       )}
 
-      <div className="mt-8 flex w-full flex-col gap-y-8 sm:flex-row sm:gap-y-0">
+      <div className='mt-8 flex w-full flex-col gap-y-8 sm:flex-row sm:gap-y-0'>
         {server.has_reviewed ? (
           <span className='text-sm font-medium text-tertiary'>
             {t('serverPage.tabs.reviews.reviewSubmitted.alreadyReviewed')}
@@ -139,7 +139,7 @@ export default function Reviews({ server }) {
         ) : (
           <>
             <div className='flex w-[35%] flex-col gap-y-3'>
-              <div className="flex gap-x-4">
+              <div className='flex gap-x-4'>
                 {loggedIn ? (
                   <UserAvatar
                     id={user?.id}
@@ -212,7 +212,7 @@ export default function Reviews({ server }) {
               )}
             </div>
 
-            <div className="flex w-full flex-1 flex-col gap-y-1 whitespace-pre-wrap font-medium text-secondary">
+            <div className='flex w-full flex-1 flex-col gap-y-1 whitespace-pre-wrap font-medium text-secondary'>
               <h3 className='font-medium text-primary'>
                 {t('serverPage.tabs.reviews.input.label')}
               </h3>
@@ -261,8 +261,8 @@ export default function Reviews({ server }) {
       </div>
 
       {reviews.map(review => (
-        <div className="mt-8 flex w-full flex-col gap-y-4 sm:flex-row" key={review._id}>
-          <div className="flex w-full gap-x-4 sm:w-[35%]">
+        <div className='mt-8 flex w-full flex-col gap-y-4 sm:flex-row' key={review._id}>
+          <div className='flex w-full gap-x-4 sm:w-[35%]'>
             <Link
               href={`/profile/u/${review.user.id}`}
               className='transition-opacity hover:opacity-70'
@@ -307,7 +307,7 @@ export default function Reviews({ server }) {
             }}
             identifier={`server-${server.id}-review-${review._id}`}
           >
-            <div className="flex w-full max-w-[440px] flex-1 flex-col justify-between gap-y-2 whitespace-pre-wrap break-words font-medium text-secondary sm:gap-y-0">
+            <div className='flex w-full max-w-[440px] flex-1 flex-col justify-between gap-y-2 whitespace-pre-wrap break-words font-medium text-secondary sm:gap-y-0'>
               <span className='text-xs font-medium text-tertiary'>
                 {new Date(review.createdAt).toLocaleDateString(language, { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' })}
               </span>
diff --git a/client/app/(servers)/servers/[id]/components/Tabs/Rewards.jsx b/client/app/(servers)/servers/[id]/components/Tabs/Rewards.jsx
index 9e4d1131..3a13f624 100644
--- a/client/app/(servers)/servers/[id]/components/Tabs/Rewards.jsx
+++ b/client/app/(servers)/servers/[id]/components/Tabs/Rewards.jsx
@@ -41,19 +41,19 @@ export default function Rewards({ server }) {
               />
             ) : (
               <svg
-                role="img"
-                xmlns="http://www.w3.org/2000/svg"
-                width="40"
-                height="40"
-                fill="none"
-                viewBox="0 0 24 24"
+                role='img'
+                xmlns='http://www.w3.org/2000/svg'
+                width='40'
+                height='40'
+                fill='none'
+                viewBox='0 0 24 24'
                 className='text-tertiary'
               >
                 <path
-                  fill="currentColor"
-                  fillRule="evenodd"
-                  d="M3.47 5.18c.27-.4.64-.74 1.1-.96l6.09-3.05a3 3 0 0 1 2.68 0l6.1 3.05A2.83 2.83 0 0 1 21 6.75v3.5a14.17 14.17 0 0 1-8.42 12.5c-.37.16-.79.16-1.16 0A14.18 14.18 0 0 1 3 9.77V6.75c0-.57.17-1.11.47-1.57Zm2.95 10.3A12.18 12.18 0 0 0 12 20.82a12.18 12.18 0 0 0 5.58-5.32A9.49 9.49 0 0 0 12.47 14h-.94c-1.88 0-3.63.55-5.11 1.49ZM12 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
-                  clipRule="evenodd"
+                  fill='currentColor'
+                  fillRule='evenodd'
+                  d='M3.47 5.18c.27-.4.64-.74 1.1-.96l6.09-3.05a3 3 0 0 1 2.68 0l6.1 3.05A2.83 2.83 0 0 1 21 6.75v3.5a14.17 14.17 0 0 1-8.42 12.5c-.37.16-.79.16-1.16 0A14.18 14.18 0 0 1 3 9.77V6.75c0-.57.17-1.11.47-1.57Zm2.95 10.3A12.18 12.18 0 0 0 12 20.82a12.18 12.18 0 0 0 5.58-5.32A9.49 9.49 0 0 0 12.47 14h-.94c-1.88 0-3.63.55-5.11 1.49ZM12 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'
+                  clipRule='evenodd'
                 />
               </svg>
             )}
diff --git a/client/app/(servers)/servers/[id]/components/sections/RightSide/Actions.jsx b/client/app/(servers)/servers/[id]/components/sections/RightSide/Actions.jsx
index a4ffba33..6480ebbb 100644
--- a/client/app/(servers)/servers/[id]/components/sections/RightSide/Actions.jsx
+++ b/client/app/(servers)/servers/[id]/components/sections/RightSide/Actions.jsx
@@ -159,7 +159,7 @@ export default function Actions({ server }) {
       >
         {loggedIn && (
           <Script
-            src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+            src='https://challenges.cloudflare.com/turnstile/v0/api.js'
             async={true}
             defer={true}
           />
@@ -168,7 +168,7 @@ export default function Actions({ server }) {
         <AnimatePresence>
           {showCaptcha && (
             /* eslint-disable-next-line tailwindcss/no-custom-classname */
-            <motion.div className="cf-turnstile [&>iframe]:max-w-full" data-sitekey={process.env.NEXT_PUBLIC_CF_SITE_KEY} ref={captchaRef} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />
+            <motion.div className='cf-turnstile [&>iframe]:max-w-full' data-sitekey={process.env.NEXT_PUBLIC_CF_SITE_KEY} ref={captchaRef} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />
           )}
         </AnimatePresence>
 
diff --git a/client/app/(servers)/servers/[id]/manage/components/Input/index.jsx b/client/app/(servers)/servers/[id]/manage/components/Input/index.jsx
index ca9da5e1..cbf80db3 100644
--- a/client/app/(servers)/servers/[id]/manage/components/Input/index.jsx
+++ b/client/app/(servers)/servers/[id]/manage/components/Input/index.jsx
@@ -7,7 +7,7 @@ export default function Input({ label, customLabelPeer, description, type, Custo
 
   return (
     <div className='flex flex-1 flex-col gap-y-2'>
-      <div className="flex size-full items-center gap-x-2">
+      <div className='flex size-full items-center gap-x-2'>
         <label
           className='font-medium text-secondary'
         >
diff --git a/client/app/(servers)/servers/[id]/manage/content.js b/client/app/(servers)/servers/[id]/manage/content.js
index 2e69a96e..71860701 100644
--- a/client/app/(servers)/servers/[id]/manage/content.js
+++ b/client/app/(servers)/servers/[id]/manage/content.js
@@ -169,11 +169,11 @@ export default function Content({ server }) {
   }, [changesMade, openedModals]);
 
   return (
-    <div className="mb-24 flex size-full items-center justify-center px-4 sm:px-12">
-      <div className="mt-48 flex size-full max-w-[1000px] flex-col items-start gap-y-8">
-        <div className="flex w-full flex-col sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex flex-col gap-y-1">
-            <h2 className="flex items-center gap-x-2 text-3xl font-bold">
+    <div className='mb-24 flex size-full items-center justify-center px-4 sm:px-12'>
+      <div className='mt-48 flex size-full max-w-[1000px] flex-col items-start gap-y-8'>
+        <div className='flex w-full flex-col sm:flex-row sm:items-center sm:justify-between'>
+          <div className='flex flex-col gap-y-1'>
+            <h2 className='flex items-center gap-x-2 text-3xl font-bold'>
               {t('serverManagePage.title')}
 
               <div className='select-none rounded-lg bg-quaternary p-2 text-xs font-bold uppercase'>
@@ -181,7 +181,7 @@ export default function Content({ server }) {
               </div>
             </h2>
 
-            <p className="text-tertiary">
+            <p className='text-tertiary'>
               {t('serverManagePage.subtitle')}
             </p>
 
diff --git a/client/app/(servers)/servers/components/Hero/index.jsx b/client/app/(servers)/servers/components/Hero/index.jsx
index aee69778..fe58230c 100644
--- a/client/app/(servers)/servers/components/Hero/index.jsx
+++ b/client/app/(servers)/servers/components/Hero/index.jsx
@@ -66,7 +66,7 @@ export default function Hero() {
   const showPagination = !loading && totalServers > limit;
 
   return (
-    <div className="relative z-0 flex flex-col items-center px-4 pt-56 lg:px-0">
+    <div className='relative z-0 flex flex-col items-center px-4 pt-56 lg:px-0'>
       <Square column='10' row='10' transparentEffectDirection='bottomToTop' blockColor='rgba(var(--bg-secondary))' />
 
       <div className='absolute top-[-15%] h-[300px] w-full max-w-[800px] rounded-[5rem] bg-[#ffffff10] blur-[15rem]' />
@@ -83,7 +83,7 @@ export default function Hero() {
         >
           {t('serversPage.title')}
         </motion.h1>
-        <motion.span className="mt-8 max-w-[700px] text-center text-tertiary sm:text-lg" initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
+        <motion.span className='mt-8 max-w-[700px] text-center text-tertiary sm:text-lg' initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
           {t('serversPage.subtitle')}
         </motion.span>
 
diff --git a/client/app/(servers)/servers/components/ServerCard/index.jsx b/client/app/(servers)/servers/components/ServerCard/index.jsx
index 15b77618..3b832076 100644
--- a/client/app/(servers)/servers/components/ServerCard/index.jsx
+++ b/client/app/(servers)/servers/components/ServerCard/index.jsx
@@ -77,10 +77,10 @@ export default function ServerCard(props) {
       href={`/servers/${props.server.id}`}
     >
       {props.server.standed_out?.created_at ? (
-        <div className="pointer-events-none absolute inset-0 z-20 size-full animate-rotate rounded-full bg-[conic-gradient(#22c55e_20deg,transparent_120deg)] transition-opacity group-hover:opacity-0" />
+        <div className='pointer-events-none absolute inset-0 z-20 size-full animate-rotate rounded-full bg-[conic-gradient(#22c55e_20deg,transparent_120deg)] transition-opacity group-hover:opacity-0' />
       ) : (
         props.server.premium === true && (
-          <div className="pointer-events-none absolute inset-0 z-20 size-full animate-rotate rounded-full bg-[conic-gradient(#a855f7_20deg,transparent_120deg)] transition-opacity group-hover:opacity-0" />
+          <div className='pointer-events-none absolute inset-0 z-20 size-full animate-rotate rounded-full bg-[conic-gradient(#a855f7_20deg,transparent_120deg)] transition-opacity group-hover:opacity-0' />
         )
       )}
 
@@ -168,7 +168,7 @@ export default function ServerCard(props) {
 
               {props.server.vote_triple_enabled?.created_at && (
                 <div className='relative z-[1] overflow-hidden rounded-full p-[0.1rem]'>
-                  <div className="pointer-events-none absolute inset-0 z-10 size-full animate-rotate rounded-full bg-[conic-gradient(#f97316_10deg,transparent_90deg)]"></div>
+                  <div className='pointer-events-none absolute inset-0 z-10 size-full animate-rotate rounded-full bg-[conic-gradient(#f97316_10deg,transparent_90deg)]'></div>
 
                   <div className='relative z-20 flex items-center gap-x-1 rounded-full bg-orange-500/20 px-3 py-1 text-xs font-bold text-white backdrop-blur-md'>
                     <BsFire /> {t('serverCard.tripledVoteBadge')}
diff --git a/client/app/(sounds)/sounds/[id]/components/FaQs/Questions/3.jsx b/client/app/(sounds)/sounds/[id]/components/FaQs/Questions/3.jsx
index 03daff3b..f65502e3 100644
--- a/client/app/(sounds)/sounds/[id]/components/FaQs/Questions/3.jsx
+++ b/client/app/(sounds)/sounds/[id]/components/FaQs/Questions/3.jsx
@@ -2,7 +2,7 @@ import { t } from '@/stores/language';
 
 export default function Question3() {
   return (
-    <p className="mt-2">
+    <p className='mt-2'>
       {t('soundPage.frequentlyAskedQuestions.answers.2')}
     </p>
   );
diff --git a/client/app/(sounds)/sounds/components/SoundPreview/UploadSoundToDiscordModal.jsx b/client/app/(sounds)/sounds/components/SoundPreview/UploadSoundToDiscordModal.jsx
index 999b7e11..c2796bbb 100644
--- a/client/app/(sounds)/sounds/components/SoundPreview/UploadSoundToDiscordModal.jsx
+++ b/client/app/(sounds)/sounds/components/SoundPreview/UploadSoundToDiscordModal.jsx
@@ -16,9 +16,9 @@ export default function UploadSoundToDiscordModal({ guilds }) {
   const setSelectedGuildId = useGeneralStore(state => state.uploadSoundToDiscordModal.setSelectedGuildId);
 
   return (
-    <div className="flex size-full items-center justify-center">
+    <div className='flex size-full items-center justify-center'>
       {guilds.length === 0 ? (
-        <div className="mt-4 flex flex-col gap-y-2">
+        <div className='mt-4 flex flex-col gap-y-2'>
           <ErrorState
             title={
               <div className='flex items-center gap-x-2'>
diff --git a/client/app/(sounds)/sounds/components/SoundPreview/index.jsx b/client/app/(sounds)/sounds/components/SoundPreview/index.jsx
index 1b08080e..e6e70ab2 100644
--- a/client/app/(sounds)/sounds/components/SoundPreview/index.jsx
+++ b/client/app/(sounds)/sounds/components/SoundPreview/index.jsx
@@ -188,7 +188,7 @@ export default function SoundPreview({ sound, overridedSort, showUploadToGuildBu
         currentlyPlaying === sound.id ? 'border-purple-500' : 'border-primary'
       )}
     >
-      <div className="pointer-events-none fixed left-0 top-0 z-10 h-svh w-full">
+      <div className='pointer-events-none fixed left-0 top-0 z-10 h-svh w-full'>
         {renderConfetti && (
           <Lottie
             options={{
@@ -196,20 +196,20 @@ export default function SoundPreview({ sound, overridedSort, showUploadToGuildBu
               autoplay: true,
               animationData: confetti
             }}
-            height="100%"
-            width="100%"
+            height='100%'
+            width='100%'
           />
         )}
       </div>
 
-      <div className="flex items-start justify-between">
-        <div className="flex max-w-[90%] flex-col">
-          <h2 className="truncate text-base font-semibold text-primary">
+      <div className='flex items-start justify-between'>
+        <div className='flex max-w-[90%] flex-col'>
+          <h2 className='truncate text-base font-semibold text-primary'>
             <PiWaveformBold className='mr-2 inline' />
             {sound.name}
           </h2>
 
-          <div className="flex items-center gap-2 text-base font-medium text-tertiary">
+          <div className='flex items-center gap-2 text-base font-medium text-tertiary'>
             <div className='flex items-center gap-x-2'>
               <MdAccountCircle />
 
diff --git a/client/app/(sounds)/sounds/components/Sounds/index.jsx b/client/app/(sounds)/sounds/components/Sounds/index.jsx
index 93cff4b5..5b3f2eec 100644
--- a/client/app/(sounds)/sounds/components/Sounds/index.jsx
+++ b/client/app/(sounds)/sounds/components/Sounds/index.jsx
@@ -79,7 +79,7 @@ export default function Sounds() {
         >
           {loading ? (
             new Array(9).fill(0).map((_, index) => (
-              <div key={index} className="h-[196px] w-full animate-pulse rounded-2xl bg-secondary" />
+              <div key={index} className='h-[196px] w-full animate-pulse rounded-2xl bg-secondary' />
             ))
           ) : (
             sounds.map(sound => (
diff --git a/client/app/(sounds)/sounds/content.js b/client/app/(sounds)/sounds/content.js
index af9e9ed4..4fa743fa 100644
--- a/client/app/(sounds)/sounds/content.js
+++ b/client/app/(sounds)/sounds/content.js
@@ -41,7 +41,7 @@ export default function Content() {
   }, []);
 
   return (
-    <div className="relative z-0 flex flex-col items-center px-4 pt-56 sm:px-0">
+    <div className='relative z-0 flex flex-col items-center px-4 pt-56 sm:px-0'>
       <Square
         column='10'
         row='10'
@@ -64,7 +64,7 @@ export default function Content() {
           {t('soundsPage.title')}
         </motion.h1>
 
-        <motion.span className="mt-8 max-w-[700px] text-center text-tertiary sm:text-lg" initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
+        <motion.span className='mt-8 max-w-[700px] text-center text-tertiary sm:text-lg' initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
           {t('soundsPage.subtitle')}
         </motion.span>
 
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/BrowseChannels/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/BrowseChannels/index.jsx
index a8c28c71..abd60c7e 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/BrowseChannels/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/BrowseChannels/index.jsx
@@ -1,8 +1,8 @@
 export default function BrowseChannelsIcon({ className }) {
   return (
-    <svg width="80" height="81" viewBox="0 0 80 81" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M61.6666 77.167C64.5999 77.167 67.3333 76.3337 69.6666 74.867L74.3333 79.5337C74.9747 80.0756 75.7971 80.3554 76.636 80.3171C77.4749 80.2789 78.2684 79.9255 78.8579 79.3275C79.4475 78.7295 79.7896 77.9311 79.816 77.0917C79.8423 76.2524 79.5508 75.4341 78.9999 74.8003L74.3666 70.1337C76.1329 67.3158 76.9127 63.9908 76.5833 60.6814C76.2539 57.372 74.834 54.2659 72.5469 51.8514C70.2598 49.437 67.2351 47.8511 63.9484 47.3431C60.6617 46.835 57.2993 47.4337 54.39 49.0449C51.4806 50.6561 49.1892 53.1886 47.876 56.2441C46.5627 59.2996 46.3022 62.7048 47.1353 65.9245C47.9684 69.1442 49.8479 71.9958 52.4783 74.0309C55.1087 76.0659 58.3408 77.1691 61.6666 77.167ZM61.6666 70.5003C63.8767 70.5003 65.9963 69.6224 67.5591 68.0596C69.1219 66.4968 69.9999 64.3771 69.9999 62.167C69.9999 59.9569 69.1219 57.8373 67.5591 56.2745C65.9963 54.7117 63.8767 53.8337 61.6666 53.8337C59.4564 53.8337 57.3368 54.7117 55.774 56.2745C54.2112 57.8373 53.3333 59.9569 53.3333 62.167C53.3333 64.3771 54.2112 66.4968 55.774 68.0596C57.3368 69.6224 59.4564 70.5003 61.6666 70.5003Z" fill="currentColor"/>
-      <path d="M9.99996 10.5004C9.1159 10.5004 8.26806 10.8516 7.64294 11.4767C7.01782 12.1018 6.66663 12.9496 6.66663 13.8337C6.66663 14.7178 7.01782 15.5656 7.64294 16.1907C8.26806 16.8158 9.1159 17.167 9.99996 17.167H70C70.884 17.167 71.7319 16.8158 72.357 16.1907C72.9821 15.5656 73.3333 14.7178 73.3333 13.8337C73.3333 12.9496 72.9821 12.1018 72.357 11.4767C71.7319 10.8516 70.884 10.5004 70 10.5004H9.99996ZM6.66663 27.167C6.66663 26.283 7.01782 25.4351 7.64294 24.81C8.26806 24.1849 9.1159 23.8337 9.99996 23.8337H70C70.884 23.8337 71.7319 24.1849 72.357 24.81C72.9821 25.4351 73.3333 26.283 73.3333 27.167C73.3333 28.0511 72.9821 28.8989 72.357 29.5241C71.7319 30.1492 70.884 30.5004 70 30.5004H9.99996C9.1159 30.5004 8.26806 30.1492 7.64294 29.5241C7.01782 28.8989 6.66663 28.0511 6.66663 27.167ZM9.99996 37.167C9.1159 37.167 8.26806 37.5182 7.64294 38.1433C7.01782 38.7685 6.66663 39.6163 6.66663 40.5004C6.66663 41.3844 7.01782 42.2323 7.64294 42.8574C8.26806 43.4825 9.1159 43.8337 9.99996 43.8337H46.6666C47.5507 43.8337 48.3985 43.4825 49.0236 42.8574C49.6488 42.2323 50 41.3844 50 40.5004C50 39.6163 49.6488 38.7685 49.0236 38.1433C48.3985 37.5182 47.5507 37.167 46.6666 37.167H9.99996ZM6.66663 53.8337C6.66663 52.9496 7.01782 52.1018 7.64294 51.4767C8.26806 50.8516 9.1159 50.5004 9.99996 50.5004H36.6666C37.5507 50.5004 38.3985 50.8516 39.0236 51.4767C39.6488 52.1018 40 52.9496 40 53.8337C40 54.7178 39.6488 55.5656 39.0236 56.1907C38.3985 56.8158 37.5507 57.167 36.6666 57.167H9.99996C9.1159 57.167 8.26806 56.8158 7.64294 56.1907C7.01782 55.5656 6.66663 54.7178 6.66663 53.8337ZM9.99996 63.8337C9.1159 63.8337 8.26806 64.1849 7.64294 64.81C7.01782 65.4351 6.66663 66.283 6.66663 67.167C6.66663 68.0511 7.01782 68.8989 7.64294 69.5241C8.26806 70.1492 9.1159 70.5004 9.99996 70.5004H36.6666C37.5507 70.5004 38.3985 70.1492 39.0236 69.5241C39.6488 68.8989 40 68.0511 40 67.167C40 66.283 39.6488 65.4351 39.0236 64.81C38.3985 64.1849 37.5507 63.8337 36.6666 63.8337H9.99996Z" fill="currentColor"/>
+    <svg width='80' height='81' viewBox='0 0 80 81' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path fillRule='evenodd' clipRule='evenodd' d='M61.6666 77.167C64.5999 77.167 67.3333 76.3337 69.6666 74.867L74.3333 79.5337C74.9747 80.0756 75.7971 80.3554 76.636 80.3171C77.4749 80.2789 78.2684 79.9255 78.8579 79.3275C79.4475 78.7295 79.7896 77.9311 79.816 77.0917C79.8423 76.2524 79.5508 75.4341 78.9999 74.8003L74.3666 70.1337C76.1329 67.3158 76.9127 63.9908 76.5833 60.6814C76.2539 57.372 74.834 54.2659 72.5469 51.8514C70.2598 49.437 67.2351 47.8511 63.9484 47.3431C60.6617 46.835 57.2993 47.4337 54.39 49.0449C51.4806 50.6561 49.1892 53.1886 47.876 56.2441C46.5627 59.2996 46.3022 62.7048 47.1353 65.9245C47.9684 69.1442 49.8479 71.9958 52.4783 74.0309C55.1087 76.0659 58.3408 77.1691 61.6666 77.167ZM61.6666 70.5003C63.8767 70.5003 65.9963 69.6224 67.5591 68.0596C69.1219 66.4968 69.9999 64.3771 69.9999 62.167C69.9999 59.9569 69.1219 57.8373 67.5591 56.2745C65.9963 54.7117 63.8767 53.8337 61.6666 53.8337C59.4564 53.8337 57.3368 54.7117 55.774 56.2745C54.2112 57.8373 53.3333 59.9569 53.3333 62.167C53.3333 64.3771 54.2112 66.4968 55.774 68.0596C57.3368 69.6224 59.4564 70.5003 61.6666 70.5003Z' fill='currentColor'/>
+      <path d='M9.99996 10.5004C9.1159 10.5004 8.26806 10.8516 7.64294 11.4767C7.01782 12.1018 6.66663 12.9496 6.66663 13.8337C6.66663 14.7178 7.01782 15.5656 7.64294 16.1907C8.26806 16.8158 9.1159 17.167 9.99996 17.167H70C70.884 17.167 71.7319 16.8158 72.357 16.1907C72.9821 15.5656 73.3333 14.7178 73.3333 13.8337C73.3333 12.9496 72.9821 12.1018 72.357 11.4767C71.7319 10.8516 70.884 10.5004 70 10.5004H9.99996ZM6.66663 27.167C6.66663 26.283 7.01782 25.4351 7.64294 24.81C8.26806 24.1849 9.1159 23.8337 9.99996 23.8337H70C70.884 23.8337 71.7319 24.1849 72.357 24.81C72.9821 25.4351 73.3333 26.283 73.3333 27.167C73.3333 28.0511 72.9821 28.8989 72.357 29.5241C71.7319 30.1492 70.884 30.5004 70 30.5004H9.99996C9.1159 30.5004 8.26806 30.1492 7.64294 29.5241C7.01782 28.8989 6.66663 28.0511 6.66663 27.167ZM9.99996 37.167C9.1159 37.167 8.26806 37.5182 7.64294 38.1433C7.01782 38.7685 6.66663 39.6163 6.66663 40.5004C6.66663 41.3844 7.01782 42.2323 7.64294 42.8574C8.26806 43.4825 9.1159 43.8337 9.99996 43.8337H46.6666C47.5507 43.8337 48.3985 43.4825 49.0236 42.8574C49.6488 42.2323 50 41.3844 50 40.5004C50 39.6163 49.6488 38.7685 49.0236 38.1433C48.3985 37.5182 47.5507 37.167 46.6666 37.167H9.99996ZM6.66663 53.8337C6.66663 52.9496 7.01782 52.1018 7.64294 51.4767C8.26806 50.8516 9.1159 50.5004 9.99996 50.5004H36.6666C37.5507 50.5004 38.3985 50.8516 39.0236 51.4767C39.6488 52.1018 40 52.9496 40 53.8337C40 54.7178 39.6488 55.5656 39.0236 56.1907C38.3985 56.8158 37.5507 57.167 36.6666 57.167H9.99996C9.1159 57.167 8.26806 56.8158 7.64294 56.1907C7.01782 55.5656 6.66663 54.7178 6.66663 53.8337ZM9.99996 63.8337C9.1159 63.8337 8.26806 64.1849 7.64294 64.81C7.01782 65.4351 6.66663 66.283 6.66663 67.167C6.66663 68.0511 7.01782 68.8989 7.64294 69.5241C8.26806 70.1492 9.1159 70.5004 9.99996 70.5004H36.6666C37.5507 70.5004 38.3985 70.1492 39.0236 69.5241C39.6488 68.8989 40 68.0511 40 67.167C40 66.283 39.6488 65.4351 39.0236 64.81C38.3985 64.1849 37.5507 63.8337 36.6666 63.8337H9.99996Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/CirclePlus/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/CirclePlus/index.jsx
index f539a3f2..df03a412 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/CirclePlus/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/CirclePlus/index.jsx
@@ -1,7 +1,7 @@
 export default function CirclePlusIcon({ className }) {
   return (
-    <svg width="80" height="80" viewBox="0 0 80 80" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M40 76.6668C49.7246 76.6668 59.0509 72.8037 65.9273 65.9274C72.8036 59.0511 76.6667 49.7248 76.6667 40.0002C76.6667 30.2756 72.8036 20.9492 65.9273 14.0729C59.0509 7.19658 49.7246 3.3335 40 3.3335C30.2754 3.3335 20.9491 7.19658 14.0728 14.0729C7.19643 20.9492 3.33334 30.2756 3.33334 40.0002C3.33334 49.7248 7.19643 59.0511 14.0728 65.9274C20.9491 72.8037 30.2754 76.6668 40 76.6668ZM40 20.0002C40.8841 20.0002 41.7319 20.3514 42.357 20.9765C42.9822 21.6016 43.3333 22.4494 43.3333 23.3335V36.6668H56.6667C57.5507 36.6668 58.3986 37.018 59.0237 37.6431C59.6488 38.2683 60 39.1161 60 40.0002C60 40.8842 59.6488 41.7321 59.0237 42.3572C58.3986 42.9823 57.5507 43.3335 56.6667 43.3335H43.3333V56.6668C43.3333 57.5509 42.9822 58.3987 42.357 59.0239C41.7319 59.649 40.8841 60.0002 40 60.0002C39.116 60.0002 38.2681 59.649 37.643 59.0239C37.0179 58.3987 36.6667 57.5509 36.6667 56.6668V43.3335H23.3333C22.4493 43.3335 21.6014 42.9823 20.9763 42.3572C20.3512 41.7321 20 40.8842 20 40.0002C20 39.1161 20.3512 38.2683 20.9763 37.6431C21.6014 37.018 22.4493 36.6668 23.3333 36.6668H36.6667V23.3335C36.6667 22.4494 37.0179 21.6016 37.643 20.9765C38.2681 20.3514 39.116 20.0002 40 20.0002Z" fill="currentColor"/>
+    <svg width='80' height='80' viewBox='0 0 80 80' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path fillRule='evenodd' clipRule='evenodd' d='M40 76.6668C49.7246 76.6668 59.0509 72.8037 65.9273 65.9274C72.8036 59.0511 76.6667 49.7248 76.6667 40.0002C76.6667 30.2756 72.8036 20.9492 65.9273 14.0729C59.0509 7.19658 49.7246 3.3335 40 3.3335C30.2754 3.3335 20.9491 7.19658 14.0728 14.0729C7.19643 20.9492 3.33334 30.2756 3.33334 40.0002C3.33334 49.7248 7.19643 59.0511 14.0728 65.9274C20.9491 72.8037 30.2754 76.6668 40 76.6668ZM40 20.0002C40.8841 20.0002 41.7319 20.3514 42.357 20.9765C42.9822 21.6016 43.3333 22.4494 43.3333 23.3335V36.6668H56.6667C57.5507 36.6668 58.3986 37.018 59.0237 37.6431C59.6488 38.2683 60 39.1161 60 40.0002C60 40.8842 59.6488 41.7321 59.0237 42.3572C58.3986 42.9823 57.5507 43.3335 56.6667 43.3335H43.3333V56.6668C43.3333 57.5509 42.9822 58.3987 42.357 59.0239C41.7319 59.649 40.8841 60.0002 40 60.0002C39.116 60.0002 38.2681 59.649 37.643 59.0239C37.0179 58.3987 36.6667 57.5509 36.6667 56.6668V43.3335H23.3333C22.4493 43.3335 21.6014 42.9823 20.9763 42.3572C20.3512 41.7321 20 40.8842 20 40.0002C20 39.1161 20.3512 38.2683 20.9763 37.6431C21.6014 37.018 22.4493 36.6668 23.3333 36.6668H36.6667V23.3335C36.6667 22.4494 37.0179 21.6016 37.643 20.9765C38.2681 20.3514 39.116 20.0002 40 20.0002Z' fill='currentColor'/>
     </svg>
 
   );
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/CommunityServerBoosted/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/CommunityServerBoosted/index.jsx
index d14c6fd1..f88111a5 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/CommunityServerBoosted/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/CommunityServerBoosted/index.jsx
@@ -1,12 +1,12 @@
 export default function CommunityServerBoostedIcon({ className }) {
   return (
-    <svg width="80" height="81" viewBox="0 0 80 81" fill="none" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M80 40.4999C80 44.4499 73.6 47.3999 72.4 50.9499C71.2 54.4999 74.6 60.9499 72.4 63.8999C70.2 66.8499 63.2 65.6499 60.1 67.8999C57 70.1499 56.15 77.0999 52.4 78.3499C48.65 79.5999 44.05 74.3499 40.05 74.3499C36.05 74.3499 31.3 79.3499 27.7 78.3499C24.1 77.3499 23.1 70.1499 20 67.8999C16.9 65.6499 10 66.9999 7.7 63.8999C5.4 60.7999 8.85 54.6999 7.7 50.9499C6.55 47.1999 0 44.4499 0 40.4999C0 36.5499 6.4 33.5999 7.6 30.0499C8.8 26.4999 5.4 20.0499 7.6 17.0999C9.8 14.1499 16.85 15.3499 20 13.0999C23.15 10.8499 23.9 3.89986 27.65 2.49986C31.4 1.09986 36 6.64986 40 6.64986C44 6.64986 48.75 1.64986 52.35 2.64986C55.95 3.64986 56.9 10.8499 60 13.0999C63.1 15.3499 70 13.9999 72.3 17.0999C74.6 20.1999 71.15 26.2999 72.3 30.0499C73.45 33.7999 80 36.5499 80 40.4999Z" fill="url(#paint0_linear_517_1895)"/>
-      <path d="M16.4435 31.2899L37.0065 15.4382C37.8646 14.7776 38.9172 14.4194 40.0001 14.4194C41.0831 14.4194 42.1356 14.7776 42.9938 15.4382L63.5813 31.2653C64.323 31.8348 64.8865 32.6044 65.2056 33.4833C65.5247 34.3623 65.586 35.3142 65.3823 36.2268C65.1786 37.1395 64.7185 37.9749 64.0559 38.6349C63.3934 39.2948 62.5562 39.7517 61.6427 39.9518L60.8575 40.1236L58.8454 60.2449C58.7237 61.4554 58.1568 62.5776 57.2545 63.3937C56.3522 64.2099 55.1789 64.6617 53.9623 64.6617H49.8154C49.1646 64.6617 48.5404 64.4032 48.0803 63.943C47.6201 63.4828 47.3616 62.8587 47.3616 62.2079V49.9389C47.3616 47.9865 46.586 46.1141 45.2054 44.7335C43.8249 43.353 41.9525 42.5774 40.0001 42.5774C38.0477 42.5774 36.1753 43.353 34.7948 44.7335C33.4143 46.1141 32.6387 47.9865 32.6387 49.9389V62.2079C32.6387 62.8587 32.3802 63.4828 31.92 63.943C31.4598 64.4032 30.8357 64.6617 30.1849 64.6617H26.0379C24.8213 64.6617 23.648 64.2099 22.7458 63.3937C21.8435 62.5776 21.2765 61.4554 21.1548 60.2449L19.1427 40.1236L18.3575 39.9518C17.4441 39.7517 16.6068 39.2948 15.9443 38.6349C15.2818 37.9749 14.8216 37.1395 14.6179 36.2268C14.4143 35.3142 14.4756 34.3623 14.7947 33.4833C15.1137 32.6044 15.6773 31.8348 16.419 31.2653L16.4435 31.2899Z" fill="white"/>
+    <svg width='80' height='81' viewBox='0 0 80 81' fill='none' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path fillRule='evenodd' clipRule='evenodd' d='M80 40.4999C80 44.4499 73.6 47.3999 72.4 50.9499C71.2 54.4999 74.6 60.9499 72.4 63.8999C70.2 66.8499 63.2 65.6499 60.1 67.8999C57 70.1499 56.15 77.0999 52.4 78.3499C48.65 79.5999 44.05 74.3499 40.05 74.3499C36.05 74.3499 31.3 79.3499 27.7 78.3499C24.1 77.3499 23.1 70.1499 20 67.8999C16.9 65.6499 10 66.9999 7.7 63.8999C5.4 60.7999 8.85 54.6999 7.7 50.9499C6.55 47.1999 0 44.4499 0 40.4999C0 36.5499 6.4 33.5999 7.6 30.0499C8.8 26.4999 5.4 20.0499 7.6 17.0999C9.8 14.1499 16.85 15.3499 20 13.0999C23.15 10.8499 23.9 3.89986 27.65 2.49986C31.4 1.09986 36 6.64986 40 6.64986C44 6.64986 48.75 1.64986 52.35 2.64986C55.95 3.64986 56.9 10.8499 60 13.0999C63.1 15.3499 70 13.9999 72.3 17.0999C74.6 20.1999 71.15 26.2999 72.3 30.0499C73.45 33.7999 80 36.5499 80 40.4999Z' fill='url(#paint0_linear_517_1895)'/>
+      <path d='M16.4435 31.2899L37.0065 15.4382C37.8646 14.7776 38.9172 14.4194 40.0001 14.4194C41.0831 14.4194 42.1356 14.7776 42.9938 15.4382L63.5813 31.2653C64.323 31.8348 64.8865 32.6044 65.2056 33.4833C65.5247 34.3623 65.586 35.3142 65.3823 36.2268C65.1786 37.1395 64.7185 37.9749 64.0559 38.6349C63.3934 39.2948 62.5562 39.7517 61.6427 39.9518L60.8575 40.1236L58.8454 60.2449C58.7237 61.4554 58.1568 62.5776 57.2545 63.3937C56.3522 64.2099 55.1789 64.6617 53.9623 64.6617H49.8154C49.1646 64.6617 48.5404 64.4032 48.0803 63.943C47.6201 63.4828 47.3616 62.8587 47.3616 62.2079V49.9389C47.3616 47.9865 46.586 46.1141 45.2054 44.7335C43.8249 43.353 41.9525 42.5774 40.0001 42.5774C38.0477 42.5774 36.1753 43.353 34.7948 44.7335C33.4143 46.1141 32.6387 47.9865 32.6387 49.9389V62.2079C32.6387 62.8587 32.3802 63.4828 31.92 63.943C31.4598 64.4032 30.8357 64.6617 30.1849 64.6617H26.0379C24.8213 64.6617 23.648 64.2099 22.7458 63.3937C21.8435 62.5776 21.2765 61.4554 21.1548 60.2449L19.1427 40.1236L18.3575 39.9518C17.4441 39.7517 16.6068 39.2948 15.9443 38.6349C15.2818 37.9749 14.8216 37.1395 14.6179 36.2268C14.4143 35.3142 14.4756 34.3623 14.7947 33.4833C15.1137 32.6044 15.6773 31.8348 16.419 31.2653L16.4435 31.2899Z' fill='white'/>
       <defs>
-        <linearGradient id="paint0_linear_517_1895" x1="20" y1="12.5371" x2="60" y2="67.5371" gradientUnits="userSpaceOnUse">
-          <stop stopColor="#C17CE1"/>
-          <stop offset="0.8125" stopColor="#E292AA"/>
+        <linearGradient id='paint0_linear_517_1895' x1='20' y1='12.5371' x2='60' y2='67.5371' gradientUnits='userSpaceOnUse'>
+          <stop stopColor='#C17CE1'/>
+          <stop offset='0.8125' stopColor='#E292AA'/>
         </linearGradient>
       </defs>
     </svg>
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/Emoji/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/Emoji/index.jsx
index fe1243a4..71cb9e40 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/Emoji/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/Emoji/index.jsx
@@ -1,7 +1,7 @@
 export default function EmojiIcon({ className }) {
   return (
-    <svg width="80" height="80" viewBox="0 0 80 80" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M40 76.6668C49.7246 76.6668 59.0509 72.8037 65.9273 65.9274C72.8036 59.0511 76.6667 49.7248 76.6667 40.0002C76.6667 30.2756 72.8036 20.9492 65.9273 14.0729C59.0509 7.19658 49.7246 3.3335 40 3.3335C30.2754 3.3335 20.9491 7.19658 14.0728 14.0729C7.19644 20.9492 3.33335 30.2756 3.33335 40.0002C3.33335 49.7248 7.19644 59.0511 14.0728 65.9274C20.9491 72.8037 30.2754 76.6668 40 76.6668ZM21.6667 43.3335C22.9928 43.3335 24.2645 42.8067 25.2022 41.869C26.1399 40.9314 26.6667 39.6596 26.6667 38.3335C26.6667 37.0074 26.1399 35.7356 25.2022 34.798C24.2645 33.8603 22.9928 33.3335 21.6667 33.3335C20.3406 33.3335 19.0688 33.8603 18.1312 34.798C17.1935 35.7356 16.6667 37.0074 16.6667 38.3335C16.6667 39.6596 17.1935 40.9314 18.1312 41.869C19.0688 42.8067 20.3406 43.3335 21.6667 43.3335ZM58.3334 43.3335C59.6594 43.3335 60.9312 42.8067 61.8689 41.869C62.8066 40.9314 63.3334 39.6596 63.3334 38.3335C63.3334 37.0074 62.8066 35.7356 61.8689 34.798C60.9312 33.8603 59.6594 33.3335 58.3334 33.3335C57.0073 33.3335 55.7355 33.8603 54.7978 34.798C53.8601 35.7356 53.3334 37.0074 53.3334 38.3335C53.3334 39.6596 53.8601 40.9314 54.7978 41.869C55.7355 42.8067 57.0073 43.3335 58.3334 43.3335ZM25.6667 47.2335C26.0298 46.9878 26.4379 46.8162 26.8674 46.7285C27.297 46.6407 27.7397 46.6386 28.1701 46.7222C28.6005 46.8058 29.0102 46.9735 29.3756 47.2157C29.7411 47.4578 30.0553 47.7697 30.3 48.1335C31.366 49.7285 32.8088 51.0361 34.5008 51.9404C36.1927 52.8447 38.0816 53.3178 40 53.3178C41.9185 53.3178 43.8073 52.8447 45.4993 51.9404C47.1912 51.0361 48.6341 49.7285 49.7 48.1335C50.1951 47.3997 50.9614 46.8927 51.8303 46.7239C52.6992 46.5551 53.5996 46.7384 54.3334 47.2335C55.0671 47.7286 55.5742 48.4949 55.7429 49.3638C55.9117 50.2327 55.7284 51.1331 55.2334 51.8668C53.5576 54.3694 51.291 56.4205 48.6341 57.8389C45.9773 59.2573 43.0118 59.9994 40 59.9994C36.9882 59.9994 34.0228 59.2573 31.3659 57.8389C28.709 56.4205 26.4425 54.3694 24.7667 51.8668C24.5158 51.5025 24.3399 51.0919 24.2493 50.6589C24.1587 50.226 24.1552 49.7793 24.2389 49.3449C24.3227 48.9106 24.4921 48.4972 24.7372 48.129C24.9823 47.7608 25.2983 47.445 25.6667 47.2002V47.2335Z" fill="currentColor"/>
+    <svg width='80' height='80' viewBox='0 0 80 80' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path fillRule='evenodd' clipRule='evenodd' d='M40 76.6668C49.7246 76.6668 59.0509 72.8037 65.9273 65.9274C72.8036 59.0511 76.6667 49.7248 76.6667 40.0002C76.6667 30.2756 72.8036 20.9492 65.9273 14.0729C59.0509 7.19658 49.7246 3.3335 40 3.3335C30.2754 3.3335 20.9491 7.19658 14.0728 14.0729C7.19644 20.9492 3.33335 30.2756 3.33335 40.0002C3.33335 49.7248 7.19644 59.0511 14.0728 65.9274C20.9491 72.8037 30.2754 76.6668 40 76.6668ZM21.6667 43.3335C22.9928 43.3335 24.2645 42.8067 25.2022 41.869C26.1399 40.9314 26.6667 39.6596 26.6667 38.3335C26.6667 37.0074 26.1399 35.7356 25.2022 34.798C24.2645 33.8603 22.9928 33.3335 21.6667 33.3335C20.3406 33.3335 19.0688 33.8603 18.1312 34.798C17.1935 35.7356 16.6667 37.0074 16.6667 38.3335C16.6667 39.6596 17.1935 40.9314 18.1312 41.869C19.0688 42.8067 20.3406 43.3335 21.6667 43.3335ZM58.3334 43.3335C59.6594 43.3335 60.9312 42.8067 61.8689 41.869C62.8066 40.9314 63.3334 39.6596 63.3334 38.3335C63.3334 37.0074 62.8066 35.7356 61.8689 34.798C60.9312 33.8603 59.6594 33.3335 58.3334 33.3335C57.0073 33.3335 55.7355 33.8603 54.7978 34.798C53.8601 35.7356 53.3334 37.0074 53.3334 38.3335C53.3334 39.6596 53.8601 40.9314 54.7978 41.869C55.7355 42.8067 57.0073 43.3335 58.3334 43.3335ZM25.6667 47.2335C26.0298 46.9878 26.4379 46.8162 26.8674 46.7285C27.297 46.6407 27.7397 46.6386 28.1701 46.7222C28.6005 46.8058 29.0102 46.9735 29.3756 47.2157C29.7411 47.4578 30.0553 47.7697 30.3 48.1335C31.366 49.7285 32.8088 51.0361 34.5008 51.9404C36.1927 52.8447 38.0816 53.3178 40 53.3178C41.9185 53.3178 43.8073 52.8447 45.4993 51.9404C47.1912 51.0361 48.6341 49.7285 49.7 48.1335C50.1951 47.3997 50.9614 46.8927 51.8303 46.7239C52.6992 46.5551 53.5996 46.7384 54.3334 47.2335C55.0671 47.7286 55.5742 48.4949 55.7429 49.3638C55.9117 50.2327 55.7284 51.1331 55.2334 51.8668C53.5576 54.3694 51.291 56.4205 48.6341 57.8389C45.9773 59.2573 43.0118 59.9994 40 59.9994C36.9882 59.9994 34.0228 59.2573 31.3659 57.8389C28.709 56.4205 26.4425 54.3694 24.7667 51.8668C24.5158 51.5025 24.3399 51.0919 24.2493 50.6589C24.1587 50.226 24.1552 49.7793 24.2389 49.3449C24.3227 48.9106 24.4921 48.4972 24.7372 48.129C24.9823 47.7608 25.2983 47.445 25.6667 47.2002V47.2335Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/Events/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/Events/index.jsx
index c67b83d8..d3e2e771 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/Events/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/Events/index.jsx
@@ -1,8 +1,8 @@
 export default function EventsIcon({ className }) {
   return (
-    <svg width="80" height="81" viewBox="0 0 80 81" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path d="M23.3334 3.83362C24.2174 3.83362 25.0653 4.18481 25.6904 4.80993C26.3155 5.43505 26.6667 6.2829 26.6667 7.16695V9.66695C26.6667 10.1336 27.0334 10.5003 27.5 10.5003H52.5C52.9667 10.5003 53.3334 10.1336 53.3334 9.66695V7.16695C53.3334 6.2829 53.6845 5.43505 54.3097 4.80993C54.9348 4.18481 55.7826 3.83362 56.6667 3.83362C57.5507 3.83362 58.3986 4.18481 59.0237 4.80993C59.6488 5.43505 60 6.2829 60 7.16695V9.66695C60 10.1336 60.3667 10.5003 60.8334 10.5003H63.3334C65.9855 10.5003 68.5291 11.5539 70.4044 13.4292C72.2798 15.3046 73.3334 17.8481 73.3334 20.5003C73.3334 21.3843 72.9822 22.2322 72.357 22.8573C71.7319 23.4824 70.8841 23.8336 70 23.8336H10C9.11597 23.8336 8.26812 23.4824 7.643 22.8573C7.01788 22.2322 6.66669 21.3843 6.66669 20.5003C6.66669 17.8481 7.72026 15.3046 9.59562 13.4292C11.471 11.5539 14.0145 10.5003 16.6667 10.5003H19.1667C19.6334 10.5003 20 10.1336 20 9.66695V7.16695C20 6.2829 20.3512 5.43505 20.9763 4.80993C21.6015 4.18481 22.4493 3.83362 23.3334 3.83362Z" fill="currentColor"/>
-      <path fillRule="evenodd" clipRule="evenodd" d="M6.66669 33.8337C6.66669 32.9496 7.01788 32.1018 7.643 31.4767C8.26812 30.8516 9.11597 30.5004 10 30.5004H70C70.8841 30.5004 71.7319 30.8516 72.357 31.4767C72.9822 32.1018 73.3334 32.9496 73.3334 33.8337V63.8337C73.3334 66.4859 72.2798 69.0294 70.4044 70.9048C68.5291 72.7801 65.9855 73.8337 63.3334 73.8337H16.6667C14.0145 73.8337 11.471 72.7801 9.59562 70.9048C7.72026 69.0294 6.66669 66.4859 6.66669 63.8337V33.8337ZM18.3334 40.5004C17.8913 40.5004 17.4674 40.676 17.1548 40.9885C16.8423 41.3011 16.6667 41.725 16.6667 42.167V52.167C16.6667 53.1004 17.4 53.8337 18.3334 53.8337H28.3334C28.7754 53.8337 29.1993 53.6581 29.5119 53.3455C29.8244 53.033 30 52.6091 30 52.167V42.167C30 41.725 29.8244 41.3011 29.5119 40.9885C29.1993 40.676 28.7754 40.5004 28.3334 40.5004H18.3334Z" fill="currentColor"/>
+    <svg width='80' height='81' viewBox='0 0 80 81' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path d='M23.3334 3.83362C24.2174 3.83362 25.0653 4.18481 25.6904 4.80993C26.3155 5.43505 26.6667 6.2829 26.6667 7.16695V9.66695C26.6667 10.1336 27.0334 10.5003 27.5 10.5003H52.5C52.9667 10.5003 53.3334 10.1336 53.3334 9.66695V7.16695C53.3334 6.2829 53.6845 5.43505 54.3097 4.80993C54.9348 4.18481 55.7826 3.83362 56.6667 3.83362C57.5507 3.83362 58.3986 4.18481 59.0237 4.80993C59.6488 5.43505 60 6.2829 60 7.16695V9.66695C60 10.1336 60.3667 10.5003 60.8334 10.5003H63.3334C65.9855 10.5003 68.5291 11.5539 70.4044 13.4292C72.2798 15.3046 73.3334 17.8481 73.3334 20.5003C73.3334 21.3843 72.9822 22.2322 72.357 22.8573C71.7319 23.4824 70.8841 23.8336 70 23.8336H10C9.11597 23.8336 8.26812 23.4824 7.643 22.8573C7.01788 22.2322 6.66669 21.3843 6.66669 20.5003C6.66669 17.8481 7.72026 15.3046 9.59562 13.4292C11.471 11.5539 14.0145 10.5003 16.6667 10.5003H19.1667C19.6334 10.5003 20 10.1336 20 9.66695V7.16695C20 6.2829 20.3512 5.43505 20.9763 4.80993C21.6015 4.18481 22.4493 3.83362 23.3334 3.83362Z' fill='currentColor'/>
+      <path fillRule='evenodd' clipRule='evenodd' d='M6.66669 33.8337C6.66669 32.9496 7.01788 32.1018 7.643 31.4767C8.26812 30.8516 9.11597 30.5004 10 30.5004H70C70.8841 30.5004 71.7319 30.8516 72.357 31.4767C72.9822 32.1018 73.3334 32.9496 73.3334 33.8337V63.8337C73.3334 66.4859 72.2798 69.0294 70.4044 70.9048C68.5291 72.7801 65.9855 73.8337 63.3334 73.8337H16.6667C14.0145 73.8337 11.471 72.7801 9.59562 70.9048C7.72026 69.0294 6.66669 66.4859 6.66669 63.8337V33.8337ZM18.3334 40.5004C17.8913 40.5004 17.4674 40.676 17.1548 40.9885C16.8423 41.3011 16.6667 41.725 16.6667 42.167V52.167C16.6667 53.1004 17.4 53.8337 18.3334 53.8337H28.3334C28.7754 53.8337 29.1993 53.6581 29.5119 53.3455C29.8244 53.033 30 52.6091 30 52.167V42.167C30 41.725 29.8244 41.3011 29.5119 40.9885C29.1993 40.676 28.7754 40.5004 28.3334 40.5004H18.3334Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/Gif/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/Gif/index.jsx
index b5c4641d..30d2dd77 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/Gif/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/Gif/index.jsx
@@ -1,7 +1,7 @@
 export default function GifIcon({ className }) {
   return (
-    <svg width="80" height="80" viewBox="0 0 80 80" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M16.6666 6.66681C14.0145 6.66681 11.4709 7.72038 9.59557 9.59574C7.72021 11.4711 6.66664 14.0146 6.66664 16.6668V63.3335C6.66664 65.9856 7.72021 68.5292 9.59557 70.4045C11.4709 72.2799 14.0145 73.3335 16.6666 73.3335H63.3333C65.9855 73.3335 68.529 72.2799 70.4044 70.4045C72.2797 68.5292 73.3333 65.9856 73.3333 63.3335V16.6668C73.3333 14.0146 72.2797 11.4711 70.4044 9.59574C68.529 7.72038 65.9855 6.66681 63.3333 6.66681H16.6666ZM23.9333 52.9001C21.9656 52.9316 20.0352 52.3618 18.4 51.2668C16.7583 50.1465 15.4646 48.5872 14.6666 46.7668C13.7437 44.6325 13.289 42.3251 13.3333 40.0001C13.3333 37.5001 13.8 35.2668 14.7333 33.3335C15.7 31.3668 17.0666 29.8668 18.8666 28.7668C20.8376 27.6212 23.0876 27.0443 25.3666 27.1001C27.5 27.1001 29.4 27.5668 31.1 28.4335C32.7666 29.3668 34.0666 30.6668 34.9333 32.3001L30.8666 35.2335C30.3861 34.1955 29.6126 33.3207 28.6413 32.7167C27.6701 32.1126 26.5434 31.8056 25.4 31.8335C23.2 31.8335 21.5 32.5668 20.3333 34.0001C19.0566 35.7299 18.431 37.8545 18.5666 40.0001C18.5666 42.6001 19.1666 44.6335 20.3333 46.0335C21.5 47.4335 23.2 48.1668 25.4 48.1668C26.4 48.1668 27.3 47.9668 28.1 47.6335C28.9333 47.2335 29.6 46.7335 30.0333 46.0668V42.9668H24.3333V38.3001H35.1333V52.4001H30.9L30.2333 50.0335C28.8 51.9335 26.7 52.9001 23.9333 52.9001ZM45.0666 52.4001H39.8333V27.6001H45.0666V52.4001ZM50.1 52.4001H55.3333V42.9668H64.5333V38.2335H55.3333V32.3335H66.6666V27.6001H50.1V52.4001Z" fill="currentColor"/>
+    <svg width='80' height='80' viewBox='0 0 80 80' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path fillRule='evenodd' clipRule='evenodd' d='M16.6666 6.66681C14.0145 6.66681 11.4709 7.72038 9.59557 9.59574C7.72021 11.4711 6.66664 14.0146 6.66664 16.6668V63.3335C6.66664 65.9856 7.72021 68.5292 9.59557 70.4045C11.4709 72.2799 14.0145 73.3335 16.6666 73.3335H63.3333C65.9855 73.3335 68.529 72.2799 70.4044 70.4045C72.2797 68.5292 73.3333 65.9856 73.3333 63.3335V16.6668C73.3333 14.0146 72.2797 11.4711 70.4044 9.59574C68.529 7.72038 65.9855 6.66681 63.3333 6.66681H16.6666ZM23.9333 52.9001C21.9656 52.9316 20.0352 52.3618 18.4 51.2668C16.7583 50.1465 15.4646 48.5872 14.6666 46.7668C13.7437 44.6325 13.289 42.3251 13.3333 40.0001C13.3333 37.5001 13.8 35.2668 14.7333 33.3335C15.7 31.3668 17.0666 29.8668 18.8666 28.7668C20.8376 27.6212 23.0876 27.0443 25.3666 27.1001C27.5 27.1001 29.4 27.5668 31.1 28.4335C32.7666 29.3668 34.0666 30.6668 34.9333 32.3001L30.8666 35.2335C30.3861 34.1955 29.6126 33.3207 28.6413 32.7167C27.6701 32.1126 26.5434 31.8056 25.4 31.8335C23.2 31.8335 21.5 32.5668 20.3333 34.0001C19.0566 35.7299 18.431 37.8545 18.5666 40.0001C18.5666 42.6001 19.1666 44.6335 20.3333 46.0335C21.5 47.4335 23.2 48.1668 25.4 48.1668C26.4 48.1668 27.3 47.9668 28.1 47.6335C28.9333 47.2335 29.6 46.7335 30.0333 46.0668V42.9668H24.3333V38.3001H35.1333V52.4001H30.9L30.2333 50.0335C28.8 51.9335 26.7 52.9001 23.9333 52.9001ZM45.0666 52.4001H39.8333V27.6001H45.0666V52.4001ZM50.1 52.4001H55.3333V42.9668H64.5333V38.2335H55.3333V32.3335H66.6666V27.6001H50.1V52.4001Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/Help/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/Help/index.jsx
index f1d0b154..d13ce572 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/Help/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/Help/index.jsx
@@ -1,7 +1,7 @@
 export default function HelpIcon({ className }) {
   return (
-    <svg width="80" height="80" viewBox="0 0 80 80" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M39.9999 76.6665C49.7245 76.6665 59.0508 72.8034 65.9272 65.9271C72.8035 59.0508 76.6666 49.7244 76.6666 39.9998C76.6666 30.2752 72.8035 20.9489 65.9272 14.0726C59.0508 7.19626 49.7245 3.33317 39.9999 3.33317C30.2753 3.33317 20.949 7.19626 14.0727 14.0726C7.19634 20.9489 3.33325 30.2752 3.33325 39.9998C3.33325 49.7244 7.19634 59.0508 14.0727 65.9271C20.949 72.8034 30.2753 76.6665 39.9999 76.6665ZM39.0666 23.3332C35.7999 23.3332 33.0333 24.8998 31.4999 27.1332C31.2551 27.5002 30.9399 27.815 30.5725 28.0592C30.2051 28.3035 29.7929 28.4724 29.3598 28.5562C28.9266 28.64 28.4812 28.6369 28.0492 28.5472C27.6172 28.4576 27.2074 28.283 26.8434 28.0337C26.4794 27.7844 26.1685 27.4654 25.9287 27.095C25.689 26.7247 25.5251 26.3105 25.4467 25.8763C25.3682 25.4422 25.3767 24.9968 25.4717 24.5659C25.5666 24.1351 25.7462 23.7274 25.9999 23.3665C27.4709 21.2734 29.4292 19.5697 31.7056 18.4025C33.9821 17.2352 36.5084 16.6394 39.0666 16.6665C47.3999 16.6665 54.5666 22.9332 54.5666 31.2665C54.5666 38.2665 49.4333 43.8332 42.8333 45.3998L43.2999 48.7332C43.3812 49.5898 43.1281 50.4446 42.5935 51.1188C42.059 51.7931 41.2844 52.2345 40.4319 52.3508C39.5793 52.467 38.7148 52.2491 38.0193 51.7426C37.3237 51.2361 36.851 50.4802 36.6999 49.6332L35.7666 42.9665C35.6998 42.4941 35.7352 42.0128 35.8704 41.5552C36.0056 41.0977 36.2375 40.6745 36.5503 40.3142C36.8632 39.954 37.2497 39.6651 37.6838 39.4671C38.1179 39.2691 38.5895 39.1666 39.0666 39.1665C44.1999 39.1665 47.8999 35.3665 47.8999 31.2332C47.8999 27.1332 44.2333 23.3332 39.0666 23.3332ZM43.3333 59.5998C43.3825 60.122 43.3222 60.6487 43.1562 61.1462C42.9901 61.6437 42.722 62.1011 42.369 62.489C42.016 62.8769 41.5859 63.1868 41.1062 63.3989C40.6265 63.6109 40.1077 63.7205 39.5833 63.7205C39.0588 63.7205 38.5401 63.6109 38.0603 63.3989C37.5806 63.1868 37.1505 62.8769 36.7975 62.489C36.4445 62.1011 36.1764 61.6437 36.0103 61.1462C35.8443 60.6487 35.784 60.122 35.8333 59.5998C35.9214 58.6663 36.3545 57.7992 37.048 57.168C37.7416 56.5369 38.6455 56.1871 39.5833 56.1871C40.521 56.1871 41.4249 56.5369 42.1185 57.168C42.812 57.7992 43.2451 58.6663 43.3333 59.5998Z" fill="currentColor"/>
+    <svg width='80' height='80' viewBox='0 0 80 80' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path fillRule='evenodd' clipRule='evenodd' d='M39.9999 76.6665C49.7245 76.6665 59.0508 72.8034 65.9272 65.9271C72.8035 59.0508 76.6666 49.7244 76.6666 39.9998C76.6666 30.2752 72.8035 20.9489 65.9272 14.0726C59.0508 7.19626 49.7245 3.33317 39.9999 3.33317C30.2753 3.33317 20.949 7.19626 14.0727 14.0726C7.19634 20.9489 3.33325 30.2752 3.33325 39.9998C3.33325 49.7244 7.19634 59.0508 14.0727 65.9271C20.949 72.8034 30.2753 76.6665 39.9999 76.6665ZM39.0666 23.3332C35.7999 23.3332 33.0333 24.8998 31.4999 27.1332C31.2551 27.5002 30.9399 27.815 30.5725 28.0592C30.2051 28.3035 29.7929 28.4724 29.3598 28.5562C28.9266 28.64 28.4812 28.6369 28.0492 28.5472C27.6172 28.4576 27.2074 28.283 26.8434 28.0337C26.4794 27.7844 26.1685 27.4654 25.9287 27.095C25.689 26.7247 25.5251 26.3105 25.4467 25.8763C25.3682 25.4422 25.3767 24.9968 25.4717 24.5659C25.5666 24.1351 25.7462 23.7274 25.9999 23.3665C27.4709 21.2734 29.4292 19.5697 31.7056 18.4025C33.9821 17.2352 36.5084 16.6394 39.0666 16.6665C47.3999 16.6665 54.5666 22.9332 54.5666 31.2665C54.5666 38.2665 49.4333 43.8332 42.8333 45.3998L43.2999 48.7332C43.3812 49.5898 43.1281 50.4446 42.5935 51.1188C42.059 51.7931 41.2844 52.2345 40.4319 52.3508C39.5793 52.467 38.7148 52.2491 38.0193 51.7426C37.3237 51.2361 36.851 50.4802 36.6999 49.6332L35.7666 42.9665C35.6998 42.4941 35.7352 42.0128 35.8704 41.5552C36.0056 41.0977 36.2375 40.6745 36.5503 40.3142C36.8632 39.954 37.2497 39.6651 37.6838 39.4671C38.1179 39.2691 38.5895 39.1666 39.0666 39.1665C44.1999 39.1665 47.8999 35.3665 47.8999 31.2332C47.8999 27.1332 44.2333 23.3332 39.0666 23.3332ZM43.3333 59.5998C43.3825 60.122 43.3222 60.6487 43.1562 61.1462C42.9901 61.6437 42.722 62.1011 42.369 62.489C42.016 62.8769 41.5859 63.1868 41.1062 63.3989C40.6265 63.6109 40.1077 63.7205 39.5833 63.7205C39.0588 63.7205 38.5401 63.6109 38.0603 63.3989C37.5806 63.1868 37.1505 62.8769 36.7975 62.489C36.4445 62.1011 36.1764 61.6437 36.0103 61.1462C35.8443 60.6487 35.784 60.122 35.8333 59.5998C35.9214 58.6663 36.3545 57.7992 37.048 57.168C37.7416 56.5369 38.6455 56.1871 39.5833 56.1871C40.521 56.1871 41.4249 56.5369 42.1185 57.168C42.812 57.7992 43.2451 58.6663 43.3333 59.5998Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/Home/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/Home/index.jsx
index f293958b..860928d7 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/Home/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/Home/index.jsx
@@ -1,7 +1,7 @@
 export default function HomeIcon({ className }) {
   return (
-    <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" className={className} viewBox="0 0 24 24">
-      <path fill="currentColor" d="m2.4 8.4 8.38-6.46a2 2 0 0 1 2.44 0l8.39 6.45a2 2 0 0 1-.79 3.54l-.32.07-.82 8.2a2 2 0 0 1-1.99 1.8H16a1 1 0 0 1-1-1v-5a3 3 0 0 0-6 0v5a1 1 0 0 1-1 1H6.31a2 2 0 0 1-1.99-1.8L3.5 12l-.32-.07a2 2 0 0 1-.79-3.54Z"></path>
+    <svg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' className={className} viewBox='0 0 24 24'>
+      <path fill='currentColor' d='m2.4 8.4 8.38-6.46a2 2 0 0 1 2.44 0l8.39 6.45a2 2 0 0 1-.79 3.54l-.32.07-.82 8.2a2 2 0 0 1-1.99 1.8H16a1 1 0 0 1-1-1v-5a3 3 0 0 0-6 0v5a1 1 0 0 1-1 1H6.31a2 2 0 0 1-1.99-1.8L3.5 12l-.32-.07a2 2 0 0 1-.79-3.54Z'></path>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/Inbox/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/Inbox/index.jsx
index 4a1b80cc..a102c0cb 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/Inbox/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/Inbox/index.jsx
@@ -1,7 +1,7 @@
 export default function InboxIcon({ className }) {
   return (
-    <svg width="80" height="80" viewBox="0 0 80 80" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M16.6663 6.6665C14.0141 6.6665 11.4706 7.72007 9.59519 9.59544C7.71983 11.4708 6.66626 14.0143 6.66626 16.6665V63.3332C6.66626 65.9853 7.71983 68.5289 9.59519 70.4042C11.4706 72.2796 14.0141 73.3332 16.6663 73.3332H63.3329C65.9851 73.3332 68.5286 72.2796 70.404 70.4042C72.2794 68.5289 73.3329 65.9853 73.3329 63.3332V16.6665C73.3329 14.0143 72.2794 11.4708 70.404 9.59544C68.5286 7.72007 65.9851 6.6665 63.3329 6.6665H16.6663ZM13.3329 18.3332C13.3329 15.5665 15.5663 13.3332 18.3329 13.3332H61.6663C64.4329 13.3332 66.6663 15.5665 66.6663 18.3332V38.3332C66.6663 41.0998 64.4329 43.3332 61.6663 43.3332H52.8329C51.1663 43.3332 49.9996 44.9998 49.9996 46.6665C49.9996 49.3187 48.946 51.8622 47.0707 53.7376C45.1953 55.6129 42.6518 56.6665 39.9996 56.6665C37.3474 56.6665 34.8039 55.6129 32.9285 53.7376C31.0532 51.8622 29.9996 49.3187 29.9996 46.6665C29.9996 44.9998 28.8329 43.3332 27.1663 43.3332H18.3329C17.0068 43.3332 15.7351 42.8064 14.7974 41.8687C13.8597 40.931 13.3329 39.6593 13.3329 38.3332V18.3332Z" fill="currentColor"/>
+    <svg width='80' height='80' viewBox='0 0 80 80' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path fillRule='evenodd' clipRule='evenodd' d='M16.6663 6.6665C14.0141 6.6665 11.4706 7.72007 9.59519 9.59544C7.71983 11.4708 6.66626 14.0143 6.66626 16.6665V63.3332C6.66626 65.9853 7.71983 68.5289 9.59519 70.4042C11.4706 72.2796 14.0141 73.3332 16.6663 73.3332H63.3329C65.9851 73.3332 68.5286 72.2796 70.404 70.4042C72.2794 68.5289 73.3329 65.9853 73.3329 63.3332V16.6665C73.3329 14.0143 72.2794 11.4708 70.404 9.59544C68.5286 7.72007 65.9851 6.6665 63.3329 6.6665H16.6663ZM13.3329 18.3332C13.3329 15.5665 15.5663 13.3332 18.3329 13.3332H61.6663C64.4329 13.3332 66.6663 15.5665 66.6663 18.3332V38.3332C66.6663 41.0998 64.4329 43.3332 61.6663 43.3332H52.8329C51.1663 43.3332 49.9996 44.9998 49.9996 46.6665C49.9996 49.3187 48.946 51.8622 47.0707 53.7376C45.1953 55.6129 42.6518 56.6665 39.9996 56.6665C37.3474 56.6665 34.8039 55.6129 32.9285 53.7376C31.0532 51.8622 29.9996 49.3187 29.9996 46.6665C29.9996 44.9998 28.8329 43.3332 27.1663 43.3332H18.3329C17.0068 43.3332 15.7351 42.8064 14.7974 41.8687C13.8597 40.931 13.3329 39.6593 13.3329 38.3332V18.3332Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/MemberList/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/MemberList/index.jsx
index aacad12a..b59613e7 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/MemberList/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/MemberList/index.jsx
@@ -1,7 +1,7 @@
 export default function MemberListIcon({ className }) {
   return (
-    <svg width="80" height="80" viewBox="0 0 80 80" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path d="M48.3333 26.6668C50.1212 26.669 51.877 26.1919 53.4178 25.285C54.9586 24.3782 56.2281 23.0749 57.0942 21.5108C57.9602 19.9466 58.3911 18.179 58.3419 16.3918C58.2927 14.6046 57.7653 12.8633 56.8146 11.3491C55.8638 9.83501 54.5246 8.60346 52.9362 7.78273C51.3479 6.962 49.5685 6.58211 47.7835 6.68263C45.9984 6.78314 44.273 7.36038 42.7868 8.35423C41.3006 9.34807 40.1081 10.7222 39.3333 12.3335C38.6667 13.6668 39.5333 15.2001 40.8 16.0668C44.4198 18.4338 46.9777 22.1153 47.9333 26.3335C47.9667 26.5335 48.1333 26.6668 48.3333 26.6668ZM61.4667 57.5668C61.9667 59.0001 63.2667 60.0001 64.8 60.0001H68.3333C71.1 60.0001 73.3333 57.7668 73.3333 55.0001C73.3309 48.9489 71.1337 43.1039 67.1493 38.5494C63.165 33.995 57.6639 31.0403 51.6667 30.2335C49.8333 29.9668 48.3667 31.5001 48 33.3001C47.8 34.3001 47.5 35.3001 47.1333 36.2001C46.3667 38.1335 46.9667 40.5335 48.7 41.6335C54.5929 45.3951 59.0803 50.9956 61.4667 57.5668ZM41.6667 30.0001C41.6667 31.3134 41.408 32.6137 40.9055 33.827C40.4029 35.0402 39.6663 36.1426 38.7377 37.0712C37.8092 37.9998 36.7068 38.7364 35.4935 39.2389C34.2802 39.7415 32.9799 40.0001 31.6667 40.0001C30.3535 40.0001 29.0531 39.7415 27.8398 39.2389C26.6266 38.7364 25.5242 37.9998 24.5956 37.0712C23.667 36.1426 22.9304 35.0402 22.4279 33.827C21.9253 32.6137 21.6667 31.3134 21.6667 30.0001C21.6667 27.348 22.7202 24.8044 24.5956 22.9291C26.471 21.0537 29.0145 20.0001 31.6667 20.0001C34.3188 20.0001 36.8624 21.0537 38.7377 22.9291C40.6131 24.8044 41.6667 27.348 41.6667 30.0001ZM6.66667 68.3335C6.66667 61.7031 9.30059 55.3442 13.989 50.6558C18.6774 45.9674 25.0363 43.3335 31.6667 43.3335C38.2971 43.3335 44.6559 45.9674 49.3443 50.6558C54.0327 55.3442 56.6667 61.7031 56.6667 68.3335C56.6667 71.1001 54.4333 73.3335 51.6667 73.3335C51.5107 73.3366 51.3586 73.285 51.2368 73.1875C51.115 73.0901 51.0312 72.953 51 72.8001C50.3333 69.6001 49.1333 66.5668 48.0667 64.3335C47.7333 63.5668 46.6667 63.8335 46.6667 64.6668V71.6668C46.6667 72.1088 46.4911 72.5328 46.1785 72.8453C45.866 73.1579 45.442 73.3335 45 73.3335H18.3333C17.8913 73.3335 17.4674 73.1579 17.1548 72.8453C16.8423 72.5328 16.6667 72.1088 16.6667 71.6668V64.6668C16.6667 63.8335 15.6333 63.5668 15.2667 64.3335C14.2 66.5668 13.0333 69.6001 12.3333 72.8001C12.3022 72.953 12.2184 73.0901 12.0966 73.1875C11.9748 73.285 11.8226 73.3366 11.6667 73.3335C10.3406 73.3335 9.06882 72.8067 8.13114 71.869C7.19346 70.9313 6.66667 69.6596 6.66667 68.3335Z" fill="currentColor"/>
+    <svg width='80' height='80' viewBox='0 0 80 80' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path d='M48.3333 26.6668C50.1212 26.669 51.877 26.1919 53.4178 25.285C54.9586 24.3782 56.2281 23.0749 57.0942 21.5108C57.9602 19.9466 58.3911 18.179 58.3419 16.3918C58.2927 14.6046 57.7653 12.8633 56.8146 11.3491C55.8638 9.83501 54.5246 8.60346 52.9362 7.78273C51.3479 6.962 49.5685 6.58211 47.7835 6.68263C45.9984 6.78314 44.273 7.36038 42.7868 8.35423C41.3006 9.34807 40.1081 10.7222 39.3333 12.3335C38.6667 13.6668 39.5333 15.2001 40.8 16.0668C44.4198 18.4338 46.9777 22.1153 47.9333 26.3335C47.9667 26.5335 48.1333 26.6668 48.3333 26.6668ZM61.4667 57.5668C61.9667 59.0001 63.2667 60.0001 64.8 60.0001H68.3333C71.1 60.0001 73.3333 57.7668 73.3333 55.0001C73.3309 48.9489 71.1337 43.1039 67.1493 38.5494C63.165 33.995 57.6639 31.0403 51.6667 30.2335C49.8333 29.9668 48.3667 31.5001 48 33.3001C47.8 34.3001 47.5 35.3001 47.1333 36.2001C46.3667 38.1335 46.9667 40.5335 48.7 41.6335C54.5929 45.3951 59.0803 50.9956 61.4667 57.5668ZM41.6667 30.0001C41.6667 31.3134 41.408 32.6137 40.9055 33.827C40.4029 35.0402 39.6663 36.1426 38.7377 37.0712C37.8092 37.9998 36.7068 38.7364 35.4935 39.2389C34.2802 39.7415 32.9799 40.0001 31.6667 40.0001C30.3535 40.0001 29.0531 39.7415 27.8398 39.2389C26.6266 38.7364 25.5242 37.9998 24.5956 37.0712C23.667 36.1426 22.9304 35.0402 22.4279 33.827C21.9253 32.6137 21.6667 31.3134 21.6667 30.0001C21.6667 27.348 22.7202 24.8044 24.5956 22.9291C26.471 21.0537 29.0145 20.0001 31.6667 20.0001C34.3188 20.0001 36.8624 21.0537 38.7377 22.9291C40.6131 24.8044 41.6667 27.348 41.6667 30.0001ZM6.66667 68.3335C6.66667 61.7031 9.30059 55.3442 13.989 50.6558C18.6774 45.9674 25.0363 43.3335 31.6667 43.3335C38.2971 43.3335 44.6559 45.9674 49.3443 50.6558C54.0327 55.3442 56.6667 61.7031 56.6667 68.3335C56.6667 71.1001 54.4333 73.3335 51.6667 73.3335C51.5107 73.3366 51.3586 73.285 51.2368 73.1875C51.115 73.0901 51.0312 72.953 51 72.8001C50.3333 69.6001 49.1333 66.5668 48.0667 64.3335C47.7333 63.5668 46.6667 63.8335 46.6667 64.6668V71.6668C46.6667 72.1088 46.4911 72.5328 46.1785 72.8453C45.866 73.1579 45.442 73.3335 45 73.3335H18.3333C17.8913 73.3335 17.4674 73.1579 17.1548 72.8453C16.8423 72.5328 16.6667 72.1088 16.6667 71.6668V64.6668C16.6667 63.8335 15.6333 63.5668 15.2667 64.3335C14.2 66.5668 13.0333 69.6001 12.3333 72.8001C12.3022 72.953 12.2184 73.0901 12.0966 73.1875C11.9748 73.285 11.8226 73.3366 11.6667 73.3335C10.3406 73.3335 9.06882 72.8067 8.13114 71.869C7.19346 70.9313 6.66667 69.6596 6.66667 68.3335Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/Nitro/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/Nitro/index.jsx
index eb71506d..ccd5dd74 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/Nitro/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/Nitro/index.jsx
@@ -1,9 +1,9 @@
 export default function NitroIcon({ className }) {
   return (
-    <svg width="80" height="80" viewBox="0 0 80 80" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path d="M50 46.6662C51.7682 46.6662 53.4638 45.9638 54.7141 44.7136C55.9643 43.4633 56.6667 41.7676 56.6667 39.9995C56.6667 38.2314 55.9643 36.5357 54.7141 35.2855C53.4638 34.0352 51.7682 33.3328 50 33.3328C48.2319 33.3328 46.5362 34.0352 45.286 35.2855C44.0358 36.5357 43.3334 38.2314 43.3334 39.9995C43.3334 41.7676 44.0358 43.4633 45.286 44.7136C46.5362 45.9638 48.2319 46.6662 50 46.6662Z" fill="currentColor"/>
-      <path fillRule="evenodd" clipRule="evenodd" d="M23.3333 13.3328C22.4493 13.3328 21.6014 13.684 20.9763 14.3092C20.3512 14.9343 20 15.7821 20 16.6662C20 17.5502 20.3512 18.3981 20.9763 19.0232C21.6014 19.6483 22.4493 19.9995 23.3333 19.9995H33.3333C34.2174 19.9995 35.0652 20.3507 35.6904 20.9758C36.3155 21.6009 36.6667 22.4488 36.6667 23.3328C36.6667 24.2169 36.3155 25.0647 35.6904 25.6899C35.0652 26.315 34.2174 26.6662 33.3333 26.6662H18.3333C17.4493 26.6662 16.6014 27.0174 15.9763 27.6425C15.3512 28.2676 15 29.1155 15 29.9995C15 30.8836 15.3512 31.7314 15.9763 32.3565C16.6014 32.9817 17.4493 33.3328 18.3333 33.3328H26.6667C27.5507 33.3328 28.3986 33.684 29.0237 34.3092C29.6488 34.9343 30 35.7821 30 36.6662C30 37.5502 29.6488 38.3981 29.0237 39.0232C28.3986 39.6483 27.5507 39.9995 26.6667 39.9995H20C19.1159 39.9995 18.2681 40.3507 17.643 40.9758C17.0179 41.6009 16.6667 42.4488 16.6667 43.3328C16.6667 44.2169 17.0179 45.0647 17.643 45.6899C18.2681 46.315 19.1159 46.6662 20 46.6662H24.1667C25.4134 51.4948 27.9892 55.8771 31.6015 59.3153C35.2138 62.7535 39.7178 65.11 44.6021 66.1169C49.4864 67.1239 54.5551 66.741 59.2328 65.0119C63.9104 63.2827 68.0094 60.2765 71.0643 56.3347C74.1192 52.393 76.0075 47.6735 76.5149 42.7124C77.0222 37.7513 76.1282 32.7473 73.9344 28.2688C71.7406 23.7902 68.3349 20.0166 64.1041 17.3764C59.8734 14.7362 54.987 13.3354 50 13.3328H23.3333ZM50 53.3328C53.5362 53.3328 56.9276 51.9281 59.4281 49.4276C61.9286 46.9271 63.3333 43.5357 63.3333 39.9995C63.3333 36.4633 61.9286 33.0719 59.4281 30.5714C56.9276 28.0709 53.5362 26.6662 50 26.6662C46.4638 26.6662 43.0724 28.0709 40.5719 30.5714C38.0714 33.0719 36.6667 36.4633 36.6667 39.9995C36.6667 43.5357 38.0714 46.9271 40.5719 49.4276C43.0724 51.9281 46.4638 53.3328 50 53.3328Z" fill="currentColor"/>
-      <path d="M8.33337 33.3328C9.21743 33.3328 10.0653 32.9817 10.6904 32.3565C11.3155 31.7314 11.6667 30.8836 11.6667 29.9995C11.6667 29.1155 11.3155 28.2676 10.6904 27.6425C10.0653 27.0174 9.21743 26.6662 8.33337 26.6662H6.66671C5.78265 26.6662 4.93481 27.0174 4.30968 27.6425C3.68456 28.2676 3.33337 29.1155 3.33337 29.9995C3.33337 30.8836 3.68456 31.7314 4.30968 32.3565C4.93481 32.9817 5.78265 33.3328 6.66671 33.3328H8.33337Z" fill="currentColor"/>
+    <svg width='80' height='80' viewBox='0 0 80 80' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path d='M50 46.6662C51.7682 46.6662 53.4638 45.9638 54.7141 44.7136C55.9643 43.4633 56.6667 41.7676 56.6667 39.9995C56.6667 38.2314 55.9643 36.5357 54.7141 35.2855C53.4638 34.0352 51.7682 33.3328 50 33.3328C48.2319 33.3328 46.5362 34.0352 45.286 35.2855C44.0358 36.5357 43.3334 38.2314 43.3334 39.9995C43.3334 41.7676 44.0358 43.4633 45.286 44.7136C46.5362 45.9638 48.2319 46.6662 50 46.6662Z' fill='currentColor'/>
+      <path fillRule='evenodd' clipRule='evenodd' d='M23.3333 13.3328C22.4493 13.3328 21.6014 13.684 20.9763 14.3092C20.3512 14.9343 20 15.7821 20 16.6662C20 17.5502 20.3512 18.3981 20.9763 19.0232C21.6014 19.6483 22.4493 19.9995 23.3333 19.9995H33.3333C34.2174 19.9995 35.0652 20.3507 35.6904 20.9758C36.3155 21.6009 36.6667 22.4488 36.6667 23.3328C36.6667 24.2169 36.3155 25.0647 35.6904 25.6899C35.0652 26.315 34.2174 26.6662 33.3333 26.6662H18.3333C17.4493 26.6662 16.6014 27.0174 15.9763 27.6425C15.3512 28.2676 15 29.1155 15 29.9995C15 30.8836 15.3512 31.7314 15.9763 32.3565C16.6014 32.9817 17.4493 33.3328 18.3333 33.3328H26.6667C27.5507 33.3328 28.3986 33.684 29.0237 34.3092C29.6488 34.9343 30 35.7821 30 36.6662C30 37.5502 29.6488 38.3981 29.0237 39.0232C28.3986 39.6483 27.5507 39.9995 26.6667 39.9995H20C19.1159 39.9995 18.2681 40.3507 17.643 40.9758C17.0179 41.6009 16.6667 42.4488 16.6667 43.3328C16.6667 44.2169 17.0179 45.0647 17.643 45.6899C18.2681 46.315 19.1159 46.6662 20 46.6662H24.1667C25.4134 51.4948 27.9892 55.8771 31.6015 59.3153C35.2138 62.7535 39.7178 65.11 44.6021 66.1169C49.4864 67.1239 54.5551 66.741 59.2328 65.0119C63.9104 63.2827 68.0094 60.2765 71.0643 56.3347C74.1192 52.393 76.0075 47.6735 76.5149 42.7124C77.0222 37.7513 76.1282 32.7473 73.9344 28.2688C71.7406 23.7902 68.3349 20.0166 64.1041 17.3764C59.8734 14.7362 54.987 13.3354 50 13.3328H23.3333ZM50 53.3328C53.5362 53.3328 56.9276 51.9281 59.4281 49.4276C61.9286 46.9271 63.3333 43.5357 63.3333 39.9995C63.3333 36.4633 61.9286 33.0719 59.4281 30.5714C56.9276 28.0709 53.5362 26.6662 50 26.6662C46.4638 26.6662 43.0724 28.0709 40.5719 30.5714C38.0714 33.0719 36.6667 36.4633 36.6667 39.9995C36.6667 43.5357 38.0714 46.9271 40.5719 49.4276C43.0724 51.9281 46.4638 53.3328 50 53.3328Z' fill='currentColor'/>
+      <path d='M8.33337 33.3328C9.21743 33.3328 10.0653 32.9817 10.6904 32.3565C11.3155 31.7314 11.6667 30.8836 11.6667 29.9995C11.6667 29.1155 11.3155 28.2676 10.6904 27.6425C10.0653 27.0174 9.21743 26.6662 8.33337 26.6662H6.66671C5.78265 26.6662 4.93481 27.0174 4.30968 27.6425C3.68456 28.2676 3.33337 29.1155 3.33337 29.9995C3.33337 30.8836 3.68456 31.7314 4.30968 32.3565C4.93481 32.9817 5.78265 33.3328 6.66671 33.3328H8.33337Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/NotificationSettings/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/NotificationSettings/index.jsx
index bbbe9870..fe6b3619 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/NotificationSettings/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/NotificationSettings/index.jsx
@@ -1,7 +1,7 @@
 export default function NotificationSettings({ className }) {
   return (
-    <svg width="80" height="80" viewBox="0 0 80 80" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path d="M32.3334 9.63389C32.9334 9.40056 33.4 8.83389 33.5667 8.20056C33.9505 6.78828 34.7884 5.54153 35.951 4.65267C37.1137 3.76381 38.5365 3.28223 40 3.28223C41.4635 3.28223 42.8864 3.76381 44.049 4.65267C45.2117 5.54153 46.0496 6.78828 46.4334 8.20056C46.6 8.86723 47.0667 9.40056 47.7 9.63389C52.2694 11.2313 56.2288 14.2101 59.0298 18.1579C61.8309 22.1056 63.3348 26.8267 63.3334 31.6672V38.6339C63.3334 39.0339 63.5 39.4339 63.7667 39.7339L67.4334 43.8006C69.0882 45.6395 70.0027 48.0266 70 50.5006V51.4339C70 53.6672 68.8667 55.7339 66.8334 56.6339C62.4667 58.6339 53.5 61.6672 40 61.6672C26.5 61.6672 17.5334 58.6339 13.1667 56.6672C11.1334 55.7339 10 53.6672 10 51.4339V50.5006C10.0056 48.0381 10.9195 45.6643 12.5667 43.8339L16.2334 39.7339C16.5074 39.4325 16.6615 39.0412 16.6667 38.6339V31.6672C16.6676 26.8227 18.1765 22.0986 20.9838 18.1504C23.7911 14.2022 27.7578 11.2257 32.3334 9.63389ZM30.6 66.1339C30.5246 66.1244 30.448 66.1311 30.3754 66.1536C30.3028 66.1761 30.2358 66.2139 30.179 66.2644C30.1222 66.3149 30.0768 66.377 30.046 66.4465C30.0151 66.5159 29.9994 66.5912 30 66.6672C30 69.3194 31.0536 71.8629 32.929 73.7383C34.8043 75.6137 37.3479 76.6672 40 76.6672C42.6522 76.6672 45.1957 75.6137 47.0711 73.7383C48.9465 71.8629 50 69.3194 50 66.6672C50 66.3339 49.7 66.1006 49.4 66.1339C43.1537 66.8471 36.8464 66.8471 30.6 66.1339Z" fill="currentColor"/>
+    <svg width='80' height='80' viewBox='0 0 80 80' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path d='M32.3334 9.63389C32.9334 9.40056 33.4 8.83389 33.5667 8.20056C33.9505 6.78828 34.7884 5.54153 35.951 4.65267C37.1137 3.76381 38.5365 3.28223 40 3.28223C41.4635 3.28223 42.8864 3.76381 44.049 4.65267C45.2117 5.54153 46.0496 6.78828 46.4334 8.20056C46.6 8.86723 47.0667 9.40056 47.7 9.63389C52.2694 11.2313 56.2288 14.2101 59.0298 18.1579C61.8309 22.1056 63.3348 26.8267 63.3334 31.6672V38.6339C63.3334 39.0339 63.5 39.4339 63.7667 39.7339L67.4334 43.8006C69.0882 45.6395 70.0027 48.0266 70 50.5006V51.4339C70 53.6672 68.8667 55.7339 66.8334 56.6339C62.4667 58.6339 53.5 61.6672 40 61.6672C26.5 61.6672 17.5334 58.6339 13.1667 56.6672C11.1334 55.7339 10 53.6672 10 51.4339V50.5006C10.0056 48.0381 10.9195 45.6643 12.5667 43.8339L16.2334 39.7339C16.5074 39.4325 16.6615 39.0412 16.6667 38.6339V31.6672C16.6676 26.8227 18.1765 22.0986 20.9838 18.1504C23.7911 14.2022 27.7578 11.2257 32.3334 9.63389ZM30.6 66.1339C30.5246 66.1244 30.448 66.1311 30.3754 66.1536C30.3028 66.1761 30.2358 66.2139 30.179 66.2644C30.1222 66.3149 30.0768 66.377 30.046 66.4465C30.0151 66.5159 29.9994 66.5912 30 66.6672C30 69.3194 31.0536 71.8629 32.929 73.7383C34.8043 75.6137 37.3479 76.6672 40 76.6672C42.6522 76.6672 45.1957 75.6137 47.0711 73.7383C48.9465 71.8629 50 69.3194 50 66.6672C50 66.3339 49.7 66.1006 49.4 66.1339C43.1537 66.8471 36.8464 66.8471 30.6 66.1339Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/PinnedMessages/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/PinnedMessages/index.jsx
index b4756ba4..d06a0bd4 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/PinnedMessages/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/PinnedMessages/index.jsx
@@ -1,7 +1,7 @@
 export default function PinnedMessagesIcon({ className }) {
   return (
-    <svg width="80" height="80" viewBox="0 0 80 80" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path d="M64.5999 37.9334C66.4749 39.806 69.0166 40.8579 71.6666 40.8579C74.3166 40.8579 76.8583 39.806 78.7333 37.9334L78.8333 37.8334C79.1387 37.5218 79.3097 37.103 79.3097 36.6667C79.3097 36.2304 79.1387 35.8116 78.8333 35.5L44.4999 1.16671C44.1884 0.861327 43.7695 0.690277 43.3333 0.690277C42.897 0.690277 42.4782 0.861327 42.1666 1.16671L42.0666 1.26671C40.1939 3.14171 39.1421 5.68336 39.1421 8.33337C39.1421 10.9834 40.1939 13.525 42.0666 15.4L43.3333 16.6667L33.5999 26.4L21.4333 25.2667C20.4568 25.1769 19.4726 25.3036 18.5507 25.6378C17.6288 25.972 16.792 26.5054 16.0999 27.2L14.0333 29.3C13.7208 29.6099 13.4729 29.9786 13.3036 30.3848C13.1344 30.791 13.0473 31.2267 13.0473 31.6667C13.0473 32.1067 13.1344 32.5424 13.3036 32.9486C13.4729 33.3548 13.7208 33.7235 14.0333 34.0334L45.9666 65.9667C46.2765 66.2791 46.6452 66.5271 47.0514 66.6963C47.4576 66.8656 47.8932 66.9527 48.3333 66.9527C48.7733 66.9527 49.209 66.8656 49.6152 66.6963C50.0214 66.5271 50.3901 66.2791 50.6999 65.9667L52.7999 63.8667C53.4946 63.1746 54.028 62.3378 54.3622 61.4159C54.6964 60.4941 54.8231 59.5098 54.7333 58.5334L53.5999 46.4L63.3333 36.6667L64.5999 37.9334ZM30.2333 56.9C30.4073 57.0753 30.5401 57.287 30.6223 57.5199C30.7045 57.7527 30.7338 58.001 30.7083 58.2466C30.6828 58.4922 30.603 58.7291 30.4747 58.9401C30.3465 59.1511 30.1729 59.331 29.9666 59.4667L12.7999 70.9C12.4805 71.114 12.097 71.211 11.7143 71.1746C11.3316 71.1381 10.9732 70.9705 10.6999 70.7L9.29994 69.3C9.02952 69.0268 8.86188 68.6684 8.82543 68.2857C8.78898 67.903 8.88596 67.5194 9.09994 67.2L20.5333 50C20.669 49.7937 20.8489 49.6202 21.0599 49.4919C21.2709 49.3636 21.5078 49.2838 21.7534 49.2583C21.999 49.2328 22.2472 49.2622 22.4801 49.3443C22.713 49.4265 22.9247 49.5594 23.0999 49.7334L30.2333 56.8667V56.9Z" fill="currentColor"/>
+    <svg width='80' height='80' viewBox='0 0 80 80' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path d='M64.5999 37.9334C66.4749 39.806 69.0166 40.8579 71.6666 40.8579C74.3166 40.8579 76.8583 39.806 78.7333 37.9334L78.8333 37.8334C79.1387 37.5218 79.3097 37.103 79.3097 36.6667C79.3097 36.2304 79.1387 35.8116 78.8333 35.5L44.4999 1.16671C44.1884 0.861327 43.7695 0.690277 43.3333 0.690277C42.897 0.690277 42.4782 0.861327 42.1666 1.16671L42.0666 1.26671C40.1939 3.14171 39.1421 5.68336 39.1421 8.33337C39.1421 10.9834 40.1939 13.525 42.0666 15.4L43.3333 16.6667L33.5999 26.4L21.4333 25.2667C20.4568 25.1769 19.4726 25.3036 18.5507 25.6378C17.6288 25.972 16.792 26.5054 16.0999 27.2L14.0333 29.3C13.7208 29.6099 13.4729 29.9786 13.3036 30.3848C13.1344 30.791 13.0473 31.2267 13.0473 31.6667C13.0473 32.1067 13.1344 32.5424 13.3036 32.9486C13.4729 33.3548 13.7208 33.7235 14.0333 34.0334L45.9666 65.9667C46.2765 66.2791 46.6452 66.5271 47.0514 66.6963C47.4576 66.8656 47.8932 66.9527 48.3333 66.9527C48.7733 66.9527 49.209 66.8656 49.6152 66.6963C50.0214 66.5271 50.3901 66.2791 50.6999 65.9667L52.7999 63.8667C53.4946 63.1746 54.028 62.3378 54.3622 61.4159C54.6964 60.4941 54.8231 59.5098 54.7333 58.5334L53.5999 46.4L63.3333 36.6667L64.5999 37.9334ZM30.2333 56.9C30.4073 57.0753 30.5401 57.287 30.6223 57.5199C30.7045 57.7527 30.7338 58.001 30.7083 58.2466C30.6828 58.4922 30.603 58.7291 30.4747 58.9401C30.3465 59.1511 30.1729 59.331 29.9666 59.4667L12.7999 70.9C12.4805 71.114 12.097 71.211 11.7143 71.1746C11.3316 71.1381 10.9732 70.9705 10.6999 70.7L9.29994 69.3C9.02952 69.0268 8.86188 68.6684 8.82543 68.2857C8.78898 67.903 8.88596 67.5194 9.09994 67.2L20.5333 50C20.669 49.7937 20.8489 49.6202 21.0599 49.4919C21.2709 49.3636 21.5078 49.2838 21.7534 49.2583C21.999 49.2328 22.2472 49.2622 22.4801 49.3443C22.713 49.4265 22.9247 49.5594 23.0999 49.7334L30.2333 56.8667V56.9Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/Search/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/Search/index.jsx
index 256314aa..74bd7374 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/Search/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/Search/index.jsx
@@ -1,7 +1,7 @@
 export default function SearchIcon({ className }) {
   return (
-    <svg width="80" height="80" viewBox="0 0 80 80" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M52.0666 56.7666C46.077 61.5549 38.481 63.8678 30.8392 63.2301C23.1974 62.5924 16.0899 59.0526 10.9766 53.3377C5.86344 47.6229 3.13276 40.167 3.34555 32.5015C3.55833 24.8361 6.69842 17.5432 12.1208 12.1208C17.5432 6.69842 24.8361 3.55833 32.5015 3.34555C40.167 3.13276 47.6229 5.86344 53.3377 10.9766C59.0526 16.0899 62.5924 23.1974 63.2301 30.8392C63.8678 38.481 61.5549 46.077 56.7666 52.0666L72.3666 67.6333C72.6774 67.9441 72.924 68.3131 73.0922 68.7191C73.2604 69.1252 73.3469 69.5604 73.3469 70C73.3469 70.4395 73.2604 70.8747 73.0922 71.2808C72.924 71.6869 72.6774 72.0558 72.3666 72.3666C72.0558 72.6774 71.6869 72.924 71.2808 73.0922C70.8747 73.2604 70.4395 73.3469 70 73.3469C69.5604 73.3469 69.1252 73.2604 68.7191 73.0922C68.3131 72.924 67.9441 72.6774 67.6333 72.3666L52.0666 56.7666ZM56.6666 33.3333C56.6666 36.3975 56.0631 39.4317 54.8905 42.2626C53.7179 45.0935 51.9992 47.6658 49.8325 49.8325C47.6658 51.9992 45.0935 53.7179 42.2626 54.8905C39.4317 56.0631 36.3975 56.6666 33.3333 56.6666C30.2691 56.6666 27.2349 56.0631 24.404 54.8905C21.5731 53.7179 19.0008 51.9992 16.8341 49.8325C14.6674 47.6658 12.9487 45.0935 11.7761 42.2626C10.6035 39.4317 9.99996 36.3975 9.99996 33.3333C9.99996 27.1449 12.4583 21.21 16.8341 16.8341C21.21 12.4583 27.1449 9.99996 33.3333 9.99996C39.5217 9.99996 45.4566 12.4583 49.8325 16.8341C54.2083 21.21 56.6666 27.1449 56.6666 33.3333Z" fill="currentColor"/>
+    <svg width='80' height='80' viewBox='0 0 80 80' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path fillRule='evenodd' clipRule='evenodd' d='M52.0666 56.7666C46.077 61.5549 38.481 63.8678 30.8392 63.2301C23.1974 62.5924 16.0899 59.0526 10.9766 53.3377C5.86344 47.6229 3.13276 40.167 3.34555 32.5015C3.55833 24.8361 6.69842 17.5432 12.1208 12.1208C17.5432 6.69842 24.8361 3.55833 32.5015 3.34555C40.167 3.13276 47.6229 5.86344 53.3377 10.9766C59.0526 16.0899 62.5924 23.1974 63.2301 30.8392C63.8678 38.481 61.5549 46.077 56.7666 52.0666L72.3666 67.6333C72.6774 67.9441 72.924 68.3131 73.0922 68.7191C73.2604 69.1252 73.3469 69.5604 73.3469 70C73.3469 70.4395 73.2604 70.8747 73.0922 71.2808C72.924 71.6869 72.6774 72.0558 72.3666 72.3666C72.0558 72.6774 71.6869 72.924 71.2808 73.0922C70.8747 73.2604 70.4395 73.3469 70 73.3469C69.5604 73.3469 69.1252 73.2604 68.7191 73.0922C68.3131 72.924 67.9441 72.6774 67.6333 72.3666L52.0666 56.7666ZM56.6666 33.3333C56.6666 36.3975 56.0631 39.4317 54.8905 42.2626C53.7179 45.0935 51.9992 47.6658 49.8325 49.8325C47.6658 51.9992 45.0935 53.7179 42.2626 54.8905C39.4317 56.0631 36.3975 56.6666 33.3333 56.6666C30.2691 56.6666 27.2349 56.0631 24.404 54.8905C21.5731 53.7179 19.0008 51.9992 16.8341 49.8325C14.6674 47.6658 12.9487 45.0935 11.7761 42.2626C10.6035 39.4317 9.99996 36.3975 9.99996 33.3333C9.99996 27.1449 12.4583 21.21 16.8341 16.8341C21.21 12.4583 27.1449 9.99996 33.3333 9.99996C39.5217 9.99996 45.4566 12.4583 49.8325 16.8341C54.2083 21.21 56.6666 27.1449 56.6666 33.3333Z' fill='currentColor'/>
     </svg>
 
   );
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/Stickers/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/Stickers/index.jsx
index 01cd9e56..0b3295d6 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/Stickers/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/Stickers/index.jsx
@@ -1,8 +1,8 @@
 export default function StickersIcon({ className }) {
   return (
-    <svg width="80" height="80" viewBox="0 0 80 80" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M20 6.66681H60C63.5362 6.66681 66.9276 8.07157 69.4281 10.5721C71.9286 13.0725 73.3334 16.4639 73.3334 20.0001V45.0001C73.3334 45.4422 73.1578 45.8661 72.8452 46.1787C72.5326 46.4912 72.1087 46.6668 71.6667 46.6668H63.3334C58.9131 46.6668 54.6738 48.4228 51.5482 51.5484C48.4226 54.674 46.6667 58.9132 46.6667 63.3335V71.6668C46.6667 72.1088 46.4911 72.5328 46.1785 72.8453C45.866 73.1579 45.442 73.3335 45 73.3335H20C16.4638 73.3335 13.0724 71.9287 10.5719 69.4282C8.07145 66.9277 6.66669 63.5364 6.66669 60.0001V20.0001C6.66669 16.4639 8.07145 13.0725 10.5719 10.5721C13.0724 8.07157 16.4638 6.66681 20 6.66681ZM21.6667 33.3335C22.9928 33.3335 24.2645 32.8067 25.2022 31.869C26.1399 30.9313 26.6667 29.6596 26.6667 28.3335C26.6667 27.0074 26.1399 25.7356 25.2022 24.7979C24.2645 23.8603 22.9928 23.3335 21.6667 23.3335C20.3406 23.3335 19.0688 23.8603 18.1312 24.7979C17.1935 25.7356 16.6667 27.0074 16.6667 28.3335C16.6667 29.6596 17.1935 30.9313 18.1312 31.869C19.0688 32.8067 20.3406 33.3335 21.6667 33.3335ZM63.3334 28.3335C63.3334 29.6596 62.8066 30.9313 61.8689 31.869C60.9312 32.8067 59.6594 33.3335 58.3334 33.3335C57.0073 33.3335 55.7355 32.8067 54.7978 31.869C53.8601 30.9313 53.3334 29.6596 53.3334 28.3335C53.3334 27.0074 53.8601 25.7356 54.7978 24.7979C55.7355 23.8603 57.0073 23.3335 58.3334 23.3335C59.6594 23.3335 60.9312 23.8603 61.8689 24.7979C62.8066 25.7356 63.3334 27.0074 63.3334 28.3335ZM30.3 38.1335C29.8049 37.3997 29.0387 36.8927 28.1698 36.7239C27.3008 36.5551 26.4005 36.7384 25.6667 37.2335C24.9329 37.7285 24.4259 38.4948 24.2571 39.3637C24.0883 40.2327 24.2716 41.133 24.7667 41.8668C26.4425 44.3693 28.709 46.4205 31.3659 47.8389C34.0228 49.2573 36.9882 49.9993 40 49.9993C43.0118 49.9993 45.9772 49.2573 48.6341 47.8389C51.291 46.4205 53.5576 44.3693 55.2334 41.8668C55.4785 41.5035 55.6497 41.0954 55.7371 40.666C55.8245 40.2365 55.8265 39.794 55.7429 39.3637C55.6594 38.9335 55.4919 38.5239 55.25 38.1584C55.0082 37.7929 54.6967 37.4786 54.3334 37.2335C53.97 36.9883 53.562 36.8172 53.1325 36.7297C52.703 36.6423 52.2605 36.6403 51.8303 36.7239C51.4 36.8075 50.9905 36.9749 50.625 37.2168C50.2594 37.4587 49.9452 37.7701 49.7 38.1335C48.6341 39.7285 47.1912 41.0361 45.4993 41.9404C43.8073 42.8447 41.9185 43.3178 40 43.3178C38.0816 43.3178 36.1927 42.8447 34.5008 41.9404C32.8088 41.0361 31.366 39.7285 30.3 38.1335Z" fill="currentColor"/>
-      <path d="M72.2 53.3335C72.3 53.3335 72.3667 53.4335 72.3334 53.5335C71.8471 54.5468 71.1935 55.4708 70.4 56.2668L56.2667 70.4002C55.4707 71.1936 54.5466 71.8472 53.5333 72.3335C53.5117 72.3463 53.487 72.3527 53.4618 72.3521C53.4367 72.3514 53.4123 72.3437 53.3914 72.3297C53.3705 72.3158 53.354 72.2962 53.3437 72.2733C53.3334 72.2504 53.3298 72.225 53.3334 72.2002V63.3335C53.3334 60.6813 54.3869 58.1378 56.2623 56.2624C58.1376 54.3871 60.6812 53.3335 63.3334 53.3335H72.2Z" fill="currentColor"/>
+    <svg width='80' height='80' viewBox='0 0 80 80' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path fillRule='evenodd' clipRule='evenodd' d='M20 6.66681H60C63.5362 6.66681 66.9276 8.07157 69.4281 10.5721C71.9286 13.0725 73.3334 16.4639 73.3334 20.0001V45.0001C73.3334 45.4422 73.1578 45.8661 72.8452 46.1787C72.5326 46.4912 72.1087 46.6668 71.6667 46.6668H63.3334C58.9131 46.6668 54.6738 48.4228 51.5482 51.5484C48.4226 54.674 46.6667 58.9132 46.6667 63.3335V71.6668C46.6667 72.1088 46.4911 72.5328 46.1785 72.8453C45.866 73.1579 45.442 73.3335 45 73.3335H20C16.4638 73.3335 13.0724 71.9287 10.5719 69.4282C8.07145 66.9277 6.66669 63.5364 6.66669 60.0001V20.0001C6.66669 16.4639 8.07145 13.0725 10.5719 10.5721C13.0724 8.07157 16.4638 6.66681 20 6.66681ZM21.6667 33.3335C22.9928 33.3335 24.2645 32.8067 25.2022 31.869C26.1399 30.9313 26.6667 29.6596 26.6667 28.3335C26.6667 27.0074 26.1399 25.7356 25.2022 24.7979C24.2645 23.8603 22.9928 23.3335 21.6667 23.3335C20.3406 23.3335 19.0688 23.8603 18.1312 24.7979C17.1935 25.7356 16.6667 27.0074 16.6667 28.3335C16.6667 29.6596 17.1935 30.9313 18.1312 31.869C19.0688 32.8067 20.3406 33.3335 21.6667 33.3335ZM63.3334 28.3335C63.3334 29.6596 62.8066 30.9313 61.8689 31.869C60.9312 32.8067 59.6594 33.3335 58.3334 33.3335C57.0073 33.3335 55.7355 32.8067 54.7978 31.869C53.8601 30.9313 53.3334 29.6596 53.3334 28.3335C53.3334 27.0074 53.8601 25.7356 54.7978 24.7979C55.7355 23.8603 57.0073 23.3335 58.3334 23.3335C59.6594 23.3335 60.9312 23.8603 61.8689 24.7979C62.8066 25.7356 63.3334 27.0074 63.3334 28.3335ZM30.3 38.1335C29.8049 37.3997 29.0387 36.8927 28.1698 36.7239C27.3008 36.5551 26.4005 36.7384 25.6667 37.2335C24.9329 37.7285 24.4259 38.4948 24.2571 39.3637C24.0883 40.2327 24.2716 41.133 24.7667 41.8668C26.4425 44.3693 28.709 46.4205 31.3659 47.8389C34.0228 49.2573 36.9882 49.9993 40 49.9993C43.0118 49.9993 45.9772 49.2573 48.6341 47.8389C51.291 46.4205 53.5576 44.3693 55.2334 41.8668C55.4785 41.5035 55.6497 41.0954 55.7371 40.666C55.8245 40.2365 55.8265 39.794 55.7429 39.3637C55.6594 38.9335 55.4919 38.5239 55.25 38.1584C55.0082 37.7929 54.6967 37.4786 54.3334 37.2335C53.97 36.9883 53.562 36.8172 53.1325 36.7297C52.703 36.6423 52.2605 36.6403 51.8303 36.7239C51.4 36.8075 50.9905 36.9749 50.625 37.2168C50.2594 37.4587 49.9452 37.7701 49.7 38.1335C48.6341 39.7285 47.1912 41.0361 45.4993 41.9404C43.8073 42.8447 41.9185 43.3178 40 43.3178C38.0816 43.3178 36.1927 42.8447 34.5008 41.9404C32.8088 41.0361 31.366 39.7285 30.3 38.1335Z' fill='currentColor'/>
+      <path d='M72.2 53.3335C72.3 53.3335 72.3667 53.4335 72.3334 53.5335C71.8471 54.5468 71.1935 55.4708 70.4 56.2668L56.2667 70.4002C55.4707 71.1936 54.5466 71.8472 53.5333 72.3335C53.5117 72.3463 53.487 72.3527 53.4618 72.3521C53.4367 72.3514 53.4123 72.3437 53.3914 72.3297C53.3705 72.3158 53.354 72.2962 53.3437 72.2733C53.3334 72.2504 53.3298 72.225 53.3334 72.2002V63.3335C53.3334 60.6813 54.3869 58.1378 56.2623 56.2624C58.1376 54.3871 60.6812 53.3335 63.3334 53.3335H72.2Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/TextChannel/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/TextChannel/index.jsx
index 0b745679..f9454b5b 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/TextChannel/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/TextChannel/index.jsx
@@ -1,7 +1,7 @@
 export default function TextChannelIcon({ className }) {
   return (
-    <svg width="80" height="81" viewBox="0 0 80 81" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M36.6334 11.0334C36.7034 10.5978 36.687 10.1527 36.585 9.72353C36.483 9.29433 36.2975 8.88942 36.039 8.53192C35.7806 8.17441 35.4543 7.87131 35.0787 7.63993C34.7031 7.40854 34.2856 7.2534 33.85 7.18336C33.4145 7.11332 32.9694 7.12976 32.5402 7.23173C32.111 7.3337 31.7061 7.51921 31.3486 7.77767C30.9911 8.03612 30.688 8.36247 30.4566 8.73806C30.2252 9.11365 30.0701 9.53114 30 9.9667L27.1667 27.1667H13.3334C12.4493 27.1667 11.6015 27.5179 10.9763 28.143C10.3512 28.7681 10 29.616 10 30.5C10 31.3841 10.3512 32.2319 10.9763 32.8571C11.6015 33.4822 12.4493 33.8334 13.3334 33.8334H26.0667L23.8334 47.1667H10C9.11597 47.1667 8.26812 47.5179 7.643 48.143C7.01788 48.7681 6.66669 49.616 6.66669 50.5C6.66669 51.3841 7.01788 52.2319 7.643 52.857C8.26812 53.4822 9.11597 53.8334 10 53.8334H22.7334L20.0667 69.9667C19.9852 70.8095 20.2276 71.6518 20.7445 72.3224C21.2615 72.9931 22.0143 73.4419 22.8501 73.5776C23.6859 73.7134 24.5421 73.526 25.2447 73.0535C25.9474 72.5809 26.4439 71.8587 26.6334 71.0334L29.5 53.8334H46.0667L43.4 69.9667C43.3185 70.8095 43.5609 71.6518 44.0778 72.3224C44.5948 72.9931 45.3476 73.4419 46.1834 73.5776C47.0193 73.7134 47.8754 73.526 48.5781 73.0535C49.2807 72.5809 49.7772 71.8587 49.9667 71.0334L52.8334 53.8334H66.6667C67.5507 53.8334 68.3986 53.4822 69.0237 52.857C69.6488 52.2319 70 51.3841 70 50.5C70 49.616 69.6488 48.7681 69.0237 48.143C68.3986 47.5179 67.5507 47.1667 66.6667 47.1667H53.9334L56.1667 33.8334H70C70.8841 33.8334 71.7319 33.4822 72.357 32.8571C72.9822 32.2319 73.3334 31.3841 73.3334 30.5C73.3334 29.616 72.9822 28.7681 72.357 28.143C71.7319 27.5179 70.8841 27.1667 70 27.1667H57.2667L59.9333 11.0334C60.0354 10.589 60.0452 10.1285 59.9621 9.68026C59.8791 9.23201 59.705 8.80555 59.4506 8.42726C59.1962 8.04896 58.8669 7.72688 58.483 7.48091C58.0992 7.23494 57.669 7.07032 57.219 6.99723C56.769 6.92413 56.3088 6.94412 55.8669 7.05595C55.4249 7.16778 55.0106 7.36907 54.6495 7.64739C54.2885 7.92571 53.9883 8.27513 53.7677 8.67406C53.547 9.07298 53.4106 9.51293 53.3667 9.9667L50.5 27.1667H33.9334L36.6 11.0334H36.6334ZM47.1667 47.1667L49.4 33.8334H32.8334L30.6 47.1667H47.1667Z" fill="currentColor"/>
+    <svg width='80' height='81' viewBox='0 0 80 81' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path fillRule='evenodd' clipRule='evenodd' d='M36.6334 11.0334C36.7034 10.5978 36.687 10.1527 36.585 9.72353C36.483 9.29433 36.2975 8.88942 36.039 8.53192C35.7806 8.17441 35.4543 7.87131 35.0787 7.63993C34.7031 7.40854 34.2856 7.2534 33.85 7.18336C33.4145 7.11332 32.9694 7.12976 32.5402 7.23173C32.111 7.3337 31.7061 7.51921 31.3486 7.77767C30.9911 8.03612 30.688 8.36247 30.4566 8.73806C30.2252 9.11365 30.0701 9.53114 30 9.9667L27.1667 27.1667H13.3334C12.4493 27.1667 11.6015 27.5179 10.9763 28.143C10.3512 28.7681 10 29.616 10 30.5C10 31.3841 10.3512 32.2319 10.9763 32.8571C11.6015 33.4822 12.4493 33.8334 13.3334 33.8334H26.0667L23.8334 47.1667H10C9.11597 47.1667 8.26812 47.5179 7.643 48.143C7.01788 48.7681 6.66669 49.616 6.66669 50.5C6.66669 51.3841 7.01788 52.2319 7.643 52.857C8.26812 53.4822 9.11597 53.8334 10 53.8334H22.7334L20.0667 69.9667C19.9852 70.8095 20.2276 71.6518 20.7445 72.3224C21.2615 72.9931 22.0143 73.4419 22.8501 73.5776C23.6859 73.7134 24.5421 73.526 25.2447 73.0535C25.9474 72.5809 26.4439 71.8587 26.6334 71.0334L29.5 53.8334H46.0667L43.4 69.9667C43.3185 70.8095 43.5609 71.6518 44.0778 72.3224C44.5948 72.9931 45.3476 73.4419 46.1834 73.5776C47.0193 73.7134 47.8754 73.526 48.5781 73.0535C49.2807 72.5809 49.7772 71.8587 49.9667 71.0334L52.8334 53.8334H66.6667C67.5507 53.8334 68.3986 53.4822 69.0237 52.857C69.6488 52.2319 70 51.3841 70 50.5C70 49.616 69.6488 48.7681 69.0237 48.143C68.3986 47.5179 67.5507 47.1667 66.6667 47.1667H53.9334L56.1667 33.8334H70C70.8841 33.8334 71.7319 33.4822 72.357 32.8571C72.9822 32.2319 73.3334 31.3841 73.3334 30.5C73.3334 29.616 72.9822 28.7681 72.357 28.143C71.7319 27.5179 70.8841 27.1667 70 27.1667H57.2667L59.9333 11.0334C60.0354 10.589 60.0452 10.1285 59.9621 9.68026C59.8791 9.23201 59.705 8.80555 59.4506 8.42726C59.1962 8.04896 58.8669 7.72688 58.483 7.48091C58.0992 7.23494 57.669 7.07032 57.219 6.99723C56.769 6.92413 56.3088 6.94412 55.8669 7.05595C55.4249 7.16778 55.0106 7.36907 54.6495 7.64739C54.2885 7.92571 53.9883 8.27513 53.7677 8.67406C53.547 9.07298 53.4106 9.51293 53.3667 9.9667L50.5 27.1667H33.9334L36.6 11.0334H36.6334ZM47.1667 47.1667L49.4 33.8334H32.8334L30.6 47.1667H47.1667Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/TextChannelNSFW/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/TextChannelNSFW/index.jsx
index 0d60baf7..a2091843 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/TextChannelNSFW/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/TextChannelNSFW/index.jsx
@@ -1,8 +1,8 @@
 export default function TextChannelNSFWIcon({ className }) {
   return (
-    <svg width="80" height="81" viewBox="0 0 80 81" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M60.3 5.93311C61.6333 3.59977 65.0667 3.59977 66.3667 5.93311L79.5667 28.9331C80.8333 31.1331 79.1667 33.8331 76.5333 33.8331H50.1333C47.5 33.8331 45.8 31.1331 47.1 28.8998L60.3 5.89977V5.93311ZM61.8333 12.1664H64.8333C65.8333 12.1664 66.5667 13.0331 66.5 13.9998L65.7667 20.7331C65.7333 21.2664 65.2 21.5998 64.6667 21.4998C63.7876 21.3125 62.879 21.3125 62 21.4998C61.4667 21.5998 60.9333 21.2664 60.9 20.7331L60.2 13.9998C60.1766 13.7673 60.2024 13.5325 60.2756 13.3107C60.3488 13.0888 60.4679 12.8848 60.6251 12.712C60.7822 12.5391 60.974 12.4012 61.1879 12.3072C61.4018 12.2132 61.633 12.1653 61.8667 12.1664H61.8333ZM63.3333 30.4998C64.2174 30.4998 65.0652 30.1486 65.6903 29.5235C66.3155 28.8983 66.6667 28.0505 66.6667 27.1664C66.6667 26.2824 66.3155 25.4345 65.6903 24.8094C65.0652 24.1843 64.2174 23.8331 63.3333 23.8331C62.4493 23.8331 61.6014 24.1843 60.9763 24.8094C60.3512 25.4345 60 26.2824 60 27.1664C60 28.0505 60.3512 28.8983 60.9763 29.5235C61.6014 30.1486 62.4493 30.4998 63.3333 30.4998Z" fill="currentColor"/>
-      <path d="M38.1667 27.1662C39.3334 27.1662 40.1667 28.3329 40 29.4996C39.9334 30.1662 39.9334 30.8329 40 31.4996C40.1334 32.6662 39.3334 33.8329 38.1667 33.8329H32.8334L30.6 47.1662H47.1667L48.0334 41.9996C48.2 41.0996 49.0667 40.4996 50 40.4996H53.0667C54.1 40.4996 54.9 41.4329 54.7334 42.4329L53.9334 47.1662H66.6667C67.5507 47.1662 68.3986 47.5174 69.0237 48.1425C69.6488 48.7677 70 49.6155 70 50.4996C70 51.3836 69.6488 52.2315 69.0237 52.8566C68.3986 53.4817 67.5507 53.8329 66.6667 53.8329H52.8334L49.9667 71.0329C49.8252 71.9081 49.3419 72.6913 48.623 73.2101C47.9041 73.729 47.0086 73.941 46.1334 73.7996C45.2581 73.6581 44.475 73.1748 43.9561 72.4559C43.4373 71.737 43.2252 70.8414 43.3667 69.9662L46.0334 53.8329H29.5334L26.6667 71.0329C26.5966 71.4706 26.4411 71.8903 26.2089 72.2679C25.9766 72.6455 25.6723 72.9737 25.3133 73.2337C24.5881 73.7588 23.6841 73.9743 22.8 73.8329C21.916 73.6914 21.1243 73.2046 20.5992 72.4795C20.0741 71.7543 19.8586 70.8503 20 69.9662L22.7334 53.8329H10C9.11597 53.8329 8.26812 53.4817 7.643 52.8566C7.01788 52.2315 6.66669 51.3836 6.66669 50.4996C6.66669 49.6155 7.01788 48.7677 7.643 48.1425C8.26812 47.5174 9.11597 47.1662 10 47.1662H23.8334L26.0667 33.8329H13.3334C12.4493 33.8329 11.6015 33.4817 10.9763 32.8566C10.3512 32.2315 10 31.3836 10 30.4996C10 29.6155 10.3512 28.7677 10.9763 28.1425C11.6015 27.5174 12.4493 27.1662 13.3334 27.1662H27.1667L30.0334 9.96622C30.1748 9.09101 30.6581 8.30783 31.377 7.78898C31.733 7.53207 32.1361 7.34779 32.5632 7.24666C32.9904 7.14552 33.4333 7.12952 33.8667 7.19956C34.3 7.2696 34.7154 7.42431 35.0889 7.65485C35.4625 7.8854 35.787 8.18727 36.0439 8.54323C36.3008 8.89919 36.4851 9.30226 36.5863 9.72944C36.6874 10.1566 36.7034 10.5995 36.6334 11.0329L33.9667 27.1662H38.1667Z" fill="currentColor"/>
+    <svg width='80' height='81' viewBox='0 0 80 81' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path fillRule='evenodd' clipRule='evenodd' d='M60.3 5.93311C61.6333 3.59977 65.0667 3.59977 66.3667 5.93311L79.5667 28.9331C80.8333 31.1331 79.1667 33.8331 76.5333 33.8331H50.1333C47.5 33.8331 45.8 31.1331 47.1 28.8998L60.3 5.89977V5.93311ZM61.8333 12.1664H64.8333C65.8333 12.1664 66.5667 13.0331 66.5 13.9998L65.7667 20.7331C65.7333 21.2664 65.2 21.5998 64.6667 21.4998C63.7876 21.3125 62.879 21.3125 62 21.4998C61.4667 21.5998 60.9333 21.2664 60.9 20.7331L60.2 13.9998C60.1766 13.7673 60.2024 13.5325 60.2756 13.3107C60.3488 13.0888 60.4679 12.8848 60.6251 12.712C60.7822 12.5391 60.974 12.4012 61.1879 12.3072C61.4018 12.2132 61.633 12.1653 61.8667 12.1664H61.8333ZM63.3333 30.4998C64.2174 30.4998 65.0652 30.1486 65.6903 29.5235C66.3155 28.8983 66.6667 28.0505 66.6667 27.1664C66.6667 26.2824 66.3155 25.4345 65.6903 24.8094C65.0652 24.1843 64.2174 23.8331 63.3333 23.8331C62.4493 23.8331 61.6014 24.1843 60.9763 24.8094C60.3512 25.4345 60 26.2824 60 27.1664C60 28.0505 60.3512 28.8983 60.9763 29.5235C61.6014 30.1486 62.4493 30.4998 63.3333 30.4998Z' fill='currentColor'/>
+      <path d='M38.1667 27.1662C39.3334 27.1662 40.1667 28.3329 40 29.4996C39.9334 30.1662 39.9334 30.8329 40 31.4996C40.1334 32.6662 39.3334 33.8329 38.1667 33.8329H32.8334L30.6 47.1662H47.1667L48.0334 41.9996C48.2 41.0996 49.0667 40.4996 50 40.4996H53.0667C54.1 40.4996 54.9 41.4329 54.7334 42.4329L53.9334 47.1662H66.6667C67.5507 47.1662 68.3986 47.5174 69.0237 48.1425C69.6488 48.7677 70 49.6155 70 50.4996C70 51.3836 69.6488 52.2315 69.0237 52.8566C68.3986 53.4817 67.5507 53.8329 66.6667 53.8329H52.8334L49.9667 71.0329C49.8252 71.9081 49.3419 72.6913 48.623 73.2101C47.9041 73.729 47.0086 73.941 46.1334 73.7996C45.2581 73.6581 44.475 73.1748 43.9561 72.4559C43.4373 71.737 43.2252 70.8414 43.3667 69.9662L46.0334 53.8329H29.5334L26.6667 71.0329C26.5966 71.4706 26.4411 71.8903 26.2089 72.2679C25.9766 72.6455 25.6723 72.9737 25.3133 73.2337C24.5881 73.7588 23.6841 73.9743 22.8 73.8329C21.916 73.6914 21.1243 73.2046 20.5992 72.4795C20.0741 71.7543 19.8586 70.8503 20 69.9662L22.7334 53.8329H10C9.11597 53.8329 8.26812 53.4817 7.643 52.8566C7.01788 52.2315 6.66669 51.3836 6.66669 50.4996C6.66669 49.6155 7.01788 48.7677 7.643 48.1425C8.26812 47.5174 9.11597 47.1662 10 47.1662H23.8334L26.0667 33.8329H13.3334C12.4493 33.8329 11.6015 33.4817 10.9763 32.8566C10.3512 32.2315 10 31.3836 10 30.4996C10 29.6155 10.3512 28.7677 10.9763 28.1425C11.6015 27.5174 12.4493 27.1662 13.3334 27.1662H27.1667L30.0334 9.96622C30.1748 9.09101 30.6581 8.30783 31.377 7.78898C31.733 7.53207 32.1361 7.34779 32.5632 7.24666C32.9904 7.14552 33.4333 7.12952 33.8667 7.19956C34.3 7.2696 34.7154 7.42431 35.0889 7.65485C35.4625 7.8854 35.787 8.18727 36.0439 8.54323C36.3008 8.89919 36.4851 9.30226 36.5863 9.72944C36.6874 10.1566 36.7034 10.5995 36.6334 11.0329L33.9667 27.1662H38.1667Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/Threads/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/Threads/index.jsx
index 66d0df57..5ea98311 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/Threads/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/Threads/index.jsx
@@ -1,7 +1,7 @@
 export default function ThreadsIcon({ className }) {
   return (
-    <svg width="80" height="80" viewBox="0 0 80 80" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path d="M40 9.36702C39.3792 8.74248 39.0307 7.89764 39.0307 7.01702C39.0307 6.1364 39.3792 5.29156 40 4.66702L41.2 3.46702C41.8246 2.84618 42.6694 2.49771 43.55 2.49771C44.4306 2.49771 45.2755 2.84618 45.9 3.46702L76.5667 34.1337C77.1774 34.7568 77.5195 35.5945 77.5195 36.467C77.5195 37.3395 77.1774 38.1773 76.5667 38.8004L74.2334 41.1337C73.6831 41.7135 72.9427 42.0763 72.1472 42.1558C71.3518 42.2354 70.5543 42.0264 69.9 41.567L38.1 19.167C37.6821 18.8763 37.3362 18.4937 37.0891 18.0486C36.842 17.6034 36.7001 17.1076 36.6743 16.5991C36.6486 16.0906 36.7397 15.583 36.9406 15.1152C37.1415 14.6474 37.4469 14.2318 37.8334 13.9004L41.1667 10.567L40 9.33369V9.36702ZM40 70.667C40.6209 71.2916 40.9693 72.1364 40.9693 73.017C40.9693 73.8976 40.6209 74.7425 40 75.367L38.8334 76.5337C38.2088 77.1545 37.364 77.503 36.4834 77.503C35.6027 77.503 34.7579 77.1545 34.1334 76.5337L3.46668 45.9004C2.84585 45.2758 2.49738 44.431 2.49738 43.5504C2.49738 42.6697 2.84585 41.8249 3.46668 41.2004L5.80002 38.867C6.35459 38.2923 7.0971 37.9357 7.8924 37.8623C8.68771 37.7889 9.48294 38.0035 10.1334 38.467L41.9334 60.867C42.3492 61.1604 42.6923 61.5451 42.9364 61.9917C43.1806 62.4382 43.3192 62.9347 43.3417 63.4431C43.3643 63.9515 43.2701 64.4584 43.0664 64.9247C42.8627 65.3911 42.5549 65.8047 42.1667 66.1337L38.8334 69.467L40 70.667ZM52.2 56.0004C51.7113 56.7311 50.9537 57.2391 50.0921 57.4139C49.2306 57.5887 48.3349 57.4161 47.6 56.9337L19.3 38.067C18.9098 37.8363 18.5707 37.5285 18.3036 37.1623C18.0364 36.7961 17.8467 36.3792 17.7461 35.9372C17.6455 35.4952 17.6362 35.0373 17.7186 34.5916C17.801 34.1458 17.9735 33.7216 18.2254 33.3448C18.4774 32.9679 18.8036 32.6465 19.184 32.4C19.5645 32.1535 19.9912 31.9873 20.4381 31.9114C20.885 31.8354 21.3427 31.8515 21.7832 31.9585C22.2237 32.0655 22.6377 32.2612 23 32.5337L51.3 51.367C51.6638 51.6118 51.9757 51.9259 52.2178 52.2914C52.46 52.6569 52.6277 53.0666 52.7113 53.497C52.7949 53.9274 52.7928 54.37 52.7051 54.7996C52.6173 55.2292 52.4457 55.6372 52.2 56.0004ZM57 47.5004C57.3623 47.7728 57.7763 47.9686 58.2168 48.0756C58.6573 48.1826 59.115 48.1986 59.5619 48.1227C60.0088 48.0468 60.4355 47.8805 60.816 47.634C61.1964 47.3876 61.5226 47.0661 61.7746 46.6893C62.0266 46.3125 62.199 45.8882 62.2815 45.4425C62.3639 44.9967 62.3545 44.5388 62.2539 44.0968C62.1533 43.6548 61.9637 43.238 61.6965 42.8718C61.4293 42.5056 61.0902 42.1977 60.7 41.967L32.4333 23.1004C31.6999 22.6667 30.8282 22.5305 29.9974 22.7195C29.1666 22.9086 28.4397 23.4086 27.9661 24.1169C27.4925 24.8252 27.3081 25.688 27.4508 26.528C27.5934 27.368 28.0524 28.1215 28.7334 28.6337L57.0334 47.5004H57Z" fill="currentColor"/>
+    <svg width='80' height='80' viewBox='0 0 80 80' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path d='M40 9.36702C39.3792 8.74248 39.0307 7.89764 39.0307 7.01702C39.0307 6.1364 39.3792 5.29156 40 4.66702L41.2 3.46702C41.8246 2.84618 42.6694 2.49771 43.55 2.49771C44.4306 2.49771 45.2755 2.84618 45.9 3.46702L76.5667 34.1337C77.1774 34.7568 77.5195 35.5945 77.5195 36.467C77.5195 37.3395 77.1774 38.1773 76.5667 38.8004L74.2334 41.1337C73.6831 41.7135 72.9427 42.0763 72.1472 42.1558C71.3518 42.2354 70.5543 42.0264 69.9 41.567L38.1 19.167C37.6821 18.8763 37.3362 18.4937 37.0891 18.0486C36.842 17.6034 36.7001 17.1076 36.6743 16.5991C36.6486 16.0906 36.7397 15.583 36.9406 15.1152C37.1415 14.6474 37.4469 14.2318 37.8334 13.9004L41.1667 10.567L40 9.33369V9.36702ZM40 70.667C40.6209 71.2916 40.9693 72.1364 40.9693 73.017C40.9693 73.8976 40.6209 74.7425 40 75.367L38.8334 76.5337C38.2088 77.1545 37.364 77.503 36.4834 77.503C35.6027 77.503 34.7579 77.1545 34.1334 76.5337L3.46668 45.9004C2.84585 45.2758 2.49738 44.431 2.49738 43.5504C2.49738 42.6697 2.84585 41.8249 3.46668 41.2004L5.80002 38.867C6.35459 38.2923 7.0971 37.9357 7.8924 37.8623C8.68771 37.7889 9.48294 38.0035 10.1334 38.467L41.9334 60.867C42.3492 61.1604 42.6923 61.5451 42.9364 61.9917C43.1806 62.4382 43.3192 62.9347 43.3417 63.4431C43.3643 63.9515 43.2701 64.4584 43.0664 64.9247C42.8627 65.3911 42.5549 65.8047 42.1667 66.1337L38.8334 69.467L40 70.667ZM52.2 56.0004C51.7113 56.7311 50.9537 57.2391 50.0921 57.4139C49.2306 57.5887 48.3349 57.4161 47.6 56.9337L19.3 38.067C18.9098 37.8363 18.5707 37.5285 18.3036 37.1623C18.0364 36.7961 17.8467 36.3792 17.7461 35.9372C17.6455 35.4952 17.6362 35.0373 17.7186 34.5916C17.801 34.1458 17.9735 33.7216 18.2254 33.3448C18.4774 32.9679 18.8036 32.6465 19.184 32.4C19.5645 32.1535 19.9912 31.9873 20.4381 31.9114C20.885 31.8354 21.3427 31.8515 21.7832 31.9585C22.2237 32.0655 22.6377 32.2612 23 32.5337L51.3 51.367C51.6638 51.6118 51.9757 51.9259 52.2178 52.2914C52.46 52.6569 52.6277 53.0666 52.7113 53.497C52.7949 53.9274 52.7928 54.37 52.7051 54.7996C52.6173 55.2292 52.4457 55.6372 52.2 56.0004ZM57 47.5004C57.3623 47.7728 57.7763 47.9686 58.2168 48.0756C58.6573 48.1826 59.115 48.1986 59.5619 48.1227C60.0088 48.0468 60.4355 47.8805 60.816 47.634C61.1964 47.3876 61.5226 47.0661 61.7746 46.6893C62.0266 46.3125 62.199 45.8882 62.2815 45.4425C62.3639 44.9967 62.3545 44.5388 62.2539 44.0968C62.1533 43.6548 61.9637 43.238 61.6965 42.8718C61.4293 42.5056 61.0902 42.1977 60.7 41.967L32.4333 23.1004C31.6999 22.6667 30.8282 22.5305 29.9974 22.7195C29.1666 22.9086 28.4397 23.4086 27.9661 24.1169C27.4925 24.8252 27.3081 25.688 27.4508 26.528C27.5934 27.368 28.0524 28.1215 28.7334 28.6337L57.0334 47.5004H57Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/VoiceChannel/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/VoiceChannel/index.jsx
index b0e4c42a..6c0a7e33 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/VoiceChannel/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/VoiceChannel/index.jsx
@@ -1,8 +1,8 @@
 export default function VoiceChannelIcon({ className }) {
   return (
-    <svg width="80" height="81" viewBox="0 0 80 81" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path d="M40 10.5011C40 9.61702 39.6488 8.76917 39.0237 8.14405C38.3986 7.51893 37.5507 7.16774 36.6667 7.16774H36.4667C36.004 7.16461 35.5457 7.25783 35.1211 7.44147C34.6964 7.62512 34.3146 7.89516 34 8.23441L19.7333 23.8344H9.99999C9.11593 23.8344 8.26809 24.1856 7.64297 24.8107C7.01785 25.4358 6.66666 26.2837 6.66666 27.1677V53.8344C6.66666 54.7185 7.01785 55.5663 7.64297 56.1914C8.26809 56.8166 9.11593 57.1677 9.99999 57.1677H19.7333L34 72.7677C34.3146 73.107 34.6964 73.377 35.1211 73.5607C35.5457 73.7443 36.004 73.8375 36.4667 73.8344H36.6667C37.5507 73.8344 38.3986 73.4832 39.0237 72.8581C39.6488 72.233 40 71.3851 40 70.5011V10.5011ZM50.3333 69.6677C48.4 70.1344 46.6667 68.5677 46.6667 66.6011V66.5011C46.6667 64.8344 47.9 63.4344 49.5 63.0011C54.4289 61.6472 58.7769 58.7124 61.8758 54.6475C64.9747 50.5826 66.6532 45.6125 66.6532 40.5011C66.6532 35.3896 64.9747 30.4196 61.8758 26.3547C58.7769 22.2898 54.4289 19.3549 49.5 18.0011C48.7085 17.8107 48.0018 17.3645 47.4896 16.7317C46.9773 16.099 46.6881 15.3149 46.6667 14.5011V14.4011C46.6667 12.4011 48.4 10.8677 50.3333 11.3344C56.8816 12.9109 62.7088 16.645 66.8769 21.9357C71.045 27.2264 73.3115 33.7658 73.3115 40.5011C73.3115 47.2364 71.045 53.7758 66.8769 59.0664C62.7088 64.3571 56.8816 68.0913 50.3333 69.6677Z" fill="currentColor"/>
-      <path d="M50.5333 55.5342C48.6333 56.4675 46.6667 54.8675 46.6667 52.7675V52.3008C46.6667 50.8675 47.6 49.6342 48.7667 48.9008C50.1701 47.9943 51.3241 46.7505 52.1231 45.2832C52.9222 43.8158 53.3408 42.1716 53.3408 40.5008C53.3408 38.83 52.9222 37.1859 52.1231 35.7185C51.3241 34.2512 50.1701 33.0074 48.7667 32.1008C47.6 31.3342 46.6667 30.1008 46.6667 28.7008V28.2342C46.6667 26.1342 48.6333 24.5675 50.5333 25.4675C53.3692 26.8249 55.7633 28.9567 57.4392 31.6168C59.1151 34.2769 60.0044 37.3568 60.0044 40.5008C60.0044 43.6448 59.1151 46.7247 57.4392 49.3848C55.7633 52.045 53.3692 54.1768 50.5333 55.5342Z" fill="currentColor"/>
+    <svg width='80' height='81' viewBox='0 0 80 81' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path d='M40 10.5011C40 9.61702 39.6488 8.76917 39.0237 8.14405C38.3986 7.51893 37.5507 7.16774 36.6667 7.16774H36.4667C36.004 7.16461 35.5457 7.25783 35.1211 7.44147C34.6964 7.62512 34.3146 7.89516 34 8.23441L19.7333 23.8344H9.99999C9.11593 23.8344 8.26809 24.1856 7.64297 24.8107C7.01785 25.4358 6.66666 26.2837 6.66666 27.1677V53.8344C6.66666 54.7185 7.01785 55.5663 7.64297 56.1914C8.26809 56.8166 9.11593 57.1677 9.99999 57.1677H19.7333L34 72.7677C34.3146 73.107 34.6964 73.377 35.1211 73.5607C35.5457 73.7443 36.004 73.8375 36.4667 73.8344H36.6667C37.5507 73.8344 38.3986 73.4832 39.0237 72.8581C39.6488 72.233 40 71.3851 40 70.5011V10.5011ZM50.3333 69.6677C48.4 70.1344 46.6667 68.5677 46.6667 66.6011V66.5011C46.6667 64.8344 47.9 63.4344 49.5 63.0011C54.4289 61.6472 58.7769 58.7124 61.8758 54.6475C64.9747 50.5826 66.6532 45.6125 66.6532 40.5011C66.6532 35.3896 64.9747 30.4196 61.8758 26.3547C58.7769 22.2898 54.4289 19.3549 49.5 18.0011C48.7085 17.8107 48.0018 17.3645 47.4896 16.7317C46.9773 16.099 46.6881 15.3149 46.6667 14.5011V14.4011C46.6667 12.4011 48.4 10.8677 50.3333 11.3344C56.8816 12.9109 62.7088 16.645 66.8769 21.9357C71.045 27.2264 73.3115 33.7658 73.3115 40.5011C73.3115 47.2364 71.045 53.7758 66.8769 59.0664C62.7088 64.3571 56.8816 68.0913 50.3333 69.6677Z' fill='currentColor'/>
+      <path d='M50.5333 55.5342C48.6333 56.4675 46.6667 54.8675 46.6667 52.7675V52.3008C46.6667 50.8675 47.6 49.6342 48.7667 48.9008C50.1701 47.9943 51.3241 46.7505 52.1231 45.2832C52.9222 43.8158 53.3408 42.1716 53.3408 40.5008C53.3408 38.83 52.9222 37.1859 52.1231 35.7185C51.3241 34.2512 50.1701 33.0074 48.7667 32.1008C47.6 31.3342 46.6667 30.1008 46.6667 28.7008V28.2342C46.6667 26.1342 48.6333 24.5675 50.5333 25.4675C53.3692 26.8249 55.7633 28.9567 57.4392 31.6168C59.1151 34.2769 60.0044 37.3568 60.0044 40.5008C60.0044 43.6448 59.1151 46.7247 57.4392 49.3848C55.7633 52.045 53.3692 54.1768 50.5333 55.5342Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Icons/VoiceChannelNSFW/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Icons/VoiceChannelNSFW/index.jsx
index 706af365..22211d8f 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Icons/VoiceChannelNSFW/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Icons/VoiceChannelNSFW/index.jsx
@@ -1,8 +1,8 @@
 export default function VoiceChannelNSFWIcon({ className }) {
   return (
-    <svg width="80" height="81" viewBox="0 0 80 81" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M60.3 5.93427C61.6334 3.60093 65.0667 3.60093 66.3667 5.93427L79.5667 28.9343C80.8334 31.1343 79.1667 33.8343 76.5334 33.8343H50.1334C47.5 33.8343 45.8 31.1343 47.1 28.9009L60.3 5.90093V5.93427ZM61.8334 12.1676H64.8334C65.8334 12.1676 66.5667 13.0343 66.5001 14.0009L65.7667 20.7343C65.7334 21.2676 65.2 21.6009 64.6667 21.5009C63.7877 21.3137 62.8791 21.3137 62 21.5009C61.4667 21.6009 60.9334 21.2676 60.9001 20.7343L60.2 14.0009C60.1767 13.7685 60.2024 13.5337 60.2757 13.3118C60.3489 13.09 60.468 12.886 60.6251 12.7131C60.7823 12.5402 60.974 12.4023 61.1879 12.3084C61.4018 12.2144 61.6331 12.1664 61.8667 12.1676H61.8334ZM63.3334 30.5009C64.2174 30.5009 65.0653 30.1497 65.6904 29.5246C66.3155 28.8995 66.6667 28.0517 66.6667 27.1676C66.6667 26.2835 66.3155 25.4357 65.6904 24.8106C65.0653 24.1855 64.2174 23.8343 63.3334 23.8343C62.4493 23.8343 61.6015 24.1855 60.9764 24.8106C60.3512 25.4357 60 26.2835 60 27.1676C60 28.0517 60.3512 28.8995 60.9764 29.5246C61.6015 30.1497 62.4493 30.5009 63.3334 30.5009Z" fill="currentColor"/>
-      <path d="M36.6667 7.16774C37.5507 7.16774 38.3986 7.51893 39.0237 8.14405C39.6488 8.76917 40 9.61702 40 10.5011V70.5011C40 71.3851 39.6488 72.233 39.0237 72.8581C38.3986 73.4832 37.5507 73.8344 36.6667 73.8344H36.4667C36.004 73.8375 35.5458 73.7443 35.1211 73.5607C34.6964 73.377 34.3146 73.107 34 72.7677L19.7334 57.1677H10C9.11597 57.1677 8.26812 56.8166 7.643 56.1914C7.01788 55.5663 6.66669 54.7185 6.66669 53.8344V27.1677C6.66669 26.2837 7.01788 25.4358 7.643 24.8107C8.26812 24.1856 9.11597 23.8344 10 23.8344H19.7334L34 8.23441C34.3146 7.89516 34.6964 7.62512 35.1211 7.44147C35.5458 7.25783 36.004 7.16461 36.4667 7.16774H36.6667ZM68.3334 40.5011C67.4 40.5011 66.6667 41.2344 66.6 42.1677C66.2548 46.9826 64.4249 51.5718 61.3623 55.3031C58.2996 59.0343 54.1552 61.7239 49.5 63.0011C47.9 63.4344 46.6667 64.8344 46.6667 66.5011V66.6011C46.6667 68.6011 48.4 70.1344 50.3334 69.6677C56.6105 68.1646 62.2354 64.677 66.3729 59.7228C70.5103 54.7687 72.9396 48.6123 73.3 42.1677C73.3092 41.9492 73.2735 41.7312 73.1951 41.527C73.1167 41.3229 72.9972 41.137 72.8442 40.9808C72.6911 40.8246 72.5076 40.7015 72.3051 40.619C72.1026 40.5364 71.8853 40.4963 71.6667 40.5011H68.3334ZM55 40.5011C54.0667 40.5011 53.3334 41.2677 53.2 42.1677C52.9688 43.5363 52.4552 44.8417 51.6919 46.001C50.9287 47.1602 49.9325 48.1478 48.7667 48.9011C47.6 49.6677 46.6667 50.9011 46.6667 52.3011V52.7677C46.6667 54.8677 48.6334 56.4344 50.5334 55.5344C53.116 54.301 55.3375 52.4233 56.9839 50.0822C58.6303 47.741 59.6461 45.0154 59.9333 42.1677C60 41.2344 59.2667 40.5011 58.3334 40.5011H55Z" fill="currentColor"/>
+    <svg width='80' height='81' viewBox='0 0 80 81' fill='currentColor' className={className} xmlns='http://www.w3.org/2000/svg'>
+      <path fillRule='evenodd' clipRule='evenodd' d='M60.3 5.93427C61.6334 3.60093 65.0667 3.60093 66.3667 5.93427L79.5667 28.9343C80.8334 31.1343 79.1667 33.8343 76.5334 33.8343H50.1334C47.5 33.8343 45.8 31.1343 47.1 28.9009L60.3 5.90093V5.93427ZM61.8334 12.1676H64.8334C65.8334 12.1676 66.5667 13.0343 66.5001 14.0009L65.7667 20.7343C65.7334 21.2676 65.2 21.6009 64.6667 21.5009C63.7877 21.3137 62.8791 21.3137 62 21.5009C61.4667 21.6009 60.9334 21.2676 60.9001 20.7343L60.2 14.0009C60.1767 13.7685 60.2024 13.5337 60.2757 13.3118C60.3489 13.09 60.468 12.886 60.6251 12.7131C60.7823 12.5402 60.974 12.4023 61.1879 12.3084C61.4018 12.2144 61.6331 12.1664 61.8667 12.1676H61.8334ZM63.3334 30.5009C64.2174 30.5009 65.0653 30.1497 65.6904 29.5246C66.3155 28.8995 66.6667 28.0517 66.6667 27.1676C66.6667 26.2835 66.3155 25.4357 65.6904 24.8106C65.0653 24.1855 64.2174 23.8343 63.3334 23.8343C62.4493 23.8343 61.6015 24.1855 60.9764 24.8106C60.3512 25.4357 60 26.2835 60 27.1676C60 28.0517 60.3512 28.8995 60.9764 29.5246C61.6015 30.1497 62.4493 30.5009 63.3334 30.5009Z' fill='currentColor'/>
+      <path d='M36.6667 7.16774C37.5507 7.16774 38.3986 7.51893 39.0237 8.14405C39.6488 8.76917 40 9.61702 40 10.5011V70.5011C40 71.3851 39.6488 72.233 39.0237 72.8581C38.3986 73.4832 37.5507 73.8344 36.6667 73.8344H36.4667C36.004 73.8375 35.5458 73.7443 35.1211 73.5607C34.6964 73.377 34.3146 73.107 34 72.7677L19.7334 57.1677H10C9.11597 57.1677 8.26812 56.8166 7.643 56.1914C7.01788 55.5663 6.66669 54.7185 6.66669 53.8344V27.1677C6.66669 26.2837 7.01788 25.4358 7.643 24.8107C8.26812 24.1856 9.11597 23.8344 10 23.8344H19.7334L34 8.23441C34.3146 7.89516 34.6964 7.62512 35.1211 7.44147C35.5458 7.25783 36.004 7.16461 36.4667 7.16774H36.6667ZM68.3334 40.5011C67.4 40.5011 66.6667 41.2344 66.6 42.1677C66.2548 46.9826 64.4249 51.5718 61.3623 55.3031C58.2996 59.0343 54.1552 61.7239 49.5 63.0011C47.9 63.4344 46.6667 64.8344 46.6667 66.5011V66.6011C46.6667 68.6011 48.4 70.1344 50.3334 69.6677C56.6105 68.1646 62.2354 64.677 66.3729 59.7228C70.5103 54.7687 72.9396 48.6123 73.3 42.1677C73.3092 41.9492 73.2735 41.7312 73.1951 41.527C73.1167 41.3229 72.9972 41.137 72.8442 40.9808C72.6911 40.8246 72.5076 40.7015 72.3051 40.619C72.1026 40.5364 71.8853 40.4963 71.6667 40.5011H68.3334ZM55 40.5011C54.0667 40.5011 53.3334 41.2677 53.2 42.1677C52.9688 43.5363 52.4552 44.8417 51.6919 46.001C50.9287 47.1602 49.9325 48.1478 48.7667 48.9011C47.6 49.6677 46.6667 50.9011 46.6667 52.3011V52.7677C46.6667 54.8677 48.6334 56.4344 50.5334 55.5344C53.116 54.301 55.3375 52.4233 56.9839 50.0822C58.6303 47.741 59.6461 45.0154 59.9333 42.1677C60 41.2344 59.2667 40.5011 58.3334 40.5011H55Z' fill='currentColor'/>
     </svg>
   );
 }
\ No newline at end of file
diff --git a/client/app/(templates)/templates/[id]/preview/components/Sidebar/index.jsx b/client/app/(templates)/templates/[id]/preview/components/Sidebar/index.jsx
index c3934cfb..8f36b18d 100644
--- a/client/app/(templates)/templates/[id]/preview/components/Sidebar/index.jsx
+++ b/client/app/(templates)/templates/[id]/preview/components/Sidebar/index.jsx
@@ -65,9 +65,9 @@ export default function Sidebar({ template, focusedChannel, currentlyOpenedSecti
   }, [templateIdCopied]);
 
   return (
-    <div className="flex min-h-full w-max flex-col items-center gap-y-2 bg-[#1e1f22] px-[14px] pt-4">
-      <div className="flex size-[48px] cursor-pointer items-center justify-center rounded-[100%] bg-[#313338] transition-all duration-100 ease-in-out hover:rounded-2xl hover:bg-[#5865F2]">
-        <FaDiscord className="text-[#dbdee1]" size={28} />
+    <div className='flex min-h-full w-max flex-col items-center gap-y-2 bg-[#1e1f22] px-[14px] pt-4'>
+      <div className='flex size-[48px] cursor-pointer items-center justify-center rounded-[100%] bg-[#313338] transition-all duration-100 ease-in-out hover:rounded-2xl hover:bg-[#5865F2]'>
+        <FaDiscord className='text-[#dbdee1]' size={28} />
       </div>
 
       <div className='h-[2px] w-[65%] rounded-[1px] bg-[#35363c]' />
@@ -87,8 +87,8 @@ export default function Sidebar({ template, focusedChannel, currentlyOpenedSecti
           theme='discord'
         >
           <Image
-            src="/templates/square_logo.png"
-            alt="discord.place Square Logo"
+            src='/templates/square_logo.png'
+            alt='discord.place Square Logo'
             width={48}
             height={48}
             className='select-none rounded-2xl'
@@ -113,8 +113,8 @@ export default function Sidebar({ template, focusedChannel, currentlyOpenedSecti
           theme='discord'
         >
           <Image
-            src="/templates/disbot_logo.png"
-            alt="Disbot Square Logo"
+            src='/templates/disbot_logo.png'
+            alt='Disbot Square Logo'
             width={48}
             height={48}
             className='select-none rounded-2xl'
@@ -126,7 +126,7 @@ export default function Sidebar({ template, focusedChannel, currentlyOpenedSecti
         content={t('templatePreviewPage.tooltip.addAServer')}
         side='right'
       >
-        <div className="flex size-[48px] cursor-pointer items-center justify-center rounded-[100%] bg-[#313338] text-[#23a559] transition-all duration-100 ease-in-out hover:rounded-2xl hover:bg-[#23a559] hover:text-white">
+        <div className='flex size-[48px] cursor-pointer items-center justify-center rounded-[100%] bg-[#313338] text-[#23a559] transition-all duration-100 ease-in-out hover:rounded-2xl hover:bg-[#23a559] hover:text-white'>
           <HiPlus size={24} />
         </div>
       </Tooltip>
@@ -135,7 +135,7 @@ export default function Sidebar({ template, focusedChannel, currentlyOpenedSecti
         content={t('templatePreviewPage.tooltip.exploreDiscoverableServers')}
         side='right'
       >
-        <div className="flex size-[48px] cursor-pointer items-center justify-center rounded-[100%] bg-[#313338] text-[#23a559] transition-all duration-100 ease-in-out hover:rounded-2xl hover:bg-[#23a559] hover:text-white">
+        <div className='flex size-[48px] cursor-pointer items-center justify-center rounded-[100%] bg-[#313338] text-[#23a559] transition-all duration-100 ease-in-out hover:rounded-2xl hover:bg-[#23a559] hover:text-white'>
           <FaCompass size={24} />
         </div>
       </Tooltip>
@@ -143,7 +143,7 @@ export default function Sidebar({ template, focusedChannel, currentlyOpenedSecti
       {isMobile && (
         <>
           <div
-            className="flex size-[48px] cursor-pointer items-center justify-center rounded-[100%] bg-[#313338] text-[#23a559] transition-all duration-100 ease-in-out hover:rounded-2xl hover:bg-[#23a559] hover:text-white"
+            className='flex size-[48px] cursor-pointer items-center justify-center rounded-[100%] bg-[#313338] text-[#23a559] transition-all duration-100 ease-in-out hover:rounded-2xl hover:bg-[#23a559] hover:text-white'
             onClick={() => {
               if (currentlyOpenedSection === 'members') setCurrentlyOpenedSection('channels');
               else {
@@ -196,7 +196,7 @@ export default function Sidebar({ template, focusedChannel, currentlyOpenedSecti
         side='right'
       >
         <div
-          className="flex size-[48px] cursor-pointer items-center justify-center rounded-[100%] bg-[#313338] text-[#23a559] transition-all duration-100 ease-in-out hover:rounded-2xl hover:bg-[#23a559] hover:text-white"
+          className='flex size-[48px] cursor-pointer items-center justify-center rounded-[100%] bg-[#313338] text-[#23a559] transition-all duration-100 ease-in-out hover:rounded-2xl hover:bg-[#23a559] hover:text-white'
           onClick={() => router.back()}
         >
           <IoMdArrowRoundBack size={24} />
@@ -243,7 +243,7 @@ export default function Sidebar({ template, focusedChannel, currentlyOpenedSecti
           side='right'
         >
           <div
-            className="flex size-[48px] cursor-pointer items-center justify-center rounded-[100%] bg-[#313338] text-[#ff4d4d] transition-all duration-100 ease-in-out hover:rounded-2xl hover:bg-[#ff4d4d] hover:text-white"
+            className='flex size-[48px] cursor-pointer items-center justify-center rounded-[100%] bg-[#313338] text-[#ff4d4d] transition-all duration-100 ease-in-out hover:rounded-2xl hover:bg-[#ff4d4d] hover:text-white'
             onClick={() =>
               openModal('delete-template', {
                 title: t('templatePreviewPage.deleteTemplateModal.title'),
diff --git a/client/app/(templates)/templates/[id]/preview/content.js b/client/app/(templates)/templates/[id]/preview/content.js
index 409e7058..1ac88bef 100644
--- a/client/app/(templates)/templates/[id]/preview/content.js
+++ b/client/app/(templates)/templates/[id]/preview/content.js
@@ -30,7 +30,7 @@ export default function Content({ template }) {
   if (!focusedChannel) return <FullPageLoading />;
 
   return (
-    <div className="flex size-full min-h-svh">
+    <div className='flex size-full min-h-svh'>
       <Sidebar
         template={template}
         focusedChannel={focusedChannel}
diff --git a/client/app/(templates)/templates/components/Hero/SearchResults/Card/index.jsx b/client/app/(templates)/templates/components/Hero/SearchResults/Card/index.jsx
index 24b27f61..0fd36eaf 100644
--- a/client/app/(templates)/templates/components/Hero/SearchResults/Card/index.jsx
+++ b/client/app/(templates)/templates/components/Hero/SearchResults/Card/index.jsx
@@ -45,29 +45,29 @@ export default function Card({ data, className }) {
         during={1000}
       >
         <Link
-          className="flex h-max w-full cursor-pointer select-none items-center gap-x-4 rounded-3xl bg-secondary p-3 transition-all hover:opacity-70"
+          className='flex h-max w-full cursor-pointer select-none items-center gap-x-4 rounded-3xl bg-secondary p-3 transition-all hover:opacity-70'
           onClick={() => setIsClicked(true)}
           href={`/templates/${data.id}/preview`}
         >
-          <div className="flex size-[100px] min-h-[100px] min-w-[100px] items-center justify-center rounded-2xl bg-quaternary text-3xl font-bold mobile:size-[140px] mobile:min-h-[140px] mobile:min-w-[140px] sm:text-5xl">
+          <div className='flex size-[100px] min-h-[100px] min-w-[100px] items-center justify-center rounded-2xl bg-quaternary text-3xl font-bold mobile:size-[140px] mobile:min-h-[140px] mobile:min-w-[140px] sm:text-5xl'>
             {getCompressedName(data.name)}
           </div>
 
-          <div className="flex flex-col gap-y-2">
-            <h2 className="mt-2 max-w-[130px] truncate text-lg font-semibold text-primary mobile:max-w-[230px]">
+          <div className='flex flex-col gap-y-2'>
+            <h2 className='mt-2 max-w-[130px] truncate text-lg font-semibold text-primary mobile:max-w-[230px]'>
               {data.name}
             </h2>
 
-            <div className="flex gap-x-1 truncate">
+            <div className='flex gap-x-1 truncate'>
               {data.categories.map(category => (
-                <span className="flex items-center gap-x-1 rounded-md bg-quaternary px-2 py-1 text-xs font-medium text-secondary" key={category}>
+                <span className='flex items-center gap-x-1 rounded-md bg-quaternary px-2 py-1 text-xs font-medium text-secondary' key={category}>
                   {config.templateCategoriesIcons[category]}
                   {t(`categories.${category}`)}
                 </span>
               ))}
             </div>
 
-            <p className="line-clamp-2 whitespace-pre-wrap break-all text-xs text-tertiary mobile:text-sm">
+            <p className='line-clamp-2 whitespace-pre-wrap break-all text-xs text-tertiary mobile:text-sm'>
               {data.description}
             </p>
 
diff --git a/client/app/(templates)/templates/components/Hero/index.jsx b/client/app/(templates)/templates/components/Hero/index.jsx
index 3ab319f9..71e343cd 100644
--- a/client/app/(templates)/templates/components/Hero/index.jsx
+++ b/client/app/(templates)/templates/components/Hero/index.jsx
@@ -34,7 +34,7 @@ export default function Hero() {
   };
 
   return (
-    <div className="relative z-0 flex flex-col items-center px-4 pt-56 sm:px-0">
+    <div className='relative z-0 flex flex-col items-center px-4 pt-56 sm:px-0'>
       <Square column='10' row='10' transparentEffectDirection='bottomToTop' blockColor='rgba(var(--bg-secondary))' />
 
       <div className='absolute top-[-15%] h-[300px] w-full max-w-[800px] rounded-[5rem] bg-[#ffffff10] blur-[15rem]' />
@@ -52,7 +52,7 @@ export default function Hero() {
           {t('templatesPage.title')}
         </motion.h1>
 
-        <motion.span className="mt-8 max-w-[700px] text-center text-tertiary sm:text-lg" initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
+        <motion.span className='mt-8 max-w-[700px] text-center text-tertiary sm:text-lg' initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
           {t('templatesPage.subtitle', { br: <br /> })}
         </motion.span>
 
diff --git a/client/app/(templates)/templates/create/page.js b/client/app/(templates)/templates/create/page.js
index 5d287eae..b4d0d0a6 100644
--- a/client/app/(templates)/templates/create/page.js
+++ b/client/app/(templates)/templates/create/page.js
@@ -65,15 +65,15 @@ export default function Page() {
 
   return (
     <AuthProtected>
-      <div className="relative z-0 flex w-full justify-center px-6 lg:px-0">
+      <div className='relative z-0 flex w-full justify-center px-6 lg:px-0'>
         <Square column='10' row='10' transparentEffectDirection='bottomToTop' blockColor='rgba(var(--bg-secondary))' />
 
-        <div className="mb-16 mt-48 flex w-full max-w-[600px] flex-col gap-y-2">
-          <h1 className="text-4xl font-bold text-primary">
+        <div className='mb-16 mt-48 flex w-full max-w-[600px] flex-col gap-y-2'>
+          <h1 className='text-4xl font-bold text-primary'>
             {t('publishTemplatePage.title')}
           </h1>
 
-          <p className="text-sm text-tertiary">
+          <p className='text-sm text-tertiary'>
             {t('publishTemplatePage.subtitle')}
           </p>
 
diff --git a/client/app/(themes)/themes/[id]/components/FaQs/Questions/3.jsx b/client/app/(themes)/themes/[id]/components/FaQs/Questions/3.jsx
index 4d07d2f9..209b7b99 100644
--- a/client/app/(themes)/themes/[id]/components/FaQs/Questions/3.jsx
+++ b/client/app/(themes)/themes/[id]/components/FaQs/Questions/3.jsx
@@ -2,7 +2,7 @@ import { t } from '@/stores/language';
 
 export default function Question3() {
   return (
-    <p className="mt-2">
+    <p className='mt-2'>
       {t('themePage.frequentlyAskedQuestions.answers.2')}
     </p>
   );
diff --git a/client/app/(themes)/themes/components/Themes/index.jsx b/client/app/(themes)/themes/components/Themes/index.jsx
index 94f8a5d9..40adeb2b 100644
--- a/client/app/(themes)/themes/components/Themes/index.jsx
+++ b/client/app/(themes)/themes/components/Themes/index.jsx
@@ -82,7 +82,7 @@ export default function Themes() {
         >
           {loading ? (
             new Array(limit).fill(0).map((_, index) => (
-              <div key={index} className="h-[200px] w-full animate-pulse rounded-2xl bg-secondary" />
+              <div key={index} className='h-[200px] w-full animate-pulse rounded-2xl bg-secondary' />
             ))
           ) : (
             themes.map(theme => (
diff --git a/client/app/(themes)/themes/content.js b/client/app/(themes)/themes/content.js
index 8b3231c3..7172935c 100644
--- a/client/app/(themes)/themes/content.js
+++ b/client/app/(themes)/themes/content.js
@@ -41,7 +41,7 @@ export default function Content() {
   }, []);
 
   return (
-    <div className="relative z-0 flex flex-col items-center px-4 pt-56 sm:px-0">
+    <div className='relative z-0 flex flex-col items-center px-4 pt-56 sm:px-0'>
       <Square
         column='10'
         row='10'
@@ -64,7 +64,7 @@ export default function Content() {
           {t('themesPage.title')}
         </motion.h1>
 
-        <motion.span className="mt-8 max-w-[700px] text-center text-tertiary sm:text-lg" initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
+        <motion.span className='mt-8 max-w-[700px] text-center text-tertiary sm:text-lg' initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.2 }}>
           {t('themesPage.subtitle')}
         </motion.span>
 
diff --git a/client/app/api/og/content/Blog.jsx b/client/app/api/og/content/Blog.jsx
index 1677f8db..7b58607a 100644
--- a/client/app/api/og/content/Blog.jsx
+++ b/client/app/api/og/content/Blog.jsx
@@ -49,7 +49,7 @@ export default function Blog({ data }) {
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <FiArrowRightCircle size={32} color="#43b459" style={{ transform: 'rotate(-45deg)' }} />
+          <FiArrowRightCircle size={32} color='#43b459' style={{ transform: 'rotate(-45deg)' }} />
 
           <span style={{ fontSize: '32px', fontWeight: 500 }}>
             {new Date(data.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}
diff --git a/client/app/api/og/content/Bot.jsx b/client/app/api/og/content/Bot.jsx
index 74a31efe..eeb65eac 100644
--- a/client/app/api/og/content/Bot.jsx
+++ b/client/app/api/og/content/Bot.jsx
@@ -76,7 +76,7 @@ export default function Bot({ data, avatar_base64 }) {
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <TbSquareRoundedChevronUp size={32} color="#c7c7c7" />
+          <TbSquareRoundedChevronUp size={32} color='#c7c7c7' />
 
           <span style={{ fontSize: '32px', fontWeight: 500 }}>
             {formatter.format(data.votes)}
diff --git a/client/app/api/og/content/Emoji.jsx b/client/app/api/og/content/Emoji.jsx
index b20ad32b..94555463 100644
--- a/client/app/api/og/content/Emoji.jsx
+++ b/client/app/api/og/content/Emoji.jsx
@@ -129,7 +129,7 @@ export default function Emoji({ data, avatar_base64 }) {
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <HiDocumentDownload size={32} color="#c7c7c7" />
+          <HiDocumentDownload size={32} color='#c7c7c7' />
 
           <span style={{ fontSize: '32px', fontWeight: 500 }}>
             {formatter.format(data.downloads)}
diff --git a/client/app/api/og/content/Profile.jsx b/client/app/api/og/content/Profile.jsx
index 8912a671..d30b2499 100644
--- a/client/app/api/og/content/Profile.jsx
+++ b/client/app/api/og/content/Profile.jsx
@@ -81,7 +81,7 @@ export default function Profile({ data, avatar_base64 }) {
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <FaHeart size={32} color="#ff0036" />
+          <FaHeart size={32} color='#ff0036' />
 
           <span style={{ fontSize: '32px', fontWeight: 500 }}>
             {formatter.format(data.likes)}
@@ -89,7 +89,7 @@ export default function Profile({ data, avatar_base64 }) {
         </div>
 
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <FaRegEye size={32} color="#c7c7c7" />
+          <FaRegEye size={32} color='#c7c7c7' />
 
           <span style={{ fontSize: '32px', fontWeight: 500 }}>
             {formatter.format(data.views)}
@@ -97,7 +97,7 @@ export default function Profile({ data, avatar_base64 }) {
         </div>
 
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <FiArrowRightCircle size={32} color="#43b459" style={{ transform: 'rotate(-45deg)' }} />
+          <FiArrowRightCircle size={32} color='#43b459' style={{ transform: 'rotate(-45deg)' }} />
 
           <span style={{ fontSize: '32px', fontWeight: 500 }}>
             {new Date(data.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}
diff --git a/client/app/api/og/content/Server.jsx b/client/app/api/og/content/Server.jsx
index 5009b0b2..504aa56d 100644
--- a/client/app/api/og/content/Server.jsx
+++ b/client/app/api/og/content/Server.jsx
@@ -88,7 +88,7 @@ export default function Server({ data, icon_base64 }) {
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <FaUsers size={32} color="#c7c7c7" />
+          <FaUsers size={32} color='#c7c7c7' />
 
           <span style={{ fontSize: '32px', fontWeight: 500 }}>
             {membersFormatter.format(data.members)}
@@ -96,7 +96,7 @@ export default function Server({ data, icon_base64 }) {
         </div>
 
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <TbSquareRoundedChevronUp size={32} color="#c7c7c7" />
+          <TbSquareRoundedChevronUp size={32} color='#c7c7c7' />
 
           <span style={{ fontSize: '32px', fontWeight: 500 }}>
             {formatter.format(data.votes)}
diff --git a/client/app/api/og/content/Sound.jsx b/client/app/api/og/content/Sound.jsx
index ac099179..2e6d05aa 100644
--- a/client/app/api/og/content/Sound.jsx
+++ b/client/app/api/og/content/Sound.jsx
@@ -52,7 +52,7 @@ export default function Sound({ data, avatar_base64 }) {
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <FaHeart size={32} color="#ff0036" />
+          <FaHeart size={32} color='#ff0036' />
 
           <span style={{ fontSize: '32px', fontWeight: 500 }}>
             {formatter.format(data.likes)}
@@ -60,7 +60,7 @@ export default function Sound({ data, avatar_base64 }) {
         </div>
 
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <HiDocumentDownload size={32} color="#c7c7c7" />
+          <HiDocumentDownload size={32} color='#c7c7c7' />
 
           <span style={{ fontSize: '32px', fontWeight: 500 }}>
             {formatter.format(data.downloads)}
@@ -68,7 +68,7 @@ export default function Sound({ data, avatar_base64 }) {
         </div>
 
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <FiArrowRightCircle size={32} color="#43b459" style={{ transform: 'rotate(-45deg)' }} />
+          <FiArrowRightCircle size={32} color='#43b459' style={{ transform: 'rotate(-45deg)' }} />
 
           <span style={{ fontSize: '32px', fontWeight: 500 }}>
             {new Date(data.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}
diff --git a/client/app/api/og/content/Template.jsx b/client/app/api/og/content/Template.jsx
index 8ae43593..8433f4c0 100644
--- a/client/app/api/og/content/Template.jsx
+++ b/client/app/api/og/content/Template.jsx
@@ -80,7 +80,7 @@ export default function Profile({ data, avatar_base64 }) {
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <FaStar size={32} color="#c7c7c7" />
+          <FaStar size={32} color='#c7c7c7' />
 
           <span style={{ fontSize: '32px', fontWeight: 500 }}>
             {formatter.format(data.uses)}
diff --git a/client/app/api/og/route.jsx b/client/app/api/og/route.jsx
index 933d63a6..a2837ad9 100644
--- a/client/app/api/og/route.jsx
+++ b/client/app/api/og/route.jsx
@@ -161,7 +161,7 @@ export async function GET(request) {
           <img
             src={`http://127.0.0.1:${process.env.NEXT_PUBLIC_PORT}/symbol_white.png`}
             style={{ width: '56px', height: '56px', marginLeft: '20px' }}
-            alt="discord.place Logo"
+            alt='discord.place Logo'
           />
 
           <h1 style={{ fontSize: '32px', fontWeight: 700 }}>discord.place</h1>
diff --git a/client/app/components/Background/Square.jsx b/client/app/components/Background/Square.jsx
index 4f3a2966..6222a714 100644
--- a/client/app/components/Background/Square.jsx
+++ b/client/app/components/Background/Square.jsx
@@ -2,7 +2,7 @@ export default function Square({ column, row, transparentEffectDirection, blockC
   return (
     <>
       <div
-        className="absolute inset-0 -z-10 size-full"
+        className='absolute inset-0 -z-10 size-full'
         style={{
           backgroundSize: `${column}rem ${row}rem`,
           backgroundImage: `linear-gradient(to right, ${blockColor} 1px, transparent 1px), linear-gradient(to bottom, ${blockColor} 1px, transparent 1px)`,
@@ -12,7 +12,7 @@ export default function Square({ column, row, transparentEffectDirection, blockC
 
       {transparentEffectDirection == 'bottomToTop' && (
         <div
-          className="absolute inset-0 z-[-9] size-full bg-gradient-to-t from-[rgba(var(--bg-background))]" style={{
+          className='absolute inset-0 z-[-9] size-full bg-gradient-to-t from-[rgba(var(--bg-background))]' style={{
             zIndex: zIndex ? zIndex + 1 : '-10'
           }}
         />
@@ -21,25 +21,25 @@ export default function Square({ column, row, transparentEffectDirection, blockC
       {transparentEffectDirection == 'leftRightBottomTop' && (
         <>
           <div
-            className="absolute inset-0 z-[-9] size-full bg-gradient-to-t from-[rgba(var(--bg-background))] via-[rgba(var(--bg-background))]/[0.1]" style={{
+            className='absolute inset-0 z-[-9] size-full bg-gradient-to-t from-[rgba(var(--bg-background))] via-[rgba(var(--bg-background))]/[0.1]' style={{
               zIndex: zIndex ? zIndex + 1 : '-10'
             }}
           />
 
           <div
-            className="absolute inset-0 z-[9] size-full bg-gradient-to-b from-[rgba(var(--bg-background))] via-[rgba(var(--bg-background))]/[0.1]" style={{
+            className='absolute inset-0 z-[9] size-full bg-gradient-to-b from-[rgba(var(--bg-background))] via-[rgba(var(--bg-background))]/[0.1]' style={{
               zIndex: zIndex ? zIndex + 1 : '-10'
             }}
           />
 
           <div
-            className="absolute inset-0 z-[-9] size-full bg-gradient-to-l from-[rgba(var(--bg-background))] via-[rgba(var(--bg-background))]/[0.1]" style={{
+            className='absolute inset-0 z-[-9] size-full bg-gradient-to-l from-[rgba(var(--bg-background))] via-[rgba(var(--bg-background))]/[0.1]' style={{
               zIndex: zIndex ? zIndex + 1 : '-10'
             }}
           />
 
           <div
-            className="absolute inset-0 z-[-9] size-full bg-gradient-to-r from-[rgba(var(--bg-background))] via-[rgba(var(--bg-background))]/[0.1]" style={{
+            className='absolute inset-0 z-[-9] size-full bg-gradient-to-r from-[rgba(var(--bg-background))] via-[rgba(var(--bg-background))]/[0.1]' style={{
               zIndex: zIndex ? zIndex + 1 : '-10'
             }}
           />
diff --git a/client/app/components/CookieBanner/index.jsx b/client/app/components/CookieBanner/index.jsx
index 1efcf22b..539b9255 100644
--- a/client/app/components/CookieBanner/index.jsx
+++ b/client/app/components/CookieBanner/index.jsx
@@ -16,15 +16,15 @@ export default function CookieBanner() {
 
   return (
     showCookieBanner && (
-      <div className="fixed bottom-0 z-[999] flex h-max w-full flex-wrap items-center justify-center gap-4 border-t border-t-primary bg-tertiary py-3 text-center font-medium text-secondary">
+      <div className='fixed bottom-0 z-[999] flex h-max w-full flex-wrap items-center justify-center gap-4 border-t border-t-primary bg-tertiary py-3 text-center font-medium text-secondary'>
         {t('cookieBanner.text')}
         <button
-          className="rounded-lg bg-black px-3 py-1 font-semibold text-white hover:bg-black/70 dark:bg-white dark:text-black dark:hover:bg-white/70"
+          className='rounded-lg bg-black px-3 py-1 font-semibold text-white hover:bg-black/70 dark:bg-white dark:text-black dark:hover:bg-white/70'
           onClick={() => setCookieConsent(true)}
         >
           {t('cookieBanner.buttons.ok')}
         </button>
-        <Link href="/legal/cookie-policy" className="text-tertiary transition-colors hover:text-primary">
+        <Link href='/legal/cookie-policy' className='text-tertiary transition-colors hover:text-primary'>
           {t('cookieBanner.buttons.learnMore')}
         </Link>
       </div>
diff --git a/client/app/components/FlipWords/index.jsx b/client/app/components/FlipWords/index.jsx
index 9831943d..6295db67 100644
--- a/client/app/components/FlipWords/index.jsx
+++ b/client/app/components/FlipWords/index.jsx
@@ -68,7 +68,7 @@ export default function FlipWords({ words, duration = 3000, className, onStartAn
               delay: index * 0.08,
               duration: 0.4
             }}
-            className="inline-block"
+            className='inline-block'
           >
             {letter}
           </motion.span>
diff --git a/client/app/components/Footer/index.jsx b/client/app/components/Footer/index.jsx
index 517a63b2..380f4316 100644
--- a/client/app/components/Footer/index.jsx
+++ b/client/app/components/Footer/index.jsx
@@ -154,7 +154,7 @@ export default function Footer() {
   ];
 
   return (
-    <section className="mt-auto flex w-full flex-1 flex-col flex-wrap gap-16 border-t border-primary bg-secondary px-6 py-16 sm:px-24 xl:px-32 2xl:max-h-[800px] 2xl:flex-row 2xl:gap-x-48">
+    <section className='mt-auto flex w-full flex-1 flex-col flex-wrap gap-16 border-t border-primary bg-secondary px-6 py-16 sm:px-24 xl:px-32 2xl:max-h-[800px] 2xl:flex-row 2xl:gap-x-48'>
       <div className='flex w-full max-w-[400px] flex-col gap-y-6'>
         <Image
           src={theme === 'dark' ? '/symbol_white.png' : '/symbol_black.png'}
@@ -174,8 +174,8 @@ export default function Footer() {
 
         <iframe
           src={`${config.statusBadgeUrl}?theme=${theme === 'dark' ? 'dark' : 'light'}`}
-          width="250"
-          height="30"
+          width='250'
+          height='30'
         />
       </div>
 
diff --git a/client/app/components/FullPageLoading/index.jsx b/client/app/components/FullPageLoading/index.jsx
index b3eb586d..a18b072a 100644
--- a/client/app/components/FullPageLoading/index.jsx
+++ b/client/app/components/FullPageLoading/index.jsx
@@ -21,11 +21,11 @@ export default function FullPageLoading() {
 
   return (
     <AnimatePresence>
-      <div className="fixed top-0 z-10 flex size-full flex-col items-center justify-center bg-background">
+      <div className='fixed top-0 z-10 flex size-full flex-col items-center justify-center bg-background'>
         <MotionImage
           className='size-[64px]'
           src={theme === 'dark' ? '/symbol_white.png' : '/symbol_black.png'}
-          alt="discord.place Logo"
+          alt='discord.place Logo'
           width={256}
           height={256}
           initial={{ opacity: 0 }}
diff --git a/client/app/components/Header/NotCollapsedHeader.jsx b/client/app/components/Header/NotCollapsedHeader.jsx
index 99eec7ab..16626dd1 100644
--- a/client/app/components/Header/NotCollapsedHeader.jsx
+++ b/client/app/components/Header/NotCollapsedHeader.jsx
@@ -67,8 +67,8 @@ export default function NotCollapsedHeader() {
   }, [hoveringHeaderTab, lastMouseOut]);
 
   return (
-    <div className="absolute left-0 top-0 z-[9998] flex w-full items-center justify-center">
-      <div className="mt-8 flex w-full max-w-5xl items-center justify-between">
+    <div className='absolute left-0 top-0 z-[9998] flex w-full items-center justify-center'>
+      <div className='mt-8 flex w-full max-w-5xl items-center justify-between'>
         <div className='flex items-center gap-x-12'>
           <Link href='/'>
             <LogoWithText />
diff --git a/client/app/components/Header/ServicesDropdown.jsx b/client/app/components/Header/ServicesDropdown.jsx
index 60b3bb23..649f61b1 100644
--- a/client/app/components/Header/ServicesDropdown.jsx
+++ b/client/app/components/Header/ServicesDropdown.jsx
@@ -61,7 +61,7 @@ export default function ServicesDropdown() {
   ];
 
   return (
-    <div className="relative grid h-max max-w-[500px] grid-cols-2">
+    <div className='relative grid h-max max-w-[500px] grid-cols-2'>
       {links.map((link, index) => (
         <Link
           key={index}
@@ -74,14 +74,14 @@ export default function ServicesDropdown() {
             links.length % 2 === 1 && index === links.length - 1 ? 'col-span-2' : 'col-span-1'
           )}
         >
-          <div className="group flex cursor-pointer items-center gap-x-3 rounded-xl px-4 py-2 hover:bg-tertiary">
-            <div className="flex size-[40px] shrink-0 items-center justify-center rounded-lg bg-quaternary text-lg text-primary">
+          <div className='group flex cursor-pointer items-center gap-x-3 rounded-xl px-4 py-2 hover:bg-tertiary'>
+            <div className='flex size-[40px] shrink-0 items-center justify-center rounded-lg bg-quaternary text-lg text-primary'>
               <link.icon className='transition-all group-hover:scale-110' />
             </div>
 
-            <div className="flex flex-col">
-              <h1 className="text-sm font-semibold text-secondary group-hover:text-primary">{link.name}</h1>
-              <p className="line-clamp-2 overflow-hidden whitespace-pre-wrap text-xs font-medium text-tertiary group-hover:text-secondary">{link.description}</p>
+            <div className='flex flex-col'>
+              <h1 className='text-sm font-semibold text-secondary group-hover:text-primary'>{link.name}</h1>
+              <p className='line-clamp-2 overflow-hidden whitespace-pre-wrap text-xs font-medium text-tertiary group-hover:text-secondary'>{link.description}</p>
             </div>
           </div>
         </Link>
diff --git a/client/app/components/Header/UserSide.jsx b/client/app/components/Header/UserSide.jsx
index 01718c35..ef8eaadc 100644
--- a/client/app/components/Header/UserSide.jsx
+++ b/client/app/components/Header/UserSide.jsx
@@ -57,7 +57,7 @@ export default function UserSide({ className }) {
           </button>
 
           <Link
-            className="pointer-events-auto flex items-center gap-x-2 rounded font-medium outline-none"
+            className='pointer-events-auto flex items-center gap-x-2 rounded font-medium outline-none'
             onClick={() => setOpen(!open)}
             href='/account'
           >
diff --git a/client/app/components/Logo/WithText.jsx b/client/app/components/Logo/WithText.jsx
index 43e6f590..ec8205df 100644
--- a/client/app/components/Logo/WithText.jsx
+++ b/client/app/components/Logo/WithText.jsx
@@ -23,7 +23,7 @@ export default function WithText({ className }) {
         src={theme === 'dark' ? '/symbol_white.png' : '/symbol_black.png'}
         width={64}
         height={64}
-        alt="discord.place Logo"
+        alt='discord.place Logo'
         className='size-[32px]'
       />
 
diff --git a/client/app/components/Providers/Modal/index.jsx b/client/app/components/Providers/Modal/index.jsx
index e78546bd..ef306367 100644
--- a/client/app/components/Providers/Modal/index.jsx
+++ b/client/app/components/Providers/Modal/index.jsx
@@ -79,7 +79,7 @@ export default function ModalProvider({ children }) {
           >
             {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
             <Dialog.Overlay className='radix-overlay fixed inset-0 z-[9999] bg-white/50 backdrop-blur-sm dark:bg-black/50' />
-            <Dialog.Content className="radix-dialog-content fixed z-[9999] flex size-full items-center justify-center focus:outline-none">
+            <Dialog.Content className='radix-dialog-content fixed z-[9999] flex size-full items-center justify-center focus:outline-none'>
               <div
                 className='flex max-h-[85vh] w-[90vw] flex-col gap-y-2 rounded-2xl border border-primary bg-secondary dark:bg-tertiary'
                 style={{ maxWidth: data.maxWidth || '450px' }}
diff --git a/client/app/components/Providers/ProgressBar/index.jsx b/client/app/components/Providers/ProgressBar/index.jsx
index 185a596e..0602e230 100644
--- a/client/app/components/Providers/ProgressBar/index.jsx
+++ b/client/app/components/Providers/ProgressBar/index.jsx
@@ -9,8 +9,8 @@ export default function ProgressBarProvider({ children }) {
       {children}
       <Suspense fallback={null}>
         <ProgressBar
-          height="4px"
-          color="rgb(var(--bg-quaternary))"
+          height='4px'
+          color='rgb(var(--bg-quaternary))'
           options={{ showSpinner: true }}
           shallowRouting
         />
diff --git a/client/app/components/ReportableArea/Previews/Bot.jsx b/client/app/components/ReportableArea/Previews/Bot.jsx
index e591c384..27547394 100644
--- a/client/app/components/ReportableArea/Previews/Bot.jsx
+++ b/client/app/components/ReportableArea/Previews/Bot.jsx
@@ -4,17 +4,17 @@ import { t } from '@/stores/language';
 export default function BotPreview({ metadata }) {
   return (
     <div className='flex flex-col gap-y-4'>
-      <div className="flex items-center gap-x-2">
+      <div className='flex items-center gap-x-2'>
         <UserAvatar
           id={metadata.id}
           hash={metadata.avatar}
           size={64}
           width={40}
           height={40}
-          className="rounded-lg"
+          className='rounded-lg'
         />
 
-        <h2 className="text-sm font-semibold text-secondary">
+        <h2 className='text-sm font-semibold text-secondary'>
           {metadata.username}#{metadata.discriminator}
         </h2>
       </div>
diff --git a/client/app/components/ReportableArea/Previews/Emoji.jsx b/client/app/components/ReportableArea/Previews/Emoji.jsx
index cf9b327e..6db1607e 100644
--- a/client/app/components/ReportableArea/Previews/Emoji.jsx
+++ b/client/app/components/ReportableArea/Previews/Emoji.jsx
@@ -4,7 +4,7 @@ import Image from 'next/image';
 export default function EmojiPreview({ metadata }) {
   return (
     <div className='flex flex-col gap-y-4'>
-      <div className="flex items-center gap-x-2">
+      <div className='flex items-center gap-x-2'>
         {metadata.emoji_ids?.length > 0 ? (
           <div className='flex max-w-[90px] flex-wrap gap-1'>
             {metadata.emoji_ids.map(packagedEmoji => (
@@ -14,7 +14,7 @@ export default function EmojiPreview({ metadata }) {
                 alt={`Emoji ${metadata.name}`}
                 width={24}
                 height={24}
-                className="rounded-md bg-quaternary"
+                className='rounded-md bg-quaternary'
               />
             ))}
 
@@ -28,12 +28,12 @@ export default function EmojiPreview({ metadata }) {
             alt={`Emoji ${metadata.name}`}
             width={64}
             height={64}
-            className="object-contain"
+            className='object-contain'
           />
         )}
 
         <div className='flex flex-col gap-y-1'>
-          <h2 className="text-sm font-semibold text-secondary">
+          <h2 className='text-sm font-semibold text-secondary'>
             {metadata.name}
           </h2>
 
diff --git a/client/app/components/ReportableArea/Previews/Profile.jsx b/client/app/components/ReportableArea/Previews/Profile.jsx
index c451f56a..856dd01e 100644
--- a/client/app/components/ReportableArea/Previews/Profile.jsx
+++ b/client/app/components/ReportableArea/Previews/Profile.jsx
@@ -4,22 +4,22 @@ import { t } from '@/stores/language';
 export default function ProfilePreview({ metadata }) {
   return (
     <div className='flex flex-col gap-y-4'>
-      <div className="flex gap-x-2">
+      <div className='flex gap-x-2'>
         <UserAvatar
           id={metadata.id}
           hash={metadata.avatar}
           size={64}
           width={40}
           height={40}
-          className="rounded-full"
+          className='rounded-full'
         />
 
-        <div className="flex flex-col justify-center">
-          <h2 className="text-sm font-semibold text-secondary">
+        <div className='flex flex-col justify-center'>
+          <h2 className='text-sm font-semibold text-secondary'>
             {metadata.global_name || metadata.username}{'\''}s Profile
           </h2>
 
-          <p className="text-xs text-tertiary">
+          <p className='text-xs text-tertiary'>
             @{metadata.username}
           </p>
         </div>
diff --git a/client/app/components/ReportableArea/Previews/Review.jsx b/client/app/components/ReportableArea/Previews/Review.jsx
index 79320de1..46bc9e4e 100644
--- a/client/app/components/ReportableArea/Previews/Review.jsx
+++ b/client/app/components/ReportableArea/Previews/Review.jsx
@@ -5,18 +5,18 @@ import { TiStarFullOutline } from 'react-icons/ti';
 export default function ReviewPreview({ metadata }) {
   return (
     <div className='flex flex-col gap-y-4'>
-      <div className="flex items-center gap-x-3">
+      <div className='flex items-center gap-x-3'>
         <UserAvatar
           id={metadata.reviewer.id}
           hash={metadata.reviewer.avatar}
           size={64}
           width={40}
           height={40}
-          className="rounded-lg"
+          className='rounded-lg'
         />
 
         <div className='flex flex-col gap-y-2'>
-          <h2 className="text-sm font-semibold text-primary">
+          <h2 className='text-sm font-semibold text-primary'>
             @{metadata.reviewer.username}
           </h2>
 
diff --git a/client/app/components/ReportableArea/Previews/Server.jsx b/client/app/components/ReportableArea/Previews/Server.jsx
index 5132e94f..c7ee25e2 100644
--- a/client/app/components/ReportableArea/Previews/Server.jsx
+++ b/client/app/components/ReportableArea/Previews/Server.jsx
@@ -4,17 +4,17 @@ import { t } from '@/stores/language';
 export default function ServerPreview({ metadata }) {
   return (
     <div className='flex flex-col gap-y-4'>
-      <div className="flex items-center gap-x-2">
+      <div className='flex items-center gap-x-2'>
         <ServerIcon
           id={metadata.id}
           hash={metadata.icon}
           size={64}
           width={40}
           height={40}
-          className="rounded-lg"
+          className='rounded-lg'
         />
 
-        <h2 className="text-sm font-semibold text-secondary">
+        <h2 className='text-sm font-semibold text-secondary'>
           {metadata.name}
         </h2>
       </div>
diff --git a/client/app/components/ReportableArea/Previews/Sound.jsx b/client/app/components/ReportableArea/Previews/Sound.jsx
index 55c0a044..16391a85 100644
--- a/client/app/components/ReportableArea/Previews/Sound.jsx
+++ b/client/app/components/ReportableArea/Previews/Sound.jsx
@@ -2,12 +2,12 @@ import { PiWaveformBold } from 'react-icons/pi';
 
 export default function SoundPreview({ metadata }) {
   return (
-    <div className="flex items-center gap-x-2">
+    <div className='flex items-center gap-x-2'>
       <PiWaveformBold className='size-8 text-tertiary' />
 
       <div className='flex flex-col gap-y-1'>
         <div className='flex items-center gap-x-2'>
-          <h2 className="text-sm font-semibold text-secondary">
+          <h2 className='text-sm font-semibold text-secondary'>
             {metadata.name}
           </h2>
 
diff --git a/client/app/components/ReportableArea/Previews/Template.jsx b/client/app/components/ReportableArea/Previews/Template.jsx
index 3e28426d..bb32bb89 100644
--- a/client/app/components/ReportableArea/Previews/Template.jsx
+++ b/client/app/components/ReportableArea/Previews/Template.jsx
@@ -4,13 +4,13 @@ import { t } from '@/stores/language';
 export default function TemplatePreview({ metadata }) {
   return (
     <div className='flex flex-col gap-y-4'>
-      <div className="flex items-center gap-x-2">
-        <div className="flex size-[64px] items-center justify-center rounded-2xl bg-quaternary text-xl font-bold">
+      <div className='flex items-center gap-x-2'>
+        <div className='flex size-[64px] items-center justify-center rounded-2xl bg-quaternary text-xl font-bold'>
           {getCompressedName(metadata.name, 4)}
         </div>
 
         <div className='flex flex-col gap-y-1'>
-          <h2 className="text-sm font-semibold text-secondary">
+          <h2 className='text-sm font-semibold text-secondary'>
             {metadata.name}
           </h2>
 
diff --git a/client/app/components/ReportableArea/Previews/Theme.jsx b/client/app/components/ReportableArea/Previews/Theme.jsx
index 14e8309c..c19ad1b2 100644
--- a/client/app/components/ReportableArea/Previews/Theme.jsx
+++ b/client/app/components/ReportableArea/Previews/Theme.jsx
@@ -1,7 +1,7 @@
 export default function SoundPreview({ metadata }) {
   return (
-    <div className="flex items-center gap-x-2">
-      <div className="relative flex items-center justify-center">
+    <div className='flex items-center gap-x-2'>
+      <div className='relative flex items-center justify-center'>
         <span
           className='block size-8 rounded-full'
           style={{ backgroundColor: metadata.colors.primary }}
@@ -18,7 +18,7 @@ export default function SoundPreview({ metadata }) {
 
       <div className='flex flex-col gap-y-1'>
         <div className='flex items-center gap-x-2'>
-          <h2 className="text-sm font-semibold text-secondary">
+          <h2 className='text-sm font-semibold text-secondary'>
             Theme
           </h2>
 
diff --git a/client/app/components/Select/index.jsx b/client/app/components/Select/index.jsx
index 3804a466..8ca49008 100644
--- a/client/app/components/Select/index.jsx
+++ b/client/app/components/Select/index.jsx
@@ -59,14 +59,14 @@ export default function Select({ mobileOverride, triggerClassName, placeholder,
         >
           <RadixSelect.Value placeholder={placeholder} />
 
-          <RadixSelect.Icon className="text-tertiary">
+          <RadixSelect.Icon className='text-tertiary'>
             <IoChevronDownSharp />
           </RadixSelect.Icon>
         </RadixSelect.Trigger>
 
         <RadixSelect.Portal>
-          <RadixSelect.Content className="z-[9999] overflow-hidden rounded-lg border-2 border-primary bg-secondary">
-            <RadixSelect.ScrollUpButton className="absolute flex w-full items-center justify-center rounded-b bg-gradient-to-b from-quaternary via-quaternary/50 py-3" />
+          <RadixSelect.Content className='z-[9999] overflow-hidden rounded-lg border-2 border-primary bg-secondary'>
+            <RadixSelect.ScrollUpButton className='absolute flex w-full items-center justify-center rounded-b bg-gradient-to-b from-quaternary via-quaternary/50 py-3' />
 
             <RadixSelect.Viewport>
               {options.map(option => (
@@ -79,14 +79,14 @@ export default function Select({ mobileOverride, triggerClassName, placeholder,
                     {option.label}
                   </RadixSelect.ItemText>
 
-                  <RadixSelect.ItemIndicator className="ml-auto inline-flex">
+                  <RadixSelect.ItemIndicator className='ml-auto inline-flex'>
                     <IoCheckmarkCircleSharp />
                   </RadixSelect.ItemIndicator>
                 </RadixSelect.Item>
               ))}
             </RadixSelect.Viewport>
 
-            <RadixSelect.ScrollDownButton className="absolute bottom-0 left-[2.5px] flex w-full max-w-[97%] items-center justify-center rounded-b bg-gradient-to-t from-quaternary via-quaternary/50 py-3" />
+            <RadixSelect.ScrollDownButton className='absolute bottom-0 left-[2.5px] flex w-full max-w-[97%] items-center justify-center rounded-b bg-gradient-to-t from-quaternary via-quaternary/50 py-3' />
           </RadixSelect.Content>
         </RadixSelect.Portal>
       </RadixSelect.Root>
diff --git a/client/app/layout.js b/client/app/layout.js
index 284c9d55..9c929b97 100644
--- a/client/app/layout.js
+++ b/client/app/layout.js
@@ -41,7 +41,7 @@ export const viewport = {
 
 export default function RootLayout(props) {
   return (
-    <html lang="en" translate="no" className='dark'>
+    <html lang='en' translate='no' className='dark'>
       <body className={cn(
         'flex flex-col',
         GeistSans.className,
diff --git a/client/app/legal/content-policy/page.js b/client/app/legal/content-policy/page.js
index e2045733..de720787 100644
--- a/client/app/legal/content-policy/page.js
+++ b/client/app/legal/content-policy/page.js
@@ -220,7 +220,7 @@ export default function ContentPolicy() {
         You can reach us via the emails below or on our Discord server.
       </p>
 
-      <div className="mt-2 flex gap-x-2">
+      <div className='mt-2 flex gap-x-2'>
         <Link href={config.supportInviteUrl} className='rounded-lg bg-black px-3 py-1 text-sm font-medium !text-white no-underline hover:bg-black/70 dark:bg-white dark:!text-black dark:hover:bg-white/70'>
           Discord Server
         </Link>
diff --git a/client/app/legal/cookie-policy/page.js b/client/app/legal/cookie-policy/page.js
index 8fe8043c..01ebd4dc 100644
--- a/client/app/legal/cookie-policy/page.js
+++ b/client/app/legal/cookie-policy/page.js
@@ -70,7 +70,7 @@ export default function ContentPolicy() {
         You can reach us via the emails below or on our Discord server.
       </p>
 
-      <div className="mt-2 flex gap-x-2">
+      <div className='mt-2 flex gap-x-2'>
         <Link href={config.supportInviteUrl} className='rounded-lg bg-black px-3 py-1 text-sm font-medium !text-white no-underline hover:bg-black/70 dark:bg-white dark:!text-black dark:hover:bg-white/70'>
           Discord Server
         </Link>
diff --git a/client/app/legal/privacy/page.js b/client/app/legal/privacy/page.js
index 4ceb49b3..57e23699 100644
--- a/client/app/legal/privacy/page.js
+++ b/client/app/legal/privacy/page.js
@@ -53,7 +53,7 @@ export default function Page() {
         <li>Request the deletion of your information.</li>
         <li>Object to the processing of your data.</li>
       </ul>
-      <p>To exercise these rights, please contact us at <a href="mailto:legal@discord.place">legal@discord.place</a>.</p>
+      <p>To exercise these rights, please contact us at <a href='mailto:legal@discord.place'>legal@discord.place</a>.</p>
 
       <h2>7. Changes to This Privacy Policy</h2>
       <p>We may update this privacy policy from time to time. We will notify you of any changes by posting the new privacy policy on this page. You are advised to review this privacy policy periodically for any changes.</p>
@@ -66,7 +66,7 @@ export default function Page() {
         You can reach us via the emails below or on our Discord server.
       </p>
 
-      <div className="mt-2 flex gap-x-2">
+      <div className='mt-2 flex gap-x-2'>
         <Link
           href={config.supportInviteUrl}
           className='rounded-lg bg-black px-3 py-1 text-sm font-medium !text-white no-underline hover:bg-black/70 dark:bg-white dark:!text-black dark:hover:bg-white/70'
diff --git a/client/app/legal/purchase-policy/page.js b/client/app/legal/purchase-policy/page.js
index fe2a8650..61772833 100644
--- a/client/app/legal/purchase-policy/page.js
+++ b/client/app/legal/purchase-policy/page.js
@@ -81,7 +81,7 @@ export default function PurchasePolicy() {
         You can reach us via the emails below or on our Discord server.
       </p>
 
-      <div className="mt-2 flex gap-x-2">
+      <div className='mt-2 flex gap-x-2'>
         <Link href={config.supportInviteUrl} className='rounded-lg bg-black px-3 py-1 text-sm font-medium !text-white no-underline hover:bg-black/70 dark:bg-white dark:!text-black dark:hover:bg-white/70'>
           Discord Server
         </Link>
diff --git a/client/app/legal/terms/page.js b/client/app/legal/terms/page.js
index 2b213d2b..3a6a3242 100644
--- a/client/app/legal/terms/page.js
+++ b/client/app/legal/terms/page.js
@@ -58,7 +58,7 @@ export default function Page() {
       <p>These Terms are governed by and construed in accordance with the laws of the Republic of Turkey, without regard to its conflict of law principles.</p>
 
       <h2>9. Contact Information</h2>
-      <p>If you have any questions about these Terms, please contact us at <a href="mailto:legal@discord.place">legal@discord.place</a>.</p>
+      <p>If you have any questions about these Terms, please contact us at <a href='mailto:legal@discord.place'>legal@discord.place</a>.</p>
 
       <h2>
         10. Contact Us
@@ -68,7 +68,7 @@ export default function Page() {
         You can reach us via the emails below or on our Discord server.
       </p>
 
-      <div className="mt-2 flex gap-x-2">
+      <div className='mt-2 flex gap-x-2'>
         <Link
           href={config.supportInviteUrl}
           className='rounded-lg bg-black px-3 py-1 text-sm font-medium !text-white no-underline hover:bg-black/70 dark:bg-white dark:!text-black dark:hover:bg-white/70'
diff --git a/client/app/premium/content.jsx b/client/app/premium/content.jsx
index b77c5cd3..c0209fbe 100644
--- a/client/app/premium/content.jsx
+++ b/client/app/premium/content.jsx
@@ -213,7 +213,7 @@ export default function Page({ plans }) {
   }
 
   return (
-    <div className="relative z-0 flex flex-col items-center px-4 pt-56 lg:px-0">
+    <div className='relative z-0 flex flex-col items-center px-4 pt-56 lg:px-0'>
       <Square column='10' row='10' transparentEffectDirection='bottomToTop' blockColor='rgba(var(--bg-secondary))' />
 
       <div className='absolute top-[-15%] h-[300px] w-full max-w-[800px] rounded-[5rem] bg-[#ffffff10] blur-[15rem]' />
@@ -237,7 +237,7 @@ export default function Page({ plans }) {
           {t('premiumPage.title')}
         </motion.h1>
 
-        <motion.span className="mt-8 max-w-[800px] text-center text-tertiary sm:text-lg" initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.1 }}>
+        <motion.span className='mt-8 max-w-[800px] text-center text-tertiary sm:text-lg' initial={{ opacity: 0, y: -25 }} animate={{ opacity: 1, y: 0 }} transition={{ ...sequenceTransition, delay: 0.1 }}>
           {t('premiumPage.subtitle')}
         </motion.span>
       </div>
diff --git a/client/lib/markdownComponents.jsx b/client/lib/markdownComponents.jsx
index 3cea0de3..ae5c1aea 100644
--- a/client/lib/markdownComponents.jsx
+++ b/client/lib/markdownComponents.jsx
@@ -21,7 +21,7 @@ const markdownComponents = {
           alt={alt}
           width={width || '100%'}
           height={height || 'auto'}
-          className="my-4 rounded-xl"
+          className='my-4 rounded-xl'
         />
       </Zoom>
     );
diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js
index 7834cde7..54bd273d 100644
--- a/docs/.eslintrc.js
+++ b/docs/.eslintrc.js
@@ -20,6 +20,10 @@ module.exports = {
   },
   rules: {
     'react/prop-types': 'off',
+    'jsx-quotes': [
+      'error',
+      'prefer-single'
+    ],
     'react/self-closing-comp': [
       'error',
       {
diff --git a/docs/app/layout.js b/docs/app/layout.js
index f9c67b91..b0ab5a92 100644
--- a/docs/app/layout.js
+++ b/docs/app/layout.js
@@ -46,7 +46,7 @@ export const viewport = {
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en" suppressHydrationWarning={true}>
+    <html lang='en' suppressHydrationWarning={true}>
       <body className={`overflow-y-scroll ${geistSans.variable} font-geist text-primary antialiased`}>
         <Suspense>
           <Header />
diff --git a/docs/components/endpoint.jsx b/docs/components/endpoint.jsx
index 986f48c0..314c6d65 100644
--- a/docs/components/endpoint.jsx
+++ b/docs/components/endpoint.jsx
@@ -172,7 +172,7 @@ export default function Endpoint({ id }) {
         </h2>
 
         <div className='flex items-center justify-between'>
-          <div className="flex items-center gap-x-2">
+          <div className='flex items-center gap-x-2'>
             <span
               className={cn(
                 'select-none px-2 py-0.5 text-xs font-bold rounded-full',
diff --git a/docs/components/footer.jsx b/docs/components/footer.jsx
index c8f450ce..ac094a44 100644
--- a/docs/components/footer.jsx
+++ b/docs/components/footer.jsx
@@ -1,14 +1,14 @@
 export default function Footer() {
   return (
-    <div className="mt-auto border-t border-t-primary bg-secondary px-4 py-3.5 lg:px-0">
-      <div className="mx-auto flex max-w-3xl flex-wrap items-center justify-center gap-y-2 text-xs text-tertiary sm:justify-between">
+    <div className='mt-auto border-t border-t-primary bg-secondary px-4 py-3.5 lg:px-0'>
+      <div className='mx-auto flex max-w-3xl flex-wrap items-center justify-center gap-y-2 text-xs text-tertiary sm:justify-between'>
         <div>
-          Copyright © <span className="text-secondary">discord.place</span>, {new Date().getFullYear()}. GPL v3 Licensed.
+          Copyright © <span className='text-secondary'>discord.place</span>, {new Date().getFullYear()}. GPL v3 Licensed.
         </div>
 
         <div>
           Thanks to{' '}
-          <span className="cursor-pointer text-secondary underline-offset-2 hover:text-purple-400 hover:underline">Nodesty</span>{' '}
+          <span className='cursor-pointer text-secondary underline-offset-2 hover:text-purple-400 hover:underline'>Nodesty</span>{' '}
           for supporting this project.
         </div>
       </div>
diff --git a/docs/components/header.jsx b/docs/components/header.jsx
index ef25a029..cb3adf65 100644
--- a/docs/components/header.jsx
+++ b/docs/components/header.jsx
@@ -52,7 +52,7 @@ export default function Header() {
 
 function ExpandedHeader({ pathname }) {
   return (
-    <header className="bg-purple-800 px-4 lg:px-0">
+    <header className='bg-purple-800 px-4 lg:px-0'>
       <div className='mx-auto flex lg:max-w-3xl'>
         {HEADER_LINKS.map(({ name, href }) => (
           <Link
@@ -85,7 +85,7 @@ function CollapsedHeader({ pathname }) {
 
   return (
     <>
-      <header className="z-10 bg-purple-800">
+      <header className='z-10 bg-purple-800'>
         <div className='mx-auto flex justify-between p-4 lg:max-w-3xl'>
           <Link href='/home'>
             <Image
@@ -194,10 +194,10 @@ function HomeHeader() {
 
           <div className='mt-4 flex items-center'>
             <iframe
-              src="https://ghbtns.com/github-btn.html?user=discordplace&repo=discord.place&type=star&count=true"
-              width="90"
-              height="20"
-              title="GitHub"
+              src='https://ghbtns.com/github-btn.html?user=discordplace&repo=discord.place&type=star&count=true'
+              width='90'
+              height='20'
+              title='GitHub'
             />
 
             <Link