diff --git a/frontend/src/components/Auth/AuthModal.tsx b/frontend/src/components/Auth/AuthModal.tsx
index e1826d3..8091f6c 100644
--- a/frontend/src/components/Auth/AuthModal.tsx
+++ b/frontend/src/components/Auth/AuthModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { ToggleButton } from "../Layout/Button";
-import { LogIn as LogInIcon, User as UserIcon, CircleHelp as ForgotIcon} from "lucide-react";
+import { LogIn as LogInIcon, User as UserIcon, CircleHelp as ForgotIcon } from "lucide-react";
 import LoginForm from "./LoginForm";
 import RegisterForm from "./RegisterForm";
 import ForgotPasswordForm from "./ForgotPasswordForm";
@@ -23,11 +23,11 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
   };
 
   const authSwitch = () => {
-    
-    const formMap: { [key: string]: JSX.Element} = {
-      Login: <LoginForm onSubmit={(handleSubmit)} onForgotPassword={() => setSelectedTab("Forgot")}/>,
-      Register: <RegisterForm onSubmit={(handleSubmit)}/>,
-      Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)}/>
+
+    const formMap: { [key: string]: JSX.Element } = {
+      Login: <LoginForm onSubmit={(handleSubmit)} onForgotPassword={() => setSelectedTab("Forgot")} />,
+      Register: <RegisterForm onSubmit={(handleSubmit)} />,
+      Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)} />
     };
     return formMap[selectedTab] || <div>Please select a valid option</div>;
     {/*
@@ -57,30 +57,31 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
         h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem]  transition-all animate-floating "
       >
         {/* Login/Register Buttons Container */}
-        <div className="absolute top-[60px] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible ">
+        <div className="fixed top-[1em] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible ">
           {/* Login Toggle */}
           <ToggleButton
             toggled={selectedTab === "Login"}
-            extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
+            extraClasses={`flex flex-col items-center px-8 "
+              }`}
             onClick={() => setSelectedTab("Login")}
           >
-            <LogInIcon className="h-[40px] w-[40px] mr-1" />
+            <LogInIcon className=" w-[3em] sm:w-[1em] mr-1" />
             Login
           </ToggleButton>
 
           {/* Register Toggle */}
           <ToggleButton
             toggled={selectedTab === "Register"}
-            extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
+            extraClasses="flex flex-col items-center px-8  z-[9001]"
             onClick={() => setSelectedTab("Register")}
           >
-            <UserIcon className="h-[40px] w-[40px] mr-1" />
+            <UserIcon className=" w-[3em] sm:w-[1em] mr-1" />
             Register
           </ToggleButton>
 
 
         </div>
-        
+
         <div
           className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] 
         h-auto max-h-[75vh] m-auto max-w-[350px] min-w-[34vw]  py-[50px] rounded-[5rem]"
@@ -104,17 +105,17 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
               </button>
             </div>
             <>
-            {authSwitch()}
+              {authSwitch()}
             </>
-            
 
-          
-    
+
+
+
           </div>
         </div>
       </div>
 
-      
+
     </>
   );
 };
diff --git a/frontend/src/components/Auth/LoginForm.tsx b/frontend/src/components/Auth/LoginForm.tsx
index cdd27a6..a4f8f8d 100644
--- a/frontend/src/components/Auth/LoginForm.tsx
+++ b/frontend/src/components/Auth/LoginForm.tsx
@@ -101,10 +101,10 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
 
   return (
     <>
-      <div className="h-[100%] flex flex-col items-center p-10">
+      <div className=" flex flex-col items-center p-10">
         <h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Login </h1>
         <div className="mt-10 bg-white/10 backdrop-blur-md p-6 md:p-16 rounded-xl shadow-lg w-full 
-       md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] h-[27.5em] border border-white/10">
+       md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10">
 
           <form
             onSubmit={handleSubmit}
