diff --git a/docs/changelog.md b/docs/changelog.md
index 5224d8e..a8bd78d 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -7,6 +7,12 @@
 #### New Features
 
 * **New Effect: Broken Glass.** Shatter your windows into a shower sharp shards! This effect can be configured so that the shards fly away from your mouse pointer position!
+* The effect-configuration pages of the preferences dialog now have **Preview Buttons** which con be used to, well, preview the current settings (without having to enable the effect first).
+
+#### Other Enhancements
+
+* Added a menu entry with a link to the guide for creating new effect types.
+* Added a new option to the Matrix Effect: **Vertical Overshooting**: This can add some vertical variation to the start and end position of the letter drops.
 
 ## [Burn My Window 9](https://github.com/schneegans/Burn-My-Windows/releases/tag/v9)
 
diff --git a/docs/how-to-create-new-effects.md b/docs/how-to-create-new-effects.md
index a2a1f30..c1a14f5 100644
--- a/docs/how-to-create-new-effects.md
+++ b/docs/how-to-create-new-effects.md
@@ -138,8 +138,9 @@ var SimpleFade = class SimpleFade {
   // This is called by the preferences dialog. It loads the settings page for this effect,
   // binds all properties to the settings and appends the page to the main stack of the
   // preferences dialog.
-  static initPreferences(dialog) {
+  static getPreferences(dialog) {
     // Empty for now... Code is added here later in the tutorial!
+    return null;
   }
 
   // ---------------------------------------------------------------- API for extension.js
@@ -248,7 +249,7 @@ There should be two sliders in this example: The animation duration and the widt
 If your effect supports GNOME Shell 3.3x _and_ GNOME Shell 40+, you will have to provide two `*.ui` files for this.
 This is because starting with GNOME Shell 40, the preference dialog uses GTK4, before it used to use GTK3.
 Usually, there are only a few minor differences between the two files.
-We will load the respective file in the `initPreferences()` method of your new effect class.
+We will load the respective file in the `getPreferences()` method of your new effect class.
 
 Just save the code below to `resources/ui/gtk3/SimpleFade.ui` and `resources/ui/gtk4/SimpleFade.ui` respectively.
 Remember to replace any occurrence of `simple-fade` with your effect's nick-name!
@@ -276,10 +277,6 @@ Remember to replace any occurrence of `simple-fade` with your effect's nick-name
 
   <object class="GtkBox" id="simple-fade-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
@@ -421,10 +418,6 @@ Remember to replace any occurrence of `simple-fade` with your effect's nick-name
 
   <object class="GtkBox" id="simple-fade-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
@@ -528,10 +521,10 @@ Remember to replace any occurrence of `simple-fade` with your effect's nick-name
 
 ### Loading the Preferences Page
 
-In order to load the above `*.ui` files, add the following code to your effect's `initPreferences()` method.
+In order to load the above `*.ui` files, add the following code to your effect's `getPreferences()` method.
 
 ```javascript
-static initPreferences(dialog) {
+static getPreferences(dialog) {
 
   // Add the settings page to the builder.
   dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/SimpleFade.ui`);
@@ -541,12 +534,9 @@ static initPreferences(dialog) {
   dialog.bindAdjustment('simple-fade-animation-time');
   dialog.bindAdjustment('simple-fade-width');
 
-  // Finally, append the settings page to the main stack.
-  const stack = dialog.getBuilder().get_object('main-stack');
-  stack.add_titled(
-      dialog.getBuilder().get_object(SimpleFade.getNick() + '-prefs'),
-      SimpleFade.getNick(), SimpleFade.getLabel());
-  }
+  // Finally, return the new settings page.
+  return dialog.getBuilder().get_object('simple-fade-prefs');
+}
 ```
 
 Once this is in place, you can kill the extension-preferences process and re-open the settings.
diff --git a/extension.js b/extension.js
index 990bcf2..e9dd32a 100644
--- a/extension.js
+++ b/extension.js
@@ -82,6 +82,14 @@ class Extension {
     this._origWindowTime = imports.ui.windowManager.DESTROY_WINDOW_ANIMATION_TIME;
     this._origDialogTime = imports.ui.windowManager.DIALOG_DESTROY_WINDOW_ANIMATION_TIME;
 
+    // Reset the dialog destroy time if the corresponding setting gets disabled.
+    this._settings.connect('changed::destroy-dialogs', () => {
+      if (!this._settings.get_boolean('destroy-dialogs')) {
+        imports.ui.windowManager.DIALOG_DESTROY_WINDOW_ANIMATION_TIME =
+            this._origDialogTime;
+      }
+    });
+
     // We will use extensionThis to refer to the extension inside the patched methods of
     // the WorkspacesView.
     const extensionThis = this;
@@ -208,26 +216,49 @@ class Extension {
       }
 
       // We do nothing if a dialog got closed and we should not burn them.
+      const shouldDestroyDialogs = this._settings.get_boolean('destroy-dialogs');
       const isDialogWindow =
           actor.meta_window.window_type == Meta.WindowType.MODAL_DIALOG ||
           actor.meta_window.window_type == Meta.WindowType.DIALOG;
 
-      if (!this._settings.get_boolean('destroy-dialogs') && isDialogWindow) {
+      // If an effect is to be previewed, we have to affect dialogs es well. This is
+      // because the preview window is a dialog window...
+      const previewNick = this._settings.get_string('close-preview-effect');
+
+      if (isDialogWindow && !shouldDestroyDialogs && previewNick == '') {
         return;
       }
 
-      // Create a list of all currently enabled effects.
-      const enabledEffects = ALL_EFFECTS.filter(Effect => {
-        return this._settings.get_boolean(`${Effect.getNick()}-close-effect`);
-      });
+      // Now we have to choose an effect.
+      this._effect = null;
 
-      // Nothing is enabled...
-      if (enabledEffects.length == 0) {
-        return;
+      // First we check if an effect is to be previewed.
+      if (previewNick != '') {
+        this._effect = ALL_EFFECTS.find(Effect => {
+          return Effect.getNick() == previewNick;
+        });
+
+        // Only preview the effect once.
+        this._settings.set_string('close-preview-effect', '');
+
+      } else {
+
+        // Else we choose a random effect from all enabled effects. Therefore, we first
+        // create a list of all currently enabled effects.
+        const enabled = ALL_EFFECTS.filter(Effect => {
+          return this._settings.get_boolean(`${Effect.getNick()}-close-effect`);
+        });
+
+        // And then choose a random effect.
+        if (enabled.length > 0) {
+          this._effect = enabled[Math.floor(Math.random() * enabled.length)];
+        }
       }
 
-      // Choose a random effect.
-      this._effect = enabledEffects[Math.floor(Math.random() * enabledEffects.length)];
+      // If nothing was enabled, we have to do nothing :)
+      if (this._effect == null) {
+        return;
+      }
 
       // The effect usually will choose to override the present transitions on the actor.
       const transitionConfig = this._effect.getCloseTransition(actor, this._settings);
@@ -256,7 +287,7 @@ class Extension {
       // We set the currently used time here, so that others can get an idea how long this
       // will take...
       const duration = transition.get_duration();
-      if (isDialogWindow) {
+      if (isDialogWindow && shouldDestroyDialogs) {
         imports.ui.windowManager.DIALOG_DESTROY_WINDOW_ANIMATION_TIME = duration;
       } else {
         imports.ui.windowManager.DESTROY_WINDOW_ANIMATION_TIME = duration;
diff --git a/prefs.js b/prefs.js
index 23cfbf8..5e18e8f 100644
--- a/prefs.js
+++ b/prefs.js
@@ -13,7 +13,7 @@
 
 'use strict';
 
-const {Gio, Gtk, Gdk} = imports.gi;
+const {Gio, Gtk, Gdk, GLib, GObject} = imports.gi;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me             = imports.misc.extensionUtils.getCurrentExtension();
@@ -32,6 +32,9 @@ const ALL_EFFECTS = [
   Me.imports.src.Wisps.Wisps,
 ];
 
+// This template widget class is defined at the bottom of this file.
+var BurnMyWindowsEffectPage = null;
+
 //////////////////////////////////////////////////////////////////////////////////////////
 // The preferences dialog is organized in pages, each of which is loaded from a         //
 // separate ui file. There's one page with general options, all other paged are loaded  //
@@ -47,6 +50,19 @@ var PreferencesDialog = class PreferencesDialog {
     this._resources = Gio.Resource.load(Me.path + '/resources/burn-my-windows.gresource');
     Gio.resources_register(this._resources);
 
+    // Load the CSS file for the settings dialog.
+    const styleProvider = Gtk.CssProvider.new();
+    styleProvider.load_from_resource('/css/gtk.css');
+    if (utils.isGTK4()) {
+      Gtk.StyleContext.add_provider_for_display(
+          Gdk.Display.get_default(), styleProvider,
+          Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+    } else {
+      Gtk.StyleContext.add_provider_for_screen(
+          Gdk.Screen.get_default(), styleProvider,
+          Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+    }
+
     // Make sure custom icons are found.
     if (utils.isGTK4()) {
       Gtk.IconTheme.get_for_display(Gdk.Display.get_default()).add_resource_path('/img');
@@ -54,6 +70,9 @@ var PreferencesDialog = class PreferencesDialog {
       Gtk.IconTheme.get_default().add_resource_path('/img');
     }
 
+    // Register the template widgets used in the settings dialog.
+    this._registerCustomClasses();
+
     // Store a reference to the settings object.
     this._settings = ExtensionUtils.getSettings();
 
@@ -66,10 +85,20 @@ var PreferencesDialog = class PreferencesDialog {
     this.bindSwitch('destroy-dialogs');
 
     // Add all other effect pages.
+    const stack = this._builder.get_object('main-stack');
     ALL_EFFECTS.forEach(Effect => {
       const [minMajor, minMinor] = Effect.getMinShellVersion();
       if (utils.shellVersionIsAtLeast(minMajor, minMinor)) {
-        Effect.initPreferences(this);
+
+        const page = new BurnMyWindowsEffectPage(Effect, this);
+
+        // Add the Effect's preferences (if any).
+        const preferences = Effect.getPreferences(this);
+        if (preferences) {
+          this.gtkBoxAppend(page, preferences);
+        }
+
+        stack.add_titled(page, Effect.getNick(), Effect.getLabel());
       }
     });
 
@@ -104,6 +133,7 @@ var PreferencesDialog = class PreferencesDialog {
         addAction('homepage',      'https://github.com/Schneegans/Burn-My-Windows');
         addAction('changelog',     'https://github.com/Schneegans/Burn-My-Windows/blob/main/docs/changelog.md');
         addAction('bugs',          'https://github.com/Schneegans/Burn-My-Windows/issues');
+        addAction('new-effect',    'https://github.com/Schneegans/Burn-My-Windows/blob/main/docs/how-to-create-new-effects.md');
         addAction('donate-paypal', 'https://www.paypal.com/donate/?hosted_button_id=3F7UFL8KLVPXE');
         addAction('donate-github', 'https://github.com/sponsors/Schneegans');
         // clang-format on
@@ -211,6 +241,17 @@ var PreferencesDialog = class PreferencesDialog {
     this._bindResetButton(settingsKey);
   }
 
+  // ----------------------------------------------------------------- GTK3 / GTK4 helpers
+
+  // Appends the given child widget to the given Gtk.Box.
+  gtkBoxAppend(box, child) {
+    if (utils.isGTK4()) {
+      box.append(child);
+    } else {
+      box.pack_start(child, false, false, 0);
+    }
+  }
+
   // ----------------------------------------------------------------------- private stuff
 
   // Searches for a reset button for the given settings key and make it reset the settings
@@ -235,6 +276,71 @@ var PreferencesDialog = class PreferencesDialog {
 
     this._bindResetButton(settingsKey);
   }
+
+  // Initializes template widgets used by the preferences dialog.
+  _registerCustomClasses() {
+
+    // Each effect page is based on a template widget. This template contains the title
+    // and the preview button.
+    // clang-format off
+    BurnMyWindowsEffectPage =
+      GObject.registerClass({
+        GTypeName: 'BurnMyWindowsEffectPage',
+        Template: `resource:///ui/${utils.getGTKString()}/effectPage.ui`,
+        InternalChildren: ['label', 'button'],
+      },
+      class BurnMyWindowsEffectPage extends Gtk.Box {
+        _init(Effect, dialog) {
+          super._init();
+
+          // Set the effect's name as label.
+          this._label.label = Effect.getLabel();
+
+          // Open the preview window once the preview button is clicked.
+          this._button.connect('clicked', () => {
+
+            // Set the to-be-previewed effect.
+            dialog.getSettings().set_string('close-preview-effect', Effect.getNick());
+
+            // Create the preview-window.
+            const window = new Gtk.Window({
+              title: `Preview for ${Effect.getLabel()}`,
+              default_width: 800,
+              default_height: 450,
+              modal: true,
+              transient_for: utils.isGTK4() ? this._button.get_root() :
+                                              this._button.get_toplevel()
+            });
+
+            const box = new Gtk.Box({
+              orientation: Gtk.Orientation.VERTICAL,
+              valign: Gtk.Align.CENTER,
+              spacing: 10,
+            });
+
+            const label = Gtk.Label.new('Close this Window to Preview the Effect!');
+            label.get_style_context().add_class('large-title');
+
+            const image = new Gtk.Image({
+              icon_name: 'burn-my-windows-symbolic',
+              pixel_size: 128,
+            });
+
+            dialog.gtkBoxAppend(box, image);
+            dialog.gtkBoxAppend(box, label);
+
+            if (utils.isGTK4()) {
+              window.set_child(box);
+            } else {
+              window.add(box);
+            }
+
+            window.show();
+          });
+        }
+      });
+    // clang-format on
+  }
 }
 
 // Nothing to do for now...
