diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 921b849..ee9960d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,32 +1,32 @@
 <template>
-    <div>
-        <customer></customer>
-        <the-footer></the-footer>
-    </div>
+  <div>
+    <customer></customer>
+    <the-footer></the-footer>
+  </div>
 </template>
 
 <script>
 import TheFooter from "./components/UI/TheFooter.vue";
-import Customer from "./components/Customers.vue";
+import Customer from "./components/customers/Customers.vue";
 
 export default {
-    components: {
-        TheFooter,
-        Customer,
-    },
-    data() {
-        return {};
-    },
+  components: {
+    TheFooter,
+    Customer,
+  },
+  data() {
+    return {};
+  },
 };
 </script>
 
 <style>
 html {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-    margin-top: 60px;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
 }
 </style>
diff --git a/frontend/src/components/Customers.vue b/frontend/src/components/Customers.vue
deleted file mode 100644
index dadecb6..0000000
--- a/frontend/src/components/Customers.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <header><h1>List of Customers</h1></header>
-    <div>
-        <form action="/create/customer/">
-            <input type="submit" value="Add Customer" class="btn btn-primary" />
-        </form>
-    </div>
-    <table class="table table-hover table-bordered">
-        <tr>
-            <th class="orderable">Name</th>
-            <th>Nets</th>
-            <th>Computers</th>
-            <th>Devices</th>
-            <th>Backups</th>
-            <th>Licenses</th>
-            <th>Users</th>
-            <th>Actions</th>
-        </tr>
-
-        <tr v-for="customer in customers" :key="customer.id">
-            <td>
-                <a href="">{{ customer.name }}</a>
-            </td>
-            <td><a :href="customer.url">Nets</a></td>
-            <td><a :href="customer.url">Computers</a></td>
-            <td><a :href="customer.url">Devices</a></td>
-            <td><a :href="customer.url">Backups</a></td>
-            <td><a :href="customer.url">Licenses</a></td>
-            <td><a :href="customer.url">Users</a></td>
-            <td>
-                <a href="#" @click="deleteCustomer(customer.url)">delete</a>
-            </td>
-        </tr>
-    </table>
-</template>
-
-<script>
-import getAPI from "./scripts/axios-api";
-
-export default {
-    data() {
-        return {
-            customers: [],
-        };
-    },
-    methods: {
-        deleteCustomer(url){
-        getAPI.delete(url)
-                .catch((err) => {
-                    console.log(err);
-                });
-            this.customers = this.customers.filter(customer => customer.url !== url)
-        },
-    },
-    created() {
-        getAPI
-            .get("/customers/")
-            .then((response) => {
-                console.log("Post API has recieved data");
-                this.customers = response.data.results;
-            })
-            .catch((err) => {
-                console.log(err);
-            });
-    },
-};
-</script>
diff --git a/frontend/src/components/customers/AddCustomer.vue b/frontend/src/components/customers/AddCustomer.vue
new file mode 100644
index 0000000..dfb4b22
--- /dev/null
+++ b/frontend/src/components/customers/AddCustomer.vue
@@ -0,0 +1,9 @@
+<template> </template>
+
+<script>
+import getAPI from "../scripts/axios-api";
+
+export default {};
+</script>
+
+<style></style>
diff --git a/frontend/src/components/customers/Customers.vue b/frontend/src/components/customers/Customers.vue
new file mode 100644
index 0000000..53c3730
--- /dev/null
+++ b/frontend/src/components/customers/Customers.vue
@@ -0,0 +1,73 @@
+<template>
+  <header><h1>List of Customers</h1></header>
+  <div>
+    <form @submit.prevent="addCustomer">
+      <input type="submit" value="Add Customer" class="btn btn-primary" />
+    </form>
+  </div>
+  <table class="table table-hover table-bordered">
+    <tr>
+      <th class="orderable">Name</th>
+      <th>Nets</th>
+      <th>Computers</th>
+      <th>Devices</th>
+      <th>Backups</th>
+      <th>Licenses</th>
+      <th>Users</th>
+      <th>Actions</th>
+    </tr>
+
+    <tr v-for="customer in customers" :key="customer.id">
+      <td>
+        <a href="">{{ customer.name }}</a>
+      </td>
+      <td><a :href="customer.url">Nets</a></td>
+      <td><a :href="customer.url">Computers</a></td>
+      <td><a :href="customer.url">Devices</a></td>
+      <td><a :href="customer.url">Backups</a></td>
+      <td><a :href="customer.url">Licenses</a></td>
+      <td><a :href="customer.url">Users</a></td>
+      <td>
+        <a href="#" @click="deleteCustomer(customer.url)">delete</a>
+      </td>
+    </tr>
+  </table>
+</template>
+
+<script>
+import getAPI from "../scripts/axios-api";
+
+export default {
+  data() {
+    return {
+      customers: [],
+    };
+  },
+  methods: {
+    deleteCustomer(url) {
+      getAPI
+        .delete(url)
+        .then((response) => {
+          console.log(response.data);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+      this.customers = this.customers.filter(
+        (customer) => customer.url !== url
+      );
+    },
+  },
+  created() {
+    getAPI
+      .get("/customers/")
+      .then((response) => {
+        console.log("Post API has recieved data");
+        this.customers = response.data.results;
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  },
+};
+</script>