diff --git a/apps/web/public/images/Champion-Badge.png b/apps/web/public/images/Champion-Badge.png
index 3c5dc55..e742101 100644
Binary files a/apps/web/public/images/Champion-Badge.png and b/apps/web/public/images/Champion-Badge.png differ
diff --git a/apps/web/public/images/Warrior-Badge.png b/apps/web/public/images/Warrior-Badge.png
index a37c1ec..4a043b9 100644
Binary files a/apps/web/public/images/Warrior-Badge.png and b/apps/web/public/images/Warrior-Badge.png differ
diff --git a/apps/web/src/app/assets/css/Contents.css b/apps/web/src/app/assets/css/Contents.css
index 495bcfa..3b17244 100644
--- a/apps/web/src/app/assets/css/Contents.css
+++ b/apps/web/src/app/assets/css/Contents.css
@@ -1,9 +1,26 @@
+
+.h-t-contents{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.line-top-br{
+    display: flex;
+    border-top: 1px solid #f5CC00;
+    width: 90%;
+    height: auto;
+}
 .f-tr-img{
     display: flex;
     width: 100%;
     height: auto;
 }
-
+.c-bottom{
+    display: grid;
+    background-color: #f5CC00;
+    margin-bottom: 0;
+}
 
 @media only screen and (max-width: 400px) {
     #txt-3-s{
diff --git a/apps/web/src/app/assets/css/Footer.css b/apps/web/src/app/assets/css/Footer.css
index aa271d6..91bd0cc 100644
--- a/apps/web/src/app/assets/css/Footer.css
+++ b/apps/web/src/app/assets/css/Footer.css
@@ -3,11 +3,11 @@
 footer {
     background-color: #F5CC00;
     color: #003566;
-    padding: 1rem 0;
+    padding: 1rem;
     position: relative;
     bottom: 0;
     width: 100%;
-    margin-top: auto;
+    margin-top: 0;
   }
   
   .f-content {
@@ -15,18 +15,44 @@ footer {
     flex-direction: row;
     align-items: center;
     margin: 0 auto;
-    width: 100%;
+    width: 90%;
+    height: auto;
+    justify-content: center;
+    align-content: center;
+    border-top: 1px solid #003566;
+    gap: 10rem;
+    padding: 20px;
+  }
+  .not-f-c{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0 auto;
+    width: 90%;
     height: auto;
     justify-content: center;
     align-content: center;
     gap: 10rem;
+    padding: 20px;
   }
   
   .leftColumn {
     display: flex;
+    flex-direction: column;
     justify-content: center;
-    gap: 1rem;
+    gap: 10px;
+    align-items: center;
+  }
+  .title{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: -45px;
+  }
+  .btn-app-st{
+    display: flex;
     align-items: center;
+    justify-items: center;
   }
   
   .text {
diff --git a/apps/web/src/app/assets/css/NFT.css b/apps/web/src/app/assets/css/NFT.css
index e9f3022..3fed2e2 100644
--- a/apps/web/src/app/assets/css/NFT.css
+++ b/apps/web/src/app/assets/css/NFT.css
@@ -49,9 +49,8 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        background-color: whitesmoke;
         outline: 1px solid #F5CC00;
-        color: #003566;
+        color: whitesmoke;
         flex-direction: column;
         padding: 23px;
         width: 260px;
diff --git a/apps/web/src/app/pages/contents.tsx b/apps/web/src/app/pages/contents.tsx
index eea9ed4..ccf2591 100644
--- a/apps/web/src/app/pages/contents.tsx
+++ b/apps/web/src/app/pages/contents.tsx
@@ -3,12 +3,12 @@
 import Image from "next/legacy/image";
 
 const Content_Area = () => {
+
   return (
     <>
-      <div className="bg-blue-800 py-16 relative mb-10">
+      <div className="h-t-contents bg-blue-800 py-16 relative mb-10">
         <hr
-          style={{ width: "90%" }}
-          className="absolute top-0 left-1/2 transform -translate-x-1/2 w-1/2 border-t-2 border-yellow-400"
+          className="line-top-br"
         />
         <h2 id="txt-3-s"
           style={{ fontSize: 50, padding: 40 }}
@@ -75,7 +75,7 @@ const Content_Area = () => {
       </div>
 
       <div
-        className="bg-yellow-400 py-16 mt-10 mx-10"
+        className="c-bottom py-16 mt-10 mx-10"
         style={{ padding: "40px" }}
       >
         <h2
diff --git a/apps/web/src/app/pages/footer.tsx b/apps/web/src/app/pages/footer.tsx
index 8ec94db..17c1039 100644
--- a/apps/web/src/app/pages/footer.tsx
+++ b/apps/web/src/app/pages/footer.tsx
@@ -3,12 +3,18 @@ import { FaInstagram, FaYoutube, FaSquareXTwitter } from "react-icons/fa6";
 import googlePlayImage from "../../../public/images/google-play.png";
 import appStoreImage from "../../../public/images/AppStore.png"; 
 import Image from "next/image";
+import { usePathname } from "next/navigation";
 
 const Footers: React.FC = () => {
+
+  const path = usePathname();
+
   return (
     <footer>
-      <div className="f-content">
+      <div className={path === "/"? "f-content": "not-f-c"}>
         <div className="leftColumn">
+        <div className="title">Coming Soon</div>
+        <div className="btn-app-st">
           <a 
             href="#"
             target="_blank" 
@@ -25,6 +31,7 @@ const Footers: React.FC = () => {
           >
             <Image src={appStoreImage} alt="App Store" className="buttonImage" />
           </a>
+          </div>
         </div>
         <p className="text">
           © {new Date().getFullYear()} Xottle. All rights reserved.
diff --git a/apps/web/src/app/pages/topbar.tsx b/apps/web/src/app/pages/topbar.tsx
index e4f1eb1..76c6fd3 100644
--- a/apps/web/src/app/pages/topbar.tsx
+++ b/apps/web/src/app/pages/topbar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState} from "react";
 import { Modal, Sidebar } from "flowbite-react";
 import Image from "next/image";
 import Link from "next/link";
@@ -17,12 +17,10 @@ import ConnectWallet_icon from "../assets/svg/Wallet_Connect.svg";
 import BraveWallet_icon from "../assets/svg/Brave_Wallet.svg";
 import Toggle_On from "../assets/svg/toggle-on.svg";
 import Toggle_Off from "../assets/svg/toggle-off.svg";
-import Inbox_icon from "../assets/svg/Inbox.svg";
 
 import { motion } from "framer-motion";
 import {
   HiOutlineCamera,
-  HiBell,
   HiShoppingBag,
   HiOutlineGift,
   HiClipboardList,