diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4beb852..59a59c2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -159,8 +159,13 @@ const IndexPage = ({
           >
             <div
               className={classnames(
-                "rounded-[50px] p-3 md:p-5 ml-2 mr-4 md:ml-3 md:mr-5 flex flex-col items-center z-10 border-r-[20px] border-b-[20px] mb-3",
-                isClient ? "cool-border-big" : "bg-gray-50"
+                "rounded-[50px] p-3 md:p-5 ml-2 mr-4 md:ml-3 md:mr-5 flex flex-col items-center z-10  mb-3",
+                isClient
+                  ? imageIsLandscape
+                    ? "text-vibrant-light landscape:text-vibrant-dark landscape:cool-border-big landscape:border-r-[20px] landscape:border-b-[20px]"
+                    : "text-vibrant-light portrait:text-vibrant-dark portrait:cool-border-big portrait:border-r-[20px] portrait:border-b-[20px]"
+                  : "bg-gray-50 border-r-[20px] border-b-[20px]",
+                isClient && ""
               )}
             >
               <h1
@@ -205,7 +210,10 @@ const IndexPage = ({
             loading="eager"
             style={{
               gridArea: "1/1",
-              width: browserIsLandscape && !imageIsLandscape ? `${ar * 100}vh` : "100%",
+              width:
+                browserIsLandscape && !imageIsLandscape
+                  ? `${ar * 100}vh`
+                  : "100%",
             }}
           />
         ) : (
diff --git a/src/styles/global.css b/src/styles/global.css
index a6ec8a5..4e3a9e8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -57,6 +57,24 @@
       height: 67vw;
     }
   }
+  .cool-border-big {
+    border: 1px solid rgb(var(--dark-vibrant));
+    background: rgb(var(--light-vibrant));
+    box-shadow: 10px 10px 0px 0px rgb(var(--dark-vibrant));
+  }
+  .cool-border-small {
+    color: rgb(var(--dark-vibrant));
+    border: 1px solid rgb(var(--dark-vibrant));
+    background: rgb(var(--light-vibrant));
+    box-shadow: 3px 3px 0px 0px rgb(var(--dark-vibrant));
+  }
+  .cool-border-small:hover {
+    box-shadow: 6px 6px 0px 0px rgb(var(--dark-vibrant));
+  }
+  .cool-border-small-light {
+    border: 1px solid rgb(var(--light-vibrant));
+    box-shadow: 3px 3px 0px 0px rgb(var(--light-vibrant));
+  }
 }
 
 body {
diff --git a/src/styles/index.css b/src/styles/index.css
index c5e3aed..e57435a 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -2,23 +2,3 @@
 text-vibrant-dark border-vibrant bg-vibrant-light
   
 } */
-
-.cool-border-big {
-  color: rgb(var(--dark-vibrant));
-  border: 1px solid rgb(var(--dark-vibrant));
-  background: rgb(var(--light-vibrant));
-  box-shadow: 10px 10px 0px 0px rgb(var(--dark-vibrant));
-}
-.cool-border-small {
-  color: rgb(var(--dark-vibrant));
-  border: 1px solid rgb(var(--dark-vibrant));
-  background: rgb(var(--light-vibrant));
-  box-shadow: 3px 3px 0px 0px rgb(var(--dark-vibrant));
-}
-.cool-border-small:hover{
-  box-shadow: 6px 6px 0px 0px rgb(var(--dark-vibrant));
-}
-.cool-border-small-light {
-  border: 1px solid rgb(var(--light-vibrant));
-  box-shadow: 3px 3px 0px 0px rgb(var(--light-vibrant));
-}
\ No newline at end of file