diff --git a/loama/.env b/loama/.env
new file mode 100644
index 0000000..313603d
--- /dev/null
+++ b/loama/.env
@@ -0,0 +1 @@
+VITE_DEFAULT_IDP=https://css12.onto-deside.ilabt.imec.be/
\ No newline at end of file
diff --git a/loama/.env.example b/loama/.env.example
new file mode 100644
index 0000000..9464dc2
--- /dev/null
+++ b/loama/.env.example
@@ -0,0 +1 @@
+VITE_DEFAULT_IDP=https://example.podprovider.com/
\ No newline at end of file
diff --git a/loama/README.md b/loama/README.md
index 6d6253f..665bc72 100644
--- a/loama/README.md
+++ b/loama/README.md
@@ -2,6 +2,10 @@
 
 This is the actual Access Management App, written in Vue.
 
+## IDP Provider
+
+Authentication works by providing the URL to the pod provider. To ease the experience a default URL is used, this is specified in the `.env` and used in `components/LoginForm.vue`. An example can be found in `.env.example`.
+
 ## How to run
 
 Make sure to **first build the controller!**
diff --git a/loama/src/App.vue b/loama/src/App.vue
index c89720e..eed0da4 100644
--- a/loama/src/App.vue
+++ b/loama/src/App.vue
@@ -6,12 +6,45 @@
 </script>
 
 <style>
+h1,
+h2,
+h3 {
+  font-family: "JetBrains Mono", system-ui;
+  font-style: normal;
+  line-height: normal;
+}
+
+h1 {
+  font-size: calc(var(--base-unit)*8);
+  font-weight: 700;
+  color: var(--solid-purple);
+  text-transform: uppercase;
+}
+
+h2 {
+  color: var(--Solid-Purple);
+  font-weight: 700;
+}
+
+h3 {
+  font-size: calc(var(--base-unit)*4);
+  color: var(--off-black);
+}
+
+label,
+input,
+p {
+  font-size: calc(var(--base-unit)*2);
+  font-weight: 400;
+}
+
 /* Variables */
 :root {
   --solid-purple: #7C4DFF;
   --off-white: #F7F7F7;
   --off-black: #170D33;
   --lama-gray: #DADADA;
+  --lama-red: #DE4C59;
   --base-unit: 0.5rem;
   --base-corner: 0.5rem;
 }
@@ -20,15 +53,19 @@
 /*
   1. Use a more-intuitive box-sizing model.
 */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
+
 /*
   2. Remove default margin
 */
 * {
   margin: 0;
 }
+
 /*
   Typographic tweaks!
   3. Add accessible line-height
@@ -38,34 +75,52 @@ body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
 }
+
 /*
   5. Improve media defaults
 */
