diff --git a/package-lock.json b/package-lock.json
index 3e089ae..a4d22b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "github-fork-ribbon-css": "^0.2.3",
         "lodash": "^4.17.21",
         "luxon": "^1.28.0",
+        "lz-string": "^1.5.0",
         "monaco-editor": "^0.34.0",
         "monaco-editor-webpack-plugin": "^7.0.1",
         "react": "^17.0.2",
@@ -34,6 +35,7 @@
         "@types/jest": "^26.0.15",
         "@types/lodash": "^4.14.185",
         "@types/luxon": "^3.0.1",
+        "@types/lz-string": "^1.5.0",
         "@types/node": "^12.0.0",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^18.0.6",
@@ -2517,6 +2519,16 @@
       "integrity": "sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==",
       "dev": true
     },
+    "node_modules/@types/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@types/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-s84fKOrzqqNCAPljhVyC5TjAo6BH4jKHw9NRNFNiRUY5QSgZCmVm5XILlWbisiKl+0OcS7eWihmKGS5akc2iQw==",
+      "deprecated": "This is a stub types definition. lz-string provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "lz-string": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -10397,7 +10409,6 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
-      "dev": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
diff --git a/package.json b/package.json
index 75ba9a0..be63cc4 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "github-fork-ribbon-css": "^0.2.3",
     "lodash": "^4.17.21",
     "luxon": "^1.28.0",
+    "lz-string": "^1.5.0",
     "monaco-editor": "^0.34.0",
     "monaco-editor-webpack-plugin": "^7.0.1",
     "react": "^17.0.2",
@@ -66,6 +67,7 @@
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.185",
     "@types/luxon": "^3.0.1",
+    "@types/lz-string": "^1.5.0",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^18.0.6",
diff --git a/public/index.html b/public/index.html
index 2fc967e..6e48e5e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,11 +7,13 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <link rel="shortcut icon" href="favicon.ico" />
+
     <link
-      href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.3/slate/bootstrap.min.css"
       rel="stylesheet"
-      integrity="sha384-ywjdn7N8uoxzIfGl7jlEBlqw2BNicOSzZDgo7A2ffvbM24Ct9plRp7KwtaIqZ33j"
+      href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.3/slate/bootstrap.min.css"
+      integrity="sha512-3EVe7TjxthzbTGfmRFr7zIvHjDWW7viFDgKOoTJ7S5IIrrKVN5rbPVjj0F7nT6rTyAkURnzwoujxlALvHoO9jw=="
       crossorigin="anonymous"
+      referrerpolicy="no-referrer"
     />
 
     <link
