diff --git a/demo/src/main/resources/static/css/explore.css b/demo/src/main/resources/static/css/explore.css
index 264e1c8..8503a41 100644
--- a/demo/src/main/resources/static/css/explore.css
+++ b/demo/src/main/resources/static/css/explore.css
@@ -196,9 +196,18 @@ body, html {
   justify-content: flex-start;
   align-items: flex-start;
   overflow: scroll;
+  scrollbar-color: var(--dusty-red) var(--pale-yellow);
   height: 100%;
 }
 
+/* safari and old browsers*/
+::-webkit-scrollbar-track {
+  background: var(--pale-yellow);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--dusty-red);
+}
+
 /* =========================
    Search Bar
 ========================= */
@@ -252,19 +261,24 @@ input[type="search"]::placeholder {
 
 .search-bar label { display: none; }
 
+input[type="search"]::-webkit-search-cancel-button {
+  filter: invert(1) sepia(1) saturate(2) hue-rotate(3deg);
+}
+
 
 /* =========================
    Recipe Cards Layout
 ========================= */
 .recipe-card {
   margin-top: 35px;
-  width: 100%;
+  width: 99.5%;
   display: flex;
   flex-wrap: wrap;
   gap: 35px;
   justify-content: flex-start;
   flex-direction: row;
   height: fit-content;
+  padding-right: 10px;
 }
 
 a {
diff --git a/demo/src/main/resources/static/css/home.css b/demo/src/main/resources/static/css/home.css
index 3dbe292..bc41372 100644
--- a/demo/src/main/resources/static/css/home.css
+++ b/demo/src/main/resources/static/css/home.css
@@ -195,15 +195,24 @@ body, html {
   justify-content: center;
   align-items: flex-start;
   overflow: scroll;
+ scrollbar-color: var(--dusty-red) var(--pale-yellow);
   height: 100%;
 }
 
+/* safari and old browsers*/
+::-webkit-scrollbar-track {
+  background: var(--pale-yellow);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--dusty-red);
+}
+
 /* =========================
    Recipe Cards Layout
 ========================= */
 .recipe-card {
   margin-top: 35px;
-  width: 100%;
+  width: 99%;
   display: flex;
   flex-wrap: wrap;
   gap: 35px;