diff --git a/directives/categoriesColumn.htm b/directives/categoriesColumn.htm
index e977174..fc95263 100644
--- a/directives/categoriesColumn.htm
+++ b/directives/categoriesColumn.htm
@@ -1,13 +1,14 @@
+<div class="small-screen-hide col-md-2 sticky-categories">
+  <p style="margin-bottom: 12px">Categories</p>
 
-<div class="small-screen-hide col-md-2">
-    <div class="list-group sticky-categories">
-      <a
-        ng-click="changeCategory({newCategory:category})"
-        class="list-group-item list-group-item-action"
-        ng-repeat="category in categories"
-        ng-class="{ active: category === currentCategory }"
-      >
-        {{category}}
-      </a>
-    </div>
-  </div>
\ No newline at end of file
+  <div class="list-group">
+    <a
+      ng-click="changeCategory({newCategory:category})"
+      class="list-group-item list-group-item-action"
+      ng-repeat="category in categories"
+      ng-class="{ active: category === currentCategory }"
+    >
+      {{category}}
+    </a>
+  </div>
+</div>
diff --git a/directives/homeNavbar.htm b/directives/homeNavbar.htm
index 574dc01..62beeff 100644
--- a/directives/homeNavbar.htm
+++ b/directives/homeNavbar.htm
@@ -1,7 +1,32 @@
 <div class="sticky-top">
-  <div class="container" style="color: white; height: 32px;">
-    <div class="navbar-brand" style="color: slategrey">Categories</div>
-    <ul class=" nav navbar-nav navbar-right">
+  <div class="container" style="color: white; height: 32px">
+    <ul class="nav navbar-nav navbar-right">
+      <li class="vertical-margin">
+
+        <div class="input-wrapper">
+          <input
+            type="text"
+            class="form-control"
+            placeholder="Search for items"
+            ng-model="searchQuery"
+          />
+          <div class="my-row">
+            <i
+            ng-if="searchQuery != ''"
+  
+              class=" btn fa fa-search search-icon small-font"
+              ng-click="loadSearchedItems({searchQuery: searchQuery})"
+            ></i>
+            <i
+
+  
+              class=" btn fa fa-close clear-icon small-font"
+              ng-click="loadSearchedItems({searchQuery: ''})"
+            ></i>
+          </div>
+         
+        </div>
+      </li>
       <li>
         <i
           class="fa fa-leaf btn vertical-margin"
@@ -16,7 +41,7 @@
         <i
           class="fa fa-inr btn vertical-margin"
           style="color: slategrey"
-          uib-tooltip="Doesn't work"
+          uib-tooltip="Works now"
           tooltip-placement="bottom"
           ng-click="sortItemsPriceAscending()"
         ></i>
@@ -28,7 +53,7 @@
           style="color: slategrey"
           ng-click="toggleFilterModalVisibility()"
         ></i>
-        
+
         >
         <filters-modal
           show-filter-modal="showFilterModal"
diff --git a/index.htm b/index.htm
index afebba2..1dc7836 100644
--- a/index.htm
+++ b/index.htm
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-us" ng-app="oldMenu">
+<html lang="en-us">
   <head>
     <title>OldMenu</title>
     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
@@ -23,10 +23,6 @@
       }
     </style>
 
-    <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
-    <script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
-
   </head>
   <body class="body" id="main" ng-controller="bodyController">
     <header>
@@ -47,14 +43,7 @@
         ></cart-sidebar>
         
     </div>
-    
-    <script src="ng/app.js"></script>
-    <script src="ng/routes.js"></script>
-    <script src="ng/controllers/bodyController.js"></script>
-    <script src="ng/controllers/buyNowModalController.js"></script>
-    <script src="ng/controllers/homeController.js"></script>
-    <script src="ng/controllers/itemDetailsController.js"></script>
-    <script src="ng/services.js"></script>
-    <script src="ng/directives.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.min.js" data-main="ng/main"></script>
   </body>
 </html>
