diff --git a/Frontend/_solarEnergy.html b/Frontend/_solarEnergy.html
new file mode 100644
index 0000000..878e92b
--- /dev/null
+++ b/Frontend/_solarEnergy.html
@@ -0,0 +1,39 @@
+<main id="js-page-content" role="main" class="page-content">
+  <h1 class="p-2 mb-0">太陽能管理</h1>
+  <div class="row">
+    <div class="col-sm-12 col-xl-12">
+      <div id="pageIframe" ></div>
+    </div>
+  </div>
+</main>
+
+<style>
+  
+</style>
+
+<script>
+
+$(function () {
+  initPage();
+});
+
+function initPage() {
+  // 初始載入 iframe
+  $('#pageIframe').html(`
+    <iframe src="/ord?file:^Solar/Site.px|view:?fullScreen=true"
+      width="100%"
+      height="600">
+    </iframe>
+  `);
+  // 監聽 iframe 中的點擊事件
+  $('#pageIframe iframe').on('load', function() {
+    $(this).contents().on('click', function() {
+      sessionStorage.setItem("solar", JSON.stringify({'siteID': "133", 'siteName': "大眾電腦內湖總部"}));
+      $("#app").load(`_solarEnergyItem.html`);
+    });
+  });
+
+  
+}
+
+</script>
diff --git a/Frontend/_solarEnergyItem.html b/Frontend/_solarEnergyItem.html
new file mode 100644
index 0000000..5d0349f
--- /dev/null
+++ b/Frontend/_solarEnergyItem.html
@@ -0,0 +1,90 @@
+<main id="js-page-content" role="main" class="page-content">
+  <h1 class="p-2 mb-0">太陽能管理</h1>
+  <div class="row px-2 py-3">
+          <div class="col-12 pb-3">
+            <div class="d-flex align-items-center">
+              <button 
+              class="btn btn-info" 
+              id="backButton"
+              onclick="goback()"
+              >回上一頁</button>
+              <i class="fa fa-check-circle text-success fs-1-1 ml-3 " aria-hidden="true"></i>
+              <label id="curLevText" class="fs-1 ml-2 mb-0"></label>
+            </div>
+            <div>
+            </div>
+          </div>
+          <div class="col-12 ">
+            <ul class="nav nav-tabs w-100" role="tablist">
+              <li class="nav-item">
+                  <a class="nav-link active" data-toggle="tab" href="#tab_borders_icons-1"
+                     role="tab"><i class="fal fa-chart-line mr-1"></i> 即時資訊</a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-2"
+                     role="tab"><i class="fal fa-file mr-1"></i> 基本資料</a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-3"
+                     role="tab"><i class="fal fa-cog mr-1"></i> 逆變器監控</a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-4"
+                     role="tab"><i class="fal fa-chart-bar mr-1"></i> 逆變器分析</a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-5"
+                     role="tab"><i class="fal fa-chart-area mr-1"></i> 歷史資料</a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-6"
+                     role="tab"><i class="fal fa-bell mr-1"></i> 異常紀錄</a>
+              </li>
+            </ul>
+            <div class="tab-content border border-top-0 p-3 w-100">
+              <div class="tab-pane fade show active" id="tab_borders_icons-1" role="tabpanel" data-id="realTimeInfo">
+                  1
+              </div>
+              <div class="tab-pane fade" id="tab_borders_icons-2" role="tabpanel" data-id="basicInfo">
+                  2
+              </div>
+              <div class="tab-pane fade" id="tab_borders_icons-3" role="tabpanel" data-id="invrMon">
+                  3
+              </div>
+              <div class="tab-pane fade" id="tab_borders_icons-4" role="tabpanel" data-id="invrAnal">
+                  4
+              </div>
+              <div class="tab-pane fade" id="tab_borders_icons-5" role="tabpanel" data-id="HistData">
+                  5
+              </div>
+              <div class="tab-pane fade" id="tab_borders_icons-6" role="tabpanel" data-id="abnRec">
+                  6
+              </div>
+            </div>
+          </div>
+  </div>
+</main>
+
+<style>
+  
+</style>
+
+<script>
+$(function () {
+  initializePage();
+})
+function goback() {
+  sessionStorage.removeItem('solar');
+  $("#app").load(`_solarEnergy.html`);
+}
+function initializePage() {
+  const solarData = JSON.parse(sessionStorage.getItem('solar'));
+  
+  console.log("Site ID:", solarData.siteID);
+  console.log("Site Name:", solarData.siteName);
+  
+  // 使用這些數據更新頁面
+  $("#curLevText").text(solarData.siteName);
+}
+
+</script>
diff --git a/Frontend/index.html b/Frontend/index.html
index da281c0..044c759 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -2058,7 +2058,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         function (res) {
           if (!res || res.code != "0000" || !res.data) {
           } else {
-            let strHtml = `<div class="btn-group mx-4">
+            let strHtml = `<div class="btn-group ml-5">
                                                                                               <a href="javascript:;" id="homeBtn" data-toggle="dropdown" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
                                                                                                   <i class="fal fa-home fa-2x"></i><br>首頁
                                                                                               </a>
@@ -2071,7 +2071,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
             $.each(res.data, function (i, v) {
               if (v.authCode == "PF1") {
-                strHtml += `<div class="btn-group mx-4" >
+                strHtml += `<div class="btn-group ml-5" >
                                                                                                   <a href="javascript:;" id="sysMonTopBtn" class="text-center dropdown-toggle" data-toggle="dropdown" data-tabname="topFunBtn" class="text-center">
                                                                                                       <i class="fal fa-tv fa-2x"></i><br>${v.subName}
                                                                                                   </a>
@@ -2100,7 +2100,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                               : v.authCode == "PF8"
                                 ? "fa-user"
                                 : "";
-                strHtml += `<div class="btn-group mx-4">
+                strHtml += `<div class="btn-group ml-5">
                                                                                                   <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
                                                                                                      data-page="${v.showView}">
                                                                                                       <i class="fal ${icon} fa-2x"></i><br>${v.subName}
@@ -2108,7 +2108,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                                                                               </div>`;
               }
             });
-
+            strHtml += `<div class="btn-group ml-5">
+                        <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
+                                                                                                     data-page="solarEnergy">
+                            <i class="fal fa-sun fa-2x"></i><br>太陽能管理
+                        </a>
+                    </div>`
             $("#froLisPage").html(strHtml);
 
             // $("#homeBtn").YTNavbar("init");