diff --git a/docs/images/user-guide/add-operational-policies.png b/docs/images/user-guide/add-operational-policies.png
new file mode 100644
index 0000000..3d5224a
--- /dev/null
+++ b/docs/images/user-guide/add-operational-policies.png
Binary files differ
diff --git a/docs/images/user-guide/blueprint_node_type.png b/docs/images/user-guide/blueprint_node_type.png
old mode 100644
new mode 100755
Binary files differ
diff --git a/docs/images/user-guide/config-policy-tca.png b/docs/images/user-guide/config-policy-tca.png
new file mode 100755
index 0000000..ce5f79b
--- /dev/null
+++ b/docs/images/user-guide/config-policy-tca.png
Binary files differ
diff --git a/docs/images/user-guide/config-policy-tca1.png b/docs/images/user-guide/config-policy-tca1.png
deleted file mode 100644
index 47c096d..0000000
--- a/docs/images/user-guide/config-policy-tca1.png
+++ /dev/null
Binary files differ
diff --git a/docs/images/user-guide/config-policy-tca2.png b/docs/images/user-guide/config-policy-tca2.png
deleted file mode 100644
index cf1157b..0000000
--- a/docs/images/user-guide/config-policy-tca2.png
+++ /dev/null
Binary files differ
diff --git a/docs/images/user-guide/create-loop.png b/docs/images/user-guide/create-loop.png
new file mode 100644
index 0000000..20b9f05
--- /dev/null
+++ b/docs/images/user-guide/create-loop.png
Binary files differ
diff --git a/docs/images/user-guide/deploy-params.png b/docs/images/user-guide/deploy-params.png
old mode 100644
new mode 100755
index aeafb8e..9d00325
--- a/docs/images/user-guide/deploy-params.png
+++ b/docs/images/user-guide/deploy-params.png
Binary files differ
diff --git a/docs/images/user-guide/deploy.png b/docs/images/user-guide/deploy.png
deleted file mode 100644
index 2ec86cc..0000000
--- a/docs/images/user-guide/deploy.png
+++ /dev/null
Binary files differ
diff --git a/docs/images/user-guide/distributed.png b/docs/images/user-guide/distributed.png
deleted file mode 100644
index 540168a..0000000
--- a/docs/images/user-guide/distributed.png
+++ /dev/null
Binary files differ
diff --git a/docs/images/user-guide/loop-menu.png b/docs/images/user-guide/loop-menu.png
new file mode 100644
index 0000000..658359e
--- /dev/null
+++ b/docs/images/user-guide/loop-menu.png
Binary files differ
diff --git a/docs/images/user-guide/loop-operation-menu.png b/docs/images/user-guide/loop-operation-menu.png
new file mode 100644
index 0000000..2a2dbf8
--- /dev/null
+++ b/docs/images/user-guide/loop-operation-menu.png
Binary files differ
diff --git a/docs/images/user-guide/loop-properties.png b/docs/images/user-guide/loop-properties.png
new file mode 100644
index 0000000..5c26615
--- /dev/null
+++ b/docs/images/user-guide/loop-properties.png
Binary files differ
diff --git a/docs/images/user-guide/op-policy-box-policy.png b/docs/images/user-guide/op-policy-box-policy.png
new file mode 100755
index 0000000..89c6265
--- /dev/null
+++ b/docs/images/user-guide/op-policy-box-policy.png
Binary files differ
diff --git a/docs/images/user-guide/op-policy-box-policy1.png b/docs/images/user-guide/op-policy-box-policy1.png
deleted file mode 100644
index 1143fa2..0000000
--- a/docs/images/user-guide/op-policy-box-policy1.png
+++ /dev/null
Binary files differ
diff --git a/docs/images/user-guide/open-box.png b/docs/images/user-guide/open-box.png
deleted file mode 100644
index 9d7c6ff..0000000
--- a/docs/images/user-guide/open-box.png
+++ /dev/null
Binary files differ
diff --git a/docs/images/user-guide/open-loop.png b/docs/images/user-guide/open-loop.png
new file mode 100644
index 0000000..a763ad1
--- /dev/null
+++ b/docs/images/user-guide/open-loop.png
Binary files differ
diff --git a/docs/images/user-guide/open-menu-prop.png b/docs/images/user-guide/open-menu-prop.png
old mode 100644
new mode 100755
index 57c0f2d..c07b225
--- a/docs/images/user-guide/open-menu-prop.png
+++ b/docs/images/user-guide/open-menu-prop.png
Binary files differ
diff --git a/docs/images/user-guide/open-menu.png b/docs/images/user-guide/open-menu.png
deleted file mode 100644
index 2ea4f5e..0000000
--- a/docs/images/user-guide/open-menu.png
+++ /dev/null
Binary files differ
diff --git a/docs/images/user-guide/opened-closed-loop.png b/docs/images/user-guide/opened-closed-loop.png
deleted file mode 100644
index 01a3f4e..0000000
--- a/docs/images/user-guide/opened-closed-loop.png
+++ /dev/null
Binary files differ
diff --git a/docs/images/user-guide/opened-loop.png b/docs/images/user-guide/opened-loop.png
new file mode 100644
index 0000000..c955dee
--- /dev/null
+++ b/docs/images/user-guide/opened-loop.png
Binary files differ
diff --git a/docs/images/user-guide/policy-model-menu.png b/docs/images/user-guide/policy-model-menu.png
new file mode 100644
index 0000000..838fcf8
--- /dev/null
+++ b/docs/images/user-guide/policy-model-menu.png
Binary files differ
diff --git a/docs/images/user-guide/policy-submitted.png b/docs/images/user-guide/policy-submitted.png
new file mode 100755
index 0000000..04a9df3
--- /dev/null
+++ b/docs/images/user-guide/policy-submitted.png
Binary files differ
diff --git a/docs/images/user-guide/prop-box.png b/docs/images/user-guide/prop-box.png
deleted file mode 100644
index 52879f9..0000000
--- a/docs/images/user-guide/prop-box.png
+++ /dev/null
Binary files differ
diff --git a/docs/images/user-guide/remove-operational-policies.png b/docs/images/user-guide/remove-operational-policies.png
new file mode 100644
index 0000000..fbc680d
--- /dev/null
+++ b/docs/images/user-guide/remove-operational-policies.png
Binary files differ
diff --git a/docs/images/user-guide/save-cl.png b/docs/images/user-guide/save-cl.png
deleted file mode 100644
index 7e0439d..0000000
--- a/docs/images/user-guide/save-cl.png
+++ /dev/null
Binary files differ
diff --git a/docs/images/user-guide/submit-menu.png b/docs/images/user-guide/submit-menu.png
deleted file mode 100644
index 9d07f4e..0000000
--- a/docs/images/user-guide/submit-menu.png
+++ /dev/null
Binary files differ
diff --git a/docs/images/user-guide/template-menu.png b/docs/images/user-guide/template-menu.png
new file mode 100644
index 0000000..cc2cdf7
--- /dev/null
+++ b/docs/images/user-guide/template-menu.png
Binary files differ
diff --git a/docs/images/user-guide/undeploy.png b/docs/images/user-guide/undeploy.png
deleted file mode 100644
index c17fa89..0000000
--- a/docs/images/user-guide/undeploy.png
+++ /dev/null
Binary files differ
diff --git a/docs/user-guide.rst b/docs/user-guide.rst
index 0d7d4e6..bfac885 100644
--- a/docs/user-guide.rst
+++ b/docs/user-guide.rst
@@ -4,31 +4,63 @@
 
 Control loop in CLAMP
 ---------------------
