diff --git a/cypress/integration/tests/additionalContent/cellEditor.spec.ts b/cypress/integration/tests/additionalContent/cellEditor.spec.ts
index 8c8c5bf9..568cf741 100644
--- a/cypress/integration/tests/additionalContent/cellEditor.spec.ts
+++ b/cypress/integration/tests/additionalContent/cellEditor.spec.ts
@@ -4,6 +4,7 @@ import {
   enableAdditionalContentConfig, enableAdditionalContentWithFlexRowConfig
 } from '../../../../src/test/testEnvConfig';
 import { constants } from '../../common/constants';
+import { util } from 'chai';
 
 const utils = new Utilities(enableAdditionalContentConfig);
 const utilsFlexRow = new Utilities(enableAdditionalContentWithFlexRowConfig);
@@ -175,30 +176,95 @@ context('Cell editor position', () => {
     ].forEach(utilsFlexRow.testCellEditor.bind(utilsFlexRow));
   });
 
-  it.skip('cell editor should be fully visible on double click on horizontally partially visible cell focus', () => {
+  it('cell editor should be fully visible on double click on horizontally partially visible cell focus with additional flex content', () => { // ✅
     visitAdditionalContentWithFlexRow();
-    utils.scrollTo(utilsFlexRow.getConfig().rgViewportWidth, 0);
-    utils.selectCell((utilsFlexRow.getConfig().cellWidth * 3) - 10, (utilsFlexRow.getConfig().cellHeight * 3) - 10);
-    utils.scrollTo(utilsFlexRow.getConfig().rgViewportWidth + utilsFlexRow.getConfig().cellWidth * 3 - utilsFlexRow.getCellXCenter(), 0);
+    utils.scrollTo(utils.getConfig().rgViewportWidth, 0);
+
+    utils.selectCell((utils.getConfig().cellWidth * 3) - 10, (utils.getConfig().cellHeight * 3) - 10);
+    utils.getCellFocus().should('be.visible');
+    utils.scrollTo(utils.getConfig().rgViewportWidth + utils.getConfig().cellWidth * 3 - utils.getCellXCenter(), 0);
+    cy.wait(utils.wait());
+    utils.keyDown(constants.keyCodes.ArrowDown, { force: true }, 20, false);
+
+    utils.getScrollableElement().then($scrollable => {
+      const v = $scrollable[0];
+      utils.scrollTo(utils.getConfig().rgViewportWidth + utils.getConfig().cellWidth * 3 - utils.getCellXCenter(), 0);
+      utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
+      utils.getScrollableElement().then($scrollable => {
+        const v2 = $scrollable[0];
+        cy.wait(utils.wait());
+        const secondSrollValue = utils.round(v2.scrollLeft);
+        expect(v.scrollLeft, 'Scroll left').to.be.equal(secondSrollValue);
+      });
+    });
+  });
+
+  it('cell editor should be fully visible on double click on vertically partially visible cell focus with additional flex content', () => { // ✅
+    visitAdditionalContentWithFlexRow();
+    utils.scrollTo(utils.getConfig().rgViewportWidth, 0);
+
+    utils.selectCell((utils.getConfig().cellWidth * 3) - 10, (utils.getConfig().cellHeight * 3) - 10);
+    utils.getCellFocus().should('be.visible');
+    utils.scrollTo(utils.getConfig().rgViewportWidth, utils.getConfig().cellHeight * 3 - utils.getCellYCenter());
+    cy.wait(utils.wait());
+    utils.keyDown(constants.keyCodes.ArrowRight, { force: true }, 20, false);
+
+    utils.getScrollableElement().then($scrollable => {
+      const v = $scrollable[0];
+      utils.scrollTo(utils.getConfig().rgViewportWidth, utils.getConfig().cellHeight * 3 - utils.getCellYCenter());
+      utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
+      utils.getScrollableElement().then($scrollable => {
+        const v2 = $scrollable[0];
+        cy.wait(utils.wait());
+        const secondSrollValue = utils.round(v2.scrollTop);
+        expect(v.scrollTop, 'Scroll Top').to.be.equal(secondSrollValue);
+      });
+    });
+  });
+
+  it('cell editor should be fully visible on double click on horizontally partially visible cell focus with additional content', () => {
+    visitAdditionalContent();
+    utils.scrollTo(0, utils.getConfig().rgViewportHeight);
+
+    utils.selectCell((utils.getConfig().cellWidth * 3) - 10, (utils.getConfig().cellHeight * 3) - 10);
     utils.getCellFocus().should('be.visible');
-    utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
-    utils.getCellEditor().then($el => {
-      const elementRect = $el[0].getBoundingClientRect();
-      utils.assertElementLeftIsEqual(utils.getCellEditor(), utils.round(elementRect.left));
+    utils.scrollTo(utils.getConfig().cellWidth * 3 - utils.getCellXCenter(), utils.getConfig().rgViewportHeight);
+    cy.wait(utils.wait());
+    utils.keyDown(constants.keyCodes.ArrowDown, { force: true }, 20, false);
+
+    utils.getScrollableElement().then($scrollable => {
+      const v = $scrollable[0];
+      utils.scrollTo(utils.getConfig().cellWidth * 3 - utils.getCellXCenter(), utils.getConfig().rgViewportHeight);
+      utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
+      utils.getScrollableElement().then($scrollable => {
+        const v2 = $scrollable[0];
+        cy.wait(utils.wait());
+        const secondSrollValue = utils.round(v2.scrollLeft);
+        expect(v.scrollLeft, 'Scroll left').to.be.equal(secondSrollValue);
+      });
     });
   });
 
-  it.skip('cell editor should be fully visible on double click on vertically partially visible cell focus', () => {
+  it('cell editor should be fully visible on double click on vertically partially visible cell focus with additional content', () => { // ✅
     visitAdditionalContent();
     utils.scrollTo(0, utils.getConfig().rgViewportHeight);
+
     utils.selectCell((utils.getConfig().cellWidth * 3) - 10, (utils.getConfig().cellHeight * 3) - 10);
-    utils.scrollTo(0, utils.getConfig().rgViewportHeight + utils.getConfig().cellHeight * 3 - utils.getCellYCenter()); // -1 for MacOs tests
     utils.getCellFocus().should('be.visible');
-    utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
-    cy.wait(500);
-    utils.getCellEditor().then($el => {
-      const elementRect = $el[0].getBoundingClientRect();
-      utils.assertElementTopIsEqual(utils.getCellEditor(), utils.round(elementRect.top));
+    utils.scrollTo(0, utils.getConfig().rgViewportHeight + utils.getConfig().cellHeight * 3 - utils.getCellYCenter());
+    cy.wait(utils.wait());
+    utils.keyDown(constants.keyCodes.ArrowRight, { force: true }, 20, false);
+
+    utils.getScrollableElement().then($scrollable => {
+      const v = $scrollable[0];
+      utils.scrollTo(0, utils.getConfig().rgViewportHeight + utils.getConfig().cellHeight * 3 - utils.getCellYCenter());
+      utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
+      utils.getScrollableElement().then($scrollable => {
+        const v2 = $scrollable[0];
+        cy.wait(utils.wait());
+        const secondSrollValue = utils.round(v2.scrollTop);
+        expect(v.scrollTop, 'Scroll Top').to.be.equal(secondSrollValue);
+      });
     });
   });
 
diff --git a/cypress/integration/tests/pinnedToBody/cellEditor.spec.ts b/cypress/integration/tests/pinnedToBody/cellEditor.spec.ts
index b3ea95b7..c9a7aaba 100644
--- a/cypress/integration/tests/pinnedToBody/cellEditor.spec.ts
+++ b/cypress/integration/tests/pinnedToBody/cellEditor.spec.ts
@@ -95,32 +95,41 @@ context('Cell editor position', () => {
     }].forEach(utils.testCellEditor.bind(utils));
   });
 
-  it.skip('cell editor should be fully visible on double click on horizontally partially visible cell focus', () => {
-    utils.selectCell(config.cellWidth * 3, config.cellHeight * 3);
+  it('cell editor should be fully visible on double click on horizontally partially visible cell focus', () => { // ✅
+    utils.selectCell((utils.getConfig().cellWidth * 3) - 10, (utils.getConfig().cellHeight * 3) - 10);
     utils.getCellFocus().should('be.visible');
-    [
-      {
-        click: {
-          x: 0.1,
-          y: config.cellHeight * 3,
-        },
-        scroll: {
-          x: config.cellWidth * 3 - config.cellWidth / 2,
-          y: 0,
-        },
-      },
-    ].forEach(utils.testCellEditor.bind(utils));
+    utils.scrollTo(utils.getConfig().cellWidth * 3 - utils.getCellXCenter(), 0);
+    cy.wait(utils.wait());
+    utils.keyDown(constants.keyCodes.ArrowDown, { force: true }, 20, false);
+
+    cy.window().its('scrollX').then($scrollLeft => {
+      const firstScrollValue = utils.round($scrollLeft);
+      utils.scrollTo(utils.getConfig().cellWidth * 3 - utils.getCellXCenter(), 0);
+      utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
+      cy.window().its('scrollX').then($scrollLeft2 => {
+        cy.wait(utils.wait());
+        const secondSrollValue = utils.round($scrollLeft2);
+        expect(firstScrollValue, 'Scroll left').to.be.equal(secondSrollValue);
+      });
+    });
   });
 
-  it.skip('cell editor should be fully visible on double click on vertically partially visible cell focus', () => {
-    utils.selectCell(config.cellWidth * 3, config.cellHeight * 3);
+  it('cell editor should be fully visible on double click on vertically partially visible cell focus', () => { // ✅
+    utils.selectCell((utils.getConfig().cellWidth * 3) - 10, (utils.getConfig().cellHeight * 3) - 10);
     utils.getCellFocus().should('be.visible');
-    utils.scrollTo(0, config.cellHeight * 4 - utils.getCellYCenter());
+    utils.scrollTo(0, utils.getConfig().cellHeight * 3 - utils.getCellYCenter());
+    cy.wait(utils.wait());
+    utils.keyDown(constants.keyCodes.ArrowRight, { force: true }, 20, false);
 
-    utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
-    utils.getCellEditor().then($el => {
-      const elementRect = $el[0].getBoundingClientRect();
-      utils.assertElementTopIsEqual(utils.getCellEditor(), utils.round(elementRect.top));
+    cy.window().its('scrollY').then($scrollTop => {
+      const firstScrollValue = utils.round($scrollTop);
+      utils.scrollTo(0, utils.getConfig().cellHeight * 3 - utils.getCellYCenter());
+      utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
+      cy.window().its('scrollY').then($scrollTop2 => {
+        cy.wait(utils.wait());
+        const secondSrollValue = utils.round($scrollTop2);
+        expect(firstScrollValue, 'Scroll Top').to.be.equal(secondSrollValue);
+      });
     });
   });
 
diff --git a/cypress/integration/tests/standard/cellEditor.spec.ts b/cypress/integration/tests/standard/cellEditor.spec.ts
index 6b4ad877..d6438ddc 100644
--- a/cypress/integration/tests/standard/cellEditor.spec.ts
+++ b/cypress/integration/tests/standard/cellEditor.spec.ts
@@ -1,6 +1,8 @@
 import { config } from '../../../../src/test/testEnvConfig';
 import { Utilities } from '../../common/utils';
 import { visit } from '../../common/visit';
+import { constants } from '../../common/constants';
+
 
 const utils = new Utilities(config);
 
@@ -42,8 +44,8 @@ context('Cell editor position', () => {
           y: config.cellHeight * utils.getRandomInt(1, 15),
         },
         scroll: {
-          x: config.cellWidth * 20 + utils.getRandomInt(1, config.cellWidth),
-          y: config.cellHeight * 25 + utils.getRandomInt(1, config.cellHeight),
+          x: config.cellWidth * 20 + 21,
+          y: config.cellHeight * 25 + 5,
         },
       }
     ].forEach(utils.testCellEditor.bind(utils));
@@ -99,38 +101,44 @@ context('Cell editor position', () => {
     ].forEach(utils.testCellEditor.bind(utils));
   });
 
-  it.skip('cell editor should be fully visible on double click on horizontally partially visible cell focus', () => {
-    utils.selectCell((config.cellWidth * 3) - 10, (config.cellHeight * 3) - 10);
+  it('cell editor should be fully visible on double click on horizontally partially visible cell focus', () => { // ✅
+    utils.selectCell((utils.getConfig().cellWidth * 3) - 10, (utils.getConfig().cellHeight * 3) - 10);
     utils.getCellFocus().should('be.visible');
-    [
-      {
-        click: {
-          x: 0.1,
-          y: config.cellHeight * 3,
-        },
-        scroll: {
-          x: config.cellWidth * 3 - config.cellWidth / 2,
-          y: 0,
-        },
-      },
-    ].forEach(utils.testCellEditor.bind(utils));
+    utils.scrollTo(utils.getConfig().cellWidth * 3 - utils.getCellXCenter(), 0);
+    cy.wait(utils.wait());
+    utils.keyDown(constants.keyCodes.ArrowDown, { force: true }, 20, false);
+
+    utils.getScrollableElement().then($scrollable => {
+      const v = $scrollable[0];
+      utils.scrollTo(utils.getConfig().cellWidth * 3 - utils.getCellXCenter(), 0);
+      utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
+      utils.getScrollableElement().then($scrollable => {
+        const v2 = $scrollable[0];
+        cy.wait(utils.wait());
+        const secondSrollValue = utils.round(v2.scrollLeft);
+        expect(v.scrollLeft, 'Scroll left').to.be.equal(secondSrollValue);
+      });
+    });
   });
 
-  it.skip('cell editor should be fully visible on double click on vertically partially visible cell focus', () => {
-    utils.selectCell((config.cellWidth * 3) - 10, (config.cellHeight * 3) - 10);
+  it('cell editor should be fully visible on double click on vertically partially visible cell focus', () => { // ✅
+    utils.selectCell((utils.getConfig().cellWidth * 3) - 10, (utils.getConfig().cellHeight * 3) - 10);
     utils.getCellFocus().should('be.visible');
-    [
-      {
-        click: {
-          x: config.cellWidth * 3,
-          y: 0.1,
-        },
-        scroll: {
-          x: 0,
-          y: config.cellHeight * 3 - config.cellHeight / 2,
-        },
-      },
-    ].forEach(utils.testCellEditor.bind(utils));
-  });
+    utils.scrollTo(0, utils.getConfig().cellHeight * 3 - utils.getCellYCenter());
+    cy.wait(utils.wait());
+    utils.keyDown(constants.keyCodes.ArrowRight, { force: true }, 20, false);
+
+    utils.getScrollableElement().then($scrollable => {
+      const v = $scrollable[0];
+      utils.scrollTo(0, utils.getConfig().cellHeight * 3 - utils.getCellYCenter());
+      utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
 
+      utils.getScrollableElement().then($scrollable => {
+        const v2 = $scrollable[0];
+        cy.wait(utils.wait());
+        const secondSrollValue = utils.round(v2.scrollTop);
+        expect(v.scrollTop, 'Scroll Top').to.be.equal(secondSrollValue);
+      });
+    });
+  });
 });
diff --git a/cypress/integration/tests/sticky/cellEditor.spec.ts b/cypress/integration/tests/sticky/cellEditor.spec.ts
index b10caf5b..90f3be01 100644
--- a/cypress/integration/tests/sticky/cellEditor.spec.ts
+++ b/cypress/integration/tests/sticky/cellEditor.spec.ts
@@ -168,27 +168,43 @@ context('Cell editor position', () => {
     ].forEach(utils.testCellEditorOnSticky.bind(utils));
   });
 
-  it.skip('cell editor should be fully visible on double click on horizontally partially visible cell focus', () => {
-    utils.selectCell(config.cellWidth * 3, config.cellHeight * 3);
+  it('cell editor should be fully visible on double click on horizontally partially visible cell focus', () => { // ✅
+    utils.selectCell((utils.getConfig().cellWidth * 3) - 10, (utils.getConfig().cellHeight * 3) - 10);
     utils.getCellFocus().should('be.visible');
     utils.scrollTo(utils.getCellXCenter(), 0);
-
-    utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
-    utils.getCellEditor().then($el => {
-      const elementRect = $el[0].getBoundingClientRect();
-      utils.assertElementLeftIsEqual(utils.getCellEditor(), utils.round(elementRect.left));
+    cy.wait(utils.wait());
+    utils.keyDown(constants.keyCodes.ArrowDown, { force: true }, 20, false);
+
+    utils.getScrollableElement().then($scrollable => {
+      const v = $scrollable[0];
+      utils.scrollTo(utils.getCellXCenter(), 0);
+      utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
+      utils.getScrollableElement().then($scrollable => {
+        const v2 = $scrollable[0];
+        cy.wait(utils.wait());
+        const secondSrollValue = utils.round(v2.scrollLeft);
+        expect(v.scrollLeft, 'Scroll left').to.be.equal(secondSrollValue);
+      });
     });
   });
 
-  it.skip('cell editor should be fully visible on double click on vertically partially visible cell focus', () => {
-    utils.selectCell(config.cellWidth * 3, config.cellHeight * 3);
+  it('cell editor should be fully visible on double click on vertically partially visible cell focus', () => { // ✅
+    utils.selectCell((utils.getConfig().cellWidth * 3) - 10, (utils.getConfig().cellHeight * 3) - 10);
     utils.getCellFocus().should('be.visible');
     utils.scrollTo(0, utils.getCellYCenter());
-
-    utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
-    utils.getCellEditor().then($el => {
-      const elementRect = $el[0].getBoundingClientRect();
-      utils.assertElementTopIsEqual(utils.getCellEditor(), utils.round(elementRect.top));
+    cy.wait(utils.wait());
+    utils.keyDown(constants.keyCodes.ArrowRight, { force: true }, 20, false);
+
+    utils.getScrollableElement().then($scrollable => {
+      const v = $scrollable[0];
+      utils.scrollTo(0, utils.getCellYCenter());
+      utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
+      utils.getScrollableElement().then($scrollable => {
+        const v2 = $scrollable[0];
+        cy.wait(utils.wait());
+        const secondSrollValue = utils.round(v2.scrollTop);
+        expect(v.scrollTop, 'Scroll Top').to.be.equal(secondSrollValue);
+      });
     });
   });
 
diff --git a/cypress/integration/tests/stickyPinnedToBody/cellEditor.spec.ts b/cypress/integration/tests/stickyPinnedToBody/cellEditor.spec.ts
index 4216c6ca..2dccc385 100644
--- a/cypress/integration/tests/stickyPinnedToBody/cellEditor.spec.ts
+++ b/cypress/integration/tests/stickyPinnedToBody/cellEditor.spec.ts
@@ -172,28 +172,41 @@ context('Cell editor position', () => {
     ].forEach(utils.testCellEditorOnSticky.bind(utils));
   });
 
-  it.skip('cell editor should be fully visible on double click on horizontally partially visible cell focus', () => {
-    utils.selectCell(config.cellWidth * 4, config.cellHeight * 3);
+  it('cell editor should be fully visible on double click on horizontally partially visible cell focus', () => { // ✅
+    utils.selectCell((utils.getConfig().cellWidth * 4) - 10, (utils.getConfig().cellHeight * 3) - 10);
     utils.getCellFocus().should('be.visible');
-    utils.scrollTo(config.cellWidth / 2, 0);
-
-    utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
-    utils.getCellEditor().then($el => {
-      const elementRect = $el[0].getBoundingClientRect();
-      utils.assertElementLeftIsEqual(utils.getCellEditor(), utils.round(elementRect.left));
+    utils.scrollTo(utils.getCellXCenter(), 0);
+    cy.wait(utils.wait());
+    utils.keyDown(constants.keyCodes.ArrowDown, { force: true }, 20, false);
+
+    cy.window().its('scrollX').then($scrollLeft => {
+      const firstScrollValue = utils.round($scrollLeft);
+      utils.scrollTo(utils.getCellXCenter(), 0);
+      utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
+      cy.window().its('scrollX').then($scrollLeft2 => {
+        cy.wait(utils.wait());
+        const secondSrollValue = utils.round($scrollLeft2);
+        expect(firstScrollValue, 'Scroll left').to.be.equal(secondSrollValue);
+      });
     });
   });
 
-  it.skip('cell editor should be fully visible on double click on vertically partially visible cell focus', () => {
-    utils.selectCell(config.cellWidth * 4, config.cellHeight * 6);
+  it('cell editor should be fully visible on double click on vertically partially visible cell focus', () => { // ✅
+    utils.selectCell((utils.getConfig().cellWidth * 3) - 10, (utils.getConfig().cellHeight * 7) - 10);
     utils.getCellFocus().should('be.visible');
-    utils.scrollTo(0, config.cellHeight * 1.5);
-
-    utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
-    utils.getCellEditor().then($el => {
-      const elementRect = $el[0].getBoundingClientRect();
-      utils.assertElementTopIsEqual(utils.getCellEditor(), utils.round(elementRect.top));
+    utils.scrollTo(0, utils.getConfig().cellHeight + utils.getCellYCenter());
+    cy.wait(utils.wait());
+    utils.keyDown(constants.keyCodes.ArrowRight, { force: true }, 20, false);
+
+    cy.window().its('scrollY').then($scrollTop => {
+      const firstScrollValue = utils.round($scrollTop);
+      utils.scrollTo(0, utils.getConfig().cellHeight + utils.getCellYCenter());
+      utils.keyDown(constants.keyCodes.Enter, { force: true }, 20, false);
+      cy.window().its('scrollY').then($scrollTop2 => {
+        cy.wait(utils.wait());
+        const secondSrollValue = utils.round($scrollTop2);
+        expect(firstScrollValue, 'Scroll Top').to.be.equal(secondSrollValue);
+      });
     });
   });
-
-});
+});
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index db18b527..00218b8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@silevis/reactgrid",
-  "version": "3.1.16-rc.3",
+  "version": "3.1.17-rc.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 2f6060d2..03f44e1d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@silevis/reactgrid",
   "description": "Add spreadsheet-like behavior to your React app.",
-  "version": "3.1.16",
+  "version": "3.1.17-rc.3",
   "homepage": "https://reactgrid.com",
   "license": "MIT",
   "author": "Silevis Software",
diff --git a/src/default-colors.scss b/src/default-colors.scss
index 3549e194..0a793dd9 100644
--- a/src/default-colors.scss
+++ b/src/default-colors.scss
@@ -24,9 +24,9 @@ $dropdown-focused-item-bg-color: lighten(
 $dropdown-menu-bg-color: #ffffff !default;
 
 // SHADOWS
-$shadow-blur-radius: 7px !default;
-$shadow-spread-radius: -3px !default;
-$shadow-length: 3px !default;
+$shadow-blur-radius: 3px !default;
+$shadow-spread-radius: 1px !default;
+$shadow-length: 1px !default;
 $cell-editor-shadow: 1px 1px 6px !default;
 
 // CONTEXT MENU
@@ -38,4 +38,5 @@ $opacity-35: 0.35 !default;
 $opacity-20: 0.2 !default;
 $opacity-15: 0.15 !default;
 $opacity-10: 0.1 !default;
+$opacity-06: 0.06 !default;
 $opacity-01: 0.01 !default;
diff --git a/src/lib/CellTemplates/HeaderCellTemplate.tsx b/src/lib/CellTemplates/HeaderCellTemplate.tsx
index 9a2f2228..80788ffa 100644
--- a/src/lib/CellTemplates/HeaderCellTemplate.tsx
+++ b/src/lib/CellTemplates/HeaderCellTemplate.tsx
@@ -2,11 +2,12 @@ import * as React from 'react';
 
 // NOTE: all modules imported below may be imported from '@silevis/reactgrid'
 import { getCellProperty } from '../Functions/getCellProperty';
-import { Cell, CellStyle, CellTemplate, Compatible, Uncertain } from '../Model/PublicModel';
+import { Cell, CellStyle, CellTemplate, Compatible, Span, Uncertain } from '../Model/PublicModel';
 
-export interface HeaderCell extends Cell {
-    type: 'header',
-    text: string,
+
+export interface HeaderCell extends Cell, Span {
+    type: 'header';
+    text: string;
 }
 
 export class HeaderCellTemplate implements CellTemplate<HeaderCell> {
diff --git a/src/lib/Components/PanesRenderer.tsx b/src/lib/Components/PanesRenderer.tsx
index a50d80a2..526e529e 100644
--- a/src/lib/Components/PanesRenderer.tsx
+++ b/src/lib/Components/PanesRenderer.tsx
@@ -125,7 +125,7 @@ export const PanesRenderer: React.FC<PanesProps> = ({ state, cellRenderer }) =>
             </Pane>
             <Pane
                 renderChildren={renderTopSticky && renderLeftSticky}
-                className={'rg-pane-top rg-pane-left shadow shadow-top-left-corner'}
+                className={'rg-pane-top rg-pane-left rg-pane-shadow shadow-top-left-corner'}
                 style={{
                     height: cellMatrix.ranges.stickyTopRange.height,
                     width: (areOnlyStickyRows && areOnlyStickyCols)
diff --git a/src/lib/Model/CellMatrix.ts b/src/lib/Model/CellMatrix.ts
index 39184807..9dc8a8a4 100644
--- a/src/lib/Model/CellMatrix.ts
+++ b/src/lib/Model/CellMatrix.ts
@@ -20,7 +20,7 @@ export interface StickyRanges {
     stickyLeftRange: Range;
 }
 
-export interface Span {
+export interface SpanLookup {
     range?: Range;
 }
 
@@ -44,9 +44,9 @@ export class CellMatrix<TStickyRanges extends StickyRanges = StickyRanges, TCell
     rowIndexLookup: IndexLookup = {};
     columnIndexLookup: IndexLookup = {};
 
-    spanCellLookup: { [location: string]: Span } = {};
+    spanCellLookup: { [location: string]: SpanLookup } = {};
 
-    rangesToRender: { [location: string]: Span } = {};
+    rangesToRender: { [location: string]: SpanLookup } = {};
 
     constructor(public ranges: TStickyRanges) { }
 
diff --git a/src/lib/Model/CellMatrixBuilder.ts b/src/lib/Model/CellMatrixBuilder.ts
index 761afc8d..86ae70c4 100644
--- a/src/lib/Model/CellMatrixBuilder.ts
+++ b/src/lib/Model/CellMatrixBuilder.ts
@@ -73,7 +73,8 @@ export class CellMatrixBuilder implements ICellMatrixBuilder {
         let rangesToExclude: Range[] = [];
         this.cellMatrix.rows.forEach((row, idy) => {
             row.cells.forEach((cell, idx) => {
-                const { rowspan = 0, colspan = 0 } = cell;
+                const rowspan = ("rowspan" in cell && cell.rowspan) || 0;
+                const colspan = ("colspan" in cell && cell.colspan) || 0;
                 const rows = rowspan ? this.cellMatrix.rows.slice(idy, idy + rowspan) : [this.cellMatrix.rows[idy]];
                 const columns = colspan ? this.cellMatrix.columns.slice(idx, idx + colspan) : [this.cellMatrix.columns[idx]];
                 const range = new Range(rows, columns);
diff --git a/src/lib/Model/PublicModel.ts b/src/lib/Model/PublicModel.ts
index ad74e423..3aa91e0c 100644
--- a/src/lib/Model/PublicModel.ts
+++ b/src/lib/Model/PublicModel.ts
@@ -444,6 +444,19 @@ export interface CellStyle {
     }
 }
 
+/**
+ * Defines quantity of rows and columns to span. 
+ * At this moment span feature is available only for `HeaderCell`.
+ * 
+ * @see https://reactgrid.com/docs/3.1/2-implementing-core-features/9e-cell-span/
+ */
+export interface Span {
+    /** Specifies the number of columns a cell should span */
+    colspan?: number;
+    /** Specifies the number of rows a cell should span */
+    rowspan?: number;
+}
+
 /**
  * A base for built-in cell types (e.g. `HeaderCell`) and your own
  * 
@@ -460,10 +473,6 @@ export interface Cell {
     style?: CellStyle;
     /** Additional CSS classes */
     className?: string;
-    /** Specifies the number of columns a cell should span */
-    colspan?: number;
-    /** Specifies the number of rows a cell should span */
-    rowspan?: number;
 }
 
 /**
diff --git a/src/mapping.scss b/src/mapping.scss
index 09944006..c63e0af4 100644
--- a/src/mapping.scss
+++ b/src/mapping.scss
@@ -1,15 +1,15 @@
-$shadow-on-bottom:              0 $shadow-length $shadow-blur-radius $shadow-spread-radius !default;
-$shadow-on-top:                 0 (-$shadow-length) $shadow-blur-radius $shadow-spread-radius !default;
-$shadow-on-left:                (-$shadow-length) 0 $shadow-blur-radius $shadow-spread-radius !default;
-$shadow-on-right:               $shadow-length 0 $shadow-blur-radius $shadow-spread-radius !default;
-$shadow-on-top-left-corner:     $shadow-length $shadow-length $shadow-blur-radius $shadow-spread-radius !default;
-$shadow-on-top-right-corner:    (-$shadow-length) $shadow-length $shadow-blur-radius $shadow-spread-radius !default;
-$shadow-on-bottom-left-corner:  $shadow-length (-$shadow-length) $shadow-blur-radius $shadow-spread-radius !default;
-$shadow-on-bottom-right-corner: (-$shadow-length) (-$shadow-length) $shadow-blur-radius $shadow-spread-radius !default;
+$shadow-on-bottom:              2*$shadow-length 2*$shadow-length $shadow-blur-radius $shadow-spread-radius !default;
+$shadow-on-top:                 2*$shadow-length (-$shadow-length) $shadow-blur-radius $shadow-spread-radius !default;
+$shadow-on-left:                5*(-$shadow-length) 0 $shadow-blur-radius 2*(-$shadow-spread-radius) !default;
+$shadow-on-right:               5*$shadow-length 0 $shadow-blur-radius 2*(-$shadow-spread-radius) !default;
+$shadow-on-top-left-corner:     2*$shadow-length 3*$shadow-length $shadow-blur-radius $shadow-spread-radius !default;
+$shadow-on-top-right-corner:    2*(-$shadow-length) 2*$shadow-length $shadow-blur-radius $shadow-spread-radius !default;
+$shadow-on-bottom-left-corner:  2*$shadow-length 2*(-$shadow-length) $shadow-blur-radius $shadow-spread-radius !default;
+$shadow-on-bottom-right-corner: 2*(-$shadow-length) 2*(-$shadow-length) $shadow-blur-radius $shadow-spread-radius !default;
 
 
 $white-with-heavy-opacity:      rgba($bg-color, $opacity-01);
-$black-with-medium-opacity:     rgba($shadow-color, $opacity-35);
+$black-with-medium-opacity:     rgba($shadow-color, $opacity-06);
 
 $main-bg-color:                 $bg-color;
 $shadow-bg:                     $shadow-color;
diff --git a/src/test/TestGrid.tsx b/src/test/TestGrid.tsx
index 546caea8..929f68d7 100644
--- a/src/test/TestGrid.tsx
+++ b/src/test/TestGrid.tsx
@@ -93,6 +93,8 @@ export const TestGrid: React.FC<TestGridProps> = (props) => {
                             { value: 'angular', label: 'Angular' }
                         ], currentValue: 'react', isDisabled: false
                     }
+                case -1: // just for interface testing purposes
+                    return { type: 'header', text: ``, rowspan: 3, colspan: 2 }
                 default:
                     return { type: 'text', text: `${ri} - ${ci}`, validator: (text: string): boolean => true }
             }