fix: update board slug availability check to be unique to workspace

feat: dashboard 2.0 redesign (#124 )
* feat: add patterned background to boards * feat: setup dashboard 2.0 * fix: prevent patterned background from overlaying buttons * feat: set max width for main card view * feat: adjust colour scheme for card view * feat: adjust dashboard border colour scheme and radius * fix: use correct colour for description placeholder * fix: use getLayout to persist layout state across pages * feat: reduce max width for settings and members pages * feat: add feedback button and modal * feat: adjust page max width * feat: extend mobile layout support * fix: hide pro badge when collapsed * feat: tweak nav styling for light mode * feat: tweak skeleton loaders for board list * feat: extend list max height * fix: hide side nav right border on desktop * chore: update hero images * chore: update hero images for docs * chore: update translations
2025-07-26 21:17:25 +01:00 · 2025-07-24 12:14:46 +01:00 · 2025-07-20 11:18:19 +01:00 · 2025-07-14 22:39:05 +01:00 · 2025-07-14 22:38:57 +01:00 · 2025-07-14 22:34:10 +01:00
55 changed files with 1344 additions and 991 deletions
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -6,7 +6,7 @@
      "type": "node-terminal",
      "request": "launch",
      "command": "pnpm dev",
-      "cwd": "${workspaceFolder}/apps/nextjs",
+      "cwd": "${workspaceFolder}/apps/web",
      "skipFiles": ["<node_internals>/**"],
      "sourceMaps": true,
      "sourceMapPathOverrides": {
@@ -14,4 +14,4 @@
      }
    }
  ]
-}
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

-## [Unreleased](https://github.com/kanbn/kan/compare/v0.2.3...HEAD)
+## [Unreleased](https://github.com/kanbn/kan/compare/v0.2.4...HEAD)
+
+## [0.2.4](https://github.com/kanbn/kan/compare/v0.2.3...v0.2.4) - 2025-01-14
+
+### Added
+
+- Button to view and update board public URL directly from board page
+- Redirect from root to login page for self-hosted instances
+
+### Changed
+
+- Updated all label router endpoints to return consistent structure
+- Added verbose error logging to magic link invitation process
+
+### Fixed
+
+- Updated tRPC dependencies and added OpenAPI meta to providers endpoint

 ## [0.2.3](https://github.com/kanbn/kan/compare/v0.2.2...v0.2.3) - 2025-07-07

--- a/apps/docs/images/hero-dark.png
+++ b/apps/docs/images/hero-dark.png
--- a/apps/docs/images/hero-light.png
+++ b/apps/docs/images/hero-light.png
--- a/apps/web/i18n.lock
+++ b/apps/web/i18n.lock
@@ -280,7 +280,7 @@ checksums:
    Self%20Host/singular: 43fbce2027548b712002e489a20a621a
    Self%20host%20with%20Github/singular: 972155419bcc9f8f9bad9f5ad3538774
    self-assigned%20the%20card/singular: 24a8d97bcd747643772ebe883be69698
-    Send/singular: 76a8497d7b546628b03bb81d5c1ce995
+    Send%20feedback/singular: 9631cc08d49da04475b30a0d320ce97c
    Senior/singular: 3fff865dc00435f82896fc302ea45630
    Settings/singular: 8df6777277469c1fd88cc18dde2f1cc3
    Settings%20%7C%20%7B0%7D/singular: b8fc73080bc9c8f4f1403b2a69bd1ac5
@@ -295,6 +295,7 @@ checksums:
    Software%20Development/singular: 67659097ef6bcb194839858b2c4f3a3c
    Star%20on%20Github/singular: e5cb0428f1ac6485688f120d78742875
    Success/singular: c43827becada6750f7a25890905f38b9
+    Support/singular: 55aab5fd0f31a9cb055a2edeeedfaf63
    Support%20the%20development%20of%20the%20project/singular: c63bab228ab2b1be4370c668a99cd278
    System/singular: 803281c327a02a2feba182f4a2b38311
    Teams/singular: b63448c05270497973ac4407047dae02
