diff --git a/Frontend/index.html b/Frontend/index.html
index 1283b91..9a56dfd 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -2441,7 +2441,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
     <!-- verdors.bundle.js 已含有 jquery Library v3.5.1-->
     <script src="lib/vendors.bundle.js"></script>
-    <script src="lib/app.bundle.js"></script>
     <!-- toast 第三方套件 若 require 此套件只能用 define 使用，先暫時 html 引用-->
     <script src="lib/notifications/toastr/toastr.min.js"></script>
     <script src="js/toast.js"></script>
@@ -2487,6 +2486,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         function loadedBasePack() {
             require(
                 [
+                    "lib/app.bundle",
                     "datatables.net.b4",
                     "n4js/alarmbaja",
                     "lib/statistics/flot/flot.bundle",
@@ -2505,9 +2505,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     "yourteam/plugins/yt-tooltip/yt-tooltip",
                     "yourteam/plugins/yt-tab/yt-tab",
                     "style",
-                    "init",
+                    
                 ], function () {
-                    require(["site"], loadedJsPack)
+                    require(["init", "site"], loadedJsPack)
             });
         }
         
diff --git a/Frontend/lib/app.bundle.js b/Frontend/lib/app.bundle.js
index 4920b67..6203b80 100644
--- a/Frontend/lib/app.bundle.js
+++ b/Frontend/lib/app.bundle.js
@@ -522,66 +522,66 @@ var initApp = (function(app) {
 	 * @param  anchor
 	 * @return 
 	 */
-	//app.listFilter = function (list, input, anchor) {
+	app.listFilter = function (list, input, anchor) {
 
-	//	/* add class to filter hide/show */
-	//	if (anchor) {
-	//		$(anchor).addClass('js-list-filter');
-	//	} else {
-	//		$(list).addClass('js-list-filter');
-	//	}
+		/* add class to filter hide/show */
+		if (anchor) {
+			$(anchor).addClass('js-list-filter');
+		} else {
+			$(list).addClass('js-list-filter');
+		}
 
-	//	/* on change keyboard */
-	//	$(input).change( function () {
+		/* on change keyboard */
+		$(input).change( function () {
 
-	//		var filter = $(this).val().toLowerCase(),
-	//			listPrev = $(list).next().filter('.js-filter-message');
+			var filter = $(this).val().toLowerCase(),
+				listPrev = $(list).next().filter('.js-filter-message');
 	
-	//		/* when user types more than 1 letter start search filter */
-	//		if(filter.length > 1) {
+			/* when user types more than 1 letter start search filter */
+			if(filter.length > 1) {
 
-	//			/* this finds all data-filter-tags in a list that contain the input val,
-	//			   hiding the ones not containing the input while showing the ones that do */
+				/* this finds all data-filter-tags in a list that contain the input val,
+				   hiding the ones not containing the input while showing the ones that do */
 				
-	//			/* (1) hide all that does not match */   
-	//			$(list).find($("[data-filter-tags]:not([data-filter-tags*='" + filter + "'])"))
-	//				.parentsUntil(list).removeClass('js-filter-show')
-	//				.addClass('js-filter-hide');
+				/* (1) hide all that does not match */   
+				$(list).find($("[data-filter-tags]:not([data-filter-tags*='" + filter + "'])"))
+					.parentsUntil(list).removeClass('js-filter-show')
+					.addClass('js-filter-hide');
 
-	//			/* (2) hide all that does match */	
-	//			$(list).find($("[data-filter-tags*='" + filter + "']"))
-	//				.parentsUntil(list).removeClass('js-filter-hide')
-	//				.addClass('js-filter-show');
+				/* (2) hide all that does match */	
+				$(list).find($("[data-filter-tags*='" + filter + "']"))
+					.parentsUntil(list).removeClass('js-filter-hide')
+					.addClass('js-filter-show');
 
-	//			/* if element exists then print results */	
-	//			if (listPrev){	
-	//				listPrev.text("showing " + $(list).find('li.js-filter-show').length + " from " + $(list).find('[data-filter-tags]').length + " total");
-	//			}
+				/* if element exists then print results */	
+				if (listPrev){	
+					listPrev.text("showing " + $(list).find('li.js-filter-show').length + " from " + $(list).find('[data-filter-tags]').length + " total");
+				}
 
-	//		} else {
+			} else {
 
-	//			/* when filter length is blank reset the classes */
-	//			$(list).find('[data-filter-tags]').parentsUntil(list).removeClass('js-filter-hide js-filter-show');
+				/* when filter length is blank reset the classes */
+				$(list).find('[data-filter-tags]').parentsUntil(list).removeClass('js-filter-hide js-filter-show');
 
-	//			/* if element exists reset print results */
-	//			if (listPrev){
-	//				listPrev.text("");
-	//			}
-	//		} 
+				/* if element exists reset print results */
+				if (listPrev){
+					listPrev.text("");
+				}
+			} 
 
-	//		return false;
+			return false;
+		})
+		//}).keyup( $.debounce( myapp_config.filterDelay, function (e) {
 
-	//	}).keyup( $.debounce( myapp_config.filterDelay, function (e) {
+		//	/* fire the above change event after every letter is typed with a delay of 250ms */
+		//	$(this).change();
 
-	//		/* fire the above change event after every letter is typed with a delay of 250ms */
-	//		$(this).change();
+		//	/*if(e.keyCode == 13) {
+		//		console.log( $(list).find(".filter-show:not(.filter-hide) > a") );
+		//	}*/
 
-	//		/*if(e.keyCode == 13) {
-	//			console.log( $(list).find(".filter-show:not(.filter-hide) > a") );
-	//		}*/
-
-	//	}));
-	//};
+		//}));
+	};
 
 	/**
 	 * Load scripts using lazyload method 
@@ -1296,15 +1296,15 @@ var initApp = (function(app) {
 		 * Activate listFilters
 		 * usage: <input id="inputID" data-listfilter="listFilter" />
 		 **/
-		//if( typeof initApp.listFilter !== 'undefined' && $.isFunction(initApp.listFilter) && $('[data-listfilter]').length ) {
+		if( typeof initApp.listFilter !== 'undefined' && $.isFunction(initApp.listFilter) && $('[data-listfilter]').length ) {
 
 
-		//	var inputID = $('[data-listfilter]').attr('id'),
-		//		listFilter = $('[data-listfilter]').attr("data-listfilter");
+			var inputID = $('[data-listfilter]').attr('id'),
+				listFilter = $('[data-listfilter]').attr("data-listfilter");
 
-		//	/* initApp.listFilter($('.list'), $('#intput-id')); */
-		//	initApp.listFilter(listFilter, '#' + inputID);
-		//}
+			/* initApp.listFilter($('.list'), $('#intput-id')); */
+			initApp.listFilter(listFilter, '#' + inputID);
+		}
 
 		/**
 		 * Start bootstrap tooltips
@@ -2068,26 +2068,26 @@ var layouts = (function(setlayout) {
  **/
 $(window).resize(
 
- 	$.throttle( myapp_config.throttleDelay, function (e) {
+ //	$.throttle( myapp_config.throttleDelay, function (e) {
 
-		 /**
-		  * (1a) ADD CLASS WHEN BELOW CERTAIN WIDTH (MOBILE MENU)
-		  * Description: tracks the page min-width of #CONTENT and NAV when navigation is resized.
-		  * This is to counter bugs for minimum page width on many desktop and mobile devices.
-		  **/
-		  initApp.mobileCheckActivation();
+	//	 /**
+	//	  * (1a) ADD CLASS WHEN BELOW CERTAIN WIDTH (MOBILE MENU)
+	//	  * Description: tracks the page min-width of #CONTENT and NAV when navigation is resized.
+	//	  * This is to counter bugs for minimum page width on many desktop and mobile devices.
+	//	  **/
+	//	  initApp.mobileCheckActivation();
 
-		 /**
-		  * (1b) CHECK NAVIGATION STATUS (IF HORIZONTAL OR VERTICAL)
-		  * Description: fires an event to check for navigation orientation.
-		  * Based on the condition, it will initliaze or destroy the slimscroll, or horizontal nav plugins
-		  **/
-		  initApp.checkNavigationOrientation();
+	//	 /**
+	//	  * (1b) CHECK NAVIGATION STATUS (IF HORIZONTAL OR VERTICAL)
+	//	  * Description: fires an event to check for navigation orientation.
+	//	  * Based on the condition, it will initliaze or destroy the slimscroll, or horizontal nav plugins
+	//	  **/
+	//	  initApp.checkNavigationOrientation();
 
 
-		 /** -- insert your resize codes below this line -- **/
+	//	 /** -- insert your resize codes below this line -- **/
 	 
-	})
+	//})
 ); 
 
 /**
@@ -2095,19 +2095,19 @@ $(window).resize(
  **/
 $(window).scroll(
 
- 	$.throttle( myapp_config.throttleDelay, function (e) {
+ //	$.throttle( myapp_config.throttleDelay, function (e) {
 
-		 /**
-		  * FIX APP HEIGHT
-		  * Compare the height of nav and content;
-		  * If one is longer/shorter than the other, measure them to be equal.
-		  * This event is only fired on desktop.
-		  **/
+	//	 /**
+	//	  * FIX APP HEIGHT
+	//	  * Compare the height of nav and content;
+	//	  * If one is longer/shorter than the other, measure them to be equal.
+	//	  * This event is only fired on desktop.
+	//	  **/
 		  
 
-		  /** -- insert your other scroll codes below this line -- **/
+	//	  /** -- insert your other scroll codes below this line -- **/
 
-	})
+	//})
 
 );
 
@@ -2147,7 +2147,7 @@ document.addEventListener('DOMContentLoaded', function() {
  	/**
 	 * c. initialize nav filter
 	 **/
-	/*initApp.listFilter(myapp_config.navHooks, myapp_config.navFilterInput, myapp_config.navAnchor);*/
+	initApp.listFilter(myapp_config.navHooks, myapp_config.navFilterInput, myapp_config.navAnchor);
 
  	/**
 	 * d. run DOM misc functions