diff --git a/resources/css/gtk.css b/resources/css/gtk.css
new file mode 100644
index 0000000..3acf2ee
--- /dev/null
+++ b/resources/css/gtk.css
@@ -0,0 +1,3 @@
+.pill-button {
+    border-radius: 9999px;
+}
\ No newline at end of file
diff --git a/resources/ui/common/main-menu.ui b/resources/ui/common/main-menu.ui
index 4ba062b..0d8a0b8 100644
--- a/resources/ui/common/main-menu.ui
+++ b/resources/ui/common/main-menu.ui
@@ -10,12 +10,16 @@
         <attribute name="label" translatable="yes">View Changelog</attribute>
         <attribute name="action">prefs.changelog</attribute>
       </item>
+    </section>
+    <section>
       <item>
         <attribute name="label" translatable="yes">Report a Bug</attribute>
         <attribute name="action">prefs.bugs</attribute>
       </item>
-    </section>
-    <section>
+      <item>
+        <attribute name="label" translatable="yes">Create a Custom Effect</attribute>
+        <attribute name="action">prefs.new-effect</attribute>
+      </item>
       <submenu>
         <attribute name="label" translatable="yes">Donate</attribute>
         <item>
diff --git a/resources/ui/gtk3/EnergizeA.ui b/resources/ui/gtk3/EnergizeA.ui
index b292863..79afebc 100644
--- a/resources/ui/gtk3/EnergizeA.ui
+++ b/resources/ui/gtk3/EnergizeA.ui
@@ -17,10 +17,6 @@
 
   <object class="GtkBox" id="energize-a-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
