diff --git a/apps/hashdotdev/src/_pages/blog/0001_block-design.mdx b/apps/hashdotdev/src/_pages/blog/0001_block-design.mdx
index 44beffb9f47..4b40d884deb 100644
--- a/apps/hashdotdev/src/_pages/blog/0001_block-design.mdx
+++ b/apps/hashdotdev/src/_pages/blog/0001_block-design.mdx
@@ -69,7 +69,7 @@ Embedding applications can also pass a plain old CSS file into the block if they
 No matter how beautiful a block looks, it's not worth much to anyone if it's difficult to use. Soft drop shadows and smooth gradients aren't going to delight the user if they're furiously trying to find the “save” button, and you've stashed it inside a dropdown menu that's too low contrast to see.
 
 <img
-  src="blog/0001_block-design/DesignGuidelines_1.png"
+  src="/blog/0001_block-design/DesignGuidelines_1.png"
   width={900}
   height={480}
   alt="A text input field with a very low contrast dropdown menu below it. Inside there is a low contrast 'save' button and a much larger and more prominent 'delete' button."
@@ -85,7 +85,7 @@ It may take users longer to figure out how to use the block, or may get in the w
 In practice, this means avoiding loud, wild visual design choices. Like adding a leopard pattern to your form background, or using a funky 1960s font for labels.
 
 <img
-  src="blog/0001_block-design/DesignGuidelines_3.png"
+  src="/blog/0001_block-design/DesignGuidelines_3.png"
   width={1050}
   height={414}
   alt="Two callout boxes. The first has very plain styling and limited use of color. The second has a leopard background, many bold colors, and an unconventional novelty font."
@@ -98,7 +98,7 @@ Because blocks will be used in a wide variety of situations, it is _extra import
 Nothing makes a design look better than consistency and ratios. Basing both your typography and spacing system off a set of root variables that have a base size (eg. 8px) and a set of standard multipliers (eg. x2, x3, x4) will make your whole block feel more cohesive. It also makes it much easier to manage your CSS.
 
 <img
-  src="blog/0001_block-design/DesignGuidelines_4.png"
+  src="/blog/0001_block-design/DesignGuidelines_4.png"
   width={948}
   height={627}
   alt="Two scales next to one another. The first shows typographic headlines running from small to large on a consistent scale. The second shows a spacing scale running from small to large areas."
@@ -150,7 +150,7 @@ To make this easy and quick for users, show them an empty state with:
 1.  A clear button or input element where they can search for data, select from a list, upload a file, or add a URL
 
 <img
-  src="blog/0001_block-design/DesignGuidelines_5.png"
+  src="/blog/0001_block-design/DesignGuidelines_5.png"
   width={685}
   height={603}
   alt="Two placeholder screens. The first shows a clear CTA in the middle for users to upload an image. The second shows a user dragging and dropping a file into the area."
