diff --git a/tranga-website/src/Components/Manga.tsx b/tranga-website/src/Components/Manga.tsx
index 197371f..d44f6ba 100644
--- a/tranga-website/src/Components/Manga.tsx
+++ b/tranga-website/src/Components/Manga.tsx
@@ -78,18 +78,24 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
         CoverRef.current.src = GetMangaCoverImageUrl(apiUri, useManga.mangaId, CoverRef.current);
     }, [useManga, apiUri])
 
-    const width = "200px";
-    const height = "300px";
+    const width = 200;
+    const height = 300;
 
-    const sideSx : SxProps = {
-        height: height,
-        width: width,
+    const coverSx : SxProps = {
+        height: height + "px",
+        width: width + "px",
         position: "relative",
     }
 
-    const cssProps : CSSProperties = {
-        maxHeight: "100%",
-        maxWidth: "100%",
+    const descriptionSx : SxProps = {
+        height: height + "px",
+        width: width * 2 + "px",
+        position: "relative"
+    }
+
+    const coverCss : CSSProperties = {
+        maxHeight: "calc("+height+"px + 2rem)",
+        maxWidth: "calc("+width+"px + 2rem)",
     }
 
     const interactiveElements = ["button", "input", "textarea", "a", "select", "option", "li"];
@@ -102,7 +108,7 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
                     setExpanded(!expanded)}
             }>
                 <CardCover>
-                    <img style={cssProps} src="/blahaj.png" alt="Manga Cover"
+                    <img style={coverCss} src="/blahaj.png" alt="Manga Cover"
                          ref={CoverRef}
                          onLoad={LoadMangaCover}
                          onResize={LoadMangaCover}/>
@@ -112,7 +118,7 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
                         'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)',
                 }}/>
                 <CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
-                    <Box sx={sideSx}>
+                    <Box sx={coverSx}>
                         <Skeleton loading={loading}>
                             <Link href={useManga.websiteUrl} level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
                                 {useManga.name}
@@ -121,16 +127,16 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
                     </Box>
                     {
                         expanded ?
-                            <Box sx={sideSx}>
+                            <Box sx={descriptionSx}>
                                 <Skeleton loading={loading} variant={"text"} level={"title-lg"}>
-                                    <Stack direction={"row"} flexWrap={"wrap"} spacing={0.5} sx={{maxHeight:"75px", overflowY:"auto", scrollbarWidth: "thin"}}>
+                                    <Stack direction={"row"} flexWrap={"wrap"} spacing={0.5} sx={{maxHeight:height*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}>
                                         {useManga.authorIds.map(authorId => <AuthorTag key={authorId} authorId={authorId} color={"success"} />)}
                                         {useManga.tags.map(tag => <Chip key={tag} variant={"soft"} size={"md"} color={"primary"}>{tag}</Chip>)}
                                         {useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"warning"} />)}
                                     </Stack>
                                 </Skeleton>
                                 <Skeleton loading={loading} sx={{maxHeight:"300px"}}>
-                                    <MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black", maxHeight:"310px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
+                                    <MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black", maxHeight:height*0.7+"px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
                                 </Skeleton>
                             </Box>
                             : null