diff --git a/src/zabapgit_page.prog.abap b/src/zabapgit_page.prog.abap
index 14a0523ee..7655c55da 100644
--- a/src/zabapgit_page.prog.abap
+++ b/src/zabapgit_page.prog.abap
@@ -43,6 +43,11 @@ CLASS lcl_gui_page_super DEFINITION ABSTRACT.
       RETURNING VALUE(ro_html)        TYPE REF TO lcl_html_helper
       RAISING   lcx_exception.
 
+    METHODS render_item_state
+        IMPORTING iv1            TYPE char1
+                  iv2            TYPE char1
+        RETURNING VALUE(rv_html) TYPE string.
+
     METHODS render_branch_span
       IMPORTING iv_branch             TYPE string
                 io_repo               TYPE REF TO lcl_repo_online
@@ -137,6 +142,42 @@ CLASS lcl_gui_page_super IMPLEMENTATION.
 
   ENDMETHOD.
 
+  METHOD render_item_state.
+
+    FIELD-SYMBOLS <state> TYPE char1.
+
+    rv_html = '<span class="state-block">'.
+
+    DO 2 TIMES.
+      CASE sy-index.
+        WHEN 1.
+          ASSIGN iv1 TO <state>.
+        WHEN 2.
+          ASSIGN iv2 TO <state>.
+      ENDCASE.
+
+      CASE <state>.
+        WHEN gc_state-unchanged.  "None or unchanged
+          IF iv1 = gc_state-added OR iv2 = gc_state-added.
+            rv_html = rv_html && |<span class="none" title="Not exists">X</span>|.
+          ELSE.
+            rv_html = rv_html && |<span class="none" title="No changes">&nbsp;</span>|.
+          ENDIF.
+        WHEN gc_state-modified.   "Changed
+          rv_html = rv_html && '<span class="changed" title="Modified">M</span>'.
+        WHEN gc_state-added.      "Added new
+          rv_html = rv_html && '<span class="added" title="Added new">A</span>'.
+        WHEN gc_state-mixed.      "Multiple changes (multifile)
+          rv_html = rv_html && '<span class="mixed" title="Multiple changes">&#x25A0;</span>'.
+        WHEN gc_state-deleted.    "Deleted
+          rv_html = rv_html && '<span class="deleted" title="Deleted">D</span>'.
+      ENDCASE.
+    ENDDO.
+
+    rv_html = rv_html && '</span>'.
+
+  ENDMETHOD. "render_item_state
+
   METHOD render_branch_span.
     DATA: lv_text  TYPE string,
           lv_class TYPE string.
diff --git a/src/zabapgit_page_diff.prog.abap b/src/zabapgit_page_diff.prog.abap
index 0ec2b1dbc..9ddae6538 100644
--- a/src/zabapgit_page_diff.prog.abap
+++ b/src/zabapgit_page_diff.prog.abap
@@ -8,6 +8,8 @@ CLASS lcl_gui_page_diff DEFINITION FINAL INHERITING FROM lcl_gui_page_super.
 
     TYPES: BEGIN OF ty_file_diff,
              filename TYPE string,
+             lstate   TYPE char1,
+             rstate   TYPE char1,
              o_diff   TYPE REF TO lcl_diff,
            END OF ty_file_diff,
            tt_file_diff TYPE STANDARD TABLE OF ty_file_diff.
@@ -33,11 +35,16 @@ CLASS lcl_gui_page_diff DEFINITION FINAL INHERITING FROM lcl_gui_page_super.
     METHODS render_lines
       IMPORTING is_diff        TYPE ty_file_diff
       RETURNING VALUE(ro_html) TYPE REF TO lcl_html_helper.
+    METHODS get_line_hl
+      IMPORTING iv_lstate TYPE char1
+                iv_rstate TYPE char1
+                iv_result TYPE lcl_diff=>ty_diff-result
+      EXPORTING ev_lattr  TYPE string
+                ev_rattr  TYPE string.
     METHODS append_diff
       IMPORTING it_remote   TYPE ty_files_tt
                 it_local    TYPE ty_files_item_tt
