diff --git a/packages/web/public/icons/logo-mark.svg b/packages/web/public/icons/logo-mark.svg
new file mode 100644
index 00000000..e24ab4f0
--- /dev/null
+++ b/packages/web/public/icons/logo-mark.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/packages/web/src/components/layout/SpaceSidebar.tsx b/packages/web/src/components/layout/SpaceSidebar.tsx
index b3a2ae20..659a3c26 100644
--- a/packages/web/src/components/layout/SpaceSidebar.tsx
+++ b/packages/web/src/components/layout/SpaceSidebar.tsx
@@ -79,13 +79,8 @@ function SidebarItem({ id, name, icon, avatarColor, active, onClick, onContextMe
}
if (type === 'dm') {
- // Home tile renders logo.png (full Element 1 badge with #000 bg)
- // via object-cover; the badge IS the visible tile fill, so no
- // separate button background is needed. The button's overflow-hidden
- // + rounded-[20px → 13px] morph clips the opaque badge cleanly,
- // giving the same hover/active feedback shape as space tiles with
- // custom icons.
- return undefined;
+ const lit = active || isHovered;
+ return { background: lit ? 'rgb(var(--accent-primary))' : 'rgb(var(--interactive-muted))' };
}
// Space type — if it has a custom icon image, no gradient needed
@@ -93,7 +88,7 @@ function SidebarItem({ id, name, icon, avatarColor, active, onClick, onContextMe
const spaceGrad = getSpaceGradient(id, name, avatarColor);
return { background: spaceGrad.gradient };
- }, [type, id, name, icon, avatarColor, isHovered]);
+ }, [type, id, name, icon, avatarColor, isHovered, active]);
const getButtonClasses = () => {
const base = 'w-10 h-10 flex items-center justify-center duration-200 overflow-hidden [transition:border-radius_0.2s,background_0.2s,color_0.2s]';
@@ -116,7 +111,7 @@ function SidebarItem({ id, name, icon, avatarColor, active, onClick, onContextMe
const buttonContent = (