diff --git a/platform/ui/src/components/Button/Button.jsx b/platform/ui/src/components/Button/Button.jsx
index 293a19ed8..a3f656f4f 100644
--- a/platform/ui/src/components/Button/Button.jsx
+++ b/platform/ui/src/components/Button/Button.jsx
@@ -50,7 +50,7 @@ const variantClasses = {
   },
   contained: {
     default:
-      'bg-custom-aquaBright text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'bg-custom-aquaBright text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
     primary:
       'bg-custom-blue text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     secondary:
diff --git a/platform/ui/src/views/StudyList/StudyList.js b/platform/ui/src/views/StudyList/StudyList.js
index 652fb52ec..54aa36364 100644
--- a/platform/ui/src/views/StudyList/StudyList.js
+++ b/platform/ui/src/views/StudyList/StudyList.js
@@ -69,8 +69,13 @@ const StudyList = ({ studies, perPage }) => {
         'h-screen': isEmptyStudies,
       })}
     >
-      <Header />
-      <StudyListFilter numOfStudies={numOfStudies} filtersMeta={filtersMeta} />
+      <div className="sticky top-0 z-10">
+        <Header />
+        <StudyListFilter
+          numOfStudies={numOfStudies}
+          filtersMeta={filtersMeta}
+        />
+      </div>
       <StudyListTable
         studies={studiesData}
         numOfStudies={numOfStudies}
