diff --git a/tests/unit/components/layout/Card.test.ts b/tests/unit/components/layout/Card.test.ts
index 8cd4471..2dcd4ee 100644
--- a/tests/unit/components/layout/Card.test.ts
+++ b/tests/unit/components/layout/Card.test.ts
@@ -1,19 +1,11 @@
 import { render, screen } from "@testing-library/svelte";
 import { describe, expect, it } from "vitest";
-import { createRawSnippet } from "svelte";
-import Card from "$components/layout/Card.svelte";
+import CardTest from "./CardTest.svelte";
 
 describe("Card.svelte", () => {
   it("should render without crashing", () => {
-    const childrenSnippet = createRawSnippet(() => ({
-      render: () => "<div>Test content</div>",
-    }));
-
-    render(Card, {
-      props: {
-        title: "Test Title",
-        children: childrenSnippet,
-      },
-    });
+    render(CardTest);
+    const card = document.querySelector(".card");
+    expect(card).toBeInTheDocument();
   });
 });
diff --git a/tests/unit/components/layout/CardTest.svelte b/tests/unit/components/layout/CardTest.svelte
new file mode 100644
index 0000000..953a953
--- /dev/null
+++ b/tests/unit/components/layout/CardTest.svelte
@@ -0,0 +1,8 @@
+<!-- CardTest.svelte -->
+<script>
+  import Card from "$components/layout/Card.svelte";
+</script>
+
+<Card title="Test Title">
+  <div data-testid="card-content">Test content</div>
+</Card>
diff --git a/tests/unit/routes/LayoutTest.svelte b/tests/unit/routes/LayoutTest.svelte
new file mode 100644
index 0000000..02679f9
--- /dev/null
+++ b/tests/unit/routes/LayoutTest.svelte
@@ -0,0 +1,8 @@
+<!-- LayoutTest.svelte -->
+<script>
+  import Layout from "$routes/+layout.svelte";
+</script>
+
+<Layout>
+  <span data-testid="test-child">Hello</span>
+</Layout>
diff --git a/tests/unit/routes/PageTest.svelte b/tests/unit/routes/PageTest.svelte
new file mode 100644
index 0000000..5e56449
--- /dev/null
+++ b/tests/unit/routes/PageTest.svelte
@@ -0,0 +1,6 @@
+<!-- PageTest.svelte -->
+<script>
+  import Page from "$routes/+page.svelte";
+</script>
+
+<Page />
diff --git a/tests/unit/routes/layout.test.ts b/tests/unit/routes/layout.test.ts
index ec33e11..ba96bdc 100644
--- a/tests/unit/routes/layout.test.ts
+++ b/tests/unit/routes/layout.test.ts
@@ -27,24 +27,14 @@ describe("+layout.svelte", () => {
   });
 });
 
-import Layout from "$routes/+layout.svelte";
+import LayoutTest from "./LayoutTest.svelte";
 import { render, screen } from "@testing-library/svelte";
-import { createRawSnippet } from "svelte";
 
 describe("Layout Component Coverage", () => {
   it("should render children snippet and initialize props", () => {
-    const testId = "test-child";
-    const childrenSnippet = createRawSnippet(() => ({
-      render: () => `<span data-testid="${testId}">Hello</span>`,
-    }));
+    render(LayoutTest);
 
-    render(Layout, {
-      props: {
-        children: childrenSnippet,
-      },
-    });
-
-    expect(screen.getByTestId(testId)).toBeInTheDocument();
+    expect(screen.getByTestId("test-child")).toBeInTheDocument();
     expect(screen.getByRole("banner")).toBeInTheDocument();
   });
 });
diff --git a/tests/unit/routes/page.test.ts b/tests/unit/routes/page.test.ts
new file mode 100644
index 0000000..663aee8
--- /dev/null
+++ b/tests/unit/routes/page.test.ts
@@ -0,0 +1,11 @@
+import { render, screen } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import PageTest from "./PageTest.svelte";
+
+describe("+page.svelte", () => {
+  it("should render without crashing", () => {
+    render(PageTest);
+    const mainGrid = document.querySelector(".main-grid");
+    expect(mainGrid).toBeInTheDocument();
+  });
+});