diff --git a/apps/client/src/widgets/note_bars/CollectionProperties.tsx b/apps/client/src/widgets/note_bars/CollectionProperties.tsx
index 2ede18a94d..66bfb32c45 100644
--- a/apps/client/src/widgets/note_bars/CollectionProperties.tsx
+++ b/apps/client/src/widgets/note_bars/CollectionProperties.tsx
@@ -86,8 +86,8 @@ function ViewOptions({ note, viewType }: { note: FNote, viewType: ViewTypeOption
             dropdownContainerClassName="mobile-bottom-menu"
             mobileBackdrop
         >
-            {properties.map(property => (
-                <ViewProperty key={property.label} note={note} property={property} />
+            {properties.map((property, index) => (
+                <ViewProperty key={index} note={note} property={property} />
             ))}
             {properties.length > 0 && <FormDropdownDivider />}
 
diff --git a/apps/client/src/widgets/react/NotePropertyMenu.tsx b/apps/client/src/widgets/react/NotePropertyMenu.tsx
index cbc4985e68..6d8070741d 100644
--- a/apps/client/src/widgets/react/NotePropertyMenu.tsx
+++ b/apps/client/src/widgets/react/NotePropertyMenu.tsx
@@ -53,7 +53,7 @@ export interface ComboBoxItem {
     label: string;
 }
 
-interface ComboBoxGroup {
+export interface ComboBoxGroup {
     title: string;
     items: ComboBoxItem[];
 }
diff --git a/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
index 4af8247a3f..e25f2650c9 100644
--- a/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
@@ -1,18 +1,20 @@
-import { useContext, useMemo } from "preact/hooks";
-import { t } from "../../services/i18n";
-import FormSelect, { FormSelectWithGroups } from "../react/FormSelect";
-import { TabContext } from "./ribbon-interface";
-import { mapToKeyValueArray } from "../../services/utils";
-import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
-import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, ComboBoxProperty, NumberProperty, SplitButtonProperty } from "./collection-properties-config";
-import Button, { SplitButton } from "../react/Button";
-import { ParentComponent } from "../react/react_utils";
-import FNote from "../../entities/fnote";
-import FormCheckbox from "../react/FormCheckbox";
-import FormTextBox from "../react/FormTextBox";
 import { ComponentChildren } from "preact";
-import { ViewTypeOptions } from "../collections/interface";
+import { useContext, useMemo } from "preact/hooks";
+
+import FNote from "../../entities/fnote";
 import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
+import { t } from "../../services/i18n";
+import { mapToKeyValueArray } from "../../services/utils";
+import { ViewTypeOptions } from "../collections/interface";
+import Button, { SplitButton } from "../react/Button";
+import FormCheckbox from "../react/FormCheckbox";
+import FormSelect, { FormSelectWithGroups } from "../react/FormSelect";
+import FormTextBox from "../react/FormTextBox";
+import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
+import { BookProperty, ButtonProperty, CheckBoxProperty, ComboBoxGroup, ComboBoxItem, ComboBoxProperty, NumberProperty, SplitButtonProperty } from "../react/NotePropertyMenu";
+import { ParentComponent } from "../react/react_utils";
+import { bookPropertiesConfig } from "./collection-properties-config";
+import { TabContext } from "./ribbon-interface";
 
 export const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
     grid: t("book_properties.grid"),
@@ -50,70 +52,70 @@ export function useViewType(note: FNote | null | undefined) {
 }
 
 function CollectionTypeSwitcher({ viewType, setViewType }: { viewType: string, setViewType: (newValue: string) => void }) {
-  const collectionTypes = useMemo(() => mapToKeyValueArray(VIEW_TYPE_MAPPINGS), []);
+    const collectionTypes = useMemo(() => mapToKeyValueArray(VIEW_TYPE_MAPPINGS), []);
 
-  return (
-    <div style={{ display: "flex", alignItems: "baseline" }}>
-        <span style={{ whiteSpace: "nowrap" }}>{t("book_properties.view_type")}:&nbsp; &nbsp;</span>
-        <FormSelect
-          currentValue={viewType ?? "grid"} onChange={setViewType}
-          values={collectionTypes}
-          keyProperty="key" titleProperty="value"
-        />
-    </div>
-  )
+    return (
+        <div style={{ display: "flex", alignItems: "baseline" }}>
+            <span style={{ whiteSpace: "nowrap" }}>{t("book_properties.view_type")}:&nbsp; &nbsp;</span>
+            <FormSelect
+                currentValue={viewType ?? "grid"} onChange={setViewType}
+                values={collectionTypes}
+                keyProperty="key" titleProperty="value"
+            />
+        </div>
+    );
 }
 
-function BookProperties({ viewType, note, properties }: { viewType: ViewTypeOptions, note: FNote, properties: BookProperty[] }) {
-  return (
-    <>
-        {properties.map(property => (
-        <div className={`type-${property}`}>
-            {mapPropertyView({ note, property })}
-        </div>
-        ))}
+function BookProperties({ note, properties }: { viewType: ViewTypeOptions, note: FNote, properties: BookProperty[] }) {
+    return (
+        <>
+            {properties.map((property, index) => (
+                <div key={index} className={`type-${property}`}>
+                    {mapPropertyView({ note, property })}
+                </div>
+            ))}
 
-        <CheckboxPropertyView
-            note={note} property={{
-                bindToLabel: "includeArchived",
-                label: t("book_properties.include_archived_notes"),
-                type: "checkbox"
-            }}
-        />
-    </>
-  )
+            <CheckboxPropertyView
+                note={note} property={{
+                    bindToLabel: "includeArchived",
+                    label: t("book_properties.include_archived_notes"),
+                    type: "checkbox"
+                }}
+            />
+        </>
+    );
 }
 
 function mapPropertyView({ note, property }: { note: FNote, property: BookProperty }) {
-  switch (property.type) {
-    case "button":
-      return <ButtonPropertyView note={note} property={property} />
-    case "split-button":
-      return <SplitButtonPropertyView note={note} property={property} />
-    case "checkbox":
-      return <CheckboxPropertyView note={note} property={property} />
-    case "number":
-      return <NumberPropertyView note={note} property={property} />
-    case "combobox":
-      return <ComboBoxPropertyView note={note} property={property} />
-  }
+    switch (property.type) {
+        case "button":
+            return <ButtonPropertyView note={note} property={property} />;
+        case "split-button":
+            return <SplitButtonPropertyView note={note} property={property} />;
+        case "checkbox":
+            return <CheckboxPropertyView note={note} property={property} />;
+        case "number":
+            return <NumberPropertyView note={note} property={property} />;
+        case "combobox":
+            return <ComboBoxPropertyView note={note} property={property} />;
+    }
 }
 
 function ButtonPropertyView({ note, property }: { note: FNote, property: ButtonProperty }) {
-  const parentComponent = useContext(ParentComponent);
+    const parentComponent = useContext(ParentComponent);
 
-  return <Button
-    text={property.label}
-    title={property.title}
-    icon={property.icon}
-    onClick={() => {
-        if (!parentComponent) return;
-        property.onClick({
-            note,
-            triggerCommand: parentComponent.triggerCommand.bind(parentComponent)
-        });
-    }}
-  />
+    return <Button
+        text={property.label}
+        title={property.title}
+        icon={property.icon}
+        onClick={() => {
+            if (!parentComponent) return;
+            property.onClick({
+                note,
+                triggerCommand: parentComponent.triggerCommand.bind(parentComponent)
+            });
+        }}
+    />;
 }
 
 function SplitButtonPropertyView({ note, property }: { note: FNote, property: SplitButtonProperty }) {
@@ -131,18 +133,18 @@ function SplitButtonPropertyView({ note, property }: { note: FNote, property: Sp
         onClick={() => clickContext && property.onClick(clickContext)}
     >
         {parentComponent && <ItemsComponent note={note} parentComponent={parentComponent} />}
-    </SplitButton>
+    </SplitButton>;
 }
 
 function CheckboxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) {
-  const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel);
+    const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel);
 
-  return (
-    <FormCheckbox
-      label={property.label}
-      currentValue={value} onChange={setValue}
-    />
-  )
+    return (
+        <FormCheckbox
+            label={property.label}
+            currentValue={value} onChange={setValue}
+        />
+    );
 }
 
 function NumberPropertyView({ note, property }: { note: FNote, property: NumberProperty }) {
@@ -160,7 +162,7 @@ function NumberPropertyView({ note, property }: { note: FNote, property: NumberP
                 disabled={disabled}
             />
         </LabelledEntry>
-    )
+    );
 }
 
 function ComboBoxPropertyView({ note, property }: { note: FNote, property: ComboBoxProperty }) {
@@ -169,12 +171,12 @@ function ComboBoxPropertyView({ note, property }: { note: FNote, property: Combo
     return (
         <LabelledEntry label={property.label}>
             <FormSelectWithGroups
-                values={property.options}
+                values={property.options.filter(i => !("type" in i)) as (ComboBoxItem | ComboBoxGroup)[]}
                 keyProperty="value" titleProperty="label"
                 currentValue={value ?? property.defaultValue} onChange={setValue}
             />
         </LabelledEntry>
-    )
+    );
 }
 
 function LabelledEntry({ label, children }: { label: string, children: ComponentChildren }) {
@@ -186,5 +188,5 @@ function LabelledEntry({ label, children }: { label: string, children: Component
                 {children}
             </label>
         </>
-    )
+    );
 }