diff --git a/platform/ui/src/views/StudyList/components/StudyListFilter.js b/platform/ui/src/views/StudyList/components/StudyListFilter.js
index 9137def76..c7682a1ef 100644
--- a/platform/ui/src/views/StudyList/components/StudyListFilter.js
+++ b/platform/ui/src/views/StudyList/components/StudyListFilter.js
@@ -124,86 +124,102 @@ const StudyListFilter = ({
   };
 
   return (
-    <div className="bg-custom-navyDark border-t-4 border-black">
-      <div className="container m-auto relative flex flex-col pt-5 pb-3">
-        <div className="flex flex-row justify-between mb-5 px-12">
-          <div className="flex flex-row">
-            <Typography variant="h4" className="text-custom-aquaBright mr-6">
-              Study List
-            </Typography>
-            <div className="flex flex-row items-end">
-              <Button
-                variant="text"
-                size="small"
-                color="inherit"
-                className="text-custom-blueBright"
-                startIcon={<Icon name="info-link" className="w-2" />}
+    <div className="border-t-4 border-b-4 border-black">
+      <div className="bg-custom-navyDark">
+        <div className="container m-auto relative flex flex-col pt-5 pb-3">
+          <div className="flex flex-row justify-between mb-5 px-12">
+            <div className="flex flex-row">
+              <Typography variant="h4" className="text-custom-aquaBright mr-6">
+                Study List
+              </Typography>
+              <div className="flex flex-row items-end">
+                <Button
+                  variant="text"
+                  size="small"
+                  color="inherit"
+                  className="text-custom-blueBright"
+                  startIcon={<Icon name="info-link" className="w-2" />}
+                >
+                  <span className="flex flex-col flex-1">
+                    <span>Learn more</span>
+                    <span className="opacity-50 pt-1 border-b border-custom-blueBright"></span>
+                  </span>
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-row">
+              {isFiltering() && (
+                <Button
+                  rounded="full"
+                  variant="outlined"
+                  color="primary"
+                  className="text-custom-blueBright border-custom-blueBright mx-8"
+                  startIcon={<Icon name="cancel" />}
+                  onClick={clearFilters}
+                >
+                  Clear filters
+                </Button>
+              )}
+              <Typography variant="h4" className="mr-2">
+                {numOfStudies > 100 ? '>100' : numOfStudies}
+              </Typography>
+              <Typography
+                variant="h6"
+                className="text-custom-grayLight self-end pb-1"
               >
-                <span className="flex flex-col flex-1">
-                  <span>Learn more</span>
-                  <span className="opacity-50 pt-1 border-b border-custom-blueBright"></span>
-                </span>
-              </Button>
+                Studies
+              </Typography>
             </div>
           </div>
-          <div className="flex flex-row">
-            {isFiltering() && (
-              <Button
-                rounded="full"
-                variant="outlined"
-                color="primary"
-                className="text-custom-blueBright border-custom-blueBright mx-8"
-                startIcon={<Icon name="cancel" />}
-                onClick={clearFilters}
-              >
-                Clear filters
-              </Button>
+          <div className="flex flex-row w-full">
+            {filtersMeta.map(
+              ({ name, displayName, inputType, isSortable, gridCol }) => {
+                return (
+                  <div
+                    className={classnames(
+                      `w-${gridCol}/24`,
+                      'pl-4 first:pl-12'
+                    )}
+                  >
+                    <FilterLabel
+                      key={name}
+                      label={displayName}
+                      isSortable={
+                        isSortable && numOfStudies <= 100 && numOfStudies > 0
+                      }
+                      isBeingSorted={sortBy === name}
+                      sortDirection={sortDirection}
+                      onLabelClick={() => handleFilterLabelClick(name)}
+                      inputType={inputType}
+                    >
+                      {inputType !== 'none' && (
+                        <Input
+                          className="border-custom-blue mt-2 bg-black"
+                          type="text"
+                          containerClassName="mr-2"
+                          value={currentFiltersValues[name] || ''}
+                          onChange={event =>
+                            handleFilterValueChange(event, name)
+                          }
+                        />
+                      )}
+                    </FilterLabel>
+                  </div>
+                );
+              }
             )}
-            <Typography variant="h4" className="mr-2">
-              {numOfStudies > 100 ? '>100' : numOfStudies}
-            </Typography>
-            <Typography
-              variant="h6"
-              className="text-custom-grayLight self-end pb-1"
-            >
-              Studies
-            </Typography>
           </div>
         </div>
-        <div className="flex flex-row w-full">
-          {filtersMeta.map(
-            ({ name, displayName, inputType, isSortable, gridCol }) => {
-              return (
-                <div
-                  className={classnames(`w-${gridCol}/24`, 'pl-4 first:pl-12')}
-                >
-                  <FilterLabel
-                    key={name}
-                    label={displayName}
-                    isSortable={
-                      isSortable && numOfStudies <= 100 && numOfStudies > 0
-                    }
-                    isBeingSorted={sortBy === name}
-                    sortDirection={sortDirection}
-                    onLabelClick={() => handleFilterLabelClick(name)}
-                    inputType={inputType}
-                  >
-                    {inputType !== 'none' && (
-                      <Input
-                        className="border-custom-blue mt-2 bg-black"
-                        type="text"
-                        containerClassName="mr-2"
-                        value={currentFiltersValues[name] || ''}
-                        onChange={event => handleFilterValueChange(event, name)}
-                      />
-                    )}
-                  </FilterLabel>
-                </div>
-              );
-            }
-          )}
-        </div>
       </div>
+      {numOfStudies > 100 && (
+        <div className="container m-auto">
+          <div className="bg-custom-blue text-center text-base py-1 rounded-b">
+            <p className="text-white">
+              Filter list to 100 studies or less to enable sorting
+            </p>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/platform/ui/src/views/StudyList/components/StudyListTable.js b/platform/ui/src/views/StudyList/components/StudyListTable.js
index 2f6b8c36b..e33f91b2f 100644
--- a/platform/ui/src/views/StudyList/components/StudyListTable.js
+++ b/platform/ui/src/views/StudyList/components/StudyListTable.js
@@ -27,7 +27,7 @@ const TableRow = props => {
   const toggleRow = () => setIsOpened(!isOpened);
   const ChevronIconName = isOpened ? 'chevron-down' : 'chevron-right';
   const tdClasses = [
-    'px-4 py-2',
+    'px-4 py-2 text-base',
     { 'border-b border-custom-violetPale': !isOpened },
   ];
   const seriesWidthClasses = {
@@ -44,8 +44,8 @@ const TableRow = props => {
           })}
         >
           <div
-            className={classnames('w-full', {
-              'border border-custom-aquaBright rounded overflow-hidden mb-2': isOpened,
+            className={classnames('w-full transition duration-300', {
+              'border border-custom-aquaBright rounded overflow-hidden mb-2 hover:border-custom-violetPale': isOpened,
             })}
           >
             <table className={classnames('w-full p-4')}>
@@ -128,33 +128,46 @@ const TableRow = props => {
                   </td>
                 </tr>
                 {isOpened && (
-                  <tr className={classnames('bg-black')}>
+                  <tr
+                    className={classnames('bg-black max-h-0 overflow-hidden')}
+                  >
                     <td colSpan="7" className="py-4 pl-12 pr-2">
-                      <div className="flex">
+                      <div className="block">
                         <Button
                           rounded="full"
-                          variant="outlined"
-                          endIcon={<Icon name="launch-info" />}
-                          className="mr-4"
+                          variant="contained"
+                          className="mr-4 font-bold"
+                          endIcon={
+                            <Icon
+                              name="launch-arrow"
+                              style={{ color: '#21a7c6' }}
+                            />
+                          }
                         >
                           Basic Viewer
                         </Button>
                         <Button
                           rounded="full"
-                          variant="outlined"
-                          endIcon={<Icon name="launch-info" />}
-                          className="mr-4"
+                          variant="contained"
+                          className="mr-4 font-bold"
+                          endIcon={
+                            <Icon
+                              name="launch-arrow"
+                              style={{ color: '#21a7c6' }}
+                            />
+                          }
                         >
-                          Segmentation
+                          Segmentation{' '}
                         </Button>
                         <Button
                           rounded="full"
                           variant="outlined"
                           endIcon={<Icon name="launch-info" />}
+                          className="font-bold"
                         >
                           Module 3
                         </Button>
-                        <div className="ml-5 text-lg text-custom-grayBright flex items-center">
+                        <div className="ml-5 text-lg text-custom-grayBright inline-flex items-center">
                           <Icon
                             name="notificationwarning-diamond"
                             className="mr-2 w-5 h-5"
@@ -166,27 +179,39 @@ const TableRow = props => {
                         <div className="w-full text-lg">
                           <div className="bg-custom-navy border-b border-custom-violetPale flex">
                             <div
-                              className={classnames(seriesWidthClasses.normal)}
+                              className={classnames(
+                                seriesWidthClasses.normal,
+                                'font-bold'
+                              )}
                             >
                               Description
                             </div>
                             <div
-                              className={classnames(seriesWidthClasses.small)}
+                              className={classnames(
+                                seriesWidthClasses.small,
+                                'font-bold'
+                              )}
                             >
                               Series
                             </div>
                             <div
-                              className={classnames(seriesWidthClasses.small)}
+                              className={classnames(
+                                seriesWidthClasses.small,
+                                'font-bold'
+                              )}
                             >
                               Modality
                             </div>
                             <div
-                              className={classnames(seriesWidthClasses.normal)}
+                              className={classnames(
+                                seriesWidthClasses.normal,
+                                'font-bold'
+                              )}
                             >
                               Instances
                             </div>
                           </div>
-                          <div className="mt-2 h-48 overflow-y-scroll ohif-scrollbar">
+                          <div className="mt-2 max-h-48 overflow-y-scroll ohif-scrollbar">
                             {series.map((seriesItem, i) => (
                               <div className="w-full flex" key={i}>
                                 <div
@@ -247,7 +272,7 @@ TableRow.propTypes = {
 const StudyListTable = ({ studies, numOfStudies, filtersMeta }) => {
   const renderTable = () => {
     return (
-      <table className="w-full text-white border-t-4 border-black">
+      <table className="w-full text-white">
         <tbody>
           {studies.map((study, i) => (
             <TableRow
@@ -283,14 +308,6 @@ const StudyListTable = ({ studies, numOfStudies, filtersMeta }) => {
     <>
       <div className="bg-black">
         <div className="container m-auto relative">
-          {numOfStudies > 100 && (
-            <div className="bg-custom-blue text-center text-base py-1 rounded-b sticky top-0">
-              <p className="text-white">
-                Filter list to 100 studies or less to enable sorting
-              </p>
-            </div>
-          )}
-
           {numOfStudies > 0 && renderTable()}
           {numOfStudies === 0 && renderEmpty()}
         </div>
diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js
index 4c42ee3e8..b9c908745 100644
--- a/platform/ui/tailwind.config.js
+++ b/platform/ui/tailwind.config.js
@@ -345,10 +345,11 @@ module.exports = {
       ...theme('spacing'),
       ...negative(theme('spacing')),
     }),
-    maxHeight: {
+    maxHeight: theme => ({
       full: '100%',
       screen: '100vh',
-    },
+      ...theme('spacing'),
+    }),
     maxWidth: (theme, { breakpoints }) => ({
       none: 'none',
       xs: '20rem',