diff --git a/templates/base.html b/templates/base.html
index 8db105a..5959597 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,9 +10,8 @@
 
         <!-- Bootstrap CSS -->
         <link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/bootstrap-5.0.2-dist/css/bootstrap.min.css' ) }}">
+		<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/DataTables-1.11.3/css/jquery.dataTables.min.css' ) }}">
 
-		<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css">
-		<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
 		<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
 		<script src="https://kit.fontawesome.com/9b4c7cf470.js" crossorigin="anonymous"></script>
 		{% import "bootstrap/wtf.html" as wtf %}
@@ -51,7 +50,7 @@
 		<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
 			<div class="navbar-nav col-12">
 				<div class="nav-item dropdown">
-					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="BookMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Books</a>
+					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="BookMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Books</a>
 					<div class="dropdown-menu" aria-labelledby="BookMenu">
 						<a class="dropdown-item" href="{{url_for('new_book')}}">Create</a>
 						<a class="dropdown-item" href="{{url_for('books')}}">Show All</a>
@@ -66,28 +65,28 @@
 					</div>
 				</div class="nav-item dropdown">
 				<div class="nav-item dropdown">
-					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="AuthorMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Authors</a>
+					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="AuthorMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Authors</a>
 					<div class="dropdown-menu" aria-labelledby="AuthorMenu">
 						<a class="dropdown-item" href="{{url_for('new_author')}}">Create</a>
 						<a class="dropdown-item" href="{{url_for('authors')}}">Show All</a>
 					</div>
 				</div class="nav-item dropdown">
 				<div class="nav-item dropdown">
-					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="PublisherMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Publishers</a>
+					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="PublisherMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Publishers</a>
 					<div class="dropdown-menu" aria-labelledby="PublisherMenu">
 						<a class="dropdown-item" href="{{url_for('new_publisher')}}">Create</a>
 						<a class="dropdown-item" href="{{url_for('publishers')}}">Show All</a>
 					</div>
 				</div class="nav-item dropdown">
 				<div class="nav-item dropdown">
-					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="SeriesMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Series</a>
+					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="SeriesMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Series</a>
 					<div class="dropdown-menu" aria-labelledby="SeriesMenu">
 						<a class="dropdown-item" href="{{url_for('new_series')}}">Create</a>
 						<a class="dropdown-item" href="{{url_for('seriess')}}">Show All</a>
 					</div>
 				</div class="nav-item dropdown">
 				<div class="nav-item dropdown">
-					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="AdminMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin</a>
+					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="AdminMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin</a>
 					<div class="dropdown-menu" aria-labelledby="AdminMenu">
 						<a class="dropdown-item" href="{{url_for('new_genre')}}">Create new Genre</a>
 						<a class="dropdown-item" href="{{url_for('genres')}}">Show Genres</a>
@@ -109,7 +108,7 @@
 					<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 				</form>
 				<div class="nav-item dropdown dropdown-menu-right">
-					<a class="nav-link dropdown-toggle" href="#" id="UserMenu" role="button" data-toggle="dropdown" aria-expanded="false">
+					<a class="nav-link dropdown-toggle" href="#" id="UserMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 					&nbsp;
 					&nbsp;
 					&nbsp;
@@ -140,10 +139,9 @@
 
 {% if not InDBox %}
 	<!-- code to get bootstrap & bootstrap datatable to work -->
