diff --git a/documentation/content/Components/code-style-highlight-lines.md b/documentation/content/Components/code-style-highlight-lines.md
index 54617436..810c548d 100644
--- a/documentation/content/Components/code-style-highlight-lines.md
+++ b/documentation/content/Components/code-style-highlight-lines.md
@@ -25,7 +25,7 @@ Another example,
 
     :::html hl_lines="2"
     <div
-      class="photoswipe-gallery"
+      class="elegant-gallery"
       itemscope
       itemtype="http://schema.org/ImageGallery"
     >
diff --git a/documentation/content/Components/code-style.md b/documentation/content/Components/code-style.md
index c54f2564..f2e8487f 100644
--- a/documentation/content/Components/code-style.md
+++ b/documentation/content/Components/code-style.md
@@ -21,7 +21,7 @@ of [Gruvbox](https://github.com/morhetz/gruvbox) theme for syntax highlighting.
 
 ```html
 <div
-  class="photoswipe-gallery"
+  class="elegant-gallery"
   itemscope
   itemtype="http://schema.org/ImageGallery"
 >
diff --git a/documentation/content/Components/photoswipe-raw-gallery.md b/documentation/content/Components/photoswipe-raw-gallery.md
index ca3f33ad..857e9b1f 100644
--- a/documentation/content/Components/photoswipe-raw-gallery.md
+++ b/documentation/content/Components/photoswipe-raw-gallery.md
@@ -10,7 +10,7 @@ Category: Components
 
 Elegant integrates with [PhotoSwipe](https://photoswipe.com/) to create gallery of images. Here is an example.
 
-<div class="photoswipe-gallery" itemscope itemtype="http://schema.org/ImageGallery">
+<div class="elegant-gallery" itemscope itemtype="http://schema.org/ImageGallery">
     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
         <a href="https://i.picsum.photos/id/1019/5472/3648.jpg" itemprop="contentUrl" data-size="5472x3648">
             <img src="https://i.picsum.photos/id/1019/200/200.jpg" itemprop="thumbnail" alt="Image description" />
@@ -53,7 +53,7 @@ Here is the require HTML with two images in it.
 
 ```html
 <div
-  class="photoswipe-gallery"
+  class="elegant-gallery"
   itemscope
   itemtype="http://schema.org/ImageGallery"
 >
@@ -101,7 +101,7 @@ Here is the require HTML with two images in it.
 </div>
 ```
 
-<div class="photoswipe-gallery" itemscope itemtype="http://schema.org/ImageGallery">
+<div class="elegant-gallery" itemscope itemtype="http://schema.org/ImageGallery">
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
   <a href="https://i.picsum.photos/id/1019/5472/3648.jpg" itemprop="contentUrl" data-size="5472x3648">
    <img src="https://i.picsum.photos/id/1019/100/100.jpg" itemprop="thumbnail" alt="Image description" />
@@ -121,13 +121,13 @@ Here is the require HTML with two images in it.
 
 ```html
 <div
-  class="photoswipe-gallery"
+  class="elegant-gallery"
   itemscope
   itemtype="http://schema.org/ImageGallery"
 ></div>
 ```
 
-Notice the class, `photoswipe-gallery`. You should not change it.
+Notice the class, `elegant-gallery`. You should not change it.
 
 ## Define `figure`
 
diff --git a/static/css/gallery.css b/static/css/gallery.css
index 77f27c91..5cafd488 100644
--- a/static/css/gallery.css
+++ b/static/css/gallery.css
@@ -1,4 +1,4 @@
-div.photoswipe-gallery {
+div.elegant-gallery {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
diff --git a/static/photoswipe/photoswipe-array-from-dom.js b/static/photoswipe/photoswipe-array-from-dom.js
index 9322d32d..c11a9948 100644
--- a/static/photoswipe/photoswipe-array-from-dom.js
+++ b/static/photoswipe/photoswipe-array-from-dom.js
@@ -200,4 +200,4 @@ var initPhotoSwipeFromDOM = function(gallerySelector) {
 };
 
 // execute above function
-initPhotoSwipeFromDOM(".photoswipe-gallery");
+initPhotoSwipeFromDOM(".elegant-gallery");