diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7a5fce4
--- /dev/null
+++ b/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "kendo-react-template-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@progress/kendo-data-query": "latest",
+    "@progress/kendo-drawing": "latest",
+    "@progress/kendo-react-charts": "latest",
+    "@progress/kendo-react-dateinputs": "latest",
+    "@progress/kendo-react-dialogs": "latest",
+    "@progress/kendo-react-dropdowns": "latest",
+    "@progress/kendo-react-grid": "latest",
+    "@progress/kendo-react-inputs": "latest",
+    "@progress/kendo-react-intl": "latest",
+    "@progress/kendo-react-layout": "latest",
+    "@progress/kendo-react-tooltip": "latest",
+    "@progress/kendo-theme-default": "latest",
+    "bootstrap": "^4.3.1",
+    "hammerjs": "^2.0.8",
+    "node-sass": "^4.12.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-router-dom": "^5.0.1",
+    "react-scripts": "3.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..46a558a
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import './App.scss';
+import { Header } from './components/Header'
+import { BrowserRouter as Router, Route  } from "react-router-dom";
+import Home from './components/Home';
+import GridPage from './components/GridPage';
+import ChartPage from './components/ChartPage';
+import FormsPage from './components/FormsPage';
+import Footer from './components/Footer';
+
+const App = () => {
+  const [theme, setTheme] = useState("https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css");
+
+  const changeTheme = (theme) => {
+    setTheme(theme);
+  }
+
+  return (
+    <Router>
+        <link rel="stylesheet" href={theme}></link>
+        <div className="content">
+          <Header projectName={'Project Name'} />
+          <Route exact path="/" component={Home} key={1}/>
+          <Route exact path="/grid" render={(props) => <GridPage {...props} changeTheme={changeTheme} theme={theme}/>} key={2}/>
+          <Route exact path="/chart" render={(props) => <ChartPage {...props} changeTheme={changeTheme} theme={theme}/>}  key={3}/>
+          <Route exact path="/forms" render={(props) => <FormsPage {...props} changeTheme={changeTheme} theme={theme}/>} key={4}/>
+        </div>
+        <div className="footer">
+          <Footer />
+        </div>
+      </Router>
+  );
+}
+
+export default App;
diff --git a/src/App.scss b/src/App.scss
new file mode 100644
index 0000000..79acbcf
--- /dev/null
+++ b/src/App.scss
@@ -0,0 +1,154 @@
+@import './styles/bootstrap-custom.scss';
+
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.app-header>.project-name{
+  text-align: left;
+  letter-spacing: 0;
+  color: #000000;
+  opacity: 1;
+}
+
+.app-header>.nav{
+  float: righnpmt;
+}
+
+.content {
+  min-height: 100vh;
+}
+
+.logo {
+  font-weight: 700;
+  font-size: 24px;
+}
+
+.welcome {
+  text-align: center;
+  font-weight: 900;
+  letter-spacing: 0;
+  color: #000000;
+  opacity: 1;
+}
+
+.message{
+  text-align: center;
+}
+
+.sub-header {
+  text-align: center;
+  font-weight: 400;
+  letter-spacing: 0;
+  color: #919191;
+  opacity: 1;
+  margin-bottom: 4rem;
+}
+
+.get-started {
+  text-align: center;
+  font-weight: 900;
+  font-size: 78px;
+  letter-spacing: 0;
+  color: #000000;
+  opacity: 1;
+  margin-bottom: 1rem;
+}
+
+.kendoka {
+  width: 12.5rem;
+  height: 12.5rem;
+  opacity: 1;
+}
+
+.change-theme {
+  font-size: 14px;
+  color: #9098A5;
+}
+
+.components-list>p>a {
+  margin-left: 0.6em;
+}
+.components-list>p>img {
+  width: 1.25rem;
+  height: 1.3125rem;
+}
+.footer {
+  font-size: 11px;
+  background: #646871 0% 0% no-repeat padding-box;
+  opacity: 1;
+  padding-top: 2rem;
+  padding-bottom: 3rem;
+}
+
+.footer .links {
+  text-align: left;
+  letter-spacing: 0.33px;
+  color: #FFFFFF;
+  font-weight: 700;
+  opacity: 1;
+}
+.divider {
+  margin-left: 0.4rem;
+  margin-right: 0.4rem;
+  opacity: 0.2;
+}
+
+.copyright{
+  letter-spacing: 0.33px;
+  color: #FFFFFF;
+  opacity: 0.6;
+}
+
+.k-widget.k-menu {
+  height: 100%;
+}
+
+.k-widget.k-dropdown, .k-list .k-item {
+  text-transform: uppercase;
+}
+
+.social img {
+  margin-left: 3rem;
+}
+
+.k-menu:not(.k-context-menu)>.k-item>.k-link::before {
+  pointer-events: none;
+}
+a, a:visited {
+  color: inherit;
+  font-weight: 500;
+}
+.k-tooltip {
+  width: 15rem;
+}
\ No newline at end of file
diff --git a/src/App.test.js b/src/App.test.js
new file mode 100644
index 0000000..a754b20
--- /dev/null
+++ b/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/common/sample-products.jsx b/src/common/sample-products.jsx
new file mode 100644
index 0000000..639f419
--- /dev/null
+++ b/src/common/sample-products.jsx
@@ -0,0 +1,1236 @@
+
+export const sampleProducts =
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
+;
diff --git a/src/components/ChartPage.jsx b/src/components/ChartPage.jsx
new file mode 100644
index 0000000..857045d
--- /dev/null
+++ b/src/components/ChartPage.jsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import {
+    Chart,
+    ChartLegend,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTitle,
+    ChartValueAxis,
+    ChartValueAxisItem
+} from '@progress/kendo-react-charts'
+import ThemeChooser from './ThemeChooser';
+
+const series = [
+    { category: 'EUROPE', value: 0.3 },
+    { category: 'NORTH AMERICA', value: 0.23 },
+    { category: 'AUSTRALIA', value: 0.18 },
+    { category: 'ASIA', value: 0.15 },
+    { category: 'SOUTH AMERICA', value: 0.09 },
+    { category: 'AFRICA', value: 0.05 }
+];
+const loadingPanel = (
+    <div className="k-loading-mask">
+        <span className="k-loading-text">Loading</span>
+        <div className="k-loading-image"></div>
+        <div className="k-loading-color"></div>
+    </div>
+);
+
+const ChartPage = (props) => {
+    const [theme, setTheme] = useState(props.theme);
+    const [loading, setLoading] = useState(false)
+    if (props.theme !== theme) {
+        setTheme(props.theme);
+        setLoading(true)
+        setTimeout(() => {
+            setLoading(false)
+        }, 100);
+    }
+    return (
+        <div className='container-fluid'>
+            <ThemeChooser changeTheme={props.changeTheme} theme={props.theme}/>
+            <div className='row my-4'>
+                <div className='col-12 col-lg-9 border-right' key={props.theme + Math.random()}>
+                    {loading && loadingPanel}
+                    {!loading && <Chart theme='sass' transitions={false}>
+                        {/*<ChartTooltip />  uncomment to enable Tooltips */}
+                        <ChartTitle text="Production" font="19pt sans-serif" margin={{ bottom: 50 }} />
+                        <ChartLegend position="bottom" />
+                        <ChartSeries>
+                            <ChartSeriesItem type="column" data={series} field="value" categoryField="category" />
+                        </ChartSeries>
+                        <ChartValueAxis>
+                            <ChartValueAxisItem labels={{ format: 'p0' }} />
+                        </ChartValueAxis>}
+                    </Chart>}
+                </div>
+                <div className='col-12 col-lg-3 mt-3 mt-lg-0'>
+                    <h3>KendoReact Chart</h3>
+                    <p>The KendoReact Charts provide high quality graphical data visualization options.</p>
+                    <p>They include a variety of chart types and styles that have extensive configuration options. This flexibility allows you to quickly and easily create the exact chart you need to fit your specific requirements for functionality and appearance.</p>
+                    <p>The KendoReact Chart Components are built from the ground up, specifically for React, so that you get high performance chart components that integrate with your React app and with the rest of your React UI components.</p>
+                    <p>For documentation and demos of all available Chart types (Bar, Line, Donut, Sparkline, StockChart etc), please visit the <a href="https://www.telerik.com/kendo-react-ui/components/charts/?utm_medium=cpm&utm_source=stackblitz-app&utm_campaign=kendo-ui-react-trial-charts">KendoReact Chart documentation page.</a> </p>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ChartPage;
\ No newline at end of file
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 0000000..3a8775b
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+const span = (<span className='divider'> | </span>)
+const Footer = (props) => {
+    return (
+        <div className="container-fluid">
+            <div className='d-flex'>
+                 <div>
+                <div className='mb-2 links'>
+                    <a href="https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=cpm&utm_source=stackblitz-app&utm_campaign=kendo-ui-react-awareness-license-agreement">License Agreement</a>
+                </div>
+                <div className='copyright'>
+                    Copyright © 2019 Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.
+                </div>
+                </div>
+                <div className='d-flex ml-auto'>
+                    <div className="social">
+                        <a href="https://www.facebook.com/KendoUI/"><img src="./img/facebook.png" alt="facebook" /></a>
+                        <a href="https://twitter.com/kendoreact"><img src="./img/twitter.png" alt="twitter" /></a>
+                        <a href="https://www.youtube.com/results?search_query=kendoreact"><img src="./img/youtube.png" alt="youtube" /></a>
+                        <a href="https://www.linkedin.com/showcase/telerik/"><img src="./img/linkedin.png" alt="linkedin" /></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/FormsPage.jsx b/src/components/FormsPage.jsx
new file mode 100644
index 0000000..2cd1d6b
--- /dev/null
+++ b/src/components/FormsPage.jsx
@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { Input } from '@progress/kendo-react-inputs';
+import { DatePicker } from '@progress/kendo-react-dateinputs';
+import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
+import ThemeChooser from './ThemeChooser';
+const FormsPage = (props) => {
+    const [formData, setFormData] = useState({
+        firstName: '',
+        lastName: '',
+        dateOfBirth: new Date(),
+        email: '',
+        company: '',
+        userName: '',
+        password: '',
+        twoFactor: false
+    });
+    const [showDialog, setShowDialog ] = useState(false)
+    const clearForm = () => {
+        setFormData({
+            firstName: '',
+            lastName: '',
+            dateOfBirth: new Date(),
+            email: '',
+            company: '',
+            userName: '',
+            password: '',
+            twoFactor: false
+        });
+    }
+
+    const onFormFieldChange = (e, field) => {
+        setFormData({ ...formData, [field]: e.target.value });
+    }
+
+    const toggleDialog = () => {
+        setShowDialog(!showDialog);
+    }
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        clearForm();
+        setShowDialog(!showDialog);
+    }
+
+    return (
+        <div className="container-fluid">
+            <ThemeChooser changeTheme={props.changeTheme} theme={props.theme}/>
+            {showDialog && <Dialog onClose={toggleDialog}>
+            <p style={{ margin: "25px", textAlign: "center" }}>The form is successfully submitted!</p>
+            <DialogActionsBar>
+                <button className="k-button" onClick={toggleDialog}>OK</button>
+            </DialogActionsBar>
+        </Dialog>}
+            <div className='row my-4'>
+                <div className='col-12 col-lg-9 border-right'>
+                    <div className="row example-wrapper">
+                        <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                            <div className="card">
+                                <div className="card-block">
+                                    <form className="k-form" onSubmit={handleSubmit}>
+                                        <fieldset>
+                                            <legend>User Details</legend>
+
+                                            <label className="k-form-field">
+                                                <span>First Name</span>
+                                                <Input placeholder="Your Name" value={formData.firstName} onChange={(e) => onFormFieldChange(e, "firstName")} />
+                                            </label>
+                                            <label className="k-form-field">
+                                                <span>Last Name</span>
+                                                <Input placeholder="Your Last Name" value={formData.lastName} onChange={(e) => onFormFieldChange(e, "lastName")} />
+                                            </label>
+                                            <div className="k-form-field">
+                                                <span>Date of Birth</span>
+                                                <DatePicker value={formData.dateOfBirth} onChange={(e) => onFormFieldChange(e, "dateOfBirth")} />
+                                            </div>
+                                            <label className="k-form-field">
+                                                <span>Email <span className="k-required">*</span></span>
+                                                <Input type="email" required={true} placeholder="Your Email" value={formData.email} onChange={(e) => onFormFieldChange(e, "email")} />
+                                            </label>
+                                            <label className="k-form-field">
+                                                <span>Company<span className="k-field-info">optional</span></span>
+                                                <Input placeholder="Your Company" value={formData.company} onChange={(e) => onFormFieldChange(e, "company")} />
+                                            </label>
+                                        </fieldset>
+
+                                        <fieldset>
+                                            <legend>Credentials</legend>
+                                            <label className="k-form-field">
+                                                <span>Username</span>
+                                                <Input required={true} placeholder="Your username" value={formData.userName} onChange={(e) => onFormFieldChange(e, "userName")} />
+                                            </label>
+                                            <label className="k-form-field">
+                                                <span>Password</span>
+                                                <Input type="password" required={true} placeholder="Your password" value={formData.password} onChange={(e) => onFormFieldChange(e, "password")} />
+                                            </label>
+                                            <label className="k-form-field">
+                                                <input type="checkbox" id="auth-2fa" className="k-checkbox"  checked={formData.twoFactor} onChange={(e)=> setFormData({...formData, twoFactor: e.target.checked})}/>
+                                                <label className="k-checkbox-label" htmlFor="auth-2fa">Enable two-factor authentication</label>
+                                            </label>
+                                        </fieldset>
+
+                                        <div className="text-right">
+                                            <button type="button" className="k-button" onClick={clearForm}>Clear</button> &nbsp;
+                                            <button type="submit" className="k-button k-primary">Submit</button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className='col-12 col-lg-3 mt-3 mt-lg-0'>
+                    <h3>KendoReact Forms</h3>
+                    <p>KendoReact includes a wide offering of UI components that can be used to build forms, including CSS classes to easily create and structure gorgeous forms.</p>
+                    <p>The required inputs get validated upon form submission and if the validation fails, the form submission is prevented. Out of the box, KendoReact delivers components which support the HTML5 form validation and also provide props for configuring a set of minimal requirements for a component to be in a valid state.</p>
+                    <p>For documentation and demos of the many form friendly components please visit their documentation(<a href="https://www.telerik.com/kendo-react-ui/components/dateinputs/?utm_medium=cpm&utm_source=stackblitz-app&utm_campaign=kendo-ui-react-trial-dateinputs">Date Inputs</a>, <a href="https://www.telerik.com/kendo-react-ui/components/dropdowns/?utm_medium=cpm&utm_source=stackblitz-app&utm_campaign=kendo-ui-react-trial-dropdowns">DropDowns</a>, <a href="https://www.telerik.com/kendo-react-ui/components/inputs/?utm_medium=cpm&utm_source=stackblitz-app&utm_campaign=kendo-ui-react-trial-inputs">Inputs</a> etc).</p>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default FormsPage;
\ No newline at end of file
diff --git a/src/components/GridPage.jsx b/src/components/GridPage.jsx
new file mode 100644
index 0000000..ae6a427
--- /dev/null
+++ b/src/components/GridPage.jsx
@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import { sampleProducts } from '../common/sample-products';
+import { MyCommandCell } from './MyCommandCell.jsx';
+import { Grid, GridColumn as Column, GridToolbar } from '@progress/kendo-react-grid';
+import { process } from '@progress/kendo-data-query';
+import ThemeChooser from './ThemeChooser';
+
+const GridPage = (props) => {
+    const editField = "inEdit";
+    const [data, setData] = useState(sampleProducts);
+    const [dataState, setDataState ] = useState({skip: 0, take: 10 })
+
+    const generateId = data => data.reduce((acc, current) => Math.max(acc, current.ProductID), 0) + 1;
+
+    const removeItem = (data, item) => {
+        let index = data.findIndex(p => p === item || item.ProductID && p.ProductID === item.ProductID);
+        if (index >= 0) {
+            data.splice(index, 1);
+        }
+    }
+
+
+    const enterEdit = (dataItem) => {
+        setData(data.map(item =>
+            item.ProductID === dataItem.ProductID ?
+                { ...item, inEdit: true } : item
+        ));
+    }
+
+    const remove = (dataItem) => {
+
+        const newData = [...data];
+        removeItem(newData, dataItem);
+        removeItem(sampleProducts, dataItem);
+        setData([...newData]);
+    }
+
+    const add = (dataItem) => {
+        dataItem.inEdit = undefined;
+        dataItem.ProductID = generateId(sampleProducts);
+
+        sampleProducts.unshift(dataItem);
+        setData([...data])
+    }
+
+    const discard = (dataItem) => {
+        const newData = [data];
+        removeItem(newData, dataItem);
+
+        setData(newData);
+    }
+
+    const update = (dataItem) => {
+        const newData = [...data]
+        const updatedItem = { ...dataItem, inEdit: undefined };
+
+        updateItem(newData, updatedItem);
+        updateItem(sampleProducts, updatedItem);
+
+        setData(newData);
+    }
+
+    const cancel = (dataItem) => {
+        const originalItem = sampleProducts.find(p => p.ProductID === dataItem.ProductID);
+        const newData = data.map(item => item.ProductID === originalItem.ProductID ? originalItem : item);
+
+        setData(newData);
+    }
+
+    const updateItem = (data, item) => {
+        let index = data.findIndex(p => p === item || (item.ProductID && p.ProductID === item.ProductID));
+        if (index >= 0) {
+            data[index] = { ...item };
+        }
+    }
+
+    const itemChange = (event) => {
+        const newData = data.map(item =>
+            item.ProductID === event.dataItem.ProductID ?
+                { ...item, [event.field]: event.value } : item
+        );
+        setData(newData);
+    }
+
+    const addNew = () => {
+        const newDataItem = { inEdit: true, Discontinued: false };
+        setData([newDataItem, ...data]);
+    }
+
+    const cancelCurrentChanges = () => {
+        setData([...sampleProducts]);
+    }
+    let CommandCell = MyCommandCell({
+        edit: enterEdit,
+        remove: remove,
+
+        add: add,
+        discard: discard,
+
+        update: update,
+        cancel: cancel,
+
+        editField: editField
+    });
+    const hasEditedItem = data.some(p => p.inEdit);
+    return (
+        <div className="container-fluid">
+            <ThemeChooser changeTheme={props.changeTheme} theme={props.theme}/>
+            <div className='row my-4'>
+                <div className='col-12 col-lg-9 border-right'>
+                    <Grid
+                        data={process(data, dataState)}
+                        onItemChange={itemChange}
+                        editField={editField}
+                        // pageable // uncomment to enable paging
+                        // sortable // uncomment to enable sorting
+                        // filterable // uncomment to enable filtering
+                        // onDataStateChange={(e) => setDataState(e.data)} // uncomment to enable data operations
+                        // {...dataState} // uncomment to enable data operations
+                    >
+                        <GridToolbar>
+                            <button
+                                title="Add new"
+                                className="k-button k-primary"
+                                onClick={addNew}
+                            >
+                                Add new
+                </button>
+                            {hasEditedItem && (
+                                <button
+                                    title="Cancel current changes"
+                                    className="k-button"
+                                    onClick={cancelCurrentChanges}
+                                >
+                                    Cancel current changes
+                    </button>
+                            )}
+                        </GridToolbar>
+                        <Column field="ProductID" title="Id" width="50px" editable={false} />
+                        <Column field="ProductName" title="Product Name" />
+                        <Column field="FirstOrderedOn" title="First Ordered" editor="date" format="{0:d}" />
+                        <Column field="UnitsInStock" title="Units" width="150px" editor="numeric" />
+                        <Column field="Discontinued" title="Discontinued" editor="boolean" />
+                        <Column cell={CommandCell} width="240px" />
+                    </Grid>
+                </div>
+                <div className='col-12 col-lg-3 mt-3 mt-lg-0'>
+                    <h3>KendoReact Grid</h3>
+                    <p>The KendoReact Data Grid (Table) provides 100+ ready-to-use features covering everything from paging, sorting, filtering, editing, and grouping to row and column virtualization, export to PDF and Excel and accessibility.</p>
+                    <p>For documentation and demos of all available Grid features (filtering, sorting, paging, editing etc), please visit the <a href="https://www.telerik.com/kendo-react-ui/components/grid/?utm_medium=cpm&utm_source=stackblitz-app&utm_campaign=kendo-ui-react-trial-grid">KendoReact Grid documentation page.</a> </p>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default GridPage;
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..9ca4705
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import MenuNavContainer from './MenuNavContainer.jsx'
+
+export const Header = (props) => {
+    return (
+        <div className='container-fluid'>
+            <div className="d-flex border-bottom py-2">
+                <div className="d-flex">
+                    <div className='project-name d-flex'>
+                        <span className="mx-0 my-auto logo">
+                            {props.projectName}
+                        </span>
+                    </div>
+                </div>
+                <div className='d-flex ml-auto nav'>
+                    <MenuNavContainer />
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
new file mode 100644
index 0000000..9f616a5
--- /dev/null
+++ b/src/components/Home.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+const Home = (props) => {
+    return (
+        <div className="container mt-5">
+            <div className='row'>
+                <div className='col-12'>
+                    <h1 className='welcome mb-0'>Welcome to KendoReact</h1>
+                    <h2 className='sub-header mt-0'>This is a sample application built with KendoReact - a set of over 60 UI components built from the ground-up specifically for React.</h2>
+                </div>
+            </div>
+            <div className='row'>
+                <div className='col-12'>
+                    <h1 className='get-started'>Get Started</h1>
+                </div>
+            </div>
+            <div className='row justify-content-center'>
+                <div className='col-4 text-right'>
+                    <div>
+                        <img className='kendoka' src='./img/kendoka.png' alt='kendoka' />
+                    </div>
+                </div>
+                <div className='col-4 components-list'>
+                    <p>
+                        <img src='./img/components.png' alt='components' />
+                        <a href='https://www.telerik.com/kendo-react-ui/components/?utm_medium=cpm&utm_source=stackblitz-app&utm_campaign=kendo-ui-react-trial-docs-and-demos'>Components & Documentation</a>
+                    </p>
+                    <p>
+                        <img src='./img/styles.png' alt='styles' />
+                        <a href='https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=cpm&utm_source=stackblitz-app&utm_campaign=kendo-ui-react-trial-styling'>KendoReact Themes Overview</a>
+                    </p>
+                    <p>
+                        <img src='./img/blogs.png' alt='blogs' />
+                        <a href='https://www.telerik.com/blogs/tag/react?utm_medium=cpm&utm_source=stackblitz-app&utm_campaign=kendo-ui-react-blog-react-blogs'>Blog Posts</a>
+                    </p>
+                    <p>
+                        <img src='./img/docs.png' alt='tutorials' />
+                        <a href='https://www.telerik.com/kendo-react-ui/react-hooks-guide/?utm_medium=cpm&utm_source=stackblitz-app&utm_campaign=kendo-ui-react-blog-react-hooks-pp'>Tutorials</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Home;
\ No newline at end of file
diff --git a/src/components/MenuNavContainer.jsx b/src/components/MenuNavContainer.jsx
new file mode 100644
index 0000000..ce34667
--- /dev/null
+++ b/src/components/MenuNavContainer.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Menu, MenuItem } from '@progress/kendo-react-layout';
+
+
+const MenuNavContainer = (props) => {
+    return (
+        <Menu>
+            <MenuItem text="Home" render={()=> <Link to={'/'}>Home</Link>}/>
+            <MenuItem text="Grid" render={()=> <Link to={'/grid'}>Grid</Link>}/>
+            <MenuItem text="Chart" render={()=> <Link to={'/chart'}>Chart</Link>}/>
+            <MenuItem text="Forms" render={()=> <Link to={'/forms'}>Forms</Link>}/>
+        </Menu>
+    );
+}
+
+export default MenuNavContainer;
\ No newline at end of file
diff --git a/src/components/MyCommandCell.jsx b/src/components/MyCommandCell.jsx
new file mode 100644
index 0000000..4fdd015
--- /dev/null
+++ b/src/components/MyCommandCell.jsx
@@ -0,0 +1,47 @@
+
+import React from 'react';
+import { GridCell } from '@progress/kendo-react-grid';
+
+export function MyCommandCell({ edit, remove, add, update, discard, cancel, editField }) {
+    return class extends GridCell {
+        render() {
+            const { dataItem } = this.props;
+            const inEdit = dataItem[editField];
+            const isNewItem = dataItem.ProductID === undefined;
+
+            return inEdit ? (
+                <td className="k-command-cell">
+                    <button
+                        className="k-button k-grid-save-command"
+                        onClick={() => isNewItem ? add(dataItem) : update(dataItem)}
+                    >
+                        {isNewItem ? 'Add' : 'Update'}
+                    </button>
+                    <button
+                        className="k-button k-grid-cancel-command"
+                        onClick={() => isNewItem ? discard(dataItem) : cancel(dataItem)}
+                    >
+                        {isNewItem ? 'Discard' : 'Cancel'}
+                    </button>
+                </td>
+            ) : (
+                <td className="k-command-cell">
+                    <button
+                        className="k-primary k-button k-grid-edit-command"
+                        onClick={() => edit(dataItem)}
+                    >
+                        Edit
+                    </button>
+                    <button
+                        className="k-button k-grid-remove-command"
+                        onClick={() =>
+                            remove(dataItem)
+                        }
+                    >
+                        Remove
+                    </button>
+                </td>
+            );
+        }
+    }
+};
diff --git a/src/components/ThemeChooser.jsx b/src/components/ThemeChooser.jsx
new file mode 100644
index 0000000..e5ff914
--- /dev/null
+++ b/src/components/ThemeChooser.jsx
@@ -0,0 +1,57 @@
+import React, { useRef } from 'react';
+import { DropDownList } from '@progress/kendo-react-dropdowns';
+import { Tooltip } from '@progress/kendo-react-tooltip';
+
+const valueRender = (element, value) => {
+    if (!value) {
+        return element;
+    }
+
+    const children = [
+        <span
+            key={1}
+            style={{
+                display: 'inline-block',
+                width: '18px',
+                height: '18px',
+                color: 'red'
+            }}
+        >
+            <img src="./img/palete.png" alt="palete" />
+        </span>,
+        <span key={2}>&nbsp; {element.props.children}</span>
+    ];
+
+    return React.cloneElement(element, { ...element.props }, children);
+}
+
+const ThemeChooser = (props) => {
+    let tooltip = useRef(null);
+    const themes = [
+        { id: 1, text: 'default', link: "https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" },
+        { id: 2, text: 'material', link: "https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css" },
+        { id: 3, text: 'bootstrap', link: "https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css" }
+    ]
+    return (
+        <div className='container-fluid'>
+            <Tooltip ref={tooltip} position="left" anchorElement='target'/>
+            <div className="d-flex my-2" >
+                <div className="ml-auto d-flex ">
+                    <div className='d-flex mr-1 mr-lg-3 change-theme'
+                        onMouseOver={event => {tooltip && tooltip.current.handleMouseOver(event)}}
+                        onMouseOut={event => tooltip && tooltip.current.handleMouseOut(event)}>
+                        <span className="d-block my-auto" title='Тhis will re-render the KendoReact components with the chosen theme.'>Change theme</span>
+                    </div>
+                    <DropDownList defaultValue={themes.find(x => x.link === props.theme)}
+                        textField={'text'} data={themes}
+                        onChange={(e) => props.changeTheme(e.target.value.link)}
+                        valueRender={valueRender}
+                        className="d-block my-auto"
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ThemeChooser;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..8fec994
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.scss';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
diff --git a/src/index.scss b/src/index.scss
new file mode 100644
index 0000000..20856c7
--- /dev/null
+++ b/src/index.scss
@@ -0,0 +1,17 @@
+body {
+  margin: 0;
+  font-family: "Roboto",-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+body, html, #root {
+  height: 100%;
+}
+
diff --git a/src/logo.svg b/src/logo.svg
new file mode 100644
index 0000000..6b60c10
--- /dev/null
+++ b/src/logo.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
new file mode 100644
index 0000000..f8c7e50
--- /dev/null
+++ b/src/serviceWorker.js
@@ -0,0 +1,135 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}
diff --git a/src/styles/bootstrap-custom.scss b/src/styles/bootstrap-custom.scss
new file mode 100644
index 0000000..7752d85
--- /dev/null
+++ b/src/styles/bootstrap-custom.scss
@@ -0,0 +1,29 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/card";
+
+
+$grid-columns: 12;
+$grid-gutter-width: 48px;
+$grid-column-width: 48px;
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+);
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px
+);
+
+@import "~bootstrap/scss/grid";
\ No newline at end of file