diff --git a/tranga-website/src/App.tsx b/tranga-website/src/App.tsx
index eba63bf..b6a6928 100644
--- a/tranga-website/src/App.tsx
+++ b/tranga-website/src/App.tsx
@@ -2,7 +2,7 @@ import Sheet from '@mui/joy/Sheet';
 import './App.css'
 import Settings from "./Settings.tsx";
 import Header from "./Header.tsx";
-import {Badge, Button} from "@mui/joy";
+import {Badge, Button, Card, CardContent, CardCover, Typography} from "@mui/joy";
 import {useState} from "react";
 import {ApiUriContext} from "./api/fetchApi.tsx";
 import Search from './Components/Search.tsx';
@@ -23,12 +23,25 @@ export default function App () {
                     <Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
                         <Button onClick={() => setShowSettings(true)}>Settings</Button>
                     </Badge>
-                    <Button onClick={() => setShowSearch(true)}>Search</Button>
                 </Header>
                 <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
                 <Search open={showSearch} setOpen={setShowSearch} />
                 <Sheet className={"app-content"}>
-                    <MangaList />
+                    <MangaList>
+                        <Card onClick={() => setShowSearch(true)} sx={{height:"400px", width:"300px"}}>
+                            <CardCover>
+                                <img src={"/blahaj.png"} />
+                            </CardCover>
+                            <CardCover sx={{
+                                background: 'rgba(234, 119, 246, 0.14)',
+                                backdropFilter: 'blur(6.9px)',
+                                webkitBackdropFilter: 'blur(6.9px)',
+                            }}/>
+                            <CardContent>
+                                <Typography level={"h1"}>Search</Typography>
+                            </CardContent>
+                        </Card>
+                    </MangaList>
                 </Sheet>
             </Sheet>
         </ApiUriContext.Provider>
diff --git a/tranga-website/src/Components/MangaList.tsx b/tranga-website/src/Components/MangaList.tsx
index e5bd265..dcbd28b 100644
--- a/tranga-website/src/Components/MangaList.tsx
+++ b/tranga-website/src/Components/MangaList.tsx
@@ -7,7 +7,7 @@ import IDownloadAvailableChaptersJob from "../api/types/Jobs/IDownloadAvailableC
 import {MangaFromId} from "./Manga.tsx";
 import { Remove } from "@mui/icons-material";
 
-export default function MangaList(){
+export default function MangaList({children}: {children?: React.ReactNode} ){
     const apiUri = useContext(ApiUriContext);
 
     const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]);
@@ -26,6 +26,7 @@ export default function MangaList(){
 
     return(
         <Stack direction="row" spacing={1}>
+            {children}
             {jobList.map((job) => (
                 <MangaFromId key={job.mangaId} mangaId={job.mangaId}>
                     <Button color={"danger"} endDecorator={<Remove />} onClick={() => deleteJob(job.jobId)}>Delete</Button>
diff --git a/tranga-website/src/Components/Search.tsx b/tranga-website/src/Components/Search.tsx
index 304b1b7..8e4d35c 100644
--- a/tranga-website/src/Components/Search.tsx
+++ b/tranga-website/src/Components/Search.tsx
@@ -48,6 +48,7 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
     const [resultsLoading, setResultsLoading] = useState<boolean>(false);
 
     const StartSearch = useCallback((mangaConnector : IMangaConnector | undefined, value: string)=>{
+        setStep(3);
         if(mangaConnector === undefined)
             return;
         setResults([]);
@@ -92,19 +93,20 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
     // @ts-ignore
     return (
         <Drawer size={"lg"} anchor={"right"} open={open} onClose={() => {
-            setStep(2);
+            setStep(1);
             setResults([]);
             setOpen(false);
         }}>
             <ModalClose />
             <Stepper orientation={"vertical"} sx={{ height: '100%', width: "calc(100% - 80px)", margin:"40px"}}>
                 <Step indicator={
-                    <StepIndicator variant="solid" color="primary">
+                    <StepIndicator variant={step==1?"solid":"outlined"} color={mangaConnectors.length < 1 ? "danger" : "primary"}>
                         1
                     </StepIndicator>}>
                     <Skeleton loading={mangaConnectorsLoading}>
                         <Select
-                            disabled={mangaConnectorsLoading || resultsLoading}
+                            color={mangaConnectors.length < 1 ? "danger" : "neutral"}
+                            disabled={mangaConnectorsLoading || resultsLoading || mangaConnectors.length < 1}
                             placeholder={"Select Connector"}
                             slotProps={{
                                     listbox: {
@@ -119,13 +121,13 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
                                 setStep(2);
                                 setSelectedMangaConnector(mangaConnectors.find((o) => o.name === newValue));
                             }}
-                            endDecorator={<Chip size={"sm"} color={"primary"}>{mangaConnectors.length}</Chip>}>
+                            endDecorator={<Chip size={"sm"} color={mangaConnectors.length < 1 ? "danger" : "primary"}>{mangaConnectors.length}</Chip>}>
                             {mangaConnectors?.map((connector: IMangaConnector) => ConnectorOption(connector))}
                         </Select>
                     </Skeleton>
                 </Step>
                 <Step indicator={
-                    <StepIndicator variant="solid" color="primary">
+                    <StepIndicator variant={step==2?"solid":"outlined"} color="primary">
                         2
                     </StepIndicator>}>
                     <Input disabled={step < 2 || resultsLoading} placeholder={"Name or Url " + (selectedMangaConnector ? selectedMangaConnector.baseUris[0] : "")} onKeyDown={(e) => {
@@ -137,7 +139,7 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
                     }}/>
                 </Step>
                 <Step indicator={
-                    <StepIndicator variant="solid" color="primary">
+                    <StepIndicator variant={step==3?"solid":"outlined"} color="primary">
                         3
                     </StepIndicator>}>
                     <Typography endDecorator={<Chip size={"sm"} color={"primary"}>{results.length}</Chip>}>Results</Typography>