diff --git a/loama/src/App.vue b/loama/src/App.vue
index eed0da4..dc97ffa 100644
--- a/loama/src/App.vue
+++ b/loama/src/App.vue
@@ -22,7 +22,7 @@ h1 {
 }
 
 h2 {
-  color: var(--Solid-Purple);
+  color: var(--solid-purple);
   font-weight: 700;
 }
 
diff --git a/loama/src/components/LoSwitch.vue b/loama/src/components/LoSwitch.vue
new file mode 100644
index 0000000..a62feb7
--- /dev/null
+++ b/loama/src/components/LoSwitch.vue
@@ -0,0 +1,28 @@
+<template>
+    <fieldset>
+        <input type="checkbox" :id="id" v-model="checked"
+            @input="(event) => $emit('update:checked', event.target.checked)">
+        <label :for="id">
+            <slot></slot>
+        </label>
+    </fieldset>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+
+const props = defineProps<{ id: string; defaultValue: boolean }>();
+
+const checked = ref(props.defaultValue);
+
+watchEffect(() => checked.value = props.defaultValue);
+</script>
+
+<style scoped>
+fieldset {
+    border: none;
+    display: flex;
+    align-content: center;
+    gap: .7rem;
+}
+</style>
\ No newline at end of file
diff --git a/loama/src/components/explorer/ExplorerEntity.vue b/loama/src/components/explorer/ExplorerEntity.vue
new file mode 100644
index 0000000..9fbc19f
--- /dev/null
+++ b/loama/src/components/explorer/ExplorerEntity.vue
@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <component :is="isContainer ? PhFolder : PhFile" :size="40" />
+        <span>
+            <slot></slot>
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PhFolder, PhFile } from '@phosphor-icons/vue';
+
+defineProps<{
+    isContainer: boolean,
+}>()
+</script>
+
+<style scoped>
+div {
+    display: flex;
+    flex: 0 1 auto;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: var(--base-unit);
+    background-color: #0000;
+    border: none;
+    width: 100%;
+}
+
+
+span {
+    font-size: calc(var(--base-unit)*3);
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    flex-grow: 1;
+    text-align: start;
+}
+</style>
\ No newline at end of file
diff --git a/loama/src/components/explorer/ExplorerEntry.vue b/loama/src/components/explorer/ExplorerEntry.vue
index 31004f7..82590bd 100644
--- a/loama/src/components/explorer/ExplorerEntry.vue
+++ b/loama/src/components/explorer/ExplorerEntry.vue
@@ -1,11 +1,8 @@
 <template>
     <div>
-        <button class="file">
-            <component :is="icon" :size="40" />
-            <span>
-                <slot></slot>
-            </span>
-        </button>
+        <ExplorerEntity :is-container="isContainer" class="file">
+            <slot></slot>
+        </ExplorerEntity>
         <RouterLink :to="props.url">
             <LoButton v-if="isContainer" :right-icon="PhArrowRight" class="view">View files
             </LoButton>
@@ -15,16 +12,16 @@
 
 <script setup lang="ts">
 import { RouterLink } from 'vue-router';
+import { PhArrowRight } from '@phosphor-icons/vue';
+
 import LoButton from "../LoButton.vue";
-import { PhFolder, PhFile, PhArrowRight } from '@phosphor-icons/vue';
+import ExplorerEntity from './ExplorerEntity.vue';
 
 const props = defineProps<{
     url: string,
     isContainer: boolean,
     authProtected: boolean
 }>()
-
-const icon = props.isContainer ? PhFolder : PhFile;
 </script>
 
 <style lang="css" scoped>
@@ -43,15 +40,11 @@ a {
     text-decoration: none;
 }
 
+.view {
+    width: calc(var(--base-unit)*20)
+}
+
 .file {
-    display: flex;
-    flex: 0 1 auto;
-    flex-flow: row nowrap;
-    align-items: center;
-    gap: var(--base-unit);
-    background-color: #0000;
-    border: none;
-    width: 100%;
     color: var(--off-black);
     cursor: context-menu;
 }
