diff --git a/src/App.jsx b/src/App.jsx
index bc5d765..9226a82 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,12 +1,12 @@
 import { useState, useEffect, useRef } from 'react';
 import { useAtomValue } from 'jotai';
 import { activeSectionState, themeState } from './state/atoms';
-import Navbar from './components/Navbar/Navbar';
-import Hero from './components/Hero/Hero';
-import About from './components/About/About';
-import Projects from './components/Projects/Projects';
-import Contact from './components/Contact/Contact';
-import Footer from './components/Footer/Footer';
+import Navbar from './components/Navbar';
+import Hero from './components/Hero';
+import About from './components/About';
+import Projects from './components/Projects';
+import Contact from './components/Contact';
+import Footer from './components/Footer';
 import styles from './App.module.scss';
 
 const SECTIONS = {
diff --git a/src/components/About/About.jsx b/src/components/About.jsx
similarity index 97%
rename from src/components/About/About.jsx
rename to src/components/About.jsx
index 0ee2785..da97b08 100644
--- a/src/components/About/About.jsx
+++ b/src/components/About.jsx
@@ -1,4 +1,4 @@
-import styles from './About.module.scss';
+import styles from '../styles/components/About.module.scss';
 
 const STACK = ['Technology 1', 'Technology 2', 'Technology 3', 'Technology 4', 'Technology 5', 'Technology 6'];
 
diff --git a/src/components/Contact/Contact.jsx b/src/components/Contact.jsx
similarity index 95%
rename from src/components/Contact/Contact.jsx
rename to src/components/Contact.jsx
index b5bba80..3f7785b 100644
--- a/src/components/Contact/Contact.jsx
+++ b/src/components/Contact.jsx
@@ -1,4 +1,4 @@
-import styles from './Contact.module.scss';
+import styles from '../styles/components/Contact.module.scss';
 
 export default function Contact() {
   return (
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer.jsx
similarity index 83%
rename from src/components/Footer/Footer.jsx
rename to src/components/Footer.jsx
index e22e8d4..1274b18 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,4 +1,4 @@
-import styles from './Footer.module.scss';
+import styles from '../styles/components/Footer.module.scss';
 
 export default function Footer() {
   return (
diff --git a/src/components/Hero/Hero.jsx b/src/components/Hero.jsx
similarity index 94%
rename from src/components/Hero/Hero.jsx
rename to src/components/Hero.jsx
index fb4dda3..a85a108 100644
--- a/src/components/Hero/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,4 +1,4 @@
-import styles from './Hero.module.scss';
+import styles from '../styles/components/Hero.module.scss';
 
 export default function Hero() {
   return (
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar.jsx
similarity index 90%
rename from src/components/Navbar/Navbar.jsx
rename to src/components/Navbar.jsx
index 1c29c30..f97a44d 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,7 +1,7 @@
 import { useAtom } from 'jotai';
-import { navOpenState, activeSectionState } from '../../state/atoms';
-import ThemeToggle from '../ThemeToggle/ThemeToggle';
-import styles from './Navbar.module.scss';
+import { navOpenState, activeSectionState } from '../state/atoms';
+import ThemeToggle from './ThemeToggle';
+import styles from '../styles/components/Navbar.module.scss';
 
 const NAV_LINKS = [
   { label: 'Home', section: 'home' },
diff --git a/src/components/Projects/Projects.jsx b/src/components/Projects.jsx
similarity index 96%
rename from src/components/Projects/Projects.jsx
rename to src/components/Projects.jsx
index a2fa3a6..fd89263 100644
--- a/src/components/Projects/Projects.jsx
+++ b/src/components/Projects.jsx
@@ -1,4 +1,4 @@
-import styles from './Projects.module.scss';
+import styles from '../styles/components/Projects.module.scss';
 
 const PROJECTS = [
   {
diff --git a/src/components/ThemeToggle/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
similarity index 92%
rename from src/components/ThemeToggle/ThemeToggle.jsx
rename to src/components/ThemeToggle.jsx
index b4cc0a5..9ed5c32 100644
--- a/src/components/ThemeToggle/ThemeToggle.jsx
+++ b/src/components/ThemeToggle.jsx
@@ -1,6 +1,6 @@
 import { useAtom } from 'jotai';
-import { themeState } from '../../state/atoms';
-import styles from './ThemeToggle.module.scss';
+import { themeState } from '../state/atoms';
+import styles from '../styles/components/ThemeToggle.module.scss';
 
 export default function ThemeToggle() {
   const [theme, setTheme] = useAtom(themeState);
diff --git a/src/components/About/About.module.scss b/src/styles/components/About.module.scss
similarity index 98%
rename from src/components/About/About.module.scss
rename to src/styles/components/About.module.scss
index 83b5a56..5f283fb 100644
--- a/src/components/About/About.module.scss
+++ b/src/styles/components/About.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .about {
   padding: $space-24 $space-6;
diff --git a/src/components/Contact/Contact.module.scss b/src/styles/components/Contact.module.scss
similarity index 97%
rename from src/components/Contact/Contact.module.scss
rename to src/styles/components/Contact.module.scss
index e874c46..a5937c8 100644
--- a/src/components/Contact/Contact.module.scss
+++ b/src/styles/components/Contact.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .contact {
   padding: $space-24 $space-6 $space-16;
diff --git a/src/components/Footer/Footer.module.scss b/src/styles/components/Footer.module.scss
similarity index 91%
rename from src/components/Footer/Footer.module.scss
rename to src/styles/components/Footer.module.scss
index 3a8bc10..d2adf5d 100644
--- a/src/components/Footer/Footer.module.scss
+++ b/src/styles/components/Footer.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .footer {
   border-top: 1px solid $color-border;
diff --git a/src/components/Hero/Hero.module.scss b/src/styles/components/Hero.module.scss
similarity index 99%
rename from src/components/Hero/Hero.module.scss
rename to src/styles/components/Hero.module.scss
index cd20b60..8549565 100644
--- a/src/components/Hero/Hero.module.scss
+++ b/src/styles/components/Hero.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .hero {
   position: relative;
diff --git a/src/components/Navbar/Navbar.module.scss b/src/styles/components/Navbar.module.scss
similarity index 98%
rename from src/components/Navbar/Navbar.module.scss
rename to src/styles/components/Navbar.module.scss
index 62ebee7..34d9523 100644
--- a/src/components/Navbar/Navbar.module.scss
+++ b/src/styles/components/Navbar.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .header {
   position: fixed;
diff --git a/src/components/Projects/Projects.module.scss b/src/styles/components/Projects.module.scss
similarity index 98%
rename from src/components/Projects/Projects.module.scss
rename to src/styles/components/Projects.module.scss
index 4e99c55..2165d9b 100644
--- a/src/components/Projects/Projects.module.scss
+++ b/src/styles/components/Projects.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .projects {
   padding: $space-24 $space-6;
diff --git a/src/components/ThemeToggle/ThemeToggle.module.scss b/src/styles/components/ThemeToggle.module.scss
similarity index 91%
rename from src/components/ThemeToggle/ThemeToggle.module.scss
rename to src/styles/components/ThemeToggle.module.scss
index 9eaa160..4801bbe 100644
--- a/src/components/ThemeToggle/ThemeToggle.module.scss
+++ b/src/styles/components/ThemeToggle.module.scss
@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .toggle {
   background: none;