diff --git a/src/components/PageComponents/Color-Converter/ColorConverterComponent.sass b/src/components/PageComponents/Color-Converter/ColorConverterComponent.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/PageComponents/Color-Converter/ColorConverterComponent.tsx b/src/components/PageComponents/Color-Converter/ColorConverterComponent.tsx
new file mode 100644
index 0000000..8dfa45a
--- /dev/null
+++ b/src/components/PageComponents/Color-Converter/ColorConverterComponent.tsx
@@ -0,0 +1,10 @@
+import './ColorConverterComponent.sass'
+
+export default () => {
+
+  return (
+    <>
+      <section class='section'><h1>hello</h1></section>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/color-converter.astro b/src/pages/color-converter.astro
new file mode 100644
index 0000000..4af35cf
--- /dev/null
+++ b/src/pages/color-converter.astro
@@ -0,0 +1,35 @@
+---
+import Layout from '../layouts/Layout.astro'
+import ColorConverterComponent from '../components/PageComponents/Color-Converter/ColorConverterComponent.tsx'
+import PageTitle from '../components/PageTitle/PageTitle'
+---
+
+<Layout title="Color Converter - AIO Tools">
+  <div class="page">
+    <PageTitle title="Color Converter" description="Convert colors to any format. Color picker provided inside." />
+
+    <section class="content">
+      <ColorConverterComponent client:visible />
+    </section>
+  </div>
+</Layout>
+
+<style lang="sass">
+  @use '/src/assets/css/viewport.sass' as view
+
+  .page
+    text-align: center
+    margin: 4rem 0 0 0
+    transition: margin 0.4s ease-in-out
+
+    @media screen and (max-width: view.$tablet)
+      margin-top: 1rem
+
+  .content
+    display: flex
+    justify-content: center
+    align-items: center
+    // border: 1px solid #ffffff
+    // padding: 2rem
+    // border-radius: 8px
+</style>