diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..9c8a1b3
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,62 @@
+body {
+  margin: 0;
+  background-color: lightblue;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.home-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.about-page {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  justify-items: center;
+  gap: 1em;
+}
+
+.about-page img {
+  max-width: 50%;
+  display: inline-block;
+  text-align: center;
+  transform: scale(1);
+  transition: transform 0.5s;
+}
+
+.about-page img:hover {
+  transform: scale(1.5);
+}
+
+.home-page ul {
+  margin: 0;
+  padding: 0;
+  width: 75%;
+  background-color: white;
+  list-style-type: none;
+  text-align: center;
+}
+
+.home-page li {
+  border-bottom: 1px solid lightblue;
+}
+
+li a {
+  display: block;
+  padding: 1em 0;
+  font-size: 2em;
+  background-color: darkslateblue;
+  color: white;
+  text-decoration: none;
+}
+
+li a:hover {
+  color: darkslateblue;
+  background-color: white;
+  transition: all 0.5s;
+}
diff --git a/gallery.html b/gallery.html
new file mode 100644
index 0000000..82368db
--- /dev/null
+++ b/gallery.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Gallery | Offline First Demo</title>
+    <script src="js/script.js"></script>
+    <link rel="stylesheet" href="css/styles.css" />
+  </head>
+  <body class="about-page">
+    <img src="images/antelope.jpg" alt="" />
+    <img src="images/bobcat.jpg" alt="" />
+    <img src="images/caracal.jpg" alt="" />
+    <img src="images/caribou-bulls.jpg" alt="" />
+    <img src="images/caribou.jpg" alt="" />
+    <img src="images/cheetah.jpg" alt="" />
+    <img src="images/coyote.jpg" alt="" />
+    <img src="images/ferrets.jpg" alt="" />
+    <img src="images/ox.jpg" alt="" />
+    <img src="images/tiger.jpg" alt="" />
+  </body>
+</html>
diff --git a/images/antelope.jpg b/images/antelope.jpg
new file mode 100644
index 0000000..2093834
Binary files /dev/null and b/images/antelope.jpg differ
diff --git a/images/bear.jpg b/images/bear.jpg
new file mode 100644
index 0000000..48706c1
Binary files /dev/null and b/images/bear.jpg differ
diff --git a/images/bison.jpg b/images/bison.jpg
new file mode 100644
index 0000000..8580e91
Binary files /dev/null and b/images/bison.jpg differ
diff --git a/images/bobcat.jpg b/images/bobcat.jpg
new file mode 100644
index 0000000..6c95f4d
Binary files /dev/null and b/images/bobcat.jpg differ
diff --git a/images/caracal.jpg b/images/caracal.jpg
new file mode 100644
index 0000000..9466e89
Binary files /dev/null and b/images/caracal.jpg differ
diff --git a/images/caribou-bulls.jpg b/images/caribou-bulls.jpg
new file mode 100644
index 0000000..795c75a
Binary files /dev/null and b/images/caribou-bulls.jpg differ
diff --git a/images/caribou.jpg b/images/caribou.jpg
new file mode 100644
index 0000000..9e7c33d
Binary files /dev/null and b/images/caribou.jpg differ
diff --git a/images/cheetah.jpg b/images/cheetah.jpg
new file mode 100644
index 0000000..830e505
Binary files /dev/null and b/images/cheetah.jpg differ
diff --git a/images/coyote.jpg b/images/coyote.jpg
new file mode 100644
index 0000000..6cbac7c
Binary files /dev/null and b/images/coyote.jpg differ
diff --git a/images/ferrets.jpg b/images/ferrets.jpg
new file mode 100644
index 0000000..0391c63
Binary files /dev/null and b/images/ferrets.jpg differ
diff --git a/images/ox.jpg b/images/ox.jpg
new file mode 100644
index 0000000..9313c36
Binary files /dev/null and b/images/ox.jpg differ
diff --git a/images/tiger.jpg b/images/tiger.jpg
new file mode 100644
index 0000000..1e5e840
Binary files /dev/null and b/images/tiger.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6746704
--- /dev/null
+++ b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Home | Offline First Demo</title>
+    <script>
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('../sw.js');
+      }
+    </script>
+    <link rel="stylesheet" href="css/styles.css" />
+  </head>
+  <body class="home-page">
+    <ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="gallery.html">Photo Gallery</a></li>
+    </ul>
+  </body>
+</html>
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..e69de29
