diff --git a/src/app/production/recording/page.tsx b/src/app/production/recording/page.tsx
index fbbac7cb..368a59ea 100644
--- a/src/app/production/recording/page.tsx
+++ b/src/app/production/recording/page.tsx
@@ -2,7 +2,7 @@ import RecordingTable from '@/components/pages/production/recording/RecordingTab
 
 const Recording = () => {
   return (
-    <section className='w-full p-3 overflow-x-hidden'>
+    <section className='w-full overflow-x-hidden'>
       <RecordingTable />
     </section>
   );
diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index bd26670d..13737cf3 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -1173,131 +1173,132 @@ const RecordingTable = () => {
   return (
     <>
       <div className='w-full'>
-        <div className='flex flex-col mb-4 -mx-4 px-4'>
-          {/* Action Buttons, Search and Filter Section */}
-          <div className='relative w-full p-3 pt-0 px-0 flex flex-col xl:flex-row justify-between items-start xl:items-center gap-3 flex-wrap after:absolute after:bottom-0 after:left-0 after:right-0 after:-mx-4 after:border-b after:border-base-content/10'>
-            {/* Action Buttons */}
-            <div className='w-full xl:w-fit flex flex-col sm:flex-row self-start gap-2'>
-              <RequirePermission permissions='lti.production.recording.create'>
-                <Button
-                  href='/production/recording/add'
-                  color='primary'
-                  className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-                >
-                  <Icon icon='heroicons:plus' width={20} height={20} />
-                  Add Recording
-                </Button>
-              </RequirePermission>
-
-              {selectedRowIds.length > 0 && (
-                <>
-                  <RequirePermission permissions='lti.production.recording.approve'>
-                    <Button
-                      variant='outline'
-                      color='success'
-                      onClick={() => {
-                        setApprovalNotes('');
-                        approveModal.openModal();
-                      }}
-                      disabled={
-                        selectedRowIds.length === 0 ||
-                        eligibleRowIds.length === 0
-                      }
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:check'
-                        width={24}
-                        height={24}
-                      />
-                      Approve
-                    </Button>
-                  </RequirePermission>
-
-                  <RequirePermission permissions='lti.production.recording.approve'>
-                    <Button
-                      variant='outline'
-                      color='error'
-                      onClick={() => {
-                        setApprovalNotes('');
-                        rejectModal.openModal();
-                      }}
-                      disabled={
-                        selectedRowIds.length === 0 ||
-                        eligibleRowIds.length === 0
-                      }
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:close'
-                        width={24}
-                        height={24}
-                      />
-                      Reject
-                    </Button>
-                  </RequirePermission>
-                </>
-              )}
-            </div>
-
-            {/* Search and Filter */}
-            <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap w-full xl:w-auto'>
-              <DebouncedTextInput
-                name='search'
-                placeholder='Search'
-                value={tableFilterState.search ?? ''}
-                onChange={searchChangeHandler}
-                startAdornment={
-                  <Icon
-                    icon='heroicons:magnifying-glass'
-                    width={20}
-                    height={20}
-                  />
-                }
-                className={{
-                  wrapper: 'w-full min-w-24 max-w-3xs',
-                  inputWrapper: 'rounded-xl! shadow-button-soft',
-                  input:
-                    'placeholder:font-semibold placeholder:text-base-content/50',
-                }}
-              />
-
+        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
+          {/* Action Buttons */}
+          <div className='w-fit flex flex-row gap-3 flex-wrap'>
+            <RequirePermission permissions='lti.production.recording.create'>
               <Button
-                variant='outline'
-                color='none'
-                onClick={handleFilterModalOpen}
-                className={cn(
-                  'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
-                  {
-                    'border-primary-gradient text-primary': hasFilters,
-                  }
-                )}
+                href='/production/recording/add'
+                color='primary'
+                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
               >
-                <Icon icon='heroicons:funnel' width={20} height={20} />
-                Filter
-                {hasFilters && (
-                  <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
-                    {activeFiltersCount}
-                  </span>
-                )}
+                <Icon icon='heroicons:plus' width={20} height={20} />
+                Add Recording
               </Button>
+            </RequirePermission>
 
-              <SelectInput
-                options={ROWS_OPTIONS}
-                value={{
-                  label: String(tableFilterState.pageSize),
-                  value: tableFilterState.pageSize,
-                }}
-                onChange={pageSizeChangeHandler}
-                className={{
-                  wrapper:
-                    'col-span-6 sm:col-span-4 max-w-28 sm:justify-self-end',
-                }}
-              />
-            </div>
+            {selectedRowIds.length > 0 && (
+              <>
+                <hr className='w-px h-full border-none bg-base-content/10 sm:block hidden' />
+
+                <RequirePermission permissions='lti.production.recording.approve'>
+                  <Button
+                    variant='outline'
+                    color='none'
+                    onClick={() => {
+                      setApprovalNotes('');
+                      rejectModal.openModal();
+                    }}
+                    disabled={
+                      selectedRowIds.length === 0 || eligibleRowIds.length === 0
+                    }
+                    className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+                  >
+                    <Icon
+                      icon='heroicons:x-mark'
+                      width={20}
+                      height={20}
+                      className='text-error'
+                    />
+                    Reject
+                  </Button>
+                </RequirePermission>
+
+                <RequirePermission permissions='lti.production.recording.approve'>
+                  <Button
+                    variant='outline'
+                    color='none'
+                    onClick={() => {
+                      setApprovalNotes('');
+                      approveModal.openModal();
+                    }}
+                    disabled={
+                      selectedRowIds.length === 0 || eligibleRowIds.length === 0
+                    }
+                    className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+                  >
+                    <Icon
+                      icon='heroicons:check'
+                      width={20}
+                      height={20}
+                      className='text-success'
+                    />
+                    Approve
+                  </Button>
+                </RequirePermission>
+              </>
+            )}
           </div>
 
-          {/* Table Section */}
+          {/* Search and Filter */}
+          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
+            <DebouncedTextInput
+              name='search'
+              placeholder='Search'
+              value={tableFilterState.search ?? ''}
+              onChange={searchChangeHandler}
+              startAdornment={
+                <Icon
+                  icon='heroicons:magnifying-glass'
+                  width={20}
+                  height={20}
+                />
+              }
+              className={{
+                wrapper: 'w-full min-w-24 max-w-3xs',
+                inputWrapper: 'rounded-xl! shadow-button-soft',
+                input:
+                  'placeholder:font-semibold placeholder:text-base-content/50',
+              }}
+            />
+
+            <Button
+              variant='outline'
+              color='none'
+              onClick={handleFilterModalOpen}
+              className={cn(
+                'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
+                {
+                  'border-primary-gradient text-primary': hasFilters,
+                }
+              )}
+            >
+              <Icon icon='heroicons:funnel' width={20} height={20} />
+              Filter
+              {hasFilters && (
+                <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
+                  {activeFiltersCount}
+                </span>
+              )}
+            </Button>
+
+            <SelectInput
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper:
+                  'col-span-6 sm:col-span-4 max-w-28 sm:justify-self-end',
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Table Section */}
+        <div className='flex flex-col mb-4 -mx-4 px-4'>
           {isLoading ? (
             <div className='w-full flex flex-row justify-center items-center p-4'>
               <span className='loading loading-spinner loading-xl' />
@@ -1335,7 +1336,7 @@ const RecordingTable = () => {
               rowSelection={rowSelection}
               setRowSelection={setRowSelection}
               className={{
-                containerClassName: cn('mt-3 mb-0', {
+                containerClassName: cn('p-3 mb-0', {
                   'w-full':
                     isResponseSuccess(recordings) &&
                     recordings?.data?.length === 0,