diff --git a/src/components/Kanban.tsx b/src/components/Kanban.tsx
index dd60eb1f..f92dfae0 100644
--- a/src/components/Kanban.tsx
+++ b/src/components/Kanban.tsx
@@ -19,22 +19,57 @@ import toCellValue from "../utils/toCellValue";
 import extractTag from "roamjs-components/util/extractTag";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
 import getSubTree from "roamjs-components/util/getSubTree";
+import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 
 const zPriority = z.record(z.number().min(0).max(1));
 
 type Reprioritize = (args: { uid: string; x: number; y: number }) => void;
 
+const CellEmbed = ({ uid, viewValue }: { uid: string; viewValue: string }) => {
+  const title = getPageTitleByPageUid(uid);
+  const contentRef = useRef(null);
+  const open =
+    viewValue === "open" ? true : viewValue === "closed" ? false : null;
+  useEffect(() => {
+    const el = contentRef.current;
+    if (el) {
+      window.roamAlphaAPI.ui.components.renderBlock({
+        uid,
+        el,
+        // "open?": open, // waiting for roamAlphaAPI to add a open/close to renderBlock
+      });
+    }
+  }, [contentRef]);
+  return (
+    <div className="roamjs-query-embed rounded-xl bg-white p-4 ">
+      <Icon
+        icon="drag-handle-horizontal"
+        className="absolute right-2 top-2 text-gray-400 embed-handle cursor-move z-30"
+      />
+      <div
+        ref={contentRef}
+        className={!!title ? "page-embed" : "block-embed"}
+      />
+    </div>
+  );
+};
+
 const KanbanCard = (card: {
   $priority: number;
   $reprioritize: Reprioritize;
   $displayKey: string;
+  $columnKey: string;
+  $selectionValues: string[];
   $getColumnElement: (x: number) => HTMLDivElement | undefined;
   result: Result;
+  view: string;
+  viewValue: string;
 }) => {
   const [isDragging, setIsDragging] = useState(false);
 
   return (
     <Draggable
+      handle={card.view === "embed" ? ".embed-handle" : ""}
       onDrag={(_, data) => {
         const { x, width } = data.node.getBoundingClientRect();
         const el = card.$getColumnElement(x + width / 2);
@@ -59,6 +94,7 @@ const KanbanCard = (card: {
         data-uid={card.result.uid}
         data-priority={card.$priority}
         onClick={(e) => {
+          if (card.view === "embed") return;
           if (isDragging) return;
           if (e.shiftKey) {
             openBlockInSidebar(card.result.uid);
@@ -73,12 +109,16 @@ const KanbanCard = (card: {
           }
         }}
       >
-        <div className={`rounded-xl bg-white p-4 hover:bg-gray-200`}>
-          {toCellValue({
-            value: card.result[card.$displayKey],
-            uid: card.result[`${card.$displayKey}-uid`],
-          })}
-        </div>
+        {card.view === "embed" ? (
+          <CellEmbed uid={card.result.uid} viewValue={card.viewValue} />
+        ) : (
+          <div className={`rounded-xl bg-white p-4 hover:bg-gray-200 `}>
+            {toCellValue({
+              value: card.result[card.$displayKey],
+              uid: card.result[`${card.$displayKey}-uid`],
+            })}
+          </div>
+        )}
       </div>
     </Draggable>
   );
@@ -98,12 +138,14 @@ const Kanban = ({
   onQuery,
   resultKeys,
   parentUid,
+  views,
 }: {
   resultKeys: Column[];
   data: Result[];
   layout: Record<string, string | string[]>;
   onQuery: () => void;
   parentUid: string;
+  views: { column: string; mode: string; value: string }[];
 }) => {
   const byUid = useMemo(
     () => Object.fromEntries(data.map((d) => [d.uid, d] as const)),
@@ -347,6 +389,12 @@ const Kanban = ({
     setOpenedPopoverIndex(null);
   };
 
+  const viewsByColumn = useMemo(
+    () => Object.fromEntries(views.map((v) => [v.column, v])),
+    [views]
+  );
+  const { mode: view, value: viewValue } = viewsByColumn[displayKey] || {};
+
   return (
     <>
       {showLegend === "Yes" && (
@@ -438,11 +486,15 @@ const Kanban = ({
                   <KanbanCard
                     key={d.uid}
                     result={d}
+                    view={view}
+                    viewValue={viewValue}
                     // we use $ to prefix these props to avoid collisions with the result object
                     $priority={prioritization[d.uid]}
                     $reprioritize={reprioritizeAndUpdateBlock}
                     $getColumnElement={getColumnElement}
                     $displayKey={displayKey}
+                    $columnKey={columnKey}
+                    $selectionValues={resultKeys.map((rk) => rk.key)}
                   />
                 ))}
               </div>
diff --git a/src/components/ResultsTable.tsx b/src/components/ResultsTable.tsx
index e3477ce5..0db261d4 100644
--- a/src/components/ResultsTable.tsx
+++ b/src/components/ResultsTable.tsx
@@ -164,15 +164,18 @@ const ResultHeader = React.forwardRef<
   }
 );
 
-const CellEmbed = ({ uid }: { uid: string }) => {
+const CellEmbed = ({ uid, viewValue }: { uid: string; viewValue: string }) => {
   const title = getPageTitleByPageUid(uid);
   const contentRef = useRef(null);
+  const open =
+    viewValue === "open" ? true : viewValue === "closed" ? false : null;
   useEffect(() => {
     const el = contentRef.current;
     if (el) {
       window.roamAlphaAPI.ui.components.renderBlock({
         uid,
         el,
+        "open?": open,
       });
     }
   }, [contentRef]);
@@ -335,7 +338,7 @@ const ResultRow = ({
                   {view === "alias" ? viewValue : cell(key)}
                 </a>
               ) : view === "embed" ? (
-                <CellEmbed uid={uid} />
+                <CellEmbed uid={uid} viewValue={viewValue} />
               ) : (
                 cell(key)
               )}
diff --git a/src/components/ResultsView.tsx b/src/components/ResultsView.tsx
index 7d91a359..1311f7e0 100644
--- a/src/components/ResultsView.tsx
+++ b/src/components/ResultsView.tsx
@@ -10,6 +10,7 @@ import {
   Switch,
   Intent,
   Label,
+  HTMLTable,
 } from "@blueprintjs/core";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import { Filters } from "roamjs-components/components/Filter";
@@ -40,9 +41,10 @@ import { render as renderSimpleAlert } from "roamjs-components/components/Simple
 const VIEWS: Record<string, { value: boolean }> = {
   link: { value: false },
   plain: { value: false },
-  embed: { value: false },
+  embed: { value: true },
   alias: { value: true },
 };
+const EMBED_FOLD_VALUES = ["default", "open", "closed"];
 
 type EnglishQueryPart = { text: string; clickId?: string };
 
@@ -343,12 +345,14 @@ const ResultsView: ResultsViewComponent = ({
       );
   };
   const debounceRef = useRef(0);
+  const showColumnViewOptions = views.some(
+    (view) => VIEWS[view.mode]?.value === true
+  );
+
   return (
     <div
       className={`roamjs-query-results-view w-full relative mode-${layout.mode}`}
       ref={containerRef}
-      onMouseOver={() => setShowMenuIcons(true)}
-      onMouseOut={() => setShowMenuIcons(false)}
     >
       {isEditSearchFilter && (
         <div
@@ -395,134 +399,110 @@ const ResultsView: ResultsViewComponent = ({
         results={allProcessedResults}
       />
       <div className="relative">
-        <span
-          className="absolute top-1 right-0 z-10"
-          style={!showMenuIcons && !showInterface ? { display: "none" } : {}}
+        <div
+          className="absolute top-0 right-0 h-20 w-24 z-20"
+          // if this is set to the main div, mouse events on CellEmbed cause re-renders
+          onMouseEnter={() => {
+            if (!showInterface) setShowMenuIcons(true);
+          }}
+          onMouseLeave={() => {
+            if (!showInterface) setShowMenuIcons(false);
+          }}
         >
-          {onRefresh && (
-            <Tooltip content={"Refresh Results"}>
-              <Button icon={"refresh"} minimal onClick={() => onRefresh()} />
-            </Tooltip>
-          )}
-          <Popover
-            placement="left-end"
-            isOpen={moreMenuOpen}
-            target={
-              <Button
-                minimal
-                icon={"more"}
-                className={isMenuIconDirty ? "roamjs-item-dirty" : ""}
-              />
-            }
-            onInteraction={(next, e) => {
-              if (!e) return;
-              const target = e.target as HTMLElement;
-              if (
-                target.classList.contains("bp3-menu-item") ||
-                target.closest(".bp3-menu-item")
-              ) {
-                return;
+          <div
+            style={!showMenuIcons && !showInterface ? { display: "none" } : {}}
+            className="absolute right-0 z-10 p-1"
+          >
+            {onRefresh && (
+              <Tooltip content={"Refresh Results"}>
+                <Button icon={"refresh"} minimal onClick={() => onRefresh()} />
+              </Tooltip>
+            )}
+            <Popover
+              placement="left-end"
+              isOpen={moreMenuOpen}
+              target={
+                <Button
+                  minimal
+                  icon={"more"}
+                  className={isMenuIconDirty ? "roamjs-item-dirty" : ""}
+                />
               }
-              setMoreMenuOpen(next);
-            }}
-            content={
-              isEditRandom ? (
-                <div className="relative w-72 p-4">
-                  <h4 className="font-bold flex justify-between items-center">
-                    Get Random
-                    <Button
-                      icon={"small-cross"}
-                      onClick={() => setIsEditRandom(false)}
-                      minimal
-                      small
-                    />
-                  </h4>
-                  <InputGroup
-                    defaultValue={settings.random.toString()}
-                    onChange={(e) =>
-                      (randomRef.current = Number(e.target.value))
-                    }
-                    rightElement={
-                      <Tooltip content={"Select Random Results"}>
-                        <Button
-                          icon={"random"}
-                          onClick={() => {
-                            setRandom({ count: randomRef.current });
+              onInteraction={(next, e) => {
+                if (!e) return;
+                const target = e.target as HTMLElement;
+                if (
+                  target.classList.contains("bp3-menu-item") ||
+                  target.closest(".bp3-menu-item")
+                ) {
+                  return;
+                }
+                setMoreMenuOpen(next);
+              }}
+              content={
+                isEditRandom ? (
+                  <div className="relative w-72 p-4">
+                    <h4 className="font-bold flex justify-between items-center">
+                      Get Random
+                      <Button
+                        icon={"small-cross"}
+                        onClick={() => setIsEditRandom(false)}
+                        minimal
+                        small
+                      />
+                    </h4>
+                    <InputGroup
+                      defaultValue={settings.random.toString()}
+                      onChange={(e) =>
+                        (randomRef.current = Number(e.target.value))
+                      }
+                      rightElement={
+                        <Tooltip content={"Select Random Results"}>
+                          <Button
+                            icon={"random"}
+                            onClick={() => {
+                              setRandom({ count: randomRef.current });
 
-                            if (preventSavingSettings) return;
-                            const resultNode = getSubTree({
-                              key: "results",
-                              parentUid,
-                            });
-                            setInputSetting({
-                              key: "random",
-                              value: randomRef.current.toString(),
-                              blockUid: resultNode.uid,
-                            });
-                          }}
-                          minimal
-                        />
-                      </Tooltip>
-                    }
-                    type={"number"}
-                    style={{ width: 80 }}
-                  />
-                </div>
-              ) : isEditLayout ? (
-                <div className="relative w-72 p-4">
-                  <h4 className="font-bold flex justify-between items-center">
-                    Layout
-                    <Button
-                      icon={"small-cross"}
-                      onClick={() => setIsEditLayout(false)}
-                      minimal
-                      small
+                              if (preventSavingSettings) return;
+                              const resultNode = getSubTree({
+                                key: "results",
+                                parentUid,
+                              });
+                              setInputSetting({
+                                key: "random",
+                                value: randomRef.current.toString(),
+                                blockUid: resultNode.uid,
+                              });
+                            }}
+                            minimal
+                          />
+                        </Tooltip>
+                      }
+                      type={"number"}
+                      style={{ width: 80 }}
                     />
-                  </h4>
-                  <div className="grid grid-cols-3 gap-4 mb-4">
-                    {SUPPORTED_LAYOUTS.map((l) => (
-                      <div
-                        className={`rounded-sm border p-2 flex flex-col gap-2 items-center justify-center cursor-pointer ${
-                          l.id === layoutMode
-                            ? "border-blue-800 border-opacity-75 text-blue-800"
-                            : "border-gray-800 border-opacity-25 text-gray-800"
-                        }`}
-                        onClick={() => {
-                          setLayout({ ...layout, mode: l.id });
-                          const resultNode = getSubTree({
-                            key: "results",
-                            parentUid,
-                          });
-                          const layoutNode = getSubTree({
-                            key: "layout",
-                            parentUid: resultNode.uid,
-                          });
-                          setInputSetting({
-                            key: "mode",
-                            value: l.id,
-                            blockUid: layoutNode.uid,
-                          });
-                          setIsEditLayout(false);
-                          setMoreMenuOpen(false);
-                        }}
-                      >
-                        <Icon icon={l.icon} />
-                        <span className="capitalize text-sm">{l.id}</span>
-                      </div>
-                    ))}
                   </div>
-                  {settingsById[layoutMode].map((s) => {
-                    const options =
-                      s.options === "columns"
-                        ? columns.map((c) => c.key)
-                        : s.options.slice();
-                    return (
-                      <Label key={s.key}>
-                        {s.label}
-                        <MenuItemSelect
-                          activeItem={head(layout[s.key]) || options[0]}
-                          onItemSelect={(value) => {
-                            setLayout({ ...layout, [s.key]: value });
+                ) : isEditLayout ? (
+                  <div className="relative w-72 p-4">
+                    <h4 className="font-bold flex justify-between items-center">
+                      Layout
+                      <Button
+                        icon={"small-cross"}
+                        onClick={() => setIsEditLayout(false)}
+                        minimal
+                        small
+                      />
+                    </h4>
+                    <div className="grid grid-cols-3 gap-4 mb-4">
+                      {SUPPORTED_LAYOUTS.map((l) => (
+                        <div
+                          className={`rounded-sm border p-2 flex flex-col gap-2 items-center justify-center cursor-pointer ${
+                            l.id === layoutMode
+                              ? "border-blue-800 border-opacity-75 text-blue-800"
+                              : "border-gray-800 border-opacity-25 text-gray-800"
+                          }`}
+                          onClick={() => {
+                            setLayout({ ...layout, mode: l.id });
                             const resultNode = getSubTree({
                               key: "results",
                               parentUid,
@@ -532,328 +512,420 @@ const ResultsView: ResultsViewComponent = ({
                               parentUid: resultNode.uid,
                             });
                             setInputSetting({
-                              key: s.key,
-                              value,
+                              key: "mode",
+                              value: l.id,
                               blockUid: layoutNode.uid,
                             });
+                            setIsEditLayout(false);
+                            setMoreMenuOpen(false);
                           }}
-                          items={options}
-                        />
-                      </Label>
-                    );
-                  })}
-                </div>
-              ) : isEditColumnFilter ? (
-                <div className="relative w-80 p-2">
-                  <h4 className="font-bold flex justify-between items-center p-2">
-                    Set Filters
-                    <Button
-                      icon={"small-cross"}
-                      onClick={() => setIsEditColumnFilter(false)}
-                      minimal
-                      small
-                    />
-                  </h4>
-                  <div className="flex flex-col gap-4 items-start overflow-auto p-2">
-                    {columnFilters.map(({ key, type, value, uid }) => (
-                      <div key={uid}>
-                        <div className="flex items-center justify-between gap-2 mb-2">
-                          <MenuItemSelect
-                            className="roamjs-column-filter-key flex-grow"
-                            items={columns.map((c) => c.key)}
-                            transformItem={(k) =>
-                              k.length > 10 ? `${k.slice(0, 7)}...` : k
-                            }
-                            activeItem={key}
-                            onItemSelect={(newKey) => {
-                              setColumnFilters(
-                                columnFilters.map((f) =>
-                                  f.uid === uid ? { ...f, key: newKey } : f
-                                )
-                              );
-                              updateBlock({ uid, text: newKey });
-                            }}
-                          />
+                        >
+                          <Icon icon={l.icon} />
+                          <span className="capitalize text-sm">{l.id}</span>
+                        </div>
+                      ))}
+                    </div>
+                    {settingsById[layoutMode].map((s) => {
+                      const options =
+                        s.options === "columns"
+                          ? columns.map((c) => c.key)
+                          : s.options.slice();
+                      return (
+                        <Label key={s.key}>
+                          {s.label}
                           <MenuItemSelect
-                            className="roamjs-column-filter-type"
-                            items={SUPPORTED_COLUMN_FILTER_TYPES.map(
-                              (c) => c.id
-                            )}
-                            activeItem={type}
-                            onItemSelect={(newType) => {
-                              setColumnFilters(
-                                columnFilters.map((f) =>
-                                  f.uid === uid ? { ...f, type: newType } : f
-                                )
-                              );
-                              setInputSetting({
-                                blockUid: uid,
-                                key: "type",
-                                value: newType,
+                            activeItem={head(layout[s.key]) || options[0]}
+                            onItemSelect={(value) => {
+                              setLayout({ ...layout, [s.key]: value });
+                              const resultNode = getSubTree({
+                                key: "results",
+                                parentUid,
+                              });
+                              const layoutNode = getSubTree({
+                                key: "layout",
+                                parentUid: resultNode.uid,
                               });
-                            }}
-                          />
-                          <Button
-                            icon={"trash"}
-                            minimal
-                            onClick={() => {
-                              setColumnFilters(
-                                columnFilters.filter((f) => f.uid !== uid)
-                              );
-                              deleteBlock(uid);
-                            }}
-                          />
-                        </div>
-                        <div>
-                          <InputGroup
-                            className="roamjs-column-filter-value"
-                            value={value}
-                            placeholder="Type a value..."
-                            onChange={(e) => {
-                              const newValue = e.target.value;
-                              setColumnFilters(
-                                columnFilters.map((f) =>
-                                  f.uid === uid ? { ...f, value: newValue } : f
-                                )
-                              );
                               setInputSetting({
-                                blockUid: uid,
-                                key: "value",
-                                value: newValue,
+                                key: s.key,
+                                value,
+                                blockUid: layoutNode.uid,
                               });
                             }}
+                            items={options}
                           />
+                        </Label>
+                      );
+                    })}
+                  </div>
+                ) : isEditColumnFilter ? (
+                  <div className="relative w-80 p-2">
+                    <h4 className="font-bold flex justify-between items-center p-2">
+                      Set Filters
+                      <Button
+                        icon={"small-cross"}
+                        onClick={() => setIsEditColumnFilter(false)}
+                        minimal
+                        small
+                      />
+                    </h4>
+                    <div className="flex flex-col gap-4 items-start overflow-auto p-2">
+                      {columnFilters.map(({ key, type, value, uid }) => (
+                        <div key={uid}>
+                          <div className="flex items-center justify-between gap-2 mb-2">
+                            <MenuItemSelect
+                              className="roamjs-column-filter-key flex-grow"
+                              items={columns.map((c) => c.key)}
+                              transformItem={(k) =>
+                                k.length > 10 ? `${k.slice(0, 7)}...` : k
+                              }
+                              activeItem={key}
+                              onItemSelect={(newKey) => {
+                                setColumnFilters(
+                                  columnFilters.map((f) =>
+                                    f.uid === uid ? { ...f, key: newKey } : f
+                                  )
+                                );
+                                updateBlock({ uid, text: newKey });
+                              }}
+                            />
+                            <MenuItemSelect
+                              className="roamjs-column-filter-type"
+                              items={SUPPORTED_COLUMN_FILTER_TYPES.map(
+                                (c) => c.id
+                              )}
+                              activeItem={type}
+                              onItemSelect={(newType) => {
+                                setColumnFilters(
+                                  columnFilters.map((f) =>
+                                    f.uid === uid ? { ...f, type: newType } : f
+                                  )
+                                );
+                                setInputSetting({
+                                  blockUid: uid,
+                                  key: "type",
+                                  value: newType,
+                                });
+                              }}
+                            />
+                            <Button
+                              icon={"trash"}
+                              minimal
+                              onClick={() => {
+                                setColumnFilters(
+                                  columnFilters.filter((f) => f.uid !== uid)
+                                );
+                                deleteBlock(uid);
+                              }}
+                            />
+                          </div>
+                          <div>
+                            <InputGroup
+                              className="roamjs-column-filter-value"
+                              value={value}
+                              placeholder="Type a value..."
+                              onChange={(e) => {
+                                const newValue = e.target.value;
+                                setColumnFilters(
+                                  columnFilters.map((f) =>
+                                    f.uid === uid
+                                      ? { ...f, value: newValue }
+                                      : f
+                                  )
+                                );
+                                setInputSetting({
+                                  blockUid: uid,
+                                  key: "value",
+                                  value: newValue,
+                                });
+                              }}
+                            />
+                          </div>
                         </div>
-                      </div>
-                    ))}
-                    <Button
-                      text={"Add Filter"}
-                      intent="primary"
+                      ))}
+                      <Button
+                        text={"Add Filter"}
+                        intent="primary"
+                        onClick={() => {
+                          const newFilter = {
+                            key: columns[0].key,
+                            type: SUPPORTED_COLUMN_FILTER_TYPES[0].id,
+                            value: "",
+                            uid: window.roamAlphaAPI.util.generateUID(),
+                          };
+                          setColumnFilters([...columnFilters, newFilter]);
+                          const columnFiltersNode = getSubTree({
+                            key: "columnFilters",
+                            parentUid: settings.resultNodeUid,
+                          });
+                          createBlock({
+                            parentUid: columnFiltersNode.uid,
+                            order: Number.MAX_VALUE,
+                            node: {
+                              text: newFilter.key,
+                              uid: newFilter.uid,
+                              children: [
+                                {
+                                  text: "type",
+                                  children: [{ text: newFilter.type }],
+                                },
+                                {
+                                  text: "value",
+                                  children: [{ text: newFilter.value }],
+                                },
+                              ],
+                            },
+                          });
+                        }}
+                        rightIcon={"plus"}
+                      />
+                    </div>
+                  </div>
+                ) : isEditViews ? (
+                  <div
+                    className="relative max-w-md p-4 roamjs-query-column-views"
+                    style={{ minWidth: "26rem" }}
+                  >
+                    <h4 className="font-bold flex justify-between items-center">
+                      Set Column Views
+                      <Button
+                        icon={"small-cross"}
+                        onClick={() => setIsEditViews(false)}
+                        minimal
+                        small
+                      />
+                    </h4>
+                    <HTMLTable className="min-w-full">
+                      <thead className="bg-gray-50">
+                        <tr>
+                          <th className="text-xs font-medium !text-gray-500 uppercase tracking-wider">
+                            Column
+                          </th>
+                          <th className="text-xs font-medium !text-gray-500 uppercase tracking-wider">
+                            View
+                          </th>
+                          {showColumnViewOptions && (
+                            <th className="text-xs font-medium !text-gray-500 uppercase tracking-wider">
+                              Options
+                            </th>
+                          )}
+                        </tr>
+                      </thead>
+                      <tbody className="bg-white divide-y divide-gray-200">
+                        {views.map(({ column, mode, value }, i) => (
+                          <tr key={i}>
+                            <td className="whitespace-nowrap">{column}</td>
+                            <td className="whitespace-nowrap">
+                              <MenuItemSelect
+                                className="roamjs-view-select"
+                                items={Object.keys(VIEWS)}
+                                activeItem={mode}
+                                onItemSelect={(m) =>
+                                  onViewChange({ mode: m, column, value }, i)
+                                }
+                              />
+                            </td>
+                            {showColumnViewOptions && (
+                              <td className="whitespace-nowrap">
+                                {mode === "alias" && (
+                                  <InputGroup
+                                    value={value}
+                                    onChange={(e) =>
+                                      onViewChange(
+                                        {
+                                          mode,
+                                          column,
+                                          value: e.target.value,
+                                        },
+                                        i
+                                      )
+                                    }
+                                  />
+                                )}
+                                {mode === "embed" && (
+                                  <div className="flex items-center">
+                                    <MenuItemSelect
+                                      className="roamjs-view-select"
+                                      items={EMBED_FOLD_VALUES}
+                                      activeItem={
+                                        !!value ? value : EMBED_FOLD_VALUES[0]
+                                      }
+                                      onItemSelect={(value) => {
+                                        onViewChange(
+                                          { mode, column, value },
+                                          i
+                                        );
+                                      }}
+                                    />
+                                    <Tooltip content="Initial folded state">
+                                      <Icon
+                                        icon="info-sign"
+                                        iconSize={12}
+                                        className="opacity-80 ml-2 align-middle"
+                                      />
+                                    </Tooltip>
+                                  </div>
+                                )}
+                              </td>
+                            )}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </HTMLTable>
+                  </div>
+                ) : (
+                  <Menu>
+                    {onEdit && (
+                      <MenuItem
+                        icon={"annotation"}
+                        text={"Edit Query"}
+                        onClick={() => {
+                          setMoreMenuOpen(false);
+                          onEdit();
+                        }}
+                      />
+                    )}
+                    <MenuItem
+                      icon={"layout"}
+                      text={"Layout"}
                       onClick={() => {
-                        const newFilter = {
-                          key: columns[0].key,
-                          type: SUPPORTED_COLUMN_FILTER_TYPES[0].id,
-                          value: "",
-                          uid: window.roamAlphaAPI.util.generateUID(),
-                        };
-                        setColumnFilters([...columnFilters, newFilter]);
-                        const columnFiltersNode = getSubTree({
-                          key: "columnFilters",
-                          parentUid: settings.resultNodeUid,
-                        });
-                        createBlock({
-                          parentUid: columnFiltersNode.uid,
-                          order: Number.MAX_VALUE,
-                          node: {
-                            text: newFilter.key,
-                            uid: newFilter.uid,
-                            children: [
-                              {
-                                text: "type",
-                                children: [{ text: newFilter.type }],
-                              },
-                              {
-                                text: "value",
-                                children: [{ text: newFilter.value }],
-                              },
-                            ],
-                          },
-                        });
+                        setIsEditLayout(true);
                       }}
-                      rightIcon={"plus"}
                     />
-                  </div>
-                </div>
-              ) : isEditViews ? (
-                <div className="relative w-72 p-4">
-                  <h4 className="font-bold flex justify-between items-center">
-                    Set Column Views
-                    <Button
-                      icon={"small-cross"}
-                      onClick={() => setIsEditViews(false)}
-                      minimal
-                      small
+                    <MenuItem
+                      icon={"filter"}
+                      text={"Filters"}
+                      className={
+                        columnFilters.length ? "roamjs-item-dirty" : ""
+                      }
+                      onClick={() => {
+                        setIsEditColumnFilter(true);
+                      }}
                     />
-                  </h4>
-                  <div className="flex flex-col gap-1">
-                    {views.map(({ column, mode, value }, i) => (
-                      <React.Fragment key={i}>
-                        <div className="flex items-center justify-between gap-2">
-                          <span style={{ flex: 1 }}>{column}</span>
-                          <MenuItemSelect
-                            className="roamjs-view-select"
-                            items={Object.keys(VIEWS)}
-                            activeItem={mode}
-                            onItemSelect={(m) => {
-                              onViewChange({ mode: m, column, value }, i);
-                            }}
-                          />
-                        </div>
-                        {VIEWS[mode]?.value && (
-                          <InputGroup
-                            value={value}
-                            onChange={(e) => {
-                              onViewChange(
-                                { mode, column, value: e.target.value },
-                                i
-                              );
-                            }}
-                          />
-                        )}
-                      </React.Fragment>
-                    ))}
-                  </div>
-                </div>
-              ) : (
-                <Menu>
-                  {onEdit && (
                     <MenuItem
-                      icon={"annotation"}
-                      text={"Edit Query"}
+                      icon={"search"}
+                      text={isEditSearchFilter ? "Hide Search" : "Search"}
+                      className={searchFilter ? "roamjs-item-dirty" : ""}
                       onClick={() => {
                         setMoreMenuOpen(false);
-                        onEdit();
+                        setIsEditSearchFilter((prevState) => !prevState);
                       }}
                     />
-                  )}
-                  <MenuItem
-                    icon={"layout"}
-                    text={"Layout"}
-                    onClick={() => {
-                      setIsEditLayout(true);
-                    }}
-                  />
-                  <MenuItem
-                    icon={"filter"}
-                    text={"Filters"}
-                    className={columnFilters.length ? "roamjs-item-dirty" : ""}
-                    onClick={() => {
-                      setIsEditColumnFilter(true);
-                    }}
-                  />
-                  <MenuItem
-                    icon={"search"}
-                    text={isEditSearchFilter ? "Hide Search" : "Search"}
-                    className={searchFilter ? "roamjs-item-dirty" : ""}
-                    onClick={() => {
-                      setMoreMenuOpen(false);
-                      setIsEditSearchFilter((prevState) => !prevState);
-                    }}
-                  />
-                  <MenuItem
-                    icon={"eye-open"}
-                    text={"Column Views"}
-                    onClick={() => {
-                      setIsEditViews(true);
-                    }}
-                  />
-                  <MenuItem
-                    icon={showInterface ? "th-disconnect" : "th"}
-                    text={showInterface ? "Hide Interface" : "Show Interface"}
-                    onClick={() => {
-                      const resultNode = getSubTree({
-                        key: "results",
-                        parentUid,
-                      });
-                      setInputSetting({
-                        key: "interface",
-                        value: showInterface ? "hide" : "show",
-                        blockUid: resultNode.uid,
-                      });
-                      setShowInterface((s) => !s);
-                      setMoreMenuOpen(false);
-                    }}
-                  />
-                  <MenuItem
-                    icon={"export"}
-                    text={"Share Data"}
-                    onClick={async () => {
-                      if (!results.length) {
-                        onRefresh();
-                      }
-                      setMoreMenuOpen(false);
-                      setIsExportOpen(true);
-                    }}
-                  />
-                  <MenuItem
-                    icon={"random"}
-                    text={"Get Random"}
-                    onClick={() => setIsEditRandom(true)}
-                  />
-                  {isEditBlock && (
                     <MenuItem
-                      icon={"edit"}
-                      text={"Edit Block"}
+                      icon={"eye-open"}
+                      text={"Column Views"}
                       onClick={() => {
-                        const location = getUids(
-                          containerRef.current?.closest(
-                            ".roam-block"
-                          ) as HTMLDivElement
-                        );
-                        window.roamAlphaAPI.ui.setBlockFocusAndSelection({
-                          location: {
-                            "window-id": location.windowId,
-                            "block-uid": location.blockUid,
-                          },
+                        setIsEditViews(true);
+                      }}
+                    />
+                    <MenuItem
+                      icon={showInterface ? "th-disconnect" : "th"}
+                      text={showInterface ? "Hide Interface" : "Show Interface"}
+                      onClick={() => {
+                        const resultNode = getSubTree({
+                          key: "results",
+                          parentUid,
                         });
+                        setInputSetting({
+                          key: "interface",
+                          value: showInterface ? "hide" : "show",
+                          blockUid: resultNode.uid,
+                        });
+                        setShowInterface((s) => !s);
+                        setMoreMenuOpen(false);
                       }}
                     />
-                  )}
-                  {onDeleteQuery && (
-                    <>
+                    <MenuItem
+                      icon={"export"}
+                      text={"Share Data"}
+                      onClick={async () => {
+                        if (!results.length) {
+                          onRefresh();
+                        }
+                        setMoreMenuOpen(false);
+                        setIsExportOpen(true);
+                      }}
+                    />
+                    <MenuItem
+                      icon={"random"}
+                      text={"Get Random"}
+                      onClick={() => setIsEditRandom(true)}
+                    />
+                    {isEditBlock && (
                       <MenuItem
-                        icon={"trash"}
-                        text={"Delete Query"}
+                        icon={"edit"}
+                        text={"Edit Block"}
                         onClick={() => {
-                          renderSimpleAlert({
-                            content:
-                              "Are you sure you want to delete this query?",
-                            onConfirm: onDeleteQuery,
-                            onCancel: true,
+                          const location = getUids(
+                            containerRef.current?.closest(
+                              ".roam-block"
+                            ) as HTMLDivElement
+                          );
+                          window.roamAlphaAPI.ui.setBlockFocusAndSelection({
+                            location: {
+                              "window-id": location.windowId,
+                              "block-uid": location.blockUid,
+                            },
                           });
                         }}
                       />
-                    </>
-                  )}
-                  <MenuItem
-                    icon={"clipboard"}
-                    text={"Copy Query"}
-                    onClick={() => {
-                      const getTextFromTreeToPaste = (
-                        items: RoamBasicNode[],
-                        indentLevel = 0
-                      ): string => {
-                        const indentation = "    ".repeat(indentLevel);
+                    )}
+                    {onDeleteQuery && (
+                      <>
+                        <MenuItem
+                          icon={"trash"}
+                          text={"Delete Query"}
+                          onClick={() => {
+                            renderSimpleAlert({
+                              content:
+                                "Are you sure you want to delete this query?",
+                              onConfirm: onDeleteQuery,
+                              onCancel: true,
+                            });
+                          }}
+                        />
+                      </>
+                    )}
+                    <MenuItem
+                      icon={"clipboard"}
+                      text={"Copy Query"}
+                      onClick={() => {
+                        const getTextFromTreeToPaste = (
+                          items: RoamBasicNode[],
+                          indentLevel = 0
+                        ): string => {
+                          const indentation = "    ".repeat(indentLevel);
 
-                        return items
-                          .map((item) => {
-                            const childrenText =
-                              item.children.length > 0
-                                ? getTextFromTreeToPaste(
-                                    item.children,
-                                    indentLevel + 1
-                                  )
-                                : "";
-                            return `${indentation}- ${item.text}\n${childrenText}`;
-                          })
-                          .join("");
-                      };
-                      const tree = getBasicTreeByParentUid(parentUid);
-                      navigator.clipboard.writeText(
-                        "- {{query block}}\n" + getTextFromTreeToPaste(tree, 1)
-                      );
-                      renderToast({
-                        id: "query-copy",
-                        content: "Copied Query",
-                        intent: Intent.PRIMARY,
-                      });
-                    }}
-                  />
-                </Menu>
-              )
-            }
-          />
-        </span>
+                          return items
+                            .map((item) => {
+                              const childrenText =
+                                item.children.length > 0
+                                  ? getTextFromTreeToPaste(
+                                      item.children,
+                                      indentLevel + 1
+                                    )
+                                  : "";
+                              return `${indentation}- ${item.text}\n${childrenText}`;
+                            })
+                            .join("");
+                        };
+                        const tree = getBasicTreeByParentUid(parentUid);
+                        navigator.clipboard.writeText(
+                          "- {{query block}}\n" +
+                            getTextFromTreeToPaste(tree, 1)
+                        );
+                        renderToast({
+                          id: "query-copy",
+                          content: "Copied Query",
+                          intent: Intent.PRIMARY,
+                        });
+                      }}
+                    />
+                  </Menu>
+                )
+              }
+            />
+          </div>
+        </div>
         {header && (
           <h4
             style={{
@@ -911,6 +983,7 @@ const ResultsView: ResultsViewComponent = ({
                   onQuery={() => onRefresh(true)}
                   resultKeys={columns}
                   parentUid={parentUid}
+                  views={views}
                 />
               ) : (
                 <div style={{ padding: "16px 8px" }}>
diff --git a/src/index.ts b/src/index.ts
index 306d599a..526cc0a5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -153,7 +153,7 @@ svg.rs-svg-container {
 }
 
 .roamjs-kanban-container div.react-draggable-dragging.roamjs-kanban-card > div {
-  transform: rotate(20deg);
+  transform: rotate(5deg);
   cursor: grabbing;
   z-index: 1000;
 }
@@ -182,7 +182,14 @@ svg.rs-svg-container {
 .roamjs-export-dialog-body .bp3-tab-list {
   padding: 10px 20px;
   border-bottom: 1px solid rgba(16,22,26,0.15);
-}`);
+}
+.roamjs-query-column-views .bp3-running-text table th,
+.roamjs-query-column-views table.bp3-html-table th, 
+.roamjs-query-column-views .bp3-running-text table td, 
+.roamjs-query-column-views table.bp3-html-table td {
+  vertical-align: initial;
+}
+`);
   const isCanvasPage = (title: string) => {
     const canvasPageFormat =
       (extensionAPI.settings.get("canvas-page-format") as string) ||