diff --git a/explorer/Explorer.tsx b/explorer/Explorer.tsx
index adf27c43b14..6ecbd40fd09 100644
--- a/explorer/Explorer.tsx
+++ b/explorer/Explorer.tsx
@@ -24,6 +24,7 @@ import {
     setSelectedEntityNamesParam,
     SlideShowController,
     SlideShowManager,
+    DEFAULT_GRAPHER_ENTITY_TYPE,
 } from "@ourworldindata/grapher"
 import {
     Bounds,
@@ -186,7 +187,7 @@ export class Explorer
         this.props.selection ??
         new SelectionArray(this.explorerProgram.selection)
 
-    entityType = this.explorerProgram.entityType ?? "country or region"
+    entityType = this.explorerProgram.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE
 
     @observable.ref grapher?: Grapher
 
diff --git a/package.json b/package.json
index 78d32254b32..053c7fd04dc 100644
--- a/package.json
+++ b/package.json
@@ -144,6 +144,7 @@
         "googleapis": "^108.0.0",
         "handsontable": "^12.3.3",
         "html-to-text": "^8.2.0",
+        "indefinite": "^2.4.3",
         "instantsearch.js": "^4.56.9",
         "js-base64": "^3.7.2",
         "js-cookie": "^3.0.1",
@@ -224,6 +225,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^12",
         "@types/geojson": "^7946.0.10",
+        "@types/indefinite": "^2.3.2",
         "@types/jest": "^29.0.3",
         "@types/js-yaml": "^4.0.5",
         "@types/opener": "^1.4.0",
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
index eaf173c279f..bf6711782f2 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
@@ -243,9 +243,11 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
         const { showContentSwitchers } = this
         return (
             <nav className="controlsRow">
-                {showContentSwitchers && (
-                    <ContentSwitchers manager={this.manager} />
-                )}
+                <div>
+                    {showContentSwitchers && (
+                        <ContentSwitchers manager={this.manager} />
+                    )}
+                </div>
                 <div className="controls">
                     <EntitySelectorToggle manager={this.manager} />
                     <SettingsMenu
diff --git a/packages/@ourworldindata/grapher/src/controls/ChartIcons.tsx b/packages/@ourworldindata/grapher/src/controls/ChartIcons.tsx
new file mode 100644
index 00000000000..c6b1a684979
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/controls/ChartIcons.tsx
@@ -0,0 +1,114 @@
+import React from "react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+import {
+    faChartLine,
+    faChartColumn,
+    faEarthAmericas,
+} from "@fortawesome/free-solid-svg-icons"
+import { ChartTypeName } from "../core/GrapherConstants"
+
+export const chartIcons: Record<ChartTypeName, JSX.Element> = {
+    // line chart
+    [ChartTypeName.LineChart]: <FontAwesomeIcon icon={faChartLine} />,
+
+    // bar charts
+    [ChartTypeName.DiscreteBar]: <FontAwesomeIcon icon={faChartColumn} />,
+    [ChartTypeName.StackedBar]: <FontAwesomeIcon icon={faChartColumn} />,
+    [ChartTypeName.StackedDiscreteBar]: (
+        <FontAwesomeIcon icon={faChartColumn} />
+    ),
+
+    // world map
+    [ChartTypeName.WorldMap]: <FontAwesomeIcon icon={faEarthAmericas} />,
+
+    // scatter
+    [ChartTypeName.ScatterPlot]: (
+        <svg
+            className="custom-icon scatter"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+        >
+            <g clipPath="url(#a)">
+                <path
+                    fill="currentColor"
+                    fillRule="evenodd"
+                    d="M13.2 14h-10A1.2 1.2 0 0 1 2 12.8v-10a.8.8 0 1 1 1.6 0V12c0 .22.18.4.4.4h9.2a.8.8 0 0 1 0 1.6Zm-.16-10a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Zm-.24 0Zm-1.36 3.6a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Zm-.24 0Zm-3.76 2a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Zm-.24 0Zm1.04-4.8a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Z"
+                    clipRule="evenodd"
+                />
+            </g>
+            <defs>
+                <clipPath id="a">
+                    <path fill="#fff" d="M0 0h16v16H0z" />
+                </clipPath>
+            </defs>
+        </svg>
+    ),
+
+    // marimekko
+    [ChartTypeName.Marimekko]: (
+        <svg
+            className="custom-icon marimekko"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+        >
+            <g clipPath="url(#a)">
+                <path
+                    fill="currentColor"
+                    stroke="currentColor"
+                    strokeWidth=".1"
+                    d="M13.5 1.45h-11A1.051 1.051 0 0 0 1.45 2.5v11a1.051 1.051 0 0 0 1.05 1.05h11a1.051 1.051 0 0 0 1.05-1.05v-11a1.051 1.051 0 0 0-1.05-1.05Zm-.05 3.5h-2.9v-2.4h2.9v2.4Zm-4-1h-2.9v-1.4h2.9v1.4Zm0 1.1v3.9h-2.9v-3.9h2.9Zm-4 5.9h-2.9v-4.9h2.9v4.9Zm1.1-.9h2.9v3.4h-2.9v-3.4Zm4-4h2.9v1.9h-2.9v-1.9Zm-5.1-3.5v2.4h-2.9v-2.4h2.9Zm-2.9 9.5h2.9v1.4h-2.9v-1.4Zm8 1.4v-4.4h2.9v4.4h-2.9Z"
+                />
+            </g>
+            <defs>
+                <clipPath id="a">
+                    <path fill="#fff" d="M0 0h16v16H0z" />
+                </clipPath>
+            </defs>
+        </svg>
+    ),
+
+    // stacked area
+    [ChartTypeName.StackedArea]: (
+        <svg
+            className="custom-icon stacked-area"
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+        >
+            <g
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.6"
+            >
+                <path d="M1 12.458V1.542L5.764 4.06l7.145-2.52v10.917H1Z" />
+                <path d="m1 9.481 4.764-1.985 7.145 1.191" />
+            </g>
+        </svg>
+    ),
+
+    // slope chart
+    [ChartTypeName.SlopeChart]: (
+        <svg
+            className="custom-icon slope"
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+        >
+            <g
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.6"
+            >
+                <path d="M1 1v11.267h12M3.6 7.933 12.267 3.6" />
+            </g>
+        </svg>
+    ),
+}
diff --git a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.scss b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.scss
index 1851d98b055..64e5adefaac 100644
--- a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.scss
+++ b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.scss
@@ -7,15 +7,16 @@
     $info-icon: #a1a1a1;
     $active-icon: #6e87a2;
 
-    $border-width: 1px;
     $border-radius: 4px;
-    $visual-gap: 1.5px;
+    $visual-gap: 2px;
 
     list-style: none;
     height: $controlRowHeight;
     margin: 0;
     padding: $visual-gap;
-    border: $border-width solid $light-stroke;
+    // using a box-shadow instead of a border fixes a bug
+    // where the tab items weren't centered when zoomed in or out
+    box-shadow: inset 0 0 0 1px $light-stroke;
     border-radius: $border-radius;
 
     li {
@@ -25,7 +26,7 @@
     }
 
     li > a {
-        $height: $controlRowHeight - 2 * ($border-width + $visual-gap);
+        $height: $controlRowHeight - 2 * $visual-gap;
 
         display: block;
         text-transform: capitalize;
@@ -50,6 +51,20 @@
 
         svg {
             color: $info-icon;
+
+            &.custom-icon {
+                --size: 13px;
+
+                display: inline-block;
+                height: var(--size);
+                width: var(--size);
+                vertical-align: -1.625px;
+
+                &.scatter,
+                &.marimekko {
+                    --size: 14px;
+                }
+            }
         }
     }
 
diff --git a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx
index ccfd0dd742f..4cc43e04832 100644
--- a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx
@@ -3,23 +3,15 @@ import { computed } from "mobx"
 import { observer } from "mobx-react"
 import classnames from "classnames"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import {
-    faTable,
-    faEarthAmericas,
-    faChartLine,
-} from "@fortawesome/free-solid-svg-icons"
-import { GrapherTabOption } from "../core/GrapherConstants"
-
-const icons = {
-    [GrapherTabOption.table]: faTable,
-    [GrapherTabOption.chart]: faChartLine,
-    [GrapherTabOption.map]: faEarthAmericas,
-} as const
+import { faTable, faEarthAmericas } from "@fortawesome/free-solid-svg-icons"
+import { ChartTypeName, GrapherTabOption } from "../core/GrapherConstants"
+import { chartIcons } from "./ChartIcons"
 
 export interface ContentSwitchersManager {
     availableTabs?: GrapherTabOption[]
     tab?: GrapherTabOption
     isNarrow?: boolean
+    type?: ChartTypeName
 }
 
 @observer
@@ -38,6 +30,21 @@ export class ContentSwitchers extends React.Component<{
         return !this.manager.isNarrow
     }
 
+    @computed private get chartType(): ChartTypeName {
+        return this.manager.type ?? ChartTypeName.LineChart
+    }
+
+    private tabIcon(tab: GrapherTabOption): JSX.Element {
+        switch (tab) {
+            case GrapherTabOption.table:
+                return <FontAwesomeIcon icon={faTable} />
+            case GrapherTabOption.map:
+                return <FontAwesomeIcon icon={faEarthAmericas} />
+            case GrapherTabOption.chart:
+                return chartIcons[this.chartType]
+        }
+    }
+
     render(): JSX.Element {
         const { manager } = this
         return (
@@ -51,6 +58,7 @@ export class ContentSwitchers extends React.Component<{
                     <Tab
                         key={tab}
                         tab={tab}
+                        icon={this.tabIcon(tab)}
                         isActive={tab === manager.tab}
                         onClick={(): void => {
                             manager.tab = tab
@@ -65,6 +73,7 @@ export class ContentSwitchers extends React.Component<{
 
 function Tab(props: {
     tab: GrapherTabOption
+    icon: JSX.Element
     isActive?: boolean
     onClick?: React.MouseEventHandler<HTMLAnchorElement>
     showLabel?: boolean
@@ -76,7 +85,7 @@ function Tab(props: {
                 onClick={props.onClick}
                 data-track-note={"chart_click_" + props.tab}
             >
-                <FontAwesomeIcon icon={icons[props.tab]} />
+                {props.icon}
                 {props.showLabel && <span className="label">{props.tab}</span>}
             </a>
         </li>
diff --git a/packages/@ourworldindata/grapher/src/controls/Controls.scss b/packages/@ourworldindata/grapher/src/controls/Controls.scss
index d668f9f107d..4dc7397f7e8 100644
--- a/packages/@ourworldindata/grapher/src/controls/Controls.scss
+++ b/packages/@ourworldindata/grapher/src/controls/Controls.scss
@@ -90,7 +90,7 @@ nav.controlsRow .controls {
 
         .control {
             min-height: auto;
-            min-width: 180px;
+            min-width: 150px;
             font: $medium 13px/16px $lato;
             letter-spacing: 0.01em;
             display: flex;
diff --git a/packages/@ourworldindata/grapher/src/controls/Controls.tsx b/packages/@ourworldindata/grapher/src/controls/Controls.tsx
index 7a379cc9cc0..30c015d543a 100644
--- a/packages/@ourworldindata/grapher/src/controls/Controls.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/Controls.tsx
@@ -22,6 +22,8 @@ import {
     FacetStrategy,
     StackMode,
     ScaleType,
+    DEFAULT_GRAPHER_ENTITY_TYPE,
+    DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL,
 } from "../core/GrapherConstants"
 import { MapConfig } from "../mapCharts/MapConfig"
 import {
@@ -138,6 +140,7 @@ export interface SettingsMenuManager {
     hideFacetYDomainToggle?: boolean
     hideXScaleToggle?: boolean
     hideYScaleToggle?: boolean
+    hideTableFilterToggle?: boolean
 
     // chart state
     type: ChartTypeName
@@ -288,9 +291,13 @@ export class SettingsMenu extends React.Component<{
         )
     }
 
+    @computed get showTableFilterToggle(): boolean {
+        return !this.manager.hideTableFilterToggle
+    }
+
     @computed get showSettingsMenuToggle(): boolean {
         if (this.manager.isOnMapTab) return false
-        if (this.manager.isOnTableTab) return true
+        if (this.manager.isOnTableTab) return this.showTableFilterToggle
 
         return !!(
             this.showYScaleToggle ||
@@ -365,6 +372,7 @@ export class SettingsMenu extends React.Component<{
             showFacetControl,
             showFacetYDomainToggle,
             showAbsRelToggle,
+            showTableFilterToggle,
         } = this
 
         const {
@@ -435,7 +443,9 @@ export class SettingsMenu extends React.Component<{
                     </Setting>
 
                     <Setting title="Data rows" active={isOnTableTab}>
-                        <TableFilterToggle manager={manager} />
+                        {showTableFilterToggle && (
+                            <TableFilterToggle manager={manager} />
+                        )}
                     </Setting>
 
                     <Setting
@@ -725,7 +735,8 @@ export class TableFilterToggle extends React.Component<{
 
     render(): JSX.Element {
         const tooltip = `Only display table rows for ${
-            this.props.manager.entityTypePlural ?? "countries or regions"
+            this.props.manager.entityTypePlural ??
+            DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL
         } selected within the chart`
 
         return (
@@ -759,7 +770,7 @@ export class FacetStrategySelector extends React.Component<{
     }
 
     @computed get entityName(): string {
-        return this.props.manager.entityType ?? "country or region"
+        return this.props.manager.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE
     }
 
     @computed get metricName(): string {
@@ -839,6 +850,7 @@ export class FacetStrategySelector extends React.Component<{
 export interface MapProjectionMenuManager {
     mapConfig?: MapConfig
     isOnMapTab?: boolean
+    hideMapProjectionMenu?: boolean
 }
 
 interface MapProjectionMenuItem {
@@ -856,10 +868,10 @@ export class MapProjectionMenu extends React.Component<{
     }
 
     @computed get showMenu(): boolean {
-        // TODO: make hiding the menu configurable from gdocs
-        const { isOnMapTab, mapConfig } = this.props.manager,
+        const { hideMapProjectionMenu, isOnMapTab, mapConfig } =
+                this.props.manager,
             { projection } = mapConfig ?? {}
-        return !!(isOnMapTab && projection)
+        return !hideMapProjectionMenu && !!(isOnMapTab && projection)
     }
 
     @action.bound onChange(selected: MapProjectionMenuItem | null): void {
diff --git a/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss b/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss
index faac5ea42c4..f5df97e5d07 100644
--- a/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss
+++ b/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss
@@ -20,6 +20,7 @@ $zindex-ControlsFooter: 2;
     border-radius: 4px;
 
     h2 {
+        font-family: $sans-serif-font-stack;
         margin: 0;
         font-size: 12px;
         font-weight: 700;
diff --git a/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx b/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx
index b81de2a481e..57000deaa1a 100644
--- a/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx
@@ -2,7 +2,7 @@ import { observer } from "mobx-react"
 import React from "react"
 import { computed, action } from "mobx"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { faTwitter, faFacebook } from "@fortawesome/free-brands-svg-icons"
+import { faXTwitter, faFacebook } from "@fortawesome/free-brands-svg-icons"
 import {
     faCode,
     faShareAlt,
@@ -157,7 +157,7 @@ export class ShareMenu extends React.Component<ShareMenuProps, ShareMenuState> {
                     href={twitterHref}
                     rel="noopener"
                 >
-                    <FontAwesomeIcon icon={faTwitter} /> Twitter
+                    <FontAwesomeIcon icon={faXTwitter} /> X
                 </a>
                 <a
                     target="_blank"
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index 8ed4c1f1207..2ab258801be 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -90,6 +90,8 @@ import {
     getVariableDataRoute,
     getVariableMetadataRoute,
     GRAPHER_FRAME_PADDING,
+    DEFAULT_GRAPHER_ENTITY_TYPE,
+    DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL,
 } from "../core/GrapherConstants"
 import Cookies from "js-cookie"
 import {
@@ -265,6 +267,8 @@ export interface GrapherProgrammaticInterface extends GrapherInterface {
     hideFacetYDomainToggle?: boolean
     hideXScaleToggle?: boolean
     hideYScaleToggle?: boolean
+    hideMapProjectionMenu?: boolean
+    hideTableFilterToggle?: boolean
     forceHideAnnotationFieldsInTitle?: AnnotationFieldsInTitle
     hasTableTab?: boolean
     hideShareTabButton?: boolean
@@ -334,8 +338,8 @@ export class Grapher
     @observable.ref logo?: LogoOption = undefined
     @observable.ref hideLogo?: boolean = undefined
     @observable.ref hideRelativeToggle? = true
-    @observable.ref entityType = "country or region"
-    @observable.ref entityTypePlural = "countries or regions"
+    @observable.ref entityType = DEFAULT_GRAPHER_ENTITY_TYPE
+    @observable.ref entityTypePlural = DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL
     @observable.ref facettingLabelByYVariables = "metric"
     @observable.ref hideTimeline?: boolean = undefined
     @observable.ref hideScatterLabels?: boolean = undefined
@@ -1231,7 +1235,7 @@ export class Grapher
     }
 
     @computed get currentTitle(): string {
-        let text = this.displayTitle
+        let text = this.displayTitle.trim()
         const selectedEntityNames = this.selection.selectedEntityNames
         const showEntityAnnotation = !this.hideAnnotationFieldsInTitle?.entity
         const showTimeAnnotation = !this.hideAnnotationFieldsInTitle?.time
@@ -1242,6 +1246,16 @@ export class Grapher
             this.chartInstance.seriesStrategy ||
             autoDetectSeriesStrategy(this, true)
 
+        // helper function to add an annotation fragment to the title
+        // only adds a comma if the text does not end with a question mark
+        const appendAnnotationField = (
+            text: string,
+            annotation: string
+        ): string => {
+            const separator = text.endsWith("?") ? "" : ","
+            return `${text}${separator} ${annotation}`
+        }
+
         if (
             !this.forceHideAnnotationFieldsInTitle?.entity &&
             this.tab === GrapherTabOption.chart &&
@@ -1252,7 +1266,7 @@ export class Grapher
                 this.canSelectMultipleEntities)
         ) {
             const entityStr = selectedEntityNames[0]
-            if (entityStr?.length) text = `${text}, ${entityStr}`
+            if (entityStr?.length) text = appendAnnotationField(text, entityStr)
         }
 
         if (
@@ -1275,7 +1289,7 @@ export class Grapher
                         this.isMarimekko ||
                         this.isOnMapTab)))
         )
-            text += this.timeTitleSuffix
+            text = appendAnnotationField(text, this.timeTitleSuffix)
 
         return text.trim()
     }
@@ -1385,7 +1399,7 @@ export class Grapher
                   " to " +
                   timeColumn.formatValue(endTime)
 
-        return ", " + time
+        return time
     }
 
     @computed get sourcesLine(): string {
@@ -2182,6 +2196,9 @@ export class Grapher
             document.documentElement.classList.remove("no-scroll")
         }
 
+        // dismiss the share menu
+        this.isShareMenuActive = false
+
         this._isInFullScreenMode = newValue
     }
 
@@ -2763,6 +2780,8 @@ export class Grapher
     @observable hideFacetYDomainToggle = false
     @observable hideXScaleToggle = false
     @observable hideYScaleToggle = false
+    @observable hideMapProjectionMenu = false
+    @observable hideTableFilterToggle = false
     // enforces hiding an annotation, even if that means that a crucial piece of information is missing from the chart title
     @observable forceHideAnnotationFieldsInTitle: AnnotationFieldsInTitle = {
         entity: false,
diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
index efc96fdec2b..2ae6a3798c6 100644
--- a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
+++ b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -25,6 +25,9 @@ export const GRAPHER_IS_IN_IFRAME_CLASS = "IsInIframe"
 export const DEFAULT_GRAPHER_CONFIG_SCHEMA =
     "https://files.ourworldindata.org/schemas/grapher-schema.003.json"
 
+export const DEFAULT_GRAPHER_ENTITY_TYPE = "country or region"
+export const DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL = "countries and regions"
+
 export const DEFAULT_GRAPHER_WIDTH = 850
 export const DEFAULT_GRAPHER_HEIGHT = 600
 
@@ -159,6 +162,8 @@ export const grapherInterfaceWithHiddenControlsOnly: GrapherProgrammaticInterfac
         hideFacetYDomainToggle: true,
         hideXScaleToggle: true,
         hideYScaleToggle: true,
+        hideMapProjectionMenu: true,
+        hideTableFilterToggle: true,
         map: {
             hideTimeline: true,
         },
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
index 3f642f8c4ed..4cf6ef5b959 100644
--- a/packages/@ourworldindata/grapher/src/core/grapher.scss
+++ b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -112,7 +112,7 @@ $zindex-controls-drawer: 140;
     container-name: grapher;
 
     // use box-shadow instead of border to make sure the border is in the foreground
-    box-shadow: 0 0 0 1px $frame-color; // equivalent to `border: 1px solid $frame-color`
+    box-shadow: inset 0 0 0 1px $frame-color; // equivalent to `border: 1px solid $frame-color`
     z-index: $zindex-chart;
 
     * {
diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx
index 58107e36546..e8b580dbaaa 100644
--- a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx
+++ b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx
@@ -43,6 +43,7 @@ import {
 } from "@ourworldindata/utils"
 import { makeSelectionArray } from "../chart/ChartUtils"
 import { SelectionArray } from "../selection/SelectionArray"
+import { DEFAULT_GRAPHER_ENTITY_TYPE } from "../core/GrapherConstants"
 
 interface DataTableState {
     sort: DataTableSortState
@@ -153,13 +154,14 @@ export class DataTable extends React.Component<{
         return (
             this.props.manager ?? {
                 table: BlankOwidTable(),
-                entityType: "country or region",
+                entityType: DEFAULT_GRAPHER_ENTITY_TYPE,
             }
         )
     }
 
+    // in data tables only, we prefer "Country/area" over "Country or region" as default entity type
     @computed private get entityType(): string {
-        return this.manager.entityType ?? "country or region"
+        return this.manager.entityType ?? "Country/area"
     }
 
     @computed private get entitiesAreCountryLike(): boolean {
diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
index 401f40347c9..8cff58e5ce3 100644
--- a/packages/@ourworldindata/grapher/src/footer/Footer.tsx
+++ b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
@@ -215,9 +215,16 @@ export class Footer<
     }
 
     @computed protected get showLicenseNextToSources(): boolean {
-        const { useFullWidthSources, maxWidth, sources, licenseAndOriginUrl } =
-            this
+        const {
+            useFullWidthSources,
+            maxWidth,
+            sources,
+            licenseAndOriginUrl,
+            note,
+        } = this
         if (!useFullWidthSources) return false
+        // if there's space, keep the license below the note
+        if (this.useFullWidthNote || note.htmlLines.length <= 1) return false
         return (
             sources.width + HORIZONTAL_PADDING + licenseAndOriginUrl.width <=
             maxWidth
@@ -272,12 +279,24 @@ export class Footer<
             hasNote,
             useFullWidthNote,
         } = this
-        const textWidth = !useFullWidthSources
-            ? Bounds.forText(sourcesText, {
-                  fontSize: sourcesFontSize,
-              }).width
+
+        const sourcesWidth = Bounds.forText(sourcesText, {
+            fontSize: sourcesFontSize,
+        }).width
+        const noteWidth = Bounds.forText(noteText, { fontSize }).width
+
+        // text next to the action buttons
+        const leftTextWidth = !useFullWidthSources
+            ? sourcesWidth
             : hasNote && !useFullWidthNote
-            ? Bounds.forText(noteText, { fontSize }).width
+            ? noteWidth
+            : 0
+        // text above the action buttons
+        // (taken into account to ensure the action buttons are not too close to clickable text)
+        const topTextWidth = useFullWidthSources
+            ? useFullWidthNote
+                ? noteWidth
+                : sourcesWidth
             : 0
         const licenseAndOriginUrlWidth = Bounds.forText(
             Footer.constructLicenseAndOriginUrlText(
@@ -286,9 +305,10 @@ export class Footer<
             ),
             { fontSize }
         ).width
+
         return (
             maxWidth -
-            Math.max(textWidth, licenseAndOriginUrlWidth) -
+            Math.max(topTextWidth, leftTextWidth, licenseAndOriginUrlWidth) -
             HORIZONTAL_PADDING
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/header/Header.tsx b/packages/@ourworldindata/grapher/src/header/Header.tsx
index 44eb70c3481..f1d02911c5d 100644
--- a/packages/@ourworldindata/grapher/src/header/Header.tsx
+++ b/packages/@ourworldindata/grapher/src/header/Header.tsx
@@ -52,14 +52,14 @@ export class Header extends React.Component<{
 
     @computed get title(): TextWrap {
         const { logoWidth } = this
-        const fontSize = this.manager.isSmall
+        const fontSize = this.manager.isNarrow
             ? 18
             : this.manager.isMedium
             ? 20
             : 24
         return new TextWrap({
             maxWidth: this.maxWidth - logoWidth - 24,
-            fontWeight: 500,
+            fontWeight: 600,
             lineHeight: this.manager.isSmall ? 1.1 : 1.2,
             fontSize,
             text: this.titleText,
@@ -137,34 +137,55 @@ export class Header extends React.Component<{
         )
     }
 
-    render(): JSX.Element {
+    private renderTitle(): JSX.Element {
         const { manager } = this
 
-        const subtitleStyle = {
+        // on smaller screens, make the whole width of the header clickable
+        if (manager.isMedium) {
+            return (
+                <a
+                    href={manager.canonicalUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <h1 style={this.title.htmlStyle}>
+                        {this.title.renderHTML()}
+                    </h1>
+                </a>
+            )
+        }
+
+        // on larger screens, only make the title text itself clickable
+        return (
+            <h1 style={this.title.htmlStyle}>
+                <a
+                    href={manager.canonicalUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    {this.title.renderHTML()}
+                </a>
+            </h1>
+        )
+    }
+
+    private renderSubtitle(): JSX.Element {
+        const style = {
             ...this.subtitle.style,
             marginTop: this.subtitleMarginTop,
             // make sure there are no scrollbars on subtitle
             overflowY: "hidden",
         }
+        return <p style={style}>{this.subtitle.renderHTML()}</p>
+    }
 
+    render(): JSX.Element {
         return (
             <div className="HeaderHTML">
                 {this.logo && this.logo.renderHTML()}
                 <div style={{ minHeight: this.height }}>
-                    <a
-                        href={manager.canonicalUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        <h1 style={this.title.htmlStyle}>
-                            {this.title.renderHTML()}
-                        </h1>
-                    </a>
-                    {this.subtitleText && (
-                        <p style={subtitleStyle}>
-                            {this.subtitle.renderHTML()}
-                        </p>
-                    )}
+                    {this.renderTitle()}
+                    {this.subtitleText && this.renderSubtitle()}
                 </div>
             </div>
         )
diff --git a/packages/@ourworldindata/grapher/src/header/HeaderManager.ts b/packages/@ourworldindata/grapher/src/header/HeaderManager.ts
index 16b09fada1c..d38cee38a0d 100644
--- a/packages/@ourworldindata/grapher/src/header/HeaderManager.ts
+++ b/packages/@ourworldindata/grapher/src/header/HeaderManager.ts
@@ -11,6 +11,7 @@ export interface HeaderManager {
     detailsOrderedByReference?: Set<string>
     shouldIncludeDetailsInStaticExport?: boolean
     isExportingtoSvgOrPng?: boolean
+    isNarrow?: boolean
     isSmall?: boolean
     isMedium?: boolean
 }
diff --git a/packages/@ourworldindata/grapher/src/index.ts b/packages/@ourworldindata/grapher/src/index.ts
index 29834b93ce3..9bb22f7376c 100644
--- a/packages/@ourworldindata/grapher/src/index.ts
+++ b/packages/@ourworldindata/grapher/src/index.ts
@@ -18,6 +18,7 @@ export {
     DEFAULT_GRAPHER_WIDTH,
     DEFAULT_GRAPHER_HEIGHT,
     STATIC_EXPORT_DETAIL_SPACING,
+    DEFAULT_GRAPHER_ENTITY_TYPE,
     CookieKey,
     EntitySelectionMode,
     StackMode,
diff --git a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx
index 10ed6eb2a15..671c3e6ee05 100644
--- a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { observer } from "mobx-react"
 import { computed, action, observable } from "mobx"
 import classnames from "classnames"
+import a from "indefinite"
 import {
     Bounds,
     DEFAULT_BOUNDS,
@@ -14,6 +15,7 @@ import { faMagnifyingGlass, faCheck } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { SelectionArray } from "../selection/SelectionArray"
 import { Modal } from "./Modal"
+import { DEFAULT_GRAPHER_ENTITY_TYPE } from "../core/GrapherConstants"
 
 export interface EntitySelectorModalManager {
     selection: SelectionArray
@@ -96,6 +98,10 @@ export class EntitySelectorModal extends React.Component<{
         return !this.manager.canChangeEntity
     }
 
+    @computed private get entityType(): string {
+        return this.manager.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE
+    }
+
     @computed get fuzzy(): FuzzySearch<SearchableEntity> {
         return new FuzzySearch(this.searchableEntities, "name")
     }
@@ -175,8 +181,8 @@ export class EntitySelectorModal extends React.Component<{
             this
 
         const title = isMulti
-            ? `Add/remove ${manager.entityTypePlural || "countries or regions"}`
-            : `Choose ${manager.entityType || "country or region"}`
+            ? `Add/remove ${manager.entityTypePlural}`
+            : `Choose ${a(this.entityType)}`
 
         return (
             <Modal
diff --git a/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss b/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss
index 3348d921ec1..ed10e50616b 100644
--- a/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss
+++ b/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss
@@ -10,6 +10,7 @@ $timelineHeight: 32px;
     $active-knob: #6e87a2;
 
     // start/end year label
+    $light-fill: #f2f2f2;
     $hover-fill: #e7e7e7;
     $active-fill: #dbe5f0;
 
@@ -38,7 +39,7 @@ $timelineHeight: 32px;
         display: grid;
         place-content: center;
         margin-right: 0;
-        border: 1px solid $hover-fill;
+        background-color: $light-fill;
 
         &:hover {
             background: $hover-fill;
diff --git a/packages/@ourworldindata/utils/src/owidTypes.ts b/packages/@ourworldindata/utils/src/owidTypes.ts
index a94cab6a328..ad7c14af89d 100644
--- a/packages/@ourworldindata/utils/src/owidTypes.ts
+++ b/packages/@ourworldindata/utils/src/owidTypes.ts
@@ -537,6 +537,8 @@ export enum ChartControlKeyword {
     alignAxisScalesToggle = "alignAxisScalesToggle",
     xLogLinearSelector = "xLogLinearSelector",
     yLogLinearSelector = "yLogLinearSelector",
+    mapProjectionMenu = "mapProjectionMenu",
+    tableFilterToggle = "​​tableFilterToggle",
 }
 
 export enum ChartTabKeyword {
diff --git a/site/gdocs/Chart.tsx b/site/gdocs/Chart.tsx
index 864684559bd..6cd8d4945b2 100644
--- a/site/gdocs/Chart.tsx
+++ b/site/gdocs/Chart.tsx
@@ -139,6 +139,12 @@ const mapKeywordToGrapherConfig = (
         case ChartControlKeyword.yLogLinearSelector:
             return { hideYScaleToggle: false }
 
+        case ChartControlKeyword.mapProjectionMenu:
+            return { hideMapProjectionMenu: false }
+
+        case ChartControlKeyword.tableFilterToggle:
+            return { hideTableFilterToggle: false }
+
         // tabs
 
         case ChartTabKeyword.chart:
diff --git a/yarn.lock b/yarn.lock
index 48e3a098abe..208eb327bf2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5918,6 +5918,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/indefinite@npm:^2.3.2":
+  version: 2.3.2
+  resolution: "@types/indefinite@npm:2.3.2"
+  checksum: d111c96da67ce18674ea159ca71d0f731fb0a65ce450ef7bf721709e863f24bd48a0a3510c444e97b2c2780abfd421c204751b2f1f942506b10c995ed1470e61
+  languageName: node
+  linkType: hard
+
 "@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.3
   resolution: "@types/istanbul-lib-coverage@npm:2.0.3"
@@ -13885,6 +13892,7 @@ __metadata:
     "@types/fuzzyset": ^1.0.2
     "@types/geojson": ^7946.0.10
     "@types/html-to-text": ^8.1.1
+    "@types/indefinite": ^2.3.2
     "@types/jest": ^29.0.3
     "@types/js-cookie": ^3.0.2
     "@types/js-yaml": ^4.0.5
@@ -13962,6 +13970,7 @@ __metadata:
     handsontable: ^12.3.3
     html-to-text: ^8.2.0
     http-server: ^14.1.1
+    indefinite: ^2.4.3
     instantsearch.js: ^4.56.9
     jest: ^29.0.3
     jest-environment-jsdom: ^29.0.3
@@ -14696,6 +14705,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"indefinite@npm:^2.4.3":
+  version: 2.4.3
+  resolution: "indefinite@npm:2.4.3"
+  checksum: 6d20533628af72a16e852029bcfdd76bf3c38ebbb55ef140fe9fdbd52af30be5a5734960304bd6cb3efa0b82471814b3c5fa03f48ba6cec427a3dca4a034c0e1
+  languageName: node
+  linkType: hard
+
 "indent-string@npm:^3.0.0":
   version: 3.2.0
   resolution: "indent-string@npm:3.2.0"