diff --git a/assets/global.css b/assets/global.css
index b8cecde..b6241f8 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -10,12 +10,6 @@
 .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
    color: var(--mdc-theme-primary);
 }
-.mdc-fab {
-   background-color: var(--mdc-theme-secondary);
-}
-.material-icons:hover {
-    text-decoration: none;
-}
 
 /* hide unwanted overflow from mdc-text-field :before & :after */
 .mdc-text-field-container {
@@ -65,8 +59,22 @@ body {
     margin: 20px;
 }
 
-/* for cookie notice */
+/* ensure that buttons' colours don't change on hover and background colour changes are animated */
+.mdc-button:hover, .mdc-fab:hover, .material-icons:hover, .mdc-button:focus, .mdc-fab:focus, .material-icons:focus {
+    text-decoration: none;
+    transition: background-color 0.75s;
+}
+.mdc-button:hover {
+    color: var(--mdc-theme-primary);
+}
+.mdc-fab:hover {
+    color: #fff;
+}
+.mdc-fab::before, .mdc-top-app-bar__action-item::before, .mdc-top-app-bar__navigation-icon::before {
+    transition-duration: 0.15s;
+}
 
+/* for cookie notice */
 #cookies {
     display: none;
     width: 100%;
diff --git a/computer-science-blog/css/main.css b/computer-science-blog/css/main.css
index 4b4c7e4..6868a58 100644
--- a/computer-science-blog/css/main.css
+++ b/computer-science-blog/css/main.css
@@ -1,11 +1,11 @@
 /* Reading School 2018, CSS*/
 .carousel-inner {
-	height: 500px;
+	height: 250px;
 }
 .carousel-inner .item {
 	height: 100%;
 }
-.carousel-inner iframe {
+.carousel-inner div {
 	width: 100%;
 	border: none;
 	height: 100%;
@@ -22,6 +22,13 @@
 .presentation-button-right {
 	float: right;
 }
+/* ensure content below buttons doesn't cover them */
+.presentation-buttons-container {
+	width: 100%;
+	min-height: 32px;
+}
+
+/* add side margins depending on screen size */
 #main-content {
 	text-align: left;
 	margin: 20px 15%;
diff --git a/computer-science-blog/index.html b/computer-science-blog/index.html
index 8bb4d32..4944dbd 100644
--- a/computer-science-blog/index.html
+++ b/computer-science-blog/index.html
@@ -75,30 +75,31 @@
                    <p>The current date is: <span id="current_date">unknown</span></p>
 					<div id="blog-insert"></div>
 					<h1>HTTP Introduction</h1>
+                    <div class="presentation-container">
+                        <div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
+                           <!-- Indicators -->
+                           <ol class="carousel-indicators">
+                           </ol>
 
-                   <div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
-                       <!-- Indicators -->
-                       <ol class="carousel-indicators">
-                       </ol>
-
-                       <!-- Wrapper for slides -->
-                       <div class="carousel-inner">
-                           <!--<div class="item">-->
-                           <!--    <img src="la.jpg" alt="Los Angeles" style="width:100%;">-->
-                           <!--</div>-->
+                           <!-- Wrapper for slides -->
+                           <div class="carousel-inner">
+                               <!--<div class="item">-->
+                               <!--    <img src="la.jpg" alt="Los Angeles" style="width:100%;">-->
+                               <!--</div>-->
+                           </div>
                        </div>
-                   </div>
-                   <div class="presentation-buttons-container">
-                       <!-- button to go to previous slide -->
-                       <button class="presentation-button-left mdc-button mdc-button--outlined" href="#presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
-                           <i class="material-icons mdc-button__icon">navigate_before</i>
-                           Previous
-                       </button>
-                       <!-- button to go to next slide -->
-                       <button class="presentation-button-right mdc-button mdc-button--outlined" href="#presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
-                           Next
-                           <i class="material-icons mdc-button__icon">navigate_next</i>
-                        </button>
+                       <div class="presentation-buttons-container">
+                           <!-- button to go to previous slide -->
+                           <button class="presentation-button-left mdc-button mdc-button--outlined" href="#http_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
+                               <i class="material-icons mdc-button__icon">navigate_before</i>
+                               Previous
+                           </button>
+                           <!-- button to go to next slide -->
+                           <button class="presentation-button-right mdc-button mdc-button--outlined" href="#http_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
+                               Next
+                               <i class="material-icons mdc-button__icon">navigate_next</i>
+                            </button>
+                        </div>
                     </div>
                     
                     <!-- HTML presentation -->
@@ -115,19 +116,19 @@
                     </div>
                     <div class="presentation-buttons-container">
                         <!-- button to go to previous slide -->
-                        <button class="presentation-button-left mdc-button mdc-button--outlined" href="#presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
+                        <button class="presentation-button-left mdc-button mdc-button--outlined" href="#html_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
                             <i class="material-icons mdc-button__icon">navigate_before</i>
                             Previous
                         </button>
                         <!-- button to go to next slide -->
-                        <button class="presentation-button-right mdc-button mdc-button--outlined" href="#presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
+                        <button class="presentation-button-right mdc-button mdc-button--outlined" href="#html_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
                             Next
                             <i class="material-icons mdc-button__icon">navigate_next</i>
                         </button>
                     </div>
 
                     <!-- link to source code on GitHub -->
-                    <a href="https://github.com/mgrove36/demo-code/blob/master/computer-science-blog/index.html" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
+                    <a href="https://github.com/mgrove36/demo-code/tree/master/computer-science-blog/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
                </div>
             </main>
             <footer>
diff --git a/computer-science-blog/pages/hyperlinks.html b/computer-science-blog/pages/hyperlinks.html
index efce9f7..58581a7 100644
--- a/computer-science-blog/pages/hyperlinks.html
+++ b/computer-science-blog/pages/hyperlinks.html
@@ -1,23 +1,12 @@
 <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
-
-		<!-- styles -->
-		<!-- <link rel="stylesheet" type="text/css" href="../css/pages.css"> -->
-
-		<!-- scripts -->
-		<!-- <script type="text/javascript" src="../scripts/scripts.js"></script> -->
-	</head>
-	<body>
-		<h1>Hyperlinks</h1>
-		A hyperlink is simply a link on the web to some other resource. It uses a special kind of command that jumps you to some other content in your web browser, usually to another page. 
-		The way to tell if something is a hyperlink is by seeing if your mouse becomes a pointing hand when hovering over it. It is also usually either displayed as blue underlined text or an image/advert. However, the appearance does not change the function.
-		Some website owners wish to reserve the right to not be hyperlinked without permission.
-		Creating a hyperlink in html:
-		<code>&lt;a href="LINK GOES HERE"&gt;TEXT GOES HERE&lt;/a&gt;</code>
-	</body>
-</html>
+<h3>Hyperlinks</h3>
+<p>
+	A hyperlink is simply a link on the web to some other resource. It uses a special kind of command that jumps you to some other content in your web browser, usually to another page. 
+	<br>
+	The way to tell if something is a hyperlink is by seeing if your mouse becomes a pointing hand when hovering over it. It is also usually either displayed as blue underlined text or an image/advert. However, the appearance does not change the function.
+	<br>
+	Some website owners wish to reserve the right to not be hyperlinked without permission.
+	<br>
+	Creating a hyperlink in html:
+	<code>&lt;a href="LINK GOES HERE"&gt;TEXT GOES HERE&lt;/a&gt;</code>
+</p>
diff --git a/computer-science-blog/scripts/scripts.js b/computer-science-blog/scripts/scripts.js
index 58a85dc..ee6e751 100644
--- a/computer-science-blog/scripts/scripts.js
+++ b/computer-science-blog/scripts/scripts.js
@@ -40,29 +40,33 @@ window.onload = function() {
     $("#current_date").html(current_date);
 
 	// define variables for HTTP presentation pages
-	http_pages = ["pages/hyperlinks.html"];
+	http_pages = ["hyperlinks", "http", "https", "cookies"];
 	// displays HTTP presentation pages
 	http_pages.forEach(function(item, index) {
-		if (index == 0) {
-			$("#http_presentation .carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>');
-			$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" class="active" data-slide-to="' + index + '"></li>')
-		} else {
-			$("#http_presentation .carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>');
-			$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" data-slide-to="' + index + '"></li>')
-		}
+		$.get("pages/" + item + ".html", function(content) {
+			if (index == 0) {
+				$("#http_presentation .carousel-inner").append('<div class="item active">' + content + '</div>');
+				$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" class="active" data-slide-to="' + index + '"></li>')
+			} else {
+				$("#http_presentation .carousel-inner").append('<div class="item">' + content + '</div>');
+				$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" data-slide-to="' + index + '"></li>')
+			}
+		});
 	});
 	
    	// define variables for HTML presentation pages
-   	html_pages = ["pages/page_1.html"];
+   	html_pages = ["page"];
    	// displays HTML presentation pages
    	html_pages.forEach(function(item, index) {
-   		if (index == 0) {
-   			$("#html_presentation .carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>');
-   			$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" class="active" data-slide-to="' + index + '"></li>')
-   		} else {
-   			$("#html_presentation .carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>');
-   			$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" data-slide-to="' + index + '"></li>')
-   		}
+   		$.get("pages/" + item + ".html", function(content) {
+	   		if (index == 0) {
+	   			$("#html_presentation .carousel-inner").append('<div class="item active">' + content + '</div>');
+	   			$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" class="active" data-slide-to="' + index + '"></li>')
+	   		} else {
+	   			$("#html_presentation .carousel-inner").append('<div class="item">' + content + '</div>');
+	   			$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" data-slide-to="' + index + '"></li>')
+	   		}
+   		});
    	});
 
 	// displays first blog page
diff --git a/luhn-algorithm/index.html b/luhn-algorithm/index.html
index ae73d01..25689f4 100644
--- a/luhn-algorithm/index.html
+++ b/luhn-algorithm/index.html
@@ -93,7 +93,7 @@
                     <p id="validation_message"></p>
 
                     <!-- link to source code on GitHub -->
-                    <a href="https://github.com/mgrove36/demo-code/blob/master/luhn-algorithm/index.html" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
+                    <a href="https://github.com/mgrove36/demo-code/tree/master/luhn-algorithm/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
                 </div>
             </main>
             <footer>
diff --git a/page-inserts/navbar.html b/page-inserts/navbar.html
index f22658f..8fb2ae7 100644
--- a/page-inserts/navbar.html
+++ b/page-inserts/navbar.html
@@ -15,5 +15,9 @@
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
             <span class="mdc-list-item__text">Luhn Algorithm</span>
         </a>
+        <a class="mdc-list-item" href="/computer-science-blog/">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">code</i>
+            <span class="mdc-list-item__text">GCSE Computer Science Blog</span>
+        </a>
     </div>
 </div>