diff --git a/@dasig/Optimizers/OptimizeBackground.tsx b/@dasig/Optimizers/OptimizeBackground.tsx
deleted file mode 100644
index 1c27caf..0000000
--- a/@dasig/Optimizers/OptimizeBackground.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import sharp from 'sharp'
-
-const convertBackground = async () => {
-  const inputSrc = 'src/assets/images/background.png'
-  const webpOutput = 'fwt/images/background.webp'
-  const avifOutput = 'fwt/images/background.avif'
-
-  const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(1920).toBuffer()
-  await sharp(avifBuffer).toFile(avifOutput)
-
-  const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(1920).toBuffer()
-  await sharp(webpBuffer).toFile(webpOutput)
-}
-
-export default () => {
-  convertBackground()
-}
diff --git a/@dasig/Optimizers/OptimizeImage.tsx b/@dasig/Optimizers/OptimizeImage.tsx
deleted file mode 100644
index 00afd77..0000000
--- a/@dasig/Optimizers/OptimizeImage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import sharp from 'sharp'
-
-interface Props {
-  src: string
-  size?: number
-}
-
-const convertImage = async (props: Props) => {
-  const avifOutputPath = `fwt/images/${props.src.split('.').slice(0, -1).join('.')}.avif`
-  const webpOutputPath = `fwt/images/${props.src.split('.').slice(0, -1).join('.')}.webp`
-
-  const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
-  await sharp(avifBuffer).toFile(avifOutputPath)
-
-  const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
-  await sharp(webpBuffer).toFile(webpOutputPath)
-}
-
-export default (props: Props) => {
-  convertImage(props)
-}
diff --git a/@dasig/Optimizers/OptimizeLogo.tsx b/@dasig/Optimizers/OptimizeLogo.tsx
deleted file mode 100644
index f948031..0000000
--- a/@dasig/Optimizers/OptimizeLogo.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import sharp from 'sharp'
-
-interface Props {
-  size?: number
-  favicon?: boolean
-}
-
-const convertLogo = async (props: Props) => {
-  const inputSrc = 'src/assets/images/logo.png'
-  const webpImage = 'fwt/images/logo.webp'
-  const avifImage = 'fwt/images/logo.avif'
-
-  const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(props.size).toBuffer()
-  await sharp(avifBuffer).toFile(avifImage)
-
-  const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(props.size).toBuffer()
-  await sharp(webpBuffer).toFile(webpImage)
-}
-
-const generateFavicon = async (props: Props) => {
-  const inputSrc = 'src/assets/images/logo.png'
-  const favicon = 'public/favicon.png'
-
-  const faviconBuffer = await sharp(inputSrc).png({ quality: 90 }).resize(50).toBuffer()
-  await sharp(faviconBuffer).toFile(favicon)
-}
-
-export default (props: Props) => {
-  convertLogo(props)
-
-  if (props.favicon) {
-    generateFavicon(props)
-  }
-}
diff --git a/@dasig/components/Box.tsx b/@dasig/components/Box.tsx
index d27815f..a0c2c76 100644
--- a/@dasig/components/Box.tsx
+++ b/@dasig/components/Box.tsx
@@ -9,7 +9,7 @@ interface Props {
 }
 
 export default (props: Props) => {
-  const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
+  const boxClass = createMemo(() => (props.curved ? 'dasig-curvedbox' : 'dasig-box'))
 
   return (
     <section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>
diff --git a/@dasig/components/Button.tsx b/@dasig/components/Button.tsx
index 0ac4e8c..6ea3901 100644
--- a/@dasig/components/Button.tsx
+++ b/@dasig/components/Button.tsx
@@ -40,7 +40,7 @@ export default (props: Props) => {
           </Match>
           <Match when={!props.design}>
             <a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
-              <button class="button" style={borderRadius}>
+              <button class="dasig-button" style={borderRadius}>
                 {props.label || 'Click Me!'}
               </button>
             </a>
@@ -65,13 +65,13 @@ export default (props: Props) => {
           </Match>
           <Match when={!props.design}>
             <Show when={props.submit}>
-              <button class="button" type="submit" style={borderRadius}>
+              <button class="dasig-button" type="submit" style={borderRadius}>
                 {props.label || 'Click Me!'}
               </button>
             </Show>
 
             <Show when={!props.submit}>
-              <button class="button" onClick={props.onClick} style={borderRadius}>
+              <button class="dasig-button" onClick={props.onClick} style={borderRadius}>
                 {props.label || 'Click Me!'}
               </button>
             </Show>
diff --git a/@dasig/components/Column.tsx b/@dasig/components/Column.tsx
index e683a7c..5ff18f3 100644
--- a/@dasig/components/Column.tsx
+++ b/@dasig/components/Column.tsx
@@ -10,7 +10,7 @@ interface Props {
 export default (props: Props) => {
   return (
     <>
-      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+      <section class={`dasig-column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
         {props.children}
       </section>
     </>
diff --git a/@dasig/components/Footer.tsx b/@dasig/components/Footer.tsx
index 0f00944..f757fe6 100644
--- a/@dasig/components/Footer.tsx
+++ b/@dasig/components/Footer.tsx
@@ -8,7 +8,7 @@ interface Props {
 export default (props: Props) => {
   return (
     <>
-      <footer class="footer">
+      <footer class="dasig-footer">
         <small>{props.children}</small>
       </footer>
     </>
diff --git a/@dasig/components/Image.tsx b/@dasig/components/Image.tsx
index d885641..4f58667 100644
--- a/@dasig/components/Image.tsx
+++ b/@dasig/components/Image.tsx
@@ -8,12 +8,10 @@ interface Props {
 
 export default (props: Props) => {
   return (
-    <>
-      <picture>
-        <source srcset={props.avif} type="image/avif" />
-        <source srcset={props.webp} type="image/webp" />
-        <img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
-      </picture>
-    </>
+    <picture>
+      <source srcset={props.avif} type="image/avif" />
+      <source srcset={props.webp} type="image/webp" />
+      <img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
+    </picture>
   )
 }
diff --git a/@dasig/components/Input.tsx b/@dasig/components/Input.tsx
index 2ff9a6f..43ada6c 100644
--- a/@dasig/components/Input.tsx
+++ b/@dasig/components/Input.tsx
@@ -21,7 +21,7 @@ export default (props: Props) => {
 
   return (
     <>
-      <input class="input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
+      <input class="dasig-input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
     </>
   )
 }
diff --git a/@dasig/components/Padding.tsx b/@dasig/components/Padding.tsx
index b18c8f6..58539af 100644
--- a/@dasig/components/Padding.tsx
+++ b/@dasig/components/Padding.tsx
@@ -1,4 +1,4 @@
-import { type JSXElement } from 'solid-js'
+import type { JSXElement } from 'solid-js'
 
 interface Props {
   left: number
diff --git a/@dasig/components/Page.tsx b/@dasig/components/Page.tsx
index de14c7d..a953572 100644
--- a/@dasig/components/Page.tsx
+++ b/@dasig/components/Page.tsx
@@ -3,7 +3,7 @@ import { Show } from 'solid-js'
 
 interface Props {
   children?: any
-  alignment?: 'row' | 'column'
+  alignment?: 'dasig-page-row' | 'dasig-page-column'
 }
 
 export default (props: Props) => {
@@ -13,7 +13,7 @@ export default (props: Props) => {
         <main class={props.alignment}>{props.children}</main>
       </Show>
       <Show when={!props.alignment}>
-        <main class="page">{props.children}</main>
+        <main class="dasig-page">{props.children}</main>
       </Show>
     </>
   )
diff --git a/@dasig/components/Row.tsx b/@dasig/components/Row.tsx
index d560e8b..65df878 100644
--- a/@dasig/components/Row.tsx
+++ b/@dasig/components/Row.tsx
@@ -11,13 +11,13 @@ export default (props: Props) => {
   return (
     <>
       <Show when={props.gap}>
-        <section class={`row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+        <section class={`dasig-row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
           {props.children}
         </section>
       </Show>
 
       <Show when={!props.gap}>
-        <section class={`row-${props.content || 'center'}`}>{props.children}</section>
+        <section class={`dasig-row-${props.content || 'center'}`}>{props.children}</section>
       </Show>
     </>
   )
diff --git a/@dasig/images/logo.avif b/@dasig/images/logo.avif
new file mode 100644
index 0000000..dc7b89e
Binary files /dev/null and b/@dasig/images/logo.avif differ
diff --git a/@dasig/images/logo.webp b/@dasig/images/logo.webp
new file mode 100644
index 0000000..484b34f
Binary files /dev/null and b/@dasig/images/logo.webp differ
diff --git a/@dasig/index.ts b/@dasig/index.ts
index daa0266..916a74a 100644
--- a/@dasig/index.ts
+++ b/@dasig/index.ts
@@ -16,6 +16,6 @@ export { default as Display } from './components/Display'
 export { default as Padding } from './components/Padding'
 export { default as Modal } from './components/Modal'
 
-export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
-export { default as OptimizeImage } from './Optimizers/OptimizeImage'
-export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'
+// export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
+// export { default as OptimizeImage } from './Optimizers/OptimizeImage'
+// export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'
diff --git a/@dasig/scripts/node/generateFavicon.ts b/@dasig/scripts/node/generateFavicon.ts
index 6400634..e948f4e 100644
--- a/@dasig/scripts/node/generateFavicon.ts
+++ b/@dasig/scripts/node/generateFavicon.ts
@@ -9,7 +9,7 @@ try {
   const config = toml.parse(fs.readFileSync("configs/config.site.toml", "utf8"));
 
 	if (fs.existsSync(dirPath)) {
-		const inputSrc = "./src/assets/images/favicon.png";
+		const inputSrc = "./src/images/favicon.png";
 		const favicon = dirPath + "/favicon.png";
 		const chrome192 = dirPath + "/android-chrome-192x192.png";
 		const chrome512 = dirPath + "/android-chrome-512x512.png";
diff --git a/@dasig/scripts/node/optimizeBackground.ts b/@dasig/scripts/node/optimizeBackground.ts
new file mode 100644
index 0000000..a3717ed
--- /dev/null
+++ b/@dasig/scripts/node/optimizeBackground.ts
@@ -0,0 +1,23 @@
+import { consola } from "consola";
+import sharp from "sharp";
+
+(async () => {
+	try {
+    const inputSrc = 'src/images/background.png'
+    const webpOutput = "./@dasig/images/background.webp"
+    const avifOutput = "./@dasig/images/background.avif"
+
+    const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(1920).toBuffer()
+    await sharp(avifBuffer).toFile(avifOutput)
+    consola.success('Background successfully optimized in Avif');
+
+    const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(1920).toBuffer()
+    await sharp(webpBuffer).toFile(webpOutput)
+    consola.success('Background successfully optimized in Webp');
+
+	} catch (error: any) {
+		consola.error("Error optimizing background:", error);
+		if (error.message.includes("missing"))
+			consola.error(`${name} could not be found on image folder`);
+	}
+})();
diff --git a/@dasig/scripts/node/optimizeImage.ts b/@dasig/scripts/node/optimizeImage.ts
index c12eed1..ba06f43 100644
--- a/@dasig/scripts/node/optimizeImage.ts
+++ b/@dasig/scripts/node/optimizeImage.ts
@@ -26,14 +26,14 @@ import { hideBin } from "yargs/helpers";
 		const avifOutputPath = `./@dasig/images/${name.toString().split(".").slice(0, -1).join(".")}.avif`;
 		const webpOutputPath = `./@dasig/images/${name.toString().split(".").slice(0, -1).join(".")}.webp`;
 
-		const avifBuffer = await sharp(`./src/assets/images/${name}`)
+		const avifBuffer = await sharp(`./src/images/${name}`)
 			.avif({ quality: 60 })
 			.resize(size)
 			.toBuffer();
 		await sharp(avifBuffer).toFile(avifOutputPath);
 		consola.success(`${name} successfully optimized in Avif`);
 
-		const webpBuffer = await sharp(`./src/assets/images/${name}`)
+		const webpBuffer = await sharp(`./src/images/${name}`)
 			.webp({ quality: 75 })
 			.resize(size)
 			.toBuffer();
diff --git a/@dasig/scripts/node/optimizeLogo.ts b/@dasig/scripts/node/optimizeLogo.ts
index 5a5c75c..c80c8f4 100644
--- a/@dasig/scripts/node/optimizeLogo.ts
+++ b/@dasig/scripts/node/optimizeLogo.ts
@@ -15,7 +15,7 @@ import { hideBin } from "yargs/helpers";
 	try {
 		const webpImage = "./@dasig/images/logo.webp";
 		const avifImage = "./@dasig/images/logo.avif";
-		const inputSrc = "./src/assets/images/logo.png";
+		const inputSrc = "./src/images/logo.png";
 
 		const avifBuffer = await sharp(inputSrc)
 			.avif({ quality: 60 })
diff --git a/@dasig/styles/Box.sass b/@dasig/styles/Box.sass
index 17165bb..e47d9d8 100644
--- a/@dasig/styles/Box.sass
+++ b/@dasig/styles/Box.sass
@@ -1,6 +1,6 @@
-.box
+.dasig-box
   padding: 1rem
 
-.curvedbox
-  @extend .box
+.dasig-curvedbox
+  @extend .dasig-box
   border-radius: 8px
diff --git a/@dasig/styles/Button.sass b/@dasig/styles/Button.sass
index 8765cfe..b350827 100644
--- a/@dasig/styles/Button.sass
+++ b/@dasig/styles/Button.sass
@@ -36,7 +36,7 @@ $bootstrapInfo: rgb(49, 210, 242)
 $bootstrapLight: rgb(211, 212, 213)
 $bootstrapDark: rgb(33, 37, 41)
 
-.button
+.dasig-button
   background-color: $primaryColor
   border: none
   color: white
@@ -56,7 +56,7 @@ $bootstrapDark: rgb(33, 37, 41)
     transform: scale(0.95)
 
 .bu-primary
-  @extend .button
+  @extend .dasig-button
   font-family: fonts.$Inter
   background-color: $bulmaPrimary
   color: $bulmaPrimaryText
@@ -145,7 +145,7 @@ $bootstrapDark: rgb(33, 37, 41)
     text-decoration: underline
 
 .bo-primary
-  @extend .button
+  @extend .dasig-button
   font-family: 'Segoe UI', fonts.$Roboto
   background-color: $bootstrapPrimary
   color: $bootstrapTextLight
diff --git a/@dasig/styles/Column.sass b/@dasig/styles/Column.sass
index b26f108..5ec93db 100644
--- a/@dasig/styles/Column.sass
+++ b/@dasig/styles/Column.sass
@@ -1,4 +1,4 @@
-.column-top
+.dasig-column-top
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -6,7 +6,7 @@
   align-items: center
   align-content: center
 
-.column-center
+.dasig-column-center
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -14,7 +14,7 @@
   align-items: center
   align-content: center
 
-.column-right
+.dasig-column-right
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -22,7 +22,7 @@
   align-items: center
   align-content: center
 
-.column-split
+.dasig-column-split
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -30,7 +30,7 @@
   align-items: center
   align-content: center
 
-.column-spaced
+.dasig-column-spaced
   display: flex
   flex-direction: column
   flex-wrap: wrap
diff --git a/@dasig/styles/Footer.sass b/@dasig/styles/Footer.sass
index 04c87c9..25ad264 100644
--- a/@dasig/styles/Footer.sass
+++ b/@dasig/styles/Footer.sass
@@ -1,6 +1,6 @@
 @use '../../configs/design/sizes' as view
 
-.footer
+.dasig-footer
   padding: 1rem 0
   margin: 0 2rem
   position: fixed
diff --git a/@dasig/styles/Input.sass b/@dasig/styles/Input.sass
index 391937c..49d7d13 100644
--- a/@dasig/styles/Input.sass
+++ b/@dasig/styles/Input.sass
@@ -1,4 +1,4 @@
-.input
+.dasig-input
   font-size: 1rem
   padding: 0.5rem 1rem
   width: 100%
diff --git a/@dasig/styles/Page.sass b/@dasig/styles/Page.sass
index 4f6e85d..15db6ad 100644
--- a/@dasig/styles/Page.sass
+++ b/@dasig/styles/Page.sass
@@ -1,13 +1,13 @@
-.page
+.dasig-page
   margin: 2rem
   height: auto
   min-height: 90vh
 
-.column
-  @extend .page
+.dasig-page-column
+  @extend .dasig-page
   display: flex
   flex-direction: column
 
-.row
-  @extend .column
+.dasig-page-row
+  @extend .dasig-page
   flex-direction: row
diff --git a/@dasig/styles/Row.sass b/@dasig/styles/Row.sass
index 6162bbe..53a5fc7 100644
--- a/@dasig/styles/Row.sass
+++ b/@dasig/styles/Row.sass
@@ -1,4 +1,4 @@
-.row-left
+.dasig-row-left
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -6,7 +6,7 @@
   align-items: center
   align-content: center
 
-.row-center
+.dasig-row-center
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -14,7 +14,7 @@
   align-items: center
   align-content: center
 
-.row-right
+.dasig-row-right
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -22,7 +22,7 @@
   align-items: center
   align-content: center
 
-.row-split
+.dasig-row-split
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -30,7 +30,7 @@
   align-items: center
   align-content: center
 
-.row-spaced
+.dasig-row-spaced
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -38,7 +38,7 @@
   align-items: center
   align-content: center
 
-.row-even
+.dasig-row-even
   display: flex
   flex-direction: row
   flex-wrap: wrap
diff --git a/Makefile b/Makefile
index 62ab4b0..117d562 100644
--- a/Makefile
+++ b/Makefile
@@ -26,3 +26,6 @@ logo:
 
 image:
 	node ./@dasig/scripts/node/optimizeImage.ts --name $(name) --size $(size)
+
+background:
+	node ./@dasig/scripts/node/optimizeBackground.ts
diff --git a/README.md b/README.md
index 299c16a..8362668 100644
--- a/README.md
+++ b/README.md
@@ -1,100 +1,7 @@
-![FWT Logo](fwt/images/logo.avif)
+<div align=center>
 
-# Fast WebApp Template
+# DASIG - ASTRO
 
-## How to Use
+An architecture framework for pure speed static website developemnt
 
-#### Clone the Repo
-
-```
-git clone --depth 1 https://git.patalcala.com/patalcala9/fwt.git <project-name>
-```
-
-#### Navigate to the project
-
-```
-cd <project-name>
-```
-
-#### Refresh GIT
-
-```
-sudo rm -rf .git
-git init
-```
-
-#### Install Depedencies
-
-```
-pnpm install
-```
-
-#### Make sure to update the dependencies first
-
-```
-pnpm update
-```
-
-## To Use Background
-
-Place your background image in `assets/images/background.avif` or `assets/images/background.webp`.
-
-Then, enable by adding `<Background image />` or `<Background color="#123456">`
-
-## How to Run
-
-```
-pnpm dev
-```
-
-## How to Deploy
-
-### Standard
-
-```
-pnpm build
-```
-
-### Docker
-
-#### Edit name and port on docker-compose.yml
-
-```
-sudo vim docker-compose.yml
-```
-
-#### Run Docker Compose
-
-```
-docker compose up -d
-```
-
-### Podman
-
-#### Run Podman Compose
-
-```
-podman-compose up -d
-```
-
-### Podman Quadlet
-
-#### Edit Quadlet Container
-
-```
-sudo vim quadlet/quadlet.container
-```
-
-#### Copy and Rename the Quadlet to proper directory
-
-```
-mkdir -p ~/.config/containers/systemd/
-sudo cp quadlet/quadlet.container ~/.config/containers/systemd/<name>.container
-```
-
-#### Start at Systemd
-
-```
-systemctl --user daemon-reload
-systemctl --user start <name>
-```
+</div>
diff --git a/podman.container b/podman.container
index ef4590e..dee0e75 100644
--- a/podman.container
+++ b/podman.container
@@ -1,10 +1,10 @@
 [Unit]
-Description=FWT
+Description=DASIG-ASTRO
 
 [Container]
-ContainerName=fwt
-Image=localhost/fwt
-PublishPort=8080:8080
+ContainerName=dasig-astro
+Image=localhost/dasig-astro
+PublishPort=4321:4321
 
 [Service]
 Restart=always
diff --git a/src/images/background.png b/src/images/background.png
new file mode 100644
index 0000000..da8aba0
Binary files /dev/null and b/src/images/background.png differ
diff --git a/src/images/favicon.png b/src/images/favicon.png
new file mode 100644
index 0000000..4d1e48b
Binary files /dev/null and b/src/images/favicon.png differ
diff --git a/src/images/logo.png b/src/images/logo.png
new file mode 100644
index 0000000..4d1e48b
Binary files /dev/null and b/src/images/logo.png differ
diff --git a/src/images/sample.png b/src/images/sample.png
new file mode 100644
index 0000000..a8f6f60
Binary files /dev/null and b/src/images/sample.png differ