diff --git a/zabapgit.prog.abap b/zabapgit.prog.abap
index e5bc15d7e..6fb8b69a0 100644
--- a/zabapgit.prog.abap
+++ b/zabapgit.prog.abap
@@ -14814,6 +14814,108 @@ CLASS lcl_git_porcelain DEFINITION FINAL.
 
 ENDCLASS.                    "lcl_porcelain DEFINITION
 
+*----------------------------------------------------------------------*
+*       CLASS lcl_html_helper DEFINITION
+*----------------------------------------------------------------------*
+CLASS lcl_html_helper DEFINITION FINAL.
+  PUBLIC SECTION.
+    CONSTANTS mc_indent_size TYPE i VALUE 2.
+
+    DATA mv_html   TYPE string READ-ONLY.
+    DATA mv_indent TYPE i READ-ONLY.
+
+    METHODS add IMPORTING iv_chunk TYPE any.
+    METHODS reset.
+
+  PRIVATE SECTION.
+    METHODS _add_str IMPORTING iv_str  TYPE csequence.
+    METHODS _add_htm IMPORTING io_html TYPE REF TO lcl_html_helper.
+
+endclass.                    "lcl_html_helper DEFINITION
+
+*----------------------------------------------------------------------*
+*       CLASS lcl_html_helper IMPLEMENTATION
+*----------------------------------------------------------------------*
+CLASS lcl_html_helper IMPLEMENTATION.
+  METHOD add.
+    DATA lo_type TYPE REF TO cl_abap_typedescr.
+    DATA lo_html TYPE REF TO lcl_html_helper.
+
+    lo_type = cl_abap_typedescr=>describe_by_data( iv_chunk ).
+
+    CASE lo_type->type_kind.
+    WHEN cl_abap_typedescr=>typekind_char OR cl_abap_typedescr=>typekind_string.
+      _add_str( iv_chunk ).
+    WHEN cl_abap_typedescr=>typekind_oref.
+      ASSERT iv_chunk IS BOUND. " Dev mistake
+      TRY.
+        lo_html ?= iv_chunk.
+      CATCH cx_sy_move_cast_error.
+        ASSERT 1 = 0. " Dev mistake
+      ENDTRY.
+      _add_htm( lo_html ).
+    WHEN OTHERS.
+      ASSERT 1 = 0. " Dev mistake
+    ENDCASE.
+
+  ENDMETHOD.  " add
+
+  METHOD reset.
+    CLEAR: me->mv_html, me->mv_indent.
+  ENDMETHOD.                    "reset
+
+  METHOD _add_str.
+    DATA lv_tags        TYPE i.
+    DATA lv_tags_open   TYPE i.
+    DATA lv_tags_close  TYPE i.
+    DATA lv_close_offs  TYPE i.
+    DATA lv_shift_back  TYPE i.
+
+    FIND FIRST OCCURRENCE OF '</' IN iv_str MATCH OFFSET lv_close_offs.
+    IF sy-subrc = 0 AND lv_close_offs = 0 AND mv_indent > 0. " Found close tag @beginning
+      lv_shift_back = 1.
+    ENDIF.
+
+    mv_html =   mv_html
+            &&  repeat( val = ` ` occ = ( mv_indent - lv_shift_back ) * mc_indent_size )
+            &&  iv_str
+            &&  gc_newline.
+
+    FIND ALL OCCURRENCES OF '<'  IN iv_str MATCH COUNT lv_tags.
+    FIND ALL OCCURRENCES OF '</' IN iv_str MATCH COUNT lv_tags_close.
+    lv_tags_open = lv_tags - lv_tags_close.
+
+    IF lv_tags_open > lv_tags_close. " This logic chosen due to possible double tags in a line '<a><b>'
+      mv_indent = mv_indent + 1.
+    ELSEIF lv_tags_open < lv_tags_close AND mv_indent > 0.
+      mv_indent = mv_indent - 1.
+    ENDIF.
+
+  ENDMETHOD.                    "_add_str
+
+  METHOD _add_htm.
+    DATA lv_indent_str  TYPE string.
+    DATA lv_temp_str    TYPE string.
+
+    lv_indent_str = repeat( val = ` ` occ = mv_indent * mc_indent_size ).
+    lv_temp_str   = io_html->mv_html.
+
+    IF me->mv_indent > 0.
+      REPLACE ALL OCCURRENCES OF gc_newline IN lv_temp_str WITH gc_newline && lv_indent_str.
+      SHIFT lv_temp_str RIGHT DELETING TRAILING space.
+      SHIFT lv_temp_str LEFT  DELETING LEADING space.
+    ENDIF.
+
+    mv_html   = mv_html && lv_indent_str && lv_temp_str.
+    mv_indent = mv_indent + io_html->mv_indent.
+
+  ENDMETHOD.                    "_add_htm
+
+ENDCLASS.                    "lcl_html_helper IMPLEMENTATION
+
+*----------------------------------------------------------------------*
+*       INTERFACE lif_gui_page DEFINITION
+*----------------------------------------------------------------------*
 INTERFACE lif_gui_page.
 
   METHODS:
