diff --git a/app/models/activity.rb b/app/models/activity.rb
index 464af9e..869ec68 100644
--- a/app/models/activity.rb
+++ b/app/models/activity.rb
@@ -72,6 +72,8 @@ class Activity
       fields_to_show.collect do |t|
         if t == "activity_title"
           pd_data << { "data_title" => "<a href='#{OrbitHelper.url_to_plugin_show(p.to_param,'personal_activity')}' title='#{p.send(t)}'>#{p.send(t)}" }
+        elsif t.include?("date")
+          pd_data << { "data_title" => (p.send(t).strftime('%Y-%m-%d') rescue p.send(t)) }
         else
           pd_data << { "data_title" => p.send(t) }
         end
@@ -97,9 +99,9 @@ class Activity
     when 'activity_area'
       value = self.activity_area rescue ''
     when 'activity_start_date'
-      value = self.activity_start_date rescue ''
+      value = self.activity_start_date.strftime('%Y-%m-%d') rescue ''
     when 'activity_end_date'
-      value = self.activity_end_date rescue ''
+      value = self.activity_end_date.strftime('%Y-%m-%d') rescue ''
     when 'year'
       value = self.year rescue ''
     when 'note'
diff --git a/modules/personal_activity/index.html.erb b/modules/personal_activity/index.html.erb
new file mode 100644
index 0000000..6f6d760
--- /dev/null
+++ b/modules/personal_activity/index.html.erb
@@ -0,0 +1,35 @@
+<table class="table table-hover table-striped projects-index activities-index dt-responsive nowrap">
+  <caption><h3>{{widget-title}}</h3></caption>
+  <thead>
+    <tr>
+      <th class="col-md-1">{{year}}</th>
+      <th class="col-md-2">{{activity_name}}</th>
+      <th class="col-md-1">{{activity_organizer}}</th>
+      <th class="col-md-2 min-tablet">{{activity_area}}</th>
+      <th class="col-md-2 min-tablet-l">{{activity_start_date}}</th>
+      <th class="col-md-2 min-tablet-l">{{activity_end_date}}</th>
+      <th class="col-md-2 min-tablet-l">{{note}}</th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="activities">
+    <tr>
+      <td>{{year}}</td>
+      <td><a href="{{link_to_show}}">{{activity_name}}</a></td>
+      <td>{{activity_organizer}}</td>
+      <td>{{activity_area}}</td>
+      <td date-format="%Y-%m-%d">{{activity_start_date}}</td>
+      <td date-format="%Y-%m-%d">{{activity_end_date}}</td>
+      <td>{{note}}</td>
+    </tr>
+  </tbody>
+</table>
+{{pagination_goes_here}}
+
+<script>
+$('table.activities-index').DataTable({
+  searching: false,
+  paging:   false,
+  ordering: false,
+  info:     false
+});
+</script>
diff --git a/modules/personal_activity/index_search1.html.erb b/modules/personal_activity/index_search1.html.erb
new file mode 100644
index 0000000..fff8713
--- /dev/null
+++ b/modules/personal_activity/index_search1.html.erb
@@ -0,0 +1,62 @@
+<script type="text/javascript">
+$( ".selectbox" ).ready(function() {
+  var option_len = $(".search-widget option").length
+  for (var i=0;i<option_len;i++){
+    if($(".search-widget option").eq(i).data('selected')=="selected"){
+      $(".search-widget option").eq(i).attr('selected','selected')
+    }
+  }
+});
+</script>
+
+<div class="search-widget personal-activities">
+  <h3>{{widget-title}}</h3>
+  <form action="{{url}}"  method="get">
+  <label for="selectbox">{{select_text}}</label>
+   <select class="selectbox" name="selectbox" data-level="0" data-list="choice">
+    <option value={{choice_value}} data-selected='{{choice_select}}' >
+    {{choice_show}}</option>
+  </select>
+  <label for="keywords">{{search_text}}</label>
+  <input name="keywords" id="keywords" placeholder="Keywords" type="text" value="{{search_value}}" title="keywords">
+  <button>Go</button>
+  <a id="filter" style="" href="{{url}}">Clear</a>
+  </form>
+ </div>
+
+<table class="table table-hover table-striped projects-index activities-index dt-responsive nowrap">
+  <caption><h3>{{widget-title}}</h3></caption>
+  <thead>
+    <tr>
+      <th class="col-md-1">{{year}}</th>
+      <th class="col-md-2">{{activity_name}}</th>
+      <th class="col-md-1">{{activity_organizer}}</th>
+      <th class="col-md-2 min-tablet">{{activity_area}}</th>
+      <th class="col-md-2 min-tablet-l">{{activity_start_date}}</th>
+      <th class="col-md-2 min-tablet-l">{{activity_end_date}}</th>
+      <th class="col-md-2 min-tablet-l">{{note}}</th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="activities">
+    <tr>
+      <td>{{year}}</td>
+      <td><a href="{{link_to_show}}">{{activity_name}}</a></td>
+      <td>{{activity_organizer}}</td>
+      <td>{{activity_area}}</td>
+      <td>{{activity_start_date}}</td>
+      <td>{{activity_end_date}}</td>
+      <td>{{note}}</td>
+    </tr>
+  </tbody>
+</table>
+{{pagination_goes_here}}
+
+<script>
+$('table.activities-index').DataTable({
+  searching: false,
+  paging:   false,
+  ordering: false,
+  info:     false
+});
+</script>
+
diff --git a/modules/personal_activity/info.json b/modules/personal_activity/info.json
new file mode 100644
index 0000000..cda3d13
--- /dev/null
+++ b/modules/personal_activity/info.json
@@ -0,0 +1,12 @@
+{
+    "frontend": [
+        {
+            "filename" : "index",
+            "name" : {
+                "zh_tw" : "1. 列表",
+                "en" : "1. List"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/modules/personal_activity/show.html.erb b/modules/personal_activity/show.html.erb
new file mode 100644
index 0000000..b183818
--- /dev/null
+++ b/modules/personal_activity/show.html.erb
@@ -0,0 +1,8 @@
+<table class="table table-striped plugin-show-table">
+    <tbody data-list="plugin_datas" data-level="0">
+        <tr>
+            <th class="{{title_class}}">{{title}}</th>
+            <td class="{{value_class}}">{{value}}</td>
+        </tr>
+    </tbody>
+</table>
diff --git a/modules/personal_activity/thumbs/thumb.png b/modules/personal_activity/thumbs/thumb.png
new file mode 100644
index 0000000..266af56
Binary files /dev/null and b/modules/personal_activity/thumbs/thumb.png differ