diff --git a/bun.lockb b/bun.lockb
index 4a644bd..04ac9f1 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/LoginInput.vue b/components/LoginInput.vue
index 9556ad7..9334164 100644
--- a/components/LoginInput.vue
+++ b/components/LoginInput.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import type { InputHTMLAttributes } from 'vue';
+import type { InputHTMLAttributes } from "vue";
 
 interface Props extends /* @vue-ignore */ InputHTMLAttributes {
     isInvalid?: boolean;
diff --git a/components/buttons/DropdownElement.vue b/components/buttons/DropdownElement.vue
new file mode 100644
index 0000000..e254d92
--- /dev/null
+++ b/components/buttons/DropdownElement.vue
@@ -0,0 +1,19 @@
+<template>
+    <ButtonsBase
+        class="bg-white/10 hover:bg-white/20 !text-left flex flex-row gap-x-3 !rounded-none !ring-0 !p-4 sm:!p-3">
+        <Icon :name="icon" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+        <slot />
+    </ButtonsBase>
+</template>
+
+<script lang="ts" setup>
+import type { ButtonHTMLAttributes } from "vue";
+
+interface Props extends /* @vue-ignore */ ButtonHTMLAttributes { }
+
+defineProps<Props & {
+    icon: string;
+}>();
+</script>
+
+<style></style>
\ No newline at end of file
diff --git a/components/buttons/base.vue b/components/buttons/base.vue
index 8df0f44..693622f 100644
--- a/components/buttons/base.vue
+++ b/components/buttons/base.vue
@@ -8,7 +8,7 @@
 <script lang="ts" setup>
 import type { ButtonHTMLAttributes } from "vue";
 
-interface Props extends /* @vue-ignore */ ButtonHTMLAttributes { }
+interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
 
 defineProps<Props>();
 </script>
diff --git a/components/dropdowns/AdaptiveDropdown.vue b/components/dropdowns/AdaptiveDropdown.vue
new file mode 100644
index 0000000..2c97e7e
--- /dev/null
+++ b/components/dropdowns/AdaptiveDropdown.vue
@@ -0,0 +1,29 @@
+<template>
+    <HeadlessMenu v-slot="{ close }">
+        <slot name="button"></slot>
+
+        <HeadlessMenuItems @click="close" class="fixed inset-0 z-5 bg-black/50">
+
+        </HeadlessMenuItems>
+
+        <transition enter-active-class="transition ease-in duration-100"
+            enter-from-class="transform opacity-0 translate-y-full sm:translate-y-0 scale-95"
+            enter-to-class="transform translate-y-0 opacity-100 scale-100"
+            leave-active-class="transition ease-out duration-75" leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95">
+            <HeadlessMenuItems
+                :class="['z-10 mt-2 rounded overflow-hidden bg-dark-900 shadow-lg ring-1 ring-white/10 focus:outline-none',
+        isSmallScreen ? 'bottom-0 fixed inset-x-0 w-full origin-bottom' : 'absolute right-0 origin-top-right top-full min-w-56']">
+                <div v-if="isSmallScreen" class="w-full bg-white/10 py-2">
+                    <div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div>
+                </div>
+                <slot name="items"></slot>
+            </HeadlessMenuItems>
+        </transition>
+    </HeadlessMenu>
+</template>
+
+<script setup lang="ts">
+const { width } = useWindowSize()
+const isSmallScreen = computed(() => width.value < 640)
+</script>
\ No newline at end of file
diff --git a/components/skeleton/Skeleton.vue b/components/skeleton/Skeleton.vue
index 6a167ae..a40b262 100644
--- a/components/skeleton/Skeleton.vue
+++ b/components/skeleton/Skeleton.vue
@@ -12,29 +12,38 @@
 </template>
 
 <script lang="ts" setup>
-const props = withDefaults(defineProps<{
-    enabled: boolean;
-    shape?: "circle" | "rect";
-    type?: "text" | "content";
-    minWidth?: number;
-    maxWidth?: number;
-    widthUnit?: "px" | "%";
-    class?: string;
-}>(), {
-    shape: "rect",
-    type: "text",
-    widthUnit: "px",
-});
+const props = withDefaults(
+    defineProps<{
+        enabled: boolean;
+        shape?: "circle" | "rect";
+        type?: "text" | "content";
+        minWidth?: number;
+        maxWidth?: number;
+        widthUnit?: "px" | "%";
+        class?: string;
+    }>(),
+    {
+        shape: "rect",
+        type: "text",
+        widthUnit: "px",
+    },
+);
 
 const isContent = computed(() => props.type === "content");
 const isText = computed(() => props.type === "text");
 const isWidthSpecified = computed(() => props.minWidth && props.maxWidth);
