diff --git a/package.json b/package.json
index 33cdec6b..40111d4b 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "ioredis": "5.3.1",
     "js-yaml": "4.1.0",
     "jsonfeed-to-rss": "^3.0.6",
+    "lottie-react": "^2.4.0",
     "mdast-util-to-string": "3.1.1",
     "mdast-util-toc": "6.1.1",
     "nanoid": "4.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 510eaaac..67328593 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -78,6 +78,7 @@ specifiers:
   js-yaml: 4.1.0
   jsonfeed-to-rss: ^3.0.6
   lint-staged: 13.1.2
+  lottie-react: ^2.4.0
   mdast-util-to-string: 3.1.1
   mdast-util-toc: 6.1.1
   nanoid: 4.0.1
@@ -176,6 +177,7 @@ dependencies:
   ioredis: 5.3.1
   js-yaml: 4.1.0
   jsonfeed-to-rss: 3.0.6
+  lottie-react: 2.4.0_biqbaboplfbrettd7655fr4n2y
   mdast-util-to-string: 3.1.1
   mdast-util-toc: 6.1.1
   nanoid: 4.0.1
@@ -8978,6 +8980,21 @@ packages:
     dependencies:
       js-tokens: 4.0.0
 
+  /lottie-react/2.4.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      lottie-web: 5.10.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /lottie-web/5.10.2:
+    resolution: {integrity: sha512-d0PFIGiwuMsJYaF4uPo+qG8dEorlI+xFI2zrrFtE1bGO4WoLIz+NjremxEq1swpR7juR10aeOtmNh3d6G3ub0A==}
+    dev: false
+
   /loupe/2.3.6:
     resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
     dependencies:
diff --git a/public/assets/logo.json b/public/assets/logo.json
new file mode 100644
index 00000000..d601315c
--- /dev/null
+++ b/public/assets/logo.json
@@ -0,0 +1 @@
+{"v":"5.9.0","fr":60,"ip":0,"op":80,"w":150,"h":150,"nm":"white-bg copy","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"g Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[113.15,112.3,0],"ix":2,"l":2},"a":{"a":0,"k":[30.6,28.25,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":12.332,"s":[40,40,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":24.668,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":37,"s":[60,60,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":49.332,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":61.668,"s":[80,80,100]},{"t":74,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[8.8,0],[0,16.2],[-18.2,0],[0,0]],"o":[[0,0],[-4.9,4.6],[-18.3,0],[0,-16.2],[0,0],[0,0]],"v":[[25.85,0.6],[25.85,19.9],[4.15,27.5],[-25.85,0.8],[5.35,-27.5],[5.35,0.6]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[26.1,27.75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"o Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":42.95,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":1,"s":[111.8]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":13.166,"s":[82.8]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":25.334,"s":[111.8]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":37.5,"s":[85.8]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":49.666,"s":[111.8]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":61.834,"s":[92.8]},{"t":74,"s":[111.8]}],"ix":4}},"a":{"a":0,"k":[28.2,27.75,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-15.9],[16,0],[0,16],[-16.3,0]],"o":[[0,16],[-16,0],[0,-16],[16.3,0]],"v":[[27.95,-0.1],[0.15,27.5],[-27.95,-0.1],[0.15,-27.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[28.2,27.75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"x Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[42.85,19.35,0],"ix":2,"l":2},"a":{"a":0,"k":[28.6,0.2,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":3,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":15.334,"s":[100,40,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":27.666,"s":[100,80,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":40,"s":[100,60,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":52.334,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":64.666,"s":[100,80,100]},{"t":77,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-28.35,27.45],[-11.75,-2.85],[-27.65,-27.45],[27.65,-27.45],[11.85,-2.85],[28.35,27.45]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[28.6,27.7],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"l Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":37,"s":[360]},{"t":74,"s":[-360]}],"ix":10},"p":{"a":0,"k":[107.7,42.65,0],"ix":2,"l":2},"a":{"a":0,"k":[35.85,31.7,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[26.5,-9.95],[35.6,7.05],[-9.9,31.45],[-35.6,-16.65],[-8,-31.45],[8.6,-0.45]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,1,0.302,0.302,0.5,0.988,0.549,0.229,1,0.976,0.796,0.157],"ix":9}},"s":{"a":0,"k":[-37.641,4.859],"ix":5},"e":{"a":0,"k":[39.936,5.205],"ix":6},"t":1,"nm":"Gradient Fill 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[35.85,31.7],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/src/components/common/Logo.tsx b/src/components/common/Logo.tsx
new file mode 100644
index 00000000..3a2029be
--- /dev/null
+++ b/src/components/common/Logo.tsx
@@ -0,0 +1,46 @@
+import React, { useRef } from "react"
+import Lottie, { type LottieRefCurrentProps } from "lottie-react"
+import LogoLottieJSON from "../../../public/assets/logo.json"
+import { Image } from "~/components/ui/Image"
+
+export const Logo: React.FC<{
+  type: "svg" | "png" | "lottie"
+  width?: number
+  height?: number
+}> = ({ type, width, height }) => {
+  const ref = useRef<LottieRefCurrentProps>(null)
+
+  switch (type) {
+    case "svg":
+      return (
+        <Image
+          alt="logo"
+          src="/assets/logo.svg"
+          width={width || 100}
+          height={height || 100}
+        />
+      )
+    case "png":
+      return (
+        <Image
+          alt="logo"
+          src="/assets/logo.png"
+          width={width || 100}
+          height={height || 100}
+        />
+      )
+    case "lottie":
+      return (
+        <Lottie
+          animationData={LogoLottieJSON}
+          loop={false}
+          lottieRef={ref}
+          onMouseEnter={() => ref.current?.goToAndPlay(0)}
+          style={{
+            width: width || 100,
+            height: height || 100,
+          }}
+        />
+      )
+  }
+}
diff --git a/src/components/main/MainLayout.tsx b/src/components/main/MainLayout.tsx
index 5a00bf89..4b3e29e1 100644
--- a/src/components/main/MainLayout.tsx
+++ b/src/components/main/MainLayout.tsx
@@ -9,9 +9,9 @@ import { SEOHead } from "../common/SEOHead"
 import { UniLink } from "../ui/UniLink"
 import { ConnectButton } from "../common/ConnectButton"
 import { getSiteLink } from "~/lib/helpers"
