diff --git a/src/app/_tests/mocks.ts b/src/app/_tests/mocks.ts
index 438dbf33..c4be745f 100644
--- a/src/app/_tests/mocks.ts
+++ b/src/app/_tests/mocks.ts
@@ -17,7 +17,8 @@ import {
   MultiselectOption,
   Flow,
   FlowItem,
-  Card
+  Card,
+  Spacer
 } from 'src/app/services/xml-parser-service/xmp-parser.service';
 import { org } from '@cruglobal/godtools-shared';
 
@@ -542,3 +543,14 @@ export const mockPageComponent = {
     }
   }
 };
+
+export const mockSpacer = (height = 100): Spacer => {
+  return {
+    height,
+    mode: {
+      name: 'FIXED',
+      ordinal: 0
+    },
+    ...standardTypeValues()
+  };
+};
diff --git a/src/app/new-page/component/content-spacer/content-spacer.component.css b/src/app/new-page/component/content-spacer/content-spacer.component.css
index e69de29b..2cd321df 100644
--- a/src/app/new-page/component/content-spacer/content-spacer.component.css
+++ b/src/app/new-page/component/content-spacer/content-spacer.component.css
@@ -0,0 +1,4 @@
+.spacer {
+  display: block;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/app/new-page/component/content-spacer/content-spacer.component.html b/src/app/new-page/component/content-spacer/content-spacer.component.html
index 8605915c..0b23351f 100644
--- a/src/app/new-page/component/content-spacer/content-spacer.component.html
+++ b/src/app/new-page/component/content-spacer/content-spacer.component.html
@@ -1 +1,6 @@
 <!-- Content Spacer Goes Here -->
+<div
+  class="spacer"
+  *ngIf="mode === 'FIXED'"
+  [ngStyle]="{ 'height.px': height }"
+></div>
diff --git a/src/app/new-page/component/content-spacer/content-spacer.component.spec.ts b/src/app/new-page/component/content-spacer/content-spacer.component.spec.ts
new file mode 100644
index 00000000..6912c3c6
--- /dev/null
+++ b/src/app/new-page/component/content-spacer/content-spacer.component.spec.ts
@@ -0,0 +1,27 @@
+import { SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { mockSpacer } from '../../../_tests/mocks';
+import { ContentSpacerNewComponent } from './content-spacer.component';
+
+describe('ContentSpacerComponent', () => {
+  let component: ContentSpacerNewComponent;
+  let fixture: ComponentFixture<ContentSpacerNewComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ContentSpacerNewComponent]
+    }).compileComponents();
+    fixture = TestBed.createComponent(ContentSpacerNewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('Values are assigned correctly', async () => {
+    component.item = mockSpacer(200);
+    component.ngOnChanges({
+      item: new SimpleChange(null, mockSpacer(200), true)
+    });
+    expect(component.height).toEqual(200);
+    expect(component.mode).toBe('FIXED');
+  });
+});
diff --git a/src/app/new-page/component/content-spacer/content-spacer.component.ts b/src/app/new-page/component/content-spacer/content-spacer.component.ts
index 1c898e08..56972904 100644
--- a/src/app/new-page/component/content-spacer/content-spacer.component.ts
+++ b/src/app/new-page/component/content-spacer/content-spacer.component.ts
@@ -37,8 +37,8 @@ export class ContentSpacerNewComponent implements OnChanges {
               !changes['item'].previousValue ||
               changes['item'].currentValue !== changes['item'].previousValue
             ) {
-              this.mode = '';
-              this.height = 0;
+              this.mode = this.item.mode.name;
+              this.height = this.item.height;
               this.spacer = this.item;
               this.ready = false;
               this.init();