diff --git a/src/pages/color-converter.astro b/src/pages/color-converter.astro
index 4af35cf..9d83324 100644
--- a/src/pages/color-converter.astro
+++ b/src/pages/color-converter.astro
@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle'
 ---
 
 <Layout title="Color Converter - AIO Tools">
-  <div class="page">
+  <main class="page">
     <PageTitle title="Color Converter" description="Convert colors to any format. Color picker provided inside." />
 
     <section class="content">
       <ColorConverterComponent client:visible />
     </section>
-  </div>
+  </main>
 </Layout>
 
 <style lang="sass">
-  @use '/src/assets/css/viewport.sass' as view
+  @use '/src/styles/breakpoint.sass' as view
 
   .page
     text-align: center
diff --git a/src/pages/hash-generator.astro b/src/pages/hash-generator.astro
index 787c330..fa48845 100644
--- a/src/pages/hash-generator.astro
+++ b/src/pages/hash-generator.astro
@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle'
 ---
 
 <Layout title="Hash Generator - AIO Tools">
-  <div class="page">
+  <main class="page">
     <PageTitle title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." />
 
     <section class="content">
       <HashGeneratorComponent client:visible />
     </section>
-  </div>
+  </main>
 </Layout>
 
 <style lang="sass">
-  @use '/src/assets/css/viewport.sass' as view
+  @use '/src/styles/breakpoint.sass' as view
 
   .page
     text-align: center
diff --git a/src/pages/password-generator.astro b/src/pages/password-generator.astro
index bf160be..1cd8432 100644
--- a/src/pages/password-generator.astro
+++ b/src/pages/password-generator.astro
@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle'
 ---
 
 <Layout title="Password Generator - AIO Tools">
-  <div class="page">
+  <main class="page">
     <PageTitle title="Password Generator" description="Generate a strong and secure password for your accounts online." />
 
     <section class="content">
       <PasswordGeneratorComponent client:load />
     </section>
-  </div>
+  </main>
 </Layout>
 
 <style lang="sass">
-  @use '/src/assets/css/viewport.sass' as view
+  @use '/src/styles/breakpoint.sass' as view
 
   .page
     text-align: center
diff --git a/src/pages/password-manager.astro b/src/pages/password-manager.astro
index 8674fdb..140d141 100644
--- a/src/pages/password-manager.astro
+++ b/src/pages/password-manager.astro
@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle.tsx'
 ---
 
 <Layout title="Password Manager - AIO Tools">
-  <div class="page">
+  <main class="page">
     <PageTitle title="Password Manager" description="Manage your passwords securely and privately. Recommended to be pair with Password Generator for best security." />
 
     <section class="content">
       <PasswordManagerComponent client:visible />
     </section>
-  </div>
+  </main>
 </Layout>
 
 <style lang="sass">
-  @use '/src/assets/css/viewport.sass' as view
+  @use '/src/styles/breakpoint.sass' as view
 
   .page
     font-family: 'Inter', sans-serif
diff --git a/src/pages/text-comparison.astro b/src/pages/text-comparison.astro
index 846f3ea..ad2694c 100644
--- a/src/pages/text-comparison.astro
+++ b/src/pages/text-comparison.astro
@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle.tsx'
 ---
 
 <Layout title="Text Comparison - AIO Tools">
-  <div class="page">
+  <main class="page">
     <PageTitle title="Text Comparison" description="Compare text side by side to detect changes easily." />
 
     <section class="content">
       <TextComparisonComponent client:visible />
     </section>
-  </div>
+  </main>
 </Layout>
 
 <style lang="sass">
-  @use '/src/assets/css/viewport.sass' as view
+  @use '/src/styles/breakpoint.sass' as view
 
   .page
     font-family: 'Inter', sans-serif