@@ -17229,9 +17331,9 @@ CLASS lcl_gui_page_diff DEFINITION FINAL.
     DATA: ms_result TYPE lcl_file_status=>ty_result,
           mo_diff   TYPE REF TO lcl_diff.
 
-    METHODS:
-      render_stats
-        RETURNING VALUE(rv_html) TYPE string.
+    METHODS styles       RETURNING VALUE(ro_html) TYPE REF TO lcl_html_helper.
+    METHODS render_head  RETURNING VALUE(ro_html) TYPE REF TO lcl_html_helper.
+    METHODS render_diff  RETURNING VALUE(ro_html) TYPE REF TO lcl_html_helper.
 
 ENDCLASS.
 
@@ -17239,7 +17341,179 @@ CLASS lcl_gui_page_diff IMPLEMENTATION.
 
   METHOD constructor.
     ms_result = is_result.
-    mo_diff = io_diff.
+    mo_diff   = io_diff.
+  ENDMETHOD.
+
+  METHOD styles.
+    DATA lo_html TYPE REF TO lcl_html_helper.
+    CREATE OBJECT lo_html.
+
+    lo_html->add( '<style type="text/css">' ).                      "#EC NOTEXT
+    lo_html->add( '/* DIFF */' ).                                   "#EC NOTEXT
+    lo_html->add( 'div.diff {' ).                                   "#EC NOTEXT
+    lo_html->add( '  background-color: #f2f2f2;' ).                 "#EC NOTEXT
+    lo_html->add( '  padding: 0.7em    ' ).                         "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( 'div.diff_head {' ).                              "#EC NOTEXT
+    lo_html->add( '  border-bottom: 1px solid #DDD;' ).             "#EC NOTEXT
+    lo_html->add( '  padding-bottom: 0.7em;' ).                     "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( 'span.diff_name {' ).                             "#EC NOTEXT
+    lo_html->add( '  padding-left: 0.5em;' ).                       "#EC NOTEXT
+    lo_html->add( '  color: grey;' ).                               "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( 'span.diff_name strong {' ).                      "#EC NOTEXT
+    lo_html->add( '  color: #333;' ).                               "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( 'span.diff_banner {' ).                           "#EC NOTEXT
+    lo_html->add( '  border-style: solid;' ).                       "#EC NOTEXT
+    lo_html->add( '  border-width: 1px;' ).                         "#EC NOTEXT
+    lo_html->add( '  border-radius: 3px;' ).                        "#EC NOTEXT
+    lo_html->add( '  padding-left: 0.3em;' ).                       "#EC NOTEXT
+    lo_html->add( '  padding-right: 0.3em;' ).                      "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( '.diff_ins {' ).                                  "#EC NOTEXT
+    lo_html->add( '  border-color: #38e038;' ).                     "#EC NOTEXT
+    lo_html->add( '  background-color: #91ee91 !important;' ).      "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( '.diff_del {' ).                                  "#EC NOTEXT
+    lo_html->add( '  border-color: #ff8093;' ).                     "#EC NOTEXT
+    lo_html->add( '  background-color: #ffb3be !important;' ).      "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( '.diff_upd {' ).                                  "#EC NOTEXT
+    lo_html->add( '  border-color: #dada00;' ).                     "#EC NOTEXT
+    lo_html->add( '  background-color: #ffffb3 !important;' ).      "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( 'div.diff_content {' ).                           "#EC NOTEXT
+    lo_html->add( '  background: #fff;' ).                          "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( 'table.diff_tab {' ).                             "#EC NOTEXT
+    lo_html->add( '  width: 98%;' ).                                "#EC NOTEXT
+    lo_html->add( '  border-collapse: collapse;' ).                 "#EC NOTEXT
+    lo_html->add( '  font-family: Consolas, Courier, monospace;' ). "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( 'table.diff_tab th {' ).                          "#EC NOTEXT
+    lo_html->add( '  color: grey;' ).                               "#EC NOTEXT
+    lo_html->add( '  text-align: left;' ).                          "#EC NOTEXT
+    lo_html->add( '  font-weight: normal;' ).                       "#EC NOTEXT
+    lo_html->add( '  padding: 0.5em;' ).                            "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( 'table.diff_tab td {' ).                          "#EC NOTEXT
+    lo_html->add( '  color: #333;' ).                               "#EC NOTEXT
+    lo_html->add( '  padding-left: 0.5em;' ).                       "#EC NOTEXT
+    lo_html->add( '  padding-right: 0.5em;' ).                      "#EC NOTEXT
+    lo_html->add( '  font-size: smaller;' ).                        "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( 'table.diff_tab td.num, th.num {' ).              "#EC NOTEXT
+    lo_html->add( '  text-align: right;' ).                         "#EC NOTEXT
+    lo_html->add( '  color: #ccc;' ).                               "#EC NOTEXT
+    lo_html->add( '  border-left: 1px solid #eee;' ).               "#EC NOTEXT
+    lo_html->add( '  border-right: 1px solid #eee;' ).              "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( 'table.diff_tab td.cmd, th.cmd {' ).              "#EC NOTEXT
+    lo_html->add( '  font-size: smaller;' ).                        "#EC NOTEXT
+    lo_html->add( '  text-align: center !important;' ).             "#EC NOTEXT
+    lo_html->add( '}' ).                                            "#EC NOTEXT
+    lo_html->add( '</style>' ).                                     "#EC NOTEXT
+
+    ro_html = lo_html.
+  ENDMETHOD.
+
+  METHOD render_head.
+    DATA lo_html  TYPE REF TO lcl_html_helper.
+    DATA ls_count TYPE lcl_diff=>ty_count.
+    CREATE OBJECT lo_html.
+
+    ls_count = mo_diff->stats( ).
+
+    lo_html->add( '<div class="diff_head">' ).                  "#EC NOTEXT
+    lo_html->add( |<span class="diff_banner diff_ins">+ { ls_count-insert }</span>| ). "#EC NOTEXT
+    lo_html->add( |<span class="diff_banner diff_del">- { ls_count-delete }</span>| ). "#EC NOTEXT
+    lo_html->add( |<span class="diff_banner diff_upd">~ { ls_count-update }</span>| ). "#EC NOTEXT
+    lo_html->add( '<span class="diff_name">' ).                 "#EC NOTEXT
+    lo_html->add( ms_result-obj_type ).                         "#EC NOTEXT
+    lo_html->add( |<strong>{ ms_result-obj_name }</strong>| ).  "#EC NOTEXT
+    lo_html->add( |({ ms_result-filename })| ).
+    lo_html->add( '</span>' ).                                  "#EC NOTEXT
+    lo_html->add( '</div>' ).                                   "#EC NOTEXT
+
+    ro_html = lo_html.
+  ENDMETHOD.
+
+  METHOD render_diff.
+
+    DATA lo_html         TYPE REF TO lcl_html_helper.
+    DATA lt_diffs        TYPE lcl_diff=>ty_diffs_tt.
+    DATA lv_index        TYPE i.
+    DATA lv_local        TYPE string.
+    DATA lv_remote       TYPE string.
+    DATA lv_attr_local   TYPE string.
+    DATA lv_attr_remote  TYPE string.
+    DATA lv_anchor_count LIKE sy-tabix.
+    DATA lv_href         TYPE string.
+
+    FIELD-SYMBOLS <ls_diff>  LIKE LINE OF lt_diffs.
+    FIELD-SYMBOLS <ls_break> LIKE LINE OF lt_diffs.
+
+    CREATE OBJECT lo_html.
+    lt_diffs = mo_diff->get( ).
+
+    lo_html->add( '<div class="diff_content">' ).  "#EC NOTEXT
+    lo_html->add( '<table class="diff_tab">' ).    "#EC NOTEXT
+    lo_html->add( '<tr>' ).                        "#EC NOTEXT
+    lo_html->add( '<th class="num"></th>' ).       "#EC NOTEXT
+    lo_html->add( '<th>@LOCAL</th>' ).             "#EC NOTEXT
+    lo_html->add( '<th class="num"></th>' ).       "#EC NOTEXT
+    lo_html->add( '<th>@REMOTE</th>' ).            "#EC NOTEXT
+    lo_html->add( '<th class="cmd"><a href=#diff_1>&#x25BC; 1</a></th>' ).       "#EC NOTEXT
+    lo_html->add( '</tr>' ).                       "#EC NOTEXT
+
+    LOOP AT lt_diffs ASSIGNING <ls_diff>.
+      lv_index  = sy-tabix.
+      lv_local  = escape( val = <ls_diff>-local  format = cl_abap_format=>e_html_attr ).
+      lv_remote = escape( val = <ls_diff>-remote format = cl_abap_format=>e_html_attr ).
+
+      CLEAR: lv_attr_local, lv_attr_remote. " Class for changed lines
+      CASE <ls_diff>-result.
+        WHEN lcl_diff=>c_diff-insert.
+          lv_attr_local  = ' class="diff_ins"'.    "#EC NOTEXT
+        WHEN lcl_diff=>c_diff-delete.
+          lv_attr_remote = ' class="diff_del"'.    "#EC NOTEXT
+        WHEN lcl_diff=>c_diff-update.
+          lv_attr_local  = ' class="diff_ins"'.    "#EC NOTEXT
+          lv_attr_remote = ' class="diff_del"'.    "#EC NOTEXT
+      ENDCASE.
+
+      CLEAR lv_href.  " Create link to next change
+      IF <ls_diff>-result = lcl_diff=>c_diff-delete
+      OR <ls_diff>-result = lcl_diff=>c_diff-insert
+      OR <ls_diff>-result = lcl_diff=>c_diff-update.
+        lv_anchor_count = lv_anchor_count + 1.
+        lv_href = |<a name="diff_{ lv_anchor_count }"|
+               && |   href="#diff_{ lv_anchor_count + 1 }|
+               && |">&#x25BC; { lv_anchor_count + 1 }</a>|.
+      ENDIF.
+
+      lo_html->add( '<tr>' ).                                           "#EC NOTEXT
+      lo_html->add( |<td class="num">{ <ls_diff>-local_line }</td>| ).  "#EC NOTEXT
+      lo_html->add( |<td{ lv_attr_local }>{ lv_local }</td>| ).         "#EC NOTEXT
+      lo_html->add( |<td class="num">{ <ls_diff>-remote_line }</td>| ). "#EC NOTEXT
+      lo_html->add( |<td{ lv_attr_remote }>{ lv_remote }</td>| ).       "#EC NOTEXT
+      lo_html->add( |<td class="cmd">{ lv_href }</td>| ).               "#EC NOTEXT
+      lo_html->add( '</tr>' ).                                          "#EC NOTEXT
+
+      " TODO Refactor ?
+      READ TABLE lt_diffs INDEX lv_index ASSIGNING <ls_break>.
+      IF sy-subrc = 0 AND <ls_break>-short = abap_false.
+        lo_html->add( '<tr><td>&nbsp;</td><td></td><td></td><td></td><td></td></tr>' ).
+      ENDIF.
+
+    ENDLOOP.
+
+    lo_html->add( '</table>' ).  "#EC NOTEXT
+    lo_html->add( '</div>' ).    "#EC NOTEXT
+
+    ro_html = lo_html.
   ENDMETHOD.
 
   METHOD lif_gui_page~on_event.
