diff --git a/Gemfile b/Gemfile
index 11145ebd..6eaa2a60 100644
--- a/Gemfile
+++ b/Gemfile
@@ -14,7 +14,7 @@ gem 'sass-rails', '>= 6'
 # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
 gem 'webpacker', '~> 5.0'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
-gem 'turbolinks', '~> 5'
+# gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.7'
 # Use Redis adapter to run Action Cable in production
@@ -66,4 +66,5 @@ gem 'dotenv-rails'
 gem 'jay_flavored_markdown', git: 'https://github.com/nomlab/jay_flavored_markdown'
 
 gem 'kaminari'
-gem 'ransack'
\ No newline at end of file
+gem 'ransack'
+gem 'turbo-rails'
\ No newline at end of file
diff --git a/Gemfile.lock b/Gemfile.lock
index bc0b5490..2fd0c8d4 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -275,9 +275,10 @@ GEM
       rails (>= 6.0.0)
     thor (1.1.0)
     tilt (2.0.10)
-    turbolinks (5.2.1)
-      turbolinks-source (~> 5.2)
-    turbolinks-source (5.2.0)
+    turbo-rails (1.5.0)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
     web-console (4.1.0)
@@ -331,7 +332,7 @@ DEPENDENCIES
   spring
   sqlite3 (~> 1.4)
   tailwindcss-rails (~> 0.3.3)
-  turbolinks (~> 5)
+  turbo-rails
   tzinfo-data
   web-console (>= 4.1.0)
   webdrivers
diff --git a/app/controllers/tasks_controller.rb b/app/controllers/tasks_controller.rb
index f1c64c6d..810193f2 100644
--- a/app/controllers/tasks_controller.rb
+++ b/app/controllers/tasks_controller.rb
@@ -31,6 +31,12 @@ def index
       @q.sorts = sort_check(params[:q][:s])
     end
     @tasks = @q.result.page(params[:page]).per(50).includes(:user, :state)
+    @mytasks = @q.result.joins(:user).where(users: {screen_name: current_user&.screen_name}).page(params[:page]).per(50).includes(:user, :state)
+
+    respond_to do |format|
+      format.html
+      format.turbo_stream
+    end
   end
 
   # GET /tasks/1 or /tasks/1.json
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index ddcdede2..45571d10 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -5,7 +5,7 @@
 
 import '@fortawesome/fontawesome-free/js/all';
 import Rails from "@rails/ujs"
-import Turbolinks from "turbolinks"
+// import Turbolinks from "turbolinks"
 import * as ActiveStorage from "@rails/activestorage"
 import "channels"
 // ここから追加
@@ -15,7 +15,8 @@ window.$ = window.jQuery = jQuery;
 import "jquery-textcomplete"
 
 Rails.start()
-Turbolinks.start()
+// Turbolinks.start()
 ActiveStorage.start()
 
 import "stylesheets/application"
+import "@hotwired/turbo-rails"
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 8f7da8bb..b65eeae7 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -14,8 +14,8 @@
     <%= stylesheet_link_tag 'jfm' %>
     <%= stylesheet_link_tag 'github-markdown' %>
 
-    <%# <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> %>
-
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.bundle.min.js"></script>
     <%# <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> %>
     <%# <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> %>
     <%# <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> %>
