diff --git a/angular.json b/angular.json
index 5870332..13e4caa 100644
--- a/angular.json
+++ b/angular.json
@@ -22,7 +22,9 @@
               "src/favicon.ico",
               "src/assets"
             ],
-            "styles": [
+            "styles": ["node_modules/primeicons/primeicons.css",
+            "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+            "node_modules/primeng/resources/primeng.min.css",
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"
diff --git a/package-lock.json b/package-lock.json
index ba31630..e2f6a71 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,8 +23,9 @@
         "@popperjs/core": "^2.10.2",
         "bootstrap": "^5.2.0",
         "openai": "^3.1.0",
+        "primeicons": "^6.0.1",
+        "primeng": "^14.2.2",
         "rxjs": "~7.5.0",
-        "tslib": "^2.3.0",
         "zone.js": "~0.11.4"
       },
       "devDependencies": {
@@ -38,6 +39,7 @@
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.0.0",
         "karma-jasmine-html-reporter": "~1.7.0",
+        "tslib": "^2.4.1",
         "typescript": "~4.7.2"
       }
     },
@@ -10015,6 +10017,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/primeicons": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
+      "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
+    },
+    "node_modules/primeng": {
+      "version": "14.2.2",
+      "resolved": "https://registry.npmjs.org/primeng/-/primeng-14.2.2.tgz",
+      "integrity": "sha512-CV7dWwpBYqMgKliryJ6+CJZgdawl04V1Cp5mQmziEedJVhMGPg/QwU2Fi0v7AS9i1uXQRI9c420BDn+yZ+GrDQ==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^14.0.0",
+        "@angular/core": "^14.0.0",
+        "@angular/forms": "^14.0.0",
+        "primeicons": "^6.0.1",
+        "rxjs": "^6.0.0 || ^7.0.0",
+        "zone.js": "^0.10.2 || ^0.11.0 || ^0.12.0"
+      }
+    },
     "node_modules/proc-log": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz",
@@ -19535,6 +19558,19 @@
       "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
       "dev": true
     },
+    "primeicons": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
+      "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
+    },
+    "primeng": {
+      "version": "14.2.2",
+      "resolved": "https://registry.npmjs.org/primeng/-/primeng-14.2.2.tgz",
+      "integrity": "sha512-CV7dWwpBYqMgKliryJ6+CJZgdawl04V1Cp5mQmziEedJVhMGPg/QwU2Fi0v7AS9i1uXQRI9c420BDn+yZ+GrDQ==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "proc-log": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz",
diff --git a/package.json b/package.json
index f97410d..9d2f69a 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,9 @@
     "@popperjs/core": "^2.10.2",
     "bootstrap": "^5.2.0",
     "openai": "^3.1.0",
+    "primeicons": "^6.0.1",
+    "primeng": "^14.2.2",
     "rxjs": "~7.5.0",
-    "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
@@ -40,6 +41,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
+    "tslib": "^2.4.1",
     "typescript": "~4.7.2"
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index eb26f6e..9b18ca8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -10,7 +10,7 @@ <h1> Generate <span>Image</span> from <span>Text</span></h1>
       <div class="col"></div>
       <div class="col-6">
         <div class="form-group">
-          <textarea class="form-control" id="textArea" rows="4" 
+          <textarea class="form-control" id="textArea" rows="4"  [(ngModel)]="promtUser"
           placeholder="Please Enter the description of the image you want to generate. A.I. will generate for You!😊"></textarea>
         </div>
       </div>
@@ -20,11 +20,18 @@ <h1> Generate <span>Image</span> from <span>Text</span></h1>
       <div class="col"></div>
       <div class="col-6" >
         <div class="form-group" style="float:right;" id="buttonDiv">
-          <button >Create</button>
+          <button (click)="onClickButton()" [disabled]="hidden">Create</button>
         </div>
       </div>
       <div class="col"></div>
     </div>
+    <div class="row mt-2" *ngIf="imgURL.length > 0">
+      <div class="col"></div>
+      <div class="col-6">
+        <img [src]="imgURL" class="img-fluid" >
+      </div>
+      <div class="col"></div>
+    </div>
   </div>
 </div>
 <div class="footer mt-0 mb-0 pt-0 pb-0 text-center">
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index de66003..9291ea6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -12,18 +12,26 @@ import { reqBody } from './req-res.interface';
 export class AppComponent implements OnInit{
   dateNow : Date = new Date();
   hidden: boolean = false;
+  imgURL: string = '';
+  promtUser: string = '';
   constructor(public http : HttpClient){
 
   }
 
   ngOnInit(): void {
-    // this.getImage();
+   
+  }
+  onClickButton(){
+    this.getImage();
+  }
+  getImage(){
+    this.hidden = true;
+    let val : reqBody = {prompt: this.promtUser, n: 1, size: '1024x1024'}
+    this.createImage(val).subscribe(resp => {
+      this.imgURL = resp.data[0].url;
+      this.hidden = false;
+  })
   }
-  // .subscribe(resp => {
-  //   console.log(resp.data[0].url);
-  // })
-  
-  
   
   createImage(inputBody: reqBody): Observable<any> {
     const headers = { 'Authorization': `Bearer ${environment.OPENAI_API_KEY}` };
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4d41a2a..21bc9aa 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,6 +5,9 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { HttpClientModule } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
+import {ImageModule} from 'primeng/image';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -14,7 +17,10 @@ import { HttpClientModule } from '@angular/common/http';
     BrowserModule,
     AppRoutingModule,
     NgbModule,
-    HttpClientModule
+    HttpClientModule,
+    CommonModule,
+    ImageModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/tsconfig.json b/tsconfig.json
index ff06eae..fb25b2b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,6 +27,6 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": false
   }
 }