diff --git a/src/browser/base/content/ZenViewSplitter.mjs b/src/browser/base/content/ZenViewSplitter.mjs
index 1ae101ca4..9c2181af2 100644
--- a/src/browser/base/content/ZenViewSplitter.mjs
+++ b/src/browser/base/content/ZenViewSplitter.mjs
@@ -20,9 +20,6 @@ var gZenViewSplitter = {
     document.getElementById("tabContextMenu").appendChild(fragment);
   },
 
-  /**
-   * context menu item display update
-   */
   initializeUpdateContextMenuItems() {
     const contentAreaContextMenu = document.getElementById("tabContextMenu");
     const tabCountInfo = JSON.stringify({
@@ -45,7 +42,28 @@ var gZenViewSplitter = {
     gZenSplitViewsBase.onLocationChange(browser);
   },
 
-  openSplitViewPanel(event) {
+  async openSplitViewPanel(event) {
+    let panel = this._modifierElement;
+    let target = event.target.parentNode;
+    for (const gridType of ['horizontal', 'vertical', 'grid', 'unsplit']) {
+      let selector = panel.querySelector(`.zen-split-view-modifier-preview.${gridType}`);
+      selector.classList.remove("active");
+      if (gZenSplitViewsBase.getActiveViewType() === gridType) {
+        selector.classList.add("active");
+      }
+      if (this.__hasSetMenuListener) {
+        continue;
+      }
+      selector.addEventListener("click", ((gridType) => {
+        // TODO: Implement the split view
+        panel.hidePopup();
+      }).bind(this, gridType));
+    } 
+    this.__hasSetMenuListener = true;
+    PanelMultiView.openPopup(panel, target, {
+      position: "bottomright topright",
+      triggerEvent: event,
+    }).catch(console.error);
   },
 
   contextCanSplitTabs() {
diff --git a/src/browser/themes/shared/zen-panel-ui.css b/src/browser/themes/shared/zen-panel-ui.css
index 179247d07..c1bfc5b87 100644
--- a/src/browser/themes/shared/zen-panel-ui.css
+++ b/src/browser/themes/shared/zen-panel-ui.css
@@ -209,17 +209,17 @@
   height: 100%;
 }
 
-#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep {
+#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.horizontal {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
-#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep box:last-child {
+#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.horizontal box:last-child {
   margin-top: 5px;
 }
 
-#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.vsep box:last-child {
+#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.vertical box:last-child {
   margin-left: 5px;
 }