diff --git a/modules/weko-gridlayout/tests/test_admin.py b/modules/weko-gridlayout/tests/test_admin.py
index 35beaa050a..8255c61044 100644
--- a/modules/weko-gridlayout/tests/test_admin.py
+++ b/modules/weko-gridlayout/tests/test_admin.py
@@ -212,6 +212,31 @@ def test_index_WidgetDesign(i18n_app, view_instance):
         pass
 
 
+# WidgetDesign.preview_view
+def test_preview_view_WidgetDesign(i18n_app, view_instance):
+    test = WidgetDesign()
+    test.admin = MagicMock()
+    i18n_app.config["WEKO_THEME_DEFAULT_COMMUNITY"] = "0"
+    i18n_app.config["WEKO_THEME_PREVIEW_WIDGET_DESIGN"] = (
+        "weko_theme/preview_widget_design.html"
+    )
+    return_data = {
+        "community_id": "",
+        "detail_condition": "",
+        "width": "3",
+        "height": "",
+        "index_link_list": [],
+        "index_link_enabled": False,
+        "community": None,
+        "display_facet_search": False,
+        "display_index_tree": True,
+        "display_community": True,
+    }
+    with patch("weko_gridlayout.admin.get_weko_contents", return_value=return_data):
+        with patch("flask_admin.base.render_template", return_value="dummy"):
+            assert test.preview_view()
+
+
 # WidgetSettingView.index_view ~ ERROR
 def test_index_view_WidgetSettingView(i18n_app, view_instance):
     assert view_instance.index_view() != None
diff --git a/modules/weko-gridlayout/tests/test_services.py b/modules/weko-gridlayout/tests/test_services.py
index ea5a88aaa6..374ae519f0 100644
--- a/modules/weko-gridlayout/tests/test_services.py
+++ b/modules/weko-gridlayout/tests/test_services.py
@@ -287,6 +287,85 @@ def test_get_widget_list(i18n_app, widget_items):
         assert WidgetDesignServices.get_widget_list(repository_id, default_language)
 
 
+#     def get_widget_item_list(cls, repository_id):
+def test_get_widget_item_list(i18n_app, widget_items):
+    repository_id = "Root Index"
+    WEKO_GRIDLAYOUT_ACCESS_COUNTER_TYPE = "Access counter"
+    WEKO_GRIDLAYOUT_NOTICE_TYPE = "Notice"
+    return_data1 = {
+        "widget_id": 1,
+        "repository_id": "Root Index",
+        "widget_type": WEKO_GRIDLAYOUT_ACCESS_COUNTER_TYPE,
+        "is_enabled": True,
+        "is_deleted": False,
+        "updated": 1772664727.379901,
+        "settings": {
+            "background_color": "test",
+            "label_enable": True,
+            "theme": "default",
+            "frame_border_color": "test",
+            "border_style": "double",
+            "label_text_color": "test",
+            "label_color": "test",
+            "access_counter": "0",
+            "following_message": "test",
+            "other_message": "test",
+            "preceding_message": "test",
+            "count_start_date": "test",
+            "multiLangSetting": {
+                "ja": "ja"
+            }
+        }
+    }
+    return_data2 = {
+        "widget_id":2,
+        "repository_id": "Root Index",
+        "widget_type": WEKO_GRIDLAYOUT_NOTICE_TYPE,
+        "is_enabled": True,
+        "is_deleted": False,
+        "updated": 1772664727.379901,
+        "settings": {
+            "background_color": "test",
+            "border_style": "double",
+            "frame_border_color": "test",
+            "hide_the_rest": "None",
+            "label_color": "test",
+            "label_enable": True,
+            "label_text_color": "test",
+            "read_more": "None",
+            "theme": "default",
+            "multiLangSetting": {
+                "ja": "ja"
+            }
+        }
+    }
+    with patch(
+        "weko_gridlayout.services.WidgetItemServices.get_widget_data_by_widget_id",
+        return_value=return_data1,
+    ):
+        assert WidgetDesignServices.get_widget_item_list(repository_id)
+
+        return_data1["settings"]["multiLangSetting"] = {"en": "en"}
+        assert WidgetDesignServices.get_widget_item_list(repository_id)
+
+        return_data1["settings"]["multiLangSetting"] = {"xx": "xx"}
+        assert WidgetDesignServices.get_widget_item_list(repository_id)
+
+        return_data1["settings"]["multiLangSetting"] = None
+        assert WidgetDesignServices.get_widget_item_list(repository_id)
+
+        with patch('weko_gridlayout.services.isinstance', side_effect=Exception('')):
+            assert WidgetDesignServices.get_widget_item_list(repository_id)
+    with patch(
+        "weko_gridlayout.services.WidgetItemServices.get_widget_data_by_widget_id",
+        return_value=return_data2,
+    ):
+        assert WidgetDesignServices.get_widget_item_list(repository_id)
+    with patch("weko_gridlayout.services.WidgetItem.query") as mock_query:
+        mock_query.return_value.filter_by.return_value.all.return_value = None
+        assert WidgetDesignServices.get_widget_item_list(repository_id)
+
+
 #     def get_widget_preview(cls, repository_id, default_language,
 def test_get_widget_preview(i18n_app, widget_item):
     repository_id = "Root Index"
