diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
index cf737e6cc4b..02144dad454 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
@@ -448,13 +448,13 @@
     //     @include grid-toolbar($grid-toolbar-theme-map);
     // }
 
-    @if is-used('igx-pivot-data-selector', $exclude) {
-        $pivot-data-selector-theme-map: pivot-data-selector-theme(
-            $schema: $schema,
-        );
-        $pivot-data-selector-theme-map: meta.call($theme-handler, $pivot-data-selector-theme-map);
-        @include pivot-data-selector($pivot-data-selector-theme-map);
-    }
+    // @if is-used('igx-pivot-data-selector', $exclude) {
+    //     $pivot-data-selector-theme-map: pivot-data-selector-theme(
+    //         $schema: $schema,
+    //     );
+    //     $pivot-data-selector-theme-map: meta.call($theme-handler, $pivot-data-selector-theme-map);
+    //     @include pivot-data-selector($pivot-data-selector-theme-map);
+    // }
 
     @if is-used('igx-highlight', $exclude) {
         $highlight-theme-map: highlight-theme(
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.scss b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.scss
new file mode 100644
index 00000000000..dd684163cd7
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.scss
@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts
index 64ebfce8054..b83f9eaf1dc 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts
@@ -7,6 +7,7 @@ import {
     Input,
     Output,
     Renderer2,
+    ViewEncapsulation,
     booleanAttribute
 } from "@angular/core";
 import { first } from "rxjs/operators";
@@ -83,7 +84,9 @@ interface IDataSelectorPanel {
  */
 @Component({
     selector: "igx-pivot-data-selector",
+    styleUrl: "pivot-data-selector.component.css",
     templateUrl: "./pivot-data-selector.component.html",
+    encapsulation: ViewEncapsulation.None,
     imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe]
 })
 export class IgxPivotDataSelectorComponent {
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/_base.scss b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/_base.scss
new file mode 100644
index 00000000000..167465ffee2
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/_base.scss
@@ -0,0 +1,221 @@
+@use 'sass:map';
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+@use './light/tokens' as *;
+
+$_theme: $material;
+
+@include layer(base) {
+    %actions {
+        user-select: none;
+        cursor: pointer;
+    }
+
+    @include b(igx-pivot-data-selector) {
+        display: flex;
+        flex-direction: column;
+        max-width: rem(280px);
+        background: var-get($_theme, 'background');
+        z-index: 0;
+
+        igx-input-group {
+            input {
+                transform: none;
+            }
+    
+            [igxPrefix] {
+                box-sizing: content-box;
+            }
+    
+            .igx-input-group__bundle-main {
+                padding-top: 0 !important;
+            }
+        }
+
+        > igx-list {
+            igx-display-container {
+                padding: rem(4px);
+            }
+
+            igx-list-item {
+                display: flex;
+                min-height: rem(28px);
+            }
+        }
+
+        .igx-expansion-panel__body {
+            position: relative;
+            height: rem(128px);
+            font-size: rem(14px);
+            padding: rem(4px);
+            overflow-y: auto;
+
+            igx-list {
+                height: auto;
+            }
+        }
+
+        .igx-expansion-panel__header-icon--start {
+            margin-inline-end: rem(8px);
+        }
+
+        igx-expansion-panel-title.igx-expansion-panel__header-title {
+            display: flex;
+
+            > h6 {
+                font-size: rem(12px);
+                margin-bottom: 0;
+            }
+        }
+
+        .igx-expansion-panel__header-inner {
+            background: var-get($_theme, 'header-color');
+            padding: rem(4px);
+
+            .dragOver & {
+                background: color($color: 'gray', $variant: 300);
+                box-shadow: inset 0 0 0 rem(1px) color($color: 'gray', $variant: 400);
+            }
+        }
+
+        igx-icon {
+            --size: var(--igx-icon-size, #{rem(18px)});
+        }
+
+        @include e(header) {
+            display: flex;
+            align-items: center;
+        }
+
+        @include e(header-extra) {
+            display: flex;
+            align-items: center;
+
+            igx-icon {
+                padding: 0 rem(8px);
+                box-sizing: content-box !important;
+            }
+    
+            .igx-chip__item {
+                height: sizable(rem(18px), rem(20px), rem(22px));
+            }
+    
+            .igx-chip__content {
+                padding: 0 rem(2px);
+            }
+        }
+
+        @include e(filter) {
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+
+            igx-list {
+                display: flex;
+                flex-direction: column;
+                padding: rem(8px) rem(4px);
+                min-height: rem(186px);
+                max-height: rem(208px);
+                overflow-y: auto;
+            }
+
+            igx-list-item {
+                display: flex;
+            }
+
+            igx-checkbox + span {
+                margin-inline-start: rem(8px);
+                line-height: rem(28px);
+            }
+        }
+
+        @include e(item) {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            min-height: rem(32px);
+            width: 100%;
+
+            .igx-drag--push & {
+                padding-top: rem(32px);
+            }
+        }
+
+        @include e(item-ghost) {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: rem(14px);
+            background: color($color: 'surface');
+            min-height: rem(32px);
+            height: auto;
+            padding: 0 rem(2px) 0 rem(4px);
+            cursor: grabbing;
+            box-shadow: elevation(24);
+            border: rem(1px) solid color($color: 'gray', $variant: 100);
+            border-radius: border-radius(rem(2px));
+            z-index: 10;
+
+            igx-icon {
+                --size: var(--igx-icon-size, #{rem(18px)});
+            }
+        }
+
+        @include e(item-ghost, $m: no-drop) {
+            cursor: no-drop;
+        }
+
+        @include e(item-ghost-text) {
+            display: flex;
+            align-items: center;
+
+            igx-icon {
+                margin-inline-end: rem(8px);
+            }
+        }
+
+        @include e(item-start) {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex: 0 1 100%;
+            margin-inline-end: rem(8px);
+            overflow: hidden;
+        }
+
+        @include e(item-end) {
+            display: flex;
+
+            igx-icon + igx-icon {
+                margin-inline-start: rem(8px);
+            }
+        }
+
+        @include e(item-text) {
+            @include ellipsis();
+
+            max-width: calc(100% - rem(18px) + rem(8px));
+            user-select: none;
+        }
+
+        @include e(action-sort) {
+            @extend %actions;
+        }
+
+        @include e(action-filter) {
+            @extend %actions;
+        }
+
+        @include e(action-summary) {
+            @extend %actions;
+        }
+
+        @include e(action-move) {
+            user-select: none;
+            cursor: grab;
+        }
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/dark/_index.scss
new file mode 100644
index 00000000000..fa02f9e6a50
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/dark/_index.scss
@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-pivot-data-selector, $tokens, dark);
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/dark/_tokens.scss
new file mode 100644
index 00000000000..3138251cec1
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/dark/_tokens.scss
@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/pivot-data-selector' as *;
+
+$material: digest-schema($dark-material-pivot-data-selector);
+$bootstrap: digest-schema($dark-bootstrap-pivot-data-selector);
+$fluent: digest-schema($dark-fluent-pivot-data-selector);
+$indigo: digest-schema($dark-indigo-pivot-data-selector);
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/light/_index.scss b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/light/_index.scss
new file mode 100644
index 00000000000..35d7d416534
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/light/_index.scss
@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-pivot-data-selector, $tokens, light);
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/light/_tokens.scss
new file mode 100644
index 00000000000..cf7069a5a0c
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/light/_tokens.scss
@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/pivot-data-selector' as *;
+
+$base: digest-schema($light-pivot-data-selector);
+$material: digest-schema($material-pivot-data-selector);
+$bootstrap: digest-schema($bootstrap-pivot-data-selector);
+$fluent: digest-schema($fluent-pivot-data-selector);
+$indigo: digest-schema($indigo-pivot-data-selector);
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/shared/_bootstrap.scss
new file mode 100644
index 00000000000..bac40aa9f8d
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/shared/_bootstrap.scss
@@ -0,0 +1,14 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $bootstrap;
+
+@include themed-block(igx-pivot-data-selector, bootstrap) {
+    @include e(filter) {
+        igx-input-group {
+            padding: rem(4px);
+        }
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/shared/_index.scss
new file mode 100644
index 00000000000..e3fc8588fdf
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/shared/_index.scss
@@ -0,0 +1,2 @@
+@forward 'bootstrap';
+@forward 'material';
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/shared/_material.scss
new file mode 100644
index 00000000000..19d81bc0771
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/themes/shared/_material.scss
@@ -0,0 +1,16 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $material;
+
+@include themed-block(igx-pivot-data-selector, material) {
+    .igx-checkbox__composite-wrapper {
+        padding: 0;
+    }
+
+    igx-input-group [igxPrefix] {
+        padding-inline-end: rem(16px) !important;
+    }
+}