diff --git a/README.md b/README.md
index 1997db2a30..da0c30ee85 100644
--- a/README.md
+++ b/README.md
@@ -37,10 +37,11 @@ Open source interface for Guild.xyz -- a tool for platformless membership manage
 ### Running the interface locally
 
 1. `bun i`
-2. `bun run dev`
-3. If you don't have the secret environment variables, copy the `.env.example` as `.env.local`.
+2. Append `127.0.0.1  local.openguild.xyz` to `/etc/hosts`
+3. If you don't have the secret environment variables, copy the `.env.example` as `.env.local`
+4. Run `bun dev`, create certificate if prompted
+5. Open `https://local.openguild.xyz:3000` and dismiss the unsecure site warning
 
-Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
 
 ### Getting secret environment variables (for core team members):
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1ac31cc799..9853c91e72 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import "@/styles/globals.css";
+import { ConnectResultToast } from "@/components/ConnectResultToast";
 import { PrefetchUserBoundary } from "@/components/PrefetchUserBoundary";
 import { PreloadResources } from "@/components/PreloadResources";
 import { Providers } from "@/components/Providers";
@@ -7,15 +8,16 @@ import { SignInDialog } from "@/components/SignInDialog";
 import { Toaster } from "@/components/ui/Toaster";
 import { dystopian } from "@/lib/fonts";
 import { cn } from "lib/cssUtils";
+import { Suspense } from "react";
 
 export const metadata: Metadata = {
   title: "Guildhall",
   applicationName: "Guildhall",
   description:
     "Automated membership management for the platforms your community already uses.",
-  // icons: {
-  //   icon: "/guild-icon.png",
-  // },
+  icons: {
+    icon: "/guild-icon.png",
+  },
 };
 
 const RootLayout = ({
@@ -30,8 +32,11 @@ const RootLayout = ({
         <Providers>
           <PrefetchUserBoundary>{children}</PrefetchUserBoundary>
 
-          <SignInDialog />
           <Toaster />
+          <SignInDialog />
+          <Suspense>
+            <ConnectResultToast />
+          </Suspense>
         </Providers>
       </body>
     </html>
diff --git a/src/components/ConnectResultToast.tsx b/src/components/ConnectResultToast.tsx
new file mode 100644
index 0000000000..6d0059612a
--- /dev/null
+++ b/src/components/ConnectResultToast.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useEffect } from "react";
+import { toast } from "sonner";
+
+const SUCCESS_PARAM = "connectSuccess";
+const ERROR_MSG_PARAM = "connectErrorMessage";
+
+export const ConnectResultToast = () => {
+  const { push } = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // TODO: types
+  const connectSuccessPlatform = searchParams.get(SUCCESS_PARAM);
+  const connectErrorMessage = searchParams.get(ERROR_MSG_PARAM);
+
+  const removeSearchParam = useCallback(
+    (param: string) => {
+      const newSearchParams = new URLSearchParams(searchParams);
+      newSearchParams.delete(param);
+      push(`${pathname}?${newSearchParams.toString()}`);
+    },
+    [searchParams, pathname, push],
+  );
+
+  useEffect(() => {
+    if (!connectSuccessPlatform) return;
+    toast(`Successfully connected ${connectSuccessPlatform}!`, {
+      icon: <CheckCircle weight="fill" className="text-icon-success" />,
+    });
+    removeSearchParam(SUCCESS_PARAM);
+  }, [connectSuccessPlatform, removeSearchParam]);
+
+  useEffect(() => {
+    if (!connectErrorMessage) return;
+    toast("Error", {
+      description: connectErrorMessage,
+      icon: <XCircle weight="fill" className="text-icon-error" />,
+    });
+    removeSearchParam(ERROR_MSG_PARAM);
+  }, [connectErrorMessage, removeSearchParam]);
+
+  return null;
+};