diff --git a/tranga-website/src/App.tsx b/tranga-website/src/App.tsx
index b831576..1a33413 100644
--- a/tranga-website/src/App.tsx
+++ b/tranga-website/src/App.tsx
@@ -9,7 +9,7 @@ import MangaList from './Components/Mangas/MangaList.tsx';
 import { Search } from './Search.tsx';
 import MangaConnectorProvider from './contexts/MangaConnectorContext.tsx';
 import LibraryProvider from './contexts/FileLibraryContext.tsx';
-import MangaDetail from './MangaDetail.tsx';
+import MangaDetail from './Components/Mangas/Detail/MangaDetail.tsx';
 
 export default function App() {
     const [apiUri, setApiUri] = useState<string>(
diff --git a/tranga-website/src/Components/Mangas/Detail/DownloadSection.tsx b/tranga-website/src/Components/Mangas/Detail/DownloadSection.tsx
new file mode 100644
index 0000000..6486a8a
--- /dev/null
+++ b/tranga-website/src/Components/Mangas/Detail/DownloadSection.tsx
@@ -0,0 +1,94 @@
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Box,
+    Checkbox,
+    List,
+    ListItem, Option,
+    Select,
+    Stack,
+    Typography
+} from "@mui/joy";
+import {ReactNode, useContext} from "react";
+import TButton from "../../Inputs/TButton.tsx";
+import MangaConnectorIcon from "../MangaConnectorIcon.tsx";
+import {FileLibrary, Manga, MangaConnectorId} from "../../../api/data-contracts.ts";
+import {FileLibraryContext} from "../../../contexts/FileLibraryContext.tsx";
+
+export default function DownloadSection (props: DownloadSectionProps) : ReactNode {
+    const Libraries = useContext(FileLibraryContext);
+    
+    return (
+        <Accordion defaultExpanded={props.downloadOpen}>
+            <AccordionSummary>
+                <Typography level={'h3'}>Download</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+                <Stack
+                    direction={'column'}
+                    gap={2}
+                    sx={{ flexBasis: 0 }}>
+                    <Box>
+                        <Typography>Select a Library to Download to:</Typography>
+                        <Select
+                            placeholder={'Select a Library'}
+                            value={props.library?.key}
+                            onChange={props.onLibraryChange}>
+                            {Libraries.map((l) => (
+                                <Option
+                                    key={l.key}
+                                    value={l.key}>
+                                    {l.libraryName} ({l.basePath})
+                                </Option>
+                            ))}
+                        </Select>
+                    </Box>
+                    <Box>
+                        <Typography>
+                            Select which connectors you want to download this Manga from:
+                        </Typography>
+                        <List>
+                            {props.manga?.mangaConnectorIds.map((id) => (
+                                <ListItem key={id.key}>
+                                    <Checkbox
+                                        defaultChecked={id.useForDownload}
+                                        onChange={(c) =>
+                                            props.downloadFromMap.set(id, c.target.checked)
+                                        }
+                                        label={
+                                            <div
+                                                style={{
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: 5,
+                                                }}>
+                                                <MangaConnectorIcon
+                                                    mangaConnectorName={
+                                                        id.mangaConnectorName
+                                                    }
+                                                />
+                                                <Typography>
+                                                    {id.mangaConnectorName}
+                                                </Typography>
+                                            </div>
+                                        }
+                                    />
+                                </ListItem>
+                            ))}
+                        </List>
+                    </Box>
+                    <TButton completionAction={props.setDownload}>Download All</TButton>
+                </Stack>
+            </AccordionDetails>
+        </Accordion>
+    );
+}
+export interface DownloadSectionProps {
+    manga?: Manga;
+    downloadOpen: boolean;
+    library?: FileLibrary;
+    onLibraryChange: (_: any, value: string | null) => void;
+    downloadFromMap: Map<MangaConnectorId, boolean>;
+    setDownload: () => Promise<void>;
+}
\ No newline at end of file
diff --git a/tranga-website/src/MangaDetail.tsx b/tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx
similarity index 57%
rename from tranga-website/src/MangaDetail.tsx
rename to tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx
index e70c73b..5c65362 100644
--- a/tranga-website/src/MangaDetail.tsx
+++ b/tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx
@@ -1,31 +1,21 @@
 import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
 import {
-    Accordion,
-    AccordionDetails,
-    AccordionSummary,
-    Box,
     Card,
     CardCover,
-    Checkbox,
     Chip,
-    List,
-    ListItem,
     Modal,
     ModalDialog,
-    Option,
-    Select,
     Stack,
     Typography,
     useTheme,
 } from '@mui/joy';
 import ModalClose from '@mui/joy/ModalClose';
-import { FileLibrary, Manga, MangaConnectorId } from './api/data-contracts.ts';
-import { ApiContext } from './contexts/ApiContext.tsx';
-import { MangaContext } from './contexts/MangaContext.tsx';
-import { FileLibraryContext } from './contexts/FileLibraryContext.tsx';
-import MangaConnectorIcon from './Components/Mangas/MangaConnectorIcon.tsx';
-import TButton from './Components/Inputs/TButton.tsx';
+import { FileLibrary, Manga, MangaConnectorId } from '../../../api/data-contracts.ts';
+import { ApiContext } from '../../../contexts/ApiContext.tsx';
+import { MangaContext } from '../../../contexts/MangaContext.tsx';
+import { FileLibraryContext } from '../../../contexts/FileLibraryContext.tsx';
 import MarkdownPreview from '@uiw/react-markdown-preview';
+import DownloadSection from "./DownloadSection.tsx";
 
 export default function MangaDetail(props: MangaDetailProps): ReactNode {
     const Api = useContext(ApiContext);
@@ -151,69 +141,7 @@ export default function MangaDetail(props: MangaDetailProps): ReactNode {
                         />
                     </Stack>
                 </Stack>
-
-                <Accordion defaultExpanded={props.downloadOpen}>
-                    <AccordionSummary>
-                        <Typography level={'h3'}>Download</Typography>
-                    </AccordionSummary>
-                    <AccordionDetails>
-                        <Stack
-                            direction={'column'}
-                            gap={2}
-                            sx={{ flexBasis: 0 }}>
-                            <Box>
-                                <Typography>Select a Library to Download to:</Typography>
-                                <Select
-                                    placeholder={'Select a Library'}
-                                    value={library?.key}
-                                    onChange={onLibraryChange}>
-                                    {Libraries.map((l) => (
-                                        <Option
-                                            key={l.key}
-                                            value={l.key}>
-                                            {l.libraryName} ({l.basePath})
-                                        </Option>
-                                    ))}
-                                </Select>
-                            </Box>
-                            <Box>
-                                <Typography>
-                                    Select which connectors you want to download this Manga from:
-                                </Typography>
-                                <List>
-                                    {manga?.mangaConnectorIds.map((id) => (
-                                        <ListItem key={id.key}>
-                                            <Checkbox
-                                                defaultChecked={id.useForDownload}
-                                                onChange={(c) =>
-                                                    downloadFromMap.set(id, c.target.checked)
-                                                }
-                                                label={
-                                                    <div
-                                                        style={{
-                                                            display: 'flex',
-                                                            alignItems: 'center',
-                                                            gap: 5,
-                                                        }}>
-                                                        <MangaConnectorIcon
-                                                            mangaConnectorName={
-                                                                id.mangaConnectorName
-                                                            }
-                                                        />
-                                                        <Typography>
-                                                            {id.mangaConnectorName}
-                                                        </Typography>
-                                                    </div>
-                                                }
-                                            />
-                                        </ListItem>
-                                    ))}
-                                </List>
-                            </Box>
-                            <TButton completionAction={setDownload}>Download All</TButton>
-                        </Stack>
-                    </AccordionDetails>
-                </Accordion>
+                <DownloadSection downloadOpen={props.downloadOpen??false} library={library} onLibraryChange={onLibraryChange} downloadFromMap={downloadFromMap} setDownload={setDownload} />
             </ModalDialog>
         </Modal>
     );