diff --git a/frontend/@dasig/components/Footer.tsx b/frontend/@dasig/components/Footer.tsx
new file mode 100644
index 0000000..f757fe6
--- /dev/null
+++ b/frontend/@dasig/components/Footer.tsx
@@ -0,0 +1,16 @@
+import '../styles/Footer.sass'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <footer class="dasig-footer">
+        <small>{props.children}</small>
+      </footer>
+    </>
+  )
+}
diff --git a/frontend/@dasig/components/Row.tsx b/frontend/@dasig/components/Row.tsx
new file mode 100644
index 0000000..65df878
--- /dev/null
+++ b/frontend/@dasig/components/Row.tsx
@@ -0,0 +1,24 @@
+import '../styles/Row.sass'
+import { Show, type JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.gap}>
+        <section class={`dasig-row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+          {props.children}
+        </section>
+      </Show>
+
+      <Show when={!props.gap}>
+        <section class={`dasig-row-${props.content || 'center'}`}>{props.children}</section>
+      </Show>
+    </>
+  )
+}
diff --git a/frontend/configs/design.components.sass b/frontend/configs/design.components.sass
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/configs/design.site.sass b/frontend/configs/design.site.sass
deleted file mode 100644
index 6aa6b27..0000000
--- a/frontend/configs/design.site.sass
+++ /dev/null
@@ -1,6 +0,0 @@
-$light-background: #e2e7f2
-$dark-background: #0a152a
-
-$mobile: 575.98px
-$tablet: 768px
-$desktop: 1440px
diff --git a/frontend/configs/design/colors.sass b/frontend/configs/design/colors.sass
new file mode 100644
index 0000000..2688ea6
--- /dev/null
+++ b/frontend/configs/design/colors.sass
@@ -0,0 +1,2 @@
+$white: #f4f3f2
+$black: #0A0A0A
diff --git a/frontend/configs/design/site.sass b/frontend/configs/design/site.sass
new file mode 100644
index 0000000..84f0db2
--- /dev/null
+++ b/frontend/configs/design/site.sass
@@ -0,0 +1,2 @@
+$light-background: #ced9f1
+$dark-background: #131d2e
diff --git a/frontend/configs/design/sizes.sass b/frontend/configs/design/sizes.sass
new file mode 100644
index 0000000..2575248
--- /dev/null
+++ b/frontend/configs/design/sizes.sass
@@ -0,0 +1,3 @@
+$mobile: 575.98px
+$tablet: 768px
+$desktop: 1440px
diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
index 687a891..28d6896 100644
--- a/frontend/src/app.tsx
+++ b/frontend/src/app.tsx
@@ -1,4 +1,4 @@
-import { MetaProvider, Title } from '@solidjs/meta'
+import { MetaProvider } from '@solidjs/meta'
 import { Router } from '@solidjs/router'
 import { FileRoutes } from '@solidjs/start/router'
 import { Suspense } from 'solid-js'
@@ -9,10 +9,6 @@ export default () => {
     <Router
       root={(props) => (
         <MetaProvider>
-          <Title>Dasig - Solid</Title>
-
-          {/* <a href="/">Index</a>
-          <a href="/about">About</a> */}
           <Suspense>{props.children}</Suspense>
         </MetaProvider>
       )}
diff --git a/frontend/src/components/Counter.sass b/frontend/src/components/Counter.sass
index 55fd017..233d57d 100644
--- a/frontend/src/components/Counter.sass
+++ b/frontend/src/components/Counter.sass
@@ -1,5 +1,5 @@
 @use 'sass:color'
-@use '../../configs/design.site' as design
+@use '../../configs/design/site' as design
 @use '../styles/functions' as func
 
 .counter
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 871991d..68b71e1 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -6,11 +6,11 @@ import "./index.sass";
 
 export default () => {
   return (
-    <Page title="Dasig - Index">
+    <Page title="Dasig">
       <Column>
         <h1>DASIG</h1>
         <h4 class="text">
-          An architectural framework for pure speed fullstack development
+          An architectural framework for pure speed fullstack development built on top of Solid and Go
         </h4>
         <Counter />
         <Image name="sample" size={500}></Image>
diff --git a/frontend/src/styles/app.sass b/frontend/src/styles/app.sass
index 7cf18cb..40e9ef3 100644
--- a/frontend/src/styles/app.sass
+++ b/frontend/src/styles/app.sass
@@ -1,5 +1,6 @@
 @use './global'
-@use '../../configs/design.site' as design
+@use '../../configs/design/site' as design
+@use '../../configs/design/sizes' as view
 @use 'sass:color'
 
 :root
@@ -28,7 +29,7 @@ h1
   margin: 4rem auto
   max-width: 14rem
 
-  @media (min-width: design.$mobile)
+  @media (min-width: view.$mobile)
     max-width: none
 
 p
@@ -36,5 +37,5 @@ p
   margin: 2rem auto
   line-height: 1.35
 
-  @media (min-width: design.$mobile)
+  @media (min-width: view.$mobile)
     max-width: none
diff --git a/frontend/src/styles/breakpoint.sass b/frontend/src/styles/breakpoint.sass
index f86ffef..e1d5829 100644
--- a/frontend/src/styles/breakpoint.sass
+++ b/frontend/src/styles/breakpoint.sass
@@ -1,4 +1,4 @@
-@use '../../configs/design.site' as design
+@use '../../configs/design/sizes' as design
 
 .on-desktop-only
   @media only screen and (min-width: 0px) and (max-width: design.$desktop)