diff --git a/common/src/models/article.rs b/common/src/models/article.rs
index 24b8c5f..0aaa425 100644
--- a/common/src/models/article.rs
+++ b/common/src/models/article.rs
@@ -1,7 +1,7 @@
 use serde::{Deserialize, Serialize};
 use sqlx::{FromRow, PgPool};
 use crate::models::origin::Origin;
-use crate::models::variant::Variant;
+use crate::models::variant::{load_article_variants, Variant};
 use sqlx::{Arguments, Pool, Row, Postgres, Error};
 use sqlx::postgres::{PgArguments, PgQueryResult, PgRow};
 use log::{debug, error, info};
@@ -29,7 +29,20 @@ fn from_postgres_row_small(row: PgRow) -> Article {
     }
 }
 
-fn from_postgres_row(row: PgRow, pool: PgPool) -> Article {
+async fn from_postgres_row(row: PgRow, pool: PgPool) -> Article {
+    let variants_option = load_article_variants(row.get(0), pool).await;
+
+    let variants = match variants_option {
+        Some(variants_inner) => {
+            info!("Found Variants");
+            variants_inner
+        }
+        None => {
+            info!("No Variants");
+            vec![]
+        }
+    };
+
     Article {
         id: row.get(0),
         name: row.get(1),
@@ -37,7 +50,7 @@ fn from_postgres_row(row: PgRow, pool: PgPool) -> Article {
         origin: row.get(3),
         description: row.get(4),
         ingredients: row.get(5),
-        variants: vec![],
+        variants: variants,
     }
 }
 
@@ -85,7 +98,7 @@ pub async fn load_article(id: i64, pool: PgPool) -> Option<Article> {
 
     match res {
         Ok(record) => {
-            let article = from_postgres_row(record, pool);
+            let article = from_postgres_row(record, pool).await;
 
             Some(article)
         }
@@ -96,7 +109,7 @@ pub async fn load_article(id: i64, pool: PgPool) -> Option<Article> {
     }
 }
 
-pub async fn insert_article(article: &Article, pool: PgPool) {
+pub async fn insert_article(article: &Article, pool: PgPool) -> Option<Article> {
     let mut args = PgArguments::default();
     args.add(&article.name);
     args.add(&article.bio);
@@ -105,14 +118,26 @@ pub async fn insert_article(article: &Article, pool: PgPool) {
     args.add(&article.ingredients);
 
     let statement = format!(
-        "INSERT INTO {} (name, bio, origin, description, ingredients) VALUES ($1, $2, $3, $4, $5)",
+        "INSERT INTO {} (name, bio, origin, description, ingredients) VALUES ($1, $2, $3, $4, $5) RETURNING *",
         "article",
     );
 
     let res = sqlx::query_with(
         statement.as_str(),
         args)
-        .execute(&pool).await.unwrap();
+        .fetch_one(&pool).await;
 
     info!("{:#?}", res);
+
+    match res {
+        Ok(record) => {
+            let article = from_postgres_row(record, pool).await;
+
+            Some(article)
+        }
+        Err(err) => {
+            error!("Error while loading newly created article: {}", article.name);
+            None
+        }
+    }
 }
diff --git a/common/src/models/variant.rs b/common/src/models/variant.rs
index 73605ab..07e7d23 100644
--- a/common/src/models/variant.rs
+++ b/common/src/models/variant.rs
@@ -1,8 +1,90 @@
+use log::{error, info};
 use serde::{Deserialize, Serialize};
-use sqlx::FromRow;
+use sqlx::{Arguments, FromRow, PgPool, Row};
+use sqlx::postgres::{PgArguments, PgRow};
 
 #[derive(Debug, Deserialize, Serialize, Clone, FromRow)]
 pub struct Variant {
     pub id: i64,
-
+    pub weight: String,
+    pub ean: Option<String>,
+    pub name: Option<String>,
+    pub description: Option<String>,
+    pub ingredients: Option<String>,
+}
+
+fn from_postgres_row_small(row: PgRow) -> Variant {
+    Variant {
+        id: row.get(0),
+        weight: row.get(2),
+        ean: row.get(3),
+        name: row.get(4),
+        description: row.get(5),
+        ingredients: row.get(6),
+    }
+}
+
+pub async fn load_article_variants(article_id: i64, pool: PgPool) -> Option<Vec<Variant>> {
+    let statement = format!(
+        "SELECT * FROM {} WHERE article_id = $1",
+        "variant",
+    );
+
+    let mut args = PgArguments::default();
+    args.add(article_id);
+
+    let res = sqlx::query_with(
+        statement.as_str(), args)
+        .fetch_all(&pool).await;
+
+    let mut variants: Vec<Variant> = Vec::new();
+
+    match res {
+        Ok(records) => {
+            for record in records {
+                variants.push(
+                    from_postgres_row_small(record)
+                );
+            }
+
+            Some(variants)
+        }
+        Err(err) => {
+            error!("Error while loading variants for article: {}", article_id);
+            None
+        }
+    }
+}
+
+pub async fn insert_variant(article_id: i64, variant: &Variant, pool: PgPool) -> Option<Variant> {
+    let mut args = PgArguments::default();
+    args.add(&article_id);
+    args.add(&variant.weight);
+    args.add(&variant.ean);
+    args.add(&variant.name);
+    args.add(&variant.description);
+    args.add(&variant.ingredients);
+
+    let statement = format!(
+        "INSERT INTO {} (article_id, weight, ean, name, description, ingredients) VALUES ($1, $2, $3, $4, $5, $6) RETURNING *",
+        "variant",
+    );
+
+    let res = sqlx::query_with(
+        statement.as_str(),
+        args)
+        .fetch_one(&pool).await;
+
+    info!("{:#?}", res);
+
+    match res {
+        Ok(record) => {
+            let variant = from_postgres_row_small(record);
+            Some(variant)
+        }
+        Err(err) => {
+            error!("Error while loading newly created variant for article: {}", article_id);
+            None
+        }
+    }
 }
diff --git a/frontend/app/components/article/article.vue b/frontend/app/components/article/article.vue
index 9068ab0..a9838c8 100644
--- a/frontend/app/components/article/article.vue
+++ b/frontend/app/components/article/article.vue
@@ -47,6 +47,7 @@
                 counter
                 :persistentCounter=true
                 rows="6"
+                no-resize
             >
               <template v-slot:counter="{ counter }">
                 <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
@@ -63,6 +64,7 @@
                 counter
                 :persistentCounter=true
                 rows="6"
+                no-resize
             >
               <template v-slot:counter="{ counter }">
                 <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
diff --git a/frontend/app/components/variant/variant.vue b/frontend/app/components/variant/variant.vue
new file mode 100644
index 0000000..c28a8b0
--- /dev/null
+++ b/frontend/app/components/variant/variant.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import {originToString} from "~/types/origin";
+
+  let store = useLabelEditorStore();
+</script>
+
+<template>
+  <v-container>
+    <v-card v-if="store.article != null">
+      <v-card-title>
+        <v-col>
+          <v-row>
+            Varianten
+
+            <v-spacer/>
+            <v-divider :vertical="true"/>
+
+            <VariantCreate/>
+          </v-row>
+        </v-col>
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text
+          v-for="(variant, index) in store.article.variants"
+          :key="variant.id"
+      >
+        <VariantRow
+            v-bind:variant="variant"
+            v-bind:variant-index="index"
+        />
+        <v-divider/>
+      </v-card-text>
+
+    </v-card>
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/app/components/variant/variantCreate.vue b/frontend/app/components/variant/variantCreate.vue
new file mode 100644
index 0000000..0aa0bb5
--- /dev/null
+++ b/frontend/app/components/variant/variantCreate.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import type {Ref} from "vue";
+import {useLabelEditorStore} from "~/store/labelEditorStore";
+import { Variant } from "~/types/variant";
+
+let store = useLabelEditorStore();
+
+let dialog: Ref<boolean> = ref<boolean>(false);
+let loading: Ref<boolean> = ref<boolean>(false);
+
+let weight: Ref<string | null> = ref<string | null>(null);
+let ean: Ref<string | null> = ref<string | null>(null);
+let name: Ref<string | null> = ref<string | null>(null);
+let description: Ref<string | null> = ref<string | null>(null);
+let ingredients: Ref<string | null> = ref<string | null>(null);
+
+async function create() {
+  if (store.article != null &&
+      weight.value != null && weight.value.trim().length > 0
+  ) {
+    loading.value = true;
+
+    const variant: Variant = new Variant(0, weight.value, ean.value, name.value, description.value, ingredients.value);
+
+    await store.addVariant(store.article.id, variant);
+
+    closeDialog();
+  }
+}
+
+function closeDialog() {
+  dialog.value = false;
+  clearVariables();
+}
+
+function clearVariables() {
+  weight.value = null;
+  ean.value = null;
+  name.value = null;
+  description.value = null;
+  ingredients.value = null;
+
+  loading.value = false;
+}
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialog"
+      :scrollable="true"
+      width="800"
+      max-height="750"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          :flat="true"
+          v-bind="props"
+          size="small"
+      >
+        <v-icon>mdi-plus-thick</v-icon>
+        <v-tooltip
+            activator="parent"
+            location="bottom"
+        >
+          Erstellen
+        </v-tooltip>
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-card-title>
+        <v-icon size="small">
+          mdi-plus-thick
+        </v-icon>
+
+        Artikel erstellen
+
+        <v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text>
+        <v-text-field
+            v-model.trim="name"
+            label="Bezeichnung"
+            autofocus
+        />
+
+        <v-text-field
+            v-model.trim="weight"
+            label="Gewicht"
+        />
+
+        <v-textarea
+            v-model.trim="ean"
+            label="EAN-Code"
+        />
+
+        <v-textarea
+            v-model.trim="description"
+            label="Beschreibung"
+        />
+
+        <v-textarea
+            v-model.trim="ingredients"
+            label="Zutaten"
+        />
+      </v-card-text>
+
+      <v-divider/>
+
+      <v-card-actions>
+        <v-spacer/>
+
+        <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="closeDialog()"
+        >
+          Abbrechen
+        </v-btn>
+
+        <v-btn
+            variant="text"
+            :disabled="weight == null ||
+             loading"
+            @click="create();"
+        >
+          Erstellen
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/app/components/variant/variantRow.vue b/frontend/app/components/variant/variantRow.vue
new file mode 100644
index 0000000..d089061
--- /dev/null
+++ b/frontend/app/components/variant/variantRow.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+  import type {Variant} from "~/types/variant";
+
+  const props = defineProps({
+    variant: {type: Object as PropType<Variant>, required: true},
+    variantIndex: {type: Number, required: true},
+  });
+</script>
+
+<template>
+  <v-row
+      align="start"
+  >
+    <v-col cols="2">
+      <v-row>
+        <v-text-field
+            v-model.trim="variant.weight"
+            label="Gewicht"
+            :readonly="true"
+        />
+      </v-row>
+      <v-row>
+        <v-text-field
+            v-model.trim="variant.ean"
+            label="EAN"
+            :readonly="true"
+        />
+      </v-row>
+    </v-col>
+
+    <v-col cols="5">
+      <v-text-field
+          v-model="variant.description"
+          label="Bezeichnung"
+          :readonly="true"
+          hide-details
+      />
+    </v-col>
+
+    <v-col cols="5">
+      <v-text-field
+          v-model="variant.ingredients"
+          label="Zutaten"
+          :readonly="true"
+          hide-details
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
index 81224c5..9c42639 100644
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -9,6 +9,7 @@
       v-if="store.article != null"
   >
     <Article/>
+    <Variant/>
   </v-container>
 
   <v-container v-else>
diff --git a/frontend/app/store/labelEditorStore.ts b/frontend/app/store/labelEditorStore.ts
index 85187c7..80b7653 100644
--- a/frontend/app/store/labelEditorStore.ts
+++ b/frontend/app/store/labelEditorStore.ts
@@ -3,6 +3,7 @@ import type {Article} from "~/types/article";
 import {NotificationMessage} from "~/types/notificationMessage";
 import type {RuntimeConfig} from "nuxt/schema";
 import {Origin} from "~/types/origin";
+import type {Variant} from "~/types/variant";
 
 interface State {
   config: RuntimeConfig,
@@ -165,5 +166,25 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
         this.addNotification(true, 'Es ist kein Artikel ausgewählt');
       }
     },
+
+    // Variant
+    async addVariant(articleID: number, variant: Variant) {
+      if(this.article != null) {
+        try {
+          let createdVariant = await $fetch<Variant>(this.config.public.url + '/article/' + articleID + '/variant', {
+            method: 'POST',
+            body: JSON.stringify(variant),
+          });
+
+          this.article.variants.push(createdVariant);
+
+          this.addNotification(false, 'Variante erstellt.');
+        } catch {
+          this.addNotification(true, 'Fehler beim erstellen der Variante.');
+        }
+      } else {
+        this.addNotification(true, 'Kann Variante nicht erstellen. Es ist kein Artikel ausgewählt.');
+      }
+    },
   },
 });
diff --git a/frontend/app/types/variant.ts b/frontend/app/types/variant.ts
index 01a5ef1..1e828b9 100644
--- a/frontend/app/types/variant.ts
+++ b/frontend/app/types/variant.ts
@@ -1,12 +1,12 @@
 export class Variant {
   readonly id: number;
   weight: string;
-  ean: string;
+  ean: string | null;
   name: string | null;
   description: string | null;
   ingredients: string | null;
 
-  constructor(id: number, weight: string, ean: string, name: string|null, description:string|null, ingredients: string|null) {
+  constructor(id: number, weight: string, ean: string|null, name: string|null, description:string|null, ingredients: string|null) {
     this.id = id;
     this.weight = weight;
     this.ean = ean;
diff --git a/server/src/main.rs b/server/src/main.rs
index 439d7e3..ea9d07e 100644
--- a/server/src/main.rs
+++ b/server/src/main.rs
@@ -15,6 +15,7 @@ use tower_http::cors::{AllowOrigin, Any, CorsLayer};
 use tracing::info;
 use http::header::{AUTHORIZATION, ACCEPT, ACCESS_CONTROL_ALLOW_ORIGIN, CONTENT_TYPE, ACCESS_CONTROL_ALLOW_CREDENTIALS};
 use common::models::article;
+use common::models::variant::{insert_variant, Variant};
 
 #[tokio::main]
 async fn main() {
@@ -28,11 +29,6 @@ async fn main() {
 
     // initialize tracing
     tracing_subscriber::fmt().init();
-/*
-    tracing_subscriber::fmt()
-        .with_max_level(tracing::Level::INFO)
-        .init();
-*/
 
     let pool = PgPoolOptions::new()
         .max_connections(50)
@@ -49,11 +45,10 @@ async fn main() {
 
     // build our application with a route
     let app = Router::new()
-        // `GET /` goes to `root`
-        .route("/", get(root))
         .route("/articles", get(get_articles))
         .route("/article", post(create_article))
         .route("/article/{id}", get(get_article))
+        .route("/article/{id}/variant", post(add_variant))
         .with_state(pool)
         .layer(cors);
 
@@ -63,11 +58,6 @@ async fn main() {
     axum::serve(listener, app).await.unwrap();
 }
 
-// basic handler that responds with a static string
-async fn root() -> &'static str {
-    "Hello, World!"
-}
-
 #[tracing::instrument(ret)]
 async fn get_articles(
     State(pool): State<PgPool>,
@@ -136,3 +126,31 @@ async fn create_article(
 
     (StatusCode::CREATED, Json(article))
 }
+
+async fn add_variant(
+    State(pool): State<PgPool>,
+    Path(article_id): Path<i64>,
+    Json(payload): Json<Variant>,
+) -> (StatusCode, Json<Variant>) {
+    info!("Add variant");
+
+    let created_variant = insert_variant(article_id, &payload, pool).await;
+
+    match created_variant {
+        Some(variant) => {
+            (StatusCode::OK, Json(variant))
+        }
+        None => {
+            let variant = Variant {
+                id: 0,
+                weight: "".to_string(),
+                ean: None,
+                name: None,
+                description: None,
+                ingredients: None,
+            };
+
+            (StatusCode::INTERNAL_SERVER_ERROR, Json(variant))
+        }
+    }
+}
\ No newline at end of file