diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index a5b016637..9dda0e3bb 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -85,7 +85,7 @@
         "type-fest": "^4.18.3",
         "use-seconds": "^1.7.0",
         "usehooks-ts": "^3.1.0",
-        "vaul": "^0.9.1",
+        "vaul": "^1.1.0",
         "virtua": "^0.33.7",
         "zod": "^3.23.8"
       },
@@ -10856,12 +10856,12 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/vaul": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.9.1.tgz",
-      "integrity": "sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.0.tgz",
+      "integrity": "sha512-YhO/bikcauk48hzhMhvIvT+U87cuCbNbKk9fF4Ou5UkI9t2KkBMernmdP37pCzF15hrv55fcny1YhexK8h6GVQ==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-dialog": "^1.0.4"
+        "@radix-ui/react-dialog": "^1.1.1"
       },
       "peerDependencies": {
         "react": "^16.8 || ^17.0 || ^18.0",
diff --git a/packages/react/package.json b/packages/react/package.json
index 8b6a003a8..75a49478e 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -92,7 +92,7 @@
     "type-fest": "^4.18.3",
     "use-seconds": "^1.7.0",
     "usehooks-ts": "^3.1.0",
-    "vaul": "^0.9.1",
+    "vaul": "^1.1.0",
     "virtua": "^0.33.7",
     "zod": "^3.23.8"
   },