-img, picture, video, canvas, svg {
+img,
+picture,
+video,
+canvas,
+svg {
   display: block;
   max-width: 100%;
 }
+
 /*
   6. Remove built-in form typography styles
 */
-input, button, textarea, select {
+input,
+button,
+textarea,
+select {
   font: inherit;
 }
+
 /*
   7. Avoid text overflows
 */
-p, h1, h2, h3, h4, h5, h6 {
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   overflow-wrap: break-word;
 }
+
 /*
   8. Create a root stacking context
 */
-#root, #__next {
+#root,
+#__next {
   isolation: isolate;
 }
 
 /* Global styles */
-html{
+html {
   background-color: var(--off-white);
   font-family: "Raleway", sans-serif;
   font-optical-sizing: auto;
@@ -84,5 +139,4 @@ select {
 select:active {
   border-color: var(--solid-purple);
 }
-
 </style>
diff --git a/loama/src/components/InfoPopup.vue b/loama/src/components/InfoPopup.vue
new file mode 100644
index 0000000..bf5b4e4
--- /dev/null
+++ b/loama/src/components/InfoPopup.vue
@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <h3>Solid Pod URL</h3>
+        <p>A URL that links to the pod that you want to use.</p>
+        <aside>
+            <PhQuestion :size="24" />
+            <span>
+                In order to authenticate, you'll be redirected to the provider's website.
+            </span>
+        </aside>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PhQuestion } from '@phosphor-icons/vue';
+
+</script>
+
+<style scoped>
+div {
+    position: absolute;
+    left: calc(var(--base-unit) * 4);
+    border: 0.25rem solid var(--solid-purple);
+    background-color: var(--off-white);
+    padding: var(--base-unit);
+    border-radius: var(--base-corner);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 30rem;
+}
+
+h2 {
+    margin-bottom: calc(var(--base-unit) * 2);
+}
+
+p {
+    margin-bottom: calc(var(--base-unit));
+}
+
+aside {
+    display: flex;
+    padding: 8px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    border-radius: var(--base-corner);
+    background-color: var(--solid-purple);
+    color: var(--off-white);
+}
+</style>
\ No newline at end of file
diff --git a/loama/src/components/LoButton.vue b/loama/src/components/LoButton.vue
index d678051..46e3d17 100644
--- a/loama/src/components/LoButton.vue
+++ b/loama/src/components/LoButton.vue
@@ -1,8 +1,10 @@
 <template>
     <button :class="classList">
-        <component :v-if="leftIcon" :is="leftIcon" :size="24"/>
-        <span><slot></slot></span>
-        <component :v-if="rightIcon" :is="rightIcon" :size="24"/>
+        <component :v-if="leftIcon" :is="leftIcon" :size="24" />
+        <span>
+            <slot></slot>
+        </span>
+        <component :v-if="rightIcon" :is="rightIcon" :size="24" />
     </button>
 </template>
 
@@ -48,16 +50,25 @@ button {
     border-radius: var(--base-corner);
     height: fit-content;
     border: none;
+    cursor: pointer;
+    border: 0.25rem solid;
+}
+
+button:hover {
+    background-color: var(--off-black);
+    border-color: var(--off-black);
+    color: var(--off-white);
 }
 
 .primary {
     background-color: var(--solid-purple);
+    border-color: var(--solid-purple);
     color: var(--off-white);
 }
 
 .secondary {
     background-color: var(--solid-white);
     color: var(--off-black);
-    border: 0.25rem solid var(--solid-purple);
+    border-color: var(--solid-purple);
 }
 </style>
\ No newline at end of file
diff --git a/loama/src/components/LoginForm.vue b/loama/src/components/LoginForm.vue
new file mode 100644
index 0000000..e1e70d6
--- /dev/null
+++ b/loama/src/components/LoginForm.vue
@@ -0,0 +1,152 @@
+<template>
+  <header>
+    <h1>{{ title }}</h1>
+    <p class="tagline" v-if="subtitle">{{ subtitle }}</p>
+  </header>
+  <form @submit.prevent="login">
+    <fieldset>
+      <legend>
+        <span>Solid Pod URL</span>
+        <PhQuestion :size="24" @mouseover="showPopup = true;" @mouseleave="showPopup = false" />
+      </legend>
+      <label for="solid-pod-url">
+        <PhLink :size="24" class="icon" />
+        <input type="url" id="solid-pod-url" v-model="solidPodUrl" :placeholder="defaultSolidPodUrl" />
+      </label>
+      <p v-if="showWarning" class="warning">Invalid Solid Pod URL. Please check and try again.</p>
+    </fieldset>
+    <fieldset>
+      <LoButton @click.prevent="noPod" :disabled="isLoading" variant="secondary" :left-icon="PhQuestion">
+        No Pod?
+      </LoButton>
+      <LoButton type="submit" :disabled="isLoading" :right-icon="PhArrowRight">
+        <span v-if="isLoading">Loading...</span>
+        <span v-else>Login</span>
+      </LoButton>
+    </fieldset>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { store } from '@/store';
+import { PhArrowRight, PhLink, PhQuestion } from '@phosphor-icons/vue';
+import LoButton from './LoButton.vue';
+
+defineProps<{ title: string, subtitle?: string }>();
+
+const showPopup = defineModel<boolean>('showPopup');
+
+const emit = defineEmits<{
+  toggleProvider: []
+}>()
+
+const solidPodUrl = ref<string>('');
+const defaultSolidPodUrl = import.meta.env.VITE_DEFAULT_IDP;
+const showWarning = ref<boolean>(false);
+const isLoading = ref<boolean>(false);
+
+const login = () => {
+  isLoading.value = true;
+  const issuer = solidPodUrl.value.trim() || defaultSolidPodUrl;
+
+  store.session.login({
+    oidcIssuer: issuer,
+    redirectUrl: new URL('/home', window.location.href).toString(),
+    clientName: 'LOAMA',
+  })
+    .then(() => {
+      showWarning.value = false;
+      isLoading.value = false;
+    })
+    .catch(() => {
+      showWarning.value = true;
+      isLoading.value = false;
+    });
+};
+
+const noPod = () => {
+  emit('toggleProvider');
+};
+</script>
+
+<style scoped>
+.tagline {
+  color: var(--off-black);
+  font-size: calc(var(--base-unit)*4);
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+legend {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+span {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  font-weight: 700;
+  gap: var(--base-unit);
+}
+
+label {
+  display: flex;
+  position: relative;
+  flex-grow: 1;
+}
+
+.icon {
+  position: absolute;
+  left: var(--base-unit);
+  top: 50%;
+  margin-top: calc(-1 * var(--base-unit));
+}
+
+input[type="url"] {
+  padding: 1rem calc(var(--base-unit) + 24px);
+  width: 100%;
+  border-color: var(--off-black);
+  border-radius: var(--base-corner);
+}
+
+.warning {
+  color: var(--lama-red);
+}
+
+label,
+p,
+input {
+  color: var(--off-black, #170D33);
+}
+
+h1,
+h2 {
+  text-align: center;
+}
+
+form {
+  width: 100%;
+}
+
+form div {
+  margin-bottom: 4rem;
+}
+
+fieldset {
+  border: none;
+}
+
+fieldset:has(button) {
+  display: flex;
+  justify-content: space-between;
+}
+
+button {
+  width: 45%;
+  justify-content: center;
+}
+</style>
diff --git a/loama/src/components/SidePanel.vue b/loama/src/components/SidePanel.vue
new file mode 100644
index 0000000..4c5693f
--- /dev/null
+++ b/loama/src/components/SidePanel.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="extra-panel" v-if="isOpen">
+    <div>
+      <h2>No Pod yet?</h2>
+      <p>No worries, you can create a pod with a pod provider or even <u>host one</u> yourself! We'll give you some
+        recommendations of hosts you can use:</p>
+      <LoButton v-for="pod in podListData" :key="pod.name" @click="openPodUrl(pod)" :aria-label="'Open ' + pod.name">
+        {{ pod.name }}
+      </LoButton>
+    </div>
+    <LoButton :left-icon="PhX" variant="secondary" @click="emit('toggleProvider')">Close Panel</LoButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import podList from '@/utils/podlist.json';
+import LoButton from './LoButton.vue';
+import { PhX } from '@phosphor-icons/vue';
+
+defineProps<{
+  isOpen: Boolean
+}>()
+
+const emit = defineEmits<{
+  toggleProvider: []
+}>()
+
+const podListData = (podList as { podList: Array<{ name: string; url: string }> }).podList;
+
+const openPodUrl = (pod: { name: string; url: string }) => {
+  if (pod && pod.url) {
+    window.open(pod.url, '_blank');
+  }
+  emit("toggleProvider");
+};
+</script>
+
+
+<style scoped>
+.extra-panel {
+  width: 100%;
+  margin-top: 10px;
+  border-right: 0.25rem solid var(--solid-purple);
+}
+
+h2 {
+  font-size: 30px;
+  margin-bottom: 20px;
+}
+
+p {
+  margin-bottom: 30px;
+}
+
+div {
+  margin-bottom: 20px;
+}
+
+button {
+  margin-bottom: 10px;
+  padding: 10px;
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/loama/src/router/index.ts b/loama/src/router/index.ts
index d3a38ea..3b8c4da 100644
--- a/loama/src/router/index.ts
+++ b/loama/src/router/index.ts
@@ -1,8 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
-import LandingView from '@/views/LandingView.vue'
+import LoginView from '@/views/LoginView.vue'
 import { store } from '@/store'
-import { getPod, listPods } from 'loama-controller'
+import { listPods } from 'loama-controller'
 import type { Session } from '@inrupt/solid-client-authn-browser'
 
 const router = createRouter({
@@ -10,8 +10,8 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'landing',
-      component: LandingView
+      name: 'login',
+      component: LoginView
     },
     {
       path: '/home',
@@ -23,12 +23,12 @@ const router = createRouter({
 
 router.beforeEach(async (to) => {
   if (!store.session.info.isLoggedIn) {
-    await store.session.handleIncomingRedirect();
-    if(store.session.info.isLoggedIn){
+    await store.session.handleIncomingRedirect()
+    if (store.session.info.isLoggedIn) {
       store.setUsedPod((await listPods(store.session as Session))[0])
     }
-    if (!store.session.info.isLoggedIn && to.name !== 'landing') {
-      return { name: 'landing' }
+    if (!store.session.info.isLoggedIn && to.name !== 'login') {
+      return { name: 'login' }
     }
   }
 })
diff --git a/loama/src/utils/podlist.json b/loama/src/utils/podlist.json
new file mode 100644
index 0000000..730abf0
--- /dev/null
+++ b/loama/src/utils/podlist.json
@@ -0,0 +1,64 @@
+{
+  "podList": [
+    {
+      "name": "Data Pod",
+      "url": "https://igrant.io/datapod.html",
+      "owner": "iGrant.io.Sweden",
+      "location": "EU"
+    },
+    {
+      "name": "Inrupt Pod Spaces",
+      "url": "https://start.inrupt.com/profile",
+      "owner": "Inrupt Inc.",
+      "location": "EU"
+    },
+    {
+      "name": "redpencil.io",
+      "url": "https://solid.redpencil.io/",
+      "owner": "redpencil.io",
+      "location": "EU"
+    },
+    {
+      "name": "solidcommunity.net",
+      "url": "https://solidcommunity.net/register",
+      "owner": "Solid Project",
+      "location": "UK"
+    },
+    {
+      "name": "solidweb.me",
+      "url": "https://solidweb.me/.account/login/password/register/",
+      "owner": "Meisdata",
+      "location": "EU"
+    },
+    {
+      "name": "solidweb.org",
+      "url": "https://solidweb.org/register",
+      "owner": "Solid Grassoots",
+      "location": "EU"
+    },
+    {
+      "name": "teamid.live",
+      "url": "https://teamid.live/.account/login/password/register/",
+      "owner": "Meisdata",
+      "location": "EU"
+    },
+    {
+      "name": "trinpod.eu",
+      "url": "https://trinpod.eu/",
+      "owner": "Graphmetrix",
+      "location": "EU"
+    },
+    {
+      "name": "trinpod.us",
+      "url": "https://trinpod.us/",
+      "owner": "Graphmetrix",
+      "location": "USA"
+    },
+    {
+      "name": "use.id",
+      "url": "https://get.use.id/people",
+      "owner": "Digita",
+      "location": "EU"
+    }
+  ]
+}
diff --git a/loama/src/views/LandingView.vue b/loama/src/views/LandingView.vue
deleted file mode 100644
index d68f10c..0000000
--- a/loama/src/views/LandingView.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-    <div>
-        <p>This is a very cool landing page, wowsies!</p>
-        <button @click="login">Login</button>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { store } from "@/store";
-
-const idp = "https://css12.onto-deside.ilabt.imec.be/";
-
-const login = async () => {
-    try {
-        await store.session.login({
-            oidcIssuer: idp,
-            redirectUrl: new URL("/home", window.location.href).toString(),
-            clientName: "LOAMA",
-        });
-
-    } catch (error) {
-        throw new Error(`Login failed: ${error}`);
-    }
-}
-</script>
\ No newline at end of file
diff --git a/loama/src/views/LoginView.vue b/loama/src/views/LoginView.vue
new file mode 100644
index 0000000..1aab9e6
--- /dev/null
+++ b/loama/src/views/LoginView.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="signin-container">
+    <div class="left-panel">
+      <LoginForm @toggle-provider="toggleSidePanel" v-model:showPopup="showPopup" title="LOAMA"
+        subtitle="SOLID permissions made easy" />
+      <SidePanel :is-open="isPanelOpen" @toggle-provider="toggleSidePanel" ref="sidePanel" />
+    </div>
+    <div class="right-panel">
+      <InfoPopup v-show="showPopup" />
+      <img src="../assets/loama.svg" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import LoginForm from '@/components/LoginForm.vue';
+import SidePanel from '@/components/SidePanel.vue';
+import InfoPopup from '@/components/InfoPopup.vue';
+
+const isPanelOpen = ref(false);
+const showPopup = ref(false);
+
+const toggleSidePanel = () => {
+  isPanelOpen.value = !isPanelOpen.value;
+} 
+</script>
+
+
+<style scoped>
+img {
+  height: 65vh;
+}
+
+.signin-container {
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+}
+
+.left-panel,
+.right-panel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.left-panel {
+  flex-direction: column;
+  gap: 4rem;
+  flex: 2;
+  background-color: var(--lama-gray);
+  background: var(--Login-Fade, linear-gradient(180deg, #F7F7F7 95%, #BFA8FF 100%));
+  padding: 0 4rem;
+}
+
+.right-panel {
+  flex: 5;
+  background-color: var(--solid-purple);
+  position: relative;
+}
+
+.extra-panel {
+  background-color: #f0f0f0;
+  width: 30%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 999;
+  overflow-y: auto;
+  padding: 20px;
+  margin: 0;
+}
+</style>