-There is 2 control loop levels in CLAMP:
+There are 2 control loop levels in CLAMP:
 
 - Control loop template: This is created from the DCAE blueprint (designed in the DCAE designer), and distributed by SDC to CLAMP.
 - Control loop instance: Based on the template, it represents a physical control loop in the platform related to a service and a VNF.
-    This is created in CLAMP when receiving the SDC notification, as this one is related to a specific service/vnf.
 
-There is no way to design a control loop from scratch in CLAMP, you can only configure it and manage its life-cycle.
+There is no way to design the microservice components of the control loop from scratch in CLAMP, you can only configure it and manage its life-cycle.
 For more info on how to design the service in SDC, check this: https://wiki.onap.org/display/DW/CLAMP+videos#CLAMPvideos-DesignpartinSDC
 
-There is a specific menu to open distributed control loops in CLAMP UI. 
 
-|clamp-open-menu|
+There is a specific menu to view the available Control loop templates.
 
-Please note that the option "Create CL" can be used to create a control loop from the template distributed by SDC, you can therefore instantiate it for another service/vnf 
+|clamp-template-menu|
 
-Once you click on "Open CL", this dialog box is shown
 
-|clamp-open-box|
+Each microservice policies and operational policies is related to a Policy Model.
+Clamp either communicates with Policy Engine periodically to download the available Policy Models automatically or user can upload the Policy Model manually.
+Policy Models related operations could be found under Policy Models menu.
 
