diff --git a/client/src/App.css b/client/src/App.css
index 60deed4..25f9ac6 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -16,13 +16,14 @@
 }
 
 #right-sidebar {
-    max-height: 100dvh;
+    /* max-height: 100dvh; */
+    max-height: 100svh;
 }
 
 #main {
-    /* padding: 20px; */
     width: 40%;
-    height: 100dvh;
+    /* height: 100dvh; */
+    height: 100svh;
     overflow-y: auto;
     --dot-bg: var(--body_background);
     --dot-color: #4C4E52;
@@ -43,7 +44,7 @@
 
 .sidebar-btn {
     position: absolute;
-    z-index: 2;
+    z-index: 5;
     top: 50%;
     transform: translateY(-50%);
 }
@@ -179,7 +180,7 @@
 
     #main,
     #main.w-full {
-        padding-top: 70px;
+        padding-top: 60px;
         width: 100%;
     }
 
@@ -189,7 +190,6 @@
 
     .debates {
         padding: 10px;
-        padding-top: 0;
         gap: 10px;
     }
 }
\ No newline at end of file
diff --git a/client/src/components/loading/style.css b/client/src/components/loading/style.css
index a923fba..1abaa35 100644
--- a/client/src/components/loading/style.css
+++ b/client/src/components/loading/style.css
@@ -14,7 +14,8 @@
 }
 
 .loading-component {
-    height: calc(100dvh - 40px);
+    /* height: calc(100dvh - 40px); */
+    height: calc(100svh - 40px);
     display: grid;
     place-items: center;
 }
@@ -46,6 +47,7 @@
 
 @media screen and (max-width: 480px) {
     .loading-component {
-        height: calc(100dvh - 150px);
+        /* height: calc(100dvh - 150px); */
+        height: calc(100svh - 150px);
     }
 }
\ No newline at end of file
diff --git a/client/src/components/modal/auth/index.css b/client/src/components/modal/auth/index.css
index 588ef0c..71b61d3 100644
--- a/client/src/components/modal/auth/index.css
+++ b/client/src/components/modal/auth/index.css
@@ -4,7 +4,8 @@
     top: 0;
     left: 0;
     right: 0;
-    height: 100dvh;
+    /* height: 100dvh; */
+    height: 100svh;
     backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
diff --git a/client/src/components/sidebar/left-sidebar.css b/client/src/components/sidebar/left-sidebar.css
index 4ab4024..b2daac4 100644
--- a/client/src/components/sidebar/left-sidebar.css
+++ b/client/src/components/sidebar/left-sidebar.css
@@ -35,7 +35,8 @@
     list-style: none;
     max-width: fit-content;
     height: 100%;
-    max-height: 100dvh;
+    /* max-height: 100dvh; */
+    max-height: 100svh;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
diff --git a/client/src/components/sidebar/right-sidebar.css b/client/src/components/sidebar/right-sidebar.css
index e6b700b..8c3089d 100644
--- a/client/src/components/sidebar/right-sidebar.css
+++ b/client/src/components/sidebar/right-sidebar.css
@@ -154,7 +154,8 @@
 
     #right-sidebar .expand-menu__background.expand {
         z-index: 1;
