diff --git a/client/AdminMgmt/ProductMgmt/prodMgmtForm.html b/client/AdminMgmt/ProductMgmt/prodMgmtForm.html
index 234a878..42b686e 100644
--- a/client/AdminMgmt/ProductMgmt/prodMgmtForm.html
+++ b/client/AdminMgmt/ProductMgmt/prodMgmtForm.html
@@ -1,35 +1,30 @@
 <template name="prodMgmtForm">
     <h4>Product Management</h4>
-    <form action="submit" class="prodInputForm">
-        <div class="row">
-            <div class="col s12 m6 l6 input-field">
-                <input type="text" class="prodName" style="{{#if $eq prodNameErr true}}border: 2px solid red;{{/if}}" id="prodName" />
-                <label for="prodName">Name*</label>
-            </div>
-            <div class="col s12 m6 l6 input-field">
-                <select name="prodStore" id="prodStore" class="prodStore">
-                    <option value="" disabled selected></option>
-                    {{#each stores}}
-                        <option value="{{storeName}}">{{storeName}}</option>
-                    {{/each}}
-                    <option id="addNewStore" value="addNewStore">Add New Store</option>
-                </select>
-                <label for="prodStore">Store</label>
-            </div>
+    {{#if Template.subscriptionsReady}}
+    <form action="submit" class="row prodInputForm" style="gap: 1em;">
+        <div class="col s12 m6 l6 input-field outlined">
+            <input type="text" class="prodName" style="{{#if $eq prodNameErr true}}border: 2px solid red;{{/if}}" id="prodName" />
+            <label for="prodName">Name*</label>
         </div>
-        <div class="row">
-            <div class="col s6 m6 l6">
-                <a class="waves-effect waves-light btn cancelProdMgmt orange">Cancel</a>
-            </div>
-            <div class="col s6 m6 l6">
-                {{#if $eq prodEditMode false}}
-                    <a class="waves-effect waves-light btn saveProdMgmt green right">Add</a>
-                {{else}}
-                    <a class="waves-effect waves-light btn editProdMgmt blue right">Save Edits</a>
-                {{/if}}
-            </div>
+        <div class="col s12 m6 l6 input-field outlined">
+            <select name="prodStore" id="prodStore">
+                <option value="" disabled selected></option>
+                <option id="addNewStore" value="addNewStore" class="modal-trigger" data-target="modalStore">+ Add New Store</option>
+                {{#each stores}}
+                    <option value="{{storeName}}">{{storeName}}</option>
+                {{/each}}
+            </select>
+            <label for="prodStore">Store</label>
+        </div>
+        <div class="col s12 m12 l12">
+            {{#if $eq prodEditMode false}}
+                <a class="waves-effect waves-light btn saveProdMgmt green white-text right">Add</a>
+            {{else}}
+                <a class="waves-effect waves-light btn editProdMgmt blue white-text right">Save Edits</a>
+            {{/if}}
         </div>
     </form>
+    {{/if}}
 
     <!-- Store Modal Structure -->
     <div id="modalStore" class="modal">
@@ -38,7 +33,8 @@
             {{> storeMgmtForm}}
         </div>
         <div class="modal-footer">
-            <a href="#!" class="modal-close waves-effect waves-green btn-flat">Done</a>
+            <a href="#!" class="modal-close waves-effect green white-text btn">Done</a>
         </div>
     </div>
+    {{> snackbar}}
 </template>
\ No newline at end of file
diff --git a/client/AdminMgmt/ProductMgmt/prodMgmtForm.js b/client/AdminMgmt/ProductMgmt/prodMgmtForm.js
index 7a355a6..0d826b4 100644
--- a/client/AdminMgmt/ProductMgmt/prodMgmtForm.js
+++ b/client/AdminMgmt/ProductMgmt/prodMgmtForm.js
@@ -1,5 +1,6 @@
 import { Products } from '../../../imports/api/products.js';
 import { Stores } from '../../../imports/api/stores.js';
+import { M } from '../../lib/assets/materialize.js';
 
 Template.prodMgmtForm.onCreated(function() {
     this.subscribe("myProducts");
@@ -7,11 +8,14 @@ Template.prodMgmtForm.onCreated(function() {
 });
 
 Template.prodMgmtForm.onRendered(function() {
-    Meteor.setTimeout(function() {
-        $('select').formSelect();
+    setTimeout(function() {
+        var elems = document.querySelectorAll('select');
+        var instances = M.FormSelect.init(elems, {});
     }, 200);
-    $('select').formSelect();
-    $('.modal').modal();
+
+    var elemm = document.querySelectorAll('.modal');
+    var instancem = M.Modal.init(elemm, {});
+
     Session.set("prodEditMode", false);
 });
 
@@ -43,12 +47,12 @@ Template.prodMgmtForm.events({
         } else {
             Meteor.call('add.product', name, store, function(err, result) {
                 if (err) {
-                    // console.log("     ERROR: can't add product: " + err);
+                    console.log("     ERROR: can't add product: " + err);
                 } else {
-                    // console.log("    SUCCESS adding product.");
                     $("#prodName").val("");
-                    $("#prodStore").val("");
-                    $('select').formSelect();
+                    let elemse = document.querySelectorAll('select');
+                    let instancese = M.FormSelect.init(elemse, {});
+                    showSnackbar("Succesffuly Added Product!", "green");
                 }
             });
         }
@@ -71,11 +75,9 @@ Template.prodMgmtForm.events({
                 if (err) {
                     // console.log("     ERROR: can't add product: " + err);
                 } else {
-                    // console.log("    SUCCESS adding product.");
                     $("#prodName").val("");
-                    $("#prodStore").val("");
-                    $('select').formSelect();
                     Session.set("prodEditMode", false);
+                    showSnackbar("Product Edited Successfully!", "green");
                 }
             });
         }
@@ -87,7 +89,7 @@ Template.prodMgmtForm.events({
             let store = $("#prodStore").val();
             let prodId = Session.get("prodEditId");
             let prodEditMode = Session.get("prodEditMode");
-            console.log("    ----    got the submit event for products.");
+            // console.log("    ----    got the submit event for products.");
 
             if (store == null) {
                 store = "";
@@ -100,46 +102,38 @@ Template.prodMgmtForm.events({
                 if (prodEditMode == true) {
                     Meteor.call('edit.product', prodId, name, store, function(err, result) {
                         if (err) {
-                            // console.log("     ERROR: can't add product: " + err);
+                            console.log("     ERROR: can't add product: " + err);
                         } else {
-                            // console.log("    SUCCESS adding product.");
                             $("#prodName").val("");
-                            $("#prodStore").val("");
-                            $('select').formSelect();
+                            showSnackbar("Successfully Edited Product!", "green");
                         }
                     });
                 } else {
                     Meteor.call('add.product', name, store, function(err, result) {
                         if (err) {
-                            // console.log("     ERROR: can't add product: " + err);
+                            console.log("     ERROR: can't add product: " + err);
                         } else {
-                            // console.log("    SUCCESS adding product.");
                             $("#prodName").val("");
-                            $("#prodStore").val("");
-                            $('select').formSelect();
+                            showSnackbar("Product Added Succssfully!", "green");
                         }
                     });
                 }
             }
         }
     },
-    'click .cancelProdMgmt' (event) {
-        event.preventDefault();
-        $("#prodName").val("");
-        $("#prodStore").val("");
-        $('select').formSelect();
-    },
     'change #prodStore' (event) {
-        event.preventDefault();
+        // event.preventDefault();
+        console.log("detected event");
         let val = $("#prodStore").val();
+        console.log("Value detected: " + val);
         
         if (val == "addNewStore") {
+            console.log("got the request for modal.");
             $("#prodStore").val("");
-            // open a modal to enter store information.
-            $('#modalStore').modal('open');
+            // open modal to add a new store
+            let elemmm = document.getElementById('modalStore');
+            let storeModal = M.Modal.getInstance(elemmm);
+            storeModal.open();
         }
     },
-    'click .modal-close' (event) {
-        $('select').formSelect();
-    }
 });
\ No newline at end of file
diff --git a/client/AdminMgmt/ProductMgmt/prodMgmtTbl.html b/client/AdminMgmt/ProductMgmt/prodMgmtTbl.html
index ad58b7e..e5db47c 100644
--- a/client/AdminMgmt/ProductMgmt/prodMgmtTbl.html
+++ b/client/AdminMgmt/ProductMgmt/prodMgmtTbl.html
@@ -23,7 +23,7 @@
                             <td>{{prodName}} </td>
                             <td>{{prodStore}}</td>
                             <td>
-                                <i class="material-icons clickable deleteProduct">delete</i>
+                                <i class="material-icons clickable deleteProduct modal-trigger" data-target="modalDelete">delete</i>
                                 <i class="material-icons clickable editProduct">edit</i>
                             </td>
                         </tr>
diff --git a/client/AdminMgmt/ProductMgmt/prodMgmtTbl.js b/client/AdminMgmt/ProductMgmt/prodMgmtTbl.js
index 04c7cf0..d5cfcf1 100644
--- a/client/AdminMgmt/ProductMgmt/prodMgmtTbl.js
+++ b/client/AdminMgmt/ProductMgmt/prodMgmtTbl.js
@@ -1,13 +1,11 @@
 import { Products } from '../../../imports/api/products.js';
+import { M } from '../../lib/assets/materialize.js';
 
 Template.prodMgmtTbl.onCreated(function() {
     this.subscribe("myProducts");
 });
 
 Template.prodMgmtTbl.onRendered(function() {
-    Meteor.setTimeout(function() {
-        $('.tooltipped').tooltip();
-    }, 150);
     Session.set("searchProds", false);
 });
 
@@ -32,7 +30,6 @@ Template.prodMgmtTbl.events({
         Session.set("method", "delete.product");
         Session.set("item", this.prodName);
         Session.set("view", "Products");;
-        $('#modalDelete').modal('open');
     },
     'click .editProduct' (event) {
         event.preventDefault();
@@ -41,7 +38,7 @@ Template.prodMgmtTbl.events({
         let prodInfo = Products.findOne({ _id: this._id });
         $("#prodName").val(prodInfo.prodName);
         $("#prodStore").val(prodInfo.prodStore);
-        $('select').formSelect();
+        // $('select').formSelect();
     },
     'click #filterProds' (event) {
         event.preventDefault();
diff --git a/client/AdminMgmt/StoreMgmt/storeMgmtForm.html b/client/AdminMgmt/StoreMgmt/storeMgmtForm.html
index e8368c6..98e4f19 100644
--- a/client/AdminMgmt/StoreMgmt/storeMgmtForm.html
+++ b/client/AdminMgmt/StoreMgmt/storeMgmtForm.html
@@ -1,17 +1,15 @@
 <template name="storeMgmtForm">
-    <form id="storeForm" action="submit">
-        <div class="row">
-            <div class="col s8 m10 l10 input-field">
-                <input type="text" class="storeName" id="storeName" />
-                <label for="storeName">Name</label>
-            </div>
-            <div class="col s4 m2 l2 input-field">
-                {{#if $eq editModeStore false}}
-                    <a class="waves-effect waves-light btn saveStoreMgmt green right">Add</a>
-                {{else}}
-                    <a class="waves-effect waves-light btn editStoreMgmt blue right">Rename</a>
-                {{/if}}
-            </div>
+    <form id="storeForm" action="submit" class="row" style="gap: 1em;">
+        <div class="col s8 m10 l10 input-field outlined">
+            <input type="text" class="storeName" id="storeName" />
+            <label for="storeName">Name</label>
+        </div>
+        <div class="col s4 m2 l2">
+            {{#if $eq editModeStore false}}
+                <a class="waves-effect waves-light btn saveStoreMgmt green white-text right">Add</a>
+            {{else}}
+                <a class="waves-effect waves-light btn editStoreMgmt blue white-text right">Rename</a>
+            {{/if}}
         </div>
     </form>
 </template>
\ No newline at end of file
diff --git a/client/General/DeleteConfModal/deleteConfirmationModal.js b/client/General/DeleteConfModal/deleteConfirmationModal.js
index f4cb155..dde7bfb 100644
--- a/client/General/DeleteConfModal/deleteConfirmationModal.js
+++ b/client/General/DeleteConfModal/deleteConfirmationModal.js
@@ -26,7 +26,7 @@ Template.deleteConfirmationModal.events({
             if (err) {
                 console.log("    ERROR deleting item from modal: " + err);
             } else {
-                // console.log("    SUCCESSFULLY deleted.");
+                console.log("    SUCCESSFULLY deleted.");
                 // put the new modal open / close here
                 //    $('#modalDelete').modal('close');
             }
diff --git a/client/ListItems/listItemsTbl.js b/client/ListItems/listItemsTbl.js
index 177e03e..ee70b7c 100644
--- a/client/ListItems/listItemsTbl.js
+++ b/client/ListItems/listItemsTbl.js
@@ -71,8 +71,5 @@ Template.listItemsTbl.events({
         Session.set("method", "delete.listItem");
         Session.set("item", this.itemName);
         Session.set("view", "List Items");
-
-        // put the new modal js here
-        //    $('#modalDelete').modal('open');
     },
 });
\ No newline at end of file