diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index cea4a3a3..a1ecc46f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,18 +1,14 @@
 <template>
-  <div class="d-flex flex-column vh-100" v-if="isReady">
-    <div class="flex-shrink-1">
-      <Suspense>
-        <RouterView />
-      </Suspense>
-    </div>
-    <FooterComponent />
-  </div>
+  <Suspense v-if="isReady">
+    <RouterView />
+  </Suspense>
   <AlertsComponentVue />
+  <ModalComponent />
 </template>
 
 <script setup lang="ts">
 import AlertsComponentVue from './components/AlertsComponent.vue'
-import FooterComponent from './components/FooterComponent.vue'
+import ModalComponent from './components/ModalComponent.vue'
 import { onMounted, ref } from 'vue'
 import { useAppStore } from './stores/stores'
 
diff --git a/frontend/src/components/ContactPage.vue b/frontend/src/components/ContactPage.vue
new file mode 100644
index 00000000..6d0b34cf
--- /dev/null
+++ b/frontend/src/components/ContactPage.vue
@@ -0,0 +1,10 @@
+<template>
+  Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad
+  nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia.
+  Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla
+  est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat
+  reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident
+  adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit
+  commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea
+  consectetur et est culpa et culpa duis.
+</template>
diff --git a/frontend/src/components/DragToStartProjectComponent.vue b/frontend/src/components/DragToStartProjectComponent.vue
index 36cf1dd4..f4062bd1 100644
--- a/frontend/src/components/DragToStartProjectComponent.vue
+++ b/frontend/src/components/DragToStartProjectComponent.vue
@@ -8,16 +8,14 @@
 import DragToStartField from '@/components/DragToStartField.vue'
 import { type Project } from '@/constants'
 import type { User } from '@/constants'
-import { useAppStore, useProjectIdStore, useInitialFilesStore } from '@/stores/stores'
+import { useAppStore, useProjectStore, useInitialFilesStore } from '@/stores/stores'
+import { createNewProject } from '@/utils'
 
-const storeProjectId = useProjectIdStore()
+const storeProject = useProjectStore()
 const storeApp = useAppStore()
 const storeInitialFiles = useInitialFilesStore()
 
 async function createUserAndProject(): Promise<[User | null, Project | null]> {
-  const projectRequestData = {
-    name: 'First Project'
-  }
   var user: User | null = null
   var project: Project | null = null
 
@@ -30,16 +28,7 @@ async function createUserAndProject(): Promise<[User | null, Project | null]> {
     return [user, project]
   }
 
-  try {
-    const createProjectResponse = await storeApp.axiosInstance.post<Project>(
-      '/projects',
-      projectRequestData
-    )
-    project = createProjectResponse.data
-  } catch (error: any) {
-    console.log('Unable to create a new project.', error)
-    storeApp.alertsError('Unable to create a new project.')
-  }
+  project = await createNewProject('First Project')
 
   return [user, project]
 }
@@ -54,6 +43,7 @@ function setProjectId(project: Project | null) {
   if (project == null) {
     return
   }
-  storeProjectId.setProjectId(project.id)
+  storeProject.setProjects([project])
+  storeProject.setLastProjectId(project.id)
 }
 </script>
diff --git a/frontend/src/components/ModalComponent.vue b/frontend/src/components/ModalComponent.vue
index 74a5e0b7..4fe9d6f9 100644
--- a/frontend/src/components/ModalComponent.vue
+++ b/frontend/src/components/ModalComponent.vue
@@ -1,35 +1,40 @@
 <template>
-  <div class="modal fade show" tabindex="-1" ref="modal">
+  <div class="modal fade" tabindex="-1" ref="modal">
     <div class="modal-dialog modal-dialog-scrollable">
       <div class="modal-content">
         <div class="modal-header">
-          <h1 class="modal-title fs-5">{{ props.title }}</h1>
+          <h1 class="modal-title fs-5">{{ storeModal.title }}</h1>
           <button
             type="button"
             class="btn-close"
             data-bs-dismiss="modal"
             aria-label="Close"
