diff --git a/web/src/store.js b/web/src/store.js
index c2986ad..71d7df8 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -460,6 +460,12 @@ const store = createStore({
             if (data && success) {
                 commit('setShippingCodes', data);
             }
+        },
+        async createShippingCode({commit, state}, code) {
+            const {data, success} = await http.post('/2/shipping_codes/', {code}, state.user.token);
+            if (data && success) {
+                commit('setShippingCodes', data);
+            }
         }
     },
     plugins: [
diff --git a/web/src/views/admin/Shipping.vue b/web/src/views/admin/Shipping.vue
index e82f8ed..b38de80 100644
--- a/web/src/views/admin/Shipping.vue
+++ b/web/src/views/admin/Shipping.vue
@@ -1,22 +1,48 @@
 <template>
-    <Table
-        :columns="['type', 'code']"
-        :items="shippingCodes"
-        :keyName="'code'"
-    >
-        <template #actions="{ item }">
-            <div class="btn-group">
-                <button class="btn btn-secondary" @click.stop="alert(item)">
-                    <font-awesome-icon icon="archive"/>
-                    use
-                </button>
-                <button class="btn btn-danger" @click.stop="">
-                    <font-awesome-icon icon="trash"/>
-                    delete
+    <div>
+        <h3>Shipping Codes</h3>
+        <Table
+            :columns="['type', 'code']"
+            :items="shippingCodes"
+            :keyName="'code'"
+        >
+            <template #actions="{ item }">
+                <div class="btn-group">
+                    <button class="btn btn-secondary" @click.stop="alert(item)">
+                        <font-awesome-icon icon="archive"/>
+                        use
+                    </button>
+                    <button class="btn btn-danger" @click.stop="">
+                        <font-awesome-icon icon="trash"/>
+                        delete
+                    </button>
+                </div>
+            </template>
+        </Table>
+        <div class="mt-3">
+            <textarea class="form-control mb-3" rows="5" placeholder="Shipping Code List" v-model="bulk_codes" v-if="bulk"></textarea>
+            <div class="input-group">
+                <input type="text" class="form-control" placeholder="Shipping Code" v-model="code" v-if="!bulk">
+                <select class="form-control" v-model="type">
+                    <option value="2kg-eu">2kg DE</option>
+                    <option value="2kg-uk">2kg EU</option>
+                    <option value="2kg-us">5kg DE</option>
+                    <option value="2kg-us">5kg EU</option>
+                    <option value="2kg-us">10kg DE</option>
+                </select>
+                <div class="input-group-prepend">
+                    <div class="input-group-text">
+                        <input type="checkbox" v-model="bulk" class="mr-2" id="bulk" style="margin: 0;">
+                        <label for="bulk" style="margin: 0;">Bulk</label>
+                    </div>
+                </div>
+                <button class="btn btn-primary form-control" @click="createSingleOrBulkShippingCode">
+                    <font-awesome-icon icon="plus"/>
+                    {{ (bulk ? "Add Shipping Codes" : "Add Shipping Code") }}
                 </button>
             </div>
-        </template>
-    </Table>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -26,8 +52,29 @@ import Table from '@/components/Table';
 export default {
     name: 'Shipping',
     components: {Table},
+    data() {
+        return {
+            code: '',
+            bulk_codes: '',
+            type: '2kg-eu',
+            bulk: false,
+        };
+    },
     computed: mapState(['shippingCodes']),
-    methods: mapActions(['fetchShippingCodes']),
+    methods: {
+        ...mapActions(['fetchShippingCodes', 'createShippingCode']),
+        createSingleOrBulkShippingCode() {
+            if (this.bulk) {
+                this.bulk_codes.split('\n').forEach(code => {
+                    this.createShippingCode({code: code.trim(), type: this.type});
+                });
+                this.bulk_codes = '';
+            } else {
+                this.createShippingCode({code: this.code, type: this.type});
+                this.code = '';
+            }
+        },
+    },
     mounted() {
         this.fetchShippingCodes();
     },