diff --git a/src/app/components/how-it-works/components/how-it-works-layout.tsx b/src/app/components/how-it-works/components/how-it-works-layout.tsx
new file mode 100644
index 00000000..b738d912
--- /dev/null
+++ b/src/app/components/how-it-works/components/how-it-works-layout.tsx
@@ -0,0 +1,6 @@
+import { VStack } from '@chakra-ui/react';
+import { HasChildren } from '@models/has-children';
+
+export function HowItWorksLayout({ children }: HasChildren): React.JSX.Element {
+ return {children};
+}
diff --git a/src/app/components/how-it-works/components/middle-section.tsx b/src/app/components/how-it-works/components/middle-section.tsx
new file mode 100644
index 00000000..b62d0fb7
--- /dev/null
+++ b/src/app/components/how-it-works/components/middle-section.tsx
@@ -0,0 +1,34 @@
+import { Box, HStack, Text, VStack } from '@chakra-ui/react';
+
+export function MiddleSection(): React.JSX.Element {
+ return (
+
+
+
+
+
+ dlcBTC
+
+
+ dlcBTC lets you use your Bitcoin on different DeFi platforms, all without giving up
+ control of your actual Bitcoin.
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/components/how-it-works/components/top-section.tsx b/src/app/components/how-it-works/components/top-section.tsx
new file mode 100644
index 00000000..9f7047ba
--- /dev/null
+++ b/src/app/components/how-it-works/components/top-section.tsx
@@ -0,0 +1,26 @@
+import { Box, HStack, Text, VStack } from '@chakra-ui/react';
+
+export function TopSection(): React.JSX.Element {
+ return (
+
+
+
+
+ dlcBTC
+
+
+ dlcBTC lets you use your Bitcoin on different DeFi platforms, all without giving up
+ control of your actual Bitcoin.
+
+
+
+
+
+ );
+}
diff --git a/src/app/components/how-it-works/how-it-works.tsx b/src/app/components/how-it-works/how-it-works.tsx
new file mode 100644
index 00000000..3a94d920
--- /dev/null
+++ b/src/app/components/how-it-works/how-it-works.tsx
@@ -0,0 +1,19 @@
+import { Box, VStack } from '@chakra-ui/react';
+
+import { HowItWorksLayout } from './components/how-it-works-layout';
+import { MiddleSection } from './components/middle-section';
+import { TopSection } from './components/top-section';
+
+export function HowItWorks(): React.JSX.Element {
+ return (
+
+ {
+
+
+
+
+
+ }
+
+ );
+}
diff --git a/src/app/pages/about/about.tsx b/src/app/pages/about/about.tsx
index 53eb99b7..8a8ec7fc 100644
--- a/src/app/pages/about/about.tsx
+++ b/src/app/pages/about/about.tsx
@@ -1,9 +1,10 @@
-import { Text, VStack } from '@chakra-ui/react';
+import { HowItWorks } from '@components/how-it-works/how-it-works';
+import { PageLayout } from '@pages/components/page.layout';
export function About(): React.JSX.Element {
return (
-
- About
-
+
+
+
);
}