diff --git a/src/components/Controls/Color.vue b/src/components/Controls/Color.vue
index 9486616d..180ed338 100644
--- a/src/components/Controls/Color.vue
+++ b/src/components/Controls/Color.vue
@@ -55,9 +55,9 @@
 </template>
 
 <script>
-import Popover from 'src/components/Popover';
-import Row from 'src/components/Row';
-import Base from './Base';
+import Popover from 'src/components/Popover.vue';
+import Row from 'src/components/Row.vue';
+import Base from './Base.vue';
 
 export default {
   name: 'Color',
diff --git a/src/components/Icons/18/check.vue b/src/components/Icons/18/check.vue
index 2d65de4b..144b0442 100644
--- a/src/components/Icons/18/check.vue
+++ b/src/components/Icons/18/check.vue
@@ -17,7 +17,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };
diff --git a/src/components/Icons/18/common-entries.vue b/src/components/Icons/18/common-entries.vue
index 7bfd7248..ae45bdce 100644
--- a/src/components/Icons/18/common-entries.vue
+++ b/src/components/Icons/18/common-entries.vue
@@ -23,7 +23,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconPurchase',
   extends: Base,
diff --git a/src/components/Icons/18/customer.vue b/src/components/Icons/18/customer.vue
index 672e0ce9..36afc8f0 100644
--- a/src/components/Icons/18/customer.vue
+++ b/src/components/Icons/18/customer.vue
@@ -9,7 +9,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };
diff --git a/src/components/Icons/18/dashboard.vue b/src/components/Icons/18/dashboard.vue
index d5cf0d74..18d9a704 100644
--- a/src/components/Icons/18/dashboard.vue
+++ b/src/components/Icons/18/dashboard.vue
@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconDashboard',
   extends: Base
diff --git a/src/components/Icons/18/fb.vue b/src/components/Icons/18/fb.vue
index 5cc6e0ae..ff2eca6b 100644
--- a/src/components/Icons/18/fb.vue
+++ b/src/components/Icons/18/fb.vue
@@ -21,7 +21,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'FB',
   extends: Base,
diff --git a/src/components/Icons/18/general.vue b/src/components/Icons/18/general.vue
index eacd6459..ba27118d 100644
--- a/src/components/Icons/18/general.vue
+++ b/src/components/Icons/18/general.vue
@@ -19,7 +19,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconGeneral',
   extends: Base,
diff --git a/src/components/Icons/18/gst.vue b/src/components/Icons/18/gst.vue
index 30774b83..c5bca066 100644
--- a/src/components/Icons/18/gst.vue
+++ b/src/components/Icons/18/gst.vue
@@ -15,7 +15,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconGST',
   extends: Base,
diff --git a/src/components/Icons/18/inventory.vue b/src/components/Icons/18/inventory.vue
index 0b42c438..4144b15c 100644
--- a/src/components/Icons/18/inventory.vue
+++ b/src/components/Icons/18/inventory.vue
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconInventory',
   extends: Base,
diff --git a/src/components/Icons/18/invoice.vue b/src/components/Icons/18/invoice.vue
index 1739a02b..f6f1495a 100644
--- a/src/components/Icons/18/invoice.vue
+++ b/src/components/Icons/18/invoice.vue
@@ -19,7 +19,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconInvoice',
   extends: Base,
