diff --git a/footer-fix.js b/footer-fix.js
index 7bf8a8c..e090d5f 100644
--- a/footer-fix.js
+++ b/footer-fix.js
@@ -15,4 +15,4 @@ function Footer(){
     )
 }
 
-export default
+export default Footer
diff --git a/src/Footer.js b/src/Footer.js
index b8ed8a3..2656c35 100644
--- a/src/Footer.js
+++ b/src/Footer.js
@@ -1,6 +1,20 @@
 import React from "react";
 import "./index.css";
 
+
+function Footer(){
+    return(
+        <footer>
+            <div className="container">
+                <center>
+                    <p className="p-footer">Made with ❤️ by <a href="https://github.com/surajondev">Suraj Vishwakarma</a></p>
+                    <p className="p-footer">Made with <span role="img" aria-labelledby="love">❤️</span> by <a href="https://github.com/surajondev">Suraj Vishwakarma</a></p>
+                    <p className="p-footer">Source <a href="https://openweathermap.org/">OpenWeather</a></p>
+                </center>
+            </div>
+        </footer>
+    )
+}
 function Footer() {
   const year = new Date().getFullYear();
 
diff --git a/src/ThemeContext.js b/src/ThemeContext.js
new file mode 100644
index 0000000..c64a9d5
--- /dev/null
+++ b/src/ThemeContext.js
@@ -0,0 +1,22 @@
+// ThemeContext.js
+import React, { createContext, useContext, useState } from 'react';
+
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState('light');
+
+  const toggleTheme = () => {
+    setTheme((currentTheme) => (currentTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
diff --git a/src/index.css b/src/index.css
index 59f6415..2f2b10f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,7 +3,7 @@ html {
 }
 body {
   margin: 0 auto;
-  font-family: Arial, sans-serif;
+  font-family:   cursive;
   background-color: #161d28;
 }
 
@@ -15,7 +15,7 @@ img:not(.large-icon) {
 header,
 footer {
   color: white;
-  background-color: #192733;
+  background-image: linear-gradient(to right, #051937, #0d2750, #16376b, #214786, #2c57a3);
   padding: 1.5rem;
  
   text-align: center;
@@ -24,6 +24,7 @@ footer {
 
 
 header {
+  margin-bottom: 1rem;
   margin-bottom: 2rem;
   
 }
@@ -50,6 +51,11 @@ a:hover {
 
 /* TYPOGRAPHY */
 .title {
+  font-size: 2.5rem;
+  font-weight: 30px;
+  display: flex;
+  justify-content: center;
+  padding-left: 0.6rem;
   font-size: 3rem;
   font-weight: 24px;
   padding-left: 0.rem;
@@ -108,6 +114,7 @@ p {
   border-radius: 10em;
   padding: 0 2rem;
   cursor: pointer;
+  transition: 0.5s;
 }
 .clear-button{
    font-size:17px ;
@@ -141,6 +148,8 @@ p {
 
 
 .submit-button:hover {
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  transform: scale(0.9);
   background-color: #6c7077;
 }