@@ -159,7 +159,7 @@ To make this easy and quick for users, show them an empty state with:
 Once they have entered or selected data, ensure you design a loading state that lets them know if they need to wait a moment for the data to load. If the loading process might take a while, giving them buttons to pause and resume may also be a good idea. Giving users clear feedback and [visibility of system status](https://www.nngroup.com/articles/visibility-system-status/) helps them feel informed and in control.
 
 <img
-  src="blog/0001_block-design/DesignGuidelines_6.png"
+  src="/blog/0001_block-design/DesignGuidelines_6.png"
   width={661}
   height={240}
   alt="A loading screen showing how long left until the image uploads and buttons to pause or cancel the process."
@@ -184,7 +184,7 @@ If the user can click, edit, manipulate, or input data anywhere in the block, yo
 This means making buttons look like buttons by giving them a different background colour and clear border.
 
 <img
-  src="blog/0001_block-design/DesignGuidelines_8.png"
+  src="/blog/0001_block-design/DesignGuidelines_8.png"
   width={650}
   height={178}
   alt="An example of two buttons where one has a blue background and subtle shading to indicate it's clickable. The second has no background or border and it's unclear if it's clickable."
@@ -205,7 +205,7 @@ The a11y project has a great [checklist](https://www.a11yproject.com/checklist/#
 The most common mistakes in this department are usually related to colour choices and contrast levels. Any essential text, icons, and elements in your block should have a contrast rating that meets AA standards. That means the contrast ratio between the foreground and background needs to be 3.0:1 for all borders, icons, and text larger than 18px and 4.5:1 for all text smaller than 18px.
 
 <img
-  src="blog/0001_block-design/DesignGuidelines_7.png"
+  src="/blog/0001_block-design/DesignGuidelines_7.png"
   width={997}
   height={403}
   alt="Images of a button and a block of text with two examples. One where they pass the AA contrast ratio threshold, and another where they're too faint and don't pass the threshold."
@@ -234,7 +234,7 @@ You should use conventional icons that users have seen before. While there are n
 You should also be cautious about using non-conventional or novel icons. There's nothing less enticing than a mysterious icon in the corner of an app that gives you no indication of what it might do. Take you to a new page? Delete all the data you just entered? Who knows!
 
 <img
-  src="blog/0001_block-design/DesignGuidelines_9.png"
+  src="/blog/0001_block-design/DesignGuidelines_9.png"
   width={422}
   height={189}
   alt="A row of uncommon icons without labels."
@@ -243,7 +243,7 @@ You should also be cautious about using non-conventional or novel icons. There's
 The easiest way to solve this is to always put text labels next to icons. This prevents users from having to guess what the icon means. This is especially important if you're using icons that aren't widely used in other applications.
 
 <img
-  src="blog/0001_block-design/DesignGuidelines_10.png"
+  src="/blog/0001_block-design/DesignGuidelines_10.png"
   width={1028}
   height={198}
   alt="A row of uncommon icons with labels."
diff --git a/apps/hashdotdev/src/_pages/blog/0005_build-blocks-in-any-language.mdx b/apps/hashdotdev/src/_pages/blog/0005_build-blocks-in-any-language.mdx
index 962f96acbfb..a73651ef951 100644
--- a/apps/hashdotdev/src/_pages/blog/0005_build-blocks-in-any-language.mdx
+++ b/apps/hashdotdev/src/_pages/blog/0005_build-blocks-in-any-language.mdx
@@ -278,7 +278,7 @@ The F# Feliz library supports making use of the Model-View-Update architecture o
 For those unfamiliar with MVU, it prescribes how state (the model) can can be updated through messages dispatched to the view, which itself is a pure function of the state.
 
 <img
-  src="blog/0005_build-blocks-in-any-language/mvu.png"
+  src="/blog/0005_build-blocks-in-any-language/mvu.png"
   width={1004}
   height={178}
   alt="A diagram showing how the MVU architecture propagates changes."
@@ -289,7 +289,7 @@ For those unfamiliar with MVU, it prescribes how state (the model) can can be up
 The calculation block will operate on distinct Block Protocol Entity Types which are selected for each spreadsheet row. Selecting an Entity Type will fetch entities of that type and make them available to the row. The only aggregation functions currently supported by the block are: `count`, `sum`, and `avg`.
 
 <img
-  src="blog/0005_build-blocks-in-any-language/person_count.png"
+  src="/blog/0005_build-blocks-in-any-language/person_count.png"
   width={418}
   height={118}
   alt="The calculation block with `Person` selected in row one, containing `=count()` in cell A1."
@@ -481,7 +481,7 @@ With the parser in place, the application's view can try to parse the values of
 Inputting an expression in a cell, such as:
 
 <img
-  src="blog/0005_build-blocks-in-any-language/expression_math.png"
+  src="/blog/0005_build-blocks-in-any-language/expression_math.png"
   width={290}
   height={123}
   alt="The calculation block with `Person` selected in row one, `Company`in row two, containing `=count()/A2` in cell A1 and `=count()` in cell A2."