-        height: 100dvh;
+        /* height: 100dvh; */
+        height: 100svh;
     }
 
     .right-sidebar__container {
diff --git a/client/src/pages/create-debate/editor.css b/client/src/pages/create-debate/editor.css
new file mode 100644
index 0000000..6d75eda
--- /dev/null
+++ b/client/src/pages/create-debate/editor.css
@@ -0,0 +1,92 @@
+.e-rte-container {
+    border: none;
+}
+
+.e-richtexteditor {
+    min-width: 100%;
+    max-width: 100%;
+    min-height: 40vh !important;
+    background-color: var(--bg_primary);
+    color: var(--color_primary);
+    border: 1px solid var(--border_color);
+    overflow-x: hidden;
+}
+
+.e-toolbar.e-extended-toolbar {
+    overflow-x: auto;
+}
+
+.e-richtexteditor .e-toolbar-wrapper.e-rte-tb-float,
+.e-richtexteditor .e-toolbar-container.e-rte-tb-float {
+    top: -20px !important;
+}
+
+.e-richtexteditor .e-toolbar-wrapper {
+    z-index: 4 !important;
+    background-color: var(--bg_secondary);
+}
+
+.e-toolbar,
+.e-toolbar .e-toolbar-item.e-overlay,
+.e-toolbar .e-toolbar-items,
+.e-toolbar .e-toolbar-item .e-tbar-btn,
+.e-toolbar.e-extended-toolbar .e-toolbar-pop,
+.e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator),
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {
+    background-color: var(--bg_secondary);
+    color: #6c757d;
+}
+
+.e-toolbar .e-toolbar-item.e-separator,
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
+    border-color: var(--color_secondary);
+}
+
+.e-toolbar .e-hor-nav {
+    background: var(--bg_secondary);
+}
+
+.e-toolbar .e-popup-down-icon.e-icons {
+    color: var(--color_primary);
+}
+
+.e-richtexteditor .e-rte-content {
+    z-index: 0 !important;
+    background-color: transparent;
+    color: inherit;
+}
+
+.e-toolbar-wrapper {
+    border-bottom-color: var(--border_color);
+}
+
+.e-richtexteditor .rte-placeholder,
+.e-richtexteditor .e-rte-character-count {
+    color: var(--color_primary);
+}
+
+.e-img-uploadwrap,
+.e-droparea {
+    display: none;
+}
+
+.e-dlg-content {
+    padding-top: 0 !important;
+}
+
+.e-richtexteditor .e-resize-handle.e-south-east {
+    z-index: 0 !important;
+    cursor: ns-resize;
+}
+
+.e-richtexteditor .e-rte-character-count {
+    z-index: 0 !important;
+}
+
+@media screen and (max-width: 480px) {
+
+    .e-richtexteditor .e-toolbar-wrapper.e-rte-tb-float,
+    .e-richtexteditor .e-toolbar-container.e-rte-tb-float {
+        top: -70px !important;
+    }
+}
\ No newline at end of file
diff --git a/client/src/pages/create-debate/editor.tsx b/client/src/pages/create-debate/editor.tsx
index d1448f6..f1839cb 100644
--- a/client/src/pages/create-debate/editor.tsx
+++ b/client/src/pages/create-debate/editor.tsx
@@ -1,3 +1,4 @@
+import "./editor.css"
 import {
     RichTextEditorComponent,
     Toolbar,
@@ -13,15 +14,20 @@ import {
     Audio,
     FormatPainter,
     PasteCleanup,
-    Resize,
+    Resize
 } from "@syncfusion/ej2-react-richtexteditor"
 
 interface EditorProps {
     editorRef: React.RefObject<RichTextEditorComponent>
-    rteValue: string
+    rteValue?: string
+    isEditable: boolean
+    setDebateData?: React.Dispatch<React.SetStateAction<{
+        title: string
+        body: string
+    }>>
 }
 
-const Editor: React.FC<EditorProps> = ({ editorRef, rteValue }) => {
+const Editor: React.FC<EditorProps> = ({ editorRef, rteValue, isEditable, setDebateData }) => {
     const items = [
         'Undo',
         'Redo',
@@ -85,13 +91,22 @@ const Editor: React.FC<EditorProps> = ({ editorRef, rteValue }) => {
             id="toolsRTE"
             ref={editorRef}
             value={rteValue}
-            showCharCount={true}
-            toolbarSettings={toolbarSettings}
-            quickToolbarSettings={quickToolbarSettings}
-            enableTabKey={true}
-            enableXhtml={true}
+            showCharCount={isEditable}
+            toolbarSettings={isEditable ? toolbarSettings : undefined}
+            quickToolbarSettings={isEditable ? quickToolbarSettings : undefined}
+            enableTabKey={isEditable}
+            enableXhtml={isEditable}
             placeholder="Your debate body"
-            enableResize={true}
+            enableResize={isEditable}
+            readonly={!isEditable}
+            change={(e: { value: string }) => {
+                if (isEditable && setDebateData) {
+                    setDebateData(prevState => ({
+                        ...prevState,
+                        body: e.value
+                    }));
+                }
+            }}
         >
             <Inject
                 services={[
diff --git a/client/src/pages/create-debate/index.tsx b/client/src/pages/create-debate/index.tsx
index e61e038..06140c5 100644
--- a/client/src/pages/create-debate/index.tsx
+++ b/client/src/pages/create-debate/index.tsx
@@ -1,46 +1,78 @@
 import "./style.css"
 import { useRef, useState } from "react"
 import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor"
-import Editor from "./editor";
+import { toast } from "sonner"
+import Editor from "./editor"
+import Preview from "./preview"
 
 interface CreateProps {
-    isVisible: boolean
-    isFullscreen: boolean
+    isVisible: boolean;
+    isFullscreen: boolean;
 }
 
 const CreateDebatePage: React.FC<CreateProps> = ({ isVisible, isFullscreen }) => {
     const editorRef = useRef<RichTextEditorComponent>(null);
-    const [editorContent, setEditorContent] = useState<string>('');
+    const [debateData, setDebateData] = useState({ title: '', body: '' });
+    const [isPreview, setIsPreview] = useState<boolean>(false);
 
-    const saveEditorContent = () => {
-        if (editorRef.current) {
-            const content = editorRef.current.value;
-            setEditorContent(content);
+    const handlePreviewToggle = () => {
+        if (!isPreview) {
+            if (editorRef.current) {
+                const content = editorRef.current.getHtml();
+                setDebateData({ ...debateData, body: content });
+            }
         }
-    }; console.log(editorContent);
+
+        if (!debateData.title.trim()) return toast.warning("Enter debate title");
+
+        const tempDiv = document.createElement("div");
+        tempDiv.innerHTML = editorRef.current?.value || '';
+        const bodyText = tempDiv.textContent?.replace(/\u200B/g, '').trim();
+
+        if (!bodyText || bodyText === '<br>' || bodyText === '<br><br>' || bodyText === '<br><br><br>') {
+            return toast.warning("Enter debate body");
+        }
+
+        setIsPreview(!isPreview);
+    };
 
     return (
-        <form id='create'>
-            <div className='vertical-space'>
-                <h2>Title</h2>
-                <textarea
-                    className='title__input'
-                    placeholder='Your debate topic'
-                />
-            </div>
-            <div className='vertical-space'>
-                <h2>Body</h2>
-                <Editor
-                    editorRef={editorRef}
-                    rteValue=""
-                />
-            </div>
-            <div className='space' />
+        <div id='create'>
+            <form id='create-debate' className={isPreview ? 'shift-left' : 'shift-right'}>
+                <div className='vertical-space'>
+                    <h2>Title</h2>
+                    <textarea
+                        name='title'
+                        className='title__input'
+                        placeholder='Your debate topic'
+                        value={debateData.title}
+                        onChange={e => setDebateData({ ...debateData, title: e.target.value })}
+                    />
+                </div>
+                <div className='vertical-space'>
+                    <h2>Body</h2>
+                    <Editor
+                        editorRef={editorRef}
+                        isEditable={true}
+                        setDebateData={setDebateData}
+                    />
+                </div>
+            </form>
+
+            <Preview isPreview={isPreview} editorRef={editorRef} debateData={debateData} />
+
             <div className={`debate-btns ${isVisible ? 'reveal' : 'hide'} ${isFullscreen ? 'w-full' : ''}`}>
-                <button type='button' onClick={saveEditorContent}>PREVIEW</button>
-                <button type='submit' onClick={() => { }}>PUBLISH</button>
+                <button
+                    type='button'
+                    onClick={handlePreviewToggle}
+                >
+                    {isPreview ? 'BACK' : 'PREVIEW'}
+                </button>
+                <button type='submit' onClick={() => toast.warning("Currently under development")}>
+                    PUBLISH
+                </button>
             </div>
-        </form>
+        </div>
     );
 }
 
diff --git a/client/src/pages/create-debate/preview.tsx b/client/src/pages/create-debate/preview.tsx
new file mode 100644
index 0000000..863b906
--- /dev/null
+++ b/client/src/pages/create-debate/preview.tsx
@@ -0,0 +1,22 @@
+import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor"
+import Editor from "./editor"
+
+interface PreviewProps {
+    isPreview: boolean
+    editorRef: React.RefObject<RichTextEditorComponent>
+    debateData: {
+        title: string
+        body: string
+    }
+}
+
+const Preview: React.FC<PreviewProps> = ({ isPreview, editorRef, debateData }) => {
+    return (
+        <div className={`preview ${isPreview ? 'shift-left' : 'shift-right'}`}>
+            <h1>{debateData.title}</h1>
+            <Editor editorRef={editorRef} rteValue={debateData.body} isEditable={false} />
+        </div>
+    );
+};
+
+export default Preview;
\ No newline at end of file
diff --git a/client/src/pages/create-debate/style.css b/client/src/pages/create-debate/style.css
index 8fdd377..0f4cceb 100644
--- a/client/src/pages/create-debate/style.css
+++ b/client/src/pages/create-debate/style.css
@@ -1,79 +1,98 @@
-#create {
-    padding: 20px 0;
-    position: relative;
-    min-height: calc(100dvh - 40px);
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
+:root {
+    --bg_primary: #ffffff;
+    --bg_secondary: #f8f9fa;
+    --color_primary: #000;
+    --color_secondary: #dee2e6;
+    --border_color: #dee2e6;
 }
 
-#create h1,
-#create h2 {
-    font-weight: 500;
+[data-theme='dark'] {
+    --bg_primary: #121212;
+    --bg_secondary: #1f1f21;
+    --color_primary: #fff;
+    --color_secondary: #6c757d;
+    --border_color: #1f1f21;
 }
 
-#create .title__input {
-    min-height: 56px;
-    resize: vertical;
-    padding: 5px 10px;
-    font-family: inherit;
-    font-size: 17px;
-    border: 1px solid #dee2e6;
-    border-radius: 5px;
+#create {
+    position: relative;
+    overflow: hidden;
 }
 
-#create .vertical-space {
-    padding: 0 20px;
+#create-debate {
+    padding: 20px 0;
+    height: calc(100svh - 82px);
     display: flex;
     flex-direction: column;
-    gap: 8px;
-}
-
-.e-rte-container {
-    border: none;
+    gap: 20px;
+    overflow-y: auto;
 }
 
-.e-richtexteditor {
-    min-width: 100%;
-    max-width: 100%;
-    min-height: 40vh !important;
-    border: 1px solid #dee2e6;
-    overflow-x: hidden;
+#create-debate.shift-left {
+    position: relative;
+    top: 0;
+    left: -100%;
+    transition: left 250ms ease-in-out;
 }
 
-.e-richtexteditor .e-toolbar-wrapper.e-rte-tb-float,
-.e-richtexteditor .e-toolbar-container.e-rte-tb-float {
-    top: -20px !important;
+#create-debate.shift-right {
+    position: relative;
+    top: 0;
+    left: 0;
+    transition: left 250ms ease-in-out;
 }
 
-.e-richtexteditor .e-toolbar-wrapper {
-    z-index: 4 !important;
+.preview {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    padding: 20px;
+    background-color: var(--body_background);
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    overflow-y: auto;
 }
 
-.e-richtexteditor .e-rte-content .e-content {
-    min-height: 40vh;
+.preview.shift-left {
+    left: 0;
+    transition: left 250ms ease-in-out;
 }
 
-.e-richtexteditor .e-rte-content {
-    z-index: 0 !important;
+.preview.shift-right {
+    left: 100%;
+    transition: left 250ms ease-in-out;
 }
 
-.e-img-uploadwrap,
-.e-droparea {
-    display: none;
+#create h1 {
+    font-size: 30px;
+    font-weight: 600;
 }
 
-.e-dlg-content {
-    padding-top: 0 !important;
+#create h2 {
+    font-weight: 600;
 }
 
-.e-richtexteditor .e-resize-handle.e-south-east {
-    z-index: 0 !important;
-    cursor: ns-resize;
+#create-debate .title__input {
+    min-height: 56px;
+    resize: vertical;
+    padding: 5px 10px;
+    background-color: var(--bg_primary);
+    color: var(--color_primary);
+    font-family: inherit;
+    font-size: 17px;
+    border: 1px solid var(--border_color);
+    border-radius: 5px;
+    outline: none;
 }
 
-.e-richtexteditor .e-rte-character-count {
-    z-index: 0 !important;
+#create-debate .vertical-space {
+    padding: 0 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
 .debate-btns {
@@ -90,21 +109,38 @@
 }
 
 .debate-btns button {
-    padding: 7.5px 20px;
-    background-color: var(--card_background);
-    font-size: 20px;
+    padding: 8px 0;
+    width: 125px;
+    background-color: var(--bg_secondary);
+    font-size: 18px;
     border: 1px solid var(--explore_input_bg);
     border-radius: 5px;
 }
 
 .debate-btns button:hover {
-    background-color: var(--explore_input_bg);
+    background-color: var(--bg_primary);
     transition: background-color 0.2s ease-in-out;
 }
 
-.space {
-    width: 100%;
-    height: 63px;
+.preview #toolsRTE_toolbar_wrapper {
+    display: none;
+}
+
+.preview .e-richtexteditor,
+.preview .e-richtexteditor .e-rte-content .e-content {
+    min-height: fit-content !important;
+    height: fit-content !important;
+    background-color: var(--body_background);
+    border: none;
+}
+
+.preview .e-richtexteditor .e-rte-content {
+    transition: none;
+}
+
+.preview .e-richtexteditor .e-rte-content .e-content {
+    padding-top: 0;
+    padding-bottom: 0;
 }
 
 @media screen and (min-width: 1921px) {
@@ -132,20 +168,15 @@
 }
 
 @media screen and (max-width: 480px) {
-    #create {
-        padding: 0;
-        min-height: calc(100dvh - 140px);
+    #create-debate {
+        padding: 10px 0;
+        height: calc(100svh - 120px - 62px);
     }
 
-    #create .vertical-space {
+    #create-debate .vertical-space {
         padding: 0 10px;
     }
 
-    .e-richtexteditor .e-toolbar-wrapper.e-rte-tb-float,
-    .e-richtexteditor .e-toolbar-container.e-rte-tb-float {
-        top: -70px !important;
-    }
-
     .debate-btns {
         width: 100%;
         padding: 10px;
@@ -161,7 +192,8 @@
         transition: bottom 0.4s ease-out;
     }
 
-    .space {
-        height: 53px;
+    .preview {
+        padding: 10px;
+        gap: 10px;
     }
 }
\ No newline at end of file
diff --git a/client/src/pages/home/index.tsx b/client/src/pages/home/index.tsx
index 03e06c4..9eeec47 100644
--- a/client/src/pages/home/index.tsx
+++ b/client/src/pages/home/index.tsx
@@ -1,7 +1,7 @@
 import "./style.css"
 import { AuthStatus, useAuthStore } from "../../store/useAuthStore"
-import { useNavStore } from "../../store/useNavStore";
-import ClaimUsername from "../../components/card/claim-username";
+import { useNavStore } from "../../store/useNavStore"
+import ClaimUsername from "../../components/card/claim-username"
 import { ClosedDebateCard } from "../../components/card/closed-debate-card"
 import { OpenDebateCard } from "../../components/card/open-debate-card"
 
diff --git a/client/src/pages/search/style.css b/client/src/pages/search/style.css
index d36742d..8fe548e 100644
--- a/client/src/pages/search/style.css
+++ b/client/src/pages/search/style.css
@@ -54,7 +54,6 @@
 @media screen and (max-width: 480px) {
     #search {
         padding: 10px;
-        padding-top: 0;
     }
 
     #search #explore {