@@ -59,17 +52,4 @@ a {
 .file:hover {
     color: var(--off-white);
 }
-
-.view {
-    width: calc(var(--base-unit)*20)
-}
-
-span {
-    font-size: calc(var(--base-unit)*3);
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-    flex-grow: 1;
-    text-align: start;
-}
 </style>
\ No newline at end of file
diff --git a/loama/src/components/explorer/ResourceExplorer.vue b/loama/src/components/explorer/ResourceExplorer.vue
index 12e35ec..7bf80ca 100644
--- a/loama/src/components/explorer/ResourceExplorer.vue
+++ b/loama/src/components/explorer/ResourceExplorer.vue
@@ -9,14 +9,15 @@
             </ExplorerEntry>
         </div>
         <div class="right-panel">
-            <div v-if="!selectedEntry">
-                <Vault class="side-image" />
-                <strong>No folder or file selected!</strong>
-                <i>Select one to get started</i>
-            </div>
-            <div v-else class="selectedEntry">
-                {{ selectedEntry }}
+            <div class="default-panel-container" v-if="!selectedEntry">
+                <div class="default-panel">
+                    <Vault class="side-image" />
+                    <p><strong>No folder or file selected!</strong></p>
+                    <i>Select one to get started</i>
+                </div>
             </div>
+            <SelectedEntry v-else :name="selectedEntry.name" :isContainer="selectedEntry.isContainer"
+                :agents="selectedEntry.accessModes" @close="selectedEntry = null" />
         </div>
     </div>
 </template>
@@ -32,13 +33,15 @@ import ExplorerEntry from "./ExplorerEntry.vue";
 import type { FormattedThing } from "loama-controller/dist/types";
 import { useRoute } from "vue-router";
 import ExplorerBreadcrumbs from "./ExplorerBreadcrumbs.vue";
+import SelectedEntry from "./SelectedEntry.vue";
+import type { Entry } from "@/utils/types";
 
 const data = ref(await getThingsAtLevel(store.usedPod));
 const route = useRoute();
 
-const selectedEntry = ref<FormattedThing | null>(null)
+const selectedEntry = ref<Entry | null>(null)
 
-const changeSelectedEntry = (thing: FormattedThing) => selectedEntry.value = thing;
+const changeSelectedEntry = (thing: Entry) => selectedEntry.value = thing;
 
 const fileUrl = (path: string | string[]) => `${store.usedPod}${path}`
 
@@ -49,6 +52,7 @@ const uriToName = (uri: string, isContainer: boolean) => {
 }
 
 watch(() => route.params.filePath, async (path) => {
+    selectedEntry.value = null;
     data.value = await getThingsAtLevel(fileUrl(path)), { immediate: true }
 })
 
@@ -124,17 +128,22 @@ i {
 }
 
 .right-panel {
-    padding-left: 0.5rem;
     flex: 2;
+}
+
+.default-panel-container {
+    padding-left: 0.5rem;
+    width: 100%;
+    height: 100%;
     background-color: var(--lama-gray);
-    position: relative;
     justify-content: center;
     align-items: center;
+    display: flex;
 }
 
-.selectedEntry {
-    background-color: var(--off-white);
-    height: 100%;
-    width: 100%;
+.default-panel {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
 }
 </style>
\ No newline at end of file
diff --git a/loama/src/components/explorer/SelectedEntry.vue b/loama/src/components/explorer/SelectedEntry.vue
new file mode 100644
index 0000000..df86405
--- /dev/null
+++ b/loama/src/components/explorer/SelectedEntry.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="container">
+        <header>
+            <ExplorerEntity :is-container="isContainer">
+                {{ name }}
+            </ExplorerEntity>
+            <PhXCircle :size="40" @click="$emit('close')" class="clickable" />
+        </header>
+        <article>
+            <label for="agents">
+                <h3>User</h3>
+            </label>
+            <select name="agents" id="agents" v-model="selectedAgent">
+                <option v-for="agent in Object.keys(agents)" :key="agent" :value="agent">{{ agent }}</option>
+            </select>
+            <form>
+                <LoSwitch v-for="option in permissionOptions" :key="option.name" :id="option.name"
+                    :default-value="isByDefaultSelected(option.name)"
+                    @update:checked="updatePermissions(option.name, $event)">
+                    {{ option.label }}
+                </LoSwitch>
+            </form>
+        </article>
+    </div>
+</template>
+
+<script setup lang="ts">
+import ExplorerEntity from './ExplorerEntity.vue';
+import { PhXCircle } from '@phosphor-icons/vue';
+import { ref } from 'vue';
+
+import LoSwitch from '../LoSwitch.vue';
+import { type url, Permission } from 'loama-controller/dist/types';
+import { editPermissions, getOrCreateIndex } from 'loama-controller';
+import { store } from '@/store';
+import type { Session } from '@inrupt/solid-client-authn-browser';
+
+const props = defineProps<{ name: string; isContainer: boolean; agents: Record<url, Permission[]> }>();
+
+const selectedAgent = ref(Object.keys(props.agents)[0]);
+
+const permissionOptions = ref([
+    { name: 'Read', label: "Able to read data" },
+    { name: 'Write', label: "Able to add new data" },
+    { name: 'Append', label: 'Able to modify existing data' },
+    { name: 'Control', label: 'Able to manage access & permissions' }
+])
+
+// @ts-ignore If you cast the permission to a Permissions the comparison no longer works.
+const isByDefaultSelected = (permission: string) => props.agents[selectedAgent.value].includes(permission)
+
+const updatePermissions = async (type: string, newValue: boolean) => {
+    const indexFile = await getOrCreateIndex(store.session as Session, store.usedPod);
+
+    let permissions = props.agents[selectedAgent.value];
+
+    if (newValue) {
+        permissions.push(type as Permission)
+    } else {
+        permissions = permissions.filter((p) => p !== type)
+    }
+
+    // TODO: Maybe map selectedAgent to the one from the index file
+    await editPermissions(store.session as Session, indexFile, selectedAgent.value, permissions);
+
+    // TODO: Make sure the changed index file is shown here
+    // props.agents[selectedAgent.value] = permissions;
+
+    // TODO: Some kind of notification?
+}
+</script>
+
+<style scoped>
+form {
+    margin-top: calc(var(--base-unit)*2)
+}
+
+article {
+    background-color: var(--off-white);
+    border-radius: var(--base-corner);
+    height: 100%;
+    padding: 2rem;
+}
+
+header {
+    display: flex;
+    color: var(--off-white);
+    flex-grow: 1;
+    padding: 2rem;
+}
+
+h3 {
+    font-size: calc(var(--base-unit)*2);
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.container {
+    background-color: var(--solid-purple);
+}
+</style>
\ No newline at end of file
diff --git a/loama/src/utils/types.ts b/loama/src/utils/types.ts
new file mode 100644
index 0000000..10af962
--- /dev/null
+++ b/loama/src/utils/types.ts
@@ -0,0 +1,3 @@
+import type { FormattedThing } from 'loama-controller/dist/types'
+
+export type Entry = FormattedThing & { name: string; isContainer: boolean }