diff --git a/frontend/config/webpack.config.dev.js b/frontend/config/webpack.config.dev.js
index b695a8b879..d08f4f21db 100644
--- a/frontend/config/webpack.config.dev.js
+++ b/frontend/config/webpack.config.dev.js
@@ -54,6 +54,11 @@ module.exports = {
       // initialization, it doesn't blow up the WebpackDevServer client, and
       // changing JS code would still trigger a refresh.
     ],
+    TCAccept: [
+      require.resolve('./polyfills'),
+      require.resolve('react-dev-utils/webpackHotDevClient'),
+      paths.appSrc + "/tc-accept.js",
+    ],
     wiki: [
       require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),
diff --git a/frontend/config/webpack.config.prod.js b/frontend/config/webpack.config.prod.js
index cb88efe759..ef854a2877 100644
--- a/frontend/config/webpack.config.prod.js
+++ b/frontend/config/webpack.config.prod.js
@@ -59,6 +59,7 @@ module.exports = {
   // In production, we only want to load the polyfills and the app code.
   entry: {
     markdownEditor: [require.resolve('./polyfills'), paths.appIndexJs],
+    TCAccept: [require.resolve('./polyfills'), paths.appSrc + "/tc-accept.js"],
     wiki: [require.resolve('./polyfills'), paths.appSrc + "/wiki.js"],
     repoview: [require.resolve('./polyfills'), paths.appSrc + "/repo-wiki-mode.js"],
     fileHistory: [require.resolve('./polyfills'), paths.appSrc + "/file-history.js"],
diff --git a/frontend/src/css/tc-accept.css b/frontend/src/css/tc-accept.css
new file mode 100644
index 0000000000..81ca81fc60
--- /dev/null
+++ b/frontend/src/css/tc-accept.css
@@ -0,0 +1,15 @@
+body {
+  overflow: hidden;
+}
+#wrapper {
+  height: 100%;
+}
+.top-header {
+  background: #f4f4f7;
+  border-bottom: 1px solid #e8e8e8;
+  padding: .5rem 1rem;
+  flex-shrink: 0;
+}
+.content {
+  max-width: 950px;
+}
diff --git a/frontend/src/tc-accept.js b/frontend/src/tc-accept.js
new file mode 100644
index 0000000000..f95cfd1ecd
--- /dev/null
+++ b/frontend/src/tc-accept.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Button } from 'reactstrap';
+import { gettext } from './utils/constants';
+import Logo from './components/logo';
+import Account from './components/common/account';
+import TermsPreviewWidget from './components/terms-preview-widget';
+
+import './css/tc-accept.css';
+
+const { csrfToken } = window.app.pageOptions;
+const { 
+  termsName,
+  formAction,
+  formTerms,
+  formReturnTo,
+  logoutURL,
+  termsText
+} = window.tc;
+
+
+class TCAccept extends React.Component {
+
+  render() {
+    return (
+      <div className="h-100 d-flex flex-column">
+        <div className="top-header d-flex justify-content-between">
+          <Logo />
+          <Account />
+        </div>
+        <div className="o-auto">
+          <div className="py-4 px-4 my-6 mx-auto content">
+            <h2 dangerouslySetInnerHTML={{__html: termsName}}></h2>
+            <div className="article">
+              <TermsPreviewWidget content={termsText} />
+            </div>
+            <form action={formAction} method="post">
+              <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+              <div dangerouslySetInnerHTML={{__html: formTerms}}></div>
+              <div dangerouslySetInnerHTML={{__html: formReturnTo}}></div>
+              <Button type="submit">{gettext('Accept')}</Button>
+              <a href={logoutURL} className="btn btn-secondary ml-2">{gettext('Cancel')}</a>
+            </form>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <TCAccept />,
+  document.getElementById('wrapper')
+);
diff --git a/seahub/templates/termsandconditions/tc_accept_terms_react.html b/seahub/templates/termsandconditions/tc_accept_terms_react.html
new file mode 100644
index 0000000000..9b0361b232
--- /dev/null
+++ b/seahub/templates/termsandconditions/tc_accept_terms_react.html
@@ -0,0 +1,21 @@
+{% extends "base_for_react.html" %}
+{% load seahub_tags i18n %}
+{% load render_bundle from webpack_loader %}
+
+{% block extra_style %}
+{% render_bundle 'TCAccept' 'css' %}
+{% endblock %}
+
+{% block extra_script %}
+<script type="text/javascript">
+  window.tc = {
+    termsName: '{{ form.initial.terms.name|escapejs }}',
+    formAction: '{% url 'tc_accept_page' %}',
+    formTerms: '{{ form.terms }}',
+    formReturnTo: '{{ form.returnTo }}',
+    logoutURL: '{% url 'auth_logout' %}',
+    termsText: "{{ form.initial.terms.text|escapejs }}"
+  };
+</script>
+{% render_bundle 'TCAccept' 'js' %}
+{% endblock %}
diff --git a/thirdpart/termsandconditions/views.py b/thirdpart/termsandconditions/views.py
index a670d03279..26ba2ff363 100644
--- a/thirdpart/termsandconditions/views.py
+++ b/thirdpart/termsandconditions/views.py
@@ -53,7 +53,8 @@ class AcceptTermsView(CreateView):
 
     model = UserTermsAndConditions
     form_class = UserTermsAndConditionsModelForm
-    template_name = "termsandconditions/tc_accept_terms.html"
+    #template_name = "termsandconditions/tc_accept_terms.html"
+    template_name = "termsandconditions/tc_accept_terms_react.html"
 
     def get_initial(self):
         """Override of CreateView method, queries for which T&C to accept and catches returnTo from URL"""