@@ -17248,142 +17522,37 @@ CLASS lcl_gui_page_diff IMPLEMENTATION.
       WHEN 'back'.
         lcl_gui=>back( ).
       WHEN OTHERS.
-        _raise 'Unknown action'.
+        _raise 'Unknown action'. "#EC NOTEXT
     ENDCASE.
 
   ENDMETHOD.
 
-  METHOD render_stats.
-
-    DATA: ls_count TYPE lcl_diff=>ty_count.
-
-
-    ls_count = mo_diff->stats( ).
-    rv_html = '<table border="1">' && gc_newline &&
-      '<tr>'               && gc_newline &&
-      '<td>Insert</td>'    && gc_newline &&
-      '<td>'               &&
-      ls_count-insert      &&
-      '</td>'              && gc_newline &&
-      '</tr>'              && gc_newline &&
-      '<tr>'               && gc_newline &&
-      '<td>Delete</td>'    && gc_newline &&
-      '<td>'               &&
-      ls_count-delete      &&
-      '</td>'              && gc_newline &&
-      '</tr>'              && gc_newline &&
-      '<tr>'               && gc_newline &&
-      '<td>Update</td>'    && gc_newline &&
-      '<td>'               &&
-      ls_count-update      &&
-      '</td>'              && gc_newline &&
-      '</tr>'              && gc_newline &&
-      '</table><br>'       && gc_newline.
-
-  ENDMETHOD.
-
   METHOD lif_gui_page~render.
 
