diff --git a/examples/kendo-react-finance-portfolio/src/app.module.scss b/examples/kendo-react-finance-portfolio/src/app.module.scss
index 79a6d597..0ab417a5 100644
--- a/examples/kendo-react-finance-portfolio/src/app.module.scss
+++ b/examples/kendo-react-finance-portfolio/src/app.module.scss
@@ -1,3 +1,4 @@
 .main {
   min-height: 450px;
+  background-color: rgba(236, 238, 239, .5);
 }
diff --git a/examples/kendo-react-finance-portfolio/src/components/AddRemoveSymbol/add.module.scss b/examples/kendo-react-finance-portfolio/src/components/AddRemoveSymbol/add.module.scss
index e69de29b..e934165f 100644
--- a/examples/kendo-react-finance-portfolio/src/components/AddRemoveSymbol/add.module.scss
+++ b/examples/kendo-react-finance-portfolio/src/components/AddRemoveSymbol/add.module.scss
@@ -0,0 +1,23 @@
+.stock-item {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  cursor: pointer;
+  &:hover {
+      background-color: #e6e6e6;
+  }
+}
+
+.stock-item-symbol {
+  line-height: 1;
+  display: block;
+  font-size: 14px;
+  color: #007BFF;
+}
+
+.stock-item-name {
+  line-height: 1;
+  display: block;
+
+  font-size: 11px;
+  color: #55595C;
+}
\ No newline at end of file
diff --git a/examples/kendo-react-finance-portfolio/src/components/HeatmapView.tsx b/examples/kendo-react-finance-portfolio/src/components/HeatmapView.tsx
index 38dc4353..b8d9a78d 100644
--- a/examples/kendo-react-finance-portfolio/src/components/HeatmapView.tsx
+++ b/examples/kendo-react-finance-portfolio/src/components/HeatmapView.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import { dataService } from '../services';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import $ from 'jquery';
 import '@progress/kendo-ui';
 import { Tooltip } from '@progress/kendo-react-tooltip';
+declare const window: any;
 
 type HeatMapItemType = {
     name : string;
@@ -20,8 +22,8 @@ type TreeDataItem = {
     name: string;
     value: number;
     items: TreeDataItem[];
-    isParentElement?: boolean;    
-} 
+    isParentElement?: boolean;
+}
 
 export const HeatmapView = () => {
     const fetchData = React.useCallback(async () => {
@@ -65,7 +67,7 @@ export const HeatmapView = () => {
             return `<span title=${title}>${props.text}<br/>${props.dataItem.change}%</span>`;
         }
 
-        $("#heatmap").kendoTreeMap({
+        window.$("#heatmap").kendoTreeMap({
             template: renderItem,
             dataSource: new kendo.data.HierarchicalDataSource({
                 transport: {
diff --git a/examples/kendo-react-finance-portfolio/src/components/Stock/stock.module.scss b/examples/kendo-react-finance-portfolio/src/components/Stock/stock.module.scss
index 34d6a422..0d1ffe21 100644
--- a/examples/kendo-react-finance-portfolio/src/components/Stock/stock.module.scss
+++ b/examples/kendo-react-finance-portfolio/src/components/Stock/stock.module.scss
@@ -1,3 +1,35 @@
+.list-item {
+  color: black;
+  &:hover {
+    text-decoration: none;
+    color: black;
+  }
+
+  &.list-item-selected {
+    font-weight: bold;
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      display: block;
+      height: 0.25rem;
+      background-color: #007bff;
+    }
+  }
+}
+
+.ddl-list-item {
+  svg path {
+    fill: #007bff;
+  }
+
+  &.k-selected {
+    svg path {
+      fill: white;
+    }
+  }
+}
 
 .stock {
   z-index: 1040;
diff --git a/examples/kendo-react-finance-portfolio/src/pages/VirtualizedPage.tsx b/examples/kendo-react-finance-portfolio/src/pages/VirtualizedPage.tsx
index 31ebd00d..3defaef8 100644
--- a/examples/kendo-react-finance-portfolio/src/pages/VirtualizedPage.tsx
+++ b/examples/kendo-react-finance-portfolio/src/pages/VirtualizedPage.tsx
@@ -202,7 +202,7 @@ export class VirtualizedPage extends React.Component<any, any> {
                     <GridColumn field="freight" filter="numeric" width="200px" />
                     <GridColumn field="shippedDate" filter="date" format="{0:D}" width="300px" />
                     <GridColumn field="employeeID" filter="numeric" width="200px" />
-                    <GridColumn locked field="orderID" filterable={false} title="ID" width="90px" />
+                    <GridColumn field="orderID" filterable={false} title="ID" width="90px" />
                   </Grid>
                 </ExcelExport>
                 <GridPDFExport
@@ -218,7 +218,7 @@ export class VirtualizedPage extends React.Component<any, any> {
                       <GridColumn field="freight" filter="numeric" width="200px" />
                       <GridColumn field="shippedDate" filter="date" format="{0:D}" width="300px" />
                       <GridColumn field="employeeID" filter="numeric" width="200px" />
-                      <GridColumn locked field="orderID" filterable={false} title="ID" width="90px" />
+                      <GridColumn field="orderID" filterable={false} title="ID" width="90px" />
                     </Grid>}
                 </GridPDFExport>
               </div>
diff --git a/examples/kendo-react-finance-portfolio/src/styles/_kendo.scss b/examples/kendo-react-finance-portfolio/src/styles/_kendo.scss
index 29b24269..ff1f5dd3 100644
--- a/examples/kendo-react-finance-portfolio/src/styles/_kendo.scss
+++ b/examples/kendo-react-finance-portfolio/src/styles/_kendo.scss
@@ -4,7 +4,6 @@
     $kendo-colors: (
       primary: #1c7cd5
     ),
-
     $kendo-h1-font-family: "Ubuntu",
     $kendo-h1-font-size: 2.5rem,
     $kendo-h1-font-weight: bold,
@@ -36,6 +35,7 @@
     $kendo-grid-padding-y: 0.4rem,
     $kendo-grid-alt-bg: transparent,
     $kendo-grid-header-bg: #eceeef,
+    $kendo-grid-footer-bg: #eceeef,
     $kendo-grid-header-text: #55595c,
     $kendo-grid-header-border: transparent,
 
@@ -45,6 +45,17 @@
     $kendo-popup-padding-y: 0,
 );
 
+:root{
+  --kendo-font-family: "Roboto", Helvetica, Arial, sans-serif;
+}
+
 .k-splitbar {
   box-shadow: 5px 5px 5px rgba(0, 0, 0, .2);
-}
\ No newline at end of file
+}
+
+.k-grid-header .k-table-thead {
+  background-color: #eceeef;
+  td {
+    border-color: #eceeef;
+  }
+}