From 0b6594c3c8c92bc679f73a6786e096bb639c965a Mon Sep 17 00:00:00 2001
From: Marc Seitz <marc@mfts.io>
Date: Fri, 24 May 2024 15:55:58 +0200
Subject: [PATCH 1/2] style: add checkered box to logo upload

---
 pages/datarooms/[id]/settings/index.tsx | 12 ++++++++++++
 pages/settings/branding.tsx             |  6 ++++++
 2 files changed, 18 insertions(+)

diff --git a/pages/datarooms/[id]/settings/index.tsx b/pages/datarooms/[id]/settings/index.tsx
index 2c3176278..390ce813d 100644
--- a/pages/datarooms/[id]/settings/index.tsx
+++ b/pages/datarooms/[id]/settings/index.tsx
@@ -228,6 +228,12 @@ export default function DataroomBrandPage() {
                     <label
                       htmlFor="image"
                       className="group relative mt-1 flex h-[4rem] w-[12rem] cursor-pointer flex-col items-center justify-center rounded-md border border-gray-300 bg-white shadow-sm transition-all hover:bg-gray-50"
+                      style={{
+                        backgroundImage:
+                          "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)",
+                        backgroundSize: "20px 20px",
+                        backgroundPosition: "0 0, 10px 0, 10px -10px, 0px 10px",
+                      }}
                     >
                       {false && (
                         <div className="absolute z-[5] flex h-full w-full items-center justify-center rounded-md bg-white">
@@ -332,6 +338,12 @@ export default function DataroomBrandPage() {
                     <label
                       htmlFor="banner-image"
                       className="group relative mt-1 flex h-[4rem] w-[12rem] cursor-pointer flex-col items-center justify-center rounded-md border border-gray-300 bg-white shadow-sm transition-all hover:bg-gray-50"
+                      style={{
+                        backgroundImage:
+                          "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)",
+                        backgroundSize: "20px 20px",
+                        backgroundPosition: "0 0, 10px 0, 10px -10px, 0px 10px",
+                      }}
                     >
                       {false && (
                         <div className="absolute z-[5] flex h-full w-full items-center justify-center rounded-md bg-white">
diff --git a/pages/settings/branding.tsx b/pages/settings/branding.tsx
index cbbfa4128..a8c7a35b9 100644
--- a/pages/settings/branding.tsx
+++ b/pages/settings/branding.tsx
@@ -158,6 +158,12 @@ export default function Branding() {
                   <label
                     htmlFor="image"
                     className="group relative mt-1 flex h-[4rem] w-[12rem] cursor-pointer flex-col items-center justify-center rounded-md border border-gray-300 bg-white shadow-sm transition-all hover:bg-gray-50"
+                    style={{
+                      backgroundImage:
+                        "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)",
+                      backgroundSize: "20px 20px",
+                      backgroundPosition: "0 0, 10px 0, 10px -10px, 0px 10px",
+                    }}
                   >
                     {false && (
                       <div className="absolute z-[5] flex h-full w-full items-center justify-center rounded-md bg-white">

From 68aaf4436e9b8b9e36951cc5dcbde7f6fbc88a87 Mon Sep 17 00:00:00 2001
From: Marc Seitz <marc@mfts.io>
Date: Fri, 24 May 2024 17:45:40 +0200
Subject: [PATCH 2/2] feat: add dataroom settings for changing name

---
 components/ui/form.tsx                        |  91 +++
 .../teams/[teamId]/datarooms/[id]/index.ts    |  47 +-
 pages/datarooms/[id]/branding/index.tsx       | 484 +++++++++++++
 pages/datarooms/[id]/documents/[...name].tsx  |   5 +
 pages/datarooms/[id]/documents/index.tsx      |   5 +
 pages/datarooms/[id]/index.tsx                |   5 +
 pages/datarooms/[id]/settings/index.tsx       | 638 +++++++-----------
 pages/datarooms/[id]/users/index.tsx          |   5 +
 8 files changed, 867 insertions(+), 413 deletions(-)
 create mode 100644 components/ui/form.tsx
 create mode 100644 pages/datarooms/[id]/branding/index.tsx

diff --git a/components/ui/form.tsx b/components/ui/form.tsx
new file mode 100644
index 000000000..db1f232b1
--- /dev/null
+++ b/components/ui/form.tsx
@@ -0,0 +1,91 @@
+import { InputHTMLAttributes, ReactNode, useMemo, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { Button } from "./button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./card";
+import { Input } from "./input";
+
+export function Form({
+  title,
+  description,
+  inputAttrs,
+  helpText,
+  buttonText = "Save Changes",
+  disabledTooltip,
+  handleSubmit,
+}: {
+  title: string;
+  description: string;
+  inputAttrs: InputHTMLAttributes<HTMLInputElement>;
+  helpText?: string | ReactNode;
+  buttonText?: string;
+  disabledTooltip?: string | ReactNode;
+  handleSubmit: (data: any) => Promise<any>;
+}) {
+  const [value, setValue] = useState(inputAttrs.defaultValue);
+  const [saving, setSaving] = useState(false);
+  const saveDisabled = useMemo(() => {
+    return saving || !value || value === inputAttrs.defaultValue;
+  }, [saving, value, inputAttrs.defaultValue]);
+
+  return (
+    <form
+      onSubmit={async (e) => {
+        e.preventDefault();
+        setSaving(true);
+        await handleSubmit({
+          [inputAttrs.name as string]: value,
+        });
+        setSaving(false);
+      }}
+      className="rounded-lg bg-background"
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle>{title}</CardTitle>
+          <CardDescription>{description}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {typeof inputAttrs.defaultValue === "string" ? (
+            <Input
+              {...inputAttrs}
+              type={inputAttrs.type || "text"}
+              required
+              disabled={disabledTooltip ? true : false}
+              onChange={(e) => setValue(e.target.value)}
+              className={cn(
+                "w-full max-w-md  focus:border-gray-500 focus:outline-none focus:ring-gray-500 ",
+                {
+                  "cursor-not-allowed bg-gray-100 text-gray-400":
+                    disabledTooltip,
+                },
+              )}
+              data-1p-ignore
+            />
+          ) : (
+            <div className="h-[2.35rem] w-full max-w-md animate-pulse rounded-md bg-gray-200" />
+          )}
+        </CardContent>
+        <CardFooter className="flex items-center justify-between rounded-b-lg border-t bg-muted px-6 py-3">
+          <p className="text-sm text-muted-foreground transition-colors">
+            {helpText || ""}
+          </p>
+
+          <div className="shrink-0">
+            <Button loading={saving} disabled={saveDisabled}>
+              {buttonText}
+            </Button>
+          </div>
+        </CardFooter>
+      </Card>
+    </form>
+  );
+}
diff --git a/pages/api/teams/[teamId]/datarooms/[id]/index.ts b/pages/api/teams/[teamId]/datarooms/[id]/index.ts
index 8ac2203ff..ea2b3055f 100644
--- a/pages/api/teams/[teamId]/datarooms/[id]/index.ts
+++ b/pages/api/teams/[teamId]/datarooms/[id]/index.ts
@@ -45,16 +45,61 @@ export default async function handle(
       const dataroom = await prisma.dataroom.findUnique({
         where: {
           id: dataroomId,
+          teamId,
         },
       });
 
+      return res.status(200).json(dataroom);
+    } catch (error) {
+      errorhandler(error, res);
+    }
+  } else if (req.method === "PATCH") {
+    // PATCH /api/teams/:teamId/datarooms/:id
+    const session = await getServerSession(req, res, authOptions);
+    if (!session) {
+      return res.status(401).end("Unauthorized");
+    }
+
+    const { teamId, id: dataroomId } = req.query as {
+      teamId: string;
+      id: string;
+    };
+    const { name } = req.body as { name: string };
+
+    const userId = (session.user as CustomUser).id;
+
+    try {
+      // Check if the user is part of the team
+      const team = await prisma.team.findUnique({
+        where: {
+          id: teamId,
+          users: {
+            some: {
+              userId: userId,
+            },
+          },
+        },
+      });
+
+      if (!team) {
+        return res.status(401).end("Unauthorized");
+      }
+
+      const dataroom = await prisma.dataroom.update({
+        where: {
+          id: dataroomId,
+          teamId,
+        },
+        data: { name },
+      });
+
       return res.status(200).json(dataroom);
     } catch (error) {
       errorhandler(error, res);
     }
   } else {
     // We only allow GET requests
-    res.setHeader("Allow", ["GET"]);
+    res.setHeader("Allow", ["GET", "PATCH"]);
     return res.status(405).end(`Method ${req.method} Not Allowed`);
   }
 }
diff --git a/pages/datarooms/[id]/branding/index.tsx b/pages/datarooms/[id]/branding/index.tsx
new file mode 100644
index 000000000..62e24ba3d
--- /dev/null
+++ b/pages/datarooms/[id]/branding/index.tsx
@@ -0,0 +1,484 @@
+import { useRouter } from "next/router";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { useTeam } from "@/context/team-context";
+import { PlusIcon } from "lucide-react";
+import { HexColorInput, HexColorPicker } from "react-colorful";
+import { toast } from "sonner";
+import { mutate } from "swr";
+
+import { DataroomHeader } from "@/components/datarooms/dataroom-header";
+import AppLayout from "@/components/layouts/app";
+import { NavMenu } from "@/components/navigation-menu";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import LoadingSpinner from "@/components/ui/loading-spinner";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+import { useDataroomBrand } from "@/lib/swr/use-brand";
+import { useDataroom } from "@/lib/swr/use-dataroom";
+import { convertDataUrlToFile, uploadImage } from "@/lib/utils";
+
+export default function DataroomBrandPage() {
+  const router = useRouter();
+  const teamInfo = useTeam();
+  const { dataroom } = useDataroom();
+  const { brand } = useDataroomBrand({ dataroomId: dataroom?.id });
+
+  const [brandColor, setBrandColor] = useState<string>("#000000");
+  const [logo, setLogo] = useState<string | null>(null);
+  const [banner, setBanner] = useState<string | null>(null);
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [fileError, setFileError] = useState<string | null>(null);
+  const [dragActive, setDragActive] = useState(false);
+
+  const onChangeLogo = useCallback(
+    (e: any) => {
+      setFileError(null);
+      const file = e.target.files[0];
+      if (file) {
+        if (file.size / 1024 / 1024 > 2) {
+          setFileError("File size too big (max 2MB)");
+        } else if (file.type !== "image/png" && file.type !== "image/jpeg") {
+          setFileError("File type not supported (.png or .jpg only)");
+        } else {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            setLogo(e.target?.result as string);
+          };
+          reader.readAsDataURL(file);
+        }
+      }
+    },
+    [setLogo],
+  );
+
+  const onChangeBanner = useCallback(
+    (e: any) => {
+      setFileError(null);
+      const file = e.target.files[0];
+      if (file) {
+        if (file.size / 1024 / 1024 > 5) {
+          setFileError("File size too big (max 5MB)");
+        } else if (file.type !== "image/png" && file.type !== "image/jpeg") {
+          setFileError("File type not supported (.png or .jpg only)");
+        } else {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            setBanner(e.target?.result as string);
+          };
+          reader.readAsDataURL(file);
+        }
+      }
+    },
+    [setBanner],
+  );
+
+  useEffect(() => {
+    if (brand) {
+      setBrandColor(brand.brandColor || "#000000");
+      setLogo(brand.logo || null);
+      setBanner(brand.banner || null);
+    }
+  }, [brand]);
+
+  if (!dataroom) {
+    return <div>Loading...</div>;
+  }
+
+  const saveBranding = async (e: any) => {
+    e.preventDefault();
+
+    setIsLoading(true);
+
+    // Upload the image if it's a data URL
+    let blobUrl: string | null = logo && logo.startsWith("data:") ? null : logo;
+    if (logo && logo.startsWith("data:")) {
+      // Convert the data URL to a blob
+      const blob = convertDataUrlToFile({ dataUrl: logo });
+      // Upload the blob to vercel storage
+      blobUrl = await uploadImage(blob);
+      setLogo(blobUrl);
+    }
+
+    let bannerBlobUrl: string | null =
+      banner && banner.startsWith("data:") ? null : banner;
+    if (banner && banner.startsWith("data:")) {
+      // Convert the data URL to a blob
+      const blob = convertDataUrlToFile({ dataUrl: banner });
+      // Upload the blob to vercel storage
+      bannerBlobUrl = await uploadImage(blob);
+      setBanner(blobUrl);
+    }
+
+    const data = {
+      brandColor: brandColor,
+      logo: blobUrl,
+      banner: bannerBlobUrl,
+    };
+
+    const res = await fetch(
+      `/api/teams/${teamInfo?.currentTeam?.id}/datarooms/${dataroom.id}/branding`,
+      {
+        method: brand ? "PUT" : "POST",
+        body: JSON.stringify(data),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    );
+    if (res.ok) {
+      mutate(
+        `/api/teams/${teamInfo?.currentTeam?.id}/datarooms/${dataroom.id}/branding`,
+      );
+      setIsLoading(false);
+      toast.success("Branding updated successfully");
+    }
+  };
+
+  const handleDelete = async () => {
+    setIsLoading(true);
+
+    const res = await fetch(
+      `/api/teams/${teamInfo?.currentTeam?.id}/datarooms/${dataroom.id}/branding`,
+      {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    );
+    if (res.ok) {
+      setLogo(null);
+      setBanner(null);
+      setBrandColor("#000000");
+      setIsLoading(false);
+      toast.success("Branding reset successfully");
+      router.reload();
+    }
+  };
+
+  return (
+    <AppLayout>
+      <div className="relative mx-2 mb-10 mt-4 space-y-8 overflow-hidden px-1 sm:mx-3 md:mx-5 md:mt-5 lg:mx-7 lg:mt-8 xl:mx-10">
+        <header>
+          <DataroomHeader
+            title={dataroom.name}
+            description={dataroom.pId}
+            actions={
+              [
+                // <Button onClick={() => setIsLinkSheetOpen(true)} key={1}>
+                //   Create Link
+                // </Button>,
+              ]
+            }
+          />
+
+          <NavMenu
+            navigation={[
+              {
+                label: "Overview",
+                href: `/datarooms/${dataroom.id}`,
+                segment: `${dataroom.id}`,
+              },
+              {
+                label: "Documents",
+                href: `/datarooms/${dataroom.id}/documents`,
+                segment: "documents",
+              },
+              {
+                label: "Users",
+                href: `/datarooms/${dataroom.id}/users`,
+                segment: "users",
+              },
+              {
+                label: "Customization",
+                href: `/datarooms/${dataroom.id}/branding`,
+                segment: "branding",
+              },
+              {
+                label: "Settings",
+                href: `/datarooms/${dataroom.id}/settings`,
+                segment: "settings",
+              },
+            ]}
+          />
+        </header>
+
+        <div className="space-y-4">
+          <div>
+            <Card className="dark:bg-secondary">
+              <CardContent className="pt-6">
+                <div className="grid gap-6">
+                  {/* Logo Input */}
+                  <div className="flex flex-col gap-2">
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="logo">
+                        Logo{" "}
+                        <span className="text-sm italic text-muted-foreground">
+                          (max 2 MB)
+                        </span>
+                      </Label>
+                      {fileError ? (
+                        <p className="text-sm text-red-500">{fileError}</p>
+                      ) : null}
+                    </div>
+                    <label
+                      htmlFor="image"
+                      className="group relative mt-1 flex h-[4rem] w-[12rem] cursor-pointer flex-col items-center justify-center rounded-md border border-gray-300 bg-white shadow-sm transition-all hover:bg-gray-50"
+                      style={{
+                        backgroundImage:
+                          "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)",
+                        backgroundSize: "20px 20px",
+                        backgroundPosition: "0 0, 10px 0, 10px -10px, 0px 10px",
+                      }}
+                    >
+                      {false && (
+                        <div className="absolute z-[5] flex h-full w-full items-center justify-center rounded-md bg-white">
+                          <LoadingSpinner />
+                        </div>
+                      )}
+                      <div
+                        className="absolute z-[5] h-full w-full rounded-md"
+                        onDragOver={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setDragActive(true);
+                        }}
+                        onDragEnter={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setDragActive(true);
+                        }}
+                        onDragLeave={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setDragActive(false);
+                        }}
+                        onDrop={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setDragActive(false);
+                          setFileError(null);
+                          const file =
+                            e.dataTransfer.files && e.dataTransfer.files[0];
+                          if (file) {
+                            if (file.size / 1024 / 1024 > 2) {
+                              setFileError("File size too big (max 2MB)");
+                            } else if (
+                              file.type !== "image/png" &&
+                              file.type !== "image/jpeg"
+                            ) {
+                              setFileError(
+                                "File type not supported (.png or .jpg only)",
+                              );
+                            } else {
+                              const reader = new FileReader();
+                              reader.onload = (e) => {
+                                setLogo(e.target?.result as string);
+                              };
+                              reader.readAsDataURL(file);
+                            }
+                          }
+                        }}
+                      />
+                      <div
+                        className={`${
+                          dragActive
+                            ? "cursor-copy border-2 border-black bg-gray-50 opacity-100"
+                            : ""
+                        } absolute z-[3] flex h-full w-full flex-col items-center justify-center rounded-md bg-white transition-all ${
+                          logo
+                            ? "opacity-0 group-hover:opacity-100"
+                            : "group-hover:bg-gray-50"
+                        }`}
+                      >
+                        <PlusIcon
+                          className={`${
+                            dragActive ? "scale-110" : "scale-100"
+                          } h-7 w-7 text-gray-500 transition-all duration-75 group-hover:scale-110 group-active:scale-95`}
+                        />
+                        <span className="sr-only">OG image upload</span>
+                      </div>
+                      {logo && (
+                        <img
+                          src={logo}
+                          alt="Preview"
+                          className="h-full w-full rounded-md object-contain"
+                        />
+                      )}
+                    </label>
+                    <div className="mt-1 flex rounded-md shadow-sm">
+                      <input
+                        id="image"
+                        name="image"
+                        type="file"
+                        accept="image/jpeg,image/png"
+                        className="sr-only"
+                        onChange={onChangeLogo}
+                      />
+                    </div>
+                  </div>
+
+                  {/* Banner Input */}
+                  <div className="flex flex-col gap-2">
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="banner">
+                        Banner{" "}
+                        <span className="text-sm italic text-muted-foreground">
+                          (max 5 MB, min. 1920x320)
+                        </span>
+                      </Label>
+                      {fileError ? (
+                        <p className="text-sm text-red-500">{fileError}</p>
+                      ) : null}
+                    </div>
+                    <label
+                      htmlFor="banner-image"
+                      className="group relative mt-1 flex h-[4rem] w-[12rem] cursor-pointer flex-col items-center justify-center rounded-md border border-gray-300 bg-white shadow-sm transition-all hover:bg-gray-50"
+                      style={{
+                        backgroundImage:
+                          "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)",
+                        backgroundSize: "20px 20px",
+                        backgroundPosition: "0 0, 10px 0, 10px -10px, 0px 10px",
+                      }}
+                    >
+                      {false && (
+                        <div className="absolute z-[5] flex h-full w-full items-center justify-center rounded-md bg-white">
+                          <LoadingSpinner />
+                        </div>
+                      )}
+                      <div
+                        className="absolute z-[5] h-full w-full rounded-md"
+                        onDragOver={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setDragActive(true);
+                        }}
+                        onDragEnter={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setDragActive(true);
+                        }}
+                        onDragLeave={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setDragActive(false);
+                        }}
+                        onDrop={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setDragActive(false);
+                          setFileError(null);
+                          const file =
+                            e.dataTransfer.files && e.dataTransfer.files[0];
+                          if (file) {
+                            if (file.size / 1024 / 1024 > 5) {
+                              setFileError("File size too big (max 5MB)");
+                            } else if (
+                              file.type !== "image/png" &&
+                              file.type !== "image/jpeg"
+                            ) {
+                              setFileError(
+                                "File type not supported (.png or .jpg only)",
+                              );
+                            } else {
+                              const reader = new FileReader();
+                              reader.onload = (e) => {
+                                setBanner(e.target?.result as string);
+                              };
+                              reader.readAsDataURL(file);
+                            }
+                          }
+                        }}
+                      />
+                      <div
+                        className={`${
+                          dragActive
+                            ? "cursor-copy border-2 border-black bg-gray-50 opacity-100"
+                            : ""
+                        } absolute z-[3] flex h-full w-full flex-col items-center justify-center rounded-md bg-white transition-all ${
+                          banner
+                            ? "opacity-0 group-hover:opacity-100"
+                            : "group-hover:bg-gray-50"
+                        }`}
+                      >
+                        <PlusIcon
+                          className={`${
+                            dragActive ? "scale-110" : "scale-100"
+                          } h-7 w-7 text-gray-500 transition-all duration-75 group-hover:scale-110 group-active:scale-95`}
+                        />
+                        <span className="sr-only">OG image upload</span>
+                      </div>
+                      {banner && (
+                        <img
+                          src={banner}
+                          alt="Preview"
+                          className="h-full w-full rounded-md object-contain"
+                        />
+                      )}
+                    </label>
+                    <div className="mt-1 flex rounded-md shadow-sm">
+                      <input
+                        id="banner-image"
+                        name="image"
+                        type="file"
+                        accept="image/jpeg,image/png"
+                        className="sr-only"
+                        onChange={onChangeBanner}
+                      />
+                    </div>
+                  </div>
+
+                  {/* Brand Color Input */}
+                  <div className="flex flex-col gap-2">
+                    <Label htmlFor="primary-color">Brand Color</Label>
+                    <div className="flex space-x-1">
+                      <Popover>
+                        <PopoverTrigger>
+                          <div
+                            className="h-9 w-9 cursor-pointer rounded-md shadow-sm ring-1 ring-muted-foreground hover:ring-1 hover:ring-gray-300"
+                            style={{ backgroundColor: brandColor }}
+                          />
+                        </PopoverTrigger>
+                        <PopoverContent>
+                          <HexColorPicker
+                            color={brandColor}
+                            onChange={setBrandColor}
+                          />
+                        </PopoverContent>
+                      </Popover>
+                      <HexColorInput
+                        className="flex h-9 w-full rounded-md border-0 bg-background px-3 py-2 text-sm shadow-sm ring-1 ring-muted-foreground placeholder:text-muted-foreground focus:border-0 focus:ring-1 focus:ring-gray-300"
+                        color={brandColor}
+                        onChange={setBrandColor}
+                        prefixed
+                      />
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+              <CardFooter className="border-t p-6">
+                <Button onClick={saveBranding} loading={isLoading}>
+                  Save changes
+                </Button>
+
+                {/* delete button */}
+                <Button variant="link" onClick={handleDelete} disabled={!brand}>
+                  Reset branding
+                </Button>
+              </CardFooter>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </AppLayout>
+  );
+}
diff --git a/pages/datarooms/[id]/documents/[...name].tsx b/pages/datarooms/[id]/documents/[...name].tsx
index b06b24199..e7ae9a2b6 100644
--- a/pages/datarooms/[id]/documents/[...name].tsx
+++ b/pages/datarooms/[id]/documents/[...name].tsx
@@ -96,6 +96,11 @@ export default function Documents() {
               },
               {
                 label: "Customization",
+                href: `/datarooms/${dataroom?.id}/branding`,
+                segment: "branding",
+              },
+              {
+                label: "Settings",
                 href: `/datarooms/${dataroom?.id}/settings`,
                 segment: "settings",
               },