diff --git a/modules/weko-gridlayout/tests/test_views.py b/modules/weko-gridlayout/tests/test_views.py
index 678f3b494e..3e6fc30585 100644
--- a/modules/weko-gridlayout/tests/test_views.py
+++ b/modules/weko-gridlayout/tests/test_views.py
@@ -485,6 +485,16 @@ def test_delete_widget_item(client, users):
     assert res.status_code == 200
 
 
+# def get_widget_item_list()
+def test_get_widget_item_list(client, users):
+    login_user_via_session(client=client, email=users[2]['obj'].email)
+    res = client.get(
+        url_for("weko_gridlayout_api.get_widget_item_list"),
+        headers={"Content-Type": "application/json"}
+    )
+    assert res.status_code == 200
+
+
 # def get_account_role():
 def test_get_account_role(client, users):
     login_user_via_session(client=client, email=users[2]['obj'].email)
diff --git a/modules/weko-gridlayout/weko_gridlayout/admin.py b/modules/weko-gridlayout/weko_gridlayout/admin.py
index e212543682..18b51edc54 100644
--- a/modules/weko-gridlayout/weko_gridlayout/admin.py
+++ b/modules/weko-gridlayout/weko_gridlayout/admin.py
@@ -40,6 +40,9 @@
 from jinja2 import contextfunction
 from sqlalchemy import func
 from wtforms.fields import StringField
+from weko_theme.utils import get_design_layout, \
+    get_weko_contents, has_widget_design
+from invenio_i18n.ext import current_i18n
 
 from . import config
 from .models import WidgetItem, WidgetMultiLangData
@@ -56,6 +59,23 @@ def index(self):
             current_app.config["WEKO_GRIDLAYOUT_ADMIN_WIDGET_DESIGN"]
         )
 
+    @expose('/preview/')
+    def preview_view(self):
+        # For preview page, always use main layout
+        page, render_widgets = get_design_layout(
+            current_app.config['WEKO_THEME_DEFAULT_COMMUNITY'])
+        render_header_footer = has_widget_design(
+            current_app.config['WEKO_THEME_DEFAULT_COMMUNITY'],
+            current_i18n.language)
+        page = None
+
+        return self.render(
+            current_app.config["WEKO_THEME_PREVIEW_WIDGET_DESIGN"],
+            page=page,
+            render_widgets=render_widgets,
+            render_header_footer=render_header_footer,
+            **get_weko_contents(request.args))
+
 
 class WidgetSettingView(ModelView):
     """Widget Setting admin view."""
diff --git a/modules/weko-gridlayout/weko_gridlayout/services.py b/modules/weko-gridlayout/weko_gridlayout/services.py
index 29cd59ef48..7923778146 100644
--- a/modules/weko-gridlayout/weko_gridlayout/services.py
+++ b/modules/weko-gridlayout/weko_gridlayout/services.py
@@ -501,6 +501,60 @@ def get_widget_list(cls, repository_id, default_language):
 
         return result
 
