diff --git a/src/atlasComponents/splashScreen/splashScreen/splashScreen.component.ts b/src/atlasComponents/splashScreen/splashScreen/splashScreen.component.ts
index 6195997038beaa3e8360f6770ade33cb2c2a6a7f..a0ace579bf0a820b8f6fc9bc6e5fc1d5a2de4356 100644
--- a/src/atlasComponents/splashScreen/splashScreen/splashScreen.component.ts
+++ b/src/atlasComponents/splashScreen/splashScreen/splashScreen.component.ts
@@ -1,10 +1,9 @@
 import { AfterViewInit, Component, ElementRef, Pipe, PipeTransform, ViewChild } from "@angular/core";
 import { select, Store } from "@ngrx/store";
-import { fromEvent, Observable, Subject, Subscription, combineLatest } from "rxjs";
-import { bufferTime, filter, map, switchMap, take, withLatestFrom, shareReplay, startWith } from 'rxjs/operators'
-import { AtlasViewerConstantsServices } from "src/atlasViewer/atlasViewer.constantService.service";
+import { fromEvent, Observable, Subject, Subscription } from "rxjs";
+import { bufferTime, filter, map, switchMap, take, withLatestFrom, shareReplay } from 'rxjs/operators'
 import { IavRootStoreInterface } from "src/services/stateStore.service";