diff --git a/pages/datarooms/[id]/documents/index.tsx b/pages/datarooms/[id]/documents/index.tsx
index b50ef5f9a..ef32f6e91 100644
--- a/pages/datarooms/[id]/documents/index.tsx
+++ b/pages/datarooms/[id]/documents/index.tsx
@@ -89,6 +89,11 @@ export default function Documents() {
               },
               {
                 label: "Customization",
+                href: `/datarooms/${dataroom?.id}/branding`,
+                segment: "branding",
+              },
+              {
+                label: "Settings",
                 href: `/datarooms/${dataroom?.id}/settings`,
                 segment: "settings",
               },
diff --git a/pages/datarooms/[id]/index.tsx b/pages/datarooms/[id]/index.tsx
index 06c5c83e9..1a8c4238a 100644
--- a/pages/datarooms/[id]/index.tsx
+++ b/pages/datarooms/[id]/index.tsx
@@ -54,6 +54,11 @@ export default function DataroomPage() {
               },
               {
                 label: "Customization",
+                href: `/datarooms/${dataroom.id}/branding`,
+                segment: "branding",
+              },
+              {
+                label: "Settings",
                 href: `/datarooms/${dataroom.id}/settings`,
                 segment: "settings",
               },
diff --git a/pages/datarooms/[id]/settings/index.tsx b/pages/datarooms/[id]/settings/index.tsx
index 390ce813d..e883c20c2 100644
--- a/pages/datarooms/[id]/settings/index.tsx
+++ b/pages/datarooms/[id]/settings/index.tsx
@@ -1,184 +1,33 @@
-import { useRouter } from "next/router";
-
-import { useCallback, useEffect, useState } from "react";
+import Link from "next/link";
 
 import { useTeam } from "@/context/team-context";
