Hey Crystal,

There’s a few different ways you could do this, all of which will require a little bit of custom HTML and CSS. One approach could be creating an img element with the image src set by the asset helper, which would live within the li element under the #each helper of either categories or sections in your home_page.hbs file:

{{#each sections}}
     <li class="blocks-item">
         <img src={{asset 'example.png'}} class="blocks-item-img"/>
         <a href='{{url}}' class="blocks-item-link">
             <span class="blocks-item-title">
                 {{name}}
              </span>
              <span class="blocks-item-description">{{excerpt description}}</span>
         </a>
     </li>
{{/each}}

You can learn more about adding assets to your help center, here. Next, you'll need to add CSS styling to the images which you can do in the style.css file. First thing will be to add "flex-direction: column" to the .blocks-item selector. Next, you'll add styling specifically to image. Here's how that all looks together:

.blocks-item-link {
  color: $brand_color;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;  /* new code added */
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}

.blocks-item-img {
  height: auto;
  width: 20%;
  margin: auto;
  padding: 10px 0 10px 0;
}

And that should be about it. Like I mentioned, there's a few different approaches you could take with this depending on how you'd prefer the image layout but this is one example that will get the job done.

I hope this helps!

Tipene