diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
index 2446bd5bf44be0b92dad4b8afadf4950adbab3fc..8339867fcf1dc136956300cb05635cc23f7e0932 100644
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ b/app/assets/stylesheets/application.bootstrap.scss
@@ -197,8 +197,6 @@ input.search-bar {
 }
 
 #footer {
-  margin-top: $footer-buffer-height;
-
   #footer-container {
     border-top: 1px solid #d0d5dd;
   }
@@ -464,7 +462,7 @@ input.search-bar {
       box-shadow: 0 0 0 0.25rem var(--brand-color-light) !important;
     }
     &::after {
-      display: none;
+      display: none !important;
     }
   }
 
diff --git a/app/assets/stylesheets/helpers.scss b/app/assets/stylesheets/helpers.scss
index 107604e6ea9295d329524c07da44fdd5804e0352..9a30d9c17e2510f68b1de35f888e034f3015030f 100644
--- a/app/assets/stylesheets/helpers.scss
+++ b/app/assets/stylesheets/helpers.scss
@@ -34,14 +34,14 @@
 }
 
 .no-header-height {
-  min-height: calc(100vh - $footer-height - $footer-buffer-height);
+  min-height: calc(100vh - $footer-height);
 }
 
 .regular-height {
-  min-height: calc(100vh - $header-height - $footer-height - $footer-buffer-height);
+  min-height: calc(100vh - $header-height - $footer-height);
 
   .vertical-center {
-    min-height: calc(100vh - $header-height - $header-height - $footer-height - $footer-buffer-height);
+    min-height: calc(100vh - $header-height - $header-height - $footer-height);
   }
 }
 
diff --git a/app/assets/stylesheets/recordings.scss b/app/assets/stylesheets/recordings.scss
index 9b770871cdb0b49b84ac1844af548c661d5a8f83..6d401795fb2e2c4d4a73f301154b75b65491aacd 100644
--- a/app/assets/stylesheets/recordings.scss
+++ b/app/assets/stylesheets/recordings.scss
@@ -13,10 +13,15 @@
 //
 // You should have received a copy of the GNU Lesser General Public License along
 // with Greenlight; if not, see <http://www.gnu.org/licenses/>.
+#user-recordings {
+  min-height: 699px;
+}
 
-#user-recordings, #room-recordings {
-  min-height: 400px;
+#room-recordings {
+  min-height: 491px;
+}
 
