diff --git a/cypress/platform/class.html b/cypress/platform/class.html
index 8118ca474..6fc4290e6 100644
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@@ -22,6 +22,12 @@
     <h1>info below</h1>
       <div class="mermaid" style="width: 100%; height: 20%;">
         classDiagram-v2
+         class BankAccount{
+          +String owner
+          +BigDecimal balance
+          +deposit(amount) bool
+          +withdrawl(amount) int
+      }
         classA --|> classB : Inheritance
         classC --* classD : Composition
         classE --o classF : Aggregation
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
index ade8806b2..a434ed4ab 100644
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@@ -625,9 +625,14 @@ const class_box = (parent, node) => {
     verticalPos = interfaceBBox.height + rowPadding;
   }
   // Positin the class title label
+  let diffX = (maxWidth - classTitleBBox.width) / 2;
   select(classTitleLabel).attr(
     'transform',
-    'translate( ' + -maxWidth + node.padding / 2 + ', ' + ((-1 * maxHeight) / 2 + verticalPos) + ')'
+    'translate( ' +
+      ((-1 * maxWidth) / 2 + diffX) +
+      ', ' +
+      ((-1 * maxHeight) / 2 + verticalPos) +
+      ')'
   );
   verticalPos += classTitleBBox.height + rowPadding;
 
diff --git a/src/diagrams/class/styles.js b/src/diagrams/class/styles.js
index 388fb3beb..781f3cd9d 100644
--- a/src/diagrams/class/styles.js
+++ b/src/diagrams/class/styles.js
@@ -10,6 +10,16 @@ const getStyles = options =>
     font-weight: bolder;
   }
 }
+.node rect,
+  .node circle,
+  .node ellipse,
+  .node polygon,
+  .node path {
+    fill: ${options.mainBkg};
+    stroke: ${options.nodeBorder};
+    stroke-width: 1px;
+  }
+
 
 .divider {
   stroke: ${options.nodeBorder};