diff --git a/src/components/RentingComponents/.gitkeep b/src/components/RentingComponents/.gitkeep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/components/RentingComponents/NewRent.vue b/src/components/RentingComponents/NewRent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6e69d1c65daad4afc3f4aafb8686ed707a6c7b37
--- /dev/null
+++ b/src/components/RentingComponents/NewRent.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="confirmationBox">
+    <div class="rentTitle">
+      <h1>
+       {{ title }}
+      </h1>
+    </div>
+    
+    <div class = "fromTime">
+      <p>Fra: {{ from_time }}</p>
+    </div>
+    <div class = "toTime">
+      <p>Til: {{ to_time }}</p>
+    </div>
+    <div class = "message">
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+        id="descriptionLabel"
+        >Skriv en melding til utleier</label
+      >
+      <textarea
+        id="description"
+        rows="4"
+        v-model="message"
+        class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        required
+      ></textarea>
+    </div>
+    <colored-button class = "cancelButton" :text="'Tilbake'"></colored-button>
+    <div class = "confirmButton">
+    <colored-button @click="sendRent" :text="'Send'"></colored-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
+import { postNewRent } from "@/utils/apiutil";
+export default {
+  name: "NewRent",
+  components: {
+    ColoredButton,
+  },
+  data() {
+    return {
+      title: this.newRentBox.title,
+      message: "",
+      price: this.newRentBox.price_per_day,
+    };
+  },
+  props: {
+    newRentBox: {
+      renterId: Number,
+      title: String,
+      description: String,
+      fromTime: Date,
+      toTime: Date,
+      pricePerDay: Number,
+      listingId: Number,
+      isAccepted: Boolean
+    },
+  },
+  methods: {
+    cancelRent() {
+      console.log("Canceled");
+    },
+    sendRent: async function () {
+      const rent = {
+        // message: this.message,
+        listingId: this.newRentBox.listingId,
+        renterId: this.newRentBox.renterId,
+        isAccepted: false,
+        toTime: this.newRentBox.toTime,
+        fromTime: this.newRentBox.fromTime,
+      };
+      await postNewRent(rent);
+      console.log(rent);
+    },
+  },
+};
+</script>
+
+<style>
+.confirmationBox{
+  margin-top: 60fr;
+  width: 70%;
+  margin: auto;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-rows: 1fr 1fr 1fr 3fr 1fr;
+  max-height: 90%;
+}
+.cancelButton{
+grid-column: 1/2;
+grid-row: 1/2;
+}
+.rentTitle{
+  margin-top: 10%;
+  text-align: center;
+  grid-column: 2/3;
+}
+.fromTime{
+  grid-row: 2/3;
+  grid-column: 1/3;
+  display: block;
+}
+.toTime{
+  grid-row: 3/4;
+  grid-column: 1/3;
+  display: block;
+}
+
+.message{
+  grid-column: 1/3;
+  grid-row: 4/5;
+}
+.confirmButton{
+  grid-column: 1/3;
+  grid-row: 5/6;
+  align-content: center;
+}
+</style>
diff --git a/src/views/RentingViews/.gitkeep b/src/views/RentingViews/.gitkeep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/views/RentingViews/NewRentView.vue b/src/views/RentingViews/NewRentView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6a888250e4af7e134504cca97a0c4cd962885435
--- /dev/null
+++ b/src/views/RentingViews/NewRentView.vue
@@ -0,0 +1,26 @@
+<template>
+  <NewRent :newRentBox="item"> </NewRent>
+</template>
+
+<script>
+import NewRent from "@/components/RentingComponents/NewRent.vue";
+export default {
+  name: "NewRentView.vue",
+  data() {
+    return {
+      item: {
+        renterId: 3,
+        title: "Jekk til leie",
+        description: "Typ transport",
+        fromTime: "2022-07-26",
+        toTime: "2022-08-01",
+        pricePerDay: 4.0,
+        listingId: 157,
+      },
+    };
+  },
+  components: {
+    NewRent,
+  },
+};
+</script>
diff --git a/tests/unit/apiutil-communityHome-mock.spec.js b/tests/unit/apiutil-communityHome-mock.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..4ab75d6469cf79e31546054eebae45ce5976284d
--- /dev/null
+++ b/tests/unit/apiutil-communityHome-mock.spec.js
@@ -0,0 +1,55 @@
+import { GetCommunity, GetListingsInCommunity } from "@/utils/apiutil";
+import axios from "axios";
+
+jest.mock("axios");
+
+describe("testing mocking of apiutil.js", () => {
+  it("check that existing group returns correctly", async () => {
+    const expectedResponse = {
+      communityId: 4040,
+      name: "Fisken i vannet",
+      description: "For vi som liker fjell fisk",
+      visibility: 1,
+      location: "Bergen brygge",
+      picture: "fish blub blub",
+    };
+
+    axios.get.mockImplementation(() =>
+      Promise.resolve({ data: expectedResponse })
+    );
+
+    const communityResponse = await GetCommunity(4040);
+    expect(communityResponse.name).toBe(expectedResponse.name);
+  });
+
+  it("check that existing group returns correct listings", async () => {
+    const expectedResponse = {
+      item1: {
+        title: "Fiskekurs",
+        description: "Fisking og sånn",
+        pricePerDay: 200,
+        address: "Vannet",
+        userID: 6,
+        categoryNames: null,
+        communityIDs: null,
+      },
+
+      item2: {
+        title: "TestFraFrontend",
+        description: "oslo",
+        pricePerDay: 500,
+        address: "oslo",
+        userID: 1,
+        categoryNames: null,
+        communityIDs: null,
+      },
+    };
+
+    axios.get.mockImplementation(() =>
+      Promise.resolve({ data: expectedResponse })
+    );
+
+    const communityItemResponse = await GetListingsInCommunity(4040);
+    expect(communityItemResponse).toBe(expectedResponse);
+  });
+});