diff --git a/CHANGELOG.md b/CHANGELOG.md
index b34431f83c1..6c0327677a7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,26 @@ All notable changes for each version of this project will be documented in this
     ```ts
     this.carousel.select(2, Direction.NEXT);
     ```
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Added ability to pin individual columns to a specific side (start or end of the grid), so that you can now have pinning from both sides. This can be done either declaratively by setting the `pinningPosition` property on the column:
+
+    ```html
+    <igx-column [field]="'Col1'" [pinned]='true' [pinningPosition]='pinningPosition'>
+    </igx-column>
+    ```
+
+    ```ts
+      public pinningPosition = ColumnPinningPosition.End;
+    ```
+
+    Or with the API, via optional parameter:
+
+    ```ts
+        grid.pinColumn('Col1', 0, ColumnPinningPosition.End);
+        grid.pinColumn('Col2', 0, ColumnPinningPosition.Start);
+    ```
+
+    If property `pinningPosition` is not set on a column, the column will default to the position specified on the grid's `pinning` options for `columns`.
 
 ### General
 - `IgxDropDown` now exposes a `role` input property, allowing users to customize the role attribute based on the use case. The default is `listbox`.
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts
index 1e303325cb2..c3641bfe13f 100644
--- a/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts
@@ -82,15 +82,10 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
         }
 
         const unpinnedColumns = this.grid.unpinnedColumns.filter(c => c.columnLayout && !c.hidden);
-        const pinnedColumns = this.grid.pinnedColumns.filter(c => c.columnLayout && !c.hidden);
-        let vIndex = -1;
-
-        if (!this.pinned) {
-            const indexInCollection = unpinnedColumns.indexOf(this);
-            vIndex = indexInCollection === -1 ? -1 : pinnedColumns.length + indexInCollection;
-        } else {
-            vIndex = pinnedColumns.indexOf(this);
-        }
+        const pinnedStart = this.grid.pinnedStartColumns.filter(c => c.columnLayout && !c.hidden);
+        const pinnedEndColumns = this.grid.pinnedEndColumns.filter(c => c.columnLayout && !c.hidden);
+        const ordered = pinnedStart.concat(unpinnedColumns).concat(pinnedEndColumns);
+        let vIndex = ordered.indexOf(this);
         this._vIndex = vIndex;
         return vIndex;
     }
@@ -158,7 +153,7 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
     public override populateVisibleIndexes() {
         this.childrenVisibleIndexes = [];
         const columns = this.grid?.pinnedColumns && this.grid?.unpinnedColumns
-            ? this.grid.pinnedColumns.concat(this.grid.unpinnedColumns)
+            ? this.grid.pinnedStartColumns.concat(this.grid.unpinnedColumns).concat(this.grid.pinnedEndColumns)
             : [];
         const orderedCols = columns
             .filter(x => !x.columnGroup && !x.hidden)
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
index 641c2fb5a0c..5dc8013634e 100644
--- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
@@ -56,7 +56,7 @@ import { IColumnVisibilityChangingEventArgs, IPinColumnCancellableEventArgs, IPi
 import { isConstructor, PlatformUtil } from '../../core/utils';
 import { IgxGridCell } from '../grid-public-cell';
 import { NG_VALIDATORS, Validator } from '@angular/forms';
-import { Size } from '../common/enums';
+import { ColumnPinningPosition, Size } from '../common/enums';
 import { ExpressionsTreeUtil } from '../../data-operations/expressions-tree-util';
 
 const DEFAULT_DATE_FORMAT = 'mediumDate';
@@ -1039,6 +1039,28 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         return (this.grid as any)._columns.indexOf(this);
     }
 
+    /**
+     * Gets the pinning position of the column.
+     * ```typescript
+     * let pinningPosition = this.column.pinningPosition;
+     */
+    @WatchColumnChanges()
+    @Input()
+    public get pinningPosition(): ColumnPinningPosition {
+        const userSet = this._pinningPosition !== null && this._pinningPosition !== undefined;
+        return userSet ? this._pinningPosition : this.grid.pinning.columns;
+    }
+
+    /**
+     * Sets the pinning position of the column.
+     *```html
+     * <igx-column [pinningPosition]="1"></igx-column>
+     * ```
+     */
+    public set pinningPosition(value: ColumnPinningPosition) {
+        this._pinningPosition = value;
+    }
+
     /**
      * Gets whether the column is `pinned`.
      * ```typescript
@@ -1485,7 +1507,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
             return this._vIndex;
         }
         const unpinnedColumns = this.grid.unpinnedColumns.filter(c => !c.columnGroup);
-        const pinnedColumns = this.grid.pinnedColumns.filter(c => !c.columnGroup);
+        const pinnedStartColumns = this.grid.pinnedStartColumns.filter(c => !c.columnGroup);
+        const pinnedEndColumns = this.grid.pinnedEndColumns.filter(c => !c.columnGroup);
 
         let col = this;
         let vIndex = -1;
@@ -1500,15 +1523,13 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         if (!this.pinned) {
             const indexInCollection = unpinnedColumns.indexOf(col);
             vIndex = indexInCollection === -1 ?
-                -1 :
-                (this.grid.isPinningToStart ?
-                    pinnedColumns.length + indexInCollection :
-                    indexInCollection);
+                -1 : pinnedStartColumns.length + indexInCollection;
         } else {
-            const indexInCollection = pinnedColumns.indexOf(col);
-            vIndex = this.grid.isPinningToStart ?
+            const indexInCollection = this.pinningPosition === ColumnPinningPosition.Start ?
+            pinnedStartColumns.indexOf(col) : pinnedEndColumns.indexOf(col);
+            vIndex = this.pinningPosition === ColumnPinningPosition.Start ?
                 indexInCollection :
-                unpinnedColumns.length + indexInCollection;
+                pinnedStartColumns.length + unpinnedColumns.length + indexInCollection;
         }
         this._vIndex = vIndex;
         return vIndex;
@@ -1586,20 +1607,20 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
 
     /** @hidden @internal **/
     public get isLastPinned(): boolean {
-        return this.grid.isPinningToStart &&
-            this.grid.pinnedColumns[this.grid.pinnedColumns.length - 1] === this;
+        return this.pinningPosition === ColumnPinningPosition.Start &&
+            this.grid.pinnedStartColumns[this.grid.pinnedStartColumns.length - 1] === this;
     }
 
     /** @hidden @internal **/
     public get isFirstPinned(): boolean {
-        const pinnedCols = this.grid.pinnedColumns.filter(x => !x.columnGroup);
-        return !this.grid.isPinningToStart && pinnedCols[0] === this;
+        const pinnedCols = this.grid.pinnedEndColumns.filter(x => !x.columnGroup);
+        return this.pinningPosition === ColumnPinningPosition.End && pinnedCols[0] === this;
     }
 
     /** @hidden @internal **/
     public get rightPinnedOffset(): string {
-        return this.pinned && !this.grid.isPinningToStart ?
-            - this.grid.pinnedWidth - this.grid.headerFeaturesWidth + 'px' :
+        return this.pinned && this.pinningPosition === ColumnPinningPosition.End ?
+            - this.grid.pinnedEndWidth - this.grid.pinnedStartWidth + 'px' :
             null;
     }
 
@@ -1792,6 +1813,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
     protected _applySelectableClass = false;
 
     protected _vIndex = NaN;
+    protected _pinningPosition = null;
     /**
      * @hidden
      */
@@ -2185,20 +2207,19 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
     }
 
     /**
-     * Pins the column at the provided index in the pinned area.
+     * Pins the column in the specified position at the provided index in that pinned area.
      * Defaults to index `0` if not provided, or to the initial index in the pinned area.
      * Returns `true` if the column is successfully pinned. Returns `false` if the column cannot be pinned.
      * Column cannot be pinned if:
      * - Is already pinned
      * - index argument is out of range
-     * - The pinned area exceeds 80% of the grid width
      * ```typescript
      * let success = this.column.pin();
      * ```
      *
      * @memberof IgxColumnComponent
      */
-    public pin(index?: number): boolean {
+    public pin(index?: number, pinningPosition?: ColumnPinningPosition): boolean {
         // TODO: Probably should the return type of the old functions
         // should be moved as a event parameter.
         const grid = (this.grid as any);
@@ -2207,11 +2228,15 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         }
 
         if (this.parent && !this.parent.pinned) {
-            return this.topLevelParent.pin(index);
-        }
-
-        const hasIndex = index !== undefined;
-        if (hasIndex && (index < 0 || index > grid.pinnedColumns.length)) {
+            return this.topLevelParent.pin(index, pinningPosition);
+        }
+        const targetPinPosition = pinningPosition !== null && pinningPosition !== undefined ?  pinningPosition : this.pinningPosition;
+        const pinningVisibleCollection = targetPinPosition === ColumnPinningPosition.Start ?
+        grid.pinnedStartColumns : grid.pinnedEndColumns;
+        const pinningCollection = targetPinPosition === ColumnPinningPosition.Start ?
+        grid._pinnedStartColumns : grid._pinnedEndColumns;
+        const hasIndex = index !== undefined && index !== null;
+        if (hasIndex && (index < 0 || index > pinningVisibleCollection.length)) {
             return false;
         }
 
@@ -2219,7 +2244,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
             return false;
         }
 
-        const rootPinnedCols = grid._pinnedColumns.filter((c) => c.level === 0);
+        const rootPinnedCols = pinningCollection.filter((c) => c.level === 0);
         index = hasIndex ? index : rootPinnedCols.length;
         const args: IPinColumnCancellableEventArgs = { column: this, insertAtIndex: index, isPinned: false, cancel: false };
         this.grid.columnPin.emit(args);
@@ -2231,14 +2256,20 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         this.grid.crudService.endEdit(false);
 
         this._pinned = true;
+        if (pinningPosition !== null && pinningPosition !== undefined) {
+            // if user has set some position in the params, overwrite the column's position.
+            this._pinningPosition = pinningPosition;
+        }
+
         this.pinnedChange.emit(this._pinned);
         // it is possible that index is the last position, so will need to find target column by [index-1]
-        const targetColumn = args.insertAtIndex === grid._pinnedColumns.length ?
-            grid._pinnedColumns[args.insertAtIndex - 1] : grid._pinnedColumns[args.insertAtIndex];
+        const targetColumn = args.insertAtIndex === pinningCollection.length ?
+        pinningCollection[args.insertAtIndex - 1] : pinningCollection[args.insertAtIndex];
 