-                iv_path     TYPE string
-                iv_filename TYPE string
+                is_status   TYPE ty_result
       RAISING   lcx_exception.
 
 ENDCLASS. "lcl_gui_page_diff
@@ -46,12 +53,12 @@ CLASS lcl_gui_page_diff IMPLEMENTATION.
 
   METHOD constructor.
 
-    DATA: lt_remote  TYPE ty_files_tt,
-          lt_local   TYPE ty_files_item_tt,
-          lt_results TYPE ty_results_tt,
-          lo_repo    TYPE REF TO lcl_repo_online.
+    DATA: lt_remote TYPE ty_files_tt,
+          lt_local  TYPE ty_files_item_tt,
+          lt_status TYPE ty_results_tt,
+          lo_repo   TYPE REF TO lcl_repo_online.
 
-    FIELD-SYMBOLS: <ls_result> LIKE LINE OF lt_results.
+    FIELD-SYMBOLS: <ls_status> LIKE LINE OF lt_status.
 
     super->constructor( ).
 
@@ -60,42 +67,39 @@ CLASS lcl_gui_page_diff IMPLEMENTATION.
     lo_repo  ?= lcl_app=>repo_srv( )->get( iv_key ).
     lt_remote = lo_repo->get_files_remote( ).
     lt_local  = lo_repo->get_files_local( ).
+    lt_status = lo_repo->status( ).
 
     IF is_file IS NOT INITIAL.
 
+      READ TABLE lt_status ASSIGNING <ls_status>
+        WITH KEY path = is_file-path filename = is_file-filename.
+
       append_diff( it_remote   = lt_remote
                    it_local    = lt_local
-                   iv_path     = is_file-path
-                   iv_filename = is_file-filename ).
+                   is_status   = <ls_status> ).
 
     ELSEIF is_object IS NOT INITIAL.
 
-      lt_results = lo_repo->status( ).
-
-      LOOP AT lt_results ASSIGNING <ls_result>
+      LOOP AT lt_status ASSIGNING <ls_status>
         WHERE obj_type = is_object-obj_type
         AND   obj_name = is_object-obj_name
         AND   match IS INITIAL.
 
         append_diff( it_remote   = lt_remote
                      it_local    = lt_local
-                     iv_path     = <ls_result>-path
-                     iv_filename = <ls_result>-filename ).
+                     is_status   = <ls_status> ).
 
       ENDLOOP.
 
     ELSE. " For the whole repo
 
-      lt_results = lo_repo->status( ).
-
-      LOOP AT lt_results ASSIGNING <ls_result>
+      LOOP AT lt_status ASSIGNING <ls_status>
         WHERE obj_type IS NOT INITIAL
         AND   match IS INITIAL.
 
         append_diff( it_remote   = lt_remote
                      it_local    = lt_local
-                     iv_path     = <ls_result>-path
-                     iv_filename = <ls_result>-filename ).
+                     is_status   = <ls_status> ).
 
       ENDLOOP.
 
@@ -118,21 +122,21 @@ CLASS lcl_gui_page_diff IMPLEMENTATION.
                    <ls_local>  LIKE LINE OF it_local.
 
     READ TABLE it_remote ASSIGNING <ls_remote>
-      WITH KEY filename = iv_filename
-               path     = iv_path.
+      WITH KEY filename = is_status-filename
+               path     = is_status-path.
     IF sy-subrc <> 0.
       ASSIGN ls_r_dummy TO <ls_remote>.
     ENDIF.
 
     READ TABLE it_local ASSIGNING <ls_local>
-      WITH KEY file-filename = iv_filename
-               file-path     = iv_path.
+      WITH KEY file-filename = is_status-filename
+               file-path     = is_status-path.
     IF sy-subrc <> 0.
       ASSIGN ls_l_dummy TO <ls_local>.
     ENDIF.
 
     IF <ls_local> IS INITIAL AND <ls_remote> IS INITIAL.
