diff --git a/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx b/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
index 2c8259c0be0..0f4aa72bb79 100644
--- a/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
+++ b/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
@@ -11,14 +11,18 @@ import {
   SubLabel,
   TextFormField,
 } from "@/components/admin/connectors/Field";
-import { Button, Divider } from "@tremor/react";
+import { Button, Divider, Text } from "@tremor/react";
 import { ImageUpload } from "./ImageUpload";
+import { AdvancedOptionsToggle } from "@/components/AdvancedOptionsToggle";
+import Link from "next/link";
 
 export function WhitelabelingForm() {
   const router = useRouter();
   const [selectedLogo, setSelectedLogo] = useState<File | null>(null);
   const [selectedLogotype, setSelectedLogotype] = useState<File | null>(null);
 
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
+
   const settings = useContext(SettingsContext);
   if (!settings) {
     return null;
@@ -97,7 +101,7 @@ export function WhitelabelingForm() {
 
             const formData = new FormData();
             formData.append("file", selectedLogotype);
-            setSelectedLogo(null);
+            setSelectedLogotype(null);
             const response = await fetch(
               "/api/admin/enterprise-settings/logo?is_logotype=true",
               {
@@ -166,103 +170,129 @@ export function WhitelabelingForm() {
                 Specify your own logo to replace the standard Danswer logo.
               </SubLabel>
             )}
+
             <ImageUpload
               selectedFile={selectedLogo}
               setSelectedFile={setSelectedLogo}
             />
-            <br />
-            <Label>Custom Logotype</Label>
 
-            {values.use_custom_logotype ? (
-              <div className="mt-3">
-                <SubLabel>Current Custom Logotype: </SubLabel>
-                <img
-                  src={"/api/enterprise-settings/logotype?u=" + Date.now()}
-                  alt="logotype"
-                  style={{ objectFit: "contain" }}
-                  className="w-32 h-32 mb-10 mt-4"
-                />
+            <Divider />
 
-                <Button
-                  color="red"
-                  size="xs"
-                  type="button"
-                  className="mb-8"
-                  onClick={async () => {
-                    const valuesWithoutLogotype = {
-                      ...values,
-                      use_custom_logotype: false,
-                    };
-                    await updateEnterpriseSettings(valuesWithoutLogotype);
-                    setValues(valuesWithoutLogotype);
-                  }}
-                >
-                  Delete
-                </Button>
-
-                <SubLabel>
-                  Override the current custom logotype by uploading a new image
-                  below and clicking the Update button. This logotype is the
-                  text-based logo that will be rendered at the bottom right of
-                  the chat screen.
-                </SubLabel>
-              </div>
-            ) : (
-              <SubLabel>Specify your own logotype</SubLabel>
-            )}
-            <ImageUpload
-              selectedFile={selectedLogotype}
-              setSelectedFile={setSelectedLogotype}
+            <AdvancedOptionsToggle
+              showAdvancedOptions={showAdvancedOptions}
+              setShowAdvancedOptions={setShowAdvancedOptions}
             />
 
-            <Divider />
+            <br />
 
-            <div className="mt-4">
-              <TextFormField
-                label="Custom Chat Header Content"
-                name="custom_header_content"
-                subtext={`Custom Markdown content that will be displayed as a banner at the top of the Chat page.`}
-                placeholder="Your header content..."
-                disabled={isSubmitting}
-              />
-            </div>
+            {showAdvancedOptions && (
+              <>
+                <Text>
+                  Read{" "}
+                  <Link
+                    href={"https://docs.danswer.dev/enterprise_edition/theming"}
+                    className="text-link cursor-pointer"
+                  >
+                    the docs
+                  </Link>{" "}
+                  to see whitelabelling examples in action.
+                </Text>
+                <div className="mt-4">
+                  <TextFormField
+                    label="Chat Header Content"
+                    name="custom_header_content"
+                    subtext={`Custom Markdown content that will be displayed as a banner at the top of the Chat page.`}
+                    placeholder="Your header content..."
+                    disabled={isSubmitting}
+                  />
+                </div>
 
-            <Divider />
+                <Divider />
 
-            <div className="mt-4">
-              <TextFormField
-                label="Custom Popup Header"
-                name="custom_popup_header"
-                subtext={`The title for the popup that will be displayed for each user on their initial visit 
-                to the application. If left blank AND Custom Popup Content is specified, will use "Welcome to ${
-                  values.application_name || "Danswer"
-                }!".`}
-                placeholder="Initial Popup Header"
-                disabled={isSubmitting}
-              />
-            </div>
+                <div className="mt-4">
+                  <TextFormField
+                    label="Popup Header"
+                    name="custom_popup_header"
+                    subtext={`The title for the popup that will be displayed for each user on their initial visit 
+        to the application. If left blank AND Custom Popup Content is specified, will use "Welcome to ${
+          values.application_name || "Danswer"
+        }!".`}
+                    placeholder="Initial Popup Header"
+                    disabled={isSubmitting}
+                  />
+                </div>
 
-            <div className="mt-4">
-              <TextFormField
-                label="Custom Popup Content"
-                name="custom_popup_content"
-                subtext={`Custom Markdown content that will be displayed as a popup on initial visit to the application.`}
-                placeholder="Your popup content..."
-                isTextArea
-                disabled={isSubmitting}
-              />
-            </div>
+                <div className="mt-4">
+                  <TextFormField
+                    label="Popup Content"
+                    name="custom_popup_content"
+                    subtext={`Custom Markdown content that will be displayed as a popup on initial visit to the application.`}
+                    placeholder="Your popup content..."
+                    isTextArea
+                    disabled={isSubmitting}
+                  />
+                </div>
 
-            <div className="mt-4">
-              <TextFormField
-                label="Custom Footer"
-                name="custom_lower_disclaimer_content"
-                subtext={`Custom Markdown content that will be displayed at the bottom of the Chat page.`}
-                placeholder="Your disclaimer content..."
-                isTextArea
-                disabled={isSubmitting}
-              />
-            </div>
+                <div className="mt-4">
+                  <TextFormField
+                    label="Chat Footer Text"
+                    name="custom_lower_disclaimer_content"
+                    subtext={`Custom Markdown content that will be displayed at the bottom of the Chat page.`}
+                    placeholder="Your disclaimer content..."
+                    isTextArea
+                    disabled={isSubmitting}
+                  />
+                </div>
+                <Label>Chat Footer Logotype</Label>
+
+                {values.use_custom_logotype ? (
+                  <div className="mt-3">
+                    <SubLabel>Current Custom Logotype: </SubLabel>
+                    <img
+                      src={"/api/enterprise-settings/logotype?u=" + Date.now()}
+                      alt="logotype"
+                      style={{ objectFit: "contain" }}
+                      className="w-32 h-32 mb-10 mt-4"
+                    />
+
+                    <Button
+                      color="red"
+                      size="xs"
+                      type="button"
+                      className="mb-8"
+                      onClick={async () => {
+                        const valuesWithoutLogotype = {
+                          ...values,
+                          use_custom_logotype: false,
+                        };
+                        await updateEnterpriseSettings(valuesWithoutLogotype);
+                        setValues(valuesWithoutLogotype);
+                      }}
+                    >
+                      Delete
+                    </Button>
+
+                    <SubLabel>
+                      Override your uploaded custom logotype by uploading a new
+                      image below and clicking the Update button. This logotype
+                      is the text-based logo that will be rendered at the bottom
+                      right of the chat screen.
+                    </SubLabel>
+                  </div>
+                ) : (
+                  <SubLabel>
+                    Add a custom logotype by uploading a new image below and
+                    clicking the Update button. This logotype is the text-based
+                    logo that will be rendered at the bottom right of the chat
+                    screen.
+                  </SubLabel>
+                )}
+                <ImageUpload
+                  selectedFile={selectedLogotype}
+                  setSelectedFile={setSelectedLogotype}
+                />
+              </>
+            )}
 
             <Button type="submit" className="mt-4">
               Update