diff --git a/src/index.css b/src/index.css
index b93de65..4381c75 100644
--- a/src/index.css
+++ b/src/index.css
@@ -48,7 +48,7 @@
     --destructive: 343.269 81.25% 74.902%;
     --destructive-foreground: 240 21.311% 11.961%;
     --ring: 226.154 63.934% 88.039%;
-    --radius: 0rem;
+    --radius: 0.5rem;
   }
 }
 
diff --git a/src/pages/Feature-flag/FeatureFlags.jsx b/src/pages/Feature-flag/FeatureFlags.jsx
index d4ff426..6dd4ddc 100644
--- a/src/pages/Feature-flag/FeatureFlags.jsx
+++ b/src/pages/Feature-flag/FeatureFlags.jsx
@@ -47,7 +47,7 @@ export const FeatureFlags = () => {
 
   return (
     <div>
-      <h1 className="text-2xl text-center py-4 bg-accent">Feature Flags</h1>
+      <h1 className="text-2xl text-center py-4 bg-primary text-primary-foreground">Feature Flags</h1>
       {componentsToRender.map((componentItem) =>
         checkEnabledFlags(componentItem.key) ? componentItem.component : null,
       )}
diff --git a/src/pages/RandomColor.jsx b/src/pages/RandomColor.jsx
index 19882de..fe44199 100644
--- a/src/pages/RandomColor.jsx
+++ b/src/pages/RandomColor.jsx
@@ -29,20 +29,22 @@ function RandomColor() {
 
   return (
     <div
-      className={`container flex flex-1 flex-col items-center justify-start gap-8 my-10 w-full h-screen`}
+      className={`container flex flex-1 flex-col items-center justify-start gap-8 my-10 w-full h-screen py-10`}
       style={{ background: color }}
     >
-      <Button onClick={() => settypeOfColor("hex")}>Create HEX Color</Button>
-      <Button onClick={() => settypeOfColor("rgb")}>Create RGB Color</Button>
-      <Button
-        onClick={
-          typeOfColor === "hex"
-            ? handleCreateRandomHexColor
-            : handleCreateRandomRgbColor
-        }
-      >
-        Generate Random Color
-      </Button>
+      <div className="flex gap-7">
+        <Button onClick={() => settypeOfColor("hex")}>Create HEX Color</Button>
+        <Button onClick={() => settypeOfColor("rgb")}>Create RGB Color</Button>
+        <Button
+          onClick={
+            typeOfColor === "hex"
+              ? handleCreateRandomHexColor
+              : handleCreateRandomRgbColor
+          }
+        >
+          Generate Random Color
+        </Button>
+      </div>
       <div className="flex justify-center items-center mix-blend-multiply dark:mix-blend-exclusion mt-[50px]">
         <h1 className="text-8xl font-micro">{color}</h1>
       </div>
diff --git a/src/pages/StarRating.jsx b/src/pages/StarRating.jsx
index 0f35a00..841d8b9 100644
--- a/src/pages/StarRating.jsx
+++ b/src/pages/StarRating.jsx
@@ -43,8 +43,8 @@ function StarRating({ numOfStars = 5 }) {
               key={index}
               className={
                 index <= (hover || rating)
-                  ? "active text-accent"
-                  : "inactive text-white"
+                  ? "active text-primary"
+                  : "inactive text-secondary-foreground/20"
               }
               onClick={() => handleClick(index)}
               onMouseMove={() => handleMouseEnter(index)}
diff --git a/src/pages/tree-view/TreeView.jsx b/src/pages/tree-view/TreeView.jsx
index 35dd205..98a334f 100644
--- a/src/pages/tree-view/TreeView.jsx
+++ b/src/pages/tree-view/TreeView.jsx
@@ -2,7 +2,7 @@ import MenuList from "./MenuList"
 
 function TreeView({menus = []})  {
   return (
-    <div className="container bg-card w-[260px] flex flex-1 py-5 mr-[100%]">
+    <div className="container bg-secondary/50 w-[260px] flex flex-1 py-5 mr-[100%]">
       <MenuList list={menus} />
     </div>
   )