diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
index cfc18c4e57..0b441dd511 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
+++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
@@ -428,6 +428,23 @@
     color: #FBB03B;
 }
 
+#livePreviewLayersBtn {
+    border: 1px solid transparent;
+    border-radius: 3px;
+}
+
+#live-preview-plugin-toolbar #livePreviewLayersBtn:hover,
+#live-preview-plugin-toolbar #livePreviewLayersBtn:focus,
+#live-preview-plugin-toolbar #livePreviewLayersBtn:active {
+    border-color: var(--lp-toolbar-border) !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+
+#livePreviewLayersBtn.selected {
+    color: #FBB03B;
+}
+
 .lp-mode-dropdown-chevron,
 .lp-device-size-dropdown-chevron {
     display: flex;
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
index 08b8a9eeac..606b9df27b 100644
--- a/src/nls/root/strings.js
+++ b/src/nls/root/strings.js
@@ -775,6 +775,7 @@ define({
     "LIVE_DEV_IMAGE_FOLDER_DIALOG_REMEMBER": "Don't ask again for this project",
     "AVAILABLE_IN_PRO_TITLE": "Available in Phoenix Pro",
     "DEVICE_SIZE_LIMIT_MESSAGE": "To switch between mobile, tablet, and desktop views, upgrade to Phoenix Pro.",
+    "LAYERS_PANEL_LIMIT_MESSAGE": "To see your page structure and select or edit any element in it, upgrade to Phoenix Pro.",
     "DEVICE_SIZE_NOT_ENOUGH_SPACE": "This screen doesn’t fit in the current window size — try expanding the window",
     "DEVICE_SIZE_CYCLE_NO_FIT": "Screen too small to switch to another device size — increase the window size",
     "DEVICE_SIZE_CYCLE_TOOLTIP": "Switch between mobile, tablet, and desktop",
@@ -809,6 +810,30 @@ define({
     "LIVE_PREVIEW_SHOW_STYLES_BAR": "Show Styles Bar",
     "LIVE_PREVIEW_MODE_PREFERENCE": "'{0}' shows only the webpage, '{1}' connects the webpage to your code - click on elements to jump to their code and vice versa, '{2}' provides highlighting along with advanced element manipulation",
     "LIVE_PREVIEW_CONFIGURE_MODES": "Configure Live Preview Modes",
+    "LIVE_PREVIEW_LAYERS_PANEL": "Toggle Layers Panel",
+    "LIVE_PREVIEW_LAYERS_PANEL_TITLE": "Layers Panel",
+    "LIVE_PREVIEW_LAYERS_DOCK_LEFT": "Dock to Left",
+    "LIVE_PREVIEW_LAYERS_DOCK_RIGHT": "Dock to Right",
+    "LIVE_PREVIEW_LAYERS_ELEMENTS": "Elements",
+    "LIVE_PREVIEW_LAYERS_DETAILS": "Details",
+    "LIVE_PREVIEW_LAYERS_SEARCH": "Search elements",
+    "LIVE_PREVIEW_LAYERS_NO_ELEMENTS": "No elements to show",
+    "LIVE_PREVIEW_LAYERS_NO_MATCHES": "No matching elements",
+    "LIVE_PREVIEW_LAYERS_TRUNCATED": "Showing the first {0} elements",
+    "LIVE_PREVIEW_LAYERS_COLLAPSE_ALL": "Collapse All",
+    "LIVE_PREVIEW_LAYERS_EXPAND_LEVEL": "Expand to Level",
+    "LIVE_PREVIEW_LAYERS_LEVEL": "Level {0}",
+    "LIVE_PREVIEW_LAYERS_LEVEL_ALL": "All Levels",
+    "LIVE_PREVIEW_LAYERS_SHOW_TEXT_NODES": "Show Text Nodes",
+    "LIVE_PREVIEW_LAYERS_HIDE_TEXT_NODES": "Hide Text Nodes",
+    "LIVE_PREVIEW_LAYERS_TAB_PROPERTIES": "Properties",
+    "LIVE_PREVIEW_LAYERS_TAB_STYLES": "Styles",
+    "LIVE_PREVIEW_LAYERS_NO_SELECTION": "Select an element to see its details",
+    "LIVE_PREVIEW_LAYERS_NOT_IN_SOURCE": "This element is not in the source file",
+    "LIVE_PREVIEW_LAYERS_NO_STYLES": "No styles applied",
+    "LIVE_PREVIEW_LAYERS_OPEN_SOURCE": "Open in editor",
+    "LIVE_PREVIEW_LAYERS_RULE_INACTIVE": "Not active in the current state",
+    "LIVE_PREVIEW_LAYERS_EDIT_STYLE": "Edit in Styles Bar",
 
     "LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS": "Live Preview was canceled because the browser's developer tools were opened",
     "LIVE_DEV_DETACHED_TARGET_CLOSED": "Live Preview was canceled because the page was closed in the browser",