diff --git a/resources/ui/gtk3/EnergizeB.ui b/resources/ui/gtk3/EnergizeB.ui
index 080d2b6..051821d 100644
--- a/resources/ui/gtk3/EnergizeB.ui
+++ b/resources/ui/gtk3/EnergizeB.ui
@@ -17,10 +17,6 @@
 
   <object class="GtkBox" id="energize-b-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
diff --git a/resources/ui/gtk3/Fire.ui b/resources/ui/gtk3/Fire.ui
index 688285c..4b43025 100644
--- a/resources/ui/gtk3/Fire.ui
+++ b/resources/ui/gtk3/Fire.ui
@@ -24,10 +24,6 @@
 
   <object class="GtkBox" id="fire-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
@@ -81,19 +77,6 @@
                 </child>
               </object>
             </child>
-          </object>
-        </child>
-      </object>
-    </child>
-
-    <child>
-      <object class="GtkFrame">
-        <child>
-          <object class="GtkListBox">
-            <property name="selection-mode">none</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
             <child>
               <object class="GtkListBoxRow">
diff --git a/resources/ui/gtk3/TVEffect.ui b/resources/ui/gtk3/TVEffect.ui
index b992120..adebe01 100644
--- a/resources/ui/gtk3/TVEffect.ui
+++ b/resources/ui/gtk3/TVEffect.ui
@@ -10,10 +10,6 @@
 
   <object class="GtkBox" id="tv-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
