diff --git a/components/ContentUpdate/index.scss b/components/ContentUpdate/index.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/components/ContentUpdate/index.tsx b/components/ContentUpdate/index.tsx
new file mode 100644
index 00000000..5e1ed98c
--- /dev/null
+++ b/components/ContentUpdate/index.tsx
@@ -0,0 +1,143 @@
+import React from 'react'
+import { useTranslation } from 'next-i18next'
+import ChangelogUnit from '~components/ChangelogUnit'
+
+import './index.scss'
+
+interface UpdateObject {
+  character?: string[]
+  summon?: string[]
+  weapon?: string[]
+}
+
+interface Props {
+  version: string
+  dateString: string
+  event: string
+  newItems?: UpdateObject
+  uncappedItems?: UpdateObject
+  numNotes: number
+}
+const ContentUpdate = ({
+  version,
+  dateString,
+  event,
+  newItems,
+  uncappedItems,
+  numNotes,
+}: Props) => {
+  const { t: updates } = useTranslation('updates')
+
+  const date = new Date(dateString)
+
+  function newItemElements(key: 'character' | 'weapon' | 'summon') {
+    let elements: React.ReactNode[] = []
+    if (newItems && newItems[key]) {
+      const items = newItems[key]
+      elements = items
+        ? items.map((id) => {
+            return <ChangelogUnit id={id} type={key} />
+          })
+        : []
+    }
+
+    return elements
+  }
+
+  function newItemSection(key: 'character' | 'weapon' | 'summon') {
+    let section: React.ReactNode = ''
+
+    if (newItems && newItems[key]) {
+      const items = newItems[key]
+      section =
+        items && items.length > 0 ? (
+          <section className={`${key}s`}>
+            <h4>{updates(`labels.${key}s`)}</h4>
+            <div className="items">{newItemElements(key)}</div>
+          </section>
+        ) : (
+          ''
+        )
+    }
+
+    return section
+  }
+
+  function uncapItemElements(key: 'character' | 'weapon' | 'summon') {
+    let elements: React.ReactNode[] = []
+    if (uncappedItems && uncappedItems[key]) {
+      const items = uncappedItems[key]
+      elements = items
+        ? items.map((id) => {
+            return key === 'character' ? (
+              <ChangelogUnit id={id} type={key} image="03" />
+            ) : (
+              <ChangelogUnit id={id} type={key} />
+            )
+          })
+        : []
+    }
+    return elements
+  }
+
+  function uncapItemSection(key: 'character' | 'weapon' | 'summon') {
+    let section: React.ReactNode = ''
+
+    if (uncappedItems && uncappedItems[key]) {
+      const items = uncappedItems[key]
+      section =
+        items && items.length > 0 ? (
+          <section className={`${key}s`}>
+            <h4>{updates(`labels.uncaps.${key}s`)}</h4>
+            <div className="items">{uncapItemElements(key)}</div>
+          </section>
+        ) : (
+          ''
+        )
+    }
+
+    return section
+  }
+
+  return (
+    <section className="Content Version" data-version={version}>
+      <div className="Header">
+        <h3>{`${updates('events.date', {
+          year: date.getFullYear(),
+          month: `${date.getMonth() + 1}`.padStart(2, '0'),
+        })}  ${updates(event)}`}</h3>
+        <time>{dateString}</time>
+      </div>
+      <div className="Contents">
+        {newItemSection('character')}
+        {uncapItemSection('character')}
+        {newItemSection('weapon')}
+        {uncapItemSection('weapon')}
+        {newItemSection('summon')}
+        {uncapItemSection('summon')}
+      </div>
+      {numNotes > 0 ? (
+        <div>
+          <section>
+            <h2>{updates('labels.updates')}</h2>
+            <ul className="Bare Contents">
+              {[...Array(numNotes)].map((e, i) => (
+                <li key={`${version}-${i}`}>
+                  {updates(`versions.${version}.features.${i}`)}
+                </li>
+              ))}
+            </ul>
+          </section>
+        </div>
+      ) : (
+        ''
+      )}
+    </section>
+  )
+}
+
+ContentUpdate.defaultProps = {
+  numNotes: 0,
+}
+
+export default ContentUpdate
diff --git a/components/UpdatesPage/index.tsx b/components/UpdatesPage/index.tsx
index 65b4c397..2b710efc 100644
--- a/components/UpdatesPage/index.tsx
+++ b/components/UpdatesPage/index.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 import { useTranslation } from 'next-i18next'
 
+import ContentUpdate from '~components/ContentUpdate'
 import ChangelogUnit from '~components/ChangelogUnit'
 
 import './index.scss'