-import { PlusIcon } from "lucide-react";
-import { HexColorInput, HexColorPicker } from "react-colorful";
 import { toast } from "sonner";
 import { mutate } from "swr";
 
 import { DataroomHeader } from "@/components/datarooms/dataroom-header";
 import AppLayout from "@/components/layouts/app";
 import { NavMenu } from "@/components/navigation-menu";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardFooter } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import LoadingSpinner from "@/components/ui/loading-spinner";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { Form } from "@/components/ui/form";
 
-import { useDataroomBrand } from "@/lib/swr/use-brand";
 import { useDataroom } from "@/lib/swr/use-dataroom";
-import { convertDataUrlToFile, uploadImage } from "@/lib/utils";
 
-export default function DataroomBrandPage() {
-  const router = useRouter();
-  const teamInfo = useTeam();
+export default function Settings() {
   const { dataroom } = useDataroom();
-  const { brand } = useDataroomBrand({ dataroomId: dataroom?.id });
-
-  const [brandColor, setBrandColor] = useState<string>("#000000");
-  const [logo, setLogo] = useState<string | null>(null);
-  const [banner, setBanner] = useState<string | null>(null);
-
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [fileError, setFileError] = useState<string | null>(null);
-  const [dragActive, setDragActive] = useState(false);
-
-  const onChangeLogo = useCallback(
-    (e: any) => {
-      setFileError(null);
-      const file = e.target.files[0];
-      if (file) {
-        if (file.size / 1024 / 1024 > 2) {
-          setFileError("File size too big (max 2MB)");
-        } else if (file.type !== "image/png" && file.type !== "image/jpeg") {
-          setFileError("File type not supported (.png or .jpg only)");
-        } else {
-          const reader = new FileReader();
-          reader.onload = (e) => {
-            setLogo(e.target?.result as string);
-          };
-          reader.readAsDataURL(file);
-        }
-      }
-    },
-    [setLogo],
-  );
-
-  const onChangeBanner = useCallback(
-    (e: any) => {
-      setFileError(null);
-      const file = e.target.files[0];
-      if (file) {
-        if (file.size / 1024 / 1024 > 5) {
-          setFileError("File size too big (max 5MB)");
-        } else if (file.type !== "image/png" && file.type !== "image/jpeg") {
-          setFileError("File type not supported (.png or .jpg only)");
-        } else {
-          const reader = new FileReader();
-          reader.onload = (e) => {
-            setBanner(e.target?.result as string);
-          };
-          reader.readAsDataURL(file);
-        }
-      }
-    },
-    [setBanner],
-  );
-
-  useEffect(() => {
-    if (brand) {
-      setBrandColor(brand.brandColor || "#000000");
-      setLogo(brand.logo || null);
-      setBanner(brand.banner || null);
-    }
-  }, [brand]);
+  const teamInfo = useTeam();
+  const teamId = teamInfo?.currentTeam?.id;
 
   if (!dataroom) {
     return <div>Loading...</div>;
   }
 
-  const saveBranding = async (e: any) => {
-    e.preventDefault();
-
-    setIsLoading(true);
-
-    // Upload the image if it's a data URL
-    let blobUrl: string | null = logo && logo.startsWith("data:") ? null : logo;
-    if (logo && logo.startsWith("data:")) {
-      // Convert the data URL to a blob
-      const blob = convertDataUrlToFile({ dataUrl: logo });
-      // Upload the blob to vercel storage
-      blobUrl = await uploadImage(blob);
-      setLogo(blobUrl);
-    }
-
-    let bannerBlobUrl: string | null =
-      banner && banner.startsWith("data:") ? null : banner;
-    if (banner && banner.startsWith("data:")) {
-      // Convert the data URL to a blob
-      const blob = convertDataUrlToFile({ dataUrl: banner });
-      // Upload the blob to vercel storage
-      bannerBlobUrl = await uploadImage(blob);
-      setBanner(blobUrl);
-    }
-
-    const data = {
-      brandColor: brandColor,
-      logo: blobUrl,
-      banner: bannerBlobUrl,
-    };
-
-    const res = await fetch(
-      `/api/teams/${teamInfo?.currentTeam?.id}/datarooms/${dataroom.id}/branding`,
-      {
-        method: brand ? "PUT" : "POST",
-        body: JSON.stringify(data),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      },
-    );
-    if (res.ok) {
-      mutate(
-        `/api/teams/${teamInfo?.currentTeam?.id}/datarooms/${dataroom.id}/branding`,
-      );
-      setIsLoading(false);
-      toast.success("Branding updated successfully");
-    }
-  };
-
-  const handleDelete = async () => {
-    setIsLoading(true);
-
-    const res = await fetch(
-      `/api/teams/${teamInfo?.currentTeam?.id}/datarooms/${dataroom.id}/branding`,
-      {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      },
-    );
-    if (res.ok) {
-      setLogo(null);
-      setBanner(null);
-      setBrandColor("#000000");
-      setIsLoading(false);
-      toast.success("Branding reset successfully");
-      router.reload();
-    }
-  };
-
   return (
     <AppLayout>
-      <div className="relative mx-2 mb-10 mt-4 space-y-8 overflow-hidden px-1 sm:mx-3 md:mx-5 md:mt-5 lg:mx-7 lg:mt-8 xl:mx-10">
+      <main className="relative mx-2 mb-10 mt-4 space-y-8 overflow-hidden px-1 sm:mx-3 md:mx-5 md:mt-5 lg:mx-7 lg:mt-8 xl:mx-10">
         <header>
           <DataroomHeader
             title={dataroom.name}
             description={dataroom.pId}
-            actions={
-              [
-                // <Button onClick={() => setIsLinkSheetOpen(true)} key={1}>
-                //   Create Link
-                // </Button>,
-              ]
-            }
+            actions={[]}
           />
 
           <NavMenu
@@ -200,6 +49,11 @@ export default function DataroomBrandPage() {
               },
               {
                 label: "Customization",
+                href: `/datarooms/${dataroom.id}/branding`,
+                segment: "branding",
+              },
+              {
+                label: "Settings",
                 href: `/datarooms/${dataroom.id}/settings`,
                 segment: "settings",
               },
@@ -207,273 +61,233 @@ export default function DataroomBrandPage() {
           />
         </header>
 
-        <div className="space-y-4">
-          <div>
-            <Card className="dark:bg-secondary">
-              <CardContent className="pt-6">
-                <div className="grid gap-6">
-                  {/* Logo Input */}
-                  <div className="flex flex-col gap-2">
-                    <div className="flex items-center justify-between">
-                      <Label htmlFor="logo">
-                        Logo{" "}
-                        <span className="text-sm italic text-muted-foreground">
-                          (max 2 MB)
-                        </span>
-                      </Label>
-                      {fileError ? (
-                        <p className="text-sm text-red-500">{fileError}</p>
-                      ) : null}
-                    </div>
-                    <label
-                      htmlFor="image"
-                      className="group relative mt-1 flex h-[4rem] w-[12rem] cursor-pointer flex-col items-center justify-center rounded-md border border-gray-300 bg-white shadow-sm transition-all hover:bg-gray-50"
-                      style={{
-                        backgroundImage:
-                          "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)",
-                        backgroundSize: "20px 20px",
-                        backgroundPosition: "0 0, 10px 0, 10px -10px, 0px 10px",
-                      }}
-                    >
-                      {false && (
-                        <div className="absolute z-[5] flex h-full w-full items-center justify-center rounded-md bg-white">
-                          <LoadingSpinner />
-                        </div>
-                      )}
-                      <div
-                        className="absolute z-[5] h-full w-full rounded-md"
-                        onDragOver={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setDragActive(true);
-                        }}
-                        onDragEnter={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setDragActive(true);
-                        }}
-                        onDragLeave={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setDragActive(false);
-                        }}
-                        onDrop={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setDragActive(false);
-                          setFileError(null);
-                          const file =
-                            e.dataTransfer.files && e.dataTransfer.files[0];
-                          if (file) {
-                            if (file.size / 1024 / 1024 > 2) {
-                              setFileError("File size too big (max 2MB)");
-                            } else if (
-                              file.type !== "image/png" &&
-                              file.type !== "image/jpeg"
-                            ) {
-                              setFileError(
-                                "File type not supported (.png or .jpg only)",
-                              );
-                            } else {
-                              const reader = new FileReader();
-                              reader.onload = (e) => {
-                                setLogo(e.target?.result as string);
-                              };
-                              reader.readAsDataURL(file);
-                            }
-                          }
-                        }}
-                      />
-                      <div
-                        className={`${
-                          dragActive
-                            ? "cursor-copy border-2 border-black bg-gray-50 opacity-100"
-                            : ""
-                        } absolute z-[3] flex h-full w-full flex-col items-center justify-center rounded-md bg-white transition-all ${
-                          logo
-                            ? "opacity-0 group-hover:opacity-100"
-                            : "group-hover:bg-gray-50"
-                        }`}
+        {/* Settings */}
+        <div className="mx-auto grid w-full gap-2">
+          <h1 className="text-2xl font-semibold">Settings</h1>
+        </div>
+        <div className="mx-auto grid w-full items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
+          <nav className="grid gap-4 text-sm text-muted-foreground">
+            <Link
+              href={`/datarooms/${dataroom.id}/settings2`}
+              className="font-semibold text-primary"
+            >
+              General
+            </Link>
+          </nav>
+          <div className="grid gap-6">
+            <Form
+              title="Dataroom Name"
+              description="This is the name of your data room on Papermark."
+              inputAttrs={{
+                name: "name",
+                defaultValue: dataroom.name,
+                placeholder: "My Dataroom",
+                maxLength: 32,
+              }}
+              helpText="Max 32 characters."
+              handleSubmit={(updateData) =>
+                fetch(`/api/teams/${teamId}/datarooms/${dataroom.id}`, {
+                  method: "PATCH",
+                  headers: {
+                    "Content-Type": "application/json",
+                  },
+                  body: JSON.stringify(updateData),
+                }).then(async (res) => {
+                  if (res.status === 200) {
+                    await Promise.all([
+                      mutate(`/api/teams/${teamId}/datarooms`),
+                      mutate(`/api/teams/${teamId}/datarooms/${dataroom.id}`),
+                    ]);
+                    toast.success("Successfully updated dataroom name!");
+                  } else {
+                    const { error } = await res.json();
+                    toast.error(error.message);
+                  }
+                })
+              }
+            />
+            {/* <Card>
+                  <CardHeader className="relative">
+                    <CardTitle>Feedback Question</CardTitle>
+                    <CardDescription>
+                      This question will be shown to visitors after the last
+                      page of your document.
+                    </CardDescription>
+                    <div className="absolute right-8 top-6">
+                      <span
+                        className="relative ml-auto flex h-4 w-4"
+                        title={`Feedback is ${feedback?.enabled ? "" : "not"} active`}
                       >
-                        <PlusIcon
-                          className={`${
-                            dragActive ? "scale-110" : "scale-100"
-                          } h-7 w-7 text-gray-500 transition-all duration-75 group-hover:scale-110 group-active:scale-95`}
+                        <span
+                          className={cn(
+                            "absolute inline-flex h-full w-full rounded-full opacity-75",
+                            feedback?.enabled
+                              ? "animate-ping bg-green-400"
+                              : "",
+                          )}
                         />
-                        <span className="sr-only">OG image upload</span>
-                      </div>
-                      {logo && (
-                        <img
-                          src={logo}
-                          alt="Preview"
-                          className="h-full w-full rounded-md object-contain"
+                        <span
+                          className={cn(
+                            "relative inline-flex rounded-full h-4 w-4",
+                            feedback?.enabled ? "bg-green-500" : "bg-red-500",
+                          )}
                         />
-                      )}
-                    </label>
-                    <div className="mt-1 flex rounded-md shadow-sm">
-                      <input
-                        id="image"
-                        name="image"
-                        type="file"
-                        accept="image/jpeg,image/png"
-                        className="sr-only"
-                        onChange={onChangeLogo}
-                      />
+                      </span>
+                      <span className="sr-only">
+                        {feedback?.enabled ? "Enabled" : "Disabled"}
+                      </span>
                     </div>
-                  </div>
+                  </CardHeader>
+                  <form
+                    onSubmit={async (e) => {
+                      e.preventDefault();
 
-                  {/* Banner Input */}
-                  <div className="flex flex-col gap-2">
-                    <div className="flex items-center justify-between">
-                      <Label htmlFor="banner">
-                        Banner{" "}
-                        <span className="text-sm italic text-muted-foreground">
-                          (max 5 MB, min. 1920x320)
-                        </span>
-                      </Label>
-                      {fileError ? (
-                        <p className="text-sm text-red-500">{fileError}</p>
-                      ) : null}
-                    </div>
-                    <label
-                      htmlFor="banner-image"
-                      className="group relative mt-1 flex h-[4rem] w-[12rem] cursor-pointer flex-col items-center justify-center rounded-md border border-gray-300 bg-white shadow-sm transition-all hover:bg-gray-50"
-                      style={{
-                        backgroundImage:
-                          "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)",
-                        backgroundSize: "20px 20px",
-                        backgroundPosition: "0 0, 10px 0, 10px -10px, 0px 10px",
-                      }}
-                    >
-                      {false && (
-                        <div className="absolute z-[5] flex h-full w-full items-center justify-center rounded-md bg-white">
-                          <LoadingSpinner />
+                      if (value == "" || isNotBusiness) return null;
+
+                      setLoading(true);
+
+                      try {
+                        const response = await fetch(
+                          `/api/teams/${teamId}/documents/${id}/feedback`,
+                          {
+                            method: "PUT",
+                            headers: {
+                              "Content-Type": "application/json",
+                            },
+                            body: JSON.stringify({ questionText: value }),
+                          },
+                        );
+
+                        if (response.status === 200) {
+                          await mutate(
+                            `/api/teams/${teamId}/documents/${id}/feedback`,
+                          );
+                          toast.success(
+                            "Successfully added a feedback question!",
+                          );
+                        } else {
+                          const { error } = await response.json();
+                          toast.error(error.message);
+                        }
+                      } catch (error) {
+                        // Handle any errors that might occur during fetch
+                        toast.error(
+                          "An error occurred while adding the question.",
+                        );
+                        console.error("Fetch error:", error);
+                      } finally {
+                        setLoading(false);
+                      }
+                    }}
+                  >
+                    <CardContent>
+                      <div className="grid w-full items-start gap-6 overflow-x-visible pb-4 pt-0">
+                        <div className="grid gap-3">
+                          <Label>Question Type</Label>
+                          <Select defaultValue="yes-no">
+                            <SelectTrigger>
+                              <SelectValue placeholder="Select a question type" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="yes-no">Yes / No</SelectItem>
+                            </SelectContent>
+                          </Select>
                         </div>
