diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 63358f8c..1b16baf5 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,31 +1,31 @@
 module.exports = {
-    extends: [
-        'eslint:recommended',
-        'plugin:react/recommended',
-        'plugin:import/recommended',
-        'plugin:jsx-a11y/recommended',
-        'plugin:@typescript-eslint/recommended',
-        'eslint-config-prettier',
-    ],
-    ignorePatterns: ['src-tauri/**/*'],
-    settings: {
-        react: {
-            version: 'detect',
-        },
-        'import/resolver': {
-            node: {
-                paths: ['src-web'],
-                extensions: ['.js', '.jsx', '.ts', '.tsx'],
-            },
-        },
-    },
-    rules: {
-        "jsx-a11y/no-autofocus": "warn",
-        "react/react-in-jsx-scope": "off",
-        "@typescript-eslint/consistent-type-imports": ["error", {
-            prefer: "type-imports",
-            disallowTypeAnnotations: true,
-            fixStyle: "separate-type-imports",
-        }]
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "eslint-config-prettier"
+  ],
+  ignorePatterns: ["src-tauri/**/*"],
+  settings: {
+    react: {
+      version: "detect"
     },
+    "import/resolver": {
+      node: {
+        paths: ["src-web"],
+        extensions: [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  rules: {
+    "jsx-a11y/no-autofocus": "warn",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/consistent-type-imports": ["error", {
+      prefer: "type-imports",
+      disallowTypeAnnotations: true,
+      fixStyle: "separate-type-imports"
+    }],
+  }
 };
diff --git a/src-tauri/icons/icon.icns b/src-tauri/icons/icon.icns
index 0c169d5f..ed1d9efd 100644
Binary files a/src-tauri/icons/icon.icns and b/src-tauri/icons/icon.icns differ
diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx
index e7196e73..21d8c662 100644
--- a/src-web/components/Sidebar.tsx
+++ b/src-web/components/Sidebar.tsx
@@ -1,8 +1,9 @@
 import classnames from 'classnames';
-import { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useCreateRequest } from '../hooks/useCreateRequest';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
+import { useKeyValues } from '../hooks/useKeyValues';
 import { useRequests } from '../hooks/useRequests';
 import { useTheme } from '../hooks/useTheme';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
@@ -16,18 +17,65 @@ interface Props {
   className?: string;
 }
 
+const MIN_WIDTH = 130;
+
 export function Sidebar({ className }: Props) {
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const width = useKeyValues<number>({ key: 'sidebar_width', initialValue: 200 });
   const requests = useRequests();
   const activeRequest = useActiveRequest();
   const createRequest = useCreateRequest({ navigateAfter: true });
   const { appearance, toggleAppearance } = useTheme();
+
+  const moveState = useRef<{ move: (e: MouseEvent) => void; up: () => void } | null>(null);
+  const unsub = () => {
+    if (moveState.current !== null) {
+      document.documentElement.removeEventListener('mousemove', moveState.current.move);
+      document.documentElement.removeEventListener('mouseup', moveState.current.up);
+    }
+  };
+
+  const handleResizeStart = (e: React.MouseEvent<HTMLDivElement>) => {
+    unsub();
+    const mouseStartX = e.clientX;
+    const startWidth = width.value;
+    moveState.current = {
+      move: (e: MouseEvent) => {
+        const newWidth = Math.max(MIN_WIDTH, startWidth + (e.clientX - mouseStartX));
+        width.set(newWidth);
+      },
+      up: () => {
+        unsub();
+        setIsDragging(false);
+      },
+    };
+    document.documentElement.addEventListener('mousemove', moveState.current.move);
+    document.documentElement.addEventListener('mouseup', moveState.current.up);
+    setIsDragging(true);
+  };
+
   return (
     <div
+      style={{ width: `${width.value}px` }}
       className={classnames(
         className,
-        'w-[12rem] bg-gray-100 h-full border-r border-gray-200 relative grid grid-rows-[auto,1fr]',
+        'relative',
+        'bg-gray-100 h-full border-r border-gray-200 relative grid grid-rows-[auto,1fr]',
       )}
     >
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+      <div
+        aria-hidden
+        className="group absolute -right-2 top-0 bottom-0 w-4 cursor-ew-resize flex justify-center"
+        onMouseDown={handleResizeStart}
+      >
+        <div
+          className={classnames(
+            'transition-colors w-[1px] group-hover:bg-white/10 h-full pointer-events-none',
+            isDragging && '!bg-white/20',
+          )}
+        />
+      </div>
       <HStack as={WindowDragRegion} alignItems="center" justifyContent="end">
         <IconButton
           title="Add Request"
diff --git a/src-web/hooks/useKeyValues.ts b/src-web/hooks/useKeyValues.ts
index 3513c009..86e7294a 100644
--- a/src-web/hooks/useKeyValues.ts
+++ b/src-web/hooks/useKeyValues.ts
@@ -14,14 +14,14 @@ export function keyValueQueryKey({
   return ['key_value', { namespace, key: buildKey(key) }];
 }
 
-export function useKeyValues({
+export function useKeyValues<T extends string | number | boolean>({
   namespace = DEFAULT_NAMESPACE,
   key,
   initialValue,
 }: {
   namespace?: string;
   key: string | string[];
-  initialValue: string;
+  initialValue: T;
 }) {
   const query = useQuery<KeyValue | null>({
     initialData: null,
@@ -29,15 +29,25 @@ export function useKeyValues({
     queryFn: async () => invoke('get_key_value', { namespace, key: buildKey(key) }),
   });
 
-  const mutate = useMutation<KeyValue, unknown, string>({
+  const mutate = useMutation<KeyValue, unknown, T>({
     mutationFn: (value) => {
-      return invoke('set_key_value', { namespace, key: buildKey(key), value });
+      return invoke('set_key_value', {
+        namespace,
+        key: buildKey(key),
+        value: JSON.stringify(value),
+      });
     },
   });
 
+  let value: T;
+  try {
+    value = JSON.parse(query.data?.value ?? JSON.stringify(initialValue));
+  } catch (e) {
+    value = initialValue;
+  }
   return {
-    value: query.data?.value ?? initialValue,
-    set: (value: string) => mutate.mutate(value),
+    value,
+    set: (value: T) => mutate.mutate(value),
   };
 }