diff --git a/@dasig/components/Button.astro b/@dasig/components/Button.astro
new file mode 100644
index 0000000..f76c940
--- /dev/null
+++ b/@dasig/components/Button.astro
@@ -0,0 +1,297 @@
+---
+interface Props {
+  label?: string
+  to?: string
+  onClick?: () => void
+  edges?: 'curved' | 'rounded' | 'flat'
+  design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
+  submit?: boolean
+  newtab?: boolean
+}
+
+const getBorderRadius = (edge: Props['edges']) => {
+  switch (edge) {
+    case 'curved':
+      return 'border-radius: 6px'
+    case 'rounded':
+      return 'border-radius: 32px'
+    case 'flat':
+      return 'border-radius: 0'
+    default:
+      return 'border-radius: 0'
+  }
+}
+
+const { label, to, edges, design, submit, newtab } = Astro.props
+const borderRadius = getBorderRadius(edges)
+---
+
+<script>
+  const button = document.getElementById('button')!
+  button.addEventListener('click', () => {
+    onClick
+  })
+</script>
+
+{
+  to ? (
+    design ? (
+      <a href={to} aria-label={label} rel="noopener" target={newtab ? '_blank' : '_self'} data-astro-prefetch>
+        <button class={design} style={borderRadius}>
+          {label || 'Click Me!'}
+        </button>
+      </a>
+    ) : (
+      <a href={to} aria-label={label} rel="noopener" target={newtab ? '_blank' : '_self'} data-astro-prefetch>
+        <button class="dasig-button" style={borderRadius}>
+          {label || 'Click Me!'}
+        </button>
+      </a>
+    )
+  ) : design ? (
+    submit ? (
+      <button class={design} type="submit" style={borderRadius}>
+        {label || 'Click Me!'}
+      </button>
+    ) : (
+      <button class={design} id="button" style={borderRadius}>
+        {label || 'Click Me!'}
+      </button>
+    )
+  ) : submit ? (
+    <button class="dasig-button" type="submit" style={borderRadius}>
+      {label || 'Click Me!'}
+    </button>
+  ) : (
+    <button class="dasig-button" id="button" style={borderRadius}>
+      {label || 'Click Me!'}
+    </button>
+  )
+}
+
+<style lang="sass">
+  @use '/src/styles/fonts.sass' as fonts
+  @use 'sass:color'
+
+  $primaryColor: #0075BB
+
+  $bulmaPrimary: rgb(0, 235, 199)
+  $bulmaPrimaryText: rgb(0, 31, 26)
+  $bulmaLink: rgb(92, 111, 255)
+  $bulmaLinkText: rgb(245, 246, 255)
+  $bulmaInfo: rgb(128, 217, 255)
+  $bulmaInfoText: rgb(0, 36, 51)
+  $bulmaSuccess: rgb(91, 205, 154)
+  $bulmaSuccessText: rgb(10, 31, 21)
+  $bulmaWarning: rgb(255, 191, 41)
+  $bulmaWarningText: rgb(41, 29, 0)
+  $bulmaDanger: rgb(255, 128, 153)
+  $bulmaDangerText: rgb(26, 0, 5)
+  $bulmaLight: rgb(255, 255, 255)
+  $bulmaLightText: rgb(46, 51, 61)
+  $bulmaDark: rgb(57, 63, 76)
+  $bulmaDarkText: rgb(243, 244, 246)
+  $bulmaText: rgb(31, 34, 41)
+  $bulmaTextText: rgb(235, 236, 240)
+  $bulmaGhost: rgba(0,0,0,0)
+  $bulmaGhostText: rgb(66, 88, 255)
+
+  $bootstrapTextLight: rgb(255, 255, 253)
+  $bootstrapTextDark: rgb(0, 0, 2)
+  $bootstrapTextLink: rgb(139, 185, 254)
+  $bootstrapPrimary: rgb(13, 110, 253)
+  $bootstrapSecondary: rgb(92, 99, 106)
+  $bootstrapSuccess: rgb(21, 115, 71)
+  $bootstrapDanger: rgb(187, 45, 59)
+  $bootstrapWarning: rgb(255, 202, 44)
+  $bootstrapInfo: rgb(49, 210, 242)
+  $bootstrapLight: rgb(211, 212, 213)
+  $bootstrapDark: rgb(33, 37, 41)
+
+  .dasig-button
+    background-color: $primaryColor
+    border: none
+    color: white
+    padding: 0.5rem 1.25rem
+    text-align: center
+    text-decoration: none
+    display: inline-block
+    font-size: 1rem
+    font-weight: 500
+    cursor: pointer
+    transition: all 0.2s ease-out
+
+    &:hover
+      background-color: color.adjust($primaryColor, $blackness: 20%)
+
+    &:active
+      transform: scale(0.95)
+
+  .bu-primary
+    @extend .dasig-button
+    font-family: fonts.$Inter
+    background-color: $bulmaPrimary
+    color: $bulmaPrimaryText
+    border: none
+    font-size: 1rem
+    border-radius: 0.375rem
+    font-weight: 500
+    padding: 0.5rem 1.25rem
+    height: 2.5rem
+
+    &:hover
+      background-color: color.adjust($bulmaPrimary, $lightness: 10%)
+
+  .bu-link
+    @extend .bu-primary
+    background-color: $bulmaLink
+    color: $bulmaLinkText
+
+    &:hover
+      background-color: color.adjust($bulmaLink, $lightness: 5%)
+
+  .bu-info
+    @extend .bu-primary
+    background-color: $bulmaInfo
+    color: $bulmaInfoText
+
+    &:hover
+      background-color: color.adjust($bulmaInfo, $lightness: 5%)
+
+  .bu-success
+    @extend .bu-primary
+    background-color: $bulmaSuccess
+    color: $bulmaSuccessText
+
+    &:hover
+      background-color: color.adjust($bulmaSuccess, $lightness: 5%)
+
+  .bu-warning
+    @extend .bu-primary
+    background-color: $bulmaWarning
+    color: $bulmaWarningText
+
+    &:hover
+      background-color: color.adjust($bulmaWarning, $lightness: 5%)
+
+  .bu-danger
+    @extend .bu-primary
+    background-color: $bulmaDanger
+    color: $bulmaDangerText
+
+    &:hover
+      background-color: color.adjust($bulmaDanger, $lightness: 5%)
+
+  .bu-light
+    @extend .bu-primary
+    background-color: $bulmaLight
+    color: $bulmaLightText
+
+    &:hover
+      background-color: color.adjust($bulmaLight, $lightness: 5%)
+
+  .bu-dark
+    @extend .bu-primary
+    background-color: $bulmaDark
+    color: $bulmaDarkText
+
+    &:hover
+      background-color: color.adjust($bulmaDark, $lightness: 5%)
+
+  .bu-text
+    @extend .bu-primary
+    background-color: rgba(0,0,0,0)
+    color: $bulmaTextText
+    text-decoration: underline
+
+    &:hover
+      background-color: hsl(221,14%,14%)
+
+  .bu-ghost
+    @extend .bu-primary
+    background-color: $bulmaGhost
+    color: $bulmaGhostText
+
+    &:hover
+      background-color: transparent
+      text-decoration: underline
+
+  .bo-primary
+    @extend .dasig-button
+    font-family: 'Segoe UI', fonts.$Roboto
+    background-color: $bootstrapPrimary
+    color: $bootstrapTextLight
+    border: none
+    font-size: 1rem
+    border-radius: 0.375rem
+    font-weight: 400
+    padding: 0.5rem 1.25rem
+    height: 2.5rem
+    margin: 0.25rem 0.125rem
+
+    &:hover
+      background-color: color.adjust($bootstrapPrimary, $blackness: 10%)
+
+  .bo-secondary
+    @extend .bo-primary
+    background-color: $bootstrapSecondary
+
+    &:hover
+      background-color: color.adjust($bootstrapSecondary, $blackness: 10%)
+
+  .bo-success
+    @extend .bo-primary
+    background-color: $bootstrapSuccess
+
+    &:hover
+      background-color: color.adjust($bootstrapSuccess, $blackness: 10%)
+
+  .bo-danger
+    @extend .bo-primary
+    background-color: $bootstrapDanger
+
+    &:hover
+      background-color: color.adjust($bootstrapDanger, $blackness: 10%)
+
+  .bo-warning
+    @extend .bo-primary
+    background-color: $bootstrapWarning
+    color: $bootstrapTextDark
+
+    &:hover
+      background-color: color.adjust($bootstrapWarning, $lightness: 5%)
+
+  .bo-info
+    @extend .bo-primary
+    background-color: $bootstrapInfo
+    color: $bootstrapTextDark
+
+    &:hover
+      background-color: color.adjust($bootstrapInfo, $lightness: 5%)
+
+  .bo-light
+    @extend .bo-primary
+    background-color: $bootstrapLight
+    color: $bootstrapTextDark
+
+    &:hover
+      background-color: color.adjust($bootstrapLight, $blackness: 10%)
+
+  .bo-dark
+    @extend .bo-primary
+    background-color: $bootstrapDark
+    // color: $bootstrapTextDark
+
+    &:hover
+      background-color: color.adjust($bootstrapDark, $lightness: 10%)
+
+  .bo-link
+    @extend .bo-primary
+    background-color: transparent
+    color: $bootstrapTextLink
+    text-decoration: underline
+
+    &:hover
+      color: color.adjust($bootstrapTextLink, $lightness: 5%)
+      background-color: transparent
+</style>
diff --git a/@dasig/components/Button.tsx b/@dasig/components/Button.tsx
deleted file mode 100644
index 6ea3901..0000000
--- a/@dasig/components/Button.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import '../styles/Button.sass'
-import { Show, Switch, Match } from 'solid-js'
-
-interface Props {
-  label?: string
-  to?: string
-  onClick?: () => void
-  edges?: 'curved' | 'rounded' | 'flat'
-  design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
-  submit?: boolean
-  newtab?: boolean
-}
-
-const getBorderRadius = (edge: Props['edges']) => {
-  switch (edge) {
-    case 'curved':
-      return 'border-radius: 6px'
-    case 'rounded':
-      return 'border-radius: 32px'
-    case 'flat':
-      return 'border-radius: 0'
-    default:
-      return 'border-radius: 0'
-  }
-}
-
-export default (props: Props) => {
-  const borderRadius = getBorderRadius(props.edges)
-
-  return (
-    <>
-      <Show when={props.to}>
-        <Switch>
-          <Match when={props.design}>
-            <a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
-              <button class={props.design} style={borderRadius}>
-                {props.label || 'Click Me!'}
-              </button>
-            </a>
-          </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="dasig-button" style={borderRadius}>
-                {props.label || 'Click Me!'}
-              </button>
-            </a>
-          </Match>
-        </Switch>
-      </Show>
-
-      <Show when={!props.to}>
-        <Switch>
-          <Match when={props.design}>
-            <Show when={props.submit}>
-              <button class={props.design} type="submit" style={borderRadius}>
-                {props.label || 'Click Me!'}
-              </button>
-            </Show>
-
-            <Show when={!props.submit}>
-              <button class={props.design} onClick={props.onClick} style={borderRadius}>
-                {props.label || 'Click Me!'}
-              </button>
-            </Show>
-          </Match>
-          <Match when={!props.design}>
-            <Show when={props.submit}>
-              <button class="dasig-button" type="submit" style={borderRadius}>
-                {props.label || 'Click Me!'}
-              </button>
-            </Show>
-
-            <Show when={!props.submit}>
-              <button class="dasig-button" onClick={props.onClick} style={borderRadius}>
-                {props.label || 'Click Me!'}
-              </button>
-            </Show>
-          </Match>
-        </Switch>
-      </Show>
-    </>
-  )
-}
diff --git a/@dasig/components/Input.astro b/@dasig/components/Input.astro
new file mode 100644
index 0000000..7086254
--- /dev/null
+++ b/@dasig/components/Input.astro
@@ -0,0 +1,52 @@
+---
+interface Props {
+  placeholder?: string
+  value?: string
+  onChange?: (value: string) => void
+}
+
+const { placeholder, value, onChange } = Astro.props
+
+let inputValue = value
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const newValue = target.value
+  setInputValue(newValue)
+  if (props.onChange) {
+    props.onChange(newValue)
+  }
+}
+---
+
+<input class="dasig-input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
+
+<style lang="sass">
+  .dasig-input
+    font-size: 1rem
+    padding: 0.5rem 1rem
+    width: 100%
+    border: 2px solid #ccc
+    border-radius: 4px
+    outline: none
+    transition: border-color 0.3s, box-shadow 0.3s
+
+    &:focus
+      border-color: #3377AC
+      box-shadow: 0 0 5px rgba(51, 119, 168, 0.3)
+
+    &::placeholder
+      color: #888
+      font-style: italic
+
+    &:disabled
+      background-color: #f0f0f0
+      border-color: #ddd
+
+    &--error
+      border-color: #ff4d4f
+      box-shadow: 0 0 5px rgba(255, 77, 79, 0.3)
+
+      &:focus
+        border-color: #e81123
+</style>
diff --git a/@dasig/components/Input.tsx b/@dasig/components/Input.tsx
deleted file mode 100644
index 43ada6c..0000000
--- a/@dasig/components/Input.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import '../styles/Input.sass'
-import { createSignal } from 'solid-js'
-
-interface Props {
-  placeholder?: string
-  value?: string
-  onChange?: (value: string) => void
-}
-
-export default (props: Props) => {
-  const [inputValue, setInputValue] = createSignal(props.value || '')
-
-  const handleChange = (event: Event) => {
-    const target = event.target as HTMLInputElement
-    const newValue = target.value
-    setInputValue(newValue)
-    if (props.onChange) {
-      props.onChange(newValue)
-    }
-  }
-
-  return (
-    <>
-      <input class="dasig-input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
-    </>
-  )
-}
diff --git a/@dasig/index.ts b/@dasig/index.ts
index cc1ea92..2a62d5c 100644
--- a/@dasig/index.ts
+++ b/@dasig/index.ts
@@ -1,6 +1,6 @@
 export { default as Background } from './components/Background.astro'
 export { default as Box } from './components/Box.astro'
