diff --git a/Makefile b/Makefile
index 5aee3c8..de15042 100644
--- a/Makefile
+++ b/Makefile
@@ -29,3 +29,6 @@ logo:
 
 image:
 	cd frontend && bun ./@dasig/scripts/node/optimizeImage.ts --name $(name) --size $(size)
+
+background:
+	cd frontend && bun ./@dasig/scripts/node/optimizeImage.ts
\ No newline at end of file
diff --git a/README.md b/README.md
index dd861af..7ab2578 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 <div align=center>
 
-# DASIG
+# DASIG - SOLID
 
 An architecture framework for pure speed fullstack developemnt
 
diff --git a/frontend/@dasig/components/Box.tsx b/frontend/@dasig/components/Box.tsx
index c48cebc..9065e62 100644
--- a/frontend/@dasig/components/Box.tsx
+++ b/frontend/@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
diff --git a/frontend/@dasig/components/Column.tsx b/frontend/@dasig/components/Column.tsx
index 9126208..4d4d643 100644
--- a/frontend/@dasig/components/Column.tsx
+++ b/frontend/@dasig/components/Column.tsx
@@ -9,10 +9,8 @@ interface Props {
 
 export default (props: Props) => {
   return (
-    <>
-      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
-        {props.children}
-      </section>
-    </>
+    <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+      {props.children}
+    </section>
   )
 }
diff --git a/frontend/@dasig/components/Copyright.tsx b/frontend/@dasig/components/Copyright.tsx
index f221fc2..76be92f 100644
--- a/frontend/@dasig/components/Copyright.tsx
+++ b/frontend/@dasig/components/Copyright.tsx
@@ -1,11 +1,12 @@
-import { $companyName, $copyRightYear } from "../../configs/config.site.ts";
+import * as fs from 'node:fs'
+import * as toml from 'toml'
+
+const config = toml.parse(fs.readFileSync('configs/config.site.toml', 'utf8'))
 
 export default () => {
   return (
-    <>
-      <span>
-        Copyright © {$copyRightYear.get()} {$companyName.get()} All Rights Reserved.
-      </span>
-    </>
+    <span>
+      Copyright © {config.copyright.year} {config.copyright.name} All Rights Reserved.
+    </span>
   )
 }
diff --git a/frontend/@dasig/components/Display.tsx b/frontend/@dasig/components/Display.tsx
index 6bb68f3..cf15201 100644
--- a/frontend/@dasig/components/Display.tsx
+++ b/frontend/@dasig/components/Display.tsx
@@ -10,32 +10,30 @@ interface Props {
 
 export default (props: Props) => {
   return (
-    <>
-      <Switch>
-        <Match when={props.desktop && !props.tablet && !props.mobile}>
-          <div class="on-desktop-only">{props.children}</div>
-        </Match>
+    <Switch>
+      <Match when={props.desktop && !props.tablet && !props.mobile}>
+        <div class="on-desktop-only">{props.children}</div>
+      </Match>
 
-        <Match when={!props.desktop && props.tablet && !props.mobile}>
-          <div class="on-tablet-only">{props.children}</div>
-        </Match>
+      <Match when={!props.desktop && props.tablet && !props.mobile}>
+        <div class="on-tablet-only">{props.children}</div>
+      </Match>
 
-        <Match when={!props.desktop && !props.tablet && props.mobile}>
-          <div class="on-mobile-only">{props.children}</div>
-        </Match>
+      <Match when={!props.desktop && !props.tablet && props.mobile}>
+        <div class="on-mobile-only">{props.children}</div>
+      </Match>
 
-        <Match when={props.desktop && props.tablet && !props.mobile}>
-          <div class="on-desktop-tablet-only">{props.children}</div>
-        </Match>
+      <Match when={props.desktop && props.tablet && !props.mobile}>
+        <div class="on-desktop-tablet-only">{props.children}</div>
+      </Match>
 
-        <Match when={props.desktop && !props.tablet && props.mobile}>
-          <div class="on-desktop-mobile-only">{props.children}</div>
-        </Match>
+      <Match when={props.desktop && !props.tablet && props.mobile}>
+        <div class="on-desktop-mobile-only">{props.children}</div>
+      </Match>
 
-        <Match when={!props.desktop && props.tablet && props.mobile}>
-          <div class="on-tablet-mobile-only">{props.children}</div>
-        </Match>
-      </Switch>
-    </>
+      <Match when={!props.desktop && props.tablet && props.mobile}>
+        <div class="on-tablet-mobile-only">{props.children}</div>
+      </Match>
+    </Switch>
   )
 }
diff --git a/frontend/@dasig/components/HTML.tsx b/frontend/@dasig/components/HTML.tsx
index 150ed6f..a44e27e 100644
--- a/frontend/@dasig/components/HTML.tsx
+++ b/frontend/@dasig/components/HTML.tsx
@@ -35,11 +35,12 @@ export default (props: Props) => {
             name="viewport"
             content="width=device-width, initial-scale=1, viewport-fit=cover"
           />
-          <meta name="name" content={props.name} />
-          <meta name="description" content={props.description} />
-          <meta name="title" property="og:title" content={props.name} />
+          <meta name="name" content={config.website.name} />
+          <meta name="description" content={config.website.description} />
+          <meta name="title" property="og:title" content={config.website.name} />
           <meta name="keywords" content="HTML, CSS, JavaScript" />
-          <meta name="developer" content={props.author} />
+          <meta name="developer" content={config.website.developer} />
+          <meta name="designer" content={config.website.designer} />
           <meta property="og:description" content={props.description} />
           <meta property="og:type" content="website" />
           <link rel="icon" type="image/png" href="/favicon.png" />
diff --git a/frontend/@dasig/components/Padding.tsx b/frontend/@dasig/components/Padding.tsx
index d55e3c1..0164f7f 100644
--- a/frontend/@dasig/components/Padding.tsx
+++ b/frontend/@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/frontend/@dasig/scripts/node/generateFavicon.ts b/frontend/@dasig/scripts/node/generateFavicon.ts
index 69704e1..638844e 100644
--- a/frontend/@dasig/scripts/node/generateFavicon.ts
+++ b/frontend/@dasig/scripts/node/generateFavicon.ts
@@ -11,7 +11,7 @@ import * as toml from 'toml'
 try {
 	const dirPath = path.resolve("./public");
   const config = toml.parse(fs.readFileSync("configs/config.site.toml", "utf8"));
-  
+
 	if (fs.existsSync(dirPath)) {
 		const inputSrc = "./src/images/favicon.png";
 		const favicon = dirPath + "/favicon.png";
diff --git a/frontend/@dasig/scripts/node/optimizeBackground.ts b/frontend/@dasig/scripts/node/optimizeBackground.ts
new file mode 100644
index 0000000..a3717ed
--- /dev/null
+++ b/frontend/@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/frontend/@dasig/styles/Box.sass b/frontend/@dasig/styles/Box.sass
index 17165bb..e47d9d8 100644
--- a/frontend/@dasig/styles/Box.sass
+++ b/frontend/@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/frontend/configs/config.site.toml b/frontend/configs/config.site.toml
index 6597638..6afa40f 100644
--- a/frontend/configs/config.site.toml
+++ b/frontend/configs/config.site.toml
@@ -2,6 +2,8 @@
 name = "Dasig"
 short_name = "Dasig"
 description = "An architectural framework for pure speed fullstack development"
+developer = "Pat Alcala"
+designer = "Pat Alcala"
 
 [font]
 name = "inter"