diff --git a/images/Favicon.ico b/images/Favicon.ico
new file mode 100644
index 0000000..2b9fa7c
Binary files /dev/null and b/images/Favicon.ico differ
diff --git a/pages/Gallery.js b/pages/Gallery.js
index 86f12a1..121715a 100644
--- a/pages/Gallery.js
+++ b/pages/Gallery.js
@@ -1,24 +1,28 @@
-import {slidem, slides} from "/gallery-index.js";
+import {slide, slides} from "../pages/gallery-index.js";
 
 var currentSlide = 0;
 
 
-function nextSlide(){
+window.nextSlide = function nextSlide(){
     currentSlide++;
     updateSlide();
 }
 
-function lastSlide(){
+window.lastSlide = function lastSlide(){
     currentSlide--;
     updateSlide();
 }
 
 function updateSlide(){
-    if (currentSlide > slides.length){
+    if (currentSlide > slides.length-1){
         currentSlide = 0;
     } else if (currentSlide < 0){
-        currentSlide = slides.length;
+        currentSlide = slides.length-1;
     }
+    document.getElementById("programGalleryTitle").innerHTML = slides[currentSlide].title;
+    document.getElementById("programGalleryCaption").innerHTML = slides[currentSlide].caption;
+    document.getElementById("programGalleryImage").src = slides[currentSlide].image;
+    document.getElementById("programGalleryLink").href = slides[currentSlide].link;
+}
 
-    console.log(slides[currentSlide]);
-}
\ No newline at end of file
+console.log("script loaded");
\ No newline at end of file
diff --git a/pages/Index.html b/pages/Index.html
index 9ac6d85..60d3bd7 100644
--- a/pages/Index.html
+++ b/pages/Index.html
@@ -2,10 +2,11 @@
 
 <header>
     <link rel = "stylesheet" href = "Mainpage.css">
-    <script src = "\gallery.js" type = "module"></script>
+    <link rel = "icon" href = "..\images\Favicon.ico">
 
     <meta charset="UTF-8">
 
+    <script src = "gallery.js" type = "module"></script>
     <title>Nye Evans Portfolio</title>
 </header>
 
@@ -38,11 +39,11 @@
     </div>
 
     <div id = "programGallery">
-        <img src = "gallery\Cat_tower_defense\projectHeaderImage.png" class = "GalleryImage">
-        <p class = "GalleryTitle orangeBack">Image Title</p>
-        <p class = "GalleryCaption orangeBack">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <button class = "GalleryLeftArrow" onClick = lastSlide()>◄</button>
-        <button class = "GalleryRightArrow" onClick = nextSlide()>►</button>
+        <a href = "\gallery\Cat_tower_defense\cat-tower-defense.html"  class = "GalleryImage" id = "programGalleryLink"><img src = "gallery\Cat_tower_defense\projectHeaderImage.png"  class = "GalleryImage" id = "programGalleryImage"></a>
+        <p class = "GalleryTitle orangeBack" id = "programGalleryTitle">Image Title</p>
+        <p class = "GalleryCaption orangeBack" id = "programGalleryCaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <button class = "GalleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
+        <button class = "GalleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
     </div>
 
     <div id = "personalGallery" style = "margin-bottom: 40vh;">
diff --git a/pages/gallery-index.js b/pages/gallery-index.js
index 27a8204..bab106a 100644
--- a/pages/gallery-index.js
+++ b/pages/gallery-index.js
@@ -1,11 +1,12 @@
 export class slide{
-    constructor(title, caption, image){
+    constructor(title, caption, image, link){
         this.title = title;
         this.caption = caption;
         this.image = image;
+        this.link = link;
     }
-};
-export var slides = [slide(),
-    slide(), 
-    slide()
-]
\ No newline at end of file
+}
+export var slides = [new slide("john", "he is john", "gallery/Cat_tower_defense/projectHeaderImage.png"),
+    new slide("james", "he is james", "gallery/EPQ_project/projectHeaderImage.png"), 
+    new slide("jack", "he is jack", "gallery/Room_builder/projectHeaderImage.png")
+];
\ No newline at end of file
diff --git a/pages/gallery/Cat_tower_defense/cat-tower-defense.html b/pages/gallery/Cat_tower_defense/cat-tower-defense.html
new file mode 100644
index 0000000..b2eacd9
--- /dev/null
+++ b/pages/gallery/Cat_tower_defense/cat-tower-defense.html
@@ -0,0 +1,5 @@
+<HMTL>
+    <body>
+        dgsdfsdfsfsf
+    </body>
+</HMTL>
\ No newline at end of file
diff --git a/pages/gallery/EPQ_project/projectHeaderImage.png b/pages/gallery/EPQ_project/projectHeaderImage.png
new file mode 100644
index 0000000..6f5f181
Binary files /dev/null and b/pages/gallery/EPQ_project/projectHeaderImage.png differ
diff --git a/pages/gallery/Room_builder/projectHeaderImage.png b/pages/gallery/Room_builder/projectHeaderImage.png
new file mode 100644
index 0000000..a7fffd8
Binary files /dev/null and b/pages/gallery/Room_builder/projectHeaderImage.png differ