-const calculatedWidth = computed(() => Math.random() * ((props.maxWidth ?? 0) - (props.minWidth ?? 0)) + (props.minWidth ?? 0));
+const calculatedWidth = computed(
+    () =>
+        Math.random() * ((props.maxWidth ?? 0) - (props.minWidth ?? 0)) +
+        (props.minWidth ?? 0),
+);
 
 const getWidth = (index: number, lines: number) => {
     if (isWidthSpecified.value) {
         if (isContent.value)
-            return index === lines ? `${calculatedWidth.value}${props.widthUnit}` : '100%';
+            return index === lines
+                ? `${calculatedWidth.value}${props.widthUnit}`
+                : "100%";
         return `${calculatedWidth.value}${props.widthUnit}`;
     }
     return undefined;
diff --git a/components/social-elements/notes/attachment.vue b/components/social-elements/notes/attachment.vue
index 53adbe6..f60677c 100644
--- a/components/social-elements/notes/attachment.vue
+++ b/components/social-elements/notes/attachment.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { Attachment } from '~/types/mastodon/attachment';
+import type { Attachment } from "~/types/mastodon/attachment";
 
 const lightbox = ref(false);
 
diff --git a/components/social-elements/notes/mention.vue b/components/social-elements/notes/mention.vue
index 3f21f72..6fd6037 100644
--- a/components/social-elements/notes/mention.vue
+++ b/components/social-elements/notes/mention.vue
@@ -1,14 +1,14 @@
 <template>
-    <span
-        class="shrink break-all rounded bg-pink-700/30 text-pink-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-pink-600/30">
+    <a :href="`/@${account.acct}`"
+        class="shrink break-all rounded bg-pink-700/80 text-pink-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-pink-600/30">
         <img class="h-[1em] w-[1em] rounded ring-1 ring-white/5 inline align-middle mb-1 mr-1" :src="account.avatar"
             alt="" />
         {{ account.display_name }}
-    </span>
+    </a>
 </template>
 
 <script lang="ts" setup>
-import type { Account } from '~/types/mastodon/account';
+import type { Account } from "~/types/mastodon/account";
 
 const props = defineProps<{
     account: Account;
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
index 93e92b9..8deee15 100644
--- a/components/social-elements/notes/note.vue
+++ b/components/social-elements/notes/note.vue
@@ -34,7 +34,7 @@
             <Skeleton :enabled="true" v-if="isLoading" :min-width="50" :max-width="100" width-unit="%" shape="rect"
                 type="content">
             </Skeleton>
-            <div v-else-if="content" class="prose prose-invert prose-a:no-underline" v-html="content">
+            <div v-else-if="content" class="prose prose-invert prose-a:no-underline content" v-html="content">
             </div>
         </NuxtLink>
         <div v-if="attachments.length > 0" class="[&:not(:first-child)]:mt-6">
@@ -43,7 +43,7 @@
         </div>
         <Skeleton class="!h-10 w-full mt-6" :enabled="true" v-if="isLoading"></Skeleton>
         <div v-else
-            class="mt-6 flex flex-row items-stretch justify-between text-sm h-10 hover:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
+            class="mt-6 flex flex-row items-stretch relative justify-between text-sm h-10 hover:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
             <button>
                 <Icon name="tabler:arrow-back-up" class="h-5 w-5 text-gray-200" aria-hidden="true" />
                 <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.replies_count) }}</span>
@@ -60,9 +60,28 @@
                 <Icon name="tabler:quote" class="h-5 w-5 text-gray-200" aria-hidden="true" />
                 <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
             </button>
-            <button>
-                <Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" />
-            </button>
+            <DropdownsAdaptiveDropdown>
+                <template #button>
+                    <HeadlessMenuButton>
+                        <Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+                    </HeadlessMenuButton>
+                </template>
+
+                <template #items>
+                    <HeadlessMenuItem>
+                        <ButtonsDropdownElement @click="copy(JSON.stringify(note, null, 4))" icon="tabler:code"
+                            class="w-full">
+                            Copy API
+                            Response
+                        </ButtonsDropdownElement>
+                    </HeadlessMenuItem>
+                    <HeadlessMenuItem>
+                        <ButtonsDropdownElement @click="note && copy(note.uri)" icon="tabler:code" class="w-full">
+                            Copy Link
+                        </ButtonsDropdownElement>
+                    </HeadlessMenuItem>
+                </template>
+            </DropdownsAdaptiveDropdown>
         </div>
     </div>
 </template>
