diff --git a/README.md b/README.md
index 1cf7e9f..2260a9d 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,10 @@
-# Synapse Admin UI [![GitHub license](https://img.shields.io/github/license/Awesome-Technologies/synapse-admin)](https://github.com/Awesome-Technologies/synapse-admin/blob/master/LICENSE)
+<p align="center">
+  <img alt="Synapse Admin Logo" src="./public/images/logo.webp" height="140" />
+  <h3 align="center">Synapse Admin <img alt="License" src="https://img.shields.io/github/license/Awesome-Technologies/synapse-admin"></h3>
+  <p align="center">Manager your Synapse homeserver with ease</p>
+</p>
+
+---
 
 ![Screenshots](./screenshots.jpg)
 
diff --git a/public/favicon.ico b/public/favicon.ico
index 850f254..072aa24 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/images/logo.webp b/public/images/logo.webp
new file mode 100644
index 0000000..7408406
Binary files /dev/null and b/public/images/logo.webp differ
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 8943022..4d142e9 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,4 +1,4 @@
-import { Box, Link, Typography } from "@mui/material";
+import { Avatar, Box, Link, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 
 const Footer = () => {
@@ -23,6 +23,7 @@ const Footer = () => {
       p: 1,
     }}>
     <Typography variant="body2">
+      <Avatar src="./images/logo.webp" sx={{ width: "1rem", height: "1rem", display: "inline-block", verticalAlign: "sub" }} />
       <Link sx={{ color: "#888", textDecoration: 'none' }} href="https://github.com/etkecc/synapse-admin" target="_blank">
         Synapse-Admin
       </Link> <Link href={`https://github.com/etkecc/synapse-admin/releases/tag/`+version} target="_blank">
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index 80e5acf..e124966 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
 
-import LockIcon from "@mui/icons-material/Lock";
 import { Avatar, Box, Button, Card, CardActions, CircularProgress, MenuItem, Select, Tab, Tabs, Typography } from "@mui/material";
 import {
   Form,
@@ -249,9 +248,7 @@ const LoginPage = () => {
             {loading ? (
               <CircularProgress size={25} thickness={2} />
             ) : (
-              <Avatar className="icon">
-                <LockIcon />
-              </Avatar>
+              <Avatar sx={{ width: "120px", height: "120px" }} src="./images/logo.webp"/>
             )}
           </Box>
           <Box className="hint">{translate("synapseadmin.auth.welcome")}</Box>