diff --git a/css/dark.css b/css/dark.css
index 3186980..8b441db 100644
--- a/css/dark.css
+++ b/css/dark.css
@@ -143,7 +143,7 @@ span#notify_toast {
   left: 0;
   width: 100%;
   height: 150px;
-  background: linear-gradient(to top,#010409,transparent);
+  background: linear-gradient(to top,#0b1121,transparent);
   backdrop-filter: blur(20px);
   z-index: -1;
 }
@@ -316,6 +316,7 @@ main.hero_section {
 .gradient_container {
   background: #010409;
   max-width: 100vw;
+  min-height: 100vh;
   padding-block: 2.5rem;
   font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -324,6 +325,11 @@ main.hero_section {
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
   gap: 5rem;
   overflow-x: hidden;
+  background: url('../images/dark.jpg');
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size:cover;
+  background-position: center;
 }
 
 
@@ -354,8 +360,8 @@ main.hero_section {
   background: inherit;
   filter: blur(20px);
   z-index: -1;
-  /* -webkit-animation: rotate-center 0.4s ease-in-out both; */
-	        /* animation: rotate-center 0.4s ease-in-out both; */
+  /* -webkit-animation: rotate-center 0.4s ease-in-out both; 
+	 animation: rotate-center 0.8s ease-in-out both; */
 }
 
 /* @-webkit-keyframes rotate-center {
@@ -385,11 +391,11 @@ main.hero_section {
   width: 100%;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-  background: linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.6));
+  background: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.6));
 }
 
 .colors {
-  background: linear-gradient(to top,rgba(0,0,0,.2),rgba(0,0,0,.2));
+  background: linear-gradient(to top,rgba(0,0,0,.4),rgba(0,0,0,.4));
   -webkit-backdrop-filter: blur(25px);
   backdrop-filter: blur(25px);
   padding: 10px 20px;
diff --git a/css/white.css b/css/white.css
index 9080a31..a75463a 100644
--- a/css/white.css
+++ b/css/white.css
@@ -139,7 +139,7 @@ span#notify_toast {
   left: 0;
   width: 100%;
   height: 150px;
-  background: linear-gradient(to top,rgba(255, 255, 255, 1),transparent);
+  background: linear-gradient(to top,#e9e7f3,transparent);
   /* backdrop-filter: blur(20px); */
   z-index: -1;
 }
@@ -305,6 +305,7 @@ main.hero_section {
 
 .gradient_container {
     max-width: 100vw;
+    min-height: 100vh;
     padding-block: 2.5rem;
     font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
         "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -313,6 +314,12 @@ main.hero_section {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
     gap: 5rem;
     overflow-x: hidden;
+    background: url('../images/light.jpg');
+    /* background-image: linear-gradient(180deg, rgba(255,255,255, 0.01), rgba(255,255,255, 1) 85%),radial-gradient(ellipse at top left, rgba(13,110,253, 0.5), transparent 50%),radial-gradient(ellipse at top right, rgba(255,228,132, 0.5), transparent 50%),radial-gradient(ellipse at center right, rgba(112.520718,44.062154,249.437846, 0.5), transparent 50%),radial-gradient(ellipse at center left, rgba(214,51,132, 0.5), transparent 50%); */
+    background-repeat: no-repeat;
+    background-size:cover;
+    background-position: center;
+    background-attachment: fixed;
 }
 
 .gradient_card {
diff --git a/images/cells.svg b/images/cells.svg
new file mode 100644
index 0000000..f99671c
--- /dev/null
+++ b/images/cells.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(148 163 184 / 0.05)'><path d='M0 .5H31.5V32'/></svg>
\ No newline at end of file
diff --git a/images/dark.jpg b/images/dark.jpg
new file mode 100644
index 0000000..988011d
Binary files /dev/null and b/images/dark.jpg differ
diff --git a/images/dark2.png b/images/dark2.png
new file mode 100644
index 0000000..d0a3830
Binary files /dev/null and b/images/dark2.png differ
diff --git a/images/light.jpg b/images/light.jpg
new file mode 100644
index 0000000..f6a9271
Binary files /dev/null and b/images/light.jpg differ
diff --git a/images/light2.jpg b/images/light2.jpg
new file mode 100644
index 0000000..db03a85
Binary files /dev/null and b/images/light2.jpg differ
diff --git a/index.html b/index.html
index 22cdedf..1bdfe21 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
   <script defer src="./dist/jquery.lcnCircleRangeSelect.js"></script>
 
   <!-- general style sheet -->
-  <link rel="stylesheet" href="./css/white.css" id="css_link" />
+  <link rel="stylesheet" href="./css/dark.css" id="css_link" />
 </head>
 
 <body>