diff --git a/frontend/src/components/Auth/RegisterForm.tsx b/frontend/src/components/Auth/RegisterForm.tsx
index c907ce9..441115f 100644
--- a/frontend/src/components/Auth/RegisterForm.tsx
+++ b/frontend/src/components/Auth/RegisterForm.tsx
@@ -110,10 +110,10 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
   return (
     <>
       <div className="mb-2">
-        <div className="h-[100%] flex flex-col items-center p-10">
+        <div className="flex flex-col items-center p-[2.5rem]">
           <h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Register </h1>
-          <div className="mt-5 bg-white/10 backdrop-blur-md p-10 md:px-16 rounded-xl shadow-lg w-full 
-          md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] h-[31.5em] border border-white/10">
+          <div className="mt-5 bg-white/10 backdrop-blur-md p-[2.5rem] md:px-16 rounded-xl shadow-lg w-full 
+          md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10">
 
             <form
               onSubmit={handleSubmit}
@@ -133,7 +133,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
                   placeholder="Username"
                   value={formData.username}
                   onChange={handleInputChange}
-                  extraClasses={`w-full mb-[1.5em] p-3 ${errors.username ? "border-red-500" : ""}`}
+                  extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.username ? "border-red-500" : ""}`}
                 />
               </div>
 
@@ -147,7 +147,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
                   placeholder="Email"
                   value={formData.email}
                   onChange={handleInputChange}
-                  extraClasses={`w-full mb-[1.5em] p-3 ${errors.email ? "border-red-500" : ""}`}
+                  extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.email ? "border-red-500" : ""}`}
                 />
               </div>
 
@@ -161,7 +161,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
                   placeholder="Password"
                   value={formData.password}
                   onChange={handleInputChange}
-                  extraClasses={`w-full mb-[1.5em] p-3 ${errors.password ? "border-red-500" : ""}`}
+                  extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.password ? "border-red-500" : ""}`}
                 />
               </div>
               <div className="relative w-full">
@@ -175,7 +175,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
                   placeholder="Confirm Password"
                   value={formData.confirmPassword}
                   onChange={handleInputChange}
-                  extraClasses={`w-full mb-[1.5em] p-3 ${errors.confirmPassword ? "border-red-500" : ""}`}
+                  extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.confirmPassword ? "border-red-500" : ""}`}
                 />
               </div>
 