-        if (grid._pinnedColumns.indexOf(this) === -1) {
+        if (pinningCollection.indexOf(this) === -1) {
             if (!grid.hasColumnGroups) {
-                grid._pinnedColumns.splice(args.insertAtIndex, 0, this);
+                pinningCollection.splice(args.insertAtIndex, 0, this);
+                grid._pinnedColumns = grid._pinnedStartColumns.concat(grid._pinnedEndColumns);
             } else {
                 // insert based only on root collection
                 if (this.level === 0) {
@@ -2252,6 +2283,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
                     allPinned = allPinned.concat(group.allChildren);
                 });
                 grid._pinnedColumns = allPinned;
+                if (this.pinningPosition === ColumnPinningPosition.Start) {
+                    grid._pinnedStartColumns = allPinned;
+                } else {
+                    grid._pinnedEndColumns = allPinned;
+                }
             }
 
             if (grid._unpinnedColumns.indexOf(this) !== -1) {
@@ -2261,12 +2297,12 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         }
 
         if (hasIndex) {
-            index === grid._pinnedColumns.length - 1 ?
+            index === pinningCollection.length - 1 ?
                 grid._moveColumns(this, targetColumn, DropPosition.AfterDropTarget) : grid._moveColumns(this, targetColumn, DropPosition.BeforeDropTarget);
         }
 
         if (this.columnGroup) {
-            this.allChildren.forEach(child => child.pin());
+            this.allChildren.forEach(child => child.pin(null, targetPinPosition));
             grid.reinitPinStates();
         }
 
@@ -2302,7 +2338,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         if (this.parent && this.parent.pinned) {
             return this.topLevelParent.unpin(index);
         }
-        const hasIndex = index !== undefined;
+        const hasIndex = index !== undefined && index !== null;
         if (hasIndex && (index < 0 || index > grid._unpinnedColumns.length)) {
             return false;
         }
@@ -2337,6 +2373,12 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
             if (grid._pinnedColumns.indexOf(this) !== -1) {
                 grid._pinnedColumns.splice(grid._pinnedColumns.indexOf(this), 1);
             }
+            if (this.pinningPosition === ColumnPinningPosition.Start && grid._pinnedStartColumns.indexOf(this) !== -1) {
+                grid._pinnedStartColumns.splice(grid._pinnedStartColumns.indexOf(this), 1);
+            }
+            if (this.pinningPosition === ColumnPinningPosition.End && grid._pinnedEndColumns.indexOf(this) !== -1) {
+                grid._pinnedEndColumns.splice(grid._pinnedEndColumns.indexOf(this), 1);
+            }
         }
 
         if (hasIndex) {
diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
index 3c8d8aa4f38..d70719b7844 100644
--- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
+++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
@@ -520,7 +520,7 @@ export interface ColumnType extends FieldType {
     toggleVisibility(value?: boolean): void;
     populateVisibleIndexes?(): void;
     /** Pins the column at the specified index (if not already pinned). */
-    pin(index?: number): boolean;
+    pin(index?: number, pinningPosition?: ColumnPinningPosition): boolean;
     /** Unpins the column at the specified index (if not already unpinned). */
     unpin(index?: number): boolean;
 }
@@ -776,13 +776,13 @@ export interface GridType extends IGridDataBindable {
     isRowSelectable: boolean;
     /** Indicates whether the selectors of the rows are visible */
     showRowSelectors: boolean;
-    /** Indicates whether the grid's element is pinned to the start of the grid */
-    isPinningToStart: boolean;
     /** Indicates if the column of the grid is in drag mode */
     columnInDrag: any;
     /** @hidden @internal */
-    /** The width of pinned element */
-    pinnedWidth: number;
+    /** The width of pinned element for pinning at start. */
+    pinnedStartWidth: number;
+    /** The width of pinned element for pinning at end. */
+    pinnedEndWidth: number;
     /** @hidden @internal */
     /** The width of unpinned element */
     unpinnedWidth: number;
@@ -917,6 +917,10 @@ export interface GridType extends IGridDataBindable {
     unpinnedColumns: ColumnType[];
     /** An array of columns, but it counts only the ones that are pinned */
     pinnedColumns: ColumnType[];
+    /** An array of columns, but it counts only the ones that are pinned to the start. */
+    pinnedStartColumns: ColumnType[];
+    /** An array of columns, but it counts only the ones that are pinned to the end. */
+    pinnedEndColumns: ColumnType[];
     /** represents an array of the headers of the columns */
     /** @hidden @internal */
     headerCellList: any[];
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts
index 80aa1564310..3604c63b44e 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts
@@ -4,6 +4,7 @@ import { BaseFilteringComponent } from './base-filtering.component';
 import { IgxIconComponent } from '../../../icon/icon.component';
 import { IgxButtonDirective } from '../../../directives/button/button.directive';
 import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.component';
+import { ColumnPinningPosition } from '../../common/enums';
 
 /**
  * A component used for presenting Excel style column moving UI.
@@ -49,25 +50,26 @@ export class IgxExcelStyleMovingComponent {
     public onMoveButtonClicked(moveDirection) {
         let targetColumn;
         if (this.esf.column.pinned) {
-            if (this.esf.column.isLastPinned && moveDirection === 1 && this.esf.grid.isPinningToStart) {
+            if (this.esf.column.isLastPinned && moveDirection === 1 && this.esf.column.pinningPosition === ColumnPinningPosition.Start) {
                 targetColumn = this.esf.grid.unpinnedColumns[0];
                 moveDirection = 0;
-            } else if (this.esf.column.isFirstPinned && moveDirection === 0 && !this.esf.grid.isPinningToStart) {
+            } else if (this.esf.column.isFirstPinned && moveDirection === 0 && this.esf.column.pinningPosition === ColumnPinningPosition.End) {
                 targetColumn = this.esf.grid.unpinnedColumns[this.esf.grid.unpinnedColumns.length - 1];
                 moveDirection = 1;
             } else {
                 targetColumn = this.findColumn(moveDirection, this.esf.grid.pinnedColumns);
             }
-        } else if (this.esf.grid.unpinnedColumns.indexOf(this.esf.column) === 0 && moveDirection === 0 &&
-                    this.esf.grid.isPinningToStart) {
-            targetColumn = this.esf.grid.pinnedColumns[this.esf.grid.pinnedColumns.length - 1];
+        } else if (this.esf.grid.unpinnedColumns.indexOf(this.esf.column) === 0 && moveDirection === 0) {
+            // moving first unpinned, left (into pin start area)
+            targetColumn = this.esf.grid.pinnedStartColumns[this.esf.grid.pinnedStartColumns.length - 1];
             if (targetColumn.parent) {
                 targetColumn = targetColumn.topLevelParent;
             }
             moveDirection = 1;
         } else if (this.esf.grid.unpinnedColumns.indexOf(this.esf.column) === this.esf.grid.unpinnedColumns.length - 1 &&
-            moveDirection === 1 && !this.esf.grid.isPinningToStart) {
-            targetColumn = this.esf.grid.pinnedColumns[0];
+            moveDirection === 1) {
+                // moving last unpinned, right (into pin end area)
+            targetColumn = this.esf.grid.pinnedEndColumns[0];
             moveDirection = 0;
         } else {
             targetColumn = this.findColumn(moveDirection, this.esf.grid.unpinnedColumns);
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
index c18341a7159..e4a919df1cb 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -2645,14 +2645,6 @@ export abstract class IgxGridBaseDirective implements GridType,
         this._headSelectorTemplate = template;
     }
 
-    /**
-     * @hidden
-     * @internal
-     */
-    public get isPinningToStart() {
-        return this.pinning.columns !== ColumnPinningPosition.End;
-    }
-
     /**
      * @hidden
      * @internal
@@ -3124,6 +3116,17 @@ export abstract class IgxGridBaseDirective implements GridType,
      * @hidden
      */
     protected _pinnedColumns: IgxColumnComponent[] = [];
+
+    /**
+     * @hidden
+     */
+    protected _pinnedStartColumns: IgxColumnComponent[] = [];
+
+    /**
+     * @hidden
+     */
+    protected _pinnedEndColumns: IgxColumnComponent[] = [];
+
     /**
      * @hidden
      */
@@ -3262,7 +3265,8 @@ export abstract class IgxGridBaseDirective implements GridType,
     private _totalWidth = NaN;
     private _pinnedVisible = [];
     private _unpinnedVisible = [];
-    private _pinnedWidth = NaN;
+    private _pinnedStartWidth = NaN;
+    private _pinnedEndWidth = NaN;
     private _unpinnedWidth = NaN;
     private _visibleColumns = [];
     private _columnGroups = false;
@@ -3910,7 +3914,8 @@ export abstract class IgxGridBaseDirective implements GridType,
      */
     public resetCachedWidths() {
         this._unpinnedWidth = NaN;
-        this._pinnedWidth = NaN;
+        this._pinnedStartWidth = NaN;
+        this._pinnedEndWidth = NaN;
         this._totalWidth = NaN;
     }
 
@@ -4419,12 +4424,21 @@ export abstract class IgxGridBaseDirective implements GridType,
     }
 
     /** @hidden @internal */
-    public get pinnedWidth() {
-        if (!isNaN(this._pinnedWidth)) {
-            return this._pinnedWidth;
+    public get pinnedStartWidth() {
+        if (!isNaN(this._pinnedStartWidth)) {
+            return this._pinnedStartWidth;
+        }
+        this._pinnedStartWidth = this.getPinnedStartWidth();
+        return this._pinnedStartWidth;
+    }
+
+    /** @hidden @internal */
+    public get pinnedEndWidth() {
+        if (!isNaN(this._pinnedEndWidth)) {
+            return this._pinnedEndWidth;
         }
-        this._pinnedWidth = this.getPinnedWidth();
-        return this._pinnedWidth;
+        this._pinnedEndWidth = this.getPinnedEndWidth();
+        return this._pinnedEndWidth;
     }
 
     /** @hidden @internal */
@@ -4515,6 +4529,30 @@ export abstract class IgxGridBaseDirective implements GridType,
         return this._pinnedVisible;
     }
 
+    /**
+     * Gets an array of the pinned to the left `IgxColumnComponent`s.
+     *
+     * @example
+     * ```typescript
+     * const pinnedColumns = this.grid.pinnedStartColumns.
+     * ```
+     */
+    public get pinnedStartColumns(): IgxColumnComponent[] {
+        return this._pinnedStartColumns.filter(col => !col.hidden);
+    }
+
+    /**
+     * Gets an array of the pinned to the right `IgxColumnComponent`s.
+     *
+     * @example
+     * ```typescript
+     * const pinnedColumns = this.grid.pinnedEndColumns.
+     * ```
+     */
+    public get pinnedEndColumns(): IgxColumnComponent[] {
+        return this._pinnedEndColumns.filter(col => !col.hidden);
+    }
+
     /* csSuppress */
     /**
      * Gets an array of the pinned `IgxRowComponent`s.
@@ -4730,9 +4768,9 @@ export abstract class IgxGridBaseDirective implements GridType,
         // pinning and unpinning will work correctly even without passing index
         // but is easier to calclulate the index here, and later use it in the pinning event args
         if (target.pinned && !column.pinned) {
-            const pinnedIndex = this._pinnedColumns.indexOf(target);
+            const pinnedIndex = target.pinningPosition === ColumnPinningPosition.Start ? this.pinnedStartColumns.indexOf(target) : this.pinnedEndColumns.indexOf(target);
             const index = pos === DropPosition.AfterDropTarget ? pinnedIndex + 1 : pinnedIndex;
-            column.pin(index);
+            column.pin(index, target.pinningPosition);
         }
 
         if (!target.pinned && column.pinned) {
@@ -4741,6 +4779,11 @@ export abstract class IgxGridBaseDirective implements GridType,
             column.unpin(index);
         }
 
+        // both are pinned but are in different sides
+        if (target.pinned && column.pinned && target.pinningPosition !== column.pinningPosition) {
+            column.pinningPosition = target.pinningPosition;
+        }
+
         // if (target.pinned && column.pinned && !columnPinStateChanged) {
         //     this._reorderColumns(column, target, pos, this._pinnedColumns);
         // }
@@ -5138,10 +5181,11 @@ export abstract class IgxGridBaseDirective implements GridType,
      * ```
      * @param columnName
      * @param index
+     * @param pinningPosition
      */
-    public pinColumn(columnName: string | IgxColumnComponent, index?: number): boolean {
+    public pinColumn(columnName: string | IgxColumnComponent, index?: number, pinningPosition?: ColumnPinningPosition): boolean {
         const col = columnName instanceof IgxColumnComponent ? columnName : this.getColumnByName(columnName);
-        return col.pin(index);
+        return col.pin(index, pinningPosition);
     }
 
     /**
@@ -5552,7 +5596,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     }
 
     /**
-     * Gets calculated width of the pinned area.
+     * Gets calculated width of the pinned areas.
      *
      * @example
      * ```typescript
@@ -5560,17 +5604,58 @@ export abstract class IgxGridBaseDirective implements GridType,
      * ```
      * @param takeHidden If we should take into account the hidden columns in the pinned area.
      */
-    public getPinnedWidth(takeHidden = false) {
-        const fc = takeHidden ? this._pinnedColumns : this.pinnedColumns;
+    public getPinnedStartWidth(takeHidden = false) {
+        const fc = takeHidden ? this._pinnedStartColumns : this.pinnedStartColumns;
         let sum = 0;
         for (const col of fc) {
             if (col.level === 0) {
                 sum += parseFloat(col.calcWidth);
             }
         }
-        if (this.isPinningToStart) {
-            sum += this.featureColumnsWidth();
+        // includes features at start
+        sum += this.featureColumnsWidth();
+
+        return sum;
+    }
+
+    /**
+ * Gets calculated width of the pinned areas.
+ *
+ * @example
+ * ```typescript
+ * const pinnedWidth = this.grid.getPinnedWidth();
+ * ```
+ * @param takeHidden If we should take into account the hidden columns in the pinned area.
+ */
+    public getPinnedEndWidth(takeHidden = false) {
+        const fc = takeHidden ? this._pinnedEndColumns : this.pinnedEndColumns;
+        let sum = 0;
+        for (const col of fc) {
+            if (col.level === 0) {
+                sum += parseFloat(col.calcWidth);
+            }
         }
+        return sum;
+    }
+
+    /**
+     * Gets calculated width of the pinned left area.
+     *
+     * @example
+     * ```typescript
+     * const pinnedWidth = this.grid.getPinnedWidth();
+     * ```
+     * @param takeHidden If we should take into account the hidden columns in the pinned area.
+     */
+    public getPinnedLeftWidth(takeHidden = false) {
+        const fc = takeHidden ? this._pinnedStartColumns : this.pinnedStartColumns;
+        let sum = 0;
+        for (const col of fc) {
+            if (col.level === 0) {
+                sum += parseFloat(col.calcWidth);
+            }
+        }
+        sum += this.featureColumnsWidth();
 
         return sum;
     }
@@ -6678,7 +6763,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      * @hidden
      */
     protected _moveColumns(from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition) {
-        const orderedList = this._pinnedColumns.concat(this._unpinnedColumns);
+        const orderedList = this._pinnedStartColumns.concat(this._unpinnedColumns).concat(this._pinnedEndColumns);
         const list = orderedList;
         this._reorderColumns(from, to, pos, list);
         const newList = this._resetColumnList(list);
@@ -6694,6 +6779,8 @@ export abstract class IgxGridBaseDirective implements GridType,
         // update internal collections to retain order.
         this._pinnedColumns = newColumns
             .filter((c) => c.pinned);
+        this._pinnedStartColumns = newColumns.filter((c) => c.pinned && c.pinningPosition === ColumnPinningPosition.Start);
+        this._pinnedEndColumns = newColumns.filter((c) => c.pinned && c.pinningPosition === ColumnPinningPosition.End);
         this._unpinnedColumns = newColumns.filter((c) => !c.pinned);
         this._columns = newColumns;
         if (this._columns && this._columns.length && this._filteringExpressionsTree) {
@@ -6847,6 +6934,11 @@ export abstract class IgxGridBaseDirective implements GridType,
                 added = true;
                 if (record.item.pinned) {
                     this._pinnedColumns.push(record.item);
+                    if (record.item.pinningPosition === ColumnPinningPosition.Start) {
+                        this._pinnedStartColumns.push(record.item);
+                    } else {
+                        this._pinnedEndColumns.push(record.item);
+                    }
                     pinning = true;
                 } else {
                     this._unpinnedColumns.push(record.item);
@@ -7129,11 +7221,8 @@ export abstract class IgxGridBaseDirective implements GridType,
         if (this.hasVerticalScroll() && !this.isPercentWidth) {
             width -= this.scrollSize;
         }
-        if (!this.isPinningToStart) {
-            width -= this.featureColumnsWidth();
-        }
 
-        return width - this.getPinnedWidth(takeHidden);
+        return width - (this.getPinnedStartWidth(takeHidden) + this.getPinnedEndWidth(takeHidden));
     }
 
     /**
@@ -7261,6 +7350,10 @@ export abstract class IgxGridBaseDirective implements GridType,
     protected reinitPinStates() {
         this._pinnedColumns = this._columns
             .filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
+        this._pinnedStartColumns = this._columns.filter((c) => c.pinned && c.pinningPosition === ColumnPinningPosition.Start)
+            .sort((a, b) => this._pinnedStartColumns.indexOf(a) - this._pinnedStartColumns.indexOf(b));
+        this._pinnedEndColumns = this._columns.filter((c) => c.pinned && c.pinningPosition === ColumnPinningPosition.End)
+            .sort((a, b) => this._pinnedEndColumns.indexOf(a) - this._pinnedEndColumns.indexOf(b));
         this._unpinnedColumns = this.hasColumnGroups ? this._columns.filter((c) => !c.pinned) :
             this._columns.filter((c) => !c.pinned)
                 .sort((a, b) => this._unpinnedColumns.indexOf(a) - this._unpinnedColumns.indexOf(b));
@@ -7528,9 +7621,9 @@ export abstract class IgxGridBaseDirective implements GridType,
         let columnIndex = typeof column === 'number' ? column : this.getColumnByName(column).visibleIndex;
         const scrollRow = this.rowList.find(r => !!r.virtDirRow);
         const virtDir = scrollRow ? scrollRow.virtDirRow : null;
-        if (this.isPinningToStart && this.pinnedColumns.length) {
-            if (columnIndex >= this.pinnedColumns.length) {
-                columnIndex -= this.pinnedColumns.length;
+        if (this.pinnedStartColumns.length) {
+            if (columnIndex >= this.pinnedStartColumns.length) {
+                columnIndex -= this.pinnedStartColumns.length;
                 this.scrollDirective(virtDir, columnIndex);
             }
         } else {
@@ -7972,6 +8065,8 @@ export abstract class IgxGridBaseDirective implements GridType,
         }
         // Assign the applicable collections.
         this._pinnedColumns = pinnedColumns;
+        this._pinnedStartColumns = pinnedColumns.filter((c) => c.pinned && c.pinningPosition === ColumnPinningPosition.Start);
+        this._pinnedEndColumns = pinnedColumns.filter((c) => c.pinned && c.pinningPosition === ColumnPinningPosition.End);
         this._unpinnedColumns = unpinnedColumns;
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts
index dcffd2d8e89..a4b64813680 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts
@@ -2191,7 +2191,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
                 const firstUnpinnedCell = grid.gridAPI.get_cell_by_index(0, 'ContactName');
                 expect(firstUnpinnedCell.active).toBe(true);
                 const diff = firstUnpinnedCell.nativeElement.getBoundingClientRect().left -
-                    grid.pinnedWidth - grid.tbody.nativeElement.getBoundingClientRect().left;
+                    grid.pinnedStartWidth - grid.tbody.nativeElement.getBoundingClientRect().left;
                 expect(diff).toBe(0);
 
                 // TODO: Rest of the test needs to be finished
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
index 7289bc16f29..f0eecaecd20 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
@@ -25,24 +25,24 @@
 
 
     @if (!grid.hasColumnLayouts) {
-        @if (pinnedColumns.length > 0 && grid.isPinningToStart) {
-            @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {
+        @if (pinnedStartColumns.length > 0) {
+            @for (col of pinnedStartColumns | igxNotGrouped; track trackPinnedColumn(col)) {
                 <ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
             }
         }
         <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForSizePropName]="'calcPixelWidth'" [igxForTrackBy]="grid.trackColumnChanges" #igxDirRef>
             <ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
         </ng-template>
-        @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {
-            @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {
+        @if (pinnedEndColumns.length > 0) {
+            @for (col of pinnedEndColumns | igxNotGrouped; track trackPinnedColumn(col)) {
                 <ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
             }
         }
     }
 
     @if (grid.hasColumnLayouts) {
-        @if (pinnedColumns.length > 0 && grid.isPinningToStart) {
-            <ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)"></ng-container>
+        @if (pinnedStartColumns.length > 0) {
+            <ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedStartColumns, this)"></ng-container>
         }
         <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxTopLevel" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForSizePropName]="'calcPixelWidth'" [igxForTrackBy]="grid.trackColumnChanges" #igxDirRef>
             <div class="igx-grid__mrl-block" [ngStyle]="{
@@ -54,8 +54,8 @@
                 }
             </div>
         </ng-template>
-        @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {
-            <ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)"></ng-container>
+        @if (pinnedEndColumns.length > 0) {
+            <ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedEndColumns, this)"></ng-container>
         }
     }
 </ng-template>
@@ -65,7 +65,7 @@
         <div class="igx-grid__mrl-block"
             [class.igx-grid__td--pinned-last]="col.hasLastPinnedChildColumn"
             [class.igx-grid__td--pinned-first]="col.hasFirstPinnedChildColumn"
-            [style.left]="mrlRightPinnedOffset"
+            [style.left]="col.rightPinnedOffset"
             [ngStyle]="{
                 'grid-template-rows':col.getGridTemplate(true),
                 'grid-template-columns':col.getGridTemplate(false),
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts
index 77bbeef579c..03336b0066f 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts
@@ -26,11 +26,6 @@ export class IgxGridRowComponent extends IgxRowDirective {
         };
     }
 
-    public get mrlRightPinnedOffset(): string {
-        return !this.grid.isPinningToStart ?
-            - this.grid.pinnedWidth - this.grid.headerFeaturesWidth + 'px' :
-            null;
-    }
 
     public getContextMRL(pinnedCols, row) {
         return {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
index d8e35ec2aac..611c4035eef 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -18,7 +18,8 @@
     [grid]="this"
     [hasMRL]="hasColumnLayouts"
     [width]="calcWidth"
-    [pinnedColumnCollection]="pinnedColumns"
+    [pinnedStartColumnCollection]="pinnedStartColumns"
+    [pinnedEndColumnCollection]="pinnedEndColumns"
     [unpinnedColumnCollection]="unpinnedColumns"
     (keydown.meta.c)="copyHandler($event)"
     (keydown.control.c)="copyHandler($event)"
@@ -42,7 +43,7 @@
         @if (moving && columnInDrag && pinnedColumns.length > 0) {
             <span
                 [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
-                class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
+                class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedStartWidth"></span>
         }
         <ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
         </ng-container>
@@ -180,12 +181,12 @@
 </div>
 
 <div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
-    <div class="igx-grid__scroll-start" [style.width.px]="isPinningToStart ? pinnedWidth : headerFeaturesWidth" [style.min-width.px]="isPinningToStart ? pinnedWidth : headerFeaturesWidth"></div>
+    <div class="igx-grid__scroll-start" [style.width.px]="pinnedStartWidth" [style.min-width.px]="pinnedStartWidth"></div>
     <div class="igx-grid__scroll-main" [style.width.px]="unpinnedWidth">
         <ng-template igxGridFor [igxGridForOf]="EMPTY_DATA" #scrollContainer>
         </ng-template>
     </div>
-    <div class="igx-grid__scroll-end" [style.float]="'right'" [style.width.px]="pinnedWidth" [style.min-width.px]="pinnedWidth" [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
+    <div class="igx-grid__scroll-end" [style.float]="'right'" [style.width.px]="pinnedEndWidth" [style.min-width.px]="pinnedEndWidth" [hidden]="pinnedEndWidth === 0"></div>
 </div>
 
 <div class="igx-grid__footer" #footer>
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
index aa9dc341bf8..d6468011f7f 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
@@ -3267,7 +3267,7 @@ describe('IgxGrid - GroupBy #grid', () => {
         // verify width is recalculated
         const indentation = fix.debugElement.query(By.css('.igx-grid__header-indentation'));
 
-        expect(grid.pinnedWidth).toEqual(parseInt(window.getComputedStyle(indentation.nativeElement).width, 10));
+        expect(grid.pinnedStartWidth).toEqual(parseInt(window.getComputedStyle(indentation.nativeElement).width, 10));
         expect(grid.unpinnedWidth).toEqual(400 - parseInt(window.getComputedStyle(indentation.nativeElement).width, 10) - grid.scrollSize);
 
         grid.clearGrouping();
@@ -3281,7 +3281,7 @@ describe('IgxGrid - GroupBy #grid', () => {
             - parseInt(window.getComputedStyle(gridScroll.nativeElement).height, 10);
 
         expect(grid.calcHeight).toEqual(expectedHeight);
-        expect(grid.pinnedWidth).toEqual(0);
+        expect(grid.pinnedStartWidth).toEqual(0);
         const expectedWidth = parseInt(grid.width, 10) - grid.scrollSize;
         expect(grid.unpinnedWidth).toEqual(expectedWidth);
     }));
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts
index 3b10f661ba8..26858394c33 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts
@@ -17,8 +17,11 @@ import {
 import {
     GridFeaturesComponent,
     GridPinningMRLComponent,
+    MRLTestComponent,
+    MultiColumnHeadersComponent,
     MultiColumnHeadersWithGroupingComponent,
     PinningComponent,
+    PinOnBothSidesInitComponent,
     PinOnInitAndSelectionComponent
 } from '../../test-utils/grid-samples.spec';
 import { IgxGridComponent } from './grid.component';
@@ -39,7 +42,8 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 PinOnInitAndSelectionComponent,
                 GridFeaturesComponent,
                 MultiColumnHeadersWithGroupingComponent,
-                GridPinningMRLComponent
+                GridPinningMRLComponent,
+                PinOnBothSidesInitComponent
             ]
         }).compileComponents();
     }))
@@ -78,7 +82,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 expect(GridFunctions.isHeaderPinned(headers[1].parent)).toBe(true);
 
                 // verify container widths
-                GridFunctions.verifyPinnedAreaWidth(grid, 400);
+                GridFunctions.verifyPinnedStartAreaWidth(grid, 400);
                 GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
             });
 
@@ -107,7 +111,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 expect(GridFunctions.isHeaderPinned(thirdHeader)).toBe(false);
 
                 // verify container widths
-                GridFunctions.verifyPinnedAreaWidth(grid, 200);
+                GridFunctions.verifyPinnedStartAreaWidth(grid, 200);
                 GridFunctions.verifyUnpinnedAreaWidth(grid, 600);
 
                 // pin back the column.
@@ -119,7 +123,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 expect(grid.unpinnedColumns.length).toEqual(9);
 
                 // verify container widths
-                GridFunctions.verifyPinnedAreaWidth(grid, 400);
+                GridFunctions.verifyPinnedStartAreaWidth(grid, 400);
                 GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
 
                 expect(col.pinned).toBe(true);
@@ -130,7 +134,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 expect(GridFunctions.isCellPinned(cell)).toBe(true);
             });
 
-           it('should allow pinning/unpinning via the column API', () => {
+            it('should allow pinning/unpinning via the column API', () => {
                 const col = grid.getColumnByName('ID');
 
                 col.pinned = true;
@@ -144,7 +148,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 expect(grid.unpinnedColumns.length).toEqual(8);
 
                 // verify container widths
-                GridFunctions.verifyPinnedAreaWidth(grid, 600);
+                GridFunctions.verifyPinnedStartAreaWidth(grid, 600);
                 GridFunctions.verifyUnpinnedAreaWidth(grid, 200);
 
                 col.pinned = false;
@@ -158,7 +162,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 expect(grid.unpinnedColumns.length).toEqual(9);
 
                 // verify container widths
-                GridFunctions.verifyPinnedAreaWidth(grid, 400);
+                GridFunctions.verifyPinnedStartAreaWidth(grid, 400);
                 GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
             });
 
@@ -516,7 +520,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 expect(lastColumnHeader.column.field).toEqual('ContactName');
 
                 // verify container widths
-                GridFunctions.verifyPinnedAreaWidth(grid, 400);
+                GridFunctions.verifyPinnedEndAreaWidth(grid, 400);
                 GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
             });
 
@@ -545,7 +549,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 expect(GridFunctions.isHeaderPinned(secondHeader)).toBe(false);
 
                 // verify container widths
-                GridFunctions.verifyPinnedAreaWidth(grid, 200);
+                GridFunctions.verifyPinnedEndAreaWidth(grid, 200);
                 GridFunctions.verifyUnpinnedAreaWidth(grid, 600);
 
                 // pin back the column.
@@ -557,7 +561,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 expect(grid.unpinnedColumns.length).toEqual(9);
 
                 // verify container widths
-                GridFunctions.verifyPinnedAreaWidth(grid, 400);
+                GridFunctions.verifyPinnedEndAreaWidth(grid, 400);
                 GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
 
                 expect(col.pinned).toBe(true);
@@ -569,7 +573,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
             });
 
             it('should correctly pin column to right when row selectors are enabled.', () => {
-                grid.rowSelection =  GridSelectionMode.multiple;
+                grid.rowSelection = GridSelectionMode.multiple;
                 fix.detectChanges();
 
                 // check row DOM
@@ -586,7 +590,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 // The default pinned-border-width in px
                 expect(scrBarStartSection.nativeElement.offsetWidth).toEqual(grid.featureColumnsWidth());
 
-                GridFunctions.verifyPinnedAreaWidth(grid, scrBarEndSection.nativeElement.offsetWidth);
+                GridFunctions.verifyPinnedEndAreaWidth(grid, scrBarEndSection.nativeElement.offsetWidth);
                 GridFunctions.verifyUnpinnedAreaWidth(grid, scrBarMainSection.nativeElement.offsetWidth, false);
             });
 
@@ -739,4 +743,254 @@ describe('IgxGrid - Column Pinning #grid', () => {
             });
         });
     });
+
+    describe('Both', () => {
+        let fix;
+        let grid: IgxGridComponent;
+        beforeEach(fakeAsync(() => {
+            // ContactName pinned to start, CompanyName pinned to end
+            fix = TestBed.createComponent(PinOnBothSidesInitComponent);
+            fix.detectChanges();
+            grid = fix.componentInstance.grid;
+        }));
+
+        it('should correctly initialize when there are initially pinned columns.', () => {
+
+            // verify pinned/unpinned collections
+            expect(grid.pinnedColumns.length).toEqual(2);
+            expect(grid.pinnedStartColumns.length).toEqual(1);
+            expect(grid.pinnedEndColumns.length).toEqual(1);
+            expect(grid.unpinnedColumns.length).toEqual(9);
+
+            // verify DOM
+            // ContactName first, CompanyName last
+            const companyNameCell = grid.gridAPI.get_cell_by_index(0, 'CompanyName');
+            expect(companyNameCell.visibleColumnIndex)
+                .toEqual(grid.pinnedStartColumns.length + grid.unpinnedColumns.length);
+            expect(GridFunctions.isCellPinned(companyNameCell)).toBe(true);
+
+            const contactNameCell = grid.gridAPI.get_cell_by_index(0, 'ContactName');
+            expect(contactNameCell.visibleColumnIndex).toEqual(0);
+            expect(GridFunctions.isCellPinned(contactNameCell)).toBe(true);
+
+            const headers = grid.headerCellList;
+            const lastColumnHeader = headers[headers.length - 1];
+            const firstColumnHeader = headers[0];
+            expect(lastColumnHeader.column.field).toEqual('CompanyName');
+            expect(firstColumnHeader.column.field).toEqual('ContactName');
+
+            // verify container widths
+            GridFunctions.verifyPinnedStartAreaWidth(grid, 200);
+            GridFunctions.verifyPinnedEndAreaWidth(grid, 200);
+            GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
+        });
+
+        it('should allow pinning/unpinning via the grid API', () => {
+            const col = grid.getColumnByName('ID');
+            expect(col.pinned).toBe(false);
+            expect(col.visibleIndex).toEqual(1);
+
+            // pin ID to end, after CompanyName
+            grid.pinColumn('ID', null, ColumnPinningPosition.End);
+            fix.detectChanges();
+
+            // verify column is pinned to end
+            expect(grid.pinnedColumns.length).toEqual(3);
+            expect(grid.pinnedStartColumns.length).toEqual(1);
+            expect(grid.pinnedEndColumns.length).toEqual(2);
+            expect(grid.unpinnedColumns.length).toEqual(8);
+
+            // verify container widths
+            GridFunctions.verifyPinnedStartAreaWidth(grid, 200);
+            GridFunctions.verifyPinnedEndAreaWidth(grid, 400);
+            GridFunctions.verifyUnpinnedAreaWidth(grid, 200);
+
+            expect(col.pinned).toBe(true);
+            expect(col.visibleIndex)
+                .toEqual(grid.pinnedStartColumns.length + grid.unpinnedColumns.length + 1);
+            expect(col.pinningPosition).toBe(ColumnPinningPosition.End);
+
+            let cell = grid.gridAPI.get_cell_by_index(0, 'ID');
+            expect(cell.visibleColumnIndex)
+                .toEqual(grid.pinnedStartColumns.length + grid.unpinnedColumns.length + 1);
+            expect(GridFunctions.isCellPinned(cell)).toBe(true);
+
+            // unpin ID
+            grid.unpinColumn('ID');
+            fix.detectChanges();
+
+            // verify column is unpinned
+            expect(grid.pinnedColumns.length).toEqual(2);
+            expect(grid.pinnedStartColumns.length).toEqual(1);
+            expect(grid.pinnedEndColumns.length).toEqual(1);
+            expect(grid.unpinnedColumns.length).toEqual(9);
+
+            expect(col.pinned).toBe(false);
+            expect(col.visibleIndex).toEqual(1);
+
+            // verify container widths
+            GridFunctions.verifyPinnedStartAreaWidth(grid, 200);
+            GridFunctions.verifyPinnedEndAreaWidth(grid, 200);
+            GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
+        });
+
+        it('should pin an unpinned column when drag/drop it among pinned columns.', fakeAsync(() => {
+            // move 'ID' column to the right pinned area, before CompanyName
+            grid.moveColumn(grid.getColumnByName('ID'), grid.getColumnByName('CompanyName'), DropPosition.BeforeDropTarget);
+            tick();
+            fix.detectChanges();
+
+            // verify column is pinned at the correct place
+            expect(grid.pinnedEndColumns[0].field).toEqual('ID');
+            expect(grid.pinnedEndColumns[1].field).toEqual('CompanyName');
+            expect(grid.getColumnByName('ID').pinned).toBeTruthy();
+            // move ID to unpinned area
+            grid.moveColumn(grid.getColumnByName('ID'), grid.getColumnByName('ContactTitle'), DropPosition.AfterDropTarget);
+            tick();
+            fix.detectChanges();
+
+            // verify column is unpinned at the correct place
+            expect(grid.unpinnedColumns[0].field).toEqual('ContactTitle');
+            expect(grid.unpinnedColumns[1].field).toEqual('ID');
+            expect(grid.getColumnByName('ID').pinned).toBeFalsy();
+
+             // move 'ID' column to the left pinned area, before ContractName
+             grid.moveColumn(grid.getColumnByName('ID'), grid.getColumnByName('ContactName'), DropPosition.BeforeDropTarget);
+             tick();
+             fix.detectChanges();
+
+            // verify column is pinned at the correct place
+            expect(grid.pinnedStartColumns[0].field).toEqual('ID');
+            expect(grid.pinnedStartColumns[1].field).toEqual('ContactName');
+            expect(grid.getColumnByName('ID').pinned).toBeTruthy();
+        }));
+
+        it('should allow navigating to/from pinned areas', (async () => {
+            setupGridScrollDetection(fix, grid);
+
+            // navigate from right pinned area into unpinned and back
+            const cellCompanyName = grid.gridAPI.get_cell_by_index(0, 'CompanyName');
+            grid.navigation.activeNode = { row: 0, column: 10 };
+            fix.detectChanges();
+            expect(cellCompanyName.active).toBe(true);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowLeft'));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+            const cellFax = grid.gridAPI.get_cell_by_index(0, 'Fax');
+            expect(cellFax.active).toBe(true);
+            expect(cellCompanyName.active).toBe(false);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowRight'));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+            expect(cellFax.active).toBe(false);
+            expect(cellCompanyName.active).toBe(true);
+
+             // navigate from left pinned area into unpinned and back
+            grid.navigation.activeNode = { row: 0, column: 0 };
+            fix.detectChanges();
+            expect(grid.getCellByColumn(0, "ContactName").active).toBe(true);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowRight'));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+            const cellID = grid.gridAPI.get_cell_by_index(0, 'ID');
+            expect(grid.getCellByColumn(0, "ContactName").active).toBe(false);
+            expect(cellID.active).toBe(true);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowLeft'));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+            expect(grid.getCellByColumn(0, "ContactName").active).toBe(true);
+            expect(cellID.active).toBe(false);
+
+            clearGridSubs();
+        }));
+
+        it('should correctly pin column groups to both sides.', () => {
+            fix = TestBed.createComponent(MultiColumnHeadersComponent);
+            fix.detectChanges();
+            grid = fix.componentInstance.grid;
+
+            // 'General Information' & 'Address Information'
+            const rootGroups = grid.columns.filter(x => x.columnGroup && x.level === 0);
+
+            //'General Information' to start
+            rootGroups[0].pin(null, ColumnPinningPosition.Start);
+            fix.detectChanges();
+            //'Address Information' to end
+            rootGroups[1].pin(null, ColumnPinningPosition.End);
+            fix.detectChanges();
+
+            const pinnedCols = grid.pinnedColumns.filter(x => !x.columnGroup);
+            expect(pinnedCols.length).toBe(7);
+
+            const pinnedStart = grid.pinnedStartColumns.filter(x => !x.columnGroup);
+            expect(pinnedStart.length).toBe(3);
+
+            const pinnedEnd = grid.pinnedEndColumns.filter(x => !x.columnGroup);
+            expect(pinnedEnd.length).toBe(4);
+
+            const unpinned = grid.unpinnedColumns.filter(x => !x.columnGroup);
+            expect(unpinned.length).toBe(2);
+
+            expect(grid.getColumnByName('Country').isFirstPinned).toBeTruthy();
+            expect(grid.getColumnByName('ContactTitle').isLastPinned).toBeTruthy();
+            const row = grid.gridAPI.get_row_by_index(0).nativeElement;
+            // check pinnedEnd cells are rendered after main display container and have left offset
+            for (let i = pinnedStart.length ; i <= pinnedStart.length + pinnedEnd.length - 1; i++) {
+                const elem = row.children[i + 1];
+                expect(parseFloat((elem as any).style.left)).toBe(- (grid.pinnedEndWidth + grid.pinnedStartWidth));
+            }
+
+            // check pinnedStart cells are rendered before main display container and have no left offset
+            for (let i = 0; i <= pinnedStart.length - 1; i++) {
+                const elem = row.children[i];
+                expect((elem as any).style.left).toBe('');
+            }
+
+            // check correct headers are pinned and in correct order.
+            const pinnedHeaders = grid.headerGroupsList.filter(group => group.isPinned);
+            expect(pinnedHeaders.length).toBe(10);
+            expect(pinnedHeaders.map(x => x.column.header || x.column.field))
+            .toEqual(['General Information', 'CompanyName', 'Person Details',
+                 'ContactName', 'ContactTitle', 'Address Information',
+                  'Country', 'Region', 'City', 'Address']);
+
+        });
+
+        it('should correctly pin multi-row-layouts to both sides.', fakeAsync(() => {
+            fix = TestBed.createComponent(MRLTestComponent);
+            fix.detectChanges();
+            grid = fix.componentInstance.grid;
+            grid.width = "1500px";
+            fix.detectChanges();
+
+            // ['group1', 'group2', 'group3']
+            const rootMRLGroups = grid.columns.filter(x => x.columnLayout && x.level === 0);
+
+            // pin group1 -> left, group2 -> end
+            rootMRLGroups[0].pin(null, ColumnPinningPosition.Start);
+            fix.detectChanges();
+            rootMRLGroups[1].pin(null, ColumnPinningPosition.End);
+            fix.detectChanges();
+
+            // check collections
+            const pinnedCols = grid.pinnedColumns.filter(x => !x.columnGroup);
+            expect(pinnedCols.length).toBe(7);
+
+            const pinnedStart = grid.pinnedStartColumns.filter(x => !x.columnGroup);
+            expect(pinnedStart.length).toBe(4);
+
+            const pinnedEnd = grid.pinnedEndColumns.filter(x => !x.columnGroup);
+            expect(pinnedEnd.length).toBe(3);
+
+            const unpinned = grid.unpinnedColumns.filter(x => !x.columnGroup);
+            expect(unpinned.length).toBe(3);
+
+            // check visible indexes
+            expect(rootMRLGroups.map(x => x.visibleIndex)).toEqual([0, 2, 1])
+        }));
+    });
 });
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html
index 37562393578..3163dd403cf 100644
--- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html
@@ -5,12 +5,12 @@
     <div class="igx-grid__tr" role="row" [attr.aria-rowindex]="1" [style.width.px]="width">
 
         <!-- Left column moving area -->
-        @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0) {
-            <span id="left" class="igx-grid__scroll-on-drag-left" droppable="true" [style.left.px]="grid.pinnedWidth"
+        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length <= 0) {
+            <span id="left" class="igx-grid__scroll-on-drag-left" droppable="true" [style.left.px]="grid.pinnedStartWidth"
                 [igxColumnMovingDrop]="headerContainer"></span>
         }
-        @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0) {
-            <span id="left" class="igx-grid__scroll-on-drag-pinned" droppable="true" [style.left.px]="grid.pinnedWidth"
+        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length > 0) {
+            <span id="left" class="igx-grid__scroll-on-drag-pinned" droppable="true" [style.left.px]="grid.pinnedStartWidth"
                 [igxColumnMovingDrop]="headerContainer"></span>
         }
 
@@ -61,8 +61,8 @@
         }
 
         <!-- Pinned columns collection from the start -->
-        @if (pinnedColumnCollection.length && grid.isPinningToStart) {
-            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {
+        @if (pinnedStartColumnCollection.length) {
+            @for (column of pinnedStartColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {
                 <igx-grid-header-group
                     [ngClass]="column.headerGroupClasses"
                     [ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
@@ -92,8 +92,8 @@
         </ng-template>
 
         <!-- Pinned columns collection at the end -->
-        @if (pinnedColumnCollection.length && !grid.isPinningToStart) {
-            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {
+        @if (pinnedEndColumnCollection.length) {
+            @for (column of pinnedEndColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {
                 <igx-grid-header-group
                     [ngClass]="column.headerGroupClasses"
                     [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts
index 756c61d0afa..480e72b768b 100644
--- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts
@@ -45,9 +45,14 @@ export class IgxGridHeaderRowComponent implements DoCheck {
     @Input()
     public grid: GridType;
 
-    /** Pinned columns of the grid. */
+    /** Pinned columns of the grid at start. */
     @Input()
-    public pinnedColumnCollection: ColumnType[] = [];
+    public pinnedStartColumnCollection: ColumnType[] = [];
+
+    /** Pinned columns of the grid at end. */
+    @Input()
+    public pinnedEndColumnCollection: ColumnType[] = [];
+
 
     /** Unpinned columns of the grid. */
     @Input()
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
index ae82a0155dd..b59998440a4 100644
--- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -5,7 +5,8 @@
     [grid]="this"
     [hasMRL]="hasColumnLayouts"
     [width]="calcWidth"
-    [pinnedColumnCollection]="pinnedColumns"
+    [pinnedStartColumnCollection]="pinnedStartColumns"
+    [pinnedEndColumnCollection]="pinnedEndColumns"
     [unpinnedColumnCollection]="unpinnedColumns"
     (keydown.meta.c)="copyHandler($event)"
     (keydown.control.c)="copyHandler($event)"
@@ -28,7 +29,7 @@
         @if (moving && columnInDrag && pinnedColumns.length > 0) {
             <span
                 [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
-                class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
+                class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedStartWidth"></span>
         }
         <ng-template #pinnedRecordsTemplate>
             @if (data
@@ -150,12 +151,12 @@
 </div>
 
 <div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
-    <div class="igx-grid__scroll-start" [style.width.px]="isPinningToStart ? pinnedWidth : headerFeaturesWidth" [style.min-width.px]="isPinningToStart ? pinnedWidth : headerFeaturesWidth"></div>
+    <div class="igx-grid__scroll-start" [style.width.px]="pinnedStartWidth" [style.min-width.px]="pinnedStartWidth"></div>
     <div class="igx-grid__scroll-main" [style.width.px]="unpinnedWidth">
         <ng-template igxGridFor [igxGridForOf]="[]" #scrollContainer>
         </ng-template>
     </div>
-    <div class="igx-grid__scroll-end" [style.width.px]="pinnedWidth" [style.min-width.px]="pinnedWidth" [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
+    <div class="igx-grid__scroll-end" [style.width.px]="pinnedEndWidth" [style.min-width.px]="pinnedEndWidth" [hidden]="pinnedEndWidth === 0"></div>
 </div>
 
 <div class="igx-grid__footer" #footer>
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
index 42d4a19c5d3..131773bd307 100644
--- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
@@ -49,8 +49,8 @@
         </div>
     }
 
-    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {
-        <ng-template *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-template>
+    @if (pinnedStartColumns.length > 0) {
+        <ng-template *ngTemplateOutlet="pinnedCellsTemplate;  context: { $implicit: this, columns: pinnedStartColumns}"></ng-template>
     }
 
     <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForSizePropName]='"calcPixelWidth"' [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
@@ -82,8 +82,8 @@
         </igx-hierarchical-grid-cell>
     </ng-template>
 
-    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {
-        <ng-template *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-template>
+    @if (pinnedEndColumns.length > 0) {
+        <ng-template *ngTemplateOutlet="pinnedCellsTemplate; context: { $implicit: this, columns: pinnedEndColumns}"></ng-template>
     }
 
     <ng-template #rowSelectorBaseTemplate>
@@ -100,8 +100,8 @@
         </div>
     </ng-template>
 
-    <ng-template #pinnedCellsTemplate let-col>
-        @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {
+    <ng-template #pinnedCellsTemplate let-col let-columns="columns">
+        @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {
             <igx-hierarchical-grid-cell
                 class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
                 [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
index 1841f3b0371..a90fe28139e 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -28,7 +28,7 @@
         }
         @if (hasMovableColumns && columnInDrag && pinnedColumns.length > 0) {
             <span [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
-            class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
+            class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedStartWidth"></span>
         }
         <ng-template igxGridFor let-rowData [igxGridForOf]="renderData
         | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger
@@ -85,12 +85,12 @@
 </div>
 
 <div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
-    <div class="igx-grid__scroll-start" [style.width.px]="pivotPinnedWidth" [style.min-width.px]="pivotPinnedWidth"></div>
+    <div class="igx-grid__scroll-start" [style.width.px]="pivotPinnedStartWidth" [style.min-width.px]="pivotPinnedStartWidth"></div>
     <div class="igx-grid__scroll-main" [style.width.px]="pivotUnpinnedWidth">
         <ng-template igxGridFor [igxGridForOf]="EMPTY_DATA" #scrollContainer>
         </ng-template>
     </div>
-    <div class="igx-grid__scroll-end" [style.width.px]="pivotPinnedWidth" [style.min-width.px]="pivotPinnedWidth" [hidden]="pivotPinnedWidth === 0 || isPinningToStart"></div>
+    <div class="igx-grid__scroll-end" [style.width.px]="pivotPinnedEndWidth" [style.min-width.px]="pivotPinnedEndWidth" [hidden]="pivotPinnedEndWidth === 0"></div>
 </div>
 
 <div class="igx-grid__tfoot" role="rowgroup" #tfoot>
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
index 5fc9e317b65..57890443e81 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -870,8 +870,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     /**
      * @hidden @internal
      */
-    public override get pinnedWidth() {
-        return super.pinnedWidth;
+    public override get pinnedStartWidth() {
+        return super.pinnedStartWidth;
     }
 
     /**
@@ -1311,8 +1311,13 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     }
 
     /** @hidden @internal */
-    public get pivotPinnedWidth() {
-        return !this._init ? (this.isPinningToStart ? this.pinnedWidth : this.headerFeaturesWidth) : 0;
+    public get pivotPinnedStartWidth() {
+        return !this._init ? this.pinnedStartWidth : 0;
+    }
+
+    /** @hidden @internal */
+    public get pivotPinnedEndWidth() {
+        return !this._init ? this.pinnedEndWidth : 0;
     }
 
     /** @hidden @internal */
@@ -1594,8 +1599,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     /**
     * @hidden @internal
     */
-    public override getPinnedWidth(takeHidden = false) {
-        return super.getPinnedWidth(takeHidden);
+    public override getPinnedStartWidth(takeHidden = false) {
+        return super.getPinnedStartWidth(takeHidden);
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html
index 6585cf8c3e5..5d507b28fba 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html
@@ -267,8 +267,8 @@
             }
 
             <!-- Pinned columns collection from the start -->
-            @if (pinnedColumnCollection.length && grid.isPinningToStart) {
-                @for (column of pinnedColumnCollection | igxTopLevel; track column) {
+            @if (pinnedStartColumnCollection.length) {
+                @for (column of pinnedStartColumnCollection | igxTopLevel; track column) {
                     <igx-grid-header-group [ngClass]="column.headerGroupClasses"
                         [ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
                         [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
@@ -299,8 +299,8 @@
             </div>
 
             <!-- Pinned columns collection at the end -->
-            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {
-                @for (column of pinnedColumnCollection | igxTopLevel; track column) {
+            @if (pinnedEndColumnCollection.length) {
+                @for (column of pinnedEndColumnCollection | igxTopLevel; track column) {
                     <igx-grid-header-group [ngClass]="column.headerGroupClasses"
                         [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
                         [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
diff --git a/projects/igniteui-angular/src/lib/grids/row.directive.ts b/projects/igniteui-angular/src/lib/grids/row.directive.ts
index b2118b1f15e..922e0b14b90 100644
--- a/projects/igniteui-angular/src/lib/grids/row.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/row.directive.ts
@@ -247,6 +247,20 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
         return this.grid.pinnedColumns;
     }
 
+    /**
+     * @hidden
+     */
+    public get pinnedStartColumns(): ColumnType[] {
+        return this.grid.pinnedStartColumns;
+    }
+
+    /**
+    * @hidden
+    */
+    public get pinnedEndColumns(): ColumnType[] {
+        return this.grid.pinnedEndColumns;
+    }
+
     /**
      * @hidden
      */
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html
index 9bcc77428bb..6588859cf17 100644
--- a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html
@@ -7,8 +7,8 @@
             (pointerdown)="$event.preventDefault()"
         ></div>
     }
-    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {
-        <ng-container *ngTemplateOutlet="summaryCellTemplate; context: getContext(this)"></ng-container>
+    @if (pinnedStartColumns.length > 0) {
+        <ng-container *ngTemplateOutlet="summaryCellTemplate; context: getContext(this, pinnedStartColumns)"></ng-container>
     }
     <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges" [igxForSizePropName]='"calcPixelWidth"' #igxDirRef>
         <igx-grid-summary-cell
@@ -31,13 +31,13 @@
             [style.flex-basis]="col.resolvedWidth">
         </igx-grid-summary-cell>
     </ng-template>
-    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {
-        <ng-container *ngTemplateOutlet="summaryCellTemplate; context: getContext(this)"></ng-container>
+    @if (pinnedEndColumns.length > 0) {
+        <ng-container *ngTemplateOutlet="summaryCellTemplate; context: getContext(this, pinnedEndColumns)"></ng-container>
     }
 }
 
-<ng-template #summaryCellTemplate let-col>
-    @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {
+<ng-template #summaryCellTemplate let-col let-columns="columns">
+    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {
         <igx-grid-summary-cell
             role="cell"
             class="igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned"
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts
index 6628188091d..9a8cb29f153 100644
--- a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts
@@ -107,6 +107,22 @@ export class IgxSummaryRowComponent implements DoCheck  {
         return this.grid.pinnedColumns;
     }
 
+
+    /**
+     * @hidden
+     */
+    public get pinnedStartColumns(): ColumnType[] {
+        return this.grid.pinnedStartColumns;
+    }
+
+
+    /**
+     * @hidden
+     */
+    public get pinnedEndColumns(): ColumnType[] {
+        return this.grid.pinnedEndColumns;
+    }
+
     /**
      * @hidden
      */
@@ -114,9 +130,10 @@ export class IgxSummaryRowComponent implements DoCheck  {
         return this.grid.unpinnedColumns;
     }
 
-    public getContext(row) {
+    public getContext(row, cols) {
         return {
-            $implicit: row
+            $implicit: row,
+            columns: cols
         };
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
index 05bbb9e49c4..f1143950558 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
@@ -19,8 +19,8 @@
             </ng-template>
         </div>
     }
-    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {
-        <ng-container *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-container>
+    @if (pinnedStartColumns.length > 0) {
+        <ng-container *ngTemplateOutlet="pinnedCellsTemplate; context: { $implicit: this, columns: pinnedStartColumns }"></ng-container>
     }
     <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]="'calcPixelWidth'" [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
         <ng-template #cellTemplate>
@@ -84,8 +84,8 @@
         </ng-template>
         <ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate"></ng-container>
     </ng-template>
-    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {
-        <ng-container *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-container>
+    @if (pinnedEndColumns.length > 0) {
+        <ng-container *ngTemplateOutlet="pinnedCellsTemplate; context: { $implicit: this, columns: pinnedEndColumns }"></ng-container>
     }
 </ng-template>
 
@@ -104,8 +104,8 @@
     </div>
 </ng-template>
 
-<ng-template #pinnedCellsTemplate let-col>
-    @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {
+<ng-template #pinnedCellsTemplate let-col let-columns="columns">
+    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {
         <ng-template #cellTemplate>
             <igx-grid-cell
                 class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
index 2521cc28e58..1c37e46f225 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -5,7 +5,8 @@
     [hasMRL]="hasColumnLayouts"
     [activeDescendant]="activeDescendant"
     [width]="calcWidth"
-    [pinnedColumnCollection]="pinnedColumns"
+    [pinnedStartColumnCollection]="pinnedStartColumns"
+    [pinnedEndColumnCollection]="pinnedEndColumns"
     [unpinnedColumnCollection]="unpinnedColumns"
     (keydown.meta.c)="copyHandler($event)"
     (keydown.control.c)="copyHandler($event)"
@@ -28,7 +29,7 @@
         @if (moving && columnInDrag && pinnedColumns.length > 0) {
             <span
                 [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
-                class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
+                class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedStartWidth"></span>
         }
         <ng-template #pinnedRecordsTemplate>
             @if (data
@@ -139,12 +140,12 @@
 </div>
 
 <div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
-    <div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
+    <div class="igx-grid__scroll-start" [style.width.px]='pinnedStartWidth' [style.min-width.px]='pinnedStartWidth'></div>
     <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
         <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>
         </ng-template>
     </div>
-    <div class="igx-grid__scroll-end" [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
+    <div class="igx-grid__scroll-end" [style.width.px]='pinnedEndWidth' [style.min-width.px]='pinnedEndWidth' [hidden]="pinnedEndWidth === 0"></div>
 </div>
 
 <div class="igx-grid__footer" #footer>
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts
index 4f84dcda2a4..8fe08283d36 100644
--- a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts
@@ -334,8 +334,13 @@ export class GridFunctions {
         expect(tolerance).toBeLessThanOrEqual(1);
     }
 
-    public static verifyPinnedAreaWidth(grid: GridType, expectedWidth: number) {
-        const tolerance = Math.abs(expectedWidth - grid.pinnedWidth);
+    public static verifyPinnedStartAreaWidth(grid: GridType, expectedWidth: number) {
+        const tolerance = Math.abs(expectedWidth - grid.pinnedStartWidth);
+        expect(tolerance).toBeLessThanOrEqual(1);
+    }
+
+    public static verifyPinnedEndAreaWidth(grid: GridType, expectedWidth: number) {
+        const tolerance = Math.abs(expectedWidth - grid.pinnedEndWidth);
         expect(tolerance).toBeLessThanOrEqual(1);
     }
 
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
index 7c29ba15f5d..b499806a508 100644
--- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -13,7 +13,7 @@ import { IgxColumnComponent } from '../grids/columns/column.component';
 import { IgxFilteringOperand, IgxNumberFilteringOperand } from '../data-operations/filtering-condition';
 import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
 import { FilteringStrategy, IgxFilterItem } from '../data-operations/filtering-strategy';
-import { ISortingOptions, IgxExcelStyleHeaderIconDirective, IgxGridToolbarAdvancedFilteringComponent, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from '../grids/public_api';
+import { ColumnPinningPosition, ISortingOptions, IgxExcelStyleHeaderIconDirective, IgxGridToolbarAdvancedFilteringComponent, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from '../grids/public_api';
 import { IgxRowAddTextDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective } from '../grids/grid.rowEdit.directive';
 import { IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxGridExcelStyleFilteringComponent } from '../grids/filtering/excel-style/excel-style-filtering.component';
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
@@ -225,6 +225,27 @@ export class PinOnInitAndSelectionComponent extends GridWithSizeComponent {
     }
 }
 
+@Component({
+    template: GridTemplateStrings.declareGrid(` [autoGenerate]="autoGenerate" [height]="height" [width]="width"`, `${EventSubscriptions.columnInit}`, ''),
+    imports: [IgxGridComponent]
+})
+export class PinOnBothSidesInitComponent extends GridWithSizeComponent {
+    public override data = SampleTestData.contactInfoDataFull();
+    public override width = '800px';
+    public override height = '300px';
+
+    public selectedCell;
+    public columnInit(column) {
+        if (column.field === 'CompanyName' || column.field === 'ContactName') {
+            column.pinned = true;
+        }
+        if (column.field === 'CompanyName') {
+            column.pinningPosition = ColumnPinningPosition.End;
+        }
+        column.width = '200px';
+    }
+}
+
 @Component({
     template: `
         <igx-grid
diff --git a/src/app/grid-column-moving/grid-column-moving.sample.html b/src/app/grid-column-moving/grid-column-moving.sample.html
index f606d724d47..8db969a0d42 100644
--- a/src/app/grid-column-moving/grid-column-moving.sample.html
+++ b/src/app/grid-column-moving/grid-column-moving.sample.html
@@ -33,7 +33,7 @@ <h4>Sample 1</h4>
                     <igx-column [field]="c.field" [header]="c.field" [groupable]="c.groupable"
                         [resizable]="c.resizable" width="auto" [sortable]="c.sortable" [filterable]="c.filterable"
                         [editable]="true" [hidden]="c.hidden" [hasSummary]="c.summary" [minWidth]="'150px'" [maxWidth]="'400px'"
-                        [dataType]="c.type" [pinned]='c.pinned' [hidden]='c.hidden'>
+                        [dataType]="c.type" [pinned]='c.pinned' [hidden]='c.hidden' [pinningPosition]="c.pinningPosition">
                         <ng-template igxCell let-cell="cell">
                             @if (show) {
                                 <div>{{ cell.value}}</div>
diff --git a/src/app/grid-column-moving/grid-column-moving.sample.ts b/src/app/grid-column-moving/grid-column-moving.sample.ts
index 9465501ee7b..2771f54c5ee 100644
--- a/src/app/grid-column-moving/grid-column-moving.sample.ts
+++ b/src/app/grid-column-moving/grid-column-moving.sample.ts
@@ -3,7 +3,7 @@ import { FormsModule } from '@angular/forms';
 
 import { SAMPLE_DATA } from '../shared/sample-data';
 
-import { IgxButtonDirective, IgxButtonGroupComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxGridComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPaginatorComponent } from 'igniteui-angular';
+import { ColumnPinningPosition, IgxButtonDirective, IgxButtonGroupComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxGridComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPaginatorComponent } from 'igniteui-angular';
 
 @Component({
     providers: [],
@@ -76,11 +76,11 @@ export class GridColumnMovingSampleComponent implements OnInit {
             { field: 'ID', width: 150, resizable: true, sortable: false, filterable: true, groupable: true,
                 summary: true, type: 'string', pinned: false, hidden: true },
             { field: 'CompanyName', width: 150, resizable: true, sortable: true, filterable: true, groupable: true,
-                summary: true, type: 'string'},
+                summary: true, type: 'string', pinned: true , pinningPosition: ColumnPinningPosition.End},
             { field: 'ContactName', width: 150, resizable: true, sortable: true, filterable: true, groupable: true,
                 summary: true, type: 'string' },
             { field: 'ContactTitle', width: 150, resizable: true, sortable: true, filterable: true, groupable: true,
-                summary: true, type: 'string' },
+                summary: true, type: 'string', pinningPosition: ColumnPinningPosition.End },
             { field: 'Address', width: 150, resizable: true, sortable: true, filterable: true, groupable: true,
                 summary: true, type: 'string' },
             { field: 'City', width: 150, resizable: true, sortable: false, filterable: false, groupable: true,
diff --git a/src/app/grid-column-pinning/grid-column-pinning.sample.html b/src/app/grid-column-pinning/grid-column-pinning.sample.html
index 7ec8ecc9104..b1df3155ba0 100644
--- a/src/app/grid-column-pinning/grid-column-pinning.sample.html
+++ b/src/app/grid-column-pinning/grid-column-pinning.sample.html
@@ -21,7 +21,7 @@
                 }
                 @for (c of columns; track c) {
                     <igx-column [editable] = true [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned'
-                        [hidden]='c.hidden'>
+                        [hidden]='c.hidden' [pinningPosition]='c.pinningPosition'>
                     </igx-column>
                 }
             </igx-grid>
diff --git a/src/app/grid-column-pinning/grid-column-pinning.sample.ts b/src/app/grid-column-pinning/grid-column-pinning.sample.ts
index 78cb96eda90..e34efc4adf9 100644
--- a/src/app/grid-column-pinning/grid-column-pinning.sample.ts
+++ b/src/app/grid-column-pinning/grid-column-pinning.sample.ts
@@ -54,8 +54,8 @@ export class GridColumnPinningSampleComponent implements OnInit {
         this.columns = [
             { field: 'ID', width: '200px', hidden: false },
             { field: 'CompanyName', width: '200px' },
-            { field: 'ContactName', width: '200px', pinned: true },
-            { field: 'ContactTitle', width: '300px', pinned: true },
+            { field: 'ContactName', width: '200px', pinned: true, pinningPosition: ColumnPinningPosition.Start },
+            { field: 'ContactTitle', width: '300px', pinned: true, pinningPosition: ColumnPinningPosition.End },
             { field: 'Address', width: '250px' },
             { field: 'City', width: '200px' },
             { field: 'Region', width: '300px' },
diff --git a/src/app/grid-multi-row-layout/grid-mrl.sample.html b/src/app/grid-multi-row-layout/grid-mrl.sample.html
index 13968ed8760..c4f151383fe 100644
--- a/src/app/grid-multi-row-layout/grid-mrl.sample.html
+++ b/src/app/grid-multi-row-layout/grid-mrl.sample.html
@@ -3,7 +3,7 @@
         <igx-buttongroup [values]="sizes" (selected)="selectDensity($event)" style="display: block; width: 500px"></igx-buttongroup>
     </div>
     <igx-grid #grid [data]="data" [rowEditable]="true" [rowSelection]="selectionMode"
-            primaryKey="PostalCode" [width]="'100%'" [height]="'500px'">
+            primaryKey="PostalCode" [width]="'100%'" [height]="'500px'" [moving]="true">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
                 <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
@@ -13,17 +13,17 @@
         <igx-column-layout field='group1'>
             <igx-column [groupable]="true" [rowStart]="1" [colStart]="1" [rowEnd]="4" field="ID" [width]="'20%'" [resizable]="true" [minWidth]="'10%'" [maxWidth]="'30%'"></igx-column>
         </igx-column-layout>
-        <igx-column-layout field='group2'>
+        <igx-column-layout field='group2' [pinningPosition]="pinPos">
             <igx-column [editable]="true" [rowStart]="1" [colStart]="1" [colEnd]="3" field="CompanyName" [width]="'300px'" [resizable]="true"></igx-column>
             <igx-column [rowStart]="2" [colStart]="1" field="ContactName" [width]="'100px'" [resizable]="true"></igx-column>
             <igx-column [rowStart]="2" [colStart]="2" field="ContactTitle" [width]="'200px'" [resizable]="true"></igx-column>
             <igx-column [rowStart]="3" [colStart]="1" [colEnd]="3" field="Address" [width]="'300px'" [resizable]="true"></igx-column>
         </igx-column-layout>
-        <igx-column-layout>
+        <igx-column-layout field="group3">
             <igx-column [rowStart]="1" [colStart]="1" [colEnd]="3" [rowEnd]="3" field="City" [width]="'300px'"></igx-column>
             <igx-column [rowStart]="3" [colStart]="1"  [colEnd]="3" [sortable]="true" field="Region" [width]='"300px"'></igx-column>
         </igx-column-layout>
-        <igx-column-layout>
+        <igx-column-layout field="group4" [pinningPosition]="pinPos">
             <igx-column [rowStart]="1" [width]="'10%'" [resizable]="true" [colStart]="1" field="Country" [groupable]="true"></igx-column>
             <igx-column [rowStart]="1" [width]="'10%'" [resizable]="true" [colStart]="2" [sortable]="true" field="Phone"></igx-column>
             <igx-column [rowStart]="2" [resizable]="true" [colStart]="1" [colEnd]="3" [rowEnd]="4" [sortable]="true" field="Fax"></igx-column>
diff --git a/src/app/grid-multi-row-layout/grid-mrl.sample.ts b/src/app/grid-multi-row-layout/grid-mrl.sample.ts
index cffe9e55dd2..1f3821ace4c 100644
--- a/src/app/grid-multi-row-layout/grid-mrl.sample.ts
+++ b/src/app/grid-multi-row-layout/grid-mrl.sample.ts
@@ -1,5 +1,5 @@
 import { Component, HostBinding, ViewChild } from '@angular/core';
-import { GridSelectionMode, IgxActionStripComponent, IgxButtonDirective, IgxButtonGroupComponent, IgxColumnComponent, IgxColumnLayoutComponent, IgxGridComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular';
+import { ColumnPinningPosition, GridSelectionMode, IgxActionStripComponent, IgxButtonDirective, IgxButtonGroupComponent, IgxColumnComponent, IgxColumnLayoutComponent, IgxGridComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular';
 
 
 @Component({
@@ -15,6 +15,8 @@ export class GridMRLSampleComponent {
     @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
     private grid: IgxGridComponent;
 
+    public pinPos = ColumnPinningPosition.End;
+
     public width = null;
     public cols: Array<any> = [
         { field: 'ID', rowStart: 1, colStart: 1},
diff --git a/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.html b/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.html
index c5544724b72..8a74b80b056 100644
--- a/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.html
+++ b/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.html
@@ -1,15 +1,22 @@
 <igx-hierarchical-grid [showExpandAll]="true" [data]="localData" [autoGenerate]="true" height="800px"
     width="100%" #hGrid cellSelection="none"
     primaryKey="ID"
-    [rowEditable]="true">
+    [rowEditable]="true"
+    (columnInit)="columnInit($event)">
+    <igx-grid-toolbar class="size">
+        <igx-grid-toolbar-actions>
+            <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
+            <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
+        </igx-grid-toolbar-actions>
+        </igx-grid-toolbar>
     <igx-action-strip #actionstrip>
         <igx-grid-pinning-actions></igx-grid-pinning-actions>
         <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
     </igx-action-strip>
-    <igx-row-island #island key="childData" [autoGenerate]="true"
+    <igx-row-island #island key="childData" [autoGenerate]="true" (columnInit)="columnInit($event)"
         [allowFiltering]="true" [rowEditable]="true" primaryKey="ID">
 
-        <igx-row-island key="childData" [autoGenerate]="true"
+        <igx-row-island key="childData" [autoGenerate]="true" (columnInit)="columnInit($event)"
             [allowFiltering]="true" rowSelection="multiple" [rowEditable]="true" primaryKey="ID">
             <igx-action-strip #actionstrip2>
                 <igx-grid-editing-actions [asMenuItems]='true'></igx-grid-editing-actions>
diff --git a/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.ts b/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.ts
index b410f8a24ed..b4d4f7e6f6b 100644
--- a/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.ts
+++ b/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.ts
@@ -1,10 +1,11 @@
 import { Component, ChangeDetectorRef, AfterViewInit } from '@angular/core';
-import { IgxActionStripComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular';
+import { ColumnPinningPosition, IColumnsAutoGeneratedEventArgs, IgxActionStripComponent, IgxColumnComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular';
 
 @Component({
     selector: 'app-hierarchical-grid-add-row-sample',
     templateUrl: 'hierarchical-grid-add-row.sample.html',
-    imports: [IgxHierarchicalGridComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxRowIslandComponent]
+    imports: [IgxHierarchicalGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent,
+        IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxRowIslandComponent]
 })
 export class HierarchicalGridAddRowSampleComponent implements AfterViewInit {
     public localData = [];
@@ -23,6 +24,18 @@ export class HierarchicalGridAddRowSampleComponent implements AfterViewInit {
         this.cdr.detectChanges();
     }
 
+    public columnInit(e: IgxColumnComponent) {
+        if(e.field === 'ID') {
+            e.pinningPosition = ColumnPinningPosition.End;
+            e.pinned = true;
+        }
+
+        if(e.field === 'ProductName') {
+            e.pinningPosition = ColumnPinningPosition.Start;
+            e.pinned = true;
+        }
+    }
+
     public generateDataUneven(count: number, level: number, parendID: string = null) {
         const prods = [];
         const currLevel = level;
diff --git a/src/app/tree-grid/tree-grid.sample.html b/src/app/tree-grid/tree-grid.sample.html
index 364a0a14454..e5c0fbda7c9 100644
--- a/src/app/tree-grid/tree-grid.sample.html
+++ b/src/app/tree-grid/tree-grid.sample.html
@@ -3,7 +3,7 @@
         <igx-buttongroup [values]="sizes" (selected)="selectDensity($event)"></igx-buttongroup>
     </div>
 
-    <igx-tree-grid #grid1 selectionType="multi" [autoGenerate]="true" [batchEditing]="true" [data]="data"
+    <igx-tree-grid #grid1 selectionType="multi" (columnInit)="columnInit($event)" [autoGenerate]="true" [batchEditing]="true" [data]="data"
         childDataKey="ChildCompanies" primaryKey="ID" [expansionDepth]="1"
         [rowSelection]="selectionMode" [height]="'500px'"
         [allowFiltering]="true" [moving]="true" [filterMode]="'excelStyleFilter'" [filterStrategy]="filterStrategy">
diff --git a/src/app/tree-grid/tree-grid.sample.ts b/src/app/tree-grid/tree-grid.sample.ts
index 5fe222208f8..44989f7d246 100644
--- a/src/app/tree-grid/tree-grid.sample.ts
+++ b/src/app/tree-grid/tree-grid.sample.ts
@@ -3,7 +3,7 @@ import { FormsModule } from '@angular/forms';
 
 import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
 import { GridSearchBoxComponent } from '../grid-search-box/grid-search-box.component';
-import { IgxButtonGroupComponent, IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxPaginatorComponent, IgxSwitchComponent, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, GridSelectionMode, TreeGridFilteringStrategy, IgxExcelExporterService, IgxCsvExporterService, IgxExcelExporterOptions, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular';
+import { IgxButtonGroupComponent, IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxPaginatorComponent, IgxSwitchComponent, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, GridSelectionMode, TreeGridFilteringStrategy, IgxExcelExporterService, IgxCsvExporterService, IgxExcelExporterOptions, IgxCsvExporterOptions, CsvFileTypes, IgxColumnComponent, ColumnPinningPosition } from 'igniteui-angular';
 
 
 @Component({
@@ -36,6 +36,18 @@ export class TreeGridSampleComponent implements OnInit {
 
     }
 
+    public columnInit(e: IgxColumnComponent) {
+        if(e.field === 'ID') {
+            e.pinningPosition = ColumnPinningPosition.End;
+            e.pinned = true;
+        }
+
+        if(e.field === 'CompanyName') {
+            e.pinningPosition = ColumnPinningPosition.Start;
+            e.pinned = true;
+        }
+    }
+
     public ngOnInit(): void {
         this.selectionMode = GridSelectionMode.multiple;
         this.sizes = [