diff --git a/src/assets/hamburger-menu.svg b/src/assets/hamburger-menu.svg
new file mode 100644
index 00000000..a03e4ea2
--- /dev/null
+++ b/src/assets/hamburger-menu.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+  <rect width="40" height="40" rx="20" fill="#5F5F5F" fill-opacity="0.08"/>
+  <rect x="10" y="11" width="20" height="2" fill="#5F5F5F"/>
+  <rect x="10" y="19" width="20" height="2" fill="#5F5F5F"/>
+  <rect x="10" y="27" width="20" height="2" fill="#5F5F5F"/>
+</svg>
diff --git a/src/images.ts b/src/images.ts
index 653a120c..736e82de 100644
--- a/src/images.ts
+++ b/src/images.ts
@@ -49,6 +49,7 @@ import "./assets/eye-stroke.svg";
 import "./assets/eye.svg";
 import "./assets/favicon.ico";
 import "./assets/form-field-error-icon.svg";
+import "./assets/hamburger-menu.svg";
 import "./assets/help-icon.png";
 import "./assets/left-arrow-dark.svg";
 import "./assets/loader.svg";
diff --git a/src/ui/components/dialog/dialog.scss b/src/ui/components/dialog/dialog.scss
index a1f9566c..041624e9 100644
--- a/src/ui/components/dialog/dialog.scss
+++ b/src/ui/components/dialog/dialog.scss
@@ -103,3 +103,11 @@
 		justify-content: space-evenly;
 	}
 }
+
+@media (max-width: 485px) {
+	.dialog-container {
+		width: 95%;
+		padding-left: 14px;
+		padding-right: 14px;
+	}
+}
diff --git a/src/ui/components/header/header.scss b/src/ui/components/header/header.scss
index c43cde0d..a7042180 100644
--- a/src/ui/components/header/header.scss
+++ b/src/ui/components/header/header.scss
@@ -13,7 +13,7 @@
  * under the License.
  */
 
-.st-header {
+.st-header-desktop {
 	position: fixed;
 	width: 100%;
 	z-index: 100;
@@ -26,3 +26,97 @@
 	background: #fff;
 	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
 }
+
+.st-header-mobile {
+	display: none;
+
+	.overlay {
+		background: rgba(0, 0, 0, 0.4);
+		position: fixed;
+		inset: 0;
+		height: 100vh;
+
+		z-index: 9999;
+
+		margin-top: 70px;
+	}
+
+	svg {
+		cursor: pointer;
+	}
+
+	.close-btn {
+		background: rgba(95, 95, 95, 0.08);
+		border-radius: 50%;
+		border: none;
+
+		height: 40px;
+		width: 40px;
+	}
+
+	.menu-container {
+		width: 95%;
+
+		height: fit-content;
+
+		border-radius: 12px;
+		background: #fff;
+		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
+
+		position: fixed;
+		inset: 0;
+		margin: auto;
+		margin-top: 80px;
+		z-index: 9999;
+
+		padding: 36px 40px;
+
+		.divider {
+			background: #aaa;
+			height: 1px;
+			width: 100%;
+			margin: 40px auto;
+		}
+
+		button {
+			width: 100%;
+			justify-content: center;
+		}
+	}
+
+	.menu-content {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		width: 100%;
+
+		.sidebar-list {
+			margin-top: 0;
+
+			& > li {
+				margin-left: 0;
+				margin-right: 0;
+			}
+		}
+	}
+}
+
+@media (max-width: 1024px) {
+	.st-header-desktop {
+		display: none;
+	}
+
+	.st-header-mobile {
+		position: fixed;
+		width: 100%;
+		z-index: 9999;
+		background: var(--color-white);
+
+		display: flex;
+		justify-content: start;
+		align-items: center;
+		gap: 14px;
+
+		padding: 14px 12px;
+	}
+}
diff --git a/src/ui/components/header/index.tsx b/src/ui/components/header/index.tsx
index aa5c40ff..afc7012c 100644
--- a/src/ui/components/header/index.tsx
+++ b/src/ui/components/header/index.tsx
@@ -16,19 +16,70 @@
 import { getImageUrl } from "../../../utils";
 import SignOutBtn from "../auth/SignOutBtn";
 
+import { ReactComponent as CloseIcon } from "../../../assets/close.svg";
+import { ReactComponent as HamburgerMenuIcon } from "../../../assets/hamburger-menu.svg";
+
+import { useState } from "react";
+import "../sidebar";
+import { SideBarContent } from "../sidebar";
 import "./header.scss";
 
 export const LOGO_LIGHT = getImageUrl("ST_icon_light_theme.svg");
 
 export default function Header() {
+	const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+	function closeMenu() {
+		setIsMenuOpen(false);
+	}
+
+	function openMenu() {
+		setIsMenuOpen(true);
+	}
+
 	return (
-		<header className="st-header">
-			<img
-				className="logo"
-				src={LOGO_LIGHT}
-				alt="Supertokens"
-			/>
-			<SignOutBtn />
-		</header>
+		<>
+			<header className="st-header-desktop">
+				<img
+					className="logo"
+					src={LOGO_LIGHT}
+					alt="Supertokens"
+				/>
+				<SignOutBtn />
+			</header>
+			<header className="st-header-mobile">
+				{isMenuOpen ? (
+					<button
+						className="close-btn"
+						onClick={closeMenu}>
+						<CloseIcon />
+					</button>
+				) : (
+					<HamburgerMenuIcon onClick={openMenu} />
+				)}
+				<img
+					className="logo"
+					src={LOGO_LIGHT}
+					alt="Supertokens"
+				/>
+				{isMenuOpen ? (
+					<>
+						<div
+							className="overlay"
+							onClick={closeMenu}></div>
+
+						<div className="menu-container">
+							<div className="menu-content">
+								<div onClick={closeMenu}>
+									<SideBarContent />
+								</div>
+							</div>
+							<div className="divider" />
+							<SignOutBtn />
+						</div>
+					</>
+				) : null}
+			</header>
+		</>
 	);
 }
diff --git a/src/ui/components/sidebar/index.tsx b/src/ui/components/sidebar/index.tsx
index c97e6df3..a94fa53e 100644
--- a/src/ui/components/sidebar/index.tsx
+++ b/src/ui/components/sidebar/index.tsx
@@ -20,24 +20,29 @@ const sidebarItems = [
 	},
 ];
 
