diff --git a/src/assets/compressed-images/background.avif b/src/assets/compressed-images/background.avif
deleted file mode 100644
index 70acab9..0000000
Binary files a/src/assets/compressed-images/background.avif and /dev/null differ
diff --git a/src/assets/compressed-images/background.webp b/src/assets/compressed-images/background.webp
deleted file mode 100644
index 5ab4880..0000000
Binary files a/src/assets/compressed-images/background.webp and /dev/null differ
diff --git a/src/assets/compressed-images/fwt.avif b/src/assets/compressed-images/fwt.avif
deleted file mode 100644
index 35f56c3..0000000
Binary files a/src/assets/compressed-images/fwt.avif and /dev/null differ
diff --git a/src/assets/compressed-images/fwt.webp b/src/assets/compressed-images/fwt.webp
deleted file mode 100644
index 32033be..0000000
Binary files a/src/assets/compressed-images/fwt.webp and /dev/null differ
diff --git a/src/assets/compressed-images/sample.avif b/src/assets/compressed-images/sample.avif
deleted file mode 100644
index 78c62db..0000000
Binary files a/src/assets/compressed-images/sample.avif and /dev/null differ
diff --git a/src/assets/compressed-images/sample.webp b/src/assets/compressed-images/sample.webp
deleted file mode 100644
index 0cb2279..0000000
Binary files a/src/assets/compressed-images/sample.webp and /dev/null differ
diff --git a/src/assets/images/background.png b/src/assets/images/background.png
deleted file mode 100644
index 98e7996..0000000
Binary files a/src/assets/images/background.png and /dev/null differ
diff --git a/src/assets/images/fwt.png b/src/assets/images/fwt.png
deleted file mode 100644
index 4d1e48b..0000000
Binary files a/src/assets/images/fwt.png and /dev/null differ
diff --git a/src/assets/images/sample.avif b/src/assets/images/sample.avif
new file mode 100644
index 0000000..4fdb787
Binary files /dev/null and b/src/assets/images/sample.avif differ
diff --git a/src/assets/images/sample.png b/src/assets/images/sample.png
deleted file mode 100644
index a8f6f60..0000000
Binary files a/src/assets/images/sample.png and /dev/null differ
diff --git a/src/builtin-components/Button/Button.sass b/src/builtin-components/Button/Button.sass
index b2a4d46..0e01f21 100644
--- a/src/builtin-components/Button/Button.sass
+++ b/src/builtin-components/Button/Button.sass
@@ -4,13 +4,13 @@
 .button
   background: vars.$primaryColor
   border: none
-  border-radius: 32px
+  border-radius: 16px
   color: white
   padding: 0.5rem 1.25rem
   text-align: center
   text-decoration: none
   display: inline-block
-  font-size: 1rem
+  font-size: 0.75rem
   font-weight: 700
   cursor: pointer
   transition: all 0.2s ease-out
diff --git a/src/builtin-components/Button/Button.tsx b/src/builtin-components/Button/Button.tsx
index 5a4611a..33adc78 100644
--- a/src/builtin-components/Button/Button.tsx
+++ b/src/builtin-components/Button/Button.tsx
@@ -2,25 +2,22 @@ import './Button.sass'
 import { Show } from 'solid-js'
 
 interface Props {
-  label?: string
-  to?: string
-  onClick?: () => void
+  label?: string;
+  to?: string;
+  onClick?: () => void;
 }
 
 export default (props: Props) => {
-  return (
-    <>
-      <Show when={props.to}>
-        <a href={props.to} aria-label={props.label}>
-          <button class="button">{props.label || 'Click Me!'}</button>
-        </a>
-      </Show>
+  return
+  <>
+    <Show when={props.to}>
+      <a href={props.to} aria-label={props.label}>
+        <button class="button">{props.label || 'Click Me!'}</button>
+      </a>
+    </Show>
 
-      <Show when={!props.to}>
-        <button class="button" onClick={props.onClick}>
-          {props.label || 'Click Me!'}
-        </button>
-      </Show>
-    </>
-  )
-}
+    <Show when={!props.to}>
+      <button class="button" onClick={props.onClick}>{props.label || 'Click Me!'}</button>
+    </Show>
+  </>
+}
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index c0dee19..793e274 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -3,8 +3,6 @@ const { title } = Astro.props
 
 const websiteName = 'Template'
 const websiteDescription = 'This is just a template.'
-
-import Background from '../builtin-components/Background/Background'
 ---
 
 <html lang="en">
@@ -18,7 +16,6 @@ import Background from '../builtin-components/Background/Background'
   </head>
 
   <body id="body">
-    <Background color="#0c1b31" />
     <slot />
   </body>
 </html>
@@ -29,5 +26,6 @@ import Background from '../builtin-components/Background/Background'
 
   #body
     font-family: fonts.$Inter
+    background-color: vars.$background
     color: vars.$textColor
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8c9daec..21124d0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,30 +1,21 @@
 ---
 import Layout from '../layouts/Layout.astro'
 import Button from '../builtin-components/Button/Button.tsx'
-import Image from '../builtin-components/Image/Image'
 ---
 
 <Layout title="Home">
   <main class="page">
-    <!-- <section class="image"> -->
-      <Image src="fwt.png" size={250} />
-    <!-- </section> -->
-
-    <h1>Fast WebApp Template</h1>
+    <h1>Main Page</h1>
     <Button label="Next Page" to="/next" />
   </main>
-
-  <style lang="sass">
-    .page
-      display: flex
-      flex-direction: column
-      flex-wrap: wrap
-      justify-content: center
-      align-items: center
-      align-content: center
-      margin: 2rem
-      height: 90vh
-
-    
-  </style>
 </Layout>
+
+<style lang="sass">
+  .page
+    display: flex
+    flex-direction: column
+    text-align: center
+    justify-content: center
+    align-items: center
+    margin: 2rem
+</style>
diff --git a/src/pages/next.astro b/src/pages/next.astro
index 3e5696e..5b1d84d 100644
--- a/src/pages/next.astro
+++ b/src/pages/next.astro
@@ -1,17 +1,15 @@
 ---
 import Layout from '../layouts/Layout.astro'
 import Button from '../builtin-components/Button/Button.tsx'
-import Image from '../builtin-components/Image/Image'
+import { Picture } from 'astro:assets'
+import sample from '/src/images/sample.avif'
 ---
 
 <Layout title="Home">
   <main class="page">
     <h1>Second Page</h1>
     <Button label="Back to Home" to="/" />
-
-    <section class="image">
-      <Image src="sample.png" alt="Example Image" size={400} />
-    </section>
+    <Picture class="image" src={sample} alt="Example Image" width={400} quality={85} formats={['avif', 'webp']} />
   </main>
 </Layout>
 
@@ -23,7 +21,6 @@ import Image from '../builtin-components/Image/Image'
     justify-content: center
     align-items: center
     margin: 2rem
-    height: auto
 
   .image
     margin: 2rem 0 0 0
diff --git a/src/styles/classes.sass b/src/styles/classes.sass
index 6ea8f84..31b6cc9 100644
--- a/src/styles/classes.sass
+++ b/src/styles/classes.sass
@@ -1,5 +1,3 @@
-@use './breakpoint' as view
-
 .fullscreen
   position: fixed
   top: 0
@@ -8,7 +6,7 @@
   height: 100vh
   object-fit: cover
   z-index: -1
-  opacity: 1
+  opacity: 0.2
 
 .on-desktop-only
   @media only screen and (max-width: view.$desktop)