diff --git a/app/package.json b/app/package.json
index 8a348bb..86ab54a 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "videochat-app",
-  "version": "0.5.0",
+  "version": "0.4.0",
   "description": "Random videochat app",
   "license": "UNLICENSED",
   "private": true,
diff --git a/app/src/components/partials/Resizable.jsx b/app/src/components/partials/Resizable.jsx
index 95cc382..9bcb443 100644
--- a/app/src/components/partials/Resizable.jsx
+++ b/app/src/components/partials/Resizable.jsx
@@ -1,6 +1,6 @@
 import { forwardRef, useEffect } from "react";
 
-import { RiExpandLeftRightFill } from "react-icons/ri";
+import { HiDotsVertical } from "react-icons/hi";
 
 const Resizable = forwardRef(({ children, className, resizeFunction }, ref) => {
     const handleResize = () => {
@@ -14,12 +14,12 @@ const Resizable = forwardRef(({ children, className, resizeFunction }, ref) => {
     useEffect(() => {
         document.addEventListener("mouseup", stopResize)
     })
-
+    
     return (
         <div ref={ref} className={`resizable relative ${className}`}>
             { children }
             <span onMouseDown={handleResize} className="handle hidden relative md:block group">
-                <RiExpandLeftRightFill className="h-4 w-4 absolute top-1/2 text-base-content/20" />
+                <HiDotsVertical className="h-4 w-4 my-4 top-1/2 text-base-content/30" />
             </span>
         </div>
     )
diff --git a/app/src/index.css b/app/src/index.css
index 685c410..82fa40e 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -65,7 +65,7 @@
 
     @media (min-width: 768px) {
         .grid-chat.text-only{
-            grid-template-columns: 1fr;
+            grid-template-columns: 1fr !important;
         }
 
         .grid-chat{        
@@ -75,17 +75,18 @@
 
         .grid-chat .resizable .handle{
             position: absolute;
-            width: 1rem;
-            height: 100%;        
+            width: 1rem;    
             left: 100%;
             cursor: col-resize;
+            top: calc(30vh - 0.5rem);
         }
 
-        .grid-chat .resizable .handle:after{
-            position: absolute;
+        .grid-chat .resizable .handle:after, .grid-chat .resizable .handle:before{
+            position: relative;
+            display: block;
             content: "";
             width: 2px;
-            height: 100%;        
+            height: 10vh;        
             left: calc(50% - 1px);
             background-color: hsl(var(--bc) / 0.2);
             border-radius: 1px;
diff --git a/app/src/routes/chat/index.jsx b/app/src/routes/chat/index.jsx
index 797fe94..ccdb114 100644
--- a/app/src/routes/chat/index.jsx
+++ b/app/src/routes/chat/index.jsx
@@ -109,6 +109,12 @@ const Chat = () => {
 
         return () => { timeout && clearTimeout(timeout) }
     }, [status])
+
+    useEffect(() => { 
+        const handleGrid = (e) => { if(window.innerWidth < 768) grid.current.style = "" }
+        window.addEventListener("resize", handleGrid)
+        return () => window.removeEventListener("resize", handleGrid)
+    }, [])
    
     return (
         <section ref={grid} className={`grid grid-chat gap-4 w-full relative min-h-display ${isTextOnly && "text-only"}`}>
diff --git a/app/src/routes/chat/index.jsx.bak b/app/src/routes/chat/index.jsx.bak
deleted file mode 100644
index 6225b3b..0000000
--- a/app/src/routes/chat/index.jsx.bak
+++ /dev/null
@@ -1,200 +0,0 @@
-import { ChatBox, ChatControls, VideoBox } from "./components";
-import { RETRY_DELAY, STATUS } from "../../constants/chat";
-import { TagInput, Toggle } from "../../components/partials";
-import { useCallback, useEffect, useMemo } from "react";
-
-import { ADS } from "../../constants/ads";
-import Ad from "../../components/ad";
-import { MdReport } from "react-icons/md"
-import { requestFullscreen } from "../../lib/fullscreen";
-import { useChat } from "../../hooks/useChat";
-import { useCookieConsent } from "../../hooks/useCookieConsent";
-import { useDevice } from "../../hooks/useDevice";
-import useMouseMoving from "../../hooks/useMouseMoving";
-import { useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-
-const Chat = () => { 
-    const { 
-        state: { tac, mode, status, confirmation, interests, interest, auto, lang, chats }, 
-        dispatch,
-        createOffer, 
-        connect, 
-        checkNSFW,
-        reportPeer,
-        disconnect, 
-        messages, 
-        sendMessage, 
-        stopStream, 
-        startStream, 
-        localStream, 
-        remoteStream,
-        closeConnection,
-        isDisabled,
-        isDisconnected,
-        peer
-    } = useChat();
-    const { t } = useTranslation();
-    const { isMobile } = useDevice();
-    const { cookieConsent: { targeting } } = useCookieConsent();
-    
-    const isMouseMoving = useMouseMoving();
-    const navigate = useNavigate();
-    const isTextOnly = useMemo(()=> mode === "text", [mode]);
-    const isUnmoderated = useMemo(()=> mode === "unmoderated", [mode]);
-    const isAdPlaying = useMemo(() => status === STATUS.ADPLAYING, [status])
-    
-    const startSearch = useCallback(async () => {
-        if(isDisabled || status === STATUS.CONNECTING) return;
-        if(!isUnmoderated) await checkNSFW();
-        await createOffer();
-    }, [createOffer, isDisabled, isUnmoderated, status])
-
-    const stopSearch = useCallback(async () => {
-        await closeConnection();
-    }, [closeConnection])
-
-    const onClick = useCallback(async () => {
-        isMobile && requestFullscreen();
-        dispatch({ type: "CONFIRMATION", payload: confirmation < 3 ? confirmation + 1 : 0})
-        
-        confirmation === 0 && await startSearch();
-        confirmation === 2 && await stopSearch();
-    }, [confirmation, dispatch, startSearch, stopSearch])
-   
-    useEffect(()=>{
-        if(isDisabled) return;
-        if(!tac) navigate("/");
-        else connect(mode);
-        return () => {
-            stopStream();
-            closeConnection();
-            disconnect();
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
-
-    useEffect(() => {
-        mode && navigate(`/${mode}`)
-    }, [mode, navigate])
-
-    useEffect(() => { 
-        mode !== "text" && tac && !localStream && status !== STATUS.NOCAM && startStream()
-        mode === "text" && stopStream();
-     }, [localStream, mode, startStream, status, stopStream, tac])
-     
-    useEffect(() => {
-        if(!isDisconnected || !auto || isMobile || isMouseMoving || isDisabled) return
-        let timeout = setTimeout(onClick, 1000);
-
-        return () => { timeout && clearTimeout(timeout) }
-    }, [auto, isDisconnected, isMobile, isMouseMoving, isDisabled, onClick])
-    
-    useEffect(() => {
-        if (status !== STATUS.COMMON) return
-
-        let timeout = setTimeout(async () => {
-            status === STATUS.COMMON && await createOffer(true)
-        }, RETRY_DELAY)
-
-        return () => { timeout && clearTimeout(timeout) }
-    }, [status])
-
-    return (
-        <section className="flex flex-col md:flex-row flex-1 w-full gap-4 relative min-h-display">
-            {
-                !isTextOnly &&
-                <div className="flex flex-col w-full md:max-w-1/4 justify-between gap-4 max-h-content min-h-full">
-                    <div className="flex flex-col gap-4 relative min-h-full">
-                        <VideoBox 
-                            source={remoteStream} 
-                            className="relative aspect-4/3" 
-                            loading={!remoteStream && status.includes("search")} 
-                            withAds={true} 
-                            playAd={ isDisconnected || isAdPlaying }
-                            isUnmoderated={isUnmoderated}
-                        />
-                        <VideoBox 
-                            source={localStream}
-                            muted={true}
-                            className={`${isAdPlaying ? "animate-fade-out" : "animate-fade-in"} md:animate-none w-[25%] bottom-2 right-2 md:aspect-4/3 md:bottom-[auto] md:right-[auto] md:w-auto absolute md:relative`} 
-                            loading={!localStream} 
-                        />
-                    </div>
-                    <div className="absolute top-2 left-2 md:top-[auto] md:left-[auto] md:relative min-w-0 md:min-w-1/4 opacity-60 md:opacity-100">
-                        <button onClick={reportPeer} className="btn btn-error btn-sm md:btn-md md:btn-block md:h-16"><MdReport className="h-6 w-6"/> <span className="hidden md:inline">{t("chat.report")}</span></button>
-                    </div>
-                </div>
-            }
-            <div className="flex flex-col flex-1 gap-4 max-h-content">
-                <ChatBox 
-                        className="scroll flex flex-col flex-1 gap-4 min-h-full overflow-y-auto" 
-                        messages={messages} 
-                        status={status} 
-                        simulated={peer.current.simulated} 
-                        unmoderated={isUnmoderated}
-                        common={peer.current.interests?.filter( i => interests.has(i)) || []} 
-                        lang={peer.current.lang === lang && lang !== "any"}
-                        ad={isTextOnly || isUnmoderated }
-                    >
-                        { 
-                            (isDisconnected || status === STATUS.STOPPED) &&
-                            
-                            <div className={`flex flex-col md:flex-row gap-4 w-full max-w-4xl ${isMobile && "md:items-end"}`}>
-                                <div className="flex flex-col gap-4 flex-1">
-                                    <Toggle onChange={() => dispatch({type: "INTEREST", payload: !interest})} checked={interest}>
-                                        { t("chat.interests") }
-                                    </Toggle>
-                                    <div className="flex flex-col gap-2 order-3">
-                                        <TagInput
-                                            values={interests} 
-                                            onAdd={(i) => dispatch({type: "ADD_INTEREST", payload: i})}
-                                            onDelete={(i) => dispatch({type: "DEL_INTEREST", payload: i})}
-                                            className="w-full"
-                                            placeholder={t("common.addinterests")}
-                                        />
-                                        { isDisconnected && auto && isMouseMoving && !isMobile &&
-                                            <span className="badge badge-primary w-full badge-lg rounded-md">{t("chat.mousemoving")}</span>
-                                        }  
-                                    </div> 
-                                </div>
-                                <div className="flex flex-col gap-4">
-                                    {
-                                        !isMobile &&
-                                            <Toggle onChange={() => dispatch({type: "TOGGLE_AUTO"})} checked={auto}>
-                                                {t("chat.reconnect")}
-                                            </Toggle>  
-                                    } 
-                                    <div className="flex flex-col gap-2 justify-end">
-                                        <button 
-                                            onClick={() => {
-                                                onClick()
-                                            }} 
-                                            className="btn btn-lg w-full btn-primary "
-                                        >
-                                            {t("chat.newchat")}
-                                        </button>
-                                        <button 
-                                            onClick={()=>dispatch({type: "MODE", payload: mode === "text" ? "video" : "text" })} 
-                                            className="btn text-sm btn-xs w-full text-xs self-end h-fit"
-                                        >
-                                            { t("common.switchto") } { t(`common.${mode === "text" ? "video" : "text"}`)}
-                                        </button>
-                                    </div> 
-                                </div>
-                            </div>
-                        }
-                </ChatBox>
-                <ChatControls 
-                    onClick={onClick} 
-                    onSubmit={sendMessage} 
-                    state={confirmation} 
-                    disabled={isDisabled || status === STATUS.CONNECTING}
-                />
-                { targeting && <Ad zoneId={ADS.pagePush[isUnmoderated ? "unmoderated" : "moderated"]} keywords={Array.from(interests)} />}
-            </div>
-        </section>
-    )
-}
-
-export default Chat;
\ No newline at end of file
diff --git a/package.json b/package.json
index 04890b3..2be8b29 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "videochat",
-  "version": "0.5.0",
+  "version": "0.4.0",
   "description": "Random video chat",
   "license": "UNLICENSED",
   "private": true,
diff --git a/server/package.json b/server/package.json
index 13c72e3..38331a0 100644
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "videochat-server",
-  "version": "0.5.0",
+  "version": "0.4.0",
   "description": "Random videochat server",
   "license": "UNLICENSED",
   "private": true,