diff --git a/src/App.svelte b/src/App.svelte
index 57efbed..5dfdadd 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,5 @@
 <script>
-  import Hero from './lib/components/Hero.svelte'
-  import headshotPhoto from './assets/headshot.jpg'
+  import HeaderSection from "./lib/HeaderSection.svelte";
   import SkillsSection from "./lib/SkillsSection.svelte";
   import ExpSection from "./lib/ExpSection.svelte";
   import ContactSection from "./lib/ContactSection.svelte";
@@ -8,20 +7,7 @@
 
 <div class="pb-16 lg:pb-24">
   <header class="bg-gray-900">
-    <div class="container mx-auto">
-      <Hero
-        imageUrl={headshotPhoto}
-        imageAlt="Headshot photograph of Dan Kotowski"
-        title="Dan Kotowski"
-      >
-        <p class="mt-6 text-lg lg:text-xl text-gray-300">
-          Senior web software engineer with strong technical and interpersonal skills
-        </p>
-        <p class="mt-6 text-yellow-600 italic">
-          Note: This webpage is a work in progress.
-        </p>
-      </Hero>
-    </div>
+    <HeaderSection />
   </header>
 
   <main>
diff --git a/src/lib/HeaderSection.svelte b/src/lib/HeaderSection.svelte
new file mode 100644
index 0000000..f00429e
--- /dev/null
+++ b/src/lib/HeaderSection.svelte
@@ -0,0 +1,19 @@
+<script>
+import headshotPhoto from "../assets/headshot.jpg";
+import Hero from "./components/Hero.svelte";
+</script>
+
+<div class="container mx-auto">
+  <Hero
+    imageUrl={headshotPhoto}
+    imageAlt="Headshot photograph of Dan Kotowski"
+    title="Dan Kotowski"
+  >
+    <p class="mt-6 text-lg lg:text-xl text-gray-300">
+      Senior web software engineer with strong technical and interpersonal skills
+    </p>
+    <p class="mt-6 text-yellow-600 italic">
+      Note: This webpage is a work in progress.
+    </p>
+  </Hero>
+</div>