diff --git a/src/renderer/BackgroundRenderLayer.ts b/src/renderer/BackgroundRenderLayer.ts
index 8577f58d..ea7bea60 100644
--- a/src/renderer/BackgroundRenderLayer.ts
+++ b/src/renderer/BackgroundRenderLayer.ts
@@ -3,6 +3,7 @@ import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
 import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
 import { TANGO_COLORS } from './Color';
 import { GridCache } from './GridCache';
+import { FLAGS } from './Types';
 
 export class BackgroundRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
@@ -34,9 +35,19 @@ export class BackgroundRenderLayer implements IRenderLayer {
       let row = y + terminal.buffer.ydisp;
       let line = terminal.buffer.lines.get(row);
       for (let x = 0; x < terminal.cols; x++) {
-        const data: number = line[x][CHAR_DATA_ATTR_INDEX];
-        const bg = data & 0x1ff;
-        const flags = data >> 18;
+        const attr: number = line[x][CHAR_DATA_ATTR_INDEX];
+        let bg = attr & 0x1ff;
+        const flags = attr >> 18;
+
+
+        // If inverse flag is on, the background should become the foreground.
+        if (flags & FLAGS.INVERSE) {
+          bg = (attr >> 9) & 0x1ff;
+          // TODO: Is this case still needed
+          if (bg === 257) {
+            bg = 15;
+          }
+        }
 
         const cellState = this._state.cache[x][y];
         const needsRefresh = (bg < 16 && cellState !== bg) || cellState !== null;
diff --git a/src/renderer/ForegroundRenderLayer.ts b/src/renderer/ForegroundRenderLayer.ts
index c6263247..05cceb47 100644
--- a/src/renderer/ForegroundRenderLayer.ts
+++ b/src/renderer/ForegroundRenderLayer.ts
@@ -42,13 +42,6 @@ export class ForegroundRenderLayer implements IRenderLayer {
     const scaledCharWidth = Math.ceil(terminal.charMeasure.width) * window.devicePixelRatio;
     const scaledCharHeight = Math.ceil(terminal.charMeasure.height) * window.devicePixelRatio;
 
-    // TODO: Needs to react to terminal resize
-    // Initialize image data
-    // if (!this._imageData) {
-    //   this._imageData = textCtx.createImageData(scaledCharWidth * this._terminal.cols * window.devicePixelRatio, scaledCharHeight * this._terminal.rows * window.devicePixelRatio);
-    //   this._imageData.data.set(createBackgroundFillData(this._imageData.width, this._imageData.height, 255, 0, 0, 255));
-    // }
-
     // TODO: Ensure that the render is eventually performed
     // Don't bother render until the atlas bitmap is ready
     if (!this._charAtlas) {
@@ -81,13 +74,22 @@ export class ForegroundRenderLayer implements IRenderLayer {
         this._ctx.clearRect(x * scaledCharWidth, y * scaledCharHeight, scaledCharWidth, scaledCharHeight);
 
         // Skip rendering if the character is invisible
-        if (!code || code === 32/*' '*/) {
+        if (!code || code === 32 /*' '*/) {
           continue;
         }
 
         let fg = (attr >> 9) & 0x1ff;
         const flags = attr >> 18;
 
+        // If inverse flag is on, the foreground should become the background.
+        if (flags & FLAGS.INVERSE) {
+          fg = attr & 0x1ff;
+          // TODO: Is this case still needed
+          if (fg === 257) {
+            fg = 0;
+          }
+        }
+
         if (flags & FLAGS.BOLD) {
           this._ctx.font = `bold ${this._ctx.font}`;
           // Convert the FG color to the bold variant
@@ -116,7 +118,7 @@ export class ForegroundRenderLayer implements IRenderLayer {
     // this._ctx.drawImage(this._charAtlas, 0, 0);
   }
 
-  private _drawUnicodeChar(char: string, width: number, fg: number, x: number, y: number, scaledCharWidth: number, scaledCharHeight: number) {
+  private _drawUnicodeChar(char: string, width: number, fg: number, x: number, y: number, scaledCharWidth: number, scaledCharHeight: number): void {
     this._ctx.save();
     this._ctx.font = `${16 * window.devicePixelRatio}px courier`;
     this._ctx.textBaseline = 'top';