-Once the distributed control loop has been chosen, the control loop is shown to the user.
-From this view user can start configure empty control loop using **Closed loop modeller**.
+|clamp-policy-model-menu|
 
-|clamp-opened-closed-loop|
 
-Closed loop modeler has 3 main parts:
+Under the menu *Loop Instance*, there's a list of actions to perform regarding to the loops.
+
+|clamp-loop-menu|
+
+
+Option *Create* creates the loop from the templates distributed by SDC.
+
+|clamp-create-loop|
+
+
+Option *Open* opens the saved loops. Once the distributed control loop has been chosen, the control loop is shown to the user.
+
+|clamp-open-loop|
+
+
+Option *Close* will close the current opened loop.
+
+
+Option *Modify* opens the window to add/remove different Operational Policies to the loop.
+Tab *Add Operational Policies* lists all the available operational policies.
+Click *Add* button to add the selected operational policies to the loop.
+
+|clamp-add-operational-policies|
+
+Tab *Remove Operational Policies* lists all the operational policies added to the loop.
+Click *Remove* button to remove the selected operational policies from the loop.
+
+|clamp-remove-operational-policies|
+
+
+Once opened, the user can start configure empty control loop using **Closed loop modeller**.
+
+|clamp-opened-loop|
+
+
+Loop modeler has 3 main parts:
 
 #. Loop configuration view
     Visualizes event flow in Control Loop. This view is auto-generated by Clamp. To generate it Clamp parses DCAE_INVENTORY_BLUEPRINT from CSAR distributed by SDC.
@@ -40,133 +72,82 @@
 #. Loop logs
     Table with log data of opened loop
 
+
 Control Loop properties
 -----------------------
 In Dublin release this view shows what are deployment parameters or control Loop.
-To open it from *Closed Loop* menu select *Properties CL*
+To open it from *Loop Instance* menu select *Properties*
 
 |clamp-menu-prop|
 
 This opens a box with JSON object. It contains deployment parameters extracted from DCAE_INVENTORY_BLUEPRINT.
 It's not recommended to edit this JSON. Each of this parameters should be available in view shown to deploy analytic application.
 
-
 |clamp-prop-box|
 
-Operational and Guard policy properties
+
+Operational policy properties
 ---------------------------------------
-Operational policy is a parametrized drools (in Dublin) rule with logic performing action on resource.
-User can't chose his own rule. Clamp always tries to create operational policy that bases on rule bind with **ClosedLoopControlName** attribute available in Policy dictionary.
+Operational policies are added by the user using *Modify* window. The configuration view is generated using Policy Type assigned to selected operational policy.
 
-There is only one operational policy per control loop. More about operational policies can be found here `Control Loop Operational Policy <https://wiki.onap.org/display/DW/Control+Loop+Operational+Policy>`_.
+To configure operational policies, user has to click the corresponding operational policy boxes. Example popup dialog for operational policy looks like:
 
-Guard policy is policy securing operational policy calls. It defines a set of constraints that have to be matched before running operational policy.
-More about guard policies can be found here `Creating and Using Guard Policies <https://docs.onap.org/en/dublin/submodules/policy/engine.git/docs/platform/guardpolicy.html>`_.
+|clamp-op-policy-box-policy|
 
