diff --git a/app/javascript/flavours/glitch/api/instance.ts b/app/javascript/flavours/glitch/api/instance.ts
index 16a2ad04cb..6d3c12a5db 100644
--- a/app/javascript/flavours/glitch/api/instance.ts
+++ b/app/javascript/flavours/glitch/api/instance.ts
@@ -4,8 +4,12 @@ import type {
   ApiPrivacyPolicyJSON,
 } from 'flavours/glitch/api_types/instance';
 
-export const apiGetTermsOfService = () =>
-  apiRequestGet<ApiTermsOfServiceJSON>('v1/instance/terms_of_service');
+export const apiGetTermsOfService = (version?: string) =>
+  apiRequestGet<ApiTermsOfServiceJSON>(
+    version
+      ? `v1/instance/terms_of_service/${version}`
+      : 'v1/instance/terms_of_service',
+  );
 
 export const apiGetPrivacyPolicy = () =>
   apiRequestGet<ApiPrivacyPolicyJSON>('v1/instance/privacy_policy');
diff --git a/app/javascript/flavours/glitch/api_types/instance.ts b/app/javascript/flavours/glitch/api_types/instance.ts
index ead9774515..3a29684b70 100644
--- a/app/javascript/flavours/glitch/api_types/instance.ts
+++ b/app/javascript/flavours/glitch/api_types/instance.ts
@@ -1,5 +1,7 @@
 export interface ApiTermsOfServiceJSON {
-  updated_at: string;
+  effective_date: string;
+  effective: boolean;
+  succeeded_by: string | null;
   content: string;
 }
 
diff --git a/app/javascript/flavours/glitch/features/terms_of_service/index.tsx b/app/javascript/flavours/glitch/features/terms_of_service/index.tsx
index 8dad972c44..0b566ed7bd 100644
--- a/app/javascript/flavours/glitch/features/terms_of_service/index.tsx
+++ b/app/javascript/flavours/glitch/features/terms_of_service/index.tsx
@@ -8,26 +8,31 @@ import {
 } from 'react-intl';
 
 import { Helmet } from 'react-helmet';
+import { Link, useParams } from 'react-router-dom';
 
 import { apiGetTermsOfService } from 'flavours/glitch/api/instance';
 import type { ApiTermsOfServiceJSON } from 'flavours/glitch/api_types/instance';
 import { Column } from 'flavours/glitch/components/column';
-import { Skeleton } from 'flavours/glitch/components/skeleton';
 import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
 
 const messages = defineMessages({
   title: { id: 'terms_of_service.title', defaultMessage: 'Terms of Service' },
 });
 
+interface Params {
+  date?: string;
+}
+
 const TermsOfService: React.FC<{
   multiColumn: boolean;
 }> = ({ multiColumn }) => {
   const intl = useIntl();
+  const { date } = useParams<Params>();
   const [response, setResponse] = useState<ApiTermsOfServiceJSON>();
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    apiGetTermsOfService()
+    apiGetTermsOfService(date)
       .then((data) => {
         setResponse(data);
         setLoading(false);
@@ -36,7 +41,7 @@ const TermsOfService: React.FC<{
       .catch(() => {
         setLoading(false);
       });
-  }, []);
+  }, [date]);
 
   if (!loading && !response) {
     return <BundleColumnError multiColumn={multiColumn} errorType='routing' />;
@@ -55,23 +60,60 @@ const TermsOfService: React.FC<{
               defaultMessage='Terms of Service'
             />
           </h3>
-          <p>
-            <FormattedMessage
-              id='privacy_policy.last_updated'
-              defaultMessage='Last updated {date}'
-              values={{
-                date: loading ? (
-                  <Skeleton width='10ch' />
-                ) : (
-                  <FormattedDate
-                    value={response?.updated_at}
-                    year='numeric'
-                    month='short'
-                    day='2-digit'
+          <p className='prose'>
+            {response?.effective ? (
+              <FormattedMessage
+                id='privacy_policy.last_updated'
+                defaultMessage='Last updated {date}'
+                values={{
+                  date: (
+                    <FormattedDate
+                      value={response.effective_date}
+                      year='numeric'
+                      month='short'
+                      day='2-digit'
+                    />
+                  ),
+                }}
+              />
+            ) : (
+              <FormattedMessage
+                id='terms_of_service.effective_as_of'
+                defaultMessage='Effective as of {date}'
+                values={{
+                  date: (
+                    <FormattedDate
+                      value={response?.effective_date}
+                      year='numeric'
+                      month='short'
+                      day='2-digit'
+                    />
+                  ),
+                }}
+              />
+            )}
+
+            {response?.succeeded_by && (
+              <>
+                {' · '}
+                <Link to={`/terms-of-service/${response.succeeded_by}`}>
+                  <FormattedMessage
+                    id='terms_of_service.upcoming_changes_on'
+                    defaultMessage='Upcoming changes on {date}'
+                    values={{
+                      date: (
+                        <FormattedDate
+                          value={response.succeeded_by}
+                          year='numeric'
+                          month='short'
+                          day='2-digit'
+                        />
+                      ),
+                    }}
                   />
-                ),
-              }}
-            />
+                </Link>
+              </>
+            )}
           </p>
         </div>
 
diff --git a/app/javascript/flavours/glitch/features/ui/index.jsx b/app/javascript/flavours/glitch/features/ui/index.jsx
index 2a67355a51..2c33c8ce8c 100644
--- a/app/javascript/flavours/glitch/features/ui/index.jsx
+++ b/app/javascript/flavours/glitch/features/ui/index.jsx
@@ -214,7 +214,7 @@ class SwitchingColumnsArea extends PureComponent {
             <WrappedRoute path='/keyboard-shortcuts' component={KeyboardShortcuts} content={children} />
             <WrappedRoute path='/about' component={About} content={children} />
             <WrappedRoute path='/privacy-policy' component={PrivacyPolicy} content={children} />
-            <WrappedRoute path='/terms-of-service' component={TermsOfService} content={children} />
+            <WrappedRoute path='/terms-of-service/:date?' component={TermsOfService} content={children} />
 
             <WrappedRoute path={['/home', '/timelines/home']} component={HomeTimeline} content={children} />
             <Redirect from='/timelines/public' to='/public' exact />
diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss
index d23af4914d..ff3e5d8e33 100644
--- a/app/javascript/flavours/glitch/styles/admin.scss
+++ b/app/javascript/flavours/glitch/styles/admin.scss
@@ -2010,6 +2010,11 @@ a.sparkline {
           line-height: 20px;
           font-weight: 600;
           margin-bottom: 16px;
+
+          a {
+            color: inherit;
+            text-decoration: none;
+          }
         }
       }
     }
diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index 16f5ae0f2d..527a188970 100644
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -341,10 +341,17 @@ code {
     columns: unset;
   }
 
-  .input.datetime .label_input select {
-    display: inline-block;
-    width: auto;
-    flex: 0;
+  .input.datetime .label_input,
+  .input.date .label_input {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+
+    select {
+      display: inline-block;
+      width: auto;
+      flex: 0;
+    }
   }
 
   .input.select.select--languages {