-                      )}
-                      <div
-                        className="absolute z-[5] h-full w-full rounded-md"
-                        onDragOver={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setDragActive(true);
-                        }}
-                        onDragEnter={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setDragActive(true);
-                        }}
-                        onDragLeave={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setDragActive(false);
-                        }}
-                        onDrop={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setDragActive(false);
-                          setFileError(null);
-                          const file =
-                            e.dataTransfer.files && e.dataTransfer.files[0];
-                          if (file) {
-                            if (file.size / 1024 / 1024 > 5) {
-                              setFileError("File size too big (max 5MB)");
-                            } else if (
-                              file.type !== "image/png" &&
-                              file.type !== "image/jpeg"
-                            ) {
-                              setFileError(
-                                "File type not supported (.png or .jpg only)",
+                        <div className="grid gap-3">
+                          <Label htmlFor="question">Question</Label>
+                          <Input
+                            id="question"
+                            type="text"
+                            name="question"
+                            required={!isNotBusiness}
+                            placeholder="Are you interested?"
+                            value={value || ""}
+                            onChange={(e) => setValue(e.target.value)}
+                          />
+                        </div>
+                      </div>
+                    </CardContent>
+                    <CardFooter className="border-t py-3 bg-muted rounded-b-lg justify-end gap-x-2">
+                      {feedback ? (
+                        <Button
+                          type="button"
+                          variant="outline"
+                          loading={loadingStatus}
+                          onClick={async (e) => {
+                            try {
+                              e.preventDefault();
+                              setLoadingStatus(true);
+
+                              const response = await fetch(
+                                `/api/teams/${teamId}/documents/${id}/feedback`,
+                                {
+                                  method: "PUT",
+                                  headers: {
+                                    "Content-Type": "application/json",
+                                  },
+                                  body: JSON.stringify({
+                                    enabled: !feedback?.enabled,
+                                  }),
+                                },
                               );
-                            } else {
-                              const reader = new FileReader();
-                              reader.onload = (e) => {
-                                setBanner(e.target?.result as string);
-                              };
-                              reader.readAsDataURL(file);
+
+                              if (response.status === 200) {
+                                await mutate(
+                                  `/api/teams/${teamId}/documents/${id}/feedback`,
+                                );
+                                toast.success(
+                                  `${feedback?.enabled ? "Turned off" : "Turned on"} feedback question`,
+                                );
+                              } else {
+                                const { error } = await response.json();
+                                toast.error(error.message);
+                              }
+                            } catch (error) {
+                              // Handle any errors that might occur during fetch
+                              toast.error("An error occurred.");
+                              console.error("Fetch error:", error);
+                            } finally {
+                              setLoadingStatus(false);
                             }
-                          }
-                        }}
-                      />
-                      <div
-                        className={`${
-                          dragActive
-                            ? "cursor-copy border-2 border-black bg-gray-50 opacity-100"
-                            : ""
-                        } absolute z-[3] flex h-full w-full flex-col items-center justify-center rounded-md bg-white transition-all ${
-                          banner
-                            ? "opacity-0 group-hover:opacity-100"
-                            : "group-hover:bg-gray-50"
-                        }`}
-                      >
-                        <PlusIcon
-                          className={`${
-                            dragActive ? "scale-110" : "scale-100"
-                          } h-7 w-7 text-gray-500 transition-all duration-75 group-hover:scale-110 group-active:scale-95`}
-                        />
-                        <span className="sr-only">OG image upload</span>
-                      </div>
-                      {banner && (
-                        <img
-                          src={banner}
-                          alt="Preview"
-                          className="h-full w-full rounded-md object-contain"
-                        />
+                          }}
+                        >
+                          {feedback?.enabled ? "Turn off" : "Turn on"}
+                        </Button>
+                      ) : null}
+                      {isNotBusiness ? (
+                        <UpgradePlanModal
+                          clickedPlan={"Business"}
+                          trigger={"feedback_question"}
+                        >
+                          <Button type="submit" loading={loading}>
+                            {feedback ? "Update question" : "Create question"}
+                          </Button>
+                        </UpgradePlanModal>
+                      ) : (
+                        <Button type="submit" loading={loading}>
+                          {feedback ? "Update question" : "Create question"}
+                        </Button>
                       )}
-                    </label>
-                    <div className="mt-1 flex rounded-md shadow-sm">
-                      <input
-                        id="banner-image"
-                        name="image"
-                        type="file"
-                        accept="image/jpeg,image/png"
-                        className="sr-only"
-                        onChange={onChangeBanner}
-                      />
-                    </div>
-                  </div>
-
-                  {/* Brand Color Input */}
-                  <div className="flex flex-col gap-2">
-                    <Label htmlFor="primary-color">Brand Color</Label>
-                    <div className="flex space-x-1">
-                      <Popover>
-                        <PopoverTrigger>
-                          <div
-                            className="h-9 w-9 cursor-pointer rounded-md shadow-sm ring-1 ring-muted-foreground hover:ring-1 hover:ring-gray-300"
-                            style={{ backgroundColor: brandColor }}
-                          />
-                        </PopoverTrigger>
-                        <PopoverContent>
-                          <HexColorPicker
-                            color={brandColor}
-                            onChange={setBrandColor}
-                          />
-                        </PopoverContent>
-                      </Popover>
-                      <HexColorInput
-                        className="flex h-9 w-full rounded-md border-0 bg-background px-3 py-2 text-sm shadow-sm ring-1 ring-muted-foreground placeholder:text-muted-foreground focus:border-0 focus:ring-1 focus:ring-gray-300"
-                        color={brandColor}
-                        onChange={setBrandColor}
-                        prefixed
-                      />
-                    </div>
-                  </div>
-                </div>
+                    </CardFooter>
+                  </form>
+                </Card> */}
+            {/* <Card className="border-red-500">
+              <CardHeader>
+                <CardTitle>Delete Document</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">
+                  This actions deletes the document and any associates links and
+                  analytics.
+                </p>
               </CardContent>
-              <CardFooter className="border-t p-6">
-                <Button onClick={saveBranding} loading={isLoading}>
-                  Save changes
-                </Button>
-
-                {/* delete button */}
-                <Button variant="link" onClick={handleDelete} disabled={!brand}>
-                  Reset branding
-                </Button>
+              <CardFooter className="justify-end rounded-b-lg border-t border-red-500 px-6 py-3">
+                <Button variant="destructive">Delete document</Button>
               </CardFooter>
-            </Card>
+            </Card> */}
           </div>
         </div>
-      </div>
+      </main>
     </AppLayout>
   );
 }
diff --git a/pages/datarooms/[id]/users/index.tsx b/pages/datarooms/[id]/users/index.tsx
index de6a96e90..663889d81 100644
--- a/pages/datarooms/[id]/users/index.tsx
+++ b/pages/datarooms/[id]/users/index.tsx
@@ -56,6 +56,11 @@ export default function DataroomPage() {
               },
               {
                 label: "Customization",
+                href: `/datarooms/${dataroom.id}/branding`,
+                segment: "branding",
+              },
+              {
+                label: "Settings",
                 href: `/datarooms/${dataroom.id}/settings`,
                 segment: "settings",
               },