diff --git a/src/components/About/About.spec.tsx b/src/components/About/About.spec.tsx
index 88eae3a..b9fd6bb 100644
--- a/src/components/About/About.spec.tsx
+++ b/src/components/About/About.spec.tsx
@@ -5,25 +5,26 @@ import { AppContext } from 'context/AppContext';
 import { AppAactions } from 'context/Reducer';
 
 describe('<About />', () => {
-  it('render libraries list', () => {
-    render(<About />);
-    const listElement = screen.getByTestId('about-libraries-list');
-    expect(listElement.children.length).toEqual(LIBRARIES.length);
-  });
-
-  it('calls dipatch on button click', () => {
-    const state = {
-      display: 'block',
-    } as AppState;
-    const dispatch = jest.fn();
+  const state = {
+    display: 'block',
+  } as AppState;
+  const dispatch = jest.fn();
 
+  beforeEach(() => {
     render(
-      // eslint-disable-next-line react/jsx-no-constructed-context-values
       <AppContext.Provider value={{ state, dispatch }}>
         <About />
       </AppContext.Provider>
     );
-    fireEvent.click(screen.getByText(/close/i));
+  });
+
+  it('render libraries list', () => {
+    const listElement = screen.getByTestId('about-libraries-list');
+    expect(listElement.children.length).toEqual(LIBRARIES.length);
+  });
+
+  it('calls dipatch on button click', () => {
+    fireEvent.click(screen.getByTestId('modal-close-btn'));
 
     expect(dispatch).toHaveBeenCalledWith({
       type: AppAactions.TOGGLE_ABOUT_MODAL,
diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx
index 1003cc4..88de65f 100644
--- a/src/components/About/About.tsx
+++ b/src/components/About/About.tsx
@@ -2,84 +2,53 @@ import { useContext } from 'react';
 import { LIBRARIES } from 'helpers/const';
 import { AppContext } from 'context/AppContext';
 import { AppAactions } from 'context/Reducer';
+import Modal from 'components/Modal';
 
 const About: React.FC = () => {
   const { state, dispatch } = useContext(AppContext);
 
+  const open = state.display !== 'none';
+
+  const handleClose = () => {
+    dispatch({ type: AppAactions.TOGGLE_ABOUT_MODAL, payload: 'none' });
+  };
+
   return (
-    <div>
-      <div
-        data-testid="about-main-container"
-        className="modal fade show"
-        style={{ display: state.display }}
-      >
-        <div className="modal-dialog">
-          <div className="modal-content">
-            <div className="modal-header">
-              <h4 className="modal-title">About JS Playground</h4>
-            </div>
-            <div className="modal-body">
-              <p>
-                JS Playground is an experimental JavaScript PlayGround created
-                for Education and Testing Purposes
-              </p>
-              <div>
-                This sandbox playground is hooked up directly with
-                <ul data-testid="about-libraries-list">
-                  {LIBRARIES.map(lib => (
-                    <li key={lib.name}>
-                      <div
-                        style={{
-                          display: 'flex',
-                          flex: 1,
-                          justifyContent: 'space-between',
-                        }}
-                      >
-                        <a
-                          href={lib.url}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {lib.name}{' '}
-                          <span className="text-sm">v{lib.version}</span>
-                        </a>
-                        <span>Use as {lib.use}</span>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-              <p>Enjoy</p>
-              <div>
-                <div className="float-left">
-                  <a
-                    href="https://nyala.dev"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    Khalid Elshafie
-                  </a>
-                </div>
-              </div>
-            </div>
-            <div className="modal-footer">
-              <button
-                type="button"
-                className="btn btn-primary"
-                onClick={() =>
-                  dispatch({
-                    type: AppAactions.TOGGLE_ABOUT_MODAL,
-                    payload: 'none',
-                  })
-                }
+    <Modal isOpen={open} onClose={handleClose} title="About JS Playground">
+      <p>
+        JS Playground is an experimental JavaScript PlayGround created for
+        Education and Testing Purposes
+      </p>
+      <div>
+        This sandbox playground is hooked up directly with
+        <ul data-testid="about-libraries-list">
+          {LIBRARIES.map(lib => (
+            <li key={lib.name}>
+              <div
+                style={{
+                  display: 'flex',
+                  flex: 1,
+                  justifyContent: 'space-between',
+                }}
               >
-                Close
-              </button>
-            </div>
-          </div>
+                <a href={lib.url} target="_blank" rel="noopener noreferrer">
+                  {lib.name} <span className="text-sm">v{lib.version}</span>
+                </a>
+                <span>Use as {lib.use}</span>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <p>Enjoy</p>
+      <div>
+        <div className="float-left">
+          <a href="https://nyala.dev" target="_blank" rel="noopener noreferrer">
+            Khalid Elshafie
+          </a>
         </div>
       </div>
-    </div>
+    </Modal>
   );
 };
 
diff --git a/src/components/ActionButton/ActionButton.tsx b/src/components/ActionButton/ActionButton.tsx
index d2bd135..6bfdc88 100644
--- a/src/components/ActionButton/ActionButton.tsx
+++ b/src/components/ActionButton/ActionButton.tsx
@@ -11,6 +11,12 @@ const ButtonProps: Record<ActionButtonType, ActionButtonTypeProps> = {
     className: 'btn btn-success',
     toolTip: 'Run Code (CtrCmd + k)',
   },
+  history: {
+    title: 'History',
+    icon: 'fas fa-history',
+    className: 'btn btn-warning',
+    toolTip: 'Show run history',
+  },
 };
 
 const ActionButton: React.FC<ActionButtonProps> = ({
diff --git a/src/components/ActionButton/types.d.ts b/src/components/ActionButton/types.d.ts
index f547c9e..62b5fab 100644
--- a/src/components/ActionButton/types.d.ts
+++ b/src/components/ActionButton/types.d.ts
@@ -1,4 +1,4 @@
-type ActionButtonType = 'execute' | 'clear';
+type ActionButtonType = 'execute' | 'clear' | 'history';
 
 interface ActionButtonProps {
   type: ActionButtonType;
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 5e0bbf5..db2b99e 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -7,6 +7,7 @@ import ContextMenu from 'components/ContextMenu';
 import JsonView from 'components/JsonView';
 import CodeEditor from 'components/CodeEditor';
 import Console from 'components/Console';
+import HistoryModal from 'components/HistoryModal';
 
 const App: React.FC = () => {
   const { dispatch } = useContext(AppContext);
@@ -52,6 +53,8 @@ const App: React.FC = () => {
           setPosition(null);
         }}
       />
+
+      <HistoryModal />
     </div>
   );
 };
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index a972923..359e716 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -26,13 +26,13 @@ const Header: React.FC = () => {
   };
 
   return (
-    <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
+    <nav className="navbar navbar-expand-lg navbar-dark bg-primary px-2">
       <a className="navbar-brand" href="/">
         JS PlayGround
       </a>
 
-      <div className="collapse navbar-collapse" id="navbarColor01">
-        <ul className="navbar-nav mr-auto">
+      <div className="collapse navbar-collapse">
+        <ul className="navbar-nav me-auto">
           <li className="nav-item">
             <button
               type="button"
@@ -49,6 +49,7 @@ const Header: React.FC = () => {
             </button>
           </li>
         </ul>
+
         <div className="my-2 app-actions">
           <div>
             <select
@@ -97,6 +98,12 @@ const Header: React.FC = () => {
             onClick={() => dispatch({ type: AppAactions.CLEAR_RESULT })}
           />
 
+          <span style={{ marginLeft: 20, marginRight: 20 }} />
+          <ActionButton
+            type="history"
+            onClick={() => dispatch({ type: AppAactions.TOGGLE_HISTORY_MODAL })}
+          />
+
           <span style={{ marginLeft: 20, marginRight: 20 }} />
           <ActionButton
             type="execute"
diff --git a/src/components/HistoryModal/HistoryModal.spec.tsx b/src/components/HistoryModal/HistoryModal.spec.tsx
new file mode 100644
index 0000000..e18b464
--- /dev/null
+++ b/src/components/HistoryModal/HistoryModal.spec.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { AppContext } from 'context/AppContext';
+import { AppAactions } from 'context/Reducer';
+import HistoryModal from 'components/HistoryModal';
+import * as StorageService from 'services/storage';
+
+const getHistorySpy = jest.spyOn(StorageService, 'getHistory');
+const mockHistory = [
+  {
+    date: 'second',
+    code: 'const a = 10',
+  },
+  {
+    date: 'first',
+    code: 'const b = 20',
+  },
+];
+
+describe('<HistoryModal />', () => {
+  const state = {
+    historyModalShown: true,
+  } as AppState;
+  const mockSetState = jest.fn();
+  const dispatch = jest.fn();
+
+  beforeEach(() => {
+    getHistorySpy.mockReturnValue(mockHistory);
+    jest.spyOn(React, 'useState').mockReturnValue([0, mockSetState]);
+    render(
+      <AppContext.Provider value={{ state, dispatch }}>
+        <HistoryModal />
+      </AppContext.Provider>
+    );
+  });
+
+  afterEach(jest.clearAllMocks);
+
+  it('render history list', () => {
+    const historyElement = screen.getByTestId('history-accordion');
+    expect(historyElement.children.length).toEqual(2);
+  });
+
+  it('calls closes the modal on button click', () => {
+    fireEvent.click(screen.getByTestId('modal-close-btn'));
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: AppAactions.TOGGLE_HISTORY_MODAL,
+    });
+  });
+
+  describe('when restoring history', () => {
+    const historyItemIndex = 0;
+    beforeEach(async () => {
+      const restoreButtons = await screen.findAllByRole('button', {
+        name: /Restore/,
+      });
+      fireEvent.click(restoreButtons[historyItemIndex]);
+    });
+
+    it('restore history when restore button click', () => {
+      expect(dispatch).toHaveBeenNthCalledWith(1, {
+        type: AppAactions.LOAD_CODE_SAMPLE,
+        payload: {
+          codeSample: mockHistory[historyItemIndex].code,
+          codeSampleName: '',
+        },
+      });
+    });
+
+    it('dismiss the modal', () => {
+      expect(dispatch).toHaveBeenNthCalledWith(2, {
+        type: AppAactions.TOGGLE_HISTORY_MODAL,
+      });
+    });
+  });
+});
diff --git a/src/components/HistoryModal/HistoryModal.tsx b/src/components/HistoryModal/HistoryModal.tsx
new file mode 100644
index 0000000..eeb2a28
--- /dev/null
+++ b/src/components/HistoryModal/HistoryModal.tsx
@@ -0,0 +1,80 @@
+import { useContext, useState } from 'react';
+import { AppContext } from 'context/AppContext';
+import Modal from 'components/Modal';
+import { AppAactions } from 'context/Reducer';
+import { getHistory } from 'services/storage';
+
+type HistoryModalProps = {};
+
+const HistoryModal: React.FC<HistoryModalProps> = () => {
+  const { state, dispatch } = useContext(AppContext);
+  const [activeIndex, setActiveIndex] = useState(-1);
+
+  const history = getHistory();
+
+  const makeKey = (item: HisotryItem, index: number) => `${item.date}_${index}`;
+
+  const handleHeaderButtonClick = (index: number) => {
+    if (index === activeIndex) {
+      setActiveIndex(-1);
+    } else setActiveIndex(index);
+  };
+
+  const handleRestore = (item: HisotryItem) => () => {
+    const payload = {
+      codeSample: item.code,
+      codeSampleName: '',
+    };
+
+    dispatch({ type: AppAactions.LOAD_CODE_SAMPLE, payload });
+    dispatch({ type: AppAactions.TOGGLE_HISTORY_MODAL });
+  };
+
+  return (
+    <Modal
+      isOpen={state.historyModalShown}
+      onClose={() => dispatch({ type: AppAactions.TOGGLE_HISTORY_MODAL })}
+      title="Code History"
+    >
+      <div className="accordion" data-testid="history-accordion">
+        {history.reverse().map((item, index) => {
+          const isActive = index === activeIndex;
+          return (
+            <div className="accordion-item" key={makeKey(item, index)}>
+              <h2 className="accordion-header">
+                <button
+                  className={`accordion-button ${isActive ? '' : 'collapsed'}`}
+                  type="button"
+                  onClick={() => handleHeaderButtonClick(index)}
+                >
+                  ({item.date} #({index + 1})){' - '}
+                  {item.code.slice(0, 100)}
+                </button>
+              </h2>
+              <div
+                className={`accordion-collapse collapse ${
+                  isActive ? 'show' : ''
+                }`}
+              >
+                <div className="accordion-body">
+                  <pre>{item.code}</pre>
+                  <div className="d-flex justify-content-end">
+                    <button
+                      type="button"
+                      className="btn btn-success"
+                      onClick={handleRestore(item)}
+                    >
+                      Restore
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Modal>
+  );
+};
+
+export default HistoryModal;
diff --git a/src/components/HistoryModal/index.tsx b/src/components/HistoryModal/index.tsx
new file mode 100644
index 0000000..7f283bf
--- /dev/null
+++ b/src/components/HistoryModal/index.tsx
@@ -0,0 +1 @@
+export { default } from 'components/HistoryModal/HistoryModal';
diff --git a/src/components/JsonView/JsonView.spec.tsx b/src/components/JsonView/JsonView.spec.tsx
index 2db3076..0463863 100644
--- a/src/components/JsonView/JsonView.spec.tsx
+++ b/src/components/JsonView/JsonView.spec.tsx
@@ -1,23 +1,27 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import JsonView from 'components/JsonView';
 import { AppContext } from 'context/AppContext';
 import { AppAactions } from 'context/Reducer';
 
 describe('<JsonView />', () => {
-  it('calls dipatch on button click', () => {
-    const state = {
-      display: 'block',
-      result: [''],
-    } as AppState;
-    const dispatch = jest.fn();
+  const state = {
+    display: 'block',
+    result: [''],
+  } as AppState;
+  const dispatch = jest.fn();
 
+  beforeEach(() => {
     render(
-      // eslint-disable-next-line react/jsx-no-constructed-context-values
       <AppContext.Provider value={{ state, dispatch }}>
         <JsonView />
       </AppContext.Provider>
     );
-    fireEvent.click(screen.getByText(/close/i));
+  });
+
+  afterEach(cleanup);
+
+  it('calls dipatch on button click', () => {
+    fireEvent.click(screen.getByTestId('modal-close-btn'));
 
     expect(dispatch).toHaveBeenCalledWith({
       type: AppAactions.TOGGLE_JSON_VIEW,
diff --git a/src/components/JsonView/JsonView.tsx b/src/components/JsonView/JsonView.tsx
index f66b171..300cd07 100644
--- a/src/components/JsonView/JsonView.tsx
+++ b/src/components/JsonView/JsonView.tsx
@@ -2,43 +2,24 @@ import { useContext } from 'react';
 import ReactJsonView from 'react-json-view';
 import { AppContext } from 'context/AppContext';
 import { AppAactions } from 'context/Reducer';
+import Modal from 'components/Modal';
 
 const JsonView: React.FC = () => {
   const { state, dispatch } = useContext(AppContext);
+  const open = state.jsonView !== 'none';
+
+  const handleClose = () => {
+    dispatch({ type: AppAactions.TOGGLE_JSON_VIEW, payload: 'none' });
+  };
 
   return (
-    <div className="modal fade show" style={{ display: state.jsonView }}>
-      <div className="modal-dialog" style={{ maxWidth: 1200 }}>
-        <div className="modal-content">
-          <div className="modal-header">
-            <h4 className="modal-title">JSON View</h4>
-          </div>
-          <div className="modal-body">
-            <div style={{ height: 600, overflow: 'scroll' }}>
-              <ReactJsonView
-                src={state.result.filter(item => item)}
-                theme="monokai"
-                name={false}
-              />
-            </div>
-          </div>
-          <div className="modal-footer">
-            <button
-              type="button"
-              className="btn btn-primary"
-              onClick={() =>
-                dispatch({
-                  type: AppAactions.TOGGLE_JSON_VIEW,
-                  payload: 'none',
-                })
-              }
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+    <Modal isOpen={open} onClose={handleClose} title="JSON View">
+      <ReactJsonView
+        src={state.result.filter(item => item)}
+        theme="monokai"
+        name={false}
+      />
+    </Modal>
   );
 };
 
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
new file mode 100644
index 0000000..e8d181e
--- /dev/null
+++ b/src/components/Modal/Modal.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, title, onClose, children }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal fade show" style={{ display: 'block' }}>
+      <div className="modal-dialog" style={{ maxWidth: 1200 }}>
+        <div className="modal-content">
+          <div className="modal-header text-white bg-dark">
+            <h5 className="modal-title">{title}</h5>
+            <button
+              type="button"
+              className="btn-close btn-close-white"
+              onClick={onClose}
+            >
+              <span className="visually-hidden">Close</span>
+            </button>
+          </div>
+          <div
+            className="modal-body"
+            style={{ maxHeight: '600px', overflowY: 'auto' }}
+          >
+            <div>{children}</div>
+          </div>
+          <div className="modal-footer">
+            <button
+              data-testid="modal-close-btn"
+              type="button"
+              className="btn btn-primary"
+              onClick={onClose}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
new file mode 100644
index 0000000..447a140
--- /dev/null
+++ b/src/components/Modal/index.tsx
@@ -0,0 +1 @@
+export { default } from 'components/Modal/Modal';
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
index 377942d..9f425e6 100644
--- a/src/context/AppContext.tsx
+++ b/src/context/AppContext.tsx
@@ -2,6 +2,12 @@ import { createContext, useMemo, useReducer } from 'react';
 import { getLocalStorage, STORAGE } from 'services/storage';
 import { reducer } from 'context/Reducer';
 
+const getTheme = (): Theme => {
+  const themeFromStorage = getLocalStorage(STORAGE.THEME) as Theme;
+  if (themeFromStorage === 'vs-dark' || themeFromStorage === 'vs-light')
+    return themeFromStorage;
+  return 'vs-dark';
+};
 const initialState: AppState = {
   code: getLocalStorage(STORAGE.CODE),
   codeSample: '',
@@ -9,10 +15,11 @@ const initialState: AppState = {
   result: [],
   error: '',
   loading: false,
-  theme: 'vs-dark',
+  theme: getTheme(),
   display: 'none',
   position: null,
   jsonView: 'none',
+  historyModalShown: false,
 };
 
 export const AppContext = createContext<{
diff --git a/src/context/Reducer.spec.ts b/src/context/Reducer.spec.ts
index 2462e6f..a427d23 100644
--- a/src/context/Reducer.spec.ts
+++ b/src/context/Reducer.spec.ts
@@ -12,6 +12,7 @@ describe('Reducer tests', () => {
     display: 'none',
     position: null,
     jsonView: '',
+    historyModalShown: false,
   };
 
   it('update and persist code when update code action is dispatched', () => {
diff --git a/src/context/Reducer.ts b/src/context/Reducer.ts
index c2c65b8..e5434f3 100644
--- a/src/context/Reducer.ts
+++ b/src/context/Reducer.ts
@@ -1,4 +1,4 @@
-import { setLocalStorage, STORAGE } from 'services/storage';
+import { saveToHistory, setLocalStorage, STORAGE } from 'services/storage';
 
 export const AppAactions = {
   UPDATE_CODE: 'UPDATE_CODE',
@@ -11,6 +11,7 @@ export const AppAactions = {
   TOGGLE_THEME: 'TOGGLE_THEME',
   CLEAR_RESULT: 'CLEAR_RESULT',
   LOAD_CODE_SAMPLE: 'LOAD_CODE_SAMPLE',
+  TOGGLE_HISTORY_MODAL: 'TOGGLE_HISTORY_MODAL',
 };
 
 const handleCodeUpdate = (state: AppState, action: Action): AppState => {
@@ -35,12 +36,22 @@ const handleLoadCodeSample = (state: AppState, action: Action): AppState => {
   return { ...state, codeSample, codeSampleName };
 };
 
+const handleCodeRunning = (state: AppState): AppState => {
+  saveToHistory(state.code);
+  return { ...state, loading: true };
+};
+
+const setAppTheme = (state: AppState, action: Action) => {
+  setLocalStorage(STORAGE.THEME, action.payload as string);
+  return { ...state, theme: action.payload as Theme };
+};
+
 export const reducer = (state: AppState, action: Action): AppState => {
   switch (action.type) {
     case AppAactions.UPDATE_CODE:
       return handleCodeUpdate(state, action);
     case AppAactions.CODE_RUNNING:
-      return { ...state, loading: true };
+      return handleCodeRunning(state);
     case AppAactions.CODE_RUN_SUCCESS:
       return handleCodeSuccess(state, action);
     case AppAactions.CODE_RUN_ERROR:
@@ -50,11 +61,13 @@ export const reducer = (state: AppState, action: Action): AppState => {
     case AppAactions.TOGGLE_JSON_VIEW:
       return { ...state, jsonView: action.payload as DisplayType };
     case AppAactions.TOGGLE_THEME:
-      return { ...state, theme: action.payload as Theme };
+      return setAppTheme(state, action);
     case AppAactions.LOAD_CODE_SAMPLE:
       return handleLoadCodeSample(state, action);
     case AppAactions.CLEAR_RESULT:
       return { ...state, result: [] };
+    case AppAactions.TOGGLE_HISTORY_MODAL:
+      return { ...state, historyModalShown: !state.historyModalShown };
     default:
       return state;
   }
diff --git a/src/context/types.d.ts b/src/context/types.d.ts
index 7f699cf..04020e6 100644
--- a/src/context/types.d.ts
+++ b/src/context/types.d.ts
@@ -12,6 +12,7 @@ interface AppState {
   display: DisplayType;
   position: null;
   jsonView: string;
+  historyModalShown: boolean;
 }
 
 interface Action {
diff --git a/src/helpers/global.ts b/src/helpers/global.ts
index afd2a6f..195e85c 100644
--- a/src/helpers/global.ts
+++ b/src/helpers/global.ts
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { createStore, combineReducers } from 'redux';
+import * as Redux from 'redux';
 import axios from 'axios';
 import * as luxon from 'luxon';
 import * as dfn from 'date-fns';
@@ -9,5 +9,5 @@ _.extend(window, {
   axios,
   luxon,
   dfn,
-  Redux: { createStore, combineReducers },
+  Redux,
 });
diff --git a/src/helpers/type.d.ts b/src/helpers/type.d.ts
index b3afb6e..c7ca9ed 100644
--- a/src/helpers/type.d.ts
+++ b/src/helpers/type.d.ts
@@ -16,3 +16,8 @@ interface Library {
   use: string;
   version: string;
 }
+
+interface HisotryItem {
+  code: string;
+  date: string;
+}
diff --git a/src/services/storage.spec.ts b/src/services/storage.spec.ts
index c374f59..7ce09dc 100644
--- a/src/services/storage.spec.ts
+++ b/src/services/storage.spec.ts
@@ -7,6 +7,7 @@ describe('Storage tests', () => {
     StorageService.setLocalStorage('mock', 'value');
     expect(setItemSpy).toHaveBeenCalledWith('mock', 'value');
   });
+
   it('Get value from locale storage', () => {
     const getItemSpy = jest.spyOn(Storage.prototype, 'getItem');
     StorageService.getLocalStorage('value');
diff --git a/src/services/storage.ts b/src/services/storage.ts
index e2b81c5..f42d2bf 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -1,5 +1,11 @@
+import { compress, decompress } from 'lz-string';
+
+const MAX_HISTORY_SIZE = 20;
+
 export const STORAGE = {
   CODE: '@abolkog/jscode',
+  HISTORY: 'abolkog/jscode-history',
+  THEME: 'abolkog/jscode-theme',
 };
 
 export const getLocalStorage = (key: string, defaultValue = '') => {
@@ -13,3 +19,31 @@ export const setLocalStorage = (key: string, value: string) => {
 export const clearLocalStorage = (key: string) => {
   localStorage.removeItem(key);
 };
+
+export const saveToHistory = (code: string) => {
+  const history: HisotryItem[] = JSON.parse(
+    localStorage.getItem(STORAGE.HISTORY) || '[]'
+  );
+
+  // Compress the code before saving
+  const compressedCode = compress(code);
+
+  // Check if the code already exists in the history
+  if (!history.some(item => item.code === compressedCode)) {
+    const formattedDate = new Date().toISOString().split('T')[0];
+    history.push({ code: compressedCode, date: formattedDate });
+
+    if (history.length > MAX_HISTORY_SIZE) {
+      history.shift();
+    }
+    localStorage.setItem(STORAGE.HISTORY, JSON.stringify(history));
+  }
+};
+
+export const getHistory = (): HisotryItem[] => {
+  const history = JSON.parse(localStorage.getItem(STORAGE.HISTORY) || '[]');
+  return history.map((item: HisotryItem) => ({
+    ...item,
+    code: decompress(item.code),
+  }));
+};
diff --git a/src/styles/App.css b/src/styles/App.css
index 692d8bb..37c09f3 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -9,8 +9,6 @@ body {
   display: flex;
   flex: 1;
   height: 100%;
-
-
 }
 
 .flex {
@@ -107,4 +105,39 @@ body {
 .text-sm {
   color: #aaa;
   font-size: 0.7rem;
+}
+
+
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modalContent {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 500px;
+  width: 100%;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.closeButton {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
 }
\ No newline at end of file