diff --git a/cmd/main.go b/cmd/main.go
index 085dece6..d28964bd 100644
--- a/cmd/main.go
+++ b/cmd/main.go
@@ -143,7 +143,7 @@ func main() {
 		messageIncomingQWorkers     = ko.MustDuration("message.incoming_queue_workers")
 		messageOutgoingScanInterval = ko.MustDuration("message.message_outoing_scan_interval")
 		slaEvaluationInterval       = ko.MustDuration("sla.evaluation_interval")
-		lo                          = initLogger("libredesk")
+		lo                          = initLogger(appName)
 		wsHub                       = ws.NewHub()
 		rdb                         = initRedis()
 		constants                   = initConstants()
@@ -221,13 +221,15 @@ func main() {
 	}
 
 	go func() {
+		colorlog.Green("Server started at %s", ko.String("app.server.address"))
+		if ko.String("server.socket") != "" {
+			colorlog.Green("Unix socket created at %s", ko.String("server.socket"))
+		}
 		if err := g.ListenAndServe(ko.String("app.server.address"), ko.String("server.socket"), s); err != nil {
 			log.Fatalf("error starting server: %v", err)
 		}
 	}()
 
-	colorlog.Green("🚀 listening on %s %s", ko.String("app.server.address"), ko.String("app.server.socket"))
-
 	// Wait for shutdown signal.
 	<-ctx.Done()
 	colorlog.Red("Shutting down HTTP server...")
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f63f141d..c0036d7a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,20 +1,22 @@
 <template>
-  <Sidebar
-    :isLoading="false"
-    :open="sidebarOpen"
-    :userTeams="userStore.teams"
-    :userViews="userViews"
-    @update:open="sidebarOpen = $event"
-    @create-view="openCreateViewForm = true"
-    @edit-view="editView"
-    @delete-view="deleteView"
-  >
-    <div class="w-full h-screen border-l">
-      <PageHeader />
-      <RouterView />
-    </div>
-    <ViewForm v-model:openDialog="openCreateViewForm" v-model:view="view" />
-  </Sidebar>
+  <div class="flex">
+    <!-- Main sidebar -->
+    <Sidebar
+      class="w-full"
+      :userTeams="userStore.teams"
+      :userViews="userViews"
+      @create-view="openCreateViewForm = true"
+      @edit-view="editView"
+      @delete-view="deleteView"
+    >
+      <div class="h-screen border-l">
+        <PageHeader />
+        <RouterView />
+      </div>
+      <ViewForm v-model:openDialog="openCreateViewForm" v-model:view="view" />
+    </Sidebar>
+  </div>
+  <!-- Command box -->
   <Command />
 </template>
 
@@ -34,15 +36,14 @@ import { useTeamStore } from '@/stores/team'
 import { useSlaStore } from '@/stores/sla'
 import { useMacroStore } from '@/stores/macro'
 import { useTagStore } from '@/stores/tag'
-import PageHeader from './components/common/PageHeader.vue'
-import ViewForm from '@/components/ViewForm.vue'
+import PageHeader from './components/layout/PageHeader.vue'
+import ViewForm from '@/features/view/ViewForm.vue'
 import api from '@/api'
 import Sidebar from '@/components/sidebar/Sidebar.vue'
-import Command from '@/components/command/CommandBox.vue'
+import Command from '@/features/command/CommandBox.vue'
 
 const { toast } = useToast()
 const emitter = useEmitter()
-const sidebarOpen = ref(true)
 const userStore = useUserStore()
 const conversationStore = useConversationStore()
 const usersStore = useUsersStore()
diff --git a/frontend/src/components/admin/AdminPage.vue b/frontend/src/components/admin/AdminPage.vue
deleted file mode 100644
index 5894a4b1..00000000
--- a/frontend/src/components/admin/AdminPage.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <slot></slot>
-  </div>
-</template>
diff --git a/frontend/src/components/admin/uploads/LocalFsForm.vue b/frontend/src/components/admin/uploads/LocalFsForm.vue
deleted file mode 100644
index 10285403..00000000
--- a/frontend/src/components/admin/uploads/LocalFsForm.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <form @submit="onLocalFsSubmit" class="space-y-6">
-    <FormField v-slot="{ componentField }" name="provider">
-      <FormItem>
-        <FormLabel>Provider</FormLabel>
-        <FormControl>
-          <Select
-            v-bind="componentField"
-            v-model="componentField.modelValue"
-            @update:modelValue="handleProviderUpdate"
-          >
-            <SelectTrigger>
-              <SelectValue placeholder="Select a provider" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectItem value="s3"> S3 </SelectItem>
-                <SelectItem value="localfs"> Local filesystem </SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </FormControl>
-        <FormMessage />
-      </FormItem>
-    </FormField>
-
-    <FormField v-slot="{ componentField }" name="upload_path">
-      <FormItem v-auto-animate>
-        <FormLabel>Upload path</FormLabel>
-        <FormControl>
-          <Input type="text" placeholder="/home/ubuntu/uploads" v-bind="componentField" />
-        </FormControl>
-        <FormDescription> Path to the directory where files will be uploaded. </FormDescription>
-        <FormMessage />
-      </FormItem>
-    </FormField>
-    <Button type="submit"> {{ submitLabel }} </Button>
-  </form>
-</template>
-
-<script setup>
-import { watch } from 'vue'
-import { Button } from '@/components/ui/button'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import { localFsFormSchema } from './formSchema.js'
-import { vAutoAnimate } from '@formkit/auto-animate/vue'
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  FormDescription
-} from '@/components/ui/form'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
-import { Input } from '@/components/ui/input'
-
-const props = defineProps({
-  initialValues: {
-    type: Object,
-    required: false
-  },
-  submitForm: {
-    type: Function,
-    required: true
-  },
-  submitLabel: {
-    type: String,
-    required: false,
-    default: () => 'Submit'
-  }
-})
-
-const emit = defineEmits(['provider-update'])
-
-const localFsForm = useForm({
-  validationSchema: toTypedSchema(localFsFormSchema)
-})
-
-const onLocalFsSubmit = localFsForm.handleSubmit((values) => {
-  props.submitForm(values)
-})
-
-const handleProviderUpdate = (value) => {
-  emit('provider-update', value)
-}
-
-// Watch for changes in initialValues and update the form.
-watch(
-  () => props.initialValues,
-  (newValues) => {
-    localFsForm.setValues(newValues)
-  },
-  { deep: true, immediate: true }
-)
-</script>
diff --git a/frontend/src/components/admin/uploads/S3Form.vue b/frontend/src/components/admin/uploads/S3Form.vue
deleted file mode 100644
index 15451b82..00000000
--- a/frontend/src/components/admin/uploads/S3Form.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-<template>
-  <form @submit="onS3FormSubmit" class="space-y-6">
-    <FormField v-slot="{ componentField }" name="provider">
-      <FormItem>
-        <FormLabel>Provider</FormLabel>
-        <FormControl>
-          <Select
-            v-bind="componentField"
-            v-model="componentField.modelValue"
-            @update:modelValue="handleProviderUpdate"
-          >
-            <SelectTrigger>
-              <SelectValue placeholder="Select a provider" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectItem value="s3"> S3 </SelectItem>
-                <SelectItem value="localfs"> Local filesystem </SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </FormControl>
-        <FormMessage />
-      </FormItem>
-    </FormField>
-
-    <FormField v-slot="{ componentField }" name="region">
-      <FormItem v-auto-animate>
-        <FormLabel>Region</FormLabel>
-        <FormControl>
-          <Input type="text" placeholder="ap-south-1" v-bind="componentField" />
-        </FormControl>
-        <FormMessage />
-      </FormItem>
-    </FormField>
-
-    <FormField v-slot="{ componentField }" name="access_key">
-      <FormItem v-auto-animate>
-        <FormLabel>AWS access key</FormLabel>
-        <FormControl>
-          <Input type="text" placeholder="AWS access key" v-bind="componentField" />
-        </FormControl>
-        <FormMessage />
-      </FormItem>
-    </FormField>
-
-    <FormField v-slot="{ componentField }" name="access_secret">
-      <FormItem v-auto-animate>
-        <FormLabel>AWS access secret</FormLabel>
-        <FormControl>
-          <Input type="password" placeholder="AWS access secret" v-bind="componentField" />
-        </FormControl>
-        <FormMessage />
-      </FormItem>
-    </FormField>
-
-    <FormField v-slot="{ componentField }" name="bucket_type">
-      <FormItem>
-        <FormLabel>Bucket type</FormLabel>
-        <FormControl>
-          <Select v-bind="componentField" v-model="componentField.modelValue">
-            <SelectTrigger>
-              <SelectValue placeholder="Select bucket type" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectItem value="public"> Public </SelectItem>
-                <SelectItem value="private"> Private </SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </FormControl>
-        <FormMessage />
-      </FormItem>
-    </FormField>
-
-    <FormField v-slot="{ componentField }" name="bucket">
-      <FormItem v-auto-animate>
-        <FormLabel>Bucket</FormLabel>
-        <FormControl>
-          <Input type="text" placeholder="Bucket" v-bind="componentField" />
-        </FormControl>
-        <FormMessage />
-      </FormItem>
-    </FormField>
-
-    <FormField v-slot="{ componentField }" name="bucket_path">
-      <FormItem v-auto-animate>
-        <FormLabel>Bucket path</FormLabel>
-        <FormControl>
-          <Input type="text" placeholder="Bucket path" v-bind="componentField" />
-        </FormControl>
-        <FormMessage />
-      </FormItem>
-    </FormField>
-
-    <FormField v-slot="{ componentField }" name="upload_expiry">
-      <FormItem v-auto-animate>
-        <FormLabel>Upload expiry</FormLabel>
-        <FormControl>
-          <Input type="text" placeholder="24h" v-bind="componentField" />
-        </FormControl>
-        <FormDescription>Only applicable for private buckets.</FormDescription>
-        <FormMessage />
-      </FormItem>
-    </FormField>
-
-    <FormField v-slot="{ componentField }" name="url">
-      <FormItem v-auto-animate>
-        <FormLabel>S3 backend URL</FormLabel>
-        <FormControl>
-          <Input
-            type="url"
-            placeholder="https://ap-south-1.s3.amazonaws.com"
-            v-bind="componentField"
-          />
-        </FormControl>
-        <FormDescription
-          >Only change if using a custom S3 compatible backend like Minio.</FormDescription
-        >
-        <FormMessage />
-      </FormItem>
-    </FormField>
-    <Button type="submit"> {{ submitLabel }} </Button>
-  </form>
-</template>
-
-<script setup>
-import { watch, defineEmits } from 'vue'
-import { Button } from '@/components/ui/button'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import { s3FormSchema } from './formSchema.js'
-import { vAutoAnimate } from '@formkit/auto-animate/vue'
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  FormDescription
-} from '@/components/ui/form'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
-import { Input } from '@/components/ui/input'
-
-const props = defineProps({
-  initialValues: {
-    type: Object,
-    required: false
-  },
-  submitForm: {
-    type: Function,
-    required: true
-  },
-  submitLabel: {
-    type: String,
-    required: false,
-    default: () => 'Submit'
-  }
-})
-
-const emit = defineEmits(['provider-update'])
-
-const s3Form = useForm({
-  validationSchema: toTypedSchema(s3FormSchema)
-})
-
-const onS3FormSubmit = s3Form.handleSubmit((values) => {
-  props.submitForm(values)
-})
-
-const handleProviderUpdate = (value) => {
-  emit('provider-update', value)
-}
-
-// Watch for changes in initialValues and update the form.
-watch(
-  () => props.initialValues,
-  (newValues) => {
-    s3Form.setValues(newValues)
-  },
-  { deep: true, immediate: true }
-)
-</script>
diff --git a/frontend/src/components/admin/uploads/Uploads.vue b/frontend/src/components/admin/uploads/Uploads.vue
deleted file mode 100644
index 87ed6887..00000000
--- a/frontend/src/components/admin/uploads/Uploads.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div>
-    
-  </div>
-  <div>
-    <component
-      :is="formProvider === 's3' ? S3Form : LocalFsForm"
-      :submitForm="submitForm"
-      :initialValues="initialValues"
-      submitLabel="Save"
-      @provider-update="handleProviderUpdate"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, computed } from 'vue'
-import S3Form from './S3Form.vue'
-import LocalFsForm from './LocalFsForm.vue'
-import api from '@/api'
-
-
-const initialValues = ref({})
-
-onMounted(async () => {
-  const resp = await api.getSettings('upload')
-  const config = resp.data.data
-  const modifiedConfig = {}
-  for (const key in config) {
-    if (key.startsWith('upload.localfs.')) {
-      const newKey = key.replace('upload.localfs.', '')
-      modifiedConfig[newKey] = config[key]
-    } else if (key.startsWith('upload.s3')) {
-      const newKey = key.replace('upload.s3.', '')
-      modifiedConfig[newKey] = config[key]
-    } else if (key.startsWith('upload.')) {
-      const newKey = key.replace('upload.', '')
-      modifiedConfig[newKey] = config[key]
-    }
-  }
-  initialValues.value = modifiedConfig
-})
-
-const submitForm = async (values) => {
-  const prefixedValues = {}
-  for (const key in values) {
-    if (values.provider === 'localfs') {
-      prefixedValues[`upload.localfs.${key}`] = values[key]
-    } else if (values.provider === 's3') {
-      prefixedValues[`upload.s3.${key}`] = values[key]
-    }
-  }
-  prefixedValues['upload.provider'] = values.provider
-  await api.updateSettings('upload', prefixedValues)
-}
-
-const formProvider = computed(() => {
-  return initialValues.value.provider
-})
-
-const handleProviderUpdate = (value) => {
-  initialValues.value.provider = value
-}
-</script>
diff --git a/frontend/src/components/admin/uploads/formSchema.js b/frontend/src/components/admin/uploads/formSchema.js
deleted file mode 100644
index 621eed50..00000000
--- a/frontend/src/components/admin/uploads/formSchema.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as z from 'zod'
-
-export const s3FormSchema = z.object({
-  provider: z.string({
-    required_error: 'Provider is required.'
-  }),
-  region: z.string({
-    required_error: 'Region is required.'
-  }),
-  access_key: z.string({
-    required_error: 'AWS access key is required.'
-  }),
-  access_secret: z.string({
-    required_error: 'AWS access secret is required.'
-  }),
-  bucket_type: z.string({
-    required_error: 'Bucket type is required.'
-  }),
-  bucket: z.string({
-    required_error: 'Bucket is required.'
-  }),
-  bucket_path: z.string({
-    required_error: 'Bucket path is required.'
-  }),
-  upload_expiry: z.string({
-    required_error: 'Upload expiry is required.'
-  }),
-  url: z
-    .string({
-      required_error: 'S3 backend URL is required.'
-    })
-    .url({
-      message: 'S3 backend URL must be a valid URL.'
-    })
-})
-
-export const localFsFormSchema = z.object({
-  provider: z.string({
-    required_error: 'Provider is required.'
-  }),
-  upload_path: z.string({
-    required_error: 'Upload path is required.'
-  })
-})
diff --git a/frontend/src/components/conversation/Conversation.vue b/frontend/src/components/conversation/Conversation.vue
deleted file mode 100644
index f0db007f..00000000
--- a/frontend/src/components/conversation/Conversation.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <div v-if="conversationStore.messages.data">
-    <!-- Header -->
-    <div class="p-2 border-b flex items-center justify-between">
-      <div class="flex items-center space-x-3 text-sm">
-        <div class="font-medium">
-          {{ conversationStore.current?.subject }}
-        </div>
-      </div>
-      <div>
-        <DropdownMenu>
-          <DropdownMenuTrigger>
-            <div
-              class="flex items-center space-x-1 cursor-pointer bg-primary px-2 py-1 rounded-md text-sm"
-            >
-              <span
-                class="text-secondary font-medium inline-block"
-                v-if="conversationStore.current?.status"
-              >
-                {{ conversationStore.current?.status }}
-              </span>
-              <span v-else class="text-secondary font-medium inline-block"> Loading... </span>
-            </div>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem
-              v-for="status in conversationStore.statusOptions"
-              :key="status.value"
-              @click="handleUpdateStatus(status.label)"
-            >
-              {{ status.label }}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  </div>
-
-  <!-- Messages & reply box -->
-  <div>
-    <div class="flex flex-col h-[calc(100vh-theme(spacing.10))]">
-      <MessageList class="flex-1 overflow-y-auto" />
-      <div class="sticky bottom-0 bg-white">
-        <ReplyBox class="h-max" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useConversationStore } from '@/stores/conversation'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
-import MessageList from '@/components/message/MessageList.vue'
-import ReplyBox from './ReplyBox.vue'
-import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
-import { CONVERSATION_DEFAULT_STATUSES } from '@/constants/conversation'
-import { useEmitter } from '@/composables/useEmitter'
-
-const conversationStore = useConversationStore()
-const emitter = useEmitter()
-
-const handleUpdateStatus = (status) => {
-  if (status === CONVERSATION_DEFAULT_STATUSES.SNOOZED) {
-    emitter.emit(EMITTER_EVENTS.SET_NESTED_COMMAND, 'snooze')
-    return
-  }
-  conversationStore.updateStatus(status)
-}
-</script>
diff --git a/frontend/src/components/conversation/ConversationPlaceholder.vue b/frontend/src/components/conversation/ConversationPlaceholder.vue
deleted file mode 100644
index e810a44a..00000000
--- a/frontend/src/components/conversation/ConversationPlaceholder.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <h3 class="h-screen flex items-center justify-center">
-    <div class="flex flex-row items-center justify-center">
-      <p>Select a conversation from the left panel.</p>
-    </div>
-  </h3>
-</template>
diff --git a/frontend/src/components/conversation/list/ConversationListFilters.vue b/frontend/src/components/conversation/list/ConversationListFilters.vue
deleted file mode 100644
index 875ef0f1..00000000
--- a/frontend/src/components/conversation/list/ConversationListFilters.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <div class="flex justify-end px-2 py-2 border-b w-full">
-    <Popover v-model:open="open">
-      <PopoverTrigger as-child>
-        <div class="flex items-center mr-2 relative">
-          <span class="absolute inline-flex h-2 w-2 rounded-full bg-primary opacity-75 right-0 bottom-5 z-20"
-            v-if="conversationStore.conversations.filters.length > 0" />
-          <ListFilter size="27"
-            class="mx-auto cursor-pointer transition-all transform hover:scale-110 hover:bg-secondary hover:bg-opacity-80 p-1 rounded-md z-10" />
-        </div>
-      </PopoverTrigger>
-      <PopoverContent class="w-[450px]">
-        <Filter v-model:modelValue="localFilters" :fields="fields" @apply="handleApply" @clear="handleClear" />
-      </PopoverContent>
-    </Popover>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { ListFilter } from 'lucide-vue-next'
-import { useConversationStore } from '@/stores/conversation'
-import Filter from '@/components/common/FilterBuilder.vue'
-import api from '@/api'
-
-const conversationStore = useConversationStore()
-const open = ref(false)
-const localFilters = ref([])
-const statuses = ref([])
-const priorities = ref([])
-const emit = defineEmits(['updateFilters'])
-
-onMounted(() => {
-  fetchInitialData()
-  localFilters.value = [...conversationStore.conversations.filters]
-})
-
-const fetchInitialData = async () => {
-  const [statusesResp, prioritiesResp] = await Promise.all([
-    api.getStatuses(),
-    api.getPriorities()
-  ])
-
-  statuses.value = statusesResp.data.data.map(status => ({
-    label: status.name,
-    value: status.id.toString(),
-  }))
-
-  priorities.value = prioritiesResp.data.data.map(priority => ({
-    label: priority.name,
-    value: priority.id.toString(),
-  }))
-}
-
-const fields = ref([
-  {
-    model: 'conversations',
-    label: 'Status',
-    value: 'status_id',
-    type: 'select',
-    options: statuses,
-  },
-  {
-    model: 'conversations',
-    label: 'Priority',
-    value: 'priority_id',
-    type: 'select',
-    options: priorities,
-  },
-  {
-    model: 'conversations',
-    label: 'Reference number',
-    value: 'reference_number',
-    type: 'text',
-  }
-])
-
-const handleApply = (filters) => {
-  emit('updateFilters', filters)
-  open.value = false
-}
-
-const handleClear = () => {
-  localFilters.value = []
-  emit('updateFilters', [])
-  open.value = false
-}
-</script>
diff --git a/frontend/src/components/conversation/sidebar/ConversationSideBarContact.vue b/frontend/src/components/conversation/sidebar/ConversationSideBarContact.vue
deleted file mode 100644
index 2b3f9054..00000000
--- a/frontend/src/components/conversation/sidebar/ConversationSideBarContact.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div>
-    <Avatar class="size-20">
-      <AvatarImage
-        :src="conversation?.contact?.avatar_url"
-        v-if="conversation?.contact?.avatar_url"
-      />
-      <AvatarFallback>
-        {{ conversation?.contact.first_name.toUpperCase().substring(0, 2) }}
-      </AvatarFallback>
-    </Avatar>
-    <h4 class="mt-3">
-      {{ conversation?.contact.first_name + ' ' + conversation?.contact.last_name }}
-    </h4>
-    <p class="text-sm text-muted-foreground flex gap-2 mt-1" v-if="conversation?.contact.email">
-      <Mail class="size-3 mt-1"></Mail>
-      {{ conversation.contact.email }}
-    </p>
-    <p class="text-sm text-muted-foreground flex gap-2 mt-1">
-      <Phone class="size-3 mt-1"></Phone>
-      <span>
-        {{
-          conversation?.contact?.phone_number ? conversation.contact.phone_number : 'Not available'
-        }}
-      </span>
-    </p>
-  </div>
-</template>
-
-<script setup>
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { Mail, Phone } from 'lucide-vue-next'
-defineProps({
-  conversation: Object
-})
-</script>
diff --git a/frontend/src/components/admin/DataTable.vue b/frontend/src/components/datatable/DataTable.vue
similarity index 100%
rename from frontend/src/components/admin/DataTable.vue
rename to frontend/src/components/datatable/DataTable.vue
diff --git a/frontend/src/components/common/CodeEditor.vue b/frontend/src/components/editor/CodeEditor.vue
similarity index 100%
rename from frontend/src/components/common/CodeEditor.vue
rename to frontend/src/components/editor/CodeEditor.vue
diff --git a/frontend/src/components/admin/common/MenuCard.vue b/frontend/src/components/layout/MenuCard.vue
similarity index 100%
rename from frontend/src/components/admin/common/MenuCard.vue
rename to frontend/src/components/layout/MenuCard.vue
diff --git a/frontend/src/components/common/PageHeader.vue b/frontend/src/components/layout/PageHeader.vue
similarity index 91%
rename from frontend/src/components/common/PageHeader.vue
rename to frontend/src/components/layout/PageHeader.vue
index 5bfb8c83..c8657935 100644
--- a/frontend/src/components/common/PageHeader.vue
+++ b/frontend/src/components/layout/PageHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="!isHidden">
     <div class="flex items-center space-x-4 p-4">
