diff --git a/.husky/_/commit-msg b/.husky/_/commit-msg
index 6d75457..16aae78 100755
--- a/.husky/_/commit-msg
+++ b/.husky/_/commit-msg
@@ -1,5 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/husky.sh"
-
-# Validate commit message
-npx --no-install commitlint --edit "$1"
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/husky.sh b/.husky/_/husky.sh
index 472dabe..f9d0637 100644
--- a/.husky/_/husky.sh
+++ b/.husky/_/husky.sh
@@ -1,31 +1,9 @@
-#!/bin/sh
-if [ -z "$husky_skip_init" ]; then
-  debug () {
-    [ "$HUSKY_DEBUG" = "1" ] && echo "husky:debug $1"
-  }
+echo "husky - DEPRECATED
 
-  readonly hook_name="$(basename "$0")"
-  debug "starting $hook_name..."
+Please remove the following two lines from $0:
 
-  if [ "$HUSKY" = "0" ]; then
-    debug "HUSKY env variable is set to 0, skipping hook"
-    exit 0
-  fi
+#!/usr/bin/env sh
+. \"\$(dirname -- \"\$0\")/_/husky.sh\"
 
-  if [ -f ~/.huskyrc ]; then
-    debug "sourcing ~/.huskyrc"
-    . ~/.huskyrc
-  fi
-
-  export readonly husky_skip_init=1
-  sh -e "$0" "$@"
-  exitCode="$?"
-
-  if [ $exitCode != 0 ]; then
-    debug "hook failed"
-  else
-    debug "hook succeeded"
-  fi
-
-  exit $exitCode
-fi
\ No newline at end of file
+They WILL FAIL in v10.0.0
+"
\ No newline at end of file
diff --git a/.husky/_/pre-commit b/.husky/_/pre-commit
index 77c876a..16aae78 100755
--- a/.husky/_/pre-commit
+++ b/.husky/_/pre-commit
@@ -1,30 +1,2 @@
-#!/bin/sh
-# Ensure the script fails on the first error (except when running prettier)
-set -e
-
-# Run Prettier to format code
-echo "Running Prettier..."
-npx prettier --write .
-
-# Capture the Prettier exit code
-PRETTIER_EXIT_CODE=$?
-
-# Run ESLint to lint code
-echo "Running ESLint..."
-npx eslint .
-
-# Capture the ESLint exit code
-ESLINT_EXIT_CODE=$?
-
-# If Prettier or ESLint failed, exit with an error
-if [ "$PRETTIER_EXIT_CODE" -ne 0 ]; then
-  echo "Prettier formatting failed"
-fi
-
-if [ "$ESLINT_EXIT_CODE" -ne 0 ]; then
-  echo "ESLint failed"
-  exit 1 # Ensure pre-commit fails on lint issues
-fi
-
-# If both succeeded or ESLint failed, allow commit to proceed
-exit 0
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/favs.html b/favs.html
index b5e2c05..b4778eb 100644
--- a/favs.html
+++ b/favs.html
@@ -142,7 +142,7 @@ <h2>Share GIF</h2>
             <li><i class="fa-brands fa-square-instagram"></i></li>
             <li><i class="fa-brands fa-square-pinterest"></i></li>
           </ul>
-          <button id="copy" class="secondary-btn copy-btn">Copy Link</button>
+          <button id="copy" class="secondary-btn copy-btn" style="margin-bottom: 10px;">Copy Link</button>
         </div>
       </section>
 
diff --git a/index.html b/index.html
index b8ea3d8..d358d21 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
       src="https://kit.fontawesome.com/72fc4d72f1.js"
       crossorigin="anonymous"
     ></script>
+    <link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles/normalize.css" />
     <link rel="stylesheet" href="styles/styles.css" />
     <script src="scripts/scripts.js" defer></script>
@@ -66,19 +67,19 @@ <h2>Share GIF</h2>
           <a href="https://lcrojano.github.io/Giphy_Explorer/" class="logo-link">
             <h1 class="grow-2" id="logo">Giphy Search</h1>
           </a>
-          <caption>
+          <caption  style="font-family: 'Patrick Hand', cursive; font-weight: bolder;">
             By Luis Rojano
           </caption>
         </div>
         <div style="display: flex">
           <button class="secondary-btn">
-            <a href="login.html" style="text-decoration: none; color: inherit;">Log In</a>
+            <a href="login.html" style="text-decoration: none; color: inherit; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bolder;">Log In</a>
           </button> 
           <!-- Add this button to trigger the modal for uploading GIFs -->
           <button
             id="upload-button"
             class="secondary-btn"