diff --git a/src/components/Icons/18/item.vue b/src/components/Icons/18/item.vue
index bbd9d82b..c0962f6e 100644
--- a/src/components/Icons/18/item.vue
+++ b/src/components/Icons/18/item.vue
@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };
diff --git a/src/components/Icons/18/mail.vue b/src/components/Icons/18/mail.vue
index 9b2268ea..be371ae0 100644
--- a/src/components/Icons/18/mail.vue
+++ b/src/components/Icons/18/mail.vue
@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };
diff --git a/src/components/Icons/18/opening-ac.vue b/src/components/Icons/18/opening-ac.vue
index e5a07f5f..1f90ac54 100644
--- a/src/components/Icons/18/opening-ac.vue
+++ b/src/components/Icons/18/opening-ac.vue
@@ -7,7 +7,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };
diff --git a/src/components/Icons/18/percentage.vue b/src/components/Icons/18/percentage.vue
index 42b6cbf5..3505f33c 100644
--- a/src/components/Icons/18/percentage.vue
+++ b/src/components/Icons/18/percentage.vue
@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };
diff --git a/src/components/Icons/18/purchase-invoice.vue b/src/components/Icons/18/purchase-invoice.vue
index 8c85c494..433360e5 100644
--- a/src/components/Icons/18/purchase-invoice.vue
+++ b/src/components/Icons/18/purchase-invoice.vue
@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };
diff --git a/src/components/Icons/18/purchase.vue b/src/components/Icons/18/purchase.vue
index d1776ce8..3b4da15d 100644
--- a/src/components/Icons/18/purchase.vue
+++ b/src/components/Icons/18/purchase.vue
@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconPurchase',
   extends: Base
diff --git a/src/components/Icons/18/reports.vue b/src/components/Icons/18/reports.vue
index ebc1d44e..b265db05 100644
--- a/src/components/Icons/18/reports.vue
+++ b/src/components/Icons/18/reports.vue
@@ -13,7 +13,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconReports',
   extends: Base
diff --git a/src/components/Icons/18/review-ac.vue b/src/components/Icons/18/review-ac.vue
index 877e008b..896ca1d9 100644
--- a/src/components/Icons/18/review-ac.vue
+++ b/src/components/Icons/18/review-ac.vue
@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };
diff --git a/src/components/Icons/18/sales-invoice.vue b/src/components/Icons/18/sales-invoice.vue
index eb7e0ff4..6abecf12 100644
--- a/src/components/Icons/18/sales-invoice.vue
+++ b/src/components/Icons/18/sales-invoice.vue
@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };
diff --git a/src/components/Icons/18/sales.vue b/src/components/Icons/18/sales.vue
index 84915561..a6115b4b 100644
--- a/src/components/Icons/18/sales.vue
+++ b/src/components/Icons/18/sales.vue
@@ -13,7 +13,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconSales',
   extends: Base
diff --git a/src/components/Icons/18/settings.vue b/src/components/Icons/18/settings.vue
index a503a4e7..4cd22c43 100644
--- a/src/components/Icons/18/settings.vue
+++ b/src/components/Icons/18/settings.vue
@@ -13,7 +13,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconSettings',
   extends: Base
diff --git a/src/components/Icons/18/start.vue b/src/components/Icons/18/start.vue
index 0d40c870..c0ccb35f 100644
--- a/src/components/Icons/18/start.vue
+++ b/src/components/Icons/18/start.vue
@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };
diff --git a/src/components/Icons/18/supplier.vue b/src/components/Icons/18/supplier.vue
index 761333fe..2e658c97 100644
--- a/src/components/Icons/18/supplier.vue
+++ b/src/components/Icons/18/supplier.vue
@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };
diff --git a/src/components/Icons/18/system.vue b/src/components/Icons/18/system.vue
index 679253d6..0633a281 100644
--- a/src/components/Icons/18/system.vue
+++ b/src/components/Icons/18/system.vue
@@ -13,7 +13,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconSystem',
   extends: Base,
diff --git a/src/components/Icons/24/general.vue b/src/components/Icons/24/general.vue
index 3ea1c54a..21551ecd 100644
--- a/src/components/Icons/24/general.vue
+++ b/src/components/Icons/24/general.vue
@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconGeneral',
   extends: Base
diff --git a/src/components/Icons/24/green-check.vue b/src/components/Icons/24/green-check.vue
index 2b30b685..645cf873 100644
--- a/src/components/Icons/24/green-check.vue
+++ b/src/components/Icons/24/green-check.vue
@@ -18,7 +18,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconGreenCheck',
   extends: Base
diff --git a/src/components/Icons/24/invoice.vue b/src/components/Icons/24/invoice.vue
index f4509d8d..53a9ed8a 100644
--- a/src/components/Icons/24/invoice.vue
+++ b/src/components/Icons/24/invoice.vue
@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconInvoice',
   extends: Base