diff --git a/frontend/src/components/Layout/ListRow.tsx b/frontend/src/components/Layout/ListRow.tsx
index 7e75bec..ec3c94d 100644
--- a/frontend/src/components/Layout/ListRow.tsx
+++ b/frontend/src/components/Layout/ListRow.tsx
@@ -52,16 +52,17 @@ const ListRow: React.FC<ListRowProps> = ({
         <h2 className="text-2xl font-bold">{title}</h2>
         <p>{description}</p>
       </div>
-      
+
       <div className="relative overflow-hidden flex items-center z-0">
 
         <ArrowLeftIcon onClick={slideLeft} size={20} className="absolute mr-1 cursor-pointer z-[999]" />
 
         <div
           ref={slider}
-          className="flex overflow-x-scroll whitespace-nowrap scroll-smooth scrollbar-hide gap-5"
-          style={{ scrollbarWidth: 'none', paddingLeft: "30px", paddingTop: "10px", paddingBottom: "10px" }}
+          className="flex overflow-x-scroll whitespace-nowrap scroll-smooth scrollbar-hide gap-5 pr-20"
+          style={{ scrollbarWidth: 'none', paddingLeft: "30px", paddingTop: "10px", paddingBottom: "10px", paddingRight: "50px" }}
         >
+
           {items.map((item) => (
             <ListItem
               key={`${item.type}-${item.id}`}
@@ -98,35 +99,35 @@ export const ListItem: React.FC<ListItemProps> = ({
   streamCategory,
   viewers,
   thumbnail,
-  onItemClick,  
+  onItemClick,
 }) => {
   return (
-    <div className="">
-    <div
-      className="min-w-[430px] overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg 
+    <div className="relative pr-[3]">
+      <div
+        className="min-w-[430px] overflow-visible flex-shrink-0 flex flex-col bg-purple-900 rounded-lg 
      cursor-pointer hover:bg-pink-700 hover:scale-105 transition-all"
-      onClick={onItemClick}
-    >
-      <div className="relative w-full pt-[56.25%] overflow-hidden rounded-t-lg">
-        {thumbnail ? (
-          <img
-            src={thumbnail}
-            alt={title}
-            className="absolute top-0 left-0 w-full h-full object-cover"
-          />
-        ) : (
-          <div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
-        )}
+        onClick={onItemClick}
+      >
+        <div className="relative w-full pt-[56.25%] overflow-hidden rounded-t-lg">
+          {thumbnail ? (
+            <img
+              src={thumbnail}
+              alt={title}
+              className="absolute top-0 left-0 w-full h-full object-cover"
+            />
+          ) : (
+            <div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
+          )}
+        </div>
+        <div className="p-3">
+          <h3 className="font-semibold text-lg text-center">{title}</h3>
+          {type === "stream" && <p className="font-bold">{streamer}</p>}
+          {type === "stream" && (
+            <p className="text-sm text-gray-300">{streamCategory}</p>
+          )}
+          <p className="text-sm text-gray-300">{viewers} viewers</p>
+        </div>
       </div>
-      <div className="p-3">
-        <h3 className="font-semibold text-lg text-center">{title}</h3>
-        {type === "stream" && <p className="font-bold">{streamer}</p>}
-        {type === "stream" && (
-          <p className="text-sm text-gray-300">{streamCategory}</p>
-        )}
-        <p className="text-sm text-gray-300">{viewers} viewers</p>
-      </div>
-    </div>
     </div>
   );
 };
diff --git a/frontend/src/components/Layout/Navbar.tsx b/frontend/src/components/Layout/Navbar.tsx
index 509e9d0..537761f 100644
--- a/frontend/src/components/Layout/Navbar.tsx
+++ b/frontend/src/components/Layout/Navbar.tsx
@@ -73,7 +73,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
         <>
           <Button
             onClick={() => handleSideBar()}
-            extraClasses={`absolute ${showSideBar
+            extraClasses={`fixed ${showSideBar
                 ? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
           bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h
           over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all `
@@ -84,7 +84,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
           </Button>
           <div
             className={`fixed top-0 left-0 w-[250px] h-screen bg-[var(--bg-color)] text-[var(--text-color)] z-[90] overflow-y-auto scrollbar-hide
-              transition-transform transition-opacity duration-500 ease-in-out ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
+               transition-opacity duration-500 ease-in-out ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
               }`}
           >
             <Sidebar />
diff --git a/frontend/src/components/Layout/Sidebar.tsx b/frontend/src/components/Layout/Sidebar.tsx
index 0f8ea28..96ab7a5 100644
--- a/frontend/src/components/Layout/Sidebar.tsx
+++ b/frontend/src/components/Layout/Sidebar.tsx
@@ -47,7 +47,7 @@ const Sidebar: React.FC<SideBarProps> = () => {
   const shownCategory = Object.entries(testCategory).map(([dummyCategory, { dummyLink, dummyImage }]) => {
     return (
       <li key={dummyCategory} className="flex items-center border border-7 border-black space-x-3 rounded-md p-0 text-center
-      hover:bg-[#800020] hover:scale-110 hover:shadow-[-1px_1.5px_10px_white] transition-all duration-250 m-[0.25em]">
+      hover:bg-[#800020] hover:shadow-[-1px_1.5px_10px_white] transition-all duration-250 m-[0.25em]">
         <img src={dummyImage} alt={dummyCategory} className="w-[2em] h-[2em] bg-white ml-[0.25em]" />
         <a href={dummyLink} className="pr-[7.5em] pt-[0.75em] pb-[0.75em]">{dummyCategory}</a>
       </li>
@@ -57,13 +57,13 @@ const Sidebar: React.FC<SideBarProps> = () => {
   return (
     <>
 
-      <div>
+      <div className="overflow-hidden">
         <h1 className="style"> Followed </h1>
         <ul>
           {shownStreamers}
         </ul>
 
-        <h1 className="category-style pt-[0.50em]"> Your Categories </h1>
+        <h1 className="category-style pt-[0.50em] overflow-hidden"> Your Categories </h1>
         <ul>
           {shownCategory}
         </ul>