diff --git a/components/src/app/cards/page.tsx b/components/src/app/cards/page.tsx
index e1db497..7618750 100644
--- a/components/src/app/cards/page.tsx
+++ b/components/src/app/cards/page.tsx
@@ -1,27 +1,15 @@
 import React from "react";
-import {  QuizCards } from "../../components";
-import { files } from "@/components/QuizCards";
+import { QuizCards } from "../../components";
+import { CardsHolder, files } from "@/components/QuizCards";
 
 function CardsComponent() {
-    return (
-      <div
-        style={{
-          backgroundImage: 'url("/cards/flag.svg")',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          height: '100vh', 
-          width: '100vw',  
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }}
-      >
-        <div className="p-4 m-6 rounded-lg shadow-md w-full bg-white">
-          <QuizCards url="cards" files={files} />
-        </div>
-      </div>
-    );
-  }
-  
-  export default CardsComponent;
-  
\ No newline at end of file
+  return (
+    <CardsHolder>
+      <QuizCards url="cards" files={files} />
+    </CardsHolder>
+
+
+  );
+}
+
+export default CardsComponent;