diff --git a/src/components/Icons/24/mail.vue b/src/components/Icons/24/mail.vue
index ba9e6aaf..3d049661 100644
--- a/src/components/Icons/24/mail.vue
+++ b/src/components/Icons/24/mail.vue
@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconMail',
   extends: Base
diff --git a/src/components/Icons/24/privacy.vue b/src/components/Icons/24/privacy.vue
index 9c7370d9..60b7c21c 100644
--- a/src/components/Icons/24/privacy.vue
+++ b/src/components/Icons/24/privacy.vue
@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconPrivacy',
   extends: Base
diff --git a/src/components/Icons/24/system.vue b/src/components/Icons/24/system.vue
index 000b4d43..a4f4987a 100644
--- a/src/components/Icons/24/system.vue
+++ b/src/components/Icons/24/system.vue
@@ -7,7 +7,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconSystem',
   extends: Base
diff --git a/src/pages/Dashboard/ProfitAndLoss.vue b/src/pages/Dashboard/ProfitAndLoss.vue
index 372b0269..d98d82bb 100644
--- a/src/pages/Dashboard/ProfitAndLoss.vue
+++ b/src/pages/Dashboard/ProfitAndLoss.vue
@@ -37,8 +37,8 @@ import { uicolors } from 'src/utils/colors';
 import { getDatesAndPeriodList } from 'src/utils/misc';
 import { getValueMapFromList } from 'utils';
 import DashboardChartBase from './BaseDashboardChart.vue';
