diff --git a/backend/src/main/resources/i18n/messages_en.properties b/backend/src/main/resources/i18n/messages_en.properties
index 891e5be22..b9f3e0049 100644
--- a/backend/src/main/resources/i18n/messages_en.properties
+++ b/backend/src/main/resources/i18n/messages_en.properties
@@ -3,6 +3,8 @@ action.logout=Logout
 action.add-new=Add New
 action.clear=Clear
 
+heading.shibboleth=Shibboleth { foo }
+
 label.metadata-sources=Metadata Sources
 label.metadata-source=Metadata Source
 label.metadata-providers=Metadata Providers
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 17b5742e3..224f69d34 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -2,7 +2,7 @@
 <nav class="navbar navbar-expand-md fixed-top">
     <a class="navbar-brand" href="https://www.shibboleth.net/" target="_blank">
         <img src="/assets/shibboleth_icon_color_130x130.png" width="30" height="30" class="d-inline-block align-top" alt="Shibboleth Logo - Click to be directed to www.shibboleth.net">
-        <span class="d-lg-inline d-none">Shibboleth</span>
+        <span class="d-lg-inline d-none">{{ 'heading.shibboleth' | i18n:{foo: 'bar'} }}</span>
     </a>
     <span class="navbar-text" i18n="@@label--app">Source Management</span>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar"
diff --git a/ui/src/app/app.component.spec.ts b/ui/src/app/app.component.spec.ts
index 2c78a42c4..d5a11f557 100644
--- a/ui/src/app/app.component.spec.ts
+++ b/ui/src/app/app.component.spec.ts
@@ -4,11 +4,11 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { StoreModule, Store, combineReducers } from '@ngrx/store';
 import { AppComponent } from './app.component';
 
-import { User } from './core/model/user';
 import * as fromRoot from './core/reducer';
-import * as fromVersion from './core/reducer/version.reducer';
 import { NotificationModule } from './notification/notification.module';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { MockI18nPipe, MockI18nService } from '../testing/i18n.stub';