+            @click.prevent="storeModal.dismissModal"
           ></button>
         </div>
         <div class="modal-body">
-          <slot />
+          <ul>
+            <li v-for="(element, key) in storeModal.content" :key="key">
+              {{ element }}
+            </li>
+          </ul>
         </div>
         <div class="modal-footer">
           <button
             type="button"
             class="btn btn-secondary"
             data-bs-dismiss="modal"
-            @click.prevent="emit('clickSecondaryButton')"
+            @click.prevent="clickButton(storeModal.clickSecondaryButton)"
           >
-            {{ props.secondaryButtonTitle }}
+            {{ storeModal.secondaryButtonTitle }}
           </button>
           <button
             type="button"
             class="btn btn-primary"
             data-bs-dismiss="modal"
-            @click.prevent="emit('clickPrimaryButton')"
+            @click.prevent="clickButton(storeModal.clickPrimaryButton)"
           >
-            {{ props.primaryButtonTitle }}
+            {{ storeModal.primaryButtonTitle }}
           </button>
         </div>
       </div>
@@ -38,25 +43,33 @@
 </template>
 
 <script setup lang="ts">
+import { useModalStore } from '@/stores/stores'
 import * as bootstrap from 'bootstrap'
-import { ref, type Ref } from 'vue'
+import { ref, watch, type Ref } from 'vue'
+
+const storeModal = useModalStore()
 
-const props = defineProps<{
-  title: string
-  primaryButtonTitle: string
-  secondaryButtonTitle: string
-}>()
-const emit = defineEmits<{
-  clickPrimaryButton: []
-  clickSecondaryButton: []
-}>()
 const modal: Ref<Element | null> = ref(null)
 defineExpose({ showModal })
 
+watch(
+  () => storeModal.isShown,
+  (newValue) => {
+    if (newValue) {
+      showModal()
+    }
+  }
+)
+
 function showModal() {
   if (modal.value != null) {
     const confirmModal = new bootstrap.Modal(modal.value)
     confirmModal.show()
   }
 }
+
+function clickButton(action: () => Promise<void>) {
+  storeModal.dismissModal()
+  action()
+}
 </script>