-To configure operational and guard policy user has to click *OperationalPolicy* box.
-
-Once clicked, it's possible to configure operational policy. Policy can have child policies, one per Recipe.
-
-|clamp-op-policy-box-policy1|
-
-1. Parent policy name
-2. Global time limit for this operational policies
-3. Specifies whether policy is abated
-4. Unique id for Control Loop.
-5. Button for creating child/parent policies
-    Child/parent policies are policies that depend on one another under certain circumstances (check point 12.)
-6. Unique id of Policy. (Clamp internal)
-7. Recipe/Operation triggered on controller/orchestrator
-    This recipe will be used by policy drools PDP when sending request to controller/orchestrator.
-    E.g. in case of *Health-Check* is selected here and *APPC* as actor PDP will trigger APPC LCM API triggering health-check operation.
-
-    List of options is predefined in Clamp code and can't be modified.
-    Possible options:
-        * Restart
-        * Rebuild
-        * Migrate
-        * Health-Check
-        * ModifyConfig
-        * VF Module Create
-        * VF Module Delete
-        * Reroute
-8. Maximum amount of retries that policy takes when triggering action
-9. Timeout for this operational policy
-10. Actor used to perform action. (Orchestrator/Controller)
-     Actor that will be used by drools PDP to perform action.
-     Possible options:
-        * APPC
-        * SO
-        * VFC
-        * SDNC
-        * SDNR
-11. Payload required by actor to perform an action
-12. Set of fields describing child/parend policies dependency.
-     E.g. when health-check receives timeout failure restart could be called.
-13. Set of fields specifying resource. On this resource Operational Policy should perform an action
-14. Checkbox enabling/disabling guard policy for this operational policy
-15. Guard Policy type (frequency limited or min max)
-16. Set of guard policy specific fields. Please check `Creating and Using Guard Policies <https://docs.onap.org/en/dublin/submodules/policy/engine.git/docs/platform/guardpolicy.html>`_.
 
 
 Micro-service policy properties
 -------------------------------
-Boxes between `VES` and `OperationalPolicy` are generated from blueprint. They can be one of ONAP predefined analytic microservices or custom analytics.
+Boxes between `VES` and `Operational Policies` are generated from blueprint. They can be one of ONAP predefined analytic microservices or custom analytics.
 Each of the boxes is clickable. Microservice configuration view is generated using Policy Type assigned to selected microservice.
 Clamp by default assumes that microservices have policy type **onap.policies.monitoring.cdap.tca.hi.lo.app**.
 
 After clicking microservice box Clamp opens popup dialog. Example popup dialog for microservice with default type looks like:
 
-|clamp-config-policy-tca1|
-
-|clamp-config-policy-tca2|
+|clamp-config-policy-tca|
 
 
-Saving Control loop
--------------------
-Policies are saved localy in Clamp after each configuration change
+
+In the *Loop Operations* menu, lists the operations to be perform to the loop.
+
+|clamp-loop-operation-menu|
 
 
 Submitting the Control loop to policy
 -------------------------------------
-In the "Manage Menu", the submit action can be used to send the configuration to policy engine.
+The SUBMIT operation can be used to send the configuration to policy engine.
+If everything is successful, the status to the policy will become *SENT*. Clamp should also show proper logs in logs view.
 
-
-|clamp-submit-cl|
-
-If everything is successful, this changes the status to "Submitted". Clamp should also show proper logs in logs view.
-
-|clamp-distributed|
+|clamp-policy-submitted|
 
 After Policies are submitted they should be visible in Policy PAP component.
 Please check  `Policy GUI <https://docs.onap.org/en/dublin/submodules/policy/engine.git/docs/platform/policygui.html>`_
 
-Deploy/undeploy the Control Loop to DCAE 
------------------------------------------
-Once sent to policy engine, Clamp can ask to DCAE to deploy the micro service
 
-|clamp-deploy|
+Deploy/undeploy the Control Loop to DCAE
+-----------------------------------------
+Once sent to policy engine, Clamp can ask to DCAE to DEPLOY the micro service
 
 This opens a window where the parameters of the DCAE micro service can be configured/tuned.
 The policy_id is automatically generated by Clamp in the previous steps.
 
 |clamp-deploy-params|
 
-Once deployed on DCAE the status Control loop status goes to ACTIVE, it can then be Undeployed/Stopped or even Updated (this is to push new policies on policy engine)
+Once deployed on DCAE the status of DCAE goes to *MICROSERVICE_INSTALLED_SUCCESSFULLY*, it can then be Undeployed/Stopped/Restart.
 
