diff --git a/C4/Serials.pm b/C4/Serials.pm
index 03d2e5ef29..0b70099926 100644
--- a/C4/Serials.pm
+++ b/C4/Serials.pm
@@ -24,6 +24,7 @@ use POSIX qw(strftime);
 use C4::Suggestions;
 use C4::Koha;
 use C4::Biblio;
+use C4::Branch;
 use C4::Items;
 use C4::Search;
 use C4::Letters;
@@ -460,6 +461,7 @@ sub PrepareSerialsData {
             ? format_date( $subs->{'publisheddate'} )
             : "XXX"
         );
+        $subs->{'branchname'} = GetBranchName( $subs->{'branchcode'} );
         $subs->{'planneddate'}                  = format_date( $subs->{'planneddate'} );
         $subs->{ "status" . $subs->{'status'} } = 1;
         $subs->{"checked"}                      = $subs->{'status'} =~ /1|3|4|7/;
diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
index 088f5ea1b4..eb02f101cf 100644
--- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css
+++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
@@ -1777,7 +1777,7 @@ span.view {
 	margin-top : .5em;
 }
 
-a#MARCview, span#MARCview, a#MARCviewPop, a#ISBDview, span#ISBDview, a#Normalview, span#Normalview {
+a#MARCview, span#MARCview, a#MARCviewPop, a#ISBDview, span#ISBDview, a#Normalview, a#Briefhistory, span#Normalview, a#Fullhistory, span#Fullhistory, span#Briefhistory {
 	background-position : 5px 3px;
 	background-repeat : no-repeat;
 	font-size : 87%;
@@ -1803,7 +1803,7 @@ a#Normalview, span#Normalview {
 	padding-left : 15px;
 }
 
-a#MARCview, a#MARCviewPop, a#ISBDview, a#Normalview {
+a#MARCview, a#MARCviewPop, a#ISBDview, a#Normalview, a#Fullhistory, a#Briefhistory {
 	background-color : #F3F3F3;
 	border-left : 1px solid #E8E8E8;
 }
