diff --git a/src/components/Header.astro b/src/components/Header.astro
index 345869b..6b315ca 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -11,7 +11,7 @@ import Hero from './Hero.astro';
       { name: 'Schedule', url: '#schedule' },
       { name: 'FAQ', url: '#faq' },
     ]}
-    client:load
+    client:media="(max-width: 767px)"
   />
   <Hero />
 </header>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 4d6e964..b862668 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -22,8 +22,8 @@
 </div>
 
 <style lang="scss">
-  @use '../styles/breakpoints' as breakpoints;
-  @use '../styles/colors' as colors;
+  @use '../styles/breakpoints';
+  @use '../styles/colors';
 
   .container {
     display: flex;
diff --git a/src/components/Navbar/style.module.scss b/src/components/Navbar/style.module.scss
index 0a85b37..83e6075 100644
--- a/src/components/Navbar/style.module.scss
+++ b/src/components/Navbar/style.module.scss
@@ -1,5 +1,5 @@
-@use '../../styles/colors' as colors;
-@use '../../styles/breakpoints' as breakpoints;
+@use '../../styles/colors';
+@use '../../styles/breakpoints';
 
 .nav {
   display: flex;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f551930..c7e2164 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -24,8 +24,8 @@ const { title } = Astro.props;
 </html>
 
 <style is:global lang="scss">
-  @use '../styles/breakpoints.scss' as breakpoints;
-  @use '../styles/colors.scss' as colors;
+  @use '../styles/breakpoints';
+  @use '../styles/colors';
 
   html {
     font-family: 'Lexend Deca Variable', system-ui, sans-serif;
diff --git a/src/styles/breakpoints.scss b/src/styles/_breakpoints.scss
similarity index 100%
rename from src/styles/breakpoints.scss
rename to src/styles/_breakpoints.scss
diff --git a/src/styles/colors.scss b/src/styles/_colors.scss
similarity index 100%
rename from src/styles/colors.scss
rename to src/styles/_colors.scss