diff --git a/client/modules/IDE/components/EditableInput.jsx b/client/modules/IDE/components/EditableInput.jsx
index 6315839e..eef5e0b8 100644
--- a/client/modules/IDE/components/EditableInput.jsx
+++ b/client/modules/IDE/components/EditableInput.jsx
@@ -14,7 +14,8 @@ function EditableInput({
   const [isEditing, setIsEditing] = React.useState(false);
   const [currentValue, setCurrentValue] = React.useState(value || '');
   const displayValue = currentValue || emptyPlaceholder;
-  const classes = `editable-input editable-input--${isEditing ? 'is-editing' : 'is-not-editing'}`;
+  const hasValue = currentValue !== '';
+  const classes = `editable-input editable-input--${isEditing ? 'is-editing' : 'is-not-editing'} editable-input--${hasValue ? 'has-value' : 'has-placeholder'}`;
   const inputRef = React.createRef();
 
   React.useEffect(() => {
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index f374f46c..3a98f78d 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -67,7 +67,9 @@
 
 .collection-metadata__description .editable-input__label {
   text-align: left;
+}
 
+.collection-metadata__description .editable-input--has-value .editable-input__label  {
   @include themify() {
     color: getThemifyVariable('primary-text-color');
   }