@@ -79,15 +98,53 @@ const props = defineProps<{
 const isLoading = props.skeleton;
 const timeAgo = useTimeAgo(props.note?.created_at ?? 0);
 
+const { copy } = useClipboard();
 const client = await useMegalodon();
 const mentions = await useResolveMentions(props.note?.mentions ?? [], client);
-const content = props.note ? await useParsedContent(props.note.content, props.note.emojis, mentions.value) : "";
-const numberFormat = (number = 0) => new Intl.NumberFormat(undefined, {
-    notation: "compact",
-    compactDisplay: "short",
-    maximumFractionDigits: 1,
-}).format(number);
+const content = props.note
+    ? await useParsedContent(
+        props.note.content,
+        props.note.emojis,
+        mentions.value,
+    )
+    : "";
+const numberFormat = (number = 0) =>
+    new Intl.NumberFormat(undefined, {
+        notation: "compact",
+        compactDisplay: "short",
+        maximumFractionDigits: 1,
+    }).format(number);
 const attachments = props.note?.media_attachments ?? [];
 const noteUrl = props.note && `/@${props.note.account.acct}/${props.note.id}`;
 const accountUrl = props.note && `/@${props.note.account.acct}`;
-</script>
\ No newline at end of file
+</script>
+
+<style>
+.content pre:has(code) {
+    word-wrap: normal;
+    background: transparent;
+    background-color: #ffffff0d;
+    border-radius: .25rem;
+    -webkit-hyphens: none;
+    hyphens: none;
+    margin-top: 1rem;
+    overflow-x: auto;
+    padding: .75rem 1rem;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    white-space: pre;
+    word-break: normal;
+    word-spacing: normal;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-color: hsla(0, 0%, 100%, .1)
+}
+
+.content pre code {
+    display: block;
+    padding: 0
+}
+</style>
\ No newline at end of file
diff --git a/composables/AccountTimeline.ts b/composables/AccountTimeline.ts
new file mode 100644
index 0000000..6b2fd0d
--- /dev/null
+++ b/composables/AccountTimeline.ts
@@ -0,0 +1,92 @@
+import type { Mastodon } from "megalodon";
+import type { Status } from "~/types/mastodon/status";
+
+export const useAccountTimeline = (
+    client: Mastodon | null,
+    id: string | null,
+    options: MaybeRef<
+        Partial<{
+            limit?: number | undefined;
+            max_id?: string | undefined;
+            since_id?: string | undefined;
+            min_id?: string | undefined;
+            pinned?: boolean | undefined;
+            exclude_replies?: boolean | undefined;
+            exclude_reblogs?: boolean | undefined;
+            only_media: boolean;
+        }>
+    >,
+): {
+    timeline: Ref<Status[]>;
+    loadNext: () => Promise<void>;
+    loadPrev: () => Promise<void>;
+} => {
+    if (!client || !id) {
+        return {
+            timeline: ref([]),
+            loadNext: async () => {},
+            loadPrev: async () => {},
+        };
+    }
+
+    const fetchedNotes = ref<Status[]>([]);
+    const fetchedNoteIds = new Set<string>();
+    let nextMaxId: string | undefined = undefined;
+    let prevMinId: string | undefined = undefined;
+
+    const loadNext = async () => {
+        const response = await client.getAccountStatuses(id, {
+            only_media: false,
+            ...ref(options).value,
+            max_id: nextMaxId,
+            limit: useConfig().NOTES_PER_PAGE,
+        });
+
+        const newNotes = response.data.filter(
+            (note) => !fetchedNoteIds.has(note.id),
+        );
+        if (newNotes.length > 0) {
+            fetchedNotes.value = [...fetchedNotes.value, ...newNotes];
+            nextMaxId = newNotes[newNotes.length - 1].id;
+            for (const note of newNotes) {
+                fetchedNoteIds.add(note.id);
+            }
+        } else {
+            nextMaxId = undefined;
+        }
+    };
+
+    const loadPrev = async () => {
+        const response = await client.getAccountStatuses(id, {
+            only_media: false,
+            ...ref(options).value,
+            min_id: prevMinId,
+            limit: useConfig().NOTES_PER_PAGE,
+        });
+
+        const newNotes = response.data.filter(
+            (note) => !fetchedNoteIds.has(note.id),
+        );
+        if (newNotes.length > 0) {
+            fetchedNotes.value = [...newNotes, ...fetchedNotes.value];
+            prevMinId = newNotes[0].id;
+            for (const note of newNotes) {
+                fetchedNoteIds.add(note.id);
+            }
+        } else {
+            prevMinId = undefined;
+        }
+    };
+
+    watch(
+        () => ref(options).value,
+        async ({ max_id, min_id }) => {
+            nextMaxId = max_id;
+            prevMinId = min_id;
+            await loadNext();
+        },
+        { immediate: true },
+    );
+
+    return { timeline: fetchedNotes, loadNext, loadPrev };
+};
diff --git a/composables/ParsedContent.ts b/composables/ParsedContent.ts
index fca2127..ec77ee7 100644
--- a/composables/ParsedContent.ts
+++ b/composables/ParsedContent.ts
@@ -1,7 +1,7 @@
+import { renderToString } from "vue/server-renderer";
 import type { Account } from "~/types/mastodon/account";
 import type { Emoji } from "~/types/mastodon/emoji";
 import MentionComponent from "../components/social-elements/notes/mention.vue";
-import { renderToString } from "vue/server-renderer";
 
 /**
  * Takes in an HTML string, parses emojis and returns a reactive object with the parsed content.
@@ -55,5 +55,24 @@ export const useParsedContent = async (
 
         link.outerHTML = await renderToString(renderedMention);
     }
+
+    // Highlight code blocks
+    const codeBlocks = contentHtml.querySelectorAll("pre code");
+    for (const codeBlock of codeBlocks) {
+        const code = codeBlock.textContent;
+        if (!code) {
+            continue;
+        }
+        const newCode = (await getShikiHighlighter()).highlight(code, {
+            lang: codeBlock.getAttribute("class")?.replace("language-", ""),
+        });
+
+        // Replace parent pre tag with highlighted code
+        const parent = codeBlock.parentElement;
+        if (!parent) {
+            continue;
+        }
+        parent.outerHTML = newCode;
+    }
     return ref(contentHtml.innerHTML);
 };
diff --git a/composables/usePublicTimeline.ts b/composables/PublicTimeline.ts
similarity index 100%
rename from composables/usePublicTimeline.ts
rename to composables/PublicTimeline.ts
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ba3bb5d..56f9320 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -8,6 +8,7 @@ export default defineNuxtConfig({
         "@nuxt/fonts",
         "nuxt-icon",
         "@vee-validate/nuxt",
+        "nuxt-shiki",
     ],
     app: {
         head: {
@@ -21,6 +22,24 @@ export default defineNuxtConfig({
             htmlAttrs: { lang: "en-us" },
         },
     },
+    shiki: {
+        defaultTheme: "rose-pine",
+        bundledLangs: [
+            "javascript",
+            "typescript",
+            "html",
+            "css",
+            "json",
+            "python",
+            "toml",
+            "rust",
+            "sql",
+            "scss",
+            "bash",
+            "shell",
+            "yaml",
+        ],
+    },
     nitro: {
         preset: "bun",
         minify: true,
diff --git a/package.json b/package.json
index 97c2d61..c182562 100644
--- a/package.json
+++ b/package.json
@@ -1,58 +1,59 @@
 {
-  "name": "lysand-fe",
-  "private": true,
-  "type": "module",
-  "license": "AGPL-3.0",
-  "author": {
-    "email": "contact@cpluspatch.com",
-    "name": "CPlusPatch",
-    "url": "https://cpluspatch.com"
-  },
-  "maintainers": [
-    {
-      "email": "contact@cpluspatch.com",
-      "name": "CPlusPatch",
-      "url": "https://cpluspatch.com"
-    }
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/lysand-org/lysand-fe.git"
-  },
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
-  },
-  "dependencies": {
-    "@nuxt/fonts": "^0.6.1",
-    "@tailwindcss/typography": "^0.5.12",
-    "@vee-validate/nuxt": "^4.12.6",
-    "@vee-validate/zod": "^4.12.6",
-    "c12": "^1.10.0",
-    "megalodon": "^10.0.0",
-    "nuxt": "^3.11.2",
-    "nuxt-headlessui": "^1.2.0",
-    "nuxt-icon": "^0.6.10",
-    "shiki": "^1.3.0",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "zod": "^3.23.0"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "^1.6.4",
-    "@nuxtjs/seo": "^2.0.0-rc.10",
-    "@nuxtjs/tailwindcss": "^6.11.4",
-    "@tailwindcss/forms": "^0.5.7",
-    "@vue-email/nuxt": "^0.8.19"
-  },
-  "trustedDependencies": [
-    "@biomejs/biome",
-    "@fortawesome/fontawesome-common-types",
-    "@fortawesome/free-regular-svg-icons",
-    "@fortawesome/free-solid-svg-icons",
-    "json-editor-vue"
-  ]
+    "name": "lysand-fe",
+    "private": true,
+    "type": "module",
+    "license": "AGPL-3.0",
+    "author": {
+        "email": "contact@cpluspatch.com",
+        "name": "CPlusPatch",
+        "url": "https://cpluspatch.com"
+    },
+    "maintainers": [
+        {
+            "email": "contact@cpluspatch.com",
+            "name": "CPlusPatch",
+            "url": "https://cpluspatch.com"
+        }
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/lysand-org/lysand-fe.git"
+    },
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare"
+    },
+    "dependencies": {
+        "@nuxt/fonts": "^0.6.1",
+        "@tailwindcss/typography": "^0.5.12",
+        "@vee-validate/nuxt": "^4.12.6",
+        "@vee-validate/zod": "^4.12.6",
+        "c12": "^1.10.0",
+        "megalodon": "^10.0.0",
+        "nuxt": "^3.11.2",
+        "nuxt-headlessui": "^1.2.0",
+        "nuxt-icon": "^0.6.10",
+        "nuxt-shiki": "^0.3.0",
+        "shiki": "^1.3.0",
+        "vue": "^3.4.21",
+        "vue-router": "^4.3.0",
+        "zod": "^3.23.0"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^1.6.4",
+        "@nuxtjs/seo": "^2.0.0-rc.10",
+        "@nuxtjs/tailwindcss": "^6.11.4",
+        "@tailwindcss/forms": "^0.5.7",
+        "@vue-email/nuxt": "^0.8.19"
+    },
+    "trustedDependencies": [
+        "@biomejs/biome",
+        "@fortawesome/fontawesome-common-types",
+        "@fortawesome/free-regular-svg-icons",
+        "@fortawesome/free-solid-svg-icons",
+        "json-editor-vue"
+    ]
 }
diff --git a/pages/[username]/[uuid].vue b/pages/[username]/[uuid].vue
index 396aeb3..2d9378b 100644
--- a/pages/[username]/[uuid].vue
+++ b/pages/[username]/[uuid].vue
@@ -11,7 +11,7 @@ import { useRoute } from "vue-router";
 
 const route = useRoute();
 const client = await useMegalodon();
-const uuid = (route.params.uuid as string);
+const uuid = route.params.uuid as string;
 
 const note = await useNote(client, uuid);
 </script>
\ No newline at end of file
diff --git a/pages/[username]/index.vue b/pages/[username]/index.vue
index 266249d..9ec7cfb 100644
--- a/pages/[username]/index.vue
+++ b/pages/[username]/index.vue
@@ -1,6 +1,7 @@
 <template>
-    <div class="flex min-h-screen flex-col justify-center py-12 lg:px-8 relative">
-        <div v-if="account" class="mx-auto max-w-lg w-full rounded ring-1 ring-white/10 pb-10">
+    <div
+        class="flex mx-auto max-w-7xl min-h-screen flex-col gap-x-6 md:flex-row justify-center items-start md:py-12 lg:px-8 relative">
+        <div v-if="account" class="w-full rounded ring-1 md:max-w-lg ring-white/10 pb-10">
             <div class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700">
                 <img v-if="account.header" :src="account.header" class="object-cover w-full h-full" />
             </div>
@@ -22,7 +23,7 @@
             </div>
 
             <div class="mt-4 px-4">
-                <div class="prose prose-invert" v-html="account.note"></div>
+                <div class="prose prose-invert" v-html="parsedNote"></div>
             </div>
 
             <div class="mt-3 flex items-center space-x-4 px-4">
@@ -46,7 +47,27 @@
                     <span class="text-gray-400">Followers</span>
                 </div>
             </div>
+
+            <div v-if="parsedFields.length > 0" class="mt-4 px-4 flex-col flex gap-y-3">
+                <div v-for="field of parsedFields" :key="field.name.value" class="flex flex-col gap-1">
+                    <span class="text-pink-500 font-semibold" v-html="field.name.value"></span>
+                    <span class="text-gray-200 prose prose-invert break-all" v-html="field.value.value"></span>
+                </div>
+            </div>
         </div>
+        <ClientOnly>
+            <div class="w-full">
+                <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
+                <span ref="skeleton"></span>
+                <SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
+
+                <div v-if="hasReachedEnd"
+                    class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
+                    <Icon name="tabler:message-off" class="h-6 w-6" />
+                    <span>No more posts, you've seen them all</span>
+                </div>
+            </div>
+        </ClientOnly>
     </div>
 </template>
 
@@ -56,11 +77,55 @@ import { useRoute } from "vue-router";
 const route = useRoute();
 const client = await useMegalodon();
 const username = (route.params.username as string).replace("@", "");
-const id = await useAccountSearch(client, username);
-
-const account = id ? await useAccount(client, id[0].id) : null;
+const accounts = await useAccountSearch(client, username);
+const account =
+    (await accounts?.find((account) => account.acct === username)) ?? null;
 const formattedJoin = Intl.DateTimeFormat("en-US", {
     month: "long",
     year: "numeric",
 }).format(new Date(account?.created_at ?? 0));
+
+useServerSeoMeta({
+    title: account?.display_name,
+    description: account?.note,
+    ogImage: account?.avatar,
+});
+
+const isLoadingTimeline = ref(true);
+
+const timelineParameters = ref({});
+const hasReachedEnd = ref(false);
+const { timeline, loadNext, loadPrev } = useAccountTimeline(
+    client,
+    account?.id ?? null,
+    timelineParameters,
+);
+const skeleton = ref<HTMLSpanElement | null>(null);
+
+const parsedNote = account ? await useParsedContent(account?.note, account?.emojis, []) : ref("");
+const parsedFields = await Promise.all(account?.fields.map(async (field) => ({
+    name: await useParsedContent(field.name, account.emojis, []),
+    value: await useParsedContent(field.value, account.emojis, []),
+})) ?? []);
+
+onMounted(() => {
+    useIntersectionObserver(skeleton, async (entries) => {
+        if (
+            entries[0].isIntersecting &&
+            !hasReachedEnd.value &&
+            !isLoadingTimeline.value
+        ) {
+            isLoadingTimeline.value = true;
+            await loadNext();
+        }
+    });
+});
+
+watch(timeline, (newTimeline, oldTimeline) => {
+    isLoadingTimeline.value = false;
+    // If less than NOTES_PER_PAGE statuses are returned, we have reached the end
+    if (newTimeline.length - oldTimeline.length < useConfig().NOTES_PER_PAGE) {
+        hasReachedEnd.value = true;
+    }
+});
 </script>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index dfbf74d..bd78802 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -56,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-const baseUrl = useBaseUrl()
+const baseUrl = useBaseUrl();
 
 useServerSeoMeta({
     title: "Welcome to Lysand!",
diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue
index c7faac5..b7cc2b9 100644
--- a/pages/oauth/authorize.vue
+++ b/pages/oauth/authorize.vue
@@ -80,15 +80,17 @@
 </template>
 
 <script setup lang="ts">
+import { toTypedSchema } from "@vee-validate/zod";
 import { useRoute } from "vue-router";
+import { z } from "zod";
 import LoginInput from "../../components/LoginInput.vue";
-import { toTypedSchema } from '@vee-validate/zod';
-import { z } from 'zod';
 
-const schema = toTypedSchema(z.object({
-    email: z.string().email(),
-    password: z.string().min(3),
-}));
+const schema = toTypedSchema(
+    z.object({
+        email: z.string().email(),
+        password: z.string().min(3),
+    }),
+);
 
 const query = useRoute().query;
 
@@ -101,5 +103,5 @@ const error_description = decodeURIComponent(query.error_description as string);
 
 const validUrlParameters = redirect_uri && response_type && client_id && scope;
 
-const oauthProviders = await useOAuthProviders()
+const oauthProviders = await useOAuthProviders();
 </script>
\ No newline at end of file
diff --git a/pages/oauth/consent.vue b/pages/oauth/consent.vue
index 115c577..3b1a6cb 100644
--- a/pages/oauth/consent.vue
+++ b/pages/oauth/consent.vue
@@ -97,7 +97,9 @@ const url = useRequestURL();
 const query = useRoute().query;
 
 const application = "Soapbox"; //query.application;
-const website = query.website ? decodeURIComponent(query.website as string) : null;
+const website = query.website
+    ? decodeURIComponent(query.website as string)
+    : null;
 const redirect_uri = query.redirect_uri as string;
 const client_id = query.client_id;
 const scope = query.scope ? decodeURIComponent(query.scope as string) : "";
diff --git a/pages/public.vue b/pages/public.vue
index 37213c6..a1ab92e 100644
--- a/pages/public.vue
+++ b/pages/public.vue
@@ -21,17 +21,24 @@ const isLoading = ref(true);
 
 const timelineParameters = ref({});
 const hasReachedEnd = ref(false);
-const { timeline, loadNext, loadPrev } = usePublicTimeline(client, timelineParameters);
+const { timeline, loadNext, loadPrev } = usePublicTimeline(
+    client,
+    timelineParameters,
+);
 const skeleton = ref<HTMLSpanElement | null>(null);
 
 onMounted(() => {
     useIntersectionObserver(skeleton, async (entries) => {
-        if (entries[0].isIntersecting && !hasReachedEnd.value && !isLoading.value) {
+        if (
+            entries[0].isIntersecting &&
+            !hasReachedEnd.value &&
+            !isLoading.value
+        ) {
             isLoading.value = true;
             await loadNext();
         }
     });
-})
+});
 
 watch(timeline, (newTimeline, oldTimeline) => {
     isLoading.value = false;
diff --git a/pages/register/index.vue b/pages/register/index.vue
index 57e4d64..676caac 100644
--- a/pages/register/index.vue
+++ b/pages/register/index.vue
@@ -84,28 +84,35 @@
 </template>
 
 <script setup lang="ts">
-import LoginInput from "../../components/LoginInput.vue";
-import { toTypedSchema } from '@vee-validate/zod';
+import { toTypedSchema } from "@vee-validate/zod";
 import type { AxiosError } from "axios";
-import { z } from 'zod';
+import { z } from "zod";
+import LoginInput from "../../components/LoginInput.vue";
 
-const schema = toTypedSchema(z.object({
-    email: z.string().email(),
-    password: z.string().min(3),
-    password2: z.string().min(3),
-    username: z.string().min(3).regex(/^[a-z0-9_]+$/),
-    reason: z.string().optional(),
-    tos: z.string(),
-}).superRefine((data, ctx) => {
-    if (data.password !== data.password2) {
-        ctx.addIssue({
-            path: [...ctx.path, 'password2'],
-            code: "custom",
-            message: 'Passwords do not match',
-        });
-    }
-    return {};
-}));
+const schema = toTypedSchema(
+    z
+        .object({
+            email: z.string().email(),
+            password: z.string().min(3),
+            password2: z.string().min(3),
+            username: z
+                .string()
+                .min(3)
+                .regex(/^[a-z0-9_]+$/),
+            reason: z.string().optional(),
+            tos: z.string(),
+        })
+        .superRefine((data, ctx) => {
+            if (data.password !== data.password2) {
+                ctx.addIssue({
+                    path: [...ctx.path, "password2"],
+                    code: "custom",
+                    message: "Passwords do not match",
+                });
+            }
+            return {};
+        }),
+);
 
 const client = await useMegalodon();
 const instance = await useInstance(client);
@@ -126,7 +133,15 @@ const register = (result: {
     reason: string;
 }) => {
     isLoading.value = true;
-    client.registerAccount(result.username, result.email, result.password, true, "en", result.reason || "Empty reason")
+    client
+        .registerAccount(
+            result.username,
+            result.email,
+            result.password,
+            true,
+            "en",
+            result.reason || "Empty reason",
+        )
         .then(async (res) => {
             navigateTo("/register/success");
         })
@@ -135,8 +150,9 @@ const register = (result: {
             // @ts-ignore
             errors.value = error.response?.data || {};
             console.error(err);
-        }).finally(() => {
+        })
+        .finally(() => {
             isLoading.value = false;
         });
-}
+};
 </script>
\ No newline at end of file