@@ -55,104 +56,48 @@ const UpdatesPage = () => {
   return (
     <div className="Updates PageContent">
       <h1>{common('about.segmented_control.updates')}</h1>
-      <section className="Content Version" data-version="2023-02F">
-        <div className="Header">
-          <h3>{`${updates('events.date', {
-            year: 2023,
-            month: 2,
-          })}  ${updates('events.flash')}`}</h3>
-          <time>2023/02/14</time>
-        </div>
-        <div className="Contents">
-          <section className="characters">
-            <h4>{updates('labels.characters')}</h4>
-            <div className="items">
-              <ChangelogUnit id="3040447000" type="character" />
-              <ChangelogUnit id="3040448000" type="character" />
-            </div>
-          </section>
-          <section className="weapons">
-            <h4>{updates('labels.weapons')}</h4>
-            <div className="items">
-              <ChangelogUnit id="1040617200" type="weapon" />
-              <ChangelogUnit id="1040421500" type="weapon" />
-            </div>
-          </section>
-        </div>
-      </section>
-      <section className="Content Version" data-version="2023-02U3">
-        <div className="Header">
-          <h3>{`${updates('events.date', {
-            year: 2023,
-            month: 2,
-          })}  ${updates('events.uncap')}`}</h3>
-          <time>2023/02/12</time>
-        </div>
-        <div className="Contents">
-          <section className="characters">
-            <h4>{updates('labels.uncaps.characters')}</h4>
-            <div className="items">
-              <ChangelogUnit id="3040173000" type="character" image="03" />
-            </div>
-          </section>
-          <section className="weapons">
-            <h4>{updates('labels.uncaps.weapons')}</h4>
-            <div className="items">
-              <ChangelogUnit id="1040606800" type="weapon" />
-              <ChangelogUnit id="1040606900" type="weapon" />
-              <ChangelogUnit id="1040607000" type="weapon" />
-              <ChangelogUnit id="1040509500" type="weapon" />
-            </div>
-          </section>
-          <section className="summons">
-            <h4>{updates('labels.uncaps.summons')}</h4>
-            <div className="items">
-              <ChangelogUnit id="2040288000" type="summon" />
-            </div>
-          </section>
-        </div>
-      </section>
-      <section className="Content Version" data-version="2023-02U2">
-        <div className="Header">
-          <h3>{`${updates('events.date', {
-            year: 2023,
-            month: 2,
-          })}  ${updates('events.uncap')}`}</h3>
-          <time>2023/02/06</time>
-        </div>
-        <div className="Contents">
-          <section className="characters">
-            <h4>{updates('labels.uncaps.characters')}</h4>
-            <div className="items">
-              <ChangelogUnit id="3040252000" type="character" image="03" />
-            </div>
-          </section>
-          <section className="weapons">
-            <h4>{updates('labels.uncaps.weapons')}</h4>
-            <div className="items">
-              <ChangelogUnit id="1040016100" type="weapon" />
-            </div>
-          </section>
-          <section className="weapons">
-            <h4>{updates('labels.weapons')}</h4>
-            <div className="items">
-              <ChangelogUnit id="1040617100" type="weapon" />
-            </div>
-          </section>
-        </div>
-        <div>
-          <section>
-            <h2>{updates('labels.updates')}</h2>
-            <ul className="Bare Contents">
-              {[...Array(versionUpdates['202302U2'])].map((e, i) => (
-                <li key={`2023-02-U2-${i}`}>
-                  {updates(`versions.2023-02-U2.features.${i}`)}
-                </li>
-              ))}
-            </ul>
-          </section>
-        </div>
-      </section>
+      <ContentUpdate
+        version="2023-02L"
+        dateString="2023/02/27"
+        event="events.legfest"
+        newItems={{
+          character: ['3040450000', '3040449000'],
+          weapon: ['1040421600', '1040617300', '1040712200'],
+          summon: ['2040418000'],
+        }}
+      />
+      <ContentUpdate
+        version="2023-02F"
+        dateString="2023/02/14"
+        event="events.flash"
+        newItems={{
+          character: ['3040447000', '3040448000'],
+          weapon: ['1040617200', '1040421500'],
+        }}
+      />
+      <ContentUpdate
+        version="2023-02-U3"
+        dateString="2023/02/12"
+        event="events.uncap"
+        uncappedItems={{
+          character: ['3040173000'],
+          weapon: ['1040606800', '1040606900', '1040607000', '1040509500'],
+          summon: ['2040288000'],
+        }}
+      />
+      <ContentUpdate
+        version="2023-02-U2"
+        dateString="2023/02/06"
+        event="events.uncap"
+        newItems={{
+          weapon: ['1040016100'],
+        }}
+        numNotes={versionUpdates['202302U2'].updates}
+        uncappedItems={{
+          character: ['3040252000'],
+          weapon: ['1040617100', '1040016100'],
+        }}
+      />
       <section className="Version" data-version="1.1">
         <div className="Header">
           <h3>1.1.0</h3>