diff --git a/plugins/docker/tenant-proxy.conf.template b/plugins/docker/tenant-proxy.conf.template
index 6db283107..175dd6568 100644
--- a/plugins/docker/tenant-proxy.conf.template
+++ b/plugins/docker/tenant-proxy.conf.template
@@ -68,6 +68,43 @@ server {
         }
     }
 
+    location ~ ^/multitenancy/reservations$ {
+        proxy_set_header X-API-KEY ${ACAPY_ADMIN_URL_API_KEY};
+        proxy_pass ${ACAPY_ADMIN_URL};
+        allow all;
+
+        proxy_set_header Proxy '';
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        proxy_hide_header Access-Control-Allow-Origin;
+        proxy_hide_header Access-Control-Allow-Credentials;
+
+        set $CORS_CREDS true;
+        set $CORS_ORIGIN $http_origin;
+        set $CORS_PREFLIGHT_CACHE_AGE 600;
+
+        if ($request_method = 'OPTIONS') {
+            add_header Access-Control-Allow-Origin $CORS_ORIGIN;
+            add_header Access-Control-Allow-Methods $http_access_control_request_methods;
+            add_header Access-Control-Allow-Headers $http_access_control_request_headers;
+            add_header Access-Control-Allow-Credentials $CORS_CREDS;
+
+            add_header Access-Control-Max-Age $CORS_PREFLIGHT_CACHE_AGE;
+            add_header Content-Type 'text/plain; charset=utf-8';
+            add_header Content-Length 0;
+            return 204;
+        }
+        if ($request_method != 'OPTIONS') {
+            add_header Access-Control-Allow-Origin $CORS_ORIGIN;
+            add_header Access-Control-Allow-Methods $http_access_control_request_methods;
+            add_header Access-Control-Allow-Headers $http_access_control_request_headers;
+            add_header Access-Control-Allow-Credentials $CORS_CREDS;
+        }
+    }
+
     location ~ ^/status/(live|ready)$ {
         proxy_set_header X-API-KEY ${ACAPY_ADMIN_URL_API_KEY};
         proxy_pass ${ACAPY_ADMIN_URL};
diff --git a/services/tenant-ui/frontend/src/assets/style.scss b/services/tenant-ui/frontend/src/assets/style.scss
index c5fec5aab..8d8020693 100644
--- a/services/tenant-ui/frontend/src/assets/style.scss
+++ b/services/tenant-ui/frontend/src/assets/style.scss
@@ -4,3 +4,34 @@
 @import 'tenantuiComponents.scss';
 @import 'primevueComponents.scss';
 @import 'toast.scss';
+
+// General HTML
+html,
+body,
+#app {
+  height: 100vh;
+  padding: 0;
+  margin: 0;
+}
+
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+a {
+  color: $tenant-ui-link-color;
+}
diff --git a/services/tenant-ui/frontend/src/components/Login.vue b/services/tenant-ui/frontend/src/components/Login.vue
index 9e4491f6d..55d27b7ee 100644
--- a/services/tenant-ui/frontend/src/components/Login.vue
+++ b/services/tenant-ui/frontend/src/components/Login.vue
@@ -11,8 +11,31 @@
           />
         </div>
 
-        <div class="py-8">
+        <!-- Logging In -->
+        <div v-if="loginMode === LOGIN_MODE.SIGNIN" class="py-6">
           <LoginForm />
+          <div class="mt-6">
+            <p>
+              Don't have an account?
+              <a
+                href="#"
+                class="p-button-link login-mode"
+                @click.prevent="loginMode = LOGIN_MODE.RESERVE"
+                >Create Request!</a
+              >
+            </p>
+          </div>
+        </div>
+
+        <!-- Making Reservation -->
+        <div v-else-if="loginMode === LOGIN_MODE.RESERVE" class="py-6">
+          <Button
+            label="Go Back to Sign-in"
+            icon="pi pi-arrow-left"
+            class="p-button-text"
+            @click="loginMode = LOGIN_MODE.SIGNIN"
+          />
+          <Reserve />
         </div>
       </div>
     </div>
@@ -26,10 +49,28 @@
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from 'pinia';
+// Vue
+import { ref } from 'vue';
+// PrimeVue
+import Button from 'primevue/button';
+// Components
 import LoginForm from '@/components/LoginForm.vue';
+import Reserve from './reservation/Reserve.vue';
+// State
+import { storeToRefs } from 'pinia';
 import { useConfigStore } from '@/store';
 const { config } = storeToRefs(useConfigStore());
