diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index ec2b227..f11441c 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -436,7 +436,7 @@ fieldset > table {
 	width: calc(100vw + -16vw + -1rem);
 	max-width: 100%;
 }
-
+fieldset > input,
 fieldset > table td input,
 fieldset > table td textarea {
 	width: calc(100vw + -16vw + -1.5rem);
@@ -471,18 +471,37 @@ fieldset > table td input[type="radio"] {
 	width: initial;
 	margin-bottom: 0.5rem;
 }
-
-fieldset > input {
-	background: var(--background-secondary);
-	color: white;
-	font-weight: 600;
-	padding: 0.5rem;
-	border: thin solid var(--input-border-primary);
-	border-radius: 0.2rem;
+#search form {
+	flex: 1 1 auto
+}
+#search fieldset > input {
+	width: initial;
+}
+#search fieldset > input[type="submit"] {
+	background-color: var(--background-secondary);
+	color: var(--text-secondary);
+}
+#search fieldset > input[type="submit"]:hover {
+	background-color: var(--link-secondary);
+	color: var(--background-secondary);
 }
 .no-css {
 	display: none;
 }
+#tags #tag_initial_letter_index {
+	columns: 3 auto;
+}
+#tags #tag_initial_letter_index  li {
+	font-weight: bold;
+	list-style: none;
+}
+#tags .tag-index {
+	columns: 3 calc(var(--for-tablet-landscape-up) /3 );
+	column-gap: 1rem;
+}
+#tags .index-link {
+	text-align: right;
+}
 .sr-only {
 	position: absolute;
 	width: 1px;
diff --git a/templates/content-search.tpl.html b/templates/content-search.tpl.html
index 53e7a61..ba8fab1 100644
--- a/templates/content-search.tpl.html
+++ b/templates/content-search.tpl.html
@@ -1,45 +1,123 @@
- <article>
-    <header>
-        <h1>Search HPR.</h1>
-    </header>
-<hr />
-<h2>Search Show Tags</h2>
-<p>
-<a href="<!--% absolute_path(baseurl) %-->tags.html">Complete list of all the Tags</a></p>
-<hr />
-<h2>Google</h2>
-<form name="google-search" method="get" action="https://www.google.com/search">
-  <input type="hidden" name="sitesearch" value="https://www.hackerpublicradio.org/" />
-  <input name="q" type="text" placeholder="Search HPR with Google"/>
-  <input type="submit" name="sa" value="Search HPR with Google" />
-</form>
-<br />
-<a href="https://www.google.com/policies/privacy/">privacy policy</a>
-</p>
-<hr />
-<h2>DuckDuckGo</h2>
-<form method="get" id="search" action="https://duckduckgo.com/">
-  <input type="hidden" name="sites" value="https://www.hackerpublicradio.org/"/>
-  <input type="hidden" name="k8" value="#444444"/>
-  <input type="hidden" name="k9" value="#D51920"/>
-  <input type="hidden" name="kt" value="h"/>
-  <input type="text" name="q" maxlength="255" placeholder="Search HPR with DuckDuckGo"/>
-  <input type="submit" value="Search HPR with DuckDuckGo" />
-</form>
-<br />
-<a href="https://duckduckgo.com/privacy">privacy policy</a>
-</p>
-<hr />
-<h2>Bing</h2>
-<p>
-<form method="get" action="https://www.bing.com/search">
-<input type="hidden" name="cp" value="utf-8" />
-<input type="hidden" name="FORM" value="FREESS" />
-<input type="text" name="q" size="30" placeholder="Search HPR with Bing"/>
-<input type="submit" value="Search HPR with Bing" />
-<input type="hidden" name="q1" value="site:www.hackerpublicradio.org" />
-</form>
-<br />
-<a href="https://www.microsoft.com/privacystatement/en-us/bing/default.aspx">privacy policy</a>
-</p>
-  </article>
+<section id="search">
+	<header>
+		<h1>Search HPR.</h1>
+	</header>
+	<div class="lane">
+		<form name="google-search" method="get" action="https://www.google.com/search">
+			<fieldset><legend>Google</legend>
+				<input type="hidden" name="sitesearch" value="https://www.hackerpublicradio.org/" />
+				<input name="q" type="text" placeholder="Search HPR with Google"/>
+				<input type="submit" name="sa" value="Search HPR with Google" />
+				<p>
+				<a href="https://www.google.com/policies/privacy/">privacy policy</a>
+				</p>
+			</fieldset>
+		</form>
+		<form method="get" id="search" action="https://duckduckgo.com/">
+			<fieldset><legend>DuckDuckGo</legend>
+			<input type="hidden" name="sites" value="https://www.hackerpublicradio.org/"/>
+			<input type="hidden" name="k8" value="#444444"/>
+			<input type="hidden" name="k9" value="#D51920"/>
+			<input type="hidden" name="kt" value="h"/>
+			<input type="text" name="q" maxlength="255" placeholder="Search HPR with DuckDuckGo"/>
+			<input type="submit" value="Search HPR with DuckDuckGo" />
+			<p>
+			<a href="https://duckduckgo.com/privacy">privacy policy</a>
+			</p>
+			</fieldset>
+		</form>
+		<form method="get" action="https://www.bing.com/search">
+			<fieldset><legend>Bing</legend>
+				<input type="hidden" name="cp" value="utf-8" />
+				<input type="hidden" name="FORM" value="FREESS" />
+				<input type="text" name="q" size="30" placeholder="Search HPR with Bing"/>
+				<input type="submit" value="Search HPR with Bing" />
+				<input type="hidden" name="q1" value="site:www.hackerpublicradio.org" />
+				<p>
+				<a href="https://www.microsoft.com/privacystatement/en-us/bing/default.aspx">privacy policy</a>
+				</p>
+			</fieldset>
+		</form>
+	</div>
+</section>
+<section id="tags">
+<!--% PROCESS 'shared-utils.tpl.html' %-->
+<!--% PROCESS "queries-tags.tpl.html" %-->
+<!--% USE DBI(constants.driver) %-->
+<!--% PERL %-->
+$Template::Stash::PRIVATE = undef; # Allow . in tag
+<!--% END %-->
+<!--% USE String %-->
+<!--% uniq_tag_count = 0 %-->
+<!--% FOREACH episode IN DBI.query(query_tags);
+    ep_id = episode.id;
+    ep_tags = episode.tags;
+    FOREACH tag_str IN ep_tags.csv_parse;
+        NEXT UNLESS tag_str;
+        NEXT IF tag_str == '';
+        tag = tag_str.lower;
+		tag_index = String.new(tag).push('_');
+        first_char = tag.substr(0,1);
+        IF first_char == '.';
+            first_char = '&#x0002E;'; # Unicode .
+        END;
+        IF all_tags.${first_char}.exists(tag_index);
+            all_tags.${first_char}.${tag_index}.count = all_tags.${first_char}.${tag_index}.count + 1;
+            all_tags.${first_char}.${tag_index}.urls.push(ep_id);
+        ELSE;
+            all_tags.${first_char}.${tag_index}.count = 1;
+            uniq_tag_count = uniq_tag_count + 1;
+            all_tags.${first_char}.${tag_index}.urls = [ep_id];
+        END;
+    END;
+END %-->
+<!--% USE date %-->
+<!--% all_first = ['#','&#x0002E;','/','0','1','2','3','4','5','6','7','8','9','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'] %-->
+<header>
+	<hgroup>
+	<h1 class="title"><a id="TOP">Search by Tag</a></h1>
+	<p class="date">Page generated on <!--% date.format(date.now, format => '%Y-%m-%d at %H:%M:%S UTC', gmt => 1) %--></p>
+	</hgroup>
+</header>
+	<p>This section summarises all of the tags currently used throughout the
+	database. The tags are in alphabetical order and each is followed by links to
+	the show numbers where it is used so you can see the context the author used
+	it in. There are currently <!--% uniq_tag_count %--> unique tags in the system.</p>
+	<h4>Alphabetical index</h4>
+	<p>This is an index to the initial letters of the tags below.</p>
+	<ul id="tag_initial_letter_index">
+    <!--% FOREACH first_char IN all_first %-->
+        <!--% IF all_tags.${first_char} %-->
+            <li><a href="<!--% absolute_path(baseurl) %-->search.html#<!--% tag_to_id(String.new(all_tags.${first_char}.keys.sort.first).chop) %-->"><strong><!--% first_char %--></strong></a></li>
+        <!--% END %-->
+    <!--% END %-->
+	</ul>
+	<hr class="no-css">
+    <!--% FOREACH first_char IN all_first %-->
+        <!--% IF all_tags.${first_char} %-->
+		<p class="index-link"><a href="<!--% absolute_path(baseurl) %-->search.html#TOP">&UpArrow; Go to index</a></p>
+	        <h3>Tags beginning with '<!--% first_char %-->'</h3>
+	        <ul class="tag-index">
+                <!--% FOREACH tag_index IN all_tags.${first_char}.keys.sort %-->
+				<!--% tag = String.new(tag_index).chop; tag_id = String.new(tag_index).chop; %-->
+    	        	<li>
+    	        		<a id="<!--% tag_to_id(tag_id) %-->"><strong><!--% tag %--></strong></a>: 
+                        <!--% ep_links = [] %-->
+                        <!--% FOREACH ep_id IN all_tags.${first_char}.${tag_index}.urls.nsort;
+							ep_links.push("<a href=\"${absolute_path(baseurl)}eps/hpr" _ zero_pad_left(ep_id) _ '/index.html"'
+                                ' target="_blank" aria-label="' _ tag _
+                                ' - show ' _ ep_id _ '">' _ ep_id _ '</a>');
+                        END %-->
+                        <!--% ep_links.join(', ') %-->
+    	        	</li>
+                <!--% END %-->
+	        </ul>
+        <!--% END %-->
+    <!--% END %-->
+	<p><a href="#TOP">Go to TOP of page</a></p>
+</article>
+<!--% PERL %-->
+$Template::Stash::PRIVATE = 1;
+<!--% END %-->
+
+</section>
diff --git a/templates/content-tags.tpl.html b/templates/content-tags.tpl.html
index 13a9dd3..170da33 100644
--- a/templates/content-tags.tpl.html
+++ b/templates/content-tags.tpl.html
@@ -1,3 +1,4 @@
+<section id="tags">
 <!--% PROCESS 'shared-utils.tpl.html' %-->
 <!--% PROCESS "queries-tags.tpl.html" %-->
 <!--% USE DBI(constants.driver) %-->
@@ -30,39 +31,31 @@ $Template::Stash::PRIVATE = undef; # Allow . in tag
 END %-->
 <!--% USE date %-->
 <!--% all_first = ['#','&#x0002E;','/','0','1','2','3','4','5','6','7','8','9','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'] %-->
-
-<style>
-    .columns3 { columns: 3 auto; list-style-type: none }
-    hr.thin {
-        border: 0;
-        height: 0;
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-    }
-    p.ralign { text-align: right }
-</style>
-<article>
-	<a id="TOP"><h1 class="title">Tag summary</h1></a>
-	<h4 class="date">Page generated on <!--% date.format(date.now, format => '%Y-%m-%d at %H:%M:%S UTC', gmt => 1) %--></h4>
+<header>
+	<hgroup>
+	<h1 class="title"><a id="TOP">Search by Tag</a></h1>
+	<p class="date">Page generated on <!--% date.format(date.now, format => '%Y-%m-%d at %H:%M:%S UTC', gmt => 1) %--></p>
+	</hgroup>
+</header>
 	<p>This section summarises all of the tags currently used throughout the
 	database. The tags are in alphabetical order and each is followed by links to
 	the show numbers where it is used so you can see the context the author used
 	it in. There are currently <!--% uniq_tag_count %--> unique tags in the system.</p>
 	<h4>Alphabetical index</h4>
 	<p>This is an index to the initial letters of the tags below.</p>
-	<ul class="columns3">
+	<ul id="tag_initial_letter_index">
     <!--% FOREACH first_char IN all_first %-->
         <!--% IF all_tags.${first_char} %-->
-            <li><a href="<!--% absolute_path(baseurl) %-->tags.html#<!--% tag_to_id(String.new(all_tags.${first_char}.keys.sort.first).chop) %-->"><strong><!--% first_char %--></strong></a></li>
+            <li><a href="<!--% absolute_path(baseurl) %-->search.html#<!--% tag_to_id(String.new(all_tags.${first_char}.keys.sort.first).chop) %-->"><strong><!--% first_char %--></strong></a></li>
         <!--% END %-->
     <!--% END %-->
 	</ul>
-	<hr>
+	<hr class="no-css">
     <!--% FOREACH first_char IN all_first %-->
         <!--% IF all_tags.${first_char} %-->
-		<p class="ralign"><a href="<!--% absolute_path(baseurl) %-->tags.html#TOP">&UpArrow; Go to index</a></p>
+		<p class="index-link"><a href="<!--% absolute_path(baseurl) %-->search.html#TOP">&UpArrow; Go to index</a></p>
 	        <h3>Tags beginning with '<!--% first_char %-->'</h3>
-	        <ul>
+	        <ul class="tag-index">
                 <!--% FOREACH tag_index IN all_tags.${first_char}.keys.sort %-->
 				<!--% tag = String.new(tag_index).chop; tag_id = String.new(tag_index).chop; %-->
     	        	<li>
@@ -84,3 +77,5 @@ END %-->
 <!--% PERL %-->
 $Template::Stash::PRIVATE = 1;
 <!--% END %-->
+
+</section>
\ No newline at end of file