diff --git a/app/views/tasks/_task.html.erb b/app/views/tasks/_task.html.erb
new file mode 100644
index 00000000..7d6fffb0
--- /dev/null
+++ b/app/views/tasks/_task.html.erb
@@ -0,0 +1,34 @@
+<div class="p-3 my-3 border rounded flex space-x-4">
+  <div>
+    <p class="text-xl">
+      <% if task.completed? %>
+        <i class="far fa-check-circle" style="color: <%= task.state.color %>;"></i>
+      <% else %>
+        <i class="far fa-dot-circle" style="color: <%= task.state.color %>;"></i>
+      <% end %>
+      <%= link_to task.content, task %>
+    </p>
+    <p>
+    <% if task.project %>
+      <%= link_to task.project.name, task.project %>
+    <% end %>
+    <%= link_to task.assigner.name, task.assigner %>
+    <%= task.show_days_ago.round.to_s + "日前" %>
+    <% task.tags.each do |tag| %>
+      <%= link_to tag_label(tag), tag %>
+    <% end %>
+    </p>
+  </div>
+  <div class="flex-1">
+    <% if task.overdue? %>
+      <p class="overdue_mark">期限切れです！</p>
+    <% else %>
+      <p class="ongoing_mark"><%= days_to_deadline_as_string task %></p>
+    <% end %>
+  </div>
+  <% if logged_in? %>
+    <%= link_to '詳細', task %>
+    <%= link_to '編集', edit_task_path(task) %>
+    <%= link_to '削除', task, method: :delete, data: { confirm: 'このタスクを削除しますか？' } %>
+  <% end %>
+</div>
\ No newline at end of file
diff --git a/app/views/tasks/index.html.erb b/app/views/tasks/index.html.erb
index 9c4d920e..f8ba40f7 100644
--- a/app/views/tasks/index.html.erb
+++ b/app/views/tasks/index.html.erb
@@ -23,45 +23,34 @@
   <%= link_to '新規作成', new_task_path, class: "my-auto text-white bg-red-400 rounded p-2" %>
 </div>
 
-<% @tasks.each do |task| %>
-  <div class="p-3 my-3 border rounded flex space-x-4">
-    <div>
-      <p class="text-xl">
-        <% if task.completed? %>
-          <i class="far fa-check-circle" style="color: <%= task.state.color %>;"></i>
-        <% else %>
-          <i class="far fa-dot-circle" style="color: <%= task.state.color %>;"></i>
-        <% end %>
-        <%= link_to task.content, task %>
-      </p>
-      <p>
-      <% if task.project %>
-        <%= link_to task.project.name, task.project %>
-      <% end %>
-      <%= link_to task.assigner.name, task.assigner %>
-      <%= task.show_days_ago.round.to_s + "日前" %>
-      <% task.tags.each do |tag| %>
-        <%= link_to tag_label(tag), tag %>
-      <% end %>
-      </p>
-    </div>
-    <div class="flex-1">
-      <% if task.overdue? %>
-        <p class="overdue_mark">期限切れです！</p>
-      <% else %>
-        <p class="ongoing_mark"><%= days_to_deadline_as_string task %></p>
-      <% end %>
-    </div>
-    <% if logged_in? %>
-      <%= link_to '詳細', task %>
-      <%= link_to '編集', edit_task_path(task) %>
-      <%= link_to '削除', task, method: :delete, data: { confirm: 'このタスクを削除しますか？' } %>
+<ul class="text-center nav nav-tabs" id="myTab" role="tablist">
+  <li class="nav-item w-50 bg-light">
+    <a class="nav-link active link-text" id="my-tasks-tab" data-toggle="tab" href="#my-tasks" role="tab" aria-controls="my-tasks" aria-selected="true"><%= current_user&.screen_name %>のタスク</a>
+  </li>
+  <li class="nav-item w-50 bg-light">
+    <a class="nav-link link-text" id="all-tasks-tab" data-toggle="tab" href="#all-tasks" role="tab" aria-controls="all-tasks" aria-selected="false">すべてのタスク</a>
+  </li>
+</ul>
+
+<div class="tab-content" id="myTabContent">
+  <div class="tab-pane fade show active" id="my-tasks" role="tabpanel" aria-labelledby="my-tasks-tab">
+    <%= turbo_frame_tag "my-tasks" do %>
+      <%= render @mytasks %>
+      <div class="row">
+        <div class="col-md-12 col-sm-12 text-center hidden-xs">
+          <%= raw(paginate @mytasks) %>
+        </div>
+      </div>
     <% end %>
   </div>
-<% end %>
-
-<div class="row">
-  <div class="col-md-12 col-sm-12 text-center hidden-xs">
-    <%= raw(paginate @tasks) %>
+  <div class="mb-5 tab-pane fade" id="all-tasks" role="tabpanel" aria-labelledby="all-tasks-tab">
+    <%= turbo_frame_tag "all-tasks" do %>
+      <%= render @tasks %>
+      <div class="row">
+        <div class="col-md-12 col-sm-12 text-center hidden-xs">
+          <%= raw(paginate @tasks) %>
+        </div>
+      </div>
+    <% end %>
   </div>
 </div>