diff --git a/components/Footer.tsx b/components/Footer.tsx
index eaac687..2381114 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -2,7 +2,8 @@ import { Divider } from '@mantine/core'
 import { pageConfig } from '@/uptime.config'
 
 export default function Footer() {
-  const defaultFooter = '<p style="text-align: center; font-size: 12px; margin-top: 10px;"> Open-source monitoring and status page powered by <a href="https://github.com/lyc8503/UptimeFlare" target="_blank">Uptimeflare</a>, made with ❤ by <a href="https://github.com/lyc8503" target="_blank">lyc8503</a>. </p>'
+  const defaultFooter =
+    '<p style="text-align: center; font-size: 12px; margin-top: 10px;"> Open-source monitoring and status page powered by <a href="https://github.com/lyc8503/UptimeFlare" target="_blank">Uptimeflare</a>, made with ❤ by <a href="https://github.com/lyc8503" target="_blank">lyc8503</a>. </p>'
 
   return (
     <>
diff --git a/components/Header.tsx b/components/Header.tsx
index 5a3f760..df3ebbe 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,4 +1,4 @@
-import { Container, Group, Text } from '@mantine/core'
+import { Container, Group, Image } from '@mantine/core'
 import classes from '@/styles/Header.module.css'
 import { pageConfig } from '@/uptime.config'
 import { PageConfigLink } from '@/types/config'
@@ -28,7 +28,7 @@ export default function Header({ style }: { style?: React.CSSProperties }) {
             href={location.pathname == '/' ? 'https://github.com/lyc8503/UptimeFlare' : '/'}
             target={location.pathname == '/' ? '_blank' : undefined}
           >
-            <img src='/logo.svg' width={190} height={56} />
+            <Image src="/logo.svg" h={56} w={{ base: 140, sm: 190 }} fit="contain" alt="logo" />
           </a>
         </div>