-import { viewerStateHelperStoreName, viewerStateNewViewer, viewerStateSelectAtlas } from "src/services/state/viewerState.store.helper";
+import { viewerStateHelperStoreName, viewerStateSelectAtlas } from "src/services/state/viewerState.store.helper";
 import { PureContantService } from "src/util";
 
 @Component({
diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index 7a29bad93bf63959a6e7126aecd3ad7a25fc94a1..444f5cbedab52ea8bb649dc7f8964a05549c63a4 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -18,7 +18,7 @@ import {
   isDefined,
   safeFilter,
 } from "../services/stateStore.service";
-import { AtlasViewerConstantsServices, UNSUPPORTED_INTERVAL, UNSUPPORTED_PREVIEW } from "./atlasViewer.constantService.service";
+import { UNSUPPORTED_INTERVAL, UNSUPPORTED_PREVIEW } from "src/util/constants";
 import { WidgetServices } from "src/widget";
 
 import { LocalFileService } from "src/services/localFile.service";
@@ -96,7 +96,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
   constructor(
     private store: Store<IavRootStoreInterface>,
     private widgetServices: WidgetServices,
-    private constantsService: AtlasViewerConstantsServices,
     private pureConstantService: PureContantService,
     private matDialog: MatDialog,
     private dispatcher$: ActionsSubject,
@@ -220,7 +219,7 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
     )
 
     this.subscriptions.push(
-      this.constantsService.darktheme$.subscribe(flag => {
+      this.pureConstantService.darktheme$.subscribe(flag => {
         this.rd.setAttribute(document.body, 'darktheme', flag.toString())
       }),
     )
diff --git a/src/atlasViewer/atlasViewer.constantService.service.spec.ts b/src/atlasViewer/atlasViewer.constantService.service.spec.ts
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/atlasViewer/atlasViewer.constantService.service.ts b/src/atlasViewer/atlasViewer.constantService.service.ts
deleted file mode 100644
index aeff9445ec2fe209b1778221a1048342f021a657..0000000000000000000000000000000000000000
--- a/src/atlasViewer/atlasViewer.constantService.service.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-import { HttpClient, HttpHeaders } from "@angular/common/http";
-import { Injectable, OnDestroy } from "@angular/core";
-import { select, Store } from "@ngrx/store";
-import { Observable, Subscription } from "rxjs";
-import { map, shareReplay } from "rxjs/operators";
-import { SNACKBAR_MESSAGE } from "src/services/state/uiState.store";
-import { IavRootStoreInterface } from "../services/stateStore.service";
-import { PureContantService } from "src/util";
-
-@Injectable({
-  providedIn : 'root',
-})
-
-export class AtlasViewerConstantsServices implements OnDestroy {
-
-  public darktheme: boolean = false
-  public darktheme$: Observable<boolean>
-
-  public citationToastDuration = 7e3
-
-  /**
-   * Timeout can be longer, since configs are lazy loaded.
-   */
-  private TIMEOUT = 16000
-
-  // instead of using window.location.href, which includes query param etc
-  public backendUrl = (BACKEND_URL && `${BACKEND_URL}/`.replace(/\/\/$/, '/')) || `${window.location.origin}${window.location.pathname}`
-
-  public templateUrls = Array(100)
-
-  /* to be provided by KG in future */
-  private _mapArray: Array<[string, string[]]> = [
-    [ 'JuBrain Cytoarchitectonic Atlas' ,
-      [
-        'res/json/pmapsAggregatedData.json',
-        'res/json/receptorAggregatedData.json',
-      ],
-    ],
-    [
-      'Fibre Bundle Atlas - Short Bundle',
-      [
-        'res/json/swmAggregatedData.json',
-      ],
-    ],
-    [
-      'Allen Mouse Common Coordinate Framework v3 2015',
-      [
-        'res/json/allenAggregated.json',
-      ],
-    ],
-    [
-      'Fibre Bundle Atlas - Long Bundle',
-      [
-        'res/json/dwmAggregatedData.json',
-      ],
-    ],
-    [
-      'Whole Brain (v2.0)',
-      [
-        'res/json/waxholmAggregated.json',
-      ],
-    ],
-  ]
-
-  public mapParcellationNameToFetchUrl: Map<string, string[]> = new Map(this._mapArray)
-  public spatialSearchUrl = 'https://kg-int.humanbrainproject.org/solr/'
-  public spatialResultsPerPage = 10
-
-  public chartBaseStyle = {
-    fill : 'origin',
-  }
-
-  public chartSdStyle = {
-    fill : false,
-    backgroundColor : 'rgba(0,0,0,0)',
-    borderDash : [10, 3],
-    pointRadius : 0,
-    pointHitRadius : 0,
-  }
-
-  public minReqMD = `
-# Hmm... it seems like we hit a snag
-It seems your browser has trouble loading interactive atlas viewer.
-Interactive atlas viewer requires **webgl2.0**, and the \`EXT_color_buffer_float\` extension enabled.
-- We recommend using _Chrome >= 56_ or _Firefox >= 51_. You can check your browsers' support of webgl2.0 by visiting <https://caniuse.com/#feat=webgl2>
-- If you are on _Chrome < 56_ or _Firefox < 51_, you may be able to enable **webgl2.0** by turning on experimental flag <https://get.webgl.org/webgl2/enable.html>.
-- If you are on an Android device we recommend _Chrome for Android_ or _Firefox for Android_.
-- Unfortunately, Safari and iOS devices currently do not support **webgl2.0**: <https://webkit.org/status/#specification-webgl-2>
-`
-  public minReqModalHeader = `Hmm... it seems your browser and is having trouble loading interactive atlas viewer`
-  public minReqWebGl2 = `Your browser does not support WebGL2.`
-  public minReqColorBufferFloat = `Your browser does not support EXT_color_bugger_float extension`
-
-  public mobileWarningHeader = `Power and Network Usage warning`
-  public mobileWarning = `It looks like you are on a mobile device. Please note that the atlas viewer is power and network usage intensive.`
-
-  /**
-   * When the selected regions becomes exceedingly many, referer header often gets too hard
-   * in nginx, it can result in 400 header to large
-   * as result, trim referer to only template and parcellation selected
-   */
-  private getScopedReferer(): string {
-    const url = new URL(window.location.href)
-    url.searchParams.delete('regionsSelected')
-    return url.toString()
-  }
-
-  public getHttpHeader(): HttpHeaders {
-    const header = new HttpHeaders()
-    header.set('referrer', this.getScopedReferer())
-    return header
-  }
-
-  public getFetchOption(): RequestInit {
-    return {
-      referrer: this.getScopedReferer(),
-    }
-  }
-
-  /**
-   * message when user on hover a segment or landmark
-   */
-  public toggleMessage: string = 'double click to toggle select, right click to search'
-
-  /**
-   * Observable for showing config modal
-   */
-  public showConfigTitle: string = 'Settings'
-
-  public incorrectParcellationNameSearchParam(title) {
-    return `The selected parcellation - ${title} - is not available. The the first parcellation of the template is selected instead.`
-  }
-
-  public incorrectTemplateNameSearchParam(title) {
-    return `The selected template - ${title} - is not available.`
-  }
-
-  constructor(
-    private store$: Store<IavRootStoreInterface>,
-    private http: HttpClient,
-    private pureConstantService: PureContantService
-  ) {
-
-    this.darktheme$ = this.store$.pipe(
-      select('viewerState'),
-      select('templateSelected'),
-      map(template => {
-        if (!template) { return false }
-        return template.useTheme === 'dark'
-      }),
-      shareReplay(1),
-    )
-
-    this.subscriptions.push(
-      this.darktheme$.subscribe(flag => this.darktheme = flag),
-    )
-    this.pureConstantService.getTemplateEndpoint$.subscribe(arr => {
-      this.totalTemplates = arr.length
-    })
-  }
-
-  private subscriptions: Subscription[] = []
-
-  public ngOnDestroy() {
-    while (this.subscriptions.length > 0) {
-      this.subscriptions.pop().unsubscribe()
-    }
-  }
-
-  public catchError(e: Error | string) {
-    this.store$.dispatch({
-      type: SNACKBAR_MESSAGE,
-      snackbarMessage: e.toString(),
-    })
-  }
-
-}
-
-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
-
diff --git a/src/services/effect/pluginUseEffect.ts b/src/services/effect/pluginUseEffect.ts
index 383347f18ce032bc43ff468fffd44bc4f3fead40..bd0a74772c60d75cceda439cb5402df584c4e2af 100644
--- a/src/services/effect/pluginUseEffect.ts
+++ b/src/services/effect/pluginUseEffect.ts
@@ -3,10 +3,10 @@ import { Effect } from "@ngrx/effects"
 import { select, Store } from "@ngrx/store"
 import { Observable, forkJoin } from "rxjs"
 import { filter, map, startWith, switchMap } from "rxjs/operators"
-import { AtlasViewerConstantsServices } from "src/atlasViewer/atlasViewer.constantService.service"
 import { PluginServices } from "src/plugin/atlasViewer.pluginService.service"
 import { PLUGINSTORE_CONSTANTS, PLUGINSTORE_ACTION_TYPES, pluginStateSelectorInitManifests } from 'src/services/state/pluginState.helper'
 import { HttpClient } from "@angular/common/http"
+import { getHttpHeader } from "src/util/constants"
 
 @Injectable({
   providedIn: 'root',
@@ -19,7 +19,6 @@ export class PluginServiceUseEffect {
 
   constructor(
     store$: Store<any>,
-    constantService: AtlasViewerConstantsServices,
     pluginService: PluginServices,
     http: HttpClient
   ) {
@@ -34,7 +33,7 @@ export class PluginServiceUseEffect {
       switchMap(arr => forkJoin(
         arr.map(([_source, url]) => 
           http.get(url, {
-            headers: constantService.getHttpHeader(),
+            headers: getHttpHeader(),
             responseType: 'json'
           })
         )
diff --git a/src/ui/layerbrowser/layerBrowserComponent/layerbrowser.component.ts b/src/ui/layerbrowser/layerBrowserComponent/layerbrowser.component.ts
index 4641e4ca4f72f187ddfd27771a50d74a4f5d06df..72a0687e3c67ec3cd078aed5a6bb9d309b9445f4 100644
--- a/src/ui/layerbrowser/layerBrowserComponent/layerbrowser.component.ts
+++ b/src/ui/layerbrowser/layerBrowserComponent/layerbrowser.component.ts
@@ -53,7 +53,7 @@ export class LayerBrowser implements OnInit, OnDestroy {
 
   constructor(
     private store: Store<any>,
-    private constantsService: PureContantService,
+    private pureConstantSvc: PureContantService,
     private log: LoggingService,
   ) {
     this.ngLayers$ = store.pipe(
@@ -109,7 +109,7 @@ export class LayerBrowser implements OnInit, OnDestroy {
       startWith(false)
     )
 
-    this.darktheme$ = this.constantsService.darktheme$.pipe(
+    this.darktheme$ = this.pureConstantSvc.darktheme$.pipe(
       shareReplay(1),
     )
 
diff --git a/src/util/constants.ts b/src/util/constants.ts
index 773b99b8bd254b0305697777f5e700bd06bb1584..01f4bc78af5a6fe058e8250300799a10cf46df9e 100644
--- a/src/util/constants.ts
+++ b/src/util/constants.ts
@@ -116,3 +116,16 @@ export const compareLandmarksChanged: (prevLandmarks: any[], newLandmarks: any[]
 
 export const CYCLE_PANEL_MESSAGE = `[spacebar] to cycle through views`
 export const BS_ENDPOINT = new InjectionToken<string>('BS_ENDPOINT')
+
+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
diff --git a/src/util/pureConstant.service.ts b/src/util/pureConstant.service.ts
index 6853c08d3423ef015aa9bee511db032d16fec1d9..e49835760ba9f3828e919179faeb859a9ada6204 100644
--- a/src/util/pureConstant.service.ts
+++ b/src/util/pureConstant.service.ts
@@ -7,7 +7,7 @@ import { HttpClient } from "@angular/common/http";
 import { viewerStateFetchedTemplatesSelector, viewerStateSetFetchedAtlases } from "src/services/state/viewerState.store.helper";
 import { AtlasWorkerService } from "src/atlasViewer/atlasViewer.workerService.service";
 import { LoggingService } from "src/logging";
-import { viewerStateFetchedAtlasesSelector } from "src/services/state/viewerState/selectors";
+import { viewerStateFetchedAtlasesSelector, viewerStateSelectedTemplateSelector } from "src/services/state/viewerState/selectors";
 import { BS_ENDPOINT } from "src/util/constants";
 import { flattenReducer } from 'common/util'
 import { TAtlas, TId, TParc, TRegion, TRegionDetail, TSpaceFull, TSpaceSummary } from "./siibraApiConstants/types";
@@ -247,7 +247,8 @@ Raise/track issues at github repo: <a target = "_blank" href = "${this.repoUrl}"
     @Inject(BS_ENDPOINT) private bsEndpoint: string,
   ){
     this.darktheme$ = this.store.pipe(
-      select(state => state?.viewerState?.templateSelected?.useTheme === 'dark')
+      select(viewerStateSelectedTemplateSelector),
+      map(tmpl => tmpl?.useTheme === 'dark')
     )
 
     this.useTouchUI$ = this.store.pipe(