diff --git a/public/css/w0bmcustom.css b/public/css/w0bmcustom.css
index 5a21f5f..e1f1d3d 100644
--- a/public/css/w0bmcustom.css
+++ b/public/css/w0bmcustom.css
@@ -4278,4 +4278,14 @@ pre {
   .gld a {
     color: white;
     text-shadow: 1px 1px 1px black;
+  }
+
+  .holocene {
+    height: 190px;
+    background-size: cover;
+  }
+
+  .metacene {
+    height: 190px;
+    background-size: cover;
   }
\ No newline at end of file
diff --git a/public/js/w0bmscript.js b/public/js/w0bmscript.js
index d8d3b9f..2dc4b1a 100644
--- a/public/js/w0bmscript.js
+++ b/public/js/w0bmscript.js
@@ -526,13 +526,15 @@ var alertrm = function ($) {
 };
 alertrm(jQuery);
 
-$('#categories').imagesLoaded(function () {
-    $('#categories').isotope({
-        itemSelector: '.category',
-        percentPosition: true,
-        layoutMode: 'masonry'
-    });
-});
+// this added a nice looking effect to how the tems would load up and display on the page, sadly the items are positioned elements with this script
+// which makes it not so nice to work it. sry belst :D
+// $('#categories').imagesLoaded(function () {
+//     $('#categories').isotope({
+//         itemSelector: '.category',
+//         percentPosition: true,
+//         layoutMode: 'masonry'
+//     });
+// });
 
 $(function() {
     $('[data-toggle="popover"]').popover({
diff --git a/resources/views/layout1/categories.blade.php b/resources/views/layout1/categories.blade.php
index 415a611..685df39 100644
--- a/resources/views/layout1/categories.blade.php
+++ b/resources/views/layout1/categories.blade.php
@@ -3,11 +3,21 @@
     <div class="page-header">
         <h3>Categories</h3>
     </div>
-    <div class="" id="categories">
+    <div class="extraction_point" id="categories">
         @foreach($categories as $category)
-            <div id="category_box_{{$category->shortname}}" class="col-sm-6 col-md-4 category">
+            <div id="new_category_box_{{$category->shortname}}" class="col-sm-6 col-md-4 category">
                 <div class="thumbnail">
-                    <img src="{{ asset('/images/cat/' . $category->shortname . '.webp') }}" alt="{{$category->name}}">
+                    <?php
+                        $noise = '/images/cat/' . $category->shortname . '.jpg';
+                        $blah = asset($noise);
+                        $fourofour = 'images/cat/' . '404' . '.jpg' ;
+                        $blub = asset($fourofour);
+                        if (file_exists(getcwd() . '/' . $noise)) {
+                            echo "<div class='holocene' style='background-image: url($blah)'></div>";
+                        } else {
+                            echo "<div class='metacene' style='background-image: url($blub)'></div>";
+                        }
+                    ?>
                     <div class="caption">
                         <h3>{{$category->name}} <small>{{$category->videos()->count()}}</small></h3>
                         <p>{{$category->description}}</p>