diff --git a/src/lib/components/common/CodeEditor.svelte b/src/lib/components/common/CodeEditor.svelte
index 4eef9f59eb..f25b3c736b 100644
--- a/src/lib/components/common/CodeEditor.svelte
+++ b/src/lib/components/common/CodeEditor.svelte
@@ -11,6 +11,7 @@
 
 	import { onMount } from 'svelte';
 
+	export let boilerplate = '';
 	export let value = '';
 
 	let codeEditor;
@@ -38,7 +39,7 @@
 		// python code editor, highlight python code
 		codeEditor = new EditorView({
 			state: EditorState.create({
-				doc: '',
+				doc: boilerplate,
 				extensions: extensions
 			}),
 			parent: document.getElementById('code-textarea')
diff --git a/src/lib/components/workspace/Tools.svelte b/src/lib/components/workspace/Tools.svelte
new file mode 100644
index 0000000000..074e03b0b6
--- /dev/null
+++ b/src/lib/components/workspace/Tools.svelte
@@ -0,0 +1,34 @@
+<script>
+	import { getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
+	import CodeEditor from './Tools/CodeEditor.svelte';
+
+	let loading = false;
+
+	const submitHandler = async () => {
+		loading = true;
+		// Call the API to submit the code
+	};
+</script>
+
+<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
+	<div class="mx-auto w-full md:px-0 h-full">
+		<div class=" flex flex-col max-h-[100dvh] h-full">
+			<div class="mb-2.5 flex-1 overflow-auto h-0">
+				<CodeEditor />
+			</div>
+			<div class="pb-3">
+				<button
+					class="px-3 py-1.5 text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-gray-50 transition rounded-lg"
+					on:click={() => {
+						submitHandler();
+					}}
+				>
+					{$i18n.t('Save')}
+				</button>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/lib/components/workspace/Tools/CodeEditor.svelte b/src/lib/components/workspace/Tools/CodeEditor.svelte
new file mode 100644
index 0000000000..1696e4bf83
--- /dev/null
+++ b/src/lib/components/workspace/Tools/CodeEditor.svelte
@@ -0,0 +1,44 @@
+<script>
+	import CodeEditor from '$lib/components/common/CodeEditor.svelte';
+
+	export let value = '';
+
+	let boilerplate = `# Add your custom tools using pure Python code here, make sure to add type hints
+# Use Sphinx-style docstrings to document your tools, they will be used for generating tools specifications
+# Please refer to function_calling_filter_pipeline.py file from pipelines project for an example
+
+from datetime import datetime
+import requests
+
+class Tools:
+    def __init__(self):
+        pass
+
+    def get_current_time(self) -> str:
+        """
+        Get the current time.
+        :return: The current time.
+        """
+
+        now = datetime.now()
+        current_time = now.strftime("%H:%M:%S")
+        return f"Current Time = {current_time}"
+
+    def calculator(self, equation: str) -> str:
+        """
+        Calculate the result of an equation.
+        :param equation: The equation to calculate.
+        """
+
+        # Avoid using eval in production code
+        # https://nedbatchelder.com/blog/201206/eval_really_is_dangerous.html
+        try:
+            result = eval(equation)
+            return f"{equation} = {result}"
+        except Exception as e:
+            print(e)
+            return "Invalid equation"
+`;
+</script>
+
+<CodeEditor bind:value {boilerplate} />
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index 1f0b56b1b8..bb891d0105 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/src/routes/(app)/workspace/+layout.svelte
@@ -14,7 +14,11 @@
 	</title>
 </svelte:head>
 
-<div class=" flex flex-col w-full min-h-screen max-h-screen">
+<div
+	class=" flex flex-col w-full min-h-screen max-h-screen {$showSidebar
+		? 'md:max-w-[calc(100%-260px)]'
+		: ''}"
+>
 	<div class=" px-4 pt-3 mt-0.5 mb-1">
 		<div class=" flex items-center gap-1">
 			<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 self-start flex flex-none items-center">
diff --git a/src/routes/(app)/workspace/tools/+page.svelte b/src/routes/(app)/workspace/tools/+page.svelte
index 99cecddb9d..e745cfa80e 100644
--- a/src/routes/(app)/workspace/tools/+page.svelte
+++ b/src/routes/(app)/workspace/tools/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import CodeEditor from '$lib/components/common/CodeEditor.svelte';
+	import Tools from '$lib/components/workspace/Tools.svelte';
 </script>
 
-<CodeEditor />
+<Tools />