-import PeriodSelector from './PeriodSelector';
-import SectionHeader from './SectionHeader';
+import PeriodSelector from './PeriodSelector.vue';
+import SectionHeader from './SectionHeader.vue';
 
 export default {
   name: 'ProfitAndLoss',
diff --git a/src/pages/GetStarted.vue b/src/pages/GetStarted.vue
index 44e40287..5ac97e51 100644
--- a/src/pages/GetStarted.vue
+++ b/src/pages/GetStarted.vue
@@ -70,9 +70,9 @@
 </template>
 
 <script>
-import Button from 'src/components/Button';
-import Icon from 'src/components/Icon';
-import PageHeader from 'src/components/PageHeader';
+import Button from 'src/components/Button.vue';
+import Icon from 'src/components/Icon.vue';
+import PageHeader from 'src/components/PageHeader.vue';
 import { fyo } from 'src/initFyo';
 import { getGetStartedConfig } from 'src/utils/getStartedConfig';
 import { openLink } from 'src/utils/ipcCalls';
diff --git a/src/pages/ListView/List.vue b/src/pages/ListView/List.vue
index bf72121c..422a6cec 100644
--- a/src/pages/ListView/List.vue
+++ b/src/pages/ListView/List.vue
@@ -80,7 +80,7 @@
       v-if="!data?.length"
       class="flex flex-col items-center justify-center my-auto"
     >
-      <img src="@/assets/img/list-empty-state.svg" alt="" class="w-24" />
+      <img src="src/assets/img/list-empty-state.svg" alt="" class="w-24" />
       <p class="my-3 text-gray-800">{{ t`No entries found` }}</p>
       <Button type="primary" class="text-white" @click="$emit('makeNewDoc')" v-if="canCreate">
         {{ t`Make Entry` }}
@@ -90,14 +90,14 @@
 </template>
 <script>
 import { clone } from 'lodash';
-import Button from 'src/components/Button';
+import Button from 'src/components/Button.vue';
 import Paginator from 'src/components/Paginator.vue';
-import Row from 'src/components/Row';
+import Row from 'src/components/Row.vue';
 import { fyo } from 'src/initFyo';
 import { isNumeric } from 'src/utils';
 import { objectForEach } from 'utils/index';
 import { defineComponent, toRaw } from 'vue';
-import ListCell from './ListCell';
+import ListCell from './ListCell.vue';
 
 export default defineComponent({
   name: 'List',
diff --git a/src/setup/createCOA.ts b/src/setup/createCOA.ts
index abfeb852..407950d2 100644
--- a/src/setup/createCOA.ts
+++ b/src/setup/createCOA.ts
@@ -93,7 +93,7 @@ async function getCOA(chartOfAccounts: string) {
   }
 
   try {
-    const countryCoa = (await import('fixtures/verified/' + conCode + '.json'))
+    const countryCoa = (await import(`../../fixtures/verified/${conCode}.json`))
       .default;
     return countryCoa.tree;
   } catch (e) {
diff --git a/src/utils/colors.ts b/src/utils/colors.ts
index 069e90da..d70b050c 100644
--- a/src/utils/colors.ts
+++ b/src/utils/colors.ts
@@ -1,6 +1,118 @@
-import { theme } from '../../tailwind.config';
-
-export const uicolors = theme.extend.colors;
+export const uicolors = {
+  black: '#1E293B',
+  gray: {
+    25: '#fcfcfd',
+    50: '#f8f9fc',
+    100: '#f2f4f8',
+    200: '#ebeff5',
+    300: '#e2e8f0',
+    400: '#cad5e2',
+    500: '#9aa8bc',
+    600: '#8493a9',
+    700: '#64748b',
+    800: '#475569',
+    900: '#334155',
+  },
+  red: {
+    100: '#fff5f5',
+    200: '#fed7d7',
+    300: '#feb2b2',
+    400: '#fc8181',
+    500: '#f56565',
+    600: '#e53e3e',
+    700: '#c53030',
+    800: '#9b2c2c',
+    900: '#742a2a',
+  },
+  orange: {
+    100: '#fffaf0',
+    200: '#feebc8',
+    300: '#fbd38d',
+    400: '#f6ad55',
+    500: '#ed8936',
+    600: '#dd6b20',
+    700: '#c05621',
+    800: '#9c4221',
+    900: '#7b341e',
+  },
+  yellow: {
+    100: '#fffff0',
+    200: '#fefcbf',
+    300: '#faf089',
+    400: '#f6e05e',
+    500: '#ecc94b',
+    600: '#d69e2e',
+    700: '#b7791f',
+    800: '#975a16',
+    900: '#744210',
+  },
+  green: {
+    100: '#f0fff4',
+    200: '#c6f6d5',
+    300: '#9ae6b4',
+    400: '#68d391',
+    500: '#48bb78',
+    600: '#38a169',
+    700: '#2f855a',
+    800: '#276749',
+    900: '#22543d',
+  },
+  teal: {
+    100: '#e6fffa',
+    200: '#b2f5ea',
+    300: '#81e6d9',
+    400: '#4fd1c5',
+    500: '#38b2ac',
+    600: '#319795',
+    700: '#2c7a7b',
+    800: '#285e61',
+    900: '#234e52',
+  },
+  blue: {
+    100: '#e5f3ff',
+    200: '#cce7ff',
+    300: '#99d0ff',
+    400: '#66b8ff',
+    500: '#33a1ff',
+    600: '#2490ef',
+    700: '#006ecc',
+    800: '#005299',
+    900: '#003766',
+  },
+  indigo: {
+    100: '#ebf4ff',
+    200: '#c3dafe',
+    300: '#a3bffa',
+    400: '#7f9cf5',
+    500: '#667eea',
+    600: '#5a67d8',
+    700: '#4c51bf',
+    800: '#434190',
+    900: '#3c366b',
+  },
+  purple: {
+    100: '#faf5ff',
+    200: '#e9d8fd',
+    300: '#d6bcfa',
+    400: '#b794f4',
+    500: '#9f7aea',
+    600: '#805ad5',
+    700: '#6b46c1',
+    800: '#553c9a',
+    900: '#44337a',
+  },
+  pink: {
+    100: '#fdf7f8',
+    200: '#fbeef1',
+    300: '#f7dee5',
+    400: '#eec3d2',
+    500: '#df9eb8',
+    600: '#cf82a7',
+    700: '#ac688b',
+    800: '#8f5b79',
+    900: '#70485f',
+  },
+};
 
 export const indicators = {
   GRAY: 'grey',
@@ -14,7 +126,6 @@ export const indicators = {
   BLACK: 'black',
 };
 
-
 const getValidColor = (color: string) => {
   const isValid = [
     'gray',