diff --git a/icon/accept_all.svg b/icon/accept_all.svg
new file mode 100644
index 0000000..b8f9be7
--- /dev/null
+++ b/icon/accept_all.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#ff13dc;fill-opacity:0;}.cls-2{fill:#32cd32;}.cls-3{fill:none;}.cls-4{fill:#464646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="check_all"><rect id="Canvas" class="cls-1" width="18" height="18"/><path class="cls-2" d="M13.32,10.06a3.25,3.25,0,1,0,3.25,3.25,3.25,3.25,0,0,0-3.25-3.25Zm-.86,5.23L11,13.78a.19.19,0,0,1,0-.26l.38-.38a.19.19,0,0,1,.26,0l1,1,2.23-2.23a.19.19,0,0,1,.26,0l.38.38a.19.19,0,0,1,0,.26l-2.74,2.74A.19.19,0,0,1,12.46,15.29Z"/><path class="cls-3" d="M3.74,7.78,9,10.46l5.26-2.68L16.56,9c.06,0,.09.07.09.11v-4s0,.08-.09.11L9.21,8.91a.45.45,0,0,1-.42,0L1.44,5.18c-.12-.07-.12-.17,0-.23L8.79,1.21A.5.5,0,0,1,9,1.16H1.35v7.9s0-.08.09-.11Z"/><path class="cls-3" d="M1.44,13.18q-.09-.06-.09-.12V17H9a.39.39,0,0,1-.21-.06Z"/><path class="cls-3" d="M9.21,16.91A.39.39,0,0,1,9,17h3a3.94,3.94,0,0,1-1.3-.8Z"/><path class="cls-3" d="M16.56,5c.06,0,.09.07.09.11V1.16H9a.5.5,0,0,1,.21.05Z"/><path class="cls-3" d="M15.16,9.89a4,4,0,0,1,1.49,1.41V9.06s0,.08-.09.12Z"/><path class="cls-3" d="M3.74,11.78,9,14.46l.53-.27a3.59,3.59,0,0,1-.12-.88,3.19,3.19,0,0,1,.06-.53l-.26.13a.45.45,0,0,1-.42,0L1.44,9.18q-.09-.06-.09-.12v4s0-.08.09-.11Z"/><path class="cls-4" d="M1.44,5c-.12.06-.12.16,0,.23L8.79,8.91a.45.45,0,0,0,.42,0l7.35-3.74c.06,0,.09-.07.09-.11h0s0-.08-.09-.11L9.21,1.21A.5.5,0,0,0,9,1.16H9a.5.5,0,0,0-.21.05Z"/><path class="cls-4" d="M10.69,16.17a3.84,3.84,0,0,1-1.16-2L9,14.46,3.74,11.78,1.44,13c-.06,0-.09.07-.09.11s0,.08.09.12l7.35,3.73a.4.4,0,0,0,.42,0Z"/><path class="cls-4" d="M8.79,12.91a.45.45,0,0,0,.42,0l.26-.13a3.89,3.89,0,0,1,3.85-3.37,3.82,3.82,0,0,1,1.84.48l1.4-.71q.09-.06.09-.12h0s0-.08-.09-.11l-2.3-1.17L9,10.46,3.74,7.78,1.44,9c-.06,0-.09.07-.09.11s0,.08.09.12Z"/></g></g></svg>
\ No newline at end of file
diff --git a/icon/accept_selected.svg b/icon/accept_selected.svg
new file mode 100644
index 0000000..30342c6
--- /dev/null
+++ b/icon/accept_selected.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#ff13dc;fill-opacity:0;}.cls-2{fill:#32cd32;}.cls-3{fill:#464646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="check_one"><rect id="Canvas" class="cls-1" width="18" height="18"/><path class="cls-2" d="M13.32,10.06a3.25,3.25,0,1,0,3.25,3.25,3.25,3.25,0,0,0-3.25-3.25Zm-.86,5.23L11,13.78a.19.19,0,0,1,0-.26l.38-.38a.19.19,0,0,1,.26,0l1,1,2.23-2.23a.19.19,0,0,1,.26,0l.38.38a.19.19,0,0,1,0,.26l-2.74,2.74A.19.19,0,0,1,12.46,15.29Z"/><path class="cls-3" d="M16.65,9.06s0-.08-.09-.11L9.21,5.21a.51.51,0,0,0-.42,0L3.71,7.8,1.44,9c-.12.06-.12.16,0,.23l7.35,3.73a.45.45,0,0,0,.42,0l.26-.13a3.89,3.89,0,0,1,3.85-3.37,3.82,3.82,0,0,1,1.84.48l1.4-.71q.09-.06.09-.12Z"/></g></g></svg>
\ No newline at end of file
diff --git a/icon/camera_icon.svg b/icon/camera_icon.svg
new file mode 100644
index 0000000..ad13b59
--- /dev/null
+++ b/icon/camera_icon.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;fill-opacity:0;}
+	.st1{fill:#FFFFFF;}
+</style>
+<rect id="Canvas" class="st0" width="18" height="18"/>
+<path class="st1" d="M9,6C7.3,6,6,7.3,6,9s1.3,3,3,3s3-1.3,3-3S10.7,6,9,6z"/>
+<path class="st1" d="M16.5,4h-3l-1.7-1.8C11.7,2.1,11.6,2,11.4,2H6.6C6.4,2,6.3,2.1,6.2,2.2L4.5,4h-3C1.2,4,1,4.2,1,4.5v10
+	C1,14.8,1.2,15,1.5,15h15c0.3,0,0.5-0.2,0.5-0.5v-10C17,4.2,16.8,4,16.5,4z M9,13.1c-2.3,0-4.1-1.8-4.1-4.1c0-2.3,1.8-4.1,4.1-4.1
+	c2.3,0,4.1,1.8,4.1,4.1S11.3,13.1,9,13.1L9,13.1z"/>
+</svg>
diff --git a/icon/discard_all.svg b/icon/discard_all.svg
new file mode 100644
index 0000000..e290f41
--- /dev/null
+++ b/icon/discard_all.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#ff13dc;fill-opacity:0;}.cls-2{fill:#ff4500;}.cls-3{fill:#464646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="cross_all"><rect id="Canvas" class="cls-1" width="18" height="18"/><path class="cls-2" d="M13.32,10.06a3.25,3.25,0,1,0,3.25,3.25A3.25,3.25,0,0,0,13.32,10.06ZM15,14.55a.31.31,0,0,1-.44.44l-1.23-1.24L12.08,15h0a.31.31,0,0,1-.44-.44l1.24-1.24-1.24-1.23a.31.31,0,0,1,0-.44.31.31,0,0,1,.44,0l1.24,1.23,1.23-1.23h0a.3.3,0,0,1,.44,0,.3.3,0,0,1,0,.44l-1.23,1.23Z"/><path class="cls-3" d="M16.56,5,9.21,1.21A.5.5,0,0,0,9,1.16H9a.5.5,0,0,0-.21.05L1.44,5c-.12.06-.12.16,0,.23L8.79,8.91a.45.45,0,0,0,.42,0l7.35-3.74c.06,0,.09-.07.09-.11h0S16.62,5,16.56,5Z"/><path class="cls-3" d="M9,14.46,3.74,11.78,1.44,13c-.06,0-.09.07-.09.11s0,.08.09.12l7.35,3.73a.4.4,0,0,0,.42,0l1.48-.74a3.84,3.84,0,0,1-1.16-2Z"/><path class="cls-3" d="M14.26,7.78,9,10.46,3.74,7.78,1.44,9c-.06,0-.09.07-.09.11s0,.08.09.12l7.35,3.73a.45.45,0,0,0,.42,0l.26-.13a3.89,3.89,0,0,1,3.85-3.37,3.82,3.82,0,0,1,1.84.48l1.4-.71q.09-.06.09-.12h0s0-.08-.09-.11Z"/></g></g></svg>
\ No newline at end of file
diff --git a/icon/discard_selected.svg b/icon/discard_selected.svg
new file mode 100644
index 0000000..8ffdc69
--- /dev/null
+++ b/icon/discard_selected.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#ff13dc;fill-opacity:0;}.cls-2{fill:#ff4500;}.cls-3{fill:#464646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="cross_one"><rect id="Canvas" class="cls-1" width="18" height="18"/><path class="cls-2" d="M13.32,10.06a3.25,3.25,0,1,0,3.25,3.25A3.25,3.25,0,0,0,13.32,10.06ZM15,14.55a.31.31,0,0,1-.44.44l-1.23-1.24L12.08,15h0a.31.31,0,0,1-.44-.44l1.24-1.24-1.24-1.23a.31.31,0,0,1,0-.44.31.31,0,0,1,.44,0l1.24,1.23,1.23-1.23h0a.3.3,0,0,1,.44,0,.3.3,0,0,1,0,.44l-1.23,1.23Z"/><path class="cls-3" d="M16.65,9h0s0-.08-.09-.11L9.21,5.15a.45.45,0,0,0-.42,0L1.44,8.89c-.12.06-.12.16,0,.22l7.35,3.74a.45.45,0,0,0,.42,0l.26-.13a3.91,3.91,0,0,1,3.85-3.31,3.84,3.84,0,0,1,1.78.44l1.46-.74C16.62,9.08,16.65,9,16.65,9Z"/></g></g></svg>
\ No newline at end of file
diff --git a/icon/reset_settings2.png b/icon/reset_settings2.png
new file mode 100644
index 0000000..da2a6dc
Binary files /dev/null and b/icon/reset_settings2.png differ
diff --git a/index.html b/index.html
index 187e38f..c3344f8 100644
--- a/index.html
+++ b/index.html
@@ -137,9 +137,7 @@
             background-color: #777;
             color: white;
             cursor: pointer;
-
             border: none;
-
             text-align: left;
             outline: none;
             font-size: 15px;
@@ -424,8 +422,8 @@
 
         .acceptAllImgBtn {
             font-family: Arial, Verdana;
-            background-image: url(./icon/accept_all.png);
-            background-color: transparent;
+            background-image: url(./icon/accept_all.svg);
+            background-color: #777;
             background-size: 30px;
             width: 30px;
             height: 30px;
@@ -434,8 +432,8 @@
 
         .acceptSelectedImgBtn {
             font-family: Arial, Verdana;
-            background-image: url(./icon/accept_selected.png);
-            background-color: transparent;
+            background-image: url(./icon/accept_selected.svg);
+            background-color: #777;
             background-size: 30px;
             width: 30px;
             height: 30px;
@@ -444,8 +442,8 @@
 
         .discardAllImgBtn {
             font-family: Arial, Verdana;
-            background-image: url(./icon/discard_all_border.png);
-            background-color: transparent;
+            background-image: url(./icon/discard_all.svg);
+            background-color: #777;
             background-size: 30px;
             width: 30px;
             height: 30px;
@@ -454,9 +452,9 @@
 
         .discardSelectedImgBtn {
             font-family: Arial, Verdana;
-            background-image: url(./icon/discard_selected_border.png);
-            background-color: transparent;
-            background-size: 24px;
+            background-image: url(./icon/discard_selected.svg);
+            background-color: #777;
+            background-size: 30px;
             width: 30px;
             height: 30px;
             background-repeat: no-repeat;
@@ -464,8 +462,8 @@
 
         .resetButton {
             font-family: Arial, Verdana;
-            background-image: url(./icon/reset_settings.png);
-            background-color: transparent;
+            background-image: url(./icon/reset_settings2.png);
+            background-color: #777;
             background-size: 30px;
             width: 30px;
             height: 30px;
@@ -474,8 +472,8 @@
 
         .snapshotButton {
             font-family: Arial, Verdana;
-            background-image: url(./icon/camera_icon.png);
-            background-color: transparent;
+            background-image: url(./icon/camera_icon.svg);
+            background-color: #777;
             background-size: 30px;
             width: 30px;
             height: 30px;
@@ -532,27 +530,16 @@
                 </div>
                 <div></div>
                 <div>
-                    <button class="btnSquare" id="btnSetMaskViewer">
-                        Set Mask
-                    </button>
-                    <button class="btnSquare" id="btnSetInitImageViewer">
-                        Set Init Image
-                    </button>
-                    <button class="btnSquare btnGenerateClass" id="btnGenerate">
-                        Generate txt2img
-                    </button>
+                    <button class="btnSquare" id="btnSetMaskViewer"> Set Mask </button>
+                    <button class="btnSquare" id="btnSetInitImageViewer"> Set Init Image </button>
+                    <button class="btnSquare btnGenerateClass" id="btnGenerate"> Generate txt2img </button>
                     <button
                         class="btnSquare btnInterruptClass"
                         id="btnInterruptViewer"
                         style="display: none"
-                    >
-                        Interrupt
-                    </button>
-                    <button class="btnSquare" id="btnSelectionArea">
-                        Selection Area
-                    </button>
-
-                    <div style="display: flex; justify-content: space-between">
+                    > Interrupt </button>
+                    <button class="btnSquare" id="btnSelectionArea"> Selection Area </button>
+                    <div style="display: flex; justify-content: flex-start; padding-top: 3px;">
                         <!-- <button class="btnSquare acceptClass acceptAllImgBtn"  style="display:none;">Accept All</button>
             <button class="btnSquare discardClass discardAllImgBtn"  style="display:none;">Discard All</button>
             <button class="btnSquare acceptSelectedClass acceptSelectedImgBtn"  style="display:none;">Accept Selected</button>
@@ -560,22 +547,22 @@
                         <button
                             title="Keep all generated images on the canvas"
                             class="btnSquare acceptClass acceptAllImgBtn"
-                            style="display: none"
+                            style="display: none; margin-right: 3px;"
                         ></button>
                         <button
                             title="Delete all generated images from the canvas"
                             class="btnSquare discardClass discardAllImgBtn"
-                            style="display: none"
+                            style="display: none; margin-right: 3px;"
                         ></button>
                         <button
                             title="Keep only the highlighted images"
                             class="btnSquare acceptSelectedClass acceptSelectedImgBtn"
-                            style="display: none"
+                            style="display: none; margin-right: 3px;"
                         ></button>
                         <button
                             title="Delete only the highlighted images"
                             class="btnSquare discardSelectedClass discardSelectedImgBtn"
-                            style="display: none"
+                            style="display: none; margin-right: 3px;"
                         ></button>
                     </div>
 
@@ -810,7 +797,7 @@
                 id="sp-stable-diffusion-ui-tab-page"
             >
                 <div id="menu-bar-container">
-                    <sp-picker size="m" label="Selection type">
+                    <sp-picker size="m" label="Selection type" style="margin-right: 3px;">
                         <sp-menu id="mModelsMenu" slot="options">
                             <!-- <sp-menu-item> item </sp-menu-item> -->
                         </sp-menu>
@@ -846,6 +833,7 @@
                         <button
                             class="btnSquare"
                             id="btnLayerToSelection"
+                            style="margin-right: 3px;"
                             title="Move and reSize the highlighted layer to fit into the Selection Area "
                         >
                             L2S
@@ -869,33 +857,30 @@
                     <div
                         style="
                             display: inline-flex;
-                            justify-content: space-between;
+                            justify-content: flex-start;
                             width: 133px;
                         "
                     >
                         <button
                             class="btnSquare acceptClass acceptAllImgBtn"
-                            style="display: none"
+                            style="display: none; margin-right: 3px"
                         ></button>
                         <button
                             class="btnSquare discardClass discardAllImgBtn"
-                            style="display: none"
+                            style="display: none; margin-right: 3px"
                         ></button>
                         <!-- <button class="btnSquare customClass"  style="display:none;">Accept Selected</button> -->
                         <button
                             class="btnSquare snapshotButton"
                             id="btnSnapshot"
+                            style="margin-right: 3px;"
                             title="create a snapshot of what you see on the canvas and place on a new layer"
-                        >
-                            Snapshot
-                        </button>
+                        ></button>
                         <button
                             class="btnSquare resetButton"
                             id="btnResetSettings"
                             title="reset the ui settings to their default values"
-                        >
-                            Reset Settings
-                        </button>
+                        ></button>
 
                         <!-- <button class="btnSquare" id="btnLinkCurrentDocument">Link Current Document</button> -->
                     </div>