diff --git a/packages/phoenix-app/src/app/app.module.ts b/packages/phoenix-app/src/app/app.module.ts
index 5ec070e58..b6876d540 100644
--- a/packages/phoenix-app/src/app/app.module.ts
+++ b/packages/phoenix-app/src/app/app.module.ts
@@ -3,18 +3,18 @@ import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
-import { HomeComponent } from './components/home/home.component';
+import { HomeComponent } from './home/home.component';
 import { GeometryComponent } from './sections/geometry/geometry.component';
 import { AtlasComponent } from './sections/atlas/atlas.component';
 import { LHCbComponent } from './sections/lhcb/lhcb.component';
 import { CMSComponent } from './sections/cms/cms.component';
 import { TrackmlComponent } from './sections/trackml/trackml.component';
-import { NavComponent } from './components/nav/nav.component';
+import { NavComponent } from 'phoenix-ui';
 import { RouterModule, Routes } from '@angular/router';
 import { PlaygroundComponent } from './sections/playground/playground.component';
-import { AttributePipe } from './services/extras/attribute.pipe';
+import { AttributePipe } from 'phoenix-ui';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { UiMenuComponent } from './components/ui-menu/ui-menu.component';
+import { UiMenuComponent } from 'phoenix-ui';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
@@ -22,37 +22,37 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { CollectionsInfoComponent } from './components/ui-menu/collections-info/collections-info.component';
+import { CollectionsInfoComponent } from 'phoenix-ui';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { MenuToggleComponent } from './components/ui-menu/menu-toggle/menu-toggle.component';
-import { CollectionsInfoOverlayComponent } from './components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component';
-import { IoOptionsComponent } from './components/ui-menu/io-options/io-options.component';
-import { IOOptionsDialogComponent } from './components/ui-menu/io-options/io-options-dialog/io-options-dialog.component';
-import { OverlayViewComponent } from './components/ui-menu/overlay-view/overlay-view.component';
-import { ObjectSelectionComponent } from './components/ui-menu/object-selection/object-selection.component';
-import { ObjectSelectionOverlayComponent } from './components/ui-menu/object-selection/object-selection-overlay/object-selection-overlay.component';
-import { EventSelectorComponent } from './components/ui-menu/event-selector/event-selector.component';
-import { ObjectClippingComponent } from './components/ui-menu/object-clipping/object-clipping.component';
+import { MenuToggleComponent } from 'phoenix-ui';
+import { CollectionsInfoOverlayComponent } from 'phoenix-ui';
+import { IoOptionsComponent } from 'phoenix-ui';
+import { IOOptionsDialogComponent } from 'phoenix-ui';
+import { OverlayViewComponent } from 'phoenix-ui';
+import { ObjectSelectionComponent } from 'phoenix-ui';
+import { ObjectSelectionOverlayComponent } from 'phoenix-ui';
+import { EventSelectorComponent } from 'phoenix-ui';
+import { ObjectClippingComponent } from 'phoenix-ui';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { DarkThemeComponent } from './components/ui-menu/dark-theme/dark-theme.component';
-import { AutoRotateComponent } from './components/ui-menu/auto-rotate/auto-rotate.component';
-import { ViewOptionsComponent } from './components/ui-menu/view-options/view-options.component';
-import { OverlayViewWindowComponent } from './components/ui-menu/overlay-view/overlay-view-window/overlay-view-window.component';
-import { ExperimentInfoComponent } from './components/ui-menu/experiment-info/experiment-info.component';
-import { InfoPanelComponent } from './components/ui-menu/info-panel/info-panel.component';
-import { InfoPanelOverlayComponent } from './components/ui-menu/info-panel/info-panel-overlay/info-panel-overlay.component';
-import { OverlayComponent } from './components/ui-menu/overlay/overlay.component';
-import { MainViewToggleComponent } from './components/ui-menu/main-view-toggle/main-view-toggle.component';
-import { ZoomControlsComponent } from './components/ui-menu/zoom-controls/zoom-controls.component';
-import { TreeMenuComponent } from './components/ui-menu/tree-menu/tree-menu.component';
+import { DarkThemeComponent } from 'phoenix-ui';
+import { AutoRotateComponent } from 'phoenix-ui';
+import { ViewOptionsComponent } from 'phoenix-ui';
+import { OverlayViewWindowComponent } from 'phoenix-ui';
+import { ExperimentInfoComponent } from 'phoenix-ui';
+import { InfoPanelComponent } from 'phoenix-ui';
+import { InfoPanelOverlayComponent } from 'phoenix-ui';
+import { OverlayComponent } from 'phoenix-ui';
+import { MainViewToggleComponent } from 'phoenix-ui';
+import { ZoomControlsComponent } from 'phoenix-ui';
+import { TreeMenuComponent } from 'phoenix-ui';
 import { MatIconModule } from '@angular/material/icon';
