diff --git a/modules/ruling_weather/_ruling_weather_widget1.html.erb b/modules/ruling_weather/_ruling_weather_widget1.html.erb
new file mode 100644
index 0000000..1a1b2e8
--- /dev/null
+++ b/modules/ruling_weather/_ruling_weather_widget1.html.erb
@@ -0,0 +1,98 @@
+<div>
+  <style type="text/css">
+    .weather_widget1{
+      background: none;
+      display: inline-block;
+      width: 100%;
+      padding: 1.5em 0.8em;;
+      font-size:inherit;
+      font-weight: 500;
+      background: #accbe7;
+    }
+    .weather_widget1 .white_text{
+      color: #333;
+      font-size:inherit;
+      overflow-wrap: break-word;
+    }
+    .weatherICON{
+      padding: 0;
+    }
+
+    .weatherTXT{
+      font-weight: 700;
+    }
+    .UviItem{
+      font-weight: 700;
+    }
+    .weatherItem{
+      font-weight: 700;
+    }
+    .weatherBlock{
+      margin-bottom:1em;
+    }
+    @media(min-width:769px){
+      .weatherICON img{
+          width: 60%;
+      }
+      .weather_widget1{
+          text-align: center;
+      }
+    }
+    @media(max-width:769px){
+      .weatherICON img{
+        width: 100%;
+        }
+      .weatherICON {
+        padding: 0;
+        width: 50%;
+        margin: auto;
+      }
+      .one{
+          float: left;
+      }
+      .two{
+          float: right;
+      }
+      .three{
+          clear: both;
+          float: left;
+      }
+      .four{
+          float: right;
+      }
+      .five{
+          clear: both;
+      }
+    }
+
+  </style>
+  <div class="weather_widget1" data-list="weather" data-level="0">
+    <div class="col-sm-12 columns weatherBlock">
+      <div class="col-sm-4 columns weatherICON">
+        <img src="{{wx_svg}}" data-name="wx_svg" title="{{wx_text}}" alt="{{wx_text}}" />
+      </div>
+      <div class="col-sm-4 columns one">
+        <div class="weatherTXT" data-name="wx_text">{{wx_text}}</div>
+        <div class="Tempature white_text" data-name="avgt">{{avgt}}<span>℃</span></div>
+      </div>
+      <div class="col-sm-4 columns two">
+        <div class="UviItem">{{uv-head}}</div>
+        <div class="UviText white_text" data-name="uvi_text">{{uvi_text}}</div>
+      </div>
+    </div>
+    <div class="col-sm-12 columns weatherBlock">
+      <div class="col-sm-4 columns three">
+        <div class="weatherItem">{{relative_humidity-head}}</div>
+        <div class="weatherItemNum white_text"><span data-name="rh">{{rh}}</span>%</div>
+      </div>
+      <div class="col-sm-4 columns four">
+        <div class="weatherItem">{{current_wind_speed-head}}</div>
+        <div class="weatherItemNum white_text"><span data-name="ws">{{ws}}</span>m/s</div>
+      </div>
+      <div class="col-sm-4 columns five">
+        <div class="weatherItem">{{accumulated_rainfall-head}}</div>
+        <div class="weatherItemNum white_text"><span data-name="rain">{{rain}}</span>mm</div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/modules/ruling_weather/_ruling_weather_widget2.html.erb b/modules/ruling_weather/_ruling_weather_widget2.html.erb
new file mode 100644
index 0000000..90a50e4
--- /dev/null
+++ b/modules/ruling_weather/_ruling_weather_widget2.html.erb
@@ -0,0 +1,52 @@
+<div>
+  <style type="text/css">
+    .weather_widget1{
+      background: #06dd95;
+      display: inline-block;
+      width: 100%;
+      padding: 1.5em 0.8em;;
+      font-size: 1.3em;
+      font-weight: bold;
+    }
+    .weather_widget1 .white_text{
+      color: #ffffff;
+      font-size: 1.5em;
+      overflow-wrap: break-word;
+    }
+    .weatherICON{
+      padding: 0;
+    }
+    .weatherICON img{
+      width: 100%;
+    }
+  </style>
+  <div class="weather_widget1" data-list="weather" data-level="0">
+    <div class="col-sm-12 columns weatherBlock">
+      <div class="col-sm-4 columns weatherICON">
+        <img src="{{wx_svg}}" data-name="wx_svg" title="{{wx_text}}" alt="{{wx_text}}" />
+      </div>
+      <div class="col-sm-4 columns">
+        <div class="weatherTXT" data-name="wx_text">{{wx_text}}</div>
+        <div class="Tempature white_text" data-name="avgt">{{avgt}}<span>℃</span></div>
+      </div>
+      <div class="col-sm-4 columns">
+        <div class="UviItem">{{uv-head}}</div>
+        <div class="UviText white_text" data-name="uvi_text">{{uvi_text}}</div>
+      </div>
+    </div>
+    <div class="col-sm-12 columns weatherBlock">
+      <div class="col-sm-4 columns">
+        <div class="weatherItem">{{relative_humidity-head}}</div>
+        <div class="weatherItemNum white_text"><span data-name="rh">{{rh}}</span>%</div>
+      </div>
+      <div class="col-sm-4 columns">
+        <div class="weatherItem">{{current_wind_speed-head}}</div>
+        <div class="weatherItemNum white_text"><span data-name="ws">{{ws}}</span>m/s</div>
+      </div>
+      <div class="col-sm-4 columns">
+        <div class="weatherItem">{{accumulated_rainfall-head}}</div>
+        <div class="weatherItemNum white_text"><span data-name="rain">{{rain}}</span>mm</div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/modules/ruling_weather/info.json b/modules/ruling_weather/info.json
new file mode 100644
index 0000000..126e501
--- /dev/null
+++ b/modules/ruling_weather/info.json
@@ -0,0 +1,22 @@
+{
+	"frontend": [
+	],
+	"widgets" : [
+		{
+			"filename" : "ruling_weather_widget1",
+			"name" : {
+				"zh_tw" : "1. 天氣呈現樣式1",
+				"en" : "1. Weather layout 1"
+				},
+			"thumbnail" : "weather1_thumbs.png"
+		},
+		{
+			"filename" : "ruling_weather_widget2",
+			"name" : {
+				"zh_tw" : "2. 天氣呈現樣式2",
+				"en" : "2. Weather layout 2"
+				},
+			"thumbnail" : "weather2_thumbs.png"
+		}
+	]
+}
\ No newline at end of file
diff --git a/modules/ruling_weather/thumbs/weather1_thumbs.png b/modules/ruling_weather/thumbs/weather1_thumbs.png
new file mode 100644
index 0000000..676d874
Binary files /dev/null and b/modules/ruling_weather/thumbs/weather1_thumbs.png differ
diff --git a/modules/ruling_weather/thumbs/weather2_thumbs.png b/modules/ruling_weather/thumbs/weather2_thumbs.png
new file mode 100644
index 0000000..e4bcf01
Binary files /dev/null and b/modules/ruling_weather/thumbs/weather2_thumbs.png differ