diff --git a/app/components-react/windows/source-showcase/SourceGrid.tsx b/app/components-react/windows/source-showcase/SourceGrid.tsx
index 411e31546aa9..ade6befc1143 100644
--- a/app/components-react/windows/source-showcase/SourceGrid.tsx
+++ b/app/components-react/windows/source-showcase/SourceGrid.tsx
@@ -36,6 +36,14 @@ export default function SourceGrid(p: { activeTab: string }) {
     'apps',
   ]);
 
+  const [widgetSections, setWidgetExpandedSections] = useState([
+    'essentialWidgets',
+    'interactive',
+    'goals',
+    'flair',
+    'charity',
+  ]);
+
   const { isLoggedIn, linkedPlatforms, primaryPlatform } = useVuex(() => ({
     isLoggedIn: UserService.views.isLoggedIn,
     linkedPlatforms: UserService.views.linkedPlatforms,
@@ -103,6 +111,18 @@ export default function SourceGrid(p: { activeTab: string }) {
   }, []);
 
   const essentialSourcesOrder = ['game_capture', 'dshow_input', 'ffmpeg_source'];
+  // Stream Label is last, we don't have a widget type for it
+  const essentialWidgetsOrder = [
+    WidgetType.AlertBox,
+    WidgetType.ChatBox,
+    WidgetType.EventList,
+    WidgetType.ViewerCount,
+  ];
+
+  function customOrder<T, U>(orderArray: T[], getter: (a: U) => T) {
+    return (s1: U, s2: U): number =>
+      orderArray.indexOf(getter(s1)) - orderArray.indexOf(getter(s2));
+  }
 
   const essentialSources = useMemo(() => {
     const essentialDefaults = availableSources
@@ -114,10 +134,7 @@ export default function SourceGrid(p: { activeTab: string }) {
           //byOS({ [OS.Windows]: 'screen_capture', [OS.Mac]: 'window_capture' }),
         ].includes(source.value),
       )
-      .sort(
-        (s1, s2) =>
-          essentialSourcesOrder.indexOf(s1.value) - essentialSourcesOrder.indexOf(s2.value),
-      );
+      .sort(customOrder(essentialSourcesOrder, s => s.value));
 
     const essentialWidgets = iterableWidgetTypes.filter(type =>
       [WidgetType.AlertBox, WidgetType.ChatBox].includes(WidgetType[type]),
@@ -152,6 +169,12 @@ export default function SourceGrid(p: { activeTab: string }) {
     <SourceTag key={source.value} type={source.value} essential excludeWrap={excludeWrap} />
   );
 
+  // TODO: restrict type
+  // Hide widget descriptions on non-general tab
+  const toWidgetEl = (widget: string) => (
+    <SourceTag key={widget} type={widget} excludeWrap={excludeWrap} hideShortDescription />
+  );
+
   const essentialSourcesList = useMemo(
     () => (
       <>
@@ -178,6 +201,7 @@ export default function SourceGrid(p: { activeTab: string }) {
   );
 
   const sourceDisplayData = useMemo(() => SourceDisplayData(), []);
+  const widgetDisplayData = useMemo(() => WidgetDisplayData(), []);
 
   const byGroup = (group: 'capture' | 'av' | 'media') => (source: IObsListOption<TSourceType>) => {
     const displayData = sourceDisplayData[source.value];
@@ -188,6 +212,15 @@ export default function SourceGrid(p: { activeTab: string }) {
     return displayData.group === group;
   };
 
+  const byWidgetGroup = (group: string) => (widget: string) => {
+    const displayData = widgetDisplayData[WidgetType[widget]];
+    if (!displayData) {
+      return true;
+    }
+
+    return displayData.group === group;
+  };
+
   const captureSourcesList = useMemo(
     () => availableSources.filter(byGroup('capture')).map(toSourceEl),
     [availableSources, excludeWrap],
@@ -234,7 +267,12 @@ export default function SourceGrid(p: { activeTab: string }) {
         ) : (
           <>
             {iterableWidgetTypes.filter(filterEssential).map(widgetType => (
-              <SourceTag key={widgetType} type={widgetType} excludeWrap={excludeWrap} />
+              <SourceTag
+                key={widgetType}
+                type={widgetType}
+                excludeWrap={excludeWrap}
+                hideShortDescription
+              />
             ))}
             {p.activeTab !== 'all' && (
               <SourceTag
@@ -251,6 +289,97 @@ export default function SourceGrid(p: { activeTab: string }) {
     [isLoggedIn, iterableWidgetTypes, p.activeTab, excludeWrap],
   );
 
+  const widgetGroupedList = useMemo(() => {
+    // TODO: restrict types
+    const widgetsInGroup = (group: string, sorter?: (s1: string, s2: string) => number) => {
+      const widgets = iterableWidgetTypes
+        .filter(byWidgetGroup(group))
+        // Sort lexographically by default, if sorter is not provided
+        .sort(sorter);
+
+      return widgets.map(toWidgetEl);
+    };
+
+    // Using essentials as a group for widgets since we wanna display more
+    const essentialWidgets = (
+      <>
+        {widgetsInGroup(
+          'essential',
+          customOrder(essentialWidgetsOrder, x => WidgetType[x]),
+        )}
+        <SourceTag
+          key="streamlabel"
+          name={$t('Stream Label')}
+          type="streamlabel"
+          excludeWrap={excludeWrap}
+          hideShortDescription
+        />
+      </>
+    );
+
+    const interactiveWidgets = widgetsInGroup('interactive');
+    const goalWidgets = widgetsInGroup('goals');
+    const flairWidgets = <>{widgetsInGroup('flair')}</>;
+    const charityWidgets = widgetsInGroup('charity');
+
+    return (
+      <>
+        {!isLoggedIn ? (
+          <Empty
+            description={$t('You must be logged in to use Widgets')}
+            image={$i(`images/sleeping-kevin-${demoMode}.png`)}
+          >
+            <Button onClick={handleAuth}>{$t('Click here to log in')}</Button>
+          </Empty>
+        ) : (
+          <Collapse
+            ghost
+            activeKey={widgetSections}
+            onChange={xs => setWidgetExpandedSections(xs as string[])}
+          >
+            <Panel
+              header={$t('Essentials')}
+              key="essentialWidgets"
+              collapsible="disabled"
+              showArrow={false}
+            >
+              <div className="collapse-section" data-testid="essential-widgets">
+                {essentialWidgets}
+              </div>
+            </Panel>
+            <Panel
+              header={$t('Interactive')}
+              key="interactive"
+              collapsible="disabled"
+              showArrow={false}
+            >
+              <div className="collapse-section" data-testid="interactive-widgets">
+                {interactiveWidgets}
+              </div>
+            </Panel>
+            <Panel header={$t('Goals')} key="goals" collapsible="disabled" showArrow={false}>
+              <div className="collapse-section" data-testid="goal-widgets">
+                {goalWidgets}
+              </div>
+            </Panel>
+            <Panel header={$t('Flair')} key="flair" collapsible="disabled" showArrow={false}>
+              <div className="collapse-section" data-testid="flair-widgets">
+                {flairWidgets}
+              </div>
+            </Panel>
+            {/* TODO: we don't have any charity widgets on Desktop
+            <Panel header={$t('Charity')} key="charity" collapsible="disabled" showArrow={false}>
+              <div className="collapse-section" data-testid="charity-widgets">
+                {charityWidgets}
+              </div>
+            </Panel>
+            */}
+          </Collapse>
+        )}
+      </>
+    );
+  }, [isLoggedIn, iterableWidgetTypes, excludeWrap]);
+
   const appsList = useMemo(
     () => (
       <>
@@ -308,10 +437,7 @@ export default function SourceGrid(p: { activeTab: string }) {
     } else if (showContent('widgets')) {
       return (
         <>
-          <Col span={24}>
-            <PageHeader style={{ paddingLeft: 0 }} title={$t('Widgets')} />
-          </Col>
-          {widgetList}
+          <Col span={24}>{widgetGroupedList}</Col>
         </>
       );
     } else if (showContent('apps')) {
diff --git a/app/components-react/windows/source-showcase/SourceTag.tsx b/app/components-react/windows/source-showcase/SourceTag.tsx
index f0d77df51178..2c99cf2dd863 100644
--- a/app/components-react/windows/source-showcase/SourceTag.tsx
+++ b/app/components-react/windows/source-showcase/SourceTag.tsx
@@ -15,6 +15,7 @@ export default function SourceTag(p: {
   appSourceId?: string;
   essential?: boolean;
   excludeWrap?: boolean;
+  hideShortDescription?: boolean;
 }) {
   const { inspectSource, selectInspectedSource, store } = useSourceShowcaseSettings();
 
@@ -54,7 +55,7 @@ export default function SourceTag(p: {
           </div>
           <div className={styles.displayName}>{displayData?.name || p.name}</div>
         </div>
-        {displayData?.shortDesc && (
+        {displayData?.shortDesc && !p.hideShortDescription && (
           <div
             style={{
               opacity: '0.5',
diff --git a/app/i18n/en-US/widgets.json b/app/i18n/en-US/widgets.json
index 0042675c48d9..a76c4c9101ea 100644
--- a/app/i18n/en-US/widgets.json
+++ b/app/i18n/en-US/widgets.json
@@ -188,5 +188,9 @@
   "Superchat Goal": "Superchat Goal",
   "YouTube Superchats": "YouTube Superchats",
   "Custom Widget": "Custom Widget",
-  "Use HTML, CSS, and JavaScript to create a widget with custom functionality": "Use HTML, CSS, and JavaScript to create a widget with custom functionality"
+  "Use HTML, CSS, and JavaScript to create a widget with custom functionality": "Use HTML, CSS, and JavaScript to create a widget with custom functionality",
+  "Interactive": "Interactive",
+  "Goals": "Goals",
+  "Flair": "Flair",
+  "Charity": "Charity"
 }
diff --git a/app/services/widgets/widgets-data.ts b/app/services/widgets/widgets-data.ts
index 9e3b47f99620..86b799f8e2b6 100644
--- a/app/services/widgets/widgets-data.ts
+++ b/app/services/widgets/widgets-data.ts
@@ -15,7 +15,11 @@ export interface IWidgetDisplayData {
   shortDesc?: string;
   link?: string;
   linkText?: string;
+  group: TWidgetGroup;
 }
+
+export type TWidgetGroup = 'essential' | 'interactive' | 'goals' | 'flair' | 'charity';
+
 // Do not alter the order of this enum, it is coupled to the user's local config
 export enum WidgetType {
   AlertBox = 0,
@@ -544,6 +548,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     supportList: [$t('Donations'), $t('Subscriptions'), $t('Follows'), $t('Bits')],
     icon: 'icon-alert-box',
     shortDesc: $t('Dynamic live alerts'),
+    group: 'essential',
   },
   [WidgetType.DonationGoal]: {
     name: $t('Tip Goal'),
@@ -552,6 +557,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     demoFilename: 'source-donation-goal.gif',
     supportList: [$t('Tips')],
     icon: 'fas fa-calendar',
+    group: 'goals',
   },
   [WidgetType.FollowerGoal]: {
     name: platform === 'youtube' ? $t('Subscription Goal') : $t('Follower Goal'),
@@ -566,6 +572,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
       $t('Trovo Follows'),
     ],
     icon: 'fas fa-calendar',
+    group: 'goals',
   },
   [WidgetType.SubGoal]: {
     name: platform === 'youtube' ? $t('Member Goal') : $t('Subscription Goal'),
@@ -575,6 +582,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     supportList: [$t('Twitch Subscribers'), $t('YouTube Members')],
     platforms: new Set(['twitch', 'youtube']),
     icon: 'fas fa-calendar',
+    group: 'goals',
   },
   [WidgetType.BitGoal]: {
     name: $t('Bit Goal'),
@@ -584,6 +592,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     supportList: [$t('Twitch Bits')],
     platforms: new Set(['twitch']),
     icon: 'fas fa-calendar',
+    group: 'goals',
   },
   [WidgetType.StarsGoal]: {
     name: $t('Stars Goal'),
@@ -593,6 +602,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     supportList: [$t('Facebook Stars')],
     platforms: new Set(['facebook']),
     icon: 'fas fa-calendar',
+    group: 'goals',
   },
   [WidgetType.SupporterGoal]: {
     name: $t('Supporter Goal'),
@@ -602,6 +612,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     supportList: [$t('Facebook Supporters')],
     platforms: new Set(['facebook']),
     icon: 'fas fa-calendar',
+    group: 'goals',
   },
   [WidgetType.CharityGoal]: {
     name: $t('Streamlabs Charity Donation Goal'),
@@ -610,6 +621,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     demoFilename: 'source-charity-goal.gif',
     supportList: [$t('Streamlabs Charity Donations')],
     icon: 'fas fa-calendar',
+    group: 'goals',
   },
   [WidgetType.SuperchatGoal]: {
     name: $t('Superchat Goal'),
@@ -619,6 +631,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     supportList: [$t('YouTube Superchats')],
     platforms: new Set(['youtube']),
     icon: 'fas fa-calendar',
+    group: 'goals',
   },
   [WidgetType.DonationTicker]: {
     name: $t('Tip Ticker'),
@@ -627,6 +640,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     demoFilename: 'source-tip-ticker.png',
     supportList: [$t('Donations')],
     icon: 'fas fa-ellipsis-h',
+    group: 'flair',
   },
   [WidgetType.ChatBox]: {
     name: $t('Chat Box'),
@@ -636,6 +650,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     demoFilename: 'source-chatbox.png',
     supportList: [$t('Twitch chat'), $t('YouTube chat'), $t('Facebook chat'), $t('Trovo chat')],
     icon: 'fas fa-comments',
+    group: 'essential',
   },
   [WidgetType.EventList]: {
     name: $t('Event List'),
@@ -651,6 +666,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     ],
     icon: 'fas fa-th-list',
     shortDesc: $t('Display recent events'),
+    group: 'essential',
   },
   [WidgetType.TipJar]: {
     name: $t('The Jar'),
@@ -659,6 +675,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     demoFilename: 'source-jar.png',
     supportList: [$t('Donations'), $t('Subscriptions'), $t('Follows'), $t('Bits')],
     icon: 'fas fa-beer',
+    group: 'interactive',
   },
   [WidgetType.ViewerCount]: {
     name: $t('Viewer Count'),
@@ -667,6 +684,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     demoFilename: 'source-viewer-count.png',
     supportList: ['YouTube', 'Twitch', 'Facebook', 'Trovo'],
     icon: 'fas fa-eye',
+    group: 'essential',
   },
   [WidgetType.StreamBoss]: {
     name: $t('Stream Boss'),
@@ -675,6 +693,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     demoFilename: 'source-streamboss.png',
     supportList: [$t('Twitch Bits')],
     icon: 'fas fa-gavel',
+    group: 'interactive',
   },
   [WidgetType.Credits]: {
     name: $t('Credits'),
@@ -684,6 +703,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     supportList: [$t('New Followers'), $t('New Subscribers'), $t('Cheers'), $t('Donations')],
     platforms: new Set(['twitch', 'youtube']),
     icon: 'fas fa-align-center',
+    group: 'flair',
   },
   [WidgetType.SponsorBanner]: {
     name: $t('Sponsor Banner'),
@@ -694,6 +714,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     demoFilename: 'source-sponsor-banner.png',
     supportList: [$t('The streamer manually adds images of sponsors.')],
     icon: 'fas fa-heart',
+    group: 'flair',
   },
   [WidgetType.SpinWheel]: {
     name: $t('Spin Wheel'),
@@ -702,6 +723,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     demoFilename: 'source-wheel.png',
     supportList: [$t('The streamer manually triggers a spin anytime while they are live.')],
     icon: 'fas fa-chart-pie',
+    group: 'interactive',
   },
   [WidgetType.MediaShare]: {
     name: $t('Media Share'),
@@ -710,6 +732,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     demoFilename: 'media.png',
     supportList: [],
     icon: 'icon-share',
+    group: 'interactive',
   },
   [WidgetType.Poll]: {
     name: $t('Poll'),
@@ -718,6 +741,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     demoFilename: 'poll.png',
     supportList: [],
     icon: 'icon-text-align-left',
+    group: 'interactive',
   },
   [WidgetType.EmoteWall]: {
     name: $t('Emote Wall'),
@@ -729,6 +753,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     supportList: [],
     platforms: new Set(['twitch']),
     icon: 'icon-smile',
+    group: 'interactive',
   },
   [WidgetType.ChatHighlight]: {
     name: $t('Chat Highlight'),
@@ -738,6 +763,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     supportList: [],
     platforms: new Set(['twitch']),
     icon: 'icon-community',
+    group: 'interactive',
   },
   [WidgetType.GameWidget]: {
     name: $t('Game Widget'),
@@ -747,6 +773,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     supportList: [],
     platforms: new Set(['twitch', 'youtube']),
     icon: 'icon-face-masks',
+    group: 'interactive',
   },
   [WidgetType.CustomWidget]: {
     name: $t('Custom Widget'),
@@ -755,5 +782,6 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     demoFilename: '', // do not show an image
     supportList: [],
     icon: 'icon-developer',
+    group: 'flair',
   },
 });