-      lcx_exception=>raise( |DIFF: file not found { iv_filename }| ).
+      lcx_exception=>raise( |DIFF: file not found { is_status-filename }| ).
     ENDIF.
 
     CREATE OBJECT ls_diff_file-o_diff
@@ -140,96 +144,138 @@ CLASS lcl_gui_page_diff IMPLEMENTATION.
         iv_local  = <ls_local>-file-data
         iv_remote = <ls_remote>-data.
 
-    ls_diff_file-filename = iv_filename.
+    ls_diff_file-filename = is_status-filename.
+    ls_diff_file-lstate   = is_status-lstate.
+    ls_diff_file-rstate   = is_status-rstate.
     APPEND ls_diff_file TO mt_diff_files.
 
   ENDMETHOD.  "append_diff
 
   METHOD styles.
-    DATA lo_html TYPE REF TO lcl_html_helper.
-    CREATE OBJECT lo_html.
 
-    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( '  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( '  border-top: 1px solid #DDD;' ).        "#EC NOTEXT
-    lo_html->add( '  border-bottom: 1px solid #DDD;' ).     "#EC NOTEXT
-    lo_html->add( '}' ).                                    "#EC NOTEXT
+    CREATE OBJECT ro_html.
+
+    _add '/* DIFF */'.                           "#EC NOTEXT
+    _add 'div.diff {'.                           "#EC NOTEXT
+    _add '  background-color: #f2f2f2;'.         "#EC NOTEXT
+    _add '  padding: 0.7em    '.                 "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add 'div.diff_head {'.                      "#EC NOTEXT
+    _add '  padding-bottom: 0.7em;'.             "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add 'span.diff_name {'.                     "#EC NOTEXT
+    _add '  padding-left: 0.5em;'.               "#EC NOTEXT
+    _add '  color: grey;'.                       "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add 'span.diff_name strong {'.              "#EC NOTEXT
+    _add '  color: #333;'.                       "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add 'span.diff_banner {'.                   "#EC NOTEXT
+    _add '  border-style: solid;'.               "#EC NOTEXT
+    _add '  border-width: 1px;'.                 "#EC NOTEXT
+    _add '  border-radius: 3px;'.                "#EC NOTEXT
+    _add '  padding-left: 0.3em;'.               "#EC NOTEXT
+    _add '  padding-right: 0.3em;'.              "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add '.diff_ins {'.                          "#EC NOTEXT
+    _add '  border-color: #7bea7b;'.             "#EC NOTEXT
+    _add '  background-color: #d3f8d3;'.         "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add '.diff_del {'.                          "#EC NOTEXT
+    _add '  border-color: #ff667d;'.             "#EC NOTEXT
+    _add '  background-color: #ffccd4;'.         "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add '.diff_upd {'.                          "#EC NOTEXT
+    _add '  border-color: #dada00;'.             "#EC NOTEXT
+    _add '  background-color: #ffffcc;'.         "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add 'div.diff_content {'.                   "#EC NOTEXT
+    _add '  background: #fff;'.                  "#EC NOTEXT
+    _add '  border-top: 1px solid #DDD;'.        "#EC NOTEXT
+    _add '  border-bottom: 1px solid #DDD;'.     "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+
+    _add 'div.diff_head span.state-block {'.
+    _add '  margin-left: 0.5em;'.
+    _add '  font-family: Consolas, Lucida Console, Courier, monospace;'.
+    _add '  display: inline-block;'.
+    _add '  text-align: center;'.
+    _add '}'.
+    _add 'div.diff_head span.state-block span {'.
+    _add '  display: inline-block;'.
+    _add '  padding: 0px 4px;'.
+    _add '  border: 1px solid #000;'.
+    _add '}'.
+    _add 'div.diff_head span.state-block span.added {'.
+    _add '  background-color: #69ad74; '.
+    _add '  border-color: #579e64;'.
+    _add '  color: white;'.
+    _add '}'.
+    _add 'div.diff_head span.state-block span.changed {'.
+    _add '  background-color: #e0c150;'.
+    _add '  border-color: #d4af25;'.
+    _add '  color: white;'.
+    _add '}'.
+    _add 'div.diff_head span.state-block span.mixed {'.
+    _add '  background-color: #e0c150;'.
+    _add '  border-color: #579e64;'.
+    _add '  color: #69ad74;'.
+    _add '}'.
+    _add 'div.diff_head span.state-block span.deleted {'.
+    _add '  background-color: #c76861;'.
+    _add '  border-color: #b8605a;'.
+    _add '  color: white;'.
+    _add '}'.
+    _add 'div.diff_head span.state-block span.none {'.
+    _add '  background-color: #e8e8e8;'.
+    _add '  border-color: #dbdbdb;'.
+    _add '  color: #c8c8c8;'.
+    _add '}'.
 
     " Table part
-    lo_html->add( '/* DIFF TABLE */' ).                     "#EC NOTEXT
-    lo_html->add( 'table.diff_tab {' ).                     "#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: #EEE;' ).                       "#EC NOTEXT
-    lo_html->add( '  background-color: #BBB;' ).            "#EC NOTEXT
-    lo_html->add( '  text-align: left;' ).                  "#EC NOTEXT
-    lo_html->add( '  font-weight: bold;' ).                 "#EC NOTEXT
-    lo_html->add( '  padding-left: 0.5em;' ).               "#EC NOTEXT
-    lo_html->add( '  font-size: 9pt;' ).                    "#EC NOTEXT
-    lo_html->add( '}' ).                                    "#EC NOTEXT
-    lo_html->add( 'table.diff_tab td {' ).                  "#EC NOTEXT
-    lo_html->add( '  color: #444;' ).                       "#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: 10pt;' ).                   "#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( '  text-align: center !important;' ).     "#EC NOTEXT
-    lo_html->add( '  white-space: nowrap;' ).               "#EC NOTEXT
-    lo_html->add( '}' ).                                    "#EC NOTEXT
-    lo_html->add( 'table.diff_tab tr.diff_nav_line {').     "#EC NOTEXT
-    lo_html->add( '  background-color: #edf2f9;').          "#EC NOTEXT
-    lo_html->add( '}').                                     "#EC NOTEXT
-    lo_html->add( 'table.diff_tab tr.diff_nav_line td {').  "#EC NOTEXT
-    lo_html->add( '  color: #ccc;').                        "#EC NOTEXT
-    lo_html->add( '}').                                     "#EC NOTEXT
-    lo_html->add( 'table.diff_tab code {' ).                "#EC NOTEXT
-    lo_html->add( '  font-family: inherit;' ).              "#EC NOTEXT
-    lo_html->add( '  white-space: pre;' ).                  "#EC NOTEXT
-    lo_html->add( '}' ).                                    "#EC NOTEXT
+    _add '/* DIFF TABLE */'.                     "#EC NOTEXT
+    _add 'table.diff_tab {'.                     "#EC NOTEXT
+    _add '  font-family: Consolas, Courier, monospace;'. "#EC NOTEXT
+    _add '  font-size: 10pt;'.                   "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add 'table.diff_tab td,th {'.                  "#EC NOTEXT
+    _add '  color: #444;'.                       "#EC NOTEXT
+    _add '  padding-left: 0.5em;'.               "#EC NOTEXT
+    _add '  padding-right: 0.5em;'.              "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add 'table.diff_tab th {'.                  "#EC NOTEXT
+    _add '  text-align: left;'.                  "#EC NOTEXT
+    _add '  font-weight: normal;'.               "#EC NOTEXT
+    _add '  padding-top: 3px;'.                  "#EC NOTEXT
+    _add '  padding-bottom: 3px;'.               "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add 'table.diff_tab thead.header th {'.     "#EC NOTEXT
+    _add '  color: #EEE;'.                       "#EC NOTEXT
+    _add '  background-color: #BBB;'.            "#EC NOTEXT
+    _add '  text-align: left;'.                  "#EC NOTEXT
+    _add '  font-weight: bold;'.                 "#EC NOTEXT
+    _add '  padding-left: 0.5em;'.               "#EC NOTEXT
+    _add '  font-size: 9pt;'.                    "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add 'table.diff_tab thead.nav_line {'.      "#EC NOTEXT
+    _add '  background-color: #edf2f9;'.         "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add 'table.diff_tab thead.nav_line th {'.   "#EC NOTEXT
+    _add '  color: #bbb;'.                       "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add 'table.diff_tab td.num, th.num {'.      "#EC NOTEXT
+    _add '  text-align: right;'.                 "#EC NOTEXT
+    _add '  color: #ccc;'.                       "#EC NOTEXT
+    _add '  border-left: 1px solid #eee;'.       "#EC NOTEXT
+    _add '  border-right: 1px solid #eee;'.      "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add 'table.diff_tab code {'.                "#EC NOTEXT
+    _add '  font-family: inherit;'.              "#EC NOTEXT
+    _add '  white-space: pre;'.                  "#EC NOTEXT
+    _add '}'.                                    "#EC NOTEXT
+    _add 'table.diff_tab tbody tr:first-child td { padding-top: 0.5em; }'.
+    _add 'table.diff_tab tbody tr:last-child td { padding-bottom: 0.5em; }'.
 
-    ro_html = lo_html.
   ENDMETHOD.
 
   METHOD render_head.
@@ -247,6 +293,7 @@ CLASS lcl_gui_page_diff IMPLEMENTATION.
     lo_html->add( '<span class="diff_name">' ).             "#EC NOTEXT
     lo_html->add( |{ is_diff-filename }| ).
     lo_html->add( '</span>' ).                              "#EC NOTEXT
+    lo_html->add( render_item_state( iv1 = is_diff-lstate iv2 = is_diff-rstate ) ).
     lo_html->add( '</div>' ).                               "#EC NOTEXT
 
     ro_html = lo_html.
@@ -262,12 +309,12 @@ CLASS lcl_gui_page_diff IMPLEMENTATION.
     " Content
     ro_html->add( '<div class="diff_content">' ).           "#EC NOTEXT
     ro_html->add( '<table width="100%" class="diff_tab">' ). "#EC NOTEXT
-    ro_html->add(   '<tr>' ).                               "#EC NOTEXT
+    ro_html->add(   '<thead class="header"><tr>' ).         "#EC NOTEXT
     ro_html->add(   '<th class="num"></th>' ).              "#EC NOTEXT
     ro_html->add(   '<th>LOCAL</th>' ).                     "#EC NOTEXT
     ro_html->add(   '<th class="num"></th>' ).              "#EC NOTEXT
     ro_html->add(   '<th>REMOTE</th>' ).                    "#EC NOTEXT
-    ro_html->add(   '</tr>' ).                              "#EC NOTEXT
+    ro_html->add(   '</tr></thead>' ).                      "#EC NOTEXT
     ro_html->add( render_lines( is_diff ) ).
     ro_html->add( '</table>' ).                             "#EC NOTEXT
     ro_html->add( '</div>' ).                               "#EC NOTEXT
@@ -281,8 +328,8 @@ CLASS lcl_gui_page_diff IMPLEMENTATION.
     DATA: lt_diffs       TYPE lcl_diff=>ty_diffs_tt,
           lv_local       TYPE string,
           lv_remote      TYPE string,
-          lv_attr_local  TYPE string,
-          lv_attr_remote TYPE string,
+          lv_lattr       TYPE string,
+          lv_rattr       TYPE string,
           lv_beacon      TYPE string,
           lv_insert_nav  TYPE abap_bool.
 
@@ -305,38 +352,60 @@ CLASS lcl_gui_page_diff IMPLEMENTATION.
           lv_beacon = '---'.
         ENDIF.
 
-        ro_html->add( '<tr class="diff_nav_line">').
-        ro_html->add( '<td class="num"></td>' ).
-        ro_html->add( |<td colspan="3">@@ { <ls_diff>-local_line } @@ { lv_beacon }</td>| ).
-        ro_html->add( '</tr>' ).
+        ro_html->add( '<thead class="nav_line"><tr>').
+        ro_html->add( '<th class="num"></th>' ).
+        ro_html->add( |<th colspan="3">@@ { <ls_diff>-local_line } @@ { lv_beacon }</th>| ).
+        ro_html->add( '</tr></thead>' ).
         lv_insert_nav = abap_false.
       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 ).
 
