diff --git a/src/assets/logo.jpg b/src/assets/logo.jpg
new file mode 100644
index 0000000..a7ce3e0
Binary files /dev/null and b/src/assets/logo.jpg differ
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
deleted file mode 100644
index 7565660..0000000
--- a/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git a/src/components/sections/HeroSection.vue b/src/components/sections/HeroSection.vue
index 035c930..b8baf09 100644
--- a/src/components/sections/HeroSection.vue
+++ b/src/components/sections/HeroSection.vue
@@ -12,11 +12,13 @@
  * - "change hero colors" -> modify the styles below or variables.css
  */
 import { hero } from "@/content/site-data";
+import logo from "@/assets/logo.jpg";
 </script>
 
 <template>
   <section class="hero-section">
     <div class="hero-container">
+      <img :src="logo" alt="Logo" class="hero-logo" />
       <h1 class="hero-title">{{ hero.title.value }}</h1>
       <p class="hero-tagline">{{ hero.tagline.value }}</p>
       <p class="hero-description">{{ hero.description.value }}</p>
@@ -41,6 +43,13 @@ import { hero } from "@/content/site-data";
   margin: 0 auto;
 }
 
+.hero-logo {
+  display: block;
+  max-width: 150px;
+  height: auto;
+  margin: 0 auto var(--space-md);
+}
+
 .hero-title {
   font-size: clamp(2.5rem, 8vw, 4rem);
   color: var(--color-primary-dark);