-|clamp-undeploy|
-
-.. |clamp-open-menu| image:: images/user-guide/open-menu.png
-.. |clamp-open-box| image:: images/user-guide/open-box.png
-.. |clamp-opened-closed-loop| image:: images/user-guide/opened-closed-loop.png
+.. |clamp-template-menu| image:: images/user-guide/template-menu.png
+.. |clamp-policy-model-menu| image:: images/user-guide/policy-model-menu.png
+.. |clamp-loop-menu| image:: images/user-guide/loop-menu.png
+.. |clamp-create-loop| image:: images/user-guide/create-loop.png
+.. |clamp-open-loop| image:: images/user-guide/open-loop.png
+.. |clamp-add-operational-policies| image:: images/user-guide/add-operational-policies.png
+.. |clamp-remove-operational-policies| image:: images/user-guide/remove-operational-policies.png
+.. |clamp-opened-loop| image:: images/user-guide/opened-loop.png
 .. |clamp-menu-prop| image:: images/user-guide/open-menu-prop.png
-.. |clamp-prop-box| image:: images/user-guide/prop-box.png
-.. |clamp-op-policy-box-policy1| image:: images/user-guide/op-policy-box-policy1.png
-.. |clamp-config-policy-tca1| image:: images/user-guide/config-policy-tca1.png
-.. |clamp-config-policy-tca2| image:: images/user-guide/config-policy-tca2.png
-.. |clamp-submit-cl| image:: images/user-guide/submit-menu.png
-.. |clamp-distributed| image:: images/user-guide/distributed.png
-.. |clamp-deploy| image:: images/user-guide/deploy.png
+.. |clamp-prop-box| image:: images/user-guide/loop-properties.png
+.. |clamp-op-policy-box-policy| image:: images/user-guide/op-policy-box-policy.png
+.. |clamp-config-policy-tca| image:: images/user-guide/config-policy-tca.png
+.. |clamp-loop-operation-menu| image:: images/user-guide/loop-operation-menu.png
+.. |clamp-policy-submitted| image:: images/user-guide/policy-submitted.png
 .. |clamp-deploy-params| image:: images/user-guide/deploy-params.png
-.. |clamp-undeploy| image:: images/user-guide/undeploy.png
-.. |blueprint-node| image:: images/user-guide/blueprint_node_type.png
\ No newline at end of file
+.. |blueprint-node| image:: images/user-guide/blueprint_node_type.png
diff --git a/ui-react/src/api/TemplateService.js b/ui-react/src/api/TemplateService.js
index 124d29c..615a87e 100644
--- a/ui-react/src/api/TemplateService.js
+++ b/ui-react/src/api/TemplateService.js
@@ -54,6 +54,23 @@
 	            return {};
 	        });
 	    }
