diff --git a/webapp/src/main/webapp/themes/iph/css/iph.css b/webapp/src/main/webapp/themes/iph/css/iph.css
index 60da9f19b..ce887a45b 100644
--- a/webapp/src/main/webapp/themes/iph/css/iph.css
+++ b/webapp/src/main/webapp/themes/iph/css/iph.css
@@ -3333,6 +3333,10 @@ label.switch >.collapseTextControl >img {
 	background-repeat: no-repeat;
 	color: #8B4513;
 }
+.tocElementLeafImage {
+	padding-left: 4px;
+	padding-right: 12px;
+}
 /* ------------------------------------------------->  */
 /* FONTS  -------------------------------->  */
 /* ------------------------------------------------->  */
diff --git a/webapp/src/main/webapp/themes/iph/images/circle-item.svg b/webapp/src/main/webapp/themes/iph/images/circle-item.svg
new file mode 100644
index 000000000..def917f52
--- /dev/null
+++ b/webapp/src/main/webapp/themes/iph/images/circle-item.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="3.5" cy="3.5" r="3" fill="#F6F6F6" stroke="#8B4513"/>
+</svg>
diff --git a/webapp/src/main/webapp/themes/iph/js/toc.js b/webapp/src/main/webapp/themes/iph/js/toc.js
index 81f02a10d..212b1346f 100644
--- a/webapp/src/main/webapp/themes/iph/js/toc.js
+++ b/webapp/src/main/webapp/themes/iph/js/toc.js
@@ -27,11 +27,7 @@
 		}
 	}
 	function addElementControls(tocElement){
-		var elementChild = tocElement.querySelector('.tocElement');
-		if (elementChild === null){
-			//no controls need as no childs appear.
-			return;
-		}
+		
 		var nameContainer = tocElement.querySelector('.tocElementName');
 		if (nameContainer === null){
 			console.log("no nameContainer found");
@@ -41,15 +37,19 @@
 			console.log("no tocElement id found");
 			return;
 		}
-		//var elementSwitchButton = document.createElement("button");
-		//elementSwitchButton.className = "tocElementSwitchButton";
-		
-		var switchImage = document.createElement("img");
-		switchImage.onclick = function() {switchTOCElement(tocElement.id);};
-		switchImage.className = "tocElementSwitchImage";
-		nameContainer.prepend(switchImage);
-		//elementSwitchButton.appendChild(switchImage);
-
+	
+		var elementChild = tocElement.querySelector('.tocElement');
+		if (elementChild === null){
+			var leafImage = document.createElement("img");
+			leafImage.className = "tocElementLeafImage";
+			leafImage.src = urlsBase + "/themes/iph/images/circle-item.svg";
+			nameContainer.prepend(leafImage);
+		} else {
+			var switchImage = document.createElement("img");
+			switchImage.onclick = function() {switchTOCElement(tocElement.id);};
+			switchImage.className = "tocElementSwitchImage";
+			nameContainer.prepend(switchImage);
+		}
 	}
 	
 	function switchTOCElement(id){
@@ -72,9 +72,10 @@
 			return;
 		}
 	    $.extend(this, urlsBase);
-		var imgElement = nameContainer.firstElementChild;
-		imgElement.src = urlsBase + "/themes/iph/images/arrow-top-small.svg";
-		
+		var imgElement = nameContainer.querySelector('.tocElementSwitchImage');
+		if (imgElement != null){
+			imgElement.src = urlsBase + "/themes/iph/images/arrow-top-small.svg";
+		}
 	}
 	
 	function setExpandImageToElement(id){
@@ -85,8 +86,10 @@
 			return;
 		}
 	    $.extend(this, urlsBase);
-		var imgElement = nameContainer.firstElementChild;
-		imgElement.src = urlsBase + "/themes/iph/images/arrow-down-small.svg";
+		var imgElement = nameContainer.querySelector('.tocElementSwitchImage');
+		if (imgElement != null){
+			imgElement.src = urlsBase + "/themes/iph/images/arrow-down-small.svg";
+		}
 		
 	}