diff --git a/tranga-website/src/App.tsx b/tranga-website/src/App.tsx
index 1bf244b..ed94916 100644
--- a/tranga-website/src/App.tsx
+++ b/tranga-website/src/App.tsx
@@ -2,12 +2,11 @@ import Sheet from '@mui/joy/Sheet';
 import './App.css'
 import Settings from "./Settings.tsx";
 import Header from "./Header.tsx";
-import {Badge, Box, Button, Card, CardContent, CardCover, Typography} from "@mui/joy";
+import {Badge, Button} from "@mui/joy";
 import {useEffect, useState} from "react";
 import {ApiUriContext} from "./api/fetchApi.tsx";
 import Search from './Components/Search.tsx';
 import MangaList from "./Components/MangaList.tsx";
-import {CardHeight, CardWidth} from "./Components/Manga.tsx";
 import {MangaConnectorContext} from "./api/Contexts/MangaConnectorContext.tsx";
 import IMangaConnector from "./api/types/IMangaConnector.ts";
 import {GetAllConnectors} from "./api/MangaConnector.tsx";
@@ -45,25 +44,7 @@ export default function App () {
                     <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
                     <Search open={showSearch} setOpen={setShowSearch} />
                     <Sheet className={"app-content"}>
-                        <MangaList connected={apiConnected}>
-                            <Badge invisible sx={{margin: "8px !important"}}>
-                                <Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
-                                    <CardCover sx={{margin:"var(--Card-padding)"}}>
-                                        <img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} />
-                                    </CardCover>
-                                    <CardCover sx={{
-                                        background: 'rgba(234, 119, 246, 0.14)',
-                                        backdropFilter: 'blur(6.9px)',
-                                        webkitBackdropFilter: 'blur(6.9px)',
-                                    }}/>
-                                    <CardContent>
-                                        <Box style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} >
-                                            <Typography level={"h1"}>Search</Typography>
-                                        </Box>
-                                    </CardContent>
-                                </Card>
-                            </Badge>
-                        </MangaList>
+                        <MangaList connected={apiConnected} setShowSearch={setShowSearch} />
                     </Sheet>
                 </Sheet>
             </MangaConnectorContext>
diff --git a/tranga-website/src/Components/MangaList.tsx b/tranga-website/src/Components/MangaList.tsx
index fd704fa..f27b935 100644
--- a/tranga-website/src/Components/MangaList.tsx
+++ b/tranga-website/src/Components/MangaList.tsx
@@ -1,14 +1,14 @@
-import {Button, Stack} from "@mui/joy";
-import {useCallback, useContext, useEffect, useState} from "react";
+import {Badge, Box, Button, Card, CardContent, CardCover, Stack, Typography} from "@mui/joy";
+import {Dispatch, SetStateAction, useCallback, useContext, useEffect, useState} from "react";
 import {ApiUriContext} from "../api/fetchApi.tsx";
 import {DeleteJob, GetJobsWithType} from "../api/Job.tsx";
 import {JobType} from "../api/types/Jobs/IJob.ts";
 import IDownloadAvailableChaptersJob from "../api/types/Jobs/IDownloadAvailableChaptersJob.ts";
-import {MangaFromId} from "./Manga.tsx";
-import { Remove } from "@mui/icons-material";
+import {CardHeight, CardWidth, MangaFromId} from "./Manga.tsx";
+import {PlayArrow, Remove} from "@mui/icons-material";
 import * as React from "react";
 
-export default function MangaList({connected, children}: {connected: boolean, children?: React.ReactNode} ){
+export default function MangaList({connected, setShowSearch}: {connected: boolean, setShowSearch: Dispatch<SetStateAction<boolean>>} ) {
     const apiUri = useContext(ApiUriContext);
 
     const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]);
@@ -50,7 +50,23 @@ export default function MangaList({connected, children}: {connected: boolean, ch
 
     return(
         <Stack direction="row" spacing={1} flexWrap={"wrap"}>
-            {children}
+            <Badge invisible sx={{margin: "8px !important"}}>
+                <Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
+                    <CardCover sx={{margin:"var(--Card-padding)"}}>
+                        <img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} />
+                    </CardCover>
+                    <CardCover sx={{
+                        background: 'rgba(234, 119, 246, 0.14)',
+                        backdropFilter: 'blur(6.9px)',
+                        webkitBackdropFilter: 'blur(6.9px)',
+                    }}/>
+                    <CardContent>
+                        <Box style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} >
+                            <Typography level={"h1"}>Search</Typography>
+                        </Box>
+                    </CardContent>
+                </Card>
+            </Badge>
             {jobList?.map((job) => (
                 <MangaFromId key={job.mangaId} mangaId={job.mangaId}>
                     <Button color={"danger"} endDecorator={<Remove />} onClick={() => deleteJob(job.jobId)}>Delete</Button>