diff --git a/.idx/integrations.json b/.idx/integrations.json
new file mode 100644
index 0000000..c668c7e
--- /dev/null
+++ b/.idx/integrations.json
@@ -0,0 +1,4 @@
+{
+  "cloud_run_deploy": {},
+  "gemini_api": {}
+}
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d55347d..039c05b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -55,7 +55,7 @@ The melody should be about: `;
       <span>Prompt:</span>
       <input placeholder="Enter your prompt" #prompt class="input">
     </label>
-    &nbsp;<button [disabled]="loading || !prompt" class="button" (click)="generateTune(prompt.value); prompt.value = ''">
+    &nbsp;<button [disabled]="loading || !prompt.value" class="button" (click)="generateTune(prompt.value); prompt.value = ''">
       @if (loading) {
         Loading...
       } @else {
@@ -63,9 +63,19 @@ The melody should be about: `;
       }
     </button>
     <br>
+    <span>Examples:</span>
+    <button class="button" (click)="prompt.value = 'A fast-paced, upbeat melody in a major key.'">Upbeat</button>
+    <button class="button" (click)="prompt.value = 'A slow, melancholic melody in a minor key.'">Melancholic</button>
+    <button class="button" (click)="prompt.value = 'A mysterious and suspenseful melody.'">Mysterious</button>
+    <br>
     <div class="error">{{ error }}</div>
     <br>
     <app-keyboard/>
+    <br>
+    <div class="output">
+      <h2>Generated Melody</h2>
+      <pre>{{ generatedTune }}</pre>
+    </div>
   `,
   styleUrl: 'app.component.css'
 })
@@ -74,18 +84,22 @@ export class AppComponent {
   protected apiKey = viewChild.required<ElementRef<HTMLInputElement>>('apiKey');
   protected loading = false;
   protected error = '';
+  protected generatedTune = '';
 
   async generateTune(prompt: string) {
+    if (!this.apiKey().nativeElement.value) {
+      this.error = 'Please enter an API key.';
+      return;
+    }
+    this.error = '';
+    this.generatedTune = '';
+
     prompt = basePrompt + prompt;
 
-    /**
-     * For production apps, make sure you use the Gemini API key **only**
-     * on the server. Find more at https://ai.google.dev/gemini-api/docs/get-started/web
-     */
     const genAI = new GoogleGenerativeAI(this.apiKey().nativeElement.value);
 
     const model = genAI.getGenerativeModel({
-      model: 'gemini-1.5-pro-latest'
+      model: 'gemini-pro'
     });
     model.generationConfig.responseMimeType = 'application/json';
     
@@ -97,9 +111,10 @@ export class AppComponent {
       const text = response.text();
       const tune = JSON.parse(text);
 
+      this.generatedTune = JSON.stringify(tune, null, 2);
       this.keyboard().playMelody(tune);
     } catch (e: unknown) {
-      this.error = <string>e;
+      this.error = e as string;
     } finally {
       this.loading = false;
     }
diff --git a/src/styles.css b/src/styles.css
index f879613..c878122 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -15,3 +15,35 @@
  */
 
 /* You can add global styles to this file, and also import other style files */
+
+:root {
+  --mat-app-background-color: #121212;
+  --mat-card-background-color: #1e1e1e;
+  --mat-card-header-text-color: #ffffff;
+  --mat-card-subtitle-text-color: #b3b3b3;
+  --mat-card-content-text-color: #ffffff;
+  --mat-primary-color: #bb86fc;
+  --mat-accent-color: #03dac6;
+  --mat-warn-color: #cf6679;
+}
+
+body {
+  background-color: var(--mat-app-background-color);
+  color: white;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  margin: 0;
+  padding: 24px;
+}
+
+.mat-card {
+  background-color: var(--mat-card-background-color);
+  color: var(--mat-card-content-text-color);
+}
+
+.mat-card-header {
+  color: var(--mat-card-header-text-color);
+}
+
+.mat-card-subtitle {
+  color: var(--mat-card-subtitle-text-color);
+}