diff --git a/ng/app.js b/ng/app.js
index bfe1d27..5915b5b 100644
--- a/ng/app.js
+++ b/ng/app.js
@@ -1 +1,3 @@
-var oldMenu = angular.module("oldMenu", ["ngRoute", 'ui.bootstrap']);
+define(["angular", "angular-route", "ui-bootstrap"], function (angular) {
+  return angular.module("oldMenu", ["ngRoute", "ui.bootstrap"]);
+});
diff --git a/ng/controllers/bodyController.js b/ng/controllers/bodyController.js
index 6f8c719..9c88d36 100644
--- a/ng/controllers/bodyController.js
+++ b/ng/controllers/bodyController.js
@@ -1,4 +1,5 @@
-oldMenu.controller("bodyController", [
+define(["app"], function (oldMenu) {
+  oldMenu.controller("bodyController", [
     "$scope",
     "cartService",
     "cacheService",
@@ -6,18 +7,23 @@ oldMenu.controller("bodyController", [
       $scope.isCartOpen = false;
       $scope.cart = cartService.cart;
 
-      $scope.$watch('cart', function(newValue) {
-        cacheService.setData('cart', newValue);
-      }, true);
+      $scope.$watch(
+        "cart",
+        function (newValue) {
+          cacheService.setData("cart", newValue);
+        },
+        true
+      );
 
       $scope.toggleCartVisibility = function () {
         $scope.isCartOpen = !$scope.isCartOpen;
       };
-  
+
       $scope.getCartQuantity = cartService.getCartQuantity;
       $scope.changeItemQuantityInCart = cartService.changeItemQuantityInCart;
       $scope.getCartSubtotal = cartService.getCartSubtotal;
       $scope.getCartSubtotalWithoutDiscount =
         cartService.getCartSubtotalWithoutDiscount;
     },
-  ]);
\ No newline at end of file
+  ]);
+});
diff --git a/ng/controllers/buyNowModalController.js b/ng/controllers/buyNowModalController.js
index a842733..4fabb48 100644
--- a/ng/controllers/buyNowModalController.js
+++ b/ng/controllers/buyNowModalController.js
@@ -1,46 +1,28 @@
-oldMenu.controller("ModalController", [
-  "$scope",
-  "$uibModal",
-  "cartService",
-  function ($scope, $uibModal, cartService) {
-    $scope.openModal = function () {
-      var modalInstance = $uibModal.open({
-        templateUrl: "checkoutModal.htm",
-        controller: "ModalInstanceController",
-        size: "lg",
-        resolve: {
-          cartService: cartService,
-        },
-      });
+define(["app"], function (oldMenu) {
+  oldMenu.controller("ModalController", [
+    "$scope",
+    "$uibModal",
+    "cartService",
+    function ($scope, $uibModal, cartService) {
+      $scope.openModal = function () {
+        var modalInstance = $uibModal.open({
+          templateUrl: "checkoutModal.htm",
+          controller: "ModalInstanceController",
+          size: "lg",
+          resolve: {
+            cartService: cartService,
+          },
+        });
 
-      modalInstance.result.then(
-        function (selectedItem) {
-          $scope.selected = selectedItem;
-        },
-        function () {
-          console.log("Modal dismissed");
-        }
-      );
-    };
-  },
-]);
-
-oldMenu.controller("ModalInstanceController", [
-  "$scope",
-  "$uibModalInstance",
-  "cartService",
-  function ($scope, $uibModalInstance, cartService) {
-    $scope.cart = cartService.cart;
-
-    $scope.getCartSubtotal = cartService.getCartSubtotal;
-    console.log($scope.getCartSubtotal);
-
-    $scope.ok = function () {
-      $uibModalInstance.close("Some result");
-    };
-
-    $scope.cancel = function () {
-      $uibModalInstance.dismiss("cancel");
-    };
-  },
-]);
+        modalInstance.result.then(
+          function (selectedItem) {
+            $scope.selected = selectedItem;
+          },
+          function () {
+            console.log("Modal dismissed");
+          }
+        );
+      };
+    },
+  ]);
+});
diff --git a/ng/controllers/buyNowModalInstanceController.js b/ng/controllers/buyNowModalInstanceController.js
new file mode 100644
index 0000000..36cc266
--- /dev/null
+++ b/ng/controllers/buyNowModalInstanceController.js
@@ -0,0 +1,20 @@
+define(["app"], function (oldMenu) {
+  oldMenu.controller("ModalInstanceController", [
+    "$scope",
+    "$uibModalInstance",
+    "cartService",
+    function ($scope, $uibModalInstance, cartService) {
+      $scope.cart = cartService.cart;
+
+      $scope.getCartSubtotal = cartService.getCartSubtotal;
+
+      $scope.ok = function () {
+        $uibModalInstance.close("Some result");
+      };
+
+      $scope.cancel = function () {
+        $uibModalInstance.dismiss("cancel");
+      };
+    },
+  ]);
+});
diff --git a/ng/controllers/homeController.js b/ng/controllers/homeController.js
index 2b00f92..eddd22d 100644
--- a/ng/controllers/homeController.js
+++ b/ng/controllers/homeController.js
@@ -1,133 +1,178 @@
-oldMenu.controller("homeController", [
-  "$scope",
-  "$location",
-  "$http",
-  "$anchorScroll",
-  "itemService",
-  "cartService",
-  "filtersService",
-  "categoryService",
-  "cacheService",
-  "$log",
-  function (
-    $scope,
-    $location,
-    $http,
-    $anchorScroll,
-    itemService,
-    cartService,
-    filtersService,
-    categoryService,
-    cacheService,
-    $log
-  ) {
-    $scope.types = ["Veg", "Non Veg", "Contains Egg"];
-
-    // known bug: clicking on one category redirects you to that, but doesnt show on the categories list until clicked again, I do not know the cause
-    $scope.currentCategory = categoryService.currentCategory;
-
-    $scope.categoriesMap = {};
-    $scope.cart = cartService.cart;
-    $scope.showFilterModal = false;
-
-    $scope.$watch('cart', function(newValue) {
-      cacheService.setData('cart', newValue);
-    }, true);
-
-    $scope.loadData = async function () {
-      try {
-        const [itemsResponse, categoriesResponse, cuisineResponse] =
-          await Promise.all([
-            $http.get("http://localhost:3000/items"),
-            $http.get("http://localhost:3000/categories"),
-            $http.get("http://localhost:3000/cuisines"),
-          ]);
-
-        const items = itemsResponse.data.items;
-        const categories = categoriesResponse.data.categories;
-        const cuisines = cuisineResponse.data.cuisines;
-
-        $log.log(items);
-        $log.log(categories);
-        $log.log(cuisines);
-
-        $scope.$apply(function () {
-          $scope.items = items;
-          $scope.categories = categories;
-          $scope.cuisines = cuisines;
-
-          $scope.categories.forEach(function (category) {
-            $scope.categoriesMap[category] = [];
+define(["app"], function (oldMenu) {
+  oldMenu.controller("homeController", [
+    "$scope",
+    "$location",
+    "$http",
+    "$anchorScroll",
+    "itemService",
+    "cartService",
+    "filtersService",
+    "categoryService",
+    "cacheService",
+    "$log",
+    function (
+      $scope,
+      $location,
+      $http,
+      $anchorScroll,
+      itemService,
+      cartService,
+      filtersService,
+      categoryService,
+      cacheService,
+      $log
+    ) {
+      $scope.types = ["Veg", "Non Veg", "Contains Egg"];
+
+      // known bug: clicking on one category redirects you to that, but doesnt show on the categories list until clicked again, I do not know the cause
+      $scope.currentCategory = categoryService.currentCategory;
+
+      $scope.categoriesMap = {};
+      $scope.cart = cartService.cart;
+      $scope.showFilterModal = false;
+
+      $scope.$watch(
+        "cart",
+        function (newValue) {
+          cacheService.setData("cart", newValue);
+        },
+        true
+      );
+
+      $scope.loadData = async function () {
+        try {
+          const [itemsResponse, categoriesResponse, cuisineResponse] =
+            await Promise.all([
+              $http.get("http://localhost:3000/items"),
+              $http.get("http://localhost:3000/categories"),
+              $http.get("http://localhost:3000/cuisines"),
+            ]);
+
+          const items = itemsResponse.data.items;
+          const categories = categoriesResponse.data.categories;
+          const cuisines = cuisineResponse.data.cuisines;
+
+          $log.log(items);
+          $log.log(categories);
+          $log.log(cuisines);
+
+          $scope.$apply(function () {
+            $scope.items = items;
+            $scope.categories = categories;
+            $scope.cuisines = cuisines;
+
+            $scope.categories.forEach(function (category) {
+              $scope.categoriesMap[category] = [];
+            });
+
+            $scope.items.forEach(function (item) {
+              var category = item.category;
+              $scope.categoriesMap[category].push(item);
+            });
           });
 
-          $scope.items.forEach(function (item) {
-            var category = item.category;
-            $scope.categoriesMap[category].push(item);
+          itemService.items = items;
+        } catch (error) {
+          console.error("Error:", error);
+        }
+      };
+
+      $scope.searchQuery = "";
+      $scope.loadSearchedItems = async function (searchQuery) {
+        if (searchQuery == "") {
+          $scope.searchQuery = "";
+        }
+        try {
+          var config = {
+            params: {
+              q: searchQuery,
+            },
+          };
+          const itemsResponse = await $http.get(
+            "http://localhost:3000/items",
+            config
+          );
+
+          const items = itemsResponse.data.items;
+
+          $log.log(items);
+
+          $scope.$apply(function () {
+            $scope.items = items;
+
+            $scope.categories.forEach(function (category) {
+              $scope.categoriesMap[category] = [];
+            });
+
+            $scope.items.forEach(function (item) {
+              var category = item.category;
+              $scope.categoriesMap[category].push(item);
+            });
           });
-        });
-
-        itemService.items = items;
-      } catch (error) {
-        console.error("Error:", error);
-      }
-    };
-
-    $scope.loadData();
-
-    $scope.toggleFilterModalVisibility = function () {
-      $scope.showFilterModal = !$scope.showFilterModal;
-    };
-
-    $scope.getDiscountPercentage = function (price, discountedPrice) {
-      return Math.round((100 * (price - discountedPrice)) / price);
-    };
-
-    var scrollTo = function (elementId) {
-      //some bug
-      // $location.hash(elementId);
-      // $anchorScroll();
-    };
-
-    $scope.changeCategory = function (newCategory) {
-      categoryService.currentCategory = newCategory;
-      scrollTo(newCategory);
-    };
-
-    $scope.getCartQuantity = cartService.getCartQuantity;
-    $scope.changeItemQuantityInCart = cartService.changeItemQuantityInCart;
-    $scope.addItemToCart = cartService.addItemToCart;
-    $scope.typeFilter = filtersService.typeFilter;
-    $scope.cuisineFilter = filtersService.cuisineFilter;
-    $scope.isFilterSelected = filtersService.isFilterSelected;
-    $scope.toggleFilter = filtersService.toggleFilter;
-
-    $scope.isDishToBeShown = function (type, cuisine) {
-      var isTypeValid = false;
-      var isCuisineValid = false;
-
-      if ($scope.typeFilter[type] === true) {
-        isTypeValid = true;
-      }
-      if ($scope.cuisineFilter[cuisine] === true) {
-        isCuisineValid = true;
-      }
-
-      if (Object.keys($scope.typeFilter).length === 0) {
-        isTypeValid = true;
-      }
-      if (Object.keys($scope.cuisineFilter).length === 0) {
-        isCuisineValid = true;
-      }
-
-      return isTypeValid && isCuisineValid;
-    };
-
-    $scope.sortItemsPriceAscending = function() {
-      for(category in $scope.categoriesMap) {
-        $scope.categoriesMap[category].sort((a,b)=>a.discountedPrice - b.discountedPrice);
-      }
-    };
-  },
-]);
-
 
+          itemService.items = items;
+        } catch (error) {
+          console.error("Error:", error);
+        }
+      };
+
+      $scope.loadData();
+
+      $scope.toggleFilterModalVisibility = function () {
+        $scope.showFilterModal = !$scope.showFilterModal;
+      };
+
+      $scope.getDiscountPercentage = function (price, discountedPrice) {
+        return Math.round((100 * (price - discountedPrice)) / price);
+      };
+
+      var scrollTo = function (elementId) {
+        //some bug
+        // $location.hash(elementId);
+        // $anchorScroll();
+      };
+
+      $scope.changeCategory = function (newCategory) {
+        categoryService.currentCategory = newCategory;
+        scrollTo(newCategory);
+      };
+
+      $scope.getCartQuantity = cartService.getCartQuantity;
+      $scope.changeItemQuantityInCart = cartService.changeItemQuantityInCart;
+      $scope.addItemToCart = cartService.addItemToCart;
+      $scope.typeFilter = filtersService.typeFilter;
+      $scope.cuisineFilter = filtersService.cuisineFilter;
+      $scope.isFilterSelected = filtersService.isFilterSelected;
+      $scope.toggleFilter = filtersService.toggleFilter;
+
+      $scope.isDishToBeShown = function (type, cuisine) {
+        var isTypeValid = false;
+        var isCuisineValid = false;
+
+        if ($scope.typeFilter[type] === true) {
+          isTypeValid = true;
+        }
+        if ($scope.cuisineFilter[cuisine] === true) {
+          isCuisineValid = true;
+        }
+
+        if (Object.keys($scope.typeFilter).length === 0) {
+          isTypeValid = true;
+        }
+        if (Object.keys($scope.cuisineFilter).length === 0) {
+          isCuisineValid = true;
+        }
+
+        return isTypeValid && isCuisineValid;
+      };
+
+      $scope.sortItemsPriceAscending = function () {
+        for (category in $scope.categoriesMap) {
+          $scope.categoriesMap[category].sort(
+            (a, b) => a.discountedPrice - b.discountedPrice
+          );
+        }
+      };
+    },
+  ]);
+});
diff --git a/ng/controllers/itemDetailsController.js b/ng/controllers/itemDetailsController.js
index f112538..28e5fac 100644
--- a/ng/controllers/itemDetailsController.js
+++ b/ng/controllers/itemDetailsController.js
@@ -1,58 +1,71 @@
-oldMenu.controller("itemDetailsController", [
-  "$scope",
-  "$routeParams",
-  "$http",
-  "itemDetailsService",
-  "cartService",
-  "cacheService",
-  function ($scope, $routeParams, $http, itemDetailsService, cartService, cacheService) {
-    $scope.itemId = $routeParams.itemId;
+define(["app"], function (oldMenu) {
+  oldMenu.controller("itemDetailsController", [
+    "$scope",
+    "$routeParams",
+    "$http",
+    "itemDetailsService",
+    "cartService",
+    "cacheService",
+    function (
+      $scope,
+      $routeParams,
+      $http,
+      itemDetailsService,
+      cartService,
+      cacheService
+    ) {
+      $scope.itemId = $routeParams.itemId;
 
-    $scope.loadData = async function () {
-      try {
-        const response = await $http.get(
-          "http://localhost:3000/items/" + $scope.itemId
-        );
-        const item = response.data;
-        $scope.$apply(function () {
-          $scope.item = item;
-        });
-        itemDetailsService.item = item;
-        console.log($scope.item);
-      } catch (error) {
-        console.error("Error:", error);
-      }
-    };
+      $scope.loadData = async function () {
+        try {
+          const response = await $http.get(
+            "http://localhost:3000/items/" + $scope.itemId
+          );
+          const item = response.data;
+          $scope.$apply(function () {
+            $scope.item = item;
+          });
+          itemDetailsService.item = item;
+          console.log($scope.item);
+        } catch (error) {
+          console.error("Error:", error);
+        }
+      };
 
-    $scope.loadData();
-    $scope.cart = cartService.cart;
-    $scope.$watch('cart', function(newValue) {
-      cacheService.setData('cart', newValue);
-    }, true);
+      $scope.loadData();
+      $scope.cart = cartService.cart;
+      $scope.$watch(
+        "cart",
+        function (newValue) {
+          cacheService.setData("cart", newValue);
+        },
+        true
+      );
 
-    $scope.getDiscountPercentage = function (price, discountedPrice) {
-      return Math.round((100 * (price - discountedPrice)) / price);
-    };
+      $scope.getDiscountPercentage = function (price, discountedPrice) {
+        return Math.round((100 * (price - discountedPrice)) / price);
+      };
 
-    $scope.getCartQuantity = function (itemId) {
-      if ($scope.cart[itemId] != null) {
-        return $scope.cart[itemId].quantity;
-      }
-      return 0;
-    };
+      $scope.getCartQuantity = function (itemId) {
+        if ($scope.cart[itemId] != null) {
+          return $scope.cart[itemId].quantity;
+        }
+        return 0;
+      };
 
-    $scope.addItemToCart = function (item) {
-      $scope.cart[item.id] = item;
-      $scope.cart[item.id].quantity = 1;
-      cartService.cart = $scope.cart;
-    };
+      $scope.addItemToCart = function (item) {
+        $scope.cart[item.id] = item;
+        $scope.cart[item.id].quantity = 1;
+        cartService.cart = $scope.cart;
+      };
 
-    $scope.changeItemQuantityInCart = function (action, itemId) {
-      $scope.cart[itemId].quantity += action;
-      if ($scope.cart[itemId].quantity === 0) {
-        delete $scope.cart[itemId];
-      }
-      cartService.cart = $scope.cart;
-    };
-  },
-]);
+      $scope.changeItemQuantityInCart = function (action, itemId) {
+        $scope.cart[itemId].quantity += action;
+        if ($scope.cart[itemId].quantity === 0) {
+          delete $scope.cart[itemId];
+        }
+        cartService.cart = $scope.cart;
+      };
+    },
+  ]);
+});
diff --git a/ng/directives.js b/ng/directives.js
index 3276cf7..e81dcf4 100644
--- a/ng/directives.js
+++ b/ng/directives.js
@@ -1,123 +1,113 @@
-
-oldMenu.directive('cartSidebar', function() {
+define(["app"], function (oldMenu) {
+  oldMenu.directive("cartSidebar", function () {
     return {
-        templateUrl: 'directives/cartSidebar.htm',
-        replace: true,
-        scope: {
-            isCartOpen: '=',
-            cart: '=',
-            toggleCartVisibility: '&',
-            changeItemQuantityInCart: '&',
-            getCartQuantity: '&',
-            getCartSubtotal: '&',
-            getCartSubtotalWithoutDiscout: '&',
-        }
+      templateUrl: "directives/cartSidebar.htm",
+      replace: true,
+      scope: {
+        isCartOpen: "=",
+        cart: "=",
+        toggleCartVisibility: "&",
+        changeItemQuantityInCart: "&",
+        getCartQuantity: "&",
+        getCartSubtotal: "&",
+        getCartSubtotalWithoutDiscout: "&",
+      },
     };
-    
-});
+  });
 
-oldMenu.directive('filtersModal', function() {
+  oldMenu.directive("filtersModal", function () {
     return {
-        templateUrl: 'directives/filtersModal.htm',
-        replace: true,
-        scope: {
-            types: '=',
-            cuisines: '=',
-            showFilterModal:'=',
-            toggleFilter: '&',
-            isFilterSelected: '&',
-            toggleFilterModalVisibility: '&',
-        }
+      templateUrl: "directives/filtersModal.htm",
+      replace: true,
+      scope: {
+        types: "=",
+        cuisines: "=",
+        showFilterModal: "=",
+        toggleFilter: "&",
+        isFilterSelected: "&",
+        toggleFilterModalVisibility: "&",
+      },
     };
-    
-});
+  });
 
-oldMenu.directive('itemCard', function() {
+  oldMenu.directive("itemCard", function () {
     return {
-        templateUrl: 'directives/itemCard.htm',
-        replace: true,
-        scope: {
-            item: '=',
-            isDishToBeShown: '&',
-            getDiscountPercentage: '&',
-            getCartQuantity: '&',
-            addItemToCart: '&',
-            changeItemQuantityInCart: '&',
-
-        }
+      templateUrl: "directives/itemCard.htm",
+      replace: true,
+      scope: {
+        item: "=",
+        isDishToBeShown: "&",
+        getDiscountPercentage: "&",
+        getCartQuantity: "&",
+        addItemToCart: "&",
+        changeItemQuantityInCart: "&",
+      },
     };
-    
-});
+  });
 
-oldMenu.directive('cartItemCard', function() {
+  oldMenu.directive("cartItemCard", function () {
     return {
-        templateUrl: 'directives/cartItemCard.htm',
-        replace: true,
-        scope: {
-            item: '=',
-            getCartQuantity: '&',
-            changeItemQuantityInCart: '&',
-
-        }
+      templateUrl: "directives/cartItemCard.htm",
+      replace: true,
+      scope: {
+        item: "=",
+        getCartQuantity: "&",
+        changeItemQuantityInCart: "&",
+      },
     };
-    
-});
+  });
 
-oldMenu.directive('categoriesColumn', function() {
+  oldMenu.directive("categoriesColumn", function () {
     return {
-        templateUrl: 'directives/categoriesColumn.htm',
-        replace: true,
-        scope: {
-            currentCategory: '=',
-            categories: '=',
-            changeCategory: '&',
-        }
+      templateUrl: "directives/categoriesColumn.htm",
+      replace: true,
+      scope: {
+        currentCategory: "=",
+        categories: "=",
+        changeCategory: "&",
+      },
     };
-    
-});
+  });
 
-oldMenu.directive('filterSection', function() {
+  oldMenu.directive("filterSection", function () {
     return {
-        templateUrl: 'directives/filterSection.htm',
-        replace: true,
-        scope: {
-            list: '=',
-            title:'@',
-            filterSectionType:'@',
-            toggleFilter: '&',
-            isFilterSelected: '&',
-
-        }
+      templateUrl: "directives/filterSection.htm",
+      replace: true,
+      scope: {
+        list: "=",
+        title: "@",
+        filterSectionType: "@",
+        toggleFilter: "&",
+        isFilterSelected: "&",
+      },
     };
-    
-});
+  });
 
-oldMenu.directive('homeNavbar', function() {
+  oldMenu.directive("homeNavbar", function () {
     return {
-        templateUrl: 'directives/homeNavbar.htm',
-        replace: true,
-        scope: {
-            types: '=',
-            cuisines: '=',
-            showFilterModal:'=',
-            toggleFilter: '&',
-            isFilterSelected: '&',
-            toggleFilterModalVisibility: '&',
-            sortItemsPriceAscending: '&',
-        }
+      templateUrl: "directives/homeNavbar.htm",
+      replace: true,
+      scope: {
+        types: "=",
+        cuisines: "=",
+        showFilterModal: "=",
+        toggleFilter: "&",
+        isFilterSelected: "&",
+        toggleFilterModalVisibility: "&",
+        sortItemsPriceAscending: "&",
+        loadSearchedItems: "&",
+        searchQuery: "=",
+      },
     };
-    
-});
-
+  });
 
-oldMenu.directive('navbar', function() {
+  oldMenu.directive("navbar", function () {
     return {
-        templateUrl: 'directives/navbar.htm',
-        replace: true,
-        scope: {
-            toggleCartVisibility: '&',
-        }
+      templateUrl: "directives/navbar.htm",
+      replace: true,
+      scope: {
+        toggleCartVisibility: "&",
+      },
     };
-    
+  });
 });
-
diff --git a/ng/main.js b/ng/main.js
new file mode 100644
index 0000000..8441c33
--- /dev/null
+++ b/ng/main.js
@@ -0,0 +1,45 @@
+require.config({
+  paths: {
+    angular: "//code.angularjs.org/1.3.0-rc.1/angular.min",
+    "angular-route": "//code.angularjs.org/1.3.0-rc.1/angular-route.min",
+    "ui-bootstrap":
+      "//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min",
+    app: "app",
+    routes: "routes",
+    services: "services",
+    directives: "directives",
+    bodyController: "controllers/bodyController",
+    buyNowModalController: "controllers/buyNowModalController",
+    buyNowModalInstanceController: "controllers/buyNowModalInstanceController",
+    homeController: "controllers/homeController",
+    itemDetailsController: "controllers/itemDetailsController",
+  },
+  shim: {
+    angular: { exports: "angular" },
+    "angular-route": { deps: ["angular"] },
+    "ui-bootstrap": { deps: ["angular"] },
+    app: { deps: ["angular", "angular-route", "ui-bootstrap"] },
+    routes: { deps: ["app"] },
+    services: { deps: ["app"] },
+    directives: { deps: ["app"] },
+    bodyController: { deps: ["app"] },
+    buyNowModalController: { deps: ["app"] },
+    buyNowModalInstanceController: { deps: ["app"] },
+    homeController: { deps: ["app"] },
+    itemDetailsController: { deps: ["app"] },
+  },
+});
+
+require([
+  "app",
+  "routes",
+  "services",
+  "directives",
+  "bodyController",
+  "buyNowModalController",
+  "buyNowModalInstanceController",
+  "homeController",
+  "itemDetailsController",
+], function (app) {
+  angular.bootstrap(document, ["oldMenu"]);
+});
diff --git a/ng/routes.js b/ng/routes.js
index d6c50e2..3d05853 100644
--- a/ng/routes.js
+++ b/ng/routes.js
@@ -1,12 +1,13 @@
-
-oldMenu.config(function ($routeProvider) {
+define(["app"], function (oldMenu) {
+  oldMenu.config(function ($routeProvider) {
     $routeProvider
       .when("/", {
         templateUrl: "pages/home.htm",
         controller: "homeController",
-      }).when("/items/:itemId", {
+      })
+      .when("/items/:itemId", {
         templateUrl: "pages/item_details.htm",
         controller: "itemDetailsController",
       });
   });
-  
\ No newline at end of file
+});
diff --git a/ng/services.js b/ng/services.js
index 20cb22c..3de058b 100644
--- a/ng/services.js
+++ b/ng/services.js
@@ -1,125 +1,131 @@
-oldMenu.service("itemService", [
-  function () {
-    this.items = [];
-  },
-]);
-
-// take this back to itemdetailscontroller when integrating with backend/db
-// plan is to call an api to get description, ingredients and nutrition
-oldMenu.service("itemDetailsService", [
-  function () {
-    this.item = {};
-  },
-]);
+define(["app"], function (oldMenu) {
+  oldMenu.service("itemService", [
+    function () {
+      this.items = [];
+    },
+  ]);
 
-oldMenu.service("cartService", [ "cacheService",
+  // take this back to itemdetailscontroller when integrating with backend/db
+  // plan is to call an api to get description, ingredients and nutrition
+  oldMenu.service("itemDetailsService", [
+    function () {
+      this.item = {};
+    },
+  ]);
 
-  function (cacheService) {
-    this.cart = cacheService.getData('cart') || {};
+  oldMenu.service("cartService", [
+    "cacheService",
 
-    this.getCartSubtotal = function () {
-      var subtotal = 0;
+    function (cacheService) {
+      this.cart = cacheService.getData("cart") || {};
 
-      for (key in this.cart) {
-        subtotal += this.cart[key].quantity * this.cart[key].discountedPrice;
-      }
-      return subtotal;
-    };
+      this.getCartSubtotal = function () {
+        var subtotal = 0;
 
-    this.getCartSubtotalWithoutDiscount = function () {
-      var subtotalWithoutDiscount = 0;
+        for (key in this.cart) {
+          subtotal += this.cart[key].quantity * this.cart[key].discountedPrice;
+        }
+        return subtotal;
+      };
 
-      for (key in this.cart) {
-        subtotalWithoutDiscount +=
-          this.cart[key].quantity * this.cart[key].price;
-      }
-      return subtotalWithoutDiscount;
-    };
+      this.getCartSubtotalWithoutDiscount = function () {
+        var subtotalWithoutDiscount = 0;
 
-    this.changeItemQuantityInCart = function (action, itemId) {
-      this.cart[itemId].quantity += action;
-      if (this.cart[itemId].quantity === 0) {
-        delete this.cart[itemId];
-      }
-    };
+        for (key in this.cart) {
+          subtotalWithoutDiscount +=
+            this.cart[key].quantity * this.cart[key].price;
+        }
+        return subtotalWithoutDiscount;
+      };
 
-    this.getCartQuantity = function (itemId) {
-      if (this.cart[itemId] != null) {
-        return this.cart[itemId].quantity;
-      }
-      return 0;
-    };
+      this.changeItemQuantityInCart = function (action, itemId) {
+        this.cart[itemId].quantity += action;
+        if (this.cart[itemId].quantity === 0) {
+          delete this.cart[itemId];
+        }
+      };
 
-    this.addItemToCart = function (item) {
-      this.cart[item.id] = item;
-      this.cart[item.id].quantity = 1;
-    };
-  },
-]);
+      this.getCartQuantity = function (itemId) {
+        if (this.cart[itemId] != null) {
+          return this.cart[itemId].quantity;
+        }
+        return 0;
+      };
 
-oldMenu.service("filtersService", [
-  function () {
-    this.typeFilter = {};
-    this.cuisineFilter = {};
+      this.addItemToCart = function (item) {
+        this.cart[item.id] = item;
+        this.cart[item.id].quantity = 1;
+      };
+    },
+  ]);
 
-    this.isFilterSelected = function (filterType, property) {
-      switch (filterType) {
-        case "type":
-          if (this.typeFilter[property] === true) {
-            return true;
-          }
-          break;
-        case "cuisine":
-          if (this.cuisineFilter[property] === true) {
-            return true;
-          }
-          break;
-        default:
-          break;
-      }
-      return false;
-    };
+  oldMenu.service("filtersService", [
+    function () {
+      this.typeFilter = {};
+      this.cuisineFilter = {};
 
-    this.toggleFilter = function (filterType, property) {
-      switch (filterType) {
-        case "type":
-          if (this.typeFilter[property] === true) {
-            delete this.typeFilter[property];
-          } else {
-            this.typeFilter[property] = true;
-          }
-          break;
-        case "cuisine":
-          if (this.cuisineFilter[property] === true) {
-            delete this.cuisineFilter[property];
-          } else {
-            this.cuisineFilter[property] = true;
-          }
-          break;
-        default:
-          break;
-      }
-    };
-  },
-]);
+      this.isFilterSelected = function (filterType, property) {
+        switch (filterType) {
+          case "type":
+            if (this.typeFilter[property] === true) {
+              return true;
+            }
+            break;
+          case "cuisine":
+            if (this.cuisineFilter[property] === true) {
+              return true;
+            }
+            break;
+          default:
+            break;
+        }
+        return false;
+      };
 
-// had to make this service as the url kept changing on selecting a category, which reinitialised the controller and thus, currentCategory to 'bowl'
-oldMenu.service("categoryService", [
-  function () {
-    this.currentCategory = "Bowl";
-  },
-]);
+      this.toggleFilter = function (filterType, property) {
+        switch (filterType) {
+          case "type":
+            if (this.typeFilter[property] === true) {
+              delete this.typeFilter[property];
+            } else {
+              this.typeFilter[property] = true;
+            }
+            break;
+          case "cuisine":
+            if (this.cuisineFilter[property] === true) {
+              delete this.cuisineFilter[property];
+            } else {
+              this.cuisineFilter[property] = true;
+            }
+            break;
+          default:
+            break;
+        }
+      };
+    },
+  ]);
 
-angular.module('oldMenu').service('cacheService', function($window) {
-  return {
-    setData: function(key, data) {
-      $window.localStorage.setItem(key, angular.toJson(data));
+  // had to make this service as the url kept changing on selecting a category, which reinitialised the controller and thus, currentCategory to 'bowl'
+  oldMenu.service("categoryService", [
+    function () {
+      this.currentCategory = "Bowls";
     },
-    getData: function(key) {
-      return angular.fromJson($window.localStorage.getItem(key));
+  ]);
+
+  oldMenu.service("cacheService", [
+    "$window",
+    function ($window) {
+      return {
+        setData: function (key, data) {
+          $window.localStorage.setItem(key, angular.toJson(data));
+        },
+        getData: function (key) {
+          return angular.fromJson($window.localStorage.getItem(key));
+        },
+        removeData: function (key) {
+          $window.localStorage.removeItem(key);
+        },
+      };
     },
-    removeData: function(key) {
-      $window.localStorage.removeItem(key);
-    }
-  };
-});
\ No newline at end of file
+  ]);
+});
diff --git a/pages/home.htm b/pages/home.htm
index 7969d76..7ffcd83 100644
--- a/pages/home.htm
+++ b/pages/home.htm
@@ -6,17 +6,18 @@
   toggle-filter-modal-visibility="toggleFilterModalVisibility()"
   is-filter-selected="isFilterSelected(filterType, property)"
   sort-items-price-ascending="sortItemsPriceAscending()"
+  load-searched-items="loadSearchedItems(searchQuery)"
+  search-query="searchQuery"
 ></home-navbar>
 
-
-<categories-column class="small-screen-hide"
+<categories-column
+  class="small-screen-hide"
   current-category="currentCategory"
   categories="categories"
   change-category="changeCategory(newCategory)"
 ></categories-column>
 
-<div class="big-screen-left-margin" style="margin-top: 172px;">
-  
+<div class="big-screen-left-margin" style="margin-top: 148px">
   <div class="column" ng-repeat="category in categories">
     <h2 id="{{category}}">{{category}}</h2>
     <div class="my-row">
diff --git a/styles.css b/styles.css
index e20c530..33e14c5 100644
--- a/styles.css
+++ b/styles.css
@@ -41,6 +41,29 @@
 }
 }
 
+.input-wrapper {
+  position: relative;
+}
+
+.input-wrapper .form-control {
+  padding-right: 30px; /* Adjust as needed */
+}
+
+.input-wrapper .search-icon {
+  position: absolute;
+  top: 50%;
+  right: 24px; 
+  transform: translateY(-50%);
+ /* Allows clicks to pass through to the input */
+}
+
+.clear-icon {
+  position: absolute;
+  top: 50%;
+  right: 0px; 
+  transform: translateY(-50%);
+}
+
 .vertical-margin {
   margin-top: 12px;
   margin-bottom: 12px;
@@ -92,7 +115,7 @@
   height: 72%;
   width: 164px;
   position: fixed;
-  top: 188px;
+  top: 156px;
 }
 
 /* for testing */
@@ -128,11 +151,11 @@
 
 .apply-filter-button {
   background-color: steelblue;
-  position: absolute;
+  position:sticky;
   width: 100%;
   text-align: center;
   height: 10%;
-  bottom: 0;
+  bottom: 0%;
   color: white;
   border-radius: 0px;
   align-content: center;
