diff --git a/public/css/app.css b/public/css/app.css
index eeae142..2e53b91 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -17,7 +17,7 @@
   }
 
   100% {
-    background-position-x: 61px;
+    background-position-x: 60px;
     animation-timing-function: linear;
   }
 }
@@ -82,7 +82,7 @@
   animation-iteration-count: 1;
   position: fixed;
   z-index: 10;
-  top: 62px;
+  top: 60px;
   padding-top: 2px;
   padding-bottom: 2px;
   padding-right: 5px;
@@ -185,11 +185,26 @@
   background-image: url("/img/gamethumbnails/1_1.png");
   background-size: cover;
   border-width: 0px;
-  width: 100%;
+  width: 190.8px;
   background-repeat: no-repeat;
   height: 130px;
 }
 
+.gameitem {
+  padding-left: 5px;
+  padding-right: 5px;
+  padding-bottom: 5px;
+}
+
+.PageTitleBar {
+  display: inline-flex;
+    width: 100%;
+    align-items: center;
+    align-content: center;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+}
+
 .popup {
   color: #000000;
   text-align: center;
@@ -604,6 +619,7 @@ body {
 .content_special,
 #content_special {
   display: inline-flex;
+  overflow: hidden;
   width: 100%;
   flex-direction: row;
   align-items: flex-start;
diff --git a/public/css/appdark.css b/public/css/appdark.css
index 6552f4e..3401cc2 100644
--- a/public/css/appdark.css
+++ b/public/css/appdark.css
@@ -144,6 +144,7 @@ button:hover.greybutton {
 
 button.bluebutton {
   background: #01639c;
+  color: rgb(255, 255, 255);
   background: linear-gradient(180deg, #00a2ff 0%,  #01639c 100%)
 }
 
@@ -153,6 +154,7 @@ button:hover.bluebutton {
 
 button.redbutton {
   background: #e42424;
+  color: rgb(255, 255, 255);
   background: linear-gradient(180deg, #d86868 0%, #e42424 100%);
 }
 
@@ -162,6 +164,7 @@ button:hover.redbutton {
 
 button.greenbutton {
   background: #1a5c2e;
+  color: rgb(255, 255, 255);
   background: linear-gradient(180deg, #02b757 0%, #1a5c2e 100%);
 }
 
@@ -169,6 +172,11 @@ button:hover.greenbutton {
   background: linear-gradient(0deg, #02b757 0%, #1a5c2e 100%);
 }
 
+button {
+  color:rgb(0, 0, 0)
+}
+
+
 .popup {
   color: white;
   background: black;
diff --git a/resources/views/pages/catalog.blade.php b/resources/views/pages/catalog.blade.php
index 119abc3..a8c53de 100644
--- a/resources/views/pages/catalog.blade.php
+++ b/resources/views/pages/catalog.blade.php
@@ -9,13 +9,83 @@
         <meta content="ARCHBLOX is a work in progress revival." property="og:description" />
     @endsection
 
+    @section('alert')
+    <div id="alert">The catalog is currently work in progress.</div>
+@endsection
+
     @section('content')
-        <h1>Catalog</h1>
-        <div class="content_special" style="flex-wrap: wrap; justify-content: flex-start">
+        <div class="PageTitleBar">
+            <h1>Catalog</h1>
+            <div>
+                <input type="text" placeholder="Search" title="Search Catalog Items Box">
+                <button style="height: 22px;" class="greybutton">Search</button>
+            </div>
+        </div>
+        <div class="content_special">
+            <div class="content_special" style="width: 15%;flex-wrap: wrap; justify-content: flex-start">
+                <p>Sidebar</p>
+            </div>
+        <div class="content_special" style="width: 85%;flex-wrap: wrap; justify-content: flex-start">
+            <div class="catalogitem">
+                <img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
+                <p>Item Name</p>
+                <strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
+            </div>
+            <div class="catalogitem">
+                <img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
+                <p>Item Name</p>
+                <strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
+            </div>
+            <div class="catalogitem">
+                <img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
+                <p>Item Name</p>
+                <strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
+            </div>
+            <div class="catalogitem">
+                <img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
+                <p>Item Name</p>
+                <strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
+            </div>
+            <div class="catalogitem">
+                <img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
+                <p>Item Name</p>
+                <strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
+            </div>
+            <div class="catalogitem">
+                <img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
+                <p>Item Name</p>
+                <strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
+            </div>
+            <div class="catalogitem">
+                <img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
+                <p>Item Name</p>
+                <strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
+            </div>
+            <div class="catalogitem">
+                <img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
+                <p>Item Name</p>
+                <strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
+            </div>
+            <div class="catalogitem">
+                <img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
+                <p>Item Name</p>
+                <strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
+            </div>
+            <div class="catalogitem">
+                <img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
+                <p>Item Name</p>
+                <strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
+            </div>
+            <div class="catalogitem">
+                <img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
+                <p>Item Name</p>
+                <strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
+            </div>
             <div class="catalogitem">
                 <img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
                 <p>Item Name</p>
                 <strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
             </div>
         </div>
+    </div>
     @endsection
\ No newline at end of file
diff --git a/resources/views/pages/games.blade.php b/resources/views/pages/games.blade.php
index cabdc9d..68756f7 100644
--- a/resources/views/pages/games.blade.php
+++ b/resources/views/pages/games.blade.php
@@ -14,13 +14,66 @@
 @endsection
 
 @section('content')
-<h1>Games</h1>
-<br>
-<div class="content_special" style="flex-wrap: wrap; justify-content: space-around;">
+<div class="PageTitleBar">
+    <h1>Games</h1>
     <div>
+        <input type="text" placeholder="Search" title="Search Catalog Items Box">
+        <button style="height: 22px;" class="greybutton">Search</button>
+    </div>
+</div>
+<div class="content_special">
+    <div class="content_special" style="width: 15%;flex-wrap: wrap; justify-content: flex-start">
+        <p>Sidebar</p>
+    </div>
+<div class="content_special" style="width: 85%;flex-wrap: wrap; justify-content: flex-start">
+    <div class="gameitem">
         <a href="{{ route('gamepage')}}"><img class="gamethumbnail_small"></a>
+        <br>
         <a href="{{ route('gamepage')}}">Natural Disaster Survival</a> 
         <p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
     </div>
+    <div class="gameitem">
+        <a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
+        <br>
+        <a href="#">PLACEHOLDER</a> 
+        <p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
+    </div>
+    <div class="gameitem">
+        <a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
+        <br>
+        <a href="#">PLACEHOLDER</a> 
+        <p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
+    </div>
+    <div class="gameitem">
+        <a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
+        <br>
+        <a href="#">PLACEHOLDER</a> 
+        <p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
+    </div>
+    <div class="gameitem">
+        <a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
+        <br>
+        <a href="#">PLACEHOLDER</a> 
+        <p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
+    </div>
+    <div class="gameitem">
+        <a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
+        <br>
+        <a href="#">PLACEHOLDER</a> 
+        <p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
+    </div>
+    <div class="gameitem">
+        <a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
+        <br>
+        <a href="#">PLACEHOLDER</a> 
+        <p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
+    </div>
+    <div class="gameitem">
+        <a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
+        <br>
+        <a href="#">PLACEHOLDER</a> 
+        <p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
+    </div>
+</div>
 </div>
 @endsection
\ No newline at end of file