diff --git a/packages/frontend/public/wave-border.svg b/packages/frontend/public/wave-border.svg
new file mode 100644
index 00000000..94137bb5
--- /dev/null
+++ b/packages/frontend/public/wave-border.svg
@@ -0,0 +1,10 @@
+
diff --git a/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx b/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx
new file mode 100644
index 00000000..45bc7234
--- /dev/null
+++ b/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx
@@ -0,0 +1,16 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { cn } from 'utils/classnames';
+
+export interface WavyBorderProps extends ComponentPropsWithoutRef<'div'> {}
+
+export const WavyBorder = ({
+ className,
+ children,
+ ...props
+}: WavyBorderProps) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/packages/frontend/src/components/shared/WavyBorder/index.ts b/packages/frontend/src/components/shared/WavyBorder/index.ts
new file mode 100644
index 00000000..1b635a77
--- /dev/null
+++ b/packages/frontend/src/components/shared/WavyBorder/index.ts
@@ -0,0 +1 @@
+export * from './WavyBorder';
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index c1375286..9a276aba 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -6,4 +6,12 @@
.focus-ring {
@apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none;
}
+
+ .wave {
+ background-image: url('../public/wave-border.svg');
+ background-repeat: repeat-x;
+ background-position: top;
+ background-size: cover;
+ @apply w-full h-1;
+ }
}