diff --git a/moduleWrappers/powercord/components/settings/category.js b/moduleWrappers/powercord/components/settings/category.js
index d9d3681..12cb979 100644
--- a/moduleWrappers/powercord/components/settings/category.js
+++ b/moduleWrappers/powercord/components/settings/category.js
@@ -2,27 +2,55 @@ const { React } = goosemodScope.webpackModules.common;
 
 import FormItem from './formItem';
 
+const FormClasses = goosemodScope.webpackModules.findByProps('title', 'dividerDefault');
+const FormTextClasses = goosemodScope.webpackModules.findByProps('formText', 'placeholder');
+
+const FormText = goosemodScope.webpackModules.findByDisplayName('FormText');
 
 export default class Category extends React.PureComponent {
   render() {
     const children = this.props.opened ? this.props.children : [];
 
     return React.createElement(FormItem, {
-        title: React.createElement('div', {
-
-          },
+        title: React.createElement('div', {},
           React.createElement('svg', {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 24 24",
-            className: this.props.opened ? "opened" : ""
+            width: "24",
+            height: "24",
+            style: {
+              transform: this.props.opened ? 'rotate(90deg)' : '',
+              marginRight: '10px'
+            }
           },
-          React.createElement('path', {
-            fill: 'var(--header-primary)',
-            d: 'M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z'
-          })
-        )),
+            React.createElement('path', {
+              fill: 'var(--header-primary)',
+              d: 'M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z'
+            }),
+          ),
 
-        note: this.props.description
+          React.createElement('label', {
+            class: FormClasses.title,
+            style: {
+              textTransform: 'none',
+              display: 'inline',
+              verticalAlign: 'top',
+            }
+          },
+            this.props.name,
+
+            React.createElement(FormText, {
+              className: FormTextClasses.description,
+              style: {
+                marginLeft: '34px'
+              }
+            }, this.props.description)
+          ),
+        ),
+
+        onClick: () => {
+          this.props.onChange(!this.props.opened);
+        }
       },
 
       ...children
diff --git a/moduleWrappers/powercord/components/settings/formItem.js b/moduleWrappers/powercord/components/settings/formItem.js
index 0e8e457..24b2b86 100644
--- a/moduleWrappers/powercord/components/settings/formItem.js
+++ b/moduleWrappers/powercord/components/settings/formItem.js
@@ -14,7 +14,10 @@ export default class FormItem extends React.PureComponent {
     return React.createElement(OriginalFormItem, {
         title: this.props.title,
         required: this.props.required,
-        className: [Flex.Direction.VERTICAL, Flex.Justify.START, Flex.Align.STRETCH, Flex.Wrap.NO_WRAP, Margins.marginBottom20].join(' ')
+        className: [Flex.Direction.VERTICAL, Flex.Justify.START, Flex.Align.STRETCH, Flex.Wrap.NO_WRAP, Margins.marginBottom20].join(' '),
+        onClick: () => {
+          this.props.onClick();
+        }
       },
 
       this.props.children,