--- a/apps/web/public/hero-dark.png
+++ b/apps/web/public/hero-dark.png
--- a/apps/web/public/hero-light.png
+++ b/apps/web/public/hero-light.png
--- a/apps/web/src/components/AuthForm.tsx
+++ b/apps/web/src/components/AuthForm.tsx
@@ -259,6 +259,7 @@ export function Auth({ setIsMagicLinkSent, isSignUp }: AuthProps) {
            }
            return (
              <Button
+                key={key}
                onClick={() => handleLoginWithProvider(key as SocialProvider)}
                isLoading={isLoginWithProviderPending === key}
                iconLeft={<provider.icon />}
--- a/apps/web/src/components/Dashboard.tsx
+++ b/apps/web/src/components/Dashboard.tsx
@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { useRef, useState } from "react";
 import {
  TbLayoutSidebarLeftCollapse,
@@ -10,8 +9,11 @@ import {
 import { authClient } from "@kan/auth/client";

 import { useClickOutside } from "~/hooks/useClickOutside";
+import { useModal } from "~/providers/modal";
 import { useTheme } from "~/providers/theme";
-import FeedbackButton from "./FeedbackButton";
+import { WorkspaceProvider } from "~/providers/workspace";
+import FeedbackModal from "./FeedbackModal";
+import Modal from "./modal";
 import SideNavigation from "./SideNavigation";

 interface DashboardProps {
@@ -20,14 +22,30 @@ interface DashboardProps {
  hasRightPanel?: boolean;
 }

+export function getDashboardLayout(
+  page: React.ReactElement,
+  rightPanel?: React.ReactNode,
+  hasRightPanel = false,
+) {
+  return (
+    <WorkspaceProvider>
+      <Dashboard rightPanel={rightPanel} hasRightPanel={hasRightPanel}>
+        {page}
+      </Dashboard>
+    </WorkspaceProvider>
+  );
+}
+
 export default function Dashboard({
  children,
  rightPanel,
  hasRightPanel = false,
 }: DashboardProps) {
  const theme = useTheme();
+  const { modalContentType } = useModal();

  const { data: session, isPending: sessionLoading } = authClient.useSession();
+
  const [isSideNavOpen, setIsSideNavOpen] = useState(false);
  const [isRightPanelOpen, setIsRightPanelOpen] = useState(false);

@@ -43,6 +61,10 @@ export default function Dashboard({
    }
  };

+  const closeSideNav = () => {
+    setIsSideNavOpen(false);
+  };
+
  const toggleRightPanel = () => {
    setIsRightPanelOpen(!isRightPanelOpen);
    if (!isRightPanelOpen) {
@@ -77,93 +99,84 @@ export default function Dashboard({
          height: 100vh;
          overflow: hidden;
          min-width: 320px;
-          background-color: ${!isDarkMode ? "hsl(0deg 0% 97.3%)" : "#161616"};
+          background-color: ${!isDarkMode ? "hsl(0deg 0% 97.3%)" : "#1c1c1c"};
        }
      `}</style>
-      <div className="flex h-screen flex-col items-center bg-light-100 dark:bg-dark-50 md:min-w-[800px]">
-        <div className="flex h-12 min-h-12 w-full justify-between border-b border-light-600 px-5 py-2 align-middle dark:border-dark-400 md:h-16 md:min-h-16">
-          <div className="my-auto flex w-full items-center justify-between">
+      <div className="relative flex h-screen flex-col bg-light-50 dark:bg-dark-50 md:bg-light-100 md:p-3 md:dark:bg-dark-100">
+        {/* Mobile Header */}
+        <div className="flex h-12 items-center justify-between border-b border-light-300 bg-light-50 px-3 dark:border-dark-300 dark:bg-dark-50 md:hidden">
+          <button
+            ref={sideNavButtonRef}
+            onClick={toggleSideNav}
+            className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
+          >
+            {isSideNavOpen ? (
+              <TbLayoutSidebarLeftCollapse
+                size={20}
+                className="text-light-900 dark:text-dark-900"
+              />
+            ) : (
+              <TbLayoutSidebarLeftExpand
+                size={20}
+                className="text-light-900 dark:text-dark-900"
+              />
+            )}
+          </button>
+
+          {hasRightPanel && (
            <button
-              ref={sideNavButtonRef}
-              onClick={toggleSideNav}
-              className="text-neutral-900 dark:text-dark-1000 md:hidden"
+              ref={rightPanelButtonRef}
+              onClick={toggleRightPanel}
+              className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
            >
-              {isSideNavOpen ? (
-                <TbLayoutSidebarLeftCollapse
+              {isRightPanelOpen ? (
+                <TbLayoutSidebarRightCollapse
                  size={20}
                  className="text-light-900 dark:text-dark-900"
                />
              ) : (
-                <TbLayoutSidebarLeftExpand
+                <TbLayoutSidebarRightExpand
                  size={20}
                  className="text-light-900 dark:text-dark-900"
                />
              )}
            </button>
-
-            <Link href="/" className="hidden md:block">
-              <h1 className="text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
-                kan.bn
-              </h1>
-            </Link>
-
-            <div className="flex items-center gap-2">
-              {hasRightPanel && (
-                <button
-                  ref={rightPanelButtonRef}
-                  onClick={toggleRightPanel}
-                  className="text-neutral-900 dark:text-dark-1000 md:hidden"
-                >
-                  {isRightPanelOpen ? (
-                    <TbLayoutSidebarRightCollapse
-                      size={20}
-                      className="text-light-900 dark:text-dark-900"
-                    />
-                  ) : (
-                    <TbLayoutSidebarRightExpand
-                      size={20}
-                      className="text-light-900 dark:text-dark-900"
-                    />
-                  )}
-                </button>
-              )}
-              <div className="hidden md:block">
-                <FeedbackButton />
-              </div>
-            </div>
-          </div>
+          )}
        </div>

-        <div className="flex h-full min-h-0 w-full">
+        <div className="flex h-[calc(100dvh-4.5rem)] min-h-0 w-full md:h-[calc(100dvh-1.5rem)]">
          <div
            ref={sideNavRef}
-            className={`fixed left-0 top-12 z-50 h-[calc(100dvh-3rem)] transform transition-transform duration-300 ease-in-out md:relative md:top-0 md:h-full md:translate-x-0 ${isSideNavOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"} `}
+            className={`fixed top-12 z-40 h-[calc(100dvh-3rem)] w-[calc(100vw-1.5rem)] transform transition-transform duration-300 ease-in-out md:relative md:top-0 md:h-full md:w-auto md:translate-x-0 ${isSideNavOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"} `}
          >
            <SideNavigation
              user={{ email: session?.user.email, image: session?.user.image }}
              isLoading={sessionLoading}
+              onCloseSideNav={closeSideNav}
            />
          </div>

-          <div className="relative flex min-h-0 w-full overflow-hidden">
-            <div className="h-full w-full overflow-y-auto">{children}</div>
+          <div className="relative h-full min-h-0 w-full overflow-hidden md:rounded-lg md:border md:border-light-300 md:bg-light-50 md:dark:border-dark-300 md:dark:bg-dark-50">
+            <div className="relative flex h-full min-h-0 w-full overflow-hidden">
+              <div className="h-full w-full overflow-y-auto">{children}</div>

-            {/* Mobile Right Panel */}
-            {hasRightPanel && rightPanel && (
-              <div
-                ref={rightPanelRef}
-                className={`fixed right-0 top-12 z-50 h-[calc(100dvh-3rem)] w-80 transform bg-light-200 transition-transform duration-300 ease-in-out dark:bg-dark-100 md:hidden ${
-                  isRightPanelOpen ? "translate-x-0" : "translate-x-full"
-                }`}
-              >
-                <div className="h-full overflow-y-auto">{rightPanel}</div>
-              </div>
-            )}
+              {/* Mobile Right Panel */}
+              {hasRightPanel && rightPanel && (
+                <div
+                  ref={rightPanelRef}
+                  className={`fixed right-0 top-12 z-40 h-[calc(100dvh-3rem)] w-80 transform border-l border-light-300 bg-light-200 transition-transform duration-300 ease-in-out dark:border-dark-300 dark:bg-dark-100 md:hidden ${
+                    isRightPanelOpen ? "translate-x-0" : "translate-x-full"
+                  }`}
+                >
+                  <div className="h-full">{rightPanel}</div>
+                </div>
+              )}

-            {/* Desktop Right Panel */}
-            {hasRightPanel && rightPanel && (
-              <div className="hidden md:block">{rightPanel}</div>
-            )}
+              {/* Desktop Right Panel */}
+              {hasRightPanel && rightPanel && (
+                <div className="hidden md:block">{rightPanel}</div>
+              )}
+            </div>
          </div>
        </div>
      </div>
--- a/apps/web/src/components/Editor.tsx
+++ b/apps/web/src/components/Editor.tsx
@@ -350,7 +350,6 @@ export default function Editor({
    <div ref={containerRef}>
      <style jsx global>{`
        .tiptap p.is-empty::before {
-          color: #adb5bd;
          content: attr(data-placeholder);
          float: left;
          height: 0;
@@ -363,7 +362,7 @@ export default function Editor({
      {!readOnly && editor && <EditorBubbleMenu editor={editor} />}
      <EditorContent
        editor={editor}
-        className="prose dark:prose-invert prose-sm max-w-none overflow-y-auto [&_blockquote]:!text-xs [&_h1]:!text-lg [&_h2]:!text-base [&_h3]:!text-sm [&_ol]:!text-xs [&_p.is-empty::before]:text-dark-800 [&_p.is-empty::before]:dark:text-dark-800 [&_p]:!text-sm [&_p]:text-black [&_p]:dark:text-white [&_ul]:!text-xs"
+        className="prose dark:prose-invert prose-sm max-w-none overflow-y-auto [&_blockquote]:!text-xs [&_h1]:!text-lg [&_h2]:!text-base [&_h3]:!text-sm [&_ol]:!text-xs [&_p.is-empty::before]:text-light-900 [&_p.is-empty::before]:dark:text-dark-800 [&_p]:!text-sm [&_p]:text-black [&_p]:dark:text-white [&_ul]:!text-xs"
      />
    </div>
  );
--- a/apps/web/src/components/FeedbackButton.tsx
+++ b/apps/web/src/components/FeedbackButton.tsx
@@ -1,149 +0,0 @@
-import Link from "next/link";
-import { Menu, Transition } from "@headlessui/react";
-import { t } from "@lingui/core/macro";
-import { Fragment, useRef, useState } from "react";
-import { useForm } from "react-hook-form";
-
-import chatIconDark from "~/assets/chat-dark.json";
-import chatIconLight from "~/assets/chat-light.json";
-import Button from "~/components/Button";
-import Input from "~/components/Input";
-import LottieIcon from "~/components/LottieIcon";
-import { usePopup } from "~/providers/popup";
-import { useTheme } from "~/providers/theme";
-import { api } from "~/utils/api";
-
-interface NewFeedbackFormInput {
-  feedback: string;
-}
-
-const FeedbackButton: React.FC = () => {
-  const outsideRef = useRef<HTMLDivElement>(null);
-  const { activeTheme } = useTheme();
-  const { showPopup } = usePopup();
-  const [isHovered, setIsHovered] = useState(false);
-  const [index, setIndex] = useState(0);
-
-  const { handleSubmit, setValue, watch, reset } =
-    useForm<NewFeedbackFormInput>({
-      defaultValues: {
-        feedback: "",
-      },
-    });
-
-  const createFeedback = api.feedback.create.useMutation({
-    onSuccess: async () => {
-      reset();
-      showPopup({
-        header: t`Feedback sent`,
-        message: t`Thank you for your feedback!`,
-        icon: "success",
-      });
-    },
-    onError: async () => {
-      showPopup({
-        header: t`Unable to send feedback`,
-        message: t`Please try again later, or contact customer support.`,
-        icon: "error",
-      });
-    },
-  });
-
-  const handleMouseEnter = () => {
-    setIsHovered(true);
-    setIndex((index) => index + 1);
-  };
-
-  const onSubmit = (values: NewFeedbackFormInput) => {
-    createFeedback.mutate({
-      feedback: values.feedback,
-      url: window.location.href,
-    });
-  };
-
-  return (
-    <>
-      <div ref={outsideRef} />
-      <Menu as="div" className="relative inline-block text-left">
-        <div>
-          <Menu.Button
-            onMouseEnter={handleMouseEnter}
-            className="flex items-center rounded-md border-[1px] border-light-600 bg-light-50 px-2.5 py-1.5 text-sm font-normal text-neutral-900 shadow-sm dark:border-dark-400 dark:bg-dark-50 dark:text-dark-1000"
-          >
-            <LottieIcon
-              index={index}
-              json={activeTheme === "dark" ? chatIconDark : chatIconLight}
-              isPlaying={isHovered}
-            />
-            <span className="ml-1">{t`Feedback`}</span>
-          </Menu.Button>
-        </div>
-
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <Menu.Items
-            as="div"
-            static
-            className="absolute right-0 z-30 mt-2 w-[350px] origin-top-right rounded-md border border-light-200 bg-light-50 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300"
-          >
-            <form onSubmit={handleSubmit(onSubmit)} className="p-1">
-              <Input
-                placeholder={t`Ideas to improve this page...`}
-                onChange={(e) => {
-                  setValue("feedback", e.target.value);
-                }}
-                value={watch("feedback")}
-                contentEditable
-                className="max-h-[300px] min-h-[100px]"
-                onKeyDown={async (e) => {
-                  e.stopPropagation();
-                  if (e.key === "Enter" && e.shiftKey) {
-                    e.preventDefault();
-                    await handleSubmit(onSubmit)();
-                  }
-                }}
-              />
-              <div className="flex flex-row items-center justify-between pt-2">
-                <div>
-                  <p className="ml-2 text-xs text-neutral-900 dark:text-dark-1000">
-                    {t`Need help?`}{" "}
-                    <Link
-                      href="mailto:support@kan.bn"
-                      className="text-blue-600 underline dark:text-blue-300"
-                    >
-                      {t`Contact us`}
-                    </Link>
-                    {t`, or see our`}{" "}
-                    <Link
-                      href="https://docs.kan.bn"
-                      target="_blank"
-                      rel="noreferrer"
-                      className="text-blue-600 underline dark:text-blue-300"
-                    >
-                      {t`docs`}
-                    </Link>
-                    .
-                  </p>
-                </div>
-                <div className="justify-end">
-                  <Button size="sm" isLoading={createFeedback.isPending}>
-                    {t`Send`}
-                  </Button>
-                </div>
-              </div>
-            </form>
-          </Menu.Items>
-        </Transition>
-      </Menu>
-    </>
-  );
-};
-
-export default FeedbackButton;
--- a/apps/web/src/components/FeedbackModal.tsx
+++ b/apps/web/src/components/FeedbackModal.tsx
@@ -0,0 +1,122 @@
+import Link from "next/link";
+import { t } from "@lingui/core/macro";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { HiXMark } from "react-icons/hi2";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+interface NewFeedbackFormInput {
+  feedback: string;
+}
+
+export default function FeedbackModal() {
+  const { closeModal } = useModal();
+  const { showPopup } = usePopup();
+
+  const { handleSubmit, setValue, watch, reset } =
+    useForm<NewFeedbackFormInput>({
+      defaultValues: {
+        feedback: "",
+      },
+    });
+
+  const createFeedback = api.feedback.create.useMutation({
+    onSuccess: async () => {
+      reset();
+      closeModal();
+      showPopup({
+        header: t`Feedback sent`,
+        message: t`Thank you for your feedback!`,
+        icon: "success",
+      });
+    },
+    onError: async () => {
+      showPopup({
+        header: t`Unable to send feedback`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+  });
+
+  const onSubmit = (values: NewFeedbackFormInput) => {
+    createFeedback.mutate({
+      feedback: values.feedback,
+      url: window.location.href,
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="px-5 pt-5">
+        <div className="flex w-full items-center justify-between pb-4">
+          <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
+            {t`Feedback`}
+          </h2>
+          <button
+            type="button"
+            className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
+            onClick={(e) => {
+              e.preventDefault();
+              closeModal();
+            }}
+          >
+            <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
+          </button>
+        </div>
+
+        <Input
+          id="feedback"
+          placeholder={t`Ideas to improve this page...`}
+          onChange={(e) => setValue("feedback", e.target.value)}
+          contentEditable
+          value={watch("feedback")}
+          className="min-h-[120px]"
+          onKeyDown={async (e) => {
+            e.stopPropagation();
+            if (e.key === "Enter" && e.shiftKey) {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+            if (e.key === "Escape") {
+              closeModal();
+            }
+          }}
+        />
+      </div>
+      <div className="mt-6 flex items-center justify-between border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+        <div className="text-xs text-neutral-600 dark:text-dark-800">
+          <p>
+            {t`Need help?`}{" "}
+            <Link
+              href="mailto:support@kan.bn"
+              className="text-blue-600 underline dark:text-blue-300"
+            >
+              {t`Contact us`}
+            </Link>
+            {t`, or see our`}{" "}
+            <Link
+              href="https://docs.kan.bn"
+              target="_blank"
+              rel="noreferrer"
+              className="text-blue-600 underline dark:text-blue-300"
+            >
+              {t`docs`}
+            </Link>
+            .
+          </p>
+        </div>
+        <div>
+          <Button type="submit" isLoading={createFeedback.isPending}>
+            {t`Send feedback`}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
--- a/apps/web/src/components/LottieIcon.tsx
+++ b/apps/web/src/components/LottieIcon.tsx
@@ -2,11 +2,11 @@ import dynamic from "next/dynamic";

 const Lottie = dynamic(() => import("react-lottie-player"), { ssr: false });

-type IconProps = {
+interface IconProps {
  isPlaying: boolean;
  index: number;
  json: object;
-};
+}

 const Icon: React.FC<IconProps> = ({ isPlaying, index, json }) => {
  return (
@@ -15,7 +15,7 @@ const Icon: React.FC<IconProps> = ({ isPlaying, index, json }) => {
      animationData={json}
      play={isPlaying}
      loop={false}
-      style={{ width: 20, height: 20, fill: "white" }}
+      style={{ width: 18, height: 18, fill: "white" }}
      rendererSettings={{ preserveAspectRatio: "xMidYMid slice" }}
    />
  );
--- a/apps/web/src/components/PatternedBackground.tsx
+++ b/apps/web/src/components/PatternedBackground.tsx
@@ -3,8 +3,8 @@ const PatternedBackground = () => (
    <svg className="h-full w-full">
      <pattern
        id="pattern"
-        x="0.034759358288862785"
-        y="3.335370511841166"
+        x="10"
+        y="10"
        width="14.423223834988539"
        height="14.423223834988539"
        patternUnits="userSpaceOnUse"
--- a/apps/web/src/components/ReactiveButton.tsx
+++ b/apps/web/src/components/ReactiveButton.tsx
@@ -1,37 +1,51 @@
 import Link from "next/link";
 import { useState } from "react";
+import { twMerge } from "tailwind-merge";

 import LottieIcon from "~/components/LottieIcon";
-
-function classNames(...classes: string[]): string {
-  return classes.filter(Boolean).join(" ");
-}
+import { useIsMobile } from "~/hooks/useMediaQuery";

 const Button: React.FC<{
  href: string;
  current: boolean;
  name: string;
  json: object;
-}> = ({ href, current, name, json }) => {
+  isCollapsed?: boolean;
+  onCloseSideNav?: () => void;
+}> = ({ href, current, name, json, isCollapsed = false, onCloseSideNav }) => {
  const [isHovered, setIsHovered] = useState(false);
  const [index, setIndex] = useState(0);
+  const isMobile = useIsMobile();

  const handleMouseEnter = () => {
    setIsHovered(true);
    setIndex((index) => index + 1);
  };

+  const handleClick = () => {
+    if (onCloseSideNav && isMobile) {
+      onCloseSideNav();
+    }
+  };
+
  return (
    <Link
      href={href}
      onMouseEnter={handleMouseEnter}
-      className={classNames(
-        current ? "bg-light-200 dark:bg-dark-200" : "dark:bg-dark-50",
-        "group flex items-center gap-x-3 rounded-md p-1.5 text-sm font-normal leading-6 text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-200",
+      onClick={handleClick}
+      className={twMerge(
+        "group flex h-[34px] items-center rounded-md p-1.5 text-sm font-normal leading-6 hover:bg-light-200 hover:text-light-1000 dark:hover:bg-dark-200 dark:hover:text-dark-1000",
+        current
+          ? "bg-light-200 text-light-1000 dark:bg-dark-200 dark:text-dark-1000"
+          : "text-neutral-600 dark:bg-dark-100 dark:text-dark-900",
+        isCollapsed
+          ? "justify-start gap-x-3 md:justify-center md:gap-x-0"
+          : "gap-x-3",
      )}
+      title={isCollapsed ? name : undefined}
    >
      <LottieIcon index={index} json={json} isPlaying={isHovered} />
-      {name}
+      <span className={twMerge(isCollapsed && "md:hidden")}>{name}</span>
    </Link>
  );
 };
--- a/apps/web/src/components/SideNavigation.tsx
+++ b/apps/web/src/components/SideNavigation.tsx
@@ -1,5 +1,13 @@
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { Button } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
+import { useEffect, useState } from "react";
+import {
+  TbLayoutSidebarLeftCollapse,
+  TbLayoutSidebarLeftExpand,
+} from "react-icons/tb";
+import { twMerge } from "tailwind-merge";

 import boardsIconDark from "~/assets/boards-dark.json";
 import boardsIconLight from "~/assets/boards-light.json";
@@ -15,6 +23,7 @@ import { useTheme } from "~/providers/theme";
 interface SideNavigationProps {
  user: UserType;
  isLoading: boolean;
+  onCloseSideNav?: () => void;
 }

 interface UserType {
@@ -25,8 +34,28 @@ interface UserType {
 export default function SideNavigation({
  user,
  isLoading,
+  onCloseSideNav,
 }: SideNavigationProps) {
  const router = useRouter();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isInitialised, setIsInitialised] = useState(false);
+
+  useEffect(() => {
+    const savedState = localStorage.getItem("kan_sidebar-collapsed");
+    if (savedState !== null) {
+      setIsCollapsed(JSON.parse(savedState));
+    }
+    setIsInitialised(true);
+  }, []);
+
+  useEffect(() => {
+    if (isInitialised) {
+      localStorage.setItem(
+        "kan_sidebar-collapsed",
+        JSON.stringify(isCollapsed),
+      );
+    }
+  }, [isCollapsed, isInitialised]);

  const { pathname } = router;

@@ -52,11 +81,50 @@ export default function SideNavigation({
    },
  ];

+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
  return (
    <>
-      <nav className="flex h-full w-64 flex-col justify-between border-r border-light-600 bg-light-50 px-3 pb-3 pt-5 dark:border-dark-400 dark:bg-dark-50">
+      <nav
+        className={twMerge(
+          "flex h-full w-64 flex-col justify-between border-r border-light-300 bg-light-100 p-3 dark:border-dark-300 dark:bg-dark-100 md:border-r-0 md:py-0 md:pl-0",
+          isCollapsed && "md:w-auto",
+        )}
+      >
        <div>
-          <WorkspaceMenu />
+          <div className="hidden h-14 items-center justify-between pb-[18px] pt-1.5 md:flex">
+            {!isCollapsed && (
+              <Link href="/" className="block">
+                <h1 className="pl-2 text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
+                  kan.bn
+                </h1>
+              </Link>
+            )}
+            <Button
+              onClick={toggleCollapse}
+              className={twMerge(
+                "flex h-8 items-center justify-center rounded-md hover:bg-light-200 dark:hover:bg-dark-200",
+                isCollapsed ? "w-full" : "w-8",
+              )}
+            >
+              {isCollapsed ? (
+                <TbLayoutSidebarLeftExpand
+                  size={18}
+                  className="text-light-900 dark:text-dark-900"
+                />
+              ) : (
+                <TbLayoutSidebarLeftCollapse
+                  size={18}
+                  className="text-light-900 dark:text-dark-900"
+                />
+              )}
+            </Button>
+          </div>
+          <div className="mx-1 mb-4 hidden w-auto border-b border-light-300 dark:border-dark-400 md:block" />
+
+          <WorkspaceMenu isCollapsed={isCollapsed} />
          <ul role="list" className="space-y-1">
            {navigation.map((item) => (
              <li key={item.name}>
@@ -65,16 +133,23 @@ export default function SideNavigation({
                  current={pathname.includes(item.href)}
                  name={item.name}
                  json={item.icon}
+                  isCollapsed={isCollapsed}
+                  onCloseSideNav={onCloseSideNav}
                />
              </li>
            ))}
          </ul>
        </div>
-        <UserMenu
-          email={user.email ?? ""}
-          imageUrl={user.image ?? undefined}
-          isLoading={isLoading}
-        />
+
+        <div className="space-y-3">
+          <UserMenu
+            email={user.email ?? ""}
+            imageUrl={user.image ?? undefined}
+            isLoading={isLoading}
+            isCollapsed={isCollapsed}
+            onCloseSideNav={onCloseSideNav}
+          />
+        </div>
      </nav>
    </>
  );
--- a/apps/web/src/components/UserMenu.tsx
+++ b/apps/web/src/components/UserMenu.tsx
@@ -1,11 +1,15 @@
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Menu, Transition } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 import { Fragment } from "react";
+import { twMerge } from "tailwind-merge";

 import { authClient } from "@kan/auth/client";

+import { useIsMobile } from "~/hooks/useMediaQuery";
+import { useModal } from "~/providers/modal";
 import { useTheme } from "~/providers/theme";
 import { getAvatarUrl } from "~/utils/helpers";

@@ -13,38 +17,63 @@ interface UserMenuProps {
  imageUrl: string | undefined;
  email: string;
  isLoading: boolean;
-}
-
-function classNames(...classes: string[]): string {
-  return classes.filter(Boolean).join(" ");
+  isCollapsed?: boolean;
+  onCloseSideNav?: () => void;
 }

 export default function UserMenu({
  imageUrl,
  email,
  isLoading,
+  isCollapsed = false,
+  onCloseSideNav,
 }: UserMenuProps) {
  const router = useRouter();
  const { themePreference, switchTheme } = useTheme();
+  const { openModal } = useModal();
+  const isMobile = useIsMobile();

  const handleLogout = async () => {
+    if (onCloseSideNav && isMobile) {
+      onCloseSideNav();
+    }
    await authClient.signOut();
-
    router.push("/login");
  };

+  const handleLinkClick = () => {
+    if (onCloseSideNav && isMobile) {
+      onCloseSideNav();
+    }
+  };
+
+  const handleModalOpen = (modalType: string) => {
+    if (onCloseSideNav && isMobile) {
+      onCloseSideNav();
+    }
+    openModal(modalType);
+  };
+
  const avatarUrl = imageUrl ? getAvatarUrl(imageUrl) : null;

  return (
    <Menu as="div" className="relative inline-block w-full text-left">
      <div>
        {isLoading ? (
-          <div className="flex">
+          <div className={twMerge(!isCollapsed && "flex")}>
            <div className="h-[30px] w-[30px] animate-pulse rounded-full bg-light-200 dark:bg-dark-200" />
-            <div className="mx-2 h-[30px] w-[175px] animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+            <div
+              className={twMerge(
+                "mx-2 h-[30px] w-[175px] animate-pulse rounded-md bg-light-200 dark:bg-dark-200",
+                isCollapsed && "md:hidden",
+              )}
+            />
          </div>
        ) : (
-          <Menu.Button className="flex w-full items-center rounded-md p-1.5 text-neutral-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000">
+          <Menu.Button
+            className="flex w-full items-center rounded-md p-1.5 text-neutral-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000"
+            title={isCollapsed ? email : undefined}
+          >
            {avatarUrl ? (
              <Image
                src={avatarUrl}
@@ -64,7 +93,14 @@ export default function UserMenu({
                </svg>
              </span>
            )}
-            <span className="mx-2 truncate text-sm">{email}</span>
+            <span
+              className={twMerge(
+                "mx-2 truncate text-sm",
+                isCollapsed && "md:hidden",
+              )}
+            >
+              {email}
+            </span>
          </Menu.Button>
        )}
      </div>
@@ -78,7 +114,12 @@ export default function UserMenu({
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
-        <Menu.Items className="absolute bottom-[40px] left-0 z-10 mt-2 w-full origin-top-left rounded-md border border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300">
+        <Menu.Items
+          className={twMerge(
+            "absolute bottom-[40px] z-10 mt-2 origin-top-left rounded-md border border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300",
+            isCollapsed ? "left-0 w-48" : "left-0 w-full",
+          )}
+        >
          <div className="flex flex-col text-neutral-900 dark:text-dark-1000">
            <div className="p-1">
              <div className="flex w-full items-center px-3 py-2 text-left text-xs">
@@ -90,7 +131,7 @@ export default function UserMenu({
                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
                >
                  <span
-                    className={classNames(
+                    className={twMerge(
                      themePreference === "system" ? "visible" : "invisible",
                      "mr-4 h-[6px] w-[6px] rounded-full bg-light-900 dark:bg-dark-900",
                    )}
@@ -104,7 +145,7 @@ export default function UserMenu({
                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
                >
                  <span
-                    className={classNames(
+                    className={twMerge(
                      themePreference === "dark" ? "visible" : "invisible",
                      "mr-4 h-[6px] w-[6px] rounded-full bg-light-900 dark:bg-dark-900",
                    )}
@@ -118,7 +159,7 @@ export default function UserMenu({
                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
                >
                  <span
-                    className={classNames(
+                    className={twMerge(
                      themePreference === "light" ? "visible" : "invisible",
                      "mr-4 h-[6px] w-[6px] rounded-full bg-light-900 dark:bg-dark-900",
                    )}
@@ -127,6 +168,38 @@ export default function UserMenu({
                </button>
              </Menu.Item>
            </div>
+            <div className="light-border-600 border-t-[1px] p-1 dark:border-dark-600">
+              <Menu.Item>
+                <Link
+                  href="mailto:support@kan.bn"
+                  target="_blank"
+                  rel="noreferrer"
+                  onClick={handleLinkClick}
+                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
+                >
+                  {t`Support`}
+                </Link>
+              </Menu.Item>
+              <Menu.Item>
+                <Link
+                  href="https://docs.kan.bn"
+                  target="_blank"
+                  rel="noreferrer"
+                  onClick={handleLinkClick}
+                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
+                >
+                  {t`Documentation`}
+                </Link>
+              </Menu.Item>
+              <Menu.Item>
+                <button
+                  onClick={() => handleModalOpen("NEW_FEEDBACK")}
+                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs hover:bg-light-200 dark:hover:bg-dark-400"
+                >
+                  {t`Feedback`}
+                </button>
+              </Menu.Item>
+            </div>
            <div className="light-border-600 border-t-[1px] p-1 dark:border-dark-600">
              <Menu.Item>
                <button
--- a/apps/web/src/components/WorkspaceMenu.tsx
+++ b/apps/web/src/components/WorkspaceMenu.tsx
@@ -2,11 +2,16 @@ import { Menu, Transition } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 import { Fragment } from "react";
 import { HiCheck } from "react-icons/hi2";
+import { twMerge } from "tailwind-merge";

 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";

-export default function WorkspaceMenu() {
+export default function WorkspaceMenu({
+  isCollapsed = false,
+}: {
+  isCollapsed?: boolean;
+}) {
  const { workspace, isLoading, availableWorkspaces, switchWorkspace } =
    useWorkspace();
  const { openModal } = useModal();
@@ -15,22 +20,43 @@ export default function WorkspaceMenu() {
    <Menu as="div" className="relative inline-block w-full pb-3 text-left">
      <div>
        {isLoading ? (
-          <div className="mb-1 flex p-1.5">
-            <div className="h-6 w-6 animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-200" />
-            <div className="ml-2 h-6 w-[150px] animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-200" />
+          <div className={twMerge("mb-1", isCollapsed && "md:flex md:p-1.5")}>
+            <div className="h-6 w-6 animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+            <div
+              className={twMerge(
+                "ml-2 h-6 w-[150px] animate-pulse rounded-md bg-light-200 dark:bg-dark-200",
+                isCollapsed && "hidden md:block",
+              )}
+            />
          </div>
        ) : (
-          <Menu.Button className="mb-1 flex w-full items-center rounded-[5px] p-1.5 hover:bg-light-200 dark:hover:bg-dark-200">
-            <span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-indigo-700">
+          <Menu.Button
+            className={twMerge(
+              "mb-1 flex h-[34px] w-full items-center rounded-md p-1.5 hover:bg-light-200 dark:hover:bg-dark-200",
+              isCollapsed && "md:mb-1.5 md:h-9 md:p-1",
+            )}
+            title={isCollapsed ? workspace.name : undefined}
+          >
+            <span className="inline-flex h-6 w-6 items-center justify-center rounded-md bg-indigo-700">
              <span className="text-xs font-bold leading-none text-white">
                {workspace.name.charAt(0).toUpperCase()}
              </span>
            </span>
-            <span className="ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000">
+            <span
+              className={twMerge(
+                "ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000",
+                isCollapsed && "md:hidden",
+              )}
+            >
              {workspace.name}
            </span>
            {workspace.plan === "pro" && (
-              <span className="ml-2 inline-flex items-center rounded-md bg-indigo-100 px-2 py-1 text-[10px] font-medium text-indigo-700">
+              <span
+                className={twMerge(
+                  "ml-2 inline-flex items-center rounded-md bg-indigo-100 px-2 py-1 text-[10px] font-medium text-indigo-700",
+                  isCollapsed && "md:hidden",
+                )}
+              >
                Pro
              </span>
            )}
@@ -47,7 +73,12 @@ export default function WorkspaceMenu() {
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
-        <Menu.Items className="absolute left-0 z-10 w-full origin-top-left rounded-md border border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300">
+        <Menu.Items
+          className={twMerge(
+            "absolute left-0 z-10 origin-top-left rounded-md border border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300",
+            isCollapsed ? "w-48" : "w-full",
+          )}
+        >
          <div className="p-1">
            {availableWorkspaces.map((availableWorkspace) => (
              <div key={availableWorkspace.publicId} className="flex">
--- a/apps/web/src/hooks/useMediaQuery.ts
+++ b/apps/web/src/hooks/useMediaQuery.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    setMatches(media.matches);
+
+    const listener = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+
+  return matches;
+}
+
+export function useIsMobile(): boolean {
+  return useMediaQuery("(max-width: 767px)");
+}
--- a/apps/web/src/locales/de/messages.po
+++ b/apps/web/src/locales/de/messages.po
@@ -17,13 +17,13 @@ msgstr ""
 msgid " (edited)"
 msgstr " (bearbeitet)"

-#: src/components/FeedbackButton.tsx:123
+#: src/components/FeedbackModal.tsx:102
 msgid ", or see our"
 msgstr ", oder besuche unsere"

 #. placeholder {0}: card?.title ?? "Card"
 #. placeholder {1}: board?.name ?? "Board"
-#: src/views/card/index.tsx:188
+#: src/views/card/index.tsx:189
 msgid "{0} | {1}"
 msgstr "{0} | {1}"

@@ -49,7 +49,7 @@ msgid "Account deleted"
 msgstr "Konto gelöscht"

 #: src/views/public/board/CardModal.tsx:104
-#: src/views/card/index.tsx:255
+#: src/views/card/index.tsx:256
 msgid "Activity"
 msgstr "Aktivität"

@@ -108,11 +108,11 @@ msgstr "Alle Systeme funktionieren"
 msgid "Already have an account? <0><1>Sign in</1></0>"
 msgstr "Du hast bereits ein Konto? <0><1>Anmelden</1></0>"

-#: src/views/settings/index.tsx:99
+#: src/views/settings/index.tsx:100
 msgid "An error occurred while disconnecting your Trello account."
 msgstr "Beim Trennen deines Trello-Kontos ist ein Fehler aufgetreten."

-#: src/views/settings/index.tsx:256
+#: src/views/settings/index.tsx:257
 msgid "API keys"
 msgstr "API-Schlüssel"

@@ -165,12 +165,12 @@ msgstr "Backlog"
 msgid "Basic Kanban"
 msgstr "Einfaches Kanban"

-#: src/views/settings/index.tsx:195
+#: src/views/settings/index.tsx:196
 #: src/views/boards/components/TemplateBoards.tsx:55
 msgid "Billing"
 msgstr "Abrechnung"

-#: src/views/settings/index.tsx:205
+#: src/views/settings/index.tsx:206
 msgid "Billing portal"
 msgstr "Abrechnungsportal"

@@ -178,7 +178,7 @@ msgstr "Abrechnungsportal"
 msgid "Blog Post"
 msgstr "Blogbeitrag"

-#: src/views/board/index.tsx:240
+#: src/views/board/index.tsx:241
 msgid "Board"
 msgstr "Board"

@@ -190,7 +190,7 @@ msgstr "Der Name des Boards darf 100 Zeichen nicht überschreiten"
 msgid "Board name is required"
 msgstr "Boardname ist erforderlich"

-#: src/views/board/index.tsx:266
+#: src/views/board/index.tsx:267
 msgid "Board not found"
 msgstr "Board nicht gefunden"

@@ -218,13 +218,13 @@ msgstr "Board-Sichtbarkeit"
 msgid "Board visibility updated"
 msgstr "Board-Sichtbarkeit aktualisiert"

-#: src/views/boards/index.tsx:26
-#: src/components/SideNavigation.tsx:39
+#: src/views/boards/index.tsx:27
+#: src/components/SideNavigation.tsx:68
 msgid "Boards"
 msgstr "Boards"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/boards/index.tsx:22
+#: src/views/boards/index.tsx:23
 msgid "Boards | {0}"
 msgstr "Boards | {0}"

@@ -250,7 +250,7 @@ msgstr "Fehlerbericht"
 msgid "Cancel"
 msgstr "Abbrechen"

-#: src/views/card/index.tsx:233
+#: src/views/card/index.tsx:234
 msgid "Card not found"
 msgstr "Karte nicht gefunden"

@@ -258,7 +258,7 @@ msgstr "Karte nicht gefunden"
 msgid "Card title"
 msgstr "Kartentitel"

-#: src/views/settings/index.tsx:187
+#: src/views/settings/index.tsx:188
 msgid "Change the language of the app."
 msgstr "Ändere die Sprache der App."

@@ -308,7 +308,7 @@ msgstr "Vollständige Kontrolle und Eigentum:"
 msgid "Confirm URL change"
 msgstr "URL-Änderung bestätigen"

-#: src/views/settings/index.tsx:232
+#: src/views/settings/index.tsx:233
 #: src/views/boards/components/ImportBoardsForm.tsx:157
 msgid "Connect Trello"
 msgstr "Trello verbinden"
@@ -317,7 +317,7 @@ msgstr "Trello verbinden"
 msgid "Connect your favorite tools to streamline your workflow."
 msgstr "Verbinde deine Lieblingstools, um deinen Arbeitsablauf zu optimieren."

-#: src/views/settings/index.tsx:219
+#: src/views/settings/index.tsx:220
 msgid "Connect your Trello account to import boards."
 msgstr "Verbinde dein Trello-Konto, um Boards zu importieren."

@@ -325,7 +325,7 @@ msgstr "Verbinde dein Trello-Konto, um Boards zu importieren."
 msgid "Contact"
 msgstr "Kontakt"

-#: src/components/FeedbackButton.tsx:121
+#: src/components/FeedbackModal.tsx:100
 msgid "Contact us"
 msgstr "Kontaktiere uns"

@@ -333,12 +333,12 @@ msgstr "Kontaktiere uns"
 msgid "Content Creation"
 msgstr "Content-Erstellung"

-#: src/components/AuthForm.tsx:334
+#: src/components/AuthForm.tsx:335
 msgid "Continue with "
 msgstr "Fortfahren mit "

 #. placeholder {0}: provider.name
-#: src/components/AuthForm.tsx:268
+#: src/components/AuthForm.tsx:269
 msgid "Continue with {0}"
 msgstr "Fortfahren mit {0}"

@@ -381,11 +381,11 @@ msgstr "Neuen Schlüssel erstellen"
 msgid "Create new label"
 msgstr "Neues Label erstellen"

-#: src/views/board/index.tsx:334
+#: src/views/board/index.tsx:335
 msgid "Create new list"
 msgstr "Neue Liste erstellen"

-#: src/components/WorkspaceMenu.tsx:85
+#: src/components/WorkspaceMenu.tsx:116
 #: src/components/NewWorkspaceForm.tsx:93
 msgid "Create workspace"
 msgstr "Arbeitsbereich erstellen"
@@ -410,7 +410,7 @@ msgstr "Benutzerdefinierte URLs sind eine Premium-Funktion. Du wirst zur Aktuali
 msgid "Customer Support"
 msgstr "Kundensupport"

-#: src/components/UserMenu.tsx:112
+#: src/components/UserMenu.tsx:153
 msgid "Dark"
 msgstr "Dunkel"

@@ -420,8 +420,8 @@ msgstr "Dunkel"
 msgid "Delete"
 msgstr "Löschen"

-#: src/views/settings/index.tsx:287
-#: src/views/settings/index.tsx:297
+#: src/views/settings/index.tsx:288
+#: src/views/settings/index.tsx:298
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:96
 msgid "Delete account"
 msgstr "Konto löschen"
@@ -442,8 +442,8 @@ msgstr "Kommentar löschen"
 msgid "Delete list"
 msgstr "Liste löschen"

-#: src/views/settings/index.tsx:269
-#: src/views/settings/index.tsx:280
+#: src/views/settings/index.tsx:270
+#: src/views/settings/index.tsx:281
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:106
 msgid "Delete workspace"
 msgstr "Workspace löschen"
@@ -452,7 +452,7 @@ msgstr "Workspace löschen"
 msgid "Design"
 msgstr "Design"

-#: src/views/settings/index.tsx:247
+#: src/views/settings/index.tsx:248
 msgid "Disconnect Trello"
 msgstr "Trello trennen"

@@ -460,7 +460,7 @@ msgstr "Trello trennen"
 msgid "Discuss and collaborate on cards."
 msgstr "Diskutiere und arbeite gemeinsam an Karten."

-#: src/views/settings/index.tsx:148
+#: src/views/settings/index.tsx:149
 msgid "Display name"
 msgstr "Anzeigename"

@@ -480,7 +480,7 @@ msgstr "Anzeigename aktualisiert"
 msgid "Do you offer a free plan?"
 msgstr "Bietet ihr einen kostenlosen Plan an?"

-#: src/components/FeedbackButton.tsx:130
+#: src/components/FeedbackModal.tsx:109
 msgid "docs"
 msgstr "Dokumente"

@@ -490,6 +490,7 @@ msgstr "Dokumente"

 #: src/views/home/components/Footer.tsx:77
 #: src/views/boards/components/TemplateBoards.tsx:23
+#: src/components/UserMenu.tsx:191
 msgid "Documentation"
 msgstr "Dokumentation"

@@ -525,7 +526,7 @@ msgstr "Workspace-URL bearbeiten"
 msgid "Editing"
 msgstr "Bearbeitung"

-#: src/components/AuthForm.tsx:336
+#: src/components/AuthForm.tsx:337
 msgid "email"
 msgstr "E-Mail"

@@ -537,15 +538,15 @@ msgstr "E-Mail"
 msgid "Enhancement"
 msgstr "Verbesserung"

-#: src/components/AuthForm.tsx:301
+#: src/components/AuthForm.tsx:302
 msgid "Enter your email address"
 msgstr "Gib deine E-Mail-Adresse ein"

-#: src/components/AuthForm.tsx:289
+#: src/components/AuthForm.tsx:290
 msgid "Enter your name"
 msgstr "Gib deinen Namen ein"

-#: src/components/AuthForm.tsx:314
+#: src/components/AuthForm.tsx:315
 msgid "Enter your password"
 msgstr "Gib dein Passwort ein"

@@ -557,7 +558,7 @@ msgstr "Fehler beim Löschen des Kontos"
 msgid "Error deleting workspace"
 msgstr "Fehler beim Löschen des Arbeitsbereichs"

-#: src/views/settings/index.tsx:98
+#: src/views/settings/index.tsx:99
 msgid "Error disconnecting Trello"
 msgstr "Fehler beim Trennen von Trello"

@@ -565,7 +566,7 @@ msgstr "Fehler beim Trennen von Trello"
 msgid "Error updating display name"
 msgstr "Fehler beim Aktualisieren des Anzeigenamens"

-#: src/views/settings/components/Avatar.tsx:37
+#: src/views/settings/components/Avatar.tsx:39
 msgid "Error updating profile image"
 msgstr "Fehler beim Aktualisieren des Profilbilds"

@@ -581,8 +582,8 @@ msgstr "Fehler beim Aktualisieren des Arbeitsbereichsnamens"
 msgid "Error updating workspace URL"
 msgstr "Fehler beim Aktualisieren der Workspace-URL"

-#: src/views/settings/components/Avatar.tsx:54
-#: src/views/settings/components/Avatar.tsx:95
+#: src/views/settings/components/Avatar.tsx:56
+#: src/views/settings/components/Avatar.tsx:97
 msgid "Error uploading profile image"
 msgstr "Fehler beim Hochladen des Profilbilds"

@@ -622,11 +623,12 @@ msgstr "Feature-Anfrage"
 msgid "Features"
 msgstr "Features"

-#: src/components/FeedbackButton.tsx:78
+#: src/components/UserMenu.tsx:199
+#: src/components/FeedbackModal.tsx:59
 msgid "Feedback"
 msgstr "Feedback"

-#: src/components/FeedbackButton.tsx:38
+#: src/components/FeedbackModal.tsx:33
 msgid "Feedback sent"
 msgstr "Feedback gesendet"

@@ -674,7 +676,7 @@ msgstr "Loslegen"
 msgid "Get started by creating a new board"
 msgstr "Beginne, indem du ein neues Board erstellst"

-#: src/views/board/index.tsx:326
+#: src/views/board/index.tsx:327
 msgid "Get started by creating a new list"
 msgstr "Beginne mit dem Erstellen einer neuen Liste"

@@ -747,11 +749,11 @@ msgstr "Ich bestätige, dass alle Daten des Arbeitsbereichs dauerhaft gelöscht
 msgid "Ideas"
 msgstr "Ideen"

-#: src/components/FeedbackButton.tsx:98
+#: src/components/FeedbackModal.tsx:75
 msgid "Ideas to improve this page..."
 msgstr "Ideen zur Verbesserung dieser Seite..."

-#: src/views/boards/index.tsx:37
+#: src/views/boards/index.tsx:38
 msgid "Import"
 msgstr "Importieren"

@@ -797,7 +799,7 @@ msgstr "Integrationen"
 msgid "Interviewing"
 msgstr "Vorstellungsgespräch"

-#: src/views/members/index.tsx:168
+#: src/views/members/index.tsx:169
 msgid "Invite"
 msgstr "Einladen"

@@ -823,7 +825,7 @@ msgstr "Kanban neu gedacht"
 msgid "Keep in mind that this action is irreversible."
 msgstr "Beachten Sie, dass diese Aktion nicht rückgängig gemacht werden kann."

-#: src/views/card/index.tsx:112
+#: src/views/card/index.tsx:113
 #: src/views/board/components/NewCardForm.tsx:331
 #: src/views/board/components/Filters.tsx:101
 msgid "Labels"
@@ -833,7 +835,7 @@ msgstr "Labels"
 msgid "Labels & Filters"
 msgstr "Labels & Filter"

-#: src/views/settings/index.tsx:184
+#: src/views/settings/index.tsx:185
 msgid "Language"
 msgstr "Sprache"

@@ -849,7 +851,7 @@ msgstr "Rechtliches"
 msgid "License"
 msgstr "Lizenz"

-#: src/components/UserMenu.tsx:126
+#: src/components/UserMenu.tsx:167
 msgid "Light"
 msgstr "Hell"

@@ -857,7 +859,7 @@ msgstr "Hell"
 msgid "Link copied"
 msgstr "Link kopiert"

-#: src/views/card/index.tsx:104
+#: src/views/card/index.tsx:105
 msgid "List"
 msgstr "Liste"

@@ -869,7 +871,7 @@ msgstr "Listenname"
 msgid "Login | kan.bn"
 msgstr "Login | kan.bn"

-#: src/components/UserMenu.tsx:136
+#: src/components/UserMenu.tsx:209
 msgid "Logout"
 msgstr "Abmelden"

@@ -881,7 +883,7 @@ msgstr "Langfristig"
 msgid "Low Priority"
 msgstr "Niedrige Priorität"

-#: src/components/AuthForm.tsx:337
+#: src/components/AuthForm.tsx:338
 msgid "magic link"
 msgstr "Magic Link"

@@ -889,16 +891,16 @@ msgstr "Magic Link"
 msgid "Medium Priority"
 msgstr "Mittlere Priorität"

-#: src/views/members/index.tsx:160
-#: src/views/card/index.tsx:120
+#: src/views/members/index.tsx:161
+#: src/views/card/index.tsx:121
 #: src/views/board/components/NewCardForm.tsx:290
 #: src/views/board/components/Filters.tsx:93
-#: src/components/SideNavigation.tsx:44
+#: src/components/SideNavigation.tsx:73
 msgid "Members"
 msgstr "Mitglieder"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/members/index.tsx:156
+#: src/views/members/index.tsx:157
 msgid "Members | {0}"
 msgstr "Mitglieder | {0}"

@@ -919,11 +921,11 @@ msgstr "hat die Karte in eine andere Liste verschoben"
 msgid "Name"
 msgstr "Name"

-#: src/components/FeedbackButton.tsx:116
+#: src/components/FeedbackModal.tsx:95
 msgid "Need help?"
 msgstr "Brauchst du Hilfe?"

-#: src/views/boards/index.tsx:47
+#: src/views/boards/index.tsx:48
 msgid "New"
 msgstr "Neu"

@@ -943,7 +945,7 @@ msgstr "Neuer Import"
 msgid "New label"
 msgstr "Neues Label"

-#: src/views/board/index.tsx:303
+#: src/views/board/index.tsx:304
 #: src/views/board/components/NewListForm.tsx:112
 msgid "New list"
 msgstr "Neue Liste"
@@ -976,7 +978,7 @@ msgstr "Keine Boards gefunden"
 msgid "No credit card required"
 msgstr "Keine Kreditkarte erforderlich"

-#: src/views/board/index.tsx:323
+#: src/views/board/index.tsx:324
 msgid "No lists"
 msgstr "Keine Listen"

@@ -988,15 +990,15 @@ msgstr "Angebot"
 msgid "Onboarding"
 msgstr "Einarbeitung"

-#: src/views/settings/index.tsx:290
+#: src/views/settings/index.tsx:291
 msgid "Once you delete your account, there is no going back. This action cannot be undone."
 msgstr "Sobald Sie Ihr Konto löschen, gibt es kein Zurück mehr. Diese Aktion kann nicht rückgängig gemacht werden."

-#: src/views/settings/index.tsx:272
+#: src/views/settings/index.tsx:273
 msgid "Once you delete your workspace, there is no going back. This action cannot be undone."
 msgstr "Sobald Sie Ihren Arbeitsbereich löschen, gibt es kein Zurück mehr. Diese Aktion kann nicht rückgängig gemacht werden."

-#: src/components/AuthForm.tsx:279
+#: src/components/AuthForm.tsx:280
 msgid "or"
 msgstr "oder"

@@ -1016,7 +1018,7 @@ msgstr "Teilzeit"
 msgid "Payment frequency"
 msgstr "Zahlungshäufigkeit"

-#: src/views/members/index.tsx:117
+#: src/views/members/index.tsx:118
 msgid "Pending"
 msgstr "Ausstehend"

@@ -1033,19 +1035,19 @@ msgstr "Persönliches Projekt"
 msgid "Planning"
 msgstr "Planung"

-#: src/components/AuthForm.tsx:305
+#: src/components/AuthForm.tsx:306
 msgid "Please enter a valid email address"
 msgstr "Bitte gib eine gültige E-Mail-Adresse ein"

-#: src/components/AuthForm.tsx:293
+#: src/components/AuthForm.tsx:294
 msgid "Please enter a valid name"
 msgstr "Bitte gib einen gültigen Namen ein"

-#: src/components/AuthForm.tsx:318
+#: src/components/AuthForm.tsx:319
 msgid "Please enter a valid password"
 msgstr "Bitte gib ein gültiges Passwort ein"

-#: src/views/settings/components/Avatar.tsx:55
+#: src/views/settings/components/Avatar.tsx:57
 msgid "Please select a file to upload."
 msgstr "Bitte wähle eine Datei zum Hochladen aus."

@@ -1055,10 +1057,10 @@ msgstr "Bitte wähle eine Datei zum Hochladen aus."
 #: src/views/settings/components/UpdateDisplayNameForm.tsx:55
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:46
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:40
-#: src/views/settings/components/Avatar.tsx:38
-#: src/views/settings/components/Avatar.tsx:96
+#: src/views/settings/components/Avatar.tsx:40
+#: src/views/settings/components/Avatar.tsx:98
 #: src/views/members/components/DeleteMemberConfirmation.tsx:28
-#: src/views/card/index.tsx:158
+#: src/views/card/index.tsx:159
 #: src/views/card/components/NewCommentForm.tsx:31
 #: src/views/card/components/MemberSelector.tsx:80
 #: src/views/card/components/ListSelector.tsx:53
@@ -1067,14 +1069,14 @@ msgstr "Bitte wähle eine Datei zum Hochladen aus."
 #: src/views/card/components/DeleteCardConfirmation.tsx:52
 #: src/views/card/components/Comment.tsx:62
 #: src/views/boards/components/ImportBoardsForm.tsx:205
-#: src/views/board/index.tsx:134
-#: src/views/board/index.tsx:190
+#: src/views/board/index.tsx:135
+#: src/views/board/index.tsx:191
 #: src/views/board/components/VisibilityButton.tsx:53
 #: src/views/board/components/UpdateBoardSlugForm.tsx:72
 #: src/views/board/components/NewListForm.tsx:78
 #: src/views/board/components/NewCardForm.tsx:128
 #: src/components/NewWorkspaceForm.tsx:41
-#: src/components/FeedbackButton.tsx:46
+#: src/components/FeedbackModal.tsx:41
 msgid "Please try again later, or contact customer support."
 msgstr "Bitte versuche es später noch einmal oder kontaktiere den Kundensupport."

@@ -1096,11 +1098,11 @@ msgstr "Datenschutzrichtlinie"
 msgid "Private"
 msgstr "Privat"

-#: src/views/settings/components/Avatar.tsx:24
+#: src/views/settings/components/Avatar.tsx:26
 msgid "Profile image updated"
 msgstr "Profilbild aktualisiert"

-#: src/views/settings/index.tsx:143
+#: src/views/settings/index.tsx:144
 msgid "Profile picture"
 msgstr "Profilbild"

@@ -1136,7 +1138,7 @@ msgstr "Remote"
 msgid "Remove"
 msgstr "Entfernen"

-#: src/views/members/index.tsx:131
+#: src/views/members/index.tsx:132
 msgid "Remove member"
 msgstr "Mitglied entfernen"

@@ -1177,7 +1179,7 @@ msgstr "Widerrufen"
 msgid "Roadmap"
 msgstr "Roadmap"

-#: src/views/members/index.tsx:190
+#: src/views/members/index.tsx:191
 msgid "Role"
 msgstr "Rolle"

@@ -1217,21 +1219,21 @@ msgstr "Selbst hosten mit Github"
 msgid "self-assigned the card"
 msgstr "hat sich selbst die Karte zugewiesen"

-#: src/components/FeedbackButton.tsx:137
-msgid "Send"
-msgstr "Senden"
+#: src/components/FeedbackModal.tsx:116
+msgid "Send feedback"
+msgstr "Feedback senden"

 #: src/views/boards/components/TemplateBoards.tsx:69
 msgid "Senior"
 msgstr "Senior"

-#: src/views/settings/index.tsx:137
-#: src/components/SideNavigation.tsx:49
+#: src/views/settings/index.tsx:138
+#: src/components/SideNavigation.tsx:78
 msgid "Settings"
 msgstr "Einstellungen"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/settings/index.tsx:133
+#: src/views/settings/index.tsx:134
 msgid "Settings | {0}"
 msgstr "Einstellungen | {0}"

@@ -1253,7 +1255,7 @@ msgstr "Registrierung deaktiviert"
 msgid "Sign up is currently disabled. Please try again later."
 msgstr "Die Registrierung ist derzeit deaktiviert. Bitte versuche es später erneut."

-#: src/components/AuthForm.tsx:334
+#: src/components/AuthForm.tsx:335
 msgid "Sign up with "
 msgstr "Registrieren mit "

@@ -1282,11 +1284,15 @@ msgstr "Stern auf Github"
 msgid "Success"
 msgstr "Erfolg"

+#: src/components/UserMenu.tsx:180
+msgid "Support"
+msgstr "Support"
+
 #: src/views/home/components/Pricing.tsx:57
 msgid "Support the development of the project"
 msgstr "Unterstütze die Entwicklung des Projekts"

-#: src/components/UserMenu.tsx:98
+#: src/components/UserMenu.tsx:139
 msgid "System"
 msgstr "System"

@@ -1302,7 +1308,7 @@ msgstr "Vorlagen"
 msgid "Terms of service"
 msgstr "Nutzungsbedingungen"

-#: src/components/FeedbackButton.tsx:39
+#: src/components/FeedbackModal.tsx:34
 msgid "Thank you for your feedback!"
 msgstr "Vielen Dank für dein Feedback!"

@@ -1319,7 +1325,7 @@ msgstr "Die open source <0/> alternative zu Trello"
 msgid "The visibility of your board has been set to {0}."
 msgstr "Die Sichtbarkeit deines Boards wurde auf {0} gesetzt."

-#: src/components/UserMenu.tsx:85
+#: src/components/UserMenu.tsx:126
 msgid "Theme"
 msgstr "Design"

@@ -1361,7 +1367,7 @@ msgstr "Menü umschalten"
 msgid "Track all card changes with detailed activity history."
 msgstr "Verfolge alle kartenänderungen mit detaillierter aktivitätshistorie."

-#: src/views/settings/index.tsx:91
+#: src/views/settings/index.tsx:92
 msgid "Trello disconnected"
 msgstr "Trello getrennt"

@@ -1401,7 +1407,7 @@ msgstr "Kommentar konnte nicht gelöscht werden"
 msgid "Unable to remove member"
 msgstr "Mitglied konnte nicht entfernt werden"

-#: src/components/FeedbackButton.tsx:45
+#: src/components/FeedbackModal.tsx:40
 msgid "Unable to send feedback"
 msgstr "Feedback konnte nicht gesendet werden"

@@ -1413,8 +1419,8 @@ msgstr "Board-URL kann nicht aktualisiert werden"
 msgid "Unable to update board visibility"
 msgstr "Board-Sichtbarkeit konnte nicht aktualisiert werden"

-#: src/views/card/index.tsx:157
-#: src/views/board/index.tsx:189
+#: src/views/card/index.tsx:158
+#: src/views/board/index.tsx:190
 msgid "Unable to update card"
 msgstr "Karte konnte nicht aktualisiert werden"

@@ -1427,7 +1433,7 @@ msgid "Unable to update labels"
 msgstr "Labels konnten nicht aktualisiert werden"

 #: src/views/card/components/ListSelector.tsx:52
-#: src/views/board/index.tsx:133
+#: src/views/board/index.tsx:134
 msgid "Unable to update list"
 msgstr "Liste konnte nicht aktualisiert werden"

@@ -1516,7 +1522,7 @@ msgstr "URL muss mindestens 3 Zeichen lang sein"
 msgid "Use template"
 msgstr "Vorlage verwenden"

-#: src/views/members/index.tsx:184
+#: src/views/members/index.tsx:185
 msgid "User"
 msgstr "Benutzer"

@@ -1524,11 +1530,11 @@ msgstr "Benutzer"
 msgid "Video"
 msgstr "Video"

-#: src/views/settings/index.tsx:259
+#: src/views/settings/index.tsx:260
 msgid "View and manage your API keys."
 msgstr "API-Schlüssel anzeigen und verwalten."

-#: src/views/settings/index.tsx:198
+#: src/views/settings/index.tsx:199
 msgid "View and manage your billing and subscription."
 msgstr "Verwalte deine Abrechnung und dein Abonnement."

@@ -1572,7 +1578,7 @@ msgstr "Als Trello 2011 auf den markt kam, beeindruckte es alle mit seiner sorgf
 msgid "Why make an open source Trello?"
 msgstr "Warum ein open source Trello entwickeln?"

-#: src/views/board/index.tsx:240
+#: src/views/board/index.tsx:241
 msgid "Workspace"
 msgstr "Arbeitsbereich"

@@ -1580,7 +1586,7 @@ msgstr "Arbeitsbereich"
 msgid "Workspace deleted"
 msgstr "Workspace gelöscht"

-#: src/views/settings/index.tsx:174
+#: src/views/settings/index.tsx:175
 msgid "Workspace description"
 msgstr "Workspace-Beschreibung"

@@ -1601,7 +1607,7 @@ msgstr "Workspace-Beschreibung aktualisiert"
 msgid "Workspace members"
 msgstr "Workspace-mitglieder"

-#: src/views/settings/index.tsx:155
+#: src/views/settings/index.tsx:156
 #: src/components/NewWorkspaceForm.tsx:80
 msgid "Workspace name"
 msgstr "Name des Workspaces"
@@ -1622,7 +1628,7 @@ msgstr "Workspace-Name aktualisiert"
 msgid "Workspace slug updated"
 msgstr "Workspace-Slug aktualisiert"

-#: src/views/settings/index.tsx:164
+#: src/views/settings/index.tsx:165
 msgid "Workspace URL"
 msgstr "Workspace-URL"

@@ -1670,15 +1676,15 @@ msgstr "Deine Boards wurden importiert."
 msgid "Your display name has been updated."
 msgstr "Dein Anzeigename wurde aktualisiert."

-#: src/views/settings/components/Avatar.tsx:25
+#: src/views/settings/components/Avatar.tsx:27
 msgid "Your profile image has been updated."
 msgstr "Dein Profilbild wurde aktualisiert."

-#: src/views/settings/index.tsx:92
+#: src/views/settings/index.tsx:93
 msgid "Your Trello account has been disconnected."
 msgstr "Dein Trello-Konto wurde getrennt."

-#: src/views/settings/index.tsx:241
+#: src/views/settings/index.tsx:242
 msgid "Your Trello account is connected."
 msgstr "Dein Trello-Konto ist verbunden."

--- a/apps/web/src/locales/de/messages.ts
+++ b/apps/web/src/locales/de/messages.ts
--- a/apps/web/src/locales/en/messages.po
+++ b/apps/web/src/locales/en/messages.po
@@ -17,13 +17,13 @@ msgstr ""
 msgid " (edited)"
 msgstr " (edited)"

-#: src/components/FeedbackButton.tsx:123
+#: src/components/FeedbackModal.tsx:102
 msgid ", or see our"
 msgstr ", or see our"

 #. placeholder {0}: card?.title ?? "Card"
 #. placeholder {1}: board?.name ?? "Board"
-#: src/views/card/index.tsx:188
+#: src/views/card/index.tsx:189
 msgid "{0} | {1}"
 msgstr "{0} | {1}"

@@ -61,7 +61,7 @@ msgid "Account deleted"
 msgstr "Account deleted"

 #: src/views/public/board/CardModal.tsx:104
-#: src/views/card/index.tsx:255
+#: src/views/card/index.tsx:256
 msgid "Activity"
 msgstr "Activity"

@@ -120,11 +120,11 @@ msgstr "All systems operational"
 msgid "Already have an account? <0><1>Sign in</1></0>"
 msgstr "Already have an account? <0><1>Sign in</1></0>"

-#: src/views/settings/index.tsx:99
+#: src/views/settings/index.tsx:100
 msgid "An error occurred while disconnecting your Trello account."
 msgstr "An error occurred while disconnecting your Trello account."

-#: src/views/settings/index.tsx:256
+#: src/views/settings/index.tsx:257
 msgid "API keys"
 msgstr "API keys"

@@ -185,12 +185,12 @@ msgstr "Backlog"
 msgid "Basic Kanban"
 msgstr "Basic Kanban"

-#: src/views/settings/index.tsx:195
+#: src/views/settings/index.tsx:196
 #: src/views/boards/components/TemplateBoards.tsx:55
 msgid "Billing"
 msgstr "Billing"

-#: src/views/settings/index.tsx:205
+#: src/views/settings/index.tsx:206
 msgid "Billing portal"
 msgstr "Billing portal"

@@ -198,7 +198,7 @@ msgstr "Billing portal"
 msgid "Blog Post"
 msgstr "Blog Post"

-#: src/views/board/index.tsx:240
+#: src/views/board/index.tsx:241
 msgid "Board"
 msgstr "Board"

@@ -214,7 +214,7 @@ msgstr "Board name cannot exceed 100 characters"
 msgid "Board name is required"
 msgstr "Board name is required"

-#: src/views/board/index.tsx:266
+#: src/views/board/index.tsx:267
 msgid "Board not found"
 msgstr "Board not found"

@@ -242,13 +242,13 @@ msgstr "Board visibility"
 msgid "Board visibility updated"
 msgstr "Board visibility updated"

-#: src/views/boards/index.tsx:26
-#: src/components/SideNavigation.tsx:39
+#: src/views/boards/index.tsx:27
+#: src/components/SideNavigation.tsx:68
 msgid "Boards"
 msgstr "Boards"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/boards/index.tsx:22
+#: src/views/boards/index.tsx:23
 msgid "Boards | {0}"
 msgstr "Boards | {0}"

@@ -278,7 +278,7 @@ msgstr "Bug Report"
 msgid "Cancel"
 msgstr "Cancel"

-#: src/views/card/index.tsx:233
+#: src/views/card/index.tsx:234
 msgid "Card not found"
 msgstr "Card not found"

@@ -286,7 +286,7 @@ msgstr "Card not found"
 msgid "Card title"
 msgstr "Card title"

-#: src/views/settings/index.tsx:187
+#: src/views/settings/index.tsx:188
 msgid "Change the language of the app."
 msgstr "Change the language of the app."

@@ -336,7 +336,7 @@ msgstr "Complete control and ownership:"
 msgid "Confirm URL change"
 msgstr "Confirm URL change"

-#: src/views/settings/index.tsx:232
+#: src/views/settings/index.tsx:233
 #: src/views/boards/components/ImportBoardsForm.tsx:157
 msgid "Connect Trello"
 msgstr "Connect Trello"
@@ -345,7 +345,7 @@ msgstr "Connect Trello"
 msgid "Connect your favorite tools to streamline your workflow."
 msgstr "Connect your favorite tools to streamline your workflow."

-#: src/views/settings/index.tsx:219
+#: src/views/settings/index.tsx:220
 msgid "Connect your Trello account to import boards."
 msgstr "Connect your Trello account to import boards."

@@ -353,7 +353,7 @@ msgstr "Connect your Trello account to import boards."
 msgid "Contact"
 msgstr "Contact"

-#: src/components/FeedbackButton.tsx:121
+#: src/components/FeedbackModal.tsx:100
 msgid "Contact us"
 msgstr "Contact us"

@@ -361,12 +361,12 @@ msgstr "Contact us"
 msgid "Content Creation"
 msgstr "Content Creation"

-#: src/components/AuthForm.tsx:334
+#: src/components/AuthForm.tsx:335
 msgid "Continue with "
 msgstr "Continue with "

 #. placeholder {0}: provider.name
-#: src/components/AuthForm.tsx:268
+#: src/components/AuthForm.tsx:269
 msgid "Continue with {0}"
 msgstr "Continue with {0}"

@@ -417,11 +417,11 @@ msgstr "Create new key"
 msgid "Create new label"
 msgstr "Create new label"

-#: src/views/board/index.tsx:334
+#: src/views/board/index.tsx:335
 msgid "Create new list"
 msgstr "Create new list"

-#: src/components/WorkspaceMenu.tsx:85
+#: src/components/WorkspaceMenu.tsx:116
 #: src/components/NewWorkspaceForm.tsx:93
 msgid "Create workspace"
 msgstr "Create workspace"
@@ -446,7 +446,7 @@ msgstr "Custom URLs are a premium feature. You'll be directed to upgrade your ac
 msgid "Customer Support"
 msgstr "Customer Support"

-#: src/components/UserMenu.tsx:112
+#: src/components/UserMenu.tsx:153
 msgid "Dark"
 msgstr "Dark"

@@ -456,8 +456,8 @@ msgstr "Dark"
 msgid "Delete"
 msgstr "Delete"

-#: src/views/settings/index.tsx:287
-#: src/views/settings/index.tsx:297
+#: src/views/settings/index.tsx:288
+#: src/views/settings/index.tsx:298
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:96
 msgid "Delete account"
 msgstr "Delete account"
@@ -478,8 +478,8 @@ msgstr "Delete comment"
 msgid "Delete list"
 msgstr "Delete list"

-#: src/views/settings/index.tsx:269
-#: src/views/settings/index.tsx:280
+#: src/views/settings/index.tsx:270
+#: src/views/settings/index.tsx:281
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:106
 msgid "Delete workspace"
 msgstr "Delete workspace"
@@ -488,7 +488,7 @@ msgstr "Delete workspace"
 msgid "Design"
 msgstr "Design"

-#: src/views/settings/index.tsx:247
+#: src/views/settings/index.tsx:248
 msgid "Disconnect Trello"
 msgstr "Disconnect Trello"

@@ -496,7 +496,7 @@ msgstr "Disconnect Trello"
 msgid "Discuss and collaborate on cards."
 msgstr "Discuss and collaborate on cards."

-#: src/views/settings/index.tsx:148
+#: src/views/settings/index.tsx:149
 msgid "Display name"
 msgstr "Display name"

@@ -516,7 +516,7 @@ msgstr "Display name updated"
 msgid "Do you offer a free plan?"
 msgstr "Do you offer a free plan?"

-#: src/components/FeedbackButton.tsx:130
+#: src/components/FeedbackModal.tsx:109
 msgid "docs"
 msgstr "docs"

@@ -526,6 +526,7 @@ msgstr "Docs"

 #: src/views/home/components/Footer.tsx:77
 #: src/views/boards/components/TemplateBoards.tsx:23
+#: src/components/UserMenu.tsx:191
 msgid "Documentation"
 msgstr "Documentation"

@@ -561,7 +562,7 @@ msgstr "Edit workspace URL"
 msgid "Editing"
 msgstr "Editing"

-#: src/components/AuthForm.tsx:336
+#: src/components/AuthForm.tsx:337
 msgid "email"
 msgstr "email"

@@ -573,15 +574,15 @@ msgstr "Email"
 msgid "Enhancement"
 msgstr "Enhancement"

-#: src/components/AuthForm.tsx:301
+#: src/components/AuthForm.tsx:302
 msgid "Enter your email address"
 msgstr "Enter your email address"

-#: src/components/AuthForm.tsx:289
+#: src/components/AuthForm.tsx:290
 msgid "Enter your name"
 msgstr "Enter your name"

-#: src/components/AuthForm.tsx:314
+#: src/components/AuthForm.tsx:315
 msgid "Enter your password"
 msgstr "Enter your password"

@@ -593,7 +594,7 @@ msgstr "Error deleting account"
 msgid "Error deleting workspace"
 msgstr "Error deleting workspace"

-#: src/views/settings/index.tsx:98
+#: src/views/settings/index.tsx:99
 msgid "Error disconnecting Trello"
 msgstr "Error disconnecting Trello"

@@ -601,7 +602,7 @@ msgstr "Error disconnecting Trello"
 msgid "Error updating display name"
 msgstr "Error updating display name"

-#: src/views/settings/components/Avatar.tsx:37
+#: src/views/settings/components/Avatar.tsx:39
 msgid "Error updating profile image"
 msgstr "Error updating profile image"

@@ -617,8 +618,8 @@ msgstr "Error updating workspace name"
 msgid "Error updating workspace URL"
 msgstr "Error updating workspace URL"

-#: src/views/settings/components/Avatar.tsx:54
-#: src/views/settings/components/Avatar.tsx:95
+#: src/views/settings/components/Avatar.tsx:56
+#: src/views/settings/components/Avatar.tsx:97
 msgid "Error uploading profile image"
 msgstr "Error uploading profile image"

@@ -658,11 +659,12 @@ msgstr "Feature Request"
 msgid "Features"
 msgstr "Features"

-#: src/components/FeedbackButton.tsx:78
+#: src/components/UserMenu.tsx:199
+#: src/components/FeedbackModal.tsx:59
 msgid "Feedback"
 msgstr "Feedback"

-#: src/components/FeedbackButton.tsx:38
+#: src/components/FeedbackModal.tsx:33
 msgid "Feedback sent"
 msgstr "Feedback sent"

@@ -711,7 +713,7 @@ msgstr "Get Started"
 msgid "Get started by creating a new board"
 msgstr "Get started by creating a new board"

-#: src/views/board/index.tsx:326
+#: src/views/board/index.tsx:327
 msgid "Get started by creating a new list"
 msgstr "Get started by creating a new list"

@@ -784,7 +786,7 @@ msgstr "I acknowledge that all of the workspace data will be permanently deleted
 msgid "Ideas"
 msgstr "Ideas"

-#: src/components/FeedbackButton.tsx:98
+#: src/components/FeedbackModal.tsx:75
 msgid "Ideas to improve this page..."
 msgstr "Ideas to improve this page..."

@@ -792,7 +794,7 @@ msgstr "Ideas to improve this page..."
 #~ msgid "Ideas, Research, Planning, Execution, Review, Next Steps, Complete"
 #~ msgstr "Ideas, Research, Planning, Execution, Review, Next Steps, Complete"

-#: src/views/boards/index.tsx:37
+#: src/views/boards/index.tsx:38
 msgid "Import"
 msgstr "Import"

@@ -838,7 +840,7 @@ msgstr "Integrations"
 msgid "Interviewing"
 msgstr "Interviewing"

-#: src/views/members/index.tsx:168
+#: src/views/members/index.tsx:169
 msgid "Invite"
 msgstr "Invite"

@@ -864,7 +866,7 @@ msgstr "Kanban reimagined"
 msgid "Keep in mind that this action is irreversible."
 msgstr "Keep in mind that this action is irreversible."

-#: src/views/card/index.tsx:112
+#: src/views/card/index.tsx:113
 #: src/views/board/components/NewCardForm.tsx:331
 #: src/views/board/components/Filters.tsx:101
 msgid "Labels"
@@ -874,7 +876,7 @@ msgstr "Labels"
 msgid "Labels & Filters"
 msgstr "Labels & Filters"

-#: src/views/settings/index.tsx:184
+#: src/views/settings/index.tsx:185
 msgid "Language"
 msgstr "Language"

@@ -890,7 +892,7 @@ msgstr "Legal"
 msgid "License"
 msgstr "License"

-#: src/components/UserMenu.tsx:126
+#: src/components/UserMenu.tsx:167
 msgid "Light"
 msgstr "Light"

@@ -898,7 +900,7 @@ msgstr "Light"
 msgid "Link copied"
 msgstr "Link copied"

-#: src/views/card/index.tsx:104
+#: src/views/card/index.tsx:105
 msgid "List"
 msgstr "List"

@@ -910,7 +912,7 @@ msgstr "List name"
 msgid "Login | kan.bn"
 msgstr "Login | kan.bn"

-#: src/components/UserMenu.tsx:136
+#: src/components/UserMenu.tsx:209
 msgid "Logout"
 msgstr "Logout"

@@ -922,7 +924,7 @@ msgstr "Long-term"
 msgid "Low Priority"
 msgstr "Low Priority"

-#: src/components/AuthForm.tsx:337
+#: src/components/AuthForm.tsx:338
 msgid "magic link"
 msgstr "magic link"

@@ -930,16 +932,16 @@ msgstr "magic link"
 msgid "Medium Priority"
 msgstr "Medium Priority"

-#: src/views/members/index.tsx:160
-#: src/views/card/index.tsx:120
+#: src/views/members/index.tsx:161
+#: src/views/card/index.tsx:121
 #: src/views/board/components/NewCardForm.tsx:290
 #: src/views/board/components/Filters.tsx:93
-#: src/components/SideNavigation.tsx:44
+#: src/components/SideNavigation.tsx:73
 msgid "Members"
 msgstr "Members"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/members/index.tsx:156
+#: src/views/members/index.tsx:157
 msgid "Members | {0}"
 msgstr "Members | {0}"

@@ -960,11 +962,11 @@ msgstr "moved the card to another list"
 msgid "Name"
 msgstr "Name"

-#: src/components/FeedbackButton.tsx:116
+#: src/components/FeedbackModal.tsx:95
 msgid "Need help?"
 msgstr "Need help?"

-#: src/views/boards/index.tsx:47
+#: src/views/boards/index.tsx:48
 msgid "New"
 msgstr "New"

@@ -984,7 +986,7 @@ msgstr "New import"
 msgid "New label"
 msgstr "New label"

-#: src/views/board/index.tsx:303
+#: src/views/board/index.tsx:304
 #: src/views/board/components/NewListForm.tsx:112
 msgid "New list"
 msgstr "New list"
@@ -1021,7 +1023,7 @@ msgstr "No boards found"
 msgid "No credit card required"
 msgstr "No credit card required"

-#: src/views/board/index.tsx:323
+#: src/views/board/index.tsx:324
 msgid "No lists"
 msgstr "No lists"

@@ -1033,15 +1035,15 @@ msgstr "Offer"
 msgid "Onboarding"
 msgstr "Onboarding"

-#: src/views/settings/index.tsx:290
+#: src/views/settings/index.tsx:291
 msgid "Once you delete your account, there is no going back. This action cannot be undone."
 msgstr "Once you delete your account, there is no going back. This action cannot be undone."

-#: src/views/settings/index.tsx:272
+#: src/views/settings/index.tsx:273
 msgid "Once you delete your workspace, there is no going back. This action cannot be undone."
 msgstr "Once you delete your workspace, there is no going back. This action cannot be undone."

-#: src/components/AuthForm.tsx:279
+#: src/components/AuthForm.tsx:280
 msgid "or"
 msgstr "or"

@@ -1061,7 +1063,7 @@ msgstr "Part-time"
 msgid "Payment frequency"
 msgstr "Payment frequency"

-#: src/views/members/index.tsx:117
+#: src/views/members/index.tsx:118
 msgid "Pending"
 msgstr "Pending"

@@ -1078,19 +1080,19 @@ msgstr "Personal Project"
 msgid "Planning"
 msgstr "Planning"

-#: src/components/AuthForm.tsx:305
+#: src/components/AuthForm.tsx:306
 msgid "Please enter a valid email address"
 msgstr "Please enter a valid email address"

-#: src/components/AuthForm.tsx:293
+#: src/components/AuthForm.tsx:294
 msgid "Please enter a valid name"
 msgstr "Please enter a valid name"

-#: src/components/AuthForm.tsx:318
+#: src/components/AuthForm.tsx:319
 msgid "Please enter a valid password"
 msgstr "Please enter a valid password"

-#: src/views/settings/components/Avatar.tsx:55
+#: src/views/settings/components/Avatar.tsx:57
 msgid "Please select a file to upload."
 msgstr "Please select a file to upload."

@@ -1100,10 +1102,10 @@ msgstr "Please select a file to upload."
 #: src/views/settings/components/UpdateDisplayNameForm.tsx:55
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:46
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:40
-#: src/views/settings/components/Avatar.tsx:38
-#: src/views/settings/components/Avatar.tsx:96
+#: src/views/settings/components/Avatar.tsx:40
+#: src/views/settings/components/Avatar.tsx:98
 #: src/views/members/components/DeleteMemberConfirmation.tsx:28
-#: src/views/card/index.tsx:158
+#: src/views/card/index.tsx:159
 #: src/views/card/components/NewCommentForm.tsx:31
 #: src/views/card/components/MemberSelector.tsx:80
 #: src/views/card/components/ListSelector.tsx:53
@@ -1112,14 +1114,14 @@ msgstr "Please select a file to upload."
 #: src/views/card/components/DeleteCardConfirmation.tsx:52
 #: src/views/card/components/Comment.tsx:62
 #: src/views/boards/components/ImportBoardsForm.tsx:205
-#: src/views/board/index.tsx:134
-#: src/views/board/index.tsx:190
+#: src/views/board/index.tsx:135
+#: src/views/board/index.tsx:191
 #: src/views/board/components/VisibilityButton.tsx:53
 #: src/views/board/components/UpdateBoardSlugForm.tsx:72
 #: src/views/board/components/NewListForm.tsx:78
 #: src/views/board/components/NewCardForm.tsx:128
 #: src/components/NewWorkspaceForm.tsx:41
-#: src/components/FeedbackButton.tsx:46
+#: src/components/FeedbackModal.tsx:41
 msgid "Please try again later, or contact customer support."
 msgstr "Please try again later, or contact customer support."

@@ -1141,11 +1143,11 @@ msgstr "Privacy policy"
 msgid "Private"
 msgstr "Private"

-#: src/views/settings/components/Avatar.tsx:24
+#: src/views/settings/components/Avatar.tsx:26
 msgid "Profile image updated"
 msgstr "Profile image updated"

-#: src/views/settings/index.tsx:143
+#: src/views/settings/index.tsx:144
 msgid "Profile picture"
 msgstr "Profile picture"

@@ -1181,7 +1183,7 @@ msgstr "Remote"
 msgid "Remove"
 msgstr "Remove"

-#: src/views/members/index.tsx:131
+#: src/views/members/index.tsx:132
 msgid "Remove member"
 msgstr "Remove member"

@@ -1222,7 +1224,7 @@ msgstr "Revoke"
 msgid "Roadmap"
 msgstr "Roadmap"

-#: src/views/members/index.tsx:190
+#: src/views/members/index.tsx:191
 msgid "Role"
 msgstr "Role"

@@ -1263,20 +1265,24 @@ msgid "self-assigned the card"
 msgstr "self-assigned the card"

 #: src/components/FeedbackButton.tsx:137
-msgid "Send"
-msgstr "Send"
+#~ msgid "Send"
+#~ msgstr "Send"
+
+#: src/components/FeedbackModal.tsx:116
+msgid "Send feedback"
+msgstr "Send feedback"

 #: src/views/boards/components/TemplateBoards.tsx:69
 msgid "Senior"
 msgstr "Senior"

-#: src/views/settings/index.tsx:137
-#: src/components/SideNavigation.tsx:49
+#: src/views/settings/index.tsx:138
+#: src/components/SideNavigation.tsx:78
 msgid "Settings"
 msgstr "Settings"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/settings/index.tsx:133
+#: src/views/settings/index.tsx:134
 msgid "Settings | {0}"
 msgstr "Settings | {0}"

@@ -1298,7 +1304,7 @@ msgstr "Sign up disabled"
 msgid "Sign up is currently disabled. Please try again later."
 msgstr "Sign up is currently disabled. Please try again later."

-#: src/components/AuthForm.tsx:334
+#: src/components/AuthForm.tsx:335
 msgid "Sign up with "
 msgstr "Sign up with "

@@ -1327,11 +1333,15 @@ msgstr "Star on Github"
 msgid "Success"
 msgstr "Success"

+#: src/components/UserMenu.tsx:180
+msgid "Support"
+msgstr "Support"
+
 #: src/views/home/components/Pricing.tsx:57
 msgid "Support the development of the project"
 msgstr "Support the development of the project"

-#: src/components/UserMenu.tsx:98
+#: src/components/UserMenu.tsx:139
 msgid "System"
 msgstr "System"

@@ -1347,7 +1357,7 @@ msgstr "Templates"
 msgid "Terms of service"
 msgstr "Terms of service"

-#: src/components/FeedbackButton.tsx:39
+#: src/components/FeedbackModal.tsx:34
 msgid "Thank you for your feedback!"
 msgstr "Thank you for your feedback!"

@@ -1364,7 +1374,7 @@ msgstr "The open source <0/> alternative to Trello"
 msgid "The visibility of your board has been set to {0}."
 msgstr "The visibility of your board has been set to {0}."

-#: src/components/UserMenu.tsx:85
+#: src/components/UserMenu.tsx:126
 msgid "Theme"
 msgstr "Theme"

@@ -1410,7 +1420,7 @@ msgstr "Toggle menu"
 msgid "Track all card changes with detailed activity history."
 msgstr "Track all card changes with detailed activity history."

-#: src/views/settings/index.tsx:91
+#: src/views/settings/index.tsx:92
 msgid "Trello disconnected"
 msgstr "Trello disconnected"

@@ -1450,7 +1460,7 @@ msgstr "Unable to delete comment"
 msgid "Unable to remove member"
 msgstr "Unable to remove member"

-#: src/components/FeedbackButton.tsx:45
+#: src/components/FeedbackModal.tsx:40
 msgid "Unable to send feedback"
 msgstr "Unable to send feedback"

@@ -1462,8 +1472,8 @@ msgstr "Unable to update board URL"
 msgid "Unable to update board visibility"
 msgstr "Unable to update board visibility"

-#: src/views/card/index.tsx:157
-#: src/views/board/index.tsx:189
+#: src/views/card/index.tsx:158
+#: src/views/board/index.tsx:190
 msgid "Unable to update card"
 msgstr "Unable to update card"

@@ -1476,7 +1486,7 @@ msgid "Unable to update labels"
 msgstr "Unable to update labels"

 #: src/views/card/components/ListSelector.tsx:52
-#: src/views/board/index.tsx:133
+#: src/views/board/index.tsx:134
 msgid "Unable to update list"
 msgstr "Unable to update list"

@@ -1565,7 +1575,7 @@ msgstr "URL must be at least 3 characters long"
 msgid "Use template"
 msgstr "Use template"

-#: src/views/members/index.tsx:184
+#: src/views/members/index.tsx:185
 msgid "User"
 msgstr "User"

@@ -1573,11 +1583,11 @@ msgstr "User"
 msgid "Video"
 msgstr "Video"

-#: src/views/settings/index.tsx:259
+#: src/views/settings/index.tsx:260
 msgid "View and manage your API keys."
 msgstr "View and manage your API keys."

-#: src/views/settings/index.tsx:198
+#: src/views/settings/index.tsx:199
 msgid "View and manage your billing and subscription."
 msgstr "View and manage your billing and subscription."

@@ -1625,7 +1635,7 @@ msgstr "When Trello launched in 2011, it blew everyone away with its carefully d
 msgid "Why make an open source Trello?"
 msgstr "Why make an open source Trello?"

-#: src/views/board/index.tsx:240
+#: src/views/board/index.tsx:241
 msgid "Workspace"
 msgstr "Workspace"

@@ -1633,7 +1643,7 @@ msgstr "Workspace"
 msgid "Workspace deleted"
 msgstr "Workspace deleted"

-#: src/views/settings/index.tsx:174
+#: src/views/settings/index.tsx:175
 msgid "Workspace description"
 msgstr "Workspace description"

@@ -1654,7 +1664,7 @@ msgstr "Workspace description updated"
 msgid "Workspace members"
 msgstr "Workspace members"

-#: src/views/settings/index.tsx:155
+#: src/views/settings/index.tsx:156
 #: src/components/NewWorkspaceForm.tsx:80
 msgid "Workspace name"
 msgstr "Workspace name"
@@ -1675,7 +1685,7 @@ msgstr "Workspace name updated"
 msgid "Workspace slug updated"
 msgstr "Workspace slug updated"

-#: src/views/settings/index.tsx:164
+#: src/views/settings/index.tsx:165
 msgid "Workspace URL"
 msgstr "Workspace URL"

@@ -1723,15 +1733,15 @@ msgstr "Your boards have been imported."
 msgid "Your display name has been updated."
 msgstr "Your display name has been updated."

-#: src/views/settings/components/Avatar.tsx:25
+#: src/views/settings/components/Avatar.tsx:27
 msgid "Your profile image has been updated."
 msgstr "Your profile image has been updated."

-#: src/views/settings/index.tsx:92
+#: src/views/settings/index.tsx:93
 msgid "Your Trello account has been disconnected."
 msgstr "Your Trello account has been disconnected."

-#: src/views/settings/index.tsx:241
+#: src/views/settings/index.tsx:242
 msgid "Your Trello account is connected."
 msgstr "Your Trello account is connected."

--- a/apps/web/src/locales/en/messages.ts
+++ b/apps/web/src/locales/en/messages.ts
--- a/apps/web/src/locales/es/messages.po
+++ b/apps/web/src/locales/es/messages.po
@@ -17,13 +17,13 @@ msgstr ""
 msgid " (edited)"
 msgstr " (editado)"

-#: src/components/FeedbackButton.tsx:123
+#: src/components/FeedbackModal.tsx:102
 msgid ", or see our"
 msgstr ", o consulta nuestra"

 #. placeholder {0}: card?.title ?? "Card"
 #. placeholder {1}: board?.name ?? "Board"
-#: src/views/card/index.tsx:188
+#: src/views/card/index.tsx:189
 msgid "{0} | {1}"
 msgstr "{0} | {1}"

@@ -49,7 +49,7 @@ msgid "Account deleted"
 msgstr "Cuenta eliminada"

 #: src/views/public/board/CardModal.tsx:104
-#: src/views/card/index.tsx:255
+#: src/views/card/index.tsx:256
 msgid "Activity"
 msgstr "Actividad"

@@ -108,11 +108,11 @@ msgstr "Todos los sistemas operativos"
 msgid "Already have an account? <0><1>Sign in</1></0>"
 msgstr "¿Ya tienes una cuenta? <0><1>Iniciar sesión</1></0>"

-#: src/views/settings/index.tsx:99
+#: src/views/settings/index.tsx:100
 msgid "An error occurred while disconnecting your Trello account."
 msgstr "Ocurrió un error al desconectar tu cuenta de Trello."

-#: src/views/settings/index.tsx:256
+#: src/views/settings/index.tsx:257
 msgid "API keys"
 msgstr "Claves API"

@@ -165,12 +165,12 @@ msgstr "Pendientes"
 msgid "Basic Kanban"
 msgstr "Kanban básico"

-#: src/views/settings/index.tsx:195
+#: src/views/settings/index.tsx:196
 #: src/views/boards/components/TemplateBoards.tsx:55
 msgid "Billing"
 msgstr "Facturación"

-#: src/views/settings/index.tsx:205
+#: src/views/settings/index.tsx:206
 msgid "Billing portal"
 msgstr "Portal de facturación"

@@ -178,7 +178,7 @@ msgstr "Portal de facturación"
 msgid "Blog Post"
 msgstr "Entrada de blog"

-#: src/views/board/index.tsx:240
+#: src/views/board/index.tsx:241
 msgid "Board"
 msgstr "Tablero"

@@ -190,7 +190,7 @@ msgstr "El nombre del tablero no puede exceder los 100 caracteres"
 msgid "Board name is required"
 msgstr "El nombre del tablero es obligatorio"

-#: src/views/board/index.tsx:266
+#: src/views/board/index.tsx:267
 msgid "Board not found"
 msgstr "Tablero no encontrado"

@@ -218,13 +218,13 @@ msgstr "Visibilidad del tablero"
 msgid "Board visibility updated"
 msgstr "Visibilidad del tablero actualizada"

-#: src/views/boards/index.tsx:26
-#: src/components/SideNavigation.tsx:39
+#: src/views/boards/index.tsx:27
+#: src/components/SideNavigation.tsx:68
 msgid "Boards"
 msgstr "Tableros"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/boards/index.tsx:22
+#: src/views/boards/index.tsx:23
 msgid "Boards | {0}"
 msgstr "Tableros | {0}"

@@ -250,7 +250,7 @@ msgstr "Informe de error"
 msgid "Cancel"
 msgstr "Cancelar"

-#: src/views/card/index.tsx:233
+#: src/views/card/index.tsx:234
 msgid "Card not found"
 msgstr "Tarjeta no encontrada"

@@ -258,7 +258,7 @@ msgstr "Tarjeta no encontrada"
 msgid "Card title"
 msgstr "Título de la tarjeta"

-#: src/views/settings/index.tsx:187
+#: src/views/settings/index.tsx:188
 msgid "Change the language of the app."
 msgstr "Cambiar el idioma de la aplicación."

@@ -308,7 +308,7 @@ msgstr "Control y propiedad completos:"
 msgid "Confirm URL change"
 msgstr "Confirmar cambio de URL"

-#: src/views/settings/index.tsx:232
+#: src/views/settings/index.tsx:233
 #: src/views/boards/components/ImportBoardsForm.tsx:157
 msgid "Connect Trello"
 msgstr "Conectar Trello"
@@ -317,7 +317,7 @@ msgstr "Conectar Trello"
 msgid "Connect your favorite tools to streamline your workflow."
 msgstr "Conecta tus herramientas favoritas para agilizar tu flujo de trabajo."

-#: src/views/settings/index.tsx:219
+#: src/views/settings/index.tsx:220
 msgid "Connect your Trello account to import boards."
 msgstr "Conecta tu cuenta de Trello para importar tableros."

@@ -325,7 +325,7 @@ msgstr "Conecta tu cuenta de Trello para importar tableros."
 msgid "Contact"
 msgstr "Contacto"

-#: src/components/FeedbackButton.tsx:121
+#: src/components/FeedbackModal.tsx:100
 msgid "Contact us"
 msgstr "Contáctanos"

@@ -333,12 +333,12 @@ msgstr "Contáctanos"
 msgid "Content Creation"
 msgstr "Creación de contenido"

-#: src/components/AuthForm.tsx:334
+#: src/components/AuthForm.tsx:335
 msgid "Continue with "
 msgstr "Continuar con "

 #. placeholder {0}: provider.name
-#: src/components/AuthForm.tsx:268
+#: src/components/AuthForm.tsx:269
 msgid "Continue with {0}"
 msgstr "Continuar con {0}"

@@ -381,11 +381,11 @@ msgstr "Crear nueva clave"
 msgid "Create new label"
 msgstr "Crear nueva etiqueta"

-#: src/views/board/index.tsx:334
+#: src/views/board/index.tsx:335
 msgid "Create new list"
 msgstr "Crear nueva lista"

-#: src/components/WorkspaceMenu.tsx:85
+#: src/components/WorkspaceMenu.tsx:116
 #: src/components/NewWorkspaceForm.tsx:93
 msgid "Create workspace"
 msgstr "Crear espacio de trabajo"
@@ -410,7 +410,7 @@ msgstr "Las URL personalizadas son una función premium. Serás dirigido a actua
 msgid "Customer Support"
 msgstr "Atención al cliente"

-#: src/components/UserMenu.tsx:112
+#: src/components/UserMenu.tsx:153
 msgid "Dark"
 msgstr "Oscuro"

@@ -420,8 +420,8 @@ msgstr "Oscuro"
 msgid "Delete"
 msgstr "Eliminar"

-#: src/views/settings/index.tsx:287
-#: src/views/settings/index.tsx:297
+#: src/views/settings/index.tsx:288
+#: src/views/settings/index.tsx:298
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:96
 msgid "Delete account"
 msgstr "Eliminar cuenta"
@@ -442,8 +442,8 @@ msgstr "Eliminar comentario"
 msgid "Delete list"
 msgstr "Eliminar lista"

-#: src/views/settings/index.tsx:269
-#: src/views/settings/index.tsx:280
+#: src/views/settings/index.tsx:270
+#: src/views/settings/index.tsx:281
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:106
 msgid "Delete workspace"
 msgstr "Eliminar espacio de trabajo"
@@ -452,7 +452,7 @@ msgstr "Eliminar espacio de trabajo"
 msgid "Design"
 msgstr "Diseño"

-#: src/views/settings/index.tsx:247
+#: src/views/settings/index.tsx:248
 msgid "Disconnect Trello"
 msgstr "Desconectar Trello"

@@ -460,7 +460,7 @@ msgstr "Desconectar Trello"
 msgid "Discuss and collaborate on cards."
 msgstr "Discute y colabora en las tarjetas."

-#: src/views/settings/index.tsx:148
+#: src/views/settings/index.tsx:149
 msgid "Display name"
 msgstr "Nombre visible"

@@ -480,7 +480,7 @@ msgstr "Nombre visible actualizado"
 msgid "Do you offer a free plan?"
 msgstr "¿Ofrecen un plan gratuito?"

-#: src/components/FeedbackButton.tsx:130
+#: src/components/FeedbackModal.tsx:109
 msgid "docs"
 msgstr "documentos"

@@ -490,6 +490,7 @@ msgstr "Documentos"

 #: src/views/home/components/Footer.tsx:77
 #: src/views/boards/components/TemplateBoards.tsx:23
+#: src/components/UserMenu.tsx:191
 msgid "Documentation"
 msgstr "Documentación"

@@ -525,7 +526,7 @@ msgstr "Editar URL del espacio de trabajo"
 msgid "Editing"
 msgstr "Editando"

-#: src/components/AuthForm.tsx:336
+#: src/components/AuthForm.tsx:337
 msgid "email"
 msgstr "correo electrónico"

@@ -537,15 +538,15 @@ msgstr "Correo electrónico"
 msgid "Enhancement"
 msgstr "Mejora"

-#: src/components/AuthForm.tsx:301
+#: src/components/AuthForm.tsx:302
 msgid "Enter your email address"
 msgstr "Introduce tu dirección de correo electrónico"

-#: src/components/AuthForm.tsx:289
+#: src/components/AuthForm.tsx:290
 msgid "Enter your name"
 msgstr "Introduce tu nombre"

-#: src/components/AuthForm.tsx:314
+#: src/components/AuthForm.tsx:315
 msgid "Enter your password"
 msgstr "Introduce tu contraseña"

@@ -557,7 +558,7 @@ msgstr "Error al eliminar la cuenta"
 msgid "Error deleting workspace"
 msgstr "Error al eliminar el espacio de trabajo"

-#: src/views/settings/index.tsx:98
+#: src/views/settings/index.tsx:99
 msgid "Error disconnecting Trello"
 msgstr "Error al desconectar Trello"

@@ -565,7 +566,7 @@ msgstr "Error al desconectar Trello"
 msgid "Error updating display name"
 msgstr "Error al actualizar el nombre visible"

-#: src/views/settings/components/Avatar.tsx:37
+#: src/views/settings/components/Avatar.tsx:39
 msgid "Error updating profile image"
 msgstr "Error al actualizar la imagen de perfil"

@@ -581,8 +582,8 @@ msgstr "Error al actualizar el nombre del espacio de trabajo"
 msgid "Error updating workspace URL"
 msgstr "Error al actualizar la URL del espacio de trabajo"

-#: src/views/settings/components/Avatar.tsx:54
-#: src/views/settings/components/Avatar.tsx:95
+#: src/views/settings/components/Avatar.tsx:56
+#: src/views/settings/components/Avatar.tsx:97
 msgid "Error uploading profile image"
 msgstr "Error al subir la imagen de perfil"

@@ -622,11 +623,12 @@ msgstr "Solicitud de función"
 msgid "Features"
 msgstr "Características"

-#: src/components/FeedbackButton.tsx:78
+#: src/components/UserMenu.tsx:199
+#: src/components/FeedbackModal.tsx:59
 msgid "Feedback"
 msgstr "Comentarios"

-#: src/components/FeedbackButton.tsx:38
+#: src/components/FeedbackModal.tsx:33
 msgid "Feedback sent"
 msgstr "Comentarios enviados"

@@ -674,7 +676,7 @@ msgstr "Comenzar"
 msgid "Get started by creating a new board"
 msgstr "Comienza creando un nuevo tablero"

-#: src/views/board/index.tsx:326
+#: src/views/board/index.tsx:327
 msgid "Get started by creating a new list"
 msgstr "Comienza creando una nueva lista"

@@ -747,11 +749,11 @@ msgstr "Reconozco que todos los datos del espacio de trabajo serán eliminados p
 msgid "Ideas"
 msgstr "Ideas"

-#: src/components/FeedbackButton.tsx:98
+#: src/components/FeedbackModal.tsx:75
 msgid "Ideas to improve this page..."
 msgstr "Ideas para mejorar esta página..."

-#: src/views/boards/index.tsx:37
+#: src/views/boards/index.tsx:38
 msgid "Import"
 msgstr "Importar"

@@ -797,7 +799,7 @@ msgstr "Integraciones"
 msgid "Interviewing"
 msgstr "Entrevistando"

-#: src/views/members/index.tsx:168
+#: src/views/members/index.tsx:169
 msgid "Invite"
 msgstr "Invitar"

@@ -823,7 +825,7 @@ msgstr "Kanban reinventado"
 msgid "Keep in mind that this action is irreversible."
 msgstr "Ten en cuenta que esta acción es irreversible."

-#: src/views/card/index.tsx:112
+#: src/views/card/index.tsx:113
 #: src/views/board/components/NewCardForm.tsx:331
 #: src/views/board/components/Filters.tsx:101
 msgid "Labels"
@@ -833,7 +835,7 @@ msgstr "Etiquetas"
 msgid "Labels & Filters"
 msgstr "Etiquetas y filtros"

-#: src/views/settings/index.tsx:184
+#: src/views/settings/index.tsx:185
 msgid "Language"
 msgstr "Idioma"

@@ -849,7 +851,7 @@ msgstr "Legal"
 msgid "License"
 msgstr "Licencia"

-#: src/components/UserMenu.tsx:126
+#: src/components/UserMenu.tsx:167
 msgid "Light"
 msgstr "Claro"

@@ -857,7 +859,7 @@ msgstr "Claro"
 msgid "Link copied"
 msgstr "Enlace copiado"

-#: src/views/card/index.tsx:104
+#: src/views/card/index.tsx:105
 msgid "List"
 msgstr "Lista"

@@ -869,7 +871,7 @@ msgstr "Nombre de la lista"
 msgid "Login | kan.bn"
 msgstr "Iniciar sesión | kan.bn"

-#: src/components/UserMenu.tsx:136
+#: src/components/UserMenu.tsx:209
 msgid "Logout"
 msgstr "Cerrar sesión"

@@ -881,7 +883,7 @@ msgstr "Largo plazo"
 msgid "Low Priority"
 msgstr "Prioridad baja"

-#: src/components/AuthForm.tsx:337
+#: src/components/AuthForm.tsx:338
 msgid "magic link"
 msgstr "enlace mágico"

@@ -889,16 +891,16 @@ msgstr "enlace mágico"
 msgid "Medium Priority"
 msgstr "Prioridad media"

-#: src/views/members/index.tsx:160
-#: src/views/card/index.tsx:120
+#: src/views/members/index.tsx:161
+#: src/views/card/index.tsx:121
 #: src/views/board/components/NewCardForm.tsx:290
 #: src/views/board/components/Filters.tsx:93
-#: src/components/SideNavigation.tsx:44
+#: src/components/SideNavigation.tsx:73
 msgid "Members"
 msgstr "Miembros"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/members/index.tsx:156
+#: src/views/members/index.tsx:157
 msgid "Members | {0}"
 msgstr "Miembros | {0}"

@@ -919,11 +921,11 @@ msgstr "movió la tarjeta a otra lista"
 msgid "Name"
 msgstr "Nombre"

-#: src/components/FeedbackButton.tsx:116
+#: src/components/FeedbackModal.tsx:95
 msgid "Need help?"
 msgstr "¿Necesitas ayuda?"

-#: src/views/boards/index.tsx:47
+#: src/views/boards/index.tsx:48
 msgid "New"
 msgstr "Nuevo"

@@ -943,7 +945,7 @@ msgstr "Nueva importación"
 msgid "New label"
 msgstr "Nueva etiqueta"

-#: src/views/board/index.tsx:303
+#: src/views/board/index.tsx:304
 #: src/views/board/components/NewListForm.tsx:112
 msgid "New list"
 msgstr "Nueva lista"
@@ -976,7 +978,7 @@ msgstr "No se encontraron tableros"
 msgid "No credit card required"
 msgstr "No se requiere tarjeta de crédito"

-#: src/views/board/index.tsx:323
+#: src/views/board/index.tsx:324
 msgid "No lists"
 msgstr "Sin listas"

@@ -988,15 +990,15 @@ msgstr "Oferta"
 msgid "Onboarding"
 msgstr "Incorporación"

-#: src/views/settings/index.tsx:290
+#: src/views/settings/index.tsx:291
 msgid "Once you delete your account, there is no going back. This action cannot be undone."
 msgstr "Una vez que elimines tu cuenta, no hay vuelta atrás. Esta acción no se puede deshacer."

-#: src/views/settings/index.tsx:272
+#: src/views/settings/index.tsx:273
 msgid "Once you delete your workspace, there is no going back. This action cannot be undone."
 msgstr "Una vez que elimines tu espacio de trabajo, no hay vuelta atrás. Esta acción no se puede deshacer."

-#: src/components/AuthForm.tsx:279
+#: src/components/AuthForm.tsx:280
 msgid "or"
 msgstr "o"

@@ -1016,7 +1018,7 @@ msgstr "Tiempo parcial"
 msgid "Payment frequency"
 msgstr "Frecuencia de pago"

-#: src/views/members/index.tsx:117
+#: src/views/members/index.tsx:118
 msgid "Pending"
 msgstr "Pendiente"

@@ -1033,19 +1035,19 @@ msgstr "Proyecto personal"
 msgid "Planning"
 msgstr "Planificación"

-#: src/components/AuthForm.tsx:305
+#: src/components/AuthForm.tsx:306
 msgid "Please enter a valid email address"
 msgstr "Por favor, introduce una dirección de correo electrónico válida"

-#: src/components/AuthForm.tsx:293
+#: src/components/AuthForm.tsx:294
 msgid "Please enter a valid name"
 msgstr "Por favor, introduce un nombre válido"

-#: src/components/AuthForm.tsx:318
+#: src/components/AuthForm.tsx:319
 msgid "Please enter a valid password"
 msgstr "Por favor, introduce una contraseña válida"

-#: src/views/settings/components/Avatar.tsx:55
+#: src/views/settings/components/Avatar.tsx:57
 msgid "Please select a file to upload."
 msgstr "Por favor selecciona un archivo para subir."

@@ -1055,10 +1057,10 @@ msgstr "Por favor selecciona un archivo para subir."
 #: src/views/settings/components/UpdateDisplayNameForm.tsx:55
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:46
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:40
-#: src/views/settings/components/Avatar.tsx:38
-#: src/views/settings/components/Avatar.tsx:96
+#: src/views/settings/components/Avatar.tsx:40
+#: src/views/settings/components/Avatar.tsx:98
 #: src/views/members/components/DeleteMemberConfirmation.tsx:28
-#: src/views/card/index.tsx:158
+#: src/views/card/index.tsx:159
 #: src/views/card/components/NewCommentForm.tsx:31
 #: src/views/card/components/MemberSelector.tsx:80
 #: src/views/card/components/ListSelector.tsx:53
@@ -1067,14 +1069,14 @@ msgstr "Por favor selecciona un archivo para subir."
 #: src/views/card/components/DeleteCardConfirmation.tsx:52
 #: src/views/card/components/Comment.tsx:62
 #: src/views/boards/components/ImportBoardsForm.tsx:205
-#: src/views/board/index.tsx:134
-#: src/views/board/index.tsx:190
+#: src/views/board/index.tsx:135
+#: src/views/board/index.tsx:191
 #: src/views/board/components/VisibilityButton.tsx:53
 #: src/views/board/components/UpdateBoardSlugForm.tsx:72
 #: src/views/board/components/NewListForm.tsx:78
 #: src/views/board/components/NewCardForm.tsx:128
 #: src/components/NewWorkspaceForm.tsx:41
-#: src/components/FeedbackButton.tsx:46
+#: src/components/FeedbackModal.tsx:41
 msgid "Please try again later, or contact customer support."
 msgstr "Por favor, inténtalo de nuevo más tarde o contacta con atención al cliente."

@@ -1096,11 +1098,11 @@ msgstr "Política de privacidad"
 msgid "Private"
 msgstr "Privado"

-#: src/views/settings/components/Avatar.tsx:24
+#: src/views/settings/components/Avatar.tsx:26
 msgid "Profile image updated"
 msgstr "Imagen de perfil actualizada"

-#: src/views/settings/index.tsx:143
+#: src/views/settings/index.tsx:144
 msgid "Profile picture"
 msgstr "Foto de perfil"

@@ -1136,7 +1138,7 @@ msgstr "Remoto"
 msgid "Remove"
 msgstr "Eliminar"

-#: src/views/members/index.tsx:131
+#: src/views/members/index.tsx:132
 msgid "Remove member"
 msgstr "Eliminar miembro"

@@ -1177,7 +1179,7 @@ msgstr "Revocar"
 msgid "Roadmap"
 msgstr "Hoja de ruta"

-#: src/views/members/index.tsx:190
+#: src/views/members/index.tsx:191
 msgid "Role"
 msgstr "Rol"

@@ -1217,21 +1219,21 @@ msgstr "Autoalojamiento con Github"
 msgid "self-assigned the card"
 msgstr "se autoasignó la tarjeta"

-#: src/components/FeedbackButton.tsx:137
-msgid "Send"
-msgstr "Enviar"
+#: src/components/FeedbackModal.tsx:116
+msgid "Send feedback"
+msgstr "Enviar comentarios"

 #: src/views/boards/components/TemplateBoards.tsx:69
 msgid "Senior"
 msgstr "Senior"

-#: src/views/settings/index.tsx:137
-#: src/components/SideNavigation.tsx:49
+#: src/views/settings/index.tsx:138
+#: src/components/SideNavigation.tsx:78
 msgid "Settings"
 msgstr "Configuración"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/settings/index.tsx:133
+#: src/views/settings/index.tsx:134
 msgid "Settings | {0}"
 msgstr "Configuración | {0}"

@@ -1253,7 +1255,7 @@ msgstr "Registro deshabilitado"
 msgid "Sign up is currently disabled. Please try again later."
 msgstr "El registro está actualmente deshabilitado. Por favor, inténtalo de nuevo más tarde."

-#: src/components/AuthForm.tsx:334
+#: src/components/AuthForm.tsx:335
 msgid "Sign up with "
 msgstr "Registrarse con "

@@ -1282,11 +1284,15 @@ msgstr "Estrella en Github"
 msgid "Success"
 msgstr "Éxito"

+#: src/components/UserMenu.tsx:180
+msgid "Support"
+msgstr "Soporte"
+
 #: src/views/home/components/Pricing.tsx:57
 msgid "Support the development of the project"
 msgstr "Apoya el desarrollo del proyecto"

-#: src/components/UserMenu.tsx:98
+#: src/components/UserMenu.tsx:139
 msgid "System"
 msgstr "Sistema"

@@ -1302,7 +1308,7 @@ msgstr "Plantillas"
 msgid "Terms of service"
 msgstr "Términos de servicio"

-#: src/components/FeedbackButton.tsx:39
+#: src/components/FeedbackModal.tsx:34
 msgid "Thank you for your feedback!"
 msgstr "¡Gracias por tus comentarios!"

@@ -1319,7 +1325,7 @@ msgstr "La alternativa de código abierto <0/> a Trello"
 msgid "The visibility of your board has been set to {0}."
 msgstr "La visibilidad de tu tablero ha sido establecida a {0}."

-#: src/components/UserMenu.tsx:85
+#: src/components/UserMenu.tsx:126
 msgid "Theme"
 msgstr "Tema"

@@ -1361,7 +1367,7 @@ msgstr "Alternar menú"
 msgid "Track all card changes with detailed activity history."
 msgstr "Rastrea todos los cambios en las tarjetas con un historial de actividad detallado."

-#: src/views/settings/index.tsx:91
+#: src/views/settings/index.tsx:92
 msgid "Trello disconnected"
 msgstr "Trello desconectado"

@@ -1401,7 +1407,7 @@ msgstr "No se puede eliminar el comentario"
 msgid "Unable to remove member"
 msgstr "No se puede eliminar al miembro"

-#: src/components/FeedbackButton.tsx:45
+#: src/components/FeedbackModal.tsx:40
 msgid "Unable to send feedback"
 msgstr "No se pudieron enviar los comentarios"

@@ -1413,8 +1419,8 @@ msgstr "No se puede actualizar la URL del tablero"
 msgid "Unable to update board visibility"
 msgstr "No se puede actualizar la visibilidad del tablero"

-#: src/views/card/index.tsx:157
-#: src/views/board/index.tsx:189
+#: src/views/card/index.tsx:158
+#: src/views/board/index.tsx:190
 msgid "Unable to update card"
 msgstr "No se puede actualizar la tarjeta"

@@ -1427,7 +1433,7 @@ msgid "Unable to update labels"
 msgstr "No se pueden actualizar las etiquetas"

 #: src/views/card/components/ListSelector.tsx:52
-#: src/views/board/index.tsx:133
+#: src/views/board/index.tsx:134
 msgid "Unable to update list"
 msgstr "No se puede actualizar la lista"

@@ -1516,7 +1522,7 @@ msgstr "La URL debe tener al menos 3 caracteres"
 msgid "Use template"
 msgstr "Usar plantilla"

-#: src/views/members/index.tsx:184
+#: src/views/members/index.tsx:185
 msgid "User"
 msgstr "Usuario"

@@ -1524,11 +1530,11 @@ msgstr "Usuario"
 msgid "Video"
 msgstr "Video"

-#: src/views/settings/index.tsx:259
+#: src/views/settings/index.tsx:260
 msgid "View and manage your API keys."
 msgstr "Ver y gestionar tus claves API."

-#: src/views/settings/index.tsx:198
+#: src/views/settings/index.tsx:199
 msgid "View and manage your billing and subscription."
 msgstr "Ver y gestionar tu facturación y suscripción."

@@ -1572,7 +1578,7 @@ msgstr "Cuando Trello se lanzó en 2011, impresionó a todos con su simplicidad
 msgid "Why make an open source Trello?"
 msgstr "¿Por qué crear un Trello de código abierto?"

-#: src/views/board/index.tsx:240
+#: src/views/board/index.tsx:241
 msgid "Workspace"
 msgstr "Espacio de trabajo"

@@ -1580,7 +1586,7 @@ msgstr "Espacio de trabajo"
 msgid "Workspace deleted"
 msgstr "Espacio de trabajo eliminado"

-#: src/views/settings/index.tsx:174
+#: src/views/settings/index.tsx:175
 msgid "Workspace description"
 msgstr "Descripción del espacio de trabajo"

@@ -1601,7 +1607,7 @@ msgstr "Descripción del espacio de trabajo actualizada"
 msgid "Workspace members"
 msgstr "Miembros del espacio de trabajo"

-#: src/views/settings/index.tsx:155
+#: src/views/settings/index.tsx:156
 #: src/components/NewWorkspaceForm.tsx:80
 msgid "Workspace name"
 msgstr "Nombre del espacio de trabajo"
@@ -1622,7 +1628,7 @@ msgstr "Nombre del espacio de trabajo actualizado"
 msgid "Workspace slug updated"
 msgstr "Slug del espacio de trabajo actualizado"

-#: src/views/settings/index.tsx:164
+#: src/views/settings/index.tsx:165
 msgid "Workspace URL"
 msgstr "URL del espacio de trabajo"

@@ -1670,15 +1676,15 @@ msgstr "Tus tableros han sido importados."
 msgid "Your display name has been updated."
 msgstr "Tu nombre de visualización ha sido actualizado."

-#: src/views/settings/components/Avatar.tsx:25
+#: src/views/settings/components/Avatar.tsx:27
 msgid "Your profile image has been updated."
 msgstr "Tu imagen de perfil ha sido actualizada."

-#: src/views/settings/index.tsx:92
+#: src/views/settings/index.tsx:93
 msgid "Your Trello account has been disconnected."
 msgstr "Tu cuenta de Trello ha sido desconectada."

-#: src/views/settings/index.tsx:241
+#: src/views/settings/index.tsx:242
 msgid "Your Trello account is connected."
 msgstr "Tu cuenta de Trello está conectada."

--- a/apps/web/src/locales/es/messages.ts
+++ b/apps/web/src/locales/es/messages.ts
--- a/apps/web/src/locales/fr/messages.po
+++ b/apps/web/src/locales/fr/messages.po
@@ -17,13 +17,13 @@ msgstr ""
 msgid " (edited)"
 msgstr " (modifié)"

-#: src/components/FeedbackButton.tsx:123
+#: src/components/FeedbackModal.tsx:102
 msgid ", or see our"
 msgstr ", ou consultez notre"

 #. placeholder {0}: card?.title ?? "Card"
 #. placeholder {1}: board?.name ?? "Board"
-#: src/views/card/index.tsx:188
+#: src/views/card/index.tsx:189
 msgid "{0} | {1}"
 msgstr "{0} | {1}"

@@ -49,7 +49,7 @@ msgid "Account deleted"
 msgstr "Compte supprimé"

 #: src/views/public/board/CardModal.tsx:104
-#: src/views/card/index.tsx:255
+#: src/views/card/index.tsx:256
 msgid "Activity"
 msgstr "Activité"

@@ -108,11 +108,11 @@ msgstr "Tous les systèmes opérationnels"
 msgid "Already have an account? <0><1>Sign in</1></0>"
 msgstr "Vous avez déjà un compte ? <0><1>Connectez-vous</1></0>"

-#: src/views/settings/index.tsx:99
+#: src/views/settings/index.tsx:100
 msgid "An error occurred while disconnecting your Trello account."
 msgstr "Une erreur s'est produite lors de la déconnexion de votre compte Trello."

-#: src/views/settings/index.tsx:256
+#: src/views/settings/index.tsx:257
 msgid "API keys"
 msgstr "Clés API"

@@ -165,12 +165,12 @@ msgstr "Backlog"
 msgid "Basic Kanban"
 msgstr "Kanban basique"

-#: src/views/settings/index.tsx:195
+#: src/views/settings/index.tsx:196
 #: src/views/boards/components/TemplateBoards.tsx:55
 msgid "Billing"
 msgstr "Facturation"

-#: src/views/settings/index.tsx:205
+#: src/views/settings/index.tsx:206
 msgid "Billing portal"
 msgstr "Portail de facturation"

@@ -178,7 +178,7 @@ msgstr "Portail de facturation"
 msgid "Blog Post"
 msgstr "Article de blog"

-#: src/views/board/index.tsx:240
+#: src/views/board/index.tsx:241
 msgid "Board"
 msgstr "Tableau"

@@ -190,7 +190,7 @@ msgstr "Le nom du tableau ne peut pas dépasser 100 caractères"
 msgid "Board name is required"
 msgstr "Le nom du tableau est requis"

-#: src/views/board/index.tsx:266
+#: src/views/board/index.tsx:267
 msgid "Board not found"
 msgstr "Tableau introuvable"

@@ -218,13 +218,13 @@ msgstr "Visibilité du tableau"
 msgid "Board visibility updated"
 msgstr "Visibilité du tableau mise à jour"

-#: src/views/boards/index.tsx:26
-#: src/components/SideNavigation.tsx:39
+#: src/views/boards/index.tsx:27
+#: src/components/SideNavigation.tsx:68
 msgid "Boards"
 msgstr "Tableaux"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/boards/index.tsx:22
+#: src/views/boards/index.tsx:23
 msgid "Boards | {0}"
 msgstr "Tableaux | {0}"

@@ -250,7 +250,7 @@ msgstr "Rapport de bug"
 msgid "Cancel"
 msgstr "Annuler"

-#: src/views/card/index.tsx:233
+#: src/views/card/index.tsx:234
 msgid "Card not found"
 msgstr "Carte introuvable"

@@ -258,7 +258,7 @@ msgstr "Carte introuvable"
 msgid "Card title"
 msgstr "Titre de la carte"

-#: src/views/settings/index.tsx:187
+#: src/views/settings/index.tsx:188
 msgid "Change the language of the app."
 msgstr "Changer la langue de l'application."

@@ -308,7 +308,7 @@ msgstr "Contrôle et propriété complets :"
 msgid "Confirm URL change"
 msgstr "Confirmer le changement d'URL"

-#: src/views/settings/index.tsx:232
+#: src/views/settings/index.tsx:233
 #: src/views/boards/components/ImportBoardsForm.tsx:157
 msgid "Connect Trello"
 msgstr "Connecter Trello"
@@ -317,7 +317,7 @@ msgstr "Connecter Trello"
 msgid "Connect your favorite tools to streamline your workflow."
 msgstr "Connectez vos outils favoris pour simplifier votre flux de travail."

-#: src/views/settings/index.tsx:219
+#: src/views/settings/index.tsx:220
 msgid "Connect your Trello account to import boards."
 msgstr "Connectez votre compte Trello pour importer des tableaux."

@@ -325,7 +325,7 @@ msgstr "Connectez votre compte Trello pour importer des tableaux."
 msgid "Contact"
 msgstr "Contact"

-#: src/components/FeedbackButton.tsx:121
+#: src/components/FeedbackModal.tsx:100
 msgid "Contact us"
 msgstr "Contactez-nous"

@@ -333,12 +333,12 @@ msgstr "Contactez-nous"
 msgid "Content Creation"
 msgstr "Création de contenu"

-#: src/components/AuthForm.tsx:334
+#: src/components/AuthForm.tsx:335
 msgid "Continue with "
 msgstr "Continuer avec "

 #. placeholder {0}: provider.name
-#: src/components/AuthForm.tsx:268
+#: src/components/AuthForm.tsx:269
 msgid "Continue with {0}"
 msgstr "Continuer avec {0}"

@@ -381,11 +381,11 @@ msgstr "Créer une nouvelle clé"
 msgid "Create new label"
 msgstr "Créer une nouvelle étiquette"

-#: src/views/board/index.tsx:334
+#: src/views/board/index.tsx:335
 msgid "Create new list"
 msgstr "Créer une nouvelle liste"

-#: src/components/WorkspaceMenu.tsx:85
+#: src/components/WorkspaceMenu.tsx:116
 #: src/components/NewWorkspaceForm.tsx:93
 msgid "Create workspace"
 msgstr "Créer un espace de travail"
@@ -410,7 +410,7 @@ msgstr "Les URL personnalisées sont une fonctionnalité premium. Vous serez dir
 msgid "Customer Support"
 msgstr "Support client"

-#: src/components/UserMenu.tsx:112
+#: src/components/UserMenu.tsx:153
 msgid "Dark"
 msgstr "Sombre"

@@ -420,8 +420,8 @@ msgstr "Sombre"
 msgid "Delete"
 msgstr "Supprimer"

-#: src/views/settings/index.tsx:287
-#: src/views/settings/index.tsx:297
+#: src/views/settings/index.tsx:288
+#: src/views/settings/index.tsx:298
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:96
 msgid "Delete account"
 msgstr "Supprimer le compte"
@@ -442,8 +442,8 @@ msgstr "Supprimer le commentaire"
 msgid "Delete list"
 msgstr "Supprimer la liste"

-#: src/views/settings/index.tsx:269
-#: src/views/settings/index.tsx:280
+#: src/views/settings/index.tsx:270
+#: src/views/settings/index.tsx:281
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:106
 msgid "Delete workspace"
 msgstr "Supprimer l'espace de travail"
@@ -452,7 +452,7 @@ msgstr "Supprimer l'espace de travail"
 msgid "Design"
 msgstr "Design"

-#: src/views/settings/index.tsx:247
+#: src/views/settings/index.tsx:248
 msgid "Disconnect Trello"
 msgstr "Déconnecter Trello"

@@ -460,7 +460,7 @@ msgstr "Déconnecter Trello"
 msgid "Discuss and collaborate on cards."
 msgstr "Discutez et collaborez sur les cartes."

-#: src/views/settings/index.tsx:148
+#: src/views/settings/index.tsx:149
 msgid "Display name"
 msgstr "Nom d'affichage"

@@ -480,7 +480,7 @@ msgstr "Nom d'affichage mis à jour"
 msgid "Do you offer a free plan?"
 msgstr "Proposez-vous un plan gratuit ?"

-#: src/components/FeedbackButton.tsx:130
+#: src/components/FeedbackModal.tsx:109
 msgid "docs"
 msgstr "documentation"

@@ -490,6 +490,7 @@ msgstr "Documentation"

 #: src/views/home/components/Footer.tsx:77
 #: src/views/boards/components/TemplateBoards.tsx:23
+#: src/components/UserMenu.tsx:191
 msgid "Documentation"
 msgstr "Documentation"

@@ -525,7 +526,7 @@ msgstr "Modifier l'URL de l'espace de travail"
 msgid "Editing"
 msgstr "Édition"

-#: src/components/AuthForm.tsx:336
+#: src/components/AuthForm.tsx:337
 msgid "email"
 msgstr "e-mail"

@@ -537,15 +538,15 @@ msgstr "E-mail"
 msgid "Enhancement"
 msgstr "Amélioration"

-#: src/components/AuthForm.tsx:301
+#: src/components/AuthForm.tsx:302
 msgid "Enter your email address"
 msgstr "Saisissez votre adresse e-mail"

-#: src/components/AuthForm.tsx:289
+#: src/components/AuthForm.tsx:290
 msgid "Enter your name"
 msgstr "Saisissez votre nom"

-#: src/components/AuthForm.tsx:314
+#: src/components/AuthForm.tsx:315
 msgid "Enter your password"
 msgstr "Saisissez votre mot de passe"

@@ -557,7 +558,7 @@ msgstr "Erreur lors de la suppression du compte"
 msgid "Error deleting workspace"
 msgstr "Erreur lors de la suppression de l'espace de travail"

-#: src/views/settings/index.tsx:98
+#: src/views/settings/index.tsx:99
 msgid "Error disconnecting Trello"
 msgstr "Erreur lors de la déconnexion de Trello"

@@ -565,7 +566,7 @@ msgstr "Erreur lors de la déconnexion de Trello"
 msgid "Error updating display name"
 msgstr "Erreur lors de la mise à jour du nom d'affichage"

-#: src/views/settings/components/Avatar.tsx:37
+#: src/views/settings/components/Avatar.tsx:39
 msgid "Error updating profile image"
 msgstr "Erreur lors de la mise à jour de l'image de profil"

@@ -581,8 +582,8 @@ msgstr "Erreur lors de la mise à jour du nom de l'espace de travail"
 msgid "Error updating workspace URL"
 msgstr "Erreur lors de la mise à jour de l'URL de l'espace de travail"

-#: src/views/settings/components/Avatar.tsx:54
-#: src/views/settings/components/Avatar.tsx:95
+#: src/views/settings/components/Avatar.tsx:56
+#: src/views/settings/components/Avatar.tsx:97
 msgid "Error uploading profile image"
 msgstr "Erreur lors du téléchargement de l'image de profil"

@@ -622,11 +623,12 @@ msgstr "Demande de fonctionnalité"
 msgid "Features"
 msgstr "Fonctionnalités"

-#: src/components/FeedbackButton.tsx:78
+#: src/components/UserMenu.tsx:199
+#: src/components/FeedbackModal.tsx:59
 msgid "Feedback"
 msgstr "Commentaires"

-#: src/components/FeedbackButton.tsx:38
+#: src/components/FeedbackModal.tsx:33
 msgid "Feedback sent"
 msgstr "Commentaires envoyés"

@@ -674,7 +676,7 @@ msgstr "Commencer"
 msgid "Get started by creating a new board"
 msgstr "Commencez par créer un nouveau tableau"

-#: src/views/board/index.tsx:326
+#: src/views/board/index.tsx:327
 msgid "Get started by creating a new list"
 msgstr "Commencez par créer une nouvelle liste"

@@ -747,11 +749,11 @@ msgstr "Je reconnais que toutes les données de l'espace de travail seront défi
 msgid "Ideas"
 msgstr "Idées"

-#: src/components/FeedbackButton.tsx:98
+#: src/components/FeedbackModal.tsx:75
 msgid "Ideas to improve this page..."
 msgstr "Idées pour améliorer cette page..."

-#: src/views/boards/index.tsx:37
+#: src/views/boards/index.tsx:38
 msgid "Import"
 msgstr "Importer"

@@ -797,7 +799,7 @@ msgstr "Intégrations"
 msgid "Interviewing"
 msgstr "Entretien"

-#: src/views/members/index.tsx:168
+#: src/views/members/index.tsx:169
 msgid "Invite"
 msgstr "Inviter"

@@ -823,7 +825,7 @@ msgstr "Kanban réinventé"
 msgid "Keep in mind that this action is irreversible."
 msgstr "Gardez à l'esprit que cette action est irréversible."

-#: src/views/card/index.tsx:112
+#: src/views/card/index.tsx:113
 #: src/views/board/components/NewCardForm.tsx:331
 #: src/views/board/components/Filters.tsx:101
 msgid "Labels"
@@ -833,7 +835,7 @@ msgstr "Étiquettes"
 msgid "Labels & Filters"
 msgstr "Étiquettes & filtres"

-#: src/views/settings/index.tsx:184
+#: src/views/settings/index.tsx:185
 msgid "Language"
 msgstr "Langue"

@@ -849,7 +851,7 @@ msgstr "Mentions légales"
 msgid "License"
 msgstr "Licence"

-#: src/components/UserMenu.tsx:126
+#: src/components/UserMenu.tsx:167
 msgid "Light"
 msgstr "Clair"

@@ -857,7 +859,7 @@ msgstr "Clair"
 msgid "Link copied"
 msgstr "Lien copié"

-#: src/views/card/index.tsx:104
+#: src/views/card/index.tsx:105
 msgid "List"
 msgstr "Liste"

@@ -869,7 +871,7 @@ msgstr "Nom de la liste"
 msgid "Login | kan.bn"
 msgstr "Connexion | kan.bn"

-#: src/components/UserMenu.tsx:136
+#: src/components/UserMenu.tsx:209
 msgid "Logout"
 msgstr "Déconnexion"

@@ -881,7 +883,7 @@ msgstr "Long terme"
 msgid "Low Priority"
 msgstr "Priorité basse"

-#: src/components/AuthForm.tsx:337
+#: src/components/AuthForm.tsx:338
 msgid "magic link"
 msgstr "lien magique"

@@ -889,16 +891,16 @@ msgstr "lien magique"
 msgid "Medium Priority"
 msgstr "Priorité moyenne"

-#: src/views/members/index.tsx:160
-#: src/views/card/index.tsx:120
+#: src/views/members/index.tsx:161
+#: src/views/card/index.tsx:121
 #: src/views/board/components/NewCardForm.tsx:290
 #: src/views/board/components/Filters.tsx:93
-#: src/components/SideNavigation.tsx:44
+#: src/components/SideNavigation.tsx:73
 msgid "Members"
 msgstr "Membres"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/members/index.tsx:156
+#: src/views/members/index.tsx:157
 msgid "Members | {0}"
 msgstr "Membres | {0}"

@@ -919,11 +921,11 @@ msgstr "a déplacé la carte vers une autre liste"
 msgid "Name"
 msgstr "Nom"

-#: src/components/FeedbackButton.tsx:116
+#: src/components/FeedbackModal.tsx:95
 msgid "Need help?"
 msgstr "Besoin d'aide ?"

-#: src/views/boards/index.tsx:47
+#: src/views/boards/index.tsx:48
 msgid "New"
 msgstr "Nouveau"

@@ -943,7 +945,7 @@ msgstr "Nouvel import"
 msgid "New label"
 msgstr "Nouvelle étiquette"

-#: src/views/board/index.tsx:303
+#: src/views/board/index.tsx:304
 #: src/views/board/components/NewListForm.tsx:112
 msgid "New list"
 msgstr "Nouvelle liste"
@@ -976,7 +978,7 @@ msgstr "Aucun tableau trouvé"
 msgid "No credit card required"
 msgstr "Aucune carte de crédit requise"

-#: src/views/board/index.tsx:323
+#: src/views/board/index.tsx:324
 msgid "No lists"
 msgstr "Aucune liste"

@@ -988,15 +990,15 @@ msgstr "Offre"
 msgid "Onboarding"
 msgstr "Intégration"

-#: src/views/settings/index.tsx:290
+#: src/views/settings/index.tsx:291
 msgid "Once you delete your account, there is no going back. This action cannot be undone."
 msgstr "Une fois que vous supprimez votre compte, il n'y a pas de retour possible. Cette action ne peut pas être annulée."

-#: src/views/settings/index.tsx:272
+#: src/views/settings/index.tsx:273
 msgid "Once you delete your workspace, there is no going back. This action cannot be undone."
 msgstr "Une fois que vous supprimez votre espace de travail, il n'y a pas de retour possible. Cette action ne peut pas être annulée."

-#: src/components/AuthForm.tsx:279
+#: src/components/AuthForm.tsx:280
 msgid "or"
 msgstr "ou"

@@ -1016,7 +1018,7 @@ msgstr "Temps partiel"
 msgid "Payment frequency"
 msgstr "Fréquence de paiement"

-#: src/views/members/index.tsx:117
+#: src/views/members/index.tsx:118
 msgid "Pending"
 msgstr "En attente"

@@ -1033,19 +1035,19 @@ msgstr "Projet personnel"
 msgid "Planning"
 msgstr "Planification"

-#: src/components/AuthForm.tsx:305
+#: src/components/AuthForm.tsx:306
 msgid "Please enter a valid email address"
 msgstr "Veuillez saisir une adresse e-mail valide"

-#: src/components/AuthForm.tsx:293
+#: src/components/AuthForm.tsx:294
 msgid "Please enter a valid name"
 msgstr "Veuillez saisir un nom valide"

-#: src/components/AuthForm.tsx:318
+#: src/components/AuthForm.tsx:319
 msgid "Please enter a valid password"
 msgstr "Veuillez saisir un mot de passe valide"

-#: src/views/settings/components/Avatar.tsx:55
+#: src/views/settings/components/Avatar.tsx:57
 msgid "Please select a file to upload."
 msgstr "Veuillez sélectionner un fichier à télécharger."

@@ -1055,10 +1057,10 @@ msgstr "Veuillez sélectionner un fichier à télécharger."
 #: src/views/settings/components/UpdateDisplayNameForm.tsx:55
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:46
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:40
-#: src/views/settings/components/Avatar.tsx:38
-#: src/views/settings/components/Avatar.tsx:96
+#: src/views/settings/components/Avatar.tsx:40
+#: src/views/settings/components/Avatar.tsx:98
 #: src/views/members/components/DeleteMemberConfirmation.tsx:28
-#: src/views/card/index.tsx:158
+#: src/views/card/index.tsx:159
 #: src/views/card/components/NewCommentForm.tsx:31
 #: src/views/card/components/MemberSelector.tsx:80
 #: src/views/card/components/ListSelector.tsx:53
@@ -1067,14 +1069,14 @@ msgstr "Veuillez sélectionner un fichier à télécharger."
 #: src/views/card/components/DeleteCardConfirmation.tsx:52
 #: src/views/card/components/Comment.tsx:62
 #: src/views/boards/components/ImportBoardsForm.tsx:205
-#: src/views/board/index.tsx:134
-#: src/views/board/index.tsx:190
+#: src/views/board/index.tsx:135
+#: src/views/board/index.tsx:191
 #: src/views/board/components/VisibilityButton.tsx:53
 #: src/views/board/components/UpdateBoardSlugForm.tsx:72
 #: src/views/board/components/NewListForm.tsx:78
 #: src/views/board/components/NewCardForm.tsx:128
 #: src/components/NewWorkspaceForm.tsx:41
-#: src/components/FeedbackButton.tsx:46
+#: src/components/FeedbackModal.tsx:41
 msgid "Please try again later, or contact customer support."
 msgstr "Veuillez réessayer plus tard ou contacter le service client."

@@ -1096,11 +1098,11 @@ msgstr "Politique de confidentialité"
 msgid "Private"
 msgstr "Privé"

-#: src/views/settings/components/Avatar.tsx:24
+#: src/views/settings/components/Avatar.tsx:26
 msgid "Profile image updated"
 msgstr "Image de profil mise à jour"

-#: src/views/settings/index.tsx:143
+#: src/views/settings/index.tsx:144
 msgid "Profile picture"
 msgstr "Photo de profil"

@@ -1136,7 +1138,7 @@ msgstr "À distance"
 msgid "Remove"
 msgstr "Supprimer"

-#: src/views/members/index.tsx:131
+#: src/views/members/index.tsx:132
 msgid "Remove member"
 msgstr "Supprimer le membre"

@@ -1177,7 +1179,7 @@ msgstr "Révoquer"
 msgid "Roadmap"
 msgstr "Feuille de route"

-#: src/views/members/index.tsx:190
+#: src/views/members/index.tsx:191
 msgid "Role"
 msgstr "Rôle"

@@ -1217,21 +1219,21 @@ msgstr "Auto-hébergement avec Github"
 msgid "self-assigned the card"
 msgstr "s'est auto-assigné la carte"

-#: src/components/FeedbackButton.tsx:137
-msgid "Send"
-msgstr "Envoyer"
+#: src/components/FeedbackModal.tsx:116
+msgid "Send feedback"
+msgstr "Envoyer des commentaires"

 #: src/views/boards/components/TemplateBoards.tsx:69
 msgid "Senior"
 msgstr "Senior"

-#: src/views/settings/index.tsx:137
-#: src/components/SideNavigation.tsx:49
+#: src/views/settings/index.tsx:138
+#: src/components/SideNavigation.tsx:78
 msgid "Settings"
 msgstr "Paramètres"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/settings/index.tsx:133
+#: src/views/settings/index.tsx:134
 msgid "Settings | {0}"
 msgstr "Paramètres | {0}"

@@ -1253,7 +1255,7 @@ msgstr "Inscription désactivée"
 msgid "Sign up is currently disabled. Please try again later."
 msgstr "L'inscription est actuellement désactivée. Veuillez réessayer plus tard."

-#: src/components/AuthForm.tsx:334
+#: src/components/AuthForm.tsx:335
 msgid "Sign up with "
 msgstr "S'inscrire avec "

@@ -1282,11 +1284,15 @@ msgstr "Étoile sur Github"
 msgid "Success"
 msgstr "Succès"

+#: src/components/UserMenu.tsx:180
+msgid "Support"
+msgstr "Assistance"
+
 #: src/views/home/components/Pricing.tsx:57
 msgid "Support the development of the project"
 msgstr "Soutenir le développement du projet"

-#: src/components/UserMenu.tsx:98
+#: src/components/UserMenu.tsx:139
 msgid "System"
 msgstr "Système"

@@ -1302,7 +1308,7 @@ msgstr "Modèles"
 msgid "Terms of service"
 msgstr "Conditions d'utilisation"

-#: src/components/FeedbackButton.tsx:39
+#: src/components/FeedbackModal.tsx:34
 msgid "Thank you for your feedback!"
 msgstr "Merci pour vos commentaires !"

@@ -1319,7 +1325,7 @@ msgstr "L'alternative open source <0/> à Trello"
 msgid "The visibility of your board has been set to {0}."
 msgstr "La visibilité de votre tableau a été définie sur {0}."

-#: src/components/UserMenu.tsx:85
+#: src/components/UserMenu.tsx:126
 msgid "Theme"
 msgstr "Thème"

@@ -1361,7 +1367,7 @@ msgstr "Basculer le menu"
 msgid "Track all card changes with detailed activity history."
 msgstr "Suivez tous les changements de cartes avec un historique d'activité détaillé."

-#: src/views/settings/index.tsx:91
+#: src/views/settings/index.tsx:92
 msgid "Trello disconnected"
 msgstr "Trello déconnecté"

@@ -1401,7 +1407,7 @@ msgstr "Impossible de supprimer le commentaire"
 msgid "Unable to remove member"
 msgstr "Impossible de supprimer le membre"

-#: src/components/FeedbackButton.tsx:45
+#: src/components/FeedbackModal.tsx:40
 msgid "Unable to send feedback"
 msgstr "Impossible d'envoyer les commentaires"

@@ -1413,8 +1419,8 @@ msgstr "Impossible de mettre à jour l'URL du tableau"
 msgid "Unable to update board visibility"
 msgstr "Impossible de mettre à jour la visibilité du tableau"

-#: src/views/card/index.tsx:157
-#: src/views/board/index.tsx:189
+#: src/views/card/index.tsx:158
+#: src/views/board/index.tsx:190
 msgid "Unable to update card"
 msgstr "Impossible de mettre à jour la carte"

@@ -1427,7 +1433,7 @@ msgid "Unable to update labels"
 msgstr "Impossible de mettre à jour les étiquettes"

 #: src/views/card/components/ListSelector.tsx:52
-#: src/views/board/index.tsx:133
+#: src/views/board/index.tsx:134
 msgid "Unable to update list"
 msgstr "Impossible de mettre à jour la liste"

@@ -1516,7 +1522,7 @@ msgstr "L'URL doit comporter au moins 3 caractères"
 msgid "Use template"
 msgstr "Utiliser le modèle"

-#: src/views/members/index.tsx:184
+#: src/views/members/index.tsx:185
 msgid "User"
 msgstr "Utilisateur"

@@ -1524,11 +1530,11 @@ msgstr "Utilisateur"
 msgid "Video"
 msgstr "Vidéo"

-#: src/views/settings/index.tsx:259
+#: src/views/settings/index.tsx:260
 msgid "View and manage your API keys."
 msgstr "Consultez et gérez vos clés API."

-#: src/views/settings/index.tsx:198
+#: src/views/settings/index.tsx:199
 msgid "View and manage your billing and subscription."
 msgstr "Consultez et gérez votre facturation et votre abonnement."

@@ -1572,7 +1578,7 @@ msgstr "Quand Trello a été lancé en 2011, il a impressionné tout le monde pa
 msgid "Why make an open source Trello?"
 msgstr "Pourquoi créer un Trello open source ?"

-#: src/views/board/index.tsx:240
+#: src/views/board/index.tsx:241
 msgid "Workspace"
 msgstr "Espace de travail"

@@ -1580,7 +1586,7 @@ msgstr "Espace de travail"
 msgid "Workspace deleted"
 msgstr "Espace de travail supprimé"

-#: src/views/settings/index.tsx:174
+#: src/views/settings/index.tsx:175
 msgid "Workspace description"
 msgstr "Description de l'espace de travail"

@@ -1601,7 +1607,7 @@ msgstr "Description de l'espace de travail mise à jour"
 msgid "Workspace members"
 msgstr "Membres de l'espace de travail"

-#: src/views/settings/index.tsx:155
+#: src/views/settings/index.tsx:156
 #: src/components/NewWorkspaceForm.tsx:80
 msgid "Workspace name"
 msgstr "Nom de l'espace de travail"
@@ -1622,7 +1628,7 @@ msgstr "Nom de l'espace de travail mis à jour"
 msgid "Workspace slug updated"
 msgstr "Slug de l'espace de travail mis à jour"

-#: src/views/settings/index.tsx:164
+#: src/views/settings/index.tsx:165
 msgid "Workspace URL"
 msgstr "URL de l'espace de travail"

@@ -1670,15 +1676,15 @@ msgstr "Vos tableaux ont été importés."
 msgid "Your display name has been updated."
 msgstr "Votre nom d'affichage a été mis à jour."

-#: src/views/settings/components/Avatar.tsx:25
+#: src/views/settings/components/Avatar.tsx:27
 msgid "Your profile image has been updated."
 msgstr "Votre image de profil a été mise à jour."

-#: src/views/settings/index.tsx:92
+#: src/views/settings/index.tsx:93
 msgid "Your Trello account has been disconnected."
 msgstr "Votre compte Trello a été déconnecté."

-#: src/views/settings/index.tsx:241
+#: src/views/settings/index.tsx:242
 msgid "Your Trello account is connected."
 msgstr "Votre compte Trello est connecté."

--- a/apps/web/src/locales/fr/messages.ts
+++ b/apps/web/src/locales/fr/messages.ts
--- a/apps/web/src/locales/it/messages.po
+++ b/apps/web/src/locales/it/messages.po
@@ -17,13 +17,13 @@ msgstr ""
 msgid " (edited)"
 msgstr " (modificato)"

-#: src/components/FeedbackButton.tsx:123
+#: src/components/FeedbackModal.tsx:102
 msgid ", or see our"
 msgstr ", o consulta i nostri"

 #. placeholder {0}: card?.title ?? "Card"
 #. placeholder {1}: board?.name ?? "Board"
-#: src/views/card/index.tsx:188
+#: src/views/card/index.tsx:189
 msgid "{0} | {1}"
 msgstr "{0} | {1}"

@@ -49,7 +49,7 @@ msgid "Account deleted"
 msgstr "Account eliminato"

 #: src/views/public/board/CardModal.tsx:104
-#: src/views/card/index.tsx:255
+#: src/views/card/index.tsx:256
 msgid "Activity"
 msgstr "Attività"

@@ -108,11 +108,11 @@ msgstr "Tutti i sistemi operativi"
 msgid "Already have an account? <0><1>Sign in</1></0>"
 msgstr "Hai già un account? <0><1>Accedi</1></0>"

-#: src/views/settings/index.tsx:99
+#: src/views/settings/index.tsx:100
 msgid "An error occurred while disconnecting your Trello account."
 msgstr "Si è verificato un errore durante la disconnessione del tuo account Trello."

-#: src/views/settings/index.tsx:256
+#: src/views/settings/index.tsx:257
 msgid "API keys"
 msgstr "Chiavi API"

@@ -165,12 +165,12 @@ msgstr "Backlog"
 msgid "Basic Kanban"
 msgstr "Kanban base"

-#: src/views/settings/index.tsx:195
+#: src/views/settings/index.tsx:196
 #: src/views/boards/components/TemplateBoards.tsx:55
 msgid "Billing"
 msgstr "Fatturazione"

-#: src/views/settings/index.tsx:205
+#: src/views/settings/index.tsx:206
 msgid "Billing portal"
 msgstr "Portale di fatturazione"

@@ -178,7 +178,7 @@ msgstr "Portale di fatturazione"
 msgid "Blog Post"
 msgstr "Post del blog"

-#: src/views/board/index.tsx:240
+#: src/views/board/index.tsx:241
 msgid "Board"
 msgstr "Bacheca"

@@ -190,7 +190,7 @@ msgstr "Il nome della bacheca non può superare i 100 caratteri"
 msgid "Board name is required"
 msgstr "Il nome della bacheca è obbligatorio"

-#: src/views/board/index.tsx:266
+#: src/views/board/index.tsx:267
 msgid "Board not found"
 msgstr "Bacheca non trovata"

@@ -218,13 +218,13 @@ msgstr "Visibilità bacheca"
 msgid "Board visibility updated"
 msgstr "Visibilità della bacheca aggiornata"

-#: src/views/boards/index.tsx:26
-#: src/components/SideNavigation.tsx:39
+#: src/views/boards/index.tsx:27
+#: src/components/SideNavigation.tsx:68
 msgid "Boards"
 msgstr "Bacheche"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/boards/index.tsx:22
+#: src/views/boards/index.tsx:23
 msgid "Boards | {0}"
 msgstr "Bacheche | {0}"

@@ -250,7 +250,7 @@ msgstr "Segnalazione bug"
 msgid "Cancel"
 msgstr "Annulla"

-#: src/views/card/index.tsx:233
+#: src/views/card/index.tsx:234
 msgid "Card not found"
 msgstr "Carta non trovata"

@@ -258,7 +258,7 @@ msgstr "Carta non trovata"
 msgid "Card title"
 msgstr "Titolo della carta"

-#: src/views/settings/index.tsx:187
+#: src/views/settings/index.tsx:188
 msgid "Change the language of the app."
 msgstr "Cambia la lingua dell'app."

@@ -308,7 +308,7 @@ msgstr "Controllo e proprietà completi:"
 msgid "Confirm URL change"
 msgstr "Conferma modifica URL"

-#: src/views/settings/index.tsx:232
+#: src/views/settings/index.tsx:233
 #: src/views/boards/components/ImportBoardsForm.tsx:157
 msgid "Connect Trello"
 msgstr "Connetti Trello"
@@ -317,7 +317,7 @@ msgstr "Connetti Trello"
 msgid "Connect your favorite tools to streamline your workflow."
 msgstr "Connetti i tuoi strumenti preferiti per semplificare il tuo flusso di lavoro."

-#: src/views/settings/index.tsx:219
+#: src/views/settings/index.tsx:220
 msgid "Connect your Trello account to import boards."
 msgstr "Connetti il tuo account Trello per importare le bacheche."

@@ -325,7 +325,7 @@ msgstr "Connetti il tuo account Trello per importare le bacheche."
 msgid "Contact"
 msgstr "Contatti"

-#: src/components/FeedbackButton.tsx:121
+#: src/components/FeedbackModal.tsx:100
 msgid "Contact us"
 msgstr "Contattaci"

@@ -333,12 +333,12 @@ msgstr "Contattaci"
 msgid "Content Creation"
 msgstr "Creazione contenuti"

-#: src/components/AuthForm.tsx:334
+#: src/components/AuthForm.tsx:335
 msgid "Continue with "
 msgstr "Continua con "

 #. placeholder {0}: provider.name
-#: src/components/AuthForm.tsx:268
+#: src/components/AuthForm.tsx:269
 msgid "Continue with {0}"
 msgstr "Continua con {0}"

@@ -381,11 +381,11 @@ msgstr "Crea nuova chiave"
 msgid "Create new label"
 msgstr "Crea nuova etichetta"

-#: src/views/board/index.tsx:334
+#: src/views/board/index.tsx:335
 msgid "Create new list"
 msgstr "Crea nuova lista"

-#: src/components/WorkspaceMenu.tsx:85
+#: src/components/WorkspaceMenu.tsx:116
 #: src/components/NewWorkspaceForm.tsx:93
 msgid "Create workspace"
 msgstr "Crea spazio di lavoro"
@@ -410,7 +410,7 @@ msgstr "Gli URL personalizzati sono una funzionalità premium. Sarai indirizzato
 msgid "Customer Support"
 msgstr "Assistenza clienti"

-#: src/components/UserMenu.tsx:112
+#: src/components/UserMenu.tsx:153
 msgid "Dark"
 msgstr "Scuro"

@@ -420,8 +420,8 @@ msgstr "Scuro"
 msgid "Delete"
 msgstr "Elimina"

-#: src/views/settings/index.tsx:287
-#: src/views/settings/index.tsx:297
+#: src/views/settings/index.tsx:288
+#: src/views/settings/index.tsx:298
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:96
 msgid "Delete account"
 msgstr "Elimina account"
@@ -442,8 +442,8 @@ msgstr "Elimina commento"
 msgid "Delete list"
 msgstr "Elimina lista"

-#: src/views/settings/index.tsx:269
-#: src/views/settings/index.tsx:280
+#: src/views/settings/index.tsx:270
+#: src/views/settings/index.tsx:281
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:106
 msgid "Delete workspace"
 msgstr "Elimina spazio di lavoro"
@@ -452,7 +452,7 @@ msgstr "Elimina spazio di lavoro"
 msgid "Design"
 msgstr "Design"

-#: src/views/settings/index.tsx:247
+#: src/views/settings/index.tsx:248
 msgid "Disconnect Trello"
 msgstr "Disconnetti Trello"

@@ -460,7 +460,7 @@ msgstr "Disconnetti Trello"
 msgid "Discuss and collaborate on cards."
 msgstr "Discuti e collabora sulle schede."

-#: src/views/settings/index.tsx:148
+#: src/views/settings/index.tsx:149
 msgid "Display name"
 msgstr "Nome visualizzato"

@@ -480,7 +480,7 @@ msgstr "Nome visualizzato aggiornato"
 msgid "Do you offer a free plan?"
 msgstr "Offrite un piano gratuito?"

-#: src/components/FeedbackButton.tsx:130
+#: src/components/FeedbackModal.tsx:109
 msgid "docs"
 msgstr "documenti"

@@ -490,6 +490,7 @@ msgstr "Documenti"

 #: src/views/home/components/Footer.tsx:77
 #: src/views/boards/components/TemplateBoards.tsx:23
+#: src/components/UserMenu.tsx:191
 msgid "Documentation"
 msgstr "Documentazione"

@@ -525,7 +526,7 @@ msgstr "Modifica URL dell'area di lavoro"
 msgid "Editing"
 msgstr "Modifica"

-#: src/components/AuthForm.tsx:336
+#: src/components/AuthForm.tsx:337
 msgid "email"
 msgstr "email"

@@ -537,15 +538,15 @@ msgstr "Email"
 msgid "Enhancement"
 msgstr "Miglioramento"

-#: src/components/AuthForm.tsx:301
+#: src/components/AuthForm.tsx:302
 msgid "Enter your email address"
 msgstr "Inserisci il tuo indirizzo email"

-#: src/components/AuthForm.tsx:289
+#: src/components/AuthForm.tsx:290
 msgid "Enter your name"
 msgstr "Inserisci il tuo nome"

-#: src/components/AuthForm.tsx:314
+#: src/components/AuthForm.tsx:315
 msgid "Enter your password"
 msgstr "Inserisci la tua password"

@@ -557,7 +558,7 @@ msgstr "Errore durante l'eliminazione dell'account"
 msgid "Error deleting workspace"
 msgstr "Errore durante l'eliminazione dell'area di lavoro"

-#: src/views/settings/index.tsx:98
+#: src/views/settings/index.tsx:99
 msgid "Error disconnecting Trello"
 msgstr "Errore durante la disconnessione da Trello"

@@ -565,7 +566,7 @@ msgstr "Errore durante la disconnessione da Trello"
 msgid "Error updating display name"
 msgstr "Errore durante l'aggiornamento del nome visualizzato"

-#: src/views/settings/components/Avatar.tsx:37
+#: src/views/settings/components/Avatar.tsx:39
 msgid "Error updating profile image"
 msgstr "Errore durante l'aggiornamento dell'immagine del profilo"

@@ -581,8 +582,8 @@ msgstr "Errore durante l'aggiornamento del nome dell'area di lavoro"
 msgid "Error updating workspace URL"
 msgstr "Errore durante l'aggiornamento dell'URL dell'area di lavoro"

-#: src/views/settings/components/Avatar.tsx:54
-#: src/views/settings/components/Avatar.tsx:95
+#: src/views/settings/components/Avatar.tsx:56
+#: src/views/settings/components/Avatar.tsx:97
 msgid "Error uploading profile image"
 msgstr "Errore durante il caricamento dell'immagine del profilo"

@@ -622,11 +623,12 @@ msgstr "Richiesta funzionalità"
 msgid "Features"
 msgstr "Funzionalità"

-#: src/components/FeedbackButton.tsx:78
+#: src/components/UserMenu.tsx:199
+#: src/components/FeedbackModal.tsx:59
 msgid "Feedback"
 msgstr "Feedback"

-#: src/components/FeedbackButton.tsx:38
+#: src/components/FeedbackModal.tsx:33
 msgid "Feedback sent"
 msgstr "Feedback inviato"

@@ -674,7 +676,7 @@ msgstr "Inizia ora"
 msgid "Get started by creating a new board"
 msgstr "Inizia creando una nuova bacheca"

-#: src/views/board/index.tsx:326
+#: src/views/board/index.tsx:327
 msgid "Get started by creating a new list"
 msgstr "Inizia creando una nuova lista"

@@ -747,11 +749,11 @@ msgstr "Riconosco che tutti i dati dell'area di lavoro saranno eliminati permane
 msgid "Ideas"
 msgstr "Idee"

-#: src/components/FeedbackButton.tsx:98
+#: src/components/FeedbackModal.tsx:75
 msgid "Ideas to improve this page..."
 msgstr "Idee per migliorare questa pagina..."

-#: src/views/boards/index.tsx:37
+#: src/views/boards/index.tsx:38
 msgid "Import"
 msgstr "Importa"

@@ -797,7 +799,7 @@ msgstr "Integrazioni"
 msgid "Interviewing"
 msgstr "Colloquio"

-#: src/views/members/index.tsx:168
+#: src/views/members/index.tsx:169
 msgid "Invite"
 msgstr "Invita"

@@ -823,7 +825,7 @@ msgstr "Kanban reinventato"
 msgid "Keep in mind that this action is irreversible."
 msgstr "Tieni presente che questa azione è irreversibile."

-#: src/views/card/index.tsx:112
+#: src/views/card/index.tsx:113
 #: src/views/board/components/NewCardForm.tsx:331
 #: src/views/board/components/Filters.tsx:101
 msgid "Labels"
@@ -833,7 +835,7 @@ msgstr "Etichette"
 msgid "Labels & Filters"
 msgstr "Etichette & Filtri"

-#: src/views/settings/index.tsx:184
+#: src/views/settings/index.tsx:185
 msgid "Language"
 msgstr "Lingua"

@@ -849,7 +851,7 @@ msgstr "Legale"
 msgid "License"
 msgstr "Licenza"

-#: src/components/UserMenu.tsx:126
+#: src/components/UserMenu.tsx:167
 msgid "Light"
 msgstr "Chiaro"

@@ -857,7 +859,7 @@ msgstr "Chiaro"
 msgid "Link copied"
 msgstr "Link copiato"

-#: src/views/card/index.tsx:104
+#: src/views/card/index.tsx:105
 msgid "List"
 msgstr "Lista"

@@ -869,7 +871,7 @@ msgstr "Nome lista"
 msgid "Login | kan.bn"
 msgstr "Login | kan.bn"

-#: src/components/UserMenu.tsx:136
+#: src/components/UserMenu.tsx:209
 msgid "Logout"
 msgstr "Esci"

@@ -881,7 +883,7 @@ msgstr "A lungo termine"
 msgid "Low Priority"
 msgstr "Bassa priorità"

-#: src/components/AuthForm.tsx:337
+#: src/components/AuthForm.tsx:338
 msgid "magic link"
 msgstr "link magico"

@@ -889,16 +891,16 @@ msgstr "link magico"
 msgid "Medium Priority"
 msgstr "Media priorità"

-#: src/views/members/index.tsx:160
-#: src/views/card/index.tsx:120
+#: src/views/members/index.tsx:161
+#: src/views/card/index.tsx:121
 #: src/views/board/components/NewCardForm.tsx:290
 #: src/views/board/components/Filters.tsx:93
-#: src/components/SideNavigation.tsx:44
+#: src/components/SideNavigation.tsx:73
 msgid "Members"
 msgstr "Membri"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/members/index.tsx:156
+#: src/views/members/index.tsx:157
 msgid "Members | {0}"
 msgstr "Membri | {0}"

@@ -919,11 +921,11 @@ msgstr "ha spostato la scheda in un'altra lista"
 msgid "Name"
 msgstr "Nome"

-#: src/components/FeedbackButton.tsx:116
+#: src/components/FeedbackModal.tsx:95
 msgid "Need help?"
 msgstr "Hai bisogno di aiuto?"

-#: src/views/boards/index.tsx:47
+#: src/views/boards/index.tsx:48
 msgid "New"
 msgstr "Nuovo"

@@ -943,7 +945,7 @@ msgstr "Nuova importazione"
 msgid "New label"
 msgstr "Nuova etichetta"

-#: src/views/board/index.tsx:303
+#: src/views/board/index.tsx:304
 #: src/views/board/components/NewListForm.tsx:112
 msgid "New list"
 msgstr "Nuova lista"
@@ -976,7 +978,7 @@ msgstr "Nessuna bacheca trovata"
 msgid "No credit card required"
 msgstr "Nessuna carta di credito richiesta"

-#: src/views/board/index.tsx:323
+#: src/views/board/index.tsx:324
 msgid "No lists"
 msgstr "Nessuna lista"

@@ -988,15 +990,15 @@ msgstr "Offerta"
 msgid "Onboarding"
 msgstr "Inserimento"

-#: src/views/settings/index.tsx:290
+#: src/views/settings/index.tsx:291
 msgid "Once you delete your account, there is no going back. This action cannot be undone."
 msgstr "Una volta eliminato il tuo account, non si può tornare indietro. Questa azione non può essere annullata."

-#: src/views/settings/index.tsx:272
+#: src/views/settings/index.tsx:273
 msgid "Once you delete your workspace, there is no going back. This action cannot be undone."
 msgstr "Una volta eliminata l'area di lavoro, non si può tornare indietro. Questa azione non può essere annullata."

-#: src/components/AuthForm.tsx:279
+#: src/components/AuthForm.tsx:280
 msgid "or"
 msgstr "o"

@@ -1016,7 +1018,7 @@ msgstr "Part-time"
 msgid "Payment frequency"
 msgstr "Frequenza di pagamento"

-#: src/views/members/index.tsx:117
+#: src/views/members/index.tsx:118
 msgid "Pending"
 msgstr "In attesa"

@@ -1033,19 +1035,19 @@ msgstr "Progetto personale"
 msgid "Planning"
 msgstr "Pianificazione"

-#: src/components/AuthForm.tsx:305
+#: src/components/AuthForm.tsx:306
 msgid "Please enter a valid email address"
 msgstr "Inserisci un indirizzo email valido"

-#: src/components/AuthForm.tsx:293
+#: src/components/AuthForm.tsx:294
 msgid "Please enter a valid name"
 msgstr "Inserisci un nome valido"

-#: src/components/AuthForm.tsx:318
+#: src/components/AuthForm.tsx:319
 msgid "Please enter a valid password"
 msgstr "Inserisci una password valida"

-#: src/views/settings/components/Avatar.tsx:55
+#: src/views/settings/components/Avatar.tsx:57
 msgid "Please select a file to upload."
 msgstr "Seleziona un file da caricare."

@@ -1055,10 +1057,10 @@ msgstr "Seleziona un file da caricare."
 #: src/views/settings/components/UpdateDisplayNameForm.tsx:55
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:46
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:40
-#: src/views/settings/components/Avatar.tsx:38
-#: src/views/settings/components/Avatar.tsx:96
+#: src/views/settings/components/Avatar.tsx:40
+#: src/views/settings/components/Avatar.tsx:98
 #: src/views/members/components/DeleteMemberConfirmation.tsx:28
-#: src/views/card/index.tsx:158
+#: src/views/card/index.tsx:159
 #: src/views/card/components/NewCommentForm.tsx:31
 #: src/views/card/components/MemberSelector.tsx:80
 #: src/views/card/components/ListSelector.tsx:53
@@ -1067,14 +1069,14 @@ msgstr "Seleziona un file da caricare."
 #: src/views/card/components/DeleteCardConfirmation.tsx:52
 #: src/views/card/components/Comment.tsx:62
 #: src/views/boards/components/ImportBoardsForm.tsx:205
-#: src/views/board/index.tsx:134
-#: src/views/board/index.tsx:190
+#: src/views/board/index.tsx:135
+#: src/views/board/index.tsx:191
 #: src/views/board/components/VisibilityButton.tsx:53
 #: src/views/board/components/UpdateBoardSlugForm.tsx:72
 #: src/views/board/components/NewListForm.tsx:78
 #: src/views/board/components/NewCardForm.tsx:128
 #: src/components/NewWorkspaceForm.tsx:41
-#: src/components/FeedbackButton.tsx:46
+#: src/components/FeedbackModal.tsx:41
 msgid "Please try again later, or contact customer support."
 msgstr "Riprova più tardi o contatta l'assistenza clienti."

@@ -1096,11 +1098,11 @@ msgstr "Informativa sulla privacy"
 msgid "Private"
 msgstr "Privato"

-#: src/views/settings/components/Avatar.tsx:24
+#: src/views/settings/components/Avatar.tsx:26
 msgid "Profile image updated"
 msgstr "Immagine del profilo aggiornata"

-#: src/views/settings/index.tsx:143
+#: src/views/settings/index.tsx:144
 msgid "Profile picture"
 msgstr "Immagine del profilo"

@@ -1136,7 +1138,7 @@ msgstr "Remoto"
 msgid "Remove"
 msgstr "Rimuovi"

-#: src/views/members/index.tsx:131
+#: src/views/members/index.tsx:132
 msgid "Remove member"
 msgstr "Rimuovi membro"

@@ -1177,7 +1179,7 @@ msgstr "Revoca"
 msgid "Roadmap"
 msgstr "Roadmap"

-#: src/views/members/index.tsx:190
+#: src/views/members/index.tsx:191
 msgid "Role"
 msgstr "Ruolo"

@@ -1217,21 +1219,21 @@ msgstr "Self host con Github"
 msgid "self-assigned the card"
 msgstr "si è auto-assegnato la scheda"

-#: src/components/FeedbackButton.tsx:137
-msgid "Send"
-msgstr "Invia"
+#: src/components/FeedbackModal.tsx:116
+msgid "Send feedback"
+msgstr "Invia feedback"

 #: src/views/boards/components/TemplateBoards.tsx:69
 msgid "Senior"
 msgstr "Senior"

-#: src/views/settings/index.tsx:137
-#: src/components/SideNavigation.tsx:49
+#: src/views/settings/index.tsx:138
+#: src/components/SideNavigation.tsx:78
 msgid "Settings"
 msgstr "Impostazioni"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/settings/index.tsx:133
+#: src/views/settings/index.tsx:134
 msgid "Settings | {0}"
 msgstr "Impostazioni | {0}"

@@ -1253,7 +1255,7 @@ msgstr "Registrazione disabilitata"
 msgid "Sign up is currently disabled. Please try again later."
 msgstr "La registrazione è attualmente disabilitata. Riprova più tardi."

-#: src/components/AuthForm.tsx:334
+#: src/components/AuthForm.tsx:335
 msgid "Sign up with "
 msgstr "Registrati con "

@@ -1282,11 +1284,15 @@ msgstr "Metti una stella su Github"
 msgid "Success"
 msgstr "Operazione riuscita"

+#: src/components/UserMenu.tsx:180
+msgid "Support"
+msgstr "Supporto"
+
 #: src/views/home/components/Pricing.tsx:57
 msgid "Support the development of the project"
 msgstr "Sostieni lo sviluppo del progetto"

-#: src/components/UserMenu.tsx:98
+#: src/components/UserMenu.tsx:139
 msgid "System"
 msgstr "Sistema"

@@ -1302,7 +1308,7 @@ msgstr "Template"
 msgid "Terms of service"
 msgstr "Termini di servizio"

-#: src/components/FeedbackButton.tsx:39
+#: src/components/FeedbackModal.tsx:34
 msgid "Thank you for your feedback!"
 msgstr "Grazie per il tuo feedback!"

@@ -1319,7 +1325,7 @@ msgstr "L'alternativa open source <0/> a Trello"
 msgid "The visibility of your board has been set to {0}."
 msgstr "La visibilità della tua bacheca è stata impostata su {0}."

-#: src/components/UserMenu.tsx:85
+#: src/components/UserMenu.tsx:126
 msgid "Theme"
 msgstr "Tema"

@@ -1361,7 +1367,7 @@ msgstr "Attiva/disattiva menu"
 msgid "Track all card changes with detailed activity history."
 msgstr "Tieni traccia di tutte le modifiche alle schede con una cronologia dettagliata delle attività."

-#: src/views/settings/index.tsx:91
+#: src/views/settings/index.tsx:92
 msgid "Trello disconnected"
 msgstr "Trello disconnesso"

@@ -1401,7 +1407,7 @@ msgstr "Impossibile eliminare il commento"
 msgid "Unable to remove member"
 msgstr "Impossibile rimuovere il membro"

-#: src/components/FeedbackButton.tsx:45
+#: src/components/FeedbackModal.tsx:40
 msgid "Unable to send feedback"
 msgstr "Impossibile inviare feedback"

@@ -1413,8 +1419,8 @@ msgstr "Impossibile aggiornare l'URL della bacheca"
 msgid "Unable to update board visibility"
 msgstr "Impossibile aggiornare la visibilità della bacheca"

-#: src/views/card/index.tsx:157
-#: src/views/board/index.tsx:189
+#: src/views/card/index.tsx:158
+#: src/views/board/index.tsx:190
 msgid "Unable to update card"
 msgstr "Impossibile aggiornare la scheda"

@@ -1427,7 +1433,7 @@ msgid "Unable to update labels"
 msgstr "Impossibile aggiornare le etichette"

 #: src/views/card/components/ListSelector.tsx:52
-#: src/views/board/index.tsx:133
+#: src/views/board/index.tsx:134
 msgid "Unable to update list"
 msgstr "Impossibile aggiornare la lista"

@@ -1516,7 +1522,7 @@ msgstr "L'URL deve contenere almeno 3 caratteri"
 msgid "Use template"
 msgstr "Usa template"

-#: src/views/members/index.tsx:184
+#: src/views/members/index.tsx:185
 msgid "User"
 msgstr "Utente"

@@ -1524,11 +1530,11 @@ msgstr "Utente"
 msgid "Video"
 msgstr "Video"

-#: src/views/settings/index.tsx:259
+#: src/views/settings/index.tsx:260
 msgid "View and manage your API keys."
 msgstr "Visualizza e gestisci le tue chiavi API."

-#: src/views/settings/index.tsx:198
+#: src/views/settings/index.tsx:199
 msgid "View and manage your billing and subscription."
 msgstr "Visualizza e gestisci la tua fatturazione e abbonamento."

@@ -1572,7 +1578,7 @@ msgstr "Quando Trello fu lanciato nel 2011, stupì tutti con la sua semplicità
 msgid "Why make an open source Trello?"
 msgstr "Perché creare un Trello open source?"

-#: src/views/board/index.tsx:240
+#: src/views/board/index.tsx:241
 msgid "Workspace"
 msgstr "Spazio di lavoro"

@@ -1580,7 +1586,7 @@ msgstr "Spazio di lavoro"
 msgid "Workspace deleted"
 msgstr "Spazio di lavoro eliminato"

-#: src/views/settings/index.tsx:174
+#: src/views/settings/index.tsx:175
 msgid "Workspace description"
 msgstr "Descrizione dello spazio di lavoro"

@@ -1601,7 +1607,7 @@ msgstr "Descrizione dell'area di lavoro aggiornata"
 msgid "Workspace members"
 msgstr "Membri del workspace"

-#: src/views/settings/index.tsx:155
+#: src/views/settings/index.tsx:156
 #: src/components/NewWorkspaceForm.tsx:80
 msgid "Workspace name"
 msgstr "Nome dello spazio di lavoro"
@@ -1622,7 +1628,7 @@ msgstr "Nome dello spazio di lavoro aggiornato"
 msgid "Workspace slug updated"
 msgstr "Slug dell'area di lavoro aggiornato"

-#: src/views/settings/index.tsx:164
+#: src/views/settings/index.tsx:165
 msgid "Workspace URL"
 msgstr "URL dello spazio di lavoro"

@@ -1670,15 +1676,15 @@ msgstr "Le tue bacheche sono state importate."
 msgid "Your display name has been updated."
 msgstr "Il tuo nome visualizzato è stato aggiornato."

-#: src/views/settings/components/Avatar.tsx:25
+#: src/views/settings/components/Avatar.tsx:27
 msgid "Your profile image has been updated."
 msgstr "La tua immagine del profilo è stata aggiornata."

-#: src/views/settings/index.tsx:92
+#: src/views/settings/index.tsx:93
 msgid "Your Trello account has been disconnected."
 msgstr "Il tuo account Trello è stato disconnesso."

-#: src/views/settings/index.tsx:241
+#: src/views/settings/index.tsx:242
 msgid "Your Trello account is connected."
 msgstr "Il tuo account Trello è connesso."

--- a/apps/web/src/locales/it/messages.ts
+++ b/apps/web/src/locales/it/messages.ts
--- a/apps/web/src/locales/nl/messages.po
+++ b/apps/web/src/locales/nl/messages.po
@@ -17,13 +17,13 @@ msgstr ""
 msgid " (edited)"
 msgstr " (bewerkt)"

-#: src/components/FeedbackButton.tsx:123
+#: src/components/FeedbackModal.tsx:102
 msgid ", or see our"
 msgstr ", of bekijk onze"

 #. placeholder {0}: card?.title ?? "Card"
 #. placeholder {1}: board?.name ?? "Board"
-#: src/views/card/index.tsx:188
+#: src/views/card/index.tsx:189
 msgid "{0} | {1}"
 msgstr "{0} | {1}"

@@ -49,7 +49,7 @@ msgid "Account deleted"
 msgstr "Account verwijderd"

 #: src/views/public/board/CardModal.tsx:104
-#: src/views/card/index.tsx:255
+#: src/views/card/index.tsx:256
 msgid "Activity"
 msgstr "Activiteit"

@@ -108,11 +108,11 @@ msgstr "Alle systemen operationeel"
 msgid "Already have an account? <0><1>Sign in</1></0>"
 msgstr "Heb je al een account? <0><1>Log in</1></0>"

-#: src/views/settings/index.tsx:99
+#: src/views/settings/index.tsx:100
 msgid "An error occurred while disconnecting your Trello account."
 msgstr "Er is een fout opgetreden bij het verbreken van de verbinding met je Trello-account."

-#: src/views/settings/index.tsx:256
+#: src/views/settings/index.tsx:257
 msgid "API keys"
 msgstr "API-sleutels"

@@ -165,12 +165,12 @@ msgstr "Backlog"
 msgid "Basic Kanban"
 msgstr "Basis kanban"

-#: src/views/settings/index.tsx:195
+#: src/views/settings/index.tsx:196
 #: src/views/boards/components/TemplateBoards.tsx:55
 msgid "Billing"
 msgstr "Facturering"

-#: src/views/settings/index.tsx:205
+#: src/views/settings/index.tsx:206
 msgid "Billing portal"
 msgstr "Factureringsportaal"

@@ -178,7 +178,7 @@ msgstr "Factureringsportaal"
 msgid "Blog Post"
 msgstr "Blogbericht"

-#: src/views/board/index.tsx:240
+#: src/views/board/index.tsx:241
 msgid "Board"
 msgstr "Bord"

@@ -190,7 +190,7 @@ msgstr "Bordnaam mag niet langer zijn dan 100 tekens"
 msgid "Board name is required"
 msgstr "Bordnaam is verplicht"

-#: src/views/board/index.tsx:266
+#: src/views/board/index.tsx:267
 msgid "Board not found"
 msgstr "Bord niet gevonden"

@@ -218,13 +218,13 @@ msgstr "Bordzichtbaarheid"
 msgid "Board visibility updated"
 msgstr "Zichtbaarheid van bord bijgewerkt"

-#: src/views/boards/index.tsx:26
-#: src/components/SideNavigation.tsx:39
+#: src/views/boards/index.tsx:27
+#: src/components/SideNavigation.tsx:68
 msgid "Boards"
 msgstr "Borden"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/boards/index.tsx:22
+#: src/views/boards/index.tsx:23
 msgid "Boards | {0}"
 msgstr "Borden | {0}"

@@ -250,7 +250,7 @@ msgstr "Bugrapport"
 msgid "Cancel"
 msgstr "Annuleren"

-#: src/views/card/index.tsx:233
+#: src/views/card/index.tsx:234
 msgid "Card not found"
 msgstr "Kaart niet gevonden"

@@ -258,7 +258,7 @@ msgstr "Kaart niet gevonden"
 msgid "Card title"
 msgstr "Kaarttitel"

-#: src/views/settings/index.tsx:187
+#: src/views/settings/index.tsx:188
 msgid "Change the language of the app."
 msgstr "Wijzig de taal van de app."

@@ -308,7 +308,7 @@ msgstr "Volledige controle en eigendom:"
 msgid "Confirm URL change"
 msgstr "URL-wijziging bevestigen"

-#: src/views/settings/index.tsx:232
+#: src/views/settings/index.tsx:233
 #: src/views/boards/components/ImportBoardsForm.tsx:157
 msgid "Connect Trello"
 msgstr "Verbind Trello"
@@ -317,7 +317,7 @@ msgstr "Verbind Trello"
 msgid "Connect your favorite tools to streamline your workflow."
 msgstr "Verbind je favoriete tools om je werkstroom te stroomlijnen."

-#: src/views/settings/index.tsx:219
+#: src/views/settings/index.tsx:220
 msgid "Connect your Trello account to import boards."
 msgstr "Verbind je Trello-account om borden te importeren."

@@ -325,7 +325,7 @@ msgstr "Verbind je Trello-account om borden te importeren."
 msgid "Contact"
 msgstr "Contact"

-#: src/components/FeedbackButton.tsx:121
+#: src/components/FeedbackModal.tsx:100
 msgid "Contact us"
 msgstr "Neem contact op"

@@ -333,12 +333,12 @@ msgstr "Neem contact op"
 msgid "Content Creation"
 msgstr "Content creatie"

-#: src/components/AuthForm.tsx:334
+#: src/components/AuthForm.tsx:335
 msgid "Continue with "
 msgstr "Doorgaan met "

 #. placeholder {0}: provider.name
-#: src/components/AuthForm.tsx:268
+#: src/components/AuthForm.tsx:269
 msgid "Continue with {0}"
 msgstr "Doorgaan met {0}"

@@ -381,11 +381,11 @@ msgstr "Nieuwe sleutel aanmaken"
 msgid "Create new label"
 msgstr "Maak nieuw label"

-#: src/views/board/index.tsx:334
+#: src/views/board/index.tsx:335
 msgid "Create new list"
 msgstr "Maak nieuwe lijst"

-#: src/components/WorkspaceMenu.tsx:85
+#: src/components/WorkspaceMenu.tsx:116
 #: src/components/NewWorkspaceForm.tsx:93
 msgid "Create workspace"
 msgstr "Werkruimte maken"
@@ -410,7 +410,7 @@ msgstr "Aangepaste URL's zijn een premium functie. Je wordt doorgestuurd om je a
 msgid "Customer Support"
 msgstr "Klantenservice"

-#: src/components/UserMenu.tsx:112
+#: src/components/UserMenu.tsx:153
 msgid "Dark"
 msgstr "Donker"

@@ -420,8 +420,8 @@ msgstr "Donker"
 msgid "Delete"
 msgstr "Verwijderen"

-#: src/views/settings/index.tsx:287
-#: src/views/settings/index.tsx:297
+#: src/views/settings/index.tsx:288
+#: src/views/settings/index.tsx:298
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:96
 msgid "Delete account"
 msgstr "Account verwijderen"
@@ -442,8 +442,8 @@ msgstr "Reactie verwijderen"
 msgid "Delete list"
 msgstr "Lijst verwijderen"

-#: src/views/settings/index.tsx:269
-#: src/views/settings/index.tsx:280
+#: src/views/settings/index.tsx:270
+#: src/views/settings/index.tsx:281
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:106
 msgid "Delete workspace"
 msgstr "Werkruimte verwijderen"
@@ -452,7 +452,7 @@ msgstr "Werkruimte verwijderen"
 msgid "Design"
 msgstr "Ontwerp"

-#: src/views/settings/index.tsx:247
+#: src/views/settings/index.tsx:248
 msgid "Disconnect Trello"
 msgstr "Trello ontkoppelen"

@@ -460,7 +460,7 @@ msgstr "Trello ontkoppelen"
 msgid "Discuss and collaborate on cards."
 msgstr "Bespreek en werk samen aan kaarten."

-#: src/views/settings/index.tsx:148
+#: src/views/settings/index.tsx:149
 msgid "Display name"
 msgstr "Weergavenaam"

@@ -480,7 +480,7 @@ msgstr "Weergavenaam bijgewerkt"
 msgid "Do you offer a free plan?"
 msgstr "Bieden jullie een gratis abonnement aan?"

-#: src/components/FeedbackButton.tsx:130
+#: src/components/FeedbackModal.tsx:109
 msgid "docs"
 msgstr "docs"

@@ -490,6 +490,7 @@ msgstr "Docs"

 #: src/views/home/components/Footer.tsx:77
 #: src/views/boards/components/TemplateBoards.tsx:23
+#: src/components/UserMenu.tsx:191
 msgid "Documentation"
 msgstr "Documentatie"

@@ -525,7 +526,7 @@ msgstr "Werkruimte-URL bewerken"
 msgid "Editing"
 msgstr "Bewerken"

-#: src/components/AuthForm.tsx:336
+#: src/components/AuthForm.tsx:337
 msgid "email"
 msgstr "e-mail"

@@ -537,15 +538,15 @@ msgstr "E-mail"
 msgid "Enhancement"
 msgstr "Verbetering"

-#: src/components/AuthForm.tsx:301
+#: src/components/AuthForm.tsx:302
 msgid "Enter your email address"
 msgstr "Voer je e-mailadres in"

-#: src/components/AuthForm.tsx:289
+#: src/components/AuthForm.tsx:290
 msgid "Enter your name"
 msgstr "Voer je naam in"

-#: src/components/AuthForm.tsx:314
+#: src/components/AuthForm.tsx:315
 msgid "Enter your password"
 msgstr "Voer je wachtwoord in"

@@ -557,7 +558,7 @@ msgstr "Fout bij verwijderen account"
 msgid "Error deleting workspace"
 msgstr "Fout bij verwijderen werkruimte"

-#: src/views/settings/index.tsx:98
+#: src/views/settings/index.tsx:99
 msgid "Error disconnecting Trello"
 msgstr "Fout bij ontkoppelen van Trello"

@@ -565,7 +566,7 @@ msgstr "Fout bij ontkoppelen van Trello"
 msgid "Error updating display name"
 msgstr "Fout bij bijwerken weergavenaam"

-#: src/views/settings/components/Avatar.tsx:37
+#: src/views/settings/components/Avatar.tsx:39
 msgid "Error updating profile image"
 msgstr "Fout bij het bijwerken van profielafbeelding"

@@ -581,8 +582,8 @@ msgstr "Fout bij bijwerken naam werkruimte"
 msgid "Error updating workspace URL"
 msgstr "Fout bij het bijwerken van werkruimte-URL"

-#: src/views/settings/components/Avatar.tsx:54
-#: src/views/settings/components/Avatar.tsx:95
+#: src/views/settings/components/Avatar.tsx:56
+#: src/views/settings/components/Avatar.tsx:97
 msgid "Error uploading profile image"
 msgstr "Fout bij het uploaden van profielafbeelding"

@@ -622,11 +623,12 @@ msgstr "Functieverzoek"
 msgid "Features"
 msgstr "Functies"

-#: src/components/FeedbackButton.tsx:78
+#: src/components/UserMenu.tsx:199
+#: src/components/FeedbackModal.tsx:59
 msgid "Feedback"
 msgstr "Feedback"

-#: src/components/FeedbackButton.tsx:38
+#: src/components/FeedbackModal.tsx:33
 msgid "Feedback sent"
 msgstr "Feedback verzonden"

@@ -674,7 +676,7 @@ msgstr "Aan de slag"
 msgid "Get started by creating a new board"
 msgstr "Begin door een nieuw bord te maken"

-#: src/views/board/index.tsx:326
+#: src/views/board/index.tsx:327
 msgid "Get started by creating a new list"
 msgstr "Begin door een nieuwe lijst te maken"

@@ -747,11 +749,11 @@ msgstr "Ik bevestig dat alle gegevens van de werkruimte permanent worden verwijd
 msgid "Ideas"
 msgstr "Ideeën"

-#: src/components/FeedbackButton.tsx:98
+#: src/components/FeedbackModal.tsx:75
 msgid "Ideas to improve this page..."
 msgstr "Ideeën om deze pagina te verbeteren..."

-#: src/views/boards/index.tsx:37
+#: src/views/boards/index.tsx:38
 msgid "Import"
 msgstr "Importeren"

@@ -797,7 +799,7 @@ msgstr "Integraties"
 msgid "Interviewing"
 msgstr "Interviewen"

-#: src/views/members/index.tsx:168
+#: src/views/members/index.tsx:169
 msgid "Invite"
 msgstr "Uitnodigen"

@@ -823,7 +825,7 @@ msgstr "Kanban opnieuw uitgevonden"
 msgid "Keep in mind that this action is irreversible."
 msgstr "Houd er rekening mee dat deze actie onomkeerbaar is."

-#: src/views/card/index.tsx:112
+#: src/views/card/index.tsx:113
 #: src/views/board/components/NewCardForm.tsx:331
 #: src/views/board/components/Filters.tsx:101
 msgid "Labels"
@@ -833,7 +835,7 @@ msgstr "Labels"
 msgid "Labels & Filters"
 msgstr "Labels & filters"

-#: src/views/settings/index.tsx:184
+#: src/views/settings/index.tsx:185
 msgid "Language"
 msgstr "Taal"

@@ -849,7 +851,7 @@ msgstr "Juridisch"
 msgid "License"
 msgstr "Licentie"

-#: src/components/UserMenu.tsx:126
+#: src/components/UserMenu.tsx:167
 msgid "Light"
 msgstr "Licht"

@@ -857,7 +859,7 @@ msgstr "Licht"
 msgid "Link copied"
 msgstr "Link gekopieerd"

-#: src/views/card/index.tsx:104
+#: src/views/card/index.tsx:105
 msgid "List"
 msgstr "Lijst"

@@ -869,7 +871,7 @@ msgstr "Lijstnaam"
 msgid "Login | kan.bn"
 msgstr "Login | kan.bn"

-#: src/components/UserMenu.tsx:136
+#: src/components/UserMenu.tsx:209
 msgid "Logout"
 msgstr "Uitloggen"

@@ -881,7 +883,7 @@ msgstr "Lange termijn"
 msgid "Low Priority"
 msgstr "Lage prioriteit"

-#: src/components/AuthForm.tsx:337
+#: src/components/AuthForm.tsx:338
 msgid "magic link"
 msgstr "magische link"

@@ -889,16 +891,16 @@ msgstr "magische link"
 msgid "Medium Priority"
 msgstr "Gemiddelde prioriteit"

-#: src/views/members/index.tsx:160
-#: src/views/card/index.tsx:120
+#: src/views/members/index.tsx:161
+#: src/views/card/index.tsx:121
 #: src/views/board/components/NewCardForm.tsx:290
 #: src/views/board/components/Filters.tsx:93
-#: src/components/SideNavigation.tsx:44
+#: src/components/SideNavigation.tsx:73
 msgid "Members"
 msgstr "Leden"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/members/index.tsx:156
+#: src/views/members/index.tsx:157
 msgid "Members | {0}"
 msgstr "Leden | {0}"

@@ -919,11 +921,11 @@ msgstr "heeft de kaart naar een andere lijst verplaatst"
 msgid "Name"
 msgstr "Naam"

-#: src/components/FeedbackButton.tsx:116
+#: src/components/FeedbackModal.tsx:95
 msgid "Need help?"
 msgstr "Hulp nodig?"

-#: src/views/boards/index.tsx:47
+#: src/views/boards/index.tsx:48
 msgid "New"
 msgstr "Nieuw"

@@ -943,7 +945,7 @@ msgstr "Nieuwe import"
 msgid "New label"
 msgstr "Nieuw label"

-#: src/views/board/index.tsx:303
+#: src/views/board/index.tsx:304
 #: src/views/board/components/NewListForm.tsx:112
 msgid "New list"
 msgstr "Nieuwe lijst"
@@ -976,7 +978,7 @@ msgstr "Geen borden gevonden"
 msgid "No credit card required"
 msgstr "Geen creditcard vereist"

-#: src/views/board/index.tsx:323
+#: src/views/board/index.tsx:324
 msgid "No lists"
 msgstr "Geen lijsten"

@@ -988,15 +990,15 @@ msgstr "Aanbod"
 msgid "Onboarding"
 msgstr "Inwerktraject"

-#: src/views/settings/index.tsx:290
+#: src/views/settings/index.tsx:291
 msgid "Once you delete your account, there is no going back. This action cannot be undone."
 msgstr "Zodra je je account verwijdert, is er geen weg terug. Deze actie kan niet ongedaan worden gemaakt."

-#: src/views/settings/index.tsx:272
+#: src/views/settings/index.tsx:273
 msgid "Once you delete your workspace, there is no going back. This action cannot be undone."
 msgstr "Zodra je je werkruimte verwijdert, is er geen weg terug. Deze actie kan niet ongedaan worden gemaakt."

-#: src/components/AuthForm.tsx:279
+#: src/components/AuthForm.tsx:280
 msgid "or"
 msgstr "of"

@@ -1016,7 +1018,7 @@ msgstr "Deeltijd"
 msgid "Payment frequency"
 msgstr "Betalingsfrequentie"

-#: src/views/members/index.tsx:117
+#: src/views/members/index.tsx:118
 msgid "Pending"
 msgstr "In behandeling"

@@ -1033,19 +1035,19 @@ msgstr "Persoonlijk project"
 msgid "Planning"
 msgstr "Planning"

-#: src/components/AuthForm.tsx:305
+#: src/components/AuthForm.tsx:306
 msgid "Please enter a valid email address"
 msgstr "Voer een geldig e-mailadres in"

-#: src/components/AuthForm.tsx:293
+#: src/components/AuthForm.tsx:294
 msgid "Please enter a valid name"
 msgstr "Voer een geldige naam in"

-#: src/components/AuthForm.tsx:318
+#: src/components/AuthForm.tsx:319
 msgid "Please enter a valid password"
 msgstr "Voer een geldig wachtwoord in"

-#: src/views/settings/components/Avatar.tsx:55
+#: src/views/settings/components/Avatar.tsx:57
 msgid "Please select a file to upload."
 msgstr "Selecteer een bestand om te uploaden."

@@ -1055,10 +1057,10 @@ msgstr "Selecteer een bestand om te uploaden."
 #: src/views/settings/components/UpdateDisplayNameForm.tsx:55
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:46
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:40
-#: src/views/settings/components/Avatar.tsx:38
-#: src/views/settings/components/Avatar.tsx:96
+#: src/views/settings/components/Avatar.tsx:40
+#: src/views/settings/components/Avatar.tsx:98
 #: src/views/members/components/DeleteMemberConfirmation.tsx:28
-#: src/views/card/index.tsx:158
+#: src/views/card/index.tsx:159
 #: src/views/card/components/NewCommentForm.tsx:31
 #: src/views/card/components/MemberSelector.tsx:80
 #: src/views/card/components/ListSelector.tsx:53
@@ -1067,14 +1069,14 @@ msgstr "Selecteer een bestand om te uploaden."
 #: src/views/card/components/DeleteCardConfirmation.tsx:52
 #: src/views/card/components/Comment.tsx:62
 #: src/views/boards/components/ImportBoardsForm.tsx:205
-#: src/views/board/index.tsx:134
-#: src/views/board/index.tsx:190
+#: src/views/board/index.tsx:135
+#: src/views/board/index.tsx:191
 #: src/views/board/components/VisibilityButton.tsx:53
 #: src/views/board/components/UpdateBoardSlugForm.tsx:72
 #: src/views/board/components/NewListForm.tsx:78
 #: src/views/board/components/NewCardForm.tsx:128
 #: src/components/NewWorkspaceForm.tsx:41
-#: src/components/FeedbackButton.tsx:46
+#: src/components/FeedbackModal.tsx:41
 msgid "Please try again later, or contact customer support."
 msgstr "Probeer het later opnieuw of neem contact op met de klantenservice."

@@ -1096,11 +1098,11 @@ msgstr "Privacybeleid"
 msgid "Private"
 msgstr "Privé"

-#: src/views/settings/components/Avatar.tsx:24
+#: src/views/settings/components/Avatar.tsx:26
 msgid "Profile image updated"
 msgstr "Profielafbeelding bijgewerkt"

-#: src/views/settings/index.tsx:143
+#: src/views/settings/index.tsx:144
 msgid "Profile picture"
 msgstr "Profielfoto"

@@ -1136,7 +1138,7 @@ msgstr "Op afstand"
 msgid "Remove"
 msgstr "Verwijderen"

-#: src/views/members/index.tsx:131
+#: src/views/members/index.tsx:132
 msgid "Remove member"
 msgstr "Lid verwijderen"

@@ -1177,7 +1179,7 @@ msgstr "Intrekken"
 msgid "Roadmap"
 msgstr "Roadmap"

-#: src/views/members/index.tsx:190
+#: src/views/members/index.tsx:191
 msgid "Role"
 msgstr "Rol"

@@ -1217,21 +1219,21 @@ msgstr "Zelf hosten met Github"
 msgid "self-assigned the card"
 msgstr "heeft de kaart aan zichzelf toegewezen"

-#: src/components/FeedbackButton.tsx:137
-msgid "Send"
-msgstr "Versturen"
+#: src/components/FeedbackModal.tsx:116
+msgid "Send feedback"
+msgstr "Feedback versturen"

 #: src/views/boards/components/TemplateBoards.tsx:69
 msgid "Senior"
 msgstr "Senior"

-#: src/views/settings/index.tsx:137
-#: src/components/SideNavigation.tsx:49
+#: src/views/settings/index.tsx:138
+#: src/components/SideNavigation.tsx:78
 msgid "Settings"
 msgstr "Instellingen"

 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/settings/index.tsx:133
+#: src/views/settings/index.tsx:134
 msgid "Settings | {0}"
 msgstr "Instellingen | {0}"

@@ -1253,7 +1255,7 @@ msgstr "Registreren uitgeschakeld"
 msgid "Sign up is currently disabled. Please try again later."
 msgstr "Registreren is momenteel uitgeschakeld. Probeer het later opnieuw."

-#: src/components/AuthForm.tsx:334
+#: src/components/AuthForm.tsx:335
 msgid "Sign up with "
 msgstr "Registreren met "

@@ -1282,11 +1284,15 @@ msgstr "Star op Github"
 msgid "Success"
 msgstr "Geslaagd"

+#: src/components/UserMenu.tsx:180
+msgid "Support"
+msgstr "Ondersteuning"
+
 #: src/views/home/components/Pricing.tsx:57
 msgid "Support the development of the project"
 msgstr "Ondersteun de ontwikkeling van het project"

-#: src/components/UserMenu.tsx:98
+#: src/components/UserMenu.tsx:139
 msgid "System"
 msgstr "Systeem"

@@ -1302,7 +1308,7 @@ msgstr "Sjablonen"
 msgid "Terms of service"
 msgstr "Servicevoorwaarden"

-#: src/components/FeedbackButton.tsx:39
+#: src/components/FeedbackModal.tsx:34
 msgid "Thank you for your feedback!"
 msgstr "Bedankt voor je feedback!"

@@ -1319,7 +1325,7 @@ msgstr "Het open source <0/> alternatief voor Trello"
 msgid "The visibility of your board has been set to {0}."
 msgstr "De zichtbaarheid van je bord is ingesteld op {0}."

-#: src/components/UserMenu.tsx:85
+#: src/components/UserMenu.tsx:126
 msgid "Theme"
 msgstr "Thema"

@@ -1361,7 +1367,7 @@ msgstr "Menu in-/uitschakelen"
 msgid "Track all card changes with detailed activity history."
 msgstr "Volg alle kaartwijzigingen met gedetailleerde activiteitengeschiedenis."

-#: src/views/settings/index.tsx:91
+#: src/views/settings/index.tsx:92
 msgid "Trello disconnected"
 msgstr "Trello ontkoppeld"

@@ -1401,7 +1407,7 @@ msgstr "Kan opmerking niet verwijderen"
 msgid "Unable to remove member"
 msgstr "Kan lid niet verwijderen"

-#: src/components/FeedbackButton.tsx:45
+#: src/components/FeedbackModal.tsx:40
 msgid "Unable to send feedback"
 msgstr "Feedback kon niet worden verzonden"

@@ -1413,8 +1419,8 @@ msgstr "Kan board URL niet bijwerken"
 msgid "Unable to update board visibility"
 msgstr "Kan bordzichtbaarheid niet bijwerken"

-#: src/views/card/index.tsx:157
-#: src/views/board/index.tsx:189
+#: src/views/card/index.tsx:158
+#: src/views/board/index.tsx:190
 msgid "Unable to update card"
 msgstr "Kan kaart niet bijwerken"

@@ -1427,7 +1433,7 @@ msgid "Unable to update labels"
 msgstr "Kan labels niet bijwerken"

 #: src/views/card/components/ListSelector.tsx:52
-#: src/views/board/index.tsx:133
+#: src/views/board/index.tsx:134
 msgid "Unable to update list"
 msgstr "Kan lijst niet bijwerken"

@@ -1516,7 +1522,7 @@ msgstr "URL moet minimaal 3 tekens lang zijn"
 msgid "Use template"
 msgstr "Sjabloon gebruiken"

-#: src/views/members/index.tsx:184
+#: src/views/members/index.tsx:185
 msgid "User"
 msgstr "Gebruiker"

@@ -1524,11 +1530,11 @@ msgstr "Gebruiker"
 msgid "Video"
 msgstr "Video"

-#: src/views/settings/index.tsx:259
+#: src/views/settings/index.tsx:260
 msgid "View and manage your API keys."
 msgstr "Bekijk en beheer je API-sleutels."

-#: src/views/settings/index.tsx:198
+#: src/views/settings/index.tsx:199
 msgid "View and manage your billing and subscription."
 msgstr "Bekijk en beheer je facturering en abonnement."

@@ -1572,7 +1578,7 @@ msgstr "Toen Trello in 2011 werd gelanceerd, blies het iedereen omver met zijn z
 msgid "Why make an open source Trello?"
 msgstr "Waarom een open source Trello maken?"

-#: src/views/board/index.tsx:240
+#: src/views/board/index.tsx:241
 msgid "Workspace"
 msgstr "Werkruimte"

@@ -1580,7 +1586,7 @@ msgstr "Werkruimte"
 msgid "Workspace deleted"
 msgstr "Werkruimte verwijderd"

-#: src/views/settings/index.tsx:174
+#: src/views/settings/index.tsx:175
 msgid "Workspace description"
 msgstr "Werkruimte beschrijving"

@@ -1601,7 +1607,7 @@ msgstr "Werkruimtebeschrijving bijgewerkt"
 msgid "Workspace members"
 msgstr "Werkruimteleden"

-#: src/views/settings/index.tsx:155
+#: src/views/settings/index.tsx:156
 #: src/components/NewWorkspaceForm.tsx:80
 msgid "Workspace name"
 msgstr "Naam werkruimte"
@@ -1622,7 +1628,7 @@ msgstr "Werkruimtenaam bijgewerkt"
 msgid "Workspace slug updated"
 msgstr "Werkruimte-slug bijgewerkt"

-#: src/views/settings/index.tsx:164
+#: src/views/settings/index.tsx:165
 msgid "Workspace URL"
 msgstr "Werkruimte URL"

@@ -1670,15 +1676,15 @@ msgstr "Je borden zijn geïmporteerd."
 msgid "Your display name has been updated."
 msgstr "Je weergavenaam is bijgewerkt."

-#: src/views/settings/components/Avatar.tsx:25
+#: src/views/settings/components/Avatar.tsx:27
 msgid "Your profile image has been updated."
 msgstr "Je profielafbeelding is bijgewerkt."

-#: src/views/settings/index.tsx:92
+#: src/views/settings/index.tsx:93
 msgid "Your Trello account has been disconnected."
 msgstr "Je Trello-account is ontkoppeld."

-#: src/views/settings/index.tsx:241
+#: src/views/settings/index.tsx:242
 msgid "Your Trello account is connected."
 msgstr "Je Trello-account is verbonden."

--- a/apps/web/src/locales/nl/messages.ts
+++ b/apps/web/src/locales/nl/messages.ts
--- a/apps/web/src/pages/_app.tsx
+++ b/apps/web/src/pages/_app.tsx
@@ -1,8 +1,9 @@
 import "~/styles/globals.css";
 import "~/utils/i18n";

-import type { Viewport } from "next";
-import type { AppType } from "next/app";
+import type { NextPage, Viewport } from "next";
+import type { AppProps, AppType } from "next/app";
+import type { ReactElement, ReactNode } from "react";
 import { Plus_Jakarta_Sans } from "next/font/google";
 import Script from "next/script";
 import { env } from "next-runtime-env";
@@ -34,7 +35,15 @@ export const viewport: Viewport = {
  userScalable: false,
 };

-const MyApp: AppType = ({ Component, pageProps }) => {
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+const MyApp: AppType = ({ Component, pageProps }: AppPropsWithLayout) => {
  const posthogKey = env("NEXT_PUBLIC_POSTHOG_KEY");

  useEffect(() => {
@@ -50,6 +59,8 @@ const MyApp: AppType = ({ Component, pageProps }) => {
    }
  }, [posthogKey]);

+  const getLayout = Component.getLayout ?? ((page) => page);
+
  return (
    <>
      <style jsx global>{`
@@ -75,10 +86,10 @@ const MyApp: AppType = ({ Component, pageProps }) => {
              <PopupProvider>
                {posthogKey ? (
                  <PostHogProvider client={posthog}>
-                    <Component {...pageProps} />
+                    {getLayout(<Component {...pageProps} />)}
                  </PostHogProvider>
                ) : (
-                  <Component {...pageProps} />
+                  getLayout(<Component {...pageProps} />)
                )}
              </PopupProvider>
            </ModalProvider>
--- a/apps/web/src/pages/boards/[...boardId]/index.tsx
+++ b/apps/web/src/pages/boards/[...boardId]/index.tsx
@@ -1,15 +1,17 @@
-import { WorkspaceProvider } from "~/providers/workspace";
-import Dashboard from "~/components/Dashboard";
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
 import Popup from "~/components/Popup";
 import BoardView from "~/views/board";

-export default function BoardPage() {
+const BoardPage: NextPageWithLayout = () => {
  return (
-    <WorkspaceProvider>
-      <Dashboard>
-        <BoardView />
-      </Dashboard>
+    <>
+      <BoardView />
      <Popup />
-    </WorkspaceProvider>
+    </>
  );
-}
+};
+
+BoardPage.getLayout = (page) => getDashboardLayout(page);
+
+export default BoardPage;
--- a/apps/web/src/pages/boards/index.tsx
+++ b/apps/web/src/pages/boards/index.tsx
@@ -1,15 +1,17 @@
-import { WorkspaceProvider } from "~/providers/workspace";
-import Dashboard from "~/components/Dashboard";
+import type { NextPageWithLayout } from "../_app";
+import { getDashboardLayout } from "~/components/Dashboard";
 import Popup from "~/components/Popup";
 import BoardsView from "~/views/boards";

-export default function BoardsPage() {
+const BoardsPage: NextPageWithLayout = () => {
  return (
-    <WorkspaceProvider>
-      <Dashboard>
-        <BoardsView />
-      </Dashboard>
+    <>
+      <BoardsView />
      <Popup />
-    </WorkspaceProvider>
+    </>
  );
-}
+};
+
+BoardsPage.getLayout = (page) => getDashboardLayout(page);
+
+export default BoardsPage;
--- a/apps/web/src/pages/cards/[cardId]/index.tsx
+++ b/apps/web/src/pages/cards/[cardId]/index.tsx
@@ -1,15 +1,18 @@
-import Dashboard from "~/components/Dashboard";
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
 import Popup from "~/components/Popup";
-import { WorkspaceProvider } from "~/providers/workspace";
 import CardView, { CardRightPanel } from "~/views/card";

-export default function CardPage() {
+const CardPage: NextPageWithLayout = () => {
  return (
-    <WorkspaceProvider>
-      <Dashboard hasRightPanel rightPanel={<CardRightPanel />}>
-        <CardView />
-      </Dashboard>
+    <>
+      <CardView />
      <Popup />
-    </WorkspaceProvider>
+    </>
  );
-}
+};
+
+CardPage.getLayout = (page) =>
+  getDashboardLayout(page, <CardRightPanel />, true);
+
+export default CardPage;
--- a/apps/web/src/pages/members/index.tsx
+++ b/apps/web/src/pages/members/index.tsx
@@ -1,15 +1,17 @@
-import { WorkspaceProvider } from "~/providers/workspace";
-import Dashboard from "~/components/Dashboard";
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
 import Popup from "~/components/Popup";
 import MembersView from "~/views/members";

-export default function MembersPage() {
+const MembersPage: NextPageWithLayout = () => {
  return (
-    <WorkspaceProvider>
-      <Dashboard>
-        <MembersView />
-      </Dashboard>
+    <>
+      <MembersView />
      <Popup />
-    </WorkspaceProvider>
+    </>
  );
-}
+};
+
+MembersPage.getLayout = (page) => getDashboardLayout(page);
+
+export default MembersPage;
--- a/apps/web/src/pages/settings/index.tsx
+++ b/apps/web/src/pages/settings/index.tsx
@@ -1,15 +1,17 @@
-import { WorkspaceProvider } from "~/providers/workspace";
-import Dashboard from "~/components/Dashboard";
-import SettingsView from "~/views/settings";
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
 import Popup from "~/components/Popup";
+import SettingsView from "~/views/settings";

-export default function SettingsPage() {
+const SettingsPage: NextPageWithLayout = () => {
  return (
-    <WorkspaceProvider>
-      <Dashboard>
-        <SettingsView />
-      </Dashboard>
+    <>
+      <SettingsView />
      <Popup />
-    </WorkspaceProvider>
+    </>
  );
-}
+};
+
+SettingsPage.getLayout = (page) => getDashboardLayout(page);
+
+export default SettingsPage;
--- a/apps/web/src/views/board/components/UpdateBoardSlugForm.tsx
+++ b/apps/web/src/views/board/components/UpdateBoardSlugForm.tsx
@@ -167,7 +167,8 @@ export function UpdateBoardSlugForm({
              !isDirty ||
              updateBoardSlug.isPending ||
              errors.slug?.message !== undefined ||
-              isBoardSlugAvailable?.isReserved
+              isBoardSlugAvailable?.isReserved ||
+              checkBoardSlugAvailability.isLoading
            }
          >
            {t`Update`}
--- a/apps/web/src/views/board/index.tsx
+++ b/apps/web/src/views/board/index.tsx
@@ -13,6 +13,7 @@ import type { UpdateBoardInput } from "@kan/api/types";

 import Button from "~/components/Button";
 import { DeleteLabelConfirmation } from "~/components/DeleteLabelConfirmation";
+import FeedbackModal from "~/components/FeedbackModal";
 import { LabelForm } from "~/components/LabelForm";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
@@ -365,7 +366,7 @@ export default function BoardPage() {
                                <div
                                  ref={provided.innerRef}
                                  {...provided.droppableProps}
-                                  className="scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-w-[8px] z-10 h-full max-h-[calc(100vh-265px)] min-h-[2rem] overflow-y-auto pr-1 scrollbar dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-600"
+                                  className="scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-w-[8px] z-10 h-full max-h-[calc(100vh-225px)] min-h-[2rem] overflow-y-auto pr-1 scrollbar dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-600"
                                >
                                  {list.cards.map((card, index) => (
                                    <Draggable
@@ -421,7 +422,15 @@ export default function BoardPage() {
            </>
          ) : null}
        </div>
-        <Modal modalSize={modalContentType === "NEW_CARD" ? "md" : "sm"}>
+        <Modal
+          modalSize={
+            modalContentType === "NEW_CARD" ||
+            modalContentType === "NEW_FEEDBACK"
+              ? "md"
+              : "sm"
+          }
+        >
+          {modalContentType === "NEW_FEEDBACK" && <FeedbackModal />}
          {modalContentType === "DELETE_BOARD" && (
            <DeleteBoardConfirmation boardPublicId={boardId ?? ""} />
          )}
--- a/apps/web/src/views/boards/components/BoardsList.tsx
+++ b/apps/web/src/views/boards/components/BoardsList.tsx
@@ -19,7 +19,7 @@ export function BoardsList() {

  if (isLoading)
    return (
-      <div className="xxl:grid-cols-7 grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      <div className="grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-7">
        <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
        <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
        <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
@@ -45,12 +45,12 @@ export function BoardsList() {
    );

  return (
-    <div className="grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-7">
+    <div className="grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-7">
      {data?.map((board) => (
        <Link key={board.publicId} href={`boards/${board.publicId}`}>
          <div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-light-400 bg-light-50 shadow-sm hover:bg-light-200 dark:border-dark-600 dark:bg-dark-50 dark:hover:bg-dark-100">
            <PatternedBackground />
-            <p className="text-md px-4 font-bold text-neutral-900 dark:text-dark-1000">
+            <p className="px-4 text-[14px] font-bold text-neutral-700 dark:text-dark-1000">
              {board.name}
            </p>
          </div>
--- a/apps/web/src/views/boards/index.tsx
+++ b/apps/web/src/views/boards/index.tsx
@@ -2,6 +2,7 @@ import { t } from "@lingui/core/macro";
 import { HiArrowDownTray, HiOutlinePlusSmall } from "react-icons/hi2";

 import Button from "~/components/Button";
+import FeedbackModal from "~/components/FeedbackModal";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
@@ -20,8 +21,8 @@ export default function BoardsPage() {
  return (
    <>
      <PageHead title={t`Boards | ${workspace.name ?? "Workspace"}`} />
-      <div className="m-auto h-full max-w-[1600px] px-5 py-6 md:px-8 md:py-8">
-        <div className="mb-8 flex w-full items-center justify-between">
+      <div className="m-auto h-full max-w-[1100px] p-6 px-5 md:px-28 md:py-12">
+        <div className="relative z-10 mb-8 flex w-full items-center justify-between">
          <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
            {t`Boards`}
          </h1>
@@ -49,7 +50,8 @@ export default function BoardsPage() {
          </div>
        </div>

-        <Modal>
+        <Modal modalSize={modalContentType === "NEW_FEEDBACK" ? "md" : "sm"}>
+          {modalContentType === "NEW_FEEDBACK" && <FeedbackModal />}
          {modalContentType === "NEW_BOARD" && <NewBoardForm />}
          {modalContentType === "IMPORT_BOARDS" && <ImportBoardsForm />}
          {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
--- a/apps/web/src/views/card/components/LabelSelector.tsx
+++ b/apps/web/src/views/card/components/LabelSelector.tsx
@@ -113,7 +113,7 @@ export default function LabelSelector({
              </Menu.Button>
            </div>
          ) : (
-            <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
+            <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
              <HiMiniPlus size={22} className="pr-2" />
              {t`Add label`}
            </Menu.Button>
--- a/apps/web/src/views/card/components/ListSelector.tsx
+++ b/apps/web/src/views/card/components/ListSelector.tsx
@@ -79,7 +79,7 @@ export default function ListSelector({
          }}
          asChild
        >
-          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
+          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
            {selectedList?.value}
          </Menu.Button>
        </CheckboxDropdown>
--- a/apps/web/src/views/card/components/MemberSelector.tsx
+++ b/apps/web/src/views/card/components/MemberSelector.tsx
@@ -112,7 +112,7 @@ export default function MemberSelector({
          createNewItemLabel={t`Invite member`}
          asChild
        >
-          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 py-1 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
+          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
            {selectedMembers.length ? (
              <div className="isolate flex justify-end -space-x-1 overflow-hidden">
                {selectedMembers.map(({ value, imageUrl }) => (
--- a/apps/web/src/views/card/components/NewCommentForm.tsx
+++ b/apps/web/src/views/card/components/NewCommentForm.tsx
@@ -51,7 +51,7 @@ const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
-      className="flex w-full max-w-[1000px] flex-col rounded-xl border border-light-600 bg-light-200 p-4 text-light-900 focus-visible:outline-none dark:border-dark-400 dark:bg-dark-100 dark:text-dark-1000 sm:text-sm sm:leading-6"
+      className="flex w-full max-w-[800px] flex-col rounded-xl border border-light-600 bg-light-100 p-4 text-light-900 focus-visible:outline-none dark:border-dark-400 dark:bg-dark-100 dark:text-dark-1000 sm:text-sm sm:leading-6"
    >
      <ContentEditable
        placeholder={t`Add a comment...`}
--- a/apps/web/src/views/card/index.tsx
+++ b/apps/web/src/views/card/index.tsx
@@ -6,6 +6,7 @@ import { IoChevronForwardSharp } from "react-icons/io5";

 import Avatar from "~/components/Avatar";
 import Editor from "~/components/Editor";
+import FeedbackModal from "~/components/FeedbackModal";
 import { LabelForm } from "~/components/LabelForm";
 import LabelIcon from "~/components/LabelIcon";
 import Modal from "~/components/modal";
@@ -99,7 +100,7 @@ export function CardRightPanel() {
    }) ?? [];

  return (
-    <div className="h-full w-[360px] border-l-[1px] border-light-600 bg-light-200 p-8 text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900">
+    <div className="h-full w-[360px] border-l-[1px] border-light-300 bg-light-50 p-8 text-light-900 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900">
      <div className="mb-4 flex w-full flex-row">
        <p className="my-2 mb-2 w-[100px] text-sm font-medium">{t`List`}</p>
        <ListSelector
@@ -188,9 +189,9 @@ export default function CardPage() {
        title={t`${card?.title ?? "Card"} | ${board?.name ?? "Board"}`}
      />
      <div className="flex h-full flex-1 flex-row">
-        <div className="flex h-full w-full flex-col overflow-hidden">
+        <div className="m-auto flex h-full w-full max-w-[800px] flex-col overflow-hidden">
          <div className="h-full max-h-[calc(100dvh-3rem)] overflow-y-auto p-6 md:max-h-[calc(100dvh-4rem)] md:p-8">
-            <div className="mb-8 flex w-full items-center justify-between">
+            <div className="mb-8 flex w-full items-center justify-between md:mt-6">
              {!card && isLoading && (
                <div className="flex space-x-2">
                  <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
@@ -250,7 +251,7 @@ export default function CardPage() {
                    </div>
                  </form>
                </div>
-                <div className="border-t-[1px] border-light-600 pt-12 dark:border-dark-400">
+                <div className="border-t-[1px] border-light-300 pt-12 dark:border-dark-300">
                  <h2 className="text-md pb-4 font-medium text-light-900 dark:text-dark-1000">
                    {t`Activity`}
                  </h2>
@@ -271,7 +272,8 @@ export default function CardPage() {
          </div>
        </div>

-        <Modal>
+        <Modal modalSize={modalContentType === "NEW_FEEDBACK" ? "md" : "sm"}>
+          {modalContentType === "NEW_FEEDBACK" && <FeedbackModal />}
          {modalContentType === "NEW_LABEL" && (
            <LabelForm boardPublicId={boardId ?? ""} refetch={refetchCard} />
          )}
--- a/apps/web/src/views/members/index.tsx
+++ b/apps/web/src/views/members/index.tsx
@@ -7,6 +7,7 @@ import { authClient } from "@kan/auth/client";
 import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import Dropdown from "~/components/Dropdown";
+import FeedbackModal from "~/components/FeedbackModal";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
@@ -154,7 +155,7 @@ export default function MembersPage() {
  return (
    <>
      <PageHead title={t`Members | ${workspace.name ?? "Workspace"}`} />
-      <div className="m-auto h-full max-w-[1600px] p-6 px-5 md:px-28 md:py-12">
+      <div className="m-auto h-full max-w-[1100px] p-6 px-5 md:px-28 md:py-12">
        <div className="mb-8 flex w-full justify-between">
          <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
            {t`Members`}
@@ -221,7 +222,8 @@ export default function MembersPage() {
          </div>
        </div>

-        <Modal>
+        <Modal modalSize={modalContentType === "NEW_FEEDBACK" ? "md" : "sm"}>
+          {modalContentType === "NEW_FEEDBACK" && <FeedbackModal />}
          {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
          {modalContentType === "INVITE_MEMBER" && <InviteMemberForm />}
          {modalContentType === "REMOVE_MEMBER" && <DeleteMemberConfirmation />}
--- a/apps/web/src/views/settings/components/Avatar.tsx
+++ b/apps/web/src/views/settings/components/Avatar.tsx
@@ -3,6 +3,8 @@ import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
 import { useState } from "react";

+import { generateUID } from "@kan/shared/utils";
+
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 import { getAvatarUrl } from "~/utils/helpers";
@@ -58,7 +60,7 @@ export default function Avatar({
      }

      const fileExt = file.name.split(".").pop();
-      const fileName = `${userId}/avatar.${fileExt}`;
+      const fileName = `${userId}/avatar-${generateUID()}.${fileExt}`;

      setUploading(true);

--- a/apps/web/src/views/settings/index.tsx
+++ b/apps/web/src/views/settings/index.tsx
@@ -5,6 +5,7 @@ import { useEffect, useRef } from "react";
 import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";

 import Button from "~/components/Button";
+import FeedbackModal from "~/components/FeedbackModal";
 import { LanguageSelector } from "~/components/LanguageSelector";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
@@ -131,7 +132,7 @@ export default function SettingsPage() {
          className="h-full max-h-[calc(100vdh-3rem)] overflow-y-auto md:max-h-[calc(100vdh-4rem)]"
        >
          <PageHead title={t`Settings | ${workspace.name ?? "Workspace"}`} />
-          <div className="m-auto max-w-[1600px] px-5 py-6 md:px-28 md:py-12">
+          <div className="m-auto max-w-[1100px] px-5 py-6 md:px-28 md:py-12">
            <div className="mb-8 flex w-full justify-between">
              <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
                {t`Settings`}
@@ -300,7 +301,8 @@ export default function SettingsPage() {
            </div>
          </div>

-          <Modal>
+          <Modal modalSize={modalContentType === "NEW_FEEDBACK" ? "md" : "sm"}>
+            {modalContentType === "NEW_FEEDBACK" && <FeedbackModal />}
            {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
            {modalContentType === "DELETE_WORKSPACE" && (
              <DeleteWorkspaceConfirmation />
--- a/packages/api/src/routers/board.ts
+++ b/packages/api/src/routers/board.ts
@@ -276,6 +276,21 @@ export const boardRouter = createTRPCRouter({

      await assertUserInWorkspace(ctx.db, userId, board.workspaceId);

+      if (input.slug) {
+        const isBoardSlugAvailable = await boardRepo.isBoardSlugAvailable(
+          ctx.db,
+          input.slug,
+          board.workspaceId,
+        );
+
+        if (!isBoardSlugAvailable) {
+          throw new TRPCError({
+            message: `Board slug ${input.slug} is not available`,
+            code: "BAD_REQUEST",
+          });
+        }
+      }
+
      const result = await boardRepo.update(ctx.db, {
        name: input.name,
        slug: input.slug,
@@ -407,11 +422,23 @@ export const boardRouter = createTRPCRouter({
      }),
    )
    .query(async ({ ctx, input }) => {
+      const board = await boardRepo.getWorkspaceAndBoardIdByBoardPublicId(
+        ctx.db,
+        input.boardPublicId,
+      );
+
+      if (!board)
+        throw new TRPCError({
+          message: `Board with public ID ${input.boardPublicId} not found`,
+          code: "NOT_FOUND",
+        });
+
      const isBoardSlugAvailable = await boardRepo.isBoardSlugAvailable(
        ctx.db,
        input.boardSlug,
-        input.boardPublicId,
+        board.workspaceId,
      );
+
      return {
        isReserved: !isBoardSlugAvailable,
      };
--- a/packages/api/src/routers/member.ts
+++ b/packages/api/src/routers/member.ts
@@ -1,7 +1,6 @@
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";

-import { authClient } from "@kan/auth/client";
 import * as memberRepo from "@kan/db/repository/member.repo";
 import * as userRepo from "@kan/db/repository/user.repo";
 import * as workspaceRepo from "@kan/db/repository/workspace.repo";
@@ -78,16 +77,15 @@ export const memberRouter = createTRPCRouter({
          code: "INTERNAL_SERVER_ERROR",
        });

-      const { error } = await authClient.signIn.magicLink({
+      const { status } = await ctx.auth.api.signInMagicLink({
        email: input.email,
        callbackURL: `/boards?type=invite&memberPublicId=${invite.publicId}`,
      });

-      if (error) {
+      if (!status) {
        console.error("Failed to send magic link invitation:", {
          email: input.email,
          callbackURL: `/boards?type=invite&memberPublicId=${invite.publicId}`,
-          error,
        });

        throw new TRPCError({
--- a/packages/api/src/trpc.ts
+++ b/packages/api/src/trpc.ts
@@ -20,58 +20,73 @@ export interface User {
  stripeCustomerId?: string | null | undefined;
 }

+const createAuthWithHeaders = (
+  auth: ReturnType<typeof initAuth>,
+  headers: Headers,
+) => {
+  return {
+    api: {
+      getSession: () => auth.api.getSession({ headers }),
+      signInMagicLink: (input: { email: string; callbackURL: string }) =>
+        auth.api.signInMagicLink({
+          headers,
+          body: { email: input.email, callbackURL: input.callbackURL },
+        }),
+    },
+  };
+};
+
 interface CreateContextOptions {
  user: User | null | undefined;
  db: dbClient;
+  auth: ReturnType<typeof createAuthWithHeaders>;
 }

 export const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    user: opts.user,
    db: opts.db,
+    auth: opts.auth,
  };
 };

 export const createTRPCContext = async ({ req }: CreateNextContextOptions) => {
  const db = createDrizzleClient();
-  const auth = initAuth(db);
+  const baseAuth = initAuth(db);
+  const headers = new Headers(req.headers as Record<string, string>);
+  const auth = createAuthWithHeaders(baseAuth, headers);

-  const session = await auth.api.getSession({
-    // @ts-expect-error
-    headers: new Headers(req.headers),
-  });
+  const session = await auth.api.getSession();

-  return createInnerTRPCContext({ db, user: session?.user });
+  return createInnerTRPCContext({ db, user: session?.user, auth });
 };

 export const createNextApiContext = async (req: NextApiRequest) => {
  const db = createDrizzleClient();
-  const auth = initAuth(db);
+  const baseAuth = initAuth(db);
+  const headers = new Headers(req.headers as Record<string, string>);
+  const auth = createAuthWithHeaders(baseAuth, headers);

-  const session = await auth.api.getSession({
-    // @ts-expect-error
-    headers: new Headers(req.headers),
-  });
+  const session = await auth.api.getSession();

-  return createInnerTRPCContext({ db, user: session?.user });
+  return createInnerTRPCContext({ db, user: session?.user, auth });
 };

 export const createRESTContext = async ({ req }: CreateNextContextOptions) => {
  const db = createDrizzleClient();
-  const auth = initAuth(db);
+  const baseAuth = initAuth(db);
+  const headers = new Headers(req.headers as Record<string, string>);
+  const auth = createAuthWithHeaders(baseAuth, headers);

  let session;
  try {
-    session = await auth.api.getSession({
-      // @ts-expect-error
-      headers: new Headers(req.headers),
-    });
+    session = await auth.api.getSession();
  } catch (error) {
    console.error("Error getting session, ", error);
    throw error;
  }

-  return createInnerTRPCContext({ db, user: session?.user });
+  return createInnerTRPCContext({ db, user: session?.user, auth });
 };

 const t = initTRPC
--- a/packages/auth/src/auth.ts
+++ b/packages/auth/src/auth.ts
@@ -84,7 +84,7 @@ export const socialProvidersPlugin = () => ({
        method: "GET",
      },
      async (ctx) =>
-        ctx.json(ctx.context.socialProviders.map((p) => p.name.toLowerCase())),
+        ctx.json(ctx.context.socialProviders.map((p) => p.id.toLowerCase())),
    ),
  },
 });
@@ -166,9 +166,19 @@ export const initAuth = (db: dbClient) => {
    databaseHooks: {
      user: {
        create: {
-          before() {
+          async before(user) {
            if (env("NEXT_PUBLIC_DISABLE_SIGN_UP")?.toLowerCase() === "true") {
-              return Promise.resolve(false);
+              const pendingInvitation = await memberRepo.getByEmailAndStatus(
+                db,
+                user.email,
+                "invited",
+              );
+
+              if (!pendingInvitation) {
+                return Promise.resolve(false);
+              }
+
+              return Promise.resolve(true);
            }
            return Promise.resolve(true);
          },
--- a/packages/db/src/repository/board.repo.ts
+++ b/packages/db/src/repository/board.repo.ts
@@ -1,4 +1,4 @@
-import { and, asc, desc, eq, exists, inArray, isNull, or, sql } from "drizzle-orm";
+import { and, asc, desc, eq, inArray, isNull, or } from "drizzle-orm";

 import type { dbClient } from "@kan/db/client";
 import type { BoardVisibilityStatus } from "@kan/db/schema";
@@ -481,30 +481,18 @@ export const getWorkspaceAndBoardIdByBoardPublicId = async (
 export const isBoardSlugAvailable = async (
  db: dbClient,
  boardSlug: string,
-  boardPublicId: string,
+  workspaceId: number,
 ) => {
-  const result = await db
-    .select({ id: boards.id })
-    .from(boards)
-    .where(
-      and(
-        eq(boards.publicId, boardPublicId),
-        exists(
-          db
-            .select({ id: boards.id })
-            .from(boards)
-            .where(
-              and(
-                eq(boards.slug, boardSlug),
-                eq(boards.workspaceId, sql`${boards.workspaceId}`), // Reference outer query's workspaceId
-                isNull(boards.deletedAt),
-              ),
-            )
-            .limit(1),
-        ),
-      ),
-    )
-    .limit(1);
+  const result = await db.query.boards.findFirst({
+    columns: {
+      id: true,
+    },
+    where: and(
+      eq(boards.slug, boardSlug),
+      eq(boards.workspaceId, workspaceId),
+      isNull(boards.deletedAt),
+    ),
+  });

-  return result.length === 0;
+  return result === undefined;
 };
--- a/packages/db/src/repository/member.repo.ts
+++ b/packages/db/src/repository/member.repo.ts
@@ -41,6 +41,20 @@ export const getByPublicId = async (db: dbClient, publicId: string) => {
  });
 };

+export const getByEmailAndStatus = async (
+  db: dbClient,
+  email: string,
+  status: MemberStatus,
+) => {
+  return db.query.workspaceMembers.findFirst({
+    where: and(
+      eq(workspaceMembers.email, email),
+      eq(workspaceMembers.status, status),
+      isNull(workspaceMembers.deletedAt),
+    ),
+  });
+};
+
 export const acceptInvite = async (
  db: dbClient,
  args: { memberId: number; userId: string },
Author	SHA1	Message	Date
Henry	33677f720c	fix: update board slug availability check to be unique to workspace	2025-07-26 21:17:25 +01:00
Henry	0ec71b589d	feat: dashboard 2.0 redesign (#124 ) * feat: add patterned background to boards * feat: setup dashboard 2.0 * fix: prevent patterned background from overlaying buttons * feat: set max width for main card view * feat: adjust colour scheme for card view * feat: adjust dashboard border colour scheme and radius * fix: use correct colour for description placeholder * fix: use getLayout to persist layout state across pages * feat: reduce max width for settings and members pages * feat: add feedback button and modal * feat: adjust page max width * feat: extend mobile layout support * fix: hide pro badge when collapsed * feat: tweak nav styling for light mode * feat: tweak skeleton loaders for board list * feat: extend list max height * fix: hide side nav right border on desktop * chore: update hero images * chore: update hero images for docs * chore: update translations	2025-07-24 12:14:46 +01:00
Henry	0cb69e2087	fix: allow member invites when signup is disabled (#121 )	2025-07-20 11:18:19 +01:00
Henry	1305c55100	fix: affix avatar fileName with UID to invalidate next image cache (#117 )	2025-07-14 22:39:05 +01:00
Henry	425c91865b	feat: redirect from root to login for self hosted instances (#118 )	2025-07-14 22:38:57 +01:00
Henry	a0096a9eb0	fix: use server-side signInMagicLink for member invites (#116 )	2025-07-14 22:34:10 +01:00
Connor Goldberg	4058169079	fix: auth /social-providers endpoint ids (#115 ) The `/social-providers` endpoint should return a list of the provider ids, not their names. This was found when trying to use the microsoft endpoint and the endpoint was returning `"microsoft entraid"`, when the `AuthForm` expects it to just be `"microsoft"`.	2025-07-14 22:14:20 +01:00
Henry	ecc42f988f	chore: update changelog	2025-07-11 22:28:21 +01:00