diff --git a/CHANGELOG.md b/CHANGELOG.md
index 19cd7aeabf..524d1fc4ad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2211,6 +2211,7 @@ See https://6.docs.plone.org/volto/upgrade-guide/index.html for more information
 
 ### Bugfix
 
+- Sort control panels alphabetically within each group @JeffersonBledsoe #3737
 - Fix UniversalLink storybook @tiberiuichim
 - Fix logout to stay on the same page where the user was @reebalazs
 - Change sentry chunk name to avoid ad blockers. Only load sentry if env vars exist @tiberiuichim
diff --git a/src/components/manage/Controlpanels/Controlpanels.jsx b/src/components/manage/Controlpanels/Controlpanels.jsx
index fa8d3e880d..263be3b02f 100644
--- a/src/components/manage/Controlpanels/Controlpanels.jsx
+++ b/src/components/manage/Controlpanels/Controlpanels.jsx
@@ -3,18 +3,18 @@
  * @module components/manage/Controlpanels/Controlpanels
  */
 
+import { Helmet, asyncConnect } from '@plone/volto/helpers';
+import { concat, filter, last, map, sortBy, uniqBy } from 'lodash';
 import PropTypes from 'prop-types';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { Portal } from 'react-portal';
 import { connect } from 'react-redux';
-import { compose } from 'redux';
 import { Link } from 'react-router-dom';
-import { concat, filter, last, map, uniqBy } from 'lodash';
-import { Portal } from 'react-portal';
-import { asyncConnect, Helmet } from '@plone/volto/helpers';
+import { compose } from 'redux';
 import { Container, Grid, Header, Message, Segment } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { listControlpanels, getSystemInformation } from '@plone/volto/actions';
+import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
 import { Error, Icon, Toolbar, VersionOverview } from '@plone/volto/components';
 
 import config from '@plone/volto/registry';
