diff --git a/lib/pleroma/web/templates/layout/static_fe.html.eex b/lib/pleroma/web/templates/layout/static_fe.html.eex
index e42047de9..62b59f17c 100644
--- a/lib/pleroma/web/templates/layout/static_fe.html.eex
+++ b/lib/pleroma/web/templates/layout/static_fe.html.eex
@@ -6,170 +6,7 @@
     <title>
     <%= Application.get_env(:pleroma, :instance)[:name] %>
     </title>
-    <style>
-      body {
-        background-color: #282c37;
-        font-family: sans-serif;
-        color: white;
-      }
-
-      .container {
-        margin: 50px auto;
-        max-width: 960px;
-        padding: 0;
-        padding: 40px 40px 40px 40px;
-        background-color: #313543;
-        border-radius: 4px;
-      }
-
-      .activity {
-        padding: 1em;
-        padding-bottom: 2em;
-        margin-bottom: 1em;
-      }
-
-      .avatar {
-        cursor: pointer;
-      }
-
-      .avatar img {
-        float: left;
-        border-radius: 4px;
-        margin-right: 4px;
-      }
-
-      .activity-content img, video {
-        max-width: 800px;
-        max-height: 800px;
-      }
-
-      #selected {
-        background-color: #1b2735;
-      }
-
-      .counts dt, .counts dd {
-        float: left;
-        margin-left: 1em;
-      }
-
-      a {
-        color: white;
-      }
-
-      .h-card {
-        min-height: 48px;
-        margin-bottom: 8px;
-      }
-
-      .h-card a {
-        text-decoration: none;
-      }
-
-      .h-card a:hover {
-        text-decoration: underline;
-      }
-
-      .display-name {
-        padding-top: 4px;
-        display: block;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        color: white;
-      }
-
-      .display-name .nickname {
-        padding-top: 4px;
-        display: block;
-      }
-
-      .nickname:hover {
-        text-decoration: none;
-      }
-
-      .pull-right {
-        float: right;
-      }
-
-      .collapse {
-        margin: 0;
-        width: auto;
-      }
-
-      h1 {
-        margin: 0;
-      }
-
-      h2 {
-        color: #9baec8;
-        font-weight: normal;
-        font-size: 20px;
-        margin-bottom: 40px;
-      }
-
-      form {
-        width: 100%;
-      }
-
-      input {
-        box-sizing: border-box;
-        width: 100%;
-        padding: 10px;
-        margin-top: 20px;
-        background-color: rgba(0,0,0,.1);
-        color: white;
-        border: 0;
-        border-bottom: 2px solid #9baec8;
-        font-size: 14px;
-      }
-
-      input:focus {
-        border-bottom: 2px solid #4b8ed8;
-      }
-
-      input[type="checkbox"] {
-        width: auto;
-      }
-
-      button {
-        box-sizing: border-box;
-        width: 100%;
-        color: white;
-        background-color: #419bdd;
-        border-radius: 4px;
-        border: none;
-        padding: 10px;
-        margin-top: 30px;
-        text-transform: uppercase;
-        font-weight: 500;
-        font-size: 16px;
-      }
-
-      .alert-danger {
-        box-sizing: border-box;
-        width: 100%;
-        color: #D8000C;
-        background-color: #FFD2D2;
-        border-radius: 4px;
-        border: none;
-        padding: 10px;
-        margin-top: 20px;
-        font-weight: 500;
-        font-size: 16px;
-      }
-
-      .alert-info {
-        box-sizing: border-box;
-        width: 100%;
-        color: #00529B;
-        background-color: #BDE5F8;
-        border-radius: 4px;
-        border: none;
-        padding: 10px;
-        margin-top: 20px;
-        font-weight: 500;
-        font-size: 16px;
-      }
-    </style>
+    <link rel="stylesheet" href="/static/static-fe.css">
   </head>
   <body>
     <div class="container">
diff --git a/priv/static/static/static-fe.css b/priv/static/static/static-fe.css
new file mode 100644
index 000000000..d6bb58c33
Binary files /dev/null and b/priv/static/static/static-fe.css differ