diff --git a/resources/ui/gtk3/Wisps.ui b/resources/ui/gtk3/Wisps.ui
index c14f1ff..ff096ae 100644
--- a/resources/ui/gtk3/Wisps.ui
+++ b/resources/ui/gtk3/Wisps.ui
@@ -17,10 +17,6 @@
 
   <object class="GtkBox" id="wisps-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
diff --git a/resources/ui/gtk3/effectPage.ui b/resources/ui/gtk3/effectPage.ui
new file mode 100644
index 0000000..2ec5311
--- /dev/null
+++ b/resources/ui/gtk3/effectPage.ui
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="3.0" />
+
+  <template class="BurnMyWindowsEffectPage" parent="GtkBox">
+    <property name="orientation">vertical</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="hexpand">1</property>
+    <property name="spacing">10</property>
+
+    <child>
+      <object class="GtkBox">
+        <child>
+          <object class="GtkLabel" id="label">
+            <property name="xalign">0</property>
+            <property name="hexpand">1</property>
+            <style>
+              <class name="large-title" />
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button">
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkBox">
+                <property name="margin_start">8</property>
+                <property name="margin_end">8</property>
+                <property name="spacing">6</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="icon_name">media-playback-start-symbolic</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="halign">start</property>
+                    <property name="label" translatable="yes">Preview this Effect</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <style>
+              <class name="suggested-action" />
+              <class name="pill-button" />
+            </style>
+          </object>
+        </child>
+      </object>
+    </child>
+
+  </template>
+
+</interface>
\ No newline at end of file
diff --git a/resources/ui/gtk4/BrokenGlass.ui b/resources/ui/gtk4/BrokenGlass.ui
index 7b77ca2..55c30eb 100644
--- a/resources/ui/gtk4/BrokenGlass.ui
+++ b/resources/ui/gtk4/BrokenGlass.ui
@@ -3,10 +3,6 @@
 
   <object class="GtkBox" id="broken-glass-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
