diff --git a/GanjooRazor/Pages/_GanjoorPagePartial.cshtml b/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
index f45be562..c0a22fcc 100644
--- a/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
+++ b/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
@@ -136,7 +136,9 @@
                                 </div>
                                 <div style="width:164px;margin:auto" id="page-hierarchy">
                                     @{
-                                        <a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Poet.FullUrl)">@Html.Raw(Model.GanjoorPage.PoetOrCat.Poet.Name)</a><span> &raquo;</span>
+                                        <a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Poet.FullUrl)">@Html.Raw(Model.GanjoorPage.PoetOrCat.Poet.Name)</a>
+
+                                        <span> &raquo;</span>
                                         <h2><a href="@Html.Raw(Model.GanjoorPage.FullUrl)">@Html.Raw(Model.GanjoorPage.Title)</a></h2>
                                     }
                                 </div>
@@ -151,7 +153,9 @@
                                     @{
                                         foreach (var gran in Model.GanjoorPage.PoetOrCat.Cat.Ancestors)
                                         {
-                                            <a href="@Html.Raw(gran.FullUrl)">@Html.Raw(gran.Title)</a><span> &raquo;</span>
+                                            <a href="@Html.Raw(gran.FullUrl)">@Html.Raw(gran.Title)</a>
+
+                                            <span> &raquo;</span>
                                         }
 
                                         @if (!Model.IsPoemPage && !Model.IsCatPage && !Model.IsPoetPage)
@@ -168,7 +172,9 @@
                                         {
                                             @if (Model.IsPoemPage)
                                             {
-                                                <a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.FullUrl)">@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.Title)</a><span> &raquo;</span>
+                                                <a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.FullUrl)">@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.Title)</a>
+
+                                                <span> &raquo;</span>
                                                 <h2>
                                                     <a href="@Html.Raw(Model.GanjoorPage.Poem.FullUrl)" rel="bookmark">
                                                         @Html.Raw(Model.GanjoorPage.Poem.Title)
@@ -191,15 +197,7 @@
                         @Html.Raw(Model.GanjoorPage.HtmlText)
                     }
                 </article>
-                @{
-                    if (Model.IsPoemPage)
-                    {
-                        if (Model.GanjoorPage.Poem.Recitations.Length > 0)
-                        {
-                            <partial name="_AudioPlayerPartial" model=Model.GetRecitationsModel(Model.GanjoorPage.Poem.Recitations) />
-                        }
-                    }
-                }
+
                 @{
                     if (Model.IsCatPage)
                     {
@@ -209,13 +207,17 @@
                                 <div class="navleft">
                                     @if (Model.GanjoorPage.PoetOrCat.Cat.Next != null)
                                     {
-                                        <a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.Next.FullUrl)">@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.Next.Title)</a><span> &raquo;</span>
+                                        <a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.Next.FullUrl)">@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.Next.Title)</a>
+
+                                        <span> &raquo;</span>
                                     }
                                 </div>
                                 <div class="navright">
                                     @if (Model.GanjoorPage.PoetOrCat.Cat.Previous != null)
                                     {
-                                        <span>&laquo; </span><a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.Previous.FullUrl)">@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.Previous.Title)</a>
+                                        <span>&laquo; </span>
+
+                                        <a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.Previous.FullUrl)">@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.Previous.Title)</a>
                                     }
                                 </div>
                             </div>
@@ -231,23 +233,31 @@
                                 <div class="navleft">
                                     @if (Model.GanjoorPage.Poem.Next != null)
                                     {
-                                        <a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.FullUrl + "/" + Model.GanjoorPage.Poem.Next.UrlSlug)">@Html.Raw(Model.GanjoorPage.Poem.Next.Title): @Html.Raw(Model.GanjoorPage.Poem.Next.Excerpt)</a><span> &raquo;</span>
+                                        <a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.FullUrl + "/" + Model.GanjoorPage.Poem.Next.UrlSlug)">@Html.Raw(Model.GanjoorPage.Poem.Next.Title): @Html.Raw(Model.GanjoorPage.Poem.Next.Excerpt)</a>
+
+                                        <span> &raquo;</span>
                                     }
                                     else
-if (Model.GanjoorPage.Poem.Category.Cat.Next != null)
+                               if (Model.GanjoorPage.Poem.Category.Cat.Next != null)
                                     {
-                                        <a href="@Model.GanjoorPage.Poem.Category.Cat.Next.FullUrl">@Model.GanjoorPage.Poem.Category.Cat.Next.Title</a><span> &raquo;</span>
+                                        <a href="@Model.GanjoorPage.Poem.Category.Cat.Next.FullUrl">@Model.GanjoorPage.Poem.Category.Cat.Next.Title</a>
+
+                                        <span> &raquo;</span>
                                     }
                                 </div>
                                 <div class="navright">
                                     @if (Model.GanjoorPage.Poem.Previous != null)
                                     {
-                                        <span>&laquo; </span><a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.FullUrl + "/" +Model.GanjoorPage.Poem.Previous.UrlSlug)">@Html.Raw(Model.GanjoorPage.Poem.Previous.Title) :@Html.Raw(Model.GanjoorPage.Poem.Previous.Excerpt)</a>
+                                        <span>&laquo; </span>
+
+                                        <a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.FullUrl + "/" +Model.GanjoorPage.Poem.Previous.UrlSlug)">@Html.Raw(Model.GanjoorPage.Poem.Previous.Title) :@Html.Raw(Model.GanjoorPage.Poem.Previous.Excerpt)</a>
                                     }
                                     else
