diff --git a/extensions/default/src/ViewerLayout/Header.jsx b/extensions/default/src/ViewerLayout/Header.jsx
index b5f8010c0..3fefdbd60 100644
--- a/extensions/default/src/ViewerLayout/Header.jsx
+++ b/extensions/default/src/ViewerLayout/Header.jsx
@@ -3,10 +3,28 @@ import PropTypes from 'prop-types';
 // TODO: This may fail if package is split from PWA build
 import { useHistory } from 'react-router-dom';
 //
-import { NavBar, Svg, Icon, IconButton } from '@ohif/ui';
+import { NavBar, Svg, Icon, IconButton, Dropdown, useModal } from '@ohif/ui';
 
 function Header({ children }) {
   const history = useHistory();
+  const { show } = useModal();
+
+  const showAboutModal = () => {
+    const modalComponent = () => <div>About modal</div>;
+    show({
+      title: 'About',
+      content: modalComponent,
+    });
+  };
+
+  const showPreferencesModal = () => {
+    const modalComponent = () => <div>Preferences modal</div>;
+    show({
+      title: 'Preferences',
+      content: modalComponent,
+    });
+  };
+
   // const dropdownContent = [
   //   {
   //     name: 'Soft tissue',
@@ -42,16 +60,29 @@ function Header({ children }) {
           <span className="mr-3 text-lg text-common-light">
             FOR INVESTIGATIONAL USE ONLY
           </span>
-          <IconButton
-            variant="text"
-            color="inherit"
-            className="text-primary-active"
-            onClick={() => {}}
-          >
-            <React.Fragment>
-              <Icon name="settings" /> <Icon name="chevron-down" />
-            </React.Fragment>
-          </IconButton>
+          <Dropdown
+            titleElement={
+              <IconButton
+                variant="text"
+                color="inherit"
+                size="initial"
+                className="text-primary-active"
+                onClick={() => {}}
+              >
+                <React.Fragment>
+                  <Icon name="settings" /> <Icon name="chevron-down" />
+                </React.Fragment>
+              </IconButton>
+            }
+            list={[
+              { title: 'About', icon: 'info', onClick: () => showAboutModal() },
+              {
+                title: 'Preferences',
+                icon: 'settings',
+                onClick: () => showPreferencesModal(),
+              },
+            ]}
+          />
         </div>
       </div>
     </NavBar>
diff --git a/platform/viewer/src/components/PreferencesDropdown/PreferencesDropdown.jsx b/platform/viewer/src/components/PreferencesDropdown/PreferencesDropdown.jsx
new file mode 100644
index 000000000..1167aa04f
--- /dev/null
+++ b/platform/viewer/src/components/PreferencesDropdown/PreferencesDropdown.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { Dropdown, IconButton, Icon, useModal } from '@ohif/ui';
+
+const PreferencesDropdown = () => {
+  const { show } = useModal();
+
+  const showAboutModal = () => {
+    const modalComponent = () => <div>About modal</div>;
+    show({
+      content: modalComponent,
+      title: 'About',
+    });
+  };
+
+  const showPreferencesModal = () => {
+    const modalComponent = () => <div>Preferences modal</div>;
+    show({
+      content: modalComponent,
+      title: 'Preferences',
+    });
+  };
+
+  return (
+    <Dropdown
+      titleElement={
+        <IconButton
+          variant="text"
+          color="inherit"
+          size="initial"
+          className="text-primary-active"
+          onClick={() => {}}
+        >
+          <React.Fragment>
+            <Icon name="settings" /> <Icon name="chevron-down" />
+          </React.Fragment>
+        </IconButton>
+      }
+      list={[
+        { title: 'About', icon: 'info', onClick: () => showAboutModal() },
+        {
+          title: 'Preferences',
+          icon: 'settings',
+          onClick: () => showPreferencesModal(),
+        },
+      ]}
+    />
+  );
+};
+
+export default PreferencesDropdown;
diff --git a/platform/viewer/src/components/PreferencesDropdown/index.js b/platform/viewer/src/components/PreferencesDropdown/index.js
new file mode 100644
index 000000000..edf8641a2
--- /dev/null
+++ b/platform/viewer/src/components/PreferencesDropdown/index.js
@@ -0,0 +1 @@
+export { default } from './PreferencesDropdown';
diff --git a/platform/viewer/src/routes/WorkList/WorkList.jsx b/platform/viewer/src/routes/WorkList/WorkList.jsx
index 264bc87e2..d32ef7a73 100644
--- a/platform/viewer/src/routes/WorkList/WorkList.jsx
+++ b/platform/viewer/src/routes/WorkList/WorkList.jsx
@@ -9,13 +9,14 @@ import filtersMeta from './filtersMeta.js';
 import { useAppConfig } from '@state';
 import { useDebounce, useQuery } from '@hooks';
 
+import PreferencesDropdown from '../../components/PreferencesDropdown';
+
 import {
   Icon,
   StudyListExpandedRow,
   Button,
   NavBar,
   Svg,
-  IconButton,
   EmptyStudies,
   StudyListTable,
   StudyListPagination,
@@ -364,17 +365,7 @@ function WorkList({ history, data: studies, dataSource }) {
           <span className="mr-3 text-lg text-common-light">
             FOR INVESTIGATIONAL USE ONLY
           </span>
-          <IconButton
-            variant="text"
-            color="inherit"
-            className="text-primary-active"
-            onClick={() => {}}
-          >
-            <React.Fragment>
-              <Icon name="settings" />
-              <Icon name="chevron-down" />
-            </React.Fragment>
-          </IconButton>
+          <PreferencesDropdown />
         </div>
       </NavBar>
       <StudyListFilter