diff --git a/src/components/Background/DashedLinesBackground.tsx b/src/components/Background/DashedLinesBackground.tsx
new file mode 100644
index 00000000..f7eb5c2e
--- /dev/null
+++ b/src/components/Background/DashedLinesBackground.tsx
@@ -0,0 +1,53 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { useId } from 'react';
+
+const LINE_SPACING = 28;
+/** Tile width: dash period 12px → 48px fits four repeats (between soft dots and full grid). */
+const DASH_TILE = 48;
+
+/** Horizontal dashed lines — stronger than dotted guides, no verticals (unlike grid). */
+export default function DashedLinesBackground() {
+ const patternId = `${useId().replace(/:/g, '')}-dashed-ruled`;
+
+ return (
+
+ );
+}
diff --git a/src/components/Background/DottedLinesBackground.tsx b/src/components/Background/DottedLinesBackground.tsx
new file mode 100644
index 00000000..956e17b6
--- /dev/null
+++ b/src/components/Background/DottedLinesBackground.tsx
@@ -0,0 +1,53 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { useId } from 'react';
+
+const LINE_SPACING = 28;
+/** Tile width so dash pattern repeats seamlessly when tiled. */
+const DASH_TILE = 32;
+
+/** Horizontal dotted guide lines, for use inside a `relative` container. */
+export default function DottedLinesBackground() {
+ const patternId = `${useId().replace(/:/g, '')}-dotted-ruled`;
+
+ return (
+
+ );
+}
diff --git a/src/components/Background/RuledLinesBackground.tsx b/src/components/Background/RuledLinesBackground.tsx
new file mode 100644
index 00000000..4b98a086
--- /dev/null
+++ b/src/components/Background/RuledLinesBackground.tsx
@@ -0,0 +1,49 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { useId } from 'react';
+
+const LINE_SPACING = 28;
+
+/** Horizontal ruled lines (notebook paper), for use inside a `relative` container. */
+export default function RuledLinesBackground() {
+ const patternId = `${useId().replace(/:/g, '')}-ruled`;
+
+ return (
+
+ );
+}
diff --git a/src/components/Background/index.ts b/src/components/Background/index.ts
index b92beeb0..c523b632 100644
--- a/src/components/Background/index.ts
+++ b/src/components/Background/index.ts
@@ -12,5 +12,8 @@
// limitations under the License.
// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+export { default as DashedLinesBackground } from './DashedLinesBackground';
export { default as DotPatternBackground } from './DotPatternBackground';
+export { default as DottedLinesBackground } from './DottedLinesBackground';
export { default as GridPatternBackground } from './GridPatternBackground';
+export { default as RuledLinesBackground } from './RuledLinesBackground';