diff --git a/ui/cypress/e2e/explorer.test.ts b/ui/cypress/e2e/explorer.test.ts
index 53e2001108..1518efe307 100644
--- a/ui/cypress/e2e/explorer.test.ts
+++ b/ui/cypress/e2e/explorer.test.ts
@@ -129,6 +129,18 @@ describe('DataExplorer', () => {
         })
       })
     })
+
+    it('should error when value is above "670" in bin size', () => {
+      cy.get('.view-options').within(() => {
+        cy.getByTestID('grid--column').within(() => {
+          cy.getByTestID('bin-size-input')
+            .clear()
+            .type('670')
+            .getByTestID('bin-size-input--error')
+            .should('have.length', 1)
+        })
+      })
+    })
   })
 
   describe('numeric input validation when changing number of decimal places in Single Stat', () => {
diff --git a/ui/src/timeMachine/components/view_options/HeatmapOptions.tsx b/ui/src/timeMachine/components/view_options/HeatmapOptions.tsx
index 396b1f5846..c216dfdb9e 100644
--- a/ui/src/timeMachine/components/view_options/HeatmapOptions.tsx
+++ b/ui/src/timeMachine/components/view_options/HeatmapOptions.tsx
@@ -97,7 +97,7 @@ const HeatmapOptions: FunctionComponent<Props> = props => {
     const val = convertUserInputToNumOrNaN(e)
     setBinInput(val)
 
-    if (isNaN(val) || val < 5) {
+    if (isNaN(val) || val < 5 || val > 670) {
       setBinInputStatus(ComponentStatus.Error)
       return
     }
@@ -142,6 +142,7 @@ const HeatmapOptions: FunctionComponent<Props> = props => {
           value={binInput}
           type={InputType.Number}
           onChange={onSetBinSize}
+          testID={'bin-size-input'}
         />
       </Form.Element>
       <h5 className="view-options--header">X Axis</h5>