diff --git a/koha-tmpl/opac-tmpl/prog/en/modules/opac-full-serial-issues.tmpl b/koha-tmpl/opac-tmpl/prog/en/modules/opac-full-serial-issues.tmpl
index 5102a3c1e4..88dc969b33 100644
--- a/koha-tmpl/opac-tmpl/prog/en/modules/opac-full-serial-issues.tmpl
+++ b/koha-tmpl/opac-tmpl/prog/en/modules/opac-full-serial-issues.tmpl
@@ -1,16 +1,32 @@
-<!-- TMPL_INCLUDE NAME="doc-head-open.inc" --><!-- TMPL_IF NAME="LibraryNameTitle" --><!-- TMPL_VAR NAME="LibraryNameTitle" --><!-- TMPL_ELSE -->Koha Online<!-- /TMPL_IF --> Catalog &rsaquo;  Serials
+<!-- TMPL_INCLUDE NAME="doc-head-open.inc" --><!-- TMPL_IF NAME="LibraryNameTitle" --><!-- TMPL_VAR NAME="LibraryNameTitle" --><!-- TMPL_ELSE -->Koha Online<!-- /TMPL_IF --> Catalog &rsaquo;  Subscription information for <!-- TMPL_VAR name="bibliotitle" -->
 <!-- TMPL_INCLUDE NAME="doc-head-close.inc" -->
 <script type="text/javascript" language="javascript">
 //<![CDATA[
 
 $(document).ready(function(){
-    initFilters();
-	
+	showlayer(<!-- TMPL_VAR name="yearmin" -->);
+	$("a.tabsubs:first").addClass("currentsubtab");
+	$("#filterform").submit(function(){
+		filterByLibrary();
+		return false;
+	});
+	$("#libraryfilter").change(function(){
+		filterByLibrary();
+	});
+	$("#subscriptionidfilter").change(function(){
+		filterBySubscriptionId();
+	});
+	$("#reset").click(function(){
+		clearFilters();
+	});
+	$("a.tabsubs").click(function(){
+		$("a.tabsubs").removeClass("currentsubtab");
+		$(this).addClass("currentsubtab");
+	});
 });
 
 // Filters initialization
 function initFilters() {
-
     // Deleting everything from the library filter
     $("#libraryfilter option").remove();
 
@@ -101,71 +117,64 @@ function clearFilters(keeplibrary) {
     if (keeplibrary != true) { 
 	// Reinit library options
 	initFilters();
-	$("#libraryfilter option[@value=all]").attr("selected", "selected"); 
+	$("#libraryfilter option[value=all]").attr("selected", "selected");
     }
 }
-
+function showlayer(numlayer){
+	$(".yeardata").each(function(){
+		ong = $(this).attr("id");
+		if(ong == "show"+numlayer){
+			$(this).show();
+			currentYear = ong;
+		} else  {
+			$(this).hide();
+		}
+	});
+    clearFilters();
+}
 //]]>
 </script>
-
+<style type="text/css">
+	#search-facets fieldset { border: 0; margin: 0;padding:0;}#search-facets ol{padding:.3em;}#search-facets li {list-style-type:none;padding:4px 4px;}#search-facets label{font-weight:bold;display:block;margin:.2em 0;}#search-facets fieldset.action {padding-left:4px;margin:.3em;}div.tabsub { clear:both;}#subtabs a { display:block;float:left;border:1px solid #CCC;padding:.2em .4em;margin-right:.3em;text-decoration:none;font-size:115%;}#subtabs strong { display:block; float: left; font-size:115%;padding:.2em .4em; }#subtabs { margin-top : 1em; }a.currentsubtab { background-color:#FFC;}
+</style>
 </head>
 <body>
-<!-- TMPL_IF NAME="OpacNav" --><div id="doc3" class="yui-t1"><!-- TMPL_ELSE --><div id="doc3" class="yui-t7"><!-- /TMPL_IF -->
+<div id="doc3" class="yui-t1">
    <div id="bd">
 <!-- TMPL_INCLUDE name="masthead.inc" -->
 
 	<div id="yui-main">
 	<div class="yui-b"><div class="yui-g">
-<div class="container">
 
 <!-- TMPL_UNLESS name="popup" -->
-    <h1 class="catalogue">Subscription information for <!-- TMPL_VAR name="bibliotitle" --></h1>
-    <a href="opac-detail.pl?biblionumber=<!-- TMPL_VAR name="biblionumber" -->" class="button catalogue">Back to biblio</a>
+    <h2>Subscription information for <!-- TMPL_VAR name="bibliotitle" --></h2>
+	<div id="views">
+		<span class="view"><a id="Normalview" href="opac-detail.pl?biblionumber=<!-- TMPL_VAR name="biblionumber" -->">Normal view</a></span>
+		<span class="view"><a id="Briefhistory" href="opac-serial-issues.pl?biblionumber=<!-- TMPL_VAR name="biblionumber" -->&amp;selectview=small">Brief history</a></span>
+		<span class="view"><span id="Fullhistory">Full history</span></span>
+	</div>
+
 <!-- /TMPL_UNLESS -->
-    <div class="tabsubs">
+    <div id="subtabs"><strong>Show year: </strong>
     <!-- TMPL_LOOP NAME="years" -->
         <!-- TMPL_IF NAME="year" -->
-            <a  class="tabsubs" href="javascript:showlayer(<!-- TMPL_VAR NAME="year" -->)"><!-- TMPL_VAR NAME="year" --></a>
+            <a class="tabsubs" href="#" onclick="showlayer(<!-- TMPL_VAR NAME="year" -->); return false;"><!-- TMPL_VAR NAME="year" --></a>
         <!-- /TMPL_IF -->
     <!-- /TMPL_LOOP -->
-    <a class="tabsubs" href="opac-serial-issues.pl?biblionumber=<!-- TMPL_VAR name="biblionumber" -->&selectview=small">Compact view</a>
     </div>
 
-    <form action="opac-serial-issues.pl" onsubmit="filterByLibrary(); return false;">
-	<fieldset>
-	    
-	    <legend>Filters :</legend>
-
-	    <label for="libraryfilter">Library : </label>
-            <select id="libraryfilter" onchange="filterByLibrary();">
-            </select>
-	    
-	    <label for="subscriptionidfilter">Subscription : </label>
-            <select id="subscriptionidfilter" disabled="disabled" onchange="filterBySubscriptionId();">
-            </select>
-	    
-	    <input type="reset" value="Clear Filters" onclick="clearFilters();" />
-    	
-	</fieldset>
-    </form>
     <!-- TMPL_LOOP NAME="years" -->
   <!--TMPL_IF Name="first" -->  
-    <div name="yeardata" id="<!-- TMPL_VAR NAME="year" -->" class="tabsub" style="display:block"><!--TMPL_ELSE --><div name="yeardata" id="<!-- TMPL_VAR NAME="year" -->" class="tabsub" style="display:none"><!--/TMPL_IF -->
-        <table class="subscriptionstclass" width="400px">
+    <div class="yeardata tabsub" id="show<!-- TMPL_VAR NAME="year" -->" style="display:block"><!--TMPL_ELSE --><div class="yeardata tabsub" id="show<!-- TMPL_VAR NAME="year" -->" style="display:none"><!--/TMPL_IF -->
+        <table class="subscriptionstclass">
 	    <thead>
 		<tr>
-		    <th>Date
-		    </th>
-		    <th>Library
-		    </th>
-		    <th>Notes
-		    </th>
-		    <th>Date received
-		    </th>
-		    <th>Number
-		    </th>
-		    <th>Status
-		    </th>
+		    <th>Date</th>
+		    <th>Library</th>
+		    <th>Notes</th>
+		    <th>Date received</th>
+		    <th>Number</th>
+		    <th>Status</th>
 		    <th>Subscription</th>
 		</tr>
 	    </thead>
@@ -174,7 +183,7 @@ function clearFilters(keeplibrary) {
 		<tr>
 		    <td>    <!-- TMPL_VAR Name="publisheddate" -->
 		    </td>
-		    <td class="libraryfilterclass">    <!-- TMPL_VAR name="branchcode" -->
+		    <td class="libraryfilterclass">    <!-- TMPL_VAR name="branchname" -->
 		    </td>
 		    <td>    <!-- TMPL_VAR name="notes" -->
 		    </td>
@@ -198,34 +207,26 @@ function clearFilters(keeplibrary) {
         </table>
     </div>
     <!--/TMPL_LOOP -->
-<script language="JavaScript" type="text/javascript">
-var currentYear;
-showlayer(<!-- TMPL_VAR name="yearmin" -->);
-function showlayer(numlayer)
-{
-    var yeardata=document.getElementsByName("yeardata");
-    for (i=0; i<yeardata.length; i++ ) {
-        ong=yeardata[i].getAttribute('id');
-        if (numlayer==ong) {
-            yeardata[i].style.display="block";
-	    currentYear = ong;
-        } else {
-            yeardata[i].style.display="none";
-        }
-    }
 
-    clearFilters();
-}
-
-</script>
-</div></div>
 </div>
 </div>
-<!-- TMPL_IF NAME="OpacNav" -->
+</div>
 <div class="yui-b">
 <div class="container">
-<!--TMPL_INCLUDE NAME="navigation.inc" -->
+<div id="search-facets">
+<form action="opac-serial-issues.pl" id="filterform">
+    <h4>Refine your search</h4>
+	<fieldset>
+	   <ol><li> <label for="libraryfilter">Library : </label>
+	            <select id="libraryfilter" name="libraryfilter" style="width:10em;"></select></li>
+	    <li><label for="subscriptionidfilter">Subscription : </label>
+            <select id="subscriptionidfilter" name="subscriptionfilter" style="width:10em;" disabled="disabled"></select></li></ol>
+		</fieldset>
+		<fieldset class="action"><input type="reset" id="reset" value="Clear" /></fieldset>
+    </form>
+</div>
+<!-- TMPL_IF NAME="OpacNav" --><!--TMPL_INCLUDE NAME="navigation.inc" --><!-- /TMPL_IF -->
+</div>
 </div>
-</div><!-- /TMPL_IF -->
 </div>
 <!-- TMPL_INCLUDE NAME="opac-bottom.inc" -->
diff --git a/koha-tmpl/opac-tmpl/prog/en/modules/opac-serial-issues.tmpl b/koha-tmpl/opac-tmpl/prog/en/modules/opac-serial-issues.tmpl
index 1a71cf9057..6c2f44b008 100644
--- a/koha-tmpl/opac-tmpl/prog/en/modules/opac-serial-issues.tmpl
+++ b/koha-tmpl/opac-tmpl/prog/en/modules/opac-serial-issues.tmpl
@@ -10,13 +10,16 @@
 	<div class="yui-b"><div class="yui-g">
 
 <div class="container">
-<h1>Issues for a subscription</h1>
-	<a href="opac-detail.pl?biblionumber=<!-- TMPL_VAR name="biblionumber" -->" class="button">Normal View</a>
-	<a href="opac-serial-issues.pl?selectview=full&amp;biblionumber=<!-- TMPL_VAR name="biblionumber" -->" class="button">Full History</a>
-
+<h2>Issues for a subscription</h2>
+<div id="views">
+	<span class="view"><a id="Normalview" href="opac-detail.pl?biblionumber=<!-- TMPL_VAR name="biblionumber" -->" class="button">Normal View</a></span>
+		<span class="view"><span id="Briefhistory">Brief history</span></span>
+	<span class="view"><a id="Fullhistory" href="opac-serial-issues.pl?selectview=full&amp;biblionumber=<!-- TMPL_VAR name="biblionumber" -->" class="button">Full History</a></span>
+</div>
 <form method="post" name="f">
 <!-- TMPL_LOOP name="subscription_LOOP" -->
-<h2>Subscription information for <!-- TMPL_VAR name="bibliotitle" --></h2>
+<div id="subscriptionline<!-- TMPL_VAR NAME="subscriptionid" -->" style="border-bottom:1px solid #EEE;">
+<h3>Subscription information for <!-- TMPL_VAR name="bibliotitle" --></h3>
 		<p>The current subscription began on <!-- TMPL_VAR name="startdate" --> and is issued every
 		<!--TMPL_IF name="periodicity1" -->
 				day
@@ -83,21 +86,21 @@
             <p>The subscription expired on <!-- TMPl_VAR name="histenddate" --></p>
         <!-- /TMPL_IF -->
 		</p>
-    <h2><!-- TMPL_VAR name="branchname" --> <!-- TMPL_VAR name="notes" --></h2>
+    <h4><!-- TMPL_VAR name="branchname" --> <!-- TMPL_VAR name="notes" --></h4>
   <!-- TMPL_IF name="recievedlist" -->
-    <h3>Available Issues</h3>
+    <h5>Available Issues</h5>
     <p>
       <!-- TMPL_VAR name="recievedlist" -->
     </p>
   <!-- /TMPL_IF -->
   <!-- TMPL_IF name="missinglist" -->
-    <h3>Unavailable Issues</h3>
+    <h5>Unavailable Issues</h5>
     <p>
       <!-- TMPL_VAR name="missinglist" -->
     </p>
   <!-- /TMPL_IF -->
     <!-- TMPL_IF name="opacnote" -->
-        <h3>Issues summary</h3>
+        <h5>Issues summary</h5>
         <p>
             <!-- TMPL_VAR name="opacnote" -->
         </p>
@@ -113,7 +116,7 @@
             </a>
         <!-- /TMPL_IF -->
     <!-- /TMPL_IF -->
-
+</div>
 <!-- /TMPL_LOOP -->
 </div>
 </div>