diff --git a/src/components/MangaCard.tsx b/src/components/MangaCard.tsx
index fa41ffebcf..1e75a2df9e 100644
--- a/src/components/MangaCard.tsx
+++ b/src/components/MangaCard.tsx
@@ -10,7 +10,7 @@ import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
-import { Grid } from '@mui/material';
+import { Avatar, CardContent, Grid } from '@mui/material';
 import useLocalStorage from 'util/useLocalStorage';
 import SpinnerImage from 'components/util/SpinnerImage';
 import { Box, styled } from '@mui/system';
@@ -84,85 +84,150 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
     const [useCache] = useLocalStorage<boolean>('useCache', true);
 
-    return (
-        <Grid item xs={6} sm={4} md={3} lg={2}>
-            <Link to={`/manga/${id}/`} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}>
-                <Box
-                    sx={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                    }}
-                >
-                    <Card
+    if (gridLayout !== 2) {
+        return (
+            <Grid item xs={6} sm={4} md={3} lg={2}>
+                <Link to={`/manga/${id}/`} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}>
+                    <Box
                         sx={{
-                        // force standard aspect ratio of manga covers
-                            aspectRatio: '225/350',
                             display: 'flex',
+                            flexDirection: 'column',
                         }}
-                        ref={ref}
                     >
-                        <CardActionArea
+                        <Card
                             sx={{
-                                position: 'relative',
-                                height: '100%',
+                            // force standard aspect ratio of manga covers
+                                aspectRatio: '225/350',
+                                display: 'flex',
                             }}
+                            ref={ref}
                         >
+                            <CardActionArea
+                                sx={{
+                                    position: 'relative',
+                                    height: '100%',
+                                }}
+                            >
 
-                            <BadgeContainer>
-                                { showUnreadBadge && unread! > 0 && (
-                                    <Typography
-                                        sx={{ backgroundColor: 'primary.dark' }}
-                                    >
-                                        {unread}
-                                    </Typography>
-                                )}
-                                { showDownloadBadge && downloadCount! > 0 && (
-                                    <Typography sx={{
-                                        backgroundColor: 'success.dark',
+                                <BadgeContainer>
+                                    { showUnreadBadge && unread! > 0 && (
+                                        <Typography
+                                            sx={{ backgroundColor: 'primary.dark' }}
+                                        >
+                                            {unread}
+                                        </Typography>
+                                    )}
+                                    { showDownloadBadge && downloadCount! > 0 && (
+                                        <Typography sx={{
+                                            backgroundColor: 'success.dark',
+                                        }}
+                                        >
+                                            {downloadCount}
+                                        </Typography>
+                                    )}
+                                </BadgeContainer>
+                                <SpinnerImage
+                                    alt={title}
+                                    src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
+                                    imgStyle={{
+                                        height: '100%',
+                                        width: '100%',
+                                        objectFit: 'cover',
+                                    }}
+                                    spinnerStyle={{
+                                        display: 'grid',
+                                        placeItems: 'center',
                                     }}
-                                    >
-                                        {downloadCount}
-                                    </Typography>
+                                />
+                                {(gridLayout === 1) ? (<></>) : (
+                                    <>
+                                        <BottomGradient />
+                                        <BottomGradientDoubledDown />
+                                    </>
                                 )}
-                            </BadgeContainer>
-                            <SpinnerImage
-                                alt={title}
-                                src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
-                                imgStyle={{
-                                    height: '100%',
-                                    width: '100%',
-                                    objectFit: 'cover',
-                                }}
-                                spinnerStyle={{
-                                    display: 'grid',
-                                    placeItems: 'center',
+                                {(gridLayout === 1) ? (
+                                    <></>
+                                ) : (
+                                    <MangaTitle>
+                                        {truncateText(title, 61)}
+                                    </MangaTitle>
+                                )}
+                            </CardActionArea>
+                        </Card>
+                        {(gridLayout === 1) ? (
+                            <MangaTitle
+                                sx={{
+                                    position: 'relative',
                                 }}
-                            />
-                            {(gridLayout === 1) ? (<></>) : (
-                                <>
-                                    <BottomGradient />
-                                    <BottomGradientDoubledDown />
-                                </>
-                            )}
-                            {(gridLayout === 1) ? (
-                                <></>
-                            ) : (
-                                <MangaTitle>
-                                    {truncateText(title, 61)}
-                                </MangaTitle>
-                            )}
-                        </CardActionArea>
-                    </Card>
-                    {(gridLayout === 1) ? (
-                        <MangaTitle
-                            sx={{
-                                position: 'relative',
-                            }}
-                        >
+                            >
+                                {truncateText(title, 61)}
+                            </MangaTitle>
+                        ) : (<></>)}
+                    </Box>
+                </Link>
+            </Grid>
+        );
+    }
+    return (
+        <Grid item xs={12} sm={12} md={12} lg={12}>
+            <Link to={`/manga/${id}/`} style={{ textDecoration: 'none', color: 'unset' }}>
+                <CardContent sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: 2,
+                    '&:hover': {
+                        backgroundColor: 'action.hover',
+                        transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                    },
+                    '&:active': {
+                        backgroundColor: 'action.selected',
+                        transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                    },
+                    position: 'relative',
+                }}
+                >
+                    <Avatar
+                        variant="rounded"
+                        sx={{
+                            width: 56,
+                            height: 56,
+                            flex: '0 0 auto',
+                            marginRight: 2,
+                            imageRendering: 'pixelated',
+                        }}
+                        src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
+                    />
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            flexGrow: 1,
+                            width: 'min-content',
+                        }}
+                    >
+                        <Typography variant="h5" component="h2">
                             {truncateText(title, 61)}
-                        </MangaTitle>
-                    ) : (<></>)}
-                </Box>
+                        </Typography>
+                    </Box>
+                    <BadgeContainer sx={{ position: 'relative' }}>
+                        { showUnreadBadge && unread! > 0 && (
+                            <Typography
+                                sx={{ backgroundColor: 'primary.dark' }}
+                            >
+                                {unread}
+                            </Typography>
+                        )}
+                        { showDownloadBadge && downloadCount! > 0 && (
+                            <Typography sx={{
+                                backgroundColor: 'success.dark',
+                            }}
+                            >
+                                {downloadCount}
+                            </Typography>
+                        )}
+                    </BadgeContainer>
+                </CardContent>
             </Link>
         </Grid>
     );
diff --git a/src/components/library/LibraryOptions.tsx b/src/components/library/LibraryOptions.tsx
index f88a610318..60937b160d 100644
--- a/src/components/library/LibraryOptions.tsx
+++ b/src/components/library/LibraryOptions.tsx
@@ -146,6 +146,16 @@ function dispalyTab(currentTab: number) {
                         />
                     )}
                 />
+                <FormControlLabel
+                    label="list"
+                    control={(
+                        <Radio
+                            name="2"
+                            checked={options.gridLayout === 2}
+                            onChange={setGridContextOptions}
+                        />
+                    )}
+                />
                 BADGES
                 <FormControlLabel
                     label="Unread Badges"
diff --git a/src/components/source/GridLayouts.tsx b/src/components/source/GridLayouts.tsx
index 0bf89929b3..1debbd8453 100644
--- a/src/components/source/GridLayouts.tsx
+++ b/src/components/source/GridLayouts.tsx
@@ -76,7 +76,18 @@ export default function SourceGridLayout() {
                             />
                         )}
                     />
-
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                    <FormControlLabel
+                        label="List"
+                        control={(
+                            <Radio
+                                name="2"
+                                checked={options.SourcegridLayout === 2}
+                                onChange={setGridContextOptions}
+                            />
+                        )}
+                    />
                 </MenuItem>
             </Menu>