diff --git a/TODO.md b/TODO.md
index fa56e1b..568cd28 100644
--- a/TODO.md
+++ b/TODO.md
@@ -2,3 +2,4 @@
 
 * [X] ~~Сделать кнопку скопировать путь~~
 * [X] ~~Сделать кнопку скопировать путь вместе с командой (`note edit ...`)~~
+* [X] ~~Сделать отображение типа кода и кнопку скопировать код~~
diff --git a/src/main.rs b/src/main.rs
index a411824..afa45ef 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -185,9 +185,7 @@ async fn root_handler(State(state): State<AppState>) -> impl IntoResponse {
     }
 }
 
-async fn render_single_file(
-    file_path: &StdPath,
-) -> Result<NoteTemplate, StatusCode> {
+async fn render_single_file(file_path: &StdPath) -> Result<NoteTemplate, StatusCode> {
     let metadata = match fs::metadata(file_path).await {
         Ok(m) => m,
         Err(_) => return Err(StatusCode::NOT_FOUND),
@@ -216,12 +214,7 @@ async fn render_single_file(
     let html_content = if extension == "md" {
         markdown_to_html(&content, display_path)
     } else {
-        code_to_html(
-            &content,
-            extension.as_str(),
-            &ss,
-            &ts,
-        )
+        code_to_html(&content, extension.as_str(), &ss, &ts)
     };
 
     let filename = file_path
@@ -318,12 +311,7 @@ async fn serve_file(
     let html_content = if extension == "md" {
         markdown_to_html(&content, &full_path)
     } else {
-        code_to_html(
-            &content,
-            extension.as_str(),
-            &ss,
-            &ts,
-        )
+        code_to_html(&content, extension.as_str(), &ss, &ts)
     };
 
     let filename = safe_path
diff --git a/src/markdown.rs b/src/markdown.rs
index d5a2f31..aef0efc 100644
--- a/src/markdown.rs
+++ b/src/markdown.rs
@@ -137,7 +137,7 @@ fn render_end_tag(tag: TagEnd) -> String {
         TagEnd::List(false) => output.push_str("</ul>"),
         TagEnd::Item => output.push_str("</li>"),
         TagEnd::Paragraph => output.push_str("</p>"),
-        TagEnd::CodeBlock => output.push_str("</code></pre>"),
+        TagEnd::CodeBlock => output.push_str("</code></pre></div>"),
         TagEnd::Emphasis => output.push_str("</em>"),
         TagEnd::Strong => output.push_str("</strong>"),
         TagEnd::BlockQuote(_) => output.push_str("</blockquote>"),
@@ -164,16 +164,40 @@ fn render_end_tag(tag: TagEnd) -> String {
 }
 
 fn render_codeblock(block_kind: CodeBlockKind<'_>) -> String {
+    let header = String::from(
+        r#"
+        <div class="code-block-wrapper">
+            <div class="code-header">
+                <span class="code-lang">%CODE%</span> <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            </div>
+    <pre>"#,
+    );
+
+    let mut output = String::new();
+
     match block_kind {
-        CodeBlockKind::Indented => "<pre><code>".to_string(),
+        CodeBlockKind::Indented => {
+            output.push_str(&header.replace("%CODE%", "code"));
+            output.push_str("<code>");
+        }
+
         CodeBlockKind::Fenced(CowStr::Borrowed("mermaid")) => {
-            "<pre><code class=\"language-text mermaid\">".to_string()
+            output.push_str(&header.replace("%CODE%", "mermaid"));
+            output.push_str("<code class=\"language-text mermaid\">");
         }
+
         CodeBlockKind::Fenced(CowStr::Borrowed("rawmermaid")) => {
-            "<pre><code class=\"language-text\">".to_string()
+            output.push_str(&header.replace("%CODE%", "mermaid"));
+            output.push_str("<code class=\"language-text\">");
         }
-        CodeBlockKind::Fenced(code_type) => format!("<pre><code class=\"language-{}\">", code_type),
-    }
+
+        CodeBlockKind::Fenced(code_type) => {
+            output.push_str(&header.replace("%CODE%", &code_type));
+            output.push_str(format!("<code class=\"language-{}\">", code_type).as_str());
+        }
+    };
+
+    output
 }
 
 fn render_blockquote(quote_kind: Option<BlockQuoteKind>) -> String {
diff --git a/templates/base.html b/templates/base.html
index 159ad38..cead784 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -55,6 +55,7 @@
             overflow: hidden;
             background-color: #2b303b;
         }
+
         .code-header {
             display: flex;
             justify-content: space-between;