diff --git a/resources/ui/gtk4/EnergizeA.ui b/resources/ui/gtk4/EnergizeA.ui
index 92911d9..5236da0 100644
--- a/resources/ui/gtk4/EnergizeA.ui
+++ b/resources/ui/gtk4/EnergizeA.ui
@@ -3,10 +3,6 @@
 
   <object class="GtkBox" id="energize-a-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
diff --git a/resources/ui/gtk4/EnergizeB.ui b/resources/ui/gtk4/EnergizeB.ui
index 77f1e4d..786afcb 100644
--- a/resources/ui/gtk4/EnergizeB.ui
+++ b/resources/ui/gtk4/EnergizeB.ui
@@ -3,10 +3,6 @@
 
   <object class="GtkBox" id="energize-b-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
diff --git a/resources/ui/gtk4/Fire.ui b/resources/ui/gtk4/Fire.ui
index 346b2ee..52c503a 100644
--- a/resources/ui/gtk4/Fire.ui
+++ b/resources/ui/gtk4/Fire.ui
@@ -3,10 +3,6 @@
 
   <object class="GtkBox" id="fire-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
@@ -42,20 +38,6 @@
                 </child>
               </object>
             </child>
-          </object>
-        </child>
-      </object>
-    </child>
-
-    <child>
-      <object class="GtkFrame">
-        <child>
-          <object class="GtkListBox">
-            <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
             <child>
               <object class="GtkListBoxRow">
diff --git a/resources/ui/gtk4/Matrix.ui b/resources/ui/gtk4/Matrix.ui
index 7f5a570..d15e81a 100644
--- a/resources/ui/gtk4/Matrix.ui
+++ b/resources/ui/gtk4/Matrix.ui
@@ -3,10 +3,6 @@
 
   <object class="GtkBox" id="matrix-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
@@ -156,6 +152,52 @@
               </object>
             </child>
 
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Vertical Overshooting</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="matrix-overshoot">
+                            <property name="upper">1.0</property>
+                            <property name="lower">0.0</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-matrix-overshoot">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
             <child>
               <object class="GtkListBoxRow">
                 <property name="activatable">0</property>
diff --git a/resources/ui/gtk4/TRexAttack.ui b/resources/ui/gtk4/TRexAttack.ui
index 2bfe567..b77e7f6 100644
--- a/resources/ui/gtk4/TRexAttack.ui
+++ b/resources/ui/gtk4/TRexAttack.ui
@@ -3,10 +3,6 @@
 
   <object class="GtkBox" id="trex-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
diff --git a/resources/ui/gtk4/TVEffect.ui b/resources/ui/gtk4/TVEffect.ui
index c64ecef..f49f0bc 100644
--- a/resources/ui/gtk4/TVEffect.ui
+++ b/resources/ui/gtk4/TVEffect.ui
@@ -3,10 +3,6 @@
 
   <object class="GtkBox" id="tv-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
diff --git a/resources/ui/gtk4/Wisps.ui b/resources/ui/gtk4/Wisps.ui
index fc89c31..8e5bcb2 100644
--- a/resources/ui/gtk4/Wisps.ui
+++ b/resources/ui/gtk4/Wisps.ui
@@ -3,10 +3,6 @@
 
   <object class="GtkBox" id="wisps-prefs">
     <property name="orientation">vertical</property>
-    <property name="margin-start">60</property>
-    <property name="margin-end">60</property>
-    <property name="margin-top">60</property>
-    <property name="margin-bottom">60</property>
 
     <child>
       <object class="GtkFrame">
