diff --git a/src/data/Web_Visually.css b/src/data/Web_Visually.css
index 5f2e9db7e..67ecb9937 100644
--- a/src/data/Web_Visually.css
+++ b/src/data/Web_Visually.css
@@ -38,7 +38,6 @@ brown light     #C1B398
 gray            #696969
 green           #6AF364
 green lighter   #D8F3D6
-green lightest  #5D835F
 
 ===== Ancestor Graph Color Scheme =====
 Males		#E5F2FE
@@ -69,6 +68,7 @@ table {
     border-collapse:collapse;
 }
 th {
+    color:#000;
     font-weight:bold;
     text-align:left;
     padding:1px 3em 1px 0.5em;
@@ -86,6 +86,7 @@ img {
 }
 .content {
     background-color:#FFF;
+    color:#000;
 }
 .content div.snapshot {
     float:right;
@@ -123,7 +124,7 @@ h3 {
     text-align:left;
     margin:0;
     padding:.5em 20px .2em 20px;
-    border:double 4px #453619;
+    border-bottom:double 4px #453619;
 }
 h4 {
     font:normal 1.2em/1.2em serif;
@@ -242,6 +243,7 @@ p#user_header {
     border-bottom:solid 1px #453619;
 }
 #navigation ul li#CurrentSection a, #subnavigation ul li#CurrentSection a {
+    font-weight:bold;
     font-size:19px;
     margin-top:-6px;
     padding-top:11px;
@@ -264,7 +266,7 @@ table.infolist {
     width:100%;
     margin:0;
     padding:0;
-    background-color:#D8F3D6;
+    background-color:#FFF;
 }
 table.infolist tr th {
     font:normal 1.1em/1.2em serif;
@@ -540,7 +542,7 @@ table.individuallist tbody tr td.ColumnName a:hover {
     padding-bottom:0;
     margin-top:1.5em;
     margin-bottom:0;
-    background-color:#D8F3D6;
+    background-color:#FFF;
     border-style:solid;
     border-width:8px 0 0 0;
     border-color:#453619;
@@ -573,7 +575,7 @@ table.individuallist tbody tr td.ColumnName a:hover {
     margin-right:.4em;
 }
 #streetaddress {
-    width:70%;
+    width:80%;
 }
 #city:after {
     content:",";
@@ -609,7 +611,7 @@ table.individuallist tbody tr td.ColumnName a:hover {
 }
 div.subsection{
     padding-bottom:.5em;
-    background-color:#D8F3D6;
+    background-color:#FFF;
 }
 div.subsection h4 {
     margin-bottom:.5em;
@@ -811,6 +813,7 @@ div#pedigree {
 }
 #pedigree a {
     text-decoration:none;
+    color:#000;
 }
 #pedigree a:hover {
     text-decoration:underline;
@@ -841,7 +844,7 @@ div#pedigree {
 .spouse a {
     font-weight:normal;
     font-style:normal;
-    color:#6AF364;
+    color:#000;
 }
 .spouse:before {
     content: "+ ";
@@ -880,7 +883,7 @@ div#pedigree {
     padding:5px 20px 7px 20px;
     margin-top:-25px;
     margin-left:16px;
-    background-color:#D8F3D6;
+    background-color:#FFF;
     border:solid 1px #453619;
 }
 #treeContainer div.boxbg a:hover {
@@ -1083,7 +1086,7 @@ body#WebCal {
 }
 .calendar tfoot tr td {
     vertical-align:middle;
-    color:#542;
+    color:#453619;
     background-color:#D8F3D6;
 }
 
diff --git a/src/plugins/webreport/NarrativeWeb.py b/src/plugins/webreport/NarrativeWeb.py
index 4a0d5c4a1..ee62b598a 100644
--- a/src/plugins/webreport/NarrativeWeb.py
+++ b/src/plugins/webreport/NarrativeWeb.py
@@ -101,8 +101,6 @@ from gen.lib.eventroletype import EventRoleType
 #
 #------------------------------------------------------------------------
 _INCLUDE_LIVING_VALUE = 99 # Arbitrary number
-_NARRATIVESCREEN = "narrative-screen.css"
-_NARRATIVEPRINT = "narrative-print.css"
 _NAME_COL  = 3
 
 _MAX_IMG_WIDTH = 800   # resize images that are wider than this
@@ -242,7 +240,6 @@ def name_to_md5(text):
     """This creates an MD5 hex string to be used as filename."""
     return md5(text).hexdigest()
 
-
 class BasePage:
     """
     This is the base class to write certain HTML pages.
@@ -277,6 +274,49 @@ class BasePage:
         self.linkhome = options['linkhome']
         self.use_gallery = options['gallery']
 
+    def alphabet_navigation(self, of, ind_list):
+        """
+        Will create the alphabetical navigation bar...
+        """
+
+        def get_alpha_list(ind_list):
+            """ Will produce the active letters in the alphabet """
+
+            alpha_list = []
+            for person_handle in ind_list:
+                person = self.report.database.get_person_from_handle(person_handle)
+                primary_name = person.get_primary_name()
+
+                alpha_name = primary_name.get_surname()
+
+                if alpha_name:
+                    alpha_ltr = alpha_name[0].upper()
+                    if alpha_ltr in alpha_list:
+                        pass
+                    else:
+                        alpha_list.append(alpha_ltr)
+
+            if len(alpha_list) > 1:
+                alpha_list.sort()
+            return alpha_list
+
+        alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
+                    'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+
+        alpha_list = get_alpha_list(ind_list)
+
+        of.write('\t<div id="navigation">\n')
+        of.write('\t\t<ul>\n')
+        for ltr in alphabet:
+            of.write('\t\t\t<li>')
+            if ltr in alpha_list:
+                of.write('<a href="#%s">%s</a>' % (_(ltr), _(ltr)))
+            else:
+                of.write(' %s ' % _(ltr))
+            of.write(' |</li>\n')
+        of.write('\t\t</ul>\n')
+        of.write('\t</div>\n')   
+
     def write_footer(self, of):
 
         of.write('</div>\n')          # Terminate div_content
@@ -732,6 +772,9 @@ class IndividualListPage(BasePage):
         showspouse = report.options['showspouse']
         showparents = report.options['showparents']
 
+        # begin alphabetical navigation
+        self.alphabet_navigation(of, person_handle_list) 
+
         of.write('\t<h2>%s</h2>\n' % _('Individuals'))
         of.write('\t<p id="description">%s</p>\n' % msg)
         of.write('\t<table class="infolist individuallist">\n')
@@ -766,7 +809,12 @@ class IndividualListPage(BasePage):
                 # surname column
                 if first:
                     of.write('\t\t<tr class="BeginSurname">\n')
-                    of.write('\t\t\t<td class="ColumnSurname"><a name="%s">%s</a>' % (name_to_md5(surname), surname))
+                    if surname:
+                        of.write('\t\t\t<td class="ColumnSurname"><a name="%s">%s</a>' 
+                            % (surname[0].upper(), surname))
+                    else:
+                        of.write('\t\t\t<td class="ColumnSurname"><a name="%s">%s</a>' 
+                            % (name_to_md5(surname), surname))
                 else:
                     of.write('\t\t<tr>\n')
                     of.write('\t\t\t<td class="ColumnSurname">&nbsp;')
@@ -1340,6 +1388,9 @@ class SurnameListPage(BasePage):
             self.write_header(of, _('Surnames by person count'), content_divid='Surnames')
             of.write('\t<h2>%s</h2>\n' % _('Surnames by person count'))
 
+        # beginning of Alphabetical Navigation
+        self.alphabet_navigation(of, person_handle_list)
+
         of.write('\t<p id="description">%s</p>\n' % _(
             'This page contains an index of all the '
             'surnames in the database. Selecting a link '
@@ -1418,27 +1469,6 @@ class SurnameListPage(BasePage):
             of.write('&nbsp;(%d)' % opt_val)
         of.write('</a>')
 
-    def get_alpha_list(self, ind_list):
-        """
-        Will get the alphabetical list for the surname list page
-        """
-
-        alpha_list = []
-        for person_handle in ind_list:
-            person = self.report.database.get_person_from_handle(person_handle)
-            primary_name = person.get_primary_name()
-            surname = primary_name.get_surname()
-
-            if surname:
-                alpha_ltr = surname[0]
-                if alpha_ltr in alpha_list:
-                    pass
-                else:
-                    alpha_list.append(alpha_ltr)
-
-        alpha_list.sort()
-        return alpha_list
-
 class IntroductionPage(BasePage):
 
     def __init__(self, report, title):