diff --git a/app/assets/javascripts/admin/addon/components/admin-config-area-card.gjs b/app/assets/javascripts/admin/addon/components/admin-config-area-card.gjs
new file mode 100644
index 00000000000..0157d579919
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/admin-config-area-card.gjs
@@ -0,0 +1,16 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class AdminConfigAreaCard extends Component {
+  @tracked collapsed = false;
+
+  <template>
+    <section class="admin-config-area-card">
+      <h3 class="admin-config-area-card__title">{{i18n @heading}}</h3>
+      <div class="admin-config-area-card__content">
+        {{yield}}
+      </div>
+    </section>
+  </template>
+}
diff --git a/app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/contact-information.gjs b/app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/contact-information.gjs
new file mode 100644
index 00000000000..07a438bf192
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/contact-information.gjs
@@ -0,0 +1,83 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import DButton from "discourse/components/d-button";
+import i18n from "discourse-common/helpers/i18n";
+import GroupChooser from "select-kit/components/group-chooser";
+import UserChooser from "select-kit/components/user-chooser";
+
+export default class AdminConfigAreasAboutContactInformation extends Component {
+  @action
+  save() {
+    this.args.saveCallback();
+    // eslint-disable-next-line no-console
+    console.log("contact information");
+  }
+
+  <template>
+    <div class="control-group">
+      <label>
+        <span>{{i18n "admin.config_areas.about.community_owner"}}</span>
+        <span class="admin-config-area-card__label-optional">{{i18n
+            "admin.config_areas.about.optional"
+          }}</span>
+      </label>
+      <p class="admin-config-area-card__additional-help">
+        {{i18n "admin.config_areas.about.community_owner_help"}}
+      </p>
+      <input type="text" />
+    </div>
+    <div class="control-group">
+      <label>
+        <span>{{i18n "admin.config_areas.about.contact_email"}}</span>
+        <span class="admin-config-area-card__label-optional">{{i18n
+            "admin.config_areas.about.optional"
+          }}</span>
+      </label>
+      <p class="admin-config-area-card__additional-help">
+        {{i18n "admin.config_areas.about.contact_email_help"}}
+      </p>
+      <input type="text" />
+    </div>
+    <div class="control-group">
+      <label>
+        <span>{{i18n "admin.config_areas.about.contact_url"}}</span>
+        <span class="admin-config-area-card__label-optional">{{i18n
+            "admin.config_areas.about.optional"
+          }}</span>
+      </label>
+      <p class="admin-config-area-card__additional-help">
+        {{i18n "admin.config_areas.about.contact_url_help"}}
+      </p>
+      <input type="text" />
+    </div>
+    <div class="control-group">
+      <label>
+        <span>{{i18n "admin.config_areas.about.site_contact_name"}}</span>
+        <span class="admin-config-area-card__label-optional">{{i18n
+            "admin.config_areas.about.optional"
+          }}</span>
+      </label>
+      <p class="admin-config-area-card__additional-help">
+        {{i18n "admin.config_areas.about.site_contact_name_help"}}
+      </p>
+      <UserChooser />
+    </div>
+    <div class="control-group">
+      <label>
+        <span>{{i18n "admin.config_areas.about.site_contact_group"}}</span>
+        <span class="admin-config-area-card__label-optional">{{i18n
+            "admin.config_areas.about.optional"
+          }}</span>
+      </label>
+      <p class="admin-config-area-card__additional-help">
+        {{i18n "admin.config_areas.about.site_contact_group_help"}}
+      </p>
+      <GroupChooser />
+    </div>
+    <DButton
+      @label="admin.config_areas.about.update"
+      @action={{this.save}}
+      class="btn-primary"
+    />
+  </template>
+}
diff --git a/app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/general-settings.gjs b/app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/general-settings.gjs
new file mode 100644
index 00000000000..5e4ac511b8c
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/general-settings.gjs
@@ -0,0 +1,52 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import DButton from "discourse/components/d-button";
+import DEditor from "discourse/components/d-editor";
+import UppyImageUploader from "discourse/components/uppy-image-uploader";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class AdminConfigAreasAboutGeneralSettings extends Component {
+  @action
+  save() {
+    this.args.saveCallback();
+    // eslint-disable-next-line no-console
+    console.log("general settings");
+  }
+
+  <template>
+    <div class="control-group">
+      <label>{{i18n "admin.config_areas.about.community_name"}}</label>
+      <input type="text" />
+    </div>
+    <div class="control-group">
+      <label>{{i18n "admin.config_areas.about.community_summary"}}</label>
+      <input type="text" />
+    </div>
+    <div class="control-group">
+      <label>
+        <span>{{i18n "admin.config_areas.about.community_description"}}</span>
+        <span class="admin-config-area-card__label-optional">{{i18n
+            "admin.config_areas.about.optional"
+          }}</span>
+      </label>
+      <DEditor />
+    </div>
+    <div class="control-group">
+      <label>
+        <span>{{i18n "admin.config_areas.about.banner_image"}}</span>
+        <span class="admin-config-area-card__label-optional">{{i18n
+            "admin.config_areas.about.optional"
+          }}</span>
+      </label>
+      <p class="admin-config-area-card__additional-help">
+        {{i18n "admin.config_areas.about.banner_image_help"}}
+      </p>
+      <UppyImageUploader />
+    </div>
+    <DButton
+      @label="admin.config_areas.about.update"
+      @action={{this.save}}
+      class="btn-primary"
+    />
+  </template>
+}
diff --git a/app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/your-organization.gjs b/app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/your-organization.gjs
new file mode 100644
index 00000000000..67f7acd3523
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/your-organization.gjs
@@ -0,0 +1,60 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import DButton from "discourse/components/d-button";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class AdminConfigAreasAboutYourOrganization extends Component {
+  @action
+  save() {
+    this.args.saveCallback();
+    // eslint-disable-next-line no-console
+    console.log("your organization");
+  }
+
+  <template>
+    <div class="control-group">
+      <label>
+        <span>{{i18n "admin.config_areas.about.company_name"}}</span>
+        <span class="admin-config-area-card__label-optional">{{i18n
+            "admin.config_areas.about.optional"
+          }}</span>
+      </label>
+      <p class="admin-config-area-card__additional-help">
+        {{i18n "admin.config_areas.about.company_name_help"}}
+      </p>
+      <p class="admin-config-area-card__warning-banner">
+        {{i18n "admin.config_areas.about.company_name_warning"}}
+      </p>
+      <input type="text" />
+    </div>
+    <div class="control-group">
+      <label>
+        <span>{{i18n "admin.config_areas.about.governing_law"}}</span>
+        <span class="admin-config-area-card__label-optional">{{i18n
+            "admin.config_areas.about.optional"
+          }}</span>
+      </label>
+      <p class="admin-config-area-card__additional-help">
+        {{i18n "admin.config_areas.about.governing_law_help"}}
+      </p>
+      <input type="text" />
+    </div>
+    <div class="control-group">
+      <label>
+        <span>{{i18n "admin.config_areas.about.city_for_disputes"}}</span>
+        <span class="admin-config-area-card__label-optional">{{i18n
+            "admin.config_areas.about.optional"
+          }}</span>
+      </label>
+      <p class="admin-config-area-card__additional-help">
+        {{i18n "admin.config_areas.about.city_for_disputes_help"}}
+      </p>
+      <input type="text" />
+    </div>
+    <DButton
+      @label="admin.config_areas.about.update"
+      @action={{this.save}}
+      class="btn-primary"
+    />
+  </template>
+}
diff --git a/app/assets/javascripts/admin/addon/components/admin-config-areas/about.gjs b/app/assets/javascripts/admin/addon/components/admin-config-areas/about.gjs
index c78c31c938a..73b077e1c63 100644
--- a/app/assets/javascripts/admin/addon/components/admin-config-areas/about.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-config-areas/about.gjs
@@ -1,14 +1,44 @@
 import Component from "@glimmer/component";
