diff --git a/src/components/VencordSettings/ThemesTab.tsx b/src/components/ThemeSettings/ThemesTab.tsx
similarity index 100%
rename from src/components/VencordSettings/ThemesTab.tsx
rename to src/components/ThemeSettings/ThemesTab.tsx
diff --git a/src/components/VencordSettings/UserCSSModal.tsx b/src/components/ThemeSettings/UserCSSModal.tsx
similarity index 100%
rename from src/components/VencordSettings/UserCSSModal.tsx
rename to src/components/ThemeSettings/UserCSSModal.tsx
diff --git a/src/components/VencordSettings/components/SettingBooleanComponent.tsx b/src/components/ThemeSettings/components/SettingBooleanComponent.tsx
similarity index 100%
rename from src/components/VencordSettings/components/SettingBooleanComponent.tsx
rename to src/components/ThemeSettings/components/SettingBooleanComponent.tsx
diff --git a/src/components/VencordSettings/components/SettingColorComponent.tsx b/src/components/ThemeSettings/components/SettingColorComponent.tsx
similarity index 100%
rename from src/components/VencordSettings/components/SettingColorComponent.tsx
rename to src/components/ThemeSettings/components/SettingColorComponent.tsx
diff --git a/src/components/VencordSettings/components/SettingNumberComponent.tsx b/src/components/ThemeSettings/components/SettingNumberComponent.tsx
similarity index 100%
rename from src/components/VencordSettings/components/SettingNumberComponent.tsx
rename to src/components/ThemeSettings/components/SettingNumberComponent.tsx
diff --git a/src/components/VencordSettings/components/SettingRangeComponent.tsx b/src/components/ThemeSettings/components/SettingRangeComponent.tsx
similarity index 100%
rename from src/components/VencordSettings/components/SettingRangeComponent.tsx
rename to src/components/ThemeSettings/components/SettingRangeComponent.tsx
diff --git a/src/components/VencordSettings/components/SettingSelectComponent.tsx b/src/components/ThemeSettings/components/SettingSelectComponent.tsx
similarity index 100%
rename from src/components/VencordSettings/components/SettingSelectComponent.tsx
rename to src/components/ThemeSettings/components/SettingSelectComponent.tsx
diff --git a/src/components/VencordSettings/components/SettingTextComponent.tsx b/src/components/ThemeSettings/components/SettingTextComponent.tsx
similarity index 100%
rename from src/components/VencordSettings/components/SettingTextComponent.tsx
rename to src/components/ThemeSettings/components/SettingTextComponent.tsx
diff --git a/src/components/VencordSettings/components/colorStyles.css b/src/components/ThemeSettings/components/colorStyles.css
similarity index 100%
rename from src/components/VencordSettings/components/colorStyles.css
rename to src/components/ThemeSettings/components/colorStyles.css
diff --git a/src/components/VencordSettings/components/index.ts b/src/components/ThemeSettings/components/index.ts
similarity index 100%
rename from src/components/VencordSettings/components/index.ts
rename to src/components/ThemeSettings/components/index.ts
diff --git a/src/components/ThemeSettings/themesStyles.css b/src/components/ThemeSettings/themesStyles.css
new file mode 100644
index 00000000..0c3d34a6
--- /dev/null
+++ b/src/components/ThemeSettings/themesStyles.css
@@ -0,0 +1,49 @@
+.vc-settings-theme-grid {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+
+.vc-settings-theme-card {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--background-secondary-alt);
+    color: var(--interactive-active);
+    border-radius: 8px;
+    padding: 1em;
+    width: 100%;
+    transition: 0.1s ease-out;
+    transition-property: box-shadow, transform, background, opacity;
+}
+
+.vc-settings-theme-card-text {
+    text-overflow: ellipsis;
+    height: 1.2em;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.vc-settings-theme-author::before {
+    content: "by ";
+}
+
+.vc-settings-theme-link-input {
+    width: 100%;
+}
+
+.vc-settings-theme-add-card {
+    padding: 1em;
+    margin-bottom: 16px;
+}
+
+.vc-settings-usercss-ie-buttons>div {
+    color: var(--interactive-normal);
+    opacity: .5;
+    padding: 4px;
+}
+
+.vc-settings-usercss-ie-buttons>div:hover {
+    color: var(--interactive-hover);
+    opacity: 1;
+}
\ No newline at end of file
diff --git a/src/components/VencordSettings/themesStyles.css b/src/components/VencordSettings/themesStyles.css
index 66f6a6c4..6b8ffdb9 100644
--- a/src/components/VencordSettings/themesStyles.css
+++ b/src/components/VencordSettings/themesStyles.css
@@ -36,14 +36,3 @@
     padding: 1em;
     margin-bottom: 16px;
 }
-
-.vc-settings-usercss-ie-buttons>div {
-    color: var(--interactive-normal);
-    opacity: .5;
-    padding: 4px;
-}
-
-.vc-settings-usercss-ie-buttons>div:hover {
-    color: var(--interactive-hover);
-    opacity: 1;
-}
diff --git a/src/plugins/_core/settings.tsx b/src/plugins/_core/settings.tsx
index b1783253..e5d864b6 100644
--- a/src/plugins/_core/settings.tsx
+++ b/src/plugins/_core/settings.tsx
@@ -21,7 +21,6 @@ import BackupAndRestoreTab from "@components/VencordSettings/BackupAndRestoreTab
 import CloudTab from "@components/VencordSettings/CloudTab";
 import PatchHelperTab from "@components/VencordSettings/PatchHelperTab";
 import PluginsTab from "@components/VencordSettings/PluginsTab";
-import ThemesTab from "@components/VencordSettings/ThemesTab";
 import UpdaterTab from "@components/VencordSettings/UpdaterTab";
 import VencordTab from "@components/VencordSettings/VencordTab";
 import { Devs } from "@utils/constants";
@@ -107,7 +106,7 @@ export default definePlugin({
                 section: "EquicordThemes",
                 label: "Themes",
                 searchableTitles: ["Themes"],
-                element: ThemesTab,
+                element: require("@components/ThemeSettings/ThemesTab").default,
                 className: "vc-themes"
             },
             !IS_UPDATER_DISABLED && {