diff --git a/src/components/DashboardsBar/ShowMoreButton.js b/src/components/DashboardsBar/ShowMoreButton.js
index b62bd5307..84e52160d 100644
--- a/src/components/DashboardsBar/ShowMoreButton.js
+++ b/src/components/DashboardsBar/ShowMoreButton.js
@@ -1,8 +1,8 @@
 import i18n from '@dhis2/d2-i18n'
-import { Tooltip } from '@dhis2/ui'
+import { Tooltip, IconChevronDown24, IconChevronUp24 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
-import { ChevronDown, ChevronUp } from './assets/icons.js'
+// import { IconChevronDown24, ChevronUp } from './assets/icons.js'
 import classes from './styles/ShowMoreButton.module.css'
 
 const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => {
@@ -31,7 +31,7 @@ const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => {
         <div className={classes.container} ref={containerRef}>
             {disabled ? (
                 <div className={classes.disabled}>
-                    <ChevronDown />
+                    <IconChevronDown24 />
                 </div>
             ) : (
                 <Tooltip
@@ -51,9 +51,9 @@ const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => {
                             onMouseOut={onMouseOut}
                         >
                             {dashboardBarIsExpanded ? (
-                                <ChevronUp />
+                                <IconChevronUp24 />
                             ) : (
-                                <ChevronDown />
+                                <IconChevronDown24 />
                             )}
                         </button>
                     )}
diff --git a/src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.js.snap b/src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.js.snap
index be3243aff..b336c9f1f 100644
--- a/src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.js.snap
+++ b/src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.js.snap
@@ -17,8 +17,8 @@ exports[`ShowMoreButton renders correctly when at maxHeight 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="m11.29289 15.7071c.39053.3905 1.02369.3905 1.41422 0l4.99999-4.99999c.3905-.39053.3905-1.02369 0-1.41422-.3905-.39052-1.0237-.39052-1.4142 0l-4.2929 4.2929-4.29289-4.2929c-.39053-.39052-1.02369-.39052-1.41422 0-.39052.39053-.39052 1.02369 0 1.41422z"
-          fill="#a0adba"
+          d="M11.293 15.707a1 1 0 001.414 0l5-5a1 1 0 00-1.414-1.414L12 13.586 7.707 9.293a1 1 0 00-1.414 1.414z"
+          fill="currentColor"
         />
       </svg>
     </button>
@@ -43,8 +43,8 @@ exports[`ShowMoreButton renders correctly when not at maxHeight 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="m11.29289 15.7071c.39053.3905 1.02369.3905 1.41422 0l4.99999-4.99999c.3905-.39053.3905-1.02369 0-1.41422-.3905-.39052-1.0237-.39052-1.4142 0l-4.2929 4.2929-4.29289-4.2929c-.39053-.39052-1.02369-.39052-1.41422 0-.39052.39053-.39052 1.02369 0 1.41422z"
-          fill="#a0adba"
+          d="M11.293 15.707a1 1 0 001.414 0l5-5a1 1 0 00-1.414-1.414L12 13.586 7.707 9.293a1 1 0 00-1.414 1.414z"
+          fill="currentColor"
         />
       </svg>
     </button>
diff --git a/src/components/DashboardsBar/styles/DashboardsBar.module.css b/src/components/DashboardsBar/styles/DashboardsBar.module.css
index a37fd005c..bda6fd23d 100644
--- a/src/components/DashboardsBar/styles/DashboardsBar.module.css
+++ b/src/components/DashboardsBar/styles/DashboardsBar.module.css
@@ -5,21 +5,22 @@
 .container {
     position: relative;
     background-color: var(--colors-white);
-    box-shadow: rgba(0, 0, 0, 0.2) 0 0 6px 3px;
+    border-bottom: 1px solid var(--colors-grey400);
+    box-shadow: 0 -2px 4px rgba(33, 41, 52, 0.02) inset;
     overflow: hidden;
     box-sizing: border-box;
     flex: none;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: space-between;
     height: var(--user-rows-height);
     width: 100%;
     z-index: 1;
+    padding: var(--spacers-dp8);
 }
 
 .content {
-    padding: 10px 6px 0 6px;
     overflow: hidden;
-    margin-bottom: 21px; /* to make space for the show more button */
 }
 
 .expanded .content {
diff --git a/src/components/DashboardsBar/styles/DragHandle.module.css b/src/components/DashboardsBar/styles/DragHandle.module.css
index 7f8903509..0d188bab4 100644
--- a/src/components/DashboardsBar/styles/DragHandle.module.css
+++ b/src/components/DashboardsBar/styles/DragHandle.module.css
@@ -14,7 +14,7 @@
     bottom: 0;
     height: 3px;
     width: 100%;
-    background: var(--colors-white);
+    background: transparent;
 }
 
 .draghandle:hover:after {
diff --git a/src/components/DashboardsBar/styles/ShowMoreButton.module.css b/src/components/DashboardsBar/styles/ShowMoreButton.module.css
index 42abc2065..e1a2c0c9e 100644
--- a/src/components/DashboardsBar/styles/ShowMoreButton.module.css
+++ b/src/components/DashboardsBar/styles/ShowMoreButton.module.css
@@ -1,32 +1,50 @@
 .container {
-    text-align: center;
-    flex: none;
-    height: 21px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
+    display: flex;
+    align-items: center;
+    width: 32px;
+    height: 40px;
+    flex-shrink: 0;
 }
 
 .showMore {
     cursor: pointer;
     border: none;
-    background-color: transparent;
+    border-radius: 3px;
+    background: transparent;
     padding: 0px;
     width: 100%;
-    height: 21px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.showMore svg {
+    color: var(--colors-grey600);
 }
 
 .showMore:hover {
     background: var(--colors-grey200);
     transition: background 0.2s 0.1s;
 }
+.showMore:hover svg {
+    color: var(--colors-grey800);
+}
+
 .showMore:active {
     background: var(--colors-grey300);
     transition: none;
 }
+.showMore:active svg {
+    color: var(--colors-grey900);
+}
 
+/*focus-visible backwards compatibility for safari: https://css-tricks.com/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders/*/
 .showMore:focus {
+    outline: 3px solid var(--theme-focus);
+    outline-offset: -3px;
+}
+.showMore:focus:not(:focus-visible) {
     outline: none;
 }
 
diff --git a/src/components/DropdownButton/DropdownButton.js b/src/components/DropdownButton/DropdownButton.js
index ea4162c37..09a13b242 100644
--- a/src/components/DropdownButton/DropdownButton.js
+++ b/src/components/DropdownButton/DropdownButton.js
@@ -17,7 +17,7 @@ const DropdownButton = ({
 
     const ArrowIconComponent = open ? ArrowUp : ArrowDown
     return (
-        <div ref={anchorRef}>
+        <div className={styles.buttonWrapper} ref={anchorRef}>
             <OfflineTooltip disabledWhenOffline={disabledWhenOffline}>
                 <Button onClick={onClick} type="button" {...rest}>
                     {children}
diff --git a/src/components/DropdownButton/DropdownButton.module.css b/src/components/DropdownButton/DropdownButton.module.css
index f5e2ab86c..8385daa47 100644
--- a/src/components/DropdownButton/DropdownButton.module.css
+++ b/src/components/DropdownButton/DropdownButton.module.css
@@ -1,3 +1,6 @@
+.buttonWrapper {
+    display: inline-flex;
+}
 .arrow {
     margin-left: var(--spacers-dp12);
 }
diff --git a/src/components/NoContentMessage.js b/src/components/NoContentMessage.js
index bc9ff4d62..47bc7c709 100644
--- a/src/components/NoContentMessage.js
+++ b/src/components/NoContentMessage.js
@@ -1,9 +1,18 @@
+import { colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import classes from './styles/NoContentMessage.module.css'
 
 const NoContentMessage = ({ text }) => (
-    <div className={classes.container}>{text}</div>
+    <div className={classes.container}>
+        <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M96.4184693 4.6480742l-2.9759268 2.6728C91.5558812 5.2202435 88.8786031 4 86 4V0c4.0260387 0 7.7809122 1.7113874 10.4184693 4.6480742zM100 19.269042h-4l-.0000544-5.3024514c-.0043849-1.346405-.2739964-2.6517927-.7866406-3.8623659l3.6833463-1.559795c.7189815 1.6978243 1.0971493 3.5288134 1.1032837 5.4156229L100 19.269042zm0 13.9999755h-4v-10h4v10zm0 14h-4v-10h4v10zm0 14h-4v-10h4v10zm0 13.9999995h-4v-9.9999995h4v9.9999995zm-.516108 14.50858l-3.8521996-1.077292C95.8751624 87.829701 96 86.924153 96 86v-6.730983h4V86c0 1.289184-.1747984 2.557136-.516108 3.777597zM87.7213345 99.895024l-.4874961-3.970182c2.8302961-.34753 5.3578432-1.892491 6.9762006-4.213767l3.2812621 2.287645c-2.2629208 3.245799-5.802045 5.409086-9.7699666 5.896304zM73.461965 100v-4h10v4h-10zm-14 0v-4h10v4h-10zm-14 0v-4h10v4h-10zm-14 0v-4h10v4h-10zm-14 0v-4h10v4h-10zM3.17264828 94.875717l3.09219912-2.537382c1.79303608 2.185097 4.4211055 3.525451 7.2855127 3.651773l-.176231 3.996116c-4.01094422-.176885-7.69477669-2.055693-10.20148082-5.110507zM0 80.192922h4l.00006331 5.84312c.00418159 1.190127.21554574 2.348454.61951638 3.438567L.86883696 90.864547C.3022517 89.335619.0059261 87.711683.00007566 86.043095L0 80.192922zm0-13.999974h4v10H0v-10zm0-14.0000005h4v10H0v-10zm0-14h4v10H0v-10zm0-14h4v10H0v-10zM.701349 9.6140131l3.79891292 1.2523021C4.17021443 11.8675286 4 12.9209553 4 14v6.1929475H0V14c0-1.5058511.2385093-2.9819426.701349-4.3859869zM12.9113947.0417954l.3073341 3.9881757c-2.8514503.2197365-5.43930476 1.6474003-7.16021518 3.8917822l-3.1742768-2.4339201C5.29022999 2.3499781 8.91606935.3496804 12.9113947.0417954zM27.07607 0v4h-10V0h10zm14 0v4h-10V0h10zm14 0v4h-10V0h10zm14 0v4h-10V0h10zm14 0v4h-10V0h10z"
+                fill={colors.grey400}
+            ></path>
+        </svg>
+        <p>{text}</p>
+    </div>
 )
 
 NoContentMessage.propTypes = {
diff --git a/src/components/styles/App.css b/src/components/styles/App.css
index fd012ae29..b9c1416d0 100644
--- a/src/components/styles/App.css
+++ b/src/components/styles/App.css
@@ -1,7 +1,7 @@
 :root {
     /* control bar variables */
     --user-rows-count: 1;
-    --controlbar-padding: 31px;
+    --controlbar-padding: 16px;
     --row-height: 40px;
     --min-rows-height: calc(
         var(--controlbar-padding) + (1 * var(--row-height))
@@ -32,11 +32,11 @@ body {
     margin: 0;
     padding: 0;
     font-family: sans-serif;
-    background-color: #f4f6f8;
+    background-color: var(--colors-grey200);
 }
 
 .app-shell-app {
-    overflow: hidden !important;
+    /* overflow: hidden !important; */
     display: flex;
     flex-direction: column;
 }
diff --git a/src/components/styles/DashboardContainer.module.css b/src/components/styles/DashboardContainer.module.css
index e4d28d6b1..aab720ce7 100644
--- a/src/components/styles/DashboardContainer.module.css
+++ b/src/components/styles/DashboardContainer.module.css
@@ -1,9 +1,9 @@
 .container {
-    background-color: #f4f6f8;
-    padding-left: var(--spacers-dp16);
-    padding-right: var(--spacers-dp16);
+    background-color: var(--colors-grey200);
+    /* padding-left: var(--spacers-dp16); */
+    /* padding-right: var(--spacers-dp16); */
     padding-bottom: var(--spacers-dp24);
-    overflow: auto;
+    /* overflow: auto; */
 }
 
 @media only screen and (max-height: 480px) {
diff --git a/src/components/styles/ItemGrid.css b/src/components/styles/ItemGrid.css
index 115b67f46..2f12cbf04 100644
--- a/src/components/styles/ItemGrid.css
+++ b/src/components/styles/ItemGrid.css
@@ -2,8 +2,9 @@
 
 .react-grid-item {
     overflow: hidden !important;
-    box-shadow: 0px 0px 3px 0px #999999;
-    background-color: #ffffff;
+    background-color: var(--colors-white);
+    box-shadow: 0 0 0 1px var(--colors-grey400), 0 1px 5px rgba(33, 41, 52, 0.1),
+        0 0 40px rgba(33, 41, 52, 0.02);
     border-radius: 3px;
     min-height: 70px;
     min-width: 70px;
diff --git a/src/components/styles/NoContentMessage.module.css b/src/components/styles/NoContentMessage.module.css
index 23363d3ec..7dd485920 100644
--- a/src/components/styles/NoContentMessage.module.css
+++ b/src/components/styles/NoContentMessage.module.css
@@ -1,7 +1,9 @@
 .container {
     padding: var(--spacers-dp48) var(--spacers-dp8) 0 var(--spacers-dp8);
-    text-align: center;
-    font-size: 15px;
-    font-weight: 500;
-    color: var(--colors-grey600);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacers-dp24);
+    align-items: center;
+    font-size: 16px;
+    color: var(--colors-grey700);
 }
diff --git a/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap
index 8d9c3b7a6..dbe72f017 100644
--- a/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap
+++ b/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap
@@ -51,7 +51,19 @@ exports[`EditDashboard renders message when not enough access 1`] = `
     <div
       class="container"
     >
-      No access
+      <svg
+        height="100"
+        width="100"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M96.4184693 4.6480742l-2.9759268 2.6728C91.5558812 5.2202435 88.8786031 4 86 4V0c4.0260387 0 7.7809122 1.7113874 10.4184693 4.6480742zM100 19.269042h-4l-.0000544-5.3024514c-.0043849-1.346405-.2739964-2.6517927-.7866406-3.8623659l3.6833463-1.559795c.7189815 1.6978243 1.0971493 3.5288134 1.1032837 5.4156229L100 19.269042zm0 13.9999755h-4v-10h4v10zm0 14h-4v-10h4v10zm0 14h-4v-10h4v10zm0 13.9999995h-4v-9.9999995h4v9.9999995zm-.516108 14.50858l-3.8521996-1.077292C95.8751624 87.829701 96 86.924153 96 86v-6.730983h4V86c0 1.289184-.1747984 2.557136-.516108 3.777597zM87.7213345 99.895024l-.4874961-3.970182c2.8302961-.34753 5.3578432-1.892491 6.9762006-4.213767l3.2812621 2.287645c-2.2629208 3.245799-5.802045 5.409086-9.7699666 5.896304zM73.461965 100v-4h10v4h-10zm-14 0v-4h10v4h-10zm-14 0v-4h10v4h-10zm-14 0v-4h10v4h-10zm-14 0v-4h10v4h-10zM3.17264828 94.875717l3.09219912-2.537382c1.79303608 2.185097 4.4211055 3.525451 7.2855127 3.651773l-.176231 3.996116c-4.01094422-.176885-7.69477669-2.055693-10.20148082-5.110507zM0 80.192922h4l.00006331 5.84312c.00418159 1.190127.21554574 2.348454.61951638 3.438567L.86883696 90.864547C.3022517 89.335619.0059261 87.711683.00007566 86.043095L0 80.192922zm0-13.999974h4v10H0v-10zm0-14.0000005h4v10H0v-10zm0-14h4v10H0v-10zm0-14h4v10H0v-10zM.701349 9.6140131l3.79891292 1.2523021C4.17021443 11.8675286 4 12.9209553 4 14v6.1929475H0V14c0-1.5058511.2385093-2.9819426.701349-4.3859869zM12.9113947.0417954l.3073341 3.9881757c-2.8514503.2197365-5.43930476 1.6474003-7.16021518 3.8917822l-3.1742768-2.4339201C5.29022999 2.3499781 8.91606935.3496804 12.9113947.0417954zM27.07607 0v4h-10V0h10zm14 0v4h-10V0h10zm14 0v4h-10V0h10zm14 0v4h-10V0h10zm14 0v4h-10V0h10z"
+          fill="#d5dde5"
+        />
+      </svg>
+      <p>
+        No access
+      </p>
     </div>
   </div>
   <div
diff --git a/src/pages/view/FilterBar/styles/FilterBadge.module.css b/src/pages/view/FilterBar/styles/FilterBadge.module.css
index b64ca1311..a98d654ac 100644
--- a/src/pages/view/FilterBar/styles/FilterBadge.module.css
+++ b/src/pages/view/FilterBar/styles/FilterBadge.module.css
@@ -1,12 +1,11 @@
 .container {
-    margin: 2px;
-    padding: 0 var(--spacers-dp16);
-    border-radius: 4px;
+    padding: var(--spacers-dp8);
+    border-radius: 5px;
     color: var(--colors-white);
-    background-color: #212934;
-    height: 36px;
+    background-color: var(--colors-grey900);
     display: flex;
     align-items: center;
+    gap: var(--spacers-dp12);
 }
 
 .badge {
@@ -28,7 +27,6 @@
     padding: 0;
     font-size: 12px;
     text-decoration: underline;
-    margin-left: var(--spacers-dp24);
     cursor: pointer;
 }
 
diff --git a/src/pages/view/FilterBar/styles/FilterBar.module.css b/src/pages/view/FilterBar/styles/FilterBar.module.css
index d6f1cc2a9..8707bdd4c 100644
--- a/src/pages/view/FilterBar/styles/FilterBar.module.css
+++ b/src/pages/view/FilterBar/styles/FilterBar.module.css
@@ -1,9 +1,6 @@
 .bar {
-    position: sticky;
-    top: var(--spacers-dp12);
-    z-index: 7;
-    margin-top: var(--spacers-dp8);
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     flex-wrap: wrap;
+    gap: var(--spacers-dp4);
 }
diff --git a/src/pages/view/TitleBar/ActionsBar.js b/src/pages/view/TitleBar/ActionsBar.js
index 24da7ec8b..a6e686473 100644
--- a/src/pages/view/TitleBar/ActionsBar.js
+++ b/src/pages/view/TitleBar/ActionsBar.js
@@ -9,7 +9,7 @@ import {
     Button,
     FlyoutMenu,
     colors,
-    IconMore24,
+    IconMore16,
     SharingDialog,
 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -30,8 +30,10 @@ import { sGetNamedItemFilters } from '../../../reducers/itemFilters.js'
 import { sGetSelected } from '../../../reducers/selected.js'
 import { sGetShowDescription } from '../../../reducers/showDescription.js'
 import { ROUTE_START_PATH } from '../../start/index.js'
+import FilterBar from '../FilterBar/FilterBar.js'
 import { apiStarDashboard } from './apiStarDashboard.js'
 import FilterSelector from './FilterSelector.js'
+import LastUpdatedTag from './LastUpdatedTag.js'
 import StarDashboardButton from './StarDashboardButton.js'
 import classes from './styles/ActionsBar.module.css'
 
@@ -215,11 +217,12 @@ const ViewActions = ({
     const getMoreButton = (className, useSmall) => (
         <DropdownButton
             className={className}
-            small={useSmall}
+            small
+            secondary
             open={useSmall ? moreOptionsSmallIsOpen : moreOptionsIsOpen}
             disabledWhenOffline={false}
             onClick={() => toggleMoreOptions(useSmall)}
-            icon={<IconMore24 color={colors.grey700} />}
+            icon={<IconMore16 color={colors.grey700} />}
             component={getMoreMenu()}
         >
             {i18n.t('More')}
@@ -229,14 +232,19 @@ const ViewActions = ({
     return (
         <>
             <div className={classes.actions}>
-                <StarDashboardButton
-                    starred={starred}
-                    onClick={onToggleStarredDashboard}
-                />
+                <FilterBar />
+
                 <div className={classes.strip}>
+                    {<LastUpdatedTag id={id} />}
+                    <StarDashboardButton
+                        starred={starred}
+                        onClick={onToggleStarredDashboard}
+                    />
                     {userAccess.update ? (
                         <OfflineTooltip>
                             <Button
+                                small
+                                secondary
                                 disabled={offline}
                                 className={classes.editButton}
                                 onClick={() => setRedirectUrl(`${id}/edit`)}
@@ -248,6 +256,8 @@ const ViewActions = ({
                     {userAccess.manage ? (
                         <OfflineTooltip>
                             <Button
+                                small
+                                secondary
                                 disabled={offline}
                                 className={classes.shareButton}
                                 onClick={onToggleSharingDialog}
diff --git a/src/pages/view/TitleBar/FilterSelector.js b/src/pages/view/TitleBar/FilterSelector.js
index cf32d25aa..d1a325cab 100644
--- a/src/pages/view/TitleBar/FilterSelector.js
+++ b/src/pages/view/TitleBar/FilterSelector.js
@@ -1,7 +1,7 @@
 import { DimensionsPanel } from '@dhis2/analytics'
 import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { Card, colors, IconFilter24 } from '@dhis2/ui'
+import { Card, colors, IconFilter16 } from '@dhis2/ui'
 import isEmpty from 'lodash/isEmpty.js'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
@@ -62,10 +62,12 @@ const FilterSelector = (props) => {
         <>
             <span className={classes.buttonContainer}>
                 <DropdownButton
+                    small
+                    secondary
                     open={filterDialogIsOpen}
                     disabled={offline}
                     onClick={toggleFilterDialogIsOpen}
-                    icon={<IconFilter24 color={colors.grey700} />}
+                    icon={<IconFilter16 color={colors.grey700} />}
                     component={getFilterSelector()}
                 >
                     {i18n.t('Add filter')}
diff --git a/src/pages/view/TitleBar/StarDashboardButton.js b/src/pages/view/TitleBar/StarDashboardButton.js
index 6e8a3f7f2..0ba0dedc4 100644
--- a/src/pages/view/TitleBar/StarDashboardButton.js
+++ b/src/pages/view/TitleBar/StarDashboardButton.js
@@ -1,6 +1,6 @@
 import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { Tooltip, IconStar24, IconStarFilled24, colors } from '@dhis2/ui'
+import { Tooltip, IconStar24, IconStarFilled24 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import classes from './styles/StarDashboardButton.module.css'
@@ -40,11 +40,12 @@ const StarDashboardButton = ({ starred, onClick }) => {
         >
             <Tooltip content={tooltipContent}>
                 <span
+                    className={classes.starIcon}
                     data-test={
                         starred ? 'dashboard-starred' : 'dashboard-unstarred'
                     }
                 >
-                    <StarIcon color={colors.grey600} />
+                    <StarIcon />
                 </span>
             </Tooltip>
         </button>
diff --git a/src/pages/view/TitleBar/TitleBar.js b/src/pages/view/TitleBar/TitleBar.js
index 04d90b7cf..ffda72a3f 100644
--- a/src/pages/view/TitleBar/TitleBar.js
+++ b/src/pages/view/TitleBar/TitleBar.js
@@ -5,15 +5,9 @@ import { sGetSelected } from '../../../reducers/selected.js'
 import { sGetShowDescription } from '../../../reducers/showDescription.js'
 import ActionsBar from './ActionsBar.js'
 import Description from './Description.js'
-import LastUpdatedTag from './LastUpdatedTag.js'
 import classes from './styles/TitleBar.module.css'
 
-const ViewTitleBar = ({
-    id,
-    displayName,
-    displayDescription,
-    showDescription,
-}) => {
+const ViewTitleBar = ({ displayName, displayDescription, showDescription }) => {
     return (
         <div className={classes.container}>
             <div className={classes.titleBar} data-test="title-bar">
@@ -28,7 +22,6 @@ const ViewTitleBar = ({
             {showDescription && (
                 <Description description={displayDescription} />
             )}
-            {<LastUpdatedTag id={id} />}
         </div>
     )
 }
@@ -36,7 +29,6 @@ const ViewTitleBar = ({
 ViewTitleBar.propTypes = {
     displayDescription: PropTypes.string,
     displayName: PropTypes.string,
-    id: PropTypes.string,
     showDescription: PropTypes.bool,
 }
 
diff --git a/src/pages/view/TitleBar/styles/ActionsBar.module.css b/src/pages/view/TitleBar/styles/ActionsBar.module.css
index a7005736e..a0e8d71ea 100644
--- a/src/pages/view/TitleBar/styles/ActionsBar.module.css
+++ b/src/pages/view/TitleBar/styles/ActionsBar.module.css
@@ -1,16 +1,17 @@
 .actions {
     display: flex;
     align-items: center;
-    margin-left: 8px;
+    justify-content: flex-end;
+    flex-wrap: wrap-reverse;
+    gap: 4px;
 }
 
 .strip {
     display: flex;
-    margin-left: var(--spacers-dp8);
-}
-
-.strip > * {
-    margin-left: var(--spacers-dp8);
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacers-dp4);
+    flex-wrap: wrap;
 }
 
 .strip .moreButtonSmall {
diff --git a/src/pages/view/TitleBar/styles/Description.module.css b/src/pages/view/TitleBar/styles/Description.module.css
index 7e15b5100..dcaf78091 100644
--- a/src/pages/view/TitleBar/styles/Description.module.css
+++ b/src/pages/view/TitleBar/styles/Description.module.css
@@ -3,11 +3,11 @@
 }
 
 .noDesc {
-    color: #888;
+    color: var(--colors-grey600);
 }
 
 .descContainer {
-    font-size: 14px;
-    padding-top: 5px;
-    padding-bottom: 5px;
+    font-size: 13px;
+    line-height: 17px;
+    padding: 0;
 }
diff --git a/src/pages/view/TitleBar/styles/FilterSelector.module.css b/src/pages/view/TitleBar/styles/FilterSelector.module.css
index 7300c0839..2bca80a4f 100644
--- a/src/pages/view/TitleBar/styles/FilterSelector.module.css
+++ b/src/pages/view/TitleBar/styles/FilterSelector.module.css
@@ -1,3 +1,8 @@
+.buttonContainer {
+    display: flex;
+    align-items: center;
+}
+
 @media only screen and (max-width: 480px) {
     .buttonContainer {
         display: none;
diff --git a/src/pages/view/TitleBar/styles/LastUpdatedTag.module.css b/src/pages/view/TitleBar/styles/LastUpdatedTag.module.css
index 53eac8a04..00e7d731c 100644
--- a/src/pages/view/TitleBar/styles/LastUpdatedTag.module.css
+++ b/src/pages/view/TitleBar/styles/LastUpdatedTag.module.css
@@ -1,3 +1,3 @@
 .lastUpdatedTag {
-    margin-top: var(--spacers-dp8);
+    margin-top: 0;
 }
diff --git a/src/pages/view/TitleBar/styles/StarDashboardButton.module.css b/src/pages/view/TitleBar/styles/StarDashboardButton.module.css
index e4933be01..b925f8ae4 100644
--- a/src/pages/view/TitleBar/styles/StarDashboardButton.module.css
+++ b/src/pages/view/TitleBar/styles/StarDashboardButton.module.css
@@ -1,13 +1,34 @@
 .star {
-    margin: 0 0 0 var(--spacers-dp4);
-    padding: 0;
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    border-radius: 3px;
+    padding: 2px;
     border: none;
-    position: relative;
-    top: 1px;
     background: transparent;
+    position: relative;
     outline: none;
     cursor: pointer;
 }
 .star:disabled {
     cursor: not-allowed;
 }
+.star:hover {
+    background: var(--colors-grey300);
+}
+.starIcon {
+    width: 24px;
+    height: 24px;
+    display: block;
+}
+.starIcon svg {
+    color: var(--colors-grey600);
+}
+.star:hover .starIcon svg {
+    color: var(--colors-grey700);
+}
+.star:active .starIcon svg {
+    color: var(--colors-grey900);
+}
diff --git a/src/pages/view/TitleBar/styles/TitleBar.module.css b/src/pages/view/TitleBar/styles/TitleBar.module.css
index e58ed4cb9..88e0cc83f 100644
--- a/src/pages/view/TitleBar/styles/TitleBar.module.css
+++ b/src/pages/view/TitleBar/styles/TitleBar.module.css
@@ -1,26 +1,25 @@
 .container {
-    margin-top: var(--spacers-dp12);
+    /* margin-top: var(--spacers-dp12); */
+    background: var(--colors-white);
+    border-bottom: 1px solid var(--colors-grey400);
+    padding: var(--spacers-dp8) var(--spacers-dp8) var(--spacers-dp8)
+        var(--spacers-dp16);
+    position: sticky;
+    top: 0;
+    z-index: 10;
 }
 
 .titleBar {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
+    justify-content: space-between;
     position: relative;
 }
 
 .title {
     position: relative;
-    font-size: 21px;
+    font-size: 17px;
     font-weight: 500;
-    color: var(--colors-black);
-    min-width: 50px;
-    cursor: default;
+    color: var(--colors-grey900);
     user-select: text;
-    top: 7px;
-}
-
-@media only screen and (max-width: 480px) {
-    .title {
-        top: 3px;
-    }
 }
diff --git a/src/pages/view/ViewDashboard.js b/src/pages/view/ViewDashboard.js
index 286db9ffb..e0a5d289c 100644
--- a/src/pages/view/ViewDashboard.js
+++ b/src/pages/view/ViewDashboard.js
@@ -24,7 +24,6 @@ import { sGetDashboardById } from '../../reducers/dashboards.js'
 import { sGetPassiveViewRegistered } from '../../reducers/passiveViewRegistered.js'
 import { sGetSelectedId } from '../../reducers/selected.js'
 import { ROUTE_START_PATH } from '../start/index.js'
-import FilterBar from './FilterBar/FilterBar.js'
 import ItemGrid from './ItemGrid.js'
 import classes from './styles/ViewDashboard.module.css'
 import TitleBar from './TitleBar/TitleBar.js'
@@ -151,7 +150,6 @@ const ViewDashboard = (props) => {
         ) : (
             <>
                 <TitleBar />
-                <FilterBar />
                 <ItemGrid />
             </>
         )
diff --git a/src/pages/view/__tests__/ViewDashboard.spec.js b/src/pages/view/__tests__/ViewDashboard.spec.js
index 5ac6c8791..66da9eff6 100644
--- a/src/pages/view/__tests__/ViewDashboard.spec.js
+++ b/src/pages/view/__tests__/ViewDashboard.spec.js
@@ -45,14 +45,6 @@ jest.mock(
         }
 )
 
-jest.mock(
-    '../FilterBar/FilterBar',
-    () =>
-        function MockFilterBar() {
-            return <div>MockFilterBar</div>
-        }
-)
-
 jest.mock(
     '../ItemGrid',
     () =>
diff --git a/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap b/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap
index 0f1515cf9..0793eb28e 100644
--- a/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap
+++ b/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap
@@ -17,9 +17,6 @@ exports[`ViewDashboard renders dashboard 1`] = `
       <div>
         TitleBar
       </div>
-      <div>
-        MockFilterBar
-      </div>
       <div>
         MockItemGrid
       </div>
diff --git a/src/pages/view/styles/ItemGrid.module.css b/src/pages/view/styles/ItemGrid.module.css
index b0a2e1368..d09ee77c8 100644
--- a/src/pages/view/styles/ItemGrid.module.css
+++ b/src/pages/view/styles/ItemGrid.module.css
@@ -1,3 +1,4 @@
 .grid {
-    margin-top: var(--spacers-dp16);
+    margin-top: var(--spacers-dp8);
+    padding: 0 var(--spacers-dp16);
 }
diff --git a/yarn.lock b/yarn.lock
index 56f4f44f1..ea0a9c134 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4418,12 +4418,7 @@ ansi-align@^3.0.0:
   dependencies:
     string-width "^3.0.0"
 
-ansi-colors@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
-
-ansi-colors@^4.1.3:
+ansi-colors@^4.1.1, ansi-colors@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
   integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
@@ -5809,7 +5804,12 @@ content-disposition@0.5.4:
   dependencies:
     safe-buffer "5.2.1"
 
-content-type@~1.0.4, content-type@~1.0.5:
+content-type@~1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
+
+content-type@~1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
@@ -6873,14 +6873,7 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-error-stack-parser@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.6.tgz#5a99a707bd7a4c58a797902d48d82803ede6aad8"
-  integrity sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==
-  dependencies:
-    stackframe "^1.1.1"
-
-error-stack-parser@^2.1.4:
+error-stack-parser@^2.0.6, error-stack-parser@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
   integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
@@ -13486,14 +13479,7 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
-serialize-javascript@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.0.tgz#efae5d88f45d7924141da8b5c3a7a7e663fefeb8"
-  integrity sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==
-  dependencies:
-    randombytes "^2.1.0"
-
-serialize-javascript@^6.0.2:
+serialize-javascript@^6.0.0, serialize-javascript@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
   integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
@@ -13766,7 +13752,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@0.7.3, source-map@^0.7.3:
+source-map@0.7.3:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
@@ -13776,7 +13762,7 @@ source-map@^0.5.6:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.7.4:
+source-map@^0.7.3, source-map@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
   integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
@@ -13902,12 +13888,7 @@ stack-utils@^2.0.3:
   dependencies:
     escape-string-regexp "^2.0.0"
 
-stackframe@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303"
-  integrity sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==
-
-stackframe@^1.3.4:
+stackframe@^1.1.1, stackframe@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
   integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==