-    DATA: lv_html         TYPE string,
-          lv_local        TYPE string,
-          lv_remote       TYPE string,
-          lv_clocal       TYPE string,
-          lv_cremote      TYPE string,
-          lv_index        TYPE i,
-          lt_diffs        TYPE lcl_diff=>ty_diffs_tt,
-          lv_anchor_count LIKE sy-tabix,
-          lv_break        TYPE string,
-          lv_href         TYPE string.
+    DATA: lv_html         TYPE string.
+    DATA  lo_html  TYPE REF TO lcl_html_helper.
 
-    FIELD-SYMBOLS: <ls_diff>  LIKE LINE OF lt_diffs,
-                   <ls_break> LIKE LINE OF lt_diffs.
+    CREATE OBJECT lo_html.
 
+* REDO
+    lv_html = lcl_gui=>header( ).
 
-    lv_html = lcl_gui=>header( ) &&
-      '<div id="header">' &&
-      '<h1>diff</h1>&nbsp;<a href="sapevent:back">Back</a>' &&
-      '</div>' &&
-      '<div id="toc">' &&
-      '<h3>' &&
-      ms_result-obj_type && '&nbsp;' &&
-      ms_result-obj_name && '&nbsp;' &&
-      ms_result-filename && '</h3><br><br>' &&
-      render_stats( ).
+    "TODO: crutch, redo later after unification
+    replace first occurrence of '</style>' in lv_html
+      with '</style>' && styles( )->mv_html.
 