-      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_upd"'.             "#EC NOTEXT
-          lv_attr_remote = ' class="diff_upd"'.             "#EC NOTEXT
-      ENDCASE.
+      get_line_hl( EXPORTING iv_lstate = is_diff-lstate
+                             iv_rstate = is_diff-rstate
+                             iv_result = <ls_diff>-result
+                   IMPORTING ev_lattr  = lv_lattr
+                             ev_rattr  = lv_rattr ).
 
       ro_html->add( '<tr>' ).                               "#EC NOTEXT
       ro_html->add( |<td class="num">{ <ls_diff>-local_line }</td>| ). "#EC NOTEXT
-      ro_html->add( |<td{ lv_attr_local }><code>{ lv_local }</code></td>| ). "#EC NOTEXT
+      ro_html->add( |<td{ lv_lattr }><code>{ lv_local }</code></td>| ). "#EC NOTEXT
       ro_html->add( |<td class="num">{ <ls_diff>-remote_line }</td>| ). "#EC NOTEXT
-      ro_html->add( |<td{ lv_attr_remote }><code>{ lv_remote }</code></td>| ). "#EC NOTEXT
+      ro_html->add( |<td{ lv_rattr }><code>{ lv_remote }</code></td>| ). "#EC NOTEXT
       ro_html->add( '</tr>' ).                              "#EC NOTEXT
 
     ENDLOOP.
 
   ENDMETHOD.
 