diff --git a/resources/ui/gtk4/effectPage.ui b/resources/ui/gtk4/effectPage.ui
new file mode 100644
index 0000000..f166da6
--- /dev/null
+++ b/resources/ui/gtk4/effectPage.ui
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0" />
+
+  <template class="BurnMyWindowsEffectPage" parent="GtkBox">
+    <property name="orientation">vertical</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="hexpand">1</property>
+    <property name="spacing">10</property>
+
+    <child>
+      <object class="GtkBox">
+        <child>
+          <object class="GtkLabel" id="label">
+            <property name="xalign">0</property>
+            <property name="hexpand">1</property>
+            <style>
+              <class name="large-title" />
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button">
+            <property name="valign">center</property>
+            <property name="child">
+              <object class="GtkBox">
+                <property name="margin_start">8</property>
+                <property name="margin_end">8</property>
+                <property name="spacing">6</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="icon_name">media-playback-start-symbolic</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="halign">start</property>
+                    <property name="label" translatable="yes">Preview this Effect</property>
+                  </object>
+                </child>
+              </object>
+            </property>
+            <style>
+              <class name="suggested-action" />
+              <class name="pill-button" />
+            </style>
+          </object>
+        </child>
+      </object>
+    </child>
+
+  </template>
+
+</interface>
\ No newline at end of file
diff --git a/schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml b/schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml
index dbe403a..86f3998 100644
--- a/schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml
+++ b/schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml
@@ -13,6 +13,12 @@
       <description>Set to true to burn dialogs as well.</description>
     </key>
 
+    <key name="close-preview-effect" type="s">
+      <default>""</default>
+      <summary>Close Preview Effect</summary>
+      <description>The effect with this nick will be used for the next window-close animation.</description>
+    </key>
+
     <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
     <!-- Fire Options                                                                  -->
     <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
@@ -117,6 +123,12 @@
       <description>The color matrix trails.</description>
     </key>
 
+    <key name="matrix-overshoot" type="d">
+      <default>0.25</default>
+      <summary>Matrix Overshoot</summary>
+      <description>The vertical overshooting of the matrix effect.</description>
+    </key>
+
     <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
     <!-- TV Effect Options                                                             -->
     <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