-      <SidebarTrigger class="cursor-pointer w-5 h-5" />
+      <SidebarTrigger class="cursor-pointer w-4 h-4" />
       <span class="text-2xl font-semibold">
         {{ title }}
       </span>
diff --git a/frontend/src/components/sidebar/Sidebar.vue b/frontend/src/components/sidebar/Sidebar.vue
index a20dc3fd..14dd7c0d 100644
--- a/frontend/src/components/sidebar/Sidebar.vue
+++ b/frontend/src/components/sidebar/Sidebar.vue
@@ -40,26 +40,20 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import { useStorage } from '@vueuse/core'
 import { computed } from 'vue'
 import { useUserStore } from '@/stores/user'
-import { useConversationStore } from '@/stores/conversation'
-import ConversationSideBar from '@/components/conversation/sidebar/ConversationSideBar.vue'
 
 const route = useRoute()
 
 defineProps({
-  isLoading: Boolean,
-  open: Boolean,
-  activeItem: { type: Object, default: () => {} },
-  activeGroup: { type: Object, default: () => {} },
   userTeams: { type: Array, default: () => [] },
   userViews: { type: Array, default: () => [] }
 })
 
-const conversationStore = useConversationStore()
 const userStore = useUserStore()
 
-const emit = defineEmits(['createView', 'editView', 'deleteView', 'update:open'])
+const emit = defineEmits(['createView', 'editView', 'deleteView'])
 
 const openCreateViewDialog = () => {
   emit('createView')
@@ -153,7 +147,6 @@ const adminNavItems = [
   },
   {
     title: 'Conversations',
-    description: 'Manage tags, macros, and statuses.',
     children: [
       {
         title: 'Tags',
@@ -174,7 +167,6 @@ const adminNavItems = [
   },
   {
     title: 'Inboxes',
-    description: 'Manage inboxes.',
     children: [
       {
         title: 'Inboxes',
@@ -185,7 +177,6 @@ const adminNavItems = [
   },
   {
     title: 'Teammates',
-    description: 'Manage users, teams, and roles.',
     children: [
       {
         title: 'Users',
@@ -206,7 +197,6 @@ const adminNavItems = [
   },
   {
     title: 'Automations',
-    description: 'Manage automation rules.',
     children: [
       {
         title: 'Automations',
@@ -217,7 +207,6 @@ const adminNavItems = [
   },
   {
     title: 'Notifications',
-    description: 'Manage email notifications.',
     children: [
       {
         title: 'Email',
@@ -228,7 +217,6 @@ const adminNavItems = [
   },
   {
     title: 'Templates',
-    description: 'Manage email templates.',
     children: [
       {
         title: 'Templates',
@@ -239,7 +227,6 @@ const adminNavItems = [
   },
   {
     title: 'Security',
-    description: 'Configure SSO and security.',
     children: [
       {
         title: 'OpenID Connect SSO',
@@ -263,23 +250,21 @@ const isActiveParent = (parentHref) => {
 }
 
 const isInboxRoute = (path) => {
-  return path.startsWith('/inboxes') || path.startsWith('/teams') || path.startsWith('/views')
+  return path.startsWith('/inboxes')
 }
 
-const hasConversationOpen = computed(() => {
-  return conversationStore.current || conversationStore.conversation.loading
-})
+const sidebarOpen = useStorage('sidebarOpen', true)
 </script>
 
 <template>
   <div class="flex flex-row justify-between h-full">
     <div class="flex-1">
       <SidebarProvider
-        :open="open"
-        @update:open="($event) => emit('update:open', $event)"
         style="--sidebar-width: 16rem"
+        :default-open="sidebarOpen"
+        v-on:update:open="sidebarOpen = $event"
       >
-        <!-- Flex Container that holds all the sidebar components -->
+
         <Sidebar
           collapsible="icon"
           class="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row !border-r-0"
@@ -591,7 +576,7 @@ const hasConversationOpen = computed(() => {
                             <SidebarMenuSubItem>
                               <SidebarMenuSubButton
                                 size="sm"
-                                :isActive="isActiveParent(`/teams/${team.id}`)"
+                                :isActive="isActiveParent(`/inboxes/teams/${team.id}`)"
                                 asChild
                               >
                                 <router-link
@@ -637,7 +622,7 @@ const hasConversationOpen = computed(() => {
                             <SidebarMenuSubItem>
                               <SidebarMenuSubButton
                                 size="sm"
-                                :isActive="isActiveParent(`/views/${view.id}`)"
+                                :isActive="isActiveParent(`/inboxes/views/${view.id}`)"
                                 asChild
                               >
                                 <router-link
@@ -680,24 +665,5 @@ const hasConversationOpen = computed(() => {
         </SidebarInset>
       </SidebarProvider>
     </div>
-
-    <!-- Right Sidebar with conversation details -->
-    <div v-if="hasConversationOpen">
-      <SidebarProvider :open="true" style="--sidebar-width: 20rem">
-        <Sidebar collapsible="none" side="right">
-          <SidebarSeparator />
-          <SidebarContent>
-            <SidebarGroup style="padding: 0">
-              <SidebarMenu>
-                <SidebarMenuItem>
-                  <ConversationSideBar />
-                </SidebarMenuItem>
-              </SidebarMenu>
-            </SidebarGroup>
-          </SidebarContent>
-          <SidebarRail />
-        </Sidebar>
-      </SidebarProvider>
-    </div>
   </div>
 </template>
diff --git a/frontend/src/components/common/SimpleTable.vue b/frontend/src/components/table/SimpleTable.vue
similarity index 100%
rename from frontend/src/components/common/SimpleTable.vue
rename to frontend/src/components/table/SimpleTable.vue
diff --git a/frontend/src/composables/useSla.js b/frontend/src/composables/useSla.js
index bb5d0ab4..439d2e9c 100644
--- a/frontend/src/composables/useSla.js
+++ b/frontend/src/composables/useSla.js
@@ -1,11 +1,8 @@
-// composables/useSla.js
 import { ref, onMounted, onUnmounted } from 'vue'
 import { calculateSla } from '@/utils/sla'
 
 export function useSla (dueAt, actualAt) {
     const sla = ref(null)
-
-
     function updateSla () {
         if (!dueAt.value) {
             sla.value = null
@@ -13,7 +10,6 @@ export function useSla (dueAt, actualAt) {
         }
         sla.value = calculateSla(dueAt.value, actualAt.value)
     }
-
     onMounted(() => {
         updateSla()
         // Update the SLA every 30 seconds.
@@ -22,6 +18,5 @@ export function useSla (dueAt, actualAt) {
             clearInterval(intervalId)
         })
     })
-
     return { sla, updateSla }
 }
diff --git a/frontend/src/composables/useTemporaryClass.js b/frontend/src/composables/useTemporaryClass.js
index 321e518d..8f40bdfd 100644
--- a/frontend/src/composables/useTemporaryClass.js
+++ b/frontend/src/composables/useTemporaryClass.js
@@ -2,7 +2,6 @@ import { ref, onUnmounted, nextTick } from 'vue'
 
 export function useTemporaryClass(containerID, className, timeMs = 300) {
   const container = ref(null)
-
   const applyClass = async () => {
     await nextTick()
     container.value = document.getElementById(containerID)
@@ -13,16 +12,13 @@ export function useTemporaryClass(containerID, className, timeMs = 300) {
       }, timeMs)
     }
   }
-
   applyClass()
-
   onUnmounted(() => {
     if (container.value) {
       container.value.classList.remove(className)
       container.value = null
     }
   })
-
   return {
     container
   }
diff --git a/frontend/src/constants/emitterEvents.js b/frontend/src/constants/emitterEvents.js
index b374b8bc..82117f11 100644
--- a/frontend/src/constants/emitterEvents.js
+++ b/frontend/src/constants/emitterEvents.js
@@ -4,4 +4,5 @@ export const EMITTER_EVENTS = {
     SHOW_SOONER: 'show-sooner',
     NEW_MESSAGE: 'new-message',
     SET_NESTED_COMMAND: 'set-nested-command',
+    CONVERSATION_SIDEBAR_TOGGLE: 'conversation-sidebar-toggle'
 }
\ No newline at end of file
diff --git a/frontend/src/constants/websocket.js b/frontend/src/constants/websocket.js
index 53cb299a..e6374cc1 100644
--- a/frontend/src/constants/websocket.js
+++ b/frontend/src/constants/websocket.js
@@ -1,6 +1,5 @@
-
 export const WS_EVENT = {
     NEW_MESSAGE: 'new_message',
     MESSAGE_PROP_UPDATE: 'message_prop_update',
     CONVERSATION_PROP_UPDATE: 'conversation_prop_update',
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/admin/automation/ActionBox.vue b/frontend/src/features/admin/automation/ActionBox.vue
similarity index 100%
rename from frontend/src/components/admin/automation/ActionBox.vue
rename to frontend/src/features/admin/automation/ActionBox.vue
diff --git a/frontend/src/components/admin/automation/AutomationTabs.vue b/frontend/src/features/admin/automation/AutomationTabs.vue
similarity index 100%
rename from frontend/src/components/admin/automation/AutomationTabs.vue
rename to frontend/src/features/admin/automation/AutomationTabs.vue
diff --git a/frontend/src/components/admin/automation/RuleBox.vue b/frontend/src/features/admin/automation/RuleBox.vue
similarity index 100%
rename from frontend/src/components/admin/automation/RuleBox.vue
rename to frontend/src/features/admin/automation/RuleBox.vue
diff --git a/frontend/src/components/admin/automation/RuleList.vue b/frontend/src/features/admin/automation/RuleList.vue
similarity index 100%
rename from frontend/src/components/admin/automation/RuleList.vue
rename to frontend/src/features/admin/automation/RuleList.vue
diff --git a/frontend/src/components/admin/automation/RuleTab.vue b/frontend/src/features/admin/automation/RuleTab.vue
similarity index 100%
rename from frontend/src/components/admin/automation/RuleTab.vue
rename to frontend/src/features/admin/automation/RuleTab.vue
diff --git a/frontend/src/components/admin/automation/formSchema.js b/frontend/src/features/admin/automation/formSchema.js
similarity index 100%
rename from frontend/src/components/admin/automation/formSchema.js
rename to frontend/src/features/admin/automation/formSchema.js
diff --git a/frontend/src/components/admin/business_hours/BusinessHoursForm.vue b/frontend/src/features/admin/business-hours/BusinessHoursForm.vue
similarity index 99%
rename from frontend/src/components/admin/business_hours/BusinessHoursForm.vue
rename to frontend/src/features/admin/business-hours/BusinessHoursForm.vue
index dbb2e64e..377e32ce 100644
--- a/frontend/src/components/admin/business_hours/BusinessHoursForm.vue
+++ b/frontend/src/features/admin/business-hours/BusinessHoursForm.vue
@@ -141,7 +141,7 @@ import { cn } from '@/lib/utils'
 import { format } from 'date-fns'
 import { WEEKDAYS } from '@/constants/date'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import SimpleTable from '@/components/common/SimpleTable.vue'
+import SimpleTable from '@/components/table/SimpleTable.vue'
 import {
     Dialog,
     DialogContent,
diff --git a/frontend/src/components/admin/business_hours/dataTableColumns.js b/frontend/src/features/admin/business-hours/dataTableColumns.js
similarity index 100%
rename from frontend/src/components/admin/business_hours/dataTableColumns.js
rename to frontend/src/features/admin/business-hours/dataTableColumns.js
diff --git a/frontend/src/components/admin/business_hours/dataTableDropdown.vue b/frontend/src/features/admin/business-hours/dataTableDropdown.vue
similarity index 100%
rename from frontend/src/components/admin/business_hours/dataTableDropdown.vue
rename to frontend/src/features/admin/business-hours/dataTableDropdown.vue
diff --git a/frontend/src/components/admin/business_hours/formSchema.js b/frontend/src/features/admin/business-hours/formSchema.js
similarity index 100%
rename from frontend/src/components/admin/business_hours/formSchema.js
rename to frontend/src/features/admin/business-hours/formSchema.js
diff --git a/frontend/src/components/admin/general/GeneralSettingForm.vue b/frontend/src/features/admin/general/GeneralSettingForm.vue
similarity index 100%
rename from frontend/src/components/admin/general/GeneralSettingForm.vue
rename to frontend/src/features/admin/general/GeneralSettingForm.vue
diff --git a/frontend/src/components/admin/general/formSchema.js b/frontend/src/features/admin/general/formSchema.js
similarity index 100%
rename from frontend/src/components/admin/general/formSchema.js
rename to frontend/src/features/admin/general/formSchema.js
diff --git a/frontend/src/components/admin/inbox/EmailInboxForm.vue b/frontend/src/features/admin/inbox/EmailInboxForm.vue
similarity index 100%
rename from frontend/src/components/admin/inbox/EmailInboxForm.vue
rename to frontend/src/features/admin/inbox/EmailInboxForm.vue
diff --git a/frontend/src/components/admin/inbox/InboxDataTableDropDown.vue b/frontend/src/features/admin/inbox/InboxDataTableDropDown.vue
similarity index 100%
rename from frontend/src/components/admin/inbox/InboxDataTableDropDown.vue
rename to frontend/src/features/admin/inbox/InboxDataTableDropDown.vue
diff --git a/frontend/src/components/admin/inbox/formSchema.js b/frontend/src/features/admin/inbox/formSchema.js
similarity index 100%
rename from frontend/src/components/admin/inbox/formSchema.js
rename to frontend/src/features/admin/inbox/formSchema.js
diff --git a/frontend/src/components/common/ActionBuilder.vue b/frontend/src/features/admin/macros/ActionBuilder.vue
similarity index 100%
rename from frontend/src/components/common/ActionBuilder.vue
rename to frontend/src/features/admin/macros/ActionBuilder.vue
diff --git a/frontend/src/components/admin/conversation/macros/MacroForm.vue b/frontend/src/features/admin/macros/MacroForm.vue
similarity index 98%
rename from frontend/src/components/admin/conversation/macros/MacroForm.vue
rename to frontend/src/features/admin/macros/MacroForm.vue
index b6f4a46e..2bacd0fe 100644
--- a/frontend/src/components/admin/conversation/macros/MacroForm.vue
+++ b/frontend/src/features/admin/macros/MacroForm.vue
@@ -129,7 +129,7 @@ import { Spinner } from '@/components/ui/spinner'
 import { Input } from '@/components/ui/input'
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
-import ActionBuilder from '@/components/common/ActionBuilder.vue'
+import ActionBuilder from '@/features/admin/macros/ActionBuilder.vue'
 import { useConversationFilters } from '@/composables/useConversationFilters'
 import { useUsersStore } from '@/stores/users'
 import { useTeamStore } from '@/stores/team'
diff --git a/frontend/src/components/admin/conversation/macros/dataTableColumns.js b/frontend/src/features/admin/macros/dataTableColumns.js
similarity index 100%
rename from frontend/src/components/admin/conversation/macros/dataTableColumns.js
rename to frontend/src/features/admin/macros/dataTableColumns.js
diff --git a/frontend/src/components/admin/conversation/macros/dataTableDropdown.vue b/frontend/src/features/admin/macros/dataTableDropdown.vue
similarity index 100%
rename from frontend/src/components/admin/conversation/macros/dataTableDropdown.vue
rename to frontend/src/features/admin/macros/dataTableDropdown.vue
diff --git a/frontend/src/components/admin/conversation/macros/formSchema.js b/frontend/src/features/admin/macros/formSchema.js
similarity index 100%
rename from frontend/src/components/admin/conversation/macros/formSchema.js
rename to frontend/src/features/admin/macros/formSchema.js
diff --git a/frontend/src/components/admin/notification/NotificationSetting.vue b/frontend/src/features/admin/notification/NotificationSetting.vue
similarity index 100%
rename from frontend/src/components/admin/notification/NotificationSetting.vue
rename to frontend/src/features/admin/notification/NotificationSetting.vue
diff --git a/frontend/src/components/admin/notification/NotificationSettingForm.vue b/frontend/src/features/admin/notification/NotificationSettingForm.vue
similarity index 100%
rename from frontend/src/components/admin/notification/NotificationSettingForm.vue
rename to frontend/src/features/admin/notification/NotificationSettingForm.vue
diff --git a/frontend/src/components/admin/notification/formSchema.js b/frontend/src/features/admin/notification/formSchema.js
similarity index 100%
rename from frontend/src/components/admin/notification/formSchema.js
rename to frontend/src/features/admin/notification/formSchema.js
diff --git a/frontend/src/components/admin/oidc/OIDCForm.vue b/frontend/src/features/admin/oidc/OIDCForm.vue
similarity index 97%
rename from frontend/src/components/admin/oidc/OIDCForm.vue
rename to frontend/src/features/admin/oidc/OIDCForm.vue
index 0038b7e6..1e67ca54 100644
--- a/frontend/src/components/admin/oidc/OIDCForm.vue
+++ b/frontend/src/features/admin/oidc/OIDCForm.vue
@@ -62,9 +62,9 @@
 
     <FormField v-slot="{ componentField }" name="redirect_uri" v-if="!isNewForm">
       <FormItem v-auto-animate>
-        <FormLabel>Redirect URI</FormLabel>
+        <FormLabel>Callback URL</FormLabel>
         <FormControl>
-          <Input type="text" placeholder="Redirect URI" v-bind="componentField" readonly />
+          <Input type="text" placeholder="Redirect URL" v-bind="componentField" readonly />
         </FormControl>
         <FormDescription>Set this URI for callback.</FormDescription>
         <FormMessage />
@@ -135,7 +135,7 @@ const props = defineProps({
   isLoading: {
     type: Boolean,
     required: false
-  },
+  }
 })
 
 const form = useForm({
diff --git a/frontend/src/components/admin/oidc/dataTableColumns.js b/frontend/src/features/admin/oidc/dataTableColumns.js
similarity index 100%
rename from frontend/src/components/admin/oidc/dataTableColumns.js
rename to frontend/src/features/admin/oidc/dataTableColumns.js
diff --git a/frontend/src/components/admin/oidc/dataTableDropdown.vue b/frontend/src/features/admin/oidc/dataTableDropdown.vue
similarity index 100%
rename from frontend/src/components/admin/oidc/dataTableDropdown.vue
rename to frontend/src/features/admin/oidc/dataTableDropdown.vue
diff --git a/frontend/src/components/admin/oidc/formSchema.js b/frontend/src/features/admin/oidc/formSchema.js
similarity index 100%
rename from frontend/src/components/admin/oidc/formSchema.js
rename to frontend/src/features/admin/oidc/formSchema.js
diff --git a/frontend/src/components/admin/team/roles/RoleForm.vue b/frontend/src/features/admin/roles/RoleForm.vue
similarity index 100%
rename from frontend/src/components/admin/team/roles/RoleForm.vue
rename to frontend/src/features/admin/roles/RoleForm.vue
diff --git a/frontend/src/components/admin/team/roles/dataTableColumns.js b/frontend/src/features/admin/roles/dataTableColumns.js
similarity index 100%
rename from frontend/src/components/admin/team/roles/dataTableColumns.js
rename to frontend/src/features/admin/roles/dataTableColumns.js
diff --git a/frontend/src/components/admin/team/roles/dataTableDropdown.vue b/frontend/src/features/admin/roles/dataTableDropdown.vue
similarity index 100%
rename from frontend/src/components/admin/team/roles/dataTableDropdown.vue
rename to frontend/src/features/admin/roles/dataTableDropdown.vue
diff --git a/frontend/src/components/admin/team/roles/formSchema.js b/frontend/src/features/admin/roles/formSchema.js
similarity index 100%
rename from frontend/src/components/admin/team/roles/formSchema.js
rename to frontend/src/features/admin/roles/formSchema.js
diff --git a/frontend/src/components/admin/sla/SLAForm.vue b/frontend/src/features/admin/sla/SLAForm.vue
similarity index 100%
rename from frontend/src/components/admin/sla/SLAForm.vue
rename to frontend/src/features/admin/sla/SLAForm.vue
diff --git a/frontend/src/components/admin/sla/dataTableColumns.js b/frontend/src/features/admin/sla/dataTableColumns.js
similarity index 100%
rename from frontend/src/components/admin/sla/dataTableColumns.js
rename to frontend/src/features/admin/sla/dataTableColumns.js
diff --git a/frontend/src/components/admin/sla/dataTableDropdown.vue b/frontend/src/features/admin/sla/dataTableDropdown.vue
similarity index 100%
rename from frontend/src/components/admin/sla/dataTableDropdown.vue
rename to frontend/src/features/admin/sla/dataTableDropdown.vue
diff --git a/frontend/src/components/admin/sla/formSchema.js b/frontend/src/features/admin/sla/formSchema.js
similarity index 100%
rename from frontend/src/components/admin/sla/formSchema.js
rename to frontend/src/features/admin/sla/formSchema.js
diff --git a/frontend/src/components/admin/conversation/status/StatusForm.vue b/frontend/src/features/admin/status/StatusForm.vue
similarity index 100%
rename from frontend/src/components/admin/conversation/status/StatusForm.vue
rename to frontend/src/features/admin/status/StatusForm.vue
diff --git a/frontend/src/components/admin/conversation/status/dataTableColumns.js b/frontend/src/features/admin/status/dataTableColumns.js
similarity index 100%
rename from frontend/src/components/admin/conversation/status/dataTableColumns.js
rename to frontend/src/features/admin/status/dataTableColumns.js
diff --git a/frontend/src/components/admin/conversation/status/dataTableDropdown.vue b/frontend/src/features/admin/status/dataTableDropdown.vue
similarity index 100%
rename from frontend/src/components/admin/conversation/status/dataTableDropdown.vue
rename to frontend/src/features/admin/status/dataTableDropdown.vue
diff --git a/frontend/src/components/admin/conversation/status/formSchema.js b/frontend/src/features/admin/status/formSchema.js
similarity index 100%
rename from frontend/src/components/admin/conversation/status/formSchema.js
rename to frontend/src/features/admin/status/formSchema.js
diff --git a/frontend/src/components/admin/conversation/tags/TagsForm.vue b/frontend/src/features/admin/tags/TagsForm.vue
similarity index 100%
rename from frontend/src/components/admin/conversation/tags/TagsForm.vue
rename to frontend/src/features/admin/tags/TagsForm.vue
diff --git a/frontend/src/components/admin/conversation/tags/dataTableColumns.js b/frontend/src/features/admin/tags/dataTableColumns.js
similarity index 100%
rename from frontend/src/components/admin/conversation/tags/dataTableColumns.js
rename to frontend/src/features/admin/tags/dataTableColumns.js
diff --git a/frontend/src/components/admin/conversation/tags/dataTableDropdown.vue b/frontend/src/features/admin/tags/dataTableDropdown.vue
similarity index 100%
rename from frontend/src/components/admin/conversation/tags/dataTableDropdown.vue
rename to frontend/src/features/admin/tags/dataTableDropdown.vue
diff --git a/frontend/src/components/admin/conversation/tags/formSchema.js b/frontend/src/features/admin/tags/formSchema.js
similarity index 100%
rename from frontend/src/components/admin/conversation/tags/formSchema.js
rename to frontend/src/features/admin/tags/formSchema.js
diff --git a/frontend/src/components/admin/team/teams/TeamDataTableDropdown.vue b/frontend/src/features/admin/teams/TeamDataTableDropdown.vue
similarity index 100%
rename from frontend/src/components/admin/team/teams/TeamDataTableDropdown.vue
rename to frontend/src/features/admin/teams/TeamDataTableDropdown.vue
diff --git a/frontend/src/components/admin/team/teams/TeamForm.vue b/frontend/src/features/admin/teams/TeamForm.vue
similarity index 100%
rename from frontend/src/components/admin/team/teams/TeamForm.vue
rename to frontend/src/features/admin/teams/TeamForm.vue
diff --git a/frontend/src/components/admin/team/teams/TeamsDataTableColumns.js b/frontend/src/features/admin/teams/TeamsDataTableColumns.js
similarity index 92%
rename from frontend/src/components/admin/team/teams/TeamsDataTableColumns.js
rename to frontend/src/features/admin/teams/TeamsDataTableColumns.js
index 3f803e8b..183889a3 100644
--- a/frontend/src/components/admin/team/teams/TeamsDataTableColumns.js
+++ b/frontend/src/features/admin/teams/TeamsDataTableColumns.js
@@ -1,5 +1,5 @@
 import { h } from 'vue'
-import TeamDataTableDropdown from '@/components/admin/team/teams/TeamDataTableDropdown.vue'
+import TeamDataTableDropdown from '@/features/admin/teams/TeamDataTableDropdown.vue'
 import { format } from 'date-fns'
 
 export const columns = [
diff --git a/frontend/src/components/admin/team/teams/teamFormSchema.js b/frontend/src/features/admin/teams/teamFormSchema.js
similarity index 100%
rename from frontend/src/components/admin/team/teams/teamFormSchema.js
rename to frontend/src/features/admin/teams/teamFormSchema.js
diff --git a/frontend/src/components/admin/templates/TemplateForm.vue b/frontend/src/features/admin/templates/TemplateForm.vue
similarity index 98%
rename from frontend/src/components/admin/templates/TemplateForm.vue
rename to frontend/src/features/admin/templates/TemplateForm.vue
index 23ae8457..a4bfe4f7 100644
--- a/frontend/src/components/admin/templates/TemplateForm.vue
+++ b/frontend/src/features/admin/templates/TemplateForm.vue
@@ -74,7 +74,7 @@ import {
   FormDescription
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import CodeEditor from '@/components/common/CodeEditor.vue'
+import CodeEditor from '@/components/editor/CodeEditor.vue'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Label } from '@/components/ui/label'
 const props = defineProps({
diff --git a/frontend/src/components/admin/templates/dataTableColumns.js b/frontend/src/features/admin/templates/dataTableColumns.js
similarity index 100%
rename from frontend/src/components/admin/templates/dataTableColumns.js
rename to frontend/src/features/admin/templates/dataTableColumns.js
diff --git a/frontend/src/components/admin/templates/dataTableDropdown.vue b/frontend/src/features/admin/templates/dataTableDropdown.vue
similarity index 100%
rename from frontend/src/components/admin/templates/dataTableDropdown.vue
rename to frontend/src/features/admin/templates/dataTableDropdown.vue
diff --git a/frontend/src/components/admin/templates/formSchema.js b/frontend/src/features/admin/templates/formSchema.js
similarity index 100%
rename from frontend/src/components/admin/templates/formSchema.js
rename to frontend/src/features/admin/templates/formSchema.js
diff --git a/frontend/src/components/admin/team/users/UserForm.vue b/frontend/src/features/admin/users/UserForm.vue
similarity index 100%
rename from frontend/src/components/admin/team/users/UserForm.vue
rename to frontend/src/features/admin/users/UserForm.vue
diff --git a/frontend/src/components/admin/team/users/dataTableColumns.js b/frontend/src/features/admin/users/dataTableColumns.js
similarity index 95%
rename from frontend/src/components/admin/team/users/dataTableColumns.js
rename to frontend/src/features/admin/users/dataTableColumns.js
index 8620af9e..ba1c62c5 100644
--- a/frontend/src/components/admin/team/users/dataTableColumns.js
+++ b/frontend/src/features/admin/users/dataTableColumns.js
@@ -1,5 +1,5 @@
 import { h } from 'vue'
-import UserDataTableDropDown from '@/components/admin/team/users/dataTableDropdown.vue'
+import UserDataTableDropDown from '@/features/admin/users/dataTableDropdown.vue'
 import { format } from 'date-fns'
 
 export const columns = [
diff --git a/frontend/src/components/admin/team/users/dataTableDropdown.vue b/frontend/src/features/admin/users/dataTableDropdown.vue
similarity index 100%
rename from frontend/src/components/admin/team/users/dataTableDropdown.vue
rename to frontend/src/features/admin/users/dataTableDropdown.vue
diff --git a/frontend/src/components/admin/team/users/formSchema.js b/frontend/src/features/admin/users/formSchema.js
similarity index 100%
rename from frontend/src/components/admin/team/users/formSchema.js
rename to frontend/src/features/admin/users/formSchema.js
diff --git a/frontend/src/components/command/CommandBox.vue b/frontend/src/features/command/CommandBox.vue
similarity index 100%
rename from frontend/src/components/command/CommandBox.vue
rename to frontend/src/features/command/CommandBox.vue
diff --git a/frontend/src/features/conversation/Conversation.vue b/frontend/src/features/conversation/Conversation.vue
new file mode 100644
index 00000000..ab6fb00e
--- /dev/null
+++ b/frontend/src/features/conversation/Conversation.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="flex flex-col w-full">
+    <div>
+      <!-- Header -->
+      <div class="p-2 border-b flex items-center justify-between">
+        <div class="flex items-center space-x-3 text-sm">
+          <div class="font-medium">
+            {{ conversationStore.current?.subject }}
+          </div>
+        </div>
+        <div class="flex items-center space-x-2">
+          <div>
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <div
+                  class="flex items-center space-x-1 cursor-pointer bg-primary px-2 py-1 rounded-md text-sm"
+                >
+                  <span
+                    class="text-secondary font-medium inline-block"
+                    v-if="conversationStore.current?.status"
+                  >
+                    {{ conversationStore.current?.status }}
+                  </span>
+                  <span v-else class="text-secondary font-medium inline-block"> Loading... </span>
+                </div>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem
+                  v-for="status in conversationStore.statusOptions"
+                  :key="status.value"
+                  @click="handleUpdateStatus(status.label)"
+                >
+                  {{ status.label }}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Messages & reply box -->
+    <div>
+      <div class="flex flex-col h-[calc(100vh-theme(spacing.10))]">
+        <MessageList class="flex-1 overflow-y-auto" />
+        <div class="sticky bottom-0 bg-white">
+          <ReplyBox class="h-max" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useConversationStore } from '@/stores/conversation'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import MessageList from '@/features/conversation/message/MessageList.vue'
+import ReplyBox from './ReplyBox.vue'
+import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
+import { CONVERSATION_DEFAULT_STATUSES } from '@/constants/conversation'
+import { useEmitter } from '@/composables/useEmitter'
+const conversationStore = useConversationStore()
+const emitter = useEmitter()
+
+const handleUpdateStatus = (status) => {
+  if (status === CONVERSATION_DEFAULT_STATUSES.SNOOZED) {
+    emitter.emit(EMITTER_EVENTS.SET_NESTED_COMMAND, 'snooze')
+    return
+  }
+  conversationStore.updateStatus(status)
+}
+</script>
diff --git a/frontend/src/features/conversation/ConversationPlaceholder.vue b/frontend/src/features/conversation/ConversationPlaceholder.vue
new file mode 100644
index 00000000..757e4261
--- /dev/null
+++ b/frontend/src/features/conversation/ConversationPlaceholder.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="h-screen w-full flex items-center justify-center">
+    <p>Select a conversation from the left panel.</p>
+  </div>
+</template>
diff --git a/frontend/src/components/conversation/ConversationTextEditor.vue b/frontend/src/features/conversation/ConversationTextEditor.vue
similarity index 100%
rename from frontend/src/components/conversation/ConversationTextEditor.vue
rename to frontend/src/features/conversation/ConversationTextEditor.vue
diff --git a/frontend/src/components/macro/MacroActionsPreview.vue b/frontend/src/features/conversation/MacroActionsPreview.vue
similarity index 100%
rename from frontend/src/components/macro/MacroActionsPreview.vue
rename to frontend/src/features/conversation/MacroActionsPreview.vue
diff --git a/frontend/src/components/conversation/ReplyBox.vue b/frontend/src/features/conversation/ReplyBox.vue
similarity index 98%
rename from frontend/src/components/conversation/ReplyBox.vue
rename to frontend/src/features/conversation/ReplyBox.vue
index 2813bf46..08c88fe1 100644
--- a/frontend/src/components/conversation/ReplyBox.vue
+++ b/frontend/src/features/conversation/ReplyBox.vue
@@ -263,9 +263,9 @@ import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent } from '@/components/ui/dialog'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useEmitter } from '@/composables/useEmitter'
-import AttachmentsPreview from '@/components/attachment/AttachmentsPreview.vue'
-import MacroActionsPreview from '../macro/MacroActionsPreview.vue'
-import ReplyBoxBottomMenuBar from '@/components/conversation/ReplyBoxMenuBar.vue'
+import AttachmentsPreview from '@/features/conversation/message/attachment/AttachmentsPreview.vue'
+import MacroActionsPreview from '@/features/conversation/MacroActionsPreview.vue'
+import ReplyBoxBottomMenuBar from '@/features/conversation/ReplyBoxMenuBar.vue'
 
 const conversationStore = useConversationStore()
 const emitter = useEmitter()
diff --git a/frontend/src/components/conversation/ReplyBoxMenuBar.vue b/frontend/src/features/conversation/ReplyBoxMenuBar.vue
similarity index 100%
rename from frontend/src/components/conversation/ReplyBoxMenuBar.vue
rename to frontend/src/features/conversation/ReplyBoxMenuBar.vue
diff --git a/frontend/src/components/conversation/list/ConversationEmptyList.vue b/frontend/src/features/conversation/list/ConversationEmptyList.vue
similarity index 100%
rename from frontend/src/components/conversation/list/ConversationEmptyList.vue
rename to frontend/src/features/conversation/list/ConversationEmptyList.vue
diff --git a/frontend/src/components/conversation/list/ConversationList.vue b/frontend/src/features/conversation/list/ConversationList.vue
similarity index 94%
rename from frontend/src/components/conversation/list/ConversationList.vue
rename to frontend/src/features/conversation/list/ConversationList.vue
index 0c725d30..56f695d6 100644
--- a/frontend/src/components/conversation/list/ConversationList.vue
+++ b/frontend/src/features/conversation/list/ConversationList.vue
@@ -9,7 +9,7 @@
     </header>
 
     <!-- Filters -->
-    <div class="bg-white px-4 py-3 flex justify-between items-center">
+    <div class="bg-white px-2 py-3 flex justify-between items-center">
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant="ghost" class="w-30">
@@ -144,10 +144,10 @@ import {
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { SidebarTrigger } from '@/components/ui/sidebar'
-import EmptyList from '@/components/conversation/list/ConversationEmptyList.vue'
-import ConversationListItem from '@/components/conversation/list/ConversationListItem.vue'
+import EmptyList from '@/features/conversation/list/ConversationEmptyList.vue'
+import ConversationListItem from '@/features/conversation/list/ConversationListItem.vue'
 import { useRoute } from 'vue-router'
-import ConversationListItemSkeleton from '@/components/conversation/list/ConversationListItemSkeleton.vue'
+import ConversationListItemSkeleton from '@/features/conversation/list/ConversationListItemSkeleton.vue'
 
 const conversationStore = useConversationStore()
 const route = useRoute()
diff --git a/frontend/src/components/conversation/list/ConversationListItem.vue b/frontend/src/features/conversation/list/ConversationListItem.vue
similarity index 98%
rename from frontend/src/components/conversation/list/ConversationListItem.vue
rename to frontend/src/features/conversation/list/ConversationListItem.vue
index dc0c6119..3ceb4fe7 100644
--- a/frontend/src/components/conversation/list/ConversationListItem.vue
+++ b/frontend/src/features/conversation/list/ConversationListItem.vue
@@ -65,7 +65,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { formatTime } from '@/utils/datetime'
 import { Mail, CheckCheck } from 'lucide-vue-next'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import SlaDisplay from '@/components/sla/SlaDisplay.vue'
+import SlaDisplay from '@/features/sla/SlaDisplay.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -82,7 +82,6 @@ const navigateToConversation = (uuid) => {
     : route.name.includes('view')
       ? 'view-inbox-conversation'
       : 'inbox-conversation'
-
   router.push({
     name: baseRoute,
     params: {
diff --git a/frontend/src/components/conversation/list/ConversationListItemSkeleton.vue b/frontend/src/features/conversation/list/ConversationListItemSkeleton.vue
similarity index 100%
rename from frontend/src/components/conversation/list/ConversationListItemSkeleton.vue
rename to frontend/src/features/conversation/list/ConversationListItemSkeleton.vue
diff --git a/frontend/src/components/message/ActivityMessageBubble.vue b/frontend/src/features/conversation/message/ActivityMessageBubble.vue
similarity index 100%
rename from frontend/src/components/message/ActivityMessageBubble.vue
rename to frontend/src/features/conversation/message/ActivityMessageBubble.vue
diff --git a/frontend/src/components/message/AgentMessageBubble.vue b/frontend/src/features/conversation/message/AgentMessageBubble.vue
similarity index 97%
rename from frontend/src/components/message/AgentMessageBubble.vue
rename to frontend/src/features/conversation/message/AgentMessageBubble.vue
index e9bceb63..7605c013 100644
--- a/frontend/src/components/message/AgentMessageBubble.vue
+++ b/frontend/src/features/conversation/message/AgentMessageBubble.vue
@@ -74,7 +74,7 @@ import { revertCIDToImageSrc } from '@/utils/strings'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { Spinner } from '@/components/ui/spinner'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import MessageAttachmentPreview from '@/components/attachment/MessageAttachmentPreview.vue'
+import MessageAttachmentPreview from '@/features/conversation/message/attachment/MessageAttachmentPreview.vue'
 import api from '@/api'
 
 const props = defineProps({
diff --git a/frontend/src/components/message/ContactMessageBubble.vue b/frontend/src/features/conversation/message/ContactMessageBubble.vue
similarity index 96%
rename from frontend/src/components/message/ContactMessageBubble.vue
rename to frontend/src/features/conversation/message/ContactMessageBubble.vue
index df14e0b5..2250549d 100644
--- a/frontend/src/components/message/ContactMessageBubble.vue
+++ b/frontend/src/features/conversation/message/ContactMessageBubble.vue
@@ -73,7 +73,7 @@ import { useConversationStore } from '@/stores/conversation'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Letter } from 'vue-letter'
-import MessageAttachmentPreview from '@/components/attachment/MessageAttachmentPreview.vue'
+import MessageAttachmentPreview from '@/features/conversation/message/attachment/MessageAttachmentPreview.vue'
 
 const props = defineProps({
   message: Object
diff --git a/frontend/src/components/message/MessageList.vue b/frontend/src/features/conversation/message/MessageList.vue
similarity index 100%
rename from frontend/src/components/message/MessageList.vue
rename to frontend/src/features/conversation/message/MessageList.vue
diff --git a/frontend/src/components/message/MessagesSkeleton.vue b/frontend/src/features/conversation/message/MessagesSkeleton.vue
similarity index 100%
rename from frontend/src/components/message/MessagesSkeleton.vue
rename to frontend/src/features/conversation/message/MessagesSkeleton.vue
diff --git a/frontend/src/components/attachment/AttachmentsPreview.vue b/frontend/src/features/conversation/message/attachment/AttachmentsPreview.vue
similarity index 100%
rename from frontend/src/components/attachment/AttachmentsPreview.vue
rename to frontend/src/features/conversation/message/attachment/AttachmentsPreview.vue
diff --git a/frontend/src/components/attachment/FileAttachmentPreview.vue b/frontend/src/features/conversation/message/attachment/FileAttachmentPreview.vue
similarity index 100%
rename from frontend/src/components/attachment/FileAttachmentPreview.vue
rename to frontend/src/features/conversation/message/attachment/FileAttachmentPreview.vue
diff --git a/frontend/src/components/attachment/ImageAttachmentPreview.vue b/frontend/src/features/conversation/message/attachment/ImageAttachmentPreview.vue
similarity index 100%
rename from frontend/src/components/attachment/ImageAttachmentPreview.vue
rename to frontend/src/features/conversation/message/attachment/ImageAttachmentPreview.vue
diff --git a/frontend/src/components/attachment/MessageAttachmentPreview.vue b/frontend/src/features/conversation/message/attachment/MessageAttachmentPreview.vue
similarity index 73%
rename from frontend/src/components/attachment/MessageAttachmentPreview.vue
rename to frontend/src/features/conversation/message/attachment/MessageAttachmentPreview.vue
index 009bda70..af0857a0 100644
--- a/frontend/src/components/attachment/MessageAttachmentPreview.vue
+++ b/frontend/src/features/conversation/message/attachment/MessageAttachmentPreview.vue
@@ -14,8 +14,8 @@
 </template>
 
 <script setup>
-import ImageAttachmentPreview from '@/components/attachment/ImageAttachmentPreview.vue'
-import FileAttachmentPreview from '@/components/attachment/FileAttachmentPreview.vue'
+import ImageAttachmentPreview from '@/features/conversation/message/attachment/ImageAttachmentPreview.vue'
+import FileAttachmentPreview from '@/features/conversation/message/attachment/FileAttachmentPreview.vue'
 
 defineProps({
   attachments: {
diff --git a/frontend/src/components/conversation/sidebar/ConversationActions.vue b/frontend/src/features/conversation/sidebar/ConversationActions.vue
similarity index 100%
rename from frontend/src/components/conversation/sidebar/ConversationActions.vue
rename to frontend/src/features/conversation/sidebar/ConversationActions.vue
diff --git a/frontend/src/components/conversation/sidebar/ConversationInfo.vue b/frontend/src/features/conversation/sidebar/ConversationInfo.vue
similarity index 96%
rename from frontend/src/components/conversation/sidebar/ConversationInfo.vue
rename to frontend/src/features/conversation/sidebar/ConversationInfo.vue
index 586239f1..5ae5020f 100644
--- a/frontend/src/components/conversation/sidebar/ConversationInfo.vue
+++ b/frontend/src/features/conversation/sidebar/ConversationInfo.vue
@@ -53,7 +53,7 @@
 
 <script setup>
 import { format } from 'date-fns'
-import SlaDisplay from '@/components/sla/SlaDisplay.vue'
+import SlaDisplay from '@/features/sla/SlaDisplay.vue'
 defineProps({
   conversation: Object
 })
diff --git a/frontend/src/components/conversation/sidebar/ConversationSideBar.vue b/frontend/src/features/conversation/sidebar/ConversationSideBar.vue
similarity index 97%
rename from frontend/src/components/conversation/sidebar/ConversationSideBar.vue
rename to frontend/src/features/conversation/sidebar/ConversationSideBar.vue
index bf88b33e..8ddebea9 100644
--- a/frontend/src/components/conversation/sidebar/ConversationSideBar.vue
+++ b/frontend/src/features/conversation/sidebar/ConversationSideBar.vue
@@ -1,11 +1,10 @@
 <template>
-  <div v-if="conversationStore.current" class="h-screen overflow-y-auto">
+  <div>
     <ConversationSideBarContact :conversation="conversationStore.current" class="p-4 border-b" />
     <Accordion
       type="multiple"
       collapsible
       :default-value="['Actions', 'Information', 'Previous conversations']"
-      class="border-t"
     >
       <AccordionItem value="Actions">
         <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium">
@@ -191,12 +190,13 @@ import {
   AccordionTrigger
 } from '@/components/ui/accordion'
 import ConversationInfo from './ConversationInfo.vue'
-import ConversationSideBarContact from '@/components/conversation/sidebar/ConversationSideBarContact.vue'
+import ConversationSideBarContact from '@/features/conversation/sidebar/ConversationSideBarContact.vue'
 import ComboBox from '@/components/ui/combobox/ComboBox.vue'
 import { SelectTag } from '@/components/ui/select'
 import { useToast } from '@/components/ui/toast/use-toast'
 import { handleHTTPError } from '@/utils/http'
 import api from '@/api'
+import { SidebarTrigger } from '@/components/ui/sidebar'
 import { CircleAlert, SignalLow, SignalMedium, SignalHigh, Users } from 'lucide-vue-next'
 
 const { toast } = useToast()
@@ -219,9 +219,9 @@ watch(
   }
 )
 
-const assignedUserID = computed(() => String(conversationStore.current.assigned_user_id))
-const assignedTeamID = computed(() => String(conversationStore.current.assigned_team_id))
-const priorityID = computed(() => String(conversationStore.current.priority_id))
+const assignedUserID = computed(() => String(conversationStore.current?.assigned_user_id))
+const assignedTeamID = computed(() => String(conversationStore.current?.assigned_team_id))
+const priorityID = computed(() => String(conversationStore.current?.priority_id))
 const priorityOptions = computed(() => conversationStore.priorityOptions)
 
 const fetchTags = async () => {
@@ -285,7 +285,6 @@ const selectPriority = (priority) => {
 }
 
 const getPriorityIcon = (value) => {
-  console.log(value)
   switch (value) {
     case '1':
       return SignalLow
diff --git a/frontend/src/features/conversation/sidebar/ConversationSideBarContact.vue b/frontend/src/features/conversation/sidebar/ConversationSideBarContact.vue
new file mode 100644
index 00000000..62f2e4b8
--- /dev/null
+++ b/frontend/src/features/conversation/sidebar/ConversationSideBarContact.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div class="flex justify-between items-start">
+      <Avatar class="size-20">
+        <AvatarImage
+          :src="conversation?.contact?.avatar_url"
+          v-if="conversation?.contact?.avatar_url"
+        />
+        <AvatarFallback>
+          {{ conversation?.contact?.first_name?.toUpperCase().substring(0, 2) }}
+        </AvatarFallback>
+      </Avatar>
+      <div class="mt-2">
+        <PanelLeft
+          class="cursor-pointer"
+          @click="emitter.emit(EMITTER_EVENTS.CONVERSATION_SIDEBAR_TOGGLE)"
+          size="16"
+        />
+      </div>
+    </div>
+    <div>
+      <h4 class="mt-3">
+        {{ conversation?.contact?.first_name + ' ' + conversation?.contact?.last_name }}
+      </h4>
+      <p class="text-sm text-muted-foreground flex gap-2 mt-1" v-if="conversation?.contact?.email">
+        <Mail class="size-3 mt-1" />
+        {{ conversation.contact.email }}
+      </p>
+      <p class="text-sm text-muted-foreground flex gap-2 mt-1">
+        <Phone class="size-3 mt-1" />
+        <span>
+          {{ conversation?.contact?.phone_number || 'Not available' }}
+        </span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { PanelLeft } from 'lucide-vue-next'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Mail, Phone } from 'lucide-vue-next'
+import { useEmitter } from '@/composables/useEmitter'
+import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
+
+const emitter = useEmitter()
+
+defineProps({
+  conversation: Object
+})
+</script>
diff --git a/frontend/src/features/conversation/sidebar/ConversationSideBarWrapper.vue b/frontend/src/features/conversation/sidebar/ConversationSideBarWrapper.vue
new file mode 100644
index 00000000..ca913573
--- /dev/null
+++ b/frontend/src/features/conversation/sidebar/ConversationSideBarWrapper.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <SidebarProvider :style="{ '--sidebar-width': '20rem' }" :open="conversationSidebarOpen">
+      <Sidebar side="right" collapsible="offcanvas" variant="sidebar">
+        <SidebarContent>
+          <SidebarGroup style="padding: 0">
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <ConversationSideBar v-if="conversationStore.current" />
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+
+        <SidebarRail>
+          <button
+            v-if="!conversationSidebarOpen"
+            @click="toggleSidebar"
+            class="absolute right-full top-16 p-1 -mr-2 rounded-l-full bg-white text-primary border hover:bg-opacity-90 transition-all duration-200 shadow-lg group"
+          >
+            <ChevronLeft size="16" class="group-hover:scale-110 transition-transform" />
+          </button>
+        </SidebarRail>
+      </Sidebar>
+    </SidebarProvider>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { ChevronLeft } from 'lucide-vue-next'
+import ConversationSideBar from './ConversationSideBar.vue'
+import { useConversationStore } from '@/stores/conversation'
+import { useEmitter } from '@/composables/useEmitter'
+import { useStorage } from '@vueuse/core'
+import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail
+} from '@/components/ui/sidebar'
+
+const conversationStore = useConversationStore()
+const emitter = useEmitter()
+const conversationSidebarOpen = useStorage('conversationSidebarOpen', false)
+
+const toggleSidebar = () => {
+  conversationSidebarOpen.value = !conversationSidebarOpen.value
+}
+
+onMounted(() => {
+  emitter.on(EMITTER_EVENTS.CONVERSATION_SIDEBAR_TOGGLE, toggleSidebar)
+})
+
+onUnmounted(() => {
+  emitter.off(EMITTER_EVENTS.CONVERSATION_SIDEBAR_TOGGLE)
+})
+</script>
diff --git a/frontend/src/components/dashboard/DashboardBarChart.vue b/frontend/src/features/reports/DashboardBarChart.vue
similarity index 100%
rename from frontend/src/components/dashboard/DashboardBarChart.vue
rename to frontend/src/features/reports/DashboardBarChart.vue
diff --git a/frontend/src/components/dashboard/DashboardCard.vue b/frontend/src/features/reports/DashboardCard.vue
similarity index 100%
rename from frontend/src/components/dashboard/DashboardCard.vue
rename to frontend/src/features/reports/DashboardCard.vue
diff --git a/frontend/src/components/dashboard/DashboardGreet.vue b/frontend/src/features/reports/DashboardGreet.vue
similarity index 100%
rename from frontend/src/components/dashboard/DashboardGreet.vue
rename to frontend/src/features/reports/DashboardGreet.vue
diff --git a/frontend/src/components/dashboard/DashboardLineChart.vue b/frontend/src/features/reports/DashboardLineChart.vue
similarity index 100%
rename from frontend/src/components/dashboard/DashboardLineChart.vue
rename to frontend/src/features/reports/DashboardLineChart.vue
diff --git a/frontend/src/components/search/SearchHeader.vue b/frontend/src/features/search/SearchHeader.vue
similarity index 100%
rename from frontend/src/components/search/SearchHeader.vue
rename to frontend/src/features/search/SearchHeader.vue
diff --git a/frontend/src/components/search/SearchResults.vue b/frontend/src/features/search/SearchResults.vue
similarity index 100%
rename from frontend/src/components/search/SearchResults.vue
rename to frontend/src/features/search/SearchResults.vue
diff --git a/frontend/src/components/sla/SlaDisplay.vue b/frontend/src/features/sla/SlaDisplay.vue
similarity index 100%
rename from frontend/src/components/sla/SlaDisplay.vue
rename to frontend/src/features/sla/SlaDisplay.vue
diff --git a/frontend/src/components/common/FilterBuilder.vue b/frontend/src/features/view/FilterBuilder.vue
similarity index 100%
rename from frontend/src/components/common/FilterBuilder.vue
rename to frontend/src/features/view/FilterBuilder.vue
diff --git a/frontend/src/components/ViewForm.vue b/frontend/src/features/view/ViewForm.vue
similarity index 96%
rename from frontend/src/components/ViewForm.vue
rename to frontend/src/features/view/ViewForm.vue
index c1eb63cf..ab705b76 100644
--- a/frontend/src/components/ViewForm.vue
+++ b/frontend/src/features/view/ViewForm.vue
@@ -21,7 +21,7 @@
             <FormItem>
               <FormLabel>Filters</FormLabel>
               <FormControl>
-                <Filter :fields="filterFields" :showButtons="false" v-bind="componentField" />
+                <FilterBuilder :fields="filterFields" :showButtons="false" v-bind="componentField" />
               </FormControl>
               <FormDescription>Add multiple filters to customize view.</FormDescription>
               <FormMessage />
@@ -59,7 +59,7 @@ import {
   FormMessage
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import Filter from '@/components/common/FilterBuilder.vue'
+import FilterBuilder from '@/features/view/FilterBuilder.vue'
 import { useConversationFilters } from '@/composables/useConversationFilters'
 import { toTypedSchema } from '@vee-validate/zod'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
diff --git a/frontend/src/components/account/AccountPage.vue b/frontend/src/layouts/account/AccountLayout.vue
similarity index 85%
rename from frontend/src/components/account/AccountPage.vue
rename to frontend/src/layouts/account/AccountLayout.vue
index ce16b143..5ced0b7f 100644
--- a/frontend/src/components/account/AccountPage.vue
+++ b/frontend/src/layouts/account/AccountLayout.vue
@@ -1,14 +1,13 @@
-<script setup>
-</script>
-
 <template>
   <div class="space-y-4 md:block page-content">
     <div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
       <div class="flex-1 lg:max-w-3xl admin-main-content min-h-[700px]">
         <div class="space-y-6">
-          <slot></slot>
+          <router-view />
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<script setup></script>
diff --git a/frontend/src/layouts/admin/AdminLayout.vue b/frontend/src/layouts/admin/AdminLayout.vue
new file mode 100644
index 00000000..f6b662b6
--- /dev/null
+++ b/frontend/src/layouts/admin/AdminLayout.vue
@@ -0,0 +1,15 @@
+<template>
+  <main class="p-6 page-content pb-12">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex gap-6 justify-start">
+        <div class="flex-grow">
+          <div class="bg-white shadow-md rounded-lg overflow-hidden">
+            <div class="p-6 sm:p-8">
+              <router-view />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
diff --git a/frontend/src/layouts/inbox/InboxLayout.vue b/frontend/src/layouts/inbox/InboxLayout.vue
new file mode 100644
index 00000000..aeaab374
--- /dev/null
+++ b/frontend/src/layouts/inbox/InboxLayout.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="flex h-screen">
+    <template v-if="!isSearchRoute">
+      <div class="w-[390px] border-r shrink-0 overflow-y-auto">
+        <ConversationList />
+      </div>
+      <div class="grow overflow-hidden">
+        <router-view v-slot="{ Component }">
+          <keep-alive>
+            <component :is="Component" />
+          </keep-alive>
+        </router-view>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import ConversationList from '@/features/conversation/list/ConversationList.vue'
+
+const route = useRoute()
+const isSearchRoute = computed(() => route.name === 'search')
+</script>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index e5876ff4..52c84cfb 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,14 +1,16 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import App from '../App.vue'
 import OuterApp from '../OuterApp.vue'
-import DashboardView from '../views/DashboardView.vue'
-import ConversationsView from '../views/ConversationView.vue'
-import SearchView from '../views/SearchView.vue'
-import UserLoginView from '../views/UserLoginView.vue'
-import AccountView from '@/views/AccountView.vue'
-import AdminView from '@/views/AdminView.vue'
-import ResetPasswordView from '@/views/ResetPasswordView.vue'
-import SetPasswordView from '@/views/SetPasswordView.vue'
+import DashboardView from '../views/reports/DashboardView.vue'
+import InboxLayout from '../layouts/inbox/InboxLayout.vue'
+import SearchView from '../views/search/SearchView.vue'
+import UserLoginView from '../views/login/UserLoginView.vue'
+import AccountLayout from '@/layouts/account/AccountLayout.vue'
+import AdminLayout from '@/layouts/admin/AdminLayout.vue'
+import ResetPasswordView from '@/views/outerapp/ResetPasswordView.vue'
+import SetPasswordView from '@/views/outerapp/SetPasswordView.vue'
+import InboxView from '@/views/inbox/InboxView.vue'
+import ConversationDetailView from '@/views/conversation/ConversationDetailView.vue'
 
 const routes = [
   {
@@ -53,22 +55,70 @@ const routes = [
         ]
       },
       {
-        path: '/inboxes',
+        path: '/inboxes/teams/:teamID',
+        name: 'teams',
+        props: true,
+        component: InboxLayout,
+        meta: { title: 'Team inbox', hidePageHeader: true },
+        children: [
+          {
+            path: '',
+            name: 'team-inbox',
+            component: InboxView,
+            props: true,
+            meta: { title: 'Team inbox' }
+          },
+          {
+            path: 'conversation/:uuid',
+            name: 'team-inbox-conversation',
+            component: ConversationDetailView,
+            props: true,
+            meta: { title: 'Team inbox', hidePageHeader: true }
+          }
+        ]
+      },
+      {
+        path: '/inboxes/views/:viewID',
+        name: 'views',
+        props: true,
+        component: InboxLayout,
+        meta: { title: 'View inbox', hidePageHeader: true },
+        children: [
+          {
+            path: '',
+            name: 'view-inbox',
+            component: InboxView,
+            props: true,
+            meta: { title: 'View inbox' }
+          },
+          {
+            path: 'conversation/:uuid',
+            name: 'view-inbox-conversation',
+            component: ConversationDetailView,
+            props: true,
+            meta: { title: 'View inbox', hidePageHeader: true }
+          }
+        ]
+      },
+      {
+        path: 'inboxes/search',
+        name: 'search',
+        component: SearchView,
+        meta: { title: 'Search', hidePageHeader: true },
+      },
+      {
+        path: '/inboxes/:type(assigned|unassigned|all)?',
         name: 'inboxes',
         redirect: '/inboxes/assigned',
+        component: InboxLayout,
+        props: true,
         meta: { title: 'Inbox', hidePageHeader: true },
         children: [
           {
-            path: 'search',
-            name: 'search',
-            component: SearchView,
-            meta: { title: 'Search', hidePageHeader: true },
-          },
-          {
-            path: ':type(assigned|unassigned|all)',
+            path: '',
             name: 'inbox',
-            component: ConversationsView,
-            props: route => ({ type: route.params.type, uuid: route.params.uuid }),
+            component: InboxView,
+            props: true,
             meta: {
               title: 'Inbox',
               type: route => route.params.type === 'assigned' ? 'My inbox' : route.params.type
@@ -77,159 +127,113 @@ const routes = [
               {
                 path: 'conversation/:uuid',
                 name: 'inbox-conversation',
-                component: ConversationsView,
+                component: ConversationDetailView,
                 props: true,
                 meta: {
                   title: 'Inbox',
                   type: route => route.params.type === 'assigned' ? 'My inbox' : route.params.type,
                   hidePageHeader: true
                 }
-              }
+              },
             ]
-          }
-        ]
-      },
-      {
-        path: '/teams',
-        name: 'teams',
-        redirect: '/teams/:teamID',
-        meta: { title: 'Team inbox', hidePageHeader: true },
-        children: [
-          {
-            path: ':teamID',
-            name: 'team-inbox',
-            props: true,
-            component: ConversationsView,
-            meta: { title: `Team inbox` },
-            children: [
-              {
-                path: 'conversation/:uuid',
-                name: 'team-inbox-conversation',
-                component: ConversationsView,
-                props: true,
-                meta: { title: 'Team inbox', hidePageHeader: true }
-              }
-            ]
-          }
-        ]
-      },
-      {
-        path: '/views',
-        name: 'views',
-        redirect: '/views/:viewID',
-        meta: { title: 'View', hidePageHeader: true },
-        children: [
-          {
-            path: ':viewID',
-            name: 'view-inbox',
-            props: true,
-            component: ConversationsView,
-            meta: { title: `Views` },
-            children: [
-              {
-                path: 'conversation/:uuid',
-                name: 'view-inbox-conversation',
-                component: ConversationsView,
-                props: true,
-                meta: { title: 'Views', hidePageHeader: true }
-              }
-            ]
-          }
+          },
         ]
       },
       {
         path: '/account/:page?',
         name: 'account',
-        component: AccountView,
+        redirect: '/account/profile',
+        component: AccountLayout,
         props: true,
         meta: { title: 'Account' },
-        beforeEnter: (to, from, next) => {
-          if (!to.params.page) {
-            next({ ...to, params: { ...to.params, page: 'profile' } })
-          } else {
-            next()
+        children: [
+          {
+            path: 'profile',
+            name: 'profile',
+            component: () => import('@/views/account/profile/ProfileEditView.vue'),
+            meta: { title: 'Edit Profile' }
           }
-        }
+        ]
       },
       {
         path: '/admin',
         name: 'admin',
         redirect: '/admin/general',
-        component: AdminView,
+        component: AdminLayout,
         meta: { title: 'Admin' },
         children: [
           {
             path: 'business-hours',
-            component: () => import('@/components/admin/business_hours/BusinessHours.vue'),
+            component: () => import('@/views/admin/business-hours/BusinessHours.vue'),
             meta: { title: 'Business Hours' },
             children: [
               {
                 path: '',
-                component: () => import('@/components/admin/business_hours/BusinessHoursList.vue'),
+                component: () => import('@/views/admin/business-hours/BusinessHoursList.vue'),
               },
               {
                 path: 'new',
-                component: () => import('@/components/admin/business_hours/CreateOrEditBusinessHours.vue'),
+                component: () => import('@/views/admin/business-hours/CreateOrEditBusinessHours.vue'),
                 meta: { title: 'New Business Hours' }
               },
               {
                 path: ':id/edit',
                 name: 'edit-business-hours',
                 props: true,
-                component: () => import('@/components/admin/business_hours/CreateOrEditBusinessHours.vue'),
+                component: () => import('@/views/admin/business-hours/CreateOrEditBusinessHours.vue'),
                 meta: { title: 'Edit Business Hours' }
               },
             ]
           },
           {
             path: 'sla',
-            component: () => import('@/components/admin/sla/SLA.vue'),
+            component: () => import('@/views/admin/sla/SLA.vue'),
             meta: { title: 'SLA' },
             children: [
               {
                 path: '',
-                component: () => import('@/components/admin/sla/SLAList.vue'),
+                component: () => import('@/views/admin/sla/SLAList.vue'),
               },
               {
                 path: 'new',
-                component: () => import('@/components/admin/sla/CreateEditSLA.vue'),
+                component: () => import('@/views/admin/sla/CreateEditSLA.vue'),
                 meta: { title: 'New SLA' }
               },
               {
                 path: ':id/edit',
                 props: true,
-                component: () => import('@/components/admin/sla/CreateEditSLA.vue'),
+                component: () => import('@/views/admin/sla/CreateEditSLA.vue'),
                 meta: { title: 'Edit SLA' }
               },
             ]
           },
           {
             path: 'inboxes',
-            component: () => import('@/components/admin/inbox/Inbox.vue'),
+            component: () => import('@/views/admin/inbox/InboxView.vue'),
             meta: { title: 'Inboxes' },
             children: [
               {
                 path: '',
-                component: () => import('@/components/admin/inbox/InboxList.vue'),
+                component: () => import('@/views/admin/inbox/InboxList.vue'),
               },
               {
                 path: 'new',
                 name: 'new-inbox',
-                component: () => import('@/components/admin/inbox/NewInbox.vue'),
+                component: () => import('@/views/admin/inbox/NewInbox.vue'),
                 meta: { title: 'New Inbox' }
               },
               {
                 path: ':id/edit',
                 props: true,
                 name: 'edit-inbox',
-                component: () => import('@/components/admin/inbox/EditInbox.vue'),
+                component: () => import('@/views/admin/inbox/EditInbox.vue'),
                 meta: { title: 'Edit Inbox' }
               },
             ],
           },
           {
             path: 'notification',
-            component: () => import('@/components/admin/notification/NotificationSetting.vue'),
+            component: () => import('@/features/admin/notification/NotificationSetting.vue'),
             meta: { title: 'Notification Settings' }
           },
           {
@@ -238,67 +242,67 @@ const routes = [
             children: [
               {
                 path: 'users',
-                component: () => import('@/components/admin/team/users/Users.vue'),
+                component: () => import('@/views/admin/users/Users.vue'),
                 meta: { title: 'Users' },
                 children: [
                   {
                     path: '',
-                    component: () => import('@/components/admin/team/users/UserList.vue'),
+                    component: () => import('@/views/admin/users/UserList.vue'),
                   },
                   {
                     path: 'new',
                     name: 'new-user',
-                    component: () => import('@/components/admin/team/users/CreateUser.vue'),
+                    component: () => import('@/views/admin/users/CreateUser.vue'),
                     meta: { title: 'Create User' }
                   },
                   {
                     path: ':id/edit',
                     props: true,
-                    component: () => import('@/components/admin/team/users/EditForm.vue'),
+                    component: () => import('@/views/admin/users/EditUser.vue'),
                     meta: { title: 'Edit User' }
                   },
                 ]
               },
               {
                 path: 'teams',
-                component: () => import('@/components/admin/team/teams/Teams.vue'),
+                component: () => import('@/views/admin/teams/Teams.vue'),
                 meta: { title: 'Teams' },
                 children: [
                   {
                     path: '',
-                    component: () => import('@/components/admin/team/teams/TeamList.vue'),
+                    component: () => import('@/views/admin/teams/TeamList.vue'),
                   },
                   {
                     path: 'new',
-                    component: () => import('@/components/admin/team/teams/CreateTeamForm.vue'),
+                    component: () => import('@/views/admin/teams/CreateTeamForm.vue'),
                     meta: { title: 'Create Team' }
                   },
                   {
                     path: ':id/edit',
                     props: true,
-                    component: () => import('@/components/admin/team/teams/EditTeamForm.vue'),
+                    component: () => import('@/views/admin/teams/EditTeamForm.vue'),
                     meta: { title: 'Edit Team' }
                   },
                 ]
               },
               {
                 path: 'roles',
-                component: () => import('@/components/admin/team/roles/Roles.vue'),
+                component: () => import('@/views/admin/roles/Roles.vue'),
                 meta: { title: 'Roles' },
                 children: [
                   {
                     path: '',
-                    component: () => import('@/components/admin/team/roles/RoleList.vue'),
+                    component: () => import('@/views/admin/roles/RoleList.vue'),
                   },
                   {
                     path: 'new',
-                    component: () => import('@/components/admin/team/roles/NewRole.vue'),
+                    component: () => import('@/views/admin/roles/NewRole.vue'),
                     meta: { title: 'Create Role' }
                   },
                   {
                     path: ':id/edit',
                     props: true,
-                    component: () => import('@/components/admin/team/roles/EditRole.vue'),
+                    component: () => import('@/views/admin/roles/EditRole.vue'),
                     meta: { title: 'Edit Role' }
                   }
                 ]
@@ -307,67 +311,67 @@ const routes = [
           },
           {
             path: 'automations',
-            component: () => import('@/components/admin/automation/Automation.vue'),
+            component: () => import('@/views/admin/automations/Automation.vue'),
             meta: { title: 'Automations' },
             children: [
               {
                 path: 'new',
                 props: true,
-                component: () => import('@/components/admin/automation/CreateOrEditRule.vue'),
+                component: () => import('@/views/admin/automations/CreateOrEditRule.vue'),
                 meta: { title: 'Create Automation' }
               },
               {
                 path: ':id/edit',
                 props: true,
-                component: () => import('@/components/admin/automation/CreateOrEditRule.vue'),
+                component: () => import('@/views/admin/automations/CreateOrEditRule.vue'),
                 meta: { title: 'Edit Automation' }
               }
             ]
           },
           {
             path: 'general',
-            component: () => import('@/components/admin/general/General.vue'),
+            component: () => import('@/views/admin/general/General.vue'),
             meta: { title: 'General' }
           },
           {
             path: 'templates',
-            component: () => import('@/components/admin/templates/Templates.vue'),
+            component: () => import('@/views/admin/templates/Templates.vue'),
             meta: { title: 'Templates' },
             children: [
               {
                 path: ':id/edit',
                 name: 'edit-template',
                 props: true,
-                component: () => import('@/components/admin/templates/CreateEditTemplate.vue'),
+                component: () => import('@/views/admin/templates/CreateEditTemplate.vue'),
                 meta: { title: 'Edit Template' }
               },
               {
                 path: 'new',
                 name: 'new-template',
                 props: true,
-                component: () => import('@/components/admin/templates/CreateEditTemplate.vue'),
+                component: () => import('@/views/admin/templates/CreateEditTemplate.vue'),
                 meta: { title: 'New Template' }
               }
             ]
           },
           {
             path: 'oidc',
-            component: () => import('@/components/admin/oidc/OIDC.vue'),
+            component: () => import('@/views/admin/oidc/OIDC.vue'),
             meta: { title: 'OIDC' },
             children: [
               {
                 path: '',
-                component: () => import('@/components/admin/oidc/OIDCList.vue'),
+                component: () => import('@/views/admin/oidc/OIDCList.vue'),
               },
               {
                 path: ':id/edit',
                 props: true,
-                component: () => import('@/components/admin/oidc/CreateEditOIDC.vue'),
+                component: () => import('@/views/admin/oidc/CreateEditOIDC.vue'),
                 meta: { title: 'Edit OIDC' }
               },
               {
                 path: 'new',
-                component: () => import('@/components/admin/oidc/CreateEditOIDC.vue'),
+                component: () => import('@/views/admin/oidc/CreateEditOIDC.vue'),
                 meta: { title: 'New OIDC' }
               }
             ]
@@ -378,34 +382,34 @@ const routes = [
             children: [
               {
                 path: 'tags',
-                component: () => import('@/components/admin/conversation/tags/Tags.vue'),
+                component: () => import('@/views/admin/tags/TagsView.vue'),
                 meta: { title: 'Tags' }
               },
               {
                 path: 'statuses',
-                component: () => import('@/components/admin/conversation/status/Status.vue'),
+                component: () => import('@/views/admin/status/StatusView.vue'),
                 meta: { title: 'Statuses' }
               },
               {
                 path: 'Macros',
-                component: () => import('@/components/admin/conversation/macros/Macros.vue'),
+                component: () => import('@/views/admin/macros/Macros.vue'),
                 meta: { title: 'Macros' },
                 children: [
                   {
                     path: '',
-                    component: () => import('@/components/admin/conversation/macros/MacroList.vue'),
+                    component: () => import('@/views/admin/macros/MacroList.vue'),
                   },
                   {
                     path: 'new',
                     name: 'new-macro',
-                    component: () => import('@/components/admin/conversation/macros/CreateMacro.vue'),
+                    component: () => import('@/views/admin/macros/CreateMacro.vue'),
                     meta: { title: 'Create Macro' }
                   },
                   {
                     path: ':id/edit',
                     props: true,
                     name: 'edit-macro',
-                    component: () => import('@/components/admin/conversation/macros/EditMacro.vue'),
+                    component: () => import('@/views/admin/macros/EditMacro.vue'),
                     meta: { title: 'Edit Macro' }
                   },
                 ]
diff --git a/frontend/src/stores/conversation.js b/frontend/src/stores/conversation.js
index 1e061820..564ee6bd 100644
--- a/frontend/src/stores/conversation.js
+++ b/frontend/src/stores/conversation.js
@@ -127,7 +127,6 @@ export const useConversationStore = defineStore('conversation', () => {
   }
 
   function setListStatus (status, fetch = true) {
-    if (conversations.status === status) return
     conversations.status = status
     if (fetch) {
       resetConversations()
@@ -346,6 +345,9 @@ export const useConversationStore = defineStore('conversation', () => {
     if (conversations.listType !== listType || conversations.teamID !== teamID || conversations.viewID !== viewID) {
       resetConversations()
     }
+    if (conversations.listType !== listType) {
+      resetCurrentConversation()
+    }
     if (listType) conversations.listType = listType
     if (teamID) conversations.teamID = teamID
     if (viewID) conversations.viewID = viewID
diff --git a/frontend/src/views/AccountView.vue b/frontend/src/views/AccountView.vue
deleted file mode 100644
index 5952f076..00000000
--- a/frontend/src/views/AccountView.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup>
-import Account from '@/components/account/AccountPage.vue'
-import ProfileEdit from '@/components/account/ProfileEdit.vue'
-</script>
-
-<template>
-  <Account>
-    <ProfileEdit />
-  </Account>
-</template>
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
deleted file mode 100644
index caf7feac..00000000
--- a/frontend/src/views/AdminView.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup>
-import Admin from '@/components/admin/AdminPage.vue'
-</script>
-
-<template>
-  <Admin class="page-content">
-    <main class="p-6 lg:p-8">
-      <div class="max-w-6xl mx-auto">
-        <div class="bg-white shadow-md rounded-lg overflow-hidden">
-          <div class="p-6 sm:p-8">
-            <div class="space-y-6">
-              <router-view></router-view>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  </Admin>
-</template>
diff --git a/frontend/src/views/ConversationView.vue b/frontend/src/views/ConversationView.vue
deleted file mode 100644
index d3d02f3c..00000000
--- a/frontend/src/views/ConversationView.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <div class="flex">
-    <div class="border-r w-[390px]">
-      <ConversationList />
-    </div>
-    <div class="border-r flex-1">
-      <Conversation v-if="conversationStore.current || conversationStore.conversation.loading" />
-      <ConversationPlaceholder v-else />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { watch, onUnmounted, onMounted } from 'vue'
-import ConversationList from '@/components/conversation/list/ConversationList.vue'
-import Conversation from '@/components/conversation/Conversation.vue'
-import ConversationPlaceholder from '@/components/conversation/ConversationPlaceholder.vue'
-import { useConversationStore } from '@/stores/conversation'
-import { CONVERSATION_LIST_TYPE, CONVERSATION_DEFAULT_STATUSES } from '@/constants/conversation'
-
-const props = defineProps({
-  uuid: String,
-  type: String,
-  teamID: String,
-  viewID: String
-})
-const conversationStore = useConversationStore()
-
-onMounted(() => {
-  if (props.uuid) {
-    fetchConversation(props.uuid)
-  }
-  if (props.type) {
-    conversationStore.setListStatus(CONVERSATION_DEFAULT_STATUSES.OPEN, false)
-    conversationStore.fetchConversationsList(true, props.type)
-  }
-  if (props.teamID) {
-    conversationStore.fetchConversationsList(
-      true,
-      CONVERSATION_LIST_TYPE.TEAM_UNASSIGNED,
-      props.teamID
-    )
-  }
-  if (props.viewID) {
-    conversationStore.fetchConversationsList(true, CONVERSATION_LIST_TYPE.VIEW, 0, [], props.viewID)
-  }
-})
-
-onUnmounted(() => {
-  conversationStore.resetCurrentConversation()
-  conversationStore.resetMessages()
-})
-
-// Fetch conversation for a specific UUID.
-watch(
-  () => props.uuid,
-  (newUUID, oldUUID) => {
-    if (newUUID !== oldUUID && newUUID) {
-      fetchConversation(newUUID)
-    }
-  }
-)
-
-// Fetch conversations for a specific type.
-watch(
-  () => props.type,
-  (newType, oldType) => {
-    if (newType !== oldType && newType) {
-      conversationStore.fetchConversationsList(true, newType)
-    }
-  }
-)
-
-// Fetch conversations for a specific team that are not assigned to any user.
-watch(
-  () => props.teamID,
-  (newTeamID, oldTeamID) => {
-    if (newTeamID !== oldTeamID && newTeamID) {
-      conversationStore.fetchConversationsList(
-        true,
-        CONVERSATION_LIST_TYPE.TEAM_UNASSIGNED,
-        newTeamID
-      )
-    }
-  }
-)
-
-watch(
-  () => props.viewID,
-  (newViewID, oldViewID) => {
-    if (newViewID !== oldViewID && newViewID) {
-      conversationStore.fetchConversationsList(true, CONVERSATION_LIST_TYPE.VIEW, 0, [], newViewID)
-    }
-  }
-)
-
-const fetchConversation = async (uuid) => {
-  await conversationStore.fetchConversation(uuid)
-  await conversationStore.fetchMessages(uuid)
-  await Promise.all([
-    conversationStore.fetchParticipants(uuid),
-    conversationStore.updateAssigneeLastSeen(uuid)
-  ])
-}
-</script>
diff --git a/frontend/src/components/account/ProfileEdit.vue b/frontend/src/views/account/profile/ProfileEditView.vue
similarity index 100%
rename from frontend/src/components/account/ProfileEdit.vue
rename to frontend/src/views/account/profile/ProfileEditView.vue
diff --git a/frontend/src/components/admin/automation/Automation.vue b/frontend/src/views/admin/automations/Automation.vue
similarity index 100%
rename from frontend/src/components/admin/automation/Automation.vue
rename to frontend/src/views/admin/automations/Automation.vue
diff --git a/frontend/src/components/admin/automation/CreateOrEditRule.vue b/frontend/src/views/admin/automations/CreateOrEditRule.vue
similarity index 98%
rename from frontend/src/components/admin/automation/CreateOrEditRule.vue
rename to frontend/src/views/admin/automations/CreateOrEditRule.vue
index 670dc823..25cc3cde 100644
--- a/frontend/src/components/admin/automation/CreateOrEditRule.vue
+++ b/frontend/src/views/admin/automations/CreateOrEditRule.vue
@@ -144,13 +144,13 @@
 import { onMounted, ref, computed } from 'vue'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
-import RuleBox from './RuleBox.vue'
-import ActionBox from './ActionBox.vue'
+import RuleBox from '@/features/admin/automation/RuleBox.vue'
+import ActionBox from '@/features/admin/automation/ActionBox.vue'
 import api from '@/api'
 import { Checkbox } from '@/components/ui/checkbox'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import { formSchema } from './formSchema.js'
+import { formSchema } from '../../../components/admin/automation/formSchema.js'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { useEmitter } from '@/composables/useEmitter'
 import { handleHTTPError } from '@/utils/http'
diff --git a/frontend/src/components/admin/business_hours/BusinessHours.vue b/frontend/src/views/admin/business-hours/BusinessHours.vue
similarity index 100%
rename from frontend/src/components/admin/business_hours/BusinessHours.vue
rename to frontend/src/views/admin/business-hours/BusinessHours.vue
diff --git a/frontend/src/components/admin/business_hours/BusinessHoursList.vue b/frontend/src/views/admin/business-hours/BusinessHoursList.vue
similarity index 90%
rename from frontend/src/components/admin/business_hours/BusinessHoursList.vue
rename to frontend/src/views/admin/business-hours/BusinessHoursList.vue
index 6165f613..1f476ebe 100644
--- a/frontend/src/components/admin/business_hours/BusinessHoursList.vue
+++ b/frontend/src/views/admin/business-hours/BusinessHoursList.vue
@@ -15,13 +15,12 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
-import DataTable from '@/components/admin/DataTable.vue'
+import DataTable from '@/components/datatable/DataTable.vue'
 import { Button } from '@/components/ui/button'
 import { useRouter } from 'vue-router'
 import { useEmitter } from '@/composables/useEmitter'
-
 import { Spinner } from '@/components/ui/spinner'
-import { columns } from '@/components/admin/business_hours/dataTableColumns.js'
+import { columns } from '@/features/admin/business-hours/dataTableColumns.js'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import api from '@/api'
 
diff --git a/frontend/src/components/admin/business_hours/CreateOrEditBusinessHours.vue b/frontend/src/views/admin/business-hours/CreateOrEditBusinessHours.vue
similarity index 96%
rename from frontend/src/components/admin/business_hours/CreateOrEditBusinessHours.vue
rename to frontend/src/views/admin/business-hours/CreateOrEditBusinessHours.vue
index f06f9342..5e6edddc 100644
--- a/frontend/src/components/admin/business_hours/CreateOrEditBusinessHours.vue
+++ b/frontend/src/views/admin/business-hours/CreateOrEditBusinessHours.vue
@@ -10,7 +10,7 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue'
 import api from '@/api'
-import BusinessHoursForm from './BusinessHoursForm.vue'
+import BusinessHoursForm from '@/features/admin/business-hours/BusinessHoursForm.vue'
 import { useRouter } from 'vue-router'
 import { Spinner } from '@/components/ui/spinner'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
diff --git a/frontend/src/components/admin/general/General.vue b/frontend/src/views/admin/general/General.vue
similarity index 91%
rename from frontend/src/components/admin/general/General.vue
rename to frontend/src/views/admin/general/General.vue
index 952f71ec..ebbafb75 100644
--- a/frontend/src/components/admin/general/General.vue
+++ b/frontend/src/views/admin/general/General.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import GeneralSettingForm from './GeneralSettingForm.vue'
+import GeneralSettingForm from '@/features/admin/general/GeneralSettingForm.vue'
 
 import api from '@/api'
 const initialValues = ref({})
diff --git a/frontend/src/components/admin/inbox/EditInbox.vue b/frontend/src/views/admin/inbox/EditInbox.vue
similarity index 97%
rename from frontend/src/components/admin/inbox/EditInbox.vue
rename to frontend/src/views/admin/inbox/EditInbox.vue
index a7b27995..64f48aea 100644
--- a/frontend/src/components/admin/inbox/EditInbox.vue
+++ b/frontend/src/views/admin/inbox/EditInbox.vue
@@ -9,7 +9,7 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import api from '@/api'
-import EmailInboxForm from '@/components/admin/inbox/EmailInboxForm.vue'
+import EmailInboxForm from '@/features/admin/inbox/EmailInboxForm.vue'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb/index.js'
 import { Spinner } from '@/components/ui/spinner'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
diff --git a/frontend/src/components/admin/inbox/InboxList.vue b/frontend/src/views/admin/inbox/InboxList.vue
similarity index 95%
rename from frontend/src/components/admin/inbox/InboxList.vue
rename to frontend/src/views/admin/inbox/InboxList.vue
index 5d007357..0583adc7 100644
--- a/frontend/src/components/admin/inbox/InboxList.vue
+++ b/frontend/src/views/admin/inbox/InboxList.vue
@@ -16,11 +16,11 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { h } from 'vue'
-import InboxDataTableDropDown from '@/components/admin/inbox/InboxDataTableDropDown.vue'
+import InboxDataTableDropDown from '@/features/admin/inbox/InboxDataTableDropDown.vue'
 import { handleHTTPError } from '@/utils/http'
 import { useToast } from '@/components/ui/toast/use-toast'
 import { Button } from '@/components/ui/button'
-import DataTable from '@/components/admin/DataTable.vue'
+import DataTable from '@/components/datatable/DataTable.vue'
 import { useRouter } from 'vue-router'
 
 import { format } from 'date-fns'
diff --git a/frontend/src/components/admin/inbox/Inbox.vue b/frontend/src/views/admin/inbox/InboxView.vue
similarity index 100%
rename from frontend/src/components/admin/inbox/Inbox.vue
rename to frontend/src/views/admin/inbox/InboxView.vue
diff --git a/frontend/src/components/admin/inbox/NewInbox.vue b/frontend/src/views/admin/inbox/NewInbox.vue
similarity index 97%
rename from frontend/src/components/admin/inbox/NewInbox.vue
rename to frontend/src/views/admin/inbox/NewInbox.vue
index 9aa0c039..5aed3500 100644
--- a/frontend/src/components/admin/inbox/NewInbox.vue
+++ b/frontend/src/views/admin/inbox/NewInbox.vue
@@ -62,7 +62,7 @@ import { Button } from '@/components/ui/button'
 import { useRouter } from 'vue-router'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb/index.js'
 import { Check, Mail } from 'lucide-vue-next'
-import MenuCard from '@/components/admin/common/MenuCard.vue'
+import MenuCard from '@/components/layout/MenuCard.vue'
 import {
   Stepper,
   StepperDescription,
@@ -70,7 +70,7 @@ import {
   StepperSeparator,
   StepperTitle
 } from '@/components/ui/stepper'
-import EmailInboxForm from '@/components/admin/inbox/EmailInboxForm.vue'
+import EmailInboxForm from '@/features/admin/inbox/EmailInboxForm.vue'
 import api from '@/api'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { useEmitter } from '@/composables/useEmitter'
diff --git a/frontend/src/components/admin/conversation/macros/CreateMacro.vue b/frontend/src/views/admin/macros/CreateMacro.vue
similarity index 94%
rename from frontend/src/components/admin/conversation/macros/CreateMacro.vue
rename to frontend/src/views/admin/macros/CreateMacro.vue
index ed57d813..2b29e922 100644
--- a/frontend/src/components/admin/conversation/macros/CreateMacro.vue
+++ b/frontend/src/views/admin/macros/CreateMacro.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import MacroForm from '@/components/admin/conversation/macros/MacroForm.vue'
+import MacroForm from '@/features/admin/macros/MacroForm.vue'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
 import { handleHTTPError } from '@/utils/http'
 import { useRouter } from 'vue-router'
diff --git a/frontend/src/components/admin/conversation/macros/EditMacro.vue b/frontend/src/views/admin/macros/EditMacro.vue
similarity index 95%
rename from frontend/src/components/admin/conversation/macros/EditMacro.vue
rename to frontend/src/views/admin/macros/EditMacro.vue
index e536bbe0..37df4777 100644
--- a/frontend/src/components/admin/conversation/macros/EditMacro.vue
+++ b/frontend/src/views/admin/macros/EditMacro.vue
@@ -12,7 +12,7 @@ import api from '@/api'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { useEmitter } from '@/composables/useEmitter'
 import { handleHTTPError } from '@/utils/http'
-import MacroForm from '@/components/admin/conversation/macros/MacroForm.vue'
+import MacroForm from '@/features/admin/macros/MacroForm.vue'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
 import { Spinner } from '@/components/ui/spinner'
 
diff --git a/frontend/src/components/admin/conversation/macros/MacroList.vue b/frontend/src/views/admin/macros/MacroList.vue
similarity index 90%
rename from frontend/src/components/admin/conversation/macros/MacroList.vue
rename to frontend/src/views/admin/macros/MacroList.vue
index 073d8ed3..d63758cf 100644
--- a/frontend/src/components/admin/conversation/macros/MacroList.vue
+++ b/frontend/src/views/admin/macros/MacroList.vue
@@ -14,8 +14,8 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
-import DataTable from '@/components/admin/DataTable.vue'
-import { columns } from './dataTableColumns.js'
+import DataTable from '@/components/datatable/DataTable.vue'
+import { columns } from '../../../features/admin/macros/dataTableColumns.js'
 import { Spinner } from '@/components/ui/spinner'
 import { useEmitter } from '@/composables/useEmitter'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
diff --git a/frontend/src/components/admin/conversation/macros/Macros.vue b/frontend/src/views/admin/macros/Macros.vue
similarity index 100%
rename from frontend/src/components/admin/conversation/macros/Macros.vue
rename to frontend/src/views/admin/macros/Macros.vue
diff --git a/frontend/src/components/admin/oidc/CreateEditOIDC.vue b/frontend/src/views/admin/oidc/CreateEditOIDC.vue
similarity index 97%
rename from frontend/src/components/admin/oidc/CreateEditOIDC.vue
rename to frontend/src/views/admin/oidc/CreateEditOIDC.vue
index 5d667fea..5221c477 100644
--- a/frontend/src/components/admin/oidc/CreateEditOIDC.vue
+++ b/frontend/src/views/admin/oidc/CreateEditOIDC.vue
@@ -15,7 +15,7 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue'
 import api from '@/api'
-import OIDCForm from './OIDCForm.vue'
+import OIDCForm from '@/features/admin/oidc/OIDCForm.vue'
 import { Spinner } from '@/components/ui/spinner'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
diff --git a/frontend/src/components/admin/oidc/OIDC.vue b/frontend/src/views/admin/oidc/OIDC.vue
similarity index 100%
rename from frontend/src/components/admin/oidc/OIDC.vue
rename to frontend/src/views/admin/oidc/OIDC.vue
diff --git a/frontend/src/components/admin/oidc/OIDCList.vue b/frontend/src/views/admin/oidc/OIDCList.vue
similarity index 90%
rename from frontend/src/components/admin/oidc/OIDCList.vue
rename to frontend/src/views/admin/oidc/OIDCList.vue
index 02faab07..5ead3b05 100644
--- a/frontend/src/components/admin/oidc/OIDCList.vue
+++ b/frontend/src/views/admin/oidc/OIDCList.vue
@@ -15,8 +15,8 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
-import DataTable from '@/components/admin/DataTable.vue'
-import { columns } from '@/components/admin/oidc/dataTableColumns.js'
+import DataTable from '@/components/datatable/DataTable.vue'
+import { columns } from '@/features/admin/oidc/dataTableColumns.js'
 import { Button } from '@/components/ui/button'
 import { useRouter } from 'vue-router'
 import { useEmitter } from '@/composables/useEmitter'
diff --git a/frontend/src/components/admin/team/roles/EditRole.vue b/frontend/src/views/admin/roles/EditRole.vue
similarity index 96%
rename from frontend/src/components/admin/team/roles/EditRole.vue
rename to frontend/src/views/admin/roles/EditRole.vue
index 7f237367..b41c4dd0 100644
--- a/frontend/src/components/admin/team/roles/EditRole.vue
+++ b/frontend/src/views/admin/roles/EditRole.vue
@@ -9,7 +9,7 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
-import RoleForm from './RoleForm.vue'
+import RoleForm from '@/features/admin/roles/RoleForm.vue'
 import { Spinner } from '@/components/ui/spinner'
 import api from '@/api'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
diff --git a/frontend/src/components/admin/team/roles/NewRole.vue b/frontend/src/views/admin/roles/NewRole.vue
similarity index 91%
rename from frontend/src/components/admin/team/roles/NewRole.vue
rename to frontend/src/views/admin/roles/NewRole.vue
index 7bc1b10a..545d2253 100644
--- a/frontend/src/components/admin/team/roles/NewRole.vue
+++ b/frontend/src/views/admin/roles/NewRole.vue
@@ -8,7 +8,7 @@
 <script setup>
 import { ref } from 'vue'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
-import RoleForm from './RoleForm.vue'
+import RoleForm from '@/features/admin/roles/RoleForm.vue'
 import api from '@/api'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { useEmitter } from '@/composables/useEmitter'
@@ -19,7 +19,6 @@ const emitter = useEmitter()
 const router = useRouter()
 const formLoading = ref(false)
 const breadcrumbLinks = [
-  
   { path: '/admin/teams/roles', label: 'Roles' },
   { path: '#', label: 'Add role' }
 ]
@@ -30,7 +29,7 @@ const submitForm = async (values) => {
     await api.createRole(values)
     emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
       title: 'Success',
-      description: "Role created successfully"
+      description: 'Role created successfully'
     })
     router.push('/admin/teams/roles')
   } catch (error) {
diff --git a/frontend/src/components/admin/team/roles/RoleList.vue b/frontend/src/views/admin/roles/RoleList.vue
similarity index 91%
rename from frontend/src/components/admin/team/roles/RoleList.vue
rename to frontend/src/views/admin/roles/RoleList.vue
index a50c9c6e..2a55b208 100644
--- a/frontend/src/components/admin/team/roles/RoleList.vue
+++ b/frontend/src/views/admin/roles/RoleList.vue
@@ -12,9 +12,9 @@
 
 <script setup>
 import { onMounted, ref } from 'vue'
-import { columns } from '@/components/admin/team/roles/dataTableColumns.js'
+import { columns } from '@/features/admin/roles/dataTableColumns.js'
 import { Button } from '@/components/ui/button'
-import DataTable from '@/components/admin/DataTable.vue'
+import DataTable from '@/components/datatable/DataTable.vue'
 import { handleHTTPError } from '@/utils/http'
 import { useToast } from '@/components/ui/toast/use-toast'
 import api from '@/api'
diff --git a/frontend/src/components/admin/team/roles/Roles.vue b/frontend/src/views/admin/roles/Roles.vue
similarity index 100%
rename from frontend/src/components/admin/team/roles/Roles.vue
rename to frontend/src/views/admin/roles/Roles.vue
diff --git a/frontend/src/components/admin/sla/CreateEditSLA.vue b/frontend/src/views/admin/sla/CreateEditSLA.vue
similarity index 97%
rename from frontend/src/components/admin/sla/CreateEditSLA.vue
rename to frontend/src/views/admin/sla/CreateEditSLA.vue
index cc165264..b7bb6f82 100644
--- a/frontend/src/components/admin/sla/CreateEditSLA.vue
+++ b/frontend/src/views/admin/sla/CreateEditSLA.vue
@@ -10,7 +10,7 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue'
 import api from '@/api'
-import SLAForm from './SLAForm.vue'
+import SLAForm from '@/features/admin/sla/SLAForm.vue'
 import { useRouter } from 'vue-router'
 import { Spinner } from '@/components/ui/spinner'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
diff --git a/frontend/src/components/admin/sla/SLA.vue b/frontend/src/views/admin/sla/SLA.vue
similarity index 100%
rename from frontend/src/components/admin/sla/SLA.vue
rename to frontend/src/views/admin/sla/SLA.vue
diff --git a/frontend/src/components/admin/sla/SLAList.vue b/frontend/src/views/admin/sla/SLAList.vue
similarity index 90%
rename from frontend/src/components/admin/sla/SLAList.vue
rename to frontend/src/views/admin/sla/SLAList.vue
index 90b913fa..fcf26b47 100644
--- a/frontend/src/components/admin/sla/SLAList.vue
+++ b/frontend/src/views/admin/sla/SLAList.vue
@@ -15,8 +15,8 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
-import DataTable from '@/components/admin/DataTable.vue'
-import { columns } from './dataTableColumns.js'
+import DataTable from '@/components/datatable/DataTable.vue'
+import { columns } from '../../../features/admin/sla/dataTableColumns.js'
 import { Button } from '@/components/ui/button'
 import { useRouter } from 'vue-router'
 import { useEmitter } from '@/composables/useEmitter'
diff --git a/frontend/src/components/admin/conversation/status/Status.vue b/frontend/src/views/admin/status/StatusView.vue
similarity index 89%
rename from frontend/src/components/admin/conversation/status/Status.vue
rename to frontend/src/views/admin/status/StatusView.vue
index 1418bc21..e0888855 100644
--- a/frontend/src/components/admin/conversation/status/Status.vue
+++ b/frontend/src/views/admin/status/StatusView.vue
@@ -29,12 +29,12 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import DataTable from '@/components/admin/DataTable.vue'
-import { columns } from './dataTableColumns.js'
+import DataTable from '@/components/datatable/DataTable.vue'
+import { columns } from '../../../features/admin/status/dataTableColumns.js'
 import { Button } from '@/components/ui/button'
 
 import { Spinner } from '@/components/ui/spinner'
-import StatusForm from './StatusForm.vue'
+import StatusForm from '@/features/admin/status/StatusForm.vue'
 import {
   Dialog,
   DialogContent,
@@ -46,7 +46,7 @@ import {
 } from '@/components/ui/dialog'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import { formSchema } from './formSchema.js'
+import { formSchema } from '../../../features/admin/status/formSchema.js'
 import { useEmitter } from '@/composables/useEmitter'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import api from '@/api'
diff --git a/frontend/src/components/admin/conversation/tags/Tags.vue b/frontend/src/views/admin/tags/TagsView.vue
similarity index 89%
rename from frontend/src/components/admin/conversation/tags/Tags.vue
rename to frontend/src/views/admin/tags/TagsView.vue
index e6484337..1b7df13d 100644
--- a/frontend/src/components/admin/conversation/tags/Tags.vue
+++ b/frontend/src/views/admin/tags/TagsView.vue
@@ -29,12 +29,12 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import DataTable from '@/components/admin/DataTable.vue'
+import DataTable from '@/components/datatable/DataTable.vue'
 import { Spinner } from '@/components/ui/spinner'
-import { columns } from '@/components/admin/conversation/tags/dataTableColumns.js'
+import { columns } from '@/features/admin/tags/dataTableColumns.js'
 import { Button } from '@/components/ui/button'
 
-import TagsForm from './TagsForm.vue'
+import TagsForm from '@/features/admin/tags/TagsForm.vue'
 import {
   Dialog,
   DialogContent,
@@ -46,7 +46,7 @@ import {
 } from '@/components/ui/dialog'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import { formSchema } from './formSchema.js'
+import { formSchema } from '../../../features/admin/tags/formSchema.js'
 import { useEmitter } from '@/composables/useEmitter'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import api from '@/api'
diff --git a/frontend/src/components/admin/team/teams/CreateTeamForm.vue b/frontend/src/views/admin/teams/CreateTeamForm.vue
similarity index 95%
rename from frontend/src/components/admin/team/teams/CreateTeamForm.vue
rename to frontend/src/views/admin/teams/CreateTeamForm.vue
index 5a1761f1..874e993f 100644
--- a/frontend/src/components/admin/team/teams/CreateTeamForm.vue
+++ b/frontend/src/views/admin/teams/CreateTeamForm.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import TeamForm from '@/components/admin/team/teams/TeamForm.vue'
+import TeamForm from '@/features/admin/teams/TeamForm.vue'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { useEmitter } from '@/composables/useEmitter'
 import { handleHTTPError } from '@/utils/http'
diff --git a/frontend/src/components/admin/team/teams/EditTeamForm.vue b/frontend/src/views/admin/teams/EditTeamForm.vue
similarity index 96%
rename from frontend/src/components/admin/team/teams/EditTeamForm.vue
rename to frontend/src/views/admin/teams/EditTeamForm.vue
index fdee0c2b..fb1c3b35 100644
--- a/frontend/src/components/admin/team/teams/EditTeamForm.vue
+++ b/frontend/src/views/admin/teams/EditTeamForm.vue
@@ -9,7 +9,7 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import api from '@/api'
-import TeamForm from '@/components/admin/team/teams/TeamForm.vue'
+import TeamForm from '@/features/admin/teams/TeamForm.vue'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { useEmitter } from '@/composables/useEmitter'
diff --git a/frontend/src/components/admin/team/teams/TeamList.vue b/frontend/src/views/admin/teams/TeamList.vue
similarity index 92%
rename from frontend/src/components/admin/team/teams/TeamList.vue
rename to frontend/src/views/admin/teams/TeamList.vue
index b2ba455f..6774cb11 100644
--- a/frontend/src/components/admin/team/teams/TeamList.vue
+++ b/frontend/src/views/admin/teams/TeamList.vue
@@ -15,10 +15,10 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import { handleHTTPError } from '@/utils/http'
-import { columns } from '@/components/admin/team/teams/TeamsDataTableColumns.js'
+import { columns } from '@/features/admin/teams/TeamsDataTableColumns.js'
 import { useToast } from '@/components/ui/toast/use-toast'
 import { Button } from '@/components/ui/button'
-import DataTable from '@/components/admin/DataTable.vue'
+import DataTable from '@/components/datatable/DataTable.vue'
 import api from '@/api'
 
 import { useRouter } from 'vue-router'
diff --git a/frontend/src/components/admin/team/teams/Teams.vue b/frontend/src/views/admin/teams/Teams.vue
similarity index 100%
rename from frontend/src/components/admin/team/teams/Teams.vue
rename to frontend/src/views/admin/teams/Teams.vue
diff --git a/frontend/src/components/admin/templates/CreateEditTemplate.vue b/frontend/src/views/admin/templates/CreateEditTemplate.vue
similarity index 97%
rename from frontend/src/components/admin/templates/CreateEditTemplate.vue
rename to frontend/src/views/admin/templates/CreateEditTemplate.vue
index 57410cad..4822d622 100644
--- a/frontend/src/components/admin/templates/CreateEditTemplate.vue
+++ b/frontend/src/views/admin/templates/CreateEditTemplate.vue
@@ -14,7 +14,7 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import api from '@/api'
-import TemplateForm from './TemplateForm.vue'
+import TemplateForm from '@/features/admin/templates/TemplateForm.vue'
 import { useRouter, useRoute } from 'vue-router'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
 import { Spinner } from '@/components/ui/spinner'
diff --git a/frontend/src/components/admin/templates/Templates.vue b/frontend/src/views/admin/templates/Templates.vue
similarity index 95%
rename from frontend/src/components/admin/templates/Templates.vue
rename to frontend/src/views/admin/templates/Templates.vue
index 00833116..37c68826 100644
--- a/frontend/src/components/admin/templates/Templates.vue
+++ b/frontend/src/views/admin/templates/Templates.vue
@@ -31,11 +31,11 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted, watch } from 'vue'
-import DataTable from '@/components/admin/DataTable.vue'
+import DataTable from '@/components/datatable/DataTable.vue'
 import {
   emailNotificationTemplates,
   outgoingEmailTemplatesColumns
-} from '@/components/admin/templates/dataTableColumns.js'
+} from '@/features/admin/templates/dataTableColumns.js'
 import { Button } from '@/components/ui/button'
 
 import { useRouter } from 'vue-router'
diff --git a/frontend/src/components/admin/team/users/CreateUser.vue b/frontend/src/views/admin/users/CreateUser.vue
similarity index 95%
rename from frontend/src/components/admin/team/users/CreateUser.vue
rename to frontend/src/views/admin/users/CreateUser.vue
index ae22e8e9..75366a69 100644
--- a/frontend/src/components/admin/team/users/CreateUser.vue
+++ b/frontend/src/views/admin/users/CreateUser.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import UserForm from '@/components/admin/team/users/UserForm.vue'
+import UserForm from '@/features/admin/users/UserForm.vue'
 import { handleHTTPError } from '@/utils/http'
 import { useToast } from '@/components/ui/toast/use-toast'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
diff --git a/frontend/src/components/admin/team/users/EditForm.vue b/frontend/src/views/admin/users/EditUser.vue
similarity index 96%
rename from frontend/src/components/admin/team/users/EditForm.vue
rename to frontend/src/views/admin/users/EditUser.vue
index 5e654928..33517e76 100644
--- a/frontend/src/components/admin/team/users/EditForm.vue
+++ b/frontend/src/views/admin/users/EditUser.vue
@@ -12,7 +12,7 @@ import api from '@/api'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { useEmitter } from '@/composables/useEmitter'
 import { handleHTTPError } from '@/utils/http'
-import UserForm from '@/components/admin/team/users/UserForm.vue'
+import UserForm from '@/features/admin/users/UserForm.vue'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
 import { Spinner } from '@/components/ui/spinner'
 
diff --git a/frontend/src/components/admin/team/users/UserList.vue b/frontend/src/views/admin/users/UserList.vue
similarity index 90%
rename from frontend/src/components/admin/team/users/UserList.vue
rename to frontend/src/views/admin/users/UserList.vue
index a4f79a24..011f4ff2 100644
--- a/frontend/src/components/admin/team/users/UserList.vue
+++ b/frontend/src/views/admin/users/UserList.vue
@@ -14,9 +14,9 @@
 
 <script setup>
 import { onMounted, ref } from 'vue'
-import { columns } from '@/components/admin/team/users/dataTableColumns.js'
+import { columns } from '@/features/admin/users/dataTableColumns.js'
 import { Button } from '@/components/ui/button'
-import DataTable from '@/components/admin/DataTable.vue'
+import DataTable from '@/components/datatable/DataTable.vue'
 import { handleHTTPError } from '@/utils/http'
 import { useToast } from '@/components/ui/toast/use-toast'
 import { useEmitter } from '@/composables/useEmitter'
diff --git a/frontend/src/components/admin/team/users/Users.vue b/frontend/src/views/admin/users/Users.vue
similarity index 100%
rename from frontend/src/components/admin/team/users/Users.vue
rename to frontend/src/views/admin/users/Users.vue
diff --git a/frontend/src/views/conversation/ConversationDetailView.vue b/frontend/src/views/conversation/ConversationDetailView.vue
new file mode 100644
index 00000000..407e9917
--- /dev/null
+++ b/frontend/src/views/conversation/ConversationDetailView.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="flex">
+    <div class="grow">
+      <Conversation v-if="conversationStore.messages.data" />
+    </div>
+    <div class="grow-0">
+      <ConversationSideBarWrapper
+        v-if="conversationStore.current || conversationStore.conversation.loading"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watch, onMounted } from 'vue'
+import { useConversationStore } from '@/stores/conversation'
+import Conversation from '@/features/conversation/Conversation.vue'
+import ConversationSideBarWrapper from '@/features/conversation/sidebar/ConversationSideBarWrapper.vue'
+
+const props = defineProps({
+  uuid: String
+})
+
+const conversationStore = useConversationStore()
+
+const fetchConversation = async (uuid) => {
+  await conversationStore.fetchConversation(uuid)
+  await conversationStore.fetchMessages(uuid)
+  await Promise.all([
+    conversationStore.fetchParticipants(uuid),
+    conversationStore.updateAssigneeLastSeen(uuid)
+  ])
+}
+
+// Initial fetch
+onMounted(() => {
+  if (props.uuid) fetchConversation(props.uuid)
+})
+
+// Watcher for UUID changes
+watch(
+  () => props.uuid,
+  (newUUID, oldUUID) => {
+    if (newUUID && newUUID !== oldUUID) {
+      fetchConversation(newUUID)
+    }
+  }
+)
+</script>
diff --git a/frontend/src/views/inbox/InboxView.vue b/frontend/src/views/inbox/InboxView.vue
new file mode 100644
index 00000000..7929261c
--- /dev/null
+++ b/frontend/src/views/inbox/InboxView.vue
@@ -0,0 +1,63 @@
+<template>
+  <ConversationPlaceholder v-if="!conversationStore.current" />
+  <router-view />
+</template>
+
+<script setup>
+import { computed, watch, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useConversationStore } from '@/stores/conversation'
+import { CONVERSATION_LIST_TYPE, CONVERSATION_DEFAULT_STATUSES } from '@/constants/conversation'
+import ConversationPlaceholder from '@/features/conversation/ConversationPlaceholder.vue'
+
+const route = useRoute()
+const type = computed(() => route.params.type)
+const teamID = computed(() => route.params.teamID)
+const viewID = computed(() => route.params.viewID)
+
+const conversationStore = useConversationStore()
+
+// Init conversations list based on route params
+onMounted(() => {
+  // Fetch list based on type
+  if (type.value) {
+    conversationStore.setListStatus(CONVERSATION_DEFAULT_STATUSES.OPEN, false)
+    conversationStore.resetCurrentConversation()
+    conversationStore.fetchConversationsList(true, type.value)
+  }
+  // Fetch team list.
+  if (teamID.value) {
+    conversationStore.resetCurrentConversation()
+    conversationStore.fetchConversationsList(
+      true,
+      CONVERSATION_LIST_TYPE.TEAM_UNASSIGNED,
+      teamID.value
+    )
+  }
+  // Fetch view list.
+  if (viewID.value) {
+    conversationStore.resetCurrentConversation()
+    conversationStore.fetchConversationsList(true, CONVERSATION_LIST_TYPE.VIEW, 0, [], viewID.value)
+  }
+})
+
+// Refetch when route params change
+watch(
+  [type, teamID, viewID],
+  ([newType, newTeamID, newViewID], [oldType, oldTeamID, oldViewID]) => {
+    if (newType !== oldType && newType) {
+      conversationStore.fetchConversationsList(true, newType)
+    }
+    if (newTeamID !== oldTeamID && newTeamID) {
+      conversationStore.fetchConversationsList(
+        true,
+        CONVERSATION_LIST_TYPE.TEAM_UNASSIGNED,
+        newTeamID
+      )
+    }
+    if (newViewID !== oldViewID && newViewID) {
+      conversationStore.fetchConversationsList(true, CONVERSATION_LIST_TYPE.VIEW, 0, [], newViewID)
+    }
+  }
+)
+</script>
diff --git a/frontend/src/views/UserLoginView.vue b/frontend/src/views/login/UserLoginView.vue
similarity index 95%
rename from frontend/src/views/UserLoginView.vue
rename to frontend/src/views/login/UserLoginView.vue
index e0f8dbca..0801f297 100644
--- a/frontend/src/views/UserLoginView.vue
+++ b/frontend/src/views/login/UserLoginView.vue
@@ -6,7 +6,11 @@
 
     <main class="flex-1 flex items-center justify-center p-4">
       <div class="w-full max-w-[400px]">
-        <Card class="bg-card border border-border shadow-xl rounded-xl">
+        <Card
+          class="bg-card border border-border shadow-xl rounded-xl"
+          :class="{ 'animate-shake': shakeCard }"
+          ref="cardRef"
+        >
           <CardContent class="p-8 space-y-6">
             <div class="space-y-2 text-center">
               <CardTitle class="text-3xl font-bold text-foreground">LibreDesk</CardTitle>
@@ -22,7 +26,13 @@
                 @click="redirectToOIDC(oidcProvider)"
                 class="w-full bg-card hover:bg-secondary text-foreground border-border rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
               >
-                <img :src="oidcProvider.logo_url" width="20" class="mr-2" alt="" v-if="oidcProvider.logo_url" />
+                <img
+                  :src="oidcProvider.logo_url"
+                  width="20"
+                  class="mr-2"
+                  alt=""
+                  v-if="oidcProvider.logo_url"
+                />
                 {{ oidcProvider.name }}
               </Button>
 
diff --git a/frontend/src/views/ResetPasswordView.vue b/frontend/src/views/outerapp/ResetPasswordView.vue
similarity index 100%
rename from frontend/src/views/ResetPasswordView.vue
rename to frontend/src/views/outerapp/ResetPasswordView.vue
diff --git a/frontend/src/views/SetPasswordView.vue b/frontend/src/views/outerapp/SetPasswordView.vue
similarity index 100%
rename from frontend/src/views/SetPasswordView.vue
rename to frontend/src/views/outerapp/SetPasswordView.vue
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/reports/DashboardView.vue
similarity index 90%
rename from frontend/src/views/DashboardView.vue
rename to frontend/src/views/reports/DashboardView.vue
index 86da171e..1a5f1d45 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/reports/DashboardView.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="page-content p-4">
+  <div class="page-content p-4 pr-36">
     <Spinner v-if="isLoading"></Spinner>
     <div class="space-y-4">
       <div class="text-sm text-gray-500 text-right">
         Last updated: {{ new Date(lastUpdate).toLocaleTimeString() }}
       </div>
-      <div class="mt-7 flex w-full space-x-4" v-auto-animate>
+      <div class="mt-7 flex w-full space-x-4">
         <Card title="Open conversations" :counts="cardCounts" :labels="agentCountCardsLabels" />
         <Card class="w-8/12" title="Agent status" :counts="sampleAgentStatusCounts" :labels="sampleAgentStatusLabels" />
       </div>
@@ -23,10 +23,9 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useToast } from '@/components/ui/toast/use-toast'
 import api from '@/api'
-import { vAutoAnimate } from '@formkit/auto-animate/vue'
-import Card from '@/components/dashboard/DashboardCard.vue'
-import LineChart from '@/components/dashboard/DashboardLineChart.vue'
-import BarChart from '@/components/dashboard/DashboardBarChart.vue'
+import Card from '@/features/reports/DashboardCard.vue'
+import LineChart from '@/features/reports/DashboardLineChart.vue'
+import BarChart from '@/features/reports/DashboardBarChart.vue'
 import Spinner from '@/components/ui/spinner/Spinner.vue'
 
 const { toast } = useToast()
diff --git a/frontend/src/views/SearchView.vue b/frontend/src/views/search/SearchView.vue
similarity index 96%
rename from frontend/src/views/SearchView.vue
rename to frontend/src/views/search/SearchView.vue
index 847dc41d..efd41813 100644
--- a/frontend/src/views/SearchView.vue
+++ b/frontend/src/views/search/SearchView.vue
@@ -45,8 +45,8 @@
 
 <script setup>
 import { ref, computed, watch, onBeforeUnmount } from 'vue'
-import SearchHeader from '@/components/search/SearchHeader.vue'
-import SearchResults from '@/components/search/SearchResults.vue'
+import SearchHeader from '@/features/search/SearchHeader.vue'
+import SearchResults from '@/features/search/SearchResults.vue'
 import api from '@/api'
 
 const MIN_SEARCH_LENGTH = 2