diff --git a/app/_components/checkbox.tsx b/app/_components/checkbox.tsx
index cdde5a04..479f8487 100644
--- a/app/_components/checkbox.tsx
+++ b/app/_components/checkbox.tsx
@@ -1,23 +1,37 @@
-import Tip from '@/_components/tip';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { forwardRef, InputHTMLAttributes, ReactNode, Ref } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 interface CheckboxProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
-  label?: string;
-  tooltip?: ReactNode;
+  inputClassName?: string;
+  label?: ReactNode;
+  labelInside?: boolean;
+  right?: ReactNode;
 }
 
 const Checkbox = forwardRef(
   (
-    { className, label, name, tooltip, ...rest }: CheckboxProps,
+    {
+      className,
+      inputClassName,
+      label,
+      labelInside,
+      name,
+      right,
+      ...rest
+    }: CheckboxProps,
     ref: Ref<HTMLInputElement>,
   ) => (
     <div className={twMerge('relative', className)}>
       <label className="group w-full cursor-pointer">
-        {label && <span className="label">{label}</span>}
-        <div className="input group flex items-center justify-between gap-4 pr-2">
+        {label && !labelInside && <span className="label">{label}</span>}
+        <div
+          className={twMerge(
+            'input group flex items-center justify-between gap-4 pr-2',
+            inputClassName,
+          )}
+        >
           <input
             className="peer absolute h-6 w-6 opacity-0"
             id={name}
@@ -26,15 +40,19 @@ const Checkbox = forwardRef(
             type="checkbox"
             {...rest}
           />
-          <span className="text-fg-4 transition-colors after:content-['No'] peer-checked:text-fg-2 peer-checked:after:content-['Yes']" />
-          <CheckIcon className="h-5 w-5 stroke-fg-2 opacity-0 transition-opacity peer-checked:opacity-100" />
+          <div
+            className={twMerge(
+              'text-fg-4 transition-colors peer-checked:text-fg-2',
+              (!label || !labelInside) &&
+                'after:content-["No"] peer-checked:after:content-["Yes"]',
+            )}
+          >
+            {label && labelInside && label}
+          </div>
+          <CheckIcon className="h-5 w-5 shrink-0 stroke-fg-2 opacity-0 transition-opacity peer-checked:opacity-100" />
         </div>
       </label>
-      {tooltip && (
-        <Tip className="absolute right-[0.55rem] top-px" side="left">
-          {tooltip}
-        </Tip>
-      )}
+      {right && <div className="absolute right-[0.55rem] top-px">{right}</div>}
     </div>
   ),
 );
diff --git a/app/_components/dropdown-menu.tsx b/app/_components/dropdown-menu.tsx
index 1bca0d0a..755981f3 100644
--- a/app/_components/dropdown-menu.tsx
+++ b/app/_components/dropdown-menu.tsx
@@ -24,9 +24,9 @@ const Content = React.forwardRef<
   <DropdownMenuPrimitive.Content
     align="end"
     ref={ref}
-    sideOffset={7}
+    sideOffset={0}
     className={twMerge(
-      'z-10 w-60 overflow-hidden rounded border border-alpha-2 bg-bg-3 py-1 drop-shadow',
+      'z-10 my-1.5 w-60 overflow-hidden rounded border border-alpha-2 bg-bg-3 py-1 drop-shadow',
       className,
     )}
     {...props}
diff --git a/app/_components/event-comment.tsx b/app/_components/event-comment.tsx
index 83d4bc79..f7b30f6a 100644
--- a/app/_components/event-comment.tsx
+++ b/app/_components/event-comment.tsx
@@ -58,7 +58,7 @@ const EventComment = ({
                 </div>
               </DropdownMenu.Trigger>
               <DropdownMenu.Portal>
-                <DropdownMenu.Content className="mx-2" sideOffset={4}>
+                <DropdownMenu.Content>
                   <DropdownMenuDeleteItem
                     confirmText="Delete comment"
                     onConfirm={() => deleteComment(id)}
diff --git a/app/_components/event-form.tsx b/app/_components/event-form.tsx
index 3fc8fe02..ce764a28 100644
--- a/app/_components/event-form.tsx
+++ b/app/_components/event-form.tsx
@@ -196,7 +196,7 @@ const EventForm = ({
                     name={`inputs.${i}.0`}
                     render={({ field }) => (
                       <Select
-                        className="rounded-r-none border-r-0"
+                        controlClassName="rounded-r-none border-r-0"
                         inputType="number"
                         name={field.name}
                         onBlur={field.onBlur}
@@ -215,7 +215,7 @@ const EventForm = ({
                     name={`inputs.${i}.1`}
                     render={({ field }) => (
                       <Select
-                        className="rounded-none"
+                        controlClassName="rounded-none"
                         inputType="number"
                         name={field.name}
                         onBlur={field.onBlur}
@@ -234,7 +234,7 @@ const EventForm = ({
                     name={`inputs.${i}.2`}
                     render={({ field }) => (
                       <Select
-                        className="rounded-l-none border-l-0"
+                        controlClassName="rounded-l-none border-l-0"
                         inputType="number"
                         name={field.name}
                         onBlur={field.onBlur}
diff --git a/app/_components/event-menu.tsx b/app/_components/event-menu.tsx
index ec3b4d90..aedae094 100644
--- a/app/_components/event-menu.tsx
+++ b/app/_components/event-menu.tsx
@@ -36,7 +36,7 @@ const EventMenu = ({ className, eventId, isModal }: EventMenuProps) => {
         )}
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content className="mx-2" sideOffset={0}>
+        <DropdownMenu.Content>
           <DropdownMenuDeleteItem
             confirmText="Delete event"
             onConfirm={async () => {
diff --git a/app/_components/event-type-menu.tsx b/app/_components/event-type-menu.tsx
index b86e0234..4bcf2455 100644
--- a/app/_components/event-type-menu.tsx
+++ b/app/_components/event-type-menu.tsx
@@ -36,7 +36,7 @@ const EventTypeMenu = ({
         )}
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content className="mx-2" sideOffset={-2}>
+        <DropdownMenu.Content className="mr-1.5">
           <DropdownMenu.Button
             href={`/subjects/${subjectId}/event-types/${eventTypeId}/edit`}
             scroll={false}
diff --git a/app/_components/event-type-use-template-modal.tsx b/app/_components/event-type-use-template-modal.tsx
index 57328388..f2d09302 100644
--- a/app/_components/event-type-use-template-modal.tsx
+++ b/app/_components/event-type-use-template-modal.tsx
@@ -48,56 +48,54 @@ const EventTypeUseTemplateModal = <T extends Form.FieldValues>({
               Selecting a template will overwrite any existing event type
               values.
             </Modal.Description>
-            <div className="pt-16 text-left">
-              <Select
-                isLoading={isTransitioning}
-                noOptionsMessage={() => 'No templates.'}
-                onChange={(t) =>
-                  startTransition(async () => {
-                    const template = t as NonNullable<
-                      ListTemplatesBySubjectIdAndTypeData | ListTemplatesData
-                    >[0];
+            <Select
+              controlClassName="pt-16 text-left"
+              isLoading={isTransitioning}
+              noOptionsMessage={() => 'No templates.'}
+              onChange={(t) =>
+                startTransition(async () => {
+                  const template = t as NonNullable<
+                    ListTemplatesBySubjectIdAndTypeData | ListTemplatesData
+                  >[0];
 
-                    const { data: templateData } = await getTemplateData(
-                      template.id,
-                    );
+                  const { data: templateData } = await getTemplateData(
+                    template.id,
+                  );
 
-                    const data =
-                      templateData?.data as EventTypeTemplateDataJson;
+                  const data = templateData?.data as EventTypeTemplateDataJson;
 
-                    const inputs = availableInputs.filter(({ id }) =>
-                      forceArray(data?.inputIds).includes(id),
-                    );
+                  const inputs = availableInputs.filter(({ id }) =>
+                    forceArray(data?.inputIds).includes(id),
+                  );
 
-                    form.setValue(
-                      'name' as Form.FieldPath<T>,
-                      template.name as Form.PathValue<T, Form.FieldPath<T>>,
-                      { shouldDirty: true },
-                    );
+                  form.setValue(
+                    'name' as Form.FieldPath<T>,
+                    template.name as Form.PathValue<T, Form.FieldPath<T>>,
+                    { shouldDirty: true },
+                  );
 
-                    form.setValue(
-                      'content' as Form.FieldPath<T>,
-                      (data?.content ?? '') as Form.PathValue<
-                        T,
-                        Form.FieldPath<T>
-                      >,
-                      { shouldDirty: true },
-                    );
+                  form.setValue(
+                    'content' as Form.FieldPath<T>,
+                    (data?.content ?? '') as Form.PathValue<
+                      T,
+                      Form.FieldPath<T>
+                    >,
+                    { shouldDirty: true },
+                  );
 
-                    form.setValue(
-                      'inputs' as Form.FieldPath<T>,
-                      inputs as Form.PathValue<T, Form.FieldPath<T>>,
-                      { shouldDirty: true },
-                    );
+                  form.setValue(
+                    'inputs' as Form.FieldPath<T>,
+                    inputs as Form.PathValue<T, Form.FieldPath<T>>,
+                    { shouldDirty: true },
+                  );
 
-                    toggleOpen();
-                  })
-                }
-                options={availableEventTypeTemplates as IOption[]}
-                placeholder="Select a template…"
-                value={null}
-              />
-            </div>
+                  toggleOpen();
+                })
+              }
+              options={availableEventTypeTemplates as IOption[]}
+              placeholder="Select a template…"
+              value={null}
+            />
             <Modal.Close asChild onClick={(e) => e.preventDefault()}>
               <Button
                 className="-mb-3 mt-14 w-full justify-center p-0 py-3"
diff --git a/app/_components/input-form.tsx b/app/_components/input-form.tsx
index 84e7942a..73139fd7 100644
--- a/app/_components/input-form.tsx
+++ b/app/_components/input-form.tsx
@@ -6,6 +6,7 @@ import IconButton from '@/_components/icon-button';
 import Input from '@/_components/input';
 import PageModalBackButton from '@/_components/page-modal-back-button';
 import Select, { IOption } from '@/_components/select';
+import Tip from '@/_components/tip';
 import UnsavedChangesBanner from '@/_components/unsaved-changes-banner';
 import INPUT_TYPE_LABELS from '@/_constants/constant-input-type-labels';
 import InputType from '@/_constants/enum-input-type';
@@ -264,11 +265,11 @@ const InputForm = ({
           </fieldset>
           <Checkbox
             label="Allow options to be created"
-            tooltip={
-              <>
+            right={
+              <Tip side="left">
                 Enable this when you don&rsquo;t know all possible options in
                 advance.
-              </>
+              </Tip>
             }
             {...form.register('settings.isCreatable')}
           />
diff --git a/app/_components/input-menu.tsx b/app/_components/input-menu.tsx
index 917c5f7e..b26ad4ac 100644
--- a/app/_components/input-menu.tsx
+++ b/app/_components/input-menu.tsx
@@ -20,7 +20,7 @@ const InputMenu = ({ inputId }: InputMenuProps) => (
       </div>
     </DropdownMenu.Trigger>
     <DropdownMenu.Portal>
-      <DropdownMenu.Content className="mx-2" sideOffset={-2}>
+      <DropdownMenu.Content className="mr-1.5">
         <DropdownMenu.Button
           href={`/inputs/create/from-input/${inputId}`}
           scroll={false}
diff --git a/app/_components/input.tsx b/app/_components/input.tsx
index cfd46717..161da49e 100644
--- a/app/_components/input.tsx
+++ b/app/_components/input.tsx
@@ -4,6 +4,7 @@ import { useFormStatus } from 'react-dom';
 import { twMerge } from 'tailwind-merge';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  inputClassName?: string;
   label?: ReactNode;
   tooltip?: ReactNode;
 }
@@ -14,10 +15,11 @@ const Input = forwardRef(
       className,
       disabled,
       id,
+      inputClassName,
       label,
-      type,
       name,
       tooltip,
+      type,
       ...rest
     }: InputProps,
     ref: Ref<HTMLInputElement>,
@@ -25,7 +27,7 @@ const Input = forwardRef(
     const { pending } = useFormStatus();
 
     return (
-      <div className="group relative w-full">
+      <div className={twMerge('group relative w-full', className)}>
         <div className="flex justify-between">
           {label && (
             <label className="label" htmlFor={id ?? name}>
@@ -40,7 +42,7 @@ const Input = forwardRef(
         </div>
         <input
           autoComplete="off"
-          className={twMerge('input', className)}
+          className={twMerge('input', inputClassName)}
           disabled={disabled || pending}
           id={id ?? name}
           name={name}
diff --git a/app/_components/insight-form.tsx b/app/_components/insight-form.tsx
index d45a3507..da746df7 100644
--- a/app/_components/insight-form.tsx
+++ b/app/_components/insight-form.tsx
@@ -2,10 +2,11 @@
 
 import Button from '@/_components/button';
 import Checkbox from '@/_components/checkbox';
+import IconButton from '@/_components/icon-button';
 import Input from '@/_components/input';
-import InsightSettingsSection from '@/_components/insight-settings-section';
 import PageModalBackButton from '@/_components/page-modal-back-button';
 import PlotFigure from '@/_components/plot-figure';
+import * as Popover from '@/_components/popover';
 import Select, { IOption } from '@/_components/select';
 import UnsavedChangesBanner from '@/_components/unsaved-changes-banner';
 import BarInterval from '@/_constants/enum-bar-interval';
@@ -21,6 +22,10 @@ import { InsightConfigJson } from '@/_types/insight-config-json';
 import getFormCacheKey from '@/_utilities/get-form-cache-key';
 import getInputDetailsFromEvents from '@/_utilities/get-input-details-from-events';
 import getInsightOptionsFromEvents from '@/_utilities/get-insight-options-from-events';
+import { ArrowsPointingInIcon } from '@heroicons/react/24/outline';
+import AdjustmentsHorizontalIcon from '@heroicons/react/24/outline/AdjustmentsHorizontalIcon';
+import FunnelIcon from '@heroicons/react/24/outline/FunnelIcon';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import { useRouter } from 'next/navigation';
 import { useTransition } from 'react';
 import { Controller } from 'react-hook-form';
@@ -51,7 +56,6 @@ const BAR_INTERVAL_OPTIONS = [
 ];
 
 const BAR_REDUCER_OPTIONS = [
-  { id: BarReducer.Count, isDisabled: false, label: 'Count' },
   { id: BarReducer.Mean, isDisabled: false, label: 'Average' },
   { id: BarReducer.Sum, isDisabled: false, label: 'Sum' },
   { id: BarReducer.Min, isDisabled: false, label: 'Min' },
@@ -100,9 +104,7 @@ const InsightForm = ({ events, insight, subjectId }: InsightFormProps) => {
 
   const inputId = form.watch('input');
   const showBars = form.watch('showBars');
-  const showDots = form.watch('showDots');
   const showLine = form.watch('showLine');
-  const showLinearRegression = form.watch('showLinearRegression');
 
   const { isInputNominal } = getInputDetailsFromEvents({ events, inputId });
 
@@ -118,40 +120,9 @@ const InsightForm = ({ events, insight, subjectId }: InsightFormProps) => {
     { label: 'Training plans', options: trainingPlanOptions },
   ];
 
-  const onMarkOrInputChange = ({
-    inputId,
-    showBars,
-    showDots,
-    showLine,
-    showLinearRegression,
-  }: {
-    inputId: string;
-    showBars?: boolean;
-    showDots?: boolean;
-    showLine?: boolean;
-    showLinearRegression?: boolean;
-  }) => {
-    const { isInputNominal } = getInputDetailsFromEvents({ events, inputId });
-
-    if (isInputNominal) {
-      if (showDots || showLine || showLinearRegression) {
-        form.setValue('showBars', false);
-      } else if (showBars) {
-        form.setValue('barReducer', BarReducer.Count);
-        form.setValue('showDots', false);
-        form.setValue('showLine', false);
-        form.setValue('showLinearRegression', false);
-      }
-    } else {
-      if (showBars) {
-        form.setValue('barReducer', BarReducer.Mean);
-      }
-    }
-  };
-
   return (
     <form
-      className="flex flex-col gap-8 px-4 pb-8 pt-6 sm:px-8"
+      className="flex flex-col gap-8 px-4 py-8 sm:px-8"
       onSubmit={form.handleSubmit((values) =>
         startTransition(async () => {
           const res = await upsertInsight(
@@ -168,46 +139,46 @@ const InsightForm = ({ events, insight, subjectId }: InsightFormProps) => {
         }),
       )}
     >
-      <div className="grid gap-6 md:grid-cols-3 md:gap-4">
+      <div className="grid gap-4 md:grid-cols-3">
         <Input
-          label="Name"
+          placeholder="Name"
           maxLength={49}
           required
           {...form.register('name')}
         />
-        <div className="md:col-span-2">
-          <Controller
-            control={form.control}
-            name="input"
-            render={({ field }) => (
-              <Select
-                isClearable={false}
-                label="Input"
-                name={field.name}
-                noOptionsMessage={() => 'No inputs have been recorded.'}
-                onBlur={field.onBlur}
-                onChange={(value) => {
-                  const inputId = (value as IOption).id;
-                  field.onChange(inputId);
-                  form.setValue('includeEventsFrom', null);
-                  form.setValue('includeEventsSince', null);
-                  form.setValue('inputOptions', []);
+        <Controller
+          control={form.control}
+          name="input"
+          render={({ field }) => (
+            <Select
+              className="md:col-span-2"
+              isClearable={false}
+              name={field.name}
+              noOptionsMessage={() => 'No inputs have been recorded.'}
+              onBlur={field.onBlur}
+              onChange={(value) => {
+                const inputId = (value as IOption).id;
+                field.onChange(inputId);
+                form.setValue('includeEventsFrom', null);
+                form.setValue('includeEventsSince', null);
+                form.setValue('inputOptions', []);
 
-                  onMarkOrInputChange({
-                    inputId,
-                    showBars,
-                    showDots,
-                    showLine,
-                    showLinearRegression,
-                  });
-                }}
-                options={inputOptions}
-                placeholder="Select an input…"
-                value={inputOptions.find((o) => field.value === o.id)}
-              />
-            )}
-          />
-        </div>
+                const { isInputNominal } = getInputDetailsFromEvents({
+                  events,
+                  inputId,
+                });
+
+                form.setValue(
+                  'barReducer',
+                  isInputNominal ? BarReducer.Count : BarReducer.Mean,
+                );
+              }}
+              options={inputOptions}
+              placeholder="Select an input…"
+              value={inputOptions.find((o) => field.value === o.id)}
+            />
+          )}
+        />
       </div>
       <div className="rounded border border-alpha-1 bg-bg-3 drop-shadow-2xl">
         <PlotFigure
@@ -233,227 +204,293 @@ const InsightForm = ({ events, insight, subjectId }: InsightFormProps) => {
           type={form.watch('type')}
         />
       </div>
-      <InsightSettingsSection title="Marks">
-        <div className="grid grid-cols-2 gap-4 pt-6 md:grid-cols-4">
-          <Checkbox
-            label="Dots"
-            {...form.register('showDots', {
-              onChange: (e) =>
-                onMarkOrInputChange({ inputId, showDots: e.target.checked }),
-            })}
-          />
+      <div className="flex flex-col gap-4 md:flex-row">
+        <Checkbox
+          className="w-full"
+          label="Dots"
+          labelInside
+          {...form.register('showDots')}
+        />
+        <div className="flex w-full">
           <Checkbox
+            className="w-full"
+            inputClassName="rounded-r-none"
             label="Line"
-            {...form.register('showLine', {
-              onChange: (e) =>
-                onMarkOrInputChange({ inputId, showLine: e.target.checked }),
-            })}
+            labelInside
+            {...form.register('showLine')}
           />
+          <Popover.Root>
+            <Popover.Trigger asChild>
+              <IconButton
+                className="rounded-l-none border-l-0 p-2.5"
+                colorScheme="transparent"
+                icon={<AdjustmentsHorizontalIcon className="w-5" />}
+                label="Line settings"
+                variant="primary"
+              />
+            </Popover.Trigger>
+            <Popover.Content
+              align="end"
+              className="mr-0 w-64 space-y-6 p-8 pt-7"
+              side="top"
+            >
+              <Controller
+                control={form.control}
+                name="lineCurveFunction"
+                render={({ field }) => (
+                  <Select
+                    isClearable={false}
+                    isSearchable={false}
+                    label="Curve function"
+                    name={field.name}
+                    onBlur={field.onBlur}
+                    onChange={(value) => field.onChange((value as IOption)?.id)}
+                    options={LINE_CURVE_FUNCTION_OPTIONS as IOption[]}
+                    value={LINE_CURVE_FUNCTION_OPTIONS.find(
+                      (o) => o.id === field.value,
+                    )}
+                  />
+                )}
+              />
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+        <div className="flex w-full">
           <Checkbox
+            className="w-full"
+            inputClassName="rounded-r-none"
             label="Bars"
-            {...form.register('showBars', {
-              onChange: (e) =>
-                onMarkOrInputChange({ inputId, showBars: e.target.checked }),
-            })}
+            labelInside
+            {...form.register('showBars')}
           />
-          <Checkbox
-            label="Trend"
-            {...form.register('showLinearRegression', {
-              onChange: (e) =>
-                onMarkOrInputChange({
-                  inputId,
-                  showLinearRegression: e.target.checked,
-                }),
-            })}
-          />
-        </div>
-        <div className="grid gap-6 pt-6 md:grid-cols-3 md:gap-4">
-          <Controller
-            control={form.control}
-            name="lineCurveFunction"
-            render={({ field }) => (
-              <Select
-                isDisabled={!showLine}
-                isClearable={false}
-                isSearchable={false}
-                label="Line function"
-                name={field.name}
-                onBlur={field.onBlur}
-                onChange={(value) => field.onChange((value as IOption)?.id)}
-                options={LINE_CURVE_FUNCTION_OPTIONS as IOption[]}
-                value={LINE_CURVE_FUNCTION_OPTIONS.find(
-                  (o) => o.id === field.value,
+          <Popover.Root>
+            <Popover.Trigger asChild>
+              <IconButton
+                className="rounded-l-none border-l-0 p-2.5"
+                colorScheme="transparent"
+                icon={<AdjustmentsHorizontalIcon className="w-5" />}
+                label="Bar settings"
+                variant="primary"
+              />
+            </Popover.Trigger>
+            <Popover.Content
+              align="end"
+              className="mr-0 w-64 space-y-6 p-8 pt-7"
+              side="top"
+            >
+              <Controller
+                control={form.control}
+                name="barInterval"
+                render={({ field }) => (
+                  <Select
+                    isClearable={false}
+                    isSearchable={false}
+                    label="Interval"
+                    name={field.name}
+                    onBlur={field.onBlur}
+                    onChange={(value) => field.onChange((value as IOption)?.id)}
+                    options={BAR_INTERVAL_OPTIONS as IOption[]}
+                    value={BAR_INTERVAL_OPTIONS.find(
+                      (o) => o.id === field.value,
+                    )}
+                  />
                 )}
               />
-            )}
-          />
-          <div className="grid grid-cols-2 gap-4 md:col-span-2">
-            <Controller
-              control={form.control}
-              name="barInterval"
-              render={({ field }) => (
-                <Select
-                  isDisabled={!showBars}
-                  isClearable={false}
-                  isSearchable={false}
-                  label="Bar interval"
-                  name={field.name}
-                  onBlur={field.onBlur}
-                  onChange={(value) => field.onChange((value as IOption)?.id)}
-                  options={BAR_INTERVAL_OPTIONS as IOption[]}
-                  value={BAR_INTERVAL_OPTIONS.find((o) => o.id === field.value)}
-                />
-              )}
-            />
-            <Controller
-              control={form.control}
-              name="barReducer"
-              render={({ field }) => (
-                <Select
-                  isDisabled={!showBars}
-                  isClearable={false}
-                  isSearchable={false}
-                  label="Bar reducer"
-                  name={field.name}
-                  onBlur={field.onBlur}
-                  onChange={(value) => field.onChange((value as IOption)?.id)}
-                  options={BAR_REDUCER_OPTIONS.map((o) => {
-                    o.isDisabled = isInputNominal
-                      ? o.id !== BarReducer.Count
-                      : o.id === BarReducer.Count;
-
-                    return o;
-                  })}
-                  value={BAR_REDUCER_OPTIONS.find((o) => o.id === field.value)}
+              {!isInputNominal && (
+                <Controller
+                  control={form.control}
+                  name="barReducer"
+                  render={({ field }) => (
+                    <Select
+                      isClearable={false}
+                      isSearchable={false}
+                      label="Reducer"
+                      name={field.name}
+                      onBlur={field.onBlur}
+                      onChange={(value) =>
+                        field.onChange((value as IOption)?.id)
+                      }
+                      options={BAR_REDUCER_OPTIONS}
+                      value={BAR_REDUCER_OPTIONS.find(
+                        (o) => o.id === field.value,
+                      )}
+                    />
+                  )}
                 />
               )}
-            />
-          </div>
+            </Popover.Content>
+          </Popover.Root>
         </div>
-      </InsightSettingsSection>
-      <InsightSettingsSection title="Margins">
-        <div className="grid grid-cols-2 gap-6 pt-6 md:grid-cols-4 md:gap-4">
-          <Input
-            label="Top"
-            min={0}
-            type="number"
-            {...form.register('marginTop')}
-          />
-          <Input
-            label="Bottom"
-            min={0}
-            type="number"
-            {...form.register('marginBottom')}
-          />
-          <Input
-            label="Left"
-            min={0}
-            type="number"
-            {...form.register('marginLeft')}
-          />
-          <Input
-            label="Right"
-            min={0}
-            type="number"
-            {...form.register('marginRight')}
-          />
-        </div>
-      </InsightSettingsSection>
-      <InsightSettingsSection title="Filters">
-        <div className="grid gap-6 pt-6 md:grid-cols-2 md:gap-4">
-          <Controller
-            control={form.control}
-            name="includeEventsFrom"
-            render={({ field }) => {
-              let value;
-
-              if (field.value) {
-                for (const group of eventTypeOrTrainingPlanOptions) {
-                  value = group.options.find((o) => o.id === field.value);
-                  if (value) break;
-                }
-              }
+        <div className="flex w-full gap-4 md:w-auto">
+          <Popover.Root>
+            <Popover.Trigger asChild>
+              <IconButton
+                className="w-full shrink p-2.5"
+                colorScheme="transparent"
+                icon={<PlusIcon className="m-0 size-5" />}
+                label="Margins"
+                variant="primary"
+              />
+            </Popover.Trigger>
+            <Popover.Content
+              align="end"
+              className="mr-0 w-96 space-y-4 p-8 pt-7"
+              side="top"
+            >
+              <Checkbox
+                label="Linear regression"
+                {...form.register('showLinearRegression')}
+              />
+            </Popover.Content>
+          </Popover.Root>
+          <Popover.Root>
+            <Popover.Trigger asChild>
+              <IconButton
+                className="w-full shrink p-2.5"
+                colorScheme="transparent"
+                icon={<FunnelIcon className="m-0 size-5" />}
+                label="Filters"
+                variant="primary"
+              />
+            </Popover.Trigger>
+            <Popover.Content
+              align="end"
+              className="mr-0 w-96 space-y-6 p-8 pt-7"
+              side="top"
+            >
+              <Controller
+                control={form.control}
+                name="includeEventsFrom"
+                render={({ field }) => {
+                  let value;
 
-              return (
-                <Select
-                  isSearchable={false}
-                  label="Events from"
-                  name={field.name}
-                  onBlur={field.onBlur}
-                  onChange={(value) =>
-                    field.onChange((value as IOption)?.id ?? null)
+                  if (field.value) {
+                    for (const group of eventTypeOrTrainingPlanOptions) {
+                      value = group.options.find((o) => o.id === field.value);
+                      if (value) break;
+                    }
                   }
-                  options={eventTypeOrTrainingPlanOptions}
-                  placeholder="All event types/training plans…"
-                  value={value}
-                />
-              );
-            }}
-          />
-          <Controller
-            control={form.control}
-            name="includeEventsSince"
-            render={({ field }) => (
-              <Select
-                isSearchable={false}
-                label="Events since"
-                name={field.name}
-                onBlur={field.onBlur}
-                onChange={(value) =>
-                  field.onChange((value as IOption)?.id ?? null)
-                }
-                options={INCLUDE_EVENTS_SINCE_OPTIONS}
-                placeholder="The beginning of time…"
-                value={INCLUDE_EVENTS_SINCE_OPTIONS.find(
-                  (o) => field.value === o.id,
-                )}
+
+                  return (
+                    <Select
+                      isSearchable={false}
+                      label="Events from"
+                      name={field.name}
+                      onBlur={field.onBlur}
+                      onChange={(value) =>
+                        field.onChange((value as IOption)?.id ?? null)
+                      }
+                      options={eventTypeOrTrainingPlanOptions}
+                      placeholder="All event types/training plans…"
+                      value={value}
+                    />
+                  );
+                }}
               />
-            )}
-          />
-        </div>
-        <div className="mt-6">
-          <Controller
-            control={form.control}
-            name="inputOptions"
-            render={({ field }) => (
-              <Select
-                isDisabled={!inputOptionsOptions[inputId]}
-                isMulti
-                label="Input options"
-                name={field.name}
-                noOptionsMessage={() => 'No options.'}
-                onBlur={field.onBlur}
-                onChange={(values) =>
-                  field.onChange((values as IOption[]).map((v) => v.id))
-                }
-                options={inputOptionsOptions[inputId]}
-                placeholder="All input options…"
-                value={inputOptionsOptions[inputId]?.filter((o) =>
-                  field.value.includes(o.id),
+              <Controller
+                control={form.control}
+                name="includeEventsSince"
+                render={({ field }) => (
+                  <Select
+                    isSearchable={false}
+                    label="Events since"
+                    name={field.name}
+                    onBlur={field.onBlur}
+                    onChange={(value) =>
+                      field.onChange((value as IOption)?.id ?? null)
+                    }
+                    options={INCLUDE_EVENTS_SINCE_OPTIONS}
+                    placeholder="The beginning of time…"
+                    value={INCLUDE_EVENTS_SINCE_OPTIONS.find(
+                      (o) => field.value === o.id,
+                    )}
+                  />
                 )}
               />
-            )}
-          />
+              {inputOptionsOptions[inputId] && (
+                <Controller
+                  control={form.control}
+                  name="inputOptions"
+                  render={({ field }) => (
+                    <Select
+                      isMulti
+                      label="Input options"
+                      name={field.name}
+                      noOptionsMessage={() => 'No options.'}
+                      onBlur={field.onBlur}
+                      onChange={(values) =>
+                        field.onChange((values as IOption[]).map((v) => v.id))
+                      }
+                      options={inputOptionsOptions[inputId]}
+                      placeholder="All input options…"
+                      value={inputOptionsOptions[inputId]?.filter((o) =>
+                        field.value.includes(o.id),
+                      )}
+                    />
+                  )}
+                />
+              )}
+            </Popover.Content>
+          </Popover.Root>
+          <Popover.Root>
+            <Popover.Trigger asChild>
+              <IconButton
+                className="w-full shrink p-2.5"
+                colorScheme="transparent"
+                icon={<ArrowsPointingInIcon className="m-0 size-5" />}
+                label="Margins"
+                variant="primary"
+              />
+            </Popover.Trigger>
+            <Popover.Content
+              align="end"
+              className="mr-0 w-64 space-y-4 p-8 pt-7"
+              side="top"
+            >
+              <div className="grid w-full grid-cols-4 gap-4">
+                <Input
+                  className="col-span-2 col-start-2"
+                  min={0}
+                  type="number"
+                  {...form.register('marginTop')}
+                />
+              </div>
+              <div className="flex gap-4">
+                <Input min={0} type="number" {...form.register('marginLeft')} />
+                <Input
+                  min={0}
+                  type="number"
+                  {...form.register('marginRight')}
+                />
+              </div>
+              <div className="grid w-full grid-cols-4 gap-4">
+                <Input
+                  className="col-span-2 col-start-2"
+                  min={0}
+                  type="number"
+                  {...form.register('marginBottom')}
+                />
+              </div>
+            </Popover.Content>
+          </Popover.Root>
         </div>
-      </InsightSettingsSection>
+      </div>
       {form.formState.errors.root && (
         <div className="text-center">{form.formState.errors.root.message}</div>
       )}
-      <div className="flex flex-col-reverse justify-between gap-8 pt-8 align-baseline sm:flex-row">
-        <UnsavedChangesBanner<InsightFormValues> form={form} />
-        <div className="flex justify-center gap-4">
-          <PageModalBackButton
-            className="w-36 shrink-0"
-            colorScheme="transparent"
-            size="sm"
-          >
+      <div className="flex flex-col-reverse gap-8 pt-8 md:flex-row md:items-end md:justify-between">
+        <UnsavedChangesBanner<InsightFormValues>
+          className="shrink-0"
+          form={form}
+        />
+        <div className="mx-auto flex w-full max-w-sm gap-4 md:mx-0">
+          <PageModalBackButton className="w-full" colorScheme="transparent">
             Close
           </PageModalBackButton>
           <Button
-            className="w-36 shrink-0"
+            className="w-full"
             loading={isTransitioning}
             loadingText="Saving…"
-            size="sm"
             type="submit"
           >
             Save
diff --git a/app/_components/insight-menu.tsx b/app/_components/insight-menu.tsx
index f9382df6..77c66aa8 100644
--- a/app/_components/insight-menu.tsx
+++ b/app/_components/insight-menu.tsx
@@ -21,7 +21,7 @@ const InsightMenu = ({ insightId, subjectId }: InsightMenuProps) => (
       </div>
     </DropdownMenu.Trigger>
     <DropdownMenu.Portal>
-      <DropdownMenu.Content className="mx-1.5" sideOffset={0}>
+      <DropdownMenu.Content>
         <DropdownMenu.Button
           href={`/subjects/${subjectId}/insights/${insightId}/edit`}
           scroll={false}
diff --git a/app/_components/insight-settings-section.tsx b/app/_components/insight-settings-section.tsx
deleted file mode 100644
index 2b086780..00000000
--- a/app/_components/insight-settings-section.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client';
-
-import Button from '@/_components/button';
-import * as Collapsible from '@/_components/collapsible';
-import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon';
-import ChevronUpIcon from '@heroicons/react/24/outline/ChevronUpIcon';
-import { ReactNode, useState } from 'react';
-
-interface InsightSettingsSectionProps {
-  children: ReactNode;
-  className?: string;
-  title: string;
-}
-
-const InsightSettingsSection = ({
-  children,
-  className,
-  title,
-}: InsightSettingsSectionProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <Collapsible.Root onOpenChange={setIsOpen}>
-      <Collapsible.Trigger asChild>
-        <Button
-          colorScheme="transparent"
-          className="smallcaps m-0 -mt-3 w-full justify-between gap-6 border-b border-alpha-1 px-4"
-          variant="link"
-        >
-          {title}
-          {isOpen ? (
-            <ChevronUpIcon className="w-5 shrink-0" />
-          ) : (
-            <ChevronDownIcon className="w-5 shrink-0" />
-          )}
-        </Button>
-      </Collapsible.Trigger>
-      <Collapsible.Content className={className}>
-        {children}
-      </Collapsible.Content>
-    </Collapsible.Root>
-  );
-};
-
-export default InsightSettingsSection;
diff --git a/app/_components/module-form-section.tsx b/app/_components/module-form-section.tsx
index 6f321151..752d48c7 100644
--- a/app/_components/module-form-section.tsx
+++ b/app/_components/module-form-section.tsx
@@ -212,7 +212,7 @@ const ModuleFormSection = <
         </DropdownMenu.Root>
       </div>
       <Input
-        className="rounded-none border-t-0"
+        inputClassName="rounded-none border-t-0"
         maxLength={49}
         placeholder="Title"
         {...form.register(`${fieldPath}.name` as Form.Path<T>)}
@@ -238,7 +238,7 @@ const ModuleFormSection = <
           name={`${fieldPath}.inputs` as T[string]}
           render={({ field }) => (
             <Select
-              className="rounded-t-none border-t-0"
+              controlClassName="rounded-t-none border-t-0"
               formatCreateLabel={(value) => `Create "${value}" input`}
               isCreatable
               isMulti
diff --git a/app/_components/plot-figure.tsx b/app/_components/plot-figure.tsx
index 9b0ae318..2d74a1d4 100644
--- a/app/_components/plot-figure.tsx
+++ b/app/_components/plot-figure.tsx
@@ -15,7 +15,7 @@ import * as P from '@observablehq/plot';
 import { useParentSize } from '@visx/responsive';
 import { throttle } from 'lodash';
 import { useRouter } from 'next/navigation';
-import { Dispatch, SetStateAction, useEffect, useRef } from 'react';
+import * as React from 'react';
 
 const PlotFigure = ({
   barInterval,
@@ -58,8 +58,8 @@ const PlotFigure = ({
   marginLeft: string;
   marginRight: string;
   marginTop: string;
-  setActiveId?: Dispatch<SetStateAction<string | null>>;
-  setSyncDate?: Dispatch<SetStateAction<Date | null>>;
+  setActiveId?: React.Dispatch<React.SetStateAction<string | null>>;
+  setSyncDate?: React.Dispatch<React.SetStateAction<Date | null>>;
   showBars: boolean;
   showDots: boolean;
   showLine: boolean;
@@ -69,11 +69,11 @@ const PlotFigure = ({
   title: string;
   type: ChartType;
 }) => {
-  const containerRef = useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
   const router = useRouter();
   const { parentRef, width } = useParentSize();
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (!containerRef.current || !events) return;
 
     const { input, isDuration, isInputNominal } = getInputDetailsFromEvents({
@@ -85,35 +85,37 @@ const PlotFigure = ({
 
     switch (type) {
       case ChartType.TimeSeries: {
+        const x = 'Time';
+        const y = formatDirtyColumnHeader(input?.label);
+
         const rows = formatTabularEvents(events, {
           filterByInputId: inputId,
-          flattenInputs: true,
+          filterByInputOptions: inputOptions,
+          flattenColumnValues: true,
           includeEventsFrom,
           includeEventsSince,
-          inputOptions,
           parseTime: true,
         });
 
-        const x = 'Time';
-        const y = formatDirtyColumnHeader(input?.label);
-
-        marks.push(
-          P.axisX({
-            fill: '#C3C3C2',
-            stroke: 'hsla(0, 0%, 100%, 10%)',
-          }),
-        );
+        if (showBars || showLine || showLinearRegression || showDots) {
+          marks.push(
+            P.axisX({
+              fill: '#C3C3C2',
+              stroke: 'hsla(0, 0%, 100%, 10%)',
+            }),
+          );
 
-        marks.push(
-          P.axisY({
-            fill: '#C3C3C2',
-            label: null,
-            stroke: 'hsla(0, 0%, 100%, 10%)',
-            tickFormat: isDuration
-              ? (t) => `${humanizeDurationShort(t * 1000)}`
-              : undefined,
-          }),
-        );
+          marks.push(
+            P.axisY({
+              fill: '#C3C3C2',
+              label: null,
+              stroke: 'hsla(0, 0%, 100%, 10%)',
+              tickFormat: isDuration
+                ? (t) => `${humanizeDurationShort(t * 1000)}`
+                : undefined,
+            }),
+          );
+        }
 
         if (showBars) {
           marks.push(
@@ -144,10 +146,6 @@ const PlotFigure = ({
           marks.push(P.line(rows, { curve: lineCurveFunction, x, y }));
         }
 
-        if (showDots) {
-          marks.push(P.dot(rows, { fill: 'hsla(0, 0%, 100%, 50%)', x, y }));
-        }
-
         if (showLinearRegression) {
           marks.push(
             P.linearRegressionY(rows, {
@@ -159,7 +157,9 @@ const PlotFigure = ({
           );
         }
 
-        if (!showBars || !isInputNominal) {
+        if (showDots) {
+          marks.push(P.dot(rows, { fill: 'hsla(0, 0%, 100%, 50%)', x, y }));
+
           marks.push(
             P.dot(
               rows,
@@ -191,7 +191,7 @@ const PlotFigure = ({
               P.pointerX({
                 maxRadius: 100,
                 px: x,
-                stroke: 'hsla(0, 0%, 100%, 25%)',
+                stroke: 'hsla(0, 0%, 100%, 10%)',
                 y,
               }),
             ),
@@ -244,7 +244,10 @@ const PlotFigure = ({
 
     const plot = P.plot({
       color: { legend: true },
-      height: isInputNominal && !showBars ? undefined : defaultHeight,
+      height:
+        isInputNominal && (showDots || showLine || showLinearRegression)
+          ? undefined
+          : defaultHeight,
       inset: 10,
       marginBottom: Number(marginBottom),
       marginLeft: Number(marginLeft),
@@ -252,7 +255,7 @@ const PlotFigure = ({
       marginTop: Number(marginTop),
       marks,
       width,
-      x: { type: 'time' },
+      x: marks.length ? { type: 'time' } : undefined,
     });
 
     const onClick = () => {
@@ -292,6 +295,7 @@ const PlotFigure = ({
     plot.addEventListener('touchcancel', onEnd);
     plot.addEventListener('touchend', onEnd);
     plot.addEventListener('touchmove', onMove);
+
     containerRef.current.append(plot);
     return () => plot.remove();
   }, [
diff --git a/app/_components/popover.tsx b/app/_components/popover.tsx
index 6b98404f..ee629bf4 100644
--- a/app/_components/popover.tsx
+++ b/app/_components/popover.tsx
@@ -15,11 +15,11 @@ const Content = React.forwardRef<
       ref={ref}
       align={align}
       className={twMerge(
-        'rounded border border-alpha-2 bg-bg-3 drop-shadow',
+        'relative z-10 m-2 rounded border border-alpha-2 bg-bg-3 drop-shadow',
         className,
       )}
       onOpenAutoFocus={(e) => e.preventDefault()}
-      sideOffset={7}
+      sideOffset={0}
       {...props}
     />
   </PopoverPrimitive.Portal>
diff --git a/app/_components/select.tsx b/app/_components/select.tsx
index e0dce2d9..1677e3f3 100644
--- a/app/_components/select.tsx
+++ b/app/_components/select.tsx
@@ -23,6 +23,7 @@ import ReactSelect, {
   MultiValueRemoveProps,
   OptionProps,
   PlaceholderProps,
+  Props,
   Props as ReactSelectProps,
   SelectInstance,
   SingleValueProps,
@@ -61,7 +62,11 @@ const Control = <TOption extends IOption>({
   menuIsOpen,
   selectProps,
   ...props
-}: ControlProps<TOption>) => {
+}: ControlProps<TOption> & {
+  selectProps: Props<TOption, boolean, GroupBase<TOption>> & {
+    controlClassName?: string;
+  };
+}) => {
   const hasNoOptionsMessage = !!selectProps.noOptionsMessage({
     inputValue: selectProps.inputValue,
   });
@@ -78,7 +83,7 @@ const Control = <TOption extends IOption>({
           !(!hasNoOptionsMessage && !hasOptions) &&
           'rounded-b-none focus-within:ring-0',
         selectProps.isDisabled && 'disabled group-hover:bg-alpha-1',
-        selectProps.className,
+        selectProps.controlClassName,
       )}
       menuIsOpen={menuIsOpen}
       selectProps={selectProps}
@@ -295,6 +300,7 @@ const ValueContainer = <TOption extends IOption>({
 
 const Select = <TOption extends IOption>(
   {
+    className,
     instanceId,
     isCreatable,
     isDisabled,
@@ -306,7 +312,7 @@ const Select = <TOption extends IOption>(
     tooltip,
     value,
     ...props
-  }: SelectProps<TOption>,
+  }: SelectProps<TOption> & { controlClassName?: string },
   ref: Ref<SelectInstance<IOption, boolean, GroupBase<IOption>>>,
 ) => {
   const commonProps = {
@@ -347,7 +353,7 @@ const Select = <TOption extends IOption>(
   };
 
   return (
-    <div className="group">
+    <div className={twMerge('group', className)}>
       <div className="flex justify-between">
         {label && (
           <label className="label" htmlFor={`react-select-${name}-input`}>
diff --git a/app/_components/session-menu.tsx b/app/_components/session-menu.tsx
index 30677257..d676174a 100644
--- a/app/_components/session-menu.tsx
+++ b/app/_components/session-menu.tsx
@@ -55,7 +55,7 @@ const SessionMenu = ({
         )}
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content className="mx-2" sideOffset={-2}>
+        <DropdownMenu.Content>
           <DropdownMenu.Button
             href={`/subjects/${subjectId}/training-plans/${trainingPlanId}/sessions/${sessionId}/edit`}
             scroll={false}
diff --git a/app/_components/subject-form.tsx b/app/_components/subject-form.tsx
index 6a7deaf9..73d02b3e 100644
--- a/app/_components/subject-form.tsx
+++ b/app/_components/subject-form.tsx
@@ -143,7 +143,7 @@ const SubjectForm = ({ subject }: SubjectFormProps) => {
                     name={`data.links.${linkIndex}.label`}
                     render={({ field }) => (
                       <Input
-                        className="rounded-b-none border-b-0 pr-[2.4rem]"
+                        inputClassName="rounded-b-none border-b-0 pr-[2.4rem]"
                         placeholder="Label…"
                         required
                         {...field}
@@ -155,7 +155,7 @@ const SubjectForm = ({ subject }: SubjectFormProps) => {
                     name={`data.links.${linkIndex}.url`}
                     render={({ field }) => (
                       <Input
-                        className="rounded-t-none"
+                        inputClassName="rounded-t-none"
                         placeholder="https://…"
                         required
                         type="url"
diff --git a/app/_components/subject-menu.tsx b/app/_components/subject-menu.tsx
index 5789f478..5c060f19 100644
--- a/app/_components/subject-menu.tsx
+++ b/app/_components/subject-menu.tsx
@@ -74,8 +74,7 @@ const SubjectMenu = ({ canUnarchive, isList, subject }: SubjectMenuProps) => {
       <DropdownMenu.Portal>
         <DropdownMenu.Content
           align={isList ? 'end' : 'start'}
-          className={twMerge(isList && 'mx-2')}
-          sideOffset={isList ? -2 : 7}
+          className={twMerge(isList && 'mr-1.5')}
         >
           <DropdownMenu.Button
             href={`/subjects/${subject.id}/edit`}
@@ -92,7 +91,11 @@ const SubjectMenu = ({ canUnarchive, isList, subject }: SubjectMenuProps) => {
               <PencilSquareIcon className="w-5 text-fg-4" />
               Notes
             </DropdownMenu.Button>
-            <Tip align="end" className="absolute right-4 top-2.5">
+            <Tip
+              align="end"
+              className="absolute right-4 top-2.5"
+              tipClassName="mr-0.5"
+            >
               Not visible to clients.
             </Tip>
           </div>
@@ -137,7 +140,11 @@ const SubjectMenu = ({ canUnarchive, isList, subject }: SubjectMenuProps) => {
                 </>
               )}
             </DropdownMenu.Button>
-            <Tip align="end" className="absolute right-4 top-2.5">
+            <Tip
+              align="end"
+              className="absolute right-4 top-2.5"
+              tipClassName="mr-0.5"
+            >
               Clients can complete training plans, record events
               and&nbsp;comment.
             </Tip>
diff --git a/app/_components/subject-page.tsx b/app/_components/subject-page.tsx
index aa7e5d81..0d1d5955 100644
--- a/app/_components/subject-page.tsx
+++ b/app/_components/subject-page.tsx
@@ -116,7 +116,11 @@ const SubjectPage = async ({
                     <PlusIcon className="w-5 text-fg-4" />
                     Event type
                   </DropdownMenu.Button>
-                  <Tip align="end" className="absolute right-4 top-2.5">
+                  <Tip
+                    align="end"
+                    className="absolute right-4 top-2.5"
+                    tipClassName="mr-0.5"
+                  >
                     Use event types to track individual behaviors, activities
                     etc. For example: &ldquo;Barking&rdquo; or
                     &ldquo;Medication&rdquo;.
@@ -130,7 +134,11 @@ const SubjectPage = async ({
                     <PlusIcon className="w-5 text-fg-4" />
                     Training plan
                   </DropdownMenu.Button>
-                  <Tip align="end" className="absolute right-4 top-2.5">
+                  <Tip
+                    align="end"
+                    className="absolute right-4 top-2.5"
+                    tipClassName="mr-0.5"
+                  >
                     Use training plans to teach new behaviors, skills etc. For
                     example: &ldquo;Reduce separation anxiety&rdquo;.
                   </Tip>
diff --git a/app/_components/template-menu.tsx b/app/_components/template-menu.tsx
index 4640c4ad..faff7384 100644
--- a/app/_components/template-menu.tsx
+++ b/app/_components/template-menu.tsx
@@ -23,7 +23,7 @@ const TemplateMenu = ({ templateId, type }: TemplateMenuProps) => (
       </div>
     </DropdownMenu.Trigger>
     <DropdownMenu.Portal>
-      <DropdownMenu.Content className="mx-2" sideOffset={-2}>
+      <DropdownMenu.Content className="mr-1.5">
         <DropdownMenu.Button
           href={`/templates/${TEMPLATE_TYPE_SLUGS[type]}/create/from-template/${templateId}`}
           scroll={false}
diff --git a/app/_components/tip.tsx b/app/_components/tip.tsx
index 69d0111c..aeaa4fb7 100644
--- a/app/_components/tip.tsx
+++ b/app/_components/tip.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import Button from '@/_components/button';
+import IconButton from '@/_components/icon-button';
 import * as Popover from '@/_components/popover';
 import QuestionMarkCircleIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon';
 import { PopoverContentProps } from '@radix-ui/react-popover';
@@ -16,16 +16,17 @@ interface TipProps extends PopoverContentProps {
 const Tip = ({ children, className, tipClassName, ...rest }: TipProps) => (
   <Popover.Root>
     <Popover.Trigger asChild>
-      <Button className={className} variant="link">
-        <QuestionMarkCircleIcon className="w-5" />
-      </Button>
+      <IconButton
+        className={className}
+        icon={<QuestionMarkCircleIcon className="w-5" />}
+        label="Help"
+      />
     </Popover.Trigger>
     <Popover.Content
       className={twMerge(
-        'z-30 max-w-[20rem] rounded border border-alpha-2 bg-bg-3 px-6 py-4 text-center drop-shadow',
+        'z-30 m-0 max-w-[20rem] rounded border border-alpha-2 bg-bg-3 px-6 py-4 text-center drop-shadow',
         tipClassName,
       )}
-      sideOffset={-2}
       {...rest}
     >
       {children}
diff --git a/app/_components/training-plan-menu.tsx b/app/_components/training-plan-menu.tsx
index 6d8c40a1..16a266c2 100644
--- a/app/_components/training-plan-menu.tsx
+++ b/app/_components/training-plan-menu.tsx
@@ -36,7 +36,7 @@ const TrainingPlanMenu = ({
         )}
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content className="mx-2" sideOffset={-2}>
+        <DropdownMenu.Content className="mr-1.5">
           <DropdownMenu.Button
             href={`/subjects/${subjectId}/training-plans/${trainingPlanId}/edit`}
             scroll={false}
diff --git a/app/_utilities/format-tabular-events.ts b/app/_utilities/format-tabular-events.ts
index dc8db06b..e6517e21 100644
--- a/app/_utilities/format-tabular-events.ts
+++ b/app/_utilities/format-tabular-events.ts
@@ -12,10 +12,11 @@ const formatTabularEvents = (
   events: ListEventsData,
   options?: {
     filterByInputId?: string;
-    flattenInputs?: boolean;
+    filterByInputOptions?: string[];
+    flattenColumnValues?: boolean;
+    includeComments?: boolean;
     includeEventsFrom?: string | null;
     includeEventsSince?: TimeSinceMilliseconds | null;
-    inputOptions?: string[];
     parseTime?: boolean;
   },
 ) => {
@@ -38,17 +39,20 @@ const formatTabularEvents = (
 
     const row: Row = {
       Id: event.id,
-      Name: strip(event.type?.name ?? event.type?.session?.training_plan?.name),
       'Recorded by': strip(formatFullName(event?.profile)),
       Time: options?.parseTime ? new Date(event.created_at) : event.created_at,
     };
 
     if (event?.type?.session) {
+      row['Module name'] = strip(event.type?.name ?? '');
       row['Module number'] = (event.type.order ?? 0) + 1;
       row['Session number'] = event.type.session.order + 1;
+      row['Session title'] = strip(event.type.session.title ?? '');
+    } else {
+      row['Event type name'] = strip(event.type?.name ?? '');
     }
 
-    if (event.comments && event.comments.length) {
+    if (options?.includeComments && event.comments && event.comments.length) {
       row.Comments = event.comments.map((comment) => {
         const strippedComment = comment.content.replace(/<[^>]+>/g, ' ');
 
@@ -58,18 +62,18 @@ const formatTabularEvents = (
       });
     }
 
-    const flattenColumns: Set<string> = new Set();
     const inputs = forceArray(event.inputs);
-    let hasFilteredInputId = false;
+    const flattenColumns = new Set<string>();
+    let filteredInputExists = false;
 
     for (const input of inputs) {
       if (
         !input.input ||
         (options?.filterByInputId &&
           input.input.id !== options.filterByInputId) ||
-        (options?.inputOptions?.length &&
-          !options.inputOptions.includes(input.option?.id ?? '') &&
-          !options.inputOptions.includes(String(input.value)))
+        (options?.filterByInputOptions?.length &&
+          !options.filterByInputOptions.includes(input.option?.id ?? '') &&
+          !options.filterByInputOptions.includes(String(input.value)))
       ) {
         continue;
       }
@@ -79,7 +83,7 @@ const formatTabularEvents = (
       if (input.input.type === InputType.MultiSelect) {
         row[column] = row[column] ?? [];
         (row[column] as Array<string>).push(strip(input.option?.label));
-        if (options?.flattenInputs) flattenColumns.add(column);
+        if (options?.flattenColumnValues) flattenColumns.add(column);
       } else if (input.input.type === InputType.Select) {
         (row[column] as string) = strip(input.option?.label);
       } else if (input.input.type === InputType.Checkbox) {
@@ -88,22 +92,32 @@ const formatTabularEvents = (
         row[column] = Number(input.value);
       }
 
-      hasFilteredInputId = !!options?.filterByInputId;
+      if (options?.filterByInputId) {
+        filteredInputExists = true;
+      }
     }
 
-    if (options?.filterByInputId && !hasFilteredInputId) {
+    if (options?.filterByInputId && !filteredInputExists) {
       continue;
     }
 
-    if (!options?.flattenInputs || !flattenColumns.size) {
+    if (!options?.flattenColumnValues || !flattenColumns.size) {
       table.push(row);
       continue;
     }
 
-    for (const column of Array.from(flattenColumns)) {
+    for (const column of Array.from(flattenColumns.values())) {
+      if (!row[column]) continue;
+
       for (const value of row[column] as Array<string>) {
-        table.push({ ...row, [column]: value });
+        table.push({ Id: row.Id, Time: row.Time, [column]: value });
       }
+
+      delete row[column];
+    }
+
+    if (!options?.filterByInputId) {
+      table.push(row);
     }
   }