diff --git a/src/explore-education-statistics-common/src/modules/table-tool/components/TableHeadersGroup.module.scss b/src/explore-education-statistics-common/src/modules/table-tool/components/TableHeadersGroup.module.scss
index 6529e2d9184..5eb70737f12 100644
--- a/src/explore-education-statistics-common/src/modules/table-tool/components/TableHeadersGroup.module.scss
+++ b/src/explore-education-statistics-common/src/modules/table-tool/components/TableHeadersGroup.module.scss
@@ -9,7 +9,7 @@
   position: relative;
 
   @include govuk-media-query($from: desktop) {
-    width: 364px;
+    width: 457px;
 
     &.groupActive {
       width: 460px;
diff --git a/src/explore-education-statistics-common/src/modules/table-tool/components/TableHeadersGroupControls.tsx b/src/explore-education-statistics-common/src/modules/table-tool/components/TableHeadersGroupControls.tsx
index 66cdb2ab0fa..89e25ed1809 100644
--- a/src/explore-education-statistics-common/src/modules/table-tool/components/TableHeadersGroupControls.tsx
+++ b/src/explore-education-statistics-common/src/modules/table-tool/components/TableHeadersGroupControls.tsx
@@ -8,6 +8,8 @@ import styles from '@common/modules/table-tool/components/TableHeadersGroupContr
 import useTableHeadersContext from '@common/modules/table-tool/contexts/TableHeadersContext';
 import classNames from 'classnames';
 import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { Filter } from '../types/filters';
 
 interface Props {
   defaultNumberOfItems: number;
@@ -49,6 +51,12 @@ const TableHeadersGroupControls = ({
   const displayItems = isExpanded ? totalItems : defaultNumberOfItems;
   const hasMoreItems = isExpanded || totalItems > displayItems;
   const disableControls = activeGroup && activeGroup !== id;
+  const { getValues, setValue } = useFormContext();
+  const list: Filter[] = getValues(groupName);
+
+  const handleReverse = () => {
+    setValue(groupName, list.toReversed());
+  };
 
   return (
     <div className="govuk-!-padding-top-2">
@@ -149,7 +157,7 @@ const TableHeadersGroupControls = ({
             ) : (
               <>
                 <Button
-                  className="govuk-!-width-one-half"
+                  className="govuk-!-width-one-third"
                   disabled={!!disableControls}
                   onClick={() => {
                     setActiveGroup(id);
@@ -160,7 +168,7 @@ const TableHeadersGroupControls = ({
                   <VisuallyHidden>{` items in ${legend}`}</VisuallyHidden>
                 </Button>
                 <Button
-                  className="govuk-!-width-one-half"
+                  className="govuk-!-width-one-third"
                   disabled={!!disableControls}
                   onClick={() => {
                     toggleMoveControlsActive(id);
@@ -168,6 +176,13 @@ const TableHeadersGroupControls = ({
                 >
                   Move<VisuallyHidden> {legend}</VisuallyHidden>
                 </Button>
+                <Button
+                  className="govuk-!-width-one-third"
+                  disabled={!!disableControls}
+                  onClick={() => handleReverse()}
+                >
+                  Reverse order<VisuallyHidden> {legend}</VisuallyHidden>
+                </Button>
               </>
             )}
           </ButtonGroup>
diff --git a/src/explore-education-statistics-common/src/modules/table-tool/components/TableHeadersReadOnlyList.tsx b/src/explore-education-statistics-common/src/modules/table-tool/components/TableHeadersReadOnlyList.tsx
index 20431eb6285..b8949926546 100644
--- a/src/explore-education-statistics-common/src/modules/table-tool/components/TableHeadersReadOnlyList.tsx
+++ b/src/explore-education-statistics-common/src/modules/table-tool/components/TableHeadersReadOnlyList.tsx
@@ -2,8 +2,8 @@ import DragIcon from '@common/components/DragIcon';
 import styles from '@common/modules/table-tool/components/TableHeadersReadOnlyList.module.scss';
 import useTableHeadersContext from '@common/modules/table-tool/contexts/TableHeadersContext';
 import { Filter } from '@common/modules/table-tool/types/filters';
-import React from 'react';
 import { useFormContext } from 'react-hook-form';
+import React from 'react';
 
 interface Props {
   defaultNumberOfItems: number;
@@ -22,10 +22,9 @@ const TableHeadersReadOnlyList = ({
 }: Props) => {
   const { expandedLists } = useTableHeadersContext();
   const isExpanded = expandedLists.includes(id);
+  const { watch } = useFormContext();
 
-  const { getValues } = useFormContext();
-  const list: Filter[] = getValues(name);
-
+  const list: Filter[] = watch(name);
   const displayItems = isExpanded ? list.length : defaultNumberOfItems;
 
   return (
diff --git a/src/explore-education-statistics-common/src/modules/table-tool/components/__tests__/TableHeadersGroupControls.test.tsx b/src/explore-education-statistics-common/src/modules/table-tool/components/__tests__/TableHeadersGroupControls.test.tsx
index 3cd57480a56..fecec81c358 100644
--- a/src/explore-education-statistics-common/src/modules/table-tool/components/__tests__/TableHeadersGroupControls.test.tsx
+++ b/src/explore-education-statistics-common/src/modules/table-tool/components/__tests__/TableHeadersGroupControls.test.tsx
@@ -3,6 +3,14 @@ import { TableHeadersContextProvider } from '@common/modules/table-tool/contexts
 import { render as baseRender, screen } from '@testing-library/react';
 import noop from 'lodash/noop';
 import React from 'react';
+import FormProvider from '@common/components/form/FormProvider';
+import { TableHeadersFormValues } from '../TableHeadersForm';
+import {
+  testCategoryFilters,
+  testIndicators,
+  testLocationFilters,
+  testTimePeriodFilters,
+} from './__data__/tableHeadersConfig.data';
 
 describe('TableHeadersGroupControls', () => {
   describe('a list is being reordered', () => {
@@ -147,24 +155,31 @@ function render({
   showMovingControls?: boolean;
   totalItems?: number;
 }) {
+  const testInitialFormValues: TableHeadersFormValues = {
+    columnGroups: [testTimePeriodFilters, testLocationFilters],
+    rowGroups: [testCategoryFilters, testIndicators],
+  };
+
   baseRender(
     <TableHeadersContextProvider
       activeGroup={activeGroup}
       expandedLists={expandedLists}
     >
-      <TableHeadersGroupControls
-        defaultNumberOfItems={2}
-        groupName="rowGroups"
-        id="test-id"
-        index={1}
-        isLastGroup={false}
-        legend="Locations"
-        showMovingControls={showMovingControls}
-        totalItems={totalItems}
-        onMoveAxis={noop}
-        onMoveDown={noop}
-        onMoveUp={noop}
-      />
+      <FormProvider initialValues={testInitialFormValues}>
+        <TableHeadersGroupControls
+          defaultNumberOfItems={2}
+          groupName="rowGroups"
+          id="test-id"
+          index={1}
+          isLastGroup={false}
+          legend="Locations"
+          showMovingControls={showMovingControls}
+          totalItems={totalItems}
+          onMoveAxis={noop}
+          onMoveDown={noop}
+          onMoveUp={noop}
+        />
+      </FormProvider>
     </TableHeadersContextProvider>,
   );
 }