-if (Model.GanjoorPage.Poem.Category.Cat.Previous != null)
+                               if (Model.GanjoorPage.Poem.Category.Cat.Previous != null)
                                     {
-                                        <span>&laquo; </span><a href="@Model.GanjoorPage.Poem.Category.Cat.Previous.FullUrl">@Model.GanjoorPage.Poem.Category.Cat.Previous.Title</a>
+                                        <span>&laquo; </span>
+
+                                        <a href="@Model.GanjoorPage.Poem.Category.Cat.Previous.FullUrl">@Model.GanjoorPage.Poem.Category.Cat.Previous.Title</a>
                                     }
                                 </div>
                             </div>
@@ -256,7 +266,6 @@ if (Model.GanjoorPage.Poem.Category.Cat.Previous != null)
                         <div id="comments">
 
 
-
                             <div class="poem-info">
                                 <p>
                                     <small><i class="pageicons">mouse</i> با دو بار کلیک روی واژه‌ها یا انتخاب متن و کلیک روی آنها می‌توانید آنها را در لغتنامهٔ دهخدا جستجو کنید.</small>
@@ -353,6 +362,21 @@ if (Model.GanjoorPage.Poem.Category.Cat.Previous != null)
                                     <a role="button" class="textualbutton" href="/login">برای ویرایش و بهبود متن با نام کاربری خود وارد شوید</a>
                                 }
 
+                                @{
+                                    if (Model.IsPoemPage)
+                                    {
+                                        if (Model.GanjoorPage.Poem.Recitations.Length > 0)
+                                        {
+                                            <div class="related-images-frame">
+                                                <div class="century">
+                                                    @(Model.GanjoorPage.Poem.Recitations.Length > 1 ? "خوانش‌ها" : "خوانش")
+                                                </div>
+                                                <partial name="_AudioPlayerPartial" model=Model.GetRecitationsModel(Model.GanjoorPage.Poem.Recitations) />
+                                            </div>
+                                        }
+                                    }
+                                }
+
                                 @if (Model.GanjoorPage.Poem.Top6RelatedPoems.Length > 0)
                                 {
                                     <div class="related-images-frame">
@@ -545,7 +569,7 @@ if (Model.GanjoorPage.Poem.Category.Cat.Previous != null)
 
                                 <div id="id02" class="modal">
                                     <span onclick="document.getElementById('id02').style.display='none'"
-                                          class="close" title="بستن">&times;</span>
+                              class="close" title="بستن">&times;</span>
                                     <form class="modal-content animate" method="post" id="editcommentform" action="?handler=EditComment">
                                         <table style="max-width:100%; width:100%; margin:0">
                                             <tr>
@@ -567,7 +591,7 @@ if (Model.GanjoorPage.Poem.Category.Cat.Previous != null)
 
                                 <div id="id03" class="modal">
                                     <span onclick="document.getElementById('id03').style.display='none'"
-                                          class="close" title="بستن">&times;</span>
+                              class="close" title="بستن">&times;</span>
                                     <form class="modal-content animate" method="post" id="replycommentform" action="?handler=Reply">
                                         <table style="max-width:100%; width:100%; margin:0">
                                             <tr>
@@ -615,13 +639,17 @@ if (Model.GanjoorPage.Poem.Category.Cat.Previous != null)
                                 <div class="navleft">
                                     @if (Model.GanjoorPage.Next != null)
                                     {
-                                        <a href="@Html.Raw(Model.GanjoorPage.Next.FullUrl)">@Html.Raw(Model.GanjoorPage.Next.Title)</a><span> &raquo;</span>
+                                        <a href="@Html.Raw(Model.GanjoorPage.Next.FullUrl)">@Html.Raw(Model.GanjoorPage.Next.Title)</a>
+
+                                        <span> &raquo;</span>
                                     }
                                 </div>
                                 <div class="navright">
                                     @if (Model.GanjoorPage.Previous != null)
                                     {
-                                        <span>&laquo; </span><a href="@Html.Raw(Model.GanjoorPage.Previous.FullUrl)">@Html.Raw(Model.GanjoorPage.Previous.Title)</a>
+                                        <span>&laquo; </span>
+
+                                        <a href="@Html.Raw(Model.GanjoorPage.Previous.FullUrl)">@Html.Raw(Model.GanjoorPage.Previous.Title)</a>
                                     }
                                 </div>
                             </div>
diff --git a/GanjooRazor/wwwroot/css/p8.css b/GanjooRazor/wwwroot/css/p8.css
index 726e2741..6ee641ca 100644
--- a/GanjooRazor/wwwroot/css/p8.css
+++ b/GanjooRazor/wwwroot/css/p8.css
@@ -348,7 +348,7 @@ div.n, div.l {
     padding-top: 20px;
 }
 
-.ganjoor-comment, .inlinesimi {
+.ganjoor-comment, .inlinesimi, .audio-player {
     margin-right: 20px;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
@@ -358,7 +358,7 @@ div.n, div.l {
     overflow-x: hidden;
 }
 
-.inlinesimi {
+.inlinesimi, .audio-player {
     margin-left: 20px;
 }
 
@@ -1124,16 +1124,6 @@ ol {
         padding-right: 50px;
     }
 
-.audio-player {
-    margin: 20px auto 6px;
-    display: block;
-    background: transparent url('/image/cbk.jpg') top center repeat scroll;
-    padding: 3px;
-    clear: both;
-    border: 2px solid #300;
-    border-radius: 20px;
-}
-
 .recitaion-info{
 
 }