diff --git a/404.html b/404.html
new file mode 100644
index 0000000..10d9f50
--- /dev/null
+++ b/404.html
@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>GPCCA</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <meta http-equiv="Cache-Control" content="max-age= 3600" />
+    <base href="https://www.gpccaor.org/">
+
+     
+    
+
+    
+<link href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+ 
+<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
+
+<link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
+ 
+<link href="//fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet" type="text/css">
+
+
+
+
+  
+  <link href="//fonts.googleapis.com/css?family=Open%20Sans" rel="stylesheet" type="text/css">
+  
+
+  
+
+  
+
+  
+  <link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
+  
+
+  
+
+  
+
+
+
+    
+
+<link href="https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lg-transitions.min.css" rel="stylesheet">
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.16/css/perfect-scrollbar.min.css" type="text/css" media="screen" />
+
+
+
+
+
+
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css">
+
+
+<link href="/css/base.css" rel="stylesheet">
+
+
+<link href="/css/page.css" rel="stylesheet">
+
+
+<link href="/css/navbar.css" rel="stylesheet">
+
+
+<link href="/css/responsive.css" rel="stylesheet">
+
+
+
+ <style>
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+  body { font-family:Open Sans,Helvetica,Arial,sans-serif; }
+ 
+
+  
+
+ 
+ 
+ .nav-bar__menu-item:hover, .nav-bar__menu-item >a:hover  {color: #26ad60; }
+ .nav-bar, .section--footer { background-color: #26ad60;  }
+ .nav-bar__logo,.nav-bar__logo:hover, .nav-bar__menu, .nav-bar__menu-button, .section--footer { color: #1f5e3a;  }
+ .nav-bar__menu-item:hover, .nav-bar__menu-item >a:hover  { background-color: #1f5e3a; }
+ 
+ 
+
+
+
+  
+
+
+ 
+
+ 
+ 
+
+ #hero { color: red; }
+ #hero { background-color: #6fc695; }
+ #hero h1 { color: red; }
+ #hero h2 { color: red; }
+ #hero h3 { color: red; }
+ #hero h4 { color: red; }
+ #hero hr { border-top-color: red; }
+
+ 
+ #hero { background-image: url("https://www.gpccaor.org/images/city-park.jpg"); }
+
+
+     
+
+ 
+ 
+  
+ .section--odd, .section--even .btn {
+   color: #1f5e3a;
+   background-color: #6fc695;
+ }
+.section--even, .section--odd .btn {
+   color: #6fc695;
+   background-color: #1f5e3a;
+  }
+
+  
+
+    
+
+  
+
+    
+
+    
+
+
+
+    
+    .section--footer {
+      color: green;
+      background-color: black;
+    }
+    
+
+    
+
+     
+
+
+    
+
+
+  
+
+  
+
+  
+
+    
+
+ </style>
+
+
+
+
+<link rel="stylesheet" href="/css/uci-shortcodes-custom.css"> 
+<link rel="stylesheet" href="/css/uci-shortcodes.css"> 
+<link rel="stylesheet" href="/css/custom.css"> 
+
+</head>
+
+<body>
+
+  
+<div id="nav-bar" class="nav-bar">
+    
+        <div class="nav-bar__header">
+            <a href="#hero" class="nav-bar__logo">
+                 GPCCA  
+            </a>
+            <div class="nav-bar__menu-button"> <i class="fa fa-bars"></i></div>
+            <div class="nav-bar__draft"></div>
+         </div>
+        
+            <ul class="nav-bar__menu hide-menu">
+                
+                
+                
+                <li >
+                      <a class="nav-bar__menu-item" href="#about">
+                      About
+                       </a>
+                </li>
+                 
+                
+                
+                
+             </ul>
+        
+      
+</div>
+<div class="nav-bar-spacer"></div>
+
+
+<main class="error404">
+<section id="error-404" class="section section--404"
+style="color:#6fc695; background-color:#1f5e3a;"
+>
+	<div class="section__container">
+		<div class="section__headline section__headline--404">
+			<h1>Whoops!</h1>
+			<h2>Content Load Error</h2>
+		</div>
+		<div class="section__content section-content--" 
+		 >
+		The content you tried to load does not exist. </br> 
+		<div>continue by clicking <a class="404__link" href="https://www.gpccaor.org/">here</a></div>
+		</div>
+	</div>
+</section>
+
+
+
+</main>
+
+
+<script src="https://cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script>
+
+<script src="https://cdn.jsdelivr.net/g/lightgallery,lg-autoplay,lg-pager,lg-thumbnail,lg-video"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.16/js/perfect-scrollbar.jquery.min.js"></script>
+
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
+
+
+<script src="/js/util.js"></script>
+
+<script src="/js/fitToWindow.js"></script>
+<script src="/js/flowType.js"></script>
+
+<script src="/js/youtube.js"></script>
+
+
+
+
+<script src="/js/page.js"></script>
+
+
+<script src="/js/docready.js"></script>
+
+
+
+
+
+
+<script>
+$(document).ready(function () {
+  
+  lightgallery('#photos')
+});
+</script>
+
+
+
+<script>
+$(document).ready(function () {
+  lightgallery('.box--image-lightbox')
+});
+</script>
+
+</body>
+</html>
diff --git a/css/base.css b/css/base.css
index 32ce190..0141bd5 100644
--- a/css/base.css
+++ b/css/base.css
@@ -114,7 +114,7 @@ a,
 
 a:hover,
 .clickable:hover {
-  color: black;
+  color: rgb(161, 44, 44);
   filter: saturate(100%);
 }
 
diff --git a/css/page.css b/css/page.css
index 6445a21..ff87750 100644
--- a/css/page.css
+++ b/css/page.css
@@ -66,6 +66,12 @@
   background-color: black;
 }
 
+.section--404 {
+  color: white;
+  background-color: black;
+  height: 1000px;
+}
+
 .section--hero {
   color: white;
   background-color: grey;
diff --git a/index.html b/index.html
index e70b8bc..fe17882 100644
--- a/index.html
+++ b/index.html
@@ -261,7 +261,7 @@ style="color:; background-color:;"
 		</div>
 		<div class="section__content section-content--footer"  >
 			<div class="updated">
-<p>site updated: October 29, 2021@8:08 pm</br>
+<p>site updated: October 30, 2021@9:12 am</br>
 status: initial development</br></p>
 </div>
 
diff --git a/index.xml b/index.xml
index 69f9af9..e4eba41 100644
--- a/index.xml
+++ b/index.xml
@@ -32,7 +32,7 @@ Some examples:</description>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>https://www.gpccaor.org/sections/footer/</guid>
-      <description>site updated: October 29, 2021@8:08 pm status: initial development
+      <description>site updated: October 30, 2021@9:12 am status: initial development
  </description>
     </item>
     
diff --git a/sections/index.xml b/sections/index.xml
index 9b46430..5a1a314 100644
--- a/sections/index.xml
+++ b/sections/index.xml
@@ -21,7 +21,7 @@
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>https://www.gpccaor.org/sections/footer/</guid>
-      <description>site updated: October 29, 2021@8:08 pm status: initial development
+      <description>site updated: October 30, 2021@9:12 am status: initial development
  </description>
     </item>
     