-export { default as Button } from './components/Button'
+export { default as Button } from './components/Button.astro'
 export { default as Column } from './components/Column.astro'
 export { default as Copyright } from './components/Copyright.astro'
 export { default as Footer } from './components/Footer.astro'
@@ -15,6 +15,7 @@ export { default as Row } from './components/Row.astro'
 export { default as Display } from './components/Display.astro'
 export { default as Padding } from './components/Padding.astro'
 export { default as Modal } from './components/Modal.astro'
+export { default as Input } from './components/Input.astro'
 
 // export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
 // export { default as OptimizeImage } from './Optimizers/OptimizeImage'
diff --git a/@dasig/styles/Button.sass b/@dasig/styles/Button.sass
deleted file mode 100644
index b350827..0000000
--- a/@dasig/styles/Button.sass
+++ /dev/null
@@ -1,224 +0,0 @@
-@use '/src/styles/fonts.sass' as fonts
-@use 'sass:color'
-
-$primaryColor: #0075BB
-
-$bulmaPrimary: rgb(0, 235, 199)
-$bulmaPrimaryText: rgb(0, 31, 26)
-$bulmaLink: rgb(92, 111, 255)
-$bulmaLinkText: rgb(245, 246, 255)
-$bulmaInfo: rgb(128, 217, 255)
-$bulmaInfoText: rgb(0, 36, 51)
-$bulmaSuccess: rgb(91, 205, 154)
-$bulmaSuccessText: rgb(10, 31, 21)
-$bulmaWarning: rgb(255, 191, 41)
-$bulmaWarningText: rgb(41, 29, 0)
-$bulmaDanger: rgb(255, 128, 153)
-$bulmaDangerText: rgb(26, 0, 5)
-$bulmaLight: rgb(255, 255, 255)
-$bulmaLightText: rgb(46, 51, 61)
-$bulmaDark: rgb(57, 63, 76)
-$bulmaDarkText: rgb(243, 244, 246)
-$bulmaText: rgb(31, 34, 41)
-$bulmaTextText: rgb(235, 236, 240)
-$bulmaGhost: rgba(0,0,0,0)
-$bulmaGhostText: rgb(66, 88, 255)
-
-$bootstrapTextLight: rgb(255, 255, 253)
-$bootstrapTextDark: rgb(0, 0, 2)
-$bootstrapTextLink: rgb(139, 185, 254)
-$bootstrapPrimary: rgb(13, 110, 253)
-$bootstrapSecondary: rgb(92, 99, 106)
-$bootstrapSuccess: rgb(21, 115, 71)
-$bootstrapDanger: rgb(187, 45, 59)
-$bootstrapWarning: rgb(255, 202, 44)
-$bootstrapInfo: rgb(49, 210, 242)
-$bootstrapLight: rgb(211, 212, 213)
-$bootstrapDark: rgb(33, 37, 41)
-
-.dasig-button
-  background-color: $primaryColor
-  border: none
-  color: white
-  padding: 0.5rem 1.25rem
-  text-align: center
-  text-decoration: none
-  display: inline-block
-  font-size: 1rem
-  font-weight: 500
-  cursor: pointer
-  transition: all 0.2s ease-out
-
-  &:hover
-    background-color: color.adjust($primaryColor, $blackness: 20%)
-
-  &:active
-    transform: scale(0.95)
-
-.bu-primary
-  @extend .dasig-button
-  font-family: fonts.$Inter
-  background-color: $bulmaPrimary
-  color: $bulmaPrimaryText
-  border: none
-  font-size: 1rem
-  border-radius: 0.375rem
-  font-weight: 500
-  padding: 0.5rem 1.25rem
-  height: 2.5rem
-
-  &:hover
-    background-color: color.adjust($bulmaPrimary, $lightness: 10%)
-
-.bu-link
-  @extend .bu-primary
-  background-color: $bulmaLink
-  color: $bulmaLinkText
-
-  &:hover
-    background-color: color.adjust($bulmaLink, $lightness: 5%)
-
-.bu-info
-  @extend .bu-primary
-  background-color: $bulmaInfo
-  color: $bulmaInfoText
-
-  &:hover
-    background-color: color.adjust($bulmaInfo, $lightness: 5%)
-
-.bu-success
-  @extend .bu-primary
-  background-color: $bulmaSuccess
-  color: $bulmaSuccessText
-
-  &:hover
-    background-color: color.adjust($bulmaSuccess, $lightness: 5%)
-
-.bu-warning
-  @extend .bu-primary
-  background-color: $bulmaWarning
-  color: $bulmaWarningText
-
-  &:hover
-    background-color: color.adjust($bulmaWarning, $lightness: 5%)
-
-.bu-danger
-  @extend .bu-primary
-  background-color: $bulmaDanger
-  color: $bulmaDangerText
-
-  &:hover
-    background-color: color.adjust($bulmaDanger, $lightness: 5%)
-
-.bu-light
-  @extend .bu-primary
-  background-color: $bulmaLight
-  color: $bulmaLightText
-
-  &:hover
-    background-color: color.adjust($bulmaLight, $lightness: 5%)
-
-.bu-dark
-  @extend .bu-primary
-  background-color: $bulmaDark
-  color: $bulmaDarkText
-
-  &:hover
-    background-color: color.adjust($bulmaDark, $lightness: 5%)
-
-.bu-text
-  @extend .bu-primary
-  background-color: rgba(0,0,0,0)
-  color: $bulmaTextText
-  text-decoration: underline
-
-  &:hover
-    background-color: hsl(221,14%,14%)
-
-.bu-ghost
-  @extend .bu-primary
-  background-color: $bulmaGhost
-  color: $bulmaGhostText
-
-  &:hover
-    background-color: transparent
-    text-decoration: underline
-
-.bo-primary
-  @extend .dasig-button
-  font-family: 'Segoe UI', fonts.$Roboto
-  background-color: $bootstrapPrimary
-  color: $bootstrapTextLight
-  border: none
-  font-size: 1rem
-  border-radius: 0.375rem
-  font-weight: 400
-  padding: 0.5rem 1.25rem
-  height: 2.5rem
-  margin: 0.25rem 0.125rem
-
-  &:hover
-    background-color: color.adjust($bootstrapPrimary, $blackness: 10%)
-
-.bo-secondary
-  @extend .bo-primary
-  background-color: $bootstrapSecondary
-
-  &:hover
-    background-color: color.adjust($bootstrapSecondary, $blackness: 10%)
-
-.bo-success
-  @extend .bo-primary
-  background-color: $bootstrapSuccess
-
-  &:hover
-    background-color: color.adjust($bootstrapSuccess, $blackness: 10%)
-
-.bo-danger
-  @extend .bo-primary
-  background-color: $bootstrapDanger
-
-  &:hover
-    background-color: color.adjust($bootstrapDanger, $blackness: 10%)
-
-.bo-warning
-  @extend .bo-primary
-  background-color: $bootstrapWarning
-  color: $bootstrapTextDark
-
-  &:hover
-    background-color: color.adjust($bootstrapWarning, $lightness: 5%)
-
-.bo-info
-  @extend .bo-primary
-  background-color: $bootstrapInfo
-  color: $bootstrapTextDark
-
-  &:hover
-    background-color: color.adjust($bootstrapInfo, $lightness: 5%)
-
-.bo-light
-  @extend .bo-primary
-  background-color: $bootstrapLight
-  color: $bootstrapTextDark
-
-  &:hover
-    background-color: color.adjust($bootstrapLight, $blackness: 10%)
-
-.bo-dark
-  @extend .bo-primary
-  background-color: $bootstrapDark
-  // color: $bootstrapTextDark
-
-  &:hover
-    background-color: color.adjust($bootstrapDark, $lightness: 10%)
-
-.bo-link
-  @extend .bo-primary
-  background-color: transparent
-  color: $bootstrapTextLink
-  text-decoration: underline
-
-  &:hover
-    color: color.adjust($bootstrapTextLink, $lightness: 5%)
-    background-color: transparent
diff --git a/@dasig/styles/Input.sass b/@dasig/styles/Input.sass
deleted file mode 100644
index 49d7d13..0000000
--- a/@dasig/styles/Input.sass
+++ /dev/null
@@ -1,27 +0,0 @@
-.dasig-input
-  font-size: 1rem
-  padding: 0.5rem 1rem
-  width: 100%
-  border: 2px solid #ccc
-  border-radius: 4px
-  outline: none
-  transition: border-color 0.3s, box-shadow 0.3s
-
-  &:focus
-    border-color: #3377AC
-    box-shadow: 0 0 5px rgba(51, 119, 168, 0.3)
-
-  &::placeholder
-    color: #888
-    font-style: italic
-
-  &:disabled
-    background-color: #f0f0f0
-    border-color: #ddd
-
-  &--error
-    border-color: #ff4d4f
-    box-shadow: 0 0 5px rgba(255, 77, 79, 0.3)
-
-    &:focus
-      border-color: #e81123
diff --git a/src/components/Counter.astro b/src/components/Counter.astro
new file mode 100644
index 0000000..a23d50f
--- /dev/null
+++ b/src/components/Counter.astro
@@ -0,0 +1,79 @@
+---
+const count = 0
+---
+
+<script>
+  let count = 0
+
+  // }
+  const updateDisplay = () => {
+    const countdisplay = document.getElementById('countdisplay')!
+    countdisplay.textContent = count
+  }
+
+  const decrement = document.getElementById('decrement')!
+  decrement.addEventListener('click', () => {
+    count--
+    updateDisplay()
+  })
+
+  const increment = document.getElementById('increment')!
+  increment.addEventListener('click', () => {
+    count++
+    updateDisplay()
+  })
+</script>
+
+<section class="counter">
+  <div class="counter__display" id="countdisplay">{count}</div>
+  <div class="counter__buttons">
+    <button class="counter__decrement" id="decrement"> - </button>
+    <button class="counter__increment" id="increment"> + </button>
+  </div>
+</section>
+
+<style lang="sass">
+  .counter
+    display: flex
+    flex-direction: column
+    align-items: center
+    gap: 1rem
+    margin: 2rem
+    color: white
+    border: 1px solid rgba(22, 34, 60, 0.5)
+    padding: 1rem 2rem
+    border-radius: 16px
+    background: rgba(134, 152, 217, 0.1)
+
+    &__display
+      font-size: 1.75rem
+      font-weight: bold
+
+    &__buttons
+      display: flex
+      justify-content: center
+      gap: 0.25rem
+
+    &__decrement
+      width: 2rem
+      height: 2.25rem
+      padding: auto
+      font-size: 1rem
+      font-weight: bold
+      cursor: pointer
+      text-decoration: none
+      background-color: rgba(86, 14, 14, 0.915)
+      border-radius: 8px
+      color: white
+      border: 1px solid rgba(255,255,255,0.2)
+
+      &:active
+        transform: scale(0.95)
+
+    &__increment
+      @extend .counter__decrement
+      background-color: rgb(14, 42, 86, 0.915)
+
+      &:active
+        transform: scale(0.95)
+</style>
diff --git a/src/components/Counter/Counter.sass b/src/components/Counter/Counter.sass
deleted file mode 100644
index 5906f01..0000000
--- a/src/components/Counter/Counter.sass
+++ /dev/null
@@ -1,47 +0,0 @@
-.counter
-  display: flex
-  flex-direction: column
-  align-items: center
-  gap: 1rem
-  margin: 2rem
-  color: white
-  border: 1px solid rgba(22, 34, 60, 0.5)
-  padding: 1rem 2rem
-  border-radius: 16px
-  background: rgba(134, 152, 217, 0.1)
-
-  &__display
-    font-size: 1.75rem
-    font-weight: bold
-
-  &__buttons
-    display: flex
-    justify-content: center
-    gap: 0.25rem
-
-    // &:hover
-    // background: color.adjust(vars.$primaryColor, $blackness: 20%)
-
-
-  &__decrement
-    width: 2rem
-    height: 2.25rem
-    padding: auto
-    font-size: 1rem
-    font-weight: bold
-    cursor: pointer
-    text-decoration: none
-    background-color: rgba(86, 14, 14, 0.915)
-    border-radius: 8px
-    color: white
-    border: 1px solid rgba(255,255,255,0.2)
-
-    &:active
-      transform: scale(0.95)
-
-  &__increment
-    @extend .counter__decrement
-    background-color: rgb(14, 42, 86, 0.915)
-
-    &:active
-      transform: scale(0.95)
diff --git a/src/components/Counter/Counter.tsx b/src/components/Counter/Counter.tsx
deleted file mode 100644
index e45cf73..0000000
--- a/src/components/Counter/Counter.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import './Counter.sass'
-import { createSignal } from 'solid-js'
-
-let [count, setCount] = createSignal(0)
-
-const increment = () => {
-  setCount(count() + 1)
-}
-
-const decrement = () => {
-  setCount(count() - 1)
-}
-
-export default () => {
-  return (
-    <>
-      <section class="counter">
-        <div class="counter__display">{count()}</div>
-        <div class="counter__buttons">
-          <button class="counter__decrement" onClick={decrement}>
-            -
-          </button>
-          <button class="counter__increment" onClick={increment}>
-            +
-          </button>
-        </div>
-      </section>
-    </>
-  )
-}
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
deleted file mode 100644
index ae89b0c..0000000
--- a/src/components/Input/Input.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Input from '../../../@dasig/components/Input'
-import { createSignal } from 'solid-js'
-
-const [sample, setSample] = createSignal('')
-
-export default () => {
-  return (
-    <>
-      <Input onChange={(val) => setSample(val)}></Input>
-    </>
-  )
-}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d776bee..3836581 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import { Logo, Page, Footer, Row, Image, Copyright, Column } from '../../@dasig'
-import Counter from '../components/Counter/Counter'
+import { Logo, Page, Footer, Row, Image, Copyright, Column, Button } from '../../@dasig'
+import Counter from '../components/Counter.astro'
 import PA1 from '../../@dasig/images/pat-alcala.avif'
 import PA2 from '../../@dasig/images/pat-alcala.webp'
 ---
@@ -11,8 +11,8 @@ import PA2 from '../../@dasig/images/pat-alcala.webp'
     <Column>
       <Logo size={250} />
 
-      <h1>Dasig - Astro</h1>
-      <Counter client:idle />
+      <h1>Dasig - Static</h1>
+      <Counter />
 
       <Footer>
         <Row content="center" gap={0.5}>