diff --git a/suite/common/sidebar/customize-panel.js b/suite/common/sidebar/customize-panel.js
new file mode 100644
index 000000000000..84badf2f9e5d
--- /dev/null
+++ b/suite/common/sidebar/customize-panel.js
@@ -0,0 +1,11 @@
+// -*- Mode: Java -*-
+
+function Init()
+{
+  var panel_name_div  = document.getElementById('panelname');
+  var customize_frame = document.getElementById('customizeframe');
+  var panel_text      = document.createTextNode(panel_name)
+  panel_name_div.appendChild(panel_text);
+  // The customize page currently is not loading because of a redirect bug.
+  customize_frame.setAttribute('src', panel_customize_URL);
+}
diff --git a/suite/common/sidebar/customize-panel.xul b/suite/common/sidebar/customize-panel.xul
new file mode 100644
index 000000000000..040f02309b65
--- /dev/null
+++ b/suite/common/sidebar/customize-panel.xul
@@ -0,0 +1,61 @@
+<?xml version="1.0"?> <!-- -*- Mode: SGML; indent-tabs-mode: nil; -*- -->
+<!--
+
+  The contents of this file are subject to the Netscape Public License
+  Version 1.1 (the "NPL"); you may not use this file except in
+  compliance with the NPL.  You may obtain a copy of the NPL at
+  http://www.mozilla.org/NPL/
+
+  Software distributed under the NPL is distributed on an "AS IS" basis,
+  WITHOUT WARRANTY OF ANY KIND, either express or implied. See the NPL
+  for the specific language governing rights and limitations under the
+  NPL.
+
+  The Initial Developer of this code under the NPL is Netscape
+  Communications Corporation.  Portions created by Netscape are
+  Copyright (C) 1999 Netscape Communications Corporation.  All Rights
+  Reserved.
+
+-->
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://sidebar/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://sidebar/skin/customize.css" type="text/css"?>
+<?xml-stylesheet href="chrome://sidebar/skin/customize-panel.css"
+   type="text/css"?>
+
+<!DOCTYPE window SYSTEM "chrome://sidebar/locale/customize-panel.dtd" >
+
+<window
+  xmlns:html="http://www.w3.org/TR/REC-html40"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  onload="Init();"
+  align="vertical">
+
+<html:script src="chrome://sidebar/content/customize-panel.js" />
+
+  <box align="horizontal">
+    <html:div class="title">
+      &sidebar.customize-panel.title.label;
+    </html:div>
+    <html:div id="panelname" class="title"/>
+  </box>
+
+
+  <html:hr/>
+
+
+  <html:iframe id="customizeframe" type="content" src="about:blank"
+      flex="100%"/>
+
+  <box align="horizontal">
+    <spring flex="96%"/>
+    <titledbutton onclick="window.close()" 
+       value="&sidebar.customize-panel.cancel.label;" />
+    <spring flex="2%"/>
+    <titledbutton onclick="dump('xxxSubmit customize form here\n');"
+       disabled="true" 
+       value="&sidebar.customize-panel.save.label;" />
+    <spring flex="2%"/>
+  </box>
+</window>
diff --git a/suite/common/sidebar/customize.js b/suite/common/sidebar/customize.js
index 6a640d2f2d18..3037e3719d28 100644
--- a/suite/common/sidebar/customize.js
+++ b/suite/common/sidebar/customize.js
@@ -134,24 +134,25 @@ function enableButtons() {
   var list      = document.getElementById('selectList');
   var customize = document.getElementById('customize-button');
   var index = list.selectedIndex;
-  var isFirst = index == 0;
-  var isLast  = index == list.options.length - 1;
+  var noneSelected = (index == -1);
+  var isFirst      = (index == 0);
+  var isLast       = (index == list.options.length - 1);
 
   // up /\ button
-  if (isFirst) {
+  if (noneSelected || isFirst) {
     up.setAttribute('disabled', 'true');
   } else {
     up.setAttribute('disabled', '');
   }
   // down \/ button
-  if (isLast) {
+  if (noneSelected || isLast) {
     down.setAttribute('disabled', 'true');
   } else {
     down.setAttribute('disabled', '');
   }
   // "Customize..." button
   var customizeURL = null;
-  if (index != -1) {
+  if (!noneSelected) {
     var option = list.childNodes.item(index);
     customizeURL = option.getAttribute('customize');
   }
@@ -162,6 +163,26 @@ function enableButtons() {
   }
 }
 
+function CustomizePanel() 
+{
+  var list  = document.getElementById('selectList');	
+  var index = list.selectedIndex;
+
+  if (index != -1) {
+    var title         = list.childNodes.item(index).getAttribute('title');
+    var customize_URL = list.childNodes.item(index).getAttribute('customize');
+
+    if (!title || !customize_URL) return;
+
+    var customize = window.open("chrome://sidebar/content/customize-panel.xul",
+			      "PanelPreview", "chrome");
+
+    customize.panel_name          = title;
+    customize.panel_customize_URL = customize_URL;
+  }
+  enableSave();
+}
+
 function RemovePanel()
 {
   var list  = document.getElementById('selectList');	
diff --git a/suite/common/sidebar/customize.xul b/suite/common/sidebar/customize.xul
index 5ddac27e93de..74f2949f8e68 100644
--- a/suite/common/sidebar/customize.xul
+++ b/suite/common/sidebar/customize.xul
@@ -58,7 +58,7 @@
     </html:form>
 
     <box align="vertical" class="button-group" flex="100%">
-      <titledbutton id="customize-button" onclick="" 
+      <titledbutton id="customize-button" onclick="CustomizePanel();" 
          value="&sidebar.customize.customize.label;" />
       <titledbutton onclick="RemovePanel()"
          value="&sidebar.customize.remove.label;" />
diff --git a/suite/common/sidebar/preview.js b/suite/common/sidebar/preview.js
index fe19b98810a1..c62d27cfc607 100644
--- a/suite/common/sidebar/preview.js
+++ b/suite/common/sidebar/preview.js
@@ -2,7 +2,6 @@
 
 function Init()
 {
-  dump("init preview\n");
   var panel_title = document.getElementById('paneltitle');
   var preview_frame = document.getElementById('previewframe');
   panel_title.setAttribute('value', panel_name);
diff --git a/xpfe/components/sidebar/resources/MANIFEST-content b/xpfe/components/sidebar/resources/MANIFEST-content
index 3543b5ba75ad..62f322113618 100644
--- a/xpfe/components/sidebar/resources/MANIFEST-content
+++ b/xpfe/components/sidebar/resources/MANIFEST-content
@@ -1,3 +1,5 @@
+customize-panel.js
+customize-panel.xul
 customize.js
 customize.xul
 dummy-flash.rdf
diff --git a/xpfe/components/sidebar/resources/MANIFEST-skin b/xpfe/components/sidebar/resources/MANIFEST-skin
index e76ae4dd372f..9b8d250159b1 100644
--- a/xpfe/components/sidebar/resources/MANIFEST-skin
+++ b/xpfe/components/sidebar/resources/MANIFEST-skin
@@ -1,3 +1,4 @@
+customize-panel.css
 customize.css
 flash.css
 sidebar.css
diff --git a/xpfe/components/sidebar/resources/Makefile.in b/xpfe/components/sidebar/resources/Makefile.in
index a605ac3b40fd..d288fd1e6b88 100644
--- a/xpfe/components/sidebar/resources/Makefile.in
+++ b/xpfe/components/sidebar/resources/Makefile.in
@@ -25,6 +25,8 @@ CHROME_CONTENT_DIR  = content/default
 CHROME_SKIN_DIR     = skin/default
 
 CHROME_CONTENT = \
+	customize-panel.js \
+	customize-panel.xul \
 	customize.js \
 	customize.xul \
 	dummy-flash.rdf \
@@ -41,6 +43,7 @@ CHROME_CONTENT = \
 	$(NULL)
 
 CHROME_SKIN = \
+	customize-panel.css \
 	customize.css \
 	flash.css \
 	sidebar.css \
@@ -52,6 +55,7 @@ CHROME_SKIN = \
 	$(NULL)
 
 CHROME_L10N = \
+	./locale/en-US/customize-panel.dtd \
 	./locale/en-US/customize.dtd \
 	./locale/en-US/flash.dtd \
 	./locale/en-US/preview.dtd \
diff --git a/xpfe/components/sidebar/resources/customize-panel.css b/xpfe/components/sidebar/resources/customize-panel.css
new file mode 100644
index 000000000000..8ddd12afb566
--- /dev/null
+++ b/xpfe/components/sidebar/resources/customize-panel.css
@@ -0,0 +1,28 @@
+/* -*- Mode: C; c-basic-offset: 2 -*-
+ *
+ * The contents of this file are subject to the Netscape Public License
+ * Version 1.0 (the "NPL"); you may not use this file except in
+ * compliance with the NPL.  You may obtain a copy of the NPL at
+ * http://www.mozilla.org/NPL/
+ *
+ * Software distributed under the NPL is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the NPL
+ * for the specific language governing rights and limitations under the
+ * NPL.
+ *
+ * The Initial Developer of this code under the NPL is Netscape
+ * Communications Corporation.  Portions created by Netscape are
+ * Copyright (C) 1998 Netscape Communications Corporation.  All Rights
+ * Reserved.
+ */
+
+/*
+
+   Style rules specific to the Customize Panel dialog.
+
+*/
+
+iframe#customizeframe {
+ width:  600px;
+ height: 300px;
+}
diff --git a/xpfe/components/sidebar/resources/customize-panel.js b/xpfe/components/sidebar/resources/customize-panel.js
new file mode 100644
index 000000000000..84badf2f9e5d
--- /dev/null
+++ b/xpfe/components/sidebar/resources/customize-panel.js
@@ -0,0 +1,11 @@
+// -*- Mode: Java -*-
+
+function Init()
+{
+  var panel_name_div  = document.getElementById('panelname');
+  var customize_frame = document.getElementById('customizeframe');
+  var panel_text      = document.createTextNode(panel_name)
+  panel_name_div.appendChild(panel_text);
+  // The customize page currently is not loading because of a redirect bug.
+  customize_frame.setAttribute('src', panel_customize_URL);
+}
diff --git a/xpfe/components/sidebar/resources/customize-panel.xul b/xpfe/components/sidebar/resources/customize-panel.xul
new file mode 100644
index 000000000000..040f02309b65
--- /dev/null
+++ b/xpfe/components/sidebar/resources/customize-panel.xul
@@ -0,0 +1,61 @@
+<?xml version="1.0"?> <!-- -*- Mode: SGML; indent-tabs-mode: nil; -*- -->
+<!--
+
+  The contents of this file are subject to the Netscape Public License
+  Version 1.1 (the "NPL"); you may not use this file except in
+  compliance with the NPL.  You may obtain a copy of the NPL at
+  http://www.mozilla.org/NPL/
+
+  Software distributed under the NPL is distributed on an "AS IS" basis,
+  WITHOUT WARRANTY OF ANY KIND, either express or implied. See the NPL
+  for the specific language governing rights and limitations under the
+  NPL.
+
+  The Initial Developer of this code under the NPL is Netscape
+  Communications Corporation.  Portions created by Netscape are
+  Copyright (C) 1999 Netscape Communications Corporation.  All Rights
+  Reserved.
+
+-->
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://sidebar/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://sidebar/skin/customize.css" type="text/css"?>
+<?xml-stylesheet href="chrome://sidebar/skin/customize-panel.css"
+   type="text/css"?>
+
+<!DOCTYPE window SYSTEM "chrome://sidebar/locale/customize-panel.dtd" >
+
+<window
+  xmlns:html="http://www.w3.org/TR/REC-html40"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  onload="Init();"
+  align="vertical">
+
+<html:script src="chrome://sidebar/content/customize-panel.js" />
+
+  <box align="horizontal">
+    <html:div class="title">
+      &sidebar.customize-panel.title.label;
+    </html:div>
+    <html:div id="panelname" class="title"/>
+  </box>
+
+
+  <html:hr/>
+
+
+  <html:iframe id="customizeframe" type="content" src="about:blank"
+      flex="100%"/>
+
+  <box align="horizontal">
+    <spring flex="96%"/>
+    <titledbutton onclick="window.close()" 
+       value="&sidebar.customize-panel.cancel.label;" />
+    <spring flex="2%"/>
+    <titledbutton onclick="dump('xxxSubmit customize form here\n');"
+       disabled="true" 
+       value="&sidebar.customize-panel.save.label;" />
+    <spring flex="2%"/>
+  </box>
+</window>
diff --git a/xpfe/components/sidebar/resources/customize.js b/xpfe/components/sidebar/resources/customize.js
index 6a640d2f2d18..3037e3719d28 100644
--- a/xpfe/components/sidebar/resources/customize.js
+++ b/xpfe/components/sidebar/resources/customize.js
@@ -134,24 +134,25 @@ function enableButtons() {
   var list      = document.getElementById('selectList');
   var customize = document.getElementById('customize-button');
   var index = list.selectedIndex;
-  var isFirst = index == 0;
-  var isLast  = index == list.options.length - 1;
+  var noneSelected = (index == -1);
+  var isFirst      = (index == 0);
+  var isLast       = (index == list.options.length - 1);
 
   // up /\ button
-  if (isFirst) {
+  if (noneSelected || isFirst) {
     up.setAttribute('disabled', 'true');
   } else {
     up.setAttribute('disabled', '');
   }
   // down \/ button
-  if (isLast) {
+  if (noneSelected || isLast) {
     down.setAttribute('disabled', 'true');
   } else {
     down.setAttribute('disabled', '');
   }
   // "Customize..." button
   var customizeURL = null;
-  if (index != -1) {
+  if (!noneSelected) {
     var option = list.childNodes.item(index);
     customizeURL = option.getAttribute('customize');
   }
@@ -162,6 +163,26 @@ function enableButtons() {
   }
 }
 
+function CustomizePanel() 
+{
+  var list  = document.getElementById('selectList');	
+  var index = list.selectedIndex;
+
+  if (index != -1) {
+    var title         = list.childNodes.item(index).getAttribute('title');
+    var customize_URL = list.childNodes.item(index).getAttribute('customize');
+
+    if (!title || !customize_URL) return;
+
+    var customize = window.open("chrome://sidebar/content/customize-panel.xul",
+			      "PanelPreview", "chrome");
+
+    customize.panel_name          = title;
+    customize.panel_customize_URL = customize_URL;
+  }
+  enableSave();
+}
+
 function RemovePanel()
 {
   var list  = document.getElementById('selectList');	
diff --git a/xpfe/components/sidebar/resources/customize.xul b/xpfe/components/sidebar/resources/customize.xul
index 5ddac27e93de..74f2949f8e68 100644
--- a/xpfe/components/sidebar/resources/customize.xul
+++ b/xpfe/components/sidebar/resources/customize.xul
@@ -58,7 +58,7 @@
     </html:form>
 
     <box align="vertical" class="button-group" flex="100%">
-      <titledbutton id="customize-button" onclick="" 
+      <titledbutton id="customize-button" onclick="CustomizePanel();" 
          value="&sidebar.customize.customize.label;" />
       <titledbutton onclick="RemovePanel()"
          value="&sidebar.customize.remove.label;" />
diff --git a/xpfe/components/sidebar/resources/locale/MANIFEST b/xpfe/components/sidebar/resources/locale/MANIFEST
index 3dce23fbf36d..f2e47b36644b 100644
--- a/xpfe/components/sidebar/resources/locale/MANIFEST
+++ b/xpfe/components/sidebar/resources/locale/MANIFEST
@@ -1,3 +1,4 @@
+en-US:customize-panel.dtd
 en-US:customize.dtd
 en-US:flash.dtd
 en-US:preview.dtd
diff --git a/xpfe/components/sidebar/resources/locale/en-US/customize-panel.dtd b/xpfe/components/sidebar/resources/locale/en-US/customize-panel.dtd
new file mode 100644
index 000000000000..b623dd5165d3
--- /dev/null
+++ b/xpfe/components/sidebar/resources/locale/en-US/customize-panel.dtd
@@ -0,0 +1,3 @@
+<!ENTITY sidebar.customize-panel.title.label          "Customize Panel: ">
+<!ENTITY sidebar.customize-panel.save.label           "Save">
+<!ENTITY sidebar.customize-panel.cancel.label         "Cancel">
diff --git a/xpfe/components/sidebar/resources/makefile.win b/xpfe/components/sidebar/resources/makefile.win
index 37b84ac8d1f1..bde1069869a9 100644
--- a/xpfe/components/sidebar/resources/makefile.win
+++ b/xpfe/components/sidebar/resources/makefile.win
@@ -22,6 +22,8 @@ CHROME_CONTENT_DIR  = content\default
 CHROME_SKIN_DIR     = skin\default
 
 CHROME_CONTENT = \
+        .\customize-panel.js \
+        .\customize-panel.xul \
         .\customize.js \
         .\customize.xul \
         .\dummy-flash.rdf \
@@ -38,6 +40,7 @@ CHROME_CONTENT = \
         $(NULL)
 
 CHROME_SKIN = \
+        .\customize-panel.css \
         .\customize.css \
         .\flash.css \
         .\sidebar.css \
@@ -49,6 +52,7 @@ CHROME_SKIN = \
         $(NULL)
 
 CHROME_L10N = \
+        .\locale\en-US\customize-panel.dtd \
         .\locale\en-US\customize.dtd \
         .\locale\en-US\flash.dtd \
 	.\locale\en-US\preview.dtd \
diff --git a/xpfe/components/sidebar/resources/preview.js b/xpfe/components/sidebar/resources/preview.js
index fe19b98810a1..c62d27cfc607 100644
--- a/xpfe/components/sidebar/resources/preview.js
+++ b/xpfe/components/sidebar/resources/preview.js
@@ -2,7 +2,6 @@
 
 function Init()
 {
-  dump("init preview\n");
   var panel_title = document.getElementById('paneltitle');
   var preview_frame = document.getElementById('previewframe');
   panel_title.setAttribute('value', panel_name);
diff --git a/xpfe/components/sidebar/resources/sidebar-browser.rdf b/xpfe/components/sidebar/resources/sidebar-browser.rdf
index cc9309ac2c81..16f5be12709b 100644
--- a/xpfe/components/sidebar/resources/sidebar-browser.rdf
+++ b/xpfe/components/sidebar/resources/sidebar-browser.rdf
@@ -8,8 +8,7 @@
     <RDF:li>
        <RDF:Description ID="whats-related">
          <NC:title>&sidebar.whats-related.label;</NC:title>
-         <NC:content>resource:/res/samples/related-panel.xul</NC:content>
-         <NC:customize>resource:/res/samples/related-panel-cust.xul</NC:customize>
+         <NC:content>chrome://related/content/related-panel.xul</NC:content>
        </RDF:Description>
     </RDF:li>
     <RDF:li>