diff --git a/client/src/App.tsx b/client/src/App.tsx
index 8b5d0c7..c358460 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -8,7 +8,6 @@ import { GamesStore } from "./stores/GamesStore";
 import { ipcRenderer } from "electron";
 import {
   Button,
-  Image,
   Modal,
   ModalHeader,
   ModalBody,
@@ -16,12 +15,9 @@ import {
   ModalContent,
   Progress,
 } from "@nextui-org/react";
-import launcherIcon from "./assets/images/ICON_GrayScale.png";
 import exportedRoutes from "./routes";
 import { SelectLauncherImage } from "./components/images/selectlauncher.component";
-import { toast } from "react-toastify";
-import { FiCheckCircle, FiUserCheck } from "react-icons/fi";
-import { UserStore } from "./stores/UserStore";
+import { FiUserCheck } from "react-icons/fi";
 import { observer } from "mobx-react";
 import { ThemeStore } from "./stores/ThemeStore";
 //#endregion
@@ -35,10 +31,6 @@ const AppComp: React.FC = () => {
   const [verificationModalVisible, setVerificationModalVisible] =
     React.useState(false);
 
-  const closeHandler = () => {
-    setUpdateModalVisible(false);
-  };
-
   //#region Routes
   const page = useRoutes(exportedRoutes);
 
@@ -93,6 +85,7 @@ const AppComp: React.FC = () => {
         isDismissable={false}
         onClose={() => setUpdateModalVisible(false)}
         isOpen={updateModalVisible}
+        // isOpen={true}
         hideCloseButton
       >
         <ModalContent>
@@ -108,17 +101,20 @@ const AppComp: React.FC = () => {
               </ModalHeader>
               <ModalBody className="mt-2 whitespace-pre-wrap">
                 <p>{updateMessage}</p>
-                <div>
-                  <Progress isIndeterminate size="sm" />
-                </div>
+                {!updateDownloaded && (
+                  <div>
+                    <Progress size="sm" />
+                  </div>
+                )}
               </ModalBody>
               {updateDownloaded && (
                 <ModalFooter>
                   <Button
-                    color="success"
+                    color="primary"
+                    variant="shadow"
                     onPress={() => ipcRenderer.send("restart_app")}
                   >
-                    Restart
+                    Restart Now
                   </Button>
                 </ModalFooter>
               )}
diff --git a/client/src/assets/styles/index.css b/client/src/assets/styles/index.css
index f3fdae3..261cca8 100644
--- a/client/src/assets/styles/index.css
+++ b/client/src/assets/styles/index.css
@@ -18,6 +18,7 @@
   --toastify-color-success: #17c964;
   --toastify-color-warning: #f5a524;
   --toastify-color-error: #f31260;
+  --animate-delay: 0.5s;
 }
 
 .Toastify__toast {
diff --git a/client/src/components/appbar/appbar-end.component.tsx b/client/src/components/appbar/appbar-end.component.tsx
new file mode 100644
index 0000000..47f5328
--- /dev/null
+++ b/client/src/components/appbar/appbar-end.component.tsx
@@ -0,0 +1,44 @@
+import { Button, Tooltip } from "@nextui-org/react";
+import React, { FC } from "react";
+import { HiCog } from "react-icons/hi";
+import { Link } from "react-router-dom";
+import UserDropdown from "../dropdowns/user/userdropdown.component";
+import { User } from "@/stores/UserStore";
+
+interface IProps {
+  dashboard: boolean;
+  user: User;
+  cookies: any;
+}
+
+/**
+ * @author
+ * @function @AppbarEnd
+ **/
+
+export const AppbarEnd: FC<IProps> = ({ dashboard, user, cookies }) => {
+  return (
+    <div className="ml-auto">
+      {dashboard && (
+        <div className="flex items-center">
+          <Tooltip content="Settings" placement="bottom">
+            <Link to="/settings">
+              <Button className="bg-content2 mr-2" size="md" isIconOnly>
+                <HiCog size="25" className="w-auto" />
+              </Button>
+            </Link>
+          </Tooltip>
+          <UserDropdown
+            user={{
+              username: user?.username || "",
+              verified: user?.verified || false,
+              accessToken: cookies.accessToken || "",
+              moderator: user?.moderator,
+              pfp: user?.pfp,
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/client/src/components/appbar/appbar-start.component.tsx b/client/src/components/appbar/appbar-start.component.tsx
new file mode 100644
index 0000000..0cc007c
--- /dev/null
+++ b/client/src/components/appbar/appbar-start.component.tsx
@@ -0,0 +1,56 @@
+import { SidebarStore } from "@/stores/SidebarStore";
+import { Button, Tooltip } from "@nextui-org/react";
+import React, { FC } from "react";
+import { FiArrowLeft, FiMenu } from "react-icons/fi";
+import { Link } from "react-router-dom";
+import { SearchInput } from "../search/search-input.component";
+import { observer } from "mobx-react";
+
+interface IProps {
+  isSettings: boolean;
+  pageName: string;
+  searchBarVisible: boolean;
+}
+
+/**
+ * @author
+ * @function @AppbarStart
+ **/
+
+const AppbarStartComp: FC<IProps> = ({
+  isSettings,
+  pageName,
+  searchBarVisible,
+}) => {
+  const { open } = SidebarStore;
+
+  return (
+    <nav className="flex items-center text-base mr-auto">
+      {isSettings ? (
+        <Link to="/store">
+          <Button className="mr-5" startContent={<FiArrowLeft size={20} />}>
+            Back
+          </Button>
+        </Link>
+      ) : (
+        <Tooltip
+          placement="bottom"
+          content={open ? "Close Sidebar" : "Open Sidebar"}
+        >
+          <Button
+            onPress={() => SidebarStore.setOpen(!open)}
+            className="mr-5"
+            isIconOnly
+            color={open ? "primary" : "default"}
+          >
+            {<FiMenu size={24} />}
+          </Button>
+        </Tooltip>
+      )}
+      <p className="font-heading text-2xl uppercase mr-10">{pageName}</p>
+      {searchBarVisible && <SearchInput searchType="game" />}
+    </nav>
+  );
+};
+
+export const AppbarStart = observer(AppbarStartComp);
diff --git a/client/src/components/appbar/appbar.component.tsx b/client/src/components/appbar/appbar.component.tsx
index f6e7d62..fe147b2 100644
--- a/client/src/components/appbar/appbar.component.tsx
+++ b/client/src/components/appbar/appbar.component.tsx
@@ -1,6 +1,6 @@
 import UserDropdown from "../dropdowns/user/userdropdown.component";
 import { getTokensCookie } from "@/utils/storage";
-import { User } from "@/stores/UserStore";
+import { User, UserStore } from "@/stores/UserStore";
 import { Badge, Button, Input, Tooltip } from "@nextui-org/react";
 import { HiCog } from "react-icons/hi";
 import { Link } from "react-router-dom";
@@ -11,6 +11,10 @@ import { SearchStore } from "@/stores/SearchStore";
 import { HiBellAlert } from "react-icons/hi2";
 import { sendVerificationLink } from "@/handlers/api";
 import { useState } from "react";
+import { SearchInput } from "../search/search-input.component";
+import { VerificationBanner } from "./verification-banner.component";
+import { AppbarStart } from "./appbar-start.component";
+import { AppbarEnd } from "./appbar-end.component";
 
 export interface AppBarProps {
   user?: User;
@@ -35,87 +39,25 @@ export const AppBar: React.FC<AppBarProps> = ({
   return (
     <>
       {user && !user?.verified && (
-        <div className="bg-warning items-center flex p-2 bg-opacity-10 mb-5 rounded-lg text-warning">
-          <HiBellAlert size={20} />{" "}
-          <span className="ml-2 font-medium">
-            Some features are disabled. Please verify your e-mail to secure
-            your account.
-          </span>
-          <Button
-            onPress={() =>
-              sendVerificationLink(user?.tokens.accessToken || "", setLoading)
-            }
-            className="ml-auto"
-            color="warning"
-            isLoading={loading}
-          >
-            Resend Verification Link
-          </Button>
-        </div>
+        <VerificationBanner
+          loading={loading}
+          setLoading={setLoading}
+          user={user}
+        />
       )}
       <header className="w-full flex items-center py-2 pt-0">
-        <nav className="flex items-center text-base mr-auto">
-          {settings ? (
-            <Link to="/store">
-              <Button className="mr-5" startContent={<FiArrowLeft size={20} />}>
-                Back
-              </Button>
-            </Link>
-          ) : (
-            <Tooltip
-              placement="bottom"
-              content={SidebarStore.open ? "Close Sidebar" : "Open Sidebar"}
-            >
-              <Button
-                onPress={() => SidebarStore.setOpen(!SidebarStore.open)}
-                className="mr-5"
-                isIconOnly
-                color={SidebarStore.open ? "primary" : "default"}
-              >
-                {<FiMenu size={24} />}
-              </Button>
-            </Tooltip>
-          )}
-          <p className="font-heading text-2xl uppercase mr-10">{pageName}</p>
-          {searchBarVisible && (
-            <Input
-              onChange={(e) => {
-                SearchStore.setSearch({
-                  type: searchType || "game",
-                  query: e.target.value,
-                });
-              }}
-              className="mr-5"
-              placeholder="Search..."
-              value={
-                (SearchStore.search.type == searchType || "game") &&
-                SearchStore.search.query
-              }
-            />
-          )}
-        </nav>
-        <div className="ml-auto">
-          {dashboard && (
-            <div className="flex items-center">
-              <Tooltip content="Settings" placement="bottom">
-                <Link to="/settings">
-                  <Button className="bg-content2 mr-2" size="md" isIconOnly>
-                    <HiCog size="25" className="w-auto" />
-                  </Button>
-                </Link>
-              </Tooltip>
-              <UserDropdown
-                user={{
-                  username: user?.username || "",
-                  verified: user?.verified || false,
-                  accessToken: cookies.accessToken || "",
-                  moderator: user?.moderator,
-                  pfp: user?.pfp,
-                }}
-              />
-            </div>
-          )}
-        </div>
+        <AppbarStart
+          isSettings={settings || false}
+          pageName={pageName}
+          searchBarVisible={searchBarVisible}
+        />
+        {user && (
+          <AppbarEnd
+            cookies={cookies}
+            dashboard={dashboard || true}
+            user={user}
+          />
+        )}
       </header>
     </>
   );
diff --git a/client/src/components/appbar/verification-banner.component.tsx b/client/src/components/appbar/verification-banner.component.tsx
new file mode 100644
index 0000000..67a5758
--- /dev/null
+++ b/client/src/components/appbar/verification-banner.component.tsx
@@ -0,0 +1,42 @@
+import { sendVerificationLink } from "@/handlers/api";
+import { User } from "@/stores/UserStore";
+import { Button } from "@nextui-org/react";
+import React, { FC } from "react";
+import { HiBellAlert } from "react-icons/hi2";
+
+interface IProps {
+  user: User;
+  loading: boolean;
+  setLoading: any;
+}
+
+/**
+ * @author
+ * @function @VerificationBanner
+ **/
+
+export const VerificationBanner: FC<IProps> = ({
+  user,
+  loading,
+  setLoading,
+}) => {
+  return (
+    <div className="bg-warning items-center flex p-2 bg-opacity-10 mb-5 rounded-lg text-warning">
+      <HiBellAlert size={20} />{" "}
+      <span className="ml-2 font-medium">
+        Some features are disabled. Please verify your e-mail to secure your
+        account.
+      </span>
+      <Button
+        onPress={() =>
+          sendVerificationLink(user?.tokens.accessToken || "", setLoading)
+        }
+        className="ml-auto"
+        color="warning"
+        isLoading={loading}
+      >
+        Resend Verification Link
+      </Button>
+    </div>
+  );
+};
diff --git a/client/src/components/search/search-input.component.tsx b/client/src/components/search/search-input.component.tsx
new file mode 100644
index 0000000..03c96e0
--- /dev/null
+++ b/client/src/components/search/search-input.component.tsx
@@ -0,0 +1,34 @@
+import { SearchStore, SearchType } from "@/stores/SearchStore";
+import { Input } from "@nextui-org/react";
+import { observer } from "mobx-react";
+import React, { FC } from "react";
+
+interface IProps {
+  searchType: SearchType;
+}
+
+/**
+ * @author
+ * @function @SearchInput
+ **/
+
+const SearchInputComp: FC<IProps> = ({ searchType }) => {
+  return (
+    <Input
+      onChange={(e) => {
+        SearchStore.setSearch({
+          type: searchType || "game",
+          query: e.target.value,
+        });
+      }}
+      className="mr-5"
+      placeholder="Search..."
+      value={
+        (SearchStore.search.type == searchType || "game") &&
+        SearchStore.search.query
+      }
+    />
+  );
+};
+
+export const SearchInput = observer(SearchInputComp);
diff --git a/client/src/components/sidebar/sidebar.component.tsx b/client/src/components/sidebar/sidebar.component.tsx
index f4308bc..7f2f7cc 100644
--- a/client/src/components/sidebar/sidebar.component.tsx
+++ b/client/src/components/sidebar/sidebar.component.tsx
@@ -81,7 +81,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ active, settings }) => {
         variants={sidebarVariants}
         initial={false}
         animate={SidebarStore.open ? "sidebarOpen" : "sidebarClosed"}
-        className="bg-content1 mr-10 rounded-tr-xl h-full rounded-br-xl"
+        className="bg-content1 mr-10 h-full rounded-br-xl"
       >
         <div className="h-[85vh] p-5">
           <div className="h-full">
diff --git a/client/src/components/titlebar/titlebar.tsx b/client/src/components/titlebar/titlebar.tsx
index 603294b..dbabcba 100644
--- a/client/src/components/titlebar/titlebar.tsx
+++ b/client/src/components/titlebar/titlebar.tsx
@@ -6,7 +6,7 @@ import { FiMaximize, FiMinus, FiX } from "react-icons/fi";
 
 const Titlebar = () => {
   return (
-    <nav className="titlebar h-[40px] w-screen sticky z-50 top-0 bg-opacity-80 bg-background">
+    <nav className="titlebar h-[40px] z-50 backdrop-blur-lg w-screen sticky top-0 bg-content1">
       <div className="flex flex-row mb-2 text-lg h-full tracking-wider font-heading pl-5">
         <div className="mt-1">
           Select Launcher{" "}
diff --git a/client/src/pages/games/[game].tsx b/client/src/pages/games/[game].tsx
index 7e91f5a..66f23ce 100644
--- a/client/src/pages/games/[game].tsx
+++ b/client/src/pages/games/[game].tsx
@@ -29,7 +29,7 @@ const Game: FunctionComponent<GamesInfoProps> = () => {
     <section className="game-page">
       <div className="main flex h-screen overflow-scroll">
         <Sidebar active="home" />
-        <div className="content mr-5 w-full">
+        <div className="content mr-10 mt-5 w-full">
           {user && (
             <AppBar
               searchBarVisible={false}
@@ -39,7 +39,7 @@ const Game: FunctionComponent<GamesInfoProps> = () => {
             />
           )}
 
-          <div className="p-2">
+          <div className="py-2">
             <ContentHeader game={game} />
             <ContentFooter game={game} />
           </div>
diff --git a/client/src/pages/games/components/content_footer.tsx b/client/src/pages/games/components/content_footer.tsx
index dd4cdd0..02a0d13 100644
--- a/client/src/pages/games/components/content_footer.tsx
+++ b/client/src/pages/games/components/content_footer.tsx
@@ -10,11 +10,13 @@ export const ContentFooter = ({ game }: IContentFooterProps) => {
   return (
     <div className="mb-10  mt-10">
       <div className="genres">
-        <p className="uppercase font-heading text-xl">Genres: </p>
-        <p className="text-base opacity-80">
+        <p className="uppercase font-heading text-xl">Genres</p>
+        <p className="text-base opacity-80 mt-2">
           {game?.tags.map((tag) => (
             <Chip color="primary" className="mr-2">
-              {tag[0].toUpperCase() + tag.slice(1)}
+              <p className="font-heading uppercase tracking-wider">
+                {tag[0].toUpperCase() + tag.slice(1)}
+              </p>
             </Chip>
           ))}
         </p>
diff --git a/client/src/pages/games/components/content_header.tsx b/client/src/pages/games/components/content_header.tsx
index eec7fea..231e305 100644
--- a/client/src/pages/games/components/content_header.tsx
+++ b/client/src/pages/games/components/content_header.tsx
@@ -12,21 +12,17 @@ export const ContentHeader = ({ game }: IContentHeaderProps) => {
   return (
     <div content="mr-5 w-full">
       <div className="heading flex items mb-10">
-      <Tooltip
-        placement="bottom"
-        content="Back"
-      >
-        <Link to="/store">
-          <Button 
-          className="mr-5"
-          startContent={<FiArrowLeft size={24} />}
-          isIconOnly
-          content="Store"
-          >
-          </Button>
-        </Link>
-      </Tooltip>
-        <p className="font-heading text-3xl">{game?.name}</p>
+        <Tooltip placement="bottom" showArrow content="Back">
+          <Link to="/store">
+            <Button
+              // className="mr-5"
+              startContent={<FiArrowLeft size={24} />}
+              isIconOnly
+              content="Store"
+            ></Button>
+          </Link>
+        </Tooltip>
+        <p className="font-heading ml-5 text-3xl">{game?.name}</p>
       </div>
 
       <Image
diff --git a/client/src/pages/games/components/info_bar.tsx b/client/src/pages/games/components/info_bar.tsx
index 54d4a1f..c70f97f 100644
--- a/client/src/pages/games/components/info_bar.tsx
+++ b/client/src/pages/games/components/info_bar.tsx
@@ -63,7 +63,7 @@ export const InfoBar = ({ game }: IInfoBarProps) => {
   };
 
   return (
-    <div className="max-h-screen p-5 sticky top-0 right-0 rounded-tl-lg bg-content1 w-96">
+    <div className="max-h-screen p-5 sticky top-0 right-0 bg-content1 w-96">
       <div>
         <Image
           src={game?.image.icon}
diff --git a/client/src/pages/settings/account/account-settings.page.tsx b/client/src/pages/settings/account/account-settings.page.tsx
index cb61319..2278539 100644
--- a/client/src/pages/settings/account/account-settings.page.tsx
+++ b/client/src/pages/settings/account/account-settings.page.tsx
@@ -48,6 +48,11 @@ const AccountSettingsComp: FC<IProps> = (props) => {
   } = useForm({ mode: "onBlur" });
   const [editAccountVisible, setEditAccountVisible] = useState(false);
 
+  const [image, setImage] = useState<any>("");
+  const [removedAvatar, setRemovedAvatar] = useState(false);
+
+  const showImage = image ? image : !removedAvatar ? user?.pfp : image;
+
   const onEditUserSubmit = (data: any) => {
     setLoading(true);
     handleSubmit(data);
@@ -55,7 +60,7 @@ const AccountSettingsComp: FC<IProps> = (props) => {
       user?.tokens.accessToken || "",
       {
         username: data.username,
-        pfp: image ? image : user?.pfp,
+        pfp: showImage,
       },
       setLoading
     ).then(() => {
@@ -63,8 +68,6 @@ const AccountSettingsComp: FC<IProps> = (props) => {
     });
   };
 
-  const [image, setImage] = useState<any>("");
-
   const convertToBase64 = (e: any) => {
     let reader = new FileReader();
     reader.readAsDataURL(e.target.files[0]);
@@ -92,10 +95,7 @@ const AccountSettingsComp: FC<IProps> = (props) => {
           </CardHeader>
           <CardBody>
             <div className="flex">
-              <Image
-                src={user?.pfp || UserImage}
-                className="w-36 h-full object-cover rounded-lg"
-              />
+              <Avatar src={user?.pfp} className="h-32 w-36 rounded-lg" />
               <div className="grid w-full ml-5 grid-cols-1">
                 <div className="bg-content2 rounded-lg p-2 px-3">
                   <p className="font-heading text-base uppercase header">
@@ -192,6 +192,7 @@ const AccountSettingsComp: FC<IProps> = (props) => {
         closeButton
         backdrop="blur"
         aria-labelledby="modal-title"
+        isDismissable={loading ? false : true}
         isOpen={editAccountVisible}
         onClose={() => setEditAccountVisible(false)}
       >
@@ -205,7 +206,7 @@ const AccountSettingsComp: FC<IProps> = (props) => {
             <ModalBody className="mt-2">
               <div className="grid items-center justify-center">
                 <Avatar
-                  src={image ? image : user?.pfp}
+                  src={image ? image : !removedAvatar ? user?.pfp : image}
                   className="mr-2 mb-5 mx-auto w-28 h-28 rounded-xl"
                 />
 
@@ -227,7 +228,14 @@ const AccountSettingsComp: FC<IProps> = (props) => {
                       {image ? "Change" : "Edit"} Avatar
                     </label>
                   </Button>
-                  <Button isDisabled size="sm" color="danger">
+                  <Button
+                    onPress={() => {
+                      setImage("");
+                      setRemovedAvatar(true);
+                    }}
+                    size="sm"
+                    color="danger"
+                  >
                     Remove Avatar
                   </Button>
                 </div>
@@ -259,6 +267,7 @@ const AccountSettingsComp: FC<IProps> = (props) => {
               <Button
                 variant="flat"
                 className="w-auto"
+                isDisabled={loading}
                 onPress={() => {
                   setEditAccountVisible(false);
                   reset();
diff --git a/client/src/pages/store/components/games.store.tsx b/client/src/pages/store/components/games.store.tsx
index 19f74f1..7b28ab6 100644
--- a/client/src/pages/store/components/games.store.tsx
+++ b/client/src/pages/store/components/games.store.tsx
@@ -24,7 +24,7 @@ const StoreGamesComp: FC<IProps> = ({ games }) => {
   );
 
   return games ? (
-    <div className="mb-10">
+    <div className="mb-10 pb-10">
       {(search.type == "game" && search.query.length ? filteredGames : games)
         .length ? (
         <div className="grid grid-flow-col auto-cols-max">
diff --git a/client/src/pages/store/components/header.store.tsx b/client/src/pages/store/components/header.store.tsx
new file mode 100644
index 0000000..89b4499
--- /dev/null
+++ b/client/src/pages/store/components/header.store.tsx
@@ -0,0 +1,37 @@
+import { Button, Image } from "@nextui-org/react";
+import React, { FC } from "react";
+import { BsPlusCircle } from "react-icons/bs";
+
+interface IProps {}
+
+/**
+ * @author
+ * @function @StoreHeader
+ **/
+
+export const StoreHeader: FC<IProps> = (props) => {
+  return (
+    <div className="relative mt-5 h-[400px] rounded-lg blur-0 animate__animated animate__fadeIn">
+      <Image
+        src="https://cdn.discordapp.com/attachments/1030139297577316464/1227698939390591007/image.png?ex=66295abc&is=6616e5bc&hm=3750b650c7dfabb16c2e4b82c5277d85cc37eae44a7898d4d298de43224d683c&"
+        className="store__main-banner h-[400px] rounded-md w-screen object-cover"
+      />
+      <p className="absolute text-2xl w-full text-white rounded-t-md bg-black bg-opacity-30 top-0 p-5 z-50 font-heading uppercase">
+        Featured Game
+      </p>
+      <div className="absolute bottom-0 left-0 p-5 z-50">
+        <p className="font-heading text-3xl text-white uppercase">Rosehill</p>
+        <p className="text-white font-sans font-semibold text-md max-w-3xl">
+          I can't live with the idea I might never see him again; This is a
+          death mission, but I'm willing...
+        </p>
+      </div>
+      <div className="absolute bottom-0 right-0 p-5 z-10 flex">
+        <Button className="mr-2">View Store Page</Button>{" "}
+        <Button startContent={<BsPlusCircle size={20} />} color="success">
+          Get Now
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/client/src/pages/store/store.page.tsx b/client/src/pages/store/store.page.tsx
index 2657278..73ed6c5 100644
--- a/client/src/pages/store/store.page.tsx
+++ b/client/src/pages/store/store.page.tsx
@@ -14,6 +14,7 @@ import { SearchStore } from "@/stores/SearchStore";
 import { FaPlus } from "react-icons/fa6";
 import { HiPlusCircle } from "react-icons/hi";
 import { BsPlusCircle, BsPlusCircleDotted } from "react-icons/bs";
+import { StoreHeader } from "./components/header.store";
 
 interface HomeProps {}
 
@@ -30,37 +31,9 @@ const StoreComp: React.FC<HomeProps> = () => {
         <div className="store__content h-screen overflow-scroll">
           <Sidebar active="store" />
 
-          <ScrollShadow isEnabled className="store__main pr-5">
-            {" "}
-            {/* TODO figure out why scroll no work */}
+          <div className="store__main pr-10">
             <AppBar pageName="Store" dashboard={true} user={UserStore.user!} />
-            <div className="relative mt-5 h-[400px] rounded-lg blur-0 animate__animated animate__fadeIn">
-              <Image
-                src="https://cdn.discordapp.com/attachments/1030139297577316464/1227698939390591007/image.png?ex=66295abc&is=6616e5bc&hm=3750b650c7dfabb16c2e4b82c5277d85cc37eae44a7898d4d298de43224d683c&"
-                className="store__main-banner h-[400px] rounded-md w-screen object-cover"
-              />
-              <p className="absolute text-2xl w-full text-white rounded-t-md bg-black bg-opacity-30 top-0 p-5 z-50 font-heading uppercase">
-                Featured Game
-              </p>
-              <div className="absolute bottom-0 left-0 p-5 z-50">
-                <p className="font-heading text-3xl text-white uppercase">
-                  Rosehill
-                </p>
-                <p className="text-white font-sans font-semibold text-md max-w-3xl">
-                  I can't live with the idea I might never see him again; This
-                  is a death mission, but I'm willing...
-                </p>
-              </div>
-              <div className="absolute bottom-0 right-0 p-5 z-10 flex">
-                <Button className="mr-2">View Store Page</Button>{" "}
-                <Button
-                  startContent={<BsPlusCircle size={20} />}
-                  color="success"
-                >
-                  Get Now
-                </Button>
-              </div>
-            </div>
+            <StoreHeader />
             <p className="store__main-heading text-3xl flex items-center">
               Popular{" "}
               {SearchStore.search.query.length &&
@@ -76,7 +49,7 @@ const StoreComp: React.FC<HomeProps> = () => {
               )}
             </p>
             <StoreGames games={games} />
-          </ScrollShadow>
+          </div>
         </div>
       </div>
     </main>
diff --git a/client/src/stores/SearchStore.ts b/client/src/stores/SearchStore.ts
index 17e150e..e847051 100644
--- a/client/src/stores/SearchStore.ts
+++ b/client/src/stores/SearchStore.ts
@@ -1,7 +1,9 @@
 import { makeAutoObservable } from "mobx";
 
+export type SearchType = "game" | "library" | "settings";
+
 interface Search {
-  type: "game" | "library" | "settings";
+  type: SearchType;
   query: string;
 }