-import Image from "next/image"
 import { Link } from "react-scroll"
 import { useTranslation } from "next-i18next"
+import { Logo } from "~/components/common/Logo"
 
 export function MainLayout({
   children,
@@ -35,12 +35,7 @@ export function MainLayout({
         <div className="max-w-screen-lg px-5 mx-auto flex justify-between items-center">
           <div className="text-2xl font-extrabold flex items-center">
             <div className="inline-block w-9 h-9 mr-3">
-              <Image
-                alt={APP_NAME}
-                src="/assets/logo.svg"
-                width={100}
-                height={100}
-              />
+              <Logo type="lottie" width={36} height={36} />
             </div>
             xLog
           </div>
diff --git a/src/components/site/SiteFooter.tsx b/src/components/site/SiteFooter.tsx
index 0dd89fc2..bdb87489 100644
--- a/src/components/site/SiteFooter.tsx
+++ b/src/components/site/SiteFooter.tsx
@@ -5,23 +5,26 @@ import Script from "next/script"
 import Image from "next/image"
 import { Platform } from "~/components/site/Platform"
 import { Trans } from "next-i18next"
+import { Logo } from "~/components/common/Logo"
+import { useEffect, useState } from "react"
 
 export const SiteFooter: React.FC<{
   site?: Profile | null
   page?: Note | null
 }> = ({ site, page }) => {
+  const [logoType, setLogoType] = useState<"svg" | "png" | "lottie">("svg")
+
+  useEffect(() => {
+    setLogoType("lottie")
+  }, [])
+
   const LogoWithLink = () => {
     return (
       <UniLink
         href={SITE_URL}
-        className="hover:text-accent inline-flex items-center align-text-top mx-1"
+        className="inline-flex items-center align-text-top mx-1"
       >
-        <Image
-          alt={APP_NAME}
-          src={`${SITE_URL}/assets/logo.svg`}
-          width={20}
-          height={20}
-        />
+        <Logo type={logoType} width={20} height={20} />
       </UniLink>
     )
   }
@@ -30,7 +33,7 @@ export const SiteFooter: React.FC<{
     <>
       <footer className="text-zinc-500 border-t">
         <div className="max-w-screen-md mx-auto px-5 py-10 text-xs flex justify-between">
-          <p className="font-medium text-base">
+          <div className="font-medium text-base">
             &copy;{" "}
             <UniLink href="/" className="hover:text-accent">
               {site?.name}
@@ -44,7 +47,7 @@ export const SiteFooter: React.FC<{
               }}
               ns="site"
             />
-          </p>
+          </div>
           {site?.connected_accounts && (
             <div className="ml-5 -mr-5">
               {site?.connected_accounts.map((account, index) => (
diff --git a/src/pages/dashboard/[subdomain]/index.tsx b/src/pages/dashboard/[subdomain]/index.tsx
index ba612e57..2fff0417 100644
--- a/src/pages/dashboard/[subdomain]/index.tsx
+++ b/src/pages/dashboard/[subdomain]/index.tsx
@@ -12,6 +12,7 @@ import { useTranslation, Trans } from "next-i18next"
 import { getServerSideProps as getLayoutServerSideProps } from "~/components/dashboard/DashboardLayout.server"
 import { GetServerSideProps } from "next"
 import { serverSidePropsHandler } from "~/lib/server-side-props"
+import { Logo } from "~/components/common/Logo"
 
 export const getServerSideProps: GetServerSideProps = serverSidePropsHandler(
   async (ctx) => {
@@ -65,7 +66,7 @@ export default function SubdomainIndex() {
     <DashboardMain>
       <div className="prose min-w-[270px] max-w-screen-md">
         <div className="w-14 h-14 mb-8">
-          <Image alt="logo" src="/assets/logo.svg" width={100} height={100} />
+          <Logo type="lottie" width={100} height={100} />
         </div>
         <p className="text-2xl font-bold">{t("Site Stats")}</p>
         <div className="grid gap-4 sm:grid-cols-3 grid-cols-2 mb-8">
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fe1d6f4c..0f7a6359 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -36,7 +36,7 @@ import {
 import { useTranslation, Trans } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import { languageDetector } from "~/lib/language-detector"
-import { cn } from "~/lib/utils"
+import { Logo } from "~/components/common/Logo"
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const queryClient = new QueryClient()
@@ -548,13 +548,8 @@ export default function Home() {
             </Element>
           </div>
           <div className="my-20 text-center">
-            <div className="w-20 h-20 mx-auto mb-8">
-              <Image
-                alt="logo"
-                src="/assets/logo.svg"
-                width={100}
-                height={100}
-              />
+            <div className="w-20 h-20 mx-auto mb-10">
+              <Logo type="lottie" width={100} height={100} />
             </div>
             {isConnected ? (
               <UniLink