diff --git a/apps/explorer/public/apple-icon.png b/apps/explorer/public/apple-icon.png
new file mode 100644
index 0000000..ed4cb2b
Binary files /dev/null and b/apps/explorer/public/apple-icon.png differ
diff --git a/apps/explorer/public/icon.svg b/apps/explorer/public/icon.svg
new file mode 100644
index 0000000..4d16a55
--- /dev/null
+++ b/apps/explorer/public/icon.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="64" viewBox="0 0 32 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.8783 0H30.9753C13.8683 0 0 13.9016 0 31.0496V31.9999H15.9391L31.8783 16.1526V0ZM29.2328 2.71024V15.0483L14.8508 29.3481H2.69845C3.10627 22.4039 5.99803 15.9323 10.9448 10.9737C15.8835 6.02304 22.3212 3.12699 29.2328 2.71024Z" fill="white"/>
+<path d="M31.8809 32.0001H15.9418L0 47.8474V64H0.905663C18.0126 64 31.8809 50.0984 31.8809 32.9504V32.0001Z" fill="white"/>
+</svg>
diff --git a/apps/explorer/public/social-media.png b/apps/explorer/public/social-media.png
new file mode 100644
index 0000000..3ad2811
Binary files /dev/null and b/apps/explorer/public/social-media.png differ
diff --git a/apps/explorer/src/app/[network]/[group]/page.tsx b/apps/explorer/src/app/[network]/[group]/page.tsx
index 9c02a50..7542bef 100644
--- a/apps/explorer/src/app/[network]/[group]/page.tsx
+++ b/apps/explorer/src/app/[network]/[group]/page.tsx
@@ -15,8 +15,11 @@ export default function Group() {
     const [filteredCommitments, setFilteredCommitments] = useState<string[]>([])
     const [filteredProofs, setFilteredProofs] = useState<any[]>([])
 
+    const [loading, setLoading] = useState(false)
+
     useEffect(() => {
         const fetchData = async () => {
+            setLoading(true)
             const subgraph = new SemaphoreSubgraph(network)
 
             const groupInfo = await subgraph.getGroup(groupId, {
@@ -28,6 +31,7 @@ export default function Group() {
 
             setFilteredCommitments(groupInfo.members || [])
             setFilteredProofs(groupInfo.validatedProofs || [])
+            setLoading(false)
         }
 
         fetchData()
@@ -59,7 +63,11 @@ export default function Group() {
         [group]
     )
 
-    return (
+    return loading ? (
+        <div className="flex justify-center items-center h-screen">
+            <div className="loader" />
+        </div>
+    ) : (
         group && (
             <div className="mx-auto max-w-7xl px-4 lg:px-8 pt-20">
                 <div className="flex justify-center flex-col pb-10 font-[family-name:var(--font-geist-sans)]">
diff --git a/apps/explorer/src/app/[network]/page.tsx b/apps/explorer/src/app/[network]/page.tsx
index 76564c9..beabffe 100644
--- a/apps/explorer/src/app/[network]/page.tsx
+++ b/apps/explorer/src/app/[network]/page.tsx
@@ -13,8 +13,11 @@ export default function Network() {
     const [allGroups, setAllGroups] = useState<GroupResponse[]>([])
     const [filteredGroups, setFilteredGroups] = useState<GroupResponse[]>([])
 
+    const [loading, setLoading] = useState(false)
+
     useEffect(() => {
         const fetchData = async () => {
+            setLoading(true)
             const subgraph = new SemaphoreSubgraph(network)
 
             const groups = await subgraph.getGroups({
@@ -24,18 +27,26 @@ export default function Network() {
 
             setAllGroups(groups)
             setFilteredGroups(groups.slice())
+            setLoading(false)
         }
 
         fetchData()
     }, [])
 
-    const filterGroups = useCallback((groupId: string) => {
-        const groups = allGroups.filter((group) => (!groupId ? true : group.id.includes(groupId)))
+    const filterGroups = useCallback(
+        (groupId: string) => {
+            const groups = allGroups.filter((group) => (!groupId ? true : group.id.includes(groupId)))
 
-        setFilteredGroups(groups)
-    }, [])
+            setFilteredGroups(groups)
+        },
+        [allGroups]
+    )
 
-    return (
+    return loading ? (
+        <div className="flex justify-center items-center h-screen">
+            <div className="loader" />
+        </div>
+    ) : (
         allGroups && (
             <div className="mx-auto max-w-7xl px-4 lg:px-8 pt-20">
                 <SearchBar className="mb-6" placeholder="Group ID" onChange={filterGroups} />
diff --git a/apps/explorer/src/app/favicon.ico b/apps/explorer/src/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/apps/explorer/src/app/favicon.ico and /dev/null differ
diff --git a/apps/explorer/src/app/globals.css b/apps/explorer/src/app/globals.css
index bba55d9..ca782e8 100644
--- a/apps/explorer/src/app/globals.css
+++ b/apps/explorer/src/app/globals.css
@@ -25,3 +25,19 @@ body {
         text-wrap: balance;
     }
 }
+
+.loader {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    border-top: 2px solid #3555df;
+    border-right: 2px solid transparent;
+    animation: spin 1s linear infinite;
+    z-index: 20;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
diff --git a/apps/explorer/src/app/layout.tsx b/apps/explorer/src/app/layout.tsx
index 62d743b..bad2c17 100644
--- a/apps/explorer/src/app/layout.tsx
+++ b/apps/explorer/src/app/layout.tsx
@@ -16,7 +16,22 @@ const geistMono = localFont({
 
 export const metadata: Metadata = {
     title: "Semaphore Explorer",
-    description: "Discover Semaphore groups, view members and zero-knowledge proofs."
+    description: "Discover Semaphore groups, view members and zero-knowledge proofs.",
+    icons: { icon: "/icon.svg", apple: "/apple-icon.png" },
+    metadataBase: new URL("https://explorer.semaphore.pse.dev"),
+    openGraph: {
+        type: "website",
+        url: "https://explorer.semaphore.pse.dev",
+        title: "Semaphore Explorer",
+        description: "Discover Semaphore groups, view members and zero-knowledge proofs.",
+        siteName: "Semaphore Explorer",
+        images: [
+            {
+                url: "https://explorer.semaphore.pse.dev/social-media.png"
+            }
+        ]
+    },
+    twitter: { card: "summary_large_image", images: "https://explorer.semaphore.pse.dev/social-media.png" }
 }
 
 export default function RootLayout({