-import { TreeMenuItemComponent } from './components/ui-menu/tree-menu/tree-menu-item/tree-menu-item.component';
-import { PhoenixMenuComponent } from './components/phoenix-menu/phoenix-menu.component';
-import { PhoenixMenuItemComponent } from './components/phoenix-menu/pheonix-menu-item/phoenix-menu-item.component';
-import { ConfigSliderComponent } from './components/phoenix-menu/config/config-slider/config-slider.component';
-import { AnimateCameraComponent } from './components/ui-menu/animate-camera/animate-camera.component';
-import { AnimateEventComponent } from './components/ui-menu/animate-event/animate-event.component';
-import { VrToggleComponent } from './components/ui-menu/vr-toggle/vr-toggle.component';
+import { TreeMenuItemComponent } from 'phoenix-ui';
+import { PhoenixMenuComponent } from 'phoenix-ui';
+import { PhoenixMenuItemComponent } from 'phoenix-ui';
+import { ConfigSliderComponent } from 'phoenix-ui';
+import { AnimateCameraComponent } from 'phoenix-ui';
+import { AnimateEventComponent } from 'phoenix-ui';
+import { VrToggleComponent } from 'phoenix-ui';
 import { Ng5SliderModule } from 'ng5-slider';
 
 const routes: Routes = [
diff --git a/packages/phoenix-app/src/app/home/home.component.ts b/packages/phoenix-app/src/app/home/home.component.ts
index c4171d5ac..908f3d82b 100644
--- a/packages/phoenix-app/src/app/home/home.component.ts
+++ b/packages/phoenix-app/src/app/home/home.component.ts
@@ -1,5 +1,5 @@
 import { Component, AfterViewInit } from '@angular/core';
-import { EventDisplayService } from '../../services/event-display.service';
+import { EventDisplayService } from 'phoenix-ui';
 
 @Component({
   selector: 'app-home',
diff --git a/packages/phoenix-app/src/app/sections/atlas/atlas.component.ts b/packages/phoenix-app/src/app/sections/atlas/atlas.component.ts
index 189a1750d..90f2dc112 100644
--- a/packages/phoenix-app/src/app/sections/atlas/atlas.component.ts
+++ b/packages/phoenix-app/src/app/sections/atlas/atlas.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { EventDisplayService } from '../../services/event-display.service';
+import { EventDisplayService } from 'phoenix-ui';
 import { Configuration, PresetView, PhoenixMenuNode, JiveXMLLoader, StateManager } from 'phoenix-event-display';
 import { ActivatedRoute } from '@angular/router';
 
diff --git a/packages/phoenix-app/src/app/sections/cms/cms.component.ts b/packages/phoenix-app/src/app/sections/cms/cms.component.ts
index 93e6f258a..d5101bdf6 100644
--- a/packages/phoenix-app/src/app/sections/cms/cms.component.ts
+++ b/packages/phoenix-app/src/app/sections/cms/cms.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Configuration, PresetView, CMSLoader, ScriptLoader, PhoenixMenuNode } from 'phoenix-event-display';
-import { EventDisplayService } from '../../services/event-display.service';
+import { EventDisplayService } from 'phoenix-ui';
 import { HttpClient } from '@angular/common/http';
 
 @Component({
diff --git a/packages/phoenix-app/src/app/sections/geometry/geometry.component.ts b/packages/phoenix-app/src/app/sections/geometry/geometry.component.ts
index fe471a2f0..a0f9fd6b4 100644
--- a/packages/phoenix-app/src/app/sections/geometry/geometry.component.ts
+++ b/packages/phoenix-app/src/app/sections/geometry/geometry.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { EventDisplayService } from '../../services/event-display.service';
+import { EventDisplayService } from 'phoenix-ui';
 import { Configuration } from 'phoenix-event-display';
 
 @Component({
diff --git a/packages/phoenix-app/src/app/sections/lhcb/lhcb.component.ts b/packages/phoenix-app/src/app/sections/lhcb/lhcb.component.ts
index f75e9dc37..e1bfe0195 100644
--- a/packages/phoenix-app/src/app/sections/lhcb/lhcb.component.ts
+++ b/packages/phoenix-app/src/app/sections/lhcb/lhcb.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { EventDisplayService } from '../../services/event-display.service';
+import { EventDisplayService } from 'phoenix-ui';
 import { HttpClient } from '@angular/common/http';
 import { PhoenixMenuNode, LHCbLoader, Configuration, PresetView } from 'phoenix-event-display';
 
diff --git a/packages/phoenix-app/src/app/sections/playground/playground.component.ts b/packages/phoenix-app/src/app/sections/playground/playground.component.ts
index 6c4495206..3445d56bf 100644
--- a/packages/phoenix-app/src/app/sections/playground/playground.component.ts
+++ b/packages/phoenix-app/src/app/sections/playground/playground.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { EventDisplayService } from '../../services/event-display.service';
+import { EventDisplayService } from 'phoenix-ui';
 import { Configuration, PresetView } from 'phoenix-event-display';
 import { HttpClient } from '@angular/common/http';
 
diff --git a/packages/phoenix-app/src/app/sections/trackml/trackml.component.ts b/packages/phoenix-app/src/app/sections/trackml/trackml.component.ts
index 0c0cdc20d..76d1297e2 100644
--- a/packages/phoenix-app/src/app/sections/trackml/trackml.component.ts
+++ b/packages/phoenix-app/src/app/sections/trackml/trackml.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { EventDisplayService } from '../../services/event-display.service';
+import { EventDisplayService } from 'phoenix-ui';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { PhoenixMenuNode, Configuration, TrackmlLoader, PresetView } from 'phoenix-event-display';
 
diff --git a/packages/phoenix-app/src/phoenix-ui/components/phoenix-menu/index.ts b/packages/phoenix-app/src/phoenix-ui/components/phoenix-menu/index.ts
new file mode 100644
index 000000000..0ff854f20
--- /dev/null
+++ b/packages/phoenix-app/src/phoenix-ui/components/phoenix-menu/index.ts
@@ -0,0 +1,3 @@
+export * from './config/config-slider/config-slider.component';
+export * from './pheonix-menu-item/phoenix-menu-item.component';
+export * from './phoenix-menu.component';
diff --git a/packages/phoenix-app/src/phoenix-ui/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts b/packages/phoenix-app/src/phoenix-ui/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts
index bf3a308b9..e13c35926 100644
--- a/packages/phoenix-app/src/phoenix-ui/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts
+++ b/packages/phoenix-app/src/phoenix-ui/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { PrettySymbols } from 'phoenix-event-display';
-import { EventDisplayService } from 'src/app/services/event-display.service';
+import { EventDisplayService } from '../../../../services/event-display.service';
 
 @Component({
   selector: 'app-collections-info-overlay',
diff --git a/packages/phoenix-app/src/phoenix-ui/components/ui-menu/index.ts b/packages/phoenix-app/src/phoenix-ui/components/ui-menu/index.ts
new file mode 100644
index 000000000..53a942735
--- /dev/null
+++ b/packages/phoenix-app/src/phoenix-ui/components/ui-menu/index.ts
@@ -0,0 +1,26 @@
+export * from './animate-camera/animate-camera.component';
+export * from './animate-event/animate-event.component';
+export * from './auto-rotate/auto-rotate.component';
+export * from './collections-info/collections-info.component';
+export * from './collections-info/collections-info-overlay/collections-info-overlay.component';
+export * from './dark-theme/dark-theme.component';
+export * from './event-selector/event-selector.component';
+export * from './experiment-info/experiment-info.component';
+export * from './info-panel/info-panel.component';
+export * from './info-panel/info-panel-overlay/info-panel-overlay.component';
+export * from './io-options/io-options.component';
+export * from './io-options/io-options-dialog/io-options-dialog.component';
+export * from './main-view-toggle/main-view-toggle.component';
+export * from './menu-toggle/menu-toggle.component';
+export * from './object-clipping/object-clipping.component';
+export * from './object-selection/object-selection.component';
+export * from './object-selection/object-selection-overlay/object-selection-overlay.component';
+export * from './overlay/overlay.component';
+export * from './overlay-view/overlay-view.component';
+export * from './overlay-view/overlay-view-window/overlay-view-window.component';
+export * from './tree-menu/tree-menu.component';
+export * from './tree-menu/tree-menu-item/tree-menu-item.component';
+export * from './view-options/view-options.component';
+export * from './vr-toggle/vr-toggle.component';
+export * from './zoom-controls/zoom-controls.component';
+export * from './ui-menu.component';
diff --git a/packages/phoenix-app/src/phoenix-ui/components/ui-menu/info-panel/info-panel-overlay/info-panel-overlay.component.ts b/packages/phoenix-app/src/phoenix-ui/components/ui-menu/info-panel/info-panel-overlay/info-panel-overlay.component.ts
index 8cb601115..1c552b1a7 100644
--- a/packages/phoenix-app/src/phoenix-ui/components/ui-menu/info-panel/info-panel-overlay/info-panel-overlay.component.ts
+++ b/packages/phoenix-app/src/phoenix-ui/components/ui-menu/info-panel/info-panel-overlay/info-panel-overlay.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { EventDisplayService } from 'src/app/services/event-display.service';
+import { EventDisplayService } from '../../../../services/event-display.service';
 
 /**
  * Component for displaying information from the logger
diff --git a/packages/phoenix-app/src/phoenix-ui/components/ui-menu/zoom-controls/zoom-controls.component.ts b/packages/phoenix-app/src/phoenix-ui/components/ui-menu/zoom-controls/zoom-controls.component.ts
index a441f6673..79fa5c67c 100644
--- a/packages/phoenix-app/src/phoenix-ui/components/ui-menu/zoom-controls/zoom-controls.component.ts
+++ b/packages/phoenix-app/src/phoenix-ui/components/ui-menu/zoom-controls/zoom-controls.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { EventDisplayService } from 'src/app/services/event-display.service';
+import { EventDisplayService } from '../../../services/event-display.service';
 
 /**
  * Component for adding zoom controls for the main and overlay cameras.
diff --git a/packages/phoenix-app/src/phoenix-ui/index.ts b/packages/phoenix-app/src/phoenix-ui/index.ts
index cb0ff5c3b..06d3e6606 100644
--- a/packages/phoenix-app/src/phoenix-ui/index.ts
+++ b/packages/phoenix-app/src/phoenix-ui/index.ts
@@ -1 +1,4 @@
-export {};
+export * from './components/nav/nav.component';
+export * from './components/phoenix-menu/index';
+export * from './components/ui-menu/index';
+export * from './services/index';
diff --git a/packages/phoenix-app/src/phoenix-ui/ng-package.json b/packages/phoenix-app/src/phoenix-ui/ng-package.json
index 8e6f8394c..4eeb7f4f0 100644
--- a/packages/phoenix-app/src/phoenix-ui/ng-package.json
+++ b/packages/phoenix-app/src/phoenix-ui/ng-package.json
@@ -2,6 +2,10 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/phoenix-ui",
   "lib": {
-    "entryFile": "./index.ts"
+    "entryFile": "./index.ts",
+    "umdModuleIds": {
+      "phoenix-ui": "phoenix-ui"
+    }
+
   }
 }
diff --git a/packages/phoenix-app/src/phoenix-ui/package.json b/packages/phoenix-app/src/phoenix-ui/package.json
index 5fbde859f..b170f29d3 100644
--- a/packages/phoenix-app/src/phoenix-ui/package.json
+++ b/packages/phoenix-app/src/phoenix-ui/package.json
@@ -8,4 +8,4 @@
   "dependencies": {
     "tslib": "^2.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/phoenix-app/src/phoenix-ui/services/index.ts b/packages/phoenix-app/src/phoenix-ui/services/index.ts
new file mode 100644
index 000000000..f2fc5d1a7
--- /dev/null
+++ b/packages/phoenix-app/src/phoenix-ui/services/index.ts
@@ -0,0 +1,2 @@
+export * from './extras/attribute.pipe';
+export * from './event-display.service';
diff --git a/packages/phoenix-app/src/phoenix-ui/tsconfig.lib.json b/packages/phoenix-app/src/phoenix-ui/tsconfig.lib.json
index ef2759c8d..211987803 100644
--- a/packages/phoenix-app/src/phoenix-ui/tsconfig.lib.json
+++ b/packages/phoenix-app/src/phoenix-ui/tsconfig.lib.json
@@ -10,15 +10,12 @@
     "lib": [
       "dom",
       "es2018"
-    ],
-    "skipLibCheck": true
+    ]
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
-    "enableResourceInlining": true,
-    "fullTemplateTypeCheck": true,
-    "enableIvy": false
+    "enableResourceInlining": true
   },
   "exclude": [
     "./test.ts",
diff --git a/packages/phoenix-app/tsconfig.json b/packages/phoenix-app/tsconfig.json
index f28a839e8..2ab03965e 100644
--- a/packages/phoenix-app/tsconfig.json
+++ b/packages/phoenix-app/tsconfig.json
@@ -22,10 +22,7 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "paths": {
-      "phoenix-ui": [
-        "dist/phoenix-ui/phoenix-ui",
-        "dist/phoenix-ui"
-      ]
+      "phoenix-ui": ["./src/phoenix-ui"]
     }
   }
 }