diff --git a/src/assets/config/rolePermissions.json b/src/assets/config/rolePermissions.json
new file mode 100644
index 0000000..7111144
--- /dev/null
+++ b/src/assets/config/rolePermissions.json
@@ -0,0 +1,692 @@
+{
+    "rolePermissions": [
+        {
+            "title": "Default",
+            "permissions": [
+                {
+                    "operation": "default",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "Admin",
+            "permissions": [
+                {
+                    "operation": "admin",
+                    "value": "NA"
+                },
+                {
+                    "operation": "admin:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "admin:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "admin:patch",
+                    "value": "NA"
+                },
+                {
+                    "operation": "admin:put",
+                    "value": "NA"
+                },
+                {
+                    "operation": "admin:delete",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "NS Descriptors",
+            "permissions": [
+                {
+                    "operation": "nsds",
+                    "value": "NA"
+                },
+                {
+                    "operation": "nsds:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "nsds:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "nsds:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "nsds:id:put",
+                    "value": "NA"
+                },
+                {
+                    "operation": "nsds:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "nsds:id:patch",
+                    "value": "NA"
+                },
+                {
+                    "operation": "nsds:content:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "nsds:id:content:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "nsds:id:content:put",
+                    "value": "NA"
+                },
+                {
+                    "operation": "nsds:id:nsd:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "nsds:id:nsd_artifact:get",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "VNF Descriptors",
+            "permissions": [
+                {
+                    "operation": "vnfds",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnfds:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnfds:content:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnfds:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnfds:id:put",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnfds:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnfds:id:patch",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnfds:id:content:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnfds:id:content:put",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnfds:id:vnfd:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnfds:id:vnfd_artifact:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnfds:id:action:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnfds:vnfpkgops:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnfds:vnfpkgops:id:get",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "NS Instances",
+            "permissions": [
+                {
+                    "operation": "ns_instances",
+                    "value": "NA"
+                },
+                {
+                    "operation": "ns_instances:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "ns_instances:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "ns_instances:content:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "ns_instances:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "ns_instances:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "ns_instances:id:instantiate:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "ns_instances:id:terminate:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "ns_instances:id:action:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "ns_instances:id:scale:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "ns_instances:opps:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "ns_instances:opps:id:get",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "VNF Instances",
+            "permissions": [
+                {
+                    "operation": "vnf_instances",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnf_instances:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vnf_instances:id:get",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "VIMs",
+            "permissions": [
+                {
+                    "operation": "vims",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vims:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vims:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vims:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vims:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vims:id:patch",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "VIMs Accounts",
+            "permissions": [
+                {
+                    "operation": "vim_accounts",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vim_accounts:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vim_accounts:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vim_accounts:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vim_accounts:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "vim_accounts:id:patch",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "SDN Controllers",
+            "permissions": [
+                {
+                    "operation": "sdn_controllers",
+                    "value": "NA"
+                },
+                {
+                    "operation": "sdn_controllers:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "sdn_controllers:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "sdn_controllers:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "sdn_controllers:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "sdn_controllers:id:patch",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "WIMs",
+            "permissions": [
+                {
+                    "operation": "wims",
+                    "value": "NA"
+                },
+                {
+                    "operation": "wims:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "wims:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "wims:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "wims:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "wims:id:patch",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "WIMs Accounts",
+            "permissions": [
+                {
+                    "operation": "wim_accounts",
+                    "value": "NA"
+                },
+                {
+                    "operation": "wim_accounts:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "wim_accounts:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "wim_accounts:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "wim_accounts:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "wim_accounts:id:patch",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "PDUDs",
+            "permissions": [
+                {
+                    "operation": "pduds",
+                    "value": "NA"
+                },
+                {
+                    "operation": "pduds:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "pduds:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "pduds:put",
+                    "value": "NA"
+                },
+                {
+                    "operation": "pduds:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "pduds:patch",
+                    "value": "NA"
+                },
+                {
+                    "operation": "pduds:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "pduds:id:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "pduds:id:put",
+                    "value": "NA"
+                },
+                {
+                    "operation": "pduds:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "pduds:id:patch",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "Network Slice Templates",
+            "permissions": [
+                {
+                    "operation": "slice_templates",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_templates:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_templates:content:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_templates:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_templates:id:put",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_templates:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_templates:id:patch",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_templates:content:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_templates:content:put",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_templates:id:nst:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_templates:id:nst_artifact:get",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "Network Slice Instances",
+            "permissions": [
+                {
+                    "operation": "slice_instances",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_instances:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_instances:content:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_instances:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_instances:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_instances:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_instances:id:instantiate:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_instances:id:terminate:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_instances:id:action:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_instances:opps:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "slice_instances:opps:id:get",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "K8 Clusters",
+            "permissions": [
+                {
+                    "operation": "k8sclusters",
+                    "value": "NA"
+                },
+                {
+                    "operation": "k8sclusters:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "k8sclusters:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "k8sclusters:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "k8sclusters:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "k8sclusters:id:patch",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "K8 Repos",
+            "permissions": [
+                {
+                    "operation": "k8srepos",
+                    "value": "NA"
+                },
+                {
+                    "operation": "k8srepos:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "k8srepos:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "k8srepos:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "k8srepos:id:delete",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "Users",
+            "permissions": [
+                {
+                    "operation": "users",
+                    "value": "NA"
+                },
+                {
+                    "operation": "users:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "users:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "users:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "users:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "users:id:patch",
+                    "value": "NA"
+                },
+                {
+                    "operation": "domains:get",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "Projects",
+            "permissions": [
+                {
+                    "operation": "projects",
+                    "value": "NA"
+                },
+                {
+                    "operation": "projects:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "projects:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "projects:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "projects:id:patch",
+                    "value": "NA"
+                },
+                {
+                    "operation": "projects:id:delete",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "Roles",
+            "permissions": [
+                {
+                    "operation": "roles",
+                    "value": "NA"
+                },
+                {
+                    "operation": "roles:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "roles:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "roles:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "roles:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "roles:id:patch",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
+            "title": "Tokens",
+            "permissions": [
+                {
+                    "operation": "tokens",
+                    "value": "NA"
+                },
+                {
+                    "operation": "tokens:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "tokens:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "tokens:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "tokens:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "tokens:id:delete",
+                    "value": "NA"
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
new file mode 100644
index 0000000..6c80bf8
--- /dev/null
+++ b/src/assets/i18n/de.json
@@ -0,0 +1,479 @@
+{
+    "OSM": "OSM",
+    "APPVERSION": "App Version",
+    "OSMVERSION": "OSM Version",
+    "OSMSOURCEMANO": "Open Source MANO",
+    "ADMIN": "Admin",
+    "ENTRIES": "Einträge",
+    "COMPOSE": "Komponieren a",
+    "CREATE": "Erstellen",
+    "SELECT": "Wählen",
+    "CANCEL": "Stornieren",
+    "SAVE": "speichern",
+    "COUNT": "Anzahl",
+    "IMAGE": "Bild",
+    "IPPROFILEREF": "IP-Profil Ref",
+    "ACTION": "Aktion",
+    "ADD": "Hinzufügen",
+    "EDIT": "Bearbeiten",
+    "APPLY": "Sich bewerben",
+    "FORCE": "Macht",
+    "DOWNLOAD": "Herunterladen",
+    "CONTENT": "Inhalt",
+    "DELETE": "Löschen",
+    "FORCEDELETE": "Löschen erzwingen",
+    "RENAME": "Umbenennen",
+    "INFO": "Info",
+    "NSPACKAGES": "NS Pakete",
+    "VNFPACKAGES": "VNF Pakete",
+    "INSTANCES": "Instanzen",
+    "INSTANTIATE": "Instanziieren",
+    "NSINSTANCES": "NS Instanzen",
+    "VNFINSTANCES": "VNF Instanzen",
+    "PDUINSTANCES": "PDU Instanzen",
+    "VIMACCOUNTS": "VIM Konten",
+    "WIMACCOUNTS": "WIM-Konten",
+    "SDNCONTROLLER": "SDN Reglerin",
+    "NETSLICE": "Netslice",
+    "PROJECT": "Projekt",
+    "DOMAIN": "Domain",
+    "PACKAGES": "Pakete",
+    "MODIFIED": "Geändert",
+    "NODATAMSG": "Keine Daten in der Tabelle verfügbar",
+    "SHORTNAME": "Kurzer Name",
+    "IDENTIFIER": "Kennung",
+    "DESCRIPTION": "Beschreibung",
+    "VENDOR": "Verkäuferin",
+    "VERSION": "Ausführung",
+    "ACTIONS": "Aktionen",
+    "NAME": "Name",
+    "USAGESTATE": "Nutzungsstatus",
+    "MODIFICATIONDATE": "Änderungsdatum",
+    "CREATEDDATE": "Erstellungsdatum",
+    "OPERATIONALSTATUS": "Betriebs Status",
+    "OPERATIONALSTATE": "Betriebszustand",
+    "CONFIGSTATUS": "Konfigurations Status",
+    "DETAILEDSTATUS": "Detaillierter Status",
+    "NSDNAME": "Nsd name",
+    "NSTNAME": "Nst name",
+    "TYPE": "Art",
+    "VNFD": "VNFD",
+    "VNF": "VNF",
+    "MEMBERINDEX": "Mitglieds  Index",
+    "NS": "NS",
+    "CREATEDAT": "Hergestellt in",
+    "CREATED": "Erstellt",
+    "ALL": "Alle",
+    "ID": "Id",
+    "OPERATIONSTATE": "Betriebszustand",
+    "STARTTIME": "Startzeit",
+    "STATUSENTEREDTIME": "Status Eingegebene Zeit",
+    "HISTORYOFOPERATIONS": "Geschichte der Operationen",
+    "UPDATE": "Aktualisieren",
+    "READONLYMODE": "Nur-Lese-Modus",
+    "CURRENTLY": "Zur Zeit",
+    "ON": "Auf",
+    "OFF": "aus",
+    "IN": "im",
+    "FILES": "Dateien",
+    "NEW": "Neu",
+    "RECENTLY": "Vor kurzem",
+    "TOPOLOGY": "Topologie",
+    "PLEASEWAIT": "Warten Sie mal",
+    "LOADING": "Wird geladen",
+    "RESOURCEORCHESTRATOR": "Ressource Orchestrator",
+    "VIEW": "Aussicht",
+    "DROP": "Fallen",
+    "HERE": "Here",
+    "MAPVIEW": "Kartenansicht",
+    "LISTVIEW": "Listenansicht",
+    "OK": "Okay",
+    "DELETEDSUCCESSFULLY": "Erfolgreich gelöscht",
+    "SESSIONEXPIRY": "Sitzung abgelaufen, bitte erneut anmelden",
+    "DELETECONFIRMPOPUPMESSAGE": "Möchten Sie wirklich löschen?",
+    "DELETELOADERMESSAGE": "Bitte warten Sie, während der Löschvorgang ausgeführt wird",
+    "VALUE": "Wert",
+    "PERFORMACTION": "Aktion ausführen",
+    "EXECUTE": "Execute",
+    "EXECNSPRIMITIVE": "Exec NS Primitive",
+    "PRIMITIVETYPE": "Primitiver Typ",
+    "VNFPRIMITIVE": "VNF Level Primitive",
+    "NSPRIMITIVE": "NS Level Primitive",
+    "DESCRIPTOR": "Deskriptor",
+    "ERROR": "Etwas ist schief gelaufen. Bitte versuche es erneut",
+    "SHOWGRAPH": "Grafik anzeigen",
+    "UPDATESHOWGRAPH": "Grafik aktualisieren und anzeigen",
+    "CREATEPACKAGE": "Neues Paket erstellen",
+    "GZFILETYPEERRROR": "Laden Sie nur eine tar.gz-Datei hoch und die Größe sollte 15 MB nicht überschreiten",
+    "YAMLFILETYPEERRROR": "Laden Sie nur YAML-Dateien hoch und die Größe sollte 15 MB nicht überschreiten",
+    "JSONFILETYPEERRROR": "Laden Sie nur JSON-Dateien hoch und die Größe sollte 15 MB nicht überschreiten",
+    "PUBFILETYPEERRROR": "Laden Sie nur PUB-Dateien hoch und die Größe sollte 15 MB nicht überschreiten",
+    "PACKAGE": "Paket",
+    "URL": "URL",
+    "DEPLOYED": "Bereitgestellt",
+    "ROLES": "Rollen",
+    "INSTANCEDETAILS": "Instanzdetails",
+    "IPADDRESS": "IP Adresse",
+    "MGMT": "Mgmt",
+    "NETNAME": "Netzname",
+    "USER": "Benutzerin",
+    "PORT": "Hafen",
+    "USERNAME": "Nutzername",
+    "PASSWORD": "Passwort",
+    "NODATAERROR": "Beim Abrufen der Informationen ist ein Fehler aufgetreten",
+    "FREEZE": "Bevriezen",
+    "UNFREEZE": "Auftauen",
+    "CLONE": "Klon",
+    "CLONECONFIRMPOPUPMESSAGE": "Möchten Sie wirklich klonen",
+    "CLONESUCCESSFULLY": "Paket erfolgreich geklont",
+    "DROPFILES": "Ziehen Sie die Dateien einfach hierher oder klicken Sie hier, um sie hochzuladen",
+    "DROPFILESVALIDATION": "Bitte wählen Sie eine zu verarbeitende Datei aus",
+    "METRICS": "Metriken",
+    "NOOFHOURS": "Anzahl der Stunden",
+    "MANDATORYCHECK": "Verplichte velden zijn gemarkeerd met een sterretje (*)",
+    "K8VERSION": "K8-versie",
+    "ENTER": "Eingeben",
+    "SWITCHPROJECT": "Projekt wechseln",
+    "CURRENTPROJECT": "Derzeitiges Projekt",
+    "SUBMIT": "Submit",
+    "REFRESH": "Aktualisierung",
+    "OPEN": "Öffnen",
+    "UPLOADCONFIG": "Upload Config",
+    "FILEUPLOADLABEL": "Oder aus Datei laden",
+    "CONFIG": "Konfig",
+    "YAMLCONFIG": "Yaml Konfig",
+    "CHOOSEFILE": "Datei wählen",
+    "INVALIDCONFIG": "Ungültige Konfiguration",
+    "PAGE": {
+        "DASHBOARD": {
+            "DASHBOARD": "Instrumententafel",
+            "RECENTUSERLOG": "Letztes Benutzerprotokoll",
+            "LOGS": "Protokolle",
+            "FAILEDINSTANCES": "Fehlgeschlagene Instanzen",
+            "NOINSTANCES": "Keine Instanzen verfügbar",
+            "UPTIME": "Betriebszeit",
+            "RUNNINGINSTANCES": "Laufende Instanzen",
+            "NETSLICETEMPLATE": "NetSlice Vorlage",
+            "NETSLICEINSTANCE": "NetSlice Instanzen",
+            "USERS": "Benutzer",
+            "PROJECTS": "Projekte",
+            "USERSETTINGS": "Benutzereinstellungen",
+            "LOGOUT": "Ausloggen"
+        },
+        "LOGIN": {
+            "USERNAME": "Nutzername",
+            "PASSWORD": "Passwort",
+            "SIGNUP": "Anmelden",
+            "ACCOUNTCREATEMESSAGE": "Sie haben noch keinen Account?",
+            "LOGIN": "Anmeldung",
+            "PASSWORDVALIDMESSAGE": "Passwort wird benötigt",
+            "USERNAMEVALIDMESSAGE": "Ein Benutzername wird benötigt",
+            "SIGNINMSG": "Melden Sie sich an, um Ihre Sitzung zu starten",
+            "PASSWORDMINLENGTHVALIDMESSAGE": "Das Passwort muss aus 8 Zeichen bestehen und mindestens ein Groß-, Klein-, Ziffern- und Sonderzeichen enthalten",
+            "USERNAMEMINLENGTHVALIDMESSAGE": "Der Benutzername muss aus mindestens 5 Zeichen bestehen"
+        },
+        "INSTANCEINSTANTIATE": {
+            "NEWINSTANCE": "Neue Instanz",
+            "NSNAME": "Ns Name",
+            "DESCRIPTION": "Beschrijving",
+            "NSID": "Nsd Id",
+            "SSHKEY": "SSH-Schlüssel",
+            "VIMACCOUNT": "VIM-Konto",
+            "SSHKEYMSG": "Fügen Sie hier Ihren Schlüssel ein"
+        },
+        "NSMETRIC": {
+            "INSTANCESMETRIC": "Instanzmetrik",
+            "METRICERROR": "Daten in Metriken nicht verfügbar"
+        },
+        "USERSETTINGS": {
+            "LANGUAGE": "Sprache"
+        },
+        "VIM": {
+            "CREATEDSUCCESSFULLY": "VIM erfolgreich erstellt",
+            "LOACTIONINFO": "Geben Sie den Standortnamen ein und klicken Sie auf die Eingabetaste, um den Standort aus der Liste auszuwählen"
+        },
+        "VIMDETAILS": {
+            "NEWVIM": "Nieuwe VIM",
+            "VIMACCOUNTDETAILS": "VIM-Kontodetails",
+            "NAME": "Name",
+            "VIMUSERNAME": "VIM-Benutzername",
+            "VIMURL": "VIM-URL",
+            "VIMTYPE": "Art",
+            "TENANTNAME": "Name des Mieters",
+            "DESCRIPTION": "Beschreibung",
+            "SCHEMATYPE": "Schematyp",
+            "SCHEMAVERSION": "Schema-Version",
+            "CONFIGPARAMETERS": "KONFIG-PARAMETER",
+            "SDNCONTROLLER": "SDN-Controller",
+            "SDNPORTMAPPING": "SDN-Port-Zuordnung",
+            "VIMNETWORKNAME": "VIM-Netzwerkname",
+            "SECURITYGROUPS": "Sicherheitsgruppen",
+            "AVAILABILITYZONE": "Verfügbarkeitszone",
+            "REGIONALNAME": "Name der Region",
+            "INSECURE": "Unsicher",
+            "USEEXISTINGFLAVOURS": "Verwenden Sie vorhandene Aromen",
+            "USEINTERNALENDPOINT": "Verwenden Sie den internen Endpunkt",
+            "APIVERSION": "API-Version",
+            "PROJECTDOMAINID": "Projektdomänen-ID",
+            "PROJECTDOMAINNAME": "Projektdomänenname",
+            "USERDOMAINID": "Benutzer-Domain-ID",
+            "USERDOMAINUSER": "Benutzer-Domainname",
+            "KEYPAIR": "Schlüsselpaar",
+            "DATAPLANEPHYSICALNET": "Dataplane physikalisches Netz",
+            "USEFLOATINGIP": "Verwenden Sie Floating IP",
+            "DATAPLANENETVLANRANGE": "Dataplane Net VLAN-Bereich",
+            "MICROVERSION": "Mikroversion",
+            "BACKTOVIMACCOUNTS": "Zurück zu VimAccounts",
+            "VIMPASSWORD": "VIM-Passwort",
+            "ADDITIONALCONFIG": "Zusätzliche Konfiguration",
+            "ADDITIONALCONFIGPLACEHOLDER": "{'key1':[...],'key2':{},'key3':''}",
+            "NEWVIMACCOUNT": "Neues VIM-Konto",
+            "ORGNAME": "Orgname",
+            "VCENTERIP": "Vcenter ip",
+            "VCENTERPORT": "Vcenter-Anschluss",
+            "ADMINUSERNAME": "Admin-Benutzername",
+            "VCENTERUSER": "Vcenter-Benutzer",
+            "ADMINPASSWORD": "Administrator-Passwort",
+            "VCENTERPASSWORD": "Vcenter Passwort",
+            "NSXMANAGER": "Nsx Manager",
+            "VROPSSITE": "Vrops Seite",
+            "NSXUSER": "Nsx Benutzer",
+            "VROPSUSER": "Vrops Benutzer",
+            "NSXPASSWORD": "Nsx Passwort",
+            "VROPSPASSWORD": "Vrops Passwort",
+            "VPCCIDRBLOCK": "VPC-CIDR-Block",
+            "FLAVORIINFO": "Geschmacksinfo",
+            "VIM_TYPE": "VIM-Typ",
+            "VIMLOCATION": "VIM-Speicherort",
+            "SUBSCRIPTIONID": "Abonnement-ID",
+            "RESOURCEGROUP": "Ressourcengruppe",
+            "VNETNAME": "VNet Name",
+            "FLAVORSPATTERN": "Geschmacksmuster"
+        },
+        "WIMACCOUNTS": {
+            "CREATEDSUCCESSFULLY": "WIM erfolgreich erstellt",
+            "WIMDETAILS": "WIM-Details",
+            "NEWWIM": "Neuer WIM",
+            "SCHEMAVERSION": "Schema-Version",
+            "RO": "RO",
+            "ROACCOUNT": "RO-Konto",
+            "USERNAME": "WIM-Benutzername",
+            "PASSWORD": "WIM-Passwort"
+        },
+        "NSINSTANCE": {
+            "NEWNSINSTANCE": "Nieuwe NS",
+            "CREATEDSUCCESSFULLY": "NS-Instanz erfolgreich erstellt"
+        },
+        "VNFINSTANCE": {
+            "ADDVNFINSTANCE": "VNF-Instanz hinzufügen"
+        },
+        "PDUINSTANCE": {
+            "NEWPDUINSTANCE": "Nieuwe PDU",
+            "PDUTYPE": "PDU-Typ",
+            "PARAMETERS": "PDU-Instanzparameter",
+            "ADDINSTANCEPARAMS": "Instanzparameter hinzufügen",
+            "CREATEDSUCCESSFULLY": "PDU-Instanzen erfolgreich erstellt"
+        },
+        "NETSLICEINSTANCE": {
+            "CREATENETSLICEINSTANCE": "Maak NSI"
+        },
+        "SDNCONTROLLER": {
+            "NEWSDNCONTROLLER": "Nieuwe SDN-controller",
+            "REGISTEREDSDNCONTROLLER": "Registrierte SDN Controller",
+            "RO": "RO",
+            "DPID": "DPID",
+            "CREATEDSUCCESSFULLY": "SDN erfolgreich registriert",
+            "DPIDPLACEHOLDER": "xx:xx:xx:xx:xx:xx:xx:xx",
+            "DETAILS": "SDN-Controller-Details"
+        },
+        "USERS": {
+            "CREATEUSER": "Gebruiker aanmaken",
+            "NEWUSER": "Neuer Benutzer",
+            "USERNAME": "Nutzername",
+            "PASSWORD": "Passwort",
+            "CONFPASSWORD": "Passwort bestätigen",
+            "EDITUSER": "Benutzer bearbeiten",
+            "NEWPASSWORD": "Neues Kennwort",
+            "DEFAULTPROJECT": "Standardprojekt",
+            "PASSWORDCONFLICT": "Passwort und Passwort bestätigen stimmen nicht überein",
+            "PASSWORDMATCH": "Passwort-Übereinstimmung",
+            "CREATEDSUCCESSFULLY": "Benutzer erfolgreich erstellt",
+            "EDITEDSUCCESSFULLY": "Benutzer erfolgreich bearbeiten",
+            "EDITCREDENTIALS": "Passwort ändern",
+            "EDITUSERNAME": "Benutzernamen ändern",
+            "PROJECTSROLES": "Projekte Rollen",
+            "EDITPROJECTROLEMAPPING": "Projektrollenzuordnung bearbeiten",
+            "ADDMAPPINGS": "Mappings hinzufügen",
+            "EDITPROJECTROLEERROR": "Bitte geben Sie mindestens eine Projektrollenzuordnung an, um fortzufahren"
+        },
+        "TOPOLOGY": {
+            "SELECTELEMENT": "Element auswählen",
+            "VL": "VL",
+            "VNF": "VNF",
+            "VNFD": "VNFD",
+            "CP": "CP",
+            "NSD": "NSD",
+            "NS": "NS",
+            "VIRTUALLINK": "Virtueller Link",
+            "CONNECTIONPOINT": "Verbindungspunkt",
+            "INTCONNECTIONPOINT": "Int Verbindungspunkt",
+            "LINK": "Verknüpfung",
+            "ADDINGCP": "Bitte wählen Sie einen Verbindungspunkt von {{vnfdname}}, um {{vlname}} zu verknüpfen?",
+            "INFO": "Info",
+            "HELP": "Hilfe",
+            "HELPINFO": {
+                "CREATEEDGE": "Kante erstellen",
+                "CREATEEDGEFIRSTSETENCE": "Wählen Sie den ersten Scheitelpunkt aus, indem Sie mit darauf klicken",
+                "CREATEEDGESECONDSETENCE": "auf einem anderen Scheitelpunkt (anders als der ausgewählte).",
+                "DELETEEDGEVERTEX": "Kante / Scheitelpunkt löschen",
+                "DELETEEDGEVERTEXSENTENCE": "Doppelklicken Sie auf Kante / Scheitelpunkt.",
+                "SPREADEDGE": "Kante spreizen",
+                "SPREADEDGESENTENCE": "Wählen Sie den Scheitelpunkt aus, indem Sie mit darauf klicken",
+                "EDGEINFO": "Kanteninformationen anzeigen",
+                "EDGEINFOSENTENCE": "Wählen Sie die Kante durch Klicken aus. Die Informationen werden auf der linken Seite angezeigt."
+            },
+            "VDU": "VDU",
+            "INTVL": "IntVL",
+            "INTCP": "IntCP",
+            "DATAEMPTY": "Bitte ändere etwas"
+        },
+        "PROJECT": {
+            "NEWPROJECT": "Nieuw project",
+            "CREATEDSUCCESSFULLY": "Projekt erfolgreich erstellt",
+            "UPDATEDSUCCESSFULLY": "Projekt erfolgreich aktualisiert"
+        },
+        "NSPACKAGE": {
+            "ADDNSPACKAGE": "Verfassen Sie eine neue NS",
+            "CREATEDSUCCESSFULLY": "NS-Paket erfolgreich erstellt",
+            "NSCOMPOSE": {
+                "UPDATEDSUCCESSFULLY": "Erfolgreich geupdated",
+                "CONFIRMCONNECTIONPOINT": "Bitte bestätigen Sie, um den Verbindungspunkt hinzuzufügen",
+                "CANNOTLINKVNF": "Sie können einen VNF nicht mit einem VNF verknüpfen",
+                "CANNOTLINKVL": "Sie können eine VL nicht mit einer VL verknüpfen",
+                "CANNOTLINKVLVNF": "Sie können eine VL nicht mit einer VNF verknüpfen",
+                "CANNOTLINKVNFCP": "Sie können einen VNF nicht mit einem CP verknüpfen",
+                "CANNOTLINKVLCP": "Sie können eine VL nicht mit einem CP verknüpfen",
+                "CANNOTLINKCP": "Sie können einen CP nicht mit einem CP verknüpfen",
+                "ADDNSD": "Virtueller Link wurde erfolgreich hinzugefügt",
+                "ADDVNFD": "VNFD wurde erfolgreich hinzugefügt",
+                "ADDNS": "Der Verbindungslink wurde erfolgreich hinzugefügt",
+                "DELETENSD": "Der virtuelle Link wurde erfolgreich gelöscht",
+                "DELETEVNFD": "VNF erfolgreich gelöscht",
+                "DELETENS": "Der Verbindungspunkt wurde erfolgreich gelöscht",
+                "DELETELINK": "Der Link wurde erfolgreich gelöscht",
+                "MGMTNETWORK": "Mgmt Network",
+                "VIMNETWORKNAME": "Vim Network Name",
+                "MEMBER-VNF-INDEX": "member-vnf-index",
+                "VNFD-ID-REF": "vnfd-id-ref",
+                "VLD-ID": "vld-id",
+                "VNFD-CP-REF": "vnfd-Verbindungspunkt-ref"
+            },
+            "EDITPACKAGES": {
+                "UPDATEDSUCCESSFULLY": "Erfolgreich geupdated"
+            }
+        },
+        "VNFPACKAGE": {
+            "ADDVNFPACKAGE": "Erstellen Sie eine neue VNF",
+            "CREATEDSUCCESSFULLY": "VNF-Paket erfolgreich erstellt",
+            "VNFCOMPOSE": {
+                "UPDATEDSUCCESSFULLY": "Erfolgreich geupdated",
+                "INVALIDSELECTION": "Ungültige Auswahl",
+                "YOUCANNOTDELETELINK": "Sie können den Link nicht löschen",
+                "CANNOTLINKVDUANDINTCP": "Sie können vdu nicht mit int_cp verknüpfen",
+                "CANNOTLINKINTCPANDVDU": "Sie können int_cp nicht mit vdu verknüpfen",
+                "CANNOTLINKCPANDVNFVL": "Sie können cp nicht mit vnf_vl verknüpfen",
+                "CANNOTLINKVNFVLANDCP": "Sie können vnf_vl nicht mit cp verknüpfen",
+                "CANNOTLINKINTCPANDCP": "Sie können intcp nicht mit cp verknüpfen",
+                "CANNOTLINKCPANDINTCP": "Sie können cp nicht mit int_cp verknüpfen",
+                "CANNOTLINKVDUANDVDU": "Sie können ein vdu nicht mit einem vdu verknüpfen"
+            }
+        },
+        "NETSLICE": {
+            "CREATEDSUCCESSFULLY": "Netslice erfolgreich erstellt",
+            "TEMPLATECREATEDSUCCESSFULLY": "Netslice-Vorlage erfolgreich erstellt",
+            "UPDATEDSUCCESSFULLY": "Vorlage erfolgreich aktualisiert"
+        },
+        "NETSLICETEMPLATE": {
+            "NETSLICETEMPLATEDETAILS": "Netzwerk-Slices-Vorlagendetails"
+        },
+        "NSTINSTANCEINSTANTIATE": {
+            "NEWINSTANCE": "Neue Instanz",
+            "NSNAME": "Ns Name",
+            "DESCRIPTION": "Beschrijving",
+            "NSTID": "Nst Id",
+            "SSHKEY": "SSH-Schlüssel",
+            "VIMACCOUNT": "VIM-Konto",
+            "SSHKEYMSG": "Fügen Sie Ihren Schlüssel hier ein ..."
+        },
+        "NSPRIMITIVE": {
+            "PRIMITIVE": "Primitive",
+            "PRIMITIVEPARAMETERS": "Primitive Parameter",
+            "ADDPRIMITIVEPARAMS": "Primitive Parameter hinzufügen",
+            "EXECUTEDSUCCESSFULLY": "NS Primitive Configuration ausgeführt"
+        },
+        "ROLES": {
+            "CREATEROLE": "Rolle erstellen",
+            "ROLE": "Rolle",
+            "PERMISSIONS": "Berechtigungen",
+            "YAMLPERMISSIONS": "YAML Berechtigungen",
+            "CREATEDSUCCESSFULLY": "Rolle erfolgreich erstellt",
+            "UPDATEDSUCCESSFULLY": "Rolle erfolgreich aktualisiert",
+            "ROLEJSONERROR": "Rollenberechtigungen sollten in einer Schlüsselwertweise bereitgestellt werden",
+            "ROLEKEYERROR": "Der Wert von '{{roleKey}}' in Rollenberechtigungen sollte boolesch sein",
+            "EDITROLE": "Rolle bearbeiten",
+            "PREVIEW": "Vorschau",
+            "TEXTVIEW": "Textvorschau"
+        },
+        "K8S": {
+            "MENUK8S": "K8s",
+            "MENUK8SCLUSTER": "K8s Clusters",
+            "MENUK8SREPO": "K8s Repos",
+            "REGISTERK8CLUSTER": "Geregistreerde K8s-clusters",
+            "ADDK8CLUSTER": "K8s-cluster toevoegen",
+            "K8SCLUSTERDETAILS": "K8s Clusterdetails",
+            "REGISTERK8REPO": "Geregistreerde K8s-repository",
+            "ADDK8REPO": "K8s Repository toevoegen",
+            "K8SREPODETAILS": "K8s Repository Details",
+            "CREATEDSUCCESSFULLY": "K8s met succes gemaakt",
+            "NEWK8SCLUSTER": "Nieuw K8s-cluster",
+            "NAME": "Naam",
+            "K8SVERSION": "K8s-versie",
+            "VIMACCOUNT": "Vim-account",
+            "DESCRIPTION": "Beschrijving",
+            "NETS": "Nets",
+            "NETSPLACEHOLDER": "example: {'net1': 'osm-ext'}",
+            "CREDENTIALS": "Inloggegevens",
+            "NEWK8SREPO": "Nieuwe K8s Repository",
+            "TYPE": "Type",
+            "URL": "URL"
+        }
+    },
+    "HTTPERROR": {
+        "401": "Zugriff verweigert",
+        "400": "Bitte überprüfen Sie die Anfrage und versuchen Sie es erneut",
+        "404": "Erwarteter Dienst nicht verfügbar. Bitte versuchen Sie es später erneut.",
+        "500": "Serverfehler, Bitte versuchen Sie es später noch einmal",
+        "502": "Slechte gateway, probeer het later opnieuw",
+        "503": "Dienst vorübergehend nicht verfügbar. Bitte versuchen Sie es später erneut.",
+        "504": "Gateway timeout fehler. Bitte versuchen Sie es später erneut",
+        "409": "Bitte versuchen Sie es später noch einmal."
+    },
+    "PAGENOTFOUND": {
+        "OOPS": "Hoppla!",
+        "NOTFOUND": "404 Nicht gefunden",
+        "CONTENT": "Die Seite kann nicht gefunden oder nicht autorisiert werden, ist möglicherweise nicht mehr relevant oder hat ihren Namen geändert",
+        "MEAN": "In der Zwischenzeit können Sie zu zurückkehren",
+        "HOME": "Zuhause"
+    },
+    "DOMVALIDATIONS": {
+        "INVALIDURL": "Geben Sie eine gültige URL ein",
+        "INVALIDIPADDRESS": "Geben Sie eine gültige IP-Adresse ein",
+        "INVALIDPORTADDRESS": "Geben Sie eine gültige PORT-Adresse ein",
+        "INVALIDDPID": "Geben Sie eine gültige DPID ein",
+        "INVALIDJSON": "Geben Sie ein gültiges JSON-Format ein",
+        "INVALIDYAML": "Geben Sie ein gültiges YAML-Format ein"
+    },
+    "GRAFANA": {
+        "METRICSERROR": "Keine gültigen Metriken"
+    }
+}
\ No newline at end of file
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
new file mode 100644
index 0000000..d22cbae
--- /dev/null
+++ b/src/assets/i18n/en.json
@@ -0,0 +1,479 @@
+{
+    "OSM": "OSM",
+    "APPVERSION": "App Version",
+    "OSMVERSION": "OSM Version",
+    "OSMSOURCEMANO": "Open Source MANO",
+    "ADMIN": "Admin",
+    "ENTRIES": "Entries",
+    "COMPOSE": "Compose a",
+    "CREATE": "Create",
+    "SELECT": "Select",
+    "CANCEL": "Cancel",
+    "SAVE": "Save",
+    "ACTION": "Action",
+    "COUNT": "Count",
+    "IMAGE": "Image",
+    "IPPROFILEREF": "IP Profile Ref",
+    "ADD": "Add",
+    "EDIT": "Edit",
+    "APPLY": "Apply",
+    "FORCE": "Force",
+    "DOWNLOAD": "Download",
+    "CONTENT": "Content",
+    "DELETE": "Delete",
+    "FORCEDELETE": "Force Delete",
+    "RENAME": "Rename",
+    "INFO": "Info",
+    "NSPACKAGES": "NS Packages",
+    "VNFPACKAGES": "VNF Packages",
+    "INSTANCES": "Instances",
+    "INSTANTIATE": "Instantiate",
+    "NSINSTANCES": "NS Instances",
+    "VNFINSTANCES": "VNF Instances",
+    "PDUINSTANCES": "PDU Instances",
+    "VIMACCOUNTS": "VIM Accounts",
+    "WIMACCOUNTS": "WIM Accounts",
+    "SDNCONTROLLER": "SDN Controller",
+    "NETSLICE": "Netslice",
+    "PROJECT": "Project",
+    "DOMAIN": "Domain",
+    "PACKAGES": "Packages",
+    "MODIFIED": "Modified",
+    "NODATAMSG": "No data available in table",
+    "SHORTNAME": "Short Name",
+    "IDENTIFIER": "Identifier",
+    "DESCRIPTION": "Description",
+    "VENDOR": "Vendor",
+    "VERSION": "Version",
+    "ACTIONS": "Actions",
+    "NAME": "Name",
+    "USAGESTATE": "UsageState",
+    "MODIFICATIONDATE": "Modification Date",
+    "CREATEDDATE": "Creation Date",
+    "OPERATIONALSTATUS": "Operational Status",
+    "OPERATIONALSTATE": "Operational State",
+    "CONFIGSTATUS": "Config Status",
+    "DETAILEDSTATUS": "Detailed Status",
+    "NSDNAME": "Nsd name",
+    "NSTNAME": "Nst name",
+    "TYPE": "Type",
+    "VNFD": "VNFD",
+    "VNF": "VNF",
+    "MEMBERINDEX": "Member Index",
+    "NS": "NS",
+    "CREATEDAT": "Created At",
+    "CREATED": "Created",
+    "ALL": "All",
+    "ID": "Id",
+    "OPERATIONSTATE": "Operation State",
+    "STARTTIME": "Start Time",
+    "STATUSENTEREDTIME": "Status Entered Time",
+    "HISTORYOFOPERATIONS": "History Of Operations",
+    "UPDATE": "Update",
+    "READONLYMODE": "Read only mode",
+    "CURRENTLY": "Currently",
+    "ON": "On",
+    "OFF": "Off",
+    "IN": "in",
+    "FILES": "Files",
+    "NEW": "New",
+    "RECENTLY": "Recently",
+    "TOPOLOGY": "Topology",
+    "PLEASEWAIT": "Please Wait",
+    "LOADING": "Loading",
+    "RESOURCEORCHESTRATOR": "Resource Orchestrator",
+    "VIEW": "View",
+    "DROP": "Drop",
+    "HERE": "Here",
+    "MAPVIEW": "Map View",
+    "LISTVIEW": "List View",
+    "OK": "Ok",
+    "DELETEDSUCCESSFULLY": "{{title}} deleted successfully",
+    "SESSIONEXPIRY": "Session expired, please login again",
+    "DELETECONFIRMPOPUPMESSAGE": "Are you sure want to delete",
+    "DELETELOADERMESSAGE": "Please wait while {{title}} deletion is in progress",
+    "VALUE": "Value",
+    "PERFORMACTION": "Perform Action",
+    "EXECUTE": "Execute",
+    "EXECNSPRIMITIVE": "Exec NS Primitive",
+    "PRIMITIVETYPE": "Primitive Type",
+    "VNFPRIMITIVE": "VNF Level Primitive",
+    "NSPRIMITIVE": "NS Level Primitive",
+    "DESCRIPTOR": "Descriptor",
+    "ERROR": "Something Went wrong please try again",
+    "SHOWGRAPH": "Show Graph",
+    "UPDATESHOWGRAPH": "Update and Show Graph",
+    "CREATEPACKAGE": "Create New Package",
+    "GZFILETYPEERRROR": "Upload only tar.gz file and size should not exceed 15 MB",
+    "YAMLFILETYPEERRROR": "Upload only YAML file and size should not exceed 15 MB",
+    "JSONFILETYPEERRROR": "Upload only JSON file and size should not exceed 15 MB",
+    "PUBFILETYPEERRROR": "Upload only PUB file and size should not exceed 15 MB",
+    "PACKAGE": "Package",
+    "URL": "URL",
+    "DEPLOYED": "Deployed",
+    "ROLES": "Roles",
+    "INSTANCEDETAILS": "Instance Details",
+    "IPADDRESS": "IP Address",
+    "MGMT": "Mgmt",
+    "NETNAME": "Net Name",
+    "USER": "User",
+    "PORT": "Port",
+    "USERNAME": "Username",
+    "PASSWORD": "Password",
+    "NODATAERROR": "An error occurred while retrieving the information",
+    "FREEZE": "Freeze",
+    "UNFREEZE": "Unfreeze",
+    "CLONE": "Clone",
+    "CLONECONFIRMPOPUPMESSAGE": "Are you sure want to clone",
+    "CLONESUCCESSFULLY": "Package cloned successfully",
+    "DROPFILES": "Just drag and drop files or click here to upload files",
+    "DROPFILESVALIDATION": "Please select one file to process",
+    "METRICS": "Metrics",
+    "NOOFHOURS": "No Of Hours",
+    "MANDATORYCHECK": "Mandatory fields are marked with an asterisk (*)",
+    "K8VERSION": "K8 Version",
+    "ENTER": "Enter",
+    "SWITCHPROJECT": "Switch Project",
+    "CURRENTPROJECT": "Current Project",
+    "SUBMIT": "Submit",
+    "REFRESH": "Refresh",
+    "OPEN": "Open",
+    "UPLOADCONFIG": "Upload Config",
+    "FILEUPLOADLABEL": "Or load from file",
+    "CONFIG": "Config",
+    "YAMLCONFIG": "Yaml Config",
+    "CHOOSEFILE": "Choose File",
+    "INVALIDCONFIG": "Invalid configuration",
+    "PAGE": {
+        "DASHBOARD": {
+            "DASHBOARD": "Dashboard",
+            "RECENTUSERLOG": "Recent User Log",
+            "LOGS": "Logs",
+            "FAILEDINSTANCES": "Failed Instances",
+            "NOINSTANCES": "No Instances Available",
+            "UPTIME": "Uptime",
+            "RUNNINGINSTANCES": "Running Instances",
+            "NETSLICETEMPLATE": "NetSlice Template",
+            "NETSLICEINSTANCE": "NetSlice Instances",
+            "USERS": "Users",
+            "PROJECTS": "Projects",
+            "USERSETTINGS": "User Settings",
+            "LOGOUT": "Logout"
+        },
+        "LOGIN": {
+            "USERNAME": "Username",
+            "PASSWORD": "Password",
+            "SIGNUP": "Sign Up",
+            "ACCOUNTCREATEMESSAGE": "Don't have an account?",
+            "LOGIN": "Log In",
+            "PASSWORDVALIDMESSAGE": "Password is required",
+            "USERNAMEVALIDMESSAGE": "Username is required",
+            "SIGNINMSG": "Sign in to start your session",
+            "PASSWORDMINLENGTHVALIDMESSAGE": "Password must be 8 characters and contains at least one upper case, lower case, numeric & special character",
+            "USERNAMEMINLENGTHVALIDMESSAGE": "Username must be at least 5 characters"
+        },
+        "INSTANCEINSTANTIATE": {
+            "NEWINSTANCE": "New Instance",
+            "NSNAME": "Ns Name",
+            "DESCRIPTION": "Description",
+            "NSID": "Nsd Id",
+            "SSHKEY": "SSH Key",
+            "VIMACCOUNT": "VIM Account",
+            "SSHKEYMSG": "Paste your key here"
+        },
+        "NSMETRIC": {
+            "INSTANCESMETRIC": "Instances Metric",
+            "METRICERROR": "Data not available in metrics"
+        },
+        "USERSETTINGS": {
+            "LANGUAGE": "Language"
+        },
+        "VIM": {
+            "CREATEDSUCCESSFULLY": "VIM Created Successfully",
+            "LOACTIONINFO": "Type the location name and click enter button to select the location from the list"
+        },
+        "VIMDETAILS": {
+            "NEWVIM": "New VIM",
+            "VIMACCOUNTDETAILS": "VIM Account details",
+            "NAME": "Name",
+            "VIMUSERNAME": "VIM Username",
+            "VIMURL": "VIM URL",
+            "VIMTYPE": "Type",
+            "TENANTNAME": "Tenant name",
+            "DESCRIPTION": "Description",
+            "SCHEMATYPE": "Schema Type",
+            "SCHEMAVERSION": "Schema Version",
+            "CONFIGPARAMETERS": "CONFIG PARAMETERS",
+            "SDNCONTROLLER": "SDN Controller",
+            "SDNPORTMAPPING": "SDN Port Mapping",
+            "VIMNETWORKNAME": "VIM Network Name",
+            "SECURITYGROUPS": "Security Groups",
+            "AVAILABILITYZONE": "Availability Zone",
+            "REGIONALNAME": "Region Name",
+            "INSECURE": "Insecure",
+            "USEEXISTINGFLAVOURS": "Use existing flavors",
+            "USEINTERNALENDPOINT": "Use internal endpoint",
+            "APIVERSION": "API version",
+            "PROJECTDOMAINID": "Project domain id",
+            "PROJECTDOMAINNAME": "Project domain name",
+            "USERDOMAINID": "User domain id",
+            "USERDOMAINUSER": "User domain name",
+            "KEYPAIR": "Keypair",
+            "DATAPLANEPHYSICALNET": "Dataplane physical net",
+            "USEFLOATINGIP": "Use floating ip",
+            "DATAPLANENETVLANRANGE": "Dataplane net vlan range",
+            "MICROVERSION": "Microversion",
+            "BACKTOVIMACCOUNTS": "Back to VimAccounts",
+            "VIMPASSWORD": "VIM Password",
+            "ADDITIONALCONFIG": "Additional configuration",
+            "ADDITIONALCONFIGPLACEHOLDER": "{'key1':[...],'key2':{},'key3':''}",
+            "NEWVIMACCOUNT": "New VIM Account",
+            "ORGNAME": "Orgname",
+            "VCENTERIP": "Vcenter ip",
+            "VCENTERPORT": "Vcenter port",
+            "ADMINUSERNAME": "Admin username",
+            "VCENTERUSER": "Vcenter user",
+            "ADMINPASSWORD": "Admin password",
+            "VCENTERPASSWORD": "Vcenter password",
+            "NSXMANAGER": "Nsx manager",
+            "VROPSSITE": "Vrops site",
+            "NSXUSER": "Nsx user",
+            "VROPSUSER": "Vrops user",
+            "NSXPASSWORD": "Nsx password",
+            "VROPSPASSWORD": "Vrops password",
+            "VPCCIDRBLOCK": "VPC cidr block",
+            "FLAVORIINFO": "Flavor info",
+            "VIM_TYPE": "VIM Type",
+            "VIMLOCATION": "VIM Location",
+            "SUBSCRIPTIONID": "Subscription ID",
+            "RESOURCEGROUP": "Resource Group",
+            "VNETNAME": "VNet Name",
+            "FLAVORSPATTERN": "Flavors Pattern"
+        },
+        "WIMACCOUNTS": {
+            "CREATEDSUCCESSFULLY": "WIM Created Successfully",
+            "WIMDETAILS": "WIM Details",
+            "NEWWIM": "New WIM",
+            "SCHEMAVERSION": "Schema Version",
+            "RO": "RO",
+            "ROACCOUNT": "RO Account",
+            "USERNAME": "WIM Username",
+            "PASSWORD": "WIM Password"
+        },
+        "NSINSTANCE": {
+            "NEWNSINSTANCE": "New NS",
+            "CREATEDSUCCESSFULLY": "NS Instance Created Successfully"
+        },
+        "VNFINSTANCE": {
+            "ADDVNFINSTANCE": "Add VNF Instance"
+        },
+        "PDUINSTANCE": {
+            "NEWPDUINSTANCE": "New PDU",
+            "PDUTYPE": "PDU Type",
+            "PARAMETERS": "PDU Instances Parameters",
+            "ADDINSTANCEPARAMS": "Add Params",
+            "CREATEDSUCCESSFULLY": "PDU Instances Created Successfully"
+        },
+        "NETSLICEINSTANCE": {
+            "CREATENETSLICEINSTANCE": "Create NSI"
+        },
+        "SDNCONTROLLER": {
+            "NEWSDNCONTROLLER": "New SDN Controller",
+            "REGISTEREDSDNCONTROLLER": "Registered SDN Controllers",
+            "RO": "RO",
+            "DPID": "DPID",
+            "CREATEDSUCCESSFULLY": "SDN Registered Successfully",
+            "DPIDPLACEHOLDER": "xx:xx:xx:xx:xx:xx:xx:xx",
+            "DETAILS": "SDN Controller Details"
+        },
+        "USERS": {
+            "CREATEUSER": "Create User",
+            "NEWUSER": "New User",
+            "USERNAME": "User Name",
+            "PASSWORD": "Password",
+            "CONFPASSWORD": "Confirm Password",
+            "EDITUSER": "Edit User",
+            "NEWPASSWORD": "New Password",
+            "DEFAULTPROJECT": "Default Project",
+            "PASSWORDCONFLICT": "Password and confirm password are not matched",
+            "PASSWORDMATCH": "Password Match",
+            "CREATEDSUCCESSFULLY": "User Created Successfully",
+            "EDITEDSUCCESSFULLY": "User Edit Successfully",
+            "EDITCREDENTIALS": "Change Password",
+            "EDITUSERNAME": "Change Username",
+            "PROJECTSROLES": "Projects Roles",
+            "EDITPROJECTROLEMAPPING": "Edit Project Role Mapping",
+            "ADDMAPPINGS": "Add Mappings",
+            "EDITPROJECTROLEERROR": "Please provide at least one project role mapping to continue"
+        },
+        "TOPOLOGY": {
+            "SELECTELEMENT": "Select Element",
+            "VL": "VL",
+            "VNF": "VNF",
+            "VNFD": "VNFD",
+            "CP": "CP",
+            "NSD": "NSD",
+            "NS": "NS",
+            "VIRTUALLINK": "Virtual Link",
+            "CONNECTIONPOINT": "Connection Point",
+            "INTCONNECTIONPOINT": "Int Connection Point",
+            "LINK": "Link",
+            "ADDINGCP": "Please select a connection point of {{vnfdname}} to link {{vlname}}?",
+            "INFO": "Info",
+            "HELP": "Help",
+            "HELPINFO": {
+                "CREATEEDGE": "Create edge",
+                "CREATEEDGEFIRSTSETENCE": "Select the first vertex by clicking on it using",
+                "CREATEEDGESECONDSETENCE": "on another vertex (different than the selected one).",
+                "DELETEEDGEVERTEX": "Delete edge/vertex",
+                "DELETEEDGEVERTEXSENTENCE": "Double clicking on edge/vertex.",
+                "SPREADEDGE": "Spread edge",
+                "SPREADEDGESENTENCE": "Select the vertex by clicking on it using",
+                "EDGEINFO": "Show edge information",
+                "EDGEINFOSENTENCE": "Select the edge by clicking. The information will be shown on the left side."
+            },
+            "VDU": "VDU",
+            "INTVL": "IntVL",
+            "INTCP": "IntCP",
+            "DATAEMPTY": "Please change something"
+        },
+        "PROJECT": {
+            "NEWPROJECT": "New Project",
+            "CREATEDSUCCESSFULLY": "Project Created Successfully",
+            "UPDATEDSUCCESSFULLY": "Project Updated Successfully"
+        },
+        "NSPACKAGE": {
+            "ADDNSPACKAGE": "Compose a new NS",
+            "CREATEDSUCCESSFULLY": "NS Package Created Successfully",
+            "NSCOMPOSE": {
+                "UPDATEDSUCCESSFULLY": "Descriptor Updated Successfully",
+                "CONFIRMCONNECTIONPOINT": "Please confirm to add connection point",
+                "CANNOTLINKVNF": "You can't link a vnf with a vnf",
+                "CANNOTLINKVL": "You can't link a VL with a VL",
+                "CANNOTLINKVLVNF": "You can't link a VL with a vnf",
+                "CANNOTLINKVNFCP": "You can't link a VNF with a CP",
+                "CANNOTLINKVLCP": "You can't link a VL with a CP",
+                "CANNOTLINKCP": "You can't link a CP with a CP",
+                "ADDNSD": "Virtual Link is added succesfully",
+                "ADDVNFD": "VNFD is added succesfully",
+                "ADDNS": "Connection Link is added succesfully",
+                "DELETENSD": "Successfully Deleted the Virtual Link",
+                "DELETEVNFD": "Successfully Deleted the VNF",
+                "DELETENS": "Successfully Deleted the Connection point",
+                "DELETELINK": "Successfully Deleted the Link",
+                "MGMTNETWORK": "Mgmt Network",
+                "VIMNETWORKNAME": "Vim Network Name",
+                "MEMBER-VNF-INDEX": "member-vnf-index",
+                "VNFD-ID-REF": "vnfd-id-ref",
+                "VLD-ID": "vld-id",
+                "VNFD-CP-REF": "vnfd-connection-point-ref"
+            },
+            "EDITPACKAGES": {
+                "UPDATEDSUCCESSFULLY": "Descriptor Updated Successfully"
+            }
+        },
+        "VNFPACKAGE": {
+            "ADDVNFPACKAGE": "Compose a new VNF",
+            "CREATEDSUCCESSFULLY": "VNF Package Created Successfully",
+            "VNFCOMPOSE": {
+                "UPDATEDSUCCESSFULLY": "Descriptor Updated Successfully",
+                "INVALIDSELECTION": "Invalid Selection",
+                "YOUCANNOTDELETELINK": "You cannot delete link",
+                "CANNOTLINKVDUANDINTCP": "You cant link vdu with int_cp",
+                "CANNOTLINKINTCPANDVDU": "You cant link int_cp with vdu",
+                "CANNOTLINKCPANDVNFVL": "You cant link cp with vnf_vl",
+                "CANNOTLINKVNFVLANDCP": "You cant link vnf_vl with cp",
+                "CANNOTLINKINTCPANDCP": "You cant link intcp with cp",
+                "CANNOTLINKCPANDINTCP": "You cant link cp with int_cp",
+                "CANNOTLINKVDUANDVDU": "You can't link a vdu with a vdu"
+            }
+        },
+        "NETSLICE": {
+            "CREATEDSUCCESSFULLY": "Netslice Created Successfully",
+            "TEMPLATECREATEDSUCCESSFULLY": "Netslice Template Created Successfully",
+            "UPDATEDSUCCESSFULLY": "Template Updated Successfully"
+        },
+        "NETSLICETEMPLATE": {
+            "NETSLICETEMPLATEDETAILS": "Network Slices Template Details"
+        },
+        "NSTINSTANCEINSTANTIATE": {
+            "NEWINSTANCE": "New Instance",
+            "NSNAME": "Ns Name",
+            "DESCRIPTION": "Description",
+            "NSTID": "Nst Id",
+            "SSHKEY": "SSH Key",
+            "VIMACCOUNT": "VIM Account",
+            "SSHKEYMSG": "Paste your key here ..."
+        },
+        "NSPRIMITIVE": {
+            "PRIMITIVE": "Primitive",
+            "PRIMITIVEPARAMETERS": "Primitive Parameters",
+            "ADDPRIMITIVEPARAMS": "Add Primitive Params",
+            "EXECUTEDSUCCESSFULLY": "Executed NS Primitive Configuration"
+        },
+        "ROLES": {
+            "CREATEROLE": "Create Role",
+            "ROLE": "Role",
+            "PERMISSIONS": "Permissions",
+            "YAMLPERMISSIONS": "YAML Permissions",
+            "CREATEDSUCCESSFULLY": "Role Created Successfully",
+            "UPDATEDSUCCESSFULLY": "Role Updated Successfully",
+            "ROLEJSONERROR": "Role permissions should be provided in a key-value fashion",
+            "ROLEKEYERROR": "Value of '{{roleKey}}' in a role permissions should be boolean",
+            "EDITROLE": "Edit Role",
+            "PREVIEW": "Preview",
+            "TEXTVIEW": "Text View"
+        },
+        "K8S": {
+            "MENUK8S": "K8s",
+            "MENUK8SCLUSTER": "K8s Clusters",
+            "MENUK8SREPO": "K8s Repos",
+            "REGISTERK8CLUSTER": "Registered K8s clusters",
+            "ADDK8CLUSTER": "Add K8s Cluster",
+            "K8SCLUSTERDETAILS": "K8s Cluster Details",
+            "REGISTERK8REPO": "Registered K8s repository",
+            "ADDK8REPO": "Add K8s Repository",
+            "K8SREPODETAILS": "K8s Repository Details",
+            "CREATEDSUCCESSFULLY": "K8s Created Successfully",
+            "NEWK8SCLUSTER": "New K8s Cluster",
+            "NAME": "Name",
+            "K8SVERSION": "K8s Version",
+            "VIMACCOUNT": "Vim Account",
+            "DESCRIPTION": "Description",
+            "NETS": "Nets",
+            "NETSPLACEHOLDER": "example: {'net1': 'osm-ext'}",
+            "CREDENTIALS": "Credentials",
+            "NEWK8SREPO": "New K8s Repository",
+            "TYPE": "Type",
+            "URL": "URL"
+        }
+    },
+    "HTTPERROR": {
+        "401": "Access denied, Lack of permissions",
+        "400": "Please check the request and try again",
+        "404": "Expected service not avilable, Please try again later",
+        "500": "Server error, Please try again later",
+        "502": "Bad Gateway, Please try again later",
+        "503": "Service temporarily unavailable, Please try again later",
+        "504": "Gateway timeout error, Please try again later",
+        "409": "Please try again later"
+    },
+    "PAGENOTFOUND": {
+        "OOPS": "Oops!",
+        "NOTFOUND": "404 Not Found",
+        "CONTENT": "The page cannot be found or unauthorized, it might be no longer relevant or had its name changed",
+        "MEAN": "Meanwhile, you may return to",
+        "HOME": "Home"
+    },
+    "DOMVALIDATIONS": {
+        "INVALIDURL": "Enter a valid URL",
+        "INVALIDIPADDRESS": "Enter a valid IP Address",
+        "INVALIDPORTADDRESS": "Enter a valid PORT Address",
+        "INVALIDDPID": "Enter a valid DPID",
+        "INVALIDJSON": "Enter a valid JSON Format",
+        "INVALIDYAML": "Enter a valid JSON Format"
+    },
+    "GRAFANA": {
+        "METRICSERROR": "Not a valid metrics"
+    }
+}
\ No newline at end of file
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
new file mode 100644
index 0000000..0cd37b1
--- /dev/null
+++ b/src/assets/i18n/es.json
@@ -0,0 +1,479 @@
+{
+    "OSM": "OSM",
+    "APPVERSION": "Versión de la aplicación",
+    "OSMVERSION": "Versión OSM",
+    "OSMSOURCEMANO": "Fuente abierta MANO",
+    "ADMIN": "Admin",
+    "ENTRIES": "entradas",
+    "COMPOSE": "Componer un",
+    "CREATE": "Crear",
+    "SELECT": "Seleccionar",
+    "CANCEL": "Cancelar",
+    "SAVE": "Salvar",
+    "COUNT": "contar",
+    "IMAGE": "Imagen",
+    "IPPROFILEREF": "IP Profile Ref",
+    "ACTION": "Acción",
+    "ADD": "Añadir",
+    "EDIT": "Editar",
+    "APPLY": "Aplicar",
+    "FORCE": "Fuerza",
+    "DOWNLOAD": "Descargar",
+    "CONTENT": "contenido",
+    "DELETE": "Borrar",
+    "FORCEDELETE": "Eliminar forzado",
+    "RENAME": "Rebautizar",
+    "INFO": "Info",
+    "NSPACKAGES": "NS Paquetes",
+    "VNFPACKAGES": "VNF Paquetes",
+    "INSTANCES": "Instancias",
+    "INSTANTIATE": "Instanciar",
+    "NSINSTANCES": "Instancias de NS",
+    "VNFINSTANCES": "Instancias VNF",
+    "PDUINSTANCES": "Instancias PDU",
+    "VIMACCOUNTS": "Cuentas VIM",
+    "WIMACCOUNTS": "Cuentas WIM",
+    "SDNCONTROLLER": "Controlador SDN",
+    "NETSLICE": "Netslice",
+    "PROJECT": "Proyecto",
+    "DOMAIN": "Dominio",
+    "PACKAGES": "Paquetes",
+    "MODIFIED": "Modificado",
+    "NODATAMSG": "No hay datos disponibles en la tabla",
+    "SHORTNAME": "Nombre corto",
+    "IDENTIFIER": "Identificador",
+    "DESCRIPTION": "Descripción",
+    "VENDOR": "Vendedor",
+    "VERSION": "Versión",
+    "ACTIONS": "Comportamiento",
+    "NAME": "NOMBRE",
+    "USAGESTATE": "Estado de uso",
+    "MODIFICATIONDATE": "Fecha de modificación",
+    "CREATEDDATE": "Fecha de creación",
+    "OPERATIONALSTATUS": "Estado operativo",
+    "OPERATIONALSTATE": "Estado operacional",
+    "CONFIGSTATUS": "Estado de configuración",
+    "DETAILEDSTATUS": "Estado detallado",
+    "NSDNAME": "Nombre nsd",
+    "NSTNAME": "Nst name",
+    "TYPE": "Tipo",
+    "VNFD": "VNFD",
+    "VNF": "VNF",
+    "MEMBERINDEX": "Índice de miembros",
+    "NS": "NS",
+    "CREATEDAT": "Creado en",
+    "CREATED": "Creado",
+    "ALL": "Todas",
+    "ID": "Id",
+    "OPERATIONSTATE": "Estado de la operación",
+    "STARTTIME": "Hora de inicio",
+    "STATUSENTEREDTIME": "Tiempo ingresado estado",
+    "HISTORYOFOPERATIONS": "Historia de operaciones",
+    "UPDATE": "Actualizar",
+    "READONLYMODE": "Modo de solo lectura",
+    "CURRENTLY": "Actualmente",
+    "ON": "En",
+    "OFF": "APAGADA",
+    "IN": "en",
+    "FILES": "Archivos",
+    "NEW": "Nueva",
+    "RECENTLY": "Recientemente",
+    "TOPOLOGY": "Topología",
+    "PLEASEWAIT": "Por favor espera",
+    "LOADING": "Cargando",
+    "RESOURCEORCHESTRATOR": "Orquestador de recursos",
+    "VIEW": "Ver",
+    "DROP": "soltar",
+    "HERE": "aquí",
+    "MAPVIEW": "Vista del mapa",
+    "LISTVIEW": "Vista de la lista",
+    "OK": "Okay",
+    "DELETEDSUCCESSFULLY": "Eliminada Exitosamente",
+    "SESSIONEXPIRY": "Sesión expirada, por favor ingrese nuevamente",
+    "DELETECONFIRMPOPUPMESSAGE": "¿Seguro que quieres eliminar?",
+    "DELETELOADERMESSAGE": "Por favor espere mientras la eliminación está en progreso",
+    "VALUE": "Valor",
+    "PERFORMACTION": "Realizar una acción",
+    "EXECUTE": "Ejecutar",
+    "EXECNSPRIMITIVE": "Ejecutar NS Primitiva",
+    "PRIMITIVETYPE": "Tipo primitivo",
+    "VNFPRIMITIVE": "Nivel VNF Primitivo",
+    "NSPRIMITIVE": "NS Level Primitive",
+    "DESCRIPTOR": "Descriptora",
+    "ERROR": "Algo salió mal. Por favor, vuelva a intentarlo",
+    "SHOWGRAPH": "Mostrar gráfico",
+    "UPDATESHOWGRAPH": "Actualizar y mostrar gráfico",
+    "CREATEPACKAGE": "Crear nuevo paquete",
+    "GZFILETYPEERRROR": "Cargue solo el archivo tar.gz y el tamaño no debe exceder los 15 MB",
+    "YAMLFILETYPEERRROR": "Cargue solo el archivo YAML y el tamaño no debe exceder los 15 MB",
+    "JSONFILETYPEERRROR": "Cargue solo el archivo JSON y el tamaño no debe exceder los 15 MB",
+    "PUBFILETYPEERRROR": "Cargue solo el archivo PUB y el tamaño no debe exceder los 15 MB",
+    "PACKAGE": "Paquete",
+    "URL": "URL",
+    "DEPLOYED": "Desplegada",
+    "ROLES": "Roles",
+    "INSTANCEDETAILS": "Detalles de instancia",
+    "IPADDRESS": "Dirección IP",
+    "MGMT": "Mgmt",
+    "NETNAME": "Nombre neto",
+    "USER": "Usuaria",
+    "PORT": "Puerto",
+    "USERNAME": "Nombre de usuario",
+    "PASSWORD": "Contraseña",
+    "NODATAERROR": "Se produjo un error al recuperar la información",
+    "FREEZE": "Congelar",
+    "UNFREEZE": "Descongelar",
+    "CLONE": "Clon",
+    "CLONECONFIRMPOPUPMESSAGE": "Estás seguro de querer clonar",
+    "CLONESUCCESSFULLY": "Paquete clonado exitosamente",
+    "DROPFILES": "Simplemente arrastre y suelte archivos aquí o haga clic aquí para cargar archivos",
+    "DROPFILESVALIDATION": "Por favor seleccione un archivo para procesar",
+    "METRICS": "Métrica",
+    "NOOFHOURS": "No de horas",
+    "MANDATORYCHECK": "Los campos obligatorios están marcados con un asterisco (*)",
+    "K8VERSION": "Versión K8",
+    "ENTER": "Entrar",
+    "SWITCHPROJECT": "Cambiar proyecto",
+    "CURRENTPROJECT": "Proyecto actual",
+    "SUBMIT": "Entrar",
+    "REFRESH": "Actualizar",
+    "OPEN": "Abierta",
+    "UPLOADCONFIG": "Subir configuración",
+    "FILEUPLOADLABEL": "O cargar desde el archivo",
+    "CONFIG": "Config",
+    "YAMLCONFIG": "Yaml Config",
+    "CHOOSEFILE": "Elija el archivo",
+    "INVALIDCONFIG": "Configuración inválida",
+    "PAGE": {
+        "DASHBOARD": {
+            "DASHBOARD": "Tablero",
+            "RECENTUSERLOG": "Registro de usuario reciente",
+            "LOGS": "Troncos",
+            "FAILEDINSTANCES": "Instancias fallidas",
+            "NOINSTANCES": "Keine Instanzen verfügbar",
+            "UPTIME": "Tiempodeactividad",
+            "RUNNINGINSTANCES": "Corriendo Instancias",
+            "NETSLICETEMPLATE": "Plantilla NetSlice",
+            "NETSLICEINSTANCE": "NetSlice Instancias",
+            "USERS": "Usuarios",
+            "PROJECTS": "Proyectos",
+            "USERSETTINGS": "Usuarios Ajustes",
+            "LOGOUT": "Cerrar sesión"
+        },
+        "LOGIN": {
+            "USERNAME": "Nombre de usuario",
+            "PASSWORD": "Contraseña",
+            "SIGNUP": "Regístrate",
+            "ACCOUNTCREATEMESSAGE": "¿No tienes una cuenta?",
+            "LOGIN": "iniciar sesión",
+            "PASSWORDVALIDMESSAGE": "se requiere contraseña",
+            "USERNAMEVALIDMESSAGE": "Se requiere nombre de usuario",
+            "SIGNINMSG": "Inicia sesión para iniciar tu sesión.",
+            "PASSWORDMINLENGTHVALIDMESSAGE": "La contraseña debe tener 8 caracteres y contiene al menos un carácter en mayúscula, minúscula, numérico y especial",
+            "USERNAMEMINLENGTHVALIDMESSAGE": "El nombre de usuario debe tener al menos 5 caracteres"
+        },
+        "INSTANCEINSTANTIATE": {
+            "NEWINSTANCE": "Nueva instancia",
+            "NSNAME": "Nombre de Ns",
+            "DESCRIPTION": "Descripción",
+            "NSID": "Nsd Id",
+            "SSHKEY": "SSH Key",
+            "VIMACCOUNT": "Cuenta VIM",
+            "SSHKEYMSG": "Pega tu llave aquí"
+        },
+        "NSMETRIC": {
+            "INSTANCESMETRIC": "Instancia métrica",
+            "METRICERROR": "Datos no disponibles en métricas"
+        },
+        "USERSETTINGS": {
+            "LANGUAGE": "Idioma"
+        },
+        "VIM": {
+            "CREATEDSUCCESSFULLY": "VIM Creada Exitosamente",
+            "LOACTIONINFO": "Escriba el nombre de la ubicación y haga clic en el botón Intro para seleccionar la ubicación de la lista"
+        },
+        "VIMDETAILS": {
+            "NEWVIM": "Nuevo VIM",
+            "VIMACCOUNTDETAILS": "VIM Account detalles",
+            "NAME": "Nombre",
+            "VIMUSERNAME": "VIM Nombre de usuario",
+            "VIMURL": "VIM URL",
+            "VIMTYPE": "Tipo",
+            "TENANTNAME": "Tenant Nombre",
+            "DESCRIPTION": "Descripción",
+            "SCHEMATYPE": "Tipo de esquema",
+            "SCHEMAVERSION": "Versión de esquema",
+            "CONFIGPARAMETERS": "CONFIGURAR PARÁMETROS",
+            "SDNCONTROLLER": "SDN Controladora",
+            "SDNPORTMAPPING": "SDN La asignación de puertos",
+            "VIMNETWORKNAME": "VIM Nombre de red",
+            "SECURITYGROUPS": "Grupos de seguridad",
+            "AVAILABILITYZONE": "Zona de disponibilidad",
+            "REGIONALNAME": "Nombre de región",
+            "INSECURE": "Insegura",
+            "USEEXISTINGFLAVOURS": "Usa sabores existentes",
+            "USEINTERNALENDPOINT": "Usar punto final interno",
+            "APIVERSION": "Versión API   ",
+            "PROJECTDOMAINID": "Proyecto dominio id",
+            "PROJECTDOMAINNAME": "Proyecto dominio name",
+            "USERDOMAINID": "Usuaria dominio id",
+            "USERDOMAINUSER": "Usuaria dominio nombre",
+            "KEYPAIR": "Par de claves",
+            "DATAPLANEPHYSICALNET": "Plano de datos physical net",
+            "USEFLOATINGIP": "Utilizar flotante ip",
+            "DATAPLANENETVLANRANGE": "Plano de datos net vlan range",
+            "MICROVERSION": "Microversión",
+            "BACKTOVIMACCOUNTS": "Atrás a VimAccounts",
+            "VIMPASSWORD": "VIM Contraseña",
+            "ADDITIONALCONFIG": "Adicional configuración",
+            "ADDITIONALCONFIGPLACEHOLDER": "{'key1': [...], 'key2': {}, 'key3': ''}",
+            "NEWVIMACCOUNT": "Nueva VIM Cuenta",
+            "ORGNAME": "Orgnombre",
+            "VCENTERIP": "Vcenter ip",
+            "VCENTERPORT": "Vcenter Puerto",
+            "ADMINUSERNAME": "Administración nombre de usuario",
+            "VCENTERUSER": "Vcenter usuaria",
+            "ADMINPASSWORD": "Administración contraseña",
+            "VCENTERPASSWORD": "Vcenter contraseña",
+            "NSXMANAGER": "Nsx gerente",
+            "VROPSSITE": "Vrops sitio",
+            "NSXUSER": "Nsx usuaria",
+            "VROPSUSER": "Vrops usuaria",
+            "NSXPASSWORD": "Nsx contraseña",
+            "VROPSPASSWORD": "Vrops contraseña",
+            "VPCCIDRBLOCK": "VPC cidr bloquear",
+            "FLAVORIINFO": "Flavor informacion",
+            "VIM_TYPE": "VIM Tipo",
+            "VIMLOCATION": "VIM Ubicación",
+            "SUBSCRIPTIONID": "ID de suscripción",
+            "RESOURCEGROUP": "Grupo de recursos",
+            "VNETNAME": "Nombre de red virtual",
+            "FLAVORSPATTERN": "Patrón de sabores"
+        },
+        "WIMACCOUNTS": {
+            "CREATEDSUCCESSFULLY": "WIM Creado Exitosamente",
+            "WIMDETAILS": "Detalles de WIM",
+            "NEWWIM": "Nuevo WIM",
+            "SCHEMAVERSION": "Versión de esquema",
+            "RO": "RO",
+            "ROACCOUNT": "Cuenta RO",
+            "USERNAME": "Nombre de usuario de WIM",
+            "PASSWORD": "Contraseña WIM"
+        },
+        "NSINSTANCE": {
+            "NEWNSINSTANCE": "Nueva NS",
+            "CREATEDSUCCESSFULLY": "NS Ejemplo Creado Exitosamente"
+        },
+        "VNFINSTANCE": {
+            "ADDVNFINSTANCE": "Agregar instancia VNF"
+        },
+        "PDUINSTANCE": {
+            "NEWPDUINSTANCE": "Nueva PDU",
+            "PDUTYPE": "Tipo de PDU",
+            "PARAMETERS": "Parámetros de instancias de PDU",
+            "ADDINSTANCEPARAMS": "Agregar parámetros",
+            "CREATEDSUCCESSFULLY": "Instancias de PDU creadas con éxito"
+        },
+        "NETSLICEINSTANCE": {
+            "CREATENETSLICEINSTANCE": "Crear NSI"
+        },
+        "SDNCONTROLLER": {
+            "NEWSDNCONTROLLER": "Nuevo controlador SDN",
+            "REGISTEREDSDNCONTROLLER": "Controladores SDN registrados",
+            "RO": "RO",
+            "DPID": "DPID",
+            "CREATEDSUCCESSFULLY": "SDN registrado con éxito",
+            "DPIDPLACEHOLDER": "xx:xx:xx:xx:xx:xx:xx:xx",
+            "DETAILS": "Detalles del controlador SDN"
+        },
+        "USERS": {
+            "CREATEUSER": "Crear usuario",
+            "NEWUSER": "Nuevo usuario",
+            "USERNAME": "Nombre de usuario",
+            "PASSWORD": "Contraseña",
+            "CONFPASSWORD": "confirmar Contraseña",
+            "EDITUSER": "editar usuario",
+            "NEWPASSWORD": "Nueva contraseña",
+            "DEFAULTPROJECT": "Proyecto predeterminado",
+            "PASSWORDCONFLICT": "La contraseña y la contraseña de confirmación no coinciden",
+            "PASSWORDMATCH": "Contraseña",
+            "CREATEDSUCCESSFULLY": "Usuario Creada Exitosamente",
+            "EDITEDSUCCESSFULLY": "Usuario editado correctamente",
+            "EDITCREDENTIALS": "Cambia la contraseña",
+            "EDITUSERNAME": "Cambie el nombre de usuario",
+            "PROJECTSROLES": "Roles de proyectos",
+            "EDITPROJECTROLEMAPPING": "Editar asignación de roles de proyecto",
+            "ADDMAPPINGS": "Agregar asignaciones",
+            "EDITPROJECTROLEERROR": "Proporcione al menos un mapeo de roles del proyecto para continuar"
+        },
+        "TOPOLOGY": {
+            "SELECTELEMENT": "Seleccionar elemento",
+            "VL": "VL",
+            "VNF": "VNF",
+            "VNFD": "VNFD",
+            "CP": "CP",
+            "NSD": "NSD",
+            "NS": "NS",
+            "VIRTUALLINK": "Enlace virtual",
+            "CONNECTIONPOINT": "Punto de conexión",
+            "INTCONNECTIONPOINT": "Int Punto de conexión",
+            "LINK": "Enlazar",
+            "ADDINGCP": "Seleccione un punto de conexión de {{vnfdname}} para vincular {{vlname}}?",
+            "INFO": "Informacion",
+            "HELP": "Ayuda",
+            "HELPINFO": {
+                "CREATEEDGE": "Crear borde",
+                "CREATEEDGEFIRSTSETENCE": "Seleccione el primer vértice haciendo clic en él usando",
+                "CREATEEDGESECONDSETENCE": "en otro vértice (diferente al seleccionado).",
+                "DELETEEDGEVERTEX": "Eliminar borde/vértice",
+                "DELETEEDGEVERTEXSENTENCE": "Doble clic en borde / vértice.",
+                "SPREADEDGE": "Borde extendido",
+                "SPREADEDGESENTENCE": "Seleccione el vértice haciendo clic en él usando",
+                "EDGEINFO": "Mostrar información de borde",
+                "EDGEINFOSENTENCE": "Seleccione el borde haciendo clic. La información se mostrará en el lado izquierdo."
+            },
+            "VDU": "VDU",
+            "INTVL": "IntVL",
+            "INTCP": "IntCP",
+            "DATAEMPTY": "Por favor cambia algo"
+        },
+        "PROJECT": {
+            "NEWPROJECT": "Nuevo proyecto",
+            "CREATEDSUCCESSFULLY": "Proyecto Creada Exitosamente",
+            "UPDATEDSUCCESSFULLY": "Proyecto Actualizada Exitosamente"
+        },
+        "NSPACKAGE": {
+            "ADDNSPACKAGE": "Componer un nuevo NS",
+            "CREATEDSUCCESSFULLY": "NS Paquetes Creada Exitosamente",
+            "NSCOMPOSE": {
+                "UPDATEDSUCCESSFULLY": "Actualizada Exitosamente",
+                "CONFIRMCONNECTIONPOINT": "Confirme para agregar un punto de conexión",
+                "CANNOTLINKVNF": "No puedes vincular un vnf con un vnf",
+                "CANNOTLINKVL": "No puedes vincular un VL con un VL",
+                "CANNOTLINKVLVNF": "No puedes vincular un VL con un vnf",
+                "CANNOTLINKVNFCP": "No puedes vincular un VNF con un CP",
+                "CANNOTLINKVLCP": "No puedes vincular un VL con un CP",
+                "CANNOTLINKCP": "No puedes vincular un CP con un CP",
+                "ADDNSD": "Enlace virtual se agrega con éxito",
+                "ADDVNFD": "VNFD se agrega con éxito",
+                "ADDNS": "El enlace de conexión se agregó con éxito",
+                "DELETENSD": "Se eliminó con éxito el enlace virtual",
+                "DELETEVNFD": "Eliminado con éxito el VNF",
+                "DELETENS": "Se eliminó correctamente el punto de conexión",
+                "DELETELINK": "Se eliminó el enlace correctamente",
+                "MGMTNETWORK": "Mgmt Network",
+                "VIMNETWORKNAME": "Vim Network Name",
+                "MEMBER-VNF-INDEX": "member-vnf-index",
+                "VNFD-ID-REF": "vnfd-id-ref",
+                "VLD-ID": "vld-id",
+                "VNFD-CP-REF": "vnfd-punto de conexión-ref"
+            },
+            "EDITPACKAGES": {
+                "UPDATEDSUCCESSFULLY": "Descriptor actualizado exitosamente"
+            }
+        },
+        "VNFPACKAGE": {
+            "ADDVNFPACKAGE": "Componer un nuevo VNF",
+            "CREATEDSUCCESSFULLY": "VNF Paquetes Creada Exitosamente",
+            "VNFCOMPOSE": {
+                "UPDATEDSUCCESSFULLY": "Actualizada Exitosamente",
+                "INVALIDSELECTION": "Selección invalida",
+                "YOUCANNOTDELETELINK": "No puedes eliminar el enlace",
+                "CANNOTLINKVDUANDINTCP": "No puedes vincular vdu con int_cp",
+                "CANNOTLINKINTCPANDVDU": "No puedes vincular int_cp con vdu",
+                "CANNOTLINKCPANDVNFVL": "No puedes vincular cp con vnf_vl",
+                "CANNOTLINKVNFVLANDCP": "No puedes vincular vnf_vl con cp",
+                "CANNOTLINKINTCPANDCP": "No puedes vincular intcp con cp",
+                "CANNOTLINKCPANDINTCP": "No puedes vincular cp con int_cp",
+                "CANNOTLINKVDUANDVDU": "No puedes vincular un vdu con un vdu"
+            }
+        },
+        "NETSLICE": {
+            "CREATEDSUCCESSFULLY": "Netslice Creada Exitosamente",
+            "TEMPLATECREATEDSUCCESSFULLY": "Netslice Modelo Created Successfully",
+            "UPDATEDSUCCESSFULLY": "Plantilla actualizada con éxito"
+        },
+        "NETSLICETEMPLATE": {
+            "NETSLICETEMPLATEDETAILS": "Red Rebanadas Modelo Detalles"
+        },
+        "NSTINSTANCEINSTANTIATE": {
+            "NEWINSTANCE": "Nueva instancia",
+            "NSNAME": "Nombre de Ns",
+            "DESCRIPTION": "Descripción",
+            "NSTID": "Nsd Id",
+            "SSHKEY": "SSH Key",
+            "VIMACCOUNT": "Cuenta VIM",
+            "SSHKEYMSG": "Pega tu llave aquí ..."
+        },
+        "NSPRIMITIVE": {
+            "PRIMITIVE": "Primitiva",
+            "PRIMITIVEPARAMETERS": "Primitiva Parámetros",
+            "ADDPRIMITIVEPARAMS": "Añadir Parámetros primitivos",
+            "EXECUTEDSUCCESSFULLY": "Ejecutada NS Configuración primitiva"
+        },
+        "ROLES": {
+            "CREATEROLE": "Crear rol",
+            "ROLE": "Papel",
+            "PERMISSIONS": "Permisos",
+            "YAMLPERMISSIONS": "YAML Permisos",
+            "CREATEDSUCCESSFULLY": "Rol creado con éxito",
+            "UPDATEDSUCCESSFULLY": "Rol actualizado exitosamente",
+            "ROLEJSONERROR": "Los permisos de rol deben proporcionarse de manera clave-valor",
+            "ROLEKEYERROR": "El valor de '{{roleKey}}' en los permisos de un rol debe ser booleano",
+            "EDITROLE": "Editar rol",
+            "PREVIEW": "Avance",
+            "TEXTVIEW": "Vista de texto"
+        },
+        "K8S": {
+            "MENUK8S": "K8s",
+            "MENUK8SCLUSTER": "Clusters K8s",
+            "MENUK8SREPO": "K8s Repos",
+            "REGISTERK8CLUSTER": "Grupos de K8 registrados",
+            "ADDK8CLUSTER": "Agregar clúster K8s",
+            "K8SCLUSTERDETAILS": "Detalles del clúster K8s",
+            "REGISTERK8REPO": "Repositorio K8 registrado",
+            "ADDK8REPO": "Agregar repositorio K8s",
+            "K8SREPODETAILS": "Detalles del repositorio de K8s",
+            "CREATEDSUCCESSFULLY": "K8 creados con éxito",
+            "NEWK8SCLUSTER": "Nuevo clúster K8s",
+            "NAME": "Nombre",
+            "K8SVERSION": "Versión K8s",
+            "VIMACCOUNT": "Cuenta Vim",
+            "DESCRIPTION": "Descripción",
+            "NETS": "Nets",
+            "NETSPLACEHOLDER": "example: {'net1': 'osm-ext'}",
+            "CREDENTIALS": "Cartas credenciales",
+            "NEWK8SREPO": "Nuevo repositorio K8s",
+            "TYPE": "Tipo",
+            "URL": "URL"
+        }
+    },
+    "HTTPERROR": {
+        "401": "Acceso denegado",
+        "400": "Por favor revise la solicitud e intente nuevamente",
+        "404": "El servicio esperado no está disponible. Vuelve a intentarlo más tarde.",
+        "500": "Error del servidor. Vuelve a intentarlo más tarde",
+        "502": "Bad Gateway, por favor intente nuevamente más tarde",
+        "503": "El servicio no está disponible temporalmente. Vuelve a intentarlo más tarde",
+        "504": "Error de tiempo de espera de la puerta de enlace. Vuelva a intentarlo más tarde",
+        "409": "Por favor, inténtelo de nuevo más tarde"
+    },
+    "PAGENOTFOUND": {
+        "OOPS": "¡Uy!",
+        "NOTFOUND": "404 No encontrado",
+        "CONTENT": "La página no se puede encontrar o no está autorizada, puede que ya no sea relevante o se haya cambiado su nombre.",
+        "MEAN": "Mientras tanto, puede volver a",
+        "HOME": "Hogar"
+    },
+    "DOMVALIDATIONS": {
+        "INVALIDURL": "Ingrese una URL válida",
+        "INVALIDIPADDRESS": "Ingrese una dirección IP válida",
+        "INVALIDPORTADDRESS": "Ingrese una dirección de puerto válida",
+        "INVALIDDPID": "Ingrese un DPID válido",
+        "INVALIDJSON": "Ingrese un formato JSON válido",
+        "INVALIDYAML": "Ingrese un formato YAML válido"
+    },
+    "GRAFANA": {
+        "METRICSERROR": "No es una métrica válida"
+    }
+}
\ No newline at end of file
diff --git a/src/assets/i18n/pt.json b/src/assets/i18n/pt.json
new file mode 100644
index 0000000..3c948ac
--- /dev/null
+++ b/src/assets/i18n/pt.json
@@ -0,0 +1,479 @@
+{
+    "OSM": "OSM",
+    "APPVERSION": "Versão da aplicação",
+    "OSMVERSION": "Versão OSM",
+    "OSMSOURCEMANO": "Código aberto MANO",
+    "ADMIN": "Admin",
+    "ENTRIES": "Entradas",
+    "COMPOSE": "Componha um",
+    "CREATE": "Crio",
+    "SELECT": "Selecione",
+    "CANCEL": "Cancelar",
+    "SAVE": "Salve",
+    "COUNT": "contagem",
+    "IMAGE": "Imagem",
+    "IPPROFILEREF": "Ref do perfil IP",
+    "ACTION": "Açao",
+    "ADD": "Adicionar",
+    "EDIT": "Editar",
+    "APPLY": "Aplique",
+    "FORCE": "Força",
+    "DOWNLOAD": "Baixar",
+    "CONTENT": "Conteúdo",
+    "DELETE": "Excluir",
+    "FORCEDELETE": "Forçar exclusão",
+    "RENAME": "Renomear",
+    "INFO": "Info",
+    "NSPACKAGES": "Pacotes NS",
+    "VNFPACKAGES": "Pacotes VNF",
+    "INSTANCES": "Instâncias",
+    "INSTANTIATE": "Instanciar",
+    "NSINSTANCES": "Instâncias NS",
+    "VNFINSTANCES": "Instâncias VNF",
+    "PDUINSTANCES": "Instâncias da PDU",
+    "VIMACCOUNTS": "Contas VIM",
+    "WIMACCOUNTS": "Contas WIM",
+    "SDNCONTROLLER": "Controlador SDN",
+    "NETSLICE": "Netslice",
+    "PROJECT": "Projeto",
+    "DOMAIN": "Domínio",
+    "MODIFIED": "Modificada",
+    "PACKAGES": "Pacotes",
+    "NODATAMSG": "Sem dados disponíveis na tabela",
+    "SHORTNAME": "Nome curto",
+    "IDENTIFIER": "Identificador",
+    "DESCRIPTION": "Descrição",
+    "VENDOR": "Fornecedor",
+    "VERSION": "Versão",
+    "ACTIONS": "Ações",
+    "NAME": "Nome",
+    "USAGESTATE": "UsageState",
+    "MODIFICATIONDATE": "Modificação de data",
+    "CREATEDDATE": "Data de criação",
+    "OPERATIONALSTATUS": "Estado operacional",
+    "OPERATIONALSTATE": "Estado operacional",
+    "CONFIGSTATUS": "Status da configuração",
+    "DETAILEDSTATUS": "Status detalhado",
+    "NSDNAME": "Nome nsd",
+    "NSTNAME": "Nst name",
+    "TYPE": "Tipo",
+    "VNFD": "VNFD",
+    "VNF": "VNF",
+    "MEMBERINDEX": "Índice de membros",
+    "NS": "NS",
+    "CREATEDAT": "Criado em",
+    "CREATED": "Criada",
+    "ALL": "Todos",
+    "ID": "Identidade",
+    "OPERATIONSTATE": "Estado da operação",
+    "STARTTIME": "Hora de início",
+    "STATUSENTEREDTIME": "Horário de entrada do status",
+    "HISTORYOFOPERATIONS": "História das Operações",
+    "UPDATE": "Atualizar",
+    "READONLYMODE": "Modo somente leitura",
+    "CURRENTLY": "Atualmente",
+    "ON": "Em",
+    "OFF": "Fora",
+    "IN": "em",
+    "FILES": "arquivos",
+    "NEW": "Nova",
+    "RECENTLY": "Recentemente",
+    "TOPOLOGY": "Topologia",
+    "PLEASEWAIT": "Por favor, espere",
+    "LOADING": "Carregando",
+    "RESOURCEORCHESTRATOR": "Orquestrador de Recursos",
+    "VIEW": "Visão",
+    "DROP": "Solta",
+    "HERE": "Aqui",
+    "MAPVIEW": "Visão do mapa",
+    "LISTVIEW": "Exibição de lista",
+    "OK": "Está bem",
+    "DELETEDSUCCESSFULLY": "Apagado com sucesso",
+    "SESSIONEXPIRY": "Sessão expirada, faça o login novamente",
+    "DELETECONFIRMPOPUPMESSAGE": "Tem certeza de que deseja excluir",
+    "DELETELOADERMESSAGE": "Aguarde enquanto a exclusão está em andamento",
+    "VALUE": "Valor",
+    "PERFORMACTION": "Executar a ação",
+    "EXECUTE": "Executar",
+    "EXECNSPRIMITIVE": "Exec NS Primitive",
+    "PRIMITIVETYPE": "Tipo primitivo",
+    "VNFPRIMITIVE": "Primitivo de nível VNF",
+    "NSPRIMITIVE": "NS Level Primitive",
+    "DESCRIPTOR": "Descritora",
+    "ERROR": "Alguma coisa deu errado. Por favor tente outra vez",
+    "SHOWGRAPH": "Mostrar gráfico",
+    "UPDATESHOWGRAPH": "Atualizar e mostrar gráfico",
+    "CREATEPACKAGE": "Criar novo pacote",
+    "GZFILETYPEERRROR": "Carregue apenas o arquivo tar.gz e o tamanho não deve exceder 15 MB",
+    "YAMLFILETYPEERRROR": "Carregar apenas arquivo YAML e o tamanho não deve exceder 15 MB",
+    "JSONFILETYPEERRROR": "Carregar apenas arquivo JSON e o tamanho não deve exceder 15 MB",
+    "PUBFILETYPEERRROR": "Carregar apenas arquivo PUB e o tamanho não deve exceder 15 MB",
+    "PACKAGE": "Pacote",
+    "URL": "URL",
+    "DEPLOYED": "Deployed",
+    "ROLES": "Funções",
+    "INSTANCEDETAILS": "Detalhes da Instância",
+    "IPADDRESS": "Endereço de IP",
+    "MGMT": "Mgmt",
+    "NETNAME": "Nome líquido",
+    "USER": "Do utilizador",
+    "PORT": "Porta",
+    "USERNAME": "Nome de usuário",
+    "PASSWORD": "Senha",
+    "NODATAERROR": "Ocorreu um erro ao recuperar as informações",
+    "FREEZE": "Congelar",
+    "UNFREEZE": "Descongelar",
+    "CLONE": "Clone",
+    "CLONECONFIRMPOPUPMESSAGE": "Tem certeza de que deseja clonar",
+    "CLONESUCCESSFULLY": "Pacote clonado com sucesso",
+    "DROPFILES": "Basta arrastar e soltar arquivos aqui ou clique aqui para fazer upload de arquivos",
+    "DROPFILESVALIDATION": "Selecione um arquivo para processar",
+    "METRICS": "Métricas",
+    "NOOFHOURS": "Não de horas",
+    "MANDATORYCHECK": "Os campos obrigatórios estão marcados com um asterisco (*)",
+    "K8VERSION": "Versão K8",
+    "ENTER": "Entrar",
+    "SWITCHPROJECT": "Switch Project",
+    "CURRENTPROJECT": "Projeto atual",
+    "SUBMIT": "Enviar",
+    "REFRESH": "Atualizar",
+    "OPEN": "Aberto",
+    "UPLOADCONFIG": "Upload Config",
+    "FILEUPLOADLABEL": "Ou carregue do arquivo",
+    "CONFIG": "Config",
+    "YAMLCONFIG": "Yaml Config",
+    "CHOOSEFILE": "Escolher arquivo",
+    "INVALIDCONFIG": "Configuração inválida",
+    "PAGE": {
+        "DASHBOARD": {
+            "DASHBOARD": "painel de controle",
+            "RECENTUSERLOG": "Registro recente do usuário",
+            "LOGS": "Logs",
+            "FAILEDINSTANCES": "Instâncias com falha",
+            "NOINSTANCES": "Keine Instanzen verfügbar",
+            "UPTIME": "Tempo de atividade",
+            "RUNNINGINSTANCES": "Instâncias em execução",
+            "NETSLICETEMPLATE": "Modelo de fatia líquida",
+            "NETSLICEINSTANCE": "Instâncias de fatia líquida",
+            "USERS": "Comercial",
+            "PROJECTS": "Projetos",
+            "USERSETTINGS": "Configurações do usuário",
+            "LOGOUT": "Sair"
+        },
+        "LOGIN": {
+            "USERNAME": "Nome de usuário",
+            "PASSWORD": "Senha",
+            "SIGNUP": "Inscrever-se",
+            "ACCOUNTCREATEMESSAGE": "Não possui uma conta?",
+            "LOGIN": "entrar",
+            "PASSWORDVALIDMESSAGE": "Senha requerida",
+            "USERNAMEVALIDMESSAGE": "Nome de usuário é requerido",
+            "SIGNINMSG": "Faça login para iniciar sua sessão",
+            "PASSWORDMINLENGTHVALIDMESSAGE": "A senha deve ter 8 caracteres e conter pelo menos um caractere maiúsculo, minúsculo, numérico e especial",
+            "USERNAMEMINLENGTHVALIDMESSAGE": "O nome de usuário deve ter pelo menos 5 caracteres"
+        },
+        "INSTANCEINSTANTIATE": {
+            "NEWINSTANCE": "Nova Instância",
+            "NSNAME": "Ns Name",
+            "DESCRIPTION": "Descrição",
+            "NSID": "ID Nsd",
+            "SSHKEY": "Chave SSH",
+            "VIMACCOUNT": "Conta VIM",
+            "SSHKEYMSG": "Cole sua chave aqui"
+        },
+        "NSMETRIC": {
+            "INSTANCESMETRIC": "Métrica de Instâncias",
+            "METRICERROR": "Dados não disponíveis em métricas"
+        },
+        "USERSETTINGS": {
+            "LANGUAGE": "Língua"
+        },
+        "VIM": {
+            "CREATEDSUCCESSFULLY": "VIM criado com sucesso",
+            "LOACTIONINFO": "Digite o nome do local e clique no botão Enter para selecionar o local na lista"
+        },
+        "VIMDETAILS": {
+            "NEWVIM": "Novo VIM",
+            "VIMACCOUNTDETAILS": "Detalhes da conta VIM",
+            "NAME": "Nome",
+            "VIMUSERNAME": "Nome de usuário do VIM",
+            "VIMURL": "URL do VIM",
+            "VIMTYPE": "Tipo",
+            "TENANTNAME": "Nome do inquilino",
+            "DESCRIPTION": "Descrição",
+            "SCHEMATYPE": "Tipo de esquema",
+            "SCHEMAVERSION": "Versão do esquema",
+            "CONFIGPARAMETERS": "PARÂMETROS CONFIG",
+            "SDNCONTROLLER": "Controlador SDN",
+            "SDNPORTMAPPING": "Mapeamento de porta SDN",
+            "VIMNETWORKNAME": "Nome da rede VIM",
+            "SECURITYGROUPS": "Grupos de Segurança",
+            "AVAILABILITYZONE": "Zona de disponibilidade",
+            "REGIONALNAME": "Nome da região",
+            "INSECURE": "Insegura",
+            "USEEXISTINGFLAVOURS": "Use sabores existentes",
+            "USEINTERNALENDPOINT": "Usar terminal interno",
+            "APIVERSION": "Versão da API",
+            "PROJECTDOMAINID": "ID do domínio do projeto",
+            "PROJECTDOMAINNAME": "Nome de domínio do projeto",
+            "USERDOMAINID": "ID do domínio do usuário",
+            "USERDOMAINUSER": "Nome de domínio do usuário",
+            "KEYPAIR": "Par de chaves",
+            "DATAPLANEPHYSICALNET": "Rede física do plano de dados",
+            "USEFLOATINGIP": "Use ip flutuante",
+            "DATAPLANENETVLANRANGE": "Dataplane net vlan range",
+            "MICROVERSION": "Microversão",
+            "BACKTOVIMACCOUNTS": "Voltar para VimAccounts",
+            "VIMPASSWORD": "Senha do VIM",
+            "ADDITIONALCONFIG": "Configuração adicional",
+            "ADDITIONALCONFIGPLACEHOLDER": "{'key1':[...],'key2':{},'key3':''}",
+            "NEWVIMACCOUNT": "Nova conta VIM",
+            "ORGNAME": "Orgnome",
+            "VCENTERIP": "Vcenter ip",
+            "VCENTERPORT": "Porta Vcenter",
+            "ADMINUSERNAME": "Nome de usuário do administrador",
+            "VCENTERUSER": "Usuário do Vcenter",
+            "ADMINPASSWORD": "senha do administrador",
+            "VCENTERPASSWORD": "Senha do Vcenter",
+            "NSXMANAGER": "Gerente Nsx",
+            "VROPSSITE": "Site Vrops",
+            "NSXUSER": "Usuário Nsx",
+            "VROPSUSER": "Usuário Vrops",
+            "NSXPASSWORD": "Senha Nsx",
+            "VROPSPASSWORD": "Senha Vrops",
+            "VPCCIDRBLOCK": "Bloco cidr VPC",
+            "FLAVORIINFO": "Informação do sabor",
+            "VIM_TYPE": "Tipo VIM",
+            "VIMLOCATION": "Localização do VIM",
+            "SUBSCRIPTIONID": "ID de Inscrição",
+            "RESOURCEGROUP": "Grupo de Recursos",
+            "VNETNAME": "Nome da VNet",
+            "FLAVORSPATTERN": "Padrão de sabores"
+        },
+        "WIMACCOUNTS": {
+            "CREATEDSUCCESSFULLY": "WIM criado com sucesso",
+            "WIMDETAILS": "Detalhes do WIM",
+            "NEWWIM": "Novo WIM",
+            "SCHEMAVERSION": "Versão do esquema",
+            "RO": "RO",
+            "ROACCOUNT": "Conta RO",
+            "USERNAME": "Nome de usuário WIM",
+            "PASSWORD": "Senha WIM"
+        },
+        "NSINSTANCE": {
+            "NEWNSINSTANCE": "Nova NS",
+            "CREATEDSUCCESSFULLY": "Instância NS criada com êxito"
+        },
+        "VNFINSTANCE": {
+            "ADDVNFINSTANCE": "Adicionar instância VNF"
+        },
+        "PDUINSTANCE": {
+            "NEWPDUINSTANCE": "Nova PDU",
+            "PDUTYPE": "Tipo de PDU",
+            "PARAMETERS": "Parâmetros de instâncias da PDU",
+            "ADDINSTANCEPARAMS": "Adicionar parâmetros",
+            "CREATEDSUCCESSFULLY": "Instâncias da PDU criadas com êxito"
+        },
+        "NETSLICEINSTANCE": {
+            "CREATENETSLICEINSTANCE": "Criar NSI"
+        },
+        "SDNCONTROLLER": {
+            "NEWSDNCONTROLLER": "Novo controlador SDN",
+            "REGISTEREDSDNCONTROLLER": "Controladores SDN registrados",
+            "RO": "RO",
+            "DPID": "DPID",
+            "CREATEDSUCCESSFULLY": "SDN Registrado com Sucesso",
+            "DPIDPLACEHOLDER": "xx:xx:xx:xx:xx:xx:xx:xx",
+            "DETAILS": "Detalhes do Controlador SDN"
+        },
+        "USERS": {
+            "CREATEUSER": "Criar usuário",
+            "NEWUSER": "Novo usuário",
+            "USERNAME": "Nome de Usuário",
+            "PASSWORD": "Senha",
+            "CONFPASSWORD": "Confirme a Senha",
+            "EDITUSER": "Editar usuário",
+            "NEWPASSWORD": "Nova senha",
+            "DEFAULTPROJECT": "Projeto Padrão",
+            "PASSWORDCONFLICT": "Senha e confirmação de senha não correspondem",
+            "PASSWORDMATCH": "Correspondência de senha",
+            "CREATEDSUCCESSFULLY": "Usuário criado com sucesso",
+            "EDITEDSUCCESSFULLY": "Edição do Usuário com Sucesso",
+            "EDITCREDENTIALS": "Mudar senha",
+            "EDITUSERNAME": "Mudar nome de usuário",
+            "PROJECTSROLES": "Funções dos Projetos",
+            "EDITPROJECTROLEMAPPING": "Editar mapeamento de função do projeto",
+            "ADDMAPPINGS": "Adicionar mapeamentos",
+            "EDITPROJECTROLEERROR": "Forneça pelo menos um mapeamento de função do projeto para continuar"
+        },
+        "TOPOLOGY": {
+            "SELECTELEMENT": "Selecionar elemento",
+            "VL": "VL",
+            "VNF": "VNF",
+            "VNFD": "VNFD",
+            "CP": "CP",
+            "NSD": "NSD",
+            "NS": "NS",
+            "VIRTUALLINK": "Link virtual",
+            "CONNECTIONPOINT": "Ponto de conexão",
+            "INTCONNECTIONPOINT": "Ponto de conexão int",
+            "LINK": "Ligação",
+            "ADDINGCP": "Por favor, selecione um ponto de conexão {{vnfdname}} para vincular {{vlname}}?",
+            "INFO": "Info",
+            "HELP": "Socorro",
+            "HELPINFO": {
+                "CREATEEDGE": "Criar aresta",
+                "CREATEEDGEFIRSTSETENCE": "Selecione o primeiro vértice clicando nele usando",
+                "CREATEEDGESECONDSETENCE": "em outro vértice (diferente do selecionado).",
+                "DELETEEDGEVERTEX": "Excluir aresta / vértice",
+                "DELETEEDGEVERTEXSENTENCE": "Clicar duas vezes na aresta / vértice.",
+                "SPREADEDGE": "Espalhe a borda",
+                "SPREADEDGESENTENCE": "Selecione o vértice clicando nele usando",
+                "EDGEINFO": "Mostrar informações da aresta",
+                "EDGEINFOSENTENCE": "Selecione a aresta clicando. A informação será mostrada no lado esquerdo."
+            },
+            "VDU": "VDU",
+            "INTVL": "IntVL",
+            "INTCP": "IntCP",
+            "DATAEMPTY": "Por favor mude algo"
+        },
+        "PROJECT": {
+            "NEWPROJECT": "Novo projeto",
+            "CREATEDSUCCESSFULLY": "Projeto criado com sucesso",
+            "UPDATEDSUCCESSFULLY": "Projeto atualizado com sucesso"
+        },
+        "NSPACKAGE": {
+            "ADDNSPACKAGE": "Componha um novo NS",
+            "CREATEDSUCCESSFULLY": "Pacote NS criado com sucesso",
+            "NSCOMPOSE": {
+                "UPDATEDSUCCESSFULLY": "Atualizado com sucesso",
+                "CONFIRMCONNECTIONPOINT": "Confirme para adicionar o ponto de conexão",
+                "CANNOTLINKVNF": "Você não pode vincular um vnf a um vnf",
+                "CANNOTLINKVL": "Você não pode vincular uma VL a uma VL",
+                "CANNOTLINKVLVNF": "Você não pode vincular um VL a um vnf",
+                "CANNOTLINKVNFCP": "Você não pode vincular um VNF a um CP",
+                "CANNOTLINKVLCP": "Você não pode vincular uma VL a um CP",
+                "CANNOTLINKCP": "Você não pode vincular um CP a um CP",
+                "ADDNSD": "Link virtual adicionado com sucesso",
+                "ADDVNFD": "VNFD é adicionado com sucesso",
+                "ADDNS": "Link de conexão adicionado com sucesso",
+                "DELETENSD": "O link virtual foi excluído com sucesso",
+                "DELETEVNFD": "O VNF foi excluído com sucesso",
+                "DELETENS": "Excluído com êxito o ponto de conexão",
+                "DELETELINK": "O link foi excluído com sucesso",
+                "MGMTNETWORK": "Mgmt Network",
+                "VIMNETWORKNAME": "Vim Network Name",
+                "MEMBER-VNF-INDEX": "member-vnf-index",
+                "VNFD-ID-REF": "vnfd-id-ref",
+                "VLD-ID": "vld-id",
+                "VNFD-CP-REF": "vnfd-ponto de conexão-ref"
+            },
+            "EDITPACKAGES": {
+                "UPDATEDSUCCESSFULLY": "Atualizado com sucesso"
+            }
+        },
+        "VNFPACKAGE": {
+            "ADDVNFPACKAGE": "Componha um novo VNF",
+            "CREATEDSUCCESSFULLY": "Pacote VNF criado com sucesso",
+            "VNFCOMPOSE": {
+                "UPDATEDSUCCESSFULLY": "Atualizado com sucesso",
+                "INVALIDSELECTION": "Seleção inválida",
+                "YOUCANNOTDELETELINK": "Você não pode excluir o link",
+                "CANNOTLINKVDUANDINTCP": "Você não pode vincular o vdu ao int_cp",
+                "CANNOTLINKINTCPANDVDU": "Você não pode vincular int_cp ao vdu",
+                "CANNOTLINKCPANDVNFVL": "Você não pode vincular o cp ao vnf_vl",
+                "CANNOTLINKVNFVLANDCP": "Você não pode vincular vnf_vl ao cp",
+                "CANNOTLINKINTCPANDCP": "Você não pode vincular o intcp ao cp",
+                "CANNOTLINKCPANDINTCP": "Você não pode vincular o cp ao int_cp",
+                "CANNOTLINKVDUANDVDU": "Você não pode vincular um vdu a um vdu"
+            }
+        },
+        "NETSLICE": {
+            "CREATEDSUCCESSFULLY": "Netslice criado com sucesso",
+            "TEMPLATECREATEDSUCCESSFULLY": "Modelo Netslice criado com sucesso",
+            "UPDATEDSUCCESSFULLY": "Modelo atualizado com sucesso"
+        },
+        "NETSLICETEMPLATE": {
+            "NETSLICETEMPLATEDETAILS": "Detalhes do modelo de fatias de rede"
+        },
+        "NSTINSTANCEINSTANTIATE": {
+            "NEWINSTANCE": "Nova Instância",
+            "NSNAME": "Ns Name",
+            "DESCRIPTION": "Descrição",
+            "NSTID": "Nst Id",
+            "SSHKEY": "Chave SSH",
+            "VIMACCOUNT": "Conta VIM",
+            "SSHKEYMSG": "Cole sua chave aqui ..."
+        },
+        "NSPRIMITIVE": {
+            "PRIMITIVE": "Primitiva",
+            "PRIMITIVEPARAMETERS": "Parâmetros primitivos",
+            "ADDPRIMITIVEPARAMS": "Adicionar Parâmetros Primitivos",
+            "EXECUTEDSUCCESSFULLY": "Configuração primitiva do NS executada"
+        },
+        "ROLES": {
+            "CREATEROLE": "Criar função",
+            "ROLE": "Função",
+            "PERMISSIONS": "Permissões",
+            "YAMLPERMISSIONS": "YAML Permissões",
+            "CREATEDSUCCESSFULLY": "Função criada com sucesso",
+            "UPDATEDSUCCESSFULLY": "Função atualizada com sucesso",
+            "ROLEJSONERROR": "As permissões de função devem ser fornecidas de maneira com valor-chave",
+            "ROLEKEYERROR": "O valor de '{{roleKey}}' nas permissões de uma função deve ser booleano",
+            "EDITROLE": "Editar função",
+            "PREVIEW": "Pré-visualização",
+            "TEXTVIEW": "Visualização de texto"
+        },
+        "K8S": {
+            "MENUK8S": "K8s",
+            "MENUK8SCLUSTER": "Clusters do K8s",
+            "MENUK8SREPO": "Repos do K8s",
+            "REGISTERK8CLUSTER": "Clusters K8s registrados",
+            "ADDK8CLUSTER": "Adicionar cluster do K8s",
+            "K8SCLUSTERDETAILS": "Detalhes do cluster K8s",
+            "REGISTERK8REPO": "Repositório registrado do K8s",
+            "ADDK8REPO": "Adicionar repositório K8s",
+            "K8SREPODETAILS": "Detalhes do Repositório do K8s",
+            "CREATEDSUCCESSFULLY": "K8s criado com sucesso",
+            "NEWK8SCLUSTER": "Novo Cluster K8s",
+            "NAME": "Nome",
+            "K8SVERSION": "Versão do K8s",
+            "VIMACCOUNT": "Conta Vim",
+            "DESCRIPTION": "Descrição",
+            "NETS": "Nets",
+            "NETSPLACEHOLDER": "example: {'net1': 'osm-ext'}",
+            "CREDENTIALS": "Credenciais",
+            "NEWK8SREPO": "Novo Repositório do K8s",
+            "TYPE": "Tipo",
+            "URL": "URL"
+        }
+    },
+    "HTTPERROR": {
+        "401": "Acesso negado",
+        "400": "Verifique a solicitação e tente novamente",
+        "404": "Serviço esperado não disponível, tente novamente mais tarde",
+        "500": "Erro no servidor, tente novamente mais tarde",
+        "502": "Gateway incorreto. Tente novamente mais tarde",
+        "503": "Serviço temporariamente indisponível. Tente novamente mais tarde",
+        "504": "Erro de tempo limite do gateway. Tente novamente mais tarde",
+        "409": "Por favor, tente novamente mais tarde"
+    },
+    "PAGENOTFOUND": {
+        "OOPS": "Opa!",
+        "NOTFOUND": "404 não encontrado",
+        "CONTENT": "A página não pode ser encontrada ou não autorizada, pode não ser mais relevante ou seu nome foi alterado",
+        "MEAN": "Enquanto isso, você pode voltar para",
+        "HOME": "Casa"
+    },
+    "DOMVALIDATIONS": {
+        "INVALIDURL": "Digite um URL válido",
+        "INVALIDIPADDRESS": "Digite um endereço IP válido",
+        "INVALIDPORTADDRESS": "Digite um endereço PORT válido",
+        "INVALIDDPID": "Digite um DPID válido",
+        "INVALIDJSON": "Digite um formato JSON válido",
+        "INVALIDYAML": "Digite um formato YAML válido"
+    },
+    "GRAFANA": {
+        "METRICSERROR": "Métricas não válidas"
+    }
+}
\ No newline at end of file
diff --git a/src/assets/images/CP-VNF.svg b/src/assets/images/CP-VNF.svg
new file mode 100644
index 0000000..26163da
--- /dev/null
+++ b/src/assets/images/CP-VNF.svg
@@ -0,0 +1,26 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg version="1.1" id="IconsRepoEditor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="-106.14 -106.14 654.53 654.53" style="enable-background:new 0 0 442.246 442.246;" xml:space="preserve" fill="#ffffff" stroke="#ffffff" stroke-width="0">
+
+<g id="IconsRepo_bgCarrier">
+
+<rect x="-106.14" y="-106.14" width="654.53" height="654.53" rx="327.265" fill="#c6b63f" stroke-width="0"/>
+
+</g> <path d="M409.657,32.474c-43.146-43.146-113.832-43.146-156.978,0l-84.763,84.762c29.07-8.262,60.589-6.12,88.129,6.732 l44.063-44.064c17.136-17.136,44.982-17.136,62.118,0c17.136,17.136,17.136,44.982,0,62.118l-55.386,55.386l-36.414,36.414 c-17.136,17.136-44.982,17.136-62.119,0l-47.43,47.43c11.016,11.017,23.868,19.278,37.332,24.48 c36.415,14.382,78.643,8.874,110.467-16.219c3.06-2.447,6.426-5.201,9.18-8.262l57.222-57.222l34.578-34.578 C453.109,146.306,453.109,75.926,409.657,32.474z"/> <path d="M184.135,320.114l-42.228,42.228c-17.136,17.137-44.982,17.137-62.118,0c-17.136-17.136-17.136-44.981,0-62.118 l91.8-91.799c17.136-17.136,44.982-17.136,62.119,0l47.43-47.43c-11.016-11.016-23.868-19.278-37.332-24.48 c-38.25-15.3-83.232-8.262-115.362,20.502c-1.53,1.224-3.06,2.754-4.284,3.978l-91.8,91.799 c-43.146,43.146-43.146,113.832,0,156.979c43.146,43.146,113.832,43.146,156.978,0l82.927-83.845 C230.035,335.719,220.243,334.496,184.135,320.114z"/> </svg>
\ No newline at end of file
diff --git a/src/assets/images/CP.svg b/src/assets/images/CP.svg
new file mode 100644
index 0000000..7ed1b03
--- /dev/null
+++ b/src/assets/images/CP.svg
@@ -0,0 +1,26 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg version="1.1" id="IconsRepoEditor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="-154.79 -154.79 751.83 751.83" style="enable-background:new 0 0 442.246 442.246;" xml:space="preserve" fill="#ffffff" stroke="#ffffff" stroke-width="0" transform="rotate(0)">
+
+<g id="IconsRepo_bgCarrier">
+
+<rect x="-154.79" y="-154.79" width="751.83" height="751.83" rx="375.915" fill="#3c8dbc" stroke-width="0"/>
+
+</g> <path d="M409.657,32.474c-43.146-43.146-113.832-43.146-156.978,0l-84.763,84.762c29.07-8.262,60.589-6.12,88.129,6.732 l44.063-44.064c17.136-17.136,44.982-17.136,62.118,0c17.136,17.136,17.136,44.982,0,62.118l-55.386,55.386l-36.414,36.414 c-17.136,17.136-44.982,17.136-62.119,0l-47.43,47.43c11.016,11.017,23.868,19.278,37.332,24.48 c36.415,14.382,78.643,8.874,110.467-16.219c3.06-2.447,6.426-5.201,9.18-8.262l57.222-57.222l34.578-34.578 C453.109,146.306,453.109,75.926,409.657,32.474z"/> <path d="M184.135,320.114l-42.228,42.228c-17.136,17.137-44.982,17.137-62.118,0c-17.136-17.136-17.136-44.981,0-62.118 l91.8-91.799c17.136-17.136,44.982-17.136,62.119,0l47.43-47.43c-11.016-11.016-23.868-19.278-37.332-24.48 c-38.25-15.3-83.232-8.262-115.362,20.502c-1.53,1.224-3.06,2.754-4.284,3.978l-91.8,91.799 c-43.146,43.146-43.146,113.832,0,156.979c43.146,43.146,113.832,43.146,156.978,0l82.927-83.845 C230.035,335.719,220.243,334.496,184.135,320.114z"/> </svg>
\ No newline at end of file
diff --git a/src/assets/images/INTCP.svg b/src/assets/images/INTCP.svg
new file mode 100644
index 0000000..773134a
--- /dev/null
+++ b/src/assets/images/INTCP.svg
@@ -0,0 +1,26 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg version="1.1" id="IconsRepoEditor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-72.81 -72.81 448.99 448.99" style="enable-background:new 0 0 303.374 303.374;" xml:space="preserve" width="64px" height="64px" fill="#ffffff" stroke="#ffffff" stroke-width="0">
+
+<g id="IconsRepo_bgCarrier">
+
+<rect x="-72.81" y="-72.81" width="448.99" height="448.99" rx="224.495" fill="#605ca8" stroke-width="0"/>
+
+</g> <path d="M268.291,177.313c-4.144,0-8.12,0.727-11.814,2.052l-17.319-27.524c10.331-10.171,16.751-24.302,16.751-39.91 c0-30.899-25.138-56.037-56.037-56.037s-56.037,25.138-56.037,56.037c0,12.226,3.947,23.54,10.617,32.762l-33.742,33.954 c-4.438-2.404-9.515-3.771-14.907-3.771c-5.323,0-10.339,1.336-14.736,3.684l-19.721-20.688c5.93-7.037,9.514-16.113,9.514-26.014 c0-22.293-18.137-40.43-40.43-40.43S0,109.565,0,131.858s18.136,40.43,40.429,40.43c5.854,0,11.416-1.261,16.444-3.509 l21.387,22.436c-2.456,4.474-3.856,9.606-3.856,15.06c0,17.313,14.085,31.398,31.398,31.398s31.398-14.085,31.398-31.398 c0-5.388-1.365-10.462-3.766-14.897l33.756-33.969c9.207,6.635,20.491,10.559,32.68,10.559c8.815,0,17.157-2.052,24.584-5.694 l17.197,27.329c-5.258,6.136-8.446,14.097-8.446,22.793c0,19.345,15.739,35.084,35.084,35.084s35.083-15.739,35.083-35.084 S287.636,177.313,268.291,177.313z M161.834,111.931c0-20.974,17.063-38.037,38.037-38.037s38.037,17.063,38.037,38.037 s-17.063,38.037-38.037,38.037S161.834,132.904,161.834,111.931z M105.802,219.673c-7.388,0-13.398-6.011-13.398-13.398 s6.011-13.398,13.398-13.398s13.398,6.011,13.398,13.398S113.19,219.673,105.802,219.673z M18,131.858 c0-12.368,10.062-22.43,22.429-22.43s22.43,10.062,22.43,22.43s-10.062,22.43-22.43,22.43S18,144.226,18,131.858z M268.291,229.48 c-9.42,0-17.084-7.664-17.084-17.084s7.664-17.084,17.084-17.084s17.083,7.664,17.083,17.084S277.71,229.48,268.291,229.48z"/> </svg>
\ No newline at end of file
diff --git a/src/assets/images/INTVL.svg b/src/assets/images/INTVL.svg
new file mode 100644
index 0000000..33fcce3
--- /dev/null
+++ b/src/assets/images/INTVL.svg
@@ -0,0 +1,26 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg version="1.1" id="IconsRepoEditor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-153.6 -153.6 819.20 819.20" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="64px" height="64px" fill="#ffffff" stroke="#ffffff" stroke-width="0">
+
+<g id="IconsRepo_bgCarrier">
+
+<rect x="-153.6" y="-153.6" width="819.20" height="819.20" rx="409.6" fill="#f8a800" stroke-width="0"/>
+
+</g> <path d="M362.665,170.667V192c0,11.776,9.557,21.333,21.333,21.333s21.333-9.557,21.333-21.333v-21.333 c0-11.776-9.557-21.333-21.333-21.333S362.665,158.891,362.665,170.667z"/> <path d="M341.331,128h21.333c11.776,0,21.333-9.557,21.333-21.333s-9.557-21.333-21.333-21.333h-21.333 c-11.776,0-21.333,9.557-21.333,21.333S329.555,128,341.331,128z"/> <path d="M149.331,341.333V320c0-11.776-9.557-21.333-21.333-21.333s-21.333,9.557-21.333,21.333v21.333 c0,11.776,9.557,21.333,21.333,21.333S149.331,353.109,149.331,341.333z"/> <path d="M170.665,384h-21.333c-11.776,0-21.333,9.557-21.333,21.333s9.557,21.333,21.333,21.333h21.333 c11.776,0,21.333-9.557,21.333-21.333S182.441,384,170.665,384z"/> <path d="M469.397,298.667h-64.066v-21.333c0-11.776-9.557-21.333-21.333-21.333s-21.333,9.557-21.333,21.333v21.333h-64.062 c-23.488,0-42.603,19.115-42.603,42.603V384h-0.002c-11.776,0-21.333,9.557-21.333,21.333s9.557,21.333,21.333,21.333H256v42.731 C256,492.885,275.115,512,298.603,512h170.795C492.885,512,512,492.885,512,469.397V341.269 C512,317.781,492.885,298.667,469.397,298.667z M298.603,320v21.333h-0.021L298.603,320z M298.667,469.397l-0.011-63.895 c0-0.057,0.009-0.112,0.009-0.169c0-0.057-0.008-0.112-0.009-0.17l-0.011-63.83l170.688-0.064l0.064,128.064L298.667,469.397z"/> <path d="M256,170.731V128c11.775-0.001,21.331-9.558,21.331-21.333S267.775,85.335,256,85.333V42.603 C256,19.115,236.885,0,213.397,0H42.603C19.115,0,0,19.115,0,42.603v128.128c0,23.488,19.115,42.603,42.603,42.603h64.062v21.333 c0,11.776,9.557,21.333,21.333,21.333s21.333-9.557,21.333-21.333v-21.333h64.066C236.885,213.333,256,194.219,256,170.731z M42.603,42.667h-0.021l0.021-21.333V42.667z M42.667,170.731L42.645,42.667l170.688-0.064l0.032,63.395 c-0.007,0.224-0.034,0.443-0.034,0.669c0,0.23,0.027,0.454,0.034,0.682l0.032,63.318L42.667,170.731z"/> </svg>
\ No newline at end of file
diff --git a/src/assets/images/TICK.svg b/src/assets/images/TICK.svg
new file mode 100644
index 0000000..4675aad
--- /dev/null
+++ b/src/assets/images/TICK.svg
@@ -0,0 +1,29 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="18px" height="13px" viewBox="0 0 18 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Ecommerce" transform="translate(-844.000000, -3389.000000)" fill="#FFFFFF">
+            <g id="Product-Card-#1" transform="translate(150.000000, 2942.000000)">
+                <g id="Color" transform="translate(683.000000, 399.000000)">
+                    <path d="M28.8443688,48.9224987 L28.095269,48.1585481 C27.8879809,47.9471506 27.5523969,47.9471506 27.3451088,48.1585481 L17.6752,58.0207009 C17.4673818,58.2320984 17.1317978,58.2320984 16.9255701,58.0207009 L12.6546937,53.6656962 C12.4474056,53.4542987 12.1118216,53.4542987 11.9055938,53.6656962 L11.1554337,54.4301874 C10.9481456,54.6415849 10.9481456,54.9838218 11.1554337,55.1946786 L16.5369712,60.6834443 C16.950487,61.105158 17.6211249,61.1056986 18.0351709,60.6839849 L28.8438387,49.6875305 C29.0516569,49.4766737 29.052187,49.1338962 28.8443688,48.9224987" id="Icon"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/VDU.svg b/src/assets/images/VDU.svg
new file mode 100644
index 0000000..7dc6540
--- /dev/null
+++ b/src/assets/images/VDU.svg
@@ -0,0 +1,26 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg version="1.1" id="IconsRepoEditor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="-45.25 -45.25 279.05 279.05" style="enable-background:new 0 0 188.547 188.547;" xml:space="preserve" fill="#ffffff" stroke="#ffffff" stroke-width="0">
+
+<g id="IconsRepo_bgCarrier">
+
+<rect x="-45.25" y="-45.25" width="279.05" height="279.05" rx="139.525" fill="#cf1c24" stroke-width="0"/>
+
+</g> <path d="M94.589,145.478v13.019h46.765l6.235,6.235v6.235H29.118v-6.235l6.235-6.235h46.765v-13.025H15.281 C6.884,145.471,0,138.584,0,130.188V32.861c0-8.397,6.877-15.281,15.281-15.281h146.143c8.415,0,15.284,6.875,15.284,15.281V64.05 c-1.925-2.125-3.964-4.125-6.235-5.849v-25.34c0-4.987-4.056-9.045-9.049-9.045H15.281c-4.993,0-9.045,4.058-9.045,9.045v78.626 c0,4.993,4.052,9.049,9.045,9.049h90.184c8.476,12.124,22.426,19.57,37.405,19.57c2.49,0,4.957-0.268,7.398-0.676l3.508,6.053 H94.589V145.478z M176.951,74.77c10.863,18.816,4.396,42.977-14.432,53.822c-18.815,10.863-42.965,4.415-53.828-14.425 c-10.859-18.804-4.396-42.953,14.42-53.813C141.919,49.491,166.082,55.951,176.951,74.77z M171.3,78.043 c-9.073-15.707-29.222-21.099-44.926-12.054c-15.704,9.073-21.111,29.216-12.026,44.92c9.066,15.704,29.21,21.136,44.907,12.062 C174.965,113.887,180.355,93.744,171.3,78.043z M172.42,126.162l-16.94,9.792l13.056,22.566l16.94-9.792L172.42,126.162z M187.229,151.834l-16.952,9.779c2.716,4.689,8.695,6.284,13.378,3.593S189.939,156.523,187.229,151.834z M108.058,45.64H26v6.235 h82.058V45.64z M86.795,60.366H26v6.235h60.794V60.366z M86.795,75.099H26v6.235h60.794V75.099z M26,96.063h60.794v-6.235H26 V96.063z"/> </svg>
\ No newline at end of file
diff --git a/src/assets/images/VL.svg b/src/assets/images/VL.svg
new file mode 100644
index 0000000..6361c01
--- /dev/null
+++ b/src/assets/images/VL.svg
@@ -0,0 +1,26 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg version="1.1" id="IconsRepoEditor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-68.96 -68.96 482.71 482.71" style="enable-background:new 0 0 344.789 344.789;" xml:space="preserve" width="64px" height="64px" fill="#ffffff" stroke="#ffffff" stroke-width="0">
+
+<g id="IconsRepo_bgCarrier">
+
+<rect x="-68.96" y="-68.96" width="482.71" height="482.71" rx="241.355" fill="#e4397c" stroke-width="0"/>
+
+</g> <path d="M259.395,64.283h-40c-4.142,0-7.5,3.357-7.5,7.5v38c0,4.143,3.358,7.5,7.5,7.5h8.5v32.745l-44,20.653V55.303h17.777 c2.82,0,5.402-1.582,6.683-4.095c1.28-2.513,1.043-5.531-0.615-7.813L178.462,3.092C177.051,1.149,174.795,0,172.395,0 c-2.401,0-4.657,1.149-6.068,3.092l-29.277,40.303c-1.658,2.282-1.895,5.301-0.615,7.813c1.281,2.513,3.862,4.095,6.683,4.095 h17.777v138.674l-44-20.653v-38.569c9.435-4.363,16-13.912,16-24.971c0-15.163-12.336-27.5-27.5-27.5 c-15.164,0-27.5,12.337-27.5,27.5c0,11.059,6.565,20.607,16,24.971v45.875c0,4.459,2.577,8.516,6.614,10.41l60.386,28.345v45.032 c-17.032,4.986-29.512,20.738-29.512,39.361c0,22.614,18.398,41.012,41.012,41.012c22.615,0,41.014-18.397,41.014-41.012 c0-18.623-12.48-34.376-29.514-39.361v-68.327l60.386-28.345c4.037-1.895,6.614-5.951,6.614-10.41v-40.051h8.5 c4.142,0,7.5-3.357,7.5-7.5v-38C266.895,67.641,263.537,64.283,259.395,64.283z"/> </svg>
\ No newline at end of file
diff --git a/src/assets/images/VNFD.svg b/src/assets/images/VNFD.svg
new file mode 100644
index 0000000..86b7fc8
--- /dev/null
+++ b/src/assets/images/VNFD.svg
@@ -0,0 +1,26 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg version="1.1" id="IconsRepoEditor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-76.05 -76.05 468.99 468.99" style="enable-background:new 0 0 316.89 316.89;" xml:space="preserve" width="64px" height="64px" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="0">
+
+<g id="IconsRepo_bgCarrier">
+
+<rect x="-76.05" y="-76.05" width="468.99" height="468.99" rx="234.495" fill="#605ca8" stroke-width="0"/>
+
+</g> <path d="M182.47,212.195c0-0.754,0.036-1.5,0.057-2.25H38.5c-21.229,0-38.5,17.271-38.5,38.5s17.271,38.5,38.5,38.5h199.493 C205.905,277.24,182.47,247.408,182.47,212.195z M81.5,258.445h-35c-5.514,0-10-4.486-10-10c0-5.514,4.486-10,10-10h35 c5.514,0,10,4.486,10,10C91.5,253.959,87.014,258.445,81.5,258.445z"/> <path d="M38.5,196.945h145.476c7.114-35.78,38.743-62.837,76.581-62.837c9.54,0,18.682,1.727,27.139,4.872 c-6.697-11.378-19.066-19.035-33.196-19.035h-216c-21.229,0-38.5,17.271-38.5,38.5S17.271,196.945,38.5,196.945z M46.5,148.445h35 c5.514,0,10,4.486,10,10c0,5.514-4.486,10-10,10h-35c-5.514,0-10-4.486-10-10C36.5,152.931,40.986,148.445,46.5,148.445z"/> <path d="M38.5,106.945h216c21.228,0,38.5-17.271,38.5-38.5s-17.272-38.5-38.5-38.5h-216c-21.229,0-38.5,17.271-38.5,38.5 S17.271,106.945,38.5,106.945z M237.5,55.695c7.03,0,12.75,5.72,12.75,12.75s-5.72,12.75-12.75,12.75 c-7.03,0-12.75-5.72-12.75-12.75S230.47,55.695,237.5,55.695z M46.5,58.445h35c5.514,0,10,4.486,10,10s-4.486,10-10,10h-35 c-5.514,0-10-4.486-10-10S40.986,58.445,46.5,58.445z"/> <path d="M260.557,155.862c-31.112,0-56.333,25.221-56.333,56.333s25.221,56.333,56.333,56.333s56.332-25.221,56.332-56.333 S291.669,155.862,260.557,155.862z M290.653,200.261l-35.654,35.653c-0.754,0.755-1.759,1.172-2.828,1.172 c-1.069,0-2.074-0.416-2.829-1.172l-17.88-17.88c-0.756-0.755-1.172-1.76-1.172-2.828c0-1.068,0.416-2.073,1.172-2.829l3.535-3.535 c0.754-0.755,1.759-1.172,2.828-1.172c1.068,0,2.073,0.416,2.828,1.171l11.518,11.517l29.291-29.289 c0.754-0.755,1.759-1.172,2.828-1.172c1.069,0,2.074,0.417,2.829,1.172l3.535,3.535c0.755,0.754,1.172,1.759,1.172,2.828 C291.825,198.501,291.409,199.506,290.653,200.261z"/> </svg>
\ No newline at end of file
diff --git a/src/assets/images/login_background.jpg b/src/assets/images/login_background.jpg
new file mode 100644
index 0000000..dc1411d
--- /dev/null
+++ b/src/assets/images/login_background.jpg
Binary files differ
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..7de447c
--- /dev/null
+++ b/src/assets/images/logo.png
Binary files differ
diff --git a/src/assets/images/map-icon.png b/src/assets/images/map-icon.png
new file mode 100644
index 0000000..e2e9f75
--- /dev/null
+++ b/src/assets/images/map-icon.png
Binary files differ
diff --git a/src/assets/images/page-not-found.jpg b/src/assets/images/page-not-found.jpg
new file mode 100644
index 0000000..794c0fc
--- /dev/null
+++ b/src/assets/images/page-not-found.jpg
Binary files differ
diff --git a/src/assets/js/tar.js b/src/assets/js/tar.js
new file mode 100644
index 0000000..058d1ee
--- /dev/null
+++ b/src/assets/js/tar.js
@@ -0,0 +1,432 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+var Tar =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 2);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+/*
+ * tar-js
+ * MIT (c) 2011 T. Jameson Little
+ */
+
+(function () {
+	"use strict";
+
+	var lookup = [
+			'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
+			'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
+			'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
+			'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
+			'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
+			'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
+			'w', 'x', 'y', 'z', '0', '1', '2', '3',
+			'4', '5', '6', '7', '8', '9', '+', '/'
+		];
+	function clean(length) {
+		var i, buffer = new Uint8Array(length);
+		for (i = 0; i < length; i += 1) {
+			buffer[i] = 0;
+		}
+		return buffer;
+	}
+
+	function extend(orig, length, addLength, multipleOf) {
+		var newSize = length + addLength,
+			buffer = clean((parseInt(newSize / multipleOf) + 1) * multipleOf);
+
+		buffer.set(orig);
+
+		return buffer;
+	}
+
+	function pad(num, bytes, base) {
+		num = num.toString(base || 8);
+		return "000000000000".substr(num.length + 12 - bytes) + num;
+	}	
+	
+	function stringToUint8 (input, out, offset) {
+		var i, length;
+
+		out = out || clean(input.length);
+
+		offset = offset || 0;
+		for (i = 0, length = input.length; i < length; i += 1) {
+			out[offset] = input.charCodeAt(i);
+			offset += 1;
+		}
+
+		return out;
+	}
+
+	function uint8ToBase64(uint8) {
+		var i,
+			extraBytes = uint8.length % 3, // if we have 1 byte left, pad 2 bytes
+			output = "",
+			temp, length;
+
+		function tripletToBase64 (num) {
+			return lookup[num >> 18 & 0x3F] + lookup[num >> 12 & 0x3F] + lookup[num >> 6 & 0x3F] + lookup[num & 0x3F];
+		};
+
+		// go through the array every three bytes, we'll deal with trailing stuff later
+		for (i = 0, length = uint8.length - extraBytes; i < length; i += 3) {
+			temp = (uint8[i] << 16) + (uint8[i + 1] << 8) + (uint8[i + 2]);
+			output += tripletToBase64(temp);
+		}
+
+		// this prevents an ERR_INVALID_URL in Chrome (Firefox okay)
+		switch (output.length % 4) {
+			case 1:
+				output += '=';
+				break;
+			case 2:
+				output += '==';
+				break;
+			default:
+				break;
+		}
+
+		return output;
+	}
+
+	module.exports.clean = clean;
+	module.exports.pad = pad;
+	module.exports.extend = extend;
+	module.exports.stringToUint8 = stringToUint8;
+	module.exports.uint8ToBase64 = uint8ToBase64;
+}());
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+/*
+ * tar-js
+ * MIT (c) 2011 T. Jameson Little
+ */
+
+(function () {
+	"use strict";
+	
+/*
+struct posix_header {             // byte offset
+	char name[100];               //   0
+	char mode[8];                 // 100
+	char uid[8];                  // 108
+	char gid[8];                  // 116
+	char size[12];                // 124
+	char mtime[12];               // 136
+	char chksum[8];               // 148
+	char typeflag;                // 156
+	char linkname[100];           // 157
+	char magic[6];                // 257
+	char version[2];              // 263
+	char uname[32];               // 265
+	char gname[32];               // 297
+	char devmajor[8];             // 329
+	char devminor[8];             // 337
+	char prefix[155];             // 345
+                                  // 500
+};
+*/
+
+	var utils = __webpack_require__(0),
+		headerFormat;
+	
+	headerFormat = [
+		{
+			'field': 'fileName',
+			'length': 100
+		},
+		{
+			'field': 'fileMode',
+			'length': 8
+		},
+		{
+			'field': 'uid',
+			'length': 8
+		},
+		{
+			'field': 'gid',
+			'length': 8
+		},
+		{
+			'field': 'fileSize',
+			'length': 12
+		},
+		{
+			'field': 'mtime',
+			'length': 12
+		},
+		{
+			'field': 'checksum',
+			'length': 8
+		},
+		{
+			'field': 'type',
+			'length': 1
+		},
+		{
+			'field': 'linkName',
+			'length': 100
+		},
+		{
+			'field': 'ustar',
+			'length': 8
+		},
+		{
+			'field': 'owner',
+			'length': 32
+		},
+		{
+			'field': 'group',
+			'length': 32
+		},
+		{
+			'field': 'majorNumber',
+			'length': 8
+		},
+		{
+			'field': 'minorNumber',
+			'length': 8
+		},
+		{
+			'field': 'filenamePrefix',
+			'length': 155
+		},
+		{
+			'field': 'padding',
+			'length': 12
+		}
+	];
+
+	function formatHeader(data, cb) {
+		var buffer = utils.clean(512),
+			offset = 0;
+
+		headerFormat.forEach(function (value) {
+			var str = data[value.field] || "",
+				i, length;
+
+			for (i = 0, length = str.length; i < length; i += 1) {
+				buffer[offset] = str.charCodeAt(i);
+				offset += 1;
+			}
+
+			offset += value.length - i; // space it out with nulls
+		});
+
+		if (typeof cb === 'function') {
+			return cb(buffer, offset);
+		}
+		return buffer;
+	}
+	
+	module.exports.structure = headerFormat;
+	module.exports.format = formatHeader;
+}());
+
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+/*
+ * tar-js
+ * MIT (c) 2011 T. Jameson Little
+ */
+
+(function () {
+	"use strict";
+
+	var header = __webpack_require__(1),
+		utils = __webpack_require__(0),
+		recordSize = 512,
+		blockSize;
+	
+	function Tar(recordsPerBlock) {
+		this.written = 0;
+		blockSize = (recordsPerBlock || 20) * recordSize;
+		this.out = utils.clean(blockSize);
+	}
+
+	Tar.prototype.append = function (filepath, input, opts, callback) {
+		var data,
+			checksum,
+			mode,
+			mtime,
+			uid,
+			gid,
+			headerArr;
+
+		if (typeof input === 'string') {
+			input = utils.stringToUint8(input);
+		} else if (input.constructor !== Uint8Array.prototype.constructor) {
+			throw 'Invalid input type. You gave me: ' + input.constructor.toString().match(/function\s*([$A-Za-z_][0-9A-Za-z_]*)\s*\(/)[1];
+		}
+
+		if (typeof opts === 'function') {
+			callback = opts;
+			opts = {};
+		}
+
+		opts = opts || {};
+
+		mode = opts.mode || parseInt('777', 8) & 0xfff;
+		mtime = opts.mtime || Math.floor(+new Date() / 1000);
+		uid = opts.uid || 0;
+		gid = opts.gid || 0;
+
+		data = {
+			fileName: filepath,
+			fileMode: utils.pad(mode, 7),
+			uid: utils.pad(uid, 7),
+			gid: utils.pad(gid, 7),
+			fileSize: utils.pad(input.length, 11),
+			mtime: utils.pad(mtime, 11),
+			checksum: '        ',
+			type: opts.type || '0',
+			ustar: 'ustar  ',
+			owner: opts.owner || '',
+			group: opts.group || ''
+		};
+
+		// calculate the checksum
+		checksum = 0;
+		Object.keys(data).forEach(function (key) {
+			var i, value = data[key], length;
+
+			for (i = 0, length = value.length; i < length; i += 1) {
+				checksum += value.charCodeAt(i);
+			}
+		});
+
+		data.checksum = utils.pad(checksum, 6) + "\u0000 ";
+
+		headerArr = header.format(data);
+
+		var i, offset, length;
+
+		this.out.set(headerArr, this.written);
+
+		this.written += headerArr.length;
+
+		// If there is not enough space in this.out, we need to expand it to
+		// fit the new input.
+		if (this.written + input.length > this.out.length) {
+			this.out = utils.extend(this.out, this.written, input.length, blockSize);
+		}
+
+		this.out.set(input, this.written);
+
+		// to the nearest multiple of recordSize
+		this.written += input.length + (recordSize - (input.length % recordSize || recordSize));
+
+		// make sure there's at least 2 empty records worth of extra space
+		if (this.out.length - this.written < recordSize * 2) {
+			this.out = utils.extend(this.out, this.written, recordSize * 2, blockSize);
+		}
+
+		if (typeof callback === 'function') {
+			callback(this.out);
+		}
+
+		return this.out;
+	};
+
+	Tar.prototype.clear = function () {
+		this.written = 0;
+		this.out = utils.clean(blockSize);
+	};
+	
+	module.exports = Tar;
+}());
+
+
+/***/ })
+/******/ ]);
\ No newline at end of file
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
new file mode 100644
index 0000000..bc8a216
--- /dev/null
+++ b/src/assets/scss/app.scss
@@ -0,0 +1,688 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/** Styles for the application **/
+@import "../../assets/scss/mixins/mixin";
+@import "../../assets/scss/variable";
+$customnavbar-padding-x: ($spacer / 0.5) !default;
+* {
+  outline: 0;
+}
+button[type=submit]:focus, .sidebar-body button[type=button]:focus {
+  @include box-shadow(0, 0, 0, 0.2rem, lighten($primary, 50%) !important);
+}
+.btn-danger:focus{
+  @include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
+}
+body,
+.list-overflow,
+.scroll-box,
+.smarttable-style,
+.modal-body-custom-height,
+.layout-wrapper, .CodeMirror-vscrollbar, .ng-sidebar, .runninginstances .popover-body {
+  &::-webkit-scrollbar {
+    @include wh-value(10px, null);
+  }
+  &::-webkit-scrollbar-thumb {
+    background-clip: content-box;
+    @include border(all, 3, solid, transparent);
+    @include roundedCorners(7);
+    @include box-shadow(0, 0, 0, 10px, rgba($black, 0.8), inset);
+  }
+  &::-webkit-scrollbar-button {
+    @include wh-value(0, 0);
+    @include flexbox(none, null, null, null, null, null);
+  }
+  &::-webkit-scrollbar-corner {
+    @include background(null, transparent, null, null, null);
+  }
+}
+body {
+  @include font-family("Roboto");
+  @include background(null, $theme-bg-color, null, null, null);
+  overflow-x: hidden;
+  .osm-logo {
+    @include wh-value(100px, auto);
+  }
+  .bg-light {
+    @include background(null, $theme-bg-color !important, null, null, null);
+  }
+  a {
+    color: $primary;
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+  .badge {
+    @include line-height(normal);
+    &.badge-pill {
+      @include padding-percentage-value(0.2em, 0.6em, 0.2em, 0.6em);
+    }
+  }
+  button {
+    outline: none;
+    @include box-shadow(0, 0, 0, 0, transparent);
+    &:hover,
+    &:focus,
+    &:active {
+      outline: none;
+      @include box-shadow(0, 0, 0, 0, transparent !important);
+    }
+    &.btn-primary,
+    &.btn-default,
+    &.btn-warning,
+    &.btn-outline-primary:hover,
+    &.btn-outline-warning:hover {
+      color: $white;
+      &:hover,
+      &:focus,
+      &:not(:disabled):not(.disabled):active {
+        color: $white;
+        @include background(null, $primary, null, null, null);
+        border-color: $primary;
+      }
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+  }
+  .row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .navbar {
+    @include padding-percentage-value(
+      $navbar-padding-y,
+      $customnavbar-padding-x,
+      $navbar-padding-y,
+      $customnavbar-padding-x
+    );
+  }
+  .form-control {
+    @include roundedCorners(4);
+    @include font(null, 12px, null);
+    &::placeholder {
+      color: $gray-400;
+    }
+  }
+  .modal-dialog {
+    max-width: 600px;
+  }
+  .header-style {
+    @include font(null, 1.2rem, 700);
+    color: $primary;
+    @include line-height(1.25);
+  }
+  .cursor-default {
+    cursor: default;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .mr-top-5 {
+    @include margin-value-percentage(5px, auto, auto, auto);
+  }
+  .padLeft0 {
+    padding-left: 0px;
+  }
+  .padRight0 {
+    padding-right: 0px;
+  }
+  .mandatory-label {
+    @include font(null, 10px, null);
+  }
+  .dropzone {
+    min-height: 50px;
+    @include flexbox(table, null, null, null, null, null);
+    @include wh-value(100%, 50px);
+    @include border(all, 1, dashed, $secondary);
+    cursor: pointer;
+    .text-wrapper {
+      @include padding-value(5, 5, 5, 5);
+      @include flexbox(table-cell, null, null, null, null, null);
+      vertical-align: middle;
+    }
+    .file-drop-title {
+      @include font(null, 16px, null);
+    }
+  }
+  .close {
+    opacity: 1 !important;
+  }
+  .roles-section {
+    .card {
+      .bg-secondary {
+        @include background(null, $gray-400 !important, null, null, null);
+      }
+    }
+  }
+  .card {
+    margin-bottom: 1rem;
+  }
+  .custom-card {
+    @include border(top, 3, solid, $primary);
+    @include roundedCorners(3);
+    .custom-card-body {
+      @include padding-value(15, 15, 15, 15);
+    }
+  }
+  table-cell-default-editor select-editor select {
+    @include wh-value(null, calc(2rem + 8px) !important);
+    @include padding-value(0, 10, 0, 10);
+  }
+  .CodeMirror {
+    min-height: 400px !important;
+  }
+  .table-layout-fixed {
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+  .border-radius-default {
+    @include roundedCorners(3);
+  }
+  /** Model Popup-Design **/
+  .modal-body-custom-height {
+    max-height: 65vh;
+    overflow-y: auto;
+  }
+  /** Hide input clear icon in IE */
+  input::-ms-clear {
+    @include flexbox(none, null, null, null, null, null);
+  }
+  /** Overwrite the tooltip z-index */
+  .tooltip {
+    z-index: 1010;
+  }
+  /** Popover Header **/
+  .popover-header {
+    color: $primary;
+    @include background(null, $theme-bg-color, null, null, null);
+  }
+  /** Vim Show running instance Details **/
+  .runninginstances{
+     width:200px;
+     .popover-body{
+      max-height: 200px;
+      overflow-y: scroll;
+     }
+  }
+  /****************************************************************************/
+  /************************** Smart table custom design ***********************/
+  /****************************************************************************/
+  ng2-smart-table {
+    @include font(null, 15px, null);
+    color: $gray-700;
+    .form-control {
+      @include wh-value(null, auto);
+    }
+    &.dataTables_empty td {
+      text-align: center;
+    }
+    ng2-smart-table-title {
+      * {
+        @include font(null, 12px, null);
+      }
+      a {
+        color: $gray-700 !important;
+        @include flexbox(block, null, null, null, null, null);
+        text-decoration: none;
+        &::after {
+          content: "\f0dc" !important;
+          @include font-family("Font Awesome 5 Free");
+          float: right;
+          color: $gray-500;
+          @include wh-value(0, 0);
+        }
+        &.asc::after {
+          content: "\f0de" !important;
+          @include font-family("Font Awesome 5 Free");
+          float: right;
+          color: $gray-500;
+        }
+        &.desc::after {
+          content: "\f0dd" !important;
+          @include font-family("Font Awesome 5 Free");
+          float: right;
+          color: $gray-500;
+        }
+        &:hover {
+          text-decoration: none !important;
+        }
+        &.sort.desc::after {
+          transform: none !important;
+          margin-bottom: 0;
+        }
+        &.sort.asc::after,
+        &.sort.desc::after {
+          content: "";
+          @include flexbox(inline-block, null, null, null, null, null);
+          @include wh-value(0, 0);
+          @include border(all, 0, solid, transparent !important);
+          margin-bottom: 0 !important;
+        }
+      }
+      span {
+        color: $gray-700;
+      }
+    }
+    ng2-smart-table-cell {
+      word-break: break-word;
+      table-cell-view-mode {
+        @include font(null, 12px, null);
+        .icon-label {
+          @include font(null, 20px, null);
+          @include flexbox(inline-block, null, null, null, null, null);
+          @include wh-value(100px, 0);
+          text-align: center;
+          cursor: default;
+        }
+      }
+    }
+    .ng2-smart-filter {
+      @include wh-value(null, calc(2rem + 2px) !important);
+      @include font(null, 12px, null);
+      margin-top: 6px;
+    }
+    table.list-data {
+      tr td,
+      tr th {
+        @include padding-value(2, 10, 2, 10);
+        vertical-align: middle !important;
+      }
+      tbody {
+        tr.selected {
+          background: none !important;
+        }
+      }
+    }
+    default-table-filter {
+      select-filter {
+        select.form-control {
+          @include flexbox(inline-block, null, null, null, null, null);
+          @include wh-value(null, calc(1.5rem + 2px) !important);
+          vertical-align: middle;
+          background: $white
+            url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
+            no-repeat right 0.75rem center;
+          background-size: 8px 10px;
+          @include border(all, 1, solid, $gray-200);
+          @include roundedCorners(2);
+          -webkit-appearance: none;
+          -moz-appearance: none;
+          appearance: none;
+          &::-ms-expand {
+            visibility: hidden;
+          }
+        }
+      }
+      select-filter {
+        select {
+          @include roundedCorners(4);
+        }
+      }
+      input-filter {
+        input[type="text"] {
+          @include position_value(relative, null, null, null, null);
+        }
+        &:after {
+          @include position_value(relative, -26px, null, null, 100%);
+          content: "\f002";
+          @include font("Font Awesome 5 Free", 10px, null);
+          @include padding-value(0, 0, 0, 2);
+          color: $gray-500;
+        }
+      }
+    }
+    ng2-smart-table-pager {
+      @include flexbox(null, null, row-reverse, null, null, null);
+      @include padding-value(5, 20, 5, 20);
+      .ng2-smart-pagination {
+        .ng2-smart-page-item {
+          @include font(null, 10px, null);
+          a {
+            &:hover {
+              text-decoration: none;
+            }
+          }
+          .ng2-smart-page-link {
+            @include font(null, 12px !important, null);
+            &.page-link {
+              text-align: center;
+              vertical-align: middle;
+              color: $primary;
+              @include border(all, 1, solid, $primary !important);
+              &:hover {
+                @include background(null, $primary !important, null, null, null);
+                color: $white;
+              }
+            }
+          }
+          span.ng2-smart-page-link.page-link {
+            color: $white;
+            @include background(null, $primary !important, null, null, null);
+            @include border(all, 1, solid, $primary !important);
+          }
+        }
+      }
+    }
+  }
+  /****************************************************************************/
+  /*********************** Button styles under list class *********************/
+  /****************************************************************************/
+  .list {
+    &.action {
+      button.btn.btn-primary {
+        @include padding-value(2, 8, 2, 8);
+      }
+    }
+    button:focus {
+      outline: 0;
+      @include box-shadow(0, 0, 0, 0, transparent);
+    }
+    button.btn.btn-primary {
+      color: $primary;
+      @include background(null, $white, null, null, null);
+      &:not(.active:hover) {
+        @include background(null, $white, null, null, null);
+      }
+      &:active {
+        color: $primary;
+        @include background(null, $white, null, null, null);
+      }
+      &.action-button {
+        color: $white;
+        @include background(null, $primary !important, null, null, null);
+        &:hover {
+          @include background(null, $primary, null, null, null);
+        }
+      }
+    }
+    .dropdown-menu {
+      @include border(all, 1, solid, $primary);
+      @include padding-value(0, 0, 0, 0);
+      button.btn.btn-primary {
+        @include background(null, transparent, null, null, null);
+        @include padding-value(8, 8, 8, 8);
+        @include roundedCorners(0);
+        &:hover {
+          @include background(null, $primary, null, null, null);
+          color: $white;
+        }
+        &:not(:last-child) {
+          @include border(bottom, 1, solid, $primary);
+        }
+      }
+    }
+  }
+  /****************************************************************************/
+  /*********************** Custom tabel design in topology ********************/
+  /****************************************************************************/
+  .custom-table {
+    td:first-child {
+      @include font(null, null, bold);
+      text-align: right;
+    }
+    th,
+    td {
+      @include padding-value(5, 7, 5, 7);
+      @include font(null, 10px, null);
+      @include line-height(15px);
+    }
+  }
+  /****************************************************************************/
+  /************************** Ng select custom design *************************/
+  /****************************************************************************/
+  .ng-select {
+    &.is-invalid .ng-select-container {
+      @include border(all, 1, solid, $red);
+    }
+    .ng-select-container {
+      @include border(all, 1, solid, $gray-200);
+      .ng-value-container .ng-placeholder {
+        color: $gray-80;
+      }
+    }
+  }
+  /****************************************************************************/
+  /******************** Custom nav section for default status *****************/
+  /****************************************************************************/
+  .list-utilites-actions {
+    @include flexbox(flex, null, row, null, center, null);
+    nav.custom-items-config {
+      @include position_value(relative, null, null, null, null);
+      @include roundedCorners(3);
+      span {
+        @include font(null, 13px, 600);
+        @include flexbox(inline-block, null, null, null, null, null);
+        @include position_value(relative, null, null, null, null);
+        text-decoration: none;
+        text-align: center;
+        @include margin-value(0, 0, 0, 10);
+        &:first-child {
+          @include margin-value(0, 0, 0, 0);
+        }
+        i {
+          @include font(null, 14px, null);
+          @include margin-value(0, 5, 0, 0);
+        }
+      }
+    }
+  }
+  /****************************************************************************/
+  /************************* File upload custom design ************************/
+  /****************************************************************************/
+  .custom-file-label {
+    color: $primary;
+    @include roundedCorners(4);
+    @include border(all, 1, solid, $primary);
+    overflow: hidden;
+    @include margin-value(0, 0, 0, 0);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-right: 80px;
+    &::after {
+      color: $white;
+      @include background(null, $primary, null, null, null);
+    }
+  }
+  /****************************************************************************/
+  /************************* Notifier Container Design ************************/
+  /****************************************************************************/
+  .notifier__container {
+    ul {
+      @include margin-value(0, 0, 0, 0);
+    }
+  }
+  /***************************************************************************/
+  /************************* Topology Common Design **************************/
+  /****************************************************************************/
+  .ns-composer-form,
+  .vnf-composer-form,
+  .ns-instance-form {
+    @include font(null, 12px, null);
+    .ns-svg,
+    .vnf-svg {
+      @include wh-value(30px, 25px);
+    }
+    .svg-container {
+      min-height: 60vh;
+    }
+    .form-control {
+      @include font(null, 10px, null);
+    }
+    .scroll-box {
+      max-height: 285px;
+      overflow-y: scroll;
+    }
+    .border-all {
+      @include border(all, 1, solid, $primary);
+    }
+    .list-group {
+      &.inside-svg {
+        .list-group-item {
+          @include padding-value(3.2, 8, 3.2, 8);
+        }
+      }
+      &.dragable {
+        .list-group-item {
+          cursor: move;
+          @include padding-value(4.8, 4.8, 4.8, 4.8);
+          @include margin-value(0, 0, 5, 0);
+          @include background(null, $gray-200, null, null, null);
+          @include flexbox(flex, null, null, null, center, null);
+          border: none;
+          .span-overflow-text {
+            @include wh-value(90%, null);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            @include line-height(25px);
+          }
+        }
+      }
+    }
+    .drag-icon {
+      color: $gray-600;
+      @include font(null, 15px, null);
+    }
+    .ctrl {
+      cursor: move;
+    }
+    svg {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -o-user-select: none;
+      user-select: none;
+      image.node:hover,
+      circle.node:hover {
+        opacity: 0.7 !important;
+      }
+      image.active,
+      circle.active {
+        opacity: 0.7 !important;
+      }
+      path.link {
+        stroke: $dark-gray;
+        stroke-width: 2px;
+        fill: none;
+        &:hover {
+          stroke-width: 4px;
+        }
+        .dragline {
+          pointer-events: none;
+        }
+      }
+      .node_text {
+        text-anchor: middle;
+        pointer-events: none;
+      }
+      :not(.ctrl) {
+        cursor: pointer;
+      }
+    }
+    fieldset {
+      @include border(all, 1, solid, $primary);
+      legend {
+        @include padding-value(0, 5, 0, 5);
+        @include font(null, 15px, null);
+        color: $primary;
+        &.vl-legend,
+        &.element-legend {
+          @include wh-value(55%, null);
+        }
+        &.vnfd-legend {
+          @include wh-value(25%, null);
+        }
+      }
+    }
+    .btn-icon {
+      @include wh-value(36px, 36px);
+      text-align: center;
+      @include margin-value(0, 10, 10, 0);
+    }
+    .topology-btn {
+      color: $primary;
+      border-color: $primary;
+      &:hover,
+      &.pinned {
+        color: $white !important;
+        @include background(null, $primary !important, null, null, null);
+      }
+    }
+    .badgegroup {
+      @include flexbox(flex, flex-end, row, center, center, null);
+    }
+  }
+  .ns-topology-sidebar-container,
+  .vnf-topology-sidebar-container,
+  .ns-instance-topology-sidebar-container {
+    @include position_value(absolute !important, 0px, null, null, 0px);
+    .ng-sidebar {
+      @include wh-value(27%, null);
+      @include background(null, $white, null, null, null);
+      @include border(all, 1, solid, $gray-300);
+      .sidebar-header {
+        @include background(null, $modalheader-gray, null, null, null);
+        @include padding-value(5, 10, 5, 10);
+        @include border(bottom, 1, solid, $gray-300);
+        @include flexbox(flex, space-between, null, center, center, null);
+        .topology_title {
+          color: $primary;
+        }
+      }
+      .sidebar-body {
+        @include padding-value(10, 5, 10, 5);
+      }
+    }
+    .ng-sidebar__content {
+      button {
+        @include position_value(absolute, 45%, null, null, 0px);
+        @include background(null, $primary, null, null, null);
+      }
+      .detail-sidebar {
+        @include flexbox(inline-block, null, null, null, null, null);
+        @include position_value(relative, null, null, null, null);
+        animation: push 0.5s infinite linear;
+      }
+    }
+    @keyframes push {
+      0% {
+        right: 0;
+      }
+      50% {
+        right: -0.2em;
+      }
+      70% {
+        right: -0.3em;
+      }
+      100% {
+        right: 0;
+      }
+    }
+  }
+}
+/****************************************************************************/
+/************************** MEDIA QUERIES ***********************************/
+/****************************************************************************/
+@media (max-width: map-get($grid-breakpoints, md)) {
+  .smarttable-style {
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_animation.scss b/src/assets/scss/mixins/_animation.scss
new file mode 100644
index 0000000..ff1d0d5
--- /dev/null
+++ b/src/assets/scss/mixins/_animation.scss
@@ -0,0 +1,50 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for animation property
+ * example for animation: @include animation(rotate 1s linear);
+ * example for keyframes: @include keyframes(rotate) {
+        0% { @include rotate(0); }
+        100% { @include rotate(359); }
+    }
+ */
+
+// @mixin for animation properties
+@mixin animation ($animation) {
+    -webkit-animation: #{$animation};
+    -moz-animation: #{$animation};
+    -ms-animation: #{$animation};
+    -o-animation: #{$animation};
+    animation: #{$animation};
+}
+
+// @mixin for keyframes properties
+@mixin keyframes ($animation) {
+    @-webkit-keyframes #{$animation} {
+        @content;
+    }
+    @-moz-keyframes #{$animation} {
+        @content;
+    }
+    @-o-keyframes #{$animation} {
+        @content;
+    }
+    @keyframes #{$animation} {
+        @content;
+    }
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_background.scss b/src/assets/scss/mixins/_background.scss
new file mode 100644
index 0000000..4eefcef
--- /dev/null
+++ b/src/assets/scss/mixins/_background.scss
@@ -0,0 +1,30 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for background property
+ * example: @include background(url, orange, 20px, repeat, center);
+ */
+
+// @mixin for background properties
+@mixin background($url, $color, $size, $repeat, $position) {
+    background-image: $url;
+    background-color: $color;
+    background-size : $size;
+    background-repeat: $repeat;
+    background-position: $position;
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_border.scss b/src/assets/scss/mixins/_border.scss
new file mode 100644
index 0000000..7ec370e
--- /dev/null
+++ b/src/assets/scss/mixins/_border.scss
@@ -0,0 +1,43 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for border
+ * example: @include border(top, 1, solid, #000);
+ */
+
+// @mixin for border size and color
+@mixin border($side, $size, $type, $color){
+   @if ($side == top) {
+       border-top: $size+px $type $color;
+   } @else if ($side == right) {
+       border-right: $size+px $type $color;
+   } @else if ($side == left) {
+       border-left: $size+px $type $color;
+   } @else if ($side == bottom ) {
+       border-bottom: $size+px $type $color;
+   } @else if($side == all ){
+        border: $size+px $type $color;
+   }@else {
+       @if ($size == thin){
+        border: $size $type $color;
+       }
+       @else {
+       border: $size+px $type $color;
+       }
+   }
+}
diff --git a/src/assets/scss/mixins/_box-shadow.scss b/src/assets/scss/mixins/_box-shadow.scss
new file mode 100644
index 0000000..d520e84
--- /dev/null
+++ b/src/assets/scss/mixins/_box-shadow.scss
@@ -0,0 +1,34 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for box-shadow
+ * example: @include box-shadow(1px, 2px, 2px, 2px, #000);
+ */
+
+// @mixin for box shadow
+@mixin box-shadow($hoff: false, $voff: false, $blur: false, $spread: false, $color: false, $inset: false) {
+  @if $inset {
+    -webkit-box-shadow:inset $hoff $voff $blur $spread $color;
+    -moz-box-shadow:inset $hoff $voff $blur $spread $color;
+    box-shadow:inset $hoff $voff $blur $spread $color;
+  } @else {
+    -webkit-box-shadow: $hoff $voff $blur $spread $color;
+    -moz-box-shadow: $hoff $voff $blur $spread $color;
+    box-shadow: $hoff $voff $blur $spread $color;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_custom.scss b/src/assets/scss/mixins/_custom.scss
new file mode 100644
index 0000000..c7424de
--- /dev/null
+++ b/src/assets/scss/mixins/_custom.scss
@@ -0,0 +1,108 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains custom @mixin functions
+ */
+
+// @mixin for container width and height
+@mixin wh-value($width, $height) {
+    width: $width;
+    height: $height;
+}
+
+// @mixin for padding values
+@mixin padding-value($top, $right, $bottom, $left) {
+    padding: $top+px $right+px $bottom+px $left+px;
+}
+
+// @mixin for any padding values
+@mixin padding-percentage-value($top: null, $right: null, $bottom: null, $left: null) {
+    padding: $top $right $bottom $left;
+}
+
+// @mixin for margin values
+@mixin margin-value($top, $right, $bottom, $left) {
+    margin: $top+px $right+px $bottom+px $left+px;
+}
+
+// @mixin for margin values in percentage
+@mixin margin-value-percentage($top: null, $right: null, $bottom: null, $left: null) {
+    margin: $top $right $bottom $left;
+}
+
+// @mixin for center-align element/container
+@mixin align-center($topbottom, $width) {
+    margin: $topbottom auto;
+    width: $width;
+}
+
+// @mixin for center-align with top and bottom margin element/container
+@mixin tband-align-center($topbottom, $width, $bottommargin) {
+    margin: $topbottom auto $bottommargin;
+    width: $width;
+}
+
+// @mixin for transform style
+@mixin transform($x, $y, $z)
+{
+    transform: translate3d($x+px, $y+px, $z+px);
+    -webkit-transform: translate3d($x+px, $y+px, $z+px);
+}
+
+// @mixin for font-family setting
+@mixin font-family($font){
+    font-family: $font;
+}
+
+// @mixin for font-style setting
+@mixin font-style($font-style){
+    font-style: $font-style;
+}
+
+// Mixin for font & its attributes
+@mixin font($family, $size, $weight) {
+    font-family: $family;
+    font-size: $size;
+    font-weight: $weight;
+}
+
+// @mixin for line-height setting
+@mixin line-height($line-height){
+    line-height: $line-height;
+}
+
+// @mixin for letter-spacing setting
+@mixin letter-spacing($letter-spacing){
+    letter-spacing: $letter-spacing;
+}
+
+// @mixin to manipulate placeholder attribute in input element
+@mixin placeholder {
+  ::-webkit-input-placeholder {@content}
+  :-moz-placeholder           {@content}
+  ::-moz-placeholder          {@content}
+  :-ms-input-placeholder      {@content}
+}
+
+// mixins for user-select
+@mixin user-select($select) {
+    @each $pre in -webkit-, -moz-, -ms-, -o- {
+      #{$pre + user-select}: #{$select};
+    } 
+    #{user-select}: #{$select};
+  }
diff --git a/src/assets/scss/mixins/_flex.scss b/src/assets/scss/mixins/_flex.scss
new file mode 100644
index 0000000..faf870e
--- /dev/null
+++ b/src/assets/scss/mixins/_flex.scss
@@ -0,0 +1,47 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin function for flex properties
+ * example: @include flexbox(flex, flex-start, row-reverse, center, center, flex-end);
+ * 1. display: flex | inline-flex
+ * 2. justify-content : flex-start | flex-end | center | space-between | space-around
+ * 3. flex-direction: row | row-reverse | column | column-reverse
+ * 4. align-content: flex-start | flex-end | center | space-between | space-around | stretch
+ * 5. align-items: flex-start | flex-end | center | baseline | stretch
+ * 6. align-self: auto | flex-start | flex-end | center | baseline | stretch
+ */
+
+@mixin flexbox($display: null, $justify: null, $direction: null, $aligncontent: null, $alignitems: null, $alignself: null) {
+display: $display;
+justify-content: $justify;
+flex-direction: $direction;
+align-content: $aligncontent;
+align-items: $alignitems;
+align-self: $alignself;
+}
+
+/** To set flexible length for items
+ * flex-grow: how much an item will grow relative to the rest of the flexible items
+   flex-shrink: how much an item will shrink relative to the rest of the flexible items
+   flex-basis: The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em"
+ */
+@mixin flex($flex-grow: null, $flex-shrink: null, $flex-basis: null){
+    flex-grow: $flex-grow;
+    flex-shrink: $flex-shrink;
+    flex-basis: $flex-basis;
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_font-weight.scss b/src/assets/scss/mixins/_font-weight.scss
new file mode 100644
index 0000000..2210f08
--- /dev/null
+++ b/src/assets/scss/mixins/_font-weight.scss
@@ -0,0 +1,43 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for font-weight
+ * example: @include fontWeight(600); (OR) @include fontWeight(semi-bold);
+ */
+
+// @mixin for font weight
+@mixin fontWeight($weight){
+    $weights: (
+        thin: 100,
+        extra-light: 200,
+        light: 300,
+        regular: 400,
+        medium: 500,
+        semi-bold: 600,
+        bold: 700,
+        extra-bold: 800,
+        ultra-bold: 900
+    );
+
+    $output: $weight;
+    @if map-has-key($weights, $weight) {
+        $output: map-get($weights, $weight);
+    }
+
+    font-weight: $output;
+ }
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_position.scss b/src/assets/scss/mixins/_position.scss
new file mode 100644
index 0000000..420f93d
--- /dev/null
+++ b/src/assets/scss/mixins/_position.scss
@@ -0,0 +1,33 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for offset position
+ * @param {String} $position - Either `relative`, `absolute` or `fixed`
+ * @param {Length} $top [null] - Top offset
+ * @param {Length} $right [null] - Right offset
+ * @param {Length} $bottom [null] - Bottom offset
+ * @param {Length} $left [null] - Left offset
+ */
+
+@mixin position_value($position, $top: null, $right: null, $bottom: null, $left: null) {
+  position: $position;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_rem.scss b/src/assets/scss/mixins/_rem.scss
new file mode 100644
index 0000000..960132a
--- /dev/null
+++ b/src/assets/scss/mixins/_rem.scss
@@ -0,0 +1,42 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for font
+ * example: @include rem("font-size", 14);
+ */
+
+@mixin rem($property, $values...) {
+    $n: length($values);
+    $i: 1;
+    $pxlist: ();
+    $remlist: ();
+    @while $i <=$n {
+        $itemVal: (nth($values, $i));
+        @if $itemVal !="auto" {
+            $pxlist: append($pxlist, $itemVal + px);
+            $remlist: append($remlist, ($itemVal / 16) + rem);
+        }
+        @else {
+            $pxlist: append($pxlist, auto);
+            $remlist: append($remlist, auto);
+        }
+        $i: $i+1;
+    }
+    #{$property}: $pxlist;
+    #{$property}: $remlist;
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_rounded-corners.scss b/src/assets/scss/mixins/_rounded-corners.scss
new file mode 100644
index 0000000..dc8f77c
--- /dev/null
+++ b/src/assets/scss/mixins/_rounded-corners.scss
@@ -0,0 +1,96 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for border radius
+ * example: @include roundedCorners(10);
+ */
+
+// Rounded Corner has equal radius
+@mixin roundedCorners($size) {
+    border-radius: $size + px;
+}
+
+// Rounded Corner for percentage values
+@mixin roundedCornersPercentage($size) {
+    border-radius: $size;
+}
+
+// Rounded Corner for Top left/right
+@mixin roundedTop($size) {
+    border-radius: $size + px $size + px 0 0;
+}
+
+// Rounded Corner for Top Left alone
+@mixin roundedTopLeft($size) {
+    border-radius: $size + px 0 0 0;
+}
+
+// Rounded Corner for Top Right alone
+@mixin roundedTopRight($size) {
+    border-radius: 0 $size + px 0 0;
+}
+
+// Rounded Corner for Bottom left/right
+@mixin roundedBottom($size) {
+    border-radius: 0 0 $size + px $size + px;
+}
+
+// Rounded Corner  for Bottom Left alone
+@mixin roundedBottomLeft($size) {
+    border-radius: 0 0 0 $size + px;
+}
+
+// Rounded Corner for Bottom Right alone
+@mixin roundedBottomRight($size) {
+    border-radius: 0 0 $size + px 0;
+}
+
+// Rounded Corner for Left Top/Bottom
+@mixin roundedLeft($size) {
+    border-radius: $size + px 0 0 $size + px;
+}
+
+// Rounded Corner for Right Top/Bottom
+@mixin roundedRight($size) {
+    border-radius: 0 $size + px $size + px 0;
+}
+
+// Shorthand for all four corners rounded equally
+@mixin circularCorners($size) {
+    border-radius: $size;
+}
+
+// Border bottom left radius
+@mixin roundedBottomLeftRadius($sive) {
+    border-bottom-left-radius: $sive + px;
+}
+
+// Border bottom right radius
+@mixin roundedBottomRightRadius($sive) {
+    border-bottom-right-radius: $sive + px;
+}
+
+// Border top left radius
+@mixin roundedTopLeftRadius($sive) {
+    border-top-left-radius: $sive + px;
+}
+
+// Border top right radius
+@mixin roundedTopRightRadius($sive) {
+    border-top-right-radius: $sive + px;
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_transform.scss b/src/assets/scss/mixins/_transform.scss
new file mode 100644
index 0000000..927ddae
--- /dev/null
+++ b/src/assets/scss/mixins/_transform.scss
@@ -0,0 +1,31 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for transform
+ */
+
+// @mixin for 3d transform
+@mixin transform_style($txsize, $tysize, $tzsize) {
+   transform: translate3d($txsize, $tysize, $tzsize);
+}
+
+// @mixin for rotate transform
+@mixin rotate($deg){
+    transform: rotate($deg+deg);
+    -webkit-transform: rotate($deg+deg);
+}
diff --git a/src/assets/scss/mixins/_transition.scss b/src/assets/scss/mixins/_transition.scss
new file mode 100644
index 0000000..743c8fb
--- /dev/null
+++ b/src/assets/scss/mixins/_transition.scss
@@ -0,0 +1,29 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for transition property
+ * example: @include transition(background, 1s, ease-in-out, 0);
+ */
+
+// @mixin for transition properties
+@mixin transition($property: null, $duration: null, $timing-function: null, $delay: null) {
+    transition-property: $property;
+    transition-duration: $duration;
+    transition-timing-function: $timing-function;
+    transition-delay: $delay;
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/mixin.scss b/src/assets/scss/mixins/mixin.scss
new file mode 100644
index 0000000..e5488e1
--- /dev/null
+++ b/src/assets/scss/mixins/mixin.scss
@@ -0,0 +1,30 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/** All mixins are imported here */
+@import '_animation';
+@import '_background';
+@import '_border';
+@import '_box-shadow';
+@import '_custom';
+@import '_flex';
+@import '_font-weight';
+@import '_position';
+@import '_rem';
+@import '_rounded-corners';
+@import '_transform';
+@import '_transition';
\ No newline at end of file
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
new file mode 100644
index 0000000..d39843b
--- /dev/null
+++ b/src/assets/scss/style.scss
@@ -0,0 +1,46 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/*Roboto Fonts*/
+$roboto-font-path: "~roboto-fontface/fonts" !default;
+@import "~roboto-fontface/css/roboto/sass/roboto-fontface-regular";
+/*Custom mixin*/
+@import "mixins/mixin.scss";
+/*Theme setup color*/
+@import "variable";
+/*bootstrap styles*/
+@import "~bootstrap/scss/bootstrap";
+/*Custom theme styles*/
+@import "app.scss";
+/*Code Mirror styles*/
+@import "~codemirror/lib/codemirror";
+@import "~codemirror/addon/fold/foldgutter";
+@import "~codemirror/theme/neat";
+@import "~codemirror/theme/material";
+@import "~codemirror/addon/dialog/dialog";
+@import "~codemirror/addon/display/fullscreen";
+/*ng-select styles*/
+@import "~@ng-select/ng-select/themes/default.theme.css";
+/*Angular notifier styles*/
+@import "~angular-notifier/styles/core.scss";
+@import "~angular-notifier/styles/themes/theme-material.scss";
+@import "~angular-notifier/styles/themes/theme-material.scss";
+@import "~angular-notifier/styles/types/type-success.scss";
+@import "~angular-notifier/styles/types/type-error.scss";
+@import "~angular-notifier/styles/types/type-warning.scss";
+@import "~angular-notifier/styles/types/type-default.scss";
+@import "~angular-notifier/styles/types/type-info.scss";
\ No newline at end of file
diff --git a/src/assets/scss/variable.scss b/src/assets/scss/variable.scss
new file mode 100644
index 0000000..6a274ce
--- /dev/null
+++ b/src/assets/scss/variable.scss
@@ -0,0 +1,265 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+// Custom Variables
+$themecolor: #2962ff;
+$theme-light: #fff;
+
+/*Topbar Colors*/
+
+$topbar: $theme-light;
+$topbar-height: 64px;
+$topbar-navlink-padding: 0px 15px;
+$topbar-navlink-font-size: 0.875rem;
+$topbar-navlink-height: 64px;
+$topbar-navbrand-padding: 0 10px 0 10px;
+/*Sidebar Colors*/
+
+$sidebar: $theme-light;
+$sidebar-text: #fff;
+$sidebar-icons: #fff;
+$sidebar-width-full: 100px;
+$sidebar-width-mini: 65px;
+/*Boxed layout width*/
+
+$boxed-width: 1200px;
+/*Shadow*/
+
+$shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
+/*transitions*/
+
+$transitions: 0.2s ease-in;
+/*Dark transparent bg*/
+
+$transparent-dark-bg: rgba(0, 0, 0, 0.05);
+$lft: left;
+$rgt: right;
+$card-alt: #e4e9ef;
+%square {
+  border-radius: 0px;
+}
+
+%rotate45 {
+  transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+}
+
+/*******************************/
+
+// Bootstrap overrides
+/*******************************/
+
+/**
+ * Table Of Content
+ *
+ *  1. Color system
+ *  2. Options
+ *  3. Body
+ *  4. Typography
+ *  5. Breadcrumbs
+ *  6. Cards
+ *  7. Dropdowns
+ *  8. Buttons
+ *  9. Typography
+ *  10. Progress bars
+ *  11. Tables
+ *  12. Forms
+ *  14. Component
+ */
+
+//
+// Color system
+//
+$primary: #054c8c;
+$secondary: #065fac;
+$theme-bg-color: #eef5f9;
+$breadcrumb-after-color: #002a6a;
+
+$white: #fff !default;
+$gray-100: #f6fafe !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #afb5c1 !default;
+$gray-600: #6c757d !default;
+$gray-700: #4f5467 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$gray-80: #cccccc !default;
+$gray-97: #f7f7f7 !default;
+$medium-pink: #fb6ca4 !default;
+$black-coral: #5a5c69 !default;
+$cerise-pink: #e4397c !default;
+$pure-red: #ff0000 !default;
+$denim: #1467b3 !default;
+$black: #000 !default;
+$blue: #137eff !default;
+$dark-gray: #aaaaaa;
+$indigo: #6610f2 !default;
+$purple: #8b5edd !default;
+$pink: #e83e8c !default;
+$red: #dd4b39 !default;
+$orange: #fb8c00 !default;
+$yellow: #f39c12 !default;
+$green: #00a65a !default;
+$teal: #20c997 !default;
+$cyan: #4fc3f7 !default;
+$grayish-red: #c1bfbf !default;
+$white-smoke: #f1f1f1 !default;
+$text-muted: $gray-500 !default;
+$colors: (
+  blue: $blue,
+  indigo: $indigo,
+  purple: $purple,
+  pink: $pink,
+  red: $red,
+  orange: $orange,
+  yellow: $yellow,
+  green: $green,
+  teal: $teal,
+  cyan: $cyan,
+  white: $white,
+  gray: $gray-600,
+  gray-dark: $gray-800
+);
+$primary: $blue !default;
+$secondary: $gray-400 !default;
+$success: $green !default;
+$info: $blue !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-800 !default;
+$cyan: $cyan !default;
+$orange: $orange !default;
+$theme-colors: () !default;
+$theme-colors: map-merge(
+  (
+    "primary": $primary,
+    "secondary": $secondary,
+    "success": $success,
+    "info": $info,
+    "warning": $warning,
+    "danger": $danger,
+    "light": $light,
+    "dark": $dark,
+    "cyan": $cyan,
+    "orange": $orange,
+    "purple": $purple
+  ),
+  $theme-colors
+);
+$modalheader-gray: #f8f9fa;
+//
+// Quickly modify global styling by enabling or disabling optional features.
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-hover-media-query: false !default;
+$enable-grid-classes: true !default;
+$enable-print-styles: true !default;
+// Body
+//
+// Settings for the  element.
+$main-body-bg: #fff !default;
+$body-bg: #f2f4f5;
+$body-color: #6a7a8c !default;
+$grid-gutter-width: 20px !default;
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+$font-size-base: 0.875rem;
+$font-family-open-sans: "Open Sans";
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-bold: 700 !default;
+$h1-font-size: 36px !default;
+$h2-font-size: 30px !default;
+$h3-font-size: 24px !default;
+$h4-font-size: 18px !default;
+$h5-font-size: 16px !default;
+$h6-font-size: 14px !default;
+$headings-margin-bottom: (1rem / 2) !default;
+$headings-font-weight: 400 !default;
+$headings-color: inherit !default;
+// Breadcrumbs
+$breadcrumb-bg: $body-bg;
+$breadcrumb-margin-bottom: 1.5rem;
+// Cards
+$card-border-width: 0px !default;
+$card-border-color: transparent !default;
+$card-border-radius: 0px !default;
+// Dropdowns
+$dropdown-item-padding-x: 1rem !default;
+$dropdown-item-padding-y: 0.65rem !default;
+$dropdown-border-color: $gray-200;
+$dropdown-divider-bg: $gray-100;
+// Buttons
+$btn-secondary-border: $gray-300;
+// Progress bars
+$progress-bg: $gray-100;
+// Tables
+$table-bg-accent: $gray-100;
+$table-bg-hover: $gray-100;
+$table-hover-bg: $gray-100 !default;
+$table-cell-padding: 1rem !default;
+$table-bg-level: -10 !default;
+$table-bg-level2: 1 !default;
+$table-bg-level3: -5 !default;
+// Components
+$component-active-color: $white !default;
+$component-active-bg: $themecolor !default;
+$badge-pill-padding-x: 0.2em !default;
+$badge-pill-padding-y: 1em !default;
+// Forms
+$input-group-addon-bg: $gray-100;
+$input-border-color: $gray-200;
+$input-group-addon-border-color: $gray-200;
+$input-btn-focus-color: rgba(0, 0, 0, 0.25) !default;
+$input-focus-border-color: rgba(0, 0, 0, 0.25) !default;
+$custom-control-indicator-active-bg: rgba(0, 0, 0, 35%) !default;
+$input-btn-focus-box-shadow: transparent !default;
+$custom-select-focus-box-shadow: transparent !default;
+$custom-select-border-width: 1px !default;
+//
+// Define common padding and border radius sizes and more.
+$border-width: 1px !default;
+$border-color: rgba(0, 0, 0, 0.1) !default;
+$border-radius: 2px !default;
+$border-radius-lg: 2px !default;
+$border-radius-sm: 1px !default;
+// Progress bars
+$progress-height: 5px !default;
+//Tabs
+$nav-tabs-link-active-bg: $white !default;
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1600px
+) !default;
\ No newline at end of file