+import i18n from "discourse-common/helpers/i18n";
+import AdminConfigAreaCard from "admin/components/admin-config-area-card";
+import AdminConfigAreasAboutContactInformation from "admin/components/admin-config-area-cards/about/contact-information";
+import AdminConfigAreasAboutGeneralSettings from "admin/components/admin-config-area-cards/about/general-settings";
+import AdminConfigAreasAboutYourOrganization from "admin/components/admin-config-area-cards/about/your-organization";
 
 export default class AdminConfigAreasAbout extends Component {
-  cards = [1, 2, 3];
+  saveCallback() {
+    // eslint-disable-next-line no-console
+    console.log("save callback");
+  }
 
   <template>
     <div class="admin-config-area">
+      <h2>{{i18n "admin.config_areas.about.header"}}</h2>
       <div class="admin-config-area__primary-content">
-        {{#each this.cards as |card|}}
-          <div>{{card}}</div>
-        {{/each}}
+        <AdminConfigAreaCard
+          @heading="admin.config_areas.about.general_settings"
+          @primaryActionLabel="admin.config_areas.about.update"
+        >
+          <AdminConfigAreasAboutGeneralSettings
+            @saveCallback={{this.saveCallback}}
+          />
+        </AdminConfigAreaCard>
+        <AdminConfigAreaCard
+          @heading="admin.config_areas.about.contact_information"
+          @primaryActionLabel="admin.config_areas.about.update"
+        >
+          <AdminConfigAreasAboutContactInformation
+            @saveCallback={{this.saveCallback}}
+          />
+        </AdminConfigAreaCard>
+        <AdminConfigAreaCard
+          @heading="admin.config_areas.about.your_organization"
+          @primaryActionLabel="admin.config_areas.about.update"
+        >
+          <AdminConfigAreasAboutYourOrganization
+            @saveCallback={{this.saveCallback}}
+          />
+        </AdminConfigAreaCard>
       </div>
     </div>
   </template>
diff --git a/app/assets/stylesheets/common/admin/admin_config_area.scss b/app/assets/stylesheets/common/admin/admin_config_area.scss
index 1715cd3bf1a..f5ad30b0f14 100644
--- a/app/assets/stylesheets/common/admin/admin_config_area.scss
+++ b/app/assets/stylesheets/common/admin/admin_config_area.scss
@@ -1,12 +1,25 @@
-.admin-config-area {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  column-gap: 1em;
+.admin-config-area-card {
+  padding: 20px;
+  border: 1px solid var(--primary-low);
+  border-radius: 2px;
+  background-color: var(--secondary);
+  margin-bottom: 1em;
 
-  &__primary-content {
-    background: red;
+  &__label-optional {
+    color: var(--primary-medium);
+    font-size: var(--font-down-1);
+    margin-left: 5px;
   }
-  &__help-inset {
-    background: green;
+
+  &__additional-help {
+    color: var(--primary-medium);
+    font-size: var(--font-down-1);
+  }
+
+  &__warning-banner {
+    color: var(--primary-high);
+    background-color: var(--danger-low);
+    font-size: var(--font-down-1);
+    padding: 10px 10px;
   }
 }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index e2a947a3647..fbb6036110d 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -5425,6 +5425,46 @@ en:
           spam: "Spam"
           staff_action_logs: "Staff Action Logs"
 
+      config_areas:
+        about:
+          header: "About your site"
+          general_settings: "General settings"
+          community_name: "Community name"
+          community_summary: "Community summary"
+          community_description: "Community description"
+          banner_image: "Banner image"
+          banner_image_help: |
+            This will be used on your About page. Recommended size: 800x300px. Accepted types: JPG, PNG, and SVG up to 10MB.
+          contact_information: "Contact information"
+          community_owner: "Community owner"
+          community_owner_help: |
+            Name of key contact responsible for this site. Used for critical notifications, and also displayed on /about. Visible to anonymous users on public sites.
+          contact_email: "Contact email"
+          contact_email_help: |
+            Email address of key contact responsible for this site. Used for critical notifications, and also displayed on /about. Visible to anonymous users on public sites.
+          contact_url: "Contact URL"
+          contact_url_help: |
+            Contact URL for this site. When present, replaces contact email address on /about and visible to anonymous users on public sites.
+          site_contact_name: "Site contact name"
+          site_contact_name_help: |
+            A valid staff username to send all automated messages from. If left blank, the default System account will be used.
+          site_contact_group: "Site contact group"
+          site_contact_group_help: |
+            A valid name of a group that gets invited to all automatically sent private messages.
+          your_organization: "Your organization"
+          company_name: "Company name"
+          company_name_help: |
+            Name of your company or organization.
+          company_name_warning: |
+            If left blank, no boilerplate Terms of Service or Privacy Notice will be provided.
+          governing_law: "Governing law"
+          governing_law_help: |
+            Specify the jurisdiction that governs the legal aspects of the site, including Terms of Service and Privacy Notice. This is typically the country or state where the company operating the site is registered or conducts business.
+          city_for_disputes: "City for disputes"
+          city_for_disputes_help: |
+            Specify the city that will be used as the jurisdiction for resolving any disputes related to the use of this forum. This information is typically included in legal documents such as the forum's Terms of Service.
+          optional: "(optional)"
+          update: "Update"
       plugins:
         title: "Plugins"
         installed: "Installed Plugins"