-    lv_html = lv_html &&
-      '<table border="0">'                    && gc_newline &&
-      '<tr>'                                  && gc_newline &&
-      '<th></td>'                             && gc_newline &&
-      '<th><h2>Local</h2></th>'               && gc_newline &&
-      |<th><a href=#diff_1>&lt;&gt;</a></th>| && gc_newline &&
-      '<th></td>'                             && gc_newline &&
-      '<th><h2>Remote</h2></th>'              && gc_newline &&
-      '</tr>'.
+    "TODO: crutch, move to SAP back button (code almost ready)
+    lv_html = lv_html && '<div>' && '<a href="sapevent:back">Back</a>' && '</div>'.
+    lo_html->add( lv_html ).
+* ^^^ REDO
 
-    lt_diffs = mo_diff->get( ).
+    lo_html->add( '<div class="diff">' ).  "#EC NOTEXT
+    lo_html->add( render_head( ) ).
+    lo_html->add( render_diff( ) ).
+    lo_html->add( '</div>' ).              "#EC NOTEXT
+    lo_html->add( lcl_gui=>footer( ) ).
 
-    LOOP AT lt_diffs ASSIGNING <ls_diff> WHERE short = abap_true.
-      lv_index = sy-tabix + 1.
-      READ TABLE lt_diffs INDEX lv_index ASSIGNING <ls_break>.
-      IF sy-subrc = 0 AND <ls_break>-short = abap_false.
-        lv_break = '<tr>' && gc_newline &&
-          '<td>&nbsp;<br>&nbsp;</td>' && gc_newline &&
-          '<td></td>' && gc_newline &&
-          '<td></td>' && gc_newline &&
-          '<td></td>' && gc_newline &&
-          '<td></td>' && gc_newline &&
-          '</tr>'.
-      ELSE.
-        CLEAR lv_break.
-      ENDIF.
-
-      lv_local = escape( val    = <ls_diff>-local
-                         format = cl_abap_format=>e_html_attr ).
-      lv_remote = escape( val    = <ls_diff>-remote
-                          format = cl_abap_format=>e_html_attr ).
-
-      CASE <ls_diff>-result.
-        WHEN lcl_diff=>c_diff-insert.
-          lv_clocal = ' style="background:lightgreen;"'.    "#EC NOTEXT
-          lv_cremote = ''.
-        WHEN lcl_diff=>c_diff-delete.
-          lv_clocal = ''.
-          lv_cremote = ' style="background:lightpink;"'.    "#EC NOTEXT
-        WHEN lcl_diff=>c_diff-update.
-          lv_clocal = ' style="background:lightgreen;"'.    "#EC NOTEXT
-          lv_cremote = ' style="background:lightpink;"'.    "#EC NOTEXT
-        WHEN OTHERS.
-          lv_clocal = ''.
-          lv_cremote = ''.
-      ENDCASE.
-
-      IF <ls_diff>-result = lcl_diff=>c_diff-delete
-          OR <ls_diff>-result = lcl_diff=>c_diff-insert
-          OR <ls_diff>-result = lcl_diff=>c_diff-update.
-        lv_anchor_count = lv_anchor_count + 1.
-        lv_href = |<a name="diff_{
-          lv_anchor_count
-          }" href="#diff_{
-          lv_anchor_count + 1
-          }">{ <ls_diff>-result }</a>|.
-      ELSE.
-        CLEAR lv_href.
-      ENDIF.
-
-      lv_html = lv_html &&
-        '<tr>'                                                        && gc_newline &&
-        '<td>' && <ls_diff>-local_line && '</td>'                     && gc_newline &&
-        '<td' && lv_clocal && '><pre>' && lv_local && '</pre></td>'   && gc_newline &&
-        '<td>&nbsp;' && lv_href && '&nbsp;</td>'                      && gc_newline &&
-        '<td>' && <ls_diff>-remote_line && '</td>'                    && gc_newline &&
-        '<td' && lv_cremote && '><pre>' && lv_remote && '</pre></td>' && gc_newline &&
-        '</tr>' && lv_break                                           && gc_newline.
-    ENDLOOP.
-
-    rv_html = lv_html && gc_newline &&
-      '</table>'      && gc_newline &&
-      '</div>'        && gc_newline &&
-      lcl_gui=>footer( ).
+    rv_html = lo_html->mv_html.
 
   ENDMETHOD.