diff --git a/opentech/static_src/src/app/src/components/GroupedListing.js b/opentech/static_src/src/app/src/components/GroupedListing/index.js
similarity index 91%
rename from opentech/static_src/src/app/src/components/GroupedListing.js
rename to opentech/static_src/src/app/src/components/GroupedListing/index.js
index abd6aee1eac07e5e6e01700161465ebb4d7b7fde..8fc959d900f7e4123a51104c8941c55a6496d54c 100644
--- a/opentech/static_src/src/app/src/components/GroupedListing.js
+++ b/opentech/static_src/src/app/src/components/GroupedListing/index.js
@@ -6,7 +6,7 @@ import ListingGroup from '@components/ListingGroup';
 import ListingItem from '@components/ListingItem';
 import ListingDropdown from '@components/ListingDropdown';
 
-// add styles from listing header
+import './styles.scss'
 
 export default class GroupedListing extends React.Component {
     static propTypes = {
@@ -87,7 +87,7 @@ export default class GroupedListing extends React.Component {
     renderItem = group => {
         const { activeItem, onItemSelection } = this.props;
         return (
-            <ListingGroup key={`listing-group-${group.name}`} item={group} ref={this.listRef}>
+            <ListingGroup key={`listing-group-${group.name}`} item={group}>
                 {group.items.map(item => {
                     return <ListingItem
                         selected={!!activeItem && activeItem===item.id}
@@ -116,14 +116,14 @@ export default class GroupedListing extends React.Component {
                 <div className="grouped-listing__dropdown">
                     {!error && !isLoading &&
                         <ListingDropdown
-                            list={this.listRef.current}
-                            error={this.props.isLoading}
-                            items={this.state.orderedItems}
-                            isLoading={this.props.isLoading}
+                            error={error}
+                            isLoading={isLoading}
+                            listRef={this.listRef}
+                            groups={this.state.orderedItems}
                         />
                     }
                 </div>
-                <Listing {...passProps} />
+                <Listing {...passProps} listRef={this.listRef} />
             </div>
         );
     }
diff --git a/opentech/static_src/src/app/src/components/GroupedListing/styles.scss b/opentech/static_src/src/app/src/components/GroupedListing/styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e6f035e4912bf7346ed8c289e910ba3e5c8bd253
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/GroupedListing/styles.scss
@@ -0,0 +1,7 @@
+.grouped-listing {
+    &__dropdown {
+        @include submission-list-item;
+        height: $listing-header-height;
+        padding: 20px;
+    }
+}
diff --git a/opentech/static_src/src/app/src/components/Listing/index.js b/opentech/static_src/src/app/src/components/Listing/index.js
index 92759152fbf5669352af42e6c008197ebaeab889..e7a7cf04e2a8362bb1bd2ae2e804413b7b68b924 100644
--- a/opentech/static_src/src/app/src/components/Listing/index.js
+++ b/opentech/static_src/src/app/src/components/Listing/index.js
@@ -16,6 +16,7 @@ export default class Listing extends React.Component {
         onItemSelection: PropTypes.func,
         renderItem: PropTypes.func.isRequired,
         handleRetry: PropTypes.func,
+        listRef: PropTypes.object,
     };
 
     renderListItems() {
@@ -43,7 +44,7 @@ export default class Listing extends React.Component {
         }
 
         return (
-            <ul className="listing__list">
+            <ul className="listing__list" ref={this.props.listRef}>
                 {items.map(v => renderItem(v))}
             </ul>
         );
diff --git a/opentech/static_src/src/app/src/components/ListingDropdown/index.js b/opentech/static_src/src/app/src/components/ListingDropdown/index.js
index 99031a571303ac3c437a6574ebbc9aa86be3dde4..0715fee5f31bf29e172fa08d2c1ff412d85c9878 100644
--- a/opentech/static_src/src/app/src/components/ListingDropdown/index.js
+++ b/opentech/static_src/src/app/src/components/ListingDropdown/index.js
@@ -3,25 +3,25 @@ import PropTypes from 'prop-types';
 
 export default class ListingDropdown extends React.Component {
     static propTypes = {
-        list: PropTypes.object,
-        items: PropTypes.array,
+        listRef: PropTypes.object,
+        groups: PropTypes.array,
     }
 
     handleChange(e) {
         const groupHeaderPosition = document.getElementById(e.target.value).offsetTop - 75;
 
-        this.props.list.scrollTo({
+        this.props.listRef.current.scrollTo({
             top: groupHeaderPosition
         })
     }
 
     renderListDropdown() {
-        const { items } = this.props;
+        const { groups } = this.props;
 
         return (
             <form className="form form__select">
                 <select onChange={(e) => this.handleChange(e)} aria-label="Jump to listing group">
-                    {items.map(group => {
+                    {groups.map(group => {
                         return (
                             <option key={`listing-heading-${group.name}`} value={group.name}>{group.name}</option>
                         )