+  METHOD get_line_hl.
+
+    CLEAR: ev_lattr, ev_rattr. " Class for changed lines
+
+    IF iv_lstate IS NOT INITIAL AND iv_rstate IS NOT INITIAL AND iv_result IS NOT INITIAL
+      OR iv_result = lcl_diff=>c_diff-update.
+      " Both file changed ? Or line updated ? - All yellow
+      ev_lattr = ' class="diff_upd"'.             "#EC NOTEXT
+      ev_rattr = ' class="diff_upd"'.             "#EC NOTEXT
+    ELSEIF iv_lstate IS NOT INITIAL. " Changed locally
+      CASE iv_result.
+        WHEN lcl_diff=>c_diff-insert.
+          ev_lattr = ' class="diff_ins"'.            "#EC NOTEXT
+        WHEN lcl_diff=>c_diff-delete.
+          ev_rattr = ' class="diff_del"'.             "#EC NOTEXT
+      ENDCASE.
+    ELSEIF iv_rstate IS NOT INITIAL. " Changed remotely
+      CASE iv_result.
+        WHEN lcl_diff=>c_diff-insert.
+          ev_lattr = ' class="diff_del"'.            "#EC NOTEXT
+        WHEN lcl_diff=>c_diff-delete.
+          ev_rattr = ' class="diff_ins"'.             "#EC NOTEXT
+      ENDCASE.
+    ENDIF.
+
+  ENDMETHOD.  " get_line_hl.
+
   METHOD lif_gui_page~render.
 
     DATA ls_diff_file LIKE LINE OF mt_diff_files.
