diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts
index 6f8fbf3..718c82f 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts
@@ -1,12 +1,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { DataGridComponent } from './data-grid/data-grid.component';
 
 
 
 @NgModule({
-  declarations: [],
+  declarations: [DataGridComponent],
   imports: [
     CommonModule
-  ]
+  ],
+  exports: [DataGridComponent]
 })
 export class DataGridModule { }
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
new file mode 100644
index 0000000..1b479e7
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
@@ -0,0 +1,5 @@
+<table>
+    <tr>
+        <th>some header</th>
+    </tr>
+</table>
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.scss b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts
new file mode 100644
index 0000000..bacfb5a
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ps-data-grid',
+  templateUrl: './data-grid.component.html',
+  styleUrls: ['./data-grid.component.scss']
+})
+export class DataGridComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
index 93abbc1..b671c28 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
@@ -2,4 +2,5 @@
  * Public API Surface of ngx-cdk-ui
  */
 
-export * from './lib/data-grid/data-grid.module';
\ No newline at end of file
+export * from './lib/data-grid/data-grid.module';
+export * from './lib/data-grid/data-grid/data-grid.component';
\ No newline at end of file
diff --git a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html
index 745cbb9..7d51f4f 100644
--- a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html
+++ b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html
@@ -1 +1,5 @@
-<p>data-grid-demo-home works!</p>
+<h1>
+    This is a demo for a grid.
+</h1>
+
+<ps-data-grid></ps-data-grid>
\ No newline at end of file
diff --git a/src/app/data-grid-demo/data-grid-demo.module.ts b/src/app/data-grid-demo/data-grid-demo.module.ts
index 91c24e9..043c20e 100644
--- a/src/app/data-grid-demo/data-grid-demo.module.ts
+++ b/src/app/data-grid-demo/data-grid-demo.module.ts
@@ -3,13 +3,15 @@ import { CommonModule } from '@angular/common';
 
 import { DataGridDemoRoutingModule } from './data-grid-demo-routing.module';
 import { DataGridDemoHomeComponent } from './data-grid-demo-home/data-grid-demo-home.component';
+import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
 
 
 @NgModule({
   declarations: [ DataGridDemoHomeComponent],
   imports: [
     CommonModule,
-    DataGridDemoRoutingModule
+    DataGridDemoRoutingModule,
+    DataGridModule
   ]
 })
 export class DataGridDemoModule { }