+#user-recordings, #room-recordings {
   table {
     border-top-right-radius: $border-radius-lg;
     border-top-left-radius: $border-radius-lg;
diff --git a/app/controllers/api/v1/recordings_controller.rb b/app/controllers/api/v1/recordings_controller.rb
index 6138fafe38c4f6105cfe4fe4b188bc67c3475669..09262909c0bb666dc3507d576659f7e2aff33420 100644
--- a/app/controllers/api/v1/recordings_controller.rb
+++ b/app/controllers/api/v1/recordings_controller.rb
@@ -37,7 +37,7 @@ module Api
       def index
         sort_config = config_sorting(allowed_columns: %w[name length visibility])
 
-        pagy, recordings = pagy(current_user.recordings&.order(sort_config, recorded_at: :desc)&.search(params[:search]))
+        pagy, recordings = pagy(current_user.recordings&.order(sort_config, recorded_at: :desc)&.search(params[:search]), items: 5)
         render_data data: recordings, meta: pagy_metadata(pagy), status: :ok
       end
 
diff --git a/app/controllers/api/v1/rooms_controller.rb b/app/controllers/api/v1/rooms_controller.rb
index ffde5ff5fd1455ba02f1985c97d4ac36fbbb8e13..e1e4a982e708b3e66d89ddf9b4e0300aa0d3b0c8 100644
--- a/app/controllers/api/v1/rooms_controller.rb
+++ b/app/controllers/api/v1/rooms_controller.rb
@@ -133,7 +133,7 @@ module Api
       def recordings
         sort_config = config_sorting(allowed_columns: %w[name length visibility])
 
-        pagy, room_recordings = pagy(@room.recordings&.order(sort_config, recorded_at: :desc)&.search(params[:q]))
+        pagy, room_recordings = pagy(@room.recordings&.order(sort_config, recorded_at: :desc)&.search(params[:q]), items: 3)
         render_data data: room_recordings, meta: pagy_metadata(pagy), status: :ok
       end
 
diff --git a/app/javascript/components/admin/manage_users/EditUser.jsx b/app/javascript/components/admin/manage_users/EditUser.jsx
index 364c48c87ed4d7bc3db7eefe5ae9a646287259da..fa85878b47b7beb2edb9bfdbda0eb177a298c99a 100644
--- a/app/javascript/components/admin/manage_users/EditUser.jsx
+++ b/app/javascript/components/admin/manage_users/EditUser.jsx
@@ -39,7 +39,7 @@ export default function EditUser() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activekey="users">
diff --git a/app/javascript/components/admin/manage_users/ManageUsers.jsx b/app/javascript/components/admin/manage_users/ManageUsers.jsx
index b8269617b1e9f1d585ba6a092c8884a710efd78c..f256c9c47b3da18f042ca76d5b99cceeff861296 100644
--- a/app/javascript/components/admin/manage_users/ManageUsers.jsx
+++ b/app/javascript/components/admin/manage_users/ManageUsers.jsx
@@ -47,7 +47,7 @@ export default function ManageUsers() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5">{t('admin.admin_panel')}</h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="users">
diff --git a/app/javascript/components/admin/roles/EditRole.jsx b/app/javascript/components/admin/roles/EditRole.jsx
index a546a7e9c95f5ad9df6b06b8c0119e578cb1bd18..883e765bf6ee93e96bfbe82ce3fe973398c9d622 100644
--- a/app/javascript/components/admin/roles/EditRole.jsx
+++ b/app/javascript/components/admin/roles/EditRole.jsx
@@ -44,7 +44,7 @@ export default function EditRole() {
   if (isLoading) return null;
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="roles">
diff --git a/app/javascript/components/admin/roles/Roles.jsx b/app/javascript/components/admin/roles/Roles.jsx
index 78175a7087f2fac1b2ec4bcaa2969db1f9189858..d8ed915a7d3072905f9d1b9c18da9e0e1335d32c 100644
--- a/app/javascript/components/admin/roles/Roles.jsx
+++ b/app/javascript/components/admin/roles/Roles.jsx
@@ -39,7 +39,7 @@ export default function Roles() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="roles">
diff --git a/app/javascript/components/admin/room_configuration/RoomConfig.jsx b/app/javascript/components/admin/room_configuration/RoomConfig.jsx
index 3741539b66a5d5e7aa9c7c4d7ff4c234017d02b5..696a5e1d91fb2f4c34b649d2d567e32ef30e6ae6 100644
--- a/app/javascript/components/admin/room_configuration/RoomConfig.jsx
+++ b/app/javascript/components/admin/room_configuration/RoomConfig.jsx
@@ -37,7 +37,7 @@ export default function RoomConfig() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="room_configuration">
diff --git a/app/javascript/components/admin/server_recordings/ServerRecordings.jsx b/app/javascript/components/admin/server_recordings/ServerRecordings.jsx
index f51593b8cab90707edad5d31b1480a4f9d6b2373..2b1ad378c59e0601b81c3e77c3913aa228c37018 100644
--- a/app/javascript/components/admin/server_recordings/ServerRecordings.jsx
+++ b/app/javascript/components/admin/server_recordings/ServerRecordings.jsx
@@ -38,7 +38,7 @@ export default function ServerRecordings() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> {t('admin.admin_panel')} </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="server_recordings">
diff --git a/app/javascript/components/admin/server_rooms/ServerRooms.jsx b/app/javascript/components/admin/server_rooms/ServerRooms.jsx
index c0a69c155172c8aeb570ad72474ea3a7e2820c3e..cde5c2e192d98d0fef6403e6507ec271bbc182a0 100644
--- a/app/javascript/components/admin/server_rooms/ServerRooms.jsx
+++ b/app/javascript/components/admin/server_rooms/ServerRooms.jsx
@@ -44,7 +44,7 @@ export default function ServerRooms() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="server_rooms">
diff --git a/app/javascript/components/admin/site_settings/SiteSettings.jsx b/app/javascript/components/admin/site_settings/SiteSettings.jsx
index f082194540c602229f5d1dc49877f121c2b1283a..a8081e94ecef4a5cfc254469c20b698bed686471 100644
--- a/app/javascript/components/admin/site_settings/SiteSettings.jsx
+++ b/app/javascript/components/admin/site_settings/SiteSettings.jsx
@@ -37,7 +37,7 @@ export default function SiteSettings() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="site_settings">
diff --git a/app/javascript/components/admin/tenants/Tenants.jsx b/app/javascript/components/admin/tenants/Tenants.jsx
index 70a1630e0ca2178a4ece597fc879f1b7804ede1a..095239f172cfead1c051d9ec6ab0d41373ac1df9 100644
--- a/app/javascript/components/admin/tenants/Tenants.jsx
+++ b/app/javascript/components/admin/tenants/Tenants.jsx
@@ -45,7 +45,7 @@ export default function Tenants() {
   const { data: tenants, isLoading } = useTenants({ search: searchInput, page });
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="tenants">
diff --git a/app/javascript/components/recordings/RecordingRow.jsx b/app/javascript/components/recordings/RecordingRow.jsx
index a465a27dedbd0be96380434a61a49455a27079ad..e6497890f04c6c24a554f5fc2c0946a729f629f9 100644
--- a/app/javascript/components/recordings/RecordingRow.jsx
+++ b/app/javascript/components/recordings/RecordingRow.jsx
@@ -35,7 +35,7 @@ import SimpleSelect from '../shared_components/utilities/SimpleSelect';
 
 // TODO: Amir - Refactor this.
 export default function RecordingRow({
-  recording, visibilityMutation: useVisibilityAPI, deleteMutation: useDeleteAPI, adminTable,
+  recording, visibilityMutation: useVisibilityAPI, deleteMutation: useDeleteAPI, adminTable, dropUp,
 }) {
   const { t } = useTranslation();
 
@@ -104,6 +104,7 @@ export default function RecordingRow({
       <td className="border-0">
         <SimpleSelect
           defaultValue={recording.visibility}
+          dropUp={dropUp}
         >
           <Dropdown.Item
             key="Public/Protected"
@@ -205,6 +206,7 @@ export default function RecordingRow({
 
 RecordingRow.defaultProps = {
   adminTable: false,
+  dropUp: false,
 };
 
 RecordingRow.propTypes = {
@@ -227,4 +229,5 @@ RecordingRow.propTypes = {
   visibilityMutation: PropTypes.func.isRequired,
   deleteMutation: PropTypes.func.isRequired,
   adminTable: PropTypes.bool,
+  dropUp: PropTypes.bool,
 };
diff --git a/app/javascript/components/recordings/RecordingsList.jsx b/app/javascript/components/recordings/RecordingsList.jsx
index fbec10b463ca1a59f75f586c420236368b45d8e7..0dde058ea4168e9c19ae5e062275e2f47e5deb1b 100644
--- a/app/javascript/components/recordings/RecordingsList.jsx
+++ b/app/javascript/components/recordings/RecordingsList.jsx
@@ -28,7 +28,7 @@ import SearchBar from '../shared_components/search/SearchBar';
 import ProcessingRecordingRow from './ProcessingRecordingRow';
 
 export default function RecordingsList({
-  recordings, isLoading, setPage, searchInput, setSearchInput, recordingsProcessing, adminTable,
+  recordings, isLoading, setPage, searchInput, setSearchInput, recordingsProcessing, adminTable, numPlaceholders,
 }) {
   const { t } = useTranslation();
 
@@ -65,14 +65,19 @@ export default function RecordingsList({
                 <tbody className="border-top-0">
                   {[...Array(recordingsProcessing)].map(() => <ProcessingRecordingRow />)}
                   {
-                    (isLoading && [...Array(7)].map((val, idx) => (
+                    (isLoading && [...Array(numPlaceholders)].map((val, idx) => (
                       // eslint-disable-next-line react/no-array-index-key
                       <RecordingsListRowPlaceHolder key={idx} />
                     )))
                   }
                   {
-                    (recordings?.data?.length > 0 && recordings?.data?.map((recording) => (
-                      <RoomsRecordingRow key={recording.id} recording={recording} adminTable={adminTable} />
+                    (recordings?.data?.length > 0 && recordings?.data?.map((recording, idx) => (
+                      <RoomsRecordingRow
+                        key={recording.id}
+                        recording={recording}
+                        adminTable={adminTable}
+                        dropUp={(recordings?.meta?.page || 0) * (recordings?.meta?.items || 0) - 1 === idx}
+                      />
                     )))
                   }
                 </tbody>
@@ -99,10 +104,11 @@ export default function RecordingsList({
 }
 
 RecordingsList.defaultProps = {
-  recordings: { data: [], meta: { page: 1, pages: 1 } },
+  recordings: { data: [], meta: { page: 1, pages: 1, items: 3 } },
   recordingsProcessing: 0,
   searchInput: '',
   adminTable: false,
+  numPlaceholders: 7,
 };
 
 RecordingsList.propTypes = {
@@ -124,6 +130,7 @@ RecordingsList.propTypes = {
     meta: PropTypes.shape({
       page: PropTypes.number,
       pages: PropTypes.number,
+      items: PropTypes.number,
     }),
   }),
   isLoading: PropTypes.bool.isRequired,
@@ -132,4 +139,5 @@ RecordingsList.propTypes = {
   setSearchInput: PropTypes.func.isRequired,
   recordingsProcessing: PropTypes.number,
   adminTable: PropTypes.bool,
+  numPlaceholders: PropTypes.number,
 };
diff --git a/app/javascript/components/recordings/UserRecordings.jsx b/app/javascript/components/recordings/UserRecordings.jsx
index ff8afc6579dcd33a3b0d4b6867a66c77d7a76fd9..cf43a5203356488e9cdf39ffc78a0491cd422a60 100644
--- a/app/javascript/components/recordings/UserRecordings.jsx
+++ b/app/javascript/components/recordings/UserRecordings.jsx
@@ -31,6 +31,7 @@ export default function UserRecordings() {
         setPage={setPage}
         setSearchInput={setSearchInput}
         searchInput={searchInput}
+        numPlaceholders={5}
       />
     </div>
   );
diff --git a/app/javascript/components/recordings/room_recordings/RoomRecordings.jsx b/app/javascript/components/recordings/room_recordings/RoomRecordings.jsx
index 687d2390e44cecf3446b41c999dbf712ca26a49d..4de37a6934e02cf96ada811085289b1b23c079c5 100644
--- a/app/javascript/components/recordings/room_recordings/RoomRecordings.jsx
+++ b/app/javascript/components/recordings/room_recordings/RoomRecordings.jsx
@@ -36,6 +36,7 @@ export default function RoomRecordings() {
         setSearchInput={setSearchInput}
         searchInput={searchInput}
         recordingsProcessing={roomRecordingsProcessing.data}
+        numPlaceholders={3}
       />
     </div>
   );
diff --git a/app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx b/app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx
index 7a2b3d35a9c0dc45fc47442da7ef8b32aebfd673..40ecc5e91492e2b125e51d4a47855145b2c7a6cb 100644
--- a/app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx
+++ b/app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx
@@ -20,19 +20,21 @@ import useUpdateRecordingVisibility from '../../../hooks/mutations/recordings/us
 import useDeleteRecording from '../../../hooks/mutations/recordings/useDeleteRecording';
 import RecordingRow from '../RecordingRow';
 
-export default function RoomsRecordingRow({ recording, adminTable }) {
+export default function RoomsRecordingRow({ recording, adminTable, dropUp }) {
   return (
     <RecordingRow
       adminTable={adminTable}
       recording={recording}
       visibilityMutation={useUpdateRecordingVisibility}
       deleteMutation={useDeleteRecording}
+      dropUp={dropUp}
     />
   );
 }
 
 RoomsRecordingRow.defaultProps = {
   adminTable: false,
+  dropUp: false,
 };
 
 RoomsRecordingRow.propTypes = {
@@ -51,4 +53,5 @@ RoomsRecordingRow.propTypes = {
     map: PropTypes.func,
   }).isRequired,
   adminTable: PropTypes.bool,
+  dropUp: PropTypes.bool,
 };
diff --git a/app/javascript/components/shared_components/utilities/SimpleSelect.jsx b/app/javascript/components/shared_components/utilities/SimpleSelect.jsx
index 7ec44282de513c137b04d4229ef831601a509d29..6fd162fc97483bf2237a5b99ac293c84eab4c4d2 100644
--- a/app/javascript/components/shared_components/utilities/SimpleSelect.jsx
+++ b/app/javascript/components/shared_components/utilities/SimpleSelect.jsx
@@ -19,12 +19,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 
-export default function SimpleSelect({ defaultValue, children }) {
+export default function SimpleSelect({ defaultValue, dropUp, children }) {
   // Get the currently selected option and set the dropdown toggle to that value
   const defaultString = children?.filter((item) => item.props.value === defaultValue)[0];
 
   return (
-    <Dropdown className="simple-select">
+    <Dropdown className="simple-select" drop={dropUp ? 'up' : undefined}>
       <Dropdown.Toggle>
         { defaultString?.props?.children }
         <ChevronDownIcon className="hi-s float-end" />
@@ -38,10 +38,12 @@ export default function SimpleSelect({ defaultValue, children }) {
 
 SimpleSelect.defaultProps = {
   defaultValue: '',
+  dropUp: false,
   children: undefined,
 };
 
 SimpleSelect.propTypes = {
   defaultValue: PropTypes.string,
+  dropUp: PropTypes.bool,
   children: PropTypes.arrayOf(PropTypes.element),
 };
diff --git a/spec/controllers/rooms_controller_spec.rb b/spec/controllers/rooms_controller_spec.rb
index 469cbc074075ec385883e64602d20ac5b2d1da4e..db67b9432919300b9ac97c373def1f85681d5a36 100644
--- a/spec/controllers/rooms_controller_spec.rb
+++ b/spec/controllers/rooms_controller_spec.rb
@@ -298,8 +298,8 @@ RSpec.describe Api::V1::RoomsController, type: :controller do
     it 'returns recordings belonging to the room' do
       room1 = create(:room, user:, friendly_id: 'friendly_id_1')
       room2 = create(:room, user:, friendly_id: 'friendly_id_2')
-      recordings = create_list(:recording, 5, room: room1)
-      create_list(:recording, 5, room: room2)
+      recordings = create_list(:recording, 3, room: room1)
+      create_list(:recording, 3, room: room2)
       get :recordings, params: { friendly_id: room1.friendly_id }
       recording_ids = response.parsed_body['data'].pluck('id')
       expect(response).to have_http_status(:ok)
@@ -320,7 +320,7 @@ RSpec.describe Api::V1::RoomsController, type: :controller do
       create(:shared_access, user_id: shared_user.id, room_id: room.id)
       sign_in_user(shared_user)
 
-      recordings = create_list(:recording, 5, room:)
+      recordings = create_list(:recording, 3, room:)
 
       get :recordings, params: { friendly_id: room.friendly_id }