-            style="margin-left: 15px"
+            style="margin-left: 15px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bolder;"
           >
             Upload GIF
           </button>
@@ -139,7 +140,7 @@ <h2>Share GIF</h2>
             <li><i class="fa-brands fa-square-instagram"></i></li>
             <li><i class="fa-brands fa-square-pinterest"></i></li>
           </ul>
-          <button id="copy" class="secondary-btn copy-btn">Copy Link</button>
+          <button id="copy" class="secondary-btn copy-btn" style="margin-bottom: 10px;">Copy Link</button>
         </div>
       </section>
 
@@ -151,7 +152,7 @@ <h2>Share GIF</h2>
           <span id="">2000</span>
         </div>
         <nav>
-          <menu id="history" class="flex-row tag-menu"></menu>
+          <menu id="history" class="flex-row tag-menu" ></menu>
         </nav>
       </section>
 
diff --git a/login.html b/login.html
index f37b1b0..57cbc44 100644
--- a/login.html
+++ b/login.html
@@ -8,7 +8,7 @@
         /* CSS for styling the login page */
         body {
             font-family: 'Arial', sans-serif;
-            background-color: #f0f4f8;
+            background-color: black;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -19,6 +19,7 @@
         .login-container {
             background-color: #fff;
             padding: 40px;
+            border: 5px solid #c253b7;
             border-radius: 10px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             width: 300px;
@@ -82,20 +83,23 @@
     </style>
 </head>
 <body>
-
-    <div class="login-container">
-        <h2>Login</h2>
-        <form id="loginForm">
-            <label for="username">Username</label>
-            <input type="text" id="username" name="username" required>
-            <label for="password">Password</label>
-            <input type="password" id="password" name="password" required>
-            <button type="submit">Login</button>
-        </form>
-        <div class="signup-link">
-            Don't have an account? <a href="signup.html">Sign up</a>
+    <div style="display: flex; flex-direction: column; align-items: center; margin: 20px;">
+        <h1 style="color: white; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';"><span style="color: #c253b7; font-weight: bolder; font-size: xx-large; margin-top: 10px;">Giphy</span></h1>
+        <div class="login-container">
+            <h2>Login</h2>
+            <form id="loginForm">
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username" required>
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" required>
+                <button type="submit" style="margin-left: 10px; background: #c253b7">Login</button>
+            </form>
+            <div class="signup-link">
+                Don't have an account? <a href="signup.html">Sign up</a>
+            </div>
         </div>
     </div>
+   
 
     <script>
         // JavaScript for handling form submission
diff --git a/signup.html b/signup.html
index 498d1d1..d7bf115 100644
--- a/signup.html
+++ b/signup.html
@@ -14,7 +14,7 @@
 
         body {
             font-family: Arial, sans-serif;
-            background-color: #f0f4f8;
+            background-color: black;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -24,6 +24,7 @@
         .signup-container {
             background-color: white;
             padding: 30px;
+            border: 5px solid #c253b7;
             border-radius: 8px;
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
             width: 400px;
@@ -38,6 +39,7 @@
         }
 
         form {
+            
             display: flex;
             flex-direction: column;
         }
@@ -92,26 +94,30 @@
 </head>
 <body>
 
-    <div class="signup-container">
-        <h2>Sign Up</h2>
-        <form id="signupForm">
-            <label for="username">Username</label>
-            <input type="text" id="username" name="username" placeholder="Enter your username" required>
-            
-            <label for="email">Email</label>
-            <input type="email" id="email" name="email" placeholder="Enter your email" required>
-
-            <label for="password">Password</label>
-            <input type="password" id="password" name="password" placeholder="Enter your password" required>
-
-            <button type="submit">Sign Up</button>
-        </form>
-
-        <div class="login-text">
-            Already have an account? <a href="login.html">Login</a> <!-- This line is updated -->
+    <div  style="display: flex; flex-direction: column; align-items: center; margin: 20px;">
+        <h1 style="color: white; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans'; margin-bottom: 20px;">Welcome to <span style="color: #c253b7; font-weight: bolder; font-size: xx-large; margin-bottom: 20px;">Giphy</span></h1>
+        <div class="signup-container">
+            <h2>Sign Up</h2>
+            <form id="signupForm">
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username" placeholder="Enter your username" required>
+                
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" placeholder="Enter your email" required>
+    
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" placeholder="Enter your password" required>
+    
+                <button type="submit" style="background: #c253b7;">Sign Up</button>
+            </form>
+    
+            <div class="login-text">
+                Already have an account? <a href="login.html">Login</a> 
+            </div>
         </div>
+    
     </div>
-
+    
     <script>
         document.getElementById("signupForm").addEventListener("submit", function(event){
             event.preventDefault();
diff --git a/styles/styles.css b/styles/styles.css
index 6b6dec9..e8b0725 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -180,8 +180,31 @@ input[type='search']:focus {
 }
 
 figure {
+  margin: 20px;
   max-width: 220px;
   margin: 10px;
+  border: 2px solid;
+  padding: 10px;
+  display: flex; 
+  flex-direction: column; 
+  align-items: center; 
+}
+
+figure {
+  max-width: 220px;
+  margin: 20px;
+  border: 3px solid #bb5bb1;
+  border-radius: 20px;
+  padding: 19px;
+  display: flex; 
+  flex-direction: column;
+  align-items: center;
+}
+
+figure img {
+  width: 100%; 
+  height: 200px; 
+  object-fit: cover; 
 }
 
 .picture img {
@@ -261,6 +284,13 @@ figure {
   cursor: pointer;
 }
 
+
+.secondary-btn:hover {
+  background-color: #ba40ae; 
+  color: #fff; 
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+
 .tag-btn {
   background-color: var(--principal-color-v2);
   color: var(--principal-text-color);
@@ -280,6 +310,12 @@ figure {
   flex-wrap: wrap;
 }
 
+
+#upload-button:hover{
+  background-color: #ba40ae; 
+  color: #fff;
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
 /* Share modal */
 
 .modal {
@@ -287,12 +323,17 @@ figure {
   width: 100%;
   display: none;
   position: fixed;
+ 
 }
 
 .display-modal {
   display: flex !important;
   justify-content: center;
   align-items: center;
+  height: 120vh;
+  
+  
+  
 }
 
 .modal::before {
@@ -314,12 +355,15 @@ figure {
   z-index: 101;
   background-color: white;
   text-align: center;
+  border: 3px solid #BB5BB1;
+  
 }
 
 .share-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  font-size: x-large;
 }
 
 .share-head i {
@@ -329,8 +373,9 @@ figure {
 .social-links {
   list-style: none;
   display: flex;
-  gap: 2rem;
+  gap: 2.5rem;
   font-size: 3rem;
+  justify-content: center;
   padding-left: 0;
 }
 
@@ -340,45 +385,66 @@ figure {
 
 .copy-btn {
   width: 100%;
+  border-radius: 10px;
+  font-weight: bolder;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+  background: linear-gradient(
+    45deg,
+    var(--primary-color) 0%,
+    var(--accent-color) 100%
+  );
+  
+
 }
 
 #github-link {
   position: fixed;
   top: 0;
   right: 0;
-  width: 100px;
-  height: 100px;
-  /* transform: translateX(-50%); */
-  clip-path: polygon(1% 0, 100% 100%, 100% 1%);
-  background-color: #2b3137;
+  width: 80px;
+  height: 70px;
+  clip-path: polygon(1% 1, 100% 100%, 100% 1%);
+  border-bottom-left-radius: 50px;
+  background: linear-gradient(
+    45deg,
+    var(--primary-color) 0%,
+    var(--accent-color) 100%
+  );
+  padding: 7px;
+  display: flex; 
+  flex-direction: column; 
+  justify-content: center; 
+  align-items: center; 
+}
+
+#github-link:hover{
+  
+  background:#8A3DFF;
+
 }
 
 #github-link a {
-  width: 100px;
-  height: 100px;
   text-decoration: none;
   color: #fff;
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding-left: 45px;
-  padding-top: 10px;
-  text-align: center;
-  width: 50px;
-  height: 50px;
+  flex-direction: column; 
+  justify-content: center; 
+  align-items: center; 
+  padding: 0; 
+  margin-left: 20px; 
+  width: 100%; 
+  height: 100%;
 }
 
 #github-link a img {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 20px;
-  height: 20px;
-  vertical-align: middle;
-  background-position: center;
+  width: 30px;
+  height: 30px;
+  margin-bottom: 0px; 
 }
+
 #github-link h1 {
-  font-size: 10px;
-  font-family: sans-serif;
-}
+  font-size: 16px;
+  font-weight: bolder;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  
+}
\ No newline at end of file