-	<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
-	<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
-	<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
+    <script src="{{ url_for( 'static', filename='upstream/jquery-3.6.0.min.js')}}"></script>
+	<script src="{{ url_for( 'static', filename='upstream/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js')}}"></script>
+	<script src="{{ url_for( 'static', filename='upstream/DataTables-1.11.3/js/jquery.dataTables.min.js' )}}"></script>
 	<script>
 	$(document).ready(function() { 
 	    {% if 'Author(s)' in order_by %}
diff --git a/templates/book.html b/templates/book.html
index 7651647..c87dbe0 100644
--- a/templates/book.html
+++ b/templates/book.html
@@ -7,10 +7,10 @@
 		<button id="series-minus-but-NUM" class="btn btn-outline-danger" type="button"><i class="fas fa-minus"></i></button>
 	</div>
 	<input type="hidden" id="bsl-book_id-NUM" name="bsl-book_id-NUM" value="{{books.id}}">
-	<span class="form-control col-lg-2">Book&nbsp;</span>
-	<input type="text" id="bsl-book_num-NUM" name="bsl-book_num-NUM" class="form-control col-lg-1" placeholder="number">
-	<span class="form-control col-lg-1">&nbsp;of&nbsp;</span>
-	<select class="form-control col" id="bsl-series_id-NUM" name="bsl-series_id-NUM">
+	<span class="form-control col-2">Book&nbsp;</span>
+	<input type="text" id="bsl-book_num-NUM" name="bsl-book_num-NUM" class="form-control col-1" placeholder="number">
+	<span class="form-control col-1">&nbsp;of&nbsp;</span>
+	<select class="form-select col" id="bsl-series_id-NUM" name="bsl-series_id-NUM">
 	{% for s in poss_series_list %}
 		<option value="{{s.id}}">{{s.title}}</option>
 	{% endfor %}
@@ -30,7 +30,7 @@ function ConfirmRemoveParentAndSubsFromSeries(pid,bid,rem)
 	else
 		all='this '
 	div=`
-		<div class="row col-lg-12">
+		<div class="row col-12">
 		<p class="lead">You have chosen to remove this (parent) book from a series.
 			What should we do with the sub-books for 
 		`
@@ -38,10 +38,10 @@ function ConfirmRemoveParentAndSubsFromSeries(pid,bid,rem)
 	div += `
 		series?</p>
 		</div class="row">
-		<div class="row col-lg-12">
-		<button id="RPS" class="btn btn-primary col-lg-2">Remove all children</button>
+		<div class="row col-12">
+		<button id="RPS" class="btn btn-primary col-2">Remove all children</button>
 		<button onClick="$('#dbox').modal('hide')" 
-			class="btn btn-outline-danger offset-lg-8 col-lg-2"> Cancel Series change</button>
+			class="btn btn-outline-danger offset-8 col-2"> Cancel Series change</button>
 		</div class="row">
 	`
 	$('#dbox-content').html(div)
@@ -54,12 +54,12 @@ function ConfirmRemoveThisSubs_ParentAndSubsFromSeries(pid,bid,rem)
 {
 	$('#dbox-title').html('Confirm: Removing Sub Book from Series')
 	div=`
-		<div class="row col-lg-12">
+		<div class="row col-12">
 		<p class="lead">You have chosen to remove this (sub) book from a series.
 			What should we do with the sub-books <span id="RPS-text"></span>
 		</p>
 		</div class="row">
-		<div class="row col-lg-12">
+		<div class="row col-12">
 		<button id="RPS" class="btn btn-primary col"></button>
 		<button id="RPS-one" onClick="alert('not yet')" class="btn btn-outline-primary col"></button>
 		<button onClick="$('#dbox').modal('hide')" class="btn btn-outline-danger col">
@@ -181,7 +181,7 @@ function AddAuthorToBook(num) {
 			<div class="input-group-prepend">
 				<button class="btn btn-outline-danger" type="button" onClick="RemoveAuthorFromBook(NUM)"><i class="fas fa-minus"></i></button>
 			</div>
-			<select class="form-control" name="author-NUM" id="author-NUM">
+			<select class="form-select" name="author-NUM" id="author-NUM">
 				{% for auth in author_list %}
 					{% set aname=auth.surname+", "+auth.firstnames %}
 					<option value="{{auth.id}}">{{aname}}</option>
@@ -198,30 +198,33 @@ function AddAuthorToBook(num) {
 
 {% set keys = [ 'title', 'author', 'publisher', 'genre', 'owned', 'covertype', 'condition', 'year_published', 'rating', 'notes', 'blurb' ] %}
 <div class="container-fluid">
-	<div class="form-row col-lg-10"><h3 class="offset-lg-2">{{page_title}}</h3></div>
+	<div class="form-row col-10"><h3 class="offset-2">{{page_title}}</h3></div>
 	<div class="row" id="main-row">
-		<form role="form" class="form col-lg-10" action="" method="POST">
+		<form role="form" class="form col-10" action="" method="POST">
 			{{ book_form.id }}
         	{{ book_form.csrf_token }}
 			{% if b.parent|length %}
 				<div class="form-row">
-					<label class="col-lg-2 col-form-label bg-secondary text-white">Parent Book:</label>
+				<div class="input-group">
+					<label class="input-group-text col-2 col-form-label bg-secondary text-white"><i>Parent Book:</i></label>
 					<div class="col">
-						<button disabled class="col btn btn-outline-primary">
-							<i><a href="/book/{{b.parent[0].id}}">{{b.parent[0].title}}</a></i>
-						</button>
+						<span class="col-12 d-flex h-100 border rounded-end border-primary">
+							<i class="col-12 d-flex h-100 justify-content-center"><a href="/book/{{b.parent[0].id}}">{{b.parent[0].title}}</a></i>
+						</span>
 					</div>
 					<input type="hidden" name="parent_id" value="{{b.parent[0].id}}">
 					<input type="hidden" name="parent_title" value="{{b.parent[0].title}}">
 				</div>
+				</div>
 			{% endif %}
 			{% for key in keys %}
 				<div class="form-row">
-					<label for="{{key}}" class="col-lg-2 col-form-label">{{key}}:</label>
+					<div class="input-group">
+					<label for="{{key}}" class="input-group-text col-2 justify-content-end">{{key}}:</label>
 					{% if key == "genre" %}
-							<div class="form-row col-lg-10">
+							<div class="row col-10">
 								{% for genre in genre_list %}
-									<div class="form-control col" style="margin-left:5px;margin-right:-5px;">
+									<div class="form-control col">
 										<input id="genre-{{genre.id}}" name="genre-{{genre.id}}" type="checkbox"
 										{% for book_g in books.genre %}
 											{% if book_g['name'] == genre.name %}
@@ -243,7 +246,7 @@ function AddAuthorToBook(num) {
 											<button class="btn btn-outline-danger" type="button" onClick="RemoveAuthorFromBook({{cnt.idx}})"><i class="fas fa-minus"></i></button>
 										</div>
 									{% endif %}
-									<select class="form-control" name="author-{{cnt.idx}}" id="author-{{cnt.idx}}">
+									<select class="form-select" name="author-{{cnt.idx}}" id="author-{{cnt.idx}}">
 									{% for auth in author_list %}
 										{% set aname=auth.surname+", "+auth.firstnames %}
 										<option value="{{auth.id}}"
@@ -258,7 +261,7 @@ function AddAuthorToBook(num) {
 							{% endfor %}
 							{% if cnt.idx == 0 %}
 								<div id="auth-div-{{cnt.idx}}" class="col input-group px-0">
-									<select class="form-control" name="author-{{cnt.idx}}" id="author-{{cnt.idx}}">
+									<select class="form-select" name="author-{{cnt.idx}}" id="author-{{cnt.idx}}">
 										{% for auth in author_list %}
 											{% set aname=auth.surname+", "+auth.firstnames %}
 											<option value="{{auth.id}}">{{aname}}</option>
@@ -281,16 +284,20 @@ function AddAuthorToBook(num) {
 								or key == 'condition' or key == 'blurb' )  %}
 								{{book_form[key](class="form-control", rows=rows, disabled="disabled" )}}
 								{# disabled fields do not come through in form post, so add hidden to make it work #}
-								<input type="hidden" name="{{key}}" value="{{book_form[key].data}}">
+									<input type="hidden" name="{{key}}" value="{{book_form[key].data}}">
+							{% elif key == 'publisher' or key == 'owned' or key == 'covertype' 
+								or key == 'condition' or key == 'rating' %}
+									{{book_form[key](class="form-select" )}}
 							{% else %}
-								{{book_form[key](class="form-control", rows=rows )}}
+									{{book_form[key](class="form-control", rows=rows )}}
 							{% endif %}
 						</div class="col">
 					{% endif %}
+					</div class="input-group">
 				</div class="form-row">
 			{% endfor %}
 			<div id="series_row" class="form-row">
-				<label for="series" class="col-lg-2 col-form-label">Series:</label>
+				<label for="series" class="col-2 col-form-label">Series:</label>
 				{# putting hidden inputs in between input-groups breaks formatting, so use this var to collect them and add just before form ends #}
 				{% set hiddens=namespace(txt='') %}
 				{% if books.series|length %}
@@ -354,7 +361,7 @@ function AddAuthorToBook(num) {
 			</div id="series_row">
 		{% if books.child_ref|length %}
 			<div class="form-row">
-				<label class="col-lg-2 col-form-label">Sub Books:</label>
+				<label class="col-2 col-form-label">Sub Books:</label>
 				<div class="col" id="sub_book_content">
 				</div>
 			</div>
@@ -362,12 +369,12 @@ function AddAuthorToBook(num) {
 		<div id="spacer"><br></div>
 		<div class="form-row">
 			<div class="form-row col mx-0">
-				{{ book_form.submit( class="btn btn-primary offset-lg-2 col-lg-2" )}}
+				{{ book_form.submit( class="btn btn-primary offset-2 col-2" )}}
 				{% if 'Edit' in page_title %}
 					{% if GetOwnedById(b.owned) == 'Sold' %}
-						{{ book_form.delete( class="btn btn-outline-danger col-lg-2" )}}
+						{{ book_form.delete( class="btn btn-outline-danger col-2" )}}
 					{% else %}
-						<span class="col-lg-2" tabindex="0" data-toggle="tooltip" 
+						<span class="col-2" tabindex="0" data-toggle="tooltip" 
 							title="Cannot Delete unless the book is saved as Sold">
 						{{ book_form.delete( class="btn btn-outline-danger col disabled", disabled="true", style="pointer-events: none;" )}}
 						</span>
@@ -396,15 +403,15 @@ function AddAuthorToBook(num) {
 		{% if 'Edit' in page_title %}
 			<div class="form-row">
 			{% if b.parent|length == 0 %}
-				<form role="form" class="form col-lg-10" action="{{url_for('new_book')}}" method="POST">
+				<form role="form" class="form col-10" action="{{url_for('new_book')}}" method="POST">
 					<input type="hidden" name="add_sub_parent_id" value="{{books.id}}">
-					{{ book_form.add_sub( class="btn btn-outline-success offset-lg-2 col-lg-2" )}}
+					{{ book_form.add_sub( class="btn btn-outline-success offset-2 col-2" )}}
 				</form>
 			{% else %}
-				<form role="form" class="form col-lg-10" action="{{url_for('remove_sub_book')}}" method="POST">
+				<form role="form" class="form col-10" action="{{url_for('remove_sub_book')}}" method="POST">
 					<input type="hidden" name="rem_sub_sub_book_id" value="{{books.id}}">
 					<input type="hidden" name="rem_sub_parent_id" value="{{b.parent[0].id}}">
-					{{ book_form.rem_sub( class="btn btn-outline-danger offset-lg-2 col-lg-3" )}}
+					{{ book_form.rem_sub( class="btn btn-outline-danger offset-2 col-3" )}}
 				</form>
 			{% endif %}
 			</div class="form-row">
diff --git a/templates/edit_id_name.html b/templates/edit_id_name.html
index 35ac3b1..aba7ad3 100644
--- a/templates/edit_id_name.html
+++ b/templates/edit_id_name.html
@@ -1,28 +1,27 @@
-{% extends "base.html" %} {% block main_content %}
-		<div class="container">
-			<h3 class="offset-lg-2">{{page_title}}</h3>
-			<div class="row">
-				<form class="form form-inline col-xl-12" action="" method="POST">
-					{% for field in form %}
+{% extends "base.html" %}
+{% block main_content %}
+	<div class="container">
+		<h3 class="offset-2">{{page_title}}</h3>
+        	<div class="row">
+            	<form action="" method="POST">
+                	{% for field in form %}
 						{% if field.type == 'HiddenField' or field.type == 'CSRFTokenField' %}
-							{{field}}<br>
-						{% elif field.type != 'SubmitField' %}
-							<div class="form-row col-lg-12">
-							{{ field.label( class="col-lg-2" ) }}
-							{{ field( class="form-control col-lg-4" ) }}
-							</div class="form-row col-lg-12">
-						{% endif %}
-					{% endfor %}
-					<div class="row col-lg-12">
-					<br>
-					</div class="row">
-					<div class="form-row col-lg-12">
-						{{ form.submit( class="btn btn-primary offset-lg-2 col-lg-2" )}}
-						{% if 'Edit' in page_title %}
-							{{ form.delete( class="btn btn-outline-danger col-lg-2" )}}
-						{% endif %}
-					</div class="form-row">
-				</form>
-			</div class="row">
-		</div class="container">
+							{{field}}
+                        {% elif field.type != 'SubmitField' %}
+                            <div class="input-group">
+								{{ field.label( class="input-group-text col-2 justify-content-end" ) }}
+								{% if field.type == 'SelectField' %}
+									{{ field( class="form-select col-9" ) }}
+								{% else %}
+									{{ field( class="form-control col-9" ) }}
+								{% endif %}
+                            </div class="">
+                        {% endif %}
+                    {% endfor %}
+                    <div class="form-row col-12">
+                        {{form.submit(class="btn btn-primary offset-2 col-2 mt-4" )}}
+                    </div class="row">
+                </div class="form">
+            </div class="row">
+        </div class="container">
 {% endblock main_content %}