diff --git a/src/UI/Implementation/Component/Listing/Workflow/Renderer.php b/src/UI/Implementation/Component/Listing/Workflow/Renderer.php
index e8bc086e824c..e3c460cec7ca 100644
--- a/src/UI/Implementation/Component/Listing/Workflow/Renderer.php
+++ b/src/UI/Implementation/Component/Listing/Workflow/Renderer.php
@@ -35,6 +35,12 @@ protected function render_linear(Component\Listing\Workflow\Linear $component, R
 
 		$tpl->setVariable("TITLE", $component->getTitle());
 
+		if($component->getOrientation() === $component::VERTICAL) {
+			$tpl->touchBlock('vertical');
+		} else {
+			$tpl->touchBlock('horizontal');
+		}
+
 		foreach ($component->getSteps() as $index=>$step) {
 			$tpl->setCurrentBlock("step");
 			$tpl->setVariable("LABEL", $step->getLabel());
diff --git a/src/UI/templates/default/Listing/tpl.linear.html b/src/UI/templates/default/Listing/tpl.linear.html
index d09a868ebf58..5e8fead851de 100644
--- a/src/UI/templates/default/Listing/tpl.linear.html
+++ b/src/UI/templates/default/Listing/tpl.linear.html
@@ -7,7 +7,7 @@
 	.il-workflow.linear .il-workflow-steps {
 	    margin-top: 50px;
 	}
-	
+
 	.il-workflow.linear.x-axis .il-workflow-step {
 		margin-bottom: 10px;
 	    width: 20%;
@@ -52,7 +52,7 @@
 	}
 
 	.il-workflow.linear.x-axis .il-workflow-step.first .line {
-	}	
+	}
 
 	.il-workflow.linear .il-workflow-steps .il-workflow-step .status {
 	    width: 20px;
@@ -76,23 +76,23 @@
 		float: none;
 	}
 
-	.il-workflow.linear .il-workflow-steps .il-workflow-step.first .status, 
+	.il-workflow.linear .il-workflow-steps .il-workflow-step.first .status,
 	.il-workflow.linear .il-workflow-steps .il-workflow-step.last .status {
 	    border-radius: 20px;
 	    width: 30px;
 	    height: 30px;
 	}
 
-	.il-workflow.linear.x-axis .il-workflow-steps .il-workflow-step.first .status, 
+	.il-workflow.linear.x-axis .il-workflow-steps .il-workflow-step.first .status,
 	.il-workflow.linear.x-axis .il-workflow-steps .il-workflow-step.last .status {
 		bottom: 16px;
 	}
 
-	.il-workflow-step.first .text, 
+	.il-workflow-step.first .text,
 	.il-workflow-step.last .text {
 	    position: relative;
 	    bottom: 10px;
-	}	
+	}
 
 	.il-workflow.linear .il-workflow-step .il-workflow-step-label,
 	.il-workflow.linear .il-workflow-step .il-workflow-step-description {
@@ -113,7 +113,7 @@
 		background-color: #6ea03c; /*brand-success*/
 	}
 
-	.il-workflow.linear .il-workflow-step.completed .status:before, 
+	.il-workflow.linear .il-workflow-step.completed .status:before,
 	.il-workflow.linear .il-workflow-step.completed .status:after {
 	    content: "";
 	    background-color: #fff;
@@ -132,17 +132,17 @@
 	    left: 3px;
 	}
 
-	.il-workflow.linear .il-workflow-step.first.completed .status:before, 
+	.il-workflow.linear .il-workflow-step.first.completed .status:before,
 	.il-workflow.linear .il-workflow-step.last.completed .status:before {
 	    left: 16px;
 	    top: 6px;
 	}
 
-	.il-workflow.linear .il-workflow-step.first.completed .status:after, 
+	.il-workflow.linear .il-workflow-step.first.completed .status:after,
 	.il-workflow.linear .il-workflow-step.last.completed .status:after {
 	    left: 7px;
 	    top: 5px;
-	} 
+	}
 
 	.il-workflow.linear .il-workflow-step.notstarted .status {
 		background-color: #c3cad4; /*@brand-info  30% Deckkraft*/
@@ -207,7 +207,10 @@
 
 
 
-<div class="il-workflow linear x-axis">  <!-- BEGIN horizontal -- x-axis -- END horizontal -->
+<div class="il-workflow linear
+	<!-- BEGIN horizontal --> x-axis <!-- END horizontal -->
+	<!-- BEGIN vertical --> y-axis <!-- END vertical -->
+	">
 	<div class="il-workflow-header">
 		<h3 class="il-workflow-title">{TITLE}</h3>
 	</div>
@@ -230,11 +233,11 @@ <h3 class="il-workflow-title">{TITLE}</h3>
 						<span class="il-workflow-step-label">{LABEL}
 						</span>
 						<span class="il-workflow-step-description">{DESCRIPTION}</span>
-					</div>		
-				</div>		
+					</div>
+				</div>
 			</div>
 			<!-- should be used with verital line
-			<div class="line-y"></div> 
+			<div class="line-y"></div>
 			-->
 		</div>