diff --git a/client/modules/IDE/components/Console.js b/client/modules/IDE/components/Console.js
index bb08e59b..e1401ed9 100644
--- a/client/modules/IDE/components/Console.js
+++ b/client/modules/IDE/components/Console.js
@@ -58,11 +58,20 @@ class Console extends React.Component {
   appendConsoleEvent(consoleEvent) {
     const args = consoleEvent.arguments;
     const method = consoleEvent.method;
-    const nextChild = (
-      <div key={this.children.length} className={`preview-console__${method}`}>
-        {Object.keys(args).map((key) => <span key={`${this.children.length}-${key}`}>{args[key]}</span>)}
-      </div>
-    );
+    let nextChild;
+    if (Object.keys(args).length === 0) {
+      nextChild = (
+        <div key={this.children.length} className="preview-console__undefined">
+          <span key={`${this.children.length}-0`}>{'undefined'}</span>
+        </div>
+      );
+    } else {
+      nextChild = (
+        <div key={this.children.length} className={`preview-console__${method}`}>
+          {Object.keys(args).map((key) => <span key={`${this.children.length}-${key}`}>{args[key]}</span>)}
+        </div>
+      );
+    }
     this.children.push(nextChild);
   }
 
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index f113472b..650e9dfb 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.scss
@@ -25,6 +25,13 @@
 		flex: 1 0 auto;
 	}
 
+	.preview-console__undefined {
+		@include themify(){
+			color: getThemifyVariable('inactive-text-color');
+		}
+		flex: 1 0 auto;
+	}
+
 	.preview-console__error {
 		color: $console-error-color;
 		flex: 1 0 auto;