+import { I18nService } from './i18n/service/i18n.service';
 
 @Component({
     template: `
@@ -29,6 +29,9 @@ describe('AppComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            providers: [
+                {provide: I18nService, useClass: MockI18nService }
+            ],
             imports: [
                 NgbDropdownModule.forRoot(),
                 RouterTestingModule,
@@ -39,7 +42,8 @@ describe('AppComponent', () => {
             ],
             declarations: [
                 AppComponent,
-                TestHostComponent
+                TestHostComponent,
+                MockI18nPipe
             ],
         }).compileComponents();
 
@@ -54,7 +58,7 @@ describe('AppComponent', () => {
 
     it('should create the app', async(() => {
         expect(app).toBeTruthy();
-        expect(store.dispatch).toHaveBeenCalledTimes(1);
+        expect(store.dispatch).toHaveBeenCalledTimes(2);
     }));
 
     it(`should have as title 'Shib-UI'`, async(() => {
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index 3a43405b4..61f186ed8 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -7,8 +7,8 @@ import { Store } from '@ngrx/store';
 import * as fromRoot from './core/reducer';
 import { VersionInfo } from './core/model/version';
 import { VersionInfoLoadRequestAction } from './core/action/version.action';
-import { I18nService } from './core/service/i18n.service';
-import { SetLocale } from './core/action/message.action';
+import { I18nService } from './i18n/service/i18n.service';
+import { SetLocale } from './i18n/action/message.action';
 
 @Component({
     selector: 'app-root',
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 140e0df1c..4448e7f37 100644
--- a/ui/src/app/app.module.ts
+++ b/ui/src/app/app.module.ts
@@ -25,6 +25,7 @@ import { WizardModule } from './wizard/wizard.module';
 import { FormModule } from './schema-form/schema-form.module';
 import { environment } from '../environments/environment.prod';
 import { getCurrentLocale } from './shared/util';
+import { I18nModule } from './i18n/i18n.module';
 
 @NgModule({
     declarations: [
@@ -52,6 +53,8 @@ import { getCurrentLocale } from './shared/util';
         HttpClientModule,
         ContentionModule,
         SharedModule,
+        I18nModule.forRoot(),
+        I18nModule,
         AppRoutingModule
     ],
     providers: [
diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts
index a4ae326e7..b5606e630 100644
--- a/ui/src/app/core/core.module.ts
+++ b/ui/src/app/core/core.module.ts
@@ -14,8 +14,6 @@ import { UserEffects } from './effect/user.effect';
 import { HttpClientModule } from '@angular/common/http';
 import { ModalService } from './service/modal.service';
 import { DifferentialService } from './service/differential.service';
-import { I18nService } from './service/i18n.service';
-import { MessageEffects } from './effect/message.effect';
 
 export const COMPONENTS = [];
 
@@ -38,8 +36,7 @@ export class CoreModule {
                 FileService,
                 ModalService,
                 DifferentialService,
-                CanDeactivateGuard,
-                I18nService
+                CanDeactivateGuard
             ]
         };
     }
@@ -48,7 +45,7 @@ export class CoreModule {
 @NgModule({
     imports: [
         StoreModule.forFeature('core', reducers),
-        EffectsModule.forFeature([UserEffects, VersionEffects, MessageEffects]),
+        EffectsModule.forFeature([UserEffects, VersionEffects]),
     ],
 })
 export class RootCoreModule { }
diff --git a/ui/src/app/core/reducer/index.ts b/ui/src/app/core/reducer/index.ts
index 1f1b89960..15098e68e 100644
--- a/ui/src/app/core/reducer/index.ts
+++ b/ui/src/app/core/reducer/index.ts
@@ -1,23 +1,15 @@
 import {
-    ActionReducerMap,
     createSelector,
-    createFeatureSelector,
-    createSelectorFactory,
-    ActionReducer,
-    MetaReducer,
-    combineReducers
+    createFeatureSelector
 } from '@ngrx/store';
 
 import * as fromUser from './user.reducer';
 import * as fromVersion from './version.reducer';
-import * as fromMessages from './message.reducer';
 import * as fromRoot from '../../app.reducer';
-import { getCurrentLanguage, getCurrentCountry } from '../../shared/util';
 
 export interface CoreState {
     user: fromUser.UserState;
     version: fromVersion.VersionState;
-    messages: fromMessages.MessageState;
 }
 
 export interface State extends fromRoot.State {
@@ -26,14 +18,12 @@ export interface State extends fromRoot.State {
 
 export const reducers = {
     user: fromUser.reducer,
-    version: fromVersion.reducer,
-    messages: fromMessages.reducer
+    version: fromVersion.reducer
 };
 
 export const getCoreFeature = createFeatureSelector<CoreState>('core');
 export const getUserStateFn = (state: CoreState) => state.user;
 export const getVersionStateFn = (state: CoreState) => state.version;
-export const getMessageStateFn = (state: CoreState) => state.messages;
 
 export const getUserState = createSelector(getCoreFeature, getUserStateFn);
 export const getUser = createSelector(getUserState, fromUser.getUser);
@@ -44,11 +34,3 @@ export const getVersionState = createSelector(getCoreFeature, (state: CoreState)
 export const getVersionInfo = createSelector(getVersionState, fromVersion.getVersionInfo);
 export const getVersionLoading = createSelector(getVersionState, fromVersion.getVersionIsLoading);
 export const getVersionError = createSelector(getVersionState, fromVersion.getVersionError);
-
-export const getMessageState = createSelector(getCoreFeature, getMessageStateFn);
-export const getLocale = createSelector(getMessageState, fromMessages.getLocale);
-export const getLanguage = createSelector(getLocale, locale => getCurrentLanguage(locale));
-export const getCountry = createSelector(getLocale, locale => getCurrentCountry(locale));
-
-export const getMessages = createSelector(getMessageState, fromMessages.getMessages);
-export const getFetchingMessages = createSelector(getMessageState, fromMessages.isFetching);
diff --git a/ui/src/app/core/action/message.action.ts b/ui/src/app/i18n/action/message.action.ts
similarity index 100%
rename from ui/src/app/core/action/message.action.ts
rename to ui/src/app/i18n/action/message.action.ts
diff --git a/ui/src/app/core/effect/message.effect.ts b/ui/src/app/i18n/effect/message.effect.ts
similarity index 100%
rename from ui/src/app/core/effect/message.effect.ts
rename to ui/src/app/i18n/effect/message.effect.ts
diff --git a/ui/src/app/i18n/i18n.module.ts b/ui/src/app/i18n/i18n.module.ts
new file mode 100644
index 000000000..0373c45c2
--- /dev/null
+++ b/ui/src/app/i18n/i18n.module.ts
@@ -0,0 +1,53 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+
+import { reducers } from './reducer';
+import { HttpClientModule } from '@angular/common/http';
+import { I18nService } from './service/i18n.service';
+import { MessageEffects } from './effect/message.effect';
+import { I18nPipe } from './pipe/i18n.pipe';
+import { CoreModule } from '../core/core.module';
+
+export const COMPONENTS = [];
+export const DIRECTIVES = [];
+export const PIPES = [
+    I18nPipe
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        HttpClientModule,
+        CoreModule
+    ],
+    declarations: [
+        ...PIPES,
+        ...COMPONENTS,
+        ...DIRECTIVES
+    ],
+    exports: [
+        ...PIPES,
+        ...COMPONENTS,
+        ...DIRECTIVES
+    ],
+})
+export class I18nModule {
+    static forRoot() {
+        return {
+            ngModule: RootI18nModule,
+            providers: [
+                I18nService
+            ]
+        };
+    }
+}
+
+@NgModule({
+    imports: [
+        StoreModule.forFeature('i18n', reducers),
+        EffectsModule.forFeature([MessageEffects]),
+    ],
+})
+export class RootI18nModule { }
diff --git a/ui/src/app/i18n/pipe/i18n.pipe.spec.ts b/ui/src/app/i18n/pipe/i18n.pipe.spec.ts
new file mode 100644
index 000000000..840024ab9
--- /dev/null
+++ b/ui/src/app/i18n/pipe/i18n.pipe.spec.ts
@@ -0,0 +1,72 @@
+import { I18nPipe } from './i18n.pipe';
+import { I18nService } from '../service/i18n.service';
+import { CommonModule } from '@angular/common';
+import { StoreModule, combineReducers, Store } from '@ngrx/store';
+
+import * as fromI18n from '../reducer';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { MessagesLoadSuccessAction } from '../action/message.action';
+
+@Component({
+    template: `
+        <span>{{ foo | i18n:{ foo: 'bar' } }}</span>
+    `
+})
+class TestHostComponent {
+    private _foo: string;
+
+    public get foo(): string {
+        return this._foo;
+    }
+
+    public set foo(val: string) {
+        this._foo = val;
+    }
+}
+
+describe('Pipe: I18n translation', () => {
+    let fixture: ComponentFixture<TestHostComponent>;
+    let instance: TestHostComponent;
+    let store: Store<fromI18n.State>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                { provide: I18nService, useValue: {
+                    interpolate: (value: string, interpolated: { [prop: string]: string } = {}): string => {
+                        return Object.entries(interpolated).reduce((current, interpolate) => {
+                            let reg = new RegExp(`{\\s*${interpolate[0]}\\s*}`, 'gm');
+                            return current.replace(reg, interpolate[1]);
+                        }, value);
+                    }
+                } }
+            ],
+            imports: [
+                CommonModule,
+                StoreModule.forRoot({
+                    'message': combineReducers(fromI18n.reducers),
+                })
+            ],
+            declarations: [
+                I18nPipe,
+                TestHostComponent
+            ],
+        });
+        store = TestBed.get(Store);
+
+        spyOn(store, 'dispatch').and.callThrough();
+
+        fixture = TestBed.createComponent(TestHostComponent);
+        instance = fixture.componentInstance;
+    });
+
+    it('should set the correct text', () => {
+        store.dispatch(new MessagesLoadSuccessAction({ foo: 'hi there' }));
+
+        store.select(fromI18n.getMessages).subscribe(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.textContent).toContain('hi there');
+        });
+    });
+});
diff --git a/ui/src/app/i18n/pipe/i18n.pipe.ts b/ui/src/app/i18n/pipe/i18n.pipe.ts
new file mode 100644
index 000000000..20564a169
--- /dev/null
+++ b/ui/src/app/i18n/pipe/i18n.pipe.ts
@@ -0,0 +1,40 @@
+import { PipeTransform, Pipe, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { Store } from '@ngrx/store';
+import * as fromI18n from '../reducer';
+import { Subscription } from 'rxjs';
+import { I18nService } from '../service/i18n.service';
+
+@Pipe({
+    name: 'i18n',
+    pure: false
+})
+export class I18nPipe implements PipeTransform, OnDestroy {
+
+    sub: Subscription;
+
+    messages: { [propName: string]: string } = {};
+
+    value: string;
+
+    constructor(
+        private store: Store<fromI18n.State>,
+        private i18nService: I18nService,
+        private _ref: ChangeDetectorRef
+    ) {
+        this.sub = this.store.select(fromI18n.getMessages).subscribe(messages => {
+            this.messages = messages ? messages : {};
+            this._ref.markForCheck();
+        });
+    }
+
+    transform(value: string, interpolated: { [prop: string]: string } = {}): any {
+        interpolated = interpolated || {};
+        let val = this.messages.hasOwnProperty(value) ? this.messages[value] : value;
+        this.value = this.i18nService.interpolate(val, interpolated);
+        return this.value;
+    }
+
+    ngOnDestroy(): void {
+        this.sub.unsubscribe();
+    }
+}
diff --git a/ui/src/app/i18n/reducer/index.ts b/ui/src/app/i18n/reducer/index.ts
new file mode 100644
index 000000000..68d5fc774
--- /dev/null
+++ b/ui/src/app/i18n/reducer/index.ts
@@ -0,0 +1,31 @@
+import {
+    createSelector,
+    createFeatureSelector
+} from '@ngrx/store';
+
+import * as fromMessages from './message.reducer';
+import * as fromRoot from '../../app.reducer';
+import { getCurrentLanguage, getCurrentCountry } from '../../shared/util';
+
+export interface I18nState {
+    messages: fromMessages.MessageState;
+}
+
+export interface State extends fromRoot.State {
+    core: I18nState;
+}
+
+export const reducers = {
+    messages: fromMessages.reducer
+};
+
+export const getCoreFeature = createFeatureSelector<I18nState>('i18n');
+export const getMessageStateFn = (state: I18nState) => state.messages;
+
+export const getMessageState = createSelector(getCoreFeature, getMessageStateFn);
+export const getLocale = createSelector(getMessageState, fromMessages.getLocale);
+export const getLanguage = createSelector(getLocale, locale => getCurrentLanguage(locale));
+export const getCountry = createSelector(getLocale, locale => getCurrentCountry(locale));
+
+export const getMessages = createSelector(getMessageState, fromMessages.getMessages);
+export const getFetchingMessages = createSelector(getMessageState, fromMessages.isFetching);
diff --git a/ui/src/app/core/reducer/message.reducer.ts b/ui/src/app/i18n/reducer/message.reducer.ts
similarity index 100%
rename from ui/src/app/core/reducer/message.reducer.ts
rename to ui/src/app/i18n/reducer/message.reducer.ts
diff --git a/ui/src/app/core/service/i18n.service.ts b/ui/src/app/i18n/service/i18n.service.ts
similarity index 71%
rename from ui/src/app/core/service/i18n.service.ts
rename to ui/src/app/i18n/service/i18n.service.ts
index d92cfa99d..f3e2d269d 100644
--- a/ui/src/app/core/service/i18n.service.ts
+++ b/ui/src/app/i18n/service/i18n.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { NavigatorService } from './navigator.service';
+import { NavigatorService } from '../../core/service/navigator.service';
 import { getCurrentLanguage, getCurrentCountry, getCurrentLocale } from '../../shared/util';
 
 @Injectable()
@@ -34,4 +34,11 @@ export class I18nService {
     getCurrentLocale(): string {
         return getCurrentLocale(this.navigator.native);
     }
+
+    interpolate(value: string, interpolated: { [prop: string]: string } = {}): string {
+        return Object.entries(interpolated).reduce((current, interpolate) => {
+            let reg = new RegExp(`{\\s*${interpolate[0]}\\s*}`, 'gm');
+            return current.replace(reg, interpolate[1]);
+        }, value);
+    }
 }
diff --git a/ui/src/testing/i18n.stub.ts b/ui/src/testing/i18n.stub.ts
new file mode 100644
index 000000000..947f7a09d
--- /dev/null
+++ b/ui/src/testing/i18n.stub.ts
@@ -0,0 +1,48 @@
+/* istanbul ignore */
+
+import { PipeTransform, Pipe } from '@angular/core';
+
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+@Pipe({
+    name: 'i18n',
+    pure: false
+})
+export class MockI18nPipe implements PipeTransform {
+
+    constructor() {}
+
+    transform(value: string, interpolated: { [prop: string]: string } = {}): any {
+        return value;
+    }
+}
+
+@Injectable()
+export class MockI18nService {
+
+    readonly path = '/messages';
+    readonly base = '/api';
+
+    constructor() { }
+
+    get(locale: string): Observable<any> {
+        return of({});
+    }
+
+    getCurrentLanguage(): string {
+        return 'en';
+    }
+
+    getCurrentCountry(): string {
+        return 'US';
+    }
+
+    getCurrentLocale(): string {
+        return 'en-US';
+    }
+
+    interpolate(value: string, interpolated: { [prop: string]: string } = {}): string {
+        return value;
+    }
+}