diff --git a/packages/client/src/components/CanvasWrapper.tsx b/packages/client/src/components/CanvasWrapper.tsx
index d1d947194557b6692c2cff629366498037b3b932..91d64cc67aa6baeb4b64847d079e6473de0f957f 100644
--- a/packages/client/src/components/CanvasWrapper.tsx
+++ b/packages/client/src/components/CanvasWrapper.tsx
@@ -13,6 +13,7 @@ import { KeybindManager } from "../lib/keybinds";
 import { BlankOverlay } from "./Overlay/BlankOverlay";
 import { HeatmapOverlay } from "./Overlay/HeatmapOverlay";
 import { useTemplateContext } from "../contexts/TemplateContext";
+import { PixelPulses } from "./Overlay/PixelPulses";
 
 export const CanvasWrapper = () => {
   const { config } = useAppContext();
@@ -23,6 +24,7 @@ export const CanvasWrapper = () => {
       <PanZoomWrapper>
         <BlankOverlay />
         <HeatmapOverlay />
+        <PixelPulses />
         {config && <Template />}
         <CanvasInner />
         <Cursor />
diff --git a/packages/client/src/components/Header/User.tsx b/packages/client/src/components/Header/User.tsx
index f4a3d1d5740a793236843747e2f70d47b754b1f1..9489959398d8b21419b531628a6009e88d1435b8 100644
--- a/packages/client/src/components/Header/User.tsx
+++ b/packages/client/src/components/Header/User.tsx
@@ -7,7 +7,7 @@ export const User = () => {
   return user ? (
     <Card>
       <UserElement
-        name={user.user.username}
+        name={user.user.display_name || user.user.username}
         description={user.service.instance.hostname}
         avatarProps={{
           showFallback: true,
diff --git a/packages/client/src/components/Overlay/OverlaySettings.tsx b/packages/client/src/components/Overlay/OverlaySettings.tsx
index 01c02ec7bd18f61619176234733a7484a2afc942..fdd369d0508336ddec576f2a44a9c55de060e2d6 100644
--- a/packages/client/src/components/Overlay/OverlaySettings.tsx
+++ b/packages/client/src/components/Overlay/OverlaySettings.tsx
@@ -2,7 +2,7 @@ import { Slider, Spinner, Switch } from "@nextui-org/react";
 import { useAppContext } from "../../contexts/AppContext";
 
 export const OverlaySettings = () => {
-  const { blankOverlay, setBlankOverlay, heatmapOverlay, setHeatmapOverlay } =
+  const { blankOverlay, setBlankOverlay, heatmapOverlay, setHeatmapOverlay, pixelPulses, setPixelPulses } =
     useAppContext();
 
   return (
@@ -56,6 +56,15 @@ export const OverlaySettings = () => {
             getValue={(v) => (v as number) * 100 + "%"}
           />
         )}
+
+        <Switch
+          isSelected={pixelPulses}
+          onValueChange={(v) =>
+            setPixelPulses(v)
+          }
+        >
+          New Pixel Pulses
+        </Switch>
       </section>
     </div>
   );
diff --git a/packages/client/src/components/Overlay/PixelPulses.tsx b/packages/client/src/components/Overlay/PixelPulses.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..534749a0784fe15c63dfb348216f46d503065aea
--- /dev/null
+++ b/packages/client/src/components/Overlay/PixelPulses.tsx
@@ -0,0 +1,59 @@
+import { CSSProperties, useEffect, useState } from "react";
+import { useAppContext } from "../../contexts/AppContext";
+import network from "../../lib/network";
+import { Pixel } from "@sc07-canvas/lib/src/net";
+import { Canvas } from "../../lib/canvas";
+
+export const PixelPulses = () => {
+  const { pixelPulses } = useAppContext();
+  const [pulses, setPulses] = useState<JSX.Element[]>([]);
+
+  useEffect(() => {
+    function handlePixel({ x, y, color }: Pixel) {
+      if (!pixelPulses) {
+        return;
+      }
+
+      const paletteColor = Canvas.instance?.Pallete.getColor(color);
+
+      const pulseStyle: CSSProperties = {
+        position: "absolute",
+        zIndex: "100",
+        left: x + "px",
+        top: y + "px",
+        width: "50px",
+        height: "50px",
+        border: `1px solid #${paletteColor?.hex || "000"}`, // default to black in the case it fails to load, but that shouldn't happen
+        borderRadius: "100px",
+        transform: "translate(-24.5px, -24.5px)",
+        animationName: "pixel-pulse",
+        animationTimingFunction: "ease-in-out",
+        animationDuration: "2s",
+        animationFillMode: "forwards",
+      };
+
+      // used in the case of two pixels coming through for the same position
+      // rare, but causes issues with react
+      // even if the pixels are close to eachother, the ms will be different
+      const timestamp = Date.now();
+
+      const pulseElement = (
+        <div key={`${x}-${y}-${timestamp}`} style={pulseStyle}></div>
+      );
+
+      setPulses((prevPulses) => [...prevPulses, pulseElement]);
+
+      setTimeout(() => {
+        setPulses((prevPulses) => prevPulses.slice(1)); // Remove the oldest pulse after 3700ms
+      }, 2500);
+    }
+
+    network.on("pixel", handlePixel);
+
+    return () => {
+      network.off("pixel", handlePixel);
+    };
+  }, [pixelPulses]);
+
+  return <div>{pulses}</div>;
+};
diff --git a/packages/client/src/components/Profile/UserCard.tsx b/packages/client/src/components/Profile/UserCard.tsx
index 784eb732a470a249d393700a5ddbe1de2e204ec2..3e7b1b6d9d9cd87abe3b51eb5d27b069baa8675d 100644
--- a/packages/client/src/components/Profile/UserCard.tsx
+++ b/packages/client/src/components/Profile/UserCard.tsx
@@ -2,7 +2,7 @@ import { faMessage, faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Avatar, Button, Link, Spinner, User } from "@nextui-org/react";
 import { ClientConfig } from "@sc07-canvas/lib/src/net";
-import { MouseEvent, useEffect, useState } from "react";
+import { MouseEvent, useEffect, useMemo, useState } from "react";
 import { toast } from "react-toastify";
 import { useAppContext } from "../../contexts/AppContext";
 
@@ -72,11 +72,26 @@ export const UserCard = ({ user }: { user: IUser }) => {
     setProfile(user.sub);
   };
 
+  const name = useMemo(() => {
+    if (!user || !user.sub) {
+      return 'Unknown'
+    }
+
+    const regex = /^(.*)@/;
+    const match = user.sub.match(regex);
+
+    if (match) {
+      return match[1];
+    }
+
+    return 'Unknown'
+  }, [user])
+
   return (
     <div className="flex flex-col gap-1">
       <div className="flex flex-row space-between p-2">
         <User 
-          name={user?.display_name || 'Unknown'}
+          name={user?.display_name || name}
           description={user?.sub || 'Unknown'}
           avatarProps={{
             showFallback: true,
diff --git a/packages/client/src/components/SidebarBase.tsx b/packages/client/src/components/SidebarBase.tsx
index b29d87fd17ddd0998d86cad3393464d94a21b1c8..60c7e49e47a3e2818b118f0082f41dcbc69aace0 100644
--- a/packages/client/src/components/SidebarBase.tsx
+++ b/packages/client/src/components/SidebarBase.tsx
@@ -15,7 +15,7 @@ export const SidebarBase = ({children, shown, icon, setSidebarShown, title, desc
   return (
     <div>
       <motion.div
-        className={`absolute w-screen h-screen z-50 left-0 top-0 bg-black`}
+        className={`absolute w-screen h-screen z-50 left-0 top-0 bg-black pointer-events-none`}
         initial={{ opacity: 0, visibility: 'hidden' }} 
         animate={{ opacity: shown ? 0.25 : 0, visibility: shown ? 'visible' : 'hidden' }} 
         transition={{ type: 'spring', stiffness: 50 }} 
diff --git a/packages/client/src/contexts/AppContext.tsx b/packages/client/src/contexts/AppContext.tsx
index f505e405a06b2d850ba9112bb3a942911c2fdcff..6651ad3386b9e0f739623537bfc0f3d47ae6a9fe 100644
--- a/packages/client/src/contexts/AppContext.tsx
+++ b/packages/client/src/contexts/AppContext.tsx
@@ -38,6 +38,8 @@ interface IAppContext {
   setBlankOverlay: React.Dispatch<React.SetStateAction<IMapOverlay>>;
   heatmapOverlay: IMapOverlay;
   setHeatmapOverlay: React.Dispatch<React.SetStateAction<IMapOverlay>>;
+  pixelPulses: boolean;
+  setPixelPulses: (state: boolean) => void
 
   profile?: string; // sub
   setProfile: (v?: string) => void;
@@ -123,6 +125,7 @@ export const AppContext = ({ children }: PropsWithChildren) => {
     opacity: 1,
     loading: false,
   });
+  const [pixelPulses, setPixelPulses] = useState<boolean>(false)
 
   const [profile, setProfile] = useState<string>();
 
@@ -229,6 +232,8 @@ export const AppContext = ({ children }: PropsWithChildren) => {
         setBlankOverlay,
         heatmapOverlay,
         setHeatmapOverlay,
+        pixelPulses,
+        setPixelPulses,
         profile,
         setProfile,
         infoSidebar,
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 8eb97cc86a57d85966c67a211df019b096153709..a70de21b8d9645655fcbd8946b0317adcdd4d8ac 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -201,6 +201,19 @@ main {
   }
 }
 
+@keyframes pixel-pulse {
+  from {
+    width: 50px;
+    height: 50px;
+    transform: translate(-24.5px, -24.5px);
+  }
+  to {
+    width: 10px;
+    height: 10px;
+    transform: translate(-4.5px, -4.5px);
+  }
+}
+
 @import "./components/Toolbar/Palette.scss";
 @import "./components/Templating/Template.scss";
 @import "./board.scss";
diff --git a/packages/lib/src/net.ts b/packages/lib/src/net.ts
index 01d218d9dce68d87f04e49886f2db878d4341740..3d24b82b6fb9a553db8e89e69cadcb0ce6f6c0e5 100644
--- a/packages/lib/src/net.ts
+++ b/packages/lib/src/net.ts
@@ -227,6 +227,7 @@ export type AuthSession = {
   };
   user: {
     username: string;
+    display_name?: string;
     picture_url?: string;
   };
 };