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