diff --git a/packages/react/src/components/about/request/AddSubber.tsx b/packages/react/src/components/about/request/AddSubber.tsx
index 7cc9b660c..0d9454246 100644
--- a/packages/react/src/components/about/request/AddSubber.tsx
+++ b/packages/react/src/components/about/request/AddSubber.tsx
@@ -131,8 +131,10 @@ export function AddSubberForm() {
         onSubmit={form.handleSubmit(onSubmit, onInvalid)}
         className="flex flex-col gap-4"
       >
-        <Alert variant="primary">
-          <div className="i-icon-park-outline:guide-board text-2xl" />
+        <Alert variant="default">
+          <div className="float-left mr-4 text-primary-10">
+            <div className="i-icon-park-outline:guide-board text-4xl" />
+          </div>{" "}
           <AlertDescription
             dangerouslySetInnerHTML={{
               __html: t("channelRequest.ClipperRequirementText"),
diff --git a/packages/react/src/components/about/request/AddVtuber.tsx b/packages/react/src/components/about/request/AddVtuber.tsx
index 9833372e1..1ab14bb21 100644
--- a/packages/react/src/components/about/request/AddVtuber.tsx
+++ b/packages/react/src/components/about/request/AddVtuber.tsx
@@ -139,10 +139,12 @@ export function AddVtuberForm() {
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit, onInvalid)}
-        className="flex flex-col gap-4"
+        className="flex flex-col gap-6"
       >
-        <Alert variant="primary">
-          <div className="i-icon-park-outline:guide-board text-2xl" />
+        <Alert variant="default">
+          <div className="float-left mr-4 text-primary-10">
+            <div className="i-icon-park-outline:guide-board text-4xl" />
+          </div>
           <AlertDescription
             dangerouslySetInnerHTML={{
               __html: t("channelRequest.VtuberRequirementText"),
diff --git a/packages/react/src/components/about/request/DeleteChannel.tsx b/packages/react/src/components/about/request/DeleteChannel.tsx
index a2c90efd3..2dcf8c3d3 100644
--- a/packages/react/src/components/about/request/DeleteChannel.tsx
+++ b/packages/react/src/components/about/request/DeleteChannel.tsx
@@ -105,8 +105,10 @@ export function DeleteChannelForm() {
         onSubmit={form.handleSubmit(onSubmit, onInvalid)}
         className="flex flex-col gap-4"
       >
-        <Alert variant="primary">
-          <div className="i-icon-park-outline:guide-board text-2xl" />
+        <Alert variant="default">
+          <div className="float-left mr-4 text-primary-10">
+            <div className="i-icon-park-outline:guide-board text-4xl" />
+          </div>{" "}
           <AlertDescription
             dangerouslySetInnerHTML={{
               __html: t("channelRequest.DeletionRequirementText"),
diff --git a/packages/react/src/components/about/request/ModifyInfo.tsx b/packages/react/src/components/about/request/ModifyInfo.tsx
index 262a70a56..47dfbbfb4 100644
--- a/packages/react/src/components/about/request/ModifyInfo.tsx
+++ b/packages/react/src/components/about/request/ModifyInfo.tsx
@@ -19,8 +19,10 @@ import { LanguagePicker } from "./LanguagePicker";
 
 const formValues = {
   channel: {
+    id: "",
     name: "",
     link: "",
+    type: "",
   },
   language: "",
   org: "",
@@ -119,6 +121,7 @@ export function ModifyInfoForm() {
     });
   };
 
+  const channelType = form.watch("channel.type");
   return (
     <Form {...form}>
       <form
@@ -127,7 +130,7 @@ export function ModifyInfoForm() {
       >
         <FormField
           control={form.control}
-          name="channel.name"
+          name="channel.id"
           render={({ field }) => (
             <FormItem className="flex flex-col">
               <FormLabel>Channel</FormLabel>
@@ -136,12 +139,15 @@ export function ModifyInfoForm() {
                   form={form}
                   value={field.value}
                   name="channel.name"
-                  onSelect={({ name, id }) => {
+                  type="any_channel"
+                  onSelect={({ name, id, type }) => {
+                    form.setValue("channel.id", id);
                     form.setValue("channel.name", name);
                     form.setValue(
                       "channel.link",
                       `https://www.youtube.com/channel/${id}`,
                     );
+                    form.setValue("channel.type", type); // need to modify server to emit this.
                   }}
                 />
               </FormControl>
@@ -149,35 +155,41 @@ export function ModifyInfoForm() {
             </FormItem>
           )}
         />
-        <FormField
-          control={form.control}
-          name="language"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t("channelRequest.ChannelLanguageLabel")}</FormLabel>
-              <FormControl>
-                <LanguagePicker name="language" form={form} field={field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="org"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t("channelRequest.VtuberGroupLabel")}</FormLabel>
-              <FormControl>
-                <Input placeholder="Hololive, Nijisanji, ..." {...field} />
-              </FormControl>
-              <FormDescription>
-                {t("channelRequest.VtuberGroupHint")}
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        {channelType === "subber" && (
+          <FormField
+            control={form.control}
+            name="language"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  {t("channelRequest.ChannelLanguageLabel")}
+                </FormLabel>
+                <FormControl>
+                  <LanguagePicker name="language" form={form} field={field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
+        {channelType === "vtuber" && (
+          <FormField
+            control={form.control}
+            name="org"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("channelRequest.VtuberGroupLabel")}</FormLabel>
+                <FormControl>
+                  <Input placeholder="Hololive, Nijisanji, ..." {...field} />
+                </FormControl>
+                <FormDescription>
+                  {t("channelRequest.VtuberGroupHint")}
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
         <FormField
           control={form.control}
           name="twitter"
diff --git a/packages/react/src/components/channel/ChannelPicker.tsx b/packages/react/src/components/channel/ChannelPicker.tsx
index e6a8cd8ee..9e02fab59 100644
--- a/packages/react/src/components/channel/ChannelPicker.tsx
+++ b/packages/react/src/components/channel/ChannelPicker.tsx
@@ -36,19 +36,27 @@ interface VtuberPickerProps<
   form?: UseFormReturn<T>;
   value: FieldPathValue<T, FieldName>;
   onSelect: (value: SearchAutoCompleteChannel) => void;
+  type?: "vtuber" | "any_channel" | "clipper";
 }
 
 export function ChannelPicker<
   T extends FieldValues,
   FieldName extends FieldPath<T>,
->({ name, form, value, onSelect }: VtuberPickerProps<T, FieldName>) {
+>({
+  name,
+  form,
+  value,
+  onSelect,
+  type = "vtuber",
+}: VtuberPickerProps<T, FieldName>) {
   const { t } = useTranslation();
   const currentValue = useAtomValue(currentValueAtom);
   const [debouncedValue, setDebouncedValue] = useAtom(debouncedValueAtom);
   const { data, mutate, isPending } = useSearchAutoCompleteMutation();
 
   useEffect(() => {
-    if (debouncedValue) mutate({ q: debouncedValue, n: 10, t: "vtuber" });
+    if (debouncedValue && debouncedValue.length > 1)
+      mutate({ q: debouncedValue, n: 10, t: type });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue]);
 
@@ -85,9 +93,16 @@ export function ChannelPicker<
             })}
           />
           <CommandList>
-            <CommandEmpty>{t("component.channelPicker.notFound")}</CommandEmpty>
+            {isPending && (
+              <div className="flex w-full">
+                <div className="i-lucide:loader-2 mx-auto animate-spin" />
+              </div>
+            )}
+            <CommandEmpty>
+              {!isPending && t("component.channelPicker.notFound")}
+            </CommandEmpty>
             <CommandGroup>
-              {data?.vtuber?.map((channel) => (
+              {data?.[type]?.map((channel) => (
                 <CommandItem
                   key={channel.id}
                   value={channel.name}
@@ -96,11 +111,6 @@ export function ChannelPicker<
                   {channel.name}
                 </CommandItem>
               ))}
-              {isPending && (
-                <CommandItem className="flex justify-center py-2" disabled>
-                  <div className="i-lucide:loader-2 animate-spin" />
-                </CommandItem>
-              )}
             </CommandGroup>
           </CommandList>
         </Command>
diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
index c8402fcd2..c3a82e372 100644
--- a/packages/react/src/components/layout/Frame.tsx
+++ b/packages/react/src/components/layout/Frame.tsx
@@ -12,11 +12,11 @@ import {
 } from "@/hooks/useFrame";
 import { darkAtom } from "@/hooks/useTheme";
 import { Toaster } from "@/shadcn/ui/toaster";
-import { orgAtom } from "@/store/org";
+import { orgAtom, orgRankingAtom } from "@/store/org";
 import { miniPlayerAtom } from "@/store/player";
 import clsx from "clsx";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { Suspense, useEffect } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { ErrorFallback } from "../common/ErrorFallback";
@@ -27,6 +27,8 @@ import SelectionFooter from "./SelectionFooter";
 import { selectionModeAtom } from "@/hooks/useVideoSelection";
 import { videoReportAtom } from "@/store/video";
 import React from "react";
+import { useOrgs } from "@/services/orgs.service";
+import { useTimeout } from "usehooks-ts";
 
 export function LocationAwareReactivity() {
   const location = useLocation();
@@ -53,6 +55,26 @@ export function LocationAwareReactivity() {
   return <></>;
 }
 
+export function GlobalReactivity() {
+  const [wait, setWait] = useState(false);
+  useTimeout(() => setWait(true), 1000);
+  const { data, isError } = useOrgs({ enabled: wait });
+  const updateOrgRanking = useSetAtom(orgRankingAtom);
+  useEffect(() => {
+    if (data && data.length > 0) {
+      console.log("updating org ranking");
+      updateOrgRanking((orgs: Org[]) => {
+        return orgs
+          .map((org) => data.find((x) => x.name === org.name))
+          .filter((x): x is Org => !!x);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  return <></>;
+}
+
 const LazyVideoReportDialog = React.lazy(() => import("../video/VideoReport"));
 
 export function Frame() {
@@ -109,6 +131,7 @@ export function Frame() {
       {isMobile && <Footer />}
       {miniPlayer && <MiniPlayer />}
       <Toaster />
+      <GlobalReactivity />
     </div>
   );
 }
diff --git a/packages/react/src/components/settings/ToggleableFeature.tsx b/packages/react/src/components/settings/ToggleableFeature.tsx
new file mode 100644
index 000000000..9ee5056f7
--- /dev/null
+++ b/packages/react/src/components/settings/ToggleableFeature.tsx
@@ -0,0 +1,113 @@
+import { cn } from "@/lib/utils";
+import { Checkbox } from "@/shadcn/ui/checkbox";
+import { Label } from "@/shadcn/ui/label";
+import React from "react";
+
+interface BaseToggleableFeatureProps {
+  id: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  label: string;
+}
+
+interface IconToggleableFeatureProps extends BaseToggleableFeatureProps {
+  variant: "icon";
+  icon: string;
+}
+
+interface BasicToggleableFeatureProps extends BaseToggleableFeatureProps {
+  variant: "basic";
+}
+
+type ToggleableFeatureProps =
+  | IconToggleableFeatureProps
+  | BasicToggleableFeatureProps;
+
+interface ToggleableFeatureGroupProps {
+  features: ToggleableFeatureProps[];
+  showDividers?: boolean;
+}
+
+// Individual feature toggle component
+const ToggleableFeatureSetting = (props: ToggleableFeatureProps) => {
+  if (props.variant === "icon") {
+    const { id, checked, onCheckedChange, label, icon } = props;
+    return (
+      <div className="flex items-center gap-4">
+        <div
+          className={cn(
+            "flex h-10 w-10 items-center justify-center rounded-lg",
+            checked ? "bg-primary-4" : "bg-base-4",
+          )}
+        >
+          <div
+            className={cn(
+              icon,
+              "h-5 w-5",
+              checked ? "text-primary-11" : "text-base-11",
+            )}
+          />
+        </div>
+        <Label
+          htmlFor={id}
+          className={cn(
+            "flex grow cursor-pointer items-center gap-1 self-stretch",
+            {
+              "text-primary-11": checked,
+              "text-base-11": !checked,
+            },
+          )}
+        >
+          {label}
+        </Label>
+        <Checkbox
+          id={id}
+          checked={checked}
+          onCheckedChange={() => onCheckedChange(!checked)}
+          className="h-6 w-6"
+        />
+      </div>
+    );
+  }
+
+  const { id, checked, onCheckedChange, label } = props;
+  return (
+    <div className="flex items-center gap-3">
+      <Checkbox
+        id={id}
+        checked={checked}
+        onCheckedChange={() => onCheckedChange(!checked)}
+      />
+      <Label
+        htmlFor={id}
+        className={cn("cursor-pointer", {
+          "opacity-70": !checked,
+        })}
+      >
+        {label}
+      </Label>
+    </div>
+  );
+};
+
+// Group component to handle multiple toggles
+// Group component to handle multiple toggles
+export const ToggleableFeatureGroup = ({
+  features,
+  showDividers = false,
+}: ToggleableFeatureGroupProps) => {
+  return (
+    <div className={"flex flex-col  " + (showDividers ? "gap-2" : "gap-4")}>
+      {features.map((feature, index) => (
+        <React.Fragment key={feature.id}>
+          <ToggleableFeatureSetting {...feature} />
+          {showDividers && index < features.length - 1 && (
+            <div className="-mb-px h-px bg-base-6" />
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default ToggleableFeatureGroup;
diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx
index bbbb58600..725505f36 100644
--- a/packages/react/src/components/sidebar/sidebar.tsx
+++ b/packages/react/src/components/sidebar/sidebar.tsx
@@ -24,7 +24,6 @@ import { useOnClickOutside } from "usehooks-ts";
 import { orgRankingAtom } from "@/store/org";
 import { TLDexLogo } from "../common/TLDexLogo";
 import { getThumbnailForOrg } from "@/lib/thumb";
-import { useOrgs } from "@/services/orgs.service";
 
 export function Sidebar() {
   const { t } = useTranslation();
@@ -37,7 +36,6 @@ export function Sidebar() {
   const isMobile = useAtomValue(isMobileAtom);
   const toggle = useSetAtom(toggleSidebarAtom);
   const fs = useAtomValue(sidebarShouldBeFullscreenAtom);
-  const { data: orgs, isError } = useOrgs({ enabled: open });
 
   const handleClickOutside = useCallback(() => {
     floating && open && setOpen(false);
@@ -87,7 +85,7 @@ export function Sidebar() {
           </div>
 
           <Link
-            to="/settings/orgs"
+            to="/settings/content"
             className={cn(
               `w-full justify-start rounded-md px-4 py-2 
               text-center text-sm font-semibold tracking-tight text-base-9 
diff --git a/packages/react/src/components/tldex/TLChat.tsx b/packages/react/src/components/tldex/TLChat.tsx
index b60e800a8..081172026 100644
--- a/packages/react/src/components/tldex/TLChat.tsx
+++ b/packages/react/src/components/tldex/TLChat.tsx
@@ -5,9 +5,9 @@ import { Badge } from "@/shadcn/ui/badge";
 import { Button } from "@/shadcn/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/ui/popover";
 import { playerRefAtom } from "@/store/player";
-import { tldexBlockedAtom, tldexSettngsAtom } from "@/store/tldex";
+import { tldexBlockedAtom, tldexSettingsAtom } from "@/store/tldex";
 import { useAtom, useAtomValue } from "jotai";
-import { DetailedHTMLProps, HTMLAttributes, forwardRef } from "react";
+import { DetailedHTMLProps, HTMLAttributes, forwardRef, useMemo } from "react";
 import { Link } from "react-router-dom";
 import { Virtuoso } from "react-virtuoso";
 
@@ -16,8 +16,11 @@ interface TLChatProps {
 }
 
 export function TLChat({ videoId }: TLChatProps) {
-  const tldexState = useAtomValue(tldexSettngsAtom);
-  const roomID: RoomIDString = `${videoId}/${tldexState.liveTlLang}`;
+  const tldexState = useAtomValue(tldexSettingsAtom);
+  const roomID = useMemo(
+    () => `${videoId}/${tldexState.liveTlLang}` as RoomIDString,
+    [videoId, tldexState.liveTlLang],
+  );
   const { chatDB } = useSocket(roomID);
 
   return (
diff --git a/packages/react/src/components/tldex/new-editor/VideoIdInput.tsx b/packages/react/src/components/tldex/new-editor/VideoIdInput.tsx
index 7604f0940..f880644e7 100644
--- a/packages/react/src/components/tldex/new-editor/VideoIdInput.tsx
+++ b/packages/react/src/components/tldex/new-editor/VideoIdInput.tsx
@@ -14,11 +14,11 @@ import {
 import { CLIPPER_LANGS } from "@/lib/consts";
 import { useAtomValue } from "jotai";
 import { userAtom } from "@/store/auth";
-import { tldexSettngsAtom } from "@/store/tldex";
+import { tldexLanguageAtom } from "@/store/tldex";
 
 export function VideoIdInput() {
   const [searchParams] = useSearchParams();
-  const tldexDefaults = useAtomValue(tldexSettngsAtom);
+  const liveTlLang = useAtomValue(tldexLanguageAtom);
   const id = searchParams.get("id") || "";
   const editorLanguage = searchParams.get("tleditor-language");
   const creditName = searchParams.get("caption-by");
@@ -26,7 +26,7 @@ export function VideoIdInput() {
 
   const [urlField, setUrlField] = useState<string>(id);
   const [language, setLanguage] = useState<string>(
-    editorLanguage || tldexDefaults.liveTlLang,
+    editorLanguage || liveTlLang,
   );
   const [caption, setCaption] = useState<string>(
     creditName || user?.username || "",
diff --git a/packages/react/src/components/video/VideoCard.tsx b/packages/react/src/components/video/VideoCard.tsx
index 08ac718be..a639cba63 100644
--- a/packages/react/src/components/video/VideoCard.tsx
+++ b/packages/react/src/components/video/VideoCard.tsx
@@ -17,6 +17,7 @@ import {
 } from "@/hooks/useVideoSelection";
 import { isMobileAtom } from "@/hooks/useFrame";
 import { ChannelImg } from "../channel/ChannelImg";
+import { tldexLanguageAtom } from "@/store/tldex";
 
 export type VideoCardType = VideoRef &
   Partial<VideoBase> &
@@ -203,6 +204,9 @@ export function VideoCard({
     [size, onClick, selectionMode, selectedSet, video.id],
   );
 
+  const tlLang = useAtomValue(tldexLanguageAtom);
+  const tlcount = video.live_tl_count?.[tlLang] ?? 0;
+
   const chName = usePreferredName(video.channel);
 
   return (
@@ -239,12 +243,21 @@ export function VideoCard({
           {video.songcount && (
             <span className="text-pretty rounded-sm bg-black/80 px-1 text-sm capitalize text-white/80 group-hover:text-white">
               <div
-                className="i-lucide:music-4 inline-block align-middle"
-                style={{ fontSize: "11px", lineHeight: "1.25rem" }}
+                className="i-fluent:music-note-2-16-regular inline-block align-text-bottom"
+                // style={{ fontSize: "13px", lineHeight: "1.15rem" }}
               />
               &nbsp;{video.songcount}
             </span>
           )}
+          {tlcount > 0 && (
+            <span className="text-pretty rounded-sm bg-black/80 px-1 text-sm capitalize text-white/80 group-hover:text-white">
+              <div
+                className="i-fluent:subtitles-16-regular inline-block align-text-bottom"
+                // style={{ fontSize: "13px", lineHeight: "1.15rem" }}
+              />
+              &nbsp;{tlcount}
+            </span>
+          )}
           {showDuration && <VideoCardDuration className="" {...video} />}
         </div>
       </Link>
diff --git a/packages/react/src/hooks/useChatDB.ts b/packages/react/src/hooks/useChatDB.ts
index 165896d65..f4bd30e4b 100644
--- a/packages/react/src/hooks/useChatDB.ts
+++ b/packages/react/src/hooks/useChatDB.ts
@@ -1,6 +1,6 @@
 import { useAtom, useAtomValue, useStore } from "jotai";
 import { useClient } from "./useClient";
-import { tldexSettngsAtom } from "@/store/tldex";
+import { tldexSettingsAtom } from "@/store/tldex";
 import { roomToLang, roomToVideoID, toParsedMessage } from "@/lib/socket";
 import { roomsAtom, videoToRoomAtom } from "@/store/chat";
 import { useEffect } from "react";
@@ -11,7 +11,7 @@ export function useChatDB(roomId: RoomIDString) {
   const queryClient = useQueryClient();
   const client = useClient();
   const store = useStore();
-  const tldexState = useAtomValue(tldexSettngsAtom);
+  const tldexState = useAtomValue(tldexSettingsAtom);
   const [room, setRoom] = useAtom(roomsAtom(roomId));
   const [videoToRoom, setVideoToRoom] = useAtom(
     videoToRoomAtom(roomToVideoID(roomId)),
diff --git a/packages/react/src/locales/en/ui.yml b/packages/react/src/locales/en/ui.yml
index a2bbed49d..60f28399a 100644
--- a/packages/react/src/locales/en/ui.yml
+++ b/packages/react/src/locales/en/ui.yml
@@ -371,7 +371,8 @@ views:
     defaultHomepage:
       lastVisitedOrgHome: Last Visited Org Home
       favoritesWhenLoggedIn: Favorites (When Logged In)
-    hideFeaturesLabel: Hide Features
+    hideFeaturesLabel: Advanced
+    videoFilter: Filter Videos
     showTimezonesOnHover: Show Timezones on hover
     orgs: Starred Orgs
     filterDeadStreams: Hide Streams that don't go live for >2 hours
diff --git a/packages/react/src/routes/about/request.tsx b/packages/react/src/routes/about/request.tsx
index 4580aa29e..d32757768 100644
--- a/packages/react/src/routes/about/request.tsx
+++ b/packages/react/src/routes/about/request.tsx
@@ -46,6 +46,7 @@ export function AboutRequest() {
           </RequestTypeRadioButton>
         </Label>
       </RadioGroup>
+      <div>{/* Making some space  */}</div>
       {type === "addVtuber" && <AddVtuberForm />}
       {type === "addSubber" && <AddSubberForm />}
       {type === "modifyInfo" && <ModifyInfoForm />}
diff --git a/packages/react/src/routes/settings/appearance.tsx b/packages/react/src/routes/settings/appearance.tsx
index 0ffff29f2..bda6a83e5 100644
--- a/packages/react/src/routes/settings/appearance.tsx
+++ b/packages/react/src/routes/settings/appearance.tsx
@@ -1,7 +1,5 @@
 import { SettingsItem } from "@/components/settings/SettingsItem";
 import { Button } from "@/shadcn/ui/button";
-import { Checkbox } from "@/shadcn/ui/checkbox";
-import { Label } from "@/shadcn/ui/label";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -23,6 +21,7 @@ import {
 import { useVideoCardSizes } from "@/store/video";
 import { hideThumbnailAtom, englishNameAtom } from "@/store/settings";
 import { Separator } from "@/shadcn/ui/separator";
+import ToggleableFeatureGroup from "@/components/settings/ToggleableFeature";
 
 export const SettingsTheme = () => {
   const { t } = useTranslation();
@@ -51,6 +50,35 @@ export const SettingsTheme = () => {
     },
   ] as const;
 
+  const gridSizeFeatures = gridSizes.map(({ label, value, icon }) => ({
+    id: `gridSize-${value}`,
+    checked: size === value,
+    onCheckedChange: () => setSize(value),
+    label,
+    variant: "icon" as const,
+    icon,
+  }));
+
+  // Then the display preference features
+  const displayPreferenceFeatures = [
+    {
+      id: "hide_thumbnails",
+      checked: hideThumbnail,
+      onCheckedChange: () => setHideThumbnail(!hideThumbnail),
+      label: t("views.settings.hideVideoThumbnailsLabel"),
+      variant: "icon" as const,
+      icon: "i-lucide:image",
+    },
+    {
+      id: "use_english_names",
+      checked: useENName,
+      onCheckedChange: () => setUseENName(!useENName),
+      label: t("views.settings.useEnglishNameMsg"),
+      variant: "icon" as const,
+      icon: "i-lucide:languages",
+    },
+  ];
+
   return (
     <div className="space-y-6">
       {/* Color Pickers */}
@@ -116,109 +144,16 @@ export const SettingsTheme = () => {
           options={THEME_COLORS.concat(THEME_BASE_COLORS)}
         />
       </SettingsItem>
-
       {/* Grid Size Selection */}
       <SettingsItem label={t("views.settings.gridSizeLabel")} fullWidth>
-        {gridSizes.map(({ label, value, icon }) => (
-          <div key={value} className="flex items-center gap-2">
-            <Label
-              htmlFor={`gridSize-${value}`}
-              className={cn("flex grow cursor-pointer items-center", {
-                "text-primary-11": size === value,
-                "text-base-11": size !== value,
-              })}
-            >
-              <div
-                className={cn(
-                  "mr-2 flex h-10 w-10 items-center justify-center rounded-lg",
-                  size === value ? "bg-primary-4" : "bg-base-4",
-                )}
-              >
-                <div
-                  className={cn(
-                    icon,
-                    "h-5 w-5",
-                    size === value ? "text-primary-11" : "text-base-11",
-                  )}
-                />
-              </div>
-              {label}
-            </Label>
-            <Checkbox
-              id={`gridSize-${value}`}
-              checked={size === value}
-              onCheckedChange={() => setSize(value)}
-              className="hidden h-6 w-6"
-            />
-          </div>
-        ))}
+        <ToggleableFeatureGroup features={gridSizeFeatures} />
       </SettingsItem>
-
       {/* Display Preferences */}
-      <SettingsItem label={t("views.settings.displayPreferences")} fullWidth>
-        <div className="flex items-center gap-4">
-          <div
-            className={cn(
-              "flex h-10 w-10 items-center justify-center rounded-lg",
-              hideThumbnail ? "bg-primary-4" : "bg-base-4",
-            )}
-          >
-            <div
-              className={cn(
-                "i-lucide:image h-5 w-5",
-                hideThumbnail ? "text-primary-11" : "text-base-11",
-              )}
-            />
-          </div>
-          <Label
-            htmlFor="hide_thumbnails"
-            className={cn("flex grow cursor-pointer", {
-              "text-primary-11": hideThumbnail,
-              "text-base-11": !hideThumbnail,
-            })}
-          >
-            {t("views.settings.hideVideoThumbnailsLabel")}
-          </Label>
-          <Checkbox
-            id="hide_thumbnails"
-            checked={hideThumbnail}
-            onCheckedChange={() => setHideThumbnail(!hideThumbnail)}
-            className="h-6 w-6"
-          />
-        </div>
-
-        <div className="h-px bg-base-6" />
-
-        <div className="flex items-center gap-4">
-          <div
-            className={cn(
-              "flex h-10 w-10 items-center justify-center rounded-lg",
-              useENName ? "bg-primary-4" : "bg-base-4",
-            )}
-          >
-            <div
-              className={cn(
-                "i-lucide:languages h-5 w-5",
-                useENName ? "text-primary-11" : "text-base-11",
-              )}
-            />
-          </div>
-          <Label
-            htmlFor="use_english_names"
-            className={cn("flex grow cursor-pointer", {
-              "text-primary-11": useENName,
-              "text-base-11": !useENName,
-            })}
-          >
-            {t("views.settings.useEnglishNameMsg")}
-          </Label>
-          <Checkbox
-            id="use_english_names"
-            checked={useENName}
-            onCheckedChange={(c) => setUseENName(!!c)}
-            className="h-6 w-6"
-          />
-        </div>
+      <SettingsItem label={t("views.settings.hideFeaturesLabel")} fullWidth>
+        <ToggleableFeatureGroup
+          features={displayPreferenceFeatures}
+          showDividers
+        />
       </SettingsItem>
     </div>
   );
diff --git a/packages/react/src/routes/settings/content.tsx b/packages/react/src/routes/settings/content.tsx
index 7e74bcf60..5445e21f7 100644
--- a/packages/react/src/routes/settings/content.tsx
+++ b/packages/react/src/routes/settings/content.tsx
@@ -1,8 +1,5 @@
 import { SettingsItem } from "@/components/settings/SettingsItem";
 import { ChannelCard } from "@/components/channel/ChannelCard";
-import { Checkbox } from "@/shadcn/ui/checkbox";
-import { Label } from "@/shadcn/ui/label";
-import { cn } from "@/lib/utils";
 import { useAtom } from "jotai";
 import { useTranslation } from "react-i18next";
 import {
@@ -15,6 +12,7 @@ import {
 } from "@/store/settings";
 import { orgRankingAtom } from "@/store/org";
 import { OrgReranker } from "./orgs";
+import ToggleableFeatureGroup from "@/components/settings/ToggleableFeature";
 
 export function SettingsContentPreferences() {
   const { t } = useTranslation();
@@ -43,96 +41,62 @@ export function SettingsContentPreferences() {
     },
   ] as const;
 
+  const defaultPageFeatures = defaultPages.map(({ value, label, icon }) => ({
+    id: `defaultPage-${value}`,
+    checked: defaultOpen === value,
+    onCheckedChange: () => setDefaultOpen(value),
+    label,
+    variant: "icon" as const,
+    icon,
+  }));
+
+  const hideFeatures = [
+    {
+      id: "hide_collab",
+      checked: hideCollab,
+      onCheckedChange: () => setHideCollab(!hideCollab),
+      label: t("views.settings.hideCollabStreamsLabel"),
+      variant: "icon" as const,
+      icon: "i-lucide:users",
+    },
+    {
+      id: "hide_placeholder",
+      checked: hidePlaceholder,
+      onCheckedChange: () => setHidePlaceholder(!hidePlaceholder),
+      label: t("views.settings.hidePlaceholderStreams"),
+      variant: "icon" as const,
+      icon: "i-lucide:calendar",
+    },
+    {
+      id: "filter_dead_streams",
+      checked: filterDeadStreams,
+      onCheckedChange: () => setFilterDeadStreams(!filterDeadStreams),
+      label: t("views.settings.filterDeadStreams"),
+      variant: "icon" as const,
+      icon: "i-uil:bed",
+    },
+    {
+      id: "filter_long_streams",
+      checked: filterLongStreams,
+      onCheckedChange: () => setFilterLongStreams(!filterLongStreams),
+      label: t("views.settings.filterLongStreams"),
+      variant: "icon" as const,
+      icon: "i-solar:infinity-linear",
+    },
+  ];
+
   return (
     <div className="flex flex-col">
       <SettingsItem label={t("views.settings.defaultPage")} fullWidth>
-        <div className="flex flex-col gap-2">
-          {defaultPages.map(({ value, label, icon }) => (
-            <div
-              key={"defaultPage-" + value}
-              className="flex items-center gap-3"
-            >
-              <Checkbox
-                checked={defaultOpen === value}
-                onCheckedChange={() => setDefaultOpen(value)}
-                id={`defaultPage-${value}`}
-              />
-              <Label
-                htmlFor={`defaultPage-${value}`}
-                className={cn("flex cursor-pointer items-center gap-1", {
-                  "opacity-70": defaultOpen !== value,
-                })}
-              >
-                <div className={icon}></div>
-                <span>{label}</span>
-              </Label>
-            </div>
-          ))}
-        </div>
+        <ToggleableFeatureGroup features={defaultPageFeatures} />
       </SettingsItem>
 
       <SettingsItem label={t("views.settings.orgs")} fullWidth>
         <OrgReranker rankedOrgs={rankedOrgs} setRankedOrgs={setRankedOrgs} />
       </SettingsItem>
 
-      <SettingsItem label={t("views.settings.hideFeaturesLabel")} fullWidth>
-        <div className="flex flex-col gap-3">
-          <div className="flex items-center gap-3">
-            <Checkbox
-              id="hide_collab"
-              checked={hideCollab}
-              onCheckedChange={() => setHideCollab(!hideCollab)}
-            />
-            <Label
-              htmlFor="hide_collab"
-              className={cn({ "opacity-70": !hideCollab })}
-            >
-              {t("views.settings.hideCollabStreamsLabel")}
-            </Label>
-          </div>
-
-          <div className="flex items-center gap-3">
-            <Checkbox
-              id="hide_placeholder"
-              checked={hidePlaceholder}
-              onCheckedChange={() => setHidePlaceholder(!hidePlaceholder)}
-            />
-            <Label
-              htmlFor="hide_placeholder"
-              className={cn({ "opacity-70": !hidePlaceholder })}
-            >
-              {t("views.settings.hidePlaceholderStreams")}
-            </Label>
-          </div>
-
-          <div className="flex items-center gap-3">
-            <Checkbox
-              id="filter_dead_streams"
-              checked={filterDeadStreams}
-              onCheckedChange={() => setFilterDeadStreams(!filterDeadStreams)}
-            />
-            <Label
-              htmlFor="filter_dead_streams"
-              className={cn({ "opacity-70": !filterDeadStreams })}
-            >
-              {t("views.settings.filterDeadStreams")}
-            </Label>
-          </div>
-
-          <div className="flex items-center gap-3">
-            <Checkbox
-              id="filter_long_streams"
-              checked={filterLongStreams}
-              onCheckedChange={() => setFilterLongStreams(!filterLongStreams)}
-            />
-            <Label
-              htmlFor="filter_long_streams"
-              className={cn({ "opacity-70": !filterLongStreams })}
-            >
-              {t("views.settings.filterLongStreams")}
-            </Label>
-          </div>
-        </div>
+      <SettingsItem label={t("views.settings.videoFilter")} fullWidth>
+        <ToggleableFeatureGroup features={hideFeatures} showDividers />
       </SettingsItem>
 
       <SettingsItem label={t("views.settings.blockedChannels")} fullWidth>
diff --git a/packages/react/src/store/settings.ts b/packages/react/src/store/settings.ts
index e3142c473..f8257e200 100644
--- a/packages/react/src/store/settings.ts
+++ b/packages/react/src/store/settings.ts
@@ -131,11 +131,11 @@ export const filterDeadStreamsAtom = atom(
 );
 
 export const filterLongStreamsAtom = atom(
-  (get) => get(settingsAtom).filterLongStreams,
+  (get) => get(settingsAtom).filterLongStreams ?? true,
   (get, set, newValue: boolean) => {
     set(settingsAtom, {
       ...get(settingsAtom),
-      filterLongVideos: newValue,
+      filterLongStreams: newValue,
     });
   },
 );
diff --git a/packages/react/src/store/tldex.ts b/packages/react/src/store/tldex.ts
index 611c83c45..23a64458e 100644
--- a/packages/react/src/store/tldex.ts
+++ b/packages/react/src/store/tldex.ts
@@ -1,4 +1,5 @@
-import { TLLanguageCode } from "@/lib/consts";
+import { GET_ON_INIT, TLLanguageCode } from "@/lib/consts";
+import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 
 export interface TLDexStoreState {
@@ -24,17 +25,32 @@ export interface TLDexStoreState {
   liveTlHideSpoiler: boolean; // Hide message past current video time
 }
 
-export const tldexSettngsAtom = atomWithStorage<TLDexStoreState>("tldex", {
-  liveTlStickBottom: false,
-  liveTlLang: "en",
-  liveTlFontSize: 13,
-  liveTlShowVerified: true, // show verified messages
-  liveTlShowModerator: true, // show moderator messages
-  liveTlShowVtuber: true, // show vtuber messages
-  liveTlShowLocalTime: false, // show client local time
-  liveTlWindowSize: 0.3, // Default size, otherwise percentage height
-  liveTlShowSubtitle: true, // Show subtitles on videos
-  liveTlHideSpoiler: false, // Hide message past current video time
-});
+export const tldexSettingsAtom = atomWithStorage<TLDexStoreState>(
+  "tldex",
+  {
+    liveTlStickBottom: false,
+    liveTlLang: "en",
+    liveTlFontSize: 13,
+    liveTlShowVerified: true, // show verified messages
+    liveTlShowModerator: true, // show moderator messages
+    liveTlShowVtuber: true, // show vtuber messages
+    liveTlShowLocalTime: false, // show client local time
+    liveTlWindowSize: 0.3, // Default size, otherwise percentage height
+    liveTlShowSubtitle: true, // Show subtitles on videos
+    liveTlHideSpoiler: false, // Hide message past current video time
+  },
+  undefined,
+  GET_ON_INIT,
+);
+
+export const tldexLanguageAtom = atom(
+  (get) => get(tldexSettingsAtom).liveTlLang,
+  (get, set, newValue: TLLanguageCode) => {
+    set(tldexSettingsAtom, {
+      ...get(tldexSettingsAtom),
+      liveTlLang: newValue,
+    });
+  },
+);
 
 export const tldexBlockedAtom = atomWithStorage<string[]>("tldex-blocked", []);
diff --git a/packages/react/src/types/search.d.ts b/packages/react/src/types/search.d.ts
index 4cffaa545..e1994abbc 100644
--- a/packages/react/src/types/search.d.ts
+++ b/packages/react/src/types/search.d.ts
@@ -1,8 +1,10 @@
-type SearchAutoCompleteType = "vtuber" | "any_channel" | "topic";
+type SearchAutoCompleteType = "vtuber" | "any_channel" | "topic" | "clipper";
 
 interface SearchAutoComplete {
   vtuber?: SearchAutoCompleteChannel[];
   topic?: SearchAutoCompleteTopic[];
+  clipper?: SearchAutoCompleteChannel[];
+  any_channel: SearchAutoCompleteChannel[];
 }
 
 interface SearchAutoCompleteChannel {
@@ -10,6 +12,7 @@ interface SearchAutoCompleteChannel {
   name: string;
   english_name?: string;
   org?: string;
+  type: string;
 }
 
 interface SearchAutoCompleteTopic {