diff --git a/installers/charm/osm-nbi/lib/charms/osm_libs/v0/utils.py b/installers/charm/osm-nbi/lib/charms/osm_libs/v0/utils.py
index a0c2378..b7009c4 100644
--- a/installers/charm/osm-nbi/lib/charms/osm_libs/v0/utils.py
+++ b/installers/charm/osm-nbi/lib/charms/osm_libs/v0/utils.py
@@ -136,7 +136,7 @@
 
 # Increment this PATCH version before using `charmcraft publish-lib` or reset
 # to 0 if you are raising the major API version
-LIBPATCH = 1
+LIBPATCH = 2
 
 logger = logging.getLogger(__name__)
 
@@ -164,14 +164,14 @@
 
 
 def check_service_active(container: Container, service_name: str) -> None:
-    """Check if the nbi service is running.
+    """Check if the service is running.
 
     Args:
         container (Container): Container to be checked.
         service_name (str): Name of the service to check.
 
     Raises:
-        CharmError: if nbi service is not running.
+        CharmError: if the service is not running.
     """
     if service_name not in container.get_plan().services:
         raise CharmError(f"{service_name} service not configured yet", WaitingStatus)
@@ -510,7 +510,7 @@
         pod_ip: str,
         user: str = "root",
         workspace_path: str = "/debug.code-workspace",
-    ) -> None:
+    ) -> str:
         return f"code --remote ssh-remote+{user}@{pod_ip} {workspace_path}"
 
     def _restart(self):
diff --git a/installers/charm/osm-nbi/lib/charms/osm_nbi/v0/nbi.py b/installers/charm/osm-nbi/lib/charms/osm_nbi/v0/nbi.py
index 2def702..130b6fa 100644
--- a/installers/charm/osm-nbi/lib/charms/osm_nbi/v0/nbi.py
+++ b/installers/charm/osm-nbi/lib/charms/osm_nbi/v0/nbi.py
@@ -119,13 +119,6 @@
         self.charm = charm
         self._endpoint_name = endpoint_name
 
-        # Observe relation events
-        event_observe_mapping = {
-            charm.on[self._endpoint_name].relation_changed: self._on_relation_changed,
-        }
-        for event, observer in event_observe_mapping.items():
-            self.framework.observe(event, observer)
-
     @property
     def host(self) -> str:
         """Get nbi hostname."""
diff --git a/installers/charm/osm-nbi/metadata.yaml b/installers/charm/osm-nbi/metadata.yaml
index 2c8ce50..7da2b4b 100644
--- a/installers/charm/osm-nbi/metadata.yaml
+++ b/installers/charm/osm-nbi/metadata.yaml
@@ -76,4 +76,4 @@
 
 provides:
   nbi:
-    interface: http
+    interface: nbi
diff --git a/installers/charm/osm-ng-ui/.gitignore b/installers/charm/osm-ng-ui/.gitignore
new file mode 100644
index 0000000..87d0a58
--- /dev/null
+++ b/installers/charm/osm-ng-ui/.gitignore
@@ -0,0 +1,29 @@
+#!/usr/bin/env python3
+# Copyright 2022 Canonical Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may
+# not use this file except in compliance with the License. You may obtain
+# a copy of the License at
+#
+#         http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+#
+# For those usages not covered by the Apache License, Version 2.0 please
+# contact: legal@canonical.com
+#
+# To get in touch with the maintainers, please contact:
+# osm-charmers@lists.launchpad.net
+venv/
+build/
+*.charm
+.tox/
+.coverage
+coverage.xml
+__pycache__/
+*.py[cod]
+.vscode
\ No newline at end of file
diff --git a/installers/charm/osm-ng-ui/.jujuignore b/installers/charm/osm-ng-ui/.jujuignore
new file mode 100644
index 0000000..17c7a8b
--- /dev/null
+++ b/installers/charm/osm-ng-ui/.jujuignore
@@ -0,0 +1,23 @@
+#!/usr/bin/env python3
+# Copyright 2022 Canonical Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may
+# not use this file except in compliance with the License. You may obtain
+# a copy of the License at
+#
+#         http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+#
+# For those usages not covered by the Apache License, Version 2.0 please
+# contact: legal@canonical.com
+#
+# To get in touch with the maintainers, please contact:
+# osm-charmers@lists.launchpad.net
+/venv
+*.py[cod]
+*.charm
diff --git a/installers/charm/osm-ng-ui/CONTRIBUTING.md b/installers/charm/osm-ng-ui/CONTRIBUTING.md
new file mode 100644
index 0000000..c08f76a
--- /dev/null
+++ b/installers/charm/osm-ng-ui/CONTRIBUTING.md
@@ -0,0 +1,78 @@
+<!-- Copyright 2022 Canonical Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may
+not use this file except in compliance with the License. You may obtain
+a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations
+under the License.
+
+For those usages not covered by the Apache License, Version 2.0 please
+contact: legal@canonical.com
+
+To get in touch with the maintainers, please contact:
+osm-charmers@lists.launchpad.net -->
+
+# Contributing
+
+## Overview
+
+This documents explains the processes and practices recommended for contributing enhancements to
+this operator.
+
+- Generally, before developing enhancements to this charm, you should consider [opening an issue
+  ](https://osm.etsi.org/bugzilla/enter_bug.cgi?product=OSM) explaining your use case. (Component=devops, version=master)
+- If you would like to chat with us about your use-cases or proposed implementation, you can reach
+  us at [OSM Juju public channel](https://opensourcemano.slack.com/archives/C027KJGPECA).
+- Familiarising yourself with the [Charmed Operator Framework](https://juju.is/docs/sdk) library
+  will help you a lot when working on new features or bug fixes.
+- All enhancements require review before being merged. Code review typically examines
+  - code quality
+  - test coverage
+  - user experience for Juju administrators this charm.
+- Please help us out in ensuring easy to review branches by rebasing your gerrit patch onto
+  the `master` branch.
+
+## Developing
+
+You can use the environments created by `tox` for development:
+
+```shell
+tox --notest -e unit
+source .tox/unit/bin/activate
+```
+
+### Testing
+
+```shell
+tox -e fmt           # update your code according to linting rules
+tox -e lint          # code style
+tox -e unit          # unit tests
+tox -e integration   # integration tests
+tox                  # runs 'lint' and 'unit' environments
+```
+
+## Build charm
+
+Build the charm in this git repository using:
+
+```shell
+charmcraft pack
+```
+
+### Deploy
+
+```bash
+# Create a model
+juju add-model dev
+# Enable DEBUG logging
+juju model-config logging-config="<root>=INFO;unit=DEBUG"
+# Deploy the charm
+juju deploy ./osm-ng-ui_ubuntu-20.04-amd64.charm \
+    --resource ng-ui-image=opensourcemano/ng-ui:testing-daily
+```
diff --git a/installers/charm/osm-ng-ui/LICENSE b/installers/charm/osm-ng-ui/LICENSE
new file mode 100644
index 0000000..7e9d504
--- /dev/null
+++ b/installers/charm/osm-ng-ui/LICENSE
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2022 Canonical Ltd.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/installers/charm/osm-ng-ui/README.md b/installers/charm/osm-ng-ui/README.md
new file mode 100644
index 0000000..20a6f76
--- /dev/null
+++ b/installers/charm/osm-ng-ui/README.md
@@ -0,0 +1,43 @@
+<!-- Copyright 2022 Canonical Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may
+not use this file except in compliance with the License. You may obtain
+a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations
+under the License.
+
+For those usages not covered by the Apache License, Version 2.0 please
+contact: legal@canonical.com
+
+To get in touch with the maintainers, please contact:
+osm-charmers@lists.launchpad.net -->
+
+<!-- 
+Avoid using this README file for information that is maintained or published elsewhere, e.g.:
+
+* metadata.yaml > published on Charmhub
+* documentation > published on (or linked to from) Charmhub
+* detailed contribution guide > documentation or CONTRIBUTING.md
+
+Use links instead. 
+-->
+
+# OSM NBI
+
+Charmhub package name: osm-ng-ui
+More information: https://charmhub.io/osm-ng-ui
+
+## Other resources
+
+* [Read more](https://osm.etsi.org/docs/user-guide/latest/) 
+
+* [Contributing](https://osm.etsi.org/gitweb/?p=osm/devops.git;a=blob;f=installers/charm/osm-ng-ui/CONTRIBUTING.md)
+
+* See the [Juju SDK documentation](https://juju.is/docs/sdk) for more information about developing and improving charms.
+                                                           
diff --git a/installers/charm/osm-ng-ui/actions.yaml b/installers/charm/osm-ng-ui/actions.yaml
new file mode 100644
index 0000000..6d52c05
--- /dev/null
+++ b/installers/charm/osm-ng-ui/actions.yaml
@@ -0,0 +1,23 @@
+# Copyright 2022 Canonical Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may
+# not use this file except in compliance with the License. You may obtain
+# a copy of the License at
+#
+#         http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+#
+# For those usages not covered by the Apache License, Version 2.0 please
+# contact: legal@canonical.com
+#
+# To get in touch with the maintainers, please contact:
+# osm-charmers@lists.launchpad.net
+#
+#
+# This file populates the Actions tab on Charmhub.
+# See https://juju.is/docs/some-url-to-be-determined/ for a checklist and guidance.
diff --git a/installers/charm/osm-ng-ui/charmcraft.yaml b/installers/charm/osm-ng-ui/charmcraft.yaml
new file mode 100644
index 0000000..25ff590
--- /dev/null
+++ b/installers/charm/osm-ng-ui/charmcraft.yaml
@@ -0,0 +1,34 @@
+# Copyright 2022 Canonical Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may
+# not use this file except in compliance with the License. You may obtain
+# a copy of the License at
+#
+#         http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+#
+# For those usages not covered by the Apache License, Version 2.0 please
+# contact: legal@canonical.com
+#
+# To get in touch with the maintainers, please contact:
+# osm-charmers@lists.launchpad.net
+#
+
+type: charm
+bases:
+  - build-on:
+      - name: "ubuntu"
+        channel: "20.04"
+    run-on:
+      - name: "ubuntu"
+        channel: "20.04"
+
+parts:
+  charm:
+    build-packages:
+      - git
diff --git a/installers/charm/osm-ng-ui/config.yaml b/installers/charm/osm-ng-ui/config.yaml
new file mode 100644
index 0000000..31ffd84
--- /dev/null
+++ b/installers/charm/osm-ng-ui/config.yaml
@@ -0,0 +1,50 @@
+# Copyright 2022 Canonical Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may
+# not use this file except in compliance with the License. You may obtain
+# a copy of the License at
+#
+#         http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+#
+# For those usages not covered by the Apache License, Version 2.0 please
+# contact: legal@canonical.com
+#
+# To get in touch with the maintainers, please contact:
+# osm-charmers@lists.launchpad.net
+#
+#
+# This file populates the Configure tab on Charmhub.
+# See https://juju.is/docs/some-url-to-be-determined/ for a checklist and guidance.
+
+options:
+  # Ingress options
+  external-hostname:
+    default: ""
+    description: |
+      The url that will be configured in the Kubernetes ingress.
+
+      The easiest way of configuring the external-hostname without having the DNS setup is by using
+      a Wildcard DNS like nip.io constructing the url like so:
+        - ng-ui.127.0.0.1.nip.io (valid within the K8s cluster node)
+        - ng-ui.<k8s-worker-ip>.nip.io (valid from outside the K8s cluster node)
+
+      This option is only applicable when the Kubernetes cluster has nginx ingress configured
+      and the charm is related to the nginx-ingress-integrator.
+      See more: https://charmhub.io/nginx-ingress-integrator
+    type: string
+  max-body-size:
+    default: 20
+    description: Max allowed body-size (for file uploads) in megabytes, set to 0 to
+      disable limits.
+    source: default
+    type: int
+    value: 20
+  tls-secret-name:
+    description: TLS secret name to use for ingress.
+    type: string
diff --git a/installers/charm/osm-ng-ui/lib/charms/nginx_ingress_integrator/v0/ingress.py b/installers/charm/osm-ng-ui/lib/charms/nginx_ingress_integrator/v0/ingress.py
new file mode 100644
index 0000000..be2d762
--- /dev/null
+++ b/installers/charm/osm-ng-ui/lib/charms/nginx_ingress_integrator/v0/ingress.py
@@ -0,0 +1,229 @@
+# See LICENSE file for licensing details.
+#   http://www.apache.org/licenses/LICENSE-2.0
+"""Library for the ingress relation.
+
+This library contains the Requires and Provides classes for handling
+the ingress interface.
+
+Import `IngressRequires` in your charm, with two required options:
+    - "self" (the charm itself)
+    - config_dict
+
+`config_dict` accepts the following keys:
+    - service-hostname (required)
+    - service-name (required)
+    - service-port (required)
+    - additional-hostnames
+    - limit-rps
+    - limit-whitelist
+    - max-body-size
+    - owasp-modsecurity-crs
+    - path-routes
+    - retry-errors
+    - rewrite-enabled
+    - rewrite-target
+    - service-namespace
+    - session-cookie-max-age
+    - tls-secret-name
+
+See [the config section](https://charmhub.io/nginx-ingress-integrator/configure) for descriptions
+of each, along with the required type.
+
+As an example, add the following to `src/charm.py`:
+```
+from charms.nginx_ingress_integrator.v0.ingress import IngressRequires
+
+# In your charm's `__init__` method.
+self.ingress = IngressRequires(self, {"service-hostname": self.config["external_hostname"],
+                                      "service-name": self.app.name,
+                                      "service-port": 80})
+
+# In your charm's `config-changed` handler.
+self.ingress.update_config({"service-hostname": self.config["external_hostname"]})
+```
+And then add the following to `metadata.yaml`:
+```
+requires:
+  ingress:
+    interface: ingress
+```
+You _must_ register the IngressRequires class as part of the `__init__` method
+rather than, for instance, a config-changed event handler. This is because
+doing so won't get the current relation changed event, because it wasn't
+registered to handle the event (because it wasn't created in `__init__` when
+the event was fired).
+"""
+
+import logging
+
+from ops.charm import CharmEvents
+from ops.framework import EventBase, EventSource, Object
+from ops.model import BlockedStatus
+
+# The unique Charmhub library identifier, never change it
+LIBID = "db0af4367506491c91663468fb5caa4c"
+
+# Increment this major API version when introducing breaking changes
+LIBAPI = 0
+
+# Increment this PATCH version before using `charmcraft publish-lib` or reset
+# to 0 if you are raising the major API version
+LIBPATCH = 10
+
+logger = logging.getLogger(__name__)
+
+REQUIRED_INGRESS_RELATION_FIELDS = {
+    "service-hostname",
+    "service-name",
+    "service-port",
+}
+
+OPTIONAL_INGRESS_RELATION_FIELDS = {
+    "additional-hostnames",
+    "limit-rps",
+    "limit-whitelist",
+    "max-body-size",
+    "owasp-modsecurity-crs",
+    "path-routes",
+    "retry-errors",
+    "rewrite-target",
+    "rewrite-enabled",
+    "service-namespace",
+    "session-cookie-max-age",
+    "tls-secret-name",
+}
+
+
+class IngressAvailableEvent(EventBase):
+    pass
+
+
+class IngressBrokenEvent(EventBase):
+    pass
+
+
+class IngressCharmEvents(CharmEvents):
+    """Custom charm events."""
+
+    ingress_available = EventSource(IngressAvailableEvent)
+    ingress_broken = EventSource(IngressBrokenEvent)
+
+
+class IngressRequires(Object):
+    """This class defines the functionality for the 'requires' side of the 'ingress' relation.
+
+    Hook events observed:
+        - relation-changed
+    """
+
+    def __init__(self, charm, config_dict):
+        super().__init__(charm, "ingress")
+
+        self.framework.observe(charm.on["ingress"].relation_changed, self._on_relation_changed)
+
+        self.config_dict = config_dict
+
+    def _config_dict_errors(self, update_only=False):
+        """Check our config dict for errors."""
+        blocked_message = "Error in ingress relation, check `juju debug-log`"
+        unknown = [
+            x
+            for x in self.config_dict
+            if x not in REQUIRED_INGRESS_RELATION_FIELDS | OPTIONAL_INGRESS_RELATION_FIELDS
+        ]
+        if unknown:
+            logger.error(
+                "Ingress relation error, unknown key(s) in config dictionary found: %s",
+                ", ".join(unknown),
+            )
+            self.model.unit.status = BlockedStatus(blocked_message)
+            return True
+        if not update_only:
+            missing = [x for x in REQUIRED_INGRESS_RELATION_FIELDS if x not in self.config_dict]
+            if missing:
+                logger.error(
+                    "Ingress relation error, missing required key(s) in config dictionary: %s",
+                    ", ".join(sorted(missing)),
+                )
+                self.model.unit.status = BlockedStatus(blocked_message)
+                return True
+        return False
+
+    def _on_relation_changed(self, event):
+        """Handle the relation-changed event."""
+        # `self.unit` isn't available here, so use `self.model.unit`.
+        if self.model.unit.is_leader():
+            if self._config_dict_errors():
+                return
+            for key in self.config_dict:
+                event.relation.data[self.model.app][key] = str(self.config_dict[key])
+
+    def update_config(self, config_dict):
+        """Allow for updates to relation."""
+        if self.model.unit.is_leader():
+            self.config_dict = config_dict
+            if self._config_dict_errors(update_only=True):
+                return
+            relation = self.model.get_relation("ingress")
+            if relation:
+                for key in self.config_dict:
+                    relation.data[self.model.app][key] = str(self.config_dict[key])
+
+
+class IngressProvides(Object):
+    """This class defines the functionality for the 'provides' side of the 'ingress' relation.
+
+    Hook events observed:
+        - relation-changed
+    """
+
+    def __init__(self, charm):
+        super().__init__(charm, "ingress")
+        # Observe the relation-changed hook event and bind
+        # self.on_relation_changed() to handle the event.
+        self.framework.observe(charm.on["ingress"].relation_changed, self._on_relation_changed)
+        self.framework.observe(charm.on["ingress"].relation_broken, self._on_relation_broken)
+        self.charm = charm
+
+    def _on_relation_changed(self, event):
+        """Handle a change to the ingress relation.
+
+        Confirm we have the fields we expect to receive."""
+        # `self.unit` isn't available here, so use `self.model.unit`.
+        if not self.model.unit.is_leader():
+            return
+
+        ingress_data = {
+            field: event.relation.data[event.app].get(field)
+            for field in REQUIRED_INGRESS_RELATION_FIELDS | OPTIONAL_INGRESS_RELATION_FIELDS
+        }
+
+        missing_fields = sorted(
+            [
+                field
+                for field in REQUIRED_INGRESS_RELATION_FIELDS
+                if ingress_data.get(field) is None
+            ]
+        )
+
+        if missing_fields:
+            logger.error(
+                "Missing required data fields for ingress relation: {}".format(
+                    ", ".join(missing_fields)
+                )
+            )
+            self.model.unit.status = BlockedStatus(
+                "Missing fields for ingress: {}".format(", ".join(missing_fields))
+            )
+
+        # Create an event that our charm can use to decide it's okay to
+        # configure the ingress.
+        self.charm.on.ingress_available.emit()
+
+    def _on_relation_broken(self, _):
+        """Handle a relation-broken event in the ingress relation."""
+        if not self.model.unit.is_leader():
+            return
+
+        # Create an event that our charm can use to remove the ingress resource.
+        self.charm.on.ingress_broken.emit()
diff --git a/installers/charm/osm-ng-ui/lib/charms/observability_libs/v1/kubernetes_service_patch.py b/installers/charm/osm-ng-ui/lib/charms/observability_libs/v1/kubernetes_service_patch.py
new file mode 100644
index 0000000..506dbf0
--- /dev/null
+++ b/installers/charm/osm-ng-ui/lib/charms/observability_libs/v1/kubernetes_service_patch.py
@@ -0,0 +1,291 @@
+# Copyright 2021 Canonical Ltd.
+# See LICENSE file for licensing details.
+#   http://www.apache.org/licenses/LICENSE-2.0
+
+"""# KubernetesServicePatch Library.
+
+This library is designed to enable developers to more simply patch the Kubernetes Service created
+by Juju during the deployment of a sidecar charm. When sidecar charms are deployed, Juju creates a
+service named after the application in the namespace (named after the Juju model). This service by
+default contains a "placeholder" port, which is 65536/TCP.
+
+When modifying the default set of resources managed by Juju, one must consider the lifecycle of the
+charm. In this case, any modifications to the default service (created during deployment), will be
+overwritten during a charm upgrade.
+
+When initialised, this library binds a handler to the parent charm's `install` and `upgrade_charm`
+events which applies the patch to the cluster. This should ensure that the service ports are
+correct throughout the charm's life.
+
+The constructor simply takes a reference to the parent charm, and a list of
+[`lightkube`](https://github.com/gtsystem/lightkube) ServicePorts that each define a port for the
+service. For information regarding the `lightkube` `ServicePort` model, please visit the
+`lightkube` [docs](https://gtsystem.github.io/lightkube-models/1.23/models/core_v1/#serviceport).
+
+Optionally, a name of the service (in case service name needs to be patched as well), labels,
+selectors, and annotations can be provided as keyword arguments.
+
+## Getting Started
+
+To get started using the library, you just need to fetch the library using `charmcraft`. **Note
+that you also need to add `lightkube` and `lightkube-models` to your charm's `requirements.txt`.**
+
+```shell
+cd some-charm
+charmcraft fetch-lib charms.observability_libs.v0.kubernetes_service_patch
+echo <<-EOF >> requirements.txt
+lightkube
+lightkube-models
+EOF
+```
+
+Then, to initialise the library:
+
+For `ClusterIP` services:
+
+```python
+# ...
+from charms.observability_libs.v0.kubernetes_service_patch import KubernetesServicePatch
+from lightkube.models.core_v1 import ServicePort
+
+class SomeCharm(CharmBase):
+  def __init__(self, *args):
+    # ...
+    port = ServicePort(443, name=f"{self.app.name}")
+    self.service_patcher = KubernetesServicePatch(self, [port])
+    # ...
+```
+
+For `LoadBalancer`/`NodePort` services:
+
+```python
+# ...
+from charms.observability_libs.v0.kubernetes_service_patch import KubernetesServicePatch
+from lightkube.models.core_v1 import ServicePort
+
+class SomeCharm(CharmBase):
+  def __init__(self, *args):
+    # ...
+    port = ServicePort(443, name=f"{self.app.name}", targetPort=443, nodePort=30666)
+    self.service_patcher = KubernetesServicePatch(
+        self, [port], "LoadBalancer"
+    )
+    # ...
+```
+
+Port protocols can also be specified. Valid protocols are `"TCP"`, `"UDP"`, and `"SCTP"`
+
+```python
+# ...
+from charms.observability_libs.v0.kubernetes_service_patch import KubernetesServicePatch
+from lightkube.models.core_v1 import ServicePort
+
+class SomeCharm(CharmBase):
+  def __init__(self, *args):
+    # ...
+    tcp = ServicePort(443, name=f"{self.app.name}-tcp", protocol="TCP")
+    udp = ServicePort(443, name=f"{self.app.name}-udp", protocol="UDP")
+    sctp = ServicePort(443, name=f"{self.app.name}-sctp", protocol="SCTP")
+    self.service_patcher = KubernetesServicePatch(self, [tcp, udp, sctp])
+    # ...
+```
+
+Additionally, you may wish to use mocks in your charm's unit testing to ensure that the library
+does not try to make any API calls, or open any files during testing that are unlikely to be
+present, and could break your tests. The easiest way to do this is during your test `setUp`:
+
+```python
+# ...
+
+@patch("charm.KubernetesServicePatch", lambda x, y: None)
+def setUp(self, *unused):
+    self.harness = Harness(SomeCharm)
+    # ...
+```
+"""
+
+import logging
+from types import MethodType
+from typing import List, Literal
+
+from lightkube import ApiError, Client
+from lightkube.models.core_v1 import ServicePort, ServiceSpec
+from lightkube.models.meta_v1 import ObjectMeta
+from lightkube.resources.core_v1 import Service
+from lightkube.types import PatchType
+from ops.charm import CharmBase
+from ops.framework import Object
+
+logger = logging.getLogger(__name__)
+
+# The unique Charmhub library identifier, never change it
+LIBID = "0042f86d0a874435adef581806cddbbb"
+
+# Increment this major API version when introducing breaking changes
+LIBAPI = 1
+
+# Increment this PATCH version before using `charmcraft publish-lib` or reset
+# to 0 if you are raising the major API version
+LIBPATCH = 1
+
+ServiceType = Literal["ClusterIP", "LoadBalancer"]
+
+
+class KubernetesServicePatch(Object):
+    """A utility for patching the Kubernetes service set up by Juju."""
+
+    def __init__(
+        self,
+        charm: CharmBase,
+        ports: List[ServicePort],
+        service_name: str = None,
+        service_type: ServiceType = "ClusterIP",
+        additional_labels: dict = None,
+        additional_selectors: dict = None,
+        additional_annotations: dict = None,
+    ):
+        """Constructor for KubernetesServicePatch.
+
+        Args:
+            charm: the charm that is instantiating the library.
+            ports: a list of ServicePorts
+            service_name: allows setting custom name to the patched service. If none given,
+                application name will be used.
+            service_type: desired type of K8s service. Default value is in line with ServiceSpec's
+                default value.
+            additional_labels: Labels to be added to the kubernetes service (by default only
+                "app.kubernetes.io/name" is set to the service name)
+            additional_selectors: Selectors to be added to the kubernetes service (by default only
+                "app.kubernetes.io/name" is set to the service name)
+            additional_annotations: Annotations to be added to the kubernetes service.
+        """
+        super().__init__(charm, "kubernetes-service-patch")
+        self.charm = charm
+        self.service_name = service_name if service_name else self._app
+        self.service = self._service_object(
+            ports,
+            service_name,
+            service_type,
+            additional_labels,
+            additional_selectors,
+            additional_annotations,
+        )
+
+        # Make mypy type checking happy that self._patch is a method
+        assert isinstance(self._patch, MethodType)
+        # Ensure this patch is applied during the 'install' and 'upgrade-charm' events
+        self.framework.observe(charm.on.install, self._patch)
+        self.framework.observe(charm.on.upgrade_charm, self._patch)
+
+    def _service_object(
+        self,
+        ports: List[ServicePort],
+        service_name: str = None,
+        service_type: ServiceType = "ClusterIP",
+        additional_labels: dict = None,
+        additional_selectors: dict = None,
+        additional_annotations: dict = None,
+    ) -> Service:
+        """Creates a valid Service representation.
+
+        Args:
+            ports: a list of ServicePorts
+            service_name: allows setting custom name to the patched service. If none given,
+                application name will be used.
+            service_type: desired type of K8s service. Default value is in line with ServiceSpec's
+                default value.
+            additional_labels: Labels to be added to the kubernetes service (by default only
+                "app.kubernetes.io/name" is set to the service name)
+            additional_selectors: Selectors to be added to the kubernetes service (by default only
+                "app.kubernetes.io/name" is set to the service name)
+            additional_annotations: Annotations to be added to the kubernetes service.
+
+        Returns:
+            Service: A valid representation of a Kubernetes Service with the correct ports.
+        """
+        if not service_name:
+            service_name = self._app
+        labels = {"app.kubernetes.io/name": self._app}
+        if additional_labels:
+            labels.update(additional_labels)
+        selector = {"app.kubernetes.io/name": self._app}
+        if additional_selectors:
+            selector.update(additional_selectors)
+        return Service(
+            apiVersion="v1",
+            kind="Service",
+            metadata=ObjectMeta(
+                namespace=self._namespace,
+                name=service_name,
+                labels=labels,
+                annotations=additional_annotations,  # type: ignore[arg-type]
+            ),
+            spec=ServiceSpec(
+                selector=selector,
+                ports=ports,
+                type=service_type,
+            ),
+        )
+
+    def _patch(self, _) -> None:
+        """Patch the Kubernetes service created by Juju to map the correct port.
+
+        Raises:
+            PatchFailed: if patching fails due to lack of permissions, or otherwise.
+        """
+        if not self.charm.unit.is_leader():
+            return
+
+        client = Client()
+        try:
+            if self.service_name != self._app:
+                self._delete_and_create_service(client)
+            client.patch(Service, self.service_name, self.service, patch_type=PatchType.MERGE)
+        except ApiError as e:
+            if e.status.code == 403:
+                logger.error("Kubernetes service patch failed: `juju trust` this application.")
+            else:
+                logger.error("Kubernetes service patch failed: %s", str(e))
+        else:
+            logger.info("Kubernetes service '%s' patched successfully", self._app)
+
+    def _delete_and_create_service(self, client: Client):
+        service = client.get(Service, self._app, namespace=self._namespace)
+        service.metadata.name = self.service_name  # type: ignore[attr-defined]
+        service.metadata.resourceVersion = service.metadata.uid = None  # type: ignore[attr-defined]   # noqa: E501
+        client.delete(Service, self._app, namespace=self._namespace)
+        client.create(service)
+
+    def is_patched(self) -> bool:
+        """Reports if the service patch has been applied.
+
+        Returns:
+            bool: A boolean indicating if the service patch has been applied.
+        """
+        client = Client()
+        # Get the relevant service from the cluster
+        service = client.get(Service, name=self.service_name, namespace=self._namespace)
+        # Construct a list of expected ports, should the patch be applied
+        expected_ports = [(p.port, p.targetPort) for p in self.service.spec.ports]
+        # Construct a list in the same manner, using the fetched service
+        fetched_ports = [(p.port, p.targetPort) for p in service.spec.ports]  # type: ignore[attr-defined]  # noqa: E501
+        return expected_ports == fetched_ports
+
+    @property
+    def _app(self) -> str:
+        """Name of the current Juju application.
+
+        Returns:
+            str: A string containing the name of the current Juju application.
+        """
+        return self.charm.app.name
+
+    @property
+    def _namespace(self) -> str:
+        """The Kubernetes namespace we're running in.
+
+        Returns:
+            str: A string containing the name of the current Kubernetes namespace.
+        """
+        with open("/var/run/secrets/kubernetes.io/serviceaccount/namespace", "r") as f:
+            return f.read().strip()
diff --git a/installers/charm/osm-ng-ui/lib/charms/osm_libs/v0/utils.py b/installers/charm/osm-ng-ui/lib/charms/osm_libs/v0/utils.py
new file mode 100644
index 0000000..3feed7d
--- /dev/null
+++ b/installers/charm/osm-ng-ui/lib/charms/osm_libs/v0/utils.py
@@ -0,0 +1,517 @@
+#!/usr/bin/env python3
+# Copyright 2022 Canonical Ltd.
+# See LICENSE file for licensing details.
+#         http://www.apache.org/licenses/LICENSE-2.0
+"""OSM Utils Library.
+
+This library offers some utilities made for but not limited to Charmed OSM.
+
+# Getting started
+
+Execute the following command inside your Charmed Operator folder to fetch the library.
+
+```shell
+charmcraft fetch-lib charms.osm_libs.v0.utils
+```
+
+# CharmError Exception
+
+An exception that takes to arguments, the message and the StatusBase class, which are useful
+to set the status of the charm when the exception raises.
+
+Example:
+```shell
+from charms.osm_libs.v0.utils import CharmError
+
+class MyCharm(CharmBase):
+    def _on_config_changed(self, _):
+        try:
+            if not self.config.get("some-option"):
+                raise CharmError("need some-option", BlockedStatus)
+
+            if not self.mysql_ready:
+                raise CharmError("waiting for mysql", WaitingStatus)
+
+            # Do stuff...
+
+        exception CharmError as e:
+            self.unit.status = e.status
+```
+
+# Pebble validations
+
+The `check_container_ready` function checks that a container is ready,
+and therefore Pebble is ready.
+
+The `check_service_active` function checks that a service in a container is running.
+
+Both functions raise a CharmError if the validations fail.
+
+Example:
+```shell
+from charms.osm_libs.v0.utils import check_container_ready, check_service_active
+
+class MyCharm(CharmBase):
+    def _on_config_changed(self, _):
+        try:
+            container: Container = self.unit.get_container("my-container")
+            check_container_ready(container)
+            check_service_active(container, "my-service")
+            # Do stuff...
+
+        exception CharmError as e:
+            self.unit.status = e.status
+```
+
+# Debug-mode
+
+The debug-mode allows OSM developers to easily debug OSM modules.
+
+Example:
+```shell
+from charms.osm_libs.v0.utils import DebugMode
+
+class MyCharm(CharmBase):
+    _stored = StoredState()
+
+    def __init__(self, _):
+        # ...
+        container: Container = self.unit.get_container("my-container")
+        hostpaths = [
+            HostPath(
+                config="module-hostpath",
+                container_path="/usr/lib/python3/dist-packages/module"
+            ),
+        ]
+        vscode_workspace_path = "files/vscode-workspace.json"
+        self.debug_mode = DebugMode(
+            self,
+            self._stored,
+            container,
+            hostpaths,
+            vscode_workspace_path,
+        )
+
+    def _on_update_status(self, _):
+        if self.debug_mode.started:
+            return
+        # ...
+
+    def _get_debug_mode_information(self):
+        command = self.debug_mode.command
+        password = self.debug_mode.password
+        return command, password
+```
+
+# More
+
+- Get pod IP with `get_pod_ip()`
+"""
+import logging
+import secrets
+import socket
+from pathlib import Path
+from typing import List
+
+from lightkube import Client
+from lightkube.models.core_v1 import HostPathVolumeSource, Volume, VolumeMount
+from lightkube.resources.apps_v1 import StatefulSet
+from ops.charm import CharmBase
+from ops.framework import Object, StoredState
+from ops.model import (
+    ActiveStatus,
+    BlockedStatus,
+    Container,
+    MaintenanceStatus,
+    StatusBase,
+    WaitingStatus,
+)
+from ops.pebble import ServiceStatus
+
+# The unique Charmhub library identifier, never change it
+LIBID = "e915908eebee4cdd972d484728adf984"
+
+# Increment this major API version when introducing breaking changes
+LIBAPI = 0
+
+# Increment this PATCH version before using `charmcraft publish-lib` or reset
+# to 0 if you are raising the major API version
+LIBPATCH = 1
+
+logger = logging.getLogger(__name__)
+
+
+class CharmError(Exception):
+    """Charm Error Exception."""
+
+    def __init__(self, message: str, status_class: StatusBase = BlockedStatus) -> None:
+        self.message = message
+        self.status_class = status_class
+        self.status = status_class(message)
+
+
+def check_container_ready(container: Container) -> None:
+    """Check Pebble has started in the container.
+
+    Args:
+        container (Container): Container to be checked.
+
+    Raises:
+        CharmError: if container is not ready.
+    """
+    if not container.can_connect():
+        raise CharmError("waiting for pebble to start", MaintenanceStatus)
+
+
+def check_service_active(container: Container, service_name: str) -> None:
+    """Check if the service is running.
+
+    Args:
+        container (Container): Container to be checked.
+        service_name (str): Name of the service to check.
+
+    Raises:
+        CharmError: if the service is not running.
+    """
+    if service_name not in container.get_plan().services:
+        raise CharmError(f"{service_name} service not configured yet", WaitingStatus)
+
+    if container.get_service(service_name).current != ServiceStatus.ACTIVE:
+        raise CharmError(f"{service_name} service is not running")
+
+
+def get_pod_ip() -> str:
+    """Get Kubernetes Pod IP.
+
+    Returns:
+        str: The IP of the Pod.
+    """
+    return socket.gethostbyname(socket.gethostname())
+
+
+_DEBUG_SCRIPT = r"""#!/bin/bash
+# Install SSH
+
+function download_code(){{
+    wget https://go.microsoft.com/fwlink/?LinkID=760868 -O code.deb
+}}
+
+function setup_envs(){{
+    grep "source /debug.envs" /root/.bashrc || echo "source /debug.envs" | tee -a /root/.bashrc
+}}
+function setup_ssh(){{
+    apt install ssh -y
+    cat /etc/ssh/sshd_config |
+        grep -E '^PermitRootLogin yes$$' || (
+        echo PermitRootLogin yes |
+        tee -a /etc/ssh/sshd_config
+    )
+    service ssh stop
+    sleep 3
+    service ssh start
+    usermod --password $(echo {} | openssl passwd -1 -stdin) root
+}}
+
+function setup_code(){{
+    apt install libasound2 -y
+    (dpkg -i code.deb || apt-get install -f -y || apt-get install -f -y) && echo Code installed successfully
+    code --install-extension ms-python.python --user-data-dir /root
+    mkdir -p /root/.vscode-server
+    cp -R /root/.vscode/extensions /root/.vscode-server/extensions
+}}
+
+export DEBIAN_FRONTEND=noninteractive
+apt update && apt install wget -y
+download_code &
+setup_ssh &
+setup_envs
+wait
+setup_code &
+wait
+"""
+
+
+class HostPath:
+    """Represents a hostpath."""
+
+    def __init__(self, config: str, container_path: str) -> None:
+        mount_path_items = config.split("-")
+        mount_path_items.reverse()
+        self.mount_path = "/" + "/".join(mount_path_items)
+        self.config = config
+        self.container_path = container_path
+        self.module_name = container_path.split("/")[-1]
+
+
+class DebugMode(Object):
+    """Class to handle the debug-mode."""
+
+    def __init__(
+        self,
+        charm: CharmBase,
+        stored: StoredState,
+        container: Container,
+        hostpaths: List[HostPath] = [],
+        vscode_workspace_path: str = "files/vscode-workspace.json",
+    ) -> None:
+        super().__init__(charm, "debug-mode")
+
+        self.charm = charm
+        self._stored = stored
+        self.hostpaths = hostpaths
+        self.vscode_workspace = Path(vscode_workspace_path).read_text()
+        self.container = container
+
+        self._stored.set_default(
+            debug_mode_started=False,
+            debug_mode_vscode_command=None,
+            debug_mode_password=None,
+        )
+
+        self.framework.observe(self.charm.on.config_changed, self._on_config_changed)
+        self.framework.observe(self.charm.on[container.name].pebble_ready, self._on_config_changed)
+        self.framework.observe(self.charm.on.update_status, self._on_update_status)
+
+    def _on_config_changed(self, _) -> None:
+        """Handler for the config-changed event."""
+        if not self.charm.unit.is_leader():
+            return
+
+        debug_mode_enabled = self.charm.config.get("debug-mode", False)
+        action = self.enable if debug_mode_enabled else self.disable
+        action()
+
+    def _on_update_status(self, _) -> None:
+        """Handler for the update-status event."""
+        if not self.charm.unit.is_leader() or not self.started:
+            return
+
+        self.charm.unit.status = ActiveStatus("debug-mode: ready")
+
+    @property
+    def started(self) -> bool:
+        """Indicates whether the debug-mode has started or not."""
+        return self._stored.debug_mode_started
+
+    @property
+    def command(self) -> str:
+        """Command to launch vscode."""
+        return self._stored.debug_mode_vscode_command
+
+    @property
+    def password(self) -> str:
+        """SSH password."""
+        return self._stored.debug_mode_password
+
+    def enable(self, service_name: str = None) -> None:
+        """Enable debug-mode.
+
+        This function mounts hostpaths of the OSM modules (if set), and
+        configures the container so it can be easily debugged. The setup
+        includes the configuration of SSH, environment variables, and
+        VSCode workspace and plugins.
+
+        Args:
+            service_name (str, optional): Pebble service name which has the desired environment
+                variables. Mandatory if there is more than one Pebble service configured.
+        """
+        hostpaths_to_reconfigure = self._hostpaths_to_reconfigure()
+        if self.started and not hostpaths_to_reconfigure:
+            self.charm.unit.status = ActiveStatus("debug-mode: ready")
+            return
+
+        logger.debug("enabling debug-mode")
+
+        # Mount hostpaths if set.
+        # If hostpaths are mounted, the statefulset will be restarted,
+        # and for that reason we return immediately. On restart, the hostpaths
+        # won't be mounted and then we can continue and setup the debug-mode.
+        if hostpaths_to_reconfigure:
+            self.charm.unit.status = MaintenanceStatus("debug-mode: configuring hostpaths")
+            self._configure_hostpaths(hostpaths_to_reconfigure)
+            return
+
+        self.charm.unit.status = MaintenanceStatus("debug-mode: starting")
+        password = secrets.token_hex(8)
+        self._setup_debug_mode(
+            password,
+            service_name,
+            mounted_hostpaths=[hp for hp in self.hostpaths if self.charm.config.get(hp.config)],
+        )
+
+        self._stored.debug_mode_vscode_command = self._get_vscode_command(get_pod_ip())
+        self._stored.debug_mode_password = password
+        self._stored.debug_mode_started = True
+        logger.info("debug-mode is ready")
+        self.charm.unit.status = ActiveStatus("debug-mode: ready")
+
+    def disable(self) -> None:
+        """Disable debug-mode."""
+        logger.debug("disabling debug-mode")
+        current_status = self.charm.unit.status
+        hostpaths_unmounted = self._unmount_hostpaths()
+
+        if not self._stored.debug_mode_started:
+            return
+        self._stored.debug_mode_started = False
+        self._stored.debug_mode_vscode_command = None
+        self._stored.debug_mode_password = None
+
+        if not hostpaths_unmounted:
+            self.charm.unit.status = current_status
+            self._restart()
+
+    def _hostpaths_to_reconfigure(self) -> List[HostPath]:
+        hostpaths_to_reconfigure: List[HostPath] = []
+        client = Client()
+        statefulset = client.get(StatefulSet, self.charm.app.name, namespace=self.charm.model.name)
+        volumes = statefulset.spec.template.spec.volumes
+
+        for hostpath in self.hostpaths:
+            hostpath_is_set = True if self.charm.config.get(hostpath.config) else False
+            hostpath_already_configured = next(
+                (True for volume in volumes if volume.name == hostpath.config), False
+            )
+            if hostpath_is_set != hostpath_already_configured:
+                hostpaths_to_reconfigure.append(hostpath)
+
+        return hostpaths_to_reconfigure
+
+    def _setup_debug_mode(
+        self,
+        password: str,
+        service_name: str = None,
+        mounted_hostpaths: List[HostPath] = [],
+    ) -> None:
+        services = self.container.get_plan().services
+        if not service_name and len(services) != 1:
+            raise Exception("Cannot start debug-mode: please set the service_name")
+
+        service = None
+        if not service_name:
+            service_name, service = services.popitem()
+        if not service:
+            service = services.get(service_name)
+
+        logger.debug(f"getting environment variables from service {service_name}")
+        environment = service.environment
+        environment_file_content = "\n".join(
+            [f'export {key}="{value}"' for key, value in environment.items()]
+        )
+        logger.debug(f"pushing environment file to {self.container.name} container")
+        self.container.push("/debug.envs", environment_file_content)
+
+        # Push VSCode workspace
+        logger.debug(f"pushing vscode workspace to {self.container.name} container")
+        self.container.push("/debug.code-workspace", self.vscode_workspace)
+
+        # Execute debugging script
+        logger.debug(f"pushing debug-mode setup script to {self.container.name} container")
+        self.container.push("/debug.sh", _DEBUG_SCRIPT.format(password), permissions=0o777)
+        logger.debug(f"executing debug-mode setup script in {self.container.name} container")
+        self.container.exec(["/debug.sh"]).wait_output()
+        logger.debug(f"stopping service {service_name} in {self.container.name} container")
+        self.container.stop(service_name)
+
+        # Add symlinks to mounted hostpaths
+        for hostpath in mounted_hostpaths:
+            logger.debug(f"adding symlink for {hostpath.config}")
+            self.container.exec(["rm", "-rf", hostpath.container_path]).wait_output()
+            self.container.exec(
+                [
+                    "ln",
+                    "-s",
+                    f"{hostpath.mount_path}/{hostpath.module_name}",
+                    hostpath.container_path,
+                ]
+            )
+
+    def _configure_hostpaths(self, hostpaths: List[HostPath]):
+        client = Client()
+        statefulset = client.get(StatefulSet, self.charm.app.name, namespace=self.charm.model.name)
+
+        for hostpath in hostpaths:
+            if self.charm.config.get(hostpath.config):
+                self._add_hostpath_to_statefulset(hostpath, statefulset)
+            else:
+                self._delete_hostpath_from_statefulset(hostpath, statefulset)
+
+        client.replace(statefulset)
+
+    def _unmount_hostpaths(self) -> bool:
+        client = Client()
+        hostpath_unmounted = False
+        statefulset = client.get(StatefulSet, self.charm.app.name, namespace=self.charm.model.name)
+
+        for hostpath in self.hostpaths:
+            if self._delete_hostpath_from_statefulset(hostpath, statefulset):
+                hostpath_unmounted = True
+
+        if hostpath_unmounted:
+            client.replace(statefulset)
+
+        return hostpath_unmounted
+
+    def _add_hostpath_to_statefulset(self, hostpath: HostPath, statefulset: StatefulSet):
+        # Add volume
+        logger.debug(f"adding volume {hostpath.config} to {self.charm.app.name} statefulset")
+        volume = Volume(
+            hostpath.config,
+            hostPath=HostPathVolumeSource(
+                path=self.charm.config[hostpath.config],
+                type="Directory",
+            ),
+        )
+        statefulset.spec.template.spec.volumes.append(volume)
+
+        # Add volumeMount
+        for statefulset_container in statefulset.spec.template.spec.containers:
+            if statefulset_container.name != self.container.name:
+                continue
+
+            logger.debug(
+                f"adding volumeMount {hostpath.config} to {self.container.name} container"
+            )
+            statefulset_container.volumeMounts.append(
+                VolumeMount(mountPath=hostpath.mount_path, name=hostpath.config)
+            )
+
+    def _delete_hostpath_from_statefulset(self, hostpath: HostPath, statefulset: StatefulSet):
+        hostpath_unmounted = False
+        for volume in statefulset.spec.template.spec.volumes:
+
+            if hostpath.config != volume.name:
+                continue
+
+            # Remove volumeMount
+            for statefulset_container in statefulset.spec.template.spec.containers:
+                if statefulset_container.name != self.container.name:
+                    continue
+                for volume_mount in statefulset_container.volumeMounts:
+                    if volume_mount.name != hostpath.config:
+                        continue
+
+                    logger.debug(
+                        f"removing volumeMount {hostpath.config} from {self.container.name} container"
+                    )
+                    statefulset_container.volumeMounts.remove(volume_mount)
+
+            # Remove volume
+            logger.debug(
+                f"removing volume {hostpath.config} from {self.charm.app.name} statefulset"
+            )
+            statefulset.spec.template.spec.volumes.remove(volume)
+
+            hostpath_unmounted = True
+        return hostpath_unmounted
+
+    def _get_vscode_command(
+        self,
+        pod_ip: str,
+        user: str = "root",
+        workspace_path: str = "/debug.code-workspace",
+    ) -> None:
+        return f"code --remote ssh-remote+{user}@{pod_ip} {workspace_path}"
+
+    def _restart(self):
+        self.container.exec(["kill", "-HUP", "1"])
diff --git a/installers/charm/osm-ng-ui/lib/charms/osm_nbi/v0/nbi.py b/installers/charm/osm-ng-ui/lib/charms/osm_nbi/v0/nbi.py
new file mode 100644
index 0000000..130b6fa
--- /dev/null
+++ b/installers/charm/osm-ng-ui/lib/charms/osm_nbi/v0/nbi.py
@@ -0,0 +1,178 @@
+#!/usr/bin/env python3
+# Copyright 2022 Canonical Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may
+# not use this file except in compliance with the License. You may obtain
+# a copy of the License at
+#
+#         http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+#
+# For those usages not covered by the Apache License, Version 2.0 please
+# contact: legal@canonical.com
+#
+# To get in touch with the maintainers, please contact:
+# osm-charmers@lists.launchpad.net
+#
+#
+# Learn more at: https://juju.is/docs/sdk
+
+"""Nbi library.
+
+This [library](https://juju.is/docs/sdk/libraries) implements both sides of the
+`nbi` [interface](https://juju.is/docs/sdk/relations).
+
+The *provider* side of this interface is implemented by the
+[osm-nbi Charmed Operator](https://charmhub.io/osm-nbi).
+
+Any Charmed Operator that *requires* NBI for providing its
+service should implement the *requirer* side of this interface.
+
+In a nutshell using this library to implement a Charmed Operator *requiring*
+NBI would look like
+
+```
+$ charmcraft fetch-lib charms.osm_nbi.v0.nbi
+```
+
+`metadata.yaml`:
+
+```
+requires:
+  nbi:
+    interface: nbi
+    limit: 1
+```
+
+`src/charm.py`:
+
+```
+from charms.osm_nbi.v0.nbi import NbiRequires
+from ops.charm import CharmBase
+
+
+class MyCharm(CharmBase):
+
+    def __init__(self, *args):
+        super().__init__(*args)
+        self.nbi = NbiRequires(self)
+        self.framework.observe(
+            self.on["nbi"].relation_changed,
+            self._on_nbi_relation_changed,
+        )
+        self.framework.observe(
+            self.on["nbi"].relation_broken,
+            self._on_nbi_relation_broken,
+        )
+        self.framework.observe(
+            self.on["nbi"].relation_broken,
+            self._on_nbi_broken,
+        )
+
+    def _on_nbi_relation_broken(self, event):
+        # Get NBI host and port
+        host: str = self.nbi.host
+        port: int = self.nbi.port
+        # host => "osm-nbi"
+        # port => 9999
+
+    def _on_nbi_broken(self, event):
+        # Stop service
+        # ...
+        self.unit.status = BlockedStatus("need nbi relation")
+```
+
+You can file bugs
+[here](https://osm.etsi.org/bugzilla/enter_bug.cgi), selecting the `devops` module!
+"""
+from typing import Optional
+
+from ops.charm import CharmBase, CharmEvents
+from ops.framework import EventBase, EventSource, Object
+from ops.model import Relation
+
+
+# The unique Charmhub library identifier, never change it
+LIBID = "8c888f7c869949409e12c16d78ec068b"
+
+# Increment this major API version when introducing breaking changes
+LIBAPI = 0
+
+# Increment this PATCH version before using `charmcraft publish-lib` or reset
+# to 0 if you are raising the major API version
+LIBPATCH = 1
+
+NBI_HOST_APP_KEY = "host"
+NBI_PORT_APP_KEY = "port"
+
+
+class NbiRequires(Object):  # pragma: no cover
+    """Requires-side of the Nbi relation."""
+
+    def __init__(self, charm: CharmBase, endpoint_name: str = "nbi") -> None:
+        super().__init__(charm, endpoint_name)
+        self.charm = charm
+        self._endpoint_name = endpoint_name
+
+    @property
+    def host(self) -> str:
+        """Get nbi hostname."""
+        relation: Relation = self.model.get_relation(self._endpoint_name)
+        return (
+            relation.data[relation.app].get(NBI_HOST_APP_KEY)
+            if relation and relation.app
+            else None
+        )
+
+    @property
+    def port(self) -> int:
+        """Get nbi port number."""
+        relation: Relation = self.model.get_relation(self._endpoint_name)
+        return (
+            int(relation.data[relation.app].get(NBI_PORT_APP_KEY))
+            if relation and relation.app
+            else None
+        )
+
+
+class NbiProvides(Object):
+    """Provides-side of the Nbi relation."""
+
+    def __init__(self, charm: CharmBase, endpoint_name: str = "nbi") -> None:
+        super().__init__(charm, endpoint_name)
+        self._endpoint_name = endpoint_name
+
+    def set_host_info(self, host: str, port: int, relation: Optional[Relation] = None) -> None:
+        """Set Nbi host and port.
+
+        This function writes in the application data of the relation, therefore,
+        only the unit leader can call it.
+
+        Args:
+            host (str): Nbi hostname or IP address.
+            port (int): Nbi port.
+            relation (Optional[Relation]): Relation to update.
+                                           If not specified, all relations will be updated.
+
+        Raises:
+            Exception: if a non-leader unit calls this function.
+        """
+        if not self.model.unit.is_leader():
+            raise Exception("only the leader set host information.")
+
+        if relation:
+            self._update_relation_data(host, port, relation)
+            return
+
+        for relation in self.model.relations[self._endpoint_name]:
+            self._update_relation_data(host, port, relation)
+
+    def _update_relation_data(self, host: str, port: int, relation: Relation) -> None:
+        """Update data in relation if needed."""
+        relation.data[self.model.app][NBI_HOST_APP_KEY] = host
+        relation.data[self.model.app][NBI_PORT_APP_KEY] = str(port)
diff --git a/installers/charm/osm-ng-ui/metadata.yaml b/installers/charm/osm-ng-ui/metadata.yaml
new file mode 100644
index 0000000..be03f24
--- /dev/null
+++ b/installers/charm/osm-ng-ui/metadata.yaml
@@ -0,0 +1,57 @@
+# Copyright 2022 Canonical Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may
+# not use this file except in compliance with the License. You may obtain
+# a copy of the License at
+#
+#         http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+#
+# For those usages not covered by the Apache License, Version 2.0 please
+# contact: legal@canonical.com
+#
+# To get in touch with the maintainers, please contact:
+# osm-charmers@lists.launchpad.net
+#
+#
+# This file populates the Overview on Charmhub.
+# See https://juju.is/docs/some-url-to-be-determined/ for a checklist and guidance.
+
+name: osm-ng-ui
+
+# The following metadata are human-readable and will be published prominently on Charmhub.
+
+display-name: OSM NG-UI
+
+summary: OSM Next-generation User Interface (NG-UI)
+
+description: |
+  A Kubernetes operator that deploys the Next-generation User Interface of OSM.
+
+  This charm doesn't make sense on its own.
+  See more:
+    - https://charmhub.io/osm
+
+containers:
+  ng-ui:
+    resource: ng-ui-image
+
+# This file populates the Resources tab on Charmhub.
+
+resources:
+  ng-ui-image:
+    type: oci-image
+    description: OCI image for ng-ui
+    upstream-source: opensourcemano/ng-ui
+
+requires:
+  ingress:
+    interface: ingress
+    limit: 1
+  nbi:
+    interface: nbi
diff --git a/installers/charm/osm-ng-ui/pyproject.toml b/installers/charm/osm-ng-ui/pyproject.toml
new file mode 100644
index 0000000..d0d4a5b
--- /dev/null
+++ b/installers/charm/osm-ng-ui/pyproject.toml
@@ -0,0 +1,56 @@
+# Copyright 2022 Canonical Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may
+# not use this file except in compliance with the License. You may obtain
+# a copy of the License at
+#
+#         http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+#
+# For those usages not covered by the Apache License, Version 2.0 please
+# contact: legal@canonical.com
+#
+# To get in touch with the maintainers, please contact:
+# osm-charmers@lists.launchpad.net
+
+# Testing tools configuration
+[tool.coverage.run]
+branch = true
+
+[tool.coverage.report]
+show_missing = true
+
+[tool.pytest.ini_options]
+minversion = "6.0"
+log_cli_level = "INFO"
+
+# Formatting tools configuration
+[tool.black]
+line-length = 99
+target-version = ["py38"]
+
+[tool.isort]
+profile = "black"
+
+# Linting tools configuration
+[tool.flake8]
+max-line-length = 99
+max-doc-length = 99
+max-complexity = 10
+exclude = [".git", "__pycache__", ".tox", "build", "dist", "*.egg_info", "venv"]
+select = ["E", "W", "F", "C", "N", "R", "D", "H"]
+# Ignore W503, E501 because using black creates errors with this
+# Ignore D107 Missing docstring in __init__
+ignore = ["W503", "E501", "D107"]
+# D100, D101, D102, D103: Ignore missing docstrings in tests
+per-file-ignores = ["tests/*:D100,D101,D102,D103,D104"]
+docstring-convention = "google"
+# Check for properly formatted copyright header in each file
+copyright-check = "True"
+copyright-author = "Canonical Ltd."
+copyright-regexp = "Copyright\\s\\d{4}([-,]\\d{4})*\\s+%(author)s"
diff --git a/installers/charm/osm-ng-ui/requirements.txt b/installers/charm/osm-ng-ui/requirements.txt
new file mode 100644
index 0000000..5ee9d5c
--- /dev/null
+++ b/installers/charm/osm-ng-ui/requirements.txt
@@ -0,0 +1,23 @@
+# Copyright 2022 Canonical Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may
+# not use this file except in compliance with the License. You may obtain
+# a copy of the License at
+#
+#         http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+#
+# For those usages not covered by the Apache License, Version 2.0 please
+# contact: legal@canonical.com
+#
+# To get in touch with the maintainers, please contact:
+# osm-charmers@lists.launchpad.net
+ops >= 1.2.0
+lightkube
+lightkube-models
+git+https://github.com/charmed-osm/config-validator/
diff --git a/installers/charm/osm-ng-ui/src/charm.py b/installers/charm/osm-ng-ui/src/charm.py
new file mode 100755
index 0000000..f74fe0b
--- /dev/null
+++ b/installers/charm/osm-ng-ui/src/charm.py
@@ -0,0 +1,226 @@
+#!/usr/bin/env python3
+# Copyright 2022 Canonical Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may
+# not use this file except in compliance with the License. You may obtain
+# a copy of the License at
+#
+#         http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+#
+# For those usages not covered by the Apache License, Version 2.0 please
+# contact: legal@canonical.com
+#
+# To get in touch with the maintainers, please contact:
+# osm-charmers@lists.launchpad.net
+#
+#
+# Learn more at: https://juju.is/docs/sdk
+
+"""OSM NG-UI charm.
+
+See more: https://charmhub.io/osm
+"""
+
+import logging
+import re
+from typing import Any, Dict
+
+from charms.nginx_ingress_integrator.v0.ingress import IngressRequires
+from charms.observability_libs.v1.kubernetes_service_patch import KubernetesServicePatch
+from charms.osm_libs.v0.utils import (
+    CharmError,
+    check_container_ready,
+    check_service_active,
+)
+from charms.osm_nbi.v0.nbi import NbiRequires
+from lightkube.models.core_v1 import ServicePort
+from ops.charm import CharmBase
+from ops.framework import StoredState
+from ops.main import main
+from ops.model import ActiveStatus, Container
+
+SERVICE_PORT = 80
+
+logger = logging.getLogger(__name__)
+
+
+class OsmNgUiCharm(CharmBase):
+    """OSM NG-UI Kubernetes sidecar charm."""
+
+    _stored = StoredState()
+
+    def __init__(self, *args):
+        super().__init__(*args)
+        self.ingress = IngressRequires(
+            self,
+            {
+                "service-hostname": self.external_hostname,
+                "service-name": self.app.name,
+                "service-port": SERVICE_PORT,
+            },
+        )
+        self._observe_charm_events()
+        self._patch_k8s_service()
+        self._stored.set_default(default_site_patched=False)
+        self.nbi = NbiRequires(self)
+        self.container: Container = self.unit.get_container("ng-ui")
+
+    @property
+    def external_hostname(self) -> str:
+        """External hostname property.
+
+        Returns:
+            str: the external hostname from config.
+                If not set, return the ClusterIP service name.
+        """
+        return self.config.get("external-hostname") or self.app.name
+
+    # ---------------------------------------------------------------------------
+    #   Handlers for Charm Events
+    # ---------------------------------------------------------------------------
+
+    def _on_config_changed(self, _) -> None:
+        """Handler for the config-changed event."""
+        try:
+            self._validate_config()
+            self._check_relations()
+            # Check if the container is ready.
+            # Eventually it will become ready after the first pebble-ready event.
+            check_container_ready(self.container)
+
+            self._configure_service(self.container)
+            self._update_ingress_config()
+            # Update charm status
+            self._on_update_status()
+        except CharmError as e:
+            logger.debug(e.message)
+            self.unit.status = e.status
+
+    def _on_update_status(self, _=None) -> None:
+        """Handler for the update-status event."""
+        try:
+            self._check_relations()
+            check_container_ready(self.container)
+            check_service_active(self.container, "ng-ui")
+            self.unit.status = ActiveStatus()
+        except CharmError as e:
+            logger.debug(e.message)
+            self.unit.status = e.status
+
+    def _on_required_relation_broken(self, _) -> None:
+        """Handler for the kafka-broken event."""
+        # Check Pebble has started in the container
+        try:
+            check_container_ready(self.container)
+            check_service_active(self.container, "ng-ui")
+            self.container.stop("ng-ui")
+            self._stored.default_site_patched = False
+        except CharmError:
+            pass
+        finally:
+            self._on_update_status()
+
+    # ---------------------------------------------------------------------------
+    #   Validation and configuration and more
+    # ---------------------------------------------------------------------------
+
+    def _patch_k8s_service(self) -> None:
+        port = ServicePort(SERVICE_PORT, name=f"{self.app.name}")
+        self.service_patcher = KubernetesServicePatch(self, [port])
+
+    def _observe_charm_events(self) -> None:
+        event_handler_mapping = {
+            # Core lifecycle events
+            self.on.ng_ui_pebble_ready: self._on_config_changed,
+            self.on.config_changed: self._on_config_changed,
+            self.on.update_status: self._on_update_status,
+            # Relation events
+            self.on["nbi"].relation_changed: self._on_config_changed,
+            self.on["nbi"].relation_broken: self._on_required_relation_broken,
+        }
+        for event, handler in event_handler_mapping.items():
+            self.framework.observe(event, handler)
+
+    def _validate_config(self) -> None:
+        """Validate charm configuration.
+
+        Raises:
+            CharmError: if charm configuration is invalid.
+        """
+        logger.debug("validating charm config")
+
+    def _check_relations(self) -> None:
+        """Validate charm relations.
+
+        Raises:
+            CharmError: if charm configuration is invalid.
+        """
+        logger.debug("check for missing relations")
+
+        if not self.nbi.host or not self.nbi.port:
+            raise CharmError("need nbi relation")
+
+    def _update_ingress_config(self) -> None:
+        """Update ingress config in relation."""
+        ingress_config = {
+            "service-hostname": self.external_hostname,
+            "max-body-size": self.config["max-body-size"],
+        }
+        if "tls-secret-name" in self.config:
+            ingress_config["tls-secret-name"] = self.config["tls-secret-name"]
+        logger.debug(f"updating ingress-config: {ingress_config}")
+        self.ingress.update_config(ingress_config)
+
+    def _configure_service(self, container: Container) -> None:
+        """Add Pebble layer with the ng-ui service."""
+        logger.debug(f"configuring {self.app.name} service")
+        self._patch_default_site(container)
+        container.add_layer("ng-ui", self._get_layer(), combine=True)
+        container.replan()
+
+    def _get_layer(self) -> Dict[str, Any]:
+        """Get layer for Pebble."""
+        return {
+            "summary": "ng-ui layer",
+            "description": "pebble config layer for ng-ui",
+            "services": {
+                "ng-ui": {
+                    "override": "replace",
+                    "summary": "ng-ui service",
+                    "command": 'nginx -g "daemon off;"',
+                    "startup": "enabled",
+                }
+            },
+        }
+
+    def _patch_default_site(self, container: Container) -> None:
+        max_body_size = self.config.get("max-body-size")
+        if (
+            self._stored.default_site_patched
+            and max_body_size == self._stored.default_site_max_body_size
+        ):
+            return
+        default_site_config = container.pull("/etc/nginx/sites-available/default").read()
+        default_site_config = re.sub(
+            "client_max_body_size .*\n",
+            f"client_max_body_size {max_body_size}M;\n",
+            default_site_config,
+        )
+        default_site_config = re.sub(
+            "proxy_pass .*\n",
+            f"proxy_pass https://{self.nbi.host}:{self.nbi.port};\n",
+            default_site_config,
+        )
+        container.push("/etc/nginx/sites-available/default", default_site_config)
+        self._stored.default_site_patched = True
+        self._stored.default_site_max_body_size = max_body_size
+
+
+if __name__ == "__main__":  # pragma: no cover
+    main(OsmNgUiCharm)
diff --git a/installers/charm/osm-ng-ui/tests/unit/test_charm.py b/installers/charm/osm-ng-ui/tests/unit/test_charm.py
new file mode 100644
index 0000000..006da99
--- /dev/null
+++ b/installers/charm/osm-ng-ui/tests/unit/test_charm.py
@@ -0,0 +1,93 @@
+#!/usr/bin/env python3
+# Copyright 2022 Canonical Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may
+# not use this file except in compliance with the License. You may obtain
+# a copy of the License at
+#
+#         http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+#
+# For those usages not covered by the Apache License, Version 2.0 please
+# contact: legal@canonical.com
+#
+# To get in touch with the maintainers, please contact:
+# osm-charmers@lists.launchpad.net
+#
+# Learn more about testing at: https://juju.is/docs/sdk/testing
+
+import pytest
+from ops.model import ActiveStatus, BlockedStatus
+from ops.testing import Harness
+from pytest_mock import MockerFixture
+
+from charm import CharmError, OsmNgUiCharm, check_service_active
+
+container_name = "ng-ui"
+service_name = "ng-ui"
+
+sites_default = """
+server {
+    listen       80;
+    server_name  localhost;
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    client_max_body_size 50M;
+
+    location /osm {
+        proxy_pass https://nbi:9999;
+        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
+        proxy_set_header Accept-Encoding "";
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
+"""
+
+
+@pytest.fixture
+def harness(mocker: MockerFixture):
+    mocker.patch("charm.KubernetesServicePatch", lambda x, y: None)
+    harness = Harness(OsmNgUiCharm)
+    harness.begin()
+    harness.charm.unit.get_container("ng-ui").push(
+        "/etc/nginx/sites-available/default", sites_default, make_dirs=True
+    )
+    yield harness
+    harness.cleanup()
+
+
+def test_missing_relations(harness: Harness):
+    harness.charm.on.config_changed.emit()
+    assert type(harness.charm.unit.status) == BlockedStatus
+    assert harness.charm.unit.status.message == "need nbi relation"
+
+
+def test_ready(harness: Harness):
+    _add_relation(harness)
+    assert harness.charm.unit.status == ActiveStatus()
+
+
+def test_container_stops_after_relation_broken(harness: Harness):
+    harness.charm.on[container_name].pebble_ready.emit(container_name)
+    container = harness.charm.unit.get_container(container_name)
+    relation_id = _add_relation(harness)
+    check_service_active(container, service_name)
+    harness.remove_relation(relation_id)
+    with pytest.raises(CharmError):
+        check_service_active(container, service_name)
+
+
+def _add_relation(harness: Harness):
+    # Add nbi relation
+    relation_id = harness.add_relation("nbi", "nbi")
+    harness.add_relation_unit(relation_id, "nbi/0")
+    harness.update_relation_data(relation_id, "nbi", {"host": "nbi", "port": 9999})
+    return relation_id
diff --git a/installers/charm/osm-ng-ui/tox.ini b/installers/charm/osm-ng-ui/tox.ini
new file mode 100644
index 0000000..13c9735
--- /dev/null
+++ b/installers/charm/osm-ng-ui/tox.ini
@@ -0,0 +1,95 @@
+# Copyright 2022 Canonical Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may
+# not use this file except in compliance with the License. You may obtain
+# a copy of the License at
+#
+#         http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+#
+# For those usages not covered by the Apache License, Version 2.0 please
+# contact: legal@canonical.com
+#
+# To get in touch with the maintainers, please contact:
+# osm-charmers@lists.launchpad.net
+
+[tox]
+skipsdist=True
+skip_missing_interpreters = True
+envlist = lint, unit
+
+[vars]
+src_path = {toxinidir}/src/
+tst_path = {toxinidir}/tests/
+lib_path = {toxinidir}/lib/charms/osm_ng_ui
+all_path = {[vars]src_path} {[vars]tst_path} 
+
+[testenv]
+setenv =
+  PYTHONPATH = {toxinidir}:{toxinidir}/lib:{[vars]src_path}
+  PYTHONBREAKPOINT=ipdb.set_trace
+  PY_COLORS=1
+passenv =
+  PYTHONPATH
+  CHARM_BUILD_DIR
+  MODEL_SETTINGS
+
+[testenv:fmt]
+description = Apply coding style standards to code
+deps =
+    black
+    isort
+commands =
+    isort {[vars]all_path}
+    black {[vars]all_path}
+
+[testenv:lint]
+description = Check code against coding style standards
+deps =
+    black
+    flake8
+    flake8-docstrings
+    flake8-copyright
+    flake8-builtins
+    pyproject-flake8
+    pep8-naming
+    isort
+    codespell
+commands =
+    # uncomment the following line if this charm owns a lib
+    codespell {[vars]lib_path}
+    codespell {toxinidir}/. --skip {toxinidir}/.git --skip {toxinidir}/.tox \
+      --skip {toxinidir}/build --skip {toxinidir}/lib --skip {toxinidir}/venv \
+      --skip {toxinidir}/.mypy_cache --skip {toxinidir}/icon.svg
+    # pflake8 wrapper supports config from pyproject.toml
+    pflake8 {[vars]all_path}
+    isort --check-only --diff {[vars]all_path}
+    black --check --diff {[vars]all_path}
+
+[testenv:unit]
+description = Run unit tests
+deps =
+    pytest
+    pytest-mock
+    coverage[toml]
+    -r{toxinidir}/requirements.txt
+commands =
+    coverage run --source={[vars]src_path},{[vars]lib_path} \
+        -m pytest --ignore={[vars]tst_path}integration -v --tb native -s {posargs}
+    coverage report
+    coverage xml
+
+[testenv:integration]
+description = Run integration tests
+deps =
+    pytest
+    juju
+    pytest-operator
+    -r{toxinidir}/requirements.txt
+commands =
+    pytest -v --tb native --ignore={[vars]tst_path}unit --log-cli-level=INFO -s {posargs}