diff --git a/application/controllers/Logbook.php b/application/controllers/Logbook.php
index b2faa6cb..3182bb4e 100755
--- a/application/controllers/Logbook.php
+++ b/application/controllers/Logbook.php
@@ -189,7 +189,7 @@ class Logbook extends CI_Controller {
 		echo "]";
 		echo "}";
 	}
-
+ 
 	function view($id) {
 		$this->load->model('user_model');
 				if(!$this->user_model->authorize($this->config->item('auth_mode'))) { return; }
@@ -198,8 +198,10 @@ class Logbook extends CI_Controller {
 
 		$this->db->where('COL_PRIMARY_KEY', $id);
 		$data['query'] = $this->db->get($this->config->item('table_name'));
-
-		$this->load->view('view_log/qso', $data);
+		
+		$this->load->view('interface_assets/mini_header', $data);
+		$this->load->view('view_log/qso');
+		$this->load->view('interface_assets/footer');
 	}
 
 	function partial($id) {
diff --git a/application/views/interface_assets/footer.php b/application/views/interface_assets/footer.php
index 941bde61..d2b986e1 100644
--- a/application/views/interface_assets/footer.php
+++ b/application/views/interface_assets/footer.php
@@ -89,7 +89,7 @@ $(document).ready(function(){
 </script>
 <?php } ?>
 
-<?php if ($this->uri->segment(1) == "logbook") { ?>
+<?php if ($this->uri->segment(1) == "logbook" && $this->uri->segment(2) != "view") { ?>
     <script type="text/javascript" src="<?php echo base_url();?>assets/js/leaflet/leafembed.js"></script>
     <script type="text/javascript">
       
@@ -375,6 +375,26 @@ $(document).ready(function(){
 
 <?php } ?>
 
+<?php if ($this->uri->segment(1) == "logbook" && $this->uri->segment(2) == "view") { ?>
+<script>
+
+  var mymap = L.map('map').setView([lat,long], 5);
+
+  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+    maxZoom: 18,
+    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, ' +
+      'Generated by <a href="http://www.cloudlog.co.uk/">Cloudlog</a>',
+    id: 'mapbox.streets'
+  }).addTo(mymap);
+
+  L.marker([lat,long]).addTo(mymap)
+    .bindPopup(callsign);
+
+  mymap.on('click', onMapClick);
+
+</script>
+<?php } ?>
+
 <?php if ($this->uri->segment(1) == "update") { ?>
 <script>
 $(document).ready(function(){
diff --git a/application/views/interface_assets/header.php b/application/views/interface_assets/header.php
index 2b785cee..1728ee28 100644
--- a/application/views/interface_assets/header.php
+++ b/application/views/interface_assets/header.php
@@ -22,6 +22,7 @@
   </head>
   <body>
 
+
 <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
 		<a class="navbar-brand" href="<?php echo site_url(); ?>">Cloudlog</a>
 
@@ -114,4 +115,4 @@
 		</form>
 		<?php } ?>
   </div>
-</nav>
\ No newline at end of file
+</nav>
diff --git a/application/views/interface_assets/mini_header.php b/application/views/interface_assets/mini_header.php
new file mode 100644
index 00000000..9d185004
--- /dev/null
+++ b/application/views/interface_assets/mini_header.php
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/bootstrap.min.css">
+    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/fontawesome/css/all.css">
+
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
+
+    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/general.css">
+
+    <!-- Maps -->
+    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/leaflet/leaflet.css" />
+
+    <link rel="icon" href="<?php echo base_url(); ?>/favicon.ico">
+
+    <title><?php if(isset($page_title)) { echo $page_title; } ?> - Cloudlog</title>
+  </head>
+  <body>
\ No newline at end of file
diff --git a/application/views/view_log/qso.php b/application/views/view_log/qso.php
index 92a65aa1..9861c8d8 100644
--- a/application/views/view_log/qso.php
+++ b/application/views/view_log/qso.php
@@ -1,36 +1,12 @@
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-<head>
-	<title>View QSO Info</title>
-	<link rel="stylesheet" href="<?php echo base_url();?>css/reset.css" type="text/css" />
-	<style type="text/css" media="screen">
-		body { font-family: Arial, "Trebuchet MS", sans-serif; font-size: 12px;}
-		h1 { font-weight: bold; font-size: 23px; margin-top: 5px; margin-bottom: 10px; }
-		
-		h2 { font-weight: bold; font-size: 18px; margin-top: 5px; margin-bottom: 10px; }
-		
-		h3 { font-weight: bold; font-size: 14px; margin-top: 10px; margin-bottom: 10px; }
-		
-		.clear { clear: both }
-		#info { float: left; width: 50%; }
-		#stat { float: right; width: 50%; }
-		td { padding: 5px; }
-		p {
-line-height: 1.7;
-margin: 10px 0;
-}
-	</style>
-	<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-1.5.1.min.js"></script>	
-    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>js/leaflet/leaflet.css" />
-	<script type="text/javascript" src="<?php echo base_url(); ?>js/leaflet/leaflet.js"></script>
-</head>
 
-<body>
 <?php if ($query->num_rows() > 0) {  foreach ($query->result() as $row) {
 ?>
-	<h1>QSO with <?php echo $row->COL_CALL; ?> on the <?php $timestamp = strtotime($row->COL_TIME_ON); echo date('d/m/y', $timestamp); $timestamp = strtotime($row->COL_TIME_ON); echo " at ".date('H:i', $timestamp); ?></h1>
+	<h4>QSO with <?php echo $row->COL_CALL; ?> on the <?php $timestamp = strtotime($row->COL_TIME_ON); echo date('d/m/y', $timestamp); $timestamp = strtotime($row->COL_TIME_ON); echo " at ".date('H:i', $timestamp); ?></h4>
 	
-	<div id="wrap">
-		<div id="info">
+
+	<div class="row">
+		<div class="col">
+			
 			<table width="100%">
 				<tr>
 					<td>Date/Time</td>
@@ -145,11 +121,11 @@ margin: 10px 0;
 				<h3>LoTW</h3>
 					<p>This QSO is confirmed on Lotw</p>
 				<?php } ?>
-		</div>
-		
-		<div id="stat">
 
-<div id="map" style="width: 340px; height: 250px"></div> 
+		</div>
+		<div class="col">
+			
+			<div id="map" style="width: 340px; height: 250px"></div> 
 
 <?php
 	if($row->COL_GRIDSQUARE != null) {
@@ -172,30 +148,13 @@ margin: 10px 0;
 	}
 ?>
 
-
 <script>
-
-	var mymap = L.map('map').setView([<?php echo $lat; ?>,<?php echo $lng; ?>], 5);
-
-	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
-		maxZoom: 18,
-		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, ' +
-			'Generated by <a href="http://www.cloudlog.co.uk/">Cloudlog</a>',
-		id: 'mapbox.streets'
-	}).addTo(mymap);
-
-	L.marker([<?php echo $lat; ?>,<?php echo $lng; ?>]).addTo(mymap)
-		.bindPopup("<?php echo $row->COL_CALL; ?>");
-
-	mymap.on('click', onMapClick);
-
+var lat = <?php echo $lat; ?>;
+var long = <?php echo $lng; ?>;
+var callsign = "<?php echo $row->COL_CALL; ?>";
 </script>
 
-		</div>
-	</div>
 <?php } } ?>
-</body>
-</html>
 <?php 
   // converts a frequency in Hz (e.g. 3650) to 3.650 MHz 
   function frequency_display_string($frequency)
