diff --git a/src/apps/dashboard/features/logs/api/useServerLogs.ts b/src/apps/dashboard/features/logs/api/useServerLogs.ts
index b0e2001523..fa00dc9afa 100644
--- a/src/apps/dashboard/features/logs/api/useServerLogs.ts
+++ b/src/apps/dashboard/features/logs/api/useServerLogs.ts
@@ -6,7 +6,7 @@ import type { AxiosRequestConfig } from 'axios';
 
 const fetchServerLogs = async (api?: Api, options?: AxiosRequestConfig) => {
     if (!api) {
-        console.error('[useLogEntries] No API instance available');
+        console.error('[useServerLogs] No API instance available');
         return;
     }
 
@@ -19,7 +19,7 @@ export const useServerLogs = () => {
     const { api } = useApi();
 
     return useQuery({
-        queryKey: [ 'LogEntries' ],
+        queryKey: [ 'ServerLogs' ],
         queryFn: ({ signal }) => fetchServerLogs(api, { signal }),
         enabled: !!api
     });
diff --git a/src/apps/dashboard/features/logs/components/LogItem.tsx b/src/apps/dashboard/features/logs/components/LogItem.tsx
index be4c0193cc..4bf871c0c9 100644
--- a/src/apps/dashboard/features/logs/components/LogItem.tsx
+++ b/src/apps/dashboard/features/logs/components/LogItem.tsx
@@ -1,7 +1,7 @@
-import type { LogFile } from '@jellyfin/sdk/lib/generated-client/models/log-file';
-import LinkButton from 'elements/emby-button/LinkButton';
-import { useApi } from 'hooks/useApi';
 import React, { FunctionComponent } from 'react';
+import type { LogFile } from '@jellyfin/sdk/lib/generated-client/models/log-file';
+import { Card, CardActionArea, CardContent, ListItemText } from '@mui/material';
+import { useApi } from 'hooks/useApi';
 import datetime from 'scripts/datetime';
 
 type LogItemProps = {
@@ -12,7 +12,7 @@ const LogItem: FunctionComponent<LogItemProps> = ({ logFile }: LogItemProps) =>
     const { api } = useApi();
 
     const getLogFileUrl = () => {
-        if (!api) return;
+        if (!api) return '';
 
         let url = api.basePath + '/System/Logs/Log';
 
@@ -28,12 +28,18 @@ const LogItem: FunctionComponent<LogItemProps> = ({ logFile }: LogItemProps) =>
     };
 
     return (
-        <LinkButton href={getLogFileUrl()} target='_blank' rel='noreferrer' className='listItem listItem-border' style={{ color: 'inherit' }}>
-            <div className='listItemBody two-line'>
-                <h3 className='listItemBodyText' dir='ltr' style={{ textAlign: 'left' }}>{logFile.Name}</h3>
-                <div className='listItemBodyText secondary'>{getDate()}</div>
-            </div>
-        </LinkButton>
+        <Card>
+            <CardActionArea href={getLogFileUrl()} target='_blank'>
+                <CardContent>
+                    <ListItemText
+                        primary={logFile.Name}
+                        primaryTypographyProps={{ variant: 'h3' }}
+                        secondary={getDate()}
+                        secondaryTypographyProps={{ variant: 'body1' }}
+                    />
+                </CardContent>
+            </CardActionArea>
+        </Card>
     );
 };
 
diff --git a/src/apps/dashboard/routes/logs/index.tsx b/src/apps/dashboard/routes/logs/index.tsx
index 8ed2633e12..1e509f2314 100644
--- a/src/apps/dashboard/routes/logs/index.tsx
+++ b/src/apps/dashboard/routes/logs/index.tsx
@@ -121,16 +121,14 @@ const Logs = () => {
                         </Button>
                     </Stack>
                 </Form>
-                <div className='serverLogs readOnlyContent'>
-                    <div className='paperList'>
-                        {logs?.map(log => {
-                            return <LogItem
-                                key={log.Name}
-                                logFile={log}
-                            />;
-                        })}
-                    </div>
-                </div>
+                <Stack className='serverLogs readOnlyContent' spacing={1} sx={{ mt: 1 }}>
+                    {logs?.map(log => {
+                        return <LogItem
+                            key={log.Name}
+                            logFile={log}
+                        />;
+                    })}
+                </Stack>
             </Box>
         </Page>
     );