diff --git a/frontend/src/components/ProjectColumnComponent.vue b/frontend/src/components/ProjectColumnComponent.vue
new file mode 100644
index 00000000..73842554
--- /dev/null
+++ b/frontend/src/components/ProjectColumnComponent.vue
@@ -0,0 +1,144 @@
+<template>
+  <div
+    class="px-2 py-2 my-2 d-flex justify-content-between align-items-center project-column"
+    :class="{ active: isActive }"
+    @click.prevent="setupProject"
+    @dblclick.prevent="enableEditMode"
+    @mouseover="isHover = true"
+    @mouseleave="isHover = false"
+  >
+    <div class="d-flex align-items-center">
+      <div v-if="!isEditMode" class="text-light fs-4 pe-1 me-1">
+        <font-awesome-icon :icon="['fa', 'file']" />
+      </div>
+      <input
+        ref="inputElement"
+        v-else
+        type="text"
+        class="form-control"
+        @blur="exitEditModeWithoutChange"
+        @keyup.esc="exitEditModeWithoutChange"
+        @keyup.enter="exitEditModeWithChange"
+        v-model="editingProjectName"
+      />
+      <div v-if="!isEditMode" class="fw-semibold text-light text-truncate project-name">
+        {{ projectName }}
+      </div>
+    </div>
+    <div v-show="!isHover" class="expire text-white-50">
+      {{ leftDays }}
+    </div>
+    <button
+      v-show="isHover && !isEditMode"
+      type="button"
+      class="btn text-light py-9"
+      @click.stop="clickDeleteProjectButton"
+    >
+      <font-awesome-icon :icon="['fas', 'trash']" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Project } from '@/constants'
+import { useAppStore, useModalStore, useProjectStore } from '@/stores/stores'
+import moment from 'moment'
+import { computed, ref, watch, type Ref } from 'vue'
+
+const props = defineProps<{ project: Project }>()
+const emit = defineEmits<{ deleteProject: [Project] }>()
+
+const leftDays = computed(() =>
+  props.project.expire_on ? `Expire ${moment.utc(props.project.expire_on).fromNow()}` : ''
+)
+const storeProject = useProjectStore()
+const storeModal = useModalStore()
+const isActive = computed(() => storeProject.lastProjectId == props.project.id)
+const isEditMode = ref(false)
+const isHover = ref(false)
+const projectName = ref(props.project.name)
+const editingProjectName = ref(projectName.value)
+const inputElement: Ref<HTMLInputElement | null> = ref(null)
+const storeApp = useAppStore()
+
+watch(inputElement, (newElement) => {
+  newElement?.focus()
+})
+
+watch(projectName, (newValue) => {
+  editingProjectName.value = newValue
+})
+
+function setupProject() {
+  storeProject.setLastProjectId(props.project.id)
+}
+
+function enableEditMode() {
+  isEditMode.value = true
+}
+
+async function exitEditModeWithChange() {
+  isEditMode.value = false
+  await updateProjectName(props.project.id, editingProjectName.value)
+}
+
+async function exitEditModeWithoutChange() {
+  isEditMode.value = false
+  editingProjectName.value = projectName.value
+}
+
+async function updateProjectName(projectId: string, newName: string) {
+  const projectRequestData = {
+    name: newName
+  }
+  try {
+    await storeApp.axiosInstance.patch<Project>(`/projects/${projectId}`, projectRequestData)
+  } catch (error: any) {
+    console.log('Unable to update project name.', error, projectId)
+    storeApp.alertsError(`Unable to update project name, project id: ${projectId}`)
+    editingProjectName.value = projectName.value
+  }
+  projectName.value = newName
+}
+
+async function deleteProject() {
+  try {
+    await storeApp.axiosInstance.delete(`/projects/${props.project.id}`)
+  } catch (error: any) {
+    console.log('Unable to delete project.', error, props.project.id)
+    storeApp.alertsError(`Unable to delete project, project id: ${props.project.id}`)
+  }
+  emit('deleteProject', props.project)
+}
+
+async function clickDeleteProjectButton() {
+  storeModal.showModal(
+    'Are you sure you want to delete:',
+    'Delete',
+    'Close',
+    deleteProject,
+    async () => {},
+    [projectName.value]
+  )
+}
+</script>
+
+<style scoped>
+.expire {
+  font-size: 0.8em;
+}
+
+.active {
+  background-color: orange;
+}
+
+.project-column {
+  cursor: pointer;
+  height: 3em;
+}
+
+.project-name {
+  cursor: text;
+  max-width: 8em;
+}
+</style>
diff --git a/frontend/src/components/SideBarComponent.vue b/frontend/src/components/SideBarComponent.vue
new file mode 100644
index 00000000..5921b056
--- /dev/null
+++ b/frontend/src/components/SideBarComponent.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="d-flex flex-column" style="height: 100%">
+    <div class="d-flex justify-content-between mt-2 border-bottom border-2 border-white">
+      <div class="fw-bold fs-4 text-light">Collection:</div>
+      <button
+        type="button"
+        class="btn fw-bold fs-5 text-light p-1"
+        @click.prevent="createAndUpdateProject"
+      >
+        <font-awesome-icon :icon="['fas', 'plus']" />
+      </button>
+    </div>
+    <div class="flex-grow-1 py-2 overflow-x-auto">
+      <ProjectColumnComponent
+        v-for="project in storeProject.projects"
+        :key="project.id"
+        :project="project"
+        @delete-project="removeProjectFromList"
+      />
+    </div>
+    <div class="border-top border-2 border-white py-2">
+      <p class="text-light"><router-link to="/faq" class="link-light">FAQ</router-link></p>
+      <p class="text-light"><router-link to="/contact" class="link-light">Contact</router-link></p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProjectColumnComponent from './ProjectColumnComponent.vue'
+import type { Project } from '@/constants'
+import { useProjectStore } from '@/stores/stores'
+import { createNewProject, updateProjects } from '@/utils'
+const storeProject = useProjectStore()
+
+await updateProjects()
+
+async function createAndUpdateProject() {
+  await createNewProject('New Project')
+  await updateProjects()
+}
+
+function removeProjectFromList(project: Project) {
+  storeProject.setProjects(storeProject.projects.filter((element) => element.id != project.id))
+  if (storeProject.projects.length != 0) {
+    storeProject.setLastProjectId(storeProject.projects[0].id)
+  } else {
+    storeProject.clearLastProjectId()
+  }
+}
+</script>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 51d33ebf..3afd3ff7 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -15,11 +15,12 @@ import {
   faFilePen,
   faAngleDown,
   faCheck,
-  faSort
+  faSort,
+  faFile
 } from '@fortawesome/free-solid-svg-icons'
 
 /* add icons to the library */