-export default function SideBar() {
+export function SideBarContent() {
 	const location = useLocation();
 
+	return (
+		<ul className="sidebar-list">
+			{sidebarItems.map((item) => {
+				return (
+					<li key={item.id}>
+						<Link
+							className={`${location.pathname === item.href ? "active" : ""}`}
+							to={item.href}>
+							{item.icon} <span>{item.title}</span>
+						</Link>
+					</li>
+				);
+			})}
+		</ul>
+	);
+}
+export default function SideBar() {
 	return (
 		<aside className="sidebar">
-			<ul>
-				{sidebarItems.map((item) => {
-					return (
-						<li key={item.id}>
-							<Link
-								className={`${location.pathname === item.href ? "active" : ""}`}
-								to={item.href}>
-								{item.icon} <span>{item.title}</span>
-							</Link>
-						</li>
-					);
-				})}
-			</ul>
+			<SideBarContent />
 		</aside>
 	);
 }
diff --git a/src/ui/components/sidebar/sidebar.scss b/src/ui/components/sidebar/sidebar.scss
index ee59921d..60d74664 100644
--- a/src/ui/components/sidebar/sidebar.scss
+++ b/src/ui/components/sidebar/sidebar.scss
@@ -6,50 +6,56 @@
 	border-right: 1px solid var(--light-borders-border-base, #e5e7eb);
 	background-color: var(--color-window-bg);
 	z-index: 10;
+}
 
-	ul {
-		margin-top: 50px;
-		list-style-type: none;
-	}
+.sidebar-list {
+	margin-top: 50px;
+	list-style-type: none;
+}
 
-	ul > li {
-		margin: 14px 16px;
+.sidebar-list > li {
+	margin: 14px 16px;
 
-		& .active {
-			border-radius: 6px;
-			border: 1px solid rgba(255, 153, 51, 0.15);
-			background: rgba(255, 153, 51, 0.1);
+	& .active {
+		border-radius: 6px;
+		border: 1px solid rgba(255, 153, 51, 0.15);
+		background: rgba(255, 153, 51, 0.1);
 
-			color: #f93;
-			font-weight: 500;
+		color: #f93;
+		font-weight: 500;
 
-			& > svg {
-				stroke: var(--color-primary);
-			}
+		& > svg {
+			stroke: var(--color-primary);
 		}
 	}
+}
 
-	ul > li > a {
-		display: block;
-		padding: 6px 8px;
-		border-radius: 6px;
+.sidebar-list > li > a {
+	display: block;
+	padding: 6px 8px;
+	border-radius: 6px;
 
-		color: var(--light-foregrounds-fg-subtle, #4b5563);
-		font-size: 13px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px;
+	color: var(--light-foregrounds-fg-subtle, #4b5563);
+	font-size: 13px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px;
 
-		border: 1px solid transparent;
+	border: 1px solid transparent;
 
-		text-decoration: none;
+	text-decoration: none;
 
-		display: flex;
-		justify-content: flex-start;
-		gap: 12px;
+	display: flex;
+	justify-content: flex-start;
+	gap: 12px;
 
-		&:hover:not(.active) {
-			background: #eee;
-		}
+	&:hover:not(.active) {
+		background: #eee;
+	}
+}
+
+@media (max-width: 1024px) {
+	.sidebar {
+		display: none;
 	}
 }
diff --git a/src/ui/components/table/table.scss b/src/ui/components/table/table.scss
index e2af8046..26f5280e 100644
--- a/src/ui/components/table/table.scss
+++ b/src/ui/components/table/table.scss
@@ -93,6 +93,10 @@
 		font-weight: 500;
 		text-transform: uppercase;
 		padding: 18px 14px 18px 36px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 126px;
 	}
 
 	&:last-child {
diff --git a/src/ui/components/userDetail/loginMethods/loginMethods.scss b/src/ui/components/userDetail/loginMethods/loginMethods.scss
index b652dfc6..30f83b27 100644
--- a/src/ui/components/userDetail/loginMethods/loginMethods.scss
+++ b/src/ui/components/userDetail/loginMethods/loginMethods.scss
@@ -103,6 +103,21 @@
 	}
 }
 
+@media (max-width: 480px) {
+	.method {
+		.method-header {
+			padding: 16px 8px;
+		}
+		.method-body {
+			padding: 18px 8px;
+		}
+
+		.left {
+			flex-direction: column;
+		}
+	}
+}
+
 .send-mail-icon {
 	cursor: pointer;
 	& > :first-child {
diff --git a/src/ui/components/userDetail/userDetail.scss b/src/ui/components/userDetail/userDetail.scss
index 1df3004e..b7878ab3 100644
--- a/src/ui/components/userDetail/userDetail.scss
+++ b/src/ui/components/userDetail/userDetail.scss
@@ -293,3 +293,9 @@ $container-width: 829;
 .pill {
 	margin-top: 4px;
 }
+
+@media (max-width: 425px) {
+	.user-detail {
+		padding: 72px 12px 48px;
+	}
+}
diff --git a/src/ui/components/userDetail/userRoles/userRolesList.scss b/src/ui/components/userDetail/userRoles/userRolesList.scss
index fc8693b0..f3823610 100644
--- a/src/ui/components/userDetail/userRoles/userRolesList.scss
+++ b/src/ui/components/userDetail/userRoles/userRolesList.scss
@@ -1,6 +1,6 @@
 .user-roles-list-wrapper {
 	& > ul {
-		padding: 4px 0 24px 0;
+		padding: 0px 24px 24px 24px;
 		border-bottom: 1px solid var(--color-border);
 
 		li {
diff --git a/src/ui/components/userroles/components/SelectPermissions.tsx b/src/ui/components/userroles/components/SelectPermissions.tsx
index ede46cef..3854bba6 100644
--- a/src/ui/components/userroles/components/SelectPermissions.tsx
+++ b/src/ui/components/userroles/components/SelectPermissions.tsx
@@ -90,8 +90,8 @@ export default function SelectPermissions({
 					{permissions.length < 1 ? (
 						<div className="info-container">
 							<SecuityKeyIcon />
-							<h1>This Role don't have any permissions associated.</h1>
-							<p>Please add permissions to this role.</p>
+							<h1>No Permissions associated with this Role!</h1>
+							<p>Added Permissions for role will appear here.</p>
 						</div>
 					) : null}
 				</div>
diff --git a/src/ui/components/userroles/components/dialogs/AssignRoles.tsx b/src/ui/components/userroles/components/dialogs/AssignRoles.tsx
index 95fb21d7..c076813a 100644
--- a/src/ui/components/userroles/components/dialogs/AssignRoles.tsx
+++ b/src/ui/components/userroles/components/dialogs/AssignRoles.tsx
@@ -196,6 +196,7 @@ export default function AssignRolesDialog({
 						Go Back
 					</Button>
 					<Button
+						disabled={isAddingRoles}
 						color={selectedRoles.length > 0 && roles.length !== assignedRoles.length ? "primary" : "gray"}
 						onClick={assignRoles}
 						isLoading={isAddingRoles}>
diff --git a/src/ui/components/userroles/components/dialogs/EditRole.tsx b/src/ui/components/userroles/components/dialogs/EditRole.tsx
index 00d857ed..402c7dc5 100644
--- a/src/ui/components/userroles/components/dialogs/EditRole.tsx
+++ b/src/ui/components/userroles/components/dialogs/EditRole.tsx
@@ -112,6 +112,7 @@ export default function EditRoleDialog({ closeDialog, selectedRole }: { closeDia
 								Go Back
 							</Button>
 							<Button
+								disabled={permissions.length === 0}
 								isLoading={isSaving}
 								onClick={handleSave}>
 								Save
diff --git a/src/ui/layouts/mainLayout.scss b/src/ui/layouts/mainLayout.scss
index c022f614..d4e8a92a 100644
--- a/src/ui/layouts/mainLayout.scss
+++ b/src/ui/layouts/mainLayout.scss
@@ -7,3 +7,11 @@
 		min-height: 100vh;
 	}
 }
+
+@media (max-width: 1024px) {
+	.main-layout-container {
+		.main-content {
+			margin-left: 0;
+		}
+	}
+}
diff --git a/src/ui/pages/userroles/index.scss b/src/ui/pages/userroles/index.scss
index 218b3ee9..b000b4da 100644
--- a/src/ui/pages/userroles/index.scss
+++ b/src/ui/pages/userroles/index.scss
@@ -43,5 +43,13 @@
 @media (max-width: 1024px) {
 	.userroles-container {
 		padding: 72px 40px 48px;
+		max-width: 100%;
+	}
+}
+
+@media (max-width: 480px) {
+	.userroles-container {
+		padding: 72px 18px 48px;
+		max-width: 100%;
 	}
 }
diff --git a/src/ui/pages/userroles/index.tsx b/src/ui/pages/userroles/index.tsx
index 4ea345ad..37fc1af7 100644
--- a/src/ui/pages/userroles/index.tsx
+++ b/src/ui/pages/userroles/index.tsx
@@ -16,10 +16,8 @@
 import { useState } from "react";
 import { ReactComponent as PlusIcon } from "../../../assets/plus.svg";
 
-import useRolesService from "../../../api/userroles/role";
 import { AppEnvContextProvider } from "../../contexts/AppEnvContext";
 
-import { usePermissionsService } from "../../../api/userroles/role/permissions";
 import { RolesTable } from "../../components/userroles/components/RolesTable";
 
 import Button from "../../components/button";
@@ -28,9 +26,6 @@ import UserRolesContextProvider from "../../components/userroles/context/UserRol
 import "./index.scss";
 
 export default function UserRolesList() {
-	const { deleteRole } = useRolesService();
-	const { addPermissionsToRole, removePermissionsFromRole } = usePermissionsService();
-
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
 
 	function openDialog() {
@@ -41,28 +36,6 @@ export default function UserRolesList() {
 		setIsDialogOpen(false);
 	}
 
-	async function handleDeleteRole(role: string) {
-		const response = await deleteRole(role);
-		alert("role deleted");
-	}
-
-	async function handleAddPermissions(role: string, permissionsInputId: string) {
-		const permissionsInput = document.getElementById(permissionsInputId) as HTMLInputElement;
-
-		await addPermissionsToRole(role, permissionsInput.value.trim() !== "" ? permissionsInput.value.split(",") : []);
-
-		alert("role updated with permisssions");
-	}
-
-	async function handleDeletePermissions(role: string, permission: string) {
-		await removePermissionsFromRole(role, [permission]);
-		alert("permission removed");
-	}
-
-	async function onSearch(paginationToken?: string, search?: object) {
-		return;
-	}
-
 	return (
 		<AppEnvContextProvider
 			connectionURI={
diff --git a/src/ui/pages/usersList/UsersList.scss b/src/ui/pages/usersList/UsersList.scss
index e97e5faf..f6c23fa4 100644
--- a/src/ui/pages/usersList/UsersList.scss
+++ b/src/ui/pages/usersList/UsersList.scss
@@ -90,3 +90,9 @@ $container-padding-horizontal: 40;
 		margin: 0 auto;
 	}
 }
+
+@media (max-width: 480px) {
+	.users-list {
+		padding: 72px 18px 48px;
+	}
+}