diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 068a33797..0d44d672e 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -47,6 +47,7 @@
 @import "admin/**/*";
 @import "budgets/**/*";
 @import "debates/**/*";
+@import "documents/**/*";
 @import "layout/**/*";
 @import "machine_learning/**/*";
 @import "moderation/**/*";
diff --git a/app/assets/stylesheets/documents/documents.scss b/app/assets/stylesheets/documents/documents.scss
new file mode 100644
index 000000000..d4cf19acb
--- /dev/null
+++ b/app/assets/stylesheets/documents/documents.scss
@@ -0,0 +1,37 @@
+.documents {
+
+  h2 {
+    font-size: rem-calc(24);
+
+    span {
+      color: #4f4f4f;
+      font-weight: normal;
+    }
+  }
+
+  ul li {
+    padding-top: $line-height / 2;
+
+    &:not(:first-child) {
+      border-top: 1px solid $highlight;
+    }
+  }
+
+  .document-link {
+    background: $highlight-soft;
+    border: 2px solid $highlight;
+    border-radius: rem-calc(5);
+    display: block;
+    margin: $line-height / 2 0;
+    padding: $line-height / 2;
+    position: relative;
+
+    p {
+      margin-bottom: 0;
+    }
+
+    a {
+      word-wrap: break-word;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 2710af584..b8ac99ee4 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2016,44 +2016,6 @@ table {
 // 20. Documents
 // -------------
 
-.documents {
-
-  h2 {
-    font-size: rem-calc(24);
-
-    span {
-      color: #4f4f4f;
-      font-weight: normal;
-    }
-  }
-
-  ul li {
-    padding-top: $line-height / 2;
-
-    &:not(:first-child) {
-      border-top: 1px solid $highlight;
-    }
-  }
-
-  .document-link {
-    background: $highlight-soft;
-    border: 2px solid $highlight;
-    border-radius: rem-calc(5);
-    display: block;
-    margin: $line-height / 2 0;
-    padding: $line-height / 2;
-    position: relative;
-
-    p {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.document-link a {
-  word-wrap: break-word;
-}
-
 .additional-document-link {
   background: $highlight-soft;
   border: 1px solid $highlight;
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 21a68e186..cca148e73 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -699,6 +699,10 @@
       margin-top: rem-calc(10);
     }
   }
+
+  .investment-external-link a {
+    word-wrap: break-word;
+  }
 }
 
 .budget-investment-show .supports {
@@ -1437,6 +1441,10 @@
       overflow: hidden;
     }
   }
+
+  .document-link a {
+    word-wrap: break-word;
+  }
 }
 
 .orbit-bullets button {
diff --git a/app/views/documents/_document.html.erb b/app/components/documents/document_component.html.erb
similarity index 100%
rename from app/views/documents/_document.html.erb
rename to app/components/documents/document_component.html.erb
diff --git a/app/components/documents/document_component.rb b/app/components/documents/document_component.rb
new file mode 100644
index 000000000..ed418eda3
--- /dev/null
+++ b/app/components/documents/document_component.rb
@@ -0,0 +1,8 @@
+class Documents::DocumentComponent < ApplicationComponent
+  attr_reader :document
+  delegate :can?, to: :helpers
+
+  def initialize(document)
+    @document = document
+  end
+end
diff --git a/app/components/documents/documents_component.html.erb b/app/components/documents/documents_component.html.erb
new file mode 100644
index 000000000..d8912bd8c
--- /dev/null
+++ b/app/components/documents/documents_component.html.erb
@@ -0,0 +1,9 @@
+<div id="documents" class="documents">
+  <h2><%= t("documents.title") %>&nbsp;<span>(<%= documents.count %>)</span></h2>
+
+  <ul class="no-bullet document-link">
+    <% documents.each do |document| %>
+      <%= render Documents::DocumentComponent.new(document) %>
+    <% end %>
+  </ul>
+</div>
diff --git a/app/components/documents/documents_component.rb b/app/components/documents/documents_component.rb
new file mode 100644
index 000000000..5dfae9ecf
--- /dev/null
+++ b/app/components/documents/documents_component.rb
@@ -0,0 +1,11 @@
+class Documents::DocumentsComponent < ApplicationComponent
+  attr_reader :documents
+
+  def initialize(documents)
+    @documents = documents
+  end
+
+  def render?
+    documents.any?
+  end
+end
diff --git a/app/views/budgets/investments/_investment_detail.html.erb b/app/views/budgets/investments/_investment_detail.html.erb
index cab44899d..d8c8fff8f 100644
--- a/app/views/budgets/investments/_investment_detail.html.erb
+++ b/app/views/budgets/investments/_investment_detail.html.erb
@@ -45,13 +45,13 @@
 <% end %>
 
 <% if feature?(:allow_attached_documents) %>
-  <%= render "documents/documents", documents: investment.documents %>
+  <%= render Documents::DocumentsComponent.new(investment.documents) %>
 <% end %>
 
 <%= render "shared/tags", taggable: investment %>
 
 <% if investment.external_url.present? %>
-  <div class="document-link">
+  <div class="investment-external-link">
     <%= sanitize_and_auto_link investment.external_url %>
   </div>
 <% end %>
diff --git a/app/views/dashboard/actions/new_request.html.erb b/app/views/dashboard/actions/new_request.html.erb
index 4359f17c8..93549ec36 100644
--- a/app/views/dashboard/actions/new_request.html.erb
+++ b/app/views/dashboard/actions/new_request.html.erb
@@ -7,7 +7,7 @@
   </div>
 
   <div class="small-12 medium-4 column">
-    <%= render "documents/documents", documents: dashboard_action.documents %>
+    <%= render Documents::DocumentsComponent.new(dashboard_action.documents) %>
 
     <% if dashboard_action.links.any? %>
       <div class="margin-top">
diff --git a/app/views/documents/_documents.html.erb b/app/views/documents/_documents.html.erb
deleted file mode 100644
index a828ccc90..000000000
--- a/app/views/documents/_documents.html.erb
+++ /dev/null
@@ -1,9 +0,0 @@
-<% if documents.any? %>
-  <div id="documents" class="documents">
-    <h2><%= t("documents.title") %>&nbsp;<span>(<%= documents.count %>)</span></h2>
-
-    <ul class="no-bullet document-link">
-      <%= render partial: "documents/document", collection: documents %>
-    </ul>
-  </div>
-<% end %>
diff --git a/app/views/legislation/proposals/show.html.erb b/app/views/legislation/proposals/show.html.erb
index ec31d0f88..7f9123bd4 100644
--- a/app/views/legislation/proposals/show.html.erb
+++ b/app/views/legislation/proposals/show.html.erb
@@ -87,7 +87,7 @@
         <% end %>
 
         <% if feature?(:allow_attached_documents) %>
-          <%= render "documents/documents", documents: @proposal.documents %>
+          <%= render Documents::DocumentsComponent.new(@proposal.documents) %>
         <% end %>
 
         <%= render "shared/tags", taggable: @proposal %>
diff --git a/app/views/proposals/_info.html.erb b/app/views/proposals/_info.html.erb
index 6bb723136..23def8f68 100644
--- a/app/views/proposals/_info.html.erb
+++ b/app/views/proposals/_info.html.erb
@@ -67,7 +67,7 @@
 <% end %>
 
 <% if feature?(:allow_attached_documents) %>
-  <%= render "documents/documents", documents: @proposal.documents %>
+  <%= render Documents::DocumentsComponent.new(@proposal.documents) %>
 <% end %>
 
 <%= render "shared/tags", taggable: @proposal %>