diff --git a/src/zabapgit_view_repo.prog.abap b/src/zabapgit_view_repo.prog.abap
index abe4c4ec3..da77889f3 100644
--- a/src/zabapgit_view_repo.prog.abap
+++ b/src/zabapgit_view_repo.prog.abap
@@ -289,10 +289,6 @@ CLASS lcl_gui_view_repo_content DEFINITION FINAL INHERITING FROM lcl_gui_page_su
       get_item_icon
         IMPORTING is_item        TYPE lcl_repo_content_browser=>ty_repo_item
         RETURNING VALUE(rv_html) TYPE string,
-      render_state
-        IMPORTING iv1            TYPE char1
-                  iv2            TYPE char1
-        RETURNING VALUE(rv_html) TYPE string,
       render_empty_package
         RETURNING VALUE(rv_html) TYPE string,
       render_parent_dir
@@ -673,7 +669,7 @@ CLASS lcl_gui_view_repo_content IMPLEMENTATION.
 
       ro_html->add( '<div>' ).
       ro_html->add( |<span class="grey">{ is_item-changes } changes</span>| ).
-      ro_html->add( render_state( iv1 = is_item-lstate iv2 = is_item-rstate ) ).
+      ro_html->add( render_item_state( iv1 = is_item-lstate iv2 = is_item-rstate ) ).
       ro_html->add( '</div>' ).
 
     ELSEIF is_item-changes > 0.
