diff --git a/src/components/AnnotationCategoryItem.tsx b/src/components/AnnotationCategoryItem.tsx
index acf1cd3a..9807299e 100644
--- a/src/components/AnnotationCategoryItem.tsx
+++ b/src/components/AnnotationCategoryItem.tsx
@@ -1,14 +1,25 @@
 import React from 'react'
-import { Menu, Space, Checkbox, Tooltip } from 'antd'
+import { Menu, Space, Checkbox, Tooltip, Popover, Button } from 'antd'
+import { SettingOutlined } from '@ant-design/icons'
 import { Category, Type } from './AnnotationCategoryList'
+import ColorSettingsMenu from './ColorSettingsMenu'
 
 const AnnotationGroupItem = ({
   category,
   onChange,
-  checkedAnnotationGroupUids
+  checkedAnnotationGroupUids,
+  onStyleChange,
+  defaultAnnotationGroupStyles
 }: {
   category: Category
   onChange: Function
+  onStyleChange: Function
+  defaultAnnotationGroupStyles: {
+    [annotationGroupUID: string]: {
+      opacity: number
+      color: number[]
+    }
+  }
   checkedAnnotationGroupUids: Set<string>
 }): JSX.Element => {
   const { types } = category
@@ -60,6 +71,32 @@ const AnnotationGroupItem = ({
               >
                 {category.CodeMeaning}
               </Tooltip>
+              <Popover
+                placement='left'
+                overlayStyle={{ width: '350px' }}
+                title='Display Settings'
+                content={() => (
+                  <ColorSettingsMenu
+                    annotationGroupsUIDs={types.reduce(
+                      (acc: string[], type) => {
+                        return [...acc, ...type.uids]
+                      },
+                      []
+                    )}
+                    onStyleChange={onStyleChange}
+                    defaultStyle={
+                      defaultAnnotationGroupStyles[types[0].uids[0]]
+                    }
+                  />
+                )}
+              >
+                <Button
+                  type='primary'
+                  shape='circle'
+                  style={{ marginLeft: '10px' }}
+                  icon={<SettingOutlined />}
+                />
+              </Popover>
             </Checkbox>
           </Space>
           {types.map((type: Type) => {
@@ -72,7 +109,10 @@ const AnnotationGroupItem = ({
               !isChecked &&
               uids.some((uid: string) => checkedAnnotationGroupUids.has(uid))
             return (
-              <div key={`${type.CodingSchemeDesignator}:${type.CodeMeaning}`} style={{ paddingLeft: '25px' }}>
+              <div
+                key={`${type.CodingSchemeDesignator}:${type.CodeMeaning}`}
+                style={{ paddingLeft: '25px' }}
+              >
                 <Checkbox
                   indeterminate={indeterminateType}
                   checked={isChecked}
@@ -88,6 +128,27 @@ const AnnotationGroupItem = ({
                   >
                     {CodeMeaning}
                   </Tooltip>
+                  <Popover
+                    placement='left'
+                    overlayStyle={{ width: '350px' }}
+                    title='Display Settings'
+                    content={() => (
+                      <ColorSettingsMenu
+                        annotationGroupsUIDs={type.uids}
+                        onStyleChange={onStyleChange}
+                        defaultStyle={
+                          defaultAnnotationGroupStyles[type.uids[0]]
+                        }
+                      />
+                    )}
+                  >
+                    <Button
+                      type='primary'
+                      shape='circle'
+                      style={{ marginLeft: '10px' }}
+                      icon={<SettingOutlined />}
+                    />
+                  </Popover>
                 </Checkbox>
               </div>
             )
diff --git a/src/components/AnnotationCategoryList.tsx b/src/components/AnnotationCategoryList.tsx
index 4411d99e..fdcaa33d 100644
--- a/src/components/AnnotationCategoryList.tsx
+++ b/src/components/AnnotationCategoryList.tsx
@@ -65,10 +65,19 @@ const getCategories = (annotationGroups: any): Record<string, Category> => {
 const AnnotationCategoryList = ({
   annotationGroups,
   onChange,
+  onStyleChange,
+  defaultAnnotationGroupStyles,
   checkedAnnotationGroupUids
 }: {
   annotationGroups: dmv.annotation.AnnotationGroup[]
   onChange: Function
+  onStyleChange: Function
+  defaultAnnotationGroupStyles: {
+    [annotationGroupUID: string]: {
+      opacity: number
+      color: number[]
+    }
+  }
   checkedAnnotationGroupUids: Set<string>
 }): JSX.Element => {
   const categories: Record<string, Category> = getCategories(annotationGroups)
@@ -84,6 +93,8 @@ const AnnotationCategoryList = ({
         key={category.CodeMeaning}
         category={category}
         onChange={onChange}
+        onStyleChange={onStyleChange}
+        defaultAnnotationGroupStyles={defaultAnnotationGroupStyles}
         checkedAnnotationGroupUids={checkedAnnotationGroupUids}
       />
     )
diff --git a/src/components/ColorSettingsMenu.tsx b/src/components/ColorSettingsMenu.tsx
new file mode 100644
index 00000000..dda5a75d
--- /dev/null
+++ b/src/components/ColorSettingsMenu.tsx
@@ -0,0 +1,257 @@
+import React from 'react'
+import { Col, Divider, InputNumber, Row, Slider } from 'antd'
+
+interface ColorSettingsMenuProps {
+  annotationGroupsUIDs: string[]
+  defaultStyle: {
+    opacity: number
+    color: number[]
+  }
+  onStyleChange: Function
+}
+
+interface ColorSettingsMenuState {
+  currentStyle: {
+    opacity: number
+    color?: number[]
+  }
+}
+
+/**
+ * React component representing an Annotation Group.
+ */
+class ColorSettingsMenu extends React.Component<
+ColorSettingsMenuProps,
+ColorSettingsMenuState
+> {
+  constructor (props: ColorSettingsMenuProps) {
+    super(props)
+    this.handleOpacityChange = this.handleOpacityChange.bind(this)
+    this.handleColorRChange = this.handleColorRChange.bind(this)
+    this.handleColorGChange = this.handleColorGChange.bind(this)
+    this.handleColorBChange = this.handleColorBChange.bind(this)
+    this.getCurrentColor = this.getCurrentColor.bind(this)
+    this.state = {
+      currentStyle: {
+        opacity: this.props.defaultStyle.opacity,
+        color: this.props.defaultStyle.color
+      }
+    }
+  }
+
+  handleOpacityChange (value: number | null): void {
+    if (value != null) {
+      this.props.annotationGroupsUIDs.forEach((uid) => {
+        this.props.onStyleChange({
+          annotationGroupUID: uid,
+          styleOptions: {
+            opacity: value
+          }
+        })
+      })
+      this.setState({
+        currentStyle: {
+          opacity: value,
+          color: this.state.currentStyle.color
+        }
+      })
+    }
+  }
+
+  handleColorRChange (value: number | number[] | null): void {
+    if (value != null && this.state.currentStyle.color !== undefined) {
+      const color = [
+        Array.isArray(value) ? value[0] : value,
+        this.state.currentStyle.color[1],
+        this.state.currentStyle.color[2]
+      ]
+      this.setState((state) => ({
+        currentStyle: {
+          color: color,
+          opacity: state.currentStyle.opacity
+        }
+      }))
+      this.props.annotationGroupsUIDs.forEach((uid) => {
+        this.props.onStyleChange({
+          annotationGroupUID: uid,
+          styleOptions: { color: color }
+        })
+      })
+    }
+  }
+
+  handleColorGChange (value: number | number[] | null): void {
+    if (value != null && this.state.currentStyle.color !== undefined) {
+      const color = [
+        this.state.currentStyle.color[0],
+        Array.isArray(value) ? value[0] : value,
+        this.state.currentStyle.color[2]
+      ]
+      this.setState((state) => ({
+        currentStyle: {
+          color: color,
+          opacity: state.currentStyle.opacity
+        }
+      }))
+      this.props.annotationGroupsUIDs.forEach((uid) => {
+        this.props.onStyleChange({
+          annotationGroupUID: uid,
+          styleOptions: { color: color }
+        })
+      })
+    }
+  }
+
+  handleColorBChange (value: number | number[] | null): void {
+    if (value != null && this.state.currentStyle.color !== undefined) {
+      const color = [
+        this.state.currentStyle.color[0],
+        this.state.currentStyle.color[1],
+        Array.isArray(value) ? value[0] : value
+      ]
+      this.setState((state) => ({
+        currentStyle: {
+          color: color,
+          opacity: state.currentStyle.opacity
+        }
+      }))
+
+      this.props.annotationGroupsUIDs.forEach((uid) => {
+        this.props.onStyleChange({
+          annotationGroupUID: uid,
+          styleOptions: { color: color }
+        })
+      })
+    }
+  }
+
+  getCurrentColor (): string {
+    const rgb2hex = (values: number[]): string => {
+      const r = values[0]
+      const g = values[1]
+      const b = values[2]
+      return '#' + (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1)
+    }
+
+    if (this.state.currentStyle.color != null) {
+      return rgb2hex(this.state.currentStyle.color)
+    } else {
+      return 'white'
+    }
+  }
+
+  render (): React.ReactNode {
+    let colorSettings
+    if (this.state.currentStyle.color != null) {
+      colorSettings = (
+        <>
+          <Divider plain>Color</Divider>
+          <Row justify='center' align='middle' gutter={[8, 8]}>
+            <Col span={5}>Red</Col>
+            <Col span={14}>
+              <Slider
+                range={false}
+                min={0}
+                max={255}
+                step={1}
+                value={this.state.currentStyle.color[0]}
+                onChange={this.handleColorRChange}
+              />
+            </Col>
+            <Col span={5}>
+              <InputNumber
+                min={0}
+                max={255}
+                size='small'
+                style={{ width: '65px' }}
+                value={this.state.currentStyle.color[0]}
+                onChange={this.handleColorRChange}
+              />
+            </Col>
+          </Row>
+
+          <Row justify='center' align='middle' gutter={[8, 8]}>
+            <Col span={5}>Green</Col>
+            <Col span={14}>
+              <Slider
+                range={false}
+                min={0}
+                max={255}
+                step={1}
+                value={this.state.currentStyle.color[1]}
+                onChange={this.handleColorGChange}
+              />
+            </Col>
+            <Col span={5}>
+              <InputNumber
+                min={0}
+                max={255}
+                size='small'
+                style={{ width: '65px' }}
+                value={this.state.currentStyle.color[1]}
+                onChange={this.handleColorGChange}
+              />
+            </Col>
+          </Row>
+
+          <Row justify='center' align='middle' gutter={[8, 8]}>
+            <Col span={5}>Blue</Col>
+            <Col span={14}>
+              <Slider
+                range={false}
+                min={0}
+                max={255}
+                step={1}
+                value={this.state.currentStyle.color[2]}
+                onChange={this.handleColorBChange}
+              />
+            </Col>
+            <Col span={5}>
+              <InputNumber
+                min={0}
+                max={255}
+                size='small'
+                style={{ width: '65px' }}
+                value={this.state.currentStyle.color[2]}
+                onChange={this.handleColorBChange}
+              />
+            </Col>
+          </Row>
+          <Divider plain />
+        </>
+      )
+    }
+
+    return (
+      <div>
+        {colorSettings}
+        <Row justify='start' align='middle' gutter={[8, 8]}>
+          <Col span={6}>Opacity</Col>
+          <Col span={12}>
+            <Slider
+              range={false}
+              min={0}
+              max={1}
+              step={0.01}
+              value={this.state.currentStyle.opacity}
+              onChange={this.handleOpacityChange}
+            />
+          </Col>
+          <Col span={6}>
+            <InputNumber
+              min={0}
+              max={1}
+              size='small'
+              step={0.1}
+              style={{ width: '65px' }}
+              value={this.state.currentStyle.opacity}
+              onChange={this.handleOpacityChange}
+            />
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+}
+
+export default ColorSettingsMenu
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index b54404e3..18fe97bb 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -82,7 +82,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       this.setState(state => ({
         ...state,
         errorObj: [...state.errorObj, { ...error, source }],
-        errorCategory: [...state.errorCategory, error.type],
+        errorCategory: [...state.errorCategory, error.type]
       }))
     }
 
diff --git a/src/components/SlideViewer.tsx b/src/components/SlideViewer.tsx
index 48d99ee7..782f3e74 100644
--- a/src/components/SlideViewer.tsx
+++ b/src/components/SlideViewer.tsx
@@ -3189,13 +3189,13 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
     }
 
     let annotationGroupMenu
+    const defaultAnnotationGroupStyles: {
+      [annotationGroupUID: string]: {
+        opacity: number
+        color: number[]
+      }
+    } = {}
     if (annotationGroups.length > 0) {
-      const defaultAnnotationGroupStyles: {
-        [annotationGroupUID: string]: {
-          opacity: number
-          color: number[]
-        }
-      } = {}
       const annotationGroupMetadata: {
         [annotationGroupUID: string]: dmv.metadata.MicroscopyBulkSimpleAnnotations
       } = {}
@@ -3610,6 +3610,8 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
                     checkedAnnotationGroupUids={
                     this.state.visibleAnnotationGroupUIDs
                   }
+                    onStyleChange={this.handleAnnotationGroupStyleChange}
+                    defaultAnnotationGroupStyles={defaultAnnotationGroupStyles}
                   />
                 </Menu.SubMenu>
                 )}