diff --git a/.github/ISSUE_TEMPLATE/2-feature-request.yml b/.github/ISSUE_TEMPLATE/2-feature-request.yml
index 6f9aec820..7b2839953 100644
--- a/.github/ISSUE_TEMPLATE/2-feature-request.yml
+++ b/.github/ISSUE_TEMPLATE/2-feature-request.yml
@@ -3,7 +3,7 @@ name: ✨ Feature Request
 description: Suggest an feature or idea that you would like to see in Reactive Resume
 
 title: "[Feature] <title>"
-labels: [feature, v5, needs triage]
+labels: [enhancement, v5, needs triage]
 assignees: "AmruthPillai"
 
 body:
diff --git a/compose.dev.yml b/compose.dev.yml
index 81c4fca1a..8c870f04c 100644
--- a/compose.dev.yml
+++ b/compose.dev.yml
@@ -1,6 +1,21 @@
 name: reactive_resume
 
 services:
+  adminer:
+    image: adminer:latest
+    restart: unless-stopped
+    ports:
+      - "8080:8080"
+    depends_on:
+      postgres:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8080"]
+      start_period: 10s
+      interval: 30s
+      timeout: 10s
+      retries: 3
+
   postgres:
     image: postgres:latest
     restart: unless-stopped
diff --git a/docs/docs.json b/docs/docs.json
index 6e8392ebd..989e35d21 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -7,7 +7,8 @@
 	"seo": {
 		"indexing": "all",
 		"metatags": {
-			"canonical": "https://docs.rxresu.me"
+			"canonical": "https://docs.rxresu.me",
+			"og:image": "https://rxresu.me/opengraph/banner.jpg"
 		}
 	},
 	"fonts": {
@@ -51,6 +52,7 @@
 						"pages": [
 							"guides/creating-your-first-resume",
 							"guides/choosing-a-template",
+							"guides/moving-items-between-sections",
 							"guides/exporting-your-resume",
 							"guides/sharing-your-resume-publicly",
 							"guides/using-private-notes",
diff --git a/docs/getting-started/changelog.mdx b/docs/getting-started/changelog.mdx
index a6740a1bf..4b1aa6e64 100644
--- a/docs/getting-started/changelog.mdx
+++ b/docs/getting-started/changelog.mdx
@@ -4,7 +4,25 @@ description: "List of all notable changes and updates to Reactive Resume"
 rss: true
 ---
 
-<Update label="v5.0.0" description="23rd January 2026">
-  ## New Features
-  - Brand new UI/UX and refreshed design.
+<Update label="v5.0.0" description="26th January 2026">
+  This has been a major overhaul from the previous version of Reactive Resume. The app has been completely redesigned and rebuilt from scratch, to be more intuitive and user-friendly.
+
+  **Here are some of the key changes from the previous version:**
+  - 2 new templates: _Ditgar_ and _Lapras_
+  - Authentication via Passkeys
+  - New user interface and refreshed design
+  - API Access and Reference Documentation
+  - AI Integration with OpenAI, Google, Anthropic, and Ollama
+  - A better font selector, with real-time preview of the font
+  - More comprehensive documentation, with guides for specific features
+  - An improved templates gallery, with clear overview of each template
+  - Ability to import resumes from PDF or DOCX (requires AI Integration)
+  - Reliable server infrastructure, with improved performance and scalability
+  - Ability to move items between sections and pages, for better organization
+  - A more powerful CSS Editor, with better autocomplete and syntax highlighting
+  - Extended Custom Sections to include a type, for better customization and organization
+  - Ability to choose the kind of icons to display for level indicators (stars, circles, custom icons, etc.)
+  - Ability to resize how wide/narrow the sidebar should be on the resume, or convert a page to be full width
+
+  There's still a lot more that I'm forgetting, but I'm sure you'll find out soon enough as you explore the new version. I hope you enjoy building your resume now, better than ever. If you have any feedback, please feel free to [contact me](https://amruthpillai.com/#contact) or [open an issue](https://github.com/amruthpillai/reactive-resume/issues) on GitHub.
 </Update>
\ No newline at end of file
diff --git a/docs/getting-started/index.mdx b/docs/getting-started/index.mdx
index 95ab3bfd5..db147e48c 100644
--- a/docs/getting-started/index.mdx
+++ b/docs/getting-started/index.mdx
@@ -4,7 +4,7 @@ description: "Welcome to the documentation for Reactive Resume, a free and open-
 ---
 
 <Frame>
-  <img src="/images/banner.jpg" alt="Reactive Resume Banner" style={{ borderRadius: '0.75rem' }} />
+  <img src="/images/getting-started/banner.webp" alt="Reactive Resume Banner"  />
 </Frame>
 
 ## What is Reactive Resume?
@@ -28,6 +28,10 @@ description: "Welcome to the documentation for Reactive Resume, a free and open-
 
 ## Key Features
 
+<Frame>
+  <img src="/images/getting-started/infographic.webp" alt="An infographic of the major features of Reactive Resume" />
+</Frame>
+
 <AccordionGroup>
   <Accordion title="Completely Free & Open Source" icon="code-branch">
     Reactive Resume is licensed under MIT. You can use it for free, modify it, and even host your own instance. The entire codebase is available on [GitHub](https://github.com/amruthpillai/reactive-resume).
diff --git a/docs/guides/choosing-a-template.mdx b/docs/guides/choosing-a-template.mdx
index 8d18e5123..45960e4fa 100644
--- a/docs/guides/choosing-a-template.mdx
+++ b/docs/guides/choosing-a-template.mdx
@@ -13,42 +13,38 @@ Changing your resume template is simple and can be done at any time without losi
   <Step title="Open your resume in the builder">
     Navigate to your Dashboard and click on the resume you want to edit.
 
-    {/* TODO: Add screenshot of dashboard with resume cards */}
-    <Frame caption="Your resumes dashboard showing all your resume cards">
-      <img src="/images/choosing-template/dashboard-placeholder.jpg" alt="Dashboard showing resume cards" style={{ aspectRatio: "210/297" }} />
+    <Frame caption="Screenshot of your resumes dashboard showing all your resume">
+      <img src="/images/guides/choosing-a-template/screenshot-1.webp" alt="Screenshot of your resumes dashboard showing all your resume" />
     </Frame>
   </Step>
 
   <Step title="Open the right sidebar">
     In the resume builder, look for the right sidebar. This is where you'll find all the design and layout options.
-
-    {/* TODO: Add screenshot of builder with right sidebar visible */}
-    <Frame caption="The resume builder with the right sidebar open">
-      <img src="/images/choosing-template/builder-sidebar-placeholder.jpg" alt="Resume builder showing the right sidebar" style={{ aspectRatio: "210/297" }} />
-    </Frame>
   </Step>
 
   <Step title="Navigate to the Template section">
     In the right sidebar, find and click on the **Template** section to expand it.
 
-    {/* TODO: Add screenshot of template section in sidebar */}
-    <Frame caption="The Template section in the right sidebar">
-      <img src="/images/choosing-template/template-section-placeholder.jpg" alt="Template section expanded in the sidebar" style={{ aspectRatio: "210/297" }} />
+    <Frame caption="Screenshot of the template section in the right sidebar">
+      <img src="/images/guides/choosing-a-template/screenshot-2.webp" alt="Screenshot of the template section in the right sidebar" />
     </Frame>
   </Step>
 
   <Step title="Select your new template">
     Browse through the available templates and click on the one you want to use. Your resume will instantly update to reflect the new design.
 
-    {/* TODO: Add screenshot showing template selection */}
-    <Frame caption="Selecting a new template from the available options">
-      <img src="/images/choosing-template/template-selection-placeholder.jpg" alt="Template selection dropdown or grid" style={{ aspectRatio: "210/297" }} />
+    <Frame caption="Screenshot of selecting a new template from the gallery">
+      <img src="/images/guides/choosing-a-template/screenshot-3.webp" alt="Screenshot of selecting a new template from the gallery" />
     </Frame>
   </Step>
 
   <Step title="Review and adjust">
     After changing the template, review your resume in the live preview. You may want to adjust spacing, colors, or layout to optimize for the new design.
 
+    <Frame caption="Screenshot of the resume with a new template applied">
+      <img src="/images/guides/choosing-a-template/screenshot-4.webp" alt="Screenshot of the resume with a new template applied" />
+    </Frame>
+
     <Tip>
       Different templates may display your content differently. Some templates work better with shorter content, while others are designed to handle more detailed information.
     </Tip>
@@ -88,55 +84,59 @@ Reactive Resume includes a variety of professionally designed templates. Each te
   All templates support the same features and sections. The difference is purely in how they present your information visually.
 </Info>
 
-<Columns cols={2}>
+<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
   <Frame caption="Azurill">
-    <img src="/images/templates/azurill.jpg" alt="Azurill template preview" style={{ aspectRatio: "210/297" }} />
+    <img src="/images/templates/azurill.webp" alt="Azurill template preview" style={{ aspectRatio: "210/297" }} />
   </Frame>
 
   <Frame caption="Bronzor">
-    <img src="/images/templates/bronzor.jpg" alt="Bronzor template preview" style={{ aspectRatio: "210/297" }} />
+    <img src="/images/templates/bronzor.webp" alt="Bronzor template preview" style={{ aspectRatio: "210/297" }} />
   </Frame>
 
   <Frame caption="Chikorita">
-    <img src="/images/templates/chikorita.jpg" alt="Chikorita template preview" style={{ aspectRatio: "210/297" }} />
+    <img src="/images/templates/chikorita.webp" alt="Chikorita template preview" style={{ aspectRatio: "210/297" }} />
   </Frame>
 
   <Frame caption="Ditto">
-    <img src="/images/templates/ditto.jpg" alt="Ditto template preview" style={{ aspectRatio: "210/297" }} />
+    <img src="/images/templates/ditto.webp" alt="Ditto template preview" style={{ aspectRatio: "210/297" }} />
+  </Frame>
+
+  <Frame caption="Ditgar">
+    <img src="/images/templates/ditgar.webp" alt="Ditgar template preview" style={{ aspectRatio: "210/297" }} />
   </Frame>
 
   <Frame caption="Gengar">
-    <img src="/images/templates/gengar.jpg" alt="Gengar template preview" style={{ aspectRatio: "210/297" }} />
+    <img src="/images/templates/gengar.webp" alt="Gengar template preview" style={{ aspectRatio: "210/297" }} />
   </Frame>
 
   <Frame caption="Glalie">
-    <img src="/images/templates/glalie.jpg" alt="Glalie template preview" style={{ aspectRatio: "210/297" }} />
+    <img src="/images/templates/glalie.webp" alt="Glalie template preview" style={{ aspectRatio: "210/297" }} />
   </Frame>
 
   <Frame caption="Kakuna">
-    <img src="/images/templates/kakuna.jpg" alt="Kakuna template preview" style={{ aspectRatio: "210/297" }} />
+    <img src="/images/templates/kakuna.webp" alt="Kakuna template preview" style={{ aspectRatio: "210/297" }} />
   </Frame>
 
   <Frame caption="Lapras">
-    <img src="/images/templates/lapras.jpg" alt="Lapras template preview" style={{ aspectRatio: "210/297" }} />
+    <img src="/images/templates/lapras.webp" alt="Lapras template preview" style={{ aspectRatio: "210/297" }} />
   </Frame>
 
   <Frame caption="Leafish">
-    <img src="/images/templates/leafish.jpg" alt="Leafish template preview" style={{ aspectRatio: "210/297" }} />
+    <img src="/images/templates/leafish.webp" alt="Leafish template preview" style={{ aspectRatio: "210/297" }} />
   </Frame>
 
   <Frame caption="Onyx">
-    <img src="/images/templates/onyx.jpg" alt="Onyx template preview" style={{ aspectRatio: "210/297" }} />
+    <img src="/images/templates/onyx.webp" alt="Onyx template preview" style={{ aspectRatio: "210/297" }} />
   </Frame>
 
   <Frame caption="Pikachu">
-    <img src="/images/templates/pikachu.jpg" alt="Pikachu template preview" style={{ aspectRatio: "210/297" }} />
+    <img src="/images/templates/pikachu.webp" alt="Pikachu template preview" style={{ aspectRatio: "210/297" }} />
   </Frame>
 
   <Frame caption="Rhyhorn">
-    <img src="/images/templates/rhyhorn.jpg" alt="Rhyhorn template preview" style={{ aspectRatio: "210/297" }} />
+    <img src="/images/templates/rhyhorn.webp" alt="Rhyhorn template preview" style={{ aspectRatio: "210/297" }} />
   </Frame>
-</Columns>
+</div>
 
 ---
 
diff --git a/docs/guides/creating-an-account.mdx b/docs/guides/creating-an-account.mdx
index 29c767e6a..1e73e70ad 100644
--- a/docs/guides/creating-an-account.mdx
+++ b/docs/guides/creating-an-account.mdx
@@ -6,18 +6,10 @@ description: "Learn how to create an account on Reactive Resume and get started
 <Steps>
   <Step title="Visit the homepage">
     Head over to [https://rxresu.me](https://rxresu.me) and click on the <Badge>Get Started</Badge> button.
-    
-    <Frame>
-      <img src="/images/creating-an-account/get-started-button.png" alt="Get Started button on homepage" />
-    </Frame>
   </Step>
   
   <Step title="Navigate to the sign up page">
-    You should see a link that says <Badge>Don't have an account? Create one now →</Badge>. Click on that link to go to the sign up page and you should see a form like this:
-    
-    <Frame>
-      <img src="/images/creating-an-account/create-account-link.png" alt="Create account link on login page" />
-    </Frame>
+    You should see a link that says <Badge>Don't have an account? Create one now →</Badge>. Click on that link to go to the sign up page and you should see a form.
   </Step>
   
   <Step title="Fill in your details">
@@ -27,11 +19,7 @@ description: "Learn how to create an account on Reactive Resume and get started
     - **Email Address**: A valid email address you have access to.
     - **Username**: Choose a unique username (this will be used in your public resume URLs)
     - **Password**: Create a strong password
-    
-    <Frame>
-      <img src="/images/creating-an-account/sign-up-form.png" alt="Sign up form" />
-    </Frame>
-    
+
     <Warning>
       Make sure to choose a username you're happy with, as it will be part of your public resume URL (e.g., `rxresu.me/your-username/resume-slug`).
     </Warning>
@@ -62,10 +50,6 @@ description: "Learn how to create an account on Reactive Resume and get started
     - Create your first resume
     - Import an existing resume
     - Manage your account settings
-    
-    <Frame>
-      <img src="/images/creating-an-account/dashboard.png" alt="Reactive Resume dashboard" />
-    </Frame>
   </Step>
 </Steps>
 
diff --git a/docs/guides/moving-items-between-sections.mdx b/docs/guides/moving-items-between-sections.mdx
new file mode 100644
index 000000000..8f2f760ac
--- /dev/null
+++ b/docs/guides/moving-items-between-sections.mdx
@@ -0,0 +1,133 @@
+---
+title: "Moving items between sections"
+description: "Learn how to move resume items from one section to another, or to a different page, to better organize your content and split lengthy sections across multiple pages."
+---
+
+If you have a long work history or extensive project list, you may want to split items across multiple pages or reorganize them into different sections. The **Move to** feature lets you do exactly that—quickly relocate any item to another section or page with just a few clicks.
+
+## Why move items?
+
+- **Split lengthy sections**: If your Experience section spans more than one page, you can move older roles to a custom section on page 2.
+- **Reorganize content**: Move a project from "Projects" to a custom "Open Source" section, or relocate a skill to a different grouping.
+- **Fine-tune page layout**: Control exactly which items appear on which page for a polished, balanced resume.
+
+## How to move an item
+
+<Steps>
+  <Step title="Open the resume builder">
+    Navigate to your resume and open it in the builder.
+
+    <Info>
+      Make sure you have at least one item in a section (e.g., an experience entry, project, or skill) before proceeding.
+    </Info>
+  </Step>
+
+  <Step title="Locate the item you want to move">
+    In the left sidebar, find the section containing the item you want to relocate. Click on the section to expand it and view all items.
+
+    <Frame caption="Screenshot of the left sidebar with an expanded section containing multiple items">
+      <img src="/images/guides/moving-items-between-sections/screenshot-1.webp" alt="Screenshot of the left sidebar with an expanded section containing multiple items" />
+    </Frame>
+  </Step>
+
+  <Step title="Open the item dropdown menu">
+    Each item has a **dropdown menu** (three-dot icon or chevron) on the right side. Click this icon to reveal the available actions.
+
+    <Frame caption="Screenshot of the dropdown menu icon on a section item">
+      <img src="/images/guides/moving-items-between-sections/screenshot-2.webp" alt="Screenshot of the dropdown menu icon on a section item" />
+    </Frame>
+  </Step>
+
+  <Step title="Hover over 'Move to'">
+    In the dropdown menu, hover over or click the <Badge>Move to</Badge> option. This will open a submenu showing all available destinations.
+  </Step>
+
+  <Step title="Select a destination">
+    The submenu displays available destinations organized by:
+
+    - **Existing sections** of the same type (e.g., other Experience sections)
+    - **Pages** where you can place the item
+    - **Custom sections** if any exist
+
+    Click on your desired destination to move the item there.
+
+    <Frame caption="Screenshot of the 'Move to' submenu with destination options">
+      <img src="/images/guides/moving-items-between-sections/screenshot-3.webp" alt="Screenshot of the 'Move to' submenu with destination options" />
+    </Frame>
+    
+    <Tip>
+      If a custom section of the same type doesn't exist on your target page, Reactive Resume will **automatically create one** for you. This makes it easy to split sections across pages without manual setup.
+    </Tip>
+  </Step>
+
+  <Step title="Verify the move">
+    After selecting a destination, the item will be moved immediately. You can verify by:
+
+    - Checking the destination section in the left sidebar
+    - Looking at the resume preview to see where the item now appears
+
+    <Frame caption="Screenshot of the item in its new location">
+      <img src="/images/guides/moving-items-between-sections/screenshot-4.webp" alt="Screenshot of the item in its new location" />
+    </Frame>
+  </Step>
+</Steps>
+
+## Example: Splitting Work Experience across pages
+
+A common use case is when your work history is too long to fit on a single page. Here's how to handle it:
+
+<Steps>
+  <Step title="Identify items to move">
+    Review your Experience section and decide which roles should appear on page 1 (typically your most recent and relevant positions) and which can go on page 2.
+  </Step>
+
+  <Step title="Move older positions">
+    For each older position you want to relocate:
+
+    1. Open the item's dropdown menu
+    2. Click <Badge>Move to</Badge>
+    3. Select **Page 2** (or the appropriate page)
+
+    <Info>
+      If no Experience section exists on page 2, a new custom section will be created automatically with the same type, so your formatting stays consistent.
+    </Info>
+  </Step>
+
+  <Step title="Review the result">
+    Check the resume preview to ensure:
+
+    - Page 1 contains your most important, recent roles
+    - Page 2 continues with your earlier experience
+    - The section headings and styling remain consistent
+
+    {/* TODO: Add screenshot showing a resume with Experience split across page 1 and page 2 */}
+  </Step>
+</Steps>
+
+## Tips for organizing multi-page resumes
+
+<Tip>
+  **Keep it logical**: Maintain chronological order within each page. Move complete job entries rather than splitting a single role across pages.
+</Tip>
+
+<Tip>
+  **Use custom section names**: After moving items to a new custom section, you can rename it (e.g., "Earlier Experience" or "Additional Projects") to provide context for recruiters.
+</Tip>
+
+<Warning>
+  Moving items reorganizes your content but doesn't affect the data itself. You can always move items back or to different sections as needed.
+</Warning>
+
+## Troubleshooting
+
+### I don't see the "Move to" option
+
+Make sure you're clicking the dropdown menu on a **section item** (like an individual job or project), not the section header itself. The Move to feature is only available for items within sections.
+
+### The destination I want isn't listed
+
+The Move to submenu shows destinations compatible with the item type. For example, an Experience item can only be moved to other Experience-type sections. If you need to change an item's type entirely, you may need to recreate it in the desired section.
+
+### My custom section wasn't created
+
+If you're moving to a page that already has a section of the same type, the item will be added to that existing section rather than creating a new one. This is by design to avoid duplicate sections.
diff --git a/docs/guides/using-custom-css.mdx b/docs/guides/using-custom-css.mdx
index df5f39dff..6f89d995e 100644
--- a/docs/guides/using-custom-css.mdx
+++ b/docs/guides/using-custom-css.mdx
@@ -11,6 +11,10 @@ The **Custom CSS** panel lets you write your own CSS rules to change how your re
 - **Auto-save**: there is no “Save” button—your CSS is saved automatically when it changes.
 - **Scoped styling (mostly)**: to avoid affecting the rest of the app, your CSS is *usually* scoped to the resume preview.
 
+<Frame caption="Screenshot of the Custom CSS section in the right sidebar">
+  <img src="/images/guides/using-custom-css/screenshot-1.webp" alt="Screenshot of the Custom CSS section in the right sidebar" />
+</Frame>
+
 ## Where to find it
 
 In the resume builder, open the **right sidebar** and select **Custom CSS** (the `CSS` section).
@@ -54,19 +58,19 @@ Example:
 
 ### Formatting tip (to avoid scoping edge-cases)
 
-Keep each rule’s selector on **one line**, for example:
+Keep each rule's selector on **one line**, for example:
 
 ```css
 .page-section-experience .section-item-title { font-weight: 700; }
 ```
 
-Avoid splitting a selector across multiple lines unless you’ve confirmed it behaves as expected.
+Avoid splitting a selector across multiple lines unless you've confirmed it behaves as expected.
 
 ## Finding the right selectors
 
 ### Use autocomplete in the editor
 
-In the Custom CSS editor, type a `.` (dot). You’ll get suggestions for commonly-used class selectors, including:
+In the Custom CSS editor, type a `.` (dot). You'll get suggestions for commonly-used class selectors, including:
 
 - **Page-level**: `.page`, `.page-content`, `.page-header`, `.page-basics`, `.page-main`, `.page-sidebar`, `.page-picture`
 - **Section-level**: `.page-section`, `.section-content`
@@ -77,7 +81,7 @@ In the Custom CSS editor, type a `.` (dot). You’ll get suggestions for commonl
 
 ### Stable “starter selectors”
 
-If you’re not sure where to start, these are usually safe:
+If you're not sure where to start, these are usually safe:
 
 - `.page` (the resume page container)
 - `.page-section` (each resume section)
@@ -196,9 +200,9 @@ Example (tighten spacing without changing your layout settings):
 ```css
 .section-item-link a {
   display: inline-block;
-  padding: 2pt 6pt;
+  padding: 3pt 9pt;
   border-radius: 999pt;
-  border: 1pt solid color-mix(in srgb, var(--page-primary-color) 45%, transparent);
+  border: 2pt solid color-mix(in srgb, var(--page-primary-color) 45%, transparent);
   text-decoration: none;
 }
 ```
@@ -241,40 +245,25 @@ Example (tighten spacing without changing your layout settings):
 }
 ```
 
-### 9) Highlight a specific section (example: Experience)
+### 9) Highlight a specific section (example: Profiles)
 
 ```css
-.page-section-experience {
-  background: color-mix(in srgb, var(--page-primary-color) 6%, transparent);
+.page-section-profiles {
+  background: color-mix(in srgb, var(--page-primary-color) 10%, transparent);
   border-radius: 8pt;
-  padding: 8pt;
-}
-```
-
-### 10) Print-only adjustments (manually scoped)
-
-```css
-@media print {
-  .resume-preview-container .page {
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-  }
-
-  .resume-preview-container a {
-    text-decoration: none;
-  }
+  padding: 8pt 12pt;
 }
 ```
 
 ## Troubleshooting
 
-### My CSS doesn’t do anything
+### My CSS doesn't do anything
 
 - Make sure **Enable** is turned on.
 - Prefer targeting `.page`, `.page-section`, and `.section-item` instead of `body`.
 - Use your browser devtools to **inspect** the preview and confirm the element/class names.
 
-### My `@media` rules affect the whole app / don’t apply
+### My `@media` rules affect the whole app / don't apply
 
-At-rules aren’t auto-scoped. Prefix selectors inside them with `.resume-preview-container` as shown above.
+At-rules aren't auto-scoped. Prefix selectors inside them with `.resume-preview-container` as shown above.
 
diff --git a/docs/guides/using-private-notes.mdx b/docs/guides/using-private-notes.mdx
index 915e4d55d..f2074c6e7 100644
--- a/docs/guides/using-private-notes.mdx
+++ b/docs/guides/using-private-notes.mdx
@@ -17,6 +17,10 @@ Think of it as a built-in notebook attached to each resume where you can jot dow
 
 In the resume builder, open the **right sidebar** and select **Notes** from the available sections.
 
+<Frame caption="Screenshot of the Notes section in the right sidebar">
+  <img src="/images/guides/using-private-notes/screenshot-1.webp" alt="Screenshot of the Notes section in the right sidebar" />
+</Frame>
+
 ## Use cases
 
 Private Notes are designed to help you stay organized during your job search. Here are some practical ways to use them:
diff --git a/docs/images/banner.jpg b/docs/images/banner.jpg
deleted file mode 100644
index 7dfb6d8ec..000000000
Binary files a/docs/images/banner.jpg and /dev/null differ
diff --git a/docs/images/getting-started/banner.webp b/docs/images/getting-started/banner.webp
new file mode 100644
index 000000000..3eb7506f7
Binary files /dev/null and b/docs/images/getting-started/banner.webp differ
diff --git a/docs/images/getting-started/infographic.webp b/docs/images/getting-started/infographic.webp
new file mode 100644
index 000000000..40cf10009
Binary files /dev/null and b/docs/images/getting-started/infographic.webp differ
diff --git a/docs/images/guides/choosing-a-template/screenshot-1.webp b/docs/images/guides/choosing-a-template/screenshot-1.webp
new file mode 100644
index 000000000..061fabebe
Binary files /dev/null and b/docs/images/guides/choosing-a-template/screenshot-1.webp differ
diff --git a/docs/images/guides/choosing-a-template/screenshot-2.webp b/docs/images/guides/choosing-a-template/screenshot-2.webp
new file mode 100644
index 000000000..a8cddedde
Binary files /dev/null and b/docs/images/guides/choosing-a-template/screenshot-2.webp differ
diff --git a/docs/images/guides/choosing-a-template/screenshot-3.webp b/docs/images/guides/choosing-a-template/screenshot-3.webp
new file mode 100644
index 000000000..289ebf08a
Binary files /dev/null and b/docs/images/guides/choosing-a-template/screenshot-3.webp differ
diff --git a/docs/images/guides/choosing-a-template/screenshot-4.webp b/docs/images/guides/choosing-a-template/screenshot-4.webp
new file mode 100644
index 000000000..0c50b428c
Binary files /dev/null and b/docs/images/guides/choosing-a-template/screenshot-4.webp differ
diff --git a/docs/images/guides/moving-items-between-sections/screenshot-1.webp b/docs/images/guides/moving-items-between-sections/screenshot-1.webp
new file mode 100644
index 000000000..a244631aa
Binary files /dev/null and b/docs/images/guides/moving-items-between-sections/screenshot-1.webp differ
diff --git a/docs/images/guides/moving-items-between-sections/screenshot-2.webp b/docs/images/guides/moving-items-between-sections/screenshot-2.webp
new file mode 100644
index 000000000..89a7f15d8
Binary files /dev/null and b/docs/images/guides/moving-items-between-sections/screenshot-2.webp differ
diff --git a/docs/images/guides/moving-items-between-sections/screenshot-3.webp b/docs/images/guides/moving-items-between-sections/screenshot-3.webp
new file mode 100644
index 000000000..91551d729
Binary files /dev/null and b/docs/images/guides/moving-items-between-sections/screenshot-3.webp differ
diff --git a/docs/images/guides/moving-items-between-sections/screenshot-4.webp b/docs/images/guides/moving-items-between-sections/screenshot-4.webp
new file mode 100644
index 000000000..8b33fb9fd
Binary files /dev/null and b/docs/images/guides/moving-items-between-sections/screenshot-4.webp differ
diff --git a/docs/images/guides/using-custom-css/screenshot-1.webp b/docs/images/guides/using-custom-css/screenshot-1.webp
new file mode 100644
index 000000000..9034c2939
Binary files /dev/null and b/docs/images/guides/using-custom-css/screenshot-1.webp differ
diff --git a/docs/images/guides/using-private-notes/screenshot-1.webp b/docs/images/guides/using-private-notes/screenshot-1.webp
new file mode 100644
index 000000000..08b358fbf
Binary files /dev/null and b/docs/images/guides/using-private-notes/screenshot-1.webp differ
diff --git a/docs/images/templates/azurill.jpg b/docs/images/templates/azurill.jpg
deleted file mode 100644
index 953c4ef96..000000000
Binary files a/docs/images/templates/azurill.jpg and /dev/null differ
diff --git a/docs/images/templates/azurill.webp b/docs/images/templates/azurill.webp
new file mode 100644
index 000000000..d6f430075
Binary files /dev/null and b/docs/images/templates/azurill.webp differ
diff --git a/docs/images/templates/bronzor.jpg b/docs/images/templates/bronzor.jpg
deleted file mode 100644
index f10e75bef..000000000
Binary files a/docs/images/templates/bronzor.jpg and /dev/null differ
diff --git a/docs/images/templates/bronzor.webp b/docs/images/templates/bronzor.webp
new file mode 100644
index 000000000..f1b0e0117
Binary files /dev/null and b/docs/images/templates/bronzor.webp differ
diff --git a/docs/images/templates/chikorita.jpg b/docs/images/templates/chikorita.jpg
deleted file mode 100644
index 3c5854805..000000000
Binary files a/docs/images/templates/chikorita.jpg and /dev/null differ
diff --git a/docs/images/templates/chikorita.webp b/docs/images/templates/chikorita.webp
new file mode 100644
index 000000000..5bbd5d37b
Binary files /dev/null and b/docs/images/templates/chikorita.webp differ
diff --git a/docs/images/templates/ditgar.webp b/docs/images/templates/ditgar.webp
new file mode 100644
index 000000000..3ebe327ca
Binary files /dev/null and b/docs/images/templates/ditgar.webp differ
diff --git a/docs/images/templates/ditto.jpg b/docs/images/templates/ditto.jpg
deleted file mode 100644
index aa22a184b..000000000
Binary files a/docs/images/templates/ditto.jpg and /dev/null differ
diff --git a/docs/images/templates/ditto.webp b/docs/images/templates/ditto.webp
new file mode 100644
index 000000000..4b933b7d0
Binary files /dev/null and b/docs/images/templates/ditto.webp differ
diff --git a/docs/images/templates/gengar.jpg b/docs/images/templates/gengar.jpg
deleted file mode 100644
index be297789a..000000000
Binary files a/docs/images/templates/gengar.jpg and /dev/null differ
diff --git a/docs/images/templates/gengar.webp b/docs/images/templates/gengar.webp
new file mode 100644
index 000000000..6a183d0d3
Binary files /dev/null and b/docs/images/templates/gengar.webp differ
diff --git a/docs/images/templates/glalie.jpg b/docs/images/templates/glalie.jpg
deleted file mode 100644
index e594e9279..000000000
Binary files a/docs/images/templates/glalie.jpg and /dev/null differ
diff --git a/docs/images/templates/glalie.webp b/docs/images/templates/glalie.webp
new file mode 100644
index 000000000..e3ec1062a
Binary files /dev/null and b/docs/images/templates/glalie.webp differ
diff --git a/docs/images/templates/kakuna.jpg b/docs/images/templates/kakuna.jpg
deleted file mode 100644
index ec426256f..000000000
Binary files a/docs/images/templates/kakuna.jpg and /dev/null differ
diff --git a/docs/images/templates/kakuna.webp b/docs/images/templates/kakuna.webp
new file mode 100644
index 000000000..96c49d10b
Binary files /dev/null and b/docs/images/templates/kakuna.webp differ
diff --git a/docs/images/templates/lapras.jpg b/docs/images/templates/lapras.jpg
deleted file mode 100644
index da9fbc8e1..000000000
Binary files a/docs/images/templates/lapras.jpg and /dev/null differ
diff --git a/docs/images/templates/lapras.webp b/docs/images/templates/lapras.webp
new file mode 100644
index 000000000..7711197ff
Binary files /dev/null and b/docs/images/templates/lapras.webp differ
diff --git a/docs/images/templates/leafish.jpg b/docs/images/templates/leafish.jpg
deleted file mode 100644
index 49ae7f407..000000000
Binary files a/docs/images/templates/leafish.jpg and /dev/null differ
diff --git a/docs/images/templates/leafish.webp b/docs/images/templates/leafish.webp
new file mode 100644
index 000000000..f35b96af5
Binary files /dev/null and b/docs/images/templates/leafish.webp differ
diff --git a/docs/images/templates/onyx.jpg b/docs/images/templates/onyx.jpg
deleted file mode 100644
index 01c59ae72..000000000
Binary files a/docs/images/templates/onyx.jpg and /dev/null differ
diff --git a/docs/images/templates/onyx.webp b/docs/images/templates/onyx.webp
new file mode 100644
index 000000000..9f10946d0
Binary files /dev/null and b/docs/images/templates/onyx.webp differ
diff --git a/docs/images/templates/pikachu.jpg b/docs/images/templates/pikachu.jpg
deleted file mode 100644
index 94251e5e9..000000000
Binary files a/docs/images/templates/pikachu.jpg and /dev/null differ
diff --git a/docs/images/templates/pikachu.webp b/docs/images/templates/pikachu.webp
new file mode 100644
index 000000000..31bdf4e9a
Binary files /dev/null and b/docs/images/templates/pikachu.webp differ
diff --git a/docs/images/templates/rhyhorn.jpg b/docs/images/templates/rhyhorn.jpg
deleted file mode 100644
index bcad76cfa..000000000
Binary files a/docs/images/templates/rhyhorn.jpg and /dev/null differ
diff --git a/docs/images/templates/rhyhorn.webp b/docs/images/templates/rhyhorn.webp
new file mode 100644
index 000000000..7d444fde8
Binary files /dev/null and b/docs/images/templates/rhyhorn.webp differ
diff --git a/docs/self-hosting/docker.mdx b/docs/self-hosting/docker.mdx
index f5fe2ed16..b4dad54f3 100644
--- a/docs/self-hosting/docker.mdx
+++ b/docs/self-hosting/docker.mdx
@@ -172,8 +172,6 @@ services:
     restart: unless-stopped
     ports:
       - "4000:3000"
-    extra_hosts:
-      - "host.docker.internal:host-gateway"
     environment:
       - HEALTH=true
       - CONCURRENT=20
@@ -181,7 +179,7 @@ services:
       # Optional: Set a token for authentication
       # - TOKEN=your-secret-token
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/"]
+      test: ["CMD", "curl", "-f", "http://localhost:3000/pressure?token=your-secret-token"]
       interval: 10s
       timeout: 5s
       retries: 10
@@ -203,7 +201,7 @@ services:
       printer:
         condition: service_healthy
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health", "||", "exit", "1"]
+      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
       interval: 30s
       timeout: 10s
       retries: 3
@@ -413,7 +411,7 @@ The Docker Compose configuration includes a health check that periodically calls
 
 ```yaml
 healthcheck:
-  test: ["CMD", "curl", "-f", "http://localhost:3000/api/health", "||", "exit", "1"]
+  test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
   interval: 30s
   timeout: 10s
   retries: 3
diff --git a/docs/self-hosting/examples.mdx b/docs/self-hosting/examples.mdx
index 920c1163b..54071b99e 100644
--- a/docs/self-hosting/examples.mdx
+++ b/docs/self-hosting/examples.mdx
@@ -82,12 +82,11 @@ services:
       - TIMEOUT=120000
       - CONCURRENT=10
       - HEALTH=true
+      - TOKEN=your-secret-token
     networks:
       - reactive_resume_network
-    extra_hosts:
-      - "host.docker.internal:host-gateway"
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/"]
+      test: ["CMD", "curl", "-f", "http://localhost:3000/pressure?token=your-secret-token"]
       interval: 30s
       timeout: 10s
       retries: 3
@@ -118,7 +117,7 @@ services:
       - "traefik.http.routers.reactive-resume.tls.certresolver=letsencrypt"
       - "traefik.http.services.reactive-resume.loadbalancer.server.port=3000"
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health", "||", "exit", "1"]
+      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
       interval: 30s
       timeout: 10s
       retries: 3
@@ -190,12 +189,11 @@ services:
       - TIMEOUT=120000
       - CONCURRENT=10
       - HEALTH=true
+      - TOKEN=your-secret-token
     networks:
       - reactive_resume_network
-    extra_hosts:
-      - "host.docker.internal:host-gateway"
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/"]
+      test: ["CMD", "curl", "-f", "http://localhost:3000/pressure?token=your-secret-token"]
       interval: 30s
       timeout: 10s
       retries: 3
@@ -220,7 +218,7 @@ services:
       printer:
         condition: service_healthy
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health", "||", "exit", "1"]
+      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
       interval: 30s
       timeout: 10s
       retries: 3
@@ -358,7 +356,7 @@ services:
       # Optional: Set a token for authentication
       # - TOKEN=your-secret-token
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/"]
+      test: ["CMD", "curl", "-f", "http://localhost:3000/pressure?token=your-secret-token"]
       interval: 30s
       timeout: 10s
       retries: 3
@@ -458,7 +456,7 @@ services:
       - S3_ENDPOINT=$S3_ENDPOINT
       - S3_BUCKET=$S3_BUCKET
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health", "||", "exit", "1"]
+      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
       interval: 30s
       timeout: 10s
       retries: 3
diff --git a/package.json b/package.json
index 60f3ba9f7..c61189fee 100644
--- a/package.json
+++ b/package.json
@@ -56,10 +56,10 @@
 		"@sindresorhus/slugify": "^3.0.0",
 		"@t3-oss/env-core": "^0.13.10",
 		"@tanstack/react-query": "5.90.19",
-		"@tanstack/react-router": "^1.154.12",
-		"@tanstack/react-router-ssr-query": "^1.154.12",
+		"@tanstack/react-router": "^1.154.13",
+		"@tanstack/react-router-ssr-query": "^1.154.13",
 		"@tanstack/react-start": "^1.154.12",
-		"@tanstack/zod-adapter": "^1.154.12",
+		"@tanstack/zod-adapter": "^1.154.13",
 		"@tiptap/extension-highlight": "^3.16.0",
 		"@tiptap/extension-table": "^3.16.0",
 		"@tiptap/extension-text-align": "^3.16.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d8ba0e069..2d5a33a91 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,17 +87,17 @@ importers:
         specifier: 5.90.19
         version: 5.90.19(react@19.2.3)
       '@tanstack/react-router':
-        specifier: ^1.154.12
-        version: 1.154.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: ^1.154.13
+        version: 1.154.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/react-router-ssr-query':
-        specifier: ^1.154.12
-        version: 1.154.12(@tanstack/query-core@5.90.19)(@tanstack/react-query@5.90.19(react@19.2.3))(@tanstack/react-router@1.154.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.154.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: ^1.154.13
+        version: 1.154.13(@tanstack/query-core@5.90.19)(@tanstack/react-query@5.90.19(react@19.2.3))(@tanstack/react-router@1.154.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.154.13)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/react-start':
         specifier: ^1.154.12
         version: 1.154.12(crossws@0.4.3(srvx@0.10.1))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(rolldown-vite@7.3.1(@types/node@25.0.10)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.46.0)(tsx@4.21.0))
       '@tanstack/zod-adapter':
-        specifier: ^1.154.12
-        version: 1.154.12(@tanstack/react-router@1.154.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(zod@4.3.6)
+        specifier: ^1.154.13
+        version: 1.154.13(@tanstack/react-router@1.154.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(zod@4.3.6)
       '@tiptap/extension-highlight':
         specifier: ^3.16.0
         version: 3.16.0(@tiptap/core@3.16.0(@tiptap/pm@3.16.0))
@@ -3897,8 +3897,8 @@ packages:
     peerDependencies:
       react: ^18 || ^19
 
-  '@tanstack/react-router-ssr-query@1.154.12':
-    resolution: {integrity: sha512-STzIAfnNcSf1SNi5r27AwynhIIvVvsvzdOOomP4tFn2QLkEwXGZkmbppS98OB3rXKsyVnOMlX37rhA+a1jQaQA==}
+  '@tanstack/react-router-ssr-query@1.154.13':
+    resolution: {integrity: sha512-Sp5uxYEhhdvQZpcf+NV30/ByL2zLypizefzNeXxmPsvvV8NE8NT/tiOkk+kS+cwsmEoiKf0SqwvG9H+NcwQFfw==}
     engines: {node: '>=12'}
     peerDependencies:
       '@tanstack/query-core': '>=5.90.0'
@@ -3914,6 +3914,13 @@ packages:
       react: '>=18.0.0 || >=19.0.0'
       react-dom: '>=18.0.0 || >=19.0.0'
 
+  '@tanstack/react-router@1.154.13':
+    resolution: {integrity: sha512-/Vdqt7w4dmW2ARf85Qav6TBytn8iJiqle4BGJKDYsVuPtMuQKJnxNpKPaCN+H0DiV4KHoFoQrcPVyr9hqy/ltg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=18.0.0 || >=19.0.0'
+      react-dom: '>=18.0.0 || >=19.0.0'
+
   '@tanstack/react-start-client@1.154.12':
     resolution: {integrity: sha512-BQuWw8B0kwsrZCKTyKCtWAnnoHvFMXMQvl/y8ZT0tue2ArxsHwxm0tUe794P/EdIO4x1iHjl1R/OW9YgQChrsw==}
     engines: {node: '>=22.12.0'}
@@ -3946,6 +3953,10 @@ packages:
     resolution: {integrity: sha512-p+TKxkXcLGtCwwW237D8pV4f6ea2K1pzc/e65ljugoTawsA/YR2/gmTSBDTUsSYy6Tmu4mMJmZ0Q4zNkcfCS3g==}
     engines: {node: '>=12'}
 
+  '@tanstack/router-core@1.154.13':
+    resolution: {integrity: sha512-ZtSM/qcytCDI6Pt5eZLwYhDbVheXI54HN29J+PpC6Lp6xUq/Q2ZOMwb/wJF942EDeqTjxRtl7W9Bpvz7DBwq8g==}
+    engines: {node: '>=12'}
+
   '@tanstack/router-generator@1.154.12':
     resolution: {integrity: sha512-cjr3KS3Esnyh05CWl78KgK2Z9kTjeFasZXcSUrh//TzzU72eXQ+dzKppD3kMsjuyRfUxAfdufsR9GDNMMuLk9w==}
     engines: {node: '>=12'}
@@ -3971,8 +3982,8 @@ packages:
       webpack:
         optional: true
 
-  '@tanstack/router-ssr-query-core@1.154.12':
-    resolution: {integrity: sha512-p3mUZRGlXKRaHxglDCGvuJd55jIGr7qdrHvwiKQkPP1fksfafMsuS5vhjzu6anV2TtmfUEKRJbbQs/s8PJfuxw==}
+  '@tanstack/router-ssr-query-core@1.154.13':
+    resolution: {integrity: sha512-QfyrUJA7klsM+erqpJTtFAMI0k6UrvEzh4wNPq8dIVM8rP43wbWBZhX3oC9O13lY9KC+wm9k4R98VwIv2TBClQ==}
     engines: {node: '>=12'}
     peerDependencies:
       '@tanstack/query-core': '>=5.90.0'
@@ -4011,8 +4022,8 @@ packages:
     resolution: {integrity: sha512-cHHDnewHozgjpI+MIVp9tcib6lYEQK5MyUr0ChHpHFGBl8Xei55rohFK0I0ve/GKoHeioaK42Smd8OixPp6CTg==}
     engines: {node: '>=12'}
 
-  '@tanstack/zod-adapter@1.154.12':
-    resolution: {integrity: sha512-QdlI1wJQTNsy1mKdhHkO+Z9J3OfoJSJN4NGeuFsNC2M129gX5bmMxfEGaK475GN7/9OgeF5cizJ4IZTc1ckZsQ==}
+  '@tanstack/zod-adapter@1.154.13':
+    resolution: {integrity: sha512-FlDY8+qEf4Cuyq7YuSi3uVYDYFmf3ZNsublRaNQq73S2ZIn4Lg/rxtDZWIEopHPTBA0x2/lIMn1TfVDrK3LZMA==}
     engines: {node: '>=12'}
     peerDependencies:
       '@tanstack/react-router': '>=1.43.2'
@@ -12560,12 +12571,12 @@ snapshots:
       '@tanstack/query-core': 5.90.19
       react: 19.2.3
 
-  '@tanstack/react-router-ssr-query@1.154.12(@tanstack/query-core@5.90.19)(@tanstack/react-query@5.90.19(react@19.2.3))(@tanstack/react-router@1.154.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.154.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  '@tanstack/react-router-ssr-query@1.154.13(@tanstack/query-core@5.90.19)(@tanstack/react-query@5.90.19(react@19.2.3))(@tanstack/react-router@1.154.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.154.13)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@tanstack/query-core': 5.90.19
       '@tanstack/react-query': 5.90.19(react@19.2.3)
-      '@tanstack/react-router': 1.154.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@tanstack/router-ssr-query-core': 1.154.12(@tanstack/query-core@5.90.19)(@tanstack/router-core@1.154.12)
+      '@tanstack/react-router': 1.154.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/router-ssr-query-core': 1.154.13(@tanstack/query-core@5.90.19)(@tanstack/router-core@1.154.13)
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
     transitivePeerDependencies:
@@ -12582,6 +12593,17 @@ snapshots:
       tiny-invariant: 1.3.3
       tiny-warning: 1.0.3
 
+  '@tanstack/react-router@1.154.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@tanstack/history': 1.154.7
+      '@tanstack/react-store': 0.8.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/router-core': 1.154.13
+      isbot: 5.1.33
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      tiny-invariant: 1.3.3
+      tiny-warning: 1.0.3
+
   '@tanstack/react-start-client@1.154.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@tanstack/react-router': 1.154.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -12641,6 +12663,16 @@ snapshots:
       tiny-invariant: 1.3.3
       tiny-warning: 1.0.3
 
+  '@tanstack/router-core@1.154.13':
+    dependencies:
+      '@tanstack/history': 1.154.7
+      '@tanstack/store': 0.8.0
+      cookie-es: 2.0.0
+      seroval: 1.4.2
+      seroval-plugins: 1.4.2(seroval@1.4.2)
+      tiny-invariant: 1.3.3
+      tiny-warning: 1.0.3
+
   '@tanstack/router-generator@1.154.12':
     dependencies:
       '@tanstack/router-core': 1.154.12
@@ -12676,10 +12708,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@tanstack/router-ssr-query-core@1.154.12(@tanstack/query-core@5.90.19)(@tanstack/router-core@1.154.12)':
+  '@tanstack/router-ssr-query-core@1.154.13(@tanstack/query-core@5.90.19)(@tanstack/router-core@1.154.13)':
     dependencies:
       '@tanstack/query-core': 5.90.19
-      '@tanstack/router-core': 1.154.12
+      '@tanstack/router-core': 1.154.13
 
   '@tanstack/router-utils@1.154.7':
     dependencies:
@@ -12755,9 +12787,9 @@ snapshots:
 
   '@tanstack/virtual-file-routes@1.154.7': {}
 
-  '@tanstack/zod-adapter@1.154.12(@tanstack/react-router@1.154.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(zod@4.3.6)':
+  '@tanstack/zod-adapter@1.154.13(@tanstack/react-router@1.154.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(zod@4.3.6)':
     dependencies:
-      '@tanstack/react-router': 1.154.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/react-router': 1.154.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       zod: 4.3.6
 
   '@tediousjs/connection-string@0.5.0': {}
diff --git a/public/photos/andrew-power.jpg b/public/photos/andrew-power.jpg
deleted file mode 100644
index 4cedc5bb9..000000000
Binary files a/public/photos/andrew-power.jpg and /dev/null differ
diff --git a/public/photos/sample-picture.jpg b/public/photos/sample-picture.jpg
new file mode 100644
index 000000000..9f9747a4a
Binary files /dev/null and b/public/photos/sample-picture.jpg differ
diff --git a/scripts/database/reset.ts b/scripts/database/reset.ts
index 581c09082..f4ca6e0e5 100644
--- a/scripts/database/reset.ts
+++ b/scripts/database/reset.ts
@@ -9,27 +9,15 @@ export async function resetDatabase() {
 	const pool = new Pool({ connectionString: env.DATABASE_URL });
 	const db = drizzle({ client: pool });
 
-	// Extract the username from a PostgreSQL connection string like: postgresql://postgres:password@localhost:5432/db
-	const username = (() => {
-		try {
-			const match = env.DATABASE_URL.match(/^postgres(?:ql)?:\/\/([^:]+):[^@]+@/);
-			return match ? match[1] : undefined;
-		} catch {
-			return undefined;
-		}
-	})();
-
-	console.log("🔑 Username:", username);
-
 	try {
 		await db.transaction(async (tx) => {
 			await tx.execute(sql`DROP SCHEMA drizzle CASCADE`);
 			await tx.execute(sql`CREATE SCHEMA drizzle`);
-			await tx.execute(sql.raw(`GRANT ALL ON SCHEMA drizzle TO ${username}`));
+			await tx.execute(sql`GRANT ALL ON SCHEMA drizzle TO postgres`);
 
 			await tx.execute(sql`DROP SCHEMA public CASCADE`);
 			await tx.execute(sql`CREATE SCHEMA public`);
-			await tx.execute(sql.raw(`GRANT ALL ON SCHEMA public TO ${username}`));
+			await tx.execute(sql`GRANT ALL ON SCHEMA public TO postgres`);
 		});
 
 		console.log("✅ Database reset completed");
diff --git a/src/components/resume/hooks/use-webfonts.tsx b/src/components/resume/hooks/use-webfonts.tsx
index 10a06e749..aa84e6bb8 100644
--- a/src/components/resume/hooks/use-webfonts.tsx
+++ b/src/components/resume/hooks/use-webfonts.tsx
@@ -1,10 +1,18 @@
 import { useEffect } from "react";
+import { useIsMounted } from "usehooks-ts";
 import type z from "zod";
 import webfontlist from "@/components/typography/webfontlist.json";
 import type { typographySchema } from "@/schema/resume/data";
 
 export function useWebfonts(typography: z.infer<typeof typographySchema>) {
+	const isMounted = useIsMounted();
+
 	useEffect(() => {
+		if (!isMounted()) return;
+
+		const body = document.body;
+		if (body) body.setAttribute("data-wf-loaded", "false");
+
 		async function loadFont(family: string, weights: string[]) {
 			const font = webfontlist.find((font) => font.family === family);
 			if (!font) return;
@@ -36,6 +44,14 @@ export function useWebfonts(typography: z.infer<typeof typographySchema>) {
 		Promise.all([
 			loadFont(bodyTypography.fontFamily, bodyTypography.fontWeights),
 			loadFont(headingTypography.fontFamily, headingTypography.fontWeights),
-		]);
-	}, [typography]);
+		]).then(() => {
+			if (isMounted() && body) body.setAttribute("data-wf-loaded", "true");
+		});
+
+		return () => {
+			if (isMounted()) {
+				if (body) body.removeAttribute("data-wf-loaded");
+			}
+		};
+	}, [isMounted, typography]);
 }
diff --git a/src/integrations/orpc/services/printer.ts b/src/integrations/orpc/services/printer.ts
index 3802f309c..e555389ba 100644
--- a/src/integrations/orpc/services/printer.ts
+++ b/src/integrations/orpc/services/printer.ts
@@ -99,6 +99,7 @@ export const printerService = {
 		const page = await browser.newPage();
 
 		await page.goto(url, { waitUntil: "networkidle0" });
+		await page.waitForFunction(() => document.body.getAttribute("data-wf-loaded") === "true", { timeout: 5_000 });
 
 		const pdfBuffer = await page.pdf({
 			width: pageDimensions[format].width,
@@ -173,6 +174,7 @@ export const printerService = {
 		const page = await browser.newPage();
 
 		await page.goto(url, { waitUntil: "networkidle0" });
+		await page.waitForFunction(() => document.body.getAttribute("data-wf-loaded") === "true", { timeout: 5_000 });
 
 		const screenshotBuffer = await page.screenshot({ type: "webp", quality: 80 });
 
diff --git a/src/routes/builder/$resumeId/-sidebar/right/sections/css-editor.tsx b/src/routes/builder/$resumeId/-sidebar/right/sections/css-editor.tsx
index 171433ee6..abc069d6b 100644
--- a/src/routes/builder/$resumeId/-sidebar/right/sections/css-editor.tsx
+++ b/src/routes/builder/$resumeId/-sidebar/right/sections/css-editor.tsx
@@ -55,16 +55,18 @@ const CSS_SELECTORS = [
 	".experience-item-header",
 	".experience-item-title",
 	".experience-item-name",
-	".experience-item-description",
+	".experience-item-company",
+	".experience-item-position",
+	".experience-item-location",
+	".experience-item-period",
 	".experience-item-link",
-	".experience-item-metadata",
+	".experience-item-description",
 	".education-item",
 	".education-item-header",
 	".education-item-title",
 	".education-item-name",
 	".education-item-description",
 	".education-item-link",
-	".education-item-metadata",
 	".projects-item",
 	".projects-item-header",
 	".projects-item-title",
@@ -199,9 +201,10 @@ export default function CSSMonacoEditor({ theme, defaultValue, onChange }: Props
 	return (
 		<Editor
 			language="css"
-			theme={theme === "dark" ? "vs-dark" : "light"}
-			defaultValue={defaultValue}
 			onChange={onChange}
+			defaultValue={defaultValue}
+			theme={theme === "dark" ? "vs-dark" : "light"}
+			options={{ tabSize: 2, wordWrap: "on", minimap: { enabled: false } }}
 		/>
 	);
 }
diff --git a/src/schema/resume/data.ts b/src/schema/resume/data.ts
index ff10ae437..314ce45cc 100644
--- a/src/schema/resume/data.ts
+++ b/src/schema/resume/data.ts
@@ -621,7 +621,7 @@ export const defaultResumeData: ResumeData = {
 export const sampleResumeData: ResumeData = {
 	picture: {
 		hidden: false,
-		url: "https://i.imgur.com/o4Jpt1p.jpeg",
+		url: `https://rxresu.me/photos/sample-picture.jpg`,
 		size: 100,
 		rotation: 0,
 		aspectRatio: 1,