diff --git a/src/app/components/help-listing/help-listing.component.html b/src/app/components/help-listing/help-listing.component.html
new file mode 100644
index 0000000..e059179
--- /dev/null
+++ b/src/app/components/help-listing/help-listing.component.html
@@ -0,0 +1,19 @@
+<ion-accordion-group>
+  <ion-accordion *ngFor="let item of helpData;" value="{{item.uid}}">
+    <ion-item class="arcord_head" slot="header" color="light">
+      <ion-label>{{item.title}}</ion-label>
+    </ion-item>
+    <div class="ion-padding" slot="content">
+      <div  [innerHTML]="item.msg"></div>
+      <div *ngIf="item.vid !='' ">
+        <iframe width="100%" height="auto"
+                [src]="item.vid"
+                title="YouTube video player" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen>
+        </iframe>
+      </div>
+    </div>
+  </ion-accordion>
+
+</ion-accordion-group>
diff --git a/src/app/components/help-listing/help-listing.component.scss b/src/app/components/help-listing/help-listing.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/help-listing/help-listing.component.spec.ts b/src/app/components/help-listing/help-listing.component.spec.ts
new file mode 100644
index 0000000..98118dd
--- /dev/null
+++ b/src/app/components/help-listing/help-listing.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { HelpListingComponent } from './help-listing.component';
+
+describe('HelpListingComponent', () => {
+  let component: HelpListingComponent;
+  let fixture: ComponentFixture<HelpListingComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HelpListingComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HelpListingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/help-listing/help-listing.component.ts b/src/app/components/help-listing/help-listing.component.ts
new file mode 100644
index 0000000..ce93c1d
--- /dev/null
+++ b/src/app/components/help-listing/help-listing.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import {HelpDataService} from "../../store/help-data.service";
+
+@Component({
+  selector: 'app-help-listing',
+  templateUrl: './help-listing.component.html',
+  styleUrls: ['./help-listing.component.scss'],
+})
+export class HelpListingComponent implements OnInit {
+
+  helpData:any;
+  constructor(public helpDataService:HelpDataService) {
+
+    this.helpData = this.helpDataService.helpDataResult;
+
+  }
+
+  ngOnInit() {}
+
+}