-library.add(faPlus, faMinus, faXmark, faTrash, faFilePen, faAngleDown, faCheck, faSort)
+library.add(faPlus, faMinus, faXmark, faTrash, faFilePen, faAngleDown, faCheck, faSort, faFile)
 
 import App from './App.vue'
 import router from './router'
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index f3327893..01a6f55b 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,14 +1,17 @@
 import PrivacyAndCookieStatement from '@/views/PrivacyAndCookieStatement.vue'
 import StartView from '@/views/StartView.vue'
 import TermsOfService from '@/views/TermsOfService.vue'
+import CollectionsView from '@/views/CollectionsView.vue'
 import { createRouter, createWebHistory } from 'vue-router'
+import FrequentlyAskedQuestions from '@/components/FrequentlyAskedQuestions.vue'
+import ContactPage from '@/components/ContactPage.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      name: 'start',
-      component: StartView
+      path: '/collections',
+      name: 'collections',
+      component: CollectionsView
     },
     {
       path: '/privacy-and-cookie-statement',
@@ -19,6 +22,21 @@ const router = createRouter({
       path: '/terms-of-service',
       name: 'TermsOfService',
       component: TermsOfService
+    },
+    {
+      path: '/faq',
+      name: 'faq',
+      component: FrequentlyAskedQuestions
+    },
+    {
+      path: '/contact',
+      name: 'contact',
+      component: ContactPage
+    },
+    {
+      path: '/',
+      name: 'start',
+      component: StartView
     }
   ]
 })
diff --git a/frontend/src/stores/stores.ts b/frontend/src/stores/stores.ts
index ec5808d9..1a0f1d52 100644
--- a/frontend/src/stores/stores.ts
+++ b/frontend/src/stores/stores.ts
@@ -1,23 +1,35 @@
 import { ref, type Ref } from 'vue'
 import { defineStore } from 'pinia'
-import { Constants, EmptyConstants, type AlertMessage, type Environ, AlertType } from '@/constants'
+import {
+  Constants,
+  EmptyConstants,
+  type AlertMessage,
+  type Environ,
+  AlertType,
+  type Project
+} from '@/constants'
 import { v4 as uuid } from 'uuid'
 import axios from 'axios'
 