+    @classmethod
+    def get_widget_item_list(cls, repository_id):
+        """Get Widget Item list.
+
+        :param repository_id: Identifier of the repository.
+        :return: Widget Item list.
+        """
+        result = {
+            "data": {},
+            "error": ""
+        }
+        try:
+            with db.session.no_autoflush:
+                widget_item_list = WidgetItem.query.filter_by(
+                    repository_id=str(repository_id), is_enabled=True,
+                    is_deleted=False
+                ).all()
+            current_lang = current_i18n.language
+            if isinstance(widget_item_list, list):
+                for widget_item in widget_item_list:
+                    data = dict()
+                    data_display = dict()
+                    widget_item_data = \
+                        WidgetItemServices.get_widget_data_by_widget_id(
+                            widget_item.widget_id)
+                    settings = widget_item_data.get('settings')
+                    settings["widget_id"] = widget_item_data.get('widget_id')
+                    settings["id"] = widget_item_data.get('repository_id')
+                    settings["type"] = widget_item_data.get('widget_type')
+                    if settings.get('type') == WEKO_GRIDLAYOUT_ACCESS_COUNTER_TYPE:
+                        today = date.today().strftime("%Y-%m-%d")
+                        settings['created_date'] = today
+                    languages = settings.get("multiLangSetting")
+                    if (isinstance(languages, dict)
+                            and current_lang is not None):
+                        if languages.get(current_lang):
+                            data_display = languages[current_lang]
+                        elif languages.get('en'):
+                            data_display = languages['en']
+                        else:
+                            data_display["label"] = \
+                                WEKO_GRIDLAYOUT_DEFAULT_WIDGET_LABEL
+                    else:
+                        data_display["label"] = \
+                            WEKO_GRIDLAYOUT_DEFAULT_WIDGET_LABEL
+                    settings["multiLangSetting"] = data_display
+                    settings["name"] = data_display.get('label')
+                    data["widget-settings"] = settings
+                    result["data"][str(widget_item_data.get('widget_id'))] = data
+        except Exception as e:
+            result["error"] = str(e)
+
+        return result
+
     # TODO: Change to allow specifying which model to retrieve from
     @classmethod
     def get_widget_preview(cls, repository_id, default_language,
diff --git a/modules/weko-gridlayout/weko_gridlayout/static/js/weko_gridlayout/widget.design.js b/modules/weko-gridlayout/weko_gridlayout/static/js/weko_gridlayout/widget.design.js
index 2c98a162d6..478ccb4a9c 100644
--- a/modules/weko-gridlayout/weko_gridlayout/static/js/weko_gridlayout/widget.design.js
+++ b/modules/weko-gridlayout/weko_gridlayout/static/js/weko_gridlayout/widget.design.js
@@ -22,6 +22,8 @@ const GET_SYSTEM_LANG_URL = '/api/admin/get_system_lang';
 const SAVE_WIDGET_LAYOUT_SETTING_URL = "/api/admin/save_widget_layout_setting";
 const LOAD_WIDGET_DESIGN_SETTING_URL = "/api/admin/load_widget_design_setting";
 const LOAD_WIDGET_DESIGN_PAGE_SETTING_URL = '/api/admin/load_widget_design_page_setting/';
+const WIDGET_DESIGN_PREVIEW_URL = '/admin/widgetdesign/preview/';
+const GET_WIDGET_DETAIL = '/api/admin/get_widget_item_list'
 
 let windowObjectReference = null;
 let previousUrl; /* global variable that will store the
@@ -870,8 +872,12 @@ class ButtonLayout extends React.Component {
       "margin-left": "-15px"
 
     };
+    this.previewStyle = {
+      "margin-right": "10px"
+    };
     this.handleSave = this.handleSave.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
+    this.handlePreview = this.handlePreview.bind(this);
   }
 
   handleSave() {
@@ -913,6 +919,86 @@ class ButtonLayout extends React.Component {
     });
   }
 
+  handlePreview() {
+    console.log(this.props.repositoryId)
+    $.ajax({
+      url: GET_WIDGET_DETAIL,
+      type: 'GET',
+      dataType: "json",
+      contentType: 'application/json',
+      data: {
+        repository_id: this.props.repositoryId
+      },
+      success: function (res) {
+        let widgetDetails = res.data
+        this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
+          el = $(el);
+          let node = el.data('_gridstack_node');
+          let id = el.data("id");
+          let type = el.data("type");
+          let widget_id = el.data("widget_id");
+          let created_date = el.data("created_date");
+          if (!id) {
+            return;
+          } else if (MAIN_CONTENT_TYPE === type) {
+            isHasMainContent = true;
+          }
+
+          let settingWidgetDetail = {}
+          if (widget_id) {
+            const widgetDetail = widgetDetails[widget_id]["widget-settings"]
+            settingWidgetDetail = {
+              ...widgetDetail
+            }
+          }
+
+          let result = {
+            x: node.x,
+            y: node.y,
+            width: node.width,
+            height: node.height,
+            ...settingWidgetDetail
+          };
+          if (created_date) {
+            result.created_date = created_date;
+          }
+          return result;
+        }, this);
+        var widgetDesignData = this.serializedData.filter(function (el) {
+          return el != null;
+        });
+        let repositoryId = document.getElementById("repository-id").value;
+        let pageListSelectElement = document.getElementById("pages-list-select");
+        let pageId = "0";
+        let isMainLayout = true;
+        if (pageListSelectElement && pageListSelectElement.options) {
+          pageId = pageListSelectElement.value;
+          let option = pageListSelectElement.options[pageListSelectElement.selectedIndex];
+          if (option.dataset) {
+            isMainLayout = (String(option.dataset.isMainLayout) === "true");
+          }
+        }
+        if (String(repositoryId) === "0") {
+          alertModal("Please select the Repository.");
+          return false;
+        } else if (!widgetDesignData) {
+          //alert('Please add Widget to Preview panel.');
+          alertModal("Please add Widget to Preview panel.");
+          return false;
+        }
+
+        localStorage.setItem("widget_setting_data", JSON.stringify({
+          "widget-settings": widgetDesignData,
+          error: ""
+        }));
+        window.open(WIDGET_DESIGN_PREVIEW_URL, '_blank');
+      },
+      error: function (error) {
+        console.log(error);
+      }
+    });
+  }
+
   render() {
     return (
       <div className="form-group col-xs-10">
@@ -921,6 +1007,12 @@ class ButtonLayout extends React.Component {
           <span className="glyphicon glyphicon-saved" aria-hidden="true" />
           &nbsp;Save
         </button>
+        <button id="preview-widget"
+          className="form-group btn btn-success action-button"
+          style={this.previewStyle} onClick={this.handlePreview}>
+          <span className="glyphicon glyphicon-eye-open" aria-hidden="true" />
+          Preview
+        </button>
         <button id="clear-grid"
           className="form-group btn btn-info cancel-button"
           onClick={this.handleCancel}>
@@ -1300,7 +1392,7 @@ $(function () {
 });
 
 /**
- * Handle disable Save and Cancel button.
+ * Handle disable Save and Cancel and Preview button.
  */
 function disableButton() {
   let repositoryId = document.getElementById("repository-id").value;
@@ -1309,12 +1401,15 @@ function disableButton() {
   }
   let saveGrid = document.getElementById("save-grid");
   let clearGrid = document.getElementById("clear-grid");
+  let PreviewWidget = document.getElementById("preview-widget");
   if (String(repositoryId) === "0") {
     saveGrid.setAttribute('disabled', 'disabled');
     clearGrid.setAttribute('disabled', 'disabled');
+    PreviewWidget.setAttribute('disabled', 'disabled');
   } else {
     saveGrid.removeAttribute('disabled');
     clearGrid.removeAttribute('disabled');
+    PreviewWidget.removeAttribute('disabled');
   }
 }
 
diff --git a/modules/weko-gridlayout/weko_gridlayout/static/js/weko_gridlayout/widget.setting.js b/modules/weko-gridlayout/weko_gridlayout/static/js/weko_gridlayout/widget.setting.js
index 6e7aebc389..19123d9b82 100644
--- a/modules/weko-gridlayout/weko_gridlayout/static/js/weko_gridlayout/widget.setting.js
+++ b/modules/weko-gridlayout/weko_gridlayout/static/js/weko_gridlayout/widget.setting.js
@@ -1424,6 +1424,7 @@ class ComponentButtonLayout extends React.Component {
     this.addAlert = this.addAlert.bind(this);
     this.sendRequest = this.sendRequest.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
+    this.previewCommand = this.previewCommand.bind(this);
   }
 
   validateData(request) {
@@ -1735,6 +1736,127 @@ class ComponentButtonLayout extends React.Component {
     }
   }
 
+  previewCommand(event) {
+    event.preventDefault();
+    let requestUrl = "/admin/widgetdesign/preview/";
+
+    // Convert data
+    let data = this.props.data;
+    let multiLangData = data['multiLangSetting'];
+    let currentLabel = data['label'];
+    let currentDescription = data['settings'];
+    let currentLanguage = $("#language")[0].value;
+
+    let noData = true;
+    for (let key in currentDescription) {
+      if (currentDescription.hasOwnProperty(key) && currentDescription[key]) {
+        noData = false;
+        break;
+      }
+    }
+    if (currentLabel || !noData) {
+      let currentLangData = {
+        label: currentLabel,
+      };
+      if ([FREE_DESCRIPTION_TYPE, NOTICE_TYPE, ACCESS_COUNTER, HEADER_TYPE, FOOTER_TYPE].indexOf(data['widget_type']) > -1) {
+        currentLangData["description"] = currentDescription;
+      }
+      multiLangData[currentLanguage] = currentLangData;
+    } else {
+      delete multiLangData[currentLanguage];
+    }
+    if ((data['widget_type'] + "") === ACCESS_COUNTER) {
+      for (let key in multiLangData) {
+        if (multiLangData.hasOwnProperty(key)) {
+          let value = multiLangData[key];
+          value.description['access_counter'] = data.accessInitValue;
+          value.description['count_start_date'] = data.countStartDate;
+        }
+      }
+    }
+    this.props.getValueOfField('multiLangData', multiLangData);
+    this.props.getValueOfField('accessInitValue', data.accessInitValue);
+    this.props.getValueOfField('countStartDate', data.countStartDate);
+    data['multiLangSetting'] = multiLangData;
+    delete data['accessInitValue'];
+    delete data['countStartDate'];
+
+    if (data['widget_type'] === ACCESS_COUNTER) {
+      data.other_message = data.multiLangSetting[currentLanguage].description.other_message
+      data.preceding_message = data.multiLangSetting[currentLanguage].description.preceding_message
+      data.following_message = data.multiLangSetting[currentLanguage].description.following_message
+      data.access_counter = 0
+      data.created_date = data.nowDate
+      data.count_start_date = data.multiLangSetting[currentLanguage].description.count_start_date
+    } else if (data['widget_type'] === NOTICE_TYPE) {
+      data.read_more = data.multiLangSetting[currentLanguage].description.read_more
+      data.hide_the_rest = data.multiLangSetting[currentLanguage].description.hide_the_rest
+    } else if (data['widget_type'] === NEW_ARRIVALS) {
+      data = { ...data, ...data.settings }
+    } else if (data['widget_type'] === MENU_TYPE) {
+      data = { ...data, ...data.settings }
+
+      const endpoints = []
+      const options = $("#showPageSelect option").map(function () {
+        return {
+          value: $(this).val(),
+          label: $(this).text()
+        };
+      }).get();
+
+      options.forEach((item) => {
+        if (data.menu_show_pages.includes(item.value) || data.menu_show_pages.includes(Number(item.value))) {
+          endpoints.push({
+            is_main_layout: false,
+            title:item.label,
+            url: "/"
+          })
+        }
+      })
+      localStorage.setItem(`menu_endpoint_${this.props.data_id}`, JSON.stringify({
+        endpoints
+      }));
+    }
+
+    data.multiLangSetting = data.multiLangSetting[currentLanguage]
+    data.type = data.widget_type
+    data.name = data.multiLangSetting.label
+    data.x = 0
+    data.y = 0
+    data.height = 10
+    data.width = 10
+    data.widget_id = this.props.data_id
+    data.id = data.repository
+
+    let widgetSettingData = {
+    ...data
+    }
+
+    if (widgetSettingData['type'] !== HEADER_TYPE) {
+      delete widgetSettingData['fixedHeaderBackgroundColor']
+      delete widgetSettingData['fixedHeaderTextColor']
+    }
+
+    delete widgetSettingData['widget_type']
+    delete widgetSettingData['repository']
+    delete widgetSettingData['label']
+    delete widgetSettingData['settings']
+    delete widgetSettingData['enable']
+    delete widgetSettingData['language']
+    delete widgetSettingData['multiLanguageChange']
+    delete widgetSettingData['nowDate']
+    delete widgetSettingData['isDisableSaveBtn']
+
+    const widgetListForm = {
+      "error": "",
+      "widget-settings": [widgetSettingData]
+    }
+
+    localStorage.setItem("widget_setting_data", JSON.stringify(widgetListForm));
+    window.open(requestUrl, '_blank');
+
+  }
+
   render() {
     if (this.props.is_edit) {
       return (
@@ -1747,6 +1869,11 @@ class ComponentButtonLayout extends React.Component {
                     aria-hidden="true"/>
               &nbsp;Save
             </button>
+            <button onClick={this.previewCommand}
+              className="btn btn-success action-button style-my-button">
+              <span className="glyphicon glyphicon-eye-open" aria-hidden="true" />
+              &nbsp;Preview
+            </button>
             <button onClick={this.handleCancel}
                className="btn btn-info cancel-button style-my-button">
               <span className="glyphicon glyphicon-remove" aria-hidden="true"/>
@@ -1771,6 +1898,11 @@ class ComponentButtonLayout extends React.Component {
                     aria-hidden="true"/>
               &nbsp;Save
             </button>
+            <button onClick={this.previewCommand}
+              className="btn btn-success action-button style-my-button">
+              <span className="glyphicon glyphicon-eye-open" aria-hidden="true" />
+              &nbsp;Preview
+            </button>
             <button onClick={this.handleCancel}
                className="btn btn-info cancel-button style-my-button">
               <span className="glyphicon glyphicon-remove" aria-hidden="true"/>
diff --git a/modules/weko-gridlayout/weko_gridlayout/views.py b/modules/weko-gridlayout/weko_gridlayout/views.py
index 907004c43d..3f7649e6b8 100644
--- a/modules/weko-gridlayout/weko_gridlayout/views.py
+++ b/modules/weko-gridlayout/weko_gridlayout/views.py
@@ -327,6 +327,15 @@ def delete_widget_item():
     return jsonify(WidgetItemServices.delete_by_id(data.get('data_id')))
 
 
+@blueprint_api.route('/get_widget_item_list', methods=['GET'])
+@login_required
+def get_widget_item_list():
+    """Get Widget Item List."""
+    repository_id = request.args.get('repository_id')
+    results = WidgetDesignServices.get_widget_item_list(repository_id)
+    return jsonify(results)
+
+
 @blueprint_api.route('/get_account_role', methods=['GET'])
 @login_required
 def get_account_role():
diff --git a/modules/weko-theme/setup.py b/modules/weko-theme/setup.py
index f183c0bf65..dc4a75609b 100644
--- a/modules/weko-theme/setup.py
+++ b/modules/weko-theme/setup.py
@@ -93,6 +93,7 @@
             'weko_theme_js_detail_search = weko_theme.bundles:js_detail_search',
             'weko_theme_js_widget_lib = weko_theme.bundles:js_widget_lib',
             'weko_theme_js_widget = weko_theme.bundles:widget_js',
+            'weko_theme_js_preview_widget = weko_theme.bundles:js_preview_widget',
         ],
         'invenio_base.apps': [
             'weko_theme = weko_theme:WekoTheme',
diff --git a/modules/weko-theme/weko_theme/bundles.py b/modules/weko-theme/weko_theme/bundles.py
index 4abd69ec8c..dbc632c67d 100644
--- a/modules/weko-theme/weko_theme/bundles.py
+++ b/modules/weko-theme/weko_theme/bundles.py
@@ -116,3 +116,10 @@
     filters='jsmin',
     output="gen/widget.%(version)s.js",
 )
+
+js_preview_widget = Bundle(
+    widget_js,
+    'js/weko_theme/preview_widget.js',
+    filters='jsmin',
+    output="gen/widget_preview.%(version)s.js",
+)
diff --git a/modules/weko-theme/weko_theme/config.py b/modules/weko-theme/weko_theme/config.py
index 945768be1d..8b4a97c375 100644
--- a/modules/weko-theme/weko_theme/config.py
+++ b/modules/weko-theme/weko_theme/config.py
@@ -103,6 +103,8 @@
 
 COVER_TEMPLATE = 'weko_theme/page_cover.html'
 
+WEKO_THEME_PREVIEW_WIDGET_DESIGN = 'weko_theme/preview_widget_design.html'
+
 WEKO_THEME_INSTANCE_DATA_DIR = 'data'
 """ユーザーデータのィレクトリ."""
 
diff --git a/modules/weko-theme/weko_theme/static/js/weko_theme/preview_widget.js b/modules/weko-theme/weko_theme/static/js/weko_theme/preview_widget.js
new file mode 100644
index 0000000000..acbb851fa3
--- /dev/null
+++ b/modules/weko-theme/weko_theme/static/js/weko_theme/preview_widget.js
@@ -0,0 +1,39 @@
+/**
+ * プレビュー機能の要件に基づき、情報取得元をサーバからローカルストレージへ意図的に変更（オーバーライド）
+ * Get Widget design setting.
+ */
+function getWidgetDesignSetting() {
+  setTimeout(() => {
+    // If the current page is a widget page get
+    const widgetListLocal = localStorage.getItem("widget_setting_data");
+    const widgetListLocalJson = JSON.parse(widgetListLocal);
+    widgetList = widgetListLocalJson["widget-settings"];
+    if (Array.isArray(widgetList) && widgetList.length) {
+      $("#page_body").removeClass("hidden");
+      $("#" + MAIN_CONTENTS).addClass("grid-stack-item");
+      $("#header").addClass("grid-stack-item no-scroll-bar");
+      $("#footer").addClass("grid-stack-item no-scroll-bar");
+      // Check browser/tab is active
+      if (!document.hidden) {
+        buildWidget();
+      } else {
+        // In case browser/tab is inactive,
+        // create an event build widget when browser/tab active
+        window.addEventListener("focus", buildWidget);
+      }
+    } else {
+      // Pages are able to not have main content, so hide if widget is not present
+      if (community_id !== DEFAULT_REPOSITORY) {
+        $("#community_header").removeAttr("hidden");
+        $("footer > #community_footer").removeAttr("hidden");
+        $("#page_body").removeClass("hidden");
+      }
+    }
+
+    if (!document.hidden) {
+      toggleWidgetUI();
+    } else {
+      window.addEventListener("focus", toggleWidgetUI);
+    }
+  }, 0)
+}
diff --git a/modules/weko-theme/weko_theme/templates/weko_theme/preview_widget_design.html b/modules/weko-theme/weko_theme/templates/weko_theme/preview_widget_design.html
new file mode 100644
index 0000000000..74edce6394
--- /dev/null
+++ b/modules/weko-theme/weko_theme/templates/weko_theme/preview_widget_design.html
@@ -0,0 +1,57 @@
+{#
+# This file is part of WEKO3.
+# Copyright (C) 2017 National Institute of Informatics.
+#
+# WEKO3 is free software; you can redistribute it
+# and/or modify it under the terms of the GNU General Public License as
+# published by the Free Software Foundation; either version 2 of the
+# License, or (at your option) any later version.
+#
+# WEKO3 is distributed in the hope that it will be
+# useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+# General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with WEKO3; if not, write to the
+# Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston,
+# MA 02111-1307, USA.
+#}
+
+{%- extends config.THEME_FRONTPAGE_TEMPLATE %}
+
+{%- block head %}
+  {{ super() }}
+  <style>
+    .widget-design-preview{
+      background-color: white;
+      opacity: 0.2;
+      width: 100vw;
+      z-index:104;
+      height: 100vh;
+      font-size: 10rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: fixed;
+    }
+  </style>
+{%- endblock head %}
+
+{%- block javascript %}
+  {% include config.THEME_JAVASCRIPT_TEMPLATE %}
+  {% assets "weko_theme_js" %}<script src="{{ ASSET_URL }}"></script>{% endassets %}
+  {% assets "weko_theme_js_treeview" %}<script src="{{ ASSET_URL }}"></script>{% endassets %}
+  {% assets "weko_theme_js_top_page" %}<script src="{{ ASSET_URL }}"></script>{% endassets %}
+  {% assets "weko_theme_js_detail_search" %}<script src="{{ ASSET_URL }}"></script>{% endassets %}
+  {% assets "invenio_search_ui_search_js" %}<script src="{{ ASSET_URL }}"></script>{% endassets %}
+  {% assets "weko_search_ui_dependencies_js" %}<script src="{{ ASSET_URL }}"></script>{% endassets %}
+  {% assets "weko_search_ui_js" %}<script src="{{ ASSET_URL }}"></script>{% endassets %}
+  {% assets "weko_theme_js_preview_widget" %}<script src="{{ ASSET_URL }}"></script>{% endassets %}
+  <script src="{{ url_for('static', filename='js/weko_theme/sidebar.js')}}"></script>
+{%- endblock javascript %}
+
+{%- block body %}
+      <div class="widget-design-preview">Preview</div>
+  {{ super() }}
+{%- endblock body %}