+
+	static getBlueprintMicroServiceTemplate(templateName) {
+	  	return fetch('/restservices/clds/v2/templates/' + templateName + ' /svgRepresentation', { method: 'GET', credentials: 'same-origin', })
+			.then(function (response) {
+			console.debug("getBlueprintMicroServiceTemplate response received: ", response.status);
+			if (response.ok) {
+				return response.text();
+			} else {
+				console.error("getBlueprintMicroServiceTemplates query failed");
+				return {};
+			}
+		})
+		.catch(function (error) {
+			console.error("getBlueprintMicroServiceTemplate error received", error);
+			return {};
+		});
+	}
 	
 	static getDictionary() {
 	    return fetch('restservices/clds/v2/dictionary/', { method: 'GET', credentials: 'same-origin', })
diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
index d6c5e35..e382077 100644
--- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
@@ -34,6 +34,14 @@
 const ModalStyled = styled(Modal)`
 	background-color: transparent;
 `
+const LoopViewSvgDivStyled = styled.div`
+	overflow: hidden;
+	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
+	border-color: ${props => (props.theme.loopViewerHeaderColor)};
+	margin-left: auto;
+	margin-right:auto;
+	text-align: center;
+`
 
 export default class CreateLoopModal extends React.Component {
 	constructor(props, context) {
@@ -46,6 +54,7 @@
 		this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
 		this.state = {
 			show: true,
+			content: '',
 			chosenTemplateName: '',
 			modelName: '',
 			templateNames: []
@@ -63,6 +72,13 @@
 
 	handleDropdownListChange(e) {
 		this.setState({ chosenTemplateName: e.value });
+		TemplateService.getBlueprintMicroServiceTemplates(e.value).then(svgXml => {
+			if (svgXml.length !== 0) {
+				this.setState({ content: svgXml })
+			} else {
+				this.setState({ content: 'Error1' })
+			}
+		})
 	}
 
 	getTemplateNames() {
@@ -77,7 +93,7 @@
 			alert("A model name is required");
 			return;
 		}
-		console.info("Create Model " + this.state.modelName + ", Template " + this.state.chosenTemplateName + " is chosen");
+		console.debug("Create Model " + this.state.modelName + ", Template " + this.state.chosenTemplateName + " is chosen");
 		this.setState({ show: false });
 		LoopService.createLoop("LOOP_" + this.state.modelName, this.state.chosenTemplateName).then(text => {
 			console.debug("CreateLoop response received: ", text);
@@ -92,18 +108,17 @@
 		.catch(error => {
 			console.debug("Create Loop failed");
 		});
-
 	}
 
 	handleModelName = event => {
-    	this.setState({
-      		modelName: event.target.value
-    	})
+		this.setState({
+			modelName: event.target.value
+		})
 	}
 
 	render() {
 		return (
-			<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
+			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
 				<Modal.Header closeButton>
 					<Modal.Title>Create Model</Modal.Title>
 				</Modal.Header>
@@ -115,6 +130,10 @@
 						</Col>
 					</Form.Group>
 					<Form.Group controlId="formPlaintextEmail">
+						<LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} value={this.state.content} >
+						</LoopViewSvgDivStyled>
+					</Form.Group>
+					<Form.Group controlId="formPlaintextEmail">
 						<Form.Label column sm="2">Model Name:</Form.Label>
 						<input type="text" style={{width: '50%'}}
 							value={this.state.modelName}
@@ -127,7 +146,6 @@
 					<Button variant="primary" type="submit" onClick={this.handleCreate}>Create</Button>
 				</Modal.Footer>
 			</ModalStyled>
-
 		);
 	}
 }
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
index 4e8d978..7c98fab 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -37,6 +37,14 @@
 const CheckBoxStyled = styled(FormCheck.Input)`
 	margin-left:3rem;
 `
+const LoopViewSvgDivStyled = styled.div`
+	overflow: hidden;
+	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
+	border-color: ${props => (props.theme.loopViewerHeaderColor)};
+	margin-left: auto;
+	margin-right:auto;
+	text-align: center;
+`
 
 export default class OpenLoopModal extends React.Component {
 	constructor(props, context) {
@@ -49,7 +57,8 @@
 		this.state = {
 			show: true,
 			chosenLoopName: '',
-			loopNames: []
+			loopNames: [],
+			content:''
 		};
 	}
 
@@ -64,6 +73,13 @@
 
 	handleDropdownListChange(e) {
 		this.setState({ chosenLoopName: e.value });
+		LoopService.getSvg(e.value).then(svgXml => {
+			if (svgXml.length !== 0) {
+				this.setState({ content: svgXml })
+			} else {
+				this.setState({ content: 'Error1' })
+			}
+		});
 	}
 
 	getLoopNames() {
@@ -71,7 +87,9 @@
 		    if (Object.entries(loopNames).length !== 0) {
 		        const loopOptions = loopNames.filter(loopName => loopName!=='undefined').map((loopName) => { return { label: loopName, value: loopName } });
             	this.setState({ loopNames: loopOptions })
+
 		    }
+
 		});
 	}
 
@@ -83,7 +101,7 @@
 
 	render() {
 		return (
-			<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
+			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
 				<Modal.Header closeButton>
 					<Modal.Title>Open Model</Modal.Title>
 				</Modal.Header>
@@ -91,9 +109,14 @@
 					<Form.Group as={Row} controlId="formPlaintextEmail">
 						<Form.Label column sm="2">Model Name</Form.Label>
 						<Col sm="10">
-							<Select onChange={this.handleDropdownListChange} options={this.state.loopNames} />
+							<Select onChange={this.handleDropdownListChange}
+							options={this.state.loopNames} />
 						</Col>
 					</Form.Group>
+					<Form.Group controlId="formPlaintextEmail">
+                         <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }}   value={this.state.content} >
+                         </LoopViewSvgDivStyled>
+                    </Form.Group>
 					<Form.Group controlId="formBasicChecbox">
 						<Form.Check>
 							<FormCheck.Label>Read Only</FormCheck.Label>
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
index 208c947..f362cfa 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
@@ -28,12 +28,12 @@
 
   beforeEach(() => {
       fetch.resetMocks();
-          fetch.mockResponseOnce(JSON.stringify([
+      fetch.mockResponse(JSON.stringify([
         "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca",
         "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3",
         "LOOP_gmtAS_v1_0_ResourceInstanceName2_tca_2"
       ]));
-  })
+  });
 
     it('Test the render method', () => {
 
@@ -44,12 +44,12 @@
   it('Onchange event', () => {
     const event = {value: 'LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3'};
     const component = shallow(<OpenLoopModal/>);
-
     component.find('StateManager').simulate('change', event);
     component.update();
     expect(component.state('chosenLoopName')).toEqual("LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3");
   });
 
+
   it('Test handleClose', () => {
     const historyMock = { push: jest.fn() }; 
     const handleClose = jest.spyOn(OpenLoopModal.prototype,'handleClose');
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
index 9e72224..1aa0b5a 100644
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
@@ -4,7 +4,7 @@
 <Styled(Bootstrap(Modal))
   onHide={[Function]}
   show={true}
-  size="lg"
+  size="xl"
 >
   <ModalHeader
     closeButton={true}
@@ -47,6 +47,18 @@
       </Col>
     </FormGroup>
     <FormGroup
+      controlId="formPlaintextEmail"
+    >
+      <styled.div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "",
+          }
+        }
+        value=""
+      />
+    </FormGroup>
+    <FormGroup
       controlId="formBasicChecbox"
     >
       <FormCheck
diff --git a/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js
index 4363da9..3a45153 100644
--- a/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js
+++ b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js
@@ -78,7 +78,6 @@
 		}),
 		100
 		);
-		new Promise(resolve => setTimeout(resolve, 200));
 		const component = shallow(<ManageDictionaries />);
 		expect(myMockFunc.mock.calls.length).toBe(1);
 	});
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
index 89e5697..18c4440 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -38,22 +38,26 @@
 const ModalStyled = styled(Modal)`
 	background-color: transparent;
 `