@@ -221,7 +221,10 @@ function Controlpanels({
               <Grid doubling columns={6}>
                 <Grid.Row>
                   {map(
-                    filter(filteredControlPanels, { group }),
+                    sortBy(
+                      filter(filteredControlPanels, { group }),
+                      (controlpanel) => controlpanel.title,
+                    ),
                     (controlpanel) => (
                       <Grid.Column key={controlpanel.id}>
                         <Link to={`/controlpanel/${controlpanel.id}`}>
diff --git a/src/components/manage/Controlpanels/__snapshots__/Controlpanels.test.jsx.snap b/src/components/manage/Controlpanels/__snapshots__/Controlpanels.test.jsx.snap
index dc8f6ee0af..de99eecd17 100644
--- a/src/components/manage/Controlpanels/__snapshots__/Controlpanels.test.jsx.snap
+++ b/src/components/manage/Controlpanels/__snapshots__/Controlpanels.test.jsx.snap
@@ -33,7 +33,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/date-and-time"
+                href="/controlpanel/addons"
                 onClick={[Function]}
               >
                 <h3
@@ -60,7 +60,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
                   <div
                     className="content"
                   >
-                    Date and Time
+                    Add-Ons
                   </div>
                 </h3>
               </a>
@@ -69,7 +69,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/lang"
+                href="/controlpanel/database"
                 onClick={[Function]}
               >
                 <h3
@@ -96,7 +96,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
                   <div
                     className="content"
                   >
-                    Language
+                    Database
                   </div>
                 </h3>
               </a>
@@ -105,7 +105,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/addons"
+                href="/controlpanel/date-and-time"
                 onClick={[Function]}
               >
                 <h3
@@ -132,7 +132,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
                   <div
                     className="content"
                   >
-                    Add-Ons
+                    Date and Time
                   </div>
                 </h3>
               </a>
@@ -141,7 +141,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/database"
+                href="/controlpanel/lang"
                 onClick={[Function]}
               >
                 <h3
@@ -168,7 +168,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
                   <div
                     className="content"
                   >
-                    Database
+                    Language
                   </div>
                 </h3>
               </a>
@@ -177,7 +177,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/undo"
+                href="/controlpanel/aliases"
                 onClick={[Function]}
               >
                 <h3
@@ -204,7 +204,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
                   <div
                     className="content"
                   >
-                    Undo
+                    URL Management
                   </div>
                 </h3>
               </a>
@@ -213,7 +213,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/aliases"
+                href="/controlpanel/undo"
                 onClick={[Function]}
               >
                 <h3
@@ -240,7 +240,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
                   <div
                     className="content"
                   >
-                    URL Management
+                    Undo
                   </div>
                 </h3>
               </a>
@@ -266,7 +266,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/editing"
+                href="/controlpanel/rules"
                 onClick={[Function]}
               >
                 <h3
@@ -293,7 +293,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
                   <div
                     className="content"
                   >
-                    Editing
+                    Content Rules
                   </div>
                 </h3>
               </a>
@@ -302,7 +302,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/rules"
+                href="/controlpanel/editing"
                 onClick={[Function]}
               >
                 <h3
@@ -329,7 +329,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
                   <div
                     className="content"
                   >
-                    Content Rules
+                    Editing
                   </div>
                 </h3>
               </a>
@@ -338,7 +338,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/relations"
+                href="/controlpanel/moderate-comments"
                 onClick={[Function]}
               >
                 <h3
@@ -365,7 +365,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
                   <div
                     className="content"
                   >
-                    Relations
+                    Moderate Comments
                   </div>
                 </h3>
               </a>
@@ -374,7 +374,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/moderate-comments"
+                href="/controlpanel/relations"
                 onClick={[Function]}
               >
                 <h3
@@ -401,7 +401,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
                   <div
                     className="content"
                   >
-                    Moderate Comments
+                    Relations
                   </div>
                 </h3>
               </a>
@@ -480,7 +480,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/users"
+                href="/controlpanel/groups"
                 onClick={[Function]}
               >
                 <h3
@@ -507,7 +507,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
                   <div
                     className="content"
                   >
-                    Users
+                    Groups
                   </div>
                 </h3>
               </a>
@@ -552,7 +552,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/groups"
+                href="/controlpanel/users"
                 onClick={[Function]}
               >
                 <h3
@@ -579,7 +579,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
                   <div
                     className="content"
                   >
-                    Groups
+                    Users
                   </div>
                 </h3>
               </a>
@@ -815,7 +815,7 @@ exports[`Controlpanels renders an additional control panel 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/undo"
+                href="/controlpanel/aliases"
                 onClick={[Function]}
               >
                 <h3
@@ -842,7 +842,7 @@ exports[`Controlpanels renders an additional control panel 1`] = `
                   <div
                     className="content"
                   >
-                    Undo
+                    URL Management
                   </div>
                 </h3>
               </a>
@@ -851,7 +851,7 @@ exports[`Controlpanels renders an additional control panel 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/aliases"
+                href="/controlpanel/undo"
                 onClick={[Function]}
               >
                 <h3
@@ -878,7 +878,7 @@ exports[`Controlpanels renders an additional control panel 1`] = `
                   <div
                     className="content"
                   >
-                    URL Management
+                    Undo
                   </div>
                 </h3>
               </a>
@@ -940,7 +940,7 @@ exports[`Controlpanels renders an additional control panel 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/relations"
+                href="/controlpanel/moderate-comments"
                 onClick={[Function]}
               >
                 <h3
@@ -967,7 +967,7 @@ exports[`Controlpanels renders an additional control panel 1`] = `
                   <div
                     className="content"
                   >
-                    Relations
+                    Moderate Comments
                   </div>
                 </h3>
               </a>
@@ -976,7 +976,7 @@ exports[`Controlpanels renders an additional control panel 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/moderate-comments"
+                href="/controlpanel/relations"
                 onClick={[Function]}
               >
                 <h3
@@ -1003,7 +1003,7 @@ exports[`Controlpanels renders an additional control panel 1`] = `
                   <div
                     className="content"
                   >
-                    Moderate Comments
+                    Relations
                   </div>
                 </h3>
               </a>
@@ -1029,7 +1029,7 @@ exports[`Controlpanels renders an additional control panel 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/users"
+                href="/controlpanel/groups"
                 onClick={[Function]}
               >
                 <h3
@@ -1056,7 +1056,7 @@ exports[`Controlpanels renders an additional control panel 1`] = `
                   <div
                     className="content"
                   >
-                    Users
+                    Groups
                   </div>
                 </h3>
               </a>
@@ -1101,7 +1101,7 @@ exports[`Controlpanels renders an additional control panel 1`] = `
               className="column"
             >
               <a
-                href="/controlpanel/groups"
+                href="/controlpanel/users"
                 onClick={[Function]}
               >
                 <h3
@@ -1128,7 +1128,7 @@ exports[`Controlpanels renders an additional control panel 1`] = `
                   <div
                     className="content"
                   >
-                    Groups
+                    Users
                   </div>
                 </h3>
               </a>