+
+// Other login form swtiching
+enum LOGIN_MODE {
+  SIGNIN,
+  RESERVE,
+  STATUS,
+}
+const loginMode = ref(LOGIN_MODE.SIGNIN);
+const toggleLogin = () => {
+  alert('hi');
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/services/tenant-ui/frontend/src/components/reservation/Reserve.vue b/services/tenant-ui/frontend/src/components/reservation/Reserve.vue
new file mode 100644
index 000000000..f82ebb570
--- /dev/null
+++ b/services/tenant-ui/frontend/src/components/reservation/Reserve.vue
@@ -0,0 +1,171 @@
+<template>
+  <form @submit.prevent="handleSubmit(!v$.$invalid)">
+    <!-- Email -->
+    <div class="field mt-5 w-full">
+      <label
+        for="email"
+        :class="{ 'p-error': v$.contact_email.$invalid && submitted }"
+        >Email Address
+      </label>
+      <InputText
+        id="email"
+        v-model="v$.contact_email.$model"
+        type="text"
+        option-label="label"
+        autocomplete="email"
+        name="email"
+        autofocus
+        class="w-full"
+      />
+      <span v-if="v$.contact_email.$error && submitted">
+        <span v-for="(error, index) of v$.contact_email.$errors" :key="index">
+          <small class="p-error block">{{ error.$message }}</small>
+        </span>
+      </span>
+      <small
+        v-else-if="v$.contact_email.$invalid && submitted"
+        class="p-error"
+        >{{ v$.contact_email.required.$message }}</small
+      >
+    </div>
+
+    <!-- FullName -->
+    <div class="field mt-5 w-full">
+      <label
+        for="full-name"
+        :class="{ 'p-error': v$.contact_name.$invalid && submitted }"
+        >Full Name
+      </label>
+      <InputText
+        id="full-name"
+        v-model="v$.contact_name.$model"
+        autocomplete="name"
+        name="fullName"
+        class="w-full"
+      />
+      <small v-if="v$.contact_name.$invalid && submitted" class="p-error">{{
+        v$.contact_name.required.$message
+      }}</small>
+    </div>
+
+    <!-- Phone -->
+    <div class="field mt-5 w-full">
+      <label
+        for="phone"
+        :class="{ 'p-error': v$.contact_phone.$invalid && submitted }"
+        >Phone / Mobile
+      </label>
+      <InputText
+        id="phone"
+        v-model="v$.contact_phone.$model"
+        autocomplete="phone"
+        name="phone"
+        class="w-full"
+      />
+      <small v-if="v$.contact_phone.$invalid && submitted" class="p-error">{{
+        v$.contact_phone.required.$message
+      }}</small>
+    </div>
+
+    <!-- Tenant Name -->
+    <div class="field mt-5 w-full">
+      <label
+        for="tenant-name"
+        :class="{ 'p-error': v$.tenant_name.$invalid && submitted }"
+        >Tenant Name
+      </label>
+      <InputText
+        id="tenant-name"
+        v-model="v$.tenant_name.$model"
+        name="tenant-name"
+        class="w-full"
+      />
+      <small v-if="v$.tenant_name.$invalid && submitted" class="p-error">{{
+        v$.tenant_name.required.$message
+      }}</small>
+    </div>
+
+    <!-- Tenant Reason -->
+    <div class="field mt-5 w-full">
+      <label
+        for="tenant-reason"
+        :class="{ 'p-error': v$.tenant_reason.$invalid && submitted }"
+        >Tenant Reason
+      </label>
+      <Textarea
+        id="tenant-reason"
+        v-model="v$.tenant_reason.$model"
+        name="tenant-reason"
+        class="w-full"
+        :auto-resize="true"
+        rows="2"
+      />
+      <small v-if="v$.tenant_reason.$invalid && submitted" class="p-error">{{
+        v$.tenant_reason.required.$message
+      }}</small>
+    </div>
+
+    <Button
+      type="submit"
+      class="w-full mt-5"
+      label="Request"
+      :disabled="!!loading"
+      :loading="!!loading"
+    />
+  </form>
+</template>
+
+<script setup lang="ts">
+//Vue
+import { ref, reactive } from 'vue';
+// PrimeVue/Validation/etc
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import { useToast } from 'vue-toastification';
+import { email, required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+// State
+import { useReservationStore } from '@/store';
+import { storeToRefs } from 'pinia';
+
+const toast = useToast();
+
+// Login Form and validation
+const formFields = reactive({
+  contact_email: '',
+  contact_name: '',
+  contact_phone: '',
+  tenant_name: '',
+  tenant_reason: '',
+});
+const rules = {
+  contact_email: { required, email },
+  contact_name: { required },
+  contact_phone: { required },
+  tenant_name: { required },
+  tenant_reason: { required },
+};
+const v$ = useVuelidate(rules, formFields);
+
+// State setup
+const reservationStore = useReservationStore();
+const { loading, reservation } = storeToRefs(useReservationStore());
+
+// Form submission
+const submitted = ref(false);
+const handleSubmit = async (isFormValid: boolean) => {
+  submitted.value = true;
+
+  if (!isFormValid) {
+    return;
+  }
+  try {
+    await reservationStore.makeReservation(formFields);
+    toast.success(`Your request was received.`);
+  } catch (err) {
+    console.error(err);
+    toast.error(`Failure making request: ${err}`);
+  }
+};
+</script>
diff --git a/services/tenant-ui/frontend/src/helpers/constants.ts b/services/tenant-ui/frontend/src/helpers/constants.ts
index c262725c4..6bacd465d 100644
--- a/services/tenant-ui/frontend/src/helpers/constants.ts
+++ b/services/tenant-ui/frontend/src/helpers/constants.ts
@@ -58,4 +58,6 @@ export const API_PATH = {
   TENANT_SELF: '/tenant/v1/admin/self',
   TENANT_MAKE_ISSUER: '/tenant/v1/admin/make-issuer',
   TENANT_CONFIGURATION: '/tenant/v1/admin/configuration',
+
+  MULTITENANCY_RESERVATION: '/multitenancy/reservations',
 };
diff --git a/services/tenant-ui/frontend/src/main.ts b/services/tenant-ui/frontend/src/main.ts
index 96aea537e..7b6303252 100644
--- a/services/tenant-ui/frontend/src/main.ts
+++ b/services/tenant-ui/frontend/src/main.ts
@@ -1,7 +1,6 @@
 import router from './router';
 import { createApp } from 'vue';
 import createI18n from './plugins/i18n/i18n';
-import './style.css';
 import App from './App.vue';
 
 import { createPinia } from 'pinia';
diff --git a/services/tenant-ui/frontend/src/store/index.ts b/services/tenant-ui/frontend/src/store/index.ts
index 936c84fcd..7873e7433 100644
--- a/services/tenant-ui/frontend/src/store/index.ts
+++ b/services/tenant-ui/frontend/src/store/index.ts
@@ -8,6 +8,7 @@ export { useTenantStore } from './tenantStore';
 export { useTokenStore } from './tokenStore';
 export { useVerifierStore } from './verifierStore';
 export { useMessageStore } from './messageStore';
+export { useReservationStore } from './reservationStore';
 
 // Innkeeper
 export { useInnkeeperTokenStore } from './innkeeper/innkeeperTokenStore';
diff --git a/services/tenant-ui/frontend/src/store/reservationStore.ts b/services/tenant-ui/frontend/src/store/reservationStore.ts
new file mode 100644
index 000000000..14fbebbf7
--- /dev/null
+++ b/services/tenant-ui/frontend/src/store/reservationStore.ts
@@ -0,0 +1,59 @@
+import { API_PATH } from '@/helpers/constants';
+import axios from 'axios';
+import { defineStore, storeToRefs } from 'pinia';
+import { ref } from 'vue';
+import { useConfigStore } from './configStore';
+
+export const useReservationStore = defineStore('reservation', () => {
+  const { config } = storeToRefs(useConfigStore());
+  // A raw api call without using the interceptors from the acapyApiStore
+  // Needed for the open call to reservation at this point
+  const api = axios.create({
+    baseURL: config.value.frontend.tenantProxyPath,
+  });
+
+  // state
+  const loading: any = ref(false);
+  const error: any = ref(null);
+  const reservation: any = ref(null);
+
+  // actions
+  async function makeReservation(payload: any = {}) {
+    console.log('> reservationStore.makeReservation');
+    error.value = null;
+    loading.value = true;
+    console.log(payload);
+    await api
+      .post(API_PATH.MULTITENANCY_RESERVATION, payload)
+      .then((res) => {
+        console.log(res);
+        reservation.value = res.data.item;
+      })
+      .catch((err) => {
+        error.value = err;
+        console.log(error.value);
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+    console.log('< reservationStore.makeReservation');
+
+    if (error.value != null) {
+      // throw error so $onAction.onError listeners can add their own handler
+      throw error.value;
+    }
+    // return data so $onAction.after listeners can add their own handler
+    return reservation.value;
+  }
+
+  return {
+    reservation,
+    loading,
+    error,
+    makeReservation,
+  };
+});
+
+export default {
+  useReservationStore,
+};
diff --git a/services/tenant-ui/frontend/src/style.css b/services/tenant-ui/frontend/src/style.css
deleted file mode 100644
index fd513b2e8..000000000
--- a/services/tenant-ui/frontend/src/style.css
+++ /dev/null
@@ -1,29 +0,0 @@
-html,
-body,
-#app {
-  height: 100vh;
-  padding: 0;
-  margin: 0;
-}
-
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  font-weight: 400;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-.card {
-  padding: 2em;
-}