diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index b0085d497..964985926 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -136,7 +136,7 @@ pref('zen.workspaces.hide-default-container-indicator', true);
 pref('zen.workspaces.individual-pinned-tabs', true);
 pref('zen.workspaces.show-icon-strip', true);
 pref('zen.workspaces.force-container-workspace', true);
-pref('zen.workspaces.icons', '["🌐", "📁", "💼", "📝", "📅", "📊","🧠"]');
+pref('zen.workspaces.icons', '["🌐", "📁", "💼", "📝", "📅", "📊", "🧠", "🚀", "🎯", "🔒", "💡", "🎨", "🛠️", "🧩", "💻", "📱", "🎓", "📚", "⚙️", "🎉", "🕹️", "🛒", "🔍","🧪","🔧","🗝️","🎧","🎮"]');
 pref('services.sync.prefs.sync.zen.workspaces.icons', true);
 pref('services.sync.engine.workspaces', false);
 
diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components
index 6031981ac..cfdac0169 160000
--- a/src/browser/base/content/zen-components
+++ b/src/browser/base/content/zen-components
@@ -1 +1 @@
-Subproject commit 6031981acdb600561b3fdfcf7f51864664b0c25a
+Subproject commit cfdac0169024545dddab87d4ebc8110eaa3ca5a3
diff --git a/src/browser/base/content/zen-popupset.inc.xhtml b/src/browser/base/content/zen-popupset.inc.xhtml
index 6f10c0fbd..57b919f7b 100644
--- a/src/browser/base/content/zen-popupset.inc.xhtml
+++ b/src/browser/base/content/zen-popupset.inc.xhtml
@@ -101,6 +101,10 @@
   </vbox>
 </panelview>
 
+<panel type="arrow" id="PanelUI-zen-workspaces-icon-picker" position="bottomright topright" side="left">
+
+</panel>
+
 <panel flip="slide" type="arrow" orient="vertical" id="PanelUI-zen-workspaces" position="bottomright topright" mainview="true" side="left">
   <panelmultiview id="PanelUI-zen-workspaces-multiview" mainViewId="PanelUI-zen-workspaces-view">
     <panelview id="PanelUI-zen-workspaces-view" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
@@ -124,10 +128,11 @@
       </vbox>
     </panelview>
     <panelview id="PanelUI-zen-workspaces-create" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
-      <vbox>
+      <vbox class="PanelUI-zen-workspaces-user-create">
         <h1 data-l10n-id="zen-panel-ui-workspaces-create-text"></h1>
-        <html:input autofocus="true" id="PanelUI-zen-workspaces-create-input" type="text" placeholder="Enter workspace name" oninput="ZenWorkspaces.onWorkspaceCreationNameChange(this);" />
-        <hbox id="PanelUI-zen-workspaces-create-icons-container">
+        <hbox class="PanelUI-zen-workspaces-creation-wraper">
+          <hbox class="PanelUI-zen-workspaces-icons-container create" onclick="ZenWorkspaces.onWorkspaceIconContainerClick(event);"></hbox>
+          <html:input autofocus="true" id="PanelUI-zen-workspaces-create-input" type="text" placeholder="Enter workspace name" oninput="ZenWorkspaces.onWorkspaceCreationNameChange(this);" />
         </hbox>
       </vbox>
       <html:moz-button-group class="panel-footer" id="PanelUI-zen-workspaces-create-footer">
@@ -138,10 +143,11 @@
       </html:moz-button-group>
     </panelview>
     <panelview id="PanelUI-zen-workspaces-edit" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
-      <vbox>
+      <vbox class="PanelUI-zen-workspaces-user-create">
         <h1 data-l10n-id="zen-panel-ui-workspaces-edit-text"></h1>
-        <html:input autofocus="true" id="PanelUI-zen-workspaces-edit-input" type="text" placeholder="Enter workspace name" oninput="ZenWorkspaces.onWorkspaceEditChange();" />
-        <hbox id="PanelUI-zen-workspaces-edit-icons-container">
+        <hbox class="PanelUI-zen-workspaces-creation-wraper">
+          <hbox class="PanelUI-zen-workspaces-icons-container edit" onclick="ZenWorkspaces.onWorkspaceIconContainerClick(event);"></hbox>
+          <html:input autofocus="true" id="PanelUI-zen-workspaces-edit-input" type="text" placeholder="Enter workspace name" oninput="ZenWorkspaces.onWorkspaceEditChange();" />
         </hbox>
       </vbox>
       <html:moz-button-group class="panel-footer" id="PanelUI-zen-workspaces-edit-footer">
