diff --git a/src/components/AboutUs/about-us.scss b/src/components/AboutUs/about-us.scss
index edeabdd..4e7eff3 100644
--- a/src/components/AboutUs/about-us.scss
+++ b/src/components/AboutUs/about-us.scss
@@ -1,3 +1,5 @@
+@use '../../styles/variables.scss' as *;
+
.about-us-section {
background-color: $text-light;
display: grid;
diff --git a/src/components/Contact/contact.scss b/src/components/Contact/contact.scss
index 66abdcb..898f23b 100644
--- a/src/components/Contact/contact.scss
+++ b/src/components/Contact/contact.scss
@@ -1,3 +1,5 @@
+@use '../../styles/variables.scss' as *;
+
.contact-section {
display: grid;
grid-template-columns: repeat(1, 1fr);
diff --git a/src/components/ContactDetails/contact-details.scss b/src/components/ContactDetails/contact-details.scss
index 9fa8b9a..78d59b1 100644
--- a/src/components/ContactDetails/contact-details.scss
+++ b/src/components/ContactDetails/contact-details.scss
@@ -1,3 +1,5 @@
+@use '../../styles/variables.scss' as *;
+
.contact-details {
ul {
display: grid;
diff --git a/src/components/Family/family.scss b/src/components/Family/family.scss
index fc54085..b54603e 100644
--- a/src/components/Family/family.scss
+++ b/src/components/Family/family.scss
@@ -1,3 +1,5 @@
+@use '../../styles/variables.scss' as *;
+
.family-section {
padding-block: 8rem;
padding-inline: 2.81rem;
diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss
index 5b44540..93bc554 100644
--- a/src/components/Footer/footer.scss
+++ b/src/components/Footer/footer.scss
@@ -1,3 +1,5 @@
+@use '../../styles/variables.scss' as *;
+
footer {
background-color: $dark;
color: $text-light;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 1e6d554..000be96 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -3,10 +3,6 @@ import { ChevronUpIcon, CloseIcon, ListIcon } from '../Icons/Icons';
import HeaderNav from './HeaderNav/HeaderNav';
import IecepLogo from '../IecepLogo/IecepLogo';
-type Props = {
- path: string;
-};
-
const Header = () => {
const [dropdownOpen, setDropdownOpen] = useState(false);
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index a0dd5cd..dca7268 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -1,3 +1,5 @@
+@use '../../styles/variables.scss' as *;
+
header.header {
background-color: $primary;
position: fixed;
diff --git a/src/components/ProjectsAndCampaigns/projects-and-campaigns.scss b/src/components/ProjectsAndCampaigns/projects-and-campaigns.scss
index 44a3bbb..ca62a5b 100644
--- a/src/components/ProjectsAndCampaigns/projects-and-campaigns.scss
+++ b/src/components/ProjectsAndCampaigns/projects-and-campaigns.scss
@@ -1,3 +1,5 @@
+@use '../../styles/variables.scss' as *;
+
.projects-and-campaigns-section {
padding-block: 8.75rem;
background-color: $background-accent;
diff --git a/src/components/Slider/slider.scss b/src/components/Slider/slider.scss
index cc36847..5d13a6d 100644
--- a/src/components/Slider/slider.scss
+++ b/src/components/Slider/slider.scss
@@ -1,3 +1,5 @@
+@use '../../styles/variables.scss' as *;
+
$margin-top: 1.5rem;
.landing-slider-section {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 0a7fef7..9619820 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -13,7 +13,6 @@ const {
title,
description = 'Institute of Electronics Engineers of the Philippines - University of the Philippines Diliman Student Chapter',
} = Astro.props;
-const path = Astro.url.pathname;
---
@@ -61,7 +60,7 @@ const path = Astro.url.pathname;
-
+
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 8da2659..d9e3a05 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
-
@use 'swiper/scss';
@use 'swiper/scss/navigation';
@use 'swiper/scss/pagination';
@@ -8,18 +6,15 @@
@use '../layouts/layout.scss' as *;
-@import '../components/Footer/footer.scss';
-@import '../components/Header/header.scss';
+@use '../components/Footer/footer.scss' as *;
+@use '../components/Header/header.scss' as *;
+@use '../components/AboutUs/about-us.scss' as *;
+@use '../components/Family/family.scss' as *;
+@use '../components/ProjectsAndCampaigns/projects-and-campaigns.scss' as *;
+@use '../components/Slider/slider.scss' as *;
+@use '../components/ContactDetails/contact-details.scss' as *;
+@use '../components/Contact/contact.scss' as *;
+@use '../components/Shop/shop.scss' as *;
+@use '../components/Registration/registration.scss' as *;
-@import '../components/AboutUs/about-us.scss';
-@import '../components/Family/family.scss';
-@import '../components/ProjectsAndCampaigns/projects-and-campaigns.scss';
-@import '../components/Slider/slider.scss';
-
-@import '../components/ContactDetails/contact-details.scss';
-
-@import '../components/Contact/contact.scss';
-
-@import '../components/Shop/shop.scss';
-
-@import '../components/Registration/registration.scss';
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
\ No newline at end of file