diff --git a/components/Nav.tsx b/components/Nav.tsx
index 1fae8b7..ec604a6 100644
--- a/components/Nav.tsx
+++ b/components/Nav.tsx
@@ -8,7 +8,7 @@ export default function NavBar() {
     <nav class="bg-base-300 w-full py-4 px-8 flex flex-col md:flex-row gap-4">
       <div class="flex items-center flex-1">
         <div class="flex items-center gap-1">
-          <image alt="Website logo" src="/logo.png" class="h-8 w-8" />
+          <image alt="Website logo" src="/logo.webp" class="h-8 w-8" />
           <a href="/" class="text-2xl ml-1 font-bold hover:animate-pulse">
             NakhlahJS
           </a>
diff --git a/islands/Editor.tsx b/islands/Editor.tsx
index 0df3554..2045526 100644
--- a/islands/Editor.tsx
+++ b/islands/Editor.tsx
@@ -52,18 +52,18 @@ export default function Editor(props: CounterProps) {
 
   return (
     <>
-      <div class="flex gap-2 px-2">
+      <div class="flex gap-2 px-2 overflow-hidden">
         <button
           class="btn btn-info grow"
           onClick={handleCodeRun}
         >
-          Run
+          تشغيل
         </button>
         <button
           class="btn btn-active btn-ghost grow"
           onClick={handleCodeClear}
         >
-          Clear
+          مسح
         </button>
       </div>
 
diff --git a/routes/[slug].tsx b/routes/[slug].tsx
index 8dacc67..4bd2f07 100644
--- a/routes/[slug].tsx
+++ b/routes/[slug].tsx
@@ -55,7 +55,15 @@ export default function CoursePage(props: PageProps<Course>) {
 
       <main>
         <div dir="ltr" class="split flex-grow max-h-screen min-h-screen">
-          <div id="split-0" class="overflow-y-scroll">
+          <div id="split-0" class="flex flex-col gap-2">
+            <p class="py-2 bg-[#1E1E1E]"></p>
+            <div dir="ltr" class="h-[400px]" id="editor"></div>
+            <Editor
+              preCode={'console.log("Hello World!")'}
+              testCode={"x == x"}
+            />
+          </div>
+          <div id="split-1" class="overflow-y-scroll">
             <section dir="rtl" class="p-3 py-5">
               <div class="flex flex-col gap-2 md:flex-row justify-between items-center mb-4">
                 <h1 class="text-3xl">{course.title}</h1>
@@ -92,14 +100,6 @@ export default function CoursePage(props: PageProps<Course>) {
               />
             </section>
           </div>
-          <div id="split-1" class="flex flex-col gap-2">
-            <p class="py-2 bg-[#1E1E1E]"></p>
-            <div dir="ltr" class="h-[400px]" id="editor"></div>
-            <Editor
-              preCode={'console.log("Hello World!")'}
-              testCode={"x == x"}
-            />
-          </div>
         </div>
       </main>
     </>
diff --git a/routes/_404.tsx b/routes/_404.tsx
index b063dc6..4070f7c 100644
--- a/routes/_404.tsx
+++ b/routes/_404.tsx
@@ -10,7 +10,7 @@ export default function Error404() {
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <img
             class="my-6"
-            src="/logo.png"
+            src="/logo.webp"
             width="128"
             height="128"
             alt="the Fresh logo: a sliced lemon dripping with juice"
diff --git a/static/logo.webp b/static/logo.webp
new file mode 100644
index 0000000..141ca65
Binary files /dev/null and b/static/logo.webp differ
diff --git a/static/styles.css b/static/styles.css
index 81fea70..983742f 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -10,6 +10,10 @@ body .markdown-body {
   background-color: inherit !important;
 }
 
+.markdown-body h2 {
+  width: fit-content;
+}
+
 .split {
   display: flex;
   flex-direction: row;
@@ -37,10 +41,9 @@ pre {
 mark {
   background-color: transparent;
   color: inherit;
-
-  border: 1px solid #cccccc; /* Border color, you can change it */
-  padding: 10px; /* Adjust padding as needed */
-  display: inline-block; /* Display as inline-block to contain content */
+  border: 1px solid #cccccc;
+  padding: 10px;
+  display: inline-block; 
   position: relative; 
   border-radius: 10px;
   margin-bottom: 10px;