@@ -156,7 +162,7 @@
 
 <menupopup id="zenWorkspaceActionsMenu"
             onpopupshowing="ZenWorkspaces.updateContextMenu(this);"
-            onpopuphidden="ZenWorkspaces.onContextMenuClose();">
+            onpopuphidden="if (event.target == this) ZenWorkspaces.onContextMenuClose();">
   <menuitem id="context_zenOpenWorkspace" oncommand="ZenWorkspaces.openWorkspace();" data-l10n-id="zen-workspaces-panel-context-open"/>
   <menuseparator/>
   <menuitem id="context_zenSetAsDefaultWorkspace" oncommand="ZenWorkspaces.setDefaultWorkspace();" data-l10n-id="zen-workspaces-panel-context-set-default"/>
diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css
index dfb422e84..1d020abe9 100644
--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -1,3 +1,5 @@
+@namespace html 'http://www.w3.org/1999/xhtml';
+
 #zen-workspaces-button {
   justify-content: center;
   align-items: center;
@@ -154,13 +156,7 @@
   min-height: 150px;
 }
 
-#PanelUI-zen-workspaces-create-input,
-#PanelUI-zen-workspaces-edit-input {
-  margin-top: 10px;
-}
-
-#PanelUI-zen-workspaces-create-icons-container toolbarbutton,
-#PanelUI-zen-workspaces-edit-icons-container toolbarbutton {
+#PanelUI-zen-workspaces-icon-picker toolbarbutton {
   width: 30px;
   height: 30px;
   display: flex;
@@ -170,31 +166,33 @@
   border-radius: 7px;
 }
 
-#PanelUI-zen-workspaces-create-icons-container toolbarbutton[selected='true'],
-#PanelUI-zen-workspaces-edit-icons-container toolbarbutton[selected='true'] {
+#PanelUI-zen-workspaces-icon-picker toolbarbutton[selected='true'] {
   border-color: var(--zen-colors-secondary);
 }
 
-#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-icon,
-#PanelUI-zen-workspaces-edit-icons-container toolbarbutton .toolbarbutton-icon {
+#PanelUI-zen-workspaces-icon-picker toolbarbutton .toolbarbutton-icon {
   display: none;
 }
 
-#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-text,
-#PanelUI-zen-workspaces-edit-icons-container toolbarbutton .toolbarbutton-text {
+#PanelUI-zen-workspaces-icon-picker toolbarbutton .toolbarbutton-text {
   min-width: unset;
 }
 
-#PanelUI-zen-workspaces-create-icons-container,
-#PanelUI-zen-workspaces-edit-icons-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
-  gap: 8px;
-}
+#PanelUI-zen-workspaces-icon-picker {
+  overflow-x: hidden;
+  justify-items: center;
+  overflow-y: auto;
 
-#PanelUI-zen-workspaces-create-icons-container toolbarbutton.toolbarbutton-1,
-#PanelUI-zen-workspaces-edit-icons-container toolbarbutton.toolbarbutton-1 {
-  margin-top: 10px;
+  max-width: 290px;
+  max-height: 290px;
+
+  &::part(content) {
+    padding: 5px;
+    display: flex;
+    gap: 10px;
+  
+    flex-wrap: wrap;
+  }
 }
 
 #PanelUI-zen-workspaces-list {
@@ -211,6 +209,33 @@
   opacity: 0.5;
 }
 
+.PanelUI-zen-workspaces-user-create {
+  height: 100%;
+
+  .PanelUI-zen-workspaces-creation-wraper {
+    border-radius: 5px;
+    border: 1px solid var(--zen-colors-border);
+
+    margin-top: 10px;
+
+    & .PanelUI-zen-workspaces-icons-container {
+      padding: 10px 0;
+      min-width: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-right: 1px solid var(--zen-colors-border);
+      margin-right: 2px;
+    }
+    
+    & html|input {
+      border: none;
+      outline: none !important;
+      width: 100%;
+    }
+  }
+}
+
 #PanelUI-zen-workspaces-current-info toolbarbutton:last-child {
   margin-bottom: 0 !important;
 }