diff --git a/live-editing/configs/ChipConfigGenerator.ts b/live-editing/configs/ChipConfigGenerator.ts
index 459d52685..4628a0020 100644
--- a/live-editing/configs/ChipConfigGenerator.ts
+++ b/live-editing/configs/ChipConfigGenerator.ts
@@ -15,6 +15,12 @@ export class ChipConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/"
         }));
 
+        configs.push(new Config({
+            component: 'ChipOutlinedComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/"
+        }));
+
         configs.push(new Config({
             component: 'ChipVariantsComponent',
             appConfig: BaseAppConfig,
diff --git a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.scss b/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.scss
index 3693122d0..8c1bf8489 100644
--- a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.scss
+++ b/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.scss
@@ -9,5 +9,5 @@ igx-chip {
 }
 
 .sample-container {
-    padding-top: 30px;
+    padding: 1rem 0 0 1rem;
 }
diff --git a/src/app/data-display/chip/chip-outlined/chip-outlined.component.html b/src/app/data-display/chip/chip-outlined/chip-outlined.component.html
new file mode 100644
index 000000000..c9d6b7529
--- /dev/null
+++ b/src/app/data-display/chip/chip-outlined/chip-outlined.component.html
@@ -0,0 +1,13 @@
+<div class="sample-container">
+  @for (item of variants; track item.label) {
+    <igx-chip
+      [id]="item.label"
+      [variant]="item.variant"
+      [selectable]="true"
+      outlined="true"
+      [removable]="true"
+      (remove)="chipRemoved($event)">
+      {{ item.label }}
+    </igx-chip>
+  }
+</div>
diff --git a/src/app/data-display/chip/chip-outlined/chip-outlined.component.scss b/src/app/data-display/chip/chip-outlined/chip-outlined.component.scss
new file mode 100644
index 000000000..a17f5cbe5
--- /dev/null
+++ b/src/app/data-display/chip/chip-outlined/chip-outlined.component.scss
@@ -0,0 +1,7 @@
+.sample-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 5px;
+    padding: 1rem 0 0 1rem;
+}
diff --git a/src/app/data-display/chip/chip-outlined/chip-outlined.component.ts b/src/app/data-display/chip/chip-outlined/chip-outlined.component.ts
new file mode 100644
index 000000000..3cbf555bd
--- /dev/null
+++ b/src/app/data-display/chip/chip-outlined/chip-outlined.component.ts
@@ -0,0 +1,30 @@
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { IBaseChipEventArgs, IgxChipComponent, IgxChipTypeVariant } from 'igniteui-angular/chips';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxPrefixDirective } from 'igniteui-angular/input-group';
+
+
+@Component({
+    selector: 'app-chip-outlined',
+    styleUrls: ['./chip-outlined.component.scss'],
+    templateUrl: './chip-outlined.component.html',
+    imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective]
+})
+
+export class ChipOutlinedComponent {
+    private cdr = inject(ChangeDetectorRef);
+
+    public variants: { variant: IgxChipTypeVariant | undefined; label: string }[] = [
+        { variant: undefined, label: 'Default' },
+        { variant: IgxChipTypeVariant.PRIMARY, label: 'Primary' },
+        { variant: IgxChipTypeVariant.INFO, label: 'Info' },
+        { variant: IgxChipTypeVariant.SUCCESS, label: 'Success' },
+        { variant: IgxChipTypeVariant.WARNING, label: 'Warning' },
+        { variant: IgxChipTypeVariant.DANGER, label: 'Danger' }
+    ];
+
+    public chipRemoved(event: IBaseChipEventArgs) {
+        this.variants = this.variants.filter(v => v.label !== event.owner.id);
+        this.cdr.detectChanges();
+    }
+}
diff --git a/src/app/data-display/chip/chip-simple/chip-simple.component.scss b/src/app/data-display/chip/chip-simple/chip-simple.component.scss
index e175fb08c..5e88f1179 100644
--- a/src/app/data-display/chip/chip-simple/chip-simple.component.scss
+++ b/src/app/data-display/chip/chip-simple/chip-simple.component.scss
@@ -3,5 +3,5 @@ igx-chip {
 }
 
 .sample-container {
-    padding-top: 30px;
+    padding: 1rem 0 0 1rem;
 }
diff --git a/src/app/data-display/chip/chip-tailwind-styling/layout.scss b/src/app/data-display/chip/chip-tailwind-styling/layout.scss
index 619dc177e..a201d613a 100644
--- a/src/app/data-display/chip/chip-tailwind-styling/layout.scss
+++ b/src/app/data-display/chip/chip-tailwind-styling/layout.scss
@@ -1,4 +1,4 @@
-igx-chip {
-  margin-right: 5px;
-  margin-top: 20px;
+igx-chips-area {
+    gap: 0.5rem;
+    padding: 1rem 0 0 1rem;
 }
\ No newline at end of file
diff --git a/src/app/data-display/chip/chip-variants/chip-variants.component.scss b/src/app/data-display/chip/chip-variants/chip-variants.component.scss
index fce0b6a0d..a17f5cbe5 100644
--- a/src/app/data-display/chip/chip-variants/chip-variants.component.scss
+++ b/src/app/data-display/chip/chip-variants/chip-variants.component.scss
@@ -3,6 +3,5 @@
     flex-wrap: wrap;
     align-items: center;
     gap: 5px;
-    padding-top: 15px;
-    padding-left: 10px;
+    padding: 1rem 0 0 1rem;
 }
diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index b5d24e620..39ceef1ea 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -12,6 +12,7 @@ export const dataDisplayRoutesData = {
     "badge-styling": { displayName: "Badge Styling", parentName: "Badge" },
     "badge-tailwind-styling": { displayName: "Badge Tailwind Styling", parentName: "Badge" },
     "chip-simple": { displayName: "Chip Simple", parentName: "Chip" },
+    "chip-outlined": { displayName: "Chip Outlined", parentName: "Chip" },
     "chip-variants": { displayName: "Chip Variants", parentName: "Chip" },
     "chip-area-sample": { displayName: "Chip Area Sample", parentName: "Chip" },
     "chip-styling": { displayName: "Chip Styling", parentName: "Chip" },
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index 514fb6943..de1538d48 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -10,6 +10,7 @@ import { BadgeStylingComponent } from './badge/badge-styling/badge-styling.compo
 import { BadgeTailwindStylingComponent } from './badge/badge-tailwind-styling/badge-tailwind-styling.component';
 import { ChipAreaSampleComponent } from './chip/chip-area-sample/chip-area-sample.component';
 import { ChipSimpleComponent } from './chip/chip-simple/chip-simple.component';
+import { ChipOutlinedComponent } from './chip/chip-outlined/chip-outlined.component';
 import { ChipVariantsComponent } from './chip/chip-variants/chip-variants.component';
 import { ChipStylingSampleComponent } from './chip/chip-styling/chip-styling.component';
 import { ChipTailwindStylingSampleComponent } from './chip/chip-tailwind-styling/chip-tailwind-styling.component';
@@ -112,6 +113,11 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['chip-simple'],
         path: 'chip-simple'
     },
+    {
+        component: ChipOutlinedComponent,
+        data: dataDisplayRoutesData['chip-outlined'],
+        path: 'chip-outlined'
+    },
     {
         component: ChipVariantsComponent,
         data: dataDisplayRoutesData['chip-variants'],