diff --git a/extensions/default/src/getCommandsModule.js b/extensions/default/src/getCommandsModule.js
index d9091a789..325825ef2 100644
--- a/extensions/default/src/getCommandsModule.js
+++ b/extensions/default/src/getCommandsModule.js
@@ -3,15 +3,16 @@
 import React from 'react';
 import { useViewportGrid } from '@ohif/ui';
 
-
-function getCommandsModule ({ servicesManager }) {
+function getCommandsModule({ servicesManager }) {
   const { UIDialogService } = servicesManager.services;
 
   const definitions = {
     toggleLayoutSelectionDialog: {
       commandFn: () => {
         if (!UIDialogService) {
-          window.alert('Unable to show dialog; no UI Dialog Service available.');
+          window.alert(
+            'Unable to show dialog; no UI Dialog Service available.'
+          );
           return;
         }
 
@@ -27,13 +28,12 @@ function getCommandsModule ({ servicesManager }) {
           showOverlay: true,
           content: Test,
         });
-
       },
       storeContexts: [],
       options: {},
       context: 'VIEWER',
     },
-  }
+  };
 
   return {
     definitions,
@@ -47,19 +47,22 @@ function Test() {
     dispatch,
   ] = useViewportGrid();
 
-  return <div
-    onClick={() => {
-      dispatch({ type: '', payload: {
-        numCols: 2,
-        numRows: 2,
-        activeViewportIndex: 0,
-        viewports: [],
-      }})
-    }}
-    style={{ color: 'white' }}
-  >
-    Hello World!
-  </div>
+  return (
+    <div
+      onClick={() => {
+        dispatch({
+          type: 'SET_LAYOUT',
+          payload: {
+            numCols: 2,
+            numRows: 2,
+          },
+        });
+      }}
+      style={{ color: 'white' }}
+    >
+      Hello World!
+    </div>
+  );
 }
 
 export default getCommandsModule;
diff --git a/extensions/measurement-tracking/src/getCommandsModule.js b/extensions/measurement-tracking/src/getCommandsModule.js
index 066a213a2..325825ef2 100644
--- a/extensions/measurement-tracking/src/getCommandsModule.js
+++ b/extensions/measurement-tracking/src/getCommandsModule.js
@@ -10,7 +10,9 @@ function getCommandsModule({ servicesManager }) {
     toggleLayoutSelectionDialog: {
       commandFn: () => {
         if (!UIDialogService) {
-          window.alert('Unable to show dialog; no UI Dialog Service available.');
+          window.alert(
+            'Unable to show dialog; no UI Dialog Service available.'
+          );
           return;
         }
 
@@ -26,13 +28,12 @@ function getCommandsModule({ servicesManager }) {
           showOverlay: true,
           content: Test,
         });
-
       },
       storeContexts: [],
       options: {},
       context: 'VIEWER',
     },
-  }
+  };
 
   return {
     definitions,
@@ -46,19 +47,22 @@ function Test() {
     dispatch,
   ] = useViewportGrid();
 
-  return <div
-    onClick={() => {
-      dispatch({ type: '', payload: {
-        numCols: 2,
-        numRows: 2,
-        activeViewportIndex: 0,
-        viewports: [],
-      }})
-    }}
-    style={{ color: 'white' }}
-  >
-    Hello World!
-  </div>
+  return (
+    <div
+      onClick={() => {
+        dispatch({
+          type: 'SET_LAYOUT',
+          payload: {
+            numCols: 2,
+            numRows: 2,
+          },
+        });
+      }}
+      style={{ color: 'white' }}
+    >
+      Hello World!
+    </div>
+  );
 }
 
 export default getCommandsModule;
diff --git a/platform/viewer/src/App.jsx b/platform/viewer/src/App.jsx
index 4b7d4bd60..c65292a05 100644
--- a/platform/viewer/src/App.jsx
+++ b/platform/viewer/src/App.jsx
@@ -64,13 +64,33 @@ function App({ config, defaultExtensions }) {
     switch (action.type) {
       case 'SET_ACTIVE_VIEWPORT_INDEX':
         return { ...state, ...{ activeViewportIndex: action.payload } };
-      case 'SET_DISPLAYSET_FOR_VIEWPORT':
+      case 'SET_DISPLAYSET_FOR_VIEWPORT': {
         const { viewportIndex, displaySetInstanceUID } = action.payload;
         const viewports = state.viewports.slice();
 
         viewports[viewportIndex] = { displaySetInstanceUID };
 
         return { ...state, ...{ viewports } };
+      }
+      case 'SET_LAYOUT': {
+        const { numCols, numRows } = action.payload;
+        const numPanes = numCols * numRows;
+        const viewports = state.viewports.slice();
+        const activeViewportIndex =
+          state.activeViewportIndex >= numPanes ? 0 : state.activeViewportIndex;
+
+        while (viewports.length < numPanes) {
+          viewports.push({});
+        }
+        while (viewports.length > numPanes) {
+          viewports.pop();
+        }
+
+        return {
+          ...state,
+          ...{ activeViewportIndex, numCols, numRows, viewports },
+        };
+      }
       default:
         return action.payload;
     }