diff --git a/src/BrokenGlass.js b/src/BrokenGlass.js
index 48b6c22..aa77df0 100644
--- a/src/BrokenGlass.js
+++ b/src/BrokenGlass.js
@@ -60,7 +60,7 @@ var BrokenGlass = class BrokenGlass {
   // This is called by the preferences dialog. It loads the settings page for this effect,
   // binds all properties to the settings and appends the page to the main stack of the
   // preferences dialog.
-  static initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource('/ui/gtk4/BrokenGlass.ui');
@@ -72,11 +72,8 @@ var BrokenGlass = class BrokenGlass {
     dialog.bindAdjustment('broken-glass-blow-force');
     dialog.bindSwitch('broken-glass-use-pointer');
 
-    // Finally, append the settings page to the main stack.
-    const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(
-        dialog.getBuilder().get_object('broken-glass-prefs'), BrokenGlass.getNick(),
-        BrokenGlass.getLabel());
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('broken-glass-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js
diff --git a/src/EnergizeA.js b/src/EnergizeA.js
index c1c0913..cbceeb7 100644
--- a/src/EnergizeA.js
+++ b/src/EnergizeA.js
@@ -57,7 +57,7 @@ var EnergizeA = class EnergizeA {
   // This is called by the preferences dialog. It loads the settings page for this effect,
   // binds all properties to the settings and appends the page to the main stack of the
   // preferences dialog.
-  static initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/EnergizeA.ui`);
@@ -67,11 +67,8 @@ var EnergizeA = class EnergizeA {
     dialog.bindAdjustment('energize-a-scale');
     dialog.bindColorButton('energize-a-color');
 
-    // Finally, append the settings page to the main stack.
-    const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(
-        dialog.getBuilder().get_object('energize-a-prefs'), EnergizeA.getNick(),
-        EnergizeA.getLabel());
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('energize-a-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js
diff --git a/src/EnergizeB.js b/src/EnergizeB.js
index afb6365..4592679 100644
--- a/src/EnergizeB.js
+++ b/src/EnergizeB.js
@@ -57,7 +57,7 @@ var EnergizeB = class EnergizeB {
   // This is called by the preferences dialog. It loads the settings page for this effect,
   // binds all properties to the settings and appends the page to the main stack of the
   // preferences dialog.
-  static initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/EnergizeB.ui`);
@@ -67,11 +67,8 @@ var EnergizeB = class EnergizeB {
     dialog.bindAdjustment('energize-b-scale');
     dialog.bindColorButton('energize-b-color');
 
-    // Finally, append the settings page to the main stack.
-    const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(
-        dialog.getBuilder().get_object('energize-b-prefs'), EnergizeB.getNick(),
-        EnergizeB.getLabel());
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('energize-b-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js
diff --git a/src/Fire.js b/src/Fire.js
index 2cf1b44..a04310c 100644
--- a/src/Fire.js
+++ b/src/Fire.js
@@ -61,7 +61,7 @@ var Fire = class Fire {
   // This is called by the preferences dialog. It loads the settings page for this effect,
   // binds all properties to the settings and appends the page to the main stack of the
   // preferences dialog.
-  static initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/Fire.ui`);
@@ -89,10 +89,8 @@ var Fire = class Fire {
     // Initialize the fire-preset dropdown.
     Fire._createFirePresets(dialog);
 
-    // Finally, append the settings page to the main stack.
-    const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(
-        dialog.getBuilder().get_object('fire-prefs'), Fire.getNick(), Fire.getLabel());
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('fire-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js
diff --git a/src/Matrix.js b/src/Matrix.js
index 9ae7dad..678d5ce 100644
--- a/src/Matrix.js
+++ b/src/Matrix.js
@@ -61,7 +61,7 @@ var Matrix = class Matrix {
   // This is called by the preferences dialog. It loads the settings page for this effect,
   // binds all properties to the settings and appends the page to the main stack of the
   // preferences dialog.
-  static initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource('/ui/gtk4/Matrix.ui');
@@ -70,14 +70,12 @@ var Matrix = class Matrix {
     dialog.bindAdjustment('matrix-animation-time');
     dialog.bindAdjustment('matrix-scale');
     dialog.bindAdjustment('matrix-randomness');
+    dialog.bindAdjustment('matrix-overshoot');
     dialog.bindColorButton('matrix-trail-color');
     dialog.bindColorButton('matrix-tip-color');
 
-    // Finally, append the settings page to the main stack.
-    const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(
-        dialog.getBuilder().get_object('matrix-prefs'), Matrix.getNick(),
-        Matrix.getLabel());
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('matrix-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js
@@ -91,7 +89,12 @@ var Matrix = class Matrix {
   // the actor - usually windows are faded to transparency and scaled down slightly by
   // GNOME Shell. For this effect, windows should neither be scaled nor faded.
   static getCloseTransition(actor, settings) {
-    return {'opacity': {to: 255}, 'scale-x': {to: 1.0}, 'scale-y': {to: 1.0}};
+    const yScale = 1.0 + settings.get_double('matrix-overshoot');
+    return {
+      'opacity': {to: 255},
+      'scale-x': {to: 1.0},
+      'scale-y': {from: yScale, to: yScale}
+    };
   }
 }
 
@@ -146,6 +149,7 @@ if (utils.isInShellProcess()) {
         const float LETTER_SIZE           = ${settings.get_int('matrix-scale')};
         const float LETTER_FLICKER_SPEED  = 2.0;
         const float RANDOMNESS            = ${settings.get_double('matrix-randomness')};
+        const float OVERSHOOT             = ${settings.get_double('matrix-overshoot')};
 
         // This returns a flickering grid of random letters.
         float getText(vec2 fragCoord) {
@@ -164,37 +168,45 @@ if (utils.isInShellProcess()) {
         // to one below each drop and to zero above it. This second value is used for fading
         // the window texture. 
         vec2 getRain(vec2 fragCoord) {
-          vec2 coords = fragCoord * vec2(uSizeX, uSizeY);
-          coords.x -= mod(coords.x, LETTER_SIZE);
-
-          float delay = fract(sin(coords.x)*78.233) * mix(0.0, 1.0, RANDOMNESS);
-          float speed = fract(cos(coords.x)*12.989) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
-
-          float distToDrop  = (uProgress*2-delay)*speed - fragCoord.y;
+          float column = cogl_tex_coord_in[0].x * uSizeX;
+          column -= mod(column, LETTER_SIZE);
 
+          float delay = fract(sin(column)*78.233) * mix(0.0, 1.0, RANDOMNESS);
+          float speed = fract(cos(column)*12.989) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
+          
+          float distToDrop  = (uProgress*2-delay)*speed - cogl_tex_coord_in[0].y;
+          
           float rainAlpha   = distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0;
           float windowAlpha = 1 - clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH;
+          
+          // Fade at window borders.
+          rainAlpha *= getAbsoluteEdgeMask(EDGE_FADE);
+          
+          // Add some variation to the drop start and end position.
+          float shorten = fract(sin(column+42.0)*33.423) * mix(0.0, OVERSHOOT*0.25, RANDOMNESS);
+          rainAlpha *= smoothstep(0, 1, clamp(cogl_tex_coord_in[0].y / shorten, 0, 1));
+          rainAlpha *= smoothstep(0, 1, clamp((1.0 - cogl_tex_coord_in[0].y) / shorten, 0, 1));
 
           return vec2(rainAlpha, windowAlpha);
         }
 
         void main() {
 
+          vec2 coords = cogl_tex_coord_in[0].st;
+          coords.y = coords.y * (OVERSHOOT + 1.0) - OVERSHOOT * 0.5;
+
           // Get a cool matrix effect. See comments for those methods above.
-          vec2  rain = getRain(cogl_tex_coord_in[0].st);
-          float text = getText(cogl_tex_coord_in[0].st);
+          vec2  rain = getRain(coords);
+          float text = getText(coords);
 
           // Get the window texture and fade it according to the effect mask.
-          cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * rain.y;
+          cogl_color_out = texture2D(uTexture, coords) * rain.y;
 
           // This is used to fade out the remaining trails in the end.
           float finalFade = 1-clamp((uProgress-FINAL_FADE_START_TIME)/
                                     (1-FINAL_FADE_START_TIME), 0, 1);
           float rainAlpha = finalFade * rain.x;
 
-          // Fade at window borders.
-          rainAlpha *= getAbsoluteEdgeMask(EDGE_FADE);
-
           // Add the matrix effect to the window.
           vec3 trailColor = vec3(${trailColor.red / 255}, 
                                  ${trailColor.green / 255}, 
diff --git a/src/TRexAttack.js b/src/TRexAttack.js
index 5c8a478..380c675 100644
--- a/src/TRexAttack.js
+++ b/src/TRexAttack.js
@@ -59,7 +59,7 @@ var TRexAttack = class TRexAttack {
   // This is called by the preferences dialog. It loads the settings page for this effect,
   // binds all properties to the settings and appends the page to the main stack of the
   // preferences dialog.
-  static initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource('/ui/gtk4/TRexAttack.ui');
@@ -71,11 +71,8 @@ var TRexAttack = class TRexAttack {
     dialog.bindAdjustment('claw-scratch-count');
     dialog.bindAdjustment('claw-scratch-warp');
 
-    // Finally, append the settings page to the main stack.
-    const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(
-        dialog.getBuilder().get_object('trex-prefs'), TRexAttack.getNick(),
-        TRexAttack.getLabel());
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('trex-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js
diff --git a/src/TVEffect.js b/src/TVEffect.js
index 12bd8e9..b171caf 100644
--- a/src/TVEffect.js
+++ b/src/TVEffect.js
@@ -59,7 +59,7 @@ var TVEffect = class TVEffect {
   // This is called by the preferences dialog. It loads the settings page for this effect,
   // binds all properties to the settings and appends the page to the main stack of the
   // preferences dialog.
-  static initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/TVEffect.ui`);
@@ -68,11 +68,8 @@ var TVEffect = class TVEffect {
     dialog.bindAdjustment('tv-animation-time');
     dialog.bindColorButton('tv-effect-color');
 
-    // Finally, append the settings page to the main stack.
-    const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(
-        dialog.getBuilder().get_object('tv-prefs'), TVEffect.getNick(),
-        TVEffect.getLabel());
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('tv-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js
diff --git a/src/Wisps.js b/src/Wisps.js
index 87d6e2a..030339f 100644
--- a/src/Wisps.js
+++ b/src/Wisps.js
@@ -58,7 +58,7 @@ var Wisps = class Wisps {
   // This is called by the preferences dialog. It loads the settings page for this effect,
   // binds all properties to the settings and appends the page to the main stack of the
   // preferences dialog.
-  static initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/Wisps.ui`);
@@ -68,10 +68,8 @@ var Wisps = class Wisps {
     dialog.bindAdjustment('wisps-scale');
     dialog.bindColorButton('wisps-color');
 
-    // Finally, append the settings page to the main stack.
-    const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(
-        dialog.getBuilder().get_object('wisps-prefs'), Wisps.getNick(), Wisps.getLabel());
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('wisps-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js