diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js
index 8cff879aa..97fc00461 100644
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -99,7 +99,7 @@ const drawText = (txt) => {
 }
 
 
-const drawCommits = (svg, commits) => {
+const drawCommits = (svg, commits, modifyGraph) => {
   const gBullets = svg.append('g').attr('class', 'commit-bullets');
   const gLabels = svg.append('g').attr('class', 'commit-labels');
   let pos = 0;
@@ -110,20 +110,26 @@ const drawCommits = (svg, commits) => {
 
     // log.debug('drawCommits (commit branchPos)', commit, branchPos);
     const y = branchPos[commit.branch].pos;
-    const line = gBullets.append('circle');
-    line.attr('cx', pos + 10);
-    line.attr('cy', y);
-    line.attr('r', 10);
-    line.attr('class', 'commit commit-'+commit.type + ' ' + commit.id + ' commit' + branchPos[commit.branch].index);
+
+    // Don't draw the commits now but calculate the positioning which is used by the branmch lines etc.
+    if (modifyGraph) {
+      const line = gBullets.append('circle');
+      line.attr('cx', pos + 10);
+      line.attr('cy', y);
+      line.attr('r', 10);
+      line.attr('class', 'commit commit-'+commit.type + ' ' + commit.id + ' commit' + branchPos[commit.branch].index);
+    }
     commitPos[commit.id] = {x: pos + 10, y: y};
 
-    const text = gLabels.append('text')
-      // .attr('x', pos + 10)
-      .attr('y', y + 25)
-      .attr('class', 'commit-label')
-      .text(commit.id);
-    let bbox = text.node().getBBox();
-    text.attr('x', pos + 10 - bbox.width / 2);
+    if (modifyGraph) {
+      const text = gLabels.append('text')
+        // .attr('x', pos + 10)
+        .attr('y', y + 25)
+        .attr('class', 'commit-label')
+        .text(commit.id);
+      let bbox = text.node().getBBox();
+      text.attr('x', pos + 10 - bbox.width / 2);
+    }
     pos +=50;
     if(pos>maxPos) {
       maxPos = pos;
@@ -153,20 +159,34 @@ const drawArrow = (svg, commit1, commit2) => {
   let arc = '';
   let radius = 0;
   let offset = 0
+  let colorClassNum;
+  let lineDef;
   if(p1.y < p2.y) {
     arc = 'A 20 20, 0, 0, 0,';
     radius = 20;
     offset = 20;
+  // Figure out the color of the arrow,arrows going down take the color from the destination branch
+    colorClassNum = branchPos[commit2.branch].index;
+
+    lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc} ${p1.x + offset} ${p2.y} L ${p2.x} ${p2.y}`;
   }
   if(p1.y > p2.y) {
-    arc = 'A 20 20, 0, 0, 1,';
-    radius = -20;
+    arc = 'A 20 20, 0, 0, 0,';
+    radius = 20;
     offset = 20;
+  // Arrows going up take the color from the source branch
+    colorClassNum = branchPos[commit1.branch].index;
+    lineDef = `M ${p1.x} ${p1.y} L ${p2.x-radius} ${p1.y} ${arc} ${p2.x} ${p1.y-offset} L ${p2.x} ${p2.y}`;
   }
 
-  const arrow = svg.append('path').attr('d', `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc} ${p1.x + offset} ${p2.y} L ${p2.x} ${p2.y}`)
-      .attr('class', 'arrow')
-      .attr('marker-end', 'url(' + url + '#arrowhead)');
+  if(p1.y === p2.y) {
+    colorClassNum = branchPos[commit1.branch].index
+    lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc} ${p1.x + offset} ${p2.y} L ${p2.x} ${p2.y}`;
+  }
+
+  const arrow = svg.append('path').attr('d', lineDef)
+      .attr('class', 'arrow arrow' +  colorClassNum)
+      // .attr('marker-end', 'url(' + url + '#arrowhead)');
 }
 
 const drawArrows = (svg, commits) => {
@@ -278,14 +298,13 @@ export const draw = function (txt, id, ver) {
     .attr('markerWidth', 24)
     .attr('markerHeight', 24)
     .attr('orient', 'auto')
-    // .attr('stroke', 'red')
-    // .attr('fill', 'red')
     .append('path')
     .attr('d', 'M 0 0 L 20 10 L 0 20 z'); // this is actual shape for arrowhead
 
-  drawCommits(diagram, allCommitsDict);
+  drawCommits(diagram, allCommitsDict, false);
   drawBranches(diagram, branches);
   drawArrows(diagram, allCommitsDict);
+  drawCommits(diagram, allCommitsDict, true);
 
   const padding = config.diagramPadding;
   const svgBounds = diagram.node().getBBox();
diff --git a/src/diagrams/git/styles.js b/src/diagrams/git/styles.js
index b6c0387aa..0845f6e5f 100644
--- a/src/diagrams/git/styles.js
+++ b/src/diagrams/git/styles.js
@@ -9,7 +9,9 @@ const getStyles = (options) =>
     font-family: var(--mermaid-font-family);
   }
   .branch {
-    stroke-width: 10;
+    stroke-width: 1;
+    stroke: black;
+    stroke-dasharray: 2;
   }
   .commit-labels { font-size: 10px; }
   .commit0 { stroke: ${options.fillType0}; fill: ${options.fillType0}; }
@@ -20,14 +22,14 @@ const getStyles = (options) =>
   .commit5 { stroke: ${options.fillType5}; fill: ${options.fillType5}; }
   .commit6 { stroke: ${options.fillType6}; fill: ${options.fillType6}; }
   .commit7 { stroke: ${options.fillType7}; fill: ${options.fillType7}; }
-  .branch0 { stroke: ${options.fillType0}; }
-  .branch1 { stroke: ${options.fillType1}; }
-  .branch2 { stroke: ${options.fillType2}; }
-  .branch3 { stroke: ${options.fillType3}; }
-  .branch4 { stroke: ${options.fillType4}; }
-  .branch5 { stroke: ${options.fillType5}; }
-  .branch6 { stroke: ${options.fillType6}; }
-  .branch7 { stroke: ${options.fillType7}; }
+  // .branch0 { stroke: ${options.fillType0}; }
+  // .branch1 { stroke: ${options.fillType1}; }
+  // .branch2 { stroke: ${options.fillType2}; }
+  // .branch3 { stroke: ${options.fillType3}; }
+  // .branch4 { stroke: ${options.fillType4}; }
+  // .branch5 { stroke: ${options.fillType5}; }
+  // .branch6 { stroke: ${options.fillType6}; }
+  // .branch7 { stroke: ${options.fillType7}; }
   .label0  { fill: ${options.fillType0}; }
   .label1  { fill: ${options.fillType1}; }
   .label2  { fill: ${options.fillType2}; }
@@ -38,8 +40,15 @@ const getStyles = (options) =>
   .label7  { fill: ${options.fillType7}; }
 
   // .arrow { stroke : ${options.tertiaryColor}; stroke-width: 8; stroke-linecap: round; }
-  .arrow { stroke : #cc33cc; stroke-width: 8; stroke-linecap: round; fill: none}
-  // #arrowhead { fill: ${options.tertiaryColor};}
+  .arrow { stroke-width: 8; stroke-linecap: round; fill: none}
+  .arrow0 { stroke: ${options.fillType0}; }
+  .arrow1 { stroke: ${options.fillType1}; }
+  .arrow2 { stroke: ${options.fillType2}; }
+  .arrow3 { stroke: ${options.fillType3}; }
+  .arrow4 { stroke: ${options.fillType4}; }
+  .arrow5 { stroke: ${options.fillType5}; }
+  .arrow6 { stroke: ${options.fillType6}; }
+  .arrow7 { stroke: ${options.fillType7}; }
   #arrowhead { fill: #990099;}
   .branchLabel  { }
   }