diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index 0c2c749811b5318b3f4e2ab6eac2cf1a80c39f05..fbb7fe151b36d405db40a19988dc8aa5d3076308 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -1,12 +1,12 @@
 import { Component, HostBinding, ViewChild, ViewContainerRef, OnDestroy, OnInit, TemplateRef, Injector } from "@angular/core";
 import { Store, select } from "@ngrx/store";
 import { ViewerStateInterface, isDefined, FETCHED_SPATIAL_DATA, UPDATE_SPATIAL_DATA, TOGGLE_SIDE_PANEL, safeFilter } from "../services/stateStore.service";
-import { Observable, Subscription, combineLatest } from "rxjs";
-import { map, filter, distinctUntilChanged, delay, concatMap, debounceTime } from "rxjs/operators";
+import { Observable, Subscription, combineLatest, interval, merge, of } from "rxjs";
+import { map, filter, distinctUntilChanged, delay, concatMap, debounceTime, scan } from "rxjs/operators";
 import { AtlasViewerDataService } from "./atlasViewer.dataService.service";
 import { WidgetServices } from "./widgetUnit/widgetService.service";
 import { LayoutMainSide } from "../layouts/mainside/mainside.component";
-import { AtlasViewerConstantsServices } from "./atlasViewer.constantService.service";
+import { AtlasViewerConstantsServices, UNSUPPORTED_PREVIEW, UNSUPPORTED_INTERVAL } from "./atlasViewer.constantService.service";
 import { BsModalService } from "ngx-bootstrap/modal";
 import { ModalUnit } from "./modalUnit/modalUnit.component";
 import { AtlasViewerURLService } from "./atlasViewer.urlService.service";