-export const useProjectIdStore = defineStore(
+export const useProjectStore = defineStore(
   'projectId',
   () => {
-    const projectId: Ref<string | null> = ref(null)
+    const lastProjectId: Ref<string | null> = ref(null)
+    const projects: Ref<Project[]> = ref([])
 
-    function setProjectId(newId: string) {
-      projectId.value = newId
+    function setProjects(newIds: Project[]) {
+      projects.value = newIds
     }
 
-    function clearProjectId() {
-      projectId.value = null
+    function setLastProjectId(newId: string) {
+      lastProjectId.value = newId
     }
 
-    return { projectId, setProjectId, clearProjectId }
+    function clearLastProjectId() {
+      lastProjectId.value = null
+    }
+
+    return { projects, lastProjectId, setLastProjectId, clearLastProjectId, setProjects }
   },
   {
     persist: true
@@ -84,3 +96,45 @@ export const useInitialFilesStore = defineStore('initialFiles', () => {
   }
   return { initialFiles, setInitialFiles }
 })
+
+export const useModalStore = defineStore('modal', () => {
+  const isShown = ref(false)
+  const title = ref('')
+  const primaryButtonTitle = ref('')
+  const secondaryButtonTitle = ref('')
+  const clickPrimaryButton = ref(async () => {})
+  const clickSecondaryButton = ref(async () => {})
+  const content: Ref<string[]> = ref([])
+
+  function showModal(
+    newTitle: string,
+    newPrimaryButtonTitle: string,
+    newSecondaryButtonTitle: string,
+    newClickPrimaryButton: () => Promise<void>,
+    newClickSecondaryButton: () => Promise<void>,
+    newContent: string[]
+  ) {
+    title.value = newTitle
+    primaryButtonTitle.value = newPrimaryButtonTitle
+    secondaryButtonTitle.value = newSecondaryButtonTitle
+    clickPrimaryButton.value = newClickPrimaryButton
+    clickSecondaryButton.value = newClickSecondaryButton
+    content.value = newContent
+    isShown.value = true
+  }
+
+  function dismissModal() {
+    isShown.value = false
+  }
+  return {
+    title,
+    primaryButtonTitle,
+    secondaryButtonTitle,
+    clickPrimaryButton,
+    clickSecondaryButton,
+    content,
+    isShown,
+    showModal,
+    dismissModal
+  }
+})
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index 9a42b041..d2a14c34 100644
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -1,4 +1,4 @@
-import { useAppStore } from './stores/stores'
+import { useAppStore, useProjectStore } from './stores/stores'
 import type { Project } from '@/constants'
 
 /** Checks if a given project ID is valid */
@@ -29,3 +29,33 @@ export async function validateUser() {
   }
   return result
 }
+
+export async function createNewProject(name: string): Promise<Project | null> {
+  const storeApp = useAppStore()
+  const projectRequestData = {
+    name: name
+  }
+  try {
+    const createProjectResponse = await storeApp.axiosInstance.post<Project>(
+      '/projects',
+      projectRequestData
+    )
+    return createProjectResponse.data
+  } catch (error: unknown) {
+    console.log('Unable to create a new project.', error)
+    storeApp.alertsError('Unable to create a new project.')
+    return null
+  }
+}
+
+export async function updateProjects() {
+  const storeProject = useProjectStore()
+  const storeApp = useAppStore()
+  try {
+    const response = await storeApp.axiosInstance.get<Project[]>('/projects')
+    storeProject.setProjects(response.data)
+  } catch (error: unknown) {
+    console.log('Unable to retrieve projects info', error)
+    storeApp.alertsError('Unable to retrieve projects info')
+  }
+}
diff --git a/frontend/src/views/CollectionsView.vue b/frontend/src/views/CollectionsView.vue
new file mode 100644
index 00000000..5214cadc
--- /dev/null
+++ b/frontend/src/views/CollectionsView.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="container-fluid vh-100">
+    <div class="row">
+      <div class="col col-2 sticky-top sidebar">
+        <SideBarComponent />
+      </div>
+      <div class="col content d-flex flex-column justify-content-between">
+        <div>
+          <ProjectView v-if="hasValidProjectId" />
+        </div>
+        <FooterComponent />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SideBarComponent from '@/components/SideBarComponent.vue'
+import FooterComponent from '@/components/FooterComponent.vue'
+import ProjectView from './ProjectView.vue'
+import { useProjectStore } from '@/stores/stores'
+import { computed } from 'vue'
+const storeProject = useProjectStore()
+const hasValidProjectId = computed(() => storeProject.lastProjectId != null)
+</script>
+
+<style scoped>
+.collection-container {
+  height: 100vh;
+}
+
+.sidebar {
+  background-color: var(--main-color);
+  height: 100vh;
+}
+
+.content {
+  min-height: 100vh;
+}
+</style>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 5b8277c8..4e9e71e8 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,21 +1,27 @@
 <template>
-  <div class="mt-5">
-    <SloganComponent />
-  </div>
-  <div class="mt-5">
-    <Suspense>
-      <div class="container">
-        <DragToStartProjectComponent />
-        <StatementsComponent />
+  <div class="d-flex flex-column vh-100">
+    <div class="flex-shrink-1">
+      <div class="mt-5">
+        <SloganComponent />
       </div>
-    </Suspense>
-  </div>
-  <div class="mt-5">
-    <FrequentlyAskedQuestions />
+      <div class="mt-5">
+        <Suspense>
+          <div class="container">
+            <DragToStartProjectComponent />
+            <StatementsComponent />
+          </div>
+        </Suspense>
+      </div>
+      <div class="mt-5">
+        <FrequentlyAskedQuestions />
+      </div>
+    </div>
+    <FooterComponent />
   </div>
 </template>
 
 <script setup lang="ts">
+import FooterComponent from '@/components/FooterComponent.vue'
 import SloganComponent from '@/components/SloganComponent.vue'
 import FrequentlyAskedQuestions from '@/components/FrequentlyAskedQuestions.vue'
 import DragToStartProjectComponent from '@/components/DragToStartProjectComponent.vue'
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 810d1840..f3668dc0 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -84,27 +84,12 @@
         </div>
       </UploadFilesComponent>
     </div>
-    <ModalComponent
-      title="Are you sure you want to delete:"
-      primary-button-title="Delete"
-      secondary-button-title="Close"
-      @click-primary-button="deleteFiles"
-      @click-secondary-button="toBeDeletedFiles.clear()"
-      ref="deletionModal"
-    >
-      <ul>
-        <li v-for="[key, file] in toBeDeletedFiles" :key="key">
-          {{ file.filename }}
-        </li>
-      </ul>
-    </ModalComponent>
   </div>
 </template>
 <script setup lang="ts">
 import UploadFilesComponent from '@/components/UploadFilesComponent.vue'
 import FileTableRowComponent from '@/components/FileTableRowComponent.vue'
 import FileTableHeaderComponent from '@/components/FileTableHeaderComponent.vue'
-import ModalComponent from '@/components/ModalComponent.vue'
 import {
   FileStatus,
   type File,
@@ -112,22 +97,25 @@ import {
   humanifyFileSize,
   type CompareFunctionType
 } from '@/constants'
-import { useAppStore, useProjectIdStore, useInitialFilesStore } from '@/stores/stores'
+import { useAppStore, useProjectStore, useInitialFilesStore, useModalStore } from '@/stores/stores'
 import axios from 'axios'
-import { ref, type Ref, computed } from 'vue'
+import { ref, type Ref, computed, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { updateProjects } from '@/utils'
 
 const isActive = ref(false)
 const isEditMode = ref(false)
 const isShowed = ref(true)
 const storeApp = useAppStore()
-const storeProjectId = useProjectIdStore()
+const storeProject = useProjectStore()
+const storeModal = useModalStore()
+const { lastProjectId } = storeToRefs(storeProject)
 const storeInitialFileStore = useInitialFilesStore()
 const files: Ref<Map<string, ClientVisibleFile>> = ref(new Map())
 const selectedFiles: Ref<Map<string, boolean>> = ref(new Map())
 const totalSize = computed(() =>
   Array.from(files.value.values()).reduce((pre, element) => pre + element.file.filesize, 0)
 )
-const deletionModal: Ref<InstanceType<typeof ModalComponent> | null> = ref(null)
 const toBeDeletedFiles: Ref<Map<string, File>> = ref(new Map())
 const compareFunction: Ref<CompareFunctionType> = ref((a, b) =>
   a[1].file.uploaded_on > b[1].file.uploaded_on ? 1 : -1
@@ -136,8 +124,14 @@ const sortedFiles: Ref<Map<string, ClientVisibleFile>> = computed(() =>
   sortFiles(files.value, compareFunction.value)
 )
 
+watch(lastProjectId, async () => {
+  files.value.clear()
+  const apiFiles = await getAllFiles(storeProject.lastProjectId)
+  apiFiles.forEach((item) => files.value.set(item.id, { file: item, uploadedSize: item.filesize }))
+})
+
 if (storeInitialFileStore.initialFiles.length == 0) {
-  const apiFiles = await getAllFiles(storeProjectId.projectId)
+  const apiFiles = await getAllFiles(storeProject.lastProjectId)
   apiFiles.forEach((item) => files.value.set(item.id, { file: item, uploadedSize: item.filesize }))
 } else {
   await uploadFiles(storeInitialFileStore.initialFiles)
@@ -170,14 +164,14 @@ async function getAllFiles(projectId: string | null) {
 }
 
 async function uploadFiles(uploadFiles: FileList) {
-  if (storeProjectId.projectId == null) {
+  if (storeProject.lastProjectId == null) {
     return
   }
   const uploadFileRequestsList = []
   for (const uploadFile of uploadFiles) {
     const newFile: File = {
       id: storeApp.constants.genFakeId,
-      project_id: storeProjectId.projectId,
+      project_id: storeProject.lastProjectId,
       filename: uploadFile.name,
       filesize: uploadFile.size,
       title: uploadFile.name,
@@ -189,7 +183,7 @@ async function uploadFiles(uploadFiles: FileList) {
     files.value.set(newFile.id, { file: newFile, uploadedSize: 0 })
 
     const requestData = new FormData()
-    requestData.append('project_id', storeProjectId.projectId)
+    requestData.append('project_id', storeProject.lastProjectId)
     requestData.append('uploaded_file', uploadFile)
 
     const config = {
@@ -197,13 +191,12 @@ async function uploadFiles(uploadFiles: FileList) {
         if (files.value.has(newFile.id)) {
           files.value.get(newFile.id)!.uploadedSize = progressEvent.loaded
         }
-        console.log(progressEvent.loaded)
       }
     }
 
     uploadFileRequestsList.push(
       storeApp.axiosInstance
-        .post<File>(`/projects/${storeProjectId.projectId}/files`, requestData, config)
+        .post<File>(`/projects/${storeProject.lastProjectId}/files`, requestData, config)
         .then((response) => {
           if (files.value.has(newFile.id)) {
             files.value.get(newFile.id)!.file = response.data
@@ -221,7 +214,10 @@ async function uploadFiles(uploadFiles: FileList) {
         })
     )
 
-    axios.all(uploadFileRequestsList)
+    // After files are uploaded, check the project expiration date.
+    axios.all(uploadFileRequestsList).finally(() => {
+      updateProjects()
+    })
   }
 }
 
@@ -245,7 +241,9 @@ async function deleteFiles() {
 
   for (const [key, file] of toBeDeletedFiles.value) {
     try {
-      await storeApp.axiosInstance.delete(`/projects/${storeProjectId.projectId}/files/${file.id}`)
+      await storeApp.axiosInstance.delete(
+        `/projects/${storeProject.lastProjectId}/files/${file.id}`
+      )
       if (selectedFiles.value.has(key)) {
         selectedFiles.value.delete(key)
       }
@@ -253,7 +251,7 @@ async function deleteFiles() {
 
       deletedFiles.push(file)
     } catch (error: any) {
-      console.log('Unable to delete the file', storeProjectId.projectId, error)
+      console.log('Unable to delete the file', storeProject.lastProjectId, error)
       storeApp.alertsWarning(`Unable to delete the file: ${file.filename}`)
     }
   }
@@ -268,7 +266,16 @@ async function deleteFiles() {
 async function deleteSingleFile(key: string, file: File) {
   toBeDeletedFiles.value.clear()
   toBeDeletedFiles.value.set(key, file)
-  deletionModal.value?.showModal()
+  storeModal.showModal(
+    'Are you sure you want to delete:',
+    'Delete',
+    'Close',
+    deleteFiles,
+    async () => {
+      toBeDeletedFiles.value.clear()
+    },
+    [file.title]
+  )
 }
 
 async function deleteSelectedFiles() {
@@ -279,7 +286,20 @@ async function deleteSelectedFiles() {
       toBeDeletedFiles.value.set(key, clientVisibleFile.file)
     }
   })
-  deletionModal.value?.showModal()
+  let toBeDeletedFilesName = []
+  for (let file of toBeDeletedFiles.value.values()) {
+    toBeDeletedFilesName.push(file.title)
+  }
+  storeModal.showModal(
+    'Are you sure you want to delete:',
+    'Delete',
+    'Close',
+    deleteFiles,
+    async () => {
+      toBeDeletedFiles.value.clear()
+    },
+    toBeDeletedFilesName
+  )
 }
 
 async function toggleSelectFile(key: string) {
diff --git a/frontend/src/views/StartView.vue b/frontend/src/views/StartView.vue
index cbf3331a..a8ba774c 100644
--- a/frontend/src/views/StartView.vue
+++ b/frontend/src/views/StartView.vue
@@ -1,44 +1,56 @@
 <template>
-  <ProjectView v-if="isVaildProjectID" />
-  <HomeView v-else />
+  <div class="d-flex flex-column vh-100">
+    <div class="flex-shrink-1">
+      <Suspense>
+        <CollectionsView v-if="isValidProjectId" />
+        <HomeView v-else />
+      </Suspense>
+    </div>
+    <FooterComponent />
+  </div>
 </template>
 
 <script setup lang="ts">
-import ProjectView from '@/views/ProjectView.vue'
+import CollectionsView from './CollectionsView.vue'
 import HomeView from '@/views/HomeView.vue'
 import { type Project } from '@/constants'
 import { ref, watch } from 'vue'
-import { useAppStore, useProjectIdStore } from '@/stores/stores'
+import { useAppStore, useProjectStore } from '@/stores/stores'
 import { validProjectID } from '@/utils'
 import { validateUser } from '@/utils'
 import { storeToRefs } from 'pinia'
+import router from '@/router'
 
-const storeProjectId = useProjectIdStore()
-const { projectId } = storeToRefs(storeProjectId)
+const storeProject = useProjectStore()
+const { lastProjectId } = storeToRefs(storeProject)
 const storeApp = useAppStore()
-const isVaildProjectID = ref(await validProjectID(storeProjectId.projectId))
+const isValidProjectId = ref(await validProjectID(storeProject.lastProjectId))
 
-watch(projectId, async (newId) => {
-  isVaildProjectID.value = await validProjectID(newId)
+watch(lastProjectId, async (newId) => {
+  isValidProjectId.value = await validProjectID(newId)
 })
 
 async function setupProjectId() {
   try {
     const lastProject = (await storeApp.axiosInstance.get<Project[]>('/projects')).data.pop()
     if (lastProject && (await validProjectID(lastProject?.id))) {
-      storeProjectId.setProjectId(lastProject.id)
+      storeProject.setLastProjectId(lastProject.id)
     }
   } catch (error: any) {
     console.log('Unable to retrieve the last project id', error)
     storeApp.alertsWarning('Unable to the retrieve last project id.')
-    storeProjectId.clearProjectId()
+    storeProject.clearLastProjectId()
   }
 }
 
 if (
-  (storeProjectId.projectId != undefined && !(await validProjectID(storeProjectId.projectId))) ||
+  (storeProject.lastProjectId != undefined &&
+    !(await validProjectID(storeProject.lastProjectId))) ||
   (await validateUser())
 ) {
   setupProjectId()
+  if (await validateUser()) {
+    router.push('/collections')
+  }
 }
 </script>