diff --git a/application/controllers/Notes.php b/application/controllers/Notes.php
index 6f6a5ada..f4356398 100644
--- a/application/controllers/Notes.php
+++ b/application/controllers/Notes.php
@@ -8,9 +8,9 @@ class Notes extends CI_Controller {
 		$this->load->model('note');
 		$data['notes'] = $this->note->list_all();
 		$data['page_title'] = "Notes";
-		$this->load->view('layout/header', $data);
+		$this->load->view('interface_assets/header', $data);
 		$this->load->view('notes/main');
-		$this->load->view('layout/footer');
+		$this->load->view('interface_assets/footer');
 	}
 	
 	/* Provides function for adding notes to the system. */
@@ -27,9 +27,9 @@ class Notes extends CI_Controller {
 		if ($this->form_validation->run() == FALSE)
 		{
 			$data['page_title'] = "Add Notes";
-			$this->load->view('layout/header', $data);
+			$this->load->view('interface_assets/header', $data);
 			$this->load->view('notes/add');
-			$this->load->view('layout/footer');
+			$this->load->view('interface_assets/footer');
 		}
 		else
 		{	
@@ -47,9 +47,9 @@ class Notes extends CI_Controller {
 		
 		// Display
 		$data['page_title'] = "Note";
-		$this->load->view('layout/header', $data);
+		$this->load->view('interface_assets/header', $data);
 		$this->load->view('notes/view');
-		$this->load->view('layout/footer');
+		$this->load->view('interface_assets/footer');
 	}
 	
 	/* Edit Notes */
@@ -68,9 +68,9 @@ class Notes extends CI_Controller {
 		if ($this->form_validation->run() == FALSE)
 		{
 			$data['page_title'] = "Edit Note";
-			$this->load->view('layout/header', $data);
+			$this->load->view('interface_assets/header', $data);
 			$this->load->view('notes/edit');
-			$this->load->view('layout/footer');
+			$this->load->view('interface_assets/footer');
 		}
 		else
 		{
diff --git a/application/views/notes/add.php b/application/views/notes/add.php
index 8c26e769..863638a9 100644
--- a/application/views/notes/add.php
+++ b/application/views/notes/add.php
@@ -1,11 +1,10 @@
 
-<div id="container">
+<div class="container notes">
 
-	<h2>Add Note</h2>
+<div class="card">
+  <div class="card-body">
+    <h2 class="card-title">Create Note</h2>
 
-	<div class="row show-grid">
-	  <div class="span13">
-	  
 		<?php echo validation_errors(); ?>
 		<form method="post" action="<?php echo site_url('notes/add'); ?>" name="notes_add" id="notes_add">
 		<table>
@@ -25,58 +24,13 @@
 			
 			<tr>
 				<td></td>
-				<td><textarea name="content" id="markItUp" rows="10" cols="10"></textarea></td>
+				<td><textarea name="content" id="markItUp" rows="10" cols="70"></textarea></td>
 			</tr>
 		</table>
 
 		<div class="actions"><input class="btn primary" type="submit" value="Submit" /></div>
 
-
-
-	  </div>
-	  <div class="span2 offset1">
-	  </div>
-	</div>
-
+  </div>
 </div>
 
-<script type="text/javascript"> 
-<!--
-$(document).ready(function()	{
-	// Add markItUp! to your textarea in one line
-	// $('textarea').markItUp( { Settings }, { OptionalExtraSettings } );
-	$('#markItUp').markItUp(mySettings);
-
-	// You can add content from anywhere in your page
-	// $.markItUp( { Settings } );	
-	$('.add').click(function() {
-		$.markItUp( { 	openWith:'<opening tag>',
-						closeWith:'<\/closing tag>',
-						placeHolder:"New content"
-					}
-				);
-		return false;
-	});
-
-	// And you can add/remove markItUp! whenever you want
-	// $(textarea).markItUpRemove();
-	$('.toggle').click(function() {
-		if ($("#markItUp.markItUpEditor").length === 1) {
-			$("#markItUp").markItUpRemove();
-			$("span", this).text("get markItUp! back");
-		} else {
-			$('#markItUp').markItUp(mySettings);
-			$("span", this).text("remove markItUp!");
-		}
-		return false;
-	});
-});
--->
-</script> 
-<script type="text/javascript" src="<?php echo base_url(); ?>markitup/jquery.markitup.js"></script> 
-<!-- markItUp! toolbar settings --> 
-<script type="text/javascript" src="<?php echo base_url(); ?>markitup/sets/html/set.js"></script> 
-<!-- markItUp! skin --> 
-<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>markitup/skins/markitup/style.css" /> 
-<!--  markItUp! toolbar skin --> 
-<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>markitup/sets/html/style.css" /> 
\ No newline at end of file
+</div>
diff --git a/application/views/notes/edit.php b/application/views/notes/edit.php
index 7eca9028..a023ddb8 100644
--- a/application/views/notes/edit.php
+++ b/application/views/notes/edit.php
@@ -1,11 +1,11 @@
-<div id="container">
+<div class="container notes">
 <?php foreach ($note->result() as $row) { ?>
-	<h2>Edit Note - <?php echo $row->title; ?></h2>
+<div class="card">
+  <div class="card-body">
+    <h2 class="card-title">Edit Note - <?php echo $row->title; ?></h2>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+
 
-	<div class="row show-grid">
-	  <div class="span13">
-	  
-	
 	<?php echo validation_errors(); ?>
 	<form method="post" action="<?php echo site_url('notes/edit'); ?>/<?php echo $id; ?>" name="notes_add" id="notes_add">
 	<table>
@@ -25,62 +25,21 @@
 		
 		<tr>
 			<td><input type="hidden" name="id" value="<?php echo $id; ?>" /></td>
-			<td><textarea name="content" id="markItUp" rows="10" cols="5"><?php echo $row->note; ?></textarea></td>
+			<td><textarea name="content" id="markItUp" rows="10" cols="75"><?php echo $row->note; ?></textarea></td>
 		</tr>
 	</table>
 
 	<div class="actions"><input class="btn primary" type="submit" value="Submit" /></div>
 
 	</form>
+  </div>
+</div>
+	  
+	
 
 
 	  </div>
-	  <div class="span2 offset1">
-	 	 <a class="btn primary" href="<?php echo site_url('notes/edit'); ?>/<?php echo $row->id; ?>">Edit Note</a>
-	 	 <br/><br/>
-	 	 <a class="btn" href="<?php echo site_url('notes/delete'); ?>/<?php echo $row->id; ?>">Delete Note</a>
-	  </div>
+
 	</div>
 <?php } ?>
 </div>
-
-<script type="text/javascript"> 
-<!--
-$(document).ready(function()	{
-	// Add markItUp! to your textarea in one line
-	// $('textarea').markItUp( { Settings }, { OptionalExtraSettings } );
-	$('#markItUp').markItUp(mySettings);
-
-	// You can add content from anywhere in your page
-	// $.markItUp( { Settings } );	
-	$('.add').click(function() {
-		$.markItUp( { 	openWith:'<opening tag>',
-						closeWith:'<\/closing tag>',
-						placeHolder:"New content"
-					}
-				);
-		return false;
-	});
-
-	// And you can add/remove markItUp! whenever you want
-	// $(textarea).markItUpRemove();
-	$('.toggle').click(function() {
-		if ($("#markItUp.markItUpEditor").length === 1) {
-			$("#markItUp").markItUpRemove();
-			$("span", this).text("get markItUp! back");
-		} else {
-			$('#markItUp').markItUp(mySettings);
-			$("span", this).text("remove markItUp!");
-		}
-		return false;
-	});
-});
--->
-</script> 
-<script type="text/javascript" src="<?php echo base_url(); ?>markitup/jquery.markitup.js"></script> 
-<!-- markItUp! toolbar settings --> 
-<script type="text/javascript" src="<?php echo base_url(); ?>markitup/sets/html/set.js"></script> 
-<!-- markItUp! skin --> 
-<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>markitup/skins/markitup/style.css" /> 
-<!--  markItUp! toolbar skin --> 
-<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>markitup/sets/html/style.css" /> 
\ No newline at end of file
diff --git a/application/views/notes/main.php b/application/views/notes/main.php
index 3907a575..74f61d87 100644
--- a/application/views/notes/main.php
+++ b/application/views/notes/main.php
@@ -1,33 +1,28 @@
-<div id="container">
+<div class="container notes">
 
-	<h2>Note</h2>
+	<div class="card">
+	  <div class="card-body">
+	    <h2 class="card-title">Notes</h2>
+	    <p class="card-body"><a href="<?php echo site_url('notes/add'); ?>" class="btn btn-primary">Create a Note</a><p>
 
-	<div class="row show-grid">
-	  <div class="span13">
-	  
-		<?php
+	    		<?php
 
-			if ($notes->num_rows() > 0)
-			{
-				echo "<ul class=\"notes_list\">";
-				foreach ($notes->result() as $row)
+				if ($notes->num_rows() > 0)
 				{
-					echo "<li>";
-					echo "<a href=\"".site_url()."/notes/view/".$row->id."\">".$row->title."</a>";
-					echo "</li>";
+					echo "<h3>Your Notes</h3>";
+					echo "<ul class=\"list-group\">";
+					foreach ($notes->result() as $row)
+					{
+						echo "<li class=\"list-group-item\">";
+						echo "<a href=\"".site_url()."/notes/view/".$row->id."\">".$row->title."</a>";
+						echo "</li>";
+					}
+					echo "</ul>";
+				} else {
+					echo "<p>You don't currently have any notes, these are a fantastic way of storing data like ATU settings, beacons and general station notes and its better than paper as you can't lose them!</p>";
 				}
-				echo "</ul>";
-			} else {
-				echo "<p>You don't currently have any notes, these are a fantastic way of storing data like ATU settings, beacons and general station notes and its better than paper as you can't lose them!</p>";
-			}
 
-		?>
-
-
-	  </div>
-	  <div class="span2 offset1">
-	  <a class="btn primary" href="<?php echo site_url('notes/add'); ?>">Create Note</a>
+			?>
 	  </div>
 	</div>
-
 </div>
diff --git a/application/views/notes/view.php b/application/views/notes/view.php
index 4b63b0b8..5f351dc8 100644
--- a/application/views/notes/view.php
+++ b/application/views/notes/view.php
@@ -1,19 +1,16 @@
-<div id="container">
-<?php foreach ($note->result() as $row) { ?>
-	<h2>Note - <?php echo $row->title; ?></h2>
+<div class="container notes">
 
-	<div class="row show-grid">
-	  <div class="span13">
-	  
-	<?php echo nl2br($row->note); ?>
+	<div class="card"">
+	  <div class="card-body">
+	  	<?php foreach ($note->result() as $row) { ?>
+	    <h2 class="card-title">Note - <?php echo $row->title; ?></h2>
+	    <p class="card-text"><?php echo nl2br($row->note); ?></p>
 
+	    <a href="<?php echo site_url('notes/edit'); ?>/<?php echo $row->id; ?>" class="btn btn-primary"><i class="fas fa-edit"></i> Edit Note</a>
+
+	    <a href="<?php echo site_url('notes/delete'); ?>/<?php echo $row->id; ?>" class="btn btn-danger"><i class="fas fa-trash-alt"></i> Delete Note</a>
+	    <?php } ?>
+	  </div
+>	</div>
 
-	  </div>
-	  <div class="span2 offset1">
-	 	 <a class="btn primary" href="<?php echo site_url('notes/edit'); ?>/<?php echo $row->id; ?>">Edit Note</a>
-	 	 <br/><br/>
-	 	 <a class="btn" href="<?php echo site_url('notes/delete'); ?>/<?php echo $row->id; ?>">Delete Note</a>
-	  </div>
-	</div>
-<?php } ?>
 </div>
\ No newline at end of file
diff --git a/assets/css/general.css b/assets/css/general.css
index f6a930ec..35846dff 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -20,4 +20,8 @@
 
 .statistics_custom {
 	padding-top: 15px;
+}
+
+.notes {
+	padding-top: 15px;
 }
\ No newline at end of file