@@ -70,6 +70,9 @@ export class AtlasViewer implements OnDestroy, OnInit {
   public ngLayers : NgLayerInterface[]
   private disposeHandler : any
 
+  public unsupportedPreviewIdx: number = 0
+  public unsupportedPreviews: any[] = UNSUPPORTED_PREVIEW
+
   get toggleMessage(){
     return this.constantsService.toggleMessage
   }
@@ -204,6 +207,23 @@ export class AtlasViewer implements OnDestroy, OnInit {
   ngOnInit() {
     this.meetsRequirement = this.meetsRequirements()
 
+    if (!this.meetsRequirement) {
+      merge(
+        of(-1),
+        interval(UNSUPPORTED_INTERVAL)
+      ).pipe(
+        map(v => {
+          let idx = v
+          while (idx < 0) {
+            idx = v + this.unsupportedPreviews.length
+          }
+          return idx % this.unsupportedPreviews.length
+        })
+      ).subscribe(val => {
+        this.unsupportedPreviewIdx = val
+      })
+    }
+
     this.subscriptions.push(
       this.showHelp$.subscribe(() => 
         this.modalService.show(ModalUnit, {
diff --git a/src/atlasViewer/atlasViewer.constantService.service.ts b/src/atlasViewer/atlasViewer.constantService.service.ts
index 17c926b6b55ea6b27b9a973ff9e80f693ae81524..680be189a071d97f57de41b933872bec54dbd2cb 100644
--- a/src/atlasViewer/atlasViewer.constantService.service.ts
+++ b/src/atlasViewer/atlasViewer.constantService.service.ts
@@ -133,6 +133,12 @@ export class AtlasViewerConstantsServices{
     pointHitRadius : 0,
   }
 
+  public minReqExplaner = `
+  - Interactive atlas viewer requires **webgl2.0**, and the \`EXT_color_buffer_float\` extension enabled.
+  - You can check browsers' support of webgl2.0 by visiting <https://caniuse.com/#feat=webgl2>
+  - Unfortunately, Safari and iOS devices currently do not support **webgl2.0**: <https://webkit.org/status/#specification-webgl-2>
+  `
+
   public minReqMD = `
 # Hmm... it seems like we hit a snag
 It seems your browser has trouble loading interactive atlas viewer. 
@@ -285,6 +291,19 @@ const parseURLToElement = (url:string):HTMLElement=>{
   return el
 }
 
+export const UNSUPPORTED_PREVIEW = [{
+  text: 'Preview of Colin 27 and JuBrain Cytoarchitectonic',
+  previewSrc: './res/image/1.png'
+},{
+  text: 'Preview of Big Brain 2015 Release',
+  previewSrc: './res/image/2.png'
+},{
+  text: 'Preview of Waxholm Rat V2.0',
+  previewSrc: './res/image/3.png'
+}]
+
+export const UNSUPPORTED_INTERVAL = 7000
+
 export const SUPPORT_LIBRARY_MAP : Map<string,HTMLElement> = new Map([
   ['jquery@3',parseURLToElement('http://code.jquery.com/jquery-3.3.1.min.js')],
   ['jquery@2',parseURLToElement('http://code.jquery.com/jquery-2.2.4.min.js')],
diff --git a/src/atlasViewer/atlasViewer.style.css b/src/atlasViewer/atlasViewer.style.css
index b58c1862ad96da157037d160caa3efa4bb031e24..54684efb384f85c61a8151518a381de0bf8e8705 100644
--- a/src/atlasViewer/atlasViewer.style.css
+++ b/src/atlasViewer/atlasViewer.style.css
@@ -123,13 +123,24 @@ div[contextualBlock]
   display:block;
 }
 
-markdown-dom[minReqMd]
+[fixedMouseContextualContainerDirective]
 {
-  margin: 1em;
-  display:block;
+  width: 15rem;
 }
 
-[fixedMouseContextualContainerDirective]
+div[minReq]
 {
-  width: 15rem;
+  width: 100%;
+  height: 100%;
+}
+
+div[imageContainer]
+{
+  flex-grow: 1;
+  background: no-repeat center / contain;
+}
+
+div.displayCard
+{
+  opacity: 0.8;
 }
\ No newline at end of file
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index f3e8379055b4f3bd58d1329ad1e3756051944de0..6333de1ad9fb50adca6ddda53b14240bfe50e386 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -88,5 +88,34 @@
   </signin-modal>
 </ng-template>
 
-<markdown-dom minReqMd *ngIf = "!meetsRequirement" [markdown] = "constantsService.minReqMD" >
-</markdown-dom>
+<div class="d-flex flex-column" minReq *ngIf="!meetsRequirement">
+  <div class="jumbotron bg-light text-center mb-0">
+    <div>
+      <h1 class="mb-3">
+        <i class="fas fa-exclamation-triangle"></i> Unsupported browser detected
+      </h1>
+      <p>
+        We recommend using the latest version of <a target="_blank" href="https://www.google.com/chrome/">Google Chrome</a> or <a target="_blank" href="https://www.mozilla.org/firefox/">Mozilla Firefox</a> for viewing the interactive viewer.
+      </p>
+      <div class="col-6 d-inline-block text-left">
+        <readmore-component
+          [collapsedHeight]="0">
+          <markdown-dom [markdown]="constantsService.minReqExplaner">
+
+          </markdown-dom>
+        </readmore-component>
+      </div>
+      
+    </div>
+  </div>
+  <ng-container *ngFor="let preview of unsupportedPreviews; let idx = index">
+    <div [hidden]="idx !== unsupportedPreviewIdx" class="text-center mb-3" imageContainer [style.backgroundImage]="'url(' + preview.previewSrc + ')'" >
+      <div class="mt-2 card d-inline-block displayCard">
+        <div class="card-body">
+          {{ preview.text }}
+        </div>
+      </div>
+    </div>
+  </ng-container>
+
+</div>
diff --git a/src/res/images/1.png b/src/res/images/1.png
new file mode 100644
index 0000000000000000000000000000000000000000..7679203bb107042878099931910e5ad1f1d4bb0b
Binary files /dev/null and b/src/res/images/1.png differ
diff --git a/src/res/images/2.png b/src/res/images/2.png
new file mode 100644
index 0000000000000000000000000000000000000000..acbbe12a882399ea903a4e97165881c92ae5b67e
Binary files /dev/null and b/src/res/images/2.png differ
diff --git a/src/res/images/3.png b/src/res/images/3.png
new file mode 100644
index 0000000000000000000000000000000000000000..713c48ce7f18092dffb651a58c250978da91d289
Binary files /dev/null and b/src/res/images/3.png differ