diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 240176a6..9d74ef66 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -669,38 +669,4 @@ const dealColumns = [
     width: '8rem',
   },
 ]
-</script>
-
-<style scoped>
-:deep(.form-control input),
-:deep(.form-control select),
-:deep(.form-control button) {
-  border-color: transparent;
-  background: white;
-}
-
-:deep(.form-control button) {
-  gap: 0;
-}
-
-:deep(.form-control button > div) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-:deep(.form-control button svg) {
-  color: white;
-  width: 0;
-}
-
-:deep(:has(> .dropdown-button)) {
-  width: 100%;
-}
-
-:deep(.dropdown-button > button > span) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index 43bdeae5..e965c22c 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -650,37 +650,3 @@ const dealColumns = [
   },
 ]
 </script>
-
-<style scoped>
-:deep(.form-control input),
-:deep(.form-control select),
-:deep(.form-control button) {
-  border-color: transparent;
-  background: white;
-}
-
-:deep(.form-control button) {
-  gap: 0;
-}
-
-:deep(.form-control button > div) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-:deep(.form-control button svg) {
-  color: white;
-  width: 0;
-}
-
-:deep(:has(> .dropdown-button)) {
-  width: 100%;
-}
-
-:deep(.dropdown-button > button > span) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
diff --git a/frontend/src/pages/MobileOrganization.vue b/frontend/src/pages/MobileOrganization.vue
new file mode 100644
index 00000000..7a5bbbee
--- /dev/null
+++ b/frontend/src/pages/MobileOrganization.vue
@@ -0,0 +1,563 @@
+<template>
+  <LayoutHeader v-if="organization.doc">
+    <header
+      class="relative flex h-10.5 items-center justify-between gap-2 py-2.5 pl-2"
+    >
+      <Breadcrumbs :items="breadcrumbs">
+        <template #prefix="{ item }">
+          <Icon v-if="item.icon" :icon="item.icon" class="mr-2 h-4" />
+        </template>
+      </Breadcrumbs>
+    </header>
+  </LayoutHeader>
+  <div v-if="organization.doc" class="flex flex-col h-full overflow-hidden">
+    <FileUploader
+      @success="changeOrganizationImage"
+      :validateFile="validateFile"
+    >
+      <template #default="{ openFileSelector, error }">
+        <div class="flex flex-col items-start justify-start gap-4 p-4">
+          <div class="flex gap-4 items-center">
+            <div class="group relative h-14.5 w-14.5">
+              <Avatar
+                size="3xl"
+                class="h-14.5 w-14.5"
+                :label="organization.doc.organization_name"
+                :image="organization.doc.organization_logo"
+              />
+              <component
+                :is="organization.doc.organization_logo ? Dropdown : 'div'"
+                v-bind="
+                  organization.doc.organization_logo
+                    ? {
+                        options: [
+                          {
+                            icon: 'upload',
+                            label: organization.doc.organization_logo
+                              ? __('Change image')
+                              : __('Upload image'),
+                            onClick: openFileSelector,
+                          },
+                          {
+                            icon: 'trash-2',
+                            label: __('Remove image'),
+                            onClick: () => changeOrganizationImage(''),
+                          },
+                        ],
+                      }
+                    : { onClick: openFileSelector }
+                "
+                class="!absolute bottom-0 left-0 right-0"
+              >
+                <div
+                  class="z-1 absolute bottom-0 left-0 right-0 flex h-14 cursor-pointer items-center justify-center rounded-b-full bg-black bg-opacity-40 pt-5 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
+                  style="
+                    -webkit-clip-path: inset(22px 0 0 0);
+                    clip-path: inset(22px 0 0 0);
+                  "
+                >
+                  <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
+                </div>
+              </component>
+            </div>
+            <div class="flex flex-col gap-2 truncate">
+              <div class="truncate text-lg font-medium">
+                {{ organization.doc.name }}
+              </div>
+              <div class="flex items-center gap-1.5">
+                <Button @click="openWebsite">
+                  <FeatherIcon name="link" class="h-4 w-4" />
+                </Button>
+                <Button
+                  :label="__('Delete')"
+                  theme="red"
+                  size="sm"
+                  @click="deleteOrganization"
+                >
+                  <template #prefix>
+                    <FeatherIcon name="trash-2" class="h-4 w-4" />
+                  </template>
+                </Button>
+              </div>
+              <ErrorMessage :message="__(error)" />
+            </div>
+          </div>
+        </div>
+      </template>
+    </FileUploader>
+    <Tabs
+      v-model="tabIndex"
+      :tabs="tabs"
+      tablistClass="!px-4"
+      class="overflow-auto"
+    >
+      <template #tab="{ tab, selected }">
+        <button
+          v-if="tab.name !== 'Details'"
+          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
+          :class="{ 'text-gray-900': selected }"
+        >
+          <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+          {{ __(tab.label) }}
+          <Badge
+            class="group-hover:bg-gray-900"
+            :class="[selected ? 'bg-gray-900' : 'bg-gray-600']"
+            variant="solid"
+            theme="gray"
+            size="sm"
+          >
+            {{ tab.count }}
+          </Badge>
+        </button>
+      </template>
+      <template #default="{ tab }">
+        <div v-if="tab.name == 'Details'">
+          <div
+            v-if="fieldsLayout.data"
+            class="flex flex-1 flex-col justify-between overflow-hidden"
+          >
+            <div class="flex flex-col overflow-y-auto">
+              <div
+                v-for="(section, i) in fieldsLayout.data"
+                :key="section.label"
+                class="flex flex-col px-2 py-3 sm:p-3"
+                :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
+              >
+                <Section :is-opened="section.opened" :label="section.label">
+                  <SectionFields
+                    :fields="section.fields"
+                    :isLastSection="i == fieldsLayout.data.length - 1"
+                    v-model="organization.doc"
+                    @update="updateField"
+                  />
+                </Section>
+              </div>
+            </div>
+          </div>
+        </div>
+        <DealsListView
+          class="mt-4"
+          v-if="tab.label === 'Deals' && rows.length"
+          :rows="rows"
+          :columns="columns"
+          :options="{ selectable: false, showTooltip: false }"
+        />
+        <ContactsListView
+          class="mt-4"
+          v-if="tab.label === 'Contacts' && rows.length"
+          :rows="rows"
+          :columns="columns"
+          :options="{ selectable: false, showTooltip: false }"
+        />
+        <div
+          v-if="!rows.length && tab.name !== 'Details'"
+          class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
+        >
+          <div class="flex flex-col items-center justify-center space-y-3">
+            <component :is="tab.icon" class="!h-10 !w-10" />
+            <div>{{ __('No {0} Found', [__(tab.label)]) }}</div>
+          </div>
+        </div>
+      </template>
+    </Tabs>
+  </div>
+  <AddressModal v-model="showAddressModal" v-model:address="_address" />
+</template>
+
+<script setup>
+import Section from '@/components/Section.vue'
+import SectionFields from '@/components/SectionFields.vue'
+import Icon from '@/components/Icon.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import AddressModal from '@/components/Modals/AddressModal.vue'
+import DealsListView from '@/components/ListViews/DealsListView.vue'
+import ContactsListView from '@/components/ListViews/ContactsListView.vue'
+import DetailsIcon from '@/components/Icons/DetailsIcon.vue'
+import CameraIcon from '@/components/Icons/CameraIcon.vue'
+import DealsIcon from '@/components/Icons/DealsIcon.vue'
+import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import { globalStore } from '@/stores/global'
+import { usersStore } from '@/stores/users'
+import { statusesStore } from '@/stores/statuses'
+import { getView } from '@/utils/view'
+import {
+  dateFormat,
+  dateTooltipFormat,
+  timeAgo,
+  formatNumberIntoCurrency,
+  createToast,
+} from '@/utils'
+import {
+  Breadcrumbs,
+  Avatar,
+  FileUploader,
+  Dropdown,
+  Tabs,
+  call,
+  createListResource,
+  createDocumentResource,
+  usePageMeta,
+  createResource,
+} from 'frappe-ui'
+import { h, computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const props = defineProps({
+  organizationId: {
+    type: String,
+    required: true,
+  },
+})
+
+const { getUser } = usersStore()
+const { $dialog } = globalStore()
+const { getDealStatus } = statusesStore()
+
+const route = useRoute()
+const router = useRouter()
+
+const organization = createDocumentResource({
+  doctype: 'CRM Organization',
+  name: props.organizationId,
+  cache: ['organization', props.organizationId],
+  fields: ['*'],
+  auto: true,
+})
+
+async function updateField(fieldname, value) {
+  await organization.setValue.submit({
+    [fieldname]: value,
+  })
+  createToast({
+    title: __('Organization updated'),
+    icon: 'check',
+    iconClasses: 'text-green-600',
+  })
+}
+
+const breadcrumbs = computed(() => {
+  let items = [{ label: __('Organizations'), route: { name: 'Organizations' } }]
+
+  if (route.query.view || route.query.viewType) {
+    let view = getView(
+      route.query.view,
+      route.query.viewType,
+      'CRM Organization',
+    )
+    if (view) {
+      items.push({
+        label: __(view.label),
+        icon: view.icon,
+        route: {
+          name: 'Organizations',
+          params: { viewType: route.query.viewType },
+          query: { view: route.query.view },
+        },
+      })
+    }
+  }
+
+  items.push({
+    label: props.organizationId,
+    route: {
+      name: 'Organization',
+      params: { organizationId: props.organizationId },
+    },
+  })
+  return items
+})
+
+usePageMeta(() => {
+  return {
+    title: props.organizationId,
+  }
+})
+
+function validateFile(file) {
+  let extn = file.name.split('.').pop().toLowerCase()
+  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
+    return __('Only PNG and JPG images are allowed')
+  }
+}
+
+async function changeOrganizationImage(file) {
+  await call('frappe.client.set_value', {
+    doctype: 'CRM Organization',
+    name: props.organizationId,
+    fieldname: 'organization_logo',
+    value: file?.file_url || '',
+  })
+  organization.reload()
+}
+
+async function deleteOrganization() {
+  $dialog({
+    title: __('Delete organization'),
+    message: __('Are you sure you want to delete this organization?'),
+    actions: [
+      {
+        label: __('Delete'),
+        theme: 'red',
+        variant: 'solid',
+        async onClick(close) {
+          await call('frappe.client.delete', {
+            doctype: 'CRM Organization',
+            name: props.organizationId,
+          })
+          close()
+          router.push({ name: 'Organizations' })
+        },
+      },
+    ],
+  })
+}
+
+function openWebsite() {
+  if (!organization.doc.website)
+    createToast({
+      title: __('Website not found'),
+      icon: 'x',
+      iconClasses: 'text-red-600',
+    })
+  else window.open(organization.doc.website, '_blank')
+}
+
+const showAddressModal = ref(false)
+const _organization = ref({})
+const _address = ref({})
+
+const fieldsLayout = createResource({
+  url: 'crm.api.doc.get_sidebar_fields',
+  cache: ['fieldsLayout', props.organizationId],
+  params: { doctype: 'CRM Organization', name: props.organizationId },
+  auto: true,
+  transform: (data) => getParsedFields(data),
+})
+
+function getParsedFields(data) {
+  return data.map((section) => {
+    return {
+      ...section,
+      fields: computed(() =>
+        section.fields.map((field) => {
+          if (field.name === 'address') {
+            return {
+              ...field,
+              create: (value, close) => {
+                _organization.value.address = value
+                _address.value = {}
+                showAddressModal.value = true
+                close()
+              },
+              edit: async (addr) => {
+                _address.value = await call('frappe.client.get', {
+                  doctype: 'Address',
+                  name: addr,
+                })
+                showAddressModal.value = true
+              },
+            }
+          } else {
+            return field
+          }
+        }),
+      ),
+    }
+  })
+}
+
+const tabIndex = ref(0)
+const tabs = [
+  {
+    name: 'Details',
+    label: __('Details'),
+    icon: DetailsIcon,
+  },
+  {
+    name: 'Deals',
+    label: __('Deals'),
+    icon: h(DealsIcon, { class: 'h-4 w-4' }),
+    count: computed(() => deals.data?.length),
+  },
+  {
+    name: 'Contacts',
+    label: __('Contacts'),
+    icon: h(ContactsIcon, { class: 'h-4 w-4' }),
+    count: computed(() => contacts.data?.length),
+  },
+]
+
+const deals = createListResource({
+  type: 'list',
+  doctype: 'CRM Deal',
+  cache: ['deals', props.organizationId],
+  fields: [
+    'name',
+    'organization',
+    'currency',
+    'annual_revenue',
+    'status',
+    'email',
+    'mobile_no',
+    'deal_owner',
+    'modified',
+  ],
+  filters: {
+    organization: props.organizationId,
+  },
+  orderBy: 'modified desc',
+  pageLength: 20,
+  auto: true,
+})
+
+const contacts = createListResource({
+  type: 'list',
+  doctype: 'Contact',
+  cache: ['contacts', props.organizationId],
+  fields: [
+    'name',
+    'full_name',
+    'image',
+    'email_id',
+    'mobile_no',
+    'company_name',
+    'modified',
+  ],
+  filters: {
+    company_name: props.organizationId,
+  },
+  orderBy: 'modified desc',
+  pageLength: 20,
+  auto: true,
+})
+
+const rows = computed(() => {
+  let list = []
+  list = !tabIndex.value ? deals : contacts
+
+  if (!list.data) return []
+
+  return list.data.map((row) => {
+    return !tabIndex.value ? getDealRowObject(row) : getContactRowObject(row)
+  })
+})
+
+const columns = computed(() => {
+  return tabIndex.value === 0 ? dealColumns : contactColumns
+})
+
+function getDealRowObject(deal) {
+  return {
+    name: deal.name,
+    organization: {
+      label: deal.organization,
+      logo: props.organization?.organization_logo,
+    },
+    annual_revenue: formatNumberIntoCurrency(
+      deal.annual_revenue,
+      deal.currency,
+    ),
+    status: {
+      label: deal.status,
+      color: getDealStatus(deal.status)?.iconColorClass,
+    },
+    email: deal.email,
+    mobile_no: deal.mobile_no,
+    deal_owner: {
+      label: deal.deal_owner && getUser(deal.deal_owner).full_name,
+      ...(deal.deal_owner && getUser(deal.deal_owner)),
+    },
+    modified: {
+      label: dateFormat(deal.modified, dateTooltipFormat),
+      timeAgo: __(timeAgo(deal.modified)),
+    },
+  }
+}
+
+function getContactRowObject(contact) {
+  return {
+    name: contact.name,
+    full_name: {
+      label: contact.full_name,
+      image_label: contact.full_name,
+      image: contact.image,
+    },
+    email: contact.email_id,
+    mobile_no: contact.mobile_no,
+    company_name: {
+      label: contact.company_name,
+      logo: props.organization?.organization_logo,
+    },
+    modified: {
+      label: dateFormat(contact.modified, dateTooltipFormat),
+      timeAgo: __(timeAgo(contact.modified)),
+    },
+  }
+}
+
+const dealColumns = [
+  {
+    label: __('Organization'),
+    key: 'organization',
+    width: '11rem',
+  },
+  {
+    label: __('Amount'),
+    key: 'annual_revenue',
+    width: '9rem',
+  },
+  {
+    label: __('Status'),
+    key: 'status',
+    width: '10rem',
+  },
+  {
+    label: __('Email'),
+    key: 'email',
+    width: '12rem',
+  },
+  {
+    label: __('Mobile no'),
+    key: 'mobile_no',
+    width: '11rem',
+  },
+  {
+    label: __('Deal owner'),
+    key: 'deal_owner',
+    width: '10rem',
+  },
+  {
+    label: __('Last modified'),
+    key: 'modified',
+    width: '8rem',
+  },
+]
+
+const contactColumns = [
+  {
+    label: __('Name'),
+    key: 'full_name',
+    width: '17rem',
+  },
+  {
+    label: __('Email'),
+    key: 'email',
+    width: '12rem',
+  },
+  {
+    label: __('Phone'),
+    key: 'mobile_no',
+    width: '12rem',
+  },
+  {
+    label: __('Organization'),
+    key: 'company_name',
+    width: '12rem',
+  },
+  {
+    label: __('Last modified'),
+    key: 'modified',
+    width: '8rem',
+  },
+]
+</script>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 2a51c260..a64bdd8b 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -74,7 +74,7 @@ const routes = [
   {
     path: '/organizations/:organizationId',
     name: 'Organization',
-    component: () => import('@/pages/Organization.vue'),
+    component: () => import(`@/pages/${handleMobileView('Organization')}.vue`),
     props: true,
   },
   {