diff --git a/__tests__/src/components/SearchHit.test.js b/__tests__/src/components/SearchHit.test.js
index 9fd9fdbf7b..7ba0eac5e8 100644
--- a/__tests__/src/components/SearchHit.test.js
+++ b/__tests__/src/components/SearchHit.test.js
@@ -82,6 +82,7 @@ describe('SearchHit', () => {
       wrapper.setProps({ selected: true });
       expect(announcer).toHaveBeenCalledWith(
         'pagination The Canvas Label The Annotation Label Light up the moose , and start the chai',
+        'polite',
       );
     });
 
diff --git a/__tests__/src/components/SearchResults.test.js b/__tests__/src/components/SearchResults.test.js
index ce0603bc1d..73f0c8baa0 100644
--- a/__tests__/src/components/SearchResults.test.js
+++ b/__tests__/src/components/SearchResults.test.js
@@ -30,18 +30,16 @@ describe('SearchResults', () => {
   it('renders a SearchHit for each hit', () => {
     const selectContentSearchAnnotation = jest.fn();
     const wrapper = createWrapper({ selectContentSearchAnnotation });
-    const searchHits = wrapper.find('LiveMessenger').props().children({});
-
+    const searchHits = wrapper.find('Connect(WithStyles(WithPlugins(SearchHit)))');
     expect(searchHits.length).toEqual(1);
-    expect(searchHits[0].type.displayName).toEqual('Connect(WithStyles(WithPlugins(SearchHit)))');
-    expect(searchHits[0].props.index).toEqual(0);
+    expect(searchHits.first().props().index).toEqual(0);
   });
 
   it('can focus on a single item', () => {
     const wrapper = createWrapper({});
-    const searchHits = wrapper.find('LiveMessenger').props().children({});
+    const searchHits = wrapper.find('Connect(WithStyles(WithPlugins(SearchHit)))');
 
-    searchHits[0].props.showDetails();
+    searchHits.first().props().showDetails();
     expect(wrapper.state().focused).toEqual(true);
   });
 
@@ -54,14 +52,6 @@ describe('SearchResults', () => {
     expect(wrapper.state().focused).toEqual(false);
   });
 
-  it('passes announcePolite function to the SearchHits', () => {
-    const announcePolite = jest.fn();
-    const wrapper = createWrapper({});
-    const searchHits = wrapper.find('LiveMessenger').props().children({ announcePolite });
-
-    expect(searchHits[0].props.announcer).toEqual(announcePolite);
-  });
-
   describe('annotation-only search results', () => {
     it('renders a SearchHit for each annotation', () => {
       const wrapper = createWrapper({
@@ -69,13 +59,13 @@ describe('SearchResults', () => {
         searchHits: [],
       });
 
-      const searchHits = wrapper.find('LiveMessenger').props().children({});
+      const searchHits = wrapper.find('Connect(WithStyles(WithPlugins(SearchHit)))');
       expect(searchHits.length).toEqual(2);
-      expect(searchHits[0].props.index).toEqual(0);
-      expect(searchHits[0].props.annotationId).toEqual('x');
+      expect(searchHits.get(0).props.index).toEqual(0);
+      expect(searchHits.get(0).props.annotationId).toEqual('x');
 
-      expect(searchHits[1].props.index).toEqual(1);
-      expect(searchHits[1].props.annotationId).toEqual('y');
+      expect(searchHits.get(1).props.index).toEqual(1);
+      expect(searchHits.get(1).props.annotationId).toEqual('y');
     });
   });
 
diff --git a/__tests__/src/components/Workspace.test.js b/__tests__/src/components/Workspace.test.js
index fc71c76c83..2a9e50cfc0 100644
--- a/__tests__/src/components/Workspace.test.js
+++ b/__tests__/src/components/Workspace.test.js
@@ -1,6 +1,5 @@
 import { shallow } from 'enzyme';
 import Typography from '@material-ui/core/Typography';
-import WorkspaceMosaic from '../../../src/containers/WorkspaceMosaic';
 import WorkspaceElastic from '../../../src/containers/WorkspaceElastic';
 import Window from '../../../src/containers/Window';
 import { Workspace } from '../../../src/components/Workspace';
@@ -17,7 +16,7 @@ function createWrapper(props) {
       isWorkspaceControlPanelVisible
       windowIds={['1', '2']}
       workspaceId="foo"
-      workspaceType="mosaic"
+      workspaceType="elastic"
       t={k => k}
       {...props}
     />,
@@ -39,20 +38,6 @@ describe('Workspace', () => {
       )).toBe(true);
     });
   });
-  describe('if workspace type is mosaic', () => {
-    it('should render <WorkspaceMosaic/> properly', () => {
-      const wrapper = createWrapper();
-
-      expect(wrapper.matchesElement(
-        <IIIFDropTarget>
-          <div className="mirador-workspace-viewport mirador-workspace-with-control-panel">
-            <Typography>miradorViewer</Typography>
-            <WorkspaceMosaic />
-          </div>
-        </IIIFDropTarget>,
-      )).toBe(true);
-    });
-  });
   describe('if workspace type is unknown', () => {
     it('should render <Window/> components as list', () => {
       const wrapper = createWrapper({ workspaceType: 'bubu' });
diff --git a/__tests__/src/components/WorkspaceMosaic.test.js b/__tests__/src/components/WorkspaceMosaic.test.js
deleted file mode 100644
index 9fde83e675..0000000000
--- a/__tests__/src/components/WorkspaceMosaic.test.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import { shallow } from 'enzyme';
-import { MosaicWithoutDragDropContext } from 'react-mosaic-component';
-import MosaicRenderPreview from '../../../src/containers/MosaicRenderPreview';
-import { WorkspaceMosaic } from '../../../src/components/WorkspaceMosaic';
-
-/** create wrapper */
-function createWrapper(props) {
-  return shallow(
-    <WorkspaceMosaic
-      classes={{}}
-      windowIds={[]}
-      workspaceId="foo"
-      updateWorkspaceMosaicLayout={() => {}}
-      {...props}
-    />,
-  );
-}
-
-describe('WorkspaceMosaic', () => {
-  const windowIds = ['1', '2'];
-  let wrapper;
-  beforeEach(() => {
-    wrapper = createWrapper({ windowIds });
-  });
-  it('should render properly with an initialValue', () => {
-    expect(wrapper.find(MosaicWithoutDragDropContext).length).toEqual(1);
-    expect(wrapper.find(MosaicWithoutDragDropContext).prop('initialValue')).toEqual({
-      direction: 'row', first: '1', second: '2',
-    });
-  });
-  describe('componentDidUpdate', () => {
-    it('updates the workspace layout when windows change', () => {
-      const updateWorkspaceMosaicLayout = jest.fn();
-      wrapper = createWrapper({
-        updateWorkspaceMosaicLayout,
-        windowIds,
-      });
-
-      wrapper.setProps({ windowIds: [...windowIds, '3'] });
-
-      expect(updateWorkspaceMosaicLayout).toHaveBeenCalled();
-    });
-    it('updates the workspace layout when windows are removed', () => {
-      const updateWorkspaceMosaicLayout = jest.fn();
-      wrapper = createWrapper({
-        layout: { first: 1, second: 2 },
-        updateWorkspaceMosaicLayout,
-        windowIds,
-      });
-      wrapper.instance().windowPaths = { 2: ['second'] };
-      wrapper.setProps({ windowIds: [1] });
-      expect(updateWorkspaceMosaicLayout).toHaveBeenLastCalledWith(1);
-    });
-    it('when no windows remain', () => {
-      const updateWorkspaceMosaicLayout = jest.fn();
-      wrapper = createWrapper({
-        updateWorkspaceMosaicLayout,
-        windowIds,
-      });
-      wrapper.setProps({ windowIds: [] });
-      expect(updateWorkspaceMosaicLayout).toHaveBeenLastCalledWith(null);
-    });
-    it('when the new and old layouts are the same', () => {
-      const updateWorkspaceMosaicLayout = jest.fn();
-      wrapper = createWrapper({
-        layout: { first: 1, second: 2 },
-        updateWorkspaceMosaicLayout,
-        windowIds,
-      });
-      wrapper.setProps({ layout: { first: 1, second: 2 }, windowIds });
-      expect(updateWorkspaceMosaicLayout).toHaveBeenCalledTimes(1);
-    });
-  });
-  describe('bookkeepPath', () => {
-    it('as windows are rendered keeps a reference to their path in binary tree', () => {
-      wrapper.instance().tileRenderer('1', 'foo');
-      expect(wrapper.instance().windowPaths).toEqual({ 1: 'foo' });
-    });
-  });
-  describe('determineWorkspaceLayout', () => {
-    it('when window ids do not match workspace layout', () => {
-      wrapper = createWrapper({ layout: {}, windowIds });
-      expect(wrapper.instance().determineWorkspaceLayout()).toMatchObject({
-        direction: 'row', first: '1', second: '2',
-      });
-    });
-    it('by default use workspace.layout', () => {
-      wrapper = createWrapper({ layout: {}, windowIds: ['foo'] });
-      expect(wrapper.instance().determineWorkspaceLayout()).toEqual('foo');
-    });
-    it('generates a new layout if windows do not match current layout', () => {
-      wrapper = createWrapper({ layout: { first: 'foo', second: 'bark' }, windowIds: ['foo'] });
-      expect(wrapper.instance().determineWorkspaceLayout()).toEqual('foo');
-    });
-    it('when window ids match workspace layout', () => {
-      wrapper = createWrapper({ layout: {}, windowIds: ['foo'] });
-      expect(wrapper.instance().determineWorkspaceLayout()).toBe('foo');
-    });
-  });
-  describe('tileRenderer', () => {
-    it('when window is available', () => {
-      const renderedTile = wrapper.instance().tileRenderer('1', 'foo');
-      expect(renderedTile).not.toBeNull();
-      expect(shallow(renderedTile).find('DropTarget(DragSource(InternalMosaicWindow))').length).toEqual(1);
-      expect(shallow(renderedTile).props()).toEqual(expect.objectContaining({
-        additionalControls: [],
-        path: 'foo',
-        toolbarControls: [],
-      }));
-
-      expect(shallow(shallow(renderedTile).props().renderPreview({ windowId: 1 })).matchesElement(
-        <div className="mosaic-preview" aria-hidden>
-          <MosaicRenderPreview windowId={1} />
-        </div>,
-      )).toBe(true);
-    });
-    it('when window is not available', () => {
-      expect(wrapper.instance().tileRenderer('bar')).toBeNull();
-    });
-  });
-  describe('mosaicChange', () => {
-    it('calls the provided prop to update layout', () => {
-      const updateWorkspaceMosaicLayout = jest.fn();
-      wrapper = createWrapper({
-        updateWorkspaceMosaicLayout,
-        windowIds,
-      });
-
-      wrapper.instance().mosaicChange();
-      expect(updateWorkspaceMosaicLayout).toBeCalled();
-    });
-  });
-});
diff --git a/__tests__/src/lib/MosaicLayout.test.js b/__tests__/src/lib/MosaicLayout.test.js
deleted file mode 100644
index a364e77393..0000000000
--- a/__tests__/src/lib/MosaicLayout.test.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import MosaicLayout from '../../../src/lib/MosaicLayout';
-
-describe('MosaicLayout', () => {
-  describe('constructor', () => {
-    it('sets layout', () => {
-      expect(new MosaicLayout('foo').layout).toEqual('foo');
-    });
-  });
-  describe('addWindows', () => {
-    let instance;
-    beforeEach(() => {
-      instance = new MosaicLayout('foo');
-    });
-    it('case 1 window: adds to the top right', () => {
-      expect(instance.layout).toEqual('foo');
-      instance.addWindows(['bar']);
-      expect(instance.layout).toEqual({
-        direction: 'row',
-        first: 'foo',
-        second: 'bar',
-      });
-    });
-    it('case 3 windows: adds to the top right', () => {
-      expect(instance.layout).toEqual('foo');
-      instance.addWindows(['bar', 'bat', 'bark']);
-      expect(instance.layout).toEqual({
-        direction: 'row',
-        first: 'foo',
-        second: {
-          direction: 'column',
-          first: {
-            direction: 'row',
-            first: 'bat',
-            second: 'bark',
-          },
-          second: 'bar',
-        },
-      });
-    });
-  });
-  describe('removeWindows', () => {
-    let instance;
-    beforeEach(() => {
-      instance = new MosaicLayout({ first: 'foo', second: 'bar' });
-    });
-    it('case 1 window: returns a single window', () => {
-      instance.removeWindows(['bar'], { bar: ['second'] });
-      expect(instance.layout).toEqual('foo');
-    });
-  });
-});
diff --git a/jest.json b/jest.json
index 11e5bf3bf4..c0363c0df1 100644
--- a/jest.json
+++ b/jest.json
@@ -11,6 +11,9 @@
     "\\.s?css$": "<rootDir>/__mocks__/css.js",
     "^uuid$": "uuid"
   },
+  "transformIgnorePatterns": [
+    "<rootDir>/node_modules/(?!@react-dnd|react-dnd|dnd-core|react-dnd-html5-backend|dnd-multi-backend|rdndmb-html5-to-touch)"
+  ],
   "setupFiles": [
     "<rootDir>/setupJest.js"
   ],
diff --git a/package.json b/package.json
index b0fe3f6342..bc710ec317 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.53",
+    "@react-aria/live-announcer": "^3.1.2",
     "classnames": "^2.2.6",
     "clsx": "^1.0.4",
     "deepmerge": "^4.2.2",
@@ -46,21 +47,21 @@
     "jss-rtl": "^0.3.0",
     "lodash": "^4.17.11",
     "manifesto.js": "^4.2.0",
+    "mirador-mosaic": "^0.0.1",
     "normalize-url": "^4.5.0",
     "openseadragon": "^2.4.2 || ^3.0.0 || ^4.0.0",
     "prop-types": "^15.6.2",
+    "rdndmb-html5-to-touch": "^8.0.0",
     "re-reselect": "^4.0.0",
-    "react-aria-live": "^2.0.5",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
-    "react-dnd-multi-backend": "^5.0.0",
-    "react-dnd-touch-backend": "^10.0.2",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-multi-backend": "^8.0.0",
+    "react-dnd-touch-backend": "^16.0.1",
     "react-full-screen": "^1.1.1",
     "react-i18next": "^11.7.0 || ^12.0.0",
     "react-image": "^4.0.1",
     "react-intersection-observer": "^9.0.0",
-    "react-mosaic-component": "^4.0.1",
     "react-redux": "^7.1.0 || ^8.0.0",
     "react-resize-observer": "^1.1.1",
     "react-rnd": "^10.1",
@@ -87,6 +88,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-jest": "^29.3.1",
     "babel-loader": "^9.1.0",
     "babel-plugin-lodash": "^3.3.4",
@@ -96,7 +98,6 @@
     "chalk": "^4.1.0",
     "core-js": "^3.21.1",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.0",
     "eslint": "^8.11.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-react-app": "^7.0.0",
@@ -114,8 +115,8 @@
     "jsdom": "^21.0.0",
     "puppeteer": "^19.0.0",
     "raf": "^3.4.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-refresh": "^0.14.0",
     "redux-mock-store": "^1.5.1",
     "redux-saga-test-plan": "^4.0.0-rc.3",
@@ -125,7 +126,12 @@
     "webpack-dev-server": "^4.7.4"
   },
   "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "overrides": {
+    "babel-plugin-lodash": {
+      "@babel/types": "~7.20.0"
+    }
   }
 }
diff --git a/setupJest.js b/setupJest.js
index 23d77f5f6a..4ee5ca971b 100644
--- a/setupJest.js
+++ b/setupJest.js
@@ -4,7 +4,7 @@ import { JSDOM } from 'jsdom'; // eslint-disable-line import/no-extraneous-depen
 import raf from 'raf'; // eslint-disable-line import/no-extraneous-dependencies
 import fetchMock from 'jest-fetch-mock'; // eslint-disable-line import/no-extraneous-dependencies
 import Enzyme from 'enzyme'; // eslint-disable-line import/no-extraneous-dependencies
-import Adapter from 'enzyme-adapter-react-16'; // eslint-disable-line import/no-extraneous-dependencies
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; // eslint-disable-line import/no-extraneous-dependencies
 
 const jsdom = new JSDOM('<!doctype html><html><body><div id="main"></div></body></html>', { url: 'https://localhost' });
 const { window } = jsdom;
diff --git a/src/components/AppProviders.js b/src/components/AppProviders.js
index aab7a26ed7..1ef4cf2b29 100644
--- a/src/components/AppProviders.js
+++ b/src/components/AppProviders.js
@@ -2,13 +2,12 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 import { I18nextProvider } from 'react-i18next';
-import { LiveAnnouncer } from 'react-aria-live';
 import {
   ThemeProvider, StylesProvider, createTheme, jssPreset, createGenerateClassName,
 } from '@material-ui/core/styles';
 import { DndContext, DndProvider } from 'react-dnd';
-import MultiBackend from 'react-dnd-multi-backend';
-import HTML5toTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';
+import { MultiBackend } from 'react-dnd-multi-backend';
+import { HTML5toTouch } from 'rdndmb-html5-to-touch';
 import { create } from 'jss';
 import rtl from 'jss-rtl';
 import createI18nInstance from '../i18n';
@@ -115,20 +114,18 @@ export class AppProviders extends Component {
     return (
       <FullScreenShim>
         <I18nextProvider i18n={this.i18n}>
-          <LiveAnnouncer>
-            <ThemeProvider
-              theme={createTheme(theme)}
+          <ThemeProvider
+            theme={createTheme(theme)}
+          >
+            <StylesProvider
+              jss={create({ plugins: [...jssPreset().plugins, rtl()] })}
+              generateClassName={generateClassName}
             >
-              <StylesProvider
-                jss={create({ plugins: [...jssPreset().plugins, rtl()] })}
-                generateClassName={generateClassName}
-              >
-                <MaybeDndProvider dndManager={dndManager}>
-                  {children}
-                </MaybeDndProvider>
-              </StylesProvider>
-            </ThemeProvider>
-          </LiveAnnouncer>
+              <MaybeDndProvider dndManager={dndManager}>
+                {children}
+              </MaybeDndProvider>
+            </StylesProvider>
+          </ThemeProvider>
         </I18nextProvider>
       </FullScreenShim>
     );
diff --git a/src/components/SearchHit.js b/src/components/SearchHit.js
index 7feac2d974..70f4d2b640 100644
--- a/src/components/SearchHit.js
+++ b/src/components/SearchHit.js
@@ -55,17 +55,20 @@ export class SearchHit extends Component {
     const {
       annotation, annotationLabel, announcer, canvasLabel, hit, index, t, total,
     } = this.props;
-    if (!hit) return;
+    if (!hit || !announcer) return;
     const truncatedHit = new TruncatedHit(hit, annotation);
 
-    announcer([
-      t('pagination', { current: index + 1, total }),
-      canvasLabel,
-      annotationLabel,
-      truncatedHit.before,
-      truncatedHit.match,
-      truncatedHit.after,
-    ].join(' '));
+    announcer(
+      [
+        t('pagination', { current: index + 1, total }),
+        canvasLabel,
+        annotationLabel,
+        truncatedHit.before,
+        truncatedHit.match,
+        truncatedHit.after,
+      ].join(' '),
+      'polite',
+    );
   }
 
   /** */
@@ -157,7 +160,7 @@ SearchHit.propTypes = {
   }),
   annotationId: PropTypes.string,
   annotationLabel: PropTypes.string,
-  announcer: PropTypes.func.isRequired,
+  announcer: PropTypes.func,
   canvasLabel: PropTypes.string,
   classes: PropTypes.objectOf(PropTypes.string),
   companionWindowId: PropTypes.string,
@@ -186,6 +189,7 @@ SearchHit.defaultProps = {
   annotation: undefined,
   annotationId: undefined,
   annotationLabel: undefined,
+  announcer: undefined,
   canvasLabel: undefined,
   classes: {},
   companionWindowId: undefined,
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 912f908474..c38e5c082a 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button';
 import List from '@material-ui/core/List';
 import Typography from '@material-ui/core/Typography';
 import BackIcon from '@material-ui/icons/ArrowBackSharp';
-import { LiveMessenger } from 'react-aria-live';
+import { announce } from '@react-aria/live-announcer';
 import SearchHit from '../containers/SearchHit';
 import { ScrollTo } from './ScrollTo';
 
@@ -32,7 +32,7 @@ export class SearchResults extends Component {
    * Return SearchHits for every hit in the response
    * Return SearchHits for every annotation in the response if there are no hits
    */
-  renderSearchHitsAndAnnotations(announcer) {
+  renderSearchHitsAndAnnotations() {
     const {
       companionWindowId,
       containerRef,
@@ -47,7 +47,7 @@ export class SearchResults extends Component {
     if (searchHits.length === 0 && searchAnnotations.length > 0) {
       return searchAnnotations.map((anno, index) => (
         <SearchHit
-          announcer={announcer}
+          announcer={announce}
           annotationId={anno.id}
           companionWindowId={companionWindowId}
           containerRef={containerRef}
@@ -63,7 +63,7 @@ export class SearchResults extends Component {
 
     return searchHits.map((hit, index) => (
       <SearchHit
-        announcer={announcer}
+        announcer={announce}
         containerRef={containerRef}
         companionWindowId={companionWindowId}
         key={hit.annotations[0]}
@@ -118,9 +118,7 @@ export class SearchResults extends Component {
           </Typography>
         )}
         <List disablePadding>
-          <LiveMessenger>
-            {({ announcePolite }) => this.renderSearchHitsAndAnnotations(announcePolite) }
-          </LiveMessenger>
+          { this.renderSearchHitsAndAnnotations() }
         </List>
         { nextSearch && (
           <Button
diff --git a/src/components/Window.js b/src/components/Window.js
index 6033c76919..8eb96d45d8 100644
--- a/src/components/Window.js
+++ b/src/components/Window.js
@@ -2,7 +2,6 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import Paper from '@material-ui/core/Paper';
-import { MosaicWindowContext } from 'react-mosaic-component/lib/contextTypes';
 import ns from '../config/css-ns';
 import WindowTopBar from '../containers/WindowTopBar';
 import PrimaryWindow from '../containers/PrimaryWindow';
@@ -35,24 +34,19 @@ export class Window extends Component {
    */
   wrappedTopBar() {
     const {
-      windowId, workspaceType, windowDraggable,
+      dragHandle, windowId, windowDraggable,
     } = this.props;
 
     const topBar = (
-      <div>
+      <div ref={dragHandle}>
         <WindowTopBar
           windowId={windowId}
           windowDraggable={windowDraggable}
+          dragHandle={dragHandle}
         />
         <IIIFAuthentication windowId={windowId} />
       </div>
     );
-    if (workspaceType === 'mosaic' && windowDraggable) {
-      const { mosaicWindowActions } = this.context;
-      return mosaicWindowActions.connectDragSource(
-        topBar,
-      );
-    }
     return topBar;
   }
 
@@ -119,10 +113,12 @@ export class Window extends Component {
   }
 }
 
-Window.contextType = MosaicWindowContext;
-
 Window.propTypes = {
   classes: PropTypes.objectOf(PropTypes.string),
+  dragHandle: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
   focusWindow: PropTypes.func,
   isFetching: PropTypes.bool,
   label: PropTypes.string,
@@ -133,11 +129,11 @@ Window.propTypes = {
   view: PropTypes.string,
   windowDraggable: PropTypes.bool,
   windowId: PropTypes.string.isRequired,
-  workspaceType: PropTypes.string,
 };
 
 Window.defaultProps = {
   classes: {},
+  dragHandle: null,
   focusWindow: () => {},
   isFetching: false,
   label: null,
@@ -146,5 +142,4 @@ Window.defaultProps = {
   sideBarOpen: false,
   view: undefined,
   windowDraggable: null,
-  workspaceType: null,
 };
diff --git a/src/components/Workspace.js b/src/components/Workspace.js
index f99f61d4e4..f72dad24b2 100644
--- a/src/components/Workspace.js
+++ b/src/components/Workspace.js
@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Window from '../containers/Window';
-import WorkspaceMosaic from '../containers/WorkspaceMosaic';
 import WorkspaceElastic from '../containers/WorkspaceElastic';
+import WorkspaceGrid from '../containers/WorkspaceGrid';
 import ns from '../config/css-ns';
 import { IIIFDropTarget } from './IIIFDropTarget';
 
@@ -45,8 +45,8 @@ export class Workspace extends Component {
     switch (workspaceType) {
       case 'elastic':
         return <WorkspaceElastic />;
-      case 'mosaic':
-        return <WorkspaceMosaic />;
+      case 'grid':
+        return <WorkspaceGrid />;
       default:
         return windowIds.map(windowId => (
           <Window
diff --git a/src/components/WorkspaceGrid.js b/src/components/WorkspaceGrid.js
new file mode 100644
index 0000000000..e0735eb073
--- /dev/null
+++ b/src/components/WorkspaceGrid.js
@@ -0,0 +1,51 @@
+import { useContext, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { DndContext } from 'react-dnd';
+import { Grid, GridContext, GridDispatchContext } from 'mirador-mosaic';
+import Window from '../containers/Window';
+
+/**
+ * Represents a work area that contains any number of windows
+ * @memberof Workspace
+ * @private
+ */
+const WorkspaceGrid = ({ gridTemplate, windowIds }) => {
+  const { dragDropManager } = useContext(DndContext);
+  const dispatch = useDispatch();
+
+  const wrappedDispatch = useCallback((action) => {
+    dispatch({ ...action, type: `mirador/grid/${action.type}` });
+  }, [dispatch]);
+
+  return (
+    <div style={{ height: '100%', position: 'relative', width: '100%' }}>
+      <GridContext.Provider value={gridTemplate}>
+        <GridDispatchContext.Provider value={wrappedDispatch}>
+          <Grid dragAndDropManager={dragDropManager}>
+            {
+              windowIds.map(windowId => (
+                <Window
+                  id={windowId}
+                  key={windowId}
+                  windowId={windowId}
+                />
+              ))
+            }
+          </Grid>
+        </GridDispatchContext.Provider>
+      </GridContext.Provider>
+    </div>
+  );
+};
+
+WorkspaceGrid.propTypes = {
+  gridTemplate: PropTypes.shape({
+    areas: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+    columns: PropTypes.arrayOf(PropTypes.number),
+    rows: PropTypes.arrayOf(PropTypes.number),
+  }).isRequired,
+  windowIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default WorkspaceGrid;
diff --git a/src/components/WorkspaceMosaic.js b/src/components/WorkspaceMosaic.js
deleted file mode 100644
index 620a8f6015..0000000000
--- a/src/components/WorkspaceMosaic.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  MosaicWithoutDragDropContext, MosaicWindow, getLeaves, createBalancedTreeFromLeaves,
-} from 'react-mosaic-component';
-import difference from 'lodash/difference';
-import isEqual from 'lodash/isEqual';
-import classNames from 'classnames';
-import MosaicRenderPreview from '../containers/MosaicRenderPreview';
-import Window from '../containers/Window';
-import MosaicLayout from '../lib/MosaicLayout';
-
-/**
- * Represents a work area that contains any number of windows
- * @memberof Workspace
- * @private
- */
-export class WorkspaceMosaic extends Component {
-  /**
-   */
-  constructor(props) {
-    super(props);
-
-    this.tileRenderer = this.tileRenderer.bind(this);
-    this.mosaicChange = this.mosaicChange.bind(this);
-    this.determineWorkspaceLayout = this.determineWorkspaceLayout.bind(this);
-    this.zeroStateView = <div />;
-    this.windowPaths = {};
-    this.toolbarControls = [];
-    this.additionalControls = [];
-  }
-
-  /** */
-  componentDidMount() {
-    const { updateWorkspaceMosaicLayout } = this.props;
-
-    const newLayout = this.determineWorkspaceLayout();
-    if (newLayout) updateWorkspaceMosaicLayout(newLayout);
-  }
-
-  /** */
-  componentDidUpdate(prevProps) {
-    const { windowIds, layout, updateWorkspaceMosaicLayout } = this.props;
-    const prevWindows = prevProps.windowIds;
-    // Handles when Windows are added (not via Add Resource UI) Could be a workspace import
-    if (!windowIds.every(e => prevWindows.includes(e))) {
-      const newLayout = this.determineWorkspaceLayout();
-      if (!isEqual(newLayout, layout)) updateWorkspaceMosaicLayout(newLayout);
-      return;
-    }
-
-    // Handles when Windows are removed from the state
-    if (!prevWindows.every(e => windowIds.includes(e))) {
-      // There are no more remaining Windows, just return an empty layout
-      if (windowIds.length === 0) {
-        updateWorkspaceMosaicLayout(null);
-        return;
-      }
-
-      const removedWindows = difference(prevWindows, windowIds);
-      const newLayout = new MosaicLayout(layout);
-      newLayout.removeWindows(removedWindows, this.windowPaths);
-      updateWorkspaceMosaicLayout(newLayout.layout);
-    }
-  }
-
-  /**
-   * bookkeepPath - used to book keep Window's path's
-   * @param  {String} windowId   [description]
-   * @param  {Array} path [description]
-   */
-  bookkeepPath(windowId, path) {
-    this.windowPaths[windowId] = path;
-  }
-
-  /**
-   * Used to determine whether or not a "new" layout should be autogenerated.
-   */
-  determineWorkspaceLayout() {
-    const { windowIds, layout } = this.props;
-    const leaveKeys = getLeaves(layout);
-    // Windows were added
-    if (!windowIds.every(e => leaveKeys.includes(e))) {
-      // No current layout, so just generate a new one
-      if (leaveKeys.length < 2) {
-        return createBalancedTreeFromLeaves(windowIds);
-      }
-      // Add new windows to layout
-      const addedWindows = difference(windowIds, leaveKeys);
-      const newLayout = new MosaicLayout(layout);
-      newLayout.addWindows(addedWindows);
-      return newLayout.layout;
-    }
-    // Windows were removed (perhaps in a different Workspace). We don't have a
-    // way to reconfigure.. so we have to random generate
-    if (!leaveKeys.every(e => windowIds.includes(e))) {
-      return createBalancedTreeFromLeaves(windowIds);
-    }
-    return layout;
-  }
-
-  /** */
-  static renderPreview(mosaicProps) {
-    return (
-      <div className="mosaic-preview" aria-hidden>
-        <MosaicRenderPreview windowId={mosaicProps.windowId} />
-      </div>
-    );
-  }
-
-  /**
-   * Render a tile (Window) in the Mosaic.
-   */
-  tileRenderer(id, path) {
-    const { windowIds, workspaceId } = this.props;
-    if (!windowIds.includes(id)) return null;
-    this.bookkeepPath(id, path);
-    return (
-      <MosaicWindow
-        toolbarControls={this.toolbarControls}
-        additionalControls={this.additionalControls}
-        path={path}
-        windowId={id}
-        renderPreview={WorkspaceMosaic.renderPreview}
-      >
-        <Window
-          key={`${id}-${workspaceId}`}
-          windowId={id}
-        />
-      </MosaicWindow>
-    );
-  }
-
-  /**
-   * Update the redux store when the Mosaic is changed.
-   */
-  mosaicChange(newLayout) {
-    const { updateWorkspaceMosaicLayout } = this.props;
-    updateWorkspaceMosaicLayout(newLayout);
-  }
-
-  /**
-   */
-  render() {
-    const { layout, classes } = this.props;
-    return (
-      <MosaicWithoutDragDropContext
-        renderTile={this.tileRenderer}
-        initialValue={layout || this.determineWorkspaceLayout()}
-        onChange={this.mosaicChange}
-        className={classNames('mirador-mosaic', classes.root)}
-        zeroStateView={this.zeroStateView}
-      />
-    );
-  }
-}
-
-WorkspaceMosaic.propTypes = {
-  classes: PropTypes.objectOf(PropTypes.string).isRequired,
-  layout: PropTypes.oneOfType(
-    [PropTypes.object, PropTypes.string],
-  ), // eslint-disable-line react/forbid-prop-types
-  updateWorkspaceMosaicLayout: PropTypes.func.isRequired,
-  windowIds: PropTypes.arrayOf(PropTypes.string),
-  workspaceId: PropTypes.string.isRequired,
-};
-
-WorkspaceMosaic.defaultProps = {
-  layout: undefined,
-  windowIds: [],
-};
diff --git a/src/components/WorkspaceSelectionDialog.js b/src/components/WorkspaceSelectionDialog.js
index 839c227efe..9e2351a5fc 100644
--- a/src/components/WorkspaceSelectionDialog.js
+++ b/src/components/WorkspaceSelectionDialog.js
@@ -119,6 +119,28 @@ export class WorkspaceSelectionDialog extends Component {
                 </div>
               </Card>
             </MenuItem>
+            <MenuItem
+              className={classes.menuItem}
+              onClick={() => this.handleWorkspaceTypeChange('grid')}
+              selected={workspaceType === 'grid'}
+              value="grid"
+            >
+              <Card className={classes.card}>
+                <WorkspaceTypeMosaicIcon
+                  className={classes.svgIcon}
+                  viewBox="0 0 120 90"
+                />
+                <div className={classes.details}>
+                  <CardContent
+                    className={classes.content}
+                    classes={{ root: classes.root }}
+                  >
+                    <Typography className={classes.headline} component="p" variant="h3">{t('grid')}</Typography>
+                    <Typography variant="body1">{t('gridDescription')}</Typography>
+                  </CardContent>
+                </div>
+              </Card>
+            </MenuItem>
           </MenuList>
         </ScrollIndicatedDialogContent>
       </Dialog>
diff --git a/src/config/settings.js b/src/config/settings.js
index 839e673708..1e6d198d24 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -323,7 +323,7 @@ export default {
     exposeModeOn: false, // unused?
     height: 5000, // height of the elastic mode's virtual canvas
     showZoomControls: false, // Configure if zoom controls should be displayed by default
-    type: 'mosaic', // Which workspace type to load by default. Other possible values are "elastic". If "mosaic" or "elastic" are not selected no worksapce type will be used.
+    type: 'grid', // Which workspace type to load by default. Other possible values are "elastic". If "mosaic" or "elastic" are not selected no worksapce type will be used.
     viewportPosition: { // center coordinates for the elastic mode workspace
       x: 0,
       y: 0,
diff --git a/src/containers/WorkspaceGrid.js b/src/containers/WorkspaceGrid.js
new file mode 100644
index 0000000000..310a654d9f
--- /dev/null
+++ b/src/containers/WorkspaceGrid.js
@@ -0,0 +1,36 @@
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import { withPlugins } from '../extend/withPlugins';
+import { getWorkspace } from '../state/selectors';
+import WorkspaceGrid from '../components/WorkspaceGrid';
+
+/**
+ * mapStateToProps - to hook up connect
+ * @memberof Workspace
+ * @private
+ */
+const mapStateToProps = state => (
+  {
+    gridTemplate: state.gridLayout,
+    windowIds: getWorkspace(state).windowIds,
+  }
+);
+
+/**
+ * mapDispatchToProps - used to hook up connect to action creators
+ * @memberof Workspace
+ * @private
+ */
+const mapDispatchToProps = {};
+
+const styles = {};
+
+const enhance = compose(
+  withStyles(styles),
+  connect(mapStateToProps, mapDispatchToProps),
+  withPlugins('WorkspaceGrid'),
+  // further HOC go here
+);
+
+export default enhance(WorkspaceGrid);
diff --git a/src/containers/WorkspaceMosaic.js b/src/containers/WorkspaceMosaic.js
deleted file mode 100644
index b66e2f4aa6..0000000000
--- a/src/containers/WorkspaceMosaic.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { compose } from 'redux';
-import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
-import { withPlugins } from '../extend/withPlugins';
-import { getWorkspace } from '../state/selectors';
-import * as actions from '../state/actions';
-import { WorkspaceMosaic } from '../components/WorkspaceMosaic';
-import globalReactMosaicStyles from '../styles/react-mosaic-component';
-
-/**
- * mapStateToProps - to hook up connect
- * @memberof Workspace
- * @private
- */
-const mapStateToProps = state => (
-  {
-    layout: getWorkspace(state).layout,
-    windowIds: getWorkspace(state).windowIds,
-    workspaceId: getWorkspace(state).id,
-  }
-);
-
-/**
- * mapDispatchToProps - used to hook up connect to action creators
- * @memberof Workspace
- * @private
- */
-const mapDispatchToProps = { updateWorkspaceMosaicLayout: actions.updateWorkspaceMosaicLayout };
-
-const styles = {
-  root: {
-    '& .mosaic-preview': {
-      boxShadow: 'none',
-    },
-    '& .mosaic-tile': {
-      boxShadow: '0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .2), 0 2px 1px -1px rgba(0, 0, 0, .2)',
-    },
-    '& .mosaic-window': {
-      boxShadow: 'none',
-    },
-    '& .mosaic-window-toolbar': {
-      display: 'none !important',
-    },
-  },
-  ...globalReactMosaicStyles,
-};
-
-const enhance = compose(
-  withStyles(styles),
-  connect(mapStateToProps, mapDispatchToProps),
-  withPlugins('WorkspaceMosaic'),
-  // further HOC go here
-);
-
-export default enhance(WorkspaceMosaic);
diff --git a/src/lib/MosaicLayout.js b/src/lib/MosaicLayout.js
deleted file mode 100644
index c64710a7c3..0000000000
--- a/src/lib/MosaicLayout.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import { createRemoveUpdate, updateTree } from 'react-mosaic-component/lib/util/mosaicUpdates';
-import {
-  getNodeAtPath, getOtherDirection, getPathToCorner, Corner,
-} from 'react-mosaic-component/lib/util/mosaicUtilities';
-import dropRight from 'lodash/dropRight';
-
-/** */
-export default class MosaicLayout {
-  /** */
-  constructor(layout) {
-    this.layout = layout;
-  }
-
-  /** */
-  pathToCorner(corner = Corner.TOP_RIGHT) {
-    return getPathToCorner(this.layout, corner);
-  }
-
-  /** */
-  pathToParent(path) {
-    return getNodeAtPath(this.layout, dropRight(path));
-  }
-
-  /** */
-  nodeAtPath(path) {
-    return getNodeAtPath(this.layout, path);
-  }
-
-  /**
-   * addWindows - updates the layout with new windows using an algorithm ported
-   * from the react-mosaic-components examples. Will always add to the Top Right
-   * https://github.com/nomcopter/react-mosaic/blob/5081df8d1528d4c3b83a72763a46a30b3048fe95/demo/ExampleApp.tsx#L119-L154
-   * @param {Array} addedWindowIds [description]
-   */
-  addWindows(addedWindowIds) {
-    addedWindowIds.forEach((windowId, i) => {
-      const path = this.pathToCorner();
-      const parent = this.pathToParent(path);
-      const destination = this.nodeAtPath(path);
-      const direction = parent ? getOtherDirection(parent.direction) : 'row';
-      let first;
-      let second;
-      if (direction === 'row') {
-        first = destination;
-        second = addedWindowIds[i];
-      } else {
-        first = addedWindowIds[i];
-        second = destination;
-      }
-      const update = {
-        path,
-        spec: {
-          $set: {
-            direction,
-            first,
-            second,
-          },
-        },
-      };
-      // We cannot batch the updates together because we need to recalculate
-      // the new location for each new window
-      this.layout = updateTree(this.layout, [update]);
-    });
-  }
-
-  /**
-   * removeWindows - Generate a set of "removeUpdates" to update layout binary
-   * tree. Then update the layout.
-   * @param  {Array} removedWindowIds
-   * @param  {Object} windowPaths - a lookup table for window paths
-   */
-  removeWindows(removedWindowIds, windowPaths) {
-    const removeUpdates = removedWindowIds
-      .map(windowId => (
-        createRemoveUpdate(this.layout, windowPaths[windowId])
-      ));
-    this.layout = updateTree(this.layout, removeUpdates);
-  }
-}
diff --git a/src/state/reducers/gridLayout.js b/src/state/reducers/gridLayout.js
new file mode 100644
index 0000000000..6ac5470e46
--- /dev/null
+++ b/src/state/reducers/gridLayout.js
@@ -0,0 +1,17 @@
+import { reducer } from 'mirador-mosaic';
+import ActionTypes from '../actions/action-types';
+
+/**
+ * gridLayoutReducer
+ */
+export const gridLayoutReducer = (state = { areas: [], columns: [], rows: [] }, action) => {
+  switch (action.type) {
+    case ActionTypes.ADD_WINDOW:
+      return reducer(state, { id: action.window.id, type: 'add' });
+    case ActionTypes.IMPORT_MIRADOR_STATE:
+      return action.state.gridLayout || {};
+    default:
+      if (!action.type.startsWith('mirador/grid')) return state;
+      return reducer(state, { ...action, type: action.type.replace('mirador/grid/', '') });
+  }
+};
diff --git a/src/state/reducers/index.js b/src/state/reducers/index.js
index 7e361c2203..6568da3c4e 100644
--- a/src/state/reducers/index.js
+++ b/src/state/reducers/index.js
@@ -13,3 +13,4 @@ export * from './elasticLayout';
 export * from './search';
 export * from './layers';
 export * from './catalog';
+export * from './gridLayout';
diff --git a/src/state/reducers/rootReducer.js b/src/state/reducers/rootReducer.js
index c1f808ac8e..6a2f6c3725 100644
--- a/src/state/reducers/rootReducer.js
+++ b/src/state/reducers/rootReducer.js
@@ -15,6 +15,7 @@ import {
   searchesReducer,
   layersReducer,
   catalogReducer,
+  gridLayoutReducer,
 } from '.';
 
 /**
@@ -32,6 +33,7 @@ export default function createRootReducer(pluginReducers) {
     config: configReducer,
     elasticLayout: elasticLayoutReducer,
     errors: errorsReducer,
+    gridLayout: gridLayoutReducer,
     infoResponses: infoResponsesReducer,
     layers: layersReducer,
     manifests: manifestsReducer,
diff --git a/webpack.config.js b/webpack.config.js
index d33c348329..f31af73184 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -46,8 +46,6 @@ const baseConfig = mode => ({
   ],
   resolve: {
     alias: {
-      // needs shared global state for context to work
-      'react-dnd': path.resolve(path.join(__dirname, 'node_modules', 'react-dnd')),
       'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
       'react/jsx-runtime': 'react/jsx-runtime.js',
     },