@@ -687,7 +683,7 @@ CLASS lcl_gui_view_repo_content IMPLEMENTATION.
         ro_html->add( '<div>' ).
         ro_html->add_anchor( iv_txt = |view diff ({ is_item-changes })|
                              iv_act = |{ gc_action-go_diff }?{ lv_difflink }| ).
-        ro_html->add( render_state( iv1 = is_item-lstate iv2 = is_item-rstate ) ).
+        ro_html->add( render_item_state( iv1 = is_item-lstate iv2 = is_item-rstate ) ).
         ro_html->add( '</div>' ).
 
       ELSE.
@@ -701,7 +697,7 @@ CLASS lcl_gui_view_repo_content IMPLEMENTATION.
             ro_html->add_anchor(
               iv_txt = 'view diff'
               iv_act = |{ gc_action-go_diff }?{ lv_difflink }| ).
-            ro_html->add( render_state( iv1 = ls_file-lstate iv2 = ls_file-rstate ) ).
+            ro_html->add( render_item_state( iv1 = ls_file-lstate iv2 = ls_file-rstate ) ).
           ELSE.
             ro_html->add( '&nbsp;' ).
           ENDIF.
@@ -714,42 +710,6 @@ CLASS lcl_gui_view_repo_content IMPLEMENTATION.
 
   ENDMETHOD.  "render_item_command
 
-  METHOD render_state.
-
-    FIELD-SYMBOLS <state> TYPE char1.
-
-    rv_html = '<span class="state-block">'.
-
-    DO 2 TIMES.
-      CASE sy-index.
-        WHEN 1.
-          ASSIGN iv1 TO <state>.
-        WHEN 2.
-          ASSIGN iv2 TO <state>.
-      ENDCASE.
-
-      CASE <state>.
-        WHEN gc_state-unchanged.  "None or unchanged
-          IF iv1 = gc_state-added OR iv2 = gc_state-added.
-            rv_html = rv_html && |<span class="none" title="Not exists">X</span>|.
-          ELSE.
-            rv_html = rv_html && |<span class="none" title="No changes">&nbsp;</span>|.
-          ENDIF.
-        WHEN gc_state-modified.   "Changed
-          rv_html = rv_html && '<span class="changed" title="Modified">M</span>'.
-        WHEN gc_state-added.      "Added new
-          rv_html = rv_html && '<span class="added" title="Added new">A</span>'.
-        WHEN gc_state-mixed.      "Multiple changes (multifile)
-          rv_html = rv_html && '<span class="mixed" title="Multiple changes">&#x25A0;</span>'.
-        WHEN gc_state-deleted.    "Deleted
-          rv_html = rv_html && '<span class="deleted" title="Deleted">D</span>'.
-      ENDCASE.
-    ENDDO.
-
-    rv_html = rv_html && '</span>'.
-
-  ENDMETHOD. "render_state
-
   METHOD render_empty_package.
 
     rv_html = '<tr class="unsupported"><td class="paddings">'