diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js b/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js
index e2f0b6ed6..ea2b8ede9 100644
--- a/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js
+++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js
@@ -319,7 +319,9 @@ class InteractiveImportRow extends Component {
         >
           {
             showReleaseGroupPlaceholder ?
-              <InteractiveImportRowCellPlaceholder /> :
+              <InteractiveImportRowCellPlaceholder
+                isOptional={true}
+              /> :
               releaseGroup
           }
         </TableRowCellButton>
diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css b/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css
index bf4351181..eedd290f4 100644
--- a/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css
+++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css
@@ -5,3 +5,7 @@
   height: 25px;
   border: 2px dashed var(--dangerColor);
 }
+
+.optional {
+  border: 2px dashed var(--gray);
+}
diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css.d.ts b/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css.d.ts
index 3ea877dea..7cf39f160 100644
--- a/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css.d.ts
+++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css.d.ts
@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'optional': string;
   'placeholder': string;
 }
 export const cssExports: CssExports;
diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.js b/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.js
deleted file mode 100644
index b6744d156..000000000
--- a/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import styles from './InteractiveImportRowCellPlaceholder.css';
-
-function InteractiveImportRowCellPlaceholder() {
-  return (
-    <span className={styles.placeholder} />
-  );
-}
-
-export default InteractiveImportRowCellPlaceholder;
diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.tsx b/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.tsx
new file mode 100644
index 000000000..fb3cadf6e
--- /dev/null
+++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.tsx
@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import React from 'react';
+import styles from './InteractiveImportRowCellPlaceholder.css';
+
+interface InteractiveImportRowCellPlaceholderProps {
+  isOptional?: boolean;
+}
+
+function InteractiveImportRowCellPlaceholder(
+  props: InteractiveImportRowCellPlaceholderProps
+) {
+  return (
+    <span
+      className={classNames(
+        styles.placeholder,
+        props.isOptional && styles.optional
+      )}
+    />
+  );
+}
+
+export default InteractiveImportRowCellPlaceholder;