diff --git a/Grayjay.Desktop.Web/src/Menus.tsx b/Grayjay.Desktop.Web/src/Menus.tsx
index 46706743..13fe7630 100644
--- a/Grayjay.Desktop.Web/src/Menus.tsx
+++ b/Grayjay.Desktop.Web/src/Menus.tsx
@@ -1,4 +1,4 @@
-import { MenuItemButton, MenuItemCheckbox, MenuItemToggle, MenuSeperator } from "./components/menus/Overlays/SettingsMenu";
+import { MenuItemButton, MenuItemCheckbox, MenuItemGroup, MenuItemOption, MenuItemToggle, MenuSeperator } from "./components/menus/Overlays/SettingsMenu";
 
 import ic_notifications from './assets/icons/notifications.svg';
 import ic_streams from './assets/icons/streams.svg';
@@ -15,7 +15,7 @@ import { IPlaylist } from "./backend/models/IPlaylist";
 import { SubscriptionsBackend } from "./backend/SubscriptionsBackend";
 
 export class Menus {
-    static getSubscriptionMenu(subscription: ISubscription, subscriptionSettings: ISubscriptionSettings, sourceState?: ISourceConfigState) {
+    static getSubscriptionMenu(subscription: ISubscription, subscriptionSettings: ISubscriptionSettings, sourceState?: ISourceConfigState, groups: ISubscriptionGroup[] = []) {
         const hasStreams = (sourceState?.capabilitiesChannel?.types?.indexOf("STREAMS") ?? -1) !== -1;
         const hasVideos = (sourceState?.capabilitiesChannel?.types?.indexOf("VIDEOS") ?? -1) !== -1 
           || (sourceState?.capabilitiesChannel?.types?.indexOf("MIXED") ?? -1) !== -1
@@ -61,7 +61,27 @@ export class Menus {
                         onToggle: (v) => {
                             subscriptionSettings.doFetchStreams = v;
                         }
-                    })] : []
+                    })] : [],
+                    ...groups.length > 0 ? [
+                        new MenuSeperator(),
+                        new MenuItemGroup("Add to group", "", {
+                            title: "Add to group",
+                            items: groups.map(g => new MenuItemOption(
+                                g.name,
+                                g.id,
+                                g.urls.includes(subscription.channel.url),
+                                (id: string) => {
+                                    const group = groups.find(x => x.id === id);
+                                    if (!group) return;
+                                    const url = subscription.channel.url;
+                                    group.urls = group.urls.includes(url)
+                                        ? group.urls.filter(u => u !== url)
+                                        : [...group.urls, url];
+                                    SubscriptionsBackend.subscriptionGroupSave(group).catch(console.error);
+                                }
+                            ))
+                        })
+                    ] : []
                 ]
             }
         };
diff --git a/Grayjay.Desktop.Web/src/pages/Channel/index.tsx b/Grayjay.Desktop.Web/src/pages/Channel/index.tsx
index 3ad48f19..753ccfc6 100644
--- a/Grayjay.Desktop.Web/src/pages/Channel/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/Channel/index.tsx
@@ -62,9 +62,12 @@ const ChannelTopBar: Component<ChannelTopBarProps> = (props) => {
     }
 
     const sourceState = StateGlobal.getSourceState(subscription.channel.id.pluginID);
-    const subscriptionSettings: ISubscriptionSettings = await SubscriptionsBackend.subscriptionSettings(subscription.channel.url);
+    const [subscriptionSettings, groups] = await Promise.all([
+      SubscriptionsBackend.subscriptionSettings(subscription.channel.url),
+      SubscriptionsBackend.subscriptionGroups().catch(() => [] as ISubscriptionGroup[])
+    ]);
     anchor.setElement(el);
-    setSubscriptionMenu(Menus.getSubscriptionMenu(subscription, subscriptionSettings, sourceState));
+    setSubscriptionMenu(Menus.getSubscriptionMenu(subscription, subscriptionSettings, sourceState, groups));
     setShowSettings(true);
   };