diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e4327947..e49277e66 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### Added
 - Toast with success/error message after trying to copy ingredients [#2040](https://github.com/nextcloud/cookbook/pull/2040) @seyfeb
 - Seconds can now be specified for recipe times [#2014](https://github.com/nextcloud/cookbook/pull/2014) @seyfeb
+- Added support for citation field [#2023](https://github.com/nextcloud/cookbook/pull/2023) @seyfeb
 
 ### Fixed
 - Prevent yield calculation for ## as ingredient headline [#1998](https://github.com/nextcloud/cookbook/pull/1998) @j0hannesr0th
diff --git a/src/components/FormComponents/EditInputField.vue b/src/components/FormComponents/EditInputField.vue
index 28afd5ce5..c35aaff2d 100644
--- a/src/components/FormComponents/EditInputField.vue
+++ b/src/components/FormComponents/EditInputField.vue
@@ -1,6 +1,6 @@
 <template>
     <fieldset>
-        <label>
+        <label :id="inputLabelId">
             {{ fieldLabel }}
         </label>
         <textarea
@@ -9,6 +9,9 @@
             "
             ref="inputField"
             v-model="content"
+            :placeholder="placeholder"
+            :aria-labelledby="inputLabelId"
+            :aria-placeholder="placeholder"
             @input="handleInput"
             @keydown="keyDown"
             @keyup="handleSuggestionsPopupKeyUp"
@@ -23,6 +26,9 @@
                 ref="inputField"
                 v-model="content"
                 :type="props.fieldType"
+                :placeholder="placeholder"
+                :aria-labelledby="inputLabelId"
+                :aria-placeholder="placeholder"
                 @input="handleInput"
                 @keydown="keyDown"
                 @keyup="handleSuggestionsPopupKeyUp"
@@ -64,6 +70,10 @@ const props = defineProps({
         default: false,
         required: false,
     },
+    placeholder: {
+        type: String,
+        default: '',
+    },
     suggestionOptions: {
         type: Array,
         default: () => [],
@@ -89,6 +99,12 @@ const suggestionsData = ref(null);
  */
 const content = ref(props.value);
 
+/**
+ * Unique identifier used for identifying the input label for accessibility reasons.
+ * @type {import('vue').Ref<string>}
+ */
+const inputLabelId = ref(`input-label-${Math.floor(Math.random() * 10000000)}`);
+
 // deconstruct composable
 const {
     suggestionsPopupVisible,
diff --git a/src/components/RecipeEdit.vue b/src/components/RecipeEdit.vue
index 00b11a1e3..595ff960c 100644
--- a/src/components/RecipeEdit.vue
+++ b/src/components/RecipeEdit.vue
@@ -16,6 +16,15 @@
                 :field-label="t('cookbook', 'Description')"
                 :suggestion-options="allRecipeOptions"
             />
+            <EditInputField
+                v-model="recipe['citation']"
+                :field-type="'text'"
+                :field-label="t('cookbook', 'Source')"
+                :placeholder="
+                    // TRANSLATORS Example (placeholder) name for a citation of the recipe's source
+                    t('cookbook', 'Grandma Betty')
+                "
+            />
             <EditInputField
                 v-model="recipe['url']"
                 :field-type="'url'"
@@ -201,6 +210,7 @@ const recipe = ref({
     id: 0,
     name: '',
     description: '',
+    citation: '',
     url: '',
     image: '',
     prepTime: '',
@@ -531,6 +541,7 @@ const initEmptyRecipe = () => {
         id: 0,
         name: null,
         description: '',
+        citation: '',
         url: '',
         image: '',
         prepTime: '',
diff --git a/src/components/RecipeView/RecipeView.vue b/src/components/RecipeView/RecipeView.vue
index 671a7cc1d..bef4bdadd 100644
--- a/src/components/RecipeView/RecipeView.vue
+++ b/src/components/RecipeView/RecipeView.vue
@@ -14,9 +14,18 @@
                 </div>
 
                 <div class="meta">
-                    <h2 class="heading">{{ $store.state.recipe.name }}</h2>
+                    <div class="heading">
+                        <h2 class="mb-0">{{ $store.state.recipe.name }}</h2>
+                        <p v-if="$store.state.recipe.citation">
+                            {{
+                                // TRANSLATORS Indicates citation/source of recipe. Ex. "by Grandma Betty"
+                                t('cookbook', 'by')
+                            }}
+                            <span>{{ $store.state.recipe.citation }}</span>
+                        </p>
+                    </div>
                     <div class="details">
-                        <div v-if="recipe.keywords.length">
+                        <div v-if="recipe.keywords.length" class="mb-3">
                             <ul v-if="recipe.keywords.length">
                                 <RecipeKeyword
                                     v-for="(keyword, idx) in recipe.keywords"
@@ -816,6 +825,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.mb-0 {
+    margin-bottom: 0 !important;
+}
+
+.mb-3 {
+    margin-bottom: 0.75rem !important;
+}
+
 .wrapper {
     width: 100%;
 }
@@ -873,6 +890,7 @@ export default {
 
 .heading {
     margin-top: 12px;
+    margin-bottom: 1rem;
 }
 
 .dates {