diff --git a/src/app/shared/object-collection/object-collection.component.spec.ts b/src/app/shared/object-collection/object-collection.component.spec.ts
index a56a3e56dc..6793042f35 100644
--- a/src/app/shared/object-collection/object-collection.component.spec.ts
+++ b/src/app/shared/object-collection/object-collection.component.spec.ts
@@ -4,7 +4,7 @@ import { element } from 'protractor';
 import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Config } from '../../../config/config.interface';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
 import { RouterStub } from '../testing/router-stub';
@@ -12,6 +12,7 @@ import { RouterStub } from '../testing/router-stub';
 describe('ObjectCollectionComponent', () => {
   let fixture: ComponentFixture<ObjectCollectionComponent>;
   let objectCollectionComponent: ObjectCollectionComponent;
+
   const queryParam = 'test query';
   const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
   const activatedRouteStub = {
@@ -34,19 +35,21 @@ describe('ObjectCollectionComponent', () => {
   beforeEach(async(() => {
     fixture = TestBed.createComponent(ObjectCollectionComponent);
     objectCollectionComponent = fixture.componentInstance;
+
   }));
   it('should only show the grid component when the viewmode is set to grid', () => {
     objectCollectionComponent.currentMode = ViewMode.Grid;
 
-    // expect(By.css('ds-object-grid')).toEqual(1);
-    // expect(By.css('ds-object-list')).toEqual(0);
+
+    expect(fixture.debugElement.query(By.css('ds-object-grid'))).toBeDefined();
+    expect(fixture.debugElement.query(By.css('ds-object-list'))).toBeNull();
   });
 
   it('should only show the list component when the viewmode is set to list', () => {
     objectCollectionComponent.currentMode = ViewMode.List;
 
-    // expect(By.css('ds-object-list').length).toEqual(1);
-    // expect(By.css('ds-object-grid').length).toEqual(0);
+    expect(fixture.debugElement.query(By.css('ds-object-list'))).toBeDefined();
+    expect(fixture.debugElement.query(By.css('ds-object-grid'))).toBeNull();
   })
 
 });
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.spec.ts b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
index e69de29bb2..a1af8b5a3c 100644
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.spec.ts
@@ -0,0 +1,43 @@
+import { CollectionGridElementComponent } from './collection-grid-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+let collectionGridElementComponent: CollectionGridElementComponent;
+let fixture: ComponentFixture<CollectionGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+
+describe('CollectionGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CollectionGridElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useFactory: (collectionGridElementComponent)}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CollectionGridElementComponent);
+    collectionGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the collection cards in the grid element',()=>{
+    expect(fixture.debugElement.query(By.css('ds-collection-grid-element'))).toBeDefined();
+  })
+})
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts
new file mode 100644
index 0000000000..f6ab7bc6cd
--- /dev/null
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts
@@ -0,0 +1,44 @@
+import { CommunityGridElementComponent } from './community-grid-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { Observable } from 'rxjs/Observable';
+import { By } from '@angular/platform-browser';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { Community } from '../../../core/shared/community.model';
+
+let communityGridElementComponent: CommunityGridElementComponent;
+let fixture: ComponentFixture<CommunityGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+describe('CommunityGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommunityGridElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useFactory: (communityGridElementComponent)}
+      ],
+
+    schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CommunityGridElementComponent);
+    communityGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the community cards in the grid element',()=>{
+    expect(fixture.debugElement.query(By.css('ds-community-grid-element'))).toBeDefined();
+  })
+});
diff --git a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
index 0da99aa697..b4fb9c8029 100644
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
@@ -1,6 +1,44 @@
 import { ItemGridElementComponent } from './item-grid-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../utils/truncate.pipe';
 
-describe('ItemGridElementComponent',()=>{
-  let itemGridElementComponent: ItemGridElementComponent;
+let itemGridElementComponent: ItemGridElementComponent;
+let fixture: ComponentFixture<ItemGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
 
+describe('ItemGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ItemGridElementComponent , TruncatePipe],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useFactory: (itemGridElementComponent)}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(ItemGridElementComponent);
+    itemGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the item cards in the grid element',()=>{
+    expect(fixture.debugElement.query(By.css('ds-item-grid-element'))).toBeDefined();
+  })
 })
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
index 914fb49487..ae63924374 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
@@ -1,2 +1,12 @@
-<a [routerLink]="['/collections/' + dso.id]" class="lead" [innerHTML]="getFirstValue('dc.title')"></a>
-<div *ngIf="dso.shortDescription" class="text-muted" [innerHTML]="getFirstValue('dc.description.abstract')"></div>
+<div class="card">
+  <a [routerLink]="['/collections/' + dso.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="dso.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{dso.name}}</h4>
+    <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
+    <a [routerLink]="['/collections/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+
+  </div>
+</div>
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
index d09ef7d668..2707934c56 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
@@ -1,2 +1,12 @@
-<a [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="getFirstValue('dc.title')"></a>
-<div *ngIf="dso.shortDescription" class="text-muted" [innerHTML]="getFirstValue('dc.description.abstract')"></div>
+<div class="card">
+
+  <a [routerLink]="['/communities/' + dso.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="dso.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{dso.name}}</h4>
+    <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
+    <a [routerLink]="['/communities/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+  </div>
+</div>
diff --git a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
index e69de29bb2..5b02fbe95a 100644
--- a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
@@ -0,0 +1,43 @@
+import { WrapperGridElementComponent } from './wrapper-grid-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+let wrapperGridElementComponent: WrapperGridElementComponent;
+let fixture: ComponentFixture<WrapperGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+
+describe('WrapperGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WrapperGridElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useFactory: (wrapperGridElementComponent)}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(WrapperGridElementComponent);
+    wrapperGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the wrapper element containing the cards',()=>{
+    expect(fixture.debugElement.query(By.css('ds-collection-grid-element'))).toBeDefined();
+  })
+})