diff --git a/src/common/color.ts b/src/common/color.ts
new file mode 100644
index 0000000..bbc0c70
--- /dev/null
+++ b/src/common/color.ts
@@ -0,0 +1,99 @@
+/**
+ * Converts an RGB color value to HSL. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes r, g, and b are contained in the set [0, 255] and
+ * returns h, s, and l in the set [0, 1].
+ *
+ * @return  Array           The HSL representation
+ * @param r
+ * @param g
+ * @param b
+ */
+export function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+
+    const max = Math.max(r, g, b),
+        min = Math.min(r, g, b);
+    let h,
+        s,
+        l = (max + min) / 2;
+
+    if (max == min) {
+        h = s = 0; // achromatic
+    } else {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+            default:
+                h = 0;
+                break;
+        }
+
+        h /= 6;
+    }
+
+    return [h, s, l];
+}
+
+/**
+ * Converts an HSL color value to RGB. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes h, s, and l are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * @return  Array           The RGB representation
+ * @param h
+ * @param s
+ * @param l
+ */
+export function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+    let r, g, b;
+
+    if (s == 0) {
+        r = g = b = l; // achromatic
+    } else {
+        function hue2rgb(p: number, q: number, t: number) {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
+            if (t < 1 / 2) return q;
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        }
+
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+
+    return [r * 255, g * 255, b * 255];
+}
+
+export function hex2rgb(hex: string): [number, number, number] {
+    const res = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return res ? [parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16)] : [0, 0, 0];
+}
+
+export function rgb2hex(r: number, g: number, b: number) {
+    return (
+        '#' +
+        Math.round((1 << 24) + (r << 16) + (g << 8) + b)
+            .toString(16)
+            .slice(1)
+    );
+}
diff --git a/src/common/theme.ts b/src/common/theme.ts
new file mode 100644
index 0000000..d29a114
--- /dev/null
+++ b/src/common/theme.ts
@@ -0,0 +1,14 @@
+import RSS3 from '@/common/rss3';
+import { RSS3Asset } from 'rss3-next/types/rss3';
+
+const setupTheme = (assets: RSS3Asset[]) => {
+    // Setup theme
+    const themes = RSS3.getAvailableThemes(assets);
+    if (themes[0]) {
+        document.body.classList.add(themes[0].class);
+    } else {
+        document.body.classList.remove(...document.body.classList);
+    }
+};
+
+export default setupTheme;
diff --git a/src/common/types.ts b/src/common/types.ts
index 4027132..0dd73a7 100644
--- a/src/common/types.ts
+++ b/src/common/types.ts
@@ -16,6 +16,7 @@ export interface GitcoinResponse {
 export interface NFT extends Asset {
     token_id: string;
     name?: string;
+    chain: 'BSC' | 'Ethereum' | 'Polygon';
     description?: string | null;
     image_url?: string | null;
     image_preview_url?: string | null;
@@ -39,6 +40,7 @@ export interface NFT extends Asset {
 }
 
 export interface GrantInfo {
+    id?: string;
     active: boolean;
     title?: string;
     slug?: string;
@@ -54,12 +56,15 @@ export interface GrantInfo {
 
 export interface DonationInfo {
     donor: string;
+    adminAddr?: string;
     tokenAddr: string;
     amount: string;
     symbol?: string;
+    decimals?: number;
     formatedAmount?: string;
     timeStamp: string;
     txHash: string;
+    approach?: 'zkSync' | 'Standard';
 }
 
 export interface DonationDetailByGrant {
@@ -105,7 +110,7 @@ export interface GeneralAsset {
         animation_original_url?: string | null;
         title?: string;
         total_contribs?: number;
-        token_contribs: {
+        token_contribs?: {
             token: string;
             amount: string;
         }[];
@@ -119,3 +124,12 @@ export interface GeneralAsset {
 export interface GeneralAssetWithTags extends GeneralAsset {
     tags?: string[];
 }
+
+export interface Profile {
+    avatar: string;
+    username: string;
+    address: string;
+    bio: string;
+    rns?: string;
+    displayAddress?: string;
+}
diff --git a/src/common/utils.ts b/src/common/utils.ts
index 33d29d4..c992bce 100644
--- a/src/common/utils.ts
+++ b/src/common/utils.ts
@@ -1,103 +1,249 @@
-/**
- * Converts an RGB color value to HSL. Conversion formula
- * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
- * Assumes r, g, and b are contained in the set [0, 255] and
- * returns h, s, and l in the set [0, 1].
- *
- * @return  Array           The HSL representation
- * @param r
- * @param g
- * @param b
- */
-export function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
-    r /= 255;
-    g /= 255;
-    b /= 255;
-
-    const max = Math.max(r, g, b),
-        min = Math.min(r, g, b);
-    let h,
-        s,
-        l = (max + min) / 2;
-
-    if (max == min) {
-        h = s = 0; // achromatic
-    } else {
-        const d = max - min;
-        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-
-        switch (max) {
-            case r:
-                h = (g - b) / d + (g < b ? 6 : 0);
-                break;
-            case g:
-                h = (b - r) / d + 2;
-                break;
-            case b:
-                h = (r - g) / d + 4;
-                break;
-            default:
-                h = 0;
-                break;
+import RNSUtils from '@/common/rns';
+import RSS3 from '@/common/rss3';
+import config from '@/config';
+import { RSS3Account, RSS3Asset } from 'rss3-next/types/rss3';
+import { GeneralAsset, GeneralAssetWithTags } from './types';
+
+const getName = () => {
+    return window.location.host.split('.').slice(0, -2).join('.');
+};
+
+const orderPattern = new RegExp(`^${config.tags.prefix}:order:(-?\\d+)$`, 'i');
+
+type TypesWithTag = RSS3Account | GeneralAssetWithTags;
+
+const getTaggedOrder = (tagged: TypesWithTag): number => {
+    if (!tagged.tags) {
+        return -1;
+    }
+    // const orderPattern = /^pass:order:(-?\d+)$/i;
+    for (const tag of tagged.tags) {
+        if (orderPattern.test(tag)) {
+            return parseInt(orderPattern.exec(tag)?.[1] || '-1');
         }
+    }
+    return -1;
+};
 
-        h /= 6;
+const setTaggedOrder = (tagged: TypesWithTag, order?: number): void => {
+    if (!tagged.tags) {
+        tagged.tags = [];
+    } else {
+        // const orderPattern = /^pass:order:(-?\d+)$/i;
+        const oldIndex = tagged.tags.findIndex((tag) => orderPattern.test(tag));
+        if (oldIndex !== -1) {
+            tagged.tags.splice(oldIndex, 1);
+        }
     }
+    if (order) {
+        tagged.tags.push(`${config.tags.prefix}:order:${order}`);
+    } else {
+        tagged.tags.push(`${config.tags.prefix}:${config.tags.hiddenTag}`);
+    }
+};
 
-    return [h, s, l];
+function sortByOrderTag<T extends TypesWithTag>(taggeds: T[]): T[] {
+    taggeds.sort((a, b) => {
+        return getTaggedOrder(a) - getTaggedOrder(b);
+    });
+    return taggeds;
 }
 
-/**
- * Converts an HSL color value to RGB. Conversion formula
- * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
- * Assumes h, s, and l are contained in the set [0, 1] and
- * returns r, g, and b in the set [0, 255].
- *
- * @return  Array           The RGB representation
- * @param h
- * @param s
- * @param l
- */
-export function hslToRgb(h: number, s: number, l: number): [number, number, number] {
-    let r, g, b;
-
-    if (s == 0) {
-        r = g = b = l; // achromatic
-    } else {
-        function hue2rgb(p: number, q: number, t: number) {
-            if (t < 0) t += 1;
-            if (t > 1) t -= 1;
-            if (t < 1 / 6) return p + (q - p) * 6 * t;
-            if (t < 1 / 2) return q;
-            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-            return p;
+const setOrderTag = async (taggeds: TypesWithTag[]): Promise<TypesWithTag[]> => {
+    await Promise.all(
+        taggeds.map(async (tagged, index) => {
+            setTaggedOrder(tagged, index);
+        }),
+    );
+    return taggeds;
+};
+
+const setHiddenTag = async (taggeds: TypesWithTag[]): Promise<TypesWithTag[]> => {
+    await Promise.all(
+        taggeds.map(async (tagged) => {
+            setTaggedOrder(tagged);
+        }),
+    );
+    return taggeds;
+};
+
+const mergeAssetsTags = async (assetsInRSS3File: RSS3Asset[], assetsGrabbed: GeneralAsset[]) => {
+    return await Promise.all(
+        (assetsGrabbed || []).map(async (ag: GeneralAssetWithTags) => {
+            const origType = ag.type;
+            if (config.hideUnlistedAsstes) {
+                ag.type = 'Invalid'; // Using as a match mark
+            }
+            for (const airf of assetsInRSS3File) {
+                if (
+                    airf.platform === ag.platform &&
+                    airf.identity === ag.identity &&
+                    airf.id === ag.id &&
+                    airf.type === origType
+                ) {
+                    // Matched
+                    ag.type = origType; // Recover type
+                    if (airf.tags) {
+                        ag.tags = airf.tags;
+                    }
+                    if (!ag.info.collection) {
+                        ag.info.collection = 'Other';
+                    }
+                    break;
+                }
+            }
+            return ag;
+        }),
+    );
+};
+
+interface AssetsList {
+    listed: GeneralAssetWithTags[];
+    unlisted: GeneralAssetWithTags[];
+    assets: GeneralAssetWithTags[];
+}
+
+async function initAssets(
+    assetInRSS3: RSS3Asset[],
+    assetInAssetProfile: GeneralAsset[],
+    type: string,
+): Promise<AssetsList> {
+    const listed: GeneralAssetWithTags[] = [];
+    const unlisted: GeneralAssetWithTags[] = [];
+
+    const allAssets = await utils.mergeAssetsTags(assetInRSS3, assetInAssetProfile);
+
+    for (const asset of allAssets) {
+        if (asset.type.endsWith(type)) {
+            if (asset.tags?.includes(`${config.tags.prefix}:${config.tags.hiddenTag}`)) {
+                unlisted.push(asset);
+            } else {
+                listed.push(asset);
+            }
         }
+    }
+
+    return {
+        listed: utils.sortByOrderTag(listed),
+        unlisted: unlisted,
+        assets: allAssets,
+    };
+}
 
-        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-        const p = 2 * l - q;
+async function initAccounts(accounts: RSS3Account[]) {
+    const listed: RSS3Account[] = [];
+    const unlisted: RSS3Account[] = [];
 
-        r = hue2rgb(p, q, h + 1 / 3);
-        g = hue2rgb(p, q, h);
-        b = hue2rgb(p, q, h - 1 / 3);
+    for (const account of accounts) {
+        if (!account.tags?.includes('hidden')) {
+            listed.push(account);
+        } else {
+            unlisted.push(account);
+        }
     }
 
-    return [r * 255, g * 255, b * 255];
+    return {
+        listed: utils.sortByOrderTag(listed),
+        unlisted: utils.sortByOrderTag(unlisted),
+    };
 }
 
-export function hex2rgb(hex: string): [number, number, number] {
-    const res = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return res ? [parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16)] : [0, 0, 0];
+async function getAddress(routerAddress: string) {
+    let address: string | undefined;
+    let ethAddress: string = '';
+    let rns: string = '';
+
+    if (config.subDomain.isSubDomainMode) {
+        // Is subdomain mode
+        address = getName();
+    } else if (routerAddress) {
+        address = routerAddress;
+    }
+
+    if (address) {
+        if (address.startsWith('0x')) {
+            // Might be address type
+            // Get RNS and redirect
+            ethAddress = address;
+            rns = await RNSUtils.addr2Name(address);
+            if (rns !== '') {
+                window.location.href =
+                    'https://' +
+                    rns +
+                    '.' +
+                    config.subDomain.rootDomain +
+                    window.location.pathname.replace(`/${address}`, '');
+            }
+        } else {
+            // RNS
+            rns = address;
+            ethAddress = (await RNSUtils.name2Addr(address)).toString();
+            if (parseInt(ethAddress) === 0) {
+                return { ethAddress, rns };
+            }
+        }
+    }
+
+    return { ethAddress, rns };
 }
 
-export function rgb2hex(r: number, g: number, b: number) {
-    return (
-        '#' +
-        Math.round((1 << 24) + (r << 16) + (g << 8) + b)
-            .toString(16)
-            .slice(1)
+async function saveAssetsOrder(listed: GeneralAssetWithTags[], unlisted: GeneralAssetWithTags[]) {
+    const rss3 = await RSS3.get();
+    await Promise.all(
+        listed.map((asset, index) => {
+            return rss3?.assets.patchTags(
+                {
+                    ...asset,
+                },
+                [`pass:order:${index}`],
+            );
+        }),
+    );
+    await Promise.all(
+        unlisted.map((asset) => {
+            return rss3?.assets.patchTags(
+                {
+                    ...asset,
+                },
+                ['pass:hidden'],
+            );
+        }),
     );
+    await rss3?.files.sync();
 }
 
-export function getName() {
-    return window.location.host.split('.').slice(0, -2).join('.');
+function extractEmbedFields(raw: string, fieldsEmbed: string[]) {
+    const fieldPattern = /<([A-Z]+?)#(.+?)>/gi;
+    const fields = raw.match(fieldPattern) || [];
+    const extracted = raw.replace(fieldPattern, '');
+    const fieldsMatch: {
+        [key: string]: string;
+    } = {};
+
+    for (const field of fields) {
+        const splits = fieldPattern.exec(field) || [];
+        if (fieldsEmbed.includes(splits[1])) {
+            fieldsMatch[splits[1]] = splits[2];
+        }
+    }
+
+    return {
+        extracted,
+        fieldsMatch,
+    };
 }
+
+const utils = {
+    sortByOrderTag,
+    setOrderTag,
+    setHiddenTag,
+    mergeAssetsTags,
+    initAssets,
+    initAccounts,
+    getAddress,
+    getName,
+    saveAssetsOrder,
+    extractEmbedFields,
+};
+
+export default utils;
diff --git a/src/components/AccountCard.vue b/src/components/Account/AccountCard.vue
similarity index 100%
rename from src/components/AccountCard.vue
rename to src/components/Account/AccountCard.vue
diff --git a/src/components/AccountItem.vue b/src/components/Account/AccountItem.vue
similarity index 94%
rename from src/components/AccountItem.vue
rename to src/components/Account/AccountItem.vue
index 3a73011..dc2d923 100644
--- a/src/components/AccountItem.vue
+++ b/src/components/Account/AccountItem.vue
@@ -35,8 +35,8 @@
 
 <script lang="ts">
 import { Vue, Options } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import Tooltip from '@/components/Tooltip.vue';
+import Button from '@/components/Button/Button.vue';
+import Tooltip from '@/components/Common/Tooltip.vue';
 
 @Options({
     components: { Tooltip, Button },
diff --git a/src/components/EVMpAccountItem.vue b/src/components/Account/EVMpAccountItem.vue
similarity index 93%
rename from src/components/EVMpAccountItem.vue
rename to src/components/Account/EVMpAccountItem.vue
index 0b30ba1..636be70 100644
--- a/src/components/EVMpAccountItem.vue
+++ b/src/components/Account/EVMpAccountItem.vue
@@ -25,9 +25,9 @@
 
 <script lang="ts">
 import { Vue, Options } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import Tooltip from '@/components/Tooltip.vue';
-import { hex2rgb, hslToRgb, rgb2hex, rgbToHsl } from '@/common/utils';
+import Button from '@/components/Button/Button.vue';
+import Tooltip from '@/components/Common/Tooltip.vue';
+import { hex2rgb, hslToRgb, rgb2hex, rgbToHsl } from '@/common/color';
 
 @Options({
     components: { Tooltip, Button },
diff --git a/src/components/Button.vue b/src/components/Button/Button.vue
similarity index 100%
rename from src/components/Button.vue
rename to src/components/Button/Button.vue
diff --git a/src/components/LinkButton.vue b/src/components/Button/LinkButton.vue
similarity index 100%
rename from src/components/LinkButton.vue
rename to src/components/Button/LinkButton.vue
diff --git a/src/components/BarCard.vue b/src/components/Card/BarCard.vue
similarity index 100%
rename from src/components/BarCard.vue
rename to src/components/Card/BarCard.vue
diff --git a/src/components/Card.vue b/src/components/Card/Card.vue
similarity index 100%
rename from src/components/Card.vue
rename to src/components/Card/Card.vue
diff --git a/src/components/Card/TransBarCard.vue b/src/components/Card/TransBarCard.vue
new file mode 100644
index 0000000..07b3564
--- /dev/null
+++ b/src/components/Card/TransBarCard.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="card bg-blur">
+        <div class="p-2 text-primary-text text-lg font-semibold">{{ title }}</div>
+        <div class="flex flex-row gap-x-2 items-start w-full">
+            <div class="card-body">
+                <div class="content-wrapper">
+                    <slot name="content" />
+                </div>
+            </div>
+            <div class="flex-shrink-0 pt-1">
+                <slot name="button" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component';
+
+@Options({
+    props: {
+        title: String,
+    },
+})
+export default class TransBarCard extends Vue {}
+</script>
+
+<style lang="postcss" scoped>
+@layer components {
+    .card {
+        @apply flex flex-col items-start px-3 h-28 border-card rounded-xl box-border;
+
+        .card-body {
+            scrollbar-width: thin;
+            @apply flex flex-1 flex-row gap-2 items-center p-2 pt-0 w-0 overflow-y-auto;
+
+            .content-wrapper {
+                @apply flex flex-1 flex-row items-center;
+            }
+
+            .button-wrapper {
+                @apply flex-shrink-0;
+            }
+        }
+    }
+
+    /* slightly transparent fallback */
+    .bg-blur {
+        background-color: rgba(255, 255, 255, 0.6);
+    }
+
+    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+        .bg-blur {
+            background-color: rgba(255, 255, 255, 0.6);
+            -webkit-backdrop-filter: blur(2em);
+            backdrop-filter: blur(2em);
+        }
+    }
+}
+</style>
diff --git a/src/components/Card/TransCard.vue b/src/components/Card/TransCard.vue
new file mode 100644
index 0000000..7d3fa75
--- /dev/null
+++ b/src/components/Card/TransCard.vue
@@ -0,0 +1,117 @@
+<template>
+    <div class="card bg-blur">
+        <div class="card-header">
+            <div class="card-title-wrapper">
+                <span class="card-title">
+                    {{ $props.title }}
+                </span>
+                <slot name="accessibility" />
+            </div>
+            <slot name="header-button" />
+        </div>
+        <div
+            class="card-content"
+            :class="{
+                'PC-layout': isPClayout,
+                'single-line': isSingleLine,
+            }"
+        >
+            <div
+                class="content-wrapper"
+                :class="{
+                    content: isHavingContent,
+                }"
+            >
+                <slot v-if="isHavingContent" name="content" />
+                <div v-else class="body-tips" :class="colorTips">
+                    {{ $props.tips }}
+                </div>
+            </div>
+        </div>
+        <div class="card-footer">
+            <span v-if="isHavingContent" class="footer-tips" :class="colorTips">
+                {{ $props.tips }}
+            </span>
+            <slot name="footer-button" />
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+
+@Options({
+    props: {
+        title: String,
+        tips: String,
+        isHavingContent: Boolean,
+        isSingleLine: Boolean,
+        isPClayout: Boolean,
+    },
+})
+export default class TransCard extends Vue {}
+</script>
+<style scoped lang="postcss">
+@layer components {
+    .card {
+        @apply flex flex-col items-start px-5 py-4 border-card rounded-xl box-border;
+
+        .card-header {
+            @apply flex items-center justify-between w-full;
+            .card-title-wrapper {
+                @apply flex gap-2 items-center justify-start;
+                .card-title {
+                    @apply mr-1 text-primary-text text-xl font-semibold;
+                }
+            }
+        }
+
+        .card-content {
+            @apply scrollbar-hide mx-auto w-full h-full break-all;
+            > .content-wrapper {
+                @apply min-h-20;
+
+                &:not(.content) {
+                    @apply flex;
+                }
+            }
+            &.single-line {
+                @apply overflow-y-auto;
+                > .content-wrapper {
+                    @apply pb-4 px-4 w-max;
+                }
+            }
+            &.PC-layout {
+                @apply overflow-y-auto;
+            }
+            .body-tips {
+                @apply flex items-center justify-center w-full;
+            }
+        }
+
+        .card-footer {
+            @apply flex flex-row justify-between mb-0 mt-auto w-full font-normal;
+
+            > * {
+                @apply flex m-auto mr-0;
+            }
+
+            .footer-tips {
+                @apply flex justify-start ml-0 text-left text-sm font-extralight;
+            }
+        }
+    }
+
+    /* slightly transparent fallback */
+    .bg-blur {
+        background-color: rgba(255, 255, 255, 0.6);
+    }
+
+    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+        .bg-blur {
+            background-color: rgba(255, 255, 255, 0.6);
+            -webkit-backdrop-filter: blur(2em);
+            backdrop-filter: blur(2em);
+        }
+    }
+}
+</style>
diff --git a/src/components/Common/Header.vue b/src/components/Common/Header.vue
new file mode 100644
index 0000000..0899190
--- /dev/null
+++ b/src/components/Common/Header.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="flex items-center justify-between pb-4">
+        <Button size="sm" class="w-10 h-10 text-secondary-btn-text bg-secondary-btn shadow-secondary-btn" @click="back">
+            <i class="bx bx-chevron-left bx-sm" />
+        </Button>
+        <div class="text-center font-bold" :class="getTitleStyle()" v-if="title">
+            {{ title }}
+        </div>
+        <ImgHolder
+            class="inline-flex my-auto w-10 h-10"
+            :class="{ 'cursor-pointer': rns && ethAddress }"
+            :is-rounded="true"
+            :is-border="false"
+            :src="avatar || rss3Profile.avatar || defaultAvatar"
+            :alt="rss3Profile?.username || ''"
+            @click="toPublicPage(rns, ethAddress)"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+import Button from '@/components/Button/Button.vue';
+import ImgHolder from '@/components/Common/ImgHolder.vue';
+import { RSS3Profile } from 'rss3-next/types/rss3';
+import config from '@/config';
+
+const TitleColor = new Map([
+    ['primary', 'text-primary-text'],
+    ['account', 'text-account-title'],
+    ['nft', 'text-nft-title'],
+    ['gitcoin', 'text-gitcoin-title'],
+    ['footprint', 'text-footprint-title'],
+]);
+
+@Options({
+    name: 'Header',
+    components: { ImgHolder, Button },
+    props: {
+        avatar: String,
+        rss3Profile: Object,
+        title: String,
+        theme: String,
+        ethAddress: String,
+        rns: String,
+        list: String,
+    },
+})
+export default class Header extends Vue {
+    avatar!: string;
+    rss3Profile!: RSS3Profile;
+    title!: string;
+    theme!: string;
+    ethAddress!: string;
+    rns!: string;
+    list!: string;
+    defaultAvatar = config.defaultAvatar;
+
+    back() {
+        if (window.history.state.back) {
+            window.history.back();
+        } else {
+            if (this.list) {
+                this.$router.push(
+                    (config.subDomain.isSubDomainMode ? '' : `/${this.rns || this.ethAddress}`) + `/${this.list}`,
+                );
+            } else {
+                this.$router.push(config.subDomain.isSubDomainMode ? '/' : `/${this.rns || this.ethAddress}`);
+            }
+        }
+    }
+
+    toPublicPage(rns: string, ethAddress: string) {
+        if (rns && ethAddress) {
+            if (rns && config.subDomain.isSubDomainMode) {
+                this.$router.push('/');
+            } else {
+                this.$router.push(`/${rns || ethAddress}`);
+            }
+        }
+    }
+
+    getTitleStyle() {
+        let style = '';
+        style += TitleColor.get(this.theme) + ' ';
+        style += this.title.includes('Manage') ? 'text-xl' : 'text-2xl';
+        return style;
+    }
+}
+</script>
+
+<style></style>
diff --git a/src/components/ImgHolder.vue b/src/components/Common/ImgHolder.vue
similarity index 100%
rename from src/components/ImgHolder.vue
rename to src/components/Common/ImgHolder.vue
diff --git a/src/components/Modal.vue b/src/components/Common/Modal.vue
similarity index 100%
rename from src/components/Modal.vue
rename to src/components/Common/Modal.vue
diff --git a/src/components/Tooltip.vue b/src/components/Common/Tooltip.vue
similarity index 100%
rename from src/components/Tooltip.vue
rename to src/components/Common/Tooltip.vue
diff --git a/src/components/ContentBadge.vue b/src/components/Content/ContentBadge.vue
similarity index 100%
rename from src/components/ContentBadge.vue
rename to src/components/Content/ContentBadge.vue
diff --git a/src/components/ContentCard.vue b/src/components/Content/ContentCard.vue
similarity index 91%
rename from src/components/ContentCard.vue
rename to src/components/Content/ContentCard.vue
index dfd0eb4..478851c 100644
--- a/src/components/ContentCard.vue
+++ b/src/components/Content/ContentCard.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import { Vue, Options } from 'vue-class-component';
-import ContentBadge from '@/components/ContentBadge.vue';
+import ContentBadge from '@/components/Content/ContentBadge.vue';
 import marked from 'marked';
 
 @Options({
@@ -34,7 +34,8 @@ export default class ContentCard extends Vue {
     mounted() {
         this.renderedContent = marked(this.content.replaceAll('\n', '<br>') || '')
             .replaceAll('img class="emoji"', 'img style="display: inline; max-width: 1.8rem; max-height: 1.8rem;"')
-            .replaceAll('img class="media"', 'img class="m-2 rounded-md w-3/4 mx-auto"');
+            .replaceAll('img class="media"', 'img class="m-2 rounded-md w-3/4 mx-auto"')
+            .replaceAll('">,<img', '"><img');
     }
 
     getDate(timestamp: number): string {
diff --git a/src/components/GitcoinCard.vue b/src/components/Donation/GitcoinCard.vue
similarity index 96%
rename from src/components/GitcoinCard.vue
rename to src/components/Donation/GitcoinCard.vue
index c5259b7..4732fc2 100644
--- a/src/components/GitcoinCard.vue
+++ b/src/components/Donation/GitcoinCard.vue
@@ -8,13 +8,13 @@
             text-body-text
             bg-body-bg
             border-card
-            rounded rounded-2xl
+            rounded-2xl
             shadow-gitcoin
             cursor-pointer
         "
     >
         <div
-            class="flex-shrink m-0.5 w-32 h-32 bg-cover bg-center bg-no-repeat rounded rounded-2xl"
+            class="flex-shrink m-0.5 w-32 h-32 bg-cover bg-center bg-no-repeat rounded-2xl"
             :style="{ backgroundImage: `url(${imageUrl})` }"
         ></div>
         <div class="flex-1 px-8 w-45">
diff --git a/src/components/Donation/GitcoinDetails.vue b/src/components/Donation/GitcoinDetails.vue
new file mode 100644
index 0000000..f1284bf
--- /dev/null
+++ b/src/components/Donation/GitcoinDetails.vue
@@ -0,0 +1,133 @@
+<template>
+    <div
+        class="
+            flex flex-col
+            gap-4
+            items-start
+            justify-start
+            px-5
+            w-full
+            text-black text-body-text
+            border-card
+            rounded
+            filter
+        "
+    >
+        <div class="w-full">
+            <h2 class="break-words text-xl font-semibold">
+                {{ details.title || 'Inactive Project' }}
+            </h2>
+            <div class="inline-flex text-gitcoin-title leading-normal space-x-1">
+                <p class="text-sm cursor-pointer truncate" @click="toExternalLink(details.reference_url)">
+                    <i class="bx bx-link align-middle" />
+                    {{ details.reference_url }}
+                </p>
+                <span v-if="grantsUrl">-</span>
+                <p class="text-sm cursor-pointer truncate" @click="toExternalLink(grantsUrl)">
+                    <i class="bx bx-link align-middle" />
+                    {{ grantsUrl }}
+                </p>
+            </div>
+        </div>
+        <div class="w-full">
+            <h2 class="break-words text-xl font-semibold">Description</h2>
+            <div class="line-clamp-3 break-words text-sm leading-normal">
+                {{ details.description || 'No information provided by Gitcoin.' }}
+            </div>
+        </div>
+        <div>
+            <h2 class="text-xl font-semibold">Contributions</h2>
+            <h1 class="text-gitcoin-title text-2xl font-semibold">
+                <vue3-autocounter
+                    ref="counter"
+                    :startAmount="0"
+                    :endAmount="parseInt(donationInfo.length)"
+                    :duration="1"
+                    separator=","
+                    :autoinit="true"
+                />
+            </h1>
+        </div>
+        <div class="flex flex-col gap-y-2 w-full">
+            <div class="flex flex-row gap-x-2 justify-start" v-for="item in donationInfo" :key="item.txHash">
+                <div
+                    class="flex flex-1 flex-row items-center justify-between px-4 py-2 text-black bg-body-bg rounded-xl"
+                >
+                    <div class="flex-shrink pr-2 text-gitcoin-title">
+                        <vue3-autocounter
+                            ref="counter"
+                            :startAmount="0"
+                            :endAmount="parseFloat(item.formatedAmount)"
+                            :duration="1"
+                            separator=","
+                            :decimals="item.formatedAmount.split('.')[1].length"
+                            :suffix="item.symbol"
+                            :autoinit="true"
+                        />
+                    </div>
+                    <div class="flex-1 w-0 text-right text-gitcoin-title truncate">
+                        {{ timeDifferent(item.timeStamp) }}
+                    </div>
+                </div>
+                <Button
+                    size="sm"
+                    class="ml-1 w-9 h-9 text-gitcoin-btn-m-text bg-gitcoin-btn-m shadow-gitcoin-btn-m"
+                    @click="toScanTx(item)"
+                >
+                    <i class="bx bx-link-external bx-xs" />
+                </Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component';
+import { DonationInfo, GrantInfo } from '@/common/types';
+import Vue3Autocounter from 'vue3-autocounter';
+import Button from '@/components/Button/Button.vue';
+
+@Options({
+    components: { Button, Vue3Autocounter },
+    props: {
+        details: Object,
+        donationInfo: Array,
+    },
+})
+export default class GitcoinDetails extends Vue {
+    details!: GrantInfo;
+    donationInfo!: DonationInfo[];
+
+    get grantsUrl() {
+        if (!this.details?.id) return null;
+        return `https://gitcoin.co/grants/${this.details.id}/${this.details.slug}`;
+    }
+
+    timeDifferent(timeStamp: number) {
+        const date1: any = new Date(timeStamp * 1000);
+        const date2: any = Date.now();
+        const diffTime = Math.abs(date2 - date1);
+        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+        const diffHours = Math.ceil((diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        if (diffDays == 0) {
+            return diffHours + ' hours ago';
+        } else if (diffHours == 0) {
+            return diffDays + ' days ago';
+        } else {
+            return diffDays + ' days ' + diffHours + ' hours ago';
+        }
+    }
+
+    toScanTx(item: DonationInfo) {
+        if (item.approach === 'zkSync') {
+            window.open(`https://zkscan.io/explorer/transactions/${item.txHash}`);
+        } else {
+            window.open(`https://etherscan.io/tx/${item.txHash}`);
+        }
+    }
+
+    toExternalLink(address: string) {
+        window.open(address);
+    }
+}
+</script>
diff --git a/src/components/GitcoinItem.vue b/src/components/Donation/GitcoinItem.vue
similarity index 79%
rename from src/components/GitcoinItem.vue
rename to src/components/Donation/GitcoinItem.vue
index 9077891..36f7283 100644
--- a/src/components/GitcoinItem.vue
+++ b/src/components/Donation/GitcoinItem.vue
@@ -5,11 +5,11 @@
             'w-10 h-10 rounded-sm': size === 'sm',
             'w-16 h-16 rounded': size === 'md',
             'w-full aspect-w-1 aspect-h-1 rounded': size === 'auto',
+            rounded: size === 'contain',
         }"
-        :style="{
-            backgroundImage: `url(${imageUrl})`,
-        }"
-    />
+    >
+        <img :src="imageUrl" class="w-full h-full object-cover" />
+    </div>
 </template>
 
 <script lang="ts">
@@ -30,7 +30,7 @@ export default class GitcoinItem extends Vue {
 <style scoped lang="postcss">
 @layer components {
     .gitcoin-item {
-        @apply bg-white bg-cover bg-center bg-no-repeat border border-white rounded shadow-gitcoin filter;
+        @apply bg-white bg-cover bg-center bg-no-repeat border border-white rounded shadow-gitcoin overflow-hidden;
     }
 }
 </style>
diff --git a/src/components/GitcoinTitle.vue b/src/components/Donation/GitcoinTitle.vue
similarity index 100%
rename from src/components/GitcoinTitle.vue
rename to src/components/Donation/GitcoinTitle.vue
diff --git a/src/components/FollowerCard.vue b/src/components/Follow/FollowerCard.vue
similarity index 97%
rename from src/components/FollowerCard.vue
rename to src/components/Follow/FollowerCard.vue
index 5d187be..7ac74dc 100644
--- a/src/components/FollowerCard.vue
+++ b/src/components/Follow/FollowerCard.vue
@@ -17,7 +17,7 @@
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
 import ColorThief from 'colorthief';
-import { hslToRgb, rgbToHsl } from '@/common/utils';
+import { hslToRgb, rgbToHsl } from '@/common/color';
 import config from '@/config';
 
 @Options({
diff --git a/src/components/FootprintCard.vue b/src/components/Footprint/FootprintCard.vue
similarity index 95%
rename from src/components/FootprintCard.vue
rename to src/components/Footprint/FootprintCard.vue
index ca52f37..4d2672f 100644
--- a/src/components/FootprintCard.vue
+++ b/src/components/Footprint/FootprintCard.vue
@@ -2,7 +2,7 @@
     <div class="flex flex-row gap-2 justify-start p-4">
         <FootprintItem
             :imageUrl="imageUrl"
-            :size="78"
+            size="lg"
             class="flex-shrink-0"
             :class="{
                 'opacity-50 animate-bounce': special,
@@ -39,10 +39,10 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import FootprintItem from '@/components/FootprintItem.vue';
+import FootprintItem from '@/components/Footprint/FootprintItem.vue';
 import CalendarIcon from '@/components/Icons/CalendarIcon.vue';
 import LocationIcon from '@/components/Icons/LocationIcon.vue';
-import Button from '@/components/Button.vue';
+import Button from '@/components/Button/Button.vue';
 
 @Options({
     props: {
diff --git a/src/components/Footprint/FootprintDetails.vue b/src/components/Footprint/FootprintDetails.vue
new file mode 100644
index 0000000..411beb2
--- /dev/null
+++ b/src/components/Footprint/FootprintDetails.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class="flex flex-col gap-y-2.5 mt-4 px-5 py-4 w-full text-body-text">
+        <div class="flex flex-row gap-2 items-start justify-between">
+            <div class="flex-1 w-0">
+                <h2 class="text-xl font-semibold truncate">{{ details.event.name }}</h2>
+                <div
+                    v-if="details.event.event_url"
+                    class="flex flex-row items-center mt-1 text-footprint-title truncate"
+                >
+                    <i class="bx bx-link align-middle mr-2" />
+                    <span class="flex-1 w-0 truncate">{{ details.event.event_url }}</span>
+                </div>
+            </div>
+            <Button
+                v-if="details.event.event_url"
+                size="sm"
+                class="ml-1 w-9 h-9 text-footprint-btn-m-text bg-footprint-btn-m shadow-footprint-btn-m"
+                @click="toExternalLink"
+            >
+                <i class="bx bx-link-external bx-xs" />
+            </Button>
+        </div>
+        <section class="flex flex-col gap-2 text-footprint-title text-sm">
+            <div class="flex flex-row gap-2 items-center">
+                <CalendarIcon />
+                <span class="text-body-text">{{ getDate() }}</span>
+            </div>
+            <div class="flex flex-row gap-2 items-center">
+                <LocationIcon />
+                <span class="text-body-text">{{ details.event.city || details.event.country || 'Metaverse' }}</span>
+            </div>
+        </section>
+        <section v-if="details.event.description">
+            <h3 class="text-footprint-title text-lg font-medium capitalize">Description</h3>
+            <p class="text-body-text font-medium leading-loose">
+                {{ details.event.description }}
+            </p>
+        </section>
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+import Button from '@/components/Button/Button.vue';
+import CalendarIcon from '@/components/Icons/CalendarIcon.vue';
+import LocationIcon from '@/components/Icons/LocationIcon.vue';
+import { POAP } from '@/common/types';
+
+@Options({
+    name: 'SingleFootprint',
+    components: { Button, CalendarIcon, LocationIcon },
+    props: {
+        details: Object,
+    },
+})
+export default class SingleFootprint extends Vue {
+    details!: POAP;
+
+    toExternalLink() {
+        window.open(this.details.event.event_url);
+    }
+
+    getDate(): string {
+        return this.details.event.start_date
+            ? this.formatDate(this.details.event.start_date) +
+                  (this.details.event.end_date && this.details.event.end_date !== this.details.event.start_date
+                      ? ` ~ ${this.formatDate(this.details.event.end_date)}`
+                      : '')
+            : 'Loading...';
+    }
+
+    formatDate(ts: string): string {
+        return new Date(parseInt(ts) * 1000).toLocaleDateString('en-US');
+    }
+}
+</script>
diff --git a/src/components/FootprintItem.vue b/src/components/Footprint/FootprintItem.vue
similarity index 66%
rename from src/components/FootprintItem.vue
rename to src/components/Footprint/FootprintItem.vue
index 65886ea..026c6b3 100644
--- a/src/components/FootprintItem.vue
+++ b/src/components/Footprint/FootprintItem.vue
@@ -1,9 +1,13 @@
 <template>
     <div
         class="footprint-item"
+        :class="{
+            'w-10 h-10 rounded-sm': size === 'sm',
+            'w-17.5 h-17.5 rounded': size === 'md',
+            'w-19 h-19 rounded': size === 'lg',
+            'w-full aspect-w-1 aspect-h-1 rounded': size === 'auto',
+        }"
         :style="{
-            width: size + 'px',
-            height: size + 'px',
             backgroundImage: `url(${imageUrl})`,
         }"
     />
@@ -14,12 +18,12 @@ import { Vue, Options } from 'vue-class-component';
 
 @Options({
     props: {
-        size: Number,
+        size: String,
         imageUrl: String,
     },
 })
 export default class FootprintItem extends Vue {
-    size!: Number;
+    size!: String;
     imageUrl!: String;
 }
 </script>
diff --git a/src/components/Logo.vue b/src/components/Icons/Logo.vue
similarity index 100%
rename from src/components/Logo.vue
rename to src/components/Icons/Logo.vue
diff --git a/src/components/Input.vue b/src/components/Input/Input.vue
similarity index 100%
rename from src/components/Input.vue
rename to src/components/Input/Input.vue
diff --git a/src/components/Loading.vue b/src/components/Loading/Loading.vue
similarity index 100%
rename from src/components/Loading.vue
rename to src/components/Loading/Loading.vue
diff --git a/src/components/LoadingContainer.vue b/src/components/Loading/LoadingContainer.vue
similarity index 90%
rename from src/components/LoadingContainer.vue
rename to src/components/Loading/LoadingContainer.vue
index 78c6a49..ba3cb7b 100644
--- a/src/components/LoadingContainer.vue
+++ b/src/components/Loading/LoadingContainer.vue
@@ -8,7 +8,7 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Loading from '@/components/Loading.vue';
+import Loading from '@/components/Loading/Loading.vue';
 @Options({
     components: {
         Loading,
diff --git a/src/components/NFT/NFTDetails.vue b/src/components/NFT/NFTDetails.vue
index 6c6dceb..3abc85e 100644
--- a/src/components/NFT/NFTDetails.vue
+++ b/src/components/NFT/NFTDetails.vue
@@ -19,7 +19,7 @@
         </div>
         <div v-if="details.traits && details.traits.length > 0">
             <h3>Properties</h3>
-            <div class="traits-container">
+            <div class="traits-container mt-2">
                 <Trait
                     v-for="item in details.traits"
                     :key="item.trait_type + item.value"
@@ -55,7 +55,7 @@ export default class NFTDetail extends Vue {
     chain!: String;
     market!: String;
 
-    public toMarket(address: string, tokenId: string) {
+    toMarket(address: string, tokenId: string) {
         switch (this.market) {
             case 'opensea':
                 switch (this.chain) {
@@ -73,7 +73,7 @@ export default class NFTDetail extends Vue {
         }
     }
 
-    public toScan(address: string, tokenId: string) {
+    toScan(address: string, tokenId: string) {
         switch (this.chain) {
             case 'BSC':
                 window.open(`https://bscscan.com/token/${address}?a=${tokenId}`);
@@ -87,7 +87,7 @@ export default class NFTDetail extends Vue {
         }
     }
 
-    public getMarkdown(description: string): string {
+    getMarkdown(description: string): string {
         return marked(description);
     }
 }
diff --git a/src/components/NFT/NFTItem.vue b/src/components/NFT/NFTItem.vue
index 18986a5..fea8992 100644
--- a/src/components/NFT/NFTItem.vue
+++ b/src/components/NFT/NFTItem.vue
@@ -6,64 +6,37 @@
             'w-16 h-16 rounded': size === 'md',
             'w-full aspect-w-1 aspect-h-1 rounded':
                 size === 'auto' ||
-                ((this.imageUrl?.endsWith('.glb') || this.imageUrl?.endsWith('.gltf')) && this.isShowingDetails),
+                (viewType === 'model' && isShowingDetails) ||
+                (!(imageUrl && posterUrl) && isShowingDetails),
             rounded: size === 'contain',
         }"
     >
         <video
-            v-if="
-                imageUrl?.endsWith('.mp4') ||
-                imageUrl?.endsWith('.mov') ||
-                imageUrl?.endsWith('.webm') ||
-                imageUrl?.endsWith('.mp3')
-            "
-            :src="showImageUrl"
-            :poster="
-                posterUrl?.endsWith('.mp4') || posterUrl?.endsWith('.mov') || posterUrl?.endsWith('.webm')
-                    ? undefined
-                    : posterUrl
-            "
+            v-if="viewType === 'video'"
+            :src="mainUrl"
+            :poster="subUrl"
             class="nft-item"
-            :class="[!isShowingDetails ? 'object-cover' : 'object-contain', size === 'sm' ? 'rounded-sm' : 'rounded']"
-            :autoplay="isShowingDetails || posterUrl?.endsWith('.mp4') || posterUrl?.endsWith('.mov')"
+            :class="variableNFTClass"
+            :autoplay="isShowingDetails"
             loop
             webkit-playsinline
             playsinline
             muted
             :controls="isShowingDetails"
         />
-        <iframe
-            v-else-if="
-                (imageUrl?.endsWith('embed') ||
-                    imageUrl?.includes('farmhero.io') ||
-                    imageUrl?.includes('0xAdventures.com') ||
-                    imageUrl?.includes('crudefingers.com') ||
-                    imageUrl?.includes('artblocks.io') ||
-                    imageUrl?.endsWith('.html')) &&
-                isShowingDetails
-            "
-            :src="imageUrl"
-            class="nft-item"
-            :class="[!isShowingDetails ? 'object-cover' : 'object-contain', size === 'sm' ? 'rounded-sm' : 'rounded']"
-        />
+        <iframe v-else-if="viewType === 'website'" :src="mainUrl" class="nft-item" :class="variableNFTClass" />
         <model-viewer
-            v-else-if="modelView"
-            :src="imageUrl"
-            :poster="posterUrl"
+            v-else-if="viewType === 'model'"
+            :src="mainUrl"
             class="nft-item"
-            :class="[!isShowingDetails ? 'object-cover' : 'object-contain', size === 'sm' ? 'rounded-sm' : 'rounded']"
+            :class="variableNFTClass"
             ar-modes="webxr scene-viewer quick-look"
             environment-image="neutral"
             auto-rotate
             camera-controls
             loading="eager"
         />
-        <img
-            v-else
-            :src="showImageUrl"
-            class="nft-item"
-            :class="[!isShowingDetails ? 'object-cover' : 'object-contain', size === 'sm' ? 'rounded-sm' : 'rounded']"
-        />
+        <img v-else :src="mainUrl" class="nft-item" :class="variableNFTClass" />
     </div>
 </template>
 
@@ -74,8 +47,8 @@ import config from '@/config';
 @Options({
     props: {
         size: String,
-        posterUrl: String, // This should be image URL
-        imageUrl: String, // This should be detailed URL
+        posterUrl: String, // This should be preview URL
+        imageUrl: String, // This should be detail URL
         isShowingDetails: Boolean,
     },
 })
@@ -83,26 +56,15 @@ export default class NFTItem extends Vue {
     size!: String;
     imageUrl!: String;
     posterUrl!: String;
-    defaultImage: String = config.defaultAvatar;
     isShowingDetails!: boolean;
+    subUrl: string | undefined;
 
-    get modelView() {
-        const result = (this.imageUrl?.endsWith('.glb') || this.imageUrl?.endsWith('.gltf')) && this.isShowingDetails;
-        if (result) {
-            import(/* webpackChunkName: "model-viewer" */ '@google/model-viewer');
-        }
-        return result;
-    }
-
-    get showImageUrl() {
-        // isShowingDetails ? imageUrl || posterUrl || defaultImage : posterUrl || imageUrl || defaultImage
-        if (this.isShowingDetails) {
-            // Prefer detailed URL
-            return this.handleIPFS(this.imageUrl || this.posterUrl || this.defaultImage);
-        } else {
-            // Prefer preview URL
-            return this.handleIPFS(this.posterUrl || this.imageUrl || this.defaultImage);
-        }
+    get mainUrl() {
+        return this.handleIPFS(
+            this.isShowingDetails
+                ? this.imageUrl || this.posterUrl || config.defaultAvatar
+                : this.posterUrl || this.imageUrl || config.defaultAvatar,
+        );
     }
 
     handleIPFS(url: String) {
@@ -112,6 +74,43 @@ export default class NFTItem extends Vue {
             return url;
         }
     }
+
+    get viewType(): 'video' | 'website' | 'model' | 'image' {
+        if (this.mainUrl.endsWith('.mp4') || this.mainUrl.endsWith('.mov') || this.mainUrl.endsWith('.webm')) {
+            if (
+                !(
+                    this.posterUrl?.endsWith('.mp4') ||
+                    this.posterUrl?.endsWith('.mov') ||
+                    this.posterUrl?.endsWith('.webm')
+                )
+            ) {
+                this.subUrl = this.posterUrl.toString();
+            } else {
+                this.subUrl = undefined;
+            }
+            return 'video';
+        } else if (
+            this.mainUrl.endsWith('.html') ||
+            this.mainUrl.includes('farmhero.io') ||
+            this.mainUrl.includes('0xAdventures.com') ||
+            this.mainUrl.includes('crudefingers.com') ||
+            this.mainUrl.includes('artblocks.io')
+        ) {
+            return 'website';
+        } else if (this.mainUrl.endsWith('.gltf') || this.mainUrl.endsWith('.glb')) {
+            import(/* webpackChunkName: "model-viewer" */ '@google/model-viewer');
+            return 'model';
+        } else {
+            return 'image';
+        }
+    }
+
+    get variableNFTClass() {
+        return [
+            !this.isShowingDetails ? 'object-cover' : 'object-contain',
+            this.size === 'sm' ? 'rounded-sm' : 'rounded',
+        ];
+    }
 }
 </script>
 
diff --git a/src/components/AvatarEditor.vue b/src/components/Profile/AvatarEditor.vue
similarity index 100%
rename from src/components/AvatarEditor.vue
rename to src/components/Profile/AvatarEditor.vue
diff --git a/src/components/Profile.vue b/src/components/Profile/Profile.vue
similarity index 85%
rename from src/components/Profile.vue
rename to src/components/Profile/Profile.vue
index 193c93c..c42741a 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile/Profile.vue
@@ -32,10 +32,11 @@
                 md:flex-row md:col-start-2 md:row-start-2 md:items-center
             "
         >
-            <LinkButton class="relative" @click="emitClickAddress">
-                <span v-if="rns">{{ rns }}{{ suffix }}</span>
-                <span v-else>{{ filter(address) }}</span>
-                <Tooltip v-show="isShowingTooltip" text="Copied" viewOption="default" />
+            <LinkButton @click="emitClickAddress">
+                <transition name="tip-fade" mode="out-in">
+                    <span v-if="isShowingTooltip">Copied</span>
+                    <span v-else>{{ rns ? rns + suffix : filter(address) }}</span>
+                </transition>
             </LinkButton>
             <LinkButton @click="toExternalLink" v-if="website && !isLoadingPersona">
                 <span><i class="bx bx-link align-bottom" />{{ fixWebsiteURI(website) }}</span>
@@ -55,13 +56,12 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import ImgHolder from '@/components/ImgHolder.vue';
-import LinkButton from '@/components/LinkButton.vue';
+import ImgHolder from '@/components/Common/ImgHolder.vue';
+import LinkButton from '@/components/Button/LinkButton.vue';
 import config from '@/config';
-import Tooltip from '@/components/Tooltip.vue';
 
 @Options({
-    components: { Tooltip, ImgHolder, LinkButton },
+    components: { ImgHolder, LinkButton },
     props: {
         avatar: String,
         username: String,
@@ -113,7 +113,7 @@ export default class Profile extends Vue {
         this.isShowingTooltip = true;
         setTimeout(() => {
             this.isShowingTooltip = false;
-        }, 2000);
+        }, 1500);
     }
 }
 </script>
@@ -122,6 +122,7 @@ export default class Profile extends Vue {
 @layer components {
     .stats-container {
         @apply mb-2 w-16 text-primary-text cursor-pointer;
+
         .stats-number {
             @apply text-xl font-semibold;
         }
@@ -130,5 +131,15 @@ export default class Profile extends Vue {
             @apply text-base font-normal leading-none;
         }
     }
+
+    .tip-fade-enter-active,
+    .tip-fade-leave-active {
+        transition: opacity 0.5s ease;
+    }
+
+    .tip-fade-enter-from,
+    .tip-fade-leave-to {
+        opacity: 0;
+    }
 }
 </style>
diff --git a/src/components/Toolbar.vue b/src/components/Profile/Toolbar.vue
similarity index 97%
rename from src/components/Toolbar.vue
rename to src/components/Profile/Toolbar.vue
index ef173e6..49a4f1e 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Profile/Toolbar.vue
@@ -46,7 +46,7 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
+import Button from '@/components/Button/Button.vue';
 
 @Options({
     components: {
diff --git a/src/config.ts b/src/config.ts
index 5c4a9a1..dd773f5 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -18,6 +18,10 @@ export default {
     hubEndpoint: PAGE_ENV === 'production' ? 'https://hub.pass3.me' : 'https://hub-dev.pass3.me',
     defaultAvatar: 'https://rss3.mypinata.cloud/ipfs/QmVFq9qimnudPcs6QkQv8ZVEsvwD3aqETHWtS5yXgdbYY5',
     hideUnlistedAsstes: false,
+    tags: {
+        prefix: 'pass',
+        hiddenTag: 'hidden',
+    },
     subDomain: {
         isSubDomainMode,
         rootDomain: PAGE_ENV === 'production' ? 'rss3.bio' : currentRootDomain,
diff --git a/src/router.ts b/src/router.ts
index 1ac58cd..ad20174 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,38 +1,26 @@
-import { createRouter, createWebHistory } from 'vue-router';
-
-import Index from '@/views/Index.vue';
-/* IFTRUE_isDevelop */
-import Test from '@/views/Test.vue';
-/* FITRUE_isDevelop */
+import config from '@/config';
+import Accounts from '@/views/Account/Accounts.vue';
+import SetupAccounts from '@/views/Account/SetupAccounts.vue';
+import Gitcoins from '@/views/Donation/Gitcoins.vue';
+import SetupGitcoins from '@/views/Donation/SetupGitcoins.vue';
+import SingleGitcoin from '@/views/Donation/SingleGitcoin.vue';
+import Followers from '@/views/Follow/Followers.vue';
+import Followings from '@/views/Follow/Followings.vue';
+import Footprints from '@/views/Footprint/Footprints.vue';
+import SetupFootprints from '@/views/Footprint/SetupFootprints.vue';
+import SingleFootprint from '@/views/Footprint/SingleFootprint.vue';
 import Home from '@/views/Home.vue';
-import Followings from '@/views/Followings.vue';
-import Followers from '@/views/Followers.vue';
-import Accounts from '@/views/Accounts.vue';
-import NFTs from '@/views/NFTs.vue';
-import Gitcoins from '@/views/Gitcoins.vue';
-import Footprints from '@/views/Footprints.vue';
-import SingleNFT from '@/views/SingleNFT.vue';
-import SingleGitcoin from '@/views/SingleGitcoin.vue';
-import SingleFootprint from '@/views/SingleFootprint.vue';
-import Setup from '@/views/Setup/Setup.vue';
-import SetupAccounts from '@/views/Setup/SetupAccounts.vue';
-import SetupNFTs from '@/views/Setup/SetupNFTs.vue';
-import SetupGitcoins from '@/views/Setup/SetupGitcoins.vue';
-import SetupFootprints from '@/views/Setup/SetupFootprints.vue';
+import Index from '@/views/Index.vue';
+import NFTs from '@/views/NFT/NFTs.vue';
+import SetupNFTs from '@/views/NFT/SetupNFTs.vue';
+import SingleNFT from '@/views/NFT/SingleNFT.vue';
+import EditProfile from '@/views/Setup/EditProfile.vue';
 import RNS from '@/views/Setup/RNS.vue';
-import EditProfile from '@/views/EditProfile.vue';
 import RNSPending from '@/views/Setup/RNSPending.vue';
-
-import config from '@/config';
+import Setup from '@/views/Setup/Setup.vue';
+import { createRouter, createWebHistory } from 'vue-router';
 
 export const routes = [
-    /* IFTRUE_isDevelop */
-    {
-        path: '/test',
-        name: 'Test',
-        component: Test,
-    },
-    /* FITRUE_isDevelop */
     config.subDomain.isSubDomainMode
         ? {
               path: '/',
diff --git a/src/views/Account/Accounts.vue b/src/views/Account/Accounts.vue
new file mode 100644
index 0000000..0393400
--- /dev/null
+++ b/src/views/Account/Accounts.vue
@@ -0,0 +1,157 @@
+<template>
+    <div class="h-screen bg-account-bg overflow-y-auto">
+        <div class="m-auto pb-32 pt-8 px-4 max-w-screen-lg">
+            <Header :ethAddress="ethAddress" :rns="rns" :rss3Profile="rss3Profile" title="Accounts" theme="account" />
+            <div class="m-auto max-w-md">
+                <div class="flex flex-col gap-y-4">
+                    <div
+                        class="grid grid-cols-6 items-center justify-items-center"
+                        v-for="item in accounts"
+                        :key="item.platform + item.identity"
+                    >
+                        <EVMpAccountItem v-if="item.platform === 'EVM+'" :size="70" :address="item.identity" />
+                        <AccountItem v-else :size="70" :chain="item.platform" :address="item.identity" />
+                        <span class="col-span-3 text-account-title text-xl font-semibold sm:text-2xl">{{
+                            getDisplayAddress(item)
+                        }}</span>
+                        <Button
+                            size="sm"
+                            class="w-10 h-10 text-account-btn-m-text bg-account-btn-m shadow-account-btn-m"
+                            @click="copyToClipboard(item.identity)"
+                        >
+                            <i class="bx bxs-copy bx-sm"></i>
+                        </Button>
+                        <Button
+                            size="sm"
+                            class="w-10 h-10 text-account-btn-m-text bg-account-btn-m shadow-account-btn-m"
+                            @click="toExternalLink(item.identity, item.platform)"
+                        >
+                            <i class="bx bx-link-external bx-sm"></i>
+                        </Button>
+                    </div>
+                </div>
+            </div>
+            <div
+                class="fixed bottom-2 left-0 right-0 flex gap-5 m-auto px-4 py-4 w-full max-w-md bg-btn-container"
+                v-if="isOwner"
+            >
+                <Button
+                    size="lg"
+                    class="m-auto text-account-btn-m-text text-lg bg-account-btn-m shadow-account-btn-m"
+                    @click="toSetupAccounts"
+                >
+                    <span>Manage Accounts</span>
+                </Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+import Button from '@/components/Button/Button.vue';
+import EVMpAccountItem from '@/components/Account/EVMpAccountItem.vue';
+import AccountItem from '@/components/Account/AccountItem.vue';
+import RSS3 from '@/common/rss3';
+import { RSS3Account, RSS3Profile } from 'rss3-next/types/rss3';
+import ContentProviders from '@/common/content-providers';
+import utils from '@/common/utils';
+import Header from '@/components/Common/Header.vue';
+import setupTheme from '@/common/theme';
+
+@Options({
+    name: 'Accounts',
+    components: { EVMpAccountItem, Button, AccountItem, Header },
+})
+export default class Accounts extends Vue {
+    rns: string = '';
+    ethAddress: string = '';
+    isOwner: boolean = false;
+    accounts: RSS3Account[] = [];
+    lastRoute: string = '';
+    rss3Profile: RSS3Profile = {};
+
+    async mounted() {
+        await this.initLoad();
+    }
+
+    async initLoad() {
+        this.lastRoute = this.$route.fullPath;
+        await RSS3.reconnect();
+        const rss3 = await RSS3.visitor();
+        const owner: string = <string>rss3.account.address;
+
+        const { ethAddress, rns } = await utils.getAddress(<string>this.$route.params.address);
+        this.ethAddress = ethAddress;
+        this.rns = rns;
+        this.isOwner = ethAddress == owner;
+
+        this.rss3Profile = await rss3.profile.get(this.ethAddress);
+
+        // Setup theme
+        setupTheme(await rss3.assets.get(this.ethAddress));
+
+        const allAccounts = await rss3.accounts.get(this.ethAddress);
+        const { listed } = await utils.initAccounts(allAccounts);
+        this.accounts = listed;
+        this.accounts.unshift({
+            platform: 'EVM+',
+            identity: this.ethAddress,
+            signature: '',
+            tags: ['pass:order:-1'],
+        });
+    }
+
+    getDisplayAddress(account: RSS3Account) {
+        if (account.platform === 'Misskey' && account.identity.length <= 14) {
+            return account.identity;
+        } else {
+            return this.filter(account.identity);
+        }
+    }
+    /**
+     * filter
+     */
+    filter(address: string) {
+        return address.length > 14 ? `${address.slice(0, 6)}....${address.slice(-4)}` : address;
+    }
+
+    copyToClipboard(address: string) {
+        navigator.clipboard.writeText(address).then(
+            function () {
+                console.log('Async: Copying to clipboard was successful!');
+            },
+            function (err) {
+                console.log('Async: Could not copy the account: ', err);
+            },
+        );
+    }
+
+    toExternalLink(address: string, platform: string) {
+        switch (platform) {
+            case 'BSC':
+                window.open(`https://bscscan.com/address/${address}`);
+                break;
+            case 'Ethereum':
+                window.open(`https://etherscan.io/address/${address}`);
+                break;
+            case 'Misskey':
+            case 'Twitter':
+                window.open(ContentProviders[platform].getAccountLink(address));
+                break;
+        }
+    }
+
+    toSetupAccounts() {
+        this.$router.push(`/setup/accounts`);
+    }
+
+    activated() {
+        if (this.lastRoute !== this.$route.fullPath) {
+            this.initLoad();
+        }
+    }
+}
+</script>
+
+<style></style>
diff --git a/src/views/Setup/SetupAccounts.vue b/src/views/Account/SetupAccounts.vue
similarity index 88%
rename from src/views/Setup/SetupAccounts.vue
rename to src/views/Account/SetupAccounts.vue
index 83c804f..f6209eb 100644
--- a/src/views/Setup/SetupAccounts.vue
+++ b/src/views/Account/SetupAccounts.vue
@@ -1,34 +1,7 @@
 <template>
     <div class="h-screen text-body-text bg-body-bg overflow-y-auto">
         <div class="m-auto pb-32 pt-8 px-4 max-w-screen-lg">
-            <div class="flex items-center justify-between mb-4">
-                <Button
-                    size="sm"
-                    class="
-                        w-10
-                        h-10
-                        text-secondary-btn-text
-                        bg-secondary-btn
-                        border-secondary-btn-border
-                        shadow-secondary-btn
-                    "
-                    @click="back"
-                >
-                    <i class="bx bx-chevron-left bx-sm"></i>
-                </Button>
-                <span class="text-center">
-                    <h1 class="inline text-primary-text text-xl font-bold">Manage Accounts</h1>
-                </span>
-                <span class="avatar">
-                    <ImgHolder
-                        class="inline-flex my-auto w-10 h-10 cursor-pointer"
-                        :is-rounded="true"
-                        :is-border="false"
-                        :src="avatar"
-                        @click="back"
-                    />
-                </span>
-            </div>
+            <Header title="Manage Accounts" theme="account" :avatar="avatar" />
             <section class="grid gap-4 grid-cols-1 md:grid-cols-2">
                 <Card
                     title="Default"
@@ -148,8 +121,9 @@
                                 :list="show"
                                 group="accounts"
                                 itemKey="chain"
+                                :animation="200"
                             >
-                                <template #item="{ element, index }">
+                                <template #item="{ element }">
                                     <div
                                         class="inline-flex m-0.5 rounded-full shadow-account-item"
                                         style="cursor: grab"
@@ -215,6 +189,7 @@
                             :list="hide"
                             group="accounts"
                             itemKey="chain"
+                            :animation="200"
                         >
                             <template #item="{ element }">
                                 <div class="inline-flex m-0.5 rounded-full" style="cursor: grab">
@@ -348,12 +323,12 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import Card from '@/components/Card.vue';
-import AccountItem from '@/components/AccountItem.vue';
-import Modal from '@/components/Modal.vue';
-import Loading from '@/components/Loading.vue';
-import LoadingContainer from '@/components/LoadingContainer.vue';
+import Button from '@/components/Button/Button.vue';
+import Card from '@/components/Card/Card.vue';
+import AccountItem from '@/components/Account/AccountItem.vue';
+import Modal from '@/components/Common/Modal.vue';
+import Loading from '@/components/Loading/Loading.vue';
+import LoadingContainer from '@/components/Loading/LoadingContainer.vue';
 import { RSS3Account, RSS3Index } from 'rss3-next/types/rss3';
 import RSS3, { IRSS3 } from '@/common/rss3';
 import RNSUtils from '@/common/rns';
@@ -361,9 +336,11 @@ import config from '@/config';
 import ContentProviders from '@/common/content-providers';
 
 import draggable from 'vuedraggable';
-import Input from '@/components/Input.vue';
-import ImgHolder from '@/components/ImgHolder.vue';
-import EVMpAccountItem from '@/components/EVMpAccountItem.vue';
+import Input from '@/components/Input/Input.vue';
+import EVMpAccountItem from '@/components/Account/EVMpAccountItem.vue';
+import Header from '@/components/Common/Header.vue';
+import setupTheme from '@/common/theme';
+import utils from '@/common/utils';
 
 @Options({
     name: 'SetupAccounts',
@@ -377,7 +354,7 @@ import EVMpAccountItem from '@/components/EVMpAccountItem.vue';
         draggable,
         Loading,
         LoadingContainer,
-        ImgHolder,
+        Header,
     },
 })
 export default class SetupAccounts extends Vue {
@@ -440,42 +417,14 @@ export default class SetupAccounts extends Vue {
         this.rns = await RNSUtils.addr2Name(this.ethAddress);
 
         // Setup theme
-        const themes = RSS3.getAvailableThemes(await (<IRSS3>this.rss3).assets.get());
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
+        setupTheme(await (<IRSS3>this.rss3).assets.get());
 
         const accounts = await (<IRSS3>this.rss3).accounts.get((<IRSS3>this.rss3).account.address);
         if (accounts) {
-            accounts.forEach((account: RSS3Account) => {
-                if (account.tags?.includes('hidden')) {
-                    this.hide.push(account);
-                } else {
-                    this.show.push(account);
-                }
-            });
-            this.hide.sort((a, b) => {
-                return this.getTaggedOrder(a) - this.getTaggedOrder(b);
-            });
-            this.show.sort((a, b) => {
-                return this.getTaggedOrder(a) - this.getTaggedOrder(b);
-            });
-        }
-    }
-
-    getTaggedOrder(account: RSS3Account): number {
-        if (!account.tags) {
-            return -1;
+            const { listed, unlisted } = await utils.initAccounts(accounts);
+            this.show = listed;
+            this.hide = unlisted;
         }
-        const orderPattern = /^pass:order:(-?\d+)$/i;
-        for (const tag of account.tags) {
-            if (orderPattern.test(tag)) {
-                return parseInt(orderPattern.exec(tag)?.[1] || '-1');
-            }
-        }
-        return -1;
     }
 
     setTaggedOrder(account: RSS3Account, order: number): void {
@@ -491,11 +440,6 @@ export default class SetupAccounts extends Vue {
         account.tags.push(`pass:order:${order}`);
     }
 
-    async back() {
-        // Rollback by remote
-        await window.history.back();
-    }
-
     async addMetamaskAccount(platform: string) {
         if (!(window as any).ethereum) {
             this.addAccountNotice =
@@ -607,8 +551,7 @@ export default class SetupAccounts extends Vue {
             this.setTaggedOrder(account, order);
             await (<IRSS3>this.rss3).accounts.patchTags(
                 {
-                    platform: account.platform,
-                    identity: account.identity,
+                    ...account,
                 },
                 account.tags,
             );
@@ -624,8 +567,7 @@ export default class SetupAccounts extends Vue {
             this.setTaggedOrder(account, order);
             await (<IRSS3>this.rss3).accounts.patchTags(
                 {
-                    platform: account.platform,
-                    identity: account.identity,
+                    ...account,
                 },
                 account.tags,
             );
diff --git a/src/views/Accounts.vue b/src/views/Accounts.vue
deleted file mode 100644
index fa984f5..0000000
--- a/src/views/Accounts.vue
+++ /dev/null
@@ -1,277 +0,0 @@
-<template>
-    <div class="h-screen bg-account-bg overflow-y-auto">
-        <div class="m-auto pb-32 pt-8 px-4 max-w-screen-lg">
-            <div class="header flex items-center justify-between pb-4">
-                <Button
-                    size="sm"
-                    class="w-10 h-10 text-secondary-btn-text bg-secondary-btn shadow-secondary-btn"
-                    @click="back"
-                >
-                    <i class="bx bx-chevron-left bx-sm"></i>
-                </Button>
-                <div class="section-title text-center text-account-title text-2xl font-bold">Accounts</div>
-                <ImgHolder
-                    class="inline-flex my-auto w-10 h-10 cursor-pointer"
-                    :is-rounded="true"
-                    :is-border="false"
-                    :src="rss3Profile.avatar"
-                    :alt="rss3Profile.username"
-                    @click="toPublicPage(rns, ethAddress)"
-                />
-            </div>
-            <div class="m-auto max-w-md">
-                <div class="flex flex-col gap-y-4">
-                    <div
-                        class="account-wrapper grid grid-cols-6 items-center justify-items-center"
-                        v-for="item in accounts"
-                        :key="item.platform + item.identity"
-                    >
-                        <EVMpAccountItem v-if="item.platform === 'EVM+'" :size="70" :address="item.identity" />
-                        <AccountItem v-else :size="70" :chain="item.platform" :address="item.identity" />
-                        <span class="address col-span-3 text-account-title text-2xl font-semibold">{{
-                            getDisplayAddress(item)
-                        }}</span>
-                        <Button
-                            size="sm"
-                            class="w-10 h-10 text-account-btn-m-text bg-account-btn-m shadow-account-btn-m"
-                            @click="copyToClipboard(item.identity)"
-                        >
-                            <i class="bx bxs-copy bx-sm"></i>
-                        </Button>
-                        <Button
-                            size="sm"
-                            class="w-10 h-10 text-account-btn-m-text bg-account-btn-m shadow-account-btn-m"
-                            @click="toExternalLink(item.identity, item.platform)"
-                        >
-                            <i class="bx bx-link-external bx-sm"></i>
-                        </Button>
-                    </div>
-                </div>
-            </div>
-            <div
-                class="fixed bottom-2 left-0 right-0 flex gap-5 m-auto px-4 py-4 w-full max-w-md bg-btn-container"
-                v-if="isOwner"
-            >
-                <Button
-                    size="lg"
-                    class="m-auto text-account-btn-m-text text-lg bg-account-btn-m shadow-account-btn-m"
-                    @click="toSetupAccounts"
-                >
-                    <span>Manage Accounts</span>
-                </Button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import ImgHolder from '@/components/ImgHolder.vue';
-import EVMpAccountItem from '@/components/EVMpAccountItem.vue';
-import AccountItem from '@/components/AccountItem.vue';
-import RSS3, { IRSS3 } from '@/common/rss3';
-import { RSS3Account, RSS3Index } from 'rss3-next/types/rss3';
-import RNSUtils from '@/common/rns';
-import config from '@/config';
-import ContentProviders from '@/common/content-providers';
-import { getName } from '@/common/utils';
-
-interface Profile {
-    avatar: string;
-    username: string;
-    address: string;
-    bio: string;
-}
-
-@Options({
-    name: 'Accounts',
-    components: { EVMpAccountItem, ImgHolder, Button, AccountItem },
-})
-export default class Accounts extends Vue {
-    rns: string = '';
-    ethAddress: string = '';
-    public isOwner: boolean = false;
-    public accounts: RSS3Account[] = [];
-    public rss3Profile: Profile = {
-        avatar: config.defaultAvatar,
-        username: '',
-        address: '',
-        bio: '',
-    };
-    lastRoute: string = '';
-
-    async mounted() {
-        await this.initLoad();
-    }
-
-    async initLoad() {
-        this.lastRoute = this.$route.fullPath;
-        this.accounts = [];
-        this.rss3Profile.avatar = config.defaultAvatar;
-
-        await RSS3.reconnect();
-        const rss3 = await RSS3.visitor();
-        const owner: string = <string>rss3.account.address;
-        await this.getAddress(owner);
-
-        const profile = await rss3.profile.get(this.ethAddress);
-        this.rss3Profile.avatar = profile?.avatar?.[0] || config.defaultAvatar;
-        this.rss3Profile.username = profile?.name || '';
-        this.rss3Profile.address = this.ethAddress;
-
-        // Setup theme
-        const themes = RSS3.getAvailableThemes(await rss3.assets.get(this.ethAddress));
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
-
-        this.accounts.push({
-            platform: 'EVM+',
-            identity: this.ethAddress,
-            signature: '',
-            tags: ['pass:order:-1'],
-        });
-
-        const accounts = await rss3.accounts.get(this.ethAddress);
-        await this.loadAccounts(accounts);
-    }
-
-    async getAddress(owner: string) {
-        let address: string = '';
-        if (config.subDomain.isSubDomainMode) {
-            // Is subdomain mode
-            address = getName();
-        } else if (this.$route.params.address) {
-            address = <string>this.$route.params.address;
-        } else {
-            return false;
-        }
-
-        if (address) {
-            if (address.startsWith('0x')) {
-                // Might be address type
-                // Get RNS and redirect
-                this.ethAddress = address;
-                this.rns = await RNSUtils.addr2Name(address);
-                if (this.rns !== '') {
-                    window.location.href =
-                        'https://' +
-                        this.rns +
-                        '.' +
-                        config.subDomain.rootDomain +
-                        window.location.pathname.replace(`/${address}`, '');
-                }
-            } else {
-                // RNS
-                this.rns = address;
-                this.ethAddress = (await RNSUtils.name2Addr(address)).toString();
-                if (parseInt(this.ethAddress) === 0) {
-                    return false;
-                }
-            }
-
-            this.isOwner = this.ethAddress === owner;
-        }
-
-        return true;
-    }
-
-    getDisplayAddress(account: RSS3Account) {
-        if (account.platform === 'Misskey' && account.identity.length <= 14) {
-            return account.identity;
-        } else {
-            return this.filter(account.identity);
-        }
-    }
-    /**
-     * filter
-     */
-    public filter(address: string) {
-        return address.length > 14 ? `${address.slice(0, 6)}....${address.slice(-4)}` : address;
-    }
-
-    public copyToClipboard(address: string) {
-        navigator.clipboard.writeText(address).then(
-            function () {
-                console.log('Async: Copying to clipboard was successful!');
-            },
-            function (err) {
-                console.log('Async: Could not copy the account: ', err);
-            },
-        );
-    }
-
-    async loadAccounts(accounts: RSS3Account[]) {
-        // Get accounts
-        if (accounts) {
-            accounts.forEach((account: RSS3Account) => {
-                if (!account.tags?.includes('hidden')) {
-                    this.accounts.push(account);
-                }
-            });
-            this.accounts.sort((a, b) => {
-                return this.getTaggedOrder(a) - this.getTaggedOrder(b);
-            });
-        }
-    }
-
-    getTaggedOrder(taggedElement: RSS3Account): number {
-        if (!taggedElement.tags) {
-            return -1;
-        }
-        const orderPattern = /^pass:order:(-?\d+)$/i;
-        for (const tag of taggedElement.tags) {
-            if (orderPattern.test(tag)) {
-                return parseInt(orderPattern.exec(tag)?.[1] || '-1');
-            }
-        }
-        return -1;
-    }
-
-    toPublicPage(rns: string, ethAddress: string) {
-        if (rns && config.subDomain.isSubDomainMode) {
-            this.$router.push('/');
-        } else {
-            this.$router.push(`/${rns || ethAddress}`);
-        }
-    }
-
-    public toExternalLink(address: string, platform: string) {
-        switch (platform) {
-            case 'BSC':
-                window.open(`https://bscscan.com/address/${address}`);
-                break;
-            case 'Ethereum':
-                window.open(`https://etherscan.io/address/${address}`);
-                break;
-            case 'Misskey':
-            case 'Twitter':
-                window.open(ContentProviders[platform].getAccountLink(address));
-                break;
-        }
-    }
-
-    public toSetupAccounts() {
-        this.$router.push(`/setup/accounts`);
-    }
-
-    public back() {
-        if (window.history.state.back) {
-            window.history.back();
-        } else {
-            this.$router.push(config.subDomain.isSubDomainMode ? '/' : `/${this.rns || this.ethAddress}`);
-        }
-    }
-
-    activated() {
-        if (this.lastRoute !== this.$route.fullPath) {
-            this.initLoad();
-        }
-    }
-}
-</script>
-
-<style></style>
diff --git a/src/views/Donation/Gitcoins.vue b/src/views/Donation/Gitcoins.vue
new file mode 100644
index 0000000..2f7212a
--- /dev/null
+++ b/src/views/Donation/Gitcoins.vue
@@ -0,0 +1,141 @@
+<template>
+    <div id="main" class="h-screen bg-gitcoin-bg overflow-y-auto">
+        <div class="m-auto pb-32 pt-8 px-4 max-w-screen-lg">
+            <Header :ethAddress="ethAddress" :rns="rns" :rss3Profile="rss3Profile" title="Donations" theme="gitcoin" />
+            <GitcoinTitle class="mb-6" :grants="grants" :contributions="contribs" />
+            <div
+                class="grid gap-6 grid-cols-1 sm:grid-cols-2"
+                :class="{ 'pb-16': isOwner }"
+                v-show="gitcoins.length !== 0"
+            >
+                <GitcoinCard
+                    v-for="item in gitcoins"
+                    :key="item.platform + item.identity + item.id"
+                    :imageUrl="item.info.image_preview_url || defaultAvatar"
+                    :name="item.info.title || 'Inactive Project'"
+                    :contrib="item.info.total_contribs"
+                    :amount="item.info.token_contribs"
+                    @click="toSingleGitcoin(item.platform, item.identity, item.id, item.type)"
+                ></GitcoinCard>
+            </div>
+            <div
+                class="fixed bottom-2 left-0 right-0 flex gap-5 m-auto px-4 py-4 w-full max-w-md bg-btn-container"
+                v-if="isOwner"
+            >
+                <Button
+                    size="lg"
+                    class="m-auto text-gitcoin-btn-m-text text-lg bg-gitcoin-btn-m shadow-gitcoin-btn-m"
+                    @click="toSetupGitcoins"
+                >
+                    <span>Manage Donations</span>
+                </Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+import Button from '@/components/Button/Button.vue';
+import GitcoinTitle from '@/components/Donation/GitcoinTitle.vue';
+import GitcoinCard from '@/components/Donation/GitcoinCard.vue';
+import config from '@/config';
+import RSS3 from '@/common/rss3';
+import { GeneralAssetWithTags } from '@/common/types';
+import { debounce } from 'lodash';
+import utils from '@/common/utils';
+import { RSS3Profile } from 'rss3-next/types/rss3';
+import Header from '@/components/Common/Header.vue';
+import setupTheme from '@/common/theme';
+
+@Options({
+    name: 'Gitcoins',
+    components: { Button, GitcoinTitle, GitcoinCard, Header },
+})
+export default class Gitcoins extends Vue {
+    rns: string = '';
+    ethAddress: string = '';
+    grants: number = 0;
+    contribs: number = 0;
+    gitcoins: GeneralAssetWithTags[] = [];
+    isOwner: boolean = false;
+    rss3Profile: RSS3Profile = {};
+    scrollTop: number = 0;
+    lastRoute: string = '';
+
+    async mounted() {
+        this.mountScrollEvent();
+    }
+
+    async initLoad() {
+        this.lastRoute = this.$route.fullPath;
+        this.contribs = 0;
+        this.gitcoins = [];
+
+        await RSS3.reconnect();
+        const rss3 = await RSS3.visitor();
+        const owner: string = <string>rss3.account.address;
+
+        const { ethAddress, rns } = await utils.getAddress(<string>this.$route.params.address);
+        this.ethAddress = ethAddress;
+        this.rns = rns;
+        this.isOwner = ethAddress == owner;
+
+        this.rss3Profile = await rss3.profile.get(this.ethAddress);
+
+        // Setup theme
+        setupTheme(await rss3.assets.get(this.ethAddress));
+
+        const gitcoinsData = await RSS3.getAssetProfile(this.ethAddress, 'Gitcoin-Donation');
+        if (gitcoinsData) {
+            const { listed } = await utils.initAssets(
+                await rss3.assets.get(this.ethAddress),
+                gitcoinsData.assets,
+                'Gitcoin-Donation',
+            );
+            this.gitcoins = listed;
+            this.grants = this.gitcoins.length;
+        }
+    }
+
+    toSetupGitcoins() {
+        this.$router.push(`/setup/gitcoins`);
+    }
+
+    toGitcoin() {
+        window.open(`https://gitcoin.co/`);
+    }
+
+    toSingleGitcoin(platform: string, identity: string, id: string, type: string) {
+        this.$router.push(
+            (config.subDomain.isSubDomainMode ? '' : `/${this.rns || this.ethAddress}`) +
+                `/singlegitcoin/${platform}/${identity}/${id}/${type}`,
+        );
+    }
+
+    mountScrollEvent() {
+        const el = document.getElementById('main');
+        if (el) {
+            el.addEventListener(
+                'scroll',
+                debounce((ev) => {
+                    this.scrollTop = el.scrollTop;
+                }, 100),
+            );
+        }
+    }
+
+    activated() {
+        if (this.lastRoute === this.$route.fullPath) {
+            const el = document.getElementById('main');
+            if (el) {
+                el.scrollTop = this.scrollTop;
+            }
+        } else {
+            this.initLoad();
+        }
+    }
+}
+</script>
+
+<style></style>
diff --git a/src/views/Setup/SetupGitcoins.vue b/src/views/Donation/SetupGitcoins.vue
similarity index 62%
rename from src/views/Setup/SetupGitcoins.vue
rename to src/views/Donation/SetupGitcoins.vue
index c611bd9..2241c47 100644
--- a/src/views/Setup/SetupGitcoins.vue
+++ b/src/views/Donation/SetupGitcoins.vue
@@ -1,34 +1,7 @@
 <template>
     <div class="h-screen text-body-text bg-body-bg overflow-y-auto">
         <div class="m-auto pb-32 pt-8 px-4 max-w-screen-lg">
-            <div class="flex items-center justify-between mb-4">
-                <Button
-                    size="sm"
-                    class="
-                        w-10
-                        h-10
-                        text-secondary-btn-text
-                        bg-secondary-btn
-                        border-secondary-btn-border
-                        shadow-secondary-btn
-                    "
-                    @click="back"
-                >
-                    <i class="bx bx-chevron-left bx-sm" />
-                </Button>
-                <span class="text-center">
-                    <h1 class="inline text-gitcoin-title text-xl font-bold">Manage Donations</h1>
-                </span>
-                <span class="avatar">
-                    <ImgHolder
-                        class="inline-flex my-auto w-10 h-10 cursor-pointer"
-                        :is-rounded="true"
-                        :is-border="false"
-                        :src="avatar"
-                        @click="back"
-                    />
-                </span>
-            </div>
+            <Header title="Manage Donations" theme="gitcoin" :avatar="avatar" />
             <section class="grid gap-4 grid-cols-1 md:grid-cols-2">
                 <Card
                     title="Listed"
@@ -46,6 +19,7 @@
                             group="gitcoins"
                             data-type="displayed"
                             item-key="displayed"
+                            :animation="200"
                         >
                             <template #item="{ element }">
                                 <GitcoinItem
@@ -101,6 +75,7 @@
                             group="gitcoins"
                             data-type="displayed"
                             item-key="displayed"
+                            :animation="200"
                         >
                             <template #item="{ element }">
                                 <GitcoinItem
@@ -150,28 +125,27 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import Card from '@/components/Card.vue';
+import Button from '@/components/Button/Button.vue';
+import Card from '@/components/Card/Card.vue';
 import draggable from 'vuedraggable';
-import ImgHolder from '@/components/ImgHolder.vue';
 import RSS3, { IRSS3 } from '@/common/rss3';
 import config from '@/config';
 import { GeneralAsset, GeneralAssetWithTags } from '@/common/types';
-import LoadingContainer from '@/components/LoadingContainer.vue';
-import { RSS3Account, RSS3Asset } from 'rss3-next/types/rss3';
-import NFTItem from '@/components/NFT/NFTItem.vue';
-import GitcoinItem from '@/components/GitcoinItem.vue';
+import LoadingContainer from '@/components/Loading/LoadingContainer.vue';
+import GitcoinItem from '@/components/Donation/GitcoinItem.vue';
+import utils from '@/common/utils';
+import Header from '@/components/Common/Header.vue';
+import setupTheme from '@/common/theme';
 
 @Options({
     name: 'SetupGitcoins',
     components: {
         GitcoinItem,
-        NFTItem,
         LoadingContainer,
         Button,
         Card,
         draggable,
-        ImgHolder,
+        Header,
     },
 })
 export default class SetupGitcoins extends Vue {
@@ -205,71 +179,20 @@ export default class SetupGitcoins extends Vue {
         }
 
         // Setup theme
-        const themes = RSS3.getAvailableThemes(await (<IRSS3>this.rss3).assets.get());
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
+        setupTheme(await (<IRSS3>this.rss3).assets.get());
 
         const data = await RSS3.getAssetProfile((<IRSS3>this.rss3).account.address, 'Gitcoin-Donation');
         if (data) {
-            await this.loadAssets(
+            const { listed, unlisted } = await utils.initAssets(
                 await (<IRSS3>this.rss3).assets.get((<IRSS3>this.rss3).account.address),
                 <GeneralAsset[]>data.assets,
+                'Gitcoin-Donation',
             );
+            this.show = listed;
+            this.hide = unlisted;
         }
     }
 
-    private getAssetOrder(nft: RSS3Asset) {
-        let order = -1;
-        nft.tags?.forEach((tag: string) => {
-            if (tag.startsWith('pass:order:')) {
-                order = parseInt(tag.substr(11));
-            }
-        });
-        return order;
-    }
-
-    async loadAssets(assetsInRSS3File: RSS3Asset[], assetsGrabbed: GeneralAsset[]) {
-        const assetsMerge: GeneralAssetWithTags[] = await Promise.all(
-            (assetsGrabbed || []).map(async (ag: GeneralAssetWithTags) => {
-                const origType = ag.type;
-                ag.type = 'Invalid'; // Using as a match mark
-                for (const airf of assetsInRSS3File) {
-                    if (
-                        airf.platform === ag.platform &&
-                        airf.identity === ag.identity &&
-                        airf.id === ag.id &&
-                        airf.type === origType
-                    ) {
-                        // Matched
-                        ag.type = origType; // Recover type
-                        if (airf.tags) {
-                            ag.tags = airf.tags;
-                        }
-                        break;
-                    }
-                }
-                return ag;
-            }),
-        );
-
-        const GitcoinList: GeneralAssetWithTags[] = [];
-
-        for (const am of assetsMerge) {
-            if (am.type.includes('Gitcoin-Donation')) {
-                GitcoinList.push(am);
-            } // else Invalid
-        }
-        this.show = GitcoinList.filter((nft) => !nft.tags || nft.tags.indexOf('pass:hidden') === -1).sort(
-            (a, b) => this.getAssetOrder(a) - this.getAssetOrder(b),
-        );
-        this.hide = GitcoinList.filter((nft) => nft.tags && nft.tags.indexOf('pass:hidden') !== -1).sort(
-            (a, b) => this.getAssetOrder(a) - this.getAssetOrder(b),
-        );
-    }
-
     hideAll() {
         this.hide.push(...this.show.splice(0, this.show.length));
     }
@@ -277,39 +200,9 @@ export default class SetupGitcoins extends Vue {
         this.show.push(...this.hide.splice(0, this.hide.length));
     }
 
-    back() {
-        window.history.back();
-    }
-
     async save() {
         this.isLoading = true;
-        await Promise.all(
-            this.show.map((gitcoin, index) => {
-                return this.rss3?.assets.patchTags(
-                    {
-                        type: gitcoin.type,
-                        platform: gitcoin.platform,
-                        identity: gitcoin.identity,
-                        id: gitcoin.id,
-                    },
-                    [`pass:order:${index}`],
-                );
-            }),
-        );
-        await Promise.all(
-            this.hide.map((gitcoin) => {
-                return this.rss3?.assets.patchTags(
-                    {
-                        type: gitcoin.type,
-                        platform: gitcoin.platform,
-                        identity: gitcoin.identity,
-                        id: gitcoin.id,
-                    },
-                    ['pass:hidden'],
-                );
-            }),
-        );
-        await this.rss3?.files.sync();
+        await utils.saveAssetsOrder(this.show, this.hide);
         this.isLoading = false;
         window.history.back();
     }
diff --git a/src/views/Donation/SingleGitcoin.vue b/src/views/Donation/SingleGitcoin.vue
new file mode 100644
index 0000000..992dfd9
--- /dev/null
+++ b/src/views/Donation/SingleGitcoin.vue
@@ -0,0 +1,81 @@
+<template>
+    <div class="h-screen bg-gitcoin-bg overflow-y-auto">
+        <div class="m-auto pb-20 pt-8 px-4 max-w-screen-lg">
+            <Header :ethAddress="ethAddress" :rns="rns" :rss3Profile="rss3Profile" list="gitcoins" />
+            <section class="flex flex-col gap-y-8 m-auto max-w-screen-sm">
+                <GitcoinItem :imageUrl="grant.logo" size="contain" />
+                <GitcoinDetails :details="grant" :donationInfo="donationInfo" />
+            </section>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+import Button from '@/components/Button/Button.vue';
+import ImgHolder from '@/components/Common/ImgHolder.vue';
+import GitcoinItem from '@/components/Donation/GitcoinItem.vue';
+import config from '@/config';
+import RSS3 from '@/common/rss3';
+import utils from '@/common/utils';
+import GitcoinDetails from '@/components/Donation/GitcoinDetails.vue';
+import { DonationInfo, GrantInfo } from '@/common/types';
+import { RSS3Profile } from 'rss3-next/types/rss3';
+import Header from '@/components/Common/Header.vue';
+import setupTheme from '@/common/theme';
+
+@Options({
+    name: 'SingleGitcoin',
+    components: { ImgHolder, Button, GitcoinItem, GitcoinDetails, Header },
+})
+export default class SingleGitcoin extends Vue {
+    rns: string = '';
+    ethAddress: string = '';
+    rss3Profile: RSS3Profile = {};
+
+    grant?: GrantInfo = {
+        active: true,
+        logo: config.defaultAvatar,
+        slug: '...',
+        reference_url: '...',
+        description: '...',
+    };
+    donationInfo?: DonationInfo[] = [];
+
+    async mounted() {
+        await RSS3.reconnect();
+        const rss3 = await RSS3.visitor();
+
+        const { ethAddress, rns } = await utils.getAddress(<string>this.$route.params.address);
+        this.ethAddress = ethAddress;
+        this.rns = rns;
+
+        this.rss3Profile = await rss3.profile.get(this.ethAddress);
+
+        // Setup theme
+        await setupTheme(await rss3.assets.get(this.ethAddress));
+
+        await this.loadGitcoin();
+    }
+
+    async loadGitcoin() {
+        const platform: string = <string>this.$route.params.platform;
+        const identity: string = <string>this.$route.params.identity;
+        const id: string = <string>this.$route.params.id;
+
+        const res = await RSS3.getGitcoinDonation(this.ethAddress, platform, identity, id);
+        if (res) {
+            this.grant = res.data.grant;
+            this.donationInfo = res.data.txs.sort((a, b) => {
+                return parseInt(b.timeStamp) - parseInt(a.timeStamp);
+            });
+        }
+    }
+
+    toExternalLink(address: string) {
+        window.open(address);
+    }
+}
+</script>
+
+<style></style>
diff --git a/src/views/Followers.vue b/src/views/Follow/Followers.vue
similarity index 54%
rename from src/views/Followers.vue
rename to src/views/Follow/Followers.vue
index 564ecc5..f24af28 100644
--- a/src/views/Followers.vue
+++ b/src/views/Follow/Followers.vue
@@ -1,24 +1,7 @@
 <template>
     <div class="h-screen bg-body-bg overflow-y-auto">
         <div class="m-auto pb-20 pt-8 px-4 max-w-screen-lg">
-            <div class="flex items-center justify-between pb-4">
-                <Button
-                    size="sm"
-                    class="w-10 h-10 text-secondary-btn-text bg-secondary-btn shadow-secondary-btn"
-                    @click="back"
-                >
-                    <i class="bx bx-chevron-left bx-sm"></i>
-                </Button>
-                <div class="section-title text-center text-primary-text text-2xl font-bold">Followers</div>
-                <ImgHolder
-                    class="inline-flex my-auto w-10 h-10 cursor-pointer"
-                    :is-rounded="true"
-                    :is-border="false"
-                    :src="rss3Profile.avatar"
-                    :alt="rss3Profile.username"
-                    @click="toPublicPage(rns, ethAddress)"
-                />
-            </div>
+            <Header :ethAddress="ethAddress" :rns="rns" :rss3Profile="rss3Profile" title="Followers" theme="primary" />
             <div class="flex flex-col gap-y-4 m-auto max-w-md">
                 <FollowerCard
                     class="w-auto cursor-pointer"
@@ -36,82 +19,32 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import ImgHolder from '@/components/ImgHolder.vue';
-import FollowerCard from '@/components/FollowerCard.vue';
+import Button from '@/components/Button/Button.vue';
+import ImgHolder from '@/components/Common/ImgHolder.vue';
+import FollowerCard from '@/components/Follow/FollowerCard.vue';
 import RSS3, { IRSS3 } from '@/common/rss3';
 import RNSUtils from '@/common/rns';
 import config from '@/config';
 import { reverse, uniq } from 'lodash';
-import { getName } from '@/common/utils';
-
-interface Profile {
-    avatar: string;
-    username: string;
-    address: string;
-    bio: string;
-    rns: string;
-    displayAddress: string;
-}
+import setupTheme from '@/common/theme';
+import utils from '@/common/utils';
+import { Profile } from '@/common/types';
+import { RSS3Profile } from 'rss3-next/types/rss3';
+import Header from '@/components/Common/Header.vue';
 
 @Options({
     name: 'Followers',
-    components: { ImgHolder, Button, FollowerCard },
+    components: { ImgHolder, Button, FollowerCard, Header },
 })
 export default class Followers extends Vue {
     followerList: Array<Profile> = [];
-    rss3Profile: Profile = {
-        avatar: config.defaultAvatar,
-        username: '',
-        address: '',
-        bio: '',
-        rns: '',
-        displayAddress: '',
-    };
+    rss3Profile: RSS3Profile = {};
     rns: string = '';
     ethAddress: string = '';
     lastRoute: string = '';
     isPageActive: boolean = false;
     loadingNo: number = 0;
 
-    async setupAddress() {
-        let address: string = '';
-        if (config.subDomain.isSubDomainMode) {
-            // Is subdomain mode
-            address = getName();
-        } else if (this.$route.params.address) {
-            address = <string>this.$route.params.address;
-        } else {
-            return false;
-        }
-
-        if (address) {
-            if (address.startsWith('0x')) {
-                // Might be address type
-                // Get RNS and redirect
-                this.ethAddress = address;
-                this.rns = await RNSUtils.addr2Name(address);
-                if (this.rns !== '') {
-                    window.location.href =
-                        'https://' +
-                        this.rns +
-                        '.' +
-                        config.subDomain.rootDomain +
-                        window.location.pathname.replace(`/${address}`, '');
-                }
-            } else {
-                // RNS
-                this.rns = address;
-                this.ethAddress = (await RNSUtils.name2Addr(address)).toString();
-                if (parseInt(this.ethAddress) === 0) {
-                    return false;
-                }
-            }
-        }
-
-        return true;
-    }
-
     async initLoad() {
         this.lastRoute = this.$route.fullPath;
         this.followerList = [];
@@ -136,6 +69,9 @@ export default class Followers extends Vue {
                 this.loadDetails(rss3);
             }, 0);
         }
+
+        // Setup theme
+        setupTheme(await rss3.assets.get(this.ethAddress));
     }
 
     async loadDetails(rss3: IRSS3) {
@@ -158,23 +94,9 @@ export default class Followers extends Vue {
         }
     }
 
-    async setupTheme() {
-        const rss3 = await RSS3.visitor();
-        // Setup theme
-        const themes = RSS3.getAvailableThemes(await rss3.assets.get(this.ethAddress));
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
-    }
-
     async setProfile() {
         const rss3 = await RSS3.visitor();
-        const profile = await rss3.profile.get(this.ethAddress);
-        this.rss3Profile.avatar = profile?.avatar?.[0] || config.defaultAvatar;
-        this.rss3Profile.username = profile?.name || '';
-        this.rss3Profile.address = this.ethAddress;
+        this.rss3Profile = await rss3.profile.get(this.ethAddress);
     }
 
     async setPageTitleFavicon() {
@@ -189,23 +111,14 @@ export default class Followers extends Vue {
         return `${address.slice(0, 6)}...${address.slice(-4)}`;
     }
 
-    async toPublicPage(rns: string, ethAddress: string) {
-        if (rns) {
-            window.location.href = `//${rns}.${config.subDomain.rootDomain}`;
-        } else {
-            window.location.href = `//${config.subDomain.rootDomain}/${ethAddress}`;
-        }
-    }
-
-    back() {
-        this.$router.push(config.subDomain.isSubDomainMode ? '/' : `/${this.rns || this.ethAddress}`);
-    }
-
     async activated() {
         this.isPageActive = true;
-        await this.setupAddress();
+
+        const { ethAddress, rns } = await utils.getAddress(<string>this.$route.params.address);
+        this.ethAddress = ethAddress;
+        this.rns = rns;
+
         setTimeout(async () => {
-            await this.setupTheme();
             await this.setPageTitleFavicon();
             if (this.lastRoute !== this.$route.fullPath) {
                 await this.setProfile();
@@ -219,6 +132,14 @@ export default class Followers extends Vue {
     async deactivated() {
         this.isPageActive = false;
     }
+
+    async toPublicPage(rns: string, ethAddress: string) {
+        if (rns) {
+            window.location.href = `//${rns}.${config.subDomain.rootDomain}`;
+        } else {
+            window.location.href = `//${config.subDomain.rootDomain}/${ethAddress}`;
+        }
+    }
 }
 </script>
 
diff --git a/src/views/Followings.vue b/src/views/Follow/Followings.vue
similarity index 54%
rename from src/views/Followings.vue
rename to src/views/Follow/Followings.vue
index 9a76600..76a298c 100644
--- a/src/views/Followings.vue
+++ b/src/views/Follow/Followings.vue
@@ -1,24 +1,7 @@
 <template>
     <div class="h-screen bg-body-bg overflow-y-auto">
         <div class="m-auto pb-20 pt-8 px-4 max-w-screen-lg">
-            <div class="flex items-center justify-between pb-4">
-                <Button
-                    size="sm"
-                    class="w-10 h-10 text-secondary-btn-text bg-secondary-btn shadow-secondary-btn"
-                    @click="back"
-                >
-                    <i class="bx bx-chevron-left bx-sm"></i>
-                </Button>
-                <div class="section-title text-center text-primary-text text-2xl font-bold">Followings</div>
-                <ImgHolder
-                    class="inline-flex my-auto w-10 h-10 cursor-pointer"
-                    :is-rounded="true"
-                    :is-border="false"
-                    :src="rss3Profile.avatar"
-                    :alt="rss3Profile.username"
-                    @click="toPublicPage(rns, ethAddress)"
-                />
-            </div>
+            <Header :ethAddress="ethAddress" :rns="rns" :rss3Profile="rss3Profile" title="Followings" theme="primary" />
             <div class="flex flex-col gap-y-4 m-auto max-w-md">
                 <FollowerCard
                     class="w-auto cursor-pointer"
@@ -36,82 +19,32 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import ImgHolder from '@/components/ImgHolder.vue';
-import FollowerCard from '@/components/FollowerCard.vue';
+import Button from '@/components/Button/Button.vue';
+import ImgHolder from '@/components/Common/ImgHolder.vue';
+import FollowerCard from '@/components/Follow/FollowerCard.vue';
 import RSS3, { IRSS3 } from '@/common/rss3';
 import RNSUtils from '@/common/rns';
 import config from '@/config';
 import { reverse, uniq } from 'lodash';
-import { getName } from '@/common/utils';
-
-interface Profile {
-    avatar: string;
-    username: string;
-    address: string;
-    bio: string;
-    rns: string;
-    displayAddress: string;
-}
+import setupTheme from '@/common/theme';
+import utils from '@/common/utils';
+import { Profile } from '@/common/types';
+import { RSS3Profile } from 'rss3-next/types/rss3';
+import Header from '@/components/Common/Header.vue';
 
 @Options({
     name: 'Followings',
-    components: { ImgHolder, Button, FollowerCard },
+    components: { ImgHolder, Button, FollowerCard, Header },
 })
 export default class Followings extends Vue {
     followingList: Array<Profile> = [];
-    rss3Profile: Profile = {
-        avatar: config.defaultAvatar,
-        username: '',
-        address: '',
-        bio: '',
-        rns: '',
-        displayAddress: '',
-    };
+    rss3Profile: RSS3Profile = {};
     rns: string = '';
     ethAddress: string = '';
     lastRoute: string = '';
     isPageActive: boolean = false;
     loadingNo: number = 0;
 
-    async setupAddress() {
-        let address: string = '';
-        if (config.subDomain.isSubDomainMode) {
-            // Is subdomain mode
-            address = getName();
-        } else if (this.$route.params.address) {
-            address = <string>this.$route.params.address;
-        } else {
-            return false;
-        }
-
-        if (address) {
-            if (address.startsWith('0x')) {
-                // Might be address type
-                // Get RNS and redirect
-                this.ethAddress = address;
-                this.rns = await RNSUtils.addr2Name(address);
-                if (this.rns !== '') {
-                    window.location.href =
-                        'https://' +
-                        this.rns +
-                        '.' +
-                        config.subDomain.rootDomain +
-                        window.location.pathname.replace(`/${address}`, '');
-                }
-            } else {
-                // RNS
-                this.rns = address;
-                this.ethAddress = (await RNSUtils.name2Addr(address)).toString();
-                if (parseInt(this.ethAddress) === 0) {
-                    return false;
-                }
-            }
-        }
-
-        return true;
-    }
-
     async initLoad() {
         this.lastRoute = this.$route.fullPath;
         this.followingList = [];
@@ -136,6 +69,9 @@ export default class Followings extends Vue {
                 this.loadDetails(rss3);
             }, 0);
         }
+
+        // Setup theme
+        setupTheme(await rss3.assets.get(this.ethAddress));
     }
 
     async loadDetails(rss3: IRSS3) {
@@ -158,23 +94,9 @@ export default class Followings extends Vue {
         }
     }
 
-    async setupTheme() {
-        const rss3 = await RSS3.visitor();
-        // Setup theme
-        const themes = RSS3.getAvailableThemes(await rss3.assets.get(this.ethAddress));
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
-    }
-
     async setProfile() {
         const rss3 = await RSS3.visitor();
-        const profile = await rss3.profile.get(this.ethAddress);
-        this.rss3Profile.avatar = profile?.avatar?.[0] || config.defaultAvatar;
-        this.rss3Profile.username = profile?.name || '';
-        this.rss3Profile.address = this.ethAddress;
+        this.rss3Profile = await rss3.profile.get(this.ethAddress);
     }
 
     async setPageTitleFavicon() {
@@ -189,23 +111,14 @@ export default class Followings extends Vue {
         return `${address.slice(0, 6)}...${address.slice(-4)}`;
     }
 
-    async toPublicPage(rns: string, ethAddress: string) {
-        if (rns) {
-            window.location.href = `//${rns}.${config.subDomain.rootDomain}`;
-        } else {
-            window.location.href = `//${config.subDomain.rootDomain}/${ethAddress}`;
-        }
-    }
-
-    back() {
-        this.$router.push(config.subDomain.isSubDomainMode ? '/' : `/${this.rns || this.ethAddress}`);
-    }
-
     async activated() {
         this.isPageActive = true;
-        await this.setupAddress();
+
+        const { ethAddress, rns } = await utils.getAddress(<string>this.$route.params.address);
+        this.ethAddress = ethAddress;
+        this.rns = rns;
+
         setTimeout(async () => {
-            await this.setupTheme();
             await this.setPageTitleFavicon();
             if (this.lastRoute !== this.$route.fullPath) {
                 await this.setProfile();
@@ -219,6 +132,14 @@ export default class Followings extends Vue {
     async deactivated() {
         this.isPageActive = false;
     }
+
+    async toPublicPage(rns: string, ethAddress: string) {
+        if (rns) {
+            window.location.href = `//${rns}.${config.subDomain.rootDomain}`;
+        } else {
+            window.location.href = `//${config.subDomain.rootDomain}/${ethAddress}`;
+        }
+    }
 }
 </script>
 
diff --git a/src/views/Footprint/Footprints.vue b/src/views/Footprint/Footprints.vue
new file mode 100644
index 0000000..add5f9c
--- /dev/null
+++ b/src/views/Footprint/Footprints.vue
@@ -0,0 +1,139 @@
+<template>
+    <div id="main" class="h-screen bg-footprint-bg overflow-y-auto">
+        <div class="m-auto pb-32 pt-8 px-4 max-w-screen-lg">
+            <Header
+                :ethAddress="ethAddress"
+                :rns="rns"
+                :rss3Profile="rss3Profile"
+                title="Footprints"
+                theme="footprint"
+            />
+            <div
+                class="grid grid-cols-1 divide-footprint-divider divide-y-xs sm:grid-cols-2"
+                :class="{ 'pb-16': isOwner }"
+            >
+                <FootprintCard
+                    v-for="item of footprints"
+                    :key="item.platform + item.identity + item.id"
+                    :imageUrl="item.info.image_preview_url"
+                    :username="rss3Profile.username"
+                    :activity="item.info.title"
+                    :start-date="item.info.start_date"
+                    :end-date="item.info.end_date"
+                    :location="item.info.city || item.info.country || 'Metaverse'"
+                    class="cursor-pointer"
+                    @click="toSingleFootprint(item.platform, item.identity, item.id, item.type)"
+                />
+            </div>
+            <div
+                class="fixed bottom-2 left-0 right-0 flex gap-5 m-auto px-4 py-4 w-full max-w-md bg-btn-container"
+                v-if="isOwner"
+            >
+                <Button
+                    size="lg"
+                    class="m-auto text-footprint-btn-m-text text-lg bg-footprint-btn-m shadow-footprint-btn-m"
+                    @click="toSetupFootprints"
+                >
+                    <span>Manage Footprints</span>
+                </Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+import Button from '@/components/Button/Button.vue';
+import FootprintCard from '@/components/Footprint/FootprintCard.vue';
+import config from '@/config';
+import RSS3 from '@/common/rss3';
+import { GeneralAssetWithTags } from '@/common/types';
+import { debounce } from 'lodash';
+import utils from '@/common/utils';
+import { RSS3Profile } from 'rss3-next/types/rss3';
+import Header from '@/components/Common/Header.vue';
+import setupTheme from '@/common/theme';
+
+@Options({
+    name: 'Footprints',
+    components: { FootprintCard, Button, Header },
+})
+export default class Footprints extends Vue {
+    rns: string = '';
+    ethAddress: string = '';
+    footprints: GeneralAssetWithTags[] = [];
+    isOwner: boolean = false;
+    rss3Profile: RSS3Profile = {};
+    scrollTop: number = 0;
+    lastRoute: string = '';
+
+    async mounted() {
+        this.mountScrollEvent();
+    }
+
+    async initLoad() {
+        this.lastRoute = this.$route.fullPath;
+        this.footprints = [];
+
+        await RSS3.reconnect();
+        const rss3 = await RSS3.visitor();
+        const owner: string = <string>rss3.account.address;
+
+        const { ethAddress, rns } = await utils.getAddress(<string>this.$route.params.address);
+        this.ethAddress = ethAddress;
+        this.rns = rns;
+        this.isOwner = ethAddress == owner;
+
+        this.rss3Profile = await rss3.profile.get(this.ethAddress);
+
+        // Setup theme
+        await setupTheme(await rss3.assets.get(this.ethAddress));
+
+        const footprintsData = await RSS3.getAssetProfile(this.ethAddress, 'POAP');
+        if (footprintsData) {
+            const { listed } = await utils.initAssets(
+                await rss3.assets.get(this.ethAddress),
+                footprintsData.assets,
+                'POAP',
+            );
+            this.footprints = listed;
+        }
+    }
+
+    toSetupFootprints() {
+        this.$router.push(`/setup/footprints`);
+    }
+
+    toSingleFootprint(platform: string, identity: string, id: string, type: string) {
+        this.$router.push(
+            (config.subDomain.isSubDomainMode ? '' : `/${this.rns || this.ethAddress}`) +
+                `/singlefootprint/${platform}/${identity}/${id}/${type}`,
+        );
+    }
+
+    mountScrollEvent() {
+        const el = document.getElementById('main');
+        if (el) {
+            el.addEventListener(
+                'scroll',
+                debounce((ev) => {
+                    this.scrollTop = el.scrollTop;
+                }, 100),
+            );
+        }
+    }
+
+    activated() {
+        if (this.lastRoute === this.$route.fullPath) {
+            const el = document.getElementById('main');
+            if (el) {
+                el.scrollTop = this.scrollTop;
+            }
+        } else {
+            this.initLoad();
+        }
+    }
+}
+</script>
+
+<style></style>
diff --git a/src/views/Setup/SetupFootprints.vue b/src/views/Footprint/SetupFootprints.vue
similarity index 61%
rename from src/views/Setup/SetupFootprints.vue
rename to src/views/Footprint/SetupFootprints.vue
index a1eda75..dde8aec 100644
--- a/src/views/Setup/SetupFootprints.vue
+++ b/src/views/Footprint/SetupFootprints.vue
@@ -1,34 +1,7 @@
 <template>
     <div class="h-screen text-body-text bg-body-bg overflow-y-auto">
         <div class="m-auto pb-32 pt-8 px-4 max-w-screen-lg">
-            <div class="flex items-center justify-between mb-4">
-                <Button
-                    size="sm"
-                    class="
-                        w-10
-                        h-10
-                        text-secondary-btn-text
-                        bg-secondary-btn
-                        border-secondary-btn-border
-                        shadow-secondary-btn
-                    "
-                    @click="back"
-                >
-                    <i class="bx bx-chevron-left bx-sm" />
-                </Button>
-                <span class="text-center">
-                    <h1 class="inline text-footprint-title text-xl font-bold">Manage Footprints</h1>
-                </span>
-                <span class="avatar">
-                    <ImgHolder
-                        class="inline-flex my-auto w-10 h-10 cursor-pointer"
-                        :is-rounded="true"
-                        :is-border="false"
-                        :src="avatar"
-                        @click="back"
-                    />
-                </span>
-            </div>
+            <Header title="Manage Footprints" theme="footprint" :avatar="avatar" />
             <section class="grid gap-4 grid-cols-1 md:grid-cols-2">
                 <Card
                     title="Listed"
@@ -46,12 +19,13 @@
                             group="footprints"
                             data-type="displayed"
                             item-key="displayed"
+                            :animation="200"
                         >
                             <template #item="{ element }">
                                 <FootprintItem
                                     class="inline-flex mx-0.5"
                                     style="cursor: grab"
-                                    :size="70"
+                                    size="md"
                                     :imageUrl="element.info.image_preview_url"
                                 />
                             </template>
@@ -101,12 +75,13 @@
                             group="footprints"
                             data-type="displayed"
                             item-key="displayed"
+                            :animation="200"
                         >
                             <template #item="{ element }">
                                 <FootprintItem
                                     class="inline-flex mx-0.5"
                                     style="cursor: grab"
-                                    :size="70"
+                                    size="md"
                                     :imageUrl="element.info.image_preview_url"
                                 />
                             </template>
@@ -150,28 +125,27 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import Card from '@/components/Card.vue';
+import Button from '@/components/Button/Button.vue';
+import Card from '@/components/Card/Card.vue';
 import draggable from 'vuedraggable';
-import ImgHolder from '@/components/ImgHolder.vue';
 import RSS3, { IRSS3 } from '@/common/rss3';
 import config from '@/config';
 import { GeneralAsset, GeneralAssetWithTags } from '@/common/types';
-import LoadingContainer from '@/components/LoadingContainer.vue';
-import { RSS3Account, RSS3Asset } from 'rss3-next/types/rss3';
-import NFTItem from '@/components/NFT/NFTItem.vue';
-import FootprintItem from '@/components/FootprintItem.vue';
+import LoadingContainer from '@/components/Loading/LoadingContainer.vue';
+import FootprintItem from '@/components/Footprint/FootprintItem.vue';
+import utils from '@/common/utils';
+import Header from '@/components/Common/Header.vue';
+import setupTheme from '@/common/theme';
 
 @Options({
     name: 'SetupFootprints',
     components: {
         FootprintItem,
-        NFTItem,
         LoadingContainer,
         Button,
         Card,
         draggable,
-        ImgHolder,
+        Header,
     },
 })
 export default class SetupFootprints extends Vue {
@@ -205,71 +179,20 @@ export default class SetupFootprints extends Vue {
         }
 
         // Setup theme
-        const themes = RSS3.getAvailableThemes(await (<IRSS3>this.rss3).assets.get());
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
+        setupTheme(await (<IRSS3>this.rss3).assets.get());
 
         const data = await RSS3.getAssetProfile((<IRSS3>this.rss3).account.address, 'POAP');
         if (data) {
-            await this.loadAssets(
+            const { listed, unlisted } = await utils.initAssets(
                 await (<IRSS3>this.rss3).assets.get((<IRSS3>this.rss3).account.address),
                 <GeneralAsset[]>data.assets,
+                'POAP',
             );
+            this.show = listed;
+            this.hide = unlisted;
         }
     }
 
-    private getAssetOrder(nft: RSS3Asset) {
-        let order = -1;
-        nft.tags?.forEach((tag: string) => {
-            if (tag.startsWith('pass:order:')) {
-                order = parseInt(tag.substr(11));
-            }
-        });
-        return order;
-    }
-
-    async loadAssets(assetsInRSS3File: RSS3Asset[], assetsGrabbed: GeneralAsset[]) {
-        const assetsMerge: GeneralAssetWithTags[] = await Promise.all(
-            (assetsGrabbed || []).map(async (ag: GeneralAssetWithTags) => {
-                const origType = ag.type;
-                ag.type = 'Invalid'; // Using as a match mark
-                for (const airf of assetsInRSS3File) {
-                    if (
-                        airf.platform === ag.platform &&
-                        airf.identity === ag.identity &&
-                        airf.id === ag.id &&
-                        airf.type === origType
-                    ) {
-                        // Matched
-                        ag.type = origType; // Recover type
-                        if (airf.tags) {
-                            ag.tags = airf.tags;
-                        }
-                        break;
-                    }
-                }
-                return ag;
-            }),
-        );
-
-        const FootprintList: GeneralAssetWithTags[] = [];
-
-        for (const am of assetsMerge) {
-            if (am.type.includes('POAP')) {
-                FootprintList.push(am);
-            } // else Invalid
-        }
-        this.show = FootprintList.filter((nft) => !nft.tags || nft.tags.indexOf('pass:hidden') === -1).sort(
-            (a, b) => this.getAssetOrder(a) - this.getAssetOrder(b),
-        );
-        this.hide = FootprintList.filter((nft) => nft.tags && nft.tags.indexOf('pass:hidden') !== -1).sort(
-            (a, b) => this.getAssetOrder(a) - this.getAssetOrder(b),
-        );
-    }
-
     hideAll() {
         this.hide.push(...this.show.splice(0, this.show.length));
     }
@@ -277,39 +200,9 @@ export default class SetupFootprints extends Vue {
         this.show.push(...this.hide.splice(0, this.hide.length));
     }
 
-    back() {
-        window.history.back();
-    }
-
     async save() {
         this.isLoading = true;
-        await Promise.all(
-            this.show.map((footprint, index) => {
-                return this.rss3?.assets.patchTags(
-                    {
-                        type: footprint.type,
-                        platform: footprint.platform,
-                        identity: footprint.identity,
-                        id: footprint.id,
-                    },
-                    [`pass:order:${index}`],
-                );
-            }),
-        );
-        await Promise.all(
-            this.hide.map((footprint) => {
-                return this.rss3?.assets.patchTags(
-                    {
-                        type: footprint.type,
-                        platform: footprint.platform,
-                        identity: footprint.identity,
-                        id: footprint.id,
-                    },
-                    ['pass:hidden'],
-                );
-            }),
-        );
-        await this.rss3?.files.sync();
+        await utils.saveAssetsOrder(this.show, this.hide);
         this.isLoading = false;
         window.history.back();
     }
diff --git a/src/views/Footprint/SingleFootprint.vue b/src/views/Footprint/SingleFootprint.vue
new file mode 100644
index 0000000..37f1308
--- /dev/null
+++ b/src/views/Footprint/SingleFootprint.vue
@@ -0,0 +1,94 @@
+<template>
+    <div class="h-screen bg-footprint-bg overflow-y-auto">
+        <div class="m-auto pb-20 pt-8 px-4 max-w-screen-lg">
+            <Header
+                :ethAddress="ethAddress"
+                :rns="rns"
+                :rss3Profile="rss3Profile"
+                title="Footprint"
+                theme="footprint"
+                list="footprints"
+            />
+            <section class="m-auto max-w-screen-sm">
+                <FootprintItem class="mb-4" :imageUrl="details.event.image_url" size="auto" />
+                <FootprintDetails :details="details" />
+            </section>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+import Button from '@/components/Button/Button.vue';
+import FootprintItem from '@/components/Footprint/FootprintItem.vue';
+import { POAP } from '@/common/types';
+import RSS3 from '@/common/rss3';
+import utils from '@/common/utils';
+import FootprintDetails from '@/components/Footprint/FootprintDetails.vue';
+import { RSS3Profile } from 'rss3-next/types/rss3';
+import Header from '@/components/Common/Header.vue';
+import setupTheme from '@/common/theme';
+
+@Options({
+    name: 'SingleFootprint',
+    components: { Button, FootprintItem, FootprintDetails, Header },
+})
+export default class SingleFootprint extends Vue {
+    rns: string = '';
+    ethAddress: string = '';
+    rss3Profile: RSS3Profile = {};
+    details: POAP = {
+        event: {
+            id: 0,
+            fancy_id: '',
+            country: '',
+            city: '',
+            description: '',
+            year: 1970,
+            start_date: '',
+            end_date: '',
+            expiry_date: '',
+            name: '',
+            image_url: '',
+            event_url: '',
+            supply: 0,
+        },
+        owner: '',
+        tokenId: '',
+    };
+
+    async mounted() {
+        await RSS3.reconnect();
+        const rss3 = await RSS3.visitor();
+
+        const { ethAddress, rns } = await utils.getAddress(<string>this.$route.params.address);
+        this.ethAddress = ethAddress;
+        this.rns = rns;
+
+        this.rss3Profile = await rss3.profile.get(this.ethAddress);
+
+        const platform: string = String(this.$route.params.platform);
+        const identity: string = String(this.$route.params.identity);
+        const id: string = String(this.$route.params.id);
+
+        // Setup theme
+        await setupTheme(await rss3.assets.get(this.ethAddress));
+
+        const footprintData = await RSS3.getAssetProfile(this.ethAddress, 'POAP');
+
+        if (footprintData) {
+            const asset = footprintData.assets.find(
+                (ag) => ag.platform === platform && ag.identity === identity && ag.id === id,
+            );
+            if (asset) {
+                const detail = (await RSS3.getFootprintDetail(this.ethAddress, platform, identity, id))?.data;
+                if (detail) {
+                    this.details = detail;
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style></style>
diff --git a/src/views/Footprints.vue b/src/views/Footprints.vue
deleted file mode 100644
index ebeafbd..0000000
--- a/src/views/Footprints.vue
+++ /dev/null
@@ -1,271 +0,0 @@
-<template>
-    <div id="main" class="h-screen bg-footprint-bg overflow-y-auto">
-        <div class="m-auto pb-32 pt-8 px-4 max-w-screen-lg">
-            <div class="header flex items-center justify-between pb-4">
-                <Button
-                    size="sm"
-                    class="
-                        border-secondary-button-border
-                        w-10
-                        h-10
-                        text-secondary-btn-text
-                        bg-secondary-btn
-                        shadow-secondary-btn
-                    "
-                    @click="back"
-                >
-                    <i class="bx bx-chevron-left bx-sm"></i>
-                </Button>
-                <div class="section-title text-center text-footprint-title text-2xl font-bold">Footprints</div>
-                <ImgHolder
-                    class="inline-flex my-auto w-10 h-10 cursor-pointer"
-                    :is-rounded="true"
-                    :is-border="false"
-                    :src="rss3Profile.avatar"
-                    :alt="rss3Profile.username"
-                    @click="toPublicPage(rns, ethAddress)"
-                />
-            </div>
-            <div
-                class="footprint-footprints grid grid-cols-1 divide-footprint-divider divide-y-xs sm:grid-cols-2"
-                :class="{ 'pb-16': isOwner }"
-            >
-                <FootprintCard
-                    v-for="item of footprints"
-                    :key="item.platform + item.identity + item.id"
-                    :imageUrl="item.info.image_preview_url"
-                    :username="rss3Profile.username"
-                    :activity="item.info.title"
-                    :start-date="item.info.start_date"
-                    :end-date="item.info.end_date"
-                    :location="item.info.city || item.info.country || 'Metaverse'"
-                    class="cursor-pointer"
-                    @click="toSingleFootprint(item.platform, item.identity, item.id, item.type)"
-                />
-            </div>
-            <div
-                class="fixed bottom-2 left-0 right-0 flex gap-5 m-auto px-4 py-4 w-full max-w-md bg-btn-container"
-                v-if="isOwner"
-            >
-                <Button
-                    size="lg"
-                    class="m-auto text-footprint-btn-m-text text-lg bg-footprint-btn-m shadow-footprint-btn-m"
-                    @click="toSetupFootprints"
-                >
-                    <span>Manage Footprints</span>
-                </Button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import ImgHolder from '@/components/ImgHolder.vue';
-import FootprintCard from '@/components/FootprintCard.vue';
-import config from '@/config';
-import RNSUtils from '@/common/rns';
-import RSS3 from '@/common/rss3';
-import { GeneralAsset, GeneralAssetWithTags } from '@/common/types';
-import { RSS3Asset } from 'rss3-next/types/rss3';
-import { debounce } from 'lodash';
-import { getName } from '@/common/utils';
-
-interface Profile {
-    avatar: string;
-    username: string;
-    address: string;
-    bio: string;
-}
-
-@Options({
-    name: 'Footprints',
-    components: { FootprintCard, ImgHolder, Button },
-})
-export default class Footprints extends Vue {
-    rns: string = '';
-    ethAddress: string = '';
-    footprints: GeneralAssetWithTags[] = [];
-    isOwner: boolean = false;
-    rss3Profile: Profile = {
-        avatar: config.defaultAvatar,
-        username: '',
-        address: '',
-        bio: '',
-    };
-    private defaultAvatar = config.defaultAvatar;
-    scrollTop: number = 0;
-    lastRoute: string = '';
-
-    async mounted() {
-        this.mountScrollEvent();
-    }
-
-    async initLoad() {
-        this.lastRoute = this.$route.fullPath;
-        this.footprints = [];
-        this.rss3Profile.avatar = config.defaultAvatar;
-
-        await RSS3.reconnect();
-        const rss3 = await RSS3.visitor();
-        const owner: string = <string>rss3.account.address;
-        await this.getAddress(owner);
-
-        const profile = await rss3.profile.get(this.ethAddress);
-        this.rss3Profile.avatar = profile?.avatar?.[0] || config.defaultAvatar;
-        this.rss3Profile.username = profile?.name || '';
-        this.rss3Profile.address = this.ethAddress;
-
-        // Setup theme
-        const themes = RSS3.getAvailableThemes(await rss3.assets.get(this.ethAddress));
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
-
-        const footprintsData = await RSS3.getAssetProfile(this.ethAddress, 'POAP');
-        if (footprintsData) {
-            await this.loadFootprint(await rss3.assets.get(this.ethAddress), footprintsData.assets);
-        }
-    }
-
-    async getAddress(owner: string) {
-        let address: string = '';
-        if (config.subDomain.isSubDomainMode) {
-            // Is subdomain mode
-            address = getName();
-        } else if (this.$route.params.address) {
-            address = <string>this.$route.params.address;
-        } else {
-            return false;
-        }
-
-        if (address) {
-            if (address.startsWith('0x')) {
-                // Might be address type
-                // Get RNS and redirect
-                this.ethAddress = address;
-                this.rns = await RNSUtils.addr2Name(address);
-                if (this.rns !== '') {
-                    window.location.href =
-                        'https://' +
-                        this.rns +
-                        '.' +
-                        config.subDomain.rootDomain +
-                        window.location.pathname.replace(`/${address}`, '');
-                }
-            } else {
-                // RNS
-                this.rns = address;
-                this.ethAddress = (await RNSUtils.name2Addr(address)).toString();
-                if (parseInt(this.ethAddress) === 0) {
-                    return false;
-                }
-            }
-
-            this.isOwner = this.ethAddress === owner;
-        }
-
-        return true;
-    }
-
-    private getAssetOrder(asset: RSS3Asset) {
-        let order = -1;
-        asset.tags?.forEach((tag: string) => {
-            if (tag.startsWith('pass:order:')) {
-                order = parseInt(tag.substr(11));
-            }
-        });
-        return order;
-    }
-
-    async loadFootprint(assetsInRSS3File: RSS3Asset[], assetsGrabbed: GeneralAsset[]) {
-        const assetsMerge: GeneralAssetWithTags[] = await Promise.all(
-            (assetsGrabbed || []).map(async (ag: GeneralAssetWithTags) => {
-                const origType = ag.type;
-                if (config.hideUnlistedAsstes) {
-                    ag.type = 'Invalid'; // Using as a match mark
-                }
-                for (const airf of assetsInRSS3File) {
-                    if (
-                        airf.platform === ag.platform &&
-                        airf.identity === ag.identity &&
-                        airf.id === ag.id &&
-                        airf.type === origType
-                    ) {
-                        // Matched
-                        ag.type = origType; // Recover type
-                        if (airf.tags) {
-                            ag.tags = airf.tags;
-                        }
-                        break;
-                    }
-                }
-                return ag;
-            }),
-        );
-
-        const FootprintList: GeneralAssetWithTags[] = [];
-
-        for (const am of assetsMerge) {
-            if (am.type.includes('POAP')) {
-                FootprintList.push(am);
-            }
-        }
-
-        this.footprints = FootprintList.filter((asset) => !asset.tags || asset.tags.indexOf('pass:hidden') === -1).sort(
-            (a, b) => this.getAssetOrder(a) - this.getAssetOrder(b),
-        );
-    }
-
-    toPublicPage(rns: string, ethAddress: string) {
-        if (rns && config.subDomain.isSubDomainMode) {
-            this.$router.push('/');
-        } else {
-            this.$router.push(`/${rns || ethAddress}`);
-        }
-    }
-
-    back() {
-        this.$router.push(config.subDomain.isSubDomainMode ? '/' : `/${this.rns || this.ethAddress}`);
-    }
-
-    toSetupFootprints() {
-        this.$router.push(`/setup/footprints`);
-    }
-
-    toSingleFootprint(platform: string, identity: string, id: string, type: string) {
-        this.$router.push(
-            (config.subDomain.isSubDomainMode ? '' : `/${this.rns || this.ethAddress}`) +
-                `/singlefootprint/${platform}/${identity}/${id}/${type}`,
-        );
-    }
-
-    mountScrollEvent() {
-        const el = document.getElementById('main');
-        if (el) {
-            el.addEventListener(
-                'scroll',
-                debounce((ev) => {
-                    this.scrollTop = el.scrollTop;
-                }, 100),
-            );
-        }
-    }
-
-    activated() {
-        if (this.lastRoute === this.$route.fullPath) {
-            const el = document.getElementById('main');
-            if (el) {
-                el.scrollTop = this.scrollTop;
-            }
-        } else {
-            this.initLoad();
-        }
-    }
-}
-</script>
-
-<style></style>
diff --git a/src/views/Gitcoins.vue b/src/views/Gitcoins.vue
deleted file mode 100644
index d2264fb..0000000
--- a/src/views/Gitcoins.vue
+++ /dev/null
@@ -1,279 +0,0 @@
-<template>
-    <div id="main" class="h-screen bg-gitcoin-bg overflow-y-auto">
-        <div class="m-auto pb-32 pt-8 px-4 max-w-screen-lg">
-            <div class="header flex items-center justify-between pb-4">
-                <Button
-                    size="sm"
-                    class="
-                        border-secondary-button-border
-                        w-10
-                        h-10
-                        text-secondary-btn-text
-                        bg-secondary-btn
-                        shadow-secondary-btn
-                    "
-                    @click="back"
-                >
-                    <i class="bx bx-chevron-left bx-sm"></i>
-                </Button>
-                <div class="section-title text-center text-gitcoin-title text-2xl font-bold">Donations</div>
-                <ImgHolder
-                    class="inline-flex my-auto w-10 h-10 cursor-pointer"
-                    :is-rounded="true"
-                    :is-border="false"
-                    :src="rss3Profile.avatar"
-                    :alt="rss3Profile.username"
-                    @click="toPublicPage(rns, ethAddress)"
-                />
-            </div>
-            <GitcoinTitle class="mb-6" :grants="grants" :contributions="contribs" />
-            <div
-                class="gitcoin-gitcoins grid gap-6 grid-cols-1 sm:grid-cols-2"
-                :class="{ 'pb-16': isOwner }"
-                v-show="gitcoins.length !== 0"
-            >
-                <GitcoinCard
-                    v-for="item in gitcoins"
-                    :key="item.platform + item.identity + item.id"
-                    :imageUrl="item.info.image_preview_url || defaultAvatar"
-                    :name="item.info.title || 'Inactive Project'"
-                    :contrib="item.info.total_contribs"
-                    :amount="item.info.token_contribs"
-                    @click="toSingleGitcoin(item.platform, item.identity, item.id, item.type)"
-                ></GitcoinCard>
-            </div>
-            <div
-                class="fixed bottom-2 left-0 right-0 flex gap-5 m-auto px-4 py-4 w-full max-w-md bg-btn-container"
-                v-if="isOwner"
-            >
-                <Button
-                    size="lg"
-                    class="m-auto text-gitcoin-btn-m-text text-lg bg-gitcoin-btn-m shadow-gitcoin-btn-m"
-                    @click="toSetupGitcoins"
-                >
-                    <span>Manage Donations</span>
-                </Button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import ImgHolder from '@/components/ImgHolder.vue';
-import GitcoinTitle from '@/components/GitcoinTitle.vue';
-import GitcoinCard from '@/components/GitcoinCard.vue';
-import config from '@/config';
-import RNSUtils from '@/common/rns';
-import RSS3 from '@/common/rss3';
-import { GeneralAsset, GeneralAssetWithTags } from '@/common/types';
-import { RSS3Asset } from 'rss3-next/types/rss3';
-import { debounce } from 'lodash';
-import { getName } from '@/common/utils';
-
-interface Profile {
-    avatar: string;
-    username: string;
-    address: string;
-    bio: string;
-}
-
-@Options({
-    name: 'Gitcoins',
-    components: { ImgHolder, Button, GitcoinTitle, GitcoinCard },
-})
-export default class Gitcoins extends Vue {
-    rns: string = '';
-    ethAddress: string = '';
-    grants: number = 0;
-    contribs: number = 0;
-    gitcoins: GeneralAssetWithTags[] = [];
-    isOwner: boolean = false;
-    rss3Profile: Profile = {
-        avatar: config.defaultAvatar,
-        username: '',
-        address: '',
-        bio: '',
-    };
-    private defaultAvatar = config.defaultAvatar;
-    scrollTop: number = 0;
-    lastRoute: string = '';
-
-    async mounted() {
-        this.mountScrollEvent();
-    }
-
-    async initLoad() {
-        this.lastRoute = this.$route.fullPath;
-        this.contribs = 0;
-        this.gitcoins = [];
-        this.rss3Profile.avatar = config.defaultAvatar;
-
-        await RSS3.reconnect();
-        const rss3 = await RSS3.visitor();
-        const owner: string = <string>rss3.account.address;
-        await this.getAddress(owner);
-
-        const profile = await rss3.profile.get(this.ethAddress);
-        this.rss3Profile.avatar = profile?.avatar?.[0] || config.defaultAvatar;
-        this.rss3Profile.username = profile?.name || '';
-        this.rss3Profile.address = this.ethAddress;
-
-        // Setup theme
-        const themes = RSS3.getAvailableThemes(await rss3.assets.get(this.ethAddress));
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
-
-        const gitcoinsData = await RSS3.getAssetProfile(this.ethAddress, 'Gitcoin-Donation');
-        if (gitcoinsData) {
-            await this.loadGitcoin(await rss3.assets.get(this.ethAddress), gitcoinsData.assets);
-        }
-    }
-
-    async getAddress(owner: string) {
-        let address: string = '';
-        if (config.subDomain.isSubDomainMode) {
-            // Is subdomain mode
-            address = getName();
-        } else if (this.$route.params.address) {
-            address = <string>this.$route.params.address;
-        } else {
-            return false;
-        }
-
-        if (address) {
-            if (address.startsWith('0x')) {
-                // Might be address type
-                // Get RNS and redirect
-                this.ethAddress = address;
-                this.rns = await RNSUtils.addr2Name(address);
-                if (this.rns !== '') {
-                    window.location.href =
-                        'https://' +
-                        this.rns +
-                        '.' +
-                        config.subDomain.rootDomain +
-                        window.location.pathname.replace(`/${address}`, '');
-                }
-            } else {
-                // RNS
-                this.rns = address;
-                this.ethAddress = (await RNSUtils.name2Addr(address)).toString();
-                if (parseInt(this.ethAddress) === 0) {
-                    return false;
-                }
-            }
-
-            this.isOwner = this.ethAddress === owner;
-        }
-
-        return true;
-    }
-
-    private getAssetOrder(asset: RSS3Asset) {
-        let order = -1;
-        asset.tags?.forEach((tag: string) => {
-            if (tag.startsWith('pass:order:')) {
-                order = parseInt(tag.substr(11));
-            }
-        });
-        return order;
-    }
-
-    async loadGitcoin(assetsInRSS3File: RSS3Asset[], assetsGrabbed: GeneralAsset[]) {
-        const assetsMerge: GeneralAssetWithTags[] = await Promise.all(
-            (assetsGrabbed || []).map(async (ag: GeneralAssetWithTags) => {
-                const origType = ag.type;
-                if (config.hideUnlistedAsstes) {
-                    ag.type = 'Invalid'; // Using as a match mark
-                }
-                for (const airf of assetsInRSS3File) {
-                    if (
-                        airf.platform === ag.platform &&
-                        airf.identity === ag.identity &&
-                        airf.id === ag.id &&
-                        airf.type === origType
-                    ) {
-                        // Matched
-                        ag.type = origType; // Recover type
-                        if (airf.tags) {
-                            ag.tags = airf.tags;
-                        }
-                        break;
-                    }
-                }
-                return ag;
-            }),
-        );
-
-        const GitcoinList: GeneralAssetWithTags[] = [];
-
-        for (const am of assetsMerge) {
-            if (am.type.includes('Gitcoin-Donation') && !am.tags?.includes('pass:hidden')) {
-                this.contribs += <number>am.info.total_contribs;
-                GitcoinList.push(am);
-            }
-        }
-
-        this.gitcoins = GitcoinList.sort((a, b) => this.getAssetOrder(a) - this.getAssetOrder(b));
-
-        this.grants = this.gitcoins.length;
-    }
-
-    toPublicPage(rns: string, ethAddress: string) {
-        if (rns && config.subDomain.isSubDomainMode) {
-            this.$router.push('/');
-        } else {
-            this.$router.push(`/${rns || ethAddress}`);
-        }
-    }
-
-    back() {
-        this.$router.push(config.subDomain.isSubDomainMode ? '/' : `/${this.rns || this.ethAddress}`);
-    }
-
-    toSetupGitcoins() {
-        this.$router.push(`/setup/gitcoins`);
-    }
-
-    toGitcoin() {
-        window.open(`https://gitcoin.co/`);
-    }
-
-    toSingleGitcoin(platform: string, identity: string, id: string, type: string) {
-        this.$router.push(
-            (config.subDomain.isSubDomainMode ? '' : `/${this.rns || this.ethAddress}`) +
-                `/singlegitcoin/${platform}/${identity}/${id}/${type}`,
-        );
-    }
-
-    mountScrollEvent() {
-        const el = document.getElementById('main');
-        if (el) {
-            el.addEventListener(
-                'scroll',
-                debounce((ev) => {
-                    this.scrollTop = el.scrollTop;
-                }, 100),
-            );
-        }
-    }
-
-    activated() {
-        if (this.lastRoute === this.$route.fullPath) {
-            const el = document.getElementById('main');
-            if (el) {
-                el.scrollTop = this.scrollTop;
-            }
-        } else {
-            this.initLoad();
-        }
-    }
-}
-</script>
-
-<style></style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d64c2f5..fd690f5 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -13,7 +13,7 @@
                     :followers="rss3Relations.followers.length"
                     :followings="rss3Relations.followings.length"
                     :bio="rss3Profile.bio"
-                    :website="rss3Profile.link"
+                    :website="rss3Profile.displayAddress"
                     :is-loading-persona="isLoadingPersona"
                     @click-address="clickAddress"
                 >
@@ -229,7 +229,7 @@
                                 v-for="item of footprints.slice(1)"
                                 :key="item.platform + item.identity + item.id"
                                 :imageUrl="item.info.image_preview_url"
-                                :size="78"
+                                size="sm"
                                 class="flex-shrink-0 mr-2"
                                 @click="toSingleItemPage('Footprint', item.platform, item.identity, item.id, item.type)"
                             />
@@ -426,46 +426,35 @@
 
 <script lang="ts">
 import { Options, Vue, setup } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import Card from '@/components/Card.vue';
-import BarCard from '@/components/BarCard.vue';
-import Profile from '@/components/Profile.vue';
-import AccountItem from '@/components/AccountItem.vue';
+import Button from '@/components/Button/Button.vue';
+import Card from '@/components/Card/Card.vue';
+import BarCard from '@/components/Card/BarCard.vue';
+import Profile from '@/components/Profile/Profile.vue';
+import AccountItem from '@/components/Account/AccountItem.vue';
 import NFTItem from '@/components/NFT/NFTItem.vue';
 import RSS3, { IRSS3 } from '@/common/rss3';
 import { RSS3Account, RSS3Asset, RSS3ID, RSS3Index } from 'rss3-next/types/rss3';
-import Modal from '@/components/Modal.vue';
+import Modal from '@/components/Common/Modal.vue';
 import RNSUtils from '@/common/rns';
-import { getName } from '@/common/utils';
+import utils from '@/common/utils';
 import config from '@/config';
-import GitcoinItem from '@/components/GitcoinItem.vue';
-import { GeneralAsset, GeneralAssetWithTags } from '@/common/types';
+import GitcoinItem from '@/components/Donation/GitcoinItem.vue';
+import { GeneralAsset, GeneralAssetWithTags, Profile as ProfileInfo } from '@/common/types';
 
 import NFTIcon from '@/components/Icons/NFTIcon.vue';
 import GitcoinIcon from '@/components/Icons/GitcoinIcon.vue';
 import ContentIcon from '@/components/Icons/ContentIcon.vue';
 import FootprintIcon from '@/components/Icons/FootprintIcon.vue';
-import Logo from '@/components/Logo.vue';
+import Logo from '@/components/Icons/Logo.vue';
 
-import FootprintCard from '@/components/FootprintCard.vue';
-import ContentCard from '@/components/ContentCard.vue';
+import FootprintCard from '@/components/Footprint/FootprintCard.vue';
+import ContentCard from '@/components/Content/ContentCard.vue';
 import { debounce } from 'lodash';
 import ContentProviders, { Content } from '@/common/content-providers';
-import Toolbar from '@/components/Toolbar.vue';
-import FootprintItem from '@/components/FootprintItem.vue';
-import EVMpAccountItem from '@/components/EVMpAccountItem.vue';
-
-import activities from '@/common/poap-activity';
-
-// import { useReCaptcha } from 'vue-recaptcha-v3';
-
-interface ProfileInfo {
-    avatar: string;
-    username: string;
-    address: string;
-    bio: string;
-    link: string;
-}
+import Toolbar from '@/components/Profile/Toolbar.vue';
+import FootprintItem from '@/components/Footprint/FootprintItem.vue';
+import EVMpAccountItem from '@/components/Account/EVMpAccountItem.vue';
+import setupTheme from '@/common/theme';
 
 interface Relations {
     followers: RSS3ID[];
@@ -532,7 +521,7 @@ export default class Home extends Vue {
         username: '...',
         address: '',
         bio: '...',
-        link: '',
+        displayAddress: '',
     };
     rss3Relations: Relations = {
         followers: [],
@@ -571,17 +560,6 @@ export default class Home extends Vue {
         },
     ];
 
-    // claimWithCaptcha = setup(() => {
-    //     const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-    //     const exec = async (address: string) => {
-    //         await recaptchaLoaded();
-    //         return await executeRecaptcha(address);
-    //     };
-    //     return {
-    //         exec,
-    //     };
-    // });
-
     async mounted() {
         this.isPCLayout = window.innerWidth >= 768;
         window.onresize = () => {
@@ -608,6 +586,7 @@ export default class Home extends Vue {
         this.rss3 = await RSS3.visitor();
         const owner: string = <string>this.rss3.account.address;
         this.ownerETHAddress = owner;
+
         if (!(await this.getAddress(owner))) {
             if (this.isAccountExist) {
                 if (this.isOwnerValidRSS3) {
@@ -640,29 +619,17 @@ export default class Home extends Vue {
 
             this.rss3Profile.avatar = profile?.avatar?.[0] || config.defaultAvatar;
             this.rss3Profile.username = profile?.name || '';
+            this.rss3Profile.address = this.ethAddress;
 
             if (profile?.bio) {
-                const fieldPattern = /<([A-Z]+?)#(.+?)>/gi;
-                const fields = profile.bio.match(fieldPattern) || [];
-                this.rss3Profile.bio = profile.bio.replace(fieldPattern, '');
-
-                for (const field of fields) {
-                    const splits = fieldPattern.exec(field) || [];
-                    switch (splits[1]) {
-                        case 'SITE':
-                            this.rss3Profile.link = splits[2];
-                            break;
-                        default:
-                            // Do nothing
-                            break;
-                    }
-                }
+                // Profile
+                const { extracted, fieldsMatch } = utils.extractEmbedFields(profile?.bio || '', ['SITE']);
+                this.rss3Profile.bio = extracted;
+                this.rss3Profile.displayAddress = fieldsMatch?.['SITE'] || '';
             } else {
                 this.rss3Profile.bio = '';
             }
 
-            this.rss3Profile.address = this.ethAddress;
-
             this.isLoadingPersona = false;
         }, 0);
 
@@ -680,18 +647,16 @@ export default class Home extends Vue {
 
         // Load Contents
         setTimeout(async () => {
-            await this.initLoadContents(accounts);
+            await this.loadMoreContents(true);
             this.initIntersectionObserver();
         }, 0);
     }
 
     async getAddress(owner: string) {
-        console.log('Is subdomain mode:', config.subDomain.isSubDomainMode);
-
         let address: string = '';
         if (config.subDomain.isSubDomainMode) {
             // Is subdomain mode
-            address = getName();
+            address = utils.getName();
         } else if (this.$route.params.address) {
             address = <string>this.$route.params.address;
         } else {
@@ -729,21 +694,6 @@ export default class Home extends Vue {
         return true;
     }
 
-    async setupTheme() {
-        if (this.ethAddress) {
-            // Setup theme
-            const themes = RSS3.getAvailableThemes(await (<IRSS3>this.rss3).assets.get(this.ethAddress));
-            if (themes[0]) {
-                this.currentTheme = themes[0].name;
-                document.body.classList.add(themes[0].class);
-            } else {
-                document.body.classList.remove(...document.body.classList);
-            }
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
-    }
-
     async setPageTitleFavicon() {
         if (this.ethAddress) {
             const rss3 = await RSS3.visitor();
@@ -757,26 +707,27 @@ export default class Home extends Vue {
     startLoadingAccounts(accounts: RSS3Account[]) {
         this.accounts = [];
         setTimeout(async () => {
+            const { listed } = await utils.initAccounts(accounts);
+            this.accounts = listed;
             // Push original account
-            this.accounts.push({
+            this.accounts.unshift({
                 platform: 'EVM+',
                 identity: this.ethAddress,
                 signature: '',
                 tags: ['pass:order:-1'],
             });
-
-            await this.loadAccounts(accounts);
         }, 0);
     }
 
     async ivLoadNFT(refresh: boolean): Promise<boolean> {
         const data = await RSS3.getAssetProfile(this.ethAddress, 'NFT', refresh);
         if (data && data.status !== false) {
-            await this.mergeAssets(
+            const { listed } = await utils.initAssets(
                 await (<IRSS3>this.rss3).assets.get(this.ethAddress),
                 <GeneralAsset[]>data.assets,
                 'NFT',
             );
+            this.nfts = listed;
             this.isLoadingAssets.NFT = false;
             return true;
         }
@@ -786,11 +737,12 @@ export default class Home extends Vue {
     async ivLoadGitcoin(refresh: boolean): Promise<boolean> {
         const data = await RSS3.getAssetProfile(this.ethAddress, 'Gitcoin-Donation', refresh);
         if (data && data.status !== false) {
-            await this.mergeAssets(
+            const { listed } = await utils.initAssets(
                 await (<IRSS3>this.rss3).assets.get(this.ethAddress),
                 <GeneralAsset[]>data.assets,
                 'Gitcoin-Donation',
             );
+            this.gitcoins = listed;
             this.isLoadingAssets.Gitcoin = false;
             return true;
         }
@@ -800,11 +752,12 @@ export default class Home extends Vue {
     async ivLoadFootprint(refresh: boolean): Promise<boolean> {
         const data = await RSS3.getAssetProfile(this.ethAddress, 'POAP', refresh);
         if (data && data.status !== false) {
-            await this.mergeAssets(
+            const { listed } = await utils.initAssets(
                 await (<IRSS3>this.rss3).assets.get(this.ethAddress),
                 <GeneralAsset[]>data.assets,
                 'POAP',
             );
+            this.footprints = listed;
             this.isLoadingAssets.Footprint = false;
             return true;
         }
@@ -847,93 +800,6 @@ export default class Home extends Vue {
         }
     }
 
-    getTaggedOrder(taggedElement: RSS3Account | RSS3Asset): number {
-        if (!taggedElement.tags) {
-            return -1;
-        }
-        const orderPattern = /^pass:order:(-?\d+)$/i;
-        for (const tag of taggedElement.tags) {
-            if (orderPattern.test(tag)) {
-                return parseInt(orderPattern.exec(tag)?.[1] || '-1');
-            }
-        }
-        return -1;
-    }
-
-    private getAssetOrder(nft: RSS3Asset) {
-        let order = -1;
-        nft.tags?.forEach((tag: string) => {
-            if (tag.startsWith('pass:order:')) {
-                order = parseInt(tag.substr(11));
-            }
-        });
-        return order;
-    }
-
-    async loadAccounts(accounts: RSS3Account[]) {
-        // Get accounts
-        if (accounts) {
-            accounts.forEach((account: RSS3Account) => {
-                if (!account.tags?.includes('hidden')) {
-                    this.accounts.push(account);
-                }
-            });
-            this.accounts.sort((a, b) => {
-                return this.getTaggedOrder(a) - this.getTaggedOrder(b);
-            });
-        }
-    }
-
-    async mergeAssets(assetsInRSS3File: RSS3Asset[], assetsGrabbed: GeneralAsset[], type: string) {
-        const assetsMerge: GeneralAssetWithTags[] = await Promise.all(
-            (assetsGrabbed || []).map(async (ag: GeneralAssetWithTags) => {
-                const origType = ag.type;
-                if (config.hideUnlistedAsstes) {
-                    ag.type = 'Invalid'; // Using as a match mark
-                }
-                for (const airf of assetsInRSS3File) {
-                    if (
-                        airf.platform === ag.platform &&
-                        airf.identity === ag.identity &&
-                        airf.id === ag.id &&
-                        airf.type === origType
-                    ) {
-                        // Matched
-                        ag.type = origType; // Recover type
-                        if (airf.tags) {
-                            ag.tags = airf.tags;
-                        }
-                        break;
-                    }
-                }
-                return ag;
-            }),
-        );
-
-        const List: GeneralAssetWithTags[] = [];
-
-        for (const am of assetsMerge) {
-            if (am.type.includes(type)) {
-                List.push(am);
-            } // else Invalid
-        }
-
-        const res = List.filter((asset) => !asset.tags || asset.tags.indexOf('pass:hidden') === -1).sort(
-            (a, b) => this.getAssetOrder(a) - this.getAssetOrder(b),
-        );
-
-        if (type.includes('NFT')) {
-            this.nfts = res;
-        } else if (type === 'Gitcoin-Donation') {
-            this.gitcoins = res;
-        } else if (type === 'POAP') {
-            // Check special footprint
-            await this.checkSpecialPoap(res);
-
-            this.footprints = res;
-        }
-    }
-
     async checkSpecialPoap(res: GeneralAssetWithTags[]) {
         if (config.poapActivity.info.title && this.isOwner) {
             if (res.findIndex((asset) => asset.info.title === config.poapActivity.info.title) === -1) {
@@ -948,10 +814,6 @@ export default class Home extends Vue {
         }
     }
 
-    async initLoadContents(accounts: RSS3Account[]) {
-        await this.loadMoreContents(true);
-    }
-
     async loadMoreContents(isInitLoad: boolean = false) {
         if ((!isInitLoad && this.isLoadingContents) || !this.isContentsHaveMore) {
             // Is already loading or not having more
@@ -1166,48 +1028,6 @@ export default class Home extends Vue {
         }
     }
 
-    // async claimSpecialPOAP() {
-    //     // Special POAPs: Check status && give notice
-    //     switch (this.footprints[0].id) {
-    //         case 'active':
-    //             const res = await activities.mint(this.ethAddress, await this.claimWithCaptcha.exec(this.ethAddress));
-    //             if (res?.errno) {
-    //                 switch (res.errno) {
-    //                     case 1403:
-    //                         this.notice = 'Invalid address. This should be a Internal Server Error.';
-    //                         break;
-    //                     case 1404:
-    //                         this.notice = 'This address is not on RSS3 currently.';
-    //                         break;
-    //                     case 1405:
-    //                         this.notice = 'Sorry, the limited chances ran out.';
-    //                         break;
-    //                     case 1409:
-    //                         this.notice = 'Sorry, please try again.';
-    //                         break;
-    //                     default:
-    //                         this.notice = 'Sorry, something went wrong.';
-    //                         break;
-    //                 }
-    //             } else {
-    //                 this.footprints[0].id = 'pending';
-    //                 if (res?.data?.tx_hash) {
-    //                     this.notice = 'You have already submit the request. Please be patient.';
-    //                 } else {
-    //                     this.notice = 'Your special footprint is on the way~ Come back later!';
-    //                 }
-    //             }
-    //             this.isShowingNotice = true;
-    //             break;
-    //         case 'pending':
-    //             this.notice = 'You have already submit the request. Please be patient.';
-    //             this.isShowingNotice = true;
-    //             break;
-    //         default:
-    //             break;
-    //     }
-    // }
-
     toSetupPage() {
         this.$gtag.event('visitSetupPage', { userid: this.rns || this.ethAddress });
         this.$router.push(`/profile`);
@@ -1282,10 +1102,6 @@ export default class Home extends Vue {
         );
     }
 
-    toMakeDonation() {
-        window.open('https://gitcoin.co/');
-    }
-
     async logout() {
         if (confirm('Are you sure to logout?')) {
             (<HTMLLinkElement>document.getElementById('favicon')).href = '/favicon.ico';
@@ -1363,7 +1179,7 @@ export default class Home extends Vue {
                 username: '...',
                 address: '',
                 bio: '...',
-                link: '',
+                displayAddress: '',
             };
             this.isContentsHaveMore = true;
             this.isContentsHaveMoreEachProvider = [
@@ -1384,7 +1200,12 @@ export default class Home extends Vue {
             await this.initLoad();
         }
         await this.setPageTitleFavicon();
-        await this.setupTheme();
+        if (this.ethAddress) {
+            // Setup theme
+            await setupTheme(await (<IRSS3>this.rss3).assets.get(this.ethAddress));
+        } else {
+            document.body.classList.remove(...document.body.classList);
+        }
     }
 
     async deactivated() {
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 683d87d..e9880b6 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="onboarding flex items-center justify-center h-screen text-center bg-pass3gradient bg-cover bg-fixed">
-        <div class="body flex flex-col items-center justify-between justify-start px-4 h-2/3">
+        <div class="body flex flex-col items-center justify-between px-4 h-2/3">
             <Logo :size="200" />
             <div class="mx-auto w-83.5 text-white text-2xl leading-17.5">
                 <Button
@@ -28,16 +28,16 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
+import Button from '@/components/Button/Button.vue';
 import RSS3, { IRSS3 } from '@/common/rss3';
-import Modal from '@/components/Modal.vue';
+import Modal from '@/components/Common/Modal.vue';
 import { RSS3Profile } from 'rss3-next/types/rss3';
 import RNSUtils from '@/common/rns';
 import WalletConnect from '@/components/Icons/WalletConnect.vue';
 import Metamask from '@/components/Icons/Metamask.vue';
-import Loading from '@/components/Loading.vue';
-import LoadingContainer from '@/components/LoadingContainer.vue';
-import Logo from '@/components/Logo.vue';
+import Loading from '@/components/Loading/Loading.vue';
+import LoadingContainer from '@/components/Loading/LoadingContainer.vue';
+import Logo from '@/components/Icons/Logo.vue';
 import config from '@/config';
 @Options({
     name: 'Index',
diff --git a/src/views/NFT/NFTs.vue b/src/views/NFT/NFTs.vue
new file mode 100644
index 0000000..bc5589f
--- /dev/null
+++ b/src/views/NFT/NFTs.vue
@@ -0,0 +1,138 @@
+<template>
+    <div id="main" class="h-screen bg-nft-bg overflow-y-auto">
+        <div class="m-auto pb-32 pt-8 px-4 max-w-screen-lg">
+            <Header :ethAddress="ethAddress" :rns="rns" :rss3Profile="rss3Profile" title="NFTs" theme="nft" />
+            <div class="grid gap-6 grid-cols-2 justify-items-center sm:grid-cols-3">
+                <div class="relative w-full" v-for="item in nfts" :key="item.platform + item.identity + item.id">
+                    <NFTItem
+                        class="cursor-pointer"
+                        size="auto"
+                        :imageUrl="item.info.animation_url || item.info.image_preview_url"
+                        :poster-url="item.info.image_preview_url"
+                        @click="toSingleNFTPage(item.platform, item.identity, item.id, item.type)"
+                    />
+                    <NFTBadges
+                        class="absolute right-2.5 top-2.5"
+                        :chain="item.type.split('-')[0]"
+                        location="overlay"
+                        :collectionImg="item.info.collection_icon"
+                    />
+                </div>
+            </div>
+            <div
+                class="fixed z-50 bottom-2 left-0 right-0 flex gap-5 m-auto px-4 py-4 w-full max-w-md bg-btn-container"
+                v-if="isOwner"
+            >
+                <Button
+                    size="lg"
+                    class="m-auto text-nft-btn-m-text text-lg bg-nft-btn-m shadow-nft-btn-m"
+                    @click="toSetupNfts"
+                >
+                    <span>Manage NFTs</span>
+                </Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+import Button from '@/components/Button/Button.vue';
+import NFTItem from '@/components/NFT/NFTItem.vue';
+import NFTBadges from '@/components/NFT/NFTBadges.vue';
+import RSS3 from '@/common/rss3';
+import config from '@/config';
+import { GeneralAsset, GeneralAssetWithTags } from '@/common/types';
+import { debounce } from 'lodash';
+import utils from '@/common/utils';
+import { RSS3Profile } from 'rss3-next/types/rss3';
+import Header from '@/components/Common/Header.vue';
+import setupTheme from '@/common/theme';
+
+@Options({
+    name: 'NFTs',
+    components: { Button, NFTItem, NFTBadges, Header },
+})
+export default class NFTs extends Vue {
+    rns: string = '';
+    ethAddress: string = '';
+    isOwner: boolean = false;
+    nfts: GeneralAssetWithTags[] = [];
+    rss3Profile: RSS3Profile = {};
+    $gtag: any;
+    scrollTop: number = 0;
+    lastRoute: string = '';
+
+    async initLoad() {
+        this.lastRoute = this.$route.fullPath;
+
+        await RSS3.reconnect();
+        const rss3 = await RSS3.visitor();
+        const owner: string = <string>rss3.account.address;
+
+        const { ethAddress, rns } = await utils.getAddress(<string>this.$route.params.address);
+        this.ethAddress = ethAddress;
+        this.rns = rns;
+        this.isOwner = ethAddress == owner;
+
+        this.rss3Profile = await rss3.profile.get(this.ethAddress);
+
+        // Setup theme
+        setupTheme(await rss3.assets.get(this.ethAddress));
+
+        const nftData = await RSS3.getAssetProfile(this.ethAddress, 'NFT');
+
+        if (nftData) {
+            const { listed } = await utils.initAssets(
+                await rss3.assets.get(this.ethAddress),
+                nftData.assets as GeneralAsset[],
+                'NFT',
+            );
+            this.nfts = listed;
+        }
+    }
+
+    toSingleNFTPage(platform: string, identity: string, id: string, type: string) {
+        this.$gtag.event('visitSingleNft', {
+            userid: this.rns || this.ethAddress,
+            platform: platform,
+            nftidentity: identity,
+            nftid: id,
+            nfttype: type,
+        });
+        this.$router.push(
+            (config.subDomain.isSubDomainMode ? '' : `/${this.rns || this.ethAddress}`) +
+                `/singlenft/${platform}/${identity}/${id}/${type}`,
+        );
+    }
+
+    toSetupNfts() {
+        this.$router.push(`/setup/nfts`);
+    }
+
+    mountScrollEvent() {
+        const el = document.getElementById('main');
+        if (el) {
+            el.addEventListener(
+                'scroll',
+                debounce((ev) => {
+                    this.scrollTop = el.scrollTop;
+                }, 100),
+            );
+        }
+    }
+
+    activated() {
+        if (this.lastRoute === this.$route.fullPath) {
+            const el = document.getElementById('main');
+            if (el) {
+                el.scrollTop = this.scrollTop;
+            }
+        } else {
+            this.initLoad();
+        }
+    }
+}
+</script>
+
+<style></style>
diff --git a/src/views/Setup/SetupNFTs.vue b/src/views/NFT/SetupNFTs.vue
similarity index 66%
rename from src/views/Setup/SetupNFTs.vue
rename to src/views/NFT/SetupNFTs.vue
index 79cc925..49ed4da 100644
--- a/src/views/Setup/SetupNFTs.vue
+++ b/src/views/NFT/SetupNFTs.vue
@@ -1,34 +1,7 @@
 <template>
     <div class="h-screen text-body-text bg-body-bg overflow-y-auto">
         <div class="m-auto pb-32 pt-8 px-4 max-w-screen-lg">
-            <div class="flex items-center justify-between mb-4">
-                <Button
-                    size="sm"
-                    class="
-                        w-10
-                        h-10
-                        text-secondary-btn-text
-                        bg-secondary-btn
-                        border-secondary-btn-border
-                        shadow-secondary-btn
-                    "
-                    @click="back"
-                >
-                    <i class="bx bx-chevron-left bx-sm" />
-                </Button>
-                <span class="text-center">
-                    <h1 class="inline text-primary-text text-xl font-bold">Manage NFTs</h1>
-                </span>
-                <span class="avatar">
-                    <ImgHolder
-                        class="inline-flex my-auto w-10 h-10 cursor-pointer"
-                        :is-rounded="true"
-                        :is-border="false"
-                        :src="avatar"
-                        @click="back"
-                    />
-                </span>
-            </div>
+            <Header title="Manage NFTs" theme="nft" :avatar="avatar" />
             <section class="grid gap-4 grid-cols-1 md:grid-cols-2">
                 <Card
                     title="Listed"
@@ -48,6 +21,7 @@
                             @end="nftMoveEnd"
                             data-type="displayed"
                             item-key="displayed"
+                            :animation="200"
                         >
                             <template #item="{ element }">
                                 <NFTItem
@@ -101,6 +75,7 @@
                                     data-type="hidden"
                                     :item-key="collection"
                                     @end="nftMoveEnd"
+                                    :animation="200"
                                 >
                                     <template #item="{ element }">
                                         <NFTItem
@@ -167,23 +142,19 @@
 <script lang="ts">
 import { nextTick } from 'vue';
 import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import Card from '@/components/Card.vue';
+import Button from '@/components/Button/Button.vue';
+import Card from '@/components/Card/Card.vue';
 import NFTItem from '@/components/NFT/NFTItem.vue';
-import { RSS3Asset } from 'rss3-next/types/rss3';
 import RSS3, { IRSS3 } from '@/common/rss3';
 import config from '@/config';
 
 import draggable from 'vuedraggable';
-import LoadingContainer from '@/components/LoadingContainer.vue';
-import { GeneralAsset, GeneralAssetWithTags } from '@/common/types';
-import ImgHolder from '@/components/ImgHolder.vue';
-
-interface RSS3AssetCollectionShow {
-    collection_name: string;
-    contract_address: string;
-    assets: GeneralAsset[];
-}
+import LoadingContainer from '@/components/Loading/LoadingContainer.vue';
+import { GeneralAssetWithTags } from '@/common/types';
+import Header from '@/components/Common/Header.vue';
+import setupTheme from '@/common/theme';
+import utils from '@/common/utils';
+import { flattenDeep, values } from 'lodash';
 
 @Options({
     name: 'SetupNFTs',
@@ -193,7 +164,7 @@ interface RSS3AssetCollectionShow {
         Card,
         NFTItem,
         draggable,
-        ImgHolder,
+        Header,
     },
 })
 export default class SetupNFTs extends Vue {
@@ -234,50 +205,13 @@ export default class SetupNFTs extends Vue {
         const assetsGrabbed = (await RSS3.getAssetProfile((<IRSS3>this.rss3).account.address, 'NFT'))?.assets;
 
         // Setup theme
-        const themes = RSS3.getAvailableThemes(assetsInRSS3File);
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
+        setupTheme(await (<IRSS3>this.rss3).assets.get());
 
         if (assetsGrabbed) {
-            const assetsMatch = await Promise.all(
-                (assetsGrabbed || []).map(async (ag: GeneralAssetWithTags) => {
-                    const origType = ag.type;
-                    ag.type = 'Invalid'; // Using as a match mark
-                    for (const airf of assetsInRSS3File) {
-                        if (
-                            airf.platform === ag.platform &&
-                            airf.identity === ag.identity &&
-                            airf.id === ag.id &&
-                            airf.type === origType
-                        ) {
-                            // Matched
-                            ag.type = origType; // Recover type
-                            if (airf.tags) {
-                                ag.tags = airf.tags;
-                            }
-                            if (!ag.info.collection) {
-                                ag.info.collection = 'Other';
-                            }
-                            break;
-                        }
-                    }
-                    return ag;
-                }),
-            );
-            for (const am of assetsMatch) {
-                if (am.type.includes('NFT')) {
-                    this.nfts.push(am);
-                }
-            }
-            this.displayedNFTs = this.nfts
-                .filter((nft) => !nft.tags || nft.tags.indexOf('pass:hidden') === -1)
-                .sort((a, b) => this.getOrder(a) - this.getOrder(b));
-            this.hiddenNFTs = this.nfts
-                .filter((nft) => nft.tags && nft.tags.indexOf('pass:hidden') !== -1)
-                .sort((a, b) => this.getOrder(a) - this.getOrder(b));
+            const { listed, unlisted, assets } = await utils.initAssets(assetsInRSS3File, assetsGrabbed, 'NFT');
+            this.displayedNFTs = listed;
+            this.hiddenNFTs = unlisted;
+            this.nfts = assets;
             const collections: {
                 [key: string]: boolean;
             } = {};
@@ -293,28 +227,12 @@ export default class SetupNFTs extends Vue {
         }
     }
 
-    private getOrder(nft: RSS3Asset) {
-        let order = -1;
-        nft.tags?.forEach((tag: string) => {
-            if (tag.startsWith('pass:order:')) {
-                order = parseInt(tag.substr(11));
-            }
-        });
-        return order;
-    }
-
-    async back() {
-        await (<IRSS3>this.rss3).files.get((<IRSS3>this.rss3).account.address, true);
-        window.history.back();
-    }
-
     hideAll() {
         this.displayedNFTs = [];
         this.hiddenNFTs = this.nfts;
         this.collections.forEach((collection) => {
             this.hiddenList[collection] = this.hiddenNFTs.filter((nft) => nft.info?.collection === collection);
         });
-        this.sync();
     }
 
     showAll() {
@@ -323,7 +241,6 @@ export default class SetupNFTs extends Vue {
         this.collections.forEach((collection) => {
             this.hiddenList[collection] = [];
         });
-        this.sync();
     }
 
     async chooseAsset(ev: any) {
@@ -332,47 +249,13 @@ export default class SetupNFTs extends Vue {
         this.activatedGroupID = this.collections.findIndex(
             (collection) => collection === JSON.parse(ev.item.dataset.info).info?.collection,
         );
-        console.log(this.activatedGroupID);
     }
 
-    async nftMoveEnd(e: any) {
-        this.sync();
-    }
-
-    async sync() {
-        await Promise.all(
-            this.displayedNFTs.map((nft, index) => {
-                return this.rss3?.assets.patchTags(
-                    {
-                        type: nft.type,
-                        platform: nft.platform,
-                        identity: nft.identity,
-                        id: nft.id,
-                    },
-                    [`pass:order:${index}`],
-                );
-            }),
-        );
-        for (const collection in this.hiddenList) {
-            await Promise.all(
-                this.hiddenList[collection].map((nft, index) => {
-                    return this.rss3?.assets.patchTags(
-                        {
-                            type: nft.type,
-                            platform: nft.platform,
-                            identity: nft.identity,
-                            id: nft.id,
-                        },
-                        ['pass:hidden'],
-                    );
-                }),
-            );
-        }
-    }
+    async nftMoveEnd(e: any) {}
 
     async save() {
         this.isLoading = true;
-        await this.rss3?.files.sync();
+        await utils.saveAssetsOrder(this.displayedNFTs, flattenDeep(values(this.hiddenList)));
         this.isLoading = false;
         window.history.back();
     }
diff --git a/src/views/SingleNFT.vue b/src/views/NFT/SingleNFT.vue
similarity index 65%
rename from src/views/SingleNFT.vue
rename to src/views/NFT/SingleNFT.vue
index 29b2a43..88143ea 100644
--- a/src/views/SingleNFT.vue
+++ b/src/views/NFT/SingleNFT.vue
@@ -1,10 +1,9 @@
 <template>
     <div class="h-screen bg-nft-bg overflow-y-auto">
         <div class="m-auto pb-20 pt-8 px-4 max-w-screen-lg">
-            <div class="header relative pb-4">
+            <div class="relative pb-4">
                 <div
                     class="
-                        section-title
                         absolute
                         z-0
                         top-0
@@ -53,26 +52,25 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
+import Button from '@/components/Button/Button.vue';
 import NFTItem from '@/components/NFT/NFTItem.vue';
 import NFTDetail from '@/components/NFT/NFTDetails.vue';
-import AccountItem from '@/components/AccountItem.vue';
 import NFTBadges from '@/components/NFT/NFTBadges.vue';
-import RSS3, { IRSS3 } from '@/common/rss3';
-import RNSUtils from '@/common/rns';
+import RSS3 from '@/common/rss3';
 import { NFT } from '@/common/types';
 import config from '@/config';
-import { getName } from '@/common/utils';
+import utils from '@/common/utils';
+import setupTheme from '@/common/theme';
 
 @Options({
     name: 'SingleNFT',
-    components: { Button, NFTDetail, NFTItem, AccountItem, NFTBadges },
+    components: { Button, NFTDetail, NFTItem, NFTBadges },
 })
 export default class SingleNFT extends Vue {
     rns: string = '';
     ethAddress: string = '';
     private details: NFT = {
-        chain: '',
+        chain: 'Ethereum',
         token_id: '',
         asset_contract: {
             address: '',
@@ -83,7 +81,10 @@ export default class SingleNFT extends Vue {
     async mounted() {
         await RSS3.reconnect();
         const rss3 = await RSS3.visitor();
-        await this.getAddress();
+
+        const { ethAddress, rns } = await utils.getAddress(<string>this.$route.params.address);
+        this.ethAddress = ethAddress;
+        this.rns = rns;
 
         const platform: string = String(this.$route.params.platform);
         const identity: string = String(this.$route.params.identity);
@@ -91,12 +92,7 @@ export default class SingleNFT extends Vue {
         const type: string = String(this.$route.params.type);
 
         // Setup theme
-        const themes = RSS3.getAvailableThemes(await rss3.assets.get(this.ethAddress));
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
+        await setupTheme(await rss3.assets.get(this.ethAddress));
 
         const nftData = await RSS3.getAssetProfile(this.ethAddress, 'NFT');
 
@@ -113,45 +109,7 @@ export default class SingleNFT extends Vue {
         }
     }
 
-    async getAddress() {
-        let address: string = '';
-        if (config.subDomain.isSubDomainMode) {
-            // Is subdomain mode
-            address = getName();
-        } else if (this.$route.params.address) {
-            address = <string>this.$route.params.address;
-        } else {
-            return false;
-        }
-
-        if (address) {
-            if (address.startsWith('0x')) {
-                // Might be address type
-                // Get RNS and redirect
-                this.ethAddress = address;
-                this.rns = await RNSUtils.addr2Name(address);
-                if (this.rns !== '') {
-                    window.location.href =
-                        'https://' +
-                        this.rns +
-                        '.' +
-                        config.subDomain.rootDomain +
-                        window.location.pathname.replace(`/${address}`, '');
-                }
-            } else {
-                // RNS
-                this.rns = address;
-                this.ethAddress = (await RNSUtils.name2Addr(address)).toString();
-                if (parseInt(this.ethAddress) === 0) {
-                    return false;
-                }
-            }
-        }
-
-        return true;
-    }
-
-    public back() {
+    back() {
         if (window.history.state.back) {
             window.history.back();
         } else {
diff --git a/src/views/NFTs.vue b/src/views/NFTs.vue
deleted file mode 100644
index b32de3d..0000000
--- a/src/views/NFTs.vue
+++ /dev/null
@@ -1,269 +0,0 @@
-<template>
-    <div id="main" class="h-screen bg-nft-bg overflow-y-auto">
-        <div class="m-auto pb-32 pt-8 px-4 max-w-screen-lg">
-            <div class="header flex items-center justify-between pb-4">
-                <Button
-                    size="sm"
-                    class="w-10 h-10 text-secondary-btn-text bg-secondary-btn shadow-secondary-btn"
-                    @click="back"
-                >
-                    <i class="bx bx-chevron-left bx-sm"></i>
-                </Button>
-                <div class="section-title text-center text-nft-title text-2xl font-bold">NFTs</div>
-                <ImgHolder
-                    class="inline-flex my-auto w-10 h-10 cursor-pointer"
-                    :is-rounded="true"
-                    :is-border="false"
-                    :src="rss3Profile.avatar"
-                    :alt="rss3Profile.username"
-                    @click="toPublicPage(rns, ethAddress)"
-                />
-            </div>
-            <div class="nft-list grid gap-6 grid-cols-2 justify-items-center sm:grid-cols-3">
-                <div class="relative w-full" v-for="item in nfts" :key="item.platform + item.identity + item.id">
-                    <NFTItem
-                        class="cursor-pointer"
-                        size="auto"
-                        :imageUrl="item.info.animation_url || item.info.image_preview_url"
-                        :poster-url="item.info.image_preview_url"
-                        @click="toSingleNFTPage(item.platform, item.identity, item.id, item.type)"
-                    />
-                    <NFTBadges
-                        class="absolute right-2.5 top-2.5"
-                        :chain="item.type.split('-')[0]"
-                        location="overlay"
-                        :collectionImg="item.info.collection_icon"
-                    />
-                </div>
-            </div>
-            <div
-                class="fixed z-50 bottom-2 left-0 right-0 flex gap-5 m-auto px-4 py-4 w-full max-w-md bg-btn-container"
-                v-if="isOwner"
-            >
-                <Button
-                    size="lg"
-                    class="m-auto text-nft-btn-m-text text-lg bg-nft-btn-m shadow-nft-btn-m"
-                    @click="toSetupNfts"
-                >
-                    <span>Manage NFTs</span>
-                </Button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import ImgHolder from '@/components/ImgHolder.vue';
-import NFTItem from '@/components/NFT/NFTItem.vue';
-import NFTBadges from '@/components/NFT/NFTBadges.vue';
-import RSS3, { IRSS3 } from '@/common/rss3';
-import RNSUtils from '@/common/rns';
-import config from '@/config';
-import { RSS3Asset } from 'rss3-next/types/rss3';
-import { GeneralAsset, GeneralAssetWithTags } from '@/common/types';
-import { debounce } from 'lodash';
-import { getName } from '@/common/utils';
-
-interface Profile {
-    avatar: string;
-    username: string;
-    address: string;
-    bio: string;
-}
-
-@Options({
-    name: 'NFTs',
-    components: { ImgHolder, Button, NFTItem, NFTBadges },
-})
-export default class NFTs extends Vue {
-    rns: string = '';
-    ethAddress: string = '';
-    isOwner: boolean = false;
-    nfts: GeneralAssetWithTags[] = [];
-    rss3Profile: Profile = {
-        avatar: config.defaultAvatar,
-        username: '',
-        address: '',
-        bio: '',
-    };
-    $gtag: any;
-    scrollTop: number = 0;
-    lastRoute: string = '';
-
-    async initLoad() {
-        this.lastRoute = this.$route.fullPath;
-        this.nfts = [];
-        this.rss3Profile.avatar = config.defaultAvatar;
-
-        await RSS3.reconnect();
-        const rss3 = await RSS3.visitor();
-        const owner: string = <string>rss3.account.address;
-        await this.getAddress(owner);
-
-        const profile = await rss3.profile.get(this.ethAddress);
-
-        this.rss3Profile.avatar = profile.avatar?.[0] || config.defaultAvatar;
-        this.rss3Profile.username = profile.name || '';
-
-        // Setup theme
-        const themes = RSS3.getAvailableThemes(await rss3.assets.get(this.ethAddress));
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
-
-        const nftData = await RSS3.getAssetProfile(this.ethAddress, 'NFT');
-
-        if (nftData) {
-            await this.loadNFTs(await rss3.assets.get(this.ethAddress), <GeneralAsset[]>nftData.assets);
-        }
-    }
-
-    async getAddress(owner: string) {
-        let address: string = '';
-        if (config.subDomain.isSubDomainMode) {
-            // Is subdomain mode
-            address = getName();
-        } else if (this.$route.params.address) {
-            address = <string>this.$route.params.address;
-        } else {
-            return false;
-        }
-
-        if (address) {
-            if (address.startsWith('0x')) {
-                // Might be address type
-                // Get RNS and redirect
-                this.ethAddress = address;
-                this.rns = await RNSUtils.addr2Name(address);
-                if (this.rns !== '') {
-                    window.location.href =
-                        'https://' +
-                        this.rns +
-                        '.' +
-                        config.subDomain.rootDomain +
-                        window.location.pathname.replace(`/${address}`, '');
-                }
-            } else {
-                // RNS
-                this.rns = address;
-                this.ethAddress = (await RNSUtils.name2Addr(address)).toString();
-                if (parseInt(this.ethAddress) === 0) {
-                    return false;
-                }
-            }
-
-            this.isOwner = this.ethAddress === owner;
-        }
-
-        return true;
-    }
-
-    private getAssetOrder(nft: RSS3Asset) {
-        let order = -1;
-        nft.tags?.forEach((tag: string) => {
-            if (tag.startsWith('pass:order:')) {
-                order = parseInt(tag.substr(11));
-            }
-        });
-        return order;
-    }
-
-    async loadNFTs(assetsInRSS3File: RSS3Asset[], assetsGrabbed: GeneralAsset[]) {
-        const assetsMerge: GeneralAssetWithTags[] = await Promise.all(
-            (assetsGrabbed || []).map(async (ag: GeneralAssetWithTags) => {
-                const origType = ag.type;
-                if (config.hideUnlistedAsstes) {
-                    ag.type = 'Invalid'; // Using as a match mark
-                }
-                for (const airf of assetsInRSS3File) {
-                    if (
-                        airf.platform === ag.platform &&
-                        airf.identity === ag.identity &&
-                        airf.id === ag.id &&
-                        airf.type === origType
-                    ) {
-                        // Matched
-                        ag.type = origType; // Recover type
-                        if (airf.tags) {
-                            ag.tags = airf.tags;
-                        }
-                        break;
-                    }
-                }
-                return ag;
-            }),
-        );
-
-        const NFTList: GeneralAssetWithTags[] = [];
-
-        for (const am of assetsMerge) {
-            if (am.type.includes('NFT')) {
-                NFTList.push(am);
-            }
-        }
-
-        this.nfts = NFTList.filter((asset) => !asset.tags || asset.tags.indexOf('pass:hidden') === -1).sort(
-            (a, b) => this.getAssetOrder(a) - this.getAssetOrder(b),
-        );
-    }
-
-    toSingleNFTPage(platform: string, identity: string, id: string, type: string) {
-        this.$gtag.event('visitSingleNft', {
-            userid: this.rns || this.ethAddress,
-            platform: platform,
-            nftidentity: identity,
-            nftid: id,
-            nfttype: type,
-        });
-        this.$router.push(
-            (config.subDomain.isSubDomainMode ? '' : `/${this.rns || this.ethAddress}`) +
-                `/singlenft/${platform}/${identity}/${id}/${type}`,
-        );
-    }
-
-    toPublicPage(rns: string, ethAddress: string) {
-        if (rns && config.subDomain.isSubDomainMode) {
-            this.$router.push('/');
-        } else {
-            this.$router.push(`/${rns || ethAddress}`);
-        }
-    }
-
-    toSetupNfts() {
-        this.$router.push(`/setup/nfts`);
-    }
-
-    back() {
-        this.$router.push(config.subDomain.isSubDomainMode ? '/' : `/${this.rns || this.ethAddress}`);
-    }
-
-    mountScrollEvent() {
-        const el = document.getElementById('main');
-        if (el) {
-            el.addEventListener(
-                'scroll',
-                debounce((ev) => {
-                    this.scrollTop = el.scrollTop;
-                }, 100),
-            );
-        }
-    }
-
-    activated() {
-        if (this.lastRoute === this.$route.fullPath) {
-            const el = document.getElementById('main');
-            if (el) {
-                el.scrollTop = this.scrollTop;
-            }
-        } else {
-            this.initLoad();
-        }
-    }
-}
-</script>
-
-<style></style>
diff --git a/src/views/EditProfile.vue b/src/views/Setup/EditProfile.vue
similarity index 79%
rename from src/views/EditProfile.vue
rename to src/views/Setup/EditProfile.vue
index 873799f..1dc5f65 100644
--- a/src/views/EditProfile.vue
+++ b/src/views/Setup/EditProfile.vue
@@ -110,21 +110,22 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import AvatarEditor from '@/components/AvatarEditor.vue';
-import Card from '@/components/Card.vue';
-import EVMpAccountItem from '@/components/EVMpAccountItem.vue';
-import AccountItem from '@/components/AccountItem.vue';
-import Input from '@/components/Input.vue';
-import Modal from '@/components/Modal.vue';
-import Loading from '@/components/Loading.vue';
-import LoadingContainer from '@/components/LoadingContainer.vue';
+import Button from '@/components/Button/Button.vue';
+import AvatarEditor from '@/components/Profile/AvatarEditor.vue';
+import EVMpAccountItem from '@/components/Account/EVMpAccountItem.vue';
+import AccountItem from '@/components/Account/AccountItem.vue';
+import Input from '@/components/Input/Input.vue';
+import Modal from '@/components/Common/Modal.vue';
+import Loading from '@/components/Loading/Loading.vue';
+import LoadingContainer from '@/components/Loading/LoadingContainer.vue';
 import { RSS3Account, RSS3Profile } from 'rss3-next/types/rss3';
 import RSS3, { IRSS3 } from '@/common/rss3';
 import config from '@/config';
-import LinkButton from '@/components/LinkButton.vue';
+import LinkButton from '@/components/Button/LinkButton.vue';
 import RNSUtils from '@/common/rns';
-import BarCard from '@/components/BarCard.vue';
+import BarCard from '@/components/Card/BarCard.vue';
+import utils from '@/common/utils';
+import setupTheme from '@/common/theme';
 
 @Options({
     name: 'EditProfile',
@@ -134,7 +135,6 @@ import BarCard from '@/components/BarCard.vue';
         Modal,
         Button,
         AvatarEditor,
-        Card,
         AccountItem,
         Input,
         Loading,
@@ -179,77 +179,34 @@ export default class EditProfile extends Vue {
         this.profile.avatar = profile?.avatar?.[0] || config.defaultAvatar;
         this.profile.name = profile?.name || '';
         if (profile?.bio) {
-            const fieldPattern = /<([A-Z]+?)#(.+?)?>/gi;
-            const fields = profile.bio.match(fieldPattern) || [];
-            this.profile.bio = profile.bio.replace(fieldPattern, '');
-
-            for (const field of fields) {
-                const splits = fieldPattern.exec(field) || [];
-                switch (splits[1]) {
-                    case 'SITE':
-                        this.profile.link = splits[2];
-                        break;
-                    default:
-                        // Do nothing
-                        break;
-                }
-            }
+            // Profile
+            const { extracted, fieldsMatch } = utils.extractEmbedFields(profile?.bio || '', ['SITE']);
+            this.profile.bio = extracted;
+            this.profile.link = fieldsMatch?.['SITE'] || '';
         }
 
-        const accounts = await (<IRSS3>this.rss3).accounts.get(this.ethAddress);
-        this.startLoadingAccounts(accounts);
+        this.startLoadingAccounts();
 
         // Setup theme
-        const themes = RSS3.getAvailableThemes(await (<IRSS3>this.rss3).assets.get());
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
+        setupTheme(await (<IRSS3>this.rss3).assets.get());
     }
 
-    startLoadingAccounts(accounts: RSS3Account[]) {
+    startLoadingAccounts() {
         this.accounts = [];
         setTimeout(async () => {
+            const accounts = await (<IRSS3>this.rss3).accounts.get();
+            const { listed } = await utils.initAccounts(accounts);
+            this.accounts = listed;
             // Push original account
-            this.accounts.push({
+            this.accounts.unshift({
                 platform: 'EVM+',
-                identity: this.ethAddress,
+                identity: (<IRSS3>this.rss3).account.address,
                 signature: '',
                 tags: ['pass:order:-1'],
             });
-
-            await this.loadAccounts(accounts);
         }, 0);
     }
 
-    async loadAccounts(accounts: RSS3Account[]) {
-        // Get accounts
-        if (accounts) {
-            accounts.forEach((account: RSS3Account) => {
-                if (!account.tags?.includes('hidden')) {
-                    this.accounts.push(account);
-                }
-            });
-            this.accounts.sort((a, b) => {
-                return this.getTaggedOrder(a) - this.getTaggedOrder(b);
-            });
-        }
-    }
-
-    getTaggedOrder(taggedElement: RSS3Account): number {
-        if (!taggedElement.tags) {
-            return -1;
-        }
-        const orderPattern = /^pass:order:(-?\d+)$/i;
-        for (const tag of taggedElement.tags) {
-            if (orderPattern.test(tag)) {
-                return parseInt(orderPattern.exec(tag)?.[1] || '-1');
-            }
-        }
-        return -1;
-    }
-
     setOversizeNotice(field: string) {
         this.notice = `${field} cannot be longer than ${this.maxValueLength} chars`;
         this.isLoading = false;
diff --git a/src/views/Setup/RNS.vue b/src/views/Setup/RNS.vue
index 111b0e3..ce27d37 100644
--- a/src/views/Setup/RNS.vue
+++ b/src/views/Setup/RNS.vue
@@ -86,13 +86,13 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
+import Button from '@/components/Button/Button.vue';
 import RSS3, { IRSS3 } from '@/common/rss3';
 import RNSUtils from '@/common/rns';
-import Modal from '@/components/Modal.vue';
-import Input from '@/components/Input.vue';
-import Loading from '@/components/Loading.vue';
-import LoadingContainer from '@/components/LoadingContainer.vue';
+import Modal from '@/components/Common/Modal.vue';
+import Input from '@/components/Input/Input.vue';
+import Loading from '@/components/Loading/Loading.vue';
+import LoadingContainer from '@/components/Loading/LoadingContainer.vue';
 import config from '@/config';
 import { routes } from '@/router';
 function validateNetwork(chain: number | null, cb?: (chain: number | null) => void) {
diff --git a/src/views/Setup/RNSPending.vue b/src/views/Setup/RNSPending.vue
index d7917e5..485408e 100644
--- a/src/views/Setup/RNSPending.vue
+++ b/src/views/Setup/RNSPending.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Loading from '@/components/Loading.vue';
+import Loading from '@/components/Loading/Loading.vue';
 import RSS3, { IRSS3 } from '@/common/rss3';
 import RNSUtils from '@/common/rns';
 import config from '@/config';
diff --git a/src/views/Setup/Setup.vue b/src/views/Setup/Setup.vue
index df88436..25d9dba 100644
--- a/src/views/Setup/Setup.vue
+++ b/src/views/Setup/Setup.vue
@@ -119,7 +119,7 @@
                             class="inline-flex mx-0.5"
                             v-for="asset in footprints"
                             :key="asset.platform + asset.identity + asset.id"
-                            :size="40"
+                            size="sm"
                             :image-url="asset.info.image_preview_url"
                         />
                     </template>
@@ -203,19 +203,19 @@
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import AvatarEditor from '@/components/AvatarEditor.vue';
-import Card from '@/components/Card.vue';
-import BarCard from '@/components/BarCard.vue';
-import AccountItem from '@/components/AccountItem.vue';
+import Button from '@/components/Button/Button.vue';
+import AvatarEditor from '@/components/Profile/AvatarEditor.vue';
+import BarCard from '@/components/Card/BarCard.vue';
+import AccountItem from '@/components/Account/AccountItem.vue';
 import NFTItem from '@/components/NFT/NFTItem.vue';
-import Input from '@/components/Input.vue';
-import Modal from '@/components/Modal.vue';
-import Loading from '@/components/Loading.vue';
-import LoadingContainer from '@/components/LoadingContainer.vue';
+import Input from '@/components/Input/Input.vue';
+import Modal from '@/components/Common/Modal.vue';
+import Loading from '@/components/Loading/Loading.vue';
+import LoadingContainer from '@/components/Loading/LoadingContainer.vue';
 import { RSS3Account, RSS3Asset, RSS3Profile } from 'rss3-next/types/rss3';
 import RSS3, { IRSS3 } from '@/common/rss3';
 import config from '@/config';
+import setupTheme from '@/common/theme';
 
 import NFTIcon from '@/components/Icons/NFTIcon.vue';
 import GitcoinIcon from '@/components/Icons/GitcoinIcon.vue';
@@ -224,10 +224,11 @@ import AccountIcon from '@/components/Icons/AccountIcon.vue';
 import FootprintIcon from '@/components/Icons/FootprintIcon.vue';
 
 import { GeneralAsset, GeneralAssetWithTags } from '@/common/types';
-import GitcoinItem from '@/components/GitcoinItem.vue';
+import GitcoinItem from '@/components/Donation/GitcoinItem.vue';
 import RNSUtils from '@/common/rns';
-import FootprintItem from '@/components/FootprintItem.vue';
-import EVMpAccountItem from '@/components/EVMpAccountItem.vue';
+import FootprintItem from '@/components/Footprint/FootprintItem.vue';
+import EVMpAccountItem from '@/components/Account/EVMpAccountItem.vue';
+import utils from '@/common/utils';
 
 @Options({
     name: 'Setup',
@@ -237,7 +238,6 @@ import EVMpAccountItem from '@/components/EVMpAccountItem.vue';
         Modal,
         Button,
         AvatarEditor,
-        Card,
         BarCard,
         GitcoinItem,
         AccountItem,
@@ -320,60 +320,44 @@ export default class Setup extends Vue {
         }
 
         if (profile?.bio) {
-            const fieldPattern = /<([A-Z]+?)#(.+?)?>/gi;
-            const fields = profile.bio.match(fieldPattern) || [];
-            this.profile.bio = profile.bio.replace(fieldPattern, '');
-
-            for (const field of fields) {
-                const splits = fieldPattern.exec(field) || [];
-                switch (splits[1]) {
-                    case 'SITE':
-                        this.profile.link = splits[2];
-                        break;
-                    default:
-                        // Do nothing
-                        break;
-                }
-            }
+            // Profile
+            const { extracted, fieldsMatch } = utils.extractEmbedFields(profile?.bio || '', ['SITE']);
+            this.profile.bio = extracted;
+            this.profile.link = fieldsMatch?.['SITE'] || '';
         }
 
         // Setup theme
-        const themes = RSS3.getAvailableThemes(await (<IRSS3>this.rss3).assets.get());
-        if (themes[0]) {
-            this.currentTheme = themes[0].name;
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
+        setupTheme(await (<IRSS3>this.rss3).assets.get());
 
         // this.startLoadingAssets();
-
         this.isLoading = false;
     }
 
     startLoadingAccounts() {
         this.accounts = [];
         setTimeout(async () => {
+            const accounts = await (<IRSS3>this.rss3).accounts.get();
+            const { listed } = await utils.initAccounts(accounts);
+            this.accounts = listed;
             // Push original account
-            this.accounts.push({
+            this.accounts.unshift({
                 platform: 'EVM+',
                 identity: (<IRSS3>this.rss3).account.address,
                 signature: '',
                 tags: ['pass:order:-1'],
             });
-
-            await this.loadMoreAccounts(await (<IRSS3>this.rss3).accounts.get());
         }, 0);
     }
 
     async ivLoadNFT(refresh: boolean): Promise<boolean> {
         const data = await RSS3.getAssetProfile((<IRSS3>this.rss3).account.address, 'NFT', refresh);
         if (data && data.status !== false) {
-            await this.mergeAssets(
+            const { listed } = await utils.initAssets(
                 await (<IRSS3>this.rss3).assets.get((<IRSS3>this.rss3).account.address),
                 <GeneralAsset[]>data.assets,
                 'NFT',
             );
+            this.nfts = listed;
             this.isLoadingAssets.NFT = false;
             return true;
         }
@@ -383,11 +367,12 @@ export default class Setup extends Vue {
     async ivLoadGitcoin(refresh: boolean): Promise<boolean> {
         const data = await RSS3.getAssetProfile((<IRSS3>this.rss3).account.address, 'Gitcoin-Donation', refresh);
         if (data && data.status !== false) {
-            await this.mergeAssets(
+            const { listed } = await utils.initAssets(
                 await (<IRSS3>this.rss3).assets.get((<IRSS3>this.rss3).account.address),
                 <GeneralAsset[]>data.assets,
                 'Gitcoin-Donation',
             );
+            this.gitcoins = listed;
             this.isLoadingAssets.Gitcoin = false;
             return true;
         }
@@ -397,11 +382,12 @@ export default class Setup extends Vue {
     async ivLoadFootprint(refresh: boolean): Promise<boolean> {
         const data = await RSS3.getAssetProfile((<IRSS3>this.rss3).account.address, 'POAP', refresh);
         if (data && data.status !== false) {
-            await this.mergeAssets(
+            const { listed } = await utils.initAssets(
                 await (<IRSS3>this.rss3).assets.get((<IRSS3>this.rss3).account.address),
                 <GeneralAsset[]>data.assets,
                 'POAP',
             );
+            this.footprints = listed;
             this.isLoadingAssets.Footprint = false;
             return true;
         }
@@ -436,94 +422,11 @@ export default class Setup extends Vue {
         }
     }
 
-    getTaggedOrder(taggedElement: RSS3Account | RSS3Asset): number {
-        if (!taggedElement.tags) {
-            return -1;
-        }
-        const orderPattern = /^pass:order:(-?\d+)$/i;
-        for (const tag of taggedElement.tags) {
-            if (orderPattern.test(tag)) {
-                return parseInt(orderPattern.exec(tag)?.[1] || '-1');
-            }
-        }
-        return -1;
-    }
-
-    private getAssetOrder(nft: RSS3Asset) {
-        let order = -1;
-        nft.tags?.forEach((tag: string) => {
-            if (tag.startsWith('pass:order:')) {
-                order = parseInt(tag.substr(11));
-            }
-        });
-        return order;
-    }
-
-    async loadMoreAccounts(accounts: RSS3Account[]) {
-        // Get accounts
-        if (accounts) {
-            accounts.forEach((account: RSS3Account) => {
-                if (!account.tags?.includes('hidden')) {
-                    this.accounts.push(account);
-                }
-            });
-            this.accounts.sort((a, b) => {
-                return this.getTaggedOrder(a) - this.getTaggedOrder(b);
-            });
-        }
-    }
-
-    async mergeAssets(assetsInRSS3File: RSS3Asset[], assetsGrabbed: GeneralAsset[], type: string) {
-        const assetsMerge: GeneralAssetWithTags[] = await Promise.all(
-            (assetsGrabbed || []).map(async (ag: GeneralAssetWithTags) => {
-                const origType = ag.type;
-                if (config.hideUnlistedAsstes) {
-                    ag.type = 'Invalid'; // Using as a match mark
-                }
-                for (const airf of assetsInRSS3File) {
-                    if (
-                        airf.platform === ag.platform &&
-                        airf.identity === ag.identity &&
-                        airf.id === ag.id &&
-                        airf.type === origType
-                    ) {
-                        // Matched
-                        ag.type = origType; // Recover type
-                        if (airf.tags) {
-                            ag.tags = airf.tags;
-                        }
-                        break;
-                    }
-                }
-                return ag;
-            }),
-        );
-
-        const List: GeneralAssetWithTags[] = [];
-
-        for (const am of assetsMerge) {
-            if (am.type.includes(type)) {
-                List.push(am);
-            } // else Invalid
-        }
-
-        const res = List.filter((asset) => !asset.tags || asset.tags.indexOf('pass:hidden') === -1).sort(
-            (a, b) => this.getAssetOrder(a) - this.getAssetOrder(b),
-        );
-
-        if (type.includes('NFT')) {
-            this.nfts = res;
-        } else if (type === 'Gitcoin-Donation') {
-            this.gitcoins = res;
-        } else if (type === 'POAP') {
-            this.footprints = res;
-        }
-    }
-
     toManageAccounts() {
         // this.saveEdited();
         this.$router.push('/setup/accounts');
     }
+
     toManageNFTs() {
         // this.saveEdited();
         if (this.isLoadingAssets.NFT) {
@@ -533,6 +436,7 @@ export default class Setup extends Vue {
             this.$router.push('/setup/nfts');
         }
     }
+
     toManageGitcoins() {
         if (this.isLoadingAssets.Gitcoin) {
             this.notice = 'Gitcoins still loading... Maybe check back later?';
@@ -541,6 +445,7 @@ export default class Setup extends Vue {
             this.$router.push('/setup/gitcoins');
         }
     }
+
     toManageFootprints() {
         if (this.isLoadingAssets.Footprint) {
             this.notice = 'Footprints still loading... Maybe check back later?';
@@ -549,11 +454,13 @@ export default class Setup extends Vue {
             this.$router.push('/setup/footprints');
         }
     }
+
     async back() {
         // this.clearEdited();
         this.$gtag.event('cancelEditProfile', { userid: (<IRSS3>this.rss3).account.address });
         window.history.back();
     }
+
     async save() {
         this.isLoading = true;
         if (!this.rss3) {
diff --git a/src/views/SingleFootprint.vue b/src/views/SingleFootprint.vue
deleted file mode 100644
index fd7f015..0000000
--- a/src/views/SingleFootprint.vue
+++ /dev/null
@@ -1,220 +0,0 @@
-<template>
-    <div class="h-screen bg-footprint-bg overflow-y-auto">
-        <div class="m-auto pb-20 pt-8 px-4 max-w-screen-lg">
-            <div class="header flex items-center justify-between pb-4">
-                <Button
-                    size="sm"
-                    class="w-10 h-10 text-secondary-btn-text bg-secondary-btn shadow-secondary-btn"
-                    @click="back"
-                >
-                    <i class="bx bx-chevron-left bx-sm"></i>
-                </Button>
-                <div class="text-center text-footprint-title text-xl font-bold">Footprints</div>
-                <ImgHolder
-                    class="inline-flex my-auto w-10 h-10 cursor-pointer"
-                    :is-rounded="true"
-                    :is-border="false"
-                    :src="rss3Profile.avatar"
-                />
-            </div>
-            <section class="m-auto max-w-screen-sm">
-                <FootprintItem class="mb-4" :imageUrl="details.event.image_url" :size="FootprintWidth" />
-                <div class="flex flex-col mt-4 px-5 py-4 w-full text-body-text filter">
-                    <div class="flex flex-row items-center justify-between">
-                        <h2 class="text-xl font-semibold truncate">{{ details.event.name }}</h2>
-                        <Button
-                            v-if="details.event.event_url"
-                            size="sm"
-                            class="ml-1 w-9 h-9 text-footprint-btn-m-text bg-footprint-btn-m shadow-footprint-btn-m"
-                            @click="toExternalLink"
-                        >
-                            <i class="bx bx-link-external bx-xs" />
-                        </Button>
-                    </div>
-                    <div v-if="details.event.event_url" class="my-2 text-footprint-title truncate">
-                        <i class="bx bx-link align-middle mr-2" />
-                        <span>{{ details.event.event_url }}</span>
-                    </div>
-                    <section class="flex flex-col gap-2 text-footprint-title text-sm">
-                        <div class="flex flex-row gap-2 items-center">
-                            <CalendarIcon />
-                            <span class="text-body-text">{{ getDate() }}</span>
-                        </div>
-                        <div class="flex flex-row gap-2 items-center">
-                            <LocationIcon />
-                            <span class="text-body-text">{{
-                                details.event.city || details.event.country || 'Metaverse'
-                            }}</span>
-                        </div>
-                    </section>
-                    <section v-if="details.event.description">
-                        <h3 class="my-2 text-footprint-title text-lg font-medium capitalize">Description</h3>
-                        <p class="text-body-text font-medium leading-loose">
-                            {{ details.event.description }}
-                        </p>
-                    </section>
-                </div>
-            </section>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import ImgHolder from '@/components/ImgHolder.vue';
-import FootprintItem from '@/components/FootprintItem.vue';
-import CalendarIcon from '@/components/Icons/CalendarIcon.vue';
-import LocationIcon from '@/components/Icons/LocationIcon.vue';
-import { POAP } from '@/common/types';
-import RSS3 from '@/common/rss3';
-import config from '@/config';
-import RNSUtils from '@/common/rns';
-import { getName } from '@/common/utils';
-
-interface Profile {
-    avatar: string;
-    username: string;
-    address: string;
-    bio: string;
-}
-
-@Options({
-    name: 'SingleFootprint',
-    components: { ImgHolder, Button, FootprintItem, CalendarIcon, LocationIcon },
-})
-export default class SingleFootprint extends Vue {
-    rns: string = '';
-    ethAddress: string = '';
-    FootprintWidth: number = Math.min(window.innerWidth - 32, 640);
-    rss3Profile: Profile = {
-        avatar: config.defaultAvatar,
-        username: '',
-        address: '',
-        bio: '',
-    };
-    details: POAP = {
-        event: {
-            id: 0,
-            fancy_id: '',
-            country: '',
-            city: '',
-            description: '',
-            year: 1970,
-            start_date: '',
-            end_date: '',
-            expiry_date: '',
-            name: '',
-            image_url: '',
-            event_url: '',
-            supply: 0,
-        },
-        owner: '',
-        tokenId: '',
-    };
-
-    async mounted() {
-        await RSS3.reconnect();
-        const rss3 = await RSS3.visitor();
-        await this.getAddress();
-
-        const profile = await rss3.profile.get(this.ethAddress);
-        this.rss3Profile.avatar = profile?.avatar?.[0] || config.defaultAvatar;
-        this.rss3Profile.username = profile?.name || '';
-        this.rss3Profile.address = this.ethAddress;
-
-        const platform: string = String(this.$route.params.platform);
-        const identity: string = String(this.$route.params.identity);
-        const id: string = String(this.$route.params.id);
-
-        // Setup theme
-        const themes = RSS3.getAvailableThemes(await rss3.assets.get(this.ethAddress));
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
-
-        const footprintData = await RSS3.getAssetProfile(this.ethAddress, 'POAP');
-
-        if (footprintData) {
-            const asset = footprintData.assets.find(
-                (ag) => ag.platform === platform && ag.identity === identity && ag.id === id,
-            );
-            if (asset) {
-                const detail = (await RSS3.getFootprintDetail(this.ethAddress, platform, identity, id))?.data;
-                console.log(detail);
-                if (detail) {
-                    this.details = detail;
-                }
-            }
-        }
-    }
-
-    async getAddress() {
-        let address: string = '';
-        if (config.subDomain.isSubDomainMode) {
-            // Is subdomain mode
-            address = getName();
-        } else if (this.$route.params.address) {
-            address = <string>this.$route.params.address;
-        } else {
-            return false;
-        }
-
-        if (address) {
-            if (address.startsWith('0x')) {
-                // Might be address type
-                // Get RNS and redirect
-                this.ethAddress = address;
-                this.rns = await RNSUtils.addr2Name(address);
-                if (this.rns !== '') {
-                    window.location.href =
-                        'https://' +
-                        this.rns +
-                        '.' +
-                        config.subDomain.rootDomain +
-                        window.location.pathname.replace(`/${address}`, '');
-                }
-            } else {
-                // RNS
-                this.rns = address;
-                this.ethAddress = (await RNSUtils.name2Addr(address)).toString();
-                if (parseInt(this.ethAddress) === 0) {
-                    return false;
-                }
-            }
-        }
-
-        return true;
-    }
-
-    toExternalLink() {
-        window.open(this.details.event.event_url);
-    }
-
-    back() {
-        if (window.history.state.back) {
-            window.history.back();
-        } else {
-            this.$router.push(
-                (config.subDomain.isSubDomainMode ? '' : `/${this.rns || this.ethAddress}`) + `/footprints`,
-            );
-        }
-    }
-
-    getDate(): string {
-        return this.details.event.start_date
-            ? this.formatDate(this.details.event.start_date) +
-                  (this.details.event.end_date && this.details.event.end_date !== this.details.event.start_date
-                      ? ` ~ ${this.formatDate(this.details.event.end_date)}`
-                      : '')
-            : 'Loading...';
-    }
-    formatDate(ts: string): string {
-        return new Date(parseInt(ts) * 1000).toLocaleDateString('en-US');
-    }
-}
-</script>
-
-<style></style>
diff --git a/src/views/SingleGitcoin.vue b/src/views/SingleGitcoin.vue
deleted file mode 100644
index 0a03838..0000000
--- a/src/views/SingleGitcoin.vue
+++ /dev/null
@@ -1,308 +0,0 @@
-<template>
-    <div class="h-screen bg-gitcoin-bg overflow-y-auto">
-        <div class="m-auto pb-20 pt-8 px-4 max-w-screen-lg">
-            <div class="header flex items-center justify-between pb-4">
-                <Button
-                    size="sm"
-                    class="w-10 h-10 text-secondary-btn-text bg-secondary-btn shadow-secondary-btn"
-                    @click="back"
-                >
-                    <i class="bx bx-chevron-left bx-sm"></i>
-                </Button>
-                <ImgHolder
-                    class="inline-flex my-auto w-10 h-10 cursor-pointer"
-                    :is-rounded="true"
-                    :is-border="false"
-                    :src="rss3Profile.avatar"
-                    :alt="rss3Profile.username"
-                    @click="toPublicPage(rns, ethAddress)"
-                />
-            </div>
-            <section class="m-auto max-w-screen-sm">
-                <GitcoinItem class="mb-4" :imageUrl="grant.logo || defaultAvatar" size="auto" />
-                <div
-                    class="
-                        flex flex-col
-                        gap-4
-                        items-start
-                        justify-start
-                        mt-4
-                        px-5
-                        w-full
-                        text-black text-body-text
-                        border-card
-                        rounded
-                        filter
-                    "
-                >
-                    <div class="w-full">
-                        <h2 class="break-words text-xl font-semibold">
-                            {{ grant.title || 'Inactive Project' }}
-                        </h2>
-                        <div
-                            class="text-gitcoin-title text-sm leading-normal cursor-pointer truncate"
-                            @click="toExternalLink(grant.reference_url)"
-                        >
-                            <i class="bx bx-link align-middle" />
-                            {{ grant.reference_url }}
-                        </div>
-                    </div>
-                    <div class="w-full">
-                        <h2 class="break-words text-xl font-semibold">Description</h2>
-                        <div class="line-clamp-3 break-words text-sm leading-normal">
-                            {{ grant.description || 'No information provided by Gitcoin.' }}
-                        </div>
-                    </div>
-                    <div>
-                        <h2 class="text-xl font-semibold">Contributions</h2>
-                        <h1 class="text-gitcoin-title text-2xl font-semibold">
-                            <vue3-autocounter
-                                ref="counter"
-                                :startAmount="0"
-                                :endAmount="parseInt(donationInfo.length)"
-                                :duration="1"
-                                separator=","
-                                :autoinit="true"
-                            />
-                        </h1>
-                    </div>
-                    <div class="flex flex-col gap-y-2 w-full">
-                        <div
-                            class="flex flex-row gap-x-2 justify-start"
-                            v-for="item in donationInfo"
-                            :key="item.txHash"
-                        >
-                            <div
-                                class="
-                                    flex flex-1 flex-row
-                                    items-center
-                                    justify-between
-                                    px-4
-                                    py-2
-                                    text-black
-                                    bg-body-bg
-                                    rounded-xl
-                                "
-                            >
-                                <div class="flex-shrink pr-2 text-gitcoin-title">
-                                    <vue3-autocounter
-                                        ref="counter"
-                                        :startAmount="0"
-                                        :endAmount="parseFloat(item.formatedAmount)"
-                                        :duration="1"
-                                        separator=","
-                                        :decimals="item.formatedAmount.split('.')[1].length"
-                                        :suffix="item.symbol"
-                                        :autoinit="true"
-                                    />
-                                </div>
-                                <div class="flex-1 w-0 text-right text-gitcoin-title truncate">
-                                    {{ timeDifferent(item.timeStamp) }}
-                                </div>
-                            </div>
-                            <Button
-                                size="sm"
-                                class="ml-1 w-9 h-9 text-gitcoin-btn-m-text bg-gitcoin-btn-m shadow-gitcoin-btn-m"
-                                @click="toScanTx(item)"
-                            >
-                                <i class="bx bx-link-external bx-xs" />
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import ImgHolder from '@/components/ImgHolder.vue';
-import GitcoinItem from '@/components/GitcoinItem.vue';
-import config from '@/config';
-import RNSUtils from '@/common/rns';
-import RSS3 from '@/common/rss3';
-import Vue3Autocounter from 'vue3-autocounter';
-import { getName } from '@/common/utils';
-
-interface Profile {
-    avatar: string;
-    username: string;
-    address: string;
-    bio: string;
-}
-
-export interface GrantInfo {
-    active: boolean;
-    title?: string;
-    slug?: string;
-    description?: string;
-    reference_url?: string;
-    logo?: string;
-    admin_address?: string;
-    amount_received?: string;
-    token_address?: string;
-    token_symbol?: string;
-    contract_address?: string;
-}
-
-type DonationApproach = 'zkSync' | 'Standard';
-export interface DonationInfo {
-    donor: string;
-    tokenAddr?: string;
-    tokenId?: number;
-    amount: string;
-    symbol?: string;
-    formatedAmount?: string;
-    timeStamp: string;
-    txHash: string;
-    approach?: DonationApproach;
-}
-
-@Options({
-    name: 'SingleGitcoin',
-    components: { ImgHolder, Button, GitcoinItem, Vue3Autocounter },
-})
-export default class SingleGitcoin extends Vue {
-    public Width: number = Math.min(window.innerWidth - 32, 640);
-    public rns: string = '';
-    public ethAddress: string = '';
-    public rss3Profile: Profile = {
-        avatar: config.defaultAvatar,
-        username: '',
-        address: '',
-        bio: '',
-    };
-    private defaultAvatar = config.defaultAvatar;
-
-    public grant?: GrantInfo = {
-        active: true,
-        logo: config.defaultAvatar,
-        slug: '...',
-        reference_url: '...',
-        description: '...',
-    };
-    public donationInfo?: DonationInfo[] = [];
-
-    async mounted() {
-        await RSS3.reconnect();
-        const rss3 = await RSS3.visitor();
-        await this.getAddress();
-
-        const profile = await rss3.profile.get(this.ethAddress);
-        this.rss3Profile.avatar = profile?.avatar?.[0] || config.defaultAvatar;
-        this.rss3Profile.username = profile?.name || '';
-        this.rss3Profile.address = this.ethAddress;
-
-        // Setup theme
-        const themes = RSS3.getAvailableThemes(await rss3.assets.get(this.ethAddress));
-        if (themes[0]) {
-            document.body.classList.add(themes[0].class);
-        } else {
-            document.body.classList.remove(...document.body.classList);
-        }
-
-        await this.loadGitcoin();
-    }
-
-    async getAddress() {
-        let address: string = '';
-        if (config.subDomain.isSubDomainMode) {
-            // Is subdomain mode
-            address = getName();
-        } else if (this.$route.params.address) {
-            address = <string>this.$route.params.address;
-        } else {
-            return false;
-        }
-
-        if (address) {
-            if (address.startsWith('0x')) {
-                // Might be address type
-                // Get RNS and redirect
-                this.ethAddress = address;
-                this.rns = await RNSUtils.addr2Name(address);
-                if (this.rns !== '') {
-                    window.location.href =
-                        'https://' +
-                        this.rns +
-                        '.' +
-                        config.subDomain.rootDomain +
-                        window.location.pathname.replace(`/${address}`, '');
-                }
-            } else {
-                // RNS
-                this.rns = address;
-                this.ethAddress = (await RNSUtils.name2Addr(address)).toString();
-                if (parseInt(this.ethAddress) === 0) {
-                    return false;
-                }
-            }
-        }
-
-        return true;
-    }
-
-    public async loadGitcoin() {
-        const platform: string = <string>this.$route.params.platform;
-        const identity: string = <string>this.$route.params.identity;
-        const id: string = <string>this.$route.params.id;
-
-        const res = await RSS3.getGitcoinDonation(this.ethAddress, platform, identity, id);
-        if (res) {
-            this.grant = res.data.grant;
-            this.donationInfo = res.data.txs.sort((a, b) => {
-                return parseInt(b.timeStamp) - parseInt(a.timeStamp);
-            });
-        }
-    }
-
-    public timeDifferent(timeStamp: number) {
-        const date1: any = new Date(timeStamp * 1000);
-        const date2: any = Date.now();
-        const diffTime = Math.abs(date2 - date1);
-        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
-        const diffHours = Math.ceil((diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-        if (diffDays == 0) {
-            return diffHours + ' hours ago';
-        } else if (diffHours == 0) {
-            return diffDays + ' days ago';
-        } else {
-            return diffDays + ' days ' + diffHours + ' hours ago';
-        }
-    }
-
-    public toExternalLink(address: string) {
-        window.open(address);
-    }
-
-    toScanTx(item: DonationInfo) {
-        if (item.approach === 'zkSync') {
-            window.open(`https://zkscan.io/explorer/transactions/${item.txHash}`);
-        } else {
-            window.open(`https://etherscan.io/tx/${item.txHash}`);
-        }
-    }
-
-    toPublicPage(rns: string, ethAddress: string) {
-        if (rns && config.subDomain.isSubDomainMode) {
-            this.$router.push('/');
-        } else {
-            this.$router.push(`/${rns || ethAddress}`);
-        }
-    }
-
-    back() {
-        if (window.history.state.back) {
-            window.history.back();
-        } else {
-            this.$router.push(
-                (config.subDomain.isSubDomainMode ? '' : `/${this.rns || this.ethAddress}`) + `/gitcoins`,
-            );
-        }
-    }
-}
-</script>
-
-<style></style>
diff --git a/src/views/Test.vue b/src/views/Test.vue
deleted file mode 100644
index 1cf1d1e..0000000
--- a/src/views/Test.vue
+++ /dev/null
@@ -1,605 +0,0 @@
-<template>
-    <h1>Test page</h1>
-    <div class="flex flex-col gap-8 items-center">
-        <BarCard color="account" class="w-96">
-            <template #header>
-                <span class="inline-flex w-16 text-account-title"> Accounts </span>
-            </template>
-            <template #content>
-                <AccountItem
-                    class="inline-block mr-1 cursor-pointer"
-                    :size="40"
-                    v-for="id in 8"
-                    :key="id"
-                    chain="Ethereum"
-                />
-            </template>
-            <template #footer>
-                <Button size="sm" class="w-8 h-8 text-account-btn-s-text bg-account-btn-s shadow-account-btn-s">
-                    <i class="bx bxs-pencil bx-xs" />
-                </Button>
-            </template>
-        </BarCard>
-
-        <BarCard color="nft" class="w-96">
-            <template #header>
-                <span class="inline-flex w-16 text-nft-title"> NFTs </span>
-            </template>
-            <template #content>
-                <NFTItem
-                    class="flex mr-1 cursor-pointer"
-                    image-url="https://i.imgur.com/GdWEt4z.jpg"
-                    poster-url="https://i.imgur.com/GdWEt4z.jpg"
-                    size="sm"
-                    v-for="id in 32"
-                    :key="id"
-                />
-            </template>
-            <template #footer>
-                <Button size="sm" class="w-8 h-8 text-nft-btn-s-text bg-nft-btn-s shadow-nft-btn-s">
-                    <i class="bx bxs-pencil bx-xs" />
-                </Button>
-            </template>
-        </BarCard>
-
-        <FootprintCard
-            imageUrl="https://i.imgur.com/GdWEt4z.jpg"
-            date="May 03, 2021"
-            location="NYC"
-            username="Joshsua"
-            activity="RSS3 presents the Taurus ♉️️ Conference"
-        />
-
-        <Button size="sm" class="text-primary shadow-secondary w-10 h-10 bg-white">
-            <i class="bx bx-chevron-left bx-sm"></i>
-        </Button>
-        <Button size="sm" class="text-primary shadow-secondary w-10 h-10 bg-white">
-            <i class="bx bx-x bx-sm"></i>
-        </Button>
-        <Button size="sm" class="bg-account-button w-10 h-10 text-white shadow-account">
-            <i class="bx bx-plus bx-sm"></i>
-        </Button>
-
-        <div class="flex flex-row gap-7">
-            <Button size="sm" class="bg-account-button w-10 h-10 text-white shadow-account">
-                <i class="bx bxs-copy bx-sm"></i>
-            </Button>
-            <Button size="sm" class="bg-account-button w-10 h-10 text-white shadow-account">
-                <i class="bx bx-link-external bx-sm"></i>
-            </Button>
-        </div>
-
-        <div class="flex flex-row gap-2">
-            <Button size="sm" class="text-account-button shadow-account-sm w-8 h-8 bg-white">
-                <i class="bx bxs-pencil bx-xs"></i>
-            </Button>
-            <Button size="sm" class="text-account-button shadow-account-sm w-8 h-8 bg-white">
-                <i class="bx bx-expand-alt bx-xs"></i>
-            </Button>
-        </div>
-
-        <div class="flex flex-row gap-2">
-            <Button size="sm" class="text-nft-button shadow-nft-sm w-8 h-8 bg-white">
-                <i class="bx bxs-pencil bx-xs"></i>
-            </Button>
-            <Button size="sm" class="text-nft-button shadow-nft-sm w-8 h-8 bg-white">
-                <i class="bx bx-expand-alt bx-xs"></i>
-            </Button>
-        </div>
-
-        <div class="flex flex-row gap-2">
-            <Button size="sm" class="text-content-button shadow-content-md w-8 h-8 bg-white">
-                <i class="bx bxs-pencil bx-xs"></i>
-            </Button>
-            <Button size="sm" class="text-content-button shadow-content-md w-8 h-8 bg-white">
-                <i class="bx bx-expand-alt bx-xs"></i>
-            </Button>
-        </div>
-
-        <div class="flex flex-row gap-5">
-            <Button size="lg" class="text-primary shadow-secondary w-45 text-lg bg-white"> Discard </Button>
-            <Button size="lg" class="bg-primary shadow-primary w-45 text-white text-lg"> Save </Button>
-        </div>
-
-        <Button size="lg" class="bg-primary shadow-primary w-80 text-white text-2xl"> Connect A Wallet </Button>
-
-        <Button size="lg" class="text-primary shadow-secondary w-80 text-lg bg-white">
-            <span>Edit Profile</span>
-            <i class="bx bx-pencil bx-sm"></i>
-        </Button>
-
-        <Button size="lg" class="text-primary shadow-secondary w-80 text-lg bg-white">
-            <span>Follow</span>
-            <i class="bx bx-plus bx-sm"></i>
-        </Button>
-
-        <Button size="lg" class="text-primary shadow-secondary w-80 text-lg bg-white">
-            <span>Following</span>
-            <i class="bx bx-check bx-sm"></i>
-        </Button>
-
-        <Button size="sm" class="text-account-button shadow-account-sm text-xs bg-white"> Show All </Button>
-
-        <Button size="sm" class="text-nft-button shadow-nft-sm text-xs bg-white"> Hide All </Button>
-
-        <Button size="sm" class="bg-nft-button text-white text-xs shadow-nft"> Select NFTs to display </Button>
-
-        <Button
-            size="sm"
-            class="bg-content-button text-white text-xs shadow-content opacity-35 cursor-not-allowed"
-            disabled
-        >
-            Coming Soon
-        </Button>
-
-        <Button size="lg" class="bg-account-button text-white text-lg shadow-account"> Manage Accounts</Button>
-
-        <Button size="lg" class="bg-nft-button text-white text-lg shadow-nft"> Manage NFTs</Button>
-
-        <hr />
-
-        <AvatarEditor size="sm" />
-        <AvatarEditor size="md" />
-        <AvatarEditor size="lg" />
-        <Input :is-single-line="true" placeholder="SingleLineInputComponent" v-model="value" class="w-80" />
-        <Input :is-single-line="false" placeholder="MultiLineInputComponent" v-model="value" class="w-80" />
-
-        <Card
-            title="TestCard"
-            color-title="text-account-title"
-            color-tips="text-account-title"
-            color-background="bg-account-bg"
-            class="w-80"
-            tips="TipsTipsTipsTipsTipsTipsTipsTipsTipsTipsTipsTipsTipsTipsTipsTipsTipsTips"
-            :is-having-content="false"
-        >
-            <template #accessibility>
-                <i class="bx bx-info-circle" style="color: rgba(0, 0, 0, 0.2)" />
-            </template>
-            <template #header-button>
-                <Button size="sm" class="bg-account-button w-10 h-10 text-white shadow-account">
-                    <i class="bx bx-plus bx-sm" />
-                </Button>
-            </template>
-            <template #footer-button>
-                <Button size="sm" class="text-account-button shadow-account-sm ml-auto text-xs bg-white">
-                    Show All
-                </Button>
-            </template>
-        </Card>
-        <Card
-            title="TestCard"
-            color-title="text-nft-title"
-            color-tips="text-nft-title"
-            color-background="bg-nft-bg"
-            class="w-80"
-            tips="123456"
-            :is-having-content="true"
-        >
-            <template #accessibility>
-                <i class="bx bx-info-circle" style="color: rgba(0, 0, 0, 0.2)" />
-            </template>
-            <template #footer-button>
-                <Button size="sm" class="text-nft-button shadow-nft-sm text-xs bg-white"> Hide All </Button>
-            </template>
-        </Card>
-        <Card
-            title="TestCard"
-            color-title="text-content-title"
-            color-tips="text-content-title"
-            color-background="bg-content-bg"
-            class="w-80"
-            :is-having-content="true"
-        >
-            <template #accessibility>
-                <i class="bx bx-info-circle" style="color: rgba(0, 0, 0, 0.2)" />
-            </template>
-            <template #header-button>
-                <div class="flex flex-row gap-2">
-                    <Button size="sm" class="text-content-button shadow-content-md w-8 h-8 bg-white">
-                        <i class="bx bxs-pencil bx-xs"></i>
-                    </Button>
-                    <Button size="sm" class="text-content-button shadow-content-md w-8 h-8 bg-white">
-                        <i class="bx bx-expand-alt bx-xs"></i>
-                    </Button>
-                </div>
-            </template>
-            <template #content>
-                <div class="flex justify-center">
-                    <Button
-                        size="lg"
-                        class="
-                            bg-content-button
-                            m-auto
-                            text-white text-lg
-                            font-extralight
-                            shadow-content
-                            opacity-35
-                            cursor-not-allowed
-                        "
-                        disabled
-                    >
-                        Coming Soon
-                    </Button>
-                </div>
-            </template>
-        </Card>
-        <Card
-            title="TestCard"
-            color-title="text-account-title"
-            color-tips="text-account-title"
-            color-background="bg-account-bg"
-            class="w-80"
-            :is-having-content="true"
-        >
-            <template #accessibility>
-                <i class="bx bx-info-circle" style="color: rgba(0, 0, 0, 0.2)" />
-            </template>
-            <template #header-button>
-                <Button size="sm" class="bg-account-button w-10 h-10 text-white shadow-account">
-                    <i class="bx bx-plus bx-sm"></i>
-                </Button>
-            </template>
-            <template #content>
-                <AccountItem
-                    v-for="id in 8"
-                    :key="id"
-                    class="shadow-account-sm inline-flex m-0.5 rounded-full"
-                    :size="64"
-                    chain="Ethereum"
-                />
-            </template>
-        </Card>
-        <Card
-            title="TestCard"
-            color-title="text-nft-title"
-            color-tips="text-nft-title"
-            color-background="bg-nft-bg"
-            class="w-80"
-            tips="123456"
-            :is-having-content="true"
-        >
-            <template #accessibility>
-                <i class="bx bx-info-circle" style="color: rgba(0, 0, 0, 0.2)" />
-            </template>
-            <template #content>
-                <NFTItem
-                    v-for="id in 8"
-                    :key="id"
-                    class="shadow-nft-sm inline-flex m-0.5"
-                    size="auto"
-                    imageUrl="https://i.imgur.com/GdWEt4z.jpg"
-                />
-            </template>
-        </Card>
-
-        <Card
-            title="TestCard"
-            color-title="text-account-title"
-            color-tips="text-account-title"
-            color-background="bg-account-bg"
-            class="w-80"
-            :is-having-content="true"
-            :is-single-line="true"
-        >
-            <template #accessibility>
-                <i class="bx bx-info-circle" style="color: rgba(0, 0, 0, 0.2)" />
-            </template>
-            <template #header-button>
-                <Button size="sm" class="bg-account-button w-10 h-10 text-white shadow-account">
-                    <i class="bx bx-plus bx-sm"></i>
-                </Button>
-            </template>
-            <template #content>
-                <AccountItem
-                    v-for="id in 8"
-                    :key="id"
-                    class="shadow-account-sm inline-flex m-0.5 rounded-full"
-                    :size="64"
-                    chain="Ethereum"
-                />
-            </template>
-        </Card>
-        <Card
-            title="TestCard"
-            color-title="text-nft-title"
-            color-tips="text-nft-title"
-            color-background="bg-nft-bg"
-            class="w-80"
-            tips="123456"
-            :is-having-content="true"
-            :is-single-line="true"
-        >
-            <template #accessibility>
-                <i class="bx bx-info-circle" style="color: rgba(0, 0, 0, 0.2)" />
-            </template>
-            <template #content>
-                <NFTItem
-                    v-for="id in 8"
-                    :key="id"
-                    class="shadow-nft-sm inline-flex m-0.5"
-                    :size="64"
-                    imageUrl="https://i.imgur.com/GdWEt4z.jpg"
-                />
-            </template>
-        </Card>
-
-        <Card
-            title="TestCard"
-            color-title="text-nft-title"
-            color-tips="text-nft-title"
-            color-background="bg-nft-bg"
-            class="w-80"
-            :is-having-content="true"
-        >
-            <template #accessibility>
-                <i class="bx bx-info-circle" style="color: rgba(0, 0, 0, 0.2)" />
-            </template>
-            <template #content>
-                <details open>
-                    <summary class="text-nft-button">Cool Cats NFTs</summary>
-                    <p>
-                        <NFTItem
-                            v-for="id in 8"
-                            :key="id"
-                            class="shadow-nft-sm inline-flex m-0.5"
-                            :size="64"
-                            imageUrl="https://i.imgur.com/GdWEt4z.jpg"
-                        />
-                    </p>
-                </details>
-                <details class="mt-2">
-                    <summary class="text-nft-button">Cool Fendi NFTs</summary>
-                    <p>
-                        <NFTItem
-                            v-for="id in 8"
-                            :key="id"
-                            class="shadow-nft-sm inline-flex m-0.5"
-                            :size="64"
-                            imageUrl="https://i.imgur.com/GdWEt4z.jpg"
-                        />
-                    </p>
-                </details>
-            </template>
-        </Card>
-
-        <FollowerCard
-            class="w-80 shadow-content"
-            v-for="id in 3"
-            :key="id"
-            avatar="https://i.imgur.com/GdWEt4z.jpg"
-            name="Test"
-            address="0xD3E8ce4841ed658Ec8dcb99B7a74beFC377253EA"
-        />
-
-        <AccountItem chain="Ethereum" size="70" :deleteMode="true" />
-        <AccountItem chain="Ethereum" size="70" :deleteMode="false" />
-
-        <div class="h-45 relative w-45">
-            <NFTItem :size="180" imageUrl="https://i.imgur.com/GdWEt4z.jpg" />
-            <NFTBadges
-                class="absolute z-50 right-2.5 top-2.5"
-                chain="Ethereum"
-                location="overlay"
-                collectionImg="https://i.imgur.com/GdWEt4z.jpg"
-            />
-        </div>
-
-        <NFTBadges
-            class="absolute z-50 right-2.5 top-2.5"
-            chain="Ethereum"
-            location="header"
-            collectionImg="https://i.imgur.com/GdWEt4z.jpg"
-        />
-
-        <ScanTag chain="Ethereum" />
-        <ScanTag chain="Ronins" />
-
-        <Card
-            :title="`Draggable - 1 (Count: ${accounts.array1.length})`"
-            color-title="text-account-title"
-            color-tips="text-account-title"
-            color-background="bg-account-bg"
-            class="w-80"
-            :is-having-content="true"
-        >
-            <template #accessibility>
-                <i class="bx bx-info-circle" style="color: rgba(0, 0, 0, 0.2)" />
-            </template>
-            <template #header-button>
-                <Button size="sm" class="bg-account-button w-10 h-10 text-white shadow-account">
-                    <i class="bx bx-plus bx-sm"></i>
-                </Button>
-            </template>
-            <template #content>
-                <draggable class="min-h-20" :list="accounts.array1" group="accounts" itemKey="chain">
-                    <template #item="{ element }">
-                        <AccountItem
-                            class="shadow-account-sm inline-flex m-0.5 rounded-full"
-                            :size="64"
-                            :chain="element.chain"
-                        />
-                    </template>
-                </draggable>
-            </template>
-        </Card>
-        <Card
-            :title="`Draggable - 2 (Count: ${accounts.array2.length})`"
-            color-title="text-account-title"
-            color-tips="text-account-title"
-            color-background="bg-account-bg"
-            class="w-80"
-            :is-having-content="true"
-        >
-            <template #accessibility>
-                <i class="bx bx-info-circle" style="color: rgba(0, 0, 0, 0.2)" />
-            </template>
-            <template #header-button>
-                <Button size="sm" class="bg-account-button w-10 h-10 text-white shadow-account">
-                    <i class="bx bx-plus bx-sm"></i>
-                </Button>
-            </template>
-            <template #content>
-                <draggable class="min-h-20" :list="accounts.array2" group="accounts" itemKey="chain">
-                    <template #item="{ element }">
-                        <AccountItem
-                            class="shadow-account-sm inline-flex m-0.5 rounded-full"
-                            :size="64"
-                            :chain="element.chain"
-                        />
-                    </template>
-                </draggable>
-            </template>
-        </Card>
-
-        <Button size="lg" class="bg-content-button w-45 text-white shadow-content" @click="isShowingModal = true">
-            Open Modal
-        </Button>
-        <Modal v-if="isShowingModal">
-            <template #header>
-                <h1>Test Modal</h1>
-            </template>
-            <template #body>
-                <p>Here's something ...</p>
-            </template>
-            <template #footer>
-                <div class="flex flex-row gap-5">
-                    <Button
-                        size="sm"
-                        class="text-primary shadow-secondary w-32 bg-white"
-                        @click="isShowingModal = false"
-                    >
-                        Discard
-                    </Button>
-                    <Button size="sm" class="bg-primary shadow-primary w-32 text-white" @click="isShowingModal = false">
-                        Save
-                    </Button>
-                </div>
-            </template>
-        </Modal>
-
-        <div class="flex flex-row gap-5">
-            <Button size="lg" class="bg-primary shadow-primary w-40 text-white" @click="walletConnect">
-                Wallet Connect
-            </Button>
-            <Button size="lg" class="w-40 text-white bg-yellow-600" @click="metamaskConnect"> Metamask Connect </Button>
-        </div>
-        <Button size="lg" class="w-80 text-white bg-danger" @click="disconnect"> Disconnect </Button>
-
-        <Button size="lg" class="bg-primary shadow-primary w-80 text-white" @click="loadingModal"> Loading </Button>
-
-        <Button size="lg" class="bg-primary shadow-primary w-80 text-white" @click="shareModal"> Share </Button>
-        <!-- <Modal v-show="isLoading">
-            <template #body>
-                <span
-                    class="absolute block transform -translate-x-1/2 -translate-y-1/2 opacity-50 text-9xl text-primary top-1/2 left-1/2"
-                >
-                    <i class="bx bx-loader-alt bx-spin"></i>
-                </span>
-            </template>
-        </Modal> -->
-
-        <div class="w-80">
-            <div
-                class="aspect-w-16 aspect-h-9 rounded-2xl box-border"
-                style="background: linear-gradient(107.57deg, #34816e 18.23%, #eae195 99.85%, #9ab85a 99.9%)"
-            ></div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import Button from '@/components/Button.vue';
-import Input from '@/components/Input.vue';
-import AvatarEditor from '@/components/AvatarEditor.vue';
-import Card from '@/components/Card.vue';
-import FollowerCard from '@/components/FollowerCard.vue';
-import AccountItem from '@/components/AccountItem.vue';
-import NFTItem from '@/components/NFT/NFTItem.vue';
-import NFTBadges from '@/components/NFT/NFTBadges.vue';
-import ScanTag from '@/components/NFT/ScanTag.vue';
-import Modal from '@/components/Modal.vue';
-import RSS3 from '@/common/rss3';
-import FootprintCard from '@/components/FootprintCard.vue';
-
-import draggable from 'vuedraggable';
-
-import Loading from '@/components/Loading.vue';
-import BarCard from '@/components/BarCard.vue';
-
-import config from '@/config';
-
-@Options({
-    name: 'Test',
-    components: {
-        BarCard,
-        ScanTag,
-        Modal,
-        FollowerCard,
-        Card,
-        AvatarEditor,
-        Button,
-        Input,
-        AccountItem,
-        NFTItem,
-        NFTBadges,
-        draggable,
-        Loading,
-        FootprintCard,
-    },
-})
-export default class Test extends Vue {
-    config: typeof config = config;
-    value: String = 'value';
-    accounts: Object = {
-        array1: [
-            {
-                address: '0x123456789',
-                chain: 'Ethereum',
-            },
-            {
-                address: '0x123456789',
-                chain: 'BSC',
-            },
-        ],
-        array2: [
-            {
-                address: '0x123456789',
-                chain: 'Ronin',
-            },
-        ],
-    };
-    isShowingModal: Boolean = false;
-    isLoading: Boolean = false;
-    isShareing: Boolean = false;
-
-    async walletConnect() {
-        await RSS3.walletConnect();
-    }
-
-    async metamaskConnect() {
-        await RSS3.metamaskConnect();
-    }
-
-    async disconnect() {
-        await RSS3.disconnect();
-    }
-
-    async loadingModal() {
-        this.isLoading = true;
-        setTimeout(() => {
-            this.isLoading = false;
-        }, 2000);
-    }
-
-    async shareModal() {
-        this.isShareing = true;
-        setTimeout(() => {
-            this.isShareing = false;
-        }, 8000);
-    }
-}
-</script>
-
-<style></style>
diff --git a/src/views/test.vue b/src/views/test.vue
new file mode 100644
index 0000000..d515971
--- /dev/null
+++ b/src/views/test.vue
@@ -0,0 +1,136 @@
+<template>
+    <div class="flex flex-col justify-center m-auto h-screen overflow-y-auto">
+        <div
+            class="
+                flex flex-col
+                gap-y-4
+                items-center
+                m-auto
+                py-36
+                w-full
+                bg-gradient-to-r
+                from-blue-400
+                object-cover object-center
+            "
+        >
+            <TransBarCard class="w-96" title="Virtrine">
+                <template #content>
+                    <NFTItem
+                        class="mr-1 cursor-pointer"
+                        image-url="https://i.imgur.com/GdWEt4z.jpg"
+                        poster-url="https://i.imgur.com/GdWEt4z.jpg"
+                        size="sm"
+                        v-for="id in 32"
+                        :key="id"
+                    />
+                </template>
+                <template #button>
+                    <Button size="sm" class="w-8 h-8 text-primary-text bg-nft-btn-s">
+                        <i class="bx bx-expand-alt bx-xs" />
+                    </Button>
+                </template>
+            </TransBarCard>
+            <TransBarCard class="w-96" title="Games">
+                <template #content>
+                    <NFTItem
+                        class="mr-1 cursor-pointer"
+                        image-url="https://i.imgur.com/GdWEt4z.jpg"
+                        poster-url="https://i.imgur.com/GdWEt4z.jpg"
+                        size="sm"
+                        v-for="id in 32"
+                        :key="id"
+                    />
+                </template>
+                <template #button>
+                    <Button size="sm" class="w-8 h-8 text-primary-text bg-nft-btn-s">
+                        <i class="bx bx-expand-alt bx-xs" />
+                    </Button>
+                </template>
+            </TransBarCard>
+            <TransBarCard
+                class="w-96"
+                title="Organizations
+ "
+            >
+                <template #content>
+                    <NFTItem
+                        class="mr-1 cursor-pointer"
+                        image-url="https://i.imgur.com/GdWEt4z.jpg"
+                        poster-url="https://i.imgur.com/GdWEt4z.jpg"
+                        size="sm"
+                        v-for="id in 32"
+                        :key="id"
+                    />
+                </template>
+                <template #button>
+                    <Button size="sm" class="w-8 h-8 text-primary-text bg-nft-btn-s">
+                        <i class="bx bx-expand-alt bx-xs" />
+                    </Button>
+                </template>
+            </TransBarCard>
+            <TransCard
+                title="Footprints"
+                class="w-96 border-footprint-border"
+                :is-having-content="true"
+                :is-single-line="false"
+                id="footprint-card"
+            >
+                <template #header-button>
+                    <section class="flex flex-row gap-2">
+                        <Button size="sm" class="w-8 h-8 text-primary-text bg-footprint-btn-s">
+                            <i class="bx bx-expand-alt bx-xs" />
+                        </Button>
+                    </section>
+                </template>
+                <template #content>
+                    <div class="flex flex-col gap-1 px-0.5">
+                        <FootprintCard
+                            imageUrl="https://i.imgur.com/GdWEt4z.jpg"
+                            username="Fendi"
+                            start-date="0x61800f00"
+                            end-date="0x61800f00"
+                            activity="poapActivity"
+                            location="Metaverse"
+                            :special="false"
+                        />
+                        <div class="inline-flex pb-2 px-4 overflow-x-auto" style="scrollbar-width: thin">
+                            <FootprintItem
+                                v-for="item of 32"
+                                :key="item"
+                                imageUrl="https://i.imgur.com/GdWEt4z.jpg"
+                                size="sm"
+                                class="flex-shrink-0 mr-1"
+                            />
+                        </div>
+                    </div>
+                </template>
+            </TransCard>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+
+import Button from '@/components/Button/Button.vue';
+import TransBarCard from '@/components/Card/TransBarCard.vue';
+import TransCard from '@/components/Card/TransCard.vue';
+import NFTItem from '@/components/NFT/NFTItem.vue';
+import FootprintItem from '@/components/Footprint/FootprintItem.vue';
+import FootprintCard from '@/components/Footprint/FootprintCard.vue';
+
+@Options({
+    name: 'Test',
+    components: {
+        Button,
+        TransBarCard,
+        NFTItem,
+        TransCard,
+        FootprintItem,
+        FootprintCard,
+    },
+})
+export default class Test extends Vue {}
+</script>
+
+<style lang="postcss" scoped></style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 81aa413..a8e7621 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -37,7 +37,6 @@ module.exports = {
                     bg: 'var(--color-body-bg)',
                     text: 'var(--color-body-text)',
                 },
-
                 account: {
                     border: 'var(--color-account-border)',
                     title: 'var(--color-account-title)',
@@ -207,11 +206,13 @@ module.exports = {
                 serif: 'Times New Roman, SourceHanSerif, SourceHanSerifSC, SourceHanSerifTC, SourceHanSerifK, Times, serif',
             },
             width: {
+                19: '4.875rem', //78px, footprint item in footprint card
                 27: '6.75rem', //108px, scan tag width
                 45: '11.25rem', //180px, discard & save button width,
                 50: '12.5rem', //200px
             },
             height: {
+                19: '4.875rem',
                 50: '12.5rem', //200px
                 72: '18rem',
                 112: '28rem',
diff --git a/yarn.lock b/yarn.lock
index bb80f4a..eb0b514 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9008,8 +9008,8 @@ vue@3.2.22:
 
 vuedraggable@4.1.0:
   version "4.1.0"
-  resolved "https://registry.nlark.com/vuedraggable/download/vuedraggable-4.1.0.tgz?cache=0&sync_timestamp=1629673509313&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvuedraggable%2Fdownload%2Fvuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
-  integrity sha1-7ezmituKTZ4GrM/538kEDmaFInA=
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
+  integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
   dependencies:
     sortablejs "1.14.0"