-const TextModal = styled.textarea`
-margin-top: 20px;
-white-space:pre;
-background-color: ${props => props.theme.toscaTextareaBackgroundColor};;
-text-align: justify;
-font-size: ${props => props.theme.toscaTextareaFontSize};;
-width: 100%;
-height: 300px;
+const LoopViewSvgDivStyled = styled.div`
+	overflow: hidden;
+	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
+	border-color: ${props => (props.theme.loopViewerHeaderColor)};
+	margin-left: auto;
+	margin-right:auto;
+	text-align: center;
+	margin-top: 20px;
 `
+const SvgContainerDivStyled = styled.div`
+	border: 1px solid;
+`
+
 const cellStyle = { border: '1px solid black' };
 const headerStyle = { backgroundColor: '#ddd',	border: '2px solid black'	};
 const rowHeaderStyle = {backgroundColor:'#ddd',  fontSize: '15pt', text: 'bold', border: '1px solid black'};
 
 export default class ViewLoopTemplatesModal extends React.Component {
   state = {
-    show: true,
+        show: true,
 		content: 'Please select a loop template to display it',
 		selectedRow: -1,
 		loopTemplateData: [],
@@ -97,8 +101,7 @@
 	constructor(props, context) {
 		super(props, context);
 		this.handleClose = this.handleClose.bind(this);
-		this.getBlueprintMicroServiceTemplates = this.getBlueprintMicroServiceTemplates.bind(this);
-		this.handleYamlContent = this.handleYamlContent.bind(this);
+		this.getBlueprintMicroServiceTemplate = this.getBlueprintMicroServiceTemplate.bind(this);
 		this.getBlueprintMicroServiceTemplates();
 	}
 
@@ -108,11 +111,20 @@
 		});
 	}
 
-	handleYamlContent = event => {
-		this.setState({
-			content: event.target.value
-		});
-	}
+	getBlueprintMicroServiceTemplate(templateName) {
+	    if (typeof templateName !== "undefined") {
+		    TemplateService.getBlueprintMicroServiceTemplate(templateName).then(svgXml => {
+				if (svgXml.length !== 0) {
+					this.setState({ content: svgXml })
+				} else {
+					this.setState({ content: 'Please select a loop template to view the details' })
+
+				}
+			});
+		} else {
+          	this.setState({ content: 'Please select a loop template to view the details' })
+          	}
+    }
 
 	handleClose() {
 		this.setState({ show: false });
@@ -121,30 +133,31 @@
 
 	render() {
     return (
-      <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
-        <Modal.Header closeButton>
-				</Modal.Header>
-				<Modal.Body>
-          <MaterialTable
-            title={"View Blueprint MicroService Templates"}
-            data={this.state.loopTemplateData}
+    		<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+    			<Modal.Header closeButton>
+    			</Modal.Header>
+    			<Modal.Body>
+    			   <MaterialTable
+    				  title={"View Blueprint MicroService Templates"}
+    				  data={this.state.loopTemplateData}
 					  columns={this.state.loopTemplateColumnsDefinition}
 					  icons={this.state.tableIcons}
-					  onRowClick={(event, rowData) => {this.setState({content: rowData.name, selectedRow: rowData.tableData.id})}}
+    			      onRowClick={(event, rowData) => {this.getBlueprintMicroServiceTemplate(rowData.name);this.setState({selectedRow: rowData.tableData.id})}}
 					  options={{
-					  headerStyle:rowHeaderStyle,
-					  rowStyle: rowData => ({
-					  backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
-            })
-          }}
-          />
-          <div>
-            <TextModal value={this.state.content} onChange={this.handleYamlContent} />
-          </div>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button variant="secondary" onClick={this.handleClose}>Close</Button>
-        </Modal.Footer>
+					      headerStyle:rowHeaderStyle,
+					      rowStyle: rowData => ({
+					      backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
+                          })
+                      }}
+                  />
+	              <SvgContainerDivStyled>
+		            <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} value={this.state.content} >
+					</LoopViewSvgDivStyled>
+	              </SvgContainerDivStyled>
+                </Modal.Body>
+                <Modal.Footer>
+                	<Button variant="secondary" onClick={this.handleClose}>Close</Button>
+               </Modal.Footer>
       </ModalStyled>
       );
     }
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
index 94d4acd..e11d86f 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
@@ -28,8 +28,7 @@
 describe('Verify ViewLoopTemplatesModal', () => {
 	beforeEach(() => {
 		fetch.resetMocks();
-		}
-	);
+	});
 
 	it('Test API Successful', () => {
 		fetch.mockImplementationOnce(() => {
@@ -78,7 +77,6 @@
 		}),
 		100
 		);
-		new Promise(resolve => setTimeout(resolve, 200));
 		const component = shallow(<ViewLoopTemplatesModal/>);
 		expect(myMockFunc.mock.calls.length).toBe(1);
 	});
@@ -133,29 +131,6 @@
 			const component = mount(<ViewLoopTemplatesModal/>);
 			expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
 		});
-
-		it('Test handleYamlContent', () => {
-			fetch.mockImplementationOnce(() => {
-				return Promise.resolve({
-					ok: true,
-					status: 200,
-					json: () => {
-						return Promise.resolve({
-						"index": "1",
-						"name": "MTCA version 1",
-						"modelService.serviceDetails.name": "MTCA",
-						"allowedLoopType" : "CLOSED",
-						"maximumInstancesAllowed":1,
-						"updatedDate":"2019-09-06 19:09:42"
-						});
-					}
-				});
-			});
-			const yamlContent = 'MTCA version 1';
-			const component = shallow(<ViewLoopTemplatesModal/>);
-			component.find('[value="Please select a loop template to display it"]').prop('onChange')({ target: { value: yamlContent }});
-			expect(component.state('content')).toEqual(yamlContent);
-		});
 		
 		it('Test handleClose', () => {
 			fetch.mockImplementationOnce(() => {
diff --git a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js
index 952e888..29127ed 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js
@@ -82,7 +82,6 @@
       }),
     100
   );
-	new Promise(resolve => setTimeout(resolve, 200));
 	const component = shallow(<ViewToscaPolicyModal/>);
 	expect(myMockFunc.mock.calls.length).toBe(1);
 	});
diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
index efec96e..253820f 100644
--- a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
@@ -140,12 +140,16 @@
       }
       title="View Blueprint MicroService Templates"
     />
-    <div>
-      <styled.textarea
-        onChange={[Function]}
+    <styled.div>
+      <styled.div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Please select a loop template to display it",
+          }
+        }
         value="Please select a loop template to display it"
       />
-    </div>
+    </styled.div>
   </ModalBody>
   <ModalFooter>
     <Button