diff --git a/app/assets/javascripts/events.js.coffee b/app/assets/javascripts/events.js.coffee
index 522e767..7b9e734 100644
--- a/app/assets/javascripts/events.js.coffee
+++ b/app/assets/javascripts/events.js.coffee
@@ -61,6 +61,13 @@ ready = ->
       (calEvent) ->
         document.location = "../events/#{calEvent.id}/edit"
 
+  $('.fc-event').each ->
+    $(this).draggable
+      appendTo: 'body'
+      zIndex: 999
+      revert: true
+      helper: 'clone'
+
   $('#eventStartTime').datetimepicker
     format: "YYYY/MM/DD H:mm"
     icons:
@@ -81,5 +88,11 @@ ready = ->
       previous: "fa fa-chevron-left"
       next: "fa fa-chevron-right"
 
+  $('#myTab a:last').tab('show')
+
+
+  console.log($('#point_date').position().top)
+  $('#external-events').scrollTop($('#point_date').position().top)
+
 $(document).ready(ready)
 $(document).on('page:load', ready)
diff --git a/app/assets/stylesheets/override_bootstrap.css b/app/assets/stylesheets/override_bootstrap.css
new file mode 100644
index 0000000..49a0787
--- /dev/null
+++ b/app/assets/stylesheets/override_bootstrap.css
@@ -0,0 +1,36 @@
+.container{
+    width: 95%;
+}
+
+#calendar{
+    width: 80%;
+    float: right;
+}
+
+.nav-tabs{
+    width: 19%;
+}
+
+.tab-content{
+    width: 19%;
+}
+
+#external-events {
+	float: left;
+    position: relative;
+    width: 100%;
+    height: 500px;
+    padding: 0 10px;
+    text-align: left;
+    overflow: scroll;
+}
+
+#external-events .fc-event {
+	margin: 10px 0;
+	cursor: pointer;
+    height: 20px;
+}
+
+.date{
+    font-size: 20px;
+}
\ No newline at end of file
diff --git a/app/controllers/events_controller.rb b/app/controllers/events_controller.rb
index dc108e6..f7e910b 100644
--- a/app/controllers/events_controller.rb
+++ b/app/controllers/events_controller.rb
@@ -1,3 +1,5 @@
+require 'date'
+
 class EventsController < ApplicationController
   before_action :set_event, only: [:show, :edit, :update, :destroy]
 
@@ -9,6 +11,10 @@ def index
 
     #add_event_from_google(g_cal)
 
+    @events = Event.all.order("dtstart ASC")
+    @point_date = DateTime.now.prev_year.beginning_of_month
+    @point_event = Event.where("dtstart  >= ?", @point_date).order("dtstart ASC").first
+
     respond_to do |format|
       format.html
       format.json {render json: Event.all.map(&:to_event)}
diff --git a/app/views/events/_event_list.html.erb b/app/views/events/_event_list.html.erb
new file mode 100644
index 0000000..e0992b5
--- /dev/null
+++ b/app/views/events/_event_list.html.erb
@@ -0,0 +1,20 @@
+<div id="external-events">
+  <% prev_event_month = nil %>
+  <% events.each do |event| %>
+    <% if prev_event_month != event.dtstart.beginning_of_month %>
+      <% if event.id == point_event.id %>
+        <div id="point_date" class="date">
+        <%= event.dtstart.strftime('%B') %> <%= event.dtstart.year %>
+        </div>
+      <% else %>
+        <div class="date">
+        <%= event.dtstart.strftime('%B') %> <%= event.dtstart.year %>
+        </div>
+      <% end %>
+    <% end %>
+    <div class="fc-event">
+      <%= event.summary %>
+    </div>
+    <% prev_event_month = event.dtstart.beginning_of_month %>
+  <% end %>
+</div>
diff --git a/app/views/events/_side_menu.html.erb b/app/views/events/_side_menu.html.erb
new file mode 100644
index 0000000..d77c75c
--- /dev/null
+++ b/app/views/events/_side_menu.html.erb
@@ -0,0 +1,13 @@
+  <ul class="nav nav-tabs" role="tablist" id="myTab">
+    <li role="presentation" class="active"><a href="#calendars" aria-controls="calendars" role="tab" data-toggle="tab">calendars</a></li>
+    <li role="presentation"><a href="#old_events" aria-controls="old_events" role="tab" data-toggle="tab">old events</a></li>
+  </ul>
+
+  <div class="tab-content" id="tab-con">
+    <div role="tabpanel" class="tab-pane active" id="calendars">
+    </div>
+    <div role="tabpanel" class="tab-pane" id="old_events">
+        <%= render :partial => "events/event_list" , :locals => {:events => events, :point_event => point_event} %>
+    </div>
+  </div>
+
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index a95b178..9c60d40 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <h1>Calendar</h1>
-
+<%= render :partial => "events/side_menu" , :locals => {:events => @events, :point_event => @point_event} %>
 <%= render :partial => "events/create_form_of_modal" %>
-
 <div id="calendar"></div>