diff --git a/src/app/+item-page/full/full-item-page.component.ts b/src/app/+item-page/full/full-item-page.component.ts
index 741f1e76a7..aea350e58e 100644
--- a/src/app/+item-page/full/full-item-page.component.ts
+++ b/src/app/+item-page/full/full-item-page.component.ts
@@ -18,9 +18,8 @@ import { hasValue } from '../../shared/empty.util';
 import { AuthService } from '../../core/auth/auth.service';
 
 /**
- * This component renders a simple item page.
+ * This component renders a full item page.
  * The route parameter 'id' is used to request the item it represents.
- * All fields of the item that should be displayed, are defined in its template.
  */
 
 @Component({
diff --git a/src/app/+item-page/full/themed-full-item-page.component.ts b/src/app/+item-page/full/themed-full-item-page.component.ts
new file mode 100644
index 0000000000..3d89f489ff
--- /dev/null
+++ b/src/app/+item-page/full/themed-full-item-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { FullItemPageComponent } from './full-item-page.component';
+
+/**
+ * Themed wrapper for FullItemPageComponent
+ */
+@Component({
+  selector: 'ds-themed-full-item-page',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html',
+})
+export class ThemedFullItemPageComponent extends ThemedComponent<FullItemPageComponent> {
+  protected getComponentName(): string {
+    return 'FullItemPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+item-page/full/full-item-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./full-item-page.component`);
+  }
+}
diff --git a/src/app/+item-page/item-page-routing.module.ts b/src/app/+item-page/item-page-routing.module.ts
index b04a783b2f..b259f57dcb 100644
--- a/src/app/+item-page/item-page-routing.module.ts
+++ b/src/app/+item-page/item-page-routing.module.ts
@@ -1,7 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
-import { ItemPageComponent } from './simple/item-page.component';
 import { FullItemPageComponent } from './full/full-item-page.component';
 import { ItemPageResolver } from './item-page.resolver';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
@@ -9,10 +7,12 @@ import { ItemBreadcrumbResolver } from '../core/breadcrumbs/item-breadcrumb.reso
 import { DSOBreadcrumbsService } from '../core/breadcrumbs/dso-breadcrumbs.service';
 import { LinkService } from '../core/cache/builders/link.service';
 import { UploadBitstreamComponent } from './bitstreams/upload/upload-bitstream.component';
-import { UPLOAD_BITSTREAM_PATH, ITEM_EDIT_PATH } from './item-page-routing-paths';
+import { ITEM_EDIT_PATH, UPLOAD_BITSTREAM_PATH } from './item-page-routing-paths';
 import { ItemPageAdministratorGuard } from './item-page-administrator.guard';
 import { MenuItemType } from '../shared/menu/initial-menus-state';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
+import { ThemedItemPageComponent } from './simple/themed-item-page.component';
+import { ThemedFullItemPageComponent } from './full/themed-full-item-page.component';
 
 @NgModule({
   imports: [
@@ -27,12 +27,12 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
         children: [
           {
             path: '',
-            component: ItemPageComponent,
+            component: ThemedItemPageComponent,
             pathMatch: 'full',
           },
           {
             path: 'full',
-            component: FullItemPageComponent,
+            component: ThemedFullItemPageComponent,
           },
           {
             path: ITEM_EDIT_PATH,
diff --git a/src/app/+item-page/item-page.module.ts b/src/app/+item-page/item-page.module.ts
index ed8d872b36..af95411cef 100644
--- a/src/app/+item-page/item-page.module.ts
+++ b/src/app/+item-page/item-page.module.ts
@@ -25,6 +25,8 @@ import { AbstractIncrementalListComponent } from './simple/abstract-incremental-
 import { UntypedItemComponent } from './simple/item-types/untyped-item/untyped-item.component';
 import { JournalEntitiesModule } from '../entity-groups/journal-entities/journal-entities.module';
 import { ResearchEntitiesModule } from '../entity-groups/research-entities/research-entities.module';
+import { ThemedItemPageComponent } from './simple/themed-item-page.component';
+import { ThemedFullItemPageComponent } from './full/themed-full-item-page.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -34,7 +36,9 @@ const ENTRY_COMPONENTS = [
 
 const DECLARATIONS = [
   ItemPageComponent,
+  ThemedItemPageComponent,
   FullItemPageComponent,
+  ThemedFullItemPageComponent,
   MetadataUriValuesComponent,
   ItemPageAuthorFieldComponent,
   ItemPageDateFieldComponent,
diff --git a/src/app/+item-page/simple/themed-item-page.component.ts b/src/app/+item-page/simple/themed-item-page.component.ts
new file mode 100644
index 0000000000..3d04f04acd
--- /dev/null
+++ b/src/app/+item-page/simple/themed-item-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ItemPageComponent } from './item-page.component';
+
+/**
+ * Themed wrapper for ItemPageComponent
+ */
+@Component({
+  selector: 'ds-themed-item-page',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html',
+})
+
+export class ThemedItemPageComponent extends ThemedComponent<ItemPageComponent> {
+  protected getComponentName(): string {
+    return 'ItemPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/+item-page/simple/item-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./item-page.component`);
+  }
+
+}
diff --git a/src/app/+login-page/login-page-routing.module.ts b/src/app/+login-page/login-page-routing.module.ts
index 9fa4a9e5ad..3a48852625 100644
--- a/src/app/+login-page/login-page-routing.module.ts
+++ b/src/app/+login-page/login-page-routing.module.ts
@@ -1,14 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
-import { LoginPageComponent } from './login-page.component';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { I18nBreadcrumbsService } from '../core/breadcrumbs/i18n-breadcrumbs.service';
+import { ThemedLoginPageComponent } from './themed-login-page.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
-      { path: '', pathMatch: 'full', component: LoginPageComponent, resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { breadcrumbKey: 'login', title: 'login.title' } }
+      { path: '', pathMatch: 'full', component: ThemedLoginPageComponent, resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { breadcrumbKey: 'login', title: 'login.title' } }
     ])
   ],
   providers: [
diff --git a/src/app/+login-page/login-page.module.ts b/src/app/+login-page/login-page.module.ts
index 4d3f726c40..4facc82df1 100644
--- a/src/app/+login-page/login-page.module.ts
+++ b/src/app/+login-page/login-page.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { LoginPageComponent } from './login-page.component';
 import { LoginPageRoutingModule } from './login-page-routing.module';
+import { ThemedLoginPageComponent } from './themed-login-page.component';
 
 @NgModule({
   imports: [
@@ -11,7 +12,8 @@ import { LoginPageRoutingModule } from './login-page-routing.module';
     SharedModule,
   ],
   declarations: [
-    LoginPageComponent
+    LoginPageComponent,
+    ThemedLoginPageComponent
   ]
 })
 export class LoginPageModule {
diff --git a/src/app/+login-page/themed-login-page.component.ts b/src/app/+login-page/themed-login-page.component.ts
new file mode 100644
index 0000000000..cdf5932802
--- /dev/null
+++ b/src/app/+login-page/themed-login-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { LoginPageComponent } from './login-page.component';
+
+/**
+ * Themed wrapper for LoginPageComponent
+ */
+@Component({
+  selector: 'ds-themed-login-page',
+  styleUrls: [],
+  templateUrl: './../shared/theme-support/themed.component.html'
+})
+export class ThemedLoginPageComponent extends ThemedComponent<LoginPageComponent> {
+  protected getComponentName(): string {
+    return 'LoginPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+login-page/login-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./login-page.component`);
+  }
+}
diff --git a/src/app/+logout-page/logout-page-routing.module.ts b/src/app/+logout-page/logout-page-routing.module.ts
index 64894c1f87..a5df0fe580 100644
--- a/src/app/+logout-page/logout-page-routing.module.ts
+++ b/src/app/+logout-page/logout-page-routing.module.ts
@@ -1,8 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
-import { LogoutPageComponent } from './logout-page.component';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
+import { ThemedLogoutPageComponent } from './themed-logout-page.component';
 
 @NgModule({
   imports: [
@@ -10,7 +9,7 @@ import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
       {
         canActivate: [AuthenticatedGuard],
         path: '',
-        component: LogoutPageComponent,
+        component: ThemedLogoutPageComponent,
         data: { title: 'logout.title' }
       }
     ])
diff --git a/src/app/+logout-page/logout-page.module.ts b/src/app/+logout-page/logout-page.module.ts
index b085a5117b..59a5459e7f 100644
--- a/src/app/+logout-page/logout-page.module.ts
+++ b/src/app/+logout-page/logout-page.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { LogoutPageComponent } from './logout-page.component';
 import { LogoutPageRoutingModule } from './logout-page-routing.module';
+import { ThemedLogoutPageComponent } from './themed-logout-page.component';
 
 @NgModule({
   imports: [
@@ -11,7 +12,8 @@ import { LogoutPageRoutingModule } from './logout-page-routing.module';
     SharedModule,
   ],
   declarations: [
-    LogoutPageComponent
+    LogoutPageComponent,
+    ThemedLogoutPageComponent
   ]
 })
 export class LogoutPageModule {
diff --git a/src/app/+logout-page/themed-logout-page.component.ts b/src/app/+logout-page/themed-logout-page.component.ts
new file mode 100644
index 0000000000..19e1e2d1d1
--- /dev/null
+++ b/src/app/+logout-page/themed-logout-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { LogoutPageComponent } from './logout-page.component';
+
+/**
+ * Themed wrapper for LogoutPageComponent
+ */
+@Component({
+  selector: 'ds-themed-logout-page',
+  styleUrls: [],
+  templateUrl: './../shared/theme-support/themed.component.html'
+})
+export class ThemedLogoutPageComponent extends ThemedComponent<LogoutPageComponent> {
+  protected getComponentName(): string {
+    return 'LogoutPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+logout-page/logout-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./logout-page.component`);
+  }
+}
diff --git a/src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts b/src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts
new file mode 100644
index 0000000000..68fcf9302f
--- /dev/null
+++ b/src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ForgotEmailComponent } from './forgot-email.component';
+
+/**
+ * Themed wrapper for ForgotEmailComponent
+ */
+@Component({
+  selector: 'ds-themed-forgot-email',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedForgotEmailComponent extends ThemedComponent<ForgotEmailComponent> {
+  protected getComponentName(): string {
+    return 'ForgotEmailComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/forgot-password/forgot-password-email/forgot-email.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./forgot-email.component`);
+  }
+
+}
diff --git a/src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts b/src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts
new file mode 100644
index 0000000000..523f81312a
--- /dev/null
+++ b/src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ForgotPasswordFormComponent } from './forgot-password-form.component';
+
+/**
+ * Themed wrapper for ForgotPasswordFormComponent
+ */
+@Component({
+  selector: 'ds-themed-forgot-password-form',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedForgotPasswordFormComponent extends ThemedComponent<ForgotPasswordFormComponent> {
+  protected getComponentName(): string {
+    return 'ForgotPasswordFormComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/forgot-password/forgot-password-form/forgot-password-form.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./forgot-password-form.component`);
+  }
+}
diff --git a/src/app/forgot-password/forgot-password-routing.module.ts b/src/app/forgot-password/forgot-password-routing.module.ts
index 702de03a9d..2496c4eec6 100644
--- a/src/app/forgot-password/forgot-password-routing.module.ts
+++ b/src/app/forgot-password/forgot-password-routing.module.ts
@@ -2,27 +2,27 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { ItemPageResolver } from '../+item-page/item-page.resolver';
 import { RegistrationResolver } from '../register-email-form/registration.resolver';
-import { ForgotPasswordFormComponent } from './forgot-password-form/forgot-password-form.component';
-import { ForgotEmailComponent } from './forgot-password-email/forgot-email.component';
+import { ThemedForgotPasswordFormComponent } from './forgot-password-form/themed-forgot-password-form.component';
+import { ThemedForgotEmailComponent } from './forgot-password-email/themed-forgot-email.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
         path: '',
-        component: ForgotEmailComponent,
+        component: ThemedForgotEmailComponent,
         data: {title: 'forgot-password.title'},
       },
       {
         path: ':token',
-        component: ForgotPasswordFormComponent,
+        component: ThemedForgotPasswordFormComponent,
         resolve: {registration: RegistrationResolver}
       }
     ])
   ],
   providers: [
     RegistrationResolver,
-    ItemPageResolver
+    ItemPageResolver,
   ]
 })
 /**
diff --git a/src/app/forgot-password/forgot-password.module.ts b/src/app/forgot-password/forgot-password.module.ts
index 94fb482db9..593149d2a5 100644
--- a/src/app/forgot-password/forgot-password.module.ts
+++ b/src/app/forgot-password/forgot-password.module.ts
@@ -6,6 +6,8 @@ import { ForgotPasswordRoutingModule } from './forgot-password-routing.module';
 import { RegisterEmailFormModule } from '../register-email-form/register-email-form.module';
 import { ForgotPasswordFormComponent } from './forgot-password-form/forgot-password-form.component';
 import { ProfilePageModule } from '../profile-page/profile-page.module';
+import { ThemedForgotPasswordFormComponent } from './forgot-password-form/themed-forgot-password-form.component';
+import { ThemedForgotEmailComponent } from './forgot-password-email/themed-forgot-email.component';
 
 @NgModule({
   imports: [
@@ -17,7 +19,9 @@ import { ProfilePageModule } from '../profile-page/profile-page.module';
   ],
   declarations: [
     ForgotEmailComponent,
-    ForgotPasswordFormComponent
+    ThemedForgotEmailComponent,
+    ForgotPasswordFormComponent,
+    ThemedForgotPasswordFormComponent,
   ],
   providers: []
 })
diff --git a/src/app/profile-page/profile-page-routing.module.ts b/src/app/profile-page/profile-page-routing.module.ts
index 4b9f2b7fff..695a78837f 100644
--- a/src/app/profile-page/profile-page-routing.module.ts
+++ b/src/app/profile-page/profile-page-routing.module.ts
@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
-import { ProfilePageComponent } from './profile-page.component';
+import { ThemedProfilePageComponent } from './themed-profile-page.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
-      { path: '', pathMatch: 'full', component: ProfilePageComponent, resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { breadcrumbKey: 'profile', title: 'profile.title' } }
+      { path: '', pathMatch: 'full', component: ThemedProfilePageComponent, resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { breadcrumbKey: 'profile', title: 'profile.title' } }
     ])
   ]
 })
diff --git a/src/app/profile-page/profile-page.module.ts b/src/app/profile-page/profile-page.module.ts
index 54b59c97ce..6fd0c8e4aa 100644
--- a/src/app/profile-page/profile-page.module.ts
+++ b/src/app/profile-page/profile-page.module.ts
@@ -5,6 +5,7 @@ import { ProfilePageRoutingModule } from './profile-page-routing.module';
 import { ProfilePageComponent } from './profile-page.component';
 import { ProfilePageMetadataFormComponent } from './profile-page-metadata-form/profile-page-metadata-form.component';
 import { ProfilePageSecurityFormComponent } from './profile-page-security-form/profile-page-security-form.component';
+import { ThemedProfilePageComponent } from './themed-profile-page.component';
 
 @NgModule({
   imports: [
@@ -17,6 +18,7 @@ import { ProfilePageSecurityFormComponent } from './profile-page-security-form/p
   ],
   declarations: [
     ProfilePageComponent,
+    ThemedProfilePageComponent,
     ProfilePageMetadataFormComponent,
     ProfilePageSecurityFormComponent
   ]
diff --git a/src/app/profile-page/themed-profile-page.component.ts b/src/app/profile-page/themed-profile-page.component.ts
new file mode 100644
index 0000000000..2348d416cf
--- /dev/null
+++ b/src/app/profile-page/themed-profile-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { ProfilePageComponent } from './profile-page.component';
+
+/**
+ * Themed wrapper for ProfilePageComponent
+ */
+@Component({
+  selector: 'ds-themed-profile-page',
+  styleUrls: [],
+  templateUrl: './../shared/theme-support/themed.component.html'
+})
+export class ThemedProfilePageComponent extends ThemedComponent<ProfilePageComponent> {
+  protected getComponentName(): string {
+    return 'ProfilePageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/profile-page/profile-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./profile-page.component`);
+  }
+}
diff --git a/src/app/register-page/create-profile/themed-create-profile.component.ts b/src/app/register-page/create-profile/themed-create-profile.component.ts
new file mode 100644
index 0000000000..3cbc4ad553
--- /dev/null
+++ b/src/app/register-page/create-profile/themed-create-profile.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { CreateProfileComponent } from './create-profile.component';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+
+/**
+ * Themed wrapper for CreateProfileComponent
+ */
+@Component({
+  selector: 'ds-themed-create-profile',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedCreateProfileComponent extends ThemedComponent<CreateProfileComponent> {
+  protected getComponentName(): string {
+    return 'CreateProfileComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/register-page/create-profile/create-profile.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./create-profile.component`);
+  }
+}
diff --git a/src/app/register-page/register-page-routing.module.ts b/src/app/register-page/register-page-routing.module.ts
index 7954d7963a..0fdb92b4ec 100644
--- a/src/app/register-page/register-page-routing.module.ts
+++ b/src/app/register-page/register-page-routing.module.ts
@@ -5,6 +5,7 @@ import { CreateProfileComponent } from './create-profile/create-profile.componen
 import { ItemPageResolver } from '../+item-page/item-page.resolver';
 import { RegistrationResolver } from '../register-email-form/registration.resolver';
 import { EndUserAgreementCookieGuard } from '../core/end-user-agreement/end-user-agreement-cookie.guard';
+import { ThemedCreateProfileComponent } from './create-profile/themed-create-profile.component';
 
 @NgModule({
   imports: [
@@ -16,7 +17,7 @@ import { EndUserAgreementCookieGuard } from '../core/end-user-agreement/end-user
       },
       {
         path: ':token',
-        component: CreateProfileComponent,
+        component: ThemedCreateProfileComponent,
         resolve: {registration: RegistrationResolver},
         canActivate: [EndUserAgreementCookieGuard]
       }
diff --git a/src/app/register-page/register-page.module.ts b/src/app/register-page/register-page.module.ts
index 34f890afe8..b13dbb6afb 100644
--- a/src/app/register-page/register-page.module.ts
+++ b/src/app/register-page/register-page.module.ts
@@ -6,6 +6,7 @@ import { RegisterEmailComponent } from './register-email/register-email.componen
 import { CreateProfileComponent } from './create-profile/create-profile.component';
 import { RegisterEmailFormModule } from '../register-email-form/register-email-form.module';
 import { ProfilePageModule } from '../profile-page/profile-page.module';
+import { ThemedCreateProfileComponent } from './create-profile/themed-create-profile.component';
 
 @NgModule({
   imports: [
@@ -17,7 +18,8 @@ import { ProfilePageModule } from '../profile-page/profile-page.module';
   ],
   declarations: [
     RegisterEmailComponent,
-    CreateProfileComponent
+    CreateProfileComponent,
+    ThemedCreateProfileComponent
   ],
   providers: []
 })