diff --git a/app/assets/locales/en.json b/app/assets/locales/en.json
index 8d58b358fb08e337267d6c3c1d561bdc1341708f..48d9f9f4df76eab84212cf62777fdbdbc4eb5e96 100644
--- a/app/assets/locales/en.json
+++ b/app/assets/locales/en.json
@@ -166,6 +166,7 @@
   "recording": {
     "recording": "Recording",
     "recordings": "Recordings",
+    "processing": "Recordings Processing...",
     "name": "Name",
     "length": "Length",
     "users": "Users",
diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
index 8339867fcf1dc136956300cb05635cc23f7e0932..9254303d88126b4f7eaafc2dd7a3c78ff89394c3 100644
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ b/app/assets/stylesheets/application.bootstrap.scss
@@ -421,6 +421,14 @@ input.search-bar {
   }
 }
 
+.badge-brand-outline {
+  font-size: 0.8rem;
+  border: 2px solid gainsboro;
+  color: var(--brand-color);
+  background-color: white !important;
+  box-shadow: var(--brand-color-light);
+}
+
 .setting-select {
   button {
     background: white !important;
diff --git a/app/javascript/components/recordings/ProcessingRecordingRow.jsx b/app/javascript/components/recordings/ProcessingRecordingRow.jsx
deleted file mode 100644
index 4414b744c0e0032096121b987b34b1c5910f7819..0000000000000000000000000000000000000000
--- a/app/javascript/components/recordings/ProcessingRecordingRow.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
-//
-// Copyright (c) 2022 BigBlueButton Inc. and by respective authors (see below).
-//
-// This program is free software; you can redistribute it and/or modify it under the
-// terms of the GNU Lesser General Public License as published by the Free Software
-// Foundation; either version 3.0 of the License, or (at your option) any later
-// version.
-//
-// Greenlight is distributed in the hope that it will be useful, but WITHOUT ANY
-// WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
-// PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
-//
-// You should have received a copy of the GNU Lesser General Public License along
-// with Greenlight; if not, see <http://www.gnu.org/licenses/>.
-
-import { VideoCameraIcon } from '@heroicons/react/24/outline';
-import React from 'react';
-import { Stack } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
-
-export default function ProcessingRecordingRow() {
-  const { t } = useTranslation();
-
-  return (
-    <tr id="room-recordings" className="align-middle text-muted border border-2">
-      <td className="text-dark border-end-0">
-        <Stack direction="horizontal" className="py-2">
-          <div className="recording-icon-circle rounded-circle me-3 d-flex align-items-center justify-content-center">
-            <VideoCameraIcon className="hi-s text-brand" />
-          </div>
-          { t('recording.processing_recording') }
-        </Stack>
-      </td>
-      <td className="border-0" />
-      <td className="border-0" />
-      <td className="border-0" />
-      <td className="border-0" />
-      <td className="border-0" />
-    </tr>
-  );
-}
diff --git a/app/javascript/components/recordings/RecordingsList.jsx b/app/javascript/components/recordings/RecordingsList.jsx
index 0dde058ea4168e9c19ae5e062275e2f47e5deb1b..c43e08658c5d8dfa419de617baa3178553fca116 100644
--- a/app/javascript/components/recordings/RecordingsList.jsx
+++ b/app/javascript/components/recordings/RecordingsList.jsx
@@ -16,7 +16,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Card, Stack, Table } from 'react-bootstrap';
+import {
+  Badge, Card, Stack, Table,
+} from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import SortBy from '../shared_components/search/SortBy';
 import RecordingsListRowPlaceHolder from './RecordingsListRowPlaceHolder';
@@ -25,7 +27,6 @@ import RoomsRecordingRow from './room_recordings/RoomsRecordingRow';
 import Pagination from '../shared_components/Pagination';
 import EmptyRecordingsList from './EmptyRecordingsList';
 import SearchBar from '../shared_components/search/SearchBar';
-import ProcessingRecordingRow from './ProcessingRecordingRow';
 
 export default function RecordingsList({
   recordings, isLoading, setPage, searchInput, setSearchInput, recordingsProcessing, adminTable, numPlaceholders,
@@ -42,6 +43,16 @@ export default function RecordingsList({
         <div>
           <SearchBar searchInput={searchInput} setSearchInput={setSearchInput} />
         </div>
+        { recordingsProcessing > 0 && (
+          <Badge className="ms-auto badge-brand-outline p-2">
+            <Stack direction="horizontal" gap={2}>
+              <Badge className="rounded-pill recordings-count-badge ms-2 text-brand">
+                { recordingsProcessing }
+              </Badge>
+              <span> { t('recording.processing') } </span>
+            </Stack>
+          </Badge>
+        )}
       </Stack>
       {
         (searchInput && recordings?.data.length === 0)
@@ -63,7 +74,6 @@ export default function RecordingsList({
                   </tr>
                 </thead>
                 <tbody className="border-top-0">
-                  {[...Array(recordingsProcessing)].map(() => <ProcessingRecordingRow />)}
                   {
                     (isLoading && [...Array(numPlaceholders)].map((val, idx) => (
                       // eslint-disable-next-line react/no-array-index-key