diff --git a/fwt/Background.tsx b/fwt/components/Background.tsx
similarity index 87%
rename from fwt/Background.tsx
rename to fwt/components/Background.tsx
index 77648b2..e10af59 100644
--- a/fwt/Background.tsx
+++ b/fwt/components/Background.tsx
@@ -1,9 +1,9 @@
-import './styles/Background.sass'
+import '../styles/Background.sass'
 import { Show, createSignal } from 'solid-js'
 import fs from 'fs'
-import webpPath from './images/background.webp'
-import avifPath from './images/background.avif'
-import noBackground from './images/no-background.webp'
+import webpPath from '../images/background.webp'
+import avifPath from '../images/background.avif'
+import noBackground from '../images/no-background.webp'
 
 interface Props {
   image?: boolean
diff --git a/fwt/Box.tsx b/fwt/components/Box.tsx
similarity index 93%
rename from fwt/Box.tsx
rename to fwt/components/Box.tsx
index b897376..d27815f 100644
--- a/fwt/Box.tsx
+++ b/fwt/components/Box.tsx
@@ -1,4 +1,4 @@
-import './styles/Box.sass'
+import '../styles/Box.sass'
 import { type JSXElement, createMemo } from 'solid-js'
 
 interface Props {
diff --git a/fwt/Button.tsx b/fwt/components/Button.tsx
similarity index 98%
rename from fwt/Button.tsx
rename to fwt/components/Button.tsx
index b8367ff..19fcb26 100644
--- a/fwt/Button.tsx
+++ b/fwt/components/Button.tsx
@@ -1,4 +1,4 @@
-import './styles/Button.sass'
+import '../styles/Button.sass'
 import { Show, Switch, Match } from 'solid-js'
 
 interface Props {
diff --git a/fwt/Column.tsx b/fwt/components/Column.tsx
similarity index 92%
rename from fwt/Column.tsx
rename to fwt/components/Column.tsx
index d59ac96..e683a7c 100644
--- a/fwt/Column.tsx
+++ b/fwt/components/Column.tsx
@@ -1,4 +1,4 @@
-import './styles/Column.sass'
+import '../styles/Column.sass'
 import type { JSXElement } from 'solid-js'
 
 interface Props {
diff --git a/fwt/Copyright.tsx b/fwt/components/Copyright.tsx
similarity index 100%
rename from fwt/Copyright.tsx
rename to fwt/components/Copyright.tsx
diff --git a/fwt/Footer.tsx b/fwt/components/Footer.tsx
similarity index 88%
rename from fwt/Footer.tsx
rename to fwt/components/Footer.tsx
index 00593b6..0f00944 100644
--- a/fwt/Footer.tsx
+++ b/fwt/components/Footer.tsx
@@ -1,4 +1,4 @@
-import './styles/Footer.sass'
+import '../styles/Footer.sass'
 import type { JSXElement } from 'solid-js'
 
 interface Props {
diff --git a/fwt/Form.tsx b/fwt/components/Form.tsx
similarity index 90%
rename from fwt/Form.tsx
rename to fwt/components/Form.tsx
index d0e63a9..28c00a9 100644
--- a/fwt/Form.tsx
+++ b/fwt/components/Form.tsx
@@ -1,4 +1,4 @@
-import './styles/Form.sass'
+import '../styles/Form.sass'
 import type { JSXElement } from 'solid-js'
 
 interface Props {
diff --git a/fwt/HTML.tsx b/fwt/components/HTML.tsx
similarity index 91%
rename from fwt/HTML.tsx
rename to fwt/components/HTML.tsx
index 01878fe..bdd446a 100644
--- a/fwt/HTML.tsx
+++ b/fwt/components/HTML.tsx
@@ -1,7 +1,7 @@
-import './styles/HTML.sass'
+import '../styles/HTML.sass'
 import { type JSXElement, Show } from 'solid-js'
-import background1 from './images/background.avif'
-import background2 from './images/background.webp'
+import background1 from '../images/background.avif'
+import background2 from '../images/background.webp'
 
 interface Props {
   title: string
diff --git a/fwt/Image.tsx b/fwt/components/Image.tsx
similarity index 100%
rename from fwt/Image.tsx
rename to fwt/components/Image.tsx
diff --git a/fwt/Input.tsx b/fwt/components/Input.tsx
similarity index 95%
rename from fwt/Input.tsx
rename to fwt/components/Input.tsx
index aa40f02..2ff9a6f 100644
--- a/fwt/Input.tsx
+++ b/fwt/components/Input.tsx
@@ -1,4 +1,4 @@
-import './styles/Input.sass'
+import '../styles/Input.sass'
 import { createSignal } from 'solid-js'
 
 interface Props {
diff --git a/fwt/Link.tsx b/fwt/components/Link.tsx
similarity index 88%
rename from fwt/Link.tsx
rename to fwt/components/Link.tsx
index c5b1441..cdd5ffc 100644
--- a/fwt/Link.tsx
+++ b/fwt/components/Link.tsx
@@ -1,4 +1,4 @@
-import './styles/Link.sass'
+import '../styles/Link.sass'
 
 interface Props {
   to: string
diff --git a/fwt/Logo.tsx b/fwt/components/Logo.tsx
similarity index 80%
rename from fwt/Logo.tsx
rename to fwt/components/Logo.tsx
index 46d053e..ba1c8d6 100644
--- a/fwt/Logo.tsx
+++ b/fwt/components/Logo.tsx
@@ -1,5 +1,5 @@
-import webpPath from './images/logo.webp'
-import avifPath from './images/logo.avif'
+import webpPath from '../images/logo.webp'
+import avifPath from '../images/logo.avif'
 
 interface Props {
   size?: number
diff --git a/fwt/Navbar.tsx b/fwt/components/Navbar.tsx
similarity index 90%
rename from fwt/Navbar.tsx
rename to fwt/components/Navbar.tsx
index b207ef8..f87864b 100644
--- a/fwt/Navbar.tsx
+++ b/fwt/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import './styles/Navbar.sass'
+import '../styles/Navbar.sass'
 import Row from './Row'
 
 interface Props {
diff --git a/fwt/Page.tsx b/fwt/components/Page.tsx
similarity index 92%
rename from fwt/Page.tsx
rename to fwt/components/Page.tsx
index da9a2d8..de14c7d 100644
--- a/fwt/Page.tsx
+++ b/fwt/components/Page.tsx
@@ -1,4 +1,4 @@
-import './styles/Page.sass'
+import '../styles/Page.sass'
 import { Show } from 'solid-js'
 
 interface Props {
diff --git a/fwt/Row.tsx b/fwt/components/Row.tsx
similarity index 95%
rename from fwt/Row.tsx
rename to fwt/components/Row.tsx
index 8eaf852..d560e8b 100644
--- a/fwt/Row.tsx
+++ b/fwt/components/Row.tsx
@@ -1,4 +1,4 @@
-import './styles/Row.sass'
+import '../styles/Row.sass'
 import { Show, type JSXElement } from 'solid-js'
 
 interface Props {
diff --git a/fwt/index.ts b/fwt/index.ts
new file mode 100644
index 0000000..3ef241e
--- /dev/null
+++ b/fwt/index.ts
@@ -0,0 +1,18 @@
+export { default as Background } from './components/Background'
+export { default as Box } from './components/Box'
+export { default as Button } from './components/Button'
+export { default as Column } from './components/Column'
+export { default as Copyright } from './components/Copyright'
+export { default as Footer } from './components/Footer'
+export { default as Form } from './components/Form'
+export { default as HTML } from './components/HTML'
+export { default as Image } from './components/Image'
+export { default as Link } from './components/Link'
+export { default as Logo } from './components/Logo'
+export { default as Navbar } from './components/Navbar'
+export { default as Page } from './components/Page'
+export { default as Row } from './components/Row'
+
+export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
+export { default as OptimizeImage } from './Optimizers/OptimizeImage'
+export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index e35b5e6..aa0d701 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -1,4 +1,4 @@
-import Input from '../../../fwt/Input'
+import Input from '../../../fwt/components/Input'
 import { createSignal } from 'solid-js'
 
 const [sample, setSample] = createSignal('')
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 32f595f..4430d0b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,9 +4,7 @@ const { title } = Astro.props
 const websiteName = 'Template'
 const websiteDescription = 'This is just a template.'
 
-import Background from '../../fwt/Background'
-// import OptimizeBackground from '../../fwt/components/Optimizer/OptimizeBackground'
-import HTML from '../../fwt/HTML'
+import { Background, HTML } from '../../fwt'
 ---
 
 <HTML title={title} name={websiteName} description={websiteDescription} font="inter">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 39a888d..581d760 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,18 +1,9 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import Button from '../../fwt/Button'
-import Logo from '../../fwt/Logo'
-// import OptimizeLogo from '../../fwt/components/Optimizer/OptimizeLogo'
-// import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage'
-import Link from '../../fwt/Link'
+import { Button, Logo, Link, Page, Footer, Row, Image, Copyright } from '../../fwt/'
 import Counter from '../components/Counter/Counter'
-import Page from '../../fwt/Page'
-import Footer from '../../fwt/Footer'
-import Row from '../../fwt/Row'
-import Image from '../../fwt/Image'
 import PA1 from '../../fwt/images/pat-alcala.avif'
 import PA2 from '../../fwt/images/pat-alcala.webp'
-import Copyright from '../../fwt/Copyright'
 
 // const sample = import.meta.env.SAMPLE
 ---
diff --git a/src/pages/next.astro b/src/pages/next.astro
index e331521..310064b 100644
--- a/src/pages/next.astro
+++ b/src/pages/next.astro
@@ -1,13 +1,8 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import Button from '../../fwt/Button'
-import Image from '../../fwt/Image'
-import Page from '../../fwt/Page'
+import { Button, Page, Row, Image } from '../../fwt'
 import sample1 from '../../fwt/images/sample.avif'
 import sample2 from '../../fwt/images/sample.webp'
-// import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage'
-import Row from '../../fwt/Row'
-// import Column from '../../fwt/components/Column/Column'
 ---
 
 <Layout title="Home">