diff --git a/src/components/player/atoms/settings/SourceSelectingView.tsx b/src/components/player/atoms/settings/SourceSelectingView.tsx
index 6b058ee1..33381010 100644
--- a/src/components/player/atoms/settings/SourceSelectingView.tsx
+++ b/src/components/player/atoms/settings/SourceSelectingView.tsx
@@ -21,6 +21,7 @@ export interface SourceSelectionViewProps {
 export interface EmbedSelectionViewProps {
   id: string;
   sourceId: string | null;
+  onBack?: () => void;
 }
 
 export function EmbedOption(props: {
@@ -60,7 +61,11 @@ export function EmbedOption(props: {
   );
 }
 
-export function EmbedSelectionView({ sourceId, id }: EmbedSelectionViewProps) {
+export function EmbedSelectionView({
+  sourceId,
+  id,
+  onBack,
+}: EmbedSelectionViewProps) {
   const { t } = useTranslation();
   const router = useOverlayRouter(id);
   const { run, watching, notfound, loading, items, errored } =
@@ -126,7 +131,7 @@ export function EmbedSelectionView({ sourceId, id }: EmbedSelectionViewProps) {
 
   return (
     <>
-      <Menu.BackLink onClick={() => router.navigate("/source")}>
+      <Menu.BackLink onClick={onBack || (() => router.navigate("/source"))}>
         {sourceName}
       </Menu.BackLink>
       <Menu.Section>{content}</Menu.Section>
diff --git a/src/pages/parts/player/SourceSelectPart.tsx b/src/pages/parts/player/SourceSelectPart.tsx
index cd371b7d..c5efdbae 100644
--- a/src/pages/parts/player/SourceSelectPart.tsx
+++ b/src/pages/parts/player/SourceSelectPart.tsx
@@ -1,164 +1,20 @@
 import { ScrapeMedia } from "@p-stream/providers";
-import React, { ReactNode, useEffect, useMemo, useRef } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 
-import { getCachedMetadata } from "@/backend/helpers/providerApi";
-import { Loading } from "@/components/layout/Loading";
 import {
-  useEmbedScraping,
-  useSourceScraping,
-} from "@/components/player/hooks/useSourceSelection";
+  EmbedSelectionView,
+  SourceSelectionView,
+} from "@/components/player/atoms/settings/SourceSelectingView";
 import { Menu } from "@/components/player/internals/ContextMenu";
-import { SelectableLink } from "@/components/player/internals/ContextMenu/Links";
-import { usePreferencesStore } from "@/stores/preferences";
-
-// Embed option component
-function EmbedOption(props: {
-  embedId: string;
-  url: string;
-  sourceId: string;
-  routerId: string;
-}) {
-  const { t } = useTranslation();
-  const unknownEmbedName = t("player.menus.sources.unknownOption");
-
-  const embedName = useMemo(() => {
-    if (!props.embedId) return unknownEmbedName;
-    const sourceMeta = getCachedMetadata().find((s) => s.id === props.embedId);
-    return sourceMeta?.name ?? unknownEmbedName;
-  }, [props.embedId, unknownEmbedName]);
-
-  const { run, errored, loading } = useEmbedScraping(
-    props.routerId,
-    props.sourceId,
-    props.url,
-    props.embedId,
-  );
-
-  return (
-    <SelectableLink loading={loading} error={errored} onClick={run}>
-      <span className="flex flex-col">
-        <span>{embedName}</span>
-      </span>
-    </SelectableLink>
-  );
-}
-
-// Embed selection view (when a source is selected)
-function EmbedSelectionView(props: {
-  sourceId: string;
-  routerId: string;
-  onBack: () => void;
-}) {
-  const { t } = useTranslation();
-  const { run, notfound, loading, items, errored } = useSourceScraping(
-    props.sourceId,
-    props.routerId,
-  );
-
-  const sourceName = useMemo(() => {
-    if (!props.sourceId) return "...";
-    const sourceMeta = getCachedMetadata().find((s) => s.id === props.sourceId);
-    return sourceMeta?.name ?? "...";
-  }, [props.sourceId]);
-
-  const lastSourceId = useRef<string | null>(null);
-  useEffect(() => {
-    if (lastSourceId.current === props.sourceId) return;
-    lastSourceId.current = props.sourceId;
-    if (!props.sourceId) return;
-    run();
-  }, [run, props.sourceId]);
-
-  let content: ReactNode = null;
-  if (loading)
-    content = (
-      <Menu.TextDisplay noIcon>
-        <Loading />
-      </Menu.TextDisplay>
-    );
-  else if (notfound)
-    content = (
-      <Menu.TextDisplay
-        title={t("player.menus.sources.noStream.title") ?? undefined}
-      >
-        {t("player.menus.sources.noStream.text")}
-      </Menu.TextDisplay>
-    );
-  else if (items?.length === 0)
-    content = (
-      <Menu.TextDisplay
-        title={t("player.menus.sources.noEmbeds.title") ?? undefined}
-      >
-        {t("player.menus.sources.noEmbeds.text")}
-      </Menu.TextDisplay>
-    );
-  else if (errored)
-    content = (
-      <Menu.TextDisplay
-        title={t("player.menus.sources.failed.title") ?? undefined}
-      >
-        {t("player.menus.sources.failed.text")}
-      </Menu.TextDisplay>
-    );
-  else if (items && props.sourceId)
-    content = items.map((v) => (
-      <EmbedOption
-        key={`${v.embedId}-${v.url}`}
-        embedId={v.embedId}
-        url={v.url}
-        routerId={props.routerId}
-        sourceId={props.sourceId}
-      />
-    ));
-
-  return (
-    <>
-      <Menu.BackLink onClick={props.onBack}>{sourceName}</Menu.BackLink>
-      <Menu.Section>{content}</Menu.Section>
-    </>
-  );
-}
 
 // Main source selection view
-export function SourceSelectPart(props: { media: ScrapeMedia }) {
+export function SourceSelectPart(_props: { media: ScrapeMedia }) {
   const { t } = useTranslation();
   const [selectedSourceId, setSelectedSourceId] = React.useState<string | null>(
     null,
   );
   const routerId = "manualSourceSelect";
-  const preferredSourceOrder = usePreferencesStore((s) => s.sourceOrder);
-  const enableSourceOrder = usePreferencesStore((s) => s.enableSourceOrder);
-
-  const sources = useMemo(() => {
-    const metaType = props.media.type;
-    if (!metaType) return [];
-    const allSources = getCachedMetadata()
-      .filter((v) => v.type === "source")
-      .filter((v) => v.mediaTypes?.includes(metaType));
-
-    if (!enableSourceOrder || preferredSourceOrder.length === 0) {
-      return allSources;
-    }
-
-    // Sort sources according to preferred order
-    const orderedSources = [];
-    const remainingSources = [...allSources];
-
-    // Add sources in preferred order
-    for (const sourceId of preferredSourceOrder) {
-      const sourceIndex = remainingSources.findIndex((s) => s.id === sourceId);
-      if (sourceIndex !== -1) {
-        orderedSources.push(remainingSources[sourceIndex]);
-        remainingSources.splice(sourceIndex, 1);
-      }
-    }
-
-    // Add remaining sources that weren't in the preferred order
-    orderedSources.push(...remainingSources);
-
-    return orderedSources;
-  }, [props.media.type, preferredSourceOrder, enableSourceOrder]);
 
   if (selectedSourceId) {
     return (
@@ -167,7 +23,7 @@ export function SourceSelectPart(props: { media: ScrapeMedia }) {
           <Menu.CardWithScrollable>
             <EmbedSelectionView
               sourceId={selectedSourceId}
-              routerId={routerId}
+              id={routerId}
               onBack={() => setSelectedSourceId(null)}
             />
           </Menu.CardWithScrollable>
@@ -181,16 +37,7 @@ export function SourceSelectPart(props: { media: ScrapeMedia }) {
       <div className="w-full max-w-md h-[50vh] flex flex-col">
         <Menu.CardWithScrollable>
           <Menu.Title>{t("player.menus.sources.title")}</Menu.Title>
-          <Menu.Section className="pb-4">
-            {sources.map((v) => (
-              <SelectableLink
-                key={v.id}
-                onClick={() => setSelectedSourceId(v.id)}
-              >
-                {v.name}
-              </SelectableLink>
-            ))}
-          </Menu.Section>
+          <SourceSelectionView